@charset "UTF-8";

:root{
    --maincolor:#25569C;
    --subcolor:#3D965C;
    --basecolor:#EDEDED;
    --black:#222;
    --white:#fff;
    --zoomvalue:1;
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    max-width: 100%;
}
html,body {
    font-size:100%;
    line-height:1.6;
	scroll-behavior: smooth;
}
a{ text-decoration:none;}
ul,ol{ list-style:none;}
li{ list-style:none;}
img{ vertical-align:middle; padding: 0; margin: 0;line-height: 0; max-width: 100%;}
table { width:100%;border-collapse: collapse; border-spacing: 0;}


/* @link */
a {text-decoration: none; transition: 0.3s;color: var(--black);}
a:hover,a:active{color: var(--maincolor); text-decoration: none;}
a img{border: none;}

a:hover img {
	opacity: 0.8;
}
a img {
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;}


/* @css base block */
.sp{ display:none;}
.tb{ display:none;}
.pc{ display:inline;}

.oh{overflow: hidden;}

.f-min{
    font-family: "Shippori Mincho", serif;
    font-optical-sizing: auto;
    font-style: normal;
  }


.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

h1,h2,h3,h4,.bold{font-weight: bold;}

.color{color: var(--maincolor);}
.cen{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.bold{font-weight: bold;}
.small{font-size: 0.9rem;}
.big{font-size: 1.5rem;}

.bg01{background: var(--basecolor);}
.bg02{
    background: var(--maincolor);
    .section_title{
        color: var(--white);
    }
}

/*アニメーション設定関連*/
@keyframes fuwa-up-down{
    from{
        translate: 0 40px;
    }
    50%{
        translate: 0 0;
    }
    to{
        translate: 0 40px;
    }
}

@keyframes jiwa{
	0%{
		transform: scale(0.8);
		opacity: 0;
	}
	30%{
		transform: scale(0.9);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes slide-up{
    from{opacity: 0;translate:0 30%;}
    to{opacity: 1; translate:0 0;}
}
@keyframes slide-down{
    from{opacity: 0; translate:0 -30%;}
    to{opacity: 1;  translate:0 0;}
}
@keyframes slide-l{
    from{opacity: 0; translate:50%;}
    to{opacity: 1; translate:0;}
}

@keyframes show-to-right{
    from{clip-path: inset(0 100% 0 0);}
    to{clip-path: inset(0);}
}
@keyframes show-to-left{
    from{clip-path: inset(0 0 0 100%);}
    to{clip-path: inset(0);}
}
@keyframes show-to-bottom{
    from{clip-path: inset(0 0 100% 0);}
    to{clip-path: inset(0);}
}

#breadcrumb ul {
    display: flex;
	justify-content:flex-end;
    gap: 0.3em;
    margin: 50px 0;
	font-size:80%;
}
.post_box #breadcrumb ul{
	justify-content:flex-start;
}

/* ここから下　サイト個別の内容 */

/*全体の箱*/
html{
    font-size: 16px;
}
html.open{
    position: fixed;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

body { 
	margin: 0;
	padding: 0;
	color: #222;
	/*font-size: clamp(8px,calc(1.05rem * var(--zoomvalue)),3rem);*/
	font-size: clamp(8px,1.05rem,3rem);
    line-height: 1.6;
}

main{
    display: flex;
    flex-direction: column;
}
main > section{
    width: 100%;
    margin: 0 auto;
    position: relative;
}

main p{
    text-align: justify;
}
main p + p{
    margin-top: 1em;
}



/*header*/
header{
    display: flex;
    justify-content: space-between;
    padding: 0;
    background: var(--white);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    flex-wrap: wrap;
}
.header_copy{
    width: 100%;
    padding: 1em 70px;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
}
header h1 a{
    display: block;
    width: 40%;
    margin-left: 60px;
}
#menu{
    display: flex;
    gap:1em;
    font-size: 14px;
    a{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1.5em;
        height: 100%;

        &.contact_btn{
            background: var(--subcolor);
            color: var(--white);
            font-size: 110%;
            padding: 1.5em 2.5em;
            &::after{
                content: '';
                display: block;
                height: 0.5em;
                width: 0.5em;
                border-bottom: 2px solid ;
                border-right: 2px solid ;
                rotate:-45deg;
                margin-left: 0.5em;
                transition: 0.3s;
            }
            &:hover{
                opacity: 0.7;
                &::after{
                    translate: 5px 0;
            }
        }
        }
    }
}



.menubtn{display: none;}

/*footer*/

footer{
    padding-top: 2em;
}

.fot_flex{
    display: flex;
    justify-content: space-between;
    padding: 4em 0 120px;
    align-items: center;
}
.fot_info{
    font-style:normal;
    width: 40%;
}
.fot_tel{
    padding: 1em 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0.5em;
    a{
        font-size: 200%;
    }
}

.fot_menu{
    display: flex;
    flex-direction: column;
    gap:0.5em;
    width: fit-content;
}
.sns{
    display: flex;
    gap:1em;
    margin-top: 0.5em;
    a{
        display: block;
        width: 30px;

        &:hover{
            opacity: 0.8;
        }
    }
}
.underline{
    display: block;
    width: fit-content;
    color: var(--maincolor);
    margin-top: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--maincolor);
}

