@charset "UTF-8";
/* =============================================================================
 * purchase.css — イヤホンガイドの購入（固定ページ slug: purchase）
 *
 * Figma  : 下層ページ under（node 402:2437 ／ 1440×7167）
 * inspect: figma-dump/inspect/purchase_final/00_purchase_under.txt（2026-08-13 デザイン確定版）
 * カンプ : figma-dump/screenshots/purchase_final/00_purchase_under.png（等倍 1440px・確定版）
 * HTML   : page-purchase.php ／ template-parts/under/purchase/*.php
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」。
 * clamp の下限は SP カンプが無いため当方設計（本文系は 1.4rem を下回らせない）。
 * 固定 px/rem を使うのは (1)コンテナの最大幅 (2)1px/2px の罫線・角丸5px以下
 * (3)固定でないと整わない場合 のみ。使った箇所には理由を1行書いている。
 *
 * common.css からそのまま使う既存クラス（ここでは再定義しない）
 *   .page-title / .page-title__title … 1117〜1133行
 *   .heading-01 / __title / __label  … 951〜970行（下余白 1.6rem 込み）
 *   .sub-head / .sub-head__text      … 972〜986行（下余白 5rem 込み）
 *   .btn                              … 824行（320×60・#111111・影 0 10 30 rgba(0,0,0,.2)）
 *   .ar / .ar--white / .ar--down      … 725行〜
 *
 * ブレイクポイントは max-width の単独指定のみ（min-width で下限を切らない）。
 *   基本 1199px は使わず、崩れる 1023px と SP の 768px だけを置いている。
 * ========================================================================== */


/* ============================================================
   0. 内容枠 .pur-inner
   1ページ目の .wgd-inner（_wgd/00_base.css）と同じ式。
   common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため
   1440px 表示で内容幅が 1121px になり、本ページの内容幅 1200px と食い違う。
   .bread / .footer__inner と同じ「1200の内容＋外側に左右余白」方式にする。
   ============================================================ */
.pur-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 固定: 1200 + 80 = 1280。1280px以上で内容幅がカンプどおり1200pxになる */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.7778vw, 4rem); /* 1440px でちょうど 40px（40÷14.4）＝カンプの左右余白 */
}


/* ============================================================
   1. intro（イヤホンガイドの購入をご検討の方へ）
   Figma FRAME 購入検討の方へ [120,382,1320,772] ／ pad=(0,0,100,0)
   ============================================================ */
.pur-intro {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* Figma 下 100px。上は 0（パンくずの下余白がそのまま効く） */
}

/* Figma txt [200,568,1240,672]・16px / lh25.6 / 中央 / wght500 */
.pur-intro__lead {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px（1200 の内側にさらに 80px ずつ入る） */
  margin-inline: auto;
  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;
}


/* ============================================================
   2. case（購入がおすすめのケース）
   Figma FRAME おすすめのケース [120,772,1320,1830] ／ pad=(60,0,100,0)
   カード 330×280・白地・影 0 0 20 rgba(0,0,0,.1)・pad 30・gap 24
   3枚＋2枚（2列目は中央寄せ）
   ============================================================ */
.pur-case {
  padding-top: clamp(4rem, 4.17vw, 6rem);     /* Figma 上 60px */
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* Figma 下 100px */
}

.pur-case__list {
  /* 番号のはみ出し量とカード間の間隔を他の指定から参照するので変数で持つ */
  --pur-case-gap: clamp(1.6rem, 1.67vw, 2.4rem);       /* Figma gap 24px */
  --pur-case-num-offset: clamp(1.4rem, 1.39vw, 2rem);  /* Figma 番号 20px（左位置・上へのはみ出し） */

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 2列目の2枚を中央に置く（Figma も x378〜1062 で中央） */
  gap: var(--pur-case-gap);
  max-width: 104rem; /* 固定: Figma のカード枠 1040px（カード330×3＋gap24×2＝1038） */
  margin-inline: auto;
}

