/*
Theme Name: BAEKABE
Theme URI: https://baekabe.jp
Author: BAEKABE
Description: BAEKABE（バエカベ）法人向け内装サービスのオリジナルテーマ。site/プロトタイプのデザインを移植。
Version: 1.0.0
Text Domain: baekabe
*/

/* BAEKABE — 共通スタイル（design-v2：実素材パッケージのデザイントークンに準拠）
   ブランド値：Near-black Brown #2E1B0C／Cyber Lime #B7FF00／白 #FFFFFF（design-v2で黒→茶に変更）
   白基調70-80% / Black 15-25% / Lime 5%以下（business-spec 5.4 の比率規律を維持、色相のみ差し替え） */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Roboto:wght@900&family=Inter:wght@900&family=Lato:wght@900&family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');

:root {
  --navy: #2E1B0C;
  --navy-soft: #4A2F18;
  --teal: #B7FF00;
  --teal-dark: #96D400;
  --white: #FFFFFF;
  --bg-canvas: #FFFFFF;
  --bg-soft: #F8F6F2;
  --border: #E8E1D6;
  --text: #3D2B1C;
  --text-muted: #746657;

  --font-en: 'Montserrat', 'Noto Sans JP', sans-serif;
  --font-jp: 'Noto Sans JP', 'Montserrat', sans-serif;

  --container: 1140px;
  --radius: 10px;

  --cat-wall: #8EDD16;
  --cat-storage: #FF9F0A;
  --cat-reception: #FF4F87;
  --cat-partition: #37C7CF;
  --cat-photo: #8B5CF6;
  --cat-equipment: #3B82F6;
  --cat-other: #F2B21A;
  --wood-1: #B98255;
  --wood-2: #8C5A34;
  --wood-3: #6B4423;
  --stone-1: #C9C6BE;
  --stone-2: #A9A59C;
  --stone-3: #86816F;
  --bg-warm: #F5F1E7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#categories, #ideas, #cases, #hints, #process, #price, #faq { scroll-margin-top: 100px; }
/* ヒント特集の目次リンク先（本文中の見出しに自動で振ったアンカー）。
   見出しはh2で書かれることもあるので両方を対象にする。 */
.hint-body h2[id],
.hint-body h3[id] { scroll-margin-top: 100px; }

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--text);
  background: var(--bg-canvas);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;

  /* 中身が短いページでフッターを画面の底に着ける。
     404やお問い合わせの完了画面は本文が250px程度しかなく、フッター（デスクトップで341px）を
     足しても画面の高さに届かない。その下に body の白い背景が見え、navyのフッターとの
     境目がはっきり出るため「途中で終わった」ように見えていた。
     実測：1280×900で226px、1920×1080で406px（画面の38%）が白紙。
     スマホはフッターが縦積みで531pxまで伸びるため、もともと余白は出ていない。 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* body をflexにしただけでは足りない。中身が短いときに伸びる要素を決める必要がある。
   flex-shrink を0にしているのは、中身が長いページで main が縮められないようにするため。 */
main {
  flex: 1 0 auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-en);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 0 .6em;
  letter-spacing: 0;
}

h1 { font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 1em; color: var(--text); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

section { padding: 40px 0; }
section.tight { padding: 28px 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--teal-dark);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.section-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
  text-wrap: balance;
  /* 日本語を文節単位で折り返す。無いと「パネルを／活用」のように語の途中で割れる。
     対応はChrome/Edgeのみで、Safari・Firefoxでは無視されて従来の折り返しになる。 */
  word-break: auto-phrase;
}
/* 記事タイトルはセクション見出しより1段小さくする。
   読み幅820pxに対し34pxだと24文字で折り返すが、30pxなら27文字まで1行に収まり、
   「パネルを／活用」のような不自然な位置での改行がそもそも起きにくくなる。 */
.article-title {
  font-size: 30px;
  /* text-wrap: balance は行の長さを揃えるため、2行になると必ず半分ずつになる。
     820pxの箱に対して各行54〜69%しか使わず、幅が余っているのに折り返したように見えていた。
     素直に上の行から詰めることで、1行目が9割方埋まり「入りきらなかった」と読み取れる。
     どこで折るかはBudouX（main.js）が文節単位で決めるので、語の途中では割れない。
     セクション見出し（.section-title）は短文が多いので balance のまま。
     スマホでは逆に balance が要る（下の@media参照）。 */
  text-wrap: wrap;
}
@media (max-width: 560px) {
  .section-title { font-size: 26px; }
  /* スマホの読み幅は327px前後しかなく、26pxだと12文字で折り返してしまう。
     記事タイトルは14〜20文字が多いため、ほとんどが2行に割れていた。
     22pxなら15文字弱まで1行に収まり、折り返し自体が起きにくくなる。
     （iPhone Safariは word-break: auto-phrase に対応しないため、
      折り返しが起きた場合は語の途中で割れる。回数を減らすのが現実的な対処） */
  .article-title {
    font-size: 22px;
    /* スマホでは balance を戻す。箱が327pxしかないため balance でも行はほぼ埋まり、
       外すと逆に「演出」だけが最終行に残るような孤立行が9本出る（全54本で実測）。
       行数は balance の有無で変わらない。 */
    text-wrap: balance;
  }
}

