@charset "UTF-8";

@media only screen and (max-width: 1400px) {
	.top_nav{padding-left: 2%; padding-right: 2%;}
	main #banner_event{right:2%;}
}
@media only screen and (max-width: 1280px) {
	.inner{width:96%;}
	.top_nav .header_logo{width:140px;}
	.top_nav .nav_style li{margin:0 5px;}

	main > section > .inner{width:90%;}
	main > section > .box h1{font-size: 42pt;}

	main #main_visual{margin-top:-96px;}
		main #main_visual h1 .wi{width: 350px;}
		main #main_visual h3{font-size: 21pt;}
		main #banner_event{width:196px;}
}

@media only screen and (max-width: 1200px) {
	.top_nav .header_right{padding-right: 2vw;}
	.top_nav .nav_style{font-size:17px;}
	.top_nav .nav_style li a{padding:3px 14px 0;}
	.top_nav .nav_style .user{font-size:small;}

	main > section > .box h1{font-size: 40pt;}
	main #main_visual h1 .wi{width: 340px;}
	main #main_visual h3{font-size: 20pt;}
	main #banner_event{width:184px;}

	main #main_review{}
		main #main_review ul li{width:45%;}

	main #main_start{}
		main #main_start ul li.arrow{padding: 0px 10pt;}

}

@media only screen and (max-width: 1080px) {
	.top_nav .nav_style{font-size:16px;}
	.top_nav .nav_style .reservation strong{display:none;}

	main > section > .box h1{font-size: 38pt;}
	main #main_attention ul li{padding:20pt; font-size:120%;}
	main #main_attention ul li .ico img{height:100px;}

	main #main_start{}
		main #main_start ul li .ico img{height:100px;}

	#page .page_top{background-size:cover; height:200px;}
	#page .con{padding: 50pt 0;}
}

