/* ============================================================
   style.css
   ------------------------------------------------------------
   ① デザイントークン（カラー・フォント・余白などの変数）
   ② ユーティリティclass（色・フォントをclassで管理）
   ③ 共通レイアウト（container / section）
   ④ 共通パーツ（ヘッダー / フッター）
   ⑤ レスポンシブ
   ============================================================ */

/* ===== ① デザイントークン ============================================
   色やフォントはここだけ直せばサイト全体に反映されます。
   値はFigma（イデア様｜HPデザイン）から取得したものです。 */
:root {
  /* --- カラー --- */
  --color-main:          #00a23d;  /* メインカラー（ブランドグリーン） */
  --color-main-dark:     #008a34;  /* メインカラーの濃い版（ホバー時など） */
  --color-main-pale:     #eaf6ee;  /* メインカラーのうすい版（サブリンク枠の背景など） */
  --color-text:          #333333;  /* 基本の文字色 */
  --color-text-light:    #686868;  /* 薄い文字色（フッターのリンクなど） */
  --color-bg:            #ffffff;  /* 背景色 */
  --color-bg-gray:       #f7f7f7;  /* うすいグレー背景（CONTACTエリア・SNSアイコンの丸） */
  --color-border:        #e5e5e5;  /* 罫線 */
  --color-white:         #ffffff;

  /* --- フォント --- */
  --font-base: 'Noto Sans JP', -apple-system, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
  --font-en:   'Marcellus', 'Times New Roman', serif;  /* 英字見出し（CONTACT US など） */

  /* --- フォントサイズ --- */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.5rem;    /* 40px */

  /* --- レイアウト --- */
  --container-width: 1120px;   /* コンテンツの最大幅 */
  --container-gutter: 20px;    /* 左右の余白 */
  --container-wide: 1600px;    /* 幅広コンテンツ（CONTACT・フッター）の最大幅 */
  --side-margin: clamp(24px, 8.333vw, 160px);  /* 左右の余白。Figmaの 1920px幅で160px と同じ比率 */
  --header-height: clamp(80px, 6.25vw, 120px);  /* 1920px幅で120px（Figma）。1279px以下は88px */
}

/* ===== 全体の基本設定 ===== */
html {
  scroll-behavior: smooth;   /* ページトップへ戻る時などになめらかにスクロール */
}
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
}

/* ===== ② ユーティリティclass ========================================
   HTML側で class を付けるだけで色・フォントを切り替えられます。
   例：<p class="text-main">緑の文字</p>
       <div class="bg-main text-white">緑の背景に白文字</div>
       <h2 class="font-en">CONTACT US</h2> */

/* 文字色 */
.text-main   { color: var(--color-main); }        /* メインカラー */
.text-base   { color: var(--color-text); }
.text-light  { color: var(--color-text-light); }
.text-white  { color: var(--color-white); }

/* 背景色 */
.bg-main       { background-color: var(--color-main); }       /* メインカラー */
.bg-main-pale  { background-color: var(--color-main-pale); }
.bg-gray       { background-color: var(--color-bg-gray); }
.bg-white      { background-color: var(--color-white); }

/* 枠線 */
.border-main { border-color: var(--color-main); }             /* メインカラー */

/* 画面には出さず、読み上げソフトにだけ伝える文字（「外部サイト」の注記など） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PC/SPでの表示切り替え（改行 <br class="sp-only"> <br class="pc-only"> など） */
.sp-only { display: none; }
@media (max-width: 768px) {
  .sp-only { display: inline; }
  .pc-only { display: none; }
}

/* フォント */
.font-base { font-family: var(--font-base); }
.font-en   { font-family: var(--font-en); font-weight: 400; }

/* 文字サイズ */
.fs-sm   { font-size: var(--fs-sm); }
.fs-lg   { font-size: var(--fs-lg); }
.fs-xl   { font-size: var(--fs-xl); }
.fs-2xl  { font-size: var(--fs-2xl); }

/* 太さ・寄せ（よく使うもの） */
.fw-bold    { font-weight: 700; }
.fw-normal  { font-weight: 400; }
.ta-center  { text-align: center; }
.ta-left    { text-align: left; }

