/* =========================================================
   COMMON 共通 & 変数設定
   サイト全体で使い回す色、罫線、角丸、アニメーション速度を定義します。
   変数を変更するだけでサイト全体のデザインを一括調整できます。
========================================================= */
:root {
    --color-main: #111;
    --color-bg-white: rgba(255, 255, 255, 0.7);
    --border-light: 1px solid rgba(0, 0, 0, 0.08);
    --radius-default: 12px;
    --radius-image: 10px;
    --transition-fast: 0.3s ease;
    --section-padding-y-pc: 60px; /* PC時のセクション上下余白 */
    --section-padding-y-sp: 24px; /* SP時のセクション上下余白 */
    --section-padding-x-pc: 30px; /* PC時のセクション左右余白 */
    --section-padding-x-sp: 15px; /* SP時のセクション左右余白 */
    --page-hero-padding-y-pc: 60px; /* PC時のヒーロー上下余白 */
    --page-hero-padding-y-sp: 36px; /* SP時のヒーロー上下余白 */
}

/* 全ての要素に対して、paddingとborderを幅・高さに含める設定（レイアウト崩れを防ぐ） */
*, *::before, *::after {
    box-sizing: border-box;
}

/* 基本的な画像のレスポンシブ対応（はみ出し防止） */
/* max-width: 100% で親要素より大きくならないようにし、アスペクト比を保ちます */
img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom; /* 画像下部にできる謎の隙間を消す */
}

/* MAIN AREA (PC: サイドバー260px分の固定マージン) */
/* PC表示時のベースとなる画面全体の設定 */
body {
    font-family: "Hiragino Kaku Gothic ProN", sans-serif;
    min-height: 100vh;
    color: var(--color-main);
    padding-top: 70px; /* 上部ヘッダー用の余白 */
    margin: 0 0 0 260px; /* PC版の左サイドバー（260px）が被らないように余白を空ける */
    position: relative;
}

/* サイト全体の背景画像設定（ぼかし効果付き） */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: url("../img/age-bg.png") center/cover no-repeat;
    filter: blur(6px) brightness(1.05); /* 画像をぼかして少し明るくする */
    transform: scale(1.05); /* ぼかした時の端の余白を消すために少し拡大 */
    z-index: -2;
}

/* 背景画像の上にうっすら白を重ねて文字を見やすくするオーバーレイ */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.05);
    z-index: -1;
}

/* =========================================================
   共通コンテナ & レイアウト
   各セクションの余白と最大幅を制御する共通クラス
========================================================= */
.container,
section,
.section {
    width: 100%;
    padding-left: var(--section-padding-x-pc); /* PC時の左右余白 */
    padding-right: var(--section-padding-x-pc); /* PC時の左右余白 */
    padding-top: var(--section-padding-y-pc); /* PC時の上下余白 */
    padding-bottom: var(--section-padding-y-pc); /* PC時の上下余白 */
    margin-left: auto;
    margin-right: auto;
}

