@charset "UTF-8";
/* ==========================================================================
   お問い合わせ関連ページのスタイル
   --------------------------------------------------------------------------
   1〜5 … お問い合わせページ（contact.html ／ p-contact-）
           カンプ: node-id 1289-2491（PC 1440px・全高 2040px）
           1枚の白パネル（枠線つき）の中に「見出し → リード → LINE → 電話 → フォーム」を
           縦に積むだけの構成。帯（l-band）もページMV（c-page-mv）も使わない。
   6    … 送信完了画面（thanks.html ／ p-thanks-panel）
           カンプ: node-id 1289-3175（PC 1440px・全高 1326px）

   共通部品（c-）は common.css、支給フォームHTML（form / formRow / formInput …）は
   form.css 側を使い、ここには上記2ページ固有のものだけを書く。
   Figma ファイルキー: winjeLDXMguhfDP4yN4FVL
   ========================================================================== */

/* ==========================================================================
   1. セクション（装飾円の基準）
      カンプ: パンくず下端 142 → パネル上端 242 → パネル下端 1480 →
              フッター上端 1604
   ========================================================================== */
.p-contact {
  position: relative;
  padding: 100px 0 124px;
}

/* 装飾円（カンプの絶対y － 142px）。カンプではパネルより前面にあり乗算で重なる */
.p-contact .c-deco-circle {
  z-index: 1;
  mix-blend-mode: multiply;
}

.p-contact-c1 { left: 88px;  top: 100px;  width: 181px; height: 181px; }
.p-contact-c2 { left: 214px; top: 217px;  width: 109px; height: 109px; }
/* 右側の2つは画面右端からの距離で置く（左からのpx指定だと狭い画面で横に溢れる） */
.p-contact-c3 { left: auto; right: 97px;  top: 12px;    width: 122px; height: 122px; }
/* 下の円はパネルの高さが変わっても右下に追従するようセクション下端基準にする */
.p-contact-c4 { left: auto; right: 254px; top: auto; bottom: 80px; width: 122px; height: 122px; }

/* 1441px 以上は中央寄せパネル（1080px）基準に切り替える。
   画面端からのpx指定のままだと、画面が広いほど円がパネルから離れてしまうため。
   パネルの左端 ＝ 50% - 540px、右端 ＝ 50% + 540px を基準にした差分で置いている
   （1440pxのときは上の値とぴったり同じ位置になる）。 */
@media (min-width: 1441px) {
  .p-contact-c1 { left: calc(50% - 632px); }
  .p-contact-c2 { left: calc(50% - 506px); }
  .p-contact-c3 { right: calc(50% - 623px); }
  .p-contact-c4 { right: calc(50% - 466px); }
}

/* ==========================================================================
   2. 白パネル
      カンプ 1080×1238・地色 白90%・枠 2px 青・角丸32px・padding 64px・
      硬い影 8px 8px 0 rgba(24,61,129,.25)・中身の間隔32px
      （採用情報の募集要項パネルと同じ上書き。→ docs/design-system.md §31-5）
   ========================================================================== */
.p-contact-panel {
  position: relative;
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 8px 8px 0 rgba(24, 61, 129, 0.25);
}

.p-contact-panel > * + * { margin-top: 32px; }

/* ==========================================================================
   3. 見出し（CONTACT ／ お問い合わせ）
      カンプ: 欧文 48px グラデ文字・行送り0.9 ／ 8px ／ 和文 Zen Maru Bold 32px
   ========================================================================== */

/* 共通部品 c-page-mv-en の既定は 64px なのでこのページ用に下げる */
.p-contact-en {
  font-size: 3rem;
  line-height: 1;
}

/* 共通部品 c-page-mv-title の既定は Medium なのでカンプに合わせて Bold に */
.p-contact-title {
  font-weight: 700;
  line-height: 1.6;
  margin-right: -0.2em;
}

/* リード文（カンプ 16px Medium / 行送り1.5 / 字送り0.2em。見出しとの間隔35px） */
.p-contact-panel > .p-contact-lead { margin-top: 35px; }

.p-contact-lead {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* ==========================================================================
   4. LINE ／ 電話の案内ブロック
      カンプ: 左端に幅8pxのグラデ帯（ブロックの高さいっぱい）＋ 32px あけて中身
      グラデ帯はカンプでは画像だが、c-page-mv-head と同じCSSグラデで再現する
   ========================================================================== */
.p-contact-guide {
  position: relative;
  padding-left: 40px;
}

.p-contact-guide::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to bottom, #2460cf 0%, #5db7e9 100%);
}

