@charset "UTF-8";

/* ============================================================
   CUSTOM.CSS — ブルーアーカイブ✕JR東海 推し旅 大阪
   base.css のデフォルト値をここで上書きするだけ。base.css 自体は触らない。

   元: コーダー納品 codings/custom.css（2026-08-17）を移植。
     ・第1弾 = 青（bgBlue）／第2弾 = <main class="page-content PinkBg"> でオレンジ系に切替
     ・本文は Noto Sans JP（.fontNotoSans / caution）、イントロ見出しだけ M PLUS Rounded 1c（.fontEvent）
   ============================================================ */


/* ============================================================
   BRAND COLORS
     coding の値を採用（仕様書の色表より coding のデザインを優先）。
     --color-text は見出し色（.color-text = 青）。本文の黒は base の既定色。
   ============================================================ */
:root {
    --color-main:   #ffffff;   /* ページ地色（背景画像の下） */
    --color-sub1:   #128AFA;   /* 第1弾メイン（青：枠・区切り線・見出し） */
    --color-sub2:   #0f4a7a;
    --color-sub3:   #FA7F4B;   /* 第2弾メイン（オレンジ） */
    --color-sub4:   #128AFA;
    --color-sub5:   #ffc9b8;
    --color-local:  #FA7F4B;
    --color-text:   #128AFA;   /* .color-text（見出し）*/
    --color-text2:  #FA7F4B;   /* 第2弾の見出し色 */
    --color-button: #128AFA;   /* 第1弾ボタン */
    --color-button1: #FA7F4B;  /* 第2弾ボタン */
    --font-family:  "Noto Sans JP", YakuHanJP, sans-serif;
}


/* ============================================================
   FONTS
     イントロ冒頭の見出しだけ M PLUS Rounded 1c（coding どおり）。
     他は Noto Sans JP（--font-family の既定）。
   ============================================================ */
.fontEvent {
    font-family: 'M PLUS Rounded 1c', YakuHanJP, sans-serif;
}

/* base.css 末尾で .fontNotoSans が var(--font-family) に上書きされるため実フォント名で固定 */
.fontNotoSans,
.fontNotoSans *,
.caution,
.caution *,
ul.caution,
ul.caution li,
ul.caution li a {
    font-family: "Noto Sans JP", YakuHanJP, sans-serif !important;
}


/* ============================================================
   PAGE / SECTION（coding）
     背景画像は base.css の main::before が --image-bg（top.php / 引換ページが弾別に出力）で描く。
   ============================================================ */
.page-content {
    padding-bottom: 3%;
}

.p-intro {
    margin: auto;
}

.content-holder {
    margin: auto;
    margin-top: 5%;
    border-radius: 0.1rem;
    padding: 3%;
    padding-top: 1.5%;
}

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

.boldTextBig {
    text-align: center;
    font-weight: bolder;
    margin: 5% auto;
}

.borderTopBottom {
    border-top: solid 0.02rem var(--color-sub1);
    border-bottom: solid 0.02rem var(--color-sub1);
    padding: 3%;
}

.p-external .borderTopBottom {
    padding: 5% 3%;
}

ul.caution {
    line-height: 1.8;
}

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

.p-external ul.paddingLeft {
    padding-left: 7%;
}

.textCenter {
    text-align: center;
}

.marginbottom {
    margin-bottom: 3%;
}

.font20 {
    font-size: 0.20rem;
}


/* ============================================================
   LOGIN / REGISTER（coding）
   ============================================================ */
.loginRgisterButton {
    padding: 0.3rem 0.05rem;
}

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


/* ============================================================
   ICON BUTTON（coding）
     .iconButton は base.css の 3点セット（icon / iconButtonText / icon2nd）をそのまま使う。
   ============================================================ */
.iconButton {
    height: 0.80rem;
    border-radius: 0.10rem;
}

.iconButton::before {
    border-radius: 0.10rem;
}

.iconButton .icon {
    flex: 1.5;
}

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

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

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

