@charset "UTF-8";

/* =================================================================
   株式会社新松屋 — TOP  C案
   A案（海の青 × 砂浜ベージュ ＋ 松の緑）の色味を継承しつつ、
   余白・ヘアライン・細い英数字で構成する。装飾は足さず引く。
   ================================================================= */

:root {
  --c-main:       #2b6ca3;
  --c-main-dark:  #1f5480;
  --c-main-deep:  #143c5e;
  --c-main-soft:  #8fb4d0;
  --c-main-pale:  #e5eef5;

  --c-sub:        #c9b491;
  --c-sub-pale:   #f7f3ea;

  --c-accent:     #4a7c59;

  --c-text:       #23262a;
  --c-text-thin:  #61666b;
  --c-line:       rgba(35, 38, 42, .14);
  --c-line-light: rgba(255, 255, 255, .28);
  --c-bg:         #ffffff;

  --f-ja:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-min: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-en:  "Cormorant Garamond", "Times New Roman", serif;

  --w:      1240px;
  --w-wide: 1600px;
  --pad:    clamp(20px, 5vw, 60px);
  --sec:    clamp(88px, 11vw, 170px);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-ja);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, li, figure, address, blockquote { margin: 0; padding: 0; }
ul, li { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--c-main); color: #fff; }

/* ---------- 共通パーツ ---------- */
.c-sec-en {
  font-family: var(--f-en);
  font-size: clamp(.86rem, 1.1vw, .98rem);
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-main);
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.c-sec-en::before {
  content: "";
  width: 44px; height: 1px;
  background: currentColor;
  opacity: .6;
}
.c-sec-en--light { color: #fff; }

.c-sec-ttl {
  font-family: var(--f-min);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .09em;
}

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 32px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .08em;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.c-btn i { font-size: .82em; transition: transform .35s var(--ease); }
.c-btn:hover i:last-child { transform: translateX(5px); }

.c-btn--line {
  border: 1px solid var(--c-main);
  color: var(--c-main);
  background: transparent;
}
.c-btn--line:hover { background: var(--c-main); color: #fff; }

.c-btn--fill {
  background: var(--c-main);
  color: #fff;
  border: 1px solid var(--c-main);
}
.c-btn--fill:hover { background: var(--c-main-deep); border-color: var(--c-main-deep); }

/* 出現アニメーション */
.c-up { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.c-up.is-shown { opacity: 1; transform: none; }

/* =================================================================
   HEADER
   ================================================================= */
.c-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  padding: clamp(18px, 2.2vw, 30px) var(--pad) clamp(14px, 1.8vw, 22px);
  transition: background-color .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease);
}
.c-header::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px;
  background: var(--c-line-light);
  transition: background-color .45s var(--ease);
}
.c-header__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
}

/* ロゴは白／着色の2枚を重ね、ヘッダーの状態で入れ替える */
.c-logo { position: relative; display: block; line-height: 0; }
.c-logo img { display: block; transition: opacity .45s var(--ease); }
.c-logo__color { position: absolute; inset: 0; opacity: 0; }

.c-gnav ul { display: flex; align-items: flex-start; gap: clamp(18px, 2.4vw, 42px); }
.c-gnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  padding-bottom: 4px;
  transition: color .35s var(--ease);
}
.c-gnav a span { font-size: .88rem; font-weight: 500; letter-spacing: .08em; }
.c-gnav a em {
  font-family: var(--f-en);
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: .22em;
  opacity: .72;
}
.c-gnav a::after {
  content: "";
  display: block;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .4s var(--ease);
  margin-top: 2px;
}
.c-gnav a:hover::after { width: 100%; }

/* スクロール後 */
.c-header.is-fixed {
  background: rgba(255, 255, 255, .96);
  padding-top: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  box-shadow: 0 1px 20px rgba(20, 60, 94, .07);
}
.c-header.is-fixed::after { background: var(--c-line); }
.c-header.is-fixed .c-logo__white { opacity: 0; }
.c-header.is-fixed .c-logo__color { opacity: 1; }
.c-header.is-fixed .c-logo img { width: clamp(168px, 13vw, 208px); }
.c-header.is-fixed .c-gnav a { color: var(--c-text); }
.c-header.is-fixed .c-gnav a:hover { color: var(--c-main); }

/* ハンバーガー */
.c-burger {
  display: none;
  position: fixed;
  top: 14px; right: 14px;
  z-index: 100;
  width: 54px; height: 54px;
  background: var(--c-main);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}
.c-burger span { display: block; width: 22px; height: 1px; background: #fff; transition: transform .3s var(--ease); }

/* SPメニュー */
.c-spmenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-main-deep);
  transform: translateX(100%);
  transition: transform .5s var(--ease);
  overflow-y: auto;
  visibility: hidden;
}
body.is-menu-open .c-spmenu { transform: none; visibility: visible; }
body.is-menu-open { overflow: hidden; }
body.is-menu-open .c-burger { visibility: hidden; pointer-events: none; }

.c-spmenu__head {
  position: sticky;
  top: 0;
  z-index: 201;
  height: 82px;
  padding: 0 16px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-main-deep);
}
.c-logo--sp img { width: 168px; }
.c-spmenu__close { color: #fff; font-size: 1.6rem; line-height: 1; padding: 10px; }

.c-spnav { padding: 10px var(--pad) 60px; }
.c-spnav ul { border-top: 1px solid var(--c-line-light); }
.c-spnav li { border-bottom: 1px solid var(--c-line-light); }
.c-spnav a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 20px 4px;
  color: #fff;
}
.c-spnav a em {
  font-family: var(--f-en);
  font-style: normal;
  font-size: .8125rem;
  letter-spacing: .2em;
  color: var(--c-main-soft);
  min-width: 92px;
}
.c-spnav a span { font-size: 1rem; letter-spacing: .06em; }
.c-spnav__foot { margin-top: 34px; display: grid; gap: 14px; }
.c-spnav__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-min);
  font-size: 1.6rem;
  color: #fff;
  letter-spacing: .04em;
}
.c-spnav__tel i { font-size: .6em; }
.c-spnav__foot .c-btn { width: 100%; }

