@charset "UTF-8";

/* ==========================================================================
   BEM（Block__Element--Modifier）ベースのCSS設計
   PCファースト（max-width）でレスポンシブ対応

   構成：
   1. Variables（CSS変数）
   2. Base（ベーススタイル）
   3. Layout（ヘッダー・メイン・フッター）
   4. Block（各セクション・コンポーネント）
   5. Utility（表示切り替え・テキスト揃え等）
   ========================================================================== */


/* ==========================================================================
   1. Variables
   ========================================================================== */

:root {
  /* カラー */
  --color-text: #3a4b25;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-primary: #8dc21f;     /* LINEグリーン */
  --color-accent: #e09f43;      /* お問い合わせオレンジ */
  --color-yellow: #fcee21;      /* 強調イエロー */
  --color-border: #e5e5e5;
  --color-wave-dark: #3a4b25;

  /* フォント */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-en: "Helvetica Neue", "Arial", sans-serif;

  /* レイアウト */
  --container-width: 1472px;
  --container-padding: 32px;
  --container-padding-sp: 16px;

  /* ヘッダー高さ */
  --header-height: 96px;
  --header-height-sp: 64px;

  /* SP追随フッター高さ */
  --sp-fixed-footer-height: 64px;

  /* イージング */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index */
  --z-header: 1000;
  --z-sp-footer: 1000;
  --z-modal: 1100;
}


/* ==========================================================================
   2. Base
   ========================================================================== */

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  word-break: break-word;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s var(--ease-out);
}

a:hover {
  opacity: 0.8;
}

/* SP時はSP追随フッター分の余白を確保 */
@media (max-width: 767px) {
  body {
    padding-bottom: var(--sp-fixed-footer-height);
  }
}


/* ==========================================================================
   3. Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container-width) + var(--container-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

@media (max-width: 767px) {
  .container {
    padding-inline: var(--container-padding-sp);
  }
}


/* ==========================================================================
   4. Block（各セクション・コンポーネント）
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  position: fixed;
  top: 8px;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: var(--z-header);
}

/* ヘッダー最上部の8pxライン（fixedで常に最上部に固定） */
.header::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-color: #3a4b25;
  z-index: var(--z-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
  /*max-width: 1600px;*/
  margin-inline: auto;
  padding-inline: 24px;
}

.header__logo {
  flex-shrink: 0;
  display: inline-block;
}

.header__logo img {
  width: 180px;
  height: auto;
  display: block;
}

/* グローバルナビ（PC） フリーダイヤルの左に隣接配置 */
.header__nav {
  margin-left: auto;
  display: flex;
  align-self: stretch;
  align-items: stretch;
}

.header__nav-list {
  display: flex;
  gap: 36px;
  align-items: stretch;
}

.header__nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 18px 8px 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
}

/* 下矢印（CSS疑似要素） */
.header__nav-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fbb03b;
  border-bottom: 2px solid #fbb03b;
  transform: translateY(-70%) rotate(45deg);
}

/* 右側アクション */
.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
}

/* フリーダイヤル */
.header__tel-link {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.header__tel-icon {
  width: 44px;
  height: 29px;
  display: block;
  flex-shrink: 0;
}

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

.header__tel-num {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.header__tel-hours {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-text);
}

/* CTAボタン（ヘッダー） 上端揃え＋ヘッダーより高くして下方向にはみ出すタブ風 */
.header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 110px;
  align-self: flex-start;
  height: calc(var(--header-height) + 8px);
  padding: 8px 14px;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
}

.header__btn--line {
  background-color: #8dc21f;
}

.header__btn--mail {
  background-color: #e09f43;
}

.header__btn-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.header__btn-text {
  display: flex;
  flex-direction: column;
  font-size: 1.2rem;
}

/* ハンバーガー（SP用、PCでは非表示） */
.header__hamburger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.header__hamburger-line {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform 0.3s var(--ease-out), opacity 0.2s var(--ease-out);
}

/* ハンバーガー：オープン時の×変形 */
.header__hamburger.is-open .header__hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.header__hamburger.is-open .header__hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.header__hamburger.is-open .header__hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* SPメニュー（スライド展開） */
.header__sp-menu {
  position: fixed;
  top: calc(var(--header-height-sp) + 16px);
  left: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  transition: max-height 0.35s var(--ease-out);
  z-index: calc(var(--z-header) - 1);
}

.header__sp-menu.is-open {
  max-height: calc(100vh - var(--header-height-sp) - 16px);
}

.header__sp-menu-list {
  padding: 16px 0;
}

.header__sp-menu-item {
  border-bottom: 1px solid var(--color-border);
}

.header__sp-menu-link {
  display: block;
  padding: 18px 24px;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
}

/* SPメニュー内CTAボタン群（タブレット＋SPで表示） */
.header__sp-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
  border-top: none;
}

.header__sp-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  height: 56px;
  padding: 0 20px;
  border-radius: 28px;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
}

.header__sp-menu-btn--line {
  background-color: #8dc21f;
}

.header__sp-menu-btn--mail {
  background-color: #e09f43;
}

.header__sp-menu-btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* SPメニュー内電話番号（SPのみ表示） */
.header__sp-menu-tel {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 24px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text);
}

.header__sp-menu-tel-icon {
  width: 40px;
  height: 26px;
  flex-shrink: 0;
}

.header__sp-menu-tel-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.header__sp-menu-tel-num {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.header__sp-menu-tel-hours {
  font-size: 1.2rem;
}

/* ---- ヘッダー：タブレット＋SP（〜1279px）共通：ハンバーガーモード ---- */
@media (max-width: 1279px) {
  .header {
    height: var(--header-height-sp);
  }

  .header__inner {
    padding-inline: 16px;
    gap: 16px;
  }

  .header__logo img {
    width: 130px;
  }

  /* PC用：ナビ・CTAボタン群は非表示 */
  .header__nav,
  .header__actions {
    display: none;
  }

  /* 電話番号エリアを右寄せ（ナビが消えたため margin-left:auto をここに付与） */
  .header__tel {
    margin-left: auto;
  }

  .header__tel-num {
    font-size: 1.8rem;
  }

  .header__tel-hours {
    font-size: 1.0rem;
  }

  /* ハンバーガー表示 */
  .header__hamburger {
    display: flex;
  }
}

/* ---- ヘッダー：SP（〜767px）電話番号をヘッダーから非表示・メニューに表示 ---- */
@media (max-width: 767px) {
  .header__tel {
    display: none;
  }

  .header__sp-menu-tel {
    display: flex;
  }
}


/* --------------------------------------------------------------------------
   ドロップダウンメガメニュー（PC）
   -------------------------------------------------------------------------- */

.header__nav-item {
  position: static;
  display: flex;
  align-items: center;
}

.header__nav-link--no-arrow::after {
  display: none;
}

.header__nav-item--has-dropdown:hover .header__nav-link::after {
  transform: translateY(-30%) rotate(-135deg);
}

.header__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.header__nav-item--has-dropdown:hover .header__dropdown {
  max-height: 400px;
  opacity: 1;
}

.header__dropdown-inner {
  max-width: 1024px;
  margin: 24px auto;
  padding: 48px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.header__dropdown-heading {
  flex-shrink: 0;
  min-width: 160px;
}

.header__dropdown-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: 8px;
}

.header__dropdown-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.08em;
}

.header__dropdown-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
}

.header__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  transition: color 0.2s ease;
}

.header__dropdown-link:hover {
  color: var(--color-primary);
  opacity: 1;
}

.header__dropdown-arrow {
  flex-shrink: 0;
  margin-left: 16px;
  font-size: 1.6rem;
  color: var(--color-accent);
}

/* chevronアイコン（Font Awesome代替） */
.ico-chevron-right {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  vertical-align: middle;
  margin-left: 8px;
}

.ico-chevron-down {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

.ico-chevron-up {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-135deg);
  vertical-align: middle;
}

.ico-chevron-left {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(135deg);
  vertical-align: middle;
  margin-right: 8px;
}

/* ドロップダウンオーバーレイ */
.header__dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: calc(var(--z-header) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

body:has(.header__nav-item--has-dropdown:hover) .header__dropdown-overlay {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1279px) {
  .header__dropdown,
  .header__dropdown-overlay {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   SPアコーディオン
   -------------------------------------------------------------------------- */

.header__sp-menu-heading {
  display: flex;
  align-items: center;
}

.header__sp-menu-heading .header__sp-menu-link {
  flex: 1;
  padding-right: 0;
}

.header__sp-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.header__sp-menu-arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid #fbb03b;
  border-bottom: 2px solid #fbb03b;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.header__sp-menu-item--has-sub.is-open .header__sp-menu-arrow {
  transform: rotate(-135deg);
}

.header__sp-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.header__sp-menu-item--has-sub.is-open .header__sp-submenu {
  max-height: 400px;
}

.header__sp-submenu-link {
  display: block;
  padding: 16px 24px 16px 48px;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-text);
  border-top: 1px solid var(--color-border);
}

.header__sp-menu.is-open {
  overflow-y: auto;
}


/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: calc(var(--header-height) + 8px);
  background-image: url("../img/hero-pc.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  max-width: 1600px;
  margin-inline: auto;
  padding: 80px 32px 180px;
  min-height: 960px;
  display: flex;
  align-items: center;
}
/* ---- Staff：中間幅（1280〜1920px） ---- */
@media (max-width: 1920px) and (min-width: 1280px) {
.hero__inner {
  min-height: 720px;
}
}
.hero__content {
  max-width: 60%;
  color: #fff;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
  line-height: 1.25;
}

.hero__title-sub {
  font-size: clamp(2.4rem, 2.4vw, 3.2rem);
  font-weight: 700;
  color: #fff;
}

.hero__title-main {
  margin-top: 6px;
  font-size: clamp(4.8rem, 6vw, 8.0rem);
  font-weight: 700;
  color: var(--color-yellow);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.hero__lead {
  margin-bottom: 36px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.9;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 280px;
  height: 64px;
  padding: 0 28px;
  border-radius: 50px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.hero__btn--line {
  background-color: #8dc21f;
}

.hero__btn--mail {
  background-color: #e09f43;
}

.hero__btn-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* スクロールインジケーター（縦書きSCROLL＋縦線） */
.hero__scroll {
  position: absolute;
  right: 24px;
  bottom: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero__scroll-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

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

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

@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(333%); }
}

/* 波型装飾（背景画像に焼き込み済みのため非表示） */
.hero__wave {
  display: none;
}

/* ---- Hero：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .hero {
    /* 右寄せ＋200px外側にオフセット */
    background-position: right -200px bottom;
  }

  .hero__inner {
    min-height: 720px;
    padding: 60px 24px 184px;
  }

  .hero__content {
    max-width: 65%;
  }
}

