@charset "UTF-8";
/* 割引乗車識別サービス 個人端末 画面スタイル
   色・寸法は画面仕様書の画面イメージから採取した値を使用する。
   寸法は 430px 幅を基準にした px 値を rem（1rem = 10px）で書く。ルート文字サイズを
   端末幅に比例させているので、430px より狭い端末では画面全体が同じ比率で縮む。
   画面イメージの補足文は実機換算で約 7px と小さいため、可読性を考えて文字は 10px、
   タップ対象の高さは 24px を下限にした（いずれも 430px 幅での値）。
   共通部品のスタイルは shared/css/parts.css にあり、このファイルより先に読み込む。 */

:root {
    --green: #088508;
    /* 主要ボタン・ヘッダー帯 */
    --green-deep: #067b05;
    /* 枠線・小ボタン */
    --green-spine: #007600;
    /* カード左端の帯 */
    --green-dark: #034705;
    /* 券面下部の帯 */
    --green-menu: #09953b;
    /* メニュータブの枠線 */
    --green-icon: #357528;
    /* 閉じるアイコン */
    --bg-green: #e6f2e6;
    --sky-top: #70b049;
    --sky-bottom: #82b75a;
    --chip-top: #c9fdc9;
    --chip-bottom: #6cf96c;
    --chip-text: #0b5c0b;
    --text: #111111;
    --text-sub: #5f6368;
    /* 仕様書の画面イメージは #82858a だが AA 確保のため濃くした */
    --red: #dd0000;
    --dim: rgba(167, 167, 167, .6);
    --app-width: 430px;
    --side: 2rem;

    /* shared/css/parts.css に渡すサイト色。部品側はこの名前だけを知っている */
    --part-accent: var(--green);
    --part-accent-text: #ffffff;
    --part-accent-deep: var(--green-deep);
    --part-surface: #ffffff;
    --part-card-spine: var(--green-spine);
    --part-chip-top: var(--chip-top);
    --part-chip-bottom: var(--chip-bottom);
    --part-chip-text: var(--chip-text);
    /* 未設定チップ（画面No.10・11 の背面に描かれた精算利用カードの未設定状態から採取） */
    --part-chip-pending-top: #fef4ef;
    --part-chip-pending-bottom: #f7cab2;
    --part-chip-pending-text: #80350e;
    --part-text-sub: var(--text-sub);
    --part-alert: var(--red);
    --part-dim: var(--dim);
}

/* ---- リセット（共通分は shared/css/parts.css の先頭にある） ---- */
/* 430px 幅で 1rem = 10px。parts.css の 10px を端末幅に比例する値で上書きする */
html {
    font-size: calc(min(100vw, 430px) / 43);
}

h1,
h2,
h3 {
    margin: 0 0 .8rem;
    line-height: 1.2;
}

p,
ul {
    margin: 0 0 1.6rem;
}

body {
    margin: 0;
    background: var(--bg-green);
    color: var(--text);
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
}

:focus-visible {
    outline: .3rem solid #0a4d8c;
    outline-offset: .2rem;
}

/* ---- 画面枠 ---- */
.app {
    position: relative;
    max-width: var(--app-width);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--bg-green);
    overflow-x: hidden;
}

.app--top {
    background: radial-gradient(ellipse at 50% 42%, #ffffff 0%, #ffffff 32%, #e5f1e5 100%);
}

.app__body {
    padding: 1.4rem var(--side) 2.8rem;
}

/* ---- 共通ヘッダー部（画面No.1。js/site-parts.js が描画する） ---- */
.hdr-wrap {
    position: relative;
    z-index: 40;
}

.hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: .6rem 1.2rem .4rem;
    border-bottom: 1px solid #e3ece3;
}

