@charset "UTF-8";
/* 3 サイト（個人端末・対面端末・管理端末）で共有する画面部品（静的画面用。API 連携は未実装）。
 *
 * 先頭に 3 サイト共通のリセットを置く。全 HTML でこのファイルをサイトの CSS より先に
 * 読み込むので、サイトごとに違うリセット（見出し・段落の余白、body の地色・文字寸法、
 * :focus-visible の色）はサイト側で上書きする。
 *
 * このファイルはサイトごとの色を知らない。下の CSS 変数を参照するだけで、
 * 値はサイト側（個人端末は css/discount.css の :root）が定義する。
 * 参照には既定値を添えてある。サイト側が定義し損ねても文字と地が同色になって
 * 読めなくなることを避けるためで、既定値は個人端末の定義の写しである
 * （対面端末しか持たない設定中チップと注意色だけ対面端末の値）。
 * 正はあくまでサイト側の :root で、コントラスト比を確かめているのもそちらである
 * （tests/frontend/shared/contrast.test.js）。既定値を書き換えるときは、
 * 白地・地色に対して AA を満たす値から外れないこと。
 *   --part-accent       主要ボタンの背景・チェックボックスの色
 *   --part-accent-text  主要ボタンの文字色
 *   --part-accent-deep  小ボタンの背景・枠線
 *   --part-surface      カード・パネル・ダイアログの地色
 *   --part-card-spine   カード左端の帯
 *   --part-chip-top     ステータスチップのグラデーション（上）
 *   --part-chip-bottom  ステータスチップのグラデーション（下）
 *   --part-chip-text    ステータスチップの文字・アイコン
 *   --part-chip-pending-top     未設定チップのグラデーション（上）
 *   --part-chip-pending-bottom  未設定チップのグラデーション（下）
 *   --part-chip-pending-text    未設定チップの文字・アイコン
 *   --part-chip-working-top     設定中チップのグラデーション（上。対面端末だけが定義する）
 *   --part-chip-working-bottom  設定中チップのグラデーション（下。同上）
 *   --part-chip-working-text    設定中チップの文字（同上）
 *   --part-attention    注意を引く操作（検索・再印刷）のボタン地色
 *   --part-attention-text 同ボタンの文字色
 *   --part-text-sub     補足文
 *   --part-alert        警告文
 *   --part-dim          ダイアログ表示中の覆い
 * サイトによって変わらない中立色（入力欄の枠・カメラアイコン・カード裏面図など）は
 * 変数にせずここに直接書く。
 *
 * 寸法のうち画面ごとに変わるもの（ボタンの幅、ダイアログの位置、字間など）は
 * ここでは持たず、サイト側で部品クラスに足す。
 */

/* ---- リセット（3 サイト共通） ---- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 部品の寸法は rem で書く。個人端末は css/discount.css でこの値を端末幅に比例させる */
html {
    -webkit-text-size-adjust: 100%;
    font-size: 10px;
}

img,
svg {
    vertical-align: middle;
}

a,
button,
input,
select,
textarea {
    font-family: inherit;
}

button,
input,
select,
textarea {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
}

table {
    border-collapse: collapse;
}

/* ---- ボタン ---- */
.p-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: 1rem 1.4rem;
    border: 0;
    border-radius: .5rem;
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .18);
    cursor: pointer;
}

