/* ==========================================================
   SAZANAMI WORKS — style.css
   深い藍 #0C447C ／ 淡ブルー #E6F1FB ／ 数字のみゴールド #8A6A31
   ========================================================== */

:root {
  --navy: #0C447C;
  --ink: #14304F;
  --text: #1E3247;
  --text-soft: #4A5F76;
  --text-mute: #68809A;
  --text-faint: #9AAABE;
  --line: #D7E4F0;
  --pale: #E6F1FB;
  --bg: #FBFDFE;
  --gold: #8A6A31;
  --line-green: #06C755;
  /* Webフォントの読み込みが遅い/失敗した環境でも間延びして見えないよう、
     文字送りの近い日本語フォントをgenericの手前に厚めに並べておく */
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'MS PMincho', serif;
  --sans: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'YuGothic', 'Meiryo', sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.menu-open { overflow: hidden; }

body {
  font-family: var(--sans);
  color: var(--text);
  font-size: 15.5px;
  line-height: 1.8;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 日本語を文節単位で折り返す（対応ブラウザのみ。未対応は従来動作） */
  word-break: auto-phrase;
  text-wrap: pretty; /* 行末の泣き別れ（孤立1文字など）を軽減 */
}

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; color: var(--ink); }
p { margin: 0; }
a { color: inherit; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* ----- ヘッダー ----- */

/* ダークトーンのヒーローに重ねる（フローから外して最初の1画面を暗色で満たす） */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  max-width: none; /* .containerの1200px制限を外し、左右いっぱいに広げる */
  display: flex;
  align-items: center; /* ロゴ(マーク付き)とタグラインの高さを揃える */
  justify-content: flex-start; /* ロゴとタグラインを左側にまとめて寄せる */
  gap: 22px;
  padding-top: 30px;
}

.site-header .logotype {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #F2F7FC;
}

.site-header .tagline {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #8FA9C2;
}

/* ロゴマーク（波のシンボル）＋ワードマークのロックアップ。
   マークはPNGをmaskにし background-color で着色するので、置く文脈の文字色に合わせられる
   （明暗が切り替わる固定メニューにも1枚の素材で追従できる） */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.logo-mark {
  flex: none;
  width: 18px;
  height: 22px;
  -webkit-mask: url("../images/logo-mark.png") center / contain no-repeat;
  mask: url("../images/logo-mark.png") center / contain no-repeat;
  background-color: currentColor;
  transition: background-color 0.5s ease;
}

.site-header .logo-mark { background-color: #F2F7FC; }

/* ----- 固定メニュー（着水後、数秒たってから常設表示） ----- */

.site-nav-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  max-width: none; /* .containerの1200px制限を外し、左右いっぱいに広げる */
  display: flex;
  align-items: center; /* ロゴ(マーク付き)とタグラインの高さを揃える */
  justify-content: flex-start; /* ロゴとタグラインを左側にまとめて寄せる */
  gap: 22px;
  padding-top: 22px;
  padding-bottom: 22px;
  background: rgba(251, 253, 254, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease, background 0.5s ease, border-color 0.5s ease;
}

.site-nav-fixed.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.site-nav-fixed .logotype {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ink);
  transition: color 0.5s ease;
}

.site-nav-fixed .tagline {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: #7A8CA0;
  transition: color 0.5s ease;
}

/* ヒーローの暗色に戻った（スクロールアップした）ときの配色 */
.site-nav-fixed.is-dark {
  background: rgba(7, 27, 48, 0.86);
  border-bottom-color: transparent;
}

.site-nav-fixed .logo-mark { background-color: var(--ink); }

.site-nav-fixed.is-dark .logotype { color: #F2F7FC; }
.site-nav-fixed.is-dark .tagline { color: #8FA9C2; }
.site-nav-fixed.is-dark .logo-mark { background-color: #F2F7FC; }

@media (prefers-reduced-motion: reduce) {
  .site-nav-fixed { transition: none; }
}

/* ----- PC用ヘッダーメニュー（主要リンクのみ。全メニューはハンバーガー） ----- */

.header-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding-right: 78px; /* 右端のハンバーガーと重ねない */
}

.header-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--ink);
  transition: color 0.5s ease, opacity 0.3s ease;
}

.header-nav a:hover { opacity: 0.7; }

/* ホバーで金の下線がすっと引かれる */
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s ease;
}

.header-nav a:hover::after { transform: scaleX(1); }

.site-header .header-nav a { color: #E6F1FB; }
.site-nav-fixed .header-nav a { color: var(--ink); }
.site-nav-fixed.is-dark .header-nav a { color: #E6F1FB; }

@media (max-width: 1100px) {
  .header-nav { display: none; }
}

/* ----- ハンバーガーメニュー ----- */

/* ハンバーガーと重ならないよう、ヘッダー右端のタグラインを内側に寄せる */
.site-header,
.site-nav-fixed { padding-right: 96px; }

.menu-toggle {
  position: fixed;
  top: 20px;
  right: 64px;
  z-index: 70;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.menu-toggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--ink);
  transition: background 0.5s ease;
}

/* トップ（ダークトーン）の間は白線 */
body.tone-dark .menu-toggle span { background: #F2F7FC; }

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(7, 27, 48, 0.97);
  backdrop-filter: blur(6px);
  overflow: hidden auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}

.site-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.site-menu__rings {
  position: absolute;
  left: 50%;
  bottom: -120px;
  transform: translateX(-50%);
  width: 1400px;
  max-width: none;
  pointer-events: none;
  opacity: 0.6;
}

.site-menu__close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 48px;
  height: 48px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: #CFE4F5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-menu__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  padding: 80px 28px;
  text-align: center;
}

.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-menu__list a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 16px;
  padding: 9px 4px;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: 0.14em;
  color: #E6F1FB;
  text-decoration: none;
  text-align: left;
  transition: color 0.3s ease;
}

