@charset "UTF-8";
/* =============================================
   CONTACTページ（2026リニューアル / Figma domanic CONTACT_PC node 516:1965）
   - 入力(contact) / 確認(contact-confirm) / 完了(contact-thanks) の3画面共通
   - カラー: _variables.scss（$ink / $yellow / $white）。
     入力枠・ボタン枠・非活性テキストは #a9a9a9（Figma実測値 → $contact-line）
   - 単位: サイズは em() 関数で指定（_mixins.scss）。PC = Figmaのpx値をそのまま em(px)。
     font-size を持つ要素（とその子）は第2引数で補正: em(px, 親font-size)
     例外で残すもの: border幅 / 999px（ピル型radius）
   - SP: Figma SPフレーム未提供のためPCデザインを基にした暫定実装（440px幅基準）。
     正式SPデザイン受領後に後追い調整する
============================================= */
/*--- em単位の基準（CONTACT系ページのみ） ---*/
/* style_contact.css は contact / contact-confirm / contact-thanks 限定読み込み（header.php）。
   PC: 16px固定 → em(24) = 24px
   SP: 3.6364vw（440px基準）→ em値がvw追従 */
body {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 3.6363636364vw;
  }
}

/* 全ページ共通(style.css)の main{padding-top} を打ち消し、
   固定ヘッダー分のオフセットは .contact 側に集約する（style_company と同じ考え方） */
main {
  padding-top: 0;
}
@media screen and (max-width: 768px) {
  main {
    padding-top: 0;
  }
}

/*--- ページラッパー ---*/
.contact {
  color: #2c2c2c;
  /* Figma: コンテンツ幅815（フレーム1200・左右余白 各193）
     チェックバック: 固定幅だと 769〜815px のブラウザ幅で画面外へはみ出し、
     815px前後でも左右余白がゼロになっていた。max-width + % に変えて必ず余白を作る
     （companyの .company-hero__inner と同じ対応） */
  max-width: 50.9375em;
  width: 92%;
  margin: 0 auto;
  /* fixedヘッダー高(90px) + Figma: 見出し上余白118px */
  padding-top: 13em;
  /* Figma: ボタン下端→footer上端 約149px - common.scss .footer{margin-top:100px} */
  padding-bottom: 3.0625em;
}
@media screen and (max-width: 768px) {
  .contact {
    width: auto;
    margin: 0;
    /* チェックバック: SPの見出し位置も全ページ統一。基準は PHILOSOPHY の em(104)
       （SP固定ヘッダー 70.4px = 16vw ＋ 見出し上余白 33.6px）。旧値 em(150.4) */
    padding: 6.5em 1.5625em 1.875em;
  }
}

/*--- ページ見出し ---*/
/* チェックバック: 見出しの高さを全ページで統一（基準 = PHILOSOPHY / OUR BUSINESS）。
   基準ページは line-height 未指定で、common.scss の body{line-height:1.5em} の
   計算値24pxをそのまま継承している（単位付きのため計算値が継承される）。
   ここに line-height:1.24（=80.6px）を指定していると行ボックスの半レディング差で
   文字の見た目上端が約28px下がるため、PCでは指定しない。
   SPは基準が未確定なので従来どおり 1.24 を維持する */
.contact__title {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 600;
  font-size: 4.0625em;
  letter-spacing: 0.05em;
  text-align: center;
  /* Figma: 見出しtop208 → リードtop328 の39px に、
     line-height を外したことで縮む要素高さ56.6px を足して下のコンテンツ位置を保つ */
  margin-bottom: 1.4707692308em;
}
@media screen and (max-width: 768px) {
  .contact__title {
    /* SPも基準(PHILOSOPHY)に統一: font-size em(46) / line-height は指定せず継承(27.2px)。
       margin-bottom は元の30pxに、line-height を外して縮む要素高さ22.4px(49.6→27.2)を足し、
       見出し〜リード文の間隔を従来どおりに保つ（基準は自身のfont-size 46px） */
    font-size: 2.875em;
    margin-bottom: 1.1391304348em;
  }
}

/*--- リード文 ---*/
.contact__lead {
  font-size: 0.9375em;
  line-height: 1.8;
  text-align: justify;
}

