/***************************************
共通事項
****************************************/
/* 万が一font_size16pxの入力を忘れてもいいよう反映されるための保険*/
html {
    font-size: 100%; 
}
@media screen and (max-width: 768px){
body {
    overflow-x: hidden;
}
}
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    color: #393836;
}

img {
    max-width: 100%;
    height: auto;
}

.wrapper {
    width: 90%;
    max-width: 1340px;
    margin: 0 auto;
}

.wrapper_min {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
}

.wrapper_small {
    width: 90%;
    max-width: 940px;
    margin: 0 auto;
}


/* section_title
EVENT ABOUT TEACHER COURSE VOICE ACCESS CONTACTは全て大文字**/
.section_title:lang(en) {
    font-weight: 700;  
    line-height: 1.5; 
    font-size: 96px;
    font-family: "Lato", sans-serif;
    text-transform: uppercase; 
}


/* タブレット */
@media screen and (max-width: 768px){
    .section_title:lang(en) {
        font-size: 70px;
    }
}
/* スマホ */
@media screen and (max-width: 440px){
    .section_title:lang(en) {
        font-size: 36px;
    }
}
/* COURSEの（Lite、Standar、Premium、private）,
section_*/
.course_name_lite:lang(en),
.course_name_standard:lang(en),
.course_name_premium:lang(en),
.course_name_private:lang(en) {
    font-family: "Lato", sans-serif;
    text-transform: capitalize;
}




/***************************************
ここからheader
****************************************/
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 41px;
    margin-bottom: 50px;
}
.header_logo {
    max-width: 237px;
    flex-shrink: 0; 
}
.header_logo a {
    display: block;
}

.gnav_list {
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    font-weight: 400;
    font-size: 16px;
}
.gnav_list li:nth-child(7) a {
    position: relative;
    display: inline-block;
}

.gnav_list li:nth-child(7) a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px; /* 文字のすぐ下に線を引く */
    width: 100%;
    height: 1px;
    background-color: #393836; /* 線の色（画像の黒系） */
}

.top {
    display: none;
}
.pc_none {
    display: none;
}

/* header装飾 */

.gnav_content {
    position: relative;
}


.gnav_access {
    position: relative;
}
.gnav_access::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 100px;
    top: 30px;
    right:35px;
    z-index: -1;
    background: url("../image/headerbule.png") no-repeat center / contain;
}

.gnav_access::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 100px;
    top: -30px;
    right: -150px;
    z-index: -1;
    background: url("../image/yerrowheader.png") no-repeat center / contain;
}


/* spナビ */
.sp_navi {
    display: none;
}

/* タブレット */
/* ハンバーガメニューから */
@media screen and (max-width: 768px){
    
    .sp_navi {
        display: block;
        width: 30px;
        height: 30px;
        z-index: 1100;
    }
    .gnav {
        background-color: #F6F3E5;
        position: fixed;
        width: 100%;
        height: 100vh;
        padding-top: 50px;
        top: 0;
        right: -100%; 
        transition-duration: 0.3s;
        z-index: 1000;
    }

    .active .gnav {
        right: 0;   
    }
    .gnav_list {
        flex-direction: column;
        align-items: flex-start;
        margin-left: 40px;
        color: #B68C21;
    }
/* ここまでハンバーガーメニュー */

    .gnav_list li:nth-child(7){
        display: none;
    }
    .sp_naviline,
    .sp_naviline::before,
    .sp_naviline::after  {
        width: 35px;
        height: 1px;
        margin: auto;
        background-color: #393836;
        display: block;
    }
    .sp_naviline::before {
        content: "";
        transform: translateY(-10px);
    }
    .sp_naviline::after {
        content: "";
        transform: translateY(10px);
    }
    .active .sp_naviline {
        background-color: transparent;   /* 真ん中の線を消す */
    }
    .active .sp_naviline::before {
        transform: rotate(45deg) ;
    }
        .active .sp_naviline::after {
        transform: rotate(-45deg) translateY(-2px);
        
    }
    .pc_none {
    display: block;
    }
    .top {
        display: block;
    }
    .gnav_list li:nth-child(7){
        margin-top: 100px;
    }
    .gnav_content {
    display: none;
    }

    /* ここまでがハンバーガメニュー */
    .header_logo {
        max-width: 198px;
    }


    /* 装飾 */
   /* gnav 内の装飾は pointer だけ残しつつ位置を固定する */
        .gnav_access {
      position: static; /* ← メニューに追従しない */
        }
        .gnav_access::before,
        .gnav_access::after {
            display: none;
        }
        
        body.active .sp_navi::before,
        body.active .sp_navi::after {
            display: none !important;
        }

        .sp_navi {
            position: relative;
        }
        .sp_navi::before {
            content: "";
            position: absolute;
            width: 80px;
            height: 80px;
            top: 10px;
            right: 90px;
            z-index: -1;
            background: url("../image/headerbule.png") no-repeat center / contain;
        }
        .sp_navi::after {
            content: "";
            position: absolute;
            width: 100px;
            height: 100px;
            top: -40px;
            right: -30px;
            z-index: -1;
            background: url("../image/yerrowheader.png") no-repeat center / contain;
        }
    }

