/*
Theme Name: Jikka Jimai Hiroshima
Author: 株式会社タートル
Description: 広島の実家じまい総合サービス向けWordPressテーマ。SEO・LINE/電話導線・作業事例CPT・対応エリアCPT・FAQ・料金表を備えた集客特化テーマ。
Version: 3.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: jikka
*/

/* ==========================================================
   1. Design tokens
   白ベース／深緑・ネイビー・ベージュ。50〜70代が読める大きめの文字。
   ========================================================== */
:root {
  --c-white: #ffffff;
  --c-paper: #f7f4ee;      /* 淡いベージュ（セクション背景） */
  --c-beige: #e9e1d2;      /* ベージュ（枠・帯） */
  --c-green: #1f4d3a;      /* 深緑（メイン） */
  --c-green-d: #163a2b;
  --c-navy: #1e2f4a;       /* ネイビー（見出し・フッター） */
  --c-ink: #2a2a2a;        /* 本文 */
  --c-mute: #6b6b6b;
  --c-line: #06c755;       /* LINE公式カラー */
  --c-line-d: #05a847;
  --c-tel: #1e2f4a;
  --c-warn: #a44a2a;

  --f-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --f-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --fs-base: 17px;
  --lh-body: 1.85;
  --r-sm: 6px;
  --r-md: 12px;
  --w-max: 1120px;
  --w-text: 760px;
  --sp: 8px;
  --shadow: 0 8px 24px rgba(30, 47, 74, .08);
}

@media (min-width: 900px) {
  :root { --fs-base: 18px; }
}