.copy{
	font-size: 0.75rem;
    padding: 2.5em 0;
    text-align: center;
    background: var(--maincolor);
    color: #fff;
}


/*見出し*/
h2{
    font-size: 210%;
    letter-spacing: 0.1em;
    margin-bottom: 1.5em;
}
.section_title{
    color: var(--maincolor);
    font-size: 280%;
    line-height: 1.8;
    span{
        font-size: 1.1rem;
        display: block;
    }
}


/*ボタン*/
/*linkbtnと色、形状、サイズをクラス名で指定可*/

.linkbtn{
    width: fit-content;
    margin: 1em 0 1.5em;
    padding: 0.5em 2em;
    background: var(--btn-back-color);
    color: var(--btn-text-color);
    border-width: 2px;
    border-style: solid;
    border-color: var(--btn-border-color);
    transition: 0.3s;
    display: flex;
    align-items: center;
    cursor: pointer;
    &::after{
        content: '';
        display: block;
        height: 0.5em;
        width: 0.5em;
        border-bottom: 2px solid ;
        border-right: 2px solid ;
        rotate:-45deg;
        margin-left: 0.5em;
        transition: 0.3s;
    }

}
.linkbtn:hover{
    background: var(--btn-text-color);
    color: var(--btn-back-color);
    border-color: var(--btn-border-color);
    &::after{
        translate: 3px 0;
    }
}
/*色*/
.btn_white{
    --btn-back-color:#fff;
    --btn-border-color:var(--maincolor);
    --btn-text-color:var(--maincolor);
}
.btn_color{
    --btn-back-color:var(--maincolor);
    --btn-border-color:var(--maincolor);
    --btn-text-color:#fff;
}
/*形*/
.btn_max_round{
    border-radius: 3em;
}
.btn_min_round{
	border-radius:0.5em;
}
/*サイズ*/
.btn_small{
    font-size: 80%;
    padding: 0.5em 1.5em;
}
.btn_big{
    font-size: 115%;
    padding: 0.5em 5em;
}

/*リストの基本形*/
/*list_boxと任意のリスト名クラスを付与し、gapと横列数を指定*/

.list_box{
    display: flex;
    width: 80%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap:var(--gap);
    flex-wrap: wrap;

    --gap:1em;
    --listitem-length:2;
}
.list_box > li{
    width: calc((100% - var(--gap) * calc(var(--listitem-length) - 1)) / var(--listitem-length));
}
.list_box.slideup li{
    opacity: 0;
}
.list_box.animation.slideup li{
    animation: slide-up 1.1s forwards;
}


/*点つきリスト*/
.dot-list{
	padding:0 1em;
}
.dot-list,
.dot-list li,
.point_list_box ul,
.point_list_box li{
	list-style:disc;
}
.dot-list li{
	margin-bottom: 0.5em;
}

/*マップ埋め込み用*/

.gmap,.gcal{
    width: 100%;
    aspect-ratio: 16/9;
    margin: 4em 0 2em;
}
.gmap iframe,.gcal iframe{
    width: 100%;
    height: 100%;
}

/*----------トップページ----------*/

.w980{
    width: 90%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}
.flex{
    display: flex;
    justify-content: center;
    gap:3em;
}

