/* =========================
  GENERATOR ページ全体
  ========================= */
/* ★ すべて generator 専用にしたいので、root は必ず body.generator-page にする */
body.generator-page {
    margin: 0;
    padding: 0;
    font-family: "Zen Maru Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
    color: #ffffff;
    /* 読み込み中の保険カラー */
    background-color: #6be0f0;
    /* JS でランダム上書きされる前のデフォ背景 */
    background-image: url('../img/gen_bg01.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    /* index 側の background-blend-mode の影響を打ち消す */
    background-blend-mode: normal;
}

/* 真ん中のコンテンツ全体（タイトル＋リード＋カード） */
body.generator-page .generator-page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px 32px;
    box-sizing: border-box;
    text-align: center;
}

body.generator-page .generator-page-title {
    margin: 0 0 16px;
}

/* タイトル画像のサイズ調整 */
body.generator-page .generator-page-title img {
    display: block;
    max-width: 900px;
    /* 好きな横幅に調整してOK */
    width: 100%;
    height: auto;
    margin: 0 auto;
}

body.generator-page .generator-page-lead {
    margin: 0 auto 0;
    line-height: 1.7;
    font-size: 1.2rem;
    max-width: 640px;
}

/* 中央の角丸カード */
body.generator-page .generator-card {
    background: #e3f6f7;
    border-radius: 32px;
    padding: 32px 24px 40px;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

body.generator-page .generator-card p {
    margin: 0.4em 0;
    text-align: center;
    line-height: 1.6;
}

/* 戻るボタン（画像版） */
body.generator-page .generator-back {
    margin-top: 4px;
    margin-bottom: 50px;
    text-align: center;
}

body.generator-page .generator-back-btn {
    display: inline-block;
}

body.generator-page .generator-back-btn img {
    display: inline-block;
    max-width: 180px;
    /* ボタンの大きさはここで調整してOK */
    width: 100%;
    height: auto;
}

/* ちょっとふわっとするホバー */
body.generator-page .generator-back-btn:hover img {
    opacity: 0.88;
    transform: translateY(-3px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* スマホ：ちょっと余白ゆるめる */
@media (max-width: 768px) {
    body.generator-page .generator-page-wrapper {
        justify-content: flex-start;
        padding-top: 72px;
    }

    body.generator-page .generator-card {
        border-radius: 24px;
        padding: 24px 16px 32px;
    }

    body.generator-page .generator-page-title {
        font-size: 1.4rem;
    }
}

/* =========================
  ジェネレーター 3カラムレイアウト
  ========================= */
/* 全体を3カラムにするラッパー */
body.generator-page .generator-layout {
    width: 100%;
    max-width: 1500px;
    /* ちょい広げて、サイドを外側に */
    margin: 0 auto;
    display: grid;
    /* 左右は可変、真ん中だけ640px固定 */
    grid-template-columns:
        minmax(0, 1fr)
        /* 左カラム（画面端まで広がる） */
        minmax(0, 640px)
        /* 真ん中（ジェネレーター） */
        minmax(0, 1fr);
    /* 右カラム（画面端まで広がる） */
    column-gap: 70px;
    /* 真ん中との距離 */
    align-items: center;
    /* 高さ方向の中央揃え */
}

/* 真ん中のブロック（タイトル＋カード＋戻るボタン） */
body.generator-page .generator-main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 左右カラム共通 */
body.generator-page .generator-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 高さ方向の真ん中 */
    gap: 24px;
}

/* 左カラムの中身を画面の左側へ寄せる */
body.generator-page .generator-side--left {
    align-items: flex-start;
}

/* 右カラムの中身を画面の右側へ寄せる */
body.generator-page .generator-side--right {
    align-items: flex-end;
}

/* サイドに置くテキストリンク */
body.generator-page .side-link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #527aa0;
    text-decoration: none;
    font-size: 0.9rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.generator-page .side-link:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 左右に置く画像バナー */
body.generator-page .side-image-link img {
    display: block;
    max-width: 240px;
    /* もっと大きくしたければここを増やす */
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body.generator-page .side-image-link:hover img {
    opacity: 0.92;
    transform: translateY(-3px);
}

/* タブレット以下では左右を消して、1カラムに戻す */
@media (max-width: 960px) {
    body.generator-page .generator-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    body.generator-page .generator-side {
        display: none;
    }
}

/* =========================
  SP メニュー（ジェネレーター用の上書き）
  ========================= */
/* generator ページのSPメニュー背景をシンプルに（ぼかし付き） */
body.generator-page .sp-menu {
    position: fixed;
    inset: 0;
    /* うっすら暗く＋ぼかし */
    background-color: rgba(30, 58, 87, 0.4);
    background-image: none;
    /* iOS Safari 用 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* ジェネレーターの SP メニュー内の文字色 */
body.generator-page .sp-menu__panel {
    color: #ffffff;
}

body.generator-page .sp-menu__panel a {
    color: #ffffff;
    text-decoration: none;
}

body.generator-page .sp-menu__panel a:hover {
    text-decoration: underline;
}

/* generator ページのSPメニュー内の画像ボタン */
body.generator-page .sp-menu-list img.menu-btn {
    display: block;
    max-width: 320px;
    /* 好きなサイズに調整してOK */
    width: 100%;
    height: auto;
    margin: 0 auto;
}

/* ===== ジェネレーター PCサイド用 画像ボタン ===== */
body.generator-page .side-menu-btn {
    display: inline-block;
}

body.generator-page .side-menu-btn img {
    display: block;
    max-width: 400px;
    /* ここでボタンの大きさ調整 */
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ホバーでふわっと */
body.generator-page .side-menu-btn:hover img {
    opacity: 0.9;
    transform: translateY(-3px);
}


/* スライダー全体のブロック */
.slider-block {
    margin-top: 1.2em;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* 「ベース」「明度」などのタイトル */
.slider-label-main {
    text-align: center;
    font-size: 0.9rem;
    margin-bottom: 0.2em;
}

/* 左ラベル／スライダー／右ラベル を横一列に */
.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 左右の端ラベル（イエベ／ブルベ など） */
.slider-edge {
    font-size: 0.75rem;
    white-space: nowrap;
}

/* スライダー本体（太さ＆左右で色が変わるベース） */
.slider-row input[type="range"] {
    flex: 1;
    width: 100%;
    margin: 0;

    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    /* 太さ */
    border-radius: 999px;

    /* CSSカスタムプロパティで左右色＆境界位置を管理 */
    --val: 50%;
    background: linear-gradient(to right,
            var(--left-color, #ffe4ec) 0%,
            var(--left-color, #ffe4ec) var(--val),
            var(--right-color, #ffe4ec) var(--val),
            var(--right-color, #ffe4ec) 100%);
}

/* 一番下のスライダーだけ、下に余白を足す */
.generator-card .slider-block--last {
    margin-bottom: 50px;
    /* 好きな値で調整してOK */
}

/* iPhone用：スライダーの影を消す */
.slider-row input[type="range"] {
    box-shadow: none;
}

.slider-row input[type="range"]::-webkit-slider-thumb {
    box-shadow: none;
}

.slider-row input[type="range"]::-moz-range-thumb {
    box-shadow: none;
}

/* WebKit系（Chrome / Safari）のレール */
.slider-row input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 999px;
    background: transparent;
}

/* WebKit系（Chrome / Safari）のつまみ共通 */
.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    margin-top: -8px;
}

/* Firefox 用レール */
.slider-row input[type="range"]::-moz-range-track {
    height: 12px;
    border-radius: 999px;
    background: transparent;
}

/* Firefox 用つまみ共通 */
.slider-row input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
}


/* ここから各スライダー専用のつまみ画像指定 */
/* ベース用つまみ */
.tone-slider::-webkit-slider-thumb {
    background: url('../img/sliderniko.png') no-repeat center / contain;
}

.tone-slider::-moz-range-thumb {
    background: url('../img/sliderniko.png') no-repeat center / contain;
}

/* 明度用つまみ */
.brightness-slider::-webkit-slider-thumb {
    background: url('../img/sliderpanda.png') no-repeat center / contain;
}

.brightness-slider::-moz-range-thumb {
    background: url('../img/sliderpanda.png') no-repeat center / contain;
}

/* 彩度用つまみ */
.saturation-slider::-webkit-slider-thumb {
    background: url('../img/sliderbear.png') no-repeat center / contain;
}

.saturation-slider::-moz-range-thumb {
    background: url('../img/sliderbear.png') no-repeat center / contain;
}

/* 清濁用つまみ */
.clarity-slider::-webkit-slider-thumb {
    background: url('../img/slidershiro.png') no-repeat center / contain;
}

.clarity-slider::-moz-range-thumb {
    background: url('../img/slidershiro.png') no-repeat center / contain;
}

/* ベース（イエベ〜ブルベ） */
.tone-slider {
    --left-color: #ffd76d;
    /* 黄 */
    --right-color: #5ba4ff;
    /* 青 */
}

/* 明度（低〜高） */
.brightness-slider {
    --left-color: #000000;
    /* 黒 */
    --right-color: #ffffff;
    /* 白 */
}

/* 彩度（低〜高） */
.saturation-slider {
    --left-color: #ffffff;
    /* 白 */
    --right-color: #ff00a2;
    /* ビビッドピンク */
}

/* 清濁（濁色〜清色） */
.clarity-slider {
    --left-color: #a6cca6;
    /* 濁ったミント */
    --right-color: #b0ffb0;
    /* クリアなミント */
}

/* ★今の .generator-card の定義を、これに差し替え★ */
.generator-card {
    position: relative;
    /* カードの見せる幅 */
    max-width: 560px;
    width: 100%;
    margin: 40px auto;
    /* 上下40px・中央寄せ */
    box-sizing: border-box;
    /* なみなみの内側の余白（ここはPNGのデザインに合わせて調整） */
    padding: 80px 56px;
    /* 文字色 */
    color: #527aa0;
    /* ここでなみなみPNGを貼る */
    background-image: url('../img/gen_wave_frame.png');
    /* ←作ったPNGのパスに合わせてね */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* 枠いっぱいにフィット */
    background-position: center;
}

/* 中の文字の色を固定するやつは今のままでOK */
.generator-card h1,
.generator-card p,
.generator-card .slider-label-main,
.generator-card .slider-edge,
.generator-card .result {
    color: #527aa0;
}

/* スマホでちょっと余白を減らす用（お好みで） */
@media (max-width: 560px) {
    .generator-card {
        padding: 64px 24px;
    }
}

/* 診断ボタンだけ一旦非表示にする */
.generator-card button {
    display: none;
}