@charset "UTF-8";
/*!
Theme Name: hamaken8008-renewal
Theme URI: https://hamaken8008.co.jp/
Description: 株式会社Hamakenエクステリア リニューアル版テーマ（2026 モックアップ準拠）
Author: PEEES
Version: 2.0.0
*/
/* ============================================================
   ブレイクポイント（PEEES標準）
   モックのCSSは素の @media で書かれているのでそのまま持ち込んでいる。
   このミックスインは、こちらで書き足す分にだけ使う。
   ============================================================ */
/* ============================================================
   カラー・フォント
   モックは CSS カスタムプロパティ（--paper / --ink / --lamp / --mincho …）で
   トークンを持っている。定義は _base.scss の :root にあるのでそちらが正。
   SCSS 側は、色をSassの関数で扱いたいときのための写しだけを置く。
   ============================================================ */
/* ここから下の並び順は、モック原本のCSSの並びと同じにしてある。
   同じ強さのセレクタは「後に書いたほうが勝つ」ので、順番を入れ替えると
   SPのメディアクエリやサムネイルの上書きが効かなくなる。触るときは原本の順を確認すること。 */
:root {
  --ink-2:#8A8A86;
  --paper:#F5F4F1;
  --ink:#1C1C1C;
  --lamp:#C8A96A;
  --pad:clamp(2.4rem, 4vw, 7rem);
  --padL:var(--pad);
  --maxw:140rem; /* モック原本と同じ。広い画面で両端を詰めたいときはここだけ変える */
  --mincho:"Shippori Mincho", serif;
  --gothic:"Zen Kaku Gothic New", sans-serif;
  --serif:"Cormorant Garamond", serif;
  --hand:"Yomogi", sans-serif; /* 主：手書き */
  --hand2:"Zen Kurenaido", sans-serif; /* 従：字形の重複を避けるための混植 */
}

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

/* overflow-x:clip：横にはみ出した要素があっても横スクロールを出さない保険。
   body の overflow-x:hidden だけでは iOS Safari で効かない（html 側で止める必要がある）。
   clip はスクロールコンテナを作らないので、Lenis や position:sticky に影響しない */
html {
  font-size: 62.5%;
  scrollbar-gutter: stable;
  overflow-x: clip;
}

body {
  background: var(--paper);
  color: var(--paper);
  font-family: var(--gothic);
  font-size: 1.6rem;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
  height: 100svh;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--lamp);
  outline-offset: 4px;
}

/* ============ LOADER ============ */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: grid;
  place-items: center;
}

#loader .mark {
  text-align: center;
}

#loader .lgmark {
  display: block;
  width: min(36rem, 45vw);
  height: auto;
  color: var(--ink);
  --rev:-12%;
  -webkit-mask-image: linear-gradient(97deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 9%));
  mask-image: linear-gradient(97deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 9%));
}

/* ============ HEADER ============ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 85;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.8rem var(--pad);
  transition: background 0.45s, padding 0.45s, color 0.45s, border-color 0.45s;
  border-bottom: 1px solid transparent;
}

/* スクロール後（.is-solid）は不透明の地色ではなく、半透明＋背景ぼかし。
   TOPのヒーロー上（透過）はそのままで、下にスクロールしたときだけ半透明にしてほしいとの要望。
   下の写真や本文がうっすら透けるが、ぼかしが入るので文字は読める。
   2026-09 公開前修正で「もっと透けて見えるように」との指示 → 地色 .72→.45、ぼかし 14px→6px */
.header.is-solid {
  background: rgba(245, 244, 241, 0.45);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px) saturate(1.2);
  backdrop-filter: blur(6px) saturate(1.2);
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom-color: rgba(28, 28, 28, 0.08);
}

.header.is-solid .head-cta {
  border-color: rgba(28, 28, 28, 0.24);
}

.header.is-solid .head-cta:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ロゴの幅は、viewBox を絵柄ぴったりに詰めたぶん（旧 21rem → 16.5rem）小さくして見た目の大きさを揃えている。
   ドロワー・フッター・ローダーの .lgmark も同じ比率（×0.78）で合わせてある */
.logo {
  display: block;
  width: 16.5rem;
}

.logo .lgmark {
  display: block;
  width: 100%;
  height: auto;
}

.gnav {
  display: flex;
  gap: 3rem;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
}

/* 項目名は途中で折り返さない。畳むときは行を詰めるのではなくハンバーガーに寄せる */
.gnav a {
  position: relative;
  padding-bottom: 0.5rem;
  white-space: nowrap;
}

.gnav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.gnav a:hover::after {
  transform: scaleX(1);
}

.head-right {
  display: flex;
  align-items: center;
  gap: 2.4rem;
}

.head-cta {
  border: 1px solid rgba(245, 244, 241, 0.45);
  padding: 1.2rem 2.4rem;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  transition: 0.35s;
  white-space: nowrap;
}

.head-cta:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.burger {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 3rem;
}

.burger i {
  display: block;
  height: 1px;
  background: currentColor;
}

.burger i:last-child {
  width: 60%;
  margin-left: auto;
}

/* グローバルナビは6項目で約580px要る。ロゴ・CTA・ハンバーガーと合わせると
   1200px を切ったあたりから収まらなくなるので、その手前でドロワーに寄せる。
   （モックは820px以下でしか畳んでおらず、821〜1200pxで項目名が段落ちしていた） */
@media (max-width: 1199px) {
  .gnav {
    display: none;
  }
}
/* ============ HERO ============ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 64rem;
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(10, 11, 14, 0.88) 0%, rgba(10, 11, 14, 0.66) 30%, rgba(10, 11, 14, 0.28) 54%, rgba(10, 11, 14, 0) 78%), linear-gradient(0deg, rgba(10, 11, 14, 0.66) 0%, transparent 46%), radial-gradient(130% 70% at 46% 0%, rgba(10, 11, 14, 0.55), transparent 62%);
}

/* 左レール：TOP常時表示のスクロールスパイ */
.rail {
  position: fixed;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  padding-left: 2.4rem;
  --rail:rgba(245,244,241,.55);
  --rail-on:#F5F4F1;
  transition: opacity 0.45s, visibility 0.45s;
}

.rail.is-off {
  opacity: 0;
  visibility: hidden;
}

.rail.is-light {
  --rail:rgba(28,28,28,.42);
  --rail-on:#1C1C1C;
}

.rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: -2rem;
  bottom: -2rem;
  width: 1px;
  background: var(--rail);
  opacity: 0.5;
}

.rail li + li {
  margin-top: 0.2rem;
}

.rail a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.9rem 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  color: var(--rail);
  transition: color 0.4s;
}

.rail a b {
  font-weight: 400;
}

.rail a i {
  display: block;
  width: 0;
  height: 1px;
  background: var(--rail-on);
  transition: width 0.45s cubic-bezier(0.33, 1, 0.68, 1);
}

.rail a:hover {
  color: var(--rail-on);
}

.rail li.is-current a {
  color: var(--rail-on);
}

.rail li.is-current a i {
  width: 2.8rem;
}

/* コピー */
/* --hero-bottom：コピー（左）と手書き（右）の"底"をそろえる高さ。
   .scroll（bottom 3.2rem ＋ 線 9rem ＋ 文字）が同じ左端に並ぶので、
   その上端（約15.5rem）より広く取らないとサブコピーが「Scroll」に重なる */
.hero {
  --hero-bottom:18.5rem;
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 0 var(--pad) var(--hero-bottom);
  padding-left: calc(var(--pad) + 17rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__copy {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(3.6rem, 5.4vw, 7rem);
  line-height: 1.42;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 24px rgba(10, 11, 14, 0.5);
}

/* コピーは js/main.js が全体をふわっと出す（フェード＋わずかな上昇）。opacity:0 はその初期状態 */
.hero__copy .ln {
  display: block;
}

.hero__copy .ln i {
  display: block;
  font-style: normal;
  opacity: 0;
}

.hero__sub {
  margin-top: 3.2rem;
  font-size: 1.55rem;
  line-height: 2.1;
  letter-spacing: 0.09em;
  color: rgba(245, 244, 241, 0.88);
  opacity: 0;
  text-shadow: 0 1px 16px rgba(10, 11, 14, 0.5);
}

/* 手書き（花とちょうちょ×アングル想定）
   底を左のコピーと同じ --hero-bottom にそろえて、サブコピーの最終行と英字が同じ高さに並ぶようにしている */
.hw {
  position: absolute;
  right: var(--pad);
  bottom: var(--hero-bottom);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* 幅は viewBox を絵柄ぴったりに詰めたぶん（旧 52rem/42vw）小さくして見た目の大きさを揃えている（CTA の .cta__hand も同様） */
.hw__svg {
  display: block;
  width: min(42rem, 34vw);
  height: auto;
  color: var(--paper);
  filter: drop-shadow(0 2px 16px rgba(10, 11, 14, 0.55));
  --rev:-25%; /* 見出し .rv と同じ「にじみながら左から開く」。幅25%のグラデーションで境目をぼかす */
  -webkit-mask-image: linear-gradient(96deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
  mask-image: linear-gradient(96deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
}

.hw__en {
  margin-top: 1.6rem;
  margin-right: 0.4em;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.9;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-align: right;
  color: rgba(245, 244, 241, 0.6);
  opacity: 0;
}

/* スクロール */
.scroll {
  position: absolute;
  left: calc(var(--pad) + 17rem);
  bottom: 3.2rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
  color: rgba(245, 244, 241, 0.75);
}

.scroll span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.scroll i {
  display: block;
  width: 1px;
  height: 9rem;
  background: rgba(245, 244, 241, 0.3);
  position: relative;
  overflow: hidden;
}

.scroll i::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 1px;
  height: 100%;
  background: var(--paper);
  animation: drop 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes drop {
  0% {
    top: -100%;
  }
  62%, 100% {
    top: 100%;
  }
}
/* スライダー操作 */
.dots {
  position: absolute;
  right: var(--pad);
  bottom: 4.4rem;
  z-index: 4;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}

.dots button {
  width: 4rem;
  height: 1px;
  background: rgba(245, 244, 241, 0.35);
  transition: background 0.4s;
}

.dots button[aria-current=true] {
  background: var(--paper);
}

/* ============ SP ============ */
@media (max-width: 820px) {
  .head-cta {
    display: none;
  }
  .rail {
    display: none;
  }
  .hero__inner {
    padding-left: var(--pad);
    justify-content: flex-end;
    padding-bottom: 15rem;
  }
  .hero__copy {
    font-size: clamp(3.2rem, 8.6vw, 4.4rem);
    line-height: 1.48;
  }
  .hero__sub {
    margin-top: 2.4rem;
    font-size: 1.3rem;
    line-height: 1.95;
  }
  .hw {
    bottom: auto;
    top: 14vh;
    right: var(--pad);
    left: var(--pad);
  }
  .hw__svg {
    width: 82%;
  }
  .hw__en {
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    margin-top: 2.4rem;
  }
  .scroll {
    left: var(--pad);
    bottom: 3.2rem;
  }
  .scroll i {
    height: 5rem;
  }
  .dots {
    bottom: 6rem;
  }
  .logo {
    width: 12rem;
  }
}
/* ============ ドロワー（全ページ共通のメニュー） ============ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1), visibility 0.5s;
  overflow-y: auto;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer__inner {
  min-height: 100%;
  max-width: min(var(--maxw), 124rem);
  margin-inline: auto;
  padding: clamp(6rem, 9vh, 8rem) var(--pad) clamp(2.2rem, 3.5vh, 3.4rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 3vh, 3rem);
}

.drawer__head {
  display: flex;
  align-items: flex-end;
  gap: 2.4rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.2rem, 2vh, 1.8rem);
  border-bottom: 1px solid rgba(28, 28, 28, 0.16);
}

.drawer__logo {
  display: block;
  width: 15rem;
  color: var(--ink);
}

.drawer__logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.drawer__lead {
  font-family: var(--mincho);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  padding-bottom: 0.6rem;
}

/* 左に2ブロック・右に3ブロック。列ごとに独立して詰める */
.drawer__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 6vw, 8rem);
}

.dgcol {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 2.6vh, 2.6rem);
}

.dg h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  color: var(--ink);
  font-weight: 400;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.55);
}

.dg h2::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--lamp);
  flex: 0 0 5px;
}

.dg ul {
  margin-top: 0.2rem;
}

.dg li {
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.dg a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(0.75rem, 1.15vh, 1.05rem) 0.2rem;
  font-family: var(--mincho);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: padding-left 0.35s cubic-bezier(0.33, 1, 0.68, 1), color 0.3s;
}

.dg a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
}

.dg a:hover {
  padding-left: 0.8rem;
  color: var(--lamp);
}

.drawer__foot {
  margin-top: auto;
  padding-top: clamp(1.6rem, 2.4vh, 2.6rem);
  border-top: 1px solid rgba(28, 28, 28, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.6rem, 3vw, 3rem);
  flex-wrap: wrap;
}

@media (min-width: 901px) and (max-height: 760px) {
  .drawer__inner {
    padding-top: 5.6rem;
    gap: 1.4rem;
  }
  .drawer__head {
    padding-bottom: 1rem;
  }
  .drawer__logo {
    width: 11rem;
  }
  .dgcol {
    gap: 1.4rem;
  }
  .dg a {
    font-size: 1.4rem;
    padding: 0.65rem 0.2rem;
  }
  .drawer__foot {
    padding-top: 1.4rem;
  }
  .drawer__tel span {
    display: none;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  .drawer__lead {
    display: none;
  }
  .drawer__logo {
    width: 12.5rem;
  }
  .dg h2 {
    font-size: 1.1rem;
    padding-bottom: 0.6rem;
  }
  .dg a {
    font-size: 1.45rem;
  }
  .drawer__tel a {
    font-size: 2.4rem;
  }
  .drawer__sns a {
    padding: 0.7rem 1.4rem;
  }
  .drawer__cta {
    padding: 1.3rem 2.4rem;
    font-size: 1.35rem;
  }
}
.drawer__tel a {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 3.2vw, 3.4rem);
  letter-spacing: 0.04em;
  display: block;
}

.drawer__tel span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.drawer__sns {
  display: flex;
  gap: 1rem;
}

.drawer__sns a {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  padding: 1rem 2rem;
  border: 1px solid rgba(28, 28, 28, 0.2);
  transition: 0.3s;
}

.drawer__sns a:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.drawer__cta {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1.6rem 3rem;
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  transition: 0.35s;
}

.drawer__cta i {
  display: block;
  width: 3rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.35s;
}

.drawer__cta i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.drawer__cta:hover {
  background: var(--lamp);
  color: var(--ink);
}

.drawer__cta:hover i {
  width: 4.2rem;
}

/* バーガー→×  */
.burger {
  position: relative;
  z-index: 90;
  height: 1.4rem;
  justify-content: center;
}

.burger i {
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), width 0.4s, opacity 0.3s;
}

body.nav-open .header {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--ink);
}

body.nav-open .burger i {
  background: var(--ink);
  width: 100%;
}

body.nav-open .burger i:first-child {
  transform: translateY(3.5px) rotate(28deg);
}

body.nav-open .burger i:last-child {
  transform: translateY(-3.5px) rotate(-28deg);
}

