@charset "utf-8";

/*============================================================================
	SP非表示
==============================================================================*/
.hiddenSp{
visibility: hidden;
display: none;
width: 0;
height: 0;
}

.br-sp { display:block; }
.br-pc { display:none; }


/*　ハンバーガーメニュー　*/

#g-nav{
/*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
position:fixed;
z-index: -1;
opacity: 0;/*はじめは透過0*/
/*ナビの位置と形状*/
top:0;
width:100%;
height: 100vh;/*ナビの高さ*/
background-color: rgba(34, 34, 34, 0.75);/*背景を少し透過させる*/
/*動き*/
transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
opacity: 1;
z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999; 
width: 100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
display: none;/*はじめは非表示*/
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

#g-nav.panelactive ul {
display: block;
text-align: center; 
}
/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
text-align: center; 
}

#g-nav li a{
color: #fff;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}

/*ボタン外側*/

.openbtn2{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:0px;
right: 3%;
cursor: pointer;
width: 40px;
height:40px;
}
	
/*ボタン内側*/

.openbtn2 span{
display: inline-block;
transition: all .4s;/*アニメーションの設定*/
position: absolute;
left: 0px;
height: 2px;
background-color: #EB9A99;
}


.openbtn2 span:nth-of-type(1) {
top:18px;	
width: 100%;
}

.openbtn2 span:nth-of-type(2) {
top:28px;
width:100%;
}

.openbtn2 span:nth-of-type(3) {
top:38px;
width:100%;
}


/*activeクラスが付与されると線が回転して×に*/

.openbtn2.active span:nth-of-type(1) {
top: 20px;
left: 16px;
transform: translateY(6px) rotate(-45deg);
width: 70%;
}

.openbtn2.active span:nth-of-type(2) {
top: 32px;
left: 16px;
transform: translateY(-6px) rotate(45deg);
width: 70%;
}

.openbtn2.active span:nth-of-type(3) {
display: none;
}


/*============================================================================
	header#globalHeader（ヘッダ）
==============================================================================*/
#headOuter{
width: 100%;
margin: 0% auto;
padding: 0%;
/*background: url(../img/bg_header.png) no-repeat center bottom;
background-size: cover;*/
z-index: 1030;
}

#Logo{
width: 40%;
margin: 0% auto;
}

#Logo:hover{transform: scale(1.1, 1.1);}

#Gnavi{
width: 50%;
margin: 0% auto;
padding: 3% 0% 0% 0%;
}

#Gnavi ul {
width: 100%;
margin: 0% auto;
padding: 0%;
font-weight: bold;
}

#Gnavi ul li{
margin: 0% auto;
padding: 0%;
text-align: center;
font-size: 0.875em;
}

#Gnavi ul li:hover{
transform: rotate(10deg);
}

#Gnavi ul li a:hover{
color: #000;
}


/*============================================================================
FV
==============================================================================*/

.FvWrap {
width: 100%;
margin: 0% auto;
padding: 0% 5% 10% 5%;
background: url(../img/bg_fv_sp.png) no-repeat center top;
background-size:contain;
}

.FvBoxL , .FvBoxR{
width: 100%;
margin: 0% auto;
padding:0%;
}

.FvBoxL img{
width: 60%;
margin: 0% auto;
padding:0%;
}

h1{
width: 100%;
margin: 5% auto 3% auto;
font-size: 0.85em;
text-align: center;
text-shadow: #FEF5D9 1px 0 5px;
}

h2{
width: 100%;
margin: 0% auto;
padding: 0%;
font-size: 0.85em;
line-height: 1.85em;
text-align: center;
}

h2 img{
width: 70%;
margin: 0% auto 3% auto;
}

.SnsLink{
width: 100%;
margin: 0% auto 3% auto;
padding:5%;
}

.SnsLink ul{
width: 100%;
margin: 0% auto;
padding:0%;
}

.SnsLink ul li{
width: 9%;
max-width: 42px;
margin: 0% auto;
padding:0%;
}

.SnsLink ul li:hover{
transform: scale(1.2, 1.2);
}

.TrialLesson{
width: 100%;
margin: 0% auto;
padding: 0%;
text-align: center;
color: #fff;
}

