@charset "UTF-8";
/* ===========================================================
   お問い合わせ関連ページ 共通CSS
     - 切り分けページ      page-contact-select.php  / Figma 23608:7373・23873:7397
     - 送信完了（個人）    page-contact-thanks.php  / Figma 23622:3700
   =========================================================== */

/* ===========================================================
   お問い合わせ 切り分けページ
   Figma 23608:7373「お問い合わせの切り分けページ」1440×1438
   ボタンは Figma 540×120 の座標をそのまま px で再現する。
   =========================================================== */

/* Figma: 個人ボタン y285（＝上の見出しブロック直下）／法人 y445／最終ボタン下端 565、
   その 120px 下から「TOPページ」ボタンの領域が始まる。
   見出しまでの体裁は既存の共有クラス（.breadcrumb / .inner / .subtitle）が担う。 */
.contact_choice {
  margin-bottom: 120px; /* 最終ボタン下端565 → TOPページボタン領域685 */
}

.contact_choice_btn {
  position: relative;
  display: block;
  width: 540px;
  height: 120px;
  margin: 0 auto;
  color: #000;
  text-decoration: none;
}

/* Figma 個人 y285+高さ120=405 → 法人 y445 ＝ 間隔40px */
.contact_choice_btn + .contact_choice_btn {
  margin-top: 40px;
}

/* 枠線は ::before に描く。Figmaも「枠は別レイヤー」で、アイコン・文字・矢印の座標は
   540×120 の外枠基準。ボタン本体に border を持たせると絶対配置の基準が padding-box に
   なって全ての座標が1pxずれるため、この構造にしている。 */
.contact_choice_btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1px solid #000;
  border-radius: 20px;
}

/* Figma のテキスト枠は x160〜400＝中心280。ボタン中心270に対して +10px 右。
   実フォントで幅が変わっても中心が動かないよう、左端固定ではなく中心指定にする。 */
.contact_choice_label {
  position: absolute;
  top: 50%;
  left: calc(50% + 10px);
  transform: translate(-50%, -50%);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
}

/* グローバル img{max-width:100%} が効くと親の幅に引きずられて潰れるので解除する */
.contact_choice_icon,
.contact_choice_arrow {
  position: absolute;
  display: block;
  max-width: none;
}

/* Figma Vector 21: x465〜512.19 / y51.64〜67.35 */
.contact_choice_arrow {
  left: 465px;
  top: 51.64px;
  width: 47.21px;
  height: 15.71px;
}

/* Figma kkrn_icon_user_14: x75.98 y28.00 の 64×64 */
.contact_choice_btn--personal .contact_choice_icon {
  left: 75.98px;
  top: 28px;
  width: 64.04px;
  height: 64.01px;
}

/* Figma 23648:5379「Group」（8パーツを合成したビル）。
   レイアウト枠は x84.888 y30.828 の 46.224×54.156 だが、線幅が左と上に約1pxはみ出すため
   SVGのviewBoxは実体の外接矩形 48.221×56.158 で書き出してある。位置もその分ずらす。 */
.contact_choice_btn--business .contact_choice_icon {
  left: 83.89px;
  top: 29.83px;
  width: 48.22px;
  height: 56.16px;
}

/* ===========================================================
   ホバー
   Figma 23611:7815（個人）/ 23648:5374（法人）の「プロパティ1=バリアント2」
   ＝背景 #e60039・文字と アイコンと矢印が白。枠線1px黒はそのまま残る。
   寸法・座標はデフォルトと同一なのでレイアウトは一切動かない。

   ホバー状態を持つのはPCのボタンだけで、SP(23891:7682)は
   バリアントセットに属さない単独コンポーネント＝ホバー指定が無い。
   そこで (hover: hover) で囲み、タップ後にホバーが張り付くタッチ端末には当てない。
   =========================================================== */
@media (hover: hover) {
  /* グローバル a:hover{opacity:.5} の打消し。
     これが無いと赤背景が半透明になって色が合わない（詳細度(0,2,0) > (0,1,1)で勝つ） */
  .contact_choice_btn:hover {
    opacity: 1;
  }
  .contact_choice_btn:hover::before {
    background: #e60039;
  }
  .contact_choice_btn:hover .contact_choice_label {
    color: #fff;
  }
  /* Figmaのホバー用アセットは形状が同一で色だけ白なので、別ファイルを持たず
     黒一色の元アセットをCSSで白へ転写する。brightness(0)で完全な黒に潰してから
     invert(1)で白へ反転＝白版SVGと同じ結果になる（<img src=svg>はfillを直接変えられないため） */
  .contact_choice_btn:hover .contact_choice_icon,
  .contact_choice_btn:hover .contact_choice_arrow {
    filter: brightness(0) invert(1);
  }

  /* Figmaに時間指定は無いが、サイト共通のリンクが .3s でフェードするのに合わせる */
  .contact_choice_btn::before,
  .contact_choice_label,
  .contact_choice_icon,
  .contact_choice_arrow {
    transition: background-color 0.3s, color 0.3s, filter 0.3s;
  }
}

/* ===========================================================
   SP（〜750px）
   Figma 23873:7397「お問い合わせの切り分けページ」393×1575
   ボタン 353×96・左右20px・角丸20px。個人 y242 / 法人 y366（間隔28px）。
   アイコンと矢印のサイズはPCと同一で、変わるのはボタンと文字だけ。
   =========================================================== */
