@charset "UTF-8";
/* ==========================================================================
   自分史アルバム LP 固有スタイル

   ★このファイルは SASS 管理外。このCSSが直接のソースです。
     sass/modules/ にコンパイル元はありません。編集はこのファイルを直接行ってください。
     間違って jibunshi.sass を作ってコンパイルすると、このファイルの内容が失われます。

     経緯：portalは従来 sass をソースにしてコンパイルする運用でしたが、
     変数・ネスト等はCSSが素で持つようになったため、新規ページはCSS単体で管理します
     （このLPは元がReaddyAI由来でsassソースが存在しない、という事情もあります）。
     ※この方針は提案中。確定したら運用ルール側へ反映してください。
     ※同じくSASS管理外：jibunshi-contact.css / character-footer.css / old_simple-mode.css

   - セレクタは #jibunshi 配下にスコープ（portal規約：#pageid スコープ）
   ========================================================================== */

/* 全幅要素(value-title/footer-divider等)の左右はみ出しで横スクロールが出るのを、ルート(html)で確実にクリップ。
   ※jibunshi.css はこのページ専用のため html 指定でも他ページに影響しない */
html { overflow-x: clip; }

/* ===== スクロール連動リビール（次セクションが下から静かに浮上＋フェード＝高級感） =====
   html.reveal-on はJSが付与（JS無効時は隠さない＝フォールバックで常時表示）。
   イージングは ease-out-expo系 cubic-bezier(.16,1,.3,1) でゆったり減速 */
html.reveal-on #jibunshi [data-reveal] {
  opacity: 0;
  transform: translateY(56px);
  transition: opacity 1.05s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
/* 表示ルールは隠すルールと同等以上の詳細度が必要（html.reveal-on を付けて上回らせる）。
   will-change は表示が終わったら必ず外す。
   will-change は「これから変化する」とブラウザに事前に伝えて合成レイヤーを用意させる指定で、
   本来は一時的に付けるもの。付けっぱなしだとレイヤーが residents し続け、
   その中の要素にホバーで transform が掛かった瞬間に入れ子のレイヤーが作られて再ラスタライズされる。
   結果、一瞬だけ素の状態が見えてから境界で切り取られる、という描画のちらつきが出る
   （04 SERVICE のカード画像で実際に発生）。 */
html.reveal-on #jibunshi [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html.reveal-on #jibunshi [data-reveal] { opacity: 1; transform: none; transition: none; }
}

#jibunshi {
  overflow-x: clip;
  --background-50: 0.985 0.008 75;  --background-100: 0.97 0.012 75; --background-200: 0.945 0.014 72;
  --background-300: 0.905 0.016 70; --background-400: 0.84 0.018 68; --background-500: 0.72 0.02 65;
  --background-600: 0.58 0.022 62;  --background-700: 0.44 0.022 58; --background-800: 0.3 0.02 55;
  --background-900: 0.2 0.018 52;   --background-950: 0.13 0.014 50;

  --primary-50: 0.965 0.012 50; --primary-100: 0.93 0.022 48; --primary-200: 0.86 0.04 45;
  --primary-300: 0.76 0.06 42;  --primary-400: 0.62 0.08 40;  --primary-500: 0.42 0.07 40;
  --primary-600: 0.34 0.06 40;  --primary-700: 0.27 0.05 40;  --primary-800: 0.21 0.04 40;
  --primary-900: 0.16 0.03 40;  --primary-950: 0.11 0.02 40;

  --accent-50: 0.975 0.018 80; --accent-100: 0.94 0.04 80; --accent-200: 0.88 0.07 78;
  --accent-300: 0.8 0.1 76;    --accent-400: 0.7 0.12 72;  --accent-500: 0.6 0.12 68;
  --accent-600: 0.5 0.11 65;   --accent-700: 0.4 0.09 62;  --accent-800: 0.3 0.07 60;
  --accent-900: 0.22 0.05 58;  --accent-950: 0.15 0.03 56;

  --secondary-50: 0.965 0.006 60; --secondary-100: 0.93 0.008 58; --secondary-200: 0.87 0.012 55;
  --secondary-300: 0.78 0.015 52; --secondary-400: 0.66 0.018 50; --secondary-500: 0.54 0.02 48;
  --secondary-600: 0.44 0.022 46; --secondary-700: 0.35 0.022 44; --secondary-800: 0.27 0.02 42;
  --secondary-900: 0.2 0.018 40;  --secondary-950: 0.13 0.014 38;

  --foreground-50: 0.97 0.006 60; --foreground-100: 0.93 0.008 58; --foreground-200: 0.86 0.01 55;
  --foreground-300: 0.74 0.012 52; --foreground-400: 0.6 0.014 50; --foreground-500: 0.46 0.014 48;
  --foreground-600: 0.36 0.014 46; --foreground-700: 0.27 0.012 44; --foreground-800: 0.2 0.01 42;
  --foreground-900: 0.14 0.008 40; --foreground-950: 0.08 0.005 38;

  --font-heading: "Shippori Mincho", "Noto Serif JP", serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
  --font-label: "Noto Sans JP", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }

/* アンカーで飛んだ先が固定ヘッダーの下に潜らないよう、着地位置をヘッダーぶん下げる。
   ヘッダーは position:fixed（--header-h ＝ SP72px / PC120px）なので、これが無いと
   #what や #faq などナビの遷移先が全てヘッダーに隠れる。+1rem は見た目の余白。 */
#jibunshi [id] { scroll-margin-top: calc(var(--header-h) + 1rem); }
#jibunshi {
  margin: 0;
  min-height: 100vh;
  font-size: 16px; /* 本文のベースサイズ */
  background-color: oklch(var(--background-50));
  color: oklch(var(--foreground-900));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.02em;
}

/* 基本リセット（Tailwind preflight 撤去に伴う最小限。#jibunshi 内のみ） */
#jibunshi, #jibunshi *, #jibunshi *::before, #jibunshi *::after { box-sizing: border-box; }
#jibunshi h1, #jibunshi h2, #jibunshi h3, #jibunshi h4,
#jibunshi p, #jibunshi ul, #jibunshi li, #jibunshi figure,
#jibunshi blockquote, #jibunshi table { margin: 0; }
#jibunshi ul { list-style: none; padding: 0; }
#jibunshi a { color: inherit; text-decoration: none; }
#jibunshi img { display: block; max-width: 100%; }
#jibunshi button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* アイコンサイズ（旧 Tailwind text-lg / text-base 相当） */
#jibunshi .btn-arrow { font-size: 1.125rem; }
#jibunshi .wd-step-icon { font-size: 1.125rem; }
#jibunshi .acc-badge { font-size: 1rem; }
#jibunshi .footer-btn i { margin-left: .25rem; }

#jibunshi .font-latin { font-family: "Cormorant Garamond", serif; letter-spacing: 0.08em; }
#jibunshi .vertical-rl { writing-mode: vertical-rl; }

/* 共通コンテナ：中央寄せ1280px・左右余白なし（フル画像セクション用） */
#jibunshi .container { width: 100%; max-width: 1280px; margin-inline: auto; }
/* 共通インナー：中央寄せ1620px。この中に左右余白なしでコンテンツを配置。
   タイトル・本文はこのインナーの左端に揃える */
#jibunshi .inner { width: 100%; max-width: 1620px; margin-inline: auto; }
@media (min-width:1024px){ #jibunshi .lg\:vertical-rl { writing-mode: vertical-rl; } }

@keyframes fadeUp { from { opacity:0; transform:translateY(24px);} to { opacity:1; transform:translateY(0);} }
#jibunshi .anim-fade-up { animation: fadeUp 0.9s ease-out both; }
@keyframes slowZoom { from { transform:scale(1);} to { transform:scale(1.08);} }
#jibunshi .anim-slow-zoom { animation: slowZoom 14s ease-out both; }

/* ヘッダーは常時ソリッド（茶グラデ）固定。スクロール時は影のみ付与 */
#jibunshi #site-header.is-scrolled { box-shadow: 0 2px 12px rgb(0 0 0 / .18); }

/* ヘッダーへ潜る瞬間だけコンテンツを溶かす処理は jibunshi.js（動的マスク）で実装。
   固定のフェード帯は「常時色が乗る」ため廃止した */

/* アコーディオン開閉時の丸アイコン */
#jibunshi [data-acc-icon].acc-icon-open {
  background: oklch(var(--primary-500));
  border-color: oklch(var(--primary-500));
  color: oklch(var(--background-50));
}


/* ==========================================================================
   共通パーツ
   ========================================================================== */

/* セクション英字ラベル（アイブロウ）。全セクション共通の体裁で、色だけ切替 */
#jibunshi .eyebrow {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: .5em;
  color: oklch(var(--primary-600));
  margin-bottom: 1.5rem;
}
#jibunshi .eyebrow--ondark { color: oklch(var(--accent-300)); }   /* 濃い背景（ヒーロー / CTA）で使う */

/* 繰り返し使う丸ボタン。色違いは修飾クラスで */
#jibunshi .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 9999px;
  cursor: pointer;
  transition: all .3s;
}
/* 明るい大ボタン（ヒーロー／CTAの主ボタン） */
#jibunshi .btn-light {
  height: 3.5rem;
  padding-inline: 2rem;
  background: oklch(var(--background-50));
  color: oklch(var(--foreground-950));
  font-size: .875rem;
  letter-spacing: .1em;
}
#jibunshi .btn-light:hover { background: oklch(var(--accent-300)); }
/* ボタン内の矢印アイコン（ホバーで右へ動く） */
#jibunshi .btn-arrow {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .5rem;
  transition: transform .3s;
}
#jibunshi .btn:hover .btn-arrow { transform: translateX(.25rem); }

/* セクション見出し（複数セクション共通。サイズだけ各所で上書き可） */
#jibunshi .section-title {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 1.25;
  color: oklch(var(--foreground-950));
  font-weight: 500;
}
@media (min-width: 768px) { #jibunshi .section-title { font-size: 44px; } }

/* 矢印付きテキストリンク（「私たちの想いを見る」等で共通利用） */
#jibunshi .link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: oklch(var(--foreground-900));
  white-space: nowrap;
  transition: color .3s;
}
#jibunshi .link-arrow:hover { color: oklch(var(--primary-700)); }
#jibunshi .link-arrow-line { width: 1.5rem; height: 1px; background: oklch(var(--foreground-900)); }


/* ==========================================================================
   01 HERO
   ========================================================================== */
#jibunshi .hero-wrapper {
  position: relative;
  width: 100%;
}
/* MVはテキスト込み1枚画像・全幅1920px。高さは画像の縦横比に追従 */
#jibunshi .hero-image { display: block; width: 100%; height: auto; }
/* picture は既定でインライン＝行ボックスのぶん下に隙間が出るのでブロック化 */
#jibunshi .hero-picture { display: block; }
/* 画像化した見出しのh1をスクリーンリーダー用に保持（h1/h2/h3階層維持） */
#jibunshi .sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 右下CTA（cta_mv.png）をMV画像の空きスペースに重ねる。位置・幅はスクショから見た目で調整 */
#jibunshi .hero-cta-mv {
  position: absolute;
  right: 3%;
  bottom: 13%;
  width: 21%;
  z-index: 10;
  display: block;
  transition: filter .3s;
}
#jibunshi .hero-cta-mv:hover { filter: brightness(1.05); }

/* 〜1023px は背景が mv_jibunshi_sp.png（構図が違う）に切り替わるので、CTAも位置と大きさを合わせる。
   SP版は下部の帯の右側が空いているので、そこへ収める（2026-07-17 中前さん支給の画像から実測）。
   PC値(21%)のままだと375pxで79px＝小さすぎて押せない。
   ※境界は index.php の <source media="(max-width: 1023px)"> と必ず揃えること。 */
