@charset "UTF-8";
/* イージス相続ガイド ホーム（10/28 デザイン画像から・11/2 ヘッダーとFVを Figma 指定どおりに）
   ヘッダー・緑のメニュー帯・フッターは guide-frame.css（全ページ共通）。文字は本文20px・最小14px */
:root {
  --green: #1d6b45;
  --green-d: #15533a;
  --deep: #183d2c;
  --ink: #1f2a24;
  --gray: #4f5a53;
  --line: #e2e6de;
  --bg: #f8f7f2;
  --tint: #eef2ea;
  --white: #fff;
  --serif: "Noto Sans JP", sans-serif; /* 10/28 本人指定で見出しも Noto Sans JP に統一 */
  --sans: "Noto Sans JP", sans-serif;
  --wrap: 1100px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--sans); font-size: 20px; line-height: 1.9; color: var(--ink); background: var(--bg); word-break: auto-phrase; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; }

/* 矢印（細い線） */
.g-arrow { display: inline-block; width: 18px; height: 10px; margin-left: 12px; vertical-align: middle; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ===== FV（11/2 Figma 指定：1920幅で高さ563。--u は「1920幅での1px」、.top が基準の箱） ===== */
.hero { --u: min(1px, 100cqw / 1920); }
.hero-stage { position: relative; width: calc(1920 * var(--u)); margin: 0 auto; }
.hero { position: relative; z-index: 1; height: calc(563 * var(--u)); overflow: hidden; background: #fff; }
/* hero_bg.png はぼかし・左右反転・左へ消えるグラデ・不透明度54%を書き出し済み＝そのまま置く */
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-stage { height: 100%; }
.hero-stage > * { position: absolute; margin: 0; }
.hero-en { left: calc(382 * var(--u)); top: calc(71.25 * var(--u)); font-size: max(14px, calc(22 * var(--u))); font-weight: 700; line-height: 1.1818; letter-spacing: .3em; color: #2E7D32; }
.hero-title { left: calc(382 * var(--u)); top: calc(110 * var(--u)); font-size: calc(50 * var(--u)); font-weight: 700; line-height: 1.2; white-space: nowrap; }
.hero-t1 { display: block; color: #1E4227; }
.hero-t2 { display: block; margin-top: calc(11.25 * var(--u)); color: #2E7D32; }
.hero-rule { left: calc(382 * var(--u)); top: calc(253.75 * var(--u)); width: calc(464.3 * var(--u)); height: max(2px, calc(3 * var(--u))); background: #2E7D32; }
.hero-sub { left: calc(382 * var(--u)); top: calc(283.75 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 700; line-height: 1.2; color: #2E7D32; white-space: nowrap; }
/* 右列は西田先生の写真に少しかかる→Figmaの重ね順どおりチェックを手前に */
.hero-checks { z-index: 2; left: calc(382 * var(--u)); top: calc(360 * var(--u)); width: calc(757.41 * var(--u)); display: grid; grid-template-columns: calc(329.41 * var(--u)) calc(396 * var(--u)); column-gap: calc(27 * var(--u)); row-gap: calc(23.41 * var(--u)); }
.hero-checks a { position: relative; display: block; height: calc(52.59 * var(--u)); padding: calc(15 * var(--u)) 0 0 calc(46.9 * var(--u)); background: #fff; border: 1px solid #2E7D32; border-radius: calc(4 * var(--u)); box-shadow: calc(5 * var(--u)) calc(5 * var(--u)) 0 #2E7D32; font-size: max(14px, calc(21 * var(--u))); font-weight: 700; line-height: 1.1905; color: #23262D; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.hero-checks a::before { content: ""; position: absolute; left: calc(18.37 * var(--u)); top: calc(21 * var(--u)); width: calc(16.26 * var(--u)); height: calc(13.43 * var(--u)); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.26 13.43'%3E%3Cpath d='M1.7 7.2l4.5 4.4L14.6 1.8' fill='none' stroke='%232E7D32' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.hero-checks a:hover { transform: translate(calc(3 * var(--u)), calc(3 * var(--u))); box-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 #2E7D32; }
/* 2人：西田先生が左手前・守時先生が右奥（11/2 Figma 指定） */
.hero-people { left: calc(1056 * var(--u)); top: calc(81 * var(--u)); width: calc(535 * var(--u)); height: calc(482 * var(--u)); }
.hero-people img { position: absolute; max-width: none; }
.hero-man { left: calc(170 * var(--u)); top: 0; width: calc(365 * var(--u)); height: calc(482 * var(--u)); }
.hero-woman { left: 0; top: calc(74 * var(--u)); width: calc(341 * var(--u)); height: calc(408 * var(--u)); }
.hero-name { position: absolute; top: calc(404 * var(--u)); height: calc(42 * var(--u)); display: flex; align-items: center; background: rgba(255,255,255,.95); border-radius: calc(21 * var(--u)); font-size: max(14px, calc(16 * var(--u))); font-weight: 700; line-height: 1.1875; color: #1E4227; white-space: nowrap; }
/* 幅は文字に合わせる（1920幅で 155.91／209.83px になる余白） */
.hero-name-n { left: calc(93 * var(--u)); min-width: calc(155.91 * var(--u)); padding: 0 calc(18 * var(--u)); }
.hero-name-m { left: calc(322 * var(--u)); min-width: calc(209.83 * var(--u)); padding: 0 calc(21.9 * var(--u)) 0 calc(14 * var(--u)); }
.hero-name-m span { display: flex; align-items: center; justify-content: center; width: calc(45.92 * var(--u)); height: calc(28 * var(--u)); margin-right: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: #2E7D32; color: #fff; font-size: max(14px, calc(14 * var(--u))); line-height: 1.2143; }

/* ===== 区切り共通 ===== */
.g-sec { padding: 112px 0; }
.g-sec-white { background: var(--white); }
.g-sec-tint { background: var(--tint); }
.g-en { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: .22em; color: var(--green); line-height: 1.6; }
.g-en-c { text-align: center; }
.g-bar { display: block; width: 40px; height: 2px; margin: 0 auto 18px; background: var(--green); }
.g-title { margin: 6px 0 0; font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.45; letter-spacing: .08em; color: var(--ink); }
.g-title-c { text-align: center; }
.g-lead { margin-top: 18px; color: var(--gray); letter-spacing: .04em; }
.g-lead-c { text-align: center; }
.g-num { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--green); line-height: 1.3; }
.g-num::after { content: ""; display: block; width: 28px; height: 1.5px; margin-top: 8px; background: var(--green); }

/* ===== いまの状況から探す（写真が右から白へ溶けるカード 2×2） ===== */
.g-sit { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* 文字が写真に重ならないよう、左が文字・右が写真の2列（写真は左端を白へ溶かす） */
.g-sit-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr 38%; min-height: 300px; background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 22px rgba(24,61,44,.06); }
.g-sit-photo { grid-column: 2; grid-row: 1; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 35%, #000 75%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 35%, #000 75%); }
.g-sit-body { grid-column: 1; grid-row: 1; padding: 30px 8px 30px 32px; }
.g-sit-q { margin-top: 18px; font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.5; }
.g-sit-links { margin-top: 16px; display: grid; gap: 10px; }
.g-sit-links a { display: block; position: relative; padding-left: 24px; font-size: 16px; line-height: 1.65; font-weight: 500; color: var(--green); }
.g-sit-links a::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 9px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; }
.g-sit-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ===== 注目の記事 ===== */
.g-feat { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.g-pill { display: inline-block; margin-top: 26px; padding: 2px 14px; border-radius: 99px; background: var(--tint); color: var(--green); font-size: 15px; font-weight: 700; }
.g-feat-title { margin-top: 16px; font-family: var(--serif); font-size: 28px; font-weight: 600; line-height: 1.6; }
.g-feat-desc { margin-top: 18px; color: var(--gray); }
.g-textlink { display: inline-flex; align-items: center; margin-top: 28px; padding-bottom: 6px; border-bottom: 1.5px solid var(--green); color: var(--green); font-weight: 700; letter-spacing: .08em; }
.g-textlink:hover .g-arrow { transform: translateX(4px); }
.g-arrow { transition: transform .2s; }
.g-feat-photo { display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.g-feat-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .5s; }
.g-feat-photo:hover img { transform: scale(1.03); }

/* ===== コラム一覧（写真上・文字下のカード） ===== */
.g-cards { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.g-card { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 6px 22px rgba(24,61,44,.07); transition: box-shadow .2s, transform .2s; }
.g-card:hover { box-shadow: 0 12px 30px rgba(24,61,44,.14); transform: translateY(-2px); }
.g-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.g-card-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 22px 24px 72px; }
.g-card-tag { align-self: flex-start; padding: 0 12px; border-radius: 99px; background: var(--tint); color: var(--green); font-size: 14px; font-weight: 700; line-height: 1.9; }
.g-card-title { margin-top: 12px; font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.55; }
.g-card-desc { margin-top: 10px; font-size: 16px; line-height: 1.7; color: var(--gray); }
.g-round { position: absolute; right: 20px; bottom: 20px; width: 40px; height: 40px; border-radius: 50%; background: var(--tint); color: var(--green); display: grid; place-items: center; }
.g-round::before { content: ""; width: 16px; height: 10px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h16M12 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ===== 相続の期限チェック（右に丸く切り抜いた写真） ===== */
.g-check { position: relative; background: #fff; overflow: hidden; }
.g-check-in { position: relative; z-index: 1; min-height: 520px; display: flex; align-items: center; }
.g-check-text { max-width: 470px; padding: 88px 0; }
.g-check-lead { margin-top: 20px; color: var(--gray); }
.g-check-tool { margin-top: 18px; font-size: 18px; font-weight: 700; }
.g-check-tool span { display: inline-block; margin-right: 10px; padding: 0 10px; border-radius: 3px; background: var(--tint); color: var(--green); font-size: 15px; }
.g-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 30px; padding: 16px 40px; border-radius: 6px; background: var(--green); color: #fff; font-weight: 700; letter-spacing: .08em; box-shadow: 0 6px 16px rgba(29,107,69,.22); transition: background .2s; }
.g-btn:hover { background: var(--green-d); }
.g-check-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 50%; }
.g-check-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; clip-path: ellipse(78% 92% at 78% 60%); }

/* ===== 知っておきたい4つの期限 ===== */
.g-dl-sec { padding-top: 40px; }
.g-dl-box { padding: 72px 48px 64px; background: var(--tint); border-radius: 4px; }
.g-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--green); font-size: 16px; font-weight: 700; }
.g-kicker::before, .g-kicker::after { content: ""; width: 20px; border-top: 1.5px solid var(--green); }
.g-dl-box .g-title { font-size: 38px; }
.g-dl { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.g-dl-card { display: flex; flex-direction: column; padding: 26px 22px 22px; background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(24,61,44,.05); }
.g-dl-title { margin-top: 16px; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.5; }
.g-dl-desc { margin-top: 10px; flex: 1; font-size: 16px; line-height: 1.75; color: var(--gray); }
.g-dl-card img { margin-top: 18px; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 3px; }
.g-textlink-s { align-self: flex-start; margin-top: 16px; font-size: 16px; border-bottom: 0; padding-bottom: 0; }

/* ===== 運営事務所と監修弁護士・ご相談（11/2 本人指定：記事の右の欄の相談バナーと同じデザインを横長に） ===== */
.g-cb { max-width: 960px; margin: 0 auto; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 14px 40px rgba(18,31,62,.18); }
.g-cb-logo { padding: 14px 22px; }
.g-cb-logo img { height: 52px; width: auto; }
.g-cb-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: auto 1fr; color: #fff;
  background: linear-gradient(90deg, rgba(18,31,62,.93) 0%, rgba(18,31,62,.84) 55%, rgba(18,31,62,.7) 100%), #121F3E; background-position: 70% 40%; background-size: cover; background-repeat: no-repeat; }
/* 背景写真は相談バナーが近づいてから読む（.bg-on はHTMLの小さなスクリプトが付ける。スクリプトが動かないときは紺の地のまま） */
.g-cb-body.bg-on { background-image: linear-gradient(90deg, rgba(18,31,62,.93) 0%, rgba(18,31,62,.84) 55%, rgba(18,31,62,.7) 100%), url("photo/office.jpg"); }
.g-cb-main { grid-column: 1; grid-row: 1; padding: 22px 0 0 40px; text-align: center; }
.g-cb-badge span { display: inline-block; padding: 5px 28px; border-radius: 99px; background: #B99D52; box-shadow: inset 0 0 0 3px #B99D52, inset 0 0 0 4.5px rgba(255,255,255,.75); font-size: 18px; font-weight: 700; letter-spacing: .08em; }
.g-cb-title { margin: 12px 0 0; font-weight: 700; letter-spacing: .06em; text-shadow: 0 1px 6px rgba(0,0,0,.35); }
.g-cb-s { display: block; font-size: 24px; line-height: 1.55; }
.g-cb-l { display: block; margin: 2px 0 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.35); font-size: 33px; line-height: 1.35; }
.g-cb-l small { font-size: 24px; }
.g-cb-text { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.75; letter-spacing: .04em; }
.g-cb-btns { grid-column: 1; grid-row: 2; display: grid; gap: 14px; width: 368px; margin: 22px auto 30px; padding-left: 40px; box-sizing: content-box; }
.g-cb-btn { position: relative; display: flex; align-items: center; min-height: 80px; padding: 10px 44px 10px 12px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.18); transition: transform .15s; }
.g-cb-btn:hover { transform: translateY(-2px); }
.g-cb-btn::after { content: ""; position: absolute; right: 20px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(-45deg); }
.g-cb-icon { flex: none; display: grid; place-items: center; width: 62px; margin-right: 16px; padding-right: 14px; border-right: 1px solid; }
.g-cb-icon svg { width: 44px; height: 44px; }
.g-cb-btext { display: flex; flex-direction: column; }
.g-cb-tel { background: #fff; color: #121F3E; }
.g-cb-tel::after { color: #B99D52; }
.g-cb-tel .g-cb-icon { color: #B99D52; border-color: #e3dccb; }
.g-cb-tel-l { font-size: 16px; font-weight: 700; line-height: 1.3; }
.g-cb-tel-n { font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; }
.g-cb-tel-h { font-size: 14px; line-height: 1.35; color: #3c4560; }
.g-cb-line { background: #06C755; color: #fff; }
.g-cb-line .g-cb-icon { border-color: rgba(255,255,255,.45); }
.g-cb-line-m { font-size: 25px; font-weight: 700; line-height: 1.3; }
.g-cb-line-s { font-size: 16px; font-weight: 700; line-height: 1.4; letter-spacing: .08em; }
.g-cb-person { grid-column: 2; grid-row: 1 / 3; position: relative; align-self: end; margin: 0; }
/* 先生は少し左に寄せ、名前は参考どおり頭の右側に置く（顔に文字をかけない） */
.g-cb-person img { display: block; width: 280px; height: auto; margin: 40px 0 0 0; }
.g-cb-person figcaption { position: absolute; right: 14px; top: 34%; font-size: 14px; line-height: 1.5; text-align: right; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.g-cb-person figcaption > span { display: block; }
.g-nw { display: inline-block; }
.g-cb-person figcaption b { display: block; margin-top: 2px; font-size: 16px; }
.g-cb-l > span, .g-cb-tel-h > span { display: inline-block; }
.g-cb-tool { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; padding: 10px 56px; background: #B99D52; color: #fff; transition: background .2s; }
.g-cb-tool:hover { background: #a88c43; }
.g-cb-tool svg { width: 34px; height: 34px; }
.g-cb-tool b { font-size: 27px; letter-spacing: .04em; }
.g-cb-tool span { font-size: 17px; }
.g-cb-tool::after { content: ""; position: absolute; right: 26px; top: 50%; width: 12px; height: 12px; margin-top: -7px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg); }

/* ===== ご相談 ===== */
.g-consult { padding: 104px 0 112px; background: var(--white); border-top: 1px solid var(--line); }
.g-consult-badge { margin: 18px auto 0; width: max-content; padding: 2px 18px; border: 1.5px solid var(--green); border-radius: 99px; color: var(--green); font-weight: 700; font-size: 18px; }
.g-consult-btns { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.g-consult-btns > div { text-align: center; }
.g-consult-btns p { margin-top: 10px; font-size: 15px; color: var(--gray); }
.g-cbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 72px; border-radius: 6px; font-size: 21px; font-weight: 700; border: 1.5px solid var(--green); }
.g-cbtn svg, .g-cbtn img { width: 24px; height: 24px; }
.g-cbtn-tel { background: var(--green); color: #fff; font-size: 26px; letter-spacing: .03em; }
.g-cbtn-line { background: #fff; color: var(--green); }
.g-cbtn-mail { background: #fff; color: var(--green); }

/* ===== 左右に付いてくる欄（11/2 本番 13souzoku.com に合わせる：左＝コラム一覧 300px／右＝相談バナー 360px） ===== */
.g-float { position: fixed; top: 24px; z-index: 40; display: none; opacity: 0; transition: opacity .3s, transform .3s; }
.g-float-l { left: max(16px, calc(50% - 550px - 340px)); width: 300px; transform: translateX(-12px); }
.g-float-r { right: max(16px, calc(50% - 550px - 392px)); width: 360px; transform: translateX(12px); }
.g-float.is-shown { opacity: 1; transform: none; }
/* 左：コラム一覧（本番と同じ：白地・薄緑の線・角丸8px・題は濃い緑の太字に緑の下線・リンクは緑） */
/* 高さは右の相談バナーと同じ（index.html のスクリプトでそろえる）。項目は均等に広げ、ゆとりを持たせる */
.g-side-list { display: flex; flex-direction: column; box-sizing: border-box; padding: 18px 20px 10px; background: #fff; border: 1px solid #CFDCC4; border-radius: 8px; letter-spacing: .06em; } .g-side-title { flex: none; padding: 0 0 12px 2px; border-bottom: 2px solid #2E7D32; font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: #1E4227; } .g-side-list ul { flex: 1; display: flex; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; } .g-side-list li { flex: 1; display: flex; align-items: center; }
 .g-side-list a { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 8px 26px 8px 4px; font-size: 18px; line-height: 1.5; color: #2E7D32; }
/* 右の金色の「＞」（右の相談バナーのボタンと同じ） */
.g-side-list a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2.5px solid #B99D52; border-bottom: 2.5px solid #B99D52; transform: rotate(-45deg); transition: right .15s; }
.g-side-list a:hover::after { right: 3px; }
/* 補助の一言（各記事の関連記事一覧の説明文と同じ言葉） */
.g-side-name { font-weight: 700; }
.g-side-sub { margin-top: 2px; font-size: 15px; line-height: 1.55; letter-spacing: .03em; color: #5B6170; }




.g-side-list a:hover { background: #F1F7EC; }
/* 右：相談バナー（.h-side-in は parts.css。画面の高さが足りないと説明文を外す指定も parts.css にある） */
.g-float-r .h-side-in { width: 100%; }
/* ホームの右の欄は記事より短く、高さ760pxの画面でも全部収まる→説明文を消さない（消すと名前が先生の顔にかかる） */
.g-float-r .hs-text { display: block; }
@media (min-width: 1860px) and (min-height: 760px) { .g-float { display: block; } }

.g-spbar { display: none; }

/* ===== FV：1200幅より狭い画面は縮めずに縦に並べる ===== */
@media (max-width: 1199px) {
  .hero { height: auto; margin-top: 0; }
  .hero-stage { width: auto; height: auto; padding: 40px 24px 0; }
  .hero-stage > * { position: static; }
  .hero-en { font-size: 16px; }
  .hero-title { font-size: 48px; white-space: normal; }
  .hero-t2 { margin-top: 4px; }
  .hero-rule { display: block; width: 300px; height: 3px; margin: 20px 0; }
  .hero-sub { font-size: 22px; white-space: normal; }
  .hero-checks { width: auto; margin-top: 24px; grid-template-columns: repeat(2, max-content); gap: 14px 20px; }
  .hero-checks a { height: auto; padding: 12px 20px 12px 44px; font-size: 17px; border-radius: 4px; box-shadow: 4px 4px 0 #2E7D32; }
  .hero-checks a::before { left: 16px; top: 50%; margin-top: -6.5px; width: 16px; height: 13px; }
  /* パソコン用の位置(left/top)を外す。外さないと写真が右へずれて切れる */
  .hero-people { position: relative; left: auto; top: auto; width: min(100%, 560px); height: auto; aspect-ratio: 535 / 482; margin: 24px auto 0; }
  .hero-man { left: 31.78%; width: 68.22%; height: 100%; }
  .hero-woman { top: 15.35%; width: 63.74%; height: 84.65%; }
  .hero-name { top: 83.8%; height: 34px; border-radius: 17px; font-size: 14px; }
  .hero-name-n { left: 17.38%; padding: 0 12px; }
  .hero-name-m { left: 60.19%; padding: 0 12px 0 6px; }
  .hero-name-m span { width: 40px; height: 24px; margin-right: 6px; border-radius: 12px; font-size: 14px; }
}

/* ===== 中くらいの幅 ===== */
@media (max-width: 1000px) {
  /* minmax(0,1fr)：中のボタンが1行のまま枠を押し広げ、ページが横に動くのを防ぐ */
  .g-feat { grid-template-columns: minmax(0, 1fr); }
  /* 「弁護士法人イージス法律事務所」は言葉のまとまりで折り返すと1語になり、狭い画面で枠からはみ出す→ここだけ普通に折り返す */
  .g-cb { word-break: normal; overflow-wrap: anywhere; }
  .g-cb-body { grid-template-columns: minmax(0, 1fr) 250px; }
  .g-cb-main { padding-left: 28px; }
  .g-cb-btns { width: auto; max-width: 368px; margin: 22px 0 28px; padding-left: 28px; }
  .g-cb-person img { width: 250px; }
  .g-cb-l { font-size: 28px; }
  .g-cards { grid-template-columns: repeat(2, 1fr); }
  .g-dl { grid-template-columns: repeat(2, 1fr); }
  .g-check-photo { position: relative; width: 100%; height: 320px; }
  .g-check-photo img { clip-path: none; }
  .g-check-in { min-height: 0; }
  .g-check-text { padding: 72px 0 40px; }
}

/* ===== スマホ ===== */
@media (max-width: 680px) {
  html { scroll-padding-top: 72px; }
  /* スマホのFV：見出し → 先生2人の写真 → お悩みのボタン(白い面にまとめ、写真の足もとに重ねる) */
  .hero-stage { display: flex; flex-direction: column; padding: 28px 16px 24px; }
  .hero-en { font-size: 14px; }
  .hero-title { font-size: 34px; line-height: 1.32; }
  .hero-t2 { margin-top: 2px; }
  .hero-rule { width: 200px; margin: 14px 0 12px; }
  .hero-sub { font-size: 17px; line-height: 1.5; word-break: auto-phrase; }
  .hero-people { order: 5; width: 100%; max-width: 400px; margin: 14px auto 0; }
  .hero-name { top: 70%; height: 30px; border-radius: 15px; }
  .hero-name-n { left: 4%; padding: 0 10px; }
  .hero-name-m { left: auto; right: 2%; padding: 0 10px 0 4px; }
  .hero-name-m span { width: 38px; height: 22px; margin-right: 5px; border-radius: 11px; }
  .hero-checks { order: 6; position: relative; left: auto; top: auto; z-index: 2; margin-top: -28px; padding: 14px 14px 16px; grid-template-columns: 1fr; gap: 10px; background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: 0 8px 24px rgba(30,66,39,.12); }
  .hero-checks a { padding: 11px 12px 11px 40px; font-size: 16px; white-space: normal; box-shadow: 3px 3px 0 #2E7D32; }
  .hero-checks a::before { left: 14px; }
  .g-sec { padding: 80px 0; }
  .g-title { font-size: 32px; }
  .g-dl-box .g-title { font-size: 28px; }
  .g-lead br, .g-check-lead br { display: none; }
  .g-sit { grid-template-columns: 1fr; }
  .g-sit-card { min-height: 0; grid-template-columns: 1fr; }
  .g-sit-photo { grid-column: 1; height: 180px; -webkit-mask-image: none; mask-image: none; }
  .g-sit-body { grid-row: 2; padding: 24px 22px 26px; }
  .g-cards, .g-dl, .g-consult-btns { grid-template-columns: 1fr; }
  .g-dl-box { padding: 56px 18px 40px; }
  /* 相談バナー：上に見出し（左）と先生（右）、その下に電話とLINEのボタンを横いっぱいに */
  .g-cb-logo { padding: 10px 14px; }
  .g-cb-logo img { height: 40px; }
  .g-cb-body { grid-template-columns: minmax(0, 1fr); }
  .g-cb-main { padding: 20px 16px 0; text-align: center; }
  .g-cb-badge span { padding: 3px 16px; font-size: 15px; }
  .g-cb-title { margin-top: 10px; }
  .g-cb-s { font-size: 16px; }
  .g-cb-l { font-size: 21px; margin: 2px 0 4px; padding-bottom: 4px; }
  .g-cb-l small { font-size: 16px; }
  .g-cb-text { font-size: 14px; }
  .g-cb-text br { display: none; }
  .g-cb-person { grid-column: 1; grid-row: 2; display: flex; align-items: flex-end; justify-content: center; gap: 14px; margin: 12px 16px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
  .g-cb-person img { width: 118px; margin: 0; }
  .g-cb-person figcaption { position: static; padding-bottom: 16px; text-align: left; }
  .g-cb-person figcaption b { font-size: 15px; }
  .g-cb-btns { grid-column: 1; grid-row: 3; max-width: none; margin: 16px; padding: 0; gap: 12px; }
  .g-cb-btn { min-height: 70px; padding-right: 38px; }
  .g-cb-icon { width: 52px; margin-right: 12px; padding-right: 10px; }
  .g-cb-icon svg { width: 38px; height: 38px; }
  .g-cb-tel-n { font-size: 24px; }
  .g-cb-line-m { font-size: 21px; }
  .g-cb-tool { flex-wrap: wrap; gap: 4px 10px; padding: 10px 44px 10px 16px; }
  .g-cb-tool svg { width: 28px; height: 28px; }
  .g-cb-tool b { font-size: 21px; }
  .g-cb-tool span { font-size: 15px; }
  .g-spbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); }
  .g-spbar a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 52px; border-radius: 6px; font-size: 17px; font-weight: 700; }
  .g-spbar-tel { background: var(--green); color: #fff; }
  .g-spbar-line { background: #fff; color: var(--green); border: 1.5px solid var(--green); }
  .g-spbar-line img { width: 22px; height: 22px; }
}
/* 小さいスマホ（360幅以下）：1行に収まるよう少しだけ詰める（14pxは下回らない） */
@media (max-width: 360px) {
  .hero-title { font-size: 30px; }
  .hero-sub { font-size: 15px; }
  .hero-checks { padding: 12px 10px 14px; }
  .hero-checks a { padding-left: 34px; font-size: 15px; }
  .hero-checks a::before { left: 11px; }
  .g-title { font-size: 28px; }
  .g-cb-icon { width: 44px; margin-right: 10px; padding-right: 8px; }
  .g-cb-icon svg { width: 32px; height: 32px; }
  .g-cb-tel-n { font-size: 22px; }
  .g-cb-line-m { font-size: 19px; }
  .g-spbar a { gap: 4px; font-size: 15px; }
  .g-cb-person { gap: 10px; margin: 12px 10px 0; }
  .g-cb-person img { width: 100px; }
  .g-spbar-line img { width: 20px; height: 20px; }
  /* 名前の札が横に並びきらないので、上下に少しずらす */
  .hero-name-n { top: 60%; left: 0; }
  .hero-name-m { top: 72%; right: 0; }
}

/* =====================================================================
   11/4 本人決定：スマホのFV＝D案・下の相談ボタン＝CTA 01改・右上はメニュー
   見比べページ http://172.16.1.135/kuromi/portal/p/souzoku-column-fvcta/#fix
   ===================================================================== */
.hero-find-t, .hero-strip, .h-menu-btn { display: none; }
.sp-menu[hidden] { display: none; }
@media (max-width: 680px) {
  /* ヘッダー：右上はLINEの代わりにメニュー（LINEは下のボタンにある） */
  .h-btn-line { display: none; }
  .h-menu-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; width: 64px; height: 52px; margin-left: auto; padding: 0; border: 0; background: none; color: #1d6b45; }
  .h-menu-btn span { display: block; width: 28px; height: 3px; border-radius: 2px; background: currentColor; }
  .h-menu-btn small { margin-top: 1px; font-size: 14px; font-weight: 700; line-height: 1.2; }
  .h-menu-btn.is-x span:first-child { transform: translateY(4px) rotate(45deg); }
  .h-menu-btn.is-x span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .sp-menu { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #fff; font-family: var(--sans); }
  html.is-menu-open, html.is-menu-open body { overflow: hidden; }
  .sp-menu-hd { display: flex; align-items: center; padding: 8px 6px 8px 16px; border-bottom: 1px solid var(--line); }
  .sp-menu-hd img { width: 190px; height: auto; margin-right: auto; }
  .sp-menu-t { padding: 18px 20px 6px; font-size: 15px; font-weight: 700; letter-spacing: .1em; line-height: 1.6; color: #9a7f3a; }
  .sp-menu-list a { position: relative; display: block; padding: 13px 44px 13px 20px; border-bottom: 1px solid var(--line); }
  .sp-menu-list b { display: block; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--ink); }
  .sp-menu-list small { display: block; font-size: 14px; line-height: 1.5; color: #5a645e; }
  .sp-menu-list a::after { content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid var(--green); border-top: 2px solid var(--green); transform: rotate(45deg); }

  /* FV：見出し（マーカー）→ 先生2人を大きく → 白いカード「いまの状況から探す」（写真の下辺はカードの裏）→ 3つの約束 */
  /* 見出しの置き方（11/4 本人決定「08×07」）：上下の細い罫線で挟む・COLUMN は緑の札・説明の頭に短い金の線 */
  .hero-stage { padding: 22px 18px 22px; }
  .hero-stage::before { content: ""; display: block; height: 1.5px; margin-bottom: 12px; background: rgba(30,66,39,.45); }
  .hero-en { align-self: flex-start; padding: 1px 14px; border-radius: 999px; background: #2E7D32; color: #fff; font-size: 14px; letter-spacing: .2em; line-height: 1.5; }
  .hero-title { margin-top: 10px; font-size: 34px; line-height: 1.35; }
  .hero-t1 { color: var(--ink); }
  .hero-t2 { margin-top: 0; color: var(--green); }
  .hero-rule { display: none; }
  .hero-sub { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-bottom: 14px; border-bottom: 1.5px solid rgba(30,66,39,.45); font-size: 16px; line-height: 1.6; color: #1E4227; }
  .hero-sub::before { content: ""; flex: none; width: 18px; height: 2px; background: #B99D52; }
  .hero-people { width: calc(100% + 36px); max-width: none; height: auto; aspect-ratio: 390 / 350; margin: 6px -18px -36px; }
  .hero-man { left: auto; right: .5%; top: auto; bottom: 0; width: 67.2%; height: auto; }
  .hero-woman { left: 3.1%; top: auto; bottom: 0; width: 58.5%; height: auto; }
  .hero-name { top: auto; bottom: 13.7%; z-index: 2; }
  .hero-name-n { left: 5.6%; }
  .hero-name-m { left: auto; right: 3%; }
  .hero-find-t { display: block; order: 6; position: relative; z-index: 4; padding: 14px 14px 0; border-radius: 12px 12px 0 0; background: #fff; font-size: 17px; font-weight: 700; line-height: 1.5; color: var(--green); }
  .hero-checks { order: 7; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 0; padding: 10px 14px 14px; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 10px 18px rgba(30,66,39,.1); }
  .hero-checks a { display: inline-flex; align-items: center; gap: 6px; height: auto; padding: 7px 14px; border: 1.5px solid var(--green); border-radius: 999px; background: #fff; box-shadow: none; font-size: 15px; line-height: 1.4; color: var(--green); }
  .hero-checks a::before { content: none; }
  .hero-checks a::after { content: "›"; font-size: 20px; line-height: 1; color: #B99D52; }
  .hero-checks a:hover { transform: none; box-shadow: none; background: #F1F7EC; }
  .hero-strip { display: flex; order: 8; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
  .hero-strip li { padding: 1px 8px; border: 1px solid #B99D52; border-radius: 4px; background: #fff; font-size: 14px; font-weight: 700; line-height: 1.7; color: #9a7f3a; }

  /* 下に付いてくる相談ボタン（CTA 01改）：後ろの白い帯なし。電話にも「初回無料相談」のラベル */
  .g-spbar { grid-template-columns: 1fr 1fr; gap: 18px 8px; padding: 20px 10px calc(10px + env(safe-area-inset-bottom)); background: none; border-top: 0; pointer-events: none; }
  .g-spbar > * { pointer-events: auto; }
  .g-spbar .g-spbar-tel, .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { position: relative; border: 0; color: #fff; font-family: var(--sans); }
  .g-spbar .g-spbar-tel { grid-column: 1 / -1; display: block; height: auto; padding: 6px 0 7px; border-radius: 10px; background: linear-gradient(#2a8a5b, #15533a); box-shadow: 0 3px 0 #0f3d2a; text-align: center; }
  .g-spbar-tel b { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 24px; font-weight: 700; line-height: 1.3; }
  .g-spbar-tel b svg { width: 22px; height: 22px; }
  .g-spbar-tel small { display: block; margin: 2px 30px 0; padding-top: 2px; border-top: 1px dashed rgba(255,255,255,.5); font-size: 14px; line-height: 1.5; }
  .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { display: flex; align-items: center; justify-content: center; gap: 8px; height: 54px; border-radius: 10px; font-size: 16px; font-weight: 700; line-height: 1.25; }
  .g-spbar .g-spbar-mail { background: linear-gradient(#c9ae63, #9a7f3a); box-shadow: 0 3px 0 #6f5a27; }
  .g-spbar .g-spbar-mail img { width: 24px; height: 24px; filter: brightness(0) invert(1); }
  .g-spbar .g-spbar-line { background: linear-gradient(#22c56a, #05a548); box-shadow: 0 3px 0 #04813a; }
  .g-spbar .g-spbar-line img { width: 26px; height: 26px; }
  .g-spbar em { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 0 10px; border: 1.5px solid currentColor; border-radius: 999px; background: #fff; font-style: normal; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
  .g-spbar-tel em { color: var(--green); }
  .g-spbar-mail em { color: #9a7f3a; }
  .g-spbar-line em { color: #05a548; }
  /* 下のボタンが高くなった分、フッターの最後の行が隠れないよう下を空ける */
  body .g-footer { padding-bottom: 176px; }
}
@media (max-width: 360px) {
  .hero-title { font-size: 31px; }
  .hero-sub { font-size: 15px; }
  .hero-name-n { top: auto; left: 2%; }
  .hero-name-m { top: auto; right: 1%; }
  .g-spbar-tel b { font-size: 21px; }
  .g-spbar .g-spbar-mail, .g-spbar .g-spbar-line { gap: 5px; font-size: 15px; }
}