/*ファーストビュー*/

#topimg{
    display: flex;
    height: calc(100dvh - var(--header-height));
    width: 100%;
    margin-top: var(--header-height);
}
.top_copy{
    width: 100%;
    background: linear-gradient(15deg,#132b4e 31%,var(--maincolor) 100%);
    color: var(--white);
    order: -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1em;
    padding-left: 4vw;
    h1{
        font-size: 400%;
        font-weight: normal;
        letter-spacing: 0.1em;
    }
    p{
        font-size: 95%;
        line-height: 2;
    }
}
.topimg_box{
    width: 45%;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
}
.topimg_box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.15;
}


/*introduction*/
#intro{
    padding: 120px 0;
    line-height: 1.8;

    .flex{
        gap: 5em;
        align-items: center;
        .text{
            .f-min{
                font-weight: normal;
            }
        }
    }
}


/*img_btn*/
#img_btn_box{
    display: flex;
    height: 50vh;
    margin-bottom: 150px;
    
    .img_btn{
        width: 50%;
        background: #000;
        position: relative;

        &::before{
            content: '';
            background: no-repeat center/cover;
            display:block;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transition: 0.3s;
        }

        
        &.teacher::before{background-image: url(images/teacher.webp);}
        &.lesson::before{background-image: url(images/lesson.webp);}

        &:hover::before{
                opacity: 0.8;
        }
        a{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            color: var(--white);
            position: relative;
            z-index: 1;

            h2{
                font-size: 250%;
                position: relative;
                span{
                    font-size: 50%;
                    display: block;
                }
                &::after{
                    content: '';
                    display: block;
                    height: 0.3em;
                    width: 0.3em;
                    border-bottom: 3px solid ;
                    border-right: 3px solid ;
                    rotate:-45deg;
                    translate: -50% 250%;
                    transition: 0.3s;
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                }
    
            }

        }
    
    }
}


/*挨拶ゾーン*/

.aisatsu_text_box{
    width: 60%;
    margin: 0 auto;
    background: var(--basecolor);
    padding: 100px;
    position: relative;
    top: -10vh;
    p{
        line-height: 2.3;
    }
    .name{
        text-align: right;
        font-size: 200%;
    }
}

/*スタジオ紹介*/
.studio_info{
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
    dt,dd{
        border-bottom: 1px solid #ddd;
        padding: 1em 0 1em 0.5em;
    }
    dt{
        width: 25%;
        font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
        font-weight: bold;
    }
    dd{
        width: 75%;
    }
}

/*問い合せ*/
#contact{
    padding: 100px;
    .flex{
        margin-top: 5em;
        gap: 2em;
        justify-content: center;
        align-items: center;
    }
}
.contact_title{
    color: #E1E1E1;
    text-align: center;
    font-size: 1000%;
    letter-spacing:0;
    margin: 0 auto;
    line-height: 1.5;
}
.tel,.mail{
    width: 50%;
}

.tel{
    text-align: right;
    font-size: 120%;
}
.tel_number{
    font-size: 250%;
    color: var(--black);
}

.mail_contact{
    display: block;
    width: 100%;
    padding: 0.8em 1.5em;
    font-size: 25px;
    color: var(--white);
    background: var(--maincolor);
    border-radius: 3em;
    text-align: center;
    border: 2px solid var(--maincolor);
    
    &:hover{
        background: var(--white);
    }
}


.taiken_btn{
    display: block;
    position: fixed;
    right: 2%;
    bottom: 2%;
    aspect-ratio: 1/1;
    width: 180px;
}


/*サブページ*/

.sub main{
    margin-top: var(--header-height);
}

.page_title{
    position: relative;
    height: 25vh;

    img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }    
    h1{
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        text-align: center;
        color: var(--white);
        font-weight: normal;
        width: 100%;
        
        span{
            display: block;
            font-size: 16px;
        }
    }
}

.sub section:not(#contact){
    padding: 70px 0;
}

#intro_sub{
    margin-top: 100px;
    padding: 0;
    background: var(--basecolor);

    .introduction_box{
        width: 90%;
        background: var(--white);
        padding: 70px;
        margin: 0 auto;
        position: relative;
        top: -100px;
        
        filter: drop-shadow(0 0 5px rgba(0,0,0,0.2));

        h2{
            font-weight: normal;
        }
        .flex{
            gap: 120px;
            p{
                font-size: 95%;
                line-height: 2.3;
            }
        }
    }
}


