body{
	background-color: #0091EA;
	/*background: rgb(0,145,234);
	background: -moz-linear-gradient(90deg, 
		rgba(0,145,234,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 80%, 
		rgba(0,145,234,1) 100%);
	background: -webkit-linear-gradient(90deg, 
		rgba(0,145,234,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 80%, 
		rgba(0,145,234,1) 100%);
	background: linear-gradient(90deg, 
		rgba(0,145,234,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 83%, 
		rgba(0,145,234,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr="#0091ea",
		endColorstr="#0091ea",
		GradientType=1);*/
}
.sns_body.ofn .sns_container{
	margin-right: 16px;
}
.sns_body.ofn .sns_regopt{
	/*margin-right: 46px;*/
}
.sns_body.ofn .sns_navi{
	padding-right: 16px;
}
.--bg{
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
.--ex{
	height: 150px;
}
	.sns-title{
		width: 100%;
		margin-top: 25px;
		font-size: 1.2em;
		text-indent: 45px;
		color: #919191;
	}
		.sns-title.--sub{
			margin-top: 5px;
			margin-bottom: -10px;
			font-size: .9em;
		}
	.sns-item{
		height: 40px;
		margin: 20px 0 5px;
		padding: 0 20px;
	}
	.w2{
		width: 75%;
	}
	.w3{
		width: 50%;
	}
		.sns-item select,
		.sns-item input{
			outline: none;
			display: block;
			height: 100%;
			padding: 0 20px;
			border: none;
			font-size: 16px;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			border-bottom: 2px solid rgba(0,0,0, 0.12);
			box-shadow: inset 0 10px 20px -15px rgba(10, 10, 10, .3);
			background: transparent;
		}
	.sns-item select:focus ~ label,
	.sns-item input:focus ~ label,
	.sns-item select:valid ~ label,
	.sns-item input:valid ~ label{
		transform: translateY(-20px);
		padding: 0 5px;
		font-size: 14px;
		color: #919191;
	}
	.sns-item label{
		pointer-events: none;
		top: 10px;
		left: 30px;
		font-size: 16px;
		transition: all 0.3s ease;
		background: #efefef;
	}
		.sns-item label span{
			font-size: .8em;
			color: #d35252;
		}
		.sns-item label .smp-l-icn{
			pointer-events: auto;
			margin-top: 1px;
			margin-left: 8px;
		}

	.sns-item .underline{
		bottom: 0;
		height: 2px;
		width: calc(100% - 40px);
	}
	.sns-item .underline:before{
		position: absolute;
		content: "";
		height: 2px;
		width: 100%;
		background: #e76a11;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform 0.3s ease;
	}
	.sns-item input:focus ~ .underline:before,
	.sns-item input:valid ~ .underline:before,
	.sns-item select:focus ~ .underline:before,
	.sns-item select:valid ~ .underline:before{
		transform: scale(1);
	}
	#sns_accsp-name{
		margin-left: 30px;
	}
	.sns-item input.--dis ~ .underline:before{
		display: none;
	}
	#sns_confirm,
	#sns_proceed{
		margin-right: 25px;
		color: #efefef;
		padding: 10px 15px;
		background-color: #5c8ce3;
	}
	#sns_confirm:hover,
	#sns_proceed:hover{
		cursor: pointer;
		background-color: #2c63c5;
	}
	#sns_confirm:active,
	#sns_proceed:active{
		padding: 11px 15px 9px;
	}
.sns_regopt{
	line-height: 50px;
	font-size: 1.2em;
	background-color: #FFAB00;
}
	.sns_regopt:hover{
		cursor: pointer;
		color: #efefef;
		background-color: #D79101;
	}
		.s-r-button{
			left: -9999px;
		}