.section-lead {
  color: var(--text-muted);
  font-size: 17px;
  max-width: 640px;
}
/* 記事ページの本文は、読み幅820pxの箱いっぱいまで使う。
   640pxはトップページのリード文（見出しの下に添える短い一文）向けの幅で、
   記事本文に効くと、見出し・表・キャプションが820pxなのに本文だけ640pxとなり、
   本文が引っ込んで見えてしまう。 */
.single-idea .section-lead,
.single-case .section-lead,
.single-hint .section-lead { max-width: none; }

/* ===== Header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.logo {
  font-family: var(--font-en);
  font-size: 22px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  white-space: nowrap;
}
.logo-img {
  height: 38px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a.menu-cta {
  display: none;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--teal);
  color: var(--navy);
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 4px 14px rgba(183,255,0,.35);
}
.nav-links a.menu-cta:hover { background: var(--teal-dark); color: var(--navy); }
.nav-links a.menu-cta::after { display: none; }

/* .nav-row はスマホのドロワーで行を左右に割るための入れ物。
   デスクトップでは中の「〇〇一覧」を隠すので、入れ物の中はアンカーのリンク1つだけになり、
   従来どおり横一列に並ぶ。ここを display:contents にはしない——Safariの一部バージョンで
   読み上げの対象から外れる不具合があるため、素直にflexの箱として置く。 */
.nav-row { display: flex; align-items: center; }
.nav-more { display: none; }
.nav-links a {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--navy);
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--teal-dark);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a:hover { color: var(--teal-dark); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--navy); font-weight: 700; }
.nav-links a.active::after { background: var(--navy); transform: scaleX(1); }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--navy);
  margin: 5px 0;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 4px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: var(--teal);
  color: var(--navy);
  box-shadow: none;
}
.btn-primary:hover { background: var(--teal-dark); }

.btn-outline {
  background: var(--white);
  border-color: var(--border);
  color: var(--navy);
}
.btn-outline:hover { border-color: var(--navy); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(255,255,255,.5);
  color: var(--white);
}
.btn-outline-light:hover { background: var(--white); color: var(--navy); }

.btn-sm { padding: 10px 20px; font-size: 14px; }
.btn-outline.btn-sm { white-space: normal; text-align: center; }

.nav-cta .btn-primary.btn-sm,
.footer-cta {
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(183,255,0,.35);
  padding: 12px 26px;
  font-size: 15px;
}

/* ===== Hero（design-v2b：写真分割＋価格訴求） ===== */
.hero-photo { padding: 44px 0 28px; background: var(--white); }
.hero-photo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-photo-copy h1 {
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.hero-photo-copy .price-line {
  font-family: 'Roboto', 'Inter', 'Lato', sans-serif;
  font-size: clamp(72px, 8vw, 120px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 0.95;
  margin: 0 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.025' numOctaves='4' seed='7' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0.15  0 0 0 0 0.25  0 0 0 0 0  0 0 0 1.4 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='%23B7FF00'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-photo-copy .price-line .unit {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: .32em;
  font-weight: 800;
  background-image: inherit;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-photo-copy .sub {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  text-align: right;
  margin: 0 0 28px;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 28px;
}
.hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-left: 1px solid var(--border);
}
.hero-stat:first-child { padding-left: 0; border-left: none; }
.icon-well {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hero-stat .icon-well { color: var(--teal-dark); }
.hero-stat .icon-well img { width: 42px; height: 42px; object-fit: contain; }
.hero-stat span { font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--text-muted); line-height: 1.5; }
.hl { color: var(--teal-dark); }
.hero-photo-visual { position: relative; }
.hero-photo-img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  box-shadow: 0 20px 40px -12px rgba(2,24,60,.28);
}
.hero-catchcopy-overlay {
  position: absolute;
  left: -6%;
  bottom: -6%;
  width: 62%;
  height: auto;
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 900px) {
  .hero-photo-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo-visual { order: -1; }
  .hero-catchcopy-overlay { left: -20px; bottom: -10%; width: 72%; }
}
@media (max-width: 500px) {
  .hero-photo { padding: 32px 0 20px; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hero-stat { flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 4px; padding-left: 4px; border-left: none; }
  .hero-stat .icon-well img { width: 38px; height: 38px; }
  .hero-stat span { font-size: 10.5px; }
}

/* ===== やりたいことから探す：カテゴリピッカー ===== */
.section-kicker {
  text-align: center;
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  margin-bottom: 28px;
}
.flourish {
  display: inline-block;
  width: 27px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 7px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 14px;
}
.cat-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 22px 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(2,24,60,.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cat-tile .icon-well { color: var(--navy); }
.cat-tile span:last-child {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.4;
  padding-bottom: 6px;
  border-bottom: 3px solid var(--cat-color);
}
.cat-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(2,24,60,.12);
}
.cat-tile img { width: 60px; height: 60px; object-fit: contain; }
.cat-wall { --cat-color: var(--cat-wall); }
.cat-storage { --cat-color: var(--cat-storage); }
.cat-reception { --cat-color: var(--cat-reception); }
.cat-partition { --cat-color: var(--cat-partition); }
.cat-photo { --cat-color: var(--cat-photo); }
.cat-equipment { --cat-color: var(--cat-equipment); }
.cat-other { --cat-color: var(--cat-other); }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } .cat-tile { padding: 16px 8px; } }