.pur-case__item {
  position: relative; /* 番号の基準 */
  width: calc((100% - var(--pur-case-gap) * 2) / 3);
  max-width: 33rem; /* 固定: Figma カード幅 330px。1列になっても伸びきらせない */
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
  background: #fff;
  /* Figma effect=DROP_SHADOW(0,0 r=20 #000000@0.1)。
     ログには stroke=1px #EAEAEA もあるが purchase.png ではカードの4辺とも線が出ておらず
     （x201/x530/y1021/y1300 いずれも白）、影だけが見えている。カンプの見た目に合わせて枠線は置かない。 */
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

/* 番号 01〜05（Figma 30px / lh42 / Roboto / 赤・カード左端+20px・カード上端より20px上）
   1ページ目の flow の番号（_wgd/30_flow.css 48行）と同じ作り */
.pur-case__num {
  position: absolute;
  top: calc(-1 * var(--pur-case-num-offset));
  left: var(--pur-case-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;
}

/* 写真 270×150（書き出しは2倍の 540×300） */
.pur-case__img img {
  width: 100%;
}

/* Figma 18px / lh25.2 / 中央 / wght700 / 赤。写真との間は wrap の pad-top 20px */
.pur-case__title {
  margin-top: clamp(1.4rem, 1.39vw, 2rem);
  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;
}

/* 下向きの二重シェブロン（Figma Frame 454 [120,1618,1320,1678]・高さ60・中に 34×20 の図形）
   支給素材 purchase_06.svg は 1200×60 のキャンバスの中央に図形が置かれている。
   background-size を指定せず素材そのままの大きさで中央に敷くことで、幅が変わっても
   図形が 34×20 のまま中央に出る（img で置くと幅に比例して図形まで縮む）。 */
.pur-case__chevron {
  height: clamp(4rem, 4.17vw, 6rem); /* Figma 60px（上下 pad 20 ＋ 図形 20） */
  /* カンプ実測: カード下端 1602 → シェブロン上端 1618 ＝ 16px
     （Figma の wrap は高さ 600 固定で、中身 584 との差 16px が下に空いている）。
     ここを 10px にすると以降のセクションが 6px ずつ上にずれる。 */
  margin-top: clamp(1.2rem, 1.11vw, 1.6rem);
  background: url("../images/purchase/purchase_06.svg") no-repeat center;
}

/* Figma txt [200,1678,1240,1730]・16px / lh25.6 / 中央 */
.pur-case__note {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px（1200 の内側にさらに 80px ずつ入る。intro のリード文と同じ） */
  margin-inline: auto;
  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;
}


/* ============================================================
   3. benefit（購入のメリット）
   Figma FRAME 購入メリット [0,1830,1440,2896] ／ 全幅の灰色帯・pad=(100,0,100,0)
   カード 330×328・白地・上辺だけ赤い太帯・pad=(40,30,30,30)・gap 24
   ============================================================ */
.pur-benefit {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light); /* Figma base_color #F6F6F6 */
}

.pur-benefit__list {
  --pur-benefit-gap: clamp(1.6rem, 1.67vw, 2.4rem); /* Figma gap 24px */

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 2列目の2枚を中央に置く（Figma も x378〜1062 で中央） */
  gap: var(--pur-benefit-gap);
  max-width: 104rem; /* 固定: Figma のカード枠 1040px */
  margin-inline: auto;
}

.pur-benefit__item {
  display: flex;
  flex-direction: column;
  width: calc((100% - var(--pur-benefit-gap) * 2) / 3);
  max-width: 33rem; /* 固定: Figma カード幅 330px */
  /* Figma pad=(40,30,30,30)。上は「赤帯 8px ＋ 32px」で合計 40px になる。 */
  padding: clamp(2.2rem, 2.22vw, 3.2rem) clamp(2rem, 2.08vw, 3rem) clamp(2rem, 2.08vw, 3rem);
  /* 上端の赤い太帯。inspect ログは stroke=1px #B80003 としか出ないが、カンプは上辺だけ太く
     左右・下辺に線は無い。purchase.png（等倍1440px）実測: y2116〜2123 の 8px が #B80003＝PNG実測。
     1ページ目の特長カード（_wgd/10_feature.css 88行）と同じ扱い。 */
  border-top: clamp(.5rem, .56vw, .8rem) solid var(--color_main);
  background: #fff;
}

/* アイコン（淡いピンクの円ごと書き出した 84×84 の SVG）とラベルの入れ物 */
.pur-benefit__head {
  position: relative; /* ラベルの基準 */
  width: clamp(6rem, 5.83vw, 8.4rem); /* Figma Group 160 84×84 */
  margin-inline: auto;
}

.pur-benefit__icon {
  display: block;
  width: 100%;
}

/* 「Benefit01」（Figma 16px / lh22.4 / 中央 / cta_gr グラデーション文字）。
   Figma でも縦積みの流れに入っていない絶対配置で、円の上端にわずかに重なる。
   purchase.png 実測: 文字の墨が y2146〜2157（円の上端は y2156）。 */
.pur-benefit__label {
  position: absolute;
  top: calc(-1 * clamp(1rem, 1.04vw, 1.5rem)); /* 円の上端より 15px 上に行送りの箱を置くと墨が実測位置に来る */
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: var(--color_main); /* グラデーション文字が効かない環境用の色 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.4; /* 22.4 / 16 */
  letter-spacing: .05em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pur-benefit__label {
    background-image: var(--gradient); /* Figma cta_gr */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Figma 20px / lh28 / 中央 / wght700 / 赤。下に 1px #EAEAEA の区切り線（pad-bottom 10） */
.pur-benefit__title {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma カード内 gap 20 */
  padding-bottom: clamp(.8rem, .69vw, 1rem); /* Figma pad-bottom 10 */
  /* 区切り線。Figma は枠内ストローク（INSIDE）で、線は pad-bottom 10 の内側＝カンプ PNG の y2325
     （枠 2260〜2326）に出る。border-bottom だと枠の外に付いて枠が 1px 伸び、下の要素まで
     ずれるため、内側に描く inset box-shadow にしている。 */
  box-shadow: inset 0 -1px 0 var(--color_line); /* 固定: 1px の罫線 */
  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 */
.pur-benefit__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma Frame 4841 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;
}


/* ============================================================
   4. spec（機種・台数の選び方）
   Figma FRAME 機種・台数の選び方 [120,2896,1320,3886] ／ pad=(100,0,100,0)
   灰色の箱 1040×402（pad 45）の中に白いパネル3枚（242 : 242 : 394・隙間1px）
   ============================================================ */
.pur-spec {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
}

/* Figma txt [200,3182,1240,3238]・16px / lh25.6 / 中央 */
.pur-spec__lead {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px */
  margin-inline: auto;
  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;
}

.pur-spec__box {
  max-width: 104rem; /* 固定: Figma Frame 4849 の幅 1040px */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma txt の pad-bottom 30 */
  margin-inline: auto;
  padding: clamp(3rem, 3.13vw, 4.5rem); /* Figma pad 45 */
  background: var(--color_light);
  /* ログの stroke=1px #EAEAEA は purchase.png では4辺とも描かれていない
     （x200 / x1239 / y3238 / y3639 いずれも #F6F6F6 のまま）ため置いていない＝PNG実測。 */
}

/* Figma 20px / lh32 / wght700 / #111111。テキストは左寄せだが箱の中央に置かれている */
.pur-spec__box-title {
  color: var(--color_dark);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.6; /* 32 / 20 */
  letter-spacing: .05em;
  text-align: center;
}

/* パネル3枚の行。＋マークは幅0の要素として境目に置いてある（DOM もパネルの間）ので、
   768px 以下で縦積みにすると、そのまま上下の境目に移る。 */
.pur-spec__row {
  display: flex;
  align-items: stretch;
  gap: 1px; /* 固定: Figma gap 1px。隙間に灰色の地が1本見える */
  max-width: 88rem; /* 固定: Figma Frame 4848 の幅 880px */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma Frame 4849 gap 20 */
  margin-inline: auto;
}

.pur-spec__panel {
  display: flex;
  /* Figma のパネル幅 242px ÷ 行幅 880px ＝ 27.5%。
     flex-grow の比率で分けると、パネルの左右 padding（60px）が下限になって
     配分が 242:242:394 からずれるため、幅そのものを割合で持たせている。 */
  flex: 0 1 27.5%;
  flex-direction: column;
  min-width: 0;
  align-items: center;
  /* Figma: 上 20（帯まで）／左右 30／下 18（機種名の下端 3577 → パネル下端 3595） */
  padding: clamp(1.4rem, 1.39vw, 2rem) clamp(2rem, 2.08vw, 3rem) clamp(1.2rem, 1.25vw, 1.8rem);
  background: #fff;
}

.pur-spec__panel--wide {
  flex: 0 1 44.8%; /* Figma のパネル幅 394px ÷ 880px */
}

/* 赤い帯ラベル（Figma Frame 4847・pad=(0,10,0,10)・r=5・16px 白） */
.pur-spec__chip {
  width: 100%;
  padding-inline: clamp(.8rem, .69vw, 1rem); /* Figma 左右 pad 10 */
  border-radius: 5px; /* 固定: Figma r=5（角丸5px以下は固定でよい） */
  background: var(--color_main);
  color: #fff;
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16。帯の高さ 26px はこの行送りで決まる */
  letter-spacing: .05em;
  text-align: center;
}

.pur-spec__figures {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 1.25vw, 1.8rem); /* Figma 付属品の円と円の間 18px */
  margin-top: clamp(3.4rem, 3.68vw, 5.3rem); /* Figma 帯の下端 3381 → 円の上端 3434 ＝ 53px */
}

/* 淡いピンクの円（Figma Ellipse 19・#FFEDED・約105px）。円は図形なので CSS で描く */
.pur-spec__circle {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: clamp(7.6rem, 7.29vw, 10.5rem); /* Figma 105px */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color_main_light);
}

/* 製品写真。円に対する割合で置くと、円が縮んでも位置関係が崩れない。
   割合は Figma 実測（円 105px 基準）。 */
.pur-spec__product {
  position: absolute;
  left: 50%;
  height: auto;
  transform: translateX(-50%);
}
/* 4点とも、確定版インスペクトログの IMG ノードの矩形をそのまま置いている。
   書き出した透過 PNG は IMG ノードと同じ範囲（周囲の透明部分を含む）なので、
   矩形どおりに置けばカンプと同じ位置・同じ大きさに出る。割合の基準は円の 105px。 */
/* 送信機 49×150（inspect 229行 [378,3386,427,3536]）。円 [348,3434,452,3539] の下端から 3px 上。
   中心 x402.5 は円の中心（x400）より 2.5px 右。 */
.pur-spec__product--t    { bottom: 2.86%;  left: 51.90%; width: 46.67%; }
/* 受信機 46×98（inspect 246行 [622,3435,668,3533]）。円 [592,3434,698,3539] の下端から 6px 上。
   中心 x645 は円の中心と一致。 */
.pur-spec__product--r    { bottom: 5.71%;  left: 50%;    width: 43.81%; }
/* 付属品ケース 82×82（inspect 255行 [856,3451,938,3533]）。円 [848,3434,954,3539] の下端から 6px 上。
   中心 x897 は円の中心（x901）より 4px 左。 */
.pur-spec__product--case { bottom: 5.71%;  left: 46.67%; width: 78.1%; }
/* マイク 70×70（inspect 257行 [990,3455,1060,3525]）。円 [972,3434,1078,3539] の下端から 14px 上。
   中心 x1025 は円の中心（x1025）と一致。 */
.pur-spec__product--mic  { bottom: 13.33%; left: 50.48%; width: 66.67%; }

/* Figma 20px / lh32 / wght700 / 赤 */
.pur-spec__name {
  margin-top: clamp(.4rem, .42vw, .6rem); /* Figma 円の下端 3539 → 機種名 3545 ＝ 6px */
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.6; /* 32 / 20 */
  letter-spacing: .05em;
  text-align: center;
}

/* ＋マーク（支給素材 37×37・淡ピンクの丸ごと）。幅0の要素にして境目に重ねる */
.pur-spec__plus {
  position: relative;
  flex: 0 0 0;
  width: 0;
}
.pur-spec__plus img {
  position: absolute;
  top: clamp(7.4rem, 7.78vw, 11.2rem); /* Figma パネル上端 3335 → ＋の上端 3447 ＝ 112px */
  left: 50%;
  width: clamp(2.6rem, 2.57vw, 3.7rem); /* Figma 37px */
  max-width: none; /* 親が width:0 のため common.css の img{max-width:100%} だと 0 に潰れる */
  transform: translateX(-50%);
}

/* Figma txt [200,3640,1240,3726]・pad=(30,0,30,0)・16px / lh25.6 / 中央 */
.pur-spec__note {
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma pad-top 30 */
  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;
}

.pur-spec__btn-area {
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma txt の pad-bottom 30 */
  text-align: center;
}


/* ============================================================
   5. demo（購入前にデモ機をお試しいただけます）
   Figma FRAME cta [160,3886,1280,4171] ／ 1120×285・白地・4px #EAEAEA 枠
   ============================================================ */
.pur-demo__box {
  max-width: 112rem; /* 固定: Figma 1120px（1200 の内容幅よりさらに 40px ずつ内側） */
  margin-inline: auto;
  /* Figma 上下 pad 50 ／ 左右 40。どちらも 4px の枠内ストローク分を差し引いてある
     （枠の外側から数えて 50/40 になるようにする。common.css の .sub-head__text と同じ考え方）。 */
  padding: clamp(2.6rem, 3.19vw, 4.6rem) clamp(1.6rem, 2.5vw, 3.6rem);
  border: 4px solid var(--color_line); /* 固定: 罫線は縮めると消えるため。common.css の 4px 罫線（.section__title）と同じ扱い */
  background: #fff;
}

/* Figma 27px / lh27 / 中央 / wght700 / 赤 */
.pur-demo__title {
  color: var(--color_main);
  font-size: clamp(2rem, 1.88vw, 2.7rem); /* 27px */
  font-weight: 700;
  line-height: 1; /* Figma lh27 ＝ 文字サイズと同値。1行に収まる幅では行送りを増やさない */
  letter-spacing: .05em;
  text-align: center;
}

.pur-demo__body {
  display: flex;
  align-items: center;
  /* Figma は左テキスト右端 770 → ボタン左端 838 ＝ 68px。
     ただし CSS は字送り（.05em）を行末の最後の1文字の後ろにも足すため、
     リード文1行目が 16px 時に 570.7px 必要になり、Figma の枠 570px では
     1440px 以上で2行に折り返してしまう（2026-08-13 CEO 指摘）。
     すき間を 4px 詰めてテキスト枠を 4px 広げ、文字の左端とボタンの位置は
     カンプのまま（574 + 64 + 402 ＝ 1040 でカンプの 570 + 68 + 402 と同じ）にしている。 */
  gap: clamp(3rem, 4.44vw, 6.4rem);
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30 */
}

.pur-demo__txt {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 57.4rem; /* 固定: Figma のテキスト枠 570px ＋ 行末の字送り分の逃げ 4px */
}

/* Figma 16px / lh25.6 / 左寄せ */
.pur-demo__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

/* ※注記。Figma は「※」を独立したテキストにして本文を 14px 分ぶら下げている。
   文字サイズはカンプ実測 14px（inspect ログの表記は 16px だが、確定版 PNG の実測で
   1行目の墨幅 214→657＝443px＝30文字×14px×1.05、行送り 22px、※ の送り 14px。
   16px なら 504px になるため 14px が正）。lead（16px）より一段小さい。 */
.pur-demo__note {
  display: flex;
  margin-top: clamp(.4rem, .42vw, .6rem); /* Figma gap 6 */
  font-size: clamp(1.3rem, .97vw, 1.4rem); /* 14px。下限は注記なので本文の下限 1.4rem より小さい 1.3rem */
  font-weight: 500;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
}
.pur-demo__note-mark {
  flex: 0 0 auto;
  letter-spacing: 0; /* ※ の送りをカンプどおり 1em（14px）ちょうどにする。字送りが付くと本文の頭が 0.7px ずれる */
}

.pur-demo__action {
  flex: 0 0 auto;
}

/* 黒いボタン（Figma Frame 4853 402×90・#111111・影 0 0 20 rgba(0,0,0,.1)） */
.pur-demo__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 402px。下限を 30rem にしているのは、文字が 1.6rem（16px）で止まる 1151px 以下でも
     ボタンだけが比例縮小を続けると 1024〜1057px で「デモ機について相談する」が2行に折れるため
     （必要幅 185px ＋ 左右 padding。1024px では内側が 179px しか残らない）。
     1023px 以下は下の指定で width:100% になるので、この下限が効くのは 1024〜1074px の帯だけ。 */
  width: clamp(30rem, 27.92vw, 40.2rem);
  height: clamp(7rem, 6.25vw, 9rem); /* Figma 90px */
  /* 左右を同じにして文字をボタンの中央に置く（Figma も文字枠の中心＝ボタンの中心）。
     値は左のアイコン（左31px＋44px）が入る 75px に合わせている。 */
  padding-inline: clamp(5rem, 5.21vw, 7.5rem);
  background: var(--color_dark);
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}
/* hover はトップの同じ濃い地のボタン（top.css 760行・Figma node 569:5027 実測 #111111→#323232）と
   同じ語彙。#000 は #111 との差が目で見て分からないため 2026-08-20 CEO 指摘により変更。 */
