@charset "UTF-8";
/* =========================================================
   司法書士法人ファーストNi  下層ページ共通スタイル（sub.css）
   ★ style.css を読み込んだ上で追加。トーンはトップと統一
     グリーン×ピンク／写真／やわらかい角丸／明朝見出し
   WP想定：本文(main) + サイドバー(widget) の2カラム
   ========================================================= */

:root{--body:#444;--line-d:#cfd8d3}
ol{list-style:none}

/* ページヘッダー（下層の見出し帯） */
.page-head{position:relative;background:linear-gradient(180deg,#fff,var(--green-l));border-bottom:1px solid var(--line);overflow:hidden}
.page-head::after{content:"";position:absolute;right:-60px;bottom:-70px;width:min(42%,420px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(243,168,187,.28),transparent 70%);border-radius:50%}
.page-head__in{position:relative;z-index:2;padding:clamp(34px,5vw,60px) 0 clamp(30px,4vw,46px)}
.page-head .en{font-family:var(--serif);letter-spacing:.3em;color:var(--green);font-size:.78rem;font-weight:600}
.page-head h1{font-family:var(--serif);font-weight:700;color:var(--green-d);line-height:1.4;
  font-size:clamp(1.8rem,4.6vw,2.9rem);margin-top:6px}
.page-head p{margin-top:14px;color:var(--ink);font-size:1rem;max-width:40em}

/* パンくず */
.breadcrumb{padding:14px 0;font-size:.82rem;color:var(--sub)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumb a:hover{color:var(--green)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--line-d)}
.breadcrumb [aria-current]{color:var(--green-d);font-weight:700}

/* 2カラム本文 */
.sub{padding:clamp(44px,6vw,80px) 0}
.sub__grid{display:grid;grid-template-columns:1fr 310px;gap:clamp(30px,4vw,56px);align-items:start}
.sub__main>*+*{margin-top:clamp(40px,5vw,64px)}

/* 本文見出し */
.c-h2{font-family:var(--serif);font-weight:700;color:var(--green-d);font-size:clamp(1.4rem,3vw,1.85rem);
  line-height:1.5;padding-left:16px;border-left:5px solid var(--pink)}
.c-h2 .en{display:block;font-size:.72rem;letter-spacing:.24em;color:var(--green);font-weight:600;margin-bottom:2px}
.c-h3{font-family:var(--serif);font-weight:700;color:var(--green-d);font-size:1.2rem;margin-bottom:10px}
.c-lead{font-size:1.05rem;color:var(--ink);line-height:1.95}
.c-p{color:var(--body);margin-top:12px}
.c-sec>.c-h2+*{margin-top:22px}

/* リード（ページ導入・写真つき） */
.lead-box{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(22px,3vw,40px);align-items:center}
.lead-box__ph{aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow-s);min-width:0}

/* お悩みリスト（共感パート） */
.worry{background:var(--green-l);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}
.worry h3{font-family:var(--serif);text-align:center;color:var(--green-d);font-size:1.25rem;margin-bottom:20px}
.worry__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.worry__grid li{display:flex;gap:10px;background:#fff;border-radius:10px;padding:14px 16px;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow-s)}
.worry__grid li::before{content:"";flex:none;width:8px;height:8px;margin-top:.5em;border-radius:50%;background:var(--pink)}
.worry__cta{text-align:center;margin-top:20px;font-weight:700;color:var(--green-d)}

/* サポート範囲（ワンストップ） */
.support{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.support li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px;box-shadow:var(--shadow-s)}
.support .ic{width:52px;height:52px;border-radius:14px;background:var(--green-l);display:grid;place-items:center;color:var(--green);margin-bottom:12px}
.support b{font-family:var(--serif);display:block;color:var(--green-d);font-size:1.1rem;margin-bottom:6px}
.support p{font-size:.88rem;color:var(--sub)}

/* 料金テーブル */
.price-t{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s)}
.price-t th,.price-t td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:.95rem}
.price-t thead th{background:var(--green-d);color:#fff;font-weight:700}
.price-t tbody th{font-weight:700;color:var(--green-d);width:50%}
.price-t tbody tr:last-child th,.price-t tbody tr:last-child td{border-bottom:0}
.price-t .amt{font-family:var(--serif);font-weight:700;color:var(--ink)}
.price-note{font-size:.82rem;color:var(--sub);margin-top:12px}

/* 流れ（STEP） */
.flow{display:grid;gap:0}
.flow li{display:grid;grid-template-columns:76px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line)}
.flow li:last-child{border-bottom:1px solid var(--line)}
.flow .no{width:60px;height:60px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;text-align:center;line-height:1.1;font-family:var(--serif);font-weight:700}
.flow .no b{display:block;font-size:1.4rem}
.flow .no small{font-size:.6rem;letter-spacing:.1em}
.flow li.is-key .no{background:linear-gradient(135deg,#f8bccb,var(--pink));color:#7a3b4d}
.flow h4{font-family:var(--serif);color:var(--green-d);font-size:1.12rem;margin-bottom:4px}
.flow h4 .tag{font-size:.66rem;background:var(--pink);color:#7a3b4d;padding:.25em .8em;border-radius:999px;margin-left:8px;font-family:var(--sans);font-weight:700;vertical-align:middle}
.flow p{font-size:.92rem;color:var(--sub)}

/* セミナー／無料相談バナー */
.promo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;
  background:linear-gradient(120deg,var(--green-dd),var(--green));color:#fff;border-radius:18px;padding:clamp(24px,3vw,34px)}
.promo__t .en{font-family:var(--serif);letter-spacing:.2em;color:var(--green-l);font-size:.74rem}
.promo__t b{font-family:var(--serif);font-size:1.35rem;display:block;margin:2px 0 6px}
.promo__t p{font-size:.9rem;color:rgba(255,255,255,.9)}
.promo .btn--pink{background:#fff;color:var(--green-d)}

/* FAQ（AIO：FAQPage構造化データと対応） */
.faq{display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-s)}
.faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 54px;font-weight:700;color:var(--green-d);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:18px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:.9rem}
.faq summary::after{content:"＋";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:var(--pink);font-weight:700}
.faq details[open] summary::after{content:"－"}
.faq__a{padding:0 20px 20px 54px;color:var(--body);font-size:.95rem;position:relative}
.faq__a::before{content:"A";position:absolute;left:18px;top:0;width:26px;height:26px;border-radius:50%;background:var(--pink-l);color:var(--pink-d);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:.9rem}

/* ============ サイドバー（WPウィジェット想定） ============ */
.sidebar{position:sticky;top:98px;display:flex;flex-direction:column;gap:22px}
.widget{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.widget__h{background:var(--green-l);color:var(--green-d);font-family:var(--serif);font-weight:700;font-size:1rem;padding:14px 18px}
.widget__b{padding:14px 18px}
.w-nav li+li{border-top:1px solid var(--line)}
.w-nav a{display:flex;align-items:center;justify-content:space-between;padding:12px 2px;font-weight:700;color:var(--green-d);font-size:.94rem}
.w-nav a::after{content:"›";color:var(--pink);font-weight:900}
.w-nav a:hover{color:var(--pink)}
.w-news li{padding:12px 0;border-top:1px solid var(--line);font-size:.86rem}
.w-news li:first-child{border-top:0}
.w-news time{display:block;color:var(--sub);font-size:.76rem;margin-bottom:2px}
.w-news a:hover{color:var(--green)}
/* サイドCTA */
.w-cta{background:linear-gradient(160deg,var(--green-d),var(--green-dd));color:#fff;border:0;text-align:center;padding:26px 20px}
.w-cta .en{font-family:var(--serif);letter-spacing:.2em;color:var(--green-l);font-size:.72rem}
.w-cta b{display:block;font-family:var(--serif);font-size:1.2rem;margin:6px 0 10px}
.w-cta .num{font-family:var(--serif);font-size:1.7rem;font-weight:700}
.w-cta .num::before{content:"☎ ";font-size:.7em}
.w-cta small{display:block;color:rgba(255,255,255,.85);font-size:.74rem;margin:2px 0 14px}
.w-cta .btn{width:100%}

/* ============ レスポンシブ ============ */
@media(max-width:900px){
  .sub__grid{grid-template-columns:1fr}
  .sidebar{position:static;flex-direction:column}
  .lead-box{grid-template-columns:1fr}
  .support{grid-template-columns:1fr}
}
@media(max-width:600px){
  .worry__grid{grid-template-columns:1fr}
  .price-t tbody th{width:auto}
  .flow li{grid-template-columns:56px 1fr;gap:14px}
}

/* ============ 下層追加パーツ（商業・不動産・料金・紹介・概要・お知らせ） ============ */
/* チェックリスト */
.check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:18px}
.check-list li{position:relative;padding-left:30px;color:var(--ink)}
.check-list li::before{content:"";position:absolute;left:0;top:.35em;width:18px;height:18px;border-radius:50%;background:var(--green-l)}
.check-list li::after{content:"";position:absolute;left:6px;top:.62em;width:7px;height:4px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
/* 本文内の実績ストリップ（トップのhero__statsを流用） */
.sub__main .hero__stats{margin-bottom:0}
/* 料金ブロック */
.price-block+.price-block{margin-top:30px}
.price-block .c-h3{display:flex;align-items:center;gap:10px}
.price-block .c-h3 .icon{width:26px;height:26px;color:var(--green)}
/* 情報テーブル（事務所概要） */
.info-t{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s)}
.info-t th,.info-t td{text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.info-t th{width:28%;background:var(--green-l);color:var(--green-d);font-weight:700}
.info-t tr:last-child th,.info-t tr:last-child td{border-bottom:0}
.map{aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);background:var(--green-l)}
.map iframe{width:100%;height:100%;border:0;display:block}
.photo-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.photo-row .media{aspect-ratio:4/3;border-radius:var(--radius);box-shadow:var(--shadow-s)}
/* 代表メッセージ */
.rep{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(22px,3vw,36px);align-items:start}
.rep__ph{aspect-ratio:4/5;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.rep__role{font-size:.85rem;color:var(--sub);margin-top:14px}
.rep__name{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--green-d)}
.rep__name small{font-family:var(--sans);font-size:.78rem;color:var(--sub);margin-left:10px;font-weight:500}
/* 司法書士カード */
.staff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.staff-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s)}
.staff-card .ph{aspect-ratio:1/1}
.staff-card .ph::after{content:"PHOTO"}
.staff-card__b{padding:16px 18px 20px}
.staff-card__role{font-size:.76rem;color:var(--green);font-weight:700}
.staff-card__name{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--green-d);margin:2px 0 8px}
.staff-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.staff-card__tags span{background:var(--green-l);color:var(--green-d);font-size:.72rem;font-weight:700;padding:.25em .8em;border-radius:999px}
/* お知らせ一覧 */
.news-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.news-tabs a{padding:.5em 1.2em;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:700;color:var(--green-d);background:#fff}
.news-tabs a.is-on,.news-tabs a:hover{background:var(--green-d);color:#fff;border-color:var(--green-d)}
.news-list{display:flex;flex-direction:column;gap:14px}
.news-item{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-s);transition:.25s}
.news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.news-item .media{aspect-ratio:16/10;height:100%}
.news-item__b{padding:14px 18px 14px 0}
.news-item__meta{display:flex;gap:10px;align-items:center;font-size:.78rem;color:var(--sub)}
.news-item__meta .cat{background:var(--green-d);color:#fff;padding:.2em .8em;border-radius:6px;font-weight:700}
.news-item__meta .cat.is-pink{background:var(--pink)}
.news-item h3{font-size:1rem;font-weight:700;color:var(--ink);margin-top:6px;line-height:1.6}
.pager{display:flex;justify-content:center;gap:8px;margin-top:30px}
.pager a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-weight:700;color:var(--green-d);background:#fff}
.pager a.is-on{background:var(--green-d);color:#fff;border-color:var(--green-d)}
@media(max-width:900px){
  .rep{grid-template-columns:1fr}
  .rep__ph{max-width:360px}
  .staff-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .check-list{grid-template-columns:1fr}
  .info-t th{width:34%}
  .photo-row{grid-template-columns:1fr}
  .staff-grid{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr;gap:0}
  .news-item__b{padding:14px 18px 18px}
}
.staff-card>.media{aspect-ratio:1/1}