@charset "UTF-8";
/* 割引乗車識別サービス 対面端末 画面スタイル
   色・寸法は画面仕様書（TSIC-26-0194）の画面イメージから採取した値を使用する。
   共通部品のスタイルは shared/css/parts.css にあり、このファイルより先に読み込む。

   画面幅はタブレット（DIGNO Tab2 5G。縦持ちで CSS 800×1280px）に合わせ、
   画面イメージの作図幅 737px を --app-width にしている。緑系の画面イメージは
   737px 幅で描かれているのでそのまま実測値を使い、紫系（634〜657px 幅で描かれている）は
   737/画像幅 を掛けて換算した。

   画面は 2 系統ある。
     緑系  … 利用者情報設定・登録補助者確認・登録完了・利用者情報検索（画面No.5〜11）
     紫系  … トップ・プライバシーポリシー・利用規約・マイナンバーカード確認（画面No.1〜4）
   共通部品に渡す --part-* は既定を緑系にし、紫系は .app--purple で置き換える。 */

:root {
    --green: #088508;
    /* 主要ボタン・小ボタン */
    --green-line: #087f08;
    /* ボタンの枠線 */
    --green-spine: #007600;
    /* カード左端の帯 */
    --bg-green: #e6f2e6;
    --chip-top: #c0fcc0;
    --chip-bottom: #64f864;
    /* 画面イメージは #067b05 相当だが、チップ下端（#64f864）に対して 3.94:1 で
       AA 未達なので個人端末と同じ濃さに揃えた（全域 5.94:1） */
    --chip-text: #0b5c0b;
    --chip-todo-top: #fef4ef;
    --chip-todo-bottom: #f7cab2;
    --chip-todo-text: #80350e;
    /* クレジットカード登録中の「設定中」。新画面遷移フロー（ｸﾚ）の画面イメージから、
       ダイアログの覆い（--dim）を差し引いて求めた値 */
    --chip-work-top: #fffff7;
    --chip-work-bottom: #ffff02;
    --chip-work-text: #000000;
    /* 仕様書の画面イメージは #82858a 相当だが AA 確保のため濃くした */
    --text: #111111;
    --text-sub: #5f6368;
    --red: #dd0000;
    /* 郵便番号の検索・割引情報控えの再印刷 */
    --attention: #ffc000;
    --field-line: #767676;
    /* 入力欄・プルダウンの枠 */
    --dim: rgba(167, 167, 167, .6);

    /* 紫系画面の色 */
    --purple: #833e79;
    --purple-light: #9d5493;
    --purple-dark: #6d2b63;
    --purple-edge: #482745;
    --purple-title: #50164a;
    --purple-bg-top: #f1d0ef;
    --purple-bg-mid: #e2c2e4;
    --purple-bg-bottom: #ad8ab9;
    --msg-line: #c04f15;
    --msg-bg: #fbe3d6;

    /* 画面イメージ（緑系）の作図幅。左右 24px は下部ボタンの位置から逆算した値で、
       ボタン行（.btn-row）が画面イメージどおり 587px 幅に収まる */
    --app-width: 737px;
    --side: 24px;

    /* shared/css/parts.css に渡すサイト色。部品側はこの名前だけを知っている */
    --part-accent: var(--green);
    --part-accent-text: #ffffff;
    --part-accent-deep: var(--green);
    --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);
    --part-chip-pending-top: var(--chip-todo-top);
    --part-chip-pending-bottom: var(--chip-todo-bottom);
    --part-chip-pending-text: var(--chip-todo-text);
    --part-chip-working-top: var(--chip-work-top);
    --part-chip-working-bottom: var(--chip-work-bottom);
    --part-chip-working-text: var(--chip-work-text);
    --part-attention: var(--attention);
    --part-attention-text: #111111;
    --part-text-sub: var(--text-sub);
    --part-alert: var(--red);
    --part-dim: var(--dim);
}

/* ---- リセット（共通分は shared/css/parts.css の先頭にある） ---- */
h1,
h2,
h3 {
    margin: 0 0 8px;
    line-height: 1.2;
}

p,
ul {
    margin: 0 0 16px;
}

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: 16px;
    line-height: 1.5;
}

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

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

.app__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 12px var(--side) 24px;
}

/* 画面名。仕様書の画面イメージでは緑系画面の最上部に置かれる（共通ヘッダー部は無い） */
.page-title {
    margin: 6px 0 20px;
    font-size: 29px;
    font-weight: 700;
    text-align: center;
}

/* 画面下部の左右 2 ボタン（次へ／戻る・割引設定／戻る など）。
   画面イメージのボタンは 264×58px・間隔 65px で、左右 51px を空けると同じ位置になる */
.btn-row {
    display: flex;
    gap: 65px;
    margin: 24px 51px 0;
}

.btn-row .p-btn {
    flex: 1 1 0;
    min-width: 0;
}

/* 緑系画面の操作ボタンは仕様書の画面イメージでは画面の一番下に置かれる（紫系は本文の直後） */
.app:not(.app--purple) .app__body>.btn-row:last-child,
.app:not(.app--purple) .app__body>.btn-wide:last-child {
    margin-top: auto;
}

/* p-card は行の中で伸びる前提の指定なので、画面直下に置くときは伸ばさない */
.app__body>.p-card {
    flex: 0 0 auto;
}

/* ---- 共通部品のサイト側調整（shared/css/parts.css の後に読み込んで上書きする） ----
   値は画面イメージ（737px 幅）の実測。個人端末と共通の既定値と同じになるものは
   上書きせず parts.css のままにしている。 */
.p-btn {
    min-height: 58px;
    border-radius: 10px;
    font-size: 22px;
}

/* 仕様書の画面イメージは短いラベルだけ字間を空けている（「戻　る」／「割引設定」） */
.btn--spaced {
    letter-spacing: .38em;
    text-indent: .38em;
}