/* よく使う見出しスタイル */
.heading-1 { font-family: var(--font-base); font-size: var(--fs-2xl); font-weight: 700; line-height: 1.3; }
.heading-2 { font-family: var(--font-base); font-size: var(--fs-xl);  font-weight: 700; line-height: 1.4; }
.text-body { font-size: var(--fs-base); color: var(--color-text); }

/* ===== ③ 共通レイアウト ============================================= */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.section {
  padding-block: 64px;
}

/* --- 矢印付きリンク（文字＋緑の丸に白い矢印）。サイト全体で共通 ---
   <a class="link-arrow">詳しくみる<span class="link-arrow__icon" aria-hidden="true"></span></a> */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(14px, 0.83vw, 16px);
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.link-arrow__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 4h9M6 1l3 3-3 3' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center / 9px no-repeat;
  transition: transform 0.2s;
}
.link-arrow:hover .link-arrow__icon {
  transform: translateX(3px);
}
/* 中くらいのサイズ（丸40px） */
.link-arrow--md {
  gap: 24px;
  font-size: clamp(18px, 1.04vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.link-arrow--md .link-arrow__icon {
  width: 40px;
  height: 40px;
  background-size: 12px;
}
/* 大きいサイズ（「詳しくみる」など：丸64px） */
.link-arrow--lg {
  gap: 24px;
  font-size: clamp(18px, 1.04vw, 20px);
  font-weight: 500;
  letter-spacing: 0.05em;
}
.link-arrow--lg .link-arrow__icon {
  width: 64px;
  height: 64px;
  background-size: 20px;
}

/* --- セクションの見出しラベル（緑の点＋英字）。例：● WHAT WE DO --- */
.sec-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-en);
  font-size: clamp(16px, 1.04vw, 20px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.sec-label::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-main);
}
/* 緑の背景の上で使う白い版 */
.sec-label--white {
  color: var(--color-white);
}
.sec-label--white::before {
  background-color: var(--color-white);
}

/* --- セクションの見出し（日本語の大見出し） --- */
.sec-title {
  font-size: clamp(30px, 2.5vw, 48px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: var(--color-text);
}

/* --- 白い枠のボタン（右端に黒い点。ホバーで緑になり、点が矢印の丸に変わる） ---
   <a class="btn-box">課題・お悩みから探す</a> */
.btn-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 512px;
  height: clamp(72px, 4.58vw, 88px);
  padding: 0 32px;
  background-color: var(--color-white);
  border: 1px solid #c5c5c5;
  border-radius: 8px;
  font-size: clamp(18px, 1.15vw, 22px);
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--color-text);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.btn-box::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--color-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M0 4h9M6 1l3 3-3 3' fill='none' stroke='%2300a23d' stroke-width='1'/%3E%3C/svg%3E") center / 0 no-repeat;
  transition: width 0.25s, height 0.25s, margin 0.25s, background-color 0.25s, background-size 0.25s;
}
.btn-box:hover {
  background-color: var(--color-main);
  border-color: var(--color-main);
  color: var(--color-white);
}
.btn-box:hover::after {
  width: 24px;
  height: 24px;
  margin-right: 0;
  background-color: var(--color-white);
  background-size: 9px;
}

/* --- 横に流れ続ける英字の帯（同じ文を2つ並べ、半分動かしてループ） ---
   <div class="marquee"><div class="marquee__track"><span>文</span><span>文</span></div></div>
   逆向き（左から右）は .marquee--reverse */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
}
.marquee__track > * {
  padding-right: 0.6em;      /* 文と文の間（Figmaでは130pxの文字で80px） */
}
.marquee--reverse .marquee__track {
  animation-direction: reverse;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ===== ④ 共通パーツ：ヘッダー =======================================
   includes/header.html に対応。Figma(1920px幅)の数値が最大値。
   ・PC（1280px以上）：スクロールで画面外へ流れる（代わりにサイドナビが出る）
   ・1279px以下：ロゴ＋ハンバーガー。画面上部に固定（⑤-1） */
.header {
  position: relative;
  z-index: 100;
  background-color: var(--color-bg);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
  padding-inline: clamp(16px, 1.67vw, 32px);
}

/* ロゴ */
.header__logo {
  flex-shrink: 0;
  display: block;
}
.header__logo img {
  width: clamp(160px, 12.03vw, 231px);
  height: auto;
}

.header__right {
  display: flex;
  align-items: center;
  gap: clamp(24px, 2.92vw, 56px);
}

/* --- PC用グローバルナビ --- */
.gnav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.08vw, 40px);
}
.gnav__link {
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--color-text);
  transition: color 0.2s;
}
.gnav__link:hover {
  color: var(--color-main);
}