@media screen and (max-width: 750px) {
  /* 共有 .inner のSP余白 0 7.696%（393pxで30.23px）を Figmaの20pxへ。
     .subtitle は中央寄せなので左右余白が変わっても見た目は動かない。 */
  .contact_select_inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact_choice {
    margin-bottom: 80px; /* Figma 最終ボタン下端462 → 下の領域542 */
  }

  /* 幅は親いっぱい（＝393pxのとき Figma通り353px）。px固定にすると狭い端末で溢れる */
  .contact_choice_btn {
    width: auto;
    height: 96px;
  }

  /* Figma 個人 y242+96=338 → 法人 y366 ＝ 間隔28px */
  .contact_choice_btn + .contact_choice_btn {
    margin-top: 28px;
  }

  /* Figma 23891:7626: テキスト枠 x121〜241（中心181）・y20〜76 の2行組み。
     ボタン中心176.5に対して +4.5px 右。PCの+10pxと同じ性質のずれ。 */
  .contact_choice_label {
    left: calc(50% + 4.5px);
    font-size: 20px;
    line-height: 28px;
  }

  /* Figma 23891:7645: x24 y16 の 64×64（PCと同寸） */
  .contact_choice_btn--personal .contact_choice_icon {
    left: 24px;
    top: 16px;
  }

  /* Figma I23891:7712;23891:7628: レイアウト枠 x32.86 y18.84 の 46.25×54.14（PCと同寸）。
     SVGは線幅のはみ出しを含む外接矩形なので、左上へ約1pxずらして合わせる。 */
  .contact_choice_btn--business .contact_choice_icon {
    left: 31.86px;
    top: 17.84px;
  }

  /* Figma 23891:7627: x283〜330.2 / y39.65（PCと同寸）。
     右端基準で置くと、393px以外の幅でも右の余白がFigma通り22.8pxに保たれる。 */
  .contact_choice_arrow {
    left: auto;
    right: 22.8px;
    top: 39.65px;
  }
}

/* ===========================================================
   お問い合わせ 送信完了（個人）
   Figma 23622:3700「お問い合わせフォーム：サンクスページ　個人」1440×1471
   ピンク箱 540×333（x450 y285）。中身はFigmaのy座標から差分を取ると
   44 / 28 / 16 / 44 のきれいな余白列になるので、絶対配置ではなく素直な縦積みで組む。
     箱上端 → 見出し        44px   (285 → 329)
     見出し下端 → 副文      28px   (353 → 381)
     副文下端 → 白丸        16px   (437 → 453)
     白丸下端 → 箱下端      44px   (574 → 618)
     合計 44+24+28+56+16+121+44 = 333 ＝ Figmaの箱の高さと一致
   =========================================================== */
.thanks_box {
  width: 540px;
  margin: 0 auto 100px; /* 箱下端618 → TOPページボタン領域718 */
  /* Figmaの「外枠から44px」は border:1px を含むので padding は 43px。
     44pxにすると内側が1pxずつ下がり、箱の高さが333→335になる */
  padding: 43px 0;
  box-sizing: border-box;
  background: #fff0f3;
  border: 1px solid #000;
  border-radius: 20px;
  text-align: center;
}

/* Figma 23622:3759: 24px・行送り24px */
.thanks_title {
  margin: 0;
  font-size: 24px;
  line-height: 24px;
  color: #000;
}

/* Figma 23623:3786: 16px・行送り28pxの2行 */
.thanks_lead {
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 28px;
  color: #000;
}

/* Figma 23623:3833「Ellipse 24」は塗り白の真円だけなので、SVGを持たずCSSで描く。
   ※Figmaでは中心xが 710.5＝フレーム中心720より 9.5px 左。箱の中心とも一致しないが
     デザイン通りに再現している（意図的かどうかは要確認）。 */
.thanks_mascot {
  width: 121px;
  height: 121px;
  margin: 16px auto 0;
  transform: translateX(-9.5px);
  border-radius: 50%;
  background: #fff;
  position: relative;
}

/* Figma 23623:3790「ほえまる」102.204角。円に対して左右は中央だが、
   上7.05px / 下11.746px で縦は中央ではない（＝Figma通り上寄せ） */
.thanks_mascot img {
  position: absolute;
  top: 7.05px;
  left: 9.4px;
  width: 102.2px;
  height: 102.2px;
  max-width: none; /* グローバル img{max-width:100%} 対策 */
  display: block;
}

/* ===========================================================
   送信完了 SP（〜750px）
   Figma 23891:7921「お問い合わせフォーム：サンクスページ　個人」393×1670
   箱 353×335（x20 y242）。PCと同じく余白を積むと高さがぴったり合う:
     箱上端 → 見出し        40px   (242 → 282)
     見出し下端 → 副文      28px   (306 → 334)   ※PCと同じ28
     副文下端 → 白丸        16px   (400 → 416)   ※PCと同じ16
     白丸下端 → 箱下端      40px   (537 → 577)
     合計 40+24+28+66+16+121+40 = 335 ＝ Figmaの箱の高さと一致
   PCとの違いは「箱の余白 44→40」「文字サイズ」「副文が左揃え・3行」「白丸のずれ量」だけ。
   =========================================================== */
@media screen and (max-width: 750px) {
  .thanks_box {
    width: auto;
    margin-bottom: 60px; /* Figma 箱下端577 → 下の領域637 */
    /* Figmaの 上下40 / 左右24 から枠線1pxを引く。
       内寸は 353-2-46 = 305px ＝ Figmaのテキスト枠の幅と一致する */
    padding: 39px 23px;
  }

  /* Figma 23898:8058: 18px・行送り24px・中央 */
  .thanks_title {
    font-size: 18px;
    line-height: 24px;
  }

  /* Figma 23898:8059: 13px・行送り22px・幅305の3行。
     PCは中央揃えだがSPは左揃え。1文目の <br> はそのままで、2文目が
     305pxに収まらず自然に2行へ折り返して合計3行になる。 */
  .thanks_lead {
    margin-top: 28px;
    font-size: 13px;
    line-height: 22px;
    text-align: left;
  }

  /* Figma 23898:8061: 中心が 191.5＝箱の中心196.5より 5px 左（PCは9.5px左） */
  .thanks_mascot {
    transform: translateX(-5px);
  }
}