/* ページヘッダー (ページ最上部のタイトル部分) */
.page-hero {
    width: 100%;
    padding: var(--page-hero-padding-y-pc) var(--section-padding-x-pc); /* ヒーロー上下余白と左右余白 */
    margin-bottom: 10px;
    text-align: center;
    background: transparent; /* ← ここを transparent に変更（背景透過） */
    border-bottom: none(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

/* ページタイトルの大文字設定 */
.page-hero h1 {
    margin: 0 0 5px;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* ページタイトルのサブテキスト（英語表記など） */
.page-hero h3 {
    font-size: 20px;
    opacity: 0.7;
    margin: 0;
}

/* セクションヘッダー (各コンテンツのタイトル部分) */
.section-header {
    margin-bottom: 10px;
    text-align: center;
}

.section-header h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 20px;
}

/* 共通カード (白背景で角丸のボックスデザインを複数クラスに適用) */
.news-card,
.shift-card,
.boy-card,
.content-card,
.contact-card,
.course-block {
    background: var(--color-bg-white); /* 半透明の白 */
    border: var(--border-light);
    border-radius: var(--radius-default);
    padding: 15px;
    width: 100%;
}

/* =========================================================
   個別余白調整用ユーティリティクラス
   各ページや各要素ごとに余白を上書きしたい時に使う
========================================================= */
.section-spacing-sm { padding-top: 24px; padding-bottom: 24px; } /* 小さめのセクション余白 */
.section-spacing-md { padding-top: 40px; padding-bottom: 40px; } /* 標準より少し狭め */
.section-spacing-lg { padding-top: 80px; padding-bottom: 80px; } /* かなり広め */
.section-spacing-top-sm { padding-top: 24px; } /* 上余白だけ調整 */
.section-spacing-top-md { padding-top: 40px; } /* 上余白だけ調整 */
.section-spacing-top-lg { padding-top: 80px; } /* 上余白だけ調整 */
.section-spacing-bottom-sm { padding-bottom: 24px; } /* 下余白だけ調整 */
.section-spacing-bottom-md { padding-bottom: 40px; } /* 下余白だけ調整 */
.section-spacing-bottom-lg { padding-bottom: 80px; } /* 下余白だけ調整 */
.section-padding-x-sm { padding-left: 16px; padding-right: 16px; } /* 左右余白を狭める */
.section-padding-x-md { padding-left: 24px; padding-right: 24px; } /* 左右余白を標準より少し狭める */
.section-padding-x-lg { padding-left: 40px; padding-right: 40px; } /* 左右余白を広げる */
.page-hero-spacing-sm { padding-top: 32px; padding-bottom: 32px; } /* ヒーローを少しコンパクトに */
.page-hero-spacing-md { padding-top: 48px; padding-bottom: 48px; } /* ヒーローを標準 */
.page-hero-spacing-lg { padding-top: 80px; padding-bottom: 80px; } /* ヒーローを大きめに */

/* カラムの上下の隙間をページごとに調整したい時に使う */
.column-spacing-top-sm { margin-top: 12px; } /* カラム上部の隙間を小さめ */
.column-spacing-top-md { margin-top: 24px; } /* カラム上部の隙間を標準 */
.column-spacing-top-lg { margin-top: 40px; } /* カラム上部の隙間を大きめ */
.column-spacing-bottom-sm { margin-bottom: 12px; } /* カラム下部の隙間を小さめ */
.column-spacing-bottom-md { margin-bottom: 24px; } /* カラム下部の隙間を標準 */
.column-spacing-bottom-lg { margin-bottom: 40px; } /* カラム下部の隙間を大きめ */

@media (max-width: 768px) {
    .section-spacing-sm { padding-top: 16px; padding-bottom: 16px; } /* SP時の小さめ余白 */
    .section-spacing-md { padding-top: 24px; padding-bottom: 24px; } /* SP時の標準余白 */
    .section-spacing-lg { padding-top: 40px; padding-bottom: 40px; } /* SP時の大きめ余白 */
    .section-spacing-top-sm { padding-top: 16px; } /* SP時の上余白 */
    .section-spacing-top-md { padding-top: 24px; } /* SP時の上余白 */
    .section-spacing-top-lg { padding-top: 40px; } /* SP時の上余白 */
    .section-spacing-bottom-sm { padding-bottom: 16px; } /* SP時の下余白 */
    .section-spacing-bottom-md { padding-bottom: 24px; } /* SP時の下余白 */
    .section-spacing-bottom-lg { padding-bottom: 40px; } /* SP時の下余白 */
    .section-padding-x-sm { padding-left: 12px; padding-right: 12px; } /* SP時の左右余白 */
    .section-padding-x-md { padding-left: 16px; padding-right: 16px; } /* SP時の左右余白 */
    .section-padding-x-lg { padding-left: 20px; padding-right: 20px; } /* SP時の左右余白 */
    .page-hero-spacing-sm { padding-top: 24px; padding-bottom: 24px; } /* SP時のヒーロー余白 */
    .page-hero-spacing-md { padding-top: 32px; padding-bottom: 32px; } /* SP時のヒーロー余白 */
    .page-hero-spacing-lg { padding-top: 48px; padding-bottom: 48px; } /* SP時のヒーロー余白 */
    .column-spacing-top-sm { margin-top: 8px; } /* SP時のカラム上部隙間 */
    .column-spacing-top-md { margin-top: 16px; } /* SP時のカラム上部隙間 */
    .column-spacing-top-lg { margin-top: 24px; } /* SP時のカラム上部隙間 */
    .column-spacing-bottom-sm { margin-bottom: 8px; } /* SP時のカラム下部隙間 */
    .column-spacing-bottom-md { margin-bottom: 16px; } /* SP時のカラム下部隙間 */
    .column-spacing-bottom-lg { margin-bottom: 24px; } /* SP時のカラム下部隙間 */
}

/* =========================================================
   サイドバー設定 (PC用)
   画面左側に固定されるナビゲーションメニュー
========================================================= */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0; /* top: 0, left: 0 と同義 */
    width: 260px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.92); /* 少し透ける白背景 */
    backdrop-filter: blur(12px); /* 背景のすりガラス効果 */
    border-right: var(--border-light);
    display: flex;
    flex-direction: column;
    padding: 30px 20px;
    z-index: 100;
}

/* サイドバー内のロゴ */
.sidebar-logo {
    text-align: center;
    margin-bottom: 0
}

.sidebar-logo img {
    width: 100%;
    max-width: 250px;
}

/* サイドバー内のナビゲーションリンク */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
}

.sidebar-nav a {
    color: var(--color-main);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 10px 0;
    border-bottom: var(--border-light);
}

.sidebar-nav a:hover {
    opacity: 0.6; /* ホバー時に少し薄くする */
}

/* サイドバー下部の店舗情報（電話番号・営業時間など） */
.sidebar-info {
    margin-top: auto; /* フレックスボックスの特性で下部に押しやる */
}

.sidebar-info .tel {
    display: block;
    color: var(--color-main);
    text-decoration: none;
    margin: 20px 0;
}

.hours {
    color: var(--color-main);
    font-size: 16px;
    line-height: 1.8;
    margin: 20px 0;
}

/* =========================================================
   SNSボタン共通設定 (X / LINE)
========================================================= */
.sidebar-x a,
.sidebar-line a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    padding: 0px 30px;   /* ボタン全体の余白（上下・右に移動） */
    border-radius: 10px;  /* 角丸のデザイン */
    margin: 20px 0;       /* ボタン同士の上下の間隔 */
    font-weight: 600;     /* 文字の太さ */
    height: 60px;        /* ボタンの高さ */
}


/* =========================================================
   𝕏（旧Twitter）ボタン専用の設定
========================================================= */
/* Xボタン全体の背景色（黒） */
.sidebar-x a {
    background: #000000;
}

