/* ===========================================================
   株式会社HYPE
   モノクロ基調。ロゴの「斜めの切り込み」を動きと装飾の軸にする。
   =========================================================== */

:root{
  --ink:#000;
  --paper:#fff;
  --mist:#f2f2f2;
  --line:#e6e6e6;
  --line-mid:#ccc;
  --text:#1a1a1a;
  --mute:#767676;
  --on-ink-mute:#b3b3b3;

  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;

  --gut:clamp(20px,5vw,80px);
  --stack:clamp(72px,10vw,152px);
  --maxw:1240px;
  --hdr-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
@media (max-width:900px){ :root{ --hdr-h:60px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.8;
  letter-spacing:.03em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
@media (max-width:640px){ body{ font-size:1rem; } }
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
[id]{ scroll-margin-top:calc(var(--hdr-h) + 16px); }
[hidden]{ display:none !important; }
.nb{ display:inline-block; }
h1,h2,h3{ word-break:auto-phrase; line-break:strict; }
p,dd,td,li{ line-break:strict; }

:focus-visible{ outline:3px solid currentColor; outline-offset:3px; }

.wrap{ width:100%; max-width:calc(var(--maxw) + var(--gut) * 2); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:calc(920px + var(--gut) * 2); }

/* ===================== ヘッダー ===================== */

.hdr{
  position:fixed; inset:0 0 auto 0;
  z-index:80;
  height:var(--hdr-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-inline:max(var(--gut), calc((100vw - var(--maxw)) / 2));
  color:#fff;
  transition:background .35s, color .35s, box-shadow .35s;
}
.hdr.is-stuck{ background:rgba(255,255,255,.96); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.hdr-logo{ position:relative; display:block; height:26px; flex:none; }
.hdr-logo img{ height:26px; width:auto; transition:opacity .35s; }
.hdr-logo .logo-k{ position:absolute; inset:0 auto auto 0; opacity:0; }
.hdr.is-stuck .logo-w{ opacity:0; }
.hdr.is-stuck .logo-k{ opacity:1; }
body.is-menu .hdr{ background:transparent; color:#fff; box-shadow:none; }
body.is-menu .hdr .logo-w{ opacity:1; }
body.is-menu .hdr .logo-k{ opacity:0; }

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); }
.nav-link{
  position:relative;
  font-size:.875rem; font-weight:700; letter-spacing:.06em;
  padding:8px 0;
}
.nav-link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px;
  background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-link[aria-current="page"]::after{ transform:scaleX(1); }
.btn-nav{
  font-size:.875rem; font-weight:700; letter-spacing:.06em;
  padding:10px 22px;
  border:1.5px solid currentColor;
  transition:background .3s, color .3s;
}
.hdr-toggle{
  display:none;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; padding:0; color:inherit; cursor:pointer;
  position:relative;
}
.hdr-toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:currentColor;
  transition:transform .4s var(--ease-out), top .4s var(--ease-out);
}
.hdr-toggle span:nth-child(1){ top:17px; }
.hdr-toggle span:nth-child(2){ top:26px; }
body.is-menu .hdr-toggle span:nth-child(1){ top:21px; transform:rotate(24deg); }
body.is-menu .hdr-toggle span:nth-child(2){ top:21px; transform:rotate(-24deg); }

@media (max-width:900px){
  .nav{ display:none; }
  .hdr-toggle{ display:block; }
}

/* スマホ用メニュー */
.menu{
  position:fixed; inset:0; z-index:70;
  background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--hdr-h) + 24px) var(--gut) 40px;
  clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
  visibility:hidden;
  transition:clip-path .6s var(--ease-out), visibility 0s .6s;
  overflow-y:auto;
}
body.is-menu .menu{
  clip-path:polygon(-30% 0,100% 0,100% 100%,0 100%);
  visibility:visible;
  transition:clip-path .6s var(--ease-out), visibility 0s;
}
.menu a{
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--serif); font-weight:700; font-size:clamp(1.375rem,6.4vw,2rem);
  padding:18px 0;
  border-bottom:1px solid #333;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s, transform .6s var(--ease-out);
}
.menu a svg{ width:18px; height:18px; flex:none; }
body.is-menu .menu a{ opacity:1; transform:none; transition-delay:calc(.15s + var(--i,0) * .05s); }
.menu-sub{ margin-top:28px; font-size:.875rem; color:var(--on-ink-mute); }
.menu-sub a{ display:inline; font-family:var(--sans); font-size:inherit; font-weight:400; border:0; padding:0; text-decoration:underline; text-underline-offset:4px; }
@media (min-width:901px){ .menu{ display:none; } }