/* ===========================================================
   お問い合わせ 送信完了（法人）
   Figma 23660:5536「お問い合わせフォーム：サンクスページ　法人」1440×1209
   ピンク箱の中身は個人版と完全に同一（540×333・44/28/16/44）なので .thanks_* を流用し、
   ここでは箱の外側＝business体裁ぶんの余白と地色だけを足す。
     箱上端 y225（ページ上端から）
     箱下端558 → 戻るボタン678       120px
     ボタン下端730 → footer 830      100px

   ヘッダーは position:fixed で流れの高さを持たず main が y=0 から始まるため、
   padding-top はヘッダー高(86px)を引かずFigmaのy座標をそのまま入れる。
   140px（＝ヘッダー下端からの距離）にすると箱が85px上がってしまう。
   =========================================================== */
.business_thanks_main {
  background: #fafafa;
  padding-top: 225px;
}

/* 個人版は .thanks_box の margin-bottom が100px（TOPページボタンまで）。
   法人版は戻るボタンまで120pxなので、余白は .business_thanks_back 側に持たせて0に戻す */
.business_thanks_box {
  margin-bottom: 0;
}

.business_thanks_back {
  text-align: center;
  padding: 120px 0 100px;
}

/* SP（〜750px）
   Figma 23898:8109「お問い合わせフォーム：サンクスページ　法人」393×1292
   箱 353×335（x20 y130）＝中身も余白も個人SP版と完全に同一なので .thanks_* がそのまま効く。
   ここも箱の外側だけ:
     箱上端 y130（ページ上端から。ヘッダー70pxの下に60px）
     箱下端465 → 戻るボタン545     80px
     ボタン下端581 → footer 661    80px

   個人版と違い、このページには .inner のような左右余白を持つ親が無い（main直下）。
   .thanks_box は SPで width:auto になるため、main 側で左右20pxを確保しないと
   箱が画面幅いっぱい（x0 w393）になってしまう。
   ヘッダーは position:fixed なので padding-top はFigmaのy座標をそのまま入れる
   （SPヘッダーは style.css の @media で height:70px。PCの86pxではない）。 */