/* ---- Hero：SP（〜767px） ---- */
@media (max-width: 767px) {
  .hero {
    padding-top: calc(var(--header-height-sp) + 8px);
    background-image: url("../img/hero-sp.webp");
    background-position: center top;
    aspect-ratio: 1024 / 1866;
  }

  .hero__inner {
    min-height: 0;
    height: 100%;
    padding: 32px 20px 18%;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .hero__content {
    width: 100%;
    max-width: 100%;
  }

  .hero__title {
    margin-bottom: 18px;
    gap: 4px;
  }

  .hero__title-sub {
    font-size: clamp(2.0rem, 6vw, 2.6rem);
  }

  .hero__title-main {
    font-size: clamp(3.6rem, 12vw, 5.4rem);
    white-space: nowrap;
  }

  .hero__lead {
    margin-bottom: 24px;
    font-size: clamp(1.3rem, 3.6vw, 1.5rem);
    line-height: 1.8;
  }

  .hero__cta {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 14px;
  }

  .hero__btn {
    width: 100%;
    max-width: 240px;
    min-width: 0;
    height: 56px;
    padding: 0 20px;
    font-size: 1.4rem;
    justify-content: flex-start;
    gap: 10px;
  }

  .hero__btn-icon {
    width: 26px;
    height: 26px;
  }

  /* スクロールインジケーターはSP非表示 */
  .hero__scroll {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   Achievements（実績バッジセクション）
   -------------------------------------------------------------------------- */

.achievements {
  padding: 80px 24px 64px;
  background-color: #fff;
}

.achievements__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.achievements__title {
  margin-bottom: 20px;
  font-size: clamp(2.4rem, 2.4vw, 3.2rem);
  font-weight: 700;
  color: #3a4b25;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.achievements__lead {
  margin-bottom: 56px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  text-align: center;
  line-height: 1.9;
}

.achievements__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  margin-bottom: 8px;
}

.achievements__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
}

.achievements__item:first-child {
}

.achievements__leaf {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}

.achievements__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  /* 葉の位置を3つで揃えるため、最も広い「4,679件超」の幅にあわせる */
  min-width: 180px;
}

.achievements__icon {
  width: auto;
  height: 44px;
  margin-bottom: 2px;
}

.achievements__label {
  font-size: 1.2rem;
  font-weight: 500;
  color: #3a4b25;
  line-height: 1.4;
}

.achievements__count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: #3a4b25;
}

.achievements__num {
  font-size: clamp(3.2rem, 2.7vw, 4.0rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.achievements__unit {
  font-size: 1.6rem;
  font-weight: 700;
}

.achievements__note {
  margin-top: 8px;
  font-size: 1.2rem;
  color: #3a4b25;
  text-align: right;
}

/* ---- Achievements：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .achievements {
    padding: 64px 20px 48px;
  }

  .achievements__leaf {
    width: 42px;
  }

  .achievements__item {
    padding: 8px 6px;
    gap: 4px;
  }

  /* TBは横幅が窮屈になるためmin-width解除 */
  .achievements__badge {
    min-width: 0;
  }
}

/* ---- Achievements：SP（〜767px） ---- */
@media (max-width: 767px) {
  .achievements {
    padding: 48px 20px 32px;
  }

  .achievements__title {
    margin-bottom: 16px;
    font-size: clamp(1.9rem, 5.5vw, 2.4rem);
    line-height: 1.55;
  }

  .achievements__lead {
    margin-bottom: 36px;
    font-size: clamp(1.3rem, 3.6vw, 1.5rem);
    line-height: 1.8;
  }

  .achievements__lead br {
    display: none;
  }

  .achievements__list {
    flex-direction: column;
    gap: 0;
  }

  .achievements__item {
    padding: 24px 0;
    border-left: none;
    border-top: 1px solid rgba(58, 75, 37, 0.12);
    gap: 6px;
  }

  .achievements__item:first-child {
    border-top: none;
    padding-top: 8px;
  }

  .achievements__item:last-child {
    padding-bottom: 8px;
  }

  .achievements__leaf {
    width: 56px;
  }

  .achievements__badge {
    /* SPは文字サイズが大きいため、PCより少し広めに揃える */
    min-width: 200px;
  }

  .achievements__icon {
    height: 40px;
  }

  .achievements__label {
    font-size: 1.4rem;
  }

  .achievements__num {
    font-size: clamp(3.0rem, 9vw, 3.8rem);
  }

  .achievements__unit {
    font-size: 1.5rem;
  }

  .achievements__note {
    margin-top: 12px;
    font-size: 1.1rem;
  }
}


/* --------------------------------------------------------------------------
   Entrust（私たちにお任せください＋スタッフ写真）
   -------------------------------------------------------------------------- */

.entrust {
  padding: 0 24px 0;
  background-color: #fff;
}

.entrust__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.entrust__lead {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #3a4b25;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

/* 左右の斜め装飾線「＼ ／」 */
.entrust__lead::before,
.entrust__lead::after {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background-color: #3a4b25;
}

.entrust__lead::before {
  transform: rotate(60deg);
  margin-right: 16px;
}

.entrust__lead::after {
  transform: rotate(-60deg);
  margin-left: 16px;
}

.entrust__photo {
  display: block;
  width: 100%;
  /*max-width: 760px;*/
  height: auto;
  margin: 0 auto;
}

.entrust__cta {
  text-align: center;
  margin-top: 32px;
  padding-bottom: 80px;
}

/* ---- Entrust：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .entrust {
    padding: 0 20px 0;
  }

  .entrust__lead {
    font-size: 2.0rem;
  }
}

/* ---- Entrust：SP（〜767px） ---- */
@media (max-width: 767px) {
  .entrust {
    padding: 0 16px 0;
  }

  .entrust__lead {
    margin-bottom: 16px;
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }

  .entrust__lead::before,
  .entrust__lead::after {
    width: 24px;
  }

  .entrust__lead::before {
    margin-right: 12px;
  }

  .entrust__lead::after {
    margin-left: 12px;
  }
}


/* --------------------------------------------------------------------------
   Worries（こんな不安はありませんか？）
   -------------------------------------------------------------------------- */

.worries {
  position: relative;
  padding: 0 24px 152px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern01.png");
  background-repeat: repeat;
}

/* 上部の波型装飾（スタッフ写真の下端に被さる） */
.worries::before {
  content: "";
  position: absolute;
  top: -300px;
  left: 0;
  width: 100%;
  height: 300px;
  /* 波形に背景パターンを切り抜き表示（mask）。フォールバック色は #f5f0e8 */
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern01.png");
  background-repeat: repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path d='M0,140 C240,70 600,260 900,140 C1080,80 1260,100 1440,140 L1440,300 L0,300 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path d='M0,140 C240,70 600,260 900,140 C1080,80 1260,100 1440,140 L1440,300 L0,300 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.worries__inner {
  position: relative;
  max-width: 1024px;
  margin-inline: auto;
}

/* 周囲のキャライラスト（PC基準で四隅に配置） */
.worries__illust {
  position: absolute;
  width: 160px;
  height: auto;
}

.worries__illust--tl {
  top: 0;
  left: 0;
}

.worries__illust--bl {
  bottom: -40px;
  left: 40px;
}

.worries__illust--tr {
  top: 0;
  right: 0;
}

.worries__illust--br {
  bottom: -40px;
  right: 40px;
}

.worries__center {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.worries__icon {
  display: block;
  width: 40px;
  height: auto;
  margin: 0 auto 16px;
}

.worries__title {
  margin-bottom: 32px;
  color: #3a4b25;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.worries__list {
  display: inline-block;
  margin: 0 auto;
  text-align: left;
}

.worries__item {
  position: relative;
  padding-left: 32px;
  margin-bottom: 8px;
  color: #3a4b25;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.8;
}

.worries__item:last-child {
  margin-bottom: 0;
}

/* チェックボックス枠 */
.worries__item::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid #e09f43;
  border-radius: 2px;
  background-color: #fff;
}

/* チェックマーク（45度回転したL字） */
.worries__item::after {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 4px;
  width: 10px;
  height: 5px;
  border-left: 2px solid #e09f43;
  border-bottom: 2px solid #e09f43;
  transform: rotate(-45deg);
}

/* セクション下部の下向き三角（次セクションへの誘導／グラデーション＋角丸） */
.worries::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 64px;
  transform: translateX(-50%);
  width: 40px;
  height: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23597232'/><stop offset='100%25' stop-color='%233a4b25'/></linearGradient></defs><polygon points='4,2 36,2 20,22' fill='url(%23g)' stroke='url(%23g)' stroke-width='4' stroke-linejoin='round' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none;
}

/* ---- Worries：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .worries {
    padding: 0 24px 152px;
  }

  .worries::before {
    top: -176px;
    height: 176px;
  }

  .worries__illust {
    width: 120px;
  }

  .worries__illust--bl {
    left: 16px;
  }

  .worries__illust--br {
    right: 16px;
  }

  .worries__title {
    font-size: 2.0rem;
  }
}

/* ---- Worries：SP（〜767px） ---- */
@media (max-width: 767px) {
  .worries {
    padding: 0 20px 152px;
  }

  .worries::before {
    top: -80px;
    height: 80px;
  }

  /* 下段イラスト（bl・br）は非表示 */
  .worries__illust--bl,
  .worries__illust--br {
    display: none;
  }

  /* 上段イラスト（tl・tr）はSPでも表示 */
  .worries__illust--tl,
  .worries__illust--tr {
    width: 96px;
  }

  .worries__illust--tl {
    top: 0;
    left: 0;
  }

  .worries__illust--tr {
    top: 0;
    right: 0;
  }

  /* イラストの高さ分（約100px）を確保してテキストをその下に配置 */
  .worries__center {
    padding-top: 80px;
  }

  .worries__icon {
    width: 36px;
    margin-bottom: 12px;
  }

  .worries__title {
    margin-bottom: 24px;
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    line-height: 1.55;
  }

  .worries__list {
    width: 90%;
    display: block;
  }

  .worries__item {
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: clamp(1.3rem, 3.6vw, 1.5rem);
    line-height: 1.7;
  }

  .worries__item::before {
    top: 0.4em;
    width: 14px;
    height: 14px;
  }

  .worries__item::after {
    top: 0.6em;
    left: 3px;
    width: 9px;
    height: 4px;
  }
}


/* --------------------------------------------------------------------------
   Anshin（6つの安心）
   -------------------------------------------------------------------------- */

.anshin {
  padding: 0 24px 80px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern01.png");
  background-repeat: repeat;
}

.page-aboutus .anshin {
  padding-top: 80px;
}

.anshin__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.anshin__heading {
  margin: 0;
  text-align: center;
}

.anshin__heading img {
  width: 100%;
  max-width: 608px;
  height: auto;
  margin-left: 16%;
}

/* グリッド：PC 3列、見出しエリアに食い込む */
.anshin__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 24px;
  row-gap: 48px;
  margin-top: -96px;
}

/* カード */
.anshin-card {
  position: relative;
  background-color: #0d2a13;
  border-radius: 0 12px 0 0;
  padding: 32px 24px;
  overflow: hidden;
}

.anshin-card__point {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 -24px 8px;
  padding-left: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
}

/* 左側の水平線（カード左端からテキストまで伸びる） */
.anshin-card__point::before {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}

/* 右側の透明スペーサー（テキストを中央寄せにする） */
.anshin-card__point::after {
  content: "";
  flex: 1;
}

.anshin-card__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 16px;
  background-color: #ffe563;
  color: #0d2a13;
  font-size: 1.2rem;
  font-weight: 700;
  border-radius: 0 4px 4px 0;
}

