/* =================================================
   1. 共通設定・変数
   ================================================= */
:root {
    --main-pink: #d81b60;
    --sub-pink: #fdf2f8;
    --accent-red: #d32f2f;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
}

/* PC指示：基本レイアウト（左マージン100px） */
.info-group, 
.contact-stack, 
.banner-content {
    max-width: 1300px;
    margin-left: 100px !important;
    margin-right: auto;
    padding-right: 40px;
}

/* =================================================
   2. タイトル装飾
   ================================================= */
.seo-title, .form-title {
    border-left: 6px solid var(--main-pink);
    padding-left: 15px;
    font-size: 1.6rem;
    color: var(--main-pink);
    margin-bottom: 30px;
    font-weight: bold;
}

.form-title {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-top: 60px;
}

/* =================================================
   3. バナーセクション
   ================================================= */
.long-banner {
    width: 100%;
    background: linear-gradient(135deg, #8e2c44 0%, #333 100%);
    min-height: 350px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-text { color: #fff; }
.hero-text h1 { font-size: 2.8rem; margin: 15px 0 0; line-height: 1.4; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.hero-text mark { background: var(--main-pink); color: #fff; padding: 0 5px; }

.badge {
    background: #fff;
    color: var(--main-pink);
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    display: inline-block;
}

/* =================================================
   4. 店舗情報・お問い合わせリスト
   ================================================= */
.shop-info-container {
    background: #fff;
    border-top: 3px solid var(--main-pink);
    padding: 10px 0;
}

.shop-row {
    display: flex;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
}

.shop-row:last-child { border-bottom: none; }

.shop-row dt {
    width: 180px; /* 項目名の幅を固定 */
    flex-shrink: 0;
    font-weight: bold;
    color: var(--main-pink);
    padding-left: 10px;
}

.shop-row dd { margin: 0; flex: 1; color: #444; }

/* お問い合わせリンク */
.contact-row-item dd a, .contact-link {
    color: var(--main-pink);
    font-weight: bold;
    text-decoration: underline;
}

.contact-divider {
    margin: 30px 0 10px;
    border-top: 2px solid var(--main-pink);
}

/* =================================================
   5. 応募フォーム
   ================================================= */
.contact-stack {
    background: #fff;
    border-top: 3px solid var(--main-pink);
    margin-top: 60px;
    padding-bottom: 80px;
}

.form-tbl { width: 100%; border-collapse: collapse; margin-bottom: 30px; }

.form-tbl th {
    width: 200px;
    text-align: left;
    vertical-align: top;
    padding: 20px 10px;
    font-weight: bold;
    color: var(--main-pink);
    border-bottom: 1px solid #eee;
    background: #fdf2f8;
}

.form-tbl td {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

/* 入力要素 */
input[type="text"], input[type="tel"], input[type="email"], 
input[type="date"], input[type="number"], select, textarea {
    width: 100%;
    max-width: 400px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fdfdfd;
    font-size: 1rem;
}

textarea.large-textarea {
    max-width: 100%;
    min-height: 200px;
}

/* 特殊パーツ */
.flex-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.checkbox-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 10px; 
}
.line-info {
    display: inline-block;
    font-size: 0.8rem;
    color: var(--main-pink);
    font-weight: bold;
}

/* 送信ボタン */
.submit-btn {
    background: var(--main-pink);
    color: #fff;
    padding: 20px 60px;
    border: none;
    border-radius: 50px;
    display: block;
    margin: 50px auto;
    width: 100%;
    max-width: 400px;
    font-size: 1.4rem;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 15px rgba(216, 27, 96, 0.3);
}

/* =================================================
   6. Q&A / メリット
   ================================================= */
.qanda-item { margin-bottom: 25px; border-bottom: 1px dashed #eee; padding-bottom: 20px; }
.qanda-item dt { font-weight: bold; color: var(--main-pink); padding-left: 40px; position: relative; }
.qanda-item dt::before { content: "Q"; position: absolute; left: 0; width: 30px; height: 30px; background: var(--main-pink); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.qanda-item dd { background: var(--sub-pink); padding: 15px; border-radius: 10px; margin: 10px 0 0 40px; }

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 800px;
    margin: 20px 0;
}
.benefit-item { border: 1px solid #f0f0f0; text-align: center; border-radius: 8px; overflow: hidden; }
.benefit-txt { padding: 10px; color: var(--main-pink); font-weight: bold; font-size: 0.85rem; }

/* =================================================
   7. その他
   ================================================= */
.page-top { position: fixed; right: 30px; bottom: 30px; z-index: 99; }
.page-top a { width: 50px; height: 50px; background: var(--main-pink); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; }
footer { text-align: center; padding: 40px 0; background: #333; color: #fff; }

/* =================================================
   8. スマホ最適化（1000px以下）
   ================================================= */
@media (max-width: 1000px) {
    .info-group, .contact-stack, .shop-info-section, .banner-content {
        margin-left: 0 !important;
        padding: 40px 20px;
    }

    .hero-text h1 { font-size: 1.6rem; }
    .hero-text h1 br { display: none; }

    .benefit-grid { grid-template-columns: repeat(2, 1fr); }
    
    /* 店舗情報の縦並び */
    .shop-row { flex-direction: column; align-items: flex-start; }
    .shop-row dt { width: 100%; margin-bottom: 5px; padding-left: 0; }
    
    /* フォームの縦並び */
    .form-tbl th, .form-tbl td { display: block; width: 100%; }
    .form-tbl th { border-bottom: none; padding-bottom: 5px; }
    
    .line-info { display: block; margin-top: 5px; }
}
/* =================================================
   追加：特定のセクションをセンターに配置
   ================================================= */

/* 1. 店長メッセージバナーの中央寄せ */
.mid-banner {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 40px;
}
.mid-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像自体を中央に */
}

/* 2. 9つのメリットセクションの中央寄せ */
/* =================================================
   修正：.benefits のスマホ表示調整
   ================================================= */

/* PC・共通設定の修正 */
.benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 800px;
    margin: 20px auto; /* 左右をautoにして中央寄せを確定させる */
    padding: 0;
    list-style: none;
}

/* スマホ最適化（1000px以下）の修正 */
@media (max-width: 1000px) {
    .benefits {
        padding: 0; /* 親のpaddingと干渉しないよう調整 */
        width: 100%;
    }

    .benefit-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%; /* 固定幅を解除して画面幅に合わせる */
        margin: 20px 0;   /* スマホ時は左寄せ、あるいは中央なら auto */
        width: 100%;
    }
    
    .benefit-item {
        width: 100%; /* 各アイテムが枠内に収まるように */
    }
}
/* =================================================
   修正：long-image-container の中央寄せ
   ================================================= */
.long-image-container {
    width: 100%;
    max-width: 1000px; /* 画像の最大サイズに合わせて調整してください */
    margin: 40px auto !important; /* 親要素内での中央寄せを強制 */
    text-align: center;
    padding: 0;
}

.responsive-long-image {
    width: 100%;       /* 親要素の幅いっぱいに広げる */
    height: auto;      /* アスペクト比を維持 */
    display: block;    /* 下部の隙間を消す */
    margin: 0 auto;    /* 画像自体を中央に */
}

/* スマホ表示（1000px以下）の微調整 */
@media (max-width: 1000px) {
    .long-image-container {
        margin: 20px 0 !important; /* スマホ時は左右の余白をなくす */
        padding: 0;
        width: 100%;
    }
    
    .responsive-long-image {
        width: 100vw; /* 画面の端から端まで表示したい場合 */
        margin-left: calc(50% - 50vw); /* 親要素のpaddingを無視して全幅表示 */
    }
}
.page-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 9999;
    /* 初期状態：非表示 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease; /* ふわっと動かす設定 */
}

/* スクロールして半分過ぎた時に付与されるクラス */
.page-top.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.page-top a {
    width: 60px;
    height: 60px;
    background: var(--main-pink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(216, 27, 96, 0.4);
    font-size: 1.2rem;
}

@media (max-width: 1000px) {
    .page-top {
        right: 20px;
        bottom: 20px;
    }
    .page-top a {
        width: 50px;
        height: 50px;
    }
}
/* PC用の既存設定 */
.info-group {
    margin-left: 100px;
}

/* スマホ用の修正設定（画面幅が768px以下のとき） */
@media screen and (max-width: 768px) {
    .info-group {
        margin-left: 15px!important; /* スマホでは左右に15px程度の余白にする */
        margin-right: 15px;
    }
}
/* 1. コンテナ全体の余白と横幅をスマホ用にリセット */
@media screen and (max-width: 768px) {
    .info-group, 
    .contact-stack, 
    .shop-info-section {
        margin-left: 15px !important;  /* 100pxを15pxに強制上書き */
        margin-right: 15px !important;
        width: auto !important;        /* 横幅を画面に合わせる */
        padding: 20px 0 !important;    /* パディングもスッキリさせる */
        overflow-x: hidden;            /* 横揺れを完全に防止 */
    }

    /* 2. メリットグリッドの調整 */
    .benefit-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important; /* スマホは2列 */
        gap: 10px !important;
        margin: 20px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* 3. 画像が親要素（li）を突き破らないように制限 */
    .benefit-item .p-imgWrap img {
        width: 100% !important;        /* 親の幅に合わせる */
        height: auto !important;       /* アスペクト比を維持 */
        max-width: none !important;    /* 固定幅の制限を解除 */
        display: block;
    }
}

/* --- PC用の設定（既存のものに追記・修正） --- */
.pc-only {
    display: inline; /* PCでは改行を有効にする */
}

.text-block {
    display: inline-block; /* 単語の塊を維持する */
}

//* =================================================
   スマホ・共通パーツ設定（PCレイアウト正常化版）
   ================================================= */

/* 1. PCではスマホ用改行を絶対に無効化 */
.sp-br {
    display: none !important;
}

/* 2. スマホ専用設定（768px以下） */
@media screen and (max-width: 768px) {
    /* 改行タグを有効にする */
    .sp-br {
        display: inline !important;
    }

    /* 【最重要】スマホ時のみ左右15pxに上書き */
    .info-group, 
    .contact-stack, 
    .shop-info-section, 
    .banner-content,
    .qanda-section {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: auto !important;
        padding-right: 0 !important;
    }

    /* キャッチコピーの調整 */
    .hero-text {
        text-align: center;
    }
    .hero-text h1 {
        font-size: 1.5rem !important;
        line-height: 1.5;
        word-break: break-word;
    }
    .hero-text h1 .pc-only {
        display: none;
    }

    /* オリジナル見出し（スマホサイズ） */
    .main-catch {
        font-size: 1.3rem !important;
        text-align: center !important;
    }
} /* ← ここで確実にスマホ設定を閉じます。これによりPCの100pxが復活します */

/* =================================================
   3. PC・スマホ共通の追加デザイン（メディアクエリの外）
   ================================================= */

/* ゴールドSEOタイトル（文字と線の両方をゴールドに） */
h2.seo-title.color-gold {
    color: #b8860b !important;
    border-left: 6px solid #d4af37 !important;
}

/* オリジナル見出し（ピンク背景＋金枠） */
.header-box-gold {
    padding: 25px !important;
    border-left: 8px solid #d4af37 !important;
    background-color: #fdf2f8 !important;
    margin: 40px 0 !important;
    display: block !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.main-catch {
    font-size: 1.8rem !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    font-weight: bold !important;
}} } } /* ←重要：ファイル内の閉じカッコ不足を強制リセットします */

/* =================================================
   スマホ・共通パーツ設定（PCレイアウト正常化版）
   ================================================= */

/* 1. PCではスマホ用改行を絶対に無効化 */
.sp-br {
    display: none !important;
}

/* 2. スマホ専用設定（768px以下） */
@media screen and (max-width: 768px) {
    /* 改行タグを有効にする */
    .sp-br {
        display: inline !important;
    }

    /* スマホ時のみ左右15pxに上書き */
    .info-group, 
    .contact-stack, 
    .shop-info-section, 
    .banner-content,
    .qanda-section,
    .benefits {
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: auto !important;
        padding-right: 0 !important;
    }

    .hero-text h1 {
        font-size: 1.5rem !important;
        text-align: center;
    }

    .main-catch {
        font-size: 1.3rem !important;
        text-align: center !important;
    }
} 

/* =================================================
   3. PC・スマホ共通の追加デザイン（メディアクエリの外）
   ================================================= */

/* ゴールドSEOタイトル */
h2.seo-title.color-gold {
    color: #b8860b !important;
    border-left: 6px solid #d4af37 !important;
}

/* オリジナル見出し（ピンク背景＋金枠） */
.header-box-gold {
    padding: 25px !important;
    border-left: 8px solid #d4af37 !important;
    background-color: #fdf2f8 !important;
    margin: 40px 0 !important;
    display: block !important;
}

.main-catch {
    font-size: 1.8rem !important;
    color: #333 !important;
    font-weight: bold !important;
}