:root{
  /* === Mono base（既存） === */
  --color-bg:#FFFFFF;
  --color-bg-base:#FFFFFF;        /* 明示的な「モノクロームの基準色」エイリアス */
  --color-ink:#1A1A1A;
  --color-sub:#4A4A4A;
  --color-mute:#767676;
  --color-line:#E5E5E5;
  --color-line-soft:#EEEEEE;

  /* === Brand 3色（本番昇格・外科手術のような正確さで使うこと） === */
  --color-iki:    #00A3D9;        /* 粋 — 知性・進行・信頼（focus / 進行ステップ / メインデータ） */
  --color-miyabi: #8C55A0;        /* 雅 — 比較・伝統（rival / 副次データ） */
  --color-nobori: #F58220;        /* 幟 — 行動への熱量（CTA / FAB / オファー喚起のみ） */

  /* === Brand tint variants（よく使う透明度を事前定義してインライン rgba を排除） === */
  --color-iki-soft:    rgba(0,163,217,.10);
  --color-iki-line:    rgba(0,163,217,.35);
  --color-miyabi-soft: rgba(140,85,160,.10);
  --color-nobori-soft: rgba(245,130,32,.12);
  --color-nobori-line: rgba(245,130,32,.40);

  /* === Status colors（赤エラーは GitHub 互換、緑は既存 LINE のみ） === */
  --color-error:       #cf222e;
  --color-error-soft:  rgba(207,34,46,.05);
  --color-error-line:  rgba(207,34,46,.25);

  /* === Breakpoint design tokens（参照用。CSS @media には JS ヘルパーで） === */
  --bp-sm: 480px;                 /* 縦長スマホ */
  --bp-md: 768px;                 /* タブレット境界（Apple iPad mini 横 / nav 切替点） */
  --bp-lg: 1024px;                /* デスクトップ境界 */
  --bp-xl: 1280px;                /* ワイド */

  /* === 既存トークン === */
  --font-jp:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --font-en:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --max:1120px;
  --pad-x:clamp(20px,4vw,32px);
  --section-pad:clamp(96px,12vw,160px);
  --section-pad-tight:clamp(56px,8vw,96px);
  --radius:4px;
  --line-tight:1.55;
  --line-base:1.85;
  --line-relax:2.05;
}
html{scroll-behavior:smooth}

/* ---------- skip link ---------- */
.skip-link{position:absolute;top:-48px;left:12px;background:var(--color-ink);color:#fff;padding:10px 16px;border-radius:var(--radius);font-size:14px;z-index:100;transition:top .15s}
.skip-link:focus{top:12px}

body{
  font-family:var(--font-jp);
  font-size:16px;
  line-height:var(--line-base);
  color:var(--color-ink);
  background:var(--color-bg);
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media(min-width:768px){body{font-size:17px}}

/* ---------- layout ---------- */
.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-x)}
.section{padding-block:var(--section-pad)}
.section--tight{padding-block:clamp(48px,7vw,80px)}
.section--alt{background:#FAFAFA}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--font-jp);line-height:1.35;letter-spacing:.02em}
.h1{font-size:clamp(32px,5.5vw,60px);font-weight:700;letter-spacing:.04em}
.h2{
  font-size:clamp(26px,3.6vw,40px);
  font-weight:700;
  letter-spacing:.03em;
  line-height:1.5;
  margin-bottom:.8em;
}
.h2__accent{
  display:inline-block;
  position:relative;
  font-size:1.28em;
  letter-spacing:.02em;
  padding:0 .08em;
}
@media(max-width:480px){
  .h2__accent{font-size:1.15em;letter-spacing:.01em}
}
.h2__accent::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:.05em;
  height:2px;
  background:var(--color-ink);
}
.h3{font-size:clamp(18px,2vw,24px);font-weight:500;margin-bottom:.5em}
.lead{font-size:clamp(16px,1.8vw,18px);color:var(--color-sub);max-width:52ch}
.small{font-size:14px;color:var(--color-sub)}
.en{font-family:var(--font-en);letter-spacing:.08em}
.center{text-align:center}
.eyebrow{font-family:var(--font-en);font-size:13px;letter-spacing:.24em;color:var(--color-mute);text-transform:uppercase;margin-bottom:1.2em;display:block}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-line);z-index:50}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.site-header__logo{display:flex;align-items:center;gap:12px}
.site-header__logo img{height:40px;width:40px;flex-shrink:0}
.site-header__logo-text{display:flex;flex-direction:column;line-height:1.15}
.site-header__logo-text small{font-size:10px;letter-spacing:.2em;color:var(--color-sub);margin-bottom:2px}
.site-header__logo-text strong{font-size:18px;font-weight:700;letter-spacing:.14em;color:var(--color-ink)}
@media(max-width:480px){
  .site-header__logo-text small{font-size:9px;letter-spacing:.15em}
  .site-header__logo-text strong{font-size:15px}
}
.nav{display:none}
.nav>ul{display:flex;gap:clamp(16px,2.4vw,32px);align-items:center}
/* ベースの色とサイズは全 nav リンクに（dropdown 含む）*/
.nav a{font-size:14px;color:var(--color-sub);transition:color .15s}
.nav a:hover{color:var(--color-ink)}
.nav a[aria-current="page"]{color:var(--color-ink);font-weight:500}
/* 上段（ヘッダー直下の項目）だけ inline-flex + line-height:1 で揃える。
   dropdown 内の <a>（strong+small が縦積み）には適用しない。 */
