/* 見本を単体で開くための最小リセット（本番でも必要） */
body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: 余白の広い縦長の誌面。左に言葉、中央に重なるプロダクト画面、右に細い索引。動きはスクロールに合わせて一度だけ、ゆっくり。 */
:root{
  --paper:#FFFFFF; --panel:#F1EDE9; --ink:#211A16; --ink-soft:#3A312C; --muted:#5E544D;
  --line:rgba(33,26,22,.18); --accent:#2F6B4A;
  --on-ink:#FFFFFF; --on-ink-soft:#E4DDD7; --on-ink-line:rgba(255,255,255,.62);
  --jp:'Shippori Mincho','Yu Mincho','Hiragino Mincho ProN',serif;
  --en:'Jost','Futura','Century Gothic',sans-serif;
  --gutter:clamp(20px,4.5vw,64px);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--jp);font-weight:500;font-size:15px;line-height:2.1;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}
.page{overflow-x:clip}
a{color:inherit}
h1,h2,h3,p,ul,dl,dd,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
img{display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
section[id]{scroll-margin-top:88px}

/* ---------- type ---------- */
.display{font-family:var(--en);font-weight:300;font-size:clamp(36px,4.6vw,64px);line-height:1.14;letter-spacing:-.01em}
.display.xl{font-size:clamp(40px,5.4vw,76px)}
.h2{font-weight:500;font-size:clamp(22px,2.1vw,30px);line-height:1.8;letter-spacing:.1em;text-wrap:balance}
.h2.lg{font-size:clamp(22px,2.4vw,34px);line-height:1.7;letter-spacing:.08em}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:13px;line-height:1.6;letter-spacing:.2em;color:var(--muted)}
.eyebrow.en{font-family:var(--en);font-size:11px;letter-spacing:.24em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.body{color:var(--ink-soft);max-width:34em}
.muted{color:var(--muted)}

/* ---------- controls ---------- */
.pill{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 30px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);font-size:14px;line-height:1;letter-spacing:.12em;text-decoration:none;transition:background .4s var(--ease),color .4s var(--ease)}
.pill:hover{background:transparent;color:var(--ink)}
.pill.inv{border-color:var(--on-ink);background:var(--on-ink);color:var(--ink)}
.pill.inv:hover{background:transparent;color:var(--on-ink)}
.ar{display:inline-block;transition:transform .4s var(--ease)}
a:hover .ar,button:hover .ar{transform:translateX(5px)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;line-height:1;letter-spacing:.1em;text-underline-offset:8px;text-decoration-thickness:1px}
.round{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);text-decoration:none;flex:none;transition:background .4s var(--ease),color .4s var(--ease)}
.round:hover{background:transparent;color:var(--ink)}

/* ---------- fixed bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(env(safe-area-inset-top,0px) + 8px) var(--gutter) 8px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .7s var(--ease)}
.bar.on{transform:none}
.bar-progress{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.brand{display:flex;align-items:center;gap:14px;min-height:44px;text-decoration:none}
.brand span{font-family:var(--en);font-weight:500;font-size:15px;line-height:1;letter-spacing:.14em}
.bar-nav{display:flex;align-items:center;gap:28px;font-size:13px;line-height:1;letter-spacing:.14em}
.bar-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.bar-nav a.pill{min-height:44px;padding:0 24px}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ink);font-family:var(--en);font-weight:500;font-size:12px;letter-spacing:.24em;cursor:pointer}
.menu-btn i{display:block;width:22px;height:1px;background:currentColor;box-shadow:0 6px 0 currentColor}
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--gutter) 32px;background:var(--ink);color:var(--on-ink);opacity:0;transition:opacity .5s var(--ease)}
.menu.open{opacity:1}
.menu-close{align-self:flex-end;min-height:44px;padding:0 4px;border:0;background:none;color:var(--on-ink);font-family:var(--en);font-weight:500;font-size:12px;letter-spacing:.24em;cursor:pointer}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:64px;border-bottom:1px solid var(--on-ink-line);font-size:22px;letter-spacing:.14em;text-decoration:none;transform:translateY(16px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.menu.open a{transform:none;opacity:1}
.menu a small{font-family:var(--en);font-size:11px;color:var(--on-ink-soft)}

/* ---------- footer ---------- */
.foot{padding:72px var(--gutter) 56px}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px 64px}
.foot-name{font-family:var(--en);font-weight:500;font-size:24px;line-height:1.2;letter-spacing:.14em}
.foot-tag{margin-top:16px;font-size:16px;line-height:1.8;letter-spacing:.12em}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 32px;max-width:620px;font-size:13px;line-height:1;letter-spacing:.12em}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.foot-nav a:hover{text-decoration:underline;text-underline-offset:8px}
.foot .copy{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--en);font-size:11px;line-height:1.6;letter-spacing:.2em;color:var(--muted)}

/* ---------- motion: 表示は一度だけ、スクロールで入ってくる ---------- */
.ln{display:block;overflow:hidden}
.ln > span{display:block}
.chars{display:block}
.chars .w{display:inline-block;white-space:nowrap;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.chars .ch{display:inline-block}
.js .rv{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.in{opacity:1;transform:none;filter:none}
.js [data-lines] .ln > span{transform:translateY(108%);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i,0) * 120ms)}
.js [data-lines].in .ln > span{transform:none}
.js .chars .ch{transform:translateY(105%);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 26ms)}
.js .chars.in .ch{transform:none}
.js .wipe > *{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease),transform 2s var(--ease);transition-delay:calc(var(--i,0) * 130ms)}
.js .wipe.in > *{clip-path:inset(0 0 0 0)}
.js .wipe .zoom{transform:scale(1.2)}
.js .wipe.in .zoom{transform:none}
.js .row::before,.js .row.last::after{transform:scaleX(0);transition:transform 1.3s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .row.in::before,.js .row.last.in::after{transform:none}
.js .row > *{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0) * 90ms + 120ms)}
.js .row.in > *{opacity:1;transform:none}
.js .quote .ch{opacity:.14}
.js.noscrub .quote .ch{transition:opacity .9s var(--ease);transition-delay:calc(var(--i,0) * 28ms)}
.js.noscrub .quote.in .ch{opacity:1}


.row{position:relative}
.row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.row.last::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform-origin:left}

/* Shared navigation, accessibility and motion fallbacks. */
.bar{transform:none}
.js .home-page .bar:not(.on){transform:translateY(-110%)}
.skip-link{position:fixed;left:20px;top:12px;z-index:100;padding:8px 18px;background:var(--ink);color:var(--on-ink);transform:translateY(-160%)}
.skip-link:focus{transform:none}
.hidden-field{display:none}
.menu{overflow-y:auto;overscroll-behavior:contain}
.menu-open{overflow:hidden}
html:not(.js) .menu-btn{display:none}
@media(max-width:900px){
  .js .home-page .bar:not(.on){transform:none}
  .bar-nav{display:none}
  .menu-btn{display:inline-flex}
  html:not(.js) .bar{position:static;flex-wrap:wrap}
  html:not(.js) .bar-nav{display:flex;flex-wrap:wrap;gap:4px 20px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js [data-lines] .ln > span,.js .chars .ch,.js .wipe > *,.js .wipe .zoom,.js .row::before,.js .row.last::after,.js .row > *{opacity:1;transform:none;filter:none;clip-path:none}
  .js .quote .ch{opacity:1!important}
  .plate,.flag-shot,.ph img,.ribbon-row{transform:none}
}