.TrialLesson a{
display: block;
width: 70%;
margin: 0% auto;
padding: 3%;
background: #EB9A99;
border: dotted 2px #fff;
text-align: center;
color: #fff;
font-size: 0.85em;
font-weight: bold;
}

.TrialLesson a i{
margin: 0% 1% 0% 0%;
}

.TrialLesson a:hover{
transform: scale(1.1, 1.1);
}


/*============================================================================
Main
==============================================================================*/
.MainWrap{
width: 100%;
margin: 0% auto;
padding: 0% 5% 5% 5%;
}

.MainBoxL,.MainBoxR{
width: 100%;
margin: 0% auto;
padding:0% 2%;
}

.ContentsBox{
border:10px solid #fff;
margin: 0% auto 10% auto;
padding: 8%;
z-index: 99;
}

.ContentsBox h2{
margin: 0% auto 10% auto;
padding: 1.2em 0.5em 1em 0.5em;
background: #fff;
box-shadow: 0px 0px 0px 10px #fff;
border: dashed 2px #DDD8C3;
font-size: 0.85em;
line-height: 1.125em;
}

.ContentsBox h2 span{
font-size: 0.636em;
}

.ContentsBox h3{
margin: 0% auto;
padding: 3% 0%;
border-bottom: dashed 2px #FEF5D9;
font-size: 1em;
line-height: 1.25em;
}

.ContentsBox h3 i{
margin: 0% 1% 0% 0%;
padding: 0%;
}

.TextBox , .ImgBox{
padding: 3% 0%;
}

.ImgBox img{
margin: 0% auto;
text-align: center;
}

.TextBox p{
font-size: 0.85em;
line-height:2em;
}

.DetailBtn a{
display: flex;
justify-content: center;
align-items: center;
width: 20%;
max-width: 80px;
height: 80px;
margin: 0% auto 0% auto;
padding:0%;
text-align: center;
font-size: 0.85em;
line-height: 0.85em;
background: url(../img/bg_btn.png) no-repeat center center;
background-size: contain;
}

.DetailBtn a:hover{transform: rotate(-10deg);}

.TableBox table{
width: 100%;
margin: 5% auto 0% auto;
}

.TableBox table tr th,.TableBox table tr td{
padding: 2%;
margin: 1px;
background: #fff;
text-align: center;
}

.TableBox table tr th{
width: 30%;
font-size: 0.65em;
}

.TableBox table tr td{
font-size: 0.75em;
}

.ReserveAmeblo dt,.ReserveAmeblo dd{
display: inline-table;
vertical-align: middle;
}

.ReserveAmeblo dd img{width: 42px;}
.ReserveAmeblo dd img:hover{transform: rotate(10deg);}

.PictureList{
width: 100%;
margin:0% auto;
padding: 0%;
}

.PictureList ul{
width: 100%;
margin:0% auto;
padding: 0%;
}

.LessonPicture li{
width: 30%;
margin:0% auto 3% auto;
padding: 0%;
border: solid 5px #fff;
}

.MachinePicture li{
width: 48%;
margin:0% auto 6% auto;
padding: 0%;
}

.MachinePicture li img{
border: solid 5px #fff;
}

.MachinePicture li dl{
width: 100%;
margin:10% auto 0% auto;
padding: 0%;
font-size: 0.85em;
}

.MachinePicture li dl dt{
width: 100%;
margin:0% auto 2%;
padding: 0%;
text-align: center;
font-weight: bold;
line-height: 1.25em;
}

.MachinePicture li dl dt span{
font-size: 0.85em;
}

.MachinePicture li dl dd{
padding: 0% 1%;
font-size: 0.85em;
line-height: 1.5em;
}

.MTBox30{
margin: 10% auto 0% auto;
}

.CollectionPicture {
justify-content: flex-end !important;
}

.MainWrap .CollectionPicture li{
width: 30%;
margin:0% auto 3% auto;
padding: 0%;
}

.CollectionPicture li img{
width: 100%;
border: solid 5px #fff;
}

.CollectionPicture li dl{
width: 100%;
margin:5% auto;
padding: 0%;
}

.CollectionPicture li dl dt{
width: 100%;
height: 12vw;
margin:3% auto;
padding: 0%;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.85em;
line-height:  1em;
}