.pur-demo__btn:hover {
  background: #323232;
}

.pur-demo__btn-icon {
  position: absolute;
  top: 50%;
  left: clamp(1.6rem, 2.15vw, 3.1rem); /* Figma ボタン左端 838 → アイコン左端 869 ＝ 31px */
  width: clamp(3.2rem, 3.06vw, 4.4rem); /* Figma 44×44 */
  height: auto;
  transform: translateY(-50%);
}

/* Figma 20px / lh20 / 中央 / wght700 / 白 */
.pur-demo__btn-txt {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

.pur-demo__btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1.6rem, 2.08vw, 3rem); /* purchase.png 実測: 矢印の墨が x1194〜1203＝24px 枠の右端がボタン右端から 30px */
  transform: translateY(-50%);
}


/* ============================================================
   6. flow（購入までの流れ）
   Figma FRAME 購入までの流れ [0,4171,1440,5573] ／ pad=(100,0,100,0)
   カード 1040×134 ×7・白地・1px #EAEAEA・gap 13
   左端に 50px のグラデーション帯（縦書き STEP01〜07）
   ============================================================ */
.pur-flow {
  /* 2026-08-24 の構成変更で「購入の流れ」の独立ページを作らず、この節へ集約した。
     トップページから /purchase/#flow で飛んでくる（template-parts/under/purchase/flow.php
     の section に id="flow"）。ヘッダーが position:fixed（common.css 156行・高さ
     var(--header_height)）のため、飛んだときに見出しがヘッダーへ潜らないよう逃げを持たせる
     （導入事例 assets/css/case-study.css 271行・製品一覧 assets/css/product.css 457行と同じ扱い）。 */
  scroll-margin-top: calc(var(--header_height) + 2rem);
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
}