.p-btn--primary {
    background: var(--part-accent, #088508);
    color: var(--part-accent-text, #ffffff);
}

.p-btn--ghost {
    background: var(--part-surface, #ffffff);
    color: var(--part-accent, #088508);
    border: .2rem solid var(--part-accent, #088508);
}

/* 活性条件を満たさないボタン（gateButton の非活性）。［認証済み］（.p-btn-flat--done）と
   同じ灰色にし、押せる見た目を消すため影も外す。無効化状態のためコントラスト要件の対象外 */
.p-btn:disabled {
    background: #a6a6a6;
    color: var(--part-accent-text, #ffffff);
    box-shadow: none;
    cursor: default;
}

/* 小さい塗りボタン（登録・設定・認証済みなど） */
.p-btn-flat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: .6rem;
    font-size: 1.1rem;
    font-weight: 700;
    background: var(--part-accent-deep, #067b05);
    color: var(--part-accent-text, #ffffff);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

/* 設定済みの非活性表示（仕様書の画面イメージの見た目を維持。無効化状態のためコントラスト要件の対象外） */
.p-btn-flat--done {
    background: #a6a6a6;
    color: var(--part-accent-text, #ffffff);
    cursor: default;
}

.p-btn-flat--ghost {
    background: var(--part-surface, #ffffff);
    color: var(--part-accent-deep, #067b05);
    border: .3rem solid var(--part-accent-deep, #067b05);
    border-radius: 1rem;
}

/* 注意を引きたい操作（郵便番号の検索・割引情報控えの再印刷）。主要色と別系統の地色にする */
.p-btn-flat--attention {
    background: var(--part-attention, #ffc000);
    color: var(--part-attention-text, #111111);
}

/* ---- ステータスチップ + カードの行 ---- */
.p-status-row {
    display: flex;
    align-items: stretch;
    gap: .8rem;
    margin-bottom: 1.2rem;
}

.p-chip {
    flex: none;
    width: 6.4rem;
    border-radius: 1.4rem;
    background: linear-gradient(180deg, var(--part-chip-top, #c9fdc9) 0%, var(--part-chip-bottom, #6cf96c) 100%);
    color: var(--part-chip-text, #0b5c0b);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
}

/* 未設定（まだ入力が済んでいない）を表すチップ */
.p-chip--pending {
    background: linear-gradient(180deg, var(--part-chip-pending-top, #fef4ef) 0%, var(--part-chip-pending-bottom, #f7cab2) 100%);
    color: var(--part-chip-pending-text, #80350e);
}

/* 設定中（登録を始めたが結果が返っていない）を表すチップ。丸の中は空にする */
.p-chip--working {
    background: linear-gradient(180deg, var(--part-chip-working-top, #fffff7) 0%, var(--part-chip-working-bottom, #ffff02) 100%);
    color: var(--part-chip-working-text, #000000);
}

.p-chip__mark {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: var(--part-surface, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-chip__label {
    font-size: 1rem;
    font-weight: 700;
}

/* ---- カード ---- */
.p-card {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--part-surface, #ffffff);
    border-left: .8rem solid var(--part-card-spine, #007600);
    border-radius: 1.3rem;
    padding: 2rem 1.8rem 2.2rem 1.1rem;
    box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .14);
}

.p-card__title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: .01em;
}

.p-card__note {
    margin: .4rem 0 0;
    color: var(--part-text-sub, #5f6368);
    font-size: 1rem;
    line-height: 1.35;
}

.p-card__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: .4rem;
}

.p-card__row .p-card__note {
    flex: 1 1 auto;
    margin-top: 0;
}

/* ---- ラジオボタンの並び（精算利用カードの選択など） ---- */
.p-radios {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .8rem;
    margin: .8rem 0 .8rem;
}

.p-radios label {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-height: 2.4rem;
    font-size: 1.1rem;
    white-space: nowrap;
    font-weight: 700;
}

.p-radios input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #000000;
}

/* ---- 枠付きパネル ---- */
.p-panel {
    border: 1px solid #333333;
    border-radius: .6rem;
    padding: .8rem .8rem 1rem;
}

.p-panel__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.p-panel__note {
    margin: .4rem 0 0;
    color: var(--part-text-sub, #5f6368);
    font-size: 1rem;
    line-height: 1.4;
}

/* 見出しと操作ボタンを 1 行に並べる場合 */
.p-panel__head {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.p-panel__head-title {
    margin: 0;
    flex: 1 1 auto;
    font-size: 1.4rem;
    white-space: nowrap;
    font-weight: 700;
}

.p-panel__foot {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.p-panel__foot .p-panel__note {
    flex: 1 1 auto;
}

/* ---- 交通系IC カードID の入力欄 ---- */
.p-idrow {
    display: flex;
    align-items: stretch;
    gap: .6rem;
    margin: .6rem 0 .6rem;
}

.p-idfield {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid #cccccc;
    border-radius: .6rem;
    overflow: hidden;
    background: var(--part-surface, #ffffff);
}

.p-idfield select {
    flex: none;
    width: 5.2rem;
    border: 0;
    border-right: 1px solid #dddddd;
    background: #f3f6f3;
    font-size: 1rem;
    font-weight: 700;
    padding: 0 .2rem 0 .5rem;
}

.p-idfield input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    padding: .4rem .4rem;
    font-size: 1.2rem;
}

.p-camera {
    flex: none;
    width: 3.5rem;
    min-height: 2.4rem;
    border: 1px solid #cccccc;
    border-radius: .8rem;
    background: #f0f0f0;
    color: #3a3a3a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ---- 交通系IC カード裏面の説明図 ---- */
/* 中の印・帯・赤丸は図に対する比率（%）で置く。サイトは図の大きさと ID の文字の大きさだけを
   変えればよく、中の配置は崩れない。比率は画面遷移フロー図の裏面図 3 枚（個人端末 2・対面端末 1）の
   実測で、3 枚ともほぼ同じだった。図の縦横比は約 1.62（既定の大きさもこれに合わせる） */
.p-cardback {
    position: relative;
    width: 11.7rem;
    height: 7.2rem;
    margin-top: .8rem;
    background: #c9c9c9;
    border: 1px solid #b4b4b4;
    border-radius: .5rem;
}

/* 上端に接する 2 つの黒い印 */
.p-cardback__chip {
    position: absolute;
    top: 0;
    width: 7%;
    height: 9%;
    background: #1a1a1a;
}

.p-cardback__chip--a {
    left: 67%;
}

.p-cardback__chip--b {
    left: 79%;
    width: 12%;
}

/* ID の帯は下端・右端に接し、左の約 1/4 を空ける。
   文字は帯の幅の約 8 割（画面イメージの比率）になる大きさにする。図の大きさを変えるサイトは文字も合わせる */
.p-cardback__id {
    position: absolute;
    left: 23%;
    right: 0;
    bottom: 1%;
    height: 15%;
    background: #111111;
    color: #ffffff;
    font-size: .5rem;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}

/* 帯を囲む赤丸。下端は図の外に少し出る */
.p-cardback__ring {
    position: absolute;
    left: 22.5%;
    bottom: -5%;
    width: 73.5%;
    height: 25%;
    border: .2rem solid #e60000;
    border-radius: 50%;
}

/* ---- 同意チェックボックス ---- */
.p-agree {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    min-height: 4.4rem;
}

.p-agree input[type="checkbox"] {
    width: 2.2rem;
    height: 2.2rem;
    accent-color: var(--part-accent, #088508);
    flex: none;
}

.p-agree span {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .3rem;
}

/* ---- スクロールする表示枠（利用規約・プライバシーポリシー） ---- */
.p-scrollbox {
    background: var(--part-surface, #ffffff);
    border: .2rem solid var(--part-accent-deep, #067b05);
    padding: 1rem 1.2rem 1.4rem;
    overflow-y: auto;
}

/* ---- ダイアログ ---- */
/* 覆いは画面全体に掛ける。.app 基準（absolute）だと、.app より広い画面で両端が覆われない */
.p-dim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--part-dim, rgba(167, 167, 167, .6));
}

/* スクロール位置によらず見えるよう、ビューポートの中央に固定する（ユーザー決定 2026-10-02）。
   ビューポートより背の高いダイアログは内側でスクロールさせる。幅は各サイトが決める */
.p-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 55;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    transform: translate(-50%, -50%);
    background: var(--part-surface, #ffffff);
    padding: 2.2rem 1.6rem 2rem;
}

.p-dialog__msg {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.35;
}

.p-dialog__msg--alert {
    margin-top: .2rem;
    color: var(--part-alert, #dd0000);
}

.p-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.2rem;
}

/* ---- カメラ読み取り（shared/js/ic-camera.js） ---- */
/* 画面いっぱいに重ねる。色はサイトによらない（カメラアプリと同じ黒地と赤・黄の枠）。
   枠の位置と大きさは JS が画面の大きさから決める（検証ツールの camera.css に倣う） */
.p-camcap {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000000;
    color: #ffffff;
    overflow: hidden;
}

.p-camcap__stage {
    position: absolute;
    inset: 0;
}

.p-camcap__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-camcap__preview {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 90%;
    max-height: 60%;
    transform: translate(-50%, -50%);
    border-radius: .6rem;
}

/* カードの枠。外側を暗くして枠の中を目立たせる */
.p-camcap__frame {
    position: absolute;
    outline: .3rem solid #ff2b2b;
    border-radius: .6rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
    pointer-events: none;
}

/* ID の帯。ここだけを切り出して送る */
.p-camcap__id {
    position: absolute;
    border: .2rem dashed #ffe100;
    border-radius: .3rem;
    background: rgba(255, 225, 0, .12);
}

.p-camcap__video[hidden],
.p-camcap__preview[hidden],
.p-camcap__frame[hidden],
.p-camcap__guide[hidden],
.p-camcap__btn[hidden],
.p-camcap__shutter[hidden] {
    display: none;
}

.p-camcap__guide,
.p-camcap__msg {
    position: absolute;
    left: 1.6rem;
    right: 1.6rem;
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 0 .4rem #000000;
    white-space: pre-wrap;
}

.p-camcap__guide {
    top: calc(env(safe-area-inset-top, 0px) + 1.6rem);
}

.p-camcap__msg {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 11rem);
    font-weight: 700;
}

/* 3 列に割り、［撮影］（読めないときは［再撮影］）を画面の中央、［閉じる］を右端に置く。
   左右の列は中身によらず同じ幅にして、中央の列を画面の中央にそろえる */
.p-camcap__bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 2.4rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
}

/* 高さを［撮影］に合わせ、［再撮影］に替わっても［閉じる］の上下の位置を変えない */
.p-camcap__center {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 7.2rem;
}

.p-camcap__close {
    grid-column: 3;
    justify-self: end;
    margin-right: calc(env(safe-area-inset-right, 0px) + 1.6rem);
}

.p-camcap__shutter {
    width: 7.2rem;
    height: 7.2rem;
    padding: 0;
    border: .4rem solid #ffffff;
    border-radius: 50%;
    background: #ff2b2b;
    box-shadow: 0 0 0 .3rem #ff2b2b;
    cursor: pointer;
}

.p-camcap__btn {
    min-width: 12rem;
    padding: 1.2rem 2rem;
    border: 1px solid #ffffff;
    border-radius: .8rem;
    background: rgba(0, 0, 0, .55);
    color: #ffffff;
    font-size: 1.6rem;
    cursor: pointer;
}

.p-camcap__shutter:disabled,
.p-camcap__btn:disabled {
    opacity: .5;
    cursor: default;
}

/* ---- 支援クラス ---- */
.p-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}