@media (max-width: 1023px) {
  #jibunshi .hero-cta-mv {
    right: 2%;
    bottom: 4%;
    width: 41%;
  }
}
#jibunshi .hero-cta-mv-img { display: block; width: 100%; height: auto; }
#jibunshi .hero-bg { position: absolute; inset: 0; }
#jibunshi .hero-bg-image { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#jibunshi .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(var(--foreground-950) / .55),
    oklch(var(--foreground-950) / .30) 50%,
    oklch(var(--foreground-950) / .65)
  );
}
#jibunshi .hero-inner {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#jibunshi .hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-inline: 1.5rem;
}
#jibunshi .hero-grid {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: end;
}
#jibunshi .hero-copy { animation: fadeUp .9s ease-out both; }
#jibunshi .hero-title {
  font-family: var(--font-heading);
  color: oklch(var(--background-50));
  font-size: 34px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .05em;
}
#jibunshi .hero-audience-link {
  display: inline-block;
  margin-top: 1.25rem;
  padding: .5rem 1rem;
  border: 1px solid oklch(var(--accent-300) / .5);
  border-radius: 9999px;
  color: oklch(var(--accent-200));
  font-size: 13px;
  letter-spacing: .05em;
  font-family: var(--font-heading);
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
#jibunshi .hero-audience-link:hover {
  border-color: oklch(var(--accent-300));
  color: oklch(var(--accent-100));
}
#jibunshi .hero-lead {
  margin-top: 2rem;
  font-family: var(--font-heading);
  color: oklch(var(--background-100) / .9);
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: .1em;
}
#jibunshi .hero-service-name {
  margin-top: 1.5rem;
  font-family: var(--font-heading);
  color: oklch(var(--background-100) / .8);
  font-size: 1rem;
  line-height: 2;
  max-width: 36rem;
}
#jibunshi .hero-actions {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#jibunshi .hero-note {
  margin-top: 2rem;
  color: oklch(var(--background-100) / .55);
  font-size: .75rem;
  letter-spacing: .05em;
}
#jibunshi .hero-side { display: flex; animation: fadeUp .9s ease-out both; }
#jibunshi .hero-since {
  color: oklch(var(--background-100) / .7);
  font-size: 11px;
  letter-spacing: .5em;
  font-family: "Cormorant Garamond", serif;
}
#jibunshi .hero-scroll {
  position: relative;
  z-index: 10;
  padding-inline: 1.5rem;
  padding-bottom: 2rem;
}
#jibunshi .hero-scroll-inner {
  max-width: 1280px;
  margin-inline: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: oklch(var(--background-100) / .7);
}
#jibunshi .hero-scroll-label {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 11px;
  letter-spacing: .3em;
  font-family: "Cormorant Garamond", serif;
}
#jibunshi .hero-scroll-label::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: oklch(var(--background-100) / .4);
}
#jibunshi .hero-scroll-index {
  display: none;
  font-size: 11px;
  letter-spacing: .3em;
  font-family: "Cormorant Garamond", serif;
}

@media (min-width: 640px) {
  #jibunshi .hero-title { font-size: 3rem; }
  #jibunshi .hero-actions { flex-direction: row; }
}
@media (min-width: 768px) {
  #jibunshi .hero-body,
#jibunshi .hero-scroll { padding-inline: 2.5rem; }
  #jibunshi .hero-copy .eyebrow { font-size: .75rem; margin-bottom: 2rem; }
  #jibunshi .hero-audience-link { margin-top: 1.5rem; font-size: .875rem; }
  #jibunshi .hero-lead { margin-top: 2.5rem; font-size: 1.125rem; }
  #jibunshi .hero-service-name { font-size: 17px; }
  #jibunshi .hero-actions { margin-top: 3rem; }
  #jibunshi .hero-scroll-index { display: block; }
}
@media (min-width: 1024px) {
  #jibunshi .hero-body,
#jibunshi .hero-scroll { padding-inline: 3.5rem; }
  #jibunshi .hero-grid { grid-template-columns: 8fr 4fr; }
  #jibunshi .hero-side { justify-content: flex-end; }
  #jibunshi .hero-since { writing-mode: vertical-rl; }
  #jibunshi .hero-title { font-size: 64px; }
}


/* ==========================================================================
   02 EMPATHY
   ========================================================================== */
#jibunshi .empathy-wrapper {
  position: relative;
  background: oklch(var(--background-100));
  /* 上余白は付けない（empathy-head画像を上セクションと繋げる）。下余白のみ */
  padding-bottom: 6rem;
}
#jibunshi .empathy-head { text-align: center; margin-bottom: 4rem; }
#jibunshi .empathy-head .eyebrow { margin-inline: auto; }
#jibunshi .empathy-title {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  line-height: 1.5;
  color: oklch(var(--foreground-950));
  font-weight: 500;
  margin: 0;
}
/* 見出し画像化（empathy-head.png）。全幅=ビューポート幅（1920基準・ウォーターカラー込み） */
#jibunshi .empathy-head-img { display: block; width: 100%; height: auto; }
#jibunshi .empathy-groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
/* 2カラム画像（for-family.png / for-successor.png）。列幅いっぱい・比率維持（均一スケールで正円を保つ）
   ※高さ固定にするとGridの引き伸ばしで横に伸び楕円化するため、width:100%/height:autoにする */
#jibunshi .empathy-group-img { display: block; width: 100%; height: auto; }
#jibunshi .empathy-group-head {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(var(--accent-300) / .6);
}
#jibunshi .empathy-group--company .empathy-group-head {
  border-bottom-color: oklch(var(--primary-300) / .6);
}
#jibunshi .empathy-group-title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  letter-spacing: .025em;
  color: oklch(var(--accent-700));
}
#jibunshi .empathy-group--company .empathy-group-title { color: oklch(var(--primary-700)); }
#jibunshi .empathy-list { display: flex; flex-direction: column; gap: 1.5rem; }
#jibunshi .empathy-item { display: flex; align-items: flex-start; gap: 1.25rem; }
#jibunshi .empathy-item-no {
  flex-shrink: 0;
  width: 1.75rem;
  margin-top: .125rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  letter-spacing: .3em;
  color: oklch(var(--accent-500));
}
#jibunshi .empathy-group--company .empathy-item-no { color: oklch(var(--primary-500)); }
#jibunshi .empathy-item-text {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 2.2;
  letter-spacing: .025em;
  color: oklch(var(--foreground-800));
}
#jibunshi .empathy-closing { margin-top: 6rem; text-align: center; }
#jibunshi .empathy-closing-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 2.2;
  letter-spacing: .025em;
  color: oklch(var(--foreground-950));
}
#jibunshi .empathy-closing-line {
  margin-top: 2rem;
  margin-inline: auto;
  width: 4rem;
  height: 1px;
  background: oklch(var(--accent-500));
}

@media (min-width: 640px) {
  #jibunshi .empathy-closing-text br { display: none; }
}
@media (min-width: 768px) {
  #jibunshi .empathy-wrapper { padding-bottom: 8rem; }
  #jibunshi .empathy-head { margin-bottom: 5rem; }
  #jibunshi .empathy-title { font-size: 48px; }
  #jibunshi .empathy-group-title { font-size: 1.25rem; }
  #jibunshi .empathy-item-text { font-size: 18px; }
  #jibunshi .empathy-closing { margin-top: 7rem; }
  #jibunshi .empathy-closing-text { font-size: 30px; }
}
@media (min-width: 1024px) {
  #jibunshi .empathy-title { font-size: 56px; }
  #jibunshi .empathy-groups { grid-template-columns: repeat(2, 1fr); gap: 4rem; }
}


/* ==========================================================================
   TRUE WEALTH（全幅バナー画像・full-bleed）
   ラッパーに padding-inline を付けない＝端まで全幅
   ========================================================================== */
#jibunshi .true-wealth-wrapper { width: 100%; }
#jibunshi .true-wealth-img { display: block; width: 100%; height: auto; }

/* 全幅バナー（full-bleed）共通クラス。ラッパーに左右余白を付けない */
#jibunshi .banner-full { width: 100%; }
#jibunshi .banner-full-img { display: block; width: 100%; height: auto; }
/* picture は既定でインライン＝行ボックスのぶん下に隙間が出るのでブロック化 */
#jibunshi .banner-full-picture { display: block; }

/* OUR WORK：全幅バナー＋下部にCTAクリック領域を重ねる（位置・幅は見た目で調整） */
#jibunshi .our-work-wrapper { position: relative; }
#jibunshi .our-work-cta {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 38%;
  z-index: 2;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s cubic-bezier(.16, 1, .3, 1);
}
/* 中央寄せ(translateX(-50%))を保持したまま浮上＋ドロップシャドウ */
#jibunshi .our-work-cta:hover { transform: translateX(-50%) translateY(-2px); filter: brightness(1.035) drop-shadow(0 8px 18px rgba(80, 45, 25, .22)); }
#jibunshi .our-work-cta-img { display: block; width: 100%; height: auto; }

/* 〜1023px は背景が our-work_sp.png（左端の写真を外した構図）に切り替わるので、
   ボタンも合わせて大きくする（2026-07-17 中前さん指示）。
   ※境界は index.php の <source media="(max-width: 1023px)"> と必ず揃えること。
     ズレると「画像はSP版・ボタンはPC用サイズ」の幅ができる。 */
@media (max-width: 1023px) {
  #jibunshi .our-work-cta { width: 55%; }
}

/* 最後のセクション：share-your-story 全幅バナー＋CTAオーバーレイ（位置・幅は見た目で調整） */
#jibunshi .share-story-wrapper { position: relative; }
#jibunshi .share-story-cta {
  position: absolute;
  left: 50%;
  bottom: 10%;
  transform: translateX(-50%);
  width: 42%; /* 38%→42%（2026-07-17 中前さん指示） */
  z-index: 2;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s cubic-bezier(.16, 1, .3, 1);
}
#jibunshi .share-story-cta:hover { transform: translateX(-50%) translateY(-2px); filter: brightness(1.035) drop-shadow(0 8px 18px rgba(80, 45, 25, .22)); }
#jibunshi .share-story-cta-img { display: block; width: 100%; height: auto; }

/* SPはバナー画像が縦に詰まるぶん、ボタンを大きく・下端いっぱいに（2026-07-17 中前さん指示）。
   position / left / transform はベースと同じなのでここには書かない
   （重複させるとベースを直したとき片方だけ古い値が残る）。 */
@media (max-width: 767px) {
  #jibunshi .share-story-cta {
    bottom: 0%;
    width: 60%;
  }
}


/* ==========================================================================
   03 WHAT WE DO
   ========================================================================== */
#jibunshi .what-we-do-wrapper {
  position: relative;
  overflow: hidden;
  /* 背景画像（水彩テクスチャ）。フォールバックに暖色クリーム */
  background: #f4ede0 url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/bg_what-we-do.png?tr=n-base,w-1920") 75% top / cover no-repeat;
  /* 上余白は付けない（焼き込み見出しが画像上部にあるため）。下のみ */
  padding-bottom: 6rem;
}
/* テキスト＋ボタン＝最前面（z-index:2）。上部は焼き込み見出しぶん空ける。
   見出しは背景画像(cover)の拡縮に追従するため vw で確保（要微調整） */
#jibunshi .what-we-do-content { position: relative; z-index: 2; padding-inline: 5%; padding-top: 20vw; }
#jibunshi .what-we-do-wrapper .eyebrow { margin-bottom: 1rem; }
/* 切り出しタイトル画像を重ねる（インナー左端に左揃え・罫線の上）。位置はスクショから見た目で調整 */
#jibunshi .wd-title { position: absolute; top: 8vw; left: 0; width: 60%; margin: 0; z-index: 1; }
#jibunshi .wd-title-img { display: block; width: 100%; height: auto; }

/* セクションタイトル下の罫線（切り出しタイトルの直下）
   グラデ #623727→#e1b790。横1pxのため左→右(90deg)で可視化 */