body.nav-open .logo,
body.nav-open .gnav,
body.nav-open .head-cta {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

@media (max-width: 900px) {
  .drawer__groups {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .drawer__inner {
    padding-top: 9rem;
    gap: 2.8rem;
  }
  .drawer__head {
    gap: 1.2rem;
    padding-bottom: 1.8rem;
  }
  .drawer__logo {
    width: 12rem;
  }
  .drawer__lead {
    display: none;
  }
  .dg a {
    font-size: 1.55rem;
    padding: 1.1rem 0.2rem;
  }
  .drawer__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }
  .drawer__cta {
    justify-content: center;
  }
}
/* ============ 共通（下層セクション） ============ */
/* TOP だけ左レール分の余白を足す（:root のままだと下層にも効いてしまう） */
@media (min-width: 1025px) {
  body.home {
    --padL:calc(var(--pad) + 15rem);
  }
}
.paper {
  background: var(--paper);
  color: var(--ink);
  position: relative;
}

/* 同じ地色が連続したときだけ境界に罫を引く */
section[data-tone=light] + section[data-tone=light] {
  border-top: 1px solid rgba(28, 28, 28, 0.14);
}

section[data-tone=dark] + section[data-tone=dark] {
  border-top: 1px solid rgba(245, 244, 241, 0.14);
}

/* 白の連続は地色も一段落として板を分ける */
.paper--alt {
  background: #EFEDE8;
}

.paper--alt .sec-bg::after {
  background: radial-gradient(closest-side, transparent 30%, #EFEDE8 88%);
}

.paper--alt .plan {
  background: #F7F5F1;
}

.sec {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(6rem, 7vw, 9rem) var(--pad) clamp(6rem, 7vw, 9rem) var(--padL);
}

.h2 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.62;
  letter-spacing: 0.07em;
}

.lead {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2;
  max-width: 46rem;
}

/* 見出し：左から右へ、境目をにじませながら開く（js/main.js が --rev を -25%→125% に動かす）。
   --rev が「見えている側の端」、そこから 25% 幅のグラデーションで透明へ。旧ワイプ clip-path から変更 */
.rv {
  --rev:-25%;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
  mask-image: linear-gradient(90deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
}

.rv-t {
  opacity: 0;
}

.rv-img {
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, transform;
}

figure, .ph, .about__photo, .about__sub, .work figure, .plan figure, .pillar figure {
  overflow: hidden;
}

/* セクションの入口。テンプレの「英字＋日本語」の見出しブロックを、
   罫線でセクション幅いっぱいに引き伸ばして"まとまりの上端"にした */
.sec-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 0 var(--pad) 0 var(--padL);
  margin-bottom: clamp(3.2rem, 4vw, 5rem);
}

.sec-head .num {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.sec-head .ln {
  flex: 0 0 clamp(3rem, 6vw, 7rem);
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

.sec-head .en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
}

.sec-head .ja {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  margin-left: 0.4rem;
}

.sec-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.14;
}

.sec-head--rev {
  color: var(--paper);
  margin-bottom: clamp(2.6rem, 3.4vw, 4rem);
}

.sec .sec-head--rev {
  padding-left: 0;
}

section > .sec-head {
  padding-top: clamp(5.5rem, 6.5vw, 8.5rem);
}

.sec-head + .sec {
  padding-top: 0;
}

.sec-head--rev .num, .sec-head--rev .ja {
  color: rgba(245, 244, 241, 0.6);
}

.scriptlab {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(3rem, 4vw, 4.2rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.16;
  transform: rotate(-7deg);
  transform-origin: left bottom;
  display: inline-block;
}

.scriptlab--rev {
  color: var(--paper);
  opacity: 0.2;
}

.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  padding-bottom: 0.8rem;
  position: relative;
}

.btn-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: rgba(28, 28, 28, 0.24);
}

.btn-line i {
  position: relative;
  display: block;
  width: 2.8rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  transition: width 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.4s;
}

.btn-line i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn-line:hover i {
  width: 4.2rem;
  opacity: 1;
}

/* ============ NEWS ============ */
.service {
  position: relative;
  overflow: hidden;
}

.news {
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.news__in {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(4.4rem, 5.5vw, 6.4rem) var(--pad) clamp(4.4rem, 5.5vw, 6.4rem) var(--padL);
  display: grid;
  grid-template-columns: 20rem 1fr;
  gap: clamp(2.4rem, 4vw, 5.6rem);
  align-items: start;
}

.news__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.news__head .scriptlab {
  font-size: clamp(2.6rem, 3.2vw, 3.4rem);
  margin-bottom: 0.2rem;
}

.news__ja {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: 0.22em;
  margin-bottom: 2.2rem;
}

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

.news__list a {
  display: grid;
  grid-template-columns: 10rem 8rem 1fr 1.6rem;
  align-items: center;
  gap: 1.8rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
  transition: color 0.3s, padding-left 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.news__list a:hover {
  color: var(--lamp);
  padding-left: 0.8rem;
}

.news__list time {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.news__list .cat {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  text-align: center;
  border: 1px solid rgba(28, 28, 28, 0.16);
  padding: 0.4rem 0;
}

.news__list .ttl {
  font-size: 1.5rem;
  line-height: 1.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chev {
  display: block;
  width: 6px;
  height: 6px;
  justify-self: end;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.45;
}

/* ============ ABOUT ============
   テンプレの「写真の上にパネルを重ねる」を、
   グリッドで噛み合わせ直す。写真は右へ断ち落とし、
   パネルは写真に1/3食い込み、サブ写真が両方をまたいで留める。 */
.about {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(4.4rem, 5vw, 6.4rem);
}

/* セクションの地。写真を薄く敷いて、白面に奥行きを出す */
.sec-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  width: min(68rem, 48vw);
  aspect-ratio: 1/1;
}

.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.1;
}

.sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, transparent 30%, var(--paper) 88%);
}

.sec-bg--left {
  left: -14rem;
  top: 6rem;
}

.sec-bg--right {
  right: -18rem;
  top: 6rem;
}

.sec-bg--rev img {
  opacity: 0.16;
}

.sec-bg--rev::after {
  background: radial-gradient(closest-side, transparent 30%, var(--ink) 88%);
}

/* 黒背景の地はテキストで。写真だと沈んで読めないため */
.sec-bgtext {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  right: calc(var(--pad) + 1rem);
  top: clamp(14rem, 17vw, 22rem);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.6rem, 7vw, 9.5rem);
  line-height: 1.06;
  letter-spacing: 0.01em;
  text-align: right;
  color: var(--paper);
  opacity: 0.075;
}

.about__grid {
  display: grid;
  max-width: var(--maxw);
  margin-inline: auto;
  grid-template-columns: var(--padL) minmax(0, 40rem) minmax(0, 1fr) var(--pad);
  grid-template-rows: auto auto;
  align-items: start;
}

.about__photo {
  grid-column: 3/5;
  grid-row: 1;
  position: relative;
  margin-top: 1rem;
}

.about__photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.about__photo .frame {
  position: absolute;
  inset: -1.8rem -1.8rem auto 1.8rem;
  height: 70%;
  border: 1px solid rgba(28, 28, 28, 0.2);
  border-right: 0;
  pointer-events: none;
}

.about__panel {
  grid-column: 2/3;
  grid-row: 1;
  align-self: end;
  position: relative;
  z-index: 3;
  margin-bottom: -5rem;
  margin-right: -17rem;
  background: var(--paper);
  padding: clamp(3.2rem, 3.6vw, 4.4rem) clamp(2.8rem, 3.2vw, 4rem);
  box-shadow: 0 20px 48px -30px rgba(28, 28, 28, 0.4);
}

.about__panel p {
  margin-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.95;
  color: #2e2e2c;
}

.about__panel .h2 {
  margin-bottom: 0.6rem;
}

.about__panel .btn-line {
  margin-top: 2.8rem;
}

.corner {
  position: absolute;
  width: 4rem;
  height: 4rem;
}

.corner i {
  position: absolute;
  background: var(--ink);
  opacity: 0.45;
}

.corner--tl {
  top: 1.2rem;
  left: 1.2rem;
}

.corner--tl i:first-child {
  top: 8px;
  left: 0;
  width: 3.2rem;
  height: 1px;
}

.corner--tl i:last-child {
  top: 0;
  left: 8px;
  width: 1px;
  height: 3.2rem;
}

.corner--br {
  bottom: 1.2rem;
  right: 1.2rem;
}

.corner--br i:first-child {
  bottom: 8px;
  right: 0;
  width: 3.2rem;
  height: 1px;
}

.corner--br i:last-child {
  bottom: 0;
  right: 8px;
  width: 1px;
  height: 3.2rem;
}

.about__sub {
  grid-column: 3/4;
  grid-row: 2;
  justify-self: start;
  width: min(24rem, 26vw);
  margin-top: -5rem;
  margin-left: 5rem;
  position: relative;
  z-index: 4;
}

.about__sub img {
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 16px 40px -26px rgba(28, 28, 28, 0.5);
}

.about__sub figcaption {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ============ SERVICE ============
   ABOUTと左右を反転。写真は左に置いて section 内で追従させ、
   右のメニューだけが流れていく。 */
.service__grid {
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 5.6rem);
  align-items: start;
}

.service__photo {
  position: relative;
  align-self: start;
  margin-top: clamp(3rem, 4.5vw, 6.5rem);
}

.service__photo .ph {
  position: relative;
  display: block;
}

.service__photo img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.service__photo .frame {
  position: absolute;
  inset: auto auto -1.6rem -1.6rem;
  width: 55%;
  height: 38%;
  border-left: 1px solid rgba(28, 28, 28, 0.22);
  border-bottom: 1px solid rgba(28, 28, 28, 0.22);
  pointer-events: none;
}

.service__photo figcaption {
  margin-top: 1.2rem;
  font-family: var(--mincho);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  line-height: 1.9;
}

.service__body .lead {
  margin-top: 1.6rem;
}

.menu {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(2.4rem, 4vw, 5rem);
  border-top: 1px solid rgba(28, 28, 28, 0.14);
}

.menu li {
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.menu a {
  display: grid;
  grid-template-columns: 3.4rem 1fr 1.4rem;
  grid-template-rows: auto auto;
  column-gap: 1.2rem;
  align-items: baseline;
  padding: 1.5rem 0.4rem 1.6rem 0;
  transition: padding-left 0.35s cubic-bezier(0.33, 1, 0.68, 1), color 0.3s;
}

.menu a:hover {
  padding-left: 0.8rem;
  color: var(--lamp);
}

.menu .n {
  grid-row: 1;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.menu .nm {
  grid-row: 1;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.75rem;
  letter-spacing: 0.06em;
}

.menu .chev {
  grid-row: 1;
  align-self: center;
}

.menu .ds {
  grid-row: 2;
  grid-column: 2/4;
  margin-top: 0.5rem;
  font-size: 1.35rem;
  line-height: 1.85;
  color: #4a4a46;
}

.service__body .btn-line {
  margin-top: clamp(3rem, 4vw, 4.4rem);
}

@media (max-width: 1024px) {
  .service__grid {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
  .service__photo {
    width: min(38rem, 72%);
  }
  .menu {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .service__photo {
    width: 100%;
  }
  .menu .nm {
    font-size: 1.6rem;
  }
  .menu .ds {
    font-size: 1.3rem;
  }
}
/* ============ WORKS ============
   均等グリッドにしない。1点だけ2カラム幅で先頭に置き、
   残りを3列で流す。タグは写真の外に出して読ませる。 */
.works {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.sec-bgtext--w {
  right: auto;
  left: calc(var(--padL) - 0.6rem);
  top: auto;
  bottom: clamp(3rem, 5vw, 7rem);
  text-align: left;
  font-size: clamp(7rem, 13vw, 17rem);
  opacity: 0.04;
  line-height: 1;
}

.works__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.btn-line--rev::after {
  background: rgba(245, 244, 241, 0.28);
}

.filters {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.filters__row {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}

.filters .lb {
  flex: 0 0 7.5rem;
  padding-top: 0.9rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(245, 244, 241, 0.5);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.chip {
  padding: 0.7rem 1.6rem;
  border: 1px solid rgba(245, 244, 241, 0.22);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  transition: 0.3s;
}

.chip:hover {
  border-color: rgba(245, 244, 241, 0.6);
}

.chip[aria-pressed=true] {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.works__grid {
  margin-top: clamp(3.6rem, 5vw, 5.6rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.4vw, 4rem) clamp(2.4rem, 3vw, 3.6rem);
}

.work--lead {
  grid-column: span 2;
}

.work figure {
  overflow: hidden;
}

.work img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.work--lead img {
  aspect-ratio: 16/9;
}

.work:hover img {
  transform: scale(1.035);
}

.work__meta {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.work__meta span {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: rgba(245, 244, 241, 0.7);
  border: 1px solid rgba(245, 244, 241, 0.2);
  padding: 0.35rem 0.9rem;
}

.work h3 {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  transition: color 0.3s;
}

.work--lead h3 {
  font-size: 2.2rem;
}

.work:hover h3 {
  color: var(--lamp);
}

.work .place {
  margin-top: 0.4rem;
  font-size: 1.25rem;
  color: rgba(245, 244, 241, 0.55);
}

/* ============ SIMULATION ============
   3枚を横に並べるだけだと単調なので、坪数と金額が上がるにつれて
   ブロックが階段状に上がっていく。金額の幅を配置で見せる。 */
.sim {
  position: relative;
  overflow: hidden;
}

.sim__head {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 7rem);
  align-items: end;
}

.sim__head .lead {
  margin-top: 0;
}

.ladder {
  margin-top: clamp(4.4rem, 6vw, 7rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 2.6vw, 3.2rem);
  align-items: start;
}

.step {
  position: relative;
}

.ladder {
  --s1:clamp(3.6rem,6vw,8rem);
  --s2:clamp(1.8rem,3vw,4rem);
  --gp:clamp(2rem,2.6vw,3.2rem);
}

.step--1 {
  margin-top: var(--s1);
}

.step--2 {
  margin-top: var(--s2);
}

.step--3 {
  margin-top: 0;
}

/* 段をつなぐ一本の階段罫 */
.step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.8rem;
  height: 1px;
  background: rgba(28, 28, 28, 0.2);
}

.step--1::after, .step--2::after {
  content: "";
  position: absolute;
  width: 1px;
  background: rgba(28, 28, 28, 0.2);
  right: calc(var(--gp) / -2);
}

.step--1::after {
  height: calc(var(--s1) - var(--s2));
  top: calc(-1.8rem - (var(--s1) - var(--s2)));
}

.step--2::after {
  height: var(--s2);
  top: calc(-1.8rem - var(--s2));
}

.step__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  padding: 0.7rem 1.6rem;
}

.step figure {
  overflow: hidden;
}

.step img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.step__body {
  padding-top: 2rem;
}

.step .tsubo {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--mincho);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

.step .tsubo .lb {
  font-family: var(--gothic);
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  margin-right: 0.4rem;
}

.step .tsubo em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 2.8rem;
  line-height: 1;
}

.step .tsubo .plus {
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--ink-2);
}

.step .pl {
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.step .pl span {
  font-style: normal;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
}

.step .yen {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(28, 28, 28, 0.12);
  font-family: var(--mincho);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.step .yen em {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(3.8rem, 4.6vw, 5.4rem);
  line-height: 1;
}

.step .yen span {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink-2);
}

.step--2 .yen {
  border-top-color: var(--lamp);
}

.step .term {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.sim__foot {
  margin-top: clamp(3.2rem, 4vw, 4.8rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  flex-wrap: wrap;
}

.sim__note {
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--ink-2);
  max-width: 52rem;
}

.sim .sec {
  padding-bottom: clamp(4.4rem, 5.5vw, 7rem);
}

/* ============ VOICE ============
   3件を左右にずらして置き、罫線でつなぐ。 */
.voice {
  position: relative;
  overflow: hidden;
}

.voice__h {
  margin-bottom: clamp(2.8rem, 3.6vw, 4rem);
}

.voices {
  border-top: 1px solid rgba(28, 28, 28, 0.16);
}

.vo {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 4rem);
  align-items: start;
  padding: clamp(2.6rem, 3.2vw, 3.8rem) 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.vo__who {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.6rem;
}

.vo__who .area {
  font-family: var(--mincho);
  font-size: 1.5rem;
  letter-spacing: 0.12em;
}

.vo__who .attr {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.vo__who .kind {
  margin-top: 0.4rem;
  align-self: flex-start;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border: 1px solid rgba(28, 28, 28, 0.16);
  padding: 0.35rem 0.9rem;
}

.vo blockquote {
  position: relative;
  padding-left: clamp(2rem, 2.4vw, 3rem);
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.2vw, 2.3rem);
  line-height: 1.85;
  letter-spacing: 0.05em;
  max-width: 52rem;
}

.vo blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  bottom: 0.4em;
  width: 1px;
  background: var(--lamp);
  opacity: 0.6;
}

.voice .btn-line {
  margin-top: clamp(2.8rem, 3.6vw, 4.4rem);
}

@media (max-width: 1024px) {
  .works__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work--lead {
    grid-column: span 2;
  }
  .sim__head {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .vo {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .vo__who {
    flex-direction: row;
    align-items: center;
    gap: 1.2rem;
    padding-top: 0;
    flex-wrap: wrap;
  }
  .vo__who .kind {
    margin-top: 0;
  }
  .vo blockquote {
    max-width: none;
  }
}
@media (max-width: 1024px) {
  .ladder {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .step--1, .step--2, .step--3 {
    margin-top: 0;
  }
  .step::before, .step::after {
    display: none;
  }
  .sim__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }
}
@media (max-width: 820px) {
  .works__grid {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
  .work--lead {
    grid-column: span 1;
  }
  .work--lead img {
    aspect-ratio: 4/3;
  }
  .work--lead h3 {
    font-size: 1.85rem;
  }
  .filters__row {
    flex-direction: column;
    gap: 0.8rem;
  }
  .filters .lb {
    padding-top: 0;
  }
  .sec-bgtext {
    font-size: 4.4rem;
    top: auto;
    bottom: 2rem;
    right: var(--pad);
  }
  .sec-bgtext--w {
    font-size: 6rem;
    left: var(--pad);
  }
}
/* ============ CONCEPT ============ */
.concept {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.concept .lead {
  color: rgba(245, 244, 241, 0.82);
}

.concept__head {
  max-width: 56rem;
}

.concept__head .scriptlab {
  margin-bottom: 0.4rem;
}

.pillars {
  margin-top: clamp(4.4rem, 6vw, 7.2rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.4vw, 4rem);
  align-items: start;
}

.pillar figure {
  position: relative;
  margin-bottom: 2rem;
}

.pillar img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 5/4;
  object-fit: cover;
}

.pillar .frame {
  position: absolute;
  inset: auto -1.2rem -1.2rem auto;
  width: 50%;
  height: 45%;
  border-right: 1px solid rgba(245, 244, 241, 0.3);
  border-bottom: 1px solid rgba(245, 244, 241, 0.3);
  pointer-events: none;
}

.pillar--a {
  margin-top: 0;
}

.pillar--b {
  margin-top: clamp(2.4rem, 4vw, 5.6rem);
}

.pillar--c {
  margin-top: clamp(1rem, 1.8vw, 2.4rem);
}

.pillar .en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 241, 0.6);
}

.pillar h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.95rem;
  letter-spacing: 0.06em;
  line-height: 1.65;
}

.pillar p:last-child {
  margin-top: 1.2rem;
  font-size: 1.45rem;
  line-height: 1.95;
  color: rgba(245, 244, 241, 0.82);
}

@media (max-width: 1024px) {
  .about__grid {
    grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad);
  }
  .about__photo {
    grid-column: 2/4;
    margin-top: 0;
  }
  .about__panel {
    grid-column: 2/3;
    grid-row: 2;
    margin: -6rem 0 0;
    align-self: start;
  }
  .about__sub {
    grid-column: 2/3;
    grid-row: 3;
    margin: 2.4rem 0 0 auto;
    width: min(22rem, 45%);
  }
  .about__mark {
    left: var(--pad);
  }
}
@media (max-width: 820px) {
  body {
    font-size: 1.5rem;
  }
  .sec {
    padding: clamp(6rem, 9vw, 8rem) var(--pad);
  }
  .sec-head {
    padding: 0 var(--pad);
    gap: 1.2rem;
    margin-bottom: 3rem;
  }
  .sec-head .en {
    font-size: 1.7rem;
  }
  .sec-head .ja {
    display: none;
  }
  .news__in {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding-left: var(--pad);
  }
  .news__ja {
    margin-bottom: 1.6rem;
  }
  .news__list a {
    grid-template-columns: 9rem 1fr 1.4rem;
    gap: 1.2rem;
    padding: 1.4rem 0;
  }
  .news__list .cat {
    display: none;
  }
  .news__list .ttl {
    white-space: normal;
    font-size: 1.4rem;
  }
  .about__photo .frame {
    inset: -1rem -1rem auto 1rem;
  }
  .about__panel {
    padding: 2.8rem 2.2rem;
  }
  .about__panel p {
    font-size: 1.5rem;
    max-width: none;
  }
  .about__sub figcaption {
    white-space: normal;
    letter-spacing: 0.08em;
  }
  .about__mark {
    font-size: 7rem;
    top: 6rem;
  }
  .pillars {
    grid-template-columns: 1fr;
    gap: 4.4rem;
  }
  .pillar--a, .pillar--b, .pillar--c {
    margin-top: 0;
  }
  .pillar img {
    aspect-ratio: 4/3;
  }
}
/* ============ FLOW ============
   番号が意味を持つ唯一のセクション。縦の罫線に番号を打って進行を見せる。 */
.flow {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.sec-bgtext--f {
  right: auto;
  left: calc(var(--padL) - 0.6rem);
  top: auto;
  bottom: clamp(3rem, 5vw, 7rem);
  text-align: left;
  font-size: clamp(7rem, 13vw, 17rem);
  opacity: 0.04;
  line-height: 1;
}

.flow__head {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 7rem);
  align-items: end;
}

.flow__head .lead {
  margin-top: 0;
  color: rgba(245, 244, 241, 0.8);
}

.steps {
  margin-top: clamp(4rem, 5.5vw, 6.4rem);
  position: relative;
  padding-left: clamp(5rem, 6vw, 7.5rem);
}

.steps::before {
  content: "";
  position: absolute;
  left: clamp(2rem, 2.4vw, 3rem);
  top: 1.6rem;
  bottom: 2.4rem;
  width: 1px;
  background: rgba(245, 244, 241, 0.2);
}

.st {
  position: relative;
  padding: clamp(1.6rem, 2.2vw, 2.4rem) 0;
}

.st__b {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 4.4rem);
  align-items: baseline;
}

.st + .st {
  border-top: 1px solid rgba(245, 244, 241, 0.1);
}

.st__n {
  position: absolute;
  left: calc(-1 * clamp(5rem, 6vw, 7.5rem));
  top: clamp(1.9rem, 2.5vw, 2.8rem);
  width: clamp(4rem, 4.8vw, 6rem);
  text-align: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  color: rgba(245, 244, 241, 0.75);
  background: var(--ink);
  padding: 0.3rem 0;
}

.st h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.2vw, 2.3rem);
  letter-spacing: 0.08em;
}

.st p {
  font-size: 1.45rem;
  line-height: 1.95;
  color: rgba(245, 244, 241, 0.78);
  max-width: 56rem;
}

/* 分岐（01 現地調査／お打ち合わせ）。/flow/ の .fork と同じ考え方で、上の線で分かれて下の線で合流する */
.st .st__or {
  max-width: none;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: rgba(245, 244, 241, 0.55);
  text-align: center;
}

.st--fork .st__g {
  position: relative;
  margin-top: 1rem;
  padding: 2.2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 1.8vw, 2.2rem);
}