/* =================================================================
   MV（動画をフルスクリーンで大きく使う）
   ================================================================= */
.c-mv {
  position: relative;
  height: clamp(560px, 100svh, 980px);
  min-height: 560px;
  overflow: hidden;
}
.c-mv__media { position: absolute; inset: 0; }
.c-mv__video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 動画は再生中に明るさが変わるため、文字が乗る上下は暗部を厚めに敷く */
.c-mv__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(9, 32, 52, .66) 0%, rgba(9, 32, 52, .12) 34%, rgba(9, 32, 52, .12) 46%),
    linear-gradient(to top,    rgba(9, 32, 52, .74) 0%, rgba(9, 32, 52, .12) 62%),
    rgba(9, 32, 52, .10);
}

.c-mv__copy {
  position: absolute;
  left: var(--pad);
  bottom: clamp(96px, 14vh, 168px);
  max-width: min(760px, 82vw);
  color: #fff;
  z-index: 2;
}
.c-mv__en {
  font-family: var(--f-en);
  font-size: clamp(.78rem, 1vw, .92rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  opacity: .86;
  margin-bottom: clamp(16px, 2.4vw, 26px);
  padding-left: 3px;
}
.c-mv__catch {
  font-family: var(--f-min);
  font-size: clamp(1.85rem, 5.2vw, 4rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1em;
  text-shadow: 0 2px 24px rgba(9, 32, 52, .34);
}
.c-mv__catch span { display: block; }
.c-mv__lead {
  margin-top: clamp(18px, 2.6vw, 30px);
  font-size: clamp(.84rem, 1.1vw, .96rem);
  line-height: 2.1;
  letter-spacing: .06em;
  text-shadow: 0 2px 18px rgba(9, 32, 52, .4);
}

.c-mv__scroll {
  position: absolute;
  right: calc(var(--pad) + 4px);
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.c-mv__scroll span {
  font-family: var(--f-en);
  font-size: .8125rem;
  letter-spacing: .28em;
  writing-mode: vertical-rl;
}
.c-mv__scroll i {
  display: block;
  width: 1px; height: clamp(56px, 9vh, 92px);
  background: rgba(255, 255, 255, .5);
  overflow: hidden;
  position: relative;
}
.c-mv__scroll i::after {
  content: "";
  position: absolute;
  left: 0; top: -100%;
  width: 1px; height: 100%;
  background: #fff;
  animation: c-scroll 2.4s var(--ease) infinite;
}
@keyframes c-scroll {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* =================================================================
   PHILOSOPHY
   ================================================================= */
.c-phi { padding: var(--sec) 0; background: var(--c-bg); }
.c-phi__inner {
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
/* テキストは貼り付いたまま、右の3枚（松原→海→暮らし）が順に流れていく */
.c-phi__text { position: sticky; top: clamp(150px, 19vh, 210px); }
.c-phi__catch {
  font-family: var(--f-min);
  font-size: clamp(1.6rem, 3.4vw, 2.7rem);
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .1em;
  color: var(--c-main-deep);
  margin-bottom: clamp(24px, 3.4vw, 40px);
}
.c-phi__body p {
  font-size: .94rem;
  line-height: 2.25;
  letter-spacing: .05em;
  color: var(--c-text-thin);
}
.c-phi__body p + p { margin-top: 1.7em; }
.c-phi__text .c-btn { margin-top: clamp(30px, 4vw, 46px); }

.c-phi__figs { display: grid; gap: clamp(40px, 6vw, 88px); }
.c-phi__fig { position: relative; }
.c-phi__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* 3枚を階段状にずらして、縦に流れるリズムを作る */
.c-phi__fig:nth-child(1) { width: 84%; margin-left: 0; }
.c-phi__fig:nth-child(2) { width: 72%; margin-left: auto; margin-right: 0; }
.c-phi__fig:nth-child(3) { width: 100%; margin-left: 0; }
/* 3枚目だけ横位置。縦・縦・横でリズムを作る */
.c-phi__fig:nth-child(3) img { aspect-ratio: 16 / 10; }

.c-phi__fig figcaption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.c-phi__cap-ja {
  font-family: var(--f-min);
  font-size: clamp(.92rem, 1.3vw, 1.06rem);
  font-weight: 600;
  letter-spacing: .24em;
  color: var(--c-main-deep);
}
.c-phi__cap-en {
  font-family: var(--f-en);
  font-size: .8125rem;
  letter-spacing: .22em;
  color: var(--c-main);
  text-transform: uppercase;
}

/* =================================================================
   SERVICE（行リスト。ホバーでサムネイルが立ち上がる）
   ================================================================= */
.c-svc {
  padding: var(--sec) 0;
  background: var(--c-main-deep);
  color: #fff;
}
.c-svc__head {
  max-width: var(--w);
  margin: 0 auto clamp(38px, 5vw, 62px);
  padding-inline: var(--pad);
}
.c-svc__head .c-sec-ttl { color: #fff; font-weight: 400; }

.c-svc__list {
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--pad);
  border-top: 1px solid var(--c-line-light);
}
.c-svc__row { border-bottom: 1px solid var(--c-line-light); }
.c-svc__row a {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: clamp(20px, 3.4vw, 52px);
  padding: clamp(28px, 3.6vw, 46px) 4px;
  color: #fff;
  transition: padding-left .45s var(--ease);
}
.c-svc__row a:hover { padding-left: clamp(8px, 1.4vw, 22px); }

.c-svc__num {
  font-family: var(--f-en);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: .14em;
  color: var(--c-main-soft);
  /* 見出し1行目の視線に合わせる */
  padding-top: .34em;
}
.c-svc__ttl {
  display: block;
  font-family: var(--f-min);
  font-size: clamp(1.15rem, 2.2vw, 1.62rem);
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: 10px;
}
.c-svc__txt {
  display: block;
  font-size: .88rem;
  line-height: 2.05;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .74);
  max-width: 52ch;
}
.c-svc__thumb {
  display: block;
  width: clamp(120px, 15vw, 208px);
  overflow: hidden;
  align-self: center;
  opacity: .78;
  transition: opacity .5s var(--ease);
}
.c-svc__thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.c-svc__row a:hover .c-svc__thumb { opacity: 1; }
.c-svc__row a:hover .c-svc__thumb img { transform: scale(1.06); }

.c-svc__arrow {
  align-self: center;
  width: 46px; height: 46px;
  border: 1px solid var(--c-line-light);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .8rem;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.c-svc__row a:hover .c-svc__arrow { background: #fff; border-color: #fff; color: var(--c-main-deep); }

/* =================================================================
   REASON
   ================================================================= */
/* 家シルエットは本文の背面に大きく入り込ませる（白地なので文字の可読性はむしろ上がる） */
.c-reason { position: relative; padding: var(--sec) 0; background: var(--c-sub-pale); overflow: hidden; }
/* 背景の家シルエット。セクション下端に接地させ、本文より背面に置く */
.c-reason__house {
  position: absolute;
  right: clamp(-60px, -2.4vw, -12px);
  bottom: 0;
  width: clamp(260px, 38vw, 620px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
.c-house-solid { fill: var(--c-bg); }
.c-house-cut   { fill: var(--c-sub-pale); }
.c-reason__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.c-reason__head { margin-bottom: clamp(40px, 5vw, 68px); }
.c-reason__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 52px);
}
.c-reason__item { position: relative; }
.c-reason__fig { overflow: hidden; margin-bottom: 26px; }
.c-reason__fig img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.c-reason__item:hover .c-reason__fig img { transform: scale(1.05); }
.c-reason__num {
  font-family: var(--f-en);
  font-size: 1.06rem;
  letter-spacing: .2em;
  color: var(--c-main);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.c-reason__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.c-reason__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .07em;
  margin-bottom: 14px;
}
.c-reason__txt {
  font-size: .875rem;
  line-height: 2.1;
  letter-spacing: .04em;
  color: var(--c-text-thin);
}

/* =================================================================
   BAND（松原の全幅帯）
   ================================================================= */
.c-band {
  position: relative;
  height: clamp(280px, 34vw, 460px);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.c-band__photo { position: absolute; inset: -12% 0; }
.c-band__photo img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.c-band__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(9, 32, 52, .42);
}
.c-band__txt {
  position: relative;
  z-index: 2;
  font-family: var(--f-min);
  font-size: clamp(1.15rem, 2.6vw, 1.95rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .14em;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 20px rgba(9, 32, 52, .4);
  padding-inline: var(--pad);
}

/* =================================================================
   WORKS（横スクロール）
   ================================================================= */
.c-works { padding: var(--sec) 0; background: var(--c-bg); overflow: hidden; }
.c-works__head {
  max-width: var(--w);
  margin: 0 auto clamp(34px, 4.4vw, 54px);
  padding-inline: var(--pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.c-works__grid {
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.c-works__card figure { overflow: hidden; margin-bottom: 18px; }
.c-works__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.c-works__card:hover img { transform: scale(1.05); }
.c-works__cat {
  font-size: .875rem;
  letter-spacing: .14em;
  color: var(--c-main);
  margin-bottom: 8px;
}
.c-works__ttl {
  font-family: var(--f-min);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: .07em;
}

/* =================================================================
   NEWS
   ================================================================= */
.c-news { padding: var(--sec) 0; background: var(--c-bg); }
.c-news__inner {
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.c-news__head .c-btn { margin-top: 26px; }
.c-news__list { border-top: 1px solid var(--c-line); }
.c-news__list li { border-bottom: 1px solid var(--c-line); }
.c-news__list a,
.c-news__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 24px 6px;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.c-news__list a:hover { color: var(--c-main); padding-left: 14px; }
.c-news__list time {
  font-family: var(--f-en);
  font-size: .95rem;
  letter-spacing: .1em;
  color: var(--c-text-thin);
}
.c-news__cat {
  font-size: .875rem;
  letter-spacing: .1em;
  color: var(--c-main);
  border: 1px solid var(--c-main-soft);
  padding: 4px 12px;
  white-space: nowrap;
}
.c-news__ttl { font-size: .92rem; letter-spacing: .04em; }

/* =================================================================
   CONTACT
   ================================================================= */
.c-contact { position: relative; padding: clamp(90px, 12vw, 160px) var(--pad); }
.c-contact__photo { position: absolute; inset: 0; overflow: hidden; }
.c-contact__photo img { width: 100%; height: 100%; object-fit: cover; }
.c-contact__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(9, 32, 52, .62);
}
.c-contact__panel {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(34px, 5vw, 66px) clamp(22px, 4vw, 60px);
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
  text-align: center;
}
.c-contact__panel .c-sec-en { justify-content: center; }
.c-contact__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.35rem, 2.8vw, 2.05rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .1em;
  margin-bottom: 22px;
}
.c-contact__txt {
  font-size: .88rem;
  line-height: 2.1;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .84);
  margin-bottom: clamp(28px, 4vw, 42px);
}
.c-contact__acts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 44px);
  flex-wrap: wrap;
}
.c-contact__tel {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}
.c-contact__tel i { font-size: 1.05rem; }
.c-contact__tel strong {
  display: block;
  font-family: var(--f-min);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: 1.2;
}
.c-contact__tel em {
  display: block;
  font-style: normal;
  font-size: .875rem;
  letter-spacing: .05em;
  opacity: .82;
  margin-top: 6px;
}
.c-contact .c-btn--fill { background: #fff; color: var(--c-main-deep); border-color: #fff; }
.c-contact .c-btn--fill:hover { background: var(--c-main); color: #fff; border-color: var(--c-main); }

/* =================================================================
   FOOTER
   ================================================================= */
.c-footer {
  position: relative;
  background: var(--c-sub-pale);
  padding-top: clamp(64px, 8vw, 104px);
  overflow: hidden;
}
.c-footer__bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  aspect-ratio: 2160 / 728;
  background: url("images/footer_bg.webp") no-repeat bottom center / 100% auto;
  pointer-events: none;
  z-index: 0;
}
.c-footer__inner {
  position: relative;
  z-index: 2;
  max-width: var(--w);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(32px, 5vw, 72px);
}
.c-fnav-logo { display: block; margin-bottom: 24px; }
.c-fnav-brand__addr {
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--c-text-thin);
  margin-bottom: 16px;
}
.c-fnav-brand__tel {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-min);
  font-size: 1.72rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-main-deep);
}
.c-fnav-brand__tel i { font-size: .55em; color: var(--c-main); }
.c-fnav-brand__hours { font-size: .875rem; letter-spacing: .05em; color: var(--c-text-thin); margin-top: 6px; }
.c-fnav-brand__sns { display: flex; gap: 18px; margin-top: 22px; }
.c-fnav-brand__sns a {
  width: 40px; height: 40px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--c-main-deep);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.c-fnav-brand__sns a:hover { background: var(--c-main); border-color: var(--c-main); color: #fff; }

.c-fnav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.c-fnav__col h3 {
  font-family: var(--f-min);
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--c-line);
}
.c-fnav__col li + li { margin-top: 10px; }
.c-fnav__col a {
  position: relative;
  display: inline-block;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--c-text-thin);
  padding-left: 16px;
  transition: color .3s var(--ease);
}
.c-fnav__col a::before {
  content: "";
  position: absolute;
  left: 0; top: .78em;
  width: 7px; height: 1px;
  background: var(--c-main-soft);
  transition: width .3s var(--ease);
}
.c-fnav__col a:hover { color: var(--c-main); }
.c-fnav__col a:hover::before { width: 11px; }

.c-footer__bottom {
  position: relative;
  z-index: 2;
  /* 背景写真の松・砂浜に重なると文字のコントラストが落ちるため、地色を薄く敷く */
  background: rgba(247, 243, 234, .78);
  background: color-mix(in srgb, var(--c-sub-pale) 78%, transparent);
  border-top: 1px solid var(--c-line);
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .875rem;
  letter-spacing: .05em;
  color: var(--c-text-thin);
}
.c-footer__bottom ul { display: flex; gap: 26px; }
.c-footer__bottom a { transition: color .3s var(--ease); }
.c-footer__bottom a:hover { color: var(--c-main); }

/* 追従CTA */
.c-fixcta {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  width: 56px;
  padding: 22px 0;
  background: var(--c-main-deep);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transition: background-color .35s var(--ease);
}
.c-fixcta:hover { background: var(--c-main); }
.c-fixcta span { writing-mode: vertical-rl; font-size: .875rem; letter-spacing: .18em; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media screen and (max-width: 1151px) {
  .c-header { padding: 16px var(--pad); }
  .c-header__inner { align-items: flex-start; }
  .c-gnav { display: none; }
  .c-burger { display: flex; }
  .c-header.is-fixed .c-logo img { width: 168px; }

  .c-phi__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 8vw, 72px); }
  .c-phi__text { position: static; }
  /* 3列に並べるとキャプションが折れるので縦積みにする。左右の寄せでリズムだけ残す */
  .c-phi__figs { grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 52px); }
  .c-phi__fig:nth-child(1) { width: 86%; margin-left: 0; }
  .c-phi__fig:nth-child(2) { width: 74%; margin-left: auto; margin-right: 0; }
  .c-phi__fig:nth-child(3) { width: 100%; margin: 0; }
  .c-phi__fig figcaption { margin-top: 12px; padding-top: 10px; gap: 12px; }

  .c-svc__row a { grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 30px); }
  .c-svc__arrow { display: none; }

  .c-news__inner { grid-template-columns: minmax(0, 1fr); }
  .c-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .c-fixcta { display: none; }
}