.voice_list{
    --gap:3em;
    li{
        background: var(--white);
        padding: 3em;
    }
}
.prof{
    width: 100%;
    display: flex;
    gap:1.5em;
    align-items: center;
    .prof_img{
        width: 35%;
        flex-shrink: 0;
    }
    .prof_sub{
        margin-top: 1em;
        color: var(--maincolor);
    }
}
.prof_text{
    margin-top: 2em;
    line-height: 2;
    font-size: 95%;
}


#flow{
    margin-top: 50px;
}
.flow_list{
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 90%;
    margin: 0 auto;
    counter-reset: number;
    li{
        background: var(--white);
        padding: 2em 2em 3em;
        display: flex;
        gap: 2em;
        counter-increment: number;

        figure{
            width: 110px;
            flex-shrink: 0;
        }
        h3{
            color: var(--maincolor);
            font-size: 150%;
            margin-bottom: 0.5em;
            &::before{
                content: counter(number,decimal-leading-zero);
                margin-right: 0.3em;
                font-size: 180%;
            }
        }
    }
}


.faq_list{
    --gap:2.5em;
    flex-wrap: wrap;
    li{
        .faq_q{
            background: #ECF4EE;
            position: relative;
            display: flex;
            align-items: center;
            font-family: "Shippori Mincho", serif;
            &::before{
                content: 'Q';
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--white);
                background: var(--subcolor);
                height: 2.5em;
                aspect-ratio: 1/1;
                z-index: 1;
                margin-right: 1em;
                font-size: 140%;
            }
        }
        .faq_a{
            padding: 0.5em 1em 1em;
            &::before{
                content: 'A.';
                color: var(--subcolor);
                margin-right: 0.2em;
                font-size: 200%;
                font-weight: bold;
                font-family: "Shippori Mincho", serif;
            }
        }
    }
}

/*staff*/
.staff_list{
    font-size: 0.95rem;
    --gap:5em;

    .prof{
        margin-bottom: 2em;
    }
    .prof_text{
        margin: 0;
        line-height: 1.5;
        .prof_sub{
            margin-top: 0;
        }
    }
    h3{
        font-weight: normal;
        font-size: 200%;
    }

    .staff_prof_text{
        line-height: 2;
        margin-bottom: 2em;
    }
    .staff_career_box{
        background: var(--basecolor);
        padding: 3em;
        .career_title{
            color: var(--maincolor);
            margin-bottom: 1em;
            padding: 0 0.5em 0.5em;
            border-bottom: 1px solid var(--maincolor);
            font-size: 150%;
        }
        .staff_career_list{
            li{
                padding: 0.8em 0.5em;
                border-bottom: 1px solid #ddd;
                &:last-child{
                    border-bottom: none;
                }
            }
        }
    }

    .prof_sns{
        display: flex;
        gap: 0.5em;
        margin-top: 1em;
        li{
            width: 25px;
            a{
            &:hover{
                img{
                    opacity: 0.7;
                }
            }
        }}
    }
}

/*lesson*/
.lesson_btn_box{
    --listitem-length:3;
    --gap:3em;
    justify-content: center;
    margin: 120px auto;
    li{
        a{
            font-weight: bold;
            display: block;
            padding: 1.5em 1em;
            background: var(--maincolor);
            color: var(--white);
            text-align: center;
            position: relative;

            &::after{
                content: '';
                display: block;
                height: 0.5em;
                width: 0.5em;
                border-bottom: 3px solid var(--white);
                border-right: 3px solid var(--white);
                rotate:45deg;
                translate: 0 -50%;
                transition: 0.3s;
                position: absolute;
                right: 1em;
                top: 50%;
            }
            &:hover{
                opacity: 0.7;
            }
        }
    }
}