@media screen and (max-width: 750px) {
  .business_thanks_main {
    padding-top: 130px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .business_thanks_back {
    padding: 80px 0;
  }
}

/* ===========================================================
   お問い合わせフォーム（法人） page-business-contact.php
   Figma 23192:3348「お問い合わせフォーム：法人」1440×2814
   Figmaのy座標（ページ上端基準）:
     KV 85〜409（1440×324・CSSグラデーション）
     リード 449 / 注記 511
     白カード 230,591 の 980×1693（入力欄は x430 幅580 ＝ 左右パディング200）
     入力欄 691/805/919/1033、プルダウン 1147/1261/1375 … いずれも114px間隔
     テキストエリア見出し1489・枠1514(580×220)・注記1742
     個人情報保護方針 1793(580×132) / 同意 1945(231×28)
     captcha 2033 / 注意書き 2185 / 送信 2255(280×60)
     ※送信ボタンはカード下端2284を跨いで2315まで出る
   =========================================================== */
.business_contact_main {
  background: #fafafa;
}

/* KVはFigmaでは画像ではなくグラデーション。寸法は共有の .mv_kv_photo（1440/324）に乗る */
.bcf_kv_bg {
  background: linear-gradient(to right, #0966c5, #00a7ff);
}
/* 白箱の文字色だけこのページ用（他ページは #00a7ff / #0966c5） */
.business_contact_mv .mv_title span {
  color: #0a63ab;
}
/* Figma 白箱 y169・副コピー y253（KV上端85基準で 84 / 168 ＝ 324の25.93% / 51.85%） */
.business_contact_mv .mv_kv_text {
  top: 25.93%;
}
.business_contact_mv .mv_desc {
  top: 51.85%;
  /* 共有 .mv_desc の行送りは vw 由来で 27.9px になる。Figma は 36px@1440 */
  line-height: 2.5vw;
}

/* Figma 449 / 511。KV下端409からの距離で置く */
.bcf_lead {
  margin: 40px auto 0;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
  color: #000;
}
/* 依頼(2026-07-27 #1): PCの※2行を左揃えに。
   Figma 23196:2601 の実データ＝13px / line-height 20px / whitespace-nowrap / 左揃え。
   **nowrap ＝ この箱は固定幅ではなく「一番長い行の幅ちょうど」**で、それがフレーム中央に置かれている。
   ∴ CSSでは width:fit-content ＋ margin:auto がそのままの表現になる。
   裏取り＝フレームを1440幅で書き出してピクセル解析すると、注記の文字は x495〜933（1行目）。
   1440の中央に幅450の箱を置くと左端はちょうど495（450 ＝ 実描画438 ＋ 行末「。」の右サイドベアリング）。
   ※SP(〜750px)は別解釈＝Figma 23837:10033 で 353×54＝カード外形いっぱいの3行折返し。
     下の @media で width:100% に戻している（fit-content のままだと折返し幅が変わる）。 */
.bcf_lead_note {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  color: #000;
}

/* ===== 白カード（Figma 980×1693） ===== */
/* display:flow-root … 送信ボタンの負のmarginで「カード下端が跳ね上がる」ようにするため。
   これが無いと最後の子の下マージンがカードの外へ相殺で抜け、カードが縮まない */
.bcf_card {
  display: flow-root;
  width: 980px;
  /* 注記下端551 → カード上端591。下は「はみ出す送信ボタン31px＋Figmaのfooterまで120px」 */
  margin: 40px auto 151px;
  /* 入力欄は x430＝カード左端230から200px。上は 691-591=100 */
  padding: 100px 200px 0;
  box-sizing: border-box;
  background: #fff;
}

/* ===== 入力欄（Figma 580×74。ラベル15px＋枠47px） ===== */
.bcf_field {
  width: 580px;
  /* Figma 114px間隔 － 欄の高さ74px */
  margin-bottom: 40px;
}
.bcf_label {
  /* Figma: 枠は必ず欄の上端から27px。ラベル行の高さは
     必須欄=20px（※必須の行送り20pxで行箱が膨らむ）／任意欄=15px と違うので、
     「ラベル高＋下マージン＝27px」になるよう欄ごとに下マージンを変える */
  margin: 0 0 7px 4px;
  font-size: 15px;
  line-height: 15px;
  font-weight: 600;
  color: #000;
}
.bcf_req {
  margin-left: 12px;
  font-size: 13px;
  line-height: 20px;
  font-weight: normal;
  color: #de141c;
}

.bcf_field--optional .bcf_label {
  margin-bottom: 12px; /* 15 + 12 = 27 */
}
/* テキストエリアだけ Figma が 1489→1514 ＝ 25px */
.bcf_field--textarea .bcf_label {
  margin-bottom: 10px;
}

/* Figmaのバリアントから読み取った状態ルール（入力欄・プルダウン共通）
     未入力（必須欄のみ）… 背景 #fff0f0 ／ 文字 #828282
     入力中・入力済み    … 背景 #fff     ／ 文字 #000
     任意欄は最初から白（Figma「form - 任意」「プルダウン 任意」のデフォルトが bg-white）
   枠は常に 1px #828282・角丸4px で状態によらず不変。
   参照: 23241:3104（必須3状態）/ 23241:3207・23258:2720・23293:2572（プルダウン） */
.bcf_card input.bcf_input,
.bcf_card select.bcf_select,
.bcf_card textarea.bcf_textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 47px;
  padding: 0 16px; /* Figma プレースホルダ左右16px */
  /* background の一括指定にしないこと。プルダウンは ▼ を background-image で描いており、
     一括指定だと background-image が none に戻って ▼ が消える */
  background-color: #fff0f0;
  border: 1px solid #828282;
  border-radius: 4px;
  font-size: 15px;
  color: #000;
}
.bcf_field--optional input.bcf_input,
.bcf_field--optional select.bcf_select,
.bcf_field--optional textarea.bcf_textarea {
  background-color: #fff;
}
.bcf_card ::placeholder {
  color: #828282;
  opacity: 1;
}

/* 入力中・入力済みは白＋黒文字（Figma バリアント2＝入力中 / バリアント3＝入力済み）。
   :placeholder-shown が外れた時点＝何か入っている時なので、この2状態をまとめて表せる */
.bcf_card input.bcf_input:focus,
.bcf_card input.bcf_input:not(:placeholder-shown),
.bcf_card textarea.bcf_textarea:focus,
.bcf_card textarea.bcf_textarea:not(:placeholder-shown) {
  background: #fff;
  color: #000;
}

/* プルダウンは「未選択（value=""のoptionが選ばれている）」かどうかで判定する。
   任意欄は required が付かないので :invalid では判定できず、:has() で中身を見るのが確実。
   Figma バリアント4＝選択済み（白＋黒文字） */
.bcf_card select.bcf_select {
  color: #000;
}
.bcf_card select.bcf_select:has(option[value=""]:checked) {
  color: #828282;
}
.bcf_field--select:not(.bcf_field--optional) select.bcf_select:has(option[value=""]:checked) {
  background-color: #fff0f0;
}
.bcf_field--select:not(.bcf_field--optional) select.bcf_select {
  background-color: #fff;
}

/* プルダウンは既定の矢印を消してFigmaの▼を描く。
   ▼は【select自身の背景】として描くこと。
   当初は .bcf_field--select::after を bottom 基準で置いていたが、CF7 が入力エラー時に
   <span class="wpcf7-not-valid-tip">入力してください。</span> をフィールドの内側
   （.wpcf7-form-control-wrap の中）に差し込むため、箱が縦に伸びた分だけ ▼ が下へずれた
   （実測: フィールド 74px→95px で ▼ が +21px 下降。select 自体は不動）。
   select の背景なら、後ろに何が足されても ▼ は枠に対して固定される。
   副次的に、▼ の上をクリックしてもプルダウンが開くようになる（::after 時代は
   pointer-events:none で逃がしていた）。 */
.bcf_card select.bcf_select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  /* Figma Polygon 5（16×12の下向き三角）。
     色は #E60039。Figmaのベクターを書き出すと fill="#E60039" で、
     デフォルト／バリアント4／バリアント6（＝閉じている3状態）すべて同じ赤
     （枠の地色が #fff0f0 でも #fff でも矢印は赤のまま）＝状態で出し分ける必要は無い。
     ※旧実装の #828282 は枠線とプレースホルダの色で、矢印の色ではなかった（依頼 2026-07-27 で是正）。
     FigmaのPolygonは上向きの三角を180°回転させて使っているが、
     ここでは最初から下向きに描いているので形は同じ。 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath fill='%23e60039' d='M0 0h16L8 12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 12px;
  /* ▼の位置。Figma 23241:3208 を原寸で書き出して実測:
       枠 x20..600（580px）／y27..74（47px）、▼ x568..584 y44..56
       → 右16px ／ 上17px ／ 下18px。
     ⚠️【必ず background-origin: border-box にすること】。既定の padding-box だと
        基準が枠線1pxの内側になり、指定値より1px内へ寄る（旧実装がこれで、
        right 12px が実際には枠から13px、bottom 17.5px が18.5pxに着地していた）。
        border-box にすると「Figmaの枠の外縁からの距離」をそのまま書ける。
        ※shorthand の background: は origin を padding-box に戻すので、この2行より前に置かないこと。
     ⚠️ get_metadata はこのPolygonを x584 y56 と返すが、それは【180°回転前】の値。
        実際の描画位置は get_design_context の left:568 / top:44（幅16・高12の分だけずれる）。
        回転しているノードは get_metadata の x/y を使わないこと。
     （旧実装は right 12px ＝ Figmaより4px右寄りだった。依頼 2026-07-27 の▼の色是正と併せて修正） */
  background-position: right 16px bottom 18px;
  background-origin: border-box;
}

