/* =============================================
   contact.html / thanks.html 専用スタイル
   （styles.css の変数・基本スタイルを使用）
============================================= */

/* ---------- Contact page hero ---------- */
.contact-page-hero{
  position:relative;
  padding:80px 0 60px;
  background-color:#fff;
  background-image:radial-gradient(circle at 1px 1px, rgba(16,17,20,.14) 1px, transparent 0);
  background-size:28px 28px;
  overflow:hidden;
}
.contact-page-hero::before{
  content:""; position:absolute;
  top:-100px; left:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(91,92,246,.20), transparent 60%);
  pointer-events:none; z-index:0;
}
.contact-page-hero::after{
  content:""; position:absolute;
  bottom:-100px; right:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(96,165,250,.24), transparent 60%);
  pointer-events:none; z-index:0;
}
.contact-page-hero .container{ position:relative; z-index:2; text-align:center;}
.contact-page-hero .eyebrow{
  display:inline-block;
  font-size:12px; letter-spacing:.32em; font-weight:800;
  color:var(--primary);
  margin-bottom:16px;
}
.contact-page-hero h1{
  font-size:44px; font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.4;
  margin-bottom:20px;
}
.contact-page-hero h1 .grad{
  background:var(--gradient-ai);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.contact-page-hero .lead{
  font-size:15px;
  color:var(--muted);
  line-height:1.95;
  letter-spacing:.08em;
  max-width:620px;
  margin:0 auto;
}

/* ---------- Contact form section ---------- */
.contact-section{
  padding:80px 0 120px;
  background:#fff;
}
.contact-card{
  max-width:840px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:56px 56px 48px;
  box-shadow:var(--shadow);
}
.contact-card-head{ text-align:center; margin-bottom:40px;}
.contact-card-head .eyebrow{
  display:inline-block;
  font-size:11px; letter-spacing:.32em; font-weight:800;
  color:var(--primary);
  margin-bottom:14px;
}
.contact-card-head h2{
  font-size:28px; font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.5;
  margin-bottom:16px;
}
.contact-card-head .contact-lead{
  font-size:14px;
  color:var(--muted);
  line-height:1.95;
}
.contact-form-wrap{
  background:var(--bg-soft);
  border-radius:14px;
  padding:32px;
}
.contact-notes{
  margin-top:28px;
  font-size:12px;
  color:var(--muted);
  line-height:1.95;
  text-align:center;
}
.contact-notes a{
  color:var(--primary);
  text-decoration:underline;
}

/* HubSpot form fields (basic styling) */
.hs-form-frame input[type="text"],
.hs-form-frame input[type="email"],
.hs-form-frame input[type="tel"],
.hs-form-frame textarea,
.hs-form-frame select{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:8px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
}

/* ---------- Thanks page ---------- */
.thanks-section{
  position:relative;
  padding:120px 0 100px;
  min-height:calc(100vh - var(--header-h));
  display:flex; align-items:center;
  background-color:#fff;
  background-image:radial-gradient(circle at 1px 1px, rgba(16,17,20,.14) 1px, transparent 0);
  background-size:28px 28px;
  overflow:hidden;
}
.thanks-section::before{
  content:""; position:absolute;
  top:-100px; left:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(91,92,246,.20), transparent 60%);
  pointer-events:none; z-index:0;
}
.thanks-section::after{
  content:""; position:absolute;
  bottom:-100px; right:-100px;
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(96,165,250,.24), transparent 60%);
  pointer-events:none; z-index:0;
}
.thanks-section .container{ position:relative; z-index:2;}
.thanks-card{
  max-width:680px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:64px 56px;
  box-shadow:var(--shadow-md);
  text-align:center;
}
.thanks-card .thanks-icon{
  width:80px; height:80px;
  margin:0 auto 24px;
  background:var(--gradient-ai);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 16px 32px rgba(91,92,246,.30);
}
.thanks-card .thanks-icon svg{ width:36px; height:36px;}
.thanks-card .eyebrow{
  display:inline-block;
  font-size:11px; letter-spacing:.32em; font-weight:800;
  color:var(--primary);
  margin-bottom:14px;
}
.thanks-card h1{
  font-size:30px; font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  line-height:1.5;
  margin-bottom:20px;
}
.thanks-card .thanks-lead{
  font-size:15px;
  color:var(--muted);
  line-height:1.95;
  letter-spacing:.06em;
  margin-bottom:40px;
}
.thanks-card .thanks-cta{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 18px 14px 32px;
  background:var(--gradient-ai);
  color:#fff;
  font-size:15px; font-weight:800;
  border-radius:999px;
  box-shadow:0 16px 40px rgba(91,92,246,.40);
  transition:.2s;
}
.thanks-card .thanks-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 50px rgba(91,92,246,.50);
}
.thanks-card .thanks-cta-arrow{
  width:32px; height:32px;
  border-radius:50%;
  background:#fff;
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
}
.thanks-card .thanks-cta-arrow svg{ width:14px; height:14px;}

