@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 2.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ============================================================
 * かなで行政書士法人 — Variant C Hybrid 完全再現版
 * 元実装: variant-c-hybrid.jsx / variant-c-subpages.jsx
 * 更新日: 2026-04-30
 * ============================================================ */

/* ──────────────── 0. デザイントークン ──────────────── */
:root {
  /* Colors */
  --c-indigo: #0d2a5e;
  --c-coral:  #2d6fd1;     /* JSXで"coral"だが実色はブルー */
  --c-blue:   #2d6fd1;     /* coralの別名 */
  --c-sand:   #dce7f5;
  --c-mint:   #c9dff0;
  --c-bg:     #f4f6fa;
  --c-card:   #ffffff;
  --c-ink:    #0f1830;
  --c-ink2:   #394460;
  --c-muted:  #76819b;
  --c-line:   #dce3ec;
  --c-line-green: #06c755;

  /* Fonts */
  --f-serif:  "Shippori Mincho", "Noto Serif JP", serif;
  --f-sans:   "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --f-mono:   "JetBrains Mono", monospace;

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 20px;
  --r-2xl: 28px;

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(20,26,42,.06);
  --shadow-cta:  0 4px 12px rgba(45,111,209,.28);
  --shadow-hero-photo: 0 20px 60px rgba(20,26,42,.2);
  --shadow-stat-card: 0 10px 30px rgba(0,0,0,.12);

  /* Spacing */
  --pad-section-y: 80px;
  --pad-section-x: 48px;
}

/* ──────────────── 1. ベース ──────────────── */
body {
  font-family: var(--f-sans);
  color: var(--c-ink);
  line-height: 1.95;
  background: var(--c-bg);
  font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-serif);
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--c-ink);
}

a {
  color: var(--c-coral);
  text-decoration: none;
  transition: color .15s;
}

/* ──────────────── 2. コア装飾パーツ ──────────────── */

/* Kicker（モノスペース小ラベル） */
.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--c-coral);
  font-weight: 600;
  text-transform: uppercase;
  display: block;
  margin: 0 0 14px;
}

/* Kicker + 横線装飾（ヒーロー用） */
.kicker-deco {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.kicker-deco .kicker { margin: 0; }
.kicker-deco .kicker-line {
  width: 24px;
  height: 1px;
  background: var(--c-muted);
}
.kicker-deco .kicker-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--c-muted);
}

/* 帯ラベル（業務一覧の濃紺帯） */
.label-bar {
  display: inline-block;
  padding: 10px 18px;
  background: var(--c-indigo);
  color: #fff;
  border-radius: 4px;
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 2px;
  margin: 0 8px 28px 0;
}

/* ──────────────── 3. ヒーロー（hero-section） ──────────────── */

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 64px 48px 80px !important;
  background: var(--c-bg);
}

.hero-section .wp-block-columns {
  align-items: center;
  gap: 56px;
  max-width: 1340px;
  margin: 0 auto;
}

/* ヒーロー見出し（建設許可は・かなで・に・おまかせ） */
.hero-h1 {
  font-family: var(--f-serif);
  font-size: clamp(48px, 8vw, 92px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 2px;
  margin: 0 0 36px;
  color: var(--c-ink);
}
.hero-h1 .accent { color: var(--c-indigo); }
.hero-h1 .small {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--c-ink2);
  vertical-align: 0.18em;
  margin: 0 .04em;
  letter-spacing: 1px;
}

/* ヒーローのリード文 */
.hero-section .hero-lead {
  font-size: 18px;
  line-height: 2.05;
  color: var(--c-ink2);
  margin: 0 0 40px;
  max-width: 540px;
}

/* ヒーローのボタン群 */
.hero-section .wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 36px;
}
.hero-section .wp-block-buttons .wp-block-button {
  margin: 0;
}
.hero-section .wp-block-buttons .wp-block-button__link {
  padding: 20px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  transition: all .2s;
  letter-spacing: .03em;
}
/* プライマリ：濃紺背景 */
.hero-section .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--c-indigo) !important;
  color: #fff !important;
  border: none !important;
}
.hero-section .wp-block-buttons .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background: var(--c-coral) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
}
/* セカンダリ：白背景・濃紺枠 */
.hero-section .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link {
  background: #fff !important;
  color: var(--c-ink) !important;
  border: 1.5px solid var(--c-ink) !important;
}
.hero-section .wp-block-buttons .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--c-ink) !important;
  color: #fff !important;
}

/* ヒーロー下のチェックリスト */
.hero-trust {
  display: flex;
  gap: 26px;
  font-size: 14.5px;
  color: var(--c-ink2);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-trust li::before {
  content: "✓ ";
  color: var(--c-coral);
  font-weight: 700;
  margin-right: 4px;
}

/* ヒーロー写真ラッパー（フローティングstat cards用） */
.hero-photo-wrap {
  position: relative;
}
.hero-photo-wrap::before {
  content: "";
  position: absolute;
  top: 20px; right: -20px; bottom: -20px; left: 20px;
  background: var(--c-sand);
  border-radius: 16px;
  z-index: 0;
}
.hero-photo-wrap > figure,
.hero-photo-wrap > .wp-block-image {
  position: relative;
  z-index: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-hero-photo);
  margin: 0;
}
.hero-photo-wrap > figure img,
.hero-photo-wrap > .wp-block-image img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 16px;
}

