/* CSS Document */
*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; height:100%;
}
body{ background:#fff; height:100%; color:#221814; position:relative;}
a{ color:#221814;}
h1,h2,h3,p{ line-height:1.4em;}
img{ max-width:100%; vertical-align:bottom;}
.sp{ display:none;}
p{ font-size:1.4rem; line-height:1.6em; margin:0 auto; font-weight:400; text-align:left;}
.center{ text-align:center;}

/*トグルボタン*/
#menubtn{
	width:40px;
	height:41px;
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 3;
	border:1px solid #7d8488;
    border-radius: 4px;        /* CSS3草案 */  
    -webkit-border-radius: 4px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 4px;   /* Firefox用 */
	font-family:Arial, Helvetica, sans-serif;
	}
header #menubtn{display:none;}

#menubtn #menubtn_line{
    width: 40px;
    height:40px;
    position: absolute;
    top: 0px;
    right: 0px;
	
}
#menubtn #menubtn_line span {
    display: block;
    background: #7d8488;
    width:   23px;
    height: 2px;
    position: absolute;
    left: 9px;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
}
#menubtn p{color:#fff; position:absolute; bottom:3px; left:8px;}
#menubtn #menubtn_line span:first-child {
    top: 12px;
}
#menubtn #menubtn_line span:nth-child(2) {
    margin-top: -1px;
    top: 50%;
}
#menubtn #menubtn_line span:last-child {
    bottom: 12px;
}
#menubtn.active #menubtn_line span:first-child {
    -webkit-transform: translateY(7px) rotate(45deg);
    -moz-transform: translateY(7px) rotate(45deg);
    -ms-transform: translateY(7px) rotate(45deg);
    transform: translateY(7px) rotate(45deg);
}
#menubtn.active #menubtn_line span:nth-child(2) {
    opacity: 0;
}
#menubtn.active #menubtn_line span:last-child {
    -webkit-transform: translateY(-7px) rotate(-45deg);
    -moz-transform: translateY(-7px) rotate(-45deg);
    -ms-transform: translateY(-7px) rotate(-45deg);
    transform: translateY(-7px) rotate(-45deg);
}


/*ヘッダー*/
header { width:1150px; max-width:100%; margin:0 auto; position:relative; padding:50px 0 15px; display: flex; justify-content: space-between;}
header .logo,footer .logo{ width:530px; padding:20px 0 0 150px; font-size: clamp(1.4rem, calc(1.6rem + 0.625vw), 2.6rem); line-height:1.4em; font-weight:500; position:relative; text-align:left;}
header .logo:before,footer .logo:before{ content:""; width:150px; height:119px; position:absolute; top:0; left:0; background:url(../images/logo.jpg) no-repeat; background-size:cover;}


header nav {width:560px; max-width:90%; margin:50px auto 0;}
header ul.nav { display: flex; justify-content: space-between;}
header ul.nav li{  font-size:1.4rem; line-height:1.4rem; padding:5px 20px; font-weight:500; letter-spacing:0.1em;}
header ul.nav li span{ font-size:1.6rem; line-height:1.4rem;  display:block; font-family: "Merriweather", serif; margin-bottom:3px;}



#navi_toggle{ width:100%; display:none; background:rgba(255,255,255,0.9); padding:30px; position:absolute; right:0; top:0; z-index:2; box-sizing: border-box;}
#navi_toggle ul{ margin:60px 0 0 0; font-weight: 900;}
#navi_toggle ul li{ text-align:left; padding:10px 25px 20px; font-size:1.6rem; line-height:1.2em;}
#navi_toggle ul li span{ padding-bottom:6px; display:inline-block; font-family: "Merriweather", serif;}


