@charset "UTF-8";
/* このファイルは build_wgd_css.sh の生成物です。手で編集せず _wgd/ の部分ファイルを直してください。 */

/* ===== _wgd/00_base.css ===== */
/**
 * 00_base.css — WEB版イヤホンガイド（固定ページ web_earphone_guide）の共通土台
 *
 * このファイルは部分ファイルの1本目。
 * 結合順 00_base → 05_fv → 07_patent → 10_feature → 20_difference → 30_flow
 *        → 40_price → 50_howto → 60_environment → 65_demo → 70_contact
 *        （2026-08-28 に 05_fv と 07_patent を追加。build_wgd_css.sh の SRC 配列は
 *          明示列挙なので、ファイルを置くだけでは結合されない）
 * 生成物 assets/css/web_earphone_guide.css は結合結果なので手で編集しない。
 * @charset はファイル先頭の1回だけ有効なので、他の部分ファイルには書かない。
 *
 * ここに置くのは「2つ以上のセクションが使うもの」だけ。
 *   1. 追加の CSS 変数（common.css は触らない）
 *   2. 共通の内容枠 .wgd-inner
 * セクション固有の見た目は各番号のファイルに書く。
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * 数値は figma-dump/inspect/earguide/ の実測。リキッド式は 1440px カンプ基準で
 * 「実測px ÷ 14.4 = vw」。clamp の下限は SP カンプが無いため当方設計。
 */

/* ============================================================
   1. 追加の CSS 変数
   #333333（Figma スタイル名 text_black）は common.css の :root に無い。
   実在するのは --color_dark #111111 で、これとは別の色。
   比較表の行見出し8箇所・推奨機種表の種別4箇所で使うため、ページ CSS の先頭で足す。
   出典: inspect 03_difference.txt / 07_difference2.txt の実測。
   ============================================================ */
:root {
  --color_text_black: #333333; /* Figma text_black */
}


/* ============================================================
   2. 内容枠 .wgd-inner
   common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため、
   1440px 表示のとき内容幅が 1121px になる。本ページのカンプは flow・howto・price が
   内容幅 1200px なので食い違う。そこで .bread / .footer__inner と同じ
   「1200 の内容＋外側に左右余白」方式にする（common.css 1151行の .bread が前例）。
   1280px 以上で内容幅がカンプどおり 1200px になる。
   ============================================================ */
.wgd-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}

/* ===== _wgd/05_fv.css ===== */
/**
 * 05_fv.css — WEB版イヤホンガイド ファーストビュー（2026-08-28 追加）
 *
 * HTML   : template-parts/earguide/fv.php
 * Figma  : PC 929:11546（1440×725）／ SP 994:12574（375×490）
 * inspect: figma-dump/inspect/wgd_20260828/fv_pc.txt ／ fv_sp.txt
 *
 * 【切替】769px 以上は PC カンプ（1440 基準・実測px ÷ 14.4 = vw）、
 *   768px 以下は SP カンプ（375 基準・実測px ÷ 3.75 = vw）。
 *   タブレット帯（769〜1200）は PC の構図のまま比例縮小する。専用カンプが無いため、
 *   要素が触れないよう clamp の下限を SP カンプの実測値に置いている。
 *
 * 【縦の構造】stage（グラデ背景・PC 640 / SP 430）の下端に CTA 帯が重なり、
 *   PC は 85px、SP は 60px 下へはみ出して FV 全体が PC 725 / SP 490 になる。
 *   帯は stage の外に置き、負の margin-top で引き上げる（stage の overflow: hidden に
 *   帯の影を切られないため）。
 *
 * 【はみ出し】右上の線画はカンプの時点で FV の右端をわずかに越える。
 *   横スクロールを出さないため .wgd-fv に overflow-x: clip を掛ける
 *   （hidden にすると CTA 帯の影が縦にも切られる）。
 */

.wgd-fv {
  position: relative;
  max-width: 192rem; /* 1920px。これ以上は横に伸ばさない（他ページの FV と同じ扱い） */
  margin-inline: auto;
  overflow-x: clip;
}

/* 背景のグラデ。カンプ GRAD(GRADIENT_LINEAR,#FFFFFF,#FFEDED)。
   角度は Figma の gradientHandlePositions（正規化座標 (1,0)→(0.5,0.804)）を
   枠の実寸 1440×640 に掛けて出した実測値＝右上の白から左下のピンクへ 234.45deg。
   SP は枠が 375×430 なので同じハンドルでも見かけの角度が変わる（208.48deg・下の @media）。 */
