/* こうの法律事務所 姉妹サイト共通の見た目。
   決定（2026-10-22）：A＋C＝紺×白・ロゴ・BIZ UDPゴシック 本文18px・行間1.95
   （Drive WEBマーケティング/WEB集客_デザイン方針_20261022.md §3・§7・§7-2）。
   柱ごとの差し色は body.pillar-<柱> の --accent2 だけを替える（姉妹サイトの統一感は土台で、違いは差し色で）。
   「動き」は base.njk 末尾の script が html に .motion を付けたときだけ効く。
   JS 無効・?static・prefers-reduced-motion では全部そのまま見える（内容・導線・表示事項は HTML＋CSS で完結）。 */

:root {
  --bg: #ffffff; --ink: #1F2937; --muted: #5B677A; --line: #D8E2EC; --soft: #EAF7FD;
  --accent: #00386E;   /* 紺（共通） */
  --accent2: #009FE3;  /* 差し色：顧問＝シアン（ブランドの値） */
  --link: #00479D;
  --font: "BIZ UDPGothic", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --font-h: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
body.pillar-saiken { --accent2: #1E7F6B; }   /* 債権回収＝深緑（仮置き） */
body.pillar-rikon { --accent2: #7A4E9E; }    /* 離婚＝葡萄（2026-10-22 深夜 先生決定。旧・相続の仮置きを引き継ぐ） */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 18px/1.95 var(--font); color: var(--ink); background: var(--bg); border-top: 3px solid var(--accent2); }
a { color: var(--link); }
img { max-width: 100%; }
.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.4rem; }

/* 下書き表示（site.json の draft が true の間） */
.draft { background: #fff4d6; color: #6b4a00; border-bottom: 1px solid #e8c877; font-size: .9rem; padding: .4rem 0; font-family: var(--font-h); }

/* ヘッダー（ロゴ＋サイト名＋ナビ） */
header.site { position: sticky; top: 0; z-index: 10; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1.5rem; padding-top: .9rem; padding-bottom: .8rem; }
.brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--accent); }
.brand img { height: 2rem; width: auto; display: block; }
.brand .site-name { font-family: var(--font-h); font-weight: 700; font-size: 1.02rem; line-height: 1.3; padding-left: .9rem; border-left: 1px solid var(--line); }
nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .15rem 1.25rem; font-size: .9rem; font-family: var(--font-h); }
nav.main a { color: var(--accent); text-decoration: none; font-weight: 500; }
nav.main a:hover { text-decoration: underline; text-decoration-color: var(--accent2); text-underline-offset: .3em; }
nav.main a[aria-current] { font-weight: 700; border-bottom: 2px solid var(--accent2); }

main { padding: 0 0 3rem; }

/* パンくず */
.crumbs { font-family: var(--font-h); font-size: .82rem; color: var(--muted); margin: 1.6rem 0 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.crumbs li + li::before { content: "›"; margin-right: .3rem; }
.crumbs a { color: var(--muted); text-decoration: none; }

/* ===== 本文ページの型（article.page）：幅46rem・結論の箱→表→本文→よくある問い→問い合わせ→最終更新 ===== */
article.page { max-width: 46rem; }
article.page h1 { font-family: var(--font-h); color: var(--accent); font-size: clamp(1.55rem, 4.2vw, 2.2rem); line-height: 1.4; margin: .8rem 0 1.2rem; }
article.page h2 { font-family: var(--font-h); color: var(--accent); font-size: 1.22rem; margin: 2.6rem 0 .8rem; padding-left: .7rem; border-left: 4px solid var(--accent2); line-height: 1.4; }
article.page h3 { font-family: var(--font-h); color: var(--accent); font-size: 1.05rem; margin: 1.6rem 0 .4rem; }
article.page p, article.page li { max-width: 40rem; }
article.page li { margin: .25rem 0; }
article.page blockquote { margin: 1rem 0; padding: .9rem 1.2rem; background: var(--soft); border-left: 3px solid var(--accent2); font-size: .97rem; max-width: 40rem; }
article.page blockquote p { margin: .3rem 0; }
.box { background: var(--soft); padding: 1.1rem 1.3rem; margin: 0 0 1.5rem; }
.box ul { margin: 0; padding-left: 1.2rem; }
.box li { margin: .2rem 0; }
.note { background: var(--soft); padding: .8rem 1rem; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: .55rem .7rem; text-align: left; vertical-align: top; }
td:first-child { min-width: 4.5em; }  /* 狭い画面で1列目の見出し語（「いつから」など）が1字ずつ折れるのを防ぐ（2026-10-23） */
th { background: var(--soft); font-family: var(--font-h); font-weight: 700; }
details { border-top: 1px solid var(--line); padding: .5rem 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--font-h); font-weight: 700; color: var(--accent); list-style: none; padding: .4rem 1.8rem .4rem 0; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "＋"; position: absolute; right: 0; top: .4rem; color: var(--accent2); transition: transform .3s; }
details[open] summary::after { transform: rotate(180deg); }
details p { margin: .3rem 0 .7rem; }
.meta { color: var(--muted); font-size: .85rem; margin-top: 2.5rem; border-top: 1px dashed var(--line); padding-top: .6rem; font-family: var(--font-h); }
.eyebrow { font-family: var(--font-h); font-size: .82rem; letter-spacing: .16em; color: var(--muted); margin: 0 0 1rem; display: flex; align-items: center; gap: .75rem; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--accent2); flex: none; }
article.page .eyebrow { margin-top: 1.4rem; }
.tag { display: inline-block; margin-left: .6rem; font-size: .76rem; color: var(--accent); border: 1px solid var(--line); padding: 0 .45rem; border-radius: 2px; font-family: var(--font-h); vertical-align: middle; line-height: 1.6; }
.rel { list-style: none; margin: 0; padding: 0; }
.rel li { border-bottom: 1px solid var(--line); padding: .7rem 0; max-width: none; }
.rel a { text-decoration: none; color: var(--ink); }
.rel a:hover { text-decoration: underline; text-decoration-color: var(--accent2); text-underline-offset: .28em; }
.more { margin: 1rem 0 0; font-size: .9rem; font-family: var(--font-h); }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }
.ar { display: inline-block; margin-left: .3em; transition: transform .25s; }
a:hover .ar { transform: translateX(.3em); }

