@charset "UTF-8";
/* =========================================================
   プライムス お問い合わせ  contact.css
   対象: contact.html / contact-confirm.html /
         contact-error.html / contact-complete.html
   Figma PC=1920 / SP=375。数値忠実実装。
   ※ヘッダー/ドロワー/フッター/Contactバナー は index.html
     からコピーし style.css のクラスをそのまま使用。
   ========================================================= */

/* ---------- ページ共通ヒーロー (mv 1920x430) ---------- */
/* index.html の .mv(1080px) とは別物なので独自クラス c-mv */
.c-mv{
  position:relative;
  width:100%;
  height:430px;
  overflow:hidden;
  background:#333333;
  display:flex;
  align-items:center;
  justify-content:center;
}
.c-mv::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  /* #333 ベースに写真を重ね、暗めに沈める(Figma mv 再現) */
  background:linear-gradient(rgba(51,51,51,.45),rgba(51,51,51,.45)),
             url(../img/contact/e7918920.png) center/cover no-repeat;
}
.c-mv__copy{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:30px;
}
.c-mv__en{
  font:500 64px/64px var(--f-en);
  color:#fff;
  margin-top:-9px;margin-bottom:-10px;   /* Poppins 64/lh64 trim */
}
.c-mv__jp{
  font:500 20px/24px var(--f-jp);
  color:#fff;
  margin-top:-6px;margin-bottom:-6px;     /* Noto 20/lh24 trim */
}

/* ---------- ページ本文ラッパ ---------- */
.c-sec{
  position:relative;
  background:#fff;
  padding:100px 0 150px;
  overflow:hidden;
}
/* 背景の薄いテクスチャ(blur) … Figma db24381d を再現できないため
   既存の business-texture を流用し雰囲気を合わせる */
.c-sec__tex{
  position:absolute;left:50%;top:-88px;
  width:1920px;height:1920px;margin-left:-960px;
  z-index:0;
  background:url(../img/top/business-texture.png) center/cover no-repeat;
  filter:blur(30px);opacity:.35;pointer-events:none;
}
.c-sec__inner{
  position:relative;z-index:1;
  border-top:1px solid #fff;     /* Figma Frame6 上1px白線 */
  display:flex;flex-direction:column;align-items:center;
}

/* 導入文 (Noto14 #333 center) */
.c-lead{
  font:500 14px/28px var(--f-jp);
  color:#333;
  text-align:center;
  margin-top:-7px;margin-bottom:-11px;    /* tt-jp14 */
}

/* ====================================================
   フォーム本体  (form bg #f0f6ff, pad100, gap50)
   ==================================================== */
/* form要素 = 白地の縦並びラッパ(青box + privacy + button を内包) */
.c-formwrap{
  width:100%;
  margin-top:89px;                /* lead→form gap100 - 上leading分 */
  display:flex;flex-direction:column;align-items:center;
}
/* 青いフォームbox (フィールドのみ) */
.c-form{
  width:100%;
  background:#f0f6ff;
  padding:100px 0;
  display:flex;flex-direction:column;align-items:center;
  gap:50px;
}
.c-field{
  width:1000px;
  display:flex;flex-direction:column;
  gap:10px;
}

