@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — 京都文化博物館 特別展「寛永」× 刀剣乱舞ONLINE with JR東海

   支給 coding（_admin-voistock/docs/project/assets/toukenranbu-kanei2026/
   codings/custom.css）をそのまま移植したもの。クラス名は coding のまま。

   ★ base.css は触らない。
     支給 coding は base.css の :root にある --fs-* を直接書き換えていたが、
     base.css は全企画共有なのでここ（custom.css）の :root で上書きする。
   ★ 背景は base.css の main::before（--image-bg）が担当する。
     top.php が info.inc.php の $backgroundCss を出力するので、ここには書かない。
   ============================================================ */


/* ============================================================
   BRAND COLORS — 支給 coding の :root（正本）
   ============================================================ */
:root {
    --color-main:   #ffffff;                                  /* ページ背景色（背景画像の下地） */
    --color-sub1:   #ffffff;
    --color-sub2:   #A88446;                                  /* 金 */
    --color-sub3:   #E54C93;                                  /* ボタンの左右ボーダー（ピンク） */
    --color-text:   #E54C93;                                  /* .color-text 強調（ピンク） */
    --color-button: linear-gradient(to bottom, #ffffff, #F2E9D5);

    --font-family:  'Noto Serif JP', serif;                   /* 本文・見出し（明朝） */

    /* ★ 支給 coding が base.css 側で書き換えていた文字サイズスケール。
         base.css は共有ファイルなので触らず、ここで上書きする。 */
    --fs-base: 0.17rem;
    --fs-md:   0.18rem;
    --fs-lg:   0.20rem;
    --fs-xl:   0.22rem;
    --fs-2xl:  0.25rem;
    --fs-3xl:  0.35rem;
}


/* ============================================================
   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 スタイルシートが勝っている。
   ★ 支給 coding にはこのブロックが無かったので、テンプレから戻している。
   ============================================================ */
button,
input,
select,
textarea {
    font-family: inherit;
}

.iconButton .iconButtonText,
.loginRgisterButton .iconButtonText,
.toOshitabiTop {
    font-family: var(--font-family);
}


/* ============================================================
   FONT — 注意書き・小さい説明文は 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
   ============================================================ */
.page-content {
    padding-bottom: 5%;
}

.page-content img {
    margin: auto;
}

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


/* ============================================================
   CARD — 黒地 + 白の細枠 + 四隅の金飾り
   ============================================================ */
.card {
    position: relative;
    width: 96%;
    margin: 4% auto;
    padding: 0;
    background: black;
    overflow: hidden;
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 0.01rem solid white;
    pointer-events: none;
    z-index: 0;
}

.corner {
    position: absolute;
    width: 0.3rem;
    height: 0.3rem;
    pointer-events: none;
    z-index: 1;
}

.corner.tl {
    top: 0;
    right: 0;
    transform: none !important;
}

.corner.tr {
    top: 0;
    left: 0;
    transform: scaleX(-1) !important;
}

.corner.bl {
    bottom: 0;
    top: auto;
    right: 0;
    transform: scaleY(-1) !important;
}

.corner.br {
    bottom: 0;
    top: auto;
    left: 0;
    transform: rotate(180deg) !important;
}

.content-holder {
    width: 100%;
    position: relative;
    margin: auto;
    padding: 0 3% 5%;
    z-index: 3;
    border-radius: 0;
    border: none;
    background: transparent;
    color: white;
    /* ★ グローバルの /css/style_v2.css（getHeader() が全ページで読み込む）が
         `.content-holder { box-shadow: 0 0 0.03rem #ccc }` を当てている。
         白カード前提の指定なので、黒地のこの企画では各セクションの一番上に
         薄いグレーの線が浮いて見える。base.css / style_v2.css は共有なので触らず、
         ここで打ち消す。 */
    box-shadow: none;
}


/* ============================================================
   BUTTONS — 黄色の帯（yellow_banner.webp）+ 左右ピンクの縁
   ★ 非活性は形をそのままに地だけグレーの帯（texture_gray_banner.webp）。
     opacity は落とさない・box-shadow も揃える（規約）。
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0;
    border-left: solid 0.08rem var(--color-sub3);
    border-right: solid 0.08rem var(--color-sub3);
    color: #000;
    box-shadow: none;
}

.iconButton.button-bg {
    background-image: url(../img/yellow_banner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.iconButton::before {
    display: none;
}

.iconButton .icon {
    flex: 1.5;
}

/* ★ 支給 coding は 0.20rem だったが、trainIcon（幅 0.42rem・実効の高さ約 0.32rem）
     だけが大きく、他のアイコンが揃って小さく見えるので 0.30rem に上げている。
     base.css の既定は 0.35rem。 */
.iconButton .icon img {
    width: 0.30rem;
    height: 0.30rem;
}

.page-content .iconButton .icon img.trainIcon {
    width: 0.42rem;
    height: auto;
}

/* ★ volume.svg だけ横長（29.75x20.143）。0.30rem の正方形に object-fit:contain で
     収めると高さが約 2/3 に潰れて他より小さく見えるので、横幅基準で合わせる。 */
.iconButton .icon img.wideIcon {
    width: 0.38rem;
    height: auto;
}

.iconButton .icon2nd img {
    /* ★ 左アイコンを 0.30rem に上げたので、矢印も base.css 既定の 0.30rem に揃える
         （0.26rem のままだと右だけ小さく見える） */
    height: 0.30rem;
    width: auto;
}

.p-shinkansen .iconButton {
    margin-top: 5%;
}

/* --- DISABLED（非活性）— 形は活性と同じ・地だけグレーの帯 --- */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: #A1A1A1;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
    border-left: solid 0.08rem #A3A3A3;
    border-right: solid 0.08rem #A3A3A3;
    border-radius: 0;
    background-image: url(../img/texture_gray_banner.webp);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
}

