@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 『Re:ゼロから始める異世界生活』×JR東海
   支給コーディング（_admin-voistock/docs/project/assets/re-zero/codings/
   custom.css）をそのまま移植したもの。クラス名は coding のまま。

   ★ base.css は触らない。
     支給 coding は base.css の :root にある --fs-* を直接書き換えていたが、
     base.css は全企画共有なのでここ（custom.css）の :root で上書きする。
   ★ 背景画像は支給されていない。ページ地色はベタ塗り #CFE8ED
     （coding の .page-content）。--color-main も同色にして、
     .page-content の外側（PC 幅）まで同じ色で塗る。
   ============================================================ */


/* ============================================================
   BRAND COLORS — 支給 coding の :root（正本）
   ============================================================ */
:root {
    --color-main:   #CFE8ED;   /* ページ地色（coding の .page-content と同色） */
    --color-sub1:   #B4A2E3;   /* メインカラー（薄紫：ボタングラデ始点） */
    --color-sub2:   #8677AF;   /* サブカラー（濃紫：ボタングラデ終点・引換場所の帯） */
    --color-sub3:   #796CAF;   /* アクセント（枠線・見出し罫） */
    --color-text:   #796CAF;   /* テキストカラー */
    --color-button: #B4A2E3;   /* .button-bg の単色フォールバック（実際はグラデで上書き） */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;

    /* ★ 支給 coding が base.css 側で書き換えていた文字サイズスケール。
         base.css は共有ファイルなので触らず、ここで上書きする。 */
    --fs-base: 0.15rem;
    --fs-xl:   0.22rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.27rem;
}


/* ============================================================
   FORM ELEMENT FONT RESET — 削除しないこと（恒久対応 2026-09-13）

   ★ <button> / <input> / <select> / <textarea> は **UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない**。
     :root の --font-family や body に企画フォントを入れても
     **ボタンの文字だけ Arial のまま**になる。
   ★ ヘッドレス Chrome では再現しない。実機の DevTools で
       getComputedStyle(document.querySelector('.iconButtonText')).fontFamily
     が Arial 単体なら UA スタイルシートが勝っている。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.toOshitabiTop {
    font-family: var(--font-family);
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾で .fontNotoSans が
   var(--font-family) に上書きされるため、ここで実フォント名を強制する。
   本企画は本文も Noto Sans JP なので見た目は同じだが、
   base.css の更新に巻き込まれないよう残しておく。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   PAGE / SECTION — coding の骨格
   ============================================================ */
.page-content {
    background-color: #CFE8ED;
    padding-bottom: 3%;
}

.p-intro {
    margin: auto;
}


/* ============================================================
   CONTENT-HOLDER
   ★ グローバルの /css/style_v2.css が全ページで
       .content-holder { box-shadow: 0 0 0.03rem #ccc; }
     を当てている。base.css にも custom.css にも書かれていないので
     grep では見つからない（計算済みスタイルでしか分からない）。
     このデザインではカード上辺に薄いグレー線が出るので消す。
   ============================================================ */
.content-holder {
    box-shadow: none;
    position: relative;
    margin: auto;
    margin-top: 5%;
    border-radius: 0.1rem;
    padding: 2.5%;
    padding-top: 1.5%;
    padding-bottom: 6%;
    backdrop-filter: blur(10px);
    border: none;

    /* ★ 背景は「方眼タイル（SVG）＋ グラデ（CSS）」の2層。
         支給 coding は bg_grid_gradient.webp を background-size: cover で敷いていたが、
         cover はカードの高さでスケールが決まるため **セクションごとにマス目の大きさが
         変わる**（実測: p-intro 26px / 車内 71px / ノベルティ 41px）。
         タイルを rem 固定サイズで敷き直して、どのカードでも p-intro と同じ見た目にする。

       ・0.286rem = 元画像のセル 49.1px を p-intro の表示倍率（カード幅 412.8 / 画像幅 709）
         で換算した値。p-intro は幅でスケールが決まっていたので、これが「支給どおり」の大きさ。
       ・グラデも p-intro と同じ勾配になるよう **rem 固定**で止める（% にするとカードの
         高さで勾配が変わり、背丈ごとに違う見え方になる＝マス目と同じ問題が起きる）。
         値は p-intro の実測から出したもの: 元画像は cover + center で
         22.0%〜78.0% の帯だけが見えており、上端 #ffffff → 下端 #f2fcfe。
         その勾配をそのまま延長すると「0.44rem まで白 → 6.87rem で #edfbfd」になる。
         6.87rem より下は最終色のまま続く（背の高いカードの下半分は #edfbfd）。
       ・背景位置は元画像の1本目の罫線に合わせた位置（左 0.20rem / 上 0.03rem）。 */
    background-image:
        url(../svg/bg_grid.svg),
        linear-gradient(180deg, #ffffff 0, #ffffff 0.44rem, #edfbfd 6.87rem);
    background-repeat: repeat, no-repeat;
    background-size: 0.286rem 0.286rem, 100% 100%;
    background-position: 0.20rem 0.03rem, 0 0;
}

/* 上に向かって白くなる内枠（mask-composite でリングだけ残す） */
.content-holder::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 0.05rem;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}


/* ============================================================
   TEXT BLOCKS
   ============================================================ */
.message-container {
    margin: 0.1rem auto;
    font-weight: 900;
}

