@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 最終楽章 響け！ユーフォニアム×JR東海 後編
   base.css の値をここで上書きするだけ（base.css は触らない）。
   参照した LP: https://recommend.jr-central.co.jp/oshi-tabi/eupho-finale_autumn/
     ・カラー変数        … 仕様書の指定値
     ・.content-holder   … LP の .wrapper__inner-contents（オフホワイト＋上下ダブルボーダー）
     ・.iconButton       … 支給の「ボタンデザイン参考.png」（ワインレッド＋金の二重縁）
   rem 換算: デザイン px ÷ 100 = rem（--design-width-sp: 430）
   ============================================================ */


/* ============================================================
   BRAND COLORS
   ============================================================ */
:root {
    --color-main:   #fef7fa;   /* ページ背景（淡いピンク） */
    --color-sub1:   #926f4f;   /* 罫線・見出し（ブラウン） */
    --color-sub2:   #c497a1;   /* サブ（くすみピンク） */
    --color-sub3:   #ac385a;   /* アクセント */
    --color-sub4:   #a80055;   /* アクセント（強） */
    --color-sub5:   #6b4a30;   /* 濃ブラウン */
    --color-local:  #bf8b99;
    --color-text:   #2a100f;
    --color-button: #87203a;   /* ボタン地（ワインレッド） */
    --font-family:  'Zen Kaku Gothic New', YakuHanJP, sans-serif;

    /* この企画だけで使う色 */
    --color-gold:      #d9b96a;   /* ボタンの金縁 */
    --color-gold-dark: #b8934a;
    --color-offwhite:  #fffdf8;   /* LP の --bg02-color（カード地） */
    --color-disabled:  #a99c92;   /* 非活性の地（白アイコンが読める濃さ） */
}


/* ============================================================
   FONT — 見出しは明朝（LP の fontZenOldMincho）
   ============================================================ */
.fontMincho,
.dateSection__label,
.noveltyPhase__title,
.arSpot__place {
    font-family: 'Zen Old Mincho', serif;
}


/* ============================================================
   CONTENT HOLDER — LP の .wrapper__inner-contents
   オフホワイト地 ＋ 上下ダブルボーダー（太線 0.08rem ＋ 内側の細線 0.01rem）
   ★ 太線を border、細線を ::before / ::after の絶対配置で描く。
     border を 2 本重ねると角の処理が破綻するため分けている。
   ============================================================ */
.content-holder {
    width: 96%;
    background-color: var(--color-offwhite);
    border: 0;
    border-top: 0.08rem solid var(--color-sub1);
    border-bottom: 0.08rem solid var(--color-sub1);
    margin-top: 0.16rem;
    position: relative;
    border-radius: 0rem;
    padding-bottom: 0.20rem;
}

.content-holder::before,
.content-holder::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 0.01rem;
    background-color: var(--color-sub1);
    pointer-events: none;
}

.content-holder::before {
    top: 0.04rem;
}

.content-holder::after {
    bottom: 0.04rem;
}


/* ============================================================
   SECTION TITLE 画像（ttl01〜03）— LP は h2 幅 540/750
   ============================================================ */
.title-img-container {
    width: 90%;
    margin: 0.24rem auto 0;
}

/* セクション小見出し（明朝）＋ 上に唐草の飾り（LP の deco02.png） */
.subTitle {
    position: relative;
    margin: 0.12rem auto 0.12rem;
    padding-top: 0.26rem;
    font-size: 0.26rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    color: var(--color-text);
}

