/* ============================================================
  ゴルフコンペLP スタイルシート

  【スケーリングルール】
  PC基準: 1366px  ／  SP基準: 390px
  ブレークポイント: 1024px 以下でSPレイアウト
  最大幅: 1920px（それ以上はスケーリング停止・中央寄せ）

  【数値管理の方法】
  各要素冒頭に --pc-XXX / --sp-XXX 変数でFigmaのpx値を定義する。
  実際の計算は以下の形式：

    PC: calc(var(--pc-XXX) * var(--vw) / var(--base-pc))
    SP: calc(var(--sp-XXX) * 100vw   / var(--base-sp))

  --vw は JS が window.innerWidth を 1920px でクランプして px 単位で設定する。
  → フォールバック（JS未実行時）は 100vw。

  ※ 1pxのボーダー / 極小の余白など視認性に影響するものは px 固定。
============================================================ */


/* ============================================================
  0. リセット & ベース
============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-black);
  background: var(--color-white);
  overflow-x: hidden;
  /* 1920px超では中央寄せ（JSで body.is-capped クラスを付与） */
}

body.is-capped {
  display: flex;
  flex-direction: column;
  align-items: center;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

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

ul, ol { list-style: none; }

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


/* ============================================================
  1. CSS変数（デザイントークン）
============================================================ */
:root {
  /* ===== スケーリング基準値 ===== */
  --base-pc: 1366;
  --base-sp: 390;

  /*
    --vw: JSが window.innerWidth を 1920px でクランプして設定する (px単位)
    例) viewport 1200px → --vw: 1200px
        viewport 2000px → --vw: 1920px（上限）
    フォールバック: JSが未実行の場合は 100vw を使う
  */
  --vw: 100vw;

  /* ===== カラーパレット ===== */
  --color-yellow:   #dcfe00;
  --color-green:    #40801d;
  --color-black:    #1a1a1a;
  --color-white:    #ffffff;
  --color-gray-bg:  #f3f2f0;
  --color-footer:   #424242;
  --color-overlay:  #083b04;

  /* ===== シャドウ ===== */
  --shadow-green:   0 0 20px 0 #034003;
  --shadow-card:    0 0 20px 0 #034003;
  --shadow-merit:   0 0 15px 0 rgba(40, 108, 125, 0.3);
  --shadow-slide:   0 0 10px 0 rgba(0, 0, 0, 0.5);

  /* ===== フォント ===== */
  --font-ja: 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;
}


/* ============================================================
  2. ヘッダー

  Figma参照 (PC / 1366px):
    height:     100px
    ロゴ:       left 24px  /  width 96px  /  height 57.571px
    ナビ:       font-size 16px  /  gap 42px  /  weight 500
    CTAボタン:  width 268px  /  height 68px  /  right 16px  /  top 16px
                border-radius 50px  /  bg #dcfe00
                font-size 20px  /  weight 700  /  letter-spacing 0.6px

  Figma参照 (SP / 390px):
    height:     60px
    ロゴ:       left 16px  /  height 38px  /  width 64px
    SP-CTA:     "無料相談"  /  width 118px  /  height 40px  /  right 60px
    ハンバーガー: width 60px  /  right 0px
============================================================ */

/* -- ヘッダー外枠 -- */
.site-header {
  --pc-h: 100;   /* Figma PC: ヘッダー高さ */
  --sp-h: 60;    /* Figma SP: ヘッダー高さ */

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* FV時（デフォルト）: 透明 */
.site-header.is-fv {
  background: transparent;
}

/* スクロール後: 白 */
.site-header.is-scrolled {
  background: var(--color-white);
  width: 100%;
}

/* 1920px超ではヘッダーも中央寄せ (JSで制御) */
.site-header.is-capped {
  left: 50%;
  transform: translateX(-50%);
  /* JSが --vw を 1920px に固定するので幅は自動的に 1920px になる */
}

/* -- ヘッダー内部レイアウト -- */
.header-inner {
  --pc-pad-l: 24;   /* Figma PC: ロゴの left 値をそのまま左パディングに利用 */
  --pc-pad-r: 16;   /* Figma PC: CTAの right 値をそのまま右パディングに利用 */

  display: flex;
  align-items: center;
  height: 100%;
  padding-left:  calc(var(--pc-pad-l) * var(--vw)   / var(--base-pc));
  padding-right: calc(var(--pc-pad-r) * var(--vw)   / var(--base-pc));
  gap: 0;
}

/* -- ロゴ -- */
.header-logo {
  --pc-logo-w: 96;   /* Figma PC: ロゴ幅 */
  --pc-logo-h: 57;   /* Figma PC: ロゴ高さ (57.571px) */

  display: flex;
  align-items: center;
  flex-shrink: 0;
  width:  calc(var(--pc-logo-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-logo-h) * var(--vw) / var(--base-pc));
}

.header-logo__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ロゴ切り替え: FV時 = white / スクロール後 = dark */
.header-logo__img--white { display: block; }
.header-logo__img--dark  { display: none;  }

.site-header.is-scrolled .header-logo__img--white { display: none;  }
.site-header.is-scrolled .header-logo__img--dark  { display: block; }

/* -- グローバルナビ（PCのみ） -- */
.header-nav {
  --pc-nav-gap:  42;   /* Figma PC: ナビリンク間隔 */
  --pc-nav-size: 16;   /* Figma PC: フォントサイズ */

  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  gap: calc(var(--pc-nav-gap) * var(--vw) / var(--base-pc));
}

.header-nav__link {
  --pc-nav-size: 16;

  font-family: var(--font-ja);
  font-weight: 500;
  font-size: calc(var(--pc-nav-size) * var(--vw) / var(--base-pc));
  line-height: 1;
  white-space: nowrap;
  color: var(--color-white);
  transition: opacity 0.2s;
}

.header-nav__link:hover { opacity: 0.7; }

.site-header.is-scrolled .header-nav__link { color: var(--color-black); }

/* -- ヘッダーCTAボタン（PC） -- */
.header-cta {
  --pc-cta-w:      268;   /* Figma PC: CTAボタン幅 */
  --pc-cta-h:       68;   /* Figma PC: CTAボタン高さ */
  --pc-cta-radius:  50;   /* Figma PC: border-radius */
  --pc-cta-size:    20;   /* Figma PC: フォントサイズ */
  --pc-cta-ls:     0.6;   /* Figma PC: letter-spacing */
  --pc-cta-gap:      8;   /* アイコン〜テキスト間隔 */

  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap:    calc(var(--pc-cta-gap)    * var(--vw) / var(--base-pc));
  width:  calc(var(--pc-cta-w)      * var(--vw) / var(--base-pc));
  height: calc(var(--pc-cta-h)      * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-cta-radius) * var(--vw) / var(--base-pc));
  background: var(--color-yellow);
  color: var(--color-black);
  transition: background 0.2s, color 0.2s;
}

.header-cta:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.header-cta__icon {
  --pc-icon-w: 19;   /* Figma PC: 矢印アイコン幅 */
  --pc-icon-h: 15;   /* Figma PC: 矢印アイコン高さ */

  flex-shrink: 0;
  width:  calc(var(--pc-icon-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-icon-h) * var(--vw) / var(--base-pc));
}

.header-cta__text {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--pc-cta-size) * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-cta-ls)   * var(--vw) / var(--base-pc));
  color: inherit;
  white-space: nowrap;
  line-height: 1;
}

/* -- SP「無料相談」ボタン -- */
.header-cta-sp {
  --sp-cta-w:      118;   /* Figma SP: ボタン幅 */
  --sp-cta-h:       40;   /* Figma SP: ボタン高さ */
  --sp-cta-radius:  50;
  --sp-cta-size:    16;   /* Figma SP: フォントサイズ */
  --sp-cta-ls:    0.48;

  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width:  calc(var(--sp-cta-w)      * 100vw / var(--base-sp));
  height: calc(var(--sp-cta-h)      * 100vw / var(--base-sp));
  border-radius: calc(var(--sp-cta-radius) * 100vw / var(--base-sp));
  background: var(--color-yellow);
}

