:root {
  --bg: #faf8f4;
  --ink: #2b2723;
  --sub: #6f675e;
  --accent: #c96f4a;
  --line: #e5dfd6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* オープニング（branu式: ロゴ線描画 → 波形カーテンで開く） */
#opening {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  /* JSがカーテンを描くまでの数フレーム、下のページが透けてちらつくのを防ぐ。
     カーテン描画開始時にJS側でtransparentへ戻す */
  background: var(--bg);
}
/* ローディング中は画面中央（50svh）。完了後に-13svh移動してFVの定位置（37svh）に接続 */
#opening .inner { margin-top: calc(50svh - 72px); }
#opening.done { display: none; }
#opening .curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
#opening .inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; }
#opening .logo-stack { position: relative; display: flex; align-items: center; justify-content: center; }
#opening .mark { width: clamp(260px, 36vw, 460px); overflow: visible; display: block; }
/* Zen Kaku Gothic本体のグリフ: 輪郭をなぞってからアクセント色（茶）で満たす。
   墨色になるのはカーテンの波が通過した瞬間（下のFVロゴが現れる） */
#opening .mark path { fill: var(--accent); fill-opacity: 0; stroke: var(--accent); stroke-width: 42; stroke-linecap: round; stroke-linejoin: round; }
/* フォント取得に失敗したときのフォールバック */
#opening .op-logo {
  display: none; align-items: center; justify-content: center;
  font-weight: 700; font-size: clamp(44px, 6.2vw, 76px); letter-spacing: 0.16em; text-indent: 0.16em;
  color: var(--ink); opacity: 0; white-space: nowrap;
}
#opening .op-tag {
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.34em; text-indent: 0.34em; color: var(--sub);
}
#opening .op-tag span { display: inline-block; opacity: 0; transform: translateY(12px); }
@media (prefers-reduced-motion: reduce) { #opening { display: none; } }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
#warmth { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 44px;
  background: rgba(250,248,244,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.logo { font-weight: 700; font-size: 17px; letter-spacing: 0.12em; }
.logo svg { height: 12px; width: auto; display: block; overflow: visible; }
/* ロゴ: 常時は灯（ともしび）——漂いに濃淡を重ねて墨が呼吸しているように。
   ホバーでジッター——大きく震えてピタッと戻る。
   親gがscale(0.1,-0.1)でy反転しているため、local座標は視覚の1/10・上下逆（40px local ≒ 4px 視覚） */
.logo svg path { fill: var(--ink); transform-box: fill-box; transform-origin: 50% 50%; animation: logo-ember 5s ease-in-out infinite; }
.logo svg path:nth-child(2) { animation-delay: .4s; }
.logo svg path:nth-child(3) { animation-delay: .8s; }
.logo svg path:nth-child(4) { animation-delay: 1.2s; }
.logo svg path:nth-child(5) { animation-delay: 1.6s; }
.logo svg path:nth-child(6) { animation-delay: 2s; }
@keyframes logo-ember {
  0%, 100% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(12px); opacity: .55; }
  70% { transform: translateY(4px); opacity: .9; }
}
.logo:hover svg path { animation: logo-jit .5s steps(2, jump-none) both; }
.logo:hover svg path:nth-child(2) { animation-delay: .04s; }
.logo:hover svg path:nth-child(3) { animation-delay: .08s; }
.logo:hover svg path:nth-child(4) { animation-delay: .12s; }
.logo:hover svg path:nth-child(5) { animation-delay: .16s; }
.logo:hover svg path:nth-child(6) { animation-delay: .2s; }
@keyframes logo-jit {
  0% { transform: translate(0,0); }
  20% { transform: translate(48px,70px) rotate(7deg) scale(1.12); fill: var(--accent); }
  40% { transform: translate(-44px,-52px) rotate(-6deg) scale(.92); fill: var(--accent); }
  60% { transform: translate(34px,40px) rotate(4deg) scale(1.06); }
  80% { transform: translate(-20px,-24px) rotate(-2deg); }
  100% { transform: translate(0,0); }
}
@media (prefers-reduced-motion: reduce) { .logo svg path, .logo:hover svg path { animation: none; } }
.menu { display: flex; gap: 32px; font-size: 13.5px; color: var(--sub); align-items: center; }
.menu a { color: inherit; text-decoration: none; }

/* --- モバイルナビ --- */
.nav-toggle { display: none; position: relative; z-index: 40; width: 40px; height: 40px; border: none; background: none; cursor: pointer; padding: 0; }
.nav-toggle span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--ink); transition: transform .35s ease, top .35s ease; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 19.5px; transform: rotate(-45deg); }
.m-menu {
  /* navはz-index:20の独立スタッキングコンテキストなので、その下に敷く */
  position: fixed; inset: 0; z-index: 19; background: var(--bg);
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 36px; opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
}
.m-menu.open { opacity: 1; visibility: visible; }
.m-menu a {
  font-family: "Shippori Mincho", serif; font-size: 24px; letter-spacing: .1em;
  color: var(--ink); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease;
}
.m-menu.open a { opacity: 1; transform: none; }
.m-menu.open a:nth-child(1) { transition-delay: .08s; }
.m-menu.open a:nth-child(2) { transition-delay: .16s; }
.m-menu.open a:nth-child(3) { transition-delay: .24s; }
.m-menu.open a:nth-child(4) { transition-delay: .32s; }
.m-menu.open a:nth-child(5) { transition-delay: .4s; }
.m-menu .m-talk { color: var(--accent); border-bottom: none; margin-top: 10px; }
.m-lock, .m-lock body { overflow: hidden; }
@media (max-width: 720px) {
  nav { padding: 16px 20px; }
  .menu { display: none; }
  .nav-toggle { display: block; }
}
/* madoguchi式: 下線が右へ抜けて左から戻る＋墨色へ浮き上がり、アクセントの点が灯る */
.uline {
  position: relative;
  background-image: linear-gradient(to right, var(--accent), var(--accent) 50%, transparent 50%, transparent);
  background-size: 200% 1px; background-position: 100% 100%; background-repeat: no-repeat;
  padding-bottom: 3px;
  transition: background-position .5s cubic-bezier(.6,0,.2,1), color .35s ease, letter-spacing .45s cubic-bezier(.2,.7,.3,1);
  letter-spacing: .02em;
}
.uline::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: 0; transform: translate(-50%, 4px) scale(.4);
  transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