#jibunshi .wd-divider { height: 1px; background: linear-gradient(90deg, #623727 0%, #e1b790 100%); margin-bottom: 2.5rem; }

/* 左テキスト */
#jibunshi .wd-copy p {
  font-family: var(--font-heading);
  /* 高齢者が主読者のため大きめに。PC22px〜スマホ18pxを画面幅で緩やかに補間（全幅一本化 2026-07-21）。
     1440px以上=22px上限 / 375px以下=18px下限。段差の出ないよう単一clampで全幅カバー。 */
  font-size: clamp(18px, calc(0.376vw + 16.59px), 22px);
  line-height: 2.2;
  color: oklch(var(--foreground-800));
  letter-spacing: .03em;
}
#jibunshi .wd-copy p + p { margin-top: 1.5rem; }

/* VOICE ブロック */
#jibunshi .wd-voice { margin-top: 2.5rem; }
#jibunshi .wd-voice-title {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: oklch(var(--foreground-900));
  padding-block: .85rem;
  margin-bottom: 1.5rem;
  /* 上下に罫線（2px） */
  border-top: 2px solid oklch(var(--primary-400) / .6);
  border-bottom: 2px solid oklch(var(--primary-400) / .6);
}
/* SP用のVOICE見出し画像（「— VOICE」と上下の罫線ごと焼き込み済み）。PCでは出さない */
#jibunshi .wd-voice-title-sp { display: none; }

/* 手書きの声＝画像。PCもSPも1声ずつ4枚を縦積み（横長1枚の旧review.pngは文字が小さく廃止）。
   現状は PC・SP とも review-N_sp.png を流用（スマホ画像を継続、PCにも当てる）。PC側(@1024)だけ縮小＋前面＋glow。 */
#jibunshi .wd-review-pc { display: flex; flex-direction: column; gap: 1rem; }
#jibunshi .wd-review-pc-img { display: block; width: 100%; height: auto; }
#jibunshi .wd-review-sp { display: none; }
#jibunshi .wd-review-sp-img { display: block; width: 100%; height: auto; }

/* ボタン画像（Canva余白見込みで見た目からサイズ想定） */
#jibunshi .wd-mission-btn { display: inline-block; margin-top: 2.5rem; transition: filter .3s; }
#jibunshi .wd-mission-btn:hover { filter: brightness(1.05); }
#jibunshi .wd-mission-btn img { display: block; width: 500px; max-width: 100%; height: auto; }

/* サンプル画像＝インナー内の最背面レイヤー（z-index:-1＝テキスト背面／背景の前）。位置・幅はスクショから見た目で推定 */
#jibunshi .wd-sample { position: absolute; z-index: -1; height: auto; pointer-events: none; }
/* 既定は非表示。下の2つのブロックで表示する＝〜1023px(縦積み) と 1024px〜(重ね)。
   この2つで全幅を覆うので実際には効かないが、指定漏れの幅で
   「幅指定の無い絶対配置の画像が中途半端な位置に巨大表示される」のを防ぐ保険。 */
#jibunshi .wd-sample-1,
#jibunshi .wd-sample-2 { display: none; }

/* ===== 〜1023px ＝SPデザイン支給に伴い実装（2026-07-17） =====
   PCは絶対配置で画像とテキストを重ねるレイアウトだが、こちらは素直な縦積みにする。
   DOM上はサンプル画像が先頭にあるので、flex＋order で見た目の順序を作る。
     見出し → 罫線 → コピー（右にsample-2を重ねる）→ VOICE → sample-1
   ※画像の幅は % だけで指定しない。1023px付近では画面が広く、% だけだと
     sample-2 が400px超まで肥大して画面を覆う。max-width で頭打ちにする。
   ※各画像の位置・大きさはデザイン画像からの目測。要微調整。 */
@media (max-width: 1023px) {
  /* flex+order は使わない。sample-1 を .wd-voice 内、sample-2 を .wd-copy 内へ
     移した結果、直接の子（見出し→罫線→コピー→VOICE）が既に表示したい順に並ぶため。
     また sample-2 は float で回り込ませるので、flex アイテムだと float が効かない。 */
  #jibunshi .what-we-do-content {
    padding-top: 2.5rem; /* 見出しを絶対配置から外すので、そのぶんの確保(20vw)は不要 */
  }

  /* 見出しは絶対配置をやめて先頭に置き、幅いっぱいに */
  #jibunshi .wd-title {
    position: static;
    width: 100%;
    margin-bottom: .75rem;
  }

  /* review は PC・SP とも wd-review-pc に一本化（2026-07-21 中前さん指示）。
     ここでは wd-review-pc を隠さない＝base の flex 表示のまま。
     wd-review-sp は将来スマホ専用画像を分ける場合の予備枠として残すが、現状は常に非表示。 */
  #jibunshi .wd-review-sp { display: none; }

  /* 1023px以下は手書き文字画像(review)より本文が小さく見えるため、本文を 18〜30px へ拡大し
     行間も 1.6 に詰める（2026-07-21 中前さん指示）。係数は「375px→18px / 1023px→30px」の直線。
     ※PC(1024px以上)は base の clamp(18〜22px)のまま。境界(1023⇄1024)で 30px⇄22px の差が出るが、
       ここは縦積み⇄横並びのレイアウト切替点なので許容。 */
  #jibunshi .wd-copy p {
    font-size: clamp(18px, calc(1.852vw + 11.06px), 30px);
    line-height: 1.6;
  }

  /* VOICEの見出しは画像(title_voice_sp.png)に差し替える（2026-07-17 中前さん指示）。
     画像に「— VOICE」と上下の罫線まで焼き込まれているので、テキスト側は両方とも隠す。
     ただし DOM からは消さない＝見出しの文言は読み上げ・検索向けに残す（画像は aria-hidden）。 */
  #jibunshi .wd-voice .eyebrow,
  #jibunshi .wd-voice-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  #jibunshi .wd-voice-title-sp { display: block; width: 100%; height: auto; }

  /* sample-1＝VOICE見出しと4つの声の間（DOM順どおり。index.php で .wd-voice 内に移動済み）。
     max-width が無いと1023px付近で920px相当まで伸びるので頭打ちにして中央へ */
  #jibunshi .wd-sample-1 {
    display: block;
    position: static;
    z-index: auto;
    width: 100%;
    max-width: 560px;
    margin: 1.5rem auto;
  }

  /* SPは重ねずに、コピーと画像を縦積みにする（2026-07-17 中前さん指示）。
     DOM上 sample-2 は1段落目と2段落目の間にあるので、order でコピー全体の下へ回す。
     ※PCでは絶対配置のまま（アンカーに position を付けるのはこのSPブロック内だけなので、
       PC側の基準＝.what-we-do-content は変わらない）。 */
  #jibunshi .wd-copy {
    display: flex;
    flex-direction: column;
  }
  #jibunshi .wd-sample-2-anchor {
    order: 1;         /* 段落(既定 order:0)より後ろ＝コピーの下 */
    position: static; /* 絶対配置の基準にはしない */
    height: auto;     /* 高さ0をやめる＝縦積みで場所を取る */
    width: 100%;
    /* 最背面へ（テキストの後ろに回す）。
       z-index は「位置指定された要素」か「flex/grid アイテム」にしか効かない。
       画像そのものは position:static かつ親(このアンカー)の中の素のブロックなので z-index が無視される。
       アンカーは .wd-copy(display:flex) の子＝flexアイテムなので、ここに置けば効く。
       重ね順の基準は .what-we-do-content(position:relative + z-index:2)＝
       テキストの後ろ・セクション背景の前に入る（PCと同じ扱い）。 */
    z-index: -1;
  }
  /* 画像はコピーの下（縦積み）だが、広い画面ほど上げてテキストの横に寄せ、
     狭くなるにつれて下がって最終的にコピーの真下(margin-top:0)に落ち着く（2026-07-17 中前さん指示）。
     PC(1024px〜)はテキストの横に重なるレイアウトなので、1023pxで急に下へ飛ばず滑らかにつながる。

     値の根拠：縦積みだと画像はコピー全体の下に来る。そこから
     「コピー全体の高さ −(マイナス) 1段落目の高さ」ぶん引き上げると1段落目の直後に並ぶ。
     1023px時 コピー432px / 1段落目144px → 差分 -288px。
     そこから375pxで0になる直線を引く：-44.44vw + 166.67px。
       1023px→-288px(1段落目の横) ／ 768px→-175px ／ 500px→-56px ／ 375px以下→0(真下)
     ※コピーの高さは font-size(clamp) で変わるので -288px は1023px時点の実測値。
       上げ幅が合わなくなったらこの数値を測り直す。 */
  #jibunshi .wd-sample-2 {
    display: block;
    position: static; /* 流れの中に置く。重ね順は親のアンカー側で指定（z-indexはここでは効かない） */
    width: 55%;
    max-width: 360px;
    margin: clamp(-288px, calc(-44.44vw + 166.67px), 0px) 0 0 auto; /* margin-left:auto で右寄せ */
  }

  /* VOICEの上余白を詰める（2026-07-17 中前さん指示）。
     ベースの 2.5rem は、直前がテキストだったPC時代の値。
     SPでは直前が sample-2（右寄せの画像）になり、画像の下端との間が空きすぎるため。 */
  #jibunshi .wd-voice { margin-top: 0; }
}

@media (min-width: 1024px) {
  /* 下余白は 5rem〜14rem を画面幅に比例させる（2026-07-17 中前さん指示）。
     sample-1 は絶対配置＝高さを持たない（レイアウトを押し広げない）ので、
     下にはみ出すぶんをラッパーの余白で確保する必要がある。
     はみ出し量は top:calc(15vw+3rem) と width:28%(=inner基準) の両方が画面幅に連動するため、
     固定値にすると狭い画面では余白過多・広い画面では足りない。
     係数は「1024px→5rem / 1920px→14rem」を通る直線から算出：16.07vw - 84.57px。
       1024px→5rem ／ 1200px→6.8rem ／ 1440px→9.2rem ／ 1920px以上→14rem(頭打ち) */
  #jibunshi .what-we-do-wrapper { padding-bottom: clamp(5rem, calc(16.07vw - 84.57px), 14rem); }

  /* 左右余白は 5%。.inner は max-width:1620px なので、1620px以下では inner が画面幅いっぱいになり、
     0 だとテキストが端に張り付く（1418pxで余白ゼロ＝ご指摘の症状）。
     下限は2remで、これを下回らないようにする（1024pxで51px＞32remなので実質5%が効く）。
     ※絶対配置の基準はパディングボックス＝この指定では動かないので、
       wd-title(left:-2vw) や sample-2(right:0) の位置には影響しない。
     ※padding-top は「見出しが絶対配置のとき」に高さを空けるためのもの。
       〜1023px は見出しをフロー配置に変えたので不要＝ここ(1024px〜)にだけ置く。 */
  #jibunshi .what-we-do-content { padding-inline: max(2rem, 5%); padding-top: 16vw; }
  #jibunshi .wd-title { top: 7vw; width: 46%; left: -2vw; }
  /* wd-copy/wd-voice はコンテナの60%幅（従来通り＝罫線の右端基準） */
  #jibunshi .wd-copy,
  #jibunshi .wd-voice { max-width: 60%; }
  /* 罫線だけ：左端は画面いっぱい(x=0)、右端はwd-copy右端(コンテナ左+60%)に揃える */
  #jibunshi .wd-divider { max-width: none; width: calc(50vw + 10%); margin-left: calc(50% - 50vw); }
  /* 既定の非表示(.wd-sample-1,.wd-sample-2)と同じ詳細度で上書きする必要がある */
  /* 縦揃え：sample-2 top = 罫線(=content padding-top 16vw)、sample-1 top = wd-copy相当 */
  /* sample-1：幅を32%→28%に縮小し、left を 24%→32% へ（2026-07-17 中前さん指示）。
     幅を縮めると高さも比例して縮むので、下端がVOICEのテキストに重なるのが解消する。
     右端は 32+28=60% ＝ テキスト(.wd-copy/.wd-voice の max-width:60%)の右端とちょうど揃う。 */
  /* review（手書きの声）は wd-copy p と同程度まで少し小さく（2026-07-21 中前さん指示）。
     画像との重なりは glow ではなく、下の wd-sample のレスポンシブ移動で回避する。 */
  #jibunshi .wd-review-pc { max-width: 88%; }

  /* 狭いPC幅で上のテキストと画像が重なるため、幅が狭まるほど
     新聞(sample-1)を右へ・経営者(sample-2)を下へ 徐々に逃がす（2026-07-21 中前さん指示）。
     広い幅では従来位置（clampの下限側）に戻る。基準1400px。 */
  #jibunshi .wd-sample-1 { display: block; width: 29%; left: clamp(38%, calc(32% + (1400px - 100vw) * 0.15), 48%); top: calc(15vw + 3rem); }
  /* 36%→28%（2026-07-17 中前さん指示）。1920pxで583px→454px。
     隣の sample-1 も28%なので、2枚の大きさが揃う。
     right は 0 ではなく padding-inline と同じ値。絶対配置の right:0 は
     「パディングボックスの右端」＝padding の外側を指すので、0のままだと
     テキストには余白があるのに画像だけ画面の端に貼り付く（1418pxで71pxはみ出す）。 */
  #jibunshi .wd-sample-2 { display: block; width: 25%; right: max(2rem, 5%); top: clamp(16vw, calc(16vw + (1400px - 100vw) * 0.12), 26vw); }
}