/* 旧トップ用の入口カード（束ねるトップはビルド対象外。互換のため残す） */
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0; }
.card { border: 1px solid var(--line); padding: 1rem 1.1rem; }
.card h3 { margin-top: 0; }

/* ===== 入口ページ（article.entry。front matter の wide: true） ===== */
.hero { position: relative; isolation: isolate; padding: 3rem 0 2rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.6rem 3rem; align-items: center; }
/* 2026-10-23：装飾の円が画面の右端を越えないよう right を画面幅で制限（狭い画面で横に広がって横スクロールが出ていた。広い画面では従来どおり -8rem） */
.hero::before { content: ""; position: absolute; right: max(-8rem, calc((100% - 100vw) / 2 + 1rem)); top: -6rem; width: 32rem; height: 32rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,159,227,.14), rgba(234,247,253,.55) 52%, rgba(255,255,255,0) 72%); z-index: -1; pointer-events: none; }
.hero-text { grid-column: 1; }
.hero-photo { grid-column: 2; grid-row: 1; position: relative; }
.hero-photo img, .hero-photo .ph { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.hero-photo .ph { background: linear-gradient(135deg, var(--soft), #ffffff 70%); border: 1px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-family: var(--font-h); font-size: .9rem; text-align: center; padding: 1rem; }
.hero-photo::after { content: ""; position: absolute; left: 1rem; top: 1rem; right: -1rem; bottom: -1rem; border: 1px solid var(--accent2); border-radius: 3px; z-index: -1; opacity: .55; }
.hero .facts { grid-column: 1 / -1; }
.hero h1 { font-family: var(--font-h); font-weight: 700; color: var(--accent); font-size: clamp(1.75rem, 4.2vw, 2.6rem); line-height: 1.35; letter-spacing: .02em; margin: 0 0 1rem; }
.hero .lead { margin: 0; max-width: 32rem; }
.mk { display: block; overflow: hidden; }
.mk > span { display: block; }

.facts { display: flex; flex-wrap: wrap; gap: .5rem 2.2rem; margin: .6rem 0 0; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .95rem; font-family: var(--font-h); }
.facts span::before { content: ""; display: inline-block; width: .45rem; height: .45rem; background: var(--accent2); margin-right: .6rem; vertical-align: middle; }

h2.sec { font-family: var(--font-h); font-size: 1rem; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin: 3.2rem 0 1.1rem; display: flex; align-items: center; gap: .9rem; }
h2.sec::before { content: attr(data-n); font-size: .8rem; color: var(--accent2); letter-spacing: .12em; }
h2.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); transform-origin: left; }
.intro { margin: -.3rem 0 1.2rem; color: var(--muted); font-size: .97rem; max-width: 40rem; }

/* よく起きること（状況文） */
.sit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 0 2.6rem; border-top: 1px solid var(--line); counter-reset: s; }
.sit.cols2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }  /* 状況文が4件のとき（債権回収の入口）は2列。容器幅で折り返し、狭い画面では1列 */
/* 両側（ご自身が持つ側・相手が持つ側）を小見出し付きの2列に分ける（離婚サイトの入口）。狭い画面では縦に並ぶ */
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 2.6rem; }
.sides h3 { font-family: var(--font-h); font-weight: 700; font-size: .9rem; letter-spacing: .08em; color: var(--accent2); margin: 1.2rem 0 0; }
.sides .sit { grid-template-columns: 1fr; }
.sit li { counter-increment: s; border-bottom: 1px solid var(--line); padding: 1.15rem 0 1.15rem 2.3rem; position: relative; }
.sit li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1.55rem; font-family: var(--font-h); font-size: .8rem; color: var(--accent2); letter-spacing: .12em; }
.sit strong { display: block; font-family: var(--font-h); color: var(--accent); font-size: 1.08rem; line-height: 1.5; }
.sit span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.8; margin-top: .25rem; }

