@charset "utf-8";

/* -----------------------------統一設定 ここから----------------------------- */
: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; /* フォームバックグラウンド */

    --sheet-color_concept_light: rgba(
        250,
        243,
        224,
        0.8
    ); /* MV半透明のシート用 */
    --sheet-color_concept_dark: rgba(
        148,
        144,
        133,
        0.8
    ); /* MV半透明のシート用 */

    /* グラデーションも変数として登録できる 上から下*/
    --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; /* 枠の丸み */

    /* --- フォントサイズ --- */
    --fs-h1: clamp(36px, 5vw, 64px);
    --fs-h2: clamp(32px, 4vw, 48px); /* 固定→clampに変更推奨 */
    --fs-h3: clamp(24px, 3vw, 36px); /* 固定→clampに変更推奨 */
    --fs-h4: clamp(18px, 2vw, 24px); /* 固定→clampに変更推奨 */
    --fs-lead-text: clamp(16px, 1.6vw, 21px); /* 2vw → 1.6vwに修正 */
    /* --fs-h5: 20px; 追加 */
    --fs-body-bold: 16px;
    /* --fs-Catch-middle-bold: 24px; */
    /* --fs-Catch-large-bold: 48px;  */
    --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% /* 左端 */
    );
}

/* アンカーリンク先の要素にheader分の余白を追加 */
#title_concept,
#title_about,
#title_studio,
#title_access,
#title_profile,
#title_guide,
#title_topics,
#title_private,
#title_media,
#title_contact {
    scroll-margin-top: 80px;
}

.section_title {
    padding-top: 80px; /* ← 追加：ヘッダー分ずらす */
}

/* サイト内の余白でた場合の対処 */
body {
    display: flex;
    flex-direction: column; /* 縦並び */
    min-height: 100vh; /* 画面全体の高さ */

    font-family: var(--font-Noto-jp); /* フォントの統一設定 */
}

main {
    flex-grow: 1; /* 余った空間をmainが埋める */
}

h1,
h2,
.fv-copy,
.catchcopy,
.concept_text,
.about_text_body {
    font-family: var(--font-Shippori-jp-base);
}
/* -----------------------------統一設定 ここまで----------------------------- */

/* -----------------------------ローディング画面 ここから----------------------------- */
/* ローディング全体 */
#loading {
    position: fixed;
    inset: 0;
    background: var(--base-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

/* 円のローダー */
.loader {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6px solid var(--subtext-color);
    border-top: 6px solid var(--main-color);
    animation: spin 1s linear infinite;
}

/* テキスト */
.loading-text {
    margin-top: 16px;
    font-size: 1rem;
    letter-spacing: 0.08em;
    font-family: var(--font-Play-en-serif);
    color: var(--main-color);
}

/* 回転アニメーション */
/* @keyframesは設計図、spin というアニメの動きを作る */
@keyframes spin {
    /* rotate(0deg) 回ってないスタート時 */
    0% {
        transform: rotate(0deg);
    }
    /* rotate(360deg) 1回転 終了時*/
    100% {
        transform: rotate(360deg);
    }
}

/* -----------------------------body ここから----------------------------- */
/* バッグラウンドカラー */
body {
    background-color: var(--base-color);
    padding-top: 80px; /* header分ずらす */
}

/* -----------------------------header ここから----------------------------- */
/* ヘッダー全体のスタイル */
header {
    display: flex; /* 横並び */
    justify-content: space-between; /* ロゴとメニューを分ける */
    align-items: center; /* 上下の中央揃い */

    /* 2. サイズの設定 */
    width: 100%; /* 横いっぱい */
    height: 80px; /* figmaのデザインの高さ */

    /* 3. 余白と位置の設定 */
    margin: 0 auto; /* 中央揃え */
    padding: 0 40px; /* figmaの左右の余白 ロゴが端っこにぶつからないように */

    position: fixed; /* 画面に固定する */
    top: 0; /* 画面の一番上に貼り付ける */
    left: 0; /* 左端から */
    z-index: 9990; /* 他の要素より前面に出す */

    /* ‐‐‐‐header通常時 */
    background-color: var(--main-color); /* 背景色：濃い茶 */
    transition: 0.3s; /* 変化を0.3秒かけて滑らかにする */
}

.news_message {
    display: flex;
    justify-self: start;
    align-items: center;
    width: 100%; /* 横いっぱい */
    height: 38px; /* figmaのデザインの高さ */
    border: 1px solid var(--accent-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* 横方向 縦方向 ぼかし   影の色と透明度*/
    margin-top: 80px; 
    /* ← 追加：ヘッダー分ずらす */
}

.news_message p {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-small);
    margin-left: 40px;
}

.news_message a {
    color: var(--main-color); /* リンク色を明示する */
    text-decoration: none; /* 下線を消す */
}

/* ナビリンク通常時 */
.h-nav-list a {
    color: var(--base-color); /* 文字色：白 */
    transition: 0.3s; /* 変化を0.3秒かけて滑らかにする */
}

/* headerホバー時のナビリンク
「header:hover .h-nav-list a」の読み方：
headerにマウスが乗ったとき（:hover）の
   中にある.h-nav-list aに効かせる */
/* header:hover .h-nav-list a {
    color: var(--main-color); 
} */

/* ロゴ白版：通常時に表示する */
.logo-white {
    display: block; /* 表示する */
}

/* ロゴ黒版：通常時は隠す */
.logo-black {
    display: none; /* 隠す */
}

/* headerホバー時：白ロゴを隠す */
/* header:hover .logo-white {
    display: none; 
} */

/* headerホバー時：黒ロゴを表示する */
/* header:hover .logo-black {
    display: block; 
} */

/* -----------------------------header-logo ここから----------------------------- */
.header-logo {
    width: 75px;
    height: 70px;
}

/* -----------------------------h-nav-list ここから----------------------------- */
.h-nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.h-nav-list a {
    color: var(--base-color);
    font-family: var(--font-Montserrat-en-sanserif);
}

/* -----------------------------fv .catchcopy ここから----------------------------- */
/* 文字 */
.fv-copy {
    color: var(--h123-color);
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h1);
    line-height: 1.4; /* 文字の行間 */
    letter-spacing: 0.3em; /* 文字間隔 親要素のフォントサイズ*/
    margin-right: -0.3em; /* ← 最後の余白を削除 カラム落ちするため*/
}