/* ==========================================================================
   04 SERVICE
   ========================================================================== */
#jibunshi .service-wrapper {
  background: #fff;
  padding-block: 5rem;
  padding-inline: 2rem; /* 端寄せ防止の最小余白（インナー1600は内側余白なし） */
}
#jibunshi .service-inner { position: relative; }
/* 装飾本は罫線(divider)の右端に吸着。divider基準の絶対配置で、タイトル高さが変わっても常に線に乗る */
/* 装飾本は罫線の右端に「常に同じ形で」吸着させる。
   オフセットを px 固定（旧 right:-25px / bottom:-115px）にすると、画像だけが % で縮むのに
   ずれ幅が変わらないため、重なりが痩せていき、画像高が115pxを割る画面幅で罫線から下へ落ちた。
   transform の % は要素自身のサイズ基準なので、画像が縮んでも重なり比率が保たれる＝落ちない。
   bottom / width の実数は中前さんの実測調整値（2026-07-17）。 */
#jibunshi .service-sample {
  position: absolute;
  right: 0;
  bottom: 10px;
  width: 14%;
  max-width: 200px;
  height: auto;
  transform: translate(16%, 62.5%);
  z-index: 2;
  pointer-events: none;
}
@media (min-width: 768px) {
  #jibunshi .service-sample { bottom: 28px; width: 14%; }
}
@media (min-width: 1024px) {
  #jibunshi .service-sample { bottom: 22px; width: 10%; }
}

/* タイトル画像（中央）＋下罫線＋リード。img は wd-title-img と統一、違いは中央寄せ。
   value(why-us)タイトルも同じスタイルを共有 */
/* service-titleはinner左端に左寄せ。max-width固定だと一定幅まで縮まないため、
   inner比の割合指定にして常に比例縮小させる（1920時: inner1620 × 72% ≒ 1168px＝旧73rem相当） */
#jibunshi .service-title { width: 72%; margin: 0 0 1.25rem; }
#jibunshi .service-title-img,
#jibunshi .value-title-img { display: block; width: 100%; height: auto; }
/* ピル（角丸は画像 title_why-us.png に焼き込み）の左カーブを画面外へ逃がす。はみ出しは html の overflow-x:clip でクリップ。
   抜き量は .value-main の幅に依存させない。旧 calc(50% - 46vw) は 50% が .value-main 基準だったため、
   .value-body の grid-template-columns を変えるたびに抜き量が変わり、左カーブが画面内に出ていた。
   .value-container は max-width:1600px・中央寄せ＝左端は max(0, 50vw - 800px)。
   そこから --pill-bleed ぶん左へ出す＝画面幅やカラム比によらず常に一定の抜き量になる。 */
#jibunshi .value-title {
  --pill-bleed: 245px; /* 角丸半径(約128px)より大きくすること。小さいとカーブが見える */
  margin: 0 29% 1.25rem calc(-1 * var(--pill-bleed) - max(0px, 50vw - 800px));
}
/* <1024ではvalue-bodyが1カラムでvalue-mainが全幅になり、上のcalcだと抜け量ゼロ＝pill全表示。
   スマホ/タブレットでも左に抜けさせる（左カーブを画面外へ／右カーブは画面内）。
   -1.5rem＝抜け量、margin-right＝右カーブの内側位置。はみ出しは html の overflow-x:clip でクリップ */
@media (max-width: 1023px) {
  #jibunshi .value-title {
    margin-left: calc(40% - 50vw - 1.5rem);
    /* margin-right はベース(29%)のまま */
  }
}
#jibunshi .service-divider { position: relative; height: 1px; background: linear-gradient(90deg, #623727 0%, #e1b790 100%); margin-bottom: 1.5rem; }
#jibunshi .service-lead {
  text-align: center;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.625;
  color: oklch(var(--foreground-700));
  margin-bottom: 3rem;
}

/* 3カラム：各[タイトル(テキスト)／カード画像／ボタン画像] */
#jibunshi .service-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
/* filter は transition に入れないこと。カードに filter が付くと内側がクリップされ、
   中の写真の scale(1.03) が切られる（そのため filter は .service-card-desc だけで使う） */
#jibunshi .service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1),
              transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* タイトルは画像化。下線（罫線）は要素として残す */
#jibunshi .service-card-title {
  width: 66%;
  padding-bottom: 1rem;
  border-bottom: 1px solid oklch(var(--primary-300) / .55);
}
#jibunshi .service-card-title-img { display: block; height: 46px; width: auto; max-width: 100%; margin-inline: auto; }
/* カード2 相続＝緑の下線 */
#jibunshi .service-card--inheritance .service-card-title { border-bottom-color: rgb(110 139 74 / .5); }

/* SPでは下線を出さない（2026-07-17 中前さん指示）。
   タイトル画像側にも線が入っているため、幅の狭いSPでは線が重なって見えるため。 */
@media (max-width: 1023px) {
  #jibunshi .service-card-title {
    padding-bottom: 0;
    border-bottom: none;
  }
}
/* ※相続カード(緑)のCTAグロー色は、カードホバーの :has ブロック側で上書き（順序の都合） */

/* カードとボタンは幅を統一（ともに列幅100%） */
/* ※ clip-path で右端を切る案は不可（2026-07-17 に試して撤回）。
   カード画像は角丸が焼き込まれている（四隅の alpha=127）ため、inset() で右端を切ると
   右上・右下の丸みが垂直に断ち切られて「角丸でなくなる」。 */
#jibunshi .service-card-img { display: block; width: 100%; height: auto; margin-bottom: 1.5rem; }
/* 説明画像(desc-*)＋その上にボタン画像(cta_*)を重ねる。margin-top:autoでカード下端に揃える。
   カード写真(.service-card-img)の「兄弟」であって祖先ではないので、
   ここに filter を付けても写真の scale(1.03) は切られない（＝影を残せる数少ない場所） */
#jibunshi .service-card-desc {
  position: relative;
  width: 100%;
  margin-top: auto;
  transition: filter .6s cubic-bezier(.16, 1, .3, 1);
}
#jibunshi .service-card-desc-img { display: block; width: 100%; height: auto; }
/* ボタンは説明画像の上に重ねる。位置(bottom)・幅は見た目で調整 */
#jibunshi .service-card-btn {
  position: absolute;
  left: 76%;
  bottom: 0%;
  transform: translateX(-50%);
  width: 32%;
  z-index: 2;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s cubic-bezier(.16, 1, .3, 1);
}
/* ボタンのホバー演出は「カードホバー」側でまとめて定義（下部の :has ブロック参照） */
#jibunshi .service-card-btn img { display: block; width: 100%; height: auto; }

/* ===== ボタンホバーで「選ばれたカード」を演出（:has でボタン→カード/グリッドに波及） =====
   他カードは静かに減光し、選ばれたカードだけを浮上させて前面に。
   高額商材向けに、動きは小さく・減速はゆっくり（ease-out-expo系）。
   ※:has() 非対応の古いブラウザでは演出が無効になるだけ（表示は正常） */
/* 写真も filter は使わない（クリップされるため）。transition は transform だけでよい */
#jibunshi .service-card-img {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
/* 選ばれていないカードを控えめに沈める。
   ここで filter を使わないこと。filter が付いた要素は内側の描画をその要素の枠でクリップする仕様で、
   中のカード画像が scale(1.03) で拡大しても、はみ出た分がカードの枠で切られてしまう。
   しかも filter は transition の対象なので、ホバー直後は「全体が見えた直後に外側が切られる」
   というちらつきになる（実際に発生）。沈める表現は opacity だけで足りる。 */
#jibunshi .service-grid:has(.service-card:hover) .service-card {
  opacity: .5;
}
/* 選ばれたカードは浮上＋前面。filter は上で使わなくなったので打ち消しも不要 */
#jibunshi .service-grid:has(.service-card:hover) .service-card:hover {
  opacity: 1;
  transform: translateY(-10px);
  z-index: 3;
}
/* 説明画像にだけタイトル色の影を落とす（2026-07-17 中前さん指示）。
   カード全体や写真に filter を付けると内側がクリップされて写真の拡大が切られるが、
   .service-card-desc は写真の兄弟なので影響しない。ここだけ影を残せる。
   色はタイトル下線と揃える（既定=金 / 相続カードだけ緑）。
   ※drop-shadow の色に oklch(var(--primary-300) / ...) を使わないこと。
     --primary-300 は「0.76 0.06 42」という数値の羅列で、oklch() に渡して初めて色になる。
     この形はブラウザが影の色を解決できず、数秒後に影が消える挙動になった（実際に発生。
     border-color では動くのに drop-shadow では消える）。
     そのため同じ色を sRGB で直書きする。
     rgb(211 165 148) = oklch(0.76 0.06 42) = --primary-300 と同値。
     ※--primary-300 を変えたらこの数値も追随させること。 */
#jibunshi .service-card:hover .service-card-desc {
  filter: drop-shadow(0 6px 14px rgb(211 165 148 / .55));
}
#jibunshi .service-card--inheritance:hover .service-card-desc {
  filter: drop-shadow(0 6px 14px rgb(110 139 74 / .5));
}
/* 主役のカード画像だけ、わずかにズーム。
   以前は drop-shadow で影も付けていたが外した（2026-07-17 中前さん判断）。
   カード画像の右端が中途半端に終わっている（inheritance.png は右端1pxが半透明 alpha:90、
   business-succession.png は右端2pxが透明。filial-piety.png だけ正常）。
   drop-shadow はアルファチャンネルを読んで影を描くフィルタなので、掛かると画像がフィルタ用に
   再描画され、その半透明の縁が白いカード背景と混ざって縦の白い線として浮き出ていた。
   外せば通常描画に戻り、縁は目立たない。
   ※本来は画像の書き出し直しが筋だが、Canvaに配置された時点で端が欠けており元素材も無いため、
     影を諦める判断。画像が直ったら filter を戻してよい。
   ※clip-path で右端を切る案は不可。角丸が焼き込まれているので丸みが垂直に断ち切られる。 */
#jibunshi .service-card:hover .service-card-img {
  transform: scale(1.03);
}