.wgd-fv__stage {
  position: relative;
  overflow: hidden;
  min-height: min(44.4444vw, 64rem); /* カンプ 640px */
  background: linear-gradient(234.45deg, #FFFFFF 0%, #FFEDED 100%);
}

/* 左下の赤い波。カンプ相対 x−13,y169,820×441。下辺基準で置く（stage が伸びても下に付く）。
   🚨 max-width: none が要る。common.css の img{max-width:100%} が効くと、SP で
   カンプの 469px が画面幅 375px に縮められ、波の形と位置が変わる（実測で確認）。 */
.wgd-fv__deco {
  position: absolute;
  max-width: none;
  bottom: min(2.0833vw, 3rem);  /* 640 −(169+441) = 30px */
  left: max(-0.9028vw, -1.3rem); /* −13px */
  width: min(56.9444vw, 82rem);   /* 820px */
  height: auto;
}

/* 右上の建物・樹木の線画。カンプ相対 x714,y0,735×372。
   波と同じ理由で max-width: none（画面からはみ出す前提の素材）。 */
.wgd-fv__bg {
  position: absolute;
  max-width: none;
  top: 0;
  right: max(-0.6250vw, calc(50% - 72rem - 0.9rem)); /* 1440 −(714+735) = −9px（9px はみ出す） */
  width: min(51.0417vw, 73.5rem); /* 735px */
  height: auto;
}

/* ガイドと参加者のイラスト。カンプ相対 x816,y121,498×332。 */
.wgd-fv__illust {
  position: absolute;
  top: min(8.4028vw, 12.1rem);  /* 121px */
  right: max(8.7500vw, calc(50% - 72rem + 12.6rem)); /* 1440 −(816+498) = 126px */
  width: min(34.5833vw, 49.8rem); /* 498px */
  height: auto;
}

.wgd-fv__inner {
  position: relative;
  z-index: 1; /* 波・線画・イラストより前 */
  padding-top: min(3.5417vw, 5.1rem); /* 見出し上端 y51 */
}

/* 見出し 50px / lh70 / wght700 / cta_gr グラデーション文字。
   グラデの端をカンプ（535px の中で #DA3106→#B80003）に合わせるため幅を文字なりにする。
   background-clip が効かない環境では単色 #B80003 で出る。 */
.wgd-fv__title {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color_main);
  font-family: var(--font_jp);
  font-size: clamp(3.2rem, 3.4722vw, 5rem); /* SP 32px → PC 50px */
  font-weight: 700;
  line-height: 1.4; /* 70 / 50 */
  letter-spacing: .05em; /* カンプの見出し幅 535px に合わせる（10字 × 50px + 字間） */
  background: linear-gradient(90deg, #DA3106 0%, #B80003 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* サブコピー 28px / lh39.2。カンプ相対 y131（見出し下端121 の 10px 下）。 */
.wgd-fv__sub {
  margin-top: min(0.6944vw, 1rem); /* 10px */
  color: var(--color_dark);
  font-size: clamp(1.6rem, 1.9444vw, 2.8rem); /* SP 16px → PC 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
}

/* スマホ2台と円バッジの置き場。カンプ相対では見出しの下・波の上に重なる。
   高さはカンプの一番下の要素（スマホ右 y452）までを確保する。 */
/* 縦の基準はサブコピーの下端（カンプ相対 y170）。ここからの差でスマホ・バッジを置く。
   高さは一番下の要素＝右のスマホの下端 452 までの 282px。 */
.wgd-fv__visual {
  position: relative;
  height: min(19.5833vw, 28.2rem); /* 452 − 170 ＝ 282px */
}

.wgd-fv__phone {
  position: absolute;
  height: auto;
}

/* 左のスマホ（QR）。カンプ相対 x122,y228,144×221 → visual 内の y は 228−170＝58。 */
.wgd-fv__phone--qr {
  top: min(4.0278vw, 5.8rem);
  left: min(0.1389vw, 0.2rem); /* 122 − 120（inner の左端）＝ 2px */
  width: min(10vw, 14.4rem);   /* 144px */
}

/* 右のスマホ（再生画面）。カンプ相対 x264,y203,134×249 → visual 内の y は 33。 */
.wgd-fv__phone--guide {
  top: min(2.2917vw, 3.3rem);
  left: min(10vw, 14.4rem); /* 264 − 120 ＝ 144px */
  width: min(9.3056vw, 13.4rem); /* 134px */
}

/* 円バッジ。カンプ相対 x420,y209,239×239 → visual 内の y は 64、x は 300。
   赤帯は円より広い（279px）ので、円の縁で切る。visual 内の y は 209−170＝39。 */
.wgd-fv__badge {
  position: absolute;
  top: min(2.7083vw, 3.9rem);
  left: min(20.8333vw, 30rem);
  width: min(16.5972vw, 23.9rem);  /* 239px */
  height: min(16.5972vw, 23.9rem);
  border: 2px solid var(--color_main); /* カンプ stroke 2px #B80003 INSIDE。細線なので固定 */
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
}

/* 赤帯。カンプ相対 y238（バッジ上端 209 の 29px 下）・高さ58・文字15px lh19.5。 */
.wgd-fv__badge-band {
  position: absolute;
  top: min(2.0139vw, 2.9rem); /* 29px */
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: min(4.0278vw, 5.8rem); /* 58px */
  padding-block: min(0.6944vw, 1rem);
  background: var(--color_main);
  color: #FFFFFF;
  font-size: clamp(1.2rem, 1.0417vw, 1.5rem); /* SP 12px → PC 15px */
  font-weight: 700;
  letter-spacing: 0; /* カンプ実測 letterSpacing=0。ここだけ本文の .05em を持たせない */
  line-height: 1.3; /* 19.5 / 15 */
  text-align: center;
}

.wgd-fv__badge-item {
  position: absolute;
  height: auto;
}

/* イヤホン（ケース側）。カンプ相対 x474,y286,187×154 → バッジ内 x54,y77。
   右端がバッジの円から 2px はみ出すのがカンプどおり（overflow: hidden で切れる）。 */
.wgd-fv__badge-item--02 {
  top: min(5.3472vw, 7.7rem);
  left: min(3.7500vw, 5.4rem);
  width: min(12.9861vw, 18.7rem); /* 187px */
}

/* イヤホン（有線側）。カンプ相対 x443,y316,97×84 → バッジ内 x23,y107。 */
.wgd-fv__badge-item--01 {
  top: min(7.4306vw, 10.7rem);
  left: min(1.5972vw, 2.3rem);
  width: min(6.7361vw, 9.7rem); /* 97px */
}

/* 注記 14px / lh18.2。カンプ相対 y468。PC は1行・中央寄せではなく左（x119＝inner の左端）。 */
.wgd-fv__note {
  margin-top: min(1.1111vw, 1.6rem); /* visual 下端 452 → カンプ y468 */
  color: var(--color_dark);
  font-size: clamp(1.3rem, 0.9722vw, 1.4rem); /* SP 13px → PC 14px */
  font-weight: 500;
  line-height: 1.3;
}

/* CTA 帯。カンプ相対 y515・1200×210。stage（640）へ 125px 重ね、85px 下へはみ出す。 */
.wgd-fv__cta {
  position: relative;
  z-index: 2; /* 影を stage の上に出す */
  /* 🚨 負の値なので max()。min() だと 1440px を超えたときに引き上げ量が増え続け、
     FV の高さがカンプの 725px より縮んでしまう（1920px で 683px になっていた）。 */
  margin-top: max(-8.6806vw, -12.5rem); /* −125px */
}

.wgd-fv__cta-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(14.5833vw, 21rem); /* 210px */
  padding: min(3.1250vw, 4.5rem) min(2.0833vw, 3rem); /* カンプ pad 上下45 */
  background: linear-gradient(90deg, #DA3106 0%, #B80003 100%); /* cta_gr */
}

/* 白ボタン 600×120・影 0 10 30 #860D08@0.3。 */
.wgd-fv__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(41.6667vw, 60rem); /* 600px */
  min-height: min(8.3333vw, 12rem); /* 120px */
  /* 左右とも 104px にすると、文字の中心がボタンの中心（カンプ 300px）に来て、かつ
     左のアイコン（左40＋64）と右の矢印（右20＋24）に文字が重ならない。
     同ページの CONTACT 帯（70_contact.css 175行）と同じ考え方。 */
  padding-inline: min(7.2222vw, 10.4rem);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3);
  color: var(--color_main);
  text-align: center;
  text-decoration: none; /* 既定の下線を消す（カンプに下線は無い。他ページのボタンと同じ扱い） */
  transition: var(--transition);
}

.wgd-fv__btn:hover {
  opacity: .8;
}

/* メールアイコン 64×64。カンプ相対 x460（ボタン左端 420 の 40px 右）。 */
.wgd-fv__btn-icon {
  position: absolute;
  left: min(2.7778vw, 4rem);
  width: min(4.4444vw, 6.4rem);
  height: auto;
}

.wgd-fv__btn-txt {
  display: flex;
  flex-direction: column;
  gap: min(0.4167vw, 0.6rem);
  font-weight: 700;
  line-height: 1.3; /* 31.2 / 24 */
}

/* 🚨 カンプは1つのテキストノードだが、文字ごとの上書きで行の大きさが違う
   （PC 1行目 20px ／ 2行目 24px。SP は 14px ／ 18px）。1行目を 24px で組むと
   アイコンと矢印に文字がぶつかる。CONTACT 帯（70_contact.css 209・217行）も同じ扱い。 */
.wgd-fv__btn-lead {
  font-size: clamp(1.6rem, 1.3889vw, 2rem); /* カンプ 20px */
}

.wgd-fv__btn-main {
  font-size: clamp(1.8rem, 1.6667vw, 2.4rem); /* カンプ 24px */
}

/* 右の矢印 24×24。common.css の .ar をそのまま使い、位置だけ決める。 */
.wgd-fv__btn .ar {
  position: absolute;
  right: min(2.7778vw, 4rem);
  flex: 0 0 auto;
}


/* --- 1199px 以下：ボタンだけ帯の内側いっぱいまで広げる ----------------------
   カンプのボタンは 600px（帯 1200px の半分）だが、文字サイズが clamp の下限で
   止まる一方ボタンは vw で縮み続けるため、900px を下回るとアイコン・矢印と
   文言がぶつかる（実測で確認）。レンタルページの FV（rental-earphone.css
   1627行〜）と同じ対処。1200px 以上は 1px も変わらない。 */
@media (max-width: 1199px) {
  .wgd-fv__btn {
    width: 100%;
    max-width: 60rem; /* カンプのボタン幅 600px */
  }
}


/* ==========================================================================
   SP（768px 以下）— カンプ 994:12574（375×490）。実測px ÷ 3.75 = vw。

   🚨 vw をそのまま使うと 768px で 375 のカンプが2倍に伸び、FV だけで
   1000px を超える高さになる。そこで全ての値を「480px 相当」で頭打ちにし
   （min()/max() の第2引数＝実測px × 480 ÷ 375 ÷ 10 rem）、内容の枠も
   .wgd-fv__inner で 480px に留めて中央に置く。375px では従来どおり
   カンプの実測値がそのまま出る（頭打ちが効き始めるのは 480px から）。
   ========================================================================== */
@media (max-width: 768px) {

  /* 内容は 480px までで頭打ちにして中央へ。背景（波・線画）は画面幅なりに広がる。
     左右の余白はカンプ SP の 18px（見出しの枠 x18・幅342）に合わせる。
     .wgd-inner の既定（20px）のままだと見出しが 1px 足りず2行に折れる。 */
  .wgd-fv__inner {
    max-width: 51.6rem; /* 480 + 左右18×2 */
    margin-inline: auto;
    padding-inline: min(4.8vw, 1.8rem); /* 18px */
  }

  /* 帯だけは外へ広い（カンプ x10・幅355）。内容枠より左右 8px ずつ広く取る。 */
  .wgd-fv__cta .wgd-inner {
    max-width: 50rem; /* 480 + 左右10×2 */
    margin-inline: auto;
    padding-inline: min(2.6667vw, 1rem); /* 10px */
  }

  /* 🚨 SP の文字は clamp の下限（＝PC 用の固定値）ではなく画面幅なりに縮める。
     固定にすると 320px で見出し・ボタン文言が折り返してカンプの行数と変わる。
     上限は他の SP 値と同じく 480px 相当で頭打ち。 */
  .wgd-fv__title {
    font-size: min(8.5333vw, 4.1rem); /* 375px で 32px */
    line-height: 1.4; /* 44.8 / 32 */
    /* カンプは1行。文字が画面幅なりに縮むので、折り返さなくてもどの幅でも収まる。 */
    white-space: nowrap;
  }

  .wgd-fv__sub {
    font-size: min(4.2667vw, 2.05rem); /* 375px で 16px */
    line-height: 1.4; /* 22.4 / 16 */
  }

  .wgd-fv__note {
    font-size: min(3.4667vw, 1.66rem); /* 375px で 13px */
  }

  .wgd-fv__badge-band {
    font-size: min(3.2vw, 1.54rem); /* 375px で 12px */
  }

  /* ボタンの2行はカンプどおり折り返さない。文字が画面幅なりに縮むので
     どの幅でも枠に収まる（320px でも 15.4px ／ 必要幅 195px < 枠 216px）。 */
  .wgd-fv__btn-lead,
  .wgd-fv__btn-main {
    white-space: nowrap;
  }

  .wgd-fv__btn-lead {
    font-size: min(3.7333vw, 1.79rem); /* カンプ 14px */
  }

  .wgd-fv__btn-main {
    font-size: min(4.8vw, 2.3rem); /* カンプ 18px */
  }


  .wgd-fv__stage {
    min-height: min(114.6667vw, 55.04rem); /* 430px */
    background: linear-gradient(208.48deg, #FFFFFF 0%, #FFEDED 100%); /* 枠 375×430 での実測角度 */
  }

  /* カンプ相対 x−10,y168,469×252。下辺までの残りは 430 −(168+252) = 10px。 */
  .wgd-fv__deco {
    bottom: min(2.6667vw, 1.28rem);  /* 10px */
    left: max(-2.6667vw, -1.28rem);   /* −10px */
    width: min(125.0667vw, 60.03rem); /* 469px */
  }

  /* カンプ相対 x162,y33,261×132。右の残りは 375 −(162+261) = −48px（48px はみ出す）。 */
  .wgd-fv__bg {
    top: min(8.8vw, 4.22rem);      /* 33px */
    right: max(-12.8vw, -6.14rem);  /* −48px */
    width: min(69.6vw, 33.41rem);   /* 261px */
  }

  /* カンプ相対 x194,y104,173×115。右の残りは 375 −(194+173) = 8px。 */
  .wgd-fv__illust {
    top: min(27.7333vw, 13.31rem);  /* 104px */
    right: min(2.1333vw, 1.02rem); /* 8px */
    width: min(46.1333vw, 22.14rem); /* 173px */
  }

  .wgd-fv__inner {
    padding-top: min(8.0vw, 3.84rem); /* 見出し上端 y30 */
  }

  /* SP は中央寄せ（カンプ x18・幅342 でほぼ全幅の中央）。 */
  .wgd-fv__title {
    width: 100%;
    text-align: center;
  }

  .wgd-fv__sub {
    margin-top: min(1.0667vw, 0.51rem); /* 79 − 75（見出し下端） = 4px */
    text-align: center;
  }

  /* スマホ2台・バッジ・イラストの重なりを収める高さ。
     カンプの一番下はバッジ下端 y371 で、サブ下端 y101 からの差 270px。 */
  .wgd-fv__visual {
    height: min(72.0vw, 34.56rem); /* 270px */
    margin-top: 0;
  }

  /* カンプ相対 x21,y155,89×137 → visual 内 y は 155−101＝54、x は 21−18＝3。 */
  .wgd-fv__phone--qr {
    top: min(14.4vw, 6.91rem);   /* 54px */
    left: min(0.8vw, 0.38rem);   /* 3px */
    width: min(23.7333vw, 11.39rem); /* 89px */
  }

  /* カンプ相対 x110,y135,86×161 → visual 内 y は 34。 */
  .wgd-fv__phone--guide {
    top: min(9.0667vw, 4.35rem);   /* 34px */
    left: min(24.5333vw, 11.78rem); /* 110 − 18 ＝ 92px */
    width: min(22.9333vw, 11.01rem); /* 86px */
  }

  /* カンプ相対 x208,y226,145×145 → visual 内 y は 125、x は 187。 */
  .wgd-fv__badge {
    top: min(33.3333vw, 16.0rem);  /* 125px */
    left: min(50.6667vw, 24.32rem); /* 208 − 18 ＝ 190px */
    width: min(38.6667vw, 18.56rem);  /* 145px */
    height: min(38.6667vw, 18.56rem);
  }

  /* カンプ相対 y246（バッジ上端 226 の 20px 下）・高さ40。 */
  .wgd-fv__badge-band {
    top: min(5.3333vw, 2.56rem); /* 20px */
    min-height: min(10.6667vw, 5.12rem); /* 40px */
    padding-block: min(1.6vw, 0.77rem);
    line-height: 1.2; /* 14.4 / 12 */
  }

  /* カンプ相対 x247,y281,100×82 → バッジ内 x39,y55。 */
  .wgd-fv__badge-item--02 {
    top: min(14.6667vw, 7.04rem);  /* 55px */
    left: min(10.4vw, 4.99rem);    /* 39px */
    width: min(26.6667vw, 12.8rem); /* 100px */
  }

  /* カンプ相対 x222,y293,58×51 → バッジ内 x14,y67。 */
  .wgd-fv__badge-item--01 {
    top: min(17.8667vw, 8.58rem); /* 67px */
    left: min(3.7333vw, 1.79rem); /* 14px */
    width: min(15.4667vw, 7.42rem); /* 58px */
  }

  /* SP は※をぶら下げた2行（カンプ Frame 5013・x21,y309）。 */
  /* SP では注記がバッジの左横（カンプ y309）に来る。visual の下端 371 から引き上げる。 */
  .wgd-fv__note {
    display: flex;
    margin-top: max(-16.5333vw, -7.94rem); /* 309 − 371 ＝ −62px */
    line-height: 1.3; /* 16.9 / 13 */
  }

  .wgd-fv__note-mark {
    flex: 0 0 auto;
  }

  .wgd-fv__note-body {
    /* カンプは「画面はイメージです。」で改行。幅を与えて自然に折り返す。 */
    max-width: min(47.7333vw, 22.91rem); /* 179px */
  }

  /* カンプ相対 y380・帯 355×110。stage（430）へ 50px 重ね、60px 下へはみ出す。 */
  .wgd-fv__cta {
    margin-top: max(-13.3333vw, -6.4rem); /* −50px */
  }

  .wgd-fv__cta-band {
    min-height: min(29.3333vw, 14.08rem); /* 110px */
    padding: min(5.3333vw, 2.56rem);     /* カンプ pad 20px */
  }

  /* カンプ相対 x30,y400,315×70。文字はカンプ実測で 62〜270 に入る（中心 166px）ので、
     左右のパディングをその位置に合わせる。 */
  .wgd-fv__btn {
    width: 100%;
    min-height: min(18.6667vw, 8.96rem); /* 70px */
    padding-left: min(16.5333vw, 7.94rem);  /* 62px */
    padding-right: min(12vw, 5.76rem);      /* 45px */
  }

  /* カンプ相対 x42,y420,31×31。 */
  .wgd-fv__btn-icon {
    left: min(3.2vw, 1.54rem);    /* 42 − 30 ＝ 12px */
    width: min(8.2667vw, 3.97rem); /* 31px */
  }

  .wgd-fv__btn-txt {
    gap: min(0.8vw, 0.38rem);
    line-height: 1.3; /* 23.4 / 18 */
  }

  /* カンプ相対 x312,y426,18×18 → ボタン内の右から 33px。 */
  .wgd-fv__btn .ar {
    right: min(3.2vw, 1.54rem); /* 12px */
    width: min(4.8vw, 2.3rem);
    height: min(4.8vw, 2.3rem);
  }
}

/* ===== _wgd/07_patent.css ===== */
/**
 * 07_patent.css — WEB版イヤホンガイド 特許情報（2026-08-28 追加）
 *
 * HTML   : template-parts/earguide/patent.php
 * Figma  : wrap 1045:5981（1040×416）＝ contents_inner の第1子
 * inspect: figma-dump/inspect/wgd_20260828/patent.txt
 *
 * 【余白】カンプ実測は 上0（パンくずの直下）・下80px（feature の見出しまで）。
 *   10_feature.css は上パディングを持たない作りなので、下側はここで確保する。
 *
 * 【SP の表】横スクロールにしない。2026-08-21 に先方から「スマートフォンでも
 *   横スクロールを使用しない表示で」とご指摘があり、比較表（compare.css）で
 *   縦積みに直した経緯があるため、同じ作法に合わせる。
 */

.wgd-patent {
  padding-bottom: clamp(4.8rem, 5.5556vw, 8rem); /* カンプ 80px */
}

/* 灰色の箱。カンプ 1040×416・#F6F6F6・上下パディング40px。 */
.wgd-patent__box {
  max-width: 104rem; /* 1040px。コンテナ幅なので固定 */
  margin-inline: auto;
  padding-block: clamp(2.4rem, 2.7778vw, 4rem); /* カンプ pad 上下40 */
  /* 左右はカンプでは 0（表 760px が 1040px の中で中央に来るため）だが、幅が縮むと
     表が箱の端に付いて見苦しくなる。1440px では中身（760px）より内側に来ないので
     見た目は変わらず、狭いときだけ効く逃げ。値は同じページの
     .wgd-feature__box（10_feature.css 43行）と揃えた。 */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem);
  background: var(--color_light); /* #F6F6F6 base_color */
}

/* 見出しと月桂樹の並び。カンプ実測（箱 1040 基準）＝
   月桂樹 172〜215 ／ 見出しの文字枠 214〜824（610px）／ 月桂樹 817〜860。
   3つが隙間なく並んで全体 696px が中央に来る形なので gap は 0。
   見出しが伸びると月桂樹が箱の端まで押し出されるため、伸ばさない（flex: 0 1 auto）。 */
.wgd-patent__head {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 月桂樹 43×85。素材は左用1点だけ持ち、右は反転して使う。 */
.wgd-patent__laurel {
  flex: 0 0 auto;
  width: clamp(2.8rem, 2.9861vw, 4.3rem); /* 43px */
  height: auto;
}

.wgd-patent__laurel--right {
  transform: scaleX(-1);
}

/* 見出し。行ごとに様式が違うので寸法は下の2つの span に持たせ、ここは器だけ。
   幅を文字なりにするのは、月桂樹が見出しの両脇にぴたりと付くカンプの並びを保つため
   （伸ばすと月桂樹が箱の端まで押し出される）。 */
.wgd-patent__title {
  flex: 0 1 auto;
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  font-family: var(--font_jp);
  font-weight: 700;
  text-align: center;
}

/* 1行目 24px / #111111 / lh43.2。 */
.wgd-patent__title-lead {
  display: block;
  color: var(--color_dark);
  font-size: clamp(1.6rem, 1.6667vw, 2.4rem); /* SP 16px → PC 24px */
  line-height: 1.8; /* 43.2 / 24 */
}

/* 2行目 28px / #B80003 ＋ 下線（カンプ Rectangle 35・306×2px #B80003）。
   幅を文字なりにして、線が文字の幅だけ引かれるようにする。 */
.wgd-patent__title-em {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  border-bottom: 2px solid var(--color_main); /* 細線なので固定 2px */
  color: var(--color_main);
  font-size: clamp(1.8rem, 1.9444vw, 2.8rem); /* SP 18px → PC 28px */
  line-height: 1.55; /* 43.2 / 28 */
}

/* 表 760×221。外周も1px の線で囲む（カンプ Frame 168 が #EAEAEA の地に 1px の隙間）。 */
.wgd-patent__table {
  width: 100%;
  max-width: 76rem; /* 760px */
  margin: clamp(2rem, 2.0833vw, 3rem) auto 0; /* カンプ gap 30px */
  border-collapse: collapse;
  table-layout: fixed;
}

.wgd-patent__th,
.wgd-patent__td {
  padding: clamp(1.2rem, 1.1111vw, 1.6rem); /* カンプ pad 16px */
  border: 1px solid var(--color_line); /* #EAEAEA */
  font-size: clamp(1.4rem, 1.1111vw, 1.6rem); /* SP 14px → PC 16px */
  line-height: 1.4; /* 22.4 / 16 */
  vertical-align: middle;
}

/* 行見出し 200px・赤地・白文字・中央。 */
.wgd-patent__th {
  width: 20rem; /* 200px */
  background: var(--color_main);
  color: #FFFFFF;
  font-weight: 700;
  text-align: center;
}

.wgd-patent__td {
  background: #FFFFFF;
  color: var(--color_dark);
  font-weight: 500;
  text-align: left;
}


/* ==========================================================================
   SP（768px 以下）— 表は縦積み。横スクロールは出さない。
   ========================================================================== */
@media (max-width: 768px) {

  .wgd-patent__head {
    gap: 1.0667vw; /* 4px。SP は見出しが縮むので気持ちだけ離す */
  }

  .wgd-patent__laurel {
    width: 8.5333vw; /* 32px */
  }

  .wgd-patent__table,
  .wgd-patent__table tbody,
  .wgd-patent__table tr,
  .wgd-patent__th,
  .wgd-patent__td {
    display: block;
    width: 100%;
  }

  /* 行の間に線が二重にならないよう、上の行の下線と次の行の上線を重ねない。 */
  .wgd-patent__table tr + tr {
    margin-top: 3.2vw; /* 12px */
  }

  .wgd-patent__th {
    padding-block: 2.1333vw; /* 8px。帯なので低めにする */
  }

  .wgd-patent__td {
    border-top: 0; /* 赤帯の下線と白地の上線が重なるので1本にする */
  }
}

/* ===== _wgd/10_feature.css ===== */
/**
 * 10_feature.css — WEB版イヤホンガイド／feature（WEB版イヤホンガイドとは？）
 *
 * Figma  : feature（node 246:1127 ／ 1200×1570・ページ内では 1440 幅の中央に置かれる）
 * inspect: figma-dump/inspect/earguide/02_feature.txt
 * 実測画像: figma-dump/screenshots/earguide/02_feature.png（等倍1200px）
 *
 * 使い回す共通クラス（common.css 側・ここでは再定義しない）
 *   .heading-01 / .heading-01__title / .heading-01__label … 951〜970行
 *   .sub-head / .sub-head__text                          … 972〜986行
 *   .wgd-inner                                            … _wgd/00_base.css
 *
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 = vw」。
 * clamp の下限は SP カンプが無いため当方設計（本文系は 1.4rem を下回らせない）。
 */

/* ============================================================
   セクション枠
   Figma: pad=(0,0,100,0)。上が 0 なのでパンくずの下余白がそのまま効く
   （カンプでもパンくず下端 382px から見出しが始まる）。
   ============================================================ */
.wgd-feature {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* Figma 下 100px */
}

/* 導入文（Figma txt [0,186,1200,290]・16px / lh25.6 / 中央 / wght500） */
.wgd-feature__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* ============================================================
   灰色の箱（Figma Frame 431 → Frame 432 ／ 1040×1135）
   ============================================================ */
.wgd-feature__box {
  max-width: 104rem; /* 固定: Figma 1040px。コンテナの最大幅は固定値で持つ（共通契約 1-6 の例外1） */
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* Figma Frame431 pad-top 45px＝導入文との間 */
  margin-inline: auto;
  padding-block: clamp(4rem, 4.17vw, 6rem); /* Figma pad(60,0,60,0) */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem); /* 当方設計: カンプは左右 0 だが、1440px でも
     中身（最大 830px）より内側に来ないため見た目は変わらず、幅が縮んだときだけ効く逃げ */
  background: var(--color_light);
}

/* 箱内の見出し「WEB版イヤホンガイドの4つの特長」
   Figma: 24px / lh33.6 / 中央 / wght700 / #111111。テキスト枠の高さ 56 は
   「4」の 40px × 行高1.4 で決まっているので、行高は 1.4 のまま置けば自動で一致する。 */
.wgd-feature__box-title {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 24px */
  font-weight: 700;
  line-height: 1.4; /* 33.6 / 24 */
  letter-spacing: .05em;
  text-align: center;
}
/* 「4つの特長」だけ赤。ログは +mixed で色が出ないため 02_feature.png 実測（#B80003）。 */
.wgd-feature__box-accent {
  color: var(--color_main);
}
/* 「4」だけ大きい。ログに数値が無いため 02_feature.png（等倍1200px）を実測。
   字面高 29px ＝ フォントサイズ 40px 相当（同じ行の 24px 文字は字面高 22px）。PNG実測。 */
.wgd-feature__box-num {
  font-size: clamp(3rem, 2.78vw, 4rem); /* 40px */
}

/* ============================================================
   特長カード 4枚（Figma Frame 126 ／ 2列×2行・カード 400×414・gap 30）
   ============================================================ */
.wgd-feature__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30（行間も 30） */
  max-width: 83rem; /* 固定: カード 400×2 ＋ gap 30 = 830px。コンテナの最大幅は固定値で持つ */
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* Figma Frame126 pad-top 45px＝見出しとの間 */
  margin-inline: auto;
}