/* Xアイコンのサイズや配置 */
.sidebar-x a .x-icon {
    width: 20px;          /* アイコンが占める幅 */
    margin-right: 30px;   /* アイコンとテキストの隙間 */
    font-size: 30px;      /* アイコンフォントの大きさ */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Xのテキスト設定 */
.sidebar-x-text {
    font-size: 15px;
}


/* =========================================================
   🟢 LINEボタン専用の設定
========================================================= */
/* LINEボタン全体の背景色（緑） */
.sidebar-line a {
    background: #06c755;  /* LINE公式のグリーン */
}

/* LINEアイコンを囲むボックスの調整 */
.sidebar-line .btn-icon {
    width: 35px;          /* アイコンサイズ */
    margin-right: 30px;   /* アイコンとテキストの隙間 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* LINEアイコン画像（img）のサイズ調整 */
.sidebar-line .btn-icon img {
    width: 100%;          /* ボックスの幅に合わせる */
    height: auto;         /* 縦横比を維持 */
    display: block;
}

/* LINEのテキスト設定 */
.sidebar-line-text {
    font-size: 15px;  /* 文字サイズ */
    text-align: center;  /* 文字の中央揃え */
}
/* =========================================================
   SYSTEM 料金ページ設定
========================================================= */
/* コース料金のブロックを横並びにするレイアウト */
.system-page {
    padding-bottom: 0px;
}

.system-page-hero {
    padding: 10px 0 0px;
}

.system-page-title {
    margin-bottom: 15px;
}

.system-page-subtitle {
    opacity: 0.8;
    letter-spacing: 0.08em;
}

.system-flex-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    align-items: stretch; /* 高さを揃える */
}

.system-section {
    padding-top: 10px;
    padding-bottom: 0px;
}

.system-section-header {
    margin-bottom: 10px;
}

.system-section-title {
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.02em;
}

.course-block {
    flex: 1 1 calc(50% - 12px); /* 2カラムレイアウト */
    display: flex;
    flex-direction: column;
}

.system-course-block {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-default);
    padding: 5px 24px 0px;  /* h,w,b */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.system-course-description {
    margin: 0 0 14px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

.system-attention-list {
    margin-top: 8px;
}

.system-attention-list li {
    margin-bottom: 5px;
    line-height: 1.8;
}

/* 1カラムで全幅表示させたい場合のクラス */
.course-block.full-width {
    flex: 1 1 100%;
}

/* コース見出し（左側にアクセントライン） */
.course-title,
.course-block h2,
.course-block h3 {
    padding-left: 10px;
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    border-left: 4px solid var(--color-main);
}

/* 料金表のテーブルデザイン */
.price-table {
    width: 100%;
    border-collapse: collapse; /* セルの隙間をなくす */
    margin-bottom: 15px;
}

.price-table td {
    padding: 12px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 行の区切り線 */
}

.course-note-sm {
    margin-top: 10px;
}

.course-note-md {
    margin-top: 15px;
}

.course-title-tight {
    margin-top: 0;
}

.course-title-offset {
    margin-top: 5px;
}

/* 最後の行は下線を消す */
.price-table tr:last-child td {
    border-bottom: none;
}

/* 金額表示部分（太字で右寄せ） */
td.price-txt {
    color: var(--color-main);
    font-size: 16px;
    font-weight: 700;
    text-align: right;
}

.column-spacing-top-sm { margin-top: 12px; } /* カラム上部の隙間を小さめ */

/* ガイドページ用ユーティリティ */
.guide-section-title {
    font-weight: 600;
}

.guide-course-title {
    margin-top: 0;
}

.guide-list-indent {
    margin-left: 20px;
}

.guide-list-item {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
}

.guide-list-item-strong {
    font-weight: 700;
}

.guide-list-paragraph {
    margin-bottom: 10px;
}

.faq-item-indent {
    margin-left: 20px;
}

/* ボタン＆基本パーツ (サイト全体で使う主要ボタンのデザイン) */
.main-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 56px;
    margin-top: 10px;
    width: 100%;
    background: var(--color-main);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-default);
    font-weight: 700;
    transition: var(--transition-fast);
}

.main-btn:hover {
    opacity: 0.8; /* ホバーで少し透明に */
}

/* =========================================================
   CONTACT / CTA
========================================================= */
.contact-card-plain {
    background: transparent;
    border: none;
    padding: 0;
}

.contact-card-title {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

/* =========================================================
   TOP PAGE トップ
========================================================= */
/* 新着情報エリアのコンテナ */
.news-container {
    width: 100%;
    border: 1px solid #ccc;
    padding: 15px;
}

/* 新着情報が複数ある場合にスクロールさせるエリア */
.news-scroll-box {
    max-height: 7.5em;
    overflow-y: auto;
    border: 1px solid #eee;
    padding: 5px 0;
    background: #fafafa;
}

.news-scroll-box ul {
    margin: 0;
    padding-left: 20px;
}

/* はみ出したテキストを「...」で省略表示する設定 */
.news-scroll-box li {
    line-height: 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 最終更新日時のスタイル */
.updated-time {
    margin: 10px 0 0;
    font-size: 0.85em;
    color: #666;
    text-align: right;
}

/* =========================================================
   BOY PAGE ボーイ一覧
========================================================= */
/* ボーイ一覧を並べるグリッド（flexbox使用） */
.boy-grid,
.shift-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.page-title-center {
    text-align: center;
}

.empty-state {
    text-align: center;
    color: #999;
    width: 100%;
    padding: 40px 0;
}

/* 1列に5枚表示（PC用: 20% - 隙間） */
.boy-card,
.shift-card {
    flex: 0 0 calc(20% - 12px);
}

/* 宣材画像のアスペクト比を3:4に固定して切り抜く */
.boy-card img,
.shift-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: var(--radius-image);
}

.boy-card { font-size: 12px; }
.shift-card { font-size: 13px; }

/* カード全体をリンク化するための設定 */
.boy-card .boy-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.boy-card .boy-card-link h3,
.boy-card .boy-card-link p {
    margin: 5px 0 0;
}

/* 「詳細を見る」ボタン */
.boy-card .detail-btn {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    background: var(--color-main);
    color: #fff;
    border-radius: var(--radius-default);
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-fast);
}

.boy-card .detail-btn:hover {
    opacity: 0.85;
}

/* =========================================================
   BOY DETAIL ボーイ詳細
========================================================= */
/* 詳細ページ全体の余白設定 */
.boy-detail {
    padding: 20px 30px 100px;
}

/* プロフィール上部（画像と基本情報の2カラムレイアウト） */
.profile-wrap,
.detail-top {
    display: grid;
    grid-template-columns: 420px 1fr; /* 画像領域420px、残り領域が情報 */
    gap: 40px;
    align-items: start;
}

/* メイン画像のデザイン（角丸と影） */
.profile-image img,
.detail-main-image img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    margin-top: 105px;
}

.detail-main-image {
    position: relative;
    width: 100%;
}

