/*
Theme Name: Re・Kenzen
Theme URI: https://re-kenzen.example.com/
Author: Re・Kenzen
Description: 株式会社Re・Kenzen コーポレートサイト用テーマ。岡崎のリフォーム会社（水まわり・内装・外壁・屋根／ドローン点検／Sun on Tow）。1ページ完結型。
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rekenzen
*/

/* =========================================================================
   Re・Kenzen Design System
   - モバイルファースト。デバイス切替は .rk-site のコンテナ幅で駆動
     （@container site）。ビューポートではなくフレーム幅にレスポンス。
   - 配色トークンは企画書 §6-2 を踏襲。
   ========================================================================= */

:root {
  /* brand */
  --navy:      #14243B;
  --navy-deep: #0E1B2E;
  --navy-soft: #1C3150;
  --teal:      #1F7A6D;
  --teal-700:  #18655A;
  --green:     #2E7D5B;
  --gold:      #D89A3C;
  --gold-700:  #B97F27;
  --red:       #C8483D;

  /* surfaces / ink */
  --bg:        #F7F6F2;
  --bg-warm:   #F1EEE7;
  --card:      #FFFFFF;
  --line:      #E6E3DC;
  --line-soft: #EFEDE6;
  --ink:       #1A2433;
  --ink-2:     #5B6472;
  --ink-3:     #8A909B;
  --on-navy:   #EAF0F6;
  --on-navy-2: #9FB2C6;

  /* type */
  --sans: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  /* radius / shadow */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --sh-1: 0 1px 2px rgba(20,36,59,.05), 0 4px 14px rgba(20,36,59,.06);
  --sh-2: 0 6px 18px rgba(20,36,59,.08), 0 18px 40px rgba(20,36,59,.10);
  --sh-3: 0 18px 50px rgba(14,27,46,.20);

  /* business colors */
  --c-drone:  var(--navy);
  --c-reform: var(--teal);
  --c-cafe:   var(--gold);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The site root is the responsive container. */
.rk-site {
  container-type: inline-size;
  container-name: site;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
}
.rk-site img { max-width: 100%; display: block; }
.rk-site a { color: inherit; text-decoration: none; }
.rk-site p { margin: 0; }
.rk-site h1, .rk-site h2, .rk-site h3, .rk-site h4 { margin: 0; font-weight: 700; line-height: 1.4; letter-spacing: .01em; }

/* ---- layout helpers ---- */
.rk-container { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 20px; }
.rk-section { padding-block: 56px; position: relative; }
.rk-section--tight { padding-block: 40px; }
.rk-bleed { position: relative; }

.rk-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--teal-700); text-transform: none;
}
.rk-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold); display: inline-block; }
.rk-eyebrow--light { color: var(--gold); }
.rk-eyebrow--center { justify-content: center; }

/* section heading */
.rk-head { margin-bottom: 28px; }
.rk-head h2 {
  font-size: clamp(23px, 5.6cqi, 33px);
  letter-spacing: .02em; line-height: 1.45; margin-top: 10px;
}
.rk-head .sub { color: var(--ink-2); margin-top: 12px; font-size: 15px; }
.rk-head--center { text-align: center; }
.rk-head--center .rk-eyebrow { justify-content: center; }
.rk-en {
  display: block; font-size: 11px; letter-spacing: .26em; font-weight: 700;
  color: var(--ink-3); margin-top: 14px;
}