.site-menu__list a:hover { color: #8FB4D8; }

.site-menu__list .num {
  flex: 0 0 22px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #C7A868;
  text-align: left;
}

/* セクション（01–07）とページリンク（＊）の間に区切りの余白 */
.site-menu__list li:nth-child(8) { margin-top: 20px; }

/* ABOUTなどの項目に添える小さな和文の補足 */
.site-menu__list .menu-note {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(198, 220, 240, 0.6);
}

/* 開いたときに1項目ずつ順に浮かび上がる */
.site-menu li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.site-menu.is-open li {
  opacity: 1;
  transform: none;
}

.site-menu.is-open li:nth-child(1) { transition-delay: 0.08s; }
.site-menu.is-open li:nth-child(2) { transition-delay: 0.13s; }
.site-menu.is-open li:nth-child(3) { transition-delay: 0.18s; }
.site-menu.is-open li:nth-child(4) { transition-delay: 0.23s; }
.site-menu.is-open li:nth-child(5) { transition-delay: 0.28s; }
.site-menu.is-open li:nth-child(6) { transition-delay: 0.33s; }
.site-menu.is-open li:nth-child(7) { transition-delay: 0.38s; }
.site-menu.is-open li:nth-child(8) { transition-delay: 0.43s; }
.site-menu.is-open li:nth-child(9) { transition-delay: 0.48s; }
.site-menu.is-open li:nth-child(10) { transition-delay: 0.53s; }

.site-menu .cta-group {
  margin-top: 0;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease 0.5s;
}

.site-menu.is-open .cta-group { opacity: 1; }

.site-menu .free-note { color: rgba(255, 255, 255, 0.62); }

@media (prefers-reduced-motion: reduce) {
  .site-menu,
  .site-menu li,
  .site-menu .cta-group { transition: none; }
}

/* ----- トップに戻る ----- */

.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(251, 253, 254, 0.9);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease;
}

.to-top.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.to-top:hover { background: var(--pale); }

@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* ----- ヒーロー ----- */

/* 水滴・水面は prism-fx waterDrop（chaseモード）が描画。
   セクション高さ（100vh + chaseVh + pinVh）はJSが設定する。
   背景色は着水の明転に合わせてJSが補間する（初期値はダークの水底色） */
.hero {
  position: relative;
  min-height: 100vh; /* JS無効時のフォールバック */
  background: #071B30;
}

/* 水面セクションと次セクションの境目をページ背景へグラデーションでぼかす */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  background: linear-gradient(180deg, rgba(251, 253, 254, 0) 0%, var(--bg) 92%);
  pointer-events: none;
  z-index: 1;
}

/* 軽量な浮遊パーティクル（prism-fx particleField）。水面キャンバスの上・文字の下 */
.hero__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 最初の1画面の中央に見出しとCTAだけを置く */
.hero__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 28px;
}

/* ダーク背景上のテキスト（ヒーロー文言は落下前=暗い画面でしか見えない） */
.hero__title { color: #F2F7FC; }
.hero .free-note { color: #8FA9C2; }
.hero .cta-group { align-items: center; }

/* ヒーローでは控えめに：通常はゴースト、ホバーでLINEグリーン */
.hero .btn-line {
  background: transparent;
  border: 1px solid rgba(207, 228, 245, 0.45);
  color: #E6F1FB;
  box-shadow: 0 0 0 rgba(6, 199, 85, 0);
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease;
}

.hero .btn-line:hover {
  background: rgba(158, 201, 236, 0.14);
  border-color: rgba(207, 228, 245, 0.9);
  color: #F2F7FC;
  /* 水滴の発光と同系の、ぼうっと滲む青い光 */
  box-shadow:
    0 0 18px rgba(158, 201, 236, 0.45),
    0 0 48px rgba(158, 201, 236, 0.25);
}

/* 下向き矢印はゆっくり上下して「この先にある」ことをほのめかす */
.btn-hero-contact svg {
  animation: hero-cta-bob 2.4s ease-in-out infinite;
}

@keyframes hero-cta-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-hero-contact svg { animation: none; }
}

/* スクロールガイド（最初の1画面の下端。スクロール開始でフェードアウト） */
.hero__scroll {
  position: absolute;
  top: calc(100vh - 112px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.hero__scroll.is-hidden { opacity: 0; }

.hero__scroll .label {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* letter-spacing分の右ズレを補正 */
  color: #8FA9C2;
}

.hero__scroll .line {
  position: relative;
  width: 1px;
  height: 52px;
  background: rgba(143, 180, 216, 0.3);
  overflow: hidden;
}

.hero__scroll .line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #CFE4F5;
  transform: translateY(-100%);
  animation: scroll-hint 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll .line::after { animation: none; transform: none; }
}

/* JSが着水後のキャンバス内へ移動し、.is-visible でフェードイン */
.hero__caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px 18vh; /* 水面のやや上に置く */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.85s ease;
}

.hero__caption.is-visible { opacity: 1; }

/* 「視差効果を減らす」(reduce-motion) 時：
   prism-fxのwaterDropが .hero に付与する height:340vh（スクロールジャック用の
   余白）が演出停止後もそのまま残り、3画面分の空白スクロールになってしまう。
   また詩的コピーとブランド透かしの2つのキャプションが同時にopacity:1で
   重なって表示される。ここで1画面ぶんの静止ヒーロー（タイトル＋CTA＋静止した
   水面）に整え、キャプションは出さない。 */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh !important; }
  .hero__caption { display: none; }
}

.hero__caption p {
  font-family: var(--serif);
  font-size: 26px;
  letter-spacing: 0.3em;
  color: var(--ink);
  text-align: center;
}

/* 詩的コピーは1文字ずつ、左から順にふわりと立ち上がる（水面の波紋が広がるのと同じ間合い）。
   コンテナ側のopacityがフェードアウトを担当し、こちらは入場の質感だけを足す */