.wgd-feature__card {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30（イラストと本文の間） */
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
  /* 上端の赤い太帯。inspect ログは stroke=1px としか出ないがカンプは上辺だけ太い。
     02_feature.png（等倍1200px）実測: y496〜503 の 8px が #B80003、
     左右・下辺は白のままで線は無い ＝ PNG実測。 */
  border-top: clamp(.5rem, .56vw, .8rem) solid var(--color_main);
  background: #fff;
}

/* イラスト 340×180（カンプではカード内容幅とちょうど同じ） */
.wgd-feature__img {
  width: 100%;
  max-width: 34rem; /* 固定: Figma 340px。1列表示でカード内容幅が 340 を超えても引き伸ばさない */
  margin-inline: auto;
}
.wgd-feature__img img {
  width: 100%;
}

/* カードのタイトル（Figma 20px / lh28 / 中央 / wght700 / 赤・2行） */
.wgd-feature__title {
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.4; /* 28 / 20 */
  letter-spacing: .05em;
  text-align: center;
}

/* カードの本文（Figma 16px / lh25.6 / 左寄せ / wght500） */
.wgd-feature__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma Frame125 gap 10 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

/* 末尾の注記（Figma txt [0,1384,1200,1410]・16px / 中央） */
.wgd-feature__note {
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma Frame126 pad-bottom 30px */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* ============================================================
   768px 以下は1列（当方設計・SP カンプ無し）。
   769〜1199px は2列のままリキッドで縮める（帯を閉じないので上から継承される）。
   ============================================================ */
@media (max-width: 768px) {
  /* CEO 指示（2026-08-13・SP のみ）: 見出しを「WEB版イヤホンガイドの」で改行する。
     HTML を触らず、赤い「4つの特長」の span をブロックにして改行位置を固定する。 */
  .wgd-feature__box-accent {
    display: block;
  }

  .wgd-feature__list {
    grid-template-columns: 1fr;
    max-width: 40rem; /* 固定: カード 400px。1列でも横に伸びきらないよう上限を置く */
  }
}

/* ===== _wgd/20_difference.css ===== */
/**
 * 20_difference.css — WEB版イヤホンガイド／専用機材との違い（比較表）
 *   ＋ 共通囲み .wgd-note（difference と environment の両方で使う。定義はここ1回だけ）
 *
 * 対象: template-parts/earguide/difference.php
 * 出典: figma-dump/inspect/earguide/03_difference.txt（ノード 250:971 / 1200×1260）
 *       ログに出ない装飾（吹き出しの三角・行罫線の左右位置・囲みの下線）は
 *       figma-dump/screenshots/earguide/03_difference.png（等倍 1200px）をピクセル走査した実測。
 *       実測した行にはその旨をコメントで残している。
 *
 * 1rem = 10px（html{font-size:62.5%}）。
 * 寸法はカンプ幅 1440px 基準の可変指定（clamp の vw 値 ＝ 実測px ÷ 14.4）。
 * clamp の下限は SP カンプが無いため当方設計（上限の6〜7割・本文系は 1.4rem 止まり）。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 * .wgd-inner / --color_text_black は 00_base.css（builder 1）の定義を使うだけ。
 */

/* -----------------------------------------------------------------------------
 * セクション枠
 * ログ: FRAME differnce pad=(60,0,100,0)
 * -------------------------------------------------------------------------- */
.wgd-compare {
  padding-block: clamp(4rem, 4.17vw, 6rem) clamp(6rem, 6.94vw, 10rem);
}

/* 導入文。ログ: 16px / lh25.6（=1.6）/ 中央 / 幅1200（.wgd-inner いっぱい） */
.wgd-compare__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}