/* スマホ */
@media screen and (max-width: 440px){

    .header {
        margin-bottom: 80px;
    }
    
    .header_logo {
        max-width: 145px;
    }
    .gnav_list li:nth-child(7),
    .gnav_list li:nth-child(8) {
        margin-top: 30px;
        max-width: 200px;
        font-size: 13px;
    }

    /* 装飾 */
    .sp_navi::before {
        z-index: 50;
        width: 60px;
        height: 60px;
        top: 20px;
        right: 60px;
    }
    .sp_navi::after {
        width: 85px;
        height: 85px;
        top: -20px;
        right: -28px;
    }
}







/***************************************
ここからsection_traial
****************************************/
.section_trial {
    margin-bottom: 110px;
}

/* ベージュの大きな箱 */
.trial_box {
    background-color: #F6F3E5;
    position: relative;
    align-items: center;
    display: flex;
    max-width: 900px;
    padding: 60px 40px;
    height: auto;
    margin: 0 auto;
    gap: 35px;
    border: 1px solid #88191B;
}
/* 上にのる白いカード */
.trial_card {
    position: absolute;
    top: -80px;          /* 上にはみ出させる */
    left: 72px;          /* 左から少し内側 */
    background-color: #fff;
    padding: 17px 22px 19px 23px;
    border: 1px solid #393836;
}
.trial_label {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.5;
}
.trial_title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.5;
    color: #88191B;
}

/* 左側テキスト部分 */
.trial_content {
    margin-top: 24px;   /* カード分、少し下げる */
    padding: 28px 35px 24px 80px; 
}
.trial_text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8;
    color: #393836;
    margin-bottom: 24px;  
}      


/* 写真側 */
.trial_photo {
    max-width: 400px; 
    height: auto;
}

.trial_photo img {
    width: 100%;
    height: auto;
    display: block;
}


/* タブレット */
@media screen and (max-width: 768px){
    .trial_card {
        top: -40px;
        left: 20px;
        padding: 10px 14px 10px 15px;
    }
    .trial_label {
        font-size: 32px;
    }
    .trial_title {
        font-size: 16px;
    }
    .trial_text {
        font-size: 16px;
    }
    .trial_content {
        padding: 0 ;
    }
    .trial_content {
        margin-top: 10px;
    }
    .trial_photo {
    max-width: 300px; 
    height: auto;
    }
}
/* スマホ */
@media screen and (max-width: 440px){
    .trial_box {
        display: flex;
        flex-direction: column;
    }
    .trial_card {
        left: 45px; 
    }
    .trial_label {
        font-size: 26px;
    }
    .trial_title {
        font-size: 14px;
    }

    .trial_text {
        font-size: 14px;
    }
    .trial_content {
        padding-left: 0;
    }
}






/***************************************
ここからCONTACT ボタン以外
****************************************/

