。このCSSを読み込んだ画面すべてに当たる。 * イベント4画面（auth/calendar/list/group_calendar）・申込3画面・ * イベントの確認/完了3画面（confirm / confirm_stripe / completed）の共通分。 * #entry-screen … 申込フォーム本体の

。#event-screen の内側に入れ子になっている。 * 申込3画面（FreeFormWithPayment / FreeForm / Event/schedule）だけに当たる。 * 確認・完了画面はこの中に入らない（#entry-confirm-screen / * #entry-complete-screen）ので、フローを通して出る部品—— * ページ見出しとステップバー——は #event-screen 側に置く。 * * この入れ子が効いていて、申込フォーム専用の指定は #entry-screen に閉じる。 * とくに element/card_input_form.php は Payment の6画面と共有だが、あちらには * #entry-screen が無く、このCSSも読み込まれない。だから決済画面には波及しない。 * 「共有 element を触らずに、置かれた場所で見た目を変える」ためのスコープなので、 * カード入力まわりの指定を #event-screen 側に上げないこと（決済に漏れる道が開く）。 * * ■ 効き順（event2.php のの並び） * * themes/002/style.css → event.css → ★このファイル → デザイン設定 → $css['origin'] * * テーマより後なので同じ詳細度なら勝てる。事業者の自由記述CSS（origin）より前なので、 * 事業者は今までどおり上書きできる。だから !important は原則使わない。 * * ただし calendar.css だけは内でインラインに読まれる＝このファイルより後に来る。 * 全部 #event-screen 配下に書いてある（詳細度 1,x,x）ので、calendar.css の * クラス・要素セレクタ（最大 0,2,1）には自動的に勝つ。この前提でスコープを外さないこと。 * * ■ 2層モデル — このファイルの背骨 * * キャンバス … デザイン設定の color_bg。事業者の色が出る「机の面」。 * サーフェス … その上に置く紙。白。文字と入力欄はここに載せる。 * * 元々の壊れ方は「背景だけ可変なのに、その上の文字色が明るい背景前提でベタ書き」だった。 * 前景色を全部ひっくり返すのではなく、文字を紙の上に移すことで構造的に直している。 * キャンバスに直接載らざるを得ないもの（ページ見出し・カレンダーの月送り）だけが * --mp-canvas-ink を使う。このトークンは背景の輝度から PHP 側で計算していて、 * どんな color_bg でも 4.5:1 を割らない（FormDesignService 参照）。 * * 新しく要素を足すときは、まず紙の上に置けないか考える。 * --mp-canvas-ink を使う要素は少ないほど結果が安定する。 * * ■ モチーフ * * 「証紙」。申込内容の要約と本人情報の間にミシン目を入れて、1枚の申込票に見せる。 * ミシン目の両端の切り欠きは var(--mp-canvas) で塗るので、事業者がどんな背景色を * 選んでも成立する。2層モデルがあるから成り立つ表現。 * ------------------------------------------------------------------------- */ :root { /* --mp-canvas / --mp-canvas-ink / --mp-canvas-ink-dim / --mp-canvas-rule は event2.php が PHP で計算して流し込む。ここのフォールバックは、万一 :root が出力されなかったとき（＝旧来の明るい背景）に倒れる先。 */ --mp-canvas: #f4f4f4; --mp-canvas-ink: #12171c; --mp-canvas-ink-dim: #6c6f72; --mp-canvas-rule: #b0b2b3; /* サーフェス＝紙。ここは背景が固定なので計算不要 */ --mp-surface: #ffffff; --mp-surface-sunken: #f6f7f9; /* 紙の上のインク。 3段とも紙（#fff）と沈み（#f6f7f9）の両方で 4.5:1 以上あることを確認済み。 faint は「薄い」と言っても 5.05:1 ある。ここを軽い気持ちで薄くすると「パスワードをお忘れですか」等の実文字が AA を割るので、変えるなら実測すること */ --mp-ink: #23282d; /* on #fff 14.86:1 */ --mp-ink-dim: #59626b; /* on #fff 6.21:1 */ --mp-ink-faint: #667079; /* on #fff 5.05:1 */ /* 罫線。紙の上は「髪の毛一本」に寄せる。Bootstrap の既定より薄い */ --mp-rule: #e5e8ec; --mp-rule-strong: #ccd2d9; /* アクセントはテーマの primary を借りる。ブランド色を front に押し付けない（事業者ごとの配色が主役なので） */ --mp-accent: var(--bs-primary, #066ac9); --mp-accent-ink: #ffffff; --mp-focus: rgba(6, 106, 201, 0.28); /** * 送信ボタン（CTA）の色。既定はアクセント＝青。 * * 事業者が変えたくなる筆頭なので、専用トークンにして * 「1行で上書きできる」状態にしてある。デザイン設定の自由記述CSS * （$css['origin']・このファイルより後に読まれる）に、こう書けば効く: * * #entry-screen { --mp-cta: #c2185b; } * * 個々のルールを上書きしにいくと #entry-screen .payBtn .btn-success の * 詳細度と戦うことになるので、トークンを差し替える方を入口にする。 * 色を変えるときは白文字とのコントラストが 4.5:1 以上か確かめること * （既定の #066ac9 は 5.37:1）。 */ --mp-cta: var(--mp-accent); --mp-cta-ink: var(--mp-accent-ink); --mp-cta-ring: var(--mp-focus); /* 状態色。受付中/残りわずか/残席なし。calendar.css の .ok/.ng と意味を合わせる。文字色はいずれも「自分のチップ背景の上」で 4.5:1 以上（実測値をコメントに残す） */ --mp-ok: #1d6f42; --mp-ok-bg: #e8f4ec; /* 5.46:1 */ --mp-warn: #8a5300; --mp-warn-bg: #fdf1dd; /* 5.67:1 */ --mp-off: #5c636d; --mp-off-bg: #eef0f2; /* 5.31:1 */ --mp-danger: #b3123c; /* 角丸を1本に揃える（Bootstrap の 5.2px が混ざるのを止める） */ --mp-radius: 8px; --mp-radius-sm: 5px; /* 余白スケール */ --mp-space-1: 4px; --mp-space-2: 8px; --mp-space-3: 12px; --mp-space-4: 16px; --mp-space-5: 24px; --mp-space-6: 32px; /* 紙の浮き。影は「持ち上げる」ためではなく、紙の縁を示すために最小限 */ --mp-lift: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 14px rgba(16, 24, 32, 0.05); } /* ------------------------------------------------------------------------- * 数字 * * 予約UIなので日付・時刻・金額は桁を揃える。等幅数字にすると一覧で数字が縦に揃う。 * ------------------------------------------------------------------------- */ #event-screen .mp-num, #event-screen .mp-slot__when, #event-screen .mp-nav__title, #event-screen .mp-calendar td .day { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ------------------------------------------------------------------------- * キャンバスに直接載るもの（＝計算した前景色を使う数少ない場所） * * ここは必ず「クラスで名指し」すること。要素セレクタ（h2 など）で掛けてはいけない。 * --mp-canvas-ink は「背景はキャンバスの色」という前提でしか正しくないので、 * 紙の上や色付きの箱の中にある見出しに当たると、そこだけ嘘の色になる。 * * 実例: Entry/comp_free.php の

