/* Amoa Japan — prototype v2「Be yourself. Live together.」 */
:root{
  --paper:#f5f2ec;
  --paper-2:#ece7de;
  --ink:#1a1817;
  --ink-2:#4a4642;
  --muted:#8a837b;
  --line:rgba(26,24,23,.14);
  --amoa:#7b1e27;         /* ロゴの臙脂 */
  --amoa-soft:#d9a6aa;
  --dark:#151413;
  --dark-line:rgba(245,242,236,.16);
  --en:"Cormorant Garamond", "Times New Roman", serif;
  --logo:"Bodoni Moda", "Times New Roman", serif; /* ロゴの文字は元の書体のまま */
  --ui:"Inter", "Noto Sans JP", system-ui, sans-serif;
  --ja:"Noto Sans JP", system-ui, sans-serif;
  --ja-serif:"Shippori Mincho", "Noto Serif JP", serif;
  --gut:clamp(16px, 4vw, 56px);
  --max:1280px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ja);font-weight:300;font-size:15px;line-height:1.9;letter-spacing:.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.nc{text-transform:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:clamp(88px,13vw,180px) 0;position:relative}
.dark{background:var(--dark);color:var(--paper)}
.tint{background:var(--paper-2)}

/* 試作用：コピー検討の印（本番では消す） */
.todo{display:inline-block;margin:20px 0 0;padding:6px 12px;border:1px dashed var(--amoa);color:var(--amoa);font-size:12px;line-height:1.6;letter-spacing:.04em;background:rgba(123,30,39,.04)}
.todo::before{content:"✎ ";}
.dark-todo{border-color:var(--amoa-soft);color:var(--amoa-soft);background:transparent}