/*フッター*/
#footer_wrap { width:100%; max-width:100%; margin:0 auto; padding:40px 0; background-size:100%;}
footer{ width:1060px; max-width:95%; margin:0 auto; overflow:hidden; display:flex; justify-content: space-between; flex-wrap: wrap; text-align:left; }
footer .logo{ margin-bottom:40px;}
footer .left_box{ width:800px; max-width:70%; padding:0; margin:0;}
footer .left_box h2{ margin-bottom:10px; font-size:1.6rem; line-height:1.2em; margin:20px 0 20px 30px;}
footer .left_box p{font-size:1.4rem; line-height:1.8em; font-weight:500; margin:20px 0 20px 30px;}
footer .left_box .tel{ font-size:1.4rem;  padding-left:20px; position:relative; margin-top:10px;}
footer .left_box .tel:before{ content:""; width:20px; height:20px; position:absolute; left:0; top:-3px; background:url(../images/tel.png) no-repeat; background-size:cover;}

footer .right_box{ width:260px max-width:30%; font-size:1.6rem; line-height:1.2em; padding:0; }
footer .right_box ul{}
footer .right_box ul li{ text-align:left; padding:10px 25px 20px;}
footer .right_box ul li span{ padding-bottom:6px; display:inline-block; font-family: "Merriweather", serif;}


#navi_toggle ul li a:hover,footer .right_box ul li a:hover,header ul.nav li a:hover{ color:#9E5BA1;}