.anshin-card__title {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.anshin-card__em {
  color: #ffe563;
  font-style: normal;
}

.anshin-card__figure {
  margin: 0 -24px 16px;
}

.anshin-card__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.anshin-card__text {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.7;
}

/* ---- Anshin：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .anshin {
    padding: 0 24px 64px;
  }

  .anshin__grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: -88px;
  }

  .anshin-card__title {
    font-size: 2.0rem;
  }
}

/* ---- Anshin：SP（〜767px） ---- */
@media (max-width: 767px) {
  .anshin {
    padding: 0 16px 48px;
  }

  .anshin__heading img {
    margin-left: 0;
  }

  .anshin__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 0;
  }

  .anshin-card {
    padding: 28px 20px;
  }

  .anshin-card__figure {
    margin: 0 -20px 16px;
  }

  .anshin-card__title {
    font-size: 2.0rem;
  }
}


/* --------------------------------------------------------------------------
   Guarantee（ダブル保証）
   -------------------------------------------------------------------------- */

.guarantee {
  padding: 0 24px 80px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern01.png");
  background-repeat: repeat;
}

.guarantee__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.guarantee__heading {
  margin: 0;
}

.guarantee__heading img {
  width: 100%;
  max-width: 624px;
  height: auto;
  margin-left: 20%;
}

/* カードグリッド：見出し画像の下部に重なる */
.guarantee__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: -64px;
  margin-bottom: 48px;
}

.guarantee-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 0 8px rgba(58, 58, 46, 0.2);
}

.guarantee-card__icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
}

.guarantee-card__title {
  margin-bottom: 16px;
  font-size: 2.4rem;
  font-weight: 700;
  color: #c47c28;
}

.guarantee-card__text {
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.8;
  text-align: left;
}

/* CTAボタン */
.guarantee__cta {
  text-align: center;
}

.guarantee__btn {
  display: inline-block;
  padding: 16px 48px;
  background-color: #8dc21f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 48px;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s var(--ease-out);
}

.guarantee__btn:hover {
  opacity: 0.75;
}

/* ---- Guarantee：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .guarantee {
    padding: 0 24px 64px;
  }

  .guarantee__heading img {
    max-width: 520px;
    margin-left: 16%;
  }

  .guarantee__cards {
    gap: 24px;
    margin-top: -64px;
  }

  .guarantee-card {
    padding: 32px 24px;
  }
}

/* ---- Guarantee：SP（〜767px） ---- */
@media (max-width: 767px) {
  .guarantee {
    padding: 0 16px 56px;
  }

  .guarantee__heading {
    margin-bottom: 0;
  }

  .guarantee__heading img {
    max-width: 100%;
    margin-left: 0;
  }

  .guarantee__cards {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 0;
    margin-bottom: 32px;
  }

  .guarantee-card {
    padding: 32px 24px;
  }

  .guarantee-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
  }

  .guarantee__btn {
    padding: 16px 32px;
    font-size: 1.6rem;
  }
}


/* --------------------------------------------------------------------------
   Menu（施工メニュー）
   -------------------------------------------------------------------------- */

.menu {
  padding: 80px 24px 80px;
  background-color: #fff;
}

.menu__inner {
  max-width: 1024px;
  margin-inline: auto;
}

/* セクション見出し */
.menu__header {
  text-align: center;
  margin-bottom: 48px;
}

.menu__header-line {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 16px;
}

.menu__header-line::before,
.menu__header-line::after {
  content: "";
  display: block;
  width: 48px;
  height: 8px;
}

.menu__header-line::before {
  background-color: #3a4b25;
}

.menu__header-line::after {
  background-color: #8dc21f;
}

.menu__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
  margin-bottom: 4px;
}

.menu__subtitle {
  font-size: 1.6rem;
  font-weight: 500;
  color: #3a4b25;
  margin-bottom: 24px;
  letter-spacing: 0.08em;
}

.menu__lead {
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.8;
}

/* カード共通 */
.menu-card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 0 8px rgba(58, 58, 46, 0.2);
  overflow: hidden;
}

.menu-card__figure {
  margin: 0;
}

.menu-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.menu-card__body {
  padding: 0;
}

.menu-card__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 8px;
}

.menu-card__title-line {
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 32px;
  margin-top: 16px;
  background-color: #8dc21f;
  border-radius: 2px;
}

.menu-card__text {
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.8;
  margin-bottom: 24px;
}

.menu-card__cta {
  text-align: right;
}

.menu-card__btn {
  display: inline-block;
  padding: 12px 32px;
  background-color: #8dc21f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 50px;
  transition: opacity 0.2s var(--ease-out);
}

.menu-card__btn:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* 全幅カード（PC：画像左・テキスト右） */
.menu-card--wide {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  margin-bottom: 48px;
}

.menu-card--wide .menu-card__figure {
  padding: 32px;
  grid-column: 1;
  grid-row: 1 / -1;
}

.menu-card--wide .menu-card__figure img {
  height: 100%;
}

.menu-card--wide .menu-card__body:first-child {
  grid-column: 2;
  grid-row: 1;
  padding: 32px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.menu-card--wide .menu-card__body:last-child {
  grid-column: 2;
  grid-row: 2;
  padding: 0 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.menu-card--wide .menu-card__text {
  margin-bottom: 32px;
}

/* 左右反転（テキスト左・画像右） */
.menu-card--reverse .menu-card__figure {
  grid-column: 2;
}

.menu-card--reverse .menu-card__body:first-child {
  grid-column: 1;
}

.menu-card--reverse .menu-card__body:last-child {
  grid-column: 1;
}

/* 下段2カラム */
.menu__grid-half {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
}

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

.menu-card--half .menu-card__body {
  padding: 24px 24px 0;
}

.menu-card--half .menu-card__body:last-child {
  padding: 24px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.menu-card--half .menu-card__figure {
  padding: 0 24px;
}

.menu-card--half .menu-card__cta {
  margin-top: auto;
  text-align: right;
}

/* ---- Menu：タブレット（〜1023px）全幅カードを縦積みに ---- */
@media (max-width: 1023px) {
  .menu {
    padding: 64px 24px 64px;
  }

  .menu__title {
    font-size: 3.2rem;
  }

  .menu-card--wide .menu-card__figure {
    padding: 24px;
  }

  .menu-card--wide .menu-card__body:first-child {
    padding: 24px 32px 0;
  }

  .menu-card--wide .menu-card__body:last-child {
    padding: 0 32px 24px;
  }
}

/* ---- Menu：SP（〜767px） ---- */
@media (max-width: 767px) {
  .menu {
    padding: 48px 16px 48px;
  }

  .menu__header {
    margin-bottom: 32px;
  }

  .menu__title {
    font-size: 3.2rem;
  }

  .menu__subtitle {
    margin-bottom: 16px;
  }

  .menu__lead {
    font-size: 1.6rem;
  }

  .menu-card--wide {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
  }

  .menu-card--wide .menu-card__body:first-child {
    order: 1;
    padding: 24px 24px 0;
  }

  .menu-card--wide .menu-card__figure {
    order: 2;
    padding: 0 24px;
  }

  .menu-card--wide .menu-card__body:last-child {
    order: 3;
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .menu-card__title {
    font-size: 2.0rem;
  }

  .menu__grid-half {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .menu-card--half .menu-card__body {
    padding: 20px 20px 0;
  }

  .menu-card--half .menu-card__body:last-child {
    padding: 20px;
  }

  .menu-card--half .menu-card__figure {
    padding: 0 20px;
  }

  .menu-card__btn {
    padding: 12px 24px;
    font-size: 1.4rem;
  }
}


/* --------------------------------------------------------------------------
   Works（施工事例スライダー）
   -------------------------------------------------------------------------- */

.works {
  position: relative;
}

/* 見出しエリア（ベージュ背景＋上部ウェーブ） */
.works__heading {
  position: relative;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
  padding: 0 24px;
  margin-top: 240px;
}

/* ウェーブ装飾（worriesと同じ波形） */
.works__heading::before {
  content: "";
  position: absolute;
  top: -300px;
  left: 0;
  width: 100%;
  height: 300px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path d='M0,140 C240,70 600,260 900,140 C1080,80 1260,100 1440,140 L1440,300 L0,300 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'><path d='M0,140 C240,70 600,260 900,140 C1080,80 1260,100 1440,140 L1440,300 L0,300 Z' fill='black'/></svg>");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none;
}

.works__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.works__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.works__subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: #6b8e23;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.works__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
}

.works__helmet {
  width: 220px;
  height: auto;
  flex-shrink: 0;
}

/* スライダーエリア */
.works__slider-area {
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
  padding: 32px 0 48px;
  overflow: hidden;
}

.works__slider {
  position: relative;
}

/* ナビゲーション矢印 */
.works__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #8dc21f;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: opacity 0.2s;
}

.works__nav:hover {
  opacity: 0.8;
}

.works__nav::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.works__nav--prev {
  left: max(24px, calc(50% - 536px));
}

.works__nav--prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.works__nav--next {
  right: max(24px, calc(50% - 536px));
}

.works__nav--next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

/* スライド幅（左右に見切れ表示） */
.works__swiper .swiper-slide {
  width: 1024px;
}

/* スライドカード */
.works-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px;
  background-color: #fff;
  border: 16px solid #0d2a13;
  border-radius: 24px;
  height: 100%;
  box-sizing: border-box;
}

.works-card__figure {
  margin: 0;
}

.works-card__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.15);
}

.works-card__body {
  display: flex;
  flex-direction: column;
}

.works-card__date {
  font-size: 1.6rem;
  font-weight: 400;
  color: #666;
  margin-bottom: 8px;
}

.works-card__name {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 16px;
  line-height: 1.4;
}

.works-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.works-card__tag {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid #3a4b25;
  border-radius: 24px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.5;
}

.works-card__voice-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #6b8e23;
  margin-bottom: 8px;
}

.works-card__voice {
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.8;
}

.works-card__body .menu-card__cta {
  margin-top: auto;
  padding-top: 16px;
}

/* ドット・CTAエリア（ベージュ背景） */
.works__bottom {
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
  padding: 32px 24px 80px;
  text-align: center;
}

.works__pagination {
  margin-bottom: 32px;
}

.works__pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 0 8px;
  background-color: #ccc;
  opacity: 1;
}

.works__pagination .swiper-pagination-bullet-active {
  background-color: #3a4b25;
}

.works__btn {
  display: inline-block;
  padding: 16px 48px;
  background-color: #8dc21f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 48px;
  letter-spacing: 0.04em;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s;
}

.works__btn:hover {
  opacity: 0.75;
}

