@charset "utf-8";

/*============================================================================
	PC非表示
==============================================================================*/
.hiddenPc{
visibility: hidden;
display: none;
width: 0px;
height: 0px;
}

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


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

#Logo{
width: 20%;
max-width: 240px;
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%;
max-width: 1200px;
height: 600px;
margin: 0% auto;
padding: 0%;
background: url(../img/bg_fv.png) no-repeat center top;
background-size: contain;
}

.FvBoxL , .FvBoxR{
width: 50%;
max-width: 600px;
margin: 0% auto;
padding:3% 2%;
}

h1{
width: 100%;
margin: 5% auto 3% auto;
font-size: 1em;
text-align: center;
}

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

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

.SnsLink{
width: 100%;
margin: 0% 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: 100%;
max-width: 200px;
margin: 0% auto;
padding: 3%;
background: #EB9A99;
border: dotted 2px #fff;
text-align: center;
color: #fff;
font-weight: bold;
}

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

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


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

.MainBoxL{
width: 50%;
max-width: 580px;
margin: 0% auto 0% 0%;
padding:80px 1% 0% 0%;
}

.MainBoxR{
width: 50%;
max-width: 580px;
margin: 0% 0% 0% auto;
padding:180px 0% 0% 1%;
background:url(../img/bg_main_right.png) no-repeat center top;
background-size: 304px;
}

.ContentsBox{
border:15px 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: 1.375em;
line-height: 0.85em;
}

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

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

.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{
line-height:2.625em;
}

.DetailBtn a{
display: flex;
justify-content: center;
align-items: center;
width: 13%;
max-width: 80px;
height: 80px;
margin: 0% auto 0% auto;
padding:0%;
text-align: center;
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%;
}

.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:3% auto 0% auto;
padding: 0%;
}

.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;
}

.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%;
margin:3% auto;
padding: 0%;
font-weight: bold;
text-align: center;
}

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


.ConceptBox,.TrialBox,.MachineBox,.PlofileBox,.SchoolBox.,.MetachroBox{position: relative;}
.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%;
max-width: 800px;
margin: 0% auto;
padding:0%;
}

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

.PlofileBox .TextBox dl dt{
width: 15%;
}

.SubMachineBox,SubMetachroBox{
position: relative;
}

.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
==============================================================================*/

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

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

.FooterLink {
width: 50%;
max-width: 600px;
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%;
max-width: 220px;
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: 5% 0% 0% 0%;
background: url(../img/bg_footer.png);
background-repeat: repeat-x;
background-position: left top;
background-size:35px;
}


.FooterLogo{
width: 45%;
max-width: 255px;
margin: 0% auto 1% auto;
padding: 0%;
}

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