/*
Theme Name: Mirai Bisou
Description: みらい美装様 コーポレートサイト オリジナルテーマ（静的サイトからの移植）
Version: 1.0.0
Author: SoCxDesign
Text Domain: mirai-bisou
*/

/* ========================================
   みらい美装 — Modern Mockup
   ======================================== */

/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --yellow: #f8df00;
  --yellow-pale: #fdf8d3;
  --yellow-deep: #e0c800;
  --dark: #1a1a1a;
  --dark-soft: #2e2e2e;
  --text: #333;
  --text-sub: #777;
  --bg: #f6f5f0;
  --bg-warm: #efece4; /* Introなど一段濃い暖色背景 */
  --white: #fff;
  --radius: 16px;
  --font-ja: "Noto Sans JP", sans-serif;
  --font-en: "Inter", sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --header-h: 64px;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); overflow-x: hidden; }

body {
  font-family: var(--font-ja);
  color: var(--text);
  background: var(--bg);
  line-height: 1.8;
  font-size: 15px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.sp { display: none; }

/* ============ HEADER ============ */
.header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  background: rgba(246,245,240,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.04);
}

.header__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}

.header__logo {
  display: flex; align-items: center; gap: 10px;
}

.header__logo-icon { width: 36px; }

.header__logo span {
  font-size: 18px; font-weight: 900; letter-spacing: .04em; color: var(--dark);
}

.header__nav ul {
  display: flex; align-items: center; gap: 36px;
}

.header__nav a {
  font-family: var(--font-en); font-size: 13px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dark);
  position: relative; transition: .3s var(--ease);
}

.header__nav a:not(.header__cta)::after {
  content: ""; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1.5px; background: var(--yellow); transform: scaleX(0);
  transform-origin: right; transition: transform .4s var(--ease);
}

.header__nav a:not(.header__cta):hover::after {
  transform: scaleX(1); transform-origin: left;
}

.header__cta {
  background: var(--dark); color: var(--white) !important;
  padding: 10px 28px; border-radius: 100px; font-size: 12px !important;
  transition: .3s var(--ease);
}

.header__cta:hover { background: var(--yellow); color: var(--dark) !important; }

.header__menu {
  display: none; background: none; border: none; cursor: pointer;
  width: 32px; height: 24px; position: relative;
}

.header__menu span {
  display: block; width: 100%; height: 1.5px; background: var(--dark);
  position: absolute; left: 0; transition: .4s var(--ease);
}

.header__menu span:first-child { top: 4px; }
.header__menu span:last-child { bottom: 4px; }

.header__menu.is-open span:first-child { top: 50%; transform: translateY(-50%) rotate(45deg); }
.header__menu.is-open span:last-child { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + 40px) 56px 80px;
  background: var(--dark);
  overflow: hidden;
}

/* --- 背景の散らし文字 --- */
.hero__bg {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

.hero__bg-text {
  position: absolute;
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.04);
  white-space: nowrap;
  line-height: 1;
}

.hero__bg-text--1 {
  font-family: var(--font-en);
  font-size: clamp(180px, 22vw, 360px);
  top: -4%; right: -3%;
  letter-spacing: -.04em;
}

.hero__bg-text--2 {
  font-family: var(--font-en);
  font-size: clamp(140px, 18vw, 300px);
  bottom: 2%; left: -2%;
  letter-spacing: -.03em;
}

.hero__bg-text--3 {
  font-size: clamp(80px, 10vw, 160px);
  top: 18%; left: 60%;
  transform: rotate(-8deg);
  -webkit-text-stroke: 1px rgba(248,223,0,.06);
}

.hero__bg-text--4 {
  font-size: clamp(60px, 8vw, 120px);
  bottom: 22%; right: 8%;
  transform: rotate(5deg);
  -webkit-text-stroke: 1px rgba(248,223,0,.04);
}

.hero__bg-text--5 {
  font-size: clamp(70px, 9vw, 140px);
  top: 55%; left: 2%;
  transform: rotate(-3deg);
  -webkit-text-stroke: 1px rgba(255,255,255,.03);
}

/* --- コンテンツ --- */
.hero__content {
  position: relative; z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero__top {
  margin-bottom: 24px;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 13px; font-weight: 500;
  letter-spacing: .25em;
  color: rgba(255,255,255,.45);
}

.hero__eyebrow-line {
  display: block;
  width: 40px; height: 1px;
  background: var(--yellow);
}

/* --- タイトル --- */
.hero__title {
  margin-bottom: 48px;
}

.hero__title-row {
  display: flex; align-items: baseline;
}

.hero__title-main {
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.08;
  letter-spacing: .06em;
  position: relative;
  visibility: hidden;
}

/* ストローク影のレイヤー（文字分割後は個別文字のshadowで代替） */

.hero__title-accent {
  font-size: clamp(80px, 14vw, 180px);
  font-weight: 900;
  color: var(--yellow);
  line-height: 1.08;
  letter-spacing: .04em;
  position: relative;
  visibility: hidden;
}

/* アクセント文字にテキストシャドウで奥行き */
.hero__title-accent .hero-char {
  text-shadow: 4px 4px 0 rgba(255,255,255,.04);
}

.hero__title-main .hero-char {
  text-shadow: 4px 4px 0 rgba(248,223,0,.08);
}

.hero__title-dot {
  font-size: clamp(60px, 10vw, 120px);
  font-weight: 900;
  color: var(--yellow);
  line-height: .9;
  margin-left: -4px;
  visibility: hidden;
}

/* --- 1文字ずつ出現アニメーション --- */
.hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) scale(.85);
  filter: blur(6px);
  animation: charReveal .6s var(--ease) forwards;
}

@keyframes charReveal {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(.85);
    filter: blur(6px);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) scale(1.02);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* --- ボトム --- */
.hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.hero__bottom-left {
  display: flex; align-items: center; gap: 20px;
}

.hero__mascot {
  width: 64px; flex-shrink: 0;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(3deg); }
}

.hero__lead {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.85;
  color: rgba(255,255,255,.85);
}

.hero__bottom-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 20px;
}

/* サービスキーワード */
.hero__services-hint {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end;
}

.hero__services-hint span {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.72);
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  letter-spacing: .06em;
}

/* CTA */
.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600;
  color: var(--dark);
  background: var(--yellow);
  padding: 14px 32px;
  border-radius: 100px;
  transition: .4s var(--ease);
  white-space: nowrap;
}

.hero__cta-arrow {
  font-family: var(--font-en); font-size: 16px; font-weight: 300;
  transition: transform .4s var(--ease);
}

.hero__cta:hover {
  background: var(--white);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(4px);
}

/* --- スクロール --- */
.hero__scroll {
  position: absolute; bottom: 32px; left: 56px;
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}

.hero__scroll span {
  font-family: var(--font-en); font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.2);
}

.hero__scroll-line {
  width: 1px; height: 48px;
  background: rgba(255,255,255,.08);
  position: relative; overflow: hidden;
}

.hero__scroll-line::after {
  content: ""; position: absolute; top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--yellow);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: 100%; }
}

/* ============ INTRO ============ */
.intro {
  padding: 160px 32px 380px;
  position: relative;
  overflow: hidden;
  background: var(--bg-warm); /* --bgより少し暖かいトーン。SVGをしっかり覆う */
}

/* Intro → Greeting 緩やかな斜めカット（Reason下端と逆方向にしてリズム作り） */
.intro::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 110px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  pointer-events: none;
  z-index: 0;
}

.intro__inner {
  max-width: 1100px; margin: 0 auto; position: relative;
}

.intro__deco {
  font-family: var(--font-en); font-size: clamp(80px, 12vw, 160px);
  font-weight: 900; color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.05);
  position: absolute; top: -60px; left: -40px;
  white-space: nowrap; pointer-events: none;
  letter-spacing: -.02em;
}

.intro__body { position: relative; z-index: 1; max-width: 680px; }

.intro__heading {
  font-size: clamp(28px, 4vw, 44px); font-weight: 900;
  line-height: 1.5; color: var(--dark); margin-bottom: 32px;
}

.intro__heading em {
  font-style: normal; position: relative;
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
}

.intro__text {
  font-size: 15px; line-height: 2.2; color: var(--text-sub);
}

/* --- Intro Visual (2点透視ワイヤーフレームアニメーション) --- */
.intro__visual {
  position: absolute;
  right: 32px;
  bottom: 60px;
  width: 540px;
  height: 480px;
  z-index: 1;
}

/* --- Blueprint Wrapper --- */
.bp__wrapper {
  position: relative;
  width: 100%;
  max-width: 540px;
}

.bp__grid-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--dark);
  opacity: 0;
  transition: opacity 1s .05s var(--ease);
}

.intro__visual.is-drawn .bp__grid-bg {
  opacity: .04;
}