/* ==========================================================
   2. Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--fs-base); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: var(--f-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-white);
  word-break: break-word;
  overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green); text-decoration: underline; text-underline-offset: .18em; }
a:hover { color: var(--c-green-d); }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.4; color: var(--c-navy); margin: 0 0 .6em; letter-spacing: .02em; }
h1 { font-size: clamp(1.7rem, 4.2vw, 2.4rem); }
h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.35rem); }
h4 { font-size: 1.05rem; font-family: var(--f-body); }
p { margin: 0 0 1.2em; }
ul, ol { padding-left: 1.4em; margin: 0 0 1.2em; }
li { margin-bottom: .35em; }
strong { color: var(--c-navy); }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap { max-width: var(--w-max); margin: 0 auto; padding: 0 calc(var(--sp) * 2.5); }
.wrap--text { max-width: var(--w-text); }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--paper { background: var(--c-paper); }
.section--navy { background: var(--c-navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section__lead { max-width: var(--w-text); font-size: 1.05rem; }
.section__head { margin-bottom: clamp(24px, 4vw, 40px); }
.section__head h2 + p { color: var(--c-mute); margin-top: -.3em; }
.center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }

/* ==========================================================
   3. Buttons（電話／LINE／見積の3導線）
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 56px; padding: .7em 1.4em;
  border-radius: var(--r-md); border: 2px solid transparent;
  font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 1.3em; height: 1.3em; flex: none; }
.btn--line { background: var(--c-line); color: #fff; }
.btn--line:hover { background: var(--c-line-d); color: #fff; }
.btn--tel { background: var(--c-tel); color: #fff; }
.btn--tel:hover { background: #142238; color: #fff; }
.btn--estimate { background: #fff; color: var(--c-green); border-color: var(--c-green); }
.btn--estimate:hover { background: var(--c-green); color: #fff; }
.btn--green { background: var(--c-green); color: #fff; }
.btn--green:hover { background: var(--c-green-d); color: #fff; }
.btn--lg { min-height: 64px; font-size: 1.15rem; padding: .8em 1.8em; }
.btn--block { width: 100%; }

.cta-row { display: grid; gap: 12px; margin: 24px 0; }
@media (min-width: 720px) { .cta-row { grid-template-columns: repeat(3, 1fr); } }

/* CTAブロック（全主要ページの末尾） */
.cta-box {
  background: var(--c-green); color: #fff;
  border-radius: var(--r-md); padding: clamp(28px, 5vw, 48px);
  text-align: center;
}
.cta-box h2 { color: #fff; margin-bottom: .3em; }
.cta-box p { max-width: 640px; margin: 0 auto 1em; opacity: .95; }
.cta-box .cta-row { max-width: 860px; margin: 24px auto 8px; }
.cta-box .btn--estimate { background: #fff; border-color: #fff; }
.cta-box .btn--tel { background: var(--c-navy); }
.cta-box__tel { font-family: var(--f-head); font-size: clamp(1.6rem, 5vw, 2.4rem); letter-spacing: .04em; margin: 0; }
.cta-box__tel a { color: #fff; text-decoration: none; }
.cta-box__hours { font-size: .95rem; opacity: .9; }

/* ==========================================================
   4. Header
   ========================================================== */
.site-header { background: #fff; border-bottom: 1px solid var(--c-beige); position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.site-brand { display: flex; flex-direction: column; text-decoration: none; color: var(--c-navy); line-height: 1.2; }
.site-brand__tag { font-size: .72rem; color: var(--c-mute); }
.site-brand__name { font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; }
.site-brand img { max-height: 44px; width: auto; }
.header-tel { display: none; text-decoration: none; color: var(--c-navy); text-align: right; line-height: 1.25; }
.header-tel__num { font-family: var(--f-head); font-size: 1.45rem; font-weight: 700; letter-spacing: .03em; display: block; }
.header-tel__hours { font-size: .78rem; color: var(--c-mute); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .btn { min-height: 44px; padding: .4em 1em; font-size: .95rem; }
.header-actions .btn--line { display: none; }
.nav-toggle {
  background: none; border: 2px solid var(--c-navy); border-radius: var(--r-sm);
  color: var(--c-navy); font-weight: 700; min-height: 44px; padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.nav-toggle span.bars { display: inline-block; width: 20px; height: 2px; background: currentColor; position: relative; }
.nav-toggle span.bars::before, .nav-toggle span.bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; }
.nav-toggle span.bars::before { top: -6px; } .nav-toggle span.bars::after { top: 6px; }

.site-nav { display: none; background: #fff; border-top: 1px solid var(--c-beige); }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 8px 0; }
.site-nav li { margin: 0; }
.site-nav a { display: block; padding: 12px 20px; text-decoration: none; color: var(--c-navy); font-weight: 600; border-bottom: 1px solid #f0ece3; }
.site-nav .sub-menu { display: block; padding: 0; background: var(--c-paper); }
.site-nav .sub-menu a { padding-left: 36px; font-weight: 400; font-size: .95rem; }
.site-nav .nav-quick { display: grid; gap: 8px; padding: 12px 20px 16px; }

@media (min-width: 1000px) {
  .header-tel { display: block; }
  .header-actions .btn--line { display: inline-flex; }
  .nav-toggle { display: none; }
  .site-nav { display: block; border-top: 1px solid var(--c-beige); }
  .site-nav > .wrap > ul { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
  .site-nav li { position: relative; }
  .site-nav a { padding: 12px 14px; font-size: .95rem; border: 0; }
  .site-nav a:hover { color: var(--c-green); }
  .site-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; box-shadow: var(--shadow); border-radius: 0 0 var(--r-sm) var(--r-sm); z-index: 60; }
  .site-nav li:hover > .sub-menu, .site-nav li:focus-within > .sub-menu { display: block; }
  .site-nav .sub-menu a { padding: 10px 16px; font-size: .92rem; }
  .site-nav .nav-quick { display: none; }
}

/* ==========================================================
   5. Hero（ファーストビュー）
   3秒で「広島／まとめて相談／無料見積もり」が伝わる
   ========================================================== */
.hero { background: linear-gradient(180deg, var(--c-paper) 0%, #fff 100%); padding: clamp(32px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); }
.hero__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 48px; } }
.hero__area { display: inline-block; background: var(--c-green); color: #fff; font-weight: 700; padding: .3em 1em; border-radius: 999px; font-size: .95rem; margin-bottom: 16px; }
.hero h1 { font-size: clamp(1.9rem, 5.2vw, 3rem); line-height: 1.35; margin-bottom: .5em; }
.hero__kw { font-family: var(--f-body); font-size: clamp(1rem, 2.2vw, 1.2rem); font-weight: 700; color: var(--c-green); margin: -.2em 0 .8em; }
.hero__sub { font-size: clamp(1rem, 2vw, 1.15rem); max-width: 34em; }
.hero__photo { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--c-beige); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo--placeholder { display: grid; place-items: center; color: var(--c-mute); font-size: .95rem; padding: 24px; text-align: center; }
.trust-list { list-style: none; padding: 0; margin: 20px 0 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; }
@media (min-width: 600px) { .trust-list { grid-template-columns: repeat(3, 1fr); } }
.trust-list li { display: flex; align-items: flex-start; gap: .4em; font-weight: 600; font-size: .98rem; margin: 0; }
.trust-list li::before { content: "✓"; color: var(--c-green); font-weight: 900; flex: none; }
.hero .cta-row { margin-top: 20px; }

/* お知らせ帯 */
.notice-bar { background: var(--c-beige); padding: 10px 0; font-size: .95rem; }
.notice-bar .wrap { display: flex; gap: 12px; align-items: baseline; }
.notice-bar__label { font-weight: 700; color: var(--c-green); flex: none; }

/* ==========================================================
   6. お悩みチェック
   ========================================================== */
.worries { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 10px; }
@media (min-width: 720px) { .worries { grid-template-columns: repeat(3, 1fr); } }
.worries li {
  margin: 0; background: #fff; border: 1px solid var(--c-beige); border-left: 5px solid var(--c-green);
  border-radius: var(--r-sm); padding: 14px 16px; font-weight: 600; display: flex; gap: .5em; align-items: flex-start;
}
.worries li::before { content: "□"; color: var(--c-green); flex: none; }
.worries-answer { text-align: center; font-family: var(--f-head); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--c-green); font-weight: 700; margin: 0; }
.worries-answer small { display: block; font-family: var(--f-body); font-size: .95rem; color: var(--c-mute); font-weight: 400; margin-top: 6px; }

/* ==========================================================
   7. 一貫サポートの流れ（最大の差別化・図解）
   ========================================================== */
.flow-head { text-align: center; }
.flow-head p { font-family: var(--f-head); font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--c-navy); margin: 0 0 .2em; }
.flow { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 0; counter-reset: flow; }
.flow li { margin: 0; position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 10px 0; }
.flow li::before {
  counter-increment: flow; content: counter(flow);
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-green); color: #fff; font-family: var(--f-head); font-weight: 700; font-size: 1.25rem;
}
.flow li:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 66px; width: 2px; height: calc(100% - 56px); background: var(--c-green); opacity: .5; }
.flow__title { font-weight: 700; font-size: 1.1rem; color: var(--c-navy); }
.flow__note { font-size: .9rem; color: var(--c-mute); display: block; }
@media (min-width: 900px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: 20px 12px; }
  .flow li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 0; }
  .flow li:not(:last-child)::after { display: none; }
  .flow li:nth-child(-n+4):not(:nth-child(4))::after, .flow li:nth-child(n+5):not(:nth-child(8))::after {
    display: block; left: auto; right: -10px; top: 26px; width: 12px; height: 2px;
  }
}
.flow-partner-note { font-size: .92rem; color: var(--c-mute); margin-top: 20px; max-width: var(--w-text); }

/* ==========================================================
   8. サービス一覧グリッド
   ========================================================== */
.service-grid { display: grid; gap: 14px; }
@media (min-width: 600px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .service-grid { grid-template-columns: repeat(3, 1fr); } }
.service-card {
  display: block; text-decoration: none; color: var(--c-ink);
  background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-md); overflow: hidden;
}
.service-card:hover { border-color: var(--c-green); color: var(--c-ink); }
.service-card__thumb { aspect-ratio: 16 / 9; background: var(--c-paper); overflow: hidden; }
.service-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.service-card__body { padding: 16px 18px 18px; }
.service-card__title { font-family: var(--f-head); font-size: 1.2rem; font-weight: 700; color: var(--c-navy); margin-bottom: .3em; }
.service-card__desc { font-size: .95rem; color: var(--c-mute); margin: 0; }
.service-card__more { display: inline-block; margin-top: 10px; color: var(--c-green); font-weight: 700; font-size: .95rem; }

/* ==========================================================
   9. 料金表
   ========================================================== */
.price-table-wrap { overflow-x: auto; }
.price-table th, .price-table td { padding: 14px 16px; border-bottom: 1px solid var(--c-beige); text-align: left; }
.price-table th { background: var(--c-paper); font-weight: 700; color: var(--c-navy); white-space: nowrap; }
.price-table td.price { font-family: var(--f-head); font-size: 1.3rem; font-weight: 700; color: var(--c-green); white-space: nowrap; }
.price-table tr:last-child td, .price-table tr:last-child th { border-bottom: 2px solid var(--c-green); }
.price-note { font-size: .92rem; color: var(--c-mute); margin-top: 14px; }
.include-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
@media (min-width: 720px) { .include-list { grid-template-columns: repeat(4, 1fr); } }
.include-list li { background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-sm); padding: 10px 12px; font-weight: 600; margin: 0; }
.include-list li::before { content: "✓ "; color: var(--c-green); }
.legal-box { background: #fff; border: 2px solid var(--c-beige); border-radius: var(--r-md); padding: 18px 20px; font-size: .95rem; }
.legal-box strong { color: var(--c-green); }

/* ==========================================================
   10. 作業事例（CPT）
   ========================================================== */
.case-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .case-grid { grid-template-columns: repeat(3, 1fr); } }
.case-card { background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--c-ink); display: flex; flex-direction: column; }
.case-card:hover { border-color: var(--c-green); color: var(--c-ink); }
.case-card__ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--c-beige); }
.case-card__ba figure { margin: 0; position: relative; aspect-ratio: 4 / 3; background: var(--c-paper); }
.case-card__ba img { width: 100%; height: 100%; object-fit: cover; }
.case-card__ba figcaption { position: absolute; left: 8px; top: 8px; background: rgba(30,47,74,.85); color: #fff; font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.case-card__body { padding: 14px 16px 16px; }
.case-card__area { font-size: .85rem; color: var(--c-green); font-weight: 700; }
.case-card__title { font-family: var(--f-head); font-size: 1.1rem; font-weight: 700; color: var(--c-navy); margin: 4px 0 8px; }
.case-card__meta { list-style: none; padding: 0; margin: 0; font-size: .9rem; color: var(--c-mute); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.case-card__meta li { margin: 0; }
.case-card__price { font-family: var(--f-head); font-weight: 700; color: var(--c-green); font-size: 1.15rem; margin-top: 6px; }

.case-spec { border: 1px solid var(--c-beige); border-radius: var(--r-md); overflow: hidden; margin-bottom: 32px; }
.case-spec th, .case-spec td { padding: 12px 16px; border-bottom: 1px solid var(--c-beige); text-align: left; vertical-align: top; }
.case-spec th { width: 34%; background: var(--c-paper); color: var(--c-navy); font-weight: 700; }
.case-spec tr:last-child th, .case-spec tr:last-child td { border-bottom: 0; }
.case-spec td.total { font-family: var(--f-head); font-size: 1.3rem; font-weight: 700; color: var(--c-green); }
.ba-grid { display: grid; gap: 16px; margin-bottom: 32px; }
@media (min-width: 720px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba-grid figure { margin: 0; }
.ba-grid figcaption { font-weight: 700; color: var(--c-navy); margin-bottom: 6px; }
.ba-grid img { border-radius: var(--r-sm); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.staff-comment { background: var(--c-paper); border-radius: var(--r-md); padding: 20px 24px; margin-bottom: 32px; }
.staff-comment h3 { margin-bottom: .4em; }
.empty-note { background: var(--c-paper); border-radius: var(--r-md); padding: 24px; color: var(--c-mute); text-align: center; }

/* ==========================================================
   11. お客様の声／スタッフ／エリア
   ========================================================== */
.voice-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .voice-grid { grid-template-columns: repeat(2, 1fr); } }
.voice-card { background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-md); padding: 20px 22px; }
.voice-card__who { font-weight: 700; color: var(--c-green); font-size: .95rem; margin-bottom: 8px; }
.voice-card__body { font-size: .98rem; }
.voice-card__src { font-size: .82rem; color: var(--c-mute); margin: 8px 0 0; }

.staff-grid { display: grid; gap: 20px; }
@media (min-width: 720px) { .staff-grid { grid-template-columns: repeat(2, 1fr); } }
.staff-card { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; }
.staff-card__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; background: var(--c-beige); }
.staff-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.staff-card__role { font-size: .88rem; color: var(--c-mute); }
.staff-card__name { font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; color: var(--c-navy); }
.rep-message { display: grid; gap: 24px; align-items: center; }
@media (min-width: 800px) { .rep-message { grid-template-columns: 300px 1fr; } }
.rep-message__photo { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/4; background: var(--c-beige); }
.rep-message__photo img { width: 100%; height: 100%; object-fit: cover; }
.rep-message__quote { font-family: var(--f-head); font-size: clamp(1.25rem, 3vw, 1.7rem); color: var(--c-navy); font-weight: 700; margin-bottom: .6em; }

.area-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .area-grid { grid-template-columns: repeat(4, 1fr); } }
.area-grid a { display: block; text-decoration: none; text-align: center; background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-sm); padding: 14px 8px; font-weight: 700; color: var(--c-navy); }
.area-grid a:hover { border-color: var(--c-green); color: var(--c-green); }
.area-grid a.is-planned { color: var(--c-mute); font-weight: 500; }
.area-grid a.is-planned::after { content: "（順次拡大予定）"; display: block; font-size: .72rem; font-weight: 400; }