/* ===== Before/After ストリップ ===== */
.ba-strip { background: var(--navy); padding: 56px 0; }
.ba-strip-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  margin: 0 0 10px;
}
.ba-spark { width: 34px; height: 34px; flex-shrink: 0; }
.ba-strip-sub { color: rgba(255,255,255,.68); font-size: 14px; margin: 0 0 32px; }
.ba-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.ba-pair-photo {
  position: relative;
  display: flex;
  aspect-ratio: 3/2;
  border-radius: 10px;
  overflow: hidden;
}
.ba-pair-photo img.half {
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-badge {
  position: absolute;
  top: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.ba-badge-before { left: 12px; background: rgba(255,255,255,.92); color: var(--navy); }
.ba-badge-after { left: 51%; background: var(--teal); color: var(--navy); }
.ba-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}
.ba-pair-info { display: flex; gap: 12px; padding-top: 18px; }
.ba-pair-title { color: #fff; font-size: 14.5px; font-weight: 800; margin: 0 0 6px; }
.ba-pair-desc { color: rgba(255,255,255,.62); font-size: 12.5px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .ba-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== 選ばれる理由 ===== */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.why-item .icon-well { color: var(--teal-dark); }
.why-item .icon-well img { width: 52px; height: 52px; object-fit: contain; }
.why-item h3 { font-size: 15px; color: var(--navy); margin: 0; letter-spacing: -.01em; }
.why-item p { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.6; text-align: left; }
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Cards / grids ===== */
.grid {
  display: grid;
  gap: 16px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid-6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .grid-6 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 28px;
}
.card h3 { color: var(--navy); font-size: 19px; }
.card .num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 10px;
  letter-spacing: .06em;
}

/* ===== Price box（design-v2：1つの枠を縦罫線で3分割して料金の目安を見せる） ===== */
.price-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 1px 3px rgba(2,24,60,.05);
  padding: 34px 0;
}
.price-col { padding: 0 28px; border-left: 1px solid var(--border); }
.price-col:first-child { border-left: none; }
.price-col-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.price-col-icon { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; }
.price-col-label { font-size: 14.5px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.price-col-value {
  font-family: var(--font-en);
  font-size: 42px;
  font-weight: 800;
  color: var(--teal-dark);
  line-height: 1;
  margin: 0 0 16px;
}
.price-col-value .unit-jp {
  font-family: var(--font-jp);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-left: 4px;
}
.price-col-value.is-consult { font-size: 16px; font-weight: 800; color: var(--navy); }
.price-col-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding-top: 14px;
  border-top: 1.5px dotted var(--teal-dark);
}
@media (max-width: 760px) {
  .price-box { grid-template-columns: 1fr; padding: 6px 0; }
  .price-col { border-left: none; border-top: 1px dashed var(--border); padding: 22px 20px; }
  .price-col:first-child { border-top: none; }
}

/* 注意書きのバー。トップページの料金の下（.price-note-bar）で使っていたものを、
   お問い合わせの個人情報の但し書きでも使えるよう .note-bar として一般化した。
   見た目は共通なので、既存のクラス名はそのまま残して両方に同じ指定を当てる。 */
.note-bar,
.price-note-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(8,11,13,.05);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.6;
}
.info-dot {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  font-style: italic;
}

@media (max-width: 900px) {
  .menu-card.featured { grid-column: span 2; }
}
@media (max-width: 560px) {
  .menu-card.featured { grid-column: span 2; }
  .menu-card.featured .thumb { aspect-ratio: 16/10; }
}

/* ===== 目次（特集記事用） ===== */
.toc {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.toc h3 { font-size: 14px; margin-bottom: 14px; }
.toc ol { list-style: decimal; padding-left: 1.2em; margin: 0; }
.toc li { margin-bottom: 10px; font-size: 14px; }
.toc li:last-child { margin-bottom: 0; }
.toc a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.toc a:hover { color: var(--teal-dark); }

/* ===== 記事詳細ページ：写真ヒーロー（他セクションと同じcontainer幅に統一） ===== */
.idea-hero {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  height: min(56vw, 520px);
  min-height: 280px;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-soft), var(--border));
  background-size: cover;
  /* 未指定だと初期値の左上基準になり、枠に収まらない分が右（スマホ）や下（PC）から
     一方的に切り落とされる。中央基準にして、はみ出しを両側へ均等に振る。 */
  background-position: center;
}
/* スマホでは min-height: 280px が効いて枠がほぼ正方形（1.17:1）になり、
   横長の写真（多くは1.5〜1.8:1）を敷くと左右が3割ほど切れてしまう。
   枠を写真と同じ横長にすることで、切り落としをほぼゼロにする。
   引き換えにヒーローの高さは低くなる。 */
@media (max-width: 560px) {
  .idea-hero {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }
}
.idea-hero.is-placeholder { height: 240px; min-height: 200px; }
.idea-hero .badge {
  position: absolute;
  top: 16px; left: 16px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--text);
  color: var(--text);
}

/* ===== Placeholder visual tiles (施工イメージ用のプレースホルダー) ===== */
.tile {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 0;
  overflow: hidden;
  background: url('https://images.unsplash.com/photo-1772475385509-93fd87a2d4ba?w=900&h=650&fit=crop&q=75&auto=format') center/cover no-repeat;
}
.tile.v2 { background-image: url('https://images.unsplash.com/photo-1766802981801-4b4a9a1d8f1c?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile.v3 { background-image: url('https://images.unsplash.com/photo-1765371515218-0a4c992ba8e2?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile.v4 { background-image: url('https://images.unsplash.com/photo-1784012980517-005c26585344?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile.v5 { background-image: url('https://images.unsplash.com/photo-1758448093806-88b2089068ab?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile.v6 { background-image: url('https://images.unsplash.com/photo-1765728617442-4f7e5e7078aa?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile.v7 { background-image: url('https://images.unsplash.com/photo-1733764682545-40c0c659cd29?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile .badge {
  position: absolute;
  top: 10px; left: 10px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 14px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--text);
  color: var(--text);
  letter-spacing: .02em;
}
.tile .cap {
  position: absolute;
  left: 12px; bottom: 12px; right: 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}