/* ===== テキストエリア（Figma 580×220） ===== */
.bcf_field--textarea {
  margin-bottom: 40px;
}
.bcf_card textarea.bcf_textarea {
  height: 220px;
  padding: 16px;
  line-height: 22px;
  resize: vertical;
}
/* Figma 枠下端1734 → 注記1742 ＝ 8px */
.bcf_note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 11px;
  color: #000;
}

/* ===== 個人情報保護方針（Figma 580×132のスクロール枠） ===== */
.bcf_privacy {
  width: 580px;
  margin-bottom: 20px; /* Figma 1925 → 同意1945 */
}
/* 中身の体裁は Figma 23344:4032「個人情報保護方針」548×2063:
     見出し（表題・各章）14px / 行送り25px / W6・インデント無し
     本文                13px / 行送り20px / 左インデント12px（548の2.19%）
     見出しと本文の間 0px ／ 本文と次の見出しの間 8px
   padding は枠580px・枠線1pxから内寸を548pxにする値＝15px。

   ※Figmaは本文の行送りが1〜6章20px／7章以降25px、字送りもW4/W5と割れているが、
     章ごとに変える意図は読めない（SP版も割れ方が違う）ので最頻値の20px・W4に揃えた。

   【重要】Figmaの【文言】は採用しない。Figmaは
     ・「6. 安全管理措置」「7. 安全管理措置」＝5章の見出しの複製（本文は第三者提供／共同利用）
     ・「9. cookieについて」の本文が8章の本文の複製（cookieの説明が無い）
   という複製ミスを含む。サイト自身の /privacy_policy/（page-privacy_policy.php）が
   法的な正であり、CF7フォーム14982の本文はそれと機械diffで一致済み。 */
.bcf_privacy_scroll {
  height: 132px;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 15px;
  background: #fff;
  border: 1px solid #000;
  font-size: 13px;
  line-height: 20px;
  color: #000;
}
.bcf_privacy_scroll p {
  margin: 0 0 8px;
  padding-left: 12px;
}
/* 見出しも <p> なので上の `.bcf_privacy_scroll p`(0,1,1) に負ける。
   打ち消すために親クラスを重ねて (0,2,0) にする（クラス2つ＞クラス1+要素1） */
.bcf_privacy_scroll .bcf_privacy_title,
.bcf_privacy_scroll .bcf_privacy_h {
  margin: 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 25px;
  font-weight: 600;
}

/* ===== 同意チェック（Figma 231×28・チェック28×28） ===== */
.bcf_agree {
  margin-bottom: 60px; /* Figma 1973 → captcha 2033 */
  /* PCも中央寄せ（SPと同じ）。Figma 23192:3348 を原寸で書き出して実測すると
     チェックボックスは x605..633 / y1945..1973 で、入力欄の列(430..1010)の中央
     430+(580-231)/2 = 604.5 と一致する。旧実装は列の左端(x430)に置いていた
     ＝Figmaから外れていた（依頼 2026-07-27 で是正）。 */
  text-align: center;
}
/* CF7の出力は label > span.wrap > span.control > span.list-item > label > input + span
   と深い。inline-flex を当てるのは【最内の label】だけにしないと入れ子で高さが狂う */
.bcf_agree > p { margin: 0; line-height: 0; } /* inline-flex がベースラインに乗って行箱が34pxに膨らむのを防ぐ */
.bcf_agree .wpcf7-list-item > label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* 【重要】グローバル style.css (L2934〜) がテーマ標準のチェックボックスを擬似要素で描いている:
     ::before = 24×24の白い箱（枠 #707070・position:absolute・top:50% left:0）
     ::after  = 16×10の赤いチェック（未チェックは opacity:0、:checked で 1）
   これは法人フォームの同意チェックにも当たるので、28×28のピンクの箱の【中に】
   24×24の白い箱が重なって描かれてしまう（旧実装は :checked::after だけ上書きしていて
   ::before は一度も打ち消していなかった＝Figmaと違う二重枠になっていた）。
   さらに ::before は要素の背景より上に描かれるので、下のチェック画像も隠れる。
   content:none で両方とも生成そのものを止める（(0,2,1) でグローバル (0,1,1) に勝つ）。
   ※一般サイト側のチェックボックスは従来どおりこのグローバル定義で描く＝ここだけスコープを切る。 */
.bcf_agree input[type="checkbox"]::before,
.bcf_agree input[type="checkbox"]::after {
  content: none;
}

.bcf_agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #fff0f0;
  border: 1px solid #000;
  cursor: pointer;
}
/* チェック時（Figma 23298:2505「button - 同意」のプロパティ1=バリアント2）。
   差分は2つ＝①箱の地色が #fff0f0 → #fff ②チェックマークが載る。

   チェックは塗りではなく stroke-width:2 の折れ線なのでCSSでは描けない
   （旧実装は border 2辺＋rotate(45deg) の自作で、形も色(#de141c)もFigmaと違っていた）。
   Figmaの実データ Vector 19 を書き出してアイコン化した。

   28×28の箱の中での位置はFigmaのinset%から逆算:
     枠   left 1.73% / right 90.04% / top 25% / bottom 28.57% → x3.996..23.008 y7..20
     画像 その枠に inset -3.46%/-4.04%/-4.93%/-10.96%（線幅のはみ出し）
          → x3.34..23.78（幅20.437）y6.36..21.43（高さ15.066）
     幅・高さともSVGのviewBox(20.4242×15.0656)と0.02px以内で一致＝逆算の検算OK。
   background-position の基準は border:1px の分ずれるので border-box に戻す。 */
