@charset "utf-8";
/*
 * 法人向けお問い合わせ
 *
 * 元は common.css / contact.css / biz-contact.css に分かれていて、
 * **このページが使うルールだけ**を抜き出して結合してある。
 * 読み込み順を保っているので、この順序を変えないこと。
 *
 * **メディアクエリより後ろに基本ルールを書かないこと。**
 * 同じ詳細度で負けてレスポンシブが効かなくなる。
 */

/* ===================================================== common.css より */

@charset "utf-8";

/*
 * 下層ページ（ラフ未提供分）
 * 製品情報 / 法人のお客様 / 品質・製造 / MDL / 会社情報 / FAQ / 採用情報
 *
 * ラフが無いため、支給ラフ4画面のトーンに合わせて設計している。
 * ブレークポイントの役割分担は他ページと揃える:
 *   1024px = 文字サイズと余白 / 768px = レイアウト / 480px = 個別調整
 *
 * **基本ルール → メディアクエリの順に書く。** 逆にすると同じ詳細度で
 * メディアクエリが負け、レスポンシブが一切効かない（一度やった）。
 */

/* box-sizing は自分の名前空間に限定する（親テーマに依存しない） */
:where(.p-crumb, .p-ptitle, .p-block, .p-shopband, .p-consult, .p-faq,
       .p-mdlhero, .p-mfghero)
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* =============================================== 共通 */

.p-arrow { flex-shrink: 0; }

.is-todo { cursor: default; }

.p-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: #00133F;
}