.section_contact {
    padding-top: 30px;
    text-align: center;
    margin-top: 21px;
    margin-bottom: 129px;
    border-top: 1px solid #393836;
    border-bottom:1px solid #393836;
}
.section_form {
    font-size: 14px;
    color: #88191B;
    margin-bottom: 9px;
}
.section_text {
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5;
}

/***************************************
ここからACCESS
****************************************/
.section_access  {
    margin-bottom: 139px;
}
.section_access .access {
    font-size: 16px;
    color: #B68C21;
    margin-bottom: 24px;
}

/* ここから地図と住所を重ねる*/
.access_inner {
    display: flex;
    align-items: flex-start;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}
/* 地図部分 */
.access_map {
    flex: 0 0 50%; /* 地図：全体の50% */
    position: relative;
    z-index: 2; /*前面に出す */
    margin-top: 60px;/* ← 少し下げて、カードより下段に配置 */
}
.iframe {
    width: 100%;
    max-width: 519px;
}
.access_map iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横の比率 / 縦の比率*/
    border: 0;
    max-height: 400px; /* 高さを制限して小さく見せる */
}
/* アドレス・住所の部分 */
.access_card {
    position: relative;
    flex: 0 0 50%;
    /* padding:  40px 80px 40px 120px; */
    padding:  5% 8% 4% 12%;
    margin-left: -50px; /* ← ここがポイント：地図側に被せる */
    z-index: 1; /*背景側 */
}
.access_card::before {
    content: "";
    position: absolute;
    background-color: #F6F3E5;
    inset: -50px -80px -100px 0;/* ← cilp pathを使うため、必ず必要 */
    clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 80%);
    z-index: -1;
}
.access_photo {
    max-width: 270px;
    margin-bottom: 20px;
}
.access_text {
    font-size: 16px;
    line-height: 1.6;
}
.access_text p {
    white-space: nowrap;
}
/* ① 郵便番号＋住所（1行目） */
.access_text p:nth-child(1) {
    margin-bottom: 3px;  /* 住所ブロック内の行間 */
}

/* ② 最寄り駅の行（オレンジ寄りに・少し余白） */
.access_text p:nth-child(2) {
    color: #B68C21;
    margin-bottom: 20px;
}

/* ③ TELの行（少し上に余白をあける） */
.access_text p:nth-child(3) {
    margin-bottom: 3px;
}

/* ④ 受付時間の行（オレンジ寄り） */
.access_text p:nth-child(4) {
    color: #B68C21;
}

@media screen and (max-width: 768px){
    .access_text {
        font-size: 16px;
    }
}

/* スマホ */
@media screen and (max-width: 440px){
    .access_inner {
        display: flex;
        flex-direction: column-reverse;
        margin-top: 70px;
        font-size: 14px;
    }
    .access_map {
        margin-top: -2px;
    }
    .access_photo,
    .access_text {
        margin-left: 10px;
        font-size: 14px;
    }

}
/***************************************
ここからfooter
****************************************/
.footer {
    background-color: #F6F3E5;
    color: #B68C21;
    font-size: 16px;
    font-weight: 400;
    padding-top: 45px;
    padding-bottom: 40px;
}
/* footer_logo */
.footer_logo {
    max-width: 187px;
    margin-bottom: 42px;
}
.footer_logo a {
    display: block;
}

/* footer_flex */
.footer_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 72px;    
}

.footer_contact {
    margin-top: -100px;
}
.footer_contact p {
    margin-bottom: 15px;
}
.footer_menu_list li {
    margin-bottom: 15px;
}


/* footer_info */
.footer_info {
    border-top: 1px solid #D2C0A1;
    display: flex;
    align-items: center;
    padding: 22px 0;
    gap: 78px;
}

.footer_info p {
    white-space: nowrap;             
}
.footer_copyright {
    margin-left: auto;              
}
.footer_copyright small {
    font-size: 14px;
}

/*  */

