@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 名探偵プリキュア！×JR東海
   base.css のデフォルト値をここで上書きするだけ。base.css は触らない。

   ★ 支給 coding（_admin-voistock/docs/project/assets/precure2026/codings/）を
     クラス名ごとそのまま移植している。クラス名を変えると差し替えができなくなる。
   ============================================================ */


/* ============================================================
   TYPOGRAPHY SCALE
   coding が想定している base.css は --fs-base / --fs-md / --fs-lg が
   1 段大きい世代のもの。base.css は共通ファイルなので触らず、
   このイベントだけ coding と同じスケールに戻す。
   ============================================================ */
:root {
    --fs-base: 0.15rem;
    --fs-md:   0.18rem;
    --fs-lg:   0.20rem;
}


/* ============================================================
   BRAND COLORS
   ★ coding/custom.css の値が正本（仕様書 md の「custom.css 設定値」は
     coding 納品前に書かれたもので、--color-main の扱いが食い違う）。
     coding に無い sub3 / sub4 / sub5 / local は仕様書 md の値を使う。
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ地色（実際は bg.webp が全面に敷かれる） */
    --color-sub1:   #E75297;   /* メインのピンク（枠線・見出し） */
    --color-sub2:   #EDD45B;   /* ボタンの縁（黄） */
    --color-sub3:   #d86bdd;   /* アクセント（紫） */
    --color-sub4:   #a80055;   /* アクセント濃 */
    --color-sub5:   #e8f1f8;   /* 薄背景 */
    --color-local:  #edd45b;   /* 差し色（黄） */
    --color-text:   #E75297;   /* 見出し・本文のピンク */
    --color-text1:  #E565D0;   /* 小見出しの紫ピンク */
    --color-button: #E75297;
    /* ★ 本文フォントは **Zen Maru Gothic**（デザイン指定・2026-09-13 確定）。
       coding/custom.css も :root / .iconButtonText / .badge-title の3箇所で
       Zen Maru Gothic を指定している。仕様書 md の「M PLUS Rounded 1c」は誤り。
       ★ coding の index.html は Zen Maru を読み込んでいなかったため、coding 単体では
         sans-serif にフォールバックして効いていなかった。読み込みは
         script.inc.php / certificate/single.php / lottery/ticket.php の3箇所に追加済み。
       ★ Zen Maru Gothic に 600 / 800 は存在しない（300/400/500/700/900 の5段）。
         CSS の仕様で font-weight:600 → 700、800 → 900 に丸められ指定より太く出る。
         中間段は作れないので、細くしたいときは font-size / letter-spacing で調整する。
       M PLUS Rounded 1c は Zen Maru が落ちたときのフォールバック（同じ丸ゴシック）。 */
    --font-family:  'Zen Maru Gothic', 'M PLUS Rounded 1c', YakuHanJP, sans-serif;
}


/* ============================================================
   PAGE BACKGROUND
   背景タイルは info.inc.php の $background（--image-bg）を
   main::before が敷く。coding は .page-content に直接敷いていたが、
   下層ページと共通にするため base.css の仕組みに寄せている。
   ============================================================ */
.page-content {
    padding-bottom: 3%;
}

.page-content img {
    margin: auto;
}


/* ============================================================
   SECTION / CONTENT HOLDER — ピンクの枠＋ふわっとした影
   ============================================================ */
.p-intro,
.p-shinkansen,
.p-external,
.p-benefits,
.p-lottery,
.p-ar {
    position: relative;
    margin: auto;
}

.content-holder {
    position: relative;
    width: 95%;
    margin: 5% auto;
    padding: 3% 3% 5%;
    border-radius: 0.2rem;
    border: 0.01rem solid var(--color-sub1);
    box-shadow: 0px 0px 8px 0px rgba(253, 161, 212, 1);
}

/* 見出し画像がある区画は画像と枠をくっつける */
.p-shinkansen .content-holder,
.p-external .content-holder,
.p-benefits .content-holder,
.p-lottery .content-holder,
.p-ar .content-holder {
    margin-top: 0;
}

.p-external .content-holder,
.p-shinkansen .content-holder {
    padding-top: 4.5%;
}

.page-content .title-image {
    width: 95%;
    margin: auto;
    margin-top: 8%;
}

/* 枠の角飾り */
.corner {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
}

.corner-tl {
    top: 0.11rem;
    left: 0.11rem;
    transform: scaleX(1);
}

.corner-tr {
    top: 0.11rem;
    right: 0.11rem;
    transform: scaleX(-1);
}

/* 区切り線 */
.line {
    border-bottom: solid var(--color-sub1) 0.01rem;
    margin: 5% 1%;
}

.p-shinkansen .line {
    margin: 2.5% 1% 5%;
}

.p-external .line {
    margin: 4% 8%;
}

.p-ar .line {
    margin: 4% 1%;
}

.message-container {
    line-height: 1.8;
}

ul.caution {
    line-height: 1.8;
}

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