/* --- PC用 電話＋お問い合わせ --- */
.header__contact {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.67vw, 32px);
}
.header-tel {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  white-space: nowrap;
}
/* 1行目：アイコン＋電話番号 */
.header-tel__main {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-tel__icon {
  width: clamp(22px, 1.67vw, 32px);
  height: auto;
}
.header-tel__num {
  font-size: clamp(20px, 1.56vw, 30px);
  font-weight: 700;
  line-height: 1.36;
  letter-spacing: 0.04em;
}
/* 2行目：受付時間 */
.header-tel__hours {
  font-size: clamp(12px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 1.36;
  letter-spacing: 0.05em;
}

/* お問い合わせボタン（共通） */
.btn-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(52px, 3.65vw, 70px);
  padding: 0 clamp(24px, 3.44vw, 66px);
  background-color: var(--color-main);
  color: var(--color-white);
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.btn-contact:hover {
  background-color: var(--color-main-dark);
}
.btn-contact--block {
  display: flex;
  width: 100%;
  height: 56px;
  font-size: 1rem;
}

/* --- ハンバーガーボタン（緑の横長ボタンに線2本・PCでは非表示） --- */
.drawer-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 80px;
  height: 48px;
  background-color: var(--color-main);
  border-radius: 8px;
  flex-shrink: 0;
}
.drawer-toggle__bar {
  display: block;
  width: 36px;
  height: 2px;
  background-color: var(--color-white);
  transition: transform 0.3s;
}
/* 開いている時：2本の線を交差させて×印に変化 */
.drawer-toggle.is-active .drawer-toggle__bar:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.drawer-toggle.is-active .drawer-toggle__bar:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

/* --- ドロワーメニュー（PCでは非表示） --- */
.drawer,
.drawer-overlay {
  display: none;
}

/* --- アイコン（SVGを mask で表示。色は文字色＝currentColor に従う） ---
   <span class="icon icon--search"></span> のように使う。大きさは width/height で調整 */
.icon {
  display: inline-block;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.icon--search  { -webkit-mask-image: url("../assets/images/icon_search.svg");  mask-image: url("../assets/images/icon_search.svg"); }
.icon--service { -webkit-mask-image: url("../assets/images/icon_service.svg"); mask-image: url("../assets/images/icon_service.svg"); }
.icon--group   { -webkit-mask-image: url("../assets/images/icon_group.svg");   mask-image: url("../assets/images/icon_group.svg"); }
.icon--map     { -webkit-mask-image: url("../assets/images/icon_map.svg");     mask-image: url("../assets/images/icon_map.svg"); }

/* ===== ④ 共通パーツ：サイドナビ（※1・PCのみ） ========================
   画面右端にアイコン部分（60px）だけ見せておき、
   カーソルを合わせたボタンだけ右から左へスライドして文字が出る。
   ファーストビューから少しスクロールすると .is-visible が付いてふわっと表示。 */
.side-nav {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translate(24px, -50%);
  transition: opacity 0.6s, visibility 0.6s, transform 0.6s;
}
.side-nav.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}
.side-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 271px;
  height: 54px;
  padding-left: 14px;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  color: var(--color-main);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transform: translateX(211px);   /* 271px − 見せておく幅60px */
  transition: transform 0.35s ease;
}
.side-nav__link:hover,
.side-nav__link:focus-visible {
  transform: translateX(0);
}

/* ===== ④ 共通パーツ：CONTACT US（緑の囲い）〜 フッター =================
   includes/footer.html に対応。グレー背景の .site-bottom で全体を包み、
   フッター上部の角丸の外側にグレーが見えるようにしています。
   Figma(1920px幅)の数値を基準に、狭いPC画面では clamp() で比率を保って縮めます。
   clamp(最小値, 画面幅に比例する値, 最大値=Figmaの値) */