@media screen and (max-width: 768px){
    .footer_flex {
        display: flex;
        flex-wrap: wrap;          /* 折り返しOK */
        align-items: flex-start;
        gap: 24px;                /* カラム間の余白 */
        margin-bottom: 48px;
    }

    /* 左：住所ブロック（1列分使う） */
    .footer_left {
        flex: 0 0 100%;
    }

    .footer_contact {
        margin-top: 0;            /* PCの -100px を戻す */
        font-size: 14px;
    }

    /* 中：メニュー（その下に縦並び） */
    .footer_menu {
        flex: 0 0 100%;
        font-size: 14px;
    }

    .footer_menu_list li {
        margin-bottom: 10px;
    }

    /* 右：イラスト画像（下にきて右寄せ） */
    .footer_image {
        flex: 0 0 100%;
        max-width: 200px;
        margin-left: auto;        /* 右寄せ */
        margin-right: 0;
        text-align: right;
    }

    /* 下の細いバー部分（プライバシーポリシーなど） */
    .footer_info {
        gap: 24px;
        font-size: 14px;
    }
}


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

    /* フッター上側エリア（ロゴ〜イラスト） */
    .footer_area {
        position: relative;      /* イラストの absolute の基準 */
        padding-bottom: 140px;   /* 右下イラストぶんの余白を追加 */
    }

    /* 住所・メニューは縦積みでOK */
    .footer_flex {
        display: block;
        font-size: 14px;
    }

    .footer_left,
    .footer_menu {
        margin-bottom: 16px;
    }

    .footer_contact {
        font-size: 13px;
    }

    /* ★ イラストを右下に固定（テキストには重ねない） */
    .footer_image {
        position: absolute;
        right: 16px;
        bottom: 160px;
        max-width: 160px;
        margin: 0;
        text-align: right;
    }

    /* 下の細長いバー（プライバシーなど）は通常のブロックとして扱う */
    .footer_info {
        border-top: 1px solid #D2C0A1;  /* PCと同じ線でOK */
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
        margin-top: -150px;                /* 少しだけ余白 */
    }

    .footer_info p {
        white-space: normal;            /* 折り返しOK */
    }

    /* コピーライトは absolute にしないで通常どおり左寄せ */
    .footer_copyright {
        margin-left: 0;
    }
}





/***************************************
ここからボタンの各セクション
****************************************/
/* EVENTの View more 配置 */
.event_more{
    margin-top: 32px;
    text-align: right;
    }

    /* ボタン本体（Speakingと同じ設計） */
.event_more_button{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 70px 14px 24px; /* 右は矢印丸ぶん広め */
    border-radius: 999px;
    border: 1px solid #393836;
    background:#fff;
    color:#393836;
    font-size:16px;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    transition: all .3s ease;
}

/* 右端の矢印丸 */
.event_more_button::after{
    content:"→";
    position:absolute;
    right:14px;
    display:inline-grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#476C8B; /* 通常は青丸＋白矢印 */
    color:#fff;
    font-size:14px;
    transition: all .3s ease;
}

/* hover：ボタンは青地に反転、矢印丸は白地に反転＋少し右へ */
.event_more_button:hover{
    background:#476C8B;
    color:#fff;
    border-color:#476C8B;
}
.event_more_button:hover::after{
    background:#fff;
    color:#476C8B;
    transform: translateX(3px);
}
/* タブレット */
@media screen and (max-width: 768px){
    .event_more {
        display: flex;
        justify-content: center;
    }
}

/* features_button */
.features_button {
    margin-top: 42px;
    text-align: center;
}

.about_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 80px 14px 32px; 
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;     
    color: #393836;
    border: 1px solid #393836;     
    text-decoration: none;
    line-height: 1.4;
    transition: all 0.3s ease;
}

.about_button::after {
    content: "→";
    position: absolute;
    right: 24px;                   
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #B68C21;     
    color: #fff;                
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 1px solid #FFFFFF;     
    transition: all 0.3s ease;
}

.about_button:hover {
    background-color: #B68C21;
    color: #fff;
}
.about_button:hover::after {
    background-color: #FFFFFF;
    color: #B68C21;
    border-color: #B68C21;
    }
/* EVENTのボタン */
.event_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;              
    height: 40px;
    border-radius: 999px;
    border: 1px solid #393836;
    color: #393836;
    background: transparent;
    font-size: 16px;          
}