.bp {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

/* ===== 全要素 初期状態 ===== */
.bp line {
  stroke: var(--dark);
  stroke-width: .6;
  opacity: 0;
  transition: opacity .7s var(--ease);
}

.bp text {
  fill: var(--dark);
  opacity: 0;
  transition: opacity .8s var(--ease);
}

/* フレーム（建物輪郭）だけストローク描画 */
.bp__frame line,
.bp__roof line {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 1.8s var(--ease), opacity .5s var(--ease);
}

/* ===== 描画開始 — is-drawn トリガー ===== */

/* --- 地面・道路 --- */
.intro__visual.is-drawn .bp__ground line {
  opacity: .18;
}
.intro__visual.is-drawn .bp__ground line:nth-child(1) { transition-delay: 2.3s; }
.intro__visual.is-drawn .bp__ground line:nth-child(2) { transition-delay: 2.34s; }
.intro__visual.is-drawn .bp__ground line:nth-child(3) { transition-delay: 2.38s; }
.intro__visual.is-drawn .bp__ground line:nth-child(4) { transition-delay: 2.42s; }
.intro__visual.is-drawn .bp__ground line:nth-child(5) { transition-delay: 2.46s; }
.intro__visual.is-drawn .bp__ground line:nth-child(6) { transition-delay: 2.5s; }
.intro__visual.is-drawn .bp__ground line:nth-child(7) { transition-delay: 2.54s; }
.intro__visual.is-drawn .bp__ground line:nth-child(8) { transition-delay: 2.58s; }
.intro__visual.is-drawn .bp__ground line:nth-child(9) { transition-delay: 2.62s; }
.intro__visual.is-drawn .bp__ground line:nth-child(10) { transition-delay: 2.66s; }

/* --- 建物フレーム（ストローク描画） --- */
.intro__visual.is-drawn .bp__frame line {
  stroke-dashoffset: 0;
  opacity: .7;
}
.intro__visual.is-drawn .bp__frame line:nth-child(1) { transition-delay: .15s; } /* corner */
.intro__visual.is-drawn .bp__frame line:nth-child(2) { transition-delay: .25s; } /* front top */
.intro__visual.is-drawn .bp__frame line:nth-child(3) { transition-delay: .3s; }  /* front bottom */
.intro__visual.is-drawn .bp__frame line:nth-child(4) { transition-delay: .4s; }  /* front left */
.intro__visual.is-drawn .bp__frame line:nth-child(5) { transition-delay: .35s; } /* side top */
.intro__visual.is-drawn .bp__frame line:nth-child(6) { transition-delay: .4s; }  /* side bottom */
.intro__visual.is-drawn .bp__frame line:nth-child(7) { transition-delay: .5s; }  /* side right */
.intro__visual.is-drawn .bp__frame line:nth-child(8) { transition-delay: .6s; opacity: .5; } /* 2F front */
.intro__visual.is-drawn .bp__frame line:nth-child(9) { transition-delay: .65s; opacity: .5; } /* 2F side */

/* --- 屋根/パラペット（ストローク描画） --- */
.intro__visual.is-drawn .bp__roof line {
  stroke-dashoffset: 0;
  opacity: .6;
}
.intro__visual.is-drawn .bp__roof line:nth-child(1) { transition-delay: .5s; }
.intro__visual.is-drawn .bp__roof line:nth-child(2) { transition-delay: .55s; }
.intro__visual.is-drawn .bp__roof line:nth-child(3) { transition-delay: .7s; opacity: .4; }
.intro__visual.is-drawn .bp__roof line:nth-child(4) { transition-delay: .72s; opacity: .4; }
.intro__visual.is-drawn .bp__roof line:nth-child(5) { transition-delay: .74s; opacity: .4; }
.intro__visual.is-drawn .bp__roof line:nth-child(6) { transition-delay: .76s; opacity: .4; }

/* --- 正面グリッド（メイン） --- */
.intro__visual.is-drawn .bp__grid-l line {
  opacity: .28;
}
/* 縦 */
.intro__visual.is-drawn .bp__grid-l line:nth-child(1) { transition-delay: .8s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(2) { transition-delay: .84s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(3) { transition-delay: .88s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(4) { transition-delay: .92s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(5) { transition-delay: .96s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(6) { transition-delay: 1s; }
/* 横 2F */
.intro__visual.is-drawn .bp__grid-l line:nth-child(7) { transition-delay: 1.04s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(8) { transition-delay: 1.08s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(9) { transition-delay: 1.12s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(10) { transition-delay: 1.16s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(11) { transition-delay: 1.2s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(12) { transition-delay: 1.24s; }
/* 横 1F */
.intro__visual.is-drawn .bp__grid-l line:nth-child(n+13) { transition-delay: 1.28s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(14) { transition-delay: 1.32s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(15) { transition-delay: 1.36s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(16) { transition-delay: 1.4s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(17) { transition-delay: 1.44s; }
.intro__visual.is-drawn .bp__grid-l line:nth-child(18) { transition-delay: 1.48s; }

/* --- 側面グリッド（メイン） --- */
.intro__visual.is-drawn .bp__grid-r line {
  opacity: .28;
}
/* 縦 */
.intro__visual.is-drawn .bp__grid-r line:nth-child(1) { transition-delay: 1s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(2) { transition-delay: 1.04s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(3) { transition-delay: 1.08s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(4) { transition-delay: 1.12s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(5) { transition-delay: 1.16s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(6) { transition-delay: 1.2s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(7) { transition-delay: 1.24s; }
/* 横 2F */
.intro__visual.is-drawn .bp__grid-r line:nth-child(8) { transition-delay: 1.28s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(9) { transition-delay: 1.32s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(10) { transition-delay: 1.36s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(11) { transition-delay: 1.4s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(12) { transition-delay: 1.44s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(13) { transition-delay: 1.48s; }
/* 横 1F */
.intro__visual.is-drawn .bp__grid-r line:nth-child(n+14) { transition-delay: 1.52s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(15) { transition-delay: 1.56s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(16) { transition-delay: 1.6s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(17) { transition-delay: 1.64s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(18) { transition-delay: 1.68s; }
.intro__visual.is-drawn .bp__grid-r line:nth-child(19) { transition-delay: 1.72s; }

/* --- ファイングリッド（正面） --- */
.intro__visual.is-drawn .bp__fine-l line {
  opacity: .12;
  transition-delay: 1.5s;
}

/* --- ファイングリッド（側面） --- */
.intro__visual.is-drawn .bp__fine-r line {
  opacity: .12;
  transition-delay: 1.7s;
}

/* --- ファサードパターン（正面 X模様） --- */
.intro__visual.is-drawn .bp__pattern-l line {
  opacity: .16;
  transition-delay: 1.8s;
}

/* --- ファサードパターン（側面 X模様） --- */
.intro__visual.is-drawn .bp__pattern-r line {
  opacity: .16;
  transition-delay: 1.9s;
}

/* --- エントランス --- */
.intro__visual.is-drawn .bp__entrance line {
  opacity: .45;
  transition-delay: 2s;
}

/* --- バルコニー --- */
.intro__visual.is-drawn .bp__balcony line {
  opacity: .4;
  transition-delay: 2.05s;
}

/* --- 足場 --- */
.intro__visual.is-drawn .bp__scaffold line {
  stroke: var(--yellow-deep);
}
.intro__visual.is-drawn .bp__scaffold line:nth-child(1) { transition-delay: 2.1s; opacity: .5; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(2) { transition-delay: 2.14s; opacity: .5; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(3) { transition-delay: 2.18s; opacity: .4; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(4) { transition-delay: 2.22s; opacity: .4; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(5) { transition-delay: 2.26s; opacity: .4; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(6) { transition-delay: 2.3s; opacity: .35; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(7) { transition-delay: 2.34s; opacity: .35; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(8) { transition-delay: 2.38s; opacity: .3; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(9) { transition-delay: 2.42s; opacity: .3; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(10) { transition-delay: 2.46s; opacity: .25; }
.intro__visual.is-drawn .bp__scaffold line:nth-child(11) { transition-delay: 2.5s; opacity: .25; }

/* --- 植栽 --- */
.intro__visual.is-drawn .bp__trees line {
  opacity: .3;
}
/* 左の木（幹→樹冠→葉） */
.intro__visual.is-drawn .bp__trees line:nth-child(1) { transition-delay: 2.3s; }
.intro__visual.is-drawn .bp__trees line:nth-child(2) { transition-delay: 2.34s; }
.intro__visual.is-drawn .bp__trees line:nth-child(3) { transition-delay: 2.36s; }
.intro__visual.is-drawn .bp__trees line:nth-child(4) { transition-delay: 2.4s; }
.intro__visual.is-drawn .bp__trees line:nth-child(5) { transition-delay: 2.43s; }
.intro__visual.is-drawn .bp__trees line:nth-child(6) { transition-delay: 2.46s; }
.intro__visual.is-drawn .bp__trees line:nth-child(7) { transition-delay: 2.49s; }
.intro__visual.is-drawn .bp__trees line:nth-child(8) { transition-delay: 2.52s; }
.intro__visual.is-drawn .bp__trees line:nth-child(9) { transition-delay: 2.54s; }
.intro__visual.is-drawn .bp__trees line:nth-child(10) { transition-delay: 2.56s; }
.intro__visual.is-drawn .bp__trees line:nth-child(11) { transition-delay: 2.58s; }
.intro__visual.is-drawn .bp__trees line:nth-child(12) { transition-delay: 2.6s; }
/* 右の木（幹→樹冠→葉） */
.intro__visual.is-drawn .bp__trees line:nth-child(13) { transition-delay: 2.35s; }
.intro__visual.is-drawn .bp__trees line:nth-child(14) { transition-delay: 2.39s; }
.intro__visual.is-drawn .bp__trees line:nth-child(15) { transition-delay: 2.42s; }
.intro__visual.is-drawn .bp__trees line:nth-child(16) { transition-delay: 2.45s; }
.intro__visual.is-drawn .bp__trees line:nth-child(17) { transition-delay: 2.48s; }
.intro__visual.is-drawn .bp__trees line:nth-child(18) { transition-delay: 2.51s; }
.intro__visual.is-drawn .bp__trees line:nth-child(19) { transition-delay: 2.54s; }
.intro__visual.is-drawn .bp__trees line:nth-child(20) { transition-delay: 2.56s; }
.intro__visual.is-drawn .bp__trees line:nth-child(21) { transition-delay: 2.58s; }
.intro__visual.is-drawn .bp__trees line:nth-child(22) { transition-delay: 2.6s; }
.intro__visual.is-drawn .bp__trees line:nth-child(23) { transition-delay: 2.62s; }
.intro__visual.is-drawn .bp__trees line:nth-child(24) { transition-delay: 2.64s; }

/* --- ラベル --- */
.intro__visual.is-drawn .bp__labels text {
  opacity: .4;
  transition-delay: 2.7s;
}
.intro__visual.is-drawn .bp__labels text:last-child {
  transition-delay: 2.8s;
}

/* ============ SERVICES ============ */
.services {
  padding: 56px 32px 120px;
}

.services__header {
  max-width: 1100px; margin: 0 auto;
  text-align: center;
}

/* SERVICES見出し改修：お客様の声(Voice)セクションと同じ見せ方に統一（英字ラベル＝上・黄deep／和文見出し＝下・濃色、サイズも統一） */
.services__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 12px;
}

.services__title {
  font-size: clamp(30px, 4.4vw, 48px); font-weight: 900; color: var(--dark);
  letter-spacing: .02em;
  line-height: 1.3;
}

.services__grid {
  max-width: 1100px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* --- Service Card (photo + highlight text overlay) --- */
.svc-card {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

/* Background image area */
.svc-card__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #d8d4c8 0%, #c5c0b4 100%);
  transition: transform .7s var(--ease);
}

.svc-card:hover .svc-card__bg {
  transform: scale(1.06);
}

/* background image */
.svc-card__bg-img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* placeholder text inside bg (fallback) */
.svc-card__ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(0,0,0,.2); letter-spacing: .1em;
}

/* dark overlay for readability */
.svc-card__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

/* category tag */
.svc-card__tag {
  position: absolute; top: 20px; left: 20px; z-index: 3;
  background: var(--yellow);
  color: var(--dark);
  font-size: clamp(22px, 3vw, 28px); font-weight: 900;
  letter-spacing: .08em;
  padding: 8px 20px;
  border-radius: 6px;
  line-height: 1.3;
}

.svc-card--tosou .svc-card__tag { background: #ff9a5c; color: #fff; }
.svc-card--ashiba .svc-card__tag { background: #5cb8ff; color: #fff; }
.svc-card--senjou .svc-card__tag { background: #6ee0e0; color: var(--dark); }
.svc-card--other .svc-card__tag { background: #f5b94a; color: #fff; }
.svc-card--kominka .svc-card__tag { background: #c9a0dc; color: #fff; }
.svc-card--gaikou .svc-card__tag { background: #e8e8e8; color: var(--dark); }
.svc-card--kaitai .svc-card__tag { background: #6fa8dc; color: #fff; }

/* text content */
.svc-card__content {
  position: relative; z-index: 2;
  padding: 32px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* heading with colored highlight bands */
.svc-card__heading {
  margin-bottom: 16px;
}

.svc-card__heading-line {
  display: block;
  margin-bottom: 4px;
}

.svc-card__hl {
  display: inline;
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 900;
  color: var(--white);
  line-height: 1.5;
  padding: 2px 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* per-card highlight band colors */
.svc-card--tosou .svc-card__hl  { background: rgba(58,123,213,.65); }
.svc-card--ashiba .svc-card__hl { background: rgba(40,40,40,.6); }
.svc-card--senjou .svc-card__hl { background: rgba(26,92,168,.6); }
.svc-card--other .svc-card__hl { background: rgba(200,130,40,.6); }
.svc-card--kominka .svc-card__hl { background: rgba(160,110,60,.6); }
.svc-card--gaikou .svc-card__hl { background: rgba(100,100,100,.55); }
.svc-card--kaitai .svc-card__hl { background: rgba(100,170,210,.6); }

/* description text with subtle dark backdrop */
.svc-card__desc {
  display: flex; flex-direction: column;
}

.svc-card__desc-line {
  display: inline-block;
  font-size: 13px;
  color: var(--white);
  line-height: 1.9;
  padding: 0 8px;
  background: rgba(0,0,0,.35);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  width: fit-content;
}

/* ============ NEWS ============ */
.news {
  padding: 120px 32px;
  background: var(--white);
}

.news__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.news__header {
  margin-bottom: 32px;
}

/* News tabs */
.news__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.news__tab {
  appearance: none;
  border: 1.5px solid rgba(0,0,0,.12);
  background: var(--white);
  color: var(--dark);
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .25s var(--ease);
  font-family: var(--font-en), var(--font-ja);
}
.news__tab:hover {
  border-color: var(--dark);
  background: var(--dark);
  color: var(--white);
}
.news__tab.is-active {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.news__item[hidden] { display: none !important; }

.news__label {
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yellow-deep);
  display: block; margin-bottom: 8px;
}

.news__title {
  font-size: clamp(32px, 4vw, 48px); font-weight: 900; color: var(--dark);
}

.news__list {
  border-top: 1px solid rgba(0,0,0,.08);
}

.news__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  transition: background .3s var(--ease);
}

.news__item:hover {
  background: rgba(0,0,0,.015);
}

.news__date {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: .04em;
  flex-shrink: 0;
  width: 100px;
}

.news__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 12px;
  border-radius: 4px;
  flex-shrink: 0;
  line-height: 1.6;
}

.news__tag--info {
  background: var(--yellow);
  color: var(--dark);
}

.news__tag--works {
  background: #5cb8ff;
  color: #fff;
}

.news__tag--media {
  background: #7dd87d;
  color: #fff;
}

.news__link {
  font-size: 15px;
  color: var(--text);
  transition: color .3s var(--ease);
  line-height: 1.6;
}

.news__item:hover .news__link {
  color: var(--dark);
}

.news__more {
  margin-top: 40px;
  text-align: center;
}

.news__more-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--dark);
  border: 2px solid var(--dark);
  padding: 14px 40px;
  border-radius: 60px;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.news__more-btn:hover {
  background: var(--dark);
  color: var(--white);
}

/* ============ VOICE / お客様の声 ============ */
.voice {
  position: relative;
  padding: 120px 32px;
  background: var(--bg-warm);
  overflow: hidden;
}

.voice__bg-text {
  position: absolute;
  top: 40px;
  right: -20px;
  font-family: var(--font-en);
  font-size: clamp(120px, 18vw, 240px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--white);
  opacity: .55;
  pointer-events: none;
  line-height: 1;
  user-select: none;
}

.voice__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.voice__header {
  text-align: center;
  margin-bottom: 56px;
}

.voice__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 12px;
}

.voice__heading {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: .02em;
  margin-bottom: 20px;
  line-height: 1.3;
}

.voice__heading em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .1em;
}

.voice__heading em::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  height: 30%;
  background: var(--yellow);
  z-index: -1;
  border-radius: 2px;
}

.voice__lead {
  font-size: 14px;
  color: var(--text);
  line-height: 1.95;
  max-width: 640px;
  margin: 0 auto;
}

/* リード文は句単位で折り返す（SPで中途半端な位置の改行を防ぐ） */
.voice__lead span { display: inline-block; }

.voice__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.voice-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 6px 24px rgba(0,0,0,.04);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  position: relative;
  display: flex;
  flex-direction: column;
}

.voice-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  right: 22px;
  font-family: 'Bodoni Moda', 'Times New Roman', serif;
  font-size: 96px;
  line-height: 1;
  color: var(--yellow);
  font-weight: 700;
  pointer-events: none;
}

.voice-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(0,0,0,.08);
}

.voice-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.voice-card__cat {
  font-size: 11px;
  font-weight: 700;
  background: var(--yellow-pale);
  color: var(--dark);
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: .06em;
  line-height: 1.6;
}

.voice-card__rating {
  color: #f5a623;
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 1;
}

.voice-card__title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
  margin-bottom: 14px;
  color: var(--dark);
  letter-spacing: .01em;
}

.voice-card__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 22px;
  flex: 1;
}

.voice-card__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .04em;
  padding-top: 16px;
  border-top: 1px dashed rgba(0,0,0,.12);
  margin: auto 0 0;
}

.voice__more {
  text-align: center;
}

.voice__more-btn {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--dark);
  border: 2px solid var(--dark);
  padding: 14px 40px;
  border-radius: 60px;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.voice__more-btn:hover {
  background: var(--dark);
  color: var(--white);
}

/* ============ REASON ============ */
.reason {
  padding: 140px 32px 180px;
  background: transparent;
  position: relative;
  overflow: hidden;
}

/* 背景ワイプ（左から右へ塗りつぶし） */
.reason__bg-wipe {
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(.25, .9, .3, 1);
  z-index: 0;
}

.reason.is-wipe .reason__bg-wipe {
  transform: scaleX(1);
}

/* ワイプ前はコンテンツ非表示→ワイプ後にフェードイン */
.reason__inner,
.reason__bg-text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s .6s var(--ease), transform .8s .6s var(--ease);
}

.reason.is-wipe .reason__inner,
.reason.is-wipe .reason__bg-text {
  opacity: 1;
  transform: translateY(0);
}

/* Reason → Intro 斜めトランジション（Introの暖色背景に合わせる） */
.reason::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 101px;
  background: var(--bg-warm);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
  z-index: 1;
}

/* Reason 装飾アクセント：左サイドライン */
.reason::before {
  content: "";
  position: absolute;
  top: 120px; left: 0;
  width: 4px; height: 120px;
  background: linear-gradient(to bottom, var(--yellow), transparent);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .6s 1.2s var(--ease);
}

.reason.is-wipe::before {
  opacity: 1;
}

/* Reason 装飾：背景英字 */
.reason__bg-text {
  position: absolute;
  bottom: 100px; right: -30px;
  font-family: var(--font-en);
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 900;
  color: rgba(255,255,255,.025);
  letter-spacing: -.04em;
  pointer-events: none;
  line-height: 1;
}

.reason__inner { max-width: 1100px; margin: 0 auto; }

.reason__header { margin-bottom: 72px; }

.reason__label {
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--yellow);
  display: block; margin-bottom: 12px;
}

.reason__heading {
  font-size: clamp(32px, 4vw, 48px); font-weight: 900;
  color: var(--white); line-height: 1.4;
}

.reason__heading em {
  font-style: normal;
  background: linear-gradient(transparent 60%, rgba(248,223,0,.25) 60%);
}

.reason__items {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

.reason-item {
  background: var(--dark-soft); border-radius: var(--radius);
  overflow: hidden; position: relative;
  transition: transform .4s var(--ease);
}

.reason-item:hover { transform: translateY(-4px); }

.reason-item__num {
  font-family: var(--font-en); font-size: 64px; font-weight: 900;
  color: rgba(248,223,0,.08);
  position: absolute; top: 16px; right: 20px;
  line-height: 1;
}

.reason-item__img {
  height: 200px;
  overflow: hidden;
}

.reason-item__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.reason-item:hover .reason-item__img img {
  transform: scale(1.05);
}

.reason-item__body { padding: 28px; }

.reason-item__body h3 {
  font-size: 18px; font-weight: 700; color: var(--white);
  margin-bottom: 12px; line-height: 1.5;
}

.reason-item__body p {
  font-size: 13px; color: rgba(255,255,255,.5); line-height: 1.9;
}

/* ============ WORRIES ============ */
.worries {
  padding: 140px 32px;
  background: var(--yellow-pale);
  position: relative; overflow: hidden;
}

.worries__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: center;
}

.worries__mascot {
  width: 180px; margin-bottom: 32px;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.08));
}

.worries__heading {
  font-size: clamp(28px, 3.5vw, 40px); font-weight: 900;
  color: var(--dark); line-height: 1.4;
}

.worries__heading-q {
  color: var(--yellow-deep); font-size: 1.4em;
}

.worries__list {
  display: flex; flex-direction: column; gap: 2px;
}

.worries__list li {
  padding: 14px 20px;
  background: var(--white); border-radius: 8px;
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 14px;
  transition: transform .3s var(--ease);
}

.worries__list li:hover { transform: translateX(4px); }

.worries__list li::before {
  content: "";
  width: 6px; height: 6px; flex-shrink: 0;
  background: var(--yellow); border-radius: 50%;
}

.worries__cta {
  margin-top: 28px; font-size: 15px; color: var(--text-sub);
}

.worries__cta strong { color: var(--dark); }

/* ============ GREETING ============ */
.greeting {
  padding: 140px 32px;
  background: var(--white);
}

.greeting__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 380px 1fr; gap: 60px;
}

.greeting__label {
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--yellow-deep); display: block; margin-bottom: 8px;
}

.greeting__heading {
  font-size: 36px; font-weight: 900; color: var(--dark); margin-bottom: 32px;
}

.greeting__photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}

.greeting__photo {
  background: var(--bg); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-size: 13px;
}

.greeting__photo img {
  width: 100%; height: 100%; object-fit: cover;
}

.greeting__photo--1 { height: 200px; }
.greeting__photo--2 { height: 200px; }
.greeting__photo--3 { height: auto; aspect-ratio: 3 / 2; border-radius: 12px; margin-top: 24px; }

.greeting__lead-text {
  font-size: 22px; font-weight: 700; color: var(--dark);
  margin-bottom: 24px; line-height: 1.7;
}

.greeting__text p {
  font-size: 14px; line-height: 2.2; color: var(--text-sub);
  margin-bottom: 12px;
}

/* ============ CONTACT ============ */
.contact {
  padding: 100px 32px;
  background: var(--yellow);
  position: relative; overflow: hidden;
}

.contact::before {
  content: "CONTACT";
  font-family: var(--font-en); font-size: clamp(100px, 16vw, 200px);
  font-weight: 900; color: rgba(0,0,0,.03);
  position: absolute; bottom: -40px; right: -20px;
  letter-spacing: -.02em; pointer-events: none;
}

.contact__inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; position: relative; z-index: 1;
}

.contact__label {
  font-family: var(--font-en); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dark);
  opacity: .4; display: block; margin-bottom: 12px;
}

.contact__heading {
  font-size: clamp(32px, 4vw, 44px); font-weight: 900;
  color: var(--dark); line-height: 1.4; margin-bottom: 16px;
}

.contact__text {
  font-size: 14px; color: var(--dark); opacity: .6; line-height: 1.9;
}

.contact__right {
  display: flex; flex-direction: column; gap: 16px;
  position: relative;
}

.contact__tel {
  background: var(--white); border-radius: var(--radius);
  padding: 24px 32px; text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  transition: transform .3s var(--ease);
}

.contact__tel:hover { transform: translateY(-2px); }

.contact__tel-free {
  display: block; font-size: 11px; color: var(--text-sub);
  margin-bottom: 4px; letter-spacing: .1em;
}

.contact__tel-num {
  font-family: var(--font-en); font-size: 32px; font-weight: 800;
  color: var(--dark); letter-spacing: .03em;
}

.contact__mail {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--dark); color: var(--white);
  padding: 20px 32px; border-radius: var(--radius);
  font-size: 14px; font-weight: 600;
  transition: .3s var(--ease);
}

.contact__mail:hover { background: var(--dark-soft); }

.contact__mail-arrow {
  font-family: var(--font-en); font-size: 18px; font-weight: 300;
  transition: transform .3s var(--ease);
}

.contact__mail:hover .contact__mail-arrow { transform: translateX(4px); }

.contact__mascot {
  width: 100px; position: absolute; bottom: -20px; right: -10px;
  opacity: .2;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--dark); color: var(--white);
  padding: 56px 32px 0;
}

.footer__top {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer__brand {
  display: flex; align-items: center; gap: 14px;
}

.footer__brand-icon { width: 36px; opacity: .8; }

.footer__brand-name {
  display: block; font-size: 18px; font-weight: 900; letter-spacing: .04em;
}

.footer__brand-tel {
  display: block; font-family: var(--font-en);
  font-size: 12px; opacity: .4; letter-spacing: .05em; margin-top: 2px;
}

.footer__nav {
  display: flex; gap: 32px;
}

.footer__nav a {
  font-size: 13px; opacity: .5;
  transition: opacity .3s var(--ease);
}

.footer__nav a:hover { opacity: 1; }

.footer__offices {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer__office h4 {
  font-size: 12px; font-weight: 700; margin-bottom: 6px; opacity: .7;
}

.footer__office p {
  font-size: 12px; opacity: .4; line-height: 1.7;
}

.footer__office-tel {
  margin-top: 6px; opacity: .6 !important;
  font-size: 13px !important;
}

.footer__office-tel strong {
  font-family: var(--font-en);
  font-size: 16px; font-weight: 800;
  letter-spacing: .03em;
  opacity: 1;
}

.footer__qr {
  max-width: 1200px; margin: 0 auto;
  display: flex; gap: 28px; padding: 32px 0;
}

.footer__qr-item {
  display: flex; align-items: center; gap: 10px;
  color: inherit; text-decoration: none;
  padding: 6px 10px; margin: -6px -10px;
  border-radius: 10px;
  transition: background .25s var(--ease), opacity .25s var(--ease);
}
.footer__qr-item:hover,
.footer__qr-item:focus-visible {
  background: rgba(255,255,255,.06);
  outline: none;
}
.footer__qr-item:hover span,
.footer__qr-item:focus-visible span { opacity: .85; }

.footer__qr-item img {
  width: 56px; height: 56px; border-radius: 8px;
  transition: transform .25s var(--ease);
}
.footer__qr-item:hover img { transform: scale(1.04); }

.footer__qr-item span { font-size: 11px; opacity: .4; transition: opacity .25s var(--ease); }

.footer__copy {
  max-width: 1200px; margin: 0 auto;
  padding: 20px 0; border-top: 1px solid rgba(255,255,255,.05);
}

.footer__copy p {
  font-size: 11px; opacity: .25; font-family: var(--font-en);
}

/* ============ SECTION BRIDGE (Worries → Services) ============ */
.section-bridge {
  position: relative;
  width: 100%;
  height: clamp(220px, 32vh, 360px);
  overflow: hidden;
  isolation: isolate;
}
.section-bridge__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--yellow-pale) 0%,
    var(--yellow-pale) 28%,
    var(--bg) 78%,
    var(--bg) 100%);
  z-index: 0;
}
.section-bridge__inner {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(20px, 3vh, 36px);
  padding: 0 32px;
}
.section-bridge__label {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(64px, 11vw, 180px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(26, 26, 26, .42);
  text-stroke: 1.5px rgba(26, 26, 26, .42);
  white-space: nowrap;
  position: relative;
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.section-bridge__label.is-show {
  opacity: 1; transform: translateX(0);
}
/* 塗りつぶしレイヤー：is-show時に左→右へ塗っていく（高コントラスト） */
.section-bridge__label::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  white-space: nowrap;
  color: var(--dark);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s .55s cubic-bezier(.65, 0, .35, 1),
              -webkit-clip-path 1.4s .55s cubic-bezier(.65, 0, .35, 1);
}
.section-bridge__label.is-show::after {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.section-bridge__rule {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .8s .15s var(--ease), transform .8s .15s var(--ease);
}
.section-bridge__label.is-show + .section-bridge__rule,
.section-bridge.is-show .section-bridge__rule {
  opacity: 1; transform: translateY(0);
}
.section-bridge__small {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-sub);
  opacity: .65;
}
.section-bridge__num {
  font-family: var(--font-en);
  font-size: 14px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--dark);
  position: relative;
  padding-top: 18px;
}
.section-bridge__num::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 12px;
  background: var(--dark);
  opacity: .35;
}

@media (max-width: 700px) {
  .section-bridge { height: clamp(160px, 26vh, 240px); }
  .section-bridge__label {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }
}

/* ============ MOBILE NAV OVERLAY ============ */

/* ============ SUBPAGE / 下層ページ共通 ============ */
.subhero {
  position: relative;
  padding: calc(var(--header-h) + 88px) 32px 88px;
  background: var(--bg-warm);
  overflow: hidden;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.subhero__bg-text {
  position: absolute;
  right: -16px;
  bottom: -28px;
  font-family: var(--font-en);
  font-size: clamp(128px, 22vw, 320px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--white);
  opacity: .55;
  pointer-events: none;
  user-select: none;
  line-height: .85;
  white-space: nowrap;
}

.subhero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.subhero__breadcrumb {
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: .04em;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.subhero__breadcrumb a { color: var(--text-sub); transition: color .25s var(--ease); }
.subhero__breadcrumb a:hover { color: var(--dark); }
.subhero__breadcrumb-sep { opacity: .4; }
.subhero__breadcrumb [aria-current="page"] { color: var(--dark); font-weight: 600; }

.subhero__label {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 14px;
}

.subhero__title {
  font-size: clamp(32px, 5.2vw, 56px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--dark);
  margin-bottom: 20px;
}

.subhero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .08em;
}

.subhero__title em::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  height: 28%;
  background: var(--yellow);
  z-index: -1;
  border-radius: 2px;
}

.subhero__lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text);
  max-width: 640px;
}

.subhero__mascot {
  position: absolute;
  right: 6%;
  bottom: 24px;
  width: clamp(120px, 14vw, 180px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  z-index: 3;
}

/* セクション共通 */
.section {
  padding: 120px 32px;
}
.section--white { background: var(--white); }
.section--bg { background: var(--bg); }
.section--warm { background: var(--bg-warm); }

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section__head {
  text-align: center;
  margin-bottom: 56px;
}

.section__label {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--yellow-deep);
  display: block;
  margin-bottom: 12px;
}

.section__heading {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--dark);
  letter-spacing: .02em;
  line-height: 1.4;
  margin-bottom: 18px;
}

.section__heading em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .08em;
}

.section__heading em::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5%;
  height: 28%;
  background: var(--yellow);
  z-index: -1;
  border-radius: 2px;
}

.section__lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
}

/* お悩みリスト共通 */
.troubles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.trouble-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.trouble-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.06); }
.trouble-card__check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark);
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trouble-card__text {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--dark);
}

/* ステップフロー共通（縦タイムライン形式） */
.flow {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  counter-reset: flow;
}
.flow-step {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 26px 32px 26px 112px;
  border: 1px solid rgba(0,0,0,.06);
  min-height: 92px;
}
.flow-step::before {
  counter-increment: flow;
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--dark);
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 53px;
  top: 80px;
  bottom: -16px;
  width: 2px;
  background: var(--yellow);
  opacity: .4;
  z-index: 1;
}
.flow-step__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
  line-height: 1.5;
}
.flow-step__text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* FAQ共通 */
.faq {
  max-width: 880px;
  margin: 0 auto;
}
.faq-item {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 28px;
  font-weight: 700;
  font-size: 15px;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  line-height: 1.6;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: 'Q';
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 800;
  background: var(--yellow);
  color: var(--dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--text-sub);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item__body {
  padding: 0 28px 24px 70px;
  font-size: 14px;
  line-height: 1.95;
  color: var(--text);
}

/* CTAボタン共通 */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--dark);
  color: var(--white);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .08em;
  border-radius: 999px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.btn-cta:hover { background: var(--yellow); color: var(--dark); transform: translateY(-2px); }

.btn-cta--outline {
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
}
.btn-cta--outline:hover { background: var(--dark); color: var(--white); }

/* 塗装プラン / 料金カード共通 */
.plans__group {
  margin-bottom: 56px;
}
.plans__group:last-child { margin-bottom: 0; }
.plans__group-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: .04em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.plans__group-title::before {
  content: '';
  width: 6px;
  height: 24px;
  background: var(--yellow);
  border-radius: 3px;
  display: inline-block;
}

.plans__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.plan-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.06); }

.plan-card--featured {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.plan-card--featured::after {
  content: 'おすすめ';
  position: absolute;
  top: -10px;
  right: 18px;
  background: var(--yellow);
  color: var(--dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 14px;
  border-radius: 999px;
}

.plan-card__rank {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  color: var(--yellow-deep);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.plan-card--featured .plan-card__rank { color: var(--yellow); }

.plan-card__name {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--dark);
  margin-bottom: 16px;
  line-height: 1.4;
}
.plan-card--featured .plan-card__name { color: var(--white); }

.plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
}
.plan-card--featured .plan-card__price { border-bottom-color: rgba(255,255,255,.18); }

.plan-card__price-from {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  letter-spacing: .04em;
}
.plan-card--featured .plan-card__price-from { color: rgba(255,255,255,.6); }

.plan-card__price-num {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--dark);
  line-height: 1;
}
.plan-card--featured .plan-card__price-num { color: var(--white); }

.plan-card__price-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  margin-left: 2px;
}
.plan-card--featured .plan-card__price-unit { color: var(--white); }

.plan-card__price-tax {
  font-size: 10.5px;
  color: var(--text-sub);
  margin-left: auto;
}
.plan-card--featured .plan-card__price-tax { color: rgba(255,255,255,.5); }

.plan-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.plan-card__spec {
  font-size: 11px;
  font-weight: 600;
  background: var(--yellow-pale);
  color: var(--dark);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .04em;
}
.plan-card--featured .plan-card__spec {
  background: rgba(248,223,0,.18);
  color: var(--yellow);
}

.plan-card__desc {
  font-size: 13px;
  line-height: 1.85;
  color: var(--text);
  margin-bottom: 0;
  flex: 1;
}
.plan-card--featured .plan-card__desc { color: rgba(255,255,255,.78); }

.plans__note {
  margin-top: 28px;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.85;
  background: var(--bg-warm);
  border-radius: 12px;
  padding: 18px 22px;
}

/* メリット / ポイント カードグリッド */
.points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.point-card {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: left;
  transition: transform .3s var(--ease);
}
.point-card:hover { transform: translateY(-3px); }
.point-card__num {
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 800;
  color: var(--yellow-deep);
  letter-spacing: -.02em;
  line-height: 1;
  margin-bottom: 14px;
}
.point-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 12px;
  line-height: 1.5;
}
.point-card__text {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text);
}

/* 施工事例 / Works カードグリッド */
.works-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.work-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.work-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,.08); }
.work-card__img {
  aspect-ratio: 4/3;
  background: var(--bg-warm);
  position: relative;
  overflow: hidden;
}
.work-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
.work-card:hover .work-card__img img { transform: scale(1.05); }
.work-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: var(--dark);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 5px 12px;
  border-radius: 999px;
}
.work-card__body { padding: 20px 22px 22px; }
.work-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.6;
  margin-bottom: 8px;
}
.work-card__meta {
  font-size: 12px;
  color: var(--text-sub);
  letter-spacing: .04em;
}