.bcf_agree input[type="checkbox"]:checked {
  background-color: #fff;
  background-image: url(../image/contact/icon_check.svg);
  background-repeat: no-repeat;
  background-position: left 3.34px top 6.36px;
  background-origin: border-box;
  background-size: 20.42px 15.07px;
}
.bcf_agree_text {
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: #000;
}
/* CF7 が acceptance を包む span の余白を消す */
.bcf_agree .wpcf7-list-item {
  margin: 0;
}
/* 依頼(2026-07-27 #2): 未チェックで送信したときのエラー文
   「メッセージを送信する前に承諾確認が必要です。」がチェックボックスに重なる。
   原因は上の .bcf_agree > p{line-height:0}。これは inline-flex がベースラインに
   乗って行箱が膨らむのを防ぐための指定だが、CF7 が送信時に
   <span class="wpcf7-not-valid-tip"> を .wpcf7-form-control-wrap の【中】へ差し込むため、
   line-height:0 が継承されて行箱が0pxになり、文字がチェック行へ食い込む
   （実測 1440px: 他フィールドの tip は高さ21pxなのに承諾だけ0px、
     文字の実描画が y1482〜1496 でチェックボックス下端1489を7px超過）。
   他フィールドの tip と同じ 21px を明示してチェック行の【下】に置く。
   text-align はSPの .bcf_agree{text-align:center} を打ち消す指定
   （SPでは305px幅で2行に折り返すので、その2行が左で揃う）。 */
.bcf_agree .wpcf7-not-valid-tip {
  line-height: 21px;
  text-align: left;
  /* 頭を上の「個人情報保護方針に同意する」と揃える。
     ラベル文字はチェック行の左端から36px（チェックボックス28px＋gap8px＝上の
     .bcf_agree .wpcf7-list-item > label の gap と同値）。
     チェック行(231px)はPC/SPとも中央寄せなので、
       左端 = 50% − 231/2 = calc(50% - 115.5px)
     を margin-left にして【行の左端】に合わせ、そこから36pxインデントする。
     幅は fit-content ＝ 内容ぶんだけ（PCは1行のまま。231px固定にすると
     折返し幅が195pxになってPCまで2行になってしまう）。
     max-width は margin-left を差し引いた残り＝calc(100% − (50% − 115.5px))＝calc(50% + 115.5px)。
     これで右端はちょうど列の右端で止まる（PC 1010 / SP 349）。SPは幅が足りず2行になる（依頼どおり）。
     ※親の text-align:center が中身まで中央にしないよう、上の text-align:left で打ち消している。 */
  width: fit-content;
  max-width: calc(50% + 115.5px);
  box-sizing: border-box;
  padding-left: 36px;
  margin-left: calc(50% - 115.5px);
  margin-right: 0;
}

/* ===== captcha / 注意書き / 送信 ===== */
/* Figmaの image 4 は 317×92 のcaptchaモック。実物のhCaptchaは76pxなので、
   枠だけFigmaの92pxに固定して中央に置く。こうすると下流（注意書き・送信・カード下端）の
   座標がFigmaのまま保たれ、実ウィジェットの高さが将来変わっても影響しない。
   Figma x561〜878 はカード(980)の中央＝入力欄の列とも中心が一致する */
.bcf_captcha {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92px;
  margin-bottom: 60px; /* Figma 2125 → 注意書き2185 */
}
.bcf_notice {
  margin: 0 0 20px; /* Figma 2235 → 送信2255 */
  font-size: 15px;
  line-height: 25px;
  color: #de141c;
  text-align: center;
}

/* Figma: 送信ボタンはカード下端2284を跨いで2315まで出る */
.bcf_submit {
  text-align: center;
  margin-bottom: -31px;
  position: relative;
}
/* グローバル input[type="submit"]{position:absolute; top:0; width:100%} が効くと
   ボタンが流れから外れ、包む .bcf_submit の高さが0になってカード下端が上にずれる。
   .bcf_card input[type="submit"] は (0,2,1) でグローバル (0,1,1) に勝つので打ち消せる */
.bcf_card input[type="submit"] {
  position: static;
  top: auto;
  vertical-align: top;
  width: 280px;
  /* 320px幅ではカード内寸が232pxしかなく、280px固定だと x44+280=324 で4px横溢れする
     （実測: 320pxで scrollWidth 324。溢れていたのはこのボタンだけ）。
     SPのカード内寸 ＝ 画面幅 −40(カードmargin) −48(カードpadding) ＝ 画面幅−88px なので、
     280pxが収まるのは368px以上。∴375/393では max-width は効かずFigmaの280pxのまま、
     360以下ではカード内寸まで縮む（360で272px。従来はここでも枠を8px越えていた）。 */
  max-width: 100%;
  height: 60px;
  box-sizing: border-box;
  /* 矢印（Figma 23281:2674「arrow」22×22）は外枠の右端から19px・縦中央。
     CF7の出力は素の <input> でマークアップを足せないので background-image で置く。
     アイコン側の三角は穴なので、下の background-color がそのまま三角の色になる
     （Figmaの三角 #DD7E0F ＝ボタンの背景色。ホバーで薄くなる挙動も自動で付いてくる）。
     ※background-position の基準は既定が padding-box ＝ border:4px の分だけ内側にずれる。
       Figmaのinsetは外枠(280×60)基準なので background-origin を border-box にする。
       shorthand は background-origin を padding-box に戻すので必ず【後ろ】に書くこと。 */
  background: #dd7e0f url(../image/contact/icon_submit_arrow.svg) no-repeat right 19px center;
  background-origin: border-box;
  background-size: 22px 22px;
  border: 4px solid #dc3509;
  border-radius: 30px;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
  /* <a> と違いグローバルの transition-duration が効かないので自分で持つ */
  transition: background-color 0.3s, border-color 0.3s;
}

/* ホバー（Figma 23281:2663「form button - 送信」のプロパティ1=バリアント2）。
   Figmaの実体は全面に載る rgba(255,255,255,0.5) の白ベールだが、input には
   ::before/::after を置けないので「元の色と白の50%混色」で表現する（数学的に同値）。
   文字は白なのでベールを受けても白のまま＝色を変える必要が無い。
   この2色は修正依頼#10で .business_cta a:hover に入れた値と完全に同一
   （同じ #dd7e0f / #dc3509 のペアなので当然一致する）。 */