.hero__caption p .ch {
  display: inline-block;
  transform: translateY(0.5em);
  filter: blur(5px);
  transition:
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.7s ease;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.hero__caption.is-visible p .ch {
  transform: none;
  filter: none;
}

.hero__caption--brand p {
  position: relative;
  isolation: isolate; /* ::before(透かしロゴ)を文字の背面に閉じ込める */
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  transition: letter-spacing 1.3s cubic-bezier(0.16, 1, 0.3, 1), text-indent 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ワードマークの背後に大きく敷く、青系・半透明のロゴ透かし。
   <p>の子(::before)なので、拡大ズームやフェードもワードマークと一緒に動く */
.hero__caption--brand p::before {
  content: '';
  position: absolute;
  left: calc(50% - 0.15em); /* text-indent分だけ左へ寄せて文字の中心に合わせる */
  top: 50%;
  width: 330px;
  height: 401px; /* ロゴ比 134:163 */
  transform: translate(-50%, -50%);
  z-index: -1;
  -webkit-mask: url("../images/logo-mark.png") center / contain no-repeat;
  mask: url("../images/logo-mark.png") center / contain no-repeat;
  background: linear-gradient(180deg, #8BC5E5 0%, #3F87BA 100%);
  opacity: 0.16;
  pointer-events: none;
}

/* ロゴタイプは字間がふわっと開きながら定位置へ（後段の拡大ズームと競合しない控えめな入場） */
.hero__caption--brand.is-visible p {
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}

@media (prefers-reduced-motion: reduce) {
  .hero__caption p .ch { transform: none; filter: none; transition: none; }
  .hero__caption--brand p { letter-spacing: 0.3em; text-indent: 0.3em; transition: none; }
}

.hero__title {
  font-size: 52px;
  line-height: 1.42;
  letter-spacing: 0.06em;
  text-wrap: pretty;
}

/* ----- LINEボタン ----- */

.cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 52px;
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: var(--line-green);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.1em;
  padding: 17px 40px;
  border-radius: 3px;
  transition: background 0.2s ease;
}

.btn-line:hover { background: #049D45; }

.cta-group .free-note {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text-mute);
}

/* LINE＋メールの2ボタンを横に並べる（狭い画面では縦積み） */
.cta-buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* メールフォームへのボタン。LINEと同じ大きさの、暗背景用ゴースト */
.btn-mail {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: transparent;
  border: 1px solid rgba(230, 241, 251, 0.5);
  color: #E6F1FB;
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.1em;
  padding: 16px 40px;
  border-radius: 3px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.btn-mail:hover {
  background: rgba(230, 241, 251, 0.14);
  border-color: rgba(230, 241, 251, 0.9);
}

@media (max-width: 720px) {
  .cta-buttons {
    flex-direction: column;
    align-items: stretch;
    width: min(100%, 340px);
  }
  .cta-buttons .btn-line,
  .cta-buttons .btn-mail {
    justify-content: center;
  }
}

/* スマホ：ハンバーガーメニューの全項目が1画面に収まるよう、文字と間隔を
   小さく詰める（大きすぎ＆上端の見切れを解消）。ABOUT等の補足（menu-note）は
   ラベルの真下に小さなサブ行として落とし、語の途中で改行される不自然さをなくす */
@media (max-width: 600px) {
  /* 中身が画面より高いときに上端が見切れる（align-items:center + overflow の
     既知の癖）のを避け、上寄せにして全項目を必ずスクロールで辿れるようにする */
  .site-menu { align-items: flex-start; }
  .site-menu__inner { gap: 14px; padding: 34px 22px 40px; }
  .site-menu__list { gap: 0; }
  .site-menu__list a {
    flex-wrap: wrap;
    column-gap: 12px;
    row-gap: 1px;
    padding: 5px 2px;
    font-size: 15px;
    letter-spacing: 0.06em;
  }
  .site-menu__list .menu-note {
    flex-basis: 100%;
    margin-left: 32px; /* num(20px)＋column-gap(12px)＝ラベル開始位置に揃える */
    font-size: 10px;
  }
  .site-menu__list .num { flex-basis: 20px; }
  .site-menu__list li:nth-child(8) { margin-top: 12px; }
}

/* ----- セクション共通（左レール＋本文） ----- */

.section {
  padding-top: 170px;
}

.section__grid {
  display: flex;
  gap: 64px 72px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.section__label {
  flex: none;
  width: 180px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.section__label .num {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  /* 数字を大きくした分だけ上へ逃がし、下の.nameの位置は変えない
     （大きな数字だけ上の罫線に少し重なって見える、エディトリアルな見せ方） */
  margin-top: -13px;
}

.section__label .name {
  position: relative;
  padding-left: 16px;
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.section__label .name::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 1.5px;
  background: var(--gold);
}

.section__body {
  flex: 1;
  min-width: min(560px, 100%);
}

.section__title {
  font-size: 28px;
  letter-spacing: 0.06em;
}

.sample-note {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

/* ----- 01 お悩みの入り口 ----- */

.worry--main {
  border-top: 1px solid var(--ink);
  padding: 52px 0 58px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.worry--main .most {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 700;
}

.worry--main h3 {
  font-size: 38px;
  letter-spacing: 0.05em;
  line-height: 1.45;
  text-wrap: pretty;
}

.worry--main p {
  max-width: 560px;
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-soft);
}

.worry {
  border-top: 1px solid var(--line);
  padding: 44px 0;
  display: flex;
  gap: 52px;
  align-items: baseline;
}

.worry:last-child { border-bottom: 1px solid var(--line); }

.worry h3 {
  flex: none;
  width: 340px;
  font-size: 21px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #2A415A;
}

.worry p {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-mute);
}

/* ----- 02 できること ----- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 58px;
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg);
  padding: 36px 30px 34px;
  min-height: 170px;
  overflow: hidden; /* タッチ波紋をカード内にクリップする */
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

/* カーソルが触れた座標から広がる波紋（JSが --x/--y を設定して生成） */
.service .touch-ripple {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  /* 中心はほんのり満ち、外周に細い輪。水に指を落としたときの見え方 */
  background: radial-gradient(
    circle,
    rgba(12, 68, 124, 0.08) 0%,
    rgba(12, 68, 124, 0.03) 42%,
    rgba(12, 68, 124, 0.20) 56%,
    rgba(12, 68, 124, 0) 62%
  );
  transform: scale(0);
  pointer-events: none;
  animation: service-touch 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes service-touch {
  0%   { transform: scale(0);  opacity: 1; }
  100% { transform: scale(46); opacity: 0; }
}

/* ホバーで軽く浮かせる。hairline gridの中の1枚だけ手前に来るのでz-indexで明示 */
.service:hover {
  z-index: 2;
  background: var(--pale);
  transform: translateY(-4px);
  box-shadow: 0 18px 34px -20px rgba(12, 68, 124, 0.35);
}

.service .icon { color: var(--navy); position: relative; z-index: 1; }

.service__icon {
  position: relative;
  display: inline-flex;
  align-self: flex-start; /* flexで横に伸ばさず、アイコンの実寸で持つ */
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* アイコンを水面に浮かぶものに見立て、足元に遠近のついた楕円の波紋が二重に広がる。
   ripple-mark.svg / ripple-cta.svg と同じ言葉遣い */
.service__icon::before,
.service__icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 62%;
  width: 56px;
  height: 20px;
  margin: -10px 0 0 -28px;
  border-radius: 50%;
  border: 1px solid var(--navy);
  opacity: 0;
  transform: scale(0.3);
  transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.55s ease;
}

/* 外側の輪はカード左端（アイコン中心から41px）に収まる幅にしておく */
.service__icon::after {
  width: 78px;
  height: 28px;
  margin: -14px 0 0 -39px;
  transition-delay: 90ms; /* ワンテンポ遅れて追いかける */
}

.service:hover .service__icon {
  transform: translateY(-2px);
}

.service:hover .service__icon::before {
  opacity: 0.45;
  transform: scale(1);
}

.service:hover .service__icon::after {
  opacity: 0.2;
  transform: scale(1);
}

.service .name {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.08em;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.service .desc {
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--text-mute);
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .service,
  .service__icon,
  .service__icon::before,
  .service__icon::after {
    transition: none;
  }
  .service .touch-ripple { animation: none; display: none; }
}

.service--filler {
  display: flex;
  align-items: flex-end;
  background: var(--bg);
  padding: 28px;
}

/* ----- 03 実績・事例 ----- */

.cases { display: flex; flex-direction: column; margin-top: 48px; }

.case {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(220px, 1fr) max-content;
  gap: 36px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.case__who { display: flex; flex-direction: column; gap: 3px; }

.case__who .area {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  color: #7A8CA0;
}

.case__who .name {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.case__story {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.9;
}

.case__story .before { color: #7A8CA0; }

.case__story .after {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.case__story .after::before {
  content: '→';
  flex: none;
  color: var(--navy);
}

.case__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.case__figure .number {
  font-family: var(--serif);
  font-size: 46px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
}

.case__figure .note {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #7A8CA0;
  text-align: right;
}

/* ----- 04 プロフィール ----- */

.profile {
  display: flex;
  gap: 84px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.profile__text {
  flex: 1;
  min-width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.profile__text .role {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
}

.profile__text .person-name {
  margin-top: 6px;
  font-size: 28px;
  letter-spacing: 0.1em;
}

.profile__text .person-name rt {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-mute);
  font-weight: 400;
}

.profile__text .place {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #7A8CA0;
}

.profile__text p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-soft);
}

.profile__photo {
  flex: none;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  position: relative;
  isolation: isolate; /* 背面の波紋(z:-1)を写真のすぐ後ろに留める */
}

/* 写真の右下に、少しずらした細い金の枠線を添える */
.profile__photo::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 14px;
  width: 300px;
  height: 400px;
  border: 1px solid rgba(199, 168, 104, 0.55);
  border-radius: 4px;
  pointer-events: none;
}

/* 左上の角の後ろから、波紋が静かにひろがる */
.profile__photo::after {
  content: '';
  position: absolute;
  top: -38px;
  left: -42px;
  width: 150px;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none' stroke='%230F9BB6'%3E%3Ccircle cx='80' cy='80' r='24' stroke-opacity='0.5'/%3E%3Ccircle cx='80' cy='80' r='46' stroke-opacity='0.32'/%3E%3Ccircle cx='80' cy='80' r='68' stroke-opacity='0.2'/%3E%3Ccircle cx='80' cy='80' r='79' stroke-opacity='0.1'/%3E%3C/svg%3E") center / contain no-repeat;
  z-index: -1;
  pointer-events: none;
  animation: photo-ripple 6s ease-in-out infinite;
}

@keyframes photo-ripple {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.08); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .profile__photo::after { animation: none; }
}

.profile__photo img {
  width: 300px;
  height: 400px; /* 元写真の縦横比(3:4)のまま、ピースサインも含めて自然な構図で見せる */
  border-radius: 4px;
  object-fit: cover;
  display: block;
  /* 紙面から浮かせる、水面のような淡い青の落ち影 */
  box-shadow: 0 14px 34px rgba(12, 68, 124, 0.16);
}

.profile__photo .vertical {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.34em;
  color: #41618A;
  padding-top: 6px;
}

/* プロフィール下の「SAZANAMI WORKSとは？」— 明るい背景に合う控えめなアウトラインボタン。
   ホバーで、さざ波を立てた水面が下からせり上がって満ちる（サイトの波モチーフと連動） */
.btn-outline {
  align-self: flex-start;
  margin-top: 40px;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* ::before(水)をボタン内だけの重ね順に閉じ込める */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: border-color 0.45s ease, color 0.45s ease;
}

/* せり上がってくる「水」は2層。
   ::before = 奥の水。深い藍→水面の明るい青への縦グラデーション＋さざ波の上端。
   ::after  = 手前の半透明な波。位相をずらし、逆方向に流して水面に奥行きと揺らぎを出す。 */
.btn-outline::before,
.btn-outline::after {
  content: '';
  position: absolute;
  left: -3%;
  bottom: 0;
  width: 106%;
  pointer-events: none;
}

/* 奥の水：グラデーションで深さを、上端のさざ波で水面を表す */
.btn-outline::before {
  height: 168%;
  z-index: -2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='16'%3E%3Cpath d='M0 8 Q22.5 0 45 8 T90 8 V16 H0 Z' fill='%2340C6D8'/%3E%3C/svg%3E") 0 0 / 90px 16px repeat-x,
    linear-gradient(to bottom, #40C6D8 0%, #0F9BB6 42%, #06566A 100%) 0 14px / 100% 100% no-repeat;
  transform: translateY(107%);
  transition: transform 0.75s cubic-bezier(0.42, 0, 0.3, 1);
}

/* 手前の半透明な波：明るい光を上部に集めた縦グラデーション＋逆位相のさざ波 */
.btn-outline::after {
  height: 172%;
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='18'%3E%3Cpath d='M0 9 Q22.5 18 45 9 T90 9 V18 H0 Z' fill='%23A8ECF2' fill-opacity='0.55'/%3E%3C/svg%3E") 34px 0 / 90px 18px repeat-x,
    linear-gradient(to bottom, rgba(202, 244, 249, 0.5) 0%, rgba(150, 226, 236, 0.14) 42%, rgba(150, 226, 236, 0) 78%) 0 16px / 100% 100% no-repeat;
  transform: translateY(116%);
  transition: transform 0.9s cubic-bezier(0.42, 0, 0.3, 1) 0.04s;
}

.btn-outline svg {
  transition: transform 0.35s ease;
}

.btn-outline:hover {
  border-color: #0F9BB6;
  color: #fff;
}

.btn-outline:hover::before {
  transform: translateY(0);
  animation: btn-wave-back 1.1s linear infinite;
}

.btn-outline:hover::after {
  transform: translateY(0);
  animation: btn-wave-front 1.6s linear infinite;
}

/* 満ちる間、2つの波が逆方向に流れて水面が揺らめく（波レイヤーのみ動かす） */
@keyframes btn-wave-back {
  from { background-position: 0 0, 0 14px; }
  to   { background-position: 90px 0, 0 14px; }
}

@keyframes btn-wave-front {
  from { background-position: 34px 0, 0 16px; }
  to   { background-position: -56px 0, 0 16px; }
}

.btn-outline:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .btn-outline, .btn-outline svg { transition: none; }
  .btn-outline::before, .btn-outline::after { display: none; }
  .btn-outline:hover { background: #0F7E96; }
}

/* ----- 05 流れ ----- */

.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 68px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-right: 24px;
}

.step__track { display: flex; align-items: center; }

.step__track .dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  background: var(--bg);
}

.step__track .track {
  flex: 1;
  height: 1px;
  background: #C9DAEA;
}

.step .num {
  font-family: var(--serif);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

.step .title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin-top: -8px;
}

.step .desc {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text-mute);
}

/* ----- 相談→改善へ、左から右に進行が伝わっていくリビール ----- */

/* コンテナ自体のフェードは使わず、子要素の連鎖に任せる */
.steps.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 各ステップの開始タイミング（--step-d: 初回出現、--lp: 繰り返しパルスの開始） */
.steps .step:nth-child(1) { --step-d: 0.1s; --lp: 3.2s; }
.steps .step:nth-child(2) { --step-d: 0.35s; --lp: 4.4s; }
.steps .step:nth-child(3) { --step-d: 0.6s; --lp: 5.6s; }
.steps .step:nth-child(4) { --step-d: 0.85s; --lp: 6.8s; }
.steps .step:nth-child(5) { --step-d: 1.1s; --lp: 8s; }

.steps .step__track .dot {
  position: relative;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 繰り返しパルス用の波紋リング */
.steps .step__track .dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(15, 155, 182, 0.6);
  opacity: 0;
}

/* ドット着地時にひろがる小さな波紋 */
.steps .step__track .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(12, 68, 124, 0.5);
  opacity: 0;
}

.steps .step__track .track {
  position: relative;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s ease-out;
  overflow: visible;
}

/* 線の上を走る光 */
.steps .step__track .track::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 32%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(64, 198, 216, 0.95), transparent);
  box-shadow: 0 0 8px rgba(64, 198, 216, 0.55);
  opacity: 0;
  transform: translateX(-80%);
}

.steps .step .num,
.steps .step .title,
.steps .step .desc {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.steps.is-visible .step .dot {
  transform: scale(1);
  transition-delay: var(--step-d);
  /* 初回出現のあと、7秒周期で進行パルスが左から右へ流れ続ける */
  animation: step-dot-wave 10s ease-in-out var(--lp) infinite;
}
.steps.is-visible .step .dot::after {
  animation: step-ripple 0.9s ease-out calc(var(--step-d) + 0.1s) both;
}
.steps.is-visible .step .dot::before {
  animation: step-ripple-loop 10s ease-out var(--lp) infinite;
}
.steps.is-visible .step .track {
  transform: scaleX(1);
  transition-delay: calc(var(--step-d) + 0.1s);
}
.steps.is-visible .step .track::after {
  animation: step-track-sweep 10s linear calc(var(--lp) + 0.1s) infinite;
}
.steps.is-visible .step .num {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--step-d) + 0.15s);
}
.steps.is-visible .step .title {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--step-d) + 0.22s);
  animation: step-title-wave 10s ease-in-out calc(var(--lp) + 0.05s) infinite;
}
.steps.is-visible .step .desc {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--step-d) + 0.3s);
}