/* グラデーション使用時 */
.gradient-text {
    background: var(--text-gradient); /* グラデーションを背景に設定 */
    -webkit-background-clip: text; /* 背景を文字の形に切り抜く（Safari対応） */
    -webkit-text-fill-color: transparent; /* 文字を透明にして背景を見せる（Safari対応） */
    background-clip: text; /* 背景を文字の形に切り抜く（標準） */
    font-style: italic; /* 斜体にする */
}

em {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-body);
    color: var(--text-color);
    line-height: 1.8; /* 文字の行間 */
    letter-spacing: 0.25em; /* 文字間隔 親要素のフォントサイズ*/
}
.catchcopy {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-lead-text);
    color: var(--main-color);
    line-height: 1.8; /* 文字の行間 */
    letter-spacing: 0.3em; /* 文字間隔 親要素のフォントサイズ*/

    margin-bottom: 28px;
}

/* -----------------------------fv-view ここから----------------------------- */
.fv {
    /* background-image: url(...) ← 削除！ */
    width: 100%;
    height: 100vh; /* calc(100vh - 80px) → 100vh に変更 */
    position: relative; /* 子要素の基準にする */
    overflow: hidden; /* ← これ超重要閉じ込める */
}

/* ② 背景専用レイヤーの設定 */
.fv-bg {
    position: absolute; /* .fv を基準に配置 */
    inset: 0; /* 上下左右すべて0（.fvいっぱいに広げる） */
    z-index: 0; /* 一番後ろに置く */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* フェードアニメーションはここだけ！ */
    transition: opacity 0.7s ease;
}

/* fv-view（テキスト＆ボタン）は背景より前面に出す */
.fv-view {
    position: absolute;
    top: 25%;
    left: 85px;
    right: 85px;
    z-index: 1; /* .fv-bg より前面に出す */

    display: flex; /* ← 追加 */
    flex-direction: column; /* ← 縦並び */
    align-items: flex-start; /* ← 左揃え */

    max-width: 635px; /* FigmaのW635に合わせる */
}

.fv-catchcopy-all {
    width: 100%; /* 親要素に合わせて縮む */
    width: 100%;
    display: inline-block;
    padding: 24px 74px;
    background: var(--sheet-gradient); /* ← 変数を使う */
}

/* h1非表示 */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;

    clip-path: inset(50%);
    /* clip: rect(0, 0, 0, 0);　clip-path: inset(50%);が最新の様子 */
}

/* フォントの間隔指定 */
.fv-catchcopy-all .fv-copy {
    margin-bottom: 28px;
}

.fv-catchcopy-all .fv-en {
    margin-bottom: 28px; /* 個別に調整 */
}

/* -----------------------------.fv_buttonここから---- */
/* ボタン */
.fv_button {
    margin-top: 61px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* ← .fv-cathcopy-allの幅に合わせる */
}

.fv_button a {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンの箱2つのサイズ */
    width: 250px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--accent-color);
    color: var(--main-color);

    font-family: var(--font-Noto-jp);

    /* ボタンの枠 */
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.fv_button a.btn_rec:hover {
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);
}

/* 電話追加 */
a.tel {
    color: var(--main-color) !important;
    font-size: var(--fs-14);
    font-family: var(--font-Shippori-jp-base);
}

.tel {
    display: inline-block;
    padding: 10px 16px;
    border: 1px solid var(--form-border-color);
    text-decoration: none;
    font-weight: 500;
    background: var(--sheet-gradient); /* ← 変数を使う */
}