.bcf_card input[type="submit"]:hover {
  /* shorthand で書くと矢印の background-image が消えるので background-color で指定する */
  background-color: #eebf87; /* #dd7e0f + 白50% */
  border-color: #ee9a84; /* #dc3509 + 白50% */
}

/* ※Figma 23192:3348 にはこのページだけ「法人のお客様TOPへ戻る」が無い（他の法人ページには有る）。
   Figmaを正としてテンプレートから外してあるので、ここには対応するスタイルを置かない。 */

/* ===========================================================
   タブレット谷間（751〜1019px）
   このフォームは2026-07-26作成で、7/24-25に support / download を流動化したときの
   対象に入っていない。カードが width:980px 固定なので、980px＋左右余白を確保できない
   幅では丸ごとはみ出す（実測 900px で scrollWidth 980＝80px溢れ。溢れる要素は
   .bcf_card ただ1つで、中身は全て 100% か 580px 以下）。
   既定の「方針B: PCを流動化」に合わせ、この帯だけカードを流動化する。

   上限を 1019px にしているのは、1020px＝980＋左右20px が「PCの値そのままで
   余白まで成立する」最小幅だから。1020px以上はこのブロックに入らない＝完全に無改変。

   パディングは元の比率 200/980 を保つ。%は【親(main)の幅】に対して解決されるので、
   カード幅 = 100% − 40px から逆算して
     200/980 × (100% − 40px) = calc(20.408% − 8.163px)
   と書く。main=1020 のとき 208.16−8.16 = 200px で、上のPC値と1px未満で連続する。
   =========================================================== */
@media screen and (min-width: 751px) and (max-width: 1019px) {
  .bcf_card {
    width: calc(100% - 40px);
    padding-left: calc(20.408% - 8.163px);
    padding-right: calc(20.408% - 8.163px);
  }
  /* 580px固定の2つはカード内寸に従わせる（中の input/textarea/select は元から100%） */
  .bcf_field,
  .bcf_privacy {
    width: 100%;
  }
  /* ※注記はPCと同じく fit-content の中央置き（Figmaのnowrap＝最長行の幅）。
     幅450pxなのでこの帯でも折り返さず、カードより内側に収まる＝上書き不要。 */
}

/* ===========================================================
   お問い合わせフォーム（法人） SP（〜750px）
   Figma 23837:10033「お問い合わせフォーム：法人」393×2958
   Figmaのy座標（ページ上端基準。ヘッダー70pxは position:fixed で流れに無い）:
     KV 71〜491（393×420・PCと同じCSSグラデーション）
     白箱 222（346×46）／副コピー 280（353×60）
     リード 531（353×50）／注記 601（353×54）
     白カード 695 の 353×1482（入力欄は x44 幅305 ＝ 左右パディング24）
     入力欄 735/825/915/1005（h66・90px間隔）
     プルダウン 1095/1186/1277（h67・91px間隔。いずれも欄の下に24px）
     テキストエリア見出し1368（2行40px）・枠1416(305×160)・注記1584(2行28px)
     個人情報保護方針 1652(305×160) / 同意 1832(231×28・中央)
     captcha 1900(317×92) / 注意書き 2032(305×75) / 送信 2147(280×60)
     ※送信ボタンはカード下端2177を跨いで2207まで出る → footer 2327

   カード内部の積算がFigmaの1482pxと完全一致することを検算済み:
     40 +(66+24)*4 +(67+24)*3 +(40+8+160+8+28 +40) +(160+20) +(28+40)
        +(92+40) +(75+40) +(60-30) = 1482
   =========================================================== */