/* 中央配置CTAブロック */
.cta-block {
  text-align: center;
  margin-top: 48px;
}

/* 会社情報テーブル */
.info-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}
.info-table th,
.info-table td {
  padding: 18px 24px;
  text-align: left;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.85;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }
.info-table th {
  width: 200px;
  font-weight: 700;
  color: var(--dark);
  background: var(--bg-warm);
  letter-spacing: .04em;
}
.info-table td {
  color: var(--text);
}
.info-table td small { display: block; margin-top: 4px; color: #999; font-size: 12px; }

/* 沿革タイムライン */
.timeline {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 32px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(0,0,0,.1);
}
.timeline-item {
  position: relative;
  padding-bottom: 28px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -32px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 2px var(--yellow);
}
.timeline-item__year {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 16px;
  color: var(--yellow-deep);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.timeline-item__text {
  font-size: 14.5px;
  color: var(--dark);
  font-weight: 700;
  margin-bottom: 4px;
}
.timeline-item__detail {
  font-size: 13px;
  color: var(--text);
  line-height: 1.85;
}

/* アクセス */
.access {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.access-item {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
}
.access-item__map {
  aspect-ratio: 16/10;
  background: var(--bg-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-sub);
  font-size: 12px;
  letter-spacing: .04em;
}
.access-item__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.access-item__map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid var(--dark);
  border-radius: 999px;
  text-decoration: none;
  color: var(--dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.access-item__map-link svg {
  width: 16px;
  height: 16px;
  transition: transform .3s ease;
}
.access-item__map-link:hover,
.access-item__map-link:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--dark);
  transform: translateY(-2px);
}
.access-item__map-link:hover svg,
.access-item__map-link:focus-visible svg {
  transform: scale(1.1);
}
.access-item__body {
  padding: 24px 26px 26px;
}
.access-item__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 10px;
}
.access-item__addr {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 14px;
}
.access-item__meta {
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.85;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.12);
}

