/* --------------- レスポンシブのための設定 ここから ---------------*/

/* 固定幅が多いため、画像が親要素をはみ出さないよう全体に設定 */
img {
    max-width: 100%;
    height: auto;
}

/* 統一設定（変数・カラー・フォントなど）*/
:root {
    /* --- ② カラー（Color） --- */
    --base-color: #fdfbf7; /* 背景色 */
    --main-color: #332d2d; /* メインカラー */
    --accent-color: #e2a18c; /* アクセント（ボタンなど） */
    --text-color: #3f3a3a; /* 基本の文字色 */

    --h123-color: #332d2d; /* 見出しの色（メインと同じ） */
    --subtext-color: #3f3a3a; /* 補足テキスト */
    --ui-color: #d8d3cf; /* ホワイト要素 */

    --form-border-color: #d8d3cf; /* フォーム枠の色 */
    --border-color: var(--form-border-color); /* ボーダーカラー */
    --form-bg-color: #ffffff; /* フォーム背景 */

    /* ③ MV（メインビジュアル）半透明シート用カラー */
    --sheet-color_concept_light: rgba(250, 243, 224, 0.8);
    --sheet-color_concept_dark: rgba(148, 144, 133, 0.8);

    /* ④ 上から下へのグラデーション変数 */
    --sheet-gradient: linear-gradient(
        to bottom,
        var(--sheet-color_concept_light),
        var(--sheet-color_concept_dark)
    );

    /* --- ⑤ フォントウェイト（太さ） --- */
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;

    /* --- ⑥ ボタンの枠 --- */
    --border-button-bold_color: 3px solid #d8d3cf;
    --border-button-radius: 24px;

    /* --- ⑦ フォントサイズ（clamp = 最小値・推奨値・最大値で自動調整） --- */
    --fs-h1: clamp(36px, 5vw, 64px);
    --fs-h2: clamp(32px, 4vw, 48px);
    --fs-h3: clamp(24px, 3vw, 36px);
    --fs-h4: clamp(18px, 2vw, 24px);
    --fs-lead-text: clamp(16px, 1.6vw, 21px);
    --fs-body-bold: 16px;
    --fs-body: clamp(14px, 1.2vw, 16px);
    --fs-14: 14px;
    --fs-small: 12px;

    /* --- ⑧ フォント種類（Google Fonts） --- */
    --font-Play-en-serif: 'Playfair Display', serif;
    --font-Shippori-jp-base: 'Shippori Mincho', serif;
    --font-Montserrat-en-sanserif: 'Montserrat', sans-serif;
    --font-Noto-jp: 'Noto Sans JP', sans-serif;

    /* ⑨ テキストグラデーション（左から右） */
    --text-gradient: linear-gradient(
        to left,
        #332d2d 0%,
        #998787 30%,
        #998787 100%
    );
}

/* 
PCのみ hover 有効（769px以上）
    */
@media (min-width: 769px) {
    header:hover {
        background-color: var(--base-color);
    }
    header:hover .h-nav-list a {
        color: var(--main-color);
    }
    header:hover .logo-white {
        display: none;
    }
    header:hover .logo-black {
        display: block;
    }
}

