@charset "utf-8";

/*.design-bg{ width: 1360px; height: 9692px; background: url('../design_img/top.png') 0 0 no-repeat; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: -1; opacity: .5; background-size: 1360px; }*/

.roboto{
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.open-sans{
	font-family: "Open Sans", sans-serif;
	font-weight: 800;
	font-style: normal;
}

.noto-sans-jp-r{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}

.noto-sans-jp-b{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 700;
}

.m-plus-rounded-1c{
	font-family: "M PLUS Rounded 1c", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.poppins{
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.dela-gothic-one{
	font-family: "Dela Gothic One", sans-serif;
	font-weight: 400;
	font-style: normal;
}



html 					{ overflow-x: hidden; }
body					{ font-family: "Noto Sans JP", sans-serif; font-weight: 500; line-height: 1; color: #121212; }

main 					{ position: relative; z-index: 1; }
img 					{ vertical-align: bottom; max-width: 100%; height: auto; }
svg 					{ vertical-align: bottom; max-width: 100%; height: auto; }
h1,h2,h3,h4,h5,p,dl,dt,dd{ margin: 0; font-weight: 400; }
p,dl,dt,dd 				{ line-height: 1.5; text-align: justify; }
hr 						{  }
figure 					{ margin: 0; }
.thumbImage 			{ height: auto; }
.wp-pagenavi 			{ text-align: center; }
.wp-pagenavi a:hover,.wp-pagenavi span.current{ color: #fff; background-color: #ec6434; opacity: 1; border: 1px solid #dbdbdb; }

.animation{ opacity: 0; }
.show{ -webkit-animation-name: fadeIn; animation-name: fadeIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
@-webkit-keyframes fadeIn{
	from {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}
@keyframes fadeIn{
	from {
		-webkit-transform: translateY(20px);
		transform: translateY(20px);
		opacity: 0;
	}
	to {
		-webkit-transform: translateY(0);
		transform: translateY(0);
		opacity: 1;
	}
}

@media print, screen and (min-width: 751px) {
.sp 					{ display: none!important; }
body 					{ font-size: 16px; }
a 						{ -webkit-transition: .3s; transition: .3s; }
a:hover 				{ opacity: .6; }
.master 				{ width: 90%; max-width: 1110px; margin: 0 auto; }

a 						{ -webkit-transition: .2s; transition: .2s; }
a:hover 				{ opacity: .6; }
/*.wp-pagenavi 			{ margin-top: 83px; }
.wp-pagenavi a,.wp-pagenavi span{ margin: 0 1px; padding: 8px 10px; color: #4c3936; display: inline-block; font-size: .7rem; border: 1px solid transparent;  }
.wp-pagenavi a:hover{ border: 1px solid #dbdbdb; }*/


#header{ width: 100%; height: 105px; padding: 35px; position: fixed; top: 0; left: 0; background-color: #00AFCC; z-index: 99999; opacity: 0; visibility: hidden; -webkit-transition: .5s; transition: .5s; }
#header #nav{  }
#header #nav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#header #nav ul li{ margin: 0 15px; }
#header #nav ul li a{ padding: 10px; display: block; border: 1px solid transparent; border-radius: calc(infinity * 1px); color: #fff; }
#header #nav ul li a:hover{ opacity: 1; border: 1px solid #fff; }
#header #nav ul li.btn a{ width: 140px; text-align: center; border: 1px solid #FFF000; background-color: #FFF000; color: #00AFCC; }
#header #nav ul li.btn a:hover{ opacity: .6; }

#header.fixed{ height: 70px; padding: 16px; opacity: 1; visibility: visible; }


#mv{ padding: 40px 0 0; background: #00AFCC url('../img/mv-bg.png') 50% 0 no-repeat; background-size: 100%; position: relative; }
#mv:after{ content: ''; width: 100%; height: 117px; background: url('../img/mv-aftter.png') 50% 0 repeat-x; background-size: 21px; display: block; position: absolute; bottom: -115px; }

#mv .mv01{ width: 100%; max-width: 1280px; margin: 0 auto; position: relative; }
#mv .mv01 #mvSlider{  }
/*#mv .mv01 h1{ width: 100%; padding: 0 5%; position: absolute; top: 7%; left: 0; text-align: center; z-index: 2; }*/
#mv .mv01 .logo{ width: 100%; padding: 0 5%; position: absolute; bottom: -5.5%; left: 0; text-align: center; z-index: 2; }
/*#mv .mv01 .bnr{ position: absolute; bottom: 40px; right: 40px; z-index: 2; }*/

#mv #mvNav{ margin-top: 65px; }
#mv #mvNav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#mv #mvNav ul li{ margin: 0 15px; }
#mv #mvNav ul li a{ padding: 10px; display: block; border: 1px solid transparent; border-radius: calc(infinity * 1px); color: #fff; }
#mv #mvNav ul li a:hover{ opacity: 1; border: 1px solid #fff; }
#mv #mvNav ul li.btn a{ width: 140px; text-align: center; border: 1px solid #FFF000; background-color: #FFF000; color: #00AFCC; }
#mv #mvNav ul li.btn a:hover{ opacity: .6; }

#mv>h2{ margin-top: 40px; text-align: center; font-size: 58px; line-height: 1.5; letter-spacing: .02em; color: #FFF000; }

#mv .mv02{ width: 100%; /*max-width: 1000px;*/ margin: 25px auto 0; position: relative; }
#mv .mv02 #mvSlider2 .sliderItem{ width: 800px!important; position: relative; }
#mv .mv02 #mvSlider2 .sliderItem h2{ position: absolute; top: 10px; left: 60px; font-size: 60px; color: #fff; z-index: 9; text-shadow: 0px 0px 10px rgba(0,0,0,.5); }
#mv .mv02 #mvSlider2 .sliderItem .box{ width: 350px; padding: 30px 25px; position: absolute; bottom: 20px; left: 60px; border-radius: 14px; background-color: #fff; }
#mv .mv02 #mvSlider2 .sliderItem .box h3{ margin-bottom: 18px; font-size: 20px; font-weight: 600; }
#mv .mv02 #mvSlider2 .sliderItem .box p{ font-size: 16px; line-height: 1.8; }
#mv .mv02 #mvSlider2 .sliderItem img{ width: 75%; margin-left: auto; display: block; }
#mv .mv02 .arrow_box{ width: 165px; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 3; }
#mv .mv02 .slide-arrow{ width: 35px; height: 35px; cursor: pointer; border-radius: 50px; -webkit-transition: .5s; transition: .5s; }
.slick-dotted.slick-slider{ z-index: 1; }

#mv .mv02 .prev-arrow{ background: url('../img/slider-arrow01.svg') 50% 50% no-repeat; }
#mv .mv02 .prev-arrow:hover{ background: #FFF000 url('../img/slider-arrow01.svg') 50% 50% no-repeat; }
#mv .mv02 .next-arrow{ margin-left: auto; background: url('../img/slider-arrow02.svg') 50% 50% no-repeat; }
#mv .mv02 .next-arrow:hover{ background: #FFF000 url('../img/slider-arrow02.svg') 50% 50% no-repeat; }

#mv .mv02 .slick-dots{ width: 100px; left: 50%; bottom: -60px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: 4; }
#mv .mv02 .slick-dots li{ width: 2px; margin: 0 7px; }
#mv .mv02 .slick-dots li button{ width: 2px; height: 15px; padding: 0; background-color: #fff; -webkit-transition: .3s; transition: .3s }
#mv .mv02 .slick-active button{ height: 22px!important; }
#mv .mv02 .slick-dots li button:before{ content: none; }
#mv .mv02 .bgIllust{  }
#mv .mv02 .bgIllust img:nth-of-type(1){ position: absolute; bottom: 85px; left: 64px; }
#mv .mv02 .bgIllust img:nth-of-type(2){ position: absolute; bottom: 10px; right: -45px; }

.title{ font-size: 18px; }
.title span:nth-of-type(1){ margin-bottom: 20px; padding-right: 50px; font-size: 40px; letter-spacing: .05em; display: inline-block; background: url('../img/title-icon.svg') 100% 50% no-repeat; }
.title span:nth-of-type(2){ display: block; }

#about{ margin-top: 210px; padding-bottom: 61px; border-bottom: 2px solid #DEDEDE; }
.subTitle{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.subTitle>div:nth-of-type(1){ width: 65px; height: 65px; font-size: 32px; line-height: 65px; background-color: #000; color: #FFF000; text-align: center; border-radius: calc(infinity * 1px); }
.subTitle>div:nth-of-type(2){ width: calc(100% - 95px); margin-left: auto; }
.subTitle>div:nth-of-type(2) p{ font-size: 20px; }
.subTitle>div:nth-of-type(2) h3{ margin-bottom: 12px; font-size: 38px; color: #000; font-weight: 900; line-height: 1.4; }

#about .about01{ margin-top: 40px; }
#about .about01 .box{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#about .about01 .box>figure{ width: 48.65%; }
#about .about01 .box>div{ width: 40%; margin-left: 5%; }
#about .about01 .box>div ul{ margin: 20px 0 30px; }
#about .about01 .box>div ul li{ padding: 0 0 0 45px; font-size: 22px; line-height: 1.5; background: url('../img/about01-icon.svg') 0 5px no-repeat; }
#about .about01 .box>div ul li:nth-of-type(n+2){ margin-top: 25px; }
#about .about01 .box>div p{ line-height: 2; }

#about .about02{ margin-top: 67px; }
/*#about .about02 .box{ margin-top: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#about .about02 .box>div{ width: 31.532%; padding: 33px 20px 36px; text-align: center; position: relative; background-color: #00AFCC; border-radius: 30px }
#about .about02 .box>div:after{ content: ''; width: 9px; height: 14px; background: url('../img/about02-arrow.svg') 0 0 no-repeat; display: block; position: absolute; right: -5%; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#about .about02 .box>div:last-of-type:after{ content: none; }
#about .about02 .box>div h4{ font-size: 28px; line-height: 1.4; color: #fff; }
#about .about02 .box>div ul{ margin-top: 18px; }
#about .about02 .box>div ul li{ width: 100%; max-width: 260px; margin: 0 auto; padding: 10px; line-height: 1.5; background-color: #fff; border-radius: calc(infinity * 1px) }
#about .about02 .box>div ul li:nth-of-type(n+2){ margin-top: 16px; }*/
#about .about02 ul{ margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#about .about02 ul li{ width: 23.334%; margin-right: 2.22%; }
#about .about02 ul li:nth-of-type(4n){ margin-right: 0; }
#about .about02 ul li h4{ width: 100%; max-width: 224px; padding: 10px 5px; background-color: #00b8ee; color: #fff; font-size: 21px; font-weight: 700; border-radius: 10px 10px 0 0; }
#about .about02 ul li h4>span{ color: #ff0; }
#about .about02 ul li figure{ margin-bottom: 15px; }
#about .about02 ul li p{ line-height: 1.8; }

#about .about03{ margin-top: 69px; }
/*#about .about03 ul{ margin-top: 38px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#about .about03 ul li{ width: 48.65%; padding: 40px 40px; border-radius: ; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #00E0AE; border-radius: 30px; }
#about .about03 ul li:nth-of-type(2n){ margin-left: auto; }
#about .about03 ul li:nth-of-type(n+3){ margin-top: 13px; }
#about .about03 ul li>figure{ width: 86px; }
#about .about03 ul li>div{ width: calc(100% - 130px); margin-left: auto; }
#about .about03 ul li>div h4{ margin-bottom: 13px; font-size: 20px; color: #fff; }
#about .about03 ul li>div p{ line-height: 1.7; color: #fff; }*/
#about .about03 ul{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#about .about03 ul li{ width: 31.802%; margin-right: 2.297%; padding: 20px 20px; border-radius: ; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #eaf6fd; border-radius: 28px; position: relative; }
#about .about03 ul li:nth-of-type(3n){ margin-right: 0; }
#about .about03 ul li:nth-of-type(n+4){ margin-top: 25px; }
#about .about03 ul li>img{ position: absolute; top: -10px; left: -3px; }
#about .about03 ul li>div h4{ margin-bottom: 13px; font-size: 28px; color: #00b8ee; font-weight: 700; text-align: center; }

#about .about04{ margin-top: 69px; }
#about .about04 .box{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#about .about04 .box>figure{ width: 48.65%; border-radius: 30px; overflow: hidden }
#about .about04 .box>div{ width: 40%; margin-left: 5%; }
#about .about04 .box>div p{ line-height: 2; }

#skill{ margin-top: 65px; padding-bottom: 64px; border-bottom: 2px solid #DEDEDE; }
#skill>p{ margin-top: 30px; }
#skill>ul{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#skill>ul li{ width: 31.532%; margin-right: 2.702%; padding: 14px; border: 1px solid #FFB100; text-align: center; line-height: 1.5; border-radius: calc(infinity * 1px) }
#skill>ul li:nth-of-type(3n){ margin-right: 0; }
#skill>ul li:nth-of-type(n+4){ margin-top: 25px; }
#skill>ul li:nth-of-type(-n+3){ border: 1px solid #f00; }

#photo{ margin-top: 65px; padding-bottom: 64px; border-bottom: 2px solid #DEDEDE; }
#photo ul{ margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap }
#photo ul>li{ width: 15.766%; margin-right: 1.0808%; }
#photo ul>li:nth-of-type(6n){ margin-right: 0; }
#photo ul>li:nth-of-type(n+7){ margin-top: 13px; }

#feature{ margin-top: 63px; }
#feature ul{ margin-top: 58px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#feature ul li{ width: 31.532%; margin-right: 2.702%; background-color: #fff68e; }
#feature ul li:nth-of-type(3n){ margin-right: 0; }
/*#feature ul li figure figcaption{ margin-top: 23px; }*/
#feature ul li>div{ position: relative; }
#feature ul li>div h3{ margin: -12px 0 0 -10px; padding: 10px 28px 10px 0; font-size: 24px; font-weight: 900; color: #00b8ee; background-color: #ff0; display: inline-block; border-radius: 0 50px 50px 0; position: absolute; }
#feature ul li>div h3>span{ margin-right: 10px; padding: 2px 12px 2px 6px; font-size: 23px; background-color: #2ca6e0; color: #fff; border-radius: 0 50px 50px 0; }
#feature ul li>div p{ padding: 40px 20px 20px; }

#works{ margin-top: 103px; padding: 110px 0; position: relative; background: url('../img/works-bg01.png') 0 0 no-repeat,url('../img/works-bg02.png') 100% 100% no-repeat #00AFCC; background-size: 460px; }
#works:after{ content: ''; width: 100%; height: 117px; background: url('../img/mv-aftter.png') 50% 0 repeat-x; background-size: 21px; display: block; position: absolute; bottom: -108px; }
#works h2{ font-size: 20px; text-align: center; color: #fff; }
#works h2 span:nth-of-type(1){ margin-bottom: 22px; font-size: 40px; letter-spacing: .05em; display: inline-block; }
#works h2 span:nth-of-type(2){ display: block; }
#works ul{ margin-top: 63px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#works ul li{ width: 48.7%; margin-right: 2.6%; border: 5px solid #0085CC; border-radius: 30px; background-color: #fff; }
#works ul li:nth-of-type(2n){ margin-right: 0; }
#works ul li:nth-of-type(n+3){ margin-top: 30px; }
#works ul li a{ padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#works ul li a>figure{ width: 33.295%; border-radius: calc(infinity * 1px); overflow: hidden; -ms-flex-item-align: start; align-self: flex-start; }
#works ul li a>div{ width: 62.8%; margin-left: auto; }
#works ul li a>div h3{ margin: 5px 0 4px; font-size: 28px; font-weight: 900; line-height: 1.4; }
#works ul li a>div p{ font-size: 14px; line-height: 1.6; }
#works ul li a>div>div{ max-width: 270px; margin-top: 26px; padding: 13px; font-size: 14px; text-align: center; background-color: #FFF100; border-radius: calc(infinity * 1px) }

#reserva{ margin-top: 215px; }
#reserva h2{ margin-bottom: 20px; text-align: center; }
#reserva h2>span{ font-size: 36px; font-weight: 800; }
#reserva>p{ text-align: center; }
#reserva iframe{ height: 500px; }

#price{ margin-top: 50px; }
#price .top{ margin-top: 33px; }
#price>ul{ margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#price>ul li{ width: 31.532%; margin-right: 2.702%; padding: 45px 20px 35px; border: 1px solid #231815; border-radius: 30px; }
#price>ul li:nth-of-type(3n){ margin-right: 0; }
#price>ul li>h3{ margin-bottom: 14px; text-align: center; font-size: 16px; }
#price>ul li>p{ text-align: center; }
#price>ul li>p>span{ font-size: 32px; }
#price .center{ margin-top: 31px; text-align: center; }
#price dl{ width: 100%; max-width: 790px; margin: 40px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; }
#price dl>div{ width: 50%; border: 1px solid #707070; }
#price dl>div dt{ padding: 12px; border-bottom: 1px solid #707070; text-align: center; background-color: #F5F1F0; }
#price dl>div dd{ padding: 12px; text-align: center; }

#instagram{ max-width: 920px; margin-top: 104px; }
#instagram .title{ text-align: center; }
#instagram>div{ margin-top: 45px; }
#instagram>div ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#instagram>div ul li{ width: 24.457%; margin-right: .724%; }
#instagram>div ul li:nth-of-type(4n){ margin-right: 0; }
#instagram>div ul li:nth-of-type(n+5){ margin-top: 8px; }

#faq{ max-width: 920px; margin-top: 103px; }
#faq .title{ text-align: center; }
#faq>dl{ margin-top: 24px; }
#faq>dl>div{ border-bottom: 1px solid #DEDEDE; }
#faq>dl>div dt{ padding: 30px 50px 30px 65px; font-weight: 600; font-size: 16px; cursor: pointer; line-height: 1.8; position: relative; }
#faq>dl>div dt:before{ content: 'Q'; color: #DF27FF; position: absolute; top: 27px; left: 27px; font-size: 15px; }
#faq>dl>div dt:after{ content: '+'; color: #DF27FF; position: absolute; top: 29px; right: 40px; font-size: 15px; }
#faq>dl>div dt.active:after{ content: '-'; }
#faq>dl>div dd{ margin-top: -15px; padding: 0 60px 30px 65px; font-size: 14px; line-height: 1.8; position: relative; display: none; }

#freeTrial{ margin-top: 102px; padding: 140px 0; background: url('../img/free-trial-bg.png') 50% 50% no-repeat #FFF000; background-size: cover; border-radius: 40px; }
#freeTrial h2{ margin-bottom: 22px; font-size: 50px; text-align: center; color: #0085CC; }
#freeTrial p{ text-align: center; }
#freeTrial a{ width: 260px; margin: 21px auto 0; padding: 16px 10px; display: block; text-align: center; background-color: #0085cc; color: #fff; border-radius: calc(infinity * 1px); }

#access{ margin-top: 90px; }
#access>div{ display: -webkit-box; display: -ms-flexbox; display: flex }
#access>div>div:nth-of-type(1){ width: calc(100% - 380px); }
#access>div>div:nth-of-type(1) .googlemap iframe{ width: 100%; height: 400px; }
#access>div>div:nth-of-type(2){ width: 350px; margin-left: auto; padding: 45px 0; border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; -ms-flex-item-align: start; align-self: flex-start; }
#access>div>div:nth-of-type(2) p{ padding: 5px 0 5px 40px; line-height: 1.3; }
#access>div>div:nth-of-type(2) p:nth-of-type(n+2){ margin-top: 23px; }
#access>div>div:nth-of-type(2) p:nth-of-type(1){ background: url('../img/map-icon.svg') 0 5px no-repeat; }
#access>div>div:nth-of-type(2) p:nth-of-type(2){ background: url('../img/home-icon.svg') 0 4px no-repeat; }
#access>div>div:nth-of-type(2) p:nth-of-type(3){ background: url('../img/tel-icon.svg') 0 4px no-repeat; }
#access .as{ margin-top: 20px; }

#footer{ margin-top: 100px; padding: 60px 0 60px; color: #fff; background-color: #00AFCC; }
#footer ul{ text-align: center; }
#footer ul li{ margin: 10px 12px; display: inline-block; line-height: 1.5; }
#footer .logo{ margin-top: 15px; text-align: center; }
#footer .copyright{ margin-top: 26px; font-size: 12px; text-align: center; }
}


@media screen and (max-width: 1360px) and (min-width: 751px) {

}



@media screen and (max-width: 750px) {
.pc 					{ display: none!important; }
body 					{ font-weight: 500; font-size: 14px!important; overflow-x: hidden; }
.drawer-open body 		{ overflow: hidden!important; }
.master 				{ width: 90%; margin: 0 auto; }

/*.wp-pagenavi 			{ margin-top: 50px; }
.wp-pagenavi a,.wp-pagenavi span{ margin: 0 0; padding: 6px 8px; color: #4c3936; display: inline-block; font-size: .7rem; border: 1px solid transparent; }
.wp-pagenavi a:hover{ border: 1px solid #dbdbdb; }*/


#header 				{ width: 100%; height: 60px; margin: 0; position: fixed; top: 0; left: 0; background-color: transparent; z-index: 99; background-color: transparent; border-bottom: 0; }
#header>.master 		{ max-width: 960px; position: relative; }
#header #nav>ul 		{ height: 100vh; padding-top: 90px; opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); position: relative; -webkit-transition: .3s; transition: .3s; -webkit-transition-delay: 0s; transition-delay: 0s; }
.drawer-open #header #nav>ul{ opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: .5s; transition: .5s; -webkit-transition-delay: .4s; transition-delay: .4s; }

.drawer-hamburger-icon, .drawer-hamburger-icon:after, .drawer-hamburger-icon:before{ background-color: #00AFCC; height: 2px; }
/*.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before{ background-color: #fff; }*/
.drawer-hamburger-icon:before{ top: -8px; }
.drawer-hamburger-icon:after{ top: 8px; }
.drawer-hamburger 		{ width: 50px; height: 50px; padding: 10px; top: 15px; right: 15px; z-index: 10002; background-color: #FFF000; border-radius: calc(infinity * 1px); }
.drawer-hamburger-icon 	{  }
.drawer-open .drawer-overlay{ display: none; }
.drawer-nav 			{ width: 100%; top: 0; right: -100%; left: auto; z-index: 10001; }
.drawer-open .drawer-hamburger-icon,.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{ -webkit-box-shadow: none; box-shadow: none; }
.drawer-menu li a 		{  }
#header .logo .drawer-menu-item{ width: 96px; margin: 10px; padding: 0; }
#header .drawer-menu-item{ width: 100%; margin: 10px 0 0; padding: 10px 30px; color: #fff; text-align: center; font-weight: bold; display: inline-block; font-weight: 400; letter-spacing: .1rem; }
#header .drawer-menu-item:hover{ opacity: .6; }
.drawer-nav 			{ height: 100vh; background: #00AFCC; -webkit-transition: .5s; transition: .5s; overflow-x: hidden; }
.drawer-nav>ul>li 		{ width: 90%; margin: 0 auto; }
.drawer-open .drawer-nav{ background: #00AFCC; right: 0; left: auto; }
.drawer-open .drawer-hamburger-icon:after, .drawer-open .drawer-hamburger-icon:before{ top: 0; /*background: #fff;*/ }

#header{ -webkit-transition: .5s; transition: .5s; }
.is-fixed #header>.logo{ display: block; }


#header #nav ul>li .drawer-menu{ font-size: 14px; text-align: left; }
#header #nav ul>li .drawer-menu>span{ margin-right: 10px; font-size: 30px; }
#header #nav ul>li.btn{ margin-top: 20px; }
#header #nav ul>li.btn a{ padding: 18px 10px; font-size: 16px; color: #fff; display: block; text-align: center; border: 1px solid #fff; border-radius: calc(infinity * 1px); font-weight: 700; }

#mv{ padding: 20px 5% 0; background: #00AFCC url('../img/mv-bg.png') 50% 0 no-repeat; background-size: 100%; position: relative; }
#mv:after{ content: ''; width: 100%; height: 70px; background: url('../img/mv-aftter.png') 50% -20px repeat-x; background-size: 14px; display: block; position: absolute; bottom: -70px; left: 0; }

#mv .mv01{ width: 100%; max-width: 1280px; margin: 0 auto; position: relative; }
#mv .mv01 #mvSlider{  }
/*#mv .mv01 h1{ width: 100%; padding: 0 5%; position: absolute; top: 7%; left: 0; text-align: center; z-index: 2; }*/
#mv .mv01 .logo{ width: 100%; padding: 0; position: absolute; bottom: -10%; left: 0; text-align: center; z-index: 2; }
/*#mv .mv01 .bnr{ position: absolute; bottom: 40px; right: 40px; z-index: 2; }*/

/*#mv #mvNav{ margin-top: 65px; }
#mv #mvNav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#mv #mvNav ul li{ margin: 0 15px; }
#mv #mvNav ul li a{ padding: 10px; display: block; border: 1px solid transparent; border-radius: calc(infinity * 1px); color: #fff; }
#mv #mvNav ul li a:hover{ opacity: 1; border: 1px solid #fff; }
#mv #mvNav ul li.btn a{ width: 140px; text-align: center; border: 1px solid #FFF000; background-color: #FFF000; color: #00AFCC; }*/

#mv>h2{ margin-top: 75px; font-size: 30px; line-height: 1.2; letter-spacing: .02em; color: #FFF000; }

#mv .mv02{ width: 100%; max-width: 1360px; margin: 25px auto 0; position: relative; }
#mv .mv02 #mvSlider2 .sliderItem{ padding: 0 10px; position: relative; }
#mv .mv02 #mvSlider2 .sliderItem h2{ position: absolute; top: 20px; left: 20px; font-size: 46px; color: #fff; z-index: 9; text-shadow: 0px 0px 10px rgba(0,0,0,.5); }
#mv .mv02 #mvSlider2 .sliderItem .box{  }
#mv .mv02 #mvSlider2 .sliderItem .box h3{ margin: 20px 0 10px; font-size: 20px; font-weight: 600; color: #fff; }
#mv .mv02 #mvSlider2 .sliderItem .box p{ font-size: 16px; line-height: 2; color: #fff; }
#mv .mv02 #mvSlider2 .sliderItem img{ display: block; }
#mv .mv02 .arrow_box{ width: 165px; margin: -20px auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 3; }
#mv .mv02 .slide-arrow{ width: 35px; height: 35px; cursor: pointer; border-radius: 50px; -webkit-transition: .5s; transition: .5s; }
.slick-dotted.slick-slider{ z-index: 1; }

#mv .mv02 .prev-arrow{ background: url('../img/slider-arrow01.svg') 50% 50% no-repeat; }
#mv .mv02 .prev-arrow:hover{ background: #FFF000 url('../img/slider-arrow01.svg') 50% 50% no-repeat; }
#mv .mv02 .next-arrow{ margin-left: auto; background: url('../img/slider-arrow02.svg') 50% 50% no-repeat; }
#mv .mv02 .next-arrow:hover{ background: #FFF000 url('../img/slider-arrow02.svg') 50% 50% no-repeat; }

#mv .mv02 .slick-dots{ width: 100px; left: 50%; bottom: -40px; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); z-index: 4; }
#mv .mv02 .slick-dots li{ width: 2px; margin: 0 7px; }
#mv .mv02 .slick-dots li button{ width: 2px; height: 15px; padding: 0; background-color: #fff; -webkit-transition: .3s; transition: .3s }
#mv .mv02 .slick-active button{ height: 22px!important; }
#mv .mv02 .slick-dots li button:before{ content: none; }
#mv .mv02 .bgIllust{  }
#mv .mv02 .bgIllust img:nth-of-type(1){ position: absolute; bottom: 85px; left: 64px; }
#mv .mv02 .bgIllust img:nth-of-type(2){ position: absolute; bottom: 10px; right: -45px; }

.title{ font-size: 16px; font-weight: 500; }
.title span:nth-of-type(1){ margin-bottom: 15px; padding-right: 35px; font-size: 32px; letter-spacing: .04em; display: inline-block; background: url('../img/title-icon.svg') 100% 50% no-repeat; background-size: 24px; font-weight: 900; }
.title span:nth-of-type(2){ display: block; }

#about{ margin-top: 110px; padding-bottom: 45px; border-bottom: 2px solid #DEDEDE; }
.subTitle{ position: relative; }
.subTitle>div:nth-of-type(1){ width: 48px; height: 48px; font-size: 24px; line-height: 48px; background-color: #000; color: #FFF000; text-align: center; border-radius: calc(infinity * 1px); position: absolute; top: 0; left: 0; }
.subTitle>div:nth-of-type(2){  }
.subTitle>div:nth-of-type(2) p{ padding-left: 60px; font-size: 14px; }
.subTitle>div:nth-of-type(2) h3{ margin-bottom: 12px; padding-left: 60px; font-size: 26px; font-weight: 900; color: #000; line-height: 1.4; }
.subTitle>div:nth-of-type(2) p:last-of-type{ padding-left: 0; font-size: 18px; line-height: 2; }

#about .about01{ margin-top: 40px; }
#about .about01 .box{ margin-top: 30px; }
#about .about01 .box>figure{  }
#about .about01 .box>div{  }
#about .about01 .box>div ul{ margin: 20px 0 30px; }
#about .about01 .box>div ul li{ padding: 0 0 0 35px; font-size: 17px; line-height: 1.5; background: url('../img/about01-icon.svg') 0 2px no-repeat; background-size: 22px; }
#about .about01 .box>div ul li:nth-of-type(n+2){ margin-top: 20px; }
#about .about01 .box>div p{ line-height: 2; }

#about .about02{ margin-top: 40px; padding-top: 40px; border-top: 2px solid #DEDEDE; }
/*#about .about02 .box{ margin-top: 35px; }
#about .about02 .box>div{ padding: 30px 20px 33px; text-align: center; position: relative; background-color: #00AFCC; border-radius: 30px; }
#about .about02 .box>div:nth-of-type(n+2){ margin-top: 30px; }
#about .about02 .box>div:after{ content: ''; width: 12px; height: 18px; background: url('../img/about02-arrow.svg') 0 0 no-repeat; display: block; position: absolute; left: 50%; bottom: -24px; -webkit-transform: translate(-50%,0) rotateZ(90deg); transform: translate(-50%,0) rotateZ(90deg); background-size: 12px }
#about .about02 .box>div:last-of-type:after{ content: none; }
#about .about02 .box>div h4{ font-size: 25px; line-height: 1.4; color: #fff; }
#about .about02 .box>div ul{ margin-top: 18px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#about .about02 .box>div ul li{ width: 48%; min-height: 62px; padding: 10px; line-height: 1.5; background-color: #fff; border-radius: 10px; text-align: justify; }
#about .about02 .box>div ul li:nth-of-type(2n){ margin-left: auto; }
#about .about02 .box>div ul li:nth-of-type(n+3){ margin-top: 10px; }*/
#about .about02 ul{ margin-top: 30px; }
#about .about02 ul li{  }
#about .about02 ul li:nth-of-type(n+2){ margin-top: 30px; }
#about .about02 ul li h4{ width: 100%; max-width: 224px; padding: 10px 5px; background-color: #00b8ee; color: #fff; font-size: 19px; font-weight: 700; border-radius: 10px 10px 0 0; }
#about .about02 ul li h4>span{ color: #ff0; }
#about .about02 ul li figure{ margin-bottom: 10px; }
#about .about02 ul li p{ line-height: 1.8; }

#about .about03{ margin-top: 50px; padding-top: 40px; border-top: 2px solid #DEDEDE; }
/*#about .about03 ul{ margin-top: 38px; }
#about .about03 ul li{ padding: 30px 30px; border-radius: ; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #00E0AE; border-radius: 20px; }
#about .about03 ul li:nth-of-type(n+2){ margin-top: 13px; }
#about .about03 ul li>figure{ width: 59px; }
#about .about03 ul li>div{ width: calc(100% - 80px); margin-left: auto; }
#about .about03 ul li>div h4{ margin-bottom: 13px; font-size: 16px; color: #fff; line-height: 1.6; font-weight: 700; }
#about .about03 ul li>div p{ line-height: 1.7; color: #fff; }*/
#about .about03 ul{ margin-top: 40px; }
#about .about03 ul li{ padding: 20px 20px; border-radius: ; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #eaf6fd; border-radius: 28px; position: relative; }
#about .about03 ul li:nth-of-type(3n){  }
#about .about03 ul li:nth-of-type(n+2){ margin-top: 25px; }
#about .about03 ul li>img{ position: absolute; top: -10px; left: -3px; }
#about .about03 ul li>div h4{ margin-bottom: 13px; font-size: 24px; color: #00b8ee; font-weight: 700; text-align: center; }

#about .about04{ margin-top: 50px; padding-top: 40px; border-top: 2px solid #DEDEDE; }
#about .about04 .box{ margin-top: 30px; }
#about .about04 .box>figure{ border-radius: 20px; overflow: hidden; }
#about .about04 .box>div{ margin-top: 20px; }
#about .about04 .box>div p{ line-height: 2; }

#skill{ margin-top: 45px; padding-bottom: 45px; border-bottom: 2px solid #DEDEDE; }
#skill>p{ margin-top: 20px; font-size: 18px; line-height: 2; }
#skill>ul{ margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#skill>ul li{ width: 48.5%; padding: 9px 5px; border: 1px solid #FFB100; text-align: center; line-height: 1.5; border-radius: calc(infinity * 1px); font-size: 13px; }
#skill>ul li:nth-of-type(2n){ margin-left: auto; }
#skill>ul li:nth-of-type(n+3){ margin-top: 15px; }
#skill>ul li:nth-of-type(-n+3){ border: 1px solid #f00; }

#photo{ margin-top: 65px; padding-bottom: 64px; border-bottom: 2px solid #DEDEDE; }
#photo ul{ margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap }
#photo ul>li{ width: 31%; margin-right: 3.5%; }
#photo ul>li:nth-of-type(3n){ margin-right: 0; }
#photo ul>li:nth-of-type(n+4){ margin-top: 10px; }

#feature{ margin-top: 45px; }
/*#feature ul{ margin-top: 30px; }
#feature ul li{  }
#feature ul li:nth-of-type(n+2){ margin-top: 25px; }
#feature ul li figure figcaption{ margin-top: 15px; }*/
#feature ul{ margin-top: 30px; }
#feature ul li{ background-color: #fff68e; }
#feature ul li:nth-of-type(n+2){ margin-top: 25px; }
/*#feature ul li figure figcaption{ margin-top: 23px; }*/
#feature ul li>div{ position: relative; }
#feature ul li>div h3{ margin: -12px 0 0 -10px; padding: 10px 28px 10px 0; font-size: 22px; font-weight: 900; color: #00b8ee; background-color: #ff0; display: inline-block; border-radius: 0 50px 50px 0; position: absolute; }
#feature ul li>div h3>span{ margin-right: 10px; padding: 2px 12px 2px 6px; font-size: 20px; background-color: #2ca6e0; color: #fff; border-radius: 0 50px 50px 0; }
#feature ul li>div p{ padding: 40px 20px 20px; }

#works{ margin-top: 60px; padding: 75px 0 50px; position: relative; background: url('../img/works-bg01.png') 0 0 no-repeat #00AFCC; background-size: 100%; }
#works:after{ content: ''; width: 100%; height: 70px; background: url(../img/mv-aftter.png) 50% -20px repeat-x; background-size: 14px; display: block; position: absolute; bottom: -70px; left: 0; }
#works h2{ font-size: 16px; text-align: center; color: #fff; }
#works h2 span:nth-of-type(1){ margin-bottom: 20px; font-size: 28px; letter-spacing: .05em; display: inline-block; }
#works h2 span:nth-of-type(2){ display: block; }
#works ul{ margin-top: 40px; }
#works ul li{ padding-bottom: 60px; border: 4px solid #0085CC; border-radius: 20px; background-color: #fff; position: relative; }
#works ul li:nth-of-type(n+2){ margin-top: 20px; }
#works ul li a{ padding: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; }
#works ul li a>figure{ width: 33.295%; border-radius: calc(infinity * 1px); overflow: hidden; -ms-flex-item-align: start; align-self: flex-start; }
#works ul li a>div{ width: 62.8%; margin-left: auto; }
#works ul li a>div h3{ margin: 5px 0 4px; font-size: 22px; font-weight: 900; line-height: 1.4; }
#works ul li a>div p{ font-size: 14px; line-height: 1.6; }
#works ul li a>div>div{ width: 100%; max-width: 240px; margin-top: 26px; padding: 13px; font-size: 12px; text-align: center; background-color: #FFF100; border-radius: calc(infinity * 1px); position: absolute; bottom: 15px; left: 50%; -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }

#reserva{ margin-top: 100px; }
#reserva h2{ margin-bottom: 10px; }
#reserva h2>span{ font-size: 24px; font-weight: 800; }
#reserva>p{ line-height: 2; }
#reserva iframe{ height: 450px; }

#price{ margin-top: 40px; }
#price .top{ margin-top: 25px; }
#price>ul{ margin-top: 30px; }
#price>ul li{ padding: 25px 20px 20px; border: 1px solid #231815; border-radius: 20px; }
#price>ul li:nth-of-type(n+2){ margin-top: 15px; }
#price>ul li>h3{ margin-bottom: 14px; text-align: center; font-size: 16px; }
#price>ul li>p{ text-align: center; }
#price>ul li>p>span{ font-size: 32px; }
#price .center{ margin-top: 20px; text-align: left; }
#price dl{ width: 100%; max-width: 790px; margin: 40px auto 0; }
#price dl>div{ border: 1px solid #707070; }
#price dl>div:nth-of-type(n+2){ margin-top: 15px; }
#price dl>div dt{ padding: 12px; border-bottom: 1px solid #707070; text-align: center; background-color: #F5F1F0; }
#price dl>div dd{ padding: 12px; text-align: center; }

#instagram{ max-width: 920px; margin-top: 60px; }
#instagram .title{  }
#instagram>div{ margin-top: 30px; }
#instagram>div ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#instagram>div ul li{ width: 24.457%; margin-right: .724%; }
#instagram>div ul li:nth-of-type(4n){ margin-right: 0; }
#instagram>div ul li:nth-of-type(n+5){ margin-top: 8px; }

#faq{ max-width: 920px; margin-top: 60px; }
#faq .title{  }
#faq>dl{ margin-top: 24px; }
#faq>dl>div{ border-bottom: 1px solid #DEDEDE; }
#faq>dl>div dt{ padding: 20px 30px 20px 35px; font-weight: 600; font-size: 14px; cursor: pointer; line-height: 1.8; position: relative; }
#faq>dl>div dt:before{ content: 'Q'; color: #DF27FF; position: absolute; top: 17px; left: 0; font-size: 15px; }
#faq>dl>div dt:after{ content: '+'; color: #DF27FF; position: absolute; top: 50%; right: 0; font-size: 15px; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
#faq>dl>div dt.active:after{ content: '-'; }
#faq>dl>div dd{ margin-top: 0; padding: 0 30px 20px 35px; font-size: 14px; line-height: 1.8; position: relative; display: none; }

#freeTrial{ margin-top: 60px; padding: 30px 5%; background: url('../img/free-trial-bg_sp.png') 50% 50% no-repeat #FFF000; background-size: cover; border-radius: 30px; }
#freeTrial h2{ margin-bottom: 22px; font-size: 32px; text-align: center; color: #0085CC; }
#freeTrial p{  }
#freeTrial a{ width: 260px; margin: 21px auto 0; padding: 16px 10px; display: block; text-align: center; background-color: #0085cc; color: #fff; border-radius: calc(infinity * 1px); }

#access{ width: 100%; margin-top: 50px; }
#access>div{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#access>div>div:nth-of-type(1){ margin-top: 30px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; }
#access>div>div:nth-of-type(1) .googlemap iframe{ width: 100%; height: 270px; }
#access>div>div:nth-of-type(2){ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; width: 90%; margin: 0 auto; padding: 25px 0; border-top: 1px solid #DEDEDE; border-bottom: 1px solid #DEDEDE; }
#access>div>div:nth-of-type(2) p{ padding: 5px 0 5px 40px; line-height: 1.3; }
#access>div>div:nth-of-type(2) p:nth-of-type(n+2){ margin-top: 13px; }
#access>div>div:nth-of-type(2) p:nth-of-type(1){ background: url('../img/map-icon.svg') 0 5px no-repeat; }
#access>div>div:nth-of-type(2) p:nth-of-type(2){ background: url('../img/home-icon.svg') 0 4px no-repeat; }
#access>div>div:nth-of-type(2) p:nth-of-type(3){ background: url('../img/tel-icon.svg') 0 4px no-repeat; }
#access .as{ margin-top: 20px; padding: 0 5%; font-size: 16px; }

#footer{ margin-top: 50px; padding: 40px 0 60px; color: #fff; background-color: #00AFCC; }
#footer .master{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
#footer ul{ margin-top: 20px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#footer ul li{ width: 50%; margin: 10px 0; display: block; line-height: 1.5; }
#footer .logo{ margin-top: 15px; text-align: center; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; }
#footer .copyright{ margin-top: 26px; font-size: 11px; padding: 0 5%; }
}