/* お問い合わせフォーム */
.form {
  display: grid;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  padding: 40px 36px;
  border: 1px solid rgba(0,0,0,.06);
}
.form__group {
  display: grid;
  gap: 8px;
}
.form__label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 8px;
}
.form__required {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--yellow);
  color: var(--dark);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.form__optional {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(0,0,0,.06);
  color: var(--text-sub);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
}
.form__input,
.form__textarea,
.form__select {
  appearance: none;
  border: 1.5px solid rgba(0,0,0,.12);
  background: var(--white);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14.5px;
  font-family: inherit;
  color: var(--dark);
  width: 100%;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--yellow-deep);
  box-shadow: 0 0 0 4px rgba(248,223,0,.18);
}
.form__textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.form__select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 10px;
  padding-right: 40px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form__check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.form__check input { margin-top: 4px; flex-shrink: 0; }
.form__check a { text-decoration: underline; color: var(--dark); }
.form__submit {
  appearance: none;
  border: none;
  background: var(--dark);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .08em;
  padding: 18px 40px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .3s var(--ease);
  justify-self: center;
  min-width: 240px;
}
.form__submit:hover { background: var(--yellow); color: var(--dark); }
.form__note {
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.85;
  margin-top: -8px;
}

/* プライバシー本文 */
.policy {
  max-width: 880px;
  margin: 0 auto;
}
.policy h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--dark);
  margin: 32px 0 12px;
  padding-left: 14px;
  border-left: 4px solid var(--yellow);
  line-height: 1.5;
}
.policy h3:first-child { margin-top: 0; }
.policy p,
.policy li {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 12px;
}
.policy ul,
.policy ol {
  padding-left: 22px;
  margin-bottom: 16px;
}
.policy li { margin-bottom: 6px; }
.policy ul li { list-style: disc; }
.policy ol li { list-style: decimal; }
.policy__date {
  text-align: right;
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 40px;
}

/* カテゴリフィルタ */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
}
.cat-filter__btn {
  appearance: none;
  border: 1.5px solid rgba(0,0,0,.12);
  background: var(--white);
  color: var(--dark);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  transition: all .25s var(--ease);
  font-family: inherit;
}
.cat-filter__btn:hover { border-color: var(--dark); }
.cat-filter__btn.is-active { background: var(--dark); color: var(--white); border-color: var(--dark); }

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--dark);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.pagination a:hover { border-color: var(--dark); background: var(--dark); color: var(--white); }
.pagination .is-current {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.pagination .is-disabled {
  color: rgba(0,0,0,.25);
  pointer-events: none;
}

/* SP対応 */
@media (max-width: 900px) {
  .subhero { padding: calc(var(--header-h) + 56px) 24px 60px; }
  .subhero__mascot { width: 90px; right: 4%; bottom: 12px; }
  .subhero__bg-text { font-size: clamp(96px, 20vw, 200px); }
  .section { padding: 80px 24px; }
  .section__head { margin-bottom: 40px; }
  .faq-item summary { padding: 18px 48px 18px 22px; font-size: 14px; }
  .faq-item__body { padding: 0 22px 20px 60px; }
  .plans__group-title { font-size: 19px; }
  .plan-card { padding: 24px 22px 22px; }
  .plan-card__name { font-size: 18px; }
  .plan-card__price-num { font-size: 28px; }
  .point-card { padding: 28px 22px; }
  .work-card__body { padding: 18px 20px 20px; }
  .flow-step { padding: 22px 22px 22px 86px; min-height: 80px; }
  .flow-step::before { width: 44px; height: 44px; font-size: 15px; top: 22px; left: 22px; }
  .flow-step:not(:last-child)::after { left: 43px; top: 66px; }
  .flow-step__title { font-size: 15.5px; }
  .flow-step__text { font-size: 13.5px; }
  .info-table th { width: 100px; padding: 14px 12px; font-size: 13px; }
  .info-table td { padding: 14px 12px; font-size: 13px; }
  .form { padding: 28px 22px; }
  .form__row { grid-template-columns: 1fr; gap: 20px; }
}

/* ============ SCROLL ANIMATION ============ */
[data-anim] {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

[data-anim].is-show {
  opacity: 1; transform: translateY(0);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  .sp { display: inline; }
  .header__menu { display: block; }

  /* SPナビ：FVと同じ墨色の全画面オーバーレイ。
     display切替はアニメーションできないため opacity+visibility で開閉を演出する */
  .header__nav {
    display: flex;
    position: fixed;
    top: var(--header-h); left: 0; right: 0;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    background: var(--dark);
    z-index: 99;
    flex-direction: column;
    padding: clamp(28px, 6vh, 56px) 28px 36px;
    overflow-y: auto;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease), visibility 0s .3s;
  }

  .header__nav.is-open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity .3s var(--ease), visibility 0s;
  }

  .header__nav ul {
    flex-direction: column; align-items: stretch; gap: 0; width: 100%;
  }

  .header__nav li {
    opacity: 0; transform: translateY(16px);
  }
  .header__nav li:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .header__nav.is-open li {
    opacity: 1; transform: translateY(0);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
  }
  /* 項目のスタッガー登場（上から順に） */
  .header__nav.is-open li:nth-child(1) { transition-delay: .04s; }
  .header__nav.is-open li:nth-child(2) { transition-delay: .09s; }
  .header__nav.is-open li:nth-child(3) { transition-delay: .14s; }
  .header__nav.is-open li:nth-child(4) { transition-delay: .19s; }
  .header__nav.is-open li:nth-child(5) { transition-delay: .24s; }
  .header__nav.is-open li:nth-child(6) { transition-delay: .32s; }

  .header__nav a:not(.header__cta) {
    display: flex; align-items: baseline; gap: 16px;
    padding: 19px 2px;
    font-size: 19px; font-weight: 700;
    letter-spacing: .04em; text-transform: none;
    color: var(--white);
  }
  .header__nav a:not(.header__cta)::after { display: none; }

  /* EN眉ラベル（セクションラベルと同じ言語体系・装飾目的） */
  .header__nav a:not(.header__cta)::before {
    font-family: var(--font-en);
    font-size: 11px; font-weight: 700; letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--yellow);
    min-width: 76px;
  }
  .header__nav li:nth-child(1) a::before { content: "Services"; }
  .header__nav li:nth-child(2) a::before { content: "Works"; }
  .header__nav li:nth-child(3) a::before { content: "News"; }
  .header__nav li:nth-child(4) a::before { content: "Reason"; }
  .header__nav li:nth-child(5) a::before { content: "About"; }

  .header__nav .header__cta {
    margin-top: 32px;
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 17px 32px; border-radius: 999px;
    background: var(--yellow); color: var(--dark) !important;
    font-size: 15px !important; font-weight: 900;
    letter-spacing: .08em;
  }

  @media (prefers-reduced-motion: reduce) {
    .header__nav, .header__nav li { transition: none; }
    .header__nav li { transform: none; }
  }

  /* Hero */
  .hero {
    padding: calc(var(--header-h) + 24px) 20px 60px;
  }

  .hero__title-main { font-size: 56px; }
  .hero__title-accent { font-size: 64px; }
  .hero__title-dot { font-size: 48px; }

  .hero__bottom {
    flex-direction: column;
    align-items: flex-start; gap: 24px;
  }

  .hero__bottom-right {
    align-items: flex-start;
  }

  .hero__services-hint {
    justify-content: flex-start;
  }

  .hero__scroll { display: none; }
  .hero__bg-text--3,
  .hero__bg-text--4,
  .hero__bg-text--5 { display: none; }

  /* Intro：SPは斜めカットを緩くし、本文と装飾の間隔を確保 */
  .intro { padding: 100px 24px 170px; }
  .intro::after { height: 60px; }
  .intro__inner { grid-template-columns: 1fr; }
  .intro__visual { display: none; }
  .intro__deco { font-size: 60px; top: -30px; left: -10px; }

  /* Services */
  .services { padding: 80px 16px; }
  .services__grid { grid-template-columns: 1fr; gap: 16px; }
  .svc-card { aspect-ratio: auto; min-height: 280px; }
  .svc-card__tag { font-size: 13px; padding: 5px 12px; top: 16px; left: 16px; }
  .svc-card__hl { font-size: 20px !important; }
  .svc-card__content { padding: 20px; padding-top: 52px; }

  /* News */
  .news { padding: 80px 16px; }
  .news__item { flex-wrap: wrap; gap: 8px 12px; }
  .news__date { width: auto; }
  .news__link { width: 100%; }

  /* Reason */
  .reason { padding: 100px 24px 140px; }
  .reason__items { grid-template-columns: 1fr; gap: 16px; }
  .reason-item__img { height: 160px; }
  .reason::after { height: 60px; }
  .reason::before { height: 80px; }

  /* Worries：SPはマスコットと見出しを横並びにして右余白を解消 */
  .worries { padding: 100px 24px; }
  .worries__inner { grid-template-columns: 1fr; gap: 40px; }
  .worries__left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .worries__mascot { width: 88px; margin-bottom: 0; flex-shrink: 0; }
  .worries__heading { font-size: 26px; }

  /* Greeting */
  .greeting { padding: 100px 24px; }
  .greeting__inner { grid-template-columns: 1fr; gap: 40px; }

  /* Voice */
  .voice { padding: 80px 20px; }
  .voice__bg-text { font-size: 96px; top: 24px; right: -8px; }
  .voice__list { grid-template-columns: 1fr; gap: 16px; }
  .voice-card { padding: 28px 24px 24px; }
  .voice-card__title { font-size: 16px; }
  .voice-card__text { font-size: 13px; }

  /* Contact */
  .contact { padding: 80px 24px; }
  .contact__inner { grid-template-columns: 1fr; gap: 40px; }

  /* Footer */
  .footer__top { flex-direction: column; gap: 24px; text-align: center; }
  .footer__nav { flex-wrap: wrap; justify-content: center; gap: 20px; }
  .footer__offices { grid-template-columns: 1fr; }
  .footer__qr { justify-content: center; }
}

@media (max-width: 600px) {
  .svc-card__hl { font-size: 18px !important; }
  .svc-card__desc-line { font-size: 12px; }
}

/* ============================================================
   LP DESIGN SYSTEM — 職人エディトリアル
   塗装ページから先行適用、後続の他下層ページにも順次展開予定
   ============================================================ */

.page-lp {
  --lp-ink: #0c0c0c;
  --lp-paper: #f1ece0;
  --lp-paper-deep: #e9e2d0;
  --lp-paper-mid: #ece6d6;
  --lp-rule: rgba(20,20,20,.14);
  --lp-rule-strong: rgba(20,20,20,.32);
  --lp-yellow: var(--yellow);
  --lp-yellow-soft: #fff5b4;
  --lp-yellow-deep: var(--yellow-deep);
  --lp-shadow-card: 0 24px 48px -28px rgba(20,20,20,.18);
  --lp-shadow-card-sm: 0 10px 28px -16px rgba(20,20,20,.14);
  --font-serif-ja: "Shippori Mincho B1", "Noto Sans JP", serif;
}

body.page-lp {
  background: var(--lp-paper);
}

/* 紙の粒状感ノイズオーバーレイ */
body.page-lp::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

body.page-lp .header {
  background: rgba(241,236,224,.86);
}

body.page-lp main {
  position: relative;
  z-index: 2;
}

/* ===== Section 共通ヘッダー ===== */
.lp-section__head {
  position: relative;
  margin-bottom: 64px;
  max-width: 760px;
}
.lp-section__head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 72px;
}

.lp-section__num {
  font-family: var(--font-en);
  font-size: clamp(72px, 11vw, 148px);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.04em;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20,20,20,.18);
  display: block;
  margin-bottom: -8px;
}

.lp-section__cat {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lp-ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.lp-section__cat::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--lp-yellow-deep);
}
.lp-section__head--center .lp-section__cat {
  display: inline-flex;
}

.lp-section__title {
  font-family: var(--font-serif-ja);
  font-size: clamp(28px, 4.6vw, 50px);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.5;
  color: var(--lp-ink);
  margin-bottom: 26px;
}

/* 黄色マーカー塗りつぶしアクセント（is-show で左→右にスライドフィル） */
.lp-section__title em,
.lp-em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .08em .04em;
  z-index: 1;
}
.lp-section__title em::before,
.lp-em::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 6%;
  height: 36%;
  background: var(--lp-yellow);
  border-radius: 2px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1);
}
.lp-section__head.is-show .lp-section__title em::before,
.lp-section__head.is-show .lp-em::before {
  transform: scaleX(1);
}

.lp-section__lead {
  font-size: 15px;
  line-height: 2.1;
  color: var(--text);
  max-width: 640px;
  letter-spacing: .015em;
}
.lp-section__head--center .lp-section__lead {
  margin-left: auto;
  margin-right: auto;
}