/* -----------------------------.fv_scrollここから---- */

.scroll-indicator {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ui-color);
    font-size: 12px;
    font-family: var(--font-Play-en-serif);
    font-weight: var(--fw-bold);
    letter-spacing: 2px;
}

.scroll-indicator::after {
    content: '';
    display: block;
    width: 1px;
    height: 40px;
    margin: 8px auto 0;
    background: var(--ui-color);
    animation: scrollLine 1.5s infinite;
}

@keyframes scrollLine {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(10px);
    }
}
/* -----------------------------タイトル統一設定 ここから----------------------------- */
.section_title {
    width: 100%;
}

h2 {
    display: flex;
    padding: 16px 36px 0 36px;
    flex-direction: column;
    max-width: 560px; /* ← widthからmax-widthに変更 */
    /* height: 133px; 削除*/
    margin: 0 auto;
    align-items: center;
}

h2,
.jp_sub,
.en_main {
    color: var(--h123-color);
}

.jp_sub {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-body);
    margin-bottom: 8px;
}

.en_main {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-h2);
}

.title_border {
    width: 100%;
    max-width: 406px;
    border-bottom: 1px solid var(--main-color);
    padding-bottom: 32px; /* ← ボーダーの上の余白 */
}

/* -----------------------------CONCEPT ここから----------------------------- */

.concept_title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 162px auto;
}

.concept_title p {
    font-size: var(--fs-h3);
    font-family: var(--font-Shippori-jp-base);
    color: var(--main-color);
    line-height: 4.45;
    letter-spacing: 0.6em;
}

/* #concept_first はそのまま*/
#concept_second {
    padding-left: 4em; /* 1em = 親要素の文字1文字分のスペース */
}

#concept_third {
    padding-left: 8em;
}

/* 初期状態：左に隠す */
.concept_text {
    opacity: 0; /* 透明にする */
    transform: translateX(-60px); /* 左に60px移動して隠す */
    transition:
        opacity 0.8s ease,
        /* 透明度を0.8秒かけて変化 */ transform 0.8s ease; /* 位置を0.8秒かけて変化 */
}

/* 表示状態：元の位置に戻す */
.concept_text.is-active {
    opacity: 1; /* 表示する */
    transform: translateX(0); /* 元の位置に戻す */
}

/* -----------------------------STUDIO ここから----------------------------- */
.studio_img {
    width: 1200px;
}

.studio_top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 29px 0 64px 0;
}

.studio_text {
    display: flex;
    justify-content: center;
    align-items: center;
}

.studio_text p {
    font-size: var(--fs-h4);
    font-family: var(--font-Shippori-jp-base);
    line-height: 1; /* 文字の行間 */
    letter-spacing: 0.45em; /* 文字間隔 親要素のフォントサイズ*/
}

.studio_container {
    margin-bottom: 74px;
}

/* -----------------------------PROGRAM / PRIVATE ここから----------------------------- */
.program_title h3,
.private_title h3 {
    font-size: var(--fs-h3);
    font-family: var(--font-Play-en-serif);
    color: var(--h123-color);
    text-align: center;
}
.programs_title {
    display: flex;
    justify-content: center;
    gap: 276px;
    margin: 100px auto 70px; /* ← autoが本体 */
}

.program_title {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ← 追加：ボタンを一番下へ */
}

.program_title h3 {
    margin-bottom: 97px;
}

.program_title p {
    font-size: var(--fs-lead-text);
    font-family: var(--font-Shippori-jp-base);
    color: var(--text-color);
    line-height: 1.85;
}

.program_menu {
    margin-bottom: 24px;
    margin-left: 35px;
}

.price-trial {
    margin-bottom: 8px;
}

/* .private_title */
.private_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* ← 追加！ */
}

.private_title h3 {
    margin-bottom: 97px;
}

.program_item {
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    font-family: var(--font-Shippori-jp-base);
    color: var(--h123-color);
    line-height: 1.5; /* 行間 */
    letter-spacing: 0.45em; /* 文字間 */
    margin: 58px 0;
}

.program_item span {
    margin-left: 1em;
}

/* ------------.program_button ここから--*/
/* ボタン配置 */
.program_button {
    display: flex;
    justify-content: center; /* 中央揃え */
    margin-top: auto;
}

.program_btn-detail {
    margin-top: 0; /* ← 詳しく見るとボタンの間に197pxから0に変更 */
}

.program_button a {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンサイズ */
    width: 192px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--main-color);
    color: var(--base-color);

    font-family: var(--font-Noto-jp);

    /* ボタンの枠 */
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.program_button a.btn-detail:hover,
.program_button a.btn-trial:hover {
    color: var(--main-color);
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);
}