/* event 右端の縦ボタン（wrapper外） */
.side_button {
    position: fixed;
    top: 50%;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;      /* もともとの赤背景 */
    color: #fff;                      /* もともとの白文字 */
    border: 1px solid transparent;    /* ← 透明のボーダーを最初から用意 */
    border-radius: 8px 0 0 8px;
    transition: all 0.3s;
}

.side_button.is-active {
    opacity:1;
    pointer-events:auto; 

}
.side_link {
    writing-mode: vertical-rl;
    text-align: center;
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.05em;
    padding: 20px;
    border-radius: 20px 0 0 20px;
    transition: all 0.3s;
}
.side_link:hover {
    border: 1px solid #88191B; 
}
/* ▼ スマホ版：下に横並びで追従させる */
/* ▼ スマホ版：下に追従＋コンテンツ幅に合わせて2つ並べる */
/* ▼ スマホ（〜767px）：ボタンは縦並びのまま追従 */
/* ▼ スマホ（〜767px）：ボタンは縦に2つ並んだまま右下に追従 */
/* ▼ スマホ（〜767px）：右下に縦並びで追従させる */





.side_contact {
    background-color: #88191B;
}
.side_trial {
    background-color: #88191B;
}
/* --- hover時 --- */
.side_contact:hover {
    background-color: #F6F3E5;
    color: #88191B;
}
.side_trial:hover {
    background-color: #F6F3E5;
    color: #88191B;
}






/* COURSEごとのボタン */
/* ライトコース */
.course_button_blue {
    display: block;
    transition: all 0.3s ease;
    border-radius: 50px;
}
.course_button_blue:hover {
    background-color: #E9F3F8;
    border-radius: 50px;
}

/* スタンダードコース */
.course_button_yellow {
    display: block;
    transition: all 0.3s ease;
    border-radius: 50px;
}
.course_button_yellow:hover {
    background-color: #FFF3D4;
    border-radius: 50px;
}

/* プレミアCOURSE */
.course_button_green {
    display: block;
    transition: all 0.3s ease;
    border-radius: 50px;
}
.course_button_green:hover {
    background-color: #F4F9EC;
    border-radius: 50px;
}

.course_button_red {
    display: block;
    transition: all 0.3s ease;
    border-radius: 50px;
}
.course_button_red:hover {
    background-color: #FAF1F1;
    border-radius: 50px;
}




/* What is a Speaking Class?のview moreボタン */
.speaking_button {
    position: absolute;
    top: 120px;
    right: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border-radius: 999px; 
    border: 1px solid #393836; 
    padding: 16px 90px 16px 45px;
}
/* 矢印の青丸 */
.speaking_button::after {
    content: "→";
    position: absolute;  
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #476C8B;
    color: #fff;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* --- ホバー後--- */
.speaking_button:hover {
    background-color: #476C8B;
    color: #fff;
    border-color: #476C8B;
}

/* 矢印を白丸にして反転させる */
.speaking_button:hover::after {
    background-color: #fff;
    color: #476C8B;
    transform: translateX(3px); /* 少し右に動くアニメーション */
}

/* 崩れ防止 */
@media screen and (max-width: 1060px) {
    .speaking_button {
        right: 40px;
        top: 90px;
    }
    .speaking_button {
        margin-right: -60px;
    }
}

/* スマホ */
@media screen and (max-width: 440px){
    .speaking_button {
        right: 90px;
        top: 0;
    }
}




/* View more ボタン */
.voice_more {
    margin-top: 51px;
    text-align: right;
}
.voice_button {
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 999px;
    border: 1px solid #393836;
    padding: 13px 70px 14px 29px;
    color: #393836;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.voice_button::after {
    content: "→";
    position: absolute;
    color: #fff;
    background-color: #809947;
    border-radius: 50%;
    right: 15px;
    width: 20px;
    height: 20px;
    text-align: center;
}
/* ホバー時
.voice_button:hover{
     */
.voice_button:hover {
  background-color: #809947;   /* 背景が緑 */
  color: #fff;                 /* 文字は白に */
  border-color: #809947;       /* 枠線も緑 */
}
.voice_button:hover::after {
  background-color: #fff;      /* 矢印の背景が白 */
  color: #809947;              /* 矢印が緑に */
  transform: translateX(3px);  /* 少し右にスライド */
}





/* Booknowボタン */
.trial_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    padding: 13px 74px 14px 29px;
    color: #393836;
    border: 1px solid #393836;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    transition: all 0.3s ease;
}
.trial_button::after {
    content: "→";
    position: absolute;
    color: #FFFFFF;
    background-color: #88191B;
    border-radius: 50%;
    right: 15px;
    width: 20px;
    height: 20px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ここからホバー */
.trial_button:hover {
    background-color: #88191B; 
    color: #fff; 
    border: 1px solid #88191B;
}
.trial_button:hover::after {
    border: 1px solid #88191B;
    color: #88191B;
    background-color: #fff;
}

@media screen and (max-width: 440px){
    .trial_button {
        left: 40px;
    }
}






/***************************************
ここからcontactボタン 
****************************************/

.contact_button {
    display: flex;
    justify-content: center;
    gap: 72px;
    margin: 65px 0 75px 0;
}

/* 共通（PC基準） */
.section_button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 37px 88px 35px 75px;
    border-radius: 60px;
    font-size: 20px;
    font-weight: 500;
    background-color: #88191B;
    color: #FFFFFF;
    transition: all 0.3s ease;
    white-space: nowrap;   /* 2行にさせない */
    width: 400px;          /* 長さをそろえる */
}