/* ===== 施工実例カード用 Before/After 分割サムネイル（施工アイデアの単一画像と区別するため） ===== */
.tile-split {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 0;
  overflow: hidden;
  display: flex;
}
.tile-split .half {
  position: relative;
  flex: 1 1 50%;
  background: url('https://images.unsplash.com/photo-1772475385509-93fd87a2d4ba?w=900&h=650&fit=crop&q=75&auto=format') center/cover no-repeat;
}
.tile-split .half.v2 { background-image: url('https://images.unsplash.com/photo-1766802981801-4b4a9a1d8f1c?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half.v3 { background-image: url('https://images.unsplash.com/photo-1765371515218-0a4c992ba8e2?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half.v4 { background-image: url('https://images.unsplash.com/photo-1784012980517-005c26585344?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half.v5 { background-image: url('https://images.unsplash.com/photo-1758448093806-88b2089068ab?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half.v6 { background-image: url('https://images.unsplash.com/photo-1765728617442-4f7e5e7078aa?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half.v7 { background-image: url('https://images.unsplash.com/photo-1733764682545-40c0c659cd29?w=900&h=650&fit=crop&q=75&auto=format'); }
.tile-split .half .badge {
  position: absolute;
  top: 12px; left: 12px;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
}
.tile-split .half .badge-before { background: rgba(255,255,255,.92); color: var(--navy); }
.tile-split .half .badge-after { background: var(--teal); color: var(--navy); }
.works-card.featured .tile-split { aspect-ratio: 16/9; }

.theme-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  /* 文字は濃茶。分類色は明るいものが多く、白抜きだと読めない。
     10.5pxの太字に必要なコントラスト比4.5:1に対して実測（白抜き／濃茶）：
       壁 1.68／9.78、収納 2.06／7.99、受付 3.12／5.26、目隠し 2.05／8.01、
       撮影 4.23／3.88、配線 3.68／4.47、その他 1.88／8.73
     白抜きは7分類中5つが3:1未満で、一覧の件数ピルと同じ問題だった。
     ⚠️ 施工テーマの「カラー」欄（ACF）で暗い色に変えると、今度は濃茶の文字が
     読みにくくなる。現行の7色はいずれも明るいことを前提にしている。 */
  color: var(--navy);
  background: var(--pill-color);
}
.tile .theme-pill { position: absolute; top: 10px; left: 10px; z-index: 1; }
.case-tile { display: flex; flex-direction: column; }
.case-tile > .theme-pill { align-self: flex-start; margin-bottom: 8px; }
.works-card-info .theme-pill { align-self: flex-start; margin-bottom: 2px; }
.theme-pill-wall { --pill-color: var(--cat-wall); }
.theme-pill-storage { --pill-color: var(--cat-storage); }
.theme-pill-reception { --pill-color: var(--cat-reception); }
.theme-pill-partition { --pill-color: var(--cat-partition); }
.theme-pill-photo { --pill-color: var(--cat-photo); }
.theme-pill-equipment { --pill-color: var(--cat-equipment); }
.theme-pill-other { --pill-color: var(--cat-other); }

.works-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(2,24,60,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.works-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(2,24,60,.13);
}
.works-card .works-card-info { padding: 12px 14px 14px; }
.price-row-mini { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.price-row-mini .price { font-size: 13px; font-weight: 800; color: var(--navy); margin: 0; }
.price-row-mini .dur { font-size: 10.5px; color: var(--text-muted); }

.works-card { position: relative; display: flex; flex-direction: column; gap: 8px; }
.works-card .meta { font-size: 13px; color: var(--text-muted); }
.works-card .meta .theme { color: var(--text-muted); font-weight: 500; }
.works-card-info { display: flex; flex-direction: column; gap: 2px; }
.works-card .kind { display: flex; gap: 6px; margin: 0 0 4px; }
.works-card .kind span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--text);
  border-radius: 999px;
  padding: 2px 10px;
  letter-spacing: .02em;
}
.works-card .kind span.hi { border-color: #E5001A; background: #E5001A; color: #fff; }
.works-card.featured { grid-column: 1 / -1; gap: 0; position: relative; }
.works-card.featured .tile { aspect-ratio: 16/9; }
.works-card.featured .works-card-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 32px 36px;
  background: linear-gradient(to top, rgba(2,10,26,.94) 0%, rgba(2,10,26,.75) 40%, rgba(2,10,26,.32) 70%, transparent 100%);
}
.works-card.featured .kind span { background: rgba(255,255,255,.95); }
.works-card.featured .kind span.hi { background: #E5001A; color: #fff; border-color: #E5001A; }
.works-card.featured .theme { color: rgba(255,255,255,.75); }
.works-card.featured .name { color: #fff; font-size: 22px; }
.works-card.featured .price { color: rgba(255,255,255,.92); }
.works-card.featured .catch { color: #fff; }
.works-card .theme { font-size: 11.5px; color: var(--text-muted); margin: 0; }
.works-card .name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  word-break: auto-phrase; /* カードは2行で切り詰めるため、折り返し位置が読みやすさに直結する */
}
.works-card .price { font-size: 13px; font-weight: 800; color: #E5001A; margin: 2px 0 0; }
.works-card .catch {
  font-family: var(--font-jp);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* ===== カード共通バッジ：特集ピック（タイトル文中にインライン表示。行を増やさずカードの高さを揃える） ===== */
.name .pick-badge,
.section-lead .pick-badge {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #E5001A;
  color: #fff;
  vertical-align: 1px;
  margin-right: 5px;
}

/* ===== Sections with navy backgrounds ===== */
.section-navy {
  background: var(--navy);
  color: #fff;
}
.section-navy h2, .section-navy .section-title { color: #fff; }
.section-navy p { color: rgba(255,255,255,.82); }
.section-navy .section-lead { color: rgba(255,255,255,.72); }

/* ===== Process grid（design-v2：STEPカードをアイコン付きで並べる） ===== */
.process-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: 0;
}
.process-card { text-align: center; padding: 0 12px; }
.process-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  background: var(--navy);
  border-radius: 14px;
  margin-bottom: 20px;
}
.process-badge, .process-badge b { font-family: var(--font-en); }
.process-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--teal); }
.process-badge b { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; margin-top: 3px; }
.process-icon { display: block; width: 124px; height: 124px; margin: 0 auto 18px; object-fit: contain; }
.process-title {
  position: relative;
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 14px;
  padding-bottom: 12px;
}
.process-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  transform: translateX(-50%);
  border-top: 1.5px dotted var(--teal-dark);
}
.process-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; text-align: left; }
.process-arrow { color: var(--navy); font-size: 26px; font-weight: 600; padding: 0 2px; margin-top: 143px; }
@media (max-width: 900px) {
  .process-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .process-arrow { display: none; }
}