/* -----------------------------------------------------------------------------
 * 比較表（div + grid の 15セル。3列×5行）
 *
 * 列比 240 : 400 : 400 → 3fr : 5fr : 5fr（合計 1040 ＝ 104rem）。
 * 表の上端 y378 に対し吹き出しラベルの上端が y341 ＝ 37px はみ出すので、
 * その逃げは .wgd-compare__scroll の padding-top（＝ログ Frame 422 の pad-top 80）で確保する。
 * padding で確保しておくと SP の横スクロール時（overflow-x）にも吹き出しが切れない。
 * -------------------------------------------------------------------------- */
.wgd-compare__scroll {
  padding-top: clamp(5rem, 5.56vw, 8rem); /* ログ Frame 422 pad-top 80（吹き出しの逃げを兼ねる） */
}

.wgd-compare__table {
  --wgd-cmp-row: clamp(6rem, 6.25vw, 9rem);   /* 行の高さ 90（固定せず下限として持つ） */
  --wgd-cmp-pt: clamp(2.4rem, 2.78vw, 4rem);  /* 表の内側 上余白 40（実測 y378→418） */
  --wgd-cmp-pb: clamp(3.6rem, 4.17vw, 6rem);  /* 表の内側 下余白 60（実測 y868→928） */

  display: grid;
  grid-template-columns: 3fr 5fr 5fr;
  max-width: 104rem; /* 固定：カンプの表幅 1040px。1200 の内容幅の中で中央に置く */
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

.wgd-compare__cell {
  --wgd-cmp-pi: clamp(1.2rem, 2.08vw, 3rem); /* 中央・右列の内側左右余白 30（実測 x320→350） */

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wgd-cmp-row);
  padding-inline: var(--wgd-cmp-pi);
}

/* 列の縦罫線（x320 / x720）。セルが縦に連なるので border-left が1本の線に見える */
.wgd-compare__cell:nth-child(3n + 2),
.wgd-compare__cell:nth-child(3n + 3) {
  border-left: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

/* 1行目のセルだけ上余白 40 を内側に持つ（表の上端から本文までの逃げ） */
.wgd-compare__cell:nth-child(-n + 3) {
  min-height: calc(var(--wgd-cmp-row) + var(--wgd-cmp-pt));
  padding-top: var(--wgd-cmp-pt);
}

/* 5行目のセルだけ下余白 60 を内側に持つ */
.wgd-compare__cell:nth-last-child(-n + 3) {
  min-height: calc(var(--wgd-cmp-row) + var(--wgd-cmp-pb));
  padding-bottom: var(--wgd-cmp-pb);
}

/* 行の区切り線。PNG実測で左右が列の内側余白ぶん短い（左列 x115-284・中央 x350-689・右 x750-1089）
   ＝ セルの左右 padding と同じ位置。5行すべての下に引く（最終行にもある） */
.wgd-compare__cell::after {
  position: absolute;
  right: var(--wgd-cmp-pi);
  bottom: 0;
  left: var(--wgd-cmp-pi);
  height: 1px; /* 固定：1px の罫線 */
  background: var(--color_line);
  content: "";
}

.wgd-compare__cell:nth-last-child(-n + 3)::after {
  bottom: var(--wgd-cmp-pb); /* 最終行は下余白 60 の上（実測 y867）に引く */
}

/* 左列（行見出し）。地色 #F6F6F6・内側左右余白 35（実測 x80→115） */
.wgd-compare__cell--label {
  --wgd-cmp-pi: clamp(1.2rem, 2.43vw, 3.5rem);

  background: var(--color_light);
}

.wgd-compare__head {
  color: var(--color_text_black);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 500;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

/* 中央・右列の本文。左列より1段太い（PNG 6倍拡大で左列 500 との差を確認済み） */
.wgd-compare__text {
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

/* セル地の文字色。ログの base 色をそのまま持たせる */
.wgd-compare__text--main {
  color: var(--color_main);
}

.wgd-compare__text--black {
  color: var(--color_text_black); /* Figma text_black #333333 */
}

/* 赤地のセルの中で黒くなる部分（PNG実測 #111111） */
.wgd-compare__plain {
  color: var(--color_dark);
}

/* 黒地のセルの中で赤くなる部分（PNG実測 #B80003） */
.wgd-compare__em {
  color: var(--color_main);
}

/* -----------------------------------------------------------------------------
 * 列の上に浮かぶ吹き出しラベル（1行目のセルの中に置く）
 * ログ: 360×55 / r5 / 影 0 10px 20px rgba(0,0,0,.1) / 18px 白 700 / pad(15,25,15,25)
 *       WEB版 = #B80003・専用機材 = #111111。表上端から 37px 上（y341 対 y378）
 * 三角: PNG実測で見えているのは 幅20 × 高さ13（y396→408・中心 x520 / x920）。
 *       ログの Polygon 36×25 は吹き出しに隠れる分を含んだ図形サイズなので採らない。
 * -------------------------------------------------------------------------- */
.wgd-compare__badge {
  position: absolute;
  top: calc(-1 * clamp(2.4rem, 2.57vw, 3.7rem)); /* 表の上端（＝セルの上端）より 37px 上 */
  left: 50%;
  z-index: 1;
  width: 90%; /* カンプ 360 ÷ 列幅 400。列が可変なので比率で保つ */
  padding: clamp(1rem, 1.04vw, 1.5rem) clamp(1.2rem, 1.74vw, 2.5rem);
  border-radius: 5px; /* 固定：5px の角丸 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1); /* 固定：ログの影をそのまま */
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  transform: translateX(-50%);
}

.wgd-compare__badge::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 13px solid transparent; /* 固定：PNG実測 高さ13px の三角（色は下で指定） */
  border-right: 10px solid transparent; /* 固定：PNG実測 幅20px の半分 */
  border-left: 10px solid transparent;
  content: "";
  transform: translateX(-50%);
}

.wgd-compare__badge--web {
  background: var(--color_main);
}

.wgd-compare__badge--web::after {
  border-top-color: var(--color_main);
}

.wgd-compare__badge--device {
  background: var(--color_dark);
}

.wgd-compare__badge--device::after {
  border-top-color: var(--color_dark);
}

/* -----------------------------------------------------------------------------
 * 共通囲み .wgd-note（difference の「選び方の目安」／environment の「ご利用にあたって」）
 * ログ: 1040幅 / pad30 / 地 #F6F6F6 / 1px #EAEAEA
 *       見出し行 … アイコン＋18px 700・下 pad10・下だけ 1px #EAEAEA（PNG実測で上下左右のうち下のみ）
 *       本文 … 16px / lh25.6 / 見出し行から 10px 下
 * -------------------------------------------------------------------------- */
.wgd-note {
  max-width: 104rem; /* 固定：カンプの囲み幅 1040px */
  margin-inline: auto;
  padding: clamp(1.9rem, 2.01vw, 2.9rem); /* ログ pad30 から内側1px罫線ぶんを引く（common.css .sub-head__text と同じ考え方）。引かないと本文が1文字ぶん早く折り返す */
  background: var(--color_light);
  border: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

.wgd-note__head {
  display: flex;
  align-items: center;
  gap: .4rem; /* 固定：ログ gap=4。アイコンと見出しの間 */
  padding-bottom: .9rem; /* ログ pad-bottom 10 から内側1px罫線ぶんを引いた値 */
  border-bottom: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

.wgd-note__icon {
  flex-shrink: 0;
  width: clamp(2.2rem, 2.01vw, 2.9rem); /* 虫眼鏡 29×29 */
  height: auto;
}

.wgd-note__icon--caution {
  width: clamp(1.8rem, 1.67vw, 2.4rem); /* 注意マーク 24×22 */
}

.wgd-note__title {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.6; /* ログ lh28.8 ÷ 18px */
  letter-spacing: .05em;
}

.wgd-note__text {
  margin-top: 1rem; /* ログ gap=10 */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}

/* 比較表と囲みの間（ログ Frame 422 pad-bottom 45） */
.wgd-compare__note {
  margin-top: clamp(3rem, 3.13vw, 4.5rem);
}

/* -----------------------------------------------------------------------------
 * SP（768px 以下）
 * 比較表は列を潰さず横スクロールにする（吹き出しごとスクロール領域に入れる）。
 * padding-top は上で確保済みなので、はみ出した吹き出しは切れない。
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wgd-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wgd-compare__table {
    min-width: 72rem; /* 固定：これ以下に潰すと 18px→14px でも文字が収まらない（当方設計） */
  }
}

/* ===== _wgd/30_flow.css ===== */
/**
 * 30_flow.css — WEB版イヤホンガイド／flow（ご利用の流れ）
 *
 * Figma  : case（node 250:1076 ／ 1440×636・全幅の灰色帯）
 * inspect: figma-dump/inspect/earguide/04_case_a.txt
 * 実測画像: figma-dump/screenshots/earguide/04_case_a.png（等倍1440px）
 *
 * 使い回す共通クラス（common.css 側・ここでは再定義しない）
 *   .heading-01 系 951〜970行 ／ .sub-head 系 972〜986行 ／ .ar 725行〜
 *   .wgd-inner … _wgd/00_base.css
 *
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 = vw」。
 * clamp の下限は SP カンプが無いため当方設計。
 */

/* ============================================================
   セクション枠（全幅の灰色帯）
   Figma: fill #F6F6F6 / pad=(100,0,100,0) / 内容幅 1200（x120〜1320）
   ============================================================ */
.wgd-flow {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light);
}

/* ============================================================
   5枚のカード列
   Figma: カード 220×230 ×5、両端が内容幅 1200 にちょうど収まる並び。
   間隔は (1200 − 220×5) ÷ 4 = 25px（ログの gap=24 は端数の丸め・実座標は 25px）。
   番号はカードの上に 20px はみ出すので、列の上にその分の余白を取る
   （Figma も wrap に pad-top 20 を置いて同じ逃げを作っている）。
   ============================================================ */
.wgd-flow__list {
  /* 矢印の位置と番号の位置がこの2つに連動するので変数で持つ */
  --wgd-flow-gap: clamp(1.6rem, 1.74vw, 2.5rem); /* カード間 25px */
  --wgd-flow-num-offset: clamp(1.4rem, 1.39vw, 2rem); /* 番号のはみ出し・左位置 20px */

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--wgd-flow-gap);
  margin-top: var(--wgd-flow-num-offset); /* Figma wrap pad-top 20px＝番号が乗る分 */
}