.pur-flow__list {
  --pur-flow-gap: clamp(.8rem, .9vw, 1.3rem); /* Figma カード間 13px */

  display: flex;
  flex-direction: column;
  gap: var(--pur-flow-gap);
  max-width: 104rem; /* 固定: Figma のカード幅 1040px */
  margin-inline: auto;
}

.pur-flow__item {
  position: relative; /* 帯と矢印の基準 */
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma アイコンと本文の gap 20 */
  min-height: clamp(10rem, 9.31vw, 13.4rem); /* Figma カード高 134px。中身が増えたら伸びるよう min にする */
  /* Figma pad=(20,30,20,80)。左の 80px は帯 50px ＋ 30px。
     4辺とも 1px の枠内ストローク分を差し引く（枠の外側から数えて 20/30/20/80 になる）。
     左 79px＝5.486vw／右 29px＝2.014vw。これでアイコン左端が x280、区切り線の右端が
     x1210 とカンプ実測に一致する。 */
  padding: clamp(1.1rem, 1.32vw, 1.9rem) clamp(2rem, 2.01vw, 2.9rem) clamp(1.1rem, 1.32vw, 1.9rem) clamp(5.4rem, 5.49vw, 7.9rem);
  border: 1px solid var(--color_line); /* 固定: 1px の罫線 */
  background: #fff;
}