/* ===== FAQ（design-v2：カード＋Q/＋アイコン） ===== */
.faq-list { display: flex; flex-direction: column; gap: 16px; }
.faq-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(2,24,60,.06);
}
.faq-q-row { display: flex; align-items: center; gap: 16px; padding: 22px 24px; cursor: pointer; }
.faq-q-badge { flex-shrink: 0; width: 44px; height: 44px; }
.faq-q-badge img { width: 100%; height: 100%; object-fit: contain; }
.faq-q-row h3 { flex: 1; font-size: 17px; font-weight: 800; color: var(--navy); margin: 0; }
.faq-plus { flex-shrink: 0; width: 20px; height: 20px; transition: transform .2s ease; }
.faq-plus img { width: 100%; height: 100%; object-fit: contain; }
.faq-card.open .faq-plus { transform: rotate(45deg); }
.faq-a-row {
  background: var(--bg-soft);
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  transition: max-height .25s ease, padding .25s ease;
}
.faq-card.open .faq-a-row { max-height: 300px; padding: 18px 24px 22px 84px; }
.faq-a-row p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 560px) {
  .faq-q-row { padding: 18px; gap: 12px; }
  .faq-q-row h3 { font-size: 15px; }
  .faq-card.open .faq-a-row { padding: 16px 18px 20px 18px; }
}

/* ===== 絞り込み（Ideas/Cases一覧）：やりたいことから探すと同じcat-tileデザインを流用 ===== */
.filter-bar.cat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(8, 1fr);
  margin-bottom: 36px;
}
@media (max-width: 900px) { .filter-bar.cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .filter-bar.cat-grid { grid-template-columns: repeat(3, 1fr); } }
.filter-btn {
  font-family: inherit;
  cursor: pointer;
}
.filter-btn.active {
  border-color: var(--cat-color, var(--navy));
  box-shadow: 0 0 0 2px var(--cat-color, var(--navy)) inset;
}
.cat-all { --cat-color: var(--navy); }

.theme-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 56px 0 20px;
}
.theme-heading h3 { color: var(--navy); font-size: 20px; margin: 0; }
/* 件数のピルに分類の色を載せる。
   一覧ページではカード1枚ずつのバッジをやめたので、分類の色はここが受け持つ。
   見出しの文字そのものには色を付けない——分類色は彩度が高く、
   「その他」の #F2B21A などは白地に20pxの文字だと読みにくくなるため、
   色は塗りつぶしの小さな面に限る。 */