.header-cta-sp__text {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--sp-cta-size) * 100vw / var(--base-sp));
  letter-spacing: calc(var(--sp-cta-ls)   * 100vw / var(--base-sp));
  color: var(--color-black);
  white-space: nowrap;
  line-height: 1;
}

/* -- ハンバーガーボタン（SP） -- */
.header-hamburger {
  --sp-burger-w:  60;   /* Figma SP: タップエリア幅 */
  --sp-burger-h:  60;   /* Figma SP: タップエリア高さ */
  --sp-line-w:    24;   /* ライン幅 */
  --sp-line-gap:   6;   /* ライン間隔 */

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--sp-line-gap) * 100vw / var(--base-sp));
  width:  calc(var(--sp-burger-w) * 100vw / var(--base-sp));
  height: calc(var(--sp-burger-h) * 100vw / var(--base-sp));
  flex-shrink: 0;
}

.header-hamburger__line {
  display: block;
  width:  calc(var(--sp-line-w) * 100vw / var(--base-sp));
  height: 2px;   /* 視認性のため px 固定 */
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ハンバーガー → ✕ */
.site-header.is-open .header-hamburger__line:nth-child(1) {
  transform: translateY(calc((var(--sp-line-gap) * 100vw / var(--base-sp)) + 2px)) rotate(45deg);
}
.site-header.is-open .header-hamburger__line:nth-child(2) { opacity: 0; }
.site-header.is-open .header-hamburger__line:nth-child(3) {
  transform: translateY(calc(-1 * ((var(--sp-line-gap) * 100vw / var(--base-sp)) + 2px))) rotate(-45deg);
}


/* ============================================================
  3. SPドロワーメニュー
============================================================ */
.sp-menu {
  --sp-pad-x:   24;
  --sp-pt:      80;   /* ヘッダー高さ分のオフセット */
  --sp-link-size: 20;
  --sp-link-py:   24;

  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  z-index: 99;
  flex-direction: column;
  padding-top:   calc(var(--sp-pt)    * 100vw / var(--base-sp));
  padding-left:  calc(var(--sp-pad-x) * 100vw / var(--base-sp));
  padding-right: calc(var(--sp-pad-x) * 100vw / var(--base-sp));
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.sp-menu.is-open { transform: translateX(0); }

.sp-menu__nav { display: flex; flex-direction: column; }

.sp-menu__link {
  display: block;
  font-family: var(--font-ja);
  font-weight: 500;
  font-size:      calc(var(--sp-link-size) * 100vw / var(--base-sp));
  color: var(--color-black);
  padding-top:    calc(var(--sp-link-py) * 100vw / var(--base-sp));
  padding-bottom: calc(var(--sp-link-py) * 100vw / var(--base-sp));
  border-bottom: 1px solid var(--color-gray-bg);   /* 1px 固定 */
}

.sp-menu__cta {
  --sp-mt:      32;
  --sp-h:       60;
  --sp-radius:  50;
  --sp-size:    18;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top:    calc(var(--sp-mt)     * 100vw / var(--base-sp));
  height:        calc(var(--sp-h)      * 100vw / var(--base-sp));
  border-radius: calc(var(--sp-radius) * 100vw / var(--base-sp));
  background: var(--color-yellow);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(var(--sp-size) * 100vw / var(--base-sp));
  color: var(--color-black);
}


/* ============================================================
  4. MV（ファーストビュー）
============================================================ */
.mv {
  --pc-h: 768;   /* Figma PC: MV高さ */
  --sp-h: 700;   /* Figma SP: MV高さ */

  position: relative;
  width: 100%;
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  overflow: hidden;
}

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

/* picture要素もコンテナを埋めるようにする */
.mv__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

.mv__copy {
  --pc-left: 120;   /* Figma PC: left */
  --pc-top:  176;   /* Figma PC: top */
  --pc-gap:   10;   /* Figma PC: catch〜desc の gap */

  position: absolute;
  left: calc(var(--pc-left) * var(--vw) / var(--base-pc));
  top:  calc(var(--pc-top)  * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  gap:  calc(var(--pc-gap)  * var(--vw) / var(--base-pc));
  color: var(--color-white);
}

.mv__catch {
  --pc-size: 50;   /* Figma PC: フォントサイズ */
  --pc-lh:   68;   /* Figma PC: line-height */

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
}

.mv__desc {
  --pc-size: 20;   /* Figma PC: フォントサイズ */
  --pc-lh:   32;   /* Figma PC: line-height */

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
}

/* PC では SP用改行を非表示 */
.mv__br--sp { display: none; }


.mv__slide {
  --pc-top: 552;   /* Figma PC: スライド top */
  --pc-h:   193;   /* Figma PC: スライド高さ */

  position: absolute;
  left: 0;
  top:    calc(var(--pc-top) * var(--vw) / var(--base-pc));
  width: 100%;
  height: calc(var(--pc-h)  * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.mv__slide-track {
  --pc-gap: 19;   /* Figma PC: アイテム間隔 (309 - 290 = 19) */

  display: flex;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
  height: 100%;
  will-change: transform;
}

.mv__slide-item {
  --pc-w:      290;   /* Figma PC: アイテム幅 */
  --pc-h:      193;   /* Figma PC: アイテム高さ */
  --pc-radius:  10;   /* Figma PC: border-radius */

  flex-shrink: 0;
  width:  calc(var(--pc-w)      * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h)      * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  overflow: hidden;
  box-shadow: var(--shadow-slide);
}

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


/* ============================================================
  5. セクション共通
============================================================ */
.concerns,
.works,
.merit,
.flow,
.faq,
.cta-section,
.other-services {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* お悩みセクションのV字底部を制作物一例の背景画像より前面に表示 */
.concerns {
  z-index: 1;
}


/* ============================================================
  6. 共通コンポーネント: セクション見出し

  Figma参照 (PC / 1366px):
    英語ラベル:   Montserrat Bold / 24px / #40801d
    日本語見出し: Noto Sans JP Bold / 32px / #1a1a1a
    装飾ライン:   width 160px / height 8px
    ブロック内 gap: 24px (外), 25px (内)

  Figma参照 (SP / 390px):
    英語ラベル:   20px
    日本語見出し: 24px
    装飾ライン:   width 116px / height 6px
    ブロック内 gap: 20px
============================================================ */
.section-heading {
  --pc-gap: 24;   /* Figma PC: ブロック全体の縦gap */
  --sp-gap: 20;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.section-heading__en {
  --pc-size: 24;

  font-family: var(--font-en);
  font-weight: 700;
  font-size: calc(var(--pc-size) * var(--vw) / var(--base-pc));
  color: var(--color-green);
  text-transform: uppercase;
  line-height: 1;
}

.section-heading__ja-wrap {
  --pc-gap: 25;   /* Figma PC: 日本語タイトルと装飾ラインの間 */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.section-heading__ja {
  --pc-size: 32;

  font-family: var(--font-ja);
  font-weight: 700;
  font-size: calc(var(--pc-size) * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}

.section-heading__deco {
  --pc-w: 160;
  --pc-h:   8;

  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  overflow: hidden;
}

.section-heading__deco img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}


/* ============================================================
  7. 共通コンポーネント: CTAボタン（ページ下部・大）

  Figma参照 (PC / 1366px):
    width 420px / height 76px / border-radius 50px
    bg #dcfe00 / box-shadow 0 0 20px #034003
    font-size 20px / weight 700 / letter-spacing 0.6px

  Figma参照 (SP / 390px):
    width 342px / height 76px（同仕様）
============================================================ */
.btn-cta {
  --pc-w:       420;
  --pc-h:        76;
  --pc-radius:   50;
  --pc-size:     20;
  --pc-ls:      0.6;
  --pc-gap:      10;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:    calc(var(--pc-gap)    * var(--vw) / var(--base-pc));
  width:  calc(var(--pc-w)      * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h)      * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  background: var(--color-yellow);
  box-shadow: var(--shadow-green);
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-cta:hover { opacity: 0.85; }

.btn-cta__icon {
  --pc-icon-w: 19;
  --pc-icon-h: 15;

  flex-shrink: 0;
  width:  calc(var(--pc-icon-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-icon-h) * var(--vw) / var(--base-pc));
}


/* ============================================================
  8. フッター

  Figma参照 (PC / 1366px):
    height 96px / bg #424242
    padding: top 19px / bottom 19px / left 128px / right 121px
    コンテンツ幅: 1117px (1366 - 128 - 121)
    ロゴ: 96px × 57.571px
    リンク行: gap 48px / font-size 16px Bold / letter-spacing 0.48px
    コピーライト: font-size 14px / letter-spacing 0.42px

  Figma参照 (SP / 390px):
    height auto / padding: 30px 24px
    縦並び: ロゴ → リンク行 → コピーライト (gap 20px)
    コピーライト: font-size 12px / letter-spacing 0.36px
============================================================ */

.site-footer {
  --pc-h:   96;    /* Figma PC: フッター高さ */
  --pc-pl:  128;   /* Figma PC: padding-left */
  --pc-pr:  121;   /* Figma PC: padding-right */
  --pc-pv:   19;   /* Figma PC: padding 上下 */

  width: 100%;
  background: var(--color-footer);
  color: var(--color-white);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height:         calc(var(--pc-h)  * var(--vw) / var(--base-pc));
  padding-top:    calc(var(--pc-pv) * var(--vw) / var(--base-pc));
  padding-bottom: calc(var(--pc-pv) * var(--vw) / var(--base-pc));
  padding-left:   calc(var(--pc-pl) * var(--vw) / var(--base-pc));
  padding-right:  calc(var(--pc-pr) * var(--vw) / var(--base-pc));
}

/* -- フッターロゴ -- */
.footer-logo {
  --pc-logo-w: 96;
  --pc-logo-h: 57;   /* 57.571px */

  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.footer-logo__img {
  width:  calc(var(--pc-logo-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-logo-h) * var(--vw) / var(--base-pc));
  object-fit: contain;
}

/* -- フッター右カラム -- */
.footer-right {
  --pc-gap: 23;    /* Figma PC: リンク行 ↔ コピーライト gap */
  --pc-w:   282;   /* Figma PC: 右カラム幅 */

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap:   calc(var(--pc-gap) * var(--vw) / var(--base-pc));
  width: calc(var(--pc-w)   * var(--vw) / var(--base-pc));
}

/* -- リンク行 -- */
.footer-links {
  --pc-gap:  48;     /* Figma PC: リンク間 gap */
  --pc-size: 16;     /* Figma PC: フォントサイズ */
  --pc-ls:   0.48;   /* Figma PC: letter-spacing */

  display: flex;
  align-items: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.footer-link {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-decoration: underline;
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.2s;
}

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

/* -- コピーライト -- */
.footer-copyright {
  --pc-size: 14;     /* Figma PC: フォントサイズ */
  --pc-ls:   0.42;   /* Figma PC: letter-spacing */

  font-family: var(--font-ja);
  font-weight: 400;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  white-space: nowrap;
  line-height: 1;
}


/* ============================================================
  9. お悩みセクション

  Figma参照 (PC / 1366px):
    height: 875px / py: 120px
    タイトルブロック: w 624px / gap 32px
      banner pill: 624×71px / radius 50px / bg #dcfe00 / font 32px
      arrow: 35×18px
      heading: 48px / white / text-shadow 0 0 20px #034003
    inner container: w 1120px / gap 64px
    cards: flex-wrap / gap 32px / 3-col
      card: 352×180px / radius 10px / shadow 0 0 20px #034003
      icon: 40×40px / absolute top-left (14px, 17px)
      text: absolute inset-0 / centered / 24px / lh 34px

  Figma参照 (SP / 390px):
    height: 1071px / pt: 60px
    banner: 342×80px / font 24px / 2 lines
    arrow: 33×18px
    heading: 32px / lh 42px
    cards: 342px wide / flex-col / gap 16px
      card: 342×106px / radius 10px
      icon: 40×40px / absolute left 17px vertically-centered
      text: 20px / lh 30px
============================================================ */
.concerns {
  height: calc(875 * var(--vw) / var(--base-pc));
  /* PNGの自然な透明V字コーナーにworksが届くよう十分な負margin */
  margin-bottom: calc(-140 * var(--vw) / var(--base-pc));
}

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

.concerns__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.concerns__inner {
  position: relative;
  width: calc(1120 * var(--vw) / var(--base-pc));
  margin: 0 auto;
  padding-top: calc(120 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(64 * var(--vw) / var(--base-pc));
}

/* タイトルブロック（バナー + 見出し） */
.concerns__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--vw) / var(--base-pc));
}

.concerns__banner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.concerns__banner-pill {
  width:         calc(624 * var(--vw) / var(--base-pc));
  height:        calc(71  * var(--vw) / var(--base-pc));
  border-radius: calc(50  * var(--vw) / var(--base-pc));
  background: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(32 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
  line-height: 1;
}

.concerns__banner-arrow {
  width:  calc(35 * var(--vw) / var(--base-pc));
  height: calc(18 * var(--vw) / var(--base-pc));
}

.concerns__heading {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size:   calc(48 * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-align: center;
  text-shadow: 0 0 20px #034003;
  line-height: 1;
}

/* カードグリッド */
.concerns__cards {
  display: flex;
  flex-wrap: wrap;
  gap: calc(32 * var(--vw) / var(--base-pc));
  width: 100%;
}

.concerns__card {
  position: relative;
  width:         calc(352 * var(--vw) / var(--base-pc));
  height:        calc(180 * var(--vw) / var(--base-pc));
  border-radius: calc(10  * var(--vw) / var(--base-pc));
  background: var(--color-white);
  box-shadow: var(--shadow-card);
}

.concerns__card-icon {
  position: absolute;
  top:    calc(14 * var(--vw) / var(--base-pc));
  left:   calc(17 * var(--vw) / var(--base-pc));
  width:  calc(40 * var(--vw) / var(--base-pc));
  height: calc(40 * var(--vw) / var(--base-pc));
}

.concerns__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.concerns__card-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(24 * var(--vw) / var(--base-pc));
  line-height: calc(34 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
}

/* 各行をflex itemとして扱うためdisplay:block */
.concerns__card-text span {
  display: block;
}


/* ============================================================
  10. 制作物一例セクション

  Figma参照 (PC / 1366px):
    pt: 180px / pb: 125px / px: 123px
    キャッチコピー: 52px / font-black / white / line-height 70px
    gap（キャッチ〜白カード）: 110px
    白カード: w 1120px / py 120px / px 70px / radius 30px / gap 56px
    worksグリッド: 3col / 312×207px / gap-x 22px / gap-y 32px
    ラベル: 20px / bold / black / left / mt 16px
    注釈: 14px / medium / bottom-aligned / h 207px

  Figma参照 (SP / 390px):
    py: 60px
    キャッチコピー: 32px / font-black / white / line-height 42px / h 233px
    白カード: w 342px / py 56px / px 24px / radius 10px / gap 42px
    worksグリッド: 2col / 140px wide / img h 92px / gap-x 14px / gap-y 32px
    ラベル: 14px / bold / left / mt 8px
    注釈: 12px / medium / center / span 2 cols
============================================================ */

/* セクション背景: 上部に写真、下部はグリーン */
.works {
  background-color: #40801d;
}

/* 背景写真コンテナ: Figma PC h=647px / 画像はコンテナより大きくトリミング */
.works__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(647 * var(--vw) / var(--base-pc));
  overflow: hidden;
}

/* Figma PC: h=146.95% / w=103.41% / left=-3.37% / top=-31.82% */
.works__bg-img {
  position: absolute;
  width:  103.41%;
  height: 146.95%;
  left:   -3.37%;
  top:    -31.82%;
  max-width: none;
  display: block;
}

/* グリーングラデーション: Figma PC top=456px / h=1240px / 透明→グリーン(7.09%) */
.works__gradient {
  position: absolute;
  left: 0;
  right: 0;
  top:    calc(456  * var(--vw) / var(--base-pc));
  height: calc(1240 * var(--vw) / var(--base-pc));
  background: linear-gradient(to bottom, rgba(64, 128, 29, 0) 0%, #40801d 7.09%);
}

/* インナー: flex縦並び・中央揃え */
.works__inner {
  position: relative;
  width: 100%;
  padding-top:    calc(180 * var(--vw) / var(--base-pc));
  padding-bottom: calc(125 * var(--vw) / var(--base-pc));
  padding-left:   calc(123 * var(--vw) / var(--base-pc));
  padding-right:  calc(123 * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(110 * var(--vw) / var(--base-pc));
}

/* キャッチコピー */
.works__catch {
  font-family: var(--font-ja);
  font-weight: 900;
  font-size:   calc(52 * var(--vw) / var(--base-pc));
  line-height: calc(70 * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-align: center;
  text-shadow: 0 0 20px #034003;
}

.works__catch-br--sp {
  display: none;
}

/* 白カード */
.works__card {
  padding-top:    calc(120 * var(--vw) / var(--base-pc));
  padding-bottom: calc(120 * var(--vw) / var(--base-pc));
  padding-left:   calc(70  * var(--vw) / var(--base-pc));
  padding-right:  calc(70  * var(--vw) / var(--base-pc));
  border-radius:  calc(30  * var(--vw) / var(--base-pc));
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--vw) / var(--base-pc));
}

/* グリッド */
.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(22 * var(--vw) / var(--base-pc));
  row-gap:    calc(32 * var(--vw) / var(--base-pc));
  width: 100%;
}

/* グリッドアイテム */
.works__item-img {
  width:         calc(312 * var(--vw) / var(--base-pc));
  height:        calc(207 * var(--vw) / var(--base-pc));
  border-radius: calc(10  * var(--vw) / var(--base-pc));
  overflow: hidden;
}

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

.works__item-label {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(20 * var(--vw) / var(--base-pc));
  margin-top:  calc(16 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: left;
}

/* 注釈テキスト */
.works__note {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size:   calc(14 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  display: flex;
  align-items: flex-end;
  height: calc(207 * var(--vw) / var(--base-pc));
}


/* ============================================================
  11. メリットセクション

  Figma参照 (PC / 1366px):
    height: 675px
    bg: merit-bg.webp (h=159.37%, top=-54.34%)
    見出し: pt=110 / px=113
    カード行: mt=46 / gap=32 / card py=40 / gap=30 / radius=10
============================================================ */
.merit__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* picture はインライン要素なので block 化して絶対配置の基準にする */
.merit__bg picture {
  display: block;
  position: absolute;
  inset: 0;
}

.merit__bg-img {
  position: absolute;
  top: -54.34%;
  left: 0;
  width: 100%;
  height: 159.37%;
  object-fit: cover;
  object-position: center top;
}

.merit__inner {
  --pc-pt:    110;
  --pc-pb:    110;
  --pc-pad-x: 113;

  position: relative;
  width: 100%;
  padding-top:    calc(var(--pc-pt)    * var(--vw) / var(--base-pc));
  padding-bottom: calc(var(--pc-pb)    * var(--vw) / var(--base-pc));
  padding-left:   calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
  padding-right:  calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
}

.merit__cards {
  --pc-mt:  46;
  --pc-gap: 32;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: calc(var(--pc-mt)  * var(--vw) / var(--base-pc));
  gap:        calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.merit__card {
  --pc-py:     40;
  --pc-px:     0;
  --pc-gap:    30;
  --pc-radius: 10;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap:           calc(var(--pc-gap)    * var(--vw) / var(--base-pc));
  padding-top:   calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  padding-bottom:calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  padding-left:  calc(var(--pc-px)     * var(--vw) / var(--base-pc));
  padding-right: calc(var(--pc-px)     * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  background: var(--color-white);
  box-shadow: var(--shadow-merit);
}

.merit__card-icon {
  --pc-icon: 40;
  position: relative;
  width:  calc(var(--pc-icon) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-icon) * var(--vw) / var(--base-pc));
  flex-shrink: 0;
}

.merit__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


.merit__card-title {
  --pc-size: 24;
  --pc-lh:   36;

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-green);
  text-align: center;
}

.merit__card-text {
  --pc-size: 16;
  --pc-lh:   24;

  font-family: var(--font-ja);
  font-weight: 500;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
}


/* ============================================================
  12. ご依頼の流れセクション

  Figma参照 (PC / 1366px):
    height: ~660px
    5 steps flex-row / gap 10px / each step 200×269px / radius 10px / bg gray
============================================================ */
.flow {
  background: var(--color-white);
}

.flow__inner {
  --pc-pt:    118;
  --pc-pb:    89;
  --pc-pad-x: 122;

  position: relative;
  width: 100%;
  padding-top:    calc(var(--pc-pt)    * var(--vw) / var(--base-pc));
  padding-bottom: calc(var(--pc-pb)    * var(--vw) / var(--base-pc));
  padding-left:   calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
  padding-right:  calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
}

.flow__steps {
  --pc-mt:  56;
  --pc-gap: 10;

  display: flex;
  align-items: stretch;
  margin-top: calc(var(--pc-mt)  * var(--vw) / var(--base-pc));
  gap:        calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.flow__step {
  --pc-h:      269;
  --pc-radius:  10;
  --pc-py:      42;
  --pc-gap:     20;

  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap:            calc(var(--pc-gap)    * var(--vw) / var(--base-pc));
  min-height:     calc(var(--pc-h)      * var(--vw) / var(--base-pc));
  padding-top:    calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  padding-bottom: calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  border-radius:  calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  background: var(--color-gray-bg);
}

.flow__arrow {
  --pc-w: 11;
  --pc-h: 19;

  display: flex;
  align-items: center;
  flex-shrink: 0;
  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  align-self: center;
}

.flow__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: rotate(180deg); /* 元SVGは左向きなので右向きに反転 */
}

.flow__step-icon {
  --pc-icon: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(var(--pc-icon) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-icon) * var(--vw) / var(--base-pc));
  flex-shrink: 0;
}

/* SVGが preserveAspectRatio="none" のため、
   CSS の aspect-ratio で viewBox 比率を指定し歪みを防ぐ */
.flow__step-icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.flow__step-icon img[src*="icon-mail"]    { aspect-ratio: 34 / 22; }
.flow__step-icon img[src*="icon-meeting"] { aspect-ratio: 36 / 29; }
.flow__step-icon img[src*="icon-quote"]   { aspect-ratio: 32 / 36; }
.flow__step-icon img[src*="icon-design"]  { aspect-ratio: 36 / 28; }
.flow__step-icon img[src*="icon-deliver"] { aspect-ratio: 36 / 31; }

.flow__step-body {
  --pc-gap: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.flow__step-title {
  --pc-size: 20;
  --pc-lh:   30;

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-green);
  text-align: center;
}

.flow__step-text {
  --pc-size: 16;
  --pc-lh:   24;

  font-family: var(--font-ja);
  font-weight: 500;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-black);
  text-align: center;
}


/* ============================================================
  13. FAQセクション

  Figma参照 (PC / 1366px):
    height: 1249px
    6 items / flex-col / gap 20px
    each item: px 60px / py 50px / rounded 30px / bg white w shadow
    Q icon: faq-q.svg  /  border: faq-line.svg
============================================================ */
.faq {
  background: var(--color-white);
}

.faq__inner {
  --pc-pt:    120;
  --pc-pb:    120;
  --pc-pad-x: 123;

  position: relative;
  width: 100%;
  padding-top:    calc(var(--pc-pt)    * var(--vw) / var(--base-pc));
  padding-bottom: calc(var(--pc-pb)    * var(--vw) / var(--base-pc));
  padding-left:   calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
  padding-right:  calc(var(--pc-pad-x) * var(--vw) / var(--base-pc));
}

.faq__list {
  --pc-mt:  56;
  --pc-gap: 20;

  display: flex;
  flex-direction: column;
  margin-top: calc(var(--pc-mt)  * var(--vw) / var(--base-pc));
  gap:        calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.faq__item {
  --pc-px:     60;
  --pc-py:     50;
  --pc-radius: 30;

  display: flex;
  flex-direction: column;
  gap:           0;
  padding-top:   calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  padding-bottom:calc(var(--pc-py)     * var(--vw) / var(--base-pc));
  padding-left:  calc(var(--pc-px)     * var(--vw) / var(--base-pc));
  padding-right: calc(var(--pc-px)     * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  background: var(--color-gray-bg);
}

/* Q＋質問テキスト行 */
.faq__head {
  display: flex;
  align-items: flex-start;
  gap: calc(9 * var(--vw) / var(--base-pc));
}

/* Qバッジ（緑丸） */
.faq__q-badge {
  --pc-size: 35;
  width:  calc(var(--pc-size) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-size) * var(--vw) / var(--base-pc));
  border-radius: 50%;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: calc(18 * var(--vw) / var(--base-pc));
  color: var(--color-white);
  line-height: 1;
}

/* 質問テキスト */
.faq__q-text {
  --pc-size: 24;
  --pc-lh:   35;

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-black);
}

/* セパレーター線 */
.faq__separator {
  height: 1px;
  background: rgba(26, 26, 26, 0.2);
  margin-top:    calc(16 * var(--vw) / var(--base-pc));
  margin-bottom: calc(24 * var(--vw) / var(--base-pc));
}

/* 回答テキスト */
.faq__a-text {
  --pc-size: 16;
  --pc-lh:   24;

  font-family: var(--font-ja);
  font-weight: 500;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  letter-spacing: calc(0.48 * var(--vw) / var(--base-pc));
  color: var(--color-black);
}


/* ============================================================
  14. CTAセクション

  Figma参照 (PC / 1366px): node 214:1319
    height: 554px / bg: cta-bg.webp + overlay #083b04 70%
    content: mt 89px / flex-col gap-42 (outer) w-full
      catch+btn group: flex-col gap-50 items-center
        catch: top 89px / font-black 52px / lh 70px (2行)
        btn: top 279px (89+140+50) / w 420px / h 76px
      phone group: top 397px (89+140+50+76+42) / gap-18 items-center
        label: 20px bold / lh 30px / ls 0.6px
        row: icon 25px + num 35px Montserrat SemiBold / lh 70px / ls 1.75px
        hours: 16px medium / lh 30px / ls 0.48px

  Figma参照 (SP / 390px): node 214:1320
    content: full-width (390px) / py 60px / flex-col gap 32px
    catch+btn group: flex-col gap-32 items-center / catch 全幅
    catch: 42px / lh 55px / w 100%
    btn: w 342px / h 76px / rounded 50px
    phone gap 16px / w 277px / items-center:
      label: 16px bold / lh 30px / ls 0.48px
      row: icon 25px + num 35px Montserrat SemiBold / lh 70px / ls 1.75px
      hours: 14px medium / lh 30px / ls 0.42px
============================================================ */

/* CTA の高さ (.cta-section は position:relative を共通スタイルから継承) */
.cta-section {
  height: calc(682 * var(--vw) / var(--base-pc));
}

/* 背景画像 */
.cta-section__bg {
  position: absolute;
  inset: 0;
}

.cta-section__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

.cta-section__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ダークグリーンオーバーレイ */
.cta-section__overlay {
  position: absolute;
  inset: 0;
  background: #083b04;
  opacity: 0.7;
}

/* ゴルファー */
.cta-section__golfer {
  --pc-left: 750;
  --pc-top:    0;
  --pc-w:    616;
  --pc-h:    682;

  position: absolute;
  left:   calc(var(--pc-left) * var(--vw) / var(--base-pc));
  top:    calc(var(--pc-top)  * var(--vw) / var(--base-pc));
  width:  calc(var(--pc-w)    * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h)    * var(--vw) / var(--base-pc));
}

.cta-section__golfer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* キャッチコピー */
.cta-section__catch {
  --pc-top:  100;
  --pc-size: 52;
  --pc-lh:   70;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--pc-top) * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-weight: 900;
  font-size:   calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height: calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-align: center;
  text-shadow: var(--shadow-green);
  white-space: nowrap;
}

/* CTAボタン */
.cta-section__btn {
  --pc-top:    290;
  --pc-w:      420;
  --pc-h:       76;
  --pc-radius:  50;
  --pc-size:    20;
  --pc-ls:     0.6;
  --pc-gap:     10;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top:    calc(var(--pc-top)    * var(--vw) / var(--base-pc));
  width:  calc(var(--pc-w)      * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h)      * var(--vw) / var(--base-pc));
  border-radius: calc(var(--pc-radius) * var(--vw) / var(--base-pc));
  background: var(--color-yellow);
  box-shadow: var(--shadow-green);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s;
}

.cta-section__btn:hover { background: var(--color-white); }

.cta-section__btn-icon {
  --pc-w: 20;
  --pc-h: 15;

  flex-shrink: 0;
  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
}

.cta-section__phone {
  --pc-top: 416;

  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--pc-top) * var(--vw) / var(--base-pc));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--vw) / var(--base-pc));
}

.cta-section__phone-label {
  --pc-size: 20;
  --pc-lh:   30;
  --pc-ls:  0.6;

  font-family: var(--font-ja);
  font-weight: 700;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height:    calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-shadow: var(--shadow-green);
  white-space: nowrap;
}

.cta-section__phone-row {
  --pc-gap: 8;

  display: flex;
  align-items: center;
  gap: calc(var(--pc-gap) * var(--vw) / var(--base-pc));
}

.cta-section__phone-icon {
  --pc-w: 25;
  --pc-h: 25;

  width:  calc(var(--pc-w) * var(--vw) / var(--base-pc));
  height: calc(var(--pc-h) * var(--vw) / var(--base-pc));
  flex-shrink: 0;
}

.cta-section__phone-num {
  --pc-size: 35;
  --pc-lh:   70;
  --pc-ls: 1.75;

  font-family: var(--font-en);
  font-weight: 600;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height:    calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-shadow: var(--shadow-green);
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 0.2s;
}

.cta-section__phone-num:hover { opacity: 0.8; }

.cta-section__phone-hours {
  --pc-size: 16;
  --pc-lh:   30;
  --pc-ls: 0.48;

  font-family: var(--font-ja);
  font-weight: 500;
  font-size:      calc(var(--pc-size) * var(--vw) / var(--base-pc));
  line-height:    calc(var(--pc-lh)   * var(--vw) / var(--base-pc));
  letter-spacing: calc(var(--pc-ls)   * var(--vw) / var(--base-pc));
  color: var(--color-white);
  text-shadow: var(--shadow-green);
  white-space: nowrap;
}


/* PC デフォルト: PC専用改行は表示、SP専用改行は非表示 */
.flow-br--pc { display: inline; }
.cta-sp-br   { display: none; }


/* ============================================================
  15. その他のサービスセクション（バナーリンク）

  Figma参照 (PC / 1366px): node 233-1235
    section: py 118px / px 123px / bg #f3f2f0
    title: 32px Bold / Noto Sans JP / color #1a1a1a
    grid: mt 47px / gap 30px / 3-col
    tall card h 198px / short card h 120px
    card-body: left 22px / bottom 16px / width 308px / gap 17px
    card-title: 18px Bold / card-desc: 14px 500
    hover: img scale(1.1) transition 0.4s ease

  Figma参照 (SP / 390px): node 233-1500
    section: py 60px / px 24px
    title: 24px Bold / lh 32px / 2行
    grid: mt 42px / gap 20px / 1-col
    card heights same as PC
============================================================ */

.other-services__inner {
  padding-top:    calc(118 * var(--vw) / var(--base-pc));
  padding-bottom: calc(118 * var(--vw) / var(--base-pc));
  padding-left:   calc(123 * var(--vw) / var(--base-pc));
  padding-right:  calc(123 * var(--vw) / var(--base-pc));
}

.other-services__title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(32 * var(--vw) / var(--base-pc));
  color: var(--color-black);
  white-space: nowrap;
  text-align: center;
}

.other-services__br--sp { display: none; }

.other-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:        calc(30 * var(--vw) / var(--base-pc));
  margin-top: calc(47 * var(--vw) / var(--base-pc));
}

.other-services__card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: calc(6 * var(--vw) / var(--base-pc));
  text-decoration: none;
}