/* セクション区切り装飾（ブラシストローク） */
.lp-divider {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lp-divider::before {
  content: "";
  width: clamp(160px, 24vw, 280px);
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 14' preserveAspectRatio='none'><path d='M2 8 Q40 2 80 7 Q140 14 200 6 Q240 2 278 9' stroke='%231a1a1a' stroke-width='1.4' stroke-linecap='round' fill='none' opacity='.34'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ===== HERO (lp-hero) ===== */
.lp-hero {
  position: relative;
  padding: calc(var(--header-h) + 96px) 40px 110px;
  background: var(--lp-paper);
  overflow: hidden;
  border-bottom: 1px solid var(--lp-rule);
  isolation: isolate;
}

/* 背景の大判英字 */
.lp-hero__bg-text {
  position: absolute;
  left: -1.5%;
  bottom: -2.6vw;
  font-family: var(--font-en);
  font-size: clamp(180px, 28vw, 420px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20,20,20,.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

/* スプラッシュ装飾 */
.lp-hero__splash {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.lp-hero__splash--top-right {
  top: calc(var(--header-h) + 60px);
  right: -60px;
  width: clamp(220px, 24vw, 340px);
  opacity: .85;
}
.lp-hero__splash--mid-left {
  bottom: 18%;
  left: -40px;
  width: clamp(140px, 14vw, 180px);
  opacity: .55;
  transform: rotate(-22deg);
}

.lp-hero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 32px 56px;
  align-items: start;
  z-index: 2;
}

.lp-hero__crumb {
  grid-column: 1 / -1;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.lp-hero__crumb a { color: var(--text-sub); transition: color .25s var(--ease); }
.lp-hero__crumb a:hover { color: var(--lp-ink); }
.lp-hero__crumb-sep { opacity: .45; }
.lp-hero__crumb [aria-current="page"] { color: var(--lp-ink); font-weight: 600; }

.lp-hero__head {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-bottom: 4px;
}
.lp-hero__head-num {
  font-family: var(--font-en);
  font-size: clamp(72px, 9vw, 132px);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.05em;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--lp-ink);
  display: block;
}
.lp-hero__head-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
}
.lp-hero__head-cat {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lp-ink);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.lp-hero__head-cat::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--lp-yellow-deep);
}
.lp-hero__head-jp {
  font-family: var(--font-serif-ja);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lp-ink);
  margin-top: 2px;
}

.lp-hero__title {
  font-family: var(--font-serif-ja);
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.36;
  color: var(--lp-ink);
  margin: 0;
}
.lp-hero__title-line { display: block; }
.lp-hero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .08em .04em;
  z-index: 1;
}
.lp-hero__title em::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 6%;
  height: 36%;
  background: var(--lp-yellow);
  border-radius: 2px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: lp-em-fill 1.1s 1.05s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes lp-em-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.lp-hero__lead {
  font-size: 15.5px;
  line-height: 2.1;
  color: var(--text);
  max-width: 540px;
  letter-spacing: .02em;
}

/* ヒーロー右カラム：マスコット + メタ + カラーチップ */
.lp-hero__right {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 28px;
  padding-top: 12px;
}

.lp-hero__mascot-wrap {
  position: relative;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 1 / 1.1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-hero__mascot-frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,245,180,.55), transparent 65%);
}
.lp-hero__mascot-frame::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed var(--lp-rule);
  border-radius: 50%;
}
.lp-hero__mascot {
  position: relative;
  width: 78%;
  filter: drop-shadow(0 14px 22px rgba(20,20,20,.18));
  z-index: 2;
}
.lp-hero__mascot-stamp {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--lp-yellow);
  color: var(--lp-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.3;
  text-align: center;
  transform: rotate(-12deg);
  z-index: 3;
  box-shadow: 0 8px 18px rgba(20,20,20,.16);
}
.lp-hero__mascot-stamp strong {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  display: block;
}

.lp-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: 100%;
  padding: 22px 24px;
  background: var(--lp-ink);
  color: var(--white);
  border-radius: 4px;
  box-shadow: var(--lp-shadow-card);
}
.lp-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lp-hero__stat:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.12);
  padding-right: 16px;
}
.lp-hero__stat-num {
  font-family: var(--font-en);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--lp-yellow);
  line-height: 1;
}
.lp-hero__stat-num small {
  font-size: .55em;
  font-weight: 700;
  margin-left: 2px;
  letter-spacing: .04em;
}
.lp-hero__stat-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  color: rgba(255,255,255,.72);
  margin-top: 2px;
}

/* スクロールキュー */
.lp-hero__scroll {
  position: absolute;
  bottom: 24px;
  right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  font-family: var(--font-en);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--lp-ink);
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.lp-hero__scroll::after {
  content: "";
  width: 1px;
  height: 64px;
  background: var(--lp-ink);
  position: relative;
  overflow: hidden;
  animation: lp-scroll-line 2.4s var(--ease) infinite;
}
@keyframes lp-scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ===== SYMPTOMS (lp-symptoms / 症状) ===== */
.lp-symptoms {
  background: var(--lp-paper);
  padding: 130px 40px 130px;
  position: relative;
  overflow: hidden;
}

.lp-symptoms__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 60px;
  align-items: start;
}

.lp-symptoms__head {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.lp-symptoms__counter {
  margin-top: 20px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--text-sub);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 999px;
  background: var(--white);
}
.lp-symptoms__counter strong {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 14px;
  color: var(--lp-ink);
}

.lp-symptoms__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  list-style: none;
  padding: 0;
}

.lp-symptom {
  position: relative;
  background: var(--white);
  border: 1px solid var(--lp-rule);
  padding: 26px 24px 24px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lp-symptom:hover {
  transform: translateY(-4px) rotate(-.4deg);
  box-shadow: var(--lp-shadow-card);
}
.lp-symptom:nth-child(odd) { transform: rotate(-.3deg); }
.lp-symptom:nth-child(even) { transform: rotate(.3deg); }
.lp-symptom:nth-child(odd):hover { transform: translateY(-4px) rotate(-.6deg); }
.lp-symptom:nth-child(even):hover { transform: translateY(-4px) rotate(.6deg); }

/* 大判のずらしカード（左1個目を縦に大きく） */
.lp-symptom--feature {
  grid-row: span 2;
  background: var(--lp-ink);
  color: var(--white);
  padding: 36px 30px 32px;
}
.lp-symptom--feature .lp-symptom__id {
  color: var(--lp-yellow);
  border-color: rgba(248,223,0,.4);
}
.lp-symptom--feature .lp-symptom__text {
  color: var(--white);
  font-size: 17px;
}
.lp-symptom--feature .lp-symptom__check {
  background: var(--lp-yellow);
  color: var(--lp-ink);
}

.lp-symptom__id {
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lp-yellow-deep);
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 999px;
  align-self: flex-start;
}

.lp-symptom__text {
  font-family: var(--font-serif-ja);
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--lp-ink);
  flex: 1;
  letter-spacing: .015em;
}

.lp-symptom__check {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lp-yellow);
  color: var(--lp-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  align-self: flex-end;
}

/* ===== SHIELD (lp-shield / 必要性) ===== */
.lp-shield {
  background: var(--lp-ink);
  color: var(--white);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-shield::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><circle cx='300' cy='300' r='280' stroke='%23f8df00' stroke-width='1' fill='none' opacity='.16'/><circle cx='300' cy='300' r='220' stroke='%23f8df00' stroke-width='1' fill='none' opacity='.12'/><circle cx='300' cy='300' r='160' stroke='%23f8df00' stroke-width='1' fill='none' opacity='.08'/></svg>");
  background-position: right -120px center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: .8;
}
.lp-shield__bg-text {
  position: absolute;
  top: 50px;
  right: -10px;
  font-family: var(--font-en);
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.06);
  line-height: .85;
  pointer-events: none;
  z-index: 0;
}

.lp-shield__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: start;
  z-index: 2;
}

.lp-shield__statement .lp-section__num {
  -webkit-text-stroke-color: rgba(255,255,255,.22);
}
.lp-shield__statement .lp-section__cat {
  color: var(--white);
}
.lp-shield__statement .lp-section__cat::before {
  background: var(--lp-yellow);
}
.lp-shield__statement .lp-section__title {
  color: var(--white);
  font-size: clamp(32px, 4.8vw, 56px);
}
.lp-shield__statement .lp-section__lead {
  color: rgba(255,255,255,.8);
}

.lp-shield__points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.lp-shield-point {
  position: relative;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--lp-yellow);
  padding: 22px 26px 22px 90px;
  border-radius: 4px;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.lp-shield-point:hover {
  background: rgba(255,255,255,.08);
  transform: translateX(4px);
}
.lp-shield-point__num {
  position: absolute;
  left: 26px;
  top: 22px;
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--lp-yellow);
  line-height: 1;
}
.lp-shield-point__title {
  font-family: var(--font-serif-ja);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--white);
  margin-bottom: 8px;
  line-height: 1.5;
}
.lp-shield-point__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: rgba(255,255,255,.78);
  letter-spacing: .015em;
}

/* ===== PLANS (lp-plans / 料金プラン) ===== */
.lp-plans {
  background: var(--lp-paper);
  padding: 130px 40px;
  position: relative;
}

.lp-plans__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.lp-plans__tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 56px;
  position: relative;
  background: var(--white);
  border: 1px solid var(--lp-rule-strong);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  box-shadow: var(--lp-shadow-card-sm);
}
.lp-plans__tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 999px;
  font-family: inherit;
  color: var(--text-sub);
  transition: color .3s var(--ease), background .3s var(--ease);
}
.lp-plans__tab:hover { color: var(--lp-ink); }
.lp-plans__tab.is-active {
  background: var(--lp-ink);
  color: var(--white);
}
.lp-plans__tab-num {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .65;
}
.lp-plans__tab-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: var(--font-serif-ja);
}

.lp-plans__panel {
  display: none;
  animation: lp-fade-up .5s var(--ease);
}
.lp-plans__panel.is-active { display: block; }
@keyframes lp-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 設定条件バー（チラシ準拠：工期・施工内容・目安面積を大きく明示）
   「黒地×ビビッドイエロー」はコントラストが強すぎるとの指摘（2026-07-12）を受け、
   焙煎豆のような温かいエスプレッソブラウン×シャンパンゴールドに再設計。
   紙トーン・こだわり別カテゴリ色（テラコッタ／オーカー／セージ／ティール）と
   同じ「温かみのある落ち着いた色相」の家族に属させつつ、暗地パネルで
   「目立つ・大きめ」というクライアント要望は維持する。
   2026-07-12 追記：視認性の指摘（大数字・チップが見づらい）を受け、
   WCAGコントラスト比を実測の上でトークンを再調整（詳細は作業ログ参照）。
   全項目 4.5:1 以上（チップ背景vsバー背景は3:1以上）を実測で満たす。 ===== */
.page-lp {
  --lp-cond-bg: #3f2e21;        /* エスプレッソブラウン（従来よりわずかに深く。地色を落として文字とのコントラストを稼ぐ） */
  --lp-cond-bg-deep: #2f2318;   /* 陰影・タグ文字用のより深い色 */
  --lp-cond-accent: #f3cf95;    /* シャンパンゴールド（従来より明度を上げて大数字の視認性を改善。vs bg = 8.72:1） */
  --lp-cond-text: #e4d3c0;      /* キャプション(工期/施工内容/面積)用の不透明な暖色。vs bg = 8.85:1（旧: 半透明白は廃止） */
  --lp-cond-text-soft: #d9c6b1; /* ※注記・屋根注意書き用。vs bg = 7.80:1 */
  --lp-cond-chip-bg: #f7e7d3;   /* チップ背景（不透明の生成りクリームに変更。半透明頼みを廃止）。vs bg = 10.67:1 */
  --lp-cond-chip-text: #3c2c20; /* チップ文字（濃茶）。vs chip-bg = 11.01:1 */
}

.lp-plans__conditions {
  position: relative;
  margin: 0 0 28px;
  padding: 30px 28px 26px;
  background: var(--lp-cond-bg);
  border-radius: 6px;
  box-shadow: var(--lp-shadow-card);
}
.lp-plans__conditions-label {
  position: absolute;
  top: 0;
  left: 28px;
  transform: translateY(-50%);
  background: var(--lp-cond-accent);
  color: var(--lp-cond-bg-deep);
  font-family: var(--font-ja);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 6px 16px;
  border-radius: 4px;
  box-shadow: 0 6px 14px rgba(20,14,8,.24);
}
.lp-plans__conditions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.lp-plans__conditions-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-plans__conditions-item:not(:last-child) {
  padding-right: 28px;
  border-right: 1px solid rgba(228,211,192,.28);
}
.lp-plans__conditions-item--scope { flex: 1; min-width: 240px; }
.lp-plans__conditions-item-cap {
  font-family: var(--font-ja);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--lp-cond-text);
}
.lp-plans__conditions-item-value {
  font-family: var(--font-en);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--lp-cond-accent);
  line-height: 1;
  white-space: nowrap;
}
.lp-plans__conditions-item-value small {
  font-size: .5em;
  font-weight: 700;
  font-style: normal;
  letter-spacing: .02em;
  margin-left: 2px;
}
.lp-plans__conditions-item-note {
  font-size: 11px;
  font-weight: 600;
  color: var(--lp-cond-text-soft);
}

/* 施工内容チップ（チラシ同様、チップ間を＋記号で連結）
   2026-07-12: 半透明背景がバー地色と被り見づらいとの指摘を受け、不透明の生成りクリームに反転（濃茶文字）。 */
.lp-plans__conditions-chips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 10px; /* 折り返し時にチップ同士が重ならないよう行間を確保 */
}
.lp-plans__conditions-chips li {
  display: flex;
  align-items: center;
}
.lp-plans__conditions-chips li:not(:first-child)::before {
  content: "＋";
  color: var(--lp-cond-accent);
  font-weight: 800;
  font-size: 13px;
  margin: 0 10px;
}
.lp-plans__conditions-chips li span {
  font-family: var(--font-ja);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--lp-cond-chip-text);
  background: var(--lp-cond-chip-bg);
  border: 1px solid rgba(60,44,32,.12);
  border-radius: 999px;
  padding: 7px 16px;
  white-space: nowrap;
}

/* 屋根プラン専用注記（足場代別途） */
.lp-plans__conditions-caution {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dashed rgba(228,211,192,.24);
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-cond-text-soft);
}

.lp-plans__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  padding: 0;
}

.lp-plan {
  position: relative;
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-radius: 6px;
  padding: 0 24px 28px;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lp-plan:hover {
  transform: translateY(-6px);
  box-shadow: var(--lp-shadow-card);
}

/* カラーチップ（プラン上部のペンキ色） */
.lp-plan__chip {
  height: 14px;
  margin: 0 -24px 24px;
  border-radius: 6px 6px 0 0;
  position: relative;
}
.lp-plan__chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 60%);
  border-radius: inherit;
}

.lp-plan--featured {
  background: var(--lp-ink);
  color: var(--white);
  border-color: var(--lp-ink);
}
.lp-plan--featured::before {
  content: "おすすめ";
  position: absolute;
  top: -14px;
  right: 18px;
  background: var(--lp-yellow);
  color: var(--lp-ink);
  font-family: var(--font-serif-ja);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 5px 16px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 6px 14px rgba(20,20,20,.18);
}

.lp-plan__rank {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lp-yellow-deep);
}
.lp-plan--featured .lp-plan__rank { color: var(--lp-yellow); }

.lp-plan__name {
  font-family: var(--font-serif-ja);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--lp-ink);
  margin: 8px 0 18px;
  line-height: 1.4;
}
.lp-plan--featured .lp-plan__name { color: var(--white); }

.lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(0,0,0,.15);
}
.lp-plan--featured .lp-plan__price { border-bottom-color: rgba(255,255,255,.18); }

.lp-plan__price-from {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
}
.lp-plan--featured .lp-plan__price-from { color: rgba(255,255,255,.6); }

.lp-plan__price-num {
  font-family: var(--font-en);
  font-size: 38px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--lp-ink);
  line-height: 1;
  margin-left: 4px;
}
.lp-plan--featured .lp-plan__price-num { color: var(--white); }

