/* 全体のリセットと共通スタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
}

/* ハンバーガーメニュー開閉時に背景スクロールを止めるクラス */
body.menu-open {
    overflow: hidden;
}

a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.3s;
}

a:hover {
    opacity: 0.7;
}

/* ヘッダー（スクロール固定） */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.7));
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.logo {
    display: flex;
    align-items: center;
    z-index: 110;
}

.logo-img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

nav ul li a {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

/* ハンバーガーボタン */
.menu-btn {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 110;
    padding: 0;
}

.menu-btn span {
    width: 100%;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease;
    transform-origin: left center;
}

/* ヒーローセクション */
/* ヒーローセクション（黒背景＆KV専用アニメーション） */
.hero {
    height: 100vh;
    width: 100%;
    position: relative;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* 中央ではなく、やや上寄りを基準にする */
    text-align: center;
    overflow: hidden;
}

.hero-content {
    z-index: 10;
    max-width: 800px;
    padding: 0 20px;
    margin-top: 22vh; /* 画面の上から22%の位置にコンテンツを配置（全体的に上へ詰める） */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* KVロゴ画像用のラッパーとサイズ調整 */
.kv-logo-wrap {
    margin-bottom: 15px;
}

.kv-logo {
    height: 85px;
    width: auto;
    object-fit: contain;
}

/* メインタイトルのフォントと装飾 */
.kv-title {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #ffffff;
    margin-bottom: 20px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 「プロを目指す〜」のリード文 */
.hero-lead {
    font-size: 12px;
    color: #cccccc;
    margin-bottom: 0;
    letter-spacing: 0.3em;
    line-height: 1.6;
    margin-top: 20px;
    font-family: "BIZ UDPMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/* エントリーボタンのラッパー */
.hero-btn-wrap {
    margin-top: 35px;
}

/* 【新設】ゴールドチックなプレミアムボタン */
.btn-gold {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #d4af37 0%, #c9a063 50%, #b38f43 100%); /* 高級感あるリアルな金グラデーション */
    color: #000000 !important; /* 文字色は黒にして視認性を確保 */
    font-weight: 800;
    padding: 15px 50px;
    border: none;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(201, 160, 99, 0.4);
    transition: all 0.3s ease;
    min-width: 340px;
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(201, 160, 99, 0.6);
    filter: brightness(1.1); /* マウスを乗せると少し輝く演出 */
    opacity: 1 !important;
}

/* ボタン内の小さな補足文字（7/4〜プレオープン） */
.btn-sub {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: 0.8;
}

/* ボタン内のメイン文字（体験受付中） */
.btn-main {
    font-size: 18px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* スクロールダウンの演出 */
.scroll-down {
    position: absolute;
    bottom: 15px; /* 下からの距離を縮めて、LINEボタンの下（地面スレスレ）に配置します */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scroll-down span {
    font-size: 10px;
    letter-spacing: 4px;
    color: #888888;
    text-indent: 4px;
}

.scroll-down .arrow {
    width: 1px;
    height: 55px;
    background: linear-gradient(to bottom, #888888, transparent);
    position: relative;
    overflow: hidden;
}

.scroll-down .arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c9a063;
    animation: scroll-line 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scroll-line {
    0% { transform: translateY(-100%); }
    80%, 100% { transform: translateY(100%); }
}

/* スマホ用KVレスポンシブ微調整 */
@media (max-width: 768px) {
    .hero-content {
        margin-top: 20vh;
    }
    .kv-logo {
        height: 65px;
    }
    .kv-title {
        font-size: 32px;
        letter-spacing: 0.1em;
        margin-bottom: 15px;
    }
    .hero-btn-wrap {
        margin-top: 30px;
    }
    /* スマホ用にゴールドボタンのサイズと文字サイズを微調整 */
    .btn-gold {
        min-width: 290px;
        padding: 12px 30px;
    }
    .btn-sub {
        font-size: 10px;
    }
    .btn-main {
        font-size: 15px;
    }
    .scroll-down {
        bottom: 20px;
    }
}
.btn {
    display: inline-block;
    padding: 15px 40px;
    border: 2px solid #ffffff;
    background: transparent;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.3s;
    cursor: pointer;
}

.btn:hover {
    background-color: #ffffff;
    color: #000000;
    opacity: 1;
}

/* コンテンツ共通 */
.section {
    padding: 120px 50px;
    max-width: 1400px;
    margin: 0 auto;
    scroll-margin-top: 80px; 
}

.section-title {
    font-size: 36px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 60px;
    letter-spacing: 1px;
    border-left: 5px solid #ffffff;
    padding-left: 15px;
}

/* ==========================================================================
   スタジオ紹介 (About) & 4つの強み レイアウト調整（並び順最終調整）
   ========================================================================== */
/* ① 画面全体を2カラムにする（左：文章 40% / 右：強み 60%） */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px;                        
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 左側の文章ブロック */
.about-text h3 {
    font-size: 20px;
    color: #c9a063;
    margin-bottom: 25px;
    font-weight: 700;
}

.about-text p {
    font-size: 14px;
    color: #cccccc;
    line-height: 1.8;
}

/* ② 右側の強みブロックを【縦2段】に分ける指示 */
.features-grid {
    display: flex !important;
    flex-direction: column !important; /* 上の段(01,02) と 下の段(03,04) を縦に並べる */
    gap: 20px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* 各段（上の段、下の段）の中でカードを【横2列】に並べる設定 */
.features-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2枚のカードを綺麗に横並びにする */
    gap: 20px; /* カード同士の左右のすき間 */
}

/* 強みカードの見た目デザイン */
.feature-card {
    background-color: #111111;
    border: 1px solid #222222;
    padding: 25px 20px;
    border-radius: 4px;
    height: 100%; /* カードの高さを左右で揃える */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: border-color 0.3s, transform 0.3s;
}

.feature-card:hover {
    border-color: #c9a063;
    transform: translateY(-3px);
}

.feature-icon-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.feature-number {
    font-size: 18px;
    font-weight: 700;
    color: #c9a063;
}

.feature-icon-wrap i {
    font-size: 22px;
    color: #c9a063;
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #ffffff;
}

.feature-card p {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.6;
}

/* ==========================================================================
   レスポンシブ対応（スマホ・タブレット表示の最適化）
   ========================================================================== */
/* タブレット（画面幅1024px以下）：文章の下に強みがくる上下2段構成にする */
@media (max-width: 1024px) {
    .about-container {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
}

/* スマホ（画面幅640px以下）：カードが潰れないよう完全な1列縦並びにする */
@media (max-width: 640px) {
    .features-column {
        grid-template-columns: 1fr; /* スマホ時は横並びを解除して1列にする */
        gap: 15px;
    }
    .features-grid {
        gap: 15px !important;
    }
}

/* ニュースセクション */
.news-list {
    list-style: none;
}

.news-item {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #222222;
    font-size: 15px;
}

.news-date {
    width: 150px;
    color: #888888;
    font-weight: 600;
}

.news-badge {
    background-color: #222222;
    font-size: 11px;
    padding: 2px 8px;
    font-weight: 700;
    margin-right: 20px;
    height: fit-content;
    text-transform: uppercase;
}

.news-text {
    flex: 1;
    color: #dddddd;
}

/* ==========================================================================
   クラス紹介グリッド ( style.css 445行目付近〜 )
   ========================================================================== */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    background-color: #111111;
    aspect-ratio: 16 / 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    border: 1px solid #222222;
    transition: border-color 0.3s;
}

/* ホバー時に枠線を白にする（既存スタイル） */
.grid-item:hover {
    border-color: #ffffff;
}

/* --- 背景画像の設定 --- */
.grid-item-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    z-index: 1;
    transition: transform 0.5s, opacity 0.5s;
}

/* ホバー時に画像を拡大・明るくする（既存スタイル） */
.grid-item:hover .grid-item-img {
    transform: scale(1.05);
    opacity: 0.7;
}

/* --- コンテンツエリアの設定 --- */
.grid-item-content {
    position: relative;
    z-index: 2;
    /* 矢印を絶対配置するための基準にする */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.grid-item-tag {
    font-size: 11px;
    text-transform: uppercase;
    background-color: #ffffff;
    color: #000000;
    padding: 3px 8px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 10px;
    align-self: flex-start; /* タグ自体の幅に縮める */
}

.grid-item-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    padding-right: 40px; /* 矢印と重ならないように右側に余白を作る */
}

/* ==========================================================================
   【新規追加】画像右下の矢印アイコン
   ========================================================================== */
.grid-item-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.9); /* 全クラス共通：通常時は少し透明な白 */
    color: #000000; /* アイコン色は黒 */
    border-radius: 50%; /* 正円にする */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 軽い影 */
}

/* --- ホバー時のアニメーション --- */

.grid-item:hover .grid-item-arrow {
    background-color: #c9a063; /* ホバーした時にゴールドになります */
    color: #000000;
    transform: scale(1.1);
}
/* 2. 矢印の中のアイコン（iタグ）を右に動かす */
.grid-item:hover .grid-item-arrow i {
    animation: arrowSlide 0.6s ease-in-out infinite;
}

/* 矢印が右にスライドするキーフレームアニメーション定義 */
@keyframes arrowSlide {
    0% { transform: translateX(0); }
    50% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* --------------------------------------------------------------------------
   スマホ表示（レスポンシブ）での調整（ style.css 768px以下のメディアクエリ内 ）
   --------------------------------========================================== */
@media (max-width: 768px) {
.grid-item-arrow {
        width: 30px;
        height: 30px;
        font-size: 14px;
        right: -5px;
        bottom: -5px;
    }
    
    .grid-item-title {
        font-size: 18px;
        padding-right: 30px;
    }
}

/* 講師詳細セクション */
.instructor-detail-container {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 60px;
    align-items: start;
}

.instructor-photo {
    position: relative;
    border: 1px solid #222222;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.instructor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-profile .role {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.instructor-profile .name-ja {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.instructor-profile .name-en {
    font-size: 16px;
    font-weight: 600;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
}

.instructor-profile .bio-text {
    font-size: 15px;
    color: #dddddd;
    line-height: 1.8;
    margin-bottom: 40px;
}

.biography-block {
    border-top: 1px solid #222222;
    padding-top: 30px;
}

.biography-block h4 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #ffffff;
}

.history-list {
    list-style: none;
}

.history-list li {
    display: flex;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.6;
}

.history-year {
    width: 90px;
    color: #888888;
    font-weight: 700;
    flex-shrink: 0;
}

.history-content {
    color: #cccccc;
}

/* レッスン日程 */
.schedule-table-wrap {
    overflow-x: auto;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 600px;
}

.schedule-table th, .schedule-table td {
    padding: 20px;
    border-bottom: 1px solid #222222;
}

.schedule-table th {
    font-weight: 700;
    text-transform: uppercase;
    color: #888888;
    font-size: 13px;
    letter-spacing: 1px;
}

.schedule-time {
    font-weight: 600;
    color: #ffffff;
}
/* ==========================================================================
   Studio About - 7つの強み (スクロール発火・時計回りアニメーション仕様)
   ========================================================================== */

/* 全体を綺麗に収めるコンテナ */
.about-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* 左: 文章 / 右: 強みサークル */
    gap: 50px;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 【ベース】ゴールドの円形エリア --- */
.about-features-grid {
    position: relative;
    width: 460px; 
    height: 460px;
    margin: 40px auto !important;
    display: block !important; 
}

/* 中央のゴールドの細い真円 */
.about-features-grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 260px; 
    height: 260px;
    border: 1px solid rgba(201, 160, 99, 0.35);
    border-radius: 50%;
    box-shadow: 0 0 25px rgba(201, 160, 99, 0.08);
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

/* 💡 スクロールして画面に入ったら、中央のリングがじわっと広がる */
.about-features-grid.is-animated::before {
    animation: circleScaleIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 強みカード共通：円周上に浮かぶ縦長チップデザイン */
.feature-card {
    position: absolute !important;
    background: rgba(0, 0, 0, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 10px !important; 
    border-radius: 14px !important;
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important; 
    justify-content: center !important;
    gap: 6px !important; 
    width: 110px !important; 
    height: auto !important;
    min-height: 0 !important;
    z-index: 2;
    cursor: default;
    
    /* 💡 初期状態は非表示（下から湧き上がる前の位置） */
    opacity: 0;
    transform: translate(-50%, -30%) scale(0.85);
    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease !important;
}

/* 💡 スクロールして画面に入ったら（クラスがついたら）、初めてアニメーションを開始 */
.about-features-grid.is-animated .feature-card {
    animation: floatingReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ホバーした時にゴールドに光って少し浮き上がる演出 */
.about-features-grid.is-animated .feature-card:hover {
    border-color: rgba(201, 160, 99, 0.8) !important;
    background: rgba(201, 160, 99, 0.15) !important;
    box-shadow: 0 0 15px rgba(201, 160, 99, 0.3);
    margin-top: -5px !important;
}

/* 【配置 ＆ ⏰時計回り時間差（Delay）の指定】 */
.feature-card:nth-child(1) { top: 7%;  left: 50%; animation-delay: 0.2s; }  /* 1. 真上 */
.feature-card:nth-child(2) { top: 22%; left: 85%; animation-delay: 0.4s; }  /* 2. 右上 */
.feature-card:nth-child(3) { top: 58%; left: 93%; animation-delay: 0.6s; }  /* 3. 右下 */
.feature-card:nth-child(4) { top: 91%; left: 72%; animation-delay: 0.8s; }  /* 4. 真下右 */
.feature-card:nth-child(5) { top: 91%; left: 28%; animation-delay: 1.0s; }  /* 5. 真下左 */
.feature-card:nth-child(6) { top: 58%; left: 7%;  animation-delay: 1.2s; }  /* 6. 左下 */
.feature-card:nth-child(7) { top: 22%; left: 15%; animation-delay: 1.4s; }  /* 7. 左上 */

/* 内パーツ微調整 */
.feature-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}
.feature-icon-wrap i {
    font-size: 16px !important; 
    color: #c9a063 !important;
}
.feature-number {
    display: none !important; 
}
.feature-card h4 {
    font-size: 13px !important; 
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-align: center !important; 
}
.feature-card p {
    display: none !important;
}

/* ==========================================================================
   アニメーション用のキーフレーム（演出の心臓部）
   ========================================================================== */
@keyframes circleScaleIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes floatingReveal {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(0.85);
    }
    70% {
        transform: translate(-50%, -52%) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* --------------------------------------------------------------------------
   レスポンシブ（タブレット・スマホ対応）
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .about-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-features-grid {
        margin: 30px auto !important;
    }
}

/* スマートフォン表示（画面幅767px以下） */
@media screen and (max-width: 767px) {
    .about-features-grid {
        width: 380px !important;
        height: 380px !important;
        margin: 20px auto !important;
    }

    .about-features-grid::before {
        display: block !important;
        width: 200px !important;
        height: 200px !important;
    }

    .feature-card {
        padding: 10px 8px !important;
        gap: 4px !important;
        width: 110px !important; 
        border-radius: 12px !important;
    }

    .feature-card:nth-child(1) { top: 6%;  left: 50%; }
    .feature-card:nth-child(2) { top: 22%; left: 85%; }
    .feature-card:nth-child(3) { top: 58%; left: 92%; }
    .feature-card:nth-child(4) { top: 92%; left: 71%; }
    .feature-card:nth-child(5) { top: 92%; left: 29%; }
    .feature-card:nth-child(6) { top: 58%; left: 8%;  }
    .feature-card:nth-child(7) { top: 22%; left: 15%; }

    .feature-icon-wrap i {
        font-size: 14px !important; 
    }
    
    .feature-card h4 {
        font-size: 11px !important; 
        line-height: 1.4 !important;
        letter-spacing: 0px !important;
    }
}

/* 超小型スマホ（iPhone SEなど横幅が360px未満） */
@media screen and (max-width: 360px) {
    .about-features-grid {
        width: 320px !important;
        height: 320px !important;
    }
    .about-features-grid::before {
        width: 160px !important;
        height: 160px !important;
    }
    .feature-card {
        width: 92px !important; 
        padding: 8px 4px !important;
    }
    .feature-card h4 {
        font-size: 10px !important;
    }
}
/* ==========================================================================
   スタジオアクセスセクション（最寄り駅特化版）
   ========================================================================== */
.access-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.access-station-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #111111;
    border: 1px solid #222222;
    padding: 30px 50px;
    gap: 30px;
    text-align: left;
    transition: border-color 0.3s;
    width: 100%;
    max-width: 600px;
    margin-bottom: 30px;
}

.access-station-card:hover {
    border-color: #c9a063; /* ゴールドの枠線 */
}

.station-icon {
    font-size: 36px;
    color: #c9a063;
    flex-shrink: 0;
}

.access-station-card h4 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #888888;
    font-weight: 700;
    margin-bottom: 5px;
}

.station-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

.route-detail {
    display: block;
    color: #aaaaaa;
    font-size: 14px;
    margin-top: 5px;
}

.studio-note {
    max-width: 600px;
    margin: 0 auto;
    font-size: 13px;
    color: #888888;
    line-height: 1.8;
    text-align: left;
    display: block;
    border-top: 1px dashed #222222;
    padding-top: 20px;
}

/* スマホ用調整（画面が狭いときは縦並びに） */
@media (max-width: 600px) {
    .access-station-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
        gap: 15px;
    }
    .station-name {
        font-size: 16px;
    }
    .route-detail {
        font-size: 13px;
    }
    .studio-note {
        font-size: 12px;
        text-align: justify;
    }
}

/* --- ご提示いただいたCSS（一部追記） --- */

.contact-container {
    /* display: grid; は1カラムにするため解除します */
    display: block; 
    
    /* 横に広がりすぎないように最大幅を設定し、中央寄せにします */
    max-width: 600px; 
    margin: 0 auto;
}

.contact-box {
    background-color: #111111;
    padding: 40px;
    border: 1px solid #222222;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    /* スマホなどで画面端にピタッとくっつかないように調整 */
    width: 100%; 
}

.contact-box h3 {
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
    text-align: center; 
}

.contact-box p {
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn-block {
    display: block;
    text-align: center;
    width: 100%;
    padding: 15px 20px;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-line {
    background-color: #06C755;
    border: 1px solid #06C755; 
    color: #ffffff;
}

.btn-line:hover {
    background-color: transparent;
    color: #06C755;
}

/* フッター */
footer {
    background-color: #0d0d0d;
    padding: 80px 50px 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.footer-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-logo img {
    height: 35px;
    width: auto;
    object-fit: contain;
}

.footer-sns {
    display: flex;
    gap: 20px;
}

.footer-sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    font-size: 20px;
    color: #ffffff;
    transition: all 0.3s ease;
}

.footer-sns-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-color: transparent;
    transform: translateY(-3px);
}

.footer-sns-icon.line:hover {
    background-color: #06C755;
    border-color: #06C755;
    transform: translateY(-3px);
}

.footer-nav {
    width: 100%;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
    padding: 25px 0;
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 40px;
    flex-wrap: wrap;
}

.footer-nav ul li a {
    font-size: 13px;
    font-weight: 500;
    color: #aaaaaa;
    letter-spacing: 1px;
}

.footer-nav ul li a:hover {
    color: #ffffff;
}

.footer-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    font-size: 12px;
    color: #666666;
}

.footer-sub-links {
    display: flex;
    gap: 20px;
}

.footer-sub-links a {
    color: #666666;
}

.footer-sub-links a:hover {
    color: #aaaaaa;
}

.pagetop-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: #1a1a1a;
    border: 1px solid #2a2a2a;
    color: #888888;
    font-size: 14px;
    transition: all 0.3s;
}

.pagetop-btn:hover {
    color: #ffffff;
    border-color: #ffffff;
}

/* 1期生募集 特設キャンペーンブース */
.section-campaign {
    padding: 80px 50px;
    max-width: 1400px;
    margin: 40px auto;
    position: relative;
}

.campaign-container {
    background: linear-gradient(135deg, #161616 0%, #0a0a0a 100%);
    border: 1px solid #c9a063;
    padding: 60px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.campaign-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(201,160,99,0.05) 0%, transparent 70%);
    pointer-events: none;
}

.campaign-badges-wrap {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.campaign-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #c9a063;
    border: 1px solid #c9a063;
    padding: 4px 12px;
    text-transform: uppercase;
}

.campaign-badge.highlight {
    background-color: #c9a063;
    color: #000000;
}

.campaign-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.campaign-title span {
    font-size: 14px;
    color: #888888;
    font-weight: 600;
    letter-spacing: 4px;
}

/* スケジュールタイムライン */
.campaign-timeline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 950px;
    margin: 0 auto 35px;
}

.timeline-step {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #222222;
    padding: 20px 15px;
    position: relative;
}

/* ==========================================
   ▼ 6/9, 7/9（active）のスタイル
========================================== */
.timeline-step.active {
    border-color: #c9a063;
    background: rgba(201, 160, 99, 0.05);
}

/* 【変更】6/9, 7/9 の日付：すっきりしたゴールド文字に */
.timeline-step.active .step-date {
    font-size: 18px;
    font-weight: 800;
    color: #c9a063;
    display: block;
    margin-bottom: 5px;
    letter-spacing: 1px;
    background-color: transparent; /* 背景なし */
    padding: 0;
}

/* ==========================================
   ▼ 9/3（shining-step）のスタイル
========================================== */
.timeline-step.shining-step {
    border-color: #c9a063;
    overflow: hidden;
}

/* 【変更】9/3 の日付：座布団（背景ゴールド・黒文字）に */
.timeline-step.shining-step .step-date {
    background-color: #c9a063;
    color: #000000;
    display: inline-block;
    padding: 2px 8px;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* 9/3 のみに適用されるきらきらアニメーション */
.timeline-step.shining-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(201, 160, 99, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    animation: cardShine 3s infinite linear;
}

/* ==========================================
   ▼ その他共通パーツ
========================================== */
.step-label {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    display: block;
}

.step-sub {
    font-size: 11px;
    color: #888888;
    margin-top: 4px;
    display: block;
}

.timeline-arrow {
    color: #444444;
    font-size: 18px;
}

@keyframes cardShine {
    0% { left: -100%; }
    15% { left: 150%; }
    100% { left: 150%; }
}

.campaign-text {
    font-size: 15px;
    color: #cccccc;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto 35px;
}

.campaign-cta-wrap {
    margin-bottom: 20px;
}

.btn-campaign {
    display: inline-block;
    padding: 18px 50px;
    background: #ffffff;
    color: #000000;
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 15px;
    border: 1px solid #ffffff;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-campaign::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shine 3.5s infinite linear;
}

.btn-campaign i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.btn-campaign:hover {
    opacity: 1;
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

.btn-campaign:hover i {
    transform: translateX(5px);
}

.campaign-note {
    font-size: 12px;
    color: #666666;
}

@keyframes shine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* ==========================================================================
   【新設】入会金無料の視覚的訴求・お得感演出スタイル
   ========================================================================== */

/* 期間限定特典バッジをグラデーションで特別感アップ */
.campaign-badge.premium-highlight {
    background: linear-gradient(135deg, #d4af37 0%, #b38f43 100%);
    color: #000000;
    border: none;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.campaign-badge.premium-highlight i {
    margin-right: 4px;
}

/* 料金訴求ディスプレイの親ボックス */
.price-benefit-display {
    max-width: 550px;
    margin: 0 auto 35px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(201, 160, 99, 0.4);
    padding: 25px 20px;
    position: relative;
    border-radius: 4px;
}

/* 「1期生限定」のちいさなラベル */
.benefit-label {
    font-size: 12px;
    color: #c9a063;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* 金額を横並びにするフレキシブルボックス */
.price-flex-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

/* 共通の金額アイテム */
.price-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.price-item .p-label {
    font-size: 11px;
    color: #888888;
    margin-bottom: 4px;
    font-weight: 700;
}

/* 元の金額（打ち消し線） */
.price-item.original .p-amount {
    font-size: 28px;
    font-weight: 700;
    color: #666666;
    position: relative;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}
/* スタイリッシュにバツ線（赤ではなくあえて暗いグレーで世界観を維持）を入れる */
.price-item.original .p-amount::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 50%;
    width: calc(100% + 10px);
    height: 2px;
    background-color: #aa3333; /* 警告としての赤を少しトーンを落として配置 */
    transform: rotate(-12deg);
}
.price-item.original .p-amount span {
    font-size: 18px;
    margin-right: 2px;
}

/* 矢印エリア */
.price-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #c9a063;
    gap: 2px;
}
.price-arrow i.fa-right-long {
    font-size: 24px;
}
/* 注意を引くための小さなアイコンアニメーション */
.price-arrow .em-flash {
    font-size: 11px;
    animation: pulse 1.5s infinite;
}

/* 特典後の金額（¥0を最大強調） */
.price-item.privilege .p-label {
    color: #000000;
    background-color: #c9a063;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 10px;
}
.price-item.privilege .p-amount {
    font-size: 52px; /* 圧倒的サイズ感 */
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    text-shadow: 0 0 20px rgba(201, 160, 99, 0.6); /* ゴールドのバックライト */
    background: linear-gradient(135deg, #ffffff 50%, #c9a063 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* 文字自体を微かにゴールドグラデに */
}

/* 点滅アニメーション */
@keyframes pulse {
    0% { opacity: 0.4; }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   スマホ表示（レスポンシブ）での最適化
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .price-benefit-display {
        padding: 20px 15px;
        margin-bottom: 25px;
    }
    .price-flex-box {
        gap: 15px;
    }
    .price-item.original .p-amount {
        font-size: 20px;
    }
    .price-item.original .p-amount span {
        font-size: 14px;
    }
    .price-item.privilege .p-amount {
        font-size: 38px;
    }
    .price-arrow i.fa-right-long {
        font-size: 18px;
    }
}

/* スクロールアニメーション */
.reveal-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.215, 0.61, 0.355, 1), 
                transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.15s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.45s; }
.delay-4 { transition-delay: 0.6s; }

/* レスポンシブ（全般） */
@media (max-width: 960px) {
    .instructor-detail-container, .access-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .instructor-photo {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
    .map-placeholder {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 900px) {
    .about-container, .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* スマホ用のキャンペーンブース調整 */
.section-campaign { padding: 40px 20px; margin: 10px auto; }
.campaign-container { padding: 40px 20px; }
.campaign-title { font-size: 22px; margin-bottom: 25px; }
.campaign-timeline { flex-direction: column; gap: 10px; margin-bottom: 25px; }
.timeline-step { width: 100%; padding: 15px; }
.timeline-arrow { transform: rotate(90deg); margin: 5px 0; }
.campaign-text { font-size: 13px; }
.btn-campaign { width: 100%; padding: 16px 20px; font-size: 14px; max-width: 500px; }

@media (max-width: 768px) {
    header { 
        padding: 15px 20px; 
    }
    
    .menu-btn {
        display: flex;
    }

    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background-color: rgba(13, 13, 13, 0.98);
        border-left: 1px solid #222222;
        padding: 100px 40px 40px;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 105;
    }

    nav ul {
        flex-direction: column;
        gap: 30px;
    }

    nav ul li a {
        font-size: 16px;
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid #1a1a1a;
    }
    
    nav.is-active {
        right: 0;
    }

    .menu-btn.is-active span:nth-child(1) {
        transform: rotate(45deg) translate(2px, -2px);
    }
    .menu-btn.is-active span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.is-active span:nth-child(3) {
        transform: rotate(-45deg) translate(2px, 2px);
    }

    .hero-title { font-size: 44px; }
    .section { padding: 80px 20px; scroll-margin-top: 70px; }
    .section-title { font-size: 28px; margin-bottom: 40px; }
    .news-item { flex-direction: column; gap: 8px; }
    .news-date { width: auto; }

    /* 【修正】SP版：クラス紹介を1カラム（1枚ずつ縦並び）に変更 */
    #classes .grid-container {
        display: grid;
        grid-template-columns: 1fr; /* 1カラム（縦1列）にする */
        gap: 20px; /* カード同士の縦のすき間 */
    }
    #classes .grid-item {
        width: 100%; /* 横幅いっぱいに広げる */
        aspect-ratio: 16 / 10; /* PC版と同じきれいな比率をキープ */
    }
    
    footer { padding: 60px 20px 30px; }
    .footer-top { flex-direction: column; text-align: center; }
    .footer-nav ul { gap: 20px 30px; justify-content: center; }
    .footer-bottom { flex-direction: column-reverse; text-align: center; gap: 20px; }
    .footer-sub-links { justify-content: center; }
}

/* ==========================================================================
   モーダル (クラス詳細)
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 200; /* ヘッダーより上に配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-window {
    background-color: #111111;
    border: 1px solid #c9a063; /* アカデミーのゴールド色 */
    width: 100%;
    max-width: 600px;
    position: relative;
    padding: 50px 40px 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.is-active .modal-window {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: #888888;
    font-size: 20px;
    cursor: pointer;
    transition: color 0.3s;
}

.modal-close:hover {
    color: #ffffff;
}

/* モーダル内コンテンツ */
.modal-tag {
    font-size: 11px;
    text-transform: uppercase;
    background-color: #c9a063;
    color: #000000;
    padding: 3px 8px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.modal-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.modal-desc {
    font-size: 14px;
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 料金・詳細テーブル */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.modal-table tr {
    border-bottom: 1px solid #222222;
}

.modal-table tr:last-child {
    border-bottom: none;
}

.modal-table th, .modal-table td {
    padding: 15px 0;
    text-align: left;
}

.modal-table th {
    width: 80px;
    color: #888888;
    font-weight: 700;
}

.modal-table td {
    color: #ffffff;
    font-weight: 600;
}

.modal-table td small {
    color: #888888;
    font-weight: 400;
    margin-left: 5px;
}

/* スマホ用調整 */
@media (max-width: 500px) {
    .modal-window {
        padding: 40px 20px 30px;
    }
    .modal-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .modal-desc {
        font-size: 13px;
    }
    .modal-table th, .modal-table td {
        padding: 12px 0;
        font-size: 13px;
    }
}

/* ==========================================================================
   FAQ（よくある質問）- ゆったり広々デザイン修正版
   ========================================================================== */
.faq-container {
    max-width: 1000px; /* 横幅を1000pxに広げてキュッとなるのを防ぐ */
    margin: 0 auto;
    padding: 0 40px;   /* 左右に程よい余白を設定 */
}

.faq-item {
    border-bottom: 1px solid #222222;
    margin-bottom: 15px; /* アイテム間の隙間を少し広げる */
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: flex-start; /* 左寄せに変更 */
    align-items: center;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    padding: 32px 10px;
    cursor: pointer;
    position: relative;
    transition: color 0.3s;
    letter-spacing: 0.05em;
}

/* 質問文のテキスト部分を左側に詰め、プラスアイコンを右端に固定するための設定 */
.faq-question span:first-child {
    flex-grow: 1; /* テキスト領域を限界まで広げて左寄せを確定させる */
    padding-right: 20px; /* アイコンと被らないための余白 */
}

.faq-question:hover {
    color: #c9a063; /* ホバー時にゴールドに */
}

/* 質問の左側に「Q」のマークを付与 */
.faq-question::before {
    content: "Q.";
    color: #c9a063;
    margin-right: 16px;
    font-size: 22px; /* Qの文字を少し大きく強調 */
    font-weight: 900;
}

/* ＋・ー を表現するアイコン */
.faq-icon {
    position: relative;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 30px;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* 横線 */
.faq-icon::before {
    top: 7px;
    left: 0;
    width: 100%;
    height: 2px;
}

/* 縦線 */
.faq-icon::after {
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
}

/* 開いたときのアイコンの変化（縦線を回転させて隠すことでマイナスにする） */
.faq-item.is-open .faq-icon::after {
    transform: rotate(90deg);
    background-color: #c9a063;
}
.faq-item.is-open .faq-icon::before {
    background-color: #c9a063;
}

/* 回答のラッパー（アニメーション用） */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.faq-answer-content {
    padding: 0 10px 35px 44px; /* Q(22px)+余白に合わせた美しいインデント */
    font-size: 15px; /* 回答も少しだけ大きく */
    color: #cccccc;
    line-height: 1.9; /* 行間を広げて読みやすく */
    letter-spacing: 0.03em;
}

/* ==========================================================================
   スマホ・タブレット用調整（画面が狭いときは自動で最適化）
   ========================================================================== */
@media (max-width: 1024px) {
    .faq-container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    .faq-question {
        font-size: 15px;
        padding: 24px 5px;
    }
    .faq-question::before {
        font-size: 18px;
        margin-right: 10px;
    }
    .faq-answer-content {
        font-size: 13px;
        padding: 0 5px 24px 30px;
        line-height: 1.7;
    }
    .faq-icon {
        width: 12px;
        height: 12px;
        margin-left: 15px;
    }
    .faq-icon::before { top: 5px; }
    .faq-icon::after { left: 5px; }
}

/* ==========================================================================
   Studio About - 4つの強み (Features)
   ========================================================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 80px; /* アバウト文章との間隔 */
}

.feature-card {
    background-color: #0b0b0b;
    border: 1px solid #222222;
    padding: 40px 30px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    border-color: #c9a063;
    transform: translateY(-5px);
    background-color: #111111;
}

.feature-icon-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.feature-icon-wrap i {
    font-size: 28px;
    color: #c9a063; /* ブランドカラーのゴールド */
}

.feature-number {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #444444;
    letter-spacing: 1px;
}

.feature-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.feature-card p {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.7;
}

/* ==========================================================================
   4つの強み - レスポンシブ対応
   ========================================================================== */
@media (max-width: 1100px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* タブレットサイズでは2列2行に */
        gap: 20px;
        margin-top: 60px;
    }
}

@media (max-width: 650px) {
    .features-grid {
        grid-template-columns: 1fr; /* スマホサイズでは縦に1列並び */
        margin-top: 50px;
    }
    .feature-card {
        padding: 35px 25px;
    }
}

/* ==========================================================================
   モーダル内：練習生クラス専用スケジュールデザイン
   ========================================================================== */
.modal-schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* スケジュール同士の隙間 */
    padding: 4px 0;
}

.modal-schedule-item {
    display: flex;
    align-items: center;
    background-color: transparent; /* ボックスの背景を無くしてさらにスッキリ */
    padding: 12px 0;               /* 上下に少し余白を */
    border-bottom: 1px solid #222222; /* 目立たない細い下線で区切る */
    gap: 15px;
}

/* 一番下のアイテムだけ下線を消して綺麗に見せる */
.modal-schedule-item:last-child {
    border-bottom: none;
}

.modal-schedule-item .day-badge {
    font-size: 11px;
    font-weight: 800;
    background-color: #333333; /* 落ち着いたダークグレーの背景 */
    color: #ffffff;           /* 文字は白 */
    padding: 2px 6px;
    border-radius: 2px;
    text-align: center;
    min-width: 42px;
}

.modal-schedule-item .time-text {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.modal-schedule-item .class-name {
    font-size: 13px;
    color: #aaaaaa;
    font-weight: 500;
    margin-left: auto; /* クラス名だけ右側に寄せる */
}

/* スマホ用調整 */
@media (max-width: 500px) {
    .modal-schedule-item {
        flex-wrap: wrap; /* 横幅が狭いときは折り返す */
        gap: 8px 12px;
        padding: 12px;
    }
    .modal-schedule-item .class-name {
        margin-left: 0;
        width: 100%; /* クラス名を下段に落とす */
        color: #c9a063; /* スマホで見やすいよう少し目立たせる */
        font-size: 12px;
    }
    .modal-schedule-item .time-text {
        font-size: 13px;
    }
}

/* ==========================================================================
   体験・入会案内ページ（entry.html）専用スタイル
   ========================================================================== */

/* 背景スクロールを制限しないためのリセット（念のため） */
.entry-page-body {
    background-color: #000000;
    color: #ffffff;
}

/* 入会案内 ヒーローエリア */
.entry-hero {
    padding: 160px 20px 60px 20px;
    text-align: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
    border-bottom: 1px solid #111111;
}

.entry-hero-title-area {
    max-width: 800px;
    margin: 0 auto;
}

.entry-hero-sub {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: #c9a063;
    margin-bottom: 12px;
}

.entry-hero-main {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #ffffff;
}

/* タイムライン・フロー構造 */
.flow-section {
    padding: 80px 0;
    background-color: #000000;
}

.flow-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px;
}

/* タイムラインのセンターを通る縦線 */
.flow-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 40px;
    bottom: 120px;
    width: 1px;
    background: linear-gradient(to bottom, #c9a063 0%, #222222 100%);
    transform: translateX(-50%);
}

/* 各ステップの共通配置 */
.flow-step {
    position: relative;
    margin-bottom: 70px;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* 奇数は左寄せ */
}

.flow-step:nth-child(even) {
    justify-content: flex-end; /* 偶数は右寄せ */
}

/* 中央配置のステップ番号バッジ */
.flow-badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    background-color: #000000;
    border: 1px solid #c9a063;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    color: #c9a063;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

/* ステップカードのコンテンツ領域 */
.flow-content {
    width: 44%;
    background-color: #0b0b0b;
    border: 1px solid #1c1c1c;
    padding: 30px;
    position: relative;
    transition: border-color 0.3s, transform 0.3s;
}

.flow-content:hover {
    border-color: #c9a063;
}

/* カードのタイトル */
.step-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.05em;
}

.step-title .step-icon {
    color: #c9a063;
    font-size: 14px;
}

.step-title .step-icon-line {
    color: #06C755; /* LINE特有のグリーン */
    font-size: 16px;
}

/* 説明テキスト */
.step-text {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.75;
    text-align: justify;
}

/* 特設LINE誘導ボタン */
.line-btn-wrap {
    margin-top: 20px;
}

.line-direct-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #06C755;
    color: #ffffff !important;
    padding: 12px 15px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.05em;
    transition: background-color 0.3s, transform 0.3s;
    width: 100%;
}

.line-direct-btn:hover {
    background-color: #05b34c;
    opacity: 1 !important;
    transform: translateY(-2px);
}

.line-direct-btn i {
    font-size: 16px;
}

/* 9/1 スタートのゴールエリア */
.flow-goal {
    text-align: center;
    position: relative;
    z-index: 5;
    margin-top: 60px;
    padding: 50px 20px;
    background: radial-gradient(circle, rgba(201,160,99,0.08) 0%, rgba(0,0,0,0) 70%);
}

.goal-date {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #c9a063;
    letter-spacing: 0.05em;
    line-height: 1;
    margin-bottom: 15px;
    text-shadow: 0 0 20px rgba(201, 160, 99, 0.2);
}

.goal-date span {
    font-size: 20px;
    font-weight: 700;
    margin-left: 5px;
}

.goal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.1em;
    margin-bottom: 18px;
}