/* 左端の帯（Figma Rectangle 182 [200,4457,250,4591]・cta_gr）。
   カンプでは帯がカードの枠線まで覆っているので、1px の枠の外まで広げる。 */
.pur-flow__band {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 3.47vw, 5rem); /* Figma 50px */
  background: var(--gradient); /* Figma cta_gr。purchase.png 実測でも左#DA3106→右#B80003 の横方向 */
  color: #fff;
}

/* Figma 18px / wght700 / 白の縦書き（カンプは S が上・文字は時計回りに90度） */
.pur-flow__band-txt {
  writing-mode: vertical-rl;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.pur-flow__icon {
  flex: 0 0 auto;
  width: clamp(6.4rem, 6.53vw, 9.4rem); /* Figma Group 162 94×94（淡いピンクの円ごと書き出し） */
  height: auto;
}

.pur-flow__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Figma 18px / lh28.8 / 左寄せ / wght700 / 赤。下に 1px #EAEAEA の区切り線（pad-bottom 10） */
.pur-flow__title {
  padding-bottom: clamp(.8rem, .69vw, 1rem);
  border-bottom: 1px solid var(--color_line); /* 固定: 1px の罫線 */
  color: var(--color_main);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1.6; /* 28.8 / 18 */
  letter-spacing: .05em;
}

/* Figma 16px / lh25.6 / 左寄せ / wght500 */
.pur-flow__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma Frame 4841 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;
}

