/* 墨一色の夜。トップは動きだけ、各ページは静かな縦の余白と細い罫で読ませる */
:root{
  --bg:#06090F;      /* 墨 */
  --fg:#E6E3DA;      /* 胡粉 */
  --mute:#8B93A4;    /* 鼠 */
  --line:rgba(230,227,218,.12);
  --ai:#6FD3E2;      /* 浅葱の電光 */
  --kin:#D9B66E;     /* 金茶 */
  --display:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --dot:"DotGothic16","Hiragino Mincho ProN",serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:2.05;font-feature-settings:"palt";-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible{outline:1px solid var(--ai);outline-offset:4px}
.gutter{padding-inline:clamp(20px,7vw,96px)}
.wrap{max-width:1040px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 入口：動きだけ ---------- */
body.stage{height:100svh;overflow:hidden;background:var(--bg)}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 2.4s ease}
body.ready #gl{opacity:1}
body.stage::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 45%,rgba(6,9,15,.75) 100%)}
.enter{position:fixed;left:50%;bottom:calc(36px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:2;
  font-family:var(--display);font-size:.82rem;letter-spacing:.6em;padding:10px 0 10px .6em;text-decoration:none;color:var(--fg);opacity:0;transition:opacity 1.6s ease 2.6s}
body.ready .enter{opacity:.7}
.enter:hover{opacity:1!important}
.enter::after{content:"";position:absolute;left:50%;bottom:0;width:28px;height:1px;background:var(--ai);transform:translateX(-50%) scaleX(.4);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.enter:hover::after{transform:translateX(-50%) scaleX(1.6)}
body.no-gl{background:radial-gradient(circle at 50% 45%,#16233A,var(--bg) 60%)}
body.no-gl .enter{opacity:.8}

/* ---------- 各ページ ---------- */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:rgba(6,9,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding-block:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:var(--display);font-weight:500;letter-spacing:.24em;font-size:.95rem}
.brand .mark{width:26px;height:auto;color:var(--fg)}
.nav{display:flex;gap:clamp(18px,3.4vw,40px);flex-wrap:wrap;font-family:var(--display);font-size:.86rem;letter-spacing:.18em}
.nav a{text-decoration:none;color:var(--mute);position:relative;padding-block:4px;transition:color .4s}
.nav a::after{content:"";position:absolute;left:0;right:.18em;bottom:0;height:1px;background:var(--ai);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

main{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.page-head{padding-block:clamp(88px,16vw,176px) clamp(40px,6vw,72px)}
.page-head h1{font-family:var(--display);font-weight:500;font-size:clamp(2rem,5.6vw,3.6rem);letter-spacing:.32em;margin:0 -.32em 0 0;line-height:1.35;text-wrap:balance}
.page-head p{margin:28px 0 0;max-width:34em;color:var(--mute)}
.rule{width:40px;height:1px;background:var(--ai);border:0;margin:40px 0 0}

main section{padding-block:clamp(40px,7vw,80px);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:20px 48px}
main section > h2{font-family:var(--display);font-weight:500;font-size:1.2rem;letter-spacing:.24em;margin:0;line-height:1.7}
main section > div{min-width:0}
main section p{margin:0 0 1.1em;max-width:36em;color:#C9CBD0}
main section p:last-child{margin-bottom:0}
@media (max-width:720px){main section{grid-template-columns:1fr}}

.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin:20px 0 0;padding:0;list-style:none;font-family:var(--dot);font-size:.8rem;letter-spacing:.08em;color:var(--ai)}

.purposes{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.purposes li{display:grid;grid-template-columns:4.6em 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.purposes .go{font-family:var(--display);color:var(--kin)}

dl.profile{margin:0;display:grid;grid-template-columns:8em minmax(0,1fr);border-top:1px solid var(--line)}
dl.profile dt,dl.profile dd{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
dl.profile dt{color:var(--mute);font-size:.9rem;letter-spacing:.12em}
@media (max-width:560px){dl.profile{grid-template-columns:1fr}dl.profile dt{padding-bottom:0;border-bottom:0}dl.profile dd{padding-top:2px}}
.note{color:var(--mute);font-size:.86rem}

/* 社名ページ */
.name-hero{min-height:calc(100svh - 70px);display:flex;align-items:center;padding-block:96px}
.name-hero .wrap{width:100%}
.name-hero .mark{width:clamp(56px,8vw,80px);height:auto;color:var(--fg);display:block;margin-bottom:40px}
.name-hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.3rem,8.4vw,5.6rem);letter-spacing:.34em;margin:0 -.34em 0 0;line-height:1.3}
.name-hero h1 span{display:inline-block}
.name-hero .tag{font-family:var(--dot);color:var(--ai);letter-spacing:.24em;font-size:.86rem;margin:32px 0 0}
.name-hero .lead{margin:16px 0 0;max-width:30em;color:#C9CBD0}
@media (max-width:560px){.name-hero h1{letter-spacing:.14em;margin-right:-.14em}}
@media (prefers-reduced-motion:no-preference){
  .name-hero h1 span{animation:ink 1.6s cubic-bezier(.2,.7,.2,1) both}
  .name-hero h1 span:nth-child(2){animation-delay:.3s}
  .name-hero .tag{animation:flick 1.6s steps(1) 1s both}
  @keyframes ink{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
  @keyframes flick{0%{opacity:0}20%{opacity:1}28%{opacity:.2}36%{opacity:1}60%{opacity:.4}66%,100%{opacity:1}}
}
@media (prefers-reduced-motion:reduce){main{animation:none}}

.entries{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.entries a{display:grid;grid-template-columns:minmax(0,10em) minmax(0,1fr) auto;gap:8px 36px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none}
.en-title{font-family:var(--display);font-size:1.2rem;letter-spacing:.24em;transition:color .4s}
.entries a:hover .en-title{color:var(--ai)}
.en-desc{color:var(--mute)}
.en-go{font-family:var(--display);color:var(--kin);font-size:.9rem}
@media (max-width:640px){.entries a{grid-template-columns:1fr auto}.en-desc{grid-column:1/-1}}

footer.site-footer{border-top:1px solid var(--line);color:var(--mute);font-size:.8rem;letter-spacing:.1em}
footer.site-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;padding-block:28px 48px}
footer.site-footer a{color:var(--mute)}

/* ---------- 画面のつなぎ ---------- */
body{opacity:0;transition:opacity .9s ease}
body.shown{opacity:1}
body.leaving{opacity:0;transition:opacity .5s ease}
@media (prefers-reduced-motion:reduce){body,body.leaving{transition:none}}

/* 入口の二枚目：同じ動きの上に社名だけ */
body.entered .enter{opacity:0!important;pointer-events:none;transition:opacity .6s ease}
.veil{position:fixed;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 20px;pointer-events:none}
.veil-in{display:flex;flex-direction:column;align-items:center}
.veil .mark{width:clamp(44px,6vw,60px);height:auto;color:var(--fg);opacity:0;transform:translateY(10px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.veil h1{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,6.4vw,4.4rem);letter-spacing:.42em;margin:32px -.42em 0 0;line-height:1.5;display:flex;flex-wrap:wrap;justify-content:center;column-gap:.42em}
.veil h1 span{display:inline-block;opacity:0;filter:blur(12px);transition:opacity 1.6s ease,filter 1.6s ease}
.menu{display:flex;gap:clamp(22px,5vw,56px);margin-top:56px;font-family:var(--display);font-size:.88rem;letter-spacing:.3em;flex-wrap:wrap;justify-content:center}
.menu a{text-decoration:none;color:var(--fg);position:relative;padding-block:6px;opacity:0;transform:translateY(8px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1),color .4s}
.menu a::after{content:"";position:absolute;left:0;right:.3em;bottom:0;height:1px;background:var(--ai);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.menu a:hover{color:var(--ai)}
.menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1)}
body.entered .veil{pointer-events:auto}
body.entered .veil .mark{opacity:1;transform:none;transition-delay:.5s}
body.entered .veil h1 span{opacity:1;filter:blur(0)}
body.entered .veil h1 span:nth-child(1){transition-delay:.8s}
body.entered .veil h1 span:nth-child(2){transition-delay:1.1s}
body.entered .menu a{opacity:.8;transform:none}
body.entered .menu a:nth-child(1){transition-delay:1.6s}
body.entered .menu a:nth-child(2){transition-delay:1.75s}
body.entered .menu a:nth-child(3){transition-delay:1.9s}
body.entered .menu a:hover{opacity:1}
@media (max-width:560px){.veil h1{letter-spacing:.2em;margin-right:-.2em;flex-direction:column;align-items:center}.menu{flex-direction:column;gap:18px;margin-top:44px}}