/* -----------------------------ABOUT NIIDA ここから----------------------------- */
.about_text {
    margin: 76px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.about_text p {
    color: var(--text-color);
    font-family: var(--font-Shippori-jp-base);
}

.about_text_message {
    font-size: 28px;
    font-weight: var(--fw-bold);
    line-height: 1.4;
    letter-spacing: 0.9em;
    /* font-style: italic; 斜体にする */
}

.about_text_method {
    font-size: var(--fs-lead-text);
    line-height: 1.85;
    letter-spacing: 0.45em;
}

.about_text_body {
    font-size: var(--fs-lead-text);
    line-height: 2.6;
    letter-spacing: 0.45em;
    /* font-style: italic; 斜体にする */
}

.about_text_concept {
    font-size: 14px;
    font-weight: var(--fw-medium);
    line-height: 1.8;
    letter-spacing: 0.4em;
}

.about_container {
    margin-bottom: 43px;
}

/* ------------.about_buttons ここから--*/
/* ボタン配置 */
.about_buttons {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 154px;
}

.about_buttons a {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンのサイズ */
    width: 250px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--main-color);
    color: var(--base-color);

    font-family: var(--font-Noto-jp);

    /* ボタンの枠 */
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.about_buttons a:hover {
    color: var(--main-color);
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);
}

/* ボタン文字改行 */
.about_button a {
    display: flex;
    flex-direction: column;
    align-items: center;

    font-family: var(--font-Montserrat-en-sanserif);

    width: 192px;
    height: 46px;
}

.about_button_low {
    font-size: var(--fs-small);
}

/* -----------------------------ACCESS ここから----------------------------- */

.access_container {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-h3);
    color: var(--text-color);
}

.access_container dd {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-body);
    color: var(--text-color);
}

.access_button_map {
    font-family: var(--font-Montserrat-en-sanserif);
    font-size: var(--fs-body);
    color: var(--text-color);
}

.access_containers {
    display: flex;
    justify-content: center;
    margin: 109px 120px 221px 234px;
}

.access_container {
    margin-right: 94px;
}

/* access_location */
.access_location {
    width: 432px;
    display: flex; /* Locationはflexのまま */
    flex-direction: column;
}

.access_location,
.open_hours {
    gap: 36px;
}

.access_location dd,
.open_hours_grid dt,
.open_hours_grid dd {
    font-family: var(--font-Noto-jp);
    line-height: 1.8;
}

/* TELリンクの色をリセット */
a[href^='tel'] {
    color: inherit; /* 親要素の色を引き継ぐ */
    text-decoration: none; /* 下線を消す */
}

/* open_hours */
.open_hours {
    width: 432px;
    display: flex; /* open_hoursもflexのまま */
    flex-direction: column;
    margin-top: 36px; /* ここで余白を管理 */
}

/* open_hours_gridは内側のdlなので別管理 */
.open_hours_grid {
    display: grid; /* !important不要 */
    grid-template-columns: max-content 1fr;
    width: auto; /* 432pxを引き継がないようにリセット */
    gap: 0px 1em; /* 上下8px・左右1em（曜日と時間の間） */
}

.open_hours_grid dt,
.open_hours_grid dd {
    font-size: var(--fs-body);
    margin: 0;
}

/* dtの右に余白 */
/* .open_hours_day {
    margin-right: 1em !important;  
} */

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

.access_picture img {
    margin-bottom: 151px;
}

/* ------------.access_button ここから--*/
/* ボタン配置 */
.access_button {
    display: flex;
    justify-content: center; /* 中央揃え */
    gap: 154px;
}

.access_button a {
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンの箱2つのサイズ */
    width: 250px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--main-color);
    color: var(--base-color);

    font-family: var(--font-Noto-jp);

    /* ボタンの枠 */
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.access_button a:hover {
    color: var(--main-color);
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);
}

/* ボタン文字改行 */
.access_button a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--font-Montserrat-en-sanserif);
    width: 192px;
    height: 52px;
}

/* -----------------------------contact_containers ここから----------------------------- */

.contact_containers {
    margin: 42px 0;
}