.goal-text {
    max-width: 520px;
    margin: 0 auto;
    font-size: 13px;
    color: #cccccc;
    line-height: 1.8;
}

/* バックホームボタン */
.back-to-home {
    text-align: center;
    margin-top: 40px;
}

.back-btn {
    font-size: 12px;
    color: #888888;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-btn:hover {
    color: #c9a063;
    opacity: 1;
}

/* ==========================================================================
   entry.html 専用レスポンシブ（スマホ対応）
   ========================================================================== */
@media (max-width: 768px) {
    /* 縦線を左側に寄せる */
    .flow-container::before {
        left: 20px;
        transform: none;
        bottom: 140px;
    }
    
    /* 番号バッジを左側の線上に重ねる */
    .flow-badge {
        left: 20px;
        transform: translateX(-50%);
        width: 38px;
        height: 38px;
        font-size: 11px;
    }
    
    /* 奇数・偶数関係なくすべてのカードを右側に寄せて横幅いっぱいにする */
    .flow-step, 
    .flow-step:nth-child(even) {
        justify-content: flex-end;
        margin-bottom: 45px;
    }
    
    .flow-content {
        width: calc(100% - 45px);
        padding: 25px 20px;
    }
    
    .entry-hero {
        padding: 130px 20px 40px 20px;
    }
    
    .entry-hero-main {
        font-size: 22px;
    }
    
    .goal-date {
        font-size: 36px;
    }
    
    .goal-title {
        font-size: 17px;
        line-height: 1.4;
    }
}

