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


.pc{
	display:none;
}
.smp{
	display:inherit;
}
.pc-center{/* PC時のみセンタリング */
	text-align:left;
}
.smp-center{
	text-align:center;
}
.smp-left{
	text-align:left;
}

/* レイアウト */
/* スマホ時 float無しの1列レイアウトに（初期設定） */

.flex .col-2,
.flex .col-3,
.flex .col-4,
.flex .col-5,
.flex .col-6,
.flex .col-7,
.flex .col-8,
.flex .col-9,
.flex .col-10{
	float:none;
	width:100%;
	box-sizing:border-box;
	padding:0 0.5em; 
}

.flex .smp-col-6{/* スマホ時でも2列レイアウト */
	width:50%;
	float:left;
}

main{
	flex-direction: column;
}
main #header1{
	order: 1;
	width: inherit;
	position: static;
}
main #content{
	order: 3;
	width: inherit;
	position: static;
}
main #header2{
	order: 2;
	width: inherit;
	height: inherit;
	/*padding-bottom: 300px;*/
}
#header1 .wrapper,
#header2 .wrapper{
	position: static;
	padding: 0 1em;
}
#header1 h1{
	margin: 2em 0 1em 0;
}
#header2 .wrapper h2{
	margin: 1em 8vw;
}

#header2 .wrapper p:nth-child(2){
	margin: 1em 25vw 0;
}
#header2::before{
	position: absolute;
	content: none;
}
#teacher::before,
#place::before,
#booking::before{
	position: static;
}


.contents,
.contents-narrow{
    max-width: inherit;
    min-width: inherit;
}
.drawr {
    display: none;
    background-color:rgba(0,0,0,0.6);
    position: absolute;
    top: 0px;
    right:0;
    width:260px;
    padding:60px 0 20px 20px;
    z-index: 100;
}
.drawr li {
    width:260px;
}
.drawr li a {
    color:#fff;
    display: block;
    padding: 15px;
}