.p-btn--ghost {
    border-width: 3px;
    border-color: var(--green-line);
}

.p-btn-flat {
    min-height: 40px;
    padding: 8px 26px;
    border-radius: 6px;
    font-size: 14px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2);
}

.p-status-row {
    gap: 9px;
    margin-bottom: 9px;
}

.p-chip {
    width: 109px;
    border-radius: 20px;
}

.p-chip__label {
    font-size: 16px;
}

.p-card {
    border-radius: 24px;
    padding: 12px 20px 8px;
}

.p-card__title {
    font-size: 29px;
}

.p-card__note {
    font-size: 12px;
}

.p-panel {
    padding: 8px 14px 8px;
}

.p-panel__title {
    font-size: 23px;
}

.p-panel__note {
    font-size: 13px;
    line-height: 1.25;
}

/* 仕様書の画面イメージは 2 択を 1 行に並べる。737px 幅なら折り返さずに収まるので
   nowrap では固定せず、狭い画面では折り返させる */
.p-radios {
    justify-content: flex-start;
    gap: 10px;
    margin: 6px 0 8px;
}

.p-radios label {
    min-height: 34px;
    gap: 6px;
    font-size: 21px;
}

.p-radios input[type="radio"] {
    width: 24px;
    height: 24px;
}

/* 対面端末の同意チェックは下線を引かない（仕様書の画面イメージ準拠） */
.p-agree {
    gap: 30px;
}

.p-agree span {
    text-decoration: none;
    font-weight: 400;
    font-size: 28px;
}

/* 仕様書の画面イメージのチェックは塗りつぶしでなく白地の枠にレ点 */
.p-agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 50px;
    height: 50px;
    border: 3px solid #1a2b3a;
    border-radius: 6px;
    background: #ffffff;
}

.p-agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 13px;
    top: 3px;
    width: 13px;
    height: 27px;
    border: solid var(--part-accent);
    border-width: 0 5px 5px 0;
    transform: rotate(42deg);
}

/* ---- 入力部品（利用者情報欄・検索欄） ---- */
.field {
    flex: 1 1 auto;
    min-width: 0;
    height: 35px;
    padding: 3px 8px;
    border: 1px solid var(--field-line);
    border-radius: 6px;
    background: #ffffff;
    font-size: 22px;
    text-align: center;
}

.field:disabled {
    color: var(--text);
    opacity: 1;
}

/* プルダウン。三角は select 自身では描けないので包み要素の ::after で置く */
.selectbox {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
}

.selectbox::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    margin-top: -3px;
    border: 8px solid transparent;
    border-top: 11px solid #0d2a4a;
    pointer-events: none;
}

.selectbox .field {
    appearance: none;
    -webkit-appearance: none;
    padding-left: 6px;
    padding-right: 26px;
    text-align: left;
}

/* ---- 利用者情報の入力行（画面No.5-1 ①〜⑥） ---- */
.form {
    margin-top: 6px;
}

.form__row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 5px;
}

/* 「氏　名」「生年月日」のように均等割付にする */
.form__label {
    flex: none;
    width: 4em;
    font-size: 21px;
    font-weight: 700;
    text-align: justify;
    text-align-last: justify;
}

/* 仕様書の画面イメージでは氏名・郵便番号は入力欄の並びを右まで伸ばさない。
   画面イメージの実測では姓・名・郵便番号とも同じ幅（137px）。
   flex-basis の割合はラベル（4em）と gap を含む行全体に対する値 */
.form__row--name .field,
.form__row--zip .field {
    flex: 0 1 26.4%;
}

/* 生年月日は選択肢の文字数で幅が動く（「12月」で月が広がる）ため、行に対する割合で固定する。
   画面イメージでは 3 欄とも氏名の欄より狭く、右端まで伸びない */
.form__row--birth .selectbox {
    flex-grow: 0;
}

.form__row--birth .selectbox--year {
    flex-basis: 21%;
}

.form__row--birth .selectbox--month {
    flex-basis: 16.5%;
}

.form__row--birth .selectbox--day {
    flex-basis: 16.5%;
}

/* 住所行。disabled の「京都府」「京都市」が intrinsic 幅で膨らみ、
   行政区プルダウンを潰してしまうため、画面イメージどおり 3 欄を等幅にする。
   flex-basis を 0 にすると入力欄だけ枠と余白ぶん広がって等幅にならないので、
   3 欄そろって同じ割合を基準に伸縮させる */
.form__row--addr .field,
.form__row--addr .selectbox {
    flex: 1 1 33%;
}

.form__row--free .field {
    height: 62px;
    text-align: left;
}