.contact__lead--center {
  text-align: center;
}
@media screen and (max-width: 768px) {
  .contact__lead--center {
    text-align: justify;
  }
}

/*--- 採用関連はこちら ---*/
.contact__recruit {
  display: flex;
  justify-content: flex-end;
  margin-top: 3.75em;
}
@media screen and (max-width: 768px) {
  .contact__recruit {
    margin-top: 2.5em;
  }
}
.contact__recruit a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 13.6666666667em;
  height: 3.8em;
  padding: 0 1.4em 0 1.9333333333em;
  background-color: #FFF226;
  border-radius: 0.3333333333em;
  font-size: 0.9375em;
  font-weight: 500;
  color: #2c2c2c;
  text-decoration: none;
}
.contact__recruit a img {
  width: 1.8em;
  height: 1.8em;
}

/*--- ステップ（01情報入力 → 02内容確認 → 03送信完了） ---*/
.contact-step {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin-top: 6.3125em;
  padding: 0;
}
@media screen and (max-width: 768px) {
  .contact-step {
    margin-top: 3.75em;
  }
}

/* 確認・完了画面はリード直後にステップが来るため詰める */
.contact--confirm .contact-step,
.contact--thanks .contact-step {
  margin-top: 3.75em;
}
@media screen and (max-width: 768px) {
  .contact--confirm .contact-step,
  .contact--thanks .contact-step {
    margin-top: 2.5em;
  }
}

.contact-step__item {
  display: flex;
  align-items: center;
  font-size: 0.8125em;
  font-weight: 500;
  color: #a9a9a9;
  /* 項目間の罫線（Figma: 58×1 #a9a9a9） */
}
.contact-step__item + .contact-step__item::before {
  content: "";
  width: 4.4615384615em;
  height: 1px;
  background-color: #a9a9a9;
  margin: 0 3.4615384615em;
}
@media screen and (max-width: 768px) {
  .contact-step__item + .contact-step__item::before {
    width: 1.8461538462em;
    margin: 0 1.0769230769em;
  }
}

.contact-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2307692308em;
  height: 2.2307692308em;
  margin-right: 0.4615384615em;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 500;
  font-size: 0.8461538462em;
  flex-shrink: 0;
}

.contact-step__item.is-current {
  color: #2c2c2c;
}
.contact-step__item.is-current .contact-step__num {
  /* Figma: 現在ステップは黄色2pxの円囲み */
  border: 2px solid #FFF226;
  border-radius: 50%;
}

/*--- 送信エラー・バリデーションアラート ---*/
.contact-form__alert {
  margin-top: 3.125em;
  font-size: 0.875em;
  font-weight: 500;
  color: #d00000;
  text-align: center;
}

/*--- フォーム ---*/
.contact-form {
  margin-top: 5.3125em;
}
@media screen and (max-width: 768px) {
  .contact-form {
    margin-top: 3.75em;
  }
}

.contact-form__row + .contact-form__row {
  /* Figma: 行ピッチ139 = ラベル21 + 余白20 + 入力49 + 行間49 */
  margin-top: 3.0625em;
}
@media screen and (max-width: 768px) {
  .contact-form__row + .contact-form__row {
    margin-top: 2.25em;
  }
}

.contact-form__label {
  display: flex;
  align-items: center;
  font-size: 0.9375em;
  font-weight: 500;
  margin-bottom: 1.3333333333em;
}
@media screen and (max-width: 768px) {
  .contact-form__label {
    flex-wrap: wrap;
    margin-bottom: 0.8em;
  }
}

.contact-form__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  width: 2.75em;
  height: 1.5833333333em;
  margin-left: 0.8333333333em;
  background-color: #FFF226;
  border-radius: 0.25em;
  font-weight: 500;
  flex-shrink: 0;
}

.contact-form__badge--optional {
  background-color: #eee;
}

.contact-form__note {
  font-size: 0.7333333333em;
  margin-left: 1.2727272727em;
}

.contact-form__note--right {
  font-size: 0.8em;
  margin-left: auto;
}
@media screen and (max-width: 768px) {
  .contact-form__note--right {
    width: 100%;
    margin-left: 0;
    margin-top: 0.5em;
  }
}