/* --- ログイン / 新規登録 --- */
.loginRgisterButton {
    border: none;
    border-radius: 0;
    padding: 0.3rem 0.05rem;
    box-shadow: none;
    border-left: solid 0.08rem var(--color-sub3);
    border-right: solid 0.08rem var(--color-sub3);
    color: #000;
}

.loginRgisterButton.button-bg {
    background-image: url(../img/yellow_banner.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

/* ★ .iconButton .icon img と同じ理由で 0.20rem → 0.30rem */
.loginRgisterButton .icon img {
    height: 0.30rem;
}

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


/* ============================================================
   INTRO — 巻物風の地に説明文を重ねる
   ============================================================ */
.textBg {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    grid-template-areas: 'textbg';
}

.textBg img {
    grid-area: textbg;
    position: relative;
    z-index: 1;
}

.textBg .message-container {
    grid-area: textbg;
    z-index: 2;
    margin: 0.2rem auto;
    white-space: nowrap;
    /* ★ 支給 coding は .text-md（0.18rem）だが、最長行
         「オリジナルボイスを聴いて、京都文化博物館 へ！」が 430px 幅で
         カードからはみ出して右端が切れる（横スクロールも発生する）。
         coding は @media(max-width:400px) でしか縮めておらず 400〜430px が
         抜けていたので、この段落だけ 0.17rem に固定する。
         ★ nowrap（＝支給どおりの改行位置）を保つための調整。
           font-size を戻すなら改行位置の作り直しが必要。 */
    font-size: 0.17rem;
}


/* ============================================================
   特典引換場所・期間（トップ / 引換ページ共通のマークアップ）
   ============================================================ */
.LocationRedeemRewardsHolder {
    margin: 5% auto;
    border: solid 0.01rem white;
    padding-bottom: 5%;
}

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

.LocationRedeemRewardsTitle {
    text-align: center;
    padding: 2%;
    border-bottom: solid 0.01rem white;
}

.LocationRedeemRewardsInfo {
    margin: 3% 4%;
}

.LocationRedeemRewardsInfo .LocationRedeemRewardsTitle {
    background-color: #fff;
    color: #000;
    font-size: 0.16rem;
    font-weight: 700;
    padding: 1%;
}

/* ★ 注意書きが枠線とくっついていたので左右にインセットを入れる。
     ★★ margin ではなく padding で入れること。certificate.css が
        `.completedSlider ul.caution { margin-left:0; margin-right:0 }` を
        **同じ特異度かつ後勝ち**で当てているため、margin だと引換ページだけ
        打ち消されて枠に貼り付く（2026-09-16 に実際に踏んだ）。
     ★ 枠自体に padding を足すと見出し帯（.LocationRedeemRewardsTitle）まで
        内側に寄ってデザインが変わるので、注意書き側で調整する。 */
.LocationRedeemRewardsHolder ul.caution {
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}


/* ============================================================
   TEXT UTILITIES（支給 coding のインライン指定をクラス化）
   ============================================================ */
ul.caution {
    line-height: 1.8;
}

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

.margin {
    margin: 4% auto;
}

.p-location .margin {
    white-space: nowrap;
}

.p-external .message-container {
    margin: 5% auto;
}

.bannerBottomText {
    margin: 3% auto 0;
    font-size: 0.13rem;
    font-weight: 600;
    padding-left: 2%;
}

.centerTextSmall {
    font-size: 0.13rem;
    margin: 5% auto 4%;
    padding: 0 3.5%;
}

.marginbottom {
    margin-bottom: 4%;
}

.page-content img.marginbottom {
    margin-bottom: 5%;
}

.page-content img.marginTitleImg {
    margin: 5% auto;
}

/* 赤字の注意（休館日・到着ボイスの前置き） */
.attentionText,
ul.caution li.attentionText {
    color: #FF0000;
}

/* 黄字の注意（引換にチケットが必要） */
.noticeYellow {
    color: #FFEE00;
    font-size: 0.13rem;
}

/* ★ base.css の `ul.caution li a { color: blue }`（#0000FF）は黒地のカードでは
     暗くて読みにくいので、少し明るい青にする。
     引換ページ（.completedSlider）は白地なので既定の blue のまま。 */
.content-holder ul.caution li a {
    color: #5B9BFF;
}

/* 到着ボイスセクションの注意書き。
   ★ 支給 coding は #7A5817（茶）だったが、黒地では読めないので白にする。
     1行目の「東海道新幹線のご乗車の有無に関わらず〜」だけ赤のまま。
   上の青（.content-holder ul.caution li a）より後に書いて勝たせる。 */
.p-location ul.caution,
.p-location ul.caution li,
.p-location ul.caution li a {
    color: #ffffff;
}

.p-location ul.caution li.attentionText {
    color: #FF0000;
}


/* ============================================================
   引換ページ（certificate/single.php）
   ★ certificate/css/certificate.css は base.css / custom.css の後に
     読まれるので、上書きされる指定はここで親クラスを前置して固定する。
   ★ .completedSlider は左右 0.20rem の padding を持つ。持ち込む部品には
     自前の width / margin を付けない（二重インデントになる）。
   ============================================================ */
/* 枠・見出し帯・見出し文字は企画の金色に統一（本文は可読性のため黒のまま） */
.completedSlider .LocationRedeemRewardsHolder {
    width: 100%;
    margin: 5% auto;
    border-color: #B58726;
}

.completedSlider .LocationRedeemRewards {
    color: #000;
}

/* 「特典引換場所・期間」（塗り無しの大見出し）— 文字と下罫を金色に */
.completedSlider .LocationRedeemRewards > .LocationRedeemRewardsTitle {
    color: #B58726;
}

.completedSlider .LocationRedeemRewardsTitle {
    border-bottom-color: #B58726;
}

/* 「引換場所」「引換期間」「休館日」（塗りの小見出し）— 地を金色・文字は白 */
.completedSlider .LocationRedeemRewardsInfo .LocationRedeemRewardsTitle {
    background-color: #B58726;
    color: #fff;
}

.completedSlider ul.caution {
    line-height: 1.8;
    text-align: left;
}

/* 白地では黄色が読めないので、同じ役割の金色（--color-sub2）に置き換える */
.completedSlider .noticeYellow {
    color: var(--color-sub2);
}

.completedSlider .attentionText {
    color: #FF0000;
}


/* ============================================================
   確認モーダル（askPromptModal）— 引換スライド後の「引換券を使いますか？」

   ★ base.css は var(--color-button) を background / color / border-color の
     3通りで使っているが、この企画の --color-button は **linear-gradient**。
     グラデーションは color / border-color では**無効値**になり、
     background でも「ほぼ白」なので白文字が乗ると読めなくなる:
       ・__title   … 白地に白文字で見出しが消える
       ・__yes     … 同上（#yesBtn だけは certificate.css が背景を上書きしている）
       ・__no      … 文字色と枠が無効値になり既定色に落ちる
       ・__content … 枠線が無効値
     企画の金色（#B58726）で単色に上書きする。base.css は共有なので触らない。
   ============================================================ */
/* ★ border は **ショートハンドで**書き直すこと。base.css の
     `border: 0.01rem solid var(--color-button)` はグラデーションが入った時点で
     宣言ごと無効になり、border-style が初期値の none に落ちる。
     custom.css で border-color だけ足しても枠は出ない（実際に一度踏んだ）。 */
.askPromptModal__content {
    border: 0.01rem solid #B58726;
}

.askPromptModal__title {
    background: #B58726;
    color: #ffffff;
}

.askPromptModal__yes {
    background: #B58726;
    color: #ffffff;
    border: 0.01rem solid #B58726;
}

.askPromptModal__no {
    background: #ffffff;
    color: #B58726;
    border: 0.01rem solid #B58726;
}

.askPromptModal__no:hover {
    background: #FAF5E9;
}


/* ============================================================
   MEDIA
   ============================================================ */
@media (max-width: 400px) {
    .text-md {
        font-size: 0.17rem;
    }

    .p-location .text-base {
        font-size: 0.16rem;
    }
}