.st--fork .st__g::before, .st--fork .st__g::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  height: 2.2rem;
  border: 1px solid var(--lamp);
  opacity: 0.6;
}

.st--fork .st__g::before {
  top: 0;
  border-bottom: 0;
}

.st--fork .st__g::after {
  bottom: 0;
  border-top: 0;
}

.st--fork .st__b {
  grid-template-columns: 1fr;
  gap: 1.2rem;
  border: 1px solid rgba(245, 244, 241, 0.16);
  padding: clamp(1.8rem, 2vw, 2.4rem);
}

@media (max-width: 600px) {
  .st--fork .st__g {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .st--fork .st__g::before, .st--fork .st__g::after {
    display: none;
  }
}
/* ============ BLOG ============ */
/* TOPが「最新の投稿」表示のとき、WordPress は <body> に blog クラスを付ける。
   モックのブログ帯と名前がぶつかるので section に限定している。 */
section.blog {
  position: relative;
}

.blog__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.4vw, 4rem);
}

.bl figure {
  overflow: hidden;
}

.bl img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.bl:hover img {
  transform: scale(1.035);
}

.bl time {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.bl h3 {
  margin-top: 0.6rem;
  font-size: 1.6rem;
  line-height: 1.8;
  transition: color 0.3s;
}

.bl:hover h3 {
  color: var(--lamp);
}

section.blog .btn-line {
  margin-top: clamp(3rem, 4vw, 4.4rem);
}

/* ============ RECRUIT ============ */
.recruit {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}

.recruit__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.recruit__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recruit__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 11, 14, 0.86) 0%, rgba(10, 11, 14, 0.6) 46%, rgba(10, 11, 14, 0.35) 100%);
}

.recruit__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(7rem, 9vw, 12rem) var(--pad) clamp(7rem, 9vw, 12rem) var(--padL);
}

.recruit__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 3vw, 3.4rem);
  letter-spacing: 0.04em;
  color: rgba(245, 244, 241, 0.65);
  margin-bottom: 1rem;
}

.recruit .lead {
  margin-top: 2rem;
  color: rgba(245, 244, 241, 0.84);
}

.recruit__btns {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.btn-solid, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.7rem 3rem;
  font-size: 1.45rem;
  letter-spacing: 0.1em;
  transition: 0.35s;
}

.btn-solid {
  background: var(--paper);
  color: var(--ink);
}

.btn-solid:hover {
  background: var(--lamp);
}

.btn-solid--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn-solid--ink:hover {
  background: var(--lamp);
  color: var(--ink);
}

.btn-ghost {
  border: 1px solid rgba(245, 244, 241, 0.45);
}

.btn-ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.btn-ghost--ink {
  border-color: rgba(28, 28, 28, 0.28);
  color: var(--ink);
}

.btn-ghost--ink:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn-solid i, .btn-ghost i {
  display: block;
  width: 2.8rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.35s;
}

.btn-solid i::after, .btn-ghost i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.btn-solid:hover i, .btn-ghost:hover i {
  width: 4.2rem;
}

/* ============ CTA ============ */
.cta {
  position: relative;
}

.cta__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(7rem, 9vw, 12rem) var(--pad) clamp(7rem, 9vw, 12rem) var(--padL);
  max-width: min(var(--maxw), 112rem);
}

.cta__hand {
  display: block;
  width: min(39rem, 44%);
  height: auto;
  color: var(--ink);
  margin-bottom: 3.2rem;
  --rev:-25%; /* 見出し .rv と同じ「にじみながら左から開く」。幅25%のグラデーションで境目をぼかす */
  -webkit-mask-image: linear-gradient(96deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
  mask-image: linear-gradient(96deg, #000 0%, #000 var(--rev), transparent calc(var(--rev) + 25%));
}

.cta__h {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
  line-height: 1.6;
  letter-spacing: 0.07em;
}

.cta__lead {
  margin-top: 2.4rem;
  font-size: 1.55rem;
  line-height: 2;
  color: #3a3a38;
  max-width: 56rem;
}

.cta__btns {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.cta__tel {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  padding-top: 2.4rem;
  border-top: 1px solid rgba(28, 28, 28, 0.14);
}

.cta__tel a {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 3.6vw, 4rem);
  letter-spacing: 0.04em;
  display: block;
}

.cta__tel span {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

/* ============ FOOTER ============ */
.foot {
  background: var(--ink);
  color: var(--paper);
}

.foot__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(6rem, 7.5vw, 9rem) var(--pad) clamp(4rem, 5vw, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 37rem) minmax(0, 1fr);
  gap: clamp(3rem, 4.5vw, 6.4rem);
  align-items: start;
}

.foot__logo {
  display: block;
  width: 17rem;
  color: var(--paper);
}

.foot__logo svg {
  width: 100%;
  height: auto;
  display: block;
}

.foot__info {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.foot__info div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1.2rem;
}

.foot__info dt {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: rgba(245, 244, 241, 0.5);
}

/* 以前は word-break:keep-all だったが、日本語は空白がないので keep-all だと一切折り返せず、
   「対応エリア」の長い1文がスマホで右にはみ出していた（iOSは body の overflow-x:hidden が効かず横スクロールになる）。
   普通に折り返す。住所の郵便番号と住所は <br> で分けてあるので見た目は変わらない */
.foot__info dd {
  font-size: 1.35rem;
  line-height: 1.8;
  color: rgba(245, 244, 241, 0.86);
  overflow-wrap: anywhere;
}

.foot__sns {
  margin-top: 2.8rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.foot__sns a {
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  padding: 0.9rem 1.8rem;
  border: 1px solid rgba(245, 244, 241, 0.24);
  transition: 0.3s;
}

.foot__sns a:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.foot__nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.8rem, 2.4vw, 3.2rem);
}

.fn h3 {
  font-size: 1.15rem;
  letter-spacing: 0.2em;
  color: rgba(245, 244, 241, 0.5);
  font-weight: 400;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(245, 244, 241, 0.16);
}

.fn ul {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.fn a {
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: rgba(245, 244, 241, 0.86);
  transition: color 0.3s;
}

.fn a:hover {
  color: var(--lamp);
}

.foot__bar {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 2.4rem var(--pad) 3.2rem;
  border-top: 1px solid rgba(245, 244, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.copy {
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 241, 0.55);
}

.foot__policy {
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 241, 0.7);
}

.foot__policy:hover {
  color: var(--lamp);
}

@media (max-width: 1024px) {
  .flow__head {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .st__b {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .blog__grid {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
  .foot__in {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  .foot__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.8rem;
  }
}
@media (max-width: 820px) {
  .steps {
    padding-left: 4.4rem;
  }
  .steps::before {
    left: 1.6rem;
  }
  .st__n {
    left: -4.4rem;
    width: 3.2rem;
    font-size: 1.25rem;
  }
  .cta__hand {
    width: 82%;
  }
  .cta__btns, .recruit__btns {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-solid, .btn-ghost {
    justify-content: center;
  }
  .foot__nav {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
  .foot__info div {
    grid-template-columns: 7rem 1fr;
  }
}
/* ============ FACTS（数字と対応エリア図） ============
   ABOUTの締めとして置く。囲みは使わず、罫線だけで区切る。 */
.facts {
  max-width: var(--maxw);
  margin: clamp(4rem, 5vw, 6.4rem) auto 0;
  padding: clamp(3rem, 3.6vw, 4.4rem) var(--pad) 0 var(--padL);
  border-top: 1px solid rgba(28, 28, 28, 0.16);
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 5.6rem);
  align-items: center;
}

.area {
  color: var(--ink);
}

.area svg {
  width: 100%;
  height: auto;
  display: block;
  font-family: var(--serif);
}

.area figcaption {
  margin-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.85;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.facts__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.facts__list > div {
  padding: 0.4rem 0 0.4rem clamp(1.4rem, 1.8vw, 2.2rem);
  border-left: 1px solid rgba(28, 28, 28, 0.14);
}

.facts__list > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.facts__list dt {
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
  line-height: 1.7;
}

.facts__list dd {
  margin-top: 0.9rem;
  font-family: var(--mincho);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.facts__list dd em {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(2.6rem, 3.1vw, 3.4rem);
  line-height: 1;
}

/* ============ SERVICEメニューのサムネイル ============ */
.menu a {
  grid-template-columns: 5.6rem 2.6rem 1fr 1.2rem;
  column-gap: 1rem;
}

.menu .th {
  grid-row: 1/3;
  align-self: start;
  overflow: hidden;
  display: block;
  margin-top: 0.2rem;
}

.menu .th img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.33, 1, 0.68, 1);
}

.menu a:hover .th img {
  transform: scale(1.06);
}

.menu .ds {
  grid-column: 3/5;
}

/* ============ FLOWの目安期間バー ============ */
.st__ttl {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.st__term {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.st__term .bar {
  display: block;
  width: min(14rem, 60%);
  height: 2px;
  background: rgba(245, 244, 241, 0.16);
  position: relative;
}

.st__term .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--lamp);
  opacity: 0.85;
}

.st__term .lbl {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 241, 0.6);
  white-space: nowrap;
}

/* ============ VOICEの施工写真 ============ */
.vo {
  grid-template-columns: 14rem 15rem minmax(0, 1fr);
}

.vo__ph {
  overflow: hidden;
}

.vo__ph img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 2.8rem;
    padding-left: var(--pad);
  }
  .area {
    width: min(16rem, 42%);
  }
  .facts__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
  }
  .facts__list > div:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }
  .vo {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
  .vo__ph {
    grid-column: 1/-1;
    width: min(28rem, 60%);
  }
}
@media (max-width: 820px) {
  .facts__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .facts__list > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .menu a {
    grid-template-columns: 5rem 2.4rem 1fr 1.2rem;
  }
  .st__term .bar {
    width: 40%;
  }
  .vo {
    grid-template-columns: 1fr;
  }
  .vo__ph {
    width: 100%;
  }
}
/* ============ 外構メニューの線画アイコン ============
   既製のアイコン素材は使わず、線幅と角の処理をこのサイトに合わせて描いたもの。 */
.service__top {
  display: grid;
  grid-template-columns: minmax(0, 36rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 5vw, 7rem);
  align-items: end;
}

.service__top .lead {
  margin-top: 0;
}

.icons {
  margin: clamp(3.6rem, 4.5vw, 5.6rem) 0 clamp(3.6rem, 4.5vw, 5.6rem);
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border-top: 1px solid rgba(28, 28, 28, 0.14);
  border-bottom: 1px solid rgba(28, 28, 28, 0.14);
}

/* .ic はモック内で「サービスのアイコンタイル」と「FAQの開閉アイコン
   （.faq > summary .ic）」の両方に使われていて名前がぶつかる。
   タイル側は必ず .icons の中にあるので、そちらを限定する。 */
.icons .ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: clamp(2rem, 2.4vw, 2.8rem) 0.6rem;
  border-left: 1px solid rgba(28, 28, 28, 0.08);
  transition: color 0.3s;
}

.icons .ic:first-child {
  border-left: 0;
}

.ic__g {
  display: block;
  width: clamp(4.8rem, 5.4vw, 6.2rem);
  color: var(--ink);
}

.ic__g svg {
  width: 100%;
  height: auto;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1);
}