.subTitle::before {
    content: '';
    position: absolute;
    top: 0.02rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.89rem;
    height: 0.26rem;
    background-image: url("../img/deco02.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}


/* ============================================================
   期間表示（LP の .box__period）
   白地の上下細線 ＋ 中にブラウンの帯（白文字）
   ============================================================ */
.dateSection {
    width: 91%;
    margin: 0.16rem auto;
    padding: 0.04rem 0;
    border-top: 0.01rem solid var(--color-sub1);
    border-bottom: 0.01rem solid var(--color-sub1);
}

.dateSection__label {
    display: block;
    width: 100%;
    padding: 0.05rem 0;
    background-color: var(--color-sub1);
    color: #fff;
    font-size: 0.18rem;
    font-weight: 700;
    text-align: center;
}

.dateSection__value {
    padding: 0.08rem 0.06rem 0.04rem;
    font-size: 0.17rem;
    text-align: center;
    color: var(--color-text);
}


/* ============================================================
   ICON BUTTON — 支給デザイン（ボタンデザイン参考.png）
     ワインレッドのピル型。縁は「外周の細い金線」＋「内側の金線」の二重。
   ★ 内側の線は base.css の ::before（既定は白）を金に変えて使う。
     base.css は inset ショートハンドで4辺を指定しているが、古い iOS Safari で
     効かないので 4 辺個別で上書きする（inset: auto を後ろに書くと個別指定を
     打ち消して枠が消えるので書かない）。
   ★ 右アイコンは共有の /icon//right.svg（テンプレ標準）。
   ============================================================ */
.iconButton {
    height: 0.80rem;
    max-width: 3.80rem;
    border-radius: 0.40rem;
    background: var(--color-button);
    border: 0.015rem solid var(--color-gold);
    box-shadow: 0 0.03rem 0.06rem rgba(42, 16, 15, 0.18);
}

.iconButton::before {
    top: 0.05rem;
    right: 0.05rem;
    bottom: 0.05rem;
    left: 0.05rem;
    border: 0.015rem solid var(--color-gold);
    border-radius: 0.33rem;
}

.iconButton .iconButtonText,
.simpleButton .iconButtonText {
    /* 見出しと同じ Noto Serif JP（テンプレの .fontNotoSerif と同じ書体）。
       base.css は .iconButtonText に font-family を持たないので、ここの指定が効く。
       占いページの「トップページに戻る」（.simpleButton）も同じ文字要素なので揃える。 */
    font-family: 'Noto Serif JP', serif;
    font-size: 0.20rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.iconButton .icon2nd img {
    height: 0.34rem;
}

/* 非活性：地を落として金縁も鈍くする。白アイコンが読める濃さを保つ
   （地を明るくすると白の共有アイコンが見えなくなる） */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: var(--color-disabled);
    border-color: #cfc3b4;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: #cfc3b4;
}


/* ============================================================
   ノベルティの弾一覧（毎月デザインが変わる）
   ============================================================ */
.noveltyPhaseList {
    width: 91%;
    margin: 0.14rem auto 0.04rem;
}

.noveltyPhase {
    padding: 0.07rem 0.06rem;
    border-bottom: 0.01rem dashed var(--color-sub2);
    text-align: center;
}

.noveltyPhase:last-child {
    border-bottom: 0;
}

.noveltyPhase__title {
    font-size: 0.19rem;
    color: var(--color-sub5);
}

.noveltyPhase__date {
    font-size: 0.16rem;
    color: var(--color-text);
}

/* 開催中の弾はくすみピンクの地で強調 */
.noveltyPhase.is-now {
    background-color: rgba(196, 151, 161, 0.18);
    border-radius: 0.08rem;
}


/* ============================================================
   AR スポット（駅名＋キャラ名 → ボタン）
   ============================================================ */
.arSpot {
    margin: 0.18rem auto 0.06rem;
}

.arSpot__place {
    margin-bottom: 0.04rem;
    font-size: 0.19rem;
    text-align: center;
    color: var(--color-sub5);
}


/* ============================================================
   壁紙サムネ（4種・未獲得は「?」カード）
   ★ 比率は 9:19.5。base.css の .thumbnail img は height:auto なので
     プレースホルダー SVG 側で比率を持たせている（aspect-ratio は足さない）。
   ============================================================ */
.thumbnails-container.cols-4 {
    padding: 0.12rem 0.10rem 0.04rem;
}

.thumbnail.locked img {
    border-radius: 0.06rem;
}

.thumbnail.wallpaperExist img {
    border-radius: 0.06rem;
    box-shadow: 0 0.02rem 0.05rem rgba(42, 16, 15, 0.2);
}


/* ============================================================
   注意書き（LP は本文ゴシック）
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution * {
    font-family: 'Zen Kaku Gothic New', YakuHanJP, sans-serif;
}

/* ★ base.css の ul.caution は margin: 0.12rem 0 0（左右 0）。
   幅だけ 91% にすると左寄せのままになり、右側だけ 9% の余白が空く（実際に発生）。
   幅を絞るときは必ず左右 auto で中央に置く。セレクタも base と同じ ul.caution にして
   margin の上書きを確実にする。 */
ul.caution {
    width: 91%;
    margin: 0.12rem auto 0;
}


/* ============================================================
   説明ブロックの地紋（.noteBlock）
   LP の .box__wallpaper（壁紙ブロック）と同じ五線譜の透かしを敷く。
   各セクションの短いリード文（INTRO / ボイス / ノベルティ / AR / 占い）で共用。
   ★ 中の .message-container が幅 100% / 中央寄せなので、ここでは幅と余白だけ持つ。
   ============================================================ */
.noteBlock {
    width: 90%;
    margin: 0.02rem auto;
    padding: 0.20rem 0.10rem 0.20rem;
    background-image: url("../img/bg-note02.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
}

/* 中の message-container は上下マージンを持っているので、二重に空かないよう詰める */
.noteBlock .message-container {
    margin-top: 0;
    margin-bottom: 0;
}

/* 画像を載せる場合（ノベルティのイメージ等）。地紋が透けるよう左右を広く取り、
   画像自体は少し内側に収める。 */
.noteBlock--image {
    width: 96%;
    padding: 0.14rem 0.10rem;
}

.noteBlock--image .message-container img {
    width: 92%;
    margin-inline: auto;
}


/* ============================================================
   特典引換期間・場所カード（.exchangeBox）
   LP トンマナ: オフホワイト地／ブラウンの帯見出し／細い罫線で項目を仕切る。
   ラベルは左右に細線を伸ばしたキャプション形（LP の見出し処理に合わせる）。
   ============================================================ */
.exchangeBox {
    width: 96%;
    margin: 0.20rem auto 0.16rem;
    background-color: #fff;
    border: 0.015rem solid var(--color-sub1);
    border-radius: 0.08rem;
    overflow: hidden;
}

.exchangeBox__head {
    padding: 0.08rem 0.10rem;
    background-color: var(--color-sub1);
    color: #fff;
    font-size: 0.20rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.02em;
}

.exchangeBox__section {
    padding: 0.14rem 0.14rem 0.04rem;
}

.exchangeBox__section + .exchangeBox__section {
    border-top: 0.01rem solid rgba(146, 111, 79, 0.35);
}

/* ラベル：中央のテキストの左右へ細線を伸ばす */
.exchangeBox__label {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.08rem;
    color: var(--color-sub5);
    font-size: 0.17rem;
    font-weight: 700;
}

.exchangeBox__label::before,
.exchangeBox__label::after {
    content: '';
    flex: 1;
    height: 0.01rem;
    background-color: rgba(146, 111, 79, 0.45);
}

/* 引換期間：弾名と期間の2列（狭い端末では自動で折り返す） */
.exchangePeriod {
    margin: 0;
}

.exchangePeriod__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.02rem 0.10rem;
    padding: 0.06rem 0.06rem;
    border-radius: 0.06rem;
}

.exchangePeriod__row dt {
    font-size: 0.17rem;
    font-weight: 700;
    color: var(--color-sub3);
    white-space: nowrap;
}

.exchangePeriod__row dd {
    margin: 0;
    font-size: 0.16rem;
    font-weight: 700;
    color: var(--color-text);
}

/* 開催中の弾を強調（トップの弾一覧と同じ扱い） */
.exchangePeriod__row.is-now {
    background-color: rgba(196, 151, 161, 0.20);
}

.exchangeBox__shop,
.exchangeBox__hours {
    padding-bottom: 0.06rem;
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    color: var(--color-text);
}

.exchangeBox__caution {
    width: 100%;
    padding: 0.02rem 0.14rem 0.14rem !important;
    text-align: left;
}