@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 佐野美術館60周年・三島市制85周年記念
   さのび と とくび 名刀のいろは ✕ 刀剣乱舞ONLINE with JR東海

   base.css は編集禁止。支給 coding が base.css の :root（--fs-*）と
   .simpleButton の margin を直接書き換えていたため、その差分も
   すべてここで上書きしている。
   ============================================================ */


/* ============================================================
   BRAND COLORS — 支給 coding の :root を正本にする
   ============================================================ */
:root {
    --color-main:   #d9e8e8;   /* ページ地色（bg.webp の和紙テクスチャと同色） */
    --color-sub1:   #819cd4;   /* 藍：枠線・見出し帯 */
    --color-sub2:   #bfa476;   /* 金：ボタン枠・区切り線 */
    --color-sub3:   #a88446;   /* 金（濃） */
    --color-sub4:   #819cd4;   /* 藍（アクセント） */
    --color-sub5:   #e8f1f8;   /* 薄藍背景 */
    --color-local:  #f1d511;   /* 差し色 */
    --color-text:   #000000;
    --color-button: linear-gradient(to bottom, #ffffff, #f2e9d5);  /* 生成りのボタン地 */

    /* 引換ページ専用のアクセント色。帯・スライダー・確認モーダルで共通に使う。
       ★ --color-button はグラデーション値なので certificate.css の
         linear-gradient(..., var(--cert-obi), ...) や color / border-color に
         入れると宣言ごと無効になる（＝色が消える）。単色のこちらを使うこと。 */
    --cert-accent:  #01b1d2;

    --font-family:      'Noto Serif JP', YakuHanJP, serif;        /* 本文・見出し（明朝） */
    --font-family-deco: 'Noto Sans JP', YakuHanJP, sans-serif;    /* 注意書き等 */

    /* --- 支給 coding が base.css の :root を書き換えていた分（本文がひと回り大きい） --- */
    --fs-base: 0.16rem;
    --fs-md:   0.18rem;
    --fs-lg:   0.20rem;
    --fs-xl:   0.22rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.35rem;
}


/* ============================================================
   SECTION LAYOUT
   ============================================================ */
/* 支給 coding どおり最下部に余白を持たせる（base.css は padding-bottom:0）。
   これが無いと最終セクションの枠がフッターに張り付く。 */
.page-content {
    padding-bottom: 3%;
}

.page-content img {
    margin: auto;
}

.p-intro,
.p-shinkansen,
.p-external,
.p-location {
    position: relative;
    margin: auto;
}

.content-holder {
    position: relative;
    margin: auto;
    padding: 2% 3% 5%;
    z-index: 2;
    border-radius: 0;
    border: 0.015rem solid var(--color-sub1);
}

.p-intro .content-holder {
    margin-top: 5%;
}

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

/* 最終セクション（到着ボイス）は注意書きが6行あり枠の下が詰まって見えるので広げる */
.p-location .content-holder {
    padding-bottom: 9%;
}

/* 区切りの金線（デザインの hr 相当） */
.line {
    border-bottom: solid var(--color-sub2) 0.02rem;
    margin: 2.5% 1% 5%;
}

.margin {
    margin: 5% auto;
}

.marginbottom {
    margin-bottom: 5%;
}

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


/* ============================================================
   SECTION TITLE — 見出し画像（文字は画像に入っている）
   ============================================================ */
.titleImg {
    background-image: url(../img/titleBg.webp);
    background-size: 96% 80%;
    background-position: center;
    background-position-y: 75px;
    background-repeat: no-repeat;
    padding: 5% 0;
}

.p-external .titleImg {
    background-size: 96% 120%;
    background-position-y: 55px;
}

.p-location .titleImg {
    background-size: 96% 96%;
    background-position-y: 100px;
}


/* ============================================================
   INTRO — 巻物風テキスト枠 + 開催期間の札
   ============================================================ */
.textBg {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: 'textbg';
}

.textBg img {
    grid-area: textbg;
    position: relative;
    left: -4%;
    max-width: 107%;
    height: 103%;
    z-index: 1;
}

.textBg .message-container {
    grid-area: textbg;
    z-index: 2;
}

.dateText {
    background-image: url(../img/dateBg.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin: 1% auto 3%;
    padding: 8% 0 5%;
}


/* ============================================================
   BUTTONS
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.10rem;
    border: solid 0.05rem var(--color-sub2);
    color: #000;
    box-shadow: none;
}

/* 内側の白い二重枠は使わない（金の外枠1本のデザイン） */
.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 {
    margin-top: 5%;
}

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

.p-location .iconButton {
    margin: 5% auto;
}

.p-location .iconButton .icon img {
    width: 0.235rem;
    height: auto;
}

.loginRgisterButton {
    border: solid var(--color-sub2) 0.05rem;
    padding: 0.25rem 0.05rem;
    box-shadow: none;
}

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

.toOshitabiTop {
    border: solid 0.02rem var(--color-sub2);
    font-family: var(--font-family);
}

/* 引換ページの「トップページに戻る」— 支給 base.css の margin 差分 */
.simpleButton {
    margin: 0.06rem auto 0.16rem;
}


/* ============================================================
   DISABLED — 触れないことを視覚的に明確にする
   支給 coding どおりグレー地＋白文字。
   ★ アイコンは活性時と同じ SVG（assets/svg/icon の黒版）を使い、
     ここで白へ反転する。アイコンを省いたり差し替えたりしない
     （何のボタンが閉じているか分からなくなるため）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #a1a1a1 !important;
    color: #fff !important;
    border: #838383 solid 0.05rem;
    border-radius: 0.10rem;
    box-shadow: none;
    pointer-events: none !important;
    cursor: default !important;
}

.iconButton[disabled] .icon img,
.iconButton[disabled] .icon2nd img,
.iconButton.disabled .icon img,
.iconButton.disabled .icon2nd img,
.iconButton:disabled .icon img,
.iconButton:disabled .icon2nd img {
    filter: brightness(0) invert(1);
}


/* ============================================================
   EXCHANGE LOCATION — 特典引換場所・期間の枠
   ★ certificate/single.php にも同じマークアップをそのまま置く。
     クラス名を変えない（トップと引換ページで見た目を揃えるため）。
   ============================================================ */
.LocationRedeemRewardsHolder {
    margin: 5% auto;
    border: solid 0.01rem var(--color-sub1);
}

.LocationRedeemRewards {
    width: 100%;
    margin: 5% auto;
    margin-top: 0;
}

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

.LocationRedeemRewardsInfo {
    margin: 3% 4%;
}

.LocationRedeemRewardsHolder ul.caution {
    margin-left: 2%;
}

/* 休館日など、デザインで赤字指定のある注記 */
.attentionText {
    color: #ff0000;
}


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

.fontNotoSerif,
.fontNotoSerif * {
    font-family: 'Noto Serif JP', YakuHanJP, serif !important;
}

ul.caution {
    line-height: 1.8;
}


/* ============================================================
   CERTIFICATE PAGE — 引換ページはトップと同じ部品・同じ見た目にする
   ★ certificate/css/certificate.css は base.css / custom.css の後に
     読まれて ul.caution を上書きするため、親クラスを前置して特異度を上げる。
     certificate.css 自体は書き換えない。
   ★ .completedSlider は左右 0.20rem の padding を持つので、
     持ち込んだ部品には width / margin を付けない（二重インデント防止）。
   ============================================================ */
.completedSlider .LocationRedeemRewardsHolder {
    width: 100%;
    margin: 0.15rem auto;
}

.completedSlider .LocationRedeemRewards {
    width: 100%;
    margin: 0 auto;
}

.completedSlider ul.caution {
    font-size: var(--fs-sm);
    line-height: 1.8;
    margin: 0.12rem 0 0;
    padding: 0;
    text-align: left;
}

.completedSlider ul.caution li {
    position: relative;
    padding: 0 0 0 1.1em;
    list-style: none;
}

.completedSlider ul.caution li::after {
    content: "※";
    position: absolute;
    top: 0;
    left: 0;
}


/* ------------------------------------------------------------
   確認モーダル（askPromptModal）— 引換ページの帯・スライダーと同色に揃える。
   base.css の既定は var(--color-button) だが、この企画ではグラデーション値
   なので `color` / `border-color` に入ると無効になり、
   「はい」が白地に白文字・「いいえ」が枠なしになってしまう。
   ------------------------------------------------------------ */
.exchangePage .askPromptModal__content {
    border-color: var(--cert-accent);
}

.exchangePage .askPromptModal__title,
.exchangePage .askPromptModal__yes {
    background: var(--cert-accent);
    border-color: var(--cert-accent);
    color: #ffffff;
}

.exchangePage .askPromptModal__no {
    background: #ffffff;
    border-color: var(--cert-accent);
    color: var(--cert-accent);
}