.ic__t {
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-align: center;
  color: #4a4a46;
  transition: color 0.3s;
}

.icons .ic:hover .ic__g svg {
  transform: translateY(-3px);
}

.icons .ic:hover .ic__t {
  color: var(--lamp);
}

.icons .ic:hover .ic__g {
  color: var(--lamp);
}

@media (max-width: 1200px) {
  .icons {
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 0;
  }
  .icons .ic {
    border-bottom: 1px solid rgba(28, 28, 28, 0.08);
  }
  .icons .ic:nth-child(5n+1) {
    border-left: 0;
  }
}
@media (max-width: 820px) {
  .service__top {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
  .icons {
    grid-template-columns: repeat(3, 1fr);
  }
  .icons .ic:nth-child(5n+1) {
    border-left: 1px solid rgba(28, 28, 28, 0.08);
  }
  .icons .ic:nth-child(3n+1) {
    border-left: 0;
  }
  .icons .ic {
    padding: 1.8rem 0.4rem;
  }
  .ic__t {
    font-size: 1.1rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__copy .ln i {
    opacity: 1 !important;
    transform: none !important;
  }
  .hw__line c {
    clip-path: none !important;
  }
  .hero__sub, .hw__en {
    opacity: 1 !important;
    transform: none !important;
  }
  #loader .lgmark {
    --rev:112%!important;
  }
  .cta__hand {
    --rev:125%!important;
  }
  .hw__svg {
    --rev:125%!important;
  }
  .rv {
    --rev:125%!important;
  }
}
/* ============ 下層のページヘッダー ============ */
.phead {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
  margin-top: 0;
}

.phead__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.phead__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phead__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 11, 14, 0.82) 0%, rgba(10, 11, 14, 0.58) 46%, rgba(10, 11, 14, 0.34) 100%);
}

.phead__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(13rem, 15vw, 17rem) var(--pad) clamp(5rem, 7vw, 8rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.phead__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
  letter-spacing: 0.04em;
  color: rgba(245, 244, 241, 0.72);
}

.phead__ja {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.8rem, 3.8vw, 4.2rem);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.phead__lead {
  margin-top: 1.6rem;
  font-size: 1.5rem;
  line-height: 2;
  color: rgba(245, 244, 241, 0.82);
  max-width: 52rem;
}

.crumb {
  background: var(--paper);
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.crumb ol {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: 1.4rem var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.crumb li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.crumb li + li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
}

.crumb a:hover {
  color: var(--lamp);
}

.crumb [aria-current] {
  color: var(--ink);
}

/* ============ 下層の本文まわり ============ */
/* WordPress は固定ページの <body> に page クラスを付ける。モックの .page（下層の
   本文コンテナ）と名前がぶつかり、版面の指定が body 全体に当たってしまうので、
   div に限定している。マークアップ側の .page は必ず div。 */
div.page {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(6rem, 8vw, 10rem) var(--pad);
}

.page__intro {
  max-width: 62rem;
  margin-bottom: clamp(4rem, 5vw, 6rem);
}

.page__intro .h2 {
  margin-bottom: 1.6rem;
}

.page__intro p {
  font-size: 1.55rem;
  line-height: 2;
  color: #3a3a38;
}

/* 明るい地のフィルタ */
.filters--light .lb {
  color: var(--ink-2);
}

.filters--light .chip {
  border-color: rgba(28, 28, 28, 0.2);
  color: var(--ink);
}

.filters--light .chip:hover {
  border-color: rgba(28, 28, 28, 0.55);
}

.filters--light .chip[aria-pressed=true] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* 施工事例カード（一覧） */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.2vw, 4rem) clamp(2.4rem, 3vw, 3.6rem);
}

.card {
  display: flex;
  flex-direction: column;
}

.card figure {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.card:hover img {
  transform: scale(1.04);
}

.card__tags {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.card__tags span {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border: 1px solid rgba(28, 28, 28, 0.18);
  padding: 0.35rem 0.85rem;
}

.card h3 {
  margin-top: 1rem;
  margin-bottom: 1.2rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  transition: color 0.3s;
}

.card:hover h3 {
  color: var(--lamp);
}

/* .card が flex column なので、行数が違ってもフッターは下端で揃う */
.card__foot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(28, 28, 28, 0.12);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}

.card__place {
  font-size: 1.25rem;
  color: var(--ink-2);
  letter-spacing: 0.06em;
}

.card__price {
  font-family: var(--serif);
  font-size: 1.7rem;
  letter-spacing: 0.02em;
}

.card__price small {
  font-family: var(--gothic);
  font-size: 1.15rem;
  color: var(--ink-2);
  margin-left: 0.3rem;
}

/* ページャ */
.pager {
  margin-top: clamp(4.4rem, 6vw, 7rem);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

.pager a, .pager span {
  min-width: 4.4rem;
  height: 4.4rem;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  border: 1px solid rgba(28, 28, 28, 0.18);
  transition: 0.3s;
}

.pager a:hover {
  border-color: var(--ink);
}

.pager [aria-current] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pager .nx {
  padding: 0 1.8rem;
}

.hits {
  margin: clamp(2.4rem, 3vw, 3.4rem) 0 clamp(2.4rem, 3vw, 3.4rem);
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border-top: 1px solid rgba(28, 28, 28, 0.12);
  padding-top: 1.6rem;
}

.hits em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 1.8rem;
  color: var(--ink);
  margin-right: 0.3rem;
}

@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .cards {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
  .phead__in {
    padding-top: 11rem;
    padding-bottom: 4.4rem;
  }
  .crumb ol {
    font-size: 1.1rem;
  }
}
/* ============ 読み物ページ共通 ============ */
.lead-c {
  max-width: 66rem;
  margin-bottom: clamp(4rem, 5vw, 6.4rem);
}

.lead-c p {
  margin-top: 2rem;
  font-size: 1.55rem;
  line-height: 2.05;
  color: #3a3a38;
}

.sechead {
  margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
}

.sechead .h2 {
  margin-top: 0.4rem;
}

.block {
  margin-top: clamp(6rem, 8vw, 10rem);
}

/* 外構メニュー：9枚 */
.mcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.2vw, 4rem) clamp(2.4rem, 3vw, 3.6rem);
}

.mcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.2vw, 4rem) clamp(2.4rem, 3vw, 3.6rem);
  align-items: start;
}

/* 3列を同じ高さで並べず、真ん中列を落として段をつける */
.mcards .mc:nth-child(3n+2) {
  margin-top: clamp(2.4rem, 4vw, 5.6rem);
}

.mcards .mc:nth-child(3n+3) {
  margin-top: clamp(1rem, 1.6vw, 2.4rem);
}

.mc figure {
  position: relative;
}

.mc figure::after {
  content: "";
  position: absolute;
  inset: auto -1.2rem -1.2rem auto;
  width: 50%;
  height: 42%;
  border-right: 1px solid rgba(28, 28, 28, 0.2);
  border-bottom: 1px solid rgba(28, 28, 28, 0.2);
  pointer-events: none;
}

.mc {
  display: flex;
  flex-direction: column;
}

.mc figure {
  overflow: hidden;
}

.mc img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.mc:hover img {
  transform: scale(1.04);
}

.mc__n {
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.mc h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0.06em;
  transition: color 0.3s;
}

.mc:hover h3 {
  color: var(--lamp);
}

.mc p {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.95;
  color: #4a4a46;
}

.mc__tags {
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.mc__tags span {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  border: 1px solid rgba(28, 28, 28, 0.18);
  padding: 0.35rem 0.85rem;
}

/* 下部の関連導線 */
.links3 {
  margin-top: clamp(4rem, 5vw, 6.4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(28, 28, 28, 0.14);
  border: 1px solid rgba(28, 28, 28, 0.14);
}

.links3 a {
  background: var(--paper);
  padding: clamp(2rem, 2.4vw, 2.8rem);
  transition: background 0.3s;
  display: block;
}

.links3 a:hover {
  background: #EFEDE8;
}

.links3 .t {
  font-family: var(--mincho);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.links3 .t::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.links3 .s {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  line-height: 1.85;
  color: var(--ink-2);
}

/* 選ばれる理由 */
.reasons4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(3.2rem, 4.5vw, 6rem) clamp(2.4rem, 3.4vw, 4.4rem);
}

.rs figure {
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.rs {
  position: relative;
}

.rs__bg {
  position: absolute;
  right: -0.4rem;
  top: -4.2rem;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(7rem, 9vw, 11rem);
  line-height: 1;
  color: var(--ink);
  opacity: 0.07;
}

.rs > *:not(.rs__bg) {
  position: relative;
  z-index: 1;
}

.rs figure {
  overflow: hidden;
  margin-bottom: 1.8rem;
  position: relative;
}

.rs figure::after {
  content: "";
  position: absolute;
  inset: auto auto -1.2rem -1.2rem;
  width: 45%;
  height: 40%;
  border-left: 1px solid rgba(28, 28, 28, 0.2);
  border-bottom: 1px solid rgba(28, 28, 28, 0.2);
  pointer-events: none;
}

.rs img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.rs .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.rs h3 {
  margin-top: 0.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.rs p {
  margin-top: 1.4rem;
  font-size: 1.5rem;
  line-height: 2;
  color: #3a3a38;
}

.rs h3 {
  margin-top: 0.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.1rem, 2.6vw, 2.7rem);
  line-height: 1.55;
  letter-spacing: 0.05em;
}

/* 結論を1行で先に立てる */
.rs__key {
  margin-top: 1.4rem !important;
  padding-left: 1.6rem;
  position: relative;
  font-family: var(--mincho);
  font-size: clamp(1.7rem, 1.9vw, 1.95rem);
  line-height: 1.75;
  letter-spacing: 0.04em;
  color: var(--ink) !important;
}

.rs__key::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  bottom: 0.35em;
  width: 2px;
  background: var(--lamp);
}

.rs__tags {
  margin-top: 1.6rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rs__tags span {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: #4a4a46;
  border: 1px solid rgba(28, 28, 28, 0.26);
  padding: 0.4rem 1rem;
}

.rs p {
  margin-top: 1.2rem;
  font-size: 1.45rem;
  line-height: 1.95;
  color: #3a3a38;
}

.rs--b {
  margin-top: clamp(2.4rem, 4vw, 5.6rem);
}

/* 数字でみる */
.nums {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(28, 28, 28, 0.18);
}

.nums > div {
  padding: clamp(2.4rem, 3vw, 3.4rem) 0 clamp(2.4rem, 3vw, 3.4rem) clamp(1.8rem, 2.4vw, 2.8rem);
  border-left: 1px solid rgba(28, 28, 28, 0.14);
}

.nums > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.nums dt {
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.nums dd {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-size: 1.35rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.nums dd em {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(3.4rem, 4.2vw, 4.6rem);
  line-height: 1;
}

/* よくある質問 */
.faqg {
  margin-top: clamp(3.6rem, 4.5vw, 5.6rem);
}

.faqg + .faqg {
  margin-top: clamp(5rem, 6vw, 7.5rem);
}

.faqg > h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  font-weight: 400;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink);
}

.faqg > h3::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--lamp);
  flex: 0 0 5px;
}

.faq {
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.faq > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 3.4rem 1fr 2rem;
  gap: 1.2rem;
  align-items: baseline;
  padding: 1.9rem 0.4rem;
  transition: color 0.3s;
}

.faq > summary::-webkit-details-marker {
  display: none;
}

.faq > summary:hover {
  color: var(--lamp);
}

.faq .q {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink-2);
  line-height: 1;
}

.faq .qt {
  font-size: 1.55rem;
  line-height: 1.75;
}

.faq > summary .ic {
  justify-self: end;
  align-self: center;
  position: relative;
  width: 14px;
  height: 14px;
}

.faq > summary .ic::before, .faq > summary .ic::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}

.faq > summary .ic::after {
  transform: rotate(90deg);
}

.faq[open] > summary .ic::after {
  transform: rotate(0);
}

.faq__w {
  overflow: hidden;
}

.faq__a {
  display: grid;
  grid-template-columns: 3.4rem 1fr;
  gap: 1.2rem;
  padding: 0 0.4rem 2.2rem;
  /* Q側（.faq > summary）と同じくベースラインで揃える。
     既定の stretch のままだと、A（line-height:1）が本文（line-height:2）より上にずれる */
  align-items: baseline;
}

.faq__a .a {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--lamp);
  line-height: 1;
}

.faq__a p {
  font-size: 1.45rem;
  line-height: 2;
  color: #3a3a38;
}

/* 会社概要 */
.philo__mark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  right: max(var(--pad), 50vw - var(--maxw) / 2 + var(--pad));
  top: 50%;
  transform: translateY(-50%);
  width: min(36rem, 27vw);
  color: var(--paper);
  opacity: 0.32;
}

.philo__mark svg {
  width: 100%;
  height: auto;
  display: block;
}

.philo > *:not(.philo__mark) {
  position: relative;
  z-index: 1;
}

.philo {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  margin: 0 calc(50% - 50vw) clamp(6rem, 8vw, 10rem);
  padding: clamp(6rem, 8vw, 10rem) max(var(--pad), 50vw - var(--maxw) / 2 + var(--pad));
}

.philo .label {
  color: rgba(245, 244, 241, 0.55);
}

.philo .phil p {
  color: rgba(245, 244, 241, 0.82);
}

.philo .phil .phil__c, .philo .phil p.strong {
  color: var(--paper);
}

.phil {
  max-width: 66rem;
}

.phil__c {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1.7;
  letter-spacing: 0.08em;
  margin-bottom: 2.8rem;
}

/* 経営理念のキャッチ。モックでは company.css だけが `.phil .phil__c` という
   強いセレクタで書いていて、これが無いと下の `.phil p`（0,1,1）に負けて
   本文と同じ1.5remになってしまう（実際そうなっていた）。
   このクラスを使っているのは会社概要だけなので、モックどおりの形に戻す。
   ※ body に page-company は付かない（WordPressが出すのは page-id-158）ので、
     以前の `.page-company …` では一度も効いていなかった。 */
.phil .phil__c {
  font-size: clamp(2.6rem, 3.2vw, 3.4rem);
  margin: 0 0 2.8rem;
  color: var(--ink);
}

.phil p {
  margin-top: 1.8rem;
  font-size: 1.5rem;
  line-height: 2.05;
  color: #3a3a38;
}

.phil p.strong {
  font-family: var(--mincho);
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-top: 2.6rem;
}

.phil .strong {
  font-family: var(--mincho);
  font-size: 1.75rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.msg {
  display: grid;
  grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
  gap: clamp(3rem, 5vw, 7rem);
  align-items: start;
}

.msg__fig {
  text-align: center;
}

.msg__fig .ph {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EFEDE8;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: var(--ink-2);
  letter-spacing: 0.1em;
}

.msg__fig figcaption {
  margin-top: 1.4rem;
  font-size: 1.25rem;
  color: var(--ink-2);
}

.msg__b h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  line-height: 1.7;
  letter-spacing: 0.07em;
}

.msg__b p {
  margin-top: 1.8rem;
  font-size: 1.5rem;
  line-height: 2.05;
  color: #3a3a38;
}

.msg__sign {
  margin-top: 2.8rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(28, 28, 28, 0.14);
  font-size: 1.3rem;
  color: var(--ink-2);
}

.msg__sign strong {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.access {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.4rem, 3.4vw, 4.4rem);
}

.access h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.08em;
}

.access p {
  margin-top: 0.8rem;
  font-size: 1.35rem;
  line-height: 1.85;
  color: var(--ink-2);
}