@media screen and (max-width: 767px) {
  body { font-size: 15px; }

  .c-mv { height: clamp(520px, 92svh, 760px); }
  .c-mv__copy { bottom: clamp(84px, 12vh, 120px); max-width: none; right: var(--pad); }
  .c-mv__scroll { display: none; }

  .c-reason__list { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .c-reason__fig img { aspect-ratio: 16 / 10; }

  .c-svc__row a { grid-template-columns: auto minmax(0, 1fr); row-gap: 18px; }
  .c-svc__thumb { grid-column: 1 / -1; width: 100%; opacity: 1; }
  .c-svc__thumb img { aspect-ratio: 16 / 9; }

  .c-news__list a,
  .c-news__row { grid-template-columns: auto auto; row-gap: 10px; gap: 14px; }
  .c-news__ttl { grid-column: 1 / -1; }

  .c-fnav { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .c-contact__acts { flex-direction: column; gap: 24px; }
  .c-contact__acts .c-btn { width: 100%; }
  .c-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .c-up { opacity: 1; transform: none; transition: none; }
  .c-mv__scroll i::after { animation: none; }
  html { scroll-behavior: auto; }
}
@charset "UTF-8";

/* =================================================================
   株式会社新松屋 — 下層ページ共通
   TOP（C案）のトークン・見出し・ボタンをそのまま継承し、
   下層でしか使わないパーツだけをここに置く。
   style.css の後に読み込む。
   ================================================================= */

:root {
  /* 固定ヘッダーの実高。ページヘッダーの上余白に使う */
  --hd: clamp(88px, 10.5vw, 152px);
  --w-narrow: 900px;
}

/* -----------------------------------------------------------------
   下層はヘッダーを常に「白背景・着色ロゴ」で固定する。
   TOPは MV に重ねる透過ヘッダーなので、下層だけ状態を上書きする。
   ----------------------------------------------------------------- */
body.is-sub .c-header {
  background: rgba(255, 255, 255, .96);
  padding-top: clamp(12px, 1.4vw, 16px);
  padding-bottom: clamp(10px, 1.2vw, 14px);
  box-shadow: 0 1px 20px rgba(20, 60, 94, .07);
}
body.is-sub .c-header::after { background: var(--c-line); }
body.is-sub .c-logo__white { opacity: 0; }
body.is-sub .c-logo__color { opacity: 1; }
body.is-sub .c-logo img { width: clamp(168px, 13vw, 208px); }
body.is-sub .c-gnav a { color: var(--c-text); }
body.is-sub .c-gnav a:hover { color: var(--c-main); }

/* 現在地 */
.c-gnav a[aria-current="page"] { color: var(--c-main); }
.c-gnav a[aria-current="page"]::after { width: 100%; }
.c-spnav a[aria-current="page"] { color: var(--c-main); }

/* =================================================================
   ページヘッダー
   ================================================================= */
.l-phead {
  position: relative;
  padding: calc(var(--hd) + clamp(40px, 6vw, 84px)) var(--pad) clamp(42px, 6vw, 76px);
  overflow: hidden;
  background: var(--c-main-deep);
  color: #fff;
}
.l-phead__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.l-phead__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
/* 写真の上に濃い幕を敷く。文字コントラストは幕の濃度で担保する */
.l-phead__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(15, 42, 66, .90) 0%, rgba(15, 42, 66, .78) 46%, rgba(15, 42, 66, .60) 100%);
}
.l-phead__inner {
  position: relative;
  z-index: 1;
  max-width: var(--w);
  margin-inline: auto;
}
.l-phead__en {
  font-family: var(--f-en);
  font-size: clamp(.82rem, 1.1vw, .95rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.l-phead__en::before {
  content: "";
  width: 44px; height: 1px;
  background: currentColor;
  opacity: .7;
}
.l-phead__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .09em;
}
.l-phead__sub {
  margin-top: 18px;
  max-width: 46em;
  font-size: clamp(.9rem, 1.1vw, .98rem);
  line-height: 2;
  color: rgba(255, 255, 255, .88);
}

/* =================================================================
   レイアウト
   ================================================================= */
.l-sec { padding: clamp(60px, 8vw, 112px) var(--pad); }
.l-sec--pale { background: var(--c-sub-pale); }
.l-sec--main { background: var(--c-main-pale); }
.l-sec--tight { padding-block: clamp(44px, 5.5vw, 76px); }
.l-inner { max-width: var(--w); margin-inline: auto; }
.l-inner--narrow { max-width: var(--w-narrow); margin-inline: auto; }

.l-head { margin-bottom: clamp(34px, 4.5vw, 60px); }
.l-head--center { text-align: center; }
.l-head--center .c-sec-en { justify-content: center; }

.l-lead {
  font-size: clamp(.95rem, 1.25vw, 1.06rem);
  line-height: 2.1;
  color: var(--c-text-thin);
}
.l-lead strong { color: var(--c-text); font-weight: 500; }
.l-lead + .l-lead { margin-top: 1.5em; }

.l-h3 {
  font-family: var(--f-min);
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .07em;
  padding-left: 18px;
  border-left: 3px solid var(--c-main);
  margin-bottom: 20px;
}
.l-h4 {
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--c-main-dark);
  margin-bottom: 12px;
}
.l-body p { line-height: 2.1; }
.l-body p + p { margin-top: 1.5em; }
.l-body + .l-body { margin-top: clamp(38px, 5vw, 60px); }