.hdr__brand {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.hdr__mark {
    width: 3rem;
    height: 3rem;
    display: block;
}

.hdr__name {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.hdr__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-width: 5.6rem;
    height: 4.4rem;
    padding: .4rem .6rem;
    border: 0;
    border-radius: .6rem;
    background: transparent;
    cursor: pointer;
}

.hdr__btn svg {
    display: block;
}

/* アイコンは fill="currentColor" で描くのでここで色を決める。
   大きさは js/site-parts.js の width/height 属性（px）と同じ値を rem で当て、端末幅に合わせて縮める */
.hdr__btn .icon-open {
    width: 3.6rem;
    height: 2.2rem;
    color: var(--green);
}

.hdr__btn .icon-close {
    width: 3rem;
    height: 2.2rem;
    color: var(--green-icon);
}

/* 戻るボタンのヘッダー（画面No.3-2・4・5・6） */
a.hdr__btn {
    text-decoration: none;
}

.hdr__btn .icon-back {
    width: 3rem;
    height: 2.6rem;
    color: var(--green);
}

.hdr__label {
    font-size: 1rem;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .08em;
}

/* 開閉でアイコンを差し替える */
.hdr__btn .icon-close,
.hdr__btn[aria-expanded="true"] .icon-open {
    display: none;
}

.hdr__btn[aria-expanded="true"] .icon-close {
    display: block;
}

/* ---- メニュータブ ---- */
.menu {
    position: absolute;
    top: 100%;
    right: -.8rem;
    z-index: 30;
    width: 74%;
    background: #ffffff;
    border-left: .6rem solid var(--green-menu);
    border-bottom: .6rem solid var(--green-menu);
    border-top: .6rem solid transparent;
    border-top-left-radius: 2.6rem;
    border-bottom-left-radius: 2.6rem;
    padding: .8rem 0 1.4rem;
}

.menu[hidden] {
    display: none;
}

.menu__list {
    list-style: none;
    margin: 0;
    padding: 0 2.4rem;
}

.menu__list li+li {
    margin-top: .6rem;
}

.menu__list a {
    display: block;
    padding: .8rem 0;
    color: var(--text);
    font-size: 1.8rem;
    text-decoration: underline;
    text-underline-offset: .3rem;
}

/* ---- 共通部品のサイト側調整（shared/css/parts.css の後に読み込んで上書きする） ---- */
/* 個人端末のボタンはカードより左右 2rem 内側に置く（画面イメージ準拠）。
   <button> は width: auto だと中身の幅に縮むので、<a> と揃うよう幅を明示する */
.p-btn {
    width: calc(100% - 4rem);
    margin-left: 2rem;
    margin-right: 2rem;
    padding: .4rem 1.4rem;
    box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .18);
}

.p-btn+.p-btn {
    margin-top: 2rem;
}

.btn--wide {
    letter-spacing: .6em;
    text-indent: .6em;
}

.btn-stack {
    margin-top: 1.4rem;
}

.btn-flat--reg {
    letter-spacing: .4em;
    text-indent: .4em;
    min-width: 5.6rem;
}

/* 次の .p-btn-flat〜.p-cardback__ring と .p-btn の padding・box-shadow は、対面端末・
   管理端末が parts.css の既定値のまま使うプロパティなので、個人端末の値をここで上書きする */
.p-btn-flat {
    padding: .4rem 1rem;
}

.p-chip {
    gap: .5rem;
}

.p-chip__mark {
    width: 3.2rem;
    height: 3.2rem;
}

/* 印・カメラの SVG は width/height 属性（px）で描かれるので、丸・ボタンに合わせて rem で縮める */
.p-chip__mark svg {
    width: 1.7rem;
    height: 1.7rem;
}

.p-panel {
    border-radius: .4rem;
}

.p-panel__head-title {
    font-size: 1.2rem;
}

.p-idfield select {
    width: 4.9rem;
}

.p-camera svg {
    width: 1.4rem;
    height: 1.2rem;
}

/* 交通系ICカード裏面の説明図。大きさ・中の配置・ID の文字は parts.css の既定値のまま
   （中の配置は図に対する比率なので、ここでは上書きしない）。赤丸の線だけ細くする */
.p-cardback__ring {
    border-width: .15rem;
}

/* 利用規約・プライバシーポリシーの表示欄の高さ */
.p-scrollbox {
    max-height: 33rem;
}

/* 表示欄だけで 1 画面を占める場合（画面No.4・6）は画面の残り全部を使う */
.p-scrollbox--page {
    max-height: none;
    height: calc(100vh - 10.1rem);
}

/* 中身の高さに合わせる場合（画面No.5） */
.p-scrollbox--fit {
    max-height: none;
}

.p-scrollbox h2 {
    margin: .2rem 0 .6rem;
    font-size: 1.8rem;
    font-weight: 700;
}

