/* HelloMoon コーポレートサイト
   デザイントークンと各セクションの仕様：spec.md 3〜6章（見た目の基準は html/lab/scroll-01/） */
:root {
  --bg: #E4E3E0;
  --ink: #161616;
  --ink-2: #3D3C39;
  --muted: #5E5D59;
  --surface: #D9D8D4;
  --line: #CFCDC7;
  --dark: #161616;
  --on-dark: #EDEDEA;
  --on-dark-2: #BDBCB7;
  --on-dark-line: #3A3A38;
  --gold: #B39B5F;
  --gold-hover: #A08850;
  --gutter: clamp(20px, 4.4vw, 64px);
  --max: 1240px;
  --font-en: 'Inter Tight', sans-serif;
  --font-jp: 'Zen Kaku Gothic New', sans-serif;
}
* { box-sizing: border-box; }
/* 上端・下端でページが弾む動き（macOS のラバーバンド）を止める。弾むと HERO の上に地色だけの隙間が見えるため */
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-jp); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
/* キーボード操作のときだけフォーカスの枠を出す */
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; }
/* 語句の途中で改行させない（日本語の文を句の切れ目でだけ折り返す） */
.nw { display: inline-block; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max); margin: 0 auto; }

/* ---------- ヘッダー（常に表示） ---------- */
.hd { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 40px; padding: 32px var(--gutter); color: #fff; mix-blend-mode: difference; }
/* HERO を過ぎたら、真下のセクションと同じ地色を敷く（main.js が is-solid と data-theme を切り替える） */
.hd.is-solid { mix-blend-mode: normal; padding-top: 20px; padding-bottom: 20px; }
.hd.is-solid[data-theme="light"] { background: var(--bg); color: var(--ink); }
.hd.is-solid[data-theme="dark"] { background: var(--dark); color: var(--on-dark); }
.hd.is-solid[data-theme="light"] .logo img { filter: none; }
.hd .cta { border-color: currentColor; }
.logo img { display: block; height: 17px; width: auto; filter: invert(1); }
.hd nav { margin-left: auto; display: flex; gap: 28px; font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: .16em; }
.cta { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 1px solid; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: .06em; }
.menu { display: none; height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: .2em; }

/* ---------- HERO ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* WebGL2 が使えない環境では静止画を出す（hero.js が <html> に no-webgl を付ける）。
   背景画像にしておくと、必要なときだけ読み込まれる */
.no-webgl .hero { background: url(../img/hero-still.webp) center / cover no-repeat; }
.no-webgl .hero canvas { display: none; }
.hero-ui { position: absolute; inset: 0; pointer-events: none; }
.copy { position: absolute; left: var(--gutter); bottom: 56px; }
.copy h1 { margin: 0; font-family: var(--font-en); font-weight: 800; font-size: clamp(72px, 10.6vw, 176px); line-height: .88; letter-spacing: -.045em; }
.line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line .in { display: inline-block; }
.lead { position: absolute; top: 132px; right: var(--gutter); width: 320px; margin: 0; font-size: 13px; line-height: 2; letter-spacing: .04em; text-wrap: pretty; }

.play .line .in { animation: rise-in 1.3s both cubic-bezier(.2, .7, 0, 1); }
.play .l2 .in { animation-delay: .14s; }
.play .lead { animation: fade-in 1.2s .9s both ease; }
@keyframes rise-in { from { transform: translateY(105%); } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- ABOUT ---------- */
.about { padding: clamp(120px, 14vw, 200px) var(--gutter) clamp(120px, 14vw, 200px); }
.eyebrow { margin: 0 0 28px; font-family: var(--font-en); font-size: 12px; font-weight: 500; letter-spacing: .24em; color: var(--muted); }
.about .eyebrow { margin-bottom: clamp(48px, 6vw, 80px); }
/* ロゴと本文はひとかたまりで左に寄せ、間は詰める */
.about-body { display: grid; grid-template-columns: auto minmax(0, 680px); justify-content: start; gap: clamp(40px, 5.5vw, 88px); align-items: start; }
.about-logo img { display: block; width: clamp(180px, 17vw, 250px); height: auto; }
.about-lead { margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 2.05; font-weight: 500; }
.about-sub { margin: 32px 0 0; font-size: 15px; line-height: 2.1; color: var(--ink-2); }

/* ---------- SERVICE ---------- */
.service { position: relative; background: var(--dark); color: var(--on-dark); padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(120px, 12vw, 180px); }
.service .eyebrow { color: var(--on-dark-2); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.sec-lead { margin: 0 0 8px; max-width: 440px; font-size: 15px; line-height: 2; color: var(--on-dark-2); }
.cols3 { margin-top: clamp(64px, 7vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.svc { padding-top: 28px; border-top: 1px solid var(--on-dark-line); }
.svc-no { margin: 0; font-family: var(--font-en); font-size: 15px; letter-spacing: .08em; }
.svc-no span { margin-right: 14px; font-weight: 800; color: var(--gold); }
.svc h3 { margin: 20px 0 16px; font-size: 21px; font-weight: 700; }
.svc p:last-child { margin: 0; font-size: 14.5px; line-height: 2; color: var(--on-dark-2); }

/* ---------- セクション見出し（共通） ---------- */
.sec-head h2, .profile h2, .contact h2 { margin: 0; font-size: clamp(30px, 3.9vw, 56px); line-height: 1.4; font-weight: 700; }
.projects .sec-lead, .profile-text { color: var(--ink-2); }

/* ---------- PROJECTS ---------- */
.projects { padding: clamp(120px, 12vw, 180px) var(--gutter) clamp(80px, 8vw, 120px); }
.cols2 { margin-top: clamp(56px, 6vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 3vw, 48px); }
.pj-visual { position: relative; aspect-ratio: 1400 / 1011; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 3%; overflow: hidden; background: var(--surface); }
.pj-visual.app img { width: 100%; height: 100%; object-fit: cover; }
.pj-visual.store svg { width: 72%; height: auto; color: var(--ink); }
.pj-visual .cap { position: absolute; left: 20px; bottom: 16px; font-family: var(--font-en); font-size: 11px; letter-spacing: .2em; color: var(--muted); }
.pj-body { padding-top: 28px; }
.tags { margin: 0; display: flex; align-items: center; gap: 12px; font-family: var(--font-en); font-size: 11px; font-weight: 500; letter-spacing: .18em; }
.tag { padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--font-jp); letter-spacing: .06em; }
.tag-line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pj-name { margin: 18px 0 0; font-size: 28px; font-weight: 700; }
.pj-name.en { font-family: var(--font-en); font-size: 34px; font-weight: 800; letter-spacing: -.03em; }
.pj-name small { margin-left: 12px; font-size: 15px; font-weight: 500; }
.pj-catch { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
.pj-desc { margin: 14px 0 0; font-size: 14.5px; line-height: 2; color: var(--ink-2); }
.link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--ink); }
.soon { margin: 12px 0 0; min-height: 44px; display: flex; align-items: center; font-family: var(--font-en); font-size: 12px; letter-spacing: .2em; color: var(--muted); }

/* ---------- PROFILE ---------- */
.profile { padding: clamp(80px, 8vw, 120px) var(--gutter); }
.profile .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 96px); align-items: start; }
.profile h2 { font-size: clamp(28px, 3vw, 44px); }
.profile-text { margin: 28px 0 0; font-size: 15px; line-height: 2.1; }
.person { display: flex; gap: 32px; align-items: flex-start; padding-top: 44px; }
/* イラストの白い地は乗算で消し、ページの地色になじませる */
.photo { flex-shrink: 0; display: block; width: 150px; height: auto; aspect-ratio: 640 / 1373; mix-blend-mode: multiply; }
.person-body p { margin: 0; }
.role { font-size: 12px; color: var(--muted); }
.name { margin-top: 8px !important; font-size: 24px; font-weight: 700; letter-spacing: .08em; }
.name-en { margin-top: 4px !important; font-family: var(--font-en); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.career { margin-top: 20px !important; font-size: 14px; line-height: 2; color: var(--ink-2); }

/* ---------- CONTACT ---------- */
.contact { background: var(--dark); color: var(--on-dark); padding: clamp(100px, 11vw, 160px) var(--gutter); }
.contact .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 64px; }
.contact .eyebrow { color: var(--on-dark-2); }
.contact h2 { font-size: clamp(30px, 3.4vw, 48px); }
.contact-text { margin: 28px 0 0; max-width: 520px; font-size: 14.5px; line-height: 2; color: var(--on-dark-2); }
.btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 64px; padding: 0 36px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: .04em; }

