@charset "utf-8";
/*
construction.css
サイト全体で使うレイアウト用のクラス、ヘッダー・フッター・見出し・本文・リスト・テーブルなど、大まかな構造を定義
*/

#home{height: 100vh;display: block;position: relative;}
#home .home-wrap{padding-top: 0;margin: 0;position: absolute;left: 50%;top: 48%;width: 100%;transform: translateX(-50%) translateY(-50%);}
#home .logo{min-width: 280px;width: 35%;height: auto;display: block;margin: 0 auto;margin-bottom: 50px;}
#home .lead-en{min-width: 280px;width: 35%;display: block;margin: 0 auto;margin-bottom: 30px;}
#home .lead-en span{display:inline-block; width: 100%;}
#home .lead-en img{}
#home .lead-jp{text-align: center;line-height: 1em;margin-bottom: 0;}


@media screen and (min-width: 901px) {
}

@media screen and (max-width: 1200px){
}

@media screen and (max-width: 1140px){
}

@media screen and (max-width: 900px){
    #home{min-height: 100vh; display: flex;}
    #home .home-wrap{width: 70%; min-width: inherit; display: block; margin: auto;}
    #home .logo{width:80%; min-width: inherit; margin-bottom: 5vw;}
    #home .lead-en{width: 100%; min-width: inherit;}
    #home .lead-jp{width: 100%; min-width: inherit; font-size: 0.8rem;}
}

@media screen and (max-width: 600px){
#concept .title3{ text-align: left!important; font-size: 1rem; margin-bottom: 1em;}
#concept .title3 br{display: none;}
}

@media screen and (max-height: 750px){
	#home{height: auto;}
	#home .home-wrap{transform:none; position: relative; left: inherit; padding: 6.25vw 0;}
}




#teacher .profile{ width: 35%; text-align: left;}
#teacher .profile .namearea{position: relative;margin-bottom: 20px;}
#teacher .profile .namearea .name.eng{position: absolute;right: 0;}
#teacher .profile-img{margin-bottom: 20px;;}

#teacher .fukidashi{width: 55%;border:5px solid #1f2774;border-radius: 3vw;box-sizing: border-box; position: relative;}
#teacher .fukidashi .innner{padding: 15%;}
#teacher .fukidashi .title4{line-height: 0;}
#teacher .fukidashi .title4 img{ height: 1vw; width: auto;}
#teacher .fukidashi::before{content: ""; width: 26px; height: 32px; background: url("../img/fukidashi.svg"); background-size: cover; position: absolute; top: 25%;}
#teacher .fukidashi.-right::before{content: ""; width: 26px; height: 32px; background: url("../img/fukidashi.svg"); background-size: cover; position: absolute; top: 25%; right: 0; transform: translateX(100%) ;}
#teacher .fukidashi.-left::before{content: ""; width: 26px; height: 32px; background: url("../img/fukidashi.svg"); background-size: cover; position: absolute; top: 25%; left: 0; transform: translateX(-100%) scale(-1, 1); }

@media screen and (max-width: 900px){
   #teacher .profile{ width: 100%; position: relative; margin-top: 5vw; overflow: hidden;}
    #teacher .profile .profile-img{ width: 30%; display: block; height: auto; float: left; margin-right:5vw;}
    #teacher .profile .namearea,
    #teacher .profile .mini{ width:calc(70% - 5vw); display: block; float: right;}
    #teacher .fukidashi{width: 100%;border:2px solid #1f2774; margin-top: 5vw}
    #teacher .fukidashi::before{display: none;}
    #teacher .fukidashi .innner{    padding: 5vw;}
    #teacher .fukidashi .title4 img{height: 2vw;}
}

@media screen and (max-width: 600px){
}


#point .pointArea .point{ width:30%; display: block; }
#point .pointArea .point .img{background: url("../img/parts_metit_board.svg") no-repeat top center;background-size: 100%; position: relative; padding-top: 100%; margin-bottom:15%;  }
#point .pointArea .point .img img:first-child{position: absolute; top:50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
#point .pointArea .point .img .num{ width:20%;height: auto; position: absolute; bottom:0; left: 50%; transform: translateX(-50%) translateY(50%);}
#point .pointArea .point .title3{margin-bottom: 1em;}