/* ---- Works：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .works__heading {
    padding: 0 24px;
  }

  .works__heading::before {
    top: -176px;
    height: 176px;
  }

  .works__title {
    font-size: 3.2rem;
  }

  .works__helmet {
    width: 96px;
  }

  .works__swiper .swiper-slide {
    width: min(1024px, calc(100vw - 128px));
  }
}

/* ---- Works：タブレット（〜1023px）カード縦積み ---- */
@media (max-width: 1023px) {
  .works-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .works-card__figure img {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* ---- Works：SP（〜767px） ---- */
@media (max-width: 767px) {
  .works__heading {
    padding: 0 16px;
    margin-top: 84px;
  }

  .works__heading::before {
    top: -80px;
    height: 80px;
  }

  .works__title {
    font-size: 3.2rem;
  }

  .works__helmet {
    width: 72px;
  }

  .works__slider-area {
    padding: 16px 0 32px;
  }

  .works__nav {
    width: 32px;
    height: 32px;
  }

  .works__nav::before {
    width: 8px;
    height: 8px;
  }

  .works__nav--prev {
    left: 8px;
  }

  .works__nav--next {
    right: 8px;
  }

  .works__swiper .swiper-slide {
    width: calc(100vw - 80px);
  }

  .works-card {
    padding: 16px;
    gap: 16px;
    border-width: 8px;
    border-radius: 16px;
  }

  .works-card__name {
    margin-bottom: 8px;
  }

  .works-card__tags {
    margin-bottom: 16px;
  }

  .works__bottom {
    padding: 24px 16px 64px;
  }

  .works__pagination {
    margin-bottom: 24px;
  }

  .works__btn {
    padding: 16px 32px;
  }
}


/* --------------------------------------------------------------------------
   Staff（スタッフ紹介）
   -------------------------------------------------------------------------- */

.staff {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #fff;
  padding: 0;
  min-height: calc((50vw + 32px) * 912 / 1632 + 224px);
}

/* 右上：スタッフ集合写真（画面右端にぴったり、中央まで） */
.staff__img-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  padding: 112px 0;
}

.staff__img-right img {
  display: block;
  width: calc(50vw + 32px);
  height: auto;
  border-radius: 16px 0 0 16px;
}

/* 左下：ペンキ職人写真（画面左端にぴったり） */
.staff__img-left {
  position: absolute;
  bottom: -96px;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.staff__img-left img {
  display: block;
  width: 45%;
  height: auto;
}
/* ---- Staff：中間幅（1024〜1279px） ---- */
@media (max-width: 1920px) and (min-width: 1280px) {
  .staff__img-left img {
    width: 35%;
  }
}


/* テキストエリア */
.staff__inner {
  position: absolute;
  top: 112px;
  left: 0;
  right: 0;
  z-index: 2;
}

.staff__content {
  max-width: 580px;
  margin-left: max(32px, calc((100vw - 1024px) / 2));
  margin-right: calc(50vw + 64px);
}

.staff__subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: #6b7c3a;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.staff__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.2;
  margin-bottom: 24px;
}

.staff__text {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #3a4b25;
  margin-bottom: 32px;
}

.staff__btn {
  display: block;
  margin-left: auto;
  width: fit-content;
  background-color: #8dc21f;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 16px 40px;
  border-radius: 50px;
  transition: opacity 0.2s;
}

.staff__btn:hover {
  opacity: 0.85;
}

/* ---- Staff：中間幅（1024〜1279px） ---- */
@media (max-width: 1279px) and (min-width: 1024px) {
  .staff__img-left img {
    width: clamp(180px, 18vw, 240px);
  }
}

/* ---- Staff：タブレット（〜1023px） ---- */
@media (max-width: 1023px) {
  .staff {
    display: flex;
    flex-direction: column;
    padding: 64px 0 0;
    position: relative;
    min-height: auto;
  }

  /* .staff__inner と .staff__content を透過し、子要素を .staff の直接子に */
  .staff__inner,
  .staff__content {
    display: contents;
    position: static;
    margin: 0;
  }

  /* テキスト：order 1 */
  .staff__subtitle,
  .staff__title,
  .staff__text {
    order: 1;
    padding-left: 232px;
    padding-right: 32px;
    max-width: none;
    margin-left: 0;
  }

  .staff__title {
    font-size: 3.2rem;
  }

  /* グループ写真：order 2、全幅 */
  .staff__img-right {
    order: 2;
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: 0;
    padding: 0;
  }

  .staff__img-right img {
    width: 100%;
    border-radius: 0;
  }

  /* ボタン：order 3、写真下に中央配置 */
  .staff__btn {
    order: 3;
    align-self: center;
    margin: 32px 16px 48px;
    max-width: 360px;
    min-width: 280px;
    text-align: center;
    position: relative;
    z-index: 3;
  }

  /* ペンキ職人：絶対配置（テキストの左裏） */
  .staff__img-left {
    position: absolute;
    top: 32px;
    left: 0;
    bottom: auto;
  }

  .staff__img-left img {
    width: 200px;
  }
}

/* ---- Staff：SP（〜767px） ---- */
@media (max-width: 767px) {
  .staff {
    padding: 48px 0 0;
  }

  /* テキスト：ペンキ職人の右側に逃がす */
  .staff__subtitle,
  .staff__title,
  .staff__text {
    padding-left: 144px;
    padding-right: 16px;
  }

  .staff__title {
    font-size: 2.8rem;
    margin-bottom: 16px;
  }

  .staff__text {
    font-size: 1.4rem;
    margin-bottom: 0;
  }

  /* ペンキ職人：左上、テキストの背景的に */
  .staff__img-left {
    top: 32px;
    left: -24px;
  }

  .staff__img-left img {
    width: 160px;
    opacity: 0.7;
  }

  /* グループ写真：テキスト下、全幅 */
  .staff__img-right {
    margin-top: 24px;
    padding: 0;
  }

  /* ボタン：写真下に中央 */
  .staff__btn {
    margin: 24px auto 40px;
    padding: 16px 24px;
    max-width: 320px;
    min-width: 240px;
  }
}


/* --------------------------------------------------------------------------
   Contact（お問い合わせ）
   -------------------------------------------------------------------------- */

.contact {
  position: relative;
  z-index: 2;
  background-color: #f2f3ee;
  padding: 80px 32px 0;
  border-radius: 36px 36px 0 0;
  /* margin-top: -96px; */
}

.contact__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.contact__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 16px;
}

.contact__card {
  background-image: url('../img/bg_pattern03.webp');
  background-repeat: repeat;
  background-size: auto;
  border: 16px solid #0d2a13;
  border-radius: 32px;
  display: flex;
  align-items: stretch;
  gap: 32px;
  padding: 0 40px 0 32px;
  position: relative;
}

.contact__person {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-end;
  position: relative;
  z-index: 2;
  margin-bottom: -16px;
}

.contact__greeting {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d2a13;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.4;
}

.contact__greeting-slash {
  display: inline-block;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
}

.contact__person-img {
  display: block;
  width: 240px;
  height: auto;
  align-self: flex-start;
}

.contact__info {
  flex: 1 1 auto;
  padding: 32px 0 40px;
  display: flex;
  flex-direction: column;
}

.contact__free-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.contact__free-label {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1;
}

.contact__free-text {
  font-size: 8.0rem;
  font-weight: 700;
  color: #8dc21f;
  line-height: 1;
}

.contact__divider {
  border: none;
  border-top: 8px dotted #3a4b25;
  width: 100%;
  margin: 0 0 16px;
}

.contact__tel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.contact__tel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
  text-decoration: none;
}

.contact__tel-icon {
  flex-shrink: 0;
  width: 64px;
  height: auto;
}

.contact__tel-num {
  font-size: 5.6rem;
  font-weight: 700;
  color: #0d2a13;
  letter-spacing: 0.04em;
  line-height: 1;
}

.contact__tel-hours {
  font-size: 1.6rem;
  color: #0d2a13;
  text-align: center;
}

.contact__btns {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  transition: opacity 0.2s;
  flex: 0 1 280px;
}

.contact__btn:hover {
  opacity: 0.85;
}

.contact__btn--line {
  background-color: #8dc21f;
}

.contact__btn--mail {
  background-color: #e09f43;
}

.contact__btn-icon {
  flex-shrink: 0;
}

.contact__bottom-illust {
  margin-top: 40px;
  margin-left: -32px;
  margin-right: -32px;
  height: 32px;
  background-image: url('../img/img-contact-bottom.webp');
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 32px;
}

/* ---- Contact：タブレット（〜1023px）重なりを解除 ---- */
@media (max-width: 1023px) {
  .contact {
    margin-top: 0;
  }
}

/* ---- Contact：タブレット（〜1279px） ---- */
@media (max-width: 1279px) {
  .contact__title {
    font-size: 3.2rem;
  }

  .contact__tel-num {
    font-size: 4.0rem;
  }

  .contact__free-text {
    font-size: 6.4rem;
  }

  .contact__free-label {
    font-size: 1.8rem;
  }

  .contact__card {
    gap: 16px;
    padding: 0 24px 0 24px;
  }

  .contact__person-img {
    width: 200px;
  }
}

/* ---- Contact：SP（〜767px） ---- */
@media (max-width: 767px) {
  .contact {
    padding: 48px 16px 0;
    margin-top: 0;
  }

  .contact__title {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .contact__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 24px 16px 16px;
    border-width: 8px;
    border-radius: 16px;
    position: relative;
  }

  /* .contact__person のコンテナを解除し中身を直接 .contact__card の flex 子要素にする */
  .contact__person {
    display: contents;
  }

  /* 吹き出し：カード上部中央 */
  .contact__greeting {
    margin: 0 0 32px;
    justify-content: center;
    text-align: center;
    font-size: 1.4rem;
  }

  .contact__greeting-slash {
    font-size: 2.0rem;
  }

  /* 担当者写真：右側に絶対配置（無料エリアの右隣） */
  .contact__person-img {
    position: absolute;
    right: 16px;
    top: 64px;
    width: 120px;
    z-index: 1;
    align-self: unset;
  }

  /* 情報エリア */
  .contact__info {
    padding: 0;
    width: 100%;
  }

  /* 「お見積り・診断・ご相談は」と「無料」を縦並びに、右側に写真スペースを確保 */
  .contact__free-row {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 16px;
    padding-right: 128px;
  }

  .contact__free-label {
    font-size: 1.4rem;
    text-align: center;
    width: 100%;
  }

  .contact__free-text {
    font-size: 7.2rem;
    line-height: 1;
    width: 100%;
    text-align: center;
  }

  .contact__divider {
    margin-bottom: 16px;
  }

  .contact__tel-wrap {
    margin-bottom: 16px;
  }

  .contact__tel-icon {
    width: 40px;
  }

  .contact__tel-num {
    font-size: 3.2rem;
  }

  .contact__tel-hours {
    font-size: 1.4rem;
  }

  .contact__btns {
    flex-direction: column;
    gap: 8px;
  }

  .contact__btn {
    justify-content: center;
    padding: 16px 24px;
    flex: 1 1 auto;
  }

  .contact__bottom-illust {
    margin-top: 24px;
    margin-left: -16px;
    margin-right: -16px;
  }
}


/* --------------------------------------------------------------------------
   ページトップボタン
   -------------------------------------------------------------------------- */

.page-top {
  position: fixed;
  right: 24px;
  bottom: 32px;
  width: 56px;
  height: 56px;
  background-color: #8dc21f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.page-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.page-top:hover {
  opacity: 0.8;
}

@media (max-width: 767px) {
  .page-top {
    right: 16px;
    bottom: 80px;
    width: 48px;
    height: 48px;
  }
}


/* --------------------------------------------------------------------------
   SP追随フッター（PCでは非表示）
   -------------------------------------------------------------------------- */

.sp-fixed-footer {
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--sp-fixed-footer-height);
  z-index: var(--z-sp-footer);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}

.sp-fixed-footer__btn {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
}

.sp-fixed-footer__btn--line {
  background-color: #8dc21f;
}

.sp-fixed-footer__btn--mail {
  background-color: #e09f43;
}

.sp-fixed-footer__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .sp-fixed-footer {
    display: flex;
  }
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  font-family: var(--font-base);
  color: #fff;
}

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

/* メインエリア */
.footer__main {
  background-color: #3a4b25;
  padding: 64px 0;
}