.p-contact-guide-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* LINEボタン（カンプ 235×46 の画像。文字が Kosugi Maru なので
   グースケごと1枚の画像で書き出している） */
.p-contact-line-btn {
  display: inline-block;
  margin-top: 16px;
}

.p-contact-line-btn img {
  display: block;
  width: 235px;
}

/* 電話番号（カンプ Noto Bold 32px / 行送り1.3 / 字送り0.1em） */
.p-contact-tel {
  display: inline-block;
  padding: 4px 0;
}

.p-contact-tel p {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin-right: -0.1em;
}

/* ==========================================================================
   5. レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
      ※ このページのSP・タブレットのカンプは無いので、こちら側で設計した値
   ========================================================================== */
@media (max-width: 991.98px) {
  .p-contact { padding: 64px 0 88px; }

  .p-contact-panel {
    padding: 40px 24px;
    box-shadow: 4px 4px 0 rgba(24, 61, 129, 0.25);
  }

  .p-contact-en { font-size: 2.25rem; }
  .p-contact-title { font-size: 1.5rem; }

  .p-contact-c1 { left: 16px;  top: 40px;  width: 140px; height: 140px; }
  .p-contact-c2 { left: 112px; top: 130px; width: 84px;  height: 84px; }
  .p-contact-c3 { right: 24px; top: 8px;   width: 96px;  height: 96px; }
  .p-contact-c4 { right: 32px; bottom: 140px; width: 96px; height: 96px; }
}

@media (max-width: 767.98px) {
  /* 767px以下はパンくずが非表示（d-none d-md-flex）になり、その分の上余白が
     無くなるので、固定ヘッダー（48px）に潜り込まないようセクション側で確保する */
  .p-contact { padding: 80px 0 64px; }

  .p-contact-panel { padding: 32px 20px; }
  .p-contact-panel > * + * { margin-top: 24px; }
  .p-contact-panel > .p-contact-lead { margin-top: 24px; }

  .p-contact-en { font-size: 2rem; }
  .p-contact-title { font-size: 1.375rem; }

  /* 字送り 0.2em のままだと1行の文字数が減りすぎるので詰める */
  .p-contact-lead,
  .p-contact-guide-text {
    letter-spacing: 0.06em;
    margin-right: -0.06em;
  }

  .p-contact-guide { padding-left: 20px; }

  /* 画面幅に収まるように縮める（カンプは235px固定） */
  .p-contact-line-btn img { width: 100%; max-width: 235px; }

  .p-contact-tel p { font-size: 1.625rem; letter-spacing: 0.04em; margin-right: -0.04em; }

  .p-contact-c1 { left: -24px; top: 56px;  width: 110px; height: 110px; }
  .p-contact-c2 { left: 48px;  top: 128px; width: 66px;  height: 66px; }
  .p-contact-c3 { right: -16px; top: 36px; width: 76px;  height: 76px; }
  .p-contact-c4 { right: -12px; bottom: 96px; width: 76px; height: 76px; }
}

/* ==========================================================================
   6. 送信完了画面（thanks.html ／ p-thanks-panel）
      カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1289-3175（PC 1440px・全高 1326px）
      白パネル1枚に「グースケ → 見出し → 本文 → TOPに戻るボタン」を縦に積むだけ。
      パネルの見た目は上の「2. 白パネル」（p-contact-panel）と同じ。
      ※ 送信完了画面はフォーム本体が無いので form.css は読み込まず、
        common / header / footer ＋ この contact.css だけで完結する。
        レスポンシブもこのブロックの中（6-3）に持たせている。
   ========================================================================== */

/* --------------------------------------------------------------------------
   6-1. セクション（装飾円の基準）
        カンプ: パンくず下端142 → パネル上端202 → パネル下端728 → フッター上端890
   -------------------------------------------------------------------------- */
.p-thanks-sec {
  position: relative;
  padding: 60px 0 162px;
}

/* 装飾円（カンプの絶対y － 142px）。カンプではパネルより前面にあり乗算で重なる */
.p-thanks-sec .c-deco-circle {
  z-index: 1;
  mix-blend-mode: multiply;
}

.p-thanks-c1 { left: 104px; top: 82px;  width: 122px; height: 122px; }
.p-thanks-c2 { left: 17px;  top: 448px; width: 145px; height: 145px; }
/* 右側の2つは画面右端からの距離で置く（左からのpx指定だと狭い画面で横に溢れる） */
.p-thanks-c3 { left: auto; right: 107px; top: 280px; width: 181px; height: 181px; }
.p-thanks-c4 { left: auto; right: 53px;  top: 397px; width: 109px; height: 109px; }

