:root{
/* Meridian Navy — accent: buttons, headline ink, badges. Not a background colour for large areas. */
--navy-950:#0b1426;--navy-900:#101b33;--navy-800:#14213d;--navy-700:#1f3157;--navy-600:#2d4270;--navy-500:#4a5d85;--navy-400:#6f7fa1;--navy-300:#9aa6bf;--navy-200:#c3cad9;--navy-100:#dfe3ec;--navy-50:#f1f3f7;
/* Vermilion — accent (朱色) */
--vermilion-50:#fcf0ec;--vermilion-100:#f8ddd5;--vermilion-200:#f0baa9;--vermilion-300:#e8947e;--vermilion-400:#e0634a;--vermilion-500:#c8472b;--vermilion-600:#ad3b22;--vermilion-700:#8f301c;--vermilion-800:#6f2616;
/* Washi neutrals — warm paper greys */
--paper:#fbfaf7;--stone-50:#f5f4f0;--stone-100:#ebe9e3;--stone-200:#d9d6ce;--stone-300:#bfbbb1;--stone-400:#a19d93;--stone-500:#827e75;--stone-600:#6b675f;--stone-700:#4f4c46;--stone-800:#36332e;--ink:#1a1a1a;--white:#ffffff;
/* Semantic */
--success-600:#2f7a4b;--success-50:#edf6f0;--warning-600:#a86a12;--warning-50:#fbf4e8;--danger-600:#b3261e;--danger-50:#fbeeed;--info-600:var(--vermilion-600);--info-50:var(--vermilion-50);
/* Aliases */
--brand-primary:var(--navy-800);--brand-accent:var(--vermilion-500);
--surface-page:var(--white);--surface-soft:var(--paper);--surface-card:var(--white);--surface-muted:var(--paper);--surface-inverse:var(--navy-800);--surface-inverse-deep:var(--navy-950);--surface-accent-soft:var(--vermilion-50);
--text-primary:var(--navy-900);--text-body:var(--stone-800);--text-secondary:var(--stone-600);--text-tertiary:var(--stone-500);--text-inverse:var(--white);--text-inverse-muted:var(--navy-200);--text-link:var(--vermilion-600);--text-link-hover:var(--vermilion-700);--text-accent:var(--vermilion-600);--text-on-inverse-accent:var(--vermilion-300);
--border-hairline:var(--stone-200);--border-subtle:var(--stone-100);--border-strong:var(--navy-800);--border-inverse:rgba(255,255,255,.14);--border-focus:var(--vermilion-500);
--action-primary:var(--navy-800);--action-primary-hover:var(--navy-700);--action-primary-pressed:var(--navy-950);--action-accent:var(--vermilion-600);--action-accent-hover:var(--vermilion-700);
/* Gradients — the "subtle gradient" motif, East → Meridian */
--gradient-meridian:linear-gradient(90deg,var(--navy-950) 0%,var(--navy-800) 55%,#17304a 100%);/* accent only: a small navy panel, never a full-width band */
--gradient-wash:radial-gradient(640px 420px at 88% 8%,rgba(200,71,43,.09),transparent 70%),radial-gradient(560px 420px at 4% 96%,rgba(20,33,61,.06),transparent 70%),var(--white);
--gradient-soft:linear-gradient(135deg,var(--vermilion-50) 0%,var(--paper) 50%,var(--navy-50) 100%);
--gradient-dawn:linear-gradient(180deg,var(--white) 0%,var(--paper) 100%);
--gradient-rule:linear-gradient(90deg,var(--vermilion-500) 0%,rgba(200,71,43,0) 100%);
}

:root{
--font-serif:'Source Serif 4','Noto Serif JP','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;
--font-sans:'IBM Plex Sans','IBM Plex Sans JP','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
--font-display:var(--font-sans);/* headlines are sans bold since 2026-10-20; --font-serif stays for rare editorial use */--font-text:var(--font-sans);
--weight-regular:400;/* @kind font */--weight-medium:500;/* @kind font */--weight-semibold:600;/* @kind font */--weight-bold:700;/* @kind font */--weight-display:700;/* @kind font */
--fs-display-xl:72px;--lh-display-xl:1.15;/* @kind font */--ls-display-xl:-0.02em;/* @kind font */
--fs-display-l:56px;--lh-display-l:1.2;/* @kind font */--ls-display-l:-0.015em;/* @kind font */
--fs-h1:44px;--lh-h1:1.25;/* @kind font */--ls-h1:-0.01em;/* @kind font */
--fs-h2:34px;--lh-h2:1.35;/* @kind font */--ls-h2:-0.005em;/* @kind font */
--fs-h3:26px;--lh-h3:1.4;/* @kind font */
--fs-h4:20px;--lh-h4:1.5;/* @kind font */
--fs-body-l:18px;--lh-body-l:1.75;/* @kind font */
--fs-body:16px;--lh-body:1.85;/* @kind font */
--fs-small:14px;--lh-small:1.65;/* @kind font */
--fs-caption:12px;--lh-caption:1.5;/* @kind font */
--fs-eyebrow:12px;--ls-eyebrow:0.18em;/* @kind font */
--lh-jp-bonus:0.1;/* @kind font */
}

:root{
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--container-max:1200px;--container-wide:1360px;--container-text:680px;--gutter:24px;--section-y:var(--space-9);
--header-height:72px;/* @kind spacing */
}

:root{
--radius-0:0;--radius-1:2px;--radius-2:4px;--radius-3:8px;--radius-4:16px;--radius-5:20px;--radius-6:28px;--radius-pill:999px;
--radius-control:var(--radius-pill);--radius-card:var(--radius-5);--radius-media:var(--radius-6);--radius-panel:32px;
--border-width:1px;/* @kind other */
--shadow-0:none;--shadow-1:0 1px 2px rgba(11,20,38,.06);--shadow-2:0 6px 20px rgba(11,20,38,.07);--shadow-3:0 20px 48px rgba(11,20,38,.12);
--shadow-card:0 1px 2px rgba(11,20,38,.04),0 8px 24px rgba(11,20,38,.05);--shadow-card-hover:0 2px 4px rgba(11,20,38,.04),0 20px 44px rgba(11,20,38,.10);--shadow-button:0 8px 20px rgba(20,33,61,.18);
--focus-ring:0 0 0 2px var(--white),0 0 0 4px var(--vermilion-500);
--ease-standard:cubic-bezier(.2,0,0,1);/* @kind other */--ease-exit:cubic-bezier(.4,0,1,1);/* @kind other */
--duration-fast:120ms;/* @kind other */--duration-base:200ms;/* @kind other */--duration-slow:360ms;/* @kind other */
--blur-header:saturate(1.4) blur(14px);/* @kind other */
}

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body)}
a{color:var(--text-link);text-decoration:none}a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
:lang(ja){line-break:strict;word-break:normal;overflow-wrap:anywhere}
::selection{background:var(--vermilion-100);color:var(--navy-900)}