.wgd-flow__item {
  position: relative; /* 番号と矢印の基準 */
}

/* 番号 01〜05（Figma 30px / lh42 / Roboto / 赤・カード左端+20px・カード上端より20px上） */
.wgd-flow__num {
  position: absolute;
  top: calc(-1 * var(--wgd-flow-num-offset));
  left: var(--wgd-flow-num-offset);
  color: var(--color_main);
  font-family: var(--font_eng);
  font-size: clamp(2.2rem, 2.08vw, 3rem); /* 30px */
  font-weight: 500;
  line-height: 1.4; /* 42 / 30 */
  letter-spacing: .05em;
}

/* カード本体（Figma 白地・pad 30・影 shadow01） */
.wgd-flow__card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 同じ行のカードの高さを揃える */
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma effect DROP_SHADOW(0,5 r=20 #000000@0.1) */
}

/* イラストの枠（Figma img 160×100＝カードの内容幅とちょうど同じ） */
.wgd-flow__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 160 / 100; /* Figma の img 枠 */
}
/* 書き出し SVG は1枚ずつ原寸が違うので、160 の枠に対する幅の比で置く。
   こうするとカードが縮んでもカンプと同じ大きさ関係のまま連動する。 */
.wgd-flow__img--01 img { width: 56.25%; }   /* 90 / 160 */
.wgd-flow__img--02 img { width: 60.625%; }  /* 97 / 160 */
.wgd-flow__img--03 img { width: 48.75%; }   /* 78 / 160 */
.wgd-flow__img--04 img { width: 62.5%; }    /* 100 / 160 */
.wgd-flow__img--05 img { width: 51.875%; }  /* 83 / 160 */

/* タイトルの置き場。カンプは1行でも2行でも高さ 50px で、中の文字は上下中央
   （04_case_a.png 実測: 1行の「正式申込」も2行の「お問い合わせ・…」も
   文字の中心が枠の中心 y481 に揃っている）。 */
.wgd-flow__title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(4rem, 3.47vw, 5rem); /* Figma のタイトル枠 50px */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma wrap pad-top 20px＝イラストとの間 */
}
.wgd-flow__title {
  color: var(--color_main);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1.4; /* 25.2 / 18 */
  letter-spacing: .05em;
  text-align: center;
}

/* カード間の矢印（共通 .ar 24×24・赤シェブロン）。
   カンプはカード間の中央かつカードの縦中央（ログ実測: 中心 x352.5 / y420.5、
   カードの中心は x352.5（340と365の中間） / y421）。 */
.wgd-flow__arrow {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: calc(var(--wgd-flow-gap) / 2); /* カード間の中央に置く */
  transform: translate(-50%, -50%);
}

/* ============================================================
   1023px 以下は縦1列（当方設計・SP カンプ無し）。
   5列のままだとカード幅が 150px を割り、2行のタイトルが3行に折れて
   カードの高さが揃わなくなるため、この幅で縦積みに切り替える。
   ============================================================ */
@media (max-width: 1023px) {
  .wgd-flow__list {
    grid-template-columns: 1fr;
    max-width: 34rem; /* 固定: 縦1列でもカードが横に伸びきらないようにする上限 */
    margin-inline: auto;
    /* 矢印を下に置くので、カード間を矢印1個分（24px）＋上下の余白まで広げる */
    --wgd-flow-gap: clamp(4rem, 5.86vw, 6rem);
  }
  /* 下向きの矢印。common.css の .ar--down は transform: rotate(90deg) を持ち
     ここの translate と上書きし合うため、common.css 772行の注記どおり
     translate と rotate を1つの transform にまとめてこちらで持つ。 */
  .wgd-flow__arrow {
    top: 100%;
    left: 50%;
    margin-top: calc(var(--wgd-flow-gap) / 2);
    margin-left: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* ===== _wgd/40_price.css ===== */
/* =============================================================
   40. price（料金プラン）
       Figma node 515:6132 ／ PC 1440×1419
       ログ figma-dump/inspect/earguide/05_case_b.txt
       画像 figma-dump/screenshots/earguide/05_case_b.png（等倍 1440px）

   ■ 数値の出し方
     - リキッド式は「1440px カンプの実測px ÷ 14.4 ＝ vw」。clamp() の上限が実測値。
     - clamp() の下限は SP カンプが無いため当方設計（目安は上限の6〜7割・本文は 1.4rem 以上）。
     - 固定 px / rem を使ったのは (1) コンテナの max-width (2) 1〜5px の線と角丸
       (3) 本文の最小サイズ の3種だけ。いずれも1行コメントで理由を添えている。

   ■ カンプ PNG で実測して補ったもの（ログに出ない情報）
     - 料金の数字だけ 20px（16px の文字と字高を比べて 15px ÷ 12px ＝ 1.25倍）
     - カード頭のアーチ形（赤の厚みが 両端29px → 中央67px）
     - 灰箱の枠線は「見えない」（Figma のストローク色が地色と同じ。#EAEAEA の画素は0）

   ■ 依存（自分では定義しない）
     - .wgd-inner … 00_base.css（builder 1）
     - .heading-01 / .heading-01__title / .heading-01__label … common.css 951〜970行
   ============================================================= */

.wgd-price {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* 実測 上下100px（ROOT frame pad=(100,0,100,0)） */
  background: #fff;                          /* ROOT に塗りが無い＝ページ地の白。灰帯の flow と隣り合うため明示する */
}

/* 見出し。common.css の .heading-01 を流用し、下余白だけ上書きする。
   このセクションだけ sub_head が無く、head_01 自身の下 padding が 50px（他セクションは 16px）。 */
.wgd-price__head {
  padding-bottom: clamp(3rem, 3.47vw, 5rem); /* 実測 50px */
}

/* -------------------------------------------------------------
   料金表
   ------------------------------------------------------------- */
.wgd-price__table-block {
  max-width: 78rem;                         /* 固定：表の内容幅 780px（実測 x330〜1110）。コンテナ幅は固定 rem の取り決め */
  margin-inline: auto;
  margin-bottom: clamp(4rem, 4.17vw, 6rem); /* 実測 60px（Frame 4887 の下 padding） */
}

.wgd-price__table {
  width: 100%;
  border-collapse: collapse; /* 実測：セル間もセル外周も罫線は1px。重ならないよう collapse で描く */
  table-layout: fixed;
}

.wgd-price__table th,
.wgd-price__table td {
  height: clamp(5rem, 5.21vw, 7.5rem);     /* 実測 行高75px。表のセルでは height が最小値として働くので、文字が折り返せば行は伸びる */
  padding: 1rem clamp(1rem, 1.39vw, 2rem); /* 左右は実測20px。上下1remは折り返した文字が罫線に触れないための当方値 */
  border: 1px solid var(--color_line);     /* 実測 1px #EAEAEA */
  font-weight: 700;                        /* 実測：ヘッダー・本文とも wght=700 */
  line-height: 1.4;
  text-align: center;                      /* 実測：Figma の指定は align=LEFT だが auto-layout の中央寄せでセル中央に来る */
}

/* 列比 380 : 400（実測 x330〜710〜1110）。table-layout:fixed なのでヘッダー行の幅が全列を決める。 */
.wgd-price__th--plan {
  width: 48.7179%; /* 380 / 780 */
}

.wgd-price__th {
  background: var(--color_main);
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 実測 18px */
  letter-spacing: .05em; /* 字送りは font-size と対で持つ（em は継承時に px 固定されるため）。
                             実測：ログの文字幅は全て「文字数×文字サイズ×1.05」。
                             例 16px「基本機能」w=67（4×16＋4×0.8＝67.2）、
                                22px「サブガイド機能」w=161（7×22＋7×1.1＝161.7）。
                             common.css は body に字送りを持たないため、font-size のある規則ごとに当てる */
}

.wgd-price__plan {
  background: var(--color_light);
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  letter-spacing: .05em;
}

/* 上の「th, td を中央寄せ」より詳細度を上げる必要があるため .wgd-price__table を前置きする。 */
.wgd-price__table .wgd-price__cell {
  background: #fff;
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  letter-spacing: .05em;
  /* 実測：料金の列だけ右揃え。4行とも文字の右端が 1090px（セル右端1110 − padding20）で揃い、
     文字数の違う「800円…（幅210）」と「1,000円…（幅230）」の左端がずれている。
     ヘッダーの「料金」だけは中央（892〜928＝セル中央910）。 */
  text-align: right;
}

/* 金額の数字だけ大きい。PNG 実測：数字の字高15px に対し同じ行の「1アクセス」の字高は12px＝1.25倍。 */
.wgd-price__num {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 実測 20px */
  letter-spacing: .05em;
}

/* 金額は「800円（税別）」と「/ 1アクセス」の2かたまりで扱い、語中では割らない。
   1行に収まる幅では1行のまま、収まらない幅（375px 等）ではこの2つの境目で改行する。
   成り行きに任せると「800円（税／別）」「1ア／クセス」のように割れるため（当方設計）。 */
.wgd-price__amount,
.wgd-price__access {
  white-space: nowrap;
}

/* セットプランの黒丸バッジ。
   カンプではプラン名がセルの中央にあり、バッジはその左に重ねてある
   （実測：バッジ x374〜430・文字 x440〜、セル中央は 520）。
   そのため名前を基準にした絶対配置にして、名前の中央寄せを崩さない。 */
.wgd-price__plan-name {
  position: relative;
  display: inline-block;
}

.wgd-price__badge {
  position: absolute;
  top: 50%;
  right: calc(100% + clamp(0.6rem, 0.69vw, 1rem)); /* 実測 バッジ右端430 と文字左端440 の間＝10px */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(4rem, 3.89vw, 5.6rem);  /* 実測 56px。図形は padding 任せにせず幅・高さを明示する */
  height: clamp(4rem, 3.89vw, 5.6rem); /* 実測 56px */
  border-radius: 50%;
  background: var(--color_dark);
  color: #fff;
  font-size: clamp(1rem, 0.83vw, 1.2rem); /* 実測 12px。本文ではなくバッジ内のラベルのため 1.4rem 下限の対象外 */
  line-height: 1.3;                       /* 実測 lh15.6 ÷ 12px */
  letter-spacing: 0;                      /* 実測：バッジ内だけ字送り無し（w=36＝3文字×12px ちょうど） */
  white-space: nowrap;
  transform: translateY(-50%);
}

.wgd-price__note {
  margin-top: clamp(1.2rem, 1.39vw, 2rem);  /* 実測 20px（表と注記の間） */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  letter-spacing: .05em;
  font-weight: 500;
  line-height: 1.6; /* 実測 lh25.6 ÷ 16px */
}

/* -------------------------------------------------------------
   機能詳細（灰箱＋カード3枚）
   ------------------------------------------------------------- */
.wgd-price__detail {
  max-width: 116rem;                 /* 固定：灰箱の幅 1160px（実測 x140〜1300）。コンテナ幅は固定 rem の取り決め */
  margin-inline: auto;
  padding: clamp(3rem, 4.17vw, 6rem); /* 実測 上下左右60px */
  background: var(--color_light);
  /* 枠線は引かない。Figma には 2px ストロークがあるが色が地色 #F6F6F6 と同じで、
     カンプ PNG の箱の縁に #EAEAEA の画素が1つも無い（実測）。 */
}

.wgd-price__detail-head {
  margin-bottom: clamp(2rem, 2.08vw, 3rem); /* 実測 30px（見出しブロックとカードの間） */
  text-align: center;
}

.wgd-price__detail-title {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 実測 24px */
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1.4; /* 実測 lh33.6 ÷ 24px */
}

/* 見出し下の黒い短線（CSS で描いてよい図形） */
.wgd-price__detail-line {
  display: block;
  width: clamp(4.8rem, 4.72vw, 6.8rem);       /* 実測 68px */
  height: clamp(0.3rem, 0.28vw, 0.4rem);      /* 実測 4px */
  margin: clamp(1rem, 0.97vw, 1.4rem) auto 0; /* 実測 見出しとの間14px */
  background: var(--color_dark);
}

.wgd-price__cards {
  display: grid;
  /* 3列。カードはカンプ原寸 330px を上限にして中央へ寄せる
     （灰箱の左右 padding が縮む幅域でカードだけ原寸より太る現象を止めるため） */
  grid-template-columns: repeat(3, minmax(0, 33rem));
  justify-content: center;
  gap: clamp(1.6rem, 1.70vw, 2.45rem);         /* 実測 24〜25px（530→554＝24 ／ 884→909＝25） */
  padding-bottom: clamp(2.4rem, 3.47vw, 5rem); /* 実測 50px。灰箱の下だけ 60＋50＝110px 空く（Frame 125 の下 padding） */
}

.wgd-price__card {
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* 実測の影。ぼかしと不透明度は寸法ではないため固定のまま */
}

/* カード頭のアーチ形（赤の天板・下辺が中央で下に膨らむ）。
   Figma は「矩形 330×68」と「楕円 431×212」の重なりで作られている。
   CSS では頭部を overflow:hidden にし、::before に同じ比率の楕円を下端合わせで敷いて再現する。
   カード幅に対する比で持たせているので、カードが縮んでも弧の形が崩れない。
   PNG 実測（カード1・x200〜530）: 赤の厚み 両端29px → 中央67px。
   上の CSS モデルの計算値も 両端29.2px → 中央67px で一致。 */
.wgd-price__card-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 330 / 67;                     /* 実測 カード幅330px に対しアーチの最大高67px */
  padding-top: clamp(0.9rem, 0.90vw, 1.3rem); /* 実測 カード上端から見出しまで13px */
  overflow: hidden;
}

.wgd-price__card-head::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 130.61%;          /* 実測 楕円の幅431px ÷ カード幅330px */
  aspect-ratio: 431 / 212; /* 実測 楕円 431×212px */
  border-radius: 50%;
  background: var(--color_main);
  transform: translateX(-50%);
}