@media only screen and (max-width: 980px) {
	.top_nav .header_menu{display:none;}
	.top_nav .nav_style .btn_hamburger{display:table;}
	.top_nav .nav_style .user i{display:inline; }
	.top_nav .nav_style .user a:after,
	.top_nav .nav_style .user strong{display:none;}
	.top_nav .nav_style .user a:first-child{padding-right:5px;}
	.top_nav .nav_style .user a:last-child{padding-left:5px;}


	main > section > .inner{width:100%;}
	main > section > .box h1{font-size: xxx-large;}
	main > section > .box h2{font-size:32pt;}

	main #main_visua{margin-top:-94px;}
		main #main_visual .box{display:block;}
		main #main_visual .box > div.txt{
			position: absolute; top:5vh; left:50%; z-index:1;
			width:90%; text-align:center; padding-top:100px;
				-webkit-transform:translate(-50%, 0);
				-moz-transform:translate(-50%, 0);
				-ms-transform:translate(-50%, 0);
			transform: translate(-50%, 0);
		}
		main #main_visual .box > div.visual{
			position: absolute; bottom:0; left:0; z-index:0;
			width:100%; height:100%; overflow:hidden;
		}
		main #main_visual .box > div.visual .children{
			position: absolute; bottom:-5vh; left:50%;
			width:100%; max-width:480px;
			text-align: center;
				-webkit-transform:translate(-50%, 0);
				-moz-transform:translate(-50%, 0);
				-ms-transform:translate(-50%, 0);
			transform: translate(-50%, 0);
		}
		main #main_visual .box > div.visual .children img{}
		main #main_visual h1 .wi{margin-left:auto; margin-right:auto; width: 290px; max-width:70%;}
		main #main_visual h3{margin-top: 5vh; font-size: x-large;}
		main #main_visual h5{margin-top:2vh; font-size: 100%;}
		main #main_visual h5 span{margin-bottom: 1vh;}
		main #main_visual .txt_s{
			padding-bottom:10vh;
			background: rgba(251,233,96,0);
			background: -moz-linear-gradient(top, rgba(251,233,96,0) 0%, rgba(251,233,96,1) 20%, rgba(251,233,96,1) 40%, rgba(251,233,96,0.83) 50%, rgba(251,234,96,0) 100%);
			background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(251,233,96,0)), color-stop(20%, rgba(251,233,96,1)), color-stop(40%, rgba(251,233,96,1)), color-stop(50%, rgba(251,233,96,0.83)), color-stop(100%, rgba(251,234,96,0)));
			background: -webkit-linear-gradient(top, rgba(251,233,96,0) 0%, rgba(251,233,96,1) 20%, rgba(251,233,96,1) 40%, rgba(251,233,96,0.83) 50%, rgba(251,234,96,0) 100%);
			background: -o-linear-gradient(top, rgba(251,233,96,0) 0%, rgba(251,233,96,1) 20%, rgba(251,233,96,1) 40%, rgba(251,233,96,0.83) 50%, rgba(251,234,96,0) 100%);
			background: -ms-linear-gradient(top, rgba(251,233,96,0) 0%, rgba(251,233,96,1) 20%, rgba(251,233,96,1) 40%, rgba(251,233,96,0.83) 50%, rgba(251,234,96,0) 100%);
			background: linear-gradient(to bottom, rgba(251,233,96,0) 0%, rgba(251,233,96,1) 20%, rgba(251,233,96,1) 40%, rgba(251,233,96,0.83) 50%, rgba(251,234,96,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbe960', endColorstr='#fbea60', GradientType=0 );
		}
		main #main_visual .btn_start:hover{margin-left:0; margin-top:5pt;}
		.dreamElement li{left:20%;}

	main #main_attention{}
		main #main_attention ul{
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
			flex-direction: column;
				-webkit-align-items: center;
				-ms-flex-align: center;
			align-items: center;
		}
		main #main_attention ul li{
				display: -ms-flexbox;
				display: -webkit-flex;
			display: flex;
				-webkit-align-items: center;
				-ms-flex-align: center;
			align-items: center;
			padding:10pt 20pt; width:80%; margin-bottom:30pt; text-align:left;
		}
		main #main_attention ul li:last-child{margin-bottom:0;}
		main #main_attention ul li .ico{width:120px; max-width:30%; height:auto; text-align:center; }
		main #main_attention ul li span{flex:1; padding-left:15pt;}

	main #main_strength{}
		main #main_strength ul{padding-left:4%; padding-right:4%;}
		main #main_strength ul li{width:46%;}
		main #main_strength ul li a{padding:15pt;}

	main #main_detail{}
		main #main_detail ul{width:94%;}
		main #main_detail li {font-size:14px;}
		main #main_detail li .photo{width:260px;}
		main #main_detail li .txt{padding-left: 250px;}

	main #main_review{}
		main #main_review ul{width:94%; width:90%; margin-left:5%;}
		main #main_review ul li{width:47%;}

	main #main_start{}
		main #main_start ul{width:94%; margin-left:auto; margin-right:auto;}
		main #main_start ul li{padding: 20pt 10pt;}
		main #main_start ul li.arrow i{font-size:40pt;}
		main #main_start ul li .txt .t1{font-size: 16pt; line-height: 120%;}

}