.access .map {
  margin-top: 1.6rem;
  aspect-ratio: 4/3;
  background: #EFEDE8;
  border: 1px solid rgba(28, 28, 28, 0.14);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-2);
}

@media (max-width: 1024px) {
  .mcards {
    grid-template-columns: repeat(2, 1fr);
  }
  .mcards .mc:nth-child(n) {
    margin-top: 0;
  }
  .mcards .mc:nth-child(2n) {
    margin-top: clamp(2rem, 3vw, 4rem);
  }
  .links3 {
    grid-template-columns: 1fr;
  }
  .reasons4 {
    grid-template-columns: 1fr;
  }
  .rs--b {
    margin-top: 0;
  }
  .nums {
    grid-template-columns: repeat(2, 1fr);
  }
  .nums > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .msg {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .msg__fig {
    max-width: 24rem;
  }
  .access {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .mcards {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }
  .nums {
    grid-template-columns: 1fr;
  }
  .nums > div {
    border-left: 0;
    padding-left: 0;
    border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  }
  .faq > summary {
    grid-template-columns: 2.6rem 1fr 1.6rem;
    gap: 0.9rem;
    padding: 1.6rem 0.2rem;
  }
  .faq__a {
    grid-template-columns: 2.6rem 1fr;
    gap: 0.9rem;
  }
}
/* ============ 追加：WordPress側で必要になった小物 ============ */
/* 本文ブロックのあとに置くボタン1個ぶんの間隔
   （モックでは style 属性で書かれていた分をクラスにした） */
.lead-btn {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

/* 非公開ページの注記。note-b を流用しつつ、色だけ警告寄りにする */
.note-b--private {
  border-color: rgba(180, 72, 60, 0.35);
  background: rgba(180, 72, 60, 0.05);
}

.note-b--private p {
  color: #8d3a31;
}

/* ============ 流れ：縦のタイムライン ============ */
.tl {
  position: relative;
  padding-left: clamp(5.6rem, 7vw, 9rem);
  margin-top: clamp(3.6rem, 4.5vw, 5.6rem);
}

.tl::before {
  content: "";
  position: absolute;
  left: clamp(2.2rem, 2.8vw, 3.6rem);
  top: 2rem;
  bottom: 3rem;
  width: 1px;
  background: rgba(28, 28, 28, 0.18);
}

.tlx {
  position: relative;
  padding: clamp(2.4rem, 3vw, 3.6rem) 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.tlx:first-child {
  padding-top: 0;
}

.tlx__n {
  position: absolute;
  left: calc(-1 * clamp(5.6rem, 7vw, 9rem));
  top: clamp(2.6rem, 3.2vw, 3.9rem);
  width: clamp(4.4rem, 5.6vw, 7.2rem);
  text-align: center;
  background: var(--paper);
  padding: 0.6rem 0;
}

.tlx:first-child .tlx__n {
  top: 0;
}

.tlx__n em {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--ink);
}

.tlx__n span {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: #6b6b66;
}

.tlx__b {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(2rem, 3.4vw, 4.4rem);
  align-items: start;
}

.tlx h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  letter-spacing: 0.06em;
}

.tlx__d {
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 2;
  color: #2b2b29;
  max-width: 52rem;
}

.tlx__term {
  margin-top: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.tlx__term .bar {
  display: block;
  width: min(16rem, 50%);
  height: 2px;
  background: rgba(28, 28, 28, 0.14);
  position: relative;
}

.tlx__term .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--lamp);
}

.tlx__term .lbl {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #6b6b66;
  white-space: nowrap;
}

.tlx__do {
  border-left: 1px solid rgba(28, 28, 28, 0.16);
  padding-left: clamp(1.6rem, 2vw, 2.4rem);
}

.tlx__do h4 {
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: #6b6b66;
  font-weight: 400;
}

.tlx__do ul {
  margin-top: 1rem;
}

.tlx__do li {
  position: relative;
  padding-left: 1.6rem;
  margin-top: 0.7rem;
  font-size: 1.35rem;
  line-height: 1.85;
  color: #3a3a38;
}

.tlx__do li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 8px;
  height: 1px;
  background: var(--lamp);
}

.tlx__do + .tlx__do {
  margin-top: 1.8rem;
}

/* 分岐（01 現地調査／お打ち合わせ）。上の線で2本に分かれ、下の線で次の段に合流する */
.fork__note {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: #6b6b66;
}

.fork__g {
  position: relative;
  margin-top: 1rem;
  padding: 2.4rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 1.8vw, 2.2rem);
}

.fork__g::before, .fork__g::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  height: 2.4rem;
  border: 1px solid var(--lamp);
  opacity: 0.75;
}

.fork__g::before {
  top: 0;
  border-bottom: 0;
}

.fork__g::after {
  bottom: 0;
  border-top: 0;
}

.fork__c {
  background: #FBFAF7;
  border: 1px solid rgba(28, 28, 28, 0.13);
  padding: clamp(1.8rem, 2vw, 2.4rem);
}

.fork__c h3 {
  font-size: clamp(1.9rem, 2vw, 2.2rem);
}

.fork__c .tlx__d {
  font-size: 1.4rem;
  line-height: 1.95;
}

.fork__c .tlx__term .bar {
  width: min(10rem, 40%);
}

@media (max-width: 600px) {
  .fork__g {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .fork__g::before, .fork__g::after {
    display: none;
  }
}
/* ============ 比較表 ============ */
.cmp {
  width: 100%;
  border-collapse: collapse;
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

.cmp th, .cmp td {
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  padding: 1.4rem 1.2rem;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.8;
}

.cmp thead th {
  border-bottom: 1px solid var(--ink);
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: #6b6b66;
  font-weight: 400;
}

.cmp thead th.on {
  color: var(--ink);
  font-family: var(--mincho);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}

.cmp tbody th {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: #6b6b66;
  font-weight: 400;
  width: 16rem;
}

.cmp .y {
  color: var(--lamp);
  font-family: var(--serif);
  font-size: 1.7rem;
}

.cmp .n {
  color: #a8a49c;
  font-family: var(--serif);
  font-size: 1.7rem;
}

.cmp col.on, .cmp td.on {
  background: #EFEDE8;
}

/* ============ 評価スコア ============ */
.score {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 4vw, 6rem);
  align-items: center;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid rgba(28, 28, 28, 0.14);
  padding: clamp(2.4rem, 3vw, 3.6rem) 0;
}

.score__t {
  text-align: center;
}

.score__t em {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(4.4rem, 5.6vw, 6.4rem);
  line-height: 1;
}

.score__t em {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(4.4rem, 5.6vw, 6.4rem);
  line-height: 1;
}

.score__t .st {
  color: var(--lamp);
  letter-spacing: 0.2em;
  font-size: 1.5rem;
}

.score__t .c {
  margin-top: 0.6rem;
  font-size: 1.2rem;
  color: #6b6b66;
  letter-spacing: 0.08em;
}

.score__l {
  display: grid;
  gap: 1.2rem;
}

/* 項目名の列は「工期・スケジュール」（9文字）が1行に収まる幅にしておく */
.score__l div {
  display: grid;
  grid-template-columns: 13rem 1fr 4rem;
  gap: 1.6rem;
  align-items: center;
}

.score__l dt {
  font-size: 1.3rem;
  line-height: 1.5;
  color: #3a3a38;
  white-space: nowrap;
}

.score__l .bar {
  height: 2px;
  background: rgba(28, 28, 28, 0.14);
  position: relative;
}

.score__l .bar i {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--lamp);
}

.score__l dd {
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: right;
}

/* ============ 声カード ============ */
.vcards {
  margin-top: clamp(3rem, 4vw, 4.4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.4rem, 3.2vw, 4rem);
}

.vc {
  border-top: 1px solid rgba(28, 28, 28, 0.2);
  padding-top: 1.8rem;
  display: flex;
  flex-direction: column;
}

.vc .st {
  color: var(--lamp);
  letter-spacing: 0.24em;
  font-size: 1.3rem;
}

.vc h3 {
  margin-top: 0.9rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.2vw, 2.2rem);
  line-height: 1.65;
  letter-spacing: 0.05em;
}

.vc p {
  margin-top: 1.2rem;
  font-size: 1.45rem;
  line-height: 1.95;
  color: #2b2b29;
}

.vc__f {
  margin-top: auto;
  padding-top: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.vc__f .who {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  color: #6b6b66;
}

.vc__f a {
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(28, 28, 28, 0.3);
  transition: color 0.3s;
}

.vc__f a:hover {
  color: var(--lamp);
}

.vc__b {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* アンケート用紙つき：左に用紙・右に本文。
   「半分ぐらいでいい」は用紙と文章の枠ごと半分、という指示（2026-10）。
   1行ぶち抜きをやめて通常のカードと同じ2列の1マスに収め、その中で用紙 2：本文 3 に割る。読むときはポップアップで拡大 */
.vc--sheet {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(1.8rem, 2.4vw, 2.8rem);
  align-items: start;
  padding-top: clamp(2.4rem, 3vw, 3.2rem);
}

.vc__sheet {
  display: block;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(28, 28, 28, 0.45);
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.vc__sheet:hover {
  transform: translateY(-3px);
}

.vc__sheet img {
  display: block;
  width: 100%;
  height: auto;
}

.vc--sheet .vc__b {
  flex: none;
}

.vc--sheet .vc__f {
  margin-top: 0;
  padding-top: 1.6rem;
}

.vc__sheet {
  cursor: zoom-in;
}

/* アンケート用紙のポップアップ（js/main.js で <dialog> を作る） */
.sheet-pop {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: auto;
  opacity: 0;
  transition: opacity 0.28s ease;
  outline: 0;
}

.sheet-pop:not([open]) {
  display: none;
}

.sheet-pop::backdrop {
  background: rgba(20, 20, 19, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.sheet-pop img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(92vw, 80rem);
  max-height: 92vh;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}

.sheet-pop.is-open {
  opacity: 1;
}

.sheet-pop.is-open img {
  transform: none;
}

.sheet-pop__x {
  position: fixed;
  top: clamp(1.2rem, 2vw, 2.4rem);
  right: clamp(1.2rem, 2vw, 2.4rem);
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: rgba(245, 244, 241, 0.92);
  cursor: pointer;
}

.sheet-pop__x::before, .sheet-pop__x::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.8rem;
  height: 1px;
  background: var(--ink);
}

.sheet-pop__x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sheet-pop__x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .sheet-pop, .sheet-pop img {
    transition: none;
  }
}
@media (max-width: 820px) {
  .vcards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .vc--sheet {
    grid-template-columns: 1fr;
  }
  .vc__sheet {
    max-width: 20rem;
  }
}
/* ============ スタッフ ============ */
.staff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(3rem, 4vw, 5.6rem);
}

.sf__ph {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #EFEDE8;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  color: #6b6b66;
  letter-spacing: 0.1em;
  overflow: hidden;
}

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

.sf__r {
  margin-top: 2rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: #6b6b66;
}

.sf h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 2.2rem;
  letter-spacing: 0.12em;
}

.sf__c {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.95;
  color: #2b2b29;
}

.sf__q {
  margin-top: 1.8rem;
  border-top: 1px solid rgba(28, 28, 28, 0.14);
}

.sf__q div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.2rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.09);
}

.sf__q dt {
  font-size: 1.2rem;
  color: #6b6b66;
  letter-spacing: 0.08em;
}

.sf__q dd {
  font-size: 1.35rem;
  line-height: 1.8;
  color: #3a3a38;
}

.sf__lic {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sf__lic span {
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: #4a4a46;
  border: 1px solid rgba(28, 28, 28, 0.24);
  padding: 0.35rem 0.85rem;
}

/* ============ 商材ページ ============ */
.hero-copy {
  text-align: center;
  max-width: 76rem;
  margin: 0 auto clamp(4rem, 5vw, 6.4rem);
}

.hero-copy .cert {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--lamp);
}

.hero-copy h2 {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.6rem, 3.6vw, 4rem);
  line-height: 1.55;
  letter-spacing: 0.07em;
}

.hero-copy p {
  margin-top: 2rem;
  font-size: 1.55rem;
  line-height: 2.05;
  color: #2b2b29;
}

.feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3.2vw, 4rem);
}

.ft figure {
  overflow: hidden;
  margin-bottom: 1.8rem;
}

.ft img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ft .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: #6b6b66;
  letter-spacing: 0.1em;
}

.ft h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.ft p {
  margin-top: 1.2rem;
  font-size: 1.42rem;
  line-height: 1.95;
  color: #3a3a38;
}

.lineup {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(28, 28, 28, 0.14);
  border: 1px solid rgba(28, 28, 28, 0.14);
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

.lineup > div {
  background: var(--paper);
  padding: clamp(2rem, 2.4vw, 2.8rem);
  text-align: center;
}

.lineup .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #6b6b66;
}

.lineup h3 {
  margin-top: 0.6rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.08em;
}

.lineup p {
  margin-top: 0.8rem;
  font-size: 1.25rem;
  line-height: 1.8;
  color: #5a5a55;
}

/* ロゴ（tf_lineup の3列目） */
/* 画像自体に余白が多いので大きめに置く */
.lineup p.logo {
  margin: 0 0 0.4rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(11rem, 11vw, 14rem);
}

.lineup .logo img {
  max-width: min(100%, 22rem);
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}

.movie {
  margin-top: clamp(3rem, 4vw, 4.4rem);
}

.movie .box {
  aspect-ratio: 16/9;
  background: #EFEDE8;
  border: 1px solid rgba(28, 28, 28, 0.14);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: #6b6b66;
}

.movie figcaption {
  margin-top: 1rem;
  font-size: 1.25rem;
  color: #5a5a55;
}

.tagline {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.tagline span {
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #3a3a38;
  border: 1px solid rgba(28, 28, 28, 0.24);
  padding: 0.6rem 1.3rem;
}

.note-b {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  padding: clamp(2rem, 2.4vw, 2.8rem);
  border: 1px solid rgba(28, 28, 28, 0.16);
  background: #EFEDE8;
}

.note-b h3 {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 400;
}

.note-b h3::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--lamp);
}

.note-b p {
  margin-top: 1rem;
  font-size: 1.35rem;
  line-height: 1.95;
  color: #3a3a38;
}

.steps4 {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 2.4vw, 3rem);
}

.st4 {
  border-top: 1px solid var(--ink);
  padding-top: 1.4rem;
}

.st4 .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #6b6b66;
}

.st4 h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.06em;
}

.st4 p {
  margin-top: 0.9rem;
  font-size: 1.3rem;
  line-height: 1.85;
  color: #3a3a38;
}

@media (max-width: 1024px) {
  .tlx__b {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .tlx__do {
    border-left: 0;
    border-top: 1px solid rgba(28, 28, 28, 0.16);
    padding-left: 0;
    padding-top: 1.6rem;
  }
  .vcards {
    grid-template-columns: 1fr;
  }
  .staff {
    grid-template-columns: repeat(2, 1fr);
  }
  .feat {
    grid-template-columns: 1fr;
  }
  .lineup {
    grid-template-columns: repeat(2, 1fr);
  }
  .steps4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .score {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}
@media (max-width: 820px) {
  .tl {
    padding-left: 4.4rem;
  }
  .tl::before {
    left: 1.8rem;
  }
  .tlx__n {
    left: -4.4rem;
    width: 3.6rem;
  }
  .tlx__n em {
    font-size: 1.8rem;
  }
  .staff {
    grid-template-columns: 1fr;
  }
  .cmp thead th, .cmp tbody th {
    font-size: 1.15rem;
  }
  .cmp th, .cmp td {
    padding: 1rem 0.6rem;
    font-size: 1.3rem;
  }
  .lineup, .steps4 {
    grid-template-columns: 1fr;
  }
  .score__l div {
    grid-template-columns: 8rem 1fr 3.4rem;
    gap: 1rem;
  }
  /* リード文。スマホ幅だと中央揃えでは行が何度も折り返して行頭が揃わず、
     読み出しがつかまえにくい。見出しは中央のまま、本文だけ左揃えにする */
  .hero-copy p {
    text-align: left;
  }
}
.sim__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.4rem, 3vw, 3.6rem);
  align-items: start;
}

.plan {
  position: relative;
  background: #FBFAF7;
  border: 1px solid rgba(28, 28, 28, 0.13);
  display: flex;
  flex-direction: column;
}

.plan--mid {
  border-color: rgba(200, 169, 106, 0.75);
  box-shadow: 0 22px 52px -34px rgba(28, 28, 28, 0.42);
}