/* --- ボタン --- */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 54px;
  padding: 14px 26px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-btn--navy { background: #00133F; color: #FFFFFF; }

.c-btn--navy:hover { background: #0049C8; }

.c-btn--outline {
  border: 1px solid #C7CCD6;
  background: #FFFFFF;
  font-weight: 500;
  color: #131313;
}

.c-btn--outline:hover { border-color: #0049C8; color: #0049C8; }

.p-arrow { transition: transform 0.2s; }

/* --- パンくず --- */

.p-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: #4B5563;
}

.p-crumb__item a,
.p-crumb__item .is-todo { color: #4B5563; text-decoration: none; }

.p-crumb__item a:hover { color: #0049C8; }

.p-crumb__item [aria-current="page"] { color: #131313; }

.p-crumb__sep { display: flex; color: #B6BDC9; }

/* --- 小見出し --- */

.p-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: #131313;
}

.p-subhead__bar {
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 22px;
  background: #0049C8;
}

/* 行の一部が未確認のとき */
.is-unconfirmed {
  color: #7A5C00;
  background: #FFF8E6;
  padding: 0 4px;
  border-radius: 2px;
}

/* --- 写真プレースホルダ --- */

.p-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #EDEFF4;
  border-radius: 4px;
}

.p-photo svg { width: 34px; height: 34px; }

/*
 * 素材が入ったもの（<picture>）。
 * プレースホルダと同じ枠に収める。aspect-ratio は変わらず variant が持つ。
 * 画像側に object-fit を当てないと、縦横比の違いで潰れる。
 */
.p-photo.is-set {
  display: block;
  overflow: hidden;
  background: #EDEFF4;
}

.p-photo.is-set img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================================================================
   スマホ・タブレット: 文字サイズと余白
   ================================================================ */
@media screen and (max-width: 1024px) {
  .p-subhead { font-size: 18px; }

  .p-subhead__bar { height: 19px; }

  .p-icon { width: 34px; height: 34px; }
}

/* ===================================================== contact.css より */

@charset "utf-8";

.c-req,
.c-opt {
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
}

.c-req {
  background: #FDECEC;
  color: #C0392B;
}

.c-opt {
  background: #F0F1F4;
  color: #6B7280;
}

.c-field + .c-field {
  margin-top: 14px;
}

.c-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #131313;
}

.c-input,
.c-textarea,
.c-select__el {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #D5D9E0;
  border-radius: 4px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: #131313;
}

.c-textarea {
  min-height: 104px;
  resize: vertical;
}

.c-input::placeholder,
.c-textarea::placeholder {
  color: #9CA3AF;
}

.c-input:focus-visible,
.c-textarea:focus-visible,
.c-select__el:focus-visible,
.c-check__box:focus-visible + .c-check__mark,
.c-btn:focus-visible {
  outline: 2px solid #0049C8;
  outline-offset: 2px;
}

/* select の矢印を自前にする */
.c-select {
  position: relative;
}

.c-select__el {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.c-select__mark {
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
  pointer-events: none;
  color: #4B5563;
}

/* チェックボックス */
.c-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #131313;
  cursor: pointer;
}

.c-check__box {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.c-check__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid #C7CCD6;
  border-radius: 3px;
  background: #FFFFFF;
  color: transparent;
}

.c-check__box:checked + .c-check__mark {
  background: #0049C8;
  border-color: #0049C8;
  color: #FFFFFF;
}

/*
 * ボタン（このページ単体でも成立させる）。
 * 法人向けお問い合わせページ（biz-contact.css）も同じ部品を使うため、
 * ここでまとめて受ける。**biz-contact.css 側で再定義しない。**
 */
.p-bzhero .c-btn,
.p-bzform .c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 54px;
  padding: 14px 24px;
  border: 0;
  border-radius: 4px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.c-btn--navy {
  background: #00133F;
  color: #FFFFFF;
}

.c-btn--navy:hover {
  background: #0049C8;
}

.c-btn--outline {
  border: 1px solid #C7CCD6 !important;
  background: #FFFFFF;
  font-weight: 500;
  color: #131313;
}

.c-btn--outline:hover {
  border-color: #0049C8 !important;
  color: #0049C8;
}

.is-todo {
  cursor: default;
}

.p-arrow {
  flex-shrink: 0;
}

.p-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: #00133F;
}

.p-icon--md {
  width: 24px;
  height: 24px;
}

/* ===================================================== biz-contact.css より */

@charset "utf-8";

/*
 * 法人向けお問い合わせページ（design/rough/法人お問い合わせ.png）
 *
 * 依存: components.css / common.css / contact.css
 *   - common.css  … パンくず（.p-crumb）・小見出し（.p-subhead）・写真（.p-photo）
 *   - contact.css … フォーム部品（.c-label / .c-input / .c-select / .c-check / .c-btn）
 *   **上記で定義済みのクラスをここで再定義しない。**二重定義は必ずずれる。
 *   依存関係は biz-contact.test.mjs で固定している。
 *
 * PC と SP は同一マークアップ。CSS だけで出し分ける。
 * 既存テーマ origin2 に合わせ、デスクトップ基準で書き
 * max-width: 1024px で上書きする（**メディアクエリはファイル末尾**）。
 *
 * SP は画像が上・テキストが下（依頼者の判断・全セクション共通）。
 */

/* ----------------------------------------------------------- 前提 */
:where(.p-bzhero, .p-bzkit, .p-bzsupport, .p-bzform, .p-bzdirects, .p-bztrust)
:where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* 電話・LINE カードのアイコンだけ大きい。他のサイズは contact.css にある */
.p-icon--lg {
  width: 32px;
  height: 32px;
}

/* ========================================================= ヒーロー */

.p-bzhero {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: 40px 48px;
  margin-top: 28px;
  padding: 44px 0 48px;
}

.p-bzhero__title {
  margin: 0;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: #00133F;
}

.p-bzhero__title span,
.p-bzhero__lead span,
.p-bzkit__lead span,
.p-bzsupport__lead span {
  display: block;
}

.p-bzhero__lead {
  margin: 24px 0 0;
  font-size: 17px;
  line-height: 1.95;
  color: #4B5563;
}

/* CTA は2カラムの下段いっぱいに置いて中央に寄せる */
.p-bzhero__cta {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.p-bzhero__cta .c-btn {
  min-width: 300px;
}

.p-bzhero__note {
  margin: 0;
  font-size: 14px;
  color: #6B7280;
}

/* ========================================== キッティング・納品対応 */

.p-bzkit {
  padding: 48px 0 8px;
}

.p-bzkit__body {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: start;
  gap: 40px;
  margin-top: 24px;
}

/*
 * セクション見出し（.p-subhead）より必ず小さくする。
 * 22px だと縦バー付きの見出しと同サイズになり、字数の多いこちらが
 * 大きく見えて階層が逆転する（依頼者の指摘・2026-08-26）。
 * 大小関係は test-breakpoints.py で実測している。
 */
.p-bzkit__title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: #131313;
}

.p-bzkit__lead {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #4B5563;
}

/* チェックリストは2列。ラフの並びは左列3件 → 右列3件ではなく行方向 */
.p-bzchecks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.p-bzcheck {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #131313;
}

/*
 * 塗りつぶし。白地に細い青枠 + 青のチェックだと薄く見える（依頼者の指摘）。
 * 対応項目が並ぶ箇所なので、一つずつが確実に読み取れる濃さにする。
 */
.p-bzcheck__mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 3px;
  background: #0049C8;
  color: #FFFFFF;
}

/* ======================================== 導入後も安心のサポート */

.p-bzsupport {
  padding: 48px 0 8px;
}

.p-bzsupport__body {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  align-items: center;
  gap: 40px 48px;
  margin-top: 24px;
}

.p-bzsupport__list {
  display: flex;
  flex-direction: column;
}

.p-bzsupport__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 22px 0;
}