:root{--font-logo:'Helvetica Neue',Helvetica,Arial,sans-serif}

/* site shell */
html{color-scheme:light}
body{margin:0;background:#ffffff;color:var(--text-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#ffffff}
.em-nav > a[aria-current="page"]{border-bottom:1px solid var(--vermilion-500)}
.em-menu{border:0;background:transparent;padding:0;cursor:pointer;border-radius:8px}
.em-menu:focus-visible,.em-mnav a:focus-visible{outline:2px solid var(--vermilion-500);outline-offset:2px}
.em-menu .i-close{display:none}
.em-menu[aria-expanded="true"] .i-open{display:none}
.em-menu[aria-expanded="true"] .i-close{display:block}
.em-mnav{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 76px);overflow-y:auto;display:flex;flex-direction:column;gap:24px;padding:8px 20px 32px;box-sizing:border-box;background:#ffffff;border-bottom:1px solid var(--stone-200);box-shadow:0 20px 40px rgba(11,20,38,.08);font-family:var(--font-sans)}
.em-mnav[hidden]{display:none}
.em-mnav nav{display:flex;flex-direction:column}
.em-mnav nav a,.em-mnav-group{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--stone-200);font-size:16px;font-weight:600;color:var(--navy-900);text-decoration:none}
.em-mnav-group{font-size:13px;font-weight:600;color:var(--stone-600);border-bottom:0;min-height:44px;padding-top:8px}
.em-mnav nav a.em-mnav-sub{min-height:48px;padding-left:16px;font-size:15px;font-weight:500;color:var(--navy-800)}
.em-mnav nav a[aria-current="page"]{color:var(--vermilion-700)}
.em-mnav-cta{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;background:var(--navy-800);color:#ffffff;font-size:15px;font-weight:600;text-decoration:none}
.em-mnav-cta:hover{color:#ffffff;background:var(--navy-700)}
html.em-menu-open{overflow:hidden}
@media (min-width:861px){.em-mnav{display:none !important}}
.c-demo-note{margin:0;padding:14px 16px;border-radius:8px;background:var(--navy-50);font-size:14px;line-height:1.7;color:var(--navy-900)}
.c-demo-note[hidden]{display:none}
[id]{scroll-margin-top:96px}
.em-dd{position:relative;display:flex;align-items:center}
.em-dd-trigger{display:inline-flex;align-items:center;gap:6px}
.em-dd-trigger[data-current="true"]{border-bottom:1px solid var(--vermilion-500)}
.em-dd-chev{transition:transform .2s var(--ease-standard)}
.em-dd-panel{position:absolute;top:100%;left:50%;width:460px;padding-top:26px;transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .16s var(--ease-standard),transform .16s var(--ease-standard),visibility 0s linear .16s;z-index:40}
.em-dd:hover .em-dd-panel,.em-dd:focus-within .em-dd-panel,.em-dd.is-open .em-dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.em-dd.is-closed .em-dd-panel{opacity:0;visibility:hidden}
.em-dd:hover .em-dd-chev,.em-dd:focus-within .em-dd-chev,.em-dd.is-open .em-dd-chev{transform:rotate(180deg)}
.em-dd-box{display:flex;flex-direction:column;padding:8px 28px 20px;background:#ffffff;border:1px solid var(--stone-200);border-radius:12px;box-shadow:0 20px 48px rgba(11,20,38,.12)}
.em-dd-list{display:flex;flex-direction:column}
.em-dd-list a{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-bottom:1px solid var(--stone-200);text-decoration:none}
.em-dd-list b{font-size:15px;font-weight:700;line-height:1.5;color:var(--navy-900)}
.em-dd-list span{font-size:13px;font-weight:400;line-height:1.6;letter-spacing:0;color:var(--stone-600)}
.em-dd-list a:hover b,.em-dd-list a:focus-visible b,.em-dd-list a[aria-current="page"] b{color:var(--vermilion-700)}
.em-dd-list a:hover,.em-dd-all:hover{text-decoration:none}
.em-dd-all{align-self:flex-start;margin-top:14px;font-size:13px;font-weight:600;color:var(--navy-800);text-decoration:none}
.em-dd-all:hover{color:var(--vermilion-700)}
.em-dd a:focus-visible{outline:2px solid var(--vermilion-500);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important}.em-dd-panel,.em-dd-chev{transition:none}}
html{scroll-behavior:smooth}

/* ===== 動き（洗練版だけ。Ryo「サイト全体に、やりすぎない程度の動きを。ポイントの図も」2026-10-30）=====
   html.em-motion は motion.js が付ける。付かないとき（スクリプトなし・動きを減らす設定）は、すべて静止して見えたまま。
   既存のホバー（transform）と重ならないよう、動きは translate / scale / clip-path / opacity だけで付ける。 */
:root{--mo-ease:cubic-bezier(.2,.7,.2,1);--mo-pop:cubic-bezier(.3,1.5,.5,1)}

/* 1. 見えたら、少し下からふわっと（同時に見えたものは --i の順に少しずつ） */
html.em-motion .mo:not(.in){opacity:0}
html.em-motion .mo.in{animation:mo-up .8s var(--mo-ease) calc(var(--i,0) * 90ms) backwards}
@keyframes mo-up{from{opacity:0;translate:0 20px}}
@keyframes mo-fade{from{opacity:0}}
@keyframes mo-left{from{opacity:0;translate:-12px 0}}
@keyframes mo-pop{from{opacity:0;scale:.6}}
@keyframes mo-drop{from{opacity:0;translate:0 -16px}}
@keyframes mo-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mo-line-x{from{scale:0 1}}
@keyframes mo-line-y{from{scale:1 0}}

/* ヒーローの写真は、ゆっくり寄ってから落ち着く */
html.em-motion .s-photo{animation:mo-photo 1.6s var(--mo-ease) .1s backwards}
@keyframes mo-photo{from{opacity:0;scale:1.04}}

/* 見出しの朱の細線と、ポイント番号の線は、左から引く */
html.em-motion .r-label.mo::before,html.em-motion .sp-txt .num::after{transform-origin:left center}
html.em-motion .r-label.mo.in::before{animation:mo-line-x .9s var(--mo-ease) calc(var(--i,0) * 90ms + .2s) backwards}
html.em-motion .sp-txt.mo.in .num::after{animation:mo-line-x .9s var(--mo-ease) calc(var(--i,0) * 90ms + .3s) backwards}
/* 「かかりつけ医」「未来の社員」の下線は、見出しのあとに浮かぶ */
html.em-motion .mo.in .r-mark{animation:mo-mark 1s ease calc(var(--i,0) * 90ms + .6s) backwards}
@keyframes mo-mark{from{text-decoration-color:transparent}}
/* トップの3ステップをつなぐ線 */
html.em-motion .r-steps.mo-t::before{transform-origin:left center}
html.em-motion .r-steps.mo-t:not(.in)::before{scale:0 1}
html.em-motion .r-steps.mo-t.in::before{animation:mo-line-x 1.2s var(--mo-ease) .25s backwards}
@media (max-width:860px){
html.em-motion .r-steps.mo-t::before{transform-origin:center top}
html.em-motion .r-steps.mo-t:not(.in)::before{scale:1 0}
html.em-motion .r-steps.mo-t.in::before{animation-name:mo-line-y}
}

/* 2. ポイントの図：枠が出たあと、中身を順に描く（--k は順番、--n は数。motion.js が付ける） */
html.em-motion .sp-vis{--d0:.35s;--st:.12s}
/* 番号付きの流れ：上から1行ずつ、番号をつなぐ点線は上から下へ、担当の札はあとからぽんと */
html.em-motion .sp-vis.in .vz-flow>li{animation:mo-left .6s var(--mo-ease) calc(var(--d0) + var(--k,0) * var(--st)) backwards}
html.em-motion .sp-vis.in .vz-flow::before{transform-origin:center top;animation:mo-line-y calc(.3s + var(--n,4) * var(--st)) ease-out calc(var(--d0) + .1s) backwards}
html.em-motion .sp-vis.in .vz-flow .who{animation:mo-pop .45s var(--mo-pop) calc(var(--d0) + .25s + var(--k,0) * var(--st)) backwards}
/* 大事なステップの番号は、最後にスタンプのように押す */
html.em-motion .sp-vis.in .vz-flow .hot .st{animation:mo-stamp .55s var(--mo-ease) calc(var(--d0) + .3s + var(--n,4) * var(--st)) backwards}
@keyframes mo-stamp{0%{scale:1;box-shadow:0 0 0 var(--pa-mid)}45%{scale:1.18;box-shadow:0 0 0 var(--pa-mid)}}
/* 料金の比べ方：行ごとに、手数料の積み木が上から落ちてきて、定額の札が横から */
html.em-motion .sp-vis.in .vz-cost>*{animation:mo-fade .5s ease calc(var(--d0) + var(--k,0) * .16s) backwards}
html.em-motion .sp-vis.in .vz-cost .fees i{animation:mo-fade .5s var(--mo-ease) calc(var(--d0) + .1s + var(--k,0) * .16s) backwards}
html.em-motion .sp-vis.in .vz-cost .flat{animation:mo-left .5s var(--mo-ease) calc(var(--d0) + .3s + var(--k,0) * .16s) backwards}
/* 時間の流れ：月の目盛り → 立ち上げの線 → 運用の線 */
html.em-motion .sp-vis.in .vz-months .m span{animation:mo-fade .4s ease calc(var(--d0) + var(--k,0) * .06s) backwards}
html.em-motion .sp-vis.in .vz-months .bars .a{animation:mo-wipe .6s var(--mo-ease) calc(var(--d0) + .45s) backwards}
html.em-motion .sp-vis.in .vz-months .bars .b{animation:mo-wipe 1s var(--mo-ease) calc(var(--d0) + .95s) backwards}
html.em-motion .sp-vis.in .vz-months .vz-cap{animation:mo-up .6s var(--mo-ease) calc(var(--d0) + 1.7s) backwards}
/* 返金のタイムライン：線を引き、印を順に置く */
html.em-motion .sp-vis.in .vz-refund .line::before{animation:mo-wipe 1.1s var(--mo-ease) var(--d0) backwards}
html.em-motion .sp-vis.in .vz-refund .pt{animation:mo-up .55s var(--mo-ease) calc(var(--d0) + .2s + var(--k,0) * .3s) backwards}
html.em-motion .sp-vis.in .vz-refund .pt::before{animation:mo-pop .45s var(--mo-pop) calc(var(--d0) + .2s + var(--k,0) * .3s) backwards}
/* 一覧：項目を順に、印とアイコンはぽんと */
html.em-motion .sp-vis.in .vz-duties>li{animation:mo-left .45s var(--mo-ease) calc(var(--d0) + var(--k,0) * .05s) backwards}
html.em-motion .sp-vis.in .vz-duties>li.hot::before{animation:mo-pop .4s var(--mo-pop) calc(var(--d0) + .2s + var(--k,0) * .05s) backwards}
html.em-motion .sp-vis.in .vz-tiles>div{animation:mo-up .55s var(--mo-ease) calc(var(--d0) + var(--k,0) * .08s) backwards}
html.em-motion .sp-vis.in .vz-rows>li{animation:mo-left .55s var(--mo-ease) calc(var(--d0) + var(--k,0) * var(--st)) backwards}
html.em-motion .sp-vis.in .vz-tiles .vz-i,html.em-motion .sp-vis.in .vz-rows .vz-i{animation:mo-pop .45s var(--mo-pop) calc(var(--d0) + .15s + var(--k,0) * .08s) backwards}
html.em-motion .sp-vis.in .vz-facts>div{animation:mo-up .55s var(--mo-ease) calc(var(--d0) + var(--k,0) * .1s) backwards}
/* 図の下の一文と凡例は、最後に */
html.em-motion .sp-vis.in>.vz-cap,html.em-motion .sp-vis.in .vz-key{animation:mo-up .6s var(--mo-ease) calc(var(--d0) + .35s + var(--n,3) * var(--st)) backwards}
html.em-motion .sp-vis.in .vz-refund+.vz-cap{animation-delay:calc(var(--d0) + 1.3s)}
html.em-motion .sp-vis.in .vz-duties+.vz-key{animation-delay:calc(var(--d0) + .9s)}
/* 実際の画面は、少し寄ってから落ち着く（切り替わる図の中の画像は除く） */
html.em-motion .sp-vis.is-shot:not(.sp-car).in>img{animation:mo-photo 1.4s var(--mo-ease) .1s backwards}

/* 3. さわったときの小さな反応 */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
/* メニュー：下線が左から伸びる */
.em-nav>a,.em-dd-trigger{position:relative}
.em-nav>a:not([aria-current])::after,.em-dd-trigger::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--vermilion-500);transform-origin:left center;scale:0 1;transition:scale .3s var(--mo-ease)}
.em-nav>a:hover::after,.em-dd:hover .em-dd-trigger::after,.em-dd-trigger:focus-visible::after{scale:1 1}
.em-dd-trigger[data-current="true"]::after{display:none}
/* ボタン：少し浮く。矢印は右へ */
.v-btn,.em-cta{transition:background .2s,border-color .2s,color .2s,transform .2s,translate .25s var(--mo-ease),box-shadow .25s}
.v-btn:hover,.em-cta:hover{translate:0 -2px}
.v-btn-primary:hover{box-shadow:0 8px 18px rgba(20,33,61,.16)}
.v-btn span[aria-hidden="true"]{transition:translate .25s var(--mo-ease)}
.v-btn:hover span[aria-hidden="true"]{translate:4px 0}
/* サービスの矢印も、行と一緒に少し先へ */
.r-go{transition:translate .25s var(--mo-ease)}
.r-svc:hover .r-go{translate:4px 0}
/* 図の大事なステップは、図にふれると軽く反応する */
.sp-vis .vz-flow .st{transition:translate .25s var(--mo-ease),box-shadow .25s}
.sp-vis:hover .vz-flow .hot .st{translate:-1px -1px;box-shadow:4px 4px 0 var(--pa-mid)}
}
/* ヘッダー：スクロールすると、うっすら影 */
header{transition:box-shadow .3s ease}
header.em-scrolled{box-shadow:0 8px 24px rgba(11,20,38,.06)}
/* スマホのメニューは、上からすっと */
html.em-motion .em-mnav:not([hidden]){animation:mo-drop .28s var(--mo-ease)}

@media print{html.em-motion .mo,html.em-motion .mo *{opacity:1 !important;animation:none !important}}