/* ---------- header ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);transition:background .5s,padding .5s,color .5s;background:var(--paper)}
.hd.solid{background:rgba(245,242,236,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:14px;padding-bottom:14px}
.hd.on-dark:not(.solid){color:var(--paper)}
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--amoa)}
.hd.on-dark:not(.solid) .logo{color:var(--paper)}
.lg-a{font-family:var(--logo);font-size:26px;letter-spacing:.12em;font-weight:400}
.lg-j{font-family:var(--logo);font-size:10px;letter-spacing:.32em;margin-top:5px;padding-left:.3em}
.nav{display:flex;gap:clamp(18px,2.4vw,36px);align-items:center;font-family:var(--ui);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.nav>a{position:relative;padding:4px 0}
.nav>a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav>a:hover::after{transform:scaleX(1);transform-origin:left}
.lang{display:flex;gap:10px;margin-left:8px;padding-left:18px;border-left:1px solid var(--line);font-size:11px}
.lang b{font-weight:500}
.lang a{opacity:.5}
.menu-btn{display:none;background:none;border:0;width:40px;height:40px;position:relative;cursor:pointer;color:inherit}
.menu-btn span:not(.sr){position:absolute;left:9px;right:9px;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.menu-btn span:nth-child(1){top:16px}.menu-btn span:nth-child(2){top:24px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4px) rotate(20deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4px) rotate(-20deg)}

/* ---------- type ---------- */
.label{font-family:var(--ui);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amoa);margin:0 0 28px;display:flex;align-items:center;gap:14px}
.label::before{content:"";width:28px;height:1px;background:currentColor}
.dark .label{color:var(--amoa-soft)}
.h2{margin:0;font-weight:400}
.h2-en{display:block;font-family:var(--en);font-size:clamp(34px,5.4vw,76px);line-height:1.05;letter-spacing:-.01em}
.h2-ja{display:block;font-family:var(--ja-serif);font-size:clamp(15px,1.5vw,19px);letter-spacing:.14em;margin-top:22px;color:var(--ink-2)}
.h2-ja.big{font-size:clamp(24px,3.2vw,42px);line-height:1.6;color:var(--ink);margin:0;letter-spacing:.08em}
.dark .h2-ja{color:rgba(245,242,236,.7)}
.h3{font-family:var(--en);font-weight:400;font-size:clamp(24px,2.4vw,34px);line-height:1.15;margin:8px 0 12px}
.lead{font-family:var(--ja-serif);font-size:clamp(20px,2.6vw,34px);line-height:1.8;letter-spacing:.06em;margin:0 0 1.2em;font-weight:400}
.body{margin:0 0 1em;color:var(--ink-2);max-width:40em}
.dark .body{color:rgba(245,242,236,.74)}
.more{display:inline-flex;align-items:center;gap:12px;font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:10px 0;border-bottom:1px solid currentColor;white-space:nowrap}
.more i{font-style:normal;transition:transform .5s var(--ease)}
.more:hover i{transform:translateX(6px)}
.sec-head{margin-bottom:clamp(48px,7vw,96px)}
.sec-head.row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.grid-2{display:grid;grid-template-columns:minmax(140px,1fr) 3fr;gap:24px 48px}
.role{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.role span:first-child{color:var(--amoa)}
.dark .role{color:rgba(245,242,236,.5)}
.dark .role span:first-child{color:var(--amoa-soft)}
.pz{overflow:hidden;position:relative}
.pz img{width:100%;height:100%;object-fit:cover;transform:scale(1.12) translateY(var(--py,0px));will-change:transform}

/* ---------- hero ---------- */
.hero{min-height:100svh;position:relative;background:#fff;transition:background 3.2s ease;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:128px 0 112px;box-sizing:border-box}
.hero-wave{position:absolute;inset:0;width:100%;height:100%}
.hero-in{position:relative;padding:0 var(--gut);max-width:var(--max);margin:0 auto;width:100%;box-sizing:border-box}
.hero-map{position:relative;display:flex;justify-content:center}
/* 地図の左上（日本海の余白）に文字を置く。大きさは地図の幅に合わせる */
.hero-stage{position:relative;height:min(calc(100svh - 250px),880px);aspect-ratio:1334/1454;container-type:size;transform:translateX(7%)}
.hero-art{position:absolute;inset:0}
.hero-stage .hero-txt{position:absolute;left:-16%;top:1%;width:64%;z-index:2}
.hero-stage .hero-en{font-size:12cqw;letter-spacing:-.015em}
.hero-stage .hero-ja{font-size:max(13px,1.9cqw);margin-top:3.4cqw}
.jp-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transition:transform 2.6s cubic-bezier(.65,0,.35,1),opacity .7s}
.jp-map .isl{fill:none;stroke:var(--amoa);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
.jp-map .ghost{fill:none;stroke:var(--amoa);stroke-width:1.2;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:0;animation:ghostin 1.4s var(--ease) .2s forwards}
@keyframes ghostin{to{opacity:.3}}
.jp-map .isl.done{transition:fill 1.6s;fill:rgba(123,30,39,.13)}
.jp-map .frame{fill:none;stroke:var(--amoa);stroke-width:.8;vector-effect:non-scaling-stroke;opacity:0;stroke-dasharray:3 5;transition:opacity 1.2s}
.jp-map .frame.on{opacity:.35}
.jp-map .start{fill:var(--amoa);transform-box:fill-box;transform-origin:center;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}70%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(3.4)}}
.jp-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.jp-map.glow{animation:jpglow 3.6s var(--ease) forwards}
.jp-map.glow .isl{transition:fill 2.4s,stroke-width 2.4s;fill:rgba(123,30,39,.23)}
.jp-map.glow .start{animation:none;opacity:0;transition:opacity 1s}
@keyframes jpglow{0%{filter:drop-shadow(0 0 0 rgba(255,200,90,0))}45%{filter:drop-shadow(0 0 22px rgba(255,230,175,.95)) drop-shadow(0 0 6px rgba(255,246,222,.9))}100%{filter:drop-shadow(0 0 12px rgba(255,230,175,.6)) drop-shadow(0 0 3px rgba(255,246,222,.6))}}
/* 浜松の星と光の粒 */
.jp-map .isl.ink{stroke-width:1.6}
.jp-map .bloom{pointer-events:none}
.jp-map .spark *{transform-box:fill-box;transform-origin:center}
.jp-map .spark{opacity:0}
.jp-map .spark.on{opacity:1}
.jp-map .spark-star{fill:#fffaf0;stroke:#d9a957;stroke-width:1;filter:drop-shadow(0 0 8px rgba(217,169,87,.9));transform:scale(0) rotate(-30deg)}
.jp-map .spark-star.s2{opacity:.9}
.jp-map .spark.on .spark-star.s2{animation-delay:.08s}
.jp-map .spark.on .spark-star{animation:starpop 2.6s cubic-bezier(.2,1.6,.4,1) forwards}
.jp-map .spark-halo{transform:scale(0)}
.jp-map .spark.on .spark-halo{animation:halopop 2.6s var(--ease) forwards}
.jp-map .spark-ring{fill:none;stroke:#d9a957;stroke-width:1.4;vector-effect:non-scaling-stroke;opacity:0}
.jp-map .spark.on .spark-ring{animation:ringout 1.4s var(--ease) .45s forwards}
@keyframes starpop{0%{transform:scale(0) rotate(-30deg)}18%{transform:scale(1.25) rotate(0)}32%{transform:scale(.9) rotate(4deg)}60%{transform:scale(1) rotate(0);opacity:1}100%{transform:scale(.4) rotate(20deg);opacity:0}}
@keyframes halopop{0%{transform:scale(0);opacity:0}20%{transform:scale(1.4);opacity:1}100%{transform:scale(3.2);opacity:0}}
@keyframes ringout{0%{transform:scale(1);opacity:.9}100%{transform:scale(9);opacity:0}}
.jp-map.glow .isl.ink,.jp-map.red .isl.ink{stroke-width:1.2}
/* 万年筆 */
.jp-map.red{animation:none;filter:drop-shadow(0 0 10px rgba(123,30,39,.45))}
.jp-map.red .isl{transition:fill 1.4s,stroke 1.4s,opacity 1s;fill:var(--amoa);stroke:var(--amoa)}
.jp-map.red .ghost,.jp-map.red .frame,.jp-map.red .isl[data-name=nansei]{transition:opacity 1s;opacity:0;animation:none}
.jp-map.away{opacity:0}
.jp-map .pen{opacity:0;transition:opacity .6s}
.jp-map .pen.on{opacity:1}
.jp-map .pen-lift{transition:transform .28s var(--ease);filter:drop-shadow(3px 5px 4px rgba(26,24,23,.18))}
.jp-map .pen.up .pen-lift{transform:translate(10px,-16px);filter:drop-shadow(10px 18px 8px rgba(26,24,23,.14))}
.jp-map .nib{fill:#c2a467;stroke:#8d7340;stroke-width:.8}
.jp-map .nib-slit{stroke:#5a4520;stroke-width:1;fill:none}
.jp-map .nib-hole{fill:#5a4520}
.jp-map .grip{fill:#2a2624}
.jp-map .barrel{fill:var(--ink)}
.jp-map .ring{fill:#c2a467}
.jp-map .shine{stroke:rgba(255,255,255,.22);stroke-width:2.2;stroke-linecap:round;fill:none}
.no-js .jp-map .isl{stroke-dasharray:none}
.hero-en{font-family:var(--en);font-weight:300;font-size:clamp(48px,7vw,116px);line-height:.98;letter-spacing:-.025em;margin:0}
.hero-en em{font-style:italic;color:var(--amoa)}
.hero-en .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero-en .ln>span{display:inline-block;transform:translateY(105%);transition:transform 1.5s var(--ease)}
.hero-en .ln:nth-child(2)>span{transition-delay:.18s}
.ready .hero-en .ln>span{transform:none}
.hero-ja{font-family:var(--ja-serif);font-size:clamp(15px,1.6vw,20px);line-height:2.1;letter-spacing:.2em;margin:40px 0 0;color:var(--ink-2)}
.rise{opacity:0;transform:translateY(14px);transition:opacity 1.4s .8s,transform 1.4s .8s var(--ease)}
.ready .rise{opacity:1;transform:none}
.hero-foot{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;align-items:end;padding:0 var(--gut);font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.hero-foot a{pointer-events:auto}
.hero-foot .scroll{margin-left:auto}
.eyebrow{margin:0}
.scroll{position:relative;padding-bottom:46px}
.scroll::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:36px;background:currentColor;transform-origin:top;animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- statement / poem ---------- */
.cv-full{position:absolute;inset:0;width:100%;height:100%}
.narrow{max-width:880px}
.poem p{font-family:var(--ja-serif);font-size:clamp(16px,1.7vw,20px);line-height:2.2;letter-spacing:.12em;margin:0 0 2em;color:var(--ink-2)}
.dark .poem p{color:rgba(245,242,236,.78)}
.poem p.key{color:var(--ink);font-size:clamp(19px,2.2vw,26px);letter-spacing:.14em}
.statement{padding-top:clamp(40px,8vw,120px)}
.statement .poem{padding-left:clamp(0px,18vw,260px)}
.big-en{font-family:var(--en);font-weight:400;font-size:clamp(46px,8.6vw,136px);line-height:.98;letter-spacing:-.02em;margin:0}
.big-en em{font-style:italic;color:var(--amoa)}
.dark .big-en em{color:var(--amoa-soft)}
.big-ja{font-family:var(--ja-serif);font-size:clamp(16px,1.7vw,21px);letter-spacing:.22em;margin:28px 0 clamp(56px,7vw,100px);color:var(--ink-2)}
.dark .big-ja{color:rgba(245,242,236,.72)}
.big-ja.solo{font-size:clamp(24px,3.4vw,46px);line-height:1.6;letter-spacing:.1em;color:var(--ink);margin:0 0 clamp(40px,6vw,80px)}

/* create：領域の帯 */
.create{overflow:hidden;padding-bottom:clamp(60px,8vw,110px)}
.marquee{margin-top:clamp(40px,6vw,80px);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;animation:mq 38s linear infinite;font-family:var(--en);font-size:clamp(40px,6vw,88px);line-height:1.5}
.mq-track span{padding:0 .5em;color:rgba(245,242,236,.22);transition:color .4s}
.mq-track span:nth-child(3n+2){font-style:italic;color:rgba(217,166,170,.6)}
.mq-track span::after{content:"·";margin-left:1em;color:rgba(245,242,236,.2)}
@keyframes mq{to{transform:translateX(-50%)}}

/* practice */
.verbs{list-style:none;margin:0 0 2.6em;padding:0;border-top:1px solid var(--line)}
.verbs li{font-family:var(--ja-serif);font-size:clamp(17px,2vw,24px);letter-spacing:.12em;line-height:1.8;padding:22px 0;border-bottom:1px solid var(--line)}
.roles{list-style:none;margin:0 0 1.8em;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.roles li{font-family:var(--ja-serif);font-size:15px;letter-spacing:.1em;color:var(--ink-2)}
.roles span{display:block;font-family:var(--en);font-style:italic;font-size:clamp(30px,3.6vw,52px);color:var(--amoa);line-height:1.2;margin-bottom:6px;letter-spacing:0}
#closing{font-family:var(--ja-serif);font-size:clamp(18px,2vw,24px);letter-spacing:.14em;margin:0}

/* why：寄りそう波 */
.why{overflow:hidden}
.why-in{position:relative}
.entries{list-style:none;margin:0 0 2em;padding:0}
.entries li{font-family:var(--ja-serif);font-size:clamp(16px,1.8vw,21px);letter-spacing:.12em;line-height:1.9;padding:10px 0 10px 1.6em;position:relative}
.entries li::before{content:"";position:absolute;left:0;top:50%;width:.9em;height:1px;background:var(--amoa)}

/* ---------- triad（スクロール固定） ---------- */
.triad-sec{height:330vh;position:relative;background:var(--paper)}
.triad-stick{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.triad-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.triad{list-style:none;margin:0;padding:0;font-family:var(--en);font-size:clamp(54px,8vw,128px);line-height:1.02;letter-spacing:-.02em}
.triad li{color:rgba(26,24,23,.13);transition:color .8s var(--ease),transform .8s var(--ease);transform-origin:left}
.triad li+li::before{content:"×";display:block;font-size:.28em;line-height:1;color:var(--amoa);opacity:.5;margin:.25em 0 .2em .1em}
.triad li.on{color:var(--ink);font-style:italic;transform:translateX(.12em)}
.triad-bar{margin-top:48px;height:1px;background:var(--line);position:relative;max-width:360px}
.triad-bar i{position:absolute;left:0;top:0;height:1px;width:calc(var(--p,0)*100%);background:var(--amoa)}
.triad-r{position:relative;min-height:440px}
.tp{position:absolute;inset:0 0 auto;opacity:0;transform:translateY(24px);transition:opacity .7s,transform .8s var(--ease);pointer-events:none}
.tp.on{opacity:1;transform:none;pointer-events:auto}
.tp-h{font-family:var(--ja-serif);font-weight:400;font-size:clamp(22px,2.6vw,34px);letter-spacing:.12em;margin:0 0 28px;color:var(--amoa)}
.tp p{font-family:var(--ja-serif);font-size:clamp(14px,1.3vw,16px);line-height:2.1;letter-spacing:.1em;color:var(--ink-2);margin:0 0 1.4em}
.tp p.key{color:var(--ink);font-size:clamp(17px,1.7vw,20px)}
.steps-inline{columns:2;column-gap:2em}

/* ---------- ways ---------- */
.way-sound{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:0;margin:0 calc(var(--gut) * -1) clamp(72px,9vw,120px);min-height:84vh;overflow:hidden}
.ws-txt{position:relative;z-index:2;padding:clamp(48px,7vw,96px) 0 clamp(48px,7vw,96px) clamp(24px,5vw,80px);display:flex;flex-direction:column;justify-content:center}
/* タイトルの横に、小さなリサージュ（純正律の響き） */
.ws-title{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin:18px 0 44px}
.ws-title .way-name{margin:0}
.ws-canvas{position:relative;width:clamp(96px,10vw,140px);aspect-ratio:1;flex:none}
.ws-canvas canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.ratio{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin:4px 0 0;white-space:nowrap;font-family:var(--ui);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,236,.5)}
.ratio span{font-family:var(--en);font-size:13px;letter-spacing:.08em;color:var(--amoa-soft);margin-right:6px;text-transform:none}
.way-name{font-family:var(--en);font-weight:400;font-size:clamp(48px,6vw,92px);line-height:1;margin:18px 0 18px;letter-spacing:-.01em}
.way-why{font-family:var(--ja-serif);font-size:clamp(18px,2vw,26px);letter-spacing:.1em;line-height:1.7;margin:0 0 24px}
.way-sound .body{margin-bottom:40px}
/* 右：ボウルの動画。左の暗い面へグラデでとける */
.ws-media{position:relative;min-height:420px;overflow:hidden}
.ws-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.ws-media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--dark) 0%,var(--dark) 4%,rgba(21,20,19,.8) 18%,rgba(21,20,19,.35) 40%,rgba(21,20,19,0) 64%),
  linear-gradient(0deg,rgba(21,20,19,.55),rgba(21,20,19,0) 30%),
  linear-gradient(180deg,rgba(21,20,19,.45),rgba(21,20,19,0) 22%)}
/* 7つの言葉：動画の上を、音のようにゆっくり浮かんでいく */
.tags{list-style:none;padding:0;margin:0}
.tags.float{position:absolute;inset:0;z-index:1;pointer-events:none}
.tags.float li{position:absolute;bottom:0;left:var(--x);white-space:nowrap;font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--fs,22px);letter-spacing:.04em;color:#fbf6ec;text-shadow:0 0 18px rgba(21,20,19,.55),0 0 2px rgba(21,20,19,.4);opacity:0;animation:tagRise 21s linear infinite;animation-delay:var(--d)}
.tags.float li:nth-child(1){--x:22%;--fs:28px;--d:0s}
.tags.float li:nth-child(2){--x:44%;--fs:20px;--d:-3s}
.tags.float li:nth-child(3){--x:30%;--fs:24px;--d:-6s}
.tags.float li:nth-child(4){--x:58%;--fs:26px;--d:-9s}
.tags.float li:nth-child(5){--x:36%;--fs:19px;--d:-12s}
.tags.float li:nth-child(6){--x:64%;--fs:22px;--d:-15s}
.tags.float li:nth-child(7){--x:26%;--fs:25px;--d:-18s}
@keyframes tagRise{
  0%{opacity:0;transform:translate(0,0)}
  12%{opacity:.95}
  50%{transform:translate(14px,-46vh)}
  80%{opacity:.8}
  100%{opacity:0;transform:translate(-6px,-88vh)}}
.ws-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ct{width:140px;opacity:.85}

.way-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.way-list li{border-bottom:1px solid var(--line)}
.way-list a{display:grid;grid-template-columns:48px 112px minmax(min-content,1.1fr) 2fr auto;grid-template-areas:"no ph name why go" "no ph name body go";gap:6px 40px;padding:40px 0;transition:padding .6s var(--ease)}
.wl-ph{grid-area:ph;align-self:start;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.wl-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85)}
.way-list a:hover .wl-ph img{transform:scale(1.07);filter:none}
.way-list a:hover{padding-left:18px}
.wl-name{grid-area:name;font-family:var(--en);font-size:clamp(30px,3.4vw,50px);line-height:1.1;transition:color .3s}
.way-list a:hover .wl-name{color:var(--amoa)}
.wl-no{grid-area:no;font-family:var(--ui);font-size:11px;color:var(--amoa);padding-top:1.2em}
.wl-axis{grid-area:axis;font-family:var(--ja-serif);font-size:13px;letter-spacing:.24em;color:var(--amoa)}
.wl-why{grid-area:why;font-family:var(--ja-serif);font-size:clamp(17px,1.8vw,22px);letter-spacing:.08em;line-height:1.6;padding-top:.4em}
.wl-body{grid-area:body;font-size:14px;color:var(--ink-2);max-width:38em}
.wl-body em{display:block;margin-top:10px;font-family:var(--en);font-style:italic;font-size:17px;color:var(--amoa);letter-spacing:.02em}
.pt{display:inline-block;margin-left:10px;font-family:var(--ui);font-weight:400;font-size:10px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:1px 10px;color:var(--muted);vertical-align:2px}
.wl-go{grid-area:go;align-self:center;font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------- collaborations ---------- */
.collab .todo{margin:-40px 0 48px}
.case{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(72px,9vw,120px)}
.case-ph{aspect-ratio:16/10;display:block}
.case .way-why{margin:4px 0 18px}
.scope{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.scope li{font-family:var(--ui);font-size:11px;letter-spacing:.06em;border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink-2);transition:background .3s,color .3s}
.scope li:hover{background:var(--amoa);color:var(--paper);border-color:var(--amoa)}
.pj-grid+.todo{margin:-60px 0 80px}
/* ---------- projects ---------- */
.projects .todo{margin:-40px 0 48px}
.pj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px);margin-bottom:clamp(80px,10vw,140px)}
.pj:nth-child(even){margin-top:clamp(0px,6vw,90px)}
.pj-ph{aspect-ratio:3/4;margin-bottom:20px}
.pj.noimg .pj-ph{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.pj .h3{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);display:inline}
.pj:hover .h3{background-size:100% 1px}
.pj .body{font-size:13px;margin-top:14px}
.note{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-family:var(--ja-serif);font-size:16px}
.note a{font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amoa);border-bottom:1px solid currentColor;padding:6px 0;display:inline-flex;gap:10px}
.note a i{font-style:normal}

/* ---------- news ---------- */
.news .sec-head{margin-bottom:28px}
.news-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.news-list li{border-bottom:1px solid var(--line)}
.news-list a{display:grid;grid-template-columns:120px 110px 1fr;gap:20px;padding:24px 0;align-items:baseline;transition:color .3s,padding .5s var(--ease)}
.news-list a:hover{color:var(--amoa);padding-left:12px}
.news-list time{font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--muted)}
.news-list .cat{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amoa)}

/* ---------- contact ---------- */
.doors{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dark-line)}
.doors li+li{border-left:1px solid var(--dark-line)}
.doors a{display:flex;flex-direction:column;min-height:260px;padding:32px 28px;position:relative;overflow:hidden}
.doors a::before{content:"";position:absolute;inset:0;background:var(--amoa);transform:translateY(101%);transition:transform .7s var(--ease);z-index:0}
.doors a:hover::before{transform:none}
.doors a>*{position:relative}
.dk{font-family:var(--en);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.dd{font-size:13px;color:rgba(245,242,236,.7);margin-top:14px}
.dv{margin-top:auto;font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:10px}
.dv i{font-style:normal}

/* ---------- footer ---------- */
.ft{background:var(--dark);color:rgba(245,242,236,.7);padding:64px 0 40px;border-top:1px solid var(--dark-line)}
.ft-in{display:grid;grid-template-columns:auto 1fr auto;gap:32px 64px;align-items:start}
.ft .logo{color:var(--paper)}
.co{margin:0;display:grid;gap:6px;font-size:13px}
.co div{display:flex;gap:16px}
.co dt{min-width:9em;color:var(--paper)}
.co dd{margin:0}
.ft-nav{display:flex;flex-wrap:wrap;gap:10px 24px;font-family:var(--ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ft-nav a:hover{color:var(--paper)}
.copy{grid-column:1/-1;margin:24px 0 0;font-family:var(--ui);font-size:11px;letter-spacing:.1em;opacity:.6}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .grid-2,.way-sound{grid-template-columns:1fr}
  .grid-2>div:empty{display:none}
  .hero{justify-content:flex-start;padding-top:90px}
  .hero-stage{height:auto;aspect-ratio:auto;container-type:normal;transform:none;width:100%}
  .hero-art{position:relative;height:44svh}
  .hero-stage .hero-txt{position:static;width:auto}
  .hero-stage .hero-en{font-size:clamp(44px,12vw,72px)}
  .hero-stage .hero-ja{font-size:15px;margin-top:24px}
  .hero-foot .eyebrow{display:none}
  .hero{padding-bottom:28px}
  .hero-foot{position:static;margin-top:auto;padding-top:32px;justify-content:flex-end}
  .ws-media{order:-1;min-height:min(110vw,560px)}
  .ws-media::after{background:linear-gradient(0deg,var(--dark) 0%,rgba(21,20,19,.6) 18%,rgba(21,20,19,0) 50%),linear-gradient(180deg,rgba(21,20,19,.4),rgba(21,20,19,0) 25%)}
  .ws-txt{padding:8px var(--gut) 56px}
  @keyframes tagRise{0%{opacity:0;transform:translate(0,0)}12%{opacity:.95}50%{transform:translate(10px,-30vh)}80%{opacity:.8}100%{opacity:0;transform:translate(-4px,-62vh)}}
  .tags.float li{left:calc(var(--x) - 14%)}
  .pj-grid{grid-template-columns:1fr 1fr}
  .way-list a{grid-template-columns:88px 1fr;grid-template-areas:"ph no" "ph name" "why why" "body body" "go go";gap:8px 20px}
  .wl-ph{grid-row:1 / span 2;margin-bottom:12px}
  .wl-go{margin-top:8px}
  .doors{grid-template-columns:1fr 1fr}
  .doors li:nth-child(3){border-left:0}
  .doors li{border-bottom:1px solid var(--dark-line)}
  .ft-in{grid-template-columns:1fr}
}
@media (max-width:760px){
  body{font-size:14px}
  .menu-btn{display:block;z-index:2}
  .nav{position:fixed;inset:0;background:var(--paper);color:var(--ink);flex-direction:column;justify-content:center;gap:22px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .5s}
  .nav.open{opacity:1;pointer-events:auto}
  .lang{border-left:0;padding-left:0;margin:16px 0 0}
  .hd.menu-open{color:var(--ink)}
  .hd.menu-open .logo{color:var(--amoa)}
  .triad{flex-direction:column;gap:0}
  .triad li+li::before{display:none}
  .triad-sec{height:auto}
  .triad-stick{position:relative;height:auto;padding:100px 0 60px}
  .triad-grid{grid-template-columns:1fr}
  .triad{display:none}
  .triad-bar{display:none}
  .triad-r{min-height:0}
  .tp{position:relative;opacity:1;transform:none;margin-bottom:56px}
  .tp::before{display:block;font-family:var(--en);font-style:italic;font-size:44px;color:var(--ink);margin-bottom:10px}
  .tp:nth-child(1)::before{content:"Sense"}
  .tp:nth-child(2)::before{content:"Create"}
  .tp:nth-child(3)::before{content:"Culture"}
  .statement .poem{padding-left:0}
  .roles{grid-template-columns:1fr;gap:18px}
  .case{grid-template-columns:1fr}
  .pj-grid{grid-template-columns:1fr}
  .pj:nth-child(even){margin-top:0}
  .pj-ph{aspect-ratio:4/3}
  .doors{grid-template-columns:1fr}
  .doors li+li{border-left:0}
  .doors a{min-height:0;padding:28px 0}
  .doors a::before{display:none}
  .dv{margin-top:22px}
  .news-list a{grid-template-columns:1fr auto;gap:4px 12px}
  .news-list .t{grid-column:1/-1}
  .sec-head.row{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal,.rise,.hero-en .ln>span{opacity:1;transform:none}
}
.collab-intro{margin:0 0 56px;max-width:640px}
.collab-intro .body+.body{margin-top:1.6em}
.pj-ph{position:relative}
.pj-ph .pj-logo{position:absolute;left:50%;top:50%;width:44%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);object-fit:contain;background:rgba(255,255,255,.88);border-radius:50%;padding:3%}

/* ---------- CREATIVE ROOTS：ジュエリー（MEGUMI HARUNA）から、いまの創造へ根がのびる ---------- */
.roots{border-top:1px solid var(--line)}
.roots .sec-head .body{margin-top:28px;max-width:560px}
.roots-map{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,10vw,160px);align-items:center;margin-top:clamp(40px,6vw,80px)}
.roots-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.roots-lines path{fill:none;stroke:var(--amoa);stroke-width:1;opacity:.45;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 2.2s var(--ease)}
.roots-lines circle{fill:#f3dca8;opacity:0;transition:opacity .8s}
.roots-map.in .roots-lines circle{opacity:1}
.root-card{position:relative;z-index:1}
.root-ph{aspect-ratio:4/5;margin-bottom:22px}
.root-card .h3{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);display:inline}
.root-card:hover .h3{background-size:100% 1px}
.root-card .body{font-size:13px;margin-top:14px}
.root-branches{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,5vw,72px);position:relative;z-index:1}
.root-branches li{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:baseline;position:relative}
.root-branches li::before{content:"";position:absolute;left:-18px;top:.85em;width:7px;height:7px;border-radius:50%;background:var(--amoa);transform:translate(-50%,-50%)}
.rb-no{font-family:var(--ui);font-size:11px;letter-spacing:.2em;color:var(--amoa)}
.rb-name{font-family:var(--ja-serif);font-size:clamp(20px,2.2vw,28px);letter-spacing:.08em;line-height:1.5;margin:0 0 10px}
.rb-name [lang=en]{font-family:var(--en);letter-spacing:.02em}
.rb-en{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.root-branches .body{font-size:14px;max-width:440px}
.roots .wrap>.todo{margin-top:48px}
@media (max-width:760px){
  .roots-map{grid-template-columns:1fr;gap:48px}
  .roots-lines{display:none}
  .root-branches{padding-left:22px;border-left:1px solid rgba(123,30,39,.35);gap:40px}
  .root-branches li::before{left:-22px}
}
.rb-name .rb-en{font-family:var(--ui);letter-spacing:.2em}
.roots-map{margin:clamp(56px,8vw,120px) 0}
.roots .rb-name{margin:0}
.roots-body .poem p:last-child{margin-bottom:0}

/* ============ 各ブランドの章（第一稿：本人の原稿をそのまま並べる） ============
   左に章の見出し（スクロール中は止まる）、右に本文。大事な章（.key）は見出しを大きく、幅いっぱいに */
.white{background:#fff}
.bd .bd-head{margin-bottom:clamp(56px,8vw,112px)}
.bd-head .label,.about .label,.journey .label{text-transform:none}
.bd-catch{font-family:var(--en);font-weight:300;font-size:clamp(42px,7vw,112px);line-height:1;letter-spacing:.01em;margin:0}
.bd-catch-ja{font-family:var(--ja-serif);font-size:clamp(17px,1.9vw,24px);letter-spacing:.2em;margin:28px 0 0;color:var(--ink-2)}
.dark .bd-catch-ja{color:rgba(245,242,236,.75)}
.bd-ch{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px clamp(32px,5vw,80px);margin-top:clamp(96px,12vw,176px)}
.bd-ch.bd-first{margin-top:0}
.bd-ch-h{align-self:start;position:sticky;top:110px}
.bd-ch-pre{font-family:var(--ui);font-size:11px;letter-spacing:.24em;color:var(--amoa);margin:0 0 14px}
.dark .bd-ch-pre{color:var(--amoa-soft)}
.bd-ch-en{font-family:var(--en);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.15;letter-spacing:.03em;margin:0}
.bd-ch-ja{font-family:var(--ja-serif);font-size:clamp(15px,1.5vw,18px);letter-spacing:.16em;line-height:1.8;margin:16px 0 0;color:var(--ink-2)}
.dark .bd-ch-ja{color:rgba(245,242,236,.7)}
.bd-intro,.bd-body{grid-column:2}
.bd-ch .poem p:last-child{margin-bottom:0}
/* 大事な章：見出しを大きく、上に置く */
.bd-ch.key .bd-ch-h{grid-column:1/-1;position:static;margin-bottom:clamp(24px,4vw,56px)}
.bd-ch.key .bd-ch-en{font-weight:300;font-size:clamp(40px,6vw,96px);line-height:1.02;letter-spacing:.01em}
.bd-ch.key .bd-ch-ja{font-size:clamp(18px,2.1vw,27px);letter-spacing:.18em;color:var(--ink);margin-top:24px}
.dark .bd-ch.key .bd-ch-ja{color:var(--paper)}
/* SOUND の RESEARCH：日本語「感覚を信じる。だから、確かめる。」を主役に */
.bd-sound .bd-ch.key:nth-of-type(6) .bd-ch-en{font-size:clamp(26px,2.8vw,40px);font-weight:400}
.bd-sound .bd-ch.key:nth-of-type(6) .bd-ch-ja{font-size:clamp(26px,3.6vw,52px);letter-spacing:.12em;line-height:1.5}
/* 言葉を縦に並べる */
.words{list-style:none;margin:0 0 2em;padding:4px 0 4px 22px;border-left:1px solid var(--line);font-family:var(--ja-serif);font-size:clamp(17px,1.9vw,23px);letter-spacing:.12em;line-height:2.1}
.dark .words{border-color:var(--dark-line)}
.svc{list-style:none;margin:0 0 2em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;font-family:var(--en);font-size:clamp(18px,1.8vw,22px);letter-spacing:.03em}
.svc li{padding:12px 0;border-top:1px solid var(--line)}
.dark .svc li{border-color:var(--dark-line)}
.bd-big{font-family:var(--ja-serif);font-size:clamp(20px,2.6vw,34px);letter-spacing:.12em;line-height:1.6;margin:0 0 1.2em;color:var(--ink)}
.bd-big[lang=en]{font-family:var(--en);font-weight:400;letter-spacing:.06em}
.dark .bd-big{color:var(--paper)}
.bd-mark{font-family:var(--en);font-weight:300;font-size:clamp(48px,7vw,104px);line-height:1;letter-spacing:-.01em;margin:0 0 .5em}
.bd-megami .nc,.bd-head .nc{color:var(--amoa)}
/* 写真 */
.bd-ph{margin:clamp(40px,6vw,80px) 0;overflow:hidden;background:var(--paper-2)}
.bd-ph img{width:100%;height:100%;object-fit:cover}
.bd-ph.wide{aspect-ratio:16/10}
.bd-ph.tall{aspect-ratio:1206/1426;max-width:480px}
.bd-ph.symbol{background:none;max-width:360px}
.bd-ph.symbol img{object-fit:contain}
.bd-pair{display:grid;grid-template-columns:1fr 1.6fr;gap:16px;margin:clamp(40px,6vw,80px) 0;align-items:center}
.bd-pair .bd-ph{margin:0;background:none}
.bd-pair .bd-ph:first-child{aspect-ratio:1}
.bd-pair .bd-ph:last-child{aspect-ratio:1400/439}
.bd-go{margin:clamp(72px,9vw,128px) 0 0;text-align:right}
.bd-go a{display:inline-block;font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor}
.bd-go a:hover{color:var(--amoa)}
.bd-mogmin,.bd-megami{border-top:1px solid var(--line)}
/* MEGAMi の DRESS YOUR FEELING.（内側の芯）は臙脂の帯に */
.bd-megami .bd-ch.key{position:relative;background:var(--amoa);color:var(--paper);box-shadow:0 0 0 100vmax var(--amoa);clip-path:inset(-80px -100vmax);padding:40px 0}
.bd-megami .bd-ch.key .bd-ch-en{font-style:italic;color:#f3dca8}
.bd-megami .bd-ch.key .bd-ch-ja{color:var(--paper)}
.bd-megami .bd-ch.key .poem p{color:rgba(245,242,236,.82)}
.bd-megami .bd-ch.key .poem p.key{color:var(--paper)}
.bd-megami .bd-ch.key .words{border-color:rgba(243,220,168,.5);color:var(--paper)}
.bd-megami .bd-ch.key .ph-todo{border-color:rgba(243,220,168,.5);color:#f3dca8;background:transparent}
.bd-megami .bd-ch.key .ph-todo small{color:rgba(245,242,236,.6)}
.ph-todo{margin:clamp(40px,6vw,80px) 0 0;aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;border:1px dashed rgba(123,30,39,.45);color:var(--amoa)}
.ph-todo span{font-family:var(--ja-serif);font-size:16px;letter-spacing:.2em}
.ph-todo small{font-size:12px;color:var(--muted)}
.wl-name small{display:block;font-size:.5em;letter-spacing:.06em;margin-top:4px;color:var(--ink-2)}
/* CREATIVE PARTNERSHIP の PENSHUGEN */
.bd-partner .case{margin:clamp(72px,9vw,120px) 0 0}

/* ABOUT */
.about{border-top:1px solid var(--line)}
.about-body{margin-top:clamp(48px,7vw,96px)}
.about-facts{margin:48px 0 0;display:grid;gap:0;border-top:1px solid var(--line);font-size:14px}
.about-facts div{display:grid;grid-template-columns:8em 1fr;padding:16px 0;border-bottom:1px solid var(--line)}
.about-facts dt{color:var(--muted)}
.about-facts dd{margin:0}

/* OUR JOURNEY：5つの段が、1本の線でつながる */
.jr{list-style:none;margin:clamp(64px,9vw,120px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);position:relative}
.jr::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,rgba(245,242,236,.15),var(--amoa-soft) 50%,#f3dca8)}
.jr li{position:relative;padding:44px 16px 0 0}
.jr li::before{content:"";position:absolute;left:0;top:0;width:15px;height:15px;border-radius:50%;background:var(--dark);border:1px solid var(--amoa-soft);box-sizing:border-box}
.jr li:last-child::before{background:#f3dca8;border-color:#f3dca8;box-shadow:0 0 18px rgba(243,220,168,.6)}
.jr li+li::after{content:"→";position:absolute;left:-26px;top:-3px;font-family:var(--ui);font-size:12px;color:rgba(245,242,236,.4)}
.jr-no{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.2em;color:var(--amoa-soft);margin-bottom:14px}
.jr-name{display:block;font-family:var(--en);font-size:clamp(22px,2.4vw,34px);line-height:1.2;color:var(--paper)}
.journey .todo{margin-top:64px}

/* CLOSING：はじめの言葉へ戻る */
#closing{text-align:center;background:#fff;padding:clamp(120px,16vw,240px) 0}
.cl-en{font-family:var(--en);font-weight:300;font-size:clamp(40px,7.4vw,120px);line-height:1;letter-spacing:.01em;margin:0}
.cl-ja{font-family:var(--ja-serif);font-size:clamp(17px,1.9vw,24px);letter-spacing:.24em;margin:28px 0 0;color:var(--ink-2)}
.cl-method{font-family:var(--ui);font-size:12px;letter-spacing:.42em;color:var(--amoa);margin:clamp(72px,9vw,128px) 0 0}
.cl-world{font-family:var(--ja-serif);font-size:clamp(18px,2.2vw,28px);letter-spacing:.12em;line-height:1.8;margin:28px 0 0}
.cl-next{display:flex;justify-content:center;gap:48px;margin-top:clamp(72px,9vw,120px);font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.cl-next a{padding-bottom:6px;border-bottom:1px solid currentColor}
.cl-next a:hover{color:var(--amoa)}
.cl-next i{font-style:normal;margin-left:8px}

@media (max-width:960px){
  .bd-ch{grid-template-columns:1fr}
  .bd-ch-h{position:static}
  .bd-intro,.bd-body{grid-column:1}
  .jr{grid-template-columns:1fr;gap:36px;padding-left:28px}
  .jr::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,rgba(245,242,236,.15),var(--amoa-soft) 50%,#f3dca8)}
  .jr li{padding:0}
  .jr li::before{left:-28px;top:4px}
  .jr li+li::after{display:none}
}
@media (max-width:760px){
  .svc{grid-template-columns:1fr}
  .bd-pair{grid-template-columns:1fr}
  .cl-next{flex-direction:column;gap:20px;align-items:center}
  .bd-go{text-align:left}
}

/* ============ 第二稿：文を減らし、写真・余白・文字の大きさで見せる ============ */
/* WHAT WE CREATE：5つの関係が一目でわかる一覧 */
.way-list a{grid-template-columns:48px 132px minmax(0,1fr) minmax(0,1.25fr) auto;grid-template-areas:"no ph name core go" "no ph name why go";align-items:center;gap:4px 40px;padding:28px 0}
.wl-ph{align-self:center}
.wl-core{grid-area:core;align-self:end;font-family:var(--en);font-style:italic;font-size:clamp(17px,1.6vw,22px);letter-spacing:.03em;color:var(--amoa)}
.wl-why{align-self:start;padding-top:0}
.wl-go{font-size:14px}
/* SOUND：黒い面の頭に、英語の核を小さく */
.bd-sound .way-sound{margin-top:calc(clamp(88px,13vw,180px) * -1);margin-bottom:0}
.ws-catch{font-family:var(--en);font-size:clamp(15px,1.4vw,19px);letter-spacing:.16em;color:var(--amoa-soft);margin:28px 0 0}
.bd-sound .ws-txt .body{color:rgba(245,242,236,.72)}
/* ブランドの頭：写真を大きく、文は短く */
.bd-lead{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:end}
.bd-lead .bd-ph{margin:0;aspect-ratio:16/10}
.bd-lead .bd-ph.tall{aspect-ratio:1206/1426;max-width:none}
.bd-lead .poem p:last-child{margin-bottom:0}
.bd-lead-txt{margin-top:clamp(48px,6vw,88px)}
.bd-wide{grid-column:1/-1;aspect-ratio:21/9;margin:clamp(32px,5vw,64px) 0 0}
.bd-wide img{object-position:50% 40%}
.bd-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:center}
.bd-ph.sq{aspect-ratio:1;margin:0;background:none;border-radius:50%}
/* 2つずつ並ぶ言葉（音楽と身体。など） */
.pairs{list-style:none;margin:0 0 2em;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px;font-family:var(--ja-serif);font-size:clamp(17px,1.9vw,23px);letter-spacing:.12em}
.pairs li{padding:14px 0;border-top:1px solid var(--line)}
.steps4{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 0;font-family:var(--ja-serif);font-size:clamp(16px,1.7vw,20px);letter-spacing:.1em}
.steps4 li+li::before{content:"→";margin:0 14px;font-family:var(--ui);font-size:12px;color:var(--amoa)}
.words.en-ja{font-family:var(--en);font-size:clamp(19px,2vw,26px);letter-spacing:.06em}
.bd-ch-jbig{font-family:var(--ja-serif);font-weight:400;font-size:clamp(28px,4.2vw,60px)!important;letter-spacing:.1em!important;line-height:1.45;margin:0!important}
.bd-end .bd-big{font-size:clamp(24px,3.2vw,44px);color:var(--amoa)}
/* SENSE → CREATE → CULTURE → また SENSE へ */
.tp .loop{font-family:var(--en);font-style:italic;font-size:22px;color:var(--amoa);margin-top:28px}
@media (max-width:960px){
  .way-list a{grid-template-columns:88px 1fr;grid-template-areas:"ph no" "ph name" "ph core" "why why";gap:6px 20px}
  .way-list .wl-ph{grid-row:1 / span 3;margin:0}
  .wl-go{display:none}
  .bd-lead,.bd-split{grid-template-columns:1fr}
  .bd-sound .way-sound{margin-top:calc(clamp(88px,13vw,180px) * -1)}
}
@media (max-width:760px){
  .pairs{grid-template-columns:1fr}
  .bd-wide{aspect-ratio:4/3}
}
.bd-split .poem p.key{font-size:clamp(18px,1.9vw,23px)}

/* ============ 第二稿（つづき） ============ */
/* NEWS：はじめの言葉のすぐあと。最新3件を細い帯で */
.news-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,48px) 0}
.nb-in{display:grid;grid-template-columns:120px 1fr auto;gap:24px clamp(24px,4vw,56px);align-items:start}
.nb-in .label{margin:6px 0 0}
.nb-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.nb-list a{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"time cat" "t t";gap:6px 12px;transition:color .3s}
.nb-list a:hover{color:var(--amoa)}
.nb-list time{grid-area:time;font-family:var(--ui);font-size:11px;letter-spacing:.1em;color:var(--muted)}
.nb-list .cat{grid-area:cat;font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amoa)}
.nb-list .t{grid-area:t;font-family:var(--ja-serif);font-size:14px;line-height:1.7;letter-spacing:.06em}
.nb-all{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;padding-bottom:4px;border-bottom:1px solid currentColor;margin-top:4px}
.nb-all i{font-style:normal;margin-left:8px}
.nb-all:hover{color:var(--amoa)}
/* ブランドの最後のリンク：全文へ／ブランドのサイトへ */
.bd-go{display:flex;justify-content:flex-end;gap:32px;flex-wrap:wrap}
/* PLACE / SPACE：別の層。小さく静かに */
.place{border-top:1px solid var(--line);padding:clamp(72px,9vw,128px) 0}
.pl-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);max-width:960px;margin-left:auto}
.pl-ph{position:relative;aspect-ratio:3/2;margin-bottom:16px}
.pl-meta{font-family:var(--ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}
.pl-name{font-family:var(--en);font-weight:400;font-size:clamp(22px,2.2vw,30px);margin:4px 0 6px}
.pl-txt{font-size:13px;color:var(--ink-2);margin:0}
.pl:hover .pl-name{color:var(--amoa)}
/* ABOUT */
.ab-en{font-family:var(--en);font-weight:300;font-size:clamp(32px,4.6vw,72px);line-height:1.05;letter-spacing:.01em;margin:0}
.ab-cycle{margin:clamp(40px,5vw,64px) 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px}
.ab-cycle-en{font-family:var(--ui);font-size:12px;letter-spacing:.36em;color:var(--amoa);margin:0}
.ab-cycle-ja{font-family:var(--ja-serif);font-size:clamp(18px,2vw,24px);letter-spacing:.2em;margin:0}
/* OUR JOURNEY：横に流れる5つの段 */
.jr-lead{font-family:var(--ja-serif);font-size:clamp(16px,1.7vw,20px);letter-spacing:.12em;line-height:2;margin:clamp(48px,6vw,80px) 0 0;color:rgba(245,242,236,.8)}
.jr{align-items:start}
.jr li{display:flex;flex-direction:column}
.jr-name{font-size:clamp(18px,1.9vw,26px)!important;letter-spacing:.06em}
.jr-txt{font-size:13px;line-height:1.9;color:rgba(245,242,236,.66);margin:16px 0 0;max-width:15em}
.jr-go{margin-top:14px;font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amoa-soft)}
.jr-go:hover{color:var(--paper)}
.jr-end{font-family:var(--ja-serif);font-size:clamp(17px,1.9vw,23px);letter-spacing:.12em;line-height:1.9;margin:clamp(56px,7vw,96px) 0 0;color:var(--paper)}
@media (max-width:960px){
  .nb-in{grid-template-columns:1fr}
  .nb-list{grid-template-columns:1fr;gap:18px}
  .nb-all{justify-self:start}
  .jr-txt{max-width:none}
}
@media (max-width:760px){
  .pl-grid{grid-template-columns:1fr}
  .bd-go{justify-content:flex-start}
}
/* 詳細ページ（sound/、brands/…、news/） */
.detail-main{padding-top:clamp(110px,12vw,150px)}
.detail .crumb{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--ui);font-size:11px;letter-spacing:.16em;color:var(--muted);margin-bottom:24px}
.detail .crumb a:hover{color:var(--ink)}
.detail .crumb b{font-weight:400;color:var(--ink)}
.detail .bd{padding-top:clamp(48px,6vw,80px)}
.detail .mg-back{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-top:56px;padding-bottom:96px}
.detail .mg-back a{display:flex;flex-direction:column;gap:6px;padding-top:22px;border-top:1px solid var(--ink);font-family:var(--ja-serif);font-size:15px;letter-spacing:.12em}
.detail .mg-back a+a{text-align:right}
.detail .mg-back a span{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amoa)}
.news-page .news-list li{display:grid;grid-template-columns:120px 110px 1fr;gap:20px;padding:24px 0;align-items:baseline;border-bottom:1px solid var(--line)}
@media (max-width:760px){.detail .mg-back{grid-template-columns:1fr}.detail .mg-back a+a{text-align:left}.news-page .news-list li{grid-template-columns:1fr auto}.news-page .news-list .t{grid-column:1/-1}}