.footer__main .footer__inner {
  display: flex;
  gap: 64px;
}

/* 左カラム：会社情報 */
.footer__company {
  flex: 1;
  min-width: 0;
}

.footer__logo {
  display: inline-block;
  margin-bottom: 32px;
}

.footer__logo img {
  height: 48px;
  width: auto;
}

.footer__info-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer__info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.4rem;
  line-height: 1.8;
}

.footer__info-icon {
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  color: #8dc21f;
  margin-top: 4px;
}

/* ナビゲーションカラム */
.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
}

.footer__nav-heading {
  font-size: 1.6rem;
  font-weight: 700;
  padding-top: 16px;
  margin-bottom: 24px;
  position: relative;
}

.footer__nav-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 4px;
  background-color: #8dc21f;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer__nav-link {
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.3s;
}

.footer__nav-link:hover {
  opacity: 0.7;
}

.footer__nav-arrow {
  color: #8dc21f;
  font-weight: 700;
}

/* ボトムバー */
.footer__bottom {
  background-color: #2f3e1e;
  padding: 16px 0;
}

.footer__bottom-list {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer__bottom-link {
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  transition: opacity 0.3s;
}

.footer__bottom-link:hover {
  opacity: 0.7;
}

.footer__bottom-divider {
  color: rgba(255, 255, 255, 0.4);
  font-size: 1.4rem;
}

/* コピーライトバー */
.footer__copyright {
  background-color: #232e16;
  padding: 16px 0;
  text-align: center;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
}

/* TB */
@media (max-width: 1279px) {
  .footer__main .footer__inner {
    gap: 48px;
  }
}

/* SP */
@media (max-width: 767px) {
  .footer__main {
    padding: 48px 0;
  }

  .footer__main .footer__inner {
    flex-direction: column;
    gap: 40px;
  }

  .footer__company {
    flex: none;
  }

  .footer__bottom-list {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .footer__bottom-divider {
    display: none;
  }

  .footer__main {
    padding-bottom: calc(48px + var(--sp-fixed-footer-height));
  }
}


/* ==========================================================================
   5. Utility
   ========================================================================== */

.hidden { display: none !important; }
.pc-only { display: block; }
.sp-only { display: none; }

@media (max-width: 767px) {
  .pc-only { display: none; }
  .sp-only { display: block; }
}

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

/* SPメニュー開時：背景スクロール固定＋ぼかしオーバーレイ */
body.is-menu-open {
  overflow: hidden;
}

body.is-menu-open::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: calc(var(--z-header) - 2);
}


/* ==========================================================================
   CTAボタン注目パルス
   ========================================================================== */

@keyframes cta-pulse-line {
  0%, 100% { box-shadow: 0 0 0 0 rgba(141, 194, 31, 0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(141, 194, 31, 0); }
}

@keyframes cta-pulse-mail {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 159, 67, 0.5); }
  50%      { box-shadow: 0 0 0 12px rgba(224, 159, 67, 0); }
}

.hero__btn--line,
.contact__btn--line {
  animation: cta-pulse-line 3s ease-in-out infinite;
}

.hero__btn--mail,
.contact__btn--mail {
  animation: cta-pulse-mail 3s ease-in-out 1.5s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__btn--line,
  .hero__btn--mail,
  .contact__btn--line,
  .contact__btn--mail {
    animation: none;
  }
}


/* ==========================================================================
   ヘッダースクロール縮小
   ========================================================================== */

.header {
  transition: height 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.header.is-scrolled {
  height: 72px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.header__logo img {
  transition: width 0.3s var(--ease-out);
}

.header.is-scrolled .header__logo img {
  width: 160px;
}

.header__btn {
  transition: height 0.3s var(--ease-out), padding 0.3s var(--ease-out), font-size 0.3s var(--ease-out);
}

.header.is-scrolled .header__btn {
  height: calc(72px + 8px);
  padding: 8px 12px;
  font-size: 1.2rem;
}

.header__btn-icon {
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out);
}

.header.is-scrolled .header__btn-icon {
  width: 24px;
  height: 24px;
}

@media (max-width: 1279px) {
  .header.is-scrolled {
    height: 56px;
  }

  .header.is-scrolled .header__logo img {
    width: 120px;
  }
}

@media (max-width: 767px) {
  .header.is-scrolled {
    height: 48px;
  }

  .header.is-scrolled .header__logo img {
    width: 100px;
  }
}


/* ==========================================================================
   スクロール連動フェードインアニメーション
   ========================================================================== */

.js-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ==========================================================================
   ヒーロー順次出現アニメーション
   ========================================================================== */

@keyframes hero-appear {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title-sub,
.hero__title-main,
.hero__lead,
.hero__cta {
  opacity: 0;
  animation: hero-appear 0.6s var(--ease-out) forwards;
}

.hero__title-sub:nth-child(1) { animation-delay: 0.2s; }
.hero__title-sub:nth-child(2) { animation-delay: 0.5s; }
.hero__title-main                { animation-delay: 0.8s; }
.hero__lead                      { animation-delay: 1.1s; }
.hero__cta                       { animation-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  .hero__title-sub,
  .hero__title-main,
  .hero__lead,
  .hero__cta {
    opacity: 1;
    animation: none;
  }
}


/* ==========================================================================
   下層ページ共通
   ========================================================================== */

/* ---------- ページヒーロー ---------- */

.page-hero {
  position: relative;
  padding: 184px 32px 64px;
  background-color: #3a4b25;
  background-size: cover;
  background-position: center;
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(13, 42, 19, 0.55);
  z-index: 1;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1024px;
  margin-inline: auto;
}

.page-hero__subtitle {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.page-hero__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

@media (max-width: 1279px) {
  .page-hero {
    padding: 136px 24px 48px;
  }

  .page-hero__title {
    font-size: 3.2rem;
  }
}

@media (max-width: 767px) {
  .page-hero {
    padding: 120px 16px 40px;
  }

  .page-hero__title {
    font-size: 2.4rem;
  }

  .page-hero__subtitle {
    font-size: 1.4rem;
  }
}

/* ---------- パンくずリスト ---------- */

.breadcrumb {
  padding: 16px 32px;
  background-color: #fff;
}

.breadcrumb__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  color: var(--color-text-light);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "＞";
  font-size: 1.2rem;
  color: var(--color-text-light);
}

.breadcrumb__link {
  color: var(--color-text);
  text-decoration: none;
  transition: opacity 0.2s;
}

.breadcrumb__link:hover {
  opacity: 0.7;
}

.breadcrumb__current {
  color: var(--color-text-light);
}

@media (max-width: 767px) {
  .breadcrumb {
    padding: 12px 16px;
  }

  .breadcrumb__item {
    font-size: 1.2rem;
  }
}

/* ---------- セクション見出し（下層共通） ---------- */

.section-header {
  text-align: center;
  margin-bottom: 48px;
}

.section-header__line {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 16px;
}

.section-header__line::before,
.section-header__line::after {
  content: "";
  display: block;
  width: 48px;
  height: 8px;
}

.section-header__line::before {
  background-color: #3a4b25;
}

.section-header__line::after {
  background-color: var(--color-primary);
}

.section-header__title {
  font-size: 4.0rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
  margin-bottom: 4px;
}

.section-header__subtitle {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.08em;
  margin-bottom: 24px;
}

.section-header__lead {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.8;
}

@media (max-width: 1279px) {
  .section-header__title {
    font-size: 3.2rem;
  }
}

@media (max-width: 767px) {
  .section-header {
    margin-bottom: 32px;
  }

  .section-header__title {
    font-size: 2.4rem;
  }

  .section-header__line::before,
  .section-header__line::after {
    width: 32px;
    height: 6px;
  }
}


/* ==========================================================================
   外壁塗装ページ（/menu/）
   ========================================================================== */

/* ---------- イントロセクション ---------- */

.paint-intro {
  padding: 80px 32px;
  background-image: url('../img/bg_pattern01.png');
  background-repeat: repeat;
  background-size: auto;
}

.paint-intro__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.paint-intro__banner {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 48px;
}

.paint-intro__banner-img {
  display: block;
  width: 100%;
  height: 480px;
  object-fit: cover;
}

.paint-intro__banner-body {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  background: rgba(13, 42, 19, 0.75);
  color: #fff;
}

.paint-intro__banner-title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 24px;
}

.paint-intro__banner-text {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
}

@media (max-width: 1279px) {
  .paint-intro {
    padding: 64px 24px;
  }

  .paint-intro__banner-title {
    font-size: 2.0rem;
  }

  .paint-intro__banner-body {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .paint-intro {
    padding: 48px 16px;
  }

  .paint-intro__banner {
    margin-top: 32px;
  }

  .paint-intro__banner-body {
    position: static;
    width: 100%;
    padding: 24px;
    background: #0d2a13;
    border-radius: 0 0 16px 16px;
  }

  .paint-intro__banner-img {
    height: auto;
  }

  .paint-intro__banner-title {
    font-size: 1.8rem;
    margin-bottom: 16px;
  }
}

/* ---------- プランセクション ---------- */

.plan {
  padding: 80px 32px;
  background-color: #fff;
}

.plan__inner {
  max-width: 1024px;
  margin-inline: auto;
}

/* コミコミ説明カード */
.plan-komikomi {
  background-color: #fff;
  border: 3px solid #3a4b25;
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 48px;
  text-align: center;
}

.plan-komikomi__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.5;
  margin-bottom: 16px;
}

.plan-komikomi__title-em {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}

.plan-komikomi__text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 32px;
}

.plan-komikomi__icons {
  display: flex;
  justify-content: center;
  gap: 32px;
}

.plan-komikomi__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 120px;
}

.plan-komikomi__icon-img {
  width: 64px;
  height: 64px;
}

.plan-komikomi__icon-label {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  line-height: 1.4;
}

@media (max-width: 767px) {
  .plan-komikomi {
    padding: 24px 16px;
    margin-bottom: 32px;
  }

  .plan-komikomi__title {
    font-size: 2.0rem;
  }

  .plan-komikomi__icons {
    flex-wrap: wrap;
    gap: 16px;
  }

  .plan-komikomi__icon-item {
    width: calc(50% - 8px);
  }
}

/* プランカード */
.plan-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 48px;
  box-shadow: 0 0 8px rgba(58, 58, 46, 0.2);
}

.plan-card:last-child {
  margin-bottom: 0;
}

.plan-card__header {
  padding: 32px 40px;
  border-bottom: 2px solid #f5f0e8;
}

.plan-card__catch {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 8px;
  text-align: center;
}

.plan-card__name {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d2a13;
  text-align: center;
  line-height: 1.3;
}

.plan-card__badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

.plan-card__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(145deg, #c9a84c, #a07828);
  color: #fff;
  text-align: center;
}

.plan-card__badge-label {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
}

.plan-card__badge-num {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
}

.plan-card__badge-unit {
  font-size: 1.4rem;
  font-weight: 700;
}

.plan-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.plan-card__left {
  padding: 32px 40px;
  border-right: 2px solid #f5f0e8;
}

.plan-card__right {
  padding: 32px 40px;
}

/* 価格表 */
.plan-card__price-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 16px;
}

.plan-card__price-table {
  width: 100%;
  border-collapse: collapse;
}