/* 画像左下のバッジ（エリアやステータスなど） */
.area-badge {
    position: absolute;
    left: 15px;
    bottom: 15px;
    background: #000;
    color: #fff;
    padding: 10px 16px;
    border-radius: 30px;
    font-size: 13px;
}

/* プロフィール右側の情報エリア */
.profile-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-status {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 8px 10px;
    border-radius: 999px;
    background: var(--color-main);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ボーイの名前 */
.profile-content h1 {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
}

/* ハッシュタグやキーワードタグの設定 */
.profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile-meta span {
    padding: 10px 16px;
    background: #fff;
    border-radius: 999px; /* 完全な角丸 */
    font-size: 14px;
    border: var(--border-light);
}

/* 身長・体重などのステータス表 */
.profile-table {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2列配置 */
    gap: 10px;
    padding: 0;
    margin: 0;
}

.profile-table li {
    background: #fff;
    padding: 10px 0;
    border-radius: 12px;
    border: var(--border-light);
    font-size: 14px;
    text-align: center;
}

/* コメント・自己紹介文のボックス */
.profile-comment {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    line-height: 2; /* 読みやすいように行間広め */
    border: var(--border-light);
}

/* 予約・SNSボタンなどを並べるエリア */
.profile-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

/* 特徴リスト（4列配置） */
.features-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.features-list li {
    background: #fff;
    padding: 18px 0;
    border-radius: 12px;
    text-align: center;
    font-weight: 700;
    border: var(--border-light);
}

/* スケジュール表示エリア */
#boySchedule {
    text-align: center;
    padding: 20px 0;
}

#boySchedule p {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: 0.7;
}

#boySchedule h3 {
    font-size: 32px;
    font-weight: 700;
}

/* ギャラリー（サブ写真一覧）の2列グリッド */
.detail-gallery,
.detail-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.detail-gallery img,
.detail-gallery-grid img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 12px;
}

/* プロフィール詳細下部のカード設定 */
.profile-card { margin-bottom: 15px; }
.profile-grid { display: grid; gap: 12px; }
.profile-grid-2 { grid-template-columns: repeat(2, 1fr); }
.profile-grid-3,
.profile-grid-stance { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.profile-item {
    padding: 12px 0;
    text-align: center;
}

.profile-item .label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.6;
}

.profile-item .value {
    display: block;
    font-size: 15px;
    font-weight: 700;
}

/* 詳細下部の2カラムレイアウト（質問コーナー等） */
.detail-two-column {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.detail-left,
.detail-right {
    flex: 1;
}

/* ギャラリー画像を拡大表示するモーダルウィンドウ */
.gallery-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(0, 0, 0, 0.8); /* 黒の半透明背景 */
}

.gallery-modal-content {
    display: block;
    margin: 0 auto;
    max-width: 90%;
    border-radius: 10px;
}

/* モーダルを閉じる「×」ボタン */
.gallery-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* =========================================================
   RESERVE ご予約 ページ設定
========================================================= */

/* カード内の要素すべてに box-sizing を強制（親カードにも適用推奨） */
.reserve-form,
.reserve-form * {
    box-sizing: border-box;
}

/* 予約フォーム全体のレイアウト */
.reserve-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* 各入力項目（ラベルと入力欄のセット）のスタイル */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0; /* flex/grid内で縮小できるようにする */
}

.form-group label {
    font-weight: 700;
    font-size: 16px;
    padding: 2px 0;
    color: var(--color-main);
}

/* テキストボックス、セレクトボックス、テキストエリアの共通スタイル */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 16px 12px;
    border: var(--border-light);
    border-radius: 10px;
    font-size: 16px;
    background: #fff;
    color: #000;
    outline: none;
    transition: var(--transition-fast);
}

/* 入力中に枠線を強調する設定 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--color-main);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

/* 複数行入力欄の高さ設定 */
.form-group textarea {
    resize: vertical; /* 縦方向のみサイズ変更を許可 */
    min-height: 140px;
}

/* フォーム内の注意書きテキスト */
.form-group p {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.058);
    word-break: break-word;
}

/* 時間選択などを横並びにするコンテナ */
.time-select-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.time-select-container select {
    flex: 1 1 0; /* 均等に縮小・拡大させる */
    min-width: 0; /* selectがはみ出さないようにする最重要ポイント */
    max-width: 100%;
    padding: 16px 8px;
}

.time-select-container label {
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

/* 3つの入力欄を横並びにする（身長・体重・年齢など） */
.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax(0, 1fr)でカード幅に収める */
    gap: 10px;
    width: 100%;
}

.form-row-3 .form-group,
.form-row-3 input,
.form-row-3 select {
    min-width: 0;
    max-width: 100%;
}

/* 予約完了画面のスタイル */
.complete-card {
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.complete-icon {
    font-size: 70px;
    line-height: 1;
    margin-bottom: 20px;
}

/* 完了画面の下部ボタン群 */
.complete-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* ===== スマホ幅での微調整 ===== */
@media (max-width: 480px) {
    .form-row-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 10px;
        font-size: 15px;
    }

    .time-select-container {
        flex-wrap: wrap;
    }

    .time-select-container select {
        min-width: 80px;
    }
}

/* =========================================================
   CONTACT お問い合わせ
   電話番号やLINEなどの連絡先ボタン用スタイル
========================================================= */
.contact-buttons-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

/* 電話・フォームなどとSNSボタンを横並びにするレイアウト */
.contact-main-row,
.contact-sns-row {
    display: flex;
    gap: 15px;
    width: 100%;
}

/* 各種お問い合わせボタンの共通デザイン */
.contact-card .contact-main-row a,
.contact-card .contact-sns-row a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 55px;  /* ボタンの高さ変更 */
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
     text-align: center; /* テキスト中央揃え */
    border-radius: var(--radius-default);
    transition: var(--transition-fast);
}

.contact-card .contact-main-row a:hover,
.contact-card .contact-sns-row a:hover {
    opacity: 0.8;
    transform: translateY(-2px); /* ホバー時に少し浮き上がるアニメーション */
}

