@charset "UTF-8";

/* =========================================================
   PACKLAB カタログ 2026  お問い合わせ／送信完了
   （contact.html / thanks.html）

   この2ページはFigmaの書き出しが無いので、カタログ側の
   トンマナ（色・字組み・余白・四角い面）に合わせて組んでいる。
   ・見出しは FEATURES / CONTACTS と同じ字組み（Noto Sans JP 700）
   ・行の区切りは製品ページのスペック表と同じ破線
   ・ボタンは各ページの「お問い合わせ」ボタンと同じ濃色ベタ＋丸矢印
   土台は css/catalog-common.css。
   ========================================================= */

/* =========================================================
   ページ見出しの帯
   ========================================================= */
.fhead {
  background: var(--c-cream);
  padding-block: calc(120 * var(--u));
}
/* 見出し帯の中身は中央揃え */
.fhead .inner { text-align: center; }
.fhead__en {
  font-weight: 700;
  font-size: calc(45 * var(--u));
  line-height: calc(55 * var(--u));
  color: var(--c-main);
}
.fhead__ja {
  margin-top: calc(16 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(25 * var(--u));
  color: var(--c-main);
}
.fhead__lead {
  margin-top: calc(36 * var(--u));
  font-weight: 500;
  font-size: calc(25 * var(--u));
  line-height: calc(45 * var(--u));
  color: var(--c-body2);
}

/* =========================================================
   フォーム本体
   ========================================================= */
.fpage {
  padding-top: calc(130 * var(--u));
  padding-bottom: calc(160 * var(--u));
}
.fform {
  width: 100%;
  max-width: calc(1200 * var(--u));
  margin-inline: auto;
}

/* ハニーポット（Bot対策）。人には見えないが display:none にはしない */
.fform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 1行 ＝ [ラベル][入力]。区切りはスペック表と同じ破線 */
.frow {
  display: flex;
  gap: calc(56 * var(--u));
  padding-block: calc(34 * var(--u));
  border-bottom: 1px dashed var(--c-line);
}
.frow:first-of-type { border-top: 1px dashed var(--c-line); }

.frow__label {
  flex: none;
  width: calc(330 * var(--u));
  padding-top: calc(18 * var(--u));
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--c-main);
}
.frow__field { flex: 1; min-width: 0; }

.badge-req,
.badge-opt {
  display: inline-block;
  margin-left: calc(14 * var(--u));
  padding: 0 calc(12 * var(--u));
  font-weight: 700;
  font-size: calc(18 * var(--u));
  line-height: calc(30 * var(--u));
  vertical-align: calc(2 * var(--u));
  white-space: nowrap;
}
.badge-req { background: var(--c-main); color: #FFFFFF; }
.badge-opt { border: 1px solid var(--c-sub); color: var(--c-sub); }

/* 入力欄 */
.finput {
  display: block;
  width: 100%;
  height: calc(76 * var(--u));
  padding-inline: calc(24 * var(--u));
  border: 1px solid var(--c-taupe);
  border-radius: 0;
  background: #FFFFFF;
  font-family: inherit;
  font-size: calc(23 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--c-body);
  transition: border-color .15s;
}
.finput--short { max-width: calc(520 * var(--u)); }
textarea.finput {
  height: calc(300 * var(--u));
  padding-block: calc(18 * var(--u));
  line-height: calc(40 * var(--u));
  resize: vertical;
}
.finput::placeholder { color: #B9B4AA; }
.finput:focus {
  outline: none;
  border-color: var(--c-main);
  box-shadow: inset 0 0 0 1px var(--c-main);
}

/* チェックボックス */
.fchoice {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 * var(--u)) calc(44 * var(--u));
  padding-top: calc(14 * var(--u));
}
.fchk {
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  font-size: calc(23 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--c-body);
  cursor: pointer;
}
.fchk input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: grid;
  place-content: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin: 0;
  border: 1px solid var(--c-sub);
  background: #FFFFFF;
  cursor: pointer;
}
.fchk input::after {
  content: "";
  width: calc(13 * var(--u));
  height: calc(7 * var(--u));
  margin-top: calc(-3 * var(--u));
  border-left: 2px solid #FFFFFF;
  border-bottom: 2px solid #FFFFFF;
  transform: rotate(-45deg);
  opacity: 0;
}
.fchk input:checked {
  background: var(--c-main);
  border-color: var(--c-main);
}
.fchk input:checked::after { opacity: 1; }
.fchk input:focus-visible { outline: 2px solid var(--c-main); outline-offset: 2px; }

