@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — nijisanji_8th（MECHATU-A×JR東海「めちゃはえ－！SPECIAL TALK！！」）
   配色・部品はコーディング支給（docs/project/assets/nijisanji_8th/coding/custom.css）を移植。
   base.css は共通ファイルなので触らない。
   ============================================================ */


/* ============================================================
   BRAND COLORS — coding の :root が正本（仕様書の色表ではない）
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #353C47;   /* ボタン左右の縁・区切り線 */
    --color-sub2:   #F20124;   /* ボタン地（赤） */
    --color-text:   #353C47;   /* テキストカラー */
    --color-button: #F20124;   /* .button-bg */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;

    /* ★ coding 支給の base.css は --fs-* だけテンプレと値が違っていた（デザインはこの値で組まれている）。
         base.css は共通ファイルなので書き換えず、ここで上書きする（toukenranbu-kanei2026 と同じ扱い）。 */
    --fs-base: 0.15rem;
    --fs-lg:   0.20rem;
    --fs-xl:   0.23rem;
    --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 のまま**になる。

   ★ coding（デザイン支給の custom.css）が
       .iconButton .iconButtonText { font-family: ...; }
     を持っていることが多いのは **この対策**。移植時に「body に指定があるから冗長」
     と judging して落とすと必ず再発する（2026-09 precure2026 で発生）。

   ★ **ヘッドレス Chrome では再現しない**（UA スタイルシートが実機と違い button が
     継承してしまう）。ローカル描画の計測だけで「効いている」と判断しないこと。
     実機の DevTools で
       getComputedStyle(document.querySelector('.iconButtonText')).fontFamily
     が **Arial 単体**なら UA スタイルシートが勝っている。

   base.css は共通ファイルなので触らず、ここ（custom.css）で当てる。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* 念のためボタン文字にも明示（別の UA・将来の base.css 変更でも確実に効かせる） */
.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.narrowIconButton .narrowIconButtonText,
.rectangleButton .rectangleButtonText,
.toOshitabiTop,
.simpleButton,
.whiteButton,
.oshitabiButton {
    font-family: var(--font-family);
}



/* ============================================================
   CONTENT-HOLDER — 共通 CSS の影を消す（削除しないこと）

   ★ グローバルの /css/style_v2.css（module/components_v2.0/header/
     htmlHeader.inc.php が全ページで読み込む）が
       .content-holder { box-shadow: 0 0 0.03rem #ccc; }
     を当てている。白カード前提の古い指定で、暗色・画像背景のデザインでは
     **各セクションの一番上に薄いグレーの線が浮いて見える**。
   ★ base.css にも企画の custom.css にも書いていないため grep で見つからず、
     原因特定に時間がかかる（計算済みスタイルを見ないと分からない）。
     2026-09 toukenranbu-kanei2026 で実際に踏んだのでテンプレ既定で消す。
   ★ 影が欲しい企画は、下の VARIANTS のように box-shadow を上書きする。
     /css/style_v2.css と base.css は共有ファイルなので絶対に編集しない。
   ============================================================ */
.content-holder {
    box-shadow: none;
}



/* ============================================================
   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;
}



/* ============================================================
   DISABLED — 形は活性と同じ（角・左右の縁）で色だけグレー（coding 支給）
   ★ opacity を落とさない・box-shadow は活性も none なので揃っている。
   ============================================================ */
.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;
    opacity: 1;
    box-shadow: none;
    border-radius: 0;
    border-left: solid 0.1rem #8F8F8E;
    border-right: solid 0.1rem #8F8F8E;
}


/* ============================================================
   PAGE / SECTION（coding 支給）
   ============================================================ */
.page-content {
    background-color: #fff;
    padding-bottom: 5%;
}

.p-intro {
    margin: auto;
}

.content-holder {
    margin: auto;
    margin-top: 5%;
    border-radius: 0rem;
    padding: 3%;
    background-color: #fff;
    border-top-width: 0.1rem;
    border-bottom-width: 0.1rem;
}