/* フローティング stat card 1（左上・白） */
.hero-stat-1 {
  position: absolute;
  top: 28px; left: -24px;
  background: #fff;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: var(--shadow-stat-card);
  min-width: 180px;
  z-index: 2;
}
.hero-stat-1 .label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.hero-stat-1 .num {
  font-family: var(--f-serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--c-indigo);
  line-height: 1;
}
.hero-stat-1 .num .plus {
  font-size: 18px;
  color: var(--c-coral);
  margin-left: 2px;
}
.hero-stat-1 .desc {
  font-size: 12px;
  color: var(--c-ink2);
  margin-top: 4px;
}

/* フローティング stat card 2（右下・濃紺） */
.hero-stat-2 {
  position: absolute;
  bottom: -18px; right: 16px;
  background: var(--c-indigo);
  color: #fff;
  padding: 18px 22px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}
.hero-stat-2 .icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--c-coral);
  display: grid;
  place-items: center;
  font-size: 20px;
}
.hero-stat-2 .label {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,.7);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.hero-stat-2 .desc {
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.3;
}

/* ──────────────── 4. トラスト行（信頼ロウ） ──────────────── */

.trust-row {
  padding: 32px 48px 48px !important;
  background: var(--c-bg);
}
.trust-row__card {
  background: var(--c-card);
  border-radius: 20px;
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  border: 1px solid var(--c-line);
  max-width: 1340px;
  margin: 0 auto;
}
.trust-row__head .kicker { margin-bottom: 6px; }
.trust-row__head h2 {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .5px;
  margin: 0;
}
.trust-row__item {
  border-left: 1px solid var(--c-line);
  padding-left: 24px;
}
.trust-row__num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 2px;
  margin-bottom: 8px;
  font-weight: 600;
}
.trust-row__item h3 {
  font-family: var(--f-serif);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
}
.trust-row__item p {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--c-ink2);
  margin: 0;
}

/* ──────────────── 5. フロー（5円ステップ） ──────────────── */

.flow-section {
  padding: 80px 48px !important;
}
.flow-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  gap: 32px;
  flex-wrap: wrap;
}
.flow-section__head h2 {
  font-family: var(--f-serif);
  font-size: 42px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1.5px;
}
.flow-section__head .lead {
  font-size: 13px;
  color: var(--c-ink2);
  max-width: 320px;
  line-height: 1.8;
  margin: 0;
}
.flow-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  max-width: 1340px;
  margin: 0 auto;
}
.flow-grid::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--c-line) 0 8px, transparent 8px 14px);
}
.flow-step {
  text-align: center;
  position: relative;
}
.flow-step__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--c-line);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-size: 30px;
  position: relative;
  z-index: 1;
}
.flow-step:first-child .flow-step__icon {
  border-color: var(--c-coral);
}
.flow-step__num {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-coral);
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 6px;
}
.flow-step__title {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}
.flow-step__body {
  font-size: 12.5px;
  color: var(--c-ink2);
  line-height: 1.7;
  padding: 0 12px;
  margin: 0;
}

/* ──────────────── 6. サービス3カード ──────────────── */

.services-section {
  padding: 80px 48px !important;
  background: var(--c-card);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.services-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 40px;
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  gap: 32px;
  flex-wrap: wrap;
}
.services-section__head h2 {
  font-family: var(--f-serif);
  font-size: 42px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1.5px;
}
.services-section__head .more {
  color: var(--c-coral);
  font-size: 14px;
  font-weight: 600;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1340px;
  margin: 0 auto;
}
.service-card {
  display: block;
  padding: 32px 28px;
  background: var(--c-bg);
  border-radius: 12px;
  border: 1px solid var(--c-line);
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 32px; left: 0;
  width: 4px; height: 36px;
  background: var(--c-coral);
}
.service-card:nth-child(2n)::before {
  background: var(--c-indigo);
}
.service-card__sub {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--c-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 600;
}
.service-card h3 {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: .5px;
}
.service-card p {
  font-size: 13px;
  line-height: 1.85;
  color: var(--c-ink2);
  margin: 0 0 18px;
}
.service-card__more {
  font-size: 12px;
  color: var(--c-coral);
  font-weight: 600;
}

/* ──────────────── 7. 3つのお約束（Promises Banner） ──────────────── */

