@charset "utf-8";
/* ============================================================
   front-page.css  ―  トップページ（front-page.php）専用スタイル
   2026 リニューアル版。is_front_page() のときのみ読み込まれる。
   既存 style.css と干渉しないよう、全要素を .fp-body 配下に限定する。
   ============================================================ */

/* ---- デザイントークン ------------------------------------ */
:root {
  --fp-green: #099339;
  /* アクセント緑（ナビ現在地・ボタン・見出し） */
  --fp-green-dark: #077a2f;
  --fp-text: #353535;
  /* 基本テキスト */
  --fp-text-weak: #888888;
  /* 補足テキスト */
  --fp-bg: #ffffff;
  --fp-bg-soft: #f4f7f2;
  /* セクション淡背景 */
  --fp-line: #e3e3e3;
  --fp-sidebar-w: 280px;
  --fp-content-w: 1200px;
}

/* ---- ベース（トップページのみ） -------------------------- */
.fp-body {
  margin: 0;
  color: var(--fp-text);
  background: var(--fp-bg);
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* SPはvwベースで文字を縮小するため、モバイルの自動文字拡大（font boosting）を無効化。
     これが無いと実機で比較表の列見出し等が拡大され、1文字ずつ折り返す（縦書き状態になる）。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.fp-body img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* リンクの既定色リセット。:where() で詳細度0にし、各コンポーネント側の
   color 指定（.fp-hb-tel / .fp-hb-reserve / .fp-btn-list 等）が必ず勝つようにする。 */
:where(.fp-body) a {
  color: inherit;
  text-decoration: none;
}

:where(.fp-body) a:hover {
  /* color: inherit; */
  text-decoration: none;
  opacity: 1;
}

#fp-page {
  position: relative;
  width: 100%;
  min-width: calc(var(--fp-sidebar-w) + var(--fp-content-w));
  /* 1480px：これ未満は横スクロール */
}

/* ---- 左固定サイドバー ------------------------------------ */
#fp-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--fp-sidebar-w);
  height: 100%;
  background: var(--fp-bg);
  box-shadow: 0 4px 10px 0 rgba(176, 176, 176, .5);
  z-index: 100;
  box-sizing: border-box;
}

/* サイドバーは常にブラウザ左端に固定 */

.fp-logo {
  padding: 8px 24px 0;
}

.fp-logo img {
  width: 100%;
}

.fp-nav {
  margin-top: 28px;
  padding: 12px 0 16px;
  border-top: 1px solid var(--fp-line);
}

.fp-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fp-nav li {
  margin: 0;
}

.fp-nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  font-size: 16px;
  line-height: 30px;
  color: var(--fp-text);
  transition: color .2s;
}

.fp-nav a .fp-nav-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.fp-nav a .fp-nav-ico img {
  width: 100%;
  height: 100%;
}

/* SVGは meet で比率保持 */
.fp-nav a:hover {
  color: var(--fp-green);
}

.fp-nav li.is-current a {
  color: var(--fp-green);
}

/* アイコンは背景色＋SVGマスクで描画し、currentColor（＝リンク文字色）に追従させる。
   is-current / hover で color:green になると、アイコンも一緒に緑になる。 */
.fp-nav .fp-nav-ico {
  background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
.fp-nav .fp-nav-ico img {
  display: none;
}

/* ---- Follow Me / QR / Instagram -------------------------- */
.fp-follow {
  border-top: 1px solid var(--fp-line);
  padding: 16px 0 0;
  text-align: center;
}

.fp-follow-ttl {
  margin: 0;
  font-size: 16px;
  letter-spacing: .3em;
  color: var(--fp-text-weak);
}

.fp-qr {
  width: 166px;
  height: 191px;
  object-fit: cover;
}

.fp-insta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 40px;
  margin-top: 12px;
  border: 1px solid var(--fp-green);
  border-radius: 100px;
  color: var(--fp-green);
  font-size: 16px;
  transition: background .2s, color .2s;
}

.fp-insta-btn:hover {
  background: var(--fp-green);
  color: #fff;
}

.fp-insta-btn img {
  width: 18px;
}

.fp-insta-btn:hover img {
  filter: brightness(0) invert(1);
}

/* ---- メインカラム ---------------------------------------- */
#fp-main {
  position: relative;
  margin-left: var(--fp-sidebar-w);
  /* サイドバー分だけ右へ */
  width: auto;
  /* 残り全幅を使う（背景は100%） */
  box-sizing: border-box;
  /* 各セクションの中身を最大1200pxで中央寄せするための左右ガター */
  --fp-gut: max(40px, calc((100% - var(--fp-content-w)) / 2));
}

/* ============================================================
   共通パーツ
   ============================================================ */

/* セクション共通の余白（左右は中央寄せガター） */
.fp-section {
  padding: 80px var(--fp-gut);
  box-sizing: border-box;
}

/* セクション見出し（EN小見出し＋緑/グレーの下線バー＋日本語見出し） */
.fp-sec-ttl .en {
  display: block;
  font-size: 16px;
  letter-spacing: .3em;
  color: var(--fp-text-weak);
  line-height: 1;
}

.fp-sec-ttl .bar {
  display: block;
  width: 147px;
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(to right, var(--fp-green) 0 32px, var(--fp-text-weak) 32px 147px);
}

.fp-sec-ttl .ja {
  display: block;
  margin: 27px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .05em;
  color: #000;
  line-height: 1.25;
}

.fp-sec-txt {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fp-text);
}

/* 「一覧を見る」ボタン（緑枠・矢印は枠右端を約21pxはみ出す） */
.fp-btn-list {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 172px;
  height: 46px;
  border: 1px solid var(--fp-green);
  color: var(--fp-green);
  font-size: 16px;
  background: #fff;
  transition: color .2s, border-color .2s, background .2s;
}

/* 矢印（長い線＋矢じり）。枠の右端から21px外へ突き出すデザイン。 */
.fp-btn-list::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -21px;
  transform: translateY(-50%);
  width: 49px;
  height: 7px;
  background: url("../img/top/arrow-green-long.svg") no-repeat right center / contain;
  transition: transform .2s;
}

/* ホバー（＝パーツ集の「ホバー」状態）：緑塗りつぶし＋白文字。
   矢印は枠外へはみ出すため反転（白化）させず、緑のままにする。.is-hover は静的表示用 */
.fp-btn-list:hover,
.fp-btn-list.is-hover {
  background: var(--fp-green);
  color: #fff;
}

/* PCのみ、SPのみ表示 */
.fp-pc {
  display: block;
}
.fp-sp {
  display: none;
}


/* ============================================================
   右上ヘッダーバー（電話 / 無料相談）
   ============================================================ */
.fp-headbar {
  position: fixed;
  /* スクロールしても右上に固定追従 */
  top: 0;
  right: 0;
  /* 画面右端に固定（2ボタンが常に見える） */
  left: auto;
  z-index: 200;
  display: flex;
  height: 77px;
}

/* メインは右端まで広がるので、ヘッダーバーはブラウザ右端でOK */
.fp-hb-tel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 280px;
  height: 77px;
  padding: 0 18px;
  box-sizing: border-box;
  background: var(--fp-green);
  color: #fff;
  border-bottom-left-radius: 10px;
}

.fp-hb-tel:hover {
  color: #fff;
}

/* ホバー時に白オーバーレイを乗せて明るく見せる */
.fp-hb-tel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom-left-radius: 10px;
  background: rgba(255, 255, 255, 0);
  transition: background .2s;
  pointer-events: none;
}

.fp-hb-tel:hover::before {
  background: rgba(255, 255, 255, 0.15);
}

.fp-hb-tel .fp-hb-ico {
  display: inline-flex;
  align-items: center;
}

.fp-hb-tel .fp-hb-ico img {
  margin-left: 12px;
  width: auto;
  height: 45px;
}

.fp-hb-body {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.fp-hb-label {
  font-size: 12.8px;
  letter-spacing: .01em;
}

.fp-hb-num {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: .04em;
}

.fp-hb-time {
  font-size: 12.8px;
  letter-spacing: .01em;
}

.fp-hb-reserve {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 256px;
  height: 77px;
  background: #353535;
  color: #f0c788;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .03em;
}

.fp-hb-reserve:hover {
  color: #f0c788;
}

/* ホバー時に白オーバーレイを乗せて明るく見せる */
.fp-hb-reserve::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background .2s;
  pointer-events: none;
}

.fp-hb-reserve:hover::before {
  background: rgba(255, 255, 255, 0.15);
}

.fp-hb-reserve img {
  width: auto;
  height: 26px;
}

/* 予約ボタンのテキストを常にゴールドで表示。
   旧テーマ/プラグインの a:link 等（詳細度0,1,1）に .fp-hb-reserve（0,1,0）が負けて
   通常時だけ文字が消える（ホバー時のみ表示）不具合への対策として詳細度を上げる。 */
#fp-page .fp-hb-reserve,
#fp-page .fp-hb-reserve span {
  color: #f0c788;
}
#fp-page .fp-hb-tel,
#fp-page .fp-hb-tel .fp-hb-label,
#fp-page .fp-hb-tel .fp-hb-num,
#fp-page .fp-hb-tel .fp-hb-time {
  color: #fff;
}

/* ============================================================
   MV（メインビジュアル・スライダー）
   ============================================================ */
.fp-mv {
  position: relative;
}

.fp-mv-slider {
  width: 100%;
  margin: 0;
}

/* 画像は全幅（右端＝ブラウザ右端） */
.fp-mv-slide img {
  display: block;
  width: 100%;
  height: 690px;
  object-fit: cover;
}

/* slick 初期化前のちらつき抑制：1枚目以外を隠す */
.fp-mv-slider:not(.slick-initialized) .fp-mv-slide+.fp-mv-slide {
  display: none;
}