/* 入力欄の下に出すメッセージ欄。配色は画面No.1②・No.4 のメッセージ枠に合わせる */
.form__msg {
    margin: 0 0 6px;
    padding: 7px 10px;
    border: 1px solid var(--msg-line);
    background: var(--msg-bg);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* 枠の中（メールアドレス・交通系ICカードID）では下ではなく上に間隔を取る */
.form__msg--tight {
    margin: 10px 0 0;
}

.form__foot {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

/* ---- 割引情報（画面No.5-2 ⑦⑧） ---- */
.pickrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

/* 割引券種のプルダウンだけ幅広・大きめ（仕様書の画面イメージ準拠） */
.pickrow .selectbox .field {
    height: 49px;
    border-radius: 16px;
    border-color: #d5e3d5;
    background: linear-gradient(95deg, #e7f2e7 0%, #fbfdfb 45%, #fafcfa 100%);
    font-size: 21px;
    font-weight: 700;
    text-align: center;
    padding-right: 46px;
}

.pickrow .selectbox::after {
    right: 16px;
    border-width: 11px;
    border-top-width: 15px;
}

/* ---- メールアドレス（画面No.5-2 ⑨〜⑪） ---- */
.mailbox {
    margin-top: 4px;
}

.mailbox .p-panel__note {
    margin-bottom: 4px;
}

/* 入力欄と操作ボタンを 1 行に並べる（メールアドレス欄・受付番号欄） */
.fieldrow {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fieldrow .field {
    height: 33px;
    border: 2px solid #111111;
    border-radius: 4px;
    text-align: left;
}

/* ---- 交通系ICカードID 登録欄（画面No.5-3 ⑬〜⑯・画面No.11-1 ②〜④） ---- */
.p-idrow {
    gap: 9px;
    margin: 6px 0 4px;
}

.p-idfield {
    border-color: var(--field-line);
}

/* 幅と文字は画面イメージの実測（幅約 58px、「JW」の字高から約 18px）。
   従来の 52px・20px では「JW」が選択の矢印に重なって切れた */
.p-idfield select {
    width: 58px;
    padding: 0 0 0 6px;
    font-size: 18px;
    background: #eeeeee;
}

.p-idfield input {
    padding: 9px 6px;
    font-size: 24px;
    text-align: center;
}

/* 色は parts.css の既定（淡い灰の地・濃い灰のアイコン・淡い灰の枠）のまま。画面イメージも同じ配色 */
.p-camera {
    width: 46px;
    min-height: 45px;
}

.p-camera svg {
    width: 26px;
    height: 22px;
}

/* 説明図の交通系ICカード裏面。画面イメージの実測は 148×91px。
   中の印・帯・赤丸は parts.css が図に対する比率で置くので、大きさと ID の文字だけを指定する */
.p-cardback {
    width: 148px;
    height: 91px;
    margin-top: 6px;
}

.p-cardback__id {
    font-size: 6.5px;
    letter-spacing: 0;
}

/* ---- クレジットカード登録欄（画面No.5-4 ⑰） ---- */
/* 登録が済んだカードのマスク番号。新画面遷移フロー（ｸﾚ）の画面イメージ（image49.png）は
   見出しのすぐ下に詰めて置き、下に余白を残さないので p の既定の下マージンを落とす */
.creditno {
    margin: 0;
    line-height: 1.2;
}

/* ---- ダイアログ（画面No.6-1・6-2・7・8・13・19・20・21） ---- */
/* 画面イメージでは上寄り（26%・11% など）だが、位置は parts.css でビューポートの中央に
   固定する（ユーザー決定 2026-09-30）。
   --dialog-ratio は .app の幅に対する割合で、画面イメージの左右の余白を除いた幅にする */
.p-dialog {
    --dialog-ratio: .76;
    width: calc(min(100vw, var(--app-width)) * var(--dialog-ratio));
    padding: 28px 24px 30px;
}

/* 中身が横に広いダイアログ（画面No.19・20・21）。左右の余白を 6.5% に詰める */
.p-dialog--wide {
    --dialog-ratio: .87;
}

/* KLON ログアウト方法指示ダイアログ（画面No.6-1・6-2）。
   「マイナンバーカード認証されています。」が 18 文字で、既定の幅（560px − 余白 48px）では
   29px × 18 = 522px が収まらず末尾の「す。」だけ折り返すため、1 文字分広げる */
.p-dialog--tall {
    --dialog-ratio: .8;
}

/* ---- クレジットカード登録受付番号発行ダイアログ（新画面遷移フロー（ｸﾚ）） ---- */
/* 画面No. が振られていないダイアログ。寸法はフロー図の画面イメージ（image47.png）の実測値で、
   このダイアログだけ左右の余白が狭く、メッセージが枠で囲まれる */
.p-dialog--reception {
    padding: 19px 10px 34px;
}

.p-dialog__msgbox {
    padding: 6px 0 9px;
    border: 1px solid #000000;
}

/* 行送りは画面イメージの実測（35px）。ほかのダイアログより詰まっており、
   6 行あるので既定（1.25）のままだと枠が 17px 高くなる */
.p-dialog--reception .p-dialog__msg {
    line-height: 1.21;
}

/* 受付番号。前後を 1 行ぶん空け、ほかの行と違って太字にしない（画面イメージのまま） */
.dialog__reception-no {
    margin: 33px 0 37px;
    font-weight: 400;
}

/* 再印刷。登録完了画面（画面No.10 ②）と同じ大きさで、こちらは緑の枠が付く */
.p-dialog--reception .btn-wide {
    margin-top: 23px;
}

.p-dialog--reception .btn-wide .p-btn-flat {
    width: 264px;
    border: 2px solid var(--green-line);
}

/* 登録状況（「登録待ち」「登録完了」とマスク番号）。前の画面イメージでチェックボックスがあった位置に置く。
   寸法は画面イメージで確かめていない */
.p-dialog--reception .dialog__reception-state {
    margin-top: 40px;
    font-size: 24px;
    text-align: center;
}

.dialog__reception-state p {
    margin: 0;
}

.dialog__reception-value {
    font-weight: 700;
}

.p-dialog--reception .p-dialog__actions {
    margin-top: 60px;
}

/* 登録完了になるまで ③ 次へ は押せない。画面イメージに非活性の描写が無いので、
   ほかの非活性ボタン（.p-btn:disabled・［認証済み］）と同じ灰色にした */
.p-dialog__actions .p-btn-flat:disabled {
    background: #a6a6a6;
    color: var(--part-accent-text);
    cursor: default;
}

/* ---- 表示利用者情報確認ダイアログ（画面No.13） ---- */
/* ②③④ の表示欄はメッセージと同じ幅で左そろえ */
.dialog__pick {
    margin: 10px 0 18px;
}

/* ---- 精算利用カード変更確認ダイアログ（画面No.20 ②③） ---- */
.dialog__cmp {
    margin: 22px 0 6px;
}

.dialog__cmp-head {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
}

.dialog__cmp-line {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    white-space: nowrap;
}

/* 媒体名の後ろに間を置いて「：」の位置を揃える（画面イメージ準拠） */
.dialog__cmp-name {
    display: inline-block;
    width: 9em;
}

/* ---- 署名用電子証明有無確認画面（画面No.21 ①） ---- */
/* ① の問いかけ。本文と 1 行空ける（画面イメージのまま） */
.dialog__ask {
    margin: 22px 0 0;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.dialog__ask+.dialog__ask {
    margin-top: 0;
}

/* 注意書き。2 段落を 1 ブロック（.dialog__notes）にまとめ、行は左そろえでブロックごと
   中央に置く。段落ごとに中央に置くと最長行の違いで左端が揃わない。
   画面イメージは ※ を含めたブロックが中央に来て、続きの行と 2 段落目の行頭が ※ の後ろに
   揃う（padding-left と .dialog__note--hang の text-indent）。
   強調部分だけ太字にするので既定は通常の太さ */
.dialog__notes {
    display: table;
    margin: 22px auto 0;
    padding-left: 1em;
    font-size: 21px;
    text-align: left;
}

.dialog__note {
    margin: 0;
    color: var(--red);
    font-weight: 400;
    line-height: 1.3;
}

.dialog__note+.dialog__note {
    margin-top: 22px;
}

.dialog__note b {
    font-weight: 700;
}

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

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

/* ---- 利用者情報検索画面（画面No.11） ---- */
/* 設定状況のチップ列が無いぶんカードが広いので、画面イメージと同じ位置に入力行を寄せる。
   カードの下余白も画面イメージの実測値 */
.page-search .form {
    margin-left: 93px;
}

.page-search .p-card {
    padding-bottom: 55px;
}

/* ---- 利用者検索結果画面（画面No.12） ---- */
/* ② 一覧は枠の中でスクロールする（画面イメージも 5 件目が下端で切れている）。
   枠の高さ・色・カードの位置は画面イメージの実測値 */
.reslist {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 787px;
    overflow-y: auto;
    padding: 12px 0;
    border: 2px solid #d9d9d9;
    background: #f2f2f2;
}

.reslist__item {
    display: flex;
    align-items: center;
    gap: 29px;
    margin-bottom: 11px;
    padding: 0 19px 0 37px;
}

/* ① 利用者情報選択欄。画面イメージのチェックは白地の枠にレ点 */
.reslist__item>input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: none;
    width: 53px;
    height: 53px;
    margin: 0;
    border: 3px solid #042433;
    border-radius: 8px;
    background: #ffffff;
}

.reslist__item>input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 15px;
    top: 4px;
    width: 14px;
    height: 29px;
    border: solid var(--text);
    border-width: 0 4px 4px 0;
    transform: rotate(42deg);
}

.reslist__item>input[type="checkbox"]:disabled {
    background: #d9d9d9;
}

.reslist__card {
    padding: 16px 12px 14px 32px;
    border-radius: 16px;
}

/* 1 人を選ぶと選ばれなかった行は灰色になる（画面イメージ準拠） */
.reslist__item.is-dim .p-card {
    background: #9b9b9b;
}

/* 画面イメージは .65 相当だが、灰色の地（#9b9b9b）に対して 4.35:1 で AA 未達。
   選べなくなった行でも氏名・住所は読む情報なので .72（5.09:1）まで濃くした */
.reslist__item.is-dim .userrow {
    color: rgba(0, 0, 0, .72);
}

/* ③ 次へ の非活性（① が未選択）。画面イメージの実測で、淡い灰の地・黒の文字・［戻る］と同じ緑の枠で、
   影も活性時のまま残す。parts.css の既定（濃い灰の地・白文字・影なし）はほかの画面の非活性に
   残し、非活性が描かれているこの画面だけ上書きする */
.page-result .p-btn:disabled {
    background: #d9d9d9;
    color: var(--text);
    border: 3px solid var(--green-line);
    box-shadow: 0 .3rem .5rem rgba(0, 0, 0, .18);
}

/* ---- 利用者情報の表示行（画面No.12 ②・13 ②③④） ---- */
.userrow {
    display: flex;
    align-items: baseline;
    gap: 26px;
    line-height: 1.2;
}

.userrow+.userrow {
    margin-top: 5px;
}

/* 「氏　名」「生年月日」のように均等割付にする。
   画面イメージは一覧（画面No.12 ②）・ダイアログ（画面No.13 ②③④）とも値と同じ太字 */
.userrow__label {
    flex: none;
    width: 4em;
    font-size: 21px;
    font-weight: 700;
    white-space: nowrap;
    text-align: justify;
    text-align-last: justify;
}

.userrow__value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 21px;
    font-weight: 700;
}

.p-dialog__msg {
    font-size: 29px;
    line-height: 1.25;
    text-align: center;
}

.p-dialog__actions {
    gap: 67px;
    margin-top: 25px;
}

.p-dialog__actions .p-btn-flat {
    min-height: 52px;
    min-width: 181px;
    border-radius: 8px;
    font-size: 22px;
}

.dialog__figure {
    display: block;
    width: 84%;
    max-width: 429px;
    height: auto;
    margin: 30px auto 0;
}

/* パスワード欄（画面No.8）と IP アドレス欄（プリンター設定・再設定ダイアログ。差異メモ 対53・54） */
.dialog__password,
.dialog__ip {
    display: block;
    width: 56%;
    margin: 18px auto 0;
    height: 45px;
    text-align: left;
}

/* プリンター設定ダイアログはボタンが 3 つ並ぶ（テスト印字・保存・閉じる）。
   ほかのダイアログの間隔と最小幅では収まらないので詰める */
.p-dialog--printer .p-dialog__actions {
    gap: 24px;
}

.p-dialog--printer .p-dialog__actions .p-btn-flat {
    min-width: 150px;
}

/* ---- トップ・プライバシーポリシー・利用規約・マイナンバーカード確認（紫系） ---- */
.app--purple {
    --part-accent: var(--purple);
    --part-accent-deep: var(--purple);
    --part-card-spine: var(--purple);

    color: var(--text);
    /* 背景は .is-purple が body に描く */
    background: transparent;
}

/* 紫系画面の背景（画像＋グラデ）は body に描いて画面幅いっぱいに広げる。
   .app は 737px までなので、.app に描くと実機（縦持ち 800px 幅）でも両端に地が出る */
.is-purple {
    background:
        url("../img/kyoto_bg.png") center bottom / 100% auto no-repeat,
        linear-gradient(165deg, var(--purple-bg-top) 0%, var(--purple-bg-mid) 38%, #cfacd5 72%, var(--purple-bg-bottom) 100%);
}

/* 横画面は画像を設計幅で中央に描き、残りをグラデで埋める。画像はほぼ正方形なので、
   画面幅まで広げると横画面では高さが画面を超えて上端の紋章が切れる（縦画面は切れない）。
   2 層目の auto は必須: 値が 1 個だと全層に繰り返され、グラデも設計幅に縮む */
@media (orientation: landscape) {
    .is-purple {
        background-size: var(--app-width) auto, auto;
    }
}

/* ① 言語選択（画面No.1）。画面イメージでは画面名の上・右端にあり、この分だけ画面名が
   下がっている（同じ紫系でも ① を持たない画面No.2・3 の画面名は最上部にある）。
   上下の余白は画面名の位置も画面イメージに合わせた値 */
.langbar {
    position: relative;
    align-self: flex-end;
    width: 228px;
    height: 44px;
    margin: 22px 0 34px;
}

.langbar__select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 7px;
    padding: 0 45px 0 41px;
    background: #ffffff;
    color: var(--text);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
}

/* 右端の山形。画面イメージは塗りの三角ではなく折れ線なので、正方形の 2 辺を回して描く */
.langbar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px;
    width: 15px;
    height: 15px;
    margin-top: -10px;
    border: solid #042433;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
    pointer-events: none;
}

.ptitle {
    margin: 34px 0 0;
    color: var(--purple-title);
    font-size: 67px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* 文字数の多い画面名（プライバシーポリシー・マイナンバーカード確認）。
   11 文字の「マイナンバーカード確認」が 1 行に収まる大きさが上限 */
.ptitle--sm {
    font-size: 59px;
}

/* ② 操作を促すメッセージ欄 */
.msgbox {
    margin: 86px 0 0;
    padding: 16px 14px;
    border: 3px solid var(--msg-line);
    background: var(--msg-bg);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
}

/* 問いかけのメッセージ欄（画面No.4）。仕様書の画面イメージでは幅を絞って画面の中ほどに置く */
.msgbox--ask {
    width: 68%;
    margin: 134px auto 0;
    padding: 14px 26px;
    text-align: left;
    font-size: 40px;
    line-height: 1.25;
}

/* ⑤ プリンター設定（画面No.1。差異メモ 対53）。画面仕様書に無い係員向けの導線なので、
   市民の操作（③④）から離して右下に小さく置く */
.top__printer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 40px;
}

/* 立体的な押しボタン。紫系画面のボタンだけ縁と陰影を持つ（仕様書の画面イメージ準拠）。
   紫系のボタンは緑系より幅広で、画面イメージでは左右いっぱいに近い */
.app--purple .btn-row {
    gap: 42px;
    margin: 58px 20px 0;
}

/* 画面No.4 のボタンは仕様書の画面イメージでは幅を絞って間隔を空ける */
.app--purple .btn-row--narrow {
    gap: 78px;
    margin-left: 50px;
    margin-right: 50px;
}

.btn--3d {
    min-height: 112px;
    border-radius: 20px;
    font-size: 47px;
    box-shadow: 0 7px 0 var(--purple-edge), 0 10px 10px rgba(0, 0, 0, .3);
}

.p-btn--primary.btn--3d {
    background: linear-gradient(180deg, var(--purple-light) 0%, var(--purple) 22%, var(--purple) 78%, var(--purple-dark) 100%);
    border: 3px solid var(--purple-dark);
}

.p-btn--ghost.btn--3d {
    background: linear-gradient(180deg, #f5f3f5 0%, #efecef 40%, #e6e3e6 100%);
    border: 4px solid var(--purple);
    color: #111111;
}

/* ①②③ 表示欄（画面No.2・3） */
.app--purple .p-scrollbox {
    max-height: 66vh;
    border-width: 4px;
    border-color: var(--purple);
    padding: 14px 16px 20px;
}

/* 表示欄の中の見出し。画面の見出し（h1.ptitle）の直下なので h2 で受ける
   （画面イメージの見た目は変えない） */
.app--purple .p-scrollbox h2 {
    margin: 20px 0 6px;
    font-size: 33px;
    font-weight: 700;
}

.app--purple .p-scrollbox h2:first-child {
    margin-top: 4px;
}

/* 本文（Web サイト設定の利用規約。shared/js/content-format.js が組み立てる）。
   「● 」の小見出しは h3、段落は p。見た目は差し替える前の仮置き（h2 の条見出し・○ の段落）と同じ */
.app--purple .p-scrollbox h3 {
    margin: 20px 0 6px;
    font-size: 33px;
    font-weight: 700;
}

.app--purple .p-scrollbox p {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.4;
    word-break: break-all;
}

/* ---- 登録補助者確認画面（画面No.9） ---- */
/* 確認ステータスは「ラベル → チェックボックス」の順に積む */
.page-assist .p-chip {
    flex-direction: column-reverse;
}

.page-assist .p-chip__mark {
    width: 52px;
    height: 52px;
    border: 3px solid #1a2b3a;
    border-radius: 8px;
}

.page-assist .p-chip__mark svg {
    width: 40px;
    height: 40px;
}

.page-assist .p-chip__label {
    font-size: 20px;
}

.page-assist .p-card__title+.pickrow {
    margin-bottom: 17px;
}

.page-assist .field {
    text-align: center;
}

/* ④ 生年月日は年の欄に和暦が入るぶん広い（画面イメージの実測は 214 : 91 : 91 だが、
   「1990年（平成2年）」が切れない幅まで年の欄を広げている） */
.form__row--birth-view .field {
    flex: 86 1 0;
}

.form__row--birth-view .field--wide {
    flex-grow: 264;
}

/* 確認画面の交通系ICカードID は入力させずそのまま表示する */
.idview {
    height: 35px;
    margin: 4px 0 6px;
    border: 1px solid var(--field-line);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    letter-spacing: .06em;
}

.subhead {
    margin: 10px 0 4px;
    padding-left: 33px;
    font-size: 23px;
    font-weight: 700;
}

/* ---- 登録完了画面（画面No.10-1・10-2） ---- */
/* 控えは区切り線の幅（画面イメージの実測 425px）に収めてカードの中央に置く */
.receipt {
    max-width: 425px;
    margin: 0 auto;
}

.receipt__title {
    margin: 6px 0 4px;
    font-size: 29px;
    font-weight: 700;
    text-align: center;
}

/* レシートの区切り。仕様書の画面イメージと同じ「＝」の並びで、幅に収まらない分は隠す */
.receipt__rule {
    margin: 0;
    overflow: hidden;
    height: 16px;
    font-size: 25px;
    line-height: 16px;
    white-space: nowrap;
    letter-spacing: -.06em;
}

/* 割引情報・媒体・ID・有効期間は区切り線より少し内側から左そろえで並ぶ */
.receipt__fare,
.receipt__media,
.receipt__id,
.receipt__label,
.receipt__period {
    padding-left: 55px;
}

.receipt__fare,
.receipt__media {
    margin: 0;
    font-size: 29px;
    font-weight: 700;
    line-height: 1.24;
}

.receipt__fare {
    margin-top: 6px;
}

/* ID は画面イメージどおり下線を引く */
.receipt__id {
    margin: 2px 0 6px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.receipt__label {
    margin: 6px 0 0;
    font-size: 29px;
    font-weight: 700;
}

/* 有効期間は開始日を小さく、終了日を大きく出す（画面イメージ準拠）。
   1 行に収める（区切り線より数 px はみ出す位置まで使う） */
.receipt__period {
    margin: 0 0 14px;
    white-space: nowrap;
}

.receipt__period-s {
    font-size: 26px;
    font-weight: 700;
}

.receipt__period-s+.receipt__period-s {
    margin-left: 13px;
}

.receipt__period-l {
    margin-left: 11px;
    font-size: 45px;
    font-weight: 700;
}

/* ② 再印刷 / ④ 完了。仕様書の画面イメージでは同じ幅の横長ボタン（264px） */
.btn-wide {
    display: flex;
    justify-content: center;
}

.btn-wide .p-btn-flat {
    width: 38%;
    min-height: 52px;
    font-size: 21px;
}

.btn-wide .p-btn {
    width: 38%;
}

.complete__agree {
    margin: 60px 0 0;
    padding-left: 14px;
}

/* ---- 英語表示の調整（表示言語。js/i18n/en.js。差異メモ 対8） ----
   日本語の組版に合わせた指定は、英語の長い語で崩れる（字間が語を割る・4em の欄から
   はみ出す・大きなボタンから語がはみ出す）。html の lang が en のときだけ外す。
   中国語・韓国語は 800px 幅で撮って見直し、欄とボタンの寸法は日本語のままで収まるので
   当てていない（韓国語の字間だけ下の節で外す） */
.btn--spaced:lang(en) {
    letter-spacing: normal;
    text-indent: 0;
}

/* 「Postal code」が 1 行に収まる幅。均等割付は語の間を広げるだけなので左寄せにする */
.form__label:lang(en),
.userrow__label:lang(en) {
    width: 6.4em;
    text-align: left;
    text-align-last: auto;
}

/* 画面No.9 ④ の年は和暦を添えた日本語の表記のまま（日付の表記は言語で変えない）で、
   広げたラベルの幅では切れる。この画面は郵便番号の行が無いので「Birthdate」が収まる幅まで
   ラベルを詰め、年の欄の取り分を増やす（800px 幅で年・月・日とも切れないことを実測した値） */
.page-assist .form__label:lang(en) {
    width: 5.4em;
}

.form__row--birth-view:lang(en) .field--wide {
    flex-grow: 340;
}

/* 「New Registration」の「Registration」がボタン幅（画面イメージの 2 分割）に収まる大きさ */
.btn--3d:lang(en) {
    font-size: 38px;
}

/* 画面No.9 ① 確認ステータスのチップ。「Not checked」は日本語と同じ 20px ではチップ幅（109px）に
   収まらず 2 行に割れ、行頭が左に寄る。押すたびに「Checked」（1 行）と行数が変わってチェック枠も
   上下に動く。両方の文字を 1 行に収まる大きさにそろえる（15px で「Not checked」が 102px。
   800px 幅で実測）。書体の違いで割れたときも中央に置く */
.page-assist .p-chip__label:lang(en) {
    font-size: 15px;
    text-align: center;
}

/* 画面No.21 ① の本文と問いかけ。行分けが日本語の改行位置なので、英語は本文を 1 段落にまとめ
   （js/pages/user_info.js の certMessages）、行の長さをそろえて 1 語だけの行を残さない。
   問いかけの「(Current renewal frequency: once a year)」も 1 行に収まらず「year)」が残っていた。
   text-wrap: balance を解さないブラウザでは普通の折り返しに戻るだけ */
.p-dialog--cert .p-dialog__msg:lang(en),
.p-dialog--cert .dialog__ask:lang(en) {
    text-wrap: balance;
}

/* ---- 中国語・韓国語の表示の調整（表示言語。js/i18n/zh-hant.js・zh-hans.js・ko.js。差異メモ 対8） ----
   body の書体は日本語の書体が先頭にある。そのまま中国語・韓国語を描くと漢字が日本の字形になり、
   日本語の書体に無い字（簡体字・ハングル）だけ別の書体に替わって混ざるので、言語ごとに
   iPad（PingFang・Apple SD Gothic Neo）・Android（Noto Sans）・Windows の標準書体を先に並べる。
   入力欄・ボタンは font-family: inherit で body に従う */
body:lang(zh-Hant) {
    font-family: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

body:lang(zh-Hans) {
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* 韓国語は分かち書きの位置で折り返す（既定では音節の間でも折り返し、語が割れる） */
body:lang(ko) {
    font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    word-break: keep-all;
}

/* 韓国語は短いラベルの字間を空けない（「돌 아 가 기」のように語が割れ、分かち書きと紛れる）。
   中国語は日本語と同じく字間を空けても読めるので残す */
.btn--spaced:lang(ko) {
    letter-spacing: normal;
    text-indent: 0;
}

/* ---- 設計幅より狭い画面への縮小 ----
   実機はタブレット固定なので通常は使わない。設計幅（737px）を下回る画面で
   入力行やボタンがはみ出さないよう、寸法だけを詰める。
   値は 390px 幅で読める下限で、レイアウトの組み方は上の指定と同じ。 */
@media (max-width: 736px) {
    :root {
        --side: 16px;
    }

    .page-title {
        margin: 2px 0 12px;
        font-size: 17px;
    }

    .btn-row {
        gap: 14px;
        margin: 18px 6px 0;
    }

    .p-btn {
        min-height: 44px;
        font-size: 16px;
    }

    .p-btn-flat {
        min-height: 30px;
        padding: 4px 10px;
        font-size: 13px;
    }

    .p-status-row {
        gap: 8px;
    }

    .p-chip {
        width: 56px;
        border-radius: 12px;
    }

    .p-chip__mark {
        width: 34px;
        height: 34px;
    }

    .p-chip__label {
        font-size: 11px;
    }

    .p-card {
        border-radius: 14px;
        padding: 8px 9px 10px;
    }

    .p-card__title {
        font-size: 17px;
    }

    .p-card__note {
        font-size: 10.5px;
    }

    .p-panel {
        padding: 7px 7px 9px;
    }

    .p-panel__title {
        font-size: 14px;
    }

    .p-panel__note {
        font-size: 9.5px;
    }

    .p-radios {
        gap: 6px;
    }

    .p-radios label {
        min-height: 26px;
        gap: 2px;
        font-size: 10.5px;
    }

    .p-radios input[type="radio"] {
        width: 15px;
        height: 15px;
    }

    .p-agree {
        gap: 12px;
    }

    .p-agree span {
        font-size: 14px;
    }

    .p-agree input[type="checkbox"] {
        width: 24px;
        height: 24px;
        border-width: 2px;
    }

    .p-agree input[type="checkbox"]:checked::after {
        left: 6px;
        top: 1px;
        width: 6px;
        height: 13px;
        border-width: 0 3px 3px 0;
    }

    .field {
        height: 28px;
        padding: 2px 4px;
        font-size: 13.5px;
    }

    .selectbox::after {
        right: 6px;
        margin-top: -2px;
        border-width: 5px;
        border-top-width: 7px;
    }

    .selectbox .field {
        padding-left: 3px;
        padding-right: 15px;
    }

    .form__row {
        gap: 5px;
        /* 郵便番号の［検索］が入りきらない幅では行を折り返してはみ出しを防ぐ */
        flex-wrap: wrap;
    }

    .form__label {
        font-size: 13.5px;
    }

    .form__row--zip .field {
        min-width: 70px;
    }

    .form__row--addr .selectbox {
        min-width: 72px;
    }

    .form__row--free .field {
        height: 34px;
    }

    .form__msg {
        font-size: 12px;
    }

    .pickrow .selectbox .field {
        height: 32px;
        border-radius: 10px;
        font-size: 15px;
        padding-right: 28px;
    }

    .pickrow .selectbox::after {
        right: 10px;
        border-width: 6px;
        border-top-width: 8px;
    }

    .fieldrow {
        gap: 10px;
    }

    .fieldrow .field {
        height: 30px;
    }

    .p-idfield select {
        width: 52px;
        font-size: 12px;
    }

    .p-idfield input {
        padding: 6px 4px;
        font-size: 13px;
    }

    .p-camera {
        width: 32px;
        min-height: 30px;
    }

    .p-camera svg {
        width: 18px;
        height: 15px;
    }

    .p-cardback {
        width: 142px;
        height: 88px;
    }

    .p-cardback__id {
        font-size: 6px;
    }

    .p-dialog {
        padding: 18px 14px 16px;
    }

    .p-dialog--tall {
        --dialog-ratio: .88;
    }

    .p-dialog__msg {
        font-size: 16px;
    }

    .p-dialog__actions {
        gap: 22px;
        margin-top: 16px;
    }

    .p-dialog__actions .p-btn-flat {
        min-height: 44px;
        min-width: 118px;
        font-size: 17px;
    }

    .dialog__password,
    .dialog__ip {
        width: 70%;
        height: 36px;
    }

    .p-dialog--printer .p-dialog__actions {
        flex-wrap: wrap;
        gap: 10px;
    }

    .p-dialog--printer .p-dialog__actions .p-btn-flat {
        min-width: 0;
    }

    /* 受付番号発行ダイアログも 737px 幅の実測値のままでは収まらないので寸法だけ詰める */
    .p-dialog--reception {
        --dialog-ratio: .88;
        padding: 14px 8px 18px;
    }

    .dialog__reception-no {
        margin: 20px 0 22px;
    }

    .p-dialog--reception .btn-wide {
        margin-top: 14px;
    }

    .p-dialog--reception .btn-wide .p-btn-flat {
        width: 170px;
    }

    .p-dialog--reception .dialog__reception-state {
        margin-top: 24px;
        font-size: 18px;
    }

    .p-dialog--reception .p-dialog__actions {
        margin-top: 30px;
    }

    .langbar {
        width: 140px;
        height: 26px;
        margin: 12px 0 18px;
    }

    .langbar__select {
        border-radius: 4px;
        padding: 0 24px 0 20px;
        font-size: 13px;
    }

    .langbar::after {
        right: 8px;
        width: 8px;
        height: 8px;
        margin-top: -5px;
        border-width: 0 3px 3px 0;
    }

    .ptitle {
        margin: 20px 0 0;
        font-size: 35px;
    }

    .ptitle--sm {
        font-size: 31px;
    }

    .msgbox {
        margin: 26px 0 0;
        padding: 12px 10px;
        border-width: 2px;
        font-size: 19px;
    }

    .msgbox--ask {
        width: 74%;
        margin: 62px auto 0;
        padding: 12px 10px;
        font-size: 20px;
        line-height: 1.5;
    }

    .app--purple .btn-row {
        gap: 14px;
        margin: 34px 6px 0;
    }

    .app--purple .btn-row--narrow {
        gap: 26px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .btn--3d {
        min-height: 68px;
        border-radius: 12px;
        font-size: 22px;
        box-shadow: 0 4px 0 var(--purple-edge), 0 6px 6px rgba(0, 0, 0, .3);
    }

    /* 英語の調整（上の「英語表示の調整」）は :lang の分だけ強いので、この幅の値で打ち直す */
    .btn--3d:lang(en) {
        font-size: 18px;
    }

    .app--purple .p-scrollbox {
        max-height: 62vh;
        border-width: 3px;
        padding: 8px 10px 12px;
    }

    .app--purple .p-scrollbox h2,
    .app--purple .p-scrollbox h3 {
        margin: 12px 0 4px;
        font-size: 17px;
    }

    .app--purple .p-scrollbox p {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .page-assist .p-chip {
        width: 68px;
    }

    .page-assist .p-chip__mark {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }

    .page-assist .p-chip__mark svg {
        width: 26px;
        height: 26px;
    }

    .page-assist .p-chip__label {
        font-size: 11px;
    }

    /* 英語のチップの文字（上の「英語表示の調整」）は :lang の分だけ強いので、この幅の値で
       打ち直す。チップ幅 68px に「Not checked」が 1 行で収まる大きさ（9px で 61px。390px 幅で実測） */
    .page-assist .p-chip__label:lang(en) {
        font-size: 9px;
    }

    .idview {
        height: 28px;
        font-size: 14px;
    }

    .subhead {
        padding-left: 20px;
        font-size: 14px;
    }

    .receipt__title {
        font-size: 16px;
    }

    .receipt__rule {
        height: 13px;
        font-size: 12px;
        line-height: 13px;
    }

    .receipt__fare,
    .receipt__media,
    .receipt__id,
    .receipt__label,
    .receipt__period {
        padding-left: 20px;
    }

    .receipt__fare,
    .receipt__media,
    .receipt__label {
        font-size: 17px;
    }

    .receipt__fare {
        margin-top: 3px;
    }

    .receipt__id {
        font-size: 15px;
    }

    .receipt__period {
        margin: 0 0 8px;
    }

    .receipt__period-s {
        font-size: 15px;
    }

    .receipt__period-l {
        font-size: 26px;
    }

    .p-dialog--wide {
        --dialog-ratio: .92;
    }

    .dialog__pick {
        margin: 6px 0 10px;
    }

    .dialog__cmp {
        margin: 12px 0 4px;
    }

    .dialog__cmp-head,
    .dialog__cmp-line {
        font-size: 14px;
    }

    .dialog__ask {
        margin-top: 12px;
        font-size: 16px;
    }

    .dialog__notes {
        margin-top: 12px;
        font-size: 12px;
    }

    .dialog__note+.dialog__note {
        margin-top: 12px;
    }

    .page-search .form {
        margin-left: 0;
    }

    .reslist {
        max-height: none;
        padding: 8px 0;
    }

    .reslist__item {
        gap: 12px;
        margin-bottom: 8px;
        padding: 0 8px;
    }

    .reslist__item>input[type="checkbox"] {
        width: 28px;
        height: 28px;
        border-width: 2px;
    }

    .reslist__item>input[type="checkbox"]:checked::after {
        left: 8px;
        top: 2px;
        width: 7px;
        height: 15px;
        border-width: 0 3px 3px 0;
    }

    .reslist__card {
        padding: 9px 9px 8px 12px;
        border-radius: 10px;
    }

    .userrow {
        gap: 12px;
    }

    .userrow__label,
    .userrow__value {
        font-size: 13px;
    }

    .btn-wide .p-btn-flat {
        width: 42%;
        min-height: 34px;
        font-size: 14px;
    }

    .btn-wide .p-btn {
        width: 42%;
    }

    .complete__agree {
        margin-top: 30px;
        padding-left: 8px;
    }
}