.nav>ul>li>a{display:inline-flex;align-items:center;line-height:1}
/* WCAG 2.5.5 AAA / Apple HIG 準拠：最低 44×44px のタップ領域 */
.nav-toggle{
  width:44px;height:44px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;padding:0;
  background:transparent;border:0;cursor:pointer;
  border-radius:8px;
  transition:background-color .15s ease;
}
.nav-toggle:hover{background:var(--color-line-soft)}
.nav-toggle:focus-visible{
  outline:2px solid var(--color-iki);outline-offset:2px;
  background:var(--color-line-soft);
}
@media(min-width:768px){
  .nav{display:block}
  .nav-toggle{display:none}
}
.nav-toggle span{display:block;width:24px;height:1.5px;background:var(--color-ink);transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.nav-mobile{display:none;border-top:1px solid var(--color-line);background:#fff}
.nav-mobile.open{display:block}
.nav-mobile ul{display:flex;flex-direction:column}
.nav-mobile li{border-bottom:1px solid var(--color-line)}
.nav-mobile a{display:block;padding:18px var(--pad-x);font-size:15px}
@media(min-width:768px){.nav-mobile{display:none!important}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 32px;
  border:1px solid var(--color-ink);background:var(--color-ink);color:#fff;
  font-size:15px;font-weight:500;border-radius:var(--radius);
  /* ハプティック：押し込み→復元の物理感 */
  transform:translateY(0) scale(1);
  transition:background .15s,color .15s,transform .12s ease,box-shadow .12s ease;
  /* モバイル 300ms delay 除去 + タップハイライト消去 */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{background:#000;transform:translateY(-2px) scale(1.005);box-shadow:0 8px 20px rgba(0,0,0,.12)}
/* 沈み込み：素早く押し込み、ゆっくり戻る（バネ感） */
.btn:active{
  transform:translateY(2px) scale(0.97);
  box-shadow:0 1px 4px rgba(0,0,0,.10);
  transition-duration:.04s;
}
.btn--ghost{background:transparent;color:var(--color-ink)}
.btn--ghost:hover{background:var(--color-ink);color:#fff;transform:translateY(-2px) scale(1.005)}
.btn--large{padding:20px 44px;font-size:16px}
.btn__arrow{transition:transform .2s}
.btn:hover .btn__arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .btn{transform:none!important;transition:background .15s,color .15s!important}
}
/* LINE button — KOHO の白黒に LINE 緑のアクセント。アイコンだけ緑、ボタン本体は KOHO トーン */
.btn--line{background:#06C755;border-color:#06C755;color:#fff}
.btn--line:hover{background:#05B84B;border-color:#05B84B;transform:translateY(-1px)}
.btn--line svg{width:18px;height:18px;flex-shrink:0}

/* LINE CTA block (used on contact / top / sections) */
.line-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:24px 32px;
  padding:24px;
  border:1px solid var(--color-line);
  border-radius:var(--radius);
  background:#fff;
}
.line-cta__copy{flex:1 1 240px;min-width:0}
.line-cta__lead{font-size:15px;line-height:1.7;color:var(--color-ink);margin-bottom:14px}
.line-cta__note{font-size:12px;color:var(--color-mute);margin-top:10px;letter-spacing:.04em}
.line-cta__qr{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:11px;color:var(--color-mute);letter-spacing:.18em;text-transform:uppercase;
}
.line-cta__qr img{width:120px;height:120px;display:block;border-radius:8px}
@media(max-width:560px){
  .line-cta{flex-direction:column;align-items:stretch;text-align:center}
  .line-cta__qr{display:none} /* スマホからは LINE ボタンタップで完結するため QR は不要 */
}

/* ---------- generic cards / lists ---------- */
.card{border:1px solid var(--color-line);padding:clamp(28px,3vw,40px);border-radius:var(--radius);background:#fff}
.grid{display:grid;gap:clamp(20px,2.4vw,32px)}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:720px){
  .grid--2{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1000px){.grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- tables ---------- */
.spec-table{width:100%;border-top:1px solid var(--color-line)}
.spec-table th,.spec-table td{text-align:left;padding:18px 12px;border-bottom:1px solid var(--color-line);vertical-align:top;font-weight:400}
.spec-table th{width:34%;color:var(--color-sub);font-weight:500}
@media(max-width:640px){
  .spec-table th,.spec-table td{display:block;padding:8px 0;border:0}
  .spec-table tr{display:block;border-bottom:1px solid var(--color-line);padding-block:16px}
  .spec-table th{width:auto;font-size:13px;color:var(--color-mute)}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--color-line);padding-block:64px 32px;background:#fff;margin-top:120px}
.site-footer__grid{display:grid;gap:40px;grid-template-columns:1fr}
@media(min-width:800px){.site-footer__grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h4{font-size:12px;letter-spacing:.2em;color:var(--color-mute);margin-bottom:16px;text-transform:uppercase;font-family:var(--font-en)}
.site-footer ul li{margin-bottom:10px}
.site-footer a{color:var(--color-sub);font-size:14px;transition:color .15s}
.site-footer a:hover{color:var(--color-ink)}
.site-footer__info p{font-size:14px;color:var(--color-sub);margin-bottom:8px}
.site-footer__info p.site-footer__blurb{font-size:12px;line-height:1.85;color:var(--color-mute);letter-spacing:.02em;margin-top:16px;max-width:34em}
.site-footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.site-footer__brand img{height:40px;width:40px;flex-shrink:0}
.site-footer__brand-text{display:flex;flex-direction:column;line-height:1.15}
.site-footer__brand-text small{font-size:10px;letter-spacing:.2em;color:var(--color-sub);margin-bottom:2px}
.site-footer__brand-text strong{font-size:18px;font-weight:700;letter-spacing:.14em;color:var(--color-ink)}
.site-footer__bottom{border-top:1px solid var(--color-line);margin-top:48px;padding-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.site-footer__bottom p{font-size:12px;color:var(--color-mute)}
.translate-btn{font-size:12px;color:var(--color-sub);border:1px solid var(--color-line);padding:6px 14px;border-radius:var(--radius);background:#fff;cursor:pointer}
.translate-btn:hover{border-color:var(--color-ink)}
#google_translate_element{display:inline-block}

/* ---------- share ---------- */
.share{display:flex;gap:10px;align-items:center;justify-content:center;padding:48px 0;border-top:1px solid var(--color-line);max-width:var(--max);margin-inline:auto}
.share span{font-size:12px;color:var(--color-mute);letter-spacing:.1em;margin-right:8px}
.share a{
  width:44px;height:44px;          /* WCAG 2.5.5 AAA / Apple HIG */
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--color-line);border-radius:999px;
  color:var(--color-sub);
  transition:border-color .15s,color .15s,background .15s,transform .15s;
}
.share a:hover{border-color:var(--color-ink);color:#fff;background:var(--color-ink);transform:translateY(-1px)}
.share a:focus-visible{outline:2px solid var(--color-iki);outline-offset:2px}
.share a svg{width:16px;height:16px}

/* ---------- utilities ---------- */
.flow > * + *{margin-top:1em}
.divider{height:1px;background:var(--color-line);border:0;margin-block:48px}
.tag{display:inline-block;font-size:12px;letter-spacing:.1em;color:var(--color-sub);border:1px solid var(--color-line);padding:4px 10px;border-radius:999px}
.visually-hidden{position:absolute;clip:rect(0 0 0 0);width:1px;height:1px;overflow:hidden;white-space:nowrap}

/* ---------- print ---------- */
@media print{
  .site-header,.site-footer,.share,.cta{display:none}
  .section{padding-block:24px}
  body{font-size:12pt;color:#000}
}

/* ===== Apple/無印 inspired: line icons & visual primitives ===== */

/* 共通アイコン基本クラス（24×24, 1.5px stroke, currentColor） */
.icon{
  width:24px;height:24px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.icon--lg{width:32px;height:32px}
.icon--xl{width:40px;height:40px;stroke-width:1.4}
.icon--2xl{width:56px;height:56px;stroke-width:1.2}
.icon--mute{color:var(--color-mute)}
.icon--ink{color:var(--color-ink)}

/* 罫線でなく余白で区切る、Apple/無印的なセクション境界 */
.section--airy{padding-block:var(--section-pad)}
.section--tight-airy{padding-block:var(--section-pad-tight)}

/* ===== Apple/無印 inspired: scroll-triggered animations ===== */

/* 共通フェード on scroll */
[data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-reveal].is-revealed{opacity:1;transform:translateY(0)}

/* Stagger children */
[data-stagger] > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
[data-stagger] > *.is-revealed{opacity:1;transform:translateY(0)}

/* SVG path 描画アニメ */
[data-draw]{
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.6s cubic-bezier(.55,.05,.22,.99);
}
[data-draw].is-drawn{stroke-dashoffset:0}

/* Reduced motion 配慮 */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  [data-draw]{stroke-dashoffset:0!important;transition:none!important}
}

/* sticky header をスクロールで縮小 */
.site-header.is-scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:rgba(229,229,229,.6);
}
.site-header.is-scrolled .site-header__inner{height:56px;transition:height .25s ease}
.site-header__inner{transition:height .25s ease}

/* ========================================================
 * W1: 静的サイト最新技術の基礎升级（progressive enhancement）
 * ======================================================== */

/* text-wrap: balance / pretty — 見出しと段落の自然改行 */
h1, h2, h3, .h1, .h2, .h3 {
  text-wrap: balance;
}
p, li {
  text-wrap: pretty;
}

/* :focus-visible — Apple級の精緻なキーボードフォーカス */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
  border-radius: 2px;
  transition: outline-offset .15s ease;
}
.btn:focus-visible {
  outline-offset: 4px;
}
a:focus-visible {
  outline-offset: 2px;
}

/* content-visibility: auto — 長いページのオフスクリーン省略 */
.section,
.lp-hero,
.problems,
.reasons,
.faq-list,
.timeline,
.misconceptions {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
/* hero/page-headは即時表示（contain-visibilityなし） */

/* CSS @layer — 優先順位の明示化（既存スタイルとの衝突を避けるため、
   今回は新規ユーティリティ層のみ。既存全面置換は別フェーズで） */
@layer utilities {
  .u-text-balance { text-wrap: balance; }
  .u-text-pretty { text-wrap: pretty; }
  .u-cv-auto { content-visibility: auto; contain-intrinsic-size: auto 500px; }
}

/* KOHOは白黒ミニマル一択。OS のダークモード設定を完全ブロック。
   `only` キーワード：フォーム・スクロールバー等のシステムUIもライトモードに強制 */
:root { color-scheme: only light; }

/* ========================================================
 * W2: animation-timeline (CSS Scroll-driven animations)
 * Chrome 115+, Safari 26+ の最新仕様
 * 旧ブラウザは IntersectionObserver (anims.js) にフォールバック
 * ======================================================== */

@supports (animation-timeline: view()) {
  /* JSのIntersectionObserverと併存させず、CSSが優先で動く */
  [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    animation: kohoReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
  [data-stagger] > * {
    opacity: 0;
    transform: translateY(16px);
    animation: kohoReveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  /* JSが追加する .is-revealed クラスとの衝突を回避：
     CSSでアニメーションが完了したら、状態をJSにも合わせる必要はない */
  [data-reveal].is-revealed,
  [data-stagger] > *.is-revealed {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes kohoReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* mask-image: gradient — 画像の縁を自然にフェード（Apple的） */
.u-mask-fade-bottom {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
.u-mask-fade-edges {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* sticky header の backdrop-filter を強化（Apple ガラス） */
.site-header {
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.site-header.is-scrolled {
  -webkit-backdrop-filter: saturate(200%) blur(16px);
  backdrop-filter: saturate(200%) blur(16px);
  background: rgba(255, 255, 255, .82);
}

/* ========================================================
 * W3: View Transitions API + `<details name>` 排他 + scroll-snap
 * ======================================================== */

/* View Transitions — ページ遷移時の滑らかなクロスフェード
   Chrome 111+, Safari 18+ で動作、それ以外は通常のページ切替 */
@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: .35s;
}
::view-transition-old(root) {
  animation: kohoFadeOut .35s ease forwards;
}
::view-transition-new(root) {
  animation: kohoFadeIn .35s ease forwards;
}
@keyframes kohoFadeOut {
  to { opacity: 0; transform: scale(.98); }
}
@keyframes kohoFadeIn {
  from { opacity: 0; transform: scale(1.02); }
}
/* 共通要素（hero / 代表写真）は continuous transition */
.site-header { view-transition-name: site-header; }

/* `<details name="xxx">` 排他アコーディオン（FAQ向け）
   一度に1つしか開かない。Chrome 120+, Safari 17.2+ */
.faq-list details {
  border-bottom: 1px solid var(--color-line);
}
.faq-list details[open] summary {
  background: rgba(0,0,0,.02);
}

/* scroll-snap — 業界別ハブ等で横スワイプ */
.u-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}
.u-snap-x > * {
  scroll-snap-align: start;
}

/* `<dialog>` のスタイリング基本（LP popup を <dialog> 化する場合用） */
dialog::backdrop {
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}
dialog {
  border: none;
  border-radius: 8px;
  padding: 32px;
  max-width: 460px;
  margin: auto;
}

/* :has() で兄弟要素の状態に応じてスタイル変更（最新 CSS）
   例：何か入力が無効なフォームでは送信ボタンを薄く */
.contact-form:has(input.is-invalid, select.is-invalid, textarea.is-invalid) .contact-form__submit {
  opacity: .55;
}

/* container queries 用の最小例 */
@container (min-width: 640px) {
  .service-card .service-card__title { font-size: 22px; }
}

/* ============================================================
   Footer Creed — 全ページに KOHO の哲学 4 行を表示
   ============================================================ */
.site-footer__creed{
  border-block:1px solid var(--color-line);
  padding-block:32px;
  margin-bottom:48px;
}
.site-footer__creed ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:8px 32px;
  font-size:14px; font-weight:500; color:var(--color-ink);
  letter-spacing:.02em; line-height:1.7;
  text-align:center;
}
.site-footer__creed li{
  position:relative;
  padding:0 4px;
}
.site-footer__creed li:not(:last-child)::after{
  content:"／";
  position:absolute; right:-20px; top:0;
  color:var(--color-line);
}
@media(max-width:760px){
  .site-footer__creed ul{flex-direction:column; gap:10px}
  .site-footer__creed li:not(:last-child)::after{display:none}
}

/* ========================================================
 * View Transitions API — ページ遷移をネイティブアプリ級に
 * @view-transition は同一オリジン遷移にのみ適用される。
 * Chrome 126+, Safari 18.2+。未対応ブラウザは従来の遷移にフォールバック。
 * ======================================================== */
@view-transition {
  navigation: auto;
}

@keyframes vt-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(12px); }
}

::view-transition-old(root) {
  animation: 180ms ease forwards vt-out;
}
::view-transition-new(root) {
  animation: 280ms cubic-bezier(.22,.6,.36,1) forwards vt-in;
}

/* reduced-motion: トランジションを最短に */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}