@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — ぶいすぽっ! 橘ひなの × JR東海
   LP（https://recommend.jr-central.co.jp/oshi-tabi/vspo_hinano/）の
   デザインを base.css のクラス構成のまま上書きで再現する。
   base.css は触らない。テンプレのクラス名も変えない。

   LP から取り込んだ意匠:
     ・ページ背景     … linear-gradient(90deg, #f19ebe, #bbb3d8 50%, #79ccf3)  (.wrapper)
     ・content-holder … 白 2px ボーダ + 半透明白 (rgba(255,255,255,.8)) + 角張り (.block)
                        左右に外側の縦帯（左=ピンク / 右=ブルー）      (.block::before/::after)
     ・セクション見出し … 水色帯 + 白ライン入りのタイトル画像（納品素材をそのまま敷く）
     ・弾ラベル       … ピンクベタ帯 + 白文字                          (.present-period)
     ・参加方法ボックス … ピンク見出し + #f9d5e5 の本文                 (.entry-method)
     ・Step ボックス   … グラデ枠 + 白抜き文字                          (.present-step)
   ============================================================ */


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main: #eccae0;
    /* ページ背景（グラデが読めない環境のフォールバック） */
    --color-sub1: #8bdaff;
    /* LP セクション帯の水色 */
    --color-sub2: #e66590;
    /* LP ピンク */
    --color-sub3: #f9d5e4;
    /* 薄ピンク背景 */
    --color-sub4: #a80055;
    /* 濃ピンク（強調文字） */
    --color-sub5: #e8f1f8;
    /* 薄水色背景 */
    --color-local: #f1d511;
    /* 差し色 */
    --color-text: #000000;
    --color-button: #e66590;
    /* CTA ボタン */
    --font-family: 'Zen Maru Gothic', YakuHanJP, sans-serif;

    /* LP のメイングラデーション（1 か所で管理して各所から参照する） */
    --vspo-grad: linear-gradient(90deg, #f19ebe, #bbb3d8 50%, #79ccf3);
}


/* ============================================================
   BACKGROUND — LP の横グラデーション
   base.css の main::before（position:fixed / inset:0 / z-index:-2）が
   全画面の背景レイヤー。--image-bg（bg.webp）より後に読み込まれる
   こちらで上書きしてグラデを直描きする（画像より滑らか）。
   ※ CSS が落ちても assets/img/bg.webp が同じグラデを出すので見た目は崩れない。
   ============================================================ */

.page-content {
    min-height: calc(100vh - 2.00rem);
}

main::before {
    background: var(--vspo-grad) no-repeat center center / cover;
}


/* ============================================================
   CONTENT-HOLDER — LP .block
   白 2px ボーダ / 半透明白 / 角張り。左右の外側に縦帯を出す。
   ============================================================ */
.content-holder {
    background-color: rgba(255, 255, 255, 0.8);
    border: 0.02rem solid #ffffff;
    border-radius: 0;
    /* base.css の .content-holder は width:96% だが左右 auto マージンが無く左寄せに
       なるため、ここで中央寄せを補う（左右に 2% ずつ余白 → 縦帯を置くスペースになる）。 */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.16rem;
    padding-bottom: 0.16rem;
    overflow: visible;
}

/* quiz/ 配下は .content-holder を .content-holder-wrapper で包む構造。
   base.css / quiz.css に定義が無いのでここで最小限だけ与える。 */
.content-holder-wrapper {
    display: block;
    width: 100%;
}

/* LP .block::before / ::after — 左=ピンク / 右=ブルーの水玉縦帯
   LP は 5px 幅の帯にベタ色を敷き、その上へ bg_main.png（白い水玉が縦に
   連なる 5x478 の透過ストライプ）を repeat-y で重ねている。
   side_dots.webp は bg_main.png をロスレス変換したもの（画素完全一致）。
   帯幅 5px = 0.05rem / 外側オフセット 7px = 0.07rem（LP の left/right:-7px と同値）。
   background-size:100% auto で PC 幅（1rem=109.4px）でも帯いっぱいに広がる。 */
.content-holder::before,
.content-holder::after {
    content: '';
    position: absolute;
    top: 0;
    width: 0.05rem;
    height: 100%;
    background-image: url("../img/side_dots.webp");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
}

.content-holder::before {
    left: -0.07rem;
    background-color: #fe8dd2;
}

.content-holder::after {
    right: -0.07rem;
    background-color: #62e2fe;
}

/* content-holder は横 padding を持たないため、左寄せテキストが端に付く。
   注意書き・本文に横 padding を補う（テンプレ共通の詰まり対策）。 */
.content-holder ul.caution {
    padding-left: 0.16rem;
    padding-right: 0.16rem;
    box-sizing: border-box;
}

.content-holder .message-container {
    padding-left: 0.14rem;
    padding-right: 0.14rem;
    box-sizing: border-box;
}


/* ============================================================
   SECTION HEADING — 納品のタイトル画像（水色帯 + 白ライン入り）
   帯は画像に焼き込まれているので、テンプレのグラデ帯は消して
   画像を全幅に敷くだけのコンテナにする。
   ============================================================ */
.section-heading {
    background: none;
    padding: 0;
    margin: 0.20rem auto 0;
    line-height: 0;
}

.section-heading::after {
    display: none;
}

.section-heading img {
    width: 100%;
    height: auto;
    display: block;
}

/* 画像が無い場合のテキスト見出し（フォールバック） */
.section-heading-text {
    display: block;
    color: #ffffff;
    background-color: var(--color-sub1);
    padding: 0.14rem 0.10rem;
    font-family: var(--font-family);
    font-size: 0.24rem;
    font-weight: 900;
    line-height: 1.2;
    text-shadow:
        0 0 0.03rem #ffffff,
        0 0.02rem 0 rgba(0, 0, 0, 0.12);
    box-shadow:
        inset 0 0.03rem 0 #ffffff,
        inset 0 -0.03rem 0 #ffffff;
}


/* ============================================================
   PHASE LABEL — LP .present-period（ピンクベタ帯 + 白文字）
   テンプレの .contents-title .titleBorder をそのまま使う。
   ============================================================ */
.contents-title {
    margin-top: 0.18rem;
    margin-bottom: 0.08rem;
}

.contents-title .titleBorder {
    padding: 0.08rem 0.26rem;
    font-size: 0.22rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

/* 弾の期間表記（第1弾 8/5(水)〜9/16(水)） */
.phase-period {
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 0.20rem;
    line-height: 1.35;
    color: var(--color-sub4);
    text-align: center;
    margin: 0 auto 0.12rem;
}


/* ============================================================
   FIGURE — LP の画像ブロック（グラデ枠 + 白マット）
   .present-img 相当。画像を LP と同じ額装で見せる。
   ============================================================ */
.vspo-figure {
    width: 92%;
    max-width: 3.80rem;
    margin: 0.12rem auto;
    padding: 0 0.07rem 0.07rem;
    /* background-image: var(--vspo-grad); */
    box-sizing: border-box;
}

.vspo-figure__inner {
    background-color: #ffffff;
    padding: 0.10rem 0.06rem 0.12rem;
    box-sizing: border-box;
}

.vspo-figure__inner img {
    width: 100%;
    height: auto;
    display: block;
}

.vspo-figure__caption {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.11rem;
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
    margin-top: 0.08rem;
}


/* ============================================================
   PRINT STEPS — LP .present-step（グラデ枠 + 白抜き文字）
   ============================================================ */
.vspo-steps {
    width: 92%;
    max-width: 3.80rem;
    margin: 0.16rem auto;
    padding: 0.16rem 0.14rem;
    background-image: var(--vspo-grad);
    border-radius: 0.10rem;
    box-sizing: border-box;
}

.vspo-step+.vspo-step {
    margin-top: 0.18rem;
}

.vspo-step img {
    width: 100%;
    height: auto;
    display: block;
}

.vspo-step__title {
    font-family: var(--font-family);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.20rem;
    line-height: 1;
    margin: 0.10rem 0 0.06rem;
}

.vspo-step__text {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    color: #ffffff;
    font-size: 0.135rem;
    line-height: 1.6;
}


/* ============================================================
   WALLPAPER / PRIZE THUMBNAILS
   2 列。A / B のラベルを LP の .drawing-present__ttl 風にする。
   ============================================================ */
.thumbnails-container {
    padding-left: 0.14rem;
    padding-right: 0.14rem;
    box-sizing: border-box;
}

.thumbnail {
    position: relative;
}

.thumbnail img {
    border: 0.01rem solid #ffffff;
}

/* 未取得サムネ（.locked）は半透明にして、取得済みとひと目で区別できるようにする。
   画像はサンプル表示なので大きく落とし、A/B ラベルは読めるようグレーに置き換える
   （グラデのままだと未取得に見えない）。
   ※ wallpaper/choose.php は逆に「取得済み(.unlocked)」を落とすので、
     あちらはページ内 <style> で別途指定している。クラス名が違うので競合しない。 */
.thumbnail.locked img {
    opacity: 0.45;
}

.thumbnail.locked .vspo-ab-label {
    background-image: none;
    background-color: #b9b3bd;
}

.vspo-ab-label {
    display: block;
    width: 1.10rem;
    max-width: 100%;
    margin: 0 auto 0.06rem;
    padding: 0.03rem 0;
    background-image: var(--vspo-grad);
    border-radius: 0.07rem;
    color: #ffffff;
    font-family: var(--font-family);
    font-weight: 900;
    font-size: 0.15rem;
    line-height: 1.4;
    text-align: center;
}

.wp-thumb-name {
    font-family: var(--font-family);
    font-weight: 700;
    color: var(--color-sub4);
}


/* ============================================================
   TEXT LINK — 応募要項 PDF など（ボタンにしないプレーンリンク）
   ============================================================ */
.vspo-textlink {
    display: inline-block;
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    font-size: 0.15rem;
    font-weight: 700;
    color: #0084ca;
    text-decoration: underline;
    margin: 0.14rem auto 0.04rem;
}


/* ============================================================
   BUTTONS — LP の CTA に寄せる
   base.css の .iconButton は sub1→sub2 のグラデ。button-bg 付きは
   --color-button（ピンク）。ここでは角を LP 寄りに少し落とす。
   ============================================================ */
.iconButton {
    border-radius: 0.12rem;
    height: 0.76rem;
}

.iconButton::before {
    border-radius: 0.09rem;
}

.iconButton .iconButtonText {
    font-family: var(--font-family);
    font-weight: 700;
}

.simpleButton,
.toOshitabiTop {
    font-family: var(--font-family);
    font-weight: 700;
    border-radius: 0.09rem;
}

.loginRgisterButton .iconButtonText {
    font-family: var(--font-family);
    font-weight: 700;
}


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   企画ごとの button-bg / グラデを上書きするため !important で最優先化。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, gray, darkgray) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 0.7;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}


/* ============================================================
   CODE CONTAINER — 当選者ID / 識別ID / プリント予約番号
   ============================================================ */
.code-container {
    background-color: #ffffff;
    border: 0.01rem solid var(--color-sub2);
}

.code-text {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif;
    color: var(--color-sub4);
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   base.css 末尾で .fontNotoSans が var(--font-family) に上書きされて
   しまうため、custom.css（後読み）で実フォント名を強制する。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}

/* LP の注意書きに合わせて小さめ・行間広めにする */
ul.caution li {
    font-size: 0.115rem;
    line-height: 1.6;
    color: var(--color-text);
}