@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — イベントカラー変数（企画ごとに書き換え）
   base.css のデフォルト値をここで上書きするだけ。
   base.css 自体は触らない。

   WORKFLOW:
     1. :root の色変数を企画カラーに変更する
     2. 背景やフォントのカスタマイズはコメントアウトを外して追記
     3. 共通コンポーネントの変更は base.css へ
   ============================================================ */


/* ============================================================
   BRAND COLORS — 企画ごとに変更する
   ============================================================ */
:root {
    --color-main: #eeece1;
    /* ページ背景色（クリーム。bg_main.webp のタイル地色） */
    --color-sub1: #343029;
    /* メインカラー（黒褐色：帯・枠・ボタン地） */
    --color-sub2: #b99b00;
    /* サブカラー（金：アイコン・角飾り） */
    --color-sub3: #c8161d;
    /* アクセント（赤） */
    --color-sub4: #c8161d;
    /* アクセント濃（赤） */
    --color-sub5: #efe7c1;
    /* 薄い金背景 */
    --color-local: #f1d511;
    /* 差し色（黄色） */
    --color-text: #000000;
    /* テキストカラー */
    --color-button: #c8161d;
    /* ボタンカラー（赤） */
    --font-family: 'Zen Antique', 'Noto Serif JP', YakuHanJP, serif;

    /* デザイン再現用（custom.css 内でのみ使う） */
    --hy-gold: #b99b00;
    --hy-gold-dark: #8f7800;
    --hy-red: #c8161d;
    --hy-dark: #343029;
    --hy-cream: #eeece1;
}


/* ============================================================
   BACKGROUND (任意)
   企画の背景色・パターンが必要な場合にコメントアウトを外す
   ============================================================ */
/* body { background-color: #f0e8ff; } */


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   企画ごとの button-bg / グラデを上書きするため !important で最優先化。
   base.css の .iconButton[disabled] と同じ gray グラデを採用。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    /* デザイン（design_top.jpg）は非活性もフラットな中間グレー。
       グラデ・半透明にはしない。アイコンは共有の白 SVG のままで読める。 */
    background: #aaa !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1;
}

.iconButton[disabled] .iconButtonText,
.iconButton.disabled .iconButtonText {
    color: #fff !important;
}

/* disabled の内側白枠も無効化（押せそうに見えないよう） */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* ------------------------------------------------------------
   非活性アイコンを濃い灰色にする（任意 — 白系ボタンの企画のみ）

   上のデフォルトは「暗い灰グラデの地 ＋ 白のアイコン/文字」なので、
   アイコンは白のままでよい。
   LP トンマナに合わせて disabled の地を白〜薄灰に上書きした企画では、
   白アイコンが地に溶けて消えるため、下のブロックのコメントを外す。

   アイコンは <img> の外部 SVG なので fill / color では色を変えられない。
   grayscale(1) を掛けると、企画のメインカラーが輝度どおりの灰色に落ちる
   （例: #8a579a → #676767）ので、これで「濃い灰色」を作る。
   ------------------------------------------------------------ */
/* .iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    filter: grayscale(1);
} */


/* ============================================================
   FONT OVERRIDE (任意)
   企画カスタムフォントが必要な場合 — info.inc.php の Google Font
   リンクと合わせて設定する
   ============================================================ */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); */
/* main { font-family: "Noto Serif JP", sans-serif; } */
/* .fontEvent { font-family: "Noto Serif JP", sans-serif !important; } */


/* ============================================================
   FONT UTILITY OVERRIDE — base.css のバグ修正 + caution の強制統一
   base.css 末尾 (line 1106) で .fontNotoSans が var(--font-family) で
   上書きされており、Noto Sans JP に切り替わらない。custom.css は base.css
   の後で読み込まれるためここで実フォント名を強制する。
   caution 系は class 指定有無に関わらず常に Noto Sans JP で固定する
   (本文の event フォントと視覚的に分離するため)。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   DESIGN — 鋼の錬金術師×黄泉のツガイ展（design_top.jpg 再現）

   ★ 企画固有のコンテナ／ボタンクラスは作らない。
     テンプレ標準の .content-holder / .iconButton / .loginRgisterButton /
     .toOshitabiTop / ul.caution をここで改造するので、共通ページ
     （certificate/ voice/ check/）にも同じ見た目が自動で効く。
   ============================================================ */