.marginbottom,
ul.marginbottom {
    margin-bottom: 5%;
}

.dateText {
    margin: 5% auto;
}

.marginB {
    margin: 2% auto;
}

.font13 {
    font-size: 0.13rem;
}

.color-text1 {
    color: var(--color-text1);
}


/* ============================================================
   FORM ELEMENT FONT RESET（必須）

   ★ <button> / <input> / <select> / <textarea> は **UA スタイルシートが
     font-family: Arial を当てており、body からフォントを継承しない**。
     そのため body に企画フォントを指定しても、ボタンの文字だけ Arial のままになる。
     （2026-09-13 に実機で発覚。DevTools の computed が "Arial" で判明した。
       getComputedStyle は宣言値を返すので、body だけ見ていると気づけない。）

   ★ coding/custom.css も同じ理由で .iconButton .iconButtonText に
     font-family を明示していた。移植時に落とすとこの症状が出る。

   base.css には button のリセットが無いので、ここで入れる。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* coding の指定をそのまま移植（上の inherit があれば冗長だが、
   別の UA / 将来の base.css 変更でも確実に効かせるため明示しておく） */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.toOshitabiTop,
.simpleButton,
.whiteButton {
    font-family: var(--font-family);
}


/* ============================================================
   BUTTONS — ピンク→紫のグラデ＋黄色の縁
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.50rem;
    border: solid 0.03rem var(--color-sub2);
}

/* ★ グラデーションの向きは 180deg（上→下）。
   支給 coding/custom.css は 90deg（左→右）だったが、デザイン側の指定に合わせて変更（2026-09-13 指示）。
   CSS の角度は 0deg=下から上 / 90deg=左から右 / 180deg=上から下。 */