/* 矢印丸 */
.section_button::after {
    content: "→";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

/* hover */
.section_button:hover {
    background-color: #F6F3E5;
    color: #88191B;
    border: 1px solid #88191B;
}
.section_button:hover::after {
    border: 1px solid #88191B;
    color: #88191B;
}

/* タブレット */
@media screen and (max-width: 768px){
    .section_title {
        font-size: 70px;
    }
    .section_form,
    .section_text {
        font-size: 16px;
    }

    .section_button {
        font-size: 16px;
        padding: 25px 72px 25px 40px;
        width: 320px;      /* ちょっと小さくするならお好みで */
    }
    .section_button::after {
        right: 14px;
    } 
}

/* スマホ */
@media screen and (max-width: 440px){
    .section_title {
        font-size: 20px;
    }
    .section_form,
    .section_text {
        font-size: 14px;
    }

    .contact_button {
        flex-direction: column;
        gap: 25px;
    }

    .section_button {
        font-size: 12px;
        padding: 16px 48px 16px 32px;
        width: 250px;          /* 画面に合わせて少し短め */
        max-width: 320px;
        margin: 0 auto;
    }

    .section_button::after {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
}

/* 下層用共通 */
/***************************************
ベースに入れてもらう  MV用
****************************************/



.breadcrumb_list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 13px;
    color: #393836;
    font-size: clamp(12px, 1.04vw, 18px);
}

.breadcrumb_item {
    display: flex;
    align-items: center;
    text-transform: uppercase;
}

/* ホーム以外の項目に「-」を追加 */
.breadcrumb_item:not(:first-child)::before {
    content: "-";
    margin-right: 12px;
    color: #393836;
}

.breadcrumb_item a {
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.breadcrumb_item a:hover {
    color: #333;
    text-decoration: underline;
}

/* 現在のページ（リンクなし）*/
.breadcrumb_item.current {
    color: #333;
    font-weight: 500;
}

/* 下層ページタイトル */
.sub-mv__title {
    text-align: center;
}

.sub-mv__img {
    width: 70%;
    display: flex;
    gap: 14px;
    margin-top: 9px;
    align-items: center;

}

.sub-mv__img img {
    height: auto;
    object-fit: cover;
    display: block;
}

.sub-mv__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 190px;
    margin-bottom: 64px;
}

.sub-mv_deco {
    position: relative;
}
/* voice用 */
.sub-mv_deco::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -150px;
    z-index: -1;
    left: -50px;
    background: url("../voice/image/mvdecogreen.png") no-repeat center / contain;
}