.contact_texts {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ① メインキャッチ */
.contact_catch {
    font-size: var(--fs-h4); /* 24px：落ち着いたサイズ */
    font-weight: var(--fw-medium);
    font-family: var(--font-Shippori-jp-base);
    color: var(--text-color);
    letter-spacing: 0.6em;
    line-height: 1.8;
    text-align: center;
}

/* ② サブキャッチ */
.contact_sub {
    font-size: var(--fs-body); /* 16px */
    font-family: var(--font-Shippori-jp-base);
    color: var(--text-color);
    letter-spacing: 1em;
    line-height: 1.8;
    text-align: center;
}

/* ③ 説明文 */
.contact_description {
    font-size: var(--fs-body); /* 16px */
    font-family: var(--font-Shippori-jp-base);
    color: var(--text-color);
    letter-spacing: 0.9em;
    line-height: 2.2;
    text-align: center;
}

/* ボタン配置 */
.contact_btn_wrap {
    margin: 42px 0 24px;
}

.contact_notes {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact_btn_wrap a {
    margin: 0 auto; /* ボタンを中央配置 */
    display: flex; /* 中身を自由自 */
    justify-content: center; /* 横の真ん中 */
    align-items: center; /* 縦の真ん中 */

    /* ボタンのサイズ */
    width: 250px;
    height: 52px;

    /* ボタンの文字と背景色 */
    background-color: var(--accent-color);
    color: var(--main-color);
    font-family: var(--font-Noto-jp);

    /* ボタンの枠 */
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    /* 【追加】変化を0.3秒かけて滑らかにする hoverに記載するとマウスを離したときパッと消える*/
    transition: 0.3s;
}

.contact_btn_wrap a.contact_btn:hover {
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
    border-radius: var(--border-button-radius);
}

/* ⑤ 補足 */
.contact_notes li {
    font-size: var(--fs-small); /* 12px */
    font-family: var(--font-Noto-jp);
    color: var(--text-color);
    letter-spacing: 0.2em;
}

/* 初期状態：非表示 JS制御*/
.fade-in {
    opacity: 0; /* 透明にする */
    transform: translateY(20px); /* 少し下にずらす */
    transition:
        opacity 0.8s ease,
        /* 透明度を0.8秒かけて変化 */ transform 0.8s ease; /* 位置を0.8秒かけて変化 */
}

/* 表示状態：画面に入ったとき */
.fade-in.is-visible {
    opacity: 1; /* 表示する */
    transform: translateY(0); /* 元の位置に戻す */
}

/* -----------------------------footer ここから----------------------------- */
/* コピーライト */
footer {
    width: 100%;
    height: 208px;
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 19.75px;
}

.footer_tel {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: var(--base-color);
}

.footer_logo img {
    margin-top: 8px;
    width: 75px;
    height: 70px;
}

.f-nav {
    width: 687px;
    height: 40px;
    padding: 8px 40px;
}

.f-nav-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.f-nav-list a {
    color: var(--base-color);
    font-family: var(--font-Montserrat-en-sanserif);
}

small {
    font-family: var(--font-Play-en-serif);
    color: var(--base-color);
    font-weight: var(--fw-bold);
}

/* -----------------------------profile ここから----------------------------- */

.profile_story {
    max-width: 412px;
    margin: 0 173px 0 209px;
}

.profile_story_title {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-h3);
    color: var(--text-color);
    text-align: center; /* ← 中央配置 */
}

.profile_story_name {
    margin-top: 24px;
}
.profile_awards_title {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h3);
    color: var(--text-color);
    margin: 24px 0;
}

.profile_title {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: row;
    margin: 88px auto;
}

.profile_story_text,
.profile_story_name {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--text-color);
    line-height: 2.59;
}

/* awards */
.title_awards {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 522px;
}

.profile_awards,
.profile_awards_list {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile_awards_list h4 {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    color: var(--text-color);
    text-align: center;
    margin-bottom: 24px;
}

.profile_awards_sub li {
    list-style-type: disc;
    list-style-position: inside; /* ← ●をli内側に入れる（center指定に必要） */
    text-align: center; /* ← 中央揃え */
    line-height: 2.14;

    font-family: var(--font-Noto-jp);
    font-size: var(--fs-body);
    color: var(--text-color);
}

/* -----------------------------boxingbeat ここから----------------------------- */
.media_title {
    display: flex;
    justify-content: center;
    max-width: 1440px;
    margin: 0 auto;
}

.media_containers {
    max-width: 1200px;
    padding: 46px 27px;
    margin-top: 65px;
    display: flex;
    flex-direction: row;
}

.media_heading {
    font-family: var(--font-Play-en-serif);
    font-size: var(--fs-h3);
    color: var(--text-color);
    text-align: center;
}

.media_heading_sub {
    text-align: center;
}

.media_heading_text,
.media_accordion_btn {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-lead-text);
    color: var(--text-color);
    line-height: 1.85;
}

.media_accordion_list a {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-small);
    color: var(--text-color);
}

.media_container h4,
.accordion_container h4 {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-h4);
    color: var(--text-color);
    margin-bottom: 42px;
}

.media_container {
    display: flex;
    flex-direction: column;
    width: 492px;
    margin-right: 170px;
}

.summary {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-lead-text);
    color: var(--text-color);
}

/* アコーディオン側 */
.accordion_container {
    max-width: 480px;
}

.accordion_title {
    width: 100%;
    padding: 0 47px;
}

/* アコーディオンっ設定 */
/* デフォルトの▶アイコンを消す */
.media_accordion_btn {
    list-style: none; /* ブラウザデフォルトの▶を消す */
    cursor: pointer; /* マウスをポインターに */
}

/* 閉じているとき：＋を表示 */
.media_accordion_btn::before {
    content: '＋';
}

/* 開いているとき：－に変える */
.media_accordion_item[open] .media_accordion_btn::before {
    content: '－';
}