/* ラベル行: ラベル + 必須バッジ */
.c-label{
  display:flex;align-items:center;gap:10px;
  height:30px;
}
.c-label__txt{
  font:500 16px/32px var(--f-jp);
  color:#333;
  margin-top:-8px;margin-bottom:-8px;     /* 16/lh32 trim */
}
.c-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:48px;height:30px;padding:10px;
  border-radius:10px;
  background:#5689d5;
  font:500 14px/28px var(--f-jp);
  color:#fff;
  white-space:nowrap;
}
.c-badge--opt{background:#ff6e05}      /* Figma橙バッジ(法人名/郵便番号/ご住所等) */

/* 入力欄 (白box r10 padding20) */
.c-input,
.c-textarea,
.c-select{
  width:100%;
  border:1px solid transparent;
  border-radius:10px;
  background:#fff;
  font:500 16px/32px var(--f-jp);
  color:#333;
  padding:10px 20px;             /* 52 = 32 + 上下10 */
  -webkit-appearance:none;appearance:none;
}
.c-input{height:52px}
.c-input::placeholder,
.c-textarea::placeholder{color:#e5e5e5}
.c-input:focus,
.c-textarea:focus,
.c-select:focus{outline:none;border-color:#5689d5}

.c-textarea{
  height:300px;resize:vertical;
  line-height:32px;
}

/* 電話番号は 500px 幅 */
.c-field--tel .c-input{width:500px}

/* 補足テキスト (Noto12 #999) */
.c-help{
  font:500 12px/24px var(--f-jp);
  color:#999;
  margin-top:-6px;margin-bottom:-6px;
}

/* ラジオ (個人/法人) */
.c-radios{
  display:flex;gap:20px;align-items:center;
  height:52px;
}
.c-radio{
  display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;
  font:400 16px/24px var(--f-jp);
  color:#333;
}
.c-radio input{position:absolute;opacity:0;width:0;height:0}
.c-radio__mark{
  width:16px;height:16px;border-radius:50%;
  border:1px solid #d5d5d5;background:#fff;
  position:relative;flex-shrink:0;
  transition:border-color .2s;
}
.c-radio__mark::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:#5689d5;transform:scale(0);transition:transform .2s;
}
.c-radio input:checked + .c-radio__mark::after{transform:scale(1)}
.c-radio input:checked + .c-radio__mark{border-color:#5689d5}
.c-radio input:focus-visible + .c-radio__mark{outline:2px solid #5689d5;outline-offset:2px}

/* 郵便番号: 入力(110) + 住所自動入力ボタン(136) */
.c-zip{display:flex;gap:20px;align-items:center}
.c-zip .c-input{width:110px;text-align:center;padding:10px}
.c-zip__btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:10px 20px;
  border:1px solid #999;border-radius:10px;background:#fff;
  font:500 16px/32px var(--f-jp);color:#999;
  white-space:nowrap;cursor:pointer;
  transition:border-color .3s,color .3s;
}
.c-zip__btn:hover{border-color:#5689d5;color:#5689d5}
.c-zip__btn--err{border-color:#5689d5;color:#5689d5}  /* エラー画面: 青枠 */

/* セレクト(プルダウン) … arrow を疑似要素で */
.c-select-wrap{position:relative;width:100%}
.c-select{
  border:1px solid #e5e5e5;
  padding-right:48px;cursor:pointer;
  height:56px;
}
.c-select-wrap::after{
  content:"";position:absolute;right:20px;top:50%;
  width:0;height:0;margin-top:-3px;
  border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:9px solid #5689d5;
  pointer-events:none;
}

/* プライバシー同意チェック行
   ※Figma構造: form(青box)の外・白地に配置。form との間は gap100 */
.c-agree{
  display:flex;align-items:center;gap:10px;
  margin-top:100px;               /* Figma Frame6 gap100 (form→privacy) */
}
.c-agree__box{
  width:16px;height:16px;flex-shrink:0;
  border:1px solid #d5d5d5;background:#f5f5f5;border-radius:0;
  position:relative;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.c-agree__box:checked{background:#5689d5;border-color:#5689d5}
.c-agree__box:checked::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.c-agree__txt{
  font:500 16px/24px var(--f-jp);color:#333;
}
.c-agree__txt a{color:#5689d5;text-decoration:underline}

/* 送信/次へ ボタン群 (privacy→button は Figma 約100 + leading補正) */
.c-actions{
  display:flex;gap:10px;justify-content:center;
  margin-top:100px;               /* Figma: privacy(y2534+16)→btn(y2650) ≒100 */
}
/* more-btn は style.css のものを流用。確認画面の「修正する」は
   矢印が左(180度回転)・テキスト右 */
.more-btn--rev{flex-direction:row}
.more-btn--rev .more-btn__arw{order:-1;transform:rotate(180deg)}
.more-btn--rev:hover .more-btn__arw{transform:rotate(180deg) translateX(3px)}

/* ====================================================
   確認画面 専用 (入力欄が値表示・白/枠なし)
   ==================================================== */
.c-form--confirm .c-input,
.c-form--confirm .c-textarea{
  background:transparent;
  color:#333;
  border:none;
  padding:10px 20px;
}
.c-confirm-val{
  width:100%;
  font:500 16px/32px var(--f-jp);color:#333;
  padding:10px 20px;
  white-space:pre-wrap;word-break:break-word;
}
.c-confirm-val--area{min-height:180px}

/* ====================================================
   エラー画面 専用 (補足を青エラー文に)
   ==================================================== */
.c-err{
  font:500 12px/24px var(--f-jp);
  color:#5689d5;
  margin-top:-6px;margin-bottom:-6px;
}

/* ====================================================
   完了画面 専用 (中央メッセージ)
   ==================================================== */
.c-sec--complete{padding:100px 0 150px}
.c-complete{
  display:flex;flex-direction:column;align-items:center;
  gap:50px;text-align:center;
  width:744px;max-width:100%;
}
.c-complete__title{
  font:500 24px/48px var(--f-jp);color:#333;
  margin-top:-12px;margin-bottom:-12px;
}
.c-complete__lead{
  font:500 14px/28px var(--f-jp);color:#333;
  margin-top:-7px;margin-bottom:-7px;
}
.c-complete__note{
  font:400 12px/24px var(--f-jp);color:rgba(44,67,142,.30);
  margin-top:-6px;margin-bottom:-6px;
}

/* =========================================================
   @media SP (max-width:768px)  ※375専用フレーム準拠
   ========================================================= */
@media (max-width:768px){
  /* ---- ヒーロー (mv___sp 375x280) ---- */
  .c-mv{height:280px}
  .c-mv__copy{gap:16px}
  .c-mv__en{font-size:36px;line-height:36px;margin-top:-5px;margin-bottom:-6px}
  .c-mv__jp{font-size:14px;line-height:16.8px;margin-top:-3px;margin-bottom:-4px}

  /* ---- 本文 ---- */
  .c-sec{padding:80px 0 100px}
  .c-sec__inner{padding:0 10px}
  .c-lead{padding:0 6px}

  /* ---- フォーム (pad50, gap30, 内側335) ----
     Figma: 青formは full-bleed 375px(親355boxの外へ)、fieldは20px inset */
  .c-formwrap{margin-top:69px}
  .c-form{
    width:calc(100% + 20px);margin-left:-10px;margin-right:-10px;  /* inner padding10を打ち消し375幅へ */
    padding:50px 20px;gap:30px;
  }
  .c-field{width:100%}
  .c-field--tel .c-input{width:100%}

  /* 電話 input は SP では全幅 */
  .c-radios{height:auto}

  /* 郵便番号 SP: ボタン小型 */
  .c-zip{gap:12px}
  .c-zip__btn{height:33px;padding:6px 20px;font-size:12px;line-height:24px}

  /* プライバシー同意は2行 */
  .c-agree{align-items:flex-start;margin-top:30px}
  .c-agree__box{margin-top:4px}
  .c-agree__txt{line-height:24px}

  /* 送信ボタン群は縦積み (SP confirm: 修正する→次/送信) */
  .c-actions{flex-direction:column;align-items:center;gap:10px;margin-top:46px}

  /* ---- 完了 ---- */
  .c-sec--complete{padding:80px 0 100px}
  .c-complete{width:auto;gap:50px;padding:0 27px}
  .c-complete__title{font-size:20px;line-height:40px;margin-top:-10px;margin-bottom:-10px}
}

/* フォーム送信用（button の more-btn・エラー要約） */
button.more-btn{cursor:pointer;appearance:none;-webkit-appearance:none}
.c-err-summary{display:flex;flex-direction:column;gap:12px}
.c-err-summary .c-err{font-size:14px;line-height:28px;margin:0}
.c-agree + .c-err{margin-top:12px;text-align:center}