.wgd-price__card-title {
  position: relative; /* 楕円（::before）より前に出す */
  color: #fff;
  font-size: clamp(1.6rem, 1.53vw, 2.2rem); /* 実測 22px */
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1.4;                         /* 実測 lh30.8 ÷ 22px */
}

.wgd-price__card-body {
  padding-top: clamp(0.8rem, 0.69vw, 1rem);                                       /* 実測 アーチ下端から10px */
  padding-inline: clamp(2rem, 2.08vw, 3rem);                                      /* 実測 左右30px */
  padding-bottom: clamp(2rem, 2.08vw, 3rem);                                      /* 実測 下30px */
}

.wgd-price__card-img {
  width: 100%; /* 実測 270×120＝カード内容幅いっぱい */
  height: auto;
}

.wgd-price__card-text {
  margin-top: clamp(0.8rem, 0.69vw, 1rem); /* 実測 イラストとの間10px */
  font-size: 1.4rem;                       /* 実測 14px。本文の最小サイズのため可変にしない */
  letter-spacing: .05em;
  font-weight: 500;
  line-height: 1.6;                        /* 実測 lh22.4 ÷ 14px */
  text-align: center;
}

/* 赤太字の塗り分け（ログは +mixed としか出ないため PNG 目視で範囲を特定） */
.wgd-price__card-text strong {
  color: var(--color_main);
  font-weight: 700;
}

.wgd-price__fee {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.3rem, 0.28vw, 0.4rem);         /* 実測 2行の字面の間隔から逆算（箱65px に収める） */
  min-height: clamp(5.5rem, 4.51vw, 6.5rem);  /* 実測 箱の高さ65px。中身が増えれば伸びる */
  margin-top: clamp(1.2rem, 1.11vw, 1.6rem);  /* 実測 説明文との間16px */
  padding: 1rem clamp(1rem, 1.04vw, 1.5rem);  /* 実測 上下15px相当（min-height で高さを作るため上下は控えめに）・左右は実測15px */
  border-radius: 5px;                         /* 固定：角丸5px（5px 以下は固定でよい取り決め） */
  background: var(--color_main_light);
  text-align: center;
}

.wgd-price__fee-label {
  font-size: 1.4rem; /* 実測 14px。本文の最小サイズのため可変にしない */
  letter-spacing: .05em;
  font-weight: 500;
  line-height: 1.2; /* 実測 lh=14（＝1.0）。1.0 だと字面が詰まるので 1.2 にし、箱の高さ65px に収まる範囲に留める */
}

.wgd-price__fee-value {
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px（数字だけ .wgd-price__num で20px） */
  letter-spacing: .05em;
  font-weight: 700;
  line-height: 1.2;                         /* 実測 lh=16（＝1.0）。上と同じ理由で 1.2 */
}

/* -------------------------------------------------------------
   1023px 以下：機能詳細カードを縦1列にする（当方設計）
   3列のままだとカード幅が 280px を切り、270×120 のイラストと2行の説明文が窮屈になるため。
   カードは原寸 330px を超えて伸ばさず中央に置く。
   ------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wgd-price__cards {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .wgd-price__card {
    width: 100%;
    max-width: 33rem; /* 固定：カンプのカード原寸330px。1列でも横に伸ばさない */
  }
}

/* -------------------------------------------------------------
   768px 以下：料金表は2列のまま縮める（実装指示書 決定事項2）
   バッジだけは文字の左に置くと幅が足りずセルからはみ出すため、文字の上へ積む（当方設計）。
   ------------------------------------------------------------- */
@media (max-width: 768px) {
  .wgd-price__plan-name {
    display: block;
  }

  .wgd-price__badge {
    position: static;
    margin: 0 auto .8rem;
    transform: none;
  }
}

/* ===== _wgd/50_howto.css ===== */
/* =============================================================================
 * 50_howto.css — WEB版イヤホンガイド｜操作方法（タブ切替）
 *
 * Figma  node 515:6075 / 1200×801
 *   inspect  figma-dump/inspect/earguide/06_case_c.txt（タブ1のみ表示の通常ダンプ）
 *            figma-dump/inspect/earguide/06_howto_all.txt（タブ2・3を可視化した全体）
 *            figma-dump/inspect/earguide/06b_howto_tab2.txt / 06c_howto_tab3.txt
 *   カンプ   figma-dump/screenshots/earguide/06_case_c.png（等倍 1200px）
 * HTML   template-parts/earguide/howto.php
 * JS     assets/js/earguide-tab.js
 *
 * リキッド式は 1440px カンプ基準（実測px ÷ 14.4 ＝ vw）。
 * 下限は SP カンプが無いため当方設計（上限の6〜7割・本文は 1.6rem を下回らせない）。
 * 内容幅は共通枠 .wgd-inner（00_base.css・1200px）に乗せている。
 *
 * ログに出ない装飾が1つある＝活性タブ上端の赤線。
 * ログは h3_deco の stroke=1px としか出さないが、06_case_c.png を等倍で読むと
 * y246〜251 の6px（#B80003・タブ幅いっぱい x0〜394）。PNG 実測値を採用する。
 * ========================================================================== */

.wgd-howto {
  /* Figma FRAME case pad=(60,0,100,0)。上60px / 下100px */
  padding-block: clamp(4rem, 4.17vw, 6rem) clamp(6rem, 6.94vw, 10rem);
}

/* .heading-01（下 16px）と .sub-head（下 50px）は common.css の余白がカンプと同値のため
   このファイルでは触らない（Figma head_01 pad-bottom 16 / sub_head pad-bottom 50）。 */


/* -----------------------------------------------------------------------------
 * タブ列（Figma Frame 4923 / 1200×83）
 *
 * カンプ実測（06_case_c.png 等倍）
 *   タブ1（活性）  x0〜394（395px）・y246〜328（83px）・白地
 *                  上端 y246〜251 に赤6px、左右に #EAEAEA 2px
 *   タブ2・3（非活性） 396px / 395px・y246〜326（81px）・#F6F6F6・枠線なし
 *   タブ間の隙間   7px（x395〜401 / x798〜804）
 *   列の下罫線     y327〜328 の #EAEAEA 2px（隙間の位置にも通っている）
 * 活性タブだけ2px下に伸びてこの下罫線を白で覆い、パネルと地続きに見せている。
 * -------------------------------------------------------------------------- */