/* =========================== buttons / CTA =============================== */
.rk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-weight: 700; font-size: 15.5px; letter-spacing: .02em;
  cursor: pointer; border: 1.5px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
}
.rk-btn .ic { width: 19px; height: 19px; flex: none; }
.rk-btn small { font-weight: 600; font-size: 11px; opacity: .8; letter-spacing: .04em; }
.rk-btn:hover { transform: translateY(-2px); }
.rk-btn.rk-btn--tel  { background: var(--gold); color: #2A1B05; box-shadow: 0 6px 16px rgba(216,154,60,.32); flex-direction: column; gap: 1px; line-height: 1.2; padding-block: 8px; }
.rk-btn.rk-btn--tel:hover { background: var(--gold-700); color:#fff; }
.rk-btn.rk-btn--line { background: #06C755; color: #fff; box-shadow: 0 6px 16px rgba(6,199,85,.28); }
.rk-btn.rk-btn--line:hover { background: #05b34c; }
.rk-btn.rk-btn--form { background: var(--navy); color: #fff; }
.rk-btn.rk-btn--form:hover { background: var(--navy-soft); }
.rk-btn.rk-btn--form-light { background: #fff; color: var(--navy); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.rk-btn.rk-btn--form-light:hover { background: #eef2f6; }
.rk-btn.rk-btn--ghost { background: transparent; color: var(--teal-700); border-color: var(--teal); }
.rk-btn.rk-btn--ghost:hover { background: var(--teal); color: #fff; }
.rk-btn.rk-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.rk-btn.rk-btn--ghost-light:hover { background: rgba(255,255,255,.12); }
.rk-btn--block { width: 100%; }

/* CTA trio */
.rk-cta-group { display: grid; gap: 12px; grid-template-columns: 1fr; }
.rk-cta-note { font-size: 12.5px; color: var(--ink-2); display:flex; align-items:center; gap:8px; }
.rk-cta-note .dot { width:6px; height:6px; border-radius:50%; background: var(--green); }

/* =========================== generic card =============================== */
.rk-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); position: relative; overflow: hidden;
}
.rk-card--accent::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--teal);
}
.rk-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; font-weight: 800; font-size: 16px;
  background: var(--navy); color: #fff; flex: none; letter-spacing: .02em;
}
.rk-check { width: 22px; height: 22px; flex: none; color: var(--green); }

/* image slot baseline */
image-slot { display: block; background: var(--bg-warm); }

/* placeholder striped media (when no slot) */
.rk-ph {
  background:
    repeating-linear-gradient(135deg, rgba(20,36,59,.045) 0 10px, transparent 10px 20px),
    var(--bg-warm);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12px; font-family: ui-monospace, monospace; letter-spacing: .04em;
  border-radius: var(--r);
}

/* ============================ header / nav ============================== */
.rk-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247,246,242,.86); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--line);
}
.rk-header__in { display: flex; align-items: center; gap: 16px; height: 64px; }
.rk-logo { display: flex; align-items: center; gap: 11px; }
.rk-logo .mark { width: 40px; height: 40px; }
.rk-logo .txt { display:flex; flex-direction:column; line-height:1.15; }
.rk-logo .txt b { font-size: 17px; letter-spacing: .04em; color: var(--navy); }
.rk-logo .txt span { font-size: 10px; color: var(--ink-2); letter-spacing: .02em; }
.rk-nav { display: none; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 600; }
.rk-nav a { color: var(--ink); padding: 6px 2px; border-bottom: 2px solid transparent; }
.rk-nav a:hover { color: var(--teal-700); border-color: var(--gold); }
.rk-header__cta { display: none; margin-left: 14px; gap: 8px; }
.rk-header__tel { display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.rk-header__tel b { font-size: 19px; color: var(--navy); letter-spacing:.02em; }
.rk-header__tel span { font-size: 10.5px; color: var(--ink-2); }
.rk-burger { margin-left: auto; width: 44px; height: 44px; border:1px solid var(--line); border-radius: 10px; background:#fff; display:grid; place-items:center; cursor:pointer; }
.rk-burger span, .rk-burger span::before, .rk-burger span::after { content:""; display:block; width:18px; height:2px; background:var(--navy); position:relative; }
.rk-burger span::before { position:absolute; top:-6px; } .rk-burger span::after { position:absolute; top:6px; }

/* ============================ logo placeholder ========================== */
.rk-logo-slot { width: 40px; height: 40px; border-radius: 9px; }

/* =============================== HERO =================================== */
.rk-hero { position: relative; isolation: isolate; }
.rk-hero__media { position: absolute; inset: 0; z-index: -2; }
.rk-hero__media image-slot, .rk-hero__media .rk-ph { width: 100%; height: 100%; border-radius: 0; }
.rk-hero__scrim { position: absolute; inset: 0; z-index: -1; }
.rk-hero__in { padding-block: 64px; }
.rk-hero__eyebrow { color: #fff; }
.rk-hero h1 {
  font-size: clamp(33px, 9cqi, 72px); line-height: 1.25; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 24px rgba(8,16,28,.45); margin-top: 16px;
}
.rk-hero__lead { color: rgba(255,255,255,.92); margin-top: 18px; max-width: 38em; font-size: 15.5px; text-shadow: 0 1px 12px rgba(8,16,28,.5); }
.rk-hero__cta { margin-top: 28px; max-width: 460px; }
.rk-hero__stats { display:flex; flex-wrap:wrap; gap: 18px 26px; margin-top: 30px; }
.rk-hero__stat { color:#fff; }
.rk-hero__stat b { display:block; font-size: 22px; letter-spacing:.02em; }
.rk-hero__stat span { font-size: 11.5px; color: rgba(255,255,255,.8); }

/* =========================== business cards ============================= */
.rk-biz { display: grid; gap: 16px; grid-template-columns: 1fr; }
.rk-biz__card { display: flex; flex-direction: column; min-height: 0; }
.rk-biz__media { aspect-ratio: 16/10; }
.rk-biz__media image-slot, .rk-biz__media .rk-ph { width:100%; height:100%; border-radius: 0; }
.rk-biz__body { padding: 20px 20px 22px; }
.rk-biz__tag { display:inline-block; font-size: 11.5px; font-weight:700; letter-spacing:.04em; padding: 4px 11px; border-radius: 999px; color:#fff; }
.rk-biz__card .en { display: block; font-size: 10.5px; letter-spacing:.22em; color: var(--ink-3); font-weight:700; margin-top: 14px; }
.rk-biz__card h3 { font-size: 22px; margin-top: 3px; }
.rk-biz__card p { color: var(--ink-2); font-size: 14px; margin-top: 10px; }
.rk-biz__more { margin-top: 16px; font-weight:700; font-size: 14px; color: var(--teal-700); display:inline-flex; align-items:center; gap:7px; }
.rk-biz__more .ar { transition: transform .2s; }
.rk-biz__card:hover .rk-biz__more .ar { transform: translateX(4px); }
.rk-biz__card[data-c="navy"]  { box-shadow: var(--sh-1); }
.rk-biz__card[data-c="navy"]  .rk-biz__tag { background: var(--navy); }
.rk-biz__card[data-c="teal"]  .rk-biz__tag { background: var(--teal); }
.rk-biz__card[data-c="gold"]  .rk-biz__tag { background: var(--gold-700); }
.rk-biz__card[data-c="navy"]::before  { background: var(--navy); }
.rk-biz__card[data-c="teal"]::before  { background: var(--teal); }
.rk-biz__card[data-c="gold"]::before  { background: var(--gold); }

/* ============================== worries ================================= */
.rk-worries { background: var(--navy); color: var(--on-navy); }
.rk-worries .rk-head h2 { color: #fff; }
.rk-worries .rk-eyebrow { color: var(--gold); }
.rk-worry-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.rk-worry {
  display: flex; gap: 13px; align-items: flex-start;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r); padding: 16px 17px; font-size: 14.5px; color: var(--on-navy);
}
.rk-worry .q { font-weight: 800; color: var(--gold); flex:none; font-size: 17px; line-height:1.5; }
.rk-worries__bridge { text-align:center; margin-top: 30px; font-size: clamp(18px, 4.4cqi, 26px); font-weight:700; color:#fff; }
.rk-worries__bridge b { color: var(--gold); }

/* =============================== values ================================= */
.rk-values { display: grid; gap: 16px; grid-template-columns: 1fr; }
.rk-value { padding: 24px 22px 26px; }
.rk-value__top { display:flex; align-items:center; gap: 14px; }
.rk-value__no { font-family: ui-monospace, monospace; font-size: 13px; font-weight:700; color: var(--gold-700); letter-spacing:.1em; }
.rk-value h3 { font-size: 21px; margin-top: 14px; }
.rk-value .lead { color: var(--teal-700); font-weight:700; font-size: 14px; margin-top: 4px; }
.rk-value p { color: var(--ink-2); font-size: 14px; margin-top: 11px; }
.rk-value__icn { width: 46px; height: 46px; border-radius: 13px; display:grid; place-items:center; background: var(--bg-warm); color: var(--teal); }
.rk-value__icn svg { width: 26px; height: 26px; }

/* =============================== pricing ================================ */
.rk-price-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
.rk-price { padding: 22px 20px; display:flex; flex-direction:column; }
.rk-price__no { font-family: ui-monospace, monospace; font-size: 12px; color: var(--ink-3); letter-spacing:.1em; font-weight:700; }
.rk-price h3 { font-size: 18px; margin-top: 7px; min-height: 0; }
.rk-price p { color: var(--ink-2); font-size: 13px; margin-top: 9px; flex: 1; }
.rk-price__fee { margin-top: 16px; display:flex; align-items:baseline; gap: 4px; }
.rk-price__fee b { font-size: 27px; color: var(--navy); letter-spacing:.01em; }
.rk-price__fee .yen { font-size: 14px; font-weight:700; } .rk-price__fee .from { font-size: 13px; color: var(--ink-2); }
.rk-price__tax { font-size: 11px; color: var(--ink-3); }
.rk-badge { position:absolute; top: 0; right: 0; font-size: 11px; font-weight:800; letter-spacing:.04em; color:#fff; padding: 5px 13px; border-bottom-left-radius: var(--r); }
.rk-badge--popular { background: var(--gold-700); }
.rk-badge--best { background: var(--green); }
.rk-badge--urgent { background: var(--red); }
.rk-price[data-hl="best"] { border-color: var(--green); box-shadow: 0 0 0 2px rgba(46,125,91,.18), var(--sh-2); }
.rk-price[data-hl="popular"] { border-color: var(--gold); }
.rk-price__note { font-size: 12.5px; color: var(--ink-2); margin-top: 18px; text-align:center; }
.rk-price-more { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.rk-price-more.is-open { max-height: 2400px; }
.rk-price-more-grid { animation: rkPriceReveal .4s ease; }
@keyframes rkPriceReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.rk-price__foot { margin-top: 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rk-price-toggle {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: 14.5px; color: var(--teal-700);
  background: #fff; border: 1.5px solid var(--teal); border-radius: 999px; padding: 12px 24px; transition: background .2s, color .2s;
}
.rk-price-toggle:hover { background: var(--teal); color: #fff; }
.rk-price-toggle .chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s; margin-top: -3px; }
.rk-price-toggle .chev.up { transform: rotate(-135deg); margin-top: 3px; }

/* ============================ cafe extras =============================== */
.rk-cafe__stats { display: flex; gap: 22px; margin-top: 20px; flex-wrap: wrap; }
.rk-cafe__stat b { display: block; font-size: 22px; color: var(--gold-700); letter-spacing: .01em; }
.rk-cafe__stat span { font-size: 11.5px; color: var(--ink-2); }
.rk-cafe__ig {
  margin-top: 22px; align-self: flex-start;
  background: linear-gradient(120deg, #F58529, #DD2A7B 50%, #8134AF); color: #fff;
  box-shadow: 0 6px 18px rgba(221,42,123,.28);
}
.rk-cafe__ig:hover { filter: brightness(1.05); }
.rk-cafe__ig .hd { font-weight: 600; font-size: 12.5px; opacity: .9; }
.rk-cafe__text { display: flex; flex-direction: column; align-items: flex-start; }

.rk-cafe__access { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; }
.rk-cafe__map { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); aspect-ratio: 16/10; background: var(--bg-warm); }
.rk-cafe__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.rk-cafe__info { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 24px; box-shadow: var(--sh-1); }
.rk-cafe__info h4 { font-size: 15px; color: var(--navy); margin-bottom: 14px; letter-spacing: .04em; }
.rk-cafe__info dl { display: grid; gap: 14px; margin: 0; }
.rk-cafe__info dt { font-size: 12px; font-weight: 700; color: var(--teal-700); }
.rk-cafe__info dd { margin: 3px 0 0; font-size: 14px; color: var(--ink); line-height: 1.7; }
.rk-cafe__maplink { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-weight: 700; font-size: 14px; color: var(--teal-700); }
.rk-cafe__maplink:hover { color: var(--navy); }

/* ============================== company ================================ */
.rk-company__tbl { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.rk-company__tbl tr { border-bottom: 1px solid var(--line); }
.rk-company__tbl tr:last-child { border-bottom: 0; }
.rk-company__tbl th, .rk-company__tbl td { text-align: left; padding: 16px 20px; vertical-align: top; font-size: 14.5px; }
.rk-company__tbl th { width: 130px; background: var(--bg-warm); color: var(--navy); font-weight: 700; white-space: nowrap; }
.rk-company__tbl td { color: var(--ink); line-height: 1.8; }

@container site (min-width: 720px) {
  .rk-rsv { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .rk-rsv__strength { padding: 28px 32px; }
  .rk-cafe__in { grid-template-columns: 1fr 1.05fr; gap: 48px; }
  .rk-cafe__logo { width: 180px; }
  .rk-cafe__access { grid-template-columns: 1.5fr 1fr; gap: 24px; }
  .rk-company__tbl th { width: 160px; }
}

/* =============================== timeline =============================== */
.rk-flow { position: relative; display: grid; gap: 0; }
.rk-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; position: relative; padding-bottom: 22px; }
.rk-step:last-child { padding-bottom: 0; }
.rk-step__rail { display:flex; flex-direction:column; align-items:center; }
.rk-step__line { width: 2px; flex: 1; background: var(--line); margin-top: 6px; }
.rk-step:last-child .rk-step__line { display:none; }
.rk-step__dot { width: 48px; height: 48px; border-radius: 50%; background: var(--card); border: 2px solid var(--teal); color: var(--teal-700); display:grid; place-items:center; font-weight:800; font-size: 16px; flex:none; transition: transform .5s, background .5s, color .5s; }
.rk-step__body { padding-bottom: 4px; }
.rk-step__time { display:inline-block; font-size: 11.5px; font-weight:700; color: var(--gold-700); background: rgba(216,154,60,.12); padding: 3px 10px; border-radius: 999px; }
.rk-step h3 { font-size: 18px; margin-top: 9px; }
.rk-step p { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.rk-step.is-in .rk-step__dot { background: var(--teal); color:#fff; transform: scale(1.06); }
.rk-step { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.rk-step.is-in { opacity: 1; transform: none; }

/* =============================== reasons ================================ */
.rk-reasons { display:grid; gap: 14px; grid-template-columns: 1fr; }
.rk-reason { display:flex; gap: 15px; padding: 20px 20px; align-items:flex-start; }
.rk-reason__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--navy); color: var(--gold); display:grid; place-items:center; flex:none; }
.rk-reason__ic svg { width: 24px; height:24px; }
.rk-reason h3 { font-size: 17px; display:flex; align-items:center; gap:8px; }
.rk-reason p { color: var(--ink-2); font-size: 13.5px; margin-top: 7px; }

/* =========================== before / after ============================= */
.rk-cases { display:grid; gap: 22px; grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
.rk-cases--single { max-width: 420px; margin-inline: auto; }
.rk-cases--single .rk-ba__cap { text-align: center; }
.rk-cases--single .rk-ba__frame { aspect-ratio: 4/5; }
.rk-ba { user-select: none; }
.rk-ba__frame { position: relative; aspect-ratio: 4/5; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); cursor: ew-resize; touch-action: none; }
.rk-ba__layer { position:absolute; inset:0; }
.rk-ba__layer image-slot, .rk-ba__layer .rk-ph { width:100%; height:100%; border-radius:0; }
.rk-ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.rk-ba__tag { position:absolute; top: 12px; font-size: 11.5px; font-weight:800; letter-spacing:.06em; color:#fff; padding: 4px 11px; border-radius:999px; background: rgba(14,27,46,.7); }
.rk-ba__tag--b { left: 12px; } .rk-ba__tag--a { right: 12px; background: rgba(31,122,109,.85); }
.rk-ba__handle { position:absolute; top:0; bottom:0; left: var(--pos, 50%); width: 2px; background:#fff; box-shadow: 0 0 0 1px rgba(14,27,46,.15); transform: translateX(-1px); }
.rk-ba__grip { position:absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius:50%; background:#fff; box-shadow: var(--sh-2); display:grid; place-items:center; color: var(--navy); }
.rk-ba__grip svg { width: 22px; height: 22px; }
.rk-ba__cap { margin-top: 13px; }
.rk-ba__cap .tag { font-size: 11.5px; font-weight:700; color: var(--teal-700); }
.rk-ba__cap h3 { font-size: 17px; margin-top: 5px; }
.rk-ba__cap .area { display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

/* =============================== news =================================== */
.rk-news { display:grid; gap: 0; }
.rk-news__row { display:flex; gap: 14px; align-items:center; padding: 15px 2px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rk-news__row:first-child { border-top: 1px solid var(--line); }
.rk-news__date { font-family: ui-monospace, monospace; font-size: 13px; color: var(--ink-2); font-weight:600; }
.rk-news__cat { font-size: 11px; font-weight:700; color: var(--teal-700); border:1px solid var(--teal); border-radius:999px; padding: 2px 11px; }
.rk-news__title { font-size: 14.5px; flex: 1 1 100%; }

/* =============================== FAQ =================================== */
.rk-faq { display:grid; gap: 12px; }
.rk-faq__item { border: 1px solid var(--line); border-radius: var(--r); background: var(--card); overflow: hidden; }
.rk-faq__q { display:flex; gap: 13px; align-items:center; padding: 17px 18px; cursor:pointer; font-weight:700; font-size: 15px; }
.rk-faq__q .qm { width: 26px; height: 26px; border-radius: 7px; background: var(--navy); color:#fff; display:grid; place-items:center; font-weight:800; flex:none; font-size: 14px; }
.rk-faq__q .pm { margin-left:auto; width: 22px; height: 22px; position:relative; flex:none; }
.rk-faq__q .pm::before, .rk-faq__q .pm::after { content:""; position:absolute; background: var(--teal); border-radius:2px; transition: transform .25s; }
.rk-faq__q .pm::before { top:50%; left:2px; right:2px; height:2px; transform: translateY(-50%); }
.rk-faq__q .pm::after  { left:50%; top:2px; bottom:2px; width:2px; transform: translateX(-50%); }
.rk-faq__item.is-open .pm::after { transform: translateX(-50%) scaleY(0); }
.rk-faq__a { max-height: 0; overflow:hidden; transition: max-height .3s ease; }
.rk-faq__a-in { padding: 0 18px 18px 57px; color: var(--ink-2); font-size: 14px; }

/* =============================== closing CTA ============================ */
.rk-closing { background: var(--navy); color:#fff; position:relative; overflow:hidden; }
.rk-closing::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 80% 0%, rgba(31,122,109,.35), transparent 60%); pointer-events:none; }
.rk-closing .rk-container { position: relative; z-index:1; }
.rk-closing h2 { font-size: clamp(24px, 6cqi, 38px); color:#fff; line-height:1.4; }
.rk-closing p { color: rgba(255,255,255,.85); margin-top: 16px; max-width: 40em; }
.rk-closing__cta { margin-top: 26px; max-width: 460px; }

/* =============================== footer ================================= */
.rk-footer { background: var(--navy-deep); color: var(--on-navy-2); padding-block: 44px 30px; font-size: 13.5px; }
.rk-footer__grid { display:grid; gap: 26px; grid-template-columns: 1fr; }
.rk-footer h4 { color:#fff; font-size: 14px; margin-bottom: 12px; letter-spacing:.04em; }
.rk-footer a:hover { color:#fff; }
.rk-footer__links { display:grid; gap: 9px; }
.rk-footer .corp b { color:#fff; font-size: 16px; letter-spacing:.04em; }
.rk-footer .corp p { margin-top: 10px; line-height: 1.9; }
.rk-footer__bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap: 12px; flex-wrap:wrap; font-size: 12px; }

/* =========================== sticky mobile CTA ========================== */
.rk-sticky {
  position: sticky; bottom: 0; z-index: 35;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px;
  box-shadow: 0 -6px 20px rgba(20,36,59,.08);
}
.rk-sticky .rk-btn { min-height: 50px; font-size: 13px; padding: 6px 8px; border-radius: 13px; }
.rk-sticky .rk-btn--tel small { font-size: 9.5px; }

/* ============================ logo / header ============================= */
.rk-logo { display: flex; align-items: center; }
.rk-logo__img { height: 40px; width: auto; display: block; }

/* ========================= reform services ============================== */
.rk-rsv { display: grid; gap: 14px; grid-template-columns: 1fr; }
.rk-rsv__card { padding: 22px 20px 24px; text-align: left; }
.rk-rsv__ic { width: 52px; height: 52px; border-radius: 14px; background: rgba(31,122,109,.1); color: var(--teal-700); display: grid; place-items: center; margin-inline: auto; }
.rk-rsv__ic svg { width: 28px; height: 28px; }
.rk-rsv__card h3 { font-size: 18px; margin-top: 16px; }
.rk-rsv__card p { color: var(--ink-2); font-size: 13.5px; margin-top: 9px; }
.rk-rsv__strength { margin-top: 22px; display: flex; gap: 18px; align-items: center; background: var(--navy); color: #fff; border-radius: var(--r-lg); padding: 24px 24px; }
.rk-rsv__badge { width: 56px; height: 56px; border-radius: 50%; background: var(--green); display: grid; place-items: center; flex: none; }
.rk-rsv__strength h3 { font-size: 20px; color: #fff; }
.rk-rsv__strength p { color: rgba(255,255,255,.85); font-size: 14px; margin-top: 8px; }

/* ============================= Sun on Tow =============================== */
.rk-cafe { background: linear-gradient(180deg, #faf8f3, #f2ede3); border-block: 1px solid var(--line); }
.rk-cafe__in { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: center; }
.rk-cafe__logo { width: 150px; height: auto; margin: 16px 0 4px; display: block; }
.rk-cafe h2 { font-size: clamp(24px, 5.6cqi, 34px); line-height: 1.4; }
.rk-cafe__lead { color: var(--ink-2); margin-top: 14px; font-size: 15px; }
.rk-cafe__note { margin-top: 14px; font-size: 14px; color: var(--teal-700); font-weight: 700; border-left: 3px solid var(--gold); padding-left: 12px; }
.rk-cafe__meta { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--ink-2); }
.rk-cafe__gallery { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 10px; }
.rk-cafe__big { grid-column: 1 / -1; aspect-ratio: 16/10; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-2); }
.rk-cafe__small { aspect-ratio: 4/3; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); }
.rk-cafe__gallery img { width: 100%; height: 100%; object-fit: cover; }

@container site (min-width: 720px) {
  .rk-rsv { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .rk-rsv__strength { padding: 28px 32px; }
  .rk-cafe__in { grid-template-columns: 1fr 1.05fr; gap: 48px; }
  .rk-cafe__logo { width: 180px; }
}

/* =================== centered card content (per request) ============== */
.rk-price { text-align: center; }
.rk-price__fee { justify-content: center; }
.rk-value { text-align: center; }
.rk-value__top { justify-content: center; }
.rk-rsv__card { text-align: center; }
.rk-biz__body { text-align: center; }
.rk-biz__more { justify-content: center; }

/* ======================================================================
   CONTAINER QUERIES — desktop layout kicks in by FRAME width
   ====================================================================== */
@container site (min-width: 720px) {
  .rk-section { padding-block: 84px; }
  .rk-section--tight { padding-block: 60px; }
  .rk-cta-group { grid-template-columns: auto auto auto; justify-content: start; }
  .rk-hero__cta .rk-cta-group { grid-template-columns: auto auto auto; }

  .rk-nav { display: flex; }
  .rk-header__cta { display: flex; align-items:center; }
  .rk-burger { display: none; }

  .rk-hero__in { padding-block: 118px 104px; }

  .rk-biz { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .rk-worry-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .rk-values { grid-template-columns: repeat(4, 1fr); }
  .rk-price-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .rk-reasons { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rk-cases { grid-template-columns: repeat(2, 1fr); gap: 30px 28px; max-width: 880px; }
  .rk-cases--single { grid-template-columns: 1fr; max-width: 400px; }
  .rk-news__title { flex: 1; }

  /* horizontal timeline on desktop */
  .rk-flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .rk-step { grid-template-columns: 1fr; grid-template-rows: 56px auto; gap: 14px; padding-bottom: 0; padding-right: 14px; }
  .rk-step__rail { flex-direction: row; width: 100%; }
  .rk-step__line { width: auto; height: 2px; margin-top: 0; margin-left: 8px; align-self: center; }
  .rk-step:last-child .rk-step__line { display:none; }

  /* sticky bar only matters on small frames — hide when wide */
  .rk-sticky { display: none; }

  .rk-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}

@container site (min-width: 980px) {
  .rk-container { padding-inline: 32px; }
  .rk-head h2 { letter-spacing: .03em; }
}

/* ============================== trust bar =============================== */
.rk-trustbar { border-block: 1px solid var(--line); background: var(--card); }
.rk-trustbar[data-on="navy"] { background: var(--navy-deep); border-color: rgba(255,255,255,.1); }
.rk-trustbar__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; }
.rk-trust { padding: 22px 14px; text-align: center; position: relative; }
.rk-trust + .rk-trust::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); }
.rk-trust:nth-child(3)::before { display: none; }
.rk-trust__ic { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(31,122,109,.1); color: var(--teal-700); margin-bottom: 10px; }
.rk-trust__ic svg { width: 24px; height: 24px; }
.rk-trust b { display: block; font-size: clamp(19px, 4.8cqi, 25px); color: var(--navy); letter-spacing: .01em; line-height: 1.3; }
.rk-trust__lb { font-size: 11.5px; color: var(--ink-2); display: block; margin-top: 5px; }
.rk-trustbar[data-on="navy"] .rk-trust b { color: #fff; }
.rk-trustbar[data-on="navy"] .rk-trust .rk-trust__lb { color: var(--on-navy-2); }
.rk-trustbar[data-on="navy"] .rk-trust__ic { background: rgba(255,255,255,.1); color: var(--gold); }
.rk-trustbar[data-on="navy"] .rk-trust + .rk-trust::before { background: rgba(255,255,255,.12); }

/* ========================= hero variants ========================= */
/* B: editorial — oversized headline, side rail, minimal scrim */
[data-dir="b"] .rk-hero__in { padding-block: 90px 70px; }
[data-dir="b"] .rk-hero h1 { font-size: clamp(38px, 12cqi, 96px); line-height: 1.12; letter-spacing: .04em; }
[data-dir="b"] .rk-hero__lead { font-size: 16px; }
[data-dir="b"] .rk-hero__vbadge { position: absolute; right: 22px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; color: rgba(255,255,255,.6); letter-spacing: .4em; font-size: 11px; font-weight: 700; }

/* C: split hero — copy panel beside media, info-dense */
[data-dir="c"] .rk-hero { background: var(--navy); }
[data-dir="c"] .rk-hero h1 { font-size: clamp(28px, 8cqi, 52px); }
[data-dir="c"] .rk-hero__in { padding-block: 40px 0; }
[data-dir="c"] .rk-hero__split { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
[data-dir="c"] .rk-hero__copy { padding-block: 8px 36px; }
[data-dir="c"] .rk-hero__shot { position: relative; min-height: 240px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; }
[data-dir="c"] .rk-hero__shot image-slot, [data-dir="c"] .rk-hero__shot .rk-ph { width: 100%; height: 100%; border-radius: 0; }
[data-dir="c"] .rk-hero__media, [data-dir="c"] .rk-hero__scrim { display: none; }

@container site (min-width: 720px) {
  .rk-trustbar__in { grid-template-columns: repeat(4, 1fr); }
  .rk-trust { padding: 30px 18px; }
  .rk-trust:nth-child(3)::before { display: block; }
  [data-dir="c"] .rk-hero__split { grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; }
  [data-dir="c"] .rk-hero__shot { min-height: 420px; margin-bottom: 0; aspect-ratio: auto; align-self: stretch; }
  [data-dir="c"] .rk-hero__in { padding-block: 56px 0; }
}

/* ======================================================================
   DIRECTION THEMES
   A = 王道で信頼感 / B = 写真主役で大胆 / C = 情報設計重視LP的
   ====================================================================== */

/* ---- B: photo-led, bold ---- */
[data-dir="b"] .rk-head h2 { font-size: clamp(26px, 6.6cqi, 40px); }
[data-dir="b"] .rk-section { padding-block: 64px; }
@container site (min-width: 720px) { [data-dir="b"] .rk-section { padding-block: 100px; } }
[data-dir="b"] .rk-biz__media { aspect-ratio: 3/4; }
[data-dir="b"] .rk-card { border-radius: var(--r-xl); }
[data-dir="b"] .rk-eyebrow { letter-spacing:.22em; }

/* ---- C: dense LP, conversion ---- */
[data-dir="c"] { --r-lg: 12px; --r-xl: 14px; }
[data-dir="c"] .rk-section { padding-block: 46px; }
@container site (min-width: 720px) { [data-dir="c"] .rk-section { padding-block: 66px; } }
[data-dir="c"] .rk-head { margin-bottom: 22px; }
[data-dir="c"] .rk-card { border-radius: 12px; }


/* =====================================================================
   WordPress 用上書き：image-slot を <img> に置き換えた箇所の表示調整
   ===================================================================== */
.rk-site .rk-hero__media img { width:100%; height:100%; object-fit:cover; display:block; }
.rk-site .rk-biz__media img  { width:100%; height:100%; object-fit:cover; display:block; }
.rk-site .rk-ba__layer img   { width:100%; height:100%; object-fit:cover; display:block; }

/* ヘッダーは固定。本体先頭に余白は不要（sticky のため） */
.rk-site { min-height: 100vh; }

/* モバイル用ドロワーナビ */
.rk-mnav { display: none; background:#fff; border-bottom:1px solid var(--line); }
.rk-mnav.is-open { display: block; }
.rk-mnav a { display:block; padding:14px 20px; border-top:1px solid var(--line-soft); font-weight:600; font-size:15px; color:var(--ink); }
.rk-mnav a:first-child { border-top:0; }
.rk-mnav a:hover { background: var(--bg-warm); color: var(--teal-700); }
@container site (min-width: 720px) { .rk-mnav { display: none !important; } }

/* FAQ：JS で開閉（max-height をクラスで制御） */
.rk-faq__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.rk-faq__item.is-open .rk-faq__a { max-height: 300px; }

/* 追従バーは常に下部固定（小画面のみ表示は既存ルール） */
.rk-sticky { position: fixed; left:0; right:0; bottom:0; }
@container site (min-width: 720px) { .rk-sticky { display: none; } }
body { padding-bottom: 0; }


/* アイコン既定サイズ（PHPの rk_icon 出力用） */
.rk-site svg.ic { width: 19px; height: 19px; flex: none; }
.rk-site .ic-inline { width: 16px; height: 16px; display: inline-block; vertical-align: -3px; margin-right: 5px; }
.rk-site .rk-biz__more .ar { width: 16px; height: 16px; }
.rk-site .rk-eyebrow svg { width: 18px; height: 18px; }
.rk-site .rk-reason h3 .rk-check { width: 18px; height: 18px; }
.rk-site .rk-rsv__strength .rk-check { width: 26px; height: 26px; color:#fff; }


/* 料金「残り3つ」トグル（JS制御：非表示→グリッド表示） */
.rk-price-more-grid { display: none; margin-top: 18px; }
.rk-price-more-grid.is-open { display: grid; }
.rk-cafe__ig .ic { width: 19px; height: 19px; }