.promises-section {
  padding: 80px 48px !important;
}
.promises-banner {
  background: var(--c-indigo);
  border-radius: 28px;
  padding: 72px 64px;
  color: #fff;
  position: relative;
  overflow: hidden;
  max-width: 1340px;
  margin: 0 auto;
}
.promises-banner::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: rgba(45, 111, 209, 0.13);
}
.promises-banner::after {
  content: "";
  position: absolute;
  bottom: -60px; right: 140px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(220, 231, 245, 0.09);
}
.promises-banner__head {
  text-align: center;
  margin-bottom: 56px;
  position: relative;
  z-index: 1;
}
.promises-banner__head .kicker {
  color: var(--c-coral);
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.promises-banner__head h2 {
  font-family: var(--f-serif);
  font-size: 52px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 2px;
  color: #fff;
}
.promise-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
  z-index: 1;
}
.promise-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.promise-card .num {
  font-family: var(--f-serif);
  font-size: 72px;
  font-weight: 700;
  color: var(--c-coral);
  line-height: 1;
  letter-spacing: -2px;
  display: block;
  margin-bottom: 16px;
}
.promise-card h3 {
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #fff;
}
.promise-card p {
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* 旧 .cta-indigo クラスも一応残す（互換性） */
.cta-indigo {
  background: var(--c-indigo);
  color: #fff;
  border-radius: 20px;
  padding: 56px 48px;
}
.cta-indigo .kicker { color: #8ab4ff; }
.cta-indigo h2 { color: #fff; }
.cta-indigo p { color: rgba(255,255,255,.85); }

/* ──────────────── 8. CTAレール（電話 + LINE 横並び） ──────────────── */

.cta-rail {
  padding: 40px 48px 80px !important;
}
.cta-rail__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  max-width: 1340px;
  margin: 0 auto;
}
.cta-rail__phone {
  background: var(--c-card);
  border-radius: 20px;
  padding: 48px;
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: 48px;
}
.cta-rail__phone .lead {
  flex: 1;
}
.cta-rail__phone .kicker { margin-bottom: 10px; }
.cta-rail__phone h3 {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.4;
}
.cta-rail__phone p {
  font-size: 13.5px;
  color: var(--c-ink2);
  line-height: 1.9;
  margin: 0;
}
.cta-rail__phone .num-block {
  text-align: right;
  border-left: 1px solid var(--c-line);
  padding-left: 40px;
}
.cta-rail__phone .num-block .hours {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 1.5px;
  margin-bottom: 4px;
}
.cta-rail__phone .num-block .num {
  font-family: var(--f-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--c-indigo);
  letter-spacing: 1px;
  line-height: 1;
  white-space: nowrap;
}
.cta-rail__phone .num-block .num a {
  color: inherit;
}
.cta-rail__phone .num-block .note {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 8px;
}

.cta-rail__line {
  background: var(--c-line-green);
  border-radius: 20px;
  padding: 48px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.cta-rail__line .kicker {
  color: rgba(255,255,255,.85);
  margin-bottom: 10px;
}
.cta-rail__line h3 {
  font-family: var(--f-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff;
}
.cta-rail__line p {
  font-size: 13px;
  line-height: 1.8;
  margin: 0;
  color: rgba(255,255,255,.9);
}
.cta-rail__line .btn {
  margin-top: 24px;
  padding: 16px 24px;
  background: #fff;
  color: var(--c-line-green);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  display: block;
  transition: transform .2s;
}
.cta-rail__line .btn:hover {
  transform: translateY(-1px);
}

/* btn-line（旧クラス互換） */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--c-line-green);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: var(--r-sm);
  font-weight: 700;
  text-decoration: none;
  transition: opacity .2s;
}
.btn-line:hover { opacity: .9; }

/* ──────────────── 9. ステップ番号（旧step-num互換） ──────────────── */

.step-num {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--c-coral);
  font-weight: 700;
}

/* ──────────────── 10. 数字統計（stat-num） ──────────────── */

.stat-num {
  font-family: var(--f-serif);
  font-size: 64px;
  font-weight: 700;
  color: var(--c-indigo);
  line-height: 1;
  display: block;
}
.stat-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--c-muted);
  margin-top: 8px;
  display: block;
}

/* ──────────────── 11. サブページ用ヘッダー ──────────────── */

.subpage-header {
  padding: 56px 48px 40px !important;
  background: var(--c-card);
  border-bottom: 1px solid var(--c-line);
}
.subpage-header__inner {
  max-width: 1340px;
  margin: 0 auto;
}
.subpage-header h1 {
  font-family: var(--f-serif);
  font-size: 56px;
  font-weight: 600;
  margin: 0 0 20px;
  letter-spacing: 1.5px;
  line-height: 1.25;
}
.subpage-header .lead {
  font-size: 16px;
  line-height: 2;
  color: var(--c-ink2);
  max-width: 720px;
  margin: 0;
}
.subpage-header .crumbs {
  margin-top: 32px;
  font-size: 12px;
  color: var(--c-muted);
  font-family: var(--f-mono);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.subpage-header .crumbs .current { color: var(--c-ink); }

/* ──────────────── 12. ¥0アピール（料金ページ） ──────────────── */

.price-zero {
  background: var(--c-card);
  border-radius: 20px;
  padding: 32px 40px;
  border: 1px solid var(--c-line);
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.price-zero__item {
  padding-left: 0;
}
.price-zero__item + .price-zero__item {
  border-left: 1px solid var(--c-line);
  padding-left: 32px;
}
.price-zero__item .kicker { margin-bottom: 8px; }
.price-zero__item .v {
  font-family: var(--f-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--c-indigo);
  line-height: 1;
}
.price-zero__item .desc {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 8px;
}

/* ──────────────── 13. 料金テーブル ──────────────── */

.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-line);
}
.price-table thead {
  background: var(--c-bg);
}
.price-table th {
  text-align: left;
  padding: 16px 24px;
  font-size: 12px;
  color: var(--c-muted);
  letter-spacing: 1.5px;
  font-weight: 600;
  font-family: var(--f-mono);
  text-transform: uppercase;
}
.price-table td {
  padding: 22px 24px;
  border-top: 1px solid var(--c-line);
}
.price-table td.item {
  font-family: var(--f-serif);
  font-size: 17px;
  font-weight: 600;
}
.price-table td.fee {
  text-align: right;
  font-family: var(--f-serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--c-indigo);
}
.price-table td.tax {
  text-align: right;
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--c-ink2);
}
.price-table td.note {
  font-size: 13px;
  color: var(--c-ink2);
}