/* ★ INTRO のリード文だけ 1 段小さくする。
     作品名を正式名称『Re:ゼロから始める異世界生活』にすると 1 行目が
     text-lg（0.17rem）では カード内幅 357px に対して 372px になり折り返す。
     0.16rem で 350px に収まる（PC 幅 430px でも 383px < 392px で収まる）。
     .text-lg 自体は車内セクションの本文や引換時間でも使うので、
     ここだけスコープを切って下げる。 */
.p-intro .message-container.text-lg {
    font-size: 0.16rem;
}

.p-intro .dateback {
    background-color: white;
    border-radius: 0.10rem;
    padding: 0.15rem 0;
    margin: 0.15rem auto;
    margin-bottom: 0;
    margin-top: 0.1rem;
}

.borderTopBottom {
    position: relative;
}

.borderTopBottom::before,
.borderTopBottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, #FCFEFF 0%, #796CAF 50%, #FCFEFF 100%);
}

.borderTopBottom::before {
    top: 0;
}

.borderTopBottom::after {
    bottom: 0;
}

ul.caution {
    line-height: 1.8;
}

ul.paddingLeft {
    padding-left: 2%;
}

.borderBottom {
    border-bottom: 0.01rem solid #9F9F9F;
    margin: 4% auto 3%;
}


/* ============================================================
   BUTTONS
   ★ base.css の .iconButton.button-bg / .loginRgisterButton.button-bg は
     background ショートハンドで単色を当てるため、グラデを消してしまう。
     custom.css は base.css の後に読まれるので、同じ詳細度で上書きする。
   ============================================================ */
.iconButton,
.iconButton.button-bg,
.loginRgisterButton,
.loginRgisterButton.button-bg {
    background-image: linear-gradient(to right, var(--color-sub1), var(--color-sub2));
    box-shadow: 0 0.04rem 0 #B1CED9;
}

.iconButton {
    height: 0.80rem;
    border-radius: 0.10rem;
}

.loginRgisterButton {
    padding: 0.3rem 0.05rem;
}

/* coding は内側の白枠を使わない */
.iconButton::before {
    display: none;
}

.iconButton .iconButtonText {
    font-size: 0.20rem;
}

.loginRgisterButton .icon img {
    height: 0.20rem;
}

.iconButton .icon img {
    width: 0.20rem;
    height: 0.20rem;
}

.iconButton .icon {
    flex: 1.5;
}

.p-shinkansen .iconButton .icon img {
    width: 0.22rem;
    height: auto;
}

.iconButton .icon2nd img {
    height: 0.26rem;
    width: auto;
}

.p-shinkansen .trainButton .icon img {
    width: 0.42rem;
}

.p-intro .toOshitabiTop {
    margin: 5% auto;
    border-color: var(--color-sub3);
}

.font20 {
    font-size: 0.20rem;
}


/* ============================================================
   DISABLED — 形は活性時のまま・色だけグレー（規約）
   ★ opacity は落とさない。アイコンは活性時と同じものを白のまま使う
     （地が濃い灰グラデなので白で読める）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, #B2B2B2, #959595) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    opacity: 1;
    box-shadow: 0 0.04rem 0 #B1CED9;
    border-radius: 0.10rem;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    display: none;
}


/* ============================================================
   EXCHANGE LOCATION BOX — 特典引換場所
   ★ トップと引換ページ（certificate/single.php）で同じマークアップ・
     同じクラスを使う（ページ間で別物に見せない）。
   ============================================================ */
.LocationRedeemRewards {
    border: var(--color-sub2) solid 0.01rem;
    margin: 5% auto;
}

.LocationRedeemRewardsTitle {
    text-align: center;
    padding: 2%;
    background-color: var(--color-sub2);
    color: white;
}

.LocationRedeemRewardsSub {
    padding: 3%;
}

.LocationRedeemRewardsSub p {
    margin-bottom: 2%;
}

/* 配布終了店舗の赤字（setting.inc.php の 'closed' => true）。
   トップと引換ページで同じ見た目にする。 */
.LocationRedeemRewardsSub .soldOutText {
    color: #e60012;
    font-weight: 700;
    font-size: 0.14rem;
    line-height: 1.6;
    text-align: center;
}


/* ============================================================
   IMAGES — 見出し画像・カード
   ============================================================ */
.titleImg {
    top: -0.5rem;
    position: relative;
}

.p-external .titleImg {
    top: -0.6rem;
    position: relative;
}

.topMargin {
    margin-top: -0.5rem;
}

.p-shinkansen .message-container {
    margin: 0.2rem auto;
}

.titleImgCard {
    width: 80%;
    margin: 5% auto 3%;
}

.vdCard {
    width: 65%;
    margin: auto;
    margin-bottom: 4%;
}

.marginImg {
    margin: 5% auto 3%;
}


/* ============================================================
   UTILITIES
   ============================================================ */
.marginBottom {
    margin-bottom: 5%;
}

ul.marginBottom {
    margin-bottom: 7%;
}

.marginBottom0 {
    margin-bottom: 0;
}

.lineHeight {
    line-height: 0.34rem;
}


@media (max-width: 450px) {
    .text-lg {
        font-size: 0.17rem;
    }

    .iconButton .iconButtonText {
        font-size: 0.19rem;
    }

    .text-xl {
        font-size: 0.21rem;
    }
}