/* ==========================================================================
   ニュース個別ページ用追加スタイル (News Detail Page 改訂版)
   ========================================================================== */
/* メインエリア全体の縦位置調整（ヘッダー分の高さをしっかり確保） */
.news-detail-section {
    padding-top: 160px; /* 固定ヘッダーの下に綺麗に配置される余白 */
    padding-bottom: 120px;
    background-color: #000000;
}

.news-detail-container {
    max-width: 840px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 記事全体を包む高級感のあるダークグレーのカード */
.news-article-card {
    background-color: #0b0b0b;
    border: 1px solid #1a1a1a;
    padding: 50px 40px;
}

/* 記事ヘッダー */
.article-header {
    border-bottom: 1px solid #222222;
    padding-bottom: 25px;
    margin-bottom: 40px;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.article-date {
    font-size: 14px;
    color: #888888;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.article-badge {
    background-color: #222222;
    font-size: 11px;
    padding: 3px 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
}

.article-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: #ffffff;
}

/* 記事本文 */
.article-body {
    font-size: 15px;
    line-height: 1.9;
    color: #cccccc;
}

.article-body p {
    margin-bottom: 25px;
}

.article-body strong {
    color: #ffffff;
    font-weight: 700;
}

/* 本文内の中見出し（スクールのアクセントゴールドを使用） */
.article-body h2 {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin: 50px 0 20px;
    padding-left: 15px;
    border-left: 4px solid #c9a063;
    letter-spacing: 0.05em;
}

/* 本文内のスケジュールなどのリスト */
.article-body ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 35px;
    background-color: #121212;
    border: 1px solid #222222;
    padding: 20px 25px;
}