/* 1441px 以上は中央寄せパネル（1080px）基準に切り替える。
   画面端からのpx指定のままだと、画面が広いほど円がパネルから離れてしまうため
   （1440pxのときは上の値とぴったり同じ位置になる。contact.css と同じ考え方） */
@media (min-width: 1441px) {
  .p-thanks-c1 { left: calc(50% - 616px); }
  .p-thanks-c2 { left: calc(50% - 703px); }
  .p-thanks-c3 { right: calc(50% - 613px); }
  .p-thanks-c4 { right: calc(50% - 667px); }
}

/* --------------------------------------------------------------------------
   6-2. 白パネル
        カンプ 1080×526・地色 白90%・枠 2px 青・角丸32px・padding 64px・
        硬い影 8px 8px 0 rgba(24,61,129,.25)・中身の間隔32px・中央寄せ
        （c-panel c-panel--outline への上書き。お問い合わせページと同じ値）
   -------------------------------------------------------------------------- */
.p-thanks-panel {
  position: relative;
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin-left: auto;
  margin-right: auto;
  padding: 64px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 8px 8px 0 rgba(24, 61, 129, 0.25);
  text-align: center;
}

.p-thanks-panel > * + * { margin-top: 32px; }

/* グースケ（カンプ 90×116） */
.p-thanks-mascot {
  display: block;
  width: 90px;
  margin-left: auto;
  margin-right: auto;
}

/* 見出し（カンプ Noto Bold 20px / 行送り1.6 / 字送り0.2em）
   字送りは最後の1文字の後ろにも入るので text-indent で中央寄せのズレを相殺する */
.p-thanks-title {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 本文（カンプ Noto Medium 16px / 行送り1.6 / 字送り0.2em） */
.p-thanks-text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* TOPに戻るボタン（カンプは中身なりの幅なので c-btn の min-width 236px を外す。
   高さ52px・padding 10px 48px はサイト内の他ページのボタンと同じ） */
.p-thanks-panel .c-btn {
  min-width: 0;
  min-height: 52px;
  padding: 10px 48px;
}

/* プライバシーポリシー */
.contact-policy{
  margin-top: 50px;
}
.scroll-box {
  border: 1px solid var(--c-blue01);
  padding: 20px;
  overflow-y: auto;
  height: 20em;
  font-size: 0.75rem;
}
.scroll-box p:last-of-type {
  margin-bottom: 0;
}
.privacy_tit {
  font-size: 1.2em;
}



/* --------------------------------------------------------------------------
   6-3. レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
        ※ このページのSP・タブレットのカンプは無いので、こちら側で設計した値
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .p-thanks-sec { padding: 48px 0 96px; }

  .p-thanks-panel {
    padding: 40px 24px;
    box-shadow: 4px 4px 0 rgba(24, 61, 129, 0.25);
  }

  .p-thanks-c1 { left: 16px;  top: 40px;  width: 96px;  height: 96px; }
  .p-thanks-c2 { left: -24px; top: 300px; width: 116px; height: 116px; }
  .p-thanks-c3 { right: 16px; top: 180px; width: 140px; height: 140px; }
  .p-thanks-c4 { right: -16px; top: 280px; width: 86px; height: 86px; }
}

@media (max-width: 767.98px) {
  /* 767px以下はパンくずが非表示（d-none d-md-flex）になり、その分の上余白が
     無くなるので、固定ヘッダー（48px）に潜り込まないようセクション側で確保する */
  .p-thanks-sec { padding: 80px 0 64px; }

  .p-thanks-panel { padding: 32px 20px; }
  .p-thanks-panel > * + * { margin-top: 24px; }

  .p-thanks-mascot { width: 72px; }

  .p-thanks-title { font-size: 1.125rem; letter-spacing: 0.1em; text-indent: 0.1em; }

  /* 字送り 0.2em のままだと1行の文字数が減りすぎるので詰める */
  .p-thanks-text {
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-indent: 0.06em;
  }

  /* カンプはPCで4行だが、SPは自然に折り返させる */
  .p-thanks-text br { display: none; }

  .p-thanks-panel .c-btn { width: 100%; max-width: 320px; }

  .p-thanks-c1 { left: -20px; top: 72px;  width: 76px;  height: 76px; }
  .p-thanks-c2 { left: -28px; top: 288px; width: 90px;  height: 90px; }
  .p-thanks-c3 { right: -24px; top: 188px; width: 104px; height: 104px; }
  .p-thanks-c4 { right: -20px; top: 280px; width: 64px;  height: 64px; }
}