.theme-heading .count {
  /* 文字は濃茶。分類色は明るいものが多く、白抜きだと読めない。
     12pxの太字に必要なコントラスト比4.5:1に対して実測（白抜き／濃茶）：
       壁 1.68／9.78、収納 2.06／7.99、受付 3.12／5.26、目隠し 2.05／8.01、
       撮影 4.23／3.88、配線 3.68／4.47、その他 1.88／8.73
     白抜きは7分類中5つが3:1未満。濃茶なら5つが4.5:1を満たす。 */
  /* 分類色が設定されていないslugでは、従来どおり濃茶地に白文字へ戻す。
     --cat-text は下の対応表で分類色と一緒に渡している。 */
  color: var(--cat-text, #fff);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--cat-color, var(--navy));
}

/* 分類の色をセクション全体に渡す。data-theme-section は archive-idea.php と
   archive-case.php が出している属性。--cat-* の実際の値は施工テーマの
   「カラー」欄（ACF）から :root に流し込まれる（inc/taxonomies.php）ので、
   管理画面で色を変えればここにも反映される。 */
[data-theme-section="wall"],
[data-theme-section="storage"],
[data-theme-section="reception"],
[data-theme-section="partition"],
[data-theme-section="photo"],
[data-theme-section="equipment"],
[data-theme-section="other"]     { --cat-text: var(--navy); }

[data-theme-section="wall"]      { --cat-color: var(--cat-wall); }
[data-theme-section="storage"]   { --cat-color: var(--cat-storage); }
[data-theme-section="reception"] { --cat-color: var(--cat-reception); }
[data-theme-section="partition"] { --cat-color: var(--cat-partition); }
[data-theme-section="photo"]     { --cat-color: var(--cat-photo); }
[data-theme-section="equipment"] { --cat-color: var(--cat-equipment); }
[data-theme-section="other"]     { --cat-color: var(--cat-other); }


/* ===== Forms ===== */

/* 送信完了画面。以前は小さな見出しと一文だけで、送信できたのかどうかが伝わりにくく、
   そこで行き止まりにもなっていた。チェックマークで完了を示し、控えの送付先を出し、
   戻り先も用意する。 */
.contact-done { text-align: center; padding: 44px 28px; }
.contact-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--navy);
  margin-bottom: 18px;
}
.contact-done-mark svg { width: 28px; height: 28px; display: block; }
.contact-done-title { color: var(--navy); font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.contact-done-lead { color: var(--text); margin: 0 0 18px; }
.contact-done-note {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.9;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.contact-done-note strong { color: var(--text); font-weight: 700; }
.contact-done-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
@media (max-width: 560px) {
  .contact-done { padding: 36px 20px; }
  .contact-done-title { font-size: 21px; }
  .contact-done-actions .btn { width: 100%; }
}

/* お問い合わせページの1列。見出し・リード文・フォームをまとめてここに収める。
   820pxは記事を読むための幅で、フォームには広すぎた。
   全幅だと電話番号の入力欄まで764pxになり、実際に必要な200px弱に対して
   4倍近い空箱が5つ縦に並ぶ状態だった。
   フォームは横に読み進めるものではなく縦に進む作業なので、幅を絞る。 */
.contact-col { max-width: 600px; margin: 0 auto; }

.form-field { margin-bottom: 20px; }
.form-field label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 8px;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-jp);
  font-size: 15px;
  color: var(--text);
  background: var(--bg-soft);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
}
/* 必須マーカー。グレーだと本文に埋もれ、必須項目を目で拾う役に立たない。
   サイトで使っている赤（特集バッジと同じ #E5001A）に揃える。
   5項目中4つに付くため、塗りつぶしのバッジだと赤が強すぎる。薄い下地に赤文字で抑える。 */
.form-field .req {
  display: inline-block;
  color: #E5001A;
  background: rgba(229, 0, 26, .08);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: 1px;
}
.form-note { font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* 任意項目。必須の赤に対して、こちらは目立たせない。 */
.form-field .opt {
  display: inline-block;
  color: var(--text-muted);
  background: rgba(8, 11, 13, .06);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  padding: 1px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: 1px;
}

/* ===== 入力エラーの表示 =====
   以前は赤い小さな文字が欄の下に出るだけで、どこを直せばよいか目で追いにくかった。
   「先頭でまとめて知らせる」「該当欄の枠を赤くする」「文言に印を付ける」の3点で示す。 */
/* ===== 404（ページが見つからない） ===== */
.notfound-col { max-width: 600px; margin: 0 auto; }

/* ボタンだけ中央に置く。テキストは他ページと同じ左揃えのまま。
   hp-change-prompts §7 v13 が禁止しているのはテキストの中央揃えであって、
   ブロックの中央配置は対象外。text-align:center を親に掛けると
   本文まで中央になり、サイトの他の面と揃わなくなる。 */
.notfound-actions { display: flex; justify-content: center; margin-top: 20px; }

@media (max-width: 560px) {
  .notfound-actions .btn { flex: 1; }
}

/* ハニーポット。人には見せず、ボットには「ある」ように見せる欄。
   display:none だと素通りするボットがいるため、画面の外へ出す方法をとる。 */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(229, 0, 26, .06);
  border: 1px solid rgba(229, 0, 26, .25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
}
.form-alert strong { display: block; color: #E5001A; font-size: 14px; margin-bottom: 2px; }
.form-alert span { font-size: 13px; color: var(--text-muted); line-height: 1.7; }
.form-alert-mark,
.form-error-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E5001A;
  color: #fff;
  font-family: var(--font-en);
  font-weight: 800;
}
.form-alert-mark { width: 20px; height: 20px; font-size: 12px; margin-top: 1px; }
.form-error-mark { width: 15px; height: 15px; font-size: 10px; margin-right: 6px; vertical-align: -2px; }

.form-error {
  font-size: 13px;
  color: #E5001A;
  font-weight: 700;
  line-height: 1.7;
  margin: 8px 0 0;
}
/* エラーのある欄は枠と下地で示す。色だけに頼らず、上の一覧と枠の両方で気づける。 */
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #E5001A;
  background: rgba(229, 0, 26, .04);
}
.form-field.has-error input:focus,
.form-field.has-error textarea:focus {
  border-color: #E5001A;
  background: #fff;
}

/* 送信ボタン。以前は width:100% で、「送信する」4文字に必要な119pxに対し
   544pxまで伸びていた。PCでは240pxに収めて中央に置く。
   スマホは指で押す対象なので全幅のまま（下の@media）。 */