/*--- 入力欄（Figma: 815×49 / 枠1px #a9a9a9 / 角丸5px） ---*/
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  border: 1px solid #a9a9a9;
  border-radius: 0.2777777778em;
  background-color: #fff;
  font-size: 1.125em;
  font-family: inherit;
  letter-spacing: 0.05em;
  color: #2c2c2c;
  -webkit-appearance: none;
  appearance: none;
}
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #a9a9a9;
}
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: #2c2c2c;
}
@media screen and (max-width: 768px) {
  .contact-form__input,
  .contact-form__textarea {
    /* iOSのフォーカス時自動ズームを避けるため実px16px以上を確保 */
    font-size: 16px;
  }
}

.contact-form__input {
  height: 2.7222222222em;
  padding: 0 0.7777777778em;
}
@media screen and (max-width: 768px) {
  .contact-form__input {
    height: 2.75em;
    padding: 0 0.75em;
  }
}

.contact-form__textarea {
  height: 11.1666666667em;
  padding: 0.6111111111em 0.7777777778em;
  line-height: 1.78;
  resize: vertical;
}
@media screen and (max-width: 768px) {
  .contact-form__textarea {
    height: 13.75em;
    padding: 0.625em 0.75em;
  }
}

/* 姓名・セイメイの2分割（Figma: 各398.5 / 間18） */
.contact-form__half {
  display: flex;
  gap: 1.125em;
}
@media screen and (max-width: 768px) {
  .contact-form__half {
    gap: 0.75em;
  }
}
.contact-form__half .contact-form__input {
  flex: 1;
  min-width: 0;
}

.contact-form__error {
  margin-top: 0.5em;
  font-size: 0.75em;
  color: #d00000;
}

/*--- ハニーポット（画面外へ退避） ---*/
.contact-form__hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/*--- ボタン（Figma: 242×51 ピル型 枠1px #a9a9a9） ---*/
.contact-form__actions {
  display: flex;
  justify-content: center;
  gap: 2.4375em;
  margin-top: 4em;
}
@media screen and (max-width: 768px) {
  .contact-form__actions {
    flex-direction: column;
    align-items: center;
    gap: 1em;
    margin-top: 3em;
  }
}

.contact-form__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16.1333333333em;
  height: 3.4em;
  border: 1px solid #a9a9a9;
  border-radius: 999px;
  background-color: #fff;
  font-size: 0.9375em;
  font-weight: 500;
  font-family: inherit;
  color: #2c2c2c;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.3s ease;
}
.contact-form__btn img {
  position: absolute;
  top: 50%;
  right: 0.8em;
  transform: translateY(-50%);
  width: 2em;
  height: 2em;
}
.contact-form__btn:hover {
  opacity: 0.7;
}

/*--- 確認画面（入力内容一覧） ---*/
.contact-confirm {
  margin-top: 5.3125em;
  border-top: 1px solid #e8e8e8;
}
@media screen and (max-width: 768px) {
  .contact-confirm {
    margin-top: 3.75em;
  }
}

.contact-confirm__row {
  display: flex;
  padding: 1.5em 0.5em;
  border-bottom: 1px solid #e8e8e8;
}
@media screen and (max-width: 768px) {
  .contact-confirm__row {
    display: block;
    padding: 1.125em 0;
  }
}

.contact-confirm__label {
  width: 15em;
  flex-shrink: 0;
  font-size: 0.9375em;
  font-weight: 500;
  line-height: 1.8;
}
@media screen and (max-width: 768px) {
  .contact-confirm__label {
    width: auto;
    margin-bottom: 0.2666666667em;
  }
}

.contact-confirm__value {
  flex: 1;
  min-width: 0;
  font-size: 0.9375em;
  line-height: 1.8;
  overflow-wrap: break-word;
}

/*--- 完了画面 ---*/
.contact__thanks {
  margin-top: 5.3125em;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .contact__thanks {
    margin-top: 3.75em;
  }
}

.contact__thanks-title {
  font-size: 1.5em;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .contact__thanks-title {
    font-size: 1.25em;
  }
}

.contact__thanks-text {
  margin-top: 2em;
  font-size: 0.9375em;
  line-height: 2;
}
@media screen and (max-width: 768px) {
  .contact__thanks-text {
    text-align: justify;
  }
}