.CollectionPicture li dl dd{
width: 100%;
margin:0% auto;
padding: 0%;
font-size: 0.85em;
}


.SubWrap .CollectionPicture li{
width: 45%;
margin:0% auto 5% auto;
padding: 0%;
}


.ConceptBox,.TrialBox,.MachineBox,.PlofileBox,.SchoolBox.,.MetachroBox{position: relative;}

@media screen and (min-width 768px){
.ConceptBox::after{
content: url(../img/icon_b.png);
display: inline-block;
transform: scale(0.45);
position: absolute;
top: 60%;
right: -20%;
z-index: 100;
}

.TrialBox::before{
content: url(../img/icon_a.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 82%;
left: 2%;
z-index: 100;
}

.MachineBox::after{
content: url(../img/icon_c.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 83%;
left: 48%;
z-index: 100;
}

.PlofileBox::after{
content: url(../img/icon_d.png);
display: inline-block;
transform: scale(0.35);
position: absolute;
top: 75%;
right: 0%;
z-index: 100;
}

.SchoolBox::after{
content: url(../img/icon_g.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 90%;
left: 0%;
z-index: 100;
}

.MetachroBox::after{
content: url(../img/icon_f.png);
display: inline-block;
transform: scale(0.45);
position: absolute;
top: 97%;
left: 0%;
z-index: 100;
}
}


/*============================================================================
Sub
==============================================================================*/

.SubWrap{
width: 100%;
margin: 0% auto;
padding:0% 5%;
}

.PlofileBox .TextBox dl dt,.PlofileBox .TextBox dl dd{
display: inline-table;
margin: 0% 0% 2% 0%;
font-size: 0.85em;
line-height: 1.85em;
}

.PlofileBox .TextBox dl dt{
width: 100%;
background: #fff;
padding: 0% 2%;
}


.SubMachineBox,SubMetachroBox{
position: relative;
}

@media screen and (min-width 768px){
.SubMachineBox::after{
content: url(../img/icon_c.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 90%;
left: 55%;
z-index: 100;
}

.SubMetachroBox::before{
content: url(../img/icon_d.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 98%;
left: 0%;
z-index: 100;
}

.SubMetachroBox::after{
content: url(../img/icon_e.png);
display: inline-block;
transform: scale(0.5);
position: absolute;
top: 90%;
right: 0%;
z-index: 100;
}
}

.PictureBoxA{
width: 100%;
margin: 5% auto 0% auto;
padding: 0%;
}

.PictureBoxB{
width: 100%;
margin: 5% auto;
padding: 0%;
}

.PictureBoxA img,.PictureBoxB img{
border: solid 5px #fff;
margin: 0%;
padding: 0%;
}

/*============================================================================
footer#globalFooter
==============================================================================*/

footer {
width: 100%;
clear: both;
margin: 0%;
padding:3% 0%;
}

.FooterLink {
width: 80%;
margin: 0% auto;
padding:1% 0%;
}

.TrialLessonFooter{
width: 100%;
margin: 0% auto 3% auto;
padding: 0%;
text-align: center;
color: #fff;
}

.TrialLessonFooter a{
display: block;
width: 100%;
margin: 0% auto;
padding: 3%;
background: #EB9A99;
border: dotted 2px #fff;
text-align: center;
color: #fff;
font-weight: bold;
}

.TrialLessonFooter a i{
margin: 0% 1% 0% 0%;
}

.TrialLessonFooter a:hover{
transform: scale(1.1, 1.1);
}

.FooterBox{
width: 100%;
margin: 0% auto;
padding: 10% 0% 0% 0%;
background: url(../img/bg_footer.png);
background-repeat: repeat-x;
background-position: left top;
background-size:35px;
}


.FooterLogo{
width: 35%;
margin: 0% auto 1% auto;
padding: 0%;
}

.FooterCopy{
width: 100%;
font-size: 0.5em;
text-align: center;
}

/* page-top */
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100;
}
#pageTop a {
	display: block;
	background: url(../img/gotop.webp);
	background-size: 34px 34px;
	width: 34px;
	height: 34px;
	text-indent: -9999px;
}
#pageTop a:hover {
	background: url(../img/gotop.webp);
	background-size: 34px 34px;
}