/* 頼むと何が起きるか（手順） */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.4rem 2rem; counter-reset: st; }
.steps li { counter-increment: st; padding-top: .9rem; border-top: 1px solid var(--line); }
.steps li::before { content: counter(st, decimal-leading-zero); display: block; font-family: var(--font-h); font-size: .8rem; color: var(--accent2); letter-spacing: .12em; margin-bottom: .3rem; }
.steps strong { display: block; font-family: var(--font-h); color: var(--accent); font-size: 1.05rem; line-height: 1.5; }
.steps span { display: block; color: var(--muted); font-size: .93rem; line-height: 1.8; margin-top: .2rem; }

/* 費用（2プラン） */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.plans > li { border: 1px solid var(--line); padding: 1.5rem 1.6rem 1.4rem; transition: border-color .3s; }
.plans > li:hover { border-color: var(--accent2); }
.plans .pname { font-family: var(--font-h); font-size: .85rem; letter-spacing: .14em; color: var(--muted); margin: 0; }
.plans .price { font-family: var(--font-h); color: var(--accent); font-weight: 700; font-size: 1.7rem; line-height: 1.3; margin: .3rem 0 0; }
.plans .price small { font-size: .88rem; font-weight: 500; color: var(--muted); margin-left: .4rem; white-space: nowrap; }
.plans .for { margin: .4rem 0 .9rem; font-size: .95rem; color: var(--muted); padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.plans ul { margin: 0; padding: 0; list-style: none; font-size: .97rem; }
.plans ul li { padding: .3rem 0 .3rem 1.1rem; position: relative; }
.plans ul li::before { content: ""; position: absolute; left: 0; top: .95rem; width: .5rem; height: 1px; background: var(--accent2); }
.plans-note { margin: 1.2rem 0 0; font-size: .95rem; color: var(--muted); max-width: 40rem; }

/* はっきり書いておくこと（言い切り） */
.nope { margin: 0; padding: 0; list-style: none; max-width: 44rem; }
.nope li { padding: .7rem 0 .7rem 1.3rem; position: relative; }
.nope li::before { content: ""; position: absolute; left: 0; top: 1.2rem; width: .5rem; height: 1px; background: var(--accent); }
.nope strong { font-family: var(--font-h); color: var(--accent); }
.nope span { display: block; color: var(--muted); font-size: .95rem; line-height: 1.8; }

/* 更新欄：相談で聞かれた問い */
.toi { list-style: none; margin: 0; padding: 0; }
.toi li { display: grid; grid-template-columns: 7.2rem 1fr; gap: .2rem 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line); align-items: baseline; max-width: none; }
.toi time { font-family: var(--font-h); font-size: .85rem; color: var(--muted); letter-spacing: .04em; }
.toi a { color: var(--ink); text-decoration: none; font-weight: 500; }
.toi a:hover { text-decoration: underline; text-decoration-color: var(--accent2); text-underline-offset: .28em; }

/* 弁護士（短く） */
.lawyer { display: grid; grid-template-columns: 13rem 1fr; gap: 1rem 2.5rem; }
.lawyer .name { font-family: var(--font-h); color: var(--accent); font-weight: 700; font-size: 1.3rem; line-height: 1.4; margin: 0; }
.lawyer .name small { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); letter-spacing: .06em; margin-top: .2rem; }
.lawyer p { margin: 0 0 .6rem; max-width: 40rem; }

/* 紹介（2枚） */
.refer { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.refer a { display: block; padding: 1.3rem 1.4rem; border: 1px solid var(--line); text-decoration: none; color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.refer a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 56, 110, .08); border-color: var(--accent2); }
.refer strong { display: block; font-family: var(--font-h); color: var(--accent); font-size: 1.08rem; }
.refer span { display: block; color: var(--muted); font-size: .93rem; line-height: 1.8; margin-top: .3rem; }
.refer em { display: block; font-style: normal; font-size: .88rem; color: var(--link); font-family: var(--font-h); margin-top: .6rem; }

