/* サービスの別ページ（11/6）。見本：漫画のコマ（暗く大きく敷いた絵の上に、細長いコマが横に並ぶ）。
   色はトップの SERVICES と同じ深い青と黄緑。線や枠の飾りは使わない（コマは影だけで浮かせる）。 */
:root{--bg:#050a22;--panel:rgba(8,16,58,.82);--fg:#eef2ff;--fg2:#c3cbea;--dim:#8a95c4;--lime:#c4ff14;--navy:#13245e;--pad:max(20px,4vw);--bw:min(58vw,980px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Noto Sans JP","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.bgimg{position:fixed;inset:-2%;z-index:-1;background:center/cover no-repeat;filter:blur(3px) brightness(.15) saturate(.9)}
.bgimg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 52%,rgba(3,7,26,0),rgba(3,7,26,.6))}
header{position:fixed;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:max(18px,env(safe-area-inset-top)) var(--pad) 26px;background:linear-gradient(180deg,rgba(5,10,34,.88),rgba(5,10,34,0))}
.logo img{height:40px;width:auto}
nav{display:flex;gap:28px}
nav a{font:700 13px/1 "Inter",sans-serif;letter-spacing:.12em;text-decoration:none;color:#fff}
nav a[aria-current]{color:var(--lime)}
nav a:hover{opacity:.75}

/* ---------------------------------------------------------------- 帯が横に滑る舞台（スクロールの長さ = 帯の数 × 画面） */
.stage{height:calc((var(--n) - 1) * 62vh + 125vh);position:relative}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:1fr auto 1fr;grid-template-columns:minmax(0,1fr)}
.title{align-self:end;justify-self:center;text-align:center;padding:0 var(--pad) 34px;max-width:900px}
.title .en{margin:0 0 12px;font:700 13px/1 "Inter",sans-serif;letter-spacing:.24em;color:var(--lime)}
.title h1{margin:0;font:600 clamp(26px,3.2vw,44px)/1.3 "Noto Serif JP","Yu Mincho",serif;letter-spacing:.06em;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.track{width:max-content;justify-self:start;display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);will-change:transform}
.band{flex:0 0 var(--bw);aspect-ratio:2400/760;padding:0;border:0;background:#0b1640;cursor:zoom-in;overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);transform-origin:center;will-change:transform,opacity}
.band img{width:100%;height:100%;object-fit:cover}
.lines{position:relative;align-self:start;justify-self:center;width:min(760px,90vw);height:8.5em;margin-top:38px}
.line{position:absolute;inset:0 0 auto;margin:0;text-align:center;font:600 clamp(17px,1.7vw,22px)/1.75 "Noto Serif JP","Yu Mincho",serif;letter-spacing:.08em;
  color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 30px rgba(3,7,26,.9);opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.line.on{opacity:1;transform:none}
.more{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;font:700 11px/1 "Inter",sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.55);transition:opacity .4s}
.more.off{opacity:0}

/* ---------------------------------------------------------------- 説明 */
.detail{max-width:1180px;margin:0 auto;padding:40px var(--pad) 0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}
.desc{margin:0;font:500 clamp(16px,1.3vw,18px)/2 "Noto Sans JP",sans-serif}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.tags li{padding:9px 13px;background:rgba(255,255,255,.08);font:700 13px/1 "Noto Sans JP",sans-serif;border-radius:3px;color:var(--fg2)}
.note{margin:12px 0 0;font:500 13px/1.8 "Noto Sans JP",sans-serif;color:var(--dim)}
.proof{margin:0;padding:22px 24px;background:var(--panel);border-radius:6px;font:500 15px/1.9 "Noto Sans JP",sans-serif;color:var(--fg2);align-self:start}
.proof b{display:block;margin-bottom:8px;font:700 13px/1.4 "Noto Sans JP",sans-serif;color:var(--lime);letter-spacing:.04em}
.proof a{display:inline-block;margin-top:10px;font-weight:700;color:#fff;text-underline-offset:4px}
.pager{max-width:1180px;margin:72px auto 0;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{display:block;padding:22px 24px;background:var(--panel);border-radius:6px;text-decoration:none;font:700 17px/1.4 "Noto Sans JP",sans-serif;transition:background .25s}
.pager a:hover{background:rgba(196,255,20,.14)}
.pager small{display:block;margin-bottom:6px;font:700 11px/1 "Inter","Noto Sans JP",sans-serif;letter-spacing:.14em;color:var(--lime)}
.pager .next{text-align:right}

/* ---------------------------------------------------------------- 一覧（services.html） */
.top{max-width:1180px;margin:0 auto;padding:min(20vh,170px) var(--pad) 40px}
.top .en{margin:0;font:900 clamp(56px,10vw,150px)/.9 "Inter",sans-serif;letter-spacing:-.02em;color:#fff}
.top h1{margin:22px 0 0;font:900 clamp(22px,2.4vw,30px)/1.4 "Noto Sans JP",sans-serif;color:var(--lime)}
.top p{margin:18px 0 0;max-width:34em;font:500 clamp(16px,1.4vw,18px)/1.95 "Noto Sans JP",sans-serif;color:var(--fg2)}
.entries{display:grid;gap:clamp(18px,2.4vw,30px);padding:24px 0 0}
.entry{position:relative;display:block;width:var(--bw);text-decoration:none;box-shadow:0 26px 70px rgba(0,0,0,.6);overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.entry:nth-child(odd){margin-left:var(--pad)}
.entry:nth-child(even){margin-left:auto;margin-right:var(--pad)}
.entry img{width:100%;aspect-ratio:2400/760;object-fit:cover;filter:brightness(.62);transition:filter .4s,transform .6s cubic-bezier(.2,.7,.2,1)}
.entry:hover img{filter:brightness(.85);transform:scale(1.03)}
.entry .t{position:absolute;left:28px;right:64px;bottom:22px;font:900 clamp(20px,2.2vw,30px)/1.3 "Noto Sans JP",sans-serif;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.entry .t small{display:block;margin-bottom:8px;font:700 12px/1 "Inter",sans-serif;letter-spacing:.22em;color:var(--lime)}
.entry .go{position:absolute;right:26px;bottom:22px;font:700 26px/1 "Inter",sans-serif;transition:transform .25s}
.entry:hover .go{transform:translateX(6px)}
.flow{max-width:1180px;margin:96px auto 0;padding:0 var(--pad)}
.flow h2{margin:0 0 28px;font:900 clamp(24px,2.6vw,34px)/1.3 "Noto Sans JP",sans-serif}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.steps li{padding:22px 22px 24px;background:var(--panel);border-radius:6px;font:500 15px/1.8 "Noto Sans JP",sans-serif;color:var(--fg2)}
.steps b{display:block;margin-bottom:6px;font:900 19px/1.3 "Noto Sans JP",sans-serif;color:#fff}
.ai{margin:18px 0 0;padding:22px 24px;background:rgba(196,255,20,.08);border-radius:6px;font:500 15px/1.9 "Noto Sans JP",sans-serif;color:var(--fg2)}
.ai b{color:var(--lime);margin-right:12px}

/* ---------------------------------------------------------------- 相談・足 */
.cta{max-width:1180px;margin:96px auto 0;padding:0 var(--pad) 110px;display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:28px}
.cta h2{margin:0;font:600 clamp(30px,4vw,54px)/1.2 "Noto Serif JP","Yu Mincho",serif}
.cta p{margin:12px 0 0;color:var(--fg2);font:500 16px/1.8 "Noto Sans JP",sans-serif}
.cta a{display:inline-flex;align-items:center;gap:22px;padding:22px 34px 22px 40px;background:#f5f7fb;color:var(--navy);font:600 19px/1 "Noto Serif JP",serif;letter-spacing:.24em;text-decoration:none}
.cta a .ar{font-family:"Inter",sans-serif;letter-spacing:0;transition:transform .25s}
.cta a:hover .ar{transform:translateX(6px)}
footer{padding:28px var(--pad) 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:700 13px/1 "Inter",sans-serif;letter-spacing:.1em;color:var(--dim)}
footer a{text-decoration:none}
footer a:hover{color:#fff}
dialog{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;margin:0}
dialog::backdrop{background:rgba(3,7,26,.94)}
dialog img{width:100%;height:100%;object-fit:contain;cursor:zoom-out}
dialog .x{position:fixed;top:18px;right:22px;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font:400 26px/1 "Inter",sans-serif;cursor:pointer}
@media (max-width:820px){
  .entry .t{left:18px;right:52px;bottom:16px;font-size:18px}
  .entry .go{right:18px;bottom:16px}
  :root{--bw:86vw}
  nav{gap:14px} nav a{font-size:11px} .logo img{height:32px}
  .detail{grid-template-columns:1fr;gap:24px}
  .steps{grid-template-columns:1fr}
  .entry:nth-child(n){margin-left:auto;margin-right:auto}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
}
@media (prefers-reduced-motion:reduce){.line{transition:none}}

/* ---------------------------------------------------------------- 上の「相談する」とメニュー（11/7 スマホ対応。トップと同じ形） */
header nav{align-items:center}
nav .ask{margin-left:4px;padding:10px 16px;border-radius:4px;font:700 13px/1 "Noto Sans JP",sans-serif;letter-spacing:.14em;color:#fff;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .25s,color .25s}
nav .ask:hover{opacity:1;background:#e8893c;color:#1a1206}
#menubtn{display:none;width:40px;height:40px;border:0;border-radius:4px;padding:0;background:rgba(255,255,255,.14);cursor:pointer;place-items:center}
#menubtn .g{display:grid;grid-template-columns:repeat(3,5px);gap:3px}
#menubtn .g i{width:5px;height:5px;background:#fff;transition:transform .3s cubic-bezier(.3,1.5,.5,1),opacity .2s}
body.menu #menubtn .g i:nth-child(2n){opacity:0;transform:scale(.2)}
#menu{position:fixed;inset:0;z-index:7;display:block;background:rgba(3,10,46,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:96px 30px 30px;opacity:0;pointer-events:none;transition:opacity .3s;overflow-y:auto}
body.menu{overflow:hidden}
body.menu #menu{opacity:1;pointer-events:auto}
body.menu header{z-index:8;background:transparent}
body.menu header nav .ask{opacity:0;pointer-events:none}
#menu a{display:block;padding:15px 0 14px;text-decoration:none;opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
body.menu #menu a{opacity:1;transform:none}
#menu a:nth-child(2){transition-delay:.04s}#menu a:nth-child(3){transition-delay:.08s}#menu a:nth-child(4){transition-delay:.12s}#menu a:nth-child(5){transition-delay:.16s}#menu a:nth-child(6){transition-delay:.2s}
#menu a b{font:900 30px/1 "Inter",sans-serif;letter-spacing:.06em;color:#fff}
#menu a.on b{color:var(--c)}
#menu a small{display:block;margin-top:7px;font:700 12px/1 "Noto Sans JP",sans-serif;letter-spacing:.08em;color:#aab6e6}
#menu .cta{display:inline-flex;align-items:center;gap:18px;margin-top:22px;padding:18px 26px;background:#f5f7fb;color:#16214a;font:600 16px/1 "Noto Serif JP",serif;letter-spacing:.24em}

@media (max-width:820px){
  /* 上：ロゴ・相談する・メニュー。下へ読み進めたら、字と重ならないよう紺の帯にする */
  header{padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));background:transparent;transition:background .3s}
  header.solid{background:rgba(5,10,34,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .logo img{height:30px}
  header nav{gap:10px}
  header nav a:not(.ask){display:none}
  nav .ask{font-size:11px;padding:10px 12px}
  #menubtn{display:grid}
  /* 帯：細長い 3:1 のままだと縦長の画面で小さすぎるので、2.1:1 に切り抜いて背を高く（主役は真ん中にある） */
  :root{--bw:84vw}
  .band{aspect-ratio:2.1/1}
  .entry img{aspect-ratio:2.1/1}
  .title{padding-bottom:26px}
  /* 題字・一覧の名前は 1 行に収める（「制 / 作」「デザイ / ン」と 1 字だけ落ちていた） */
  .title h1{font-size:min(6vw,30px);letter-spacing:.04em;white-space:nowrap}
  .entry .t{font-size:min(17px,4.6vw);letter-spacing:0;white-space:nowrap;right:46px}
  .lines{margin-top:30px;height:7.5em}
  .top{padding-top:110px}
  .top .en{font-size:clamp(48px,15vw,72px)}
  .detail{padding-top:24px}
  .pager{margin-top:48px}
  .flow{margin-top:72px}
  .cta{margin-top:72px;padding-bottom:72px}
  .cta h2{font-size:30px}
  .cta a{font-size:17px;padding:20px 30px 20px 34px}
}

/* ---------------------------------------------------------------- 読む所（11/7 作り直し）
   絵を見せる所は暗いまま、読む所は明るい紙の上に字だけで組む（カードや色の箱は使わない）。
   見出しは左、中身は右。スマホは上下に並べる。トップの CONTACT と同じ明るい地と紺の字 */
.paper{--ink:#16214a;--ink2:#46527a;--ink3:#7a84a6;--paper:#f3f5fa;background:var(--paper);color:var(--ink);margin-top:110px;padding:96px 0 0}
.paper .part{max-width:1080px;margin:0 auto;padding:0 var(--pad) 88px;display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px 56px;scroll-margin-top:90px}
.paper .ph h2{margin:0;font:900 26px/1.35 "Noto Sans JP",sans-serif;letter-spacing:.04em;color:var(--ink)}
.paper .ph p{margin:8px 0 0;font:500 14px/1.6 "Noto Sans JP",sans-serif;color:var(--ink3)}
.paper h3{margin:0;font:700 18px/1.5 "Noto Sans JP",sans-serif;color:var(--ink)}
.paper p,.paper li,.paper dd{font:500 16px/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
.paper a{color:var(--ink);text-underline-offset:4px}
/* 進め方：番号と名前、その下に一文。上から順に読む */
.steps{display:grid;grid-template-columns:none;gap:30px;margin:0;padding:0;list-style:none}
.paper .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 8px;padding:0;background:none;border-radius:0}
.steps .n{font:700 22px/1.3 "Inter",sans-serif;color:var(--ink3)}
.steps p{margin:4px 0 0}
/* AI の使い方：使うところ・人が行うところを並べる */
.split{display:grid;grid-template-columns:1fr 1fr;gap:24px 48px}
.split ul{margin:10px 0 0;padding:0;list-style:none}
.split li{padding:2px 0}
/* よくある質問 */
.faq{margin:0;display:grid;gap:34px}
.faq dt{font:700 17px/1.6 "Noto Sans JP",sans-serif;color:var(--ink)}
.faq dd{margin:6px 0 0}
/* 各サービスのページ：できること・つくったもの */
.paper .desc{margin:0;font:500 16px/1.95 "Noto Sans JP",sans-serif;color:var(--ink2)}
.paper .tags li{background:rgba(22,33,74,.07);color:var(--ink);font-size:13px;line-height:1}
.paper .note{color:var(--ink3)}
.more-link{margin:14px 0 0}
.more-link a{font-weight:700}
/* 前後のサービス・相談・足 */
.paper .pager{margin:0 auto;padding:0 var(--pad) 0}
.paper .pager a{background:rgba(22,33,74,.06);color:var(--ink)}
.paper .pager a:hover{background:rgba(22,33,74,.11)}
.paper .pager small{color:var(--ink3)}
.paper .cta{margin:96px auto 0;padding:72px var(--pad) 88px;max-width:1080px}
.paper .cta h2{color:var(--ink)}
.paper .cta p{color:var(--ink2)}
.paper .cta a{background:var(--ink);color:#f5f7fb}
.paper footer{max-width:1080px;margin:0 auto;color:var(--ink3)}
.paper footer a:hover{color:var(--ink)}
/* 一覧の各サービスの下に、頼めるものを一行で */
.entry{box-shadow:none;overflow:visible}
.entry .pic{position:relative;display:block;overflow:hidden;box-shadow:0 26px 70px rgba(0,0,0,.6)}
.entry .d{display:block;margin-top:12px;font:500 14px/1.7 "Noto Sans JP",sans-serif;color:var(--fg2)}
/* このページの内容（上の目次） */
.toc{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px}
.toc a{font:700 14px/1.4 "Noto Sans JP",sans-serif;color:#fff;text-decoration:none}
.toc a::after{content:" ↓";font-family:"Inter",sans-serif;color:var(--lime)}
.toc a:hover{color:var(--lime)}
/* 明るい所に来たら、上の帯も明るく・字を紺に */
.logo .dk{display:none}
header.lite{background:#f3f5fa}
header.lite .logo .lt{display:none}header.lite .logo .dk{display:block}
header.lite nav a{color:var(--navy)}
header.lite nav a[aria-current]{color:#4a6b00}
header.lite nav .ask{background:rgba(22,33,74,.08);color:var(--navy)}
header.lite #menubtn{background:rgba(22,33,74,.08)}header.lite #menubtn .g i{background:var(--navy)}
body.menu header.lite{background:transparent}
body.menu header.lite .logo .lt{display:block}body.menu header.lite .logo .dk{display:none}
body.menu header.lite #menubtn{background:rgba(255,255,255,.14)}body.menu header.lite #menubtn .g i{background:#fff}
@media (max-width:820px){
  .paper{margin-top:72px;padding-top:64px}
  .paper .part{grid-template-columns:minmax(0,1fr);gap:18px;padding-bottom:64px}
  .paper .ph h2{font-size:22px}
  .paper p,.paper li,.paper dd,.paper .desc{font-size:15px}
  .split{grid-template-columns:1fr 1fr;gap:20px}
  .faq{gap:28px}
  .faq dt{font-size:16px}
  .paper .cta{margin-top:40px;padding-top:56px;padding-bottom:64px}
  .entry .d{font-size:13px;margin-top:10px}
  .entries{gap:30px}
  header.lite.solid{background:#f3f5fa}
}

/* ---------------------------------------------------------------- 11/7 夜：読む所を別ページ（guide.html）へ。一覧は暗い 3D のまま終わる */
/* 戻る：帯の舞台の左上に常に出す（スマホは上の名前の並びを隠しているので） */
.back{position:absolute;z-index:2;left:var(--pad);top:96px;font:700 13px/1 "Noto Sans JP",sans-serif;letter-spacing:.06em;color:var(--fg2);text-decoration:none}
.back:hover{color:#fff}
/* 一覧の終わり：ご依頼についてのページへ（暗い地のまま、字だけ） */
.toguide{max-width:1180px;margin:110px auto 0;padding:0 var(--pad)}
.toguide a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;text-decoration:none}
.toguide small{grid-column:1;font:700 12px/1 "Inter",sans-serif;letter-spacing:.22em;color:var(--lime)}
.toguide b{grid-column:1;font:900 clamp(26px,3vw,40px)/1.3 "Noto Sans JP",sans-serif;color:#fff}
.toguide span{grid-column:1;font:500 15px/1.8 "Noto Sans JP",sans-serif;color:var(--fg2)}
.toguide i{grid-column:2;grid-row:1/4;font:700 clamp(28px,3vw,40px)/1 "Inter",sans-serif;font-style:normal;color:#fff;transition:transform .25s}
.toguide a:hover i{transform:translateX(8px)}
.toguide a:hover b{color:var(--lime)}
.toc a.out::after{content:" →"}
/* 暗い 3D から明るい読む所へは、霞がかかるように少しずつ明るくする（境目の線を作らない） */
.paper{position:relative}
.stage + .paper::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(243,245,250,0),rgba(243,245,250,.55) 60%,#f3f5fa)}
/* 各サービスのページの終わり：ほかの 3 つを絵つきで */
.others{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.oth{display:block;text-decoration:none;color:var(--ink)}
.oth img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:filter .3s}
.oth:hover img{filter:brightness(1.1)}
.oth span{display:block;margin-top:10px;font:700 14px/1.5 "Noto Sans JP",sans-serif}
.oth small{display:block;margin-bottom:4px;font:700 10px/1 "Inter",sans-serif;letter-spacing:.16em;color:var(--ink3)}
/* ご依頼について（guide.html）：始めから明るい紙。上に 4 つの立体の絵 */
body.light{background:#f3f5fa}
.paper.guide{margin-top:0;padding-top:0}
.gtop{max-width:1080px;margin:0 auto;padding:150px var(--pad) 40px}
.gtop .back{position:static;display:inline-block;margin-bottom:28px;color:var(--ink3)}
.gtop .back:hover{color:var(--ink)}
.gtop .en{margin:0;font:900 clamp(52px,8vw,112px)/.9 "Inter",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.gtop h1{margin:20px 0 0;font:900 clamp(22px,2.4vw,30px)/1.4 "Noto Sans JP",sans-serif;color:var(--ink)}
.gtop .lead{margin:14px 0 0;max-width:40em;font:500 16px/1.9 "Noto Sans JP",sans-serif;color:var(--ink2)}
.gtop .toc a{color:var(--ink)}
.gtop .toc a::after{color:var(--ink3)}
.gtop .toc a:hover{color:#4a6b00}
.ghero{max-width:1080px;margin:0 auto 96px;padding:0 var(--pad)}
.ghero img{width:100%;aspect-ratio:2.4/1;object-fit:cover;object-position:50% 100%}
@media (max-width:820px){
  .back{top:68px;font-size:12px}
  .toguide{margin-top:80px}
  .toguide span{font-size:14px}
  .others{grid-template-columns:minmax(0,1fr);gap:18px}
  .oth{display:grid;grid-template-columns:42% minmax(0,1fr);gap:14px;align-items:center}
  .oth span{margin-top:0}
  .gtop{padding-top:96px}
  .gtop .back{margin-bottom:22px}
  .gtop .en{font-size:clamp(48px,15vw,72px)}
  .ghero{margin-bottom:64px}
  .ghero img{aspect-ratio:1.6/1;object-position:50% 80%}
}