.plan-card__price-table th,
.plan-card__price-table td {
  padding: 8px 12px;
  font-size: 1.6rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.plan-card__price-table th {
  font-weight: 700;
  color: #fff;
  background-color: #3a4b25;
  width: 80px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.plan-card__price-table td {
  color: var(--color-text);
  font-weight: 500;
}

/* 特徴 */
.plan-card__feature-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 8px;
}

.plan-card__feature-text {
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: 24px;
}

/* こんな方におすすめ */
.plan-card__recommend-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 8px;
}

.plan-card__recommend-list {
  list-style: none;
}

.plan-card__recommend-item {
  position: relative;
  padding-left: 24px;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.8;
}

.plan-card__recommend-item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* カラーサンプル */
.plan-card__colors {
  margin-top: 24px;
}

.plan-card__colors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: 4px;
}

.plan-card__color-swatch {
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

/* 人気ラベル */
.plan-card--popular {
  border: 3px solid var(--color-primary);
}

.plan-card__popular-label {
  display: block;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: 8px;
}

@media (max-width: 1279px) {
  .plan {
    padding: 64px 24px;
  }

  .plan-card__name {
    font-size: 2.4rem;
  }

  .plan-card__header {
    padding: 24px;
  }

  .plan-card__left,
  .plan-card__right {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .plan {
    padding: 48px 16px;
  }

  .plan-card__header {
    padding: 24px 16px;
  }

  .plan-card__name {
    font-size: 2.0rem;
  }

  .plan-card__badge {
    width: 96px;
    height: 96px;
  }

  .plan-card__badge-num {
    font-size: 2.4rem;
  }

  .plan-card__body {
    grid-template-columns: 1fr;
  }

  .plan-card__left {
    padding: 24px 16px;
    border-right: none;
    border-bottom: 2px solid #f5f0e8;
  }

  .plan-card__right {
    padding: 24px 16px;
  }
}

/* ---------- Plan V2: リデザイン版プランセクション ---------- */

/* コミコミ説明ボックス */
.plan-v2-komikomi {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border: 16px solid #3a4b25;
  border-radius: 32px;
  padding: 40px 40px 32px;
  margin-bottom: 64px;
}

.plan-v2-komikomi__body {
  margin-bottom: 32px;
}

.plan-v2-komikomi__title {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.4;
  margin-bottom: 16px;
}

.plan-v2-komikomi__title-em {
  color: #e09f43;
  font-weight: 900;
}

.plan-v2-komikomi__text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
}

.plan-v2-komikomi__icons {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.plan-v2-komikomi__icon-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-v2-komikomi__icon-img {
  width: 100%;
  height: auto;
}

/* 屋根塗装用：左テキスト・右アイコン横並び（PCのみ） */
@media (min-width: 768px) {
  .plan-v2-komikomi--horizontal {
    flex-direction: row;
    align-items: center;
    gap: 40px;
  }

  .plan-v2-komikomi--horizontal .plan-v2-komikomi__body {
    flex: 0 0 50%;
    margin-bottom: 0;
  }

  .plan-v2-komikomi--horizontal .plan-v2-komikomi__icons {
    grid-template-columns: repeat(3, 1fr);
    flex: 1;
  }
}

/* 比較見出し */
.plan-v2-compare__heading {
  font-size: clamp(2.4rem, 3.1vw, 3.2rem);
  font-weight: 700;
  text-align: center;
  color: #0d2a13;
  margin-bottom: 40px;
}

/* プラン比較アコーディオン */
.plan-accordion {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 64px;
}

.plan-accordion__item {
  border: 8px solid var(--plan-color, #6d8931);
  border-radius: 24px;
  background-color: #fff;
  overflow: visible;
  position: relative;
  padding-bottom: 20px;
}

.plan-accordion__item--plan1 { --plan-color: #6d8931; --plan-bg: #f5f7f0; }
.plan-accordion__item--plan2 { --plan-color: #b88700; --plan-bg: #fdf8ed; }
.plan-accordion__item--plan3 { --plan-color: #008b8b; --plan-bg: #eef7f7; }
.plan-accordion__item--plan4 { --plan-color: #f4743b; --plan-bg: #fef3ee; }
.plan-accordion__item--plan5 { --plan-color: #231815; --plan-bg: #f4f2f1; }

.plan-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 40px 16px;
  gap: 24px;
}

.plan-accordion__header-left {
  flex: 1;
  min-width: 0;
}

.plan-accordion__header-center {
  text-align: center;
  flex-shrink: 0;
}

.plan-accordion__header-right {
  flex-shrink: 0;
}

.plan-accordion__tag {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 9999px;
  background-color: var(--plan-color);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 8px;
}

.plan-accordion__name {
  font-size: 3.6rem;
  font-weight: 700;
  color: var(--plan-color);
  line-height: 1.3;
  margin-bottom: 4px;
}

.plan-accordion__subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
  margin-top: 8px;
}

.plan-accordion__price-label {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: -8px;
}

.plan-accordion__price {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  white-space: nowrap;
}

.plan-accordion__price-num {
  font-size: 4.8rem;
  font-weight: 900;
}

.plan-accordion__badges {
  display: flex;
  gap: 8px;
}

.plan-accordion__badge-img {
  width: 96px;
  height: 96px;
}

.plan-accordion__toggle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  margin: 0;
  padding: 8px 24px;
  border: none;
  border-radius: 9999px;
  background-color: var(--plan-color);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  transition: opacity 0.3s;
}

.plan-accordion__toggle:hover {
  opacity: 0.85;
}

.plan-accordion__toggle-icon {
  font-size: 1.2rem;
}

.plan-accordion__item.is-open > .plan-accordion__toggle {
  display: none;
}

.plan-accordion__toggle--close {
  display: none;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  margin: 0;
}

.plan-accordion__item.is-open .plan-accordion__toggle--close {
  display: flex;
}

.plan-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.plan-accordion__item.is-open .plan-accordion__body {
  max-height: 2000px;
}

.plan-accordion__body-inner {
  background-color: var(--plan-bg, #f5f7f0);
  border-radius: 16px;
  margin: 0 24px;
  padding: 32px 32px 16px;
}

.plan-accordion__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.plan-accordion__details-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--plan-color);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--plan-color);
}

.plan-accordion__details-text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
}

.plan-accordion__recommend-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-accordion__recommend-list li {
  position: relative;
  padding-left: 32px;
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 2.2;
}

.plan-accordion__recommend-list li::before {
  content: "☑";
  position: absolute;
  left: 0;
  color: var(--plan-color);
  font-size: 1.6rem;
  font-weight: 700;
}

.plan-accordion__prices {
  margin-bottom: 32px;
}

.plan-accordion__prices-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--plan-color);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--plan-color);
}

.plan-accordion__prices-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.plan-accordion__prices-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.plan-accordion__prices-tsubo {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: var(--plan-color);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  white-space: nowrap;
}

.plan-accordion__prices-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: #0d2a13;
  white-space: nowrap;
}

.plan-accordion__colors {
  margin-bottom: 8px;
}

.plan-accordion__colors-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--plan-color);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--plan-color);
}

.plan-accordion__colors-note {
  font-size: 1.6rem;
  color: var(--color-text);
  margin-bottom: 16px;
}

.plan-accordion__colors-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 8px;
}