/* スライダーのドット（緑＝現在地／グレー） */
.fp-mv .slick-dots {
  position: absolute;
  top: 700px;
  right: 24px;
  left: auto;
  width: auto;
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 黒い丸（リストマーカー）を消す。四角はbuttonのbackgroundで描画 */
}

.fp-mv .slick-dots li {
  width: 10px;
  height: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fp-mv .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  background: #d9d9d9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* スライド番号テキストや既定の「・」を隠す */
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

.fp-mv .slick-dots li button::before,
.fp-mv .slick-dots li button::after {
  content: none;
  display: none;
}

.fp-mv .slick-dots li.slick-active button {
  background: var(--fp-green);
}

/* キャッチコピーの白カード（画像下部に重なる） */
.fp-mv-copy {
  position: relative;
  z-index: 10;
  width: 948px;
  max-width: 100%;
  margin-top: -152px;
  margin-left: 0;
  /* 画像の左端（サイドバー右隣）に常に揃える */
  padding: 33px 0 36px 55px;
  box-sizing: border-box;
  background: #fff;
}

.fp-mv-heading {
  margin: 0;
  font-weight: normal;
}

.fp-mv-lead {
  display: block;
  margin: 0 0 14px;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  letter-spacing: .05em;
}

.fp-mv-catch {
  display: block;
  margin: 0 0 18px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 34px;
  letter-spacing: .05em;
  line-height: 1.35;
}

.fp-mv-tags {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0 0 14px;
  padding: 0;
}

.fp-mv-tags li {
  border: 1px solid var(--fp-text);
  padding: 3px 16px;
  font-size: 14px;
  line-height: 1.6;
}

.fp-mv-sub {
  margin: 0;
  font-size: 18px;
}

/* ============================================================
   NEWS（新着情報）
   ============================================================ */
.fp-news {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  padding-top: 56px;
  padding-bottom: 56px;
}

.fp-news-left {
  flex: 0 0 200px;
}

.fp-news-left .fp-btn-list {
  margin-top: 38px;
}

.fp-news-right {
  flex: 1 1 auto;
  padding-top: 6px;
}

.fp-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fp-news-list li {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--fp-line);
}

.fp-news-list li:first-child {
  border-top: 1px solid var(--fp-line);
}

.fp-news-date {
  flex: 0 0 auto;
  color: var(--fp-text-weak);
}

.fp-news-title {
  color: var(--fp-text);
  transition: color .2s;
}

a.fp-news-title:hover {
  color: var(--fp-green);
}

/* ============================================================
   TROUBLE（お庭のお悩み）
   ============================================================ */
.fp-trouble {
  padding: 70px 0 84px;
}

.fp-trouble-box {
  background: #f8f8f8;
  padding: 44px var(--fp-gut) 77px;
  box-sizing: border-box;
}

.fp-trouble-box .fp-sec-ttl {
  margin: 0 0 38px;
}

.fp-trouble-cards {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.fp-trouble-cards li {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 368px;
  min-height: 100px;
  padding: 12px 18px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 10px;
}

.fp-trouble-cards img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.fp-trouble-cards p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.fp-trouble-lead {
  position: relative;
  margin: 0;
  padding-top: 60px;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 32px;
  letter-spacing: .05em;
  line-height: 1.5;
}

/* 縦ライン：上端をグレー箱（.fp-trouble-box）内に食い込ませ、下端はリード直前まで（箱下端に半分重なる） */
.fp-trouble-lead::before {
  content: "";
  position: absolute;
  top: -36px;
  left: 50%;
  width: 1px;
  height: 92px;
  background: #353535;
}

/* ============================================================
   ABOUT US（会社紹介）
   ============================================================ */
.fp-about {
  display: flex;
  gap: 31px;
  align-items: flex-start;
  padding: 84px var(--fp-gut);
}

.fp-about-left {
  flex: 0 0 555px;
  width: 555px;
}

.fp-about .fp-sec-ttl {
  margin-bottom: 34px;
}

.fp-about .fp-sec-ttl .ja {
  line-height: 1.45;
}

.fp-about-text p {
  margin: 0 0 1.6em;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fp-text);
}

.fp-about-note {
  margin-top: 10px;
  padding: 32px 48px;
  border: 1px solid var(--fp-green);
}

.fp-about-note p {
  margin: 0;
  color: var(--fp-green);
  font-size: 20px;
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.fp-about-gallery {
  flex: 0 0 570px;
  width: 570px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fp-about-gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.fp-about-gallery .g1 {
  height: 453px;
}

.fp-about-gallery .g-row {
  display: flex;
  gap: 5px;
}

.fp-about-gallery .g-row img {
  width: calc((100% - 5px) / 2);
  height: 212px;
}

.fp-about-gallery .g2 {
  height: 254px;
}

/* ============================================================
   PLAN（外構プラン）
   ============================================================ */
.fp-plan {
  background: #f8f8f8;
  padding: 80px 0 84px;
}

.fp-plan a:hover {
  opacity: .7;
}

.fp-plan-inner {
  padding: 0 var(--fp-gut);
  box-sizing: border-box;
}

.fp-plan .fp-sec-ttl {
  margin-bottom: 42px;
}

.fp-plan-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px 18px;
  margin-bottom: 30px;
  /* 大カードと小カードスライダーの間隔 */
}

.fp-plan-card {
  display: block;
  width: 550px;
  background: #fff;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.fp-plan-card .desc {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .08em;
}

.fp-plan-card .title {
  margin: 0;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .09em;
  line-height: 1.4;
}

/* カードがリンクであることを示す小さなボタン。カード内に収まるサイズ（矢印は外へはみ出さない）。
   カード自体（.fp-plan-card = <a>）にホバーすると緑塗り＋矢印が右へスライドし、クリック可能であることを伝える。 */
.fp-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 9px 20px;
  border: 1px solid var(--fp-green);
  color: var(--fp-green);
  font-size: 14px;
  letter-spacing: .05em;
  background: #fff;
  transition: background .2s, color .2s;
}

.fp-plan-btn .ico {
  width: 14px;
  height: 5px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url("../img/top/arrow-green.svg") center / contain no-repeat;
          mask: url("../img/top/arrow-green.svg") center / contain no-repeat;
  transition: transform .2s;
}

.fp-plan-card:hover .fp-plan-btn {
  background: var(--fp-green);
  color: #fff;
}

.fp-plan-card:hover .fp-plan-btn .ico {
  transform: translateX(4px);
}

/* 小カードは画像高さが基準（SPでは特に低い）でテキスト欄の余白がほぼ無く、
   タイトル横や下に矢印を置くと文字数次第で折返し・重なりが起きカード高さがブレる。
   代わりに画像の右下に、WORKSスライダーと同じ丸矢印バッジを重ねて表示する
   （テキストの行数・カード高さに一切影響しない）。 */
.fp-plan-small .fp-plan-img {
  position: relative;
}

.fp-plan-arrow {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  transition: transform .2s;
}

.fp-plan-arrow img {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}

.fp-plan-card:hover .fp-plan-arrow {
  transform: translateX(4px);
}

/* 大カード（画像上＋本文下） */
.fp-plan-big .fp-plan-img img {
  display: block;
  width: 100%;
  height: 340px;
  object-fit: cover;
}

.fp-plan-big .fp-plan-body {
  padding: 28px 32px 34px;
}

/* 小カード（画像左＋本文右） */
.fp-plan-small {
  display: flex;
  align-items: center;
  min-height: 160px;
}

.fp-plan-small .fp-plan-img {
  flex: 0 0 210px;
}

.fp-plan-small .fp-plan-img img {
  display: block;
  width: 210px;
  height: 160px;
  object-fit: cover;
}

.fp-plan-small .fp-plan-img .fp-plan-arrow img {
  display: block;
  width: 28px;
  height: 28px;
  transform: rotate(180deg);
}

.fp-plan-small .fp-plan-body {
  padding: 0 20px;
}

.fp-plan-small .title {
  font-size: 21px;
}

/* ドット（旧・静的：未使用） */
.fp-plan-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 42px;
}

.fp-plan-dots span {
  width: 18px;
  height: 18px;
  background: #b7b7b7;
  border-radius: 2px;
}

.fp-plan-dots span.on {
  background: var(--fp-green);
}

/* 小カードのスライダー（slick・2枚表示）。
   slickはコンテナ幅を2分割するため、広い画面では小カードが大カード(固定550px)より広がってしまう。
   大カード2枚分の幅(550×2＋gap18＝1118px)に固定＋中央寄せして、大カードと幅・左右端を揃える。 */
.fp-plan-slider {
  max-width: 1118px;
  margin-left: auto;
  margin-right: auto;
}

.fp-plan-slider .fp-plan-card {
  width: auto;
  height: 100%;
}

/* 幅はslickが制御 */
.fp-plan-slider .slick-list {
  margin: 0 -9px;
}

.fp-plan-slider .slick-slide {
  margin: 0 9px;
}

.fp-plan-slider .slick-slide>div {
  height: 100%;
}

/* slick の .slick-slide{display:block} を上書きし、小カードは「画像左＋本文右」の flex を維持（PC/SP共通） */
.fp-plan-slider.slick-initialized .slick-slide.fp-plan-small {
  display: flex;
  align-items: center;
}

/* スライダーのドット（緑＝現在地／グレーの四角） */
.fp-plan .slick-dots {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 42px 0 0;
  padding: 0;
  position: static;
}

.fp-plan .slick-dots li {
  width: 18px;
  height: 18px;
  margin: 0;
}

.fp-plan .slick-dots li button {
  width: 18px;
  height: 18px;
  padding: 0;
  background: #b7b7b7;
  border: 0;
  border-radius: 2px;
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
}

.fp-plan .slick-dots li button::before,
.fp-plan .slick-dots li button::after {
  content: none;
  display: none;
}

.fp-plan .slick-dots li.slick-active button {
  background: var(--fp-green);
}

/* ============================================================
   WORKS（施工事例）
   ============================================================ */