.other-services__card--tall  { height: calc(198 * var(--vw) / var(--base-pc)); }
.other-services__card--short { height: calc(120 * var(--vw) / var(--base-pc)); }

.other-services__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.other-services__card:hover .other-services__card-img {
  transform: scale(1.1);
}

.other-services__card-overlay {
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.other-services__card-body {
  position: absolute;
  /* bottom: calc(16 * var(--vw) / var(--base-pc));
  left:   calc(22 * var(--vw) / var(--base-pc));
  width:  calc(308 * var(--vw) / var(--base-pc)); */
  display: flex;
  flex-direction: column;
  gap: calc(17 * var(--vw) / var(--base-pc));
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.other-services__card-title {
  font-family: var(--font-ja);
  font-weight: 700;
  font-size:   calc(18 * var(--vw) / var(--base-pc));
  line-height: 1.4;
  color: var(--color-white);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
}

.other-services__card-desc {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size:   calc(14 * var(--vw) / var(--base-pc));
  line-height: 171.429%;
  color: var(--color-white);
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.8));
}

/* ============================================================
  9. レスポンシブ — SP (1024px 以下)
     ※ SPは 100vw / var(--base-sp) でスケーリング
============================================================ */
@media (max-width: 1024px) {

  /* ===== ヘッダー SP ===== */
  .site-header {
    height: calc(var(--sp-h) * 100vw / var(--base-sp));
    background: var(--color-white) !important;   /* SPは常に白 */
    border-radius: 0 !important;                 /* PC ピル形状を解除 */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transform: none !important;
    left: 0 !important;
    width: 100% !important;
  }

  /* SPはdarkロゴのみ表示 */
  .header-logo__img--white { display: none !important; }
  .header-logo__img--dark  { display: block !important; }

  .header-inner {
    padding-left:  0;
    padding-right: 0;
  }

  /* SP ロゴ */
  .header-logo {
    --sp-logo-w:    64;   /* Figma SP: ロゴ幅 */
    --sp-logo-h:    38;   /* Figma SP: ロゴ高さ */
    --sp-logo-left: 16;   /* Figma SP: left */

    width:       calc(var(--sp-logo-w)    * 100vw / var(--base-sp));
    height:      calc(var(--sp-logo-h)    * 100vw / var(--base-sp));
    margin-left: calc(var(--sp-logo-left) * 100vw / var(--base-sp));
  }

  /* PC ナビ非表示 */
  .header-nav  { display: none; }
  /* PC CTA非表示 */
  .header-cta  { display: none; }

  /* SP CTA表示 */
  .header-cta-sp {
    display: flex;
    margin-left: auto;
  }

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

  /* SP ドロワーメニュー表示可能に */
  .sp-menu { display: flex; }

  /* ===== MV SP ===== */
  .mv {
    height: calc(var(--sp-h) * 100vw / var(--base-sp));
  }

  /* mv__copy: SP では上部中央寄せ */
  .mv__copy {
    left: 0;
    top:  calc(116 * 100vw / var(--base-sp));
    width: 100%;
    padding-left:  calc(20 * 100vw / var(--base-sp));
    padding-right: calc(20 * 100vw / var(--base-sp));
    text-align: center;
    gap: calc(24 * 100vw / var(--base-sp));
  }

  .mv__catch {
    --sp-size: 28;   /* Figma SP: フォントサイズ */
    --sp-lh:   39;   /* Figma SP: line-height */

    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
  }

  .mv__desc {
    --sp-size: 16;   /* Figma SP: フォントサイズ */
    --sp-lh:   29;   /* Figma SP: line-height */

    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
  }

  /* PC用改行を非表示、SP用改行を表示 */
  .mv__br--pc { display: none; }
  .mv__br--sp { display: inline; }


  .mv__slide {
    --sp-top: 542;   /* Figma SP: スライド top */
    --sp-h:   146;   /* Figma SP: スライド高さ */

    top:    calc(var(--sp-top) * 100vw / var(--base-sp));
    height: calc(var(--sp-h)   * 100vw / var(--base-sp));
  }

  .mv__slide-item {
    --sp-w:      219;   /* Figma SP: アイテム幅 */
    --sp-h:      146;   /* Figma SP: アイテム高さ */
    --sp-radius:  10;

    width:  calc(var(--sp-w)      * 100vw / var(--base-sp));
    height: calc(var(--sp-h)      * 100vw / var(--base-sp));
    border-radius: calc(var(--sp-radius) * 100vw / var(--base-sp));
  }

  /* ===== 見出し SP ===== */
  .section-heading {
    gap: calc(var(--sp-gap) * 100vw / var(--base-sp));
  }

  .section-heading__en {
    --sp-size: 20;
    font-size: calc(var(--sp-size) * 100vw / var(--base-sp));
  }

  .section-heading__ja-wrap {
    --sp-gap: 20;
    gap: calc(var(--sp-gap) * 100vw / var(--base-sp));
  }

  .section-heading__ja {
    --sp-size: 24;
    font-size: calc(var(--sp-size) * 100vw / var(--base-sp));
  }

  .section-heading__deco {
    --sp-w: 116;
    --sp-h:   6;
    width:  calc(var(--sp-w) * 100vw / var(--base-sp));
    height: calc(var(--sp-h) * 100vw / var(--base-sp));
  }

  /* ===== CTAボタン SP ===== */
  .btn-cta {
    --sp-w:      342;
    --sp-h:       76;
    --sp-radius:  50;
    --sp-size:    20;
    --sp-ls:     0.6;
    --sp-gap:     10;

    gap:    calc(var(--sp-gap)    * 100vw / var(--base-sp));
    width:  calc(var(--sp-w)      * 100vw / var(--base-sp));
    height: calc(var(--sp-h)      * 100vw / var(--base-sp));
    border-radius: calc(var(--sp-radius) * 100vw / var(--base-sp));
    font-size:      calc(var(--sp-size) * 100vw / var(--base-sp));
    letter-spacing: calc(var(--sp-ls)   * 100vw / var(--base-sp));
  }

  .btn-cta__icon {
    --sp-icon-w: 19;
    --sp-icon-h: 15;
    width:  calc(var(--sp-icon-w) * 100vw / var(--base-sp));
    height: calc(var(--sp-icon-h) * 100vw / var(--base-sp));
  }

  /* ===== フッター SP ===== */
  .footer-inner {
    --sp-pad-x: 24;   /* Figma SP: 左右余白 */
    --sp-pad-v: 30;   /* Figma SP: 上下余白 */
    --sp-gap:   20;   /* Figma SP: 要素間 gap */

    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding-top:    calc(var(--sp-pad-v) * 100vw / var(--base-sp));
    padding-bottom: calc(var(--sp-pad-v) * 100vw / var(--base-sp));
    padding-left:   calc(var(--sp-pad-x) * 100vw / var(--base-sp));
    padding-right:  calc(var(--sp-pad-x) * 100vw / var(--base-sp));
    gap: calc(var(--sp-gap) * 100vw / var(--base-sp));
  }

  .footer-logo__img {
    --sp-logo-w: 96;
    --sp-logo-h: 57;
    width:  calc(var(--sp-logo-w) * 100vw / var(--base-sp));
    height: calc(var(--sp-logo-h) * 100vw / var(--base-sp));
  }

  .footer-right {
    align-items: center;
    gap:   calc(20 * 100vw / var(--base-sp));
    width: auto;
  }

  .footer-links {
    --sp-gap:  48;
    --sp-size: 16;
    justify-content: center;
    gap:       calc(var(--sp-gap)  * 100vw / var(--base-sp));
    font-size: calc(var(--sp-size) * 100vw / var(--base-sp));
  }

  .footer-link {
    font-size:      calc(16   * 100vw / var(--base-sp));
    letter-spacing: calc(0.48 * 100vw / var(--base-sp));
  }

  .footer-copyright {
    --sp-size: 12;     /* Figma SP: フォントサイズ */
    --sp-ls:   0.36;
    font-size:      calc(var(--sp-size) * 100vw / var(--base-sp));
    letter-spacing: calc(var(--sp-ls)   * 100vw / var(--base-sp));
    text-align: center;
    white-space: normal;
  }

}/* end @media (max-width: 1024px) */