/* 電話ボタン色 */
.contact-main-row .tel-btn {
    background: #fffdfd;
    color: #000;
    border: var(--border-light);
}

/* フォームボタン色 */
.contact-main-row .form-btn {
    background: #85ff4493;
    color: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* LINEボタン色 */
.contact-sns-row .line-btn,
.sns-banner-btn.line-color {
    background: #03b14b;
    color: #fff;
}

/* X（Twitter）ボタン色 */
.contact-sns-row .x-btn,
.sns-banner-btn.x-color {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* TELアイコンサイズ設定 */
.contact-card .contact-main-row a img,
.contact-card .btn-icon {
    width: 18px;  /* アイコンのサイズ */
    height: 18px;
    margin-right: 16px;
    object-fit: contain;
}

/* X(旧Twitter)アイコンサイズ設定 */
.contact-card .x-icon {
    margin-right: 20px;  /* アイコンとテキストの隙間 */
    font-size: 30px;     /* アイコンのサイズ */
}

/* LINEアイコンサイズ設定 */
.contact-card .contact-sns-row a img {
    margin-right: 20px;   /* アイコンとテキストの隙間 */
    width: 30px;         /* アイコンのサイズ（幅） */
    height: auto;         /* 縦横比を保つための設定（必要に応じて） */
}

/* =========================================================
   RECRUIT（求人ページ）統合スタイル
========================================================= */
/* 1. ヒーロー画像エリア (ページ上部のメイン画像) */
.hero-image {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 20px;
    margin-bottom: 0;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* 縦並びのフレックスコンテナ */
.recruit-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.recruit-flex img {
    width: 100%;
    border-radius: 10px;
}

/* 2. 共通 h2 見出し */
h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    color: #333333;
    text-align: center;
    letter-spacing: 0.05em;
    margin-top: 0;
    margin-bottom: 24px;
    padding: 0;
}

/* 3. 募集要項 (2×2カード & サポート) */
.recruit-badge-wrapper {
    text-align: center;
    margin-bottom: 24px;
}

/* 見出しの上の「未経験歓迎！」のようなバッジ装飾 */
.recruit-badge {
    display: inline-block;
    background: #333;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 24px;
    border-radius: 30px;
}

/* 求人の条件を2×2で並べるグリッド */
.recruit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1200px;
    margin: 5px auto 24px auto;
}

/* 各条件カードのデザイン */
.recruit-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.card-label {
    font-size: 13px;
    color: #777;
    font-weight: 600;
    margin-bottom: 6px;
}

.card-value {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

/* 目立たせたいテキスト用（給与など） */
.card-value.highlight {
    color: #d9534f;
}

/* 補足事項（高校生不可など） */
.card-value .note {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.card-sub {
    font-size: 13px;
    color: #666;
    margin: 0;
}

/* 未経験サポート案内などの強調ボックス */
.recruit-support-box {
    background: #9de99d;
    border: 0px dashed #20dc39;
    border-radius: 18px;
    padding: 15px;
    text-align: center;
    max-width: 800px;
    margin: 20px auto 0; /* 【修正】不正な値を修正 */
    font-weight: 700;
    color: #444;
    font-size: 20px;
}

/* 4. 応募フォーム & セクション外枠 */
.recruit-section {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto !important;
    /* 共通の上下余白(60px)を打ち消して上に詰める */
    padding-top: 40px !important; 
    padding-bottom: 20px !important; 
}

/* 共通コンテナの余白も無くすことでさらに隙間を詰める */
.recruit-section .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* 応募フォームのカードを大きく見せる設定 */
.recruit-section .contact-card {
    width: 100% !important;
    max-width: 1000px !important;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px; /* PC用ゆったり余白 */
}

.recruit-section form {
    width: 100%;
    margin-top: 20px;
}

/* 入力エリアが親要素からはみ出ないようにbox-sizingを指定 */
.recruit-section .form-group input[type="text"],
.recruit-section .form-group input[type="number"],
.recruit-section .form-group input[type="tel"],
.recruit-section .form-group input[type="email"],
.recruit-section .form-group input[type="file"],
.recruit-section .form-group textarea {
    width: 100%;
    box-sizing: border-box;
}

/* 送信ボタンの幅と配置 */
.recruit-section .main-btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0; /* 【修正】ボタン上部の余白を適度に確保 */
}

/* =========================================================
   フォーム直下（SNS・フッター）の余白詰め専用設定
========================================================= */
/* 応募フォームのすぐ下にあるSNSセクションの余白を詰める */
.recruit-section + .section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
.recruit-section + .section .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* フッターの上余白を詰める */
.footer {
    padding-top: 8px !important;
}

/* SNSカード直下の余白を詰める */
.contact-card + .footer,
.section + .footer {
    margin-top: 0 !important;
}

/* =========================================================
   表示切り替え用ユーティリティクラス
========================================================= */
/* PC表示では非表示にするクラス（スマホ用改行など） */
.sp { display: none; }

/* =========================================================
   ATTENTION 注意事項
========================================================= */
/* 注意事項を囲む枠 */
.attention-block {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(17, 11, 11, 0.15);
}

/* リスト（・から始まる箇条書き）の設定 */
.attention-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.attention-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.8;
}

.attention-list li:last-child {
    margin-bottom: 0;
}

/* ::before擬似要素を使って「・」を付ける */
.attention-list li::before {
    content: "・";
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 700;
    color: var(--color-main);
}

/* 注意書き内の強調テキストカラー */
.attention-list strong { color: #d9534f; font-weight: 700; }
.attention-list b { color: var(--color-main); font-weight: 700; }

/* =========================================================
   FOOTER フッターエリア（透明化）
========================================================= */
.footer {
    background-color: transparent; /* 背景を透過 */
    color: var(--color-main);
    padding: 40px 0 60px;
    text-align: center;
}

.footer-logo {
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

.footer-copy {
    margin-top: 15px;
    font-size: 12px;
    opacity: 0.7;
}

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

/* =========================================================
   RESPONSIVE (PC/SP分離) メディアクエリ
   画面サイズに応じてレイアウトを変更する記述
========================================================= */

/* 
   【PC表示時の基本設定】
   スマホ用要素はPC画面では不要なため、最初は非表示（display: none;）にしておきます。
*/
.mobile-header,
.mobile-sidebar,
.menu-overlay,
.sp-reserve-fixed {
    display: none;
}

/* --- Max-width: 1200px (タブレット・小さめのPC向け) --- */
@media (max-width: 1200px) {
    /* ボーイ一覧やシフトのカードを4列表示に変更 (全体100% ÷ 4列 = 25% から余白を引く) */
    .boy-card,
    .shift-card {
        flex: 0 0 calc(25% - 12px);
    }

    /* プロフィール詳細画面のレイアウト調整：画像の幅を350pxに固定し、残りをテキストエリア(1fr)にする */
    .profile-wrap,
    .detail-top {
        grid-template-columns: 350px 1fr;
    }

    /* 特徴リスト（アイコンやタグなど）の並びを2列に変更 */
    .features-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* プロフィールの名前（見出し）の文字サイズを少し小さくする（40px） */
    .profile-content h1 {
        font-size: 40px;
    }
}

/* --- Max-width: 992px (横向きタブレットなど向け) --- */
@media (max-width: 992px) {
    /* 料金表など、左右2列で並んでいた要素を縦1列（column）に並べ替え、間隔を20px空ける */
    .system-flex-wrap {
        flex-direction: column;
        gap: 20px;
    }
}

/* --- Max-width: 768px (スマホ表示全般) --- */
@media (max-width: 768px) {

    /* スマホ用に全体の左右余白を15pxに狭め、強制適用（!important）する */
    .container,
    section,
    .section {
        padding: var(--section-padding-y-sp) var(--section-padding-x-sp) !important; /* SP時のセクション余白 */
    }

    .page-hero {
        padding: var(--page-hero-padding-y-sp) var(--section-padding-x-sp); /* SP時のヒーロー余白 */
    }

    /* --- Base Overrides (全体の基本設定の上書き) --- */
    body {
        margin-left: 0; /* PC用サイドバーがあった左側の余白を消して全画面幅にする */
        padding-top: 60px; /* 画面上部に固定されるスマホヘッダーの高さ分、コンテンツを下にずらす */
        padding-bottom: 80px; /* 画面下部に固定される予約ボタンがコンテンツに被らないよう余白を作る */
    }

    /* PC専用要素（左サイドバーやPC用表示クラス）を非表示にする */
    .sidebar,
    .pc {
        display: none;
    }
    
    /* スマホ専用要素（スマホ用改行など）を表示する */
    .sp, 
    .sp-only { 
        display: inline; 
    }

    /* --- Typography & General Settings (文字サイズ設定) --- */
    h2 {
        font-size: 22px; /* スマホ画面に合わせて見出しを小さくする */
        margin-bottom: 16px; /* 見出しの下の余白を設定 */
    }

    /* --- Mobile Header (スマホ用の上部固定ヘッダー) --- */
    .mobile-header {
        position: fixed; /* 画面上部に固定 */
        top: 0;
        left: 0;
        width: 100%; /* 横幅いっぱい */
        height: 60px; /* ヘッダーの高さ */
        padding: 0 15px; /* 左右の余白 */
        background: rgba(255, 255, 255, 0.92); /* 少し透ける白背景 */
        backdrop-filter: blur(12px); /* 背景のすりガラス効果 */
        display: flex; /* ロゴとボタンを横並びにする */
        align-items: center; /* 縦の上下中央揃え */
        justify-content: space-between; /* ロゴは左、ボタンは右に両端揃え */
        z-index: 10000; /* 他の要素より上に表示させる（重なり順） */
    }

    /* スマホヘッダー内のロゴ画像サイズ調整 */
    .mobile-header img {
        height: 32px; /* 高さを指定し、幅(width)は自動調整 */
        width: auto;
    }

    /* ハンバーガーメニュー（三本線）ボタンのデザイン */
    .menu-btn {
        border: none; /* 枠線を消す */
        background: none; /* 背景色を消す */
        color: var(--color-main); /* テーマカラーを適用 */
        font-size: 28px; /* アイコンサイズ */
        cursor: pointer; /* クリック可能なカーソルにする */
    }

    /* --- Overlay (メニュー開閉時の背景の暗転) --- */
    .menu-overlay {
        display: block;
        position: fixed; /* 画面全体を覆うように固定 */
        inset: 0; /* top/left/right/bottomすべて0 */
        background: rgba(0, 0, 0, 0.4); /* 半透明の黒背景 */
        opacity: 0; /* 最初は透明（見えない） */
        visibility: hidden; /* クリックも判定させない */
        transition: opacity 0.3s ease, visibility 0.3s ease; /* 0.3秒かけてフワッと表示・非表示するアニメーション */
        z-index: 10000; /* 重なり順の設定 */
    }

    /* メニューが開いた時（.activeクラスが付与された時）に暗転を表示 */
    .menu-overlay.active {
        opacity: 1; /* 透明度を100%（見える状態）に */
        visibility: visible;
    }

    /* --- Mobile Sidebar (スマホ用のスライドメニュー) --- */
    .mobile-sidebar {
        display: block;
        position: fixed; /* 画面右側に固定 */
        top: 0;
        right: 0;
        width: 280px; /* メニューの横幅 */
        height: 100dvh; /* スマホブラウザのアドレスバーを除いた画面の高さに合わせる */
        background: #fff; /* 背景は白 */
        transform: translateX(100%); /* 初期状態は画面の右外（100%の位置）に隠しておく */
        transition: transform 0.3s ease; /* 0.3秒かけてスライドするアニメーション */
        z-index: 10001; /* 暗転(10000)より上に表示 */
        overflow: hidden; /* はみ出た部分は隠す */
        touch-action: pan-y; /* 縦スクロールのみ許可 */
    }

    /* メニューが開いた時（.activeクラスが付与された時）に画面内にスライドイン */
    .mobile-sidebar.active {
        transform: translateX(0); /* 右外(100%)から元の位置(0)に戻す */
    }

    /* 閉じるボタン（×）のデザイン */
    #closeBtn,
    .mobile-close-btn {
        position: absolute; /* メニュー内の右上に絶対配置 */
        top: 15px;
        right: 15px;
        border: none;
        background: none;
        font-size: 24px;
        color: var(--color-main);
        cursor: pointer;
        z-index: 10002; /* メニューコンテンツより上に表示 */
    }

    /* メニュー内のスクロール設定（内容が多い場合にスクロールできるようにする） */
    .mobile-sidebar-scroll {
        width: 100%;
        height: 100%;
        overflow-y: auto; /* 縦スクロールを有効化 */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
        overscroll-behavior: contain; /* スクロールが一番下まで行った時に背後の画面が動くのを防ぐ */
        touch-action: pan-y;
    }

    /* メニュー内の余白設定 */
    .mobile-sidebar-inner {
        display: flex;
        flex-direction: column; /* 縦並び */
        min-height: max-content;
        padding: 50px 20px 100px; /* 上50px、左右20px、下100pxの余白 */
        box-sizing: border-box; /* paddingを幅や高さに含める */
    }

    /* --- Mobile Menu Nav (スマホメニュー内のリンク) --- */
    .mobile-sidebar nav,
    .mobile-menu {
        display: flex;
        flex-direction: column; /* リンクを縦並びにする */
        margin-top: 10px;
    }

    /* メニュー内の各リンク（aタグ）のデザイン */
    .mobile-sidebar nav a,
    .mobile-menu a {
        color: var(--color-main);
        text-decoration: none; /* 下線を消す */
        padding: 14px 0; /* 上下の余白でタップしやすくする */
        border-bottom: var(--border-light); /* リンクごとの区切り線 */
        font-size: 15px;
    }

    /* --- Mobile Footer / SNS (スマホメニュー下部のSNSや連絡先) --- */
    /* SNSボタンなどをまとめるエリア */
    .mobile-sidebar-footer {
        margin-top: 30px;
        padding-top: 20px;
        border-top: var(--border-light); /* エリア上の区切り線 */
        display: flex;
        flex-direction: column; /* ボタンを縦並びにする */
        gap: 12px; /* ボタン同士の隙間 */
    }

    /* SNSボタンの共通設定 */
    .mobile-sidebar-footer a {
        display: flex;
        align-items: center; /* アイコンとテキストを上下中央揃え */
        justify-content: center; /* 中央寄せ */
        width: 100%; /* 横幅いっぱい */
        padding: 10px 12px; /* 内側の余白 */
        border-radius: 8px; /* 角丸 */
        text-decoration: none;
        font-weight: 600; /* 太字 */
        box-sizing: border-box;
    }

    /* X（旧Twitter）ボタンの配色 */
    .mobile-sidebar-footer a.x-color,
    .mobile-sidebar-footer .x-color {
        background: #000; /* 黒背景 */
        color: #fff; /* 白文字 */
        border: 1px solid #333; /* 濃いグレーの枠線 */
    }

    /* LINEボタンの配色 */
    .mobile-sidebar-footer a.line-color,
    .mobile-sidebar-footer .line-color {
        background: #06C755; /* LINE公式の緑背景 */
        color: #fff; /* 白文字 */
        border: none;
    }

    /* SNSボタン内のアイコン設定 */
    .mobile-sidebar-footer a .btn-icon,
    .mobile-sidebar-footer a .x-icon {
        width: 30px;
        height: 32px; /* lineアイコンサイズ */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px; /* アイコン右側の余白 */
        flex-shrink: 0; /* 画面が狭くてもアイコンが縮まないようにする */
        font-size: 18px;
        font-weight: bold;
    }

    /* アイコン画像の設定 */
    .mobile-sidebar-footer a img {
        width: 100%;
        height: 100%;
        object-fit: contain; /* アスペクト比を保ったまま枠内に収める */
    }

    /* SNSボタン内のテキスト設定 */
    .mobile-sidebar-footer p,
    .sidebar-x-text,
    .sidebar-line-text {
        margin: 0;
        font-size: 12px; /* 少し小さめの文字 */
        line-height: 1.3; /* 行間 */
        text-align: center; /* 左揃え */
        color: #fff;
    }

    /* --- Mobile Tel & Hours (スマホメニュー内の電話・営業時間) --- */
    /* 電話番号の表示デザイン */
    .mobile-tel {
        display: block;
        text-align: left;
        color: var(--color-main);
        padding: 12px;
        border-radius: 8px;
        font-weight: bold;
        line-height: 1.4;
    }

    /* 営業時間の表示デザイン */
    .mobile-hours {
        padding: 4px 0 8px;
        line-height: 1.5;
        color: var(--color-main);
        text-align: center;
        font-size: 13px;
    }

    /* --- Main Content Layout (コンテンツのスマホ用レイアウト変更) --- */
    /* スマホではボーイ一覧やシフトカードを2列表示に変更 (50%から余白を引く) */
    .boy-card,
    .shift-card {
        flex: 0 0 calc(50% - 8px);
    }

    /* PCでは横並びだった各種ボタン類を、スマホでは縦並びに変更 */
    .complete-buttons,
    .profile-buttons,
    .detail-buttons {
        flex-direction: column;
    }

    /* ボタンの幅をスマホ画面いっぱい（100%）に広げる */
    .complete-buttons .main-btn,
    .profile-buttons .main-btn,
    .detail-buttons .main-btn {
        width: 100%;
    }

    /* プロフィール画面：画像と情報を縦並びに変更（1frで1列） */
    .profile-wrap,
    .detail-top {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* プロフィールの名前（見出し）をスマホ用に小さく（30px） */
    .detail-main-image img {
        margin-top: 0;
    }

    .profile-content h1 {
        font-size: 30px;
        margin-top: 20px;
    }

    /* プロフィールの基本情報テーブルをスマホ用に調整 */
    .profile-table {
        display: flex;
        flex-wrap: wrap; /* 横幅が足りない場合は折り返す */
        gap: 10px;
    }

    /* 項目を2列（50% - 余白分）で表示 */
    .profile-table li {
        width: calc(50% - 5px);
    }

    /* 詳細ギャラリー（画像一覧）を2列で表示 */
    .detail-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* 2列レイアウトをスマホでは縦並び（1列）に変更 */
    .detail-two-column {
        flex-direction: column;
    }

    /* ボーイスケジュールの見出しサイズを縮小 */
    #boySchedule h3 {
        font-size: 24px;
    }

    /* --- Form Settings (Mobile) (スマホ用フォーム調整) --- */
    /* スマホでタップしやすいように入力欄の上下左右の余白を大きくする */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px 10px;
    }

    /* 横並び（3列など）のフォーム要素を、スマホでは縦1列に変更 */
    .form-row-3 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* 時間選択ドロップダウンの隙間調整 */
    .time-select-container {
        gap: 6px;
    }

    .time-select-container select {
        padding: 14px 6px;
    }
    
    /* --- Recruit Page Overrides (Mobile) (求人ページのスマホ専用調整) --- */
    /* ヒーロー（メイン）画像の左右余白やマージンをスマホ向けに詰める */
    .hero-image {
        padding-left: 10px;
        padding-right: 10px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 求人セクション全体の左右余白を10pxに強制し、画面いっぱいに広く見せる */
    .recruit-section {
        max-width: 100%;
        padding: 15px 10px !important;
    }

    /* 内部コンテナの余白を消す */
    .recruit-section .container {
        padding: 0 !important;
    }

    /* フォームなどを囲む白いカードの余白を削り、入力欄を横に広げる */
    .recruit-section .contact-card {
        padding: 20px 10px !important;
        border-radius: 12px; /* 角丸を適用 */
    }

    /* 求人条件カードの隙間を小さくしてコンパクトにする */
    .recruit-grid {
        gap: 8px;
        margin-bottom: 15px;
    }

    /* テキストがはみ出ないよう、カード内の余白を微調整 */
    .recruit-card {
        padding: 15px 5px; 
        border-radius: 12px;
    }

    /* カード内の数値やメイン文字のサイズ */
    .card-value {
        font-size: 16px;
    }

    /* カード内の補足文字（単位など）のサイズ */
    .card-sub {
        font-size: 11px;
    }
    
    /* サポート・待遇ボックスの下余白 */
    .recruit-support-box {
        margin-bottom: 15px;
    }

    /* フォーム直下にあるSNS等のエリアの余白を限界まで詰めて間延びを防ぐ */
    .recruit-section + .section {
        padding-top: 0 !important;
        padding-bottom: 10px !important;
    }
    .recruit-section + .section .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* フッター上の余白を詰める */
    .footer {
        padding-top: 10px !important;
    }

    
}

/* =========================================================
   【完全版】コンタクトボタン4つの高さ個別設定（PC・スマホ共通）
========================================================= */
/* ---------------------------------------------------------
   スマホ表示（768px以下）の時は4つのボタンを縦並びにする
--------------------------------------------------------- */
@media (max-width: 768px) {
    .contact-buttons-container {
        gap: 12px;
    }

    .contact-card .contact-main-row,
    .contact-card .contact-sns-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .contact-card .contact-main-row a,
    .contact-card .contact-sns-row a,
    .contact-card .contact-main-row .contact-btn,
    .contact-card .contact-sns-row .contact-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        min-height: 56px !important;
        height: auto !important;
        padding: 14px 16px !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        flex: 0 0 auto !important;
        font-size: 14px !important;
        white-space: normal !important;
    }
        /* 電話ボタン */
    .contact-card .contact-main-row a.tel-btn {
        min-height: 50px !important;
        height: auto !important;
    }
        /* 予約ボタン */
    .contact-card .contact-main-row a.form-btn {
        min-height: 50px !important;
        height: auto !important;
    }
            /* LINEボタン */
    .contact-card .contact-sns-row a.line-color {
        min-height: 50px !important;
        height: auto !important;
        padding: 5px 5px !important;
    }

    .contact-card .contact-sns-row a.line-color img {
        width: 40px !important;  /* アイコンと文字の感覚 */
        height: 35px !important;  /* アイコンの大きさ */
        margin-right: 30px !important;
    }

    .contact-card .contact-sns-row a.x-color {
        min-height: 50px !important;
        height: auto !important;
        padding: 5px 5px !important;
        gap: 20px !important;
    }

    .contact-card .contact-sns-row a.x-color .x-icon {
        font-size: 35px !important;
        margin-right: 10px !important;
    }
}


  /* レイアウト全体をflexにしてstickyを効かせる */
  .layout-wrapper {
    display: flex;
    align-items: flex-start;
    min-height: 100vh;
  }

  .main-content {
    flex: 1;
    min-width: 0;
  }

  /* ===== PC表示専用:サイドバーを画面左端に完全固定 ===== */
@media (min-width: 769px) {

  /* サイドバー本体:常に左端に固定 */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transform: none !important; /* スマホ用のtranslateXを打ち消す */
  }


  /* layout-wrapperはfixed配置なのでflex不要 */
  .layout-wrapper {
    display: block;
    min-height: 100vh;
  }

  /* ハンバーガー・閉じるボタン・オーバーレイはPCで非表示 */
  .sidebar-toggle,
  .sidebar-close,
  .sidebar-overlay {
    display: none !important;
  }

  /* 上部(ロゴ+ナビ) */
  .sidebar-top {
    display: flex;
    flex-direction: column;
  }

  /* フッター部分:サイドバー内部で下端に自然配置、
     ナビが長くサイドバー自体からあふれる時はサイドバー内スクロールで追従 */
  .sidebar-info {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: #fff;
    padding-top: 16px;
  }
}