/* カード間の下向き矢印。共通クラス .ar--down（24×24）。
   カンプは「隙間の中央」ではなくカード下辺寄りで、確定版 PNG 実測で墨（16×9）が
   y4589〜4597＝中心がカード下辺（枠線の外側 y4591）の 2px 下。
   絶対配置の基準はパディングボックス（枠線 1px の内側）なので、その 3px 下に
   24px の枠の中心を置く＝ bottom は -(24/2 + 3) = -15px。
   矢印は共通クラス側が 2.4rem 固定なので、位置も固定値でそろえる。
   .ar--down は transform: rotate(90deg) を持つので、中央寄せの translate と
   1つの transform にまとめる（common.css 774行の注記どおり）。 */
.pur-flow__arrow {
  position: absolute;
  bottom: -1.5rem; /* 固定: 24px 固定の矢印に対する位置合わせ（上の実測どおり） */
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}


/* ============================================================
   7. faq（よくある質問）
   Figma FRAME contents_inner [0,5573,1440,6425] ／ 全幅の灰色帯・pad=(100,0,100,0)
   確定版 inspect: figma-dump/inspect/purchase_final/00_purchase_under.txt 551〜609行
   確定版カンプ: figma-dump/screenshots/purchase_final/02_faq_inframe.png（ページ上の見え方）
   1問目だけ開いた状態（Q・区切り線・A）、2〜5問目は閉じた状態
   カード高は Figma 実測で 閉じ 64px（20＋24＋20）／開き 128px（20＋24＋20＋線＋20＋24＋20）。
   ============================================================ */
.pur-faq {
  --pur-faq-badge: clamp(2rem, 1.67vw, 2.4rem); /* Figma Q/A の丸バッジ 24×24。行の高さもこの値で決まる */

  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light);
}

.pur-faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma gap 20 */
  max-width: 104rem; /* 固定: Figma の枠 1040px */
  margin-inline: auto;
}

.pur-faq__item {
  padding: clamp(1.4rem, 1.39vw, 2rem) clamp(1.8rem, 1.81vw, 2.6rem); /* Figma pad=(20,27,20,26) */
  background: #fff;
}

.pur-faq__q {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma バッジと文字の gap 14 */
  cursor: pointer;
  list-style: none; /* <summary> の既定の三角を消す */
}
.pur-faq__q::-webkit-details-marker {
  display: none;
}

/* Q / A の丸バッジ（Figma 24×24。Q＝赤地に白文字・A＝#FFEDED 地に赤文字） */
.pur-faq__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--pur-faq-badge); /* Figma 24px */
  height: var(--pur-faq-badge);
  border-radius: 50%;
  /* カンプの Q・A は Roboto Condensed Bold（Figma 実測）。指定しないと本文の
     Noto Sans JP を継いでしまい、字幅と Q の尾の出方が変わる。2026-08-21 CEO 指摘。 */
  font-family: var(--font_eng_cond);
  font-size: clamp(1.3rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1;
}
.pur-faq__badge--q {
  background: var(--color_main);
  color: #fff;
}
.pur-faq__badge--a {
  background: var(--color_main_light);
  color: var(--color_main);
}

/* Figma 16px / lh25.6 / wght700 / #111111（設問・回答とも太字） */
.pur-faq__q-txt,
.pur-faq__a-txt {
  /* Figma の Q 行・A 行は高さ 24px（丸バッジの高さ）で組まれていて、
     行送り 25.6px の行ボックスぶんは高さに数えていない。CSS のままだと
     行が 1.6px 高くなりカードが 64/128px に収まらないので、その差だけ詰める。
     文字は行ボックスの中央にあるため、詰めても文字の位置は動かない。 */
  margin-block: calc((var(--pur-faq-badge) - 1.6em) / 2);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}
.pur-faq__q-txt {
  flex: 1 1 auto;
}