.sub section:not(#contact).lesson_box_container{
    padding-top: calc(var(--header-height) + 1em);
}
.lesson_box{
    display: flex;
    gap: 3em;
    padding: 50px;
    .lesson_info{
        width: calc(100% - 40% - 3em);

        .lesson_num{
            font-size: 90%;
            color: var(--maincolor);
            margin-bottom: 0;
        }
        .lesson_title{
            margin-bottom: 0.3em;
            font-weight: normal;
            font-size: 230%;
        }
        p{
            line-height: 2;
            font-size: 95%;
            margin-bottom: 2em;
        }
        .lesson_table{
            display: flex;
            gap:1em 2px;
            width: 100%;
            flex-wrap: wrap;
            dt,dd{
                padding: 1em;
                font-size: 110%;
                display: flex;
                align-items: center;
            }
            dt{
                background: var(--subcolor);
                color: var(--white);
                font-weight: bold;
                flex-shrink: 0;
            }
            dd{
                background: var(--white);
                width: calc(100% - 2px - 4em);
            }
        }
        .trial_need_title{
            color: var(--subcolor);
            margin: 2em 0 0.5em;
            padding-bottom: 0.5em;
            border-bottom: 1px solid var(--subcolor);
            font-weight: bold;
            padding-left: 1em;
        }
        .trial_need{
            margin: 0;
            padding-left: 1em;
        }
    }
    .lesson_img{
        width: 40%;
        flex-shrink: 0;
    }
}


/*お問い合わせページ*/

#tel_box{
    margin-top: 120px;
    .flex{
        width: 80%;
        margin: 0 auto;
        border-top: 1px solid var(--maincolor);
        border-bottom: 1px solid var(--maincolor);
        padding: 1em 0 1.5em;
        align-items: center;
        >.f-min{line-height: 2;}
        .tel_number{
            margin-top: 0;
        }
    }
}

#form_box{
    width: 80%;
    max-width: 980px;
    margin: 50px auto;

    #form{

        tr{
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5em;
            align-items: center;
            border-bottom: 1px solid var(--basecolor);
            padding: 2em 0;

            font-size: 110%;
            th{
                width: 22%;
                font-family: "Shippori Mincho", serif;
                text-align: left;
                display: flex;
                gap: 0.5em;
                align-items: center;

                &::after{
                    content: '必須';
                    color: #d00;
                    display: block;
                    width: fit-content;
                    padding: 0.1em 0.5em;
                    border:1px solid #d00;
                    border-radius: 0.3em;
                    font-size: 75%;
                    font-weight: normal;
                }
            }
            td{
                width: 75%;
            }
        }
        input[type="text"],textarea{
            width: 100%;
            background: var(--basecolor);
            border: none;
            padding: 0.8em;
            font-size: 90%;
            border-radius: 0.2em;
        }
    }
    .linkbtn{
        margin: 3em auto 0;
        align-items: center;
        input[type="submit"]{
            border: none;
            background: transparent;
            color: var(--white);
            font-size: 110%;
            transition: 0.3s;
        }
        &:hover input[type="submit"]{
            color: var(--maincolor);
        }
    }
    .underline{
        display: inline;
    }
}


/*プラポリ*/

#privacy{
    margin: 120px auto;
}
.pp_title{
    color: var(--maincolor);
    font-size: 150%;
    font-family: "Shippori Mincho", serif;
    margin: 2em 0 0.5em;
}
address{
    font-style: normal;
}