.fp-works {
  padding: 84px var(--fp-gut);
}

.fp-works .fp-sec-ttl {
  margin-bottom: 44px;
}

/* ピックアップ（2×2） */
.fp-works-feat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 38px 18px;
  margin-bottom: 60px;
}

.fp-work-feat {
  position: relative;
  width: 550px;
  height: 396px;
  overflow: hidden;
}

.fp-work-feat .fp-work-img img {
  display: block;
  width: 550px;
  height: 396px;
  object-fit: cover;
}

.fp-work-maker {
  position: absolute;
  top: 0;
  right: 0;
  background: #353535;
  color: #fff;
  font-size: 14px;
  letter-spacing: .05em;
  padding: 3px 18px;
  border-bottom-left-radius: 10px;
}

.fp-work-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  background: rgba(21, 21, 21, .87);
  padding: 13px 28px 16px;
  border-top-right-radius: 10px;
}

.fp-work-cap h3 {
  margin: 0;
  color: #f0c788;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: .05em;
}

.fp-work-cap p {
  margin: 3px 0 0;
  color: #f0c788;
  font-size: 16px;
  letter-spacing: .05em;
}

/* 新着（slickスライダー：PC4枚／SP2枚。矢印は端カードに重なる円形ボタン）。
   slickはコンテナ幅を分割するため、広い画面ではピックアップ事例(固定550px×2＋gap18＝1118px)より
   横に広がってしまう。新着スライダーも max-width:1118px＋中央寄せで揃える（SPはviewport<1118で無影響）。 */
/* 新着カードの中身は<a>で囲みカード全体をリンク化。ブロック整形のみ明示（色はグローバルリセットに準拠） */
.fp-work-new > a {
  display: block;
}

.fp-works-new {
  position: relative;
  max-width: 1118px;
  margin: 0 auto 48px;
}

/* slick初期化前のフォールバック（4列グリッド） */
.fp-works-new-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.fp-works-new-grid.slick-initialized {
  display: block;
}

.fp-works-new-grid .slick-list {
  margin: 0 -6px;
}

.fp-works-new-grid .slick-slide {
  margin: 0 6px;
}

.fp-work-new-img img {
  display: block;
  width: 100%;
  height: 186px;
  object-fit: cover;
}

.fp-work-new .meta {
  margin: 14px 0 7px;
  display: flex;
  gap: 18px;
  color: var(--fp-text-weak);
  font-size: 16px;
}

.fp-work-new h3 {
  margin: 0 0 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .05em;
}

.fp-work-new .ex {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
}

/* 矢印（円形ボタン）：カード画像の縦中央・左右端で端カードに重なる。PC/SP共通サイズ36px */
.fp-works-arrow {
  position: absolute;
  top: 75px;
  /* カード画像h186の縦中央（186/2 - 36/2） */
  width: 36px;
  height: 36px;
  z-index: 5;
  cursor: pointer;
}

.fp-works-arrow.prev {
  left: -18px;
}

.fp-works-arrow.next {
  right: -18px;
}

.fp-works-arrow img {
  width: 36px;
  height: 36px;
  display: block;
}

.fp-works-arrow.next img {
  transform: rotate(180deg);
}

.fp-works-more {
  text-align: center;
  margin: 0;
}

/* ============================================================
   CTA（CONTACT・お問合せ）
   ============================================================ */
.fp-cta {
  margin: 8px 0;
}

.fp-cta-inner {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--fp-gut);
  box-sizing: border-box;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 見出し（CONTACT+bar+ja）とボタン群を下揃えの横並びに。
   align-items:flex-end で ja の下端＝ボタンの下端が揃い、CONTACT+barはjaの上に出る（3つ横並び＋CONTACTは少し上）。
   この行を inner が上下中央に配置するので、CONTACTを含むブロック全体が中央に来る。 */
.fp-cta-content {
  display: flex;
  align-items: flex-end;
  gap: 56px;
}

.fp-cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, .71);
}

.fp-cta-inner>* {
  position: relative;
  z-index: 1;
}

/* 白抜き見出し */
.fp-sec-ttl--white .en {
  color: #fff;
}

.fp-sec-ttl--white .bar {
  background: #fff;
}

.fp-sec-ttl--white .ja {
  color: #fff;
  line-height: 1.35;
}

.fp-cta-btns {
  display: flex;
  gap: 14px;
}

.fp-cta-tel,
.fp-cta-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 360px;
  height: 97px;
  border: 1px solid #fff;
  border-radius: 10px;
  box-sizing: border-box;
}

.fp-cta-tel {
  background: rgba(9, 147, 57, .8);
  color: #fff;
}

.fp-cta-tel .ico img {
  width: auto;
  height: 42px;
  margin-left: 4px;
}

.fp-cta-tel .txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.fp-cta-tel .num {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: .03em;
}

.fp-cta-tel .time {
  font-size: 16px;
}

.fp-cta-mail {
  background: rgba(255, 255, 255, .8);
  color: #353535;
}

.fp-cta-mail .ico {
  width: auto;
  height: 25px;
}

.fp-cta-mail span {
  font-size: 24px;
}

/* ホバー（＝パーツ集の「ホバー（不透明度100%）」）：背景を100%に */
.fp-cta-tel:hover,
.fp-cta-tel.is-hover {
  color: #fff;
  background: rgba(9, 147, 57, 1);
}

.fp-cta-mail:hover,
.fp-cta-mail.is-hover {
  color: #353535;
  background: rgba(255, 255, 255, 1);
}

/* ============================================================
   REASON（選ばれる3つの理由＋比較表）
   ============================================================ */
.fp-reason {
  padding: 84px 0;
}

.fp-reason>.fp-sec-ttl {
  margin: 0 var(--fp-gut) 46px;
}

/* 3つの理由（写真＋白カードが交互に重なる） */
.fp-reason-row {
  position: relative;
  height: 446px;
  max-width: var(--fp-content-w);
  margin-left: auto;
  margin-right: auto;
}

.fp-reason-row+.fp-reason-row {
  margin-top: 4px;
}

.fp-reason-photo {
  position: absolute;
  top: 0;
  width: 993px;
  height: 351px;
  overflow: hidden;
}

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

.fp-reason-card {
  position: absolute;
  top: 174px;
  width: 570px;
  height: 272px;
  background: #fff;
  box-sizing: border-box;
  padding: 32px 40px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .07);
}

.r-left .fp-reason-photo {
  right: 0;
}

.r-left .fp-reason-card {
  left: 0;
}

.r-right .fp-reason-photo {
  left: 0;
}

.r-right .fp-reason-card {
  right: 0;
}

.fp-reason-card .no {
  display: block;
  color: #f0c788;
  font-size: 16px;
  letter-spacing: .1em;
  margin-bottom: 20px;
}

.fp-reason-card h3 {
  margin: 0 0 16px;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: .08em;
}

.fp-reason-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .08em;
}

/* 結論文 */
.fp-reason-concl {
  max-width: var(--fp-content-w);
  margin: 66px auto 0;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.55;
  letter-spacing: .08em;
}

.fp-reason-concl .hl {
  color: var(--fp-green);
}

.fp-reason-concl::after {
  content: "";
  display: block;
  width: 439px;
  height: 2px;
  background: var(--fp-green);
  margin: 24px auto 0;
}

/* 比較表 */
.fp-reason-table-wrap {
  padding: 44px var(--fp-gut) 0;
}

.fp-reason-table {
  border-collapse: collapse;
  width: 992px;
  margin: 0 auto;
  table-layout: fixed;
}

.fp-reason-table col.c-crit {
  width: 180px;
}

.fp-reason-table col.c-sun {
  width: 422px;
}

.fp-reason-table col.c-oth {
  width: 130px;
}

.fp-reason-table th,
.fp-reason-table td {
  border: 1px solid #d8d8d8;
  height: 75px;
  text-align: center;
  vertical-align: middle;
}

.fp-reason-table thead th {
  font-size: 18px;
  line-height: 1.3;
  color: #4d4d4d;
  font-weight: 500;
}

.fp-reason-table thead .col-sun {
  color: var(--fp-green);
  font-size: 20px;
  background: #f8f8f8;
}

.fp-reason-table thead th:nth-child(n+3) {
  background: #f3f3f3;
}

.fp-reason-table tbody th {
  padding-inline: 10px;
  font-size: 20px;
  color: #000;
  font-weight: 500;
  letter-spacing: .06em;
}

.fp-reason-table td.sun {
  background: #f8f8f8;
  text-align: left;
  padding-left: 22px;
  font-size: 16px;
  letter-spacing: .04em;
}

.fp-reason-table td.sun span {
  vertical-align: middle;
}

.fp-reason-table td img {
  width: 34px;
  height: 34px;
  vertical-align: middle;
}

.fp-reason-table td.sun img {
  margin-right: 14px;
}

.fp-reason-table td img.is-x {
  transform: rotate(45deg);
}

.fp-reason-more {
  text-align: center;
  margin: 42px 0 0;
}

/* ============================================================
   ACCESS（アクセス）
   ============================================================ */
.fp-access {
  background: #f8f8f8;
  padding: 80px 0;
}

.fp-access-inner {
  padding: 0 var(--fp-gut);
  box-sizing: border-box;
}

.fp-access-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  margin-bottom: 52px;
}

.fp-access-banner {
  width: 704px;
  height: 170px;
  object-fit: cover;
  flex: 0 0 auto;
}

.fp-access-stores {
  display: flex;
  border-bottom: 1px solid #cfcfcf;
  padding-bottom: 30px;
}

/* 店舗：テキスト（店名＋住所）左、地図右。地図上端は店名と揃える（align-items:flex-start）。
   横paddingとgapは住所が4行に収まる幅を確保（いわき住所が折り返さないように） */