.uline:hover { background-position: 0% 100%; color: var(--ink); letter-spacing: .06em; }
.uline:hover::before { opacity: 1; transform: translate(-50%, 0) scale(1); }
.menu .talk {
  color: var(--bg); background: var(--ink); padding: 11px 26px; border-radius: 999px;
  transition: background .35s, transform .35s;
}
.menu .talk:hover { background: var(--accent); transform: translateY(-1px); }

/* FV（中央寄せ: オープナーのロゴがそのまま同じ位置に残る） */
.fv {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  /* ニュース帯（約62px）まで含めて1画面に収める */
  height: calc(100svh - 67px); min-height: 620px;
}
.fv-inner {
  width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* オープナーの.innerと同じ組み（ロゴ＋gap 30＋タグライン）を同じ画面中央に置く */
.fv-brand { display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: calc(37svh - 78px); }
.fv-mark svg { width: clamp(260px, 36vw, 460px); overflow: visible; display: block; }
/* FVロゴも常時「灯」。グリッチはJSが .glitch を付けたときだけ発火（画面外では止める） */
.fv-mark svg path { fill: var(--ink); stroke: none; transform-box: fill-box; transform-origin: 50% 50%; animation: logo-ember 5s ease-in-out infinite; }
.fv-mark svg path:nth-child(2) { animation-delay: .4s; }
.fv-mark svg path:nth-child(3) { animation-delay: .8s; }
.fv-mark svg path:nth-child(4) { animation-delay: 1.2s; }
.fv-mark svg path:nth-child(5) { animation-delay: 1.6s; }
.fv-mark svg path:nth-child(6) { animation-delay: 2s; }
.fv-mark.glitch svg path { animation: logo-jit .5s steps(2, jump-none) both; }
.fv-mark.glitch svg path:nth-child(2) { animation-delay: .04s; }
.fv-mark.glitch svg path:nth-child(3) { animation-delay: .08s; }
.fv-mark.glitch svg path:nth-child(4) { animation-delay: .12s; }
.fv-mark.glitch svg path:nth-child(5) { animation-delay: .16s; }
.fv-mark.glitch svg path:nth-child(6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) { .fv-mark svg path, .fv-mark.glitch svg path { animation: none; } }
.fv-logo-text { font-weight: 700; font-size: clamp(44px, 6.2vw, 76px); letter-spacing: 0.16em; text-indent: 0.16em; white-space: nowrap; }
.fv-mark.has-svg .fv-logo-text { display: none; }
.fv-tag { font-size: clamp(11px, 1.1vw, 13px); letter-spacing: 0.34em; text-indent: 0.34em; color: var(--sub); }
.fvcatch { margin-top: 3svh; }
/* FVの左右を飾るモーション（邪魔しない・触れない） */
.fv-orn { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
/* 外側(.orn)はGSAPのパララックス、内側(.orn-in)はCSSの形態アニメを担当 */
.orn { position: absolute; opacity: 0; will-change: transform; }
.orn-in { width: 100%; height: 100%; }
.orn-blob { width: clamp(240px, 24vw, 380px); aspect-ratio: 1; left: 4%; top: 26svh; }
.orn-blob .orn-in {
  background: radial-gradient(circle at 34% 30%, rgba(217,141,104,.24), rgba(201,111,74,.10) 55%, transparent 72%);
  border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%;
  animation: blobmorph 16s ease-in-out infinite alternate;
}
.orn-blob.b2 { width: clamp(150px, 14vw, 220px); left: auto; right: 20%; top: auto; bottom: 4svh; }
.orn-blob.b2 .orn-in {
  background: radial-gradient(circle at 60% 40%, rgba(229,223,214,.9), rgba(217,141,104,.12) 60%, transparent 75%);
  animation-duration: 20s; animation-delay: -7s;
}
@keyframes blobmorph {
  0%   { border-radius: 58% 42% 55% 45% / 48% 55% 45% 52%; transform: rotate(0deg) scale(1); }
  50%  { border-radius: 45% 55% 48% 52% / 55% 44% 56% 45%; transform: rotate(14deg) scale(1.06); }
  100% { border-radius: 52% 48% 42% 58% / 45% 52% 48% 55%; transform: rotate(-8deg) scale(.97); }
}
.orn-ring { width: clamp(220px, 21vw, 340px); aspect-ratio: 1; right: 6%; top: 38svh; }
.orn-ring .orn-in {
  border: 1px solid rgba(201,111,74,.35); border-radius: 50%;
  animation: ringspin 26s linear infinite; position: relative;
}
.orn-ring .orn-in::before {
  content: ""; position: absolute; top: -4px; left: calc(50% - 4px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.orn-ring .orn-in::after {
  content: ""; position: absolute; inset: 14%;
  border: 1px dashed rgba(111,103,94,.22); border-radius: 50%;
}
@keyframes ringspin { to { transform: rotate(360deg); } }
.orn-cross { right: 13%; top: 22svh; font-size: 18px; color: rgba(201,111,74,.55); }
.orn-cross .orn-in { animation: crossfloat 7s ease-in-out infinite alternate; }
.orn-cross.c2 { right: auto; left: 12%; top: auto; bottom: 10svh; font-size: 13px; }
.orn-cross.c2 .orn-in { animation-delay: -3s; }
@keyframes crossfloat { from { transform: translateY(-8px) rotate(0deg); } to { transform: translateY(10px) rotate(90deg); } }
@media (max-width: 900px) { .fv-orn { display: none; } }
@media (prefers-reduced-motion: reduce) { .orn-in { animation: none !important; } }
.fvcatch .cl .body { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.55; letter-spacing: 0.04em; white-space: nowrap; }
/* モバイルでもフレーズ内では折り返さず、幅に合わせて縮小して2行に固定する
   （white-space:normalに切り替えると「仕事に、」「に、」だけの行ができて崩れる） */
@media (max-width: 760px) { .catch.fvcatch .cl .body { font-size: clamp(19px, 6.4vw, 46px); } } /* 後方の .catch .cl .body に負けないよう詳細度を上げる */
.fv-sub { margin-top: 16px; font-size: 15px; line-height: 2.2; color: var(--sub); letter-spacing: 0.05em; }
.fv-sub .ph { display: inline-block; } /* 折り返しはフレーズ境界のみ（「に。」の孤立防止） */
.fv .scroll { margin-top: 2svh; font-size: 12px; letter-spacing: 0.18em; color: var(--sub); display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; transition: color .3s; }
.fv .scroll:hover { color: var(--ink); }
.fv .scroll .bar { width: 1px; height: 42px; background: var(--line); position: relative; overflow: hidden; }
.fv .scroll .bar::after { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: var(--accent); animation: drop 2.2s 1.4s infinite cubic-bezier(.6,0,.4,1); }
@keyframes drop { 0% { top: -100%; } 60% { top: 100%; } 100% { top: 100%; } }
.fv-mq { margin-top: auto; padding: 0; flex-shrink: 0; line-height: 1.1; }
.fv .fv-mq span { font-size: clamp(24px, 2.4vw, 36px); }

section { position: relative; z-index: 1; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 44px; }
.sec { padding: 2vh 0 12vh; border-top: 1px solid var(--line); }
.sec-head { display: flex; align-items: baseline; gap: 22px; margin-bottom: 48px; }
.sec-head h2 { font-size: 24px; font-weight: 700; letter-spacing: 0.05em; }
.sec-head .en { font-size: 11.5px; letter-spacing: 0.2em; color: var(--accent); }

/* アニメーション初期状態（madoguchi式） */
.ab { opacity: 0; }
@media (scripting: none) { .ab { opacity: 1; } }
.clipimg { border-radius: 16px; overflow: hidden; box-shadow: 0 26px 60px -28px rgba(60,45,30,.35); transform-style: preserve-3d; perspective: 800px; }
.clipimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.clipimg:hover img { transform: scale(1.03); }

/* 強み（madoguchi philosophy構造） */
.marquee { overflow: hidden; white-space: nowrap; padding: 0; line-height: 1.15; }
.marquee .track { display: inline-block; will-change: transform; }
.marquee span {
  font-size: clamp(60px, 8vw, 120px); font-weight: 700; letter-spacing: 0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--line); padding-right: .6em;
}
/* 大キャッチ: 行マスク＋skew立ち上がり＋下線が左から伸びる */
.catch { margin: 6vh 0 0; font-size: 16px; font-weight: 400; } /* h1として使ってもUAスタイルで崩れないよう明示 */
.catch .cl { display: block; overflow: hidden; padding-bottom: .18em; position: relative; width: fit-content; }
.catch .cl .body {
  display: inline-block; font-size: clamp(34px, 4.4vw, 58px); font-weight: 700;
  line-height: 1.5; letter-spacing: 0.05em;
  transform: translateY(105%) skewX(-12deg) skewY(1deg); will-change: transform;
}
.catch .cl .border {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left center;
}
/* 小さめ・明朝のバリエーション */
.catch.small { margin-top: 0; }
.catch.small .cl .body { font-size: clamp(24px, 2.8vw, 38px); }
.catch.serif .cl .body { font-family: "Shippori Mincho", serif; font-weight: 600; letter-spacing: 0.08em; line-height: 1.7; }
.catch.center { display: flex; flex-direction: column; align-items: center; }
.emtxt.tight { margin-top: 4vh; }
.marquee + .wrap .sec-head { margin-top: 3vh; }
.marquee.mid { margin-top: 3vh; }
.sec > .wrap:first-child .sec-head { margin-top: 3vh; }
.catch { margin-top: 3vh; }
/* 強調帯つきの長文（pm-introtxt__em方式） */
.emtxt { margin-top: 7vh; font-size: clamp(15px, 1.5vw, 19px); line-height: 2.5; letter-spacing: 0.06em; max-width: 46em; }
.em {
  /* inline-blockだと帯が行の途中で折り返せず丸ごと次行へ送られ、
     残った前の行が両端揃えで間延びする。inline＋cloneで帯ごと行またぎ可にする */
  display: inline; margin: 0 .35em; padding: .1em .55em; line-height: 1.7;
  color: var(--bg); background: linear-gradient(to right, #d98d68, var(--accent));
  border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* 帯の中で1〜2文字だけ次行に落ちるのを防ぐ折り返し禁止 */
.nw { white-space: nowrap; }
/* 実装すると、、、（対象別の変化リスト） */
.results { margin-top: 9vh; }
.results .rtitle { font-family: "Shippori Mincho", serif; font-size: 15px; letter-spacing: 0.24em; color: var(--sub); margin-bottom: 14px; }
.results .row {
  display: grid; grid-template-columns: 120px 200px 1fr; gap: 34px; align-items: baseline;
  padding: 34px 0; border-top: 1px solid var(--line);
}
.results .row:last-child { border-bottom: 1px solid var(--line); }
.results .row .rnum { font-family: "Shippori Mincho", serif; font-size: 13px; letter-spacing: 0.2em; color: var(--accent); }
.results .row .rnum b { font-size: 34px; font-weight: 500; margin-left: 8px; }
.results .row dt { font-size: 19px; font-weight: 700; letter-spacing: 0.06em; }
.results .row dt small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: 0.18em; color: var(--sub); font-weight: 400; }
.results .row dd { font-size: 14px; line-height: 2.2; color: var(--sub); max-width: 36em; }
/* 強みの流れを図解するインフォグラフィック */
.sflow { margin-top: 7vh; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 52px 48px 44px; box-shadow: 0 24px 60px -48px rgba(43,38,34,.35); }
.sflow-head { font-family: "Shippori Mincho", serif; font-size: 15px; letter-spacing: 0.24em; color: var(--sub); text-align: center; }
.sflow-row { display: flex; align-items: stretch; gap: 0; margin-top: 38px; }
.snode { flex: 1; text-align: center; padding: 0 12px; }
.snode .si {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent); background: rgba(196,106,66,.05);
  display: flex; align-items: center; justify-content: center;
}
.snode .si svg { width: 27px; height: 27px; }
.snode .sk { margin-top: 14px; font-size: 10.5px; letter-spacing: 0.2em; color: var(--accent); }
.snode .st { margin-top: 6px; font-size: 16.5px; font-weight: 700; letter-spacing: 0.05em; }
.snode p { margin-top: 8px; font-size: 12.5px; line-height: 1.9; color: var(--sub); }
.sarw { display: flex; align-items: center; width: 72px; flex-shrink: 0; position: relative; top: -28px; align-self: center; transform-origin: left center; }
.sarw::before {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(to right, var(--accent) 0 5px, transparent 5px 10px);
  background-size: 20px 1px; animation: arwflow 1.2s linear infinite;
}
.sarw::after { content: ""; width: 6px; height: 6px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); margin-left: -6px; }
@keyframes arwflow { to { background-position: 20px 0; } }
.sflow-loop { margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--line); display: flex; align-items: baseline; justify-content: center; gap: 16px; }
.sflow-loop .lk { font-size: 10.5px; letter-spacing: 0.2em; color: var(--accent); white-space: nowrap; }
.sflow-loop .lt { font-size: 13px; line-height: 1.9; color: var(--sub); }
@media (max-width: 900px) {
  .sflow { padding: 32px 24px; }
  .sflow-row { flex-direction: column; gap: 26px; }
  .sarw { width: auto; height: 40px; top: 0; transform: rotate(90deg); }
  .sflow-loop { flex-direction: column; text-align: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .sarw::before { animation: none; } }
@media (max-width: 900px) { .results .row { grid-template-columns: 1fr; gap: 10px; } }

/* 実装の記録 */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story .no { font-family: "Shippori Mincho", serif; font-size: 12.5px; letter-spacing: 0.32em; color: var(--accent); margin-bottom: 22px; }
.story h3 { font-family: "Shippori Mincho", serif; font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; line-height: 2; letter-spacing: 0.06em; }
.story p { margin-top: 24px; font-size: 14.5px; line-height: 2.4; color: var(--sub); }
.more { display: inline-flex; align-items: center; gap: 14px; margin-top: 32px; font-size: 13.5px; color: var(--ink); text-decoration: none; }
.more .arrow { width: 36px; height: 1px; background: var(--ink); transition: width .5s cubic-bezier(.2,.7,.2,1), background .5s; }
.more:hover .arrow { width: 60px; background: var(--accent); }
.more:hover { color: var(--accent); }
.story .clipimg { height: 420px; }

/* サービス */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 34px 30px; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; text-decoration: none; color: inherit; overflow: hidden; }
.card .cimg { margin: -34px -30px 24px; aspect-ratio: 16 / 10; overflow: hidden; }
.card .cimg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.card:hover .cimg img { transform: scale(1.04); }
.card .price .go { float: right; color: var(--accent); font-weight: 500; letter-spacing: .06em; }
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -24px rgba(60,45,30,.25); }
.card .k { font-size: 12px; letter-spacing: 0.16em; color: var(--accent); }
.card h3 { margin: 16px 0 12px; font-size: 19px; letter-spacing: 0.04em; }
.card p { font-size: 13.5px; line-height: 2.1; color: var(--sub); }
.card .price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.card p { margin-bottom: 20px; }