.price-cat-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 18px;
}
.price-cat-head .num {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--c-coral);
  letter-spacing: 2px;
  font-weight: 600;
}
.price-cat-head h2 {
  font-family: var(--f-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0;
  letter-spacing: 1px;
}
.price-cat-head .line {
  flex: 1;
  border-bottom: 1px dashed var(--c-line);
}

/* ──────────────── 14. CF7 フォーム ──────────────── */

.cf7-form .cf7-label {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
  margin: 24px 0 4px;
  display: block;
  letter-spacing: 0.05em;
}
.cf7-form .required {
  display: inline-block;
  background: var(--c-coral);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 3px;
  margin-left: 8px;
  letter-spacing: 1px;
  font-weight: 600;
}
.cf7-form input[type="text"],
.cf7-form input[type="email"],
.cf7-form input[type="tel"],
.cf7-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--c-line);
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  font-size: 16px;
  background: #fff;
  transition: border-color .2s;
}
.cf7-form input:focus,
.cf7-form textarea:focus {
  outline: none;
  border-color: var(--c-coral);
  box-shadow: 0 0 0 3px rgba(45,111,209,.12);
}
.wpcf7-list-item {
  margin-right: 16px !important;
}
.cf7-privacy {
  margin: 28px 0;
  padding: 16px;
  background: var(--c-bg);
  border-radius: var(--r-sm);
  font-size: 14px;
}
.cf7-submit {
  text-align: center;
  margin-top: 32px;
}
.cf7-submit .wpcf7-submit {
  background: var(--c-indigo);
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 64px;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  letter-spacing: 0.1em;
  transition: all .2s;
  box-shadow: var(--shadow-cta);
}
.cf7-submit .wpcf7-submit:hover {
  background: var(--c-coral);
  transform: translateY(-1px);
}
.wpcf7-spinner { display: none !important; }

/* ──────────────── 15. パンくず・タイトル非表示（TOPページ） ──────────────── */
/* SWELL は #body_wrap にクラス付与 */

#body_wrap.page-id-2998 .p-breadcrumb,
#body_wrap.page-id-2998 .l-mainContent__title,
#body_wrap.page-id-2998 .l-page__title,
#body_wrap.page-id-2998 .post_title,
#body_wrap.page-id-2998 .entry-title,
#body_wrap.page-id-2998 header.entry-header,
#body_wrap.home .p-breadcrumb,
#body_wrap.home .l-mainContent__title,
#body_wrap.home .l-page__title,
#body_wrap.home .post_title,
#body_wrap.home .entry-title,
#body_wrap.home header.entry-header {
  display: none !important;
}

#body_wrap.page-id-2998 .l-mainContent,
#body_wrap.page-id-2998 .l-mainContent__inner,
#body_wrap.page-id-2998 .post_content,
#body_wrap.home .l-mainContent,
#body_wrap.home .l-mainContent__inner,
#body_wrap.home .post_content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* TOPページのコンテンツエリアを最大幅まで拡張 */
#body_wrap.page-id-2998 .l-mainContent,
#body_wrap.home .l-mainContent {
  max-width: 100% !important;
}

/* ──────────────── 16. レスポンシブ（SP対応・768px以下） ──────────────── */