.p-bzsupport__item + .p-bzsupport__item {
  border-top: 1px solid #E5E7EB;
}

.p-bzsupport__icon {
  display: block;
  color: #00133F;
}

.p-bzsupport__title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #131313;
}

.p-bzsupport__lead {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: #4B5563;
}

/* ================================================= お問い合わせフォーム */

.p-bzform {
  margin-top: 48px;
  padding: 40px 44px 44px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
}

.p-bzform__heading {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #131313;
}

.p-bzform__note {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.8;
  color: #4B5563;
}

.p-bzform__body {
  margin-top: 28px;
}

/* 2カラム。ラフの並び順（左→右、上→下）をそのまま流す */
.p-bzform__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}

/*
 * .c-field 同士の余白は contact.css が「縦に積む」前提で入れている。
 * ここはグリッドで間隔を持つので、その上マージンを打ち消す。
 */
.p-bzform__grid .c-field + .c-field {
  margin-top: 0;
}

.p-bzform__body > .c-field {
  margin-top: 20px;
}

/* 未確認の注記。プレビューで「まだ中身が無い」と分かるようにする */
.p-bzform__todo {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: #7A5C00;
}

.p-bzform__privacy {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.p-bzform__privacy-link {
  color: #0049C8;
  text-decoration: underline;
}

.p-bzform__actions {
  display: grid;
  grid-template-columns: minmax(0, 230px) minmax(0, 300px);
  justify-content: center;
  gap: 20px;
  margin-top: 24px;
}

/* ==================================================== 電話 / LINE 導線 */

.p-bzdirects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.p-bzdirect {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 28px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  text-decoration: none;
  color: inherit;
}

.p-bzdirect .p-arrow {
  margin-left: auto;
  color: #6B7280;
}

.p-bzdirect__icon {
  display: block;
  flex-shrink: 0;
}

.p-bzdirect--line .p-icon {
  color: #06C755;
}

.p-bzdirect__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-bzdirect__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: #131313;
}

.p-bzdirect__note {
  font-size: 14px;
  color: #6B7280;
}

/* ======================================================= 信頼バー */

.p-bztrust {
  margin-top: 32px;
  padding: 22px 0 8px;
  border-top: 1px solid #E5E7EB;
}

.p-bztrust__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-bztrust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #4B5563;
  text-align: left;
}

.p-bztrust__item .p-icon {
  flex-shrink: 0;
  color: #00133F;
}

/* 写真の縦横比。ラフの見た目に合わせる */
.p-photo--bz-hero    { aspect-ratio: 16 / 9; }

.p-photo--bz-kit     { aspect-ratio: 16 / 10; }

.p-photo--bz-support { aspect-ratio: 16 / 10; }

/* =====================================================================
 * レスポンシブ
 *
 * ブレークポイントは**役割で分ける**（他の CSS と同じ方針）:
 *   1024px … 既存テーマがコンテナを全幅にする境界。文字サイズと余白だけ
 *    768px … 2カラム → 1カラム。**画像が上・テキストが下**（依頼者の判断）
 *    480px … 2列で窮屈になるリストを1列にする
 *
 * **このブロックより後ろに基本ルールを書かない。**
 * 過去に基本ルールをメディアクエリの後ろに書いて、
 * レスポンシブが一切効かない状態を作った。
 * ===================================================================== */
