@charset "UTF-8";
/* CSS Document */

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}

body{
	font-family:  "游明朝体", "YuMincho", "Yu Mincho", "Noto Serif JP", "ヒラギノ明朝 Pro", "Noto Serif JP", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
	font-weight: 400;
	color: #333;
	font-size: 1.6rem;
	line-height: 2.4rem;
	letter-spacing: .06em;
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}
.none{
	display: none;
}
.en{
	font-family: "Futura", 'Josefin Sans', sans-serif;
	font-weight: 500;
}
h2{
	margin-bottom: 70px;
	line-height: 1;
}
h2 .fr{
	display: block;
	height: 32px;
	vertical-align: baseline;
}
h2 .fr img{
	height: 100%;
}
h2 .ja{
	display: inline-block;
	line-height: 1;
	font-weight: 500;
	font-size: 1.4rem;
	letter-spacing: .1em;
}
.num{
	font-family: 'Italianno', cursive, 'serif';
	letter-spacing: 0.07em;
	font-weight: 400;
}
h3, h4, h5{
	font-weight: 600;
}
a{
	text-decoration: none;
}
@media(max-width: 767px){
	body{
		font-size: 3.764705882vw;/*1.6rem*/
		line-height: 1.5;
	}
	.en{
		font-size: 3.294117647vw;/*1.4rem*/
	}
	h2 .fr{
		/*height: 7.058824vw;*/
		height: 6.2vw;
	}
	h2 .ja{
		font-size: 3.294118vw;
	}
}

.header{
	position: relative;
	z-index: 500;
}
main{
	position: relative;
	z-index: 10;
}