/* -----------------------------topics ここから----------------------------- */
.topics_containers {
    display: flex;
    justify-content: center;
    margin: 48px 0;
}

/* 追加：横幅制限 */
.topics_containers dl {
    max-width: 720px;
    width: 100%;
}

/* 1記事ごとの区切り */
.topics_list dd {
    padding-bottom: 48px;
}

/* 記事title */
.topics_containers dt,
.topics_containers dd {
    font-family: var(--font-Shippori-jp-base);
    color: var(--text-color);
    line-height: 2;
}

.topics_containers dt {
    font-weight: var(--fw-bold);
    display: inline-block;
    border-bottom: 1px solid var(--text-color);

    /* 追加：少し余白 */
    margin-bottom: 8px;
}

.topics_containers dd {
    margin-bottom: 0;
    font-size: var(--fs-14);

    line-height: 2;
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-body);
}

/* -----------------------------guide ここから----------------------------- */
.guide_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 48px auto;
    gap: 40px;
    max-width: 840px;

    font-family: var(--font-Noto-jp);
    color: var(--text-color);

    line-height: 1.8;
}

.guide_container h3 {
    font-size: var(--fs-body-bold);
}

.info-list li {
    list-style: disc; /* デフォルトの● をつける */
    padding-left: 0; /* ブラウザのデフォルト余白をリセット */
    margin-left: 2em; /* ●1文字分右にずらす */
    letter-spacing: 0.18em;
}

.guide_course {
    padding-top: 8px;
    padding-left: 2em;
}

.guide_course-title {
    font-weight: var(--fw-medium);
}

/* 金額項目 */
.price-table {
    margin-top: 32px;
}

.price-table th,
.price-table td {
    text-align: left; /* 左揃え */
    padding: 8px 24px;
    border: 1px solid var(--subtext-color);
}

/* 補足 */
.facility-list {
    margin-top: 24px;
}

.info-list-inner li {
    list-style: none;
}

.btn_area {
    margin: 0 auto;
}

/* ボタン本体（既存のスタイルを継承） */
.btn_area a.btn_main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 52px;
    background-color: var(--main-color);
    color: var(--base-color);
    font-family: var(--font-Noto-jp);
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);
    transition: 0.3s;
    cursor: pointer;
}

.btn_area a.btn_main:hover {
    color: var(--main-color);
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* -----------------------------contact ここから----------------------------- */
.contact_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: var(--font-Noto-jp);
    color: var(--text-color);
}

.contact_form_text {
    margin: 42px auto;
}

.contact_form p {
    font-size: var(--fs-lead-text);
    line-height: 1.85;
}

/* 各フォーム行のコンテナ */
.form_item {
    display: flex;
    align-items: center; /* 縦方向の中央揃え */
    padding-bottom: 27px; /* 下の余白 */
    width: 100%; /* 親要素に合わせる */
    max-width: 626px; /* フォーム全体の最大幅 */
}

/* 左側のラベル部分 */
.form_item label {
    width: 160px; /* ★ここを固定。文字数に合わせて調整 */
    font-weight: bold;
    flex-shrink: 0; /* 【追加】スマホでラベルが潰れるのを防ぐ */
}

/* すべて必須の項目のため */
.form_note {
    width: 100%;
    max-width: 626px;
    padding-left: 146px;

    font-size: 14px;
    margin-bottom: 10px;
    margin-left: 30px;
}

.contact_form_action p,
.form_note {
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    color: #ff0000;
}

/* -----------------入力フォームの設定 */
/* 右側の入力要素（input, select, textarea） */
.form_item select,
.form_item input,
.form_item textarea {
    width: 350px; /* 入力欄の幅を統一 */
    max-width: 100%; /* 【追加】画面幅が狭いときに突き抜けないようにする */
    padding: 10px; /* 内側の余白を適切に */
    box-sizing: border-box; /* paddingを含めたサイズ計算にする */

    /* input自体にflexは通常不要 */
    border: 1px solid var(--border-color); /* 枠線が必要なら */
    margin-left: 30px;
    background-color: #d9d9d9; /* 薄いグレー */
    transition: background-color 0.3s ease; /* 色の変化を滑らかに */
}

/* --- 【解決策】入力中、または値がある時に白くする --- */
/* 1. フォーカスした時（入力しようとした時）に白くする */
.form_item input:focus,
.form_item select:focus,
.form_item textarea:focus {
    background-color: var(--form-bg-color);
    outline: none;
    /* ブラウザ標準の青枠を消す */
}

/* ブラウザの自動入力（オートコンプリート）の背景色を、
自分の変数に変えないと変更できない様子*/
.form_item input:-webkit-autofill,
.form_item textarea:-webkit-autofill,
.form_item select:-webkit-autofill {
    /* 背景色を var(--~color) で塗りつぶす */
    -webkit-box-shadow: 0 0 0px 1000px var(--base-color) inset !important;
    /* 文字の色も自分の設定に固定する */
    -webkit-text-fill-color: var(--text-color) !important;
}