.form-submit {
  display: block;
  width: 240px;
  margin: 4px auto 0;
}
@media (max-width: 560px) {
  .form-submit { width: 100%; }
}

/* ===== Footer ===== */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,.8);
  padding: 56px 0 28px;
}
.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { height: 40px; width: auto; display: block; }
.footer-tagline { font-size: 15px; font-weight: 700; color: #fff; margin: 0; }
.footer-nav { display: flex; align-items: center; }
.footer-nav-links { display: flex; flex-direction: column; gap: 12px; }
.footer-nav-links a { font-size: 14.5px; font-weight: 600; color: #fff; }
.footer-nav-links a:hover { color: var(--teal); }
.footer-nav-row { display: flex; align-items: baseline; gap: 8px; }
.footer-nav-more { font-size: 12px !important; font-weight: 500 !important; color: rgba(255,255,255,.5) !important; }
.footer-nav-more:hover { color: var(--teal) !important; }
.footer-cta { flex-shrink: 0; }
.footer-bottom {
  padding-top: 22px;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-legal { display: flex; align-items: center; gap: 10px; }
.footer-legal a { color: rgba(255,255,255,.5); }
.footer-legal a:hover { color: var(--teal); }
.footer-legal .sep { color: rgba(255,255,255,.3); }
@media (max-width: 700px) {
  /* 縦積みになると、デスクトップで右端にあったCTAが幅123px（コンテンツ幅の38%）の
     ピルとして左端に取り残され、6つ目のナビリンクのように見えてしまう。
     順序はそのまま（＝締めの行動として列の最後）にして、幅だけいっぱいに広げる。
     align-items は flex-start のままにし、CTAだけ align-self で伸ばす。
     ブランド・ナビの見た目は変えない。 */
  .footer-top { flex-direction: column; align-items: flex-start; gap: 28px; }
  .footer-cta { align-self: stretch; }

  /* ナビをハンバーガーメニューと同じ「行」の作りに揃える。
     従来は文字の上だけが当たり判定で、実測では「一覧」が24×22px、
     「実例」が29×26pxしかなく、指で狙うには小さすぎた。 */
  .footer-nav { align-self: stretch; }
  .footer-nav-links { gap: 0; width: 100%; }

  /* 単独リンク（流れ・料金／よくある質問）と、2リンク行（アイデア／実例／ヒント）の
     どちらも同じ高さ・同じ罫線の「行」にする。 */
  .footer-nav-links > a,
  .footer-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 8px 2px;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .footer-nav-links > a { font-size: 16px; }

  /* 行き先が2つある行（アイデア／実例／ヒント）は、行を左右半分ずつに割って
     どちらもリンクにする。片方だけを小さく添えると、矢印だけの行と見分けがつかず
     「右端を押すと何が起きるか」が行によって変わってしまう。
     半分ずつに割り、両方に「›」を付ければ、2つとも押せることが形で分かる。 */
  .footer-nav-row { padding: 0; gap: 0; }
  .footer-nav-row > a {
    flex: 1 1 50%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 2px;
    min-width: 0;
  }
  .footer-nav-row > a:first-child { font-size: 16px; }
  /* 「〇〇一覧」は行き先としては下位なので、大きさと色で差を付ける。
     形（半分の幅・右端の矢印）は主リンクと揃えて、押せることは同じだと示す。
     左右の境目に線は引かない。半分ずつの位置と矢印2つで分かれているのは伝わるので、
     線を足すと横罫と縦罫で升目のようになり、うるさくなる。 */
  .footer-nav-more {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.65) !important;
    padding-left: 12px !important;
  }

  /* 矢印は3種類とも同じ形にする（単独リンク・主リンク・一覧）。
     大きさを変えて上下関係を付けたくなるが、押せるかどうかは対等なので揃える。
     主リンクと一覧の差は文字の大きさ（16px／14px）と色で付ける。 */
  .footer-nav-links > a::after,
  .footer-nav-row > a::after {
    content: '›';
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: rgba(255,255,255,.5);
    flex-shrink: 0;
  }
}

/* ===== Floating circular CTA（右下。記事詳細ページは全幅で表示、LP・一覧ページはヘッダーCTAと重複するためモバイル限定） ===== */
.floating-cta {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 90;
  display: block;
  opacity: 1;
  transition: opacity .2s ease;
}
.floating-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
}
@media (min-width: 901px) {
  .floating-cta.mobile-only { display: none; }
}
.floating-cta a {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--teal) 0%, var(--teal-dark) 100%);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.25;
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 6px 16px rgba(2,24,60,.28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.floating-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 10px 20px rgba(2,24,60,.32);
}
@media (max-width: 900px) {
  .floating-cta { right: 18px; bottom: 18px; }
  .floating-cta a {
    width: 52px; height: 52px;
    font-size: 11px;
    box-shadow: 0 0 0 3px rgba(255,255,255,.45), 0 4px 12px rgba(2,24,60,.3);
  }
}

/* ===== 汎用固定ページ本文（プライバシーポリシー・利用規約など） ===== */
.page-body h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 2em 0 .6em;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--border);
}
.page-body h2:first-child { margin-top: 0; }
.page-body h3 { font-size: 15px; color: var(--navy); margin: 1.6em 0 .5em; }
.page-body p { font-size: 15px; line-height: 1.9; color: var(--text); }
.page-body ul, .page-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.page-body li { font-size: 15px; line-height: 1.9; color: var(--text); margin-bottom: .4em; }
.page-body .page-note {
  background: var(--bg-soft);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.8;
}