/* 価格未確定プランの表示（価格確定後は price-from/num/unit の数値表記へ戻す） */
.lp-plan__price-tbd {
  font-family: var(--font-serif-ja);
  font-size: 18px;
  font-weight: 700;
  color: var(--lp-ink);
  line-height: 1.6;
}
.lp-plan--featured .lp-plan__price-tbd { color: var(--white); }

.lp-plan__price-unit {
  font-family: var(--font-serif-ja);
  font-size: 13px;
  font-weight: 700;
  color: var(--lp-ink);
  margin-left: 4px;
}
.lp-plan--featured .lp-plan__price-unit { color: var(--white); }

.lp-plan__specs {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lp-plan__specs li {
  font-size: 12px;
  font-weight: 600;
  color: var(--lp-ink);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
.lp-plan__specs li::before {
  content: "";
  width: 12px;
  height: 1.5px;
  background: var(--lp-yellow-deep);
  flex-shrink: 0;
}
.lp-plan--featured .lp-plan__specs li { color: rgba(255,255,255,.85); }
.lp-plan--featured .lp-plan__specs li::before { background: var(--lp-yellow); }

.lp-plan__desc {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text);
  letter-spacing: .015em;
  margin: 0;
  flex: 1;
}
.lp-plan--featured .lp-plan__desc { color: rgba(255,255,255,.78); }

/* ===== プラン カード拡充（チラシ準拠：こだわり別カテゴリ／特徴／性能／使用材料） ===== */

/* こだわり別カテゴリ色（チラシの配色を紙トーンに調整） */
.page-lp {
  --lp-cat-weather: #a9524b; /* 耐候性 */
  --lp-cat-clean:   #c07d33; /* キレイ */
  --lp-cat-comfort: #5f8757; /* 快適さ */
  --lp-cat-both:    #4a8079; /* どっちも */
}
.lp-plan--weather { --plan-accent: var(--lp-cat-weather); }
.lp-plan--clean   { --plan-accent: var(--lp-cat-clean); }
.lp-plan--comfort { --plan-accent: var(--lp-cat-comfort); }
.lp-plan--both    { --plan-accent: var(--lp-cat-both); }

/* チップ色をカテゴリ色に連動 */
.lp-plan__chip { background: var(--plan-accent, #a39173); }

/* ターゲットバッジ（〜にこだわりたい方に） */
.lp-plan__target {
  align-self: flex-start;
  margin: 0 0 12px;
  background: var(--plan-accent, var(--lp-ink));
  color: var(--white);
  font-family: var(--font-ja); /* ゴシック体（周囲の明朝と差をつけ視認性・注目度を上げる） */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  padding: 5px 12px;
  border-radius: 3px;
}

/* 特徴キャッチ（チラシ本文） */
.lp-plan__catch {
  font-family: var(--font-serif-ja);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
  letter-spacing: .02em;
  color: var(--lp-ink);
  margin: 0 0 18px;
}

/* 性能アイコン行（防水／美観／遮熱） */
.lp-plan__perf {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  gap: 8px;
}
.lp-plan__perf-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-rule);
  border-radius: 5px;
}
.lp-plan__perf-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text-sub);
}
.lp-plan__perf-mark {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.lp-plan__perf-mark--best { color: var(--plan-accent, var(--lp-yellow-deep)); }
.lp-plan__perf-mark--good { color: var(--lp-ink); }
.lp-plan__perf-mark--na   { color: rgba(20,20,20,.28); }

/* 使用材料（メーカー・製品名・塗料種別） */
.lp-plan__material {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--lp-paper);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lp-plan__material-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--plan-accent, var(--lp-yellow-deep));
}
.lp-plan__material-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--lp-ink);
}
.lp-plan__material-type {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-sub);
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
  padding: 2px 10px;
}

/* 性能アイコンの凡例 */
.lp-plans__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 28px 0 0;
  padding: 13px 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-radius: 6px;
}
.lp-plans__legend-title {
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--lp-ink);
}
.lp-plans__legend-item { display: inline-flex; align-items: center; gap: 6px; }
.lp-plans__legend b { font-size: 15px; }
.lp-plans__legend .is-best { color: var(--lp-yellow-deep); }
.lp-plans__legend .is-na { color: rgba(20,20,20,.32); }

.lp-plans__note {
  margin-top: 36px;
  padding: 20px 26px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-sub);
  background: var(--white);
  border: 1px dashed var(--lp-rule-strong);
  border-radius: 6px;
}

/* ===== CRAFT (lp-craft / 塗料技術) ===== */
.lp-craft {
  background: var(--lp-paper-mid);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-craft__bg-text {
  position: absolute;
  top: 80px;
  right: -40px;
  font-family: var(--font-en);
  font-size: clamp(140px, 18vw, 280px);
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,20,20,.07);
  line-height: .85;
  pointer-events: none;
  z-index: 0;
}

.lp-craft__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
}

.lp-craft__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.lp-craft-item {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr 2fr;
  gap: 40px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--lp-rule-strong);
  transition: background .3s var(--ease);
}
.lp-craft-item:last-child { border-bottom: 1px solid var(--lp-rule-strong); }
.lp-craft-item:hover { background: rgba(255,255,255,.5); }

.lp-craft-item__num {
  font-family: var(--font-en);
  font-size: 56px;
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--lp-ink);
  line-height: 1;
}

.lp-craft-item__title {
  font-family: var(--font-serif-ja);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lp-ink);
  line-height: 1.5;
  position: relative;
  padding-left: 22px;
}
.lp-craft-item__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .35em;
  bottom: .35em;
  width: 4px;
  background: var(--lp-yellow);
  border-radius: 2px;
}

.lp-craft-item__text {
  font-size: 14px;
  line-height: 2;
  color: var(--text);
  letter-spacing: .015em;
}
.lp-craft-item__text small {
  display: block;
  margin-top: 6px;
  color: var(--text-sub);
  font-size: 11.5px;
  font-weight: 500;
}

/* ===== FLOW (lp-flow / 流れ) ===== */
.lp-flow {
  background: var(--lp-paper);
  padding: 130px 40px;
  position: relative;
}

.lp-flow__inner {
  max-width: 920px;
  margin: 0 auto;
}

.lp-flow__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lp-flow__list::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background-image: linear-gradient(to bottom, var(--lp-yellow) 50%, transparent 0);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  opacity: .65;
}

.lp-flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 30px;
  padding: 18px 0 18px 0;
  align-items: flex-start;
}

.lp-flow-step__num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--lp-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--lp-ink);
  position: relative;
  z-index: 1;
}
.lp-flow-step__num::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed var(--lp-rule-strong);
}

.lp-flow-step__body {
  background: var(--white);
  border: 1px solid var(--lp-rule);
  padding: 22px 28px;
  border-radius: 6px;
  flex: 1;
  margin-top: 4px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lp-flow-step:hover .lp-flow-step__body {
  transform: translateX(4px);
  box-shadow: var(--lp-shadow-card-sm);
}
.lp-flow-step__title {
  font-family: var(--font-serif-ja);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lp-ink);
  margin-bottom: 6px;
  line-height: 1.5;
}
.lp-flow-step__text {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text);
  margin: 0;
}

/* ===== WORKS (lp-works / 施工事例) ===== */
.lp-works {
  background: var(--lp-paper-deep);
  padding: 130px 40px;
  position: relative;
}

.lp-works__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.lp-works__head-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 56px;
  gap: 40px;
  flex-wrap: wrap;
}

.lp-works__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 28px;
}

.lp-work {
  position: relative;
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lp-work:hover {
  transform: translateY(-4px);
  box-shadow: var(--lp-shadow-card);
}

.lp-work--feature {
  grid-row: span 2;
}

.lp-work__img {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--lp-paper-mid);
}
.lp-work--feature .lp-work__img {
  aspect-ratio: auto;
  flex: 1;
  min-height: 460px;
}

.lp-work__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.lp-work:hover .lp-work__img img { transform: scale(1.05); }

.lp-work__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--lp-ink);
  color: var(--white);
  padding: 6px 14px;
  border-radius: 999px;
}
.lp-work__cat-jp {
  font-family: var(--font-serif-ja);
  font-size: 12px;
  margin-left: 6px;
  letter-spacing: .04em;
  text-transform: none;
}

.lp-work__body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lp-work__num {
  font-family: var(--font-en);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--lp-yellow-deep);
}
.lp-work__title {
  font-family: var(--font-serif-ja);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.55;
  color: var(--lp-ink);
}
.lp-work--feature .lp-work__title { font-size: 22px; }
.lp-work__meta {
  font-size: 12.5px;
  color: var(--text-sub);
  letter-spacing: .04em;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.lp-work__meta span { display: flex; align-items: center; gap: 6px; }
.lp-work__meta span::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--lp-yellow);
  border-radius: 50%;
}

.lp-section__cta {
  text-align: center;
  margin-top: 56px;
}

/* LPボタン */
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 38px;
  background: var(--lp-ink);
  color: var(--white);
  font-family: var(--font-serif-ja);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: .08em;
  border-radius: 4px;
  transition: background .3s var(--ease), transform .3s var(--ease), color .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.lp-btn::after {
  content: "→";
  font-family: var(--font-en);
  font-size: 16px;
  transition: transform .3s var(--ease);
}
.lp-btn:hover { background: var(--lp-yellow); color: var(--lp-ink); transform: translateY(-2px); }
.lp-btn:hover::after { transform: translateX(4px); }

.lp-btn--outline {
  background: transparent;
  color: var(--lp-ink);
  border: 1.5px solid var(--lp-ink);
}
.lp-btn--outline:hover { background: var(--lp-ink); color: var(--white); }

/* ===== FAQ (lp-faq) ===== */
.lp-faq {
  background: var(--lp-paper);
  padding: 130px 40px;
}
.lp-faq__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.lp-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
}

.lp-faq-item {
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color .3s var(--ease);
  height: fit-content;
}
.lp-faq-item[open] {
  border-color: var(--lp-yellow-deep);
}

.lp-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 56px 22px 64px;
  font-family: var(--font-serif-ja);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--lp-ink);
  position: relative;
  line-height: 1.65;
  letter-spacing: .015em;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::before {
  content: "Q.";
  position: absolute;
  left: 24px;
  top: 22px;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  color: var(--lp-yellow-deep);
  line-height: 1;
}
.lp-faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 30px;
  width: 14px;
  height: 14px;
  background-image: linear-gradient(var(--lp-ink), var(--lp-ink)), linear-gradient(var(--lp-ink), var(--lp-ink));
  background-size: 14px 1.5px, 1.5px 14px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform .3s var(--ease);
}
.lp-faq-item[open] summary::after {
  background-size: 14px 1.5px, 0 0;
}

.lp-faq-item__body {
  padding: 0 24px 22px 64px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--text);
  position: relative;
}
.lp-faq-item__body::before {
  content: "A.";
  position: absolute;
  left: 24px;
  top: -2px;
  font-family: var(--font-en);
  font-style: italic;
  font-weight: 800;
  font-size: 22px;
  color: var(--lp-ink);
  line-height: 1;
}
.lp-faq-item__body small {
  display: block;
  margin-top: 8px;
  color: var(--text-sub);
  font-size: 11.5px;
}

/* ===== SHIELD ライトバリアント (lp-shield--light) =====
   古民家「想い」など、白基調で4ポイント＋ステートメントの構成 */
.lp-shield--light {
  background: var(--lp-paper-mid);
  color: var(--lp-ink);
}
.lp-shield--light::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><circle cx='300' cy='300' r='280' stroke='%231a1a1a' stroke-width='1' fill='none' opacity='.08'/><circle cx='300' cy='300' r='220' stroke='%231a1a1a' stroke-width='1' fill='none' opacity='.06'/><circle cx='300' cy='300' r='160' stroke='%231a1a1a' stroke-width='1' fill='none' opacity='.04'/></svg>");
}
.lp-shield--light .lp-shield__bg-text {
  -webkit-text-stroke: 1px rgba(20,20,20,.07);
}
.lp-shield--light .lp-shield__statement .lp-section__num {
  -webkit-text-stroke-color: rgba(20,20,20,.18);
}
.lp-shield--light .lp-shield__statement .lp-section__cat {
  color: var(--lp-ink);
}
.lp-shield--light .lp-shield__statement .lp-section__cat::before {
  background: var(--lp-yellow-deep);
}
.lp-shield--light .lp-shield__statement .lp-section__title {
  color: var(--lp-ink);
}
.lp-shield--light .lp-shield__statement .lp-section__lead {
  color: var(--text);
}
.lp-shield--light .lp-shield-point {
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-left: 3px solid var(--lp-yellow);
}
.lp-shield--light .lp-shield-point:hover {
  background: var(--white);
  box-shadow: var(--lp-shadow-card-sm);
}
.lp-shield--light .lp-shield-point__num {
  color: var(--lp-yellow-deep);
}
.lp-shield--light .lp-shield-point__title {
  color: var(--lp-ink);
}
.lp-shield--light .lp-shield-point__text {
  color: var(--text);
}
.lp-shield--light .lp-shield-point__text small {
  color: var(--text-sub);
}

/* ===== SHIELD デザインバリアント (lp-shield--design / 外構ページ用) =====
   背景に外構画像を配置 + スクロール連動パララックス */
.lp-shield--design {
  background-color: var(--lp-ink);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lp-shield--design::before {
  display: block;
  content: "";
  position: absolute;
  top: -12%;
  left: 0;
  right: 0;
  bottom: -12%;
  width: auto;
  height: auto;
  background-image:
    linear-gradient(rgba(12,12,12,.74), rgba(12,12,12,.86)),
    url("assets/images/gaikou.jpg");
  background-size: auto, cover;
  background-position: 0 0, center center;
  background-repeat: no-repeat, no-repeat;
  z-index: -1;
  opacity: 1;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
  pointer-events: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-shield--design::before {
    transform: none;
    will-change: auto;
  }
}
.lp-shield--design .lp-shield__inner,
.lp-shield--design .lp-shield__bg-text {
  position: relative;
  z-index: 1;
}
.lp-shield--design .lp-shield__bg-text {
  -webkit-text-stroke: 1px rgba(255,255,255,.10);
}

/* ===== SCOPE (lp-scope / 対応工事範囲チェックリスト) ===== */
.lp-scope {
  background: var(--lp-paper);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-scope__inner {
  max-width: 1240px;
  margin: 0 auto;
}

.lp-scope__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1.5px solid var(--lp-ink);
  border-left: 1px solid var(--lp-rule);
  background: var(--white);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--lp-shadow-card-sm);
}

.lp-scope-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 22px 64px;
  border-right: 1px solid var(--lp-rule);
  border-bottom: 1px solid var(--lp-rule);
  transition: background .3s var(--ease);
}
.lp-scope-item:hover { background: var(--lp-paper); }
.lp-scope-item:nth-child(3n) { border-right: none; }

.lp-scope-item::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp-yellow) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12'><path d='M1.5 6 L5 9.5 L12.5 1.5' stroke='%231a1a1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") center / 14px no-repeat;
  flex-shrink: 0;
}

.lp-scope-item__num {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--lp-yellow-deep);
  margin-right: 4px;
}

.lp-scope-item__text {
  font-family: var(--font-serif-ja);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--lp-ink);
  letter-spacing: .015em;
}

