@charset "UTF-8";
/* =========================================================================
Practice-area detail page (遺産相続) — page-specific styles ONLY.
Shared tokens / header / footer / buttons / .container live in style.css.
Load order: style.css (shared) → service.css (this page).
========================================================================= */
br.mb-only { display: none; }
/* Narrow content wrapper used by most sections on this page (~972px) */
.practice-narrow { width: 100%; max-width: 1020px; margin-inline: auto; padding-inline: 24px; }
/* Shared heading treatments for this page */
.practice-h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(32px, 40px, 40px);
text-align: center;
color: var(--text);
letter-spacing: .08em;
line-height: 1.4;
}
.practice-h2--line { color: var(--red); }
.practice-h2--line > span,
.practice-h2.has-line > span { display: inline-block; padding-bottom: 7px; border-bottom: 2px solid var(--red); }
.practice-lead { text-align: center; font-size: 16px; color: var(--text); margin-top: 22px; }
/* =========================================================================
Breadcrumb / page head (red band)
→ 全ページ共通のため base（css/oc-scs.css）へ移設。ここでは定義しない。
========================================================================= */
/* =========================================================================
Section 1 — intro (text + image)
========================================================================= */
/* .page-head → .practice-intro-text の縦余白を全ページ共通化：
上パディングを下と同じ clamp に統一し（旧 padding-top:0 を撤去）、
グリッドを上揃え（align-items:start）にして、テキスト量に依存しない一定の余白にする。 */
.practice-intro { padding-block: clamp(48px, 7vw, 90px); }
.practice-intro-grid { max-width: 1100px; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: 1fr 408px; gap: 60px; align-items: start; }
.practice-intro-text h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); color: var(--red); line-height: 1.6; letter-spacing: .03em; margin-bottom: 30px; }
.practice-intro-text p { font-size: 16px; color: var(--text); }
.practice-intro-text b { font-weight: 700; }
.practice-intro-img {
margin-top: -160px;
}
.practice-intro-img img { width: 100%; height: 510px; object-fit: cover; }
/* =========================================================================
Section 2 — "お困りではありませんか？" checklist
========================================================================= */
.practice-worry { padding-block: clamp(40px, 6vw, 80px); }
.practice-worry .practice-lead { margin-bottom: 40px; }
.practice-worry-box {
max-width: 820px;
position: relative;
margin-inline: auto;
background: var(--beige);
padding: clamp(30px, 5vw, 40px) clamp(120px, 8vw, 160px);
}
.practice-worry-list { max-width: 500px; margin-inline: auto; }
.practice-worry-list li { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; font-size: 16px; }
.practice-worry-list li + li { border-top: 1px solid var(--line); }
.practice-worry-list .chk { flex: none; width: 22px; height: 22px; margin-top: 4px; color: var(--red); }
.practice-worry-list .chk svg { width: 100%; height: 100%; }
.practice-worry-illust.dt { position: absolute; right: -5px; bottom: -50px; width: 120px; }
.practice-worry-illust.mb { display: none; }
.practice-worry-note { text-align: center; margin-top: 30px; font-size: 16px; }
.practice-worry-note a { border-bottom: 1px solid var(--text); font-weight: 700; }
.practice-worry-note a:hover { color: var(--red); border-color: var(--red); }
/* sz-worry 拡張（離婚「主要な論点」など）：複数の論点をカード分割し、各カードにチェックリスト。
既存 sz-worry のチェック体裁（sz-check.svg + line 区切り）を踏襲。 */
.practice-worry--ronten .practice-ronten-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
max-width: 1020px; margin: 0 auto;
}
.practice-ronten-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 0 24px 20px; }
.practice-ronten-card h3 {
background: var(--red); color: #fff; font-family: var(--font-serif); font-weight: 600;
font-size: 17px; text-align: center; padding: 13px 10px; margin: 0 -24px 6px;
border-radius: 8px 8px 0 0; letter-spacing: .03em;
}
.practice-ronten-card ul li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; font-size: 15px; line-height: 1.7; }
.practice-ronten-card ul li + li { border-top: 1px solid var(--line); }
.practice-ronten-card .chk { flex: none; width: 20px; height: 20px; margin-top: 3px; }
/* 「主要な論点」（離婚ページ P56-57）：独自カードデザインを作らず、共通の practice-worry-box を
そのまま流用し、論点見出し（__label）だけを追加する拡張。ボックスは横並びにせず、通常の
worry-box と同じ幅・体裁のまま縦1列で積む（--stack）。縦間隔は feature 節と同等に揃える。
※ --stack はこのセクション限定。counsel（法律相談）の .cols-2 カード配置には影響しない。 */
.practice-worry--ronten .practice-ronten-grid--stack {
grid-template-columns: 1fr;
max-width: 820px;
}
/* グリッドアイテムでは base の margin-inline:auto が収縮を招くため 0 にし、セル幅いっぱいに揃える
（全ボックスを同じ幅にする。体裁・背景・padding は base worry-box を継承）。 */
.practice-worry-box--ronten { margin-inline: 0; }
.practice-worry-box__label {
font-family: var(--font-serif);
font-weight: 600;
font-size: 18px;
color: var(--red);
text-align: center;
letter-spacing: .03em;
padding-bottom: 12px;
margin-bottom: 6px;
border-bottom: 1px solid var(--line);
}
.practice-worry-box--ronten .practice-worry-list li:first-child { padding-top: 14px; }
/* 中小企業法務ページ専用の軽量コンポーネント（顧問誘導バナー／企業向けセミナー案内）。
共通セクションに影響しないよう chusho- で名前空間を限定。 */
.chusho-band { padding-block: clamp(36px, 5vw, 64px); }
.chusho-band .inner { max-width: 900px; margin-inline: auto; background: #fbe8ec; padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); text-align: center; }
.chusho-band h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); color: var(--red); margin-bottom: 18px; letter-spacing: .03em; }
.chusho-band p { font-size: 16px; color: var(--text); text-align: left; max-width: 700px; margin: 0 auto 10px; line-height: 1.9; }
.chusho-band .chusho-btn-wrap { margin-top: 26px; }
.chusho-seminar { padding-block: clamp(36px, 5vw, 64px); }
.chusho-seminar .inner { max-width: 900px; margin-inline: auto; padding-inline: 24px; }
.chusho-seminar h2 { text-align: center; }
.chusho-seminar .lead { text-align: center; margin: 16px auto 28px; max-width: 760px; font-size: 16px; line-height: 1.9; }
.chusho-seminar .seminar-list { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px 28px; }
.chusho-seminar .seminar-list .st { font-weight: 700; color: var(--red); margin-bottom: 10px; text-align: center; }
.chusho-seminar .seminar-list li { display: flex; gap: 4px; align-items: flex-start; padding: 11px 0; font-size: 15px; }
.chusho-seminar .seminar-list li + li { border-top: 1px solid var(--line); }
/* チェック画像は使わず「・」の箇条書きに。::before を独立した flex アイテムにして、
本文が2行以上になっても先頭位置がぶら下げ整列するようにする（seminar-list 限定）。 */
.chusho-seminar .seminar-list li::before { content: "・"; flex: none; }
@media (max-width: 767px) {
.chusho-band .inner { padding: 24px 18px; }
.chusho-band p { line-height: 1.85; }
}
/* 顧問弁護士：顧問契約プラン比較表（sz-services 拡張）。SP は横スクロールで全列閲覧可。 */
.komon-plans { padding-block: clamp(40px, 6vw, 72px); }
.komon-plans .practice-lead { margin-bottom: 28px; }
.komon-plans-scroll { max-width: 1020px; margin-inline: auto; overflow-x: auto; }
.komon-plans-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #fff; }
.komon-plans-table th, .komon-plans-table td { border: 1px solid var(--line); padding: 14px 16px; font-size: 14px; text-align: center; vertical-align: middle; }
.komon-plans-table thead th { background: var(--red); color: #fff; font-family: var(--font-serif); font-weight: 600; }
.komon-plans-table thead th.plan-col .plan-en { display: block; font-size: 15px; letter-spacing: .06em; }
.komon-plans-table thead th.plan-col .plan-tag { display: block; font-size: 12px; font-weight: 400; margin-top: 3px; }
.komon-plans-table tbody th { background: #fbe8ec; color: var(--text); text-align: left; font-weight: 700; white-space: nowrap; }
.komon-plans-table tbody tr:nth-child(even) td { background: #faf7f3; }
.komon-plans-table .price { color: var(--red); font-weight: 700; font-size: 16px; }
.komon-plans-notes { max-width: 1020px; margin: 20px auto 0; }
.komon-plans-notes li { font-size: 13px; color: var(--text); line-height: 1.85; padding-left: 1.1em; text-indent: -1.1em; }
.komon-plans-notes li::before { content: "※"; }
/* 顧問開始フロー step2 の「★重要」バッジ */
.practice-steps-list .st-tag { display: inline-block; margin-left: 10px; padding: 2px 10px; font-size: 12px; font-weight: 700; color: #fff; background: var(--red); border-radius: 999px; vertical-align: middle; letter-spacing: .04em; }
/* CTA 導入部の補足（特設サイト誘導など）：本文よりやや小さめ＋リンクは赤下線 */
.practice-cta-note { margin-top: 18px; font-size: 14px; color: #666; line-height: 1.9; }
.practice-cta-note a { color: var(--red); font-weight: 700; border-bottom: 1px solid var(--red); }
.practice-cta-note a:hover { opacity: .8; }
/* 論点カードを2列で並べる派生（法律相談「よくいただくご相談」4カテゴリ等） */
.practice-worry--ronten .practice-ronten-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 900px; }
@media (max-width: 767px) {
.practice-worry--ronten .practice-ronten-grid { grid-template-columns: 1fr; gap: 16px; padding-inline: 15px; }
.practice-worry--ronten .practice-ronten-grid.cols-2 { grid-template-columns: 1fr; }
/* 縦積み（離婚）は SP でも feature 節に近い縦間隔を確保（カード配置の 16px より広め）。 */
.practice-worry--ronten .practice-ronten-grid--stack { gap: 32px; }
.practice-ronten-card ul li:first-child { padding-top: 6px; }
}
/* =========================================================================
Section 3 — 遺産分割 (bg photo + white panel + people + speech bubbles)
========================================================================= */
.practice-topic {
position: relative;
margin-bottom: 60px;
}
/* 背景専用のため CSS background 化（旧 ![]()
と等価）。 */
.practice-topic-bg { height: 400px; overflow: hidden; background-image: url("../img/scs/sz-bunkatsu-bg.webp"); background-repeat: no-repeat; background-position: center 35%; background-size: cover; }
.practice-topic-panel { background: #fff; max-width: 974px; margin: -224px auto 0; position: relative; z-index: 2; padding: 60px clamp(24px, 5vw, 80px) 40px; text-align: center; }
.practice-topic-panel h2 { margin-bottom: 26px; }
.practice-topic-panel p { font-size: 16px; color: var(--text); text-align: left; }
.practice-topic-figure .figure.dt { position: relative; max-width: 942px; margin: 20px auto 0; min-height: 330px; }
.practice-topic-figure .figure.mb { display: none; }
/* 中間幅（768〜942px）のみ：親幅に合わせて画像を縮小し右へのはみ出しを防止。
viewBox 942/325 の比率を width:100% + height:auto で維持。min-height の縦伸びを解除。 */
@media (min-width: 768px) and (max-width: 942px) {
.practice-topic-figure .figure.dt { width: 100%; max-width: 942px; height: auto; min-height: 0; }
}
.practice-people { display: block; width: 420px; max-width: 80%; margin: 40px auto 0; }
/* Speech bubbles: shape = CSS blob, text = HTML (per Figma comment: text must be HTML, position responsive) */
.practice-bubble {
position: absolute; width: 300px; padding: 30px 34px; color: #fff; text-align: center;
font-size: 16px; line-height: 1.6; letter-spacing: .02em;
background: #6f6f6f; border-radius: 46% 54% 55% 45% / 58% 56% 44% 42%;
}
.practice-bubble.b1 { left: 0; top: 60px; }
.practice-bubble.b2 { left: 50%; top: 0; transform: translateX(-50%); background: #666; }
.practice-bubble.b3 { right: 0; top: 70px; }
/* 遺産分割系（遺産調査・相続放棄・遺言/離婚・交通事故 等）の「ご相談の多いお悩み」吹き出し。
estate-worries.svg はテキストがアウトライン化されトピック別に文言変更できないため、
トピックごとに文言を差し替えられるよう吹き出しを HTML テキストで実装（Figma コメント準拠）。
形状（blob）は .practice-bubble と同じ border-radius を踏襲。既存の遺産分割 SVG 実装には影響しない。 */
.practice-topic-figure.is-html { max-width: 942px; margin: 34px auto 0; }
.practice-bubbles-label {
text-align: center; font-family: var(--font-serif); font-weight: 600;
color: var(--red); font-size: 18px; letter-spacing: .04em; margin-bottom: 24px;
}
.practice-bubbles { display: flex; justify-content: center; align-items: stretch; gap: 24px; flex-wrap: wrap; }
.practice-bubbles li {
flex: 1 1 250px; max-width: 290px; min-height: 130px;
display: flex; align-items: center; justify-content: center;
background: #6f6f6f; color: #fff; text-align: center;
font-size: 15px; line-height: 1.7; letter-spacing: .02em;
padding: 24px 26px; border-radius: 46% 54% 55% 45% / 58% 56% 44% 42%;
}
.practice-bubbles li:nth-child(2) { background: #666; }
/* =========================================================================
Section 4 — 遺産分割のポイント (feature rows)
========================================================================= */
.practice-points { padding-bottom: clamp(48px, 7vw, 90px); }
.practice-points-head {
/* PC(≥1002px)は従来どおり 972px 固定・高さ48px。それ未満ではビューポート幅に追従させ、
768px〜971px の隙間で 972px 固定のまま右側が画面外に切れる問題を防ぐ（左右15pxの余白を確保）。
height は min-height 化し、帯幅が縮んで見出しが折り返した場合も高さが伸びてはみ出さないようにする
（1行時の見た目は48px固定と不変）。≤767px は下の width:100%/height:auto でさらに調整。 */
width: min(972px, calc(100% - 30px));
min-height: 48px;
background: #fbe8ec;
text-align: center;
padding: 0;
margin-inline: auto;
margin-bottom: 20px;
}
.practice-points-head h2 {
font-family: var(--font-serif);
font-weight: 600;
font-size: 26px;
color: var(--text);
letter-spacing: .03em;
line-height: 47px;
}
.practice-feature {
display: grid;
grid-template-columns: 1fr 320px;
gap: 0 48px;
align-items: start;
margin-bottom: clamp(40px, 5vw, 56px);
}
.practice-feature:last-child { margin-bottom: 0; }
.practice-feature-num { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.practice-feature-num .n { font-family: var(--font-display); font-size: 24px; color: var(--red); flex: none; }
.practice-feature-num .rule { flex: 1; height: 1px; background: var(--red); }
.practice-feature h3 { grid-column: 1; font-family: var(--font-serif); font-weight: 600; font-size: clamp(20px, 2.2vw, 26px); color: var(--text); letter-spacing: .03em; }
.practice-feature .ft-body { grid-column: 1; font-size: 15px; color: var(--text); margin-top: 18px; }
.practice-feature .ft-img {
grid-column: 2;
grid-row: 1 / span 3;
margin-top: 20px;
}
.practice-feature .ft-img img { width: 100%; height: 180px; object-fit: cover; }
/* practice-feature 本文列（左）に置くボタン（法律相談「費用が気になる」の料金表ボタン等）。
テキスト列に収め、本文との間に余白を確保。SP は order で本文の後ろに回す。ft-btn を持つ項目のみ対象。 */
.practice-feature .ft-btn { grid-column: 1; order: 4; margin-top: 20px; }
/* 見出し（h3）を持たない practice-feature（交通事故「将来を見据えた損害賠償請求」など）。
PC では h3・番号が無い分の上マージンを詰め、本文と画像を見出し直下で上端揃えにする。
レイアウト（2カラム幅・gap・画像サイズ・object-fit・SPの縦並び）は base をそのまま流用。 */
@media (min-width: 768px) {
.practice-feature--no-title .ft-body,
.practice-feature--no-title .ft-img { margin-top: 0; }
}
.practice-points-note { text-align: center; font-size: 16px; color: var(--text); margin-top: 8px; }
/* =========================================================================
Section 5 — 解決事例 (case study card)
========================================================================= */
.site-section.practice-case .site-container {
background: var(--beige);
padding-block: clamp(48px, 7vw, 90px);
}
.practice-case .practice-h2 { margin-bottom: clamp(30px, 60px, 60px); }
.practice-case-card {
max-width: 972px;
margin-inline: auto;
background: #fff;
border: 1px solid var(--red);
padding: clamp(30px, 60px, 60px) clamp(55px, 110px, 110px);
}
.practice-case-card h3 {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(20px, 2.2vw, 26px);
color: var(--red);
text-align: center;
letter-spacing: .03em;
padding-bottom: 16px;
margin-bottom: 34px;
text-decoration: underline;
text-underline-offset: 9px;
text-decoration-thickness: 1px;
}
.practice-case-block { margin-bottom: 40px; }
.practice-case-block:last-child { margin-bottom: 0; }
.practice-case-block .lbl {
color: var(--red);
font-size: 16px;
font-weight: 500;
line-height: 28px;
letter-spacing: 0.02em;
margin-bottom: 0;
}
.practice-case-block p {
font-size: 16px;
font-weight: 400;
line-height: 1.8;
color: var(--text);
letter-spacing: 0.02em;
}
.practice-case-block b { font-weight: 700; }
.practice-case-block.has-img { display: grid; grid-template-columns: 1fr 200px; gap: 0 32px; align-items: start; }
.practice-case-block.has-img .txt { grid-column: 1; }
.practice-case-block.has-img .lbl { grid-column: 1; }
/* PC/SP共通で1枚の画像を使用。比率を崩さずレスポンシブ表示（object-fitでトリミングしない）。
横幅はグリッド列(200px)に合わせて縮小し、高さは自動＝縦横比維持。 */
.practice-case-block.has-img .practice-case-image { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; }
/* =========================================================================
Section 6 — 提供サービス (2-col table)
========================================================================= */
.practice-services { padding-block: clamp(48px, 7vw, 90px); }
.practice-services .practice-lead { margin-bottom: clamp(32px, 5vw, 48px); }
/* リード文（practice-lead）が無いサービス節（離婚ページ等）で、見出し直後に表が来る場合の
見出し→表の余白。lead の margin-bottom と同値にして他ページと余白を統一。隣接兄弟セレクタで
リードがある他ページ（h2 の直後が lead）にはマッチせず影響しない。 */
.practice-services .practice-h2 + .practice-table { margin-top: clamp(32px, 5vw, 48px); }
.practice-table { max-width: 1020px; margin-inline: auto; }
.practice-table dl { display: grid; grid-template-columns: 385px 1fr; }
.practice-table dt {
background: var(--red);
color: #fff;
font-weight: 700;
font-size: 16px;
padding: 24px 30px;
display: flex;
align-items: center;
font-family: var(--font-sans);
border-left: 1px solid var(--dl-border);
border-bottom: 1px solid var(--dl-border);
letter-spacing: .02em;
}
.practice-table dd {
margin: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.8;
padding: 13px 30px;
color: var(--text);
font-family: var(--font-sans);
border: 1px solid var(--dl-border);
border-top: none;
display: flex; align-items: center;
}
.practice-table dd:first-of-type {
border-top: 1px solid var(--dl-border);
}
.practice-table dt:first-of-type {
border-top: 1px solid var(--dl-border);
}
/* =========================================================================
Section 7 — 解決までのステップ (timeline)
========================================================================= */
.site-section.practice-steps .site-container {
background: var(--beige);
padding-block: clamp(48px, 7vw, 90px);
}
.practice-steps .practice-h2 { margin-bottom: clamp(40px, 64px, 64px); }
.practice-steps-list { max-width: 1020px; margin-inline: auto; position: relative; }
.practice-steps-list::before { content: ""; position: absolute; left: 18px; top: 18px; bottom: 18px; width: 1px; background: var(--red); opacity: .5; }
.practice-step { display: flex; align-items: flex-start; gap: 24px; padding-bottom: 40px; position: relative; }
.practice-step:last-child { padding-bottom: 0; }
.practice-step .st-num { flex: none; width: 37px; height: 37px; border-radius: 2px; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 20px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.practice-step .st-body { padding-top: 2px; }
.practice-step h3 { font-family: var(--font-serif); font-weight: 600; font-size: 21px; color: var(--red); letter-spacing: .03em; margin-bottom: 6px; }
.practice-step p { font-size: 15px; color: var(--text); }
/* =========================================================================
Section 8 — page CTA (heading + red band)
========================================================================= */
.practice-cta-intro { padding-block: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 48px); }
.practice-cta-intro .practice-intro-text {
margin: 0 auto;
max-width: 770px;
}
.practice-cta-intro .practice-h2 { margin-bottom: 30px; }
.practice-cta-intro p { max-width: 1020px; margin-inline: auto; padding-inline: 24px; font-size: 16px; color: var(--text); }
.practice-cta-intro b { font-weight: 700; }
.practice-cta-band {
text-align: center;
padding-block: clamp(48px, 7vw, 80px);
padding-top: 0;
}
.practice-cta-band .band-inner {
max-width: 970px;
margin-inline: auto;
background: var(--red);
padding: 60px 90px;
color: #fff;
}
.practice-cta-band h2 { font-family: var(--font-serif); font-weight: 600; letter-spacing: .04em; }
.practice-cta-band .cb-small { color: #fff; font-size: clamp(18px, 2.2vw, 24px); }
.practice-cta-band .cb-big { color: #fff; font-size: clamp(28px, 4vw, 44px); margin-top: 6px; }
.practice-cta-band .cb-lead { margin-top: 26px; font-size: 16px; }
.practice-cta-band .cb-actions { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; margin-top: 34px; }
.practice-cta-band .cb-tel { display: flex; flex-direction: column; align-items: flex-start; }
.practice-cta-band .cb-tel-num {
display: flex;
align-items: center;
gap: 12px;
color: #fff;
font-weight: 700;
font-family: var(--font-num);
line-height: clamp(35px, 4vw, 53px);
font-size: clamp(32px, 4vw, 50px);
}
.practice-cta-band .cb-tel-num .ic { width: 34px; height: 34px; }
.practice-cta-band .cb-tel-hours {
width: 100%;
font-size: 20px;
text-align: center;
}
.practice-cta-band .cb-mail {
height: 80px;
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--red);
font-size: 20px;
font-weight: 500;
letter-spacing: .04em;
padding: 20px 28px;
border-radius: 5px;
background-color: #fff;
transition: background .25s, color .25s;
}
.practice-cta-band .cb-mail:hover {
opacity: 0.9;
}
.practice-cta-band .cb-mail .btn-arw {
width: 27px;
height: auto;
display: block;
transition: transform 0.2s;
}
.practice-cta-band .cb-mail:hover .btn-arw {
transform: translateX(7px);
}
.practice-cta-band .cb-mail .ic { width: 24px; height: 20px; }
.practice-cta-band .cb-mail:hover { background: #fff; color: var(--red); }
.practice-cta-band .cb-mail:hover .arw { color: var(--red); }
/* =========================================================================
Responsive
========================================================================= */
/* Was 900 */
@media (max-width: 767px) {
br.mb-only { display: initial; }
br.dt-only { display: none; }
.practice-h2--line > span,
.practice-h2.has-line > span {
line-height: 1.8em;
border-bottom: none;
text-decoration: underline;
text-underline-offset: 9px;
text-decoration-thickness: 1px;
}
.practice-intro-grid { grid-template-columns: 1fr; gap: 32px; padding-inline: 15px; }
.practice-intro-text { order: 2; }
.practice-intro-text h2 {
font-size: 20px;
line-height: 1.8;
letter-spacing: 0.02em;
margin-bottom: 20px;
}
.practice-intro-img { margin-top: 0; margin-top: 20px; }
.practice-intro-img img { height: unset; width: 100%; aspect-ratio: 346 / 242; }
.site-section.practice-worry .site-container { padding-inline: 15px; }
.site-section.practice-worry .practice-h2 { font-size: 26px; margin-bottom: 20px; }
.practice-worry { padding-top: 0; padding-bottom: 100px; position: relative; }
.practice-worry-list li:first-child { padding-top: 0; }
.practice-worry-list li:last-child { padding-bottom: 0; }
.practice-worry .practice-lead { text-align: left; margin-top: 20px; margin-bottom: 16px; }
.practice-narrow { padding-inline: 15px; }
.practice-feature { grid-template-columns: 1fr; }
.practice-feature h3 { order: 1; font-size: 26px; letter-spacing: .02em; }
.practice-feature .ft-body {
order: 3;
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.02em;
}
.practice-feature .ft-img { grid-column: 1; grid-row: auto; order: 2; }
.practice-feature .ft-img img { height: 220px; }
.practice-table dl { grid-template-columns: 1fr; }
.practice-table dt { padding: 8px 15px; justify-content: center; }
.practice-table dd {
font-size: 16px;
margin-bottom: 20px;
border: 1px solid #aaa;
border-top: none;
padding: 13px 15px;
}
.practice-case-card { padding: 60px 15px; }
.practice-case-card h3 {
font-size: 26px;
text-align: left;
letter-spacing: 0.03em;
border-bottom: none;
text-decoration: underline;
line-height: 1.8;
text-underline-offset: 9px;
text-decoration-thickness: 1px;
}
.practice-case-block p { font-size: 16px; line-height: 1.8; letter-spacing: 0.02em; }
.practice-case-block.has-img { grid-template-columns: 1fr; }
/* SPも同じ1枚画像を使用。sz-feature の画像枠と同じ考え方（全幅・固定高・object-fit:cover）で高さを揃える。 */
.practice-case-block.has-img .practice-case-image { grid-column: 1; grid-row: auto; width: 100%; height: 220px; object-fit: cover; }
.practice-services .practice-lead { text-align: left; }
.practice-step { column-gap: 0; }
.practice-step .st-body { padding-inline: 12px; }
.practice-step h3 { font-size: 20px; line-height: 1.6; letter-spacing: 0.02em; }
.practice-step p { font-size: 16px; line-height: 1.8; letter-spacing: 0.2em; }
.practice-topic-panel {
margin-top: -80px;
padding-top: 40px;
padding-bottom: 40px;
width: calc(100% - 30px);
}
.practice-topic-panel p { text-align: left; }
.practice-topic-bg {
height: 200px;
background-size: 100% 100%; /* 旧 img object-fit:fill と等価（縦横を要素いっぱいに伸長） */
}
.practice-topic-figure { padding: 0 15px; }
.practice-topic-figure .figure.dt { display: none; }
.practice-topic-figure .figure.mb { position: relative; display: block; margin: 20px auto 0; }
.practice-bubble { position: static; width: 100%; max-width: 420px; margin: 0 auto 16px; transform: none; border-radius: 30px; }
.practice-bubble.b2 { transform: none; }
.practice-people { margin-top: 8px; }
/* SP：見出しが2行以上でも背景(#fbe8ec)がテキスト全体を包み、上下に余白が残るよう
固定高さ(48px)をやめて内容可変にする。余白は line-height ではなく padding で確保し、
h2 の line-height:47px（PC用の縦センタリング）も通常値へ戻して自然に折り返させる。 */
.practice-points-head {
width: 100%;
height: auto;
padding: 10px 16px;
box-sizing: border-box;
}
.practice-points-head h2 {
line-height: 1.45;
overflow-wrap: break-word;
}
.practice-points-note {
text-align: left;
}
/* page-head の SP 調整は base（css/oc-scs.css）へ移設 */
.practice-worry-box { padding: 20px 15px; }
.practice-worry-illust.dt { display: none; }
.practice-worry-illust.mb { display: block; position: absolute; right: 20px; bottom: -7px; height: 95px; width: auto; }
.practice-cta-band .cb-actions { flex-direction: column; gap: 24px; }
.practice-cta-band .cb-tel { align-items: center; }
.practice-cta-band .cb-mail {
width: 100%;
max-width: 360px;
justify-content: center;
padding-inline: 15px;
height: 60px;
}
.practice-cta-band .cb-mail span {
font-size: 17px;
}
.practice-cta-intro .practice-h2 {
font-size: 26px;
margin-bottom: 27px;
}
.practice-cta-intro .practice-intro-text {
padding-inline: 15px;
}
.site-section.practice-case .site-container {
padding-inline: 15px;
}
.site-section.practice-services .site-container {
padding-inline: 15px;
}
.site-section.practice-steps .site-container {
padding-inline: 15px;
}
.site-section.practice-cta-band .site-container {
padding-inline: 15px;
}
.practice-steps-list::before { bottom: 148px; }
.practice-cta-band .band-inner {
display: flex;
align-items: center;
flex-direction: column;
padding: 40px 15px;
}
.practice-cta-band .cb-big {
font-size: 32px;
margin-top: 10px;
line-height: 1.5;
}
}
/* =========================================================================
ADDITIONS for 顧問弁護士 page + 弁護士プロフィール/インタビュー page
(reuses .practice-h2, .practice-feature, .practice-narrow, tokens, .btn from above/style.css)
========================================================================= */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Thin breadcrumb under header (下層ページ) */
.page-crumb {
/* border-bottom: 1px solid var(--line); */
}
.page-crumb .crumb-inner {
max-width: 1400px;
margin-inline: auto;
padding: 12px 24px;
}
.page-crumb .breadcrumb { margin: 0; color: var(--text); }
/* ---- 顧問弁護士: intro (士業プラン) ---- */
.komon-plan {
padding: clamp(40px, 6vw, 70px) 0 clamp(40px, 6vw, 70px);
}
.komon-plan .inner {
max-width: 820px;
margin-inline: auto;
padding: 40px 60px;
background: var(--beige);
}
.komon-plan h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px); color: var(--red); letter-spacing: .03em; margin-bottom: 20px; }
.komon-plan p { font-size: 16px; color: var(--text); }
/* ---- Testimonials (顧問企業様からの声) ---- */
.voices {
}
.site-section.voices .site-container {
background: var(--beige);
padding-top: clamp(60px, 7vw, 120px);
padding-bottom: clamp(40px, 7vw, 80px);
}
/* voices は2構成が存在：見出し→一覧（顧問ページ）と、見出し→リード→一覧（法律相談ページ）。
見出しの margin-bottom を 0 にし、「直後の要素までの余白」を隣接兄弟で与えることで、
どちらの構成でも他セクション（services 等）と同じ余白バランス（見出し→リードは近め、
リード→一覧はしっかり空ける）に揃える。komon/counsel それぞれ該当する側だけがマッチする。 */
.voices .practice-h2 { margin-bottom: 0; }
.voices .practice-h2 + .voices-list { margin-top: clamp(32px, 5vw, 48px); }
.voices .practice-lead { margin-bottom: clamp(32px, 5vw, 48px); }
.voices-list {
max-width: 880px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: 24px;
}
.voice { background: #fff; border: 1px solid var(--red); padding: clamp(24px, 3vw, 40px); }
.voice h3 { display: flex; align-items: center; gap: 20px; font-family: var(--font-serif); font-weight: 600; font-size: clamp(18px, 2vw, 22px); color: var(--red); letter-spacing: .03em; margin-bottom: 16px; }
.voice h3::before { content: ""; width: 30px; height: 1px; background: var(--red); flex: none; }
.voice p { font-size: 15px; color: var(--text); }
.voice .attr { text-align: right; font-size: 14px; color: var(--gray); margin-top: 14px; }
/* ---- Feature rows alternating (reuse .practice-feature; add reversed variant) ---- */
.practice-feature--rev { grid-template-columns: 320px 1fr; }
.practice-feature--rev .ft-img { grid-column: 1; grid-row: 1 / span 3; }
.practice-feature--rev .practice-feature-num,
.practice-feature--rev h3,
.practice-feature--rev .ft-body { grid-column: 2; }
.komon-reasons {
padding-top: clamp(60px, 7vw, 120px);
padding-bottom: clamp(60px, 7vw, 120px);
}
.komon-reasons .lead { max-width: 1020px; margin: 0 auto clamp(32px,5vw,56px); padding-inline: 24px; font-size: 16px; }
/* ---- Docs section (ご相談時の資料について) ---- */
.docs {
padding-top: 0;
padding-bottom: 120px;
}
/* docs は既定 padding-top:0（前セクションの下余白で間隔を作る想定）。ただし前が
practice-steps（ベージュ箱で下余白が箱の内側に入る）のとき（法律相談ページ）は境界が
詰まるため、docs が他ページで持つのと同じ上余白（≒ komon-reasons の padding-top）を付与。
隣接兄弟なので前が komon-reasons 等の他ページ docs には影響しない。 */
.practice-steps + .docs { padding-top: clamp(60px, 7vw, 120px); }
.docs .practice-h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.docs-basic {
margin: 0 auto;
max-width: 980px;
background: var(--beige);
padding: clamp(32px,5vw,48px) 24px;
}
.docs-basic .lead {
text-align: center;
font-size: 20px;
padding-bottom: 12px;
max-width: 720px;
margin: 0 auto 36px;
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 1px;
}
.docs-icons { max-width: 900px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.docs-icons .num { font-family: var(--font-display); font-size: 20px; color: var(--red); }
.docs-icons .ic-box { width: 44px; height: 44px; margin: 6px auto 10px; }
.docs-icons .ic-box img { width: 100%; height: 100%; object-fit: contain; }
.docs-icons p { font-size: 14px; color: var(--text); line-height: 1.6; }
.docs-plus {
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0;
}
.docs-plus:before {
content: "";
width: 28px;
height: 5px;
background: var(--red);
display: block;
position: absolute;
}
.docs-plus:after {
content: "";
width: 28px;
height: 5px;
background: var(--red);
transform: rotate(90deg);
display: block;
}
.docs-cond {
margin: 0 auto;
max-width: 972px;
background: #f4f4f4;
padding: clamp(32px,5vw,48px) 40px clamp(40px,6vw,64px);
}
.docs-cond .lead {
text-align: center;
font-size: 16px;
padding-bottom: 12px;
max-width: 660px;
margin: 0 auto 34px;
text-decoration: underline;
text-underline-offset: 11px;
text-decoration-thickness: 1px;
}
.docs-cats { max-width: 940px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 52px; }
.docs-cat h3 {
font-family: var(--font-sans);
font-weight: 500;
font-size: 16px;
line-height: 2em;
color: var(--red);
margin-bottom: 0;
letter-spacing: 0.03em;
}
.docs-cat li {
display: flex;
align-items: flex-start;
column-gap: 6px;
font-size: 15px;
font-weight: 400;
line-height: 1.5em;
letter-spacing: 0.02em;
padding: 3px 0;
}
.docs-cat li::before { content: ""; width: 9px; height: 9px; background: var(--red); flex: none; margin-top: 9px; }
/* =========================================================================
弁護士プロフィール / インタビュー page
========================================================================= */
/* Profile card */
.lawyer-profile { padding-block: clamp(40px, 6vw, 60px); }
.lawyer-profile-inner { max-width: 1100px; margin-inline: auto; padding-inline: 24px; display: grid; grid-template-columns: 408px 1fr; gap: 60px; align-items: start; }
.lp-photo { position: relative; }
.lp-photo img { width: 100%; height: 510px; object-fit: cover; object-position: top center; }
.lp-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.lp-head { display: flex; gap: 13px; align-items: stretch; }
.lp-head .bar { width: 11px; background: var(--red); flex: none; }
.lp-role {
color: var(--text);
font-family: var(--font-serif); /* Noto Serif JP（既存の --font-serif を使用。新規Webフォント読み込みなし） */
font-size: 26px;
font-weight: 400;
line-height: 29px;
}
.lp-name {
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(32px, 4vw, 40px);
color: var(--text);
display: flex;
align-items: baseline;
gap: 24px;
margin-top: 15px;
line-height: 40px;
}
.lp-name .en {
font-family: var(--font-display);
font-size: .65em;
color: var(--gray);
letter-spacing: .04em;
}
.lp-quote {
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(18px, 2vw, 26px);
color: var(--text);
line-height: 1.7;
position: relative;
padding-left: 34px;
margin: 30px 0;
}
.lp-quote .lp-quote-mark {
width: 25px;
top: 0;
left: 0;
position: absolute;
}
.lp-quote .em { color: var(--red); }
.lp-details { border-top: 1px solid var(--line); }
.lp-details .row { display: grid; grid-template-columns: 174px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.lp-details .row dt { display: flex; align-items: center; gap: 8px; margin: 0; }
.lp-details .row dt::before { content: ""; width: 9px; height: 9px; background: var(--red); flex: none; }
.lp-details .row dd { margin: 0; }
/* Bio table (red band with wave top) */
.lawyer-bio {
position: relative;
color: #fff;
margin-top: clamp(40px, 6vw, 70px);
}
.lawyer-bio .site-container {
background: #97152f;
padding-block: clamp(56px, 8vw, 90px);
}
.lawyer-bio .bio-wave { position: absolute; left: 0; top: -1px; width: 100%; height: 60px; transform: translateY(-100%) scaleY(-1); line-height: 0; }
.lawyer-bio .bio-wave img { width: 100%; height: 60px; object-fit: cover; transform: rotate(180deg) translateY(1px); }
.lawyer-bio .bio-inner { max-width: 1100px; margin-inline: auto; padding-inline: 24px; }
.bio-row {
display: grid;
gap: 20px;
grid-template-columns: 133px 1fr;
padding-block: 20px;
align-items: start;
}
.bio-row + .bio-row {
/* border-top: 1px solid rgba(255,255,255,.25); */
}
.bio-row .bio-label {
font-family: var(--font-serif);
font-weight: 600;
font-size: 26px;
line-height: 40px;
letter-spacing: .04em;
color: inherit; /* h2 化でグローバルの見出し色(primary/赤)が効くのを打ち消し、帯の白文字(.lawyer-bio の #fff)を継承 */
}
.bio-row .bio-val {
font-size: 16px;
font-weight: 400;
line-height: 1.8em;
letter-spacing: 0.02em;
margin-top: 7px;
}
.bio-row .bio-val p {
margin-bottom: 16px;
}
.bio-hist { display: grid; grid-template-columns: 90px 1fr; row-gap: 4px; }
.bio-block { margin-bottom: 12px; }
.bio-block:last-child { margin-bottom: 0; }
.bio-block .bt { font-weight: 700; }
/* Interview */
.interview {
position: relative;
}
.interview .site-container {
padding-top: 200px;
}
.interview-bg { position: absolute; top: 0; left: 0; right: 0; height: auto; }
.interview-bg img.dt { width: 100%; height: auto; }
.interview-bg img.mb { display: none;; }
.interview-panel {
background: #fff;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
padding: clamp(40px,5vw,80px) clamp(24px,4vw,52px) clamp(40px,7vw,120px) clamp(24px,4vw,52px);
}
.interview-head { margin-bottom: clamp(40px,6vw,64px); }
.interview-head .eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.interview-head .eyebrow { font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--red); letter-spacing: .12em; }
.interview-head .eyebrow-row .rule { flex: 1; height: 1px; background: var(--red); max-width: 281px; }
.interview-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 40px); color: var(--text); letter-spacing: .03em; line-height: 1.4; }
/* Q&A blocks — alternate automatically via :nth-child (ACF add-safe) */
.qa-list { display: flex; flex-direction: column; gap: clamp(40px, 5vw, 60px); }
.qa { display: grid; grid-template-columns: 1fr 422px; gap: 44px; align-items: start; }
.qa:nth-child(even) { grid-template-columns: 422px 1fr; }
.qa:nth-child(even) .qa-media { grid-column: 1; grid-row: 1; }
.qa:nth-child(even) .qa-text { grid-column: 2; grid-row: 1; }
.qa-media img { width: 100%; height: 306px; object-fit: cover; }
.qa-text .q {
display: flex;
align-items: flex-start;
gap: 20px;
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(15px, 2vw, 18px);
color: var(--red);
letter-spacing: .03em;
margin-bottom: 22px;
}
.qa-text .q::before {
content: "";
width: 50px;
height: 1px;
background: var(--red);
flex: none;
position: relative;
top: 1em;
}
.qa-text p {
font-size: 16px;
line-height: 1.8em;
letter-spacing: 0.02em;
color: var(--text);
}
.qa-text p + p { margin-top: 14px; }
/* ---- Responsive (new pages) ---- */
/* Was 900 */
@media (max-width: 767px) {
.site-section.komon-plan {
padding: 0;
}
.site-section.komon-plan .site-container {
padding: 60px 15px;
}
.site-section.komon-plan .site-container .inner {
padding: 40px 15px;
}
.site-section.voices .site-container { padding-inline: 15px; }
.site-section.voices .voice { padding: 40px 15px 20px 15px; }
.site-section.voices .voice p { font-size: 16px; }
.site-section.docs { padding-bottom: 60px; }
.site-section.docs .site-container { padding-inline: 15px; }
.docs-cond { padding: 40px 15px; }
.practice-h2 {
font-size: 34px;
line-height: 1.4;
margin-bottom: 40px;
letter-spacing: 0.02em;
}
.practice-feature--rev { grid-template-columns: 1fr; }
.practice-feature--rev .ft-img { grid-column: 1; grid-row: auto; }
.practice-feature--rev .practice-feature-num,
.practice-feature--rev h3,
.practice-feature--rev .ft-body { grid-column: 1; }
.lp-head .bar { width: 8px; }
.lawyer-profile-inner { grid-template-columns: 1fr; gap: 28px; max-width: 560px; padding-inline: 15px; }
.lp-photo { margin-inline: 15px; aspect-ratio: 289 / 362; }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lp-details .row { grid-template-columns: 130px 1fr; }
.bio-row { grid-template-columns: 1fr; gap: 8px; }
.bio-hist { grid-template-columns: 80px 1fr; }
.docs-cats { grid-template-columns: 1fr; gap: 20px; }
.qa, .qa:nth-child(even) { grid-template-columns: 1fr; gap: 20px; }
.qa:nth-child(even) .qa-media, .qa:nth-child(even) .qa-text { grid-column: 1; }
.qa-media { grid-row: 1 !important; }
.qa-text { grid-row: 2 !important; }
.qa-media img { height: 240px; }
.interview-panel {
margin-top: 0;
margin-inline: 15px;
padding: 40px 0 30px 0;
}
.interview-head { padding-inline: 15px; }
.komon-plan h2 { font-size: 24px; }
.komon-plan p { font-size: 16px; color: var(--text); }
.komon-reasons .lead { padding-inline: 15px; }
.docs-cond .lead { font-size: 20px; line-height: 1.8; text-underline-offset: 7px; }
/* Was 640 */
.docs-basic { padding-inline: 15px; }
.docs-basic .lead {
font-size: 20px;
line-height: 1.8;
letter-spacing: 0.03em;
}
.docs-icons { grid-template-columns: repeat(2, 1fr); gap: 20px; }
.docs-plus {
padding: 25px 0;
}
.lawyer-bio .site-container { padding-bottom: 20px; }
.lp-name { font-size: 31px; line-height: 1; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.lp-name .en { width: 100%; font-size: 16px; line-height: 1; }
.lp-quote p { font-size: 20px; line-height: 1.8; letter-spacing: 0.02em; }
.lawyer-bio .bio-inner { padding-inline: 15px; }
.interview-head h2 { font-size: 32px; line-height: 1.8; }
.qa-list--text .qa {
flex-direction: column;
}
.qa--text .qa-text {
flex: 0 0 auto;
order: 2;
}
.qa--text .qa-image-wrap {
width: 100%;
flex: 0 0 auto;
aspect-ratio: 345 / 230;
}
.qa-text .q { column-gap: 8px; }
.qa-text .q::before { width: 20px; }
.interview-bg { position: absolute; top: 0; left: 0; right: 0; height: auto; }
.interview-bg img.mb { display: block; width: 100%; height: auto; }
.interview-bg img.dt { display: none;; }
}
/* =========================================================================
author.php 追加分（開発者 ACF の実データに合わせた描画）
- インタビュー項目は画像フィールドが無いためテキストのみ（左右交互は画像がある場合のみ）
========================================================================= */
.qa-list--text .qa {
display: flex;
column-gap: 37px;
align-items: flex-start;
}
.qa--text .qa-text {
flex: 1 0 1px;
}
.qa-list--text .qa.is-image-left .qa-text {
order: 2;
}
/* 画像なし項目（is-text-only）：画像wrapは出力しないが、PCでは本文の横幅を画像あり項目の
テキストカラムと同じ幅に揃える（画像 flex-basis 38% ＋ column-gap 37px の残り = calc(62% - 37px)）。
全幅には広げず、右側は空白（要素は無し）。SPは既存レイアウトのまま（横幅は現状維持）。 */
@media (min-width: 768px) {
.qa--text.is-text-only .qa-text {
flex: none;
width: calc(62% - 37px);
}
}
.qa--text .qa-image-wrap {
flex: 0 0 38%;
aspect-ratio: 422 / 306;
}
.qa--text .qa-image-wrap .qa-image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* キャッチコピーが WYSIWYG（）で入る場合の調整 */
.lp-quote p { margin: 0; }
.lp-quote p + p { margin-top: .4em; }
.lp-quote p em { color: var(--red); font-style: normal; /* em の標準 italic を解除（強調色・サイズ・weight は維持） */ }
/* 関連記事 */
.lawyer-posts { background: var(--beige); }
.lp-post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin-inline: auto; }
.lp-post-list a { display: flex; gap: 16px; align-items: center; background: #fff; padding: 12px; transition: box-shadow .25s; }
.lp-post-list a:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .07); }
.lp-post-thumb { flex: none; width: 96px; height: 72px; overflow: hidden; }
.lp-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp-post-body { display: flex; flex-direction: column; gap: 4px; }
.lp-post-body time { font-size: 13px; color: var(--gray); }
.lp-post-title { font-size: 15px; color: var(--text); line-height: 1.6; }
@media (max-width: 640px) { .lp-post-list { grid-template-columns: 1fr; } }
/* =========================================================================
よくある質問（FAQ）ページ — page-faqs.php / oc_cpt_qa
下層ページ共通の page-head（赤帯）＋サイト共通トークンに合わせた Q&A アコーディオン。
アコーディオンは JS 不要の / で実装（他ページへの影響なし）。
クラスは faq-* / faq-item__* に限定し、既存の hp-faq / faq-accordion ブロックと衝突させない。
========================================================================= */
.faq-section { padding-block: clamp(48px, 7vw, 90px); }
.faq-container { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: 24px; }
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-item {
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
overflow: hidden;
}
/* 質問行（クリックで開閉。全体がクリック可能） */
.faq-item__q {
display: flex;
align-items: flex-start;
gap: 16px;
padding: clamp(18px, 2.5vw, 22px) clamp(18px, 3vw, 28px);
cursor: pointer;
list-style: none;
transition: background-color .2s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
.faq-item__q:hover { background: var(--beige); }
}
/* Q / A バッジ（Q=赤丸／A=赤縁の白丸） */
.faq-item__badge {
flex: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-serif);
font-weight: 600;
font-size: 17px;
line-height: 1;
background: var(--red);
color: #fff;
}
.faq-item__badge--a {
background: #fff;
color: var(--red);
border: 1px solid var(--red);
}
.faq-item__q-text {
flex: 1 1 auto;
min-width: 0;
padding-top: 4px;
font-family: var(--font-serif);
font-weight: 600;
font-size: clamp(16px, 2vw, 18px);
line-height: 1.6;
color: var(--text);
word-break: break-word;
}
/* ＋ / − トグル */
.faq-item__toggle {
flex: none;
position: relative;
width: 20px;
height: 20px;
margin-top: 7px;
}
.faq-item__toggle::before,
.faq-item__toggle::after {
content: "";
position: absolute;
background: var(--red);
}
.faq-item__toggle::before {
top: 50%;
left: 0;
width: 100%;
height: 2px;
transform: translateY(-50%);
}
.faq-item__toggle::after {
left: 50%;
top: 0;
width: 2px;
height: 100%;
transform: translateX(-50%);
transition: opacity .2s ease, transform .2s ease;
}
.faq-item[open] .faq-item__toggle::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
}
/* 回答ブロック */
.faq-item__a {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 4px clamp(18px, 3vw, 28px) clamp(20px, 3vw, 26px);
border-top: 1px solid #ececec;
margin-top: 4px;
}
.faq-item[open] .faq-item__a { animation: faqFadeIn .25s ease; }
@keyframes faqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.faq-item__a-body {
flex: 1 1 auto;
min-width: 0;
padding-top: 5px;
font-size: clamp(15px, 1.8vw, 16px);
line-height: 1.9;
color: var(--text);
}
.faq-item__a-body > :first-child { margin-top: 0; }
.faq-item__a-body > :last-child { margin-bottom: 0; }
.faq-item__a-body p { margin: 0; }
.faq-item__a-body p + p { margin-top: .8em; }
.faq-item__a-body a { color: var(--red); text-decoration: underline; }
.faq-item__a-body a:hover { text-decoration: none; }
.faq-item__a-body ul,
.faq-item__a-body ol { margin: .6em 0; padding-left: 1.4em; }
.faq-item__a-body ul { list-style: disc; }
.faq-item__a-body ol { list-style: decimal; }
.faq-item__a-body li { margin: .2em 0; }
.faq-item__a-body strong,
.faq-item__a-body b { font-weight: 700; }
.faq-empty {
text-align: center;
font-size: 16px;
color: var(--text);
padding: clamp(40px, 8vw, 80px) 0;
}
@media (prefers-reduced-motion: reduce) {
.faq-item[open] .faq-item__a { animation: none; }
.faq-item__toggle::after { transition: none; }
}
@media (max-width: 767px) {
.faq-container { padding-inline: 16px; }
.faq-list { gap: 12px; }
.faq-item__q { gap: 10px; padding: 16px; }
.faq-item__badge { width: 26px; height: 26px; font-size: 15px; }
.faq-item__q-text { padding-top: 2px; font-size: 15px; }
.faq-item__toggle { width: 16px; height: 16px; margin-top: 5px; }
.faq-item__a { gap: 10px; padding: 4px 16px 18px; }
.faq-item__a-body { padding-top: 3px; font-size: 15px; line-height: 1.85; }
}
/* Author: seminars and lectures below the interview. */
.lawyer-seminars { padding: clamp(40px,5vw,64px) 24px clamp(60px,7vw,100px); background: #FAF5F2; }
.lawyer-seminars-inner { max-width: 1200px; margin-inline: auto; padding: clamp(40px,5vw,80px) clamp(24px,4vw,52px); background: #fff; }
.lawyer-seminars-head { margin-bottom: clamp(32px,4vw,48px); }
.lawyer-seminars-head .eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.lawyer-seminars-head .eyebrow { font-family: var(--font-serif); font-weight: 600; font-size: 16px; color: var(--red); letter-spacing: .12em; }
.lawyer-seminars-head .rule { flex: 1; height: 1px; background: var(--red); max-width: 281px; }
.lawyer-seminars-head h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px,3.4vw,40px); color: var(--text); letter-spacing: .03em; line-height: 1.4; }
.lawyer-seminars-content { font-size: 16px; line-height: 1.8; letter-spacing: .02em; overflow-wrap: anywhere; }
.lawyer-seminars-content p + p { margin-top: 1em; }
.lawyer-seminars-content > h3,
.lawyer-seminars-content > p:has(+ ul),
.lawyer-seminars-content > p:has(+ ol) { margin: 0 0 20px; padding-left: 16px; border-left: 3px solid var(--red); font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--text); line-height: 1.6; }
.lawyer-seminars-content ul { list-style: disc; margin: 0; padding-left: 1.5em; }
.lawyer-seminars-content ol { list-style: decimal; margin: 0; padding-left: 1.5em; }
.lawyer-seminars-content li { padding-left: 4px; }
.lawyer-seminars-content li + li { margin-top: 12px; }
.lawyer-seminars-content li::marker { color: var(--red); }
.lawyer-seminars-content ul + p,
.lawyer-seminars-content ol + p,
.lawyer-seminars-content ul + h3,
.lawyer-seminars-content ol + h3 { margin-top: 40px; }
.lawyer-seminars-content p + ul,
.lawyer-seminars-content p + ol { margin-top: 16px; }
.lawyer-seminars-content a { color: var(--red); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 834px) {
.lawyer-seminars { padding: 30px 15px 40px; }
.lawyer-seminars-inner { padding: 32px 15px; }
.lawyer-seminars-head { margin-bottom: 28px; }
.lawyer-seminars-head .eyebrow-row { gap: 12px; margin-bottom: 14px; }
.lawyer-seminars-head .eyebrow { font-size: 12px; }
.lawyer-seminars-head h2 { font-size: 28px; line-height: 1.6; }
.lawyer-seminars-content { font-size: 14px; line-height: 1.85; }
.lawyer-seminars-content > h3,
.lawyer-seminars-content > p:has(+ ul),
.lawyer-seminars-content > p:has(+ ol) { padding-left: 12px; font-size: 18px; }
.lawyer-seminars-content ul + p,
.lawyer-seminars-content ol + p,
.lawyer-seminars-content ul + h3,
.lawyer-seminars-content ol + h3 { margin-top: 32px; }
}