/* ===== Utilities ===== */
.note-hang { padding-left: 1em; text-indent: -1em; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* 入力欄（ACFのテキストエリア）に打った改行をそのまま表示する。
   通常HTMLは改行を空白に潰すため、これが無いと書き手の改行が消える。
   空行を1つ入れれば段落の間隔も空く。 */
.keep-breaks { white-space: pre-line; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn-primary.btn-sm { display: none; }
}

@media (max-width: 900px) {
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 75px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    padding: 8px 24px 20px;
    border-bottom: 1px solid var(--border);
    /* 各行を罫線で仕切るので、項目間の隙間は持たせない。 */
    gap: 0;
    z-index: 101;
    /* 素の .nav-links は align-items:center。デスクトップの横並びでは「上下の中央揃え」
       という意味だが、縦積みになると軸が変わって「左右の中央揃え」として効いてしまう。
       結果、リンクの左端が文字数ぶんバラつく（実測で141〜172pxの41px幅）。
       サイトの他の面はすべて左揃えなので、ここだけ浮いていた。 */
    align-items: stretch;
    /* 本文の上に重なる面であることを示す影。色付きの発光は使わない方針なので黒系の薄い影
       （hp-change-prompts §7 v11）。 */
    box-shadow: 0 12px 24px rgba(46, 27, 12, .07);
  }

  /* 行として作る。文字が縦に並んでいるだけでは、どこを押せばよいのか・
     項目がいくつあるのかが読み取れない。
     ・行の高さを確保して指で押せる大きさにする（従来39px→52px）
     ・罫線で区切って項目の境目を見せる
     ・右端に「›」を置いて、押すと移動することを示す（サイト内の他のリンクと同じ記号） */
  .nav-links.open > a:not(.menu-cta),
  .nav-links.open .nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    min-height: 52px;
  }
  /* 上下の余白は8px。12pxだと中身だけで53pxになり、min-heightで52pxに収まる
     左右分割の行より2px高くなってしまう。 */
  .nav-links.open > a:not(.menu-cta) {
    padding: 8px 2px;
    font-size: 16px;
    color: var(--navy);
  }

  /* 行き先が2つある項目（アイデア／実例／ヒント）は、フッターと同じく行を
     左右半分ずつに割り、どちらもリンクにする。 */
  .nav-links.open .nav-row > a {
    flex: 1 1 50%;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 2px;
    min-width: 0;
    font-size: 16px;
    color: var(--navy);
  }
  /* フッターの「〇〇一覧」と同じ扱いにする。
     セレクタに a を付けているのは詳細度のため。.nav-links.open .nav-more（クラス3つ）だと
     一つ上の .nav-links.open .nav-row > a（クラス3つ＋要素1つ）に負けて、
     文字サイズも色も左半分と同じままになる。 */
  .nav-links.open .nav-row > a.nav-more {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    padding-left: 12px;
  }

  /* 素の ::after は下線バー（デスクトップのホバー演出）。
     縦積みの一覧では機能しないので、同じ疑似要素を「›」に作り替える。
     position/transform/background/height を明示的に打ち消す必要がある。 */
  .nav-links.open > a:not(.menu-cta)::after,
  .nav-links.open .nav-row > a::after {
    content: '›';
    display: block;
    position: static;
    transform: none;
    background: none;
    height: auto;
    border-radius: 0;
    color: var(--text-muted);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }
  /* 押している間だけ地を敷く。タップした行がどれか分かるようにする。 */
  .nav-links.open a:not(.menu-cta):active {
    background: var(--bg-soft);
  }

  /* フッターのCTAと同じ理由。縦積みのメニュー内では幅112px（コンテンツ幅327pxの34%）の
     ピルになり、リンク5つの後ろに小さく置かれて6つ目のリンクに見えてしまう。
     幅いっぱいに広げ、ラベルは中央に置く。 */
  .nav-links a.menu-cta {
    display: flex;
    justify-content: center;
    align-self: stretch;
    /* 最後のリンクの罫線と間を空け、リンクの列とは別のものだと分かるようにする。 */
    margin-top: 18px;
  }
}

@media (max-width: 560px) {
  section { padding: 56px 0; }
}

@media (max-width: 480px) {
  /* Problem/Menu/Processのグリッドが2カラム固定のままだと、写真もテキストも幅が足りず窮屈になるため1カラムに */
  .grid-4 { grid-template-columns: 1fr; }
  /* 1カラムになってもgrid-column:span 2が残ると暗黙の2カラム目ができてしまうため解除 */
  .menu-card.featured { grid-column: span 1; }
  .menu-card.featured .thumb { aspect-ratio: 16/10; }
}

@media (max-width: 640px) {
  /* Before/After分割の写真カードは2カラムのままだと1カード内でさらに2分割され、画像が細切れで窮屈になるため1カラムに */
  .grid-3 { grid-template-columns: 1fr; }

  /* 特集カード：デスクトップと同じ「写真に文字オーバーレイ」のヒーロー表現を維持する。
     幅が狭いぶん、正方形に近い比率にして文字がバッジと衝突しない縦の余白を確保する */
  .works-card.featured .tile,
  .works-card.featured .tile-split { aspect-ratio: 1/1; }
  .works-card.featured .works-card-info { padding: 24px 20px; }
}