/* ---- 背景 ----
   LP（recommend.jr-central.co.jp/oshi-tabi/hagaren_yomi_ten/）の body と同じ宣言:
     background: url(../img/grid-me.png) 0% 0% / 25px 25px repeat, #eeece1;
   支給素材 bg_main.webp は 200×200 だが、LP と同じ 25px 角で並べる
   （原寸のまま敷くとグリッドが4倍の粗さになる）。
   ★ body に敷くので base.css の main::before は背景を描かせない。 */
body {
    background: url("../img/bg_main.webp") 0% 0% / 25px 25px repeat, var(--hy-cream);
}

main::before {
    background: none;
    background-color: transparent;
}


/* 見出し・期間・機能ボタンは LP と同じ Zen Antique（明朝）。
   base.css 末尾で .fontEvent が別フォントに上書きされるためここで固定する。
   ★ アカウント登録／ログイン／キャンペーンサイト一覧の3ボタンは
     デザイン（design_top.jpg）ではゴシック太字なので含めない。 */
.fontEvent,
.fontEvent *,
.iconButton,
.iconButton * {
    font-family: 'Zen Antique', 'Noto Serif JP', YakuHanJP, serif !important;
}

/* ---- 汎用ボタン（登録／ログイン／キャンペーンサイト一覧）はゴシック太字 ---- */
.loginRgisterButton,
.loginRgisterButton *,
.toOshitabiTop {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
    font-weight: 700 !important;
}

/* 注意書きだけは可読性優先で Noto Sans JP */
.fontNotoSans,
.fontNotoSans *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
}


/* ============================================================
   CONTENT-HOLDER — LP と同じ2重構造
   LP（recommend.jr-central.co.jp/oshi-tabi/hagaren_yomi_ten/）:

     .block__event-menu-wrap { background: var(--text-color); padding: 8px; position:relative; z-index: 1 }
     ::before { top:0;left:0;     width:78px; height:78px; background: var(--primary-color); z-index:-1 }
     ::after  { bottom:0;right:0; width:78px; height:78px; background: var(--accent-color);  z-index:-1 }
     .block__event-menu      { background: #fff; padding: 16px }

   外側 .content-holder = 8px の黒枠（左上78×78だけ金・右下78×78だけ赤）
   内側 .content-holder__inner = 白の中身

   z-index の効き方: 親が z-index:1 でスタッキングコンテキストを作るので、
   z-index:-1 の擬似要素は「親の背景より上・中身（内側div）より下」に描かれる。
   これで角だけ金/赤に見え、内側の白がその上に乗る。

   LP の変数は --text-color #343029 / --primary-color #b99b00 / --accent-color #c8161d で
   本企画のカラーと完全一致している。
   ============================================================ */
.content-holder {
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 96%;
    margin: 0.20rem auto 0.20rem;
    /* LP の padding:8px（枠の太さ）。デザイン幅430pxで 8px = 0.08rem */
    padding: 0.08rem;
    background-color: var(--hy-dark);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* 左上 78×78 の金 */
.content-holder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.78rem;
    height: 0.78rem;
    background: var(--hy-gold);
    z-index: -1;
    pointer-events: none;
}

/* 右下 78×78 の赤 */
.content-holder::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0.78rem;
    height: 0.78rem;
    background: var(--hy-red);
    z-index: -1;
    pointer-events: none;
}

/* 内側の白（LP の .block__event-menu。padding は SP 16px / PC 24px 相当） */
.content-holder__inner {
    box-sizing: border-box;
    width: 100%;
    padding: 0.15rem;
    background: #fff;
}


/* ============================================================
   セクションタイトル（画像）
   ============================================================ */
.sectionTitle {
    width: 100%;
    margin: 0.30rem auto 0.10rem;
    text-align: center;
}