.iconButton.button-bg {
    background: linear-gradient(180deg, #FF57B5 0%, #D16EE4 100%);
}

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

.iconButton .icon {
    flex: 1.5;
}

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

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

.p-shinkansen .iconButton .icon img,
.p-ar .iconButton .icon img {
    width: 0.28rem;
    height: auto;
}

/* 壁紙ボタン。既定の 0.20rem だと他セクション（0.25〜0.28rem）より明らかに小さく、
   スマホ型アイコンの中の絵柄も潰れて読めないので揃える。
   .downloadWallpaper は壁紙の抽選結果・DL ページ側の同じボタン。 */
.p-external .iconButton .icon img,
.downloadWallpaper .icon img {
    width: 0.30rem;
    height: auto;
}

.p-lottery .iconButton .icon img {
    width: 0.25rem;
    height: auto;
}

.loginRgisterButton {
    padding: 0.3rem 0.05rem;
}

.loginRgisterButton.button-bg {
    background: var(--color-sub1);
}

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

.toOshitabiTop {
    border: solid 0.02rem var(--color-sub1);
    color: var(--color-sub1);
}


/* ============================================================
   DISABLED — 形は活性時のまま、色だけグレー（規約）
   coding の指定（単色 #B2B2B2 ＋ 薄い縁）に合わせる。
   opacity は落とさない・box-shadow も消さない。
   ★ 地が濃いグレーなので、白アイコンのままで読める
     （grayscale は掛けない）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #B2B2B2 !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    border: #DDDDDD solid 0.03rem;
    border-radius: 0.50rem;
}

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


/* ============================================================
   WALLPAPER — 未取得の壁紙枠（4 枚並び）
   ============================================================ */
.voiceRecords {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin: 0 auto 5%;
    gap: 0.1rem;
}

/* 取得済みサムネは thumbnails-container（base.css）をそのまま使う。
   スマホ壁紙の比率は 9 : 19.5。aspect-ratio を足すときは必ずこの値
   （9/16 にすると object-fit:cover が縦を約18%切り落とす）。 */


/* ============================================================
   BADGE CARD — 缶バッジ獲得情報（全 7 種）
   ============================================================ */
.badge-card {
    position: relative;
    border-radius: 0.2rem;
    padding: 0.15rem;
    background: #ffffff;
    border: 0.03rem solid transparent;
    background-clip: padding-box, border-box;
    background-origin: border-box;
    background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(180deg, #C8A7EB 0%, #6BD6EA 100%);
}

.badge-title {
    font-family: var(--font-family);
    font-size: 0.25rem;
    font-weight: 700;
    line-height: 1.44;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 0.15rem;
    margin-top: 0;
    color: #E75297;
    background: linear-gradient(90deg, #FF57B5 0%, #D16EE4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.12rem;
    margin: 7% auto 1%;
}

.badge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.06rem;
    width: calc(25% - 0.09rem);
    box-sizing: border-box;
}

.badge-circle {
    width: 0.74rem;
    height: 0.74rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.badge-name {
    color: #d966b3;
    font-size: 0.14rem;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
}

/* .badge-hit 系（当選種別の事前表示）は 2026-09-14 に撤去。
   種別は引換券ページのヘッダー画像でだけ分かる形にしたため未使用。
   復活させるときは _template_master/assets/css/custom.css から戻す。 */


/* ============================================================
   REDEEM CARD — 特典引換場所（トップ・引換券ページ共通）
   ★ 引換券ページ（certificate/single.php・lottery/ticket.php）にも
     このマークアップをそのまま置く。ページ間でデザインを変えない。
   ★ 自前の width / margin は持たせない（.completedSlider が左右 padding を
     持つので二重インデントになる）。
   ============================================================ */
.redeem-card {
    position: relative;
    border-radius: 0;
    background: #ffffff;
    border: 0.01rem solid #E565D0;
    margin-top: 5%;
}

.redeem-title {
    text-align: center;
    color: #E565D0;
    font-size: 0.20rem;
    font-weight: 700;
    border-bottom: 0.01rem solid #E565D0;
    padding: 0.1rem 0;
}

/* 店舗名は「ブロックごと中央寄せ・文字は左揃え」。
   店舗名ごとに長さが違うので text-align:center だと 1 行ずつ頭がズレて読みにくい。
   fit-content で最長の店舗名の幅に縮め、その塊を margin:auto で中央に置く。
   ★ max-width:100% を必ず併記する（店舗名が長い企画でカードからはみ出さないため）。 */
.store-list {
    display: flex;
    flex-direction: column;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 100%;
    margin: 1% auto;
}

.store-name {
    text-align: left;
    color: #000;
    font-size: 0.18rem;
    font-weight: 700;
    line-height: 2;
}

/* 配布終了した店舗（setting.inc.php の 'closed' => true） */
.store-closed {
    text-align: center;
    color: #e60012;
    font-size: 0.14rem;
    font-weight: 700;
    line-height: 1.6;
}

.divider {
    border: none;
    border-top: 0.01rem solid #E565D0;
    margin: 2% 7%;
}

.redeem-subtitle {
    text-align: center;
    color: #E565D0;
    font-size: 0.18rem;
    font-weight: 700;
}

.redeem-time {
    text-align: center;
    justify-content: center;
    color: #000;
    font-size: 0.18rem;
    font-weight: 600;
    line-height: 2;
}

/* カード内の注記。base.css の ul.caution は padding:0 なので、そのままだと
   カードの枠に文字が張り付いて窮屈に見える。左右と下に余白を持たせる。
   ★ HTML 側に .paddingLeft を足して調整しない（ここだけを単一ソースにする）。 */
.redeem-card ul.caution {
    padding: 0 0.14rem 0.10rem;
}

/* 引換券ページ（certificate.css）側で ul.caution の見た目が変わるのを止める。
   ★ certificate.css は base.css / custom.css の後に読まれるので、
     親クラスを前置して特異度を上げて固定する。certificate.css は書き換えない。 */
.completedSlider .redeem-card ul.caution {
    padding: 0 0.14rem 0.10rem;
}

.completedSlider .redeem-card ul.caution,
.completedSlider .redeem-card ul.caution li {
    font-size: var(--fs-sm);
    line-height: 1.8;
    text-align: left;
}

/* ※ のぶら下げ幅も base.css（1.1em）に揃える。
   certificate.css が li の padding-left を 0.17rem に上書きするため、
   これが無いとトップと引換券ページで同じカードの注記だけ字下げが違って見える。 */
.completedSlider .redeem-card ul.caution li {
    padding: 0 0 0 1.1em;
}


/* ============================================================
   PRIZE — 抽選（アクリルスタンド）
   ============================================================ */
.p-lottery img.lotteryImg {
    width: 82%;
    margin: auto;
    margin-bottom: 5%;
}


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


/* ============================================================
   FONT WEIGHT 600 → 700（Zen Maru Gothic 用・必須）

   Zen Maru Gothic に 600 は**存在しない**（300/400/500/700/900 の5段）。
   ところが共有 /css/font.css だけが weight 600 を自前ホストの
   ZenMaruGothic-Bold.ttf（3.6MB）で宣言しているため、600 を指定すると
   **必ずその 3.6MB を取りに行く**（Google Fonts 側に 600 は無いので勝てない）。

   自前ホストの「600」の中身は Bold ＝ 実質 700 なので、700 に寄せても
   **見た目は変わらない**。これで Google Fonts のサブセット woff2 だけで済み、
   トップのフォント取得が約 14MB → ほぼゼロになる。

   ★ 対象は base.css / custom.css で font-weight:600 を持つセレクタ全部。
     新しく 600 を書かないこと（書くと再び 3.6MB を引く）。
   ============================================================ */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.toOshitabiTop,
.whiteButton,
.simpleButton,
.narrowIconButton .narrowIconButtonText,
.rectangleButton .rectangleButtonText,
.oshitabiButton,
.stampComment,
.copyButton,
.location-info,
.detail-label,
.placeName,
.titleText,
.fw-600,
.badge-name,
.redeem-time {
    font-weight: 700;
}