/* ==========================================================
   12. FAQ（アコーディオン）
   ========================================================== */
.faq { border-top: 1px solid var(--c-beige); }
.faq details { border-bottom: 1px solid var(--c-beige); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2em 1fr 1.5em; gap: 10px; align-items: start; padding: 16px 4px; font-weight: 700; color: var(--c-navy); font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font-family: var(--f-head); color: var(--c-green); font-size: 1.3rem; line-height: 1.3; }
.faq summary::after { content: "＋"; color: var(--c-green); text-align: right; font-size: 1.3rem; line-height: 1.2; }
.faq details[open] summary::after { content: "－"; }
.faq__a { display: grid; grid-template-columns: 2em 1fr; gap: 10px; padding: 0 4px 18px; }
.faq__a::before { content: "A"; font-family: var(--f-head); color: var(--c-navy); font-size: 1.3rem; line-height: 1.3; }
.faq__a p:last-child { margin-bottom: 0; }

/* ==========================================================
   13. ページ共通・パンくず・記事
   ========================================================== */
.page-head { background: var(--c-paper); padding: clamp(24px, 4vw, 40px) 0; }
.page-head h1 { margin-bottom: .2em; }
.page-head__lead { max-width: var(--w-text); color: var(--c-mute); margin: 0; }
.breadcrumb { font-size: .85rem; color: var(--c-mute); margin-bottom: 8px; }
.breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "›"; margin: 0 6px; }
.breadcrumb a { color: var(--c-mute); }

