/* ============================================================
   Ridge Forge — 共通スタイル
   ライト基調（和紙のウォームホワイト）×ダークの額縁（ヘッダー/フッター）
   ============================================================ */
:root {
  --night: #1C1E22;
  --cream: #F7F3EB;
  --ink: #2B2A26;
  --brass: #A06E3B;
  --brass-soft: #C8915C;
  --line: rgba(43, 42, 38, 0.14);          /* ライト面の罫線 */
  --line-dark: rgba(245, 242, 236, 0.16);  /* ダーク面の罫線 */
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  background: var(--cream);
  color: var(--ink);
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}
/* 見出しのみ語句（文節）単位で折り返し、単語の途中で改行されないようにする。
   本文は通常どおり行を詰めて折り返す（狭い枠で短い行が連続するのを防ぐ） */
h1, h2, h3 { word-break: auto-phrase; line-break: strict; }
@supports not (word-break: auto-phrase) {
  h1, h2, h3 { word-break: normal; overflow-wrap: break-word; }
}
body.locked { overflow: hidden; }

/* ===== 紙のグレイン ===== */
.grain-fixed {
  position: fixed; inset: 0; z-index: 45; pointer-events: none;
  opacity: 0.04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== スクロールリビール ===== */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* ===== ヘッダー（全ページ共通・ダーク帯） ===== */
#hdr { transition: background-color .4s ease, border-color .4s ease; }
#hdr.is-solid { background: rgba(28, 30, 34, 0.92); backdrop-filter: blur(10px); }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px;
  background: var(--brass-soft);
  transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--brass-soft); }