.l-note {
  margin-top: 20px;
  padding: 16px 20px;
  background: var(--c-sub-pale);
  border-left: 3px solid var(--c-sub);
  font-size: .88rem;
  line-height: 1.95;
  color: var(--c-text-thin);
}
.l-sec--pale .l-note { background: #fff; }

/* 箇条書き */
.l-list { margin-top: 20px; }
.l-list li {
  position: relative;
  padding-left: 26px;
  line-height: 2;
}
.l-list li + li { margin-top: 8px; }
.l-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: calc(1em - 1px);
  width: 10px; height: 10px;
  border-bottom: 1px solid var(--c-main);
  border-right: 1px solid var(--c-main);
  transform: rotate(45deg) translateY(-3px);
}
.l-list--check li::before {
  left: 0; top: .62em;
  width: 12px; height: 7px;
  border-width: 0 0 2px 2px;
  border-style: solid;
  border-color: var(--c-accent);
  transform: rotate(-45deg);
}

/* =================================================================
   定義テーブル（会社概要など）
   ================================================================= */
.l-table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(.88rem, 1.1vw, .96rem);
}
.l-table th,
.l-table td {
  padding: 18px 4px;
  text-align: left;
  vertical-align: top;
  line-height: 1.95;
  border-bottom: 1px solid var(--c-line);
}
.l-table th {
  width: 12em;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--c-main-dark);
  white-space: nowrap;
}
.l-table td ul li + li { margin-top: 4px; }