.entry-content { max-width: var(--w-text); }
.entry-content h2 { margin-top: 2em; padding-left: .6em; border-left: 6px solid var(--c-green); }
.entry-content h3 { margin-top: 1.6em; }
.entry-content img { border-radius: var(--r-sm); margin: 1em 0; }
.entry-content table { margin: 1.2em 0; }
.entry-content th, .entry-content td { border: 1px solid var(--c-beige); padding: 10px 12px; }
.entry-content th { background: var(--c-paper); }
.entry-content blockquote { border-left: 4px solid var(--c-beige); margin: 1.2em 0; padding: .2em 1em; color: var(--c-mute); }
.wp-block-image figcaption { font-size: .85rem; color: var(--c-mute); text-align: center; }
.alignwide, .alignfull { max-width: none; }
.entry-content .cta-box, .entry-content .flow, .entry-content .price-table-wrap, .entry-content .faq, .entry-content .case-grid, .entry-content .service-grid, .entry-content .include-list { max-width: none; }
.entry-meta { font-size: .88rem; color: var(--c-mute); margin-bottom: 20px; }
.entry-meta a { color: var(--c-mute); }

.post-list { display: grid; gap: 16px; }
@media (min-width: 720px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .post-list { grid-template-columns: repeat(3, 1fr); } }
.post-card { background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--c-ink); }
.post-card:hover { border-color: var(--c-green); color: var(--c-ink); }
.post-card__thumb { aspect-ratio: 16/9; background: var(--c-paper); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 14px 16px; }
.post-card__cat { font-size: .8rem; color: var(--c-green); font-weight: 700; }
.post-card__title { font-weight: 700; color: var(--c-navy); margin: 4px 0 6px; line-height: 1.5; }
.post-card__date { font-size: .82rem; color: var(--c-mute); }
.related { margin-top: 48px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
.pagination .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--c-beige); border-radius: var(--r-sm); text-decoration: none; color: var(--c-navy); }
.pagination .page-numbers.current { background: var(--c-green); color: #fff; border-color: var(--c-green); }

/* 「次に何をすればいいか」バー */
.next-step { background: var(--c-paper); border-radius: var(--r-md); padding: 18px 20px; display: grid; gap: 12px; align-items: center; margin: 32px 0; }
@media (min-width: 800px) { .next-step { grid-template-columns: 1fr auto; } }
.next-step__text { font-weight: 700; color: var(--c-navy); margin: 0; }
.next-step .btn { min-height: 48px; }

/* ==========================================================
   14. お問い合わせフォーム
   ========================================================== */
.form { max-width: 760px; }
.form fieldset { border: 1px solid var(--c-beige); border-radius: var(--r-md); padding: 16px 20px 8px; margin: 0 0 20px; }
.form legend { font-weight: 700; color: var(--c-navy); padding: 0 6px; }
.form label { display: block; font-weight: 700; margin-bottom: 6px; color: var(--c-navy); }
.form .req { color: var(--c-warn); font-size: .8rem; margin-left: 6px; }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea {
  width: 100%; padding: 12px 14px; border: 2px solid #cfc7b5; border-radius: var(--r-sm); background: #fff; min-height: 52px;
}
.form textarea { min-height: 140px; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--c-green); outline: none; }
.form .field { margin-bottom: 18px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
@media (min-width: 640px) { .check-grid { grid-template-columns: repeat(3, 1fr); } }
.check-grid label { display: flex; align-items: center; gap: 8px; font-weight: 500; background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; cursor: pointer; }
.check-grid input { width: 22px; height: 22px; accent-color: var(--c-green); }
.consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.consent input { width: 22px; height: 22px; accent-color: var(--c-green); flex: none; margin-top: 4px; }
.form-msg { padding: 14px 16px; border-radius: var(--r-sm); margin-bottom: 20px; }
.form-msg--ok { background: #e7f3ec; color: var(--c-green-d); border: 1px solid #b9dcc8; }
.form-msg--ng { background: #fbeae5; color: var(--c-warn); border: 1px solid #f0c8bb; }
.line-steps { counter-reset: ls; list-style: none; padding: 0; display: grid; gap: 8px; }
.line-steps li { margin: 0; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-sm); padding: 10px 12px; }
.line-steps li::before { counter-increment: ls; content: counter(ls); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--c-line); color: #fff; font-weight: 700; }

/* ==========================================================
   15. Footer & 固定バー
   ========================================================== */
.site-footer { background: var(--c-navy); color: #dfe4ec; padding: 48px 0 120px; font-size: .95rem; }
@media (min-width: 1000px) { .site-footer { padding-bottom: 48px; } }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand { font-family: var(--f-head); font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.footer-grid h3 { color: #fff; font-family: var(--f-body); font-size: 1rem; margin-bottom: .6em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 6px; }
.footer-grid li a { text-decoration: none; }
.footer-grid li a:hover { text-decoration: underline; }
.footer-info dt { font-weight: 700; color: #fff; margin-top: 8px; }
.footer-info dd { margin: 0; }
.footer-license { font-size: .85rem; opacity: .85; margin-top: 12px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 32px; padding-top: 20px; font-size: .82rem; opacity: .8; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }

.fixed-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--c-beige); box-shadow: 0 -6px 20px rgba(30,47,74,.12); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.fixed-bar .btn { min-height: 54px; padding: .3em .4em; font-size: .9rem; border-radius: var(--r-sm); flex-direction: column; gap: 2px; line-height: 1.2; }
.fixed-bar .btn small { font-size: .7rem; font-weight: 500; opacity: .9; }
@media (min-width: 1000px) { .fixed-bar { display: none; } }

/* 404 */
.error-404 { text-align: center; padding: 64px 0; }
.error-404 h1 { font-size: 2rem; }
.error-404 .service-grid { text-align: left; margin-top: 32px; }

/* ユーティリティ */
.badge { display: inline-block; background: var(--c-beige); color: var(--c-navy); border-radius: 999px; padding: .15em .8em; font-size: .85rem; font-weight: 700; }
.two-col { display: grid; gap: 24px; }
@media (min-width: 800px) { .two-col { grid-template-columns: 1fr 1fr; } }
.item-cloud { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.item-cloud li { margin: 0; background: #fff; border: 1px solid var(--c-beige); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: .95rem; }
.remote-list { list-style: none; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .remote-list { grid-template-columns: repeat(3, 1fr); } }
.remote-list li { margin: 0; background: #fff; border: 1px solid var(--c-beige); border-radius: var(--r-sm); padding: 12px 14px; font-weight: 600; }
.remote-list li::before { content: "✓ "; color: var(--c-green); }

/* v2: editorial photography and accessible long-form pages */
.jikka-photo{margin:24px 0 36px}.jikka-photo img{width:100%;height:auto;aspect-ratio:16/7;object-fit:cover;border-radius:16px;display:block}.jikka-photo figcaption{font-size:12px;color:#58665f;margin-top:8px}.hero__photo img{width:100%;height:100%;object-fit:cover}.photo-disclosure{font-size:12px;line-height:1.7;opacity:.85;margin-top:28px}.jikka-toc{background:#f2f6f3;border-left:4px solid #1f4d3a;padding:20px 24px;margin:30px 0}.jikka-toc summary{cursor:pointer;font-weight:700}.jikka-toc ol{margin:14px 0 0;padding-left:24px}.jikka-toc a{display:inline-block;padding:5px 0}.jikka-related{padding:24px;background:#f2f6f3;margin-top:32px}.jikka-related a{display:inline-block;margin:6px 18px 6px 0}.jikka-answer{padding:22px 26px;border:1px solid #c6d8cb;border-radius:10px;margin:24px 0}.entry-content h2{scroll-margin-top:140px}.case-guide{padding:28px;background:#f2f6f3;border-radius:12px}.case-guide ol{padding-left:24px}.rep-message:not(:has(.rep-message__photo)){display:block}.fixed-bar{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.service-card__thumb img,.post-card__thumb img{width:100%;height:100%;object-fit:cover}.service-card__thumb:has(img)::before,.service-card__thumb:has(img)::after{display:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b45c16;outline-offset:4px}.entry-content p,.entry-content li{overflow-wrap:anywhere}.price-table{width:100%}body{overflow-wrap:break-word}
@media(max-width:700px){.jikka-photo img{aspect-ratio:3/2}.jikka-photo{margin:16px 0 24px}.hero__photo{min-height:240px}.jikka-toc{padding:16px}.entry-content h1{font-size:clamp(1.65rem,6vw,2.3rem);line-height:1.55}.case-guide{padding:20px}.price-table td,.price-table th{padding:10px 8px;overflow-wrap:anywhere}.site-brand__name{font-size:1.1rem}.header-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.cta-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}.cta-row .btn{padding-left:20px;padding-right:20px}.trust-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hero__kw{text-wrap:balance}.hero__grid{align-items:center}.nav-toggle{white-space:nowrap;flex-shrink:0}.header-actions{flex-shrink:0}
@media(min-width:1000px){.site-nav a{font-size:14px;padding:14px 10px}.site-nav>.wrap{max-width:1280px}}
@media(max-width:999px){.site-nav.is-open{max-height:75vh;overflow-y:auto}.trust-list{font-size:15px}.site-header__inner{min-height:70px}}
@media(max-width:480px){.header-actions>.btn--estimate{display:none}.site-brand__name{font-size:17px}.nav-toggle{font-size:14px;padding:0 10px}}

/* v3: readable, editable pages */
:root{--c-mute:#47534e;--fs-base:19px;--lh-body:1.95;--w-text:900px}
body{line-height:1.95}.jikka-editable-page{padding-top:32px}.jikka-editable-page .entry-content{margin-left:auto;margin-right:auto}.jikka-editable-home .entry-content{max-width:none}.jikka-editable-page p{margin-bottom:1.4em}.jikka-editable-page li{margin-bottom:.65em}.jikka-editable-page h1,.jikka-editable-page h2,.jikka-editable-page h3{font-family:var(--f-body);font-weight:700;line-height:1.6}.jikka-editable-page h2{padding:12px 18px;background:#f2f6f3;border-left:6px solid #1f4d3a;margin-top:2.3em}.jikka-editable-page h1{font-size:clamp(28px,3vw,44px)}.jikka-editable-page h2{font-size:clamp(24px,2.5vw,32px)}.jikka-editable-page .wp-block-image{margin:24px 0 36px}.jikka-editable-page .wp-block-image img{height:auto;max-width:100%;margin:0}.jikka-editable-page .wp-block-columns{display:flex;gap:36px;align-items:center}.jikka-editable-page .wp-block-column{flex:1;min-width:0}.jikka-editable-page .wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px}.wp-block-button__link{display:inline-flex;justify-content:center;align-items:center;min-height:56px;padding:14px 24px;font-size:19px;font-weight:700;background:#1f4d3a;color:#fff;border-radius:8px}.jikka-editable-page .btn{min-height:60px;font-size:19px}.jikka-editor-hero{padding:30px 0}.jikka-editable-page .faq summary,.jikka-editable-page .wp-block-details summary{min-height:60px;font-size:19px;font-weight:700;padding:18px 36px 18px 16px;cursor:pointer}.jikka-editable-page .wp-block-details{border:1px solid #aebeb4;padding:0 18px;border-radius:8px;margin:16px 0}.jikka-editable-page a:not(.btn):not(.wp-block-button__link):not(.service-card):not(.post-card){text-underline-offset:4px}.jikka-editable-page .price-note{font-size:16px;line-height:1.8;color:#46534c}.service-card__title{font-family:var(--f-body);font-size:21px}.service-card__desc{font-size:17px;color:#46534c}.form label,.form legend{font-weight:700}.form input:not([type=checkbox]):not([type=radio]),.form select{min-height:52px}.form input[type=checkbox],.form input[type=radio]{min-width:22px;min-height:22px}.form small{font-size:16px}.fixed-bar .btn{min-height:64px}.fixed-bar .btn small{font-size:14px}.jikka-editable-page .entry-content>.section{padding:24px 0}.jikka-editable-page .entry-content>.section>.wrap{padding:0}
@media(max-width:780px){:root{--fs-base:18px}.jikka-editable-page .wp-block-columns{flex-direction:column;gap:12px}.jikka-editable-page .wp-block-column{width:100%}.jikka-editable-page .wrap{padding:0 20px}.jikka-editable-page .btn{width:100%;margin-bottom:10px}.jikka-editable-page .price-table{font-size:16px}.jikka-editable-page .entry-content th,.jikka-editable-page .entry-content td{padding:10px 7px}.jikka-editable-page h1{font-size:29px}.jikka-editor-hero{padding:0}.jikka-editable-page .service-grid{grid-template-columns:1fr}.jikka-editable-page .cta-box{padding:24px 18px}.jikka-editable-page .cta-box h2{font-size:24px}.jikka-editable-page .wp-block-buttons{display:block}}
.jikka-editable-page .cta-box h2{background:transparent;border:0;padding:0;color:#fff;margin-top:0}.jikka-editable-page .cta-box p{color:#fff}.jikka-editable-page .service-card h2{font-size:21px;background:transparent;border:0;padding:0}.jikka-editable-page .form-msg--ng{border:2px solid #a52a21;color:#7e1c16;background:#fff5f3}.jikka-editable-page .req{font-size:14px}