/*--ヘッダー-------------------------*/
.header{
	width: 100%;
	/*margin: 0 auto;*/
	background-color: #0f2942;
	height: 120px;
	display: flex;
	justify-content: space-between;
}
.logo{
	background-color: #fff;
	width: 138px;
	height: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.logo img{
	width: 82px;
    transition: all .3s;
}
.logo img:hover{
	opacity: .7;
}

/*ハンバーガーメニュー用のロゴCSS*/
@media(max-width: 767px){
	.logo.is-active{
		width: 55px;
		height: 55px;
		position: fixed;
		top:0;
		left: 0;
		z-index: 100000;
		transition: all .3s;
	}
	.logo.is-active a{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo.is-active a img{
		width: 75%;
	}
}


/*メニュー------------------------------------*/
.menu{
	/*メニュー右の余白*/
	margin-right: 9.72%;
	display: flex;
	flex-direction: row-reverse;
}
.menu ul{
	display: flex;
}
.menu ul  > li{
	list-style-type: none;
	padding-left: 40px;
	line-height: 120px;
}
.menu ul  > .has-child:hover > .service-hover{
	opacity: 1;
	visibility: inherit;
	transition: all .3s;
}
.menu > ul  > li > a{
	text-decoration: none;
	color: #fff;
	transition: all .3s;
	font-weight: 600;
	display: block;
	position: relative;
}
.menu > ul  > li:first-child{
	display: none;
}
.menu .service-child{
	display: none;
}
.menu ul  > li > a::before,
.menu ul > li > a::after {
  border-bottom: solid 1px #fff;
  bottom: 37px;
  content: "";
  display: block;
  position: absolute;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  width: 0;
}
/*サービスのサブメニュー、下線を消す*/
.service-hover ul  > li > a::before,
.service-hover ul > li > a::after{
	border: none;
}

.menu ul  > li > a::before {
  left: 50%;
}
.menu ul > li > a::after {
  right: 50%;
}
.menu ul > li > a:hover::before,
.menu ul > li > a:hover::after {
  width: 50%;
}

@media(max-width: 767px){
	.header{
		height: 55px;
	}
	.logo{
		width: 55px;
		height: 55px;
	}
	.logo a{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.logo a img{
		width: 75%;
	}
	/*下線のアニメーションを消す（スマホなので）*/
	.menu ul  > li > a::before,
	.menu ul > li > a::after {
		border:none;
	}
}




/*-----ドロワー-----------------------------*/
@media(max-width: 767px){
	.open-btn{
		position: relative;
		width: 55px;
	    height:55px;
		cursor: pointer;
		background: #fff;
		background: #f7f2ee;
		background: #ac9d8f;
	}
	.is-active{
		display: block;
	}

	/*ボタン内側*/
	.open-btn span{
	    display: inline-block;
	    transition: all .4s;/*アニメーションの設定*/
	    position: absolute;
	    left: 13px;
	    height: 2px;
		background-color: #f7f2ee;
	  	width:50%;
	  }

/*	メニューボタン押した時のアニメーション。
	２本線をバツ印（）に*/
	.open-btn.is-active span:nth-child(1){
		/*transform: rotate(45deg);*/
	    top: 20px;
	    left: 13px;
	    transform: translateY(6px) rotate(-45deg);
	    width: 55%;
	}
	.open-btn.is-active span:nth-child(2){
	    top: 32px;
	    left: 13px;
	    transform: translateY(-6px) rotate(45deg);
	    width: 55%;
	}
	.hidden-menu-item.is-active{
		display: block;
	}
	.menu .service-child{
		display: block;
	}


	.open-btn span:nth-of-type(1) {
		top:22px;
	}

	.open-btn span:nth-of-type(2) {
		top:33px;
	}
	.menu ul{
		display: block;
		width: 100%;
	}
	.open-btn{
		display: block;
		position: fixed;
		right: 0;
		top: 0;
		cursor: pointer;
		z-index: 2000;
	}

	.menu{
		display: none;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		z-index: 1000;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #0f2942;
		/*opacity: .97;*/
		padding: 70px 90px 0;
		text-align: center;
	}
	.menu ul li{
		line-height: 1.5;
		margin-bottom: 50px;
		padding: 0;
	}
	.menu > ul > li{
		line-height: 1.5;
		margin-bottom: 40px;
		padding: 0;
	}
	.menu > ul > li > a{
		font-size: 4.23529411764706vw;
	}
	.hidden-menu-item{
		display: block;
	}
	.menu > ul > li:first-child{
		display: block;
	}
	.menu ul > li:nth-child(3){
		margin-bottom: 20px;
	}
	.menu .service-child li{
		padding: 0 0 0 20px;
		/*border-bottom: none;*/
	}
	.menu .service-child li:first-child{
		margin-bottom: 20px;
	}
	.menu .service-child li a{
		color: #ac9d8f;
		font-size: 3.76470588235294vw;
	}
}

.service-hover{
	visibility: hidden;
	opacity: 0;
}
.dark-screen{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .5;
	z-index: 300;
	visibility: hidden;
}
.menu ul > li:nth-child(2):hover .service-hover{
	cursor: pointer;
	visibility: visible;
	opacity: 1;
}

.hover-content{
	background-color: #fff;
	z-index: 500;
	width: 100%;
	/*padding: 60px 140px;*/
	padding: 60px 9.72222222%;
	/*padding: 60px 0;*/
	position: absolute;
	top: 120px;
	left: 0;
	box-sizing: border-box;
	box-shadow: 0px 0px 50px 2px rgb(0 0 0 / 40%);
}
.hover-content a{
	color: #fff;
	font-size: 2.4rem;
	display: inline-block;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.hover-content h3{
	position: absolute;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	font-size: 2.0rem;
}
	@media(max-width: 1160px){
		.hover-content h3{
			font-size: 1.8rem;
		}
	}
.hover-content ul{
	display :flex;
	justify-content: space-between;
}
.menu .hover-content ul li{
	width: 43.10%;/*500px*/
	width: 29.310344827%;
	width: 29%;
	height: 14vw;
	padding-left: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
	background-size: cover;
  	overflow: hidden;
  	position:relative;
  	display: block;
}
.hover-content li img{
	max-width: 100%;
	height: auto;
	object-fit: cover;
	transition: all .5s;
	vertical-align: bottom;
}
.hover-content li img:hover{
	transform: scale(1.2);
}

.hover-content li a{
	transition: all .5s;
	vertical-align: bottom;
	background-size: cover;
}
.hover-content li:first-child a{
	background-image: url(../image/service-hover01.jpg);
}.hover-content li:nth-child(2) a{
	background-image: url(../image/service-hover02.jpg);
}
.hover-content li:last-child a{
	background-image: url(../image/service-hover03.jpg);
}
.hover-content li a:hover{
	transform: scale(1.2);
}

@media(max-width: 767px){
	.menu ul > li:nth-child(3):hover .service-hover{
		cursor: pointer;
		visibility: hidden;
		opacity: 0;
	}
	.menu .service-child li{
		padding: 0;
	}
}


/*--------sec-top-----------------------*/
.sec-top{
	position: relative;
	margin-bottom: 140px;
}
.frame-wrapper{
    width: 90.277%;
   	height: 45.83vw !important;
   	position: relative;
}
/*.frame*/
#slider {
	width: 100%;
	height: 100% !important;
	display: flex;
	align-items: center;
}
.sec-top .navy-background{
	background-color: #0f2942;
	width: 100%;
	height: 580px;
	height: 87.87%;
	z-index: -2;
	position: absolute;
	right: 0;
}


.sec-top .frame{
	margin-bottom: 140px;
	z-index: 4;
}
h1{
	width: 46.77%;
	display: flex;
	align-items: center;
}
h1 img{
	width: 100%;
}
.sub-sec-top .sub-frame-wrapper{
    width: 90.277%;
   	position: relative;
	height: 27.77vw;/*400px/1400px*/
}
.sub-sec-top .sub-frame{
	height: 100%;
	position: relative;
	z-index: 5;
}
.sub-sec-top .sub-frame > img {
	width: 100%;
	height: 100% !important;
	display: flex;
	align-items: center;
	object-fit: cover;
	z-index: 10;
}
.sub-sec-top .navy-background{
	height: 326px;
	height: 20vw;
}
.lead{
	position: absolute;
	left: 9.722222222%;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	z-index: 10;
}
.sec-top-boxes{
	z-index: 3;
}
.big-box{
	position: absolute;
	right: -5.692%;/*-74px*/
	bottom: -5.000vw;/*-74px*/
	width: 17.69%;/*230px*/
	height: 15.97vw;/*230px*/
	background-color: #fd964b;
	z-index: -2;
}
.small-box{
	position: absolute;
	width: 6.627%;/*95px*/
	height: 5.983vw;/*95px*/
	background-color: #fd964b;
	bottom: -11vw;
	right: 12%;
	z-index: -2;
}

@media(max-width: 767px){
	.sec-top{
		margin-bottom: 28.235vw;
	}
	.sec-top .navy-background{
		height: 134vw;
	}
	/*リード文の箱*/
	.sp-lead {
		width: 100%;
		height: 51.294118vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/*リード文の幅と高さ*/
	.sp-lead img{
		width: 71.647059%;
		height: auto;
	}
	.frame-wrapper{
		padding-top: 51.294118vw;
		height: 98.117647vw !important;
		width: 100%;
	}
	#slider{
		width: 89.41%;
	}
	#slider h1{
		display: none;
	}
	.sec-top-boxes .big-box{
		width: 38.947368%;
		width: 34.82359%;
		height: 34.82359vw;
		bottom: -10.823529vw;
		right: 0;
		overflow: hidden;
	}
	.small-box{
		width: 10.352941176%;
		height: 10.352941vw;
		right: 34.823529411%;/*148px(bog boxの幅)*/
		bottom: -21.1176471vw;
	}

	/*サブページのsec-top-----------*/
	.sec-top{
		margin-bottom: 28.235vw;
	}
	.sub-sec-top .navy-background{
		height: 94.2vw;
	}
	/*リード文の幅と高さ*/
	.sub-sec-top .sp-lead img{
		height: auto;
	}
	.sub-sec-top .sub-frame-wrapper{
		padding-top: 51.294118vw;
		height: 64.706vw !important;
		width: 100%;
	}
	.sub-frame{
		width: 89.41%;
	}
	.sub-frame h1{
		display: none;
	}
}


/*----ボタン-----------------*/
.btn{
	height: 60px;
	width: 250px;
	line-height: 60px;
	text-align: center;
	margin: 0 auto;
	border: 1px solid #ac9d8f;
	position:relative;
	overflow: hidden;
	transition: ease .2s;
	font-size: 1.4rem;
}

.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color:#ac9d8f;
	display: inline-block;
	width: 100%;
}
.btn:hover span{
	color:#fff;
}
.sec-contact .btn:hover span{
	color: #0f2942;
}
.btn:hover .arrow{
	border-bottom-color: #fff;
	border-right-color: #fff;
}
.sec-contact .btn:hover .arrow{
	border-bottom-color: #0f2942;
	border-right-color: #0f2942;
}
.btn:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background:#ac9d8f;/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}
.sec-contact .btn:before{
	background-color: #fff;
}
.btn:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.btn a{
	text-decoration: none;
	color: #ac9d8f;
	display: inline-block;
	width: 100%;
}
.btn .arrow{
	width: 46px;
	height: 8px;
	border-bottom: 1px solid #ac9d8f;
	border-right: 1px solid #ac9d8f;
	transform: skew(45deg);
	position: absolute;
	top: 22px;
	right: 24px;
	transition: all .3s;
}
.btn:hover .arrow{
	right: 6px;
}

@media(max-width: 767px){
	.btn a{
		font-size: 3.29411764705882vw;
	}
	.btn{
		height: 14.1176470588235vw;
		width: 58.823529411vw;
		line-height: 14.1176470588235vw;
	}
	.btn .arrow{
		top: 5.17647058823529vw;
		width: 10.823529411vw;
		height: 1.882352941vw;
	}
}

/*進出ページとレッスンページの.contact-link*/
.contact-link .btn{
	width: 280px;
}


/*-----お問い合わせ&フッター------------------------*/
.sec-contact-container{
	text-align: center;
	background-color: #0f2942;
	padding: 140px 0;
	position: relative;
}
.sec-contact h2{
	margin-bottom: 34px;
}
.sec-contact .ja{
	color: #fff;
}
.sec-contact .btn{
	width: 280px;
	border-color: #fff;
}
.sec-contact .btn a span{
	color: #fff;
}
.sec-contact .arrow{
	border-bottom-color: #fff;
	border-right-color: #fff;
}
.sec-contact-container > p{
	padding: 0 9.722222222%;
	color: #fff;
	margin-bottom: 50px;
	line-height: 1.5;
}
.stripe-box{
    background-color: #fd964b;
    background-image:
	repeating-linear-gradient(45deg,#fff, #fff 3px,transparent 0, transparent 6px);
	width: 100px;
	height: 100px;
}
.sec-contact .stripe-box{
	position: absolute;
	width: 17.361111111%;
	height: 17.361111111vw;
	top: -23.055555555vw;
	right: 0px;
	z-index: 1;
}
.orange-box{
    background-color: #fd964b;
}
.sec-contact .orange-box{
	width: 8.888888888%;
	height: 8.888888888vw;
	top: -8.888888888vw;
	right: 14.305555555%;
    position: absolute;
    z-index: 100;
}
@media(max-width: 767px){
	.sec-contact-container{
		text-align: center;
		background-color: #0f2942;
		padding: 18.8235vw 0 5.882vw;
		position: relative;
	}
	.contact-dsc br{
		display: none;
	}
	.sec-contact .btn{
		margin-bottom: 14.117vw;
		width: 65.882352941vw;
	}

/*ページトップへ戻るボタン*/
	.arrow_o {
	  position: relative;
	  display: inline-block;
	  padding-left: 4.705882352%;/*20px*/
	  color: #fff;
	  text-decoration: none;
	  margin-bottom: 3.529411764vw;
	  /*15px。sec-contactのpadding-bottomに25pxついてるから
	  合計40pxになる*/
	}
	.arrow_o:before {
	  content: '';
	  width: 4.26vw;
	  height: 4.26vw;
	  border: 0;
	  border-top: solid 2px #fff;
	  border-right: solid 2px #fff;
	  position: absolute;
	  top: 50%;
	  left: 0;
	  transform: rotate(-45deg);
	}

/*＜お問い合わせページ、プライバシーポリシー＞*/
	.arrow_o-footer {
	  padding-left: 4.705882352%;/*20px*/
	  color: #0f2942;
	  margin-bottom: 9.41176470588235vw;/*40px*/
	}
	.arrow_o-footer:before {
	  border-top: solid 3px #0f2942;
	  border-right: solid 3px #0f2942;
	  top: 50%;
	  left: 48.588235294vw;
	  transform: rotate(-45deg);
	}
}


/*フッター------------------*/
.footer{
	background-color: #0f2942;
	text-align: center;
	padding: 0 6.25%;
}
.footer .container{
	border-top: 1px solid #fff;
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
}
.sns{
	margin-bottom: 20px;
}
.sns a{
	transition: all .3s;
}
.sns a:hover{
	opacity: .7;
}
.sns .twitter{
	margin-right: 40px;
}
.footer small{
	color: #fff;
	font-size: 1.4rem;
}
.veige-box{
	background-color: #f7f2ee;
}

/*動く矢印*/
.arrow-anker{
	position: relative;
    /*形状*/
    display: inline-block;
	padding: 0 0 0 20px;
    text-decoration: none;
    outline: none;
}
/*矢印と下線の形状*/
.arrow-anker::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:0%;
    left: 20%;
    /*下線の形状*/
    width: 100%;
    height: 1px;
	background: #ac9d8f;
    /*アニメーションの指定*/
    transition: all .3s;
}
.arrow-anker::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:-20%;
    /*矢印の形状*/
    width: 15px;
    height:1px;
	background: #ac9d8f;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.arrow-anker:hover::before{
    left: 40%;
}
.arrow-anker:hover::after{
    right: -40%;
}