/* 入力後に白にする（text / email / tel / textarea） */
.form_item input:not(:placeholder-shown),
.form_item textarea:not(:placeholder-shown) {
    background-color: var(--form-bg-color) !important;
}

/* selectは別処理 */
.form_item select:valid {
    background-color: var(--form-bg-color);
}
/* ----------------- */

/* textarea の場合は中央揃えより「上揃え」の方が自然なため、個別調整 */
.form_item:has(textarea) {
    align-items: flex-start;
}

/* ボタンの配置 */
.btn_container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

/* ボタン本体（既存のスタイルを継承） ,wpcf7の装飾も含める*/
button.btn_submit,
input.wpcf7-form-control.wpcf7-submit.btn_submit,
.wpcf7-form-control.wpcf7-previous.btn_submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 192px;
    height: 52px;
    background-color: var(--main-color) !important;
    color: var(--base-color);
    font-family: var(--font-Montserrat-en-sanserif);
    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);
    transition: 0.3s;
    cursor: pointer;
    font-size: var(--fs-body);
}

button.btn_submit:hover,
input.wpcf7-form-control.wpcf7-submit.btn_submit:hover,
.wpcf7-form-control.wpcf7-previous.btn_submit:hover {
    color: var(--main-color);
    background-color: var(--base-color) !important;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.form_bottom {
    width: 100%;
    max-width: 626px;
    padding-left: 146px;
}

.form_agree label {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-small);
}

/* 150pxの制限を解除して横並びにする */
.form_item.form_agree {
    justify-content: center; /* 中央に寄せる */
    gap: 25px; /* チェックボックスと文字の間の隙間 */
    width: 100%; /* 全体の幅を確保 */
    max-width: none; /* 親の制限を一度リセット */
}

.form_item.form_agree label {
    width: auto; /* 150px固定を解除 */
    flex-shrink: 0; /* 潰されないようにする */
    padding: 0; /* 余計なパディングをリセット */
    cursor: pointer;
}

.form_item.form_agree input[type='checkbox'] {
    width: auto; /* 350px固定を解除 */
    margin: 0; /* 余白リセット */
    cursor: pointer; /* 指差しマークへ */
}

/* 送信ボタンの親要素も調整（350px幅に引っ張られないようにする） */
.form_button {
    justify-content: center;
    width: 100% !important;
}

/* 日時選択：値が空（プレースホルダが表示されている状態）の時はグレー */
.form_item input[type='datetime-local']:placeholder-shown {
    background-color: #d9d9d9 !important;
}

/*  */
/* 全体コンテナを中央寄せ */
.contact_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素をすべて中央へ */
}

/* 必須注釈のズレを修正 */
.form_note {
    width: 100%;
    max-width: 540px; /* 入力欄（160px+30px+350px）の合計に合わせる */
    padding-left: 0 !important; /* 固定パディングを解除 */
    margin: 0 auto 10px !important;
    text-align: left;
}

/* フォーム項目の左右中央揃え */
.form_item {
    justify-content: center; /* アイテム全体を中央へ */
    margin: 0 auto;
}

/* 同意ボタンと送信ボタンのエリア */
.form_bottom {
    width: 100%;
    max-width: 540px; /* 入力欄の幅に合わせる */
    padding-left: 0 !important; /* 固定パディングを解除 */
    margin: 20px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* wpcf7 messageのデフォルト線を初期化 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: none;
}

/* wpcf7　確認画面のボタン ２つの位置修正*/
.form_buttons {
    display: flex;
    padding-bottom: 27px;
    gap: 24px;
}

/* 確認画面（confirm） 確認画面のレイアウト */
.confirm_item {
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.confirm_item label {
    width: 160px;
    flex-shrink: 0;
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-small);
}

.confirm_value {
    flex: 1;
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-body);
}

/* 戻るボタンを強制表示 */
/* .wpcf7-previous {
    display: flex !important;
} */

/* -----------------------------private ここから----------------------------- */
/* 全体幅制御 */
.private_intro,
.private_section,
.private_cta {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 20px;
}

/* セクション余白 */
.private_section {
    margin: 100px auto;
}

.private_intro {
    margin: 80px auto 60px;
}

.private_catch {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1.6;
    margin-bottom: 24px;
    color: var(--main-color);
    text-align: center;
}

/* リード文 */
.private_lead {
    font-size: var(--fs-body-bold);
    line-height: 2;
    color: var(--text-color);
    text-align: center;
}

/* サブ見出し */
.private_section h3 {
    font-size: 18px;
    font-weight: var(--fw-bold);
    margin-bottom: 10px;
    color: var(--main-color);
}

/* 本文 */
.private_section p {
    line-height: 2;
    margin-bottom: 24px;
    font-size: var(--fs-body);
    color: var(--text-color);
}