@media only screen and (max-width: 800px) {
	main #banner_event{display:none;}
	main > section > .box h2{font-size:30pt;}

	main #main_strength{}
		main #main_strength ul li .ico{width:100pt; height:100pt;}
		main #main_strength ul li .txt h3{font-size: 16pt;}
		main #main_strength ul li .txt span{font-size:13pt;}

	main #main_product{}
		main #main_product .box{max-width:100%;}
		main #main_product .product{margin-bottom:30pt;}
		main #main_product ul{padding:0 4%;}
		main #main_product ul li{width:50%;}
		main #main_product ul li dl{font-size:15pt; letter-spacing:-1pt;}
		main #main_product ul li dl dt{width:20pt; height:20pt; padding-top:5pt; margin-right:3pt;}

	main #main_effect{}
		main #main_effect ul li .txt h3{font-size: 16pt;}
		main #main_effect ul li .txt span{font-size: 13pt;}

	main #main_review{}
		main #main_review ul li .txt .t1{font-size: 110%;}
		main #main_review ul li .txt .t2{font-size: 90%;}

	main #main_start{}
		main #main_start ul li.arrow{padding: 0px 5pt;}
		main #main_start ul li.arrow i{font-size:30pt;}
		main #main_start ul li .ico img{height:80px;}
		main #main_start ul li .txt .t1{font-size: 14pt; line-height: 120%;}
		main #main_start .btn_area a{font-size:40pt;}

	#apply .apply_top{padding:50pt 0;}
	#apply .apply_top img{max-width: 80%;}
	#apply .apply_event{padding:0;}
		.apply_event_item .item_list{
				-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
		.apply_event_item .item_list li{width:45%; margin-bottom:20pt;}
	#page .con{padding: 40pt 0;}
	.apply_order .txt_box,
	.apply_order .box_refund .refund{font-size:12px;}
	.apply_order .box_payment .box_price{width:100%;}

}

@media only screen and (max-width: 600px) {
	.top_nav{padding-top:20px; padding-bottom:20px;}
	.top_nav.scroll-to-fixed-fixed{padding-top:10px; padding-bottom:10px;}
	.top_nav .nav_style{height:32pt;}
	.top_nav .nav_style .btn_hamburger a{padding-left:6px; padding-right:6px;}
	.top_nav .header_logo{width:130px;}
	main > section > .box h1{font-size: 220%; letter-spacing:-2pt;}
	main > section > .box h2{font-size:26pt;}

	main #main_visual{margin-top:-92px;}
		main #main_visual h1 .wi{}
		main #main_visual h3{margin-top: 5vh; font-size: x-large;}
		main #main_visual h5{margin-top:2vh; font-size: 100%;}

	main #main_strength{}
		main #main_strength h2 .num{width: 40pt; height:40pt;}
		main #main_strength h2 .num span{margin-top:2pt; margin-left:-1pt;}
		main #main_strength ul li{width:96%;}
		main #main_strength ul li a{padding:15pt;}
		main #main_strength ul li .ico{width:80pt; height:80pt;}
		main #main_strength ul li .txt span{margin-top: 5pt;}

	main #main_product{}
		main #main_product .product .txt{font-size:12px;}
		main #main_product ul li{width:100%; float:none;}
		main #main_product ul li dl{margin-bottom:15pt; font-size:14pt; letter-spacing:0pt;}

	main #main_detail{}
		main #main_detail li .photo{width:240px;}
		main #main_detail li .txt{padding-left: 220px;}
		main #main_detail li .txt .t1{font-size:160%;}
		main #main_detail li .txt .t2{font-size:130%; margin-top:10pt;}

	main #main_effect{}
		main #main_effect ul li{width:96%;}
		main #main_effect ul li .ico {width: 80pt; height: 80pt;}
		main #main_effect ul li .txt span{margin-top: 5pt;}

	main #main_review{}
		main #main_review ul li{width:96%;}

	main #main_start{}
		main #main_start ul{
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
			flex-direction: column;
			width:90%; max-width:300px;
		}
		main #main_start ul li{}
		main #main_start ul li.arrow{padding:10pt 0;}
		main #main_start ul li.arrow.forward{display:none;}
		main #main_start ul li.arrow.down{display:block;}
		main #main_start ul li.arrow i{font-size:50pt;}

	#apply .tit{margin-bottom:30pt;}

	#page .page_top{height:160px;}
	#page .page_top h1{font-size:36pt;}
	#page .page_tab{margin:0 auto 30pt;}


	.form_input .input_list dl{margin-bottom:10px;}
	.form_input .input_list dl dt span{height:40px;}
	.form_input .input_list dl dd .form_inline_btn a{height:40px; line-height:40px;}
	.apply_order .form_inline_btn a{height: 40px; line-height: 40px;}
	.apply_order .user_info > div:first-child{min-width: 130px; width: 25% !important;}
}