.content-holder > img {
    display: block;
    width: 100%;
    height: auto;
}

.eventDate {
    width: 94%;
    margin: auto;
}

.line {
    width: 94%;
    margin: 5% auto;
    border-top: solid 0.01rem var(--color-sub1);
}

ul.caution {
    line-height: 1.8;
}

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

.textCenter {
    text-align: center;
}

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

.font20 {
    font-size: 0.20rem;
}


/* ============================================================
   BUTTONS（coding 支給）
   ============================================================ */
.loginRgisterButton {
    padding: 0.3rem 0.05rem;
    background-color: var(--color-sub2);
    border-left: solid 0.1rem var(--color-sub1);
    border-right: solid 0.1rem var(--color-sub1);
    box-shadow: none;
    border-radius: 0;
}

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

.toOshitabiTop {
    border-radius: 0;
    color: var(--color-sub2);
    border-color: var(--color-sub2);
}

/* 「トップページに戻る」等の文字だけボタン（壁紙選択・壁紙DL・抽選結果）。
   トップの「キャンペーンサイト一覧はこちら！」(.toOshitabiTop) と同じ 白地＋赤枠・赤文字・角なし */
.simpleButton {
    border-radius: 0;
    color: var(--color-sub2);
    border-color: var(--color-sub2);
}

.iconButton {
    height: 0.80rem;
    border-radius: 0;
    background: var(--color-sub2);
    border-left: solid 0.1rem var(--color-sub1);
    border-right: solid 0.1rem var(--color-sub1);
}

.iconButton::before {
    display: none;
}

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

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

.iconButton .icon {
    flex: 1;
}

.iconButton .icon2nd {
    flex: 1;
}

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

.iconButton .icon .lotteryIcon {
    width: 0.25rem;
    height: auto;
}

.page-content img.marginB {
    display: block;
    width: 100%;
    height: auto;
    margin: 5% auto;
}


/* ============================================================
   ARフォトフレーム / 壁紙 のグリッド（coding 支給）
   ============================================================ */
.subTitleImg {
    display: block;
    width: 90%;
    height: auto;
    margin: 5% auto;
}

.rowImgs {
    margin: 8% 1% 5%;
}

.rowImg.fourRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.1rem;
}

.rowImg {
    margin: 2% 0 5%;
}

.frame img {
    display: block;
    width: 0.85rem;
    height: auto;
    margin: auto;
}

.frameItem .name {
    white-space: nowrap;
    margin: 10% 0 0;
}

/* 解放済みフレームはタップで AR を起動する */
.frameItem.arUnlocked {
    cursor: pointer;
}

.p-external .rowImgs {
    margin: 5% 1% 3%;
}

.p-external .frame img {
    width: 0.64rem;
    height: auto;
    margin: auto;
}

/* 壁紙アイコン（/icon/wallpaper_phone.svg）は viewBox 53 で線が細いので大きめにする
   （19_button-icons.md。実装例 precure2026 / blt）
   ★ 壁紙DLボタン（.downloadWallpaper）は通常の /icon/download.svg なので対象にしない
     （入れるとトップの iconButton よりアイコンだけ大きく見える） */
.p-external .iconButton .icon img {
    width: 0.30rem;
    height: auto;
}

/* 獲得済み壁紙（DB サムネ）はタップでダウンロードページへ */
.p-external .frameItem.wallpaperExist {
    cursor: pointer;
}


/* ============================================================
   抽選（coding 支給）
   ============================================================ */
.lotterybanner {
    display: block;
    width: 93%;
    height: auto;
    margin: auto;
    margin-bottom: 5%;
}

.textMargin {
    margin: 5% auto;
}

@media screen and (max-width: 460px) {
    .iconButton .iconButtonText {
        font-size: 0.19rem;
    }

    .text-base {
        font-size: 0.13rem;
    }
}