@media screen and (max-width: 900px){
    #point .pointArea .point{ width:100%; margin-bottom: 10vw;}
    #point .pointArea .point .title3{text-align: center;}
}
@media screen and (max-width: 600px){
    #point .pointArea .point{ width:80%; margin-left: auto; margin-right: auto;}
    
}

#timetable .title3{margin-bottom: 1em;}
.timetableWrap .tabNav .tab{background: #1f2774; text-align: center; color: #fff; width: 25%; border-right: 1px solid #fff; border-bottom: 1px solid #fff; padding: 1.5em 1em; cursor: pointer;}
.timetableWrap .tabNav .tab span{line-height: 1.8em;}
.timetableWrap .tabNav .tab.act {background: #ffe228; color: #1f2774; border-bottom: 1px solid #ffe228;}
.timetableWrap .tabNav .tab:nth-child(1){border-radius: 30px 0 0 0;}
.timetableWrap .tabNav .tab:nth-child(4){border-radius: 0 30px 0 0; border-right:none;}

.taball{background: #ffe228; padding: 20px;}
.taball .tabwrap{background: #fff; padding: 50px; display: none; opacity: 1;}
.taball .tabwrap.show{display: block; opacity: 1;}

.tabwrap .basicPrice{ width: calc(50% - 15px); display: block; background: #f2f2f2; padding: 1em 2em;}
.tabwrap .basicPrice.list-horizontal > dt{width:60%;}
.tabwrap .basicPrice.list-horizontal > dd{width: 38%; text-align: right;}
.tabwrap .caption{margin-top: 1rem;}

@media screen and (max-width: 900px){
    .taball .tabwrap{padding: 5vw;}
    .timetableWrap .tabNav .tab{ width:calc((100% - 10em) / 3 );}
    .timetableWrap .tabNav .tab:nth-child(1){ width:10em; }
    .timetableWrap .tabNav .tab:nth-child(1){border-radius: 15px 0 0 0;}
.timetableWrap .tabNav .tab:nth-child(4){border-radius: 0 15px 0 0; }
    .tabwrap .basicPrice:nth-child(1){margin-top: 0;}
    .tabwrap .basicPrice{width: 100%; margin-top: 1px;}
}
@media screen and (max-width: 600px){
    .taball{padding: 1.25vw;}
    .timetableWrap .tabNav .tab:nth-child(1){border-radius: 10px 0 0 0;}
.timetableWrap .tabNav .tab:nth-child(4){border-radius: 0 10px 0 0; }
    .timetableWrap .tabNav .tab{font-size: 0.8rem; padding: 1em 0.5em;}
}

.program.list-horizontal{border-top: 1px solid #1f2774;}
.program.list-horizontal > dt{ background: #f2f2f2; padding: 1em 2em; border-bottom: 1px solid #1f2774;}
.program.list-horizontal > dd{padding: 1em 2em; border-bottom: 1px solid #1f2774; position: relative;}

.program.list-horizontal > dd .time{border:1px solid #1f2774; font-size: 0.8rem; padding:0.5em 0.5em; margin-left: 1em;}
.program.list-horizontal > dd .price{ width:11em; position: absolute; right: 0; top: 1em; text-align: right;}

#map{position: relative; padding-top: 60%; border-radius: 0 280px 0 280px; overflow: hidden;}
#map iframe{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

@media screen and (max-width: 1200px){
#map{border-radius: 0 210px 0 210px;}
}

@media screen and (max-width: 900px){
#map{border-radius: 0 140px 0 140px;}
    .program.list-horizontal > dt,
    .program.list-horizontal > dd{padding: 1em;}
    .program.list-horizontal > dd .price{ width:11em; position: relative; right:inherit; top:inherit; text-align: right;}
}

@media screen and (max-width: 600px){
#map{border-radius: 0 50% 0 50%; padding-top: 100%;}
    .program.list-horizontal > dt,
    .program.list-horizontal > dd{width: 100%;}
    .program.list-horizontal > dt{border-bottom: none;}
}

#access .btn.-map svg{ width: 96px; height: 16px; fill:#fff; top: 2px; position: relative;}
@media screen and (max-width: 600px){    
    #access .btn.-map{line-height: 40px; width: 100%; margin-top: 1em;
    padding: 0 2rem;
    background: #1f2774;
    color: #fff;
    display: inline-block;
    border-radius: 20px;}
    #access .btn.-map svg{height: 13px;}
    ｝