.sectionTitle img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   本文・見出し
   ============================================================ */
.leadText {
    font-size: 0.17rem;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0.01em;
}

/* 太い黒罫（開催期間の上下） */
hr.rule-thick {
    width: 94%;
    height: 0;
    margin: 0.18rem auto;
    border: none;
    border-top: 0.025rem solid #000;
}

/* 細い黒罫（引換場所カード内の区切り） */
hr.rule-thin {
    width: 100%;
    height: 0;
    margin: 0.14rem auto;
    border: none;
    border-top: 0.01rem solid #000;
}

/* ---- 開催期間ブロック ---- */
.periodBlock {
    text-align: center;
    line-height: 1.9;
}

.periodHeading {
    font-size: 0.19rem;
    font-weight: 500;
}

.periodPhase {
    font-size: 0.20rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.periodPhase--2nd {
    margin-top: 0.18rem;
}

.periodDate {
    font-size: 0.18rem;
    font-weight: 500;
}


/* ============================================================
   BUTTONS
   ============================================================ */

/* ---- アカウント新規登録 / ログイン（黒地・赤アイコン・角丸なし） ---- */
.loginRgisterButton,
.loginRgisterButton.button-bg {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    max-height: none;
    min-height: 0.66rem;
    padding: 0.12rem 0.10rem;
    margin: 0.12rem auto;
    border-radius: 0;
    /* ★ 地色は黒褐色 #343029。マークアップに button-bg（base.css で
       background: var(--color-button) = 赤）が付いているので、
       .loginRgisterButton.button-bg（詳細度 0,2,0）で確実に打ち消す。
       background-color ではなく background で指定する（base.css が
       ショートハンドで敷いているため）。 */
    background: var(--hy-dark);
    box-shadow: none;
}

.loginRgisterButton .icon {
    flex: 0 0 auto;
    width: 0.46rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loginRgisterButton .icon img {
    width: 0.32rem;
    height: auto;
    display: block;
}

.loginRgisterButton .iconButtonText {
    flex: 1;
    text-align: center;
    font-size: 0.21rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
}

/* ---- キャンペーンサイト一覧（白地・赤枠・赤文字） ---- */
.toOshitabiTop {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 0.80rem;
    padding: 0.12rem 0.10rem;
    margin: 0.14rem auto 0.16rem;
    border: 0.02rem solid var(--hy-red);
    border-radius: 0.06rem;
    background: #fff;
    color: var(--hy-red);
    font-size: 0.21rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

/* ---- .iconButton（赤地・金アイコン・角丸なし） ---- */
.iconButton {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    /* base.css は height:0.70rem 固定。auto にしないと2行が溢れる */
    height: auto;
    min-height: 0.80rem;
    padding: 0.10rem 0.12rem;
    margin: 0.14rem auto 0.10rem;
    border: none;
    border-radius: 0;
    /* ★ background-color ではなく background。base.css が
       background: linear-gradient(...) を敷いているため。 */
    background: var(--hy-red);
    box-shadow: none;
}

/* base.css の .iconButton.button-bg（var(--color-button)）も同じ赤で揃える */
.iconButton.button-bg {
    background: var(--hy-red);
}

/* base.css の内側白枠はデザインに無いので消す */
.iconButton::before {
    content: none;
}

/* base.css は .icon{flex:2} / .icon2nd{flex:1.5} で幅を食う。
   デザインは「アイコンは実寸・文字が伸びる」なので固定幅にする。 */
.iconButton .icon,
.iconButton .icon2nd {
    flex: 0 0 auto;
    width: 0.50rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconButton .icon img {
    width: 0.36rem;
    height: auto;
    display: block;
}

.iconButton .icon2nd img {
    width: 0.30rem;
    height: auto;
    display: block;
}

.iconButton .iconButtonText,
.iconButton .iconButtonText.white-text {
    flex: 1;
    text-align: center;
    font-size: 0.21rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.45;
    padding-right: unset;
}

.iconButton:active {
    transform: scale(0.99);
}

/* ============================================================
   乗車特典
   ============================================================ */
.certPhase {
    text-align: center;
    line-height: 1.8;
}

.certPhase__label {
    font-size: 0.19rem;
    font-weight: 500;
}

.certPhase__date {
    font-size: 0.17rem;
    font-weight: 500;
}

.noveltyName {
    margin-top: 0.10rem;
    font-size: 0.17rem;
    font-weight: 500;
    text-align: center;
}

/* ---- 特典画像 ----
   ★ novelty.webp は支給素材の時点で金の角飾り枠が入っている。
     CSS で枠や角飾りを重ねない（二重枠になる）。 */
.noveltyFrame {
    width: 100%;
    margin: 0.14rem auto 0.20rem;
}

.noveltyFrame img {
    width: 100%;
    height: auto;
    display: block;
}


/* ============================================================
   特典引換場所カード（白地・黒細枠・区切り罫）
   ============================================================ */
.exchangeBox {
    box-sizing: border-box;
    width: 100%;
    margin: 0.16rem auto 0.18rem;
    padding: 0 0.12rem 0.14rem;
    background: #fff;
    border: 0.01rem solid #000;
    text-align: center;
}

.exchangeBox__title {
    padding: 0.12rem 0 0.10rem;
    border-bottom: 0.01rem solid #000;
    margin: 0 -0.12rem 0.12rem;
    font-size: 0.22rem;
    font-weight: 500;
}

.exchangeBox__title--hours {
    border-bottom: none;
    margin-bottom: 0.02rem;
    padding-bottom: 0;
}

.exchangeBox__item {
    padding: 0.06rem 0 0.10rem;
}

.exchangeBox__item+.exchangeBox__item {
    border-top: 0.01rem solid #000;
    padding-top: 0.12rem;
}

.exchangeBox__date {
    font-size: 0.17rem;
    font-weight: 500;
    line-height: 1.7;
}

.exchangeBox__no {
    margin-right: 0.01rem;
}

.exchangeBox__place {
    font-size: 0.17rem;
    font-weight: 500;
    line-height: 1.7;
}

.exchangeBox__sub {
    margin-top: 0.04rem;
    font-size: 0.16rem;
    font-weight: 500;
    line-height: 1.6;
}

.exchangeBox__hours {
    font-size: 0.20rem;
    font-weight: 500;
    line-height: 1.6;
}

.exchangeBox__caution {
    padding: 0 !important;
    margin: 0.06rem 0 0 !important;
    font-size: 0.13rem;
    font-weight: 400;
    text-align: left;
}

/* 乗車証明ページ内に置いた特典引換場所。
   .completedSlider（白背景）の中に入るので幅は 100%（テンプレ側で左右 padding 済み）。 */
.exchangeBoxWrap {
    box-sizing: border-box;
    width: 100%;
    margin: 0.15rem auto 0;
}

.exchangeBox {
    color: var(--hy-dark);
}

/* ★ 特典引換場所のカードだけデザインはゴシック太字（明朝ではない）。
   markup 側に .fontEvent が付いているので !important で上書きする。 */
.exchangeBox__title,
.exchangeBox__date,
.exchangeBox__place,
.exchangeBox__hours,
.exchangeBox__sub {
    font-family: 'Noto Sans JP', YakuHanJP, sans-serif !important;
    font-weight: 700 !important;
}

/* 引換済み状態のスライダー地色。
   テンプレ certificate/single.php は #overlay / #handleUsed に
   .completed-gradient を付けるが、certificate.css には定義が無く
   企画側で用意する前提（未定義だと白文字が透明背景に乗って読めない）。 */
.completed-gradient {
    /* 非活性の .iconButton と同じフラットグレーに揃える */
    background: #aaa;
}


/* ============================================================
   注意書き
   ============================================================ */
ul.caution {
    box-sizing: border-box;
    width: 100%;
    padding: 0;
    margin: 0.12rem auto 0;
    font-size: 0.135rem;
    line-height: 1.75;
    color: var(--color-text);
}