@media screen and (max-width: 1024px) {
  .p-bzhero {
      gap: 32px 32px;
      margin-top: 16px;
      padding: 32px 0 40px;
    }

  .p-bzhero__title { font-size: 38px; }

  .p-bzkit__body,
  .p-bzsupport__body { gap: 32px; }

  .p-bzform { padding: 32px 28px 36px; }

  .p-bzform__grid { gap: 18px 28px; }

  /*
     * common.css の .p-subhead はこの幅から 18px になる。
     * 追随させないと 1024〜769px の帯だけ見出しの階層が逆転する
     * （実際にこの帯で逆転したまま出した。ブラウザ実測で発覚）
     */
    .p-bzkit__title { font-size: 17px; }

  .p-bzsupport__title { font-size: 16px; }

  .p-bzdirect { padding: 20px 20px; }

  .p-bztrust__item { font-size: 13px; }
}

@media screen and (max-width: 768px) {
  /* --- ヒーロー --- */
    .p-bzhero {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      padding: 20px 0 32px;
    }

  /* 画像が上・テキストが下（依頼者の判断） */
    .p-bzhero__media { order: -1; }

  .p-bzhero__title { font-size: 30px; }

  .p-bzhero__lead {
      margin-top: 16px;
      font-size: 15px;
      line-height: 1.9;
    }

  /* 意図した改行位置は PC 幅のためのもの。SP では自然に流す */
  .p-bzhero__lead span,
  .p-bzkit__lead span,
  .p-bzsupport__lead span {
      display: inline;
    }

  .p-bzhero__cta { align-self: stretch; }

  .p-bzhero__cta .c-btn {
      width: 100%;
      min-width: 0;
    }

  /* --- キッティング / サポート --- */
  .p-bzkit,
  .p-bzsupport {
      padding: 32px 0 0;
    }

  .p-bzkit__body,
  .p-bzsupport__body {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
      margin-top: 18px;
    }

  .p-bzkit__media,
  .p-bzsupport__media { order: -1; }

  /* SP の .p-subhead は 18px。それより小さく保つ */
    .p-bzkit__title { font-size: 17px; }

  .p-bzkit__lead {
      margin-top: 12px;
      font-size: 15px;
    }

  .p-bzchecks {
      gap: 12px 16px;
      margin-top: 20px;
    }

  .p-bzcheck { font-size: 14px; }

  .p-bzsupport__item {
      grid-template-columns: 32px minmax(0, 1fr);
      gap: 14px;
      padding: 18px 0;
    }

  .p-bzsupport__icon .p-icon {
      width: 32px;
      height: 32px;
    }

  .p-bzsupport__title { font-size: 17px; }

  /* --- フォーム --- */
    .p-bzform {
      margin-top: 32px;
      padding: 24px 16px 28px;
    }

  .p-bzform__heading { font-size: 20px; }

  .p-bzform__note { font-size: 14px; }

  .p-bzform__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
    }

  .p-bzform__actions {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }

  /* 中央寄せのままだと折り返しで「必須」だけが行末に取り残される */
    .p-bzform__privacy {
      justify-content: flex-start;
    }

  /* 送信を先に置く。SP では並びがそのまま優先度になる */
    .p-bzform__actions .c-btn[type="submit"] { order: -1; }

  /* --- 電話 / LINE --- */
    .p-bzdirects {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      margin-top: 24px;
    }

  .p-bzdirect {
      gap: 14px;
      padding: 18px 16px;
    }

  .p-bzdirect__title { font-size: 17px; }

  /* --- 信頼バー --- */
    .p-bztrust__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px 12px;
    }

  .p-bztrust__item { justify-content: flex-start; }

  /* 5件は2列で割り切れないので、最後の1件が2列を使い切る */
    .p-bztrust__item:last-child { grid-column: 1 / -1; }

  .p-photo--bz-hero { aspect-ratio: 16 / 10; }
}

@media screen and (max-width: 480px) {
  /* 2列だと「ソフトウェアインストール」が折り返して読みにくい */
    .p-bzchecks {
      grid-template-columns: minmax(0, 1fr);
    }

  .p-bztrust__list {
      grid-template-columns: minmax(0, 1fr);
    }

  .p-bzhero__title { font-size: 26px; }
}