/* =================================================================
   カード
   ================================================================= */
.l-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.l-cards--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.l-card {
  background: #fff;
  border: 1px solid var(--c-line);
  padding: clamp(24px, 3vw, 38px);
}
.l-card__num {
  font-family: var(--f-en);
  font-size: 1.5rem;
  letter-spacing: .1em;
  color: var(--c-main-soft);
  display: block;
  margin-bottom: 10px;
}
.l-card__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.l-card__txt { font-size: .92rem; line-height: 2; color: var(--c-text-thin); }
.l-card__fig { margin: -1px -1px 22px; }
.l-card__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.l-card--flat { border: 0; background: var(--c-sub-pale); }
.l-sec--pale .l-card--flat { background: #fff; }

/* 写真つき交互レイアウト */
.l-alt { display: grid; gap: clamp(38px, 5vw, 72px); }
.l-alt__row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 60px);
}
.l-alt__row:nth-child(even) .l-alt__fig { order: -1; }
.l-alt__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.l-alt__fig figcaption {
  margin-top: 10px;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--c-text-thin);
}

/* =================================================================
   流れ（ステップ）
   ================================================================= */
.l-flow { counter-reset: flow; }
.l-flow__item {
  position: relative;
  counter-increment: flow;
  padding: 0 0 clamp(30px, 4vw, 46px) clamp(58px, 7vw, 84px);
}
.l-flow__item::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  width: clamp(40px, 5vw, 54px);
  height: clamp(40px, 5vw, 54px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-main);
  color: #fff;
  font-family: var(--f-en);
  font-size: clamp(.9rem, 1.2vw, 1.05rem);
  letter-spacing: .06em;
}
/* 縦線は番号円の中心に合わせる */
.l-flow__item::after {
  content: "";
  position: absolute;
  left: calc(clamp(40px, 5vw, 54px) / 2);
  top: clamp(40px, 5vw, 54px);
  bottom: 8px;
  width: 1px;
  background: var(--c-line);
}
.l-flow__item:last-child { padding-bottom: 0; }
.l-flow__item:last-child::after { display: none; }
.l-flow__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  font-weight: 500;
  letter-spacing: .06em;
  margin-bottom: 10px;
  padding-top: 6px;
}
.l-flow__txt { font-size: .92rem; line-height: 2.05; color: var(--c-text-thin); }