.article-body ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 12px;
    font-size: 14px;
}

.article-body ul li:last-child {
    margin-bottom: 0;
}

.article-body ul li::before {
    content: "■";
    position: absolute;
    left: 0;
    color: #c9a063;
    font-size: 10px;
    top: 1px;
}

/* 注目キャンペーンボックス */
.highlight-box {
    background: linear-gradient(135deg, #161616 0%, #0d0d0d 100%);
    border: 1px solid #c9a063;
    padding: 25px 30px;
    margin: 35px 0;
}

.highlight-box h3 {
    font-size: 15px;
    font-weight: 700;
    color: #c9a063;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.highlight-box p {
    margin-bottom: 0;
    font-size: 14px;
    color: #dddddd;
}

/* 記事フッター */
.article-footer {
    margin-top: 60px;
    border-top: 1px solid #222222;
    padding-top: 40px;
}

.cta-action-wrap {
    text-align: center;
    margin-bottom: 40px;
}

.cta-action-wrap .btn {
    background-color: transparent;
    border-color: #ffffff;
    min-width: 280px;
}

.cta-action-wrap .btn:hover {
    background-color: #ffffff;
    color: #000000;
}

/* NEWS一覧に戻るリンク */
.back-to-home {
    text-align: center;
}

.back-btn {
    font-size: 12px;
    color: #888888;
    letter-spacing: 0.1em;
    transition: color 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.back-btn:hover {
    color: #c9a063;
    opacity: 1;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */
@media (max-width: 768px) {
    .news-detail-section {
        padding-top: 120px;
        padding-bottom: 70px;
    }
    
    .news-article-card {
        padding: 30px 20px;
    }
    
    .article-title {
        font-size: 21px;
    }
    
    .article-body h2 {
        font-size: 17px;
        margin: 40px 0 15px;
    }
}

/* ==========================================================================
   追加：インストラクター2名対応グリッド＆モーダル
   ========================================================================== */

/* 講師2名を横並びにするグリッド */
.instructor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.instructor-card {
    background-color: #111111;
    border: 1px solid #222222;
    transition: border-color 0.3s, transform 0.3s;
    overflow: hidden;
}

.instructor-card:hover {
    border-color: #c9a063;
    transform: translateY(-5px);
}

.instructor-card-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background-color: #222222;
}

.instructor-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.instructor-card:hover .instructor-card-photo img {
    transform: scale(1.03);
}

.instructor-card-info {
    padding: 25px;
    position: relative;
}

.card-role {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888888;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.card-name-ja {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 2px;
    color: #ffffff;
}

.card-name-en {
    font-size: 13px;
    font-weight: 600;
    color: #aaaaaa;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.view-more-btn {
    font-size: 12px;
    font-weight: 700;
    color: #c9a063;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* インストラクター用モーダルの基本構造 */
.ins-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    padding: 20px;
}

.ins-modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ins-modal-window {
    background-color: #0d0d0d;
    border: 1px solid #222222;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ins-modal-overlay.is-active .ins-modal-window {
    transform: translateY(0);
}

.ins-modal-content {
    padding: 60px 50px;
}

/* モーダルの閉じるボタン */
.ins-modal-close {
    position: fixed; /* 画面に対して固定 */
    top: 20px;       /* 画面上部からの距離 */
    right: 20px;     /* 画面右側からの距離 */
    z-index: 1010;   /* モーダルウインドウより手前に表示されるよう高い数値を指定 */
    
    /* 以下、見た目の装飾（必要に応じて調整してください） */
    background: rgba(0, 0, 0, 0.5); /* 背景を少し暗くして視認性を上げる */
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: background 0.3s;
}

.ins-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* スマホ・タブレット用レスポンシブ調整 */
@media (max-width: 768px) {
    /* 【修正】スマホ（SP）では1カラム（縦1列）に切り替え */
    .instructor-grid {
        grid-template-columns: 1fr;
        gap: 30px; /* カード同士の間隔を適度にあける */
        padding: 0 15px;
    }
    
    /* 縦長になりすぎないよう最大幅を制限して中央に配置 */
    .instructor-card {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }

    /* スマホ用にカード内のテキストサイズやパディングを微調整 */
    .instructor-card-info {
        padding: 20px 15px;
    }
    
    .card-role {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }
    
    .card-name-ja {
        font-size: 20px;
        margin-bottom: 2px;
    }
    
    .card-name-en {
        font-size: 11px;
        margin-bottom: 15px;
    }
    
    .view-more-btn {
        font-size: 11px;
        gap: 4px;
    }
    
    /* モーダルの中身（詳細）はスマホで見やすいように縦並びのままにします */
    .ins-modal-content {
        padding: 40px 20px;
    }
    
    .ins-modal-content .instructor-detail-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .ins-modal-content .instructor-photo {
        max-width: 260px;
        margin: 0 auto;
    }
}

/* さらに画面が小さいスマホ（横幅360px以下など）向けの微調整 */
@media (max-width: 360px) {
    .card-name-ja {
        font-size: 14px;
    }
    .card-name-en {
        font-size: 9px;
    }

    
}

/* ==========================================================================
   追加：KV（キービジュアル）専用のプレミアム・フェードインアニメーション
   ========================================================================== */

/* ページ読み込み時に最初から起動させるクラス */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(25px);
    animation: kvFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ロゴが最初（0秒後）、テキストが少し遅れて（0.4秒後）発火するように時間差を設定 */
.delay-text {
    animation-delay: 0.4s;
}

/* サブテキストやボタンもスクロールを待たずにKV演出として滑らかに出現 */
.hero-content .delay-3 {
    animation: kvFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

.hero-content .delay-4 {
    animation: kvFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.1s;
    opacity: 0;
}

/* ふわっと浮かび上がりながらクッキリ見せるイージングアニメーション */
@keyframes kvFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
        filter: blur(4px); /* 映画のオープニングのようなボカシからの出現演出 */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* ==========================================================================
   【枠なし・極上モダン】上下ゴールドラインの洗練された告知ディスプレイ（調整版）
   ========================================================================== */

/* 告知全体のコンテナ：四角いボタン感を完全に排除 */
.hero-content .announcement-display,
.hero .hero-content .announcement-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0 !important; /* 上下の線の間の空気感を少し広げました */
    min-width: 320px;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    cursor: default !important;
    opacity: 1 !important;
}

/* 【ココを調整！】上下の極細ゴールドラインの長さを拡張 */
.hero-content .announcement-display::before,
.hero-content .announcement-display::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 280px; /* 【変更】180pxから280pxに伸ばし、よりワイドでスタイリッシュに！ */
    height: 1px;  /* 繊細なヘアライン */
    background: linear-gradient(90deg, transparent, #c9a063, transparent); /* 中央が光るゴールドグラデーション */
}

.hero-content .announcement-display::before {
    top: 0;
}

.hero-content .announcement-display::after {
    bottom: 0;
}

/* 上段のテキスト：「7/4〜 プレオープン」 */
.hero-content .announcement-display .announce-sub {
    color: #c9a063 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    margin-bottom: 8px !important;
    text-transform: uppercase;
    text-indent: 4px;
}

/* 下段のテキスト：「無料体験レッスン受付中」 */
.hero-content .announcement-display .announce-main {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
}

/* ホバー時の挙動（変化なしをキープ） */
.hero-content .announcement-display:hover,
.hero .hero-content .announcement-display:hover {
    background: none !important;
    transform: none !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   スマホ表示（レスポンシブ）での最適化
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-content .announcement-display::before,
    .hero-content .announcement-display::after {
        width: 220px; /* スマホ画面でも窮屈にならない最適な長さに調整 */
    }
    .hero-content .announcement-display .announce-sub {
        font-size: 11px !important;
        letter-spacing: 3px !important;
        margin-bottom: 6px !important;
    }
    .hero-content .announcement-display .announce-main {
        font-size: 16px !important;
        letter-spacing: 1px !important;
    }
}

/* 【ココを調整！】KVの最後にフワッと出てくる位置の指定＆リード文との間の余白を設定 */
.hero-content .hero-btn-wrap.reveal-fade-up.delay-4 {
    margin-top: 45px; /* 【変更】35pxから45pxに広げ、上の文章との間に美しいマージンを確保 */
    animation: kvFadeInUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.1s;
    opacity: 0;
}

/* ==========================================================================
   【追加】ラグジュアリーな公式LINE体験予約ボタン（余白微調整版）
   ========================================================================== */

/* LINEボタン本体のデザイン */
.hero-content .btn-line-reserve,
.hero .hero-content .btn-line-reserve {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #06c755 0%, #05a848 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    padding: 16px 35px !important;
    border-radius: 50px !important;
    
    /* 【ココを調整！】ゴールドライン告知との間の余白を30pxから42pxへ拡大 */
    margin-top: 42px !important; 
    
    min-width: 320px;
    box-shadow: 0 4px 15px rgba(6, 199, 85, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

/* LINEアイコンのサイズアップ */
.hero-content .btn-line-reserve i {
    font-size: 22px !important;
    color: #ffffff !important;
}

/* LINEボタンのホバー演出 */
.hero-content .btn-line-reserve:hover,
.hero .hero-content .btn-line-reserve:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(6, 199, 85, 0.5) !important;
    filter: brightness(1.08);
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   スマホ表示（レスポンシブ）での最適化
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .hero-content .btn-line-reserve,
    .hero .hero-content .btn-line-reserve {
        min-width: 280px;
        padding: 13px 25px !important;
        font-size: 14px !important;
        
        /* 【ココを調整！】スマホ画面でも窮屈にならないよう25pxから32pxへ拡大 */
        margin-top: 32px !important;
    }
    .hero-content .btn-line-reserve i {
        font-size: 19px !important;
    }
}

/* ==========================================================================
   【視認性重視・コンパクト】PRICE セクションスタイル
   ========================================================================== */
.price-container {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 導入リード（落ち着いたトーン） */
.price-minimal-lead {
    text-align: center;
    margin-bottom: 40px;
}

.price-minimal-lead p {
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.price-minimal-lead .price-sub-statement {
    font-size: 13px;
    color: #888888;
    font-weight: 400;
}

/* 2カラムのコンパクトなグリッドレイアウト（スクロール量を抑える） */
.price-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* 各クラスのカードスタイル：情報をすっきり3段構造に分ける */
.p-compact-card {
    background: #090909;
    border: 1px solid #161616;
    padding: 25px 30px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px; /* 高さを揃えて見やすく */
}

/* 1段目：クラス名 */
.p-card-header {
    margin-bottom: 12px;
}

.p-card-category {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #666666;
    font-weight: 700;
    display: block;
    margin-bottom: 4px;
}

.p-card-name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

/* 2段目：時間・詳細 */
.p-card-body {
    margin-bottom: 16px;
}

.p-card-time {
    font-size: 13px;
    color: #cccccc;
    margin-bottom: 3px;
}

.p-card-tags {
    font-size: 11px;
    color: #666666;
}

/* 3段目：金額・換算 */
.p-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #131313;
    padding-top: 14px;
}

.p-card-price {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

.p-card-price small {
    font-size: 11px;
    color: #666666;
    font-weight: 500;
}

.p-card-calc {
    font-size: 11px;
    color: #888888;
    font-weight: 500;
}

/* 【強調】練習生クラス：ギラギラさせず、静かにゴールドをあしらう */
.p-card-featured {
    border-color: rgba(201, 160, 99, 0.3);
    background: linear-gradient(135deg, #0d0d0d 0%, #090909 100%);
}

.featured-color {
    color: #c9a063 !important;
}

.featured-calc {
    color: #bfa276;
    font-weight: 600;
}

/* 【未定】ダンス特化クラス：目立たないように明度を下げる */
.p-card-disabled {
    opacity: 0.5;
    border-style: dashed;
}

.opacity-dim {
    color: #555555;
}

/* 下部注意書き */
.price-minimal-note {
    font-size: 11px;
    color: #555555;
    line-height: 1.7;
    text-align: center;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   レスポンス対応（スマホ表示時は1カラムにして縦にすっきり並べる）
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {
    .price-compact-grid {
        grid-template-columns: 1fr; /* スマホ・タブレットは1列 */
        gap: 15px;
    }
    
    .p-compact-card {
        padding: 20px 25px;
        min-height: auto;
    }
    
    .price-minimal-lead p {
        font-size: 14px;
        text-align: left;
    }
    
    .price-minimal-lead .price-sub-statement {
        font-size: 12px;
    }
    
    .price-minimal-note {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .p-card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* ==========================================================================
   PRICE セクション（新規追加）
   ========================================================================== */
.price-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr; /* 左側（理由）を少し広めに割り当て */
    gap: 60px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 左側：選ばれる理由 */
.price-reason-box {
    padding-right: 20px;
}

.reason-heading {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.reason-sub {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #c9a063;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}

.reason-lead {
    font-size: 14px;
    color: #aaaaaa;
    line-height: 1.8;
    margin-bottom: 40px;
}

.reason-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.reason-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.reason-number {
    font-size: 24px;
    font-weight: 900;
    color: #c9a063;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    line-height: 1;
    border-bottom: 2px solid #c9a063;
    padding-bottom: 4px;
}

.reason-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 8px;
    line-height: 1.4;
}

.reason-content p {
    font-size: 13px;
    color: #888888;
    line-height: 1.6;
}

/* 右側：料金カードレイアウト */
.price-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.price-card {
    background-color: #111111;
    border: 1px solid #222222;
    padding: 35px 30px;
    border-radius: 4px;
    position: relative;
    transition: transform 0.3s, border-color 0.3s;
}

.price-card:hover {
    transform: translateY(-3px);
    border-color: #444444;
}

/* アーティスト育成クラスを目立たせる（静かにゴールドをあしらう仕様） */
.price-card.featured-card {
    border-color: rgba(201, 160, 99, 0.4);
    background: linear-gradient(135deg, #0f0f0f 0%, #070707 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.price-card.featured-card:hover {
    border-color: #c9a063;
}

.card-badge {
    position: absolute;
    top: -12px;
    right: 25px;
    background-color: #c9a063;
    color: #000000;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    letter-spacing: 1px;
    border-radius: 2px;
}

.card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #888888;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.featured-card .card-tag {
    color: #c9a063;
}

.card-class-name {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

/* メインの金額表示 */
.card-main-price {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
}

.card-main-price .currency {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-right: 4px;
}

.card-main-price .amount {
    font-size: 38px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
    line-height: 1;
}

.card-main-price .period {
    font-size: 13px;
    color: #888888;
    margin-left: 6px;
}

/* 1回あたりの料金換算エリア */
.card-calc-box {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px dashed #222222;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.featured-card .card-calc-box {
    background-color: rgba(201, 160, 99, 0.02);
    border-color: rgba(201, 160, 99, 0.15);
}

.calc-label {
    font-size: 11px;
    color: #666666;
    font-weight: 500;
}

.calc-price {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.featured-card .calc-price {
    color: #c9a063;
}

.calc-note {
    font-size: 11px;
    color: #666666;
}

/* カード内の含まれるサービス箇条書き */
.card-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #222222;
    padding-top: 20px;
}

.card-features li {
    font-size: 12px;
    color: #aaaaaa;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-features li i {
    color: #666666;
    font-size: 11px;
}

.featured-card .card-features li i {
    color: #c9a063;
}

/* 下部注意書き */
.price-bottom-note {
    font-size: 12px;
    color: #555555;
    line-height: 1.8;
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
    text-align: left;
}

/* ==========================================================================
   PRICE セクション レスポンシブ対応
   ========================================================================== */
@media (max-width: 992px) {
    .price-container {
        grid-template-columns: 1fr; /* タブレット以下は1カラムにして縦並びに */
        gap: 50px;
    }
    .price-reason-box {
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .reason-heading {
        font-size: 24px;
    }
    .price-card {
        padding: 30px 20px;
    }
    .card-main-price .amount {
        font-size: 32px;
    }
    .sp-only {
        display: block;
    }
}

/* ==========================================================================
   PRICE（料金プラン）セクションの修正スタイル
   ========================================================================== */

/* カード全体を包むコンテナ（PC時は3カラムで横並び） */
.price-cards-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    align-items: start;
}

/* 料金カードの基本デザイン */
.price-card {
    background-color: #111111;
    border: 1px solid #222222;
    padding: 40px 30px;
    border-radius: 4px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s, transform 0.3s;
}

.price-card:hover {
    border-color: #ffffff;
    transform: translateY(-5px);
}

/* おすすめバッジ（RECOMMEND） */
.card-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #d4af37 0%, #b38f43 100%);
    color: #000000;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 15px;
    letter-spacing: 1px;
    border-radius: 2px;
}

/* カード内の各テキスト要素 */
.card-tag {
    font-size: 11px;
    color: #c9a063;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
}

.card-class-name {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #ffffff;
}

/* 料金表示部分 */
.card-main-price {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    border-bottom: 1px solid #222222;
    padding-bottom: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: baseline;
}

.card-main-price .currency {
    font-size: 20px;
    margin-right: 4px;
}

.card-main-price .period {
    font-size: 14px;
    color: #888888;
    margin-left: 6px;
    font-weight: 500;
}

/* 1回あたり換算のボックス */
.card-calc-box {
    background-color: rgba(255, 255, 255, 0.02);
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 12px;
}

.calc-label {
    color: #888888;
    margin-right: 8px;
}

.calc-price {
    color: #c9a063;
    font-weight: 700;
}

.calc-note {
    color: #666666;
    display: block;
    margin-top: 2px;
    font-size: 11px;
}

/* 特徴リスト（チェックマーク付き） */
.card-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.card-features li {
    font-size: 13px;
    color: #cccccc;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
}

.card-features li i {
    color: #c9a063;
    margin-right: 10px;
    margin-top: 3px;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   PRICEセクション：レスポンシブ対応（スマホ・タブレット表示）
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    .price-cards-wrap {
        grid-template-columns: repeat(2, 1fr); /* タブレット時は2カラム */
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .price-cards-wrap {
        grid-template-columns: 1fr; /* スマホ時は1カラム（縦並び） */
        gap: 25px;
    }
    .price-card {
        padding: 35px 20px;
    }
}

/* PC版の横幅をグッと広げて開放感を出す */
.price-cards-wrap.mini-version {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px; /* 少し広げてスタイリッシュに */
    max-width: 1200px; /* 1000pxから1200pxへ拡張 */
    margin: 0 auto;
    padding: 30px 15px;
}

/* 赤をなくし、漆黒に溶け込む高級感のあるモノトーンデザインへ */
.price-card.mini {
    position: relative;
    background: rgba(20, 20, 22, 0.6); /* 既存の真っ黒背景に綺麗に重なるシースルーブラック */
    border: 1px solid rgba(255, 255, 255, 0.08); /* ギラつかない極薄の白ボーダー */
    border-radius: 10px;
    padding: 24px 15px;
    text-align: center;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

/* ホバー時に少しだけ枠線が明るくなり、奥から浮き上がる演出 */
.price-card.mini:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(30, 30, 35, 0.8);
}

/* 1回あたりの料金部分も、赤から上品なシルバー（淡いグレー）に変更 */
.price-card.mini .card-calc-box {
    font-size: 12px;
    color: #cccccc; /* 落ち着いたトーン */
    font-weight: 500;
    margin-top: 4px;
}

/* ==========================================================================
   PRICEセクション：ミニマル・ダーク版（PC3列・スマホ2列対応）
   ========================================================================== */

/* PC版：横幅1200pxマックスの快適な3列レイアウト */
.price-cards-wrap.mini-version {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* カード単体のスタイル（モノトーン・ダークデザイン） */
.price-card.mini {
    position: relative !important;
    background: rgba(20, 20, 22, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 24px 15px !important;
    text-align: center !important;
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.price-card.mini:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(30, 30, 35, 0.8) !important;
}

/* クラス名タイトル */
.price-card.mini .card-class-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: 0.5px !important;
}

/* メイン価格 */
.price-card.mini .card-main-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}

.price-card.mini .period {
    font-size: 12px !important;
    color: #a0a0a5 !important;
    font-weight: normal !important;
}

/* 1回あたり換算ボックス（上品なシルバーグレー） */
.price-card.mini .card-calc-box {
    font-size: 12px !important;
    color: #cccccc !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
}

.price-card.mini .calc-note {
    font-size: 11px !important;
    color: #a0a0a5 !important;
}

/* 【超重要】スマートフォン表示（画面幅767px以下）で確実に2カラムにする設定 */
@media screen and (max-width: 767px) {
    .price-cards-wrap.mini-version {
        grid-template-columns: repeat(2, 1fr) !important; /* 強制的に2列に並べる */
        gap: 10px !important; /* スマホ用に隙間をタイトに */
        padding: 20px 10px !important;
    }
    
    .price-card.mini {
        padding: 16px 8px !important; /* 2列でもはみ出さないように左右の余白を小さく */
        border-radius: 8px !important;
    }

    .price-card.mini .card-class-name {
        font-size: 13px !important; /* 文字が溢れて見切れるのを防ぐために小さく調整 */
        margin-bottom: 8px !important;
        white-space: normal !important; /* 長い名前でも改行して枠内に収める */
        word-break: break-all !important;
    }

    .price-card.mini .card-main-price {
        font-size: 16px !important; /* 金額を見切れないサイズに */
    }

    .price-card.mini .period {
        font-size: 10px !important;
    }

    .price-card.mini .card-calc-box {
        font-size: 11px !important;
    }

    .price-card.mini .calc-note {
        font-size: 9px !important;
    }
}


/* ==========================================================================
   PRICEセクション：ミニマル・ダーク版（完全中央揃え・PC3列・スマホ2列対応）
   ========================================================================== */

/* PC版：横幅1200pxマックスの快適な3列レイアウト */
.price-cards-wrap.mini-version {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* カード単体のスタイル（中央揃え・モノトーン・ダークデザイン） */
.price-card.mini {
    position: relative !important;
    background: rgba(20, 20, 22, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 24px 15px !important;
    text-align: center !important; /* すべての内容を中央揃え */
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    
    /* 中身のブロック要素も中央に寄せる設定 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.price-card.mini:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(30, 30, 35, 0.8) !important;
}

/* クラス名タイトル */
.price-card.mini .card-class-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    width: 100% !important;
}

/* 金額を囲むグループ */
.price-card.mini .card-price-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* メイン価格 */
.price-card.mini .card-main-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    display: inline-block !important;
}

.price-card.mini .period {
    font-size: 12px !important;
    color: #a0a0a5 !important;
    font-weight: normal !important;
    display: inline-block !important;
}

/* 1回あたり換算ボックス（上品なシルバーグレー） */
.price-card.mini .card-calc-box {
    font-size: 12px !important;
    color: #cccccc !important;
    font-weight: 500 !important;
    margin-top: 4px !important;
    text-align: center !important;
    width: 100% !important;
}

.price-card.mini .calc-note {
    font-size: 11px !important;
    color: #a0a0a5 !important;
}

/* スマートフォン表示（画面幅767px以下）で確実に2カラム＆中央揃え */
@media screen and (max-width: 767px) {
    .price-cards-wrap.mini-version {
        grid-template-columns: repeat(2, 1fr) !important; /* 強制的に2列に並べる */
        gap: 10px !important;
        padding: 20px 10px !important;
    }
    
    .price-card.mini {
        padding: 16px 6px !important;
        border-radius: 8px !important;
    }

    .price-card.mini .card-class-name {
        font-size: 13px !important;
        margin-bottom: 8px !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    .price-card.mini .card-main-price {
        font-size: 16px !important;
    }

    .price-card.mini .period {
        font-size: 10px !important;
    }

    .price-card.mini .card-calc-box {
        font-size: 11px !important;
    }

    .price-card.mini .calc-note {
        font-size: 9px !important;
    }
}

/* ==========================================================================
   PRICEセクション：ミニマル・ダーク版（高さ均一化・完全中央揃え・余白最適化）
   ========================================================================== */

/* PC版：横幅1200pxマックスの快適な3列レイアウト */
.price-cards-wrap.mini-version {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 15px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* 横に並ぶカードの縦幅（高さ）を自動的に一番高いものに揃える設定 */
    align-items: stretch !important; 
}

/* カード単体のスタイル（無駄な余白を削り、すべての要素を完全に中央寄せ） */
.price-card.mini {
    position: relative !important;
    background: rgba(20, 20, 22, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    /* 上下の内側余白をさらに詰め、無駄な間伸びをシャットアウト */
    padding: 20px 12px !important; 
    backdrop-filter: blur(8px) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    
    /* 縦幅が伸びても、中身のコンテンツを常に上下左右中央に配置する設定 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    height: 100% !important; /* グリッドの高さいっぱいに広げる */
}

.price-card.mini:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(30, 30, 35, 0.8) !important;
}

/* クラス名タイトル */
.price-card.mini .card-class-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 10px 0 !important; /* タイトル下の隙間をスタイリッシュに微調整 */
    letter-spacing: 0.5px !important;
    text-align: center !important;
    width: 100% !important;
}

/* 金額エリアのグループコンテナ（真ん中寄せ） */
.price-card.mini .card-price-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important; /* 余分な外側マージンを排除 */
}

/* メイン価格（中央寄せ） */
.price-card.mini .card-main-price {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    margin: 0 auto 6px auto !important; /* 左右をautoにして強制センター */
    text-align: center !important;
    display: block !important;
}

.price-card.mini .period {
    font-size: 12px !important;
    color: #a0a0a5 !important;
    font-weight: normal !important;
}

/* 「1回あたり〜」の記載（完全な中央揃えの徹底・下部余白のカット） */
.price-card.mini .card-calc-box {
    font-size: 12px !important;
    color: #cccccc !important;
    font-weight: 500 !important;
    /* 左右を親要素に対して確実に真ん中に寄せるための設定 */
    margin: 2px auto 0 auto !important; 
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important; /* スマホで文字が折り返しても崩れないように */
}

.price-card.mini .calc-note {
    font-size: 11px !important;
    color: #a0a0a5 !important;
    margin-left: 3px !important; /* 金額との間にほんの少しだけ隙間を空ける */
}

/* スマートフォン表示（画面幅767px以下） */
@media screen and (max-width: 767px) {
    .price-cards-wrap.mini-version {
        grid-template-columns: repeat(2, 1fr) !important; /* 2列並びを維持 */
        gap: 10px !important;
        padding: 15px 10px !important;
        /* スマホでも並んだ左右のカードの縦幅を完全に揃える */
        align-items: stretch !important; 
    }
    
    .price-card.mini {
        /* スマホ用：内側の上下余白をさらに詰め、下のダボつきを完全にリセット */
        padding: 14px 6px !important; 
        border-radius: 8px !important;
    }

    .price-card.mini .card-class-name {
        font-size: 12px !important; /* 2列でも文字が溢れないサイズ */
        margin-bottom: 6px !important;
        white-space: normal !important;
        word-break: break-all !important;
    }

    .price-card.mini .card-main-price {
        font-size: 16px !important;
    }

    .price-card.mini .period {
        font-size: 10px !important;
    }

    .price-card.mini .card-calc-box {
        font-size: 11px !important;
    }

    .price-card.mini .calc-note {
        font-size: 9px !important;
    }
}

/* --- スケジュール微調整（追加分） --- */
.schedule-detail-notes {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 2px solid #fff;
    border-radius: 0 4px 4px 0;
}

.schedule-detail-notes p {
    font-size: 13px !important;
    color: #cccccc !important;
    line-height: 1.5;
    margin: 2px 0;
}

.schedule-detail-notes .sub-note {
    font-size: 11px !important;
    color: #a0a0a5 !important;
    margin-top: 4px;
}

/* 練習生などの文字を目立たせる */
.lesson-name.highlight {
    color: #ffffff;
    font-weight: bold;
}

/* 土曜日のお昼休憩表示 */
.break-time-info {
    display: flex;
    align-items: center;
    padding: 8px 15px !important;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    margin: 10px 0;
}

.time-break {
    font-size: 12px;
    color: #888888;
    font-family: 'Poppins', sans-serif;
    margin-right: 15px;
}

.break-text {
    font-size: 12px;
    color: #888888;
}

/* 日曜日のボックスデザイン */
.sunday-box {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sunday-content {
    padding: 25px 20px;
    text-align: center;
}

.sunday-title {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

.sunday-desc {
    font-size: 13px;
    color: #aaaaaa;
    line-height: 1.6;
}

/* スマホ表示での調整 */
@media screen and (max-width: 767px) {
    .schedule-detail-notes {
        padding: 6px 10px;
    }
    .schedule-detail-notes p {
        font-size: 12px !important;
    }
    .sunday-content {
        padding: 20px 15px;
    }
    .sunday-title {
        font-size: 15px;
    }
    .sunday-desc {
        font-size: 12px;
    }
}

/* ==========================================================================
   7つの強み（ABOUT FEATURES）PC版：配置固定（アニメーションなし）
   ========================================================================== */
.about-features-grid {
    position: relative;
    width: 600px;
    height: 600px;
    margin: 80px auto 0;
}

/* 中央のゴールドリング */
.about-features-grid::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    height: 320px;
    border: 1px solid rgba(201, 160, 99, 0.3);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* 各強みカード（PC版・配置固定表示） */
.about-features-grid .feature-card {
    position: absolute;
    width: 140px;
    height: 140px;
    background: rgba(17, 17, 17, 0.9);
    border: 1px solid rgba(201, 160, 99, 0.5);
    border-radius: 50%;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 2;
    transition: border-color 0.3s, transform 0.3s;

    /* 💡 最初から100%表示し、中央を基準に正しく配置 */
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* マウスホバー時の演出（PCのみ：ふわっと浮き上がる高級感は維持） */
@media screen and (min-width: 768px) {
    .about-features-grid .feature-card:hover {
        border-color: #c9a063;
        transform: translate(-50%, -50%) scale(1.08) !important;
        box-shadow: 0 12px 40px rgba(201, 160, 99, 0.2);
    }
}

/* PC版：各カードの円形配置座標（最初から固定） */
.about-features-grid .feature-card:nth-child(1) { top: 0%;   left: 50%; }
.about-features-grid .feature-card:nth-child(2) { top: 22%;  left: 88%; }
.about-features-grid .feature-card:nth-child(3) { top: 64%;  left: 95%; }
.about-features-grid .feature-card:nth-child(4) { top: 96%;  left: 71%; }
.about-features-grid .feature-card:nth-child(5) { top: 96%;  left: 29%; }
.about-features-grid .feature-card:nth-child(6) { top: 64%;  left: 5%;  }
.about-features-grid .feature-card:nth-child(7) { top: 22%;  left: 12%; }

/* アイコンとテキスト */
.about-features-grid .feature-icon-wrap {
    margin-bottom: 5px;
}
.about-features-grid .feature-icon-wrap i {
    font-size: 24px;
    color: #c9a063;
}
.about-features-grid .feature-card h4 {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: center;
}


/* ==========================================================================
   スマートフォン表示（画面幅767px以下）円形配置・配置固定（アニメーションなし）
   ========================================================================== */
@media screen and (max-width: 767px) {
    
    /* 1. 7つの強み全体のサークルエリア */
    .about-features-grid {
        display: block !important;
        width: 270px !important;
        height: 270px !important;
        margin: 50px auto !important;
        padding: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* 中央のゴールドの細い真円リング */
    .about-features-grid::before {
        display: block !important;
        width: 130px !important;
        height: 130px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 1 !important;
    }

    /* 2. 各強みカード共通の設定 */
    .about-features-grid .feature-card {
        position: absolute !important;
        width: 74px !important;
        height: 74px !important;
        min-height: auto !important;
        background: rgba(17, 17, 17, 0.95) !important;
        border: 1px solid rgba(201, 160, 99, 0.45) !important;
        border-radius: 12px !important;
        padding: 6px 4px !important;
        
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
        
        /* 💡 スマホ版：最初から100%表示し、中央を基準に固定配置 */
        opacity: 1 !important;
        transform: translate(-50%, -50%) scale(1) !important;
        animation: none !important;
    }

    /* スマホ版：各カードの円形配置座標（最初から固定） */
    .about-features-grid .feature-card:nth-child(1) { top: 0%; left: 50%; }
    .about-features-grid .feature-card:nth-child(2) { top: 22%; left: 89%; }
    .about-features-grid .feature-card:nth-child(3) { top: 65%; left: 96%; }
    .about-features-grid .feature-card:nth-child(4) { top: 97%; left: 72%; }
    .about-features-grid .feature-card:nth-child(5) { top: 97%; left: 28%; }
    .about-features-grid .feature-card:nth-child(6) { top: 65%; left: 4%;  }
    .about-features-grid .feature-card:nth-child(7) { top: 22%; left: 11%; }

    /* 4. 各アイコンのサイズ調整 */
    .about-features-grid .feature-icon-wrap {
        width: auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
    }
    .about-features-grid .feature-icon-wrap i {
        font-size: 13px !important;
        color: #c9a063 !important;
    }
    
    /* 5. 強みのテキスト（h4） */
    .about-features-grid .feature-card h4 {
        font-size: 8.5px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;
        letter-spacing: -0.4px !important;
        text-align: center !important;
        white-space: normal !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* 超小型スマートフォン（360px以下）の最終保険 */
@media screen and (max-width: 360px) {
    .about-features-grid { width: 230px !important; height: 230px !important; }
    .about-features-grid .feature-card { width: 66px !important; height: 66px !important; }
    .about-features-grid .feature-card h4 { font-size: 7.5px !important; }
}

/* ==========================================================================
   クラス紹介画像用のリボン装飾
   ========================================================================== */
/* リボンを画像の枠内に絶対配置するための基準を設定 */
.grid-item {
    position: relative;
    overflow: hidden; /* 画像の角丸からはみ出るリボンをカット */
}

/* リボン本体のスタイル */
.class-ribbon {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    
    /* 高級感のあるゴールドのグラデーション */
    background: linear-gradient(135deg, #d4af37 0%, #c9a063 50%, #b38f4d 100%);
    color: #000000; /* 黒文字で視認性を確保 */
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    
    /* 内側の余白と角丸 */
    padding: 5px 12px;
    
    /* 立体感と視認性を高めるシャドウ */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
    
    /* 少しだけ浮かび上がるようなアニメーションの準備 */
    transition: transform 0.3s ease, background 0.3s ease;
    pointer-events: none; /* リボン自体がクリックの邪魔をしないようにする */
}

/* カード全体がホバーされたときのリボンの連動エフェクト */
.grid-item:hover .class-ribbon {
    transform: scale(1.05) translateY(-2px);
    background: linear-gradient(135deg, #ffe082 0%, #d4af37 100%);
}

/* スマホ表示（画面幅が狭いとき）の調整 */
@media (max-width: 480px) {
    .class-ribbon {
        top: 8px;
        left: 8px;
        font-size: 10px;
        padding: 4px 8px;
    }
}

/* ==========================================================================
   モーダル最下部 公式LINE予約誘導エリア
   ========================================================================== */
.modal-line-cta {
    margin-top: 30px;
    padding: 20px;
    background: #0a0a0a;
    border: 1px solid #1f2d24; /* ほんのり緑がかったダーク境界線 */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 左側：テキストエリア */
.modal-line-cta .cta-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-line-cta .cta-sub {
    font-size: 11px;
    font-weight: 700;
    color: #c9a063; /* ゴールド */
    letter-spacing: 0.5px;
}

.modal-line-cta .cta-main {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

/* 右側：LINEボタン */
.modal-line-cta .cta-line-btn {
    background: #06c755; /* LINEグリーン */
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.25);
    opacity: 1 !important; /* グローバル設定のhoverでの不透明度を上書き */
}

/* ボタンのホバーエフェクト（少し光る感じに） */
.modal-line-cta .cta-line-btn:hover {
    background: #05b34c;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(6, 199, 85, 0.4);
}

.modal-line-cta .cta-line-btn i {
    font-size: 16px;
}

/* スマホ用のレイアウト調整（縦並びにする） */
@media (max-width: 576px) {
    .modal-line-cta {
        flex-direction: column;
        text-align: center;
        padding: 20px 15px;
        gap: 15px;
    }
    
    .modal-line-cta .cta-text-wrap {
        align-items: center;
    }
    
    .modal-line-cta .cta-main {
        font-size: 13px;
    }
    
    .modal-line-cta .cta-line-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
        font-size: 13px;
    }
}

/* ==========================================================================
   モーダル (クラス詳細) - スクロール＆閉じるボタン固定版
   ========================================================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px; /* 上下の余白を少し広げて、スクロール時に上下に空間を持たせる */
    
    /* ★追加：中身が長くなったらこの背景エリア自体をスクロールできるようにする */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
}

.modal-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

.modal-window {
    background-color: #111111;
    border: 1px solid #c9a063; /* アカデミーのゴールド色 */
    width: 100%;
    max-width: 600px;
    position: relative;
    padding: 50px 40px 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    transform: translateY(30px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* ★追加：縦長になったとき、自動的に上下中央に配置されスクロールできるようにする */
    margin: auto;
}

.modal-overlay.is-active .modal-window {
    transform: translateY(0);
}

/* ★変更：閉じるボタンを画面固定（fixed）にする */
.modal-close {
    position: fixed;
    /* モーダル枠（max-width: 600px）の右上付近に重なるよう調整 */
    top: 30px;
    right: 30px;
    
    /* 背景と重なっても見やすいよう、半透明の黒丸にして少し高級感をプラス */
    background: rgba(17, 17, 17, 0.8);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(201, 160, 99, 0.3); /* ゴールドをほんのり */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: #c9a063; /* ゴールド */
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 210; /* コンテンツよりさらに手前に表示 */
}

.modal-close:hover {
    color: #ffffff;
    border-color: #ffffff;
    transform: rotate(90deg); /* ホバー時に少し回る演出 */
}

/* モーダル内コンテンツ */
.modal-tag {
    font-size: 11px;
    text-transform: uppercase;
    background-color: #c9a063;
    color: #000000;
    padding: 3px 8px;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 15px;
}

.modal-title {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 25px;
    letter-spacing: 1px;
    line-height: 1.3;
}

.modal-desc {
    font-size: 14px;
    color: #cccccc;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* 料金・詳細テーブル */
.modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.modal-table tr {
    border-bottom: 1px solid #222222;
}

.modal-table tr:last-child {
    border-bottom: none;
}

.modal-table th, .modal-table td {
    padding: 15px 0;
    text-align: left;
}

.modal-table th {
    width: 80px;
    color: #888888;
    font-weight: 700;
}

.modal-table td {
    color: #ffffff;
    font-weight: 600;
}

.modal-table td small {
    color: #888888;
    font-weight: 400;
    margin-left: 5px;
}

/* スマホ用調整 */
@media (max-width: 500px) {
    .modal-overlay {
        padding: 20px 10px; /* スマホ時は画面端の余白をタイトに */
    }
    .modal-window {
        padding: 40px 20px 30px;
    }
    .modal-title {
        font-size: 20px;
        margin-bottom: 20px;
    }
    .modal-desc {
        font-size: 13px;
    }
    .modal-table th, .modal-table td {
        padding: 12px 0;
        font-size: 13px;
    }
    /* スマホ用の閉じるボタン位置微調整 */
    .modal-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* モーダル表示時に背景のスクロールを止める */
body.modal-open {
    overflow: hidden;
}

/* クラスモーダルのオーバーレイ（IDをclass-modalに変更したためクラス名等で調整） */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.is-active {
    display: flex;
}

/* モーダルの中身をスクロール可能にする重要設定 */
.modal-window {
    background-color: #111111;
    width: 100%;
    max-width: 600px;
    max-height: 90vh; /* 画面全体の90%の高さに収める */
    overflow-y: auto; /* 溢れた場合に縦スクロールバーを出す */
    padding: 40px;
    position: relative;
    border: 1px solid #222222;
}