/* ===================== 共通パーツ ===================== */

.label{
  display:flex; align-items:center; gap:12px;
  font-size:.875rem; font-weight:700; letter-spacing:.1em;
  margin-bottom:20px;
}
.label::before{
  content:""; width:22px; height:2px; background:currentColor; flex:none;
  transform:rotate(-24deg);
}

.sec{ padding-block:var(--stack); }
.sec--mist{ background:var(--mist); }
.sec--ink{ background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.sec--ink .sec-lead{ color:var(--on-ink-mute); }

.sec-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.625rem,3.8vw,3rem);
  line-height:1.5; letter-spacing:.03em;
  color:var(--ink);
  margin-bottom:24px;
  text-wrap:balance;
}
.sec--ink .sec-title{ color:#fff; }
.sec-lead{ max-width:40em; margin-bottom:clamp(36px,5vw,64px); }
.sec-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:clamp(32px,4.5vw,60px); }
.sec-head .sec-title, .sec-head .sec-lead{ margin-bottom:0; }
.sec-head .sec-title + .sec-lead{ margin-top:20px; }
.note{ margin-top:20px; font-size:.875rem; color:var(--mute); }

/* ボタン：黒面が斜めにスライドして反転する */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:56px; padding:14px 30px;
  font-size:1rem; font-weight:700; letter-spacing:.04em;
  color:#fff; background:var(--ink);
  border:1.5px solid var(--ink);
  transition:color .35s;
}
.btn::before{
  content:""; position:absolute; inset:-1px -24px; z-index:-1;
  background:#fff;
  transform:translateX(-102%) skewX(-18deg);
  transition:transform .5s var(--ease-out);
}
.btn svg{ width:16px; height:16px; flex:none; transition:transform .4s var(--ease-out); }
.btn--light{ color:var(--ink); background:#fff; border-color:#fff; }
.btn--light::before{ background:var(--ink); }
.btn--line{ color:inherit; background:transparent; border-color:currentColor; }
.sec--ink .btn--line::before, .hero .btn--line::before, .phead .btn--line::before{ background:#fff; }

.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; letter-spacing:.04em;
  padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1.5px;
  transition:background-size .45s var(--ease-out);
}
.link-arrow svg{ width:14px; height:14px; flex:none; transition:transform .4s var(--ease-out); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }
.tags li{
  font-size:.8125rem; line-height:1.4;
  border:1px solid var(--line-mid);
  padding:7px 12px;
  background:#fff;
}

/* 写真：斜めに切り込むように現れる */
.ph{ margin:0; overflow:hidden; background:var(--mist); position:relative; }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }

/* ===================== ヒーロー（トップ） ===================== */

.hero{
  position:relative; overflow:hidden;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:flex-end;
  background:var(--ink); color:#fff;
  padding-block:calc(var(--hdr-h) + 40px) clamp(56px,8vw,104px);
}
.hero-bg{ position:absolute; inset:-6% 0 -6% 0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.5) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:url("assets/gen/hero-ink.png") center/cover no-repeat;
  opacity:.55; mix-blend-mode:screen; pointer-events:none;
}
.hero-in{ position:relative; z-index:2; }
.hero-tag{ font-size:.875rem; font-weight:700; letter-spacing:.14em; margin-bottom:clamp(18px,2.4vw,28px); }
.hero-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.75rem,7.4vw,5rem);
  line-height:1.35; letter-spacing:.02em;
  margin-bottom:clamp(22px,3vw,36px);
}
.line{ display:block; overflow:hidden; padding-block:.06em; }
.line > span{ display:block; }
.hero-sub{ max-width:34em; font-size:clamp(.9375rem,1.4vw,1.125rem); color:#e6e6e6; margin-bottom:clamp(28px,3.6vw,44px); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-scroll{
  position:absolute; right:var(--gut); bottom:0; z-index:2;
  writing-mode:vertical-rl; font-size:.75rem; letter-spacing:.2em;
  padding-bottom:88px;
}
.hero-scroll::after{
  content:""; position:absolute; left:50%; bottom:0; width:1px; height:72px; background:#fff;
  transform-origin:top; animation:scrollLine 2.2s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }
@media (max-width:640px){
  .hero-scroll{ display:none; }
  .hero-actions .btn{ flex:1 1 100%; }
}

/* ===================== 下層ページの見出し ===================== */

.phead{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding-block:calc(var(--hdr-h) + clamp(56px,9vw,128px)) clamp(48px,7vw,96px);
}
.phead::after{
  content:""; position:absolute; inset:0;
  background:url("assets/gen/hero-ink.png") 70% 40%/cover no-repeat;
  opacity:.5; pointer-events:none;
}
.phead .wrap{ position:relative; z-index:1; }
.phead-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.75rem,5.6vw,4rem);
  line-height:1.4; letter-spacing:.02em;
}
.phead-lead{ max-width:38em; margin-top:clamp(20px,2.6vw,32px); color:#e6e6e6; }
.phead-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.6vw,44px); }

/* ===================== トップ：事業の入口 ===================== */

.biz{ border-top:1px solid var(--ink); }
.biz-row{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) auto;
  align-items:center; gap:clamp(16px,4vw,64px);
  padding:clamp(28px,4vw,52px) clamp(0px,1.6vw,24px);
  border-bottom:1px solid var(--ink);
  transition:color .4s, padding .5s var(--ease-out);
}
.biz-row::before{
  content:""; position:absolute; inset:0 -8%; z-index:-1; background:var(--ink);
  transform:translateX(-101%) skewX(-14deg);
  transition:transform .6s var(--ease-out);
}
.biz-row h3{ font-family:var(--serif); font-weight:700; font-size:clamp(1.5rem,3.4vw,2.75rem); line-height:1.4; }
.biz-row p{ font-size:.9375rem; }
.biz-arw{
  width:clamp(44px,5vw,60px); aspect-ratio:1; border:1.5px solid currentColor; border-radius:50%;
  display:grid; place-items:center;
  transition:transform .5s var(--ease-out);
}
.biz-arw svg{ width:18px; height:18px; }
@media (max-width:760px){
  .biz-row{ grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; }
  .biz-row p{ grid-column:1; grid-row:2; }
  .biz-arw{ grid-column:2; grid-row:1 / span 2; }
}

/* ===================== 数字 ===================== */

.stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--line-mid); }
.stat{ padding:clamp(24px,3.2vw,44px) clamp(14px,2vw,32px); border-left:1px solid var(--line-mid); }
.stat:first-child{ border-left:0; }
.stat dt{ font-size:.875rem; font-weight:700; color:var(--mute); margin-bottom:10px; }
.stat dd{ display:flex; align-items:baseline; gap:4px; color:var(--ink); }
.stat dd b{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2rem,5vw,4rem); line-height:1.1; letter-spacing:0;
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:normal;
}
.stat dd span{ font-size:1.125rem; font-weight:700; }
@media (max-width:820px){
  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat:nth-child(odd){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line-mid); }
}

.stats--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.stat dd{ flex-wrap:wrap; }
.stat dd span{ white-space:nowrap; }

/* ===================== 写真グリッド ===================== */