/* タブレット・スマホ共通（768px以下）*/
@media screen and (max-width: 768px) {
    /* --- body --- */
    body {
        padding-top: 80px; /* ヘッダー固定分の余白 */
    }
    body.is-fixed {
        overflow: hidden; /* メニューが開いている時にスクロール禁止 */
    }

    /* ---  オーバーレイ（暗幕）--- */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(51, 45, 45, 0.8);
        z-index: 9000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease;
    }
    body.is-open .overlay {
        opacity: 1;
        visibility: visible;
    }
    body.is-open {
        overflow: hidden;
    }

    /* --- ヘッダー --- */
    header {
        width: 100%;
        padding: 8px 16px;
        position: fixed;
        background-color: var(--main-color); /* スマホは常にダーク背景 */
    }

    /* --- ナビゲーション（右からスライドイン） --- */
    .h-nav {
        position: fixed;
        top: 0;
        right: -40%; /* 最初は画面右に隠す */
        z-index: 9998;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40%;
        height: 100vh;
        overflow: hidden;
        background: var(--main-color);
        transition: 500ms;
    }
    .h-nav.open {
        right: 0%; /* クラスがついたら表示 */
    }

    /* --- ハンバーガーメニュー本体 --- */
    .h-hamburger {
        top: 16px;
        right: 16px;
        z-index: 9999;
        width: 48px;
        height: 48px;
        position: absolute;
    }

    /* ハンバーガーの3本線（span本体 + 疑似要素::before・::after） */
    .h-hamburger span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: var(--base-color);
        transition: 0.5s;
    }
    .h-hamburger span::before {
        content: '';
        position: absolute;
        top: -15px;
        display: block;
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: var(--base-color);
        transition: 0.5s;
    }
    .h-hamburger span::after {
        content: '';
        position: absolute;
        bottom: -15px;
        display: block;
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: var(--base-color);
        transition: 0.5s;
    }

    /*  ×（クローズ）アニメーション */
    .h-hamburger.close span {
        background: rgba(0, 0, 0, 0); /* 中央の線を透明に */
    }
    .h-hamburger.close span::before {
        top: 0;
        transform: rotate(45deg); /* 上の線を斜め45度 */
    }
    .h-hamburger.close span::after {
        bottom: 0;
        transform: rotate(-45deg); /* 下の線を逆に45度 */
    }

    /* --- ⑱ ナビリスト --- */
    .h-nav-list {
        flex-direction: column; /* 横並び→縦並びに変更 */
        gap: 32px;
    }
    .h-nav-list a {
        color: var(--base-color);
    }

    /* --- ロゴ切り替え（スマホは白ロゴ固定） --- */
    .logo-white {
        display: block;
    }
    .logo-black {
        display: none;
    }

    /* --- FV（ファーストビュー） --- */
    .fv-view {
        left: 16px;
        right: 16px;
        max-width: 300px;
        max-height: 100vh;
    }
    .fv-copy {
        font-size: 24px;
        line-height: 1.3;
        letter-spacing: 0.15em;
        margin-bottom: 16px;
    }
    .fv-catchcopy-all {
        padding: 16px;
    }
    .fv_button {
        margin-top: 24px;
    }

    /* --- NEWS --- */
    .news_message p {
        margin: 0px 16px;
        font-size: 8px;
    }

    /* --- CONCEPT --- */
    .concept_title .concept_text.is-active {
        font-size: 18px;
        line-height: 5.2;
        letter-spacing: 0.05em;
    }
    .concept_title {
        text-align: center;
        margin: 42px 0;
    }
    #concept_first,
    #concept_second,
    #concept_third {
        padding-left: 0;
        padding-right: 0;
    }

    /* --- STUDIO --- */
    .studio_container {
        padding: 0 16px;
    }

    /* --- PROGRAM / PRIVATE --- */
    .programs_title {
        display: flex;
        flex-direction: column;
        gap: 42px;
        padding: 0 16px;
        max-width: 100%;
    }
    #title_program h2 {
        padding: 16px 8px 0 8px;
    }
    .program_title h3,
    .private_title h3 {
        margin-bottom: 42px;
    }
    .program_menu {
        margin-left: 0;
    }
    .program_card {
        width: 100%;
        margin: 0 auto;
    }
    .program_title {
        font-size: 20px;
        text-align: center;
    }
    .program_text {
        font-size: 16px;
        text-align: center;
    }
    .about_text_concept {
        font-size: 12px;
    }
    .program_button {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        font-size: 16px;
    }
    .program_img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* --- ABOUT --- */
    .about_container {
        display: flex;
        flex-direction: column;
        gap: 42px;
        padding: 0 16px;
        max-width: 100%;
    }
    .about_text {
        margin: 42px 0;
    }
    .about_text_message {
        font-size: 12px;
    }
    .about_text_message br {
        display: none;
    }
    .about_text_method {
        font-size: 12px;
    }
    .about_text_method br {
        display: none;
    }
    .about_text_body {
        font-size: 14px;
    }
    .about_buttons {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        gap: 16px;
    }

    /* --- ACCESS --- */
    .access_containers {
        display: flex;
        flex-direction: column;
        margin: 42px auto;
    }
    .access_location,
    .open_hours {
        padding: 0 16px;
        gap: 24px; /* ← 2つに分かれていたのを1つに統合 */
        margin-bottom: 16px;
    }
    .access_container {
        margin: 0 auto;
        padding: 0 16px;
    }
    .access_picture img {
        margin-bottom: 42px;
    }

    /* --- CONTACT --- */

    .contact_form_action {
        width: 100%; /* 親要素に対して一杯に広げる */
        max-width: 350px; /* そのうえで止める */
        margin: 0 auto; /* 中央に寄せる */
        padding: 0 16px;
    }
    .contact_containers {
        padding: 0 16px;
    }

    .contact_container {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        max-width: 350px; /* 追加 */
        width: 100%; /* 追加 */
        padding: 0 16px; /* 追加 */
    }

    .wpcf7-form > .form_item {
        max-width: 350px;
        width: 100%;
        margin: 0 auto 27px;
        padding: 0 16px;
    }

    .contact_description {
        font-size: 12px;
    }
    .contact_description br {
        display: none;
    }
    .form_item {
        flex-direction: column;
        align-items: flex-start;
    }
    .form_item label {
        width: 100%;
        margin-bottom: 8px;
    }
    .form_item select,
    .form_item input,
    .form_item textarea {
        width: 100%;
        margin-left: 0;
    }
    .form_note {
        padding-left: 0;
        margin-left: 0;
    }
    .form_bottom {
        padding-left: 0;
    }

    /* --- GUIDE --- */
    .guide_container {
        padding: 0 16px;
        font-size: 12px;
    }

    /* --- PROFILE --- */
    .profile_title {
        flex-direction: column;
        padding: 0 16px;
    }
    .profile_story {
        margin: 0 0 42px 0;
    }
    .profile_img img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto 42px;
    }

    /* --- MEDIA（Boxing Beat等） --- */
    .media_containers {
        flex-direction: column;
        padding: 0 16px;
    }
    .media_container {
        width: 100%;
        margin-right: 0;
        margin-bottom: 42px;
    }
    .accordion_container {
        width: 100%;
        margin-bottom: 32px;
    }

    /* --- TOPICS LIST --- */
    .topics_list {
        padding: 0 16px;
    }

    /* --- FOOTER --- */
    footer {
        height: auto;
        padding: 20px 20px;
    }
    .f-nav {
        width: 100%;
        height: auto;
        padding: 0;
        margin: 20px 0;
    }
    .f-nav-list {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer_logo img {
        margin-bottom: 10px;
    }

    /* Loading... */
    .loading-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

/* ---------------- confirm ---------------- */
@media screen and (max-width: 768px) {
    .confirm_item {
        flex-direction: column;
        gap: 8px;
    }

    .form_note,
    .wpcf7-form > .form_item {
        max-width: 350px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .confirm_wrap {
        max-width: 375px;
        width: 100%;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .form_buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .confirm_item dt {
        width: 100%;
        min-width: auto;
        font-size: 14px;
    }

    .confirm_item dd {
        width: 100%;
        font-size: 14px;
    }


}