/*
Theme Name: WSGO LAW
Description: 渡邊綜合法律事務所（WSGO LAW）専用テーマ。白地に明朝、色は使わない。
Author: 渡邊 慧
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
Text Domain: wsgo
*/

/* -------------------------------------------------------------------------
 * 配色は無彩色のみ。--ink-strong を罫・見出しバー・ボタンの共通色として使う。
 * 旧サイトの金（#C8B774）を黒に置き換えた際、同じ太さだと重く見えたため、
 * 見出しの下線を4px→3px、縦バーを5px→4pxに細くしてある。
 * ---------------------------------------------------------------------- */
:root{
  /* 反転（採用案）。地は真っ黒ではなく濃いグレー #333333。
     本文 #ececec とのコントラスト比は 10.7:1 で WCAG の AAA を満たす。 */
  --ink:#ececec;         /* 本文 */
  --ink-strong:#ffffff;  /* 罫・見出しバー・ボタン */
  --ink-soft:#b8b8b8;
  --ink-faint:#8e8e8e;
  --paper:#333333;
  --rule:#6b6b6b;
  --rule-faint:#4d4d4d;
  --hover:#3d3d3d;       /* 一覧行のホバー */
  --wrap:1080px;
  --indent:75px;
  --jp:'Noto Serif JP',"游明朝","Yu Mincho",serif;
  --la:'Cormorant Garamond','Noto Serif JP',serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--jp);font-weight:400;font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
