@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — JR東海✕OVERWATCH『 Payload to Osaka 』
   base.css のデフォルトを上書き。base.css 自体は触らない。
   REM SYSTEM: デザイン px ÷ 100 = rem 値（100px = 1rem @ 393px）
   ============================================================ */


/* ============================================================
   BRAND COLORS — 仕様書 overwatch_osaka.md に準拠
   ============================================================ */
:root {
    --color-main: #f8f8f8;
    /* ページ背景色 */
    --color-sub1: #0d8a9e;
    /* メインカラー（ティール） */
    --color-sub2: #f06315;
    /* アクセント（オレンジ） */
    --color-sub3: #0d8a9e;
    /* ティール */
    --color-sub4: #f06315;
    /* オレンジ */
    --color-sub5: #eef1f5;
    /* 薄青背景 */
    --color-local: #f1d511;
    /* 差し色（イエロー） */
    --color-text: #2f383f;
    /* テキストカラー */
    --color-button: #1fa1af;
    /* ボタンカラー */
    --font-family: 'M PLUS 1p', YakuHanJP, sans-serif;
}


/* ============================================================
   PAGE BACKGROUND — bg-pattern.png を #f8f8f8 にタイル表示
   base.css の main::before（cover）を上書きしてリピートにする。
   ============================================================ */
body {
    background: var(--color-main);
}

main::before {
    background: url(../img/bg-pattern.png) repeat top left !important;
    background-color: var(--color-main) !important;
}


/* ============================================================
   CONTENT-HOLDER WRAPPER — 四隅アングル装飾の外枠（仕様書指定）
   ============================================================ */
.content-holder-wrapper {
    padding: 0.03rem;
    background-image: url(../img/obj_cnr-LT.svg), url(../img/obj_cnr-RT.svg), url(../img/obj_cnr-RB.svg), url(../img/obj_cnr-LB.svg);
    background-repeat: no-repeat;
    background-position: top left, top right, bottom right, bottom left;
    width: 96%;
    margin: 0.1rem auto 0.24rem;
}

/* CONTENT-HOLDER — 白カード + 1px ボーダー（仕様書指定） */
.content-holder {
    width: 100%;
    max-width: none;
    background: rgb(231 236 243 / 0.6);
    border: 0.01rem solid #d6dde1;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding: 0.20rem;
}

/* 区切り線（ティール） */
hr.sub1-border {
    border: none;
    border-top: 0.02rem solid var(--color-sub1);
    opacity: 0.7;
}


/* ============================================================
   SECTION HEADING — 画像見出し（sec-head01/02.png）
   ============================================================ */
.sec-head-img {
    width: 100%;
    max-width: 3.60rem;
    margin: 0.30rem auto 0.06rem;
    display: block;
}


/* ============================================================
   HERO / KV
   ============================================================ */
.p-hero .bannerImg img {
    width: 100%;
    display: block;
}


/* ============================================================
   PRIMARY CTA — iconButton（OVERWATCH メニュー風 / 左オレンジアクセントバー）
   ・角はストレート（角丸なし）でソリッドなゲーミング基調
   ・左端にオレンジの縦アクセントバー＋内側に薄いハイライト枠
   ・hover でバー拡張、active で軽く沈む
   ============================================================ */
.iconButton {
    border-radius: 0 !important;
    clip-path: none !important;
    border: 0.015rem solid rgba(0, 0, 0, 0.22);
    box-shadow: inset 0 0 0 0.015rem rgba(255, 255, 255, 0.30); /* 内側ハイライト枠 */
    letter-spacing: 0.06em;
    overflow: hidden;
    transition: background 0.15s ease, box-shadow 0.15s ease, filter 0.12s ease, transform 0.06s ease;
}

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

/* 左のオレンジ アクセントバー（base の内枠 ::before を再利用） */
.iconButton::before {
    content: '';
    inset: 0 auto 0 0 !important;
    width: 0.08rem;
    border: none !important;
    border-radius: 0 !important;
    background: var(--color-sub2);
    transition: width 0.12s ease;
}

/* hover: バー拡張 / active: わずかに沈む＋発色 */
.iconButton.button-bg:hover::before  { width: 0.12rem; }
.iconButton.button-bg:active::before { width: 0.14rem; }
.iconButton.button-bg:active         { transform: translateY(0.015rem); filter: brightness(0.96); }

/* 無効時はアクセントバーもグレーに */
.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    background: rgba(255, 255, 255, 0.4);
}

/* 戻る等の simpleButton も角ストレートに統一 */
.simpleButton {
    border-radius: 0 !important;
    clip-path: none !important;
}


/* ============================================================
   スマホ壁紙グリッド（全7種・上段4枚/下段3枚）
   base.css .thumbnails-container.cols-4 = flex 25% → 4枚で折返し（7枚=4+3）
   ============================================================ */
.smapho-grid {
    width: 100%;
    margin: 0.12rem auto;
}

.smapho-grid .thumbnail img {
    /* border: 0.01rem solid #d6dde1; */
    border-radius: 0rem;
    background: #fff;
}

/* 未解放（locked）は random.jpg をそのまま表示。解放済みはタップ可。 */
.smapho-grid .thumbnail.switchPage {
    cursor: pointer;
}


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