@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — B.L.T×JR東海
   コーディング支給（docs/project/assets/blt/codings/custom.css）を移植。
   base.css は共有ファイルなので触らない。上書きはすべてここで行う。
   ============================================================ */


/* ============================================================
   BRAND COLORS — coding の :root をそのまま採用
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ背景色 */
    --color-sub1:   #ffffff;   /* 枠・区切り（デザイン上は白＝見せない） */
    --color-sub2:   #FF8082;   /* グラデ端（サーモン） */
    --color-sub3:   #FF7197;   /* アクセント（ピンク） */
    --color-text:   #FF8082;   /* テキストカラー */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   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,
.simpleButton {
    font-family: var(--font-family);
}


/* ============================================================
   FONT UTILITY OVERRIDE — base.css 末尾で .fontNotoSans が
   var(--font-family) に上書きされているのを戻す。
   caution 系は常に Noto Sans JP で固定する。
   ============================================================ */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   PAGE BACKGROUND
   ★ url("") を書かない。info.inc.php の $backgroundCss を top.php が
     --image-bg として出力しているので、必ずそれを参照する
     （空文字を url() に入れると現在のページURLを画像として再取得する）。
   ============================================================ */
.page-content {
    background-image: var(--image-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-content img {
    margin: auto;
}


/* ============================================================
   CONTENT-HOLDER
   ★ box-shadow: none は削除しないこと。グローバルの /css/style_v2.css が
     .content-holder { box-shadow: 0 0 0.03rem #ccc } を当てており、
     各セクションの上辺に薄いグレー線が浮いて見える（grep で見つからない）。
   ============================================================ */
.content-holder {
    margin: 5% auto;
    padding: 3%;
    padding-top: 1%;
    border: none;
    border-radius: 0.1rem;
    box-shadow: none;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.5rem;
    box-shadow: none;
    background: linear-gradient(90deg, #FF938C 0%, #F09BC8 100%);
}

.iconButton.button-bg {
    background: linear-gradient(90deg, #FF938C 0%, #F09BC8 100%);
}

.iconButton::before {
    inset: 0.02rem;
    border: 0.01rem solid rgba(255, 255, 255, 1);
    border-radius: 0.5rem;
}

.iconButton .iconButtonText {
    font-weight: 700;
}

.iconButton .icon {
    flex: 1.5;
}

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

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

/* 文字だけのボタン（応募ID履歴）。
   ★ 19_button-icons.md: アイコンを置かないときは左右とも省略し
     padding-right:unset を付ける（icon2nd 用の右パディングが残ると
     文字が中央からずれる）。 */
.iconButton.noImgbutton {
    height: 0.62rem;
    border-radius: 0.1rem;
}

.iconButton.noImgbutton::before {
    border-radius: 0.1rem;
}

.iconButton.noImgbutton .iconButtonText {
    padding-right: unset;
}

.loginRgisterButton.button-bg {
    position: relative;
    border-radius: 0.1rem;
    padding: 0.3rem 0.05rem;
    box-shadow: none;
    color: #fff;
    background: linear-gradient(180deg, #FF6BA1 0%, #FF938C 100%);
}

.loginRgisterButton.button-bg::before {
    content: '';
    position: absolute;
    inset: 0.02rem;
    border: 0.01rem solid rgba(255, 255, 255, 1);
    border-radius: 0.08rem;
    pointer-events: none;
}

.loginRgisterButton .iconButtonText {
    font-weight: 700;
}

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

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


/* ============================================================
   DISABLED — 形は活性時のまま・色だけグレー（opacity は落とさない）
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(90deg, #B2B2B2 0%, #828282 100%) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    border-radius: 0.5rem;
}

.iconButton.noImgbutton[disabled],
.iconButton.noImgbutton.disabled,
.iconButton.noImgbutton:disabled {
    border-radius: 0.1rem;
    background: linear-gradient(180deg, #B2B2B2 0%, #828282 100%) !important;
}

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


/* ============================================================
   TEXT
   ============================================================ */
ul.caution {
    line-height: 1.8;
}

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

.marginbottom {
    margin-bottom: 4%;
}

.p-intro .message-container {
    line-height: 0.32rem;
    letter-spacing: 0;
}

.message-container {
    line-height: 0.25rem;
    letter-spacing: 5%;
}


/* ============================================================
   SECTION DECORATION — 見出し画像・星・期間ラベル
   ============================================================ */
.titleImg {
    width: 90%;
    margin: auto;
}

.page-content img.starsImg {
    width: 20%;
    margin: 4% auto;
}

/* ============================================================
   DATE TEXT — 期間表示「通期：2026.9.28 MON - 2027.1.11 MON」

   支給の日付画像（date_movie_*.svg / date_wallpaper.svg）を文字組みで再現したもの。
   画像をやめたので、動画を管理画面に足すだけで No.2 / No.3 の期間も出る。

   ★ 書体は Google Sans Flex（script.inc.php で読み込み）。和字サブセットが無いので
     「通期：」は Noto Sans JP にフォールバックする（支給画像も和字は別書体）。
   ★ サイズは元画像の実測に合わせた 2 段階:
       小（.dt-label / .dt-year / .dt-wd）… 数字の字高 10.1〜10.7px
       大（.dt-md 月.日）                  … 数字の字高 12.9〜13.6px
   ★ 余白は span の margin で作る（文字列側に空白を入れない）。
   ============================================================ */
.dateText {
    font-family: "Google Sans Flex", "Noto Sans JP", YakuHanJP, sans-serif;
    /* 700 だと支給画像より太い。600 が線の太さ・字面の長さとも一番近い
       （400/500/600/700 を並べて画像と見比べて決定）。 */
    font-weight: 600;
    font-size: 0.19rem;          /* 小サイズの基準。大は .dt-md で上書き */
    line-height: 1.5;
    color: var(--color-text);
    text-align: center;
    margin: 0 auto;
    white-space: nowrap;         /* 期間の途中で折り返さない */
}

.dateText .dt-md {
    font-size: 0.245rem;         /* 月.日だけ大きく */
}

.dateText .dt-label--gap {
    margin-right: 0.17rem;       /* 「No.1」の後ろ（元画像は全角スペースぶん） */
}

.dateText .dt-wd {
    margin-left: 0.07rem;
}

.dateText .dt-dash {
    margin: 0 0.06rem;
}

.p-shinkansen .iconButton {
    margin: 4% auto;
}

.p-shinkansen .iconButton .iconButtonText {
    font-size: 0.15rem;
}


/* ============================================================
   WALLPAPER — 3種のサムネイル
   ★ スマホ壁紙の比率は 9 : 19.5（16:9 ではない）。セルの高さを
     揃えたくなっても aspect-ratio: 9 / 16 にしないこと（上下が欠ける）。
   ============================================================ */
.rowImgs {
    width: 80%;
    margin: 5% auto;
}

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

/* ★ 取得済みセルには壁紙サムネ（9:19.5＝縦長）が入り、未取得セルには
   コーディング支給の鍵アイコン（正方形に近い）が入る。高さが違うので
   そのままだと名前の行がセルごとにバラバラになる。
   grid の各セルは行の高さまで伸びるので、frameItem を縦 flex にして
   .frame を伸ばし、.name を必ずセル下端に揃える。 */
.frameItem {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.frame {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.frame img {
    width: 0.64rem;
    height: auto;
}

/* 取得済みは壁紙サムネ（9:19.5）。★ aspect-ratio を足すときは必ず 9 / 19.5。
   9 / 16 にすると object-fit: cover が縦を約18%切り落とす。 */
.frameItem.unlocked .frame img {
    width: 100%;
    max-width: 0.90rem;
    height: auto;
    border-radius: 0.02rem;
}

.frameItem.unlocked .frame {
    cursor: pointer;
}

.frameItem .name {
    margin-top: 0.06rem;
}

/* 名前は top.php の wallpaperNameHtml() が「名前<br>（メンバー名）」で出す。
   ★ （…）の行はセル幅(97px)より長い（最長「（AKB48佐藤綺星・八木愛月）」=113px）ので、
     セル幅のままだと 3 行に割れる。画像は 64〜90px でセルに余白があるため、
     name だけセルより広げて中央寄せし、2 行に収める（画像の配置は変えない）。 */
.frameItem .name {
    font-size: 0.08rem;
    line-height: 0.15rem;
    white-space: normal;
    word-break: keep-all;
    text-align: center;
    box-sizing: border-box;
    width: 125%;
    align-self: center;
}

.p-external .giftButton .iconButtonText {
    font-size: 0.17rem;
}

/* 壁紙アイコン（assets/svg/icon/wallpaper.svg）だけサイズを上げる。
   共有 /icon/*.svg は 24 viewBox・stroke-width 2 だが、このスマホ型は 53 viewBox で
   線が細いため、既定の 0.20rem だと隣の movie / lottery アイコンより明らかに薄く見える。
   ★ precure2026 が同じ図柄で踏んで同じ対処をしている（.p-external / .downloadWallpaper）。 */
.p-external .iconButton .icon img,
.downloadWallpaper .icon img {
    width: 0.30rem;
    height: auto;
}


/* ============================================================
   ENTRY — 応募
   ============================================================ */
.LocationRedeemRewardsTitle {
    text-align: center;
    margin: 5% auto;
    padding: 2%;
    background: #90E1B2;
    color: #fff;
    font-weight: 600;
    font-size: 0.15rem;
}

.page-content .StarBadgeImg {
    width: 50%;
    margin: 5% auto;
}

.page-content .iconButton .icon img.lotteryImg {
    width: 0.25rem;
    height: auto;
}

.tacLink a {
    color: #001BEB;
    text-decoration: underline;
}


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

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

/* ============================================================
   下層ページ（entry / entry-history / wallpaper）の共通調整
   ============================================================ */

/* ★ コピーボタンが見えなかった対策。
   base.css は `.copyButton { background: var(--color-tokai) }`（橙）だが、
   マークアップ側の `.sub1-bg` が `--color-sub1` で上書きする。本企画の sub1 は
   #ffffff なので **白地＋白アイコン（/icon/copy.png は白一色）で完全に消えていた**。
   トップのボタンと同じピンクグラデに揃える。 */
.copyButton,
.copyButton.sub1-bg {
    background: linear-gradient(90deg, #FF938C 0%, #F09BC8 100%);
    color: #fff;
}

/* 区切り線。base.css の `.sub4-border` は `--color-sub4`（#80579E＝紫）で、
   本企画は sub4 を定義していないため紫のまま出ていた。
   企画色のピンクにし、**両端に向かって細くなる**形（中央が一番太いレンズ型）にする。
   ★ clip-path 非対応の古い環境では「細いピンクの帯」に落ちるだけで破綻しない。 */
hr.sub4-border {
    border: none;
    height: 0.02rem;
    background: var(--color-sub3);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
}

/* 「トップページに戻る」。トップの .toOshitabiTop と同じピンクのボーダーに揃える。 */
.simpleButton {
    border: solid 0.02rem var(--color-sub3);
}

/* ※ ごと中央寄せする注意書き。
   base.css の `ul.caution` は `text-align:left` ＋ `li` に `padding-left:1.1em`、
   `※` は `li::after` を `position:absolute; left:0` でぶら下げている。
   li を inline-block にすると li が中身幅に縮むので、ul の中央寄せで
   **※ を含んだ塊ごと**中央に来る（※ のぶら下げは崩さない）。 */
ul.caution.caution--center {
    text-align: center;
}

ul.caution.caution--center li {
    display: inline-block;
    text-align: left;
}