:focus-visible{outline:2px solid var(--ink-strong);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ============ 帯・ヘッダー ============ */
.bar{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:1px solid var(--rule-faint);
}
.bar-in{
  max-width:var(--wrap);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mark{display:block;text-decoration:none;line-height:0;}
.mark img{display:block;height:21px;width:auto;}
@media (max-width:767px){.mark img{height:17px;}}
.nav{display:flex;align-items:center;gap:28px;}
.nav a{
  font-size:14px;text-decoration:none;color:var(--ink-soft);
  padding-bottom:4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover{color:var(--ink);}
.nav a.on{color:var(--ink);border-bottom-color:var(--ink-strong);}
.nav .lang{
  font-family:var(--la);font-size:12px;letter-spacing:.16em;
  border:1px solid var(--ink-faint);padding:3px 12px;border-bottom-width:1px;color:var(--ink-soft);
}
.nav .lang:hover{background:var(--ink-strong);color:var(--paper);border-color:var(--ink-strong);}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px;}
.burger span{display:block;width:26px;height:2px;background:var(--ink);margin:5px 0;transition:.3s;}

/* ============ 共通 ============ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.crumb{font-size:12px;color:var(--ink-faint);padding:18px 0 0;}
.crumb a{color:var(--ink-soft);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

/* 見出し（現行 .h_01 を継承：金の4px下線） */
.h1{
  font-size:25px;font-weight:500;letter-spacing:.04em;margin:26px 0 40px;
  padding:0 0 12px;border-bottom:3px solid var(--ink-strong);
}
/* 節見出し（現行 .h_02 を継承：金の縦バー） */
.h2{
  font-size:18px;font-weight:500;letter-spacing:.04em;margin:52px 0 20px;
  padding-left:16px;border-left:4px solid var(--ink-strong);
}
.h2:first-of-type{margin-top:0;}

/* ============ 表紙 ============ */
/* 表紙は支給ロゴ（和文＋WSGO LAW）を組んだ画像を使用 */
.cover{padding:78px 24px 70px;text-align:center;}
.cover h1{margin:0;line-height:0;}
.cover img{width:100%;max-width:440px;height:auto;}
@media (max-width:767px){
  .cover{padding:52px 20px 46px;}
  .cover img{max-width:268px;}
}

/* ============ セクション ============ */
.sec{padding:60px 0;border-top:1px solid var(--rule-faint);}
/* 目次で終わるセクションは、最終行の罫線が下端の代わりになるため余白を詰める */
.sec-toc{padding-bottom:60px;}
.sec-head{margin-bottom:30px;}
.sec-head h2{
  font-size:17px;font-weight:500;letter-spacing:.14em;margin:0;
  padding-left:14px;border-left:4px solid var(--ink-strong);
}
/* 各セクションの導線はすべて同じゴーストボタンに統一し、
   セクション本文と同じ左端から始める。 */
.sec-more{margin-top:28px;}
.sec-more .btn{margin-top:0;min-width:184px;text-align:center;white-space:nowrap;}

/* ============ 目次（署名要素）============ */
.toc{border-top:1px solid var(--rule-faint);}
.toc a{
  display:grid;grid-template-columns:78px 1fr;align-items:baseline;gap:20px;
  padding:17px 6px;text-decoration:none;
  border-bottom:1px solid var(--rule-faint);transition:background .2s;
}
.toc a:hover{background:var(--hover);}
.toc a:last-child{border-bottom:0;}
.toc .no{
  font-family:var(--la);font-size:27px;font-weight:500;color:var(--ink-strong);
  text-align:right;line-height:1;letter-spacing:.02em;
}
.toc .no::before{
  content:"第";font-family:var(--jp);font-size:10px;color:var(--ink-faint);
  vertical-align:.42em;margin-right:3px;letter-spacing:0;
}
.toc .no::after{
  content:"回";font-family:var(--jp);font-size:10px;color:var(--ink-faint);
  vertical-align:.42em;margin-left:3px;letter-spacing:0;
}
.toc .tt{font-size:15.5px;line-height:1.65;color:var(--ink);}
.toc a:hover .tt{color:#fff;}
.toc .nt{display:block;font-size:12.5px;color:var(--ink-faint);line-height:1.7;margin-top:3px;}
@media (max-width:767px){
  .toc a{grid-template-columns:58px 1fr;gap:14px;padding:14px 2px;}
  .toc .no{font-size:21px;}
  .toc .tt{font-size:14.5px;}
}

/* ============ 弁護士要約 ============ */
/* トップの各セクションは、本文の左端を揃えて字下げする。
   量は見出し「弁護士」「コラム」の右端に合わせた 75px
   （金の縦バー 5px ＋ 見出しの padding-left 14px ＋ 3字ぶん約56px）。
   弁護士が一名のため左端に置くと空きが目立つ、というのが発端。 */
body.home .who,
body.home .toc,
body.home .sec-body,
body.home .sec-more{padding-left:var(--indent);padding-right:var(--indent);}
@media (max-width:767px){
  body.home .who,
  body.home .toc,
  body.home .sec-body,
  body.home .sec-more{padding-left:0;padding-right:0;}
}
.who .nm{font-size:26px;font-weight:500;letter-spacing:.1em;margin:0;}
.who .nm small{display:block;font-family:var(--la);font-size:13px;letter-spacing:.2em;color:var(--ink-faint);margin-top:8px;font-weight:400;}
.who .bars{font-size:13px;color:var(--ink-soft);margin:16px 0 0;line-height:1.9;}
@media (max-width:767px){.who .nm{font-size:22px;}}

/* ============ ボタン ============ */
.btn{
  display:inline-block;background:var(--ink-strong);color:var(--paper);text-decoration:none;
  font-size:13.5px;letter-spacing:.1em;padding:11px 34px;margin-top:26px;
  transition:background .2s;
}
.btn:hover{background:#d0d0d0;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-strong);padding:10px 33px;}
.btn.ghost:hover{background:var(--ink-strong);color:var(--paper);border-color:var(--ink-strong);}

/* ============ 記事 ============ */
/* 記事も見出し・本文で左右端をそろえる（旧サイトが #contents 1200px に
   すべてを収めていた設計を踏襲）。本文だけ狭めることはしない。 */
.art{max-width:none;}
.art .h1{font-size:23px;line-height:1.55;}
.art p{margin:0 0 1.65em;line-height:2.15;text-align:justify;}
.art .sig{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--rule-faint);
  font-size:13px;color:var(--ink-faint);text-align:right;
}
.artnav{
  display:flex;justify-content:space-between;gap:14px;
  margin-top:44px;padding-top:26px;border-top:1px solid var(--rule-faint);font-size:13px;
}
.artnav a{color:var(--ink-soft);text-decoration:none;}
.artnav a:hover{text-decoration:underline;}
.fade{
  margin-top:-1.65em;padding:52px 0 30px;text-align:center;font-size:13px;color:var(--ink-faint);
  background:linear-gradient(to bottom,rgba(51,51,51,0),var(--paper) 60%);
}

/* ============ 一覧・表 ============ */
.list{margin:0;padding:0 0 0 1.3em;}
.list li{margin-bottom:9px;font-size:15px;line-height:1.85;}
.tbl{width:100%;border-collapse:collapse;font-size:15px;}
.tbl th,.tbl td{padding:14px 0;border-bottom:1px solid var(--rule-faint);text-align:left;vertical-align:top;}
.tbl th{width:180px;font-weight:400;color:var(--ink-soft);font-size:14px;padding-right:20px;}
@media (max-width:767px){.tbl th{width:96px;font-size:13px;padding-right:12px;}}
.body-copy p{font-size:15px;line-height:2.05;margin:0 0 1.4em;}
.lead p{margin:0;}
@media (max-width:767px){.lead br{display:none;}}
.body-copy p:last-child{margin-bottom:0;}
/* 地図は背景を透過させたSVG。地色に馴染むよう枠だけ与える */
.map{display:block;width:100%;max-width:700px;height:auto;border:1px solid var(--rule-faint);}
.wsgo-map{margin:0 0 1.4em;}
.wsgo-map img{display:block;width:100%;max-width:700px;height:auto;border:1px solid var(--rule-faint);}

/* 挨拶文の署名（右寄せ） */
.sign,
.page-body .sign{text-align:right;margin-top:2em;}
.tag{
  display:inline-block;border:1px solid var(--rule);font-size:13px;
  padding:4px 13px;margin:0 7px 7px 0;color:var(--ink-soft);
}

/* ============ トピックス ============ */
.topics{border-top:1px solid var(--rule-faint);}
.topics a{
  display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:20px;
  padding:16px 6px;text-decoration:none;border-bottom:1px solid var(--rule-faint);
  transition:background .2s;
}
.topics a:hover{background:var(--hover);}
.topics .dt{font-family:var(--la);font-size:15px;letter-spacing:.06em;color:var(--ink-faint);}
.topics .tx{font-size:15px;line-height:1.7;}
@media (max-width:767px){
  .topics a{grid-template-columns:1fr;gap:3px;padding:14px 2px;}
  .topics .dt{font-size:13px;}
  .topics .tx{font-size:14.5px;}
}

.todo{color:var(--ink-faint);}

/* 未確定のテキスト（本番では差し替え） */
.draft{
  font-size:14.5px;line-height:2;color:var(--ink-faint);margin:0;
  padding:18px 20px;background:var(--hover);border-left:3px solid var(--rule);
}

/* ============ フッター ============ */
footer{
  border-top:1px solid var(--rule-faint);margin-top:44px;padding:34px 24px 40px;text-align:center;
}
footer a{font-size:13px;color:var(--ink-soft);text-decoration:none;}
footer a:hover{text-decoration:underline;}
footer .cr{font-family:var(--la);font-size:12px;letter-spacing:.2em;color:var(--ink-faint);margin-top:12px;}

@media (max-width:960px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;
    border-bottom:1px solid var(--rule-faint);padding:8px 24px 18px;
  }
  .nav.open{display:flex;}
  .nav a{padding:13px 0;border-bottom:1px solid var(--rule-faint);}
  .nav a.on{border-bottom-color:var(--rule-faint);color:var(--ink-strong);}
  .nav .lang{text-align:center;margin-top:14px;border:1px solid var(--ink-faint);}
  .burger{display:block;}
  .bar-in{position:relative;}
}

/* =========================================================================
 * WordPress のエディタが出力する要素
 * ====================================================================== */
.page-body h2{
  font-size:18px;font-weight:500;letter-spacing:.04em;margin:52px 0 20px;
  padding-left:16px;border-left:4px solid var(--ink-strong);
}
.page-body h2:first-child{margin-top:0;}
.page-body h3{font-size:15px;font-weight:500;letter-spacing:.02em;margin:34px 0 10px;}
.page-body ul,.page-body ol{margin:0 0 1.4em;padding-left:1.3em;}
.page-body li{font-size:15px;line-height:1.85;margin-bottom:9px;}
.page-body table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 1.4em;}
.page-body th,.page-body td{padding:14px 0;border-bottom:1px solid var(--rule-faint);text-align:left;vertical-align:top;}
.page-body th{width:180px;font-weight:400;color:var(--ink-soft);font-size:14px;padding-right:20px;}
.page-body img{max-width:100%;height:auto;}
.page-body a{color:var(--ink);text-underline-offset:3px;}
.page-body iframe{max-width:100%;border:1px solid var(--rule-faint);}
@media (max-width:767px){.page-body th{width:96px;font-size:13px;padding-right:12px;}}

/* 記事本文：エディタの段落をそのまま流し込む */
.art p{margin:0 0 1.65em;line-height:2.15;text-align:justify;}
.art a{color:var(--ink);text-underline-offset:3px;}
.art h2{font-size:17px;font-weight:500;margin:2.2em 0 1em;}
.art blockquote{margin:0 0 1.65em;padding-left:18px;border-left:3px solid var(--rule);color:var(--ink-soft);}

/* 回数のないコラム（将来、番号なしで書かれた場合の保険） */
.toc .no-empty{display:block;}

/* 管理バーが出ているときにヘッダーが隠れないように */
body.admin-bar .bar{top:32px;}
@media (max-width:782px){body.admin-bar .bar{top:46px;}}

/* スクリーンリーダー用 */
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}