/* =============================================
   選択ハブ（お申し込み / お問い合わせ）
============================================= */
.choice-promo{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap;
  margin:0 auto 36px;
  font-size:14px; color:var(--ink-3);
}
.choice-promo .promo-text b{ color:var(--primary); font-weight:800;}

.choice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:920px;
  margin:0 auto;
}
.choice-card{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:44px 40px 40px;
  background:linear-gradient(#fff,#fff) padding-box, var(--gradient-ai) border-box;
  border:1.5px solid transparent;
  border-radius:18px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.choice-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md);}
.choice-cap{
  font-size:11px; letter-spacing:.28em; font-weight:800;
  color:var(--primary);
  margin-bottom:22px;
}
.choice-ic{
  width:60px; height:60px;
  border-radius:16px;
  background:var(--gradient-soft);
  display:flex; align-items:center; justify-content:center;
  color:var(--primary);
  margin-bottom:24px;
}
.choice-ic svg{ width:30px; height:30px;}
.choice-card h2{
  font-size:24px; font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:14px;
}
.choice-card p{
  font-size:14px; color:var(--muted);
  line-height:1.95;
  margin-bottom:30px;
}
.choice-go{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:12px;
  font-size:14px; font-weight:800;
  color:var(--primary);
}
.choice-arrow{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--gradient-ai);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease;
}
.choice-arrow svg{ width:14px; height:14px;}
.choice-card:hover .choice-arrow{ transform:translateX(4px);}

