/* カルトリ — サイト共通のスタイル デザインシステム「カルトリ」(docs/design-system の tokens.json・components)から書き出し、2026-09 のLP改善で整理したもの。 色の役割(色は :root の変数だけで指定する。ルールの中に色の値を直接書かない) - navy(--surface-navy / --surface-navy-2) … 面と骨組み。ヘッダーの文字・濃い面・フッター・ロゴのタイル・SOAPの札 - coral … 主な申し込み(デモを申し込む)だけ。ほかの用途に使わない。明るい面では --coral-edge の縁を付ける - teal … リンクと操作できるものだけ。テキストリンク・チェックボックス・フォーカスリング・選択中の印・根拠の線 - icon … 飾りのアイコン(カード・機能・一覧のチェック・画面イメージの見出し)。押せるものと見分けるため、teal より落ち着いた色 - teal-light … 根拠のハイライトとブランドの印(主に濃い面の上) - amber … 画面イメージの「要確認」と、フォームの注意だけ - danger … 入力エラーだけ 影: --shadow-* のトークン(ボタンは --btn-highlight と --shadow-coral*)だけを使う。ほかの box-shadow の値を書かない。 影を付けるのは「押せるもの」(リンクのカード・ボタン)と、写真・画面イメージ・濃い面だけ。静的なカードは1pxの枠だけ。 文字: 大きさは役割の別名(--fs-display / page / section / card / item / sub / body / caption)で指定する。行の高さは --lh-* だけを使う。 骨組み: 12列(--cols)・列の溝 24px(--col-gap)。2列の並びは、右の列を8列目の線に揃える(1440px 幅で x=834)。 動き: html.kt-anim の下でだけ動かす。kt-anim は の小さなスクリプトが最初の描画の前に付け(「動きを減らす」設定でないとき)、 JS(karutori.js)が動き始めると html.kt-ready を付けて保つ。JS が3秒以内に動かなければ kt-anim は外れ、すべて止まった見た目になる。 同じスクリプトが html.kt-menu-ready も最初の描画の前に付ける(ヘッダーが後から組み替わってずれないように。JS が動かなければ同じく外れる)。 ページ内リンクのなめらかなスクロールは、読み込みが終わってから JS が付ける html.kt-smooth の下だけ(別ページの #how へ来たときに、長く流れないように)。 ホバーの変化は、ホバーできる端末(hover: hover)だけ。浮く動きは細かいポインタのときだけ。 レスポンシブ: コンテナクエリ(.kt-section / .kt-hero-wrap / .kt-header / .kt-footer の幅)。ヘッダーは em(文字サイズの設定に追従する)。 */ :root { /* 明るい見た目の元の値(暗い見た目では下の役割の変数だけを差し替える。画面イメージはこの元の値を読み、いつも明るいまま) */ --l-surface-mist: #f1f5f5; --l-surface-white: #ffffff; --l-surface-tint: #eaf6f7; --l-surface-tint-2: #ddeef1; --l-ink: #13262b; --l-ink-muted: #3e4d50; --l-line: #dde3e4; --l-line-strong: #c3ccce; --l-line-control: #7f8e91; --l-teal: #155f69; --l-icon: #3f6f76; --l-on-teal: #ffffff; --l-danger: #a4163a; /* 面 */ --surface-mist: var(--l-surface-mist); --surface-white: var(--l-surface-white); --surface-tint: var(--l-surface-tint); --surface-tint-2: var(--l-surface-tint-2); --surface-navy: #0b2930; --surface-navy-2: #12353d; /* 文字 */ --ink: var(--l-ink); --ink-muted: var(--l-ink-muted); --ink-brand: var(--surface-navy); /* ロゴ・数字など、濃紺で塗る文字(暗い見た目では明るい文字) */ --on-navy: #ffffff; --on-navy-muted: #ffffffb8; /* ブランド・操作・状態 */ --teal-light: #8fdde8; --teal: var(--l-teal); --on-teal: var(--l-on-teal); --icon: var(--l-icon); --coral: #f0644b; --coral-hover: #f27560; --coral-edge: #b8432e; --coral-disabled: #f6a293; --on-coral: var(--surface-navy); --amber: #b7791f; --danger: var(--l-danger); --success: var(--teal); --link: var(--teal); --link-underline: rgba(21, 95, 105, .4); --marker: rgba(143, 221, 232, .55); /* 「取る」のマーカー */ --mbar-bg: rgba(255, 255, 255, .94); /* スマホ下部バーの面 */ --header-bg: rgba(255, 255, 255, .78); /* ヘッダーの面(うっすら透ける。後ろはぼかす) */ --header-shadow-rest: 0 1px 0 var(--line), 0 6px 16px -12px rgba(11, 41, 48, .22); /* ページ上端: ごく弱い影 */ --header-shadow: 0 1px 0 rgba(11, 41, 48, .06), 0 12px 28px -14px rgba(11, 41, 48, .32); /* スクロール後: 浮かせる */ --photo-tint: rgba(11, 41, 48, .12); /* 写真の上に重ねる薄い濃紺(写真の色味をサイトに寄せる) */ --scrim: rgba(11, 41, 48, .4); /* メニューを開いているあいだ、本文を暗くする */ /* 線 */ --line: var(--l-line); --line-strong: var(--l-line-strong); --line-control: var(--l-line-control); --hairline: 1px; --evidence-line: 1.5px; /* 文字の大きさ(rem。ブラウザの文字サイズ設定に追従する) */ --fs-12: .75rem; --fs-14: .875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-36: 2.25rem; --fs-40: 2.5rem; --fs-48: 3rem; --fs-56: 3.5rem; /* 文字の大きさの役割 */ --fs-display: var(--fs-56); /* トップの大見出し */ --fs-page: var(--fs-48); /* 下層ページの見出し */ --fs-section: var(--fs-40); /* セクションの見出し */ --fs-card: var(--fs-24); /* カード・手順の見出し */ --fs-item: var(--fs-18); /* 一覧の項目の見出し(機能・よくある質問・お問い合わせの小見出し) */ --fs-sub: var(--fs-18); /* リード */ --fs-body: var(--fs-16); /* 本文 */ --fs-caption: var(--fs-14); /* 注記・キャプション */ /* 行の高さ */ --lh-none: 1; --lh-tight: 1.25; /* 大きい見出し・数字 */ --lh-head: 1.4; /* 見出し・ボタン */ --lh-ui: 1.5; /* ラベル・ナビ・短い一行 */ --lh-note: 1.7; /* 注記・一覧・画面イメージ */ --lh-body: 1.8; /* リード・短い説明 */ --lh-copy: 1.9; /* 本文 */ /* アイコン */ --icon-xs: 14px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px; /* マスク用の図形(色は currentColor で塗る) */ --mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M13 5l7 7-7 7'/%3E%3C/svg%3E"); --mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); --mask-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); --mask-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 20h20z'/%3E%3Cpath d='M12 9v5M12 17h.01'/%3E%3C/svg%3E"); /* 余白 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* 角丸(小物 8 / 操作 12 / カード・画面・写真 24 / 面 40) */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 24px; --radius-xl: 40px; --radius-pill: 999px; /* 骨組み(12列・溝 24px) */ --container: 1200px; --cols: 12; --col-gap: var(--space-6); --header-height: 64px; --gutter-mobile: 16px; --measure: 38em; --font-sans: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif; /* フォーカス */ --focus-ring: 0 0 0 2px var(--surface-white), 0 0 0 4px var(--teal); --focus-ring-dark: 0 0 0 2px var(--surface-navy), 0 0 0 4px var(--teal-light); /* 影(色は濃紺 11,41,48・黒・コーラルの透過) */ --shadow-1: 0 1px 2px rgba(11, 41, 48, .06), 0 6px 16px -6px rgba(11, 41, 48, .12); --shadow-2: 0 2px 4px rgba(11, 41, 48, .08), 0 18px 36px -12px rgba(11, 41, 48, .22); --shadow-panel: 0 1px 2px rgba(11, 41, 48, .06), 0 28px 56px -36px rgba(11, 41, 48, .38); --shadow-on-navy: 0 2px 6px rgba(0, 0, 0, .22), 0 24px 48px -18px rgba(0, 0, 0, .55); --shadow-on-navy-sm: 0 2px 4px rgba(0, 0, 0, .18), 0 14px 28px -14px rgba(0, 0, 0, .5); --shadow-up: 0 -10px 28px -14px rgba(11, 41, 48, .35); --shadow-coral: 0 1px 2px rgba(11, 41, 48, .16), 0 8px 20px -10px rgba(240, 100, 75, .4); --shadow-coral-hover: 0 1px 2px rgba(11, 41, 48, .16), 0 12px 24px -12px rgba(240, 100, 75, .45); --shadow-coral-dark: 0 2px 4px rgba(0, 0, 0, .3); --shadow-coral-dark-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 10px 22px -10px rgba(240, 100, 75, .55); --shadow-pressed: inset 0 2px 4px rgba(11, 41, 48, .2); --shadow-invalid: 0 0 0 1px var(--danger); --shadow-ring-teal: 0 0 0 1px var(--teal); /* おすすめの料金の縁取り(暗い見た目) */ --btn-highlight: inset 0 1px 0 rgba(255, 255, 255, .2); /* 動き */ --ease-out: cubic-bezier(.2, .8, .2, 1); --dur-fast: 150ms; --dur-base: 220ms; --dur-slow: 450ms; color-scheme: light; } /* ============ 基本 ============ */ html { font-size: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-4)); text-autospace: normal; } html.kt-smooth { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html, html.kt-smooth { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); background: var(--surface-mist); color: var(--ink); font-size: var(--fs-body); line-height: var(--lh-copy); -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } .kt-cq { container-type: inline-size; } .kt-nowrap { display: inline-block; max-width: 100%; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; vertical-align: baseline; } /* 改行させない語(.kt-nowrap)は、ひとかたまりで次の行へ送る。枠より長いときだけ中で折り返す(はみ出さない)。 リンクの中では inline のまま(下線を切らない) */ a .kt-nowrap { display: inline; white-space: nowrap; } /* かぎ括弧で囲む語が入る文(注記・文書のページ)では inline のまま、語の中の句読点でだけ折り返す。 inline-block にすると、前後に必ず改行の機会ができ、「 が行末に残ったり 」が行頭に来たりする */ :is(.kt-head-note, .kt-doc) .kt-nowrap { display: inline; white-space: normal; word-break: keep-all; } .kt-ellipsis { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .kt-nowrap.kt-ellipsis { white-space: nowrap; } /* 1行で切って「…」を出す(折り返さない) */ .kt-accent { color: var(--teal); } .kt-muted { color: var(--ink-muted); } .kt-num { font-variant-numeric: tabular-nums; } .kt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 和文組版 .kt-h 見出し: 約物を詰め(palt)、文節で改行(auto-phrase / 未対応なら keep-all と )、行の長さを揃える(balance) .kt-lead リード・短い一文: 文節で改行し、最終行に1〜2文字だけ残さない(pretty) .kt-p 本文: 通常の和文の改行(1字単位)+ 厳しい禁則(strict)+ pretty 和文と英数字のあいだは text-autospace で少し空ける(対応ブラウザだけ) 長い英数字や URL で枠からはみ出さないよう、本文系は overflow-wrap: anywhere。見出しは break-word(文節の途中で割らない) */ .kt-h { font-feature-settings: "palt" 1; text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; line-break: strict; } .kt-lead { line-break: strict; text-wrap: pretty; } .kt-p { line-break: strict; text-wrap: pretty; } .kt-step-body, .kt-feat-d, .kt-route-d { text-wrap: pretty; } .kt-p, .kt-lead, .kt-card-body, .kt-faq-a, .kt-head-lead, .kt-price-note, .kt-hint, .kt-check, .kt-fig, .kt-doc, .kt-feat-d, .kt-route-d { overflow-wrap: anywhere; } .kt-ui { font-feature-settings: "palt" 1; } /* アイコン: 大きさが違っても線の太さは 1.75px で揃える */ .kt-icon { display: inline-block; flex: none; width: var(--icon-lg); height: var(--icon-lg); vertical-align: middle; stroke-width: 1.75px; } .kt-icon * { vector-effect: non-scaling-stroke; } /* 濃い面の中の色の読み替え */ .kt-dark, .kt-panel-navy, .kt-panel-navy2, .kt-card-navy2 { color: var(--on-navy); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2, .kt-card-navy2) .kt-muted { color: var(--on-navy-muted); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2, .kt-card-navy2) .kt-accent { color: var(--teal-light); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) a:not(.kt-btn):not(.kt-route) { color: var(--on-navy); } /* ============ フォーカス(共通) ============ outline は透明にして残す(強制カラーモードでは outline が見える)。見た目のリングは box-shadow */ :focus-visible { outline: 2px solid transparent; outline-offset: 2px; } @media (forced-colors: active) { :focus-visible { outline: 3px solid CanvasText; outline-offset: 2px; } } /* 文中のリンク: 行の形を変えない輪郭線のフォーカス。ホバーでは下線を太くする */ :is(.kt-doc, .kt-hint, .kt-check, .kt-faq-a, .kt-stats-note) a { transition: color var(--dur-fast) var(--ease-out), text-decoration-thickness var(--dur-fast) var(--ease-out); } .kt-doc a:focus-visible, .kt-hint a:focus-visible, .kt-check a:focus-visible, .kt-faq-a a:focus-visible, .kt-stats-note a:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) :is(.kt-doc, .kt-hint, .kt-check, .kt-faq-a, .kt-stats-note) a:focus-visible { outline-color: var(--teal-light); } @media (hover: hover) { :is(.kt-doc, .kt-hint, .kt-check, .kt-faq-a) a:hover { text-decoration-thickness: 2px; } } /* ============ Logo ============ */ .kt-logo { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; white-space: nowrap; line-height: var(--lh-none); color: var(--ink-brand); border-radius: var(--radius-xs); transition: opacity var(--dur-fast) var(--ease-out); } .kt-header .kt-logo, .kt-footer .kt-logo { min-height: 44px; } .kt-mark { display: block; flex: none; } /* ロゴマークは確定済みの3本線(左半分が波、右半分が直線、3行目だけ短い)。形を変えないこと。 ティールの角丸タイルに波形を置く形は競合(medimo)と被るため使わない。色は currentColor で地に合わせる */ .kt-logo .kt-mark { color: var(--ink-brand); } .kt-logo-teal .kt-mark, .kt-appbar .kt-mark { color: var(--teal-light); } .kt-logo-name { font-size: var(--fs-20); font-weight: 700; letter-spacing: -0.01em; color: var(--ink-brand); font-feature-settings: "palt" 1; } .kt-logo-lg .kt-logo-name { font-size: var(--fs-24); } .kt-logo-teal .kt-logo-name { color: var(--on-navy); } .kt-logo:focus-visible { box-shadow: var(--focus-ring); } .kt-logo-teal:focus-visible { box-shadow: var(--focus-ring-dark); } @media (hover: hover) { .kt-logo:hover { opacity: .85; } } /* ============ Button ============ 高さは min-height(rem)。文字が大きくなっても、狭い幅でも、ボタンの中で折り返して枠からはみ出さない。 coral = 主な申し込み(大きいものは 20px の太字+矢印) / outline = 資料請求などの副ボタン(16px・一段低い) / text = 矢印つきのテキストリンク */ .kt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-height: 3rem; height: auto; padding: var(--space-2) var(--space-6); border-radius: var(--radius-sm); border: var(--hairline) solid transparent; font: inherit; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-head); text-align: center; text-decoration: none; cursor: pointer; white-space: normal; text-wrap: balance; overflow-wrap: anywhere; font-feature-settings: "palt" 1; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } @supports (word-break: auto-phrase) { .kt-h, .kt-lead, .kt-fig, .kt-btn, .kt-route-t, .kt-feat-t, .kt-toc a, .kt-keyfacts dd, .kt-step-body, .kt-feat-d, .kt-route-d, .kt-footer-col a, .kt-subnav a, .kt-form-status > span, .kt-card-body, .kt-connect-for, .kt-stat-d, .kt-billing-body, .kt-faq-a { word-break: auto-phrase; } } .kt-btn .kt-icon { width: var(--icon-md); height: var(--icon-md); } .kt-btn-lg { min-height: 3.5rem; padding-inline: var(--space-8); font-size: var(--fs-18); } .kt-btn-block { width: 100%; } .kt-btn:focus-visible { box-shadow: var(--focus-ring); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn:focus-visible { box-shadow: var(--focus-ring-dark); } /* coral: 主な申し込み。明るい面では濃いコーラルの縁で面から切り出す */ .kt-btn-coral { background: var(--coral); background-image: none; color: var(--on-coral); border-color: var(--coral-edge); box-shadow: var(--btn-highlight), var(--shadow-coral); } .kt-btn-coral:active { box-shadow: var(--shadow-pressed); } .kt-btn-coral:focus-visible { box-shadow: var(--focus-ring), var(--shadow-coral); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-coral { border-color: var(--coral); box-shadow: var(--btn-highlight), var(--shadow-coral-dark); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-coral:focus-visible { box-shadow: var(--focus-ring-dark), var(--shadow-coral-dark); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-coral:active { box-shadow: var(--shadow-pressed); } /* 大きい申し込みボタン: 20px の太字(大きな文字の基準を満たす)と、右向きの矢印 */ .kt-btn-coral.kt-btn-lg { font-size: var(--fs-20); } .kt-btn-coral.kt-btn-lg::after { content: ""; flex: none; width: var(--icon-md); height: var(--icon-md); background-color: currentColor; -webkit-mask: var(--mask-arrow) center / contain no-repeat; mask: var(--mask-arrow) center / contain no-repeat; transition: transform var(--dur-fast) var(--ease-out); } /* outline: 副ボタン。白地では白い面+濃紺の枠(影なし)、濃い面では枠だけ。大きいものも 16px・高さ 3rem に抑えて、申し込みより一段低く見せる */ .kt-btn-outline { background: var(--surface-white); color: var(--ink-brand); border-color: var(--ink-brand); box-shadow: none; } .kt-btn-outline.kt-btn-lg { min-height: 3rem; font-size: var(--fs-16); padding-inline: var(--space-6); } .kt-btn-outline:active { background-color: var(--surface-tint); box-shadow: var(--shadow-pressed); } .kt-btn-outline:focus-visible { box-shadow: var(--focus-ring); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-outline { background: transparent; color: var(--on-navy); border-color: var(--on-navy-muted); box-shadow: none; } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-outline:focus-visible { box-shadow: var(--focus-ring-dark); } /* text: 矢印つきのテキストリンク。左右の余白なしで、文字の頭を列の端に揃える(押せる高さは 44px) */ .kt-btn-text { background: transparent; border-color: transparent; color: var(--teal); min-height: 44px; padding: 0; border-radius: var(--radius-xs); white-space: normal; text-align: left; justify-content: flex-start; } .kt-btn-text .kt-icon { transition: transform var(--dur-fast) var(--ease-out); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-text { color: var(--on-navy); } /* ホバーできる端末だけ: 色が変わる。細かいポインタでは浮く・矢印が進む */ @media (hover: hover) { .kt-btn-text:hover { text-decoration: underline; text-underline-offset: 4px; } .kt-btn-coral:hover { background-color: var(--coral-hover); } .kt-btn-outline:hover { background-color: var(--surface-tint); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-outline:hover { background-color: var(--surface-navy-2); border-color: var(--on-navy); } } @media (hover: hover) and (pointer: fine) { .kt-btn-coral:hover { transform: translateY(-2px); box-shadow: var(--btn-highlight), var(--shadow-coral-hover); } :is(.kt-on-dark, .kt-dark *, .kt-panel-navy *, .kt-panel-navy2 *).kt-btn-coral:hover { box-shadow: var(--btn-highlight), var(--shadow-coral-dark-hover); } .kt-btn-coral:active, .kt-btn-outline:active { transform: translateY(1px); } .kt-btn-text:hover .kt-icon, .kt-btn-coral.kt-btn-lg:hover::after { transform: translateX(4px); } } /* 指で押したときの手応え */ @media (any-pointer: coarse) { .kt-btn:active { filter: brightness(.95); } } /* 押せない状態(送信中)。薄くせず、コーラルは淡い色に置き換える(文字のコントラストを保つ) */ .kt-btn:disabled, .kt-btn[aria-disabled="true"] { opacity: 1; cursor: progress; transform: none !important; box-shadow: none; filter: none; } .kt-btn-coral:disabled, .kt-btn-coral[aria-disabled="true"] { background-color: var(--coral-disabled); border-color: var(--coral-disabled); color: var(--on-coral); } .kt-btn-coral.kt-btn-lg:disabled::after, .kt-btn-coral.kt-btn-lg[aria-disabled="true"]::after { display: none; } /* ============ Badge ============ */ .kt-badge { display: inline-flex; align-items: center; gap: var(--space-1); box-sizing: border-box; min-height: 2em; height: auto; padding: .15em var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.02em; line-height: var(--lh-none); border: var(--hairline) solid var(--line-strong); color: var(--ink-muted); background: var(--surface-white); white-space: nowrap; font-feature-settings: "palt" 1; } .kt-badge .kt-icon { width: var(--icon-xs); height: var(--icon-xs); } .kt-badge-review { border-color: var(--amber); color: var(--ink); } .kt-badge-review .kt-icon { color: var(--amber); } .kt-badge-soon { background: var(--surface-tint); border-color: var(--line-strong); color: var(--ink); } .kt-badge-soon .kt-icon { color: var(--icon); } .kt-badge-recommend { background: var(--surface-navy); border-color: var(--surface-navy); color: var(--on-navy); } :is(.kt-dark, .kt-panel-navy, .kt-card-navy2, .kt-price-rec) .kt-badge-recommend { background: transparent; border-color: var(--teal-light); color: var(--teal-light); } .kt-badge-neutral .kt-icon { color: var(--icon); } /* カードの見出しの末尾に付ける状態の札(「提供準備中」など)。見出しの最後の行の中ほどに置く */ .kt-title-badge { margin-left: var(--space-2); vertical-align: .15em; } /* ============ CheckList ============ */ .kt-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .kt-checks li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-16); line-height: var(--lh-note); } .kt-checks .kt-icon { color: var(--icon); margin-top: 1px; } :is(.kt-on-dark, .kt-dark, .kt-panel-navy, .kt-panel-navy2, .kt-card-navy2, .kt-price-rec) .kt-checks .kt-icon, .kt-checks.kt-on-dark .kt-icon { color: var(--teal-light); } /* ============ BedTag(実機のベッド札) ============ */ .kt-bed { display: inline-flex; align-items: baseline; gap: 1px; box-sizing: border-box; padding: var(--space-1) var(--space-2); border-left: 3px solid var(--teal); border-radius: var(--radius-xs); background: var(--surface-tint); color: var(--ink-brand); font-family: "Inter", var(--font-sans); font-weight: 700; font-size: var(--fs-16); line-height: var(--lh-ui); font-feature-settings: "zero" 1, "tnum" 1; white-space: nowrap; } .kt-bed small { font-size: var(--fs-14); font-weight: 600; color: var(--teal); } /* ============ Header ============ 60em(960px)より広い: ナビを横一列(短い名前)+ 申し込みボタン。 60em 以下: ナビは「メニュー」ボタンで開くシート(html.kt-menu-ready のときだけ)。シートの中では長い名前(.kt-nav-long)も出す。 kt-menu-ready は のスクリプトが最初の描画の前に付ける。JSが動かなければ外れ、ナビは2段目に折り返して出る。 30em(480px)以下: ヘッダーの申し込みボタンは隠す(シートの中と下部バーにある)。 区切りは em なので、ブラウザの文字サイズを大きくしていると、早めにメニューへ切り替わる */ .kt-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; container-type: inline-size; background: var(--surface-white); border-bottom: var(--hairline) solid var(--line); } .kt-header-in { box-sizing: border-box; max-width: calc(var(--container) + 48px); height: var(--header-height); margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; gap: var(--space-8); } /* ヘッダーの立体感: うっすら透ける面+後ろをぼかす。スクロールしたら(html.kt-scrolled)影を強めて浮かせる。 ぼかしが使えないブラウザ・「透明度を下げる」設定・メニューを開いているときは、これまでどおり不透明の白 */ @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .kt-header { background: var(--header-bg); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); } } .kt-header { border-bottom-color: transparent; box-shadow: var(--header-shadow-rest); transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } html.kt-scrolled .kt-header { box-shadow: var(--header-shadow); } html.kt-menu-open .kt-header { background: var(--surface-white); } @media (prefers-reduced-transparency: reduce) { .kt-header { background: var(--surface-white) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } @media (forced-colors: active) { .kt-header { border-bottom: 1px solid CanvasText; } } .kt-nav { display: flex; align-items: center; gap: var(--space-6); margin-left: auto; min-width: 0; } .kt-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-xs); font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-ui); color: var(--ink); text-decoration: none; white-space: nowrap; font-feature-settings: "palt" 1; transition: color var(--dur-fast) var(--ease-out); } .kt-nav-link:is([aria-current="page"], [aria-current="true"]) { color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; } .kt-nav-link:focus-visible { box-shadow: var(--focus-ring); } .kt-nav-cta, .kt-menu-btn { display: none; } /* ナビの長い名前の続き(「安全性」→「安全性の仕組み」)。横一列のバーでは隠し、メニューのシートでだけ出す */ .kt-nav-long { display: none; } .kt-header-cta { flex: none; min-height: 44px; height: 44px; padding: 0 var(--space-4); white-space: nowrap; } .kt-header .kt-logo { flex: none; } /* メニューボタン: 「メニュー ⌄」→ 開いているときは「閉じる ×」。幅は開け閉めで変わらない(7.5em) */ .kt-menu-btn { flex: none; align-items: center; justify-content: center; gap: var(--space-2); box-sizing: border-box; min-width: 7.5em; min-height: 44px; padding: 0 var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-white); color: var(--ink); font: inherit; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-none); white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .kt-menu-btn:focus-visible { box-shadow: var(--focus-ring); } .kt-menu-icon { display: block; flex: none; order: 1; width: var(--icon-md); height: var(--icon-md); background-color: currentColor; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; } .kt-menu-btn[aria-expanded="true"] .kt-menu-icon { -webkit-mask-image: var(--mask-close); mask-image: var(--mask-close); } @media (hover: hover) { .kt-nav-link:hover { color: var(--teal); } .kt-menu-btn:hover { background-color: var(--surface-tint); } } @container (max-width: 60em) { /* JSが無いとき: ナビをロゴの下の2段目に折り返して出す */ html:not(.kt-menu-ready) .kt-header-in { height: auto; min-height: var(--header-height); flex-wrap: wrap; row-gap: 0; } html:not(.kt-menu-ready) .kt-header .kt-logo { min-height: var(--header-height); } html:not(.kt-menu-ready) .kt-header-cta { margin-left: auto; } html:not(.kt-menu-ready) .kt-nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; margin-left: 0; padding-bottom: var(--space-2); gap: 0 var(--space-6); } /* JSがあるとき: メニューボタンで開くシート。いつも組んでおき、閉じているあいだは見えない・押せない・読まれない(visibility) */ html.kt-menu-ready .kt-menu-btn { display: inline-flex; } html.kt-menu-ready .kt-header-in { gap: var(--space-3); } html.kt-menu-ready .kt-header .kt-logo { margin-right: auto; } html.kt-menu-ready .kt-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; position: absolute; top: 100%; left: 0; right: 0; box-sizing: border-box; margin: 0; max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow: auto; overscroll-behavior: contain; padding: var(--space-2) var(--space-6) var(--space-6); background: var(--surface-white); border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); box-shadow: var(--shadow-2); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } html.kt-menu-ready .kt-header.is-open .kt-nav { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; } /* シートの中の項目は block(長い名前の続き .kt-nav-long を同じ行の文字として読ませる。flex だと別の塊になり、読み上げで間が空く) */ html.kt-menu-ready .kt-nav-link { display: block; box-sizing: border-box; min-height: 56px; margin: 0; padding: calc((56px - var(--lh-ui) * 1em) / 2) var(--space-2); border-radius: 0; border-bottom: var(--hairline) solid var(--line); white-space: normal; } html.kt-menu-ready .kt-nav-link:focus-visible { border-radius: var(--radius-xs); } html.kt-menu-ready .kt-nav-cta { display: flex; width: 100%; margin-top: var(--space-4); white-space: nowrap; } html.kt-menu-ready .kt-nav-long { display: inline; } } @container (max-width: 40em) { .kt-header-in { padding: 0 var(--gutter-mobile); gap: var(--space-4); } html.kt-menu-ready .kt-nav { padding-inline: var(--gutter-mobile); } } @container (max-width: 30em) { html.kt-menu-ready .kt-header-cta { display: none; } } /* とても狭いとき(スマホで文字を大きくしているとき): メニューボタンは記号だけにする(名前は読み上げ用に残す) */ @container (max-width: 19.9375em) { .kt-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .kt-menu-btn { min-width: 44px; padding-inline: var(--space-2); } } /* シートが開いているあいだ: 本文を暗くし(押すと閉じる)、本文のスクロールを止め、スマホの下部バーを隠す */ html.kt-menu-open { overflow: hidden; } html.kt-menu-open body::after { content: ""; position: fixed; inset: var(--header-height) 0 0; z-index: 9; background: var(--scrim); } html.kt-menu-open .kt-mbar { visibility: hidden; } /* ============ Panel(セクションの器) ============ */ .kt-section { container-type: inline-size; } .kt-section-in { box-sizing: border-box; max-width: calc(var(--container) + 48px); margin: 0 auto; padding: 0 var(--space-6); } .kt-panel { box-sizing: border-box; position: relative; padding: var(--space-16); border-radius: var(--radius-xl); } .kt-panel-r-xl { border-radius: var(--radius-xl); padding: var(--space-24) var(--space-16); } .kt-panel-navy { background: var(--surface-navy); box-shadow: var(--shadow-panel); } .kt-panel-navy2 { background: var(--surface-navy-2); } .kt-panel-tint { background: var(--surface-tint); color: var(--ink); } .kt-panel-white { background: var(--surface-white); color: var(--ink); border: var(--hairline) solid var(--line); box-shadow: none; } .kt-panel-plain { padding: 0; border-radius: 0; } /* 白・淡い・濃紺の面の左右の余白を「1列+溝」にして、面の中身を12列の2列目の線から始める(1440px 幅で x=222)。 濃紺の面の中のカード3枚は 316px 幅になるので、カードの左右の余白を 24px にして本文の幅を保つ。 枠のある面(白、暗い見た目の濃紺)は、枠の 1px を余白から引く */ @container (min-width: 901px) { .kt-panel-tint:not(.kt-closing) { padding-inline: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) + var(--col-gap)); } .kt-panel-white { padding-inline: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) + var(--col-gap) - var(--hairline)); } .kt-panel-navy:not(.kt-panel-r-xl) { padding-inline: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) + var(--col-gap) - var(--panel-edge, 0px)); } .kt-panel-navy:not(.kt-panel-r-xl) .kt-grid > .kt-card { padding-inline: var(--space-6); } } @container (max-width: 640px) { .kt-section-in { padding: 0 var(--gutter-mobile); } .kt-panel, .kt-panel-r-xl { padding: var(--space-8) var(--space-6); border-radius: var(--radius-md); } .kt-panel-plain { padding: 0; border-radius: 0; } /* 濃紺の面の中のカードは本文が細りすぎるので、面とカードの左右の余白を詰める(ヒーローと締めの面は除く) */ .kt-panel-navy:not(.kt-panel-r-xl) { padding: var(--space-8) var(--space-4); } .kt-panel-navy .kt-card { padding: var(--space-6) var(--space-4); } } /* ============ Eyebrow(セクションの小見出し。根拠の線の印つき) ============ */ .kt-eyebrow { --eyebrow-c: var(--teal); display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); color: var(--ink-muted); font-feature-settings: "palt" 1; } .kt-eyebrow::before { content: ""; flex: none; width: 32px; height: 8px; background: radial-gradient(circle at calc(100% - 4px) 50%, var(--eyebrow-c) 3.5px, transparent 4px), linear-gradient(var(--eyebrow-c), var(--eyebrow-c)) left center / calc(100% - 6px) 2px no-repeat; } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2, .kt-card-navy2) .kt-eyebrow { --eyebrow-c: var(--teal-light); color: var(--on-navy-muted); } .kt-head-center .kt-eyebrow { justify-content: center; } /* ============ SectionHead ============ */ .kt-head { max-width: 40em; margin: 0 0 var(--space-12); } .kt-head-center { margin-left: auto; margin-right: auto; text-align: center; } .kt-head-title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; } .kt-head-title.kt-head-sm { font-size: var(--fs-32); line-height: var(--lh-head); } .kt-head-lead { margin: var(--space-4) 0 0; font-size: var(--fs-sub); line-height: var(--lh-body); color: var(--ink-muted); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-head-lead { color: var(--on-navy-muted); } @container (max-width: 640px) { .kt-head { margin-bottom: var(--space-6); } .kt-head-title { font-size: var(--fs-28); line-height: var(--lh-head); } .kt-head-title.kt-head-sm { font-size: var(--fs-24); } .kt-head-lead { font-size: var(--fs-16); line-height: var(--lh-copy); } } /* ============ 下層ページの頭(パンくず + 見出し + 右の図・一覧) ============ 見出し(h1)の上端は、どのページでも同じ高さに置く。小見出しの無いページは、小見出しの分(1行+12px)を空ける */ .kt-pagehead { padding-top: var(--space-4); } .kt-pagehead + * { margin-top: var(--space-12); } .kt-pagehead + .kt-contact { margin-top: 0; } .kt-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--ink-muted); } /* 押せる高さは 44px。上下の負の余白で、見た目の行の高さは変えない */ .kt-crumbs a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; padding-inline: var(--space-2); margin-inline: calc(-1 * var(--space-2)); color: var(--link); text-decoration: underline; text-decoration-color: var(--link-underline); text-underline-offset: 3px; border-radius: var(--radius-xs); transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); } .kt-crumbs a:hover { text-decoration-color: currentColor; } .kt-crumbs a:focus-visible { box-shadow: var(--focus-ring); } .kt-crumbs [aria-current] { color: var(--ink); font-weight: 600; } .kt-crumbs:has(+ .kt-subnav) { margin-bottom: var(--space-3); } .kt-pagehead-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; } .kt-pagehead-copy, .kt-pagehead-aside { min-width: 0; } @container (min-width: 901px) { .kt-pagehead-grid { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .kt-pagehead-copy { grid-column: 1 / 8; padding-right: var(--space-6); } .kt-pagehead-aside { grid-column: 8 / 13; align-self: start; } } .kt-page-title { margin: 0; font-size: var(--fs-page); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; } .kt-pagehead-copy > .kt-page-title:first-child, .kt-contact-intro > .kt-page-title:first-child { margin-top: calc(var(--fs-16) * var(--lh-ui) + var(--space-3)); } .kt-pagehead .kt-head-lead, .kt-contact-intro .kt-head-lead { margin-top: var(--space-6); max-width: 36em; } .kt-pagehead-copy > .kt-actions { margin-top: var(--space-8); } .kt-pagehead-copy > .kt-actions + *, .kt-pagehead-copy > .kt-badge, .kt-pagehead-copy > p:not(.kt-eyebrow):not(.kt-head-lead) { margin-top: var(--space-4); } /* ページの頭の申し込みボタンの下の注記 */ .kt-head-note { margin: var(--space-4) 0 0; max-width: 36em; font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--ink-muted); } @container (max-width: 640px) { .kt-page-title { font-size: var(--fs-36); line-height: var(--lh-head); } .kt-pagehead .kt-head-lead, .kt-contact-intro .kt-head-lead { margin-top: var(--space-4); } } /* 安全性とセキュリティを行き来するタブ(パンくずのすぐ下) */ .kt-subnav { display: flex; gap: var(--space-6); margin: 0 0 var(--space-6); border-bottom: var(--hairline) solid var(--line); } .kt-subnav a { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 44px; overflow-wrap: anywhere; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: var(--radius-xs) var(--radius-xs) 0 0; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); color: var(--ink-muted); text-decoration: none; font-feature-settings: "palt" 1; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .kt-subnav a:first-child { flex: none; } .kt-subnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); } .kt-subnav a:focus-visible { box-shadow: var(--focus-ring); } @media (hover: hover) { .kt-subnav a:not([aria-current="page"]):hover { color: var(--teal); } } @container (max-width: 25em) { .kt-subnav { gap: var(--space-4); } } /* このページの項目へ飛ぶリンク(安全性。広い幅ではカードが一度に見えるので出さない) */ .kt-jumps { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); } .kt-jumps a { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 var(--space-4); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-pill); background: var(--surface-white); color: var(--ink); font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-ui); text-decoration: none; font-feature-settings: "palt" 1; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .kt-jumps a:focus-visible { box-shadow: var(--focus-ring); } @media (hover: hover) { .kt-jumps a:hover { border-color: var(--teal); color: var(--teal); } } @container (min-width: 961px) { .kt-jumps { display: none; } } /* ============ Card ============ */ .kt-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; } .kt-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .kt-card { box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--radius-md); padding: var(--space-8); background: var(--surface-white); border: var(--hairline) solid var(--line); color: var(--ink); box-shadow: none; } .kt-card-navy2 { background: var(--surface-navy-2); border-color: var(--surface-navy-2); color: var(--on-navy); box-shadow: none; } .kt-card-icon { width: var(--icon-xl); height: var(--icon-xl); color: var(--icon); margin-bottom: var(--space-4); } .kt-card-navy2 .kt-card-icon { color: var(--teal-light); } .kt-card-badge { margin: 0 0 var(--space-3); } .kt-card-title { margin: 0 0 var(--space-2); font-size: var(--fs-card); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; } .kt-card-body { margin: 0; font-size: var(--fs-body); line-height: var(--lh-copy); color: var(--ink-muted); } .kt-card-navy2 .kt-card-body { color: var(--on-navy-muted); } .kt-card-figure { margin-top: auto; padding-top: var(--space-6); display: flex; flex-direction: column; } .kt-card-figure > .kt-fig { flex: 0 0 auto; } /* 画面イメージは自分の高さのまま。余りはカードが持つ */ .kt-card .kt-img, .kt-card .kt-fig { border-radius: var(--radius-sm); } .kt-card .kt-fig:not(.kt-fig-sm) > .kt-appbar { border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .kt-card > .kt-img, .kt-img-3x2 { aspect-ratio: 3 / 2; } .kt-card > .kt-img:first-child { margin-bottom: var(--space-6); } .kt-card > .kt-chips { margin: 0 0 var(--space-3); } .kt-panel > .kt-img + .kt-grid { margin-top: var(--space-6); } @container (max-width: 640px) { .kt-grid { gap: var(--space-4); } .kt-card { padding: var(--space-6); } .kt-card-title, .kt-step-title { font-size: var(--fs-20); line-height: var(--lh-ui); } } /* リンクになっているカード(要約カード): これだけが浮いている。ホバーでさらに浮く */ a.kt-card { -webkit-tap-highlight-color: transparent; text-decoration: none; box-shadow: var(--shadow-1); transition: translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } a.kt-card:focus-visible { box-shadow: var(--focus-ring), var(--shadow-2); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) a.kt-card:focus-visible { box-shadow: var(--focus-ring-dark), var(--shadow-on-navy); } @media (hover: hover) { a.kt-card:hover { box-shadow: var(--shadow-2); } a.kt-card-navy2:hover { box-shadow: var(--shadow-on-navy); } a.kt-card:hover .kt-more { text-decoration: underline; text-underline-offset: 4px; } } /* 浮かせるのは transform ではなく translate(ふわっと出る .kt-reveal の transform と打ち消し合わないように) */ @media (hover: hover) and (pointer: fine) { a.kt-card:hover { translate: 0 -4px; } a.kt-card:hover .kt-more .kt-icon { transform: translateX(4px); } } /* 指で押したとき: 影を消して少し沈む(ブラウザの青い押し色は出さない) */ @media (any-pointer: coarse) { a.kt-card:active { box-shadow: none; border-color: var(--line-strong); translate: 0 1px; } } .kt-card > .kt-more { margin-top: auto; padding-top: var(--space-4); align-self: flex-start; } .kt-more-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); margin-top: var(--space-6); } .kt-panel + .kt-more-row { margin-top: var(--space-12); } .kt-more-row > .kt-p { flex-basis: 100%; margin: 0; } /* 画面イメージの付いたカードの並び(安全性・病棟): 900px 以上で2列、1200px 以上で3列。 行を4段(札・アイコン / 見出し / 本文 / 画面イメージ)に分けて横の並びで共有し、見出しと画面イメージの上端を同じ線に揃える。 2列のとき、奇数枚の最後の1枚は1列分の幅で中央に置く(病棟の3枚目) */ @container (min-width: 900px) { @supports (grid-template-rows: subgrid) { .kt-grid-fig { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; row-gap: 0; margin-bottom: calc(-1 * var(--space-6)); } .kt-grid-fig > .kt-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--space-6); } .kt-grid-fig > .kt-card > :is(.kt-card-badge, .kt-card-icon) { grid-row: 1; align-self: start; justify-self: start; } .kt-grid-fig > .kt-card > .kt-card-title { grid-row: 2; } .kt-grid-fig > .kt-card > .kt-card-body { grid-row: 3; } .kt-grid-fig > .kt-card > .kt-card-figure { grid-row: 4; margin-top: 0; align-self: stretch; } .kt-grid-fig > .kt-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--space-6)) / 2); } } } @container (min-width: 1200px) { .kt-grid-fig { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kt-grid-fig > .kt-card:last-child:nth-child(odd) { grid-column: auto; width: auto; justify-self: stretch; } } /* ============ TrustBand ============ 961px 以上: 12列の3列ずつ(1440px 幅で 120 / 426 / 732 / 1038)。区切りの線は列の線に置き、線の左右を 24px ずつ空ける */ .kt-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .kt-trust li { grid-column: span 3; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: var(--hairline) solid var(--line); } .kt-trust li:first-child { border-left: 0; padding-left: 0; } .kt-trust .kt-icon { color: var(--icon); width: var(--icon-xl); height: var(--icon-xl); } .kt-trust-t { display: block; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); font-feature-settings: "palt" 1; } .kt-trust-d { display: block; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); } @container (max-width: 960px) { .kt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: var(--space-6); } .kt-trust li { grid-column: auto; padding: var(--space-2) var(--space-6); } .kt-trust li:nth-child(odd) { border-left: 0; padding-left: 0; } } @container (max-width: 480px) { .kt-trust { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3); } .kt-trust li { border-left: 0; padding: 0; } } /* ============ Step ============ */ .kt-steps { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .kt-step { display: flex; flex-direction: column; } /* 番号の丸は文字の大きさに合わせて広がる(18px のとき 48px) */ .kt-step-n { display: grid; place-items: center; width: calc(48em / 18); height: calc(48em / 18); border-radius: var(--radius-pill); background: var(--surface-navy); color: var(--teal-light); font-family: "Inter", var(--font-sans); font-size: var(--fs-18); font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: var(--space-4); } .kt-step-title { margin: 0 0 var(--space-2); font-size: var(--fs-card); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; } @container (max-width: 640px) { .kt-step-title { font-size: var(--fs-20); line-height: var(--lh-ui); } } .kt-step-body { margin: 0; color: var(--ink-muted); } .kt-step-figure { margin-top: auto; padding-top: var(--space-6); display: flex; flex-direction: column; } .kt-step-figure > .kt-fig { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; } @container (min-width: 960px) { .kt-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; row-gap: 0; } @supports (grid-template-rows: subgrid) { .kt-step { display: grid; grid-row: span 4; grid-template-rows: subgrid; } .kt-step-n { justify-self: start; } .kt-step-figure { margin-top: 0; } } } /* 4ステップ版(料金の「ご利用開始までの流れ」): 1列 → 2列×2段(960px〜)。図が無いので行揃えは要らない */ .kt-steps-4 { list-style: none; margin: 0; padding: 0; } @container (min-width: 960px) { .kt-steps.kt-steps-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; row-gap: var(--space-8); } .kt-steps-4 .kt-step { display: flex; grid-row: auto; } } /* 文と画面イメージを左右に分ける手順(トップの使い方)をタブレット幅で: 1手順1行、文を左・画面を右に */ @container (min-width: 641px) and (max-width: 959px) { .kt-steps-split { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); } .kt-steps-split > .kt-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-8); align-items: start; } .kt-steps-split > .kt-step > :not(.kt-step-figure) { grid-column: 1; } .kt-steps-split > .kt-step > .kt-step-n { justify-self: start; } .kt-steps-split > .kt-step > .kt-step-figure { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; } } /* スマホ: 手順の番号の丸を見出しの左に置く */ @container (max-width: 640px) { .kt-steps .kt-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-4); align-items: start; } .kt-steps .kt-step-n { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; } .kt-steps .kt-step > :not(.kt-step-n) { grid-column: 2; } .kt-steps .kt-step-title { padding-top: calc((3rem - var(--lh-ui) * 1em) / 2); } } /* ============ StatRow ============ */ .kt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } .kt-stat { border-top: var(--hairline) solid var(--line-strong); padding-top: var(--space-4); } .kt-stat-v { font-family: "Inter", var(--font-sans); font-size: var(--fs-48); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--ink-brand); font-variant-numeric: tabular-nums; font-feature-settings: "palt" 1, "tnum" 1; text-autospace: no-autospace; } .kt-stat-l { font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); margin-top: var(--space-3); font-feature-settings: "palt" 1; } .kt-stat-d { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); margin-top: var(--space-1); } .kt-stats-note { max-width: none; box-sizing: border-box; margin: var(--space-6) 0 0; padding: var(--space-4) var(--space-6); font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); background: var(--surface-tint); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); } /* 12列のうち6列分・8列分の幅(1440px 幅で 588px / 792px) */ @container (min-width: 901px) { .kt-span-6 { max-width: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) * 6 + 5 * var(--col-gap)); } .kt-span-8 { max-width: calc((100% - (var(--cols) - 1) * var(--col-gap)) / var(--cols) * 8 + 7 * var(--col-gap)); } } @container (max-width: 640px) { .kt-stats { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .kt-stat-v { font-size: var(--fs-40); } .kt-stats-note { padding: var(--space-3) var(--space-4); } } /* ============ PriceCard ============ */ .kt-price { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-8); color: var(--ink); box-shadow: none; } .kt-price-rec { background: var(--surface-navy); border-color: var(--surface-navy); color: var(--on-navy); box-shadow: none; } .kt-price-name { margin: 0; display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-card); font-weight: 700; line-height: var(--lh-head); letter-spacing: -0.01em; font-feature-settings: "palt" 1; } .kt-price-amount { font-family: "Inter", var(--font-sans); font-size: var(--fs-40); font-weight: 700; letter-spacing: -0.01em; line-height: var(--lh-tight); font-variant-numeric: tabular-nums; font-feature-settings: "palt" 1; text-autospace: no-autospace; } /* 大きい数字の中の単位(円・件・つ)。数字の 6割の大きさ */ .kt-unit { font-size: .6em; margin-left: .06em; letter-spacing: 0; } .kt-price-amount small { font-size: var(--fs-16); font-weight: 600; letter-spacing: 0; margin-left: var(--space-1); color: var(--ink-muted); } .kt-price-rec .kt-price-amount small, .kt-price-rec .kt-price-note { color: var(--on-navy-muted); } .kt-price-note { margin: 0; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); } /* 4段目(チェックの一覧 / 基本のプランの一言): 罫線の上に置き、3枚で同じ行を使う */ .kt-price .kt-checks, .kt-price-extra { margin-top: var(--space-3); padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); } .kt-price-extra { margin-bottom: 0; font-size: var(--fs-16); line-height: var(--lh-note); color: var(--ink-muted); } .kt-price-rec .kt-checks { border-top-color: var(--surface-navy-2); } .kt-prices-terms { margin: var(--space-8) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--ink-muted); } /* 料金の3枚: 広い幅では3列(行の線を3枚で共有する)、900px 以下では1列。 1枚・2枚だけのときは、1枚 384px までの幅で中央に寄せる(901px 以上) */ .kt-grid:has(> .kt-price) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @container (min-width: 901px) { .kt-grid:has(> .kt-price:only-child) { grid-template-columns: minmax(0, 384px); justify-content: center; } .kt-grid:has(> .kt-price:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 384px)); justify-content: center; } } @container (max-width: 900px) { .kt-grid:has(> .kt-price) { grid-template-columns: minmax(0, 1fr); } } @container (min-width: 901px) { @supports (grid-template-rows: subgrid) { .kt-grid:has(> .kt-price) { grid-template-rows: repeat(4, auto); row-gap: var(--space-3); } .kt-grid > .kt-price { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-items: start; } } } @container (max-width: 640px) { .kt-grid:has(> .kt-price) { gap: var(--space-4); } .kt-price { padding: var(--space-6); } .kt-price-amount { font-size: var(--fs-32); } } /* ============ 料金の条件(Key facts) ============ */ .kt-keyfacts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-8) 0 0; } .kt-keyfacts > div { min-width: 0; padding-top: var(--space-3); border-top: var(--hairline) solid var(--line-strong); } .kt-keyfacts dt { font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-ui); color: var(--ink-muted); } .kt-keyfacts dd { margin: var(--space-1) 0 0; font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-head); color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "palt" 1; overflow-wrap: anywhere; } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-keyfacts > div { border-top-color: var(--surface-navy-2); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-keyfacts dt { color: var(--on-navy-muted); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-keyfacts dd { color: var(--on-navy); } /* 面の中の5つ(961px 以上): 12列に 2・2・2・2・4 列で置く(3つ目と5つ目の頭が、料金の2枚目・3枚目の列の線に揃う) */ @container (min-width: 961px) { .kt-panel > .kt-keyfacts { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .kt-panel > .kt-keyfacts > * { grid-column: span 2; } .kt-panel > .kt-keyfacts > :last-child { grid-column: span 4; } } .kt-keyfacts + .kt-actions { margin-top: var(--space-12); } @container (max-width: 960px) { .kt-keyfacts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container (max-width: 640px) { .kt-keyfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-6); } } /* ページの頭の右に置くときは、1列のカード */ .kt-pagehead-aside .kt-keyfacts { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: var(--space-3) var(--space-6); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); } .kt-pagehead-aside .kt-keyfacts > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--hairline) solid var(--line); } .kt-pagehead-aside .kt-keyfacts > div:first-child { border-top: 0; } .kt-pagehead-aside .kt-keyfacts dd { margin: 0; text-align: right; } /* ============ Faq ============ */ .kt-faq { max-width: 44em; border-top: var(--hairline) solid var(--line); } .kt-faq details { border-bottom: var(--hairline) solid var(--line); } .kt-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; font-size: var(--fs-item); font-weight: 600; line-height: var(--lh-ui); font-feature-settings: "palt" 1; border-radius: var(--radius-xs); transition: color var(--dur-fast) var(--ease-out); } .kt-faq summary::-webkit-details-marker { display: none; } .kt-faq summary .kt-icon { color: var(--teal); margin-top: 2px; transition: transform var(--dur-base) var(--ease-out), translate var(--dur-fast) var(--ease-out); } .kt-faq details[open] summary .kt-icon { transform: rotate(180deg); } .kt-faq summary:focus-visible { box-shadow: var(--focus-ring); } .kt-faq-q { font: inherit; margin: 0; } .kt-faq-a { margin: 0; padding: 0 0 var(--space-6); max-width: 40em; color: var(--ink-muted); } .kt-faq-a:has(+ .kt-faq-more) { padding-bottom: var(--space-2); } /* 答えの下の「詳しく見る」 */ .kt-faq-more { margin: 0; padding: 0 0 var(--space-6); } .kt-faq a { color: var(--link); text-underline-offset: 3px; } .kt-faq-todo { color: var(--ink-muted); } @media (hover: hover) { .kt-faq summary:hover { color: var(--teal); } } @media (hover: hover) and (pointer: fine) { .kt-faq summary:hover .kt-icon { translate: 0 2px; } } @container (max-width: 640px) { .kt-faq summary { padding-block: var(--space-3); font-size: var(--fs-16); } } /* よくある質問のページ: 分類ごとのまとまり */ .kt-faq-group + .kt-faq-group { margin-top: var(--space-12); } .kt-faq-group-title { margin: 0 0 var(--space-4); font-size: var(--fs-card); font-weight: 700; line-height: var(--lh-head); } /* ============ 左に見出し・目次、右に本文(トップの #faq・よくある質問・文書のページ) ============ 961px 以上: 12列の 1〜4列目が見出し・目次(追従する)、5〜12列目が本文 */ .kt-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } .kt-split-side, .kt-split-main { min-width: 0; } .kt-split .kt-faq { max-width: none; } .kt-split-side > .kt-head { margin-bottom: var(--space-6); } .kt-split-side > .kt-toc:first-child { margin-top: 0; } @container (max-width: 640px) { .kt-split { gap: var(--space-6); } } /* 960px 以下(1列): 見出しの下の「すべて見る」は、質問の後ろへ回す(よくある質問のページの目次は先頭のまま) */ @container (max-width: 960px) { .kt-split-side:has(> .kt-more-row) { display: contents; } .kt-split-side:has(> .kt-more-row) > .kt-head { margin-bottom: 0; } .kt-split-main { order: 1; } .kt-split-side > .kt-more-row { order: 2; margin-top: 0; } } @container (min-width: 961px) { .kt-split { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--space-12) var(--col-gap); align-items: start; } .kt-split-side { grid-column: 1 / 5; padding-right: var(--space-8); position: sticky; top: calc(var(--header-height) + var(--space-8)); } .kt-split-main { grid-column: 5 / 13; } } /* 文書のページ(プライバシーポリシー・セキュリティ): 本文は左の線に寄せ、1行を 42字ほどに保つ */ .kt-split-doc .kt-doc { margin: 0; max-width: 42em; } .kt-toc { display: grid; margin: var(--space-6) 0 0; } .kt-toc-t { margin: 0 0 var(--space-2); font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-ui); color: var(--ink-muted); } .kt-toc a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0; margin: 0; border-bottom: var(--hairline) solid var(--line); border-radius: 0; color: var(--ink); font-weight: 600; line-height: var(--lh-ui); text-decoration: none; font-feature-settings: "palt" 1; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .kt-toc a:focus-visible { box-shadow: var(--focus-ring); } @media (hover: hover) { .kt-toc a:hover { color: var(--teal); } } .kt-toc-n { flex: none; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; } /* ============ ImageSlot ============ 写真は彩度を少し落とし、薄い濃紺を重ねて、サイトの色に寄せる */ .kt-img { position: relative; display: block; width: 100%; overflow: hidden; box-sizing: border-box; border-radius: var(--radius-md); background: var(--line); border: var(--hairline) dashed var(--line-strong); } .kt-img-r-md { border-radius: var(--radius-md); } .kt-img-has { border: 0; background: var(--surface-navy); box-shadow: var(--shadow-1); } .kt-img-has::after { content: ""; position: absolute; inset: 0; background: var(--photo-tint); pointer-events: none; } /* カードや濃紺の面の中の写真には影を付けない */ .kt-card .kt-img-has, :is(.kt-panel-navy, .kt-panel-navy2) .kt-img-has { box-shadow: none; } .kt-img img { display: block; width: 100%; height: 100%; object-fit: cover; } .kt-img-has img { filter: saturate(.75); } /* 読み込めなかった写真は、壊れた画像の印を出さずに面だけ見せる(JSが is-broken を付ける) */ .kt-img img.is-broken { visibility: hidden; } .kt-img-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); padding: var(--space-4); text-align: center; font-family: "Inter", var(--font-sans); font-size: var(--fs-14); font-weight: 600; color: var(--ink-muted); } .kt-img-empty small { font-size: var(--fs-12); font-weight: 600; color: var(--ink-muted); } .kt-img-note { position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-3); padding: 2px var(--space-2); border-radius: var(--radius-xs); background: var(--surface-navy); color: var(--on-navy); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em; } /* ============ 転記の方法(トップの #connect・電子カルテのページ) ============ */ .kt-routes { display: grid; gap: var(--space-2); } .kt-route { display: grid; grid-template-columns: var(--icon-xl) minmax(0, 1fr) var(--icon-md); gap: var(--space-4); align-items: center; box-sizing: border-box; min-height: 64px; padding: var(--space-4) var(--space-6); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out); } .kt-route:focus-visible { box-shadow: var(--focus-ring); } .kt-route-icon { width: var(--icon-xl); height: var(--icon-xl); color: var(--icon); } .kt-route-text { display: block; min-width: 0; } .kt-route-t { display: block; font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); font-feature-settings: "palt" 1; text-wrap: pretty; } .kt-route-d { display: block; font-size: var(--fs-14); line-height: var(--lh-ui); color: var(--ink-muted); } .kt-route-arrow { width: var(--icon-md); height: var(--icon-md); color: var(--teal); transition: transform var(--dur-fast) var(--ease-out); } @media (hover: hover) { .kt-route:hover { border-color: var(--teal); } } @media (hover: hover) and (pointer: fine) { .kt-route:hover .kt-route-arrow { transform: translateX(4px); } /* このページの中へ飛ぶ行(下向きの矢印)は、下へ進む */ a.kt-route[href^="#"]:hover .kt-route-arrow { transform: translateY(4px); } } @container (max-width: 640px) { .kt-route { gap: var(--space-3); padding: var(--space-3) var(--space-4); } } .kt-routes-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--ink-muted); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-routes-legend { color: var(--on-navy-muted); } /* ============ 機能の一覧(外来のページ) ============ 1枚の白い面を罫線で区切る。1080px 以上は5列、641〜1079px は2列(最後の1つは横いっぱい)、640px 以下は1列。 行の高さが揃っても中身は上に詰める(align-content: start)ので、5つの見出しが同じ線に並ぶ */ .kt-featlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); overflow: hidden; } .kt-feat { display: grid; grid-template-columns: var(--icon-xl) minmax(0, 1fr); gap: var(--space-4); align-items: start; align-content: start; padding: var(--space-6); margin: -1px 0 0 -1px; border-top: var(--hairline) solid var(--line); border-left: var(--hairline) solid var(--line); } .kt-feat-icon { width: var(--icon-xl); height: var(--icon-xl); color: var(--icon); } .kt-feat-text { min-width: 0; } .kt-feat-t { margin: 0; font-size: var(--fs-item); font-weight: 700; line-height: var(--lh-ui); } .kt-feat-d { margin: var(--space-1) 0 0; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); } @container (min-width: 641px) { .kt-featlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt-feat:last-child:nth-child(odd) { grid-column: 1 / -1; } } @container (min-width: 1080px) { .kt-featlist { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kt-feat { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } .kt-feat:last-child:nth-child(odd) { grid-column: auto; } } .kt-featlist + * { margin-top: var(--space-6); } /* ============ Field(お問い合わせフォーム) ============ */ .kt-form { display: grid; gap: var(--space-6); } .kt-field { display: grid; gap: var(--space-2); } .kt-field-label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-ui); } .kt-req, .kt-opt { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 2em; height: auto; padding: 0 var(--space-3); border-radius: var(--radius-pill); font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.02em; line-height: var(--lh-none); white-space: nowrap; } .kt-req { background: var(--surface-navy); color: var(--on-navy); } .kt-opt { background: transparent; border: var(--hairline) solid var(--line-strong); color: var(--ink-muted); } .kt-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); border: var(--hairline) solid var(--line-control); border-radius: var(--radius-sm); background: var(--surface-white); color: var(--ink); font: inherit; font-size: var(--fs-16); line-height: var(--lh-ui); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .kt-input::placeholder { color: var(--ink-muted); opacity: 1; } textarea.kt-input { min-height: 144px; resize: vertical; } textarea.kt-input[rows="3"] { min-height: 104px; } .kt-field .kt-input { scroll-margin-top: var(--space-12); } .kt-select { position: relative; } .kt-select select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--icon-lg) + var(--space-6)); } /* 未選択(「選択してください」)のあいだは、入力済みの値と見分けられるよう淡い文字にする */ .kt-select select:has(option[value=""]:checked) { color: var(--ink-muted); } .kt-select option { color: var(--ink); } .kt-select .kt-icon { position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; } @media (hover: hover) { .kt-input:hover { border-color: var(--ink-muted); } .kt-check:hover .kt-box { border-color: var(--ink-muted); } } .kt-input:focus-visible, .kt-check input:focus-visible + .kt-box { box-shadow: var(--focus-ring); } .kt-input:user-invalid { border-color: var(--danger); } .kt-input[aria-invalid="true"], .kt-check input[aria-invalid="true"] + .kt-box { border-color: var(--danger); box-shadow: var(--shadow-invalid); } .kt-input[aria-invalid="true"]:focus-visible, .kt-check input[aria-invalid="true"]:focus-visible + .kt-box { box-shadow: var(--shadow-invalid), var(--focus-ring); } .kt-hint { font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--ink-muted); text-wrap: pretty; line-break: strict; } .kt-hint a { color: var(--link); text-underline-offset: 3px; } .kt-check { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); box-sizing: border-box; min-height: 44px; font-size: var(--fs-16); line-height: var(--lh-note); cursor: pointer; } .kt-check input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; margin: 0; } .kt-check a { color: var(--link); text-underline-offset: 3px; } .kt-box { flex: none; display: inline-grid; place-items: center; box-sizing: border-box; width: 24px; height: 24px; margin-top: 0; border: var(--hairline) solid var(--line-control); border-radius: var(--radius-xs); background: var(--surface-white); color: var(--on-teal); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .kt-box .kt-icon { width: var(--icon-sm); height: var(--icon-sm); visibility: hidden; } .kt-check input:checked + .kt-box, .kt-box.is-on { background: var(--teal); border-color: var(--teal); } .kt-check input:checked + .kt-box .kt-icon, .kt-box.is-on .kt-icon { visibility: visible; } /* 同意の欄(押せる高さ 44px)と「プライバシーポリシーを読む」(押せる高さ 44px)のあいだは 12px 空ける */ .kt-consent-link { margin: calc(var(--space-3) - var(--space-6)) 0 0 36px; } .kt-consent-link a { display: inline-flex; align-items: center; min-height: 44px; margin-block: 0; } .kt-consent-link .kt-icon { width: var(--icon-xs); height: var(--icon-xs); margin-left: var(--space-1); } /* 送信ボタンは、送信中の表示に変わっても幅が縮まない */ .kt-form > button[type="submit"] { min-width: 15rem; } /* 任意の項目(開閉) */ .kt-more-fields { border-top: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); } .kt-more-fields > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); min-height: 48px; cursor: pointer; border-radius: var(--radius-xs); color: var(--teal); font-size: var(--fs-16); font-weight: 700; line-height: var(--lh-ui); font-feature-settings: "palt" 1; } .kt-more-fields > summary::-webkit-details-marker { display: none; } .kt-more-fields > summary::after { content: ""; flex: none; width: var(--icon-md); height: var(--icon-md); background-color: currentColor; -webkit-mask: var(--mask-chevron) center / contain no-repeat; mask: var(--mask-chevron) center / contain no-repeat; transition: transform var(--dur-base) var(--ease-out); } .kt-more-fields[open] > summary::after { transform: rotate(180deg); } .kt-more-fields > summary:focus-visible { box-shadow: var(--focus-ring); } @media (hover: hover) { .kt-more-fields > summary:hover { text-decoration: underline; text-underline-offset: 4px; } } .kt-more-fields-in { display: grid; gap: var(--space-6); padding: var(--space-4) 0 var(--space-6); } /* 入力エラー(JSが入れる) */ .kt-field-error { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; color: var(--danger); font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-ui); } .kt-field-error::before { content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; margin-top: calc((var(--lh-ui) * var(--fs-14) - 16px) / 2); border: 1.5px solid currentColor; border-radius: 50%; font-size: var(--fs-12); font-weight: 700; line-height: var(--lh-none); } .kt-check + .kt-field-error { margin: calc(-1 * var(--space-3)) 0 0 36px; } .kt-field-error + .kt-consent-link { margin-top: calc(-1 * var(--space-4)); } .kt-form-errors { padding: var(--space-4) var(--space-6); border: var(--hairline) solid var(--danger); border-left-width: 4px; border-radius: var(--radius-sm); background: var(--surface-white); color: var(--ink); line-height: var(--lh-note); } .kt-form-errors:focus { outline: none; } .kt-form-errors p { margin: 0; } .kt-form-errors ul { margin: var(--space-2) 0 0; padding-left: 1.2em; } .kt-form-errors li + li { margin-top: var(--space-1); } .kt-form-errors a { color: var(--danger); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .kt-form-errors a:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); } /* 送信の状態(JSが入れる)。色だけに頼らず、記号の形でも区別する。 お知らせ(is-info)は時計、注意(is-warn)は三角、エラーは丸の中の「!」、完了は丸の中の「✓」 */ .kt-form-status { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: var(--hairline) solid transparent; font-size: var(--fs-16); line-height: var(--lh-note); color: var(--ink); } .kt-form-status:empty { display: none; } .kt-form-status:focus { outline: none; } .kt-form-status > span { min-width: 0; line-break: strict; text-wrap: pretty; } .kt-form-status b { font-weight: 700; } .kt-form-status:is(.is-ok, .is-info, .is-warn, .is-error)::before { content: "!"; content: "!" / ""; flex: none; display: grid; place-items: center; box-sizing: border-box; width: 16px; height: 16px; margin-top: calc((var(--lh-note) * var(--fs-16) - 16px) / 2); border: 1.5px solid currentColor; border-radius: 50%; font-size: var(--fs-12); font-weight: 700; line-height: var(--lh-none); } .kt-form-status.is-ok { border-color: var(--success); background: var(--surface-tint); } .kt-form-status.is-ok::before { content: "✓"; content: "✓" / ""; color: var(--success); } .kt-form-status.is-info { border-color: var(--line-strong); background: var(--surface-tint); } .kt-form-status.is-info::before { content: ""; border: 0; border-radius: 0; background-color: var(--icon); -webkit-mask: var(--mask-clock) center / contain no-repeat; mask: var(--mask-clock) center / contain no-repeat; } .kt-form-status.is-warn { border-color: var(--amber); background: var(--surface-white); } .kt-form-status.is-warn::before { content: ""; border: 0; border-radius: 0; background-color: var(--amber); -webkit-mask: var(--mask-alert) center / contain no-repeat; mask: var(--mask-alert) center / contain no-repeat; } .kt-form-status.is-error { border-color: var(--danger); background: var(--surface-white); } .kt-form-status.is-error::before { color: var(--danger); } /* 送信先の準備中のお知らせ(送信ボタンのすぐ上。JSが入れる)。注記の大きさ */ .kt-form-notice { margin: 0; font-size: var(--fs-caption); } .kt-form-notice::before { margin-top: calc((var(--lh-note) * var(--fs-caption) - 16px) / 2); } /* 送信中のくるくる(動きを減らす設定では回さず、ゆっくり明滅する輪) */ .kt-spinner { display: inline-block; flex: none; box-sizing: border-box; width: var(--icon-md); height: var(--icon-md); border: 2px solid currentColor; border-radius: 50%; opacity: .6; } .kt-anim .kt-spinner { opacity: 1; border-right-color: transparent; animation: kt-spin .7s linear infinite; } @keyframes kt-spin { to { transform: rotate(360deg); } } @keyframes kt-pulse { 50% { opacity: .35; } } /* 送信できたとき(フォームと入れ替わる) */ .kt-form-done { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-8); border-radius: var(--radius-sm); background: var(--surface-tint); border: var(--hairline) solid var(--teal); } .kt-form-done:focus { outline: none; } .kt-form-done-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal); color: var(--on-teal); } .kt-form-done-icon .kt-icon { width: var(--icon-lg); height: var(--icon-lg); } .kt-form-done-t { margin: 0; font-size: var(--fs-card); font-weight: 700; line-height: var(--lh-head); } .kt-form-done .kt-p { margin: 0; } .kt-form-done .kt-actions { margin-top: var(--space-2); gap: 0 var(--space-6); } @media (any-pointer: coarse) { .kt-hint a { display: inline-flex; align-items: center; min-height: 44px; } /* 文中のリンクは行の高さを変えずに、上下に押せる範囲を広げる */ .kt-doc a { padding-block: 10px; } } /* ============ お問い合わせ ============ 901px 以上(12列): 見出し(1〜6列)の下に「デモでご覧いただけること・流れ」、右の 8〜12列にフォーム(見出しの横から始まる)。 900px 以下: 見出し → フォーム → デモの内容・流れ の順 */ .kt-contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; } .kt-contact-intro, .kt-contact-aside, .kt-contact-form { min-width: 0; } .kt-contact-intro { order: 0; } .kt-contact-form { order: 1; } .kt-contact-aside { order: 2; } .kt-contact-sub { margin: 0 0 var(--space-3); font-size: var(--fs-item); font-weight: 700; line-height: var(--lh-ui); font-feature-settings: "palt" 1; } .kt-contact-aside > * + .kt-contact-sub { margin-top: var(--space-8); } /* お問い合わせのページでは、ヘッダーとメニューの「デモを申し込む」を出さない(いまいるページへのボタンになるため) */ body.kt-page-contact :is(.kt-header-cta, .kt-nav-cta) { display: none !important; } .kt-contact-form { padding: var(--space-8); } .kt-contact-form .kt-form > .kt-btn { justify-self: start; } @container (min-width: 901px) { .kt-contact { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--col-gap); row-gap: var(--space-12); } .kt-contact-intro { grid-column: 1 / 7; grid-row: 1; } .kt-contact-aside { grid-column: 1 / 7; grid-row: 2; position: sticky; top: calc(var(--header-height) + var(--space-8)); } .kt-contact-form { grid-column: 8 / 13; grid-row: 1 / span 2; align-self: start; } } @container (max-width: 640px) { .kt-contact-form { padding: var(--space-6); } .kt-contact-form .kt-form > .kt-btn { width: 100%; min-width: 0; justify-self: stretch; } } /* お問い合わせの後の流れ(番号つき・点線でつなぐ。番号の丸は文字の大きさに合わせて広がる) */ .kt-ministeps { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; } .kt-contact-sub + .kt-ministeps { margin-top: 0; } .kt-ministeps li { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-4); font-size: var(--fs-16); line-height: var(--lh-note); } .kt-ministeps li:last-child { padding-bottom: 0; } .kt-ministeps li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.75rem / 2 - .5px); top: calc(1.75rem + 4px); bottom: 4px; border-left: var(--hairline) dashed var(--teal); } .kt-ministeps-n { flex: none; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--surface-navy); color: var(--teal-light); font-family: "Inter", var(--font-sans); font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-none); font-variant-numeric: tabular-nums; } /* 送信が済んだ手順: teal の丸にチェック */ .kt-ministeps li.is-done .kt-ministeps-n { position: relative; background: var(--teal); color: transparent; } .kt-ministeps li.is-done .kt-ministeps-n::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; background-color: var(--on-teal); -webkit-mask: var(--mask-check) center / contain no-repeat; mask: var(--mask-check) center / contain no-repeat; } /* ============ Footer ============ */ .kt-footer { container-type: inline-size; background: var(--surface-navy); color: var(--on-navy); border-radius: 0; margin-top: var(--space-16); } .kt-footer-in { box-sizing: border-box; max-width: calc(var(--container) + 48px); margin: 0 auto; padding: var(--space-16) var(--space-6) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-12); } .kt-footer-tag { margin: var(--space-4) 0 0; font-size: var(--fs-caption); line-height: var(--lh-body); color: var(--on-navy-muted); font-feature-settings: "palt" 1; } .kt-footer-col :is(h2, h3) { margin: 0 0 var(--space-3); font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-note); color: var(--on-navy-muted); font-feature-settings: "palt" 1; } /* 一覧は押せる高さ 44px で詰めて並べる。5項目以上は2列にし、上から下へ読む順(左の列の下まで行ってから右の列)に並べる */ .kt-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .kt-footer-col ul:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(4, auto); column-gap: var(--space-6); } .kt-footer-col a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--on-navy); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; font-size: var(--fs-16); line-height: var(--lh-note); border-radius: var(--radius-xs); transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); } .kt-footer-col a:hover { color: var(--teal-light); text-decoration-color: currentColor; } .kt-footer-col a:focus-visible { box-shadow: var(--focus-ring-dark); } .kt-footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-6); border-top: var(--hairline) solid var(--surface-navy-2); font-size: var(--fs-caption); line-height: var(--lh-note); color: var(--on-navy-muted); } .kt-footer-base p { margin: 0; } @container (max-width: 820px) { .kt-footer-in { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8) var(--space-12); } .kt-footer-in > :first-child { grid-column: 1 / -1; } } @container (max-width: 640px) { .kt-footer-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding: var(--space-8) var(--gutter-mobile); } } /* ============ UI図(実機の見た目を、LPの色で描き直したもの) ============ 絵として見せるもの。押せるように見せない(ポインタは素通り、カーソルも変えない) */ .kt-fig { box-sizing: border-box; position: relative; background: var(--surface-white); color: var(--ink); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); padding: var(--space-6); font-size: var(--fs-14); line-height: var(--lh-note); text-align: left; font-feature-settings: "palt" 1; cursor: default; } .kt-fig * { pointer-events: none; } .kt-fig-sm { border-radius: var(--radius-sm); padding: var(--space-4); } /* 図の中の縦の間隔: ふつうは 12px、ラベルの直後は 4px */ .kt-fig > * + * { margin-top: var(--space-3); } .kt-fig > .kt-fig-label + * { margin-top: var(--space-1); } .kt-fig > .kt-fig-sub + .kt-p { margin-top: var(--space-1); } .kt-fig-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0; font-size: var(--fs-14); font-weight: 600; line-height: var(--lh-ui); color: var(--ink-muted); } .kt-fig-head > .kt-icon { width: var(--icon-md); height: var(--icon-md); color: var(--icon); } /* 狭い幅では、見出しの語を途中で割らずに右の表示(件数・モード)を次の行へ送る */ .kt-fig-meta { margin-left: auto; font-weight: 400; color: var(--ink-muted); white-space: nowrap; } .kt-fig-cap { max-width: 52em; margin: var(--space-3) 0 0; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em; line-height: var(--lh-ui); color: var(--ink-muted); } :is(.kt-dark, .kt-panel-navy, .kt-panel-navy2) .kt-fig-cap { color: var(--on-navy-muted); } .kt-fig-cap-center { text-align: center; margin-left: auto; margin-right: auto; } .kt-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: baseline; padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); } .kt-line-boxed { border: var(--hairline) solid var(--line); } /* 3つ並びの行(札・本文・右の印)。読み上げ用の .kt-sr は数えない */ .kt-line-3 { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); } .kt-line-3 > :nth-child(2 of :not(.kt-sr)) { flex: 1 1 8em; min-width: 0; } .kt-line-3 > :nth-child(3 of :not(.kt-sr)) { margin-left: auto; } .kt-time { font-family: "Inter", var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-muted); } .kt-hl { background: var(--teal-light); color: var(--surface-navy); } .kt-hl .kt-time, .kt-hl .kt-fig-label { color: var(--ink); } .kt-soap { display: inline-grid; place-items: center; box-sizing: border-box; min-width: 1.5rem; min-height: 1.5rem; border-radius: var(--radius-xs); background: var(--surface-navy); color: var(--teal-light); font-family: "Inter", var(--font-sans); font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-none); } .kt-empty { color: var(--ink-muted); border: var(--hairline) dashed var(--line-strong); border-radius: var(--radius-xs); padding: var(--space-1) var(--space-2); justify-self: start; } .kt-chip { display: inline-flex; align-items: center; gap: var(--space-1); box-sizing: border-box; min-height: 1.75rem; padding: 0 var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-xs); background: var(--surface-white); color: var(--teal); font-size: var(--fs-12); font-weight: 600; line-height: var(--lh-none); white-space: nowrap; } .kt-chip .kt-icon { width: var(--icon-xs); height: var(--icon-xs); } .kt-chip-ink { color: var(--ink); } .kt-chip-num { font-family: "Inter", var(--font-sans); font-size: var(--fs-14); font-variant-numeric: tabular-nums; } .kt-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .kt-warn { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--amber); border-radius: var(--radius-sm); background: var(--surface-white); color: var(--ink); } .kt-warn .kt-icon { width: var(--icon-md); height: var(--icon-md); margin-top: 2px; color: var(--amber); } .kt-warn b { font-weight: 700; } .kt-note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink); } .kt-note .kt-icon { width: var(--icon-md); height: var(--icon-md); margin-top: 2px; color: var(--icon); } .kt-tintbox { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-tint); color: var(--ink); } /* 画面イメージの中のボタン: ふだんは1行。幅に収まらないとき(文字を大きくしたとき)だけ中で折り返し、図の外にはみ出さない */ .kt-fig-btn { display: inline-flex; align-items: center; gap: var(--space-2); box-sizing: border-box; max-width: 100%; min-width: 0; min-height: 36px; height: auto; padding: 0 var(--space-3); border: var(--hairline) solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-white); color: var(--ink); font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-ui); white-space: normal; box-shadow: none; } .kt-fig-btn .kt-icon { width: var(--icon-sm); height: var(--icon-sm); } /* 画面イメージの中の主ボタンは、本物の申し込みボタンに見えないよう淡い面にする */ .kt-fig-btn-primary { background: var(--surface-tint-2); border-color: transparent; color: var(--teal); } .kt-fig-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .kt-fig-row-between { justify-content: space-between; } .kt-fig-label { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } .kt-fig-sub { margin: 0; font-weight: 700; color: var(--teal); } .kt-seg { display: inline-flex; padding: var(--space-1); gap: var(--space-1); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--surface-mist); } .kt-seg > span { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: var(--hairline) solid transparent; border-radius: var(--radius-xs); color: var(--ink-muted); font-weight: 600; white-space: nowrap; } .kt-seg > span.is-on { background: var(--surface-white); border-color: var(--line-strong); color: var(--ink); } .kt-seg .kt-icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--icon); } .kt-seg small { font-family: "Inter", var(--font-sans); font-size: var(--fs-12); font-weight: 600; color: var(--ink-muted); } .kt-bar { height: 8px; border-radius: var(--radius-xs); background: var(--line); overflow: hidden; } .kt-bar > span { display: block; height: 100%; width: 64%; background: var(--teal); border-radius: var(--radius-xs); } .kt-rec { display: grid; place-items: center; width: 112px; height: 112px; margin: var(--space-3) auto 0; border-radius: 50%; background: var(--teal); color: var(--on-teal); outline: 2px solid var(--teal); outline-offset: 4px; text-align: center; font-size: var(--fs-14); font-weight: 700; line-height: var(--lh-head); } .kt-rec .kt-icon { width: var(--icon-xl); height: var(--icon-xl); display: block; margin: 0 auto 2px; } .kt-confirm { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3); border: var(--hairline) solid var(--teal); border-radius: var(--radius-sm); } /* 文はチェックの右の幅をすべて使い、ボタンはいつも次の行の右端に置く(文を細い列に押し込めて割らない) */ .kt-confirm > :nth-child(2) { flex: 1 1 calc(100% - 24px - var(--space-3)); min-width: 0; } .kt-confirm > :nth-child(3) { margin-left: auto; } .kt-confirm-t { font-weight: 700; line-height: var(--lh-ui); } .kt-confirm-d { display: block; font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } .kt-totals { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-tint); } .kt-totals dt { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } .kt-totals dd { margin: 0; font-family: "Inter", var(--font-sans); font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-head); font-variant-numeric: tabular-nums; color: var(--ink-brand); } .kt-totals dd small { font-size: var(--fs-14); margin-left: 2px; } .kt-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; margin: 0; } .kt-kv dt { font-size: var(--fs-14); font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); white-space: nowrap; } .kt-kv dd { margin: 0; } /* 根拠をつなぐ縦の線(カードの中の小さい図) */ .kt-pair { position: relative; display: grid; gap: var(--space-3); padding-left: 20px; } .kt-pair-rail { position: absolute; left: 6px; top: 20px; bottom: 20px; width: 1.5px; background: var(--teal); } .kt-pair-rail::before, .kt-pair-rail::after { content: ""; position: absolute; left: -3px; width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--teal); } .kt-pair-rail::before { top: -3px; } .kt-pair-rail::after { bottom: -3px; } .kt-pair .kt-line { min-height: 40px; box-sizing: border-box; align-items: center; } /* アプリの上部バー(病棟の口述) */ .kt-appbar { display: flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); background: var(--surface-navy); color: var(--on-navy); border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-weight: 700; } .kt-fig:not(.kt-fig-sm) > .kt-appbar { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0; border-radius: var(--radius-md) var(--radius-md) 0 0; padding: var(--space-3) var(--space-6); } .kt-appbar-tabs { margin-left: auto; display: flex; gap: var(--space-1); font-size: var(--fs-12); font-weight: 600; } .kt-appbar-tabs span { padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); color: var(--on-navy-muted); white-space: nowrap; } .kt-appbar-tabs span.is-on { background: var(--surface-navy-2); color: var(--on-navy); } .kt-beds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .kt-bedcard { display: grid; gap: 2px; min-width: 0; padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); } .kt-bedcard.is-on { border-color: var(--teal); background: var(--surface-tint); } .kt-bedcard .kt-bed { justify-self: start; background: var(--surface-white); } /* 画面イメージの奥行き: 明るい面の上は --shadow-1、濃紺のカードの中は短い影 */ .kt-step-figure .kt-fig, .kt-panel-tint .kt-fig { box-shadow: var(--shadow-1); } .kt-card-navy2 .kt-fig { box-shadow: var(--shadow-on-navy-sm); } /* 画面イメージを2枚重ねて見せる(外来のページの頭)。2枚目は少し右へずらす */ .kt-figstack { display: grid; gap: var(--space-4); } .kt-figstack > .kt-fig { box-shadow: var(--shadow-1); } .kt-figstack > div.kt-fig:nth-of-type(2) { margin-left: var(--space-8); } .kt-figstack > .kt-fig-cap { margin: 0; } @container (max-width: 480px) { .kt-figstack > div.kt-fig:nth-of-type(2) { margin-left: 0; } } /* ============ EvidenceFigure(ヒーローの根拠図。安全性のページの頭では明るい面の上に置く) ============ */ .kt-ev { position: relative; width: 100%; max-width: 560px; margin: 0; box-sizing: border-box; padding-right: 36px; } .kt-ev-card { position: relative; box-sizing: border-box; width: calc(100% - 40px); box-shadow: var(--shadow-on-navy); } .kt-ev-on-light .kt-ev-card { box-shadow: var(--shadow-1); } .kt-ev-a { margin-left: 40px; z-index: 1; } .kt-ev-b { margin-top: calc(-1 * var(--space-4)); z-index: 2; } .kt-ev-card > * + * { margin-top: var(--space-2); } .kt-ev-card .kt-fig-head { margin-bottom: var(--space-3); } /* 根拠の線は、スクリプトが位置を測って引くまで隠す */ .kt-ev-svg { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; visibility: hidden; } .kt-ev-svg.is-drawn { visibility: visible; } .kt-ev-line { fill: none; stroke: var(--teal-light); stroke-width: var(--evidence-line); stroke-linecap: round; stroke-linejoin: round; } .kt-ev-dot { fill: var(--teal-light); } .kt-ev-on-light .kt-ev-line { stroke: var(--teal); } .kt-ev-on-light .kt-ev-dot { fill: var(--teal); } .kt-ev .kt-fig-cap { margin-left: 40px; } @container (max-width: 480px) { .kt-ev { padding-right: 20px; } .kt-ev-card { width: 100%; } .kt-ev-a { margin-left: 0; } .kt-ev-b { margin-top: var(--space-3); } .kt-ev .kt-fig { padding: var(--space-4); border-radius: var(--radius-sm); } .kt-ev .kt-fig-cap { margin-left: 0; } } /* ============ Hero ============ */ .kt-hero-wrap { container-type: inline-size; } .kt-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; } .kt-hero-copy { min-width: 0; } .kt-hero-title { margin: 0; font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; color: var(--on-navy); } .kt-hero-lead { margin: var(--space-6) 0 0; max-width: 30em; color: var(--on-navy-muted); } .kt-hero .kt-checks { margin-top: var(--space-6); } .kt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-8); } .kt-hero-figure { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; } .kt-hero-note { max-width: 42em; margin: var(--space-4) 0 0; padding: 0; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink-muted); } /* 「もう一度再生」: 動きがあるときだけ出す */ .kt-ev-replay { display: none; } .kt-anim .kt-ev-replay { display: inline-flex; } /* 961〜1124px: 2列のまま、余白と見出しを少し小さく */ @container (min-width: 961px) and (max-width: 1124px) { .kt-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); } .kt-panel-r-xl.kt-hero { padding: var(--space-16) var(--space-12); } .kt-hero-title { font-size: var(--fs-40); } .kt-hero-actions { column-gap: var(--space-3); } .kt-hero-actions .kt-btn-lg { padding-inline: var(--space-6); } .kt-hero-actions .kt-btn-text { flex-basis: 100%; } } /* 1125〜1219px: 56px だと「取るのは、カルトリ。」が1行に収まらないので 48px に */ @container (min-width: 1125px) and (max-width: 1219px) { .kt-hero-title { font-size: var(--fs-48); } } @container (max-width: 960px) { .kt-hero { grid-template-columns: minmax(0, 1fr); } .kt-hero-figure { align-items: flex-start; } } @container (min-width: 641px) and (max-width: 960px) { .kt-hero-figure { align-items: center; } } /* 1125px 以上: ヒーローの上下の余白を画面の高さに合わせる(1366×768 のノートでも、ボタンと「もう一度再生」が最初の画面に入る) */ @container (min-width: 1125px) { .kt-hero.kt-panel-r-xl { padding-block: clamp(var(--space-12), 7svh, var(--space-24)); } } @media (max-height: 820px) and (min-width: 1081px) { .kt-hero .kt-checks { margin-top: var(--space-4); } .kt-hero-actions { margin-top: var(--space-6); } /* 右の画面イメージ(図の列のほうが高い)も、カードの上下の余白を 16px に詰める */ .kt-hero .kt-ev .kt-fig { padding-block: var(--space-4); } .kt-hero .kt-ev-card .kt-fig-head { margin-bottom: var(--space-2); } } /* スマホ: 見出し → リード → ボタン → 画面イメージ → チェックの順に並べ替える(画面イメージを最初の画面に入れる) */ @container (max-width: 640px) { .kt-hero { gap: 0; } .kt-hero-copy { display: contents; } .kt-hero-copy > .kt-eyebrow { order: 0; } .kt-hero-title { order: 1; font-size: var(--fs-36); line-height: var(--lh-head); letter-spacing: -0.01em; } .kt-hero-lead { order: 2; margin-top: var(--space-4); } .kt-hero-actions { order: 3; flex-direction: column; align-items: stretch; margin-top: var(--space-6); } .kt-hero-figure { order: 4; margin-top: var(--space-6); } .kt-hero .kt-checks { order: 5; margin-top: var(--space-6); } .kt-hero-actions .kt-btn-lg { width: 100%; padding-inline: var(--space-4); } .kt-hero-actions .kt-btn-text { align-self: center; } } /* ============ Closing(ページ末の申し込み。本文の面より一段濃い淡色の面) ============ */ .kt-closing { overflow: hidden; text-align: center; border: var(--hairline) solid var(--line); } .kt-closing.kt-panel-tint { background: var(--surface-tint-2); border-color: transparent; } .kt-closing-title { margin: 0 auto; max-width: 20em; font-size: var(--fs-32); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .kt-closing-body { margin: var(--space-4) auto 0; max-width: 38em; color: var(--ink-muted); } :is(.kt-panel-navy, .kt-panel-navy2).kt-closing { border-color: transparent; } :is(.kt-panel-navy, .kt-panel-navy2).kt-closing .kt-closing-title { color: var(--on-navy); } :is(.kt-panel-navy, .kt-panel-navy2).kt-closing .kt-closing-body { color: var(--on-navy-muted); } .kt-closing .kt-actions { justify-content: center; margin-top: var(--space-8); } /* 会話カード → 線 → 下書きカード の小さな印 */ .kt-closing-motif { display: flex; align-items: center; justify-content: center; gap: 0; margin: 0 auto var(--space-8); } .kt-cm-card { display: grid; align-content: center; gap: var(--space-2); box-sizing: border-box; width: 112px; height: 52px; padding: var(--space-3); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); } .kt-cm-card:has(.kt-cm-soap) { grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: var(--space-2); } .kt-cm-bar { display: block; width: 70%; height: 6px; border-radius: var(--radius-pill); background: var(--line); } .kt-cm-hl { width: 100%; background: var(--teal-light); } .kt-cm-soap { display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-xs); background: var(--surface-navy); color: var(--teal-light); font-family: "Inter", var(--font-sans); font-size: var(--fs-12); font-weight: 700; line-height: var(--lh-none); } .kt-cm-link { position: relative; z-index: 1; flex: none; width: 64px; height: 2px; background: var(--teal); } .kt-cm-link::before, .kt-cm-link::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--teal); } .kt-cm-link::before { left: -3.5px; } .kt-cm-link::after { right: -3.5px; } @container (max-width: 640px) { .kt-closing-title { font-size: var(--fs-24); line-height: var(--lh-head); } .kt-closing-motif { margin-bottom: var(--space-6); } .kt-closing .kt-actions { margin-top: var(--space-6); } } @container (max-width: 480px) { .kt-cm-card { width: 88px; } .kt-cm-link { width: 40px; } } /* ============ 「取る」という言葉 ============ 901px 以上(12列): 言葉は 1〜6列、図は 7〜12列 */ .kt-toru { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; } @container (min-width: 901px) { .kt-toru { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--col-gap); } .kt-toru > :first-child { grid-column: 1 / 7; padding-right: var(--space-8); } .kt-toru > :last-child { grid-column: 7 / 13; } } .kt-toru-title { margin: 0; font-size: var(--fs-section); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; } .kt-toru-title span { display: block; } .kt-toru-title b { font-weight: 700; color: inherit; background-image: linear-gradient(transparent 68%, var(--marker) 68%); background-repeat: no-repeat; background-size: 100% 100%; } .kt-toru-body { margin: var(--space-8) 0 0; max-width: 32em; color: var(--ink-muted); } .kt-toru-lead { margin: var(--space-8) 0 0; padding-top: var(--space-6); border-top: var(--hairline) solid var(--line-strong); max-width: 26em; font-size: var(--fs-18); line-height: var(--lh-body); font-weight: 700; font-feature-settings: "palt" 1; } @container (max-width: 640px) { .kt-toru-title { font-size: var(--fs-28); } .kt-toru-body { margin-top: var(--space-6); } .kt-toru-lead { margin-top: var(--space-6); font-size: var(--fs-16); } } /* 「取る」の図: 脈・熱・話・記録 の札から線が伸び、記録の下書きの S・O・A・P の行に1本ずつ入る。 札の行と下書きの行は同じ高さ(48px)・同じ間隔(12px)なので、線はまっすぐ横に入る */ .kt-toru-fig { --tf-row: 48px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) min(200px, 45%); align-items: center; padding: var(--space-8); border-radius: var(--radius-md); background: var(--surface-tint-2); } .kt-tf-src { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .kt-tf-src li { position: relative; display: flex; align-items: center; height: var(--tf-row); } .kt-tf-src li:nth-child(2) { --tf-i: 1; } .kt-tf-src li:nth-child(3) { --tf-i: 2; } .kt-tf-src li:nth-child(4) { --tf-i: 3; } .kt-tf-k { flex: none; display: grid; place-items: center; box-sizing: border-box; min-width: var(--tf-row); min-height: var(--tf-row); padding: 0 var(--space-2); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); color: var(--ink); font-size: var(--fs-20); font-weight: 700; line-height: var(--lh-none); white-space: nowrap; font-feature-settings: "palt" 1; } .kt-tf-link { flex: 1 1 auto; min-width: var(--space-4); height: 2px; background: var(--teal); transform-origin: left center; } /* 線の右端の点(下書きの縁に乗る) */ .kt-tf-src li::after { content: ""; position: absolute; right: -3.5px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--teal); } .kt-tf-card { box-sizing: border-box; display: grid; gap: var(--space-3); padding: 0 var(--space-4); background: var(--surface-white); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1); } .kt-tf-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: center; column-gap: var(--space-2); height: var(--tf-row); } @container (max-width: 640px) { .kt-toru-fig { --tf-row: 40px; padding: var(--space-4); } } /* ============ 見出しと図の2カラム・料金の請求 ============ 白・淡い面の中(左右の余白が1列+溝)では、面の中の10列を使い、右の列を12列の8列目の線に揃える */ .kt-headmedia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; margin-bottom: var(--space-12); } .kt-headmedia .kt-head { margin-bottom: 0; } .kt-panel > .kt-headmedia:last-child { margin-bottom: 0; } .kt-billing { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; } .kt-billing .kt-head { margin-bottom: var(--space-6); } .kt-billing-body { margin: 0; } @container (min-width: 901px) { .kt-headmedia, .kt-billing { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); } :is(.kt-panel-white, .kt-panel-tint:not(.kt-closing)) > :is(.kt-headmedia, .kt-billing) { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--col-gap); } :is(.kt-panel-white, .kt-panel-tint:not(.kt-closing)) > :is(.kt-headmedia, .kt-billing) > :first-child { grid-column: 1 / 7; padding-right: var(--space-6); } :is(.kt-panel-white, .kt-panel-tint:not(.kt-closing)) > :is(.kt-headmedia, .kt-billing) > :last-child { grid-column: 7 / 11; } :is(.kt-panel-white, .kt-panel-tint:not(.kt-closing)) > .kt-billing { align-items: center; } } /* ============ ページの骨組み ============ */ .kt-main { display: flow-root; padding-block: var(--space-6) 0; } .kt-main > * + * { margin-top: var(--space-16); } .kt-main > .kt-chapter { margin-top: var(--space-24); } .kt-main > .kt-tight { margin-top: var(--space-8); } @media (max-width: 640px) { .kt-main > * + * { margin-top: var(--space-12); } .kt-main > .kt-chapter { margin-top: var(--space-12); } .kt-main > .kt-tight { margin-top: var(--space-8); } .kt-footer { margin-top: var(--space-12); } } @media (min-width: 961px) { .kt-main > * + * { margin-top: var(--space-24); } .kt-main > .kt-chapter { margin-top: var(--space-32); } .kt-main > .kt-tight { margin-top: var(--space-12); } .kt-footer { margin-top: var(--space-24); } } /* 本文へ移動(キーボード操作のときだけ見える) */ .kt-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 20; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--surface-navy); color: var(--on-navy); font-weight: 700; text-decoration: none; } .kt-skip:focus { top: var(--space-2); left: var(--space-2); z-index: 30; outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); } /* セクションの中の小物 */ .kt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); } .kt-actions-center { justify-content: center; margin-top: var(--space-8); } /* 中央ぞろえの申し込みボタンの下に続く「詳しく見る」も中央にそろえる(ボタンを隠すスマホ幅では左のまま) */ @media (min-width: 641px) { .kt-actions-center + .kt-more-row { justify-content: center; } } .kt-actions-end { justify-content: center; margin-top: var(--space-12); } @container (max-width: 640px) { .kt-actions-end { margin-top: var(--space-8); } .kt-actions .kt-btn-lg { width: 100%; padding-inline: var(--space-4); } } .kt-transfer { max-width: 42em; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: var(--space-6) 0 0; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--on-navy-muted); } .kt-transfer .kt-icon { width: var(--icon-md); height: var(--icon-md); color: var(--teal-light); } .kt-transfer span { display: inline-flex; align-items: center; gap: var(--space-1); } /* 文の終わり(.kt-nowrap)で「す。」だけが次の行に落ちないように */ .kt-transfer span:has(> .kt-nowrap) { display: block; } .kt-transfer span.kt-nowrap { display: inline; white-space: nowrap; } /* ---- 電子カルテへの転記(connect.html のカード)---- 912px 以上: 2列。どのカードも5段(アイコン・見出し・対象・本文・向いている施設)を行で共有し、カードが何枚でも揃う */ .kt-connect-tags { margin: 0 0 var(--space-4); } .kt-connect .kt-card-body { margin-bottom: var(--space-6); } .kt-connect-body > .kt-card-body:not(:last-child) { margin-bottom: var(--space-4); } .kt-connect-for { margin: auto 0 0; padding-top: var(--space-4); border-top: var(--hairline) solid var(--line); font-size: var(--fs-16); line-height: var(--lh-copy); color: var(--ink); } .kt-connect-for-t { display: block; font-weight: 700; } @container (min-width: 912px) { @supports (grid-template-rows: subgrid) { .kt-connect { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; margin-bottom: calc(-1 * var(--space-6)); } .kt-connect > .kt-card { display: grid; grid-template-rows: subgrid; grid-row: auto / span 5; margin-bottom: var(--space-6); } .kt-connect-for { margin-top: 0; } } } /* ---- 外来: 横いっぱいのカード(「先生の書き方に、近づけていく」)---- */ .kt-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-2) var(--space-12); align-items: start; } .kt-card-wide-head { display: flex; flex-direction: column; align-items: flex-start; } .kt-card-wide-body { display: grid; gap: var(--space-3); max-width: var(--measure); } @container (max-width: 900px) { .kt-card-wide { grid-template-columns: minmax(0, 1fr); } } /* ---- トップの外来・病棟の2枚: 641px 以上で同じ幅の2列。カードの中は 16px 間隔で積み、「〜を見る」は下端に揃える ---- */ @container (min-width: 641px) { .kt-grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .kt-grid-feature > .kt-card { gap: var(--space-4); } .kt-grid-feature > .kt-card > * { margin-block: 0; } .kt-grid-feature > .kt-card > .kt-img:first-child { margin-bottom: var(--space-2); } .kt-grid-feature > .kt-card > .kt-more { margin-top: auto; padding-top: var(--space-2); } /* ============ 文書ページ(プライバシーポリシー・セキュリティ) ============ */ .kt-doc { max-width: 42em; margin: 0 auto; color: var(--ink); font-size: var(--fs-16); line-height: var(--lh-copy); } .kt-doc h1 { margin: 0 0 var(--space-2); font-size: var(--fs-page); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -0.02em; } .kt-doc .meta { color: var(--ink-muted); font-size: var(--fs-caption); margin: 0 0 var(--space-8); } .kt-doc h2 { font-size: var(--fs-card); line-height: var(--lh-head); font-weight: 700; margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-6); border-top: var(--hairline) solid var(--line); } .kt-doc h3 { font-size: var(--fs-18); line-height: var(--lh-ui); font-weight: 700; margin: var(--space-8) 0 var(--space-2); } .kt-doc p { margin: 0 0 var(--space-4); } @container (min-width: 641px) { .kt-doc p { text-align: justify; text-justify: inter-character; } } .kt-doc ul { margin: 0 0 var(--space-4); padding-left: 1.4em; } .kt-doc li { margin: 0 0 var(--space-2); } .kt-doc a { color: var(--link); text-underline-offset: 3px; } .kt-doc .note { color: var(--ink-muted); font-size: var(--fs-caption); } .kt-doc .tablewrap { overflow-x: auto; margin: 0 0 var(--space-6); } .kt-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-16); } .kt-doc th, .kt-doc td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--line); } .kt-doc th { width: 11em; background: var(--surface-tint); font-weight: 600; white-space: normal; } @container (max-width: 640px) { .kt-doc h1 { font-size: var(--fs-36); line-height: var(--lh-head); } .kt-doc table, .kt-doc tbody, .kt-doc tr, .kt-doc th, .kt-doc td { display: block; width: auto; } .kt-doc th { padding-bottom: var(--space-1); border-bottom: 0; } .kt-doc td { padding-top: var(--space-2); } } /* ============ スマホの下部固定バー(申し込みの入口)。ヒーローを過ぎてから出す ============ */ .kt-mbar { display: none; } @media (max-width: 640px) { /* 隠れているあいだは影も出さず、visibility でリンクをフォーカス・読み上げの対象から外す。申し込み 3 : 資料 2 */ .kt-mbar { display: grid; grid-template-columns: 3fr 2fr; gap: var(--space-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: var(--space-3) var(--gutter-mobile) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--mbar-bg); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-top: var(--hairline) solid var(--line); box-shadow: none; transform: translateY(110%); visibility: hidden; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .kt-mbar.is-shown { transform: none; visibility: visible; box-shadow: var(--shadow-up); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), visibility 0s; } .kt-mbar .kt-btn { min-height: 48px; height: 48px; padding: 0 var(--space-2); font-size: var(--fs-16); white-space: nowrap; } /* 文字をとても大きくしているとき: ボタンの名前を折り返して、バーの外にはみ出さない */ .kt-mbar { container-type: inline-size; } @container (max-width: 18em) { .kt-mbar .kt-btn { height: auto; white-space: normal; overflow-wrap: anywhere; } } /* フッターの下端だけ、iPhone のホームバーの分を空ける */ .kt-footer-in { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); } /* フォーカスした要素がバーの下に隠れないように */ html:has(body.kt-has-mbar) { scroll-padding-bottom: var(--space-24); } /* バーが出ているあいだは、ヘッダーの同じボタンを隠す */ body:has(.kt-mbar.is-shown) .kt-header-cta { visibility: hidden; } .kt-hide-sm { display: none !important; } } /* 横向きのスマホなど、高さが低い画面では出さない */ @media (max-height: 480px) { .kt-mbar { display: none !important; } } .kt-header-cta, .kt-nav-cta { white-space: nowrap; } /* ============ スクロールでふわっと出る(JSが html に .kt-js を付けたときだけ隠す。JSが無ければ最初から見える) ============ */ .kt-js .kt-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .kt-js .kt-reveal.is-in { opacity: 1; transform: none; } /* リンクのカードは、出る動きの遅れを浮く動き・影に持ち込まない */ .kt-js a.kt-card.kt-reveal { transition: opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms), translate var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } /* ================================================================ アニメーション: すべて html.kt-anim の下だけで動く 1) ヒーロー: 根拠の発言と下書きの一文が光り、線が引かれ、端の点が弾む(1.5秒以内。「もう一度再生」で繰り返せる) 図の中身(カード・文字)は最初から見えている。動くのは強調だけ。強調はヒーローの図(.kt-hero .kt-ev)だけで、 ほかのページの根拠図は最初から強調が付いた止まった絵。再生が始まらないときも 2.5 秒で強調を出す 3) 使い方: 進捗バーが伸びる 4) 病棟: 録音ボタンの波紋(3回で止まる) 5) 「取る」の言葉が1行ずつ出て、マーカーが引かれる。図の線が1本ずつ伸びる 6) 数字のカウントアップ(JS) 8) よくある質問がなめらかに開く 9) メニューの下の暗い面が出る 10) 送信できたときの表示が出る ================================================================ */ @keyframes kt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes kt-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes kt-hl { from { background-color: transparent; } to { background-color: var(--teal-light); } } /* kt-hl と同じ動き。名前を分けておくと、「もう一度再生」でクラスを付け直したときに強調が最初から動き直す */ @keyframes kt-hl-late { from { background-color: transparent; } to { background-color: var(--teal-light); } } @keyframes kt-pop { 0% { opacity: 0; transform: scale(.2); } 70% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } } @keyframes kt-bar { from { width: 0; } to { width: 64%; } } @keyframes kt-ripple { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.45); opacity: 0; } } @keyframes kt-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } } @keyframes kt-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* 1) ヒーロー: 0.2秒 会話の根拠が光る → 0.5秒 下書きの一文が光る → 0.75秒 線(0.55秒)→ 1.3秒 点が弾む */ .kt-anim .kt-hero .kt-ev-drawing .kt-ev-svg { transition: opacity var(--dur-fast) var(--ease-out); } .kt-anim .kt-hero .kt-ev:not(.kt-ev-drawing):not(.kt-ev-done) .kt-ev-svg { opacity: 0; } .kt-anim .kt-hero .kt-ev:not(.kt-ev-play) .kt-hl { background-color: transparent; animation: kt-hl-late .3s var(--ease-out) 2.5s both; } .kt-anim .kt-hero .kt-ev:not(.kt-ev-play) .kt-ev-svg { animation: kt-fade .3s var(--ease-out) 2.5s both; } .kt-anim .kt-hero .kt-ev-play .kt-ev-a .kt-hl { animation: kt-hl .3s var(--ease-out) .2s both; } .kt-anim .kt-hero .kt-ev-play .kt-ev-b .kt-hl { animation: kt-hl .3s var(--ease-out) .5s both; } .kt-anim .kt-hero .kt-ev-play:not(.kt-ev-done) .kt-ev-dot { opacity: 0; } .kt-anim .kt-hero .kt-ev-play .kt-ev-dot { transform-box: fill-box; transform-origin: center; } .kt-anim .kt-hero .kt-ev-play.kt-ev-done .kt-ev-dot { animation: kt-pop .2s var(--ease-out) both; } /* 3) 使い方: 下書きを取っている進捗バー(画面に入ったら伸びる) */ .kt-anim .kt-step .kt-bar > span { width: 0; } .kt-anim .kt-step.is-in .kt-bar > span { animation: kt-bar 1.8s .35s var(--ease-out) both; } /* 4) 病棟: 録音ボタンの波紋。画面に入ったとき(.is-playing)に3回だけ広がって止まる(合計 4.5 秒) */ .kt-anim .kt-rec { position: relative; } .kt-anim .kt-rec::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal); pointer-events: none; opacity: 0; } .kt-anim .kt-rec.is-playing::after { animation: kt-ripple 1.5s var(--ease-out) 3 both; } /* 5) 「取る」: 1行ずつ出て、「取る」にマーカー(マーカーは止まった見た目でも最初から引いてある。動くときだけ伸ばす) */ .kt-anim .kt-toru-title span { opacity: 0; } .kt-anim .is-in .kt-toru-title span { animation: kt-in .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 260ms + 150ms); } .kt-anim .kt-toru-title b { background-size: 0% 100%; } .kt-anim .is-in .kt-toru-title b { animation: kt-mark .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 260ms + 520ms); } /* 図: 画面に入ったら、札から下書きへの線が 120ms ずつずれて伸び、端の点が出る */ .kt-anim .kt-toru-fig .kt-tf-link { transform: scaleX(0); } .kt-anim .kt-toru-fig .kt-tf-src li::after { opacity: 0; } .kt-anim .kt-toru-fig.is-in .kt-tf-link { animation: kt-draw .5s var(--ease-out) both; animation-delay: calc(var(--tf-i, 0) * 120ms + 300ms); } .kt-anim .kt-toru-fig.is-in .kt-tf-src li::after { animation: kt-pop .2s var(--ease-out) both; animation-delay: calc(var(--tf-i, 0) * 120ms + 780ms); } /* 8) よくある質問: 開くときに高さがなめらかに伸びる(対応ブラウザだけ) */ .kt-anim .kt-faq details { interpolate-size: allow-keywords; } .kt-anim .kt-faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) var(--ease-out) allow-discrete; } .kt-anim .kt-faq details[open]::details-content { block-size: auto; } /* 9) メニューの下の暗い面 */ .kt-anim.kt-menu-open body::after { animation: kt-fade var(--dur-base) var(--ease-out); } /* 10) 送信できたときの表示 */ .kt-anim .kt-form-done { animation: kt-in var(--dur-slow) var(--ease-out) both; } /* ============ 暗い見た目(OSの設定が暗いとき) ============ 面と文字の役割の変数だけを差し替える。画面イメージ・印(.kt-fig / .kt-cm-card / .kt-tf-card / .kt-tf-k)は明るい配色のまま、 面だけ真っ白から一段落とす(--fig-surface)。影は黒を濃くして、暗い地の上でも奥行きが出るようにする。 濃紺の面・おすすめの料金・フッターは背景に沈まないよう、1px の縁(--line-strong)を付ける。おすすめの料金は teal の縁で持ち上げる */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --surface-mist: #081518; --surface-white: #10262c; --surface-tint: #133038; --surface-tint-2: #17363f; --ink: #e6eef0; --ink-muted: #b4c2c5; --ink-brand: var(--ink); --line: #1f3a41; --line-strong: #2d4c54; --line-control: #6f858a; --teal: #6cc9d6; --icon: #8fb8bd; --on-teal: var(--surface-mist); --danger: #f58a9b; --coral-edge: var(--coral); --link-underline: rgba(108, 201, 214, .45); --mbar-bg: rgba(16, 38, 44, .94); --header-bg: rgba(16, 38, 44, .74); --header-shadow-rest: 0 1px 0 var(--line), 0 6px 16px -10px rgba(0, 0, 0, .55); --header-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 30px -12px rgba(0, 0, 0, .7); --scrim: rgba(0, 0, 0, .55); --marker: rgba(108, 201, 214, .28); --fig-surface: #eef3f4; --fig-mist: #e4ebec; --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -6px rgba(0, 0, 0, .5); --shadow-2: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 36px -12px rgba(0, 0, 0, .65); --shadow-panel: 0 1px 2px rgba(0, 0, 0, .4), 0 28px 56px -36px rgba(0, 0, 0, .75); --shadow-up: 0 -10px 28px -14px rgba(0, 0, 0, .6); } :is(.kt-fig, .kt-cm-card, .kt-tf-card, .kt-tf-k) { color-scheme: light; --surface-mist: var(--fig-mist); --surface-white: var(--fig-surface); --surface-tint: var(--l-surface-tint); --surface-tint-2: var(--l-surface-tint-2); --ink: var(--l-ink); --ink-muted: var(--l-ink-muted); --ink-brand: var(--surface-navy); --line: var(--l-line); --line-strong: var(--l-line-strong); --line-control: var(--l-line-control); --teal: var(--l-teal); --icon: var(--l-icon); --on-teal: var(--l-on-teal); --danger: var(--l-danger); } .kt-panel-navy, .kt-price-rec { border: var(--hairline) solid var(--line-strong); } .kt-panel-navy { --panel-edge: var(--hairline); } .kt-footer { border-top: var(--hairline) solid var(--line-strong); } .kt-price-rec { background: var(--surface-tint-2); border-color: var(--teal); box-shadow: var(--shadow-ring-teal); } .kt-price-rec .kt-checks { border-top-color: var(--line-strong); } .kt-toru-title b { background-image: linear-gradient(transparent 82%, var(--teal) 82%); } .kt-step-n, .kt-ministeps-n { outline: var(--hairline) solid var(--line-strong); outline-offset: -1px; } .kt-req { background: var(--ink); color: var(--surface-mist); } .kt-header .kt-mark { color: var(--teal-light); } } /* ============ 動きを減らす設定 ============ */ @media (prefers-reduced-motion: reduce) { .kt-btn, a.kt-card, .kt-btn-text .kt-icon, .kt-btn-coral.kt-btn-lg::after, .kt-mbar, .kt-mbar.is-shown, .kt-route, .kt-route-arrow, .kt-faq summary, .kt-faq summary .kt-icon, .kt-subnav a, .kt-jumps a, .kt-more-fields > summary::after { transition: none; } html.kt-menu-ready .kt-nav { transition: none; transform: none; } .kt-btn:hover, .kt-btn:active { transform: none; } a.kt-card:hover { translate: none; } .kt-js .kt-reveal { opacity: 1; transform: none; transition: none; } /* 送信中の輪は回さず、ゆっくり明滅させる(動かさない) */ .kt-spinner { animation: kt-pulse 1.2s ease-in-out infinite; } } /* ============ 印刷 ============ */ @media print { .kt-js .kt-reveal, .kt-anim .kt-toru-title span { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .kt-anim .kt-toru-title b { background-size: 100% 100% !important; animation: none !important; } .kt-anim .kt-toru-fig .kt-tf-link { transform: none !important; animation: none !important; } .kt-anim .kt-toru-fig .kt-tf-src li::after { opacity: 1 !important; animation: none !important; } .kt-anim .kt-step .kt-bar > span { width: 64% !important; animation: none !important; } .kt-anim .kt-ev .kt-hl { background-color: var(--teal-light) !important; animation: none !important; } .kt-anim .kt-ev .kt-ev-svg { opacity: 1 !important; animation: none !important; } .kt-mbar, .kt-menu-btn, .kt-ev-replay { display: none !important; } body.kt-has-mbar { padding-bottom: 0 !important; } } /* ============ 検証の状況(トップ・前提の下の帯) ============ 静的なカード(病院・クリニック)は枠だけ、押せる募集カードだけ影を付ける(サイト共通の約束) */ .kt-adopt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: center; } .kt-adopt .kt-eyebrow { margin-bottom: var(--space-2); } .kt-adopt-title { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: var(--lh-head); font-weight: 700; letter-spacing: -0.01em; } .kt-adopt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } .kt-adopt-list > li { box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-white); border: var(--hairline) solid var(--line); box-shadow: none; } .kt-adopt-t { display: block; font-size: var(--fs-18); font-weight: 700; line-height: var(--lh-head); color: var(--ink); font-feature-settings: "palt" 1; word-break: keep-all; overflow-wrap: anywhere; line-break: strict; } @supports (word-break: auto-phrase) { .kt-adopt-t { word-break: auto-phrase; } } .kt-adopt-d { display: block; margin-top: 2px; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink-muted); } .kt-adopt-list > .kt-adopt-cta { grid-column: 1 / -1; padding: 0; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease-out); } .kt-adopt-cta a { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; box-sizing: border-box; padding: var(--space-4); border-radius: calc(var(--radius-md) - var(--hairline)); color: inherit; text-decoration: none; } .kt-adopt-cta .kt-adopt-t { font-size: var(--fs-16); } .kt-adopt-go { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; font-size: var(--fs-14); font-weight: 700; color: var(--teal); } .kt-adopt-cta a:focus-visible { box-shadow: var(--focus-ring); } @media (hover: hover) { .kt-adopt-list > .kt-adopt-cta:hover { box-shadow: var(--shadow-2); } .kt-adopt-cta a:hover .kt-adopt-go { text-decoration: underline; text-underline-offset: 4px; } } @container (max-width: 479px) { .kt-adopt-list { grid-template-columns: minmax(0, 1fr); } } @container (min-width: 60em) { .kt-adopt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); } }