/* 私たちについて */
.person { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.person h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; line-height: 2; letter-spacing: 0.04em; }
.person p { margin-top: 22px; font-size: 14.5px; line-height: 2.4; color: var(--sub); }
.person .clipimg { height: 400px; }
/* ニュース帯（FV直下） */
.newsbar { position: relative; z-index: 1; border-top: 1px solid var(--line); }
.newsbar .nb-in { display: flex; align-items: baseline; gap: 24px; padding: 20px 0; font-size: 13px; }
.newsbar .k { font-size: 11.5px; letter-spacing: 0.2em; color: var(--accent); white-space: nowrap; }
.newsbar .t { color: var(--ink); line-height: 1.9; }
.newsbar .nb-link { margin-left: auto; color: var(--sub); text-decoration: none; white-space: nowrap; }
.newsbar .nb-link:hover { color: var(--accent); }
@media (max-width: 900px) { .newsbar .nb-in { flex-wrap: wrap; } .newsbar .nb-link { margin-left: 0; } }

/* ジャーナル */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s; }
.post:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(60,45,30,.22); }
.post .thumb { height: 150px; overflow: hidden; }
.post .thumb div { width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.post:hover .thumb div { transform: scale(1.05); }
.post .body { padding: 20px 22px 24px; }
.post .date { font-size: 11.5px; color: var(--sub); letter-spacing: 0.1em; }
.post h4 { margin-top: 10px; font-size: 14.5px; line-height: 1.9; font-weight: 500; }

/* CTA */
.cta-sec { padding: 15vh 0 17vh; text-align: center; border-top: 1px solid var(--line); }
.cta-sec h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; line-height: 2; letter-spacing: 0.04em; }
.cta-sec p { margin-top: 18px; font-size: 14.5px; color: var(--sub); line-height: 2.2; }
.cta-sec .btn { display: inline-block; margin-top: 40px; background: var(--ink); color: var(--bg); text-decoration: none; padding: 17px 46px; border-radius: 999px; font-size: 14.5px; letter-spacing: 0.08em; transition: background .35s, transform .35s; }
.cta-sec .btn:hover { background: var(--accent); transform: translateY(-2px); }
footer { padding: 34px 44px 44px; display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); border-top: 1px solid var(--line); position: relative; z-index: 1; }