@media (max-width: 768px) {
  body { font-size: 15px; line-height: 1.85; }

  /* セクション余白 */
  .hero-section,
  .trust-row,
  .flow-section,
  .services-section,
  .promises-section,
  .cta-rail,
  .subpage-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .hero-section { padding: 48px 20px 60px !important; }
  .flow-section,
  .services-section,
  .promises-section { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* ヒーロー */
  .hero-section .wp-block-columns {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }
  .hero-h1 {
    font-size: clamp(34px, 9vw, 48px);
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
  .hero-section .hero-lead { font-size: 16px; margin-bottom: 24px; }
  .hero-section .wp-block-buttons {
    flex-direction: column;
  }
  .hero-section .wp-block-buttons .wp-block-button {
    width: 100%;
  }
  .hero-section .wp-block-buttons .wp-block-button__link {
    width: 100%;
    justify-content: center;
    padding: 16px 20px !important;
    font-size: 15px !important;
  }
  .hero-trust { gap: 12px; font-size: 13px; }
  .hero-photo-wrap > figure img,
  .hero-photo-wrap > .wp-block-image img { height: 280px; }
  .hero-stat-1 { left: 0; top: 16px; min-width: auto; padding: 14px 18px; }
  .hero-stat-1 .num { font-size: 28px; }
  .hero-stat-2 { right: 8px; bottom: -10px; padding: 12px 16px; }
  .hero-stat-2 .icon { width: 32px; height: 32px; font-size: 16px; }

  /* トラスト */
  .trust-row__card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 24px;
  }
  .trust-row__item {
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: 16px;
  }

  /* フロー */
  .flow-section__head h2,
  .services-section__head h2 { font-size: 28px; }
  .flow-grid { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .flow-grid::before { display: none; }
  .flow-step__icon { width: 64px; height: 64px; font-size: 24px; }

  /* サービス */
  .services-grid { grid-template-columns: 1fr; gap: 14px; }

  /* Promises */
  .promises-banner {
    padding: 48px 28px;
    border-radius: 20px;
  }
  .promises-banner__head h2 { font-size: 32px; letter-spacing: 1px; }
  .promise-cards { grid-template-columns: 1fr; gap: 14px; }
  .promise-card { padding: 24px 20px; }
  .promise-card .num { font-size: 56px; margin-bottom: 8px; }

  /* CTAレール */
  .cta-rail__grid { grid-template-columns: 1fr; gap: 14px; }
  .cta-rail__phone {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    padding: 32px 24px;
  }
  .cta-rail__phone .num-block {
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: 24px;
    text-align: left;
  }
  .cta-rail__phone .num-block .num { font-size: 32px; }
  .cta-rail__line { padding: 32px 24px; }

  /* サブページヘッダー */
  .subpage-header { padding: 40px 20px 28px !important; }
  .subpage-header h1 { font-size: 32px; letter-spacing: 1px; }

  /* 料金 */
  .price-zero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }
  .price-zero__item + .price-zero__item {
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: 20px;
  }
  .price-table { font-size: 13px; }
  .price-table th,
  .price-table td { padding: 12px 12px; }
  .price-table td.fee { font-size: 16px; }

  /* ステップ番号・stat番号 */
  .stat-num { font-size: 48px; }
}

/* ──────────────── TOPページ CTAレール（電話+LINE）レスポンシブ対応 ──────────────── */
/* JSXのインラインスタイルを上書きして、狭い幅でも崩れないようにする */

/* 1100px未満では電話カードとLINEカードを縦積みに */
@media (max-width: 1100px) {
  .kanade-c-body section:last-of-type > div[style*="grid-template-columns:1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* 電話カード内：見出し+電話番号の横並びを、950px以下で縦積みに */
@media (max-width: 950px) {
  .kanade-c-body section:last-of-type > div > div[style*="display:flex"][style*="align-items:center"][style*="gap:48px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left;
    gap: 28px !important;
  }
  .kanade-c-body section:last-of-type div[style*="border-left:1px solid"] {
    border-left: none !important;
    border-top: 1px solid #dce3ec !important;
    padding-left: 0 !important;
    padding-top: 28px !important;
    text-align: left !important;
  }
  /* 電話番号の文字サイズを抑える */
  .kanade-c-body section:last-of-type div[style*="font-size:44px"] {
    font-size: 36px !important;
  }
}

/* 600px以下（SP）でも安全マージン */
@media (max-width: 600px) {
  .kanade-c-body section:last-of-type div[style*="padding:48px 48px"],
  .kanade-c-body section:last-of-type div[style*="padding:48px 40px"] {
    padding: 32px 24px !important;
  }
  .kanade-c-body section:last-of-type div[style*="font-size:44px"] {
    font-size: 28px !important;
  }
  .kanade-c-body section:last-of-type div[style*="font-size:32px"] {
    font-size: 22px !important;
  }
}

/* ──────────────── コンテナクエリ対応（重要：viewportでなくコンテナ幅で判定） ──────────────── */
/* SWELL の .l-mainContent が 1100px に制限されているため、
   media query (viewport基準) では効かない。 container query を使う。 */

.kanade-c-body {
  container-type: inline-size;
  container-name: kanadeBody;
  width: 100%;
  max-width: 100%;
}

/* ============================================================
 * CTAレール（電話+LINE）：横並びを維持しつつ、コンテナ幅で詰める
 * - 1100px PC : 横並び維持、フォント・余白圧縮
 * - 700px 以下 : 縦積みに
 * ============================================================ */

/* 1300px 以下：CTAレールの内部フォントと余白を圧縮 */
@container kanadeBody (max-width: 1300px) {
  /* グリッド比率を 1.3fr 1fr → 1.2fr 1fr に微調整 */
  .kanade-c-body section:last-of-type > div[style*="grid-template-columns:1.3fr 1fr"] {
    grid-template-columns: 1.2fr 1fr !important;
    gap: 16px !important;
  }
  /* 電話カード内：内部flex の余白とgap を圧縮 */
  .kanade-c-body section:last-of-type > div > div[style*="display:flex"][style*="align-items:center"][style*="gap:48px"] {
    gap: 24px !important;
    padding: 32px 28px !important;
  }
  /* LINEカードの padding 圧縮 */
  .kanade-c-body section:last-of-type > div > div[style*="background:#06c755"] {
    padding: 32px 28px !important;
  }
  /* 電話カード見出し縮小 */
  .kanade-c-body section:last-of-type div[style*="font-size:32px"] {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin: 0 0 8px !important;
  }
  /* 電話番号縮小 */
  .kanade-c-body section:last-of-type div[style*="font-size:44px"] {
    font-size: 28px !important;
    letter-spacing: 0.5px !important;
  }
  /* LINEカード見出し縮小 */
  .kanade-c-body section:last-of-type div[style*="font-size:26px"] {
    font-size: 18px !important;
    margin: 0 0 6px !important;
  }
  /* 電話カードの縦線部分の左パディング圧縮 */
  .kanade-c-body section:last-of-type div[style*="border-left:1px solid"] {
    padding-left: 20px !important;
  }
  /* セクション全体の左右パディングも圧縮 */
  .kanade-c-body section:last-of-type {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  /* 説明テキスト縮小 */
  .kanade-c-body section:last-of-type p[style*="font-size:13.5px"] {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
}

/* 700px 以下：ここで初めて縦積みに */
@container kanadeBody (max-width: 700px) {
  .kanade-c-body section:last-of-type > div[style*="grid-template-columns:1.3fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* 電話カード内のflexも縦積みに */
  .kanade-c-body section:last-of-type > div > div[style*="display:flex"][style*="align-items:center"] {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 20px !important;
  }
  .kanade-c-body section:last-of-type div[style*="border-left:1px solid"] {
    border-left: none !important;
    border-top: 1px solid #dce3ec !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
    text-align: left !important;
  }
  /* 縦積み時の電話番号は読みやすいサイズに戻す */
  .kanade-c-body section:last-of-type div[style*="font-size:44px"] {
    font-size: 32px !important;
  }
}

/* ============================================================
 * HEROセクション：1100px PC では横並び維持 + フォント圧縮
 * ============================================================ */

/* 1300px 以下：HEROのフォント・余白を圧縮（横並びは維持） */
@container kanadeBody (max-width: 1300px) {
  /* グリッド比率を 1.2:1 → 1:1 に均等化 */
  .kanade-c-body section:first-of-type > div[style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
  /* H1 を 92px → 64px（4行表記でも収まる） */
  .kanade-c-body h1[style*="92px"] {
    font-size: clamp(40px, 5.5vw, 64px) !important;
    letter-spacing: 1px !important;
    margin: 0 0 24px !important;
  }
  /* H1 内の小さな「に」も比率調整 */
  .kanade-c-body h1[style*="92px"] span[style*="54px"] {
    font-size: 0.6em !important;
  }
  /* 帯ラベル（建設業許可／経審／入札）縮小 */
  .kanade-c-body div[style*="background:#0d2a5e"][style*="border-radius:4px"][style*="letter-spacing:2px"] {
    font-size: 14px !important;
    padding: 8px 14px !important;
    letter-spacing: 1px !important;
    margin-bottom: 20px !important;
  }
  /* リード文を抑制 */
  .kanade-c-body section:first-of-type p[style*="font-size:18px"] {
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin-bottom: 28px !important;
  }
  /* HEROのCTAボタンを少し抑える */
  .kanade-c-body section:first-of-type a[style*="padding:20px 32px"],
  .kanade-c-body section:first-of-type a[style*="padding:20px 30px"] {
    padding: 14px 22px !important;
    font-size: 14px !important;
  }
  /* HERO画像の高さを抑える */
  .kanade-c-body section:first-of-type div[style*="height:520px"] {
    height: 380px !important;
  }
  /* セクション全体の左右パディング圧縮 */
  .kanade-c-body section:first-of-type {
    padding: 56px 24px 64px !important;
  }
  /* 浮遊カード（CASE TRACK）縮小 */
  .kanade-c-body section:first-of-type div[style*="position:absolute"][style*="top:28px"][style*="left:-24px"] {
    padding: 14px 18px !important;
    min-width: 140px !important;
    left: -10px !important;
    top: 16px !important;
  }
  .kanade-c-body section:first-of-type div[style*="position:absolute"][style*="top:28px"] div[style*="font-size:36px"] {
    font-size: 26px !important;
  }
  /* 浮遊カード（URGENT CARE）縮小 */
  .kanade-c-body section:first-of-type div[style*="position:absolute"][style*="bottom:-18px"][style*="right:16px"] {
    padding: 12px 16px !important;
    bottom: -8px !important;
    right: 8px !important;
  }
  .kanade-c-body section:first-of-type div[style*="position:absolute"][style*="bottom:-18px"] div[style*="width:40px"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }
  .kanade-c-body section:first-of-type div[style*="position:absolute"][style*="bottom:-18px"] div[style*="font-size:14px"] {
    font-size: 12px !important;
  }
}

/* 800px 以下：ここで初めて HERO を縦積み */
@container kanadeBody (max-width: 800px) {
  .kanade-c-body section:first-of-type > div[style*="grid-template-columns:1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .kanade-c-body h1[style*="92px"] {
    font-size: clamp(36px, 8vw, 56px) !important;
  }
  /* TRUST 4-col grid を 1列に（縦積み） */
  .kanade-c-body div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  .kanade-c-body div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] > div[style*="border-left"] {
    border-left: none !important;
    border-top: 1px solid #dce3ec !important;
    padding-left: 0 !important;
    padding-top: 24px !important;
  }
}

/* 1100px 以下：TRUST だけ早めに 1+3 に（HEROは横並びキープ） */
@container kanadeBody (min-width: 801px) and (max-width: 1100px) {
  .kanade-c-body div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
  .kanade-c-body div[style*="grid-template-columns:1.4fr 1fr 1fr 1fr"] > div:first-child {
    grid-column: 1 / -1 !important;
    border-bottom: 1px solid #dce3ec !important;
    padding-bottom: 16px !important;
    margin-bottom: 8px !important;
  }
}

/* 800px 以下：FLOWの5列、SERVICESの3列を縦積み */
@container kanadeBody (max-width: 800px) {
  .kanade-c-body div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 16px !important;
  }
  .kanade-c-body div[style*="grid-template-columns:repeat(3"] {
    grid-template-columns: 1fr !important;
  }
  .kanade-c-body section[style*="padding:80px 48px"],
  .kanade-c-body section[style*="padding:64px 48px"] {
    padding: 48px 24px !important;
  }
}

/* 600px 以下：完全SP対応 */
@container kanadeBody (max-width: 600px) {
  .kanade-c-body div[style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  .kanade-c-body section[style*="padding"] {
    padding: 40px 16px !important;
  }
  .kanade-c-body div[style*="padding:48px 48px"],
  .kanade-c-body div[style*="padding:48px 40px"],
  .kanade-c-body div[style*="padding:36px 40px"] {
    padding: 28px 20px !important;
  }
  .kanade-c-body div[style*="padding:72px 64px"] {
    padding: 48px 24px !important;
  }
  .kanade-c-body div[style*="font-size:72px"] {
    font-size: 48px !important;
  }
}

/* ============================================================
 * 投稿ページ（single post）用 スタイル
 * SWELL の標準クラス: .single-post / .c-postTitle / .c-categoryList 等
 * ============================================================ */

/* ──────────────── 投稿ページのコンテンツ幅を広く ──────────────── */
#body_wrap.single-post .l-mainContent,
#body_wrap.single-post .l-mainContent__inner,
#body_wrap.single-post .post_content {
  max-width: 1100px !important;
}

/* ──────────────── 投稿タイトル（c-postTitle） ──────────────── */
.single-post .p-articleHead.c-postTitle {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  padding: 24px 0 32px;
  border-bottom: 1px solid var(--c-line);
}
.single-post .c-postTitle__ttl {
  font-family: var(--f-serif) !important;
  font-size: clamp(28px, 4vw, 48px) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
  color: var(--c-ink) !important;
  margin: 0 !important;
}

/* 日付：縦書きスタイルから横書きモノフォントへ */
.single-post .c-postTitle__date {
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--f-mono) !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  color: var(--c-muted) !important;
  font-weight: 500 !important;
  writing-mode: horizontal-tb !important;
}
.single-post .c-postTitle__date .__y::after { content: "·"; margin: 0 6px; opacity: 0.5; }
.single-post .c-postTitle__date .__md { font-weight: 600; }

/* ──────────────── カテゴリバッジを kicker スタイルに ──────────────── */
.single-post .p-articleMetas {
  margin-bottom: 24px !important;
}
.single-post .p-articleMetas__termList.c-categoryList {
  display: inline-flex;
  gap: 8px;
}
.single-post .c-categoryList__link {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: var(--c-indigo) !important;
  color: #fff !important;
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: opacity .15s !important;
}
.single-post .c-categoryList__link:hover {
  opacity: 0.85;
}

/* ──────────────── アイキャッチを大きく綺麗に ──────────────── */
.single-post .p-articleThumb {
  margin: 32px 0 48px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card);
}
.single-post .p-articleThumb__img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* ──────────────── 本文の読みやすさ ──────────────── */
.single-post .post_content {
  font-size: 16px;
  line-height: 1.95;
  color: var(--c-ink);
}
/* 本文を中央寄せの読みやすい行長に */
.single-post .post_content > * {
  max-width: 760px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.single-post .post_content > .p-articleThumb,
.single-post .post_content > .alignfull,
.single-post .post_content > .alignwide {
  max-width: 1100px;
}
.single-post .post_content h2 {
  font-family: var(--f-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 56px auto 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--c-indigo);
  line-height: 1.5;
}
.single-post .post_content h3 {
  font-family: var(--f-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 40px auto 16px;
  padding-left: 16px;
  border-left: 4px solid var(--c-coral);
  line-height: 1.5;
}
.single-post .post_content p {
  margin-bottom: 1.6em;
}
.single-post .post_content a {
  color: var(--c-coral);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ──────────────── 投稿末尾CTA（PHPフックで自動挿入される） ──────────────── */
.single-post .post-cta-indigo {
  background: var(--c-indigo);
  border-radius: 28px;
  padding: 56px 48px;
  margin: 64px auto 32px;
  max-width: 1100px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.single-post .post-cta-indigo::before {
  content: "";
  position: absolute;
  top: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: rgba(45,111,209,0.13);
}
.single-post .post-cta-indigo .kicker {
  color: var(--c-coral);
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.single-post .post-cta-indigo h2 {
  font-family: var(--f-serif);
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 16px;
  color: #fff;
  border: 0;
  padding: 0;
}
.single-post .post-cta-indigo p {
  color: rgba(255,255,255,0.85);
  margin: 0 0 28px;
  font-size: 14.5px;
  line-height: 1.9;
  max-width: none;
}
.single-post .post-cta-indigo .post-cta-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.single-post .post-cta-indigo .post-cta-btn {
  flex: 1 1 0;                  /* 3つを均等幅に */
  display: inline-flex;
  align-items: center;
  justify-content: center;       /* テキストを中央寄せ */
  gap: 8px;
  padding: 16px 20px;
  border-radius: 8px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  transition: all .2s;
  text-align: center;
  white-space: nowrap;
}
.single-post .post-cta-indigo .post-cta-btn--primary {
  background: var(--c-coral);
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(45,111,209,0.4);
}
.single-post .post-cta-indigo .post-cta-btn--primary:hover {
  transform: translateY(-1px);
  background: #4789e0;
}
.single-post .post-cta-indigo .post-cta-btn--tel {
  background: #fff;
  color: var(--c-indigo) !important;
}
.single-post .post-cta-indigo .post-cta-btn--line {
  background: var(--c-line-green);
  color: #fff !important;
}

/* ──────────────── 投稿末尾「お知らせ一覧へ戻る」リンク ──────────────── */
.single-post .post-back-to-list {
  text-align: center;
  margin: 48px auto 32px;
  max-width: 760px;
}
.single-post .post-back-to-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  transition: all .2s;
}
.single-post .post-back-to-list a:hover {
  border-color: var(--c-coral);
  color: var(--c-coral);
  transform: translateX(-2px);
}

/* ──────────────── SNSシェアボタン整理（左サイドの浮遊版を控えめに） ──────────────── */
.single-post .p-shareBtns--sticky,
.single-post .p-shareBtns.is-sticky {
  opacity: 0.5;
  transition: opacity .2s;
}
.single-post .p-shareBtns--sticky:hover,
.single-post .p-shareBtns.is-sticky:hover {
  opacity: 1;
}

/* ──────────────── SP対応 ──────────────── */
@media (max-width: 768px) {
  .single-post .post-cta-indigo {
    padding: 40px 28px;
    border-radius: 20px;
    margin: 48px auto 24px;
  }
  .single-post .post-cta-indigo h2 {
    font-size: 22px;
  }
  .single-post .post-cta-indigo .post-cta-buttons {
    flex-direction: column;
  }
  .single-post .post-cta-indigo .post-cta-btn {
    width: 100%;
    justify-content: center;
  }
  .single-post .post_content h2 { font-size: 22px; margin: 40px auto 16px; }
  .single-post .post_content h3 { font-size: 18px; }
}

/* ──────────────── 関連記事（functions.php で挿入） ──────────────── */
.single-post .post-related {
  max-width: 1100px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--c-line);
}
.single-post .post-related__head {
  text-align: center;
  margin-bottom: 32px;
}
.single-post .post-related__head .kicker {
  letter-spacing: 2.5px;
  margin-bottom: 8px;
}
.single-post .post-related__head h2 {
  font-family: var(--f-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  border: 0;
  padding: 0;
  letter-spacing: 1px;
}
.single-post .post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.single-post .post-related__card {
  display: block;
  text-decoration: none;
  color: var(--c-ink);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s;
}
.single-post .post-related__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  border-color: var(--c-coral);
}
.single-post .post-related__thumb {
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: var(--c-sand);
}
.single-post .post-related__thumb--placeholder {
  background: linear-gradient(135deg, var(--c-sand), var(--c-mint));
}
.single-post .post-related__body {
  padding: 18px 20px;
}
.single-post .post-related__date {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  color: var(--c-muted);
  margin-bottom: 6px;
}
.single-post .post-related__title {
  font-family: var(--f-serif) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  color: var(--c-ink) !important;
}
/* SWELL等のテーマがh3に::before / ::afterで装飾している場合に備えて消す */
.single-post .post-related__title::before,
.single-post .post-related__title::after,
.single-post .post-related__card h3::before,
.single-post .post-related__card h3::after {
  content: none !important;
  display: none !important;
}
/* カード全体やリンクに何かボーダーが付くケースも消す */
.single-post .post-related__body {
  border: 0 !important;
}

/* SP */
@media (max-width: 768px) {
  .single-post .post-related__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .single-post .post-related__head h2 { font-size: 22px; }
  .single-post .post-related__thumb { height: 180px; }
}