/* ===== ボタン ===== */
.btn-brass { background: var(--brass); color: #FFF; transition: background .3s ease, transform .3s ease; }
.btn-brass:hover { background: #8C5F31; transform: translateY(-2px); }
.btn-brass-dark { background: var(--brass-soft); color: var(--night); transition: background .3s ease, transform .3s ease; }
.btn-brass-dark:hover { background: #DBA56A; transform: translateY(-2px); }
.btn-out { border: 1px solid var(--line); color: var(--ink); transition: border-color .3s ease, color .3s ease, transform .3s ease; }
.btn-out:hover { border-color: var(--brass); color: var(--brass); transform: translateY(-2px); }
.btn-out-dark { border: 1px solid var(--line-dark); color: var(--cream); transition: border-color .3s ease, color .3s ease, transform .3s ease; }
.btn-out-dark:hover { border-color: var(--brass-soft); color: var(--brass-soft); transform: translateY(-2px); }
.magnetic { will-change: transform; }

/* ===== カード（ライト面・親しみのある角丸＋淡い影） ===== */
.card {
  background: #FCFAF6;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 42, 38, 0.04), 0 8px 28px rgba(43, 42, 38, 0.06);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(43, 42, 38, 0.05), 0 16px 44px rgba(43, 42, 38, 0.10); }

/* ===== 眉ラベル行（セクション見出し・強調版） ===== */
.eyebrow { display: flex; align-items: center; gap: 1rem; font-family: "Space Mono", monospace; font-size: 14px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--brass); }
.eyebrow > span:first-child { position: relative; padding-left: 1.1rem; }
.eyebrow > span:first-child::before { content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; transform: translateY(-50%) rotate(45deg); background: var(--brass); }
.eyebrow .rule { flex: 1; height: 1px; background: var(--line); }
.dark-zone .eyebrow { color: var(--brass-soft); }
.dark-zone .eyebrow > span:first-child::before { background: var(--brass-soft); }
.dark-zone .eyebrow .rule { background: var(--line-dark); }

/* ===== チェックリスト（Problem） ===== */
.tick { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.25rem; background: #FFF; border: 1px solid var(--line); border-radius: 12px; }
.tick svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--brass); margin-top: 2px; }

/* ===== サービス行（ライト面） ===== */
.srow { position: relative; border-top: 1px solid var(--line); overflow: hidden; display: block; }
.srow:last-child { border-bottom: 1px solid var(--line); }
.srow .fill { position: absolute; inset: 0; background: var(--brass); transform: translateY(101%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); z-index: 0; }
.srow:hover .fill { transform: translateY(0); }
.srow > * { position: relative; z-index: 1; }
.srow:hover, .srow:hover * { color: #FFF !important; }
.srow .srow-arrow { transition: transform .45s cubic-bezier(.16, 1, .3, 1); }
.srow:hover .srow-arrow { transform: translate(6px, -6px); }

/* ===== FAQ ===== */
.faq-item button[aria-expanded="true"] .fp { transform: rotate(45deg); }
.fp { transition: transform .35s ease; color: var(--brass); }
.fbody { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1); }
.fbody > div { overflow: hidden; }
.faq-item.open .fbody { grid-template-rows: 1fr; }

/* ===== フォーム ===== */
.fld { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); transition: border-color .3s ease; border-radius: 0; }
.fld:focus { outline: none; border-color: var(--brass); }
.fld::placeholder { color: var(--mute, #6E6A61); }

/* ===== カスタムカーソル ===== */
.cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 70; pointer-events: none;
  width: 38px; height: 38px; border: 1px solid var(--brass); border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: difference;
  transition: width .25s ease, height .25s ease, background .25s ease, opacity .3s ease;
  opacity: 0;
}
.cursor-ring.grow { width: 72px; height: 72px; background: rgba(160, 110, 59, 0.14); }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* ===== フローティングCTA ===== */
#fcta { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
#fcta.show { opacity: 1; transform: none; pointer-events: auto; }

/* ===== スクロールキュー ===== */
@keyframes cue { 0% { transform: translateY(0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translateY(10px); opacity: .2; } }
.cue { animation: cue 1.8s ease-in-out infinite; }

/* ===== プリローダー（トップのみ） ===== */
#preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--night); display: flex; align-items: flex-end; justify-content: space-between;
  padding: 6vw; transition: opacity .6s ease, visibility .6s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }
#pl-count { font-family: "Cormorant Garamond", serif; font-size: clamp(5rem, 22vw, 18rem); line-height: .8; color: var(--cream); }
.pl-bar { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--brass-soft); width: 0%; }

/* ===== 記事本文（コラム） ===== */
.prose-rf { line-height: 2; }
.prose-rf h2 { font-family: "Shippori Mincho", serif; font-weight: 600; font-size: 1.5rem; margin: 3rem 0 1.25rem; padding-left: 1rem; border-left: 3px solid var(--brass); }
.prose-rf p { margin-bottom: 1.5rem; color: var(--ink-soft, #55524A); }
.prose-rf strong { color: var(--ink); font-weight: 700; }

/* ===== 蛍光マーカー風ハイライト（ai-bloga参考） ===== */
.marker {
  background: linear-gradient(transparent 62%, rgba(200,145,92,0.32) 62%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  font-weight: 700;
  transition: background-size .8s cubic-bezier(.16,1,.3,1) .2s;
}
.marker.lit, .reveal.in .marker { background-size: 100% 100%; }
.dark-zone .marker { background: linear-gradient(transparent 62%, rgba(200,145,92,0.4) 62%); background-size:0% 100%; background-repeat:no-repeat; }
.dark-zone .reveal.in .marker { background-size: 100% 100%; }

/* ===== ドット背景テクスチャ（さりげない技術感） ===== */
.dot-grid {
  background-image: radial-gradient(rgba(43,42,38,0.10) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}
.dark-zone .dot-grid { background-image: radial-gradient(rgba(245,242,236,0.08) 1.1px, transparent 1.1px); }

/* ===== 丸バッジ（初回相談 無料） ===== */
.offer-badge {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border-radius: 50%;
  background: var(--brass); color: #fff;
  box-shadow: 0 10px 30px rgba(160,110,59,0.35);
}
@keyframes badge-spin { to { transform: rotate(360deg); } }
.badge-ring { animation: badge-spin 18s linear infinite; }

/* ===== 常設CTAバー（画面下・ai-bloga参考） ===== */
#cta-bar { transform: translateY(110%); transition: transform .45s cubic-bezier(.16,1,.3,1); }
#cta-bar.show { transform: translateY(0); }

/* ===== アイコン特長ブロック ===== */
.feat-ico { width: 56px; height: 56px; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: var(--brass-pale, #EBDDC9); color: var(--brass); }
.feat-ico svg { width: 28px; height: 28px; stroke-width: 1.6; }

/* ===== 困りごとカード（アイコン枠つき・Problem） ===== */
.worry { display: flex; align-items: flex-start; gap: 1rem; }
.worry .wnum { font-family: "Cormorant Garamond", serif; font-size: 2rem; line-height: 1; color: var(--brass); flex-shrink: 0; }

/* ===== 3つの入口（Services 大カテゴリ） ===== */
.entry { position: relative; display: flex; flex-direction: column; overflow: hidden; }
.entry .entry-tag { display: inline-flex; align-items: center; gap: .5rem; font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.entry .entry-no { position: absolute; top: 1.2rem; right: 1.5rem; font-family: "Cormorant Garamond", serif; font-size: 3.4rem; line-height: 1; color: var(--brass); opacity: .16; }
.entry ul li { display: flex; gap: .6rem; align-items: flex-start; }
.entry ul li::before { content: ""; width: 6px; height: 6px; margin-top: .65em; flex-shrink: 0; background: var(--brass-soft); border-radius: 50%; }

/* ===== よくあるご相談（チップ） ===== */
.voice-chip { display: flex; align-items: center; gap: .85rem; padding: 1.05rem 1.25rem; background: #FFF; border: 1px solid var(--line); border-radius: 12px; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; }
.voice-chip:hover { border-color: var(--brass); transform: translateX(4px); box-shadow: 0 8px 22px rgba(43,42,38,.07); }
.voice-chip .vq { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 1.5rem; line-height: 1; color: var(--brass); flex-shrink: 0; }

/* ===== できることの流れ（Workflow画像帯） ===== */
.flow-img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); background: #FFF; }

/* ===== 顧問でできること（チェック項目） ===== */
.cando { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; }
.cando svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--brass); margin-top: .25em; }

/* ===== 事例カード（課題/対応/結果） ===== */
.case-row { display: grid; grid-template-columns: auto 1fr; gap: .55rem .85rem; }
.case-row dt { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); padding-top: .35em; white-space: nowrap; }
.case-row dd { font-size: .95rem; line-height: 1.7; color: var(--ink-soft); }
.case-result { background: var(--brass-pale); border-radius: 10px; padding: .85rem 1rem; }

/* ===== 3つの約束 ===== */
.promise-no { font-family: "Cormorant Garamond", serif; font-size: 3rem; line-height: 1; color: var(--brass-soft); }

/* ===== 代表者ブロック（モノグラム） ===== */
.monogram { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brass-pale); color: var(--brass); font-family: "Cormorant Garamond", serif; font-size: 2.4rem; flex-shrink: 0; border: 1px solid var(--line); }

/* 代表写真（greetingの丸枠）— チェストアップで上寄せ表示 */
.founder-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center 18%; flex-shrink: 0; border: 1px solid var(--line); background: var(--brass-pale); }
@media (min-width: 640px) { .founder-photo { width: 150px; height: 150px; } }

/* ===== LINE QRプレースホルダ ===== */
.qr-ph { position: relative; width: 160px; height: 160px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: var(--cream); }
.qr-ph::before { content: ""; position: absolute; inset: 14px; background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size: 12px 12px; opacity: .5; border-radius: 6px; }

::selection { background: var(--brass); color: #FFF; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .cue { animation: none; }
  .cursor-ring { display: none; }
}