/* AIに相談（一次相談チャット） */
/* AIに相談: オーバーレイ起動ボタン（チャット本体は ask.js のオーバーレイ） */
.ask-launch {
  display: flex; align-items: center; gap: 14px;
  margin: 6vh auto 0; border: 1px solid var(--line); background: #fff;
  border-radius: 999px; padding: 14px 34px 14px 14px; cursor: pointer;
  font-family: inherit; font-size: 15px; letter-spacing: 0.06em; color: var(--ink);
  box-shadow: 0 26px 60px -40px rgba(60,45,30,.3);
  transition: border-color .3s, transform .3s;
}
.ask-launch:hover { border-color: var(--accent); transform: translateY(-2px); }
.ask-launch-ai {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.ch-note { text-align: center; font-size: 11px; color: #b5ac9f; margin-top: 16px; letter-spacing: 0.06em; }

/* 支援の流れ: 番号ステップの横流し（モバイルは縦積み） */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 26px; }
.fstep { position: relative; border-top: 1px solid var(--line); padding: 24px 4px 0 0; }
.fstep::before { content: ""; position: absolute; top: -1px; left: 0; width: 36px; height: 2px; background: var(--accent); }
.fstep .fnum { font-family: "Shippori Mincho", serif; font-size: 30px; letter-spacing: .1em; color: var(--accent); line-height: 1; }
.fstep h3 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 700; letter-spacing: .06em; }
.fstep .fk { font-size: 11px; letter-spacing: .16em; color: var(--sub); margin-bottom: 12px; }
.fstep p { font-size: 12.5px; line-height: 2.1; color: var(--sub); text-align: justify; text-justify: inter-character; line-break: strict; }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr; gap: 0; }
  .fstep { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding: 22px 0; }
  .fstep .fnum { grid-row: 1 / span 3; font-size: 26px; padding-top: 4px; }
  .fstep h3 { margin: 0 0 4px; }
  .fstep .fk { margin-bottom: 8px; }
  .fstep p { grid-column: 2; }
}