/* フッターの「事業継承アルバム」等から飛んで来たとき、該当カードを一度だけ光らせる。
   PC(3カラム)は3枚が同じ行にあり着地位置で区別が付かないため、どれを指して来たかを示す。

   グローに filter(drop-shadow) は使わないこと。filter が付いた要素は内側の描画を
   その要素の枠でクリップするので、中のカード画像の scale(1.03) が切られる
   （ホバーで実際に起きた問題と同じ）。outline はクリップを起こさないので代わりに使う。
   色は --target-glow で切り替える（相続カードだけ緑テーマ）。 */
@keyframes jb-card-target {
  0%   { transform: translateY(0);     outline-color: transparent; }
  25%  { transform: translateY(-10px); outline-color: var(--target-glow); }
  75%  { transform: translateY(-10px); outline-color: var(--target-glow); }
  100% { transform: translateY(0);     outline-color: transparent; }
}

#jibunshi .service-card:target {
  --target-glow: rgba(224, 190, 145, .9);
  outline: 2px solid transparent;
  outline-offset: 6px;
  border-radius: 12px; /* outline を角丸に沿わせる（カード画像の角丸に合わせた見た目） */
  animation: jb-card-target 2.4s cubic-bezier(.16, 1, .3, 1) 1;
  z-index: 3;
}

/* 相続カードは緑テーマ */
#jibunshi .service-card--inheritance:target {
  --target-glow: rgb(140 172 100 / .95);
}

@media (prefers-reduced-motion: reduce) {
  #jibunshi .service-card:target { animation: none; }
}
/* カードにマウスが乗ったらボタンも光らせ、クリック先（＝ボタンのみ）を示す。
   ボタンは浮かせず、その場で拡大＋グロー（translateX(-50%)保持で中心が動かない） */
#jibunshi .service-card:hover .service-card-btn {
  transform: translateX(-50%) scale(1.05);
  filter: brightness(1.07) drop-shadow(0 0 12px rgba(224, 190, 145, .75));
}
/* 相続カード(緑テーマ)はグローも緑に。上のゴールドと同詳細度のため直後に置いて上書き */
#jibunshi .service-card--inheritance:hover .service-card-btn {
  filter: brightness(1.07) drop-shadow(0 0 12px rgb(140 172 100 / .8));
}
@media (prefers-reduced-motion: reduce) {
  #jibunshi .service-grid:has(.service-card:hover) .service-card:hover { transform: none; }
  #jibunshi .service-card:hover .service-card-img { transform: none; }
}

@media (min-width: 768px) {
  #jibunshi .service-wrapper { padding-block: 7rem; }
  #jibunshi .service-lead { font-size: 1.35rem; }
}
@media (min-width: 1024px) {
  #jibunshi .service-grid { grid-template-columns: repeat(3, 1fr); gap: 3rem; }
}


/* ==========================================================================
   アコーディオン開閉（05 選ばれる理由 / 09 FAQ 共通の仕組み）
   ========================================================================== */
#jibunshi .acc-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s ease-out, opacity .5s ease-out;
}
#jibunshi .acc-body > div { overflow: hidden; }
#jibunshi .acc-body.is-open { grid-template-rows: 1fr; opacity: 1; }
/* FAQ は開いた時に下余白（旧 pb-6 相当） */
#jibunshi .acc-body--faq.is-open { padding-bottom: 1.5rem; }


/* ==========================================================================
   05 WHY US
   ========================================================================== */
#jibunshi .value-wrapper {
  /* コルクテクスチャ背景（旧・黄色背景から変更）。背景色は付けない。
     左右余白は付けない＝06比較を全幅バナーにできる。05側の余白はvalue-containerへ */
  background: url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/bg_value-wrapper.png?tr=n-base,t-true,w-1920") center top / cover no-repeat;
  padding-block: 5rem;
}
#jibunshi .value-container { width: 100%; max-width: 1600px; margin-inline: auto; }

/* セクション英字ラベルを見出しの上に浮かせる配置（PC時） */
#jibunshi .eyebrow--float { margin-bottom: 2rem; }

#jibunshi .value-head { margin-bottom: 3.5rem; }
#jibunshi .value-head .section-title { margin-bottom: 1.5rem; }
#jibunshi .value-lead {
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.625;
  color: oklch(var(--foreground-700));
  max-width: 36rem;
}

/* WHY US 本体：左＝VALUE3ブロック縦積み／右＝窓・テキスト・ボタン */
#jibunshi .value-body { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
#jibunshi .value-list { display: flex; flex-direction: column; }
/* VALUE行：[アイコン＋テキスト画像]＋[サンプル画像]、下線＝金色 */
#jibunshi .value-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #c8a45a; /* TODO: 金色未指定。暫定値 */
}
#jibunshi .value-item-txt { flex: 1; margin: 0; }
/* PC＝アイコン＋文が1枚(txt_valueN.png) ／ SP＝2枚(ico_valueN + txt_valueN_sp)を縦積み。切替は下のSPブロック */
#jibunshi .value-item-sp { display: none; }
/* アイコンを揃える＝各txt画像を同じ縮尺で表示。VALUE02は2行ぶん背が高いので高さも高め（縮尺を合わせる）。値は暫定 */
#jibunshi .value-item-txt-img { display: block; width: 100%; height: auto; }
/* 3枚のtxt画像の高さをVALUE02(2行・約151.7px @692px幅)に揃える。
   素の高さ 01=114.2px / 03=89.9px なので、差の半分を上下余白に（value-item自体のpad>とは別＝重複回避）。
   ※固定pxのため大きく幅が変わると微差が出る（その場合は数値調整 or %/vw化） */
#jibunshi .value-item:nth-child(1) .value-item-txt-img { padding-block: 18.75px; }
#jibunshi .value-item:nth-child(3) .value-item-txt-img { padding-block: 30.9px; }
/* VALUE01は img_value1 を削除しsampleが無いため txt が全幅に広がり 02/03 より大きく見えた。
   02/03 のサンプル画像と同じ幅の空きを ::after で作り、txt幅を 02/03 に揃える（2026-07-21 中前さん指示）。
   ※SP(縦積み)では下の @max-width:1023 で無効化する。 */
#jibunshi .value-item:nth-child(1)::after { content: ''; flex-shrink: 0; width: 26%; max-width: 280px; }
/* VALUE02・03 のサンプル画像に金グラデの縁取り */
#jibunshi .value-item:nth-child(2) .value-item-sample,
#jibunshi .value-item:nth-child(3) .value-item-sample {
  border: 3px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, #e8d18f 0%, #c9a24a 50%, #a97d2e 100%) border-box;
}
/* 上限 170px→280px（2026-07-17 中前さん指示）。value-side を外して左を広げた(9fr 1fr)ぶん、
   サンプル画像が相対的に小さく見えるため。26%(=359px)まで開放しないのは、
   画像が縦に伸びて行の高さが跳ね上がり、テキストとのバランスが崩れるため。 */
#jibunshi .value-item-sample { flex-shrink: 0; width: 26%; max-width: 280px; height: auto; }
/* VALUE03：txtの下にクリエイター画像を右寄せで収めるラッパー */
#jibunshi .value-item-txtwrap { flex: 1; }
/* 上限 30rem→52rem（2026-07-17 中前さん指示）。実寸 480px→832px。
   ※配信幅も合わせて w-560→w-1090（元画像の実解像度）に上げてある。
     560pxのままだと832pxへ引き伸ばされて荒くなるため。 */
#jibunshi .value-creater { display: block; width: 100%; max-width: 52rem; height: auto; margin-top: 1rem; margin-left: auto; }

/* SPは横並びをやめて上下2段に分ける（2026-07-17 中前さん指示）。
   横並びのままだとテキスト画像もサンプル画像(幅26%/最大170px)も小さすぎて読めないため、
   縦に積んで両方を画面幅いっぱいに使う。 */
@media (max-width: 1023px) {
  #jibunshi .value-item {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
    padding-top: 2.5rem;
  }
  /* SPは縦積みなので、VALUE01の txt幅揃え用スペーサー(::after)は不要＝消す（余分な空きgapを出さない） */
  #jibunshi .value-item:nth-child(1)::after { display: none; }
  /* 上下に並べたぶん、サンプル画像は大きく（26%→画面幅いっぱい・中央） */
  #jibunshi .value-item-sample {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
  }
  /* 見出しを ico_valueN ＋ txt_valueN_sp の2枚に差し替えて縦積み（2026-07-17 中前さん指示）。
     PC用の1枚(txt_valueN.png)はアイコンと文が横並びに焼き込まれていて、SP幅だと文字が小さくなるため。 */
  #jibunshi .value-item-txt-img { display: none; }
  #jibunshi .value-item-sp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
  }
  /* アイコン（VALUE 01 の丸バッジ）。元360pxだが等倍で置くと大きすぎるので実寸で抑える */
  #jibunshi .value-item-sp-ico { display: block; width: 84px; height: auto; }
  #jibunshi .value-item-sp-txt { display: block; width: 100%; height: auto; }

  /* 横並び時に3枚のtxt画像の高さを揃えるための余白は、縦積みでは余白が空くだけなので消す
     （PC用画像自体を非表示にしたので実質不要だが、指定が生き残らないよう明示的に消す） */
  #jibunshi .value-item:nth-child(1) .value-item-txt-img,
  #jibunshi .value-item:nth-child(3) .value-item-txt-img {
    padding-block: 0;
  }
  /* 音楽クリエイター紹介は右寄せをやめて幅いっぱいに */
  #jibunshi .value-creater { max-width: 100%; margin-left: 0; }
}

#jibunshi .value-side { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
#jibunshi .value-window { display: block; width: 100%; height: auto; }
#jibunshi .value-side-text {
  font-family: var(--font-heading);
  color: #66361a;
  text-align: center;
  font-size: 1.0625rem;
  letter-spacing: .04em;
}
#jibunshi .value-side-btn { display: block; width: 100%; max-width: 500px; margin-top: -1.2rem; transition: filter .3s; }
#jibunshi .value-side-btn:hover { filter: brightness(1.05); }
#jibunshi .value-side-btn img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
  /* 右カラム(.value-side＝窓の写真とボタン)は非表示中（2026-07-17）。
     空いたぶん左を広げてバランスを取る（1.65fr 1fr → 9fr 1fr）。
     ※value-title のピルの抜き量はカラム比に依存しない式に変えてあるので、ここを変えても崩れない。
     ※.value-side を復活させるときは 1.65fr 1fr に戻すこと。 */
  #jibunshi .value-body { grid-template-columns: 9fr 1fr; gap: 4rem; }
  #jibunshi .value-side { margin-top: 16%; }
}

#jibunshi .value-accordions {
  border-top: 1px solid oklch(var(--background-200) / .6);
  margin-bottom: 6rem;
}
#jibunshi .acc-item { border-bottom: 1px solid oklch(var(--background-200) / .6); }
#jibunshi .acc-heading { margin: 0; font-weight: 400; }
#jibunshi .acc-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: oklch(var(--background-50));
  text-align: left;
  cursor: pointer;
  transition: background-color .3s;
}
#jibunshi .acc-trigger:hover { background: oklch(var(--accent-50) / .5); }
#jibunshi .acc-head { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
#jibunshi .acc-no {
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: .4em;
  color: oklch(var(--foreground-500));
  white-space: nowrap;
}
#jibunshi .acc-badge {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: oklch(var(--background-100));
  color: oklch(var(--primary-700));
}
#jibunshi .acc-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
#jibunshi .acc-titles { min-width: 0; }
#jibunshi .acc-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  line-height: 1.375;
  color: oklch(var(--foreground-950));
}
#jibunshi .acc-sub {
  display: block;
  margin-top: .25rem;
  font-size: 13px;
  line-height: 1.625;
  color: oklch(var(--accent-700));
}
#jibunshi .acc-icon {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid oklch(var(--background-300));
  background: oklch(var(--background-100));
  color: oklch(var(--foreground-600));
  flex-shrink: 0;
  transition: all .3s;
}
#jibunshi .acc-panel {
  padding: 0 1.5rem 1.5rem;
  padding-left: calc(1.5rem + 120px + 1rem);
}
#jibunshi .acc-panel p {
  font-size: 13px;
  line-height: 2;
  color: oklch(var(--foreground-700));
  max-width: 36rem;
}