.fp-access-store {
  flex: 1;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.fp-access-store:first-child {
  border-right: 1px solid #cfcfcf;
  padding-left: 8px;
}

.fp-access-store-text {
  flex: 1 1 auto;
  min-width: 0;
}

.fp-access-store h3 {
  margin: 0 0 18px;
  color: var(--fp-green);
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .05em;
}

.fp-access-store .addr {
  margin: 0;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
}

.fp-access-store .map {
  flex: 0 0 180px;
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 0; /* Googleマップiframe用（imgには無害） */
}

/* PC: 地図(iframe)を表示、ボタンは非表示 */
.fp-access-map-btn {
  display: none;
}

.fp-access-info {
  position: relative;
  padding-top: 39px;
}

.fp-access-info dl {
  margin: 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px 30px;
  /* 右下の絶対配置ボタン（約225px＋矢印）と重ならないよう右側を確保 */
  max-width: calc(100% - 290px);
}

.fp-access-info dt {
  font-size: 16px;
  letter-spacing: .06em;
}

.fp-access-info dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: .04em;
}

.fp-access-info .fp-btn-list--wide {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 225px;
}

/* ============================================================
   FAQ（よくある質問）
   ============================================================ */
.fp-faq {
  padding: 80px 0 84px;
}

.fp-faq-inner {
  padding: 0 var(--fp-gut);
  box-sizing: border-box;
}

.fp-faq .fp-sec-ttl {
  margin-bottom: 46px;
}

.fp-faq-list {
  margin: 0;
}

.fp-faq-item {
  margin-bottom: 30px;
}

.fp-faq-item dt {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 62px;
  padding: 9px 30px;
  box-sizing: border-box;
  background: #f8f8f8;
  font-size: 19px;
  letter-spacing: .06em;
  color: #353535;
}

.fp-faq-item dt .q {
  flex: 0 0 auto;
  color: var(--fp-green);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}

.fp-faq-item dd {
  margin: 18px 30px 0 74px;
  font-size: 16px;
  line-height: 2;
  letter-spacing: .06em;
}

.fp-faq-more {
  text-align: center;
  margin: 42px 0 0;
}

/* ============================================================
   BLOG（スタッフブログ）
   ============================================================ */
.fp-blog {
  background: #f8f8f8;
  padding: 80px 0 84px;
}

.fp-blog-inner {
  padding: 0 var(--fp-gut);
  box-sizing: border-box;
}

.fp-blog .fp-sec-ttl {
  margin-bottom: 44px;
}

.fp-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fp-blog-card {
  display: block;
  color: inherit;
}

.fp-blog-img img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.fp-blog-date {
  display: block;
  margin: 16px 0 8px;
  color: var(--fp-text-weak);
  font-size: 16px;
  letter-spacing: .05em;
}

.fp-blog-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .05em;
  color: var(--fp-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fp-blog-card:hover .fp-blog-title {
  color: var(--fp-green);
}

.fp-blog-more {
  text-align: center;
  margin: 42px 0 0;
}


/* ============================================================
   SCROLLUP-BUTTON（ページトップへ戻るボタン）
   ============================================================ */
.scrollup-button img {
  vertical-align: baseline;
}

/* ============================================================
   FOOTER（フッター）
   ============================================================ */
.fp-footer {
  margin-top: 8px;
}

.fp-footer-body {
  position: relative;
  padding: 44px var(--fp-gut) 42px;
  box-sizing: border-box;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: #fff;
}

.fp-footer-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, .71);
}

.fp-footer-body>* {
  position: relative;
  z-index: 1;
}

.fp-footer-nav {
  text-align: center;
  font-size: 16px;
  letter-spacing: .05em;
  margin-bottom: 34px;
}

.fp-footer-nav a {
  color: #fff;
}

.fp-footer-nav a:hover {
  text-decoration: underline;
}

.fp-footer-nav span {
  margin: 0 14px;
}

.fp-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
}

.fp-footer-logo img {
  display: block;
  width: 370px;
  height: auto;
}

.fp-footer-btns {
  display: flex;
  gap: 14px;
}

.fp-footer-main {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}

.fp-footer-stores .store {
  margin-bottom: 22px;
}

.fp-footer-stores .store:last-child {
  margin-bottom: 0;
}

.fp-footer-stores .name {
  margin: 0 0 8px;
  font-size: 24px;
  letter-spacing: .05em;
}

.fp-footer-stores .addr {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .04em;
}

.fp-footer-bnr-box {
  flex: 0 0 663px;
  width: 663px;
  border: 1px solid #fff;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  align-self: flex-start;
}

.fp-footer-bnr-box .ttl {
  margin: 0 0 12px;
  font-family: "Noto Serif JP", serif;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: .05em;
}

.fp-footer-bnr-box .txt {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: .03em;
}

.fp-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fp-footer-banners {
  display: flex;
  gap: 22px;
}

.fp-footer-banners img {
  display: block;
  width: 260px;
  height: 54px;
  object-fit: contain;
}

.fp-footer-insta img {
  display: block;
  width: 33px;
  height: 33px;
}

.fp-footer-copy {
  background: #151515;
  text-align: center;
  padding: 11px 0;
}

.fp-footer-copy small {
  color: #fff;
  font-size: 12px;
  letter-spacing: .05em;
}

/* ============================================================
   SP用チェンジ要素（PCでは非表示）
   ============================================================ */
.fp-sp-header,
.fp-sp-menu,
.fp-sp-bottombar {
  display: none;
}

/* ============================================================
   画面高さ対応：フレックスレイアウト + clamp() でスムーズな縮小
   ・#fp-sidebar をフレックスカラムに変換
   ・ロゴと Follow Me エリアは flex-shrink:0 で常に表示を保証
   ・ナビが残り高さを埋め、justify-content:space-around で均等分配
   ★ 削除すれば元に戻ります（このコメントから「FP-HEIGHT-END」まで）
   ============================================================ */
@media (min-width: 769px) {

  /* PLAN小カード：PCはslidesToShow2枚=総スライド数2枚のため実質ページ送りが無く、
     ドットが1個だけ浮いて見えるだけで意味を成さない。PCのみドットを非表示にする
     （SPはcenterMode1枚送りで2ドットとも有効に機能するため据え置き）。 */
  .fp-plan-slider > .slick-dots {
    display: none;
  }

  /* サイドバー幅を viewport 高さに連動して縮小（ロゴ・余白・メインカラムも自動追従）
     vh は Safari/WebKit系（iOS版Chromeも含む）でアドレスバー表示時に実際に
     見えている高さより大きい仮想ビューポート基準で計算されることがあり、
     サイドバーの実高さ（height:100%）とズレて要素が重なる原因になる。
     dvh（実際に見えている高さに追従）を後から重ねて上書きし、
     dvh未対応ブラウザでは vh のままフォールバックする。 */
  :root {
    --fp-sidebar-w: clamp(210px, 34.15vh, 280px);
    --fp-sidebar-w: clamp(210px, 34.15dvh, 280px);
  }

  /* サイドバーをフレックスカラム化。はみ出しは隠す */
  #fp-sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ロゴ：縮まない。上パディングだけ clamp で縮小 */
  .fp-logo {
    flex: 0 0 auto;
    padding: clamp(4px, 0.98vh, 8px) 24px 0;
    padding: clamp(4px, 0.98dvh, 8px) 24px 0;
  }

  /* ナビ：内容サイズ（自然な高さ）のまま。flex-grow:0 で残り高さを占有しない。
     画面が縦に余ってもナビ自体は伸びず、ロゴ直下に詰まった状態を保つ。
     flex-shrink:1 + min-height:0 でナビの箱自体は縮小を許可しつつ、
     overflow-y:auto で「箱に収まらない分」はナビ内部だけでスクロール吸収する。
     実機のフォント描画は検証環境の計算値と完全には一致しないため、
     万一9項目が収まりきらない極端に低い画面でも、はみ出しは必ずナビの
     内部スクロールに閉じ込め、Follow Me / Instagramボタン側（縮小しない）
     が下端で切れることは絶対に起きないようにするための保険。 */
  .fp-nav {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-top: clamp(4px, 0.98vh, 8px);
    margin-top: clamp(4px, 0.98dvh, 8px);
    padding: clamp(10px, 2.2vh, 24px) 0;
    padding: clamp(10px, 2.2dvh, 24px) 0;
  }

  /* ul は中身の自然な高さのまま上詰め。以前の space-around / center は
     ナビが残り高さいっぱいに伸びていた前提の書き方で、縦に余裕がある画面
     （27型等の大型ディスプレイ、769〜1479px帯のzoom縮小時など）で上下に
     大きな余白ができてしまっていた。ナビが自然な高さになった今は
     flex-start で単純に上から詰めるだけでよい。gap の上限は残し、
     万一余白ができても項目間が際限なく広がらないようにする。 */
  .fp-nav ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(6px, 2vh, 32px);
    gap: clamp(6px, 2dvh, 32px);
  }

  .fp-nav li {
    display: flex;
  }

  /* 縦パディングを除去（flex の均等分配で代替）。フォント・アイコン間隔を縮小 */
  .fp-nav a {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    gap: clamp(8px, 1.71vh, 14px);
    gap: clamp(8px, 1.71dvh, 14px);
    font-size: clamp(11px, 1.79vh, 16px);
    font-size: clamp(11px, 1.79dvh, 16px);
    line-height: 1.4;
  }

  .fp-nav a .fp-nav-ico {
    width:  clamp(14px, 2.44vh, 20px);
    width:  clamp(14px, 2.44dvh, 20px);
    height: clamp(14px, 2.44vh, 20px);
    height: clamp(14px, 2.44dvh, 20px);
    flex: 0 0 clamp(14px, 2.44vh, 20px);
    flex: 0 0 clamp(14px, 2.44dvh, 20px);
  }

  /* Follow Me エリア：縮まない。内部要素を clamp で縮小 */
  .fp-follow {
    flex: 0 0 auto;
    padding: clamp(6px, 1.95vh, 16px) 0 16px;
    padding: clamp(6px, 1.95dvh, 16px) 0 16px;
  }

  .fp-follow-ttl {
    font-size: clamp(12px, 1.95vh, 16px);
    font-size: clamp(12px, 1.95dvh, 16px);
  }

  /* QR：縦横比維持（166:191 ＝ 20.24:23.29 vh） */
  .fp-qr {
    width:  clamp(80px, 20.24vh, 166px);
    width:  clamp(80px, 20.24dvh, 166px);
    height: clamp(92px, 23.29vh, 191px);
    height: clamp(92px, 23.29dvh, 191px);
  }

  .fp-insta-btn {
    width:      clamp(140px, 24.39vh, 200px);
    width:      clamp(140px, 24.39dvh, 200px);
    height:     clamp(26px,  4.88vh,  40px);
    height:     clamp(26px,  4.88dvh,  40px);
    margin-top: clamp(4px,   1.46vh,  12px);
    margin-top: clamp(4px,   1.46dvh,  12px);
    font-size:  clamp(11px,  1.95vh,  16px);
    font-size:  clamp(11px,  1.95dvh,  16px);
  }

  .fp-insta-btn img {
    width: clamp(12px, 2.2vh, 18px);
    width: clamp(12px, 2.2dvh, 18px);
  }
}
/* ============================================================
   ↑ FP-HEIGHT-END（ここまでが高さ対応ブロック）
   ============================================================ */