.plan-accordion__colors-swatch {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* 坪数別 価格比較表 */
.plan-v2-table {
  margin-bottom: 0;
}

.plan-v2-table table {
  width: 100%;
  border-collapse: collapse;
}

.plan-v2-table th,
.plan-v2-table td {
  padding: 16px 8px;
  font-size: 1.6rem;
  text-align: center;
  border: 1px solid var(--color-border);
}

.plan-v2-table thead th {
  background-color: #3a4b25;
  color: #fff;
  font-weight: 700;
  font-size: 1.6rem;
}

.plan-v2-table__th-tsubo {
  background-color: #3a4b25;
  color: #fff;
  font-weight: 700;
  width: 80px;
}

.plan-v2-table__th--plan1 { background-color: #6d8931; }
.plan-v2-table__th--plan2 { background-color: #b88700; }
.plan-v2-table__th--plan3 { background-color: #008b8b; }
.plan-v2-table__th--plan4 { background-color: #f4743b; }
.plan-v2-table__th--plan5 { background-color: #231815; }

.plan-v2-table tbody th {
  background-color: #f5f0e8;
  font-weight: 700;
  color: var(--color-text);
}

.plan-v2-table tbody td {
  font-weight: 500;
  color: var(--color-text);
  background-color: #fff;
}

.plan-v2-table__scroll-hint {
  display: none;
}

.plan-v2-table__note {
  font-size: 1.6rem;
  color: #888;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 64px;
}

.apartment-repair__lead {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #0d2a13;
  text-align: left;
  margin-bottom: 32px;
}

.guarantee-card--left {
  text-align: left;
}

.guarantee-card--left .guarantee-card__title {
  text-align: left;
}

/* 塗装可能な外壁の種類 */
.wall-types {
  margin-bottom: 64px;
}

.wall-types__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.wall-types__grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.wall-types__card {
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.wall-types__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

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

.wall-types__name {
  background-color: #3a4b25;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
}

.wall-types__text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
  padding: 16px;
}

.wall-types__note {
  font-size: 1.6rem;
  color: #888;
  text-align: left;
  margin-top: 16px;
}

@media (max-width: 1279px) {
  .wall-types__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .wall-types__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .wall-types__grid--3col {
    grid-template-columns: 1fr;
  }
}

/* 外壁の種類と塗装サイン */
.wall-type-sign {
  padding: 80px 32px;
  background-image: url('../img/bg_pattern03.webp');
  background-repeat: repeat;
  background-size: auto;
}

.wall-type-sign__inner {
  max-width: 1024px;
  margin: 0 auto;
}

@media (max-width: 1279px) {
  .wall-type-sign {
    padding: 64px 24px;
  }
}

@media (max-width: 767px) {
  .wall-type-sign {
    padding: 48px 16px;
  }
}

.guarantee__cards--inline {
  margin-top: 0;
  margin-bottom: 64px;
}

.guarantee__cards--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .guarantee__cards--3col {
    grid-template-columns: 1fr;
  }
}

/* 標準色パレット */
.plan-v2-colors {
  margin-bottom: 64px;
}

.plan-v2-colors__heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
}

.plan-v2-colors__grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.plan-v2-colors__swatch {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.plan-v2-colors__note {
  font-size: 1.4rem;
  color: var(--color-text);
  text-align: right;
}

/* プランの特徴詳細アコーディオン */
.plan-v2-accordion {
  margin-bottom: 48px;
}

.plan-v2-accordion__item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  background-color: #fff;
}

.plan-v2-accordion__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  user-select: none;
}

.plan-v2-accordion__label {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 4px;
  background-color: #3a4b25;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.plan-v2-accordion__item--plan1 .plan-v2-accordion__label { background-color: #6d8931; }
.plan-v2-accordion__item--plan2 .plan-v2-accordion__label { background-color: #b88700; }
.plan-v2-accordion__item--plan3 .plan-v2-accordion__label { background-color: #008b8b; }
.plan-v2-accordion__item--plan4 .plan-v2-accordion__label { background-color: #f4743b; }
.plan-v2-accordion__item--plan5 .plan-v2-accordion__label { background-color: #231815; }

.plan-v2-accordion__summary {
  flex: 1;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.6;
}

.plan-v2-accordion__toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.0rem;
  font-weight: 300;
  color: var(--color-text);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.plan-v2-accordion__item.is-open .plan-v2-accordion__toggle {
  transform: rotate(45deg);
}

.plan-v2-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.plan-v2-accordion__item.is-open .plan-v2-accordion__content {
  max-height: 500px;
}

.plan-v2-accordion__content-inner {
  padding: 0 24px 24px;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.8;
}

.plan-v2-accordion__detail-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-top: 16px;
  margin-bottom: 8px;
}

.plan-v2-accordion__detail-heading:first-child {
  margin-top: 0;
}

.plan-v2-accordion__recommend-list {
  list-style: none;
  padding: 0;
}

.plan-v2-accordion__recommend-list li {
  position: relative;
  padding-left: 24px;
  line-height: 1.8;
}

.plan-v2-accordion__recommend-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- プラン比較アコーディオン: TB ---------- */
@media (max-width: 1279px) {
  .plan-accordion__header {
    padding: 24px 24px 16px;
  }
  .plan-accordion__prices-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .plan-accordion__colors-grid {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (max-width: 767px) {
  .plan-accordion__header {
    flex-wrap: wrap;
  }
  .plan-accordion__header-left {
    flex-basis: 100%;
    margin-bottom: 8px;
  }
  .plan-accordion__header-center {
    flex: 1;
    text-align: left;
  }
  .plan-accordion__body-inner {
    margin: 0 16px;
    padding: 24px;
  }
  .plan-accordion__colors-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

/* ---------- コミコミエリア: SP ---------- */
@media (max-width: 767px) {
  .plan-v2-komikomi {
    border-width: 8px;
    border-radius: 24px;
    padding: 24px 16px;
    margin-bottom: 40px;
  }
  .plan-v2-komikomi__title {
    font-size: 2.4rem;
  }
  .plan-v2-komikomi__icons {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 320px;
    margin-inline: auto;
  }
}

/* ---------- 価格比較表: SP ---------- */
@media (max-width: 767px) {
  .plan-v2-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .plan-v2-table table {
    min-width: 600px;
  }
  .plan-v2-table__scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1.6rem;
    color: #888;
    margin-bottom: 8px;
  }
  .plan-v2-table__th-tsubo,
  .plan-v2-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .plan-v2-table--simple table {
    min-width: 0;
  }

  .plan-v2-table--simple th,
  .plan-v2-table--simple td {
    white-space: normal;
    word-break: break-all;
  }
}

/* ---------- プラン比較アコーディオン: SP ---------- */
@media (max-width: 767px) {
  .plan-accordion {
    gap: 56px;
  }
  .plan-accordion__item {
    border-radius: 16px;
  }
  .plan-accordion__header {
    flex-wrap: wrap;
    padding: 16px;
    gap: 8px;
  }
  .plan-accordion__header-left {
    flex-basis: 100%;
    margin-bottom: 0;
  }
  .plan-accordion__header-center {
    flex: 1;
    text-align: left;
  }
  .plan-accordion__name {
    font-size: 2.4rem;
  }
  .plan-accordion__price-num {
    font-size: 3.2rem;
  }
  .plan-accordion__badge-img {
    width: 72px;
    height: 72px;
  }
  .plan-accordion__toggle {
    width: 160px;
  }
  .plan-accordion__body-inner {
    margin: 0 8px 8px;
    padding: 16px;
  }
  .plan-accordion__details {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .plan-accordion__prices-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .plan-accordion__prices-item {
    padding: 8px;
    flex-direction: column;
    gap: 4px;
  }
  .plan-accordion__prices-tsubo {
    padding: 2px 8px;
    font-size: 1.6rem;
  }
  .plan-accordion__prices-value {
    font-size: 1.6rem;
  }
  .plan-accordion__colors-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---------- 施工の流れ ---------- */

.flow {
  padding: 80px 32px;
  background-color: #fff;
}

.flow__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.flow__columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.flow-timeline {
  display: flex;
  flex-direction: column;
}

.flow-timeline:nth-child(2) {
  padding-top: 160px;
}

.flow-timeline__item {
  display: grid;
  grid-template-columns: 144px 1fr;
  gap: 24px;
  position: relative;
  padding-bottom: 48px;
}

.flow-timeline__item::before {
  content: '';
  position: absolute;
  left: 72px;
  top: 144px;
  bottom: 0;
  width: 0;
  border-left: 4px dotted #5b8c3e;
  transform: translateX(-2px);
}

.flow-timeline__item:last-child::before {
  display: none;
}

.flow-timeline:first-child .flow-timeline__item:last-child::after {
  content: '';
  position: absolute;
  left: 72px;
  top: 144px;
  height: 80px;
  width: 0;
  border-left: 4px dotted #5b8c3e;
  transform: translateX(-2px);
}

.flow-timeline:nth-child(2) .flow-timeline__item:first-child::after {
  content: '';
  position: absolute;
  left: 72px;
  top: -80px;
  height: 80px;
  width: 0;
  border-left: 4px dotted #5b8c3e;
  transform: translateX(-2px);
}

.flow-timeline__figure {
  margin: 0;
  width: 144px;
  height: 144px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.flow-timeline__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow-timeline__body {
  padding-top: 8px;
}

.flow-timeline__title {
  font-size: 2.4rem;
  font-weight: 700;
  color: #5b8c3e;
  line-height: 1.4;
  margin-bottom: 16px;
}

.flow-timeline__number {
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

.flow-timeline__text {
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
}

@media (max-width: 1279px) {
  .flow {
    padding: 64px 24px;
  }

  .flow__columns {
    gap: 32px;
  }

  .flow-timeline:nth-child(2) {
    padding-top: 120px;
  }

  .flow-timeline__item {
    grid-template-columns: 112px 1fr;
    gap: 16px;
    padding-bottom: 40px;
  }

  .flow-timeline__figure {
    width: 112px;
    height: 112px;
  }

  .flow-timeline__item::before {
    left: 56px;
    top: 112px;
  }

  .flow-timeline:first-child .flow-timeline__item:last-child::after {
    left: 56px;
    top: 112px;
    height: 64px;
  }

  .flow-timeline:nth-child(2) .flow-timeline__item:first-child::after {
    left: 56px;
    top: -64px;
    height: 64px;
  }

  .flow-timeline__title {
    font-size: 2.0rem;
  }

  .flow-timeline__number {
    font-size: 2.0rem;
  }
}

@media (max-width: 767px) {
  .flow {
    padding: 48px 16px;
  }

  .flow__columns {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .flow-timeline:nth-child(2) {
    padding-top: 0;
  }

  .flow-timeline__item {
    grid-template-columns: 104px 1fr;
    gap: 16px;
    padding-bottom: 32px;
  }

  .flow-timeline__item::before {
    left: 52px;
    top: 104px;
  }

  .flow-timeline__figure {
    width: 104px;
    height: 104px;
  }

  .flow-timeline:first-child .flow-timeline__item:last-child::before {
    display: block;
    left: 52px;
    top: 104px;
  }

  .flow-timeline:first-child .flow-timeline__item:last-child::after,
  .flow-timeline:nth-child(2) .flow-timeline__item:first-child::after {
    display: none;
  }

  .flow-timeline__title {
    font-size: 2.0rem;
  }
}

/* ---------- FAQ ---------- */

.faq {
  padding: 80px 32px;
  background-color: #f5f0e8;
}

.faq__inner {
  max-width: 1024px;
  margin-inline: auto;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 4px rgba(58, 58, 46, 0.08);
}

.faq-item__question {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  cursor: pointer;
  list-style: none;
  font-size: 1.6rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.5;
  transition: background-color 0.2s;
}

.faq-item__question:hover {
  background-color: #fafaf6;
}

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

.faq-item__question::before {
  content: "Q";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #fff;
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 700;
}

.faq-item__question::after {
  content: "";
  flex-shrink: 0;
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(45deg);
  transition: transform 0.3s var(--ease-out);
}

.faq-item[open] .faq-item__question::after {
  transform: rotate(-135deg);
}

.faq-item__answer {
  padding: 16px 32px 24px 88px;
  font-size: 1.6rem;
  color: var(--color-text);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .faq {
    padding: 48px 16px;
  }

  .faq-item__question {
    padding: 16px;
    font-size: 1.4rem;
    gap: 12px;
  }

  .faq-item__question::before {
    width: 32px;
    height: 32px;
    font-size: 1.6rem;
  }

  .faq-item__answer {
    padding: 16px 16px 16px 60px;
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   お支払い方法 (Payment)
   ========================================================================== */
.payment {
  margin-top: 64px;
  text-align: center;
}
.payment__title {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
}
.payment__subtitle {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 48px;
  line-height: 1.6;
}
.payment__subtitle-em {
  font-size: 4.0rem;
  font-weight: 700;
  color: #e09f43;
}
.payment__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.payment-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 0 8px rgba(58, 58, 46, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.payment-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background-color: #3a4b25;
  color: #fff;
  border-radius: 24px;
  padding: 8px 24px;
  margin-bottom: 24px;
}
.payment-card__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: #fff;
  color: #3a4b25;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}
.payment-card__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.4;
}
.payment-card__logo {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 24px;
}
.payment-card__text {
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.8;
  text-align: left;
}
.payment__note {
  font-size: 1.6rem;
  font-weight: 400;
  color: #888;
  line-height: 1.8;
  text-align: left;
}

/* ユーティリティ：SP専用改行 */
.u-sp-only {
  display: none;
}

@media (max-width: 1279px) {
  .payment__title {
    font-size: 2.4rem;
  }
  .payment__subtitle-em {
    font-size: 3.2rem;
  }
  .payment__cards {
    gap: 24px;
  }
  .payment-card {
    padding: 24px 16px;
  }
}

@media (max-width: 767px) {
  .payment {
    margin-top: 48px;
  }
  .payment__title {
    font-size: 2.4rem;
  }
  .payment__subtitle {
    font-size: 2.4rem;
    margin-bottom: 32px;
  }
  .payment__subtitle-em {
    font-size: 3.2rem;
  }
  .payment__cards {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 24px;
  }
  .payment-card {
    padding: 32px 24px;
  }
  .u-sp-only {
    display: inline;
  }
}


/* ============================================
   会社概要ページ
   ============================================ */

/* --- 会社概要テーブル --- */
.company-info {
  padding: 80px 0;
}

.company-info__inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}

.company-info__table-wrap {
  margin-top: 48px;
}

.company-info__table {
  width: 100%;
  border-collapse: collapse;
}

.company-info__table th,
.company-info__table td {
  font-size: 1.6rem;
  line-height: 1.8;
  padding: 24px 32px;
  border-bottom: 1px solid #ddd;
  text-align: left;
  vertical-align: top;
  color: var(--color-text);
}

.company-info__table th {
  width: 200px;
  font-weight: 700;
  background-color: #f7f9f4;
  white-space: nowrap;
}

.company-info__table tr:first-child th,
.company-info__table tr:first-child td {
  border-top: 1px solid #ddd;
}

/* --- アクセス --- */
.company-access {
  padding: 80px 0;
  background-color: #f7f9f4;
}

.company-access__inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 24px;
}

.company-access__map {
  margin-top: 48px;
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 36px;
}

.company-access__map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.company-access__detail {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.company-access__heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.company-access__heading i {
  color: var(--color-primary);
  font-size: 2.4rem;
}

.company-access__address p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text);
}

.company-access__routes {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.company-access__route p {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text);
}

/* --- TB --- */
@media (max-width: 1279px) {
  .company-info {
    padding: 64px 0;
  }

  .company-access {
    padding: 64px 0;
  }

  .company-access__detail {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- SP --- */
@media (max-width: 767px) {
  .company-info {
    padding: 48px 0;
  }

  .company-info__table-wrap {
    margin-top: 32px;
  }

  .company-info__table th,
  .company-info__table td {
    display: block;
    width: 100%;
    padding: 16px;
  }

  .company-info__table th {
    padding-bottom: 0;
    border-bottom: none;
  }

  .company-info__table td {
    padding-top: 8px;
  }

  .company-access {
    padding: 48px 0;
  }

  .company-access__map {
    margin-top: 32px;
  }

  .company-access__detail {
    margin-top: 32px;
    gap: 24px;
  }

  .company-access__heading {
    font-size: 2.4rem;
  }
}


/* ==========================================================================
   スタッフ紹介ページ（/aboutus/staff.html）
   ========================================================================== */

/* ---------- 代表あいさつ ---------- */

.greeting {
  padding: 80px 0;
  background-color: #f8f7f2;
}

.greeting__inner {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 32px;
}

.greeting__card {
  display: flex;
  align-items: flex-start;
  gap: 56px;
  background-color: #fff;
  border-radius: 16px;
  padding: 48px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.greeting__photo {
  flex-shrink: 0;
  width: 280px;
}

.greeting__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.greeting__body {
  flex: 1;
  min-width: 0;
}

.greeting__position {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.greeting__name {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
  margin-bottom: 32px;
}

.greeting__name-space {
  display: inline-block;
  width: 0.4em;
}

.greeting__text {
  font-size: 1.6rem;
  line-height: 2.0;
  color: var(--color-text);
}

.greeting__text p + p {
  margin-top: 16px;
}

@media (max-width: 1279px) {
  .greeting {
    padding: 64px 0;
  }

  .greeting__card {
    gap: 40px;
    padding: 40px;
  }

  .greeting__photo {
    width: 240px;
  }

  .greeting__name {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }
}

@media (max-width: 767px) {
  .greeting {
    padding: 48px 0;
  }

  .greeting__inner {
    padding-inline: 16px;
  }

  .greeting__card {
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px 24px;
  }

  .greeting__photo {
    width: 100%;
  }

  .greeting__body {
    text-align: center;
  }

  .greeting__name {
    font-size: 2.4rem;
    margin-bottom: 24px;
  }

  .greeting__text {
    text-align: left;
  }
}


/* ---------- 職人紹介（横長カード） ---------- */

.staff-list {
  padding: 80px 0;
  background-color: #fff;
}

.staff-list__inner {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 32px;
}

.staff-list__items {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.staff-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  background-color: #f8f7f2;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.staff-card__photo {
  flex-shrink: 0;
  width: 320px;
}

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

.staff-card__body {
  flex: 1;
  min-width: 0;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.staff-card__position {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.staff-card__name {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.3;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--color-border);
}

.staff-card__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.staff-card__info-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 1.6rem;
  line-height: 1.6;
}

.staff-card__info-row dt {
  flex-shrink: 0;
  width: 80px;
  font-weight: 700;
  color: #0d2a13;
}

.staff-card__info-row dd {
  color: var(--color-text);
}

.staff-card__message {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px;
}

.staff-card__message-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.staff-card__message p:last-child {
  font-size: 1.6rem;
  line-height: 1.8;
  color: var(--color-text);
}

@media (max-width: 1279px) {
  .staff-list {
    padding: 64px 0;
  }

  .staff-card__photo {
    width: 280px;
  }

  .staff-card__body {
    padding: 32px;
  }
}

@media (max-width: 767px) {
  .staff-list {
    padding: 48px 0;
  }

  .staff-list__inner {
    padding-inline: 16px;
  }

  .staff-list__items {
    gap: 32px;
  }

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

  .staff-card__photo {
    width: 100%;
    aspect-ratio: 4 / 3;
  }

  .staff-card__photo img {
    height: 100%;
    aspect-ratio: 4 / 3;
    object-position: top;
  }

  .staff-card__body {
    padding: 24px;
  }

  .staff-card__name {
    font-size: 2.4rem;
    margin-bottom: 16px;
    padding-bottom: 16px;
  }

  .staff-card__info-row {
    flex-direction: column;
    gap: 4px;
  }

  .staff-card__info-row dt {
    width: auto;
  }
}


/* --------------------------------------------------------------------------
   施工事例一覧（Case List）
   -------------------------------------------------------------------------- */
.case-list {
  padding: 80px 24px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
}

.case-list__inner {
  max-width: 1024px;
  margin: 0 auto;
}

.case-list__grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.case-list__grid .works-card {
  height: auto;
}

/* ---- 施工事例一覧：TB ---- */
@media (max-width: 1279px) {
  .case-list {
    padding: 64px 24px;
  }
}

/* ---- 施工事例一覧：SP ---- */
@media (max-width: 767px) {
  .case-list {
    padding: 48px 16px;
  }

  .case-list__grid {
    gap: 32px;
  }
}


/* ==========================================================================
   施工事例 詳細ページ（/case/case*.html）
   ========================================================================== */

.case-detail {
  padding: 80px 24px;
  background-color: #f5f0e8;
  background-image: url("../img/bg_pattern02.webp");
  background-repeat: repeat;
}

.case-detail__inner {
  max-width: 1024px;
  margin: 0 auto;
}

/* --- ヘッダー --- */

.case-detail__header {
  margin-bottom: 48px;
}

.case-detail__date {
  font-size: 1.6rem;
  font-weight: 400;
  color: #666;
  margin-bottom: 8px;
}

.case-detail__title {
  font-size: 3.2rem;
  font-weight: 700;
  color: #0d2a13;
  line-height: 1.4;
  margin-bottom: 16px;
}

.case-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.case-detail__tag {
  display: inline-block;
  padding: 4px 16px;
  border: 1px solid #3a4b25;
  border-radius: 24px;
  font-size: 1.6rem;
  font-weight: 400;
  color: #3a4b25;
  line-height: 1.5;
}


/* --- ビフォーアフタースライダー --- */

.ba-slider {
  margin-bottom: 64px;
}

.ba-slider__heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

.ba-slider__container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.15);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

.ba-slider__img {
  display: block;
}

.ba-slider__img img {
  display: block;
  width: 100%;
  height: auto;
}

.ba-slider__img--after {
  position: relative;
}

.ba-slider__img--before {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
}

.ba-slider__img--before img {
  width: auto;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.ba-slider__label {
  position: absolute;
  top: 16px;
  padding: 4px 24px;
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.3s;
}

.ba-slider__label--before {
  left: 16px;
  background-color: #3a4b25;
  color: #fff;
}

.ba-slider__label--after {
  right: 16px;
  background-color: var(--color-primary);
  color: #fff;
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 48px;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: col-resize;
}

.ba-slider__handle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.ba-slider__handle-line {
  width: 2px;
  flex: 1;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

.ba-slider__handle-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #3a4b25;
  font-size: 1.8rem;
}

.ba-slider__container.is-dragging {
  cursor: col-resize;
}

.ba-slider__hint {
  text-align: center;
  font-size: 1.6rem;
  color: #666;
  margin-top: 16px;
}


/* --- 施工情報テーブル --- */

.case-detail__info {
  margin-bottom: 64px;
}

.case-detail__info-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

.case-detail__table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-detail__table th,
.case-detail__table td {
  padding: 16px 24px;
  font-size: 1.6rem;
  line-height: 1.7;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
}

.case-detail__table tr:last-child th,
.case-detail__table tr:last-child td {
  border-bottom: none;
}

.case-detail__table th {
  width: 160px;
  font-weight: 700;
  color: #0d2a13;
  background-color: #f0f5e6;
  white-space: nowrap;
}

.case-detail__table td {
  color: var(--color-text);
}


/* --- 施工のポイント --- */

.case-detail__point {
  margin-bottom: 64px;
}

.case-detail__point-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

.case-detail__point-text {
  font-size: 1.6rem;
  line-height: 2.0;
  color: var(--color-text);
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}


/* --- 施工写真ギャラリー --- */

.case-detail__gallery {
  margin-bottom: 64px;
}

.case-detail__gallery-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

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

.case-detail__gallery-item {
  margin: 0;
}

.case-detail__gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

.case-detail__gallery-caption {
  font-size: 1.6rem;
  color: var(--color-text);
  text-align: center;
  margin-top: 8px;
}


/* --- お客さまの声 --- */

.case-detail__voice {
  margin-bottom: 64px;
}

.case-detail__voice-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

.case-detail__voice-body {
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  border-left: 4px solid #6b8e23;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-detail__voice-text {
  font-size: 1.6rem;
  line-height: 2.0;
  color: var(--color-text);
  margin-bottom: 16px;
}

.case-detail__voice-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: #666;
  text-align: right;
}


/* --- 担当者コメント --- */

.case-detail__staff {
  margin-bottom: 64px;
}

.case-detail__staff-heading {
  font-size: 2.4rem;
  font-weight: 700;
  color: #0d2a13;
  margin-bottom: 24px;
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
}

.case-detail__staff-body {
  background-color: #fff;
  padding: 32px;
  border-radius: 8px;
  border-left: 4px solid var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-detail__staff-text {
  font-size: 1.6rem;
  line-height: 2.0;
  color: var(--color-text);
}


/* --- 一覧へ戻るボタン --- */

.case-detail__back {
  text-align: center;
}

.case-detail__back-btn {
  display: inline-block;
  padding: 16px 48px;
  background-color: #3a4b25;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  border-radius: 48px;
  transition: opacity 0.2s var(--ease-out);
}

.case-detail__back-btn:hover {
  opacity: 0.8;
  text-decoration: none;
}


/* ---- 施工事例詳細：TB ---- */
@media (max-width: 1279px) {
  .case-detail {
    padding: 64px 24px;
  }

  .case-detail__title {
    font-size: 2.4rem;
  }
}

/* ---- 施工事例詳細：SP ---- */
@media (max-width: 767px) {
  .case-detail {
    padding: 48px 16px;
  }

  .case-detail__header {
    margin-bottom: 32px;
  }

  .case-detail__title {
    font-size: 2.4rem;
  }

  .ba-slider,
  .case-detail__info,
  .case-detail__point,
  .case-detail__gallery,
  .case-detail__voice,
  .case-detail__staff {
    margin-bottom: 48px;
  }

  .ba-slider__heading,
  .case-detail__info-heading,
  .case-detail__point-heading,
  .case-detail__gallery-heading,
  .case-detail__voice-heading,
  .case-detail__staff-heading {
    font-size: 2.0rem;
  }

  .ba-slider__handle-circle {
    width: 40px;
    height: 40px;
    font-size: 1.6rem;
  }

  .case-detail__table th,
  .case-detail__table td {
    display: block;
    width: 100%;
    padding: 12px 16px;
  }

  .case-detail__table th {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .case-detail__table td {
    padding-top: 4px;
  }

  .case-detail__point-text,
  .case-detail__voice-body,
  .case-detail__staff-body {
    padding: 24px 16px;
  }

  .case-detail__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .case-detail__back-btn {
    padding: 16px 32px;
  }
}