/* 3等分は flex ではなく grid で作る。flex-basis:0 だと各タブの padding と
   活性タブの左右ボーダー分だけ幅が食い違い、活性タブが約3px 太くなるため。 */
.wgd-howto__tablist {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 395:396:395＝実質3等分。カンプの1px差は Figma 側の端数 */
  gap: clamp(.4rem, .49vw, .7rem); /* 7px */
  border-bottom: 2px solid var(--color_line);
}

.wgd-howto__tab {
  min-width: 0;
  /* 上 14px＋透明ボーダー6px＝文字の上端がタブ上端から20px（活性・非活性で同じ y266） */
  padding: clamp(1rem, .97vw, 1.4rem) clamp(1rem, 1.39vw, 2rem) clamp(1.8rem, 1.74vw, 2.5rem);
  border: 0;
  border-top: 6px solid transparent; /* 活性時の赤線と同じ厚み分を非活性でも確保して文字位置を揃える */
  border-radius: 0; /* ブラウザ既定のボタン角丸を消す（common.css .btn 群と同じ扱い） */
  background: var(--color_light);
  color: var(--color_dark);
  font-family: inherit;
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* Figma 20px */
  font-weight: 700;
  line-height: 1.8; /* Figma lh 36 / 20px */
  letter-spacing: .05em;
  text-align: center;
  cursor: pointer;
  transition: var(--transition, all .3s ease);
}

/* カンプに状態指定は無い。押せることが分かるよう既存ボタン（.top-contact__btn 等）に倣って付ける。 */
.wgd-howto__tab:hover {
  color: var(--color_main);
}

.wgd-howto__tab[aria-selected="true"] {
  margin-bottom: -2px; /* 列の下罫線2px を覆う（カンプは活性タブだけ 83px と2px高い） */
  border-top-color: var(--color_main); /* PNG 実測 6px #B80003・ログには出ない装飾 */
  border-right: 2px solid var(--color_line);
  border-left: 2px solid var(--color_line);
  background: #fff;
  color: var(--color_main);
  cursor: default;
}


/* -----------------------------------------------------------------------------
 * パネル（Figma Frame 430 / 1200×372・stroke 2px #EAEAEA INSIDE・pad 60）
 * 上辺だけ罫線が無い（カンプ実測：y329〜330 は透明、左右 x0〜1 / x1198〜1199 と
 * 下 y699〜700 にだけ #EAEAEA がある）。上辺はタブ列の下罫線が兼ねている。
 * -------------------------------------------------------------------------- */
.wgd-howto__panel {
  padding: clamp(2.4rem, 4.17vw, 6rem); /* Figma pad 60 */
  border: 2px solid var(--color_line);
  border-top: 0;
}

.wgd-howto__panel[hidden] {
  display: none; /* .wgd-howto__panel に display を当てても hidden が勝つようにする */
}


/* -----------------------------------------------------------------------------
 * ステップ（Figma Frame 427 / 各240×252・gap 30）
 * 4枚（1050px）を内容幅1080px の中で中央寄せ＝左右に15pxずつ余る配置。
 * grid の minmax(0,24rem) で「上限240px・入らなければ縮む」を作り、
 * justify-content:center で余りを左右に均等に置いてカンプと同じ見え方にする。
 * -------------------------------------------------------------------------- */
.wgd-howto__steps {
  --step-gap: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30 */
  display: grid;
  grid-template-columns: repeat(var(--step-cols, 3), minmax(0, 24rem)); /* 既定はタブ2・3の3枚 */
  justify-content: center;
  gap: var(--step-gap);
}

.wgd-howto__steps--4 {
  --step-cols: 4; /* タブ1（メインガイドの操作）だけ4枚 */
}

.wgd-howto__step {
  position: relative; /* 番号と矢印の基準 */
  /* 番号は写真の上へ 10px はみ出す絶対配置。Figma でもこのはみ出しは枠の中に入っていて
     （Frame 425 の上端 y389 ＝ 番号の上端／写真の上端は y399）、その分をここで確保する。
     入れないとパネルが11px低くなり、以降のセクション位置がカンプとずれる。
     矢印の縦位置（top:50%）もこの枠を基準にするため、Figma と同じ中心になる。 */
  padding-top: clamp(.8rem, .69vw, 1rem);
}

.wgd-howto__figure {
  position: relative;
}

/* 写真 240×180（実体は2倍の 480×360）。img の共通リセットで width:100%/height:auto。 */
.wgd-howto__photo {
  width: 100%;
}

/* 番号 01〜04。カンプ実測（06_case_c.png）で数字の墨は y389〜409＝写真上端 y399 を
   中心に上下10pxずつ。写真左端 +10px から始まる（Figma テキスト枠 x85 / 写真 x75）。 */
.wgd-howto__num {
  position: absolute;
  top: 0;
  left: clamp(.6rem, .69vw, 1rem); /* Figma 写真左端 +10px */
  transform: translateY(-50%);
  color: var(--color_main);
  font-family: var(--font_eng);
  font-size: clamp(2.2rem, 2.08vw, 3rem); /* Figma 30px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
}

.wgd-howto__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma gap 10 */
  font-size: 1.6rem; /* Figma 16px。本文は縮めない */
  font-weight: 500;
  line-height: 1.6; /* Figma lh 25.6 / 16px */
  letter-spacing: .05em;
}

/* ステップ間の矢印（既存 .ar 24×24）。隙間30pxの中央＝ステップ右端から3px外。
   縦位置はステップ1枚（番号のはみ出しを含む枠）の中央。Figma も同じ枠だが
   矢印だけ手置きで中心から少しずれており（タブ1は中心 y515 に対し y511＝4px上、
   タブ2・3は逆に5px下）、3パネルで揃うよう中央を採る。 */
.wgd-howto__arrow {
  position: absolute;
  top: 50%;
  right: calc(-1 * (var(--step-gap) / 2 + 1.2rem));
  transform: translateY(-50%);
}


/* -----------------------------------------------------------------------------
 * 1023px 以下（SP カンプ無し・当方設計）
 * 4枚横並びのままだと写真が204pxまで痩せて説明文が3行になるため2列に折り返す。
 * 折り返すと矢印の向き（右向き）が順路と合わなくなるので隠す。
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wgd-howto__steps {
    grid-template-columns: repeat(2, minmax(0, 30rem));
  }

  /* 3枚のパネルは3枚目が単独行になるため、その行の中央に置く */
  .wgd-howto__step:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 30rem;
  }

  .wgd-howto__arrow {
    display: none;
  }
}


/* -----------------------------------------------------------------------------
 * 768px 以下（SP カンプ無し・当方設計）
 * タブは横3分割だと1枚あたり約110pxで「サブガイドの操作（利用する場合）」が
 * 4行になるため縦積み1列にする。縦積みではタブとパネルの地続き表現が成立しないので、
 * 活性タブは四辺に枠を持つ札にし、パネルにも上辺の罫線を戻す。
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wgd-howto__tablist {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }

  .wgd-howto__tab[aria-selected="true"] {
    margin-bottom: 0;
    border-bottom: 2px solid var(--color_line);
  }

  .wgd-howto__panel {
    border-top: 2px solid var(--color_line);
  }

  .wgd-howto__steps {
    grid-template-columns: minmax(0, 24rem);
  }

  .wgd-howto__step:last-child:nth-child(odd) {
    max-width: 24rem;
  }
}

/* ===== _wgd/60_environment.css ===== */
/**
 * 60_environment.css — WEB版イヤホンガイド／利用に必要な環境
 *
 * 対象: template-parts/earguide/environment.php
 * 出典: figma-dump/inspect/earguide/07_difference2.txt（ノード 375:1644 / 1200×1498）
 *       ログに出ない装飾（罫線の位置・箇条書きの黒点）は
 *       figma-dump/screenshots/earguide/07_difference2.png（等倍 1200px）をピクセル走査した実測。
 *
 * 1rem = 10px（html{font-size:62.5%}）。
 * 寸法はカンプ幅 1440px 基準の可変指定（clamp の vw 値 ＝ 実測px ÷ 14.4）。
 * clamp の下限は SP カンプが無いため当方設計（上限の6〜7割・本文系は 1.4rem 止まり）。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 * 赤帯見出しは common.css の .heading3、囲みは 20_difference.css の .wgd-note を使うだけ（再定義しない）。
 */

/* -----------------------------------------------------------------------------
 * セクション枠
 * ログ: FRAME differnce[375:1644] pad=(60,0,100,0)
 * -------------------------------------------------------------------------- */
.wgd-env {
  padding-block: clamp(4rem, 4.17vw, 6rem) clamp(6rem, 6.94vw, 10rem);
}