.plan__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: var(--lamp);
  color: #241d10;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  padding: 0.7rem 1.4rem;
}

.plan figure {
  overflow: hidden;
  margin: 0;
}

.plan img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.plan__body {
  padding: clamp(2.2rem, 2.6vw, 3rem) clamp(2rem, 2.4vw, 2.8rem) clamp(2.4rem, 3vw, 3.2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plan .rank {
  display: flex;
  align-items: baseline;
  gap: 1rem;
}

.plan .rank .ja {
  font-family: var(--mincho);
  font-size: 1.85rem;
  letter-spacing: 0.12em;
}

.plan .rank .en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: #6b6b66;
}

.tsubo2 {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #6b6b66;
}

.tsubo2 em {
  font-family: var(--serif);
  font-style: normal;
  font-size: 2rem;
  color: var(--ink);
  margin: 0 0.2rem;
}

.plan .price {
  margin-top: 0.4rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  font-family: var(--mincho);
  font-size: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.plan .price em {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(3.4rem, 4vw, 4.4rem);
  line-height: 1;
}

.plan .price span {
  font-family: var(--serif);
  font-size: 1.8rem;
  color: #6b6b66;
}

.plan--mid .price {
  border-bottom-color: var(--lamp);
}

.term2 {
  margin-top: 0.8rem;
  font-size: 1.25rem;
  color: #6b6b66;
  letter-spacing: 0.06em;
}

.plan ul {
  margin-top: 1.6rem;
  border-top: 1px solid rgba(28, 28, 28, 0.1);
}

.plan li {
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.08);
  font-size: 1.35rem;
  line-height: 1.8;
  color: #3a3a38;
  display: flex;
  gap: 0.9rem;
}

.plan li::before {
  content: "—";
  color: rgba(28, 28, 28, 0.3);
}

.plan__note {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  line-height: 1.9;
  color: #5a5a55;
}

.plan .btn-line {
  margin-top: auto;
  padding-top: 2.2rem;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .sim__grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}
.paper {
  position: relative;
  overflow: hidden;
}

div.page {
  position: relative;
  z-index: 1;
} /* body.page と衝突するため div に限定 */
.sec-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  width: min(60rem, 44vw);
  aspect-ratio: 1/1;
}

.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.1;
}

.sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, transparent 30%, var(--paper) 88%);
}

.sec-bg--left {
  left: -14rem;
  top: 6rem;
}

.sec-bg--right {
  right: -16rem;
  top: 8rem;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__copy .ln i {
    opacity: 1 !important;
    transform: none !important;
  }
  .hw__line c {
    clip-path: none !important;
  }
  .hero__sub, .hw__en {
    opacity: 1 !important;
    transform: none !important;
  }
  #loader .lgmark {
    --rev:112%!important;
  }
  .cta__hand {
    --rev:125%!important;
  }
  .hw__svg {
    --rev:125%!important;
  }
  .rv {
    --rev:125%!important;
  }
}
/* ============ 受賞歴 ============ */
.aw {
  border-top: 1px solid var(--ink);
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

.awx {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2rem, 3.4vw, 4.4rem);
  align-items: start;
  padding: clamp(2.4rem, 3vw, 3.6rem) 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.awx__y {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  line-height: 1;
  letter-spacing: 0.02em;
}

.awx__y span {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--gothic);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: #6b6b66;
}

.awx__b .cat {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: #6b6b66;
}

.awx__b h3 {
  margin-top: 0.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.9rem, 2.3vw, 2.3rem);
  line-height: 1.6;
  letter-spacing: 0.05em;
}

.awx__b .org {
  margin-top: 0.8rem;
  font-size: 1.3rem;
  color: #5a5a55;
  letter-spacing: 0.06em;
}

.awx__b p {
  margin-top: 1.2rem;
  font-size: 1.42rem;
  line-height: 1.95;
  color: #2b2b29;
  max-width: 46rem;
}

.awx__b .btn-line {
  margin-top: 1.6rem;
}

.awx__ph {
  overflow: hidden;
}

.awx__ph img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.awx__ph figcaption {
  margin-top: 0.9rem;
  font-size: 1.2rem;
  line-height: 1.8;
  color: #6b6b66;
}

/* 認定・資格 */
.certs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(28, 28, 28, 0.14);
  border: 1px solid rgba(28, 28, 28, 0.14);
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

.certs > div {
  background: var(--paper);
  padding: clamp(2.2rem, 2.6vw, 3rem);
}

.certs .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: #6b6b66;
  letter-spacing: 0.1em;
}

.certs h3 {
  margin-top: 0.5rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: 0.06em;
}

.certs p {
  margin-top: 1rem;
  font-size: 1.32rem;
  line-height: 1.9;
  color: #3a3a38;
}

.certs .no {
  margin-top: 1.2rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #5a5a55;
}

.empty {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  padding: clamp(3.6rem, 4.5vw, 5.6rem) clamp(2.4rem, 3vw, 3.4rem);
  border: 1px dashed rgba(28, 28, 28, 0.28);
  text-align: center;
}

.empty p {
  font-family: var(--mincho);
  font-size: 1.7rem;
  letter-spacing: 0.06em;
  color: #5a5a55;
}

.empty span {
  display: block;
  margin-top: 1rem;
  font-size: 1.3rem;
  color: #6b6b66;
}

@media (max-width: 1024px) {
  .awx {
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: 1.8rem 2.4rem;
  }
  .awx__ph {
    grid-column: 2;
  }
  .certs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .awx {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .awx__ph {
    grid-column: 1;
    max-width: 28rem;
  }
  .awx__y {
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .awx__y span {
    margin-top: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__copy .ln i {
    opacity: 1 !important;
    transform: none !important;
  }
  .hw__line c {
    clip-path: none !important;
  }
  .hero__sub, .hw__en {
    opacity: 1 !important;
    transform: none !important;
  }
  #loader .lgmark {
    --rev:112%!important;
  }
  .cta__hand {
    --rev:125%!important;
  }
  .hw__svg {
    --rev:125%!important;
  }
  .rv {
    --rev:125%!important;
  }
}
/* ============ 施工事例：詳細 ============ */
.phead--case .phead__in {
  padding-bottom: clamp(4rem, 5.5vw, 6.4rem);
}

.phead--case .phead__ja {
  font-size: clamp(2.6rem, 3.4vw, 3.8rem);
  line-height: 1.5;
}

.case__tags {
  margin-top: 2rem;
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}

.case__tags span {
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: rgba(245, 244, 241, 0.85);
  border: 1px solid rgba(245, 244, 241, 0.35);
  padding: 0.45rem 1.1rem;
}

/* 写真：1枚を大きく＋サムネイルで切り替え */
.gal__stage {
  position: relative;
}

.gal__main {
  overflow: hidden;
}

.gal__main img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: clamp(4.4rem, 3.6vw, 5.4rem);
  aspect-ratio: 1;
  border: 1px solid rgba(245, 244, 241, 0.55);
  background: rgba(16, 17, 20, 0.3);
  backdrop-filter: blur(2px);
  transition: 0.3s;
}

.gal__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--paper);
  border-top: 1px solid var(--paper);
}

.gal__nav--prev {
  left: clamp(1.2rem, 1.6vw, 2rem);
}

.gal__nav--next {
  right: clamp(1.2rem, 1.6vw, 2rem);
}

.gal__nav--prev::before {
  transform: translate(-40%, -50%) rotate(-135deg);
}

.gal__nav--next::before {
  transform: translate(-60%, -50%) rotate(45deg);
}

.gal__nav:hover {
  background: var(--paper);
  border-color: var(--paper);
}

.gal__nav:hover::before {
  border-color: var(--ink);
}

.gal__count {
  position: absolute;
  right: 1.6rem;
  bottom: 1.4rem;
  z-index: 2;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: rgba(245, 244, 241, 0.85);
  text-shadow: 0 1px 10px rgba(10, 11, 14, 0.7);
}

.gal__count em {
  font-style: normal;
  font-size: 1.9rem;
  color: var(--paper);
}

.gal__cap {
  margin-top: 1.2rem;
  font-size: 1.3rem;
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  min-height: 2.4rem;
}

.gal__thumbs {
  margin-top: 1.6rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 1.4vw, 1.6rem);
}

.gal__thumbs .th {
  display: block;
  width: 100%;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.gal__thumbs img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
  opacity: 0.5;
  transition: opacity 0.35s, transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

.gal__thumbs .th:hover img {
  opacity: 0.85;
  transform: scale(1.04);
}

.gal__thumbs .th.is-on img {
  opacity: 1;
}

.gal__thumbs .th::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--lamp);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}

.gal__thumbs .th.is-on::after {
  transform: scaleX(1);
}

/* 工事概要 */
.spec {
  margin-top: clamp(5rem, 7vw, 9rem);
}

.spec__head {
  margin-bottom: clamp(2rem, 2.6vw, 3rem);
}

.spec__head .h2 {
  margin-top: 0.4rem;
}

.spec__list {
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(3rem, 5vw, 7rem);
}

.spec__list > div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.6rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
}

.spec__list .wide {
  grid-column: 1/-1;
}

.spec__list dt {
  font-size: 1.25rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.spec__list dd {
  font-size: 1.45rem;
  line-height: 1.85;
}

.spec__list dd.yen {
  font-family: var(--serif);
  font-size: 2rem;
  letter-spacing: 0.02em;
}

.spec__cta {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

/* 関連事例 */
.rel {
  margin-top: clamp(6rem, 8vw, 10rem);
}

.rel__head {
  margin-bottom: clamp(2.4rem, 3vw, 3.6rem);
}

.rel__head .h2 {
  margin-top: 0.4rem;
}

.rel__foot {
  margin-top: clamp(3rem, 4vw, 4.4rem);
}

@media (max-width: 1024px) {
  .spec__list {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .gal__thumbs {
    gap: 0.6rem;
  }
  .gal__nav {
    width: 3.8rem;
  }
  .spec__list > div {
    grid-template-columns: 7.5rem 1fr;
    gap: 1.2rem;
  }
}
/* ============ BEFORE / AFTER ============
   モックには無いが、既存サイトで使っている2枚組み。
   施工事例詳細のギャラリーと同じ余白感で並べる。 */
.ba {
  margin-top: clamp(4.4rem, 6vw, 7rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 3vw, 3.2rem);
}

.ba figure {
  position: relative;
}

.ba img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.ba figcaption {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.6rem 1.4rem;
  font-family: var(--serif);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  background: var(--ink);
  color: var(--paper);
}

.ba figure:last-child figcaption {
  background: var(--lamp);
  color: var(--ink);
}

@media (max-width: 768px) {
  .ba {
    grid-template-columns: 1fr;
  }
}
/* ============ 下層の“遊び”：見出し帯・透かし背景 ============ */
/* 見出し帯の組み直し。下層は「見出しの下余白は0にして、続く .page 側で空ける」作り。
   TOPは逆に .sec-head の margin-bottom（3.2〜5rem）で空けて、続く .sec の padding-top を0にしている。
   モックはページごとにCSSが分かれていたので両立していたが、1枚にまとめると
   後勝ちでこちらがTOPにも効き、「About 私たちのこと」の下が詰まってしまう。
   下層だけに限るため、<main> の直下にある見出しに絞る（TOPは <section> の中）。 */
main > .sec-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(5.5rem, 6.5vw, 8.5rem) var(--pad) 0;
  margin-bottom: clamp(-1rem, 0vw, 0rem);
}

.sec-head .num {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: var(--ink-2);
}

.sec-head .ln {
  flex: 0 0 clamp(3rem, 6vw, 7rem);
  height: 1px;
  background: currentColor;
  opacity: 0.28;
}

.sec-head .en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
}

.sec-head .ja {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  margin-left: 0.4rem;
}

.sec-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.14;
}

.sec-head + .page {
  padding-top: clamp(3.6rem, 4.5vw, 5.6rem);
}

.sec-bg {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
  width: min(60rem, 44vw);
  aspect-ratio: 1/1;
}

.sec-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(0.85);
  opacity: 0.1;
}

.sec-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side, transparent 30%, var(--paper) 88%);
}

.sec-bg--left {
  left: -14rem;
  top: 6rem;
}

.sec-bg--right {
  right: -16rem;
  top: 8rem;
}

.paper {
  position: relative;
  overflow: hidden;
}

div.page {
  position: relative;
  z-index: 1;
} /* body.page と衝突するため div に限定 */
/* 表は幅が足りないとき横スクロールさせる（本文は横に流れない） */
.tbl-wrap {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  overflow-x: auto;
}

.tbl-wrap .cmp {
  min-width: 56rem;
}

/* セクション見出しの直下に置くリード文 */
.block-lead {
  max-width: 64rem;
  font-size: 1.55rem;
  line-height: 2;
  color: #2b2b29;
}

/* ============ 視認性の底上げ ============ */
.lead-c p {
  font-size: 1.6rem;
  line-height: 2;
  color: #2b2b29;
}

.page__intro p {
  font-size: 1.6rem;
  line-height: 2;
  color: #2b2b29;
}

.mc p {
  font-size: 1.45rem;
  line-height: 1.95;
  color: #3a3a38;
}

.mc__tags span, .card__tags span, .work__meta span {
  color: #4a4a46;
  border-color: rgba(28, 28, 28, 0.26);
}

.mc__n {
  color: #6b6b66;
}

.rs p {
  color: #2b2b29;
}

.phil p {
  color: #2b2b29;
}

.msg__b p {
  color: #2b2b29;
}

.faq__a p {
  font-size: 1.5rem;
  line-height: 2;
  color: #2b2b29;
}

.faq .qt {
  font-size: 1.6rem;
}

.nums dt, .req dt, .spec__list dt, .side__b .n, .card__place, .gal__cap {
  color: #6b6b66;
}

.post p {
  color: #3a3a38;
}

.form__note, .form__foot .cau {
  color: #5a5a55;
}

.crumb ol {
  color: #5a5a55;
}

.access p, .msg__fig figcaption {
  color: #5a5a55;
}

/* 上の「視認性の底上げ」は、モックでは下層ページのCSSにだけ入っていたもので、
   TOPには効いていなかった。こちらは全ページ1枚のCSSにまとめているため、
   TOPの黒い帯（施工事例・流れなど）にまで暗い文字色がかかってしまう。
   暗い面の中だけ、モックのTOPと同じ配色に戻す。 */
[data-tone=dark] .work__meta span,
[data-tone=dark] .mc__tags span,
[data-tone=dark] .card__tags span {
  color: rgba(245, 244, 241, 0.7);
  border-color: rgba(245, 244, 241, 0.2);
}

[data-tone=dark] .card__place {
  color: rgba(245, 244, 241, 0.55);
}

/* 会社情報 */
.req {
  border-top: 1px solid var(--ink);
}

.req > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 2.4vw, 3.2rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  align-items: baseline;
}

.req dt {
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: #6b6b66;
}

.req dd {
  font-size: 1.5rem;
  line-height: 1.9;
  color: #2b2b29;
}

/* ストーリーは中央に */
.story {
  max-width: 72rem;
  margin-inline: auto;
}

.story .sechead {
  text-align: center;
}

.story .sechead .label {
  display: block;
}

.story .phil {
  max-width: none;
}

@media (max-width: 1024px) {
  .philo__mark {
    display: none;
  }
}
@media (max-width: 820px) {
  .req > div {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.3rem 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__copy .ln i {
    opacity: 1 !important;
    transform: none !important;
  }
  .hw__line c {
    clip-path: none !important;
  }
  .hero__sub, .hw__en {
    opacity: 1 !important;
    transform: none !important;
  }
  #loader .lgmark {
    --rev:112%!important;
  }
  .cta__hand {
    --rev:125%!important;
  }
  .hw__svg {
    --rev:125%!important;
  }
  .rv {
    --rev:125%!important;
  }
}
/* ============ フォーム ============ */
.lead-c {
  max-width: 64rem;
  margin-bottom: clamp(3.6rem, 4.5vw, 5.6rem);
}

.lead-c p {
  font-size: 1.55rem;
  line-height: 2.05;
  color: #3a3a38;
}

/* 先に電話・LINEの導線 */
.ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(28, 28, 28, 0.14);
  border: 1px solid rgba(28, 28, 28, 0.14);
}

.ways a {
  background: var(--paper);
  padding: clamp(2.2rem, 2.6vw, 3rem);
  display: block;
  transition: background 0.3s;
}