/* 開閉の矢印。共通の .ar（24×24・別の矢印）を縮めて流用すると線の大きさが合わないため、
   確定版カンプの矢印そのもの（FRAME ar 18×18／線 2px #B80003・角は square）を
   Figma から書き出して使う＝assets/images/purchase/purchase_faq_arrow.svg。
   書き出し時点で下向きなので、閉じているときは回転させない。 */
.pur-faq__ar {
  flex: 0 0 auto;
  width: 1.8rem; /* 固定: Figma の矢印枠 18×18（書き出し素材と同寸で置く） */
  height: 1.8rem;
  margin-left: clamp(.4rem, .42vw, .6rem); /* 上の gap 14 と合わせて Figma の 20px にする */
  background-image: url("../images/purchase/purchase_faq_arrow.svg");
  background-size: 1.8rem 1.8rem;
  transition: transform .3s ease;
}
.pur-faq__item[open] .pur-faq__ar {
  transform: rotate(180deg); /* 開いているときは上向き（カンプの1問目） */
}

.pur-faq__a {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma バッジと文字の gap 14 */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma 設問の下端 5905 → 区切り線 5925 ＝ 20px */
  padding-top: clamp(1.4rem, 1.32vw, 1.9rem); /* Figma 区切り線 5925 → 回答 5945 ＝ 20px（1px の線を含む） */
  border-top: 1px solid var(--color_line); /* 固定: 1px の罫線 */
}


/* ============================================================
   8. contact（導入のご相談はこちら / CONTACT）
   Figma FRAME contact [0,6425,1440,6851] ／ 1440×426・cta_gr
   確定版 inspect: figma-dump/inspect/purchase_final/00_purchase_under.txt 610〜663行
   （確定版でも寸法・文言・色の変更なし。カンプ実測と突き合わせて一致を確認済み）
   左カラムは1ページ目（_wgd/70_contact.css）と同じ形・同じ数値。
   右カラムだけ違い、こちらはボタン2本（#7C0002 の白文字／白地の赤文字）。
   数値の出典は 70_contact.css（さらに元は top.css 1935〜2025行）。
   ============================================================ */
.pur-contact {
  padding-block: 8rem; /* 固定: Figma pad(80,276,80,276) の上下。70_contact.css 21行と同値 */
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr */
  color: #fff;
}

.pur-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* Figma 左カラム右端 520 → 右カラム左端 620 ＝ 100px */
  max-width: 100rem; /* 固定: Figma 実配置 220〜1220px。70_contact.css 31行と同値 */
  min-height: 26.6rem; /* 固定: Figma 左カラム 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* ---- 左カラム（70_contact.css 39〜114行の転記） ---- */
.pur-contact__intro {
  flex: 0 0 30rem;
  align-self: stretch; /* カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

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

.pur-contact__label-mark {
  flex: 0 0 1.4rem; /* 固定: Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.pur-contact__title {
  font-family: var(--font_eng);
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* Figma 60px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* CONTACT だけ字間を空けない */
}