@media screen and (max-width: 750px) {

  /* ===== KV =====
     共有の .usecase_mv SP定義（page-usecase.css）が土台。
     白箱が1つだけなので :last-child の line-height:30px / margin-bottom:0 がそのまま当たり、
     ここで要るのは文字サイズだけ（Figma 23px・箱 8+30+8=46px・幅 12+322+12=346px）。 */
  /* 依頼(2026-07-27 #3): 端末側の文字拡大設定などでタイトルが2行になると、
     白箱が【下】へ伸びて top:209px の副コピーに重なる（Android一部機種で発生）。
     タイトルは全角14文字＝23px×14＋左右padding24px＝346px、使える幅は
     393−20(left)＝373px。余裕は27px（7.8%）しかないので、文字が少しでも
     大きく描かれると折り返す。折り返し自体は端末設定次第で防げないため、
     【箱の下端を y197（=151+46）に固定し、伸びる分は上の空きへ逃がす】。
     top+translateY(-100%) なので1行のときの位置は従来と1pxも変わらない。 */
  .business_contact_mv .mv_kv_text {
    top: 197px; /* Figma y222 − 写真上端71 ＝151 ＋ 白箱46px ＝ 箱の下端 */
    transform: translateY(-100%);
  }
  .business_contact_mv .mv_title span {
    font-size: 23px;
  }
  .business_contact_mv .mv_desc {
    top: 209px; /* Figma y280 − 71 */
    /* 共有SP定義は left:20px しか持たない＝右端が画面端まで伸びる（downloadで踏んだ罠）。
       Figmaは幅353pxなので右も自分で止める。 */
    right: 20px;
    white-space: normal; /* 共有 .mv_desc の nowrap を解除（Figmaは3行の自動折返し） */
    /* PC用の line-height:2.5vw は 393px だと 9.8px に化けるので px で打ち消す */
    line-height: 20px; /* Figma 19.968px */
  }

  /* ===== リード文・注記 ===== */
  /* Figma 353×50・16px/25px・中央・tracking -0.64px。KV下端491 → 531 ＝ 40px（PCと同じ） */
  .bcf_lead {
    padding: 0 20px;
    letter-spacing: -0.64px;
  }
  /* Figma 353×54（3行）・12px/18px・左揃え。リード下端581 → 601 ＝ 20px（PCは12px）。
     PCの width:fit-content（Figma PCのnowrap＝最長行の幅）を 100% に戻す。
     戻さないと折返し幅が「最長行」になり、Figma SPの353px 3行にならない。 */
  .bcf_lead_note {
    width: 100%;
    margin-top: 20px;
    padding: 0 20px;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
  }

  /* ===== 白カード =====
     PCと違いSPは角丸4px＋ドロップシャドウが付く（Figma「bk - white」）。
     下マージン150px ＝ はみ出す送信ボタン30px ＋ Figmaのfooterまで120px。 */
  .bcf_card {
    width: auto;
    margin: 40px 20px 150px;
    padding: 40px 24px 0;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
  }

  /* ===== 入力欄 ===== */
  /* Figma 305×66（ラベル20px＋7px＋枠39px）・欄間24px */
  .bcf_field {
    width: auto;
    margin-bottom: 24px;
  }
  /* SPはラベルの行送りが必須/任意とも20px（PCは任意欄だけ15px）。
     「ラベル高＋下マージン」が枠の開始位置になるので、欄の種類ごとに揃える。 */
  .bcf_label {
    line-height: 20px;
    margin-bottom: 7px; /* 20 + 7 = 27 ＝ Figma 66px欄の枠開始位置 */
  }
  .bcf_field--optional .bcf_label {
    margin-bottom: 7px; /* PCの12pxを打ち消す（行送りが20pxになった分） */
  }
  /* 15pxの本文と13pxの「※必須」を同じ行に置くと、両方 line-height:20px でも
     行ボックスが 20.76px に膨らむ（ベースラインを揃えるため大きい方のstrut上端と
     小さい方の下端の和集合が取られる）。必須欄4つが各+1pxでカード高が1486pxになった。
     「※必須」の行送りを15pxに下げると、その箱が親のstrut(20px)の内側に収まり
     和集合がちょうど20pxになる。ベースラインは動かないので見た目は不変。 */
  .bcf_req {
    line-height: 15px;
  }
  /* プルダウンだけ欄が1px高い（67px）＝枠開始が28px。以下2つは .bcf_field--optional より
     後に置くこと（同詳細度(0,2,0)なので順序で決まる） */
  .bcf_field--select .bcf_label {
    margin-bottom: 8px;
  }
  /* Figma 23868:6984 は 297px幅の2行（40px）で、枠1416まで8px */
  .bcf_field--textarea .bcf_label {
    margin-bottom: 8px;
  }

  /* Figma 305×39（PCは47）。プレースホルダは左8px・13px（PCは左16px・15px） */
  .bcf_card input.bcf_input,
  .bcf_card select.bcf_select {
    height: 39px;
    padding: 0 8px;
    font-size: 13px;
  }
  .bcf_card select.bcf_select {
    padding-right: 36px; /* ▼(16px)＋右12px＋余白 */
  }
  /* ▼の位置。SP版Figma 23837:10033 を原寸(393×2958)で書き出して3本とも実測:
       枠 x44..349（305px）／y1123..1162（39px）、▼ x321..337 y1137..1149
       → 右12px ／ 上14px ／ 下13px（枠39pxの中央より0.5px下だがFigma通り）。
     値はPCと同じくFigmaの「枠の外縁から」。PC側で background-origin:border-box を
     指定しているのでここは位置だけ上書きすればよい
     （padding-box のままだと実際には右13px・下14pxに着地していた＝旧実装の1pxズレ）。 */
  .bcf_card select.bcf_select {
    background-position: right 12px bottom 13px;
  }

  /* ===== テキストエリア（Figma 305×160・padding 8px・13px/20px） ===== */
  .bcf_card textarea.bcf_textarea {
    height: 160px;
    padding: 8px;
    font-size: 13px;
    line-height: 20px;
  }
  /* Figma 305幅の2行（28px）・11px/14px・tracking -0.22px。枠下端1576 → 1584 ＝ 8px */
  .bcf_note {
    line-height: 14px;
    letter-spacing: -0.22px;
  }
  /* 注記下端1612 → 個人情報保護方針1652 ＝ 40px。
     .bcf_field の 24px より後に書かないと上書きされる（同詳細度） */
  .bcf_field--textarea {
    margin-bottom: 40px;
  }

  /* ===== 個人情報保護方針（Figma 305×160のスクロール枠） ===== */
  .bcf_privacy {
    width: auto;
  }
  /* 中身は Figma 23873:7113（SP版の個人情報保護方針）289×2702:
       見出し 14px/25px（PCと同じ）／本文 12px/20px・左インデント8px（289の2.77%）
       本文と次の見出しの間は12px（PCは8px）
     padding は枠305px・枠線1pxから内寸を289pxにする値＝7px（Figmaの上端オフセットも7px）。
     枠はスクロールするので中身の量はページの高さに影響しない。 */
  .bcf_privacy_scroll {
    height: 160px;
    padding: 7px;
    font-size: 12px;
    line-height: 20px;
  }
  .bcf_privacy_scroll p {
    margin-bottom: 12px;
    padding-left: 8px;
  }

  /* ===== 同意 / captcha / 注意書き / 送信 ===== */
  /* Figma x81＝カード中央。同意下端1860 → captcha 1900 ＝ 40px。
     中央寄せ（text-align:center）とエラー文の箱はPC側で指定済みなので、ここは間隔だけ。 */
  .bcf_agree {
    margin-bottom: 40px;
  }
  /* captcha下端1992 → 注意書き2032 ＝ 40px（PCは60px） */
  .bcf_captcha {
    margin-bottom: 40px;
  }
  /* Figma 305×75（3行）・15px/25px・左揃え（PCは中央）。下端2107 → 送信2147 ＝ 40px */
  .bcf_notice {
    margin-bottom: 40px;
    text-align: left;
  }
  /* 送信ボタン(280×60)はカード下端2177を30px跨ぐ（PCは31px） */
  .bcf_submit {
    margin-bottom: -30px;
  }
}