/* ==========================================================================
   06 COMPARISON
   ========================================================================== */
#jibunshi .value-compare-head { margin-bottom: 2.5rem; }
#jibunshi .value-compare-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1.375;
  color: oklch(var(--foreground-950));
}
#jibunshi .value-compare-lead {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.625;
  color: oklch(var(--primary-700));
}
/* comparison.png は banner-full（全幅バナー）。value-compareはコンテナ外＝全幅なのでbreak-out不要。表との間隔のみ */
#jibunshi .value-compare .banner-full { margin: 0 0 3rem; }
/* 比較表を画像(table.png)化。上限1280px・中央 */
/* 表は最大1280px中央。<1280pxでも端に付かないよう常に左右2rem（max-widthに余白ぶんを内包） */
#jibunshi .compare-table-wrap { width: 100%; max-width: calc(1280px + 4rem); margin-inline: auto; padding-inline: 2rem; }
#jibunshi .compare-table-img { display: block; width: 100%; height: auto; }

/* PCでは表が大きすぎるので80%に抑える（2026-07-17 中前さん指示）。
   SP・タブレットは上のベース(100%)のまま。表が密なので縮めると読めなくなるため。
   width だけ80%にしても、広いモニターでは max-width 側が上限になって効かない。
   上限も1280px→1024px(=80%)に下げて、どの画面幅でも約80%に揃える。 */
@media (min-width: 1024px) {
  #jibunshi .compare-table-wrap { width: 80%; max-width: calc(1024px + 4rem); }
}
#jibunshi .compare-table { width: 100%; border-collapse: collapse; }
#jibunshi .compare-table thead tr {
  border-bottom: 1px solid oklch(var(--background-200) / .7);
  background: oklch(var(--background-100));
}
#jibunshi .compare-table th {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .05em;
}
#jibunshi .compare-table th.compare-item-col { text-align: left; color: oklch(var(--foreground-700)); }
#jibunshi .compare-table th.compare-general-col { text-align: center; color: oklch(var(--foreground-600)); }
#jibunshi .compare-table th.compare-us-col { text-align: center; color: oklch(var(--primary-700)); font-weight: 500; }
#jibunshi .compare-table tbody tr { border-bottom: 1px solid oklch(var(--background-200) / .5); }
#jibunshi .compare-table tbody tr:last-child { border-bottom: 0; }
#jibunshi .compare-table td { padding: 1rem 1.5rem; }
#jibunshi .compare-table td.compare-item { font-size: .875rem; color: oklch(var(--foreground-800)); }
#jibunshi .compare-table td.compare-mark { text-align: center; }
#jibunshi .compare-mark-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-family: "Cormorant Garamond", serif;
  font-size: .875rem;
}
#jibunshi .compare-mark-badge--soso { background: oklch(var(--background-200)); color: oklch(var(--foreground-600)); }
#jibunshi .compare-mark-badge--no   { background: oklch(var(--foreground-200)); color: oklch(var(--foreground-500)); }
#jibunshi .compare-mark-badge--best { background: oklch(var(--accent-100)); color: oklch(var(--accent-700)); font-weight: 500; }

#jibunshi .value-outro { margin-top: 3rem; max-width: 36rem; }
#jibunshi .value-outro p {
  font-family: var(--font-heading);
  font-size: 15px;
  line-height: 2.2;
  letter-spacing: .025em;
  color: oklch(var(--foreground-700));
}
#jibunshi .value-outro p + p { margin-top: 1.5rem; }
#jibunshi .value-outro p + p.value-outro-strong { margin-top: 1rem; color: oklch(var(--foreground-900)); font-weight: 500; }

@media (min-width: 640px) {
  #jibunshi .acc-trigger { gap: 1.5rem; }
  #jibunshi .acc-head { gap: 1rem; width: 120px; }
}
@media (min-width: 768px) {
  #jibunshi .value-wrapper { padding-block: 7rem; }
  #jibunshi .value-container { padding-inline: 2.5rem; }
  #jibunshi .eyebrow--float { position: absolute; margin-top: -2.5rem; margin-bottom: 0; }
  #jibunshi .value-head { margin-bottom: 0; }
  #jibunshi .value-head .section-title { font-size: 42px; }
  #jibunshi .value-lead { font-size: 1.125rem; }
  #jibunshi .value-accordions { margin-bottom: 8rem; }
  #jibunshi .acc-trigger { padding: 2rem; }
  #jibunshi .acc-title { font-size: 1.25rem; }
  #jibunshi .acc-sub { font-size: .875rem; }
  #jibunshi .acc-panel { padding: 0 2rem 2rem; padding-left: calc(2rem + 120px + 1.5rem); }
  #jibunshi .acc-panel p { font-size: .875rem; }
  #jibunshi .value-compare-head { margin-bottom: 3.5rem; }
  #jibunshi .value-compare-title { font-size: 24px; }
  #jibunshi .value-compare-lead { font-size: 1.125rem; }
  #jibunshi .compare-table th { font-size: 1rem; padding: 1.25rem 2rem; }
  #jibunshi .compare-table td { padding: 1.25rem 2rem; }
  #jibunshi .compare-table td.compare-item { font-size: 15px; }
  #jibunshi .value-outro { margin-top: 4rem; }
  #jibunshi .value-outro p { font-size: 1rem; }
}
@media (min-width: 1024px) {
  #jibunshi .value-container { padding-inline: 3.5rem; padding-bottom: 8rem; }
}


/* ==========================================================================
   07 HOW TO MAKE（制作の流れ）
   ========================================================================== */
#jibunshi .flow-wrapper {
  position: relative;
  /* 背景はグラデ（90°・#623727→#e1b790）。見出しは h2 画像(title_how-to-make.png)で表示 */
  background: linear-gradient(90deg, #623727 0%, #e1b790 100%);
  padding-block: 4rem;
}
#jibunshi .flow-title { margin: 0 0 2.5rem; }
/* h2画像は比例縮小で統一（height固定だと縮まないため割合指定。1920時: inner1620 × 18.7% ≒ 303px＝旧9rem相当） */
#jibunshi .flow-title-img { display: block; width: 18.7%; max-width: 100%; height: auto; }
/* flow カードを flex-wrap 横並び。焼き込み見出しの下に来るよう上側を空ける（vwで背景に追従・暫定） */
#jibunshi .flow-steps {
  display: flex;
  flex-wrap: nowrap;          /* 1行維持（折返しの崩れ防止） */
  align-items: center;
  overflow-x: auto;           /* 収まらない幅は横スクロール */
  -webkit-overflow-scrolling: touch;
}
/* カード＋三角を1グループ。収まる幅では grow で inner いっぱいに、収まらなければ最小幅で横スクロール */
#jibunshi .flow-group { display: flex; align-items: center; flex: 1 0 130px; }
/* 最後のカード(10)は三角が無いぶん広くなる→三角幅の余白を足して他と幅・高さを揃える */
#jibunshi .flow-group:last-child { padding-right: 20px; }
#jibunshi .flow-step { flex: 1 1 auto; min-width: 0; }
#jibunshi .flow-step-img { display: block; width: 100%; height: auto; }
/* 各カード間の右三角（HTML上、10の後には付けていない）。
   グラデ塗り135°(#623727→#e1b790)＝clip-pathで三角化 */
#jibunshi .flow-arrow {
  flex: 0 0 auto;
  width: 20px;
  height: 26px;
  background: linear-gradient(135deg, #623727 0%, #e1b790 100%);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (min-width: 768px) {
  #jibunshi .flow-wrapper { padding-block: 5rem; }
}


/* ==========================================================================
   08 VOICE（お客様の声）
   ========================================================================== */
#jibunshi .voice-wrapper {
  /* コルクテクスチャ（#fffbf5ベース＋cover）。左右余白なしで全幅。プロパティ分割で cover を確実に適用 */
  background-color: #fffbf5;
  /* t-true でCanva由来の左右透明余白を除去（1920→1747px）。cover時に端まで埋まる */
  background-image: url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/bg_value-wrapper.png?tr=n-base,t-true,w-1920");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: 5rem;
}
/* 左：事例写真／右：タイトル・罫線・引用・ボタン縦積み */
#jibunshi .voice-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: flex-start; }
#jibunshi .voice-case-img { display: block; width: 100%; height: auto; }
#jibunshi .voice-text { display: flex; flex-direction: column; align-items: flex-start; margin-left: 3%; }
#jibunshi .voice-title-img { display: block; width: 75%; max-width: 100%; height: auto; }
#jibunshi .voice-divider { width: 100%; height: 1px; background: oklch(var(--foreground-400) / .4); margin-top: 2rem; margin-bottom: 6rem; }
#jibunshi .voice-quote-img { display: block; width: auto; max-width: 86%; height: auto; }
/* 事例一覧ボタン＋前後ナビを両端に横並び。高さを揃える（stretch）＝btn_casesの高さにprev-nextを合わせる */
#jibunshi .voice-btns { display: flex; align-items: stretch; justify-content: space-between; width: 100%; gap: 1rem; margin-top: 10rem; }
#jibunshi .voice-btn { display: flex; transition: filter .3s; }
#jibunshi .voice-btn:hover { filter: brightness(1.05); }
#jibunshi .voice-btn img { display: block; width: 455px; max-width: 100%; height: auto; }
/* btn_casesは画像内に上下余白があるため、prev-nextは見えているボタン高さに合わせて固定高に（暫定）
   ※btn_casesを上下余白なしで書き出せば align-self:stretch で自動一致にできる */
/* 前後ナビは一旦非表示（カルーセル実装まで） */
#jibunshi .voice-prev-next { display: none; align-self: center; align-items: center; flex: 0 0 auto; }
#jibunshi .voice-prev-next img { display: block; height: 80px; width: auto; }

@media (min-width: 768px) {
  #jibunshi .voice-wrapper { padding-block: 7rem; }
}
@media (min-width: 1024px) {
  #jibunshi .voice-cols { grid-template-columns: 4fr 5fr; gap: 2rem; }
  /* 罫線はデザイン通り、左端を事例写真の右端にくっつける。
     voice-text の margin-left:3% と グリッドの gap:2rem の両方を打ち消して左へ伸ばす */
  #jibunshi .voice-divider { width: calc(100% + 2rem + 3%); margin-left: calc(-2rem - 3%); }
}

/* ===== SP調整（2026-07-17 中前さん指示） =====
   .voice-text の margin-left:3% は「PCで写真の右隣に置く」ための指定だが、
   1カラムになるSPでは中身が丸ごと右へ寄るだけ（375pxで11px／1023pxで31px）。
   罫線もそのぶん左端が内側に入り、タイトル・引用と縦のラインが揃わない。
   → SPでは margin-left を打ち消して、左端をコンテンツの左に揃える。 */
@media (max-width: 1023px) {
  #jibunshi .voice-text { margin-left: 0; }

  /* 下余白 6rem(96px) はPCの2カラム前提の値。1カラムでは上32px/下96pxで不揃いに見えるので詰める */
  #jibunshi .voice-divider {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  /* 引用は幅いっぱいまで使う（PCの86%制限は写真と並ぶ前提の値） */
  #jibunshi .voice-quote-img { max-width: 100%; }
}


/* ==========================================================================
   09 FAQ
   ========================================================================== */
#jibunshi .faq-wrapper {
  background: #fff;
  padding-block: 5rem;
  padding-inline: 1.5rem;
}
#jibunshi .faq-container {
  width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