/* --- CONTACT US エリア --- */
.cta-area {
  padding: 96px var(--side-margin) 120px;
}
.cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(32px, 3vw, 64px);
  max-width: var(--container-wide);
  margin-inline: auto;
  padding:
    clamp(40px, 3.33vw, 64px)    /* 上 */
    clamp(40px, 6.25vw, 120px)   /* 右 */
    clamp(48px, 4.17vw, 80px)    /* 下 */
    clamp(40px, 5.21vw, 100px);  /* 左 */
  background: var(--color-main) url("../assets/images/cta_bg_pc.jpg") center / cover no-repeat;
  border-radius: 8px;
  color: var(--color-white);
}
.cta__body {
  flex: 1 1 auto;
  min-width: 0;
}
.cta__title {
  font-size: clamp(48px, 4.17vw, 80px);
  line-height: 1.5;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cta__lead {
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.cta__link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 500;
  letter-spacing: 0.08em;
}
/* 白丸の矢印（「無料相談を申し込む」など共通で使える） */
.arrow-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-main);
  transition: transform 0.2s;
}
.arrow-circle svg {
  width: 14px;
  height: 8px;
}
.cta__link:hover .arrow-circle {
  transform: translateX(4px);
}

/* 電話の白いカード */
.cta-tel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(320px, 27.4vw, 526px);
  padding: clamp(28px, 2.4vw, 46px) 20px clamp(28px, 2.55vw, 49px);
  background-color: var(--color-white);
  border-radius: 8px;
  color: var(--color-text);
}
.cta-tel__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(16px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
}
.cta-tel__label::before {    /* 緑の丸ポチ */
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-main);
}
.cta-tel__num {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.83vw, 16px);
  margin-top: clamp(10px, 0.94vw, 18px);
  font-size: clamp(32px, 2.92vw, 56px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--color-main);
  white-space: nowrap;
}
.cta-tel__icon {
  width: clamp(26px, 2.29vw, 44px);
  height: auto;
}
.cta-tel__hours {
  margin-top: 8px;
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* --- フッター本体（上の角だけ丸い白い面） --- */
.footer {
  position: relative;
  background-color: var(--color-white);
  border-radius: 80px 80px 0 0;
  font-size: clamp(15px, 0.94vw, 18px);
}

/* ページトップボタン
   ・スクロール中は画面右下に小さく付いてくる（.is-floating）
   ・フッターまで来たら、フッター上端にまたがる位置で止まり、Figmaの大きさに戻る
   ・ページ上部では非表示（.is-visible が無い間）
   切り替えは js/include.js が行います。 */
.pagetop {
  --dock-top: -64px;           /* フッターで止まった時の位置（フッター上端から） */
  --dock-size: 140px;          /* フッターで止まった時の大きさ（Figmaの値） */
  --float-size: 88px;          /* スクロール中の大きさ */
  --float-bottom: 24px;        /* スクロール中の画面下からの距離 */
  position: absolute;
  top: var(--dock-top);
  right: max(16px, calc(var(--side-margin) - 60px));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: var(--dock-size);
  height: var(--dock-size);
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-white);
  transition: width 0.3s, height 0.3s, opacity 0.3s, transform 0.3s, background-color 0.2s;
}
.pagetop:hover {
  background-color: var(--color-main-dark);
}
.pagetop.is-floating {
  position: fixed;
  top: auto;
  bottom: var(--float-bottom);
  gap: 4px;
  width: var(--float-size);
  height: var(--float-size);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pagetop.is-floating:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
}
.pagetop__arrow {
  width: 12px;
  height: 16px;
}
.pagetop__text {
  font-size: 1rem;
  line-height: 1.5;
}
.pagetop.is-floating .pagetop__text {
  font-size: 0.8125rem;        /* 13px */
}

/* 会社情報＋サイトマップ（横並び） */
.footer__inner {
  display: flex;
  gap: 32px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 96px var(--side-margin) 0;
  box-sizing: content-box;
}