/* お申し込み = 紫グラデ塗りで強調 */
.choice-card.is-primary{
  background:var(--gradient-ai);
  border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.choice-card.is-primary .choice-cap{ color:rgba(255,255,255,.85);}
.choice-card.is-primary .choice-ic{ background:rgba(255,255,255,.16); color:#fff;}
.choice-card.is-primary h2{ color:#fff;}
.choice-card.is-primary p{ color:rgba(255,255,255,.9);}
.choice-card.is-primary .choice-go{ color:#fff;}
.choice-card.is-primary .choice-arrow{ background:#fff; color:var(--primary);}
.choice-card.is-primary:hover{ box-shadow:0 26px 60px rgba(91,92,246,.36);}

/* =============================================
   自作フォーム（apply.html / inquiry.html）
============================================= */
.contact-form-wrap{ background:#f5f4ff; }   /* 薄ラベンダー（LPトーン） */

.lp-form .form-field{ margin-bottom:24px;}
.lp-form .form-field:last-of-type{ margin-bottom:0;}
.form-label{
  display:flex; align-items:center; gap:10px;
  font-size:14px; font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}
.req-badge,
.opt-badge{
  display:inline-flex; align-items:center;
  font-size:11px; font-weight:700;
  letter-spacing:.04em;
  color:#fff;
  padding:3px 11px;
  border-radius:999px;
  line-height:1.5;
}
.req-badge{ background:var(--primary);}
.opt-badge{ background:var(--muted-2);}

.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="tel"],
.lp-form select,
.lp-form textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--line-2);
  border-radius:10px;
  background:#fff;
  font-family:inherit;
  font-size:15px;
  color:var(--ink);
  line-height:1.7;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.lp-form input::placeholder,
.lp-form textarea::placeholder{ color:var(--muted-2);}
.lp-form input:focus,
.lp-form select:focus,
.lp-form textarea:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(91,92,246,.14);
}
.lp-form textarea{ min-height:160px; resize:vertical;}

/* select 矢印 */
.lp-form select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23666b7a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px 8px;
  padding-right:42px;
  cursor:pointer;
}

/* 同意チェック */
.form-agree{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:32px 0 4px;
  text-align:center;
}
.form-agree label{
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; color:var(--ink-3);
  cursor:pointer;
}
.form-agree input[type="checkbox"]{
  width:18px; height:18px;
  accent-color:var(--primary);
  flex:none;
}
.form-agree a{ color:var(--primary); text-decoration:underline;}

.form-agree-note{
  font-size:12px; color:var(--muted);
  margin-top:2px;
}

/* スパム対策のハニーポット（画面外に隠す） */
.hp-field{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

/* 送信ボタン */
.form-actions{ text-align:center; margin-top:28px;}
.form-submit{
  min-width:280px;
  padding:18px 40px;
  font-size:16px;
}
.form-submit:disabled,
.form-submit.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  box-shadow:none;
}
.form-submit:disabled:hover,
.form-submit.is-disabled:hover{
  transform:none;
  box-shadow:none;
}

/* =============================================
   確認画面（form.php）
============================================= */
.confirm-list{
  border-top:1px solid var(--line);
  margin-bottom:8px;
}
.confirm-row{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:24px;
  padding:18px 6px;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.confirm-row dt{
  font-size:14px; font-weight:700;
  color:var(--ink-3);
  line-height:1.7;
}
.confirm-row dd{
  font-size:15px; color:var(--ink);
  line-height:1.8;
  word-break:break-word;
}
.confirm-empty{ color:var(--muted-2);}

.confirm-actions{
  display:flex; justify-content:center; align-items:center;
  gap:16px; flex-wrap:wrap;
  margin-top:36px;
}
.confirm-back{
  display:inline-flex; align-items:center; justify-content:center;
  padding:18px 36px;
  background:#fff; color:var(--primary);
  border:1.5px solid var(--primary);
  border-radius:var(--radius-pill);
  font-size:15px; font-weight:700;
  letter-spacing:.03em;
  transition:.2s ease;
}
.confirm-back:hover{ background:var(--bg-lavender); transform:translateY(-2px);}
.confirm-form .btn{ min-width:220px;}

/* エラー表示 */
.form-error{
  background:#fdf3f3;
  border:1px solid #efc9c9;
  border-radius:14px;
  padding:24px 28px;
}
.form-error-title{
  font-size:15px; font-weight:800;
  color:#c0392b;
  margin-bottom:10px;
}
.form-error ul{ margin:0; padding-left:1.3em;}
.form-error li{
  font-size:14px; color:#a93226;
  line-height:1.95;
}

@media (max-width: 900px){
  .contact-page-hero{ padding:60px 0 40px;}
  .contact-page-hero h1{ font-size:30px;}
  .contact-section{ padding:48px 0 80px;}
  .contact-card{ padding:32px 24px;}
  .contact-form-wrap{ padding:20px;}
  .thanks-section{ padding:60px 0;}
  .thanks-card{ padding:40px 24px;}
  .thanks-card h1{ font-size:22px;}

  .choice-grid{ grid-template-columns:1fr; gap:18px; max-width:480px;}
  .choice-card{ padding:32px 26px 28px;}
  .choice-card h2{ font-size:21px;}
  .choice-promo{ margin-bottom:28px;}
  .form-submit{ min-width:0; width:100%;}

  .confirm-row{ grid-template-columns:1fr; gap:5px; padding:16px 4px;}
  .confirm-row dt{ font-size:12px; color:var(--primary); letter-spacing:.02em;}
  .confirm-actions{ flex-direction:column-reverse; gap:12px;}
  .confirm-back,
  .confirm-form .btn{ width:100%; min-width:0;}
  .confirm-form{ width:100%;}
}