/* ============================================================
   低い高さ専用の追加縮小（iPad横向きなど height ≲ 820px）
   iPad横向きの実表示高さは、ブラウザUI（タブ＋アドレスバー）を除くと
   実測で 600px 前後になる。この高さで通常係数のままだと最大のコストは
   ナビの項目間隔（3dvh × 8箇所 = 144px）で、ここが原因で収まらず
   ナビが内部スクロールになっていた。
   一方 QR コードはスマホで読み取る用途があるため縮めすぎ厳禁
   （下限 120px を保証。それ以下だと実機で読み取れなくなる）。
   → 削るのはナビの間隔・余白側、QR/Instagramボタンはほぼ通常サイズ維持。
   ============================================================ */
@media (min-width: 769px) and (max-height: 820px) {
  .fp-nav {
    padding: clamp(8px, 1.5dvh, 14px) 0;
  }

  /* 通常の 3dvh → 2dvh。600px時 18px→12px、8箇所で約50px の節約 */
  .fp-nav ul {
    gap: clamp(6px, 2dvh, 18px);
  }

  /* テキストも可読性優先：zoom（1133px幅で×0.77）で実描画がさらに縮む分、
     フォントの下限は通常帯より高く保つ（削るのはあくまで間隔・余白側）。 */
  .fp-nav a {
    gap: clamp(8px, 1.71dvh, 14px);
    font-size: clamp(14px, 1.79dvh, 16px);
  }

  .fp-nav a .fp-nav-ico {
    width:  clamp(16px, 2.44dvh, 20px);
    height: clamp(16px, 2.44dvh, 20px);
    flex: 0 0 clamp(16px, 2.44dvh, 20px);
  }

  .fp-follow {
    padding: clamp(6px, 1.4dvh, 12px) 0 12px;
  }

  .fp-follow-ttl {
    font-size: clamp(13px, 1.95dvh, 16px);
  }

  /* QR：スマホで読み取る用途のため、この帯では縮小せずデザイン原寸で固定。
     769〜1479px幅では zoom によるページ全体縮小（例：1133px幅で×0.77）も
     重なるため、CSS上で縮めるとダブルで小さくなり実機で読み取れなくなる。
     ナビの間隔側で確保した余白が原寸維持のコストを十分吸収できる。 */
  .fp-qr {
    width:  166px;
    height: 191px;
  }

  .fp-insta-btn {
    width:      clamp(170px, 24.39dvh, 200px);
    height:     clamp(30px,  4.5dvh,  36px);
    margin-top: clamp(4px,   1dvh,   10px);
    font-size:  clamp(13px,  1.95dvh, 16px);
  }

  .fp-insta-btn img {
    width: clamp(13px, 2.2dvh, 18px);
  }
}

/* ============================================================
   【実験】769〜1479px：デザイン（1480px幅）はそのまま、ページ全体を
   zoomで縮小して画面内に収める。コンポーネント側のCSSは一切変更しない。
   768px以下は既存のSPデザイン（vwベース）が別途担当するため対象外。
   ============================================================ */
@media (min-width: 769px) and (max-width: 1479px) {
  body.fp-body {
    zoom: calc(100vw / 1480px);
  }
}

/* ============================================================
   レスポンシブ（スマートフォン）: 768px以下
   ============================================================ */