.sns_navi{
	height: 50px;
	box-shadow: 0 10px 20px rgba(10, 10, 10, .15);
	/*background-color: #dfdfdf;*/
	background-color: #FFAB00;
	/*background: rgb(255,171,0);
	background: -moz-linear-gradient(90deg, 
		rgba(255,171,0,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 80%, 
		rgba(255,171,0,1) 100%);
	background: -webkit-linear-gradient(90deg, 
		rgba(255,171,0,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 80%, 
		rgba(255,171,0,1) 100%);
	background: linear-gradient(90deg, 
		rgba(255,171,0,1) 0%, 
		rgba(223,223,223,1) 17%, 
		rgba(223,223,223,1) 83%, 
		rgba(255,171,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(
		startColorstr="#FFAB00",
		endColorstr="#FFAB00",
		GradientType=1);*/
}
	.s-n-wrap{
		max-width: 1250px;
		box-shadow: 0px 0 50px 60px #dfdfdf;;
		background-color: #dfdfdf;
	}
		.s-nh-logo{
			width: 44px;
			height: 44px;
			margin-top: 3px;
			background-image: url(../im/logo.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
		}
		.s-nh-name{
			margin-left: 15px;
			line-height: 50px;
			font-size: 1.4em;
		}
	.s-n-links{
		padding-left: 25px;
		font-size: .8em;
	}
		.s-nl-link,
		.s-nl-lounge{
			margin: 5px 3px;
			padding: 1px 20px;
			line-height: 40px;

			transition: .3s;
		}
		.s-nl-lounge{
			margin-left: 30px;
			color: #efefef;
			background-color: #0091EA;
		}
		.s-nl-link:not(.ac):hover{
			cursor: default;
			background-color: #EDA000;
		}
		.s-nl-lounge:hover{
			cursor: pointer;
			background-color: #057ac1;
		}
		.s-nl-link.ac{
			line-height: 50px;
			margin: 0 3px;
			color: #efefef;
			background-color: #D79101;
		}
		.s-nl-lounge:active{
			padding: 2px 20px 0;
		}
.sns_wrap{
	max-width: 1300px;
	margin-top: 50px;
	font-size: .9em;
	box-shadow: 0px 0 45px 40px #dfdfdf;
	background-color: #dfdfdf;
}
	.sns-spacer{
		width: 100%;
		height: 30px;
	}
	.s-cc-spacer{
		width: 1px;
		height: 350px;
	}
	.s-w-header{
		max-height: 910px;
		height: calc( 100vh - 50px );
		background-color: #dfdfdf;
	}
		.s-wh-bg{
			background-repeat: no-repeat;
			background-size: initial;
		}
		.s-wh-bga{
			background-image: url(../im/blue_wave.png);
			background-position-x: 0px;
			background-position-y: 20px;
		}
		.s-wh-bgb{
			background-image: url(../im/orange_wave.png);
			background-position-x: -200px;
			background-position-y: -100px;
		}
		.s-wh-logo{
			width: 440px;
			height: 486px;
			filter: drop-shadow(0 0 0.75rem white);
			background-image: url(../im/logo.png);
			background-color: rgba(250, 250, 250, .3);
			background-size: initial;
		}
	.s-w-about{
		margin-top: 50px;
		padding: 0 50px;
	}
		.s-wa-headim{
			width: 550px;
			height: 500px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/about_header.png);
		}
		.s-wa-headim3{
			width: 550px;
			height: 350px;
			margin-top: 50px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/about_header3.jpg);
		}
		.s-wa-headim2{
			width: 550px;
			height: 270px;
			margin-top: 50px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/about_header2.jpg?v=1);
		}
		.s-wa-title{
			margin-top: 35px;
			margin-left: 25%;
			font-size: 1.8em;
		}
		.s-wa-content{
			width: 50%;
			line-height: 2.1em;
			margin-left: 25%;
		}
	.s-w-service{
		margin-top: 150px;
		padding: 0 50px;
	}
		.s-ws-headim{
			width: 550px;
			height: 575px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/service_header.jpg?v=1);
			background-size: cover;
		}
		.s-ws-headim2{
			width: 550px;
			height: 325px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/service_header2.jpg);
		}
	.s-w-contact{
		margin-top: 150px;
		padding: 0 50px;
	}
		.s-wc-headim{
			width: 550px;
			height: 200px;
			filter: drop-shadow(5px 10px 1.3rem rgba(10, 10, 10, .3));
			background-image: url(../im/contact_header.png);
		}