/* 問い合わせ（partials/cta.njk） */
.cta { margin: 3.2rem 0 0; padding: 2rem 0 0; border-top: 1px solid var(--accent); display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.cta p { margin: 0; max-width: none; }
.cta .btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: .75rem 1.5rem; font-family: var(--font-h); font-weight: 700; border-radius: 2px; transition: background .25s; }
.cta .btn:hover { background: #002a52; }
.cta .tel { font-family: var(--font-h); color: var(--accent); text-decoration: none; font-weight: 700; margin-left: 1.2rem; white-space: nowrap; }

/* フォーム（contact） */
form .field { margin: 1rem 0; }
label { display: block; font-weight: 700; font-family: var(--font-h); }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; max-width: 32rem; padding: .55rem; border: 1px solid var(--line); border-radius: 3px; font: inherit; box-sizing: border-box;
}
fieldset { border: 1px solid var(--line); border-radius: 3px; padding: 1rem; margin: 1.5rem 0; }
legend { font-weight: 700; padding: 0 .4rem; font-family: var(--font-h); }
button { font: inherit; font-family: var(--font-h); font-weight: 700; background: var(--accent); color: #fff; border: 0; border-radius: 2px; padding: .7rem 1.4rem; }

/* フッター（表示事項：氏名・所属弁護士会は常置） */
footer.site { margin-top: 3rem; border-top: 1px solid var(--line); padding: 1.6rem 0 2.8rem; font-size: .88rem; color: var(--muted); line-height: 1.8; }
footer.site address { font-style: normal; }
footer.site .fl { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; margin: .7rem 0 0; padding: 0; list-style: none; font-family: var(--font-h); }
footer.site .fl a { text-decoration: none; }
footer.site .fl a:hover { text-decoration: underline; }

/* ===== 動き（html.motion のときだけ。script は base.njk 末尾） ===== */
.motion .hero::before { animation: blob 18s ease-in-out infinite alternate; }
@keyframes blob { from { transform: translate(0, 0) scale(1); } to { transform: translate(-4rem, 2.5rem) scale(1.08); } }
.motion .hero .mk > span { transform: translateY(110%); transition: transform .9s cubic-bezier(.19, .8, .22, 1); }
.motion .hero .mk:nth-child(2) > span { transition-delay: .12s; }
.motion.ld .hero .mk > span { transform: none; }
.motion .hero .eyebrow::before { width: 0; transition: width 1s cubic-bezier(.19, .8, .22, 1) .1s; }
.motion.ld .hero .eyebrow::before { width: 2rem; }
.motion .hero .lead, .motion .hero .facts span { opacity: 0; transform: translateY(14px); transition: opacity .8s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.motion .hero .lead { transition-delay: .4s; }
.motion .hero .facts span { transition-delay: calc(.55s + var(--i, 0) * .08s); }
.motion.ld .hero .lead, .motion.ld .hero .facts span { opacity: 1; transform: none; }
.motion .hero-photo { opacity: 0; transform: scale(1.03); transition: opacity 1s .2s, transform 1.6s cubic-bezier(.2, .7, .2, 1) .2s; }
.motion.ld .hero-photo { opacity: 1; transform: none; }
.motion [data-rv] { opacity: 0; transform: translateY(28px); transition: opacity .9s, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * .07s); }
.motion [data-rv].in { opacity: 1; transform: none; }
.motion h2.sec::after { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.19, .8, .22, 1) .25s; }
.motion h2.sec.in::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .motion [data-rv], .motion .hero .mk > span, .motion .hero .lead, .motion .hero .facts span, .motion .hero-photo { opacity: 1 !important; transform: none !important; transition: none !important; }
  .motion .hero::before { animation: none; }
  .motion h2.sec::after { transform: none; transition: none; }
}

/* スマホ幅 */
@media (max-width: 40rem) {
  .wrap { padding: 0 1.1rem; }
  .hero { padding: 2.2rem 0 1.4rem; grid-template-columns: 1fr; gap: 1.4rem; }
  .hero-text, .hero-photo { grid-column: 1; grid-row: auto; }
  .hero-photo img, .hero-photo .ph { aspect-ratio: 16 / 9; }
  .hero-photo::after { display: none; }
  .toi li { grid-template-columns: 1fr; }
  .lawyer { grid-template-columns: 1fr; }
  .cta .tel { margin-left: 0; display: block; margin-top: .6rem; }
  .brand { flex-wrap: wrap; gap: .5rem .9rem; }
}

/* 印刷（費用のページを紙で渡せるように。ナビ・下書き帯・問い合わせの箱・飾りは消す） */
@media print {
  nav.main, .draft, .cta, .hero::before, .hero-photo::after { display: none; }
  header.site { position: static; background: #fff; }
  body { border-top: 0; }
  .motion [data-rv], .motion .hero .mk > span, .motion .hero .lead, .motion .hero .facts span, .motion .hero-photo { opacity: 1 !important; transform: none !important; }
}