/* TOP：舞台は宇宙へ（地球儀のあと） */
.hero-space{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero.space{background:#05060d}
.hero-en,.hero-en em,.hero-ja,.hero-foot{transition:color 2.6s ease}
.hero.space .hero-en{color:#f5f2ec;text-shadow:0 0 24px rgba(5,6,13,.6)}
.hero.space .hero-en em{color:#f3dca8}
.hero.space .hero-ja{color:rgba(245,242,236,.8)}
.hero.space .hero-foot{color:rgba(245,242,236,.5)}
.hd.in-space:not(.solid):not(.menu-open){background:transparent;color:var(--paper)}
.hd.in-space:not(.solid):not(.menu-open) .logo{color:#f3dca8}
.hd.in-space:not(.solid):not(.menu-open) .lang{border-color:rgba(245,242,236,.25)}
.hero.space .jp-map.away{visibility:hidden;filter:none}

/* RESEARCH：写真を全幅で見せて、コピーを写真にのせる */
.bd-hero{position:relative;width:100vw;margin:clamp(48px,7vw,96px) 0 0 calc(50% - 50vw);height:clamp(520px,88vh,940px);overflow:hidden;background:#0d0c0b}
.bd-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 78%}
.bd-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,9,8,.8) 0%,rgba(10,9,8,.4) 34%,rgba(10,9,8,0) 62%)}
.bd-hero-t{position:absolute;z-index:1;left:clamp(20px,6vw,96px);bottom:clamp(28px,5vw,72px);max-width:min(46%,640px);color:var(--paper)}
.bd-hero-t .bd-ch-pre{color:#f3dca8}
.bd-hero-t .bd-ch-ja{color:var(--paper)}
.bd-after-hero{margin-top:clamp(56px,8vw,112px)}
@media (max-width:760px){.bd-hero{height:clamp(420px,72vh,640px)}.bd-hero-t{max-width:calc(100% - 40px)}}

/* ロゴ：本人の正式なロゴ画像（透過）を、文字色に合わせて表示する */
.lg-img{display:block;width:84px;aspect-ratio:361/191;background:currentColor;-webkit-mask:url(../images/amoa-logo.png) center/contain no-repeat;mask:url(../images/amoa-logo.png) center/contain no-repeat}
.ft .lg-img{width:120px}

/* PRACTICE の最後：光の粒が集まって「それが、Amoa Japanのものづくりです。」になる（assets/somatid.js） */
.practice{padding-bottom:0}
.somatid{position:relative;margin-top:clamp(88px,12vw,160px);min-height:max(440px,min(78vh,760px));display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,#1d1a16 0%,#100f0d 55%,#0a0908 100%);color:var(--paper)}
.sm-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sm-txt{position:relative;margin:0;padding:0 var(--gut);text-align:center;font-family:var(--ja-serif);font-weight:400;
  font-size:clamp(22px,3.3vw,44px);line-height:1.7;letter-spacing:.16em;color:#f7f1e4;
  text-shadow:0 0 18px rgba(232,206,150,.28)}
.sm-txt .ln{display:inline-block}
/* 粒が集まるあいだは文字を隠し（読み上げには残る）、集まったら、ふわっと光る */
.somatid.sm-on .sm-txt{opacity:0}
.somatid.sm-lit .sm-txt{animation:smLit 3.2s var(--ease) forwards}
@keyframes smLit{
  0%{opacity:0;filter:blur(6px);text-shadow:0 0 0 rgba(240,214,160,0)}
  35%{opacity:1;filter:blur(0);text-shadow:0 0 22px rgba(244,222,172,.95),0 0 60px rgba(226,196,136,.6),0 0 120px rgba(214,180,118,.35)}
  100%{opacity:1;filter:none;text-shadow:0 0 18px rgba(232,206,150,.28)}
}
@media (max-width:640px){.sm-txt{font-size:clamp(16px,5.1vw,26px);letter-spacing:.1em}.sm-txt .ln{white-space:nowrap}}

/* PLACE：5つのブランドとは別のレイヤー。CULTURE（Sense × Create × Culture）へつながる */
.pl-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,960px);gap:24px clamp(24px,4vw,56px)}
.pl-wrap .pl-grid{margin:0}
.pl-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pl-head .label{margin:0}
.pl-from{font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-bottom:4px;border-bottom:1px solid var(--line)}
.pl-from b{font-weight:500;color:var(--amoa)}
.pl-from i{font-style:normal;margin-left:8px}
.pl-from:hover{color:var(--amoa)}
@media (max-width:900px){.pl-wrap{grid-template-columns:1fr}}
/* NEWS：まだ来ていない日のお知らせに「Upcoming」（assets/news.js が日付を見て付ける） */
.cat .up{display:inline-block;margin-left:8px;padding:1px 7px;border:1px solid currentColor;border-radius:999px;font-size:9px;letter-spacing:.16em}

/* MEGAMi の頭：動画を画面の端まで置き、文字の側と上下を紙の色に溶かす（mogmin.com の News と同じ考え方） */
.bd-megami{padding-top:0}
.mgv-open{position:relative;isolation:isolate;overflow:clip;min-height:min(88vh,780px);display:flex;align-items:center;padding:clamp(88px,10vw,140px) 0;margin-bottom:clamp(56px,8vw,112px)}
.mgv-mv{position:absolute;z-index:-1;inset:0 auto 0 0;width:62%}
.mgv-mv video{display:block;width:100%;height:100%;object-fit:cover;object-position:38% 40%;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,transparent 1.5%,#000 36%),linear-gradient(180deg,transparent 0%,#000 16%,#000 76%,transparent 100%);
  mask-image:linear-gradient(270deg,transparent 0%,transparent 1.5%,#000 36%),linear-gradient(180deg,transparent 0%,#000 16%,#000 76%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.mgv-open .wrap{width:100%}
.mgv-open .bd-head{margin:0 0 0 auto;width:min(44%,600px)}
.mgv-open .bd-catch{font-size:clamp(42px,6vw,96px)}
.mgv-logo{margin:22px 0 clamp(28px,3vw,44px)}
.mgv-logo img{display:block;width:clamp(180px,20vw,300px);height:auto}
@media (max-width:860px){
  .mgv-open{display:block;min-height:0;padding:0}
  .mgv-mv{position:static;width:100%;height:min(112vw,70vh)}
  .mgv-mv video{object-position:40% 40%;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%);-webkit-mask-composite:source-over;mask-composite:add}
  .mgv-open .bd-head{width:100%;margin:-8vw 0 0}
  .mgv-open .bd-catch{max-width:6.6em}
}

/* 会社概要（company/） */
.co-page{padding-top:clamp(24px,4vw,48px)}
.co-h{font-family:var(--ja-serif);font-weight:400;font-size:clamp(18px,1.9vw,22px);letter-spacing:.16em;margin:clamp(64px,8vw,104px) 0 18px}
.co-table{margin:0;border-top:1px solid var(--line);max-width:960px}
.co-table>div{display:grid;grid-template-columns:11em 1fr;gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.co-table dt{color:var(--muted);font-size:13px;letter-spacing:.08em}
.co-table dt[lang="en"]{font-family:var(--ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding-top:3px}
.co-table dd{margin:0;font-size:15px}
.co-table ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.co-table small{display:block;color:var(--ink-2);font-size:12.5px;margin-top:4px}
.co-en{display:block;font-family:var(--en);font-size:17px;color:var(--ink-2)}
.co-brands a{display:block;transition:color .3s}
.co-brands a:hover{color:var(--amoa)}
.co-brands b{display:block;font-family:var(--en);font-weight:400;font-size:clamp(19px,1.8vw,23px);letter-spacing:.02em;color:var(--ink)}
.co-brands a:hover b{color:var(--amoa)}
@media (max-width:640px){.co-table>div{grid-template-columns:1fr;gap:6px}}
.co-page .bd-head{margin-bottom:clamp(40px,6vw,72px)}

/* MEGAMi：写真は文字の右側へ（上の動画とぶつからないよう、少し小さめ） */
.bd-lead-r{grid-template-columns:minmax(0,6fr) minmax(0,4fr);align-items:center}
.bd-lead-r .poem{order:1}
.bd-lead-r .bd-ph{order:2;max-width:420px;justify-self:end;width:100%}
@media (max-width:960px){.bd-lead-r .bd-ph{justify-self:start}}

/* DRESS YOUR FEELING. の最後：画面いっぱいの海の動画（上は臙脂からグラデーション） */
.mgv-sea{grid-column:1/-1;position:relative;width:100vw;height:100svh;min-height:420px;margin:clamp(32px,5vw,72px) 0 -120px calc(50% - 50vw)}
.mgv-sea video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.mgv-sea::before{content:"";position:absolute;inset:0 0 auto;height:38%;background:linear-gradient(180deg,var(--amoa) 0%,rgba(123,30,39,.55) 40%,rgba(123,30,39,0) 100%);pointer-events:none;z-index:1}
.bd-megami .bd-ch.key+.bd-go{margin-top:clamp(56px,7vw,96px)}

/* 外のサイトのURL表記 */
.ext-url{font-family:var(--ui);font-size:12px;letter-spacing:.14em;color:var(--amoa);margin:10px 0 0}
.ext-url a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}

.co-more{color:var(--paper);border-bottom:1px solid currentColor;padding-bottom:1px}
.co-table small a{color:var(--amoa);border-bottom:1px solid currentColor}
.co dt:empty{min-width:9em}
/* フッター：会社情報が増えたので、メニューは下の段へ */
.ft-in{grid-template-columns:auto minmax(0,1fr)}
.ft-nav{grid-column:1/-1;padding-top:8px;border-top:1px solid var(--dark-line)}
.co dd{min-width:0;flex:1}
@media (max-width:640px){.ft-in{grid-template-columns:1fr}.co div{flex-direction:column;gap:2px}}

/* 会社概要：日本語カテゴリー＋英語 */
.co-cat{display:block;margin-top:6px;font-family:var(--ui);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amoa)}
.co-quiet{color:var(--muted);font-size:13px}

.co-link{border-bottom:1px solid var(--line)}
.co-link:hover{color:var(--amoa);border-color:var(--amoa)}

/* リンクなしのカードは、下線の動きを出さない */
div.root-card:hover .h3{background-size:0 1px}

/* ============ CONTACT（contact/）：問い合わせを集めるより、正しい入口へ案内する ============ */
.ct-page{padding-top:clamp(24px,4vw,48px)}
.ct-page .bd-head{margin-bottom:clamp(36px,5vw,64px)}
.ct-lead{max-width:40em}
.ct-lead p{font-family:var(--ja-serif);font-size:clamp(15px,1.5vw,17px);line-height:2.1;letter-spacing:.1em;color:var(--ink-2);margin:0 0 .6em}
/* 種類の目次：すぐに自分の窓口へ */
.ct-index{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ct-index a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 18px 18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--en);font-size:clamp(15px,1.4vw,18px);line-height:1.3;transition:background .4s,color .4s}
.ct-index a span{font-family:var(--ui);font-size:10px;letter-spacing:.2em;color:var(--amoa)}
.ct-index a:hover{background:var(--paper-2);color:var(--amoa)}
.ct-group{font-family:var(--ui);font-weight:400;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin:clamp(72px,9vw,120px) 0 0;display:flex;align-items:center;gap:14px}
.ct-group::before{content:"";width:32px;height:1px;background:currentColor}
.dark .ct-group{color:rgba(245,242,236,.6);margin-top:0}
/* 1つの窓口 */
.ct-list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.dark .ct-list{border-color:var(--dark-line)}
.ct-row{display:grid;grid-template-columns:4em minmax(0,1fr) minmax(220px,auto);gap:12px clamp(24px,4vw,64px);align-items:start;padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--line);scroll-margin-top:110px}
.dark .ct-row{border-color:var(--dark-line)}
.ct-no{font-family:var(--en);font-style:italic;font-size:clamp(22px,2.2vw,30px);line-height:1.1;color:var(--amoa)}
.dark .ct-no{color:#f3dca8}
.ct-name{font-family:var(--en);font-weight:400;font-size:clamp(24px,2.8vw,38px);line-height:1.15;letter-spacing:.01em;margin:0}
.ct-desc{margin:12px 0 0;font-size:14px;line-height:1.9;color:var(--ink-2);max-width:36em}
.dark .ct-desc{color:rgba(245,242,236,.75)}
.ct-sub{display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 0;font-family:var(--ui);font-size:11px;letter-spacing:.1em}
.ct-sub a{color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:2px}
.ct-sub a:hover{color:var(--amoa)}
.ct-go{display:flex;flex-direction:column;align-items:flex-end;gap:10px;padding-top:4px}
.ct-go small{font-size:11px;letter-spacing:.04em;color:var(--muted);text-align:right}
.dark .ct-go small{color:rgba(245,242,236,.55)}
.ct-btn{display:inline-flex;align-items:center;gap:14px;min-width:200px;justify-content:space-between;padding:14px 20px;border:1px solid currentColor;font:inherit;font-family:var(--ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:inherit;background:none;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.ct-btn i{font-style:normal}
.ct-btn:hover{background:var(--amoa);border-color:var(--amoa);color:var(--paper)}
.dark .ct-btn:hover{background:#f3dca8;border-color:#f3dca8;color:var(--ink)}
/* Amoa Japan の窓口：暗い面。06 は大きく */
.ct-amoa{padding:clamp(80px,10vw,140px) 0}
.ct-feature{display:grid;grid-template-columns:4em minmax(0,1fr) minmax(220px,auto);gap:12px clamp(24px,4vw,64px);align-items:end;padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,72px);margin-top:20px;border-top:1px solid var(--dark-line);scroll-margin-top:110px}
.ct-feature .ct-no{align-self:start}
.ct-feature .ct-name{font-family:var(--ui);font-size:11px;letter-spacing:.24em;color:#f3dca8}
.ct-catch{font-family:var(--en);font-weight:300;font-size:clamp(40px,6.4vw,96px);line-height:1;letter-spacing:.01em;margin:18px 0 0}
.ct-catch-ja{font-family:var(--ja-serif);font-size:clamp(16px,1.8vw,22px);letter-spacing:.2em;margin:22px 0 0}
.ct-amoa .ct-list{margin-top:0}
/* フォームの窓 */
.ct-sheet{width:min(760px,94vw);height:min(88vh,920px);max-width:none;max-height:none;padding:0;border:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.ct-sheet[open]{display:flex;flex-direction:column;animation:ctIn .5s var(--ease)}
.ct-sheet::backdrop{background:rgba(21,20,19,.62);backdrop-filter:blur(4px)}
@keyframes ctIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ct-sheet-hd{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid var(--line)}
.ct-sheet-hd p{margin:0;margin-right:auto;display:flex;gap:12px;align-items:baseline;font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ct-sheet-hd p b{font-weight:500;color:var(--amoa)}
.ct-sheet-tab{font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.ct-sheet-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink);padding:0 4px}
.ct-sheet-bd{flex:1;min-height:0}
.ct-sheet-bd iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.ct-sheet-todo{margin:auto;padding:40px;text-align:center;font-size:14px;color:var(--ink-2)}
@media (max-width:900px){
  .ct-index{grid-template-columns:1fr 1fr}
  .ct-row,.ct-feature{grid-template-columns:3em minmax(0,1fr)}
  .ct-go{grid-column:2;align-items:flex-start;padding-top:8px}
  .ct-go small{text-align:left}
}
@media (max-width:480px){.ct-btn{min-width:0;width:100%}}
/* TOP の CONTACT：8つの窓口（説明つきの一覧は contact/） */
.doors8{grid-template-columns:repeat(4,1fr)}
.doors8 li:nth-child(n+5){border-top:1px solid var(--dark-line)}
.doors8 li:nth-child(5){border-left:0}
.doors8 a{min-height:200px}
.doors8 .dn{font-family:var(--en);font-style:italic;font-size:20px;color:#f3dca8;margin-bottom:14px}
.doors8 .dk{font-size:clamp(20px,2vw,28px);line-height:1.2}
.doors8 .dv{margin-top:auto;padding-top:18px}
.doors-all{margin:36px 0 0;text-align:right;font-family:var(--ui);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
.doors-all a{padding-bottom:6px;border-bottom:1px solid currentColor}
.doors-all i{font-style:normal;margin-left:10px}
@media (max-width:900px){.doors8{grid-template-columns:1fr 1fr}.doors8 li:nth-child(odd){border-left:0}.doors8 li:nth-child(even){border-left:1px solid var(--dark-line)}.doors8 a{min-height:150px;padding:22px 18px}}
@media (max-width:560px){.doors8{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.doors8 a{padding:20px 14px}.doors8 .dk{font-size:18px;overflow-wrap:anywhere}}

/* DIFFERENT, YET IN HARMONY.：明るい写真なので、下をしっかり暗くして文字をのせる */
.bd-hero-harmony img{object-position:50% 62%}
.bd-hero-harmony::after{background:linear-gradient(to top,rgba(10,9,8,.82) 0%,rgba(10,9,8,.5) 32%,rgba(10,9,8,.08) 62%,rgba(10,9,8,0) 100%)}
.bd-hero-harmony .bd-hero-t{max-width:min(86%,980px)}
.bd-hero-harmony .bd-ch-en{font-weight:300;font-size:clamp(34px,5.4vw,84px);line-height:1.04;letter-spacing:.01em;color:var(--paper)}
.bd-hero-harmony .bd-ch-ja{font-size:clamp(17px,2vw,26px);letter-spacing:.18em;color:var(--paper);margin-top:18px}
/* 文字は上に置いて、主役のボウルを隠さない */
.bd-hero-harmony::after{background:linear-gradient(to bottom,rgba(10,9,8,.66) 0%,rgba(10,9,8,.34) 30%,rgba(10,9,8,0) 55%)}
.bd-hero-harmony .bd-hero-t{bottom:auto;top:clamp(96px,11vw,150px)}
.bd-hero-harmony img{object-position:50% 100%}
/* 見やすさのため、文字は下（ラグのあたり）へ。小さめにして、ボウルにかからないように */
.bd-hero-harmony::after{background:linear-gradient(to top,rgba(10,9,8,.88) 0%,rgba(10,9,8,.62) 18%,rgba(10,9,8,0) 40%)}
.bd-hero-harmony .bd-hero-t{top:auto;bottom:clamp(20px,3vw,44px)}
.bd-hero-harmony .bd-ch-en{font-size:clamp(28px,3.8vw,58px)}
.bd-hero-harmony .bd-ch-ja{font-size:clamp(15px,1.5vw,20px);margin-top:10px}
.bd-hero-harmony .bd-ch-pre{margin-bottom:8px}

/* 夕暮れの海の写真：空と海、ボウルが入るように切り出す */
.bd-hero-sea img{object-position:50% 52%}
.bd-hero-sea::after{background:linear-gradient(to top,rgba(10,9,8,.85) 0%,rgba(10,9,8,.55) 20%,rgba(10,9,8,0) 44%)}

/* RESEARCH：海辺の写真。人物が右寄りにいるので、文字は左下に */
.bd-hero-research img{object-position:56% 50%}
.bd-hero-research::after{background:linear-gradient(to top,rgba(10,9,8,.62) 0%,rgba(10,9,8,.3) 24%,rgba(10,9,8,0) 48%)}
/* 全幅写真のあとの余白を短く */
.bd-after-hero{margin-top:clamp(28px,3.6vw,52px)}
.bd-after-hero .poem p{margin-bottom:1.3em}
.bd-after-hero .poem p:last-child{margin-bottom:0}
/* 暗い面の大事な一文が、背景に沈んで読めなかったので、明るい色に */
.dark .poem p.key{color:var(--paper)}

/* EVERY SOUND HAS ITS OWN VOICE. の下：心電図のような線＋音の波形（assets/pulse.js） */
.sv-pulse{position:relative;width:min(100%,420px);height:84px;margin:14px 0 0}
.sv-pulse canvas{position:absolute;inset:0;width:100%;height:100%}
.sv-pulse-lg{width:min(100%,980px);height:clamp(110px,13vw,170px);margin:clamp(20px,3vw,36px) 0 0}

/* SOUND AS CULTURE：背景動画。顔は左寄りに映るので、文字は右下に置く */
.bd-hero-movie video{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 0%}
.bd-hero-movie::after{background:linear-gradient(to top,rgba(10,9,8,.7) 0%,rgba(10,9,8,.3) 26%,rgba(10,9,8,0) 50%),linear-gradient(to left,rgba(10,9,8,.5) 0%,rgba(10,9,8,0) 55%)}
.bd-hero-movie .bd-hero-t{left:auto;right:clamp(20px,6vw,96px);text-align:right;max-width:min(52%,640px)}
@media (max-width:760px){.bd-hero-movie .bd-hero-t{left:20px;right:20px;max-width:none;text-align:left}}

/* SELECTING THE SOUND：棚の写真。人物は中央より下にいるので、下寄りで切り出す */
.bd-hero-shelf img{object-position:50% 78%}
.bd-hero-shelf::after{background:linear-gradient(to top,rgba(10,9,8,.8) 0%,rgba(10,9,8,.4) 30%,rgba(10,9,8,0) 60%)}
/* 文章の中に置くお問い合わせリンク：左そろえ、余白は控えめ */
.poem .bd-go{margin-top:clamp(28px,3.4vw,48px);justify-content:flex-start;text-align:left}
.poem .bd-go a[href^="http"]{text-transform:none;letter-spacing:.1em}

/* FROM INSTRUMENT TO MUSIC.：お店の棚の動画。文字は左下 */
.bd-hero-shop video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.bd-hero-shop::after{background:linear-gradient(to top,rgba(10,9,8,.82) 0%,rgba(10,9,8,.5) 28%,rgba(10,9,8,.1) 60%)}

/* EVERY SOUND HAS ITS OWN VOICE.：人のいるところを横長に切り出した動画。文字は左、左にグラデーション */
.bd-hero-voice{height:auto;aspect-ratio:2.34/1;min-height:440px;margin-top:0}
.bd-hero-voice video{display:block;width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.bd-hero-voice::after{background:linear-gradient(to right,rgba(10,9,8,.9) 0%,rgba(10,9,8,.7) 26%,rgba(10,9,8,.2) 52%,rgba(10,9,8,0) 68%)}
.bd-hero-voice .bd-hero-t{top:50%;bottom:auto;transform:translateY(-50%);max-width:min(42%,620px)}
.bd-hero-voice .bd-head{margin:0}
.bd-hero-voice .bd-catch{font-size:clamp(30px,4vw,62px)}
.bd-hero-voice .sv-pulse-lg{height:clamp(60px,7vw,96px);margin:clamp(14px,2vw,24px) 0 0}
.bd-hero-voice .bd-catch-ja{margin-top:clamp(14px,2vw,22px);color:rgba(245,242,236,.85)}
@media (max-width:760px){
  .bd-hero-voice{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column-reverse;background:var(--dark)}
  .bd-hero-voice::after{display:none}
  .bd-hero-voice video{height:62vw;min-height:260px}
  .bd-hero-voice .bd-hero-t{position:static;transform:none;max-width:none;padding:28px 20px 32px}
}
.bd-hero-voice .bd-catch-ja{font-size:clamp(14px,1.5vw,20px);letter-spacing:.14em;line-height:1.9}
.bd-hero-voice+.bd-ch{margin-top:clamp(40px,5vw,72px)}

/* LISTENING：イベントの写真。人物は中央、手前は暗い参加者なので、文字は左下 */
.bd-hero-listen img{object-position:50% 38%}
.bd-hero-listen::after{background:linear-gradient(to top,rgba(10,9,8,.82) 0%,rgba(10,9,8,.45) 24%,rgba(10,9,8,0) 52%)}

/* 動画いっぱいに、左端から右端まで走る線 */
.bd-hero-voice .sv-pulse-wide{position:absolute;z-index:1;left:0;right:0;width:auto;top:73%;height:clamp(60px,7vw,96px);margin:0;pointer-events:none}
@media (max-width:760px){.bd-hero-voice .sv-pulse-wide{position:relative;top:auto;order:-1;height:64px;margin:0 20px}}
/* お店の棚の動画：明るくしたので、下のグラデーションも少しだけ軽く（文字は読める濃さを残す） */
.bd-hero-shop::after{background:linear-gradient(to top,rgba(10,9,8,.74) 0%,rgba(10,9,8,.42) 26%,rgba(10,9,8,.04) 58%)}

/* NEWS：一覧の1行を押すと本文が開く */
.news-page .news-list li.nw{display:block;padding:0}
.nw details>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:120px 110px 1fr 20px;gap:20px;padding:24px 0;align-items:baseline;transition:color .3s}
.nw details>summary::-webkit-details-marker{display:none}
.nw details>summary:hover{color:var(--amoa)}
.nw details>summary:focus-visible{outline:1px solid var(--amoa);outline-offset:4px}
.nw .nw-pm{position:relative;width:12px;height:12px;align-self:center;justify-self:end}
.nw .nw-pm::before,.nw .nw-pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.nw .nw-pm::after{transform:rotate(90deg)}
.nw details[open] .nw-pm::after{transform:rotate(0)}
.nw .nw-body{padding:0 32px 32px 250px;max-width:none}
.nw .nw-body p{margin:0 0 1em;font-size:14.5px;line-height:2;letter-spacing:.04em;max-width:40em}
.nw .nw-body a{color:var(--amoa);border-bottom:1px solid currentColor}
@media (max-width:760px){
  .nw details>summary{grid-template-columns:1fr auto 20px;gap:4px 12px}
  .nw details>summary .t{grid-column:1/-1;grid-row:2}
  .nw details>summary .nw-pm{grid-column:3;grid-row:1}
  .nw .nw-body{padding:0 0 28px}
}
.nw .nw-body .nw-link{font-size:13px;line-height:1.9}
.nw .nw-body .nw-link span{color:var(--muted);font-family:var(--ui);letter-spacing:.06em;font-size:11.5px;word-break:break-all}

/* ---------- 英語ページ（/en/）：日本語の文のためのひろい字間を、英語ではふつうに（2026-10-07） ----------
   lang="en" が付いている所（もともと英語の見出し・ラベル）はそのまま。訳された文だけを直す */
html[lang="en"] body{letter-spacing:.01em}
html[lang="en"] :is(p,li,dd,dt,h1,h2,h3,h4,figcaption,small,b,span,a,blockquote):not([lang="en"]):not(body [lang="en"] *){letter-spacing:.01em !important}

/* ---------- プライバシーポリシー（/privacy/、2026-10-07） ---------- */
.pv{max-width:760px}
.pv p{margin:0 0 1em;line-height:2}
.pv ul{margin:0 0 1em;padding-left:1.4em;line-height:2}
.pv .co-h{margin:clamp(40px,5vw,64px) 0 14px}
.pv-link{border-bottom:1px solid currentColor}
.pv-co{margin-top:clamp(40px,5vw,64px)}
.pv-date{margin-top:32px !important;color:var(--muted);font-size:13px}