/* 補足とエラー */
.fnote {
  margin-top: calc(10 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--c-sub);
}
.ferr {
  display: none;
  margin-top: calc(10 * var(--u));
  font-weight: 700;
  font-size: calc(20 * var(--u));
  line-height: calc(32 * var(--u));
  color: #B5442E;
}
.ferr.is-on { display: block; }
.frow.is-error .frow__label { color: #B5442E; }
.frow.is-error .finput { border-color: #B5442E; }
.fagree.is-error .fchk input { border-color: #B5442E; }

.fformerr {
  display: none;
  margin-top: calc(28 * var(--u));
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: calc(36 * var(--u));
  text-align: center;
  color: #B5442E;
}
.fformerr.is-on { display: block; }

/* 個人情報の取り扱い */
.fprivacy {
  margin-top: calc(72 * var(--u));
  padding: calc(44 * var(--u)) calc(52 * var(--u)) calc(48 * var(--u));
  background: var(--c-offw);
}
.fprivacy h2 {
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: calc(39 * var(--u));
  color: var(--c-main);
}
.fprivacy p {
  margin-top: calc(18 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: calc(36 * var(--u));
  color: var(--c-body2);
}

.fagree {
  display: flex;
  justify-content: center;
  margin-top: calc(40 * var(--u));
}

/* 送信ボタン（各ページの「お問い合わせ」ボタンと同じ作り） */
.fsubmit,
.fthanks__back {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(18 * var(--u));
  width: calc(420 * var(--u));
  height: calc(100 * var(--u));
  margin: calc(56 * var(--u)) auto 0;
  padding: 0;
  border: 0;
  background: var(--c-main);
  color: #FFFFFF;
  font-family: inherit;
  font-weight: 500;
  font-size: calc(26 * var(--u));
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s;
}
.fsubmit:hover,
.fthanks__back:hover { opacity: .85; }
.fsubmit:disabled { opacity: .45; cursor: default; }
.fsubmit .arw,
.fthanks__back .arw {
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  color: #FFFFFF;
}

/* =========================================================
   送信完了（thanks.html）
   ========================================================= */
.fthanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: calc(150 * var(--u));
  padding-bottom: calc(180 * var(--u));
}
.fthanks__logo {
  width: calc(220 * var(--u));
  height: auto;
}
.fthanks__msg {
  margin-top: calc(60 * var(--u));
  font-weight: 700;
  font-size: calc(30 * var(--u));
  line-height: calc(55 * var(--u));
  color: var(--c-main);
}
.fthanks__note {
  margin-top: calc(30 * var(--u));
  font-size: calc(22 * var(--u));
  line-height: calc(44 * var(--u));
  color: var(--c-body2);
}
.fthanks__back { margin-top: calc(64 * var(--u)); }

/* =========================================================
   ここから下は仮組み。スマホ版のデザインが出たら作り直す。
   ========================================================= */
@media (max-width: 1100px) {
  .fhead { padding-block: 44px; }
  .fhead__en { font-size: 30px; line-height: 1.25; }
  .fhead__ja { margin-top: 10px; font-size: 17px; line-height: 1.4; }
  .fhead__lead { margin-top: 18px; font-size: 15px; line-height: 1.9; }

  .fpage { padding-top: 40px; padding-bottom: 56px; }
  .fform { max-width: none; }
  .frow {
    flex-direction: column;
    gap: 10px;
    padding-block: 20px;
  }
  .frow__label { width: auto; padding-top: 0; font-size: 15px; line-height: 1.7; }
  .badge-req, .badge-opt { margin-left: 10px; font-size: 11px; line-height: 20px; vertical-align: 1px; }
  .finput { height: 48px; padding-inline: 14px; font-size: 16px; }
  .finput--short { max-width: none; }
  textarea.finput { height: 180px; padding-block: 12px; line-height: 1.8; }
  .fchoice { gap: 12px 20px; padding-top: 4px; }
  .fchk { gap: 10px; font-size: 15px; line-height: 1.6; }
  .fchk input { width: 20px; height: 20px; }
  .fchk input::after { width: 10px; height: 5px; }
  .fnote, .ferr { font-size: 13px; line-height: 1.7; }

  .fprivacy { margin-top: 36px; padding: 22px 18px; }
  .fprivacy h2 { font-size: 15px; line-height: 1.6; }
  .fprivacy p { margin-top: 12px; font-size: 13px; line-height: 1.9; }
  .fagree { margin-top: 24px; }
  .fformerr { margin-top: 18px; font-size: 14px; line-height: 1.7; }

  .fsubmit, .fthanks__back {
    width: min(100%, 300px);
    height: 62px;
    margin-top: 32px;
    gap: 12px;
    font-size: 17px;
  }
  .fsubmit .arw, .fthanks__back .arw { width: 26px; height: 26px; }

  .fthanks { padding-top: 48px; padding-bottom: 64px; }
  .fthanks__logo { width: 150px; }
  .fthanks__msg { margin-top: 28px; font-size: 19px; line-height: 1.9; }
  .fthanks__note { margin-top: 16px; font-size: 14px; line-height: 1.9; }
  .fthanks__back { margin-top: 32px; }
}