.ways a:hover {
  background: #EFEDE8;
}

.ways .lb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-2);
}

.ways .v {
  margin-top: 0.8rem;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 2.6vw, 2.8rem);
  letter-spacing: 0.02em;
  display: block;
}

.ways .v--ja {
  font-family: var(--mincho);
  font-size: 1.9rem;
  letter-spacing: 0.08em;
}

.ways .s {
  margin-top: 0.6rem;
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--ink-2);
}

/* フォーム本体 */
.form {
  margin-top: clamp(4.4rem, 6vw, 7rem);
  border-top: 1px solid var(--ink);
}

.form__row {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 4rem);
  padding: clamp(2rem, 2.4vw, 2.8rem) 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.13);
  align-items: start;
}

.form__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
}

.form__label .t {
  font-size: 1.45rem;
  letter-spacing: 0.06em;
}

.form__label .rq, .form__label .op {
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  line-height: 1;
}

.form__label .rq {
  background: var(--ink);
  color: var(--paper);
}

.form__label .op {
  border: 1px solid rgba(28, 28, 28, 0.28);
  color: var(--ink-2);
}

.form__note {
  margin-top: 0.8rem;
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--ink-2);
}

input[type=text], input[type=tel], input[type=email], input[type=date], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 1.5rem;
  color: var(--ink);
  background: #FBFAF7;
  border: 1px solid rgba(28, 28, 28, 0.2);
  border-radius: 0;
  padding: 1.3rem 1.4rem;
  transition: border-color 0.3s, background 0.3s;
}

textarea {
  min-height: 18rem;
  line-height: 1.9;
  resize: vertical;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(28, 28, 28, 0.5) 50%), linear-gradient(135deg, rgba(28, 28, 28, 0.5) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--ink);
  background: var(--paper);
}

::placeholder {
  color: rgba(28, 28, 28, 0.32);
}

.checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.6rem;
}

.checks label, .radios label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(28, 28, 28, 0.16);
  transition: 0.3s;
}

.checks label:hover, .radios label:hover {
  border-color: var(--ink);
}

.radios {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

input[type=checkbox], input[type=radio] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: #1C1C1C;
}

.file {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

.file input {
  font-size: 1.35rem;
}

.agree {
  margin-top: clamp(2.8rem, 3.4vw, 4rem);
  padding: 2.4rem;
  border: 1px solid rgba(28, 28, 28, 0.16);
  display: flex;
  justify-content: center;
}

.agree label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.45rem;
}

.agree a {
  border-bottom: 1px solid currentColor;
}

.form__foot {
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
  text-align: center;
}

.form__foot .cau {
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--ink-2);
}

.submit {
  margin-top: 2.4rem;
  min-width: 32rem;
  padding: 2rem 3.2rem;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  transition: 0.35s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
}

.submit i {
  display: block;
  width: 2.8rem;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width 0.35s;
}

.submit i::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 6px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}

.submit:hover {
  background: var(--lamp);
  color: var(--ink);
}

.submit:hover i {
  width: 4.2rem;
}

/* ============ 入力 → 確認 → 完了（js/main.js のフォーム処理） ============ */
/* ステップ表示 */
.fstep {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: clamp(3.6rem, 4.5vw, 5rem) auto 0;
  max-width: 52rem;
  counter-reset: none;
}

.fstep li {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: #9a9a94;
  padding-top: 3.4rem;
}

.fstep li span {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0;
  background: var(--paper);
  border: 1px solid rgba(28, 28, 28, 0.22);
  z-index: 1;
}

.fstep li + li::before {
  content: "";
  position: absolute;
  top: 1.3rem;
  right: 50%;
  width: 100%;
  height: 1px;
  background: rgba(28, 28, 28, 0.18);
}

.fstep li.is-on {
  color: var(--ink);
}

.fstep li.is-on span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.fstep + .wpcf7 .form {
  margin-top: clamp(2.4rem, 3vw, 3.2rem);
}

/* 入力画面と確認画面の出し分け */
.fconf, .fback {
  display: none;
}

.form .submit-wrap {
  display: none;
}

.form.is-confirm .form__row, .form.is-confirm .agree, .form.is-confirm .fnext, .form.is-confirm .cau {
  display: none;
}

.form.is-confirm .fconf {
  display: block;
}

.form.is-confirm .submit-wrap {
  display: inline-block;
}

.form.is-confirm .fback {
  display: inline-flex;
}

.form.is-confirm .form__foot {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.form.is-confirm .form__foot .submit {
  margin-top: 0;
}

/* CF7 の送信中マークがボタンの下の行に落ちて包み（.submit-wrap）の高さが伸び、矢印がずれるので横に浮かせる */
.form.is-confirm .submit-wrap .wpcf7-spinner {
  position: absolute;
  left: 100%;
  top: 50%;
  margin: -12px 0 0 1.2rem;
}

/* 確認画面の一覧 */
.fconf__lead {
  padding: clamp(2rem, 2.4vw, 2.6rem) 0;
  font-size: 1.45rem;
  line-height: 1.9;
  color: #3a3a38;
  border-bottom: 1px solid rgba(28, 28, 28, 0.13);
}

.fconf__list > div {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 4rem);
  padding: clamp(1.6rem, 2vw, 2.2rem) 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.13);
}

.fconf__list dt {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.fconf__list dd {
  font-size: 1.5rem;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}

.fconf__list dd.is-empty {
  color: #9a9a94;
}

.fback {
  padding: 2rem 3.2rem;
  min-width: 18rem;
  justify-content: center;
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(28, 28, 28, 0.3);
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: 0.3s;
}

.fback:hover {
  border-color: var(--ink);
  background: #EFEDE8;
}

/* 入力チェックのエラー */
.ferr {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.25rem;
  color: #a33a2a;
}

.is-err:is(input, select, textarea) {
  border-color: #a33a2a;
  background: #fdf6f4;
}

.agree .ferr {
  text-align: center;
}

.agree:has(.ferr) {
  flex-direction: column;
  align-items: center;
}

/* 完了ページ（page-thanks.php） */
.thanks {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
  padding-bottom: clamp(4rem, 6vw, 8rem);
}

.thanks .fstep {
  margin-bottom: clamp(3.6rem, 4.5vw, 5rem);
}

.thanks__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  color: var(--lamp);
}

.thanks__ttl {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.2rem, 2.8vw, 3rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.thanks__txt {
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2.05;
  color: #3a3a38;
}

.thanks__note {
  margin-top: 2.4rem;
  padding: 2rem 2.4rem;
  border: 1px solid rgba(28, 28, 28, 0.14);
  background: #FBFAF7;
  font-size: 1.35rem;
  line-height: 1.95;
  color: #3a3a38;
  text-align: left;
}

.thanks__btn {
  margin-top: clamp(2.8rem, 3.4vw, 3.6rem);
}

/* POINT 3つ */
.points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 2.6vw, 3rem);
  margin-top: clamp(3.6rem, 4.5vw, 5.6rem);
}

.pt {
  border-top: 1px solid var(--ink);
  padding-top: 1.8rem;
}

.pt .n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink-2);
}

.pt h3 {
  margin-top: 0.6rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.95rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.pt p {
  margin-top: 1.2rem;
  font-size: 1.4rem;
  line-height: 1.95;
  color: #4a4a46;
}

/* 募集要項テーブル */
.req {
  border-top: 1px solid var(--ink);
  margin-top: clamp(2.4rem, 3vw, 3.4rem);
}

.req > div {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 4rem);
  padding: 1.8rem 0;
  border-bottom: 1px solid rgba(28, 28, 28, 0.12);
  align-items: baseline;
}

.req dt {
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.req dd {
  font-size: 1.5rem;
  line-height: 1.95;
}

@media (max-width: 1024px) {
  .ways {
    grid-template-columns: 1fr;
  }
  .points {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
  .checks {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .form__row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.8rem 0;
  }
  .form__label {
    padding-top: 0;
  }
  .checks {
    grid-template-columns: 1fr;
  }
  .req > div {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .submit {
    width: 100%;
    min-width: 0;
  }
  .fconf__list > div {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .form.is-confirm .form__foot {
    flex-direction: column-reverse;
  }
  .form.is-confirm .submit-wrap, .fback {
    width: 100%;
  }
}
/* フォームページ下部の電話帯 */
.telband {
  border-top: 1px solid rgba(28, 28, 28, 0.14);
}

.telband__in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(4.4rem, 5.5vw, 6.4rem) var(--pad);
  text-align: center;
}

.telband__t {
  font-family: var(--mincho);
  font-size: 1.6rem;
  letter-spacing: 0.1em;
}

.telband__n {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 3.8vw, 4.2rem);
  letter-spacing: 0.04em;
}

.telband__s {
  margin-top: 1rem;
  font-size: 1.25rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* パスワードゲート（sim・works。functions.php の hm_gate） */
.gate {
  max-width: 60rem;
  margin: clamp(2rem, 4vw, 5rem) auto clamp(4rem, 6vw, 8rem);
  padding: clamp(3.2rem, 4.4vw, 5.6rem) clamp(2.4rem, 4vw, 5.6rem);
  border: 1px solid rgba(28, 28, 28, 0.14);
  background: #FBFAF7;
  text-align: center;
}

.gate__en {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: 0.14em;
  color: var(--lamp);
}

.gate__ttl {
  margin-top: 1rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 2.5rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.gate__lead {
  margin-top: 1.4rem;
  font-size: 1.45rem;
  line-height: 1.95;
  color: #3a3a38;
}

.gate__form {
  margin-top: clamp(2.4rem, 3vw, 3.2rem);
  text-align: left;
}

.gate__lbl {
  display: block;
  font-size: 1.2rem;
  letter-spacing: 0.14em;
  color: #6b6b66;
}

.gate__row {
  margin-top: 0.8rem;
  display: flex;
  gap: 1rem;
}

.gate__in {
  flex: 1;
  min-width: 0;
  height: 5.2rem;
  padding: 0 1.6rem;
  border: 1px solid rgba(28, 28, 28, 0.24);
  background: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.2em;
}

.gate__in:focus {
  outline: 2px solid var(--lamp);
  outline-offset: 1px;
}

.gate__btn {
  height: 5.2rem;
  padding: 0 2.8rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.4rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.3s;
}

.gate__btn:hover {
  background: var(--lamp);
  color: var(--ink);
}

.gate__err {
  margin-top: 1rem;
  font-size: 1.3rem;
  color: #a33a2a;
}

@media (max-width: 480px) {
  .gate__row {
    flex-direction: column;
  }
}
/* ============ 記事系（新着情報・ブログ）============ */
.art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(3rem, 5vw, 7rem);
  align-items: start;
}

/* 一覧：行リスト（新着情報） */
.rows {
  border-top: 1px solid rgba(28, 28, 28, 0.16);
}

.rows a {
  display: grid;
  grid-template-columns: 11rem 8.5rem 1fr 1.4rem;
  align-items: center;
  gap: 1.8rem;
  padding: 2rem 0.4rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.11);
  transition: padding-left 0.35s cubic-bezier(0.33, 1, 0.68, 1), color 0.3s;
}

.rows a:hover {
  padding-left: 1rem;
  color: var(--lamp);
}

.rows time {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.rows .cat {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  text-align: center;
  border: 1px solid rgba(28, 28, 28, 0.18);
  padding: 0.4rem 0;
}

.rows h3 {
  font-size: 1.5rem;
  line-height: 1.75;
  font-weight: 400;
}

/* 一覧：カード（ブログ） */
.posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.8rem, 3.6vw, 4.4rem) clamp(2.4rem, 3vw, 3.6rem);
}

.post {
  display: flex;
  flex-direction: column;
}

.post figure {
  overflow: hidden;
}

.post img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.post:hover img {
  transform: scale(1.04);
}

.post__meta {
  margin-top: 1.4rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.post__meta time {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.post__meta .cat {
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border: 1px solid rgba(28, 28, 28, 0.18);
  padding: 0.3rem 0.9rem;
}

.post h3 {
  margin-top: 0.8rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.85rem;
  line-height: 1.65;
  letter-spacing: 0.05em;
  transition: color 0.3s;
}

.post:hover h3 {
  color: var(--lamp);
}

.post p {
  margin-top: 1rem;
  font-size: 1.35rem;
  line-height: 1.95;
  color: #4a4a46;
}

/* アイキャッチ未設定・Coming Soon のロゴ枠（ブログ一覧・TOPのブログ欄で共通） */
.logo-ph {
  aspect-ratio: 3/2;
  background: #EFEDE8;
  display: grid;
  place-items: center;
  color: var(--ink);
}

.logo-ph .lgmark {
  display: block;
  width: 52%;
  height: auto;
}

/* Coming Soon（ブログ記事が無いあいだ） */
.art--solo {
  grid-template-columns: 1fr;
}

.soon {
  max-width: 72rem;
  border: 1px solid rgba(28, 28, 28, 0.14);
}

.soon .logo-ph {
  aspect-ratio: auto;
  padding: clamp(5rem, 7vw, 8rem) 2rem clamp(3rem, 4vw, 4.4rem);
  background: #EFEDE8;
}

.soon .logo-ph .lgmark {
  width: min(60%, 32rem);
}

.soon__en {
  margin-top: 0;
  padding-top: clamp(2.4rem, 3vw, 3.2rem);
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 3vw, 3.2rem);
  letter-spacing: 0.12em;
}

.soon__ja {
  text-align: center;
  padding: 1rem 2rem clamp(3rem, 4vw, 4.4rem);
  font-size: 1.45rem;
  line-height: 1.95;
  color: #4a4a46;
}

/* サイドバー */
.side {
  position: sticky;
  top: 11rem;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 3.6vw, 4.4rem);
}

.side__b h2 {
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  color: var(--ink-2);
  font-weight: 400;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.4);
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.side__b h2::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--lamp);
  flex: 0 0 5px;
}

.side__b ul {
  margin-top: 0.4rem;
}

.side__b li {
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.side__b a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0.2rem;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  transition: padding-left 0.3s cubic-bezier(0.33, 1, 0.68, 1), color 0.3s;
}

.side__b a:hover {
  padding-left: 0.6rem;
  color: var(--lamp);
}

.side__b .n {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--ink-2);
}

.side__b a[aria-current] {
  color: var(--lamp);
}

/* 月別アーカイブ：年で折りたたむ */
.arc__y {
  border-bottom: 1px solid rgba(28, 28, 28, 0.1);
}

.arc__y > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 0.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.arc__y > summary::-webkit-details-marker {
  display: none;
}

.arc__y > summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(135deg);
  transition: transform 0.3s;
  opacity: 0.5;
}

.arc__y[open] > summary::after {
  transform: rotate(-45deg);
}

.arc__m {
  padding: 0.2rem 0 1rem;
}

.arc__m li {
  border: 0;
}

.arc__m a {
  padding: 0.7rem 0.2rem 0.7rem 1.4rem;
  font-size: 1.35rem;
  position: relative;
}

.arc__m a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

/* 記事本文 */
.entry__head {
  padding-bottom: clamp(2rem, 2.6vw, 3rem);
  border-bottom: 1px solid rgba(28, 28, 28, 0.16);
}

.entry__meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.entry__meta time {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.entry__meta .cat {
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  border: 1px solid rgba(28, 28, 28, 0.18);
  padding: 0.35rem 0.9rem;
}

.entry__head h1 {
  margin-top: 1.4rem;
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2.4rem, 3.1vw, 3.4rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.entry__body {
  margin-top: clamp(3rem, 4vw, 4.4rem);
}

.entry__body > * {
  margin-top: 2.2rem;
}

.entry__body > *:first-child {
  margin-top: 0;
}

.entry__body p {
  font-size: 1.6rem;
  line-height: 2.05;
  color: #2e2e2c;
  max-width: 64rem;
}

.entry__body h2 {
  margin-top: clamp(4rem, 5vw, 6rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(28, 28, 28, 0.16);
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 2.6rem);
  letter-spacing: 0.06em;
}

.entry__body h3 {
  margin-top: clamp(3rem, 3.6vw, 4rem);
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.06em;
}

.entry__body figure {
  margin-top: 3rem;
  max-width: 78rem;
}

.entry__body figure img {
  width: 100%;
  height: auto;
  display: block;
}

.entry__body figcaption {
  margin-top: 1rem;
  font-size: 1.25rem;
  line-height: 1.8;
  color: var(--ink-2);
}

.entry__body ul {
  padding-left: 0;
}

.entry__body ul li {
  max-width: 64rem;
  position: relative;
  padding-left: 1.8rem;
  margin-top: 0.9rem;
  font-size: 1.55rem;
  line-height: 1.95;
  color: #2e2e2c;
}

.entry__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1em;
  width: 8px;
  height: 1px;
  background: var(--lamp);
}

.entry__body blockquote {
  max-width: 64rem;
  padding-left: 2.2rem;
  position: relative;
  font-family: var(--mincho);
  font-size: 1.75rem;
  line-height: 1.95;
}

.entry__body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.3em;
  width: 1px;
  background: var(--lamp);
  opacity: 0.6;
}

