/* SITE 96 — 共通コンポーネント（明色・コンパクト） header / anchor-nav / drawer / breadcrumb / button / card / table / tabs / chip / accordion / modal / form / footer / mobile-cta ライトボックスは持たない（ギャラリーページを作らないコンパクト型のため、未使用CSSを残さない）。 */ /* ============ base ============ */ html { /* 固定ヘッダー分のアンカー位置補正。1ページ型はアンカーが主導線なので必須（CANON）。 */ scroll-padding-top: calc(var(--h-header) + var(--sp-4)); } /* トップ（アンカーナビつき）はナビの高さぶんも避ける。 クラスは index.html の インラインスクリプトが付ける。 */ html.onepage { scroll-padding-top: calc(var(--h-header) + var(--h-anchor) + var(--sp-3)); } body { background: var(--c-bg); color: var(--c-fg); font-family: var(--font-base); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: 400; padding-top: var(--h-header); /* 電話・料金・日付に old-style 数字を使わない（MASTER / CANON: lining-nums, tabular-nums） */ font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; } h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; } p { line-height: var(--lh-long); } a { color: var(--c-accent-deep); } a:hover { color: var(--c-fg); } .container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--sp-5); } .container--text { max-width: calc(var(--w-text) + var(--sp-5) * 2); } .skip-link { position: absolute; left: var(--sp-4); top: -200px; z-index: 200; background: var(--c-accent-deep); color: var(--c-accent-ink); padding: 12px 18px; border-radius: var(--radius); font-weight: 700; } .skip-link:focus { top: var(--sp-3); color: var(--c-accent-ink); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .num { font-family: var(--font-num); font-variant-numeric: lining-nums tabular-nums; } /* JS無効時の代替表示。店舗データをHTMLへ直書きする唯一の場所。 */ .noscript-note { background: var(--c-accent-soft); border-bottom: 1px solid var(--c-accent-line); color: var(--c-fg); font-size: var(--fs-body); line-height: var(--lh-long); padding: var(--sp-5); } .noscript-note__inner { max-width: var(--w-page); margin-inline: auto; display: grid; gap: var(--sp-3); } .noscript-note dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--sp-4); } .noscript-note dt { color: var(--c-muted); font-size: var(--fs-note); } .noscript-note dd { min-width: 0; } .noscript-note a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; text-decoration: underline; } .noscript-note__meta { font-size: var(--fs-note); color: var(--c-muted); } @media (max-width: 599px) { .noscript-note dl { grid-template-columns: minmax(0, 1fr); gap: 2px; } .noscript-note dt { margin-top: 6px; } } /* ============ header ============ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--h-header); background: var(--c-surface); border-bottom: 1px solid var(--c-line-strong); } .site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-4); } .brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; min-height: var(--tap); color: var(--c-fg); } .brand:hover { color: var(--c-fg); } .brand__mark { width: 36px; height: 36px; flex: none; object-fit: contain; } .brand__text { display: flex; flex-direction: column; min-width: 0; } .brand__name { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; /* CANON: ブランド・ナビは折り返さない */ } .brand__sub { font-size: var(--fs-note); color: var(--c-muted); white-space: nowrap; } .global-nav { margin-left: auto; } .global-nav__list { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); } .global-nav__link { display: flex; align-items: center; height: var(--tap); padding-inline: 2px; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: var(--c-fg-2); border-bottom: 2px solid transparent; white-space: nowrap; /* CANON: 収まらない場合は項目整理。文字縮小・折返しで逃げない */ } .global-nav__link:hover { color: var(--c-accent-deep); } .global-nav__link[aria-current="page"] { color: var(--c-accent-deep); border-bottom-color: var(--c-accent); } .header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; } .drawer-toggle { display: none; width: var(--tap); height: var(--tap); border: 1px solid var(--c-line-strong); border-radius: var(--radius); align-items: center; justify-content: center; color: var(--c-fg); background: var(--c-surface); } .drawer-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; } .drawer-toggle span::before, .drawer-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; } .drawer-toggle span::before { top: -6px; } .drawer-toggle span::after { top: 6px; } /* ============ anchor nav（トップ1ページの現在地表現＝パンくず相当） ============ 下層ページのパンくずと同じ役割をトップで担う。 ・sticky でヘッダー直下に貼り付く（z は固定CTA・ドロワーより下） ・狭い幅では「この帯の中だけ」を横スクロールさせる。ページ本体は横スクロールさせない ・現在地は aria-current="true"。色だけでなく下線と面の変化でも示す ・各項目に通し番号を付け、1ページのどこを読んでいるかを数で分かるようにする */ .anchor-nav { position: sticky; top: var(--h-header); z-index: var(--z-anchor); background: var(--c-surface); border-bottom: 1px solid var(--c-line-strong); } .anchor-nav__inner { height: var(--h-anchor); display: flex; align-items: stretch; gap: var(--sp-3); } .anchor-nav__label { flex: none; display: flex; align-items: center; gap: 6px; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.1em; color: var(--c-muted); padding-right: var(--sp-3); border-right: 1px solid var(--c-line); white-space: nowrap; } .anchor-nav__scroller { flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .anchor-nav__list { display: flex; align-items: stretch; gap: 2px; height: 100%; width: max-content; } .anchor-nav__link { display: flex; align-items: center; gap: 6px; padding-inline: var(--sp-3); min-height: var(--tap); font-size: 15px; font-weight: 700; color: var(--c-fg-2); white-space: nowrap; border-bottom: 3px solid transparent; } /* 通し番号は装飾（内容理解に影響しない補助文字）。それでも14pxを下回らせない。 */ .anchor-nav__num { font-size: var(--fs-note); color: var(--c-muted); font-weight: 700; } .anchor-nav__link:hover { color: var(--c-accent-deep); background: var(--c-surface-2); } .anchor-nav__link[aria-current="true"] { color: var(--c-accent-deep); border-bottom-color: var(--c-accent); background: var(--c-accent-soft); } .anchor-nav__link[aria-current="true"] .anchor-nav__num { color: var(--c-accent-deep); } .anchor-nav__top { flex: none; display: none; align-items: center; gap: 4px; padding-inline: var(--sp-3); min-height: var(--tap); font-size: var(--fs-note); font-weight: 700; color: var(--c-fg-2); border-left: 1px solid var(--c-line); } .anchor-nav__top svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } /* ============ buttons ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 10px 18px; border-radius: var(--radius); font-size: var(--fs-body); font-weight: 700; line-height: 1.25; letter-spacing: 0.02em; border: 1px solid transparent; text-align: center; background: transparent; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; } .btn--primary { background: var(--c-accent-deep); color: var(--c-accent-ink); border-color: var(--c-accent-deep); } .btn--primary:hover { background: #77323F; border-color: #77323F; color: var(--c-accent-ink); } .btn--outline { border-color: var(--c-line-strong); color: var(--c-fg); background: var(--c-surface); } .btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent-deep); } .btn--ghost { color: var(--c-fg-2); } .btn--ghost:hover { color: var(--c-accent-deep); } .btn--block { width: 100%; } .btn--lg { min-height: 52px; padding-inline: 24px; } /* ============ drawer ============ CANON: visibility / display の切替は開いた瞬間に即時反映させる。 トランジション対象は backdrop の opacity とパネルの transform だけにし、 visibility を遷移させない（遷移させると開直後の focus() が不発になる）。 */ .drawer-root { position: fixed; inset: 0; z-index: var(--z-drawer); } .drawer-root__backdrop { position: absolute; inset: 0; background: rgba(34, 34, 34, 0.55); opacity: 0; pointer-events: none; /* 閉状態では背面のクリックを奪わない */ transition: opacity var(--dur) var(--ease); } /* 開いている間（root が hidden でない間）は必ずクリックを受ける。 */ .drawer-root:not([hidden]) .drawer-root__backdrop { pointer-events: auto; } .drawer-root[data-open="true"] .drawer-root__backdrop { opacity: 1; } .drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--c-surface); border-left: 1px solid var(--c-line-strong); box-shadow: var(--shadow-1); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-5) calc(var(--sp-7) + env(safe-area-inset-bottom, 0px)); transform: translateX(100%); transition: transform var(--dur) var(--ease); } .drawer-root[data-open="true"] .drawer { transform: translateX(0); } .drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--tap); margin-bottom: var(--sp-4); } .drawer__title { font-size: var(--fs-note); letter-spacing: 0.18em; color: var(--c-muted); font-weight: 700; } .drawer__close { width: var(--tap); height: var(--tap); border: 1px solid var(--c-line-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .drawer__group + .drawer__group { margin-top: var(--sp-5); } .drawer__group-title { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.12em; color: var(--c-muted); margin-bottom: var(--sp-2); } .drawer__list { border-top: 1px solid var(--c-line); } .drawer__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 50px; padding: 12px 4px; border-bottom: 1px solid var(--c-line); font-size: var(--fs-body); font-weight: 700; color: var(--c-fg); } .drawer__link[aria-current="page"], .drawer__link[aria-current="true"] { color: var(--c-accent-deep); } .drawer__link::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.55; flex: none; } .drawer__contact { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); } .drawer__meta { margin-top: var(--sp-5); font-size: var(--fs-note); color: var(--c-fg-2); line-height: 1.7; } /* ============ breadcrumb（下層ページの現在地） ============ */ .breadcrumb { border-bottom: 1px solid var(--c-line); background: var(--c-surface); } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-block: var(--sp-2); font-size: var(--fs-note); color: var(--c-muted); } .breadcrumb__list li { display: flex; align-items: center; gap: 10px; min-height: var(--tap); } .breadcrumb__list li + li::before { content: ""; width: 6px; height: 6px; border-right: 1px solid var(--c-line-strong); border-top: 1px solid var(--c-line-strong); transform: rotate(45deg); } /* インラインリンクのタップ領域 44px（CANON） */ .breadcrumb a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); justify-content: center; padding-inline: 6px; margin-inline: -6px; } .breadcrumb [aria-current="page"] { color: var(--c-fg); font-weight: 700; } /* ============ section ============ */ .section { padding-block: var(--sp-8); } .section--tight { padding-block: var(--sp-7); } .section--alt { background: var(--c-surface); } .section + .section { border-top: 1px solid var(--c-line); } /* 1ページ型はセクション区切りが情報の切れ目そのものになるため、番号つきの見出しで階層を明示する。 */ .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin-bottom: var(--sp-6); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line-strong); } .section-head__main { max-width: 46em; } .section-head__eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.16em; color: var(--c-accent-deep); margin-bottom: 6px; } .section-head__index { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 24px; padding-inline: 6px; border-radius: var(--radius); background: var(--c-accent-deep); color: var(--c-accent-ink); /* 注記の最小サイズ（14px）を下回らせない（MASTER §0） */ font-size: var(--fs-note); letter-spacing: 0.04em; } .section-head__title { font-size: var(--fs-h2); } .section-head__lead { margin-top: var(--sp-3); color: var(--c-fg-2); font-size: var(--fs-lead); } .section-head--plain { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--sp-4); } .page-head { padding-block: var(--sp-7) var(--sp-6); border-bottom: 1px solid var(--c-line); background: var(--c-surface); } .page-head__title { font-size: var(--fs-h1); } .page-head__lead { margin-top: var(--sp-4); color: var(--c-fg-2); font-size: var(--fs-lead); max-width: 48em; } /* ============ card / grid ============ */ .grid { display: grid; gap: var(--sp-4); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .media { position: relative; display: block; background: var(--c-surface-3); overflow: hidden; } .media img { width: 100%; height: 100%; object-fit: cover; } .media--3x4 { aspect-ratio: 3 / 4; } .media--4x3 { aspect-ratio: 4 / 3; } .media--16x9 { aspect-ratio: 16 / 9; } /* カード全体をクリック可能にする（重複リンクを作らずタップ領域を確保する） */ .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tag { display: inline-flex; align-items: center; border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 3px 9px; font-size: var(--fs-note); color: var(--c-fg-2); background: var(--c-surface); line-height: 1.5; } .tag--accent { border-color: var(--c-accent-line); color: var(--c-accent-deep); background: var(--c-accent-soft); font-weight: 700; } .tag--quiet { border-color: var(--c-line); color: var(--c-muted); background: var(--c-surface-2); } .status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c-off); } .status-dot--on { background: var(--c-ok); } /* 本文中の電話リンク。行の高さを変えずに 44px のタップ領域を確保する */ .tel-inline { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px; vertical-align: middle; text-decoration: underline; text-underline-offset: 3px; } /* ============ tabs ============ */ .tabs { display: flex; flex-wrap: wrap; /* 収まらない場合は折り返す（横スクロールで文字を切らない） */ gap: 4px; border-bottom: 1px solid var(--c-line-strong); } .tab { min-height: var(--tap); padding: 10px 16px; font-size: var(--fs-body); font-weight: 700; color: var(--c-fg-2); border-bottom: 3px solid transparent; white-space: nowrap; } .tab[aria-selected="true"] { color: var(--c-accent-deep); border-bottom-color: var(--c-accent); background: var(--c-accent-soft); } .tab:hover { color: var(--c-accent-deep); } .tab__sub { font-size: var(--fs-note); font-weight: 500; color: var(--c-muted); margin-left: 4px; } .tab[aria-selected="true"] .tab__sub { color: var(--c-accent-deep); } /* ============ chips (filter) ============ */ .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .chip { min-height: var(--tap); padding: 8px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--radius); font-size: var(--fs-body); font-weight: 700; color: var(--c-fg-2); background: var(--c-surface); display: inline-flex; align-items: center; gap: 6px; } .chip:hover { border-color: var(--c-accent); color: var(--c-accent-deep); } .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: var(--c-accent-ink); } /* ============ table ============ */ .table-wrap { overflow-x: auto; } .data-table { border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; font-size: var(--fs-body); background: var(--c-surface); } .data-table caption { text-align: left; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-note); color: var(--c-muted); } .data-table th, .data-table td { padding: 13px var(--sp-4); border-bottom: 1px solid var(--c-line); line-height: 1.5; vertical-align: top; } .data-table thead th { background: var(--c-surface-2); font-size: var(--fs-note); letter-spacing: 0.08em; color: var(--c-fg-2); font-weight: 700; white-space: nowrap; } .data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; } .data-table tbody th { font-weight: 700; white-space: nowrap; } .data-table .num { white-space: nowrap; text-align: right; } .data-table .note-cell { color: var(--c-fg-2); font-size: var(--fs-note); } .def-list { display: grid; gap: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); } .def-list__row { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-bottom: 1px solid var(--c-line); } .def-list__row:last-child { border-bottom: 0; } .def-list__key { background: var(--c-surface-2); padding: 13px var(--sp-4); font-size: var(--fs-body); font-weight: 700; border-right: 1px solid var(--c-line); } .def-list__val { padding: 13px var(--sp-4); font-size: var(--fs-body); color: var(--c-fg-2); line-height: 1.7; } .def-list__val a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); } /* ============ accordion ============ 更新タイムライン（イベント・お知らせ）とFAQの本文をここで読み終われるようにする。 */ .accordion { border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; background: var(--c-surface); } .accordion__item + .accordion__item { border-top: 1px solid var(--c-line); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 56px; padding: 14px var(--sp-4); text-align: left; font-size: var(--fs-body); font-weight: 700; line-height: 1.5; color: var(--c-fg); } .accordion__trigger:hover { color: var(--c-accent-deep); background: var(--c-surface-2); } .accordion__trigger[aria-expanded="true"] { background: var(--c-accent-soft); } .accordion__q { flex: none; min-width: 28px; height: 26px; padding-inline: 5px; border-radius: var(--radius); background: var(--c-accent-deep); color: var(--c-accent-ink); font-size: var(--fs-note); font-weight: 700; display: flex; align-items: center; justify-content: center; } .accordion__label { flex: 1; } .accordion__meta { flex: none; font-size: var(--fs-note); color: var(--c-muted); font-weight: 700; white-space: nowrap; } .accordion__icon { flex: none; width: 20px; height: 20px; position: relative; } .accordion__icon::before, .accordion__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .accordion__icon::before { left: 0; top: 9px; width: 20px; height: 2px; } .accordion__icon::after { left: 9px; top: 0; width: 2px; height: 20px; } .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: scaleY(0); opacity: 0; } .accordion__panel { padding: var(--sp-4); border-top: 1px solid var(--c-line); color: var(--c-fg-2); } .accordion__panel p + p { margin-top: var(--sp-3); } /* ============ modal ============ */ .overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(34, 34, 34, 0.62); } .modal { width: min(620px, 100%); max-height: min(86vh, 900px); background: var(--c-surface); border: 1px solid var(--c-fg); border-radius: var(--radius); box-shadow: var(--shadow-1); display: flex; flex-direction: column; overflow: hidden; } .modal--person { width: min(560px, 100%); } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border-bottom: 1px solid var(--c-line); } .modal__title { font-size: var(--fs-h3); } .modal__close { flex: none; width: var(--tap); height: var(--tap); border: 1px solid var(--c-line-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .modal__body { padding: var(--sp-5); overflow-y: auto; } .modal__foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); display: flex; gap: var(--sp-3); justify-content: flex-end; flex-wrap: wrap; } /* ============ form ============ */ .form { display: grid; gap: var(--sp-5); } .field { display: grid; gap: 8px; } .field__label { font-size: var(--fs-body); font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .field__req { font-size: var(--fs-note); font-weight: 700; color: var(--c-accent-ink); background: var(--c-accent-deep); border-radius: var(--radius); padding: 1px 8px; } .field__opt { font-size: var(--fs-note); font-weight: 700; color: var(--c-muted); border: 1px solid var(--c-line-strong); border-radius: var(--radius); padding: 1px 8px; } .field__hint { font-size: var(--fs-note); color: var(--c-muted); line-height: 1.6; } .field__error { font-size: var(--fs-note); color: var(--c-alert); font-weight: 700; display: flex; gap: 6px; align-items: flex-start; line-height: 1.6; } .field__error::before { content: "！"; flex: none; } .input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 11px 13px; background: var(--c-surface); border: 1px solid var(--c-line-strong); border-radius: var(--radius); color: var(--c-fg); font-size: var(--fs-body); line-height: 1.5; } .textarea { min-height: 132px; resize: vertical; } .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-fg-2) 50%), linear-gradient(135deg, var(--c-fg-2) 50%, transparent 50%); background-position: right 20px center, right 14px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } .input::placeholder, .textarea::placeholder { color: #7C776F; } .input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent-deep); } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-alert); background: var(--c-alert-soft); } /* チェックボックスは包む label でタップ44pxを確保する（CANON） */ .checkline { display: block; } .checkline__label { display: flex; gap: 10px; align-items: flex-start; min-height: var(--tap); padding-block: 6px; font-size: var(--fs-body); line-height: 1.6; cursor: pointer; } .checkline input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--c-accent-deep); flex: none; } .form-error-summary { border: 1px solid var(--c-alert); background: var(--c-alert-soft); border-radius: var(--radius); padding: var(--sp-4); } .form-error-summary__title { font-size: var(--fs-body); font-weight: 700; color: var(--c-alert); margin-bottom: 8px; } .form-error-summary ul { display: grid; gap: 6px; } .form-error-summary a { text-decoration: underline; text-underline-offset: 3px; font-size: var(--fs-body); } .form-note { border: 1px solid var(--c-line); border-radius: var(--radius); padding: var(--sp-4); background: var(--c-surface-2); font-size: var(--fs-note); color: var(--c-fg-2); line-height: 1.7; } .confirm-list { display: grid; gap: 0; border: 1px solid var(--c-line-strong); border-radius: var(--radius); overflow: hidden; } .confirm-list__row { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-bottom: 1px solid var(--c-line); } .confirm-list__row:last-child { border-bottom: 0; } .confirm-list__key { background: var(--c-surface-2); padding: 12px var(--sp-4); font-size: var(--fs-body); font-weight: 700; } .confirm-list__val { padding: 12px var(--sp-4); font-size: var(--fs-body); color: var(--c-fg-2); word-break: break-word; } /* ============ notice / callout ============ */ .notice-list { display: grid; gap: var(--sp-3); } .notice-list li { position: relative; padding-left: 20px; font-size: var(--fs-note); color: var(--c-fg-2); line-height: 1.75; } .notice-list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); } .callout { border: 1px solid var(--c-accent-line); border-left: 4px solid var(--c-accent); background: var(--c-accent-soft); border-radius: var(--radius); padding: var(--sp-5); } .callout__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); } .callout p { font-size: var(--fs-body); color: var(--c-fg); } .empty-state { border: 1px dashed var(--c-line-strong); border-radius: var(--radius); padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--c-fg-2); background: var(--c-surface); } .empty-state__title { font-size: var(--fs-h4); color: var(--c-fg); margin-bottom: var(--sp-3); } /* ============ footer ============ */ .site-footer { background: var(--c-ink-panel); color: var(--c-on-ink); padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); } .site-footer a { color: var(--c-on-ink); } .site-footer a:hover { color: #FFFFFF; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-7) var(--sp-6); } .footer-brand__name { font-size: var(--fs-h3); letter-spacing: 0.06em; } .footer-brand__sub { font-size: var(--fs-note); color: var(--c-on-ink-2); margin-top: 4px; } .footer-info { margin-top: var(--sp-4); display: grid; gap: 10px; font-size: var(--fs-body); color: var(--c-on-ink-2); } .footer-info dt { font-size: var(--fs-note); color: var(--c-on-ink-2); letter-spacing: 0.08em; } .footer-info dd { margin: 0 0 6px; line-height: 1.6; color: var(--c-on-ink); } .footer-info a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: var(--tap); } .footer-nav__title, .footer-notice__title { font-size: var(--fs-note); letter-spacing: 0.18em; color: var(--c-accent-line); font-weight: 700; margin-bottom: var(--sp-4); } .footer-nav__list { display: grid; gap: 2px; } .footer-nav__list a { display: flex; align-items: center; min-height: var(--tap); font-size: var(--fs-body); color: var(--c-on-ink-2); } .footer-nav__list a:hover { color: #FFFFFF; } .footer-nav__list a[aria-current="page"] { color: #FFFFFF; font-weight: 700; } .footer-nav__note { font-size: var(--fs-note); color: var(--c-on-ink-2); margin-top: var(--sp-3); line-height: 1.7; } .footer-notice { font-size: var(--fs-note); color: var(--c-on-ink-2); line-height: 1.8; } .footer-notice li + li { margin-top: 10px; } .footer-bottom { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(250, 249, 246, 0.2); display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: space-between; font-size: var(--fs-note); color: var(--c-on-ink-2); } .footer-demo { border: 1px solid rgba(250, 249, 246, 0.24); border-radius: var(--radius); padding: 10px var(--sp-4); font-size: var(--fs-note); color: var(--c-on-ink-2); line-height: 1.7; margin-top: var(--sp-5); } /* ============ mobile fixed CTA ============ SITE 96 は「出勤を最短で確認して連絡する」テンプレートのため、 業種ファイル §2 が許す TODAY を1枠目に置き、残りを連絡手段にする （81 は移動をアンカーナビへ寄せて固定CTAを連絡手段だけにしており、そこが逆になる）。 トップでは #today へのページ内移動、下層ページでは schedule.html へ遷移する。 */ .mobile-cta { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-cta); background: var(--c-surface); border-top: 1px solid var(--c-fg); padding-bottom: env(safe-area-inset-bottom, 0px); } /* 項目は data-feature で消える可能性があるため、固定のグリッド列数ではなく flex で等分する （消えた列が空欄として残らないようにする）。最後の枠＝主要CTAだけ 1.5 倍。 */ .mobile-cta__list { display: flex; } .mobile-cta__list > li { flex: 1 1 0; min-width: 0; display: flex; } .mobile-cta__list > li:last-child { flex: 1.5 1 0; } .mobile-cta__item { width: 100%; min-height: var(--h-cta); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-note); font-weight: 700; color: var(--c-fg); border-right: 1px solid var(--c-line); padding: 5px 4px; line-height: 1.25; } .mobile-cta__list > li:last-child .mobile-cta__item { border-right: 0; } .mobile-cta__item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; } .mobile-cta__item--primary { background: var(--c-accent-deep); color: var(--c-accent-ink); } .mobile-cta__item--accent { color: var(--c-accent-deep); } /* ============ motion（fade-up 1種のみ） ============ */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .reveal.is-in { opacity: 1; transform: none; } /* JS無効時に reveal 要素が非表示のまま残らないようにする */ .no-js .reveal { opacity: 1; transform: none; } /* 営業状態バッジは JS が venue.hours から文言を入れる。 JS無効時は中身が空になるため、枠だけ残さず消す（営業時間は noscript が伝える）。 */ .no-js [data-open-state] { display: none; } /* アンカーナビの現在地はスクロール監視で決まる。JS無効時は現在地を示せないため出さない。 */ .no-js .anchor-nav { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1 !important; transform: none !important; } .drawer, .drawer-root__backdrop { transition: none; } }