@media (max-width: 768px) {

  /* 768px デザイン基準の可変単位。--u = デザイン上の1px（= 100vw/768）。
	   SPレイアウトは comp 座標 × var(--u) でvw換算出力し、768px幅で1:1に一致させる。 */
  .fp-body {
    --u: calc(100vw / 768);
  }

  /* ---- 共通枠の切替 ---- */
  #fp-page {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #fp-sidebar,
  .fp-headbar {
    display: none;
  }

  #fp-main {
    margin-left: 0;
    width: 100%;
    padding-top: calc(72 * var(--u));
    padding-bottom: calc(83 * var(--u));
  }

  .fp-pc {
    display: none;
  }
  .fp-sp {
    display: block;
  }

  /* SP 上部ヘッダー（ロゴ＋ハンバーガー）: comp h72 */
  .fp-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: max(35px, calc(75 * var(--u)));
    height: 75px;
    z-index: 320;
    background: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .12);
    padding: 0 !important;
  }

  .fp-sp-logo img {
    display: block;
    height: calc(67 * var(--u));
    height: max(40px, calc(67px * var(--u))) ;
    width: auto;
  }

  .fp-sp-burger {
    width: calc(72 * var(--u));
    width: 72px;
    height: calc(72 * var(--u));
    height: 72px;
    flex: 0 0 calc(72 * var(--u));
    flex: 0 0 72px;
    background: var(--fp-green);
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(6 * var(--u));
    gap: 6px;
    cursor: pointer;
    /* <button>要素はタップ時にブラウザ標準のハイライト（半透明グレー等）を重ねるため、
       開閉時にボタンの色が変わって見える。タップハイライトとフォーカス時の枠線を消し、
       常に背景色（緑）のまま保つ。キーボード操作時のフォーカスリングだけは残す。 */
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  .fp-sp-burger:focus:not(:focus-visible) {
    outline: none;
  }

  /* 本当の原因: style.css（旧テーマ）に button:focus / button:active で
     background を薄い水色(#a3e3e7)に変える汎用ルールがあり、それが
     .fp-sp-burger（クラス1つ）より詳細度が高いため（button:focus = 要素+疑似クラス）
     タップ（:active）や開いた後のフォーカス（:focus）で色が上書きされていた。
     .fp-sp-burger:hover/:focus/:active（クラス+疑似クラス）で確実に勝たせ、常に緑を維持する。 */
  .fp-sp-burger:hover,
  .fp-sp-burger:focus,
  .fp-sp-burger:active {
    background: var(--fp-green);
    border: 0;
    padding: 0;
  }

  .fp-sp-burger span {
    display: block;
    width: calc(30 * var(--u));
    width: 30px;
    height: 2px;
    background: #fff;
    transition: transform .3s, opacity .3s;
  }

  body.fp-sp-menu-open .fp-sp-burger span:nth-child(1) {
    transform: translateY(calc(8 * var(--u))) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
  }

  body.fp-sp-menu-open .fp-sp-burger span:nth-child(2) {
    /* opacity:0 だけだと実機（iOS Safari）で、他の2本が同時に回転して重なる際の
       コンポジット処理により中央にうっすら点状の残像が残ることがある。
       transform:scaleX(0) も併用し、幅そのものをゼロにして確実に消す。 */
    opacity: 0;
    transform: scaleX(0);
  }

  body.fp-sp-menu-open .fp-sp-burger span:nth-child(3) {
    transform: translateY(calc(-8 * var(--u))) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
  }

  /* SP メニュー（ハンバーガーで開く暗いパネル） */
  .fp-sp-menu {
    display: block;
    position: fixed;
    top: calc(72 * var(--u));
    top: 74px;
    left: 0;
    right: 0;
    z-index: 310;
    max-height: calc(100vh - 72 * var(--u));
    overflow-y: auto;
    background: rgba(23, 26, 23, .9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s, transform .3s, visibility .3s;
  }

  body.fp-sp-menu-open .fp-sp-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .fp-sp-menu ul {
    list-style: none;
    margin: 0;
    padding: calc(4 * var(--u)) 0;
  }

  .fp-sp-menu li+li {
    border-top: 1px solid rgba(255, 255, 255, .12);
  }

  .fp-sp-menu li+li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .fp-sp-menu .fp-sp-menu-links li+li {
    border: none;
  }

  .fp-sp-menu a {
    display: flex;
    align-items: center;
    gap: calc(18 * var(--u));
    padding: calc(15 * var(--u)) calc(26 * var(--u));
    color: #fff;
    font-size: max(14px, calc(18 * var(--u)));
  }

  .fp-sp-menu .fp-nav-ico {
    flex: 0 0 calc(36 * var(--u));
    width: max(20px, calc(26 * var(--u)));
    height: max(18px, calc(26 * var(--u)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fp-sp-menu .fp-nav-ico img {
    width: 100%;
    height: 100%;
    filter: brightness(0) invert(1);
  }

  /* アイコンを白く */

  /* フッターリンク（採用情報・サイトマップ等）：アイコン無し・ボーダー無しの2列グリッド */
  .fp-sp-menu-links {
    list-style: none;
    margin: 0;
    padding: calc(20 * var(--u)) calc(26 * var(--u)) calc(32 * var(--u));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(16 * var(--u)) calc(20 * var(--u));
  }

  .fp-sp-menu-links a {
    display: block;
    color: rgba(255, 255, 255, .8);
    font-size: max(13px, calc(15 * var(--u)));
    line-height: 1.4;
  }

  /* SP 下部固定CTAバー（電話＋無料相談）: comp h83 */
  .fp-sp-bottombar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(83 * var(--u));
    z-index: 300;
  }

  .fp-sp-bb {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    color: #fff;
    text-align: center;
  }

  .fp-sp-bb img {
    height: calc(42 * var(--u));
    width: auto;
  }

  .fp-sp-bb-tel {
    background: var(--fp-green);
  }

  .fp-sp-bb-tel:hover,
  .fp-sp-bb-tel:active,
  .fp-sp-bb-tel:visited {
    color: var(--fp-bg);
  }

  .fp-sp-bb-tel .t {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
  }

  .fp-sp-bb-tel .t b {
    font-family: "Noto Serif JP", serif;
    font-size: max(20px, calc(28 * var(--u)));
    letter-spacing: .02em;
  }

  .fp-sp-bb-tel .t small {
    font-size: max(12px, calc(13 * var(--u)));
  }

  .fp-sp-bb-reserve {
    background: #353535;
    color: #f0c788;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: max(14px, calc(22 * var(--u)));
    gap: calc(10 * var(--u));
  }

  .fp-sp-bb-reserve:hover,
  .fp-sp-bb-reserve:active,
  .fp-sp-bb-reserve:visited {
    color: #f0c788;
  }

  .fp-sp-bb-reserve img {
    height: calc(36 * var(--u));
  }

  /* ---- 共通：見出し（SPデザイン値：en16/ja38、間隔 en→bar18・bar→ja46） ---- */
  .fp-sec-ttl .en {
    font-size: max(14px, calc(16 * var(--u)));
    letter-spacing: .15em;
  }

  .fp-sec-ttl .bar {
    width: calc(200 * var(--u));
    margin-top: calc(18 * var(--u));
    background: linear-gradient(to right, var(--fp-green) 0 calc(32 * var(--u)), var(--fp-text-weak) calc(32 * var(--u)) calc(147 * var(--u)));
  }

  .fp-sec-ttl .ja {
    font-size: max(14px, calc(38 * var(--u)));
    margin-top: calc(20 * var(--u));
  }

  .fp-sec-txt {
    margin-top: 24px;
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
  }

  .fp-section {
    padding: calc(73 * var(--u)) calc(20 * var(--u));
  }

  /* 大きい「一覧を見る」ボタン: comp 400x80・矢印は右へ約21pxはみ出し */
  .fp-btn-list {
    width: calc(400 * var(--u));
    height: calc(80 * var(--u));
    font-size: max(14px, calc(24 * var(--u)));
  }

  .fp-btn-list::after {
    width: calc(49 * var(--u));
    height: calc(8 * var(--u));
    right: calc(-21 * var(--u));
  }

  /* ---- MV: comp 画像h690 / 白box w647（左寄せ・画像下に152重なり） ---- */
  .fp-mv-slider,
  .fp-mv-slide img {
    width: 100%;
  }

  .fp-mv-slide img {
    height: calc(690 * var(--u));
    max-height: none;
  }

  .fp-mv-copy {
    width: calc(647 * var(--u));
    margin: calc(-152 * var(--u)) 0 0;
    padding: calc(33 * var(--u)) calc(20 * var(--u)) calc(36 * var(--u)) calc(31 * var(--u));
  }

  .fp-mv-lead {
    font-size: max(13.5px, calc(26 * var(--u)));
    margin-bottom: calc(20 * var(--u));
    letter-spacing: 0.001em;
  }

  .fp-mv-catch {
    font-size: max(14px, calc(43 * var(--u)));
    line-height: 1.4;
    margin-bottom: calc(16 * var(--u));
  }

  .fp-mv-tags {
    flex-wrap: wrap;
    gap: calc(16 * var(--u));
    margin-bottom: calc(16 * var(--u));
  }

  .fp-mv-tags li {
    font-size: max(12px, calc(21 * var(--u)));
    padding: calc(4 * var(--u)) calc(14 * var(--u));
  }

  .fp-mv-sub {
    font-size: max(14px, calc(21 * var(--u)));
  }

  /* MVドット: comp 画像下端付近・右寄せ */
  .fp-mv .slick-dots {
    top: calc(700 * var(--u));
    right: calc(20 * var(--u));
    gap: calc(9 * var(--u));
  }

  .fp-mv .slick-dots li,
  .fp-mv .slick-dots li button {
    width: calc(10 * var(--u));
    height: calc(10 * var(--u));
  }

  /* ---- NEWS: comp ttl＋ボタンを上段、リスト下段 ---- */
  .fp-news {
    flex-direction: column;
    gap: calc(40 * var(--u));
    padding: calc(73 * var(--u)) calc(20 * var(--u));
  }

  .fp-news-left {
    flex: none;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: calc(16 * var(--u));
  }

  .fp-news-left .fp-btn-list {
    right: 10px;
    margin-top: 0;
    width: calc(240 * var(--u));
    height: calc(50 * var(--u));
  }

  .fp-news-right {
    padding-top: 0;
    width: 100%; /* 罫線（li下線）をコンテンツ幅いっぱいに伸ばす */
  }

  /* 日付（上）＋タイトル（下）の2行縦積み */
  .fp-news-list li {
    display: block;
    padding: calc(16 * var(--u)) 0;
  }

  .fp-news-date,
  .fp-news-title {
    display: block;
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
  }

  /* ---- TROUBLE: comp グレー全幅 / カード99高・アイコン72 ---- */
  .fp-trouble {
    padding: 0;
  }

  .fp-trouble-box {
    padding: calc(59 * var(--u)) calc(36 * var(--u)) calc(84 * var(--u));
  }

  .fp-trouble-box .fp-sec-ttl {
    margin-bottom: calc(36 * var(--u));
  }

  .fp-trouble-cards {
    flex-direction: column;
    align-items: stretch;
    gap: calc(33 * var(--u));
  }

  .fp-trouble-cards li {
    width: 100%;
    min-height: calc(99 * var(--u));
    gap: calc(15 * var(--u));
    padding: calc(13 * var(--u)) calc(24 * var(--u));
    border-radius: calc(10 * var(--u));
  }

  .fp-trouble-cards img {
    flex: 0 0 calc(72 * var(--u));
    width: calc(72 * var(--u));
    height: calc(72 * var(--u));
  }

  .fp-trouble-cards p {
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.48;
  }

  .fp-trouble-lead {
    font-size: max(14px, calc(36 * var(--u)));
    padding-top: calc(64 * var(--u));
    padding-bottom: calc(64 * var(--u));
  }

  /* 縦ラインはグレー箱下端に半分重ねる（上端を箱内へ） */
  .fp-trouble-lead::before {
    top: calc(-46 * var(--u));
    height: calc(92 * var(--u));
  }

  /* ---- ABOUT ---- */
  .fp-about {
    flex-direction: column;
    gap: calc(40 * var(--u));
    padding: calc(80 * var(--u)) calc(24 * var(--u));
  }

  .fp-about-left,
  .fp-about-gallery {
    flex: none;
    width: 100%;
  }

  .fp-about .fp-sec-ttl {
    margin-bottom: calc(55 * var(--u));
  }

  .fp-about-text p {
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
  }

  .fp-about-note {
    margin: calc(20 * var(--u)) calc(17 * var(--u)) 0;
    padding: calc(41 * var(--u)) calc(22 * var(--u));
  }

  .fp-about-note p {
    font-size: max(14px, calc(24 * var(--u)));
    line-height: 1.75;
    text-align: center;
  }

  /* ギャラリー: 左に大(369x293)、右に小2枚(133)＋横長(160) */
  .fp-about-gallery {
    display: grid;
    grid-template-columns: calc(369 * var(--u)) 1fr;
    grid-template-rows: auto auto;
    gap: calc(5 * var(--u));
  }

  .fp-about-gallery .g1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    height: calc(293 * var(--u));
  }

  .fp-about-gallery .g-row {
    grid-column: 2;
    grid-row: 1;
    gap: calc(5 * var(--u));
  }

  .fp-about-gallery .g-row img {
    height: calc(133 * var(--u));
  }

  .fp-about-gallery .g2 {
    grid-column: 2;
    grid-row: 2;
    height: calc(160 * var(--u));
  }

  /* ---- PLAN（SP）: 大カード・小カードとも centerMode カルーセル（中央1枚＋両脇peek） ---- */
  .fp-plan {
    padding: calc(73 * var(--u)) 0 calc(84 * var(--u));
  }

  .fp-plan-inner {
    padding: 0 calc(20 * var(--u));
  }

  .fp-plan .fp-sec-ttl {
    margin-bottom: calc(36 * var(--u));
  }

  /* カルーセルは画面端まで使う（inner の左右20u paddingを相殺）→ 両脇のpeekが画面端まで見える */
  .fp-plan-grid,
  .fp-plan-slider {
    margin-left: calc(-20 * var(--u));
    margin-right: calc(-20 * var(--u));
  }

  /* 大カード（縦：画像上＋本文下） */
  .fp-plan-grid {
    flex-direction: column;
    gap: calc(16 * var(--u));
    margin-bottom: calc(100 * var(--u));
  }

  .fp-plan-grid.slick-initialized {
    display: block;
  }

  .fp-plan-card {
    width: 100%;
  }

  .fp-plan-big .fp-plan-img img {
    height: calc(340 * var(--u));
  }

  .fp-plan-big .fp-plan-body {
    padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
  }

  .fp-plan-card .desc {
    font-size: max(14px, calc(16 * var(--u)));
    margin-bottom: calc(10 * var(--u));
  }

  .fp-plan-card .title {
    font-size: max(14px, calc(40 * var(--u)));
  }

  .fp-plan-btn {
    margin-top: calc(16 * var(--u));
    padding: calc(9 * var(--u)) calc(20 * var(--u));
    font-size: max(14px, calc(15 * var(--u)));
  }

  /* SPは画像自体が小さいため、丸矢印バッジも少し小さく調整 */
  .fp-plan-arrow {
    right: 6px;
    bottom: 6px;
    width: 22px;
    height: 22px;
  }

  .fp-plan-small .fp-plan-img .fp-plan-arrow img {
    display: block;
    width: 22px;
    height: 22px;
    transform: rotate(180deg);
  }


  /* 小カード（画像左210＋テキスト右）。slickの display:block を上書きして flex 維持 */
  .fp-plan-slider.slick-initialized .slick-slide.fp-plan-small {
    display: flex;
  }

  .fp-plan-small {
    min-height: calc(160 * var(--u));
  }

  .fp-plan-small .fp-plan-img {
    flex: 0 0 calc(200 * var(--u));
  }

  .fp-plan-small .fp-plan-img img {
    width: calc(200 * var(--u));
    height: calc(160 * var(--u));
  }

  .fp-plan-small .fp-plan-body {
    padding: 0 calc(22 * var(--u));
  }

  .fp-plan-small .desc {
    font-size: max(14px, calc(16 * var(--u)));
    line-height: 1.29;
    margin-bottom: calc(8 * var(--u));
    font-feature-settings: "palt";
  }

  .fp-plan-small .title {
    font-size: max(14px, calc(32 * var(--u)));
    line-height: 1.05;
    letter-spacing: .005em;
  }

  /* centerMode のスライド間ギャップ（カード外側の余白） */
  .fp-plan-grid .slick-slide {
    margin: 0 calc(9 * var(--u));
  }

  .fp-plan-slider .slick-slide {
    margin: 0 calc(8 * var(--u));
  }

  /* ドット（緑の四角） */
  .fp-plan .slick-dots {
    gap: calc(16 * var(--u));
    margin-top: calc(28 * var(--u));
  }

  .fp-plan .slick-dots li,
  .fp-plan .slick-dots li button {
    width: calc(18 * var(--u));
    height: calc(18 * var(--u));
  }

  .fp-plan-dots {
    display: none;
  }

  /* ---- WORKS: comp ピックアップは縦積み（画像h396）、新着は2列 ---- */
  .fp-works {
    padding: calc(73 * var(--u)) calc(20 * var(--u));
  }

  .fp-works .fp-sec-ttl {
    margin-bottom: calc(36 * var(--u));
  }

  .fp-works-feat {
    flex-direction: column;
    gap: calc(24 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }

  .fp-work-feat {
    width: 100%;
    height: auto;
  }

  .fp-work-feat .fp-work-img img {
    width: 100%;
    height: calc(396 * var(--u));
  }

  .fp-work-maker {
    font-size: max(14px, calc(16 * var(--u)));
    padding: calc(4 * var(--u)) calc(18 * var(--u));
    border-bottom-left-radius: calc(10 * var(--u));
  }

  .fp-work-cap {
    padding: calc(13 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u));
    border-top-right-radius: calc(10 * var(--u));
  }

  .fp-work-cap h3 {
    font-size: max(14px, calc(36 * var(--u)));
  }

  .fp-work-cap p {
    font-size: max(14px, calc(18 * var(--u)));
  }

  .fp-works-new {
    padding: 0;
    margin-bottom: calc(40 * var(--u));
  }

  .fp-works-new-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(20 * var(--u)) calc(18 * var(--u));
  }

  .fp-work-new-img img {
    height: calc(222 * var(--u));
  }

  .fp-work-new .meta {
    font-size: max(14px, calc(18 * var(--u)));
    margin: calc(14 * var(--u)) 0 calc(8 * var(--u));
    gap: calc(18 * var(--u));
  }

  .fp-work-new h3 {
    font-size: max(14px, calc(34 * var(--u)));
    margin-bottom: calc(16 * var(--u));
  }

  .fp-work-new .ex {
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
  }

  /* WORKS新着：SP（2枚表示・PCと同じ円形矢印ボタンで操作。矢印はSP画像h222の縦中央） */
  .fp-works-arrow {
    display: block;
    top: calc(111 * var(--u) - 18px);
  }

  .fp-works-arrow.prev {
    left: -10px;
  }

  .fp-works-arrow.next {
    right: -10px;
  }

  .fp-works-new-grid .slick-list {
    margin: 0 calc(-10 * var(--u));
  }

  .fp-works-new-grid .slick-slide {
    margin: 0 calc(10 * var(--u));
    height: auto;
  }

  /* ---- CTA: comp ボタン612x145を縦積み ---- */
  .fp-cta {
    margin: calc(8 * var(--u)) 0;
  }

  .fp-cta-inner {
    display: block;
    min-height: 0;
    padding: calc(79 * var(--u)) calc(20 * var(--u));
  }

  .fp-cta-content {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(40 * var(--u));
  }

  .fp-cta-btns {
    flex-direction: column;
    gap: calc(24 * var(--u));
    width: 100%;
    align-items: center;
  }

  .fp-cta-tel,
  .fp-cta-mail {
    width: calc(612 * var(--u));
    max-width: 100%;
    height: calc(145 * var(--u));
    border-radius: calc(10 * var(--u));
    gap: calc(20 * var(--u));
  }

  .fp-cta-tel .ico img {
    height: calc(62 * var(--u));
  }

  .fp-cta-tel .num {
    font-size: max(14px, calc(60 * var(--u)));
  }

  .fp-cta-tel .time {
    font-size: max(14px, calc(16 * var(--u)));
  }

  .fp-cta-mail .ico {
    height: calc(30 * var(--u));
  }

  .fp-cta-mail span {
    font-size: max(14px, calc(36 * var(--u)));
  }

  /* ---- REASON: comp 画像全幅h350 ＋ 白カード634が下に重なる（縦積み） ---- */
  .fp-reason {
    padding: calc(73 * var(--u)) 0;
  }

  .fp-reason>.fp-sec-ttl {
    margin: 0 calc(24 * var(--u)) calc(46 * var(--u));
  }

  .fp-reason-row {
    height: auto;
  }

  .fp-reason-row+.fp-reason-row {
    margin-top: calc(28 * var(--u));
  }

  .fp-reason-photo {
    position: static;
    width: 100%;
    height: calc(350 * var(--u));
  }

  .fp-reason-photo img {
    height: 100%;
  }

  .fp-reason-card {
    position: static;
    isolation: isolate;
    width: calc(634 * var(--u));
    height: auto;
    margin: calc(-120 * var(--u)) auto 0;
    padding: calc(39 * var(--u)) calc(44 * var(--u));
  }

  .r-left .fp-reason-card,
  .r-right .fp-reason-card {
    left: auto;
    right: auto;
  }

  .fp-reason-card .no {
    font-size: max(14px, calc(16 * var(--u)));
    margin-bottom: calc(16 * var(--u));
  }

  .fp-reason-card h3 {
    font-size: max(14px, calc(36 * var(--u)));
    margin-bottom: calc(16 * var(--u));
  }

  .fp-reason-card p {
    font-size: max(14px, calc(21 * var(--u)));
  }

  .fp-reason-concl {
    font-size: max(14px, calc(36 * var(--u)));
    padding: 0 calc(20 * var(--u));
    margin-top: calc(50 * var(--u));
  }

  .fp-reason-concl::after {
    width: calc(499 * var(--u));
    max-width: none;
    margin-top: calc(24 * var(--u));
  }

  .fp-reason-table-wrap {
    padding: calc(44 * var(--u)) calc(20 * var(--u)) 0;
    overflow-x: visible;
  }

  .fp-reason-table {
    width: 100%;
    min-width: 0;
  }

  .fp-reason-table col.c-crit {
    width: calc(136 * var(--u));
  }

  .fp-reason-table col.c-sun {
    width: calc(200 * var(--u));
  }

  .fp-reason-table col.c-oth {
    width: auto;
  }

  .fp-reason-table th,
  .fp-reason-table td {
    height: calc(93 * var(--u));
    font-feature-settings: "palt";
  }

  .fp-reason-table thead th {
    padding-inline: 2px;
    font-size: max(13px, calc(18 * var(--u)));
  }

  .fp-reason-table thead .col-sun {
    font-size: max(14px, calc(21 * var(--u)));
  }

  .fp-reason-table tbody th {
    padding-inline: 2px;
    font-size: max(12.5px, calc(21 * var(--u)));
  }

  .fp-reason-table td.sun {
    font-size: max(14px, calc(21 * var(--u)));
    padding-inline: calc(12 * var(--u));
    line-height: 1.25;
  }

  .fp-reason-table td.sun img {
    display: block;
    margin: 8px auto;
  }
  .fp-reason-table td img {
    width: calc(34 * var(--u));
    height: calc(34 * var(--u));
  }

  .fp-reason-more {
    margin-top: calc(40 * var(--u));
  }

  /* ---- ACCESS: comp グレー全幅 / 店舗は住所左＋地図180右 ---- */
  .fp-access {
    padding: calc(73 * var(--u)) 0;
  }

  .fp-access-inner {
    padding: 0 calc(40 * var(--u));
  }

  /* デザイン準拠: 見出しの右隣にバナー画像（471×113）。 */
  .fp-access-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: calc(20 * var(--u));
    margin-bottom: calc(40 * var(--u));
  }

  .fp-access-head .fp-sec-ttl {
    flex: 0 0 auto;
  }

  .fp-access-banner {
    flex: 0 1 calc(471 * var(--u));
    width: calc(471 * var(--u));
    height: calc(113 * var(--u));
  }

  /* 店舗は縦積み。各店舗は「テキスト左｜地図右（上揃え）」。余白はデザイン準拠(banner→88/店舗間67/最後→46) */
  .fp-access-stores {
    flex-direction: column;
    padding-top: calc(48 * var(--u));
    padding-bottom: 0;
  }

  .fp-access-store {
    align-items: end;
    padding: calc(33 * var(--u)) 0;
    gap: calc(20 * var(--u));
  }

  .fp-access-store:first-child {
    border-right: 0;
    border-bottom: 1px solid #cfcfcf;
    padding-left: 0;
    padding-top: 0;
  }

  .fp-access-store:last-child {
    padding-bottom: calc(15 * var(--u));
  }

  .fp-access-store h3 {
    font-size: max(14px, calc(28 * var(--u)));
    margin-bottom: calc(16 * var(--u));
  }

  .fp-access-store .addr {
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
  }

  .fp-access-store .map {
    flex: 0 0 calc(180 * var(--u));
    width: calc(180 * var(--u));
    height: calc(180 * var(--u));
  }

    /* SPは地図が小さすぎて意味を成さないため、地図を隠してボタンに差し替える */
    .fp-access-store .map {
      display: none;
    }
  
    .fp-access-map-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40%;
      height: calc(56 * var(--u));
      border: 1px solid var(--fp-green);
      color: var(--fp-green);
      font-size: max(14px, calc(15 * var(--u)));
      text-decoration: none;
      background: #fff;
    }

  .fp-access-info {
    padding-top: calc(30 * var(--u));
  }

  /* 営業時間／対応エリアはSPでも「ラベル列｜値列」の横並び。ボタンは下段に回るのでdlは全幅に広げる */
  .fp-access-info dl {
    grid-template-columns: calc(140 * var(--u)) 1fr;
    gap: calc(20 * var(--u)) calc(30 * var(--u));
    max-width: none;
  }

  .fp-access-info dt {
    width: 75px;
    line-height: 1.75;
    font-size: max(14px, calc(21 * var(--u)));
  }

  .fp-access-info dd {
    font-size: max(14px, calc(21 * var(--u)));
  }

  .fp-access-info .fp-btn-list--wide {
    position: relative;
    display: flex;
    width: calc(400 * var(--u));
    margin: calc(30 * var(--u)) auto 0;
  }

  /* ---- FAQ ---- */
  .fp-faq {
    padding: calc(73 * var(--u)) 0;
  }

  .fp-faq-inner {
    padding: 0 calc(20 * var(--u));
  }

  .fp-faq .fp-sec-ttl {
    margin-bottom: calc(40 * var(--u));
  }

  .fp-faq-item {
    margin-bottom: calc(24 * var(--u));
  }

  .fp-faq-item dt {
    font-size: max(14px, calc(24 * var(--u)));
    gap: calc(16 * var(--u));
    padding: calc(14 * var(--u)) calc(24 * var(--u));
    align-items: flex-start;
    min-height: 0;
  }

  .fp-faq-item dt .q {
    font-size: max(18px, calc(30 * var(--u)));
    line-height: 1.5;
  }

  .fp-faq-item dd {
    font-size: max(14px, calc(21 * var(--u)));
    margin: calc(16 * var(--u)) calc(10 * var(--u)) 0 calc(40 * var(--u));
    line-height: 1.52;
  }

  .fp-faq-more {
    margin-top: calc(40 * var(--u));
  }

  /* ---- BLOG（comp 画像360左＋テキスト右の横カード） ---- */
  .fp-blog {
    padding: calc(73 * var(--u)) 0;
  }

  .fp-blog-inner {
    padding: 0 calc(20 * var(--u));
  }

  .fp-blog .fp-sec-ttl {
    margin-bottom: calc(36 * var(--u));
  }

  .fp-blog-grid {
    grid-template-columns: 1fr;
    gap: calc(36 * var(--u));
  }

  /* 画像左＋（日付・タイトル）を右上に近接配置。画像は3行ぶんを span し、余白は下にできる。 */
  .fp-blog-card {
    display: grid;
    grid-template-columns: calc(360 * var(--u)) 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "img date"
      "img title"
      "img .";
    column-gap: calc(22 * var(--u));
    row-gap: calc(10 * var(--u));
  }

  .fp-blog-card .fp-blog-img {
    grid-area: img;
  }

  .fp-blog-img img {
    height: calc(240 * var(--u));
  }

  .fp-blog-date {
    grid-area: date;
    font-size: max(14px, calc(16 * var(--u)));
    line-height: 1.4;
    margin: 0;
  }

  .fp-blog-title {
    grid-area: title;
    font-size: max(14px, calc(21 * var(--u)));
    line-height: 1.52;
    letter-spacing: .05em;
    -webkit-line-clamp: 3;
    margin: 0;
  }

  .fp-blog-more {
    margin-top: calc(40 * var(--u));
  }

  /* scrollup-button */

  .scrollup-button {
    bottom: 72px !important;
  }

  /* ---- FOOTER ---- */
  .fp-footer-body {
    padding: calc(44 * var(--u)) calc(24 * var(--u)) calc(36 * var(--u));
  }

  .fp-footer-nav {
    font-size: max(14px, calc(14 * var(--u)));
    line-height: 2;
    margin-bottom: calc(28 * var(--u));
  }

  .fp-footer-nav span {
    margin: 0 calc(8 * var(--u));
  }

  .fp-footer-top {
    flex-direction: column;
    align-items: center;
    gap: calc(24 * var(--u));
    margin-bottom: calc(32 * var(--u));
  }

  .fp-footer-logo img {
    margin: 8px auto;
    width: max(600px, calc(523 * var(--u)));
    max-width: 80%;
  }

  /* デザイン準拠: SPではフッター内CTA（電話・メール）は非表示（画面下の固定バーが代替） */
  .fp-footer-nav,
  .fp-footer-btns {
    display: none;
  }

  .fp-footer-main {
    flex-direction: column;
    gap: calc(28 * var(--u));
    margin-bottom: calc(32 * var(--u));
  }

  .fp-footer-stores .name {
    font-size: max(14px, calc(28 * var(--u)));
  }

  .fp-footer-stores .addr {
    font-size: max(14px, calc(21 * var(--u)));
  }

  .fp-footer-bnr-box {
    flex: none;
    width: 100%;
    padding: calc(24 * var(--u));
  }

  .fp-footer-bnr-box .ttl {
    font-size: max(16px, calc(24 * var(--u)));
  }

  .fp-footer-bnr-box .txt {
    font-size: max(14px, calc(21 * var(--u)));
    text-align: left;
  }

  .fp-footer-bottom {
    flex-direction: column;
    gap: calc(16 * var(--u));
    align-items: center;
  }

  .fp-footer-banners {
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(22 * var(--u));
  }

  .fp-footer-banners img {
    width: calc(308 * var(--u));
    height: calc(64 * var(--u));
  }

  .fp-footer-insta img {
    width: calc(60 * var(--u));
    height: calc(60 * var(--u));
  }

  .fp-footer-copy {
    padding: calc(11 * var(--u)) 0;
  }

  .fp-footer-copy small {
    font-size: max(14px, calc(13 * var(--u)));
  }
}