.sub-mv_deco::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -100px;
    z-index: -1;
    left: 10%;
    background: url("../voice/image/mvdecopink.png") no-repeat center / contain;
}


/* course用 */
.sub-mv_deco_course {
    position: relative;
}
.sub-mv_deco_course::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -150px;
    z-index: -1;
    left: -50px;
    background: url("../course/image/mvdecogreen.png") no-repeat center / contain;
}
.sub-mv_deco_course::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -100px;
    z-index: -1;
    left: 10%;
    background: url("../voice/image/mvdecopink.png") no-repeat center / contain;
}
/* about */
.sub-mv_deco_about {
    position: relative;
}
.sub-mv_deco_about::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -150px;
    z-index: -1;
    left: -50px;
    background: url("../about/img/mvdecogreen.png") no-repeat center / contain;
}
.sub-mv_deco_about::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 100px;
    top: -100px;
    z-index: -1;
    left: 10%;
    background: url("../about/img/mvdecopink.png") no-repeat center / contain;
}
/* タブレット */
@media screen and (max-width: 768px) {
    body {
    overflow-x: hidden;
    }

    .sub-mv__img {
        width: 100%;}

    .sub-title__wrap {
        text-align: center;
        margin: 60px auto 0;
    }

    .sub-mv__inner {
        flex-direction: column-reverse;
        gap: 0;
        /* margin-top: 73px; */

    }


    /* 装飾 */
    /* voice */
    .sub-mv_deco::before {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -250px;
        z-index: -1;
        left: -30px;
    }

    .sub-mv_deco::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -230px;
        left: 12%;
        z-index: -1;
    }
    /* course */
    .sub-mv_deco_course::before {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -250px;
        z-index: -1;
        left: -30px;
    }

    .sub-mv_deco_course::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -230px;
        left: 12%;
        z-index: -1;
    }
    /* about */
    .sub-mv_deco_about::before {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -250px;
        z-index: -1;
        left: -30px;
}
    .sub-mv_deco_about::after {
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        top: -230px;
        left: 12%;
        z-index: -1;
    }
}

/* スマホ */
@media screen and (max-width: 440px) {

    /* 装飾 */
    /* voice */
    .sub-mv_deco::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        top: -225px;
        z-index: 1;
        left: -10px;
    }

    .sub-mv_deco::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 30px;
        top: -185px;
        left: 12%;
        z-index: -1;
    }
    /* course */
    .sub-mv_deco_course::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        top: -225px;
        z-index: 1;
        left: -10px;
    }

    .sub-mv_deco_course::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 30px;
        top: -185px;
        left: 12%;
        z-index: -1;
    }
    /* about */
    .sub-mv_deco_about::before {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        top: -225px;
        z-index: 1;
        left: -10px;
    }
    .sub-mv_deco_about::after {
        content: "";
        position: absolute;
        width: 50px;
        height: 30px;
        top: -185px;
        left: 12%;
        z-index: -1;
    }
}









/* ★ スマホ時は強制で表示させる ----------- */
/* ★ スマホ専用：下部追従ボタン --------------------------- */


/* PCでは表示しない */
.sp_fixed_cta {
    display: none;
}

/* スマホ（440px以下）だけ表示＆追従 */
/* スマホ専用：画面下に2つボタンを固定表示 */
.sp_fixed_cta {
  display: none;  /* PCでは非表示 */
}

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

    /* PC用の side_button はスマホでは消す */
    .side_button {
        display: none !important;
    }

    .sp_fixed_cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;          /* ← 横並びで「2つ分」エリアを作る */
        z-index: 9999;
    }

    .sp_cta_btn { 
        display: flex;          /* 中央寄せしやすくするため */
        align-items: center;
        justify-content: center;
        padding: 14px 60px 14px 60px;
        background-color: #88191B;
        color: #fff;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.08em;
        border-top: 1px solid #fff;
    }

    /* 2つ目との境界線だけ左に線を入れる */
    .sp_cta_btn + .sp_cta_btn {
        border-left: 1px solid #fff;
    }

    .sp_cta_btn:active {
        opacity: 0.8;
    }
}