.sns_lounge{
	top: 48px;
	width: 50px;
	height: 0;
	padding: 0;
	box-shadow: -1px 10px 15px -10px rgba(10, 10, 10, .3);
	transition: .2s;
	background-color: #efefef;
}
.sns_lounge.shw{
	width: 300px;
	height: 200px;
	padding: 10px 15px;
}
	.sns_lg-label{
		margin: 10px 25px 0;
	}
	#sns_lg-login,
	#sns_lg-register{
		margin: 15px 20px 0;
		padding: 10px 0;
		color: #efefef;
		background-color: #0091EA;
	}
	#sns_lg-register{
		margin-bottom: 10px;
		background-color: #FFAB00;
	}
	#sns_lg-login:hover,
	#sns_lg-register:hover{
		cursor: pointer;
		background-color: #057ac1;
	}
	#sns_lg-register:hover{
		background-color: #D79101;
	}
.sns_reg-form{
	max-height: 0;
	transition: .3s;
	background-color: rgba(250, 250, 250, .7);
}
.sns_reg-form.shw{
	max-height: 100%;
}
	.s-rf-wrap{
		width: 45%;
		min-width: 750px;
		margin: 30px 0;
		padding: 20px;
		border: 7px solid #ddd;
		background-color: #efefef;
	}
		.s-rf-title{
			font-size: 1.2em;
		}
		.s-rf-close{
			margin-top: 10px;
			margin-right: 15px;
			padding: 0 10px 4px;
			color: #efefef;
			background-color: #d14f4f;
		}
		.s-rf-close{
			cursor: pointer;
			background-color: #bd4040;
		}
		#sns_reset,
		#sns_edit{
			margin-left: 25px;
			padding: 10px 0;
			font-size: .8em;
		}
		#sns_reset:hover,
		#sns_edit:hover{
			cursor: pointer;
			text-decoration: underline;
		}
		.sns_confirm_{
			margin-right: 30px;
			font-size: .8em;
		}
	.footer{
		font-size: .8em;
	}
.sns-item input.--dis{
	border-bottom-color: transparent;
	box-shadow: 0 0 transparent;
}
.sns-title.--fade,
.sns-item label.--fade{
	color: #c3c3c3 !important;
}
.menu_{
	left: -9999px;
}

._menu{
	display: none;
	width: 30px;
	height: 30px;
	margin-top: 10px;
	margin-right: 15px;
	cursor: pointer;
}
	._menu ._line{
		width: 100%;
		height: 6px;
		background-color: #2d2d2d;
		transition: width .3s;
	}
		._line:after,
		._line:before{
			content: '';
			width: 100%;
			height: 6px;
			position: absolute;
			display: block;
			background-color: #2d2d2d;

			-moz-border-radius: 0.30em;
			-webkit-border-radius: 0.30em;
			-khtml-border-radius: 0.30em;
			border-radius: 0.30em;
		}
		._line:before{
			margin-top: -12px;
			animation: .4s a_menu_tcr forwards;
		}
		._line:after{
			margin-top: 12px;
			animation: .4s a_menu_tdr forwards;
		}
	._menu.ac ._line{
		width: 6px;
	}
	._menu.ac ._line:before{
		animation: .4s a_menu_tc forwards;
	}
	._menu.ac ._line:after{
		animation: .4s a_menu_td forwards;
	}
.menu {
	left: -9999px;
  --s: 100px; /* control the size */
  --c: black; /* the color */
  
  margin-top: -25px;
  margin-right: -70px;
  transform: scale(.3);
  height: var(--s);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 80%,
    40% 100%;
  position: relative;
  clip-path: inset(0 25%);
  -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  cursor: pointer;
  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
.menu:before,
.menu:after {
  content:"";
  position: absolute;
  border-radius: var(--s);
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));
}

.menu:checked {
  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s;
}
.menu:checked:before {
  transform: rotate(45deg);
}
.menu:checked:after {
  transform: rotate(-45deg);
}
.menu:focus-visible {
  clip-path: none;
  -webkit-mask: none;
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
}

.menu_{
	height: 0;
	margin-top: 50px;
	padding: 0;
	transition: .2s;
	background-color: #efefef;
}
.menu_.shw{
	height: calc(100% - 50px);
	padding: 25px;
}
	.s-nl-link_{
		margin-bottom: 3px;
		padding: 10px 0;
	}
	.s-nl-link_:hover{
		cursor: default;
		background-color: #EDA000;
	}
	.s-nl-link_.ac{
		color: #efefef;
		background-color: #D79101;
	}
	.s-nl-lounge_{
		margin-top: 50px;
		padding: 10px 15px;
		color: #efefef;
		background-color: #0091EA;
	}
	.s-nl-lounge_:hover{
		cursor: pointer;
		background-color: #057ac1;
	}
	.s-nl-lounge_:active{
		padding: 11px 15px 9px;
	}