/* 特典引換ボタン（coding .giftButton）: 角丸だけ大きくする。内側の白枠は他のボタンと共通 */
.giftButton {
    border-radius: 0.20rem;
}

/* 内側の白枠は base.css の .iconButton::before（inset 0.04rem / 白 0.02rem）を使う。
   ★ coding は .p-external .iconButton::before { border: none } で白枠を消し、
     代わりに mask-composite でリングを描いていた（活性時は background 無しで
     透明＝見えないリング）。mask は旧 iOS Safari で効かないので使わず、
     他のボタンと同じ白枠に揃える。
   内側の半径 = 外側 0.20rem − inset 0.04rem = 0.16rem。 */
.giftButton::before {
    border-radius: 0.16rem;
}


/* ============================================================
   EXCHANGE LOCATION BOX（coding .LocationRedeemRewards）
     トップと引換ページ（certificate/single.php）で同じマークアップを使う。
     ★ width / margin を自前で持たない（.completedSlider の左右 padding と二重にならないよう）。
   ============================================================ */
.LocationRedeemRewards {
    border: var(--color-sub1) solid 0.01rem;
    margin: 5% auto;
    background: #fff;
}

.LocationRedeemRewardsTitle {
    text-align: center;
    border-bottom: var(--color-sub1) solid 0.01rem;
    padding: 2%;
}

.LocationRedeemRewardsSub {
    padding: 3%;
    padding-top: 0;
}

.LocationRedeemRewardsSub p {
    margin: 3%;
}

/* certificate.css が ul.caution を上書きするので、引換ページ側は親クラスを前置して固定 */
.completedSlider .LocationRedeemRewards ul.caution,
.completedSlider ul.caution.topCaution {
    font-size: 0.13rem;
    line-height: 1.8;
    text-align: left;
    font-weight: 400;
}


/* ============================================================
   PHASE 2 THEME — <main class="page-content PinkBg">（coding index two.html）
     青 → オレンジ系。背景画像は --image-bg（bgPink.webp）で切り替わる。
   ============================================================ */
.PinkBg .content-holder {
    border: var(--color-sub3) solid 0.02rem;
}

.PinkBg .color-text {
    color: var(--color-text2);
}

.PinkBg .borderTopBottom {
    border-top: solid 0.02rem var(--color-sub3);
    border-bottom: solid 0.02rem var(--color-sub3);
}

.PinkBg .loginRgisterButton.button-bg {
    background: var(--color-button1);
}

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

.PinkBg .LocationRedeemRewards {
    border: var(--color-sub3) solid 0.01rem;
}

.PinkBg .LocationRedeemRewardsTitle {
    border-bottom: var(--color-sub3) solid 0.01rem;
}

.PinkBg .contents-title .titleBorder {
    background-color: var(--color-button1);
}


/* ============================================================
   DISABLED — 形・アイコン・文字組みは活性とまったく同じで、色だけグレー
     ★ opacity は落とさない・box-shadow も消さない（活性と同じ形を保つ）。
     ★ ::before に background を敷かない。
       ::before は inset 0.04rem の絶対配置なので、地を塗るとボタンの中身
       （アイコン・文字）の上に重なって**まるごと見えなくなる**。
       coding では mask-composite で枠だけ残していたが、mask は旧 iOS Safari で
       効かないため使わない。内側の枠の扱いは活性と共通にする
       （全セクション共通で白の内枠）。
   ============================================================ */
.iconButton[disabled],
.iconButton.disabled,
.iconButton:disabled,
.iconButton[disabled].button-bg,
.iconButton.disabled.button-bg,
.iconButton:disabled.button-bg {
    background: linear-gradient(to right, #828282, #A8A8A8) !important;
    color: #fff !important;
    pointer-events: none !important;
    cursor: default !important;
}

.iconButton[disabled]::before,
.iconButton.disabled::before,
.iconButton:disabled::before {
    background: none;
    border-color: rgba(255, 255, 255, 0.9);
}