は青地(#8EC0E4)に白文字。 * ここに h2 { color: var(--mp-canvas-ink) } が当たると、明るい背景のとき * ink が #12171c になって「青地に黒文字」に化ける。要素セレクタは使わない。 * * .page-header は 28テンプレート・45箇所で「キャンバス上のページ見出し」として * 一貫して使われているので、これで掛けるのは安全。 * ------------------------------------------------------------------------- / #event-screen .page-header, #event-screen > .container > h1, #event-screen .mp-canvas-title { color: var(--mp-canvas-ink); font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; } #event-screen .page-header { font-size: 1.375rem; margin-top: var(--mp-space-5); margin-bottom: var(--mp-space-4); / 見出しの左に短い罫。キャンバス上で見出しの位置を示す。 currentColor なので背景色が変わっても勝手についてくる / padding-left: var(--mp-space-3); border-left: 3px solid currentColor; } / キャンバス上の小見出し（ページ見出しではないもの）。auth.php の「申し込み内容」 / #event-screen .mp-canvas-title { font-size: 1.0625rem; margin-bottom: var(--mp-space-3); } / 日程選択の誘導文もキャンバス上 / #event-screen .mp-lede { color: var(--mp-canvas-ink); font-size: 0.9375rem; font-weight: 700; margin-bottom: var(--mp-space-3); } / ========================================================================= * 紙 — .mp-panel / .mp-slip-head * ========================================================================= / #event-screen .mp-panel { position: relative; background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); padding: var(--mp-space-5); color: var(--mp-ink); } / 申込内容の要約＝証紙の頭。下の .mp-panel と地続きに見せて1枚の申込票にする。 .box-item-info(event.css) と .mb-4/.border/.p-2(Bootstrap) を上書きするので、 #id + class の詳細度で素直に勝ちにいく（!important は使わない） / #event-screen .mp-slip-head { position: relative; background-color: var(--mp-surface); border: 1px solid var(--mp-rule); border-bottom: 0; border-radius: var(--mp-radius) var(--mp-radius) 0 0; box-shadow: var(--mp-lift); padding: var(--mp-space-4) var(--mp-space-5); margin-bottom: 0; color: var(--mp-ink); } / ミシン目。頭と本体の境目に引く / #event-screen .mp-slip-head::after { content: ""; position: absolute; left: var(--mp-space-4); right: var(--mp-space-4); bottom: 0; height: 1px; background-image: repeating-linear-gradient(to right, var(--mp-rule-strong) 0 4px, transparent 4px 9px); } / 頭に続く本体は上の角を落として、罫が二重にならないよう上辺を消す / #event-screen .mp-slip-head + .mp-panel { border-top: 0; border-radius: 0 0 var(--mp-radius) var(--mp-radius); } / ミシン目の両端の切り欠き。キャンバス色で塗るので、事業者がどの背景色を選んでも紙が切り取られて見える。これは 2層モデル（＝キャンバス色をトークンで持っている）があるから書ける表現 / #event-screen .mp-slip-head + .mp-panel::before, #event-screen .mp-slip-head + .mp-panel::after { content: ""; position: absolute; top: 0; width: 14px; height: 14px; border-radius: 50%; / 切り欠きの中は「紙に空いた穴」＝紙の下のキャンバス（＝事業者の背景色）が覗いている、という見立て。だから塗りはキャンバス色。event2.php が body/main に同じ color_bg を敷くので、実画面では穴の色と背景色がそのまま一致する。 / background: var(--mp-canvas); border: 1px solid var(--mp-rule); / 穴の縁の落ち影。カード外周の影（--mp-lift）と同じ「上から光」の向きに合わせ、 inset で穴の上側の内周に影を落とす。紙に厚みがあって穴が凹んで見える。 / box-shadow: inset 0 2px 3px rgba(16, 24, 32, 0.13); / 円の中心を「紙の左右の縁 × ミシン目」に置き、外側（紙の外＝キャンバス側）の半分を clip-path で隠す。残った内側の半円がキャンバス色で塗られ、紙の縁に食い込む切り欠きに見える。頭と本体の両方へ上下対称に食い込む。 ※クリップを外すと、白背景テナント（キャンバス＝紙＝白）では塗りが効かず枠線だけが全周残って「まん丸」に見えてしまう。だから外側半分を隠すのが要。 ※左右で残す向きが逆になるので、clip は ::before / ::after 側で指定する。 / transform: translateY(-50%); } / 左端：紙は円の右側にあるので、右半分（内側）を残して左半分を隠す / #event-screen .mp-slip-head + .mp-panel::before { left: 0; margin-left: -8px; clip-path: inset(-2px -2px -2px 50%); } / 右端：紙は円の左側にあるので、左半分（内側）を残して右半分を隠す / #event-screen .mp-slip-head + .mp-panel::after { right: 0; margin-right: -8px; clip-path: inset(-2px 50% -2px -2px); } / 申込内容の中身 / #event-screen .mp-slip-head h6 { font-size: 0.9375rem; font-weight: 700; color: var(--mp-ink); line-height: 1.5; margin-bottom: var(--mp-space-2); } #event-screen .mp-slip-head .h6 { color: var(--mp-ink-dim); font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; } #event-screen .mp-slip-head img { border-radius: var(--mp-radius-sm); width: 100%; display: block; } / ========================================================================= * 入力欄 — 白 + 枠 + フォーカスリング * * 元は .input-group-text.bg-light.border-0 + .form-control.border-0.bg-light で、 * 灰色のベタ塊がキャンバスに浮いていた。マークアップ側の border-0/bg-light は外した。 * ここが CSS だけでは直せなかった箇所（外さないと !important 合戦になる）。 * ========================================================================= / #event-screen .form-label { color: var(--mp-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--mp-space-2); } / 必須の * を弱く見せる（label のテキストに含まれるので :after は使えない） / #event-screen .mp-req { color: var(--mp-danger); font-weight: 700; margin-left: 2px; } #event-screen .mp-field { display: flex; align-items: stretch; background: var(--mp-surface); border: 1px solid var(--mp-rule-strong); border-radius: var(--mp-radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } / アイコンは塗りつぶしの塊ではなく、髪の毛一本で仕切った内側の添え物にする / #event-screen .mp-fieldicon { display: flex; align-items: center; justify-content: center; width: 42px; flex: 0 0 42px; color: var(--mp-ink-faint); background: transparent; border: 0; border-right: 1px solid var(--mp-rule); font-size: 0.875rem; transition: color 0.15s ease; } #event-screen .mp-field .form-control { border: 0; background: transparent; box-shadow: none; padding: 0.75rem var(--mp-space-3); font-size: 1rem; color: var(--mp-ink); border-radius: 0 var(--mp-radius-sm) var(--mp-radius-sm) 0; min-height: 48px; / 16px 未満だと iOS がフォーカス時にズームする。会員はスマホが主 / } #event-screen .mp-field .form-control:focus { box-shadow: none; background: transparent; } #event-screen .mp-field .form-control::placeholder { color: var(--mp-ink-faint); opacity: 1; } / フォーカスは枠ごと光らせる。入力欄全体が1つの部品だと分かる / #event-screen .mp-field:focus-within { border-color: var(--mp-accent); box-shadow: 0 0 0 3px var(--mp-focus); } #event-screen .mp-field:focus-within .mp-fieldicon { color: var(--mp-accent); border-right-color: var(--mp-accent); } #event-screen .mp-field .form-control:disabled { background: var(--mp-surface-sunken); color: var(--mp-ink-faint); } / チェックボックス / #event-screen .form-check-input { border-color: var(--mp-rule-strong); width: 1.05em; height: 1.05em; margin-top: 0.15em; } #event-screen .form-check-input:checked { background-color: var(--mp-accent); border-color: var(--mp-accent); } #event-screen .form-check-input:focus { border-color: var(--mp-accent); box-shadow: 0 0 0 3px var(--mp-focus); } #event-screen .form-check-label { color: var(--mp-ink-dim); font-size: 0.8125rem; } / 「ログインを記憶する」と「パスワードをお忘れですか？」の行。広い画面では横並びで縦中央、スマホでは縦積み（下のメディアクエリ） / #event-screen .mp-remember { align-items: center; } / ========================================================================= * ボタン * ========================================================================= / #event-screen .mp-panel .btn-primary { --bs-btn-bg: var(--mp-accent); --bs-btn-border-color: var(--mp-accent); background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-ink); border-radius: var(--mp-radius-sm); padding: 0.8rem 1.5rem; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; min-height: 50px; transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease; } #event-screen .mp-panel .btn-primary:hover { filter: brightness(1.08); } / 押した感触。1px 沈むだけ。派手にしない / #event-screen .mp-panel .btn-primary:active { transform: translateY(1px); filter: brightness(0.94); } #event-screen .mp-panel .btn-primary:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-focus); } / ========================================================================= * 「または」の区切り + 切替リンク * ========================================================================= / #event-screen .mp-panel hr { border: 0; border-top: 1px solid var(--mp-rule); opacity: 1; margin: 0; } #event-screen .mp-panel .bg-body { background: var(--mp-surface) !important; / .bg-body(Bootstrap) が !important で来るので、ここだけは同じ武器で返す。紙の色と揃えるためだけの上書きで、色そのものはトークン由来 / color: var(--mp-ink-faint); font-size: 0.75rem; letter-spacing: 0.14em; margin: 0; } #event-screen #view-first, #event-screen #view-login { display: inline-block; color: var(--mp-accent); font-size: 0.875rem; font-weight: 700; cursor: pointer; padding: var(--mp-space-2) var(--mp-space-3); border-radius: var(--mp-radius-sm); text-decoration: none; border-bottom: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease; } #event-screen #view-first:hover, #event-screen #view-login:hover { background: var(--mp-surface-sunken); border-bottom-color: var(--mp-accent); } #event-screen .text-primary-hover a { color: var(--mp-ink-faint); font-size: 0.8125rem; } #event-screen .text-primary-hover a:hover { color: var(--mp-accent); } / ========================================================================= * 説明文ブロック（calendar / list の頭） * ========================================================================= / #event-screen .mp-intro { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); padding: var(--mp-space-4); margin-bottom: var(--mp-space-4); color: var(--mp-ink); } #event-screen .mp-intro img { border-radius: var(--mp-radius-sm); width: 100%; display: block; } / 説明文は紙の上のへこみ。bg-light(Bootstrap) を打ち消す / #event-screen #event-desc-box { background: var(--mp-surface-sunken) !important; border: 1px solid var(--mp-rule); border-radius: var(--mp-radius-sm); color: var(--mp-ink-dim); font-size: 0.875rem; line-height: 1.8; padding: var(--mp-space-3) var(--mp-space-4); } / ========================================================================= * 日程リスト（list.php） * * 元は白カードが均等に28枚並んで、同じ日付が4回ずつ繰り返されていた。 * カード1枚1枚の縁を消して、1枚の紙に髪の毛一本で仕切った行として積む。 * 「カードの羅列」感を消しつつ、DOM構造は変えない。 * ========================================================================= / #event-screen .mp-slots { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); overflow: hidden; } #event-screen .mp-slot { border: 0; border-bottom: 1px solid var(--mp-rule); border-radius: 0; background: var(--mp-surface); margin: 0; transition: background-color 0.12s ease; } #event-screen .mp-slot:last-child { border-bottom: 0; } #event-screen .mp-slot:hover { background: var(--mp-surface-sunken); } #event-screen .mp-slot .card-body { padding: var(--mp-space-3) var(--mp-space-4); } #event-screen .mp-slotwhen { color: var(--mp-ink); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; } / 受付終了などで JS が付ける .bg-gray。元は打ち消し線も何もなく、ただ灰色になるだけで理由が伝わらなかった / #event-screen .mp-slot.bg-gray, #event-screen .bg-gray { background: var(--mp-surface-sunken); } #event-screen .mp-slot.bg-gray .mp-slotwhen { color: var(--mp-ink-faint); } / 状態チップ。btn の見た目を借りていたので「押せそう」に見えていた。押せないものはチップ、押せるものはボタン、と形で区別する / #event-screen .mp-chip { display: inline-flex; align-items: center; gap: var(--mp-space-1); padding: 0.3rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; border: 1px solid transparent; } #event-screen .mp-chip--off { background: var(--mp-off-bg); color: var(--mp-off); border-color: var(--mp-rule-strong); } #event-screen .mp-chip--warn { background: var(--mp-warn-bg); color: var(--mp-warn); border-color: #f0d9a8; } / 「確定している」を表すチップ（予約の確認画面）。--mp-ok on --mp-ok-bg で 5.46:1 / #event-screen .mp-chip--ok { background: var(--mp-ok-bg); color: var(--mp-ok); border-color: #bcdfc9; } / 押せる導線。塗りではなく枠 + ホバーで塗る。28行が青一色になるのを避ける / #event-screen .mp-go { display: inline-flex; align-items: center; gap: var(--mp-space-1); padding: 0.4rem 0.85rem; border-radius: var(--mp-radius-sm); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none; border: 1px solid var(--mp-accent); background: var(--mp-surface); color: var(--mp-accent); transition: background-color 0.12s ease, color 0.12s ease; } #event-screen .mp-go::after { content: "›"; font-size: 1rem; line-height: 1; transform: translateY(-1px); } #event-screen .mp-go:hover, #event-screen .mp-slot:hover .mp-go { background: var(--mp-accent); color: var(--mp-accent-ink); } #event-screen .mp-go:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-focus); } / 残りわずかは注意色で。受付中と同じ青にしない / #event-screen .mp-go--warn { border-color: #c98a1e; color: var(--mp-warn); } #event-screen .mp-go--warn:hover, #event-screen .mp-slot:hover .mp-go--warn { background: var(--mp-warn); color: #fff; } / 開催予定なしの空状態 / #event-screen .mp-empty { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); color: var(--mp-ink-dim); padding: var(--mp-space-6) var(--mp-space-4); text-align: center; } #event-screen .mp-empty h3 { color: var(--mp-ink); font-size: 1.0625rem; font-weight: 700; margin-bottom: var(--mp-space-2); } #event-screen .mp-empty p { font-size: 0.875rem; margin: 0; } / ========================================================================= * カレンダー（calendar.php / group_calendar.php） * * calendar.css はこのファイルより後（body内）で読まれるので、 * ここは #event-screen 付きで詳細度を上げて上書きしている。 * ========================================================================= / / 月送り。キャンバスに直置きされていて、濃い背景で完全に消えていた場所。紙に載せるほどでもないので、キャンバス上の操作バーとして組む / #event-screen .mp-nav { display: flex; align-items: center; justify-content: center; gap: var(--mp-space-2); padding: var(--mp-space-3) 0; margin-top: var(--mp-space-4); } / 表の下にも同じ月送りが出る（長い月でスクロールしても戻らずに済む） / #event-screen .mp-nav--foot { margin-top: var(--mp-space-2); margin-bottom: var(--mp-space-5); } #event-screen .mp-navtitle { color: var(--mp-canvas-ink); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.04em; min-width: 8.5em; text-align: center; } #event-screen .mp-navbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--mp-canvas-ink); border: 1px solid var(--mp-canvas-rule); background: transparent; text-decoration: none; font-size: 0.8125rem; transition: background-color 0.15s ease, border-color 0.15s ease; margin: 0; } #event-screen .mp-navbtn:hover { color: var(--mp-canvas-ink); border-color: var(--mp-canvas-ink); / 背景の明暗が分からないので、色ではなく「白の薄膜」で反応させる。濃い背景では明るく、明るい背景では白飛びせずわずかに沈む / background: color-mix(in srgb, var(--mp-canvas-ink) 12%, transparent); } #event-screen .mp-navbtn:focus-visible { outline: 2px solid var(--mp-canvas-ink); outline-offset: 2px; } / カレンダー本体は紙 / #event-screen .mp-calendar { background-color: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); overflow: hidden; margin-bottom: 0; color: var(--mp-ink); border-collapse: separate; border-spacing: 0; } #event-screen .mp-calendar th { background: var(--mp-surface-sunken); color: var(--mp-ink-dim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: var(--mp-space-2) 0; border-bottom: 1px solid var(--mp-rule); text-align: center; } / セルの既定は「紙」。沈めるのは過去・当月外だけ、という引き算で書く。 .future が付いている前提で白を塗ると、テンプレート側でクラスが1つ抜けた日（実際 group_calendar.php の祝日で抜けていた）だけ灰色に落ちて理由も分からない。既定を白にしておけば、クラスが欠けても「ふつうの日」に倒れる / #event-screen .mp-calendar td { background-color: var(--mp-surface); border-bottom: 1px solid var(--mp-rule); border-right: 1px solid var(--mp-rule); padding: var(--mp-space-2) var(--mp-space-1); vertical-align: top; text-align: center; / 元は td 全体に opacity:0.5 がかかっていて、セルごと透けていた。透過をやめて、色そのものを弱くする（キャンバス色が透けるのを防ぐ） / opacity: 1; / 週の高さを揃える。table-layout では height は min-height として働く。予定のある週だけ背が高いと、月の形が読めずカレンダーとして機能しない / height: 76px; } #event-screen .mp-calendar td:nth-of-type(7) { border-right: 0; } #event-screen .mp-calendar tr:last-child td { border-bottom: 0; } / 日付の数字 / #event-screen .mp-calendar td .day { font-size: 0.875rem; font-weight: 700; color: var(--mp-ink); line-height: 1.6; } / 予定のないセルの高さを保つための余白（中身は全角スペース） / #event-screen .mp-calendar td div.status { font-size: 0.75rem; min-height: 1.2em; } / 1日に複数の時間帯があるとき、2件目以降は中身が空の div.status として置かれていて、モーダルを組む JS が data-schedule-id / data-value を読むためだけに存在する。これが1件あたり16px の空白として積まれ、予定のある行だけ他の倍以上の高さになっていた。（見えない要素が場所を取っていた。calendar.php の JS は $('div.status', td).each() で拾うので、display:none にしても .data() は読める） :empty は「子ノードがまったく無い」ときだけ当たるので、全角スペース入りの空きセルや、アイコンが入る .reservable には当たらない。 .reservable は保険で明示的に除外している（title が空の事業者がいてもクリック先を消さない） / #event-screen .mp-calendar td div.status:empty:not(.reservable) { display: none; } / 過去・当月外は沈める。opacity ではなく背景と文字色で / #event-screen .mp-calendar td.past, #event-screen .mp-calendar td.previous-month, #event-screen .mp-calendar td.next-month { background-color: var(--mp-surface-sunken); opacity: 1; } #event-screen .mp-calendar td.past .day { color: var(--mp-ink-faint); font-weight: 400; } #event-screen .mp-calendar td.previous-month, #event-screen .mp-calendar td.next-month { background-color: #fafbfc; } / 日曜・土曜・祝日。calendar.css の意味（赤＝休み）を引き継ぐ / #event-screen .mp-calendar th:nth-of-type(1), #event-screen .mp-calendar td:nth-of-type(1) .day { color: #c62828; } #event-screen .mp-calendar th:nth-of-type(7), #event-screen .mp-calendar td:nth-of-type(7) .day { color: #1565c0; } #event-screen .mp-calendar td.holiday .day { color: #c62828; } #event-screen .mp-calendar td.past:nth-of-type(1) .day, #event-screen .mp-calendar td.past:nth-of-type(7) .day, #event-screen .mp-calendar td.past.holiday .day { color: var(--mp-ink-faint); } / 今日。色だけでなく上辺の線でも示す（色覚に依存させない） / #event-screen .mp-calendar td.today { background-color: #fffbeb; box-shadow: inset 0 3px 0 #f0a202; } #event-screen .mp-calendar td.today .day { color: #8a5300; } / 予約できる日。ここが一番目立つべき / #event-screen .mp-calendar td:has(div.reservable) { background-color: #eef6fd; } #event-screen .mp-calendar td:has(div.reservable) .day { color: var(--mp-accent); } #event-screen .mp-calendar td div.reservable { cursor: pointer; color: var(--mp-accent); font-weight: 700; line-height: 1.2; border-radius: var(--mp-radius-sm); transition: background-color 0.12s ease; } #event-screen .mp-calendar td div.reservable:hover { background: #d8e9fa; } / 受付状況の ○ は $calendar['title'] に入った feather アイコンで、レイアウトの feather.replace() が width/height=24 の SVG に差し替える。セル幅が 46px まで縮むスマホだと 24px は大きすぎるので、CSSで詰める / #event-screen .mp-calendar td div.reservable svg { width: 20px; height: 20px; vertical-align: middle; } / 受付状況の文字。calendar.css の .ok/.ng/.notice を紙の上で読める色に寄せる / #event-screen .mp-calendar td .ok { color: var(--mp-ok); font-size: 0.6875rem; font-weight: 700; } #event-screen .mp-calendar td .ng { color: var(--mp-off); font-size: 0.6875rem; font-weight: 700; } #event-screen .mp-calendar td .notice { color: var(--mp-warn); font-size: 0.6875rem; font-weight: 700; } / 日時選択モーダル / #event-screen .modal-content, .modal#modalSchedule .modal-content { border: 0; border-radius: var(--mp-radius); overflow: hidden; } .modal#modalSchedule .modal-header { border-bottom: 1px solid var(--mp-rule); padding: var(--mp-space-4) var(--mp-space-5); } .modal#modalSchedule .modal-title { font-size: 0.9375rem; font-weight: 700; color: var(--mp-ink); } .modal#modalSchedule .modal-footer { border-top: 1px solid var(--mp-rule); background: var(--mp-surface-sunken); } / モーダルの中の日時ボタンは calendar.php の JS が btn btn-outline-primary py-5 で吐いている（DOM生成なので JS は触っていない）。 py-5 で 3rem の余白がつき、選択肢が縦に伸びきっていたので詰める / .modal#modalSchedule .modal-body .btn-outline-primary { padding-top: var(--mp-space-4) !important; padding-bottom: var(--mp-space-4) !important; border-radius: var(--mp-radius-sm); border-color: var(--mp-rule-strong); color: var(--mp-ink); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; text-align: left; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .modal#modalSchedule .modal-body .btn-outline-primary:hover { background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-ink); } / ========================================================================= * 通知 * ========================================================================= / #event-screen .alert { border-radius: var(--mp-radius-sm); border: 1px solid transparent; font-size: 0.875rem; padding: var(--mp-space-3) var(--mp-space-4); box-shadow: var(--mp-lift); } / ========================================================================= * スマホ（会員はスマホが主） * ========================================================================= / @media (max-width: 575.98px) { #event-screen .mp-panel { padding: var(--mp-space-4); } #event-screen .mp-slip-head { padding: var(--mp-space-3) var(--mp-space-4); } #event-screen .page-header { font-size: 1.1875rem; margin-top: var(--mp-space-4); } #event-screen .mp-navtitle { font-size: 1.0625rem; min-width: 7em; } #event-screen .mp-navbtn { width: 36px; height: 36px; } / カレンダーは横幅が詰まるので文字を落として、セルの当たり判定は残す / #event-screen .mp-calendar th { font-size: 0.6875rem; } #event-screen .mp-calendar td { padding: var(--mp-space-1) 2px; } #event-screen .mp-calendar td .day { font-size: 0.8125rem; } #event-screen .mp-calendar td div.status, #event-screen .mp-calendar td div.reservable { font-size: 0.625rem; } #event-screen .mp-calendar td div.reservable svg { width: 16px; height: 16px; } #event-screen .mp-calendar td .ok, #event-screen .mp-calendar td .ng, #event-screen .mp-calendar td .notice { font-size: 0.625rem; } / 日程リストは日時とボタンを1行に収める / #event-screen .mp-slot .card-body { padding: var(--mp-space-3); } #event-screen .mp-slot__when { font-size: 0.875rem; } / 「ログインを記憶する」と「パスワードをお忘れですか？」は 375px だと横並びのままだと両方が折り返して噛み合う。縦に積んで左に揃える / #event-screen .mp-remember { flex-direction: column; align-items: flex-start; gap: var(--mp-space-3); } } / 中間幅ではカレンダーの受付状況テキストが 3rem に跳ねる（calendar.css の @media(min-width:768px) td div.status{font-size:3rem}）ので打ち消す。あれは絵文字前提の指定で、いまは文字が入るため成立していない / @media (min-width: 768px) { #event-screen .mp-calendar td div.status { font-size: 0.8125rem; } #event-screen .mp-calendar td div.reservable { font-size: 0.8125rem; } } / ========================================================================= * 申込フォーム — #entry-screen * ========================================================================= * * 対象: FreeFormWithPayment/index.php（有料）, FreeForm/index.php（無料）, * Event/schedule.php（イベント）。3枚とも
を持つ。 * * ■ 元の壊れ方 * * イベント4画面と同じで「背景だけ可変なのに前景色がベタ書き」。実測（color_bg:#2f4858）: * p.page-desc #555555 on #2f4858 = 1.29:1 * h1.page-header #24292d on #2f4858 = 1.53:1 * 加えて、背景に関係なく元から AA を割っていたものが3つあった: * .step_bar li.current #fff on #aaa = 2.32:1 * .payBtn .btn-success #fff on #0cbc87 = 2.45:1 * .label-warning（必須） #fff on #ff2461 = 3.70:1 * .error-message #ff2461 on #fff = 3.61:1 * * ■ 証紙のミシン目を持ち込んでいない理由 * * auth.php のミシン目は「申込内容の要約」と「本人情報」がDOM上で隣接していて、 * 2つの箱を1枚の紙に融合させるために引いた線だった（.mp-slip-head + .mp-panel）。 * 申込フォームでは商品情報とフォームの間にログインパネルとモーダルが挟まるので隣接しない。 * 隣接していない所にミシン目だけ引くと「切り取る先が無い切り取り線」＝意味の無い装飾になる。 * なのでここは持ち込まず、地続きなのは素材（紙・髪の毛一本の罫・インクの段階・等幅数字）で担保する。 * .card-header の左罫は入れていない（オーナー指示で外した）。 * ========================================================================= / / ------------------------------------------------------------------------- * キャンバス上のテキスト * * page-header は #event-screen 側の指定がそのまま効く（左罫つきの見出し）。 * ここは導入文だけ。--mp-canvas-ink-dim は背景から計算されていて、 * どの color_bg でも 4.5:1 を割らない（実測 #f5f5f5→4.57 / #2f4858→4.65 / #8fbc8f→5.07）。 * ------------------------------------------------------------------------- / #entry-screen .page-desc { color: var(--mp-canvas-ink-dim); font-size: 0.9375rem; line-height: 1.8; margin-top: calc(var(--mp-space-4) -1 + 2px); margin-bottom: var(--mp-space-4); } /* ------------------------------------------------------------------------- * ステップバー * * 元は event.css の #f6f6f6 の箱に灰色のブロックを3つ並べ、現在地だけ #aaa+白文字 * （2.32:1）。矢印は li:after の border トリックで、色を変えると追従しない。 * * 数字はCSSカウンタで出す（マークアップは触らない）。現在地は * 「キャンバスの色を反転させたチップ」にした。ink と canvas の組は * FormDesignService が 4.58:1 以上を保証している対なので、事業者がどんな背景を * 選んでも現在地だけは必ず読める。ここに --mp-accent を使うと、背景が * accent に近い色のとき現在地が沈むので使っていない。 * * ■ ここだけ #event-screen スコープにしている理由 * * ステップバーは「ご入力→ご確認→完了」の3画面を通して出る同じ1本の部品で、 * 入力画面だけ新しく、確認画面から急に旧デザイン（#0b97c4 の矢印ブロック）に * 戻ると、同じ手続きの途中で見た目が切り替わる。 * 確認・完了は #entry-screen の外（#entry-confirm-screen / #entry-complete-screen） * なので、入力フォーム専用スコープに閉じ込めるとそこへ届かない。 * 部品の寿命がフロー全体なので、スコープもフロー全体（＝このCSSを読み込んだ画面）に合わせる。 * ------------------------------------------------------------------------- / #event-screen #step_bar_box { margin: var(--mp-space-5) 0 var(--mp-space-5); } #event-screen .step_bar { counter-reset: mp-step; display: flex; align-items: center; gap: var(--mp-space-2); / event.css の箱（#f6f6f6 + 1px #ddd + margin:20px auto）を解除してキャンバスに直に置く / background: transparent; border: 0; margin: 0; padding: 0; list-style: none; } #event-screen .step_bar li { / event.css の inline-block / width:29% / background:#eee / padding:10px を解除 / display: flex; align-items: center; justify-content: center; gap: var(--mp-space-2); position: relative; flex: 1 1 0; width: auto; min-width: 0; background: transparent; padding: 0; color: var(--mp-canvas-ink-dim); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; } / 手順の番号 / #event-screen .step_bar li::before { counter-increment: mp-step; content: counter(mp-step); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--mp-canvas-rule); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } / 現在地。背景色を反転させて置く＝どの canvas でも必ず 4.58:1 以上 / #event-screen .step_bar li.current { color: var(--mp-canvas-ink); font-weight: 700; } #event-screen .step_bar li.current::before { background: var(--mp-canvas-ink); border-color: var(--mp-canvas-ink); color: var(--mp-canvas); } / 手順のつなぎ線。元の矢印（border-width:10px の三角）を線に置き換える。絶対配置の三角が残っていると数字に重なるので、プロパティを全部上書きしている / #event-screen .step_bar li:not(:last-child)::after { content: ""; position: static; flex: 1 1 auto; height: 1px; min-width: var(--mp-space-2); border: 0; width: auto; margin: 0; background: var(--mp-canvas-rule); pointer-events: none; } / 最後の手順だけはつなぎ線を持たないので、flex:1 のままだとトラックの中央に浮いて手順の列の右端が揃わない。中身の幅だけ取らせて右端に寄せる / #event-screen .step_bar li:last-child { flex: 0 0 auto; justify-content: flex-end; } #event-screen .step_bar li:nth-child(2) { margin-left: 0; margin-right: 0; } / ------------------------------------------------------------------------- * 商品情報（entry_goods_info / schedule.php のインライン） * * 「何を買うか」は入力ではなく参照情報なので、入力欄の紙とは役割が違う。 * 罫だけの箱にして、フォームの紙より一段静かに置く。 * ------------------------------------------------------------------------- / #entry-screen .box-item-info { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); padding: var(--mp-space-5); margin-bottom: var(--mp-space-4); color: var(--mp-ink); } #entry-screen .box-item-info .item-name, #entry-screen .box-item-info h6 { color: var(--mp-ink); font-weight: 700; line-height: 1.45; letter-spacing: 0.01em; margin-bottom: var(--mp-space-3); } #entry-screen .box-item-info .item-name { font-size: 1.25rem; } / 金額。桁を揃える。ここが商品情報でいちばん見られる / #entry-screen .price-info, #entry-screen .box-item-info .unit-price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } #entry-screen .box-item-info .price { color: var(--mp-ink); font-size: 1.0625rem; font-weight: 700; } #entry-screen .box-item-info .the-next-is { color: var(--mp-ink-dim); font-size: 0.875rem; margin-top: var(--mp-space-1); } #entry-screen #item-desc { color: var(--mp-ink-dim); font-size: 0.875rem; line-height: 1.8; } / ------------------------------------------------------------------------- * 節（.card） * * 元は .card.border.rounded-1 に .card-header.bg-light.fw-bold が乗った * Bootstrap そのままの箱が同じ見た目で3つ4つ積まれていた。 * 縁と影を紙の語彙に寄せて、見出しは「左罫つきの節の始まり」に統一する。 * この左罫は .page-header（キャンバス上の見出し）と同じ形＝同じ意味の記号。 * ------------------------------------------------------------------------- / #entry-screen .card { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); margin-bottom: var(--mp-space-4); color: var(--mp-ink); } #entry-screen .card > .card-header { / .bg-light(Bootstrap) と .card-header{border-radius:.1rem}(event.css) がどちらも !important で来るので、ここだけは同じ武器で返す / background: var(--mp-surface) !important; border: 0; border-bottom: 1px solid var(--mp-rule); border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important; color: var(--mp-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; padding: var(--mp-space-4) var(--mp-space-4); } #entry-screen .card > .card-header .accordion-toggle { color: var(--mp-ink); text-decoration: none; display: flex; align-items: center; cursor: pointer; } #entry-screen .card > .card-header .accordion-toggle:hover { color: var(--mp-accent); } / 開閉の矢印は「操作できる」の合図なので、見出しの文字より弱く、でも見える色に / #entry-screen .card > .card-header .fa { color: var(--mp-ink-faint); font-size: 0.75rem; } #entry-screen .card > .card-header .accordion-toggle:hover .fa { color: var(--mp-accent); } #entry-screen .card-body { padding: var(--mp-space-5); } / ------------------------------------------------------------------------- * 入力欄 * * この画面のフォームは freeformitem.php がラベル入力の表として * PHP文字列で組み立てている。auth.php の .mp-field（アイコン＋入力の箱）は * 構造的に当てられないので、見た目の語彙（白・枠・角丸・フォーカスリング）だけを * .form-control に直接揃える。マークアップは触らない。 * ------------------------------------------------------------------------- / #entry-screen .form-control, #entry-screen select.form-control, #entry-screen textarea.form-control { background: var(--mp-surface); border: 1px solid var(--mp-rule-strong); border-radius: var(--mp-radius-sm); box-shadow: none; color: var(--mp-ink); padding: 0.6rem var(--mp-space-3); / 16px 未満だと iOS がフォーカス時に画面ごとズームする。会員はスマホが主 / font-size: 1rem; min-height: 46px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } #entry-screen textarea.form-control { min-height: 0; line-height: 1.7; } #entry-screen .form-control::placeholder { color: var(--mp-ink-faint); opacity: 1; } #entry-screen .form-control:focus { border-color: var(--mp-accent); box-shadow: 0 0 0 3px var(--mp-focus); background: var(--mp-surface); color: var(--mp-ink); } #entry-screen .form-control:disabled, #entry-screen .form-control[readonly] { background: var(--mp-surface-sunken); color: var(--mp-ink-faint); } / 数量など、幅が決め打ちされている入力 / #entry-screen .w-100px { width: 100px; } / ------------------------------------------------------------------------- * フォームの行（） * * .table のままだと event.css の .table{color:#555} と 15px 8px の余白で、 * ラベルと入力の関係が読み取りにくい。ラベル列を弱く、値列を主にする。 * * カレンダーは .mp-calendar に切り出してあるので、ここで .table を触っても * カレンダーのセル装飾には当たらない（そのための付け替えだった）。 * ------------------------------------------------------------------------- / #entry-screen .table { background: transparent; color: var(--mp-ink); margin-bottom: 0; } #entry-screen .table > tbody > tr > th, #entry-screen .table > tbody > tr > td, #entry-screen .table > tr > th, #entry-screen .table > tr > td { border-top: 0; border-bottom: 1px solid var(--mp-rule); background: transparent; padding: var(--mp-space-4) var(--mp-space-2); vertical-align: middle; } / ラベル列。太字のベタ黒だと入力欄と主従が付かないので、少し弱くして字間で締める / #entry-screen .table > tbody > tr > th, #entry-screen .table > tr > th { color: var(--mp-ink-dim); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; white-space: normal; } / 表の最後の行の罫は、紙の縁と二重になるので消す / #entry-screen .card-body > .table > tbody > tr:last-child > th, #entry-screen .card-body > .table > tbody > tr:last-child > td, #entry-screen .card-body > .table > tr:last-child > th, #entry-screen .card-body > .table > tr:last-child > td { border-bottom: 0; } / 項目の補足説明 / #entry-screen .item-desc { color: var(--mp-ink-dim); font-size: 0.8125rem; line-height: 1.7; margin-top: var(--mp-space-2); } / ------------------------------------------------------------------------- * 必須ラベル * * 元は .label-warning の #fff on #ff2461（3.70:1）。ベタ塗りの赤は、 * 全項目が必須のフォームだと赤い列ができて逆に何も伝わらない。 * 塗りをやめて縁取りのチップにし、色は既存の --mp-danger に寄せる。 * #b3123c on #fdeaef = 5.93:1（実測）。 * ------------------------------------------------------------------------- / #entry-screen .label-warning, #entry-screen .form-required { display: inline-block; background: #fdeaef; border: 1px solid #f5c2ce; border-radius: var(--mp-radius-sm); color: var(--mp-danger); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; padding: 0.1rem 0.35rem; text-shadow: none; vertical-align: middle; } / ------------------------------------------------------------------------- * 入力エラー * * event.css は #ff2461 on #fff = 3.61:1 で AA を割っていた。 * エラーは読めないと意味が無いので、色を --mp-danger に寄せて背景を敷く。 * ------------------------------------------------------------------------- / #entry-screen .error-message { background: #fdeaef; border: 1px solid #f5c2ce; border-radius: var(--mp-radius-sm); color: var(--mp-danger); font-size: 0.8125rem; font-weight: 500; padding: var(--mp-space-2) var(--mp-space-3); } #entry-screen .form-control.form-error, #entry-screen .form-control.errPosRight.form-error { border-color: var(--mp-danger); } / ------------------------------------------------------------------------- * お支払い方法 / カード入力 * * card_input_form.php は Payment の6画面と共有の element なので触っていない。 * #entry-screen の内側に置かれたときだけ、ここで見た目を合わせる。 * ------------------------------------------------------------------------- */ #entry-screen .box-payway { display: flex; flex-direction: column; align-items: stretch; gap: var(--mp-space-1); } /** * 決済方法のラジオは「選ぶもの」なので、行全体を当たり判定にする。 * * display は flex（inline-flex ではない）。 * 選択肢は縦に積む。横に流すと「クレジット決済」と「口座振替・店頭受領など」が * 隣り合って、どこまでが1つの選択肢なのか切れ目が読めない。1行1件にする。 * * Form->radio() は label が radio を内包する形（nestingLabel）で出すので、 * label 自体をブロックにすれば1件ずつ折り返る。包む要素を足す必要はない。 / #entry-screen .box-payway .freeform_payway { display: flex; align-items: center; gap: var(--mp-space-2); color: var(--mp-ink); font-size: 0.9375rem; cursor: pointer; margin: 0; / 指で押せる高さを確保する。会員はスマホが主 */ padding: var(--mp-space-2) 0; min-height: 40px; } #entry-screen .box-payway input[type="radio"] { accent-color: var(--mp-accent); width: 1.05em; height: 1.05em; margin: 0; cursor: pointer; flex: none; /** * event.css が .box-payway input[type="radio"] に * position:relative + top:4px を掛けてラジオを下へずらしている。 * label が素のテキストだった頃に、ベースラインへ目分量で寄せるための手当て。 * * いま label は flex + align-items:center で、flex が中心を揃えている。 * そこへ top:4px が乗ると二重補正になり、ラジオだけ 4px 下がる * （実測でズレとちょうど一致した）。position を静的に戻して打ち消す。 * * event.css は5レイアウト共有なので触らない。ID付きの詳細度で上書きする。 / position: static; top: auto; } #entry-screen .cardinfoInputForm { background: var(--mp-surface-sunken); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius-sm); padding: var(--mp-space-2) var(--mp-space-4); margin-top: var(--mp-space-4); } / へこみの中の表は、紙の上の表より罫を弱くする（入れ子の箱が二重罫にならないように） / #entry-screen .cardinfoInputForm .table > tbody > tr:last-child > th, #entry-screen .cardinfoInputForm .table > tbody > tr:last-child > td, #entry-screen .cardinfoInputForm .table > tr:last-child > th, #entry-screen .cardinfoInputForm .table > tr:last-child > td { border-bottom: 0; } / ------------------------------------------------------------------------- * 合計金額（schedule.php） * ------------------------------------------------------------------------- / #entry-screen .total_price { background: var(--mp-surface-sunken) !important; border: 1px solid var(--mp-rule) !important; border-radius: var(--mp-radius); margin-bottom: var(--mp-space-4); overflow: hidden; } #entry-screen .total_price th, #entry-screen .total_price td { border-bottom: 0; color: var(--mp-ink); } #entry-screen .total_price .price, #entry-screen .total_price .currency { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--mp-ink); } / ------------------------------------------------------------------------- * 座席（schedule.php）— 「選べる/満席」を形で分ける * ------------------------------------------------------------------------- / #entry-screen .box-payway .radio { border: 1px solid var(--mp-rule-strong) !important; border-radius: var(--mp-radius-sm); background: var(--mp-surface); transition: border-color 0.12s ease, background-color 0.12s ease; } #entry-screen .box-payway .radio.select-seat-id { cursor: pointer; } #entry-screen .box-payway .radio.select-seat-id:hover { border-color: var(--mp-accent) !important; background: var(--mp-surface-sunken); } / 満席は押せない。押せないものは沈める / #entry-screen .box-payway .radio.text-secondary { background: var(--mp-surface-sunken); border-style: dashed !important; } #entry-screen .box-payway .radio .stock { color: var(--mp-ink-faint); margin-left: var(--mp-space-2); } / ------------------------------------------------------------------------- * 送信ボタン * * 元は .btn-success の #fff on #0cbc87 = 2.45:1 で AA を割っていた。 * 既定色はアクセント（青・#fff で 5.37:1）に統一する。申込導線の中で * 「次へ」（auth.php）と「内容確認」の色が違うのは、同じ前進の操作なので揃える。 * * 色はすべて --mp-cta 経由。事業者は :root 定義のコメントにあるとおり * トークン1行で差し替えられる。ここで値を直書きすると上書きの入口が塞がるので、 * 新しく色を足すときも必ずトークンを通すこと。 * 形の作法は .mp-panel .btn-primary と揃える。 * ------------------------------------------------------------------------- / #entry-screen .payBtn { margin: var(--mp-space-6) auto var(--mp-space-6); } #entry-screen .payBtn .btn-success, #entry-screen .payBtn .btn-success:focus { --bs-btn-bg: var(--mp-cta); --bs-btn-border-color: var(--mp-cta); --bs-btn-hover-bg: var(--mp-cta); --bs-btn-hover-border-color: var(--mp-cta); background: var(--mp-cta); border: 1px solid var(--mp-cta); border-radius: var(--mp-radius-sm); color: var(--mp-cta-ink); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; min-height: 52px; padding: 0.8rem 2.5rem; transition: filter 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease; } #entry-screen .payBtn .btn-success:hover { background: var(--mp-cta); border-color: var(--mp-cta); filter: brightness(1.12); } / 押した感触。1px 沈むだけ */ #entry-screen .payBtn .btn-success:active { transform: translateY(1px); filter: brightness(0.94); } /** * フォーカスリング。 * --mp-cta-ring は既定色に合わせた固定値なので、事業者が --mp-cta だけ * 差し替えるとリングの色だけ取り残される。color-mix が使える環境では * CTA 色から自動で作り、使えない環境は既定のリングにフォールバックする。 * （box-shadow ごと無効化されて「リングが消える」ことが無いよう、 * 固定値の宣言を先に置いて @supports で上書きする形にしてある） / #entry-screen .payBtn .btn-success:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-cta-ring); } @supports (color: color-mix(in srgb, red 50%, transparent)) { #entry-screen .payBtn .btn-success:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mp-cta) 32%, transparent); } } #entry-screen .payBtn .btn-success:disabled { background: var(--mp-off); border-color: var(--mp-off); filter: none; opacity: 1; } / 送信前の案内文。ボタンの直前なので、読ませるが主張はさせない / #entry-screen .form-group.clearfix p { color: var(--mp-canvas-ink-dim); font-size: 0.875rem; margin-bottom: var(--mp-space-1); } / ------------------------------------------------------------------------- * ログインパネル / メール重複モーダル * ------------------------------------------------------------------------- / #entry-screen .input-head { color: var(--mp-ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; margin-bottom: var(--mp-space-2); margin-top: var(--mp-space-3); } / loginForm / モーダルの「過去にご利用がある場合〜」。.bg-light(Bootstrap) を打ち返す / #entry-screen #collapseOne > div > .bg-light, #entry-screen .modal-body > .bg-light, .modal#modalMailWarning .modal-body > .bg-light { background: var(--mp-surface-sunken) !important; border: 1px solid var(--mp-rule); border-radius: var(--mp-radius-sm); color: var(--mp-ink-dim); font-size: 0.8125rem; line-height: 1.7; } #entry-screen .btn-primary, .modal#modalMailWarning .btn-primary { --bs-btn-bg: var(--mp-accent); --bs-btn-border-color: var(--mp-accent); background: var(--mp-accent); border-color: var(--mp-accent); color: var(--mp-accent-ink); border-radius: var(--mp-radius-sm); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; min-height: 48px; transition: filter 0.15s ease, transform 0.06s ease; } #entry-screen .btn-primary:hover, .modal#modalMailWarning .btn-primary:hover { filter: brightness(1.08); } #entry-screen .btn-primary:active, .modal#modalMailWarning .btn-primary:active { transform: translateY(1px); } #entry-screen .forget a, .modal#modalMailWarning .forget a { color: var(--mp-ink-faint); font-size: 0.8125rem; text-decoration: none; } #entry-screen .forget a:hover, .modal#modalMailWarning .forget a:hover { color: var(--mp-accent); text-decoration: underline; } / パスワードの目のアイコン。元は opacity:0.3 のベタ書きで、押せると気付けない / #entry-screen .toggle-password, #entry-screen #togglePassword { color: var(--mp-ink-faint) !important; opacity: 1 !important; cursor: pointer; } #entry-screen .toggle-password:hover, #entry-screen #togglePassword:hover { color: var(--mp-accent) !important; } .modal#modalMailWarning .modal-content { border: 0; border-radius: var(--mp-radius); overflow: hidden; } .modal#modalMailWarning .modal-header { border-bottom: 1px solid var(--mp-rule); } .modal#modalMailWarning .modal-title { color: var(--mp-ink); font-size: 0.9375rem; font-weight: 700; } .modal#modalMailWarning .modal-footer { border-top: 1px solid var(--mp-rule); background: var(--mp-surface-sunken); } / ------------------------------------------------------------------------- * 追加参加者（schedule.php が JS で組み立てる .partAdd） * * JS が bg-light rounded-2 を吐くので、生成された後の見た目だけ合わせる。 * DOM生成側（JS）は触っていない。 * ------------------------------------------------------------------------- / #entry-screen .partAdd { background: var(--mp-surface-sunken) !important; border: 1px solid var(--mp-rule); border-radius: var(--mp-radius-sm) !important; margin-bottom: var(--mp-space-3); } #entry-screen .partAdd > p { color: var(--mp-ink-dim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; margin-bottom: var(--mp-space-2); } #entry-screen .partAdd .table > tbody > tr:last-child > th, #entry-screen .partAdd .table > tbody > tr:last-child > td { border-bottom: 0; } / ------------------------------------------------------------------------- * 申込フォームのスマホ（375px） * * 表のラベル列と入力列を横並びのまま維持すると、375px では入力欄が 120px まで * 潰れる。行を積んでラベルを上に出す。 * ------------------------------------------------------------------------- / @media (max-width: 575.98px) { #entry-screen .card-body { padding: var(--mp-space-4); } #entry-screen .box-item-info { padding: var(--mp-space-4); } #entry-screen .table > tbody > tr > th, #entry-screen .table > tr > th { display: block; width: 100%; border-bottom: 0; padding: var(--mp-space-3) 0 var(--mp-space-2); } #entry-screen .table > tbody > tr > td, #entry-screen .table > tr > td { display: block; width: 100%; padding: 0 0 var(--mp-space-3); } / ステップバーは 375px では番号だけ大きく、文字を詰める / #event-screen .step_bar li { font-size: 0.75rem; gap: var(--mp-space-1); } #event-screen .step_bar li::before { width: 21px; height: 21px; font-size: 0.6875rem; } #entry-screen .payBtn .btn-success { width: 100%; padding: 0.8rem var(--mp-space-4); } } / ========================================================================= * 動きを減らす設定を尊重する * ========================================================================= / @media (prefers-reduced-motion: reduce) { #event-screen , #event-screen ::before, #event-screen ::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ========================================================================= * 面談予約の週ビュー（Event/booking_calendar.php・mode=booking 専用） * * セミナーの月ビュー（.mp-calendar）とは別物。あちらは「日付を選ぶ」だが、 * こちらは「日時を選ぶ」ので、1画面で時刻まで見せる。 * * 枠は必ず紙（サーフェス）の上に置く。キャンバス＝事業者の背景色は濃くなり得るので、 * 枠を直接載せると読めなくなる。2層モデルの適用先がここでも同じ。 * ========================================================================= / #event-screen .mp-bk { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); overflow: hidden; } #event-screen .mp-bknav { display: flex; align-items: center; justify-content: center; gap: var(--mp-space-4); padding: var(--mp-space-3) var(--mp-space-4); border-bottom: 1px solid var(--mp-rule); } #event-screen .mp-bklabel { font-weight: 700; font-size: 0.9375rem; color: var(--mp-ink); font-variant-numeric: tabular-nums; min-width: 11em; text-align: center; } / 端まで来たら送れないことを見せる（消すと押せるように見えてしまう） / #event-screen .mp-navbtn.is-off { opacity: 0.3; cursor: default; pointer-events: none; } #event-screen .mp-bkscroll { overflow-x: auto; } #event-screen .mp-bkgrid { display: grid; grid-template-columns: repeat(7, minmax(84px, 1fr)); min-width: 620px; } #event-screen .mp-bkcol { / --mp-rule-2 という存在しないトークンを見ていて、var() が解決できず border-left のショートハンド全体が無効になっていた（style:none → 幅0）。日の区切りが1本も引かれず、枠がどの日のものか目で追えなかった / border-left: 1px solid var(--mp-rule); display: flex; flex-direction: column; } #event-screen .mp-bkcol:first-child { border-left: 0; } #event-screen .mp-bkcol.is-empty { background: var(--mp-surface-sunken); } #event-screen .mp-bkhead { text-align: center; padding: var(--mp-space-2) 2px; border-bottom: 1px solid var(--mp-rule); } #event-screen .mp-bkdow { display: block; font-size: 0.6875rem; font-weight: 700; color: var(--mp-ink-faint); } #event-screen .mp-bkday { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--mp-ink); line-height: 1.3; font-variant-numeric: tabular-nums; } / 日曜・土曜。月ビューの calendar.css と同じ意味づけに揃える / #event-screen .mp-bkhead.is-sun .mp-bkday, #event-screen .mp-bkhead.is-sun .mp-bkdow { color: #c62828; } #event-screen .mp-bkhead.is-sat .mp-bkday, #event-screen .mp-bkhead.is-sat .mp-bkdow { color: var(--mp-accent); } #event-screen .mp-bkcol.is-today .mp-bkhead { background: var(--mp-warn-bg); box-shadow: inset 0 2px 0 var(--mp-warn); } #event-screen .mp-bkbadge { display: inline-block; font-size: 0.625rem; font-weight: 700; padding: 0 5px; border-radius: 99px; background: var(--mp-warn-bg); color: var(--mp-warn); margin-top: 2px; } / 場所取りの印。週に祝日等があるとき、印の無い日にも同じ高さを確保する（1列だけ見出しが高くなり、その日の枠だけ下にずれるため） / #event-screen .mp-bkbadge.is-placeholder { visibility: hidden; } #event-screen .mp-bkslots { display: flex; flex-direction: column; gap: 4px; padding: var(--mp-space-2); flex: 1; } / 予約の入口。押せるものとして見せる（枠は「選ぶもの」） / #event-screen .mp-bkslot { display: block; text-align: center; padding: 8px 4px; border: 1px solid var(--mp-accent); border-radius: var(--mp-radius-sm); background: var(--mp-surface); color: var(--mp-accent); font-size: 0.8125rem; font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; / 指で押せる高さ。会員はスマホが主 / min-height: 38px; transition: background 0.12s ease, color 0.12s ease; } #event-screen .mp-bkslot:hover { background: var(--mp-accent); color: var(--mp-accent-ink); } #event-screen .mp-bkslot:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-focus); } #event-screen .mp-bknone { display: block; text-align: center; color: var(--mp-ink-faint); font-size: 0.8125rem; padding: var(--mp-space-2) 0; } #event-screen .mp-bkempty { padding: var(--mp-space-6) var(--mp-space-4); text-align: center; color: var(--mp-ink-dim); font-size: 0.875rem; } @media (max-width: 575px) { / スマホでは横に詰まるので、日付を細く・枠の字を小さく / #event-screen .mp-bkgrid { grid-template-columns: repeat(7, minmax(62px, 1fr)); min-width: 460px; } #event-screen .mp-bkslot { font-size: 0.75rem; padding: 7px 2px; } } / ========================================================================= * 予約の確認・変更・取り消し（Event/booking.php） * * ログインしていない人がメールのリンクからしか来られない画面。 * 会員には見せられる「マイページ」という文脈が無いので、この1枚で * 「どの予約か」「今どうなっているか」「何ができるか」を閉じさせる。 * * モチーフは auth.php の証紙の続きで、こちらは受け取った半券。 * 頭（状態）と本体（日時）をミシン目で分け、切り欠きは var(--mp-canvas) で塗る。 * 事業者がどんな背景色を選んでも成立するのは 2層モデルがあるから。 * ========================================================================= / #event-screen .mp-bkc { / 読む幅としては 640px で足りるが、日時の変更で出る週ビュー（min-width 620px）が横スクロールに落ちない幅を確保する。同じURLで幅が動くのを避けたいので両方これ / max-width: 700px; padding-bottom: var(--mp-space-6); } / ページ見出しの上に置く小さな行。イベント名だけだと「何のページか」が分からない / #event-screen .mp-kicker { color: var(--mp-canvas-ink-dim); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; margin: var(--mp-space-5) 0 0; } #event-screen .mp-kicker + .page-header { margin-top: var(--mp-space-2); } / ------------------------------------------------------------------------- * 半券 * ------------------------------------------------------------------------- / #event-screen .mp-ticket { background: var(--mp-surface); border: 1px solid var(--mp-rule); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); color: var(--mp-ink); / 切り欠きが紙の外へはみ出すので clip しない / overflow: visible; } / 半券の頭。ラベルと状態だけを載せた帯 / #event-screen .mp-ticketstub { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--mp-space-3); padding: var(--mp-space-3) var(--mp-space-5); background: var(--mp-surface-sunken); border-radius: var(--mp-radius) var(--mp-radius) 0 0; } / ミシン目 / #event-screen .mp-ticketstub::after { content: ""; position: absolute; left: var(--mp-space-4); right: var(--mp-space-4); bottom: 0; height: 1px; background-image: repeating-linear-gradient(to right, var(--mp-rule-strong) 0 4px, transparent 4px 9px); } #event-screen .mp-ticketkicker { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--mp-ink-faint); } #event-screen .mp-ticketmain { position: relative; padding: var(--mp-space-5); } / ミシン目の両端の切り欠き。中は紙に空いた穴＝キャンバス（事業者の背景色）が覗く見立てなので塗りはキャンバス色。外側（紙の外）の半分を clip-path で隠し、内側の半円だけを縁に食い込ませる。inset 影でカード外周と同じ「上から光」の奥行きを付ける。 ※上の .mp-slip-head + .mp-panel の切り欠きと同じ作り。クリップを外すと白背景テナントで枠線だけが全周残り「まん丸」に見えるのを防ぐ。 ※左右で残す向きが逆になるので clip は ::before / ::after 側で指定する。 / #event-screen .mp-ticketmain::before, #event-screen .mp-ticketmain::after { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--mp-canvas); border: 1px solid var(--mp-rule); box-shadow: inset 0 2px 3px rgba(16, 24, 32, 0.13); } / 左端：紙は円の右側にあるので、右半分（内側）を残して左半分を隠す / #event-screen .mp-ticketmain::before { left: -8px; clip-path: inset(-2px -2px -2px 50%); } / 右端：紙は円の左側にあるので、左半分（内側）を残して右半分を隠す / #event-screen .mp-ticketmain::after { right: -8px; clip-path: inset(-2px 50% -2px -2px); } / ------------------------------------------------------------------------- * 日時＝この画面の主役 * * 元は .card の中の 1.25rem の一行で、「お名前」と同じ重さで並んでいた。 * 日付と時刻を段に分け、時刻だけを大きく採る。左の細い罫が主役の位置を示す。 * ------------------------------------------------------------------------- / #event-screen .mp-ticketwhen { position: relative; margin: 0; padding-left: var(--mp-space-4); } #event-screen .mp-ticketwhen::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: var(--mp-accent); } #event-screen .mp-whendate { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--mp-ink-dim); letter-spacing: 0.02em; } / 曜日は括弧ではなく小さな囲みにする。括弧だと日付の桁がそこで折れて見える / #event-screen .mp-whendow { display: inline-block; margin-left: var(--mp-space-2); padding: 1px 6px; border-radius: var(--mp-radius-sm); background: var(--mp-surface-sunken); border: 1px solid var(--mp-rule); font-size: 0.75rem; color: var(--mp-ink-dim); vertical-align: 1px; } #event-screen .mp-whentime { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--mp-ink); margin-top: 2px; } / 終了時刻は「いつまで拘束されるか」の情報。開始と同じ重さにはしない / #event-screen .mp-whento { font-size: 1.125rem; font-weight: 500; color: var(--mp-ink-dim); margin-left: var(--mp-space-2); } / 「あと3日」。近いのか先なのかが一目で分かると、開いた人がまず安心する / #event-screen .mp-whenrel { display: inline-block; margin-top: var(--mp-space-2); padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--mp-surface-sunken); border: 1px solid var(--mp-rule); font-size: 0.75rem; font-weight: 700; color: var(--mp-ink-dim); letter-spacing: 0.04em; } / 取り消し済み・終了済みの半券は寝かせる。主役の罫からも色を抜く / #event-screen .mp-ticket.is-void .mp-ticketwhen::before { background: var(--mp-rule-strong); } #event-screen .mp-ticket.is-void .mp-whentime, #event-screen .mp-ticket.is-void .mp-whendate { color: var(--mp-ink-faint); } / 打ち消し線は取り消したときだけ。終了済みの予約は「無くなった」のではなく「済んだ」ので、同じ見え方にすると参加した人に取り消されたと読める / #event-screen .mp-ticket.is-canceled .mp-whentime, #event-screen .mp-ticket.is-canceled .mp-whendate { text-decoration: line-through; text-decoration-color: var(--mp-rule-strong); text-decoration-thickness: 1px; } / ------------------------------------------------------------------------- * 付随情報（お名前） * ------------------------------------------------------------------------- / #event-screen .mp-ticketrows { margin: var(--mp-space-4) 0 0; padding-top: var(--mp-space-3); border-top: 1px solid var(--mp-rule); } #event-screen .mp-ticketrow { display: flex; align-items: baseline; gap: var(--mp-space-4); } #event-screen .mp-ticketrow dt { flex: 0 0 5em; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--mp-ink-faint); } #event-screen .mp-ticketrow dd { margin: 0; font-size: 0.9375rem; color: var(--mp-ink); } / ------------------------------------------------------------------------- * 操作 * * 変更は紙の上（半券の足）に、取り消しは紙の外に置く。 * 戻せる操作と戻せない操作を、色の濃さではなく置き場所で分ける。 * ------------------------------------------------------------------------- / #event-screen .mp-ticketfoot { padding: var(--mp-space-4) var(--mp-space-5); border-top: 1px solid var(--mp-rule); background: var(--mp-surface-sunken); border-radius: 0 0 var(--mp-radius) var(--mp-radius); } #event-screen .mp-change { display: flex; align-items: center; justify-content: center; gap: var(--mp-space-2); / 紙の幅いっぱいに伸ばすと 700px の帯になって「押す場所」に見えない。指で押せる高さは確保したまま、幅だけ抑えて中央に置く / max-width: 22rem; margin: 0 auto; min-height: 48px; padding: 0.75rem var(--mp-space-4); border: 1px solid var(--mp-accent); border-radius: var(--mp-radius-sm); background: var(--mp-accent); color: var(--mp-accent-ink); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; transition: filter 0.15s ease, transform 0.06s ease; } #event-screen .mp-change:hover { color: var(--mp-accent-ink); filter: brightness(1.08); } #event-screen .mp-change:active { transform: translateY(1px); filter: brightness(0.94); } #event-screen .mp-change:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-focus); } #event-screen .mp-ticketdeadline { margin: var(--mp-space-3) 0 0; text-align: center; font-size: 0.75rem; color: var(--mp-ink-faint); } / 取り消し。キャンバスに直接置くので --mp-canvas-* を使う（どの背景色でも 4.5:1）。赤くはしない。危険色で目を引かせると、押させたい操作の方が負ける / #event-screen .mp-drop-wrap { text-align: center; margin-top: var(--mp-space-4); } #event-screen .mp-drop { font: inherit; font-size: 0.8125rem; background: none; border: 0; padding: var(--mp-space-2) var(--mp-space-3); border-radius: var(--mp-radius-sm); color: var(--mp-canvas-ink-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mp-canvas-rule); cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease; } #event-screen .mp-drop:hover { color: var(--mp-canvas-ink); / 背景の明暗が分からないので、色ではなく前景色の薄膜で反応させる / background: color-mix(in srgb, var(--mp-canvas-ink) 10%, transparent); text-decoration-color: currentColor; } #event-screen .mp-drop:focus-visible { outline: 2px solid var(--mp-canvas-ink); outline-offset: 2px; } / ------------------------------------------------------------------------- * 行き止まりの説明（取り消し済み・終了済み・期限切れ） * * 元は「このご予約は取り消し済みです。」の1行だけだった。メールから来た人には * ここが終点なので、次にどうすればいいかまで書いて紙に載せる。 * ------------------------------------------------------------------------- / #event-screen .mp-note { display: flex; gap: var(--mp-space-3); margin-top: var(--mp-space-4); padding: var(--mp-space-4) var(--mp-space-5); background: var(--mp-surface); border: 1px solid var(--mp-rule); border-left: 3px solid var(--mp-rule-strong); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); color: var(--mp-ink-dim); font-size: 0.875rem; line-height: 1.8; } #event-screen .mp-note p { margin: 0; } #event-screen .mp-notetitle { color: var(--mp-ink); font-size: 0.9375rem; font-weight: 700; line-height: 1.5; margin-bottom: var(--mp-space-1); } #event-screen .mp-noteicon { flex: 0 0 auto; color: var(--mp-ink-faint); font-size: 1rem; line-height: 1.6; } #event-screen .mp-note .mp-go { margin-top: var(--mp-space-3); } / 期限切れは「できない理由」なので注意色を左の罫に回す。塗りつぶしにはしない / #event-screen .mp-note--warn { border-left-color: var(--mp-warn); } #event-screen .mp-note--warn .mp-noteicon { color: var(--mp-warn); } / ------------------------------------------------------------------------- * 日時の変更中 * * 今の予約は主役から降りるので、半券ではなく一行の帯に畳む。 * 全高の半券を挟むと、スマホでは週ビューが最初の画面から落ちる。 * ------------------------------------------------------------------------- / #event-screen .mp-nowbk { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--mp-space-2) var(--mp-space-3); margin-bottom: var(--mp-space-4); padding: var(--mp-space-3) var(--mp-space-4); background: var(--mp-surface); border: 1px solid var(--mp-rule); border-left: 3px solid var(--mp-rule-strong); border-radius: var(--mp-radius); box-shadow: var(--mp-lift); } #event-screen .mp-nowbklabel { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: var(--mp-ink-faint); } #event-screen .mp-nowbkwhen { font-size: 0.9375rem; font-weight: 700; color: var(--mp-ink); } / 枠は form で包むので、並びが崩れないよう包みを透明にする / #event-screen .bk-slot-form { display: contents; } / 枠はボタンだが、予約ページのリンクと同じ見え方にする（.mp-bkslot は a 前提） / #event-screen button.mp-bkslot { font: inherit; font-weight: 700; cursor: pointer; width: 100%; } #event-screen .mp-backlink-wrap { text-align: center; margin-top: var(--mp-space-4); } #event-screen .mp-backlink { display: inline-flex; align-items: center; gap: var(--mp-space-2); padding-bottom: 2px; color: var(--mp-canvas-ink-dim); font-size: 0.8125rem; text-decoration: none; border-bottom: 1px solid var(--mp-canvas-rule); transition: color 0.15s ease, border-color 0.15s ease; } #event-screen .mp-backlink:hover { color: var(--mp-canvas-ink); border-bottom-color: var(--mp-canvas-ink); } #event-screen .mp-backlink:focus-visible { outline: 2px solid var(--mp-canvas-ink); outline-offset: 3px; } @media (max-width: 575.98px) { #event-screen .mp-ticketstub, #event-screen .mp-ticketmain, #event-screen .mp-ticketfoot, #event-screen .mp-note { padding-left: var(--mp-space-4); padding-right: var(--mp-space-4); } #event-screen .mp-whentime { font-size: 1.75rem; } #event-screen .mp-whento { font-size: 1rem; } #event-screen .mp-ticketrow dt { flex-basis: 4.5em; } } / ========================================================================= * 確認ダイアログ（sweetalert2） * * ■ なぜスコープの外に書くか * * sweetalert2 のポップアップは直下に出るので #event-screen に入らない。 * .modal#modalMailWarning と同じ扱いで、この画面しか付けないクラス * （customClass.popup = mp-ask）と二重に指定して当たりを絞る。 * このCSSを読む12テンプレートのうち mp-ask を出すのは予約の確認画面だけなので、 * 他の画面のダイアログには届かない。スコープを増やしたわけではない。 * * 色は全部トークン。sweetalert2 の既定（青と赤のベタ塗り）をそのまま出すと、 * この画面だけ別のプロダクトの部品が飛び込んできたように見える。 * ========================================================================= / .swal2-popup.mp-ask { width: 25rem; max-width: calc(100vw - 32px); padding: var(--mp-space-5); border-radius: var(--mp-radius); background: var(--mp-surface); color: var(--mp-ink); box-shadow: 0 10px 40px rgba(16, 24, 32, 0.18); } .swal2-popup.mp-ask .mp-asktitle { padding: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; color: var(--mp-ink); } .swal2-popup.mp-ask .mp-askbody { margin: var(--mp-space-4) 0 0; padding: 0; font-size: 0.875rem; color: var(--mp-ink-dim); text-align: center; } / 「今の予約 → これからの予約」を縦に並べる。横に並べるとスマホで折れる / .swal2-popup.mp-ask .mp-askfrom, .swal2-popup.mp-ask .mp-askwhen { display: block; font-variant-numeric: tabular-nums; } .swal2-popup.mp-ask .mp-askfrom { font-size: 0.875rem; color: var(--mp-ink-faint); text-decoration: line-through; text-decoration-color: var(--mp-rule-strong); } .swal2-popup.mp-ask .mp-askarrow { display: block; color: var(--mp-ink-faint); line-height: 1.2; } .swal2-popup.mp-ask .mp-askwhen { padding: var(--mp-space-2) var(--mp-space-3); border-radius: var(--mp-radius-sm); background: var(--mp-surface-sunken); border: 1px solid var(--mp-rule); font-size: 1.125rem; font-weight: 700; color: var(--mp-ink); } .swal2-popup.mp-ask .mp-askwarn { display: block; margin-top: var(--mp-space-3); font-size: 0.8125rem; color: var(--mp-danger); } .swal2-popup.mp-ask .mp-askactions { margin: var(--mp-space-5) 0 0; gap: var(--mp-space-2); width: 100%; } / buttonsStyling:false にしてあるので、ここが唯一のボタンの見た目 / .swal2-popup.mp-ask .mp-askok, .swal2-popup.mp-ask .mp-askno { flex: 1 1 0; min-height: 46px; padding: 0.7rem var(--mp-space-4); border-radius: var(--mp-radius-sm); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; transition: filter 0.15s ease, background-color 0.15s ease; } .swal2-popup.mp-ask .mp-askno { border: 1px solid var(--mp-rule-strong); background: var(--mp-surface); color: var(--mp-ink-dim); } .swal2-popup.mp-ask .mp-askno:hover { background: var(--mp-surface-sunken); color: var(--mp-ink); } .swal2-popup.mp-ask .mp-askok { border: 1px solid var(--mp-accent); background: var(--mp-accent); color: var(--mp-accent-ink); } .swal2-popup.mp-ask .mp-askok:hover { filter: brightness(1.08); } / 取り消しの確認だけは赤で受ける。押す直前の一箇所に危険色を集める */ .swal2-popup.mp-ask .mp-askok--danger { border-color: var(--mp-danger); background: var(--mp-danger); color: #fff; } .swal2-popup.mp-ask .mp-askok:focus-visible, .swal2-popup.mp-ask .mp-askno:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--mp-focus); }