#jibunshi .faq-head .eyebrow { margin-bottom: 1.25rem; }
/* タイトル画像・本画像（左カラム） */
#jibunshi .faq-title { margin: 0 0 1.5rem; }
/* h2画像は比例縮小で統一（max-width固定だと一定幅まで縮まないため割合指定。1920時: 左カラム695px × 69% ≒ 480px＝旧30rem相当） */
#jibunshi .faq-title-img { display: block; width: 69%; height: auto; }
#jibunshi .faq-image { display: block; width: 100%; max-width: 43rem; height: auto; margin-top: 3rem; }
#jibunshi .faq-list { border-top: 1px solid oklch(var(--background-300) / .7); }
#jibunshi .faq-item { border-bottom: 1px solid oklch(var(--background-300) / .7); }
#jibunshi .faq-trigger {
  width: 100%;
  text-align: left;
  padding-block: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  cursor: pointer;
}
#jibunshi .faq-q-no {
  font-family: "Cormorant Garamond", serif;
  font-size: .875rem;
  color: oklch(var(--accent-700));
  margin-top: .25rem;
  flex-shrink: 0;
}
#jibunshi .faq-q {
  flex: 1;
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 1.625;
  color: oklch(var(--foreground-950));
  transition: color .3s;
}
#jibunshi .faq-trigger:hover .faq-q { color: oklch(var(--primary-700)); }
#jibunshi .faq-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid oklch(var(--background-300));
  color: oklch(var(--foreground-700));
  flex-shrink: 0;
  transition: all .3s;
}
/* 左辺・上辺に1pxのグラデ線（border不可のため背景グラデ2本で描画） */
#jibunshi .faq-answer {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem 0 0 1.5rem;
  background-image:
    linear-gradient(90deg, #623727 0%, #e1b790 100%),
    linear-gradient(180deg, #623727 0%, #e1b790 100%);
  background-size: 100% 1px, 1px 100%;
  background-position: left top, left top;
  background-repeat: no-repeat;
}
#jibunshi .faq-a-label {
  font-family: "Cormorant Garamond", serif;
  font-size: .875rem;
  color: oklch(var(--primary-700));
  margin-top: .125rem;
  flex-shrink: 0;
}
/* Q/Aマーカーをアイコン画像に（ico_q.png / ico_a.png）。高さは暫定 */
#jibunshi .faq-q-ico { flex-shrink: 0; width: auto; height: 2.5rem; }
#jibunshi .faq-a-ico { flex-shrink: 0; width: auto; height: 2.25rem; }
#jibunshi .faq-a { font-size: .875rem; line-height: 2; color: oklch(var(--foreground-700)); }

/* ===== SP調整（2026-07-17 中前さん指示） =====
   A欄は「左padding 1.5rem ＋ Aアイコン ＋ gap 1.25rem」が本文の前に積まれる。
   これが固定値なので、狭い画面ほど本文を圧迫する（375pxで前置き80px＝本文はコンテナの76%）。
   結果、1行16文字ほどで折り返して読みにくい。前置きを詰めて本文の幅を稼ぐ。 */
@media (max-width: 767px) {
  #jibunshi .faq-answer {
    gap: .75rem;              /* 1.25rem(20px) → 12px */
    padding: 1.25rem 0 0 .75rem; /* 左 1.5rem(24px) → 12px */
  }
  /* Q/Aアイコンも一回り小さく（本文の幅を稼ぐ＋Qとの釣り合いを保つ） */
  #jibunshi .faq-q-ico { height: 2rem; }
  #jibunshi .faq-a-ico { height: 1.75rem; }
  #jibunshi .faq-trigger { gap: .75rem; }
}

@media (min-width: 768px) {
  #jibunshi .faq-wrapper { padding-block: 7rem; padding-inline: 2.5rem; }
  #jibunshi .faq-trigger { padding-block: 1.75rem; }
  #jibunshi .faq-q { font-size: 1.125rem; }
  #jibunshi .faq-a { font-size: 15px; }
}
@media (min-width: 1024px) {
  #jibunshi .faq-wrapper { padding-inline: 3.5rem; }
  #jibunshi .faq-container { grid-template-columns: 4.5fr 7fr; gap: 2rem; }
}


/* ==========================================================================
   10 CTA
   ========================================================================== */
#jibunshi .cta-wrapper {
  position: relative;
  width: 100%;
  min-height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#jibunshi .cta-bg { position: absolute; inset: 0; }
#jibunshi .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
#jibunshi .cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    oklch(var(--foreground-950) / .6),
    oklch(var(--foreground-950) / .45) 50%,
    oklch(var(--foreground-950) / .7)
  );
}
#jibunshi .cta-container {
  position: relative;
  z-index: 10;
  width: 100%;
  padding-inline: 1.5rem;
  text-align: center;
}
#jibunshi .cta-container .eyebrow { margin-bottom: 2rem; }
#jibunshi .cta-title {
  font-family: var(--font-heading);
  color: oklch(var(--background-50));
  font-size: 34px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .04em;
}
#jibunshi .cta-lead {
  margin-top: 2.5rem;
  color: oklch(var(--background-100) / .9);
  font-family: var(--font-heading);
  font-size: 1rem;
  line-height: 2;
  letter-spacing: .05em;
}
#jibunshi .cta-actions {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
#jibunshi .cta-badges {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  color: oklch(var(--background-100) / .7);
  font-size: .75rem;
  font-family: "Cormorant Garamond", serif;
  letter-spacing: .3em;
}
#jibunshi .cta-badge { display: flex; align-items: center; gap: .5rem; }
#jibunshi .cta-badge-line { display: none; width: 2rem; height: 1px; background: oklch(var(--background-100) / .4); }

@media (min-width: 640px) {
  #jibunshi .cta-title { font-size: 3rem; }
  #jibunshi .cta-actions { flex-direction: row; }
}
@media (min-width: 768px) {
  #jibunshi .cta-wrapper { min-height: 680px; }
  #jibunshi .cta-container { padding-inline: 2.5rem; }
  #jibunshi .cta-container .eyebrow { font-size: .75rem; }
  #jibunshi .cta-lead { font-size: 1.125rem; }
  #jibunshi .cta-badges { gap: 2.5rem; }
  #jibunshi .cta-badge-line { display: inline-block; }
}
@media (min-width: 1024px) {
  #jibunshi .cta-container { padding-inline: 3.5rem; }
  #jibunshi .cta-title { font-size: 64px; }
}


/* ==========================================================================
   Footer
   ========================================================================== */
#jibunshi .footer-wrapper {
  /* 背景3層（記述は最上層→下層）：bg_footer.png(テクスチャ) → watermark.png(自分史アルバム) → グラデ(90°) */
  background-image:
    url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/bg_footer.png?tr=n-base,w-1920"),
    url("https://ik.imagekit.io/yumephoto/yumeportal/jibunshi/watermark.png?tr=n-base,w-1920"),
    linear-gradient(90deg, #623727 0%, #b88f68 100%);
  background-position: center top, center bottom, 0 0;
  background-size: cover, 100% auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  color: oklch(var(--background-100));
  min-height: 1108px;
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  padding-inline: 1.5rem;
}
/* 1800px→1600px（2026-07-17 中前さん指示）。value-container(1600px) と同じ幅に揃う */
#jibunshi .footer-container { width: 100%; max-width: 1600px; margin-inline: auto; }
#jibunshi .footer-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
/* ブランド列に字下げ（旧 padding-left: 2rem）は入れない（2026-07-17 中前さん判断）。
   ロゴ・テキスト・アクションの左端を揃える意図だったが、ブランド列だけ2rem右へ寄るため、
   SERVICE/ABOUT 列や footer-bottom（©・法務リンク）と左端が揃わなくなっていた。
   字下げなしなら、フッター内の全要素の左端が一直線に揃う。 */
#jibunshi .footer-brand-label {
  font-family: "Cormorant Garamond", serif;
  font-size: 11px;
  letter-spacing: .4em;
  color: oklch(var(--accent-300));
  margin-bottom: 1rem;
}
#jibunshi .footer-brand-title { font-family: var(--font-heading); font-size: 1.875rem; line-height: 1.375; }
/* ブランドロゴ＝画像（footer-logo.png）。主表記が約32pxになる想定の高さ（暫定） */
#jibunshi .footer-brand-home { display: inline-block; transition: filter .3s; }
#jibunshi .footer-brand-home:hover { filter: brightness(1.05); }
#jibunshi .footer-brand-logo { display: block; width: auto; max-width: 100%; height: 4rem; }
/* 13〜16px を画面幅に比例（2026-07-17 中前さん指示。旧 1.2rem=19.2px 固定）。
   係数は「768px→13px / 1920px→16px」を通る直線から算出：0.26vw + 11px。
     768px→13px ／ 1280px→14.3px ／ 1600px→15.2px ／ 1920px以上→16px(頭打ち)
   ※〜767px は下の方のSPブロックで別途 clamp を掛けている（意図しない折り返し防止）。
     そちらが後ろにあるので、この指定を上書きする。 */
#jibunshi .footer-brand-text {
  margin-top: 1.5rem;
  font-size: clamp(13px, calc(0.26vw + 11px), 16px);
  line-height: 1.625;
  color: oklch(var(--background-200) / .8);
  max-width: 28rem;
}
#jibunshi .footer-brand-actions { margin-top: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
/* 無料相談ボタン(cta_footer.png)・電話(footer_tel.png)は画像 */
#jibunshi .footer-cta { display: inline-block; transition: filter .3s; }
#jibunshi .footer-cta:hover { filter: brightness(1.05); }
#jibunshi .footer-cta img { display: block; width: auto; height: 60px; }
#jibunshi .footer-tel { display: inline-block; }
#jibunshi .footer-tel img { display: block; width: auto; height: 116px; }
#jibunshi .footer-btn {
  height: 2.75rem;
  padding-inline: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: .875rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
}
#jibunshi .footer-btn--solid { background: oklch(var(--accent-500)); color: oklch(var(--foreground-950)); }
#jibunshi .footer-btn--solid:hover { background: oklch(var(--accent-400)); }
#jibunshi .footer-btn--outline { border: 1px solid oklch(var(--background-100) / .4); color: oklch(var(--background-100)); }
#jibunshi .footer-btn--outline:hover { border-color: oklch(var(--background-100)); }
#jibunshi .footer-col { margin-top: 2rem; }
#jibunshi .footer-col-label { font-size: 1rem; letter-spacing: .15em; color: oklch(var(--background-300) / .7); margin-bottom: 1.25rem; font-weight: 900; }
#jibunshi .footer-links { display: flex; flex-direction: column; gap: .75rem; font-size: .875rem; }
#jibunshi .footer-links a { transition: color .3s; }
#jibunshi .footer-links a:hover { color: oklch(var(--accent-300)); }
#jibunshi .footer-social a { display: inline-flex; align-items: center; gap: .5rem; }
#jibunshi .footer-social-icon { width: 1.25rem; height: 1.25rem; display: flex; align-items: center; justify-content: center; }
/* 中央やや下の5pxグラデ直線（幅1800px・中央）。
   コンテンツ（.footer-container = 最大1600px）より意図的に広く取り、左右へはみ出させる。
   .footer-container の子なので、left:50% + translateX(-50%) で親を無視して画面中央に置く。
   はみ出しは html の overflow-x:clip でクリップされる。
   ※コンテナと揃える案（width:100%）も試したが、はみ出している方が良いとの判断（2026-07-17 中前さん）。
   ※親のコンテナ幅を変えても、この1800pxは追随しない（意図的に独立させている）。 */