/* CTA: 2ボタン */
.cta-btns { display: flex; gap: 16px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.cta-sec .btn { margin-top: 0; }
.cta-sec .btn.ghost { background: none; border: 1px solid var(--ink); color: var(--ink); }
.cta-sec .btn.ghost:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 900px) { .story, .person { grid-template-columns: 1fr; gap: 32px; } .cards, .posts { grid-template-columns: 1fr; } }

/* モバイルは左右余白を詰めて1行の文字数を確保する
   （基底の .wrap 定義より後に置かないと上書きされない） */
@media (max-width: 720px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .fv-inner { padding: 0 16px; }
}

/* --- FOUC対策: GSAPが初期状態を敷く前の一瞬、素の状態で見えてしまうのを防ぐ ---
   <head>先頭のインラインJSが html に .js を付ける。GSAPが動けばインラインstyleで上書きされる。
   万一アニメJSが読めなかったときは .anim-fallback（3秒後付与）で表示に戻す */
html.js .ab, html.js .js-clip, html.js .js-sflow { opacity: 0; }
html.js.anim-fallback .ab, html.js.anim-fallback .js-clip, html.js.anim-fallback .js-sflow { opacity: 1; }

/* --- 日本語の組版: 長文は両端揃え＋文字間で調整（読みやすさ優先） --- */
/* .snode p は含めない: justifyだと<br>行が左寄せ扱いになり、中央のアイコンとずれる */
.emtxt, .results .row dd, .story p, .person p, .card p {
  text-align: justify; text-justify: inter-character; line-break: strict;
}

/* --- モバイルのタップ表現 ---
   青いタップハイライトは消し、代わりに:active（押している間）で沈み込みを返す */
* { -webkit-tap-highlight-color: transparent; }
.card:active, .post:active, .m-menu a:active { transform: scale(.985); transition-duration: .1s; }
.menu .talk:active, .ask-launch:active { transform: scale(.96); transition-duration: .1s; }
.uline:active { color: var(--accent); }

/* タップハイライト強化（*指定で効かない環境向けに、要素型にも直接指定） */
html { -webkit-tap-highlight-color: rgba(0,0,0,0); }
a, button, summary, input, [role="button"] { -webkit-tap-highlight-color: rgba(0,0,0,0); touch-action: manipulation; }