/* 前後の記事 */
.pn {
  margin-top: clamp(4.4rem, 6vw, 7rem);
  padding-top: clamp(2.4rem, 3vw, 3.4rem);
  border-top: 1px solid rgba(28, 28, 28, 0.16);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}

.pn a {
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: color 0.3s;
}

.pn a:hover {
  color: var(--lamp);
}

.pn .nx {
  justify-self: end;
  text-align: right;
}

.pn i {
  display: block;
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.pn .to {
  justify-self: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
}

@media (max-width: 1024px) {
  .art {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
  .side {
    position: static;
  }
  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .posts {
    grid-template-columns: 1fr;
    gap: 3.6rem;
  }
  .rows a {
    grid-template-columns: 9.5rem 1fr 1.4rem;
    gap: 1.2rem;
    padding: 1.6rem 0.2rem;
  }
  .rows .cat {
    display: none;
  }
  .pn {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: left;
  }
  .pn .nx {
    justify-self: start;
    text-align: left;
  }
  .pn .to {
    justify-self: start;
  }
}
/* ============ 中間幅の調整 ============
   モックは 1200 / 1024 / 820 の3か所でしか折り返しを見ておらず、
   1025〜1399px の帯で見出しやラベルが段落ちしていた（ノートPCがここに入る）。
   モック由来の各パーシャルには手を入れず、足りないぶんをここにまとめる。

   区切りを 1399px にしているのは、コンテンツの最大幅（--maxw:140rem＝1400px）に
   合わせるため。1400px 以上＝デザインどおりの列数、それ未満＝1段折る、という切り分け。 */
/* 電話番号：パソコンでは href を外している（js/main.js）。
   リンクに見えたままだと押せると思われるので、見た目も文字に戻す。 */
.is-notel {
  cursor: default;
}

.is-notel:hover {
  color: inherit;
}

/* 管理画面から挿し込める改行の出し分け。
   hm_nl() が <br class="br_sp"> / <br class="br_pc"> を通すようにしてあるのに、
   CSSが無くて両方とも常に改行していた。幅ごとに文言の折り位置を変えたいときに使う。
   　<br class="br_sp"> … スマホだけ改行
   　<br class="br_pc"> … パソコンだけ改行 */
.br_sp {
  display: none;
}

@media (max-width: 820px) {
  .br_sp {
    display: inline;
  }
  .br_pc {
    display: none;
  }
}
/* ============ スマホ実機幅での“1字あふれ” ============
   モックの字間（.07em）のままだと、375〜390px の実機で見出しがあと数pxだけ入らず、
   最後の1字が次の行にこぼれる（「その壁、発泡スチロールで／で」「庭の写真を1／枚。」）。
   組み方は変えたくないので、この幅のときだけ字間をわずかに詰めて意図した行数に収める。 */
@media (max-width: 400px) {
  .cta__h {
    letter-spacing: 0.03em;
  }
  /* 下層ページの導入見出し（.lead-c .h2 / .hero-copy h2）は全角12〜16字ある。
     26px角のままだと1行あたり12字しか入らず、
     「「いくらかかるか／分からない」が、／いちばんの不安だと／思うので。」のように
     4行に割れて、最後が数文字だけ残る。21.5pxまで落とすと、2行目が1行に収まって3行になる（2行に収めるには18px台まで落とす必要があり、見出しとして小さすぎる）。 */
  .hero-copy h2, .lead-c .h2 {
    font-size: 2.15rem;
    letter-spacing: 0.03em;
  }
}
/* お客様の声の満足度。項目名の列が8rem固定で、いちばん長い「工期・スケジュール」が
   はみ出してバーの線と重なっていた。行ごとのグリッドをやめて親の3列に流し込み、
   項目名の列はいちばん長いものに合わせる（全行のバーの開始位置も揃う）。 */
@media (max-width: 820px) {
  .score__l {
    grid-template-columns: max-content minmax(0, 1fr) 3.4rem;
    gap: 1.1rem 1rem;
    align-items: center;
  }
  .score__l div {
    display: contents;
  }
}
/* ============ 日本語の折り返し ============
   見出しは字数が多いと「…こ／だわりを均等に」「図面を描きま／す。」のように
   語の途中で折れてしまう。word-break:auto-phrase は文節の切れ目を見て折ってくれる
   （Chrome / Edge / Safari。非対応ブラウザは今までどおり折れるだけなので入れて困らない）。
   効かせるには <html lang="ja"> が要るが、WordPressが出してくれている。
   本文は行頭を揃えたいので対象にしない。 */
h1, h2, h3, h4,
.h2, .cta__h, .phead__ja, .rs__key, .lead, .hero__sub {
  word-break: auto-phrase;
}

/* 代表挨拶。写真を置かないときは2段組みをやめて、本文を版面いっぱいに。
   （.msg は「写真＋本文」の2列組みなので、写真が無いと本文が左半分に寄ったままになる） */
.msg--nofig {
  grid-template-columns: 1fr;
}

/* ============ TOP：Serviceの一覧 ============
   モックは hover で項目を右に0.8rem ずらしていたが、押すたびに文字が動いて読みにくい。
   位置は動かさず、濃度で反応させる。 */
.menu a {
  transition: opacity 0.3s, color 0.3s;
}

.menu a:hover {
  padding-left: 0;
  opacity: 0.62;
}

/* ============ TOP：数字6項目の区切り線（スマホ）============
   1024px以下で `3n+1`、820px以下で `odd` の2つが両方効いてしまい、
   2列組みの4番目（外構メニュー）だけ左の罫線が消えていた。
   スマホは2列なので、奇数番目だけ罫線なし、が正しい。 */
@media (max-width: 820px) {
  .facts__list > div:nth-child(3n+1) {
    border-left: 1px solid rgba(28, 28, 28, 0.14);
    padding-left: clamp(1.4rem, 1.8vw, 2.2rem);
  }
  .facts__list > div:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
}
/* ============ TOP：対応エリア図とキャプション（スマホ）============
   図が16rem幅のままなので、その下に置かれたキャプションが
   「可児市・多治見市を中／心に」のように細く折り返していた。
   スマホでは図を左、文を右に並べる。 */
@media (max-width: 820px) {
  .area {
    width: 100%;
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1.8rem;
    align-items: center;
  }
  .area figcaption {
    margin-top: 0;
  }
}
/* ============ TOP：Aboutの小さい写真（スマホ）============
   45%幅で右に寄せているため、本文との間が2段組みのように見えて落ち着かない。
   スマホでは版面いっぱいの1枚の写真として置く。 */
@media (max-width: 820px) {
  .about__sub {
    width: 100%;
    margin: 2.8rem 0 0;
  }
  .about__sub figcaption {
    white-space: normal;
  }
}
/* TOPのServiceから /menu/ の各カードへアンカーで飛んでくる。
   ヘッダーが固定なので、そのぶん手前で止める。 */
.mc[id] {
  scroll-margin-top: clamp(9rem, 11vw, 13rem);
}

/* ============ TOPの左レール（ページ内目次 01〜07）============
   モックはレールを820px以下でしか隠していないのに、本文側の逃げ（--padL に +15rem）は
   1025px以上でしか付けていない。821〜1024px の帯ではレールが本文の真上に重なる（実測155px）。
   ・1024px以下 … 逃げが無いので置き場所がない。隠す（ヘッダーのメニューも1200px以下で畳んでいる）
   ・1025px以上 … レールの実寸は155px（いちばん長い SIMULATION）で、逃げの150pxをわずかに超える。
                  罫線と文字のあきを詰めて150pxに収める。本文側の余白は触らない。 */
@media (max-width: 1024px) {
  .rail {
    display: none;
  }
}
@media (min-width: 1025px) {
  .rail {
    padding-left: 1.8rem;
  }
}
/* 幅に関係なく、ラベルが1行に収まらない箇所 */
/* 比較表の項目名。16rem だと「給排水・電気の引き込み」が2行になる */
.cmp tbody th {
  width: 19rem;
}

/* 下限を821pxにしているのは、820px以下のスマホ用ルール（モック側）を
   このファイルが上書きしてしまわないようにするため。ここは「中間幅だけ」の担当。 */
@media (min-width: 821px) and (max-width: 1399px) {
  /* 数字6項目。この幅だと1列100px前後まで痩せて、項目名が2〜3行になる。3列2段に折る */
  .facts__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0;
  }
  .facts__list > div:nth-child(3n+1) {
    border-left: 0;
    padding-left: 0;
  }
  .facts__list > div:nth-child(n+4) {
    padding-top: 1.8rem;
  }
  /* フッターナビ4列は1列133pxで、「ご相談から完成までの流れ」などが軒並み2行になる */
  .foot__nav {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.8rem 3.2rem;
  }
}
/* ============ WordPress 固有 ============
   モックには存在しない、WordPress が出力するマークアップの受け皿。
   見た目はモック側のクラス（.pager / .entry__body / .form）に寄せる。 */
/* ---- ページャ（paginate_links）----
   モックの .pager と同じ見た目にする。.page-numbers は WP が付けるクラス。 */
.pager .page-numbers {
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  border: 1px solid rgba(28, 28, 28, 0.2);
  transition: 0.3s;
}

.pager a.page-numbers:hover {
  border-color: var(--ink);
}

.pager .page-numbers.current {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.pager .page-numbers.dots {
  border-color: transparent;
}

.pager .page-numbers.prev,
.pager .page-numbers.next {
  padding: 0 1.8rem;
}

/* ---- 記事本文（the_content）----
   ブロックエディタ／クラシックの両方の出力を .entry__body の中で受ける。 */
.entry__body > *:first-child {
  margin-top: 0;
}

.entry__body img {
  max-width: 100%;
  height: auto;
}

.entry__body .wp-block-image,
.entry__body figure {
  margin-block: clamp(3rem, 4vw, 4.4rem);
}

.entry__body figure figcaption,
.entry__body .wp-element-caption {
  margin-top: 1.2rem;
  font-size: 1.25rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.entry__body .alignleft {
  float: left;
  margin: 0 clamp(2rem, 3vw, 3.2rem) 2rem 0;
  max-width: 50%;
}

.entry__body .alignright {
  float: right;
  margin: 0 0 2rem clamp(2rem, 3vw, 3.2rem);
  max-width: 50%;
}

.entry__body .aligncenter {
  margin-inline: auto;
  display: block;
}

.entry__body .wp-block-table {
  overflow-x: auto;
}

.entry__body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}

.entry__body .wp-block-table th,
.entry__body .wp-block-table td {
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(28, 28, 28, 0.14);
  text-align: left;
}

.entry__body .wp-block-table th {
  background: rgba(28, 28, 28, 0.04);
  font-weight: 400;
}

.entry__body .wp-block-embed iframe,
.entry__body iframe {
  max-width: 100%;
}

.entry__body .wp-block-buttons {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-block: clamp(3rem, 4vw, 4.4rem);
}

.entry__body .wp-block-button__link {
  display: inline-block;
  padding: 1.4rem 3rem;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  transition: 0.35s;
}

.entry__body .wp-block-button__link:hover {
  background: var(--lamp);
}

@media (max-width: 768px) {
  .entry__body .alignleft,
  .entry__body .alignright {
    float: none;
    margin-inline: 0;
    max-width: 100%;
  }
}
/* ---- Contact Form 7 ----
   .form のマークアップは CF7 のフォームタグ側で組む。ここは CF7 が
   自動で足す要素（スピナー・エラー文・応答メッセージ）だけを整える。 */
.wpcf7 form .wpcf7-response-output {
  margin: clamp(2.4rem, 3vw, 3.2rem) 0 0;
  padding: 1.6rem 2rem;
  border: 1px solid rgba(28, 28, 28, 0.24);
  font-size: 1.4rem;
  line-height: 1.9;
}

.wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--lamp);
  color: var(--ink);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
  border-color: #B4483C;
  color: #B4483C;
}

.wpcf7-not-valid-tip {
  margin-top: 0.8rem;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: #B4483C;
}

.wpcf7-not-valid {
  border-color: #B4483C !important;
}

.wpcf7-spinner {
  margin: 0 0 0 1.2rem;
}

.wpcf7 .wpcf7-list-item {
  margin: 0;
}

/* CF7 は選択肢を span で二重に包む（.wpcf7-form-control-wrap > .wpcf7-checkbox > .wpcf7-list-item）。
   モックの .checks / .radios は「選択肢が直接の子」の前提で並べているので、
   そのままだと子が1つしかなく1列に潰れる。包みを素通しにして、
   選択肢が実際に並ぶ .wpcf7-checkbox / .wpcf7-radio を並べ役にする。 */
.checks, .radios {
  display: block;
}

.checks > .wpcf7-form-control-wrap,
.radios > .wpcf7-form-control-wrap {
  display: block;
}

.checks .wpcf7-checkbox {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.6rem;
}

.radios .wpcf7-radio {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ラベルが枠線付きのボタン状なので、升目いっぱいに広げる */
.checks .wpcf7-list-item {
  display: block;
}

.checks .wpcf7-list-item label {
  height: 100%;
}

@media (max-width: 1024px) {
  .checks .wpcf7-checkbox {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 820px) {
  .checks .wpcf7-checkbox {
    grid-template-columns: 1fr;
  }
}
/* 同意チェック。CF7 の包みが inline のままだと .agree の中央寄せが効かない */
.agree .wpcf7-form-control-wrap,
.agree .wpcf7-acceptance,
.agree .wpcf7-list-item {
  display: block;
}

/* 送信ボタンの矢印。
   CF7 の [submit] は <input> なので、モックの .btn-solid のように <i> を子に持てない。
   そこでフォームタグ側で <span class="submit-wrap"> で包み、その擬似要素で矢印を描く。
   動きは .btn-solid と同じ（ホバーで線が 2.8rem → 4.2rem に伸び、色が反転する）。 */
.submit-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.submit-wrap input.submit {
  padding-right: 7.2rem;
  width: 100%;
}

.submit-wrap::before,
.submit-wrap::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: width 0.35s, border-color 0.35s, background 0.35s;
}

/* 線 */
.submit-wrap::before {
  right: 3.2rem;
  top: 50%;
  width: 2.8rem;
  height: 1px;
  background: var(--paper);
}

/* 矢じり */
.submit-wrap::after {
  right: 3.2rem;
  top: calc(50% - 2px);
  width: 6px;
  height: 5px;
  border-right: 1px solid var(--paper);
  border-top: 1px solid var(--paper);
  transform: rotate(45deg);
}

.submit-wrap:hover::before {
  width: 4.2rem;
  background: var(--ink);
}

.submit-wrap:hover::after {
  border-right-color: var(--ink);
  border-top-color: var(--ink);
}

/* ファイル選択。CF7 の包みが inline だと .file の flex 配置に乗らない */
.file .wpcf7-form-control-wrap {
  display: block;
}

/* reCAPTCHA v3 のバッジ。フッターのCTAに被るので左下に寄せて薄く置く。 */
.grecaptcha-badge {
  visibility:visible;
}

.form__privacy .recaptcha-note {
  margin-top: 1.2rem;
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--ink-2);
}

/* ---- body クラスとの名前衝突よけ ----
   WordPress は <body> に page / blog / single / archive / search / date … といった
   ごく一般的なクラスを付ける。モックのコンポーネント名（.page = 下層の本文コンテナ、
   .blog = TOPのブログ帯）と衝突すると、版面の指定が body 全体に当たって
   「左右とフッター下に余白ができる」という壊れ方をする。
   個別のセレクタは要素名で限定してあるが、取りこぼしても崩れないようここで打ち消す。
   単独クラス（0,1,0）より強い (0,1,1) にしてある。 */
body[class] {
  max-width: none;
  padding: 0;
  margin: 0;
}

/* ---- その他 ---- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 管理バーが出ているときに固定ヘッダーが隠れないようにする */
body.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .header {
    top: 46px;
  }
}