.grid-photo{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(6px,1vw,14px); }
.grid-photo .ph{ aspect-ratio:3/2; }
.grid-photo .ph--big{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
@media (max-width:720px){
  .grid-photo{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid-photo .ph--big{ aspect-ratio:3/2; grid-row:auto; }
}
.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(6px,1vw,14px); }
.trio .ph{ aspect-ratio:4/3; }
.trio .ph:nth-child(2){ margin-top:clamp(0px,4vw,56px); }
.trio .ph:nth-child(3){ margin-top:clamp(0px,8vw,112px); }
@media (max-width:720px){
  .trio{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trio .ph:nth-child(1){ grid-column:span 2; aspect-ratio:16/9; }
  .trio .ph:nth-child(2), .trio .ph:nth-child(3){ margin-top:0; }
}
.band{ aspect-ratio:21/9; margin-bottom:clamp(32px,4vw,56px); }
@media (max-width:640px){ .band{ aspect-ratio:16/9; } }

/* ===================== 行リスト（事業・強み・進め方・実績） ===================== */

.rows{ border-top:1px solid var(--line-mid); }
.row{
  display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:clamp(16px,4vw,72px);
  padding-block:clamp(30px,4vw,56px);
  border-bottom:1px solid var(--line-mid);
}
.row h3{ font-family:var(--serif); font-weight:700; font-size:clamp(1.25rem,2.2vw,1.625rem); line-height:1.5; color:var(--ink); }
.row .en{ display:block; margin-top:8px; font-size:.8125rem; letter-spacing:.08em; color:var(--mute); }
.row-body > p{ margin-bottom:20px; }
.row-body > p:last-child{ margin-bottom:0; }
@media (max-width:860px){ .row{ grid-template-columns:1fr; gap:14px; } }

.flow-step{
  display:grid; grid-template-columns:88px minmax(0,280px) minmax(0,1fr);
  gap:clamp(12px,3vw,48px); align-items:start;
  padding-block:clamp(26px,3.2vw,40px);
  border-bottom:1px solid var(--line-mid);
}
.flow-no{ font-family:var(--serif); font-weight:700; font-size:.9375rem; letter-spacing:.08em; padding-top:.2em; }
.flow-no b{ font-size:1.75rem; margin-left:4px; line-height:1; font-feature-settings:normal; }
.flow-step h3{ font-size:1.1875rem; font-weight:700; line-height:1.6; color:var(--ink); }
.flow-step p{ font-size:.9375rem; }
.flow-step .who{ display:block; margin-top:10px; font-size:.8125rem; color:var(--mute); }
@media (max-width:860px){ .flow-step{ grid-template-columns:1fr; gap:6px; } }

.work{
  display:grid; grid-template-columns:150px minmax(0,1fr) minmax(0,280px);
  gap:clamp(8px,3vw,40px); align-items:baseline;
  padding:clamp(20px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line-mid);
  transition:padding .5s var(--ease-out), background .4s;
}
.work-cat{ font-size:.8125rem; font-weight:700; letter-spacing:.1em; }
.work-name{ font-size:1.125rem; font-weight:700; line-height:1.6; color:var(--ink); }
.work-name small{ display:block; margin-top:4px; font-size:.875rem; font-weight:400; color:var(--mute); }
.work-role{ font-size:.9375rem; }
@media (max-width:860px){ .work{ grid-template-columns:1fr; } }

/* ===================== FAQ ===================== */

.faq{ border-top:1px solid var(--line-mid); }
.faq details{ border-bottom:1px solid var(--line-mid); }
.faq summary{
  display:flex; gap:16px; align-items:baseline;
  padding:clamp(20px,2.6vw,30px) 4px;
  font-size:clamp(1rem,1.5vw,1.125rem); font-weight:700; color:var(--ink);
  cursor:pointer; list-style:none;
  transition:padding .45s var(--ease-out), background .3s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q"; font-family:var(--serif); flex:none; }
.faq summary i{
  position:relative; margin-left:auto; flex:none; align-self:center;
  width:16px; height:16px;
}
.faq summary i::before, .faq summary i::after{
  content:""; position:absolute; left:0; right:0; top:7px; height:2px; background:currentColor;
  transition:transform .45s var(--ease-out);
}
.faq summary i::after{ transform:rotate(90deg); }
.faq details[open] summary i::after{ transform:rotate(0); }
.faq .answer{ display:flex; gap:16px; padding:0 4px clamp(22px,2.6vw,32px); overflow:hidden; }
.faq .answer::before{ content:"A"; font-family:var(--serif); color:var(--mute); flex:none; }

/* ===================== 会社概要・代表メッセージ ===================== */

.msg{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(28px,6vw,96px); align-items:start; }
.msg-portrait{ aspect-ratio:4/5; margin-bottom:18px; }
.msg-role{ font-size:.8125rem; color:var(--mute); letter-spacing:.08em; }
.msg-name{ font-family:var(--serif); font-size:1.375rem; font-weight:700; color:var(--ink); }
.msg-body p{ margin-bottom:22px; line-height:2; }
.msg-body p:last-child{ margin-bottom:0; }
.msg-body .hi{ font-family:var(--serif); font-weight:700; font-size:clamp(1.375rem,2.8vw,2.125rem); line-height:1.6; color:var(--ink); margin-bottom:32px; }
@media (max-width:860px){
  .msg{ grid-template-columns:1fr; }
  .msg > div:first-child{ display:grid; grid-template-columns:120px 1fr; gap:4px 20px; align-items:end; }
  .msg-portrait{ grid-row:span 2; margin-bottom:0; }
  .msg-role{ align-self:end; }
  .msg-name{ align-self:start; }
}

.company-grid{ display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:start; }
.company-photo{ aspect-ratio:4/5; }
@media (max-width:860px){ .company-grid{ grid-template-columns:1fr; } .company-photo{ aspect-ratio:16/10; } }
.tbl{ width:100%; border-collapse:collapse; border-top:1px solid var(--line-mid); }
.tbl th,.tbl td{ text-align:left; vertical-align:top; padding:20px 0; border-bottom:1px solid var(--line-mid); }
.tbl th{ width:clamp(110px,20vw,200px); font-size:.9375rem; font-weight:700; color:var(--mute); padding-right:20px; }
.tbl a{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:560px){
  .tbl th,.tbl td{ display:block; width:100%; }
  .tbl th{ border-bottom:0; padding:16px 0 2px; font-size:.8125rem; }
  .tbl td{ padding:0 0 16px; }
}

.group{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:start; }
.group p{ margin-bottom:24px; }
.group-links{ display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
@media (max-width:860px){ .group{ grid-template-columns:1fr; } }

/* ===================== お問い合わせ ===================== */

.contact-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:start; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
.mail-big{
  display:inline-block; max-width:100%;
  font-family:var(--serif); font-weight:700; font-size:clamp(1.25rem,3.6vw,2.5rem);
  line-height:1.4; color:var(--ink); overflow-wrap:anywhere; letter-spacing:.01em; font-feature-settings:normal;
  padding-bottom:6px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 2px;
  transition:background-size .5s var(--ease-out);
  margin-bottom:24px;
}
.info dt{ font-size:.8125rem; font-weight:700; color:var(--mute); letter-spacing:.08em; }
.info dd{ margin:4px 0 24px; }
.info dd:last-child{ margin-bottom:0; }
.info a{ text-decoration:underline; text-underline-offset:4px; }
.info .sns-icon{
  display:inline-grid; place-items:center;
  width:48px; height:48px; margin-top:6px;
  border:1.5px solid var(--ink); border-radius:50%;
  color:var(--ink); text-decoration:none;
  transition:background .3s, color .3s, transform .5s var(--ease-out);
}
.info .sns-icon svg{ width:22px; height:22px; }
@media (hover:hover){ .info .sns-icon:hover{ background:var(--ink); color:#fff; transform:rotate(-8deg); } }
.next-links{ display:flex; flex-wrap:wrap; gap:16px 36px; margin-top:36px; }

/* ===================== CTA・フッター ===================== */

.cta{ position:relative; overflow:hidden; background:var(--ink); color:#fff; padding-block:clamp(80px,11vw,160px); }
.cta::after{
  content:""; position:absolute; inset:0;
  background:url("assets/gen/hero-ink.png") 30% 60%/cover no-repeat;
  opacity:.45; pointer-events:none;
}
.cta .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,64px); align-items:end; }
.cta h2{ font-family:var(--serif); font-weight:700; font-size:clamp(1.75rem,5.4vw,4rem); line-height:1.4; margin-bottom:20px; }
.cta p{ color:var(--on-ink-mute); max-width:36em; }
@media (max-width:860px){ .cta .wrap{ grid-template-columns:1fr; align-items:start; } .cta .btn{ width:100%; } }

.ftr{ background:var(--ink); color:var(--on-ink-mute); padding-block:40px; border-top:1px solid #333; font-size:.875rem; }
.ftr .wrap{ display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:space-between; }
.ftr-logo img{ height:22px; width:auto; }
.ftr-links{ display:flex; flex-wrap:wrap; gap:12px 28px; }
.ftr-links a{ padding:4px 0; background:linear-gradient(currentColor,currentColor) no-repeat 100% 100% / 0 1px; transition:background-size .4s var(--ease-out), color .3s; }
@media (max-width:640px){ .ftr .wrap{ flex-direction:column; align-items:flex-start; } }

/* ===================== ホバー（マウス操作のときだけ） ===================== */

@media (hover:hover){
  .nav-link:hover::after{ transform:scaleX(1); transform-origin:left; }
  .btn-nav:hover{ background:#fff; color:var(--ink); border-color:#fff; }
  .hdr.is-stuck .btn-nav:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

  .btn:hover{ color:var(--ink); }
  .btn:hover::before{ transform:translateX(0) skewX(-18deg); }
  .btn:hover svg{ transform:translateX(5px); }
  .btn--light:hover{ color:#fff; }
  .btn--line:hover{ color:var(--ink); }
  .sec:not(.sec--ink) .btn--line::before{ background:var(--ink); }
  .sec:not(.sec--ink) .btn--line:hover{ color:#fff; }

  .link-arrow:hover{ background-size:0 1.5px; background-position:100% 100%; }
  .link-arrow:hover svg{ transform:translateX(5px); }
  .link-arrow.is-ext:hover svg{ transform:translate(3px,-3px); }

  .biz-row:hover{ color:#fff; padding-inline:clamp(12px,2.6vw,40px); }
  .biz-row:hover::before{ transform:translateX(0) skewX(-14deg); }
  .biz-row:hover .biz-arw{ transform:rotate(-45deg); }

  .ph:hover img{ transform:scale(1.06); }

  .work:hover{ padding-inline:clamp(8px,1.6vw,24px); background:var(--mist); }
  .faq summary:hover{ padding-inline:16px; background:var(--mist); }
  .mail-big:hover{ background-size:0 2px; background-position:100% 100%; }
  .ftr-links a:hover{ color:#fff; background-size:100% 1px; background-position:0 100%; }
  .menu a:hover{ color:var(--on-ink-mute); }
}

/* ===================== 動き ===================== */

/* ページ切り替えの幕（斜めの黒い面が横切る） */
.curtain{ display:none; }
.js .curtain{
  display:block; position:fixed; z-index:100; top:0; bottom:0; left:-25vw; width:150vw;
  background:var(--ink); pointer-events:none;
  transform:translateX(125%) skewX(-12deg);
  animation:curtainOut .75s var(--ease-out) both;
}
.js .curtain.is-leaving{ animation:curtainIn .5s cubic-bezier(.6,0,.4,1) both; pointer-events:auto; }
@keyframes curtainOut{ from{ transform:translateX(0) skewX(-12deg); } to{ transform:translateX(125%) skewX(-12deg); } }
@keyframes curtainIn{ from{ transform:translateX(-125%) skewX(-12deg); } to{ transform:translateX(0) skewX(-12deg); } }

/* ページ冒頭：見出しが一行ずつせり上がる */
.js main .line > span{ transform:translateY(110%); }
.js main .rise{ opacity:0; transform:translateY(18px); }
.js main.is-enter .line > span{ transform:none; transition:transform 1.1s var(--ease-out); transition-delay:calc(.35s + var(--i,0) * .12s); }
.js main.is-enter .rise{ opacity:1; transform:none; transition:opacity .9s, transform 1s var(--ease-out); transition-delay:calc(.55s + var(--i,0) * .1s); }
.js main .hero-bg img{ transform:scale(1.12); }
.js main.is-enter .hero-bg img{ transform:scale(1); transition:transform 2.4s var(--ease-out); }

/* スクロールで現れる */
.js [data-rv]{ opacity:0; transform:translateY(28px); transition:opacity .9s, transform 1.1s var(--ease-out); transition-delay:calc(var(--d,0) * 90ms); }
.js [data-rv].is-in{ opacity:1; transform:none; }
.js [data-rv="img"]{ opacity:1; transform:none; transition:background .2s 1s; }
.js [data-rv="img"]:not(.is-in){ background:transparent; }
.js [data-rv="img"] img{
  clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%);
  transform:scale(1.18);
  transition:clip-path 1.2s var(--ease-out), transform 1.6s var(--ease-out);
  transition-delay:calc(var(--d,0) * 110ms);
}
.js [data-rv="img"].is-in img{ clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%); transform:scale(1); }

@media (hover:hover){ .js [data-rv="img"].is-in:hover img{ transform:scale(1.06); transition-delay:0s; } }

.faq details[open] .answer{ animation:faqIn .5s var(--ease-out); }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-8px); } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .js .curtain{ display:none; }
  .js [data-rv], .js main .rise{ opacity:1; transform:none; }
  .js [data-rv="img"] img{ clip-path:none; }
  .js [data-rv="img"] img, .js main .line > span, .js main .hero-bg img{ transform:none; }
}