/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　タブレット用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width:1024px) {
    
  

    /*フッター*/
    .copy{
        padding: 1.5em;
    }


    /*見出し*/


    /*メインビュー*/
    

    /*リスト設定*/
    .list_box{
        flex-wrap: wrap;
        --listitem-length:2;
        --gap:2.5em;
    }

  /*ヘッダー*/

  header{
    align-items: center;
  }
  .header_copy{
    padding: 1em 2em;
  }
  header h1{
    width: fit-content;
  }
  header h1 a{
    margin-left: 1em;
    padding: 0 0 0.3em;
  }

    #menu{
        position: fixed;
        bottom: -100vh;
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background: rgba(55,55,55,0.95);
        transition: 0.4s;
        overflow-y: scroll;
        padding: 2em;
        flex-direction: column;
        align-items:center;
        justify-content: flex-start;
    }
    #menu.show{
        bottom: 0;
    }
    #menu > li{
        width: fit-content;
        height: auto;
        padding: 0.5em;
        text-align: left;
        flex-direction: column;

        a{
            color: var(--white);
            font-size: 110%;
            &.contact_btn{
                background: var(--maincolor);
                padding: 1.5em 4em;
            }
        }
    }

    #menu a{
        padding: 0.5em 1.5em;
    }

    /*ハンバーガーボタン*/
    .menubtn{
        margin-right: 2em;
        width: 35px;
        height: 40px;
        text-align: center;
        z-index: 2;
        display: block;
        cursor: pointer;
    }
    .menubtn>div{
        height: 100%;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .menu_btn_item{
        position: relative;
        height: 2px;
        width: 80%;
        border: none;
        background: var(--maincolor);
        transition: 0.3s;
    }
    .menu_btn_item::before,
    .menu_btn_item::after{
        content: '';
        display: block;
        position: absolute;
        background: var(--maincolor);
        height: 100%;
        width: 100%;
        left: 50%;
        translate: -50%;
        transition: all 0.3s;
    }
    .menu_btn_item::before{
        top: -7px;
    }
    .menu_btn_item::after{
        top: 7px;
    }
    .show .menu_btn_item{
        background: transparent;
    }
    .show .menu_btn_item::before{
        top: 0;
        rotate: 35deg;
    }
    .show .menu_btn_item::after{
        top: 0;
        rotate: -35deg;
    }


/*オリジナルコンテンツ*/
#intro{
.flex{
    .text{
        width: 60%;
    }
    h2{
        margin-bottom: 0.5em;
    }
    p{
        font-size: 95%;
    }
}
}

#img_btn_box{
    height: 70vh;
}

.aisatsu_text_box{
    width: 100%;
    padding: 5em;
    position: static;
    font-size: 95%;
}

.gmap{
    max-width: 90%;
    margin: 3em auto;
}
.gcal{
    margin: 1em auto;
    aspect-ratio: 3/4;
}


#contact{
    padding: 60px 100px 100px;
    .flex{
        flex-direction: column;
        text-align: center;
        margin-top: 2rem;
    }
    .tel,.mail{
        width: 80%;
        text-align: center;
    }
}


/*about*/
#intro_sub{
    .introduction_box{
        .flex{
            gap:50px;
        }
    }
}
#taiken_box{
    width: 80%;
    margin: 0 auto;
}
.voice_list{
    li{
        padding: 2em;
    }
}



/*staff*/
.staff_list{
    --gap:80px;
    .prof,.staff_prof_text{
        padding: 0 1em;
    }
    .staff_career_box{
        padding: 2em;
    }
}


    /*lesson*/
    .lesson_btn_box{
        --listitem-length:3;
    }

    /*contact*/
    #form_box{
        #form{
            tr{
                th{
                    width: 30%;
                }
                td{
                    width: 70%;
                }
            }
        }
    }

    #privacy{
        margin: 30px auto;
    }


}

/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
	▼　スマホ用css　▼
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/