@media only screen and (max-width: 480px) {
	.top_nav {padding-top:12px; padding-bottom:12px;}
	.top_nav .header_logo{width:120px;}

	main > section > .box h2{font-size:22pt; letter-spacing:-1pt;}

	main #main_visual{margin-top: -72px;}
		main #main_visual h3{font-size:large}
		main #main_visual h5{font-size:90%;}
		main #main_visual h5 span:first-child{display:none;}
		main #main_visual .btn_start{padding:11pt 20pt 8pt; font-size:large;}
		.dreamElement li{left:0%;}

	main #main_attention ul li{font-size:110%;}

	main #main_strength{}
		main #main_strength h2 .num{width: 30pt; height:30pt;}
		main #main_strength h2 .num span{margin-top:2pt; margin-left:-1pt;}
		main #main_strength ul li{width:96%;}
		main #main_strength ul li a{padding:15pt;}
		main #main_strength ul li .ico{width:60pt; height:60pt;}
		main #main_strength ul li .txt span{margin-top: 5pt;}

	main #main_product{}
		main #main_product .product{padding:10pt 0;}
		main #main_product .product .txt{margin-top: 20pt; text-align:center;}

	main #main_detail{}
		main #main_detail li{padding:0;}
		main #main_detail li .photo{width:240px; position: relative; }
		main #main_detail li .txt{padding:0; margin-top:-100px; padding:130px 20pt 20pt 20pt;}

	main #main_start .btn_area a{font-size:30pt;}

	#page .con{font-size:13px;}
	#page .page_top{height:140px;}
	#page .page_top h1{font-size:30pt;}
	#page .page_tab > ul > li > a > span{padding:20px 10px;}
	#page .page_tab > ul > li:first-child > a > span{padding-left:20px;}
	#page .page_tab > ul > li:last-child > a > span{padding-right:20px;}
	#page .page_tab > ul > li > a:after{height: 18px; margin-top: -8px;}

}

@media only screen and (max-width: 400px) {
	.top_nav .nav_style{font-size: 14px; height: 27pt;}
	.top_nav .nav_style li a{padding: 3px 10px 0;}
	.top_nav .nav_style .user i{font-size:23px;}
	.top_nav .nav_style .user a:first-child{padding-right:0;}
	.top_nav .nav_style .btn_hamburger i{font-size:23px;}
	.top_nav .nav_style .btn_hamburger a {padding-left: 5px; padding-right: 5px;}
	.input_postcode{max-width:100px !important;}

	main #main_visual{margin-top:-70px;}
	main #main_visual h1 br{display:block;}
	main #main_visual h5{font-size:small;}
	main #main_visual h5 br{display:none !important;}
	.dreamElement li{left:-15%;}

	main #main_detail li .txt .t1{font-size:150%;}
		main #main_detail li .txt .t2{font-size:110%; margin-top:10pt;}

	#page .page_tab > ul > li > a > span{padding:15px 8px;}
	#page .page_tab > ul > li > a:after{height: 15px; margin-top: -8px;}
	.apply_order .user_info > div:first-child{min-width: 102px;}
}

@media only screen and (max-width: 310px) {
	body{width:310px;}
	main > section > .box h1{font-size:20pt; letter-spacing:-2pt;}
	main #main_visual{margin-top:-62px;}
		main #main_visual h1 .wi{max-width:200px}
		.dreamElement li{left:-25%;}
	main #main_start .btn_area a{font-size:24pt;}
	#page .page_top{height:120px;}
	#page .page_top h1{font-size:24pt;}

	#page .page_tab > ul > li > a{font-size:90%;}



}