/* =================================================================
   よくある質問
   ================================================================= */
.l-faq { border-top: 1px solid var(--c-line); }
.l-faq__item { border-bottom: 1px solid var(--c-line); }
.l-faq__q {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(.95rem, 1.2vw, 1.02rem);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .03em;
}
.l-faq__q::-webkit-details-marker { display: none; }
.l-faq__q::before {
  content: "Q";
  font-family: var(--f-en);
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--c-main);
}
.l-faq__mark {
  position: relative;
  width: 16px; height: 16px;
  margin-top: 6px;
  flex: none;
}
.l-faq__mark::before,
.l-faq__mark::after {
  content: "";
  position: absolute;
  background: var(--c-main);
  transition: transform .3s var(--ease);
}
.l-faq__mark::before { left: 0; top: 7px; width: 16px; height: 2px; }
.l-faq__mark::after { left: 7px; top: 0; width: 2px; height: 16px; }
.l-faq__item[open] .l-faq__mark::after { transform: scaleY(0); }
.l-faq__a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  padding: 0 4px 26px;
  font-size: .93rem;
  line-height: 2.05;
  color: var(--c-text-thin);
}
.l-faq__a::before {
  content: "A";
  font-family: var(--f-en);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--c-sub);
}
.l-faq__a p + p { margin-top: 1.2em; }

/* =================================================================
   施工事例
   ================================================================= */
.l-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: clamp(22px, 2.8vw, 38px);
}
.l-case { background: #fff; border: 1px solid var(--c-line); }
.l-case__fig { overflow: hidden; }
.l-case__fig img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.l-case:hover .l-case__fig img { transform: scale(1.05); }
.l-case__body { padding: 22px clamp(18px, 2vw, 26px) 26px; }
.l-case__cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-main-pale);
  color: var(--c-main-dark);
  font-size: .875rem;
  letter-spacing: .08em;
  margin-bottom: 12px;
}
.l-case__ttl {
  font-family: var(--f-min);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .05em;
  margin-bottom: 14px;
}
.l-case__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: .875rem;
  color: var(--c-text-thin);
}
.l-case__meta dt { display: inline; letter-spacing: .06em; }
.l-case__meta dt::after { content: "："; }
.l-case__meta dd { display: inline; margin: 0; color: var(--c-text); }
.l-case__meta > div { display: flex; align-items: baseline; }

/* BEFORE / AFTER */
.l-ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.l-ba figure { position: relative; }
.l-ba img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.l-ba figcaption {
  position: absolute;
  left: 0; top: 0;
  padding: 7px 18px;
  font-family: var(--f-en);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--c-text);
}
.l-ba figure.is-after figcaption { background: var(--c-main); }
.l-ba--plan img { aspect-ratio: auto; background: #fff; }

/* ギャラリー */
.l-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(214px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.l-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 6枚をきれいに2段で並べたいとき（auto-fit だと 5＋1 で余る幅がある） */
.l-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 追加の1枚だけを出すとき。1枚が画面幅いっぱいに伸びるのを止める */
.l-gallery--single { max-width: 640px; }
.l-gallery figcaption {
  margin-top: 8px;
  font-size: .875rem;
  line-height: 1.7;
  color: var(--c-text-thin);
}

/* =================================================================
   お知らせ一覧
   ================================================================= */
.l-news { border-top: 1px solid var(--c-line); }
.l-news li { border-bottom: 1px solid var(--c-line); }
.l-news a,
.l-news__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 20px;
  padding: 24px 4px;
  transition: color .3s var(--ease);
}
.l-news a:hover { color: var(--c-main); }
.l-news time {
  font-family: var(--f-en);
  font-size: .92rem;
  letter-spacing: .1em;
  color: var(--c-text-thin);
}
.l-news__cat {
  padding: 4px 14px;
  background: var(--c-main-pale);
  color: var(--c-main-dark);
  font-size: .875rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
.l-news__ttl { font-size: .95rem; line-height: 1.85; }

/* 本文つきの記事（詳細ページを作っていないため一覧に全文を出す）
   🔴 WP化で投稿にしたら __row を <a href="the_permalink()"> に戻し、
      __row--head と __body はテンプレート側（single/archive）へ移す */
.l-news__row--head { padding-bottom: 10px; align-items: baseline; }
.l-news__row--head .l-news__ttl { font-weight: 700; color: var(--c-text); }
.l-news__body {
  padding: 0 4px 28px;
  font-size: .9rem;
  line-height: 2.05;
  color: var(--c-text-thin);
}
.l-news__body p + p { margin-top: 1.3em; }
.l-news__body a { color: var(--c-main); text-decoration: underline; }

/* =================================================================
   お問い合わせフォーム
   ================================================================= */
.l-form { margin-top: clamp(34px, 4vw, 50px); }
.l-form__row {
  display: grid;
  grid-template-columns: 13em minmax(0, 1fr);
  gap: 10px 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
}
.l-form__row:first-child { border-top: 1px solid var(--c-line); }
.l-form__label {
  padding-top: 12px;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .05em;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.l-form__req,
.l-form__any {
  flex: none;
  padding: 3px 10px;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.5;
}
.l-form__req { background: #b4423a; color: #fff; }
.l-form__any { background: rgba(35, 38, 42, .10); color: var(--c-text); }
.l-form input[type="text"],
.l-form input[type="tel"],
.l-form input[type="email"],
.l-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--c-text);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.l-form textarea { min-height: 200px; resize: vertical; }
.l-form input:focus,
.l-form textarea:focus {
  outline: 0;
  border-color: var(--c-main);
  box-shadow: 0 0 0 3px rgba(43, 108, 163, .14);
}
.l-form__hint { margin-top: 8px; font-size: .875rem; color: var(--c-text-thin); }
.l-form__submit { margin-top: clamp(34px, 4vw, 48px); text-align: center; }
.l-form__submit .c-btn { border: 0; }
.l-form__agree {
  margin-bottom: 24px;
  text-align: center;
  font-size: .88rem;
  color: var(--c-text-thin);
}
.l-form__agree a { color: var(--c-main); text-decoration: underline; }

/* reCAPTCHA の適用表示（先方支給の文言・フォーム直下） */
.l-form__recaptcha {
  margin-top: clamp(22px, 2.6vw, 30px);
  text-align: center;
  font-size: .8rem;
  line-height: 1.95;
  color: var(--c-text-thin);
}
.l-form__recaptcha a { color: var(--c-main); text-decoration: underline; }

/* 電話の並記 */
.l-tel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(30px, 4vw, 44px);
}
.l-tel__box {
  padding: clamp(24px, 3vw, 34px);
  background: var(--c-sub-pale);
  text-align: center;
}
.l-sec--pale .l-tel__box { background: #fff; }
.l-tel__lbl {
  font-family: var(--f-en);
  font-size: .82rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-main);
  margin-bottom: 10px;
}
.l-tel__num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-min);
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--c-main-dark);
}
.l-tel__num i { font-size: .62em; }
.l-tel__sub { margin-top: 8px; font-size: .875rem; color: var(--c-text-thin); }