.lp-scope__note {
  margin-top: 28px;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text-sub);
  text-align: center;
  letter-spacing: .02em;
}

/* ===== CONTACT BANNER (LP上書き) ===== */
body.page-lp .contact { background: var(--lp-ink); }
body.page-lp .contact::before { color: rgba(255,255,255,.045); }
body.page-lp .contact__label {
  color: var(--lp-yellow);
  opacity: 1;
  font-weight: 700;
  letter-spacing: .28em;
}
body.page-lp .contact__heading {
  font-family: var(--font-serif-ja);
  color: var(--white);
  font-weight: 800;
  letter-spacing: .02em;
}
body.page-lp .contact__text {
  color: rgba(255,255,255,.72);
  opacity: 1;
}
body.page-lp .contact__mail {
  background: var(--lp-yellow);
  color: var(--lp-ink);
  font-weight: 800;
  letter-spacing: .06em;
  border: 1px solid var(--lp-yellow);
}
body.page-lp .contact__mail:hover {
  background: transparent;
  color: var(--lp-yellow);
}
body.page-lp .contact__mail-arrow { font-weight: 600; }
body.page-lp .contact__mascot { opacity: .9; }

/* ============ LP RESPONSIVE ============ */
@media (max-width: 1024px) {
  .lp-symptoms__inner { grid-template-columns: 1fr; gap: 40px; }
  .lp-symptoms__head { position: static; }
  .lp-shield__inner { grid-template-columns: 1fr; gap: 48px; }
  .lp-plans__list { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .lp-works__list { grid-template-columns: 1fr; }
  .lp-work--feature { grid-row: auto; }
  .lp-work--feature .lp-work__img { aspect-ratio: 16/11; min-height: 0; flex: none; }
  .lp-faq__list { grid-template-columns: 1fr; }
  .lp-scope__list { grid-template-columns: repeat(2, 1fr); }
  .lp-scope-item:nth-child(3n) { border-right: 1px solid var(--lp-rule); }
  .lp-scope-item:nth-child(2n) { border-right: none; }
}

@media (max-width: 760px) {
  .lp-hero { padding: calc(var(--header-h) + 56px) 22px 100px; }
  .lp-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .lp-hero__bg-text { font-size: clamp(140px, 38vw, 240px); bottom: -1.5vw; }
  /* SPは装飾スプラッシュを隅へ退避・縮小して見出しとの干渉を防ぐ */
  .lp-hero__splash--top-right { width: 120px; top: calc(var(--header-h) + 12px); right: -34px; opacity: .5; }
  .lp-hero__splash--mid-left { display: none; }
  .lp-hero__head { gap: 14px; }
  .lp-hero__title { font-size: clamp(32px, 8.4vw, 50px); line-height: 1.4; }
  .lp-hero__right { align-items: flex-start; gap: 24px; }
  .lp-hero__mascot-wrap { width: 190px; align-self: center; }
  .lp-hero__stats { padding: 18px 20px; gap: 12px; }
  .lp-hero__stat:not(:last-child) { padding-right: 12px; }
  .lp-hero__stat-num { font-size: 22px; }
  .lp-hero__stat-label { font-size: 10.5px; }
  .lp-hero__scroll { display: none; }

  .lp-symptoms,
  .lp-shield,
  .lp-plans,
  .lp-craft,
  .lp-flow,
  .lp-works,
  .lp-faq { padding: 88px 22px; }

  .lp-section__head,
  .lp-section__head--center { margin-bottom: 44px; }
  .lp-section__num { font-size: clamp(56px, 18vw, 96px); }

  .lp-symptoms__list { grid-template-columns: 1fr; }
  .lp-symptom { transform: none !important; padding: 22px 20px 20px; }
  .lp-symptom--feature { grid-row: auto; padding: 28px 24px; }

  .lp-shield__points { gap: 12px; }
  .lp-shield-point { padding: 56px 22px 22px; }
  .lp-shield-point__num { left: 22px; top: 18px; }

  .lp-plans__tabs { width: 100%; padding: 5px; }
  .lp-plans__tab { flex: 1; padding: 11px 10px; justify-content: center; gap: 8px; min-width: 0; }
  .lp-plans__tab-num { font-size: 10px; }
  .lp-plans__tab-name { font-size: 13px; white-space: nowrap; }
  .lp-plans__list { grid-template-columns: 1fr; gap: 16px; }
  .lp-plan { padding: 0 22px 24px; }
  .lp-plan__chip { margin: 0 -22px 20px; }

  /* 設定条件バー：SPは縦積み（区切り線も右→下に変更） */
  .lp-plans__conditions { padding: 24px 20px 22px; margin-bottom: 22px; }
  .lp-plans__conditions-label { left: 20px; font-size: 11.5px; padding: 5px 14px; }
  .lp-plans__conditions-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .lp-plans__conditions-item { width: 100%; }
  .lp-plans__conditions-item--scope { min-width: 0; }
  .lp-plans__conditions-item:not(:last-child) {
    padding-right: 0;
    padding-bottom: 16px;
    border-right: none;
    border-bottom: 1px dashed rgba(228,211,192,.28);
  }
  .lp-plans__conditions-item-value { font-size: 24px; }
  .lp-plans__conditions-chips li span { font-size: 12.5px; padding: 6px 13px; }

  .lp-craft-item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 26px 0;
  }
  .lp-craft-item__num { font-size: 38px; }

  .lp-flow__list::before { left: 22px; }
  .lp-flow-step { grid-template-columns: 44px 1fr; gap: 18px; }
  .lp-flow-step__num { width: 44px; height: 44px; font-size: 14px; }
  .lp-flow-step__body { padding: 18px 22px; }

  .lp-works__list { gap: 20px; }
  .lp-work__body { padding: 20px 22px 22px; }
  .lp-work--feature .lp-work__title { font-size: 18px; }

  .lp-faq__list { gap: 12px; }
  .lp-faq-item summary { padding: 20px 48px 20px 56px; font-size: 14px; }
  .lp-faq-item summary::before { left: 20px; top: 20px; font-size: 20px; }
  .lp-faq-item summary::after { right: 18px; top: 28px; }
  .lp-faq-item__body { padding: 0 22px 20px 56px; font-size: 13px; }
  .lp-faq-item__body::before { left: 20px; font-size: 20px; }

  .lp-scope { padding: 88px 22px; }
  .lp-scope__list { grid-template-columns: 1fr; }
  .lp-scope-item { padding: 18px 20px 18px 56px; }
  .lp-scope-item:nth-child(3n),
  .lp-scope-item:nth-child(2n) { border-right: none; }
  .lp-scope-item::before { left: 18px; width: 22px; height: 22px; background-size: 12px; }
  .lp-scope-item__text { font-size: 14px; }
}

/* ============================================================
   NEWS / お知らせ (一覧 + 詳細)
   ============================================================ */

/* ===== Page subhero (news/works/about など、Heroほどリッチでないページ) ===== */
.lp-pagehero {
  position: relative;
  padding: calc(var(--header-h) + 80px) 40px 80px;
  background: var(--lp-paper);
  overflow: hidden;
  border-bottom: 1px solid var(--lp-rule);
  isolation: isolate;
}
.lp-pagehero__bg-text {
  position: absolute;
  right: -2%;
  bottom: -2.5vw;
  font-family: var(--font-en);
  font-size: clamp(140px, 22vw, 320px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20,20,20,.07);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}
.lp-pagehero__inner {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  z-index: 2;
}
.lp-pagehero__crumb {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.lp-pagehero__crumb a { color: var(--text-sub); transition: color .25s var(--ease); }
.lp-pagehero__crumb a:hover { color: var(--lp-ink); }
.lp-pagehero__crumb-sep { opacity: .45; }
.lp-pagehero__crumb [aria-current="page"] { color: var(--lp-ink); font-weight: 600; }
.lp-pagehero__cat {
  font-family: var(--font-en);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--lp-ink);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.lp-pagehero__cat::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--lp-yellow-deep);
}
.lp-pagehero__title {
  font-family: var(--font-serif-ja);
  font-size: clamp(32px, 4.6vw, 52px);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.45;
  color: var(--lp-ink);
  margin-bottom: 18px;
}
.lp-pagehero__title em {
  font-style: normal;
  position: relative;
  display: inline-block;
  padding: 0 .08em .04em;
  z-index: 1;
}
.lp-pagehero__title em::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 6%;
  height: 36%;
  background: var(--lp-yellow);
  border-radius: 2px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: lp-em-fill 1.1s 1.05s cubic-bezier(.65, 0, .35, 1) forwards;
}
.lp-pagehero__lead {
  font-size: 15px;
  line-height: 2.05;
  color: var(--text);
  max-width: 720px;
  letter-spacing: .015em;
}

/* ===== Filter pills (LPページ統一スタイル) ===== */
.lp-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.lp-filter__btn {
  appearance: none;
  border: 1.5px solid var(--lp-rule-strong);
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--lp-ink);
  padding: 10px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lp-filter__btn:hover {
  background: var(--lp-paper-mid);
  border-color: var(--lp-ink);
}
.lp-filter__btn.is-active {
  background: var(--lp-ink);
  color: var(--white);
  border-color: var(--lp-ink);
}

/* ===== News list (お知らせ一覧の横長リスト) ===== */
.lp-news {
  background: var(--lp-paper);
  padding: 88px 40px 130px;
}
.lp-news__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.lp-news__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--lp-rule-strong);
}
.lp-news-item {
  border-bottom: 1px solid var(--lp-rule);
}
.lp-news-item__link {
  display: grid;
  grid-template-columns: 120px 130px 1fr 32px;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  color: var(--lp-ink);
  text-decoration: none;
  transition: background .25s var(--ease);
}
.lp-news-item__link:hover {
  background: var(--white);
}
.lp-news-item__date {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--lp-ink);
  white-space: nowrap;
}
.lp-news-item__cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif-ja);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--lp-rule-strong);
  background: var(--white);
  white-space: nowrap;
  width: fit-content;
}
/* カテゴリ別カラー */
.lp-news-item__cat--info { background: var(--lp-yellow); border-color: var(--lp-yellow); color: var(--lp-ink); }
.lp-news-item__cat--holiday { background: #f0ece0; border-color: #c7bda4; color: #6b5d3a; }
.lp-news-item__cat--campaign { background: var(--lp-ink); border-color: var(--lp-ink); color: var(--lp-yellow); }
.lp-news-item__cat--blog { background: var(--white); border-color: var(--lp-rule-strong); color: var(--lp-ink); }
.lp-news-item__cat--media { background: #eef2f0; border-color: #aebcb5; color: #3f5a4e; }

.lp-news-item__title {
  font-family: var(--font-serif-ja);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--lp-ink);
  margin: 0;
  letter-spacing: .015em;
}
.lp-news-item__arrow {
  font-family: var(--font-en);
  font-size: 18px;
  color: var(--lp-ink);
  text-align: center;
  transition: transform .3s var(--ease);
}
.lp-news-item__link:hover .lp-news-item__arrow { transform: translateX(6px); }

/* ===== LP pagination ===== */
.lp-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 56px;
}
.lp-pagination a,
.lp-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-ink);
  border: 1.5px solid var(--lp-rule);
  border-radius: 4px;
  background: var(--white);
  text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.lp-pagination a:hover {
  background: var(--lp-ink);
  color: var(--white);
  border-color: var(--lp-ink);
}
.lp-pagination .is-current {
  background: var(--lp-ink);
  color: var(--white);
  border-color: var(--lp-ink);
}
.lp-pagination .is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* ===== Article (詳細ページ本文タイポグラフィ) ===== */
.lp-article {
  background: var(--lp-paper);
  padding: 88px 40px 130px;
}
.lp-article__wrap {
  max-width: 800px;
  margin: 0 auto;
}
.lp-article__head {
  text-align: left;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--lp-rule);
}
.lp-article__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.lp-article__date {
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sub);
  letter-spacing: .04em;
}
/* .lp-article__cat はマーカーのみ。配色は併用する .lp-news-item__cat--{カテゴリ} に委譲 */
.lp-article__title {
  font-family: var(--font-serif-ja);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: .015em;
  line-height: 1.5;
  color: var(--lp-ink);
}

/* アイキャッチ画像 */
.lp-article__featured {
  margin: 0 0 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--lp-rule);
  aspect-ratio: 16/9;
  background: var(--lp-paper-mid);
  position: relative;
}
.lp-article__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 本文プローズ */
.lp-article__body {
  font-size: 15px;
  line-height: 2.05;
  color: var(--text);
  letter-spacing: .015em;
}
.lp-article__body > * + * { margin-top: 1.4em; }
.lp-article__body h2 {
  font-family: var(--font-serif-ja);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 800;
  color: var(--lp-ink);
  margin-top: 2.4em;
  padding: 14px 0 14px 22px;
  border-left: 4px solid var(--lp-yellow);
  line-height: 1.5;
  letter-spacing: .02em;
}
.lp-article__body h3 {
  font-family: var(--font-serif-ja);
  font-size: 18px;
  font-weight: 800;
  color: var(--lp-ink);
  margin-top: 2em;
  line-height: 1.55;
  letter-spacing: .02em;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--lp-rule-strong);
}
.lp-article__body p { color: var(--text); }
.lp-article__body strong { color: var(--lp-ink); font-weight: 700; }
.lp-article__body a {
  color: var(--lp-ink);
  text-decoration: underline;
  text-decoration-color: var(--lp-yellow-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lp-article__body a:hover { background: var(--lp-yellow-soft); }
.lp-article__body ul,
.lp-article__body ol {
  padding-left: 1.5em;
}
.lp-article__body ul li,
.lp-article__body ol li {
  margin-bottom: .5em;
}
.lp-article__body ul li { list-style: disc; }
.lp-article__body ol li { list-style: decimal; }
.lp-article__body blockquote {
  margin: 1.6em 0;
  padding: 18px 24px;
  background: var(--white);
  border-left: 3px solid var(--lp-yellow);
  font-size: 14.5px;
  color: var(--lp-ink);
  font-style: normal;
  line-height: 1.95;
}
.lp-article__body figure {
  margin: 1.8em 0;
}
.lp-article__body figure img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--lp-rule);
}
.lp-article__body figcaption {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-sub);
  text-align: center;
  letter-spacing: .04em;
}

/* 記事フット: 戻るボタン + 前後ナビ */
.lp-article__foot {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--lp-rule);
}
.lp-article__back {
  text-align: center;
  margin-bottom: 32px;
}
.lp-article__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.lp-article-nav-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--lp-rule);
  border-radius: 6px;
  text-decoration: none;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.lp-article-nav-link:hover {
  background: var(--lp-paper-mid);
  border-color: var(--lp-rule-strong);
}
.lp-article-nav-link--prev { text-align: left; }
.lp-article-nav-link--next { text-align: right; }
.lp-article-nav-link__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.lp-article-nav-link__title {
  font-family: var(--font-serif-ja);
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-ink);
  line-height: 1.55;
  letter-spacing: .015em;
}
.lp-article-nav-link.is-disabled {
  opacity: .35;
  pointer-events: none;
}

/* ===== Header nav: お知らせ・施工実績 追加対応（PCのみ。SPオーバーレイへ漏らさない） ===== */
@media (min-width: 901px) {
  .header__nav ul { gap: 28px; }
  .header__nav .header__cta { padding: 9px 22px; }
}