.p-scrollbox h3 {
    margin: 1rem 0 .4rem;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.p-scrollbox h3:first-child {
    margin-top: .2rem;
}

/* ダイアログの幅とボタンの大きさ。位置は parts.css がビューポートの中央に固定する
   （ユーザー決定 2026-10-02）。
   幅は画面イメージの実測で画面の 76%。文が長いダイアログは画面イメージでも広く
   描かれている（画面No.12 は 82%）ので、76% を下限にして文の幅まで広げる。
   <br> で区切った行が折り返さず画面イメージの改行位置のまま収まる。左右は --side 以上空ける。
   fixed だと % の基準がビューポートになるので、.app の幅（min(100vw, --app-width)）から求める */
.p-dialog {
    width: max-content;
    min-width: calc(min(100vw, var(--app-width)) * .76);
    max-width: calc(min(100vw, var(--app-width)) - 2 * var(--side));
}

.p-dialog__actions {
    gap: 3.4rem;
}

.p-dialog__actions .p-btn-flat {
    min-height: 4.4rem;
    border-radius: .8rem;
    font-size: 1.7rem;
    padding: .8rem 1.8rem;
}

.p-dialog__actions .p-btn-flat--ghost {
    border-radius: 1rem;
    letter-spacing: .5em;
    text-indent: .5em;
}

/* ---- トップ画面（画面No.2） ---- */
.top__title {
    margin: 2.6rem 0 0;
    color: var(--green);
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
}

/* ロゴの枠。画面イメージは白地に緑の枠線と、枠の内側へ滲む緑の影（外側の影は無い）。
   大きさ・位置は画面イメージの実測（430px 幅で約 128×167px） */
.top__logo {
    width: 12.8rem;
    margin: 2.2rem auto 0;
    padding: 1.3rem 0 2.2rem;
    background: #ffffff;
    border: .3rem solid #99c899;
    border-radius: .6rem;
    box-shadow: inset 0 0 .6rem rgba(8, 133, 8, .6);
    text-align: center;
}

.top__logo img {
    width: 8.9rem;
    height: auto;
    display: block;
    margin: 0 auto;
}

.top__logo span {
    display: block;
    margin-top: .6rem;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.top__lead {
    margin: 3.4rem 0 2.2rem;
    color: var(--text-sub);
    font-size: 1.2rem;
    text-align: center;
}

/* ---- 利用規約画面（画面No.3-1・3-2。③④⑤ の欄は 3-1 だけ） ---- */
/* 見出しの字頭は表示欄の本文にそろえる（枠 .2rem + 内側の余白 1.2rem。画面イメージ準拠） */
.terms__label {
    margin: .8rem 0 .6rem;
    padding-left: 1.4rem;
    font-size: 1.8rem;
    font-weight: 700;
}

/* ③④ はチェックボックスの列をそろえたまま、2 行のかたまりを画面の中央に置く（画面イメージ準拠） */
.terms__agree {
    width: fit-content;
    margin: 1.4rem auto 1.8rem;
}

/* ⑤ がマイナンバーカードでの認証を求められたときのダイアログ（画面仕様書に無い。台帳 OI-298）。
   ［マイナンバーカードで認証する］は長く、［閉じる］と横に並べると 390px 幅で収まらないので縦に積む */
.terms__card-dialog .p-dialog__actions {
    flex-direction: column;
    gap: 1.2rem;
}

/* ⑤ の登録が失敗したときのメッセージ欄。個人端末の画面イメージにメッセージ枠が
   無いため、細枠のインライン表示にサイトの警告色を当てた（顧客確認事項 A-3）。
   登録情報画面（画面No.13）で登録情報を取得できなかったときの欄も同じ見た目にする */
.terms__msg,
.account__msg {
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border: 1px solid var(--red);
    background: #fdecec;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
}

/* 登録情報画面の欄は下の券面・ボタンと同じく左右 2rem 内側に置く */
.account__msg {
    margin-right: 2rem;
    margin-left: 2rem;
}

/* ---- 利用方法画面（画面No.4） ---- */
.howto p {
    margin: 0 0 .4rem;
    padding-left: 1rem;
    font-size: 1.4rem;
}

.howto h3 {
    margin-top: 2.2rem;
}

/* 各ストアのバッジ（画面イメージから切り出した画像） */
.howto__stores {
    display: flex;
    justify-content: center;
    gap: 1.4rem;
    margin: 1rem 0 1.2rem;
}

.howto__stores img {
    width: 46%;
    height: auto;
}

/* ミニアプリ欄の画面例（画面イメージから切り出した画像） */
.howto__figure {
    display: block;
    width: 80%;
    height: auto;
    margin: .8rem auto 1.2rem;
    border: .2rem solid var(--green-deep);
}

/* ---- お知らせ画面（画面No.5） ---- */
.notice__panel {
    background: #f8f4ee;
    padding: 1.2rem 1rem;
    text-align: center;
}

.notice__panel p {
    margin: 0 0 1rem;
    font-size: 1.9rem;
}

.notice__panel p:last-child {
    margin-bottom: 0;
}

/* ---- よくある質問画面（画面No.6） ---- */
.faq__panel {
    background: #f8f4ee;
    padding: 1.2rem 1rem 1.4rem;
}

.faq__q {
    margin: 0;
    font-size: 1.9rem;
}

.faq__a {
    margin: .6rem 0 1.4rem;
    padding: .6rem .8rem;
    background: #ffffff;
    border: .2rem solid var(--green-deep);
    font-size: 1.7rem;
}

.faq__a p {
    margin: 0;
}

.faq__a:last-child {
    margin-bottom: 0;
}

/* 回答中の URL のリンク。画面イメージの青字・下線にそろえる */
.faq__link {
    display: block;
    margin-top: .2rem;
    color: #1a3ecc;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
}

/* ---- メイン画面（画面No.7-1 / 7-2） ---- */
.pill {
    margin-top: .8rem;
    padding: .8rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(100deg, #eef5ee 0%, #fafcfa 100%);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
}

.creditno {
    margin: .6rem 0 0;
    font-size: 1.2rem;
    white-space: nowrap;
    font-weight: 700;
    text-align: center;
    letter-spacing: .02em;
}

/* ---- 登録情報画面（画面No.13） ---- */
/* 券面は下のボタン（.p-btn）と同じく左右 2rem 内側に置き、幅をそろえる（画面イメージ準拠） */
.ticket {
    margin: 0 2rem;
    border-radius: .6rem;
    overflow: hidden;
    box-shadow: 0 1px .3rem rgba(0, 0, 0, .22);
}

/* 券名は h2 なので、上の見出しの既定の下余白を消して下の帯（発行事業者名称）に接する */
.ticket__head {
    margin: 0;
    background: var(--green);
    color: #ffffff;
    font-size: 2rem;
    font-weight: 700;
    padding: .7rem 1.4rem;
}

/* ④ 時刻表示欄がある券面（画面No.13）。券名を左端・時刻を右端に置く */
.ticket__head--clock {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

/* 毎秒書き換わるので、桁の入れ替わりで幅が動かないよう等幅の数字を使う */
.ticket__clock {
    font-variant-numeric: tabular-nums;
}

.ticket__top {
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 100%);
    padding: .8rem 1.4rem .6rem;
}

.ticket__issuer {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    color: #10300f;
}

.ticket__period {
    margin: .8rem 0 0;
    padding-left: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
}

.ticket__period-s {
    font-size: 1.5rem;
    letter-spacing: .02em;
}

.ticket__period-l {
    font-size: 3.8rem;
    letter-spacing: -.01em;
}

.ticket__illust {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -.4rem;
}

.ticket__foot {
    background: linear-gradient(180deg, #0b570c 0%, var(--green-dark) 100%);
    color: #ffffff;
    text-align: right;
    padding: .4rem 1.4rem 1.2rem;
    margin-top: -1px;
}

.ticket__foot p {
    margin: .2rem 0 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .01em;
    /* 値の無い行（⑦ の空欄・引けないときの氏名）も 1 行ぶんの高さを保ち、券面の高さを揃える。
       値は 1.25rem × 1.5。1lh は iOS 16.4 未満の Safari が読めないので使わない */
    min-height: 1.875rem;
}

.ticket__foot .ticket__name {
    letter-spacing: .1em;
}

/* 券面に重ねる状態表示（メイン画面パターン） */
.ticket__stage {
    position: relative;
}

.ticket__state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 1rem;
    color: #ffffff;
}

/* 文字の大きさは券面の幅（350px。430px 幅の値）で画面イメージどおりの改行位置に収まる値（差異メモ 個11） */
.ticket__state-head {
    margin: 0;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}

/* ※ をぶら下げるため、行頭を 1 文字ぶん外に出す */
.ticket__state-note {
    width: fit-content;
    margin: .6rem auto 0;
    padding-left: 1em;
    text-indent: -1em;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
}

.ticket__state .is-alert {
    color: var(--red);
}

/* 有効終了日の赤字（有効期限切れ間近・有効期限切れ）。
   券面上部の地色（緑 #70b049〜#82b75a・灰 #9c9c9c〜#a3a3a3）に --red（#dd0000）を
   載せると 1.9〜2.2:1 しか取れないので、色相を保ったまま暗くした（4.5:1 以上）。
   白地に載る --red（ダイアログの警告文など）は 5.15:1 なのでそのまま */
.ticket__period-s.is-alert,
.ticket__period-l.is-alert {
    color: #700000;
}

/* 失効・利用停止の券面はヘッダー帯以外をグレーにする。
   有効期間欄は赤字（有効終了日）を残すので、グレースケールでなく地色を差し替える */
.ticket--gray .ticket__top {
    background: linear-gradient(180deg, #9c9c9c 0%, #a3a3a3 100%);
}

.ticket--gray .ticket__illust,
.ticket--gray .ticket__foot {
    filter: grayscale(1);
}

/* ---- 登録情報削除確認画面（画面No.16） ---- */
.is-dimmed .ticket__illust {
    filter: grayscale(1);
}

/* ---- 精算利用カード変更確認画面（画面No.15-1〜15-4）・登録情報削除確認画面（画面No.16）・
       登録情報削除完了画面（画面No.17） ---- */
/* 画面イメージのメッセージは中央そろえ */
.dialog--center {
    text-align: center;
}

/* ダイアログの注意書き。強調部分だけ太字にするので既定は通常の太さ */
.dialog__note {
    margin: .4rem 0 0;
    color: var(--red);
    font-size: 1.5rem;
    line-height: 1.3;
}

.dialog__note b {
    font-weight: 700;
}

/* 登録情報画面例（画面No.15-2・15-3 ②）。画面イメージどおり見出しを画像の下のほうに重ね、
   半透明の白地で画像から浮かせる。見出しは画像より広く、左右にはみ出す */
.dialog__figure {
    position: relative;
    width: fit-content;
    margin: .8rem auto 0;
}

.dialog__figure img {
    display: block;
    width: 6.6rem;
    height: auto;
    border: 1px solid #cccccc;
}

.dialog__figure figcaption {
    position: absolute;
    bottom: .7rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .3rem .4rem;
    background: rgba(255, 255, 255, .8);
    font-size: 1.2rem;
    line-height: 1.3;
    white-space: nowrap;
}

/* ---- マイナンバーカード認証・名寄せ・署名用電子証明のダイアログ
       （画面No.8-1・8-2・9・12） ---- */
/* 署名用電子証明有無確認画面（画面No.12）。③［『無』のまま］は字間を空けない */
.dialog--cert .p-dialog__actions .p-btn-flat--ghost {
    letter-spacing: normal;
    text-indent: 0;
}

/* 注意書き（画面No.12 ①）。2 段落を 1 ブロック（.dialog__notes）にまとめ、行は左そろえで
   ブロックごと中央に置く。段落ごとに中央に置くと最長行の違いで左端が揃わない。
   画面イメージは ※ を含めたブロックが中央に来て、続きの行と 2 段落目の行頭が ※ の後ろに
   揃う（padding-left と .dialog__note--hang の text-indent）。
   文字は画面イメージの実測で本文の約 0.75 倍。本文と同じ大きさ近くにすると最長行が
   ダイアログ幅いっぱいになり、中央に置いた形にならない */
.dialog--cert .dialog__notes {
    display: table;
    margin: 0 auto;
    padding-left: 1em;
    font-size: 1.3rem;
    text-align: left;
}

.dialog--cert .dialog__note {
    font-size: inherit;
}

/* ① の問いかけ。本文とも注意書きとも 1 行空ける（画面イメージのまま） */
.dialog__ask {
    margin: 1.4rem 0 1rem;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.35;
}

/* ※ の行だけブロックの行頭より 1 字左に出す（画面No.12 ① 1 段落目のぶら下げインデント）。
   出す分はブロックの padding-left で空けてある */
.dialog__note--hang {
    text-indent: -1em;
}

/* 画面No.12 ① 2 段落目は 1 行分空ける */
.dialog__note--gap {
    margin-top: .8rem;
}

.dialog__note-u {
    text-decoration: underline;
}