/* =================================================================
   Googleマップ
   ================================================================= */
.l-map {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-main-pale);
}
.l-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =================================================================
   規約・ポリシー本文
   ================================================================= */
.l-legal { font-size: clamp(.9rem, 1.1vw, .96rem); }
.l-legal h2 {
  font-family: var(--f-min);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: .06em;
  margin: clamp(38px, 4.5vw, 58px) 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.l-legal h2:first-child { margin-top: 0; }
.l-legal p { line-height: 2.1; }
.l-legal p + p { margin-top: 1.3em; }
.l-legal ol,
.l-legal ul { margin: 1em 0 0; padding-left: 1.6em; }
.l-legal ol { list-style: decimal; }
.l-legal ul { list-style: disc; }
.l-legal li { line-height: 2.05; list-style: inherit; }
.l-legal li + li { margin-top: 6px; }
.l-legal__date { margin-top: clamp(38px, 4.5vw, 56px); text-align: right; font-size: .875rem; color: var(--c-text-thin); }

/* =================================================================
   ページ内リンク
   ================================================================= */
.l-anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.l-anchor a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border: 1px solid var(--c-line);
  background: #fff;
  font-size: .88rem;
  letter-spacing: .04em;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.l-anchor a::after {
  content: "";
  width: 7px; height: 7px;
  border-bottom: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.l-anchor a:hover { color: var(--c-main); border-color: var(--c-main-soft); }

/* アンカー着地が固定ヘッダーに潜らないように */
[id] { scroll-margin-top: calc(var(--hd) + 20px); }

/* =================================================================
   次ページへの導線
   ================================================================= */
.l-next {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.l-next a {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 178px;
  padding: clamp(26px, 3vw, 34px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.l-next a img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.l-next a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 42, 66, .30) 0%, rgba(15, 42, 66, .82) 100%);
}
.l-next a:hover img { transform: scale(1.06); }
.l-next__en,
.l-next__ttl { position: relative; z-index: 1; }
.l-next__en {
  font-family: var(--f-en);
  font-size: .8125rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 8px;
}
.l-next__ttl {
  font-family: var(--f-min);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 500;
  letter-spacing: .06em;
}

/* =================================================================
   レスポンシブ
   ================================================================= */
@media (max-width: 1151px) {
  .l-alt__row { grid-template-columns: minmax(0, 1fr); }
  .l-alt__row:nth-child(even) .l-alt__fig { order: 0; }
}

@media (max-width: 767px) {
  .l-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .l-table th,
  .l-table td { display: block; width: auto; white-space: normal; }
  .l-table th { padding: 16px 0 0; border-bottom: 0; }
  .l-table td { padding: 6px 0 16px; }

  .l-form__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .l-form__label { padding-top: 0; }

  .l-news a,
  .l-news__row { grid-template-columns: auto minmax(0, 1fr); }
  .l-news__ttl { grid-column: 1 / -1; }

  .l-faq__q { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
}

/* =================================================================
   アイコン（Font Awesome）
   ================================================================= */
/* ページヘッダーの背景に大きく1つ。装飾なので読み上げ対象から外す */
.l-phead__icon {
  position: absolute;
  right: clamp(-10px, 1vw, 40px);
  bottom: -18px;
  z-index: 1;
  font-size: clamp(120px, 17vw, 240px);
  line-height: 1;
  color: #fff;
  opacity: .085;
  pointer-events: none;
}

/* 見出しの頭に付けるアイコン */
.l-h3 > i,
.l-h4 > i {
  margin-right: 12px;
  color: var(--c-main);
  font-size: .88em;
}
.l-h4 > i { color: var(--c-sub); }

/* 丸アイコン（カード・番号の代わり） */
.l-icn {
  display: grid;
  place-items: center;
  width: clamp(52px, 5.6vw, 64px);
  height: clamp(52px, 5.6vw, 64px);
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--c-main-pale);
  color: var(--c-main-dark);
  font-size: clamp(1.24rem, 1.7vw, 1.5rem);
}
.l-icn--sub { background: var(--c-sub-pale); color: var(--c-sub); }
.l-icn--accent { background: rgba(74, 124, 89, .12); color: var(--c-accent); }
.l-icn--deep { background: var(--c-main-deep); color: #fff; }

/* アイコン付きリスト */
.l-iconlist { display: grid; gap: 14px; }
.l-iconlist li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  line-height: 2;
}
.l-iconlist li > i {
  color: var(--c-main);
  font-size: .95em;
  transform: translateY(.15em);
}
.l-iconlist--check li > i { color: var(--c-accent); }

/* 対応部位などのタグ雲 */
.l-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.l-tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: #fff;
  border: 1px solid var(--c-line);
  font-size: .875rem;
  letter-spacing: .03em;
}
.l-tags li > i { color: var(--c-main-soft); }
.l-sec--pale .l-tags li { background: #fff; }

/* FAQ のカテゴリ見出し */
.l-faqcat {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(44px, 5vw, 66px) 0 6px;
  font-family: var(--f-min);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 500;
  letter-spacing: .07em;
}
.l-faqcat:first-child { margin-top: 0; }
.l-faqcat > i { color: var(--c-main); font-size: .9em; }

/* 数字の内訳バー（費用の目安） */
.l-bars { display: grid; gap: 22px; }
.l-bar__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 16px;
  margin-bottom: 10px;
}
.l-bar__ttl {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .96rem;
  font-weight: 500;
  letter-spacing: .04em;
}
.l-bar__ttl > i { color: var(--c-main); }
.l-bar__val {
  font-family: var(--f-min);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  font-weight: 500;
  color: var(--c-main-dark);
  letter-spacing: .03em;
}
.l-bar__track { height: 8px; background: var(--c-main-pale); }
.l-sec--main .l-bar__track { background: #fff; }
.l-bar__fill { height: 100%; background: linear-gradient(90deg, var(--c-main-soft), var(--c-main)); }

/* ダーク帯 */
.l-sec--dark { background: var(--c-main-deep); color: #fff; }
.l-sec--dark .c-sec-ttl { color: #fff; }
.l-sec--dark .l-lead { color: rgba(255, 255, 255, .84); }
.l-sec--dark .l-lead strong { color: #fff; }
.l-sec--dark .l-card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
.l-sec--dark .l-card__ttl { color: #fff; }
.l-sec--dark .l-card__txt { color: rgba(255, 255, 255, .8); }
.l-sec--dark .l-icn { background: rgba(255, 255, 255, .12); color: #fff; }
.l-sec--dark .l-table th { color: #fff; }
.l-sec--dark .l-table th,
.l-sec--dark .l-table td { border-color: rgba(255, 255, 255, .18); }

/* 代表プロフィール */
.l-prof {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.l-prof__fig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 34%; }
.l-prof__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 16px;
  margin-top: 18px;
}
.l-prof__role {
  padding: 4px 12px;
  background: var(--c-main);
  color: #fff;
  font-size: .875rem;
  letter-spacing: .06em;
}
.l-prof__ja {
  font-family: var(--f-min);
  font-size: clamp(1.14rem, 1.6vw, 1.32rem);
  font-weight: 500;
  letter-spacing: .1em;
}
.l-prof__sign { margin-top: clamp(26px, 3vw, 36px); text-align: right; font-size: .96rem; }
.l-prof__sign strong { font-family: var(--f-min); font-size: 1.14em; font-weight: 500; letter-spacing: .1em; }

@media (max-width: 767px) {
  .l-prof { grid-template-columns: minmax(0, 1fr); }
  .l-prof__fig { max-width: 320px; }
}

/* =================================================================
   WordPress 固有（静的版には無い要素）
   ================================================================= */
.l-post__meta { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 34px); }
.l-post__meta time { font-family: var(--f-en); font-size: .95rem; letter-spacing: .1em; color: var(--c-text-thin); }
.l-post__body { font-size: .95rem; }
.l-post__body a { color: var(--c-main); text-decoration: underline; }
.l-post__nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px; margin-top: clamp(40px, 5vw, 60px);
  padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--c-line);
  font-size: .9rem;
}
.l-post__nav a:not(.c-btn) { color: var(--c-text-thin); transition: color .3s var(--ease); }
.l-post__nav a:not(.c-btn):hover { color: var(--c-main); }
.l-pager { display: flex; justify-content: center; gap: 10px; margin-top: clamp(34px, 4vw, 48px); }
.l-pager .page-numbers {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--c-line); font-family: var(--f-en); font-size: .92rem;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.l-pager .page-numbers.current,
.l-pager .page-numbers:hover { background: var(--c-main); border-color: var(--c-main); color: #fff; }
/* Arkhe 既定レイアウトの打ち消し */
.l-content, .l-main, .l-article { max-width: none !important; padding: 0 !important; margin: 0 !important; }
.p-entry__title, .c-pageTitle, .l-header, .l-footer, .p-breadcrumb { display: none !important; }

/* Contact Form 7 の送信ボタンを .c-btn--fill と同じ見た目にする
   🔴 CF7 の [submit] は <input> になるため、静的版にあった封筒と矢印のアイコンは付いていない。
      管理画面 → お問い合わせ → フォーム で [submit] を
      <button type="submit" class="c-btn c-btn--fill"><i class="fa-regular fa-paper-plane"></i>送信する<i class="fa-solid fa-arrow-right"></i></button>
      に置き換えるとアイコン入りになる（RESTのPUTがサーバー側WAFで通らず、ここからは差し替えできなかった） */
.l-form__submit input[type="submit"],
.l-form__submit .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 32px;
  font-family: inherit;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .08em;
  background: var(--c-main);
  color: #fff;
  border: 1px solid var(--c-main);
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .35s var(--ease), border-color .35s var(--ease);
}
.l-form__submit input[type="submit"]:hover,
.l-form__submit .wpcf7-submit:hover { background: var(--c-main-deep); border-color: var(--c-main-deep); }

/* CF7 が挿入する要素の見た目を整える */
.wpcf7-spinner { display: block; margin: 14px auto 0; }
.wpcf7 form .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--c-line);
  font-size: .9rem;
  line-height: 1.9;
}
.wpcf7-not-valid-tip { display: block; margin-top: 8px; color: #c0392b; font-size: .84rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; }