/* ============================================================
   パーツ集（parts.php）スタイルガイド ― 固定幅1200で表示。
   front-page の各コンポーネント（.fp-btn-list / .fp-cta-tel 等）とトークンを再利用。
   ============================================================ */
.fp-parts-body {
  background: #fff;
}

.fp-parts {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 52px 8px;
  box-sizing: border-box;
}

.fp-parts-grid {
  display: grid;
  grid-template-columns: 420px 340px 1fr;
  grid-template-areas:
    "text  color icon"
    "btn   color icon";
  gap: 40px;
  align-items: start;
}

.fp-parts-area--text {
  grid-area: text;
}

.fp-parts-area--color {
  grid-area: color;
}

.fp-parts-area--icon {
  grid-area: icon;
}

.fp-parts-area--btn {
  grid-area: btn;
}

.fp-parts-h {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #353535;
}

/* テキスト */
.fp-parts-text>* {
  margin: 0 0 14px;
}

.fp-parts-text>*:last-child {
  margin-bottom: 0;
}

.fp-parts-note {
  margin-left: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--fp-text-weak);
}

.fp-parts-t1 {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: .05em;
  color: #000;
}

.fp-parts-t2 {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
  letter-spacing: .05em;
  color: #000;
}

.fp-parts-t3 {
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 27px;
  letter-spacing: .09em;
  color: #000;
}