/* ---------- FOOTER / COMPANY ---------- */
.company { padding: 0 var(--gutter) clamp(120px, 12vw, 180px); }
.company .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 7vw, 96px); align-items: start; padding-top: clamp(80px, 8vw, 120px); border-top: 1px solid var(--line); }
.company h2 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.4; font-weight: 700; }
.company dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); font-size: 14.5px; line-height: 1.8; }
.company dt, .company dd { padding: 18px 0; border-bottom: 1px solid var(--line); }
.company dt { color: var(--muted); }
.company dd { margin: 0; }
.company dt:first-of-type, .company dt:first-of-type + dd { padding-top: 0; }

.ft { padding: 40px var(--gutter); }
.ft .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: var(--muted); }
.ft .wrap > span { font-family: var(--font-en); letter-spacing: .08em; }

/* ---------- ホバー（マウスなど、ホバーできる端末だけ） ---------- */
@media (hover: hover) {
  /* ナビ：下線が左から伸びる */
  .hd nav a { position: relative; }
  .hd nav a::after { content: ''; position: absolute; left: 0; right: .16em; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s cubic-bezier(.2, .7, 0, 1); }
  .hd nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  /* ヘッダーのお問い合わせ：塗りが反転する */
  .cta { transition: background-color .25s ease, color .25s ease; }
  .hd:not(.is-solid) .cta:hover { background: #fff; color: #000; }
  .hd.is-solid[data-theme="light"] .cta:hover { background: var(--ink); color: var(--bg); }
  .hd.is-solid[data-theme="dark"] .cta:hover { background: var(--on-dark); color: var(--dark); }
  /* 矢印が右へ動く */
  .arrow { display: inline-block; transition: transform .45s cubic-bezier(.2, .7, 0, 1); }
  .link:hover .arrow, .btn:hover .arrow { transform: translateX(5px); }
  .btn { transition: background-color .25s ease; }
  .btn:hover { background: var(--gold-hover); }
  /* PROJECTS のカード：画像がゆっくり少しだけ拡大する */
  .pj-visual > img, .pj-visual > svg { transition: transform 1.2s cubic-bezier(.2, .7, 0, 1); }
  .pj:hover .pj-visual > img, .pj:hover .pj-visual > svg { transform: scale(1.035); }
}

/* ---------- SP のメニュー ---------- */
.sp-menu { display: none; }
.menu-close-label { display: none; }

/* ---------- スクロールでフェードイン（JS が動くときだけ隠しておく） ---------- */
.js [data-fade] { opacity: 0; transform: translateY(16px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2, .7, 0, 1); }
.js [data-fade].in { opacity: 1; transform: none; }

/* 動きを減らす設定：せり上がり・フェード・スムーススクロール・メニューの動きを止める（HERO の背景は hero.js で静止） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .play * { animation: none !important; }
  .sp-menu, .sp-menu *, .arrow, .pj-visual > * { transition: none !important; }
  .js [data-fade] { opacity: 1; transform: none; transition: none; }
}

/* ---------- SP（〜767px） ---------- */
@media (max-width: 767px) {
  .hd, .hd.is-solid { padding: 16px 20px; }
  .hd nav, .hd .cta { display: none; }
  .menu { display: inline-flex; align-items: center; margin-left: auto; }
  .logo img { height: 15px; }
  .hero-ui { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 20px 76px; }
  .copy { position: static; }
  .copy h1 { font-size: calc((100vw - 40px) / 6.6); line-height: .9; }
  .line { white-space: nowrap; }
  .lead { position: static; width: auto; max-width: 30em; margin-top: 24px; font-size: 12.5px; line-height: 1.95; }
  .about-body { grid-template-columns: 1fr; gap: 48px; }
  .about-logo img { width: 180px; }
  .about-sub { font-size: 14px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .cols3 { grid-template-columns: 1fr; gap: 40px; }
  /* メニュー：黒い全画面。ヘッダーはその上に白で表示する */
  .sp-menu { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; justify-content: space-between; padding: 112px 20px 32px; background: var(--dark); color: var(--on-dark); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }
  .sp-menu nav { display: flex; flex-direction: column; }
  .sp-menu nav a { display: block; overflow: hidden; font-family: var(--font-en); font-size: clamp(40px, 12.5vw, 64px); font-weight: 800; line-height: 1.12; letter-spacing: -.035em; }
  .sp-menu nav a span { display: block; transform: translateY(105%); transition: transform .8s cubic-bezier(.2, .7, 0, 1); }
  .sp-menu-cta { opacity: 0; transition: opacity .6s ease; }
  .menu-open { overflow: hidden; }
  .menu-open .sp-menu { opacity: 1; visibility: visible; transition: opacity .3s ease; }
  .menu-open .sp-menu nav a span { transform: none; }
  .menu-open .sp-menu nav a:nth-child(2) span { transition-delay: .05s; }
  .menu-open .sp-menu nav a:nth-child(3) span { transition-delay: .1s; }
  .menu-open .sp-menu nav a:nth-child(4) span { transition-delay: .15s; }
  .menu-open .sp-menu nav a:nth-child(5) span { transition-delay: .2s; }
  .menu-open .sp-menu-cta { opacity: 1; transition-delay: .3s; }
  .menu-open .hd, .menu-open .hd.is-solid { background: transparent; color: #fff; mix-blend-mode: normal; }
  .menu-open .hd .logo img { filter: invert(1); }
  .menu-open .menu-open-label { display: none; }
  .menu-open .menu-close-label { display: inline; }
  .cols2 { grid-template-columns: 1fr; gap: 56px; }
  .profile .wrap { grid-template-columns: 1fr; gap: 16px; }
  .person { flex-direction: column; gap: 24px; padding-top: 24px; }
  .photo { width: 120px; }
  .contact .wrap { flex-direction: column; align-items: stretch; gap: 40px; }
  .btn { width: 100%; }
  .company .wrap { grid-template-columns: 1fr; gap: 40px; }
  .company dl { grid-template-columns: 80px minmax(0, 1fr); font-size: 13.5px; }
  .company dt, .company dd { padding: 14px 0; }
}

/* ---------- 下層ページ（プライバシーポリシー・404） ---------- */
.page { padding: clamp(140px, 14vw, 200px) var(--gutter) clamp(100px, 10vw, 160px); }
.page .wrap { max-width: 800px; }
.page h1 { margin: 0; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.4; font-weight: 700; }
.doc { margin-top: clamp(40px, 5vw, 64px); font-size: 15px; line-height: 2.05; color: var(--ink-2); }
.doc h2 { margin: 56px 0 12px; font-size: 18px; line-height: 1.6; color: var(--ink); }
.doc h3 { margin: 28px 0 4px; font-size: 15px; color: var(--ink); }
.doc p, .doc ul, .doc ol { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc ol.paren { padding-left: 0; list-style: none; }
.doc a { border-bottom: 1px solid currentColor; word-break: break-all; }
.doc .doc-meta { margin-top: 48px; color: var(--muted); }
.page-back { margin-top: 56px; }
@media (max-width: 767px) {
  .doc { font-size: 14px; }
}