/* ============================================================
  SP追加 — 各セクション (1024px 以下)
  Figma参照 (SP / 390px):
    お悩み: bg-height 1071px / banner 342×80px / cards 342×106px gap 16px
    制作物: white card 342px / works 2-col 140×112px
    メリット: 342px / cards full-width py-20px gap-16px
    CTA: h:535px / golfer 304×326px left:43 top:209
============================================================ */
@media (max-width: 1024px) {

  /* ===== お悩み SP ===== */
  .concerns {
    height: calc(1071 * 100vw / var(--base-sp));
    clip-path: none !important;
    margin-bottom: calc(-120 * 100vw / var(--base-sp));
  }

  .concerns__inner {
    width: 100%;
    margin: 0;
    padding-top: calc(60 * 100vw / var(--base-sp));
    gap: calc(40 * 100vw / var(--base-sp));
  }

  .concerns__title {
    gap: calc(20 * 100vw / var(--base-sp));
    width: calc(342 * 100vw / var(--base-sp));
  }

  .concerns__banner-pill {
    width:         calc(342 * 100vw / var(--base-sp));
    height:        calc(80  * 100vw / var(--base-sp));
    border-radius: calc(50  * 100vw / var(--base-sp));
    font-size: calc(24 * 100vw / var(--base-sp));
    white-space: normal;
    flex-direction: column;
    line-height: normal;
    text-align: center;
  }

  .concerns__banner-arrow {
    width:  calc(33 * 100vw / var(--base-sp));
    height: calc(18 * 100vw / var(--base-sp));
  }

  .concerns__heading {
    font-size:   calc(32 * 100vw / var(--base-sp));
    line-height: calc(42 * 100vw / var(--base-sp));
  }

  .concerns__cards {
    flex-direction: column;
    flex-wrap: nowrap;
    width: calc(342 * 100vw / var(--base-sp));
    gap:   calc(16  * 100vw / var(--base-sp));
  }

  .concerns__card {
    width:         calc(342 * 100vw / var(--base-sp));
    height:        calc(106 * 100vw / var(--base-sp));
    border-radius: calc(10  * 100vw / var(--base-sp));
  }

  .concerns__card-icon {
    top: 50%;
    left:      calc(17 * 100vw / var(--base-sp));
    width:     calc(40 * 100vw / var(--base-sp));
    height:    calc(40 * 100vw / var(--base-sp));
    transform: translateY(-50%);
  }

  .concerns__card-text {
    font-size:   calc(20 * 100vw / var(--base-sp));
    line-height: calc(30 * 100vw / var(--base-sp));
  }

  .concerns__card-text .concerns__sp-inline {
    display: inline;
  }


  /* ===== 制作物一例 SP ===== */
  /* Figma SP: 背景写真コンテナ h=652px */
  .works__bg {
    height: calc(652 * 100vw / var(--base-sp));
  }

  /* Figma SP: h=45.25% / w=111.52% / left=-8.65% / top=-3.99% */
  .works__bg-img {
    width:  111.52%;
    height: 45.25%;
    left:   -8.65%;
    top:    -3.99%;
  }

  /* Figma SP: グラデ top=144px / h=1026px / 透明→グリーン(7.09%) */
  .works__gradient {
    top:    calc(144  * 100vw / var(--base-sp));
    height: calc(1026 * 100vw / var(--base-sp));
  }

  .works__inner {
    padding-top:    calc(100 * 100vw / var(--base-sp));
    padding-bottom: calc(60 * 100vw / var(--base-sp));
    padding-left:   0;
    padding-right:  0;
    gap: 0;
  }

  .works__catch {
    font-size:   calc(32 * 100vw / var(--base-sp));
    line-height: calc(42 * 100vw / var(--base-sp));
    height: calc(233 * 100vw / var(--base-sp));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .works__catch-br--sp {
    display: inline;
  }

  .works__card {
    width:          calc(342 * 100vw / var(--base-sp));
    padding-top:    calc(56  * 100vw / var(--base-sp));
    padding-bottom: calc(56  * 100vw / var(--base-sp));
    padding-left:   calc(24  * 100vw / var(--base-sp));
    padding-right:  calc(24  * 100vw / var(--base-sp));
    border-radius:  calc(10  * 100vw / var(--base-sp));
    gap:            calc(42  * 100vw / var(--base-sp));
  }

  .works__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(14 * 100vw / var(--base-sp));
    row-gap:    calc(32 * 100vw / var(--base-sp));
    width: 100%;
  }

  .works__item-img {
    width:         100%;
    height:        calc(92 * 100vw / var(--base-sp));
    border-radius: calc(6  * 100vw / var(--base-sp));
  }

  .works__item-label {
    font-size:  calc(14 * 100vw / var(--base-sp));
    margin-top: calc(8  * 100vw / var(--base-sp));
    font-weight: 700;
    text-align: left;
  }

  .works__note {
    grid-column: 1 / -1;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: calc(12 * 100vw / var(--base-sp));
  }


  /* ===== メリット SP ===== */
  .merit {
    height: auto;
    padding-bottom: calc(60 * 100vw / var(--base-sp));
  }

  .merit__bg-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .merit__inner {
    padding-top:   calc(60  * 100vw / var(--base-sp));
    padding-left:  calc(24  * 100vw / var(--base-sp));
    padding-right: calc(24  * 100vw / var(--base-sp));
  }

  .merit__cards {
    grid-template-columns: 1fr;
    gap:       calc(20 * 100vw / var(--base-sp));
    margin-top:calc(42 * 100vw / var(--base-sp));
  }

  .merit__card {
    padding-top:    calc(20 * 100vw / var(--base-sp));
    padding-bottom: calc(20 * 100vw / var(--base-sp));
    padding-left:   0;
    padding-right:  0;
    gap:            calc(16 * 100vw / var(--base-sp));
  }

  .merit__card-icon {
    --sp-icon: 40;
    width:  calc(var(--sp-icon) * 100vw / var(--base-sp));
    height: calc(var(--sp-icon) * 100vw / var(--base-sp));
  }

  .merit__card-title {
    --sp-size: 20;
    --sp-lh:   32;
    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
    color: var(--color-green);
  }

  .merit__card-text {
    --sp-size: 14;
    --sp-lh:   22;
    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
  }


  /* ===== ご依頼の流れ SP ===== */
  .flow {
    height: auto;
    padding-bottom: calc(60 * 100vw / var(--base-sp));
  }

  .flow__inner {
    padding-top:    calc(60 * 100vw / var(--base-sp));
    padding-bottom: 0;
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
  }

  .flow__steps {
    flex-direction: column;
    gap:        calc(10 * 100vw / var(--base-sp));
    margin-top: calc(42 * 100vw / var(--base-sp));
  }

  .flow__step {
    flex: none;
    width: 100%;
    flex-direction: column;   /* 縦並び：アイコン→タイトル→説明文 */
    align-items: center;      /* 横方向：中央揃え */
    justify-content: center;
    min-height: auto;
    padding:        calc(24 * 100vw / var(--base-sp));
    gap:            calc(16 * 100vw / var(--base-sp)); /* アイコン〜本文間の隙間 */
    border-radius:  calc(10 * 100vw / var(--base-sp));
    margin-bottom:  0;
  }

  .flow__arrow {
    position: relative;
    /* 視覚的サイズ：回転後のランドスケープに合わせる（Figma: w=18.963 h=10.45） */
    width:  calc(19 * 100vw / var(--base-sp));
    height: calc(11 * 100vw / var(--base-sp));
    margin: 0 auto;
    overflow: visible;
    transform: none;
  }

  .flow__arrow img {
    position: absolute;
    top: 50%;
    left: 50%;
    /* SVGのネイティブサイズ（ポートレート）をセット（viewBox: 10.45×18.96） */
    width:  calc(11 * 100vw / var(--base-sp));
    height: calc(19 * 100vw / var(--base-sp));
    object-fit: contain;
    /* translate は回転前サイズ基準、rotate で左向き→下向き ↓ */
    transform: translate(-50%, -50%) rotate(-90deg);
  }

  .flow__step-icon {
    --sp-icon: 40;
    width:  calc(var(--sp-icon) * 100vw / var(--base-sp));
    height: calc(var(--sp-icon) * 100vw / var(--base-sp));
    flex-shrink: 0;
  }

  .flow__step-body {
    flex: none;
    width: 100%;           /* カード幅いっぱいに広げてテキストを中央揃え可能に */
    align-items: center;   /* 子要素（タイトル・説明文）を中央寄せ */
    gap: calc(8 * 100vw / var(--base-sp)); /* タイトルと説明文の隙間 */
    padding-left: 0;
    text-align: center;
  }

  /* SP: タイトルの<br>は非表示（縦レイアウトで幅に余裕があるため1行） */
  .flow__step-title br { display: none; }

  .flow__step-title {
    --sp-size: 16;
    --sp-lh:   24;
    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
    color: var(--color-green);
    text-align: center;
    white-space: normal;
  }

  .flow__step-text {
    --sp-size: 14;
    --sp-lh:   20;
    font-size:   calc(var(--sp-size) * 100vw / var(--base-sp));
    line-height: calc(var(--sp-lh)   * 100vw / var(--base-sp));
    font-weight: 500;
    text-align: center;
    white-space: normal;
  }

  .flow__step-text br {
    display: none;
  }


  /* ===== FAQ SP ===== */
  .faq {
    height: auto;
    padding-bottom: calc(60 * 100vw / var(--base-sp));
  }

  .faq__inner {
    padding-top:   calc(60 * 100vw / var(--base-sp));
    padding-left:  calc(24 * 100vw / var(--base-sp));
    padding-right: calc(24 * 100vw / var(--base-sp));
  }

  .faq__list {
    position: static;
    gap:        calc(20 * 100vw / var(--base-sp));
    margin-top: calc(42 * 100vw / var(--base-sp));
  }

  .faq__item {
    padding-left:  calc(24 * 100vw / var(--base-sp));
    border-radius: calc(10 * 100vw / var(--base-sp));
    gap: 0;
  }

  .faq__head {
    gap: calc(9 * 100vw / var(--base-sp));
  }

  .faq__q-badge {
    width:  calc(35 * 100vw / var(--base-sp));
    height: calc(35 * 100vw / var(--base-sp));
    font-size: calc(18 * 100vw / var(--base-sp));
  }

  .faq__q-text {
    font-size:   calc(20 * 100vw / var(--base-sp));
    line-height: calc(24 * 100vw / var(--base-sp));
  }

  .faq__separator {
    margin-top:    calc(12 * 100vw / var(--base-sp));
    margin-bottom: calc(16 * 100vw / var(--base-sp));
  }

  .faq__a-text {
    font-size:   calc(14 * 100vw / var(--base-sp));
    line-height: calc(22 * 100vw / var(--base-sp));
    letter-spacing: calc(0.42 * 100vw / var(--base-sp));
  }


  /* PC専用改行をSPで非表示 */
  .flow-br--pc { display: none; }

  /* SP専用改行を表示 */
  .cta-sp-br { display: inline; }

  /* ===== CTA SP ===== */
  /* SP: flex-col 縦積みレイアウト */
  .cta-section {
    height: auto;
    min-height: calc(535 * 100vw / var(--base-sp));
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:    calc(60 * 100vw / var(--base-sp));
    padding-bottom: calc(60 * 100vw / var(--base-sp));
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
    gap: calc(32 * 100vw / var(--base-sp));
  }

  /* ゴルファーは SP では非表示 */
  .cta-section__golfer {
    display: block;
    left: auto;
    right: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: calc(430 * 100vw / var(--base-sp));
  }

  /* キャッチ: relative に戻してフロー参加 & overlay より前面 */
  .cta-section__catch {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    font-size:   calc(42 * 100vw / var(--base-sp));
    line-height: calc(55 * 100vw / var(--base-sp));
    white-space: normal;
    width: 100%;
  }

  /* ボタン: relative に戻してフロー参加 & overlay より前面 */
  .cta-section__btn {
    position: relative;
    left: auto;
    transform: none;
    top: auto;
    width:  calc(342 * 100vw / var(--base-sp));
    height: calc(76  * 100vw / var(--base-sp));
    border-radius: calc(50 * 100vw / var(--base-sp));
    font-size: calc(20 * 100vw / var(--base-sp));
    gap: calc(10 * 100vw / var(--base-sp));
  }

  .cta-section__btn-icon {
    width:  calc(19 * 100vw / var(--base-sp));
    height: calc(15 * 100vw / var(--base-sp));
  }

  /* 電話ブロック: relative に戻してフロー参加 & overlay より前面 */
  .cta-section__phone {
    position: relative;
    left: auto;
    transform: none;
    top: auto;
    gap: calc(16 * 100vw / var(--base-sp));
  }

  .cta-section__phone-label {
    font-size:      calc(16   * 100vw / var(--base-sp));
    line-height:    calc(30   * 100vw / var(--base-sp));
    letter-spacing: calc(0.48 * 100vw / var(--base-sp));
  }

  .cta-section__phone-row {
    gap: calc(8 * 100vw / var(--base-sp));
  }

  .cta-section__phone-icon {
    width:  calc(25 * 100vw / var(--base-sp));
    height: calc(25 * 100vw / var(--base-sp));
  }

  .cta-section__phone-num {
    font-size:   calc(35 * 100vw / var(--base-sp));
    line-height: calc(70 * 100vw / var(--base-sp));
  }

  .cta-section__phone-hours {
    font-size:      calc(14   * 100vw / var(--base-sp));
    line-height:    calc(30   * 100vw / var(--base-sp));
    letter-spacing: calc(0.42 * 100vw / var(--base-sp));
  }

  /* ===== その他のサービス SP ===== */
  .other-services__inner {
    padding-top:    calc(60 * 100vw / var(--base-sp));
    padding-bottom: calc(60 * 100vw / var(--base-sp));
    padding-left:   calc(24 * 100vw / var(--base-sp));
    padding-right:  calc(24 * 100vw / var(--base-sp));
  }

  .other-services__title {
    font-size:   calc(24 * 100vw / var(--base-sp));
    line-height: calc(32 * 100vw / var(--base-sp));
    white-space: normal;
  }

  .other-services__br--sp { display: inline; }

  .other-services__grid {
    grid-template-columns: 1fr;
    gap:        calc(20 * 100vw / var(--base-sp));
    margin-top: calc(42 * 100vw / var(--base-sp));
  }

  .other-services__card {
    border-radius: calc(6 * 100vw / var(--base-sp));
  }

  .other-services__card--tall  { height: calc(198 * 100vw / var(--base-sp)); }
  .other-services__card--short { height: calc(120 * 100vw / var(--base-sp)); }

  .other-services__card-body {
    /* bottom: calc(16 * 100vw / var(--base-sp));
    left:   calc(22 * 100vw / var(--base-sp));
    width:  calc(298 * 100vw / var(--base-sp));
    gap:    calc(10 * 100vw / var(--base-sp)); */
  }

  .other-services__card-title {
    font-size: calc(18 * 100vw / var(--base-sp));
  }

  .other-services__card-desc {
    font-size: calc(14 * 100vw / var(--base-sp));
  }

}/* end SP追加 */

.br--sp-narrow { display: none; }

@media (max-width: 390px) {
  .br--sp-narrow { display: inline; }
}