@media screen and (max-width: 1200px){
	.s-nh-logo{
		margin-left: 25px;
	}
}
@media screen and (max-width: 980px){

}
@media screen and (max-width: 799px){

}
@media screen and (max-width: 655px){

}
@media only screen 
	and (max-width: 799px)
	and (orientation: portrait){
		.sns_wrap{
			font-size: .9em;
		}
	.s-n-links{
		position: absolute;
		left: -9999px;
	}
	._menu{
		display: inherit;
	}
		.menu_{
			left: 0px;
		}
		.sns_lounge.shw{
			left: 0;
			width: 100%;
			height: calc(100% - 47px);
		}
	.s-rf-wrap{
		width: 95%;
		min-width: auto;
		margin: 15px 0;
	}
		.sns-item{
			width: 100%;
		}
	.s-w-about,
	.s-w-service,
	.s-w-contact{
		margin-top: 50px;
		padding: 0 15px;
	}
		.s-wh-bg{
			background-size: auto 97%;
		}
			.s-wh-bga{
				background-position-y: 70px;
			}
			.s-wh-bgb{
				background-position-y: -50px;
			}
		.s-wh-logo{
			width: 95%;
			background-size: contain;
		}
		.s-wa-headim2,
		.s-wa-headim3,
		.s-wa-headim,
		.s-ws-headim,
		.s-ws-headim2,
		.s-wc-headim{
			width: 100%;
			height: 400px;
			filter: drop-shadow(5px 5px 1.1rem rgba(10, 10, 10, .3));
		}
			.s-wa-headim2{
				height: 250px;
			}
			.s-wa-headim3{
				height: 315px;
			}
			.s-ws-headim{
				height: 575px;
			}
			.s-ws-headim2{
				height: 325px;
			}
			.s-wc-headim{
				height: 200px;
			}
		.s-wa-title,
		.s-ws-title,
		.s-wc-title{
			margin-top: 10px;
			margin-left: 5%;
		}
		.s-wa-content,
		.s-ws-content,
		.s-wc-content{
			width: 90%;
			margin: auto;
		}

	.sns_regopt.ac{
		left: -9999px;
	}
	.sns_regopt{
		display: inline-block;
	}

	.footer{
		padding-bottom: 60px;
	}
}
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
	.menu{
		content: "V";
		line-height: 40px;
		margin-right: -30px;
		background-color: transparent;
	}
	.menu:checked{
		content: "X";
	}
}

@keyframes a_menu_tc{
	0%{
		width: 100%;
		margin-left: 0px;
	}
	50%{
		width: 6px;
		margin-top: 0px;
		transform: rotate(0deg);
		margin-left: 0px;
	}
	100%{
		margin-top: 0px;
		width: 120%;
		transform: rotate(45deg);
		margin-left: -16px;
	}
}
@keyframes a_menu_td{
	0%{
		width: 100%;
		margin-left: 0px;
	}
	50%{
		width: 6px;
		margin-top: 0px;
		transform: rotate(0deg);
		margin-left: 0px;
	}
	100%{
		margin-top: 0px;
		width: 120%;
		transform: rotate(-45deg);
		margin-left: -16px;
	}
}
@keyframes a_menu_tcr{
	0%{
		margin-top: 0px;
		width: 120%;
		transform: rotate(45deg);
		margin-left: -16px;
	}
	50%{
		width: 6px;
		margin-top: 0px;
		transform: rotate(0deg);
		margin-left: 8px;
	}
	100%{
		width: 100%;
		margin-left: 0px;
	}
}
@keyframes a_menu_tdr{
	0%{
		margin-top: 0px;
		width: 120%;
		transform: rotate(-45deg);
		margin-left: -16px;
	}
	50%{
		width: 6px;
		margin-top: 0px;
		transform: rotate(0deg);
		margin-left: 8px;
	}
	100%{
		width: 100%;
		margin-left: 0px;
	}
}