/* 会社情報 */
.footer__info {
  flex: 0 0 auto;
  width: clamp(300px, 19.6vw, 376px);
}
.footer__logo img {
  width: 200px;
  height: auto;
}
.footer__company {
  margin-top: 40px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  word-break: keep-all;        /* 日本語の途中で改行せず、スペースの位置で改行 */
}
.footer__address {
  margin-top: 24px;
}
.footer__access {
  margin-top: 12px;
  padding-left: 16px;
  border-left-style: solid;  /* 色は .border-main で指定（ここで色まで書くと上書きされるので幅と線種のみ） */
  border-left-width: 1px;
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 400;
  line-height: 1.5;
}
.footer__tel {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 24px;
  font-size: clamp(14px, 0.83vw, 16px);
  font-weight: 400;
  line-height: 1.5;
}
.footer__sns {
  display: flex;
  gap: 24px;
  margin-top: 56px;
}
.footer__sns-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-bg-gray);
  transition: opacity 0.2s;
}
.footer__sns-link:hover {
  opacity: 0.7;
}
.footer__sns-link img {
  width: 32px;
  height: 32px;
}

/* サイトマップ（4列。1920px幅で Figma と同じ列位置になる幅指定） */
.footer__nav {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(max-content, 228px)
    minmax(min-content, 379px)
    minmax(max-content, 188px)
    minmax(max-content, 188px);
  column-gap: clamp(24px, calc(5.8vw - 55px), 56px);  /* 1920px幅で56px、狭いほど詰める */
  row-gap: 56px;
  align-content: start;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
}
.footer__col {
  white-space: nowrap;
}
.footer__col:nth-child(2) {   /* グループ一覧は社名が長いので、狭い時はスペースで改行 */
  white-space: normal;
  word-break: keep-all;
}
.footer__heading {
  margin-bottom: 24px;
}
.footer__list--sub a {
  color: var(--color-text-light);
}
.footer__list--main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__list--wide {
  gap: 16px;
}
.footer__nav a:hover {
  color: var(--color-main);
}

/* キャッチコピー（ここだけ画面幅いっぱいの大きな英字） */
.footer__catch {
  margin-top: 92px;
  padding-inline: 1.2%;
  font-size: min(6.1vw, 120px);   /* 1920px幅で約120px。スクロールバー分の余裕を見て6.1vw */
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--color-text);
}

/* 最下部の緑帯（中身は会社情報と同じ幅） */
.footer__bottom {
  margin-top: 48px;
  color: var(--color-white);
}
.footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: 30px var(--side-margin) 29px;
  box-sizing: content-box;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.footer__copyright {
  font-size: inherit;
}