/* 初回出現時のひとつ波紋 */
@keyframes step-ripple {
  from { opacity: 0.7; transform: scale(0.4); }
  to { opacity: 0; transform: scale(2.6); }
}

/* --- 繰り返しの進行パルス（7秒のうち最初の約1.2秒だけ動き、残りは静止） --- */

@keyframes step-dot-wave {
  0% { transform: scale(1); border-color: var(--navy); background: var(--bg); box-shadow: 0 0 0 rgba(64, 198, 216, 0); }
  4% { transform: scale(1.5); border-color: #0F9BB6; background: #40C6D8; box-shadow: 0 0 14px rgba(64, 198, 216, 0.85); }
  14% { transform: scale(1); border-color: var(--navy); background: var(--bg); box-shadow: 0 0 0 rgba(64, 198, 216, 0); }
  100% { transform: scale(1); border-color: var(--navy); background: var(--bg); box-shadow: 0 0 0 rgba(64, 198, 216, 0); }
}

@keyframes step-ripple-loop {
  0% { opacity: 0; transform: scale(0.4); }
  2% { opacity: 0.85; }
  16% { opacity: 0; transform: scale(3.6); }
  100% { opacity: 0; transform: scale(3.6); }
}

@keyframes step-track-sweep {
  0% { opacity: 0; transform: translateX(-80%); }
  3% { opacity: 1; }
  13% { opacity: 1; transform: translateX(330%); }
  16% { opacity: 0; transform: translateX(360%); }
  100% { opacity: 0; transform: translateX(360%); }
}

@keyframes step-title-wave {
  0% { transform: translateY(0); color: var(--ink); }
  5% { transform: translateY(-5px); color: #0F9BB6; }
  16% { transform: translateY(0); color: var(--ink); }
  100% { transform: translateY(0); color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .steps .step__track .dot,
  .steps .step__track .track,
  .steps .step .num,
  .steps .step .title,
  .steps .step .desc { transition: none; }
  .steps.is-visible .step .dot,
  .steps.is-visible .step .dot::after,
  .steps.is-visible .step .dot::before,
  .steps.is-visible .step .track::after,
  .steps.is-visible .step .title { animation: none; }
}

/* ----- 06 料金の目安 ----- */

.pricing-body { max-width: 760px; }

.pricing-lead {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-mute);
}

.pricing-lead strong { color: var(--ink); }

.prices { display: flex; flex-direction: column; margin-top: 48px; }

.price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid var(--line);
  padding: 32px 0;
}

.price__label { display: flex; flex-direction: column; gap: 1px; }

.price__label .name {
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.price__label .note { font-size: 12px; color: var(--text-faint); }

.price .range {
  flex: none;
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ----- 07 コラム ----- */

.section--column { padding-bottom: 190px; }

.posts { display: flex; flex-direction: column; }

.posts::after {
  content: '';
  display: block;
  border-top: 1px solid var(--line);
}

.post {
  display: grid;
  grid-template-columns: 128px 110px 90px 1fr 24px;
  gap: 24px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 26px 4px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.post:hover { background: #F2F8FD; }

.post .thumb {
  overflow: hidden;
  border-radius: 4px;
}

.post .thumb img {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.post .date {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
}

.post .tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #41618A;
}

.post .title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: var(--text);
}

.post .arrow { color: var(--navy); font-size: 14px; }

/* ----- コラム記事ページ（column-*.html） ----- */

.column-article .article-meta {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.column-article .article-meta .date {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
}

.column-article .article-meta .tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--navy);
  border: 1px solid #C9DAEA;
  border-radius: 999px;
  padding: 3px 12px;
}

.column-article .article-title {
  margin-top: 16px;
  font-size: 28px;
  line-height: 1.7;
  letter-spacing: 0.08em;
}

.column-article .article-eyecatch {
  max-width: 720px;
  margin: 30px 0 0;
}

.column-article .article-eyecatch img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(12, 68, 124, 0.14);
}

.column-article .article-body {
  max-width: 720px;
  margin-top: 26px;
}

.column-article .article-body h2 {
  margin-top: 54px;
  padding-left: 14px;
  border-left: 2px solid var(--gold);
  font-size: 21px;
  line-height: 1.75;
  letter-spacing: 0.06em;
}

.column-article .article-body h3 {
  margin-top: 36px;
  font-size: 17.5px;
  letter-spacing: 0.06em;
}

.column-article .article-body p {
  margin-top: 20px;
  font-size: 15px;
  line-height: 2.05;
  color: var(--text);
}

.column-article .article-body ul {
  margin: 20px 0 0;
  padding-left: 1.5em;
}

.column-article .article-body li {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.95;
  color: var(--text);
}

.column-article .article-body a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.column-article .article-body hr {
  border: none;
  width: 64px;
  height: 1px;
  margin: 52px auto;
  background: #C9DAEA;
}

.column-article .form-actions { margin-top: 64px; }

@media (max-width: 600px) {
  .column-article .article-title { font-size: 22px; }
  .column-article .article-body h2 { font-size: 19px; }
}

/* ----- 締めのLINE誘導 ----- */

.closing {
  position: relative;
  /* ベタ塗りではなく、上からやわらかく光が差すようなグラデーションで奥行きを出す（シアン寄りの海） */
  background: radial-gradient(120% 90% at 50% 0%, #14859E 0%, #0A5871 48%, #063648 100%);
  overflow: hidden;
  /* 上端を波形に切り抜く。波の谷間からは直前のセクションの淡い背景がそのまま見えるので、
     色合わせ不要で境目がつながる（1層目=波のタイル、2層目=その下を全部見せる） */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V90H0Z' fill='%23000'/%3E%3C/svg%3E") left top / 1400px 90px repeat-x,
    linear-gradient(#000 0 0) left 89px / 100% calc(100% - 89px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V90H0Z' fill='%23000'/%3E%3C/svg%3E") left top / 1400px 90px repeat-x,
    linear-gradient(#000 0 0) left 89px / 100% calc(100% - 89px) no-repeat;
}

/* 切り抜いた縁のすぐ下を、半透明の波が2枚ゆっくり流れる（左右逆方向・別速度） */
.closing::before,
.closing::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 150px;
  z-index: 0; /* 本文(z:1)より後ろ、透過キャンバスと同層 */
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 55%, transparent 100%);
  mask: linear-gradient(#000 55%, transparent 100%);
}

.closing::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 130' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V130H0Z' fill='%23C9F0F5' fill-opacity='0.18'/%3E%3C/svg%3E") 0 10px / 1400px 130px repeat-x;
  animation: closing-wave-a 30s linear infinite;
}

.closing::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 130' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V130H0Z' fill='%239EE3EC' fill-opacity='0.1'/%3E%3C/svg%3E") 500px 22px / 1400px 130px repeat-x;
  animation: closing-wave-b 46s linear infinite;
}

/* 2枚とも同じ向き（右→左）へ、速さだけ変えて静かな潮の流れに */
@keyframes closing-wave-a {
  from { background-position: 0 10px; }
  to { background-position: -1400px 10px; }
}

@keyframes closing-wave-b {
  from { background-position: 500px 22px; }
  to { background-position: -900px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .closing::before,
  .closing::after { animation: none; }
}

/* モバイルは波のタイルを小さくして、画面幅に対する波の数を保つ */
@media (max-width: 860px) {
  .closing {
    -webkit-mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V90H0Z' fill='%23000'/%3E%3C/svg%3E") left top / 900px 64px repeat-x,
      linear-gradient(#000 0 0) left 63px / 100% calc(100% - 63px) no-repeat;
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 45C88 45 87 34 175 34S262 45 350 45 437 56 525 56 612 45 700 45 787 34 875 34 962 45 1050 45 1137 56 1225 56 1312 45 1400 45V90H0Z' fill='%23000'/%3E%3C/svg%3E") left top / 900px 64px repeat-x,
      linear-gradient(#000 0 0) left 63px / 100% calc(100% - 63px) no-repeat;
  }
  .closing::before {
    height: 110px;
    background-size: 900px 92px;
    animation-name: closing-wave-a-m;
  }
  .closing::after {
    height: 110px;
    background-size: 900px 92px;
    animation-name: closing-wave-b-m;
  }
  @keyframes closing-wave-a-m {
    from { background-position: 0 6px; }
    to { background-position: -900px 6px; }
  }
  @keyframes closing-wave-b-m {
    from { background-position: 300px 14px; }
    to { background-position: -600px 14px; }
  }
}

.closing__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.closing__inner {
  position: relative;
  z-index: 1; /* 夜光虫キャンバス（DOM上は先だが絶対配置）より手前に */
  max-width: 720px;
  margin: 0 auto;
  padding: 150px 48px 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
}

.closing__inner h2 {
  font-size: 36px;
  letter-spacing: 0.1em;
  color: #fff;
  text-wrap: pretty;
}

.closing__inner p {
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

.closing .cta-group {
  align-items: center;
  margin-top: 14px;
}

.closing .free-note { color: rgba(255, 255, 255, 0.62); }

/* CTAボタン：静止時も軽く浮かせ、ホバーで水滴と同系の光がにじむ */
.closing .btn-line {
  box-shadow: 0 14px 32px -12px rgba(3, 12, 26, 0.55);
  transition: background 0.2s ease, box-shadow 0.35s ease, transform 0.25s ease;
}

.closing .btn-line:hover {
  box-shadow:
    0 0 18px rgba(6, 199, 85, 0.5),
    0 0 48px rgba(6, 199, 85, 0.26),
    0 14px 32px -12px rgba(3, 12, 26, 0.55);
  transform: translateY(-1px);
}

/* ----- フッター ----- */

.site-footer {
  background: #08243F;
  padding: 38px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer .container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer .logotype {
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.22em;
  color: #fff;
}

.site-footer .logo-mark {
  width: 15px;
  height: 18px;
  background-color: #fff;
}

.site-footer nav {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

.site-footer nav a {
  font-size: 12px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
}

.site-footer nav a:hover { color: #fff; }

.site-footer .copyright {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}

/* ----- お問い合わせフォーム（contact.html / thanks.html） ----- */

.page-contact { background: var(--bg); }

.contact-page {
  padding-top: 150px;
  padding-bottom: 130px;
  min-height: calc(100vh - 120px);
}

.contact-body { max-width: 640px; }

.contact-lead {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  margin-top: 18px;
}

/* ----- 法務ページ（legal.html / privacy.html） ----- */

.legal-body {
  max-width: 760px;
}

.legal-lead {
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.9;
}

.legal-list {
  margin: 42px 0 0;
  border-top: 1px solid var(--line);
}

.legal-list div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.legal-list dt {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.legal-list dd {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.9;
}

.policy-section {
  margin-top: 40px;
}

.policy-section h2 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.policy-section p,
.policy-section li {
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.95;
}

.policy-section p {
  margin-top: 12px;
}

.policy-section ul {
  margin: 14px 0 0;
  padding-left: 1.25em;
}

.legal-updated {
  margin-top: 46px;
  color: var(--text-mute);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.contact-lead strong { color: var(--ink); }

.text-link {
  color: var(--navy);
  text-underline-offset: 3px;
}

#contactForm { margin-top: 44px; }

.form-notice {
  font-size: 13px;
  line-height: 1.8;
  color: #B4482E;
  background: #FBF1EE;
  border: 1px solid #E8CFC7;
  border-radius: 3px;
  padding: 14px 18px;
  margin-top: 20px;
}

.field { margin-bottom: 28px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 9px;
}

.field .req,
.field .opt {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 1px;
}

.field .req { color: #fff; background: var(--navy); }
.field .opt { color: var(--text-mute); border: 1px solid var(--line); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 13px 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field textarea { resize: vertical; line-height: 1.9; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(12, 68, 124, 0.12);
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
  border-color: #B4482E;
}

.field ::placeholder { color: var(--text-faint); }

.select-wrap { position: relative; }

.select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--text-mute);
  border-bottom: 1.5px solid var(--text-mute);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.field-error {
  font-size: 12px;
  color: #B4482E;
  margin-top: 7px;
  min-height: 0;
}

.field--agree { margin-top: 36px; }

.agree-label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1.9;
  color: var(--text-soft) !important;
  cursor: pointer;
}

.agree-label input {
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--navy);
  flex: none;
}

/* 同意文のプライバシーポリシーへのリンク（別タブで開く）。ラベル内の
   インタラクティブ要素なので、クリックしてもチェックのトグルは発火しない */
.agree-link {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.agree-link:hover { color: var(--accent, #C7A868); }

/* ハニーポットは画面外へ（display:noneだと一部botが除外するため） */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 40px;
}

/* display:flex が hidden 属性に勝ってしまうのを防ぐ（確認画面への切替用） */
#contactForm [hidden],
.contact-body [hidden] {
  display: none !important;
}

/* 確認画面へ切り替えた際のスクロール位置が固定ヘッダーに隠れないように */
#entryView { scroll-margin-top: 110px; }

.btn-form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 3px;
  padding: 16px 36px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.btn-form:hover { background: #0A3660; }

.btn-form:disabled { opacity: 0.6; cursor: default; }

.btn-form--ghost {
  color: var(--navy);
  background: transparent;
}

.btn-form--ghost:hover { background: var(--pale); }

.confirm-title {
  font-size: 22px;
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.confirm-list div {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 18px 4px;
}

.confirm-list div:last-child { border-bottom: 1px solid var(--line); }

.confirm-list dt {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.05em;
}

.confirm-list dd {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.confirm-list dd.pre { white-space: pre-wrap; }

@media (max-width: 720px) {
  .contact-page { padding-top: 120px; }
  .legal-list div { grid-template-columns: 1fr; gap: 6px; }
  .confirm-list div { grid-template-columns: 1fr; gap: 4px; }
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
}

/* ----- ヒーロー→お悩みの入り口：スクロール量に連動したズーム遷移 -----
   スクロール操作の分だけ、その場でtransform/opacityを直接書き換えて
   駆動する（CSS transitionでの固定時間アニメーションは使わない＝
   「一気に」ではなく、指を動かした分だけ連続的に拡大が進む） */

.hero__caption--brand p { transform-origin: 50% 50%; }

#worries { transform-origin: 50% 42%; }

/* ----- スクロール・リビール（JS連動） ----- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* セクションラベル（01 お悩みの入り口、など）は、その場で上品に登場する。
   コンテナ自体は動かさず、中の3要素が順番に：番号がふわっと立ち上がり→
   ゴールドの線が左から右へ伸び→ラベル文字が続いて立ち上がる。
   位置固定なので、複数ラベルが同時に入っても衝突せず散らからない */
.section__label.reveal-pop {
  opacity: 1;
  transform: none;
}

.section__label.reveal-pop .num,
.section__label.reveal-pop .name {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.section__label.reveal-pop .name { transition-delay: 0.1s; }

/* ゴールドのアクセント線は左端を起点に、スーッと右へ引かれる */
.section__label.reveal-pop .name::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s;
}

.section__label.reveal-pop.is-visible .num,
.section__label.reveal-pop.is-visible .name {
  opacity: 1;
  transform: none;
}

.section__label.reveal-pop.is-visible .name::before {
  transform: scaleX(1);
}

/* ラベルが登場し終わる頃合いで、本文側が少し遅れて追いかけてくる */
.reveal.reveal-follow {
  transition-delay: 0.5s;
}

@media (prefers-reduced-motion: reduce) {
  .section__label.reveal-pop .num,
  .section__label.reveal-pop .name { opacity: 1; transform: none; transition: none; }
  .section__label.reveal-pop .name::before { transform: none; transition: none; }
  .reveal.reveal-follow { transition-delay: 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----- レスポンシブ ----- */

@media (max-width: 1100px) {
  .section__label { width: auto; }
}

@media (max-width: 860px) {
  .container { padding-left: 28px; padding-right: 28px; }
  .hero__title { font-size: 32px; }
  .hero__caption p { font-size: 19px; letter-spacing: 0.2em; }
  .hero__caption--brand p { font-size: 22px; }
  .section { padding-top: 112px; }
  .section__grid { gap: 36px; }
  .worry--main { padding: 42px 0 48px; }
  .worry { flex-direction: column; gap: 14px; padding: 38px 0; }
  .worry h3 { width: auto; }
  .worry--main h3 { font-size: 30px; }
  .services { margin-top: 44px; }
  .service { min-height: auto; padding: 32px 28px; }
  .cases { margin-top: 38px; }
  .case { grid-template-columns: 1fr; gap: 18px; padding: 42px 0; }
  .case__figure { align-items: flex-start; }
  .case__figure .note { text-align: left; }
  .profile { gap: 44px; }
  /* 縦並びでは、左端のドット＋縦の接続線のタイムライン型にして、
     進行パルスも接続線に沿って上から下へ流す */
  .steps { grid-template-columns: 1fr; gap: 36px 0; margin-top: 52px; }
  .step { position: relative; padding-right: 0; padding-left: 28px; }
  .step__track {
    position: absolute;
    left: 0;
    top: 5px;
    bottom: -36px; /* 次のステップのドットまで線を届かせる（gapぶん） */
    width: 9px;
    display: block;
  }
  .step:last-child .step__track { bottom: 6px; }
  .step__track .dot { display: block; } /* 親がflexでなくなるので明示（inlineだと潰れる） */
  .steps .step__track .track {
    position: absolute;
    left: 4px;
    top: 13px;
    bottom: 0;
    flex: none;
    width: 1px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center top;
  }
  .steps.is-visible .step .track { transform: scaleY(1); }
  .steps .step__track .track::after {
    left: -1px;
    top: 0;
    width: 3px;
    height: 26%;
    background: linear-gradient(180deg, transparent, rgba(64, 198, 216, 0.95), transparent);
    transform: translateY(-120%);
  }
  .steps.is-visible .step .track::after { animation-name: step-track-sweep-m; }
  @keyframes step-track-sweep-m {
    0% { opacity: 0; transform: translateY(-120%); }
    3% { opacity: 1; }
    13% { opacity: 1; transform: translateY(400%); }
    16% { opacity: 0; transform: translateY(430%); }
    100% { opacity: 0; transform: translateY(430%); }
  }
  .prices { margin-top: 40px; }
  .price { padding: 28px 0; }
  .profile__photo img { width: 200px; height: 267px; }
  .profile__photo::before { width: 200px; height: 267px; top: 10px; left: 10px; }
  .profile__photo::after { width: 110px; top: -28px; left: -30px; }
  .section--column { padding-bottom: 120px; }
  /* モバイルはサムネを左に置き、右側に日付＋タイトルを2段で */
  .post {
    grid-template-columns: 100px 1fr 20px;
    grid-template-areas:
      'thumb date arrow'
      'thumb title title';
    gap: 6px 16px;
    padding: 24px 4px;
  }
  .post .thumb { grid-area: thumb; }
  .post .thumb img { height: 64px; }
  .post .date { grid-area: date; }
  .post .title { grid-area: title; line-height: 1.75; }
  .post .arrow { grid-area: arrow; }
  .post .tag { display: none; }
  .closing__inner { padding: 112px 28px 128px; gap: 24px; }
  .closing__inner h2 { font-size: 27px; }
}

/* ヘッダーが窮屈になる幅では、タグラインを畳んでロゴと三本線だけにする */
@media (max-width: 700px) {
  .site-header .tagline,
  .site-nav-fixed .tagline { display: none; }
  .site-header .logotype,
  .site-nav-fixed .logotype { white-space: nowrap; font-size: 15px; }
  .menu-toggle { right: 20px; }
}

@media (max-width: 600px) {
  /* 見出し類は語句の途中で割れないよう、改行位置が決まる幅に絞る */
  /* 「あなたの課題に、」＋「最短ルートを。」の2行 */
  .hero__title { max-width: 9em; }
  /* 「小さな相談からで」＋「大丈夫です。」の2行 */
  .closing__inner h2 { max-width: 9.3em; }
  /* 水面キャプションは「小さな波紋は、」で改行（br.br-narrowを表示）。
     2行目「やがて大きな波になる。」は幅ギリギリで再折り返ししやすいので
     nowrapで1行に固定し、text-align:centerで各行を中央に揃える */
  .hero__caption p { font-size: 17px; white-space: nowrap; }
  .hero__caption--brand p { font-size: 18px; white-space: nowrap; }

  .worry--main h3 { font-size: 26px; }
  .section__title { font-size: 24px; }
}

/* 狭い幅でだけ有効になる改行（広い画面では消える） */
br.br-narrow { display: none; }

@media (max-width: 600px) {
  br.br-narrow { display: inline; }
}