.fp-parts-tb {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 27px;
  color: var(--fp-text);
}

/* カラー */
.fp-parts-colors {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fp-parts-colors li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  font-size: 16px;
  color: var(--fp-text);
}

.fp-parts-colors .sw {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  border: 1px solid #e3e3e3;
  box-sizing: border-box;
}

.fp-parts-colors .hex {
  margin-left: auto;
  font-size: 13px;
  color: var(--fp-text-weak);
}

/* アイコン（SVGを mask で再配色：上段=通常色 / 下段=メインカラー） */
.fp-parts-icons {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fp-parts-iconrow {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 20px;
}

.fp-parts-icon {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-color: #888;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.fp-parts-iconrow.is-green .fp-parts-icon {
  background-color: var(--fp-green);
}

/* ボタン（一覧を見る） */
.fp-parts-btns {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.fp-parts-btnrow {
  display: flex;
  align-items: center;
  gap: 50px;
}

.fp-parts-state {
  flex: 0 0 96px;
  font-size: 16px;
  color: var(--fp-text);
}

/* CTAボタン（電話/メール）：暗い背景に default(80%)/hover(100%) */
.fp-parts-cta {
  position: relative;
  max-width: 1200px;
  margin: 8px auto 0;
  padding: 40px 52px;
  box-sizing: border-box;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.fp-parts-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(21, 21, 21, .71);
}

.fp-parts-cta-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 30px;
}

.fp-parts-cta-row+.fp-parts-cta-row {
  margin-top: 26px;
}

.fp-parts-state--white {
  flex: 0 0 180px;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.fp-parts-state--white small {
  font-size: 13px;
  color: rgba(255, 255, 255, .8);
}