#jibunshi .footer-divider {
  width: min(1800px, 100vw);
  height: 5px;
  background: linear-gradient(90deg, #e0be91 0%, #6c4e37 100%);
  margin-top: 4rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
#jibunshi .footer-bottom {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  font-size: 13px;
  color: oklch(var(--background-300) / .7);
}
#jibunshi .footer-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
#jibunshi .footer-legal a { transition: color .3s; }
#jibunshi .footer-legal a:hover { color: oklch(var(--accent-300)); }
#jibunshi .footer-bigtext {
  margin-top: 3rem;
  font-family: var(--font-heading);
  font-size: 18vw;
  line-height: 1;
  color: oklch(var(--background-100) / .04);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}

@media (min-width: 768px) {
  #jibunshi .footer-wrapper { padding-top: 7rem; padding-inline: 2.5rem; }
  /* 5fr 3fr 2fr → 6fr 3fr 3fr（2026-07-17 中前さん指示）。
     ブランド列を広げ、SERVICE と ABOUT の2列を同じ幅に揃える */
  #jibunshi .footer-top { grid-template-columns: 6fr 3fr 3fr; gap: 3rem; }
  #jibunshi .footer-brand-title { font-size: 2.25rem; }
  /* ©と法務リンクは左に寄せる。space-between だと右端(x=1760)だけ上のABOUT列と揃い、
     中身は見出し(x=1384)から376px右に離れて浮く。フッターは全要素が左端揃えなので左に通す。 */
  #jibunshi .footer-bottom { flex-direction: row; align-items: center; justify-content: flex-start; gap: 2.5rem; }
}
@media (min-width: 1024px) {
  #jibunshi .footer-wrapper { padding-inline: 3.5rem; }
}


/* ==========================================================================
   ヘッダー / ナビゲーション
   （スクロール追従の色変化 .is-scrolled は上部で定義済み）
   ========================================================================== */
/* ヘッダー高さ（1920:120 のデザイン基準）。SPは縮小 */
#jibunshi { --header-h: 72px; padding-top: var(--header-h); }

#jibunshi .global-header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transition: box-shadow .3s;
  /* 茶グラデ：Canva 線グラデーション180°（上 濃茶#623727 → 下 明茶#e1b790）。CSS 180deg=上→下 */
  background: linear-gradient(180deg, #623727 0%, #e1b790 100%);
}
#jibunshi .global-nav-container {
  width: 100%;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 1.5rem; /* ナビとCTAの最小間隔を確保（潜り込み防止） */
  padding-inline: 1.5rem;
}
#jibunshi .logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
/* ロゴは画像(logo.png)。旧テキスト(logo-main 32px + logo-sub 14px)相当の高さ。数値は見た目で調整可 */
#jibunshi .logo-img { display: block; width: auto; height: 36px; }
#jibunshi .global-nav-menu { display: none; }
#jibunshi .nav-link {
  font-size: 15px;
  letter-spacing: .06em;
  white-space: nowrap;
  color: oklch(var(--background-50) / .92);
  transition: color .3s, opacity .3s;
}
/* デザインの各項目頭の「ー」 */
#jibunshi .nav-link::before { content: "ー"; margin-right: .1em; }
#jibunshi .nav-link:hover { color: oklch(var(--background-50)); opacity: .85; }
#jibunshi .global-nav-cta { display: none; }
/* CTA：デザイン画像 cta_header.png をそのまま表示（無料相談する＋電話番号込み） */
#jibunshi .nav-cta-btn {
  display: inline-flex;
  align-items: center;
  transition: filter .3s;
}
#jibunshi .nav-cta-btn:hover { filter: brightness(1.05); }
#jibunshi .nav-cta-img {
  display: block;
  /* Canvaエクスポート画像は上下に余白あり。指定107pxだと小さく見えるため、
     ヘッダー高さをほぼ埋める見た目でサイズ想定（スクショ基準） */
  height: calc(var(--header-h) - 4px);
  width: auto;
}
#jibunshi .menu-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: oklch(var(--background-50));
}
#jibunshi #menu-icon { font-size: 2.5rem; }

#jibunshi .mobile-menu {
  display: none;
  background: oklch(var(--background-50));
  border-top: 1px solid oklch(var(--background-200));
}
#jibunshi .mobile-menu.is-open { display: block; }
#jibunshi .mobile-menu-list {
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
#jibunshi .mobile-menu-link {
  display: block;
  padding-block: .5rem;
  font-size: .875rem;
  color: oklch(var(--foreground-800));
}
#jibunshi .mobile-menu-cta { display: flex; gap: .5rem; padding-top: .5rem; }
#jibunshi .mobile-cta-btn {
  flex: 1;
  padding-block: .6rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 6px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #9a7d5f 0%, #7e6448 100%);
  color: oklch(var(--background-50));
}
#jibunshi .mobile-cta-main { font-size: .8125rem; letter-spacing: .1em; }
#jibunshi .mobile-cta-tel {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .04em;
}
#jibunshi .mobile-cta-tel i { font-size: .8em; }

@media (min-width: 768px) {
  #jibunshi .global-nav-container { padding-inline: 2.5rem; }
  #jibunshi .logo-img { height: 44px; }
}
@media (min-width: 1024px) {
  #jibunshi { --header-h: 120px; }
  #jibunshi .global-nav-container { padding-inline: 3.5rem; }
  #jibunshi .logo-img { height: 56px; }
}
/* ナビ＋CTAは十分な幅(≥1200)でのみ展開。1024〜1199はハンバーガーに（CTAへの潜り込み防止）。
   CTAはflex-shrink:0で絶対につぶさない／ロゴも固定／メニュー側だけ縮む */
@media (min-width: 1200px) {
  #jibunshi .logo { flex-shrink: 0; }
  /* 間隔：1200px≈0.1rem（詰める）→1920px≈5.5rem（ベース）まで直線的に拡大 */
  #jibunshi .global-nav-menu { display: flex; align-items: center; gap: clamp(0.7rem, calc(12vw - 8.9rem), 5.5rem); flex: 0 1 auto; min-width: 0; }
  #jibunshi .global-nav-cta { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
  #jibunshi .menu-btn { display: none; }
  #jibunshi .mobile-menu,
  #jibunshi .mobile-menu.is-open { display: none; }
}


/* ==========================================================================
   CTAボタンの上品なホバー（高額商材向け・控えめ）
   ・わずかに浮上(-2px)＋柔らかいドロップシャドウ＋微かな明度アップ
   ・画像はピル型で透明角があるため box-shadow(矩形) ではなく drop-shadow(形に沿う)
   ・全ボタン定義より後に置いて個別の brightness ホバーを上書き
   ========================================================================== */
/* ※service-card-btn は絶対配置＋translateX(-50%)のため、service側で個別にホバー定義 */
#jibunshi .nav-cta-btn,
#jibunshi .wd-mission-btn,
#jibunshi .value-side-btn,
#jibunshi .voice-btn,
#jibunshi .footer-cta {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), filter .45s cubic-bezier(.16, 1, .3, 1);
}
#jibunshi .nav-cta-btn:hover,
#jibunshi .wd-mission-btn:hover,
#jibunshi .value-side-btn:hover,
#jibunshi .voice-btn:hover,
#jibunshi .footer-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.035) drop-shadow(0 8px 18px rgba(80, 45, 25, .22));
}
@media (prefers-reduced-motion: reduce) {
  #jibunshi .nav-cta-btn:hover,
  #jibunshi .wd-mission-btn:hover,
  #jibunshi .value-side-btn:hover,
  #jibunshi .voice-btn:hover,
  #jibunshi .footer-cta:hover { transform: none; }
  /* 中央寄せCTAは translateX(-50%) を保持したまま浮上のみ無効化 */
  #jibunshi .our-work-cta:hover,
  #jibunshi .share-story-cta:hover,
  #jibunshi .service-card:hover .service-card-btn { transform: translateX(-50%); }
}


/* ==========================================================================
   レスポンシブ共通：非全幅コンテンツ（inner/container系）はスマホ/タブレット(<1024)で
   左右余白を統一（5%）。全幅（banner-full 等）は対象外。デスクトップの詰めは各指定を維持。
   ※末尾に置いて各セクションのベース余白より後がけで統一
   ========================================================================== */
@media (max-width: 1023px) {
  /* 非全幅コンテンツの左右余白を 2rem に統一（全幅 banner-full 等は対象外）。
     service-inner は service-wrapper 側で2rem確保済みのため除外（二重回避） */
  #jibunshi .inner:not(.service-inner),
  #jibunshi .container,
  #jibunshi .value-container { padding-inline: 2rem; }
  #jibunshi .footer-wrapper { padding-inline: 2rem; }

  /* wd-title(絶対配置・60%幅・比率4.43)に罫線が重ならないよう上余白を確保 */
  #jibunshi .what-we-do-content { padding-top: 24vw; }

  /* value：下余白を確保／右カラム(value-side)は縮小して中央／見出し下余白はSPだけ0 */
  #jibunshi .value-container { padding-bottom: 4rem; }
  #jibunshi .value-side { max-width: 360px; margin-inline: auto; gap: 1rem; }
  #jibunshi .value-side-text { margin-bottom: .6rem; }
  #jibunshi .value-head { margin-bottom: 0; }
  /* service：カードタイトルと画像の間隔をSPで確保（下余白が狭い対策） */
  #jibunshi .service-card-title { margin-bottom: 1.5rem; }
  /* 縦積み時はカード幅が広がるのに height:46px 固定だとタイトルだけ小さく見えるため幅追従に。
     46px固定は「3カラム横並びで高さを揃える」ための指定なので≥1024だけで良い */
  #jibunshi .service-card-title-img { width: 100%; height: auto; }

  /* footer-brand：狭い画面で意図しない改行(<br>以外の折り返し)が出ないよう幅に追従。
     利用可能幅 = 100vw - 96px(wrapper2rem×2 + brand2rem)。本文約18文字ぶんに収める。
     上限13pxは「767pxのときベース側(768px=13px)と同じ値」＝境目で飛ばないよう合わせたもの。
     ベース側の 13〜16px を変えたら、この上限も追随させること。
       767px→13px ／ 430px→11.5px ／ 320px→11px(下限) */
  #jibunshi .footer-brand-text { font-size: clamp(11px, calc(0.447vw + 9.57px), 13px); }
  /* ロゴも同様に、高さ固定＋max-width:100%だと横に潰れるため幅追従（縦横比維持） */
  #jibunshi .footer-brand-logo { width: 100%; max-width: 19.4rem; height: auto; }

  /* 広すぎるベースmarginの調整（voiceボタン上の 14rem は過大） */
  #jibunshi .voice-btns { margin-top: 3rem; }

  /* 主要CTAボタン（見る系）はSPで幅を360px上限に統一・中央揃え・画像は100% */
  #jibunshi .wd-mission-btn,
  #jibunshi .value-side-btn,
  #jibunshi .voice-btn { display: block; width: 100%; max-width: 360px; margin-inline: auto; }
  #jibunshi .wd-mission-btn img,
  #jibunshi .value-side-btn img,
  #jibunshi .voice-btn img { width: 100%; height: auto; }
  #jibunshi .voice-btns { justify-content: center; }

}

/* footer-col（service/about）の字下げは完全縦積み（≤767）のみ brand に揃える */
@media (max-width: 767px) {
  #jibunshi .footer-col { margin-left: 2rem; }
}

/* 「左右余白が消える帯」対策：1024〜約1680pxでは inner(1620)がビューポート幅いっぱいになり
   端に接触するため、最低2remを補填（≥1680は中央寄せの自然な余白で足りるので対象外）。
   service-inner は service-wrapper 側で余白確保済みのため除外（二重回避） */
@media (min-width: 1024px) and (max-width: 1680px) {
  #jibunshi .inner:not(.service-inner),
  #jibunshi .container { padding-inline: 2rem; }
  /* wd-titleは絶対配置で要素外端基準のため、上記paddingを足したぶん右へ補正
     （left:-2vw のままだと画面左端に張り付く）。本文左(2rem)から2vwだけ外に */
  #jibunshi .wd-title { left: calc(2rem - 2vw); }
}