/* head_01 / sub_head は 1200 幅、それ以外（赤帯・表・箇条書き・囲み）は 1040 幅 */
.wgd-env__body {
  max-width: 104rem; /* 固定：カンプの内容幅 1040px */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 推奨機種表
 * ログ: 外枠 1px #EAEAEA / 列 240:400:400 / ヘッダー行 94・データ行 140
 *       ヘッダー3セルとも地 #F6F6F6・18px 500（種別だけ #333333）
 *       データ 18px 700（種別だけ #333333）
 * PNG実測: 縦の区切り線は無し。横の区切り線は y557・y697 の2本だけ
 *          （ヘッダー行の下と最終行の下には無い）。
 * -------------------------------------------------------------------------- */
.wgd-env__scroll {
  margin-bottom: clamp(4rem, 4.17vw, 6rem); /* ログ Frame 4838 pad-bottom 60 */
}

.wgd-env__table {
  width: 100%;
  border: 1px solid var(--color_line); /* 固定：1px の罫線 */
  border-collapse: collapse;
  table-layout: fixed;
}

/* 列幅は 1040 に対する比率（240 / 400 / 残り） */
.wgd-env__table th:first-child,
.wgd-env__table td:first-child {
  width: 23.0769%;
}

.wgd-env__table th:nth-child(2),
.wgd-env__table td:nth-child(2) {
  width: 38.4615%;
}

.wgd-env__table th,
.wgd-env__table td {
  padding: clamp(1.2rem, 1.39vw, 2rem) clamp(1.2rem, 2.08vw, 3rem);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
  vertical-align: middle;
}

.wgd-env__table thead tr {
  height: clamp(7rem, 6.53vw, 9.4rem); /* 行の高さ 94（table の height は下限として効く） */
}

.wgd-env__table tbody tr {
  height: clamp(10rem, 9.72vw, 14rem); /* 行の高さ 140 */
}

/* データ行どうしの区切り線だけ引く（ヘッダー行の下・最終行の下には無い） */
.wgd-env__table tbody tr:not(:last-child) > * {
  border-bottom: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

.wgd-env__th {
  background: var(--color_light);
  color: var(--color_dark);
  font-weight: 500;
}

.wgd-env__th--kind {
  color: var(--color_text_black); /* Figma text_black #333333 */
}

.wgd-env__kind {
  color: var(--color_text_black);
  font-weight: 700;
}

.wgd-env__td {
  color: var(--color_dark);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * その他の必須環境・準備するもの（箇条書き）
 * ログ: 項目 18px / lh28.8 / 500・項目間 gap10・※注記 16px / lh25.6・項目との間 gap4
 * PNG実測: 黒点は直径5px・#111111、リスト左端から 11px。
 *          本文の左端はリスト左端から 28px（項目・※注記とも同じ位置に揃う）。
 * -------------------------------------------------------------------------- */
.wgd-env__list {
  margin-bottom: clamp(1.6rem, 1.39vw, 2rem); /* ログ Frame 439 pad-bottom 20 */
}

.wgd-env__item {
  position: relative;
  padding-left: clamp(2rem, 1.94vw, 2.8rem); /* 本文の左端 28 */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 500;
  line-height: 1.6; /* ログ lh28.8 ÷ 18px */
  letter-spacing: .05em;
}

.wgd-env__item + .wgd-env__item {
  margin-top: 1rem; /* ログ gap=10 */
}

.wgd-env__item::before {
  position: absolute;
  top: .78em; /* 1行目の行送り 28.8px の中で黒点の上端が 14px（PNG実測 y990・行頭 y976） */
  left: clamp(.8rem, .76vw, 1.1rem); /* PNG実測：リスト左端から 11px */
  width: .5rem; /* 固定：PNG実測 直径5px。可変にすると点が消えるため */
  height: .5rem;
  border-radius: 50%;
  background: var(--color_dark); /* PNG実測 #111111 */
  content: "";
}

.wgd-env__item-note {
  display: block;
  margin-top: .4rem; /* ログ Frame 438 gap=4 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
}

/* -----------------------------------------------------------------------------
 * SP（768px 以下）
 * 機種表は列を潰さず横スクロールにする（当方設計）。
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wgd-env__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wgd-env__table {
    /* 固定：横スクロール時の表の最小幅（当方設計）。
       設計時の目安は 68rem だったが、実測すると 68rem では Android 行の
       「AQUOS sense7 / sense8 / sense9」が2行に割れてカンプの4行構成が崩れる。
       Chrome で 375 / 414 / 600px を実測し、割れなくなる境目 70rem に余裕を足して 72rem にした。 */
    min-width: 72rem;
  }
}

/* ===== _wgd/65_demo.css ===== */
/* =============================================================================
 * 65_demo.css — WEB版イヤホンガイド｜デモ体験の準備中のご案内
 *
 * カンプ無し。出典＝ケンネット様のご指示（Novio 2026-08-19 16:14）。
 * HTML  template-parts/earguide/demo-notice.php
 *
 * 体裁は当方設計。CONTACT 帯（70_contact.css）の直前に置くため、色を持たせず
 * 白地・中央寄せにして帯とぶつからないようにしている。左右の余白と内容幅は
 * .wgd-contact__inner（70_contact.css 27〜33行）と同じ 100rem・clamp(2rem, 2.75vw, 4rem)。
 * 暫定配置（確定カンプ待ち）：デモ用 URL 確定後は中身を QR コードへ差し替える。
 * ========================================================================== */

.wgd-demo {
  padding-block: clamp(5rem, 5.56vw, 8rem); /* 1440px で 80px。CONTACT 帯の上下 80px にそろえた */
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 70_contact.css 22行と同値 */
  background: #fff;
}

.wgd-demo__inner {
  max-width: 100rem; /* 70_contact.css 31行と同値 */
  margin-inline: auto;
  text-align: center;
}

.wgd-demo__txt {
  color: var(--color_dark);
  font-size: clamp(1.5rem, 1.11vw, 1.6rem); /* 本文と同じ 16px。下限は SP の 15px */
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .05em;
}

.wgd-demo__btn-wrap {
  margin-top: clamp(2.4rem, 2.78vw, 4rem); /* 1440px で 40px */
}

/* .btn（common.css 826行）は 320×60 の固定幅。中央に置くだけ。 */
.wgd-demo__btn {
  margin-inline: auto;
}

@media (max-width: 768px) {
  /* 案内文は2文なので、狭い画面では PC 用の改行を消して自然に流す。 */
  .wgd-demo__txt .br-pc {
    display: none;
  }
}

/* ===== _wgd/70_contact.css ===== */
/* =============================================================================
 * 70_contact.css — WEB版イヤホンガイド｜contact（CONTACT 帯）
 *
 * Figma  node 575:7249 / 1440×426
 *   inspect  figma-dump/inspect/earguide/08_contact.txt
 *   カンプ   figma-dump/screenshots/earguide/08_contact.png（等倍 1440px）
 * HTML   template-parts/earguide/contact.php
 *
 * 左カラムの数値は assets/css/top.css 1935〜2025行（.top-contact 系）からの転記。
 * 各宣言に転記元の行を書いてある。SP の落とし方は top.css 2320〜2375行が手本。
 * top.css はトップ限定読み込みのため本ページでは効かず、クラスも別（wgd-contact__*）。
 *
 * トップ版との差は右カラムだけ＝ボタン2本 → 1本＋その上に黒い吹き出し。
 * リキッド式は 1440px カンプ基準（実測px ÷ 14.4 ＝ vw）。文字の下限は top.css の
 * SP 値（2337〜2345行）を採り、768px の段差ではなく連続で縮むようにしている。
 * ========================================================================== */

.wgd-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ（値は common.css の同枠と同じ）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.wgd-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1945行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（top.css 1950〜2025行の転記）
 * -------------------------------------------------------------------------- */
.wgd-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.wgd-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.wgd-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.wgd-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem / 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.wgd-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.wgd-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.wgd-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.wgd-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.wgd-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem / 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.wgd-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem / 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}


/* -----------------------------------------------------------------------------
 * 右カラム（トップには無い形。Figma 08_contact.txt と 08_contact.png の実測）
 *
 * カンプ実測
 *   ボタン    x620〜1219（600px）・y153〜272（120px）・白地・影 0 10px 30px #860D08@30%
 *   吹き出し  x716〜1123（408px）・y105〜157（53px）・#111111・角丸5px・影 0 10px 20px #000@10%
 *   三角      35×25・中心 x920.5・y146〜171（吹き出し下端158 から13px はみ出す）
 *   ボタンの上端153 に吹き出し下端158 が 5px 重なる
 * 吹き出しは Figma でもボタンの外に絶対配置。流し込みにすると
 * ボタンの中心が帯の中心（y213）からずれるため、CSS でも絶対配置にしている。
 * -------------------------------------------------------------------------- */
.wgd-contact__action {
  position: relative;
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  min-width: 0;
}

.wgd-contact__balloon {
  position: absolute;
  bottom: calc(100% - .5rem); /* ボタン上端に 5px 重ねる */
  left: 50%;
  z-index: 1; /* 後ろに来るボタン（position:relative）より前に置き、三角を隠されないようにする */
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  padding: clamp(1.2rem, 1.04vw, 1.5rem) clamp(1.6rem, 1.74vw, 2.5rem); /* Figma pad(15,25,15,25) */
  border-radius: 5px; /* Figma r=5 */
  background: var(--color_dark);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,10 r=20 #000000@0.1) */
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* Figma 18px */
  font-weight: 700;
  line-height: 1.3; /* Figma lh 23.4 / 18px */
  letter-spacing: .05em;
  text-align: center;
}

/* 下向きの三角（CSS で描いてよい図形の1つ）。カンプの多角形 35×25 をそのまま置き、
   吹き出しに 12px 食い込ませることで見える部分が実測どおり 13px になる。
   図形のため固定 px（縮めると先端が潰れる）。 */
.wgd-contact__balloon::after {
  content: "";
  position: absolute;
  top: calc(100% - 12px);
  left: 50%;
  transform: translateX(-50%);
  border-top: 25px solid var(--color_dark);
  border-right: 17.5px solid transparent;
  border-left: 17.5px solid transparent;
}

.wgd-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2041行と同値（Figma 120px） */
  /* 左右とも 10.4rem にすることで、文字の中心がボタンの中心（カンプ x920）に来て、
     かつ左のアイコン（左40px＋64px）と右の矢印（右20px＋24px）に文字が重ならない。 */
  padding-inline: 10.4rem;
  background: #fff;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2042行と同値 */
  color: var(--color_main);
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙＝白地に内側 2px の赤枠。
   box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.wgd-contact__btn:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.wgd-contact__btn-icon {
  position: absolute; /* top.css 2061行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.wgd-contact__btn-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* カンプは2行とも左そろえ（トップ版は中央そろえ） */
  text-align: left;
}

/* 1行目。ログは +mixed（行ごとに文字サイズが違う）としか出ないため 08_contact.png を実測。
   墨の高さ19px・幅294px から 20px と判定（Figma のテキスト枠 w=298 とも一致）。 */
.wgd-contact__btn-lead {
  font-size: clamp(1.6rem, 1.39vw, 2rem);
  font-weight: 700;
  line-height: 1.3; /* 2行目と同じ比率（ログの lh 31.2 ÷ 24px）。行間の実測31px とも合う */
  letter-spacing: .05em;
}

/* 2行目。墨の高さ22px・幅220px（9文字）から 24px。ログの size=24 と一致。 */
.wgd-contact__btn-main {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
}

.wgd-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* -----------------------------------------------------------------------------
 * 1023px 以下（SP カンプ無し・当方設計）
 * 2カラムのままだと右カラムが 596px 以下になり、ボタンの中の文字（最長 298px）と
 * 左右のアイコン・矢印（合わせて 148px）が競って折り返しが増える。
 * トップ版と違いボタンが1本しかないので、縦積みにしても帯が間延びしない。
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wgd-contact__inner {
    flex-direction: column;
    align-items: stretch;
    /* 6rem。吹き出し（53px）がボタンの外へ出るため、4rem だと営業時間の枠との間が
       4px しか空かない。768px 以下は吹き出しを流れの中に戻すので 4rem に落とす。 */
    gap: 6rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px に左右そろえて置く
     （営業時間の枠だけが 850px まで伸びて間延びするのを防ぐ） */
  .wgd-contact__intro,
  .wgd-contact__action {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* -----------------------------------------------------------------------------
 * 768px 以下（top.css 2320〜2375行の SP を手本・当方設計の追記あり）
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wgd-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .wgd-contact__inner {
    gap: 4rem; /* top.css 2327行 */
  }

  /* 吹き出しを絶対配置のままにすると、文字が折り返して2行になった時に
     上の営業時間の枠へかぶる。SP だけ通常の流れに置き、5px の重なりは
     負のマージンで作る（当方設計）。 */
  .wgd-contact__balloon {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0 auto -.5rem;
    transform: none;
  }

  .wgd-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 3.6rem 2rem 6.4rem; /* アイコンを小さくした分、左右を詰めて文字の幅を確保 */
  }

  .wgd-contact__btn-icon {
    left: 1.2rem; /* top.css 2356行は 1.6rem / 5.6rem。ボタン内の文字幅を優先して一段小さくした */
    width: 4.8rem;
    height: 4.8rem;
  }

  /* 375px では1行目「WEB版イヤホンガイドについて」が 16px だと 252px 必要で
     入る幅が 235px しかなく1文字だけ折り返す。1段小さくして1行に収める
     （トップも SP でボタン内の小さい行を落としている＝top.css 2364行）。 */
  .wgd-contact__btn-lead {
    font-size: 1.5rem;
  }

  .wgd-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}