/* ===== ⑤-1 ヘッダー：1279px以下（ハンバーガー＋ドロワー） ============= */
@media (max-width: 1279px) {
  :root {
    --header-height: 88px;
  }

  /* ヘッダーを画面上部に固定 */
  .header {
    position: sticky;
    top: 0;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
  }
  .header__logo img {
    width: 131px;
  }

  /* PC用パーツを隠し、ハンバーガーを表示 */
  .header__right,
  .side-nav {
    display: none;
  }
  .drawer-toggle {
    display: flex;
  }

  /* --- ドロワー本体 --- */
  .drawer {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0 auto;   /* ヘッダー下〜画面下まで、右寄せ */
    width: min(100%, 480px);
    z-index: 90;
    background-color: var(--color-bg);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    transform: translateX(100%);             /* 初期は画面右外に隠す */
    transition: transform 0.3s ease, visibility 0.3s;
  }
  .drawer.is-open {
    visibility: visible;
    transform: translateX(0);
  }
  .drawer__inner {
    padding: 8px 16px 32px;
  }

  /* メインナビ（区切り線付きリスト） */
  .drawer__link {
    display: block;
    padding: 18px 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
  }

  /* サブリンク（うすい緑の枠） */
  .drawer__sub {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 24px 0;
    padding: 20px 24px;
    border-radius: 10px;
  }
  .drawer__sub-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
  }
  .drawer__sub-link .icon {
    width: 24px;
    height: 24px;
  }

  /* 電話（タップで発信） */
  .drawer-tel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 20px;
    color: var(--color-text);
  }
  .drawer-tel__row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .drawer-tel__icon {
    width: 26px;
    height: 26px;
  }
  .drawer-tel__num {
    font-size: 1.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .drawer-tel__hours {
    font-size: var(--fs-sm);
    color: var(--color-text);
  }

  /* 背景の暗幕 */
  .drawer-overlay {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: 80;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ドロワーを開いている間は背面をスクロールさせない */
  body.is-drawer-open {
    overflow: hidden;
  }
}

/* ===== ⑤ スマホ（768px以下）：共通 ================================= */
@media (max-width: 768px) {
  :root {
    --fs-2xl: 1.75rem;
    --fs-xl:  1.375rem;
  }

  .section {
    padding-block: 40px;
  }

  .header__inner {
    padding-inline: 16px;
  }
  .drawer {
    width: 100%;
  }
}

/* ===== ⑤-2 CONTACT US・フッター：小さめのPC（1024〜1279px） =============
   会社情報とメニューの横並びは保ち、メニューだけ 2列×2段 に折り返す */
@media (max-width: 1279px) {
  .footer__nav {
    grid-template-columns: minmax(max-content, auto) minmax(min-content, auto);
  }
}

/* ===== ⑤-3 CONTACT US・フッター：タブレット（769〜1023px） ============== */
@media (max-width: 1023px) {
  .cta {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-tel {
    width: 100%;
    max-width: 526px;
  }
  .footer__inner {
    flex-direction: column;
    gap: 56px;
  }
  .footer__info {
    width: auto;
  }
  /* メニューは ⑤-2 の 2列×2段 のまま */
}

/* ===== ⑤-4 CONTACT US・フッター：スマホ（768px以下） ================== */
@media (max-width: 768px) {
  /* --- CONTACT US --- */
  .cta-area {
    padding: 80px 16px 92px;
  }
  .cta {
    align-items: stretch;
    gap: 28px;
    padding: 40px 18px 51px;
    background-image: url("../assets/images/cta_bg_sp.jpg");
  }
  .cta__title {
    font-size: min(3.0625rem, 12.5vw);  /* 49px（狭い画面では縮小） */
  }
  .cta__lead {
    margin-top: 8px;
    font-size: 0.875rem;       /* 14px */
    font-weight: 400;
    line-height: 1.5;
  }
  .cta__link {
    margin-top: 28px;
    font-size: 1rem;
  }
  .cta-tel {
    max-width: none;
    padding: 20px 17px 22px;
  }
  .cta-tel__label {
    font-size: 1.125rem;       /* 18px */
  }
  .cta-tel__num {
    gap: 6px;
    margin-top: 8px;
    font-size: 2.375rem;       /* 38px */
  }
  .cta-tel__icon {
    width: 30px;
  }
  .cta-tel__hours {
    margin-top: 11px;
    font-size: 1rem;
  }

  /* --- フッター --- */
  .footer {
    border-radius: 40px 40px 0 0;
    font-size: 1rem;
  }
  .pagetop {
    --dock-top: -49px;
    --dock-size: 100px;
    --float-size: 64px;
    --float-bottom: 16px;
    right: 16px;
    gap: 4px;
  }
  .pagetop:not(.is-floating) {
    right: 36px;
  }
  .pagetop.is-floating .pagetop__text {
    font-size: 0.6875rem;      /* 11px */
  }
  .footer__inner {
    gap: 64px;
    padding: 104px 24px 0;
  }
  .footer__logo {
    display: block;
    text-align: center;
  }
  .footer__logo img {
    display: inline-block;
    width: 206px;
  }
  .footer__company {
    margin-top: 38px;
    font-size: 1.125rem;
  }
  .footer__address {
    font-size: 1rem;
  }
  .footer__access {
    padding-left: 30px;
    font-size: 0.875rem;
  }
  .footer__tel {
    font-size: 0.875rem;
  }
  .footer__sns {
    justify-content: center;
    margin-top: 40px;
  }
  .footer__nav {
    grid-template-columns: 1fr;
  }
  .footer__catch {
    margin-top: 120px;
    padding-inline: 5px;
    font-size: min(18vw, 120px);  /* 390px幅で約70px（Figmaは73px）。単語ごとに改行される */
    text-align: left;
    white-space: normal;
  }
  .footer__bottom {
    margin-top: 64px;
  }
  .footer__bottom-inner {
    flex-direction: column;
    padding: 48px 24px 56px;
  }
}