/* チェックリスト */
.private_check,
.private_recommend {
    margin: 32px 0;
    padding-left: 0;
}

.private_check li,
.private_recommend li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.8;
    color: var(--main-color);
}

/* チェックアイコン */
.private_check li::before,
.private_recommend li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color);
    font-size: var(--fs-14);
}

/* private_features */
.private_features {
    margin-top: 32px;
}

.feature_item {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* ボタン */
.private_button {
    margin-top: 32px;
}

.btn_price,
.btn_contact {
    display: inline-block;
    padding: 16px 32px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    transition: 0.3s;
}

/* ホバー */
.btn_price:hover,
.btn_contact:hover {
    background: var(--main-color);
    color: var(--base-color);
}

/* CTA */
.private_cta {
    margin: 120px auto;
    text-align: center;
}

.private_cta h3 {
    font-size: 26px;
    margin-bottom: 16px;
    color: var(--main-color);
}

.private_cta p {
    margin-bottom: 32px;
    line-height: 2;
    color: var(--main-color);
}

/* --------------- Philosophy ここから ---------------*/

/* 全体コンテナ */
.philosophy_container {
    max-width: 720px;
    margin: 80px auto 120px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* キャッチコピー */
.philosophy_catch {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    color: var(--h123-color);
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.2em;
    margin-bottom: 32px;
}

/* リード文 */
.philosophy_lead {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-lead-text);
    color: var(--text-color);
    text-align: center;
    line-height: 2;
    letter-spacing: 0.15em;
    margin-bottom: 64px;
}

/* 各ブロック */
.philosophy_block {
    width: 100%;
    margin-bottom: 56px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 見出し */
.philosophy_block h4 {
    font-family: var(--font-Shippori-jp-base);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    color: var(--h123-color);
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}

/* 本文 */
.philosophy_block p {
    font-family: var(--font-Noto-jp);
    font-size: var(--fs-body);
    color: var(--text-color);
    line-height: 2;
    letter-spacing: 0.08em;
}

/* CTAエリア */
.philosophy_cta {
    margin-top: 80px;
    text-align: center;
}

/* ボタン（既存btn_mainを強化） */
.philosophy_cta .btn_main {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 52px;

    background-color: var(--accent-color);
    color: var(--main-color);

    font-family: var(--font-Noto-jp);
    font-size: var(--fs-body);

    border: 3px solid var(--border-color);
    border-radius: var(--border-button-radius);

    transition: 0.3s;
}

/* hover */
.philosophy_cta .btn_main:hover {
    background-color: var(--base-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    border: var(--border-button-bold_color);
}

/* --------------- sns-icons ここから ---------------*/
/* リストを横に並べる */
.sns-icons {
    display: flex;
    gap: 20px;
    padding-bottom: 4px;
}

/* リンクの装飾を消す */
.sns-icons a {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 初期状態（白） */
.sns-icons svg {
    width: 24px;
    height: 24px;
    fill: #fff; /* クリック前 */
    transition: 0.3s;
}

/* ホバーで色変化 */
.sns-icons a:hover .icon-instagram {
    fill: #e1306c;
}

.sns-icons a:hover .icon-facebook {
    fill: #1877f2;
}

/* Font Awesome専用の書き方 */
/* リストを横に並べる */
/* .sns-icons {
    display: flex;
    gap: 20px;  */
/* アイコンの間隔 */
/* padding-bottom: 4px;
} */

/* リンクの装飾を消す */
/* .sns-icons a {
    text-decoration: none;
    color: #333;
    font-size: 16px;
} */

/* アイコン個別に色をつける場合 */
/* .fa-instagram {
    color: #e1306c;
} */
/* インスタカラー */

/* .fa-facebook {
    color: #1877f2;
} */
/* Facebookの青 */

/* ---------------- confirm ---------------- */

.confirm_wrap {
    max-width: 626px;
    margin: 0 auto;
}

/* 1行 */
.confirm_item {
    display: flex;
    gap: 24px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}

/* ラベル */
.confirm_item dt {
    width: 160px;
    min-width: 160px;
    font-weight: var(--fw-bold);
}

/* 内容 */
.confirm_item dd {
    flex: 1;
    margin: 0;
    line-height: 1.8;
    white-space: pre-wrap; /* ← 改行保持 */
}

/* CF7 の <form> の中だけは flex を無効化 これやらないとフォームのnextが正常に動作しない*/
/* .wpcf7 form .form_item,
.wpcf7 form .form_bottom,
.wpcf7 form .contact_container {
    display: block !important;
} */

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: none;
}

.wpcf7 form .wpcf7-response-output {
    border: none;
}

.confirm_item label {
    color: var(--main-color);
    font-family: var(--font-Noto-jp);
    font-size: 16px; /* サイズ変更 */
    font-weight: bold;
}

.confirm_value {
    color: var(--main-color);
    font-family: var(--font-Noto-jp);
    font-size: 14px; /* サイズ変更 */
}