/*共通*/
h1.title{ font-size:1.8rem; line-height:1.4em; letter-spacing:0.1em; margin:100px auto 100px;}
h1.title span{ font-size: clamp(2rem, calc(2.2rem + 1vw), 3.4rem); line-height:1.4em; font-family: "Merriweather", serif; color:#9E5BA1; display:block;}

#top h2{ font-size: clamp(2rem, calc(2.2rem + 1.2vw), 3.8rem);line-height:1.6em; font-weight:500; margin-bottom:60px;}
/*トップページ*/
#top #sec1,#top #sec2,#top #sec3,#top #sec4,#top #sec5{ max-width:90%; margin:0 auto; padding-bottom:100px; padding-top:5px;}
#top .section_wrap{ background:#FCFBF7;}
#top #sec1 p{ width:900px; max-width:100%; margin:0 auto;}
#top #sec2 h2:after{ content:"初級編"; text-align:center;  font-size: clamp(2rem, calc(2.2rem + 1.2vw), 3.8rem); line-height:160px; color:#fff; letter-spacing:0.1rem; background:#9E5BA1; width:166px; height:166px; vertical-align:middle; display:inline-block; border-radius: 999999px; -webkit-border-radius: 999999px; -moz-border-radius: 999999px;-moz-border-radius: 999999px; margin-left:20px; }

#top #sec2 .seminer_wrap{ width:1060px; max-width:100%; margin:20px auto; display:flex; justify-content:center; flex-wrap:wrap;}
#top #sec2 .seminer_wrap:nth-of-type(2){flex-direction:row-reverse;}
#top #sec2 .image_box{ margin:0 20px;}
#top #sec2 .seminar_box{ width:480px; max-width:100%; border:1px solid #DCDCDD; padding:30px 20px;}
#top #sec2 .seminar_box h3{ font-size: clamp(1.8rem, calc(1.6rem + 0.625vw), 2.2rem); font-weight:500; line-height:1.4em; letter-spacing:0.1rem; color:#9E5BA1; border-bottom:1px solid rgba(153,153,153,1); margin-bottom:20px; padding-bottom:5px;}
#top #sec2 dl { display:flex; justify-content:left; flex-wrap:wrap;  font-size: clamp(1.6rem, calc(1.4rem + 0.625vw), 1.8rem); line-height:1.6em; text-align:left;}
#top #sec2 dl dt{ width:130px; margin-bottom:10px;}
#top #sec2 dl dd{ width:calc(100% - 130px); margin-bottom:10px;}
#top #sec2 dl dd span{  font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.6rem);  padding-left:1em; display:inline-block;}

#top #sec3 dl { width:660px; max-width:100%; margin:30px auto; display:flex; justify-content:left; flex-wrap:wrap;  font-size: clamp(1.4rem, calc(1.2rem + 0.625vw), 1.8rem); line-height:2em; text-align:left;}
#top #sec3 dl dt{ width:80px; margin-bottom:10px; padding:5px; border-right:1px solid #000; text-align:center;}
#top #sec3 dl dd{ width:calc(100% - 80px); margin-bottom:10px; padding:5px 10px;}

#top #sec4 .profile{ width:960px; max-width:100%; margin:0 auto 30px; border:1px solid #9E5BA1; padding:20px; display:flex; justify-content: space-between; flex-wrap:wrap; align-items:center; }
#top #sec4 h2{ font-size:2.6rem; line-height:1.6em; font-weight:400; text-align:left; margin:0 0 30px 0;}
#top #sec4 h2 span{ font-size:1.6rem; line-height:1.4em; display:inline-block; margin-bottom:10px;}
#top #sec4 .profile div{ width:570px; max-width:calc(100% - 321px); padding:30px 60px;}
#top #sec4 p{ line-height:2em;}

#top #sec5 h1{  font-size: clamp(2.2rem, calc(2.4rem + 1vw), 3.2rem); line-height:1.6em; letter-spacing:0.1em; margin:100px auto 60px;}
#top #sec5 h2{  font-size: clamp(1.8rem, calc(2rem + 1vw), 2.8rem); margin:100px auto 0;}
#top #sec5 p{ text-align:center; font-size:1.6rem; margin:30px auto;}
#top #sec5 .web_btn{ width:420px; max-width:100%; font-size: clamp(1.8rem, calc(2rem + 0.625vw), 2.4rem); line-height:1.4em; padding:20px; color:#fff; background:#9E5BA1; margin: 20px auto 60px;}
#top #sec5 .web_btn:hover{ opacity:0.8;}
#top #sec5 .line_btn{ width:420px; max-width:100%;  border:1px solid #888889; padding-bottom:30px; margin:0 auto 100px;}
#top #sec5 .line_btn div{  font-size: clamp(1.8rem, calc(2rem + 0.625vw), 2.4rem); line-height:1.4em; padding:20px; color:#fff; background:#9E5BA1; margin-bottom:30px;}

#top .jisseki{ width:1060px; max-width:100%; margin:50px auto;}
#top .jisseki .col2{ display:flex; justify-content:center; flex-wrap:wrap; align-items: center;}
#top .jisseki h1{ width:calc(100% - 410px); padding:30px; font-size: clamp(1.8rem, calc(2rem + 1.2vw), 3rem); line-height:1.6em; margin:30px auto; font-weight:500; text-align:left;}
#top .jisseki p{ padding:30px; font-size:1.6rem; line-height:2em;}

#top .jisseki .col2 .left_box{ width:410px; max-width:100%; text-align:center;}
#top .jisseki .col2 .left_box img{  margin-bottom:10px;}
#top .jisseki .col2 .right_box{ width:calc(100% - 410px);}
#top .jisseki .col2 .right_box h1{ width:100%;}



#top .jisseki2 .col2{ flex-direction: row-reverse;}

.gmap {
position: relative;
width:800px;
padding-bottom: 50%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

 
 
 
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}



#privacy { width:800px; max-width:90%; margin:60px auto 100px;}
#privacy h2{ max-width:100%;  text-align:left; font-size:1.8rem; line-height:1.4em; margin:30px auto 10px;}
#privacy h3{ max-width:100%;  font-size:1.6rem; line-height:1.6em; text-align:left; margin:0 auto 5px;}
#privacy p{ max-width:100%; font-size:1.4rem; line-height:1.6em; text-align:left; margin-bottom:20px;}

#thanks .sec1{ width:800px; max-width:90%; margin:200px auto;}
#thanks h2{ font-size:2.2rem; line-height:1.6em; margin:30px auto; text-align:left;}
#thanks p{ font-size:1.6rem; line-height:2em;}


#thought .sec1{ width:1000px; max-width:95%; margin:60px auto; counter-reset: num;}
#thought h2{ font-size:2.2rem; line-height:1.6em; margin:60px auto 30px; padding-bottom:5px; text-align:left; border-bottom:1px solid #ddd; counter-increment: num;}
#thought h2:before{ content: counter(num) "."; font-family: "Merriweather", serif; font-size:2.4em; padding-right:10px; color:#9E5BA1; font-weight:400;}
#thought .sec1 p{width:940px; max-width:95%; margin:20px auto; font-size:1.6rem; line-height:1.7em;  padding: 10px; position:relative; padding-left:30px; border-bottom:1px dashed #ccc;}
#thought .sec1 p:before{ content:""; display:block; width:10px; height:10px; background:#d2b4d9; position:absolute; left:10px; top:20px;}

#contact{ width:800px; max-width:90%; margin:60px auto 100px;}

#contact p{ font-size:1.6em; line-height:3em; }
@media screen and (max-width: 1033px){
#top .sec3 .equipment_list{justify-content:center;}
}


@media screen and (max-width: 960px){
header .nav_wrap,header ul.sns_nav{ display:none;}
header #menubtn{ display:block;}


}
@media screen and (max-width: 900px){
#top #sec4 .profile{ display:block;}
#top #sec4 .profile div{max-width:100%; padding:30px 0; margin:0 auto;}
#top #sec4 p{ line-height:2em;}

#top .jisseki .col2{ display:block;}
#top .jisseki h1{ width:90%; padding:0px;}
#top .jisseki .col2 .right_box{ width:90%; padding:0px; margin:0 auto;}
#top .jisseki .col2 .left_box{ width:100%; margin:0 auto;}
}
@media screen and (max-width: 780px){
}
/*767以下 ipadを含まない*/
@media screen and (max-width: 767px){
.spno{ display:none;}


#top #sec2 h2:after{ content:"初級編"; text-align:center;  font-size: clamp(2rem, calc(2.2rem + 1.2vw), 3.8rem); line-height:120px; color:#fff; letter-spacing:0.1rem; background:#9E5BA1; width:120px; height:120px; vertical-align:middle; display:block; border-radius: 999999px; -webkit-border-radius: 999999px; -moz-border-radius: 999999px;-moz-border-radius: 999999px; margin:20px auto 0; }

}





/*600以下 */
@media screen and (max-width: 600px){










#footer_wrap{ padding:30px 0;}

footer .left_box{ width:100%; max-width:100%; padding:0; margin:0;}
footer .right_box{ width:100%; max-width:100%;}
footer .right_box ul{margin:30px 0 ; }

}

/*560以下 */
@media screen and (max-width: 560px){

header .logo,footer .logo{ width:auto; max-width:100%; padding:20px 0 0 100px; font-weight:500; box-sizing:border-box;}
header .logo:before,footer .logo:before{ content:""; width:100px; height:80px; }

#top #sec2 dl { display:block;}
#top #sec2 dl dt{ width:100%; margin-bottom:10px; border-bottom:1px dotted #000;}
#top #sec2 dl dd{ width:100%; margin-bottom:20px;}



/*グーぐるマップ*/
.gmap {
position: relative;
width:480px;
padding-bottom: 70%;
height: 0;
overflow: hidden;
max-width:100%;
margin:0 auto;
border:1px solid #CCCCCC;
}
 
.gmap iframe,
.gmap object,
.gmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
	
}
/*414以下 iphone縦*/
@media screen and (max-width: 414px){
	
#top #sec3 dl { display:block;}
#top #sec3 dl dt{ width:80px; border-right:none; border:1px solid #000; margin-bottom:0; padding:0;}
#top #sec3 dl dd{ width:100%; margin-bottom:20px; padding:5px 10px;}






}