.pur-contact__point {
  display: block; /* Figma point 68×4 */
  width: 6.8rem; /* 固定: 図形のため（縮めると線が消える） */
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.pur-contact__tel-label {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.pur-contact__tel {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pur-contact__tel-icon {
  flex: 0 0 3.2rem; /* 固定: Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.pur-contact__tel a {
  font-family: var(--font_eng);
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* Figma 34px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.pur-contact__hours {
  margin-top: .8rem; /* Figma gap 8 */
  padding: .7rem; /* Figma 34px ＝ border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* 固定: 1px の罫線 */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* Figma 13px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* ---- 右カラム（Figma btn 600×120 が2本・gap 20） ---- */
.pur-contact__action {
  display: flex;
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma gap 20 */
  min-width: 0;
}

.pur-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* 固定: Figma 120px。70_contact.css 172行と同値 */
  /* 左右とも 10.4rem にすることで文字がボタンの中央に来て、かつ左のアイコン
     （左40px＋64px）と右の矢印（右20px＋24px）に重ならない。 */
  padding-inline: 10.4rem;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  text-decoration: none;
  transition: var(--transition);
}
/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.pur-contact__btn--mail:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.pur-contact__btn--compare:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.pur-contact__btn--mail {
  background: var(--color_main_dark); /* Figma #7C0002 */
  color: #fff;
}
.pur-contact__btn--compare {
  background: #fff;
  color: var(--color_main);
}

.pur-contact__btn-icon {
  position: absolute;
  top: 50%;
  left: clamp(2.4rem, 2.78vw, 4rem); /* Figma ボタン左端から 40px */
  width: clamp(4.8rem, 4.44vw, 6.4rem); /* Figma 64×64 */
  height: auto;
  transform: translateY(-50%);
}

.pur-contact__btn-txt {
  display: flex;
  flex-direction: column;
  align-items: center; /* カンプは2行とも中央そろえ（1ページ目は左そろえ） */
  /* Figma の gap は 16 だが、Figma のテキスト枠は墨の高さ（1行目18px・2行目10px）で
     出ているため、行送り 1.4 で組むときは 4px 相当が実測の行間 12px に合う。
     purchase.png 実測: 1行目の墨 y6543〜6565／2行目の墨 y6577〜6591。 */
  gap: clamp(.2rem, .28vw, .4rem);
  text-align: center;
}

.pur-contact__btn-main {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* Figma 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.pur-contact__btn-sub {
  font-size: clamp(1.3rem, 1.04vw, 1.5rem); /* Figma 15px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.pur-contact__btn .ar,
.pur-contact__btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 1.39vw, 2rem); /* Figma ボタン右端から 20px */
  transform: translateY(-50%);
}


/* =============================================================================
 * 1023px 以下（SP カンプが無いため当方設計）
 * ここで閉じるのは「2〜3列のままだと中身が潰れる」箇所だけ。
 * ========================================================================== */
@media (max-width: 1023px) {
  /* カードは3列だと1枚あたり 300px を切り、写真（270px）と本文が窮屈になるので2列にする。
     5枚なので 2＋2＋1 になり、最後の1枚は中央寄せのまま置かれる。 */
  .pur-case__item {
    width: calc((100% - var(--pur-case-gap)) / 2);
  }
  .pur-benefit__item {
    width: calc((100% - var(--pur-benefit-gap)) / 2);
  }

  /* 左のテキスト（最長 570px）とボタン（402px）が並ぶと 1023px では文字が
     4行以上に折り返すため、縦積みにしてボタンを中央に置く。 */
  .pur-demo__body {
    flex-direction: column;
    align-items: stretch;
  }
  .pur-demo__txt {
    max-width: none;
  }
  .pur-demo__btn {
    width: 100%;
    max-width: 40.2rem; /* 固定: Figma のボタン幅 402px */
    margin-inline: auto;
  }

  /* CONTACT は2カラムのままだと右カラムが 600px を大きく割り、
     ボタン内の文字（最長 384px）と左右のアイコン・矢印が競う。 */
  .pur-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }
  .pur-contact__intro,
  .pur-contact__action {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem; /* 固定: Figma のボタン幅 600px にそろえる */
    margin-inline: auto;
  }
}


/* =============================================================================
 * 768px 以下（SP カンプが無いため当方設計）
 * ========================================================================== */
@media (max-width: 768px) {
  /* カードは1列。横に伸びきらないようカンプのカード幅 330px を上限にする */
  .pur-case__item,
  .pur-benefit__item {
    width: 100%;
    max-width: 33rem;
  }

  /* 機器構成は横3枚だと 375px で1枚 75px しか取れず円（最小76px）が入らないため縦積み。
     ＋マークは DOM 上もパネルの間にあるので、そのまま上下の境目に移る。 */
  .pur-spec__row {
    flex-direction: column;
    gap: clamp(2.4rem, 3vw, 3.2rem); /* ＋マーク（37px）が入る隙間 */
  }
  .pur-spec__plus {
    width: auto;
    height: 0;
  }
  .pur-spec__plus img {
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* 見出しが2行になる幅では行送り 1（カンプ値）だと行がぶつかる */
  .pur-demo__title {
    line-height: 1.4;
  }
  .pur-demo__box {
    padding: clamp(2.4rem, 4vw, 3rem) clamp(1.6rem, 2.6vw, 2rem);
  }

  /* 流れのカードは帯とアイコンを一段小さくして本文の幅を確保する */
  .pur-flow__item {
    gap: 1.2rem;
    padding-right: 1.6rem;
    padding-left: 4.6rem; /* 帯 3.2rem ＋ 1.4rem */
  }
  .pur-flow__band {
    width: 3.2rem;
  }
  .pur-flow__band-txt {
    font-size: 1.3rem;
  }
  .pur-flow__icon {
    width: 6rem;
  }

  .pur-faq__item {
    padding-inline: 1.6rem;
  }

  .pur-contact {
    padding-block: 6rem;
  }
  /* ボタンは高さを固定せず、文字が折り返しても潰れないようにする */
  .pur-contact__btn {
    height: auto;
    min-height: 10rem;
    padding-block: 2rem;
    /* 左右 52px。左のアイコン（左8px＋44px＝52px）にちょうど接する値で、
       文字が使える幅を最大にしている（375px 時 320 − 104 ＝ 216px）。 */
    padding-inline: 5.2rem;
  }
  .pur-contact__btn-icon {
    left: .8rem;
    width: 4.4rem;
  }
  .pur-contact__btn .ar,
  .pur-contact__btn .ar--white {
    right: .8rem;
  }
  /* CEO 指示（2026-08-13・SP のみ）: 375px でも1行に収める。
     いちばん長い「購入とレンタルでお悩みの方はこちら」が 13px で 232px 必要になり
     216px の文字枠に入らないため、幅に連れて縮む式にする。
     上限は 769px 側の値（18px / 13px）と同じにして、768px の境目で段差が出ないようにしている。 */
  .pur-contact__btn-main {
    font-size: clamp(1.5rem, 4.53vw, 1.8rem); /* 375px でちょうど 17px */
  }
  .pur-contact__btn-sub {
    font-size: clamp(1.1rem, 3.2vw, 1.3rem); /* 375px でちょうど 12px */
  }
}