/* ============ NEWS / ARTICLE RESPONSIVE ============ */
@media (max-width: 900px) {
  .lp-pagehero { padding: calc(var(--header-h) + 56px) 22px 60px; }
  .lp-pagehero__title { font-size: clamp(26px, 7vw, 36px); }
  .lp-news { padding: 64px 22px 100px; }
  .lp-news-item__link {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 4px;
  }
  .lp-news-item__arrow { display: none; }
  .lp-news-item__title { font-size: 15px; }

  .lp-article { padding: 64px 22px 100px; }
  .lp-article__body { font-size: 14.5px; }
  .lp-article__nav { grid-template-columns: 1fr; }
  .lp-article-nav-link--next { text-align: left; }
}

/* ===== DIAGNOSIS (lp-diagnosis / 外壁劣化度チェック) ===== */
.lp-diagnosis {
  background: var(--lp-paper-mid);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-diagnosis__inner {
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}
.lp-diagnosis__list {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-diagnosis-item {
  background: var(--white);
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.06);
  border-top: 6px solid var(--lp-rule-strong);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.lp-diagnosis-item__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--lp-paper-mid);
  overflow: hidden;
}
.lp-diagnosis-item__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.lp-diagnosis-item:hover .lp-diagnosis-item__media img {
  transform: scale(1.05);
}
.lp-diagnosis-item__body {
  padding: 28px 30px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lp-diagnosis-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.18);
}
.lp-diagnosis-item--low {
  border-top-color: #6fae5d;
}
.lp-diagnosis-item--mid {
  border-top-color: #e8b32f;
}
.lp-diagnosis-item--high {
  border-top-color: #c8453d;
}
.lp-diagnosis-item__head {
  padding-bottom: 22px;
  border-bottom: 1px dashed rgba(0,0,0,.14);
  margin-bottom: 22px;
}
.lp-diagnosis-item__level {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--text-sub);
  margin-bottom: 12px;
}
.lp-diagnosis-item__title {
  font-family: var(--font-serif-ja);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--lp-ink);
  line-height: 1.2;
  margin-bottom: 8px;
}
.lp-diagnosis-item__title em {
  font-style: normal;
  background: linear-gradient(transparent 60%, var(--lp-yellow) 60%);
  padding: 0 4px;
}
.lp-diagnosis-item--low .lp-diagnosis-item__title em {
  background: linear-gradient(transparent 60%, rgba(111,174,93,.45) 60%);
}
.lp-diagnosis-item--high .lp-diagnosis-item__title em {
  background: linear-gradient(transparent 60%, rgba(200,69,61,.4) 60%);
}
.lp-diagnosis-item__sub {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-sub);
}
.lp-diagnosis-item__symptoms {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-diagnosis-item__symptoms li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.lp-diagnosis-item__symptoms li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--lp-yellow-strong, #d4ad00);
  font-weight: 800;
  font-size: 13px;
}
.lp-diagnosis-item__action {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-sub);
  letter-spacing: .015em;
  background: var(--lp-paper-mid);
  padding: 14px 16px;
  border-radius: 4px;
  border-left: 3px solid var(--lp-yellow);
}

/* ===== ROOFING (lp-roofing / 屋根葺き替え・カバー) ===== */
.lp-roofing {
  background: var(--lp-paper-deep);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-roofing__bg-text {
  position: absolute;
  top: 80px;
  left: -10px;
  font-family: var(--font-en);
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.08);
  line-height: .85;
  pointer-events: none;
  z-index: 0;
}
.lp-roofing__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}
.lp-roofing__grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.lp-roofing-card {
  background: var(--white);
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.08);
  border-top: 4px solid var(--lp-yellow);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.lp-roofing-card__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--lp-paper-mid);
  overflow: hidden;
}
.lp-roofing-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.lp-roofing-card:hover .lp-roofing-card__media img {
  transform: scale(1.05);
}
.lp-roofing-card > .lp-roofing-card__num,
.lp-roofing-card > .lp-roofing-card__title,
.lp-roofing-card > .lp-roofing-card__desc,
.lp-roofing-card > .lp-roofing-card__points,
.lp-roofing-card > .lp-roofing-card__case,
.lp-roofing-card > .lp-roofing-card__caution {
  margin-left: 36px;
  margin-right: 36px;
}
.lp-roofing-card > .lp-roofing-card__num {
  margin-top: 32px;
}
.lp-roofing-card > .lp-roofing-card__case {
  margin-bottom: 16px;
}
.lp-roofing-card > .lp-roofing-card__caution {
  margin-bottom: 38px;
}
.lp-roofing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.22);
}
.lp-roofing-card__num {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 64px;
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--lp-yellow);
  line-height: 1;
  margin-bottom: 14px;
}
.lp-roofing-card__title {
  font-family: var(--font-serif-ja);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--lp-ink);
  line-height: 1.4;
  margin-bottom: 18px;
}
.lp-roofing-card__desc {
  font-size: 14px;
  line-height: 1.95;
  color: var(--text);
  margin-bottom: 22px;
  letter-spacing: .015em;
}
.lp-roofing-card__points {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  border-top: 1px dashed rgba(0,0,0,.14);
  padding-top: 22px;
}
.lp-roofing-card__points li {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.lp-roofing-card__points li span {
  font-weight: 800;
  color: var(--lp-yellow-strong, #c89a00);
  flex-shrink: 0;
}
.lp-roofing-card__case {
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-sub);
  background: var(--lp-paper-mid);
  padding: 14px 16px;
  border-radius: 4px;
  border-left: 3px solid var(--lp-yellow);
  letter-spacing: .015em;
}
.lp-roofing-card__caution {
  font-size: 12px;
  line-height: 1.75;
  color: var(--text-sub);
  letter-spacing: .015em;
}
.lp-roofing__note {
  margin-top: 36px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-sub);
  letter-spacing: .015em;
  text-align: center;
}

/* ===== FEATURED (lp-featured / 重点対応領域) ===== */
.lp-featured {
  background: var(--lp-paper-deep);
  padding: 130px 40px;
  position: relative;
  overflow: hidden;
}
.lp-featured__bg-text {
  position: absolute;
  top: 60px;
  right: -20px;
  font-family: var(--font-en);
  font-size: clamp(120px, 16vw, 240px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0,0,0,.08);
  line-height: .85;
  pointer-events: none;
  z-index: 0;
}
.lp-featured__inner {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
}
.lp-featured__list {
  list-style: none;
  padding: 0;
  margin: 60px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.lp-featured-card {
  background: var(--white);
  padding: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.08);
  border-top: 4px solid var(--lp-yellow);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lp-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 46px -22px rgba(0,0,0,.22);
}
.lp-featured-card__media {
  margin: 0;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--lp-paper-mid);
  overflow: hidden;
}
.lp-featured-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.lp-featured-card:hover .lp-featured-card__media img {
  transform: scale(1.05);
}
.lp-featured-card__body {
  padding: 36px 32px 36px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.lp-featured-card__num {
  position: absolute;
  top: 18px;
  right: 28px;
  font-family: var(--font-en);
  font-size: 44px;
  font-weight: 200;
  font-style: italic;
  letter-spacing: -.02em;
  color: var(--lp-yellow);
  line-height: 1;
}
.lp-featured-card__title {
  font-family: var(--font-serif-ja);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--lp-ink);
  line-height: 1.4;
  margin-bottom: 16px;
}
.lp-featured-card__desc {
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--text);
  letter-spacing: .015em;
  margin-bottom: 22px;
}
.lp-featured-card__items {
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  border-top: 1px dashed rgba(0,0,0,.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lp-featured-card__items li {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  padding-left: 18px;
  position: relative;
  letter-spacing: .015em;
}
.lp-featured-card__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--lp-ink);
}
.lp-featured__note {
  margin-top: 36px;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text-sub);
  letter-spacing: .015em;
  text-align: center;
}

/* レスポンシブ調整 */
@media (max-width: 900px) {
  .lp-diagnosis { padding: 90px 22px; }
  .lp-diagnosis__list { grid-template-columns: 1fr; gap: 18px; }
  .lp-diagnosis-item { padding: 30px 24px 26px; }
  .lp-diagnosis-item__body { padding-left: 0; padding-right: 0; }
  .lp-diagnosis-item__title { font-size: 26px; }

  .lp-roofing { padding: 90px 22px; }
  .lp-roofing__grid { grid-template-columns: 1fr; gap: 20px; }
  .lp-roofing-card { padding: 36px 26px 30px; }
  .lp-roofing-card > .lp-roofing-card__num,
  .lp-roofing-card > .lp-roofing-card__title,
  .lp-roofing-card > .lp-roofing-card__desc,
  .lp-roofing-card > .lp-roofing-card__points,
  .lp-roofing-card > .lp-roofing-card__case,
  .lp-roofing-card > .lp-roofing-card__caution {
    margin-left: 0;
    margin-right: 0;
  }
  .lp-roofing-card__num { font-size: 52px; }
  .lp-roofing-card__title { font-size: 22px; }
  .lp-roofing-card__points { grid-template-columns: 1fr; gap: 8px; }

  .lp-featured { padding: 90px 22px; }
  .lp-featured__list { grid-template-columns: 1fr; gap: 18px; }
  .lp-featured-card { padding: 36px 26px 30px; }
  .lp-featured-card__title { font-size: 22px; }
}

/* ===== お客様の声カルーセル（2026-07-31 実データ8件化に伴い追加） ===== */
.voice__carousel { position: relative; }
.voice__list--carousel {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; /* overflow-x:auto時にyが自動でautoになり縦スクロールが発生するのを防ぐ */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 0;
}
.voice__list--carousel::-webkit-scrollbar { display: none; }
.voice__list--carousel .voice-card {
  flex: 0 0 min(360px, 85%);
  scroll-snap-align: start;
}
.voice__nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin: 18px 0 48px;
}
.voice__nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: var(--white);
  color: var(--dark);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.voice__nav-btn:hover { background: var(--dark); color: var(--yellow); }
@media (max-width: 900px) {
  .voice__list--carousel { gap: 16px; }
  .voice__list--carousel .voice-card { flex-basis: min(320px, 88%); }
}

/* その他LP: Featured透かしが見出し「特にご相談の多い工事」と重なり視認性を損なうため非表示（2026-07-31 冨田さん指示） */
.lp-featured__bg-text { display: none; }


/* ===== WordPress調整（テーマ側でのみ必要な追加。静的ソースには含めない） ===== */
/* 管理バー表示時、固定ヘッダーを管理バーの下へずらす */
body.admin-bar .header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}
/* 施工実績カードのリンク化（カード構造を保つオーバーレイリンク方式） */
.work-card, .lp-work { position: relative; }
.work-card__cover, .lp-work__cover { position: absolute; inset: 0; z-index: 2; }
.work-card:has(.work-card__cover):hover { transform: translateY(-4px); }
/* LP内の実績0件カテゴリ向け案内 */
.lp-works__empty { padding: 28px 4px; color: var(--text-sub, #666); }
.lp-works__empty a { text-decoration: underline; }
/* 一覧の0件カテゴリ向け案内（リスト内に表示） */
.works-grid__empty { grid-column: 1 / -1; padding: 36px 8px; color: var(--text-sub, #666); text-align: center; list-style: none; }
.lp-news__empty { padding: 32px 8px; color: var(--text-sub, #666); list-style: none; }

/* ===== 移行コンテンツ互換（旧サイトSWELLテーマのブロック用最小CSS・色は現行サイト実測値） ===== */
.lp-article { --color_main: #e1ce5f; --color_deep01: #e44141; --color_deep02: #3d79d5; --color_deep03: #63a84d; --color_deep04: #f09f4d; }
.lp-article .swell-block-columns { margin: 1.5rem 0; }
.lp-article .swell-block-columns__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.lp-article .swell-block-column { flex: 1 1 0; min-width: 0; }
@media (min-width: 760px) {
  /* 幅指定のあるカラムのみ固定幅、無指定は残り幅を等分（SWELLと同挙動） */
  .lp-article .swell-block-column[style*="--clmn-w--pc"] { flex: 0 1 var(--clmn-w--pc); max-width: var(--clmn-w--pc); }
}
@media (max-width: 759px) {
  .lp-article .swell-block-column { flex: 1 1 100%; }
  .lp-article .pc_only { display: none; }
}
.lp-article .swell-block-column img { width: 100%; height: auto; }
/* SWELLのセル背景（swl-cell-bg）: オーバーレイspanは使わず、セル自体を直接塗る（旧サイトと同じ見え方） */
.lp-article table td, .lp-article table th { padding: .7em 1em; }
.lp-article td > .swl-cell-bg, .lp-article th > .swl-cell-bg { display: none; }
.lp-article td:has(> .swl-cell-bg), .lp-article th:has(> .swl-cell-bg) { font-weight: 700; }
.lp-article td:has(> .has-swl-main-background-color), .lp-article th:has(> .has-swl-main-background-color) { background-color: var(--color_main); }
.lp-article td:has(> .has-swl-deep-01-background-color), .lp-article th:has(> .has-swl-deep-01-background-color) { background-color: var(--color_deep01); color: #fff; }
.lp-article td:has(> .has-swl-deep-02-background-color), .lp-article th:has(> .has-swl-deep-02-background-color) { background-color: var(--color_deep02); color: #fff; }
.lp-article td:has(> .has-swl-deep-03-background-color), .lp-article th:has(> .has-swl-deep-03-background-color) { background-color: var(--color_deep03); color: #fff; }
.lp-article td:has(> .has-swl-deep-04-background-color), .lp-article th:has(> .has-swl-deep-04-background-color) { background-color: var(--color_deep04); color: #fff; }
/* 更新日の表記（公開日より控えめに） */
.lp-article__date--mod { font-size: .85em; color: var(--text-sub, #666); }
/* 実績カードの施工価格（現行サイト踏襲・カスタムフィールドwork_price） */
.work-card__price { margin-top: .4em; font-weight: 700; font-size: .95em; }
.lp-article .swl-bg-color { padding: .1em .4em; border-radius: 3px; }
.lp-article .has-swl-main-background-color { background-color: var(--color_main); }
.lp-article .has-swl-deep-01-background-color { background-color: var(--color_deep01); color: #fff; }
.lp-article .has-swl-deep-02-background-color { background-color: var(--color_deep02); color: #fff; }
.lp-article .has-swl-deep-03-background-color { background-color: var(--color_deep03); color: #fff; }
.lp-article .has-swl-deep-04-background-color { background-color: var(--color_deep04); color: #fff; }
.lp-article .has-swl-main-color { color: var(--color_main); }
.lp-article .has-swl-deep-01-color { color: var(--color_deep01); }
.lp-article .has-swl-deep-02-color { color: var(--color_deep02); }
.lp-article .has-swl-deep-03-color { color: var(--color_deep03); }
.lp-article .has-swl-deep-04-color { color: var(--color_deep04); }
.lp-article .u-fz-xs { font-size: .8em; }
.lp-article .u-fz-s { font-size: .9em; }
.lp-article .u-fz-l { font-size: 1.1em; }
.lp-article .u-fz-xl { font-size: 1.25em; }
.lp-article .swl-has-mb--s { margin-bottom: 1em; }
.lp-article .swl-marker { background: linear-gradient(transparent 60%, rgba(225, 206, 95, .55) 60%); }