@media (max-width: 600px) {

    .taiken_btn,.header_copy{display: none;}
    
    .pc{display: none;}
    .sp{display: block;}
    
    /*全体*/
    body{font-size: 0.95rem;}
    main > section{padding: 1em;}
    .sub section:not(#contact){
        padding: 30px 0;
    }
    .section_title{
        margin: 1em auto 0.7em;
    }

    
    .list_box{
        width: 100%;
        --gap:1.5em;
    }
    .w980{
        max-width: 90%;
    }


    header{
        flex-wrap: nowrap;
        gap:3em;
        padding: 0 1em;
        h1{
            a{
                margin-left: 0;
                width: 100%;
                img{
                    width: 250px;
                }
            }
        }
        .menubtn{
            margin-right: 0;
        }
    }


    #topimg{
        flex-direction: column;
        height: 100vh;
        margin-top: 0;

        .topimg_box{
            width: 100%;
            height: 75vh;
        }
        .top_copy{
            width: 100%;
            order: 1;
            padding: 2em 1em;
            gap: 0.3em;
            height: 25vh;

            h1{
                font-size: 34px;
            }
            p{
                line-height: 1.5;
            }
        }
    }

    #intro{
        padding: 50px 0;

        .flex{
            flex-direction: column;
            gap:3em;

            figure,img{
                width: 100%;
            }
            .text{
                width: 100%;
                p{
                    font-size: 110%;
                }
            }
        }
    }

    #img_btn_box{
        flex-direction: column;
        padding: 0;
        height: 80vh;
        margin-bottom: 50px;

        .img_btn{
            width: 100%;
            height: 50%;

            &.teacher::before{
                background-position: center top;
            }
            h2{
                margin-bottom: 0;
                letter-spacing: 0;
            }
        }
    }

    #aisatsu{
        padding: 1.5em;

        .aisatsu_text_box{
            padding: 2em;

            p:not(.name){
                margin: 0 1em;
                line-height: 1.8;
                font-size: 1rem;
            }
        }
    }


    #studio{
        padding: 0;

        .flex{
            flex-direction: column;

            figure{
                order: -1;
            }
            .studio_info{
                width: 100%;
                font-size: 115%;
                dt{
                    border-bottom: none;
                    width: 100%;
                    padding: 1em 0 0.3em;
                }
                dd{
                    width: 100%;
                    padding: 0 0.5em 1em;
                }
            }
        }

        .gmap{
            max-width: 100%;
            aspect-ratio: 4/3;
        }
    }

    #contact{
        padding: 1em 1em 50px;
        >p.big{font-size: 130%;}
        >p:not(.big){
            font-size: 80%;
        }
        h2{
            font-size: 400%;
        }
        .tel,.mail{
            width: 100%;
        }
        .tel{
            font-size: 90%;
        }
        .mail{
            .mail_contact{
                font-size: 16px;
            }
        }
    }


    footer{
        .fot_flex{
            padding: 2em 0;
            flex-direction: column;
            align-items: flex-start;
            gap: 3em;

            .fot_info,.fot_menu{
                width: 100%;
            }

            .sns{
                a{
                    width: 30px;
                }
            }
        }
        .copy{
            padding: 0.5em;
            font-size: 14px;
        }
    }

    /*サブページ用*/

    /*about*/
    .sub section#intro_sub{
        padding: 2em 1em;
        .introduction_box{
            position: static;
            width: 100%;
            padding: 2em;
            h2{
                font-size: 170%;
                margin: 1em 0;
            }
            .flex{
                flex-direction: column;
                gap:1em;
                p{
                    line-height: 1.8;
                    font-size: 100%;
                }
            }
        }
    }
    #taiken_box{
        width: 90%;
    }
    .sub section#voice{
        padding: 0 1em 3em;
    }
    .voice_list{
        --listitem-length:1;
        li{
            padding: 2em;
        }
    }
    .prof{
        flex-direction: column;
        h3{
            font-size: 130%;
        }
        .prof_sub{
            margin-top: 0;
        }
        .prof_text{
            margin-top: 0;
            width: 100%;
            align-self: flex-start;
        }
    }

    .flow_list{
        li{
            flex-direction: column;
            gap: 0;
            figure{
                align-self: center;
            }
        }
    }

    .faq_list{
        max-width: 85%;
        --listitem-length:1;
    }


    /*staff*/

    .staff_list{
        --listitem-length:1;
        --gap:5em;
        max-width: 90%;
        .prof{
            flex-direction: row;
        }

        .prof_text{
            font-size: 130%;
            align-self: center;
        }

        .staff_career_box{
            .career_title{
                margin-bottom: 0.5em;
            }
        }
    }

    /*lesson*/

    .lesson_btn_box{
        --listitem-length:1;
        --gap:0.5em;
        margin: 50px auto 0;
        li{
            a{
                padding: 1em;
            }
        }
    }

    .lesson_box{
        flex-direction: column;
        padding: 2em;

        .lesson_info,.lesson_img{
            width: 100%;
        }
        .lesson_img{order: 1;}
        .lesson_info{
            .lesson_table{
                dt,dd{
                    font-size: 90%;
                }
            }
        }
    }


    /*contact*/
    #tel_box{
        margin-top: 50px;
        .flex{
            flex-direction: column;
            gap: 0.5em;
            .tel{width: 100%;text-align: center;}
            .tel_number{
                font-size: 200%;
            }
        }
    }

    #form_box{
        #form{
            tr{
                flex-direction: column;
                gap: 0.5em;
                align-items: flex-start;
                padding: 1em 0;
                th,td{
                    width: 100%;
                }
            }
        }
    }

    
}


@media(max-width:450px){

}


/*●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
    ▲　スマホ用css　▲
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●*/