/* ===========================================================================
   cta-pages.css — /contact・/meeting とその thanks ページの共通スタイル
   ---------------------------------------------------------------------------
   構成は ai-search.techsuite.co.jp の contact.php / meeting.php を踏襲し、
   配色・タイポグラフィは本LP（index.html）のトークンに合わせています。
   ルート直下に置いているのは、vercel.json の /assets/* が immutable キャッシュ
   になるため（CSSは must-revalidate 側に載せたい）。
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#fff;--bg-3:#f2f6fb;--border:#e1e8f0;--border-strong:#b4c2d3;
  --fg:#0f2340;--fg-muted:#495a72;--fg-dim:#7f8fa3;
  --accent:#12559f;--accent-2:#0d4380;--accent-soft:#e8f1fa;--ink:#0d2340;--sky:#d7e9f8;
  --cv-orange:#ef7322;--cv-orange-hi:#f5912f;
  --font-jp:'Yu Gothic Medium','Yu Gothic','YuGothic','Hiragino Kaku Gothic ProN','Noto Sans JP',system-ui,sans-serif;
  --font-en:'Inter',system-ui,sans-serif;
  --wrap:1180px;--gutter:32px;--radius:4px;
  --ease:cubic-bezier(.4,0,.2,1);
}

html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-jp);
  font-size:15px;line-height:1.85;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh}
img,svg{max-width:100%;height:auto}
a{color:inherit}
h1,h2{letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;
  padding:14px 26px;border-radius:var(--radius);font-family:var(--font-jp);font-weight:700;
  font-size:14px;line-height:1.55;text-align:center;text-decoration:none;cursor:pointer;
  border:1px solid transparent;white-space:normal;
  transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.btn-accent{background:var(--cv-orange);color:#fff;box-shadow:0 6px 18px rgba(239,115,34,.32)}
.btn-accent:hover{background:var(--cv-orange-hi);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-sm{min-height:40px;padding:10px 18px;font-size:13px}

/* ---------- header ---------- */
.site-header{flex:none;position:sticky;top:0;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--border)}
.header-row{max-width:var(--wrap);margin:0 auto;padding:13px var(--gutter);
  display:flex;align-items:center;gap:20px}
/* padding + 相殺 margin でタップ領域を広げる（見た目の高さは変えない） */
.brand-logo{display:inline-flex;align-items:center;text-decoration:none;flex:none;
  padding:13px 2px;margin:-13px -2px}
.brand-logo img{display:block;width:auto;height:26px}
.header-cta{margin-left:auto;display:flex;align-items:center;gap:16px}
.ghost-link{font-size:13px;font-weight:700;color:var(--fg-muted);text-decoration:none;
  padding:12px 2px;transition:color .2s var(--ease)}
.ghost-link:hover{color:var(--accent)}

/* ---------- page shell ---------- */
main{flex:1 0 auto}
.cta-page{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5.5vw,72px) var(--gutter)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-en);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted);font-weight:500}
.eyebrow .line{width:40px;height:1px;background:var(--border-strong)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cta-page h1{font-size:clamp(26px,3.6vw,42px);line-height:1.38;font-weight:700;margin:20px 0 0}
.cta-page .lead{margin:18px 0 0;max-width:62ch;color:var(--fg-muted);line-height:1.95;font-size:15px}
.crumb{margin-top:24px;font-size:12px;color:var(--fg-dim)}
.crumb a{color:var(--fg-muted);text-decoration:none;display:inline-block;padding:5px 0}
.crumb a:hover{color:var(--accent);text-decoration:underline}

/* ---------- detail + embed grid ---------- */
.cta-embed-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,3.6vw,52px);align-items:start;margin-top:clamp(28px,3.6vw,44px)}
.cta-detail{min-width:0}
.cta-detail h2{font-size:20px;line-height:1.55;font-weight:700;margin:0 0 14px}
.cta-detail ul{list-style:none;padding:0;margin:0}
.cta-detail li{position:relative;padding-left:26px;margin-bottom:12px;line-height:1.85;font-size:14px}
.cta-detail li::before{content:"";position:absolute;left:6px;top:.66em;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
.cta-detail .meta{margin-top:20px;padding-top:18px;border-top:1px dashed var(--border);
  font-size:12.5px;color:var(--fg-dim);line-height:1.9}
.notice{margin-top:24px;padding:18px 20px;border-left:3px solid var(--border-strong);
  background:var(--bg-3);font-size:12.5px;line-height:1.95;color:var(--fg-muted);
  border-radius:0 var(--radius) var(--radius) 0}

.cta-embed-box{min-width:0;background:#fff;border:1px solid var(--border);border-radius:8px;
  padding:clamp(20px,2.6vw,30px);box-shadow:0 24px 48px -30px rgba(15,35,64,.22)}
.cta-embed-box > .embed-head{margin:-4px 0 20px}
.cta-embed-box .embed-head .t{font-size:15px;font-weight:700;line-height:1.6}
.cta-embed-box .embed-head .s{margin-top:6px;font-size:12.5px;line-height:1.85;color:var(--fg-muted)}

/* HubSpot フォームをカラム幅に収める */
.hs-slot{min-height:60px}
/* HubSpotがフォームをiframeで描画するケース。
   高さはJS側で中身に合わせて設定する（自動リサイズが効かないため。index側のコメント参照）。 */
.hs-slot iframe.hs-form-iframe{width:100%!important;max-width:100%!important;
  display:block;border:0;min-height:150px}
.hs-slot form,.hs-slot .hs-form{max-width:100%}
.hs-slot .hs-form-field{margin-bottom:16px}
.hs-slot label{display:block;font-size:13px;font-weight:700;color:var(--fg);margin-bottom:7px;line-height:1.6}
.hs-slot .hs-field-desc{font-size:12px;color:var(--fg-dim);margin-bottom:6px;font-weight:400}
.hs-slot input[type=text],.hs-slot input[type=email],.hs-slot input[type=tel],
.hs-slot input[type=number],.hs-slot select,.hs-slot textarea{
  width:100%!important;max-width:100%!important;padding:12px 13px;font-family:var(--font-jp);
  font-size:15px;color:var(--fg);background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--radius);line-height:1.6;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.hs-slot textarea{min-height:120px;resize:vertical}
.hs-slot input:focus,.hs-slot select:focus,.hs-slot textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hs-slot .hs-error-msg,.hs-slot .hs-error-msgs{color:#b3261e;font-size:12px;line-height:1.7;
  margin:6px 0 0;padding:0;list-style:none}
.hs-slot .hs-button,.hs-slot input[type=submit]{
  display:block;width:100%;min-height:52px;padding:15px 22px;margin-top:6px;border:0;cursor:pointer;
  font-family:var(--font-jp);font-size:15px;font-weight:700;line-height:1.55;color:#fff;
  background:var(--cv-orange);border-radius:var(--radius);box-shadow:0 6px 18px rgba(239,115,34,.32);
  transition:background .2s var(--ease),transform .15s var(--ease)}
.hs-slot .hs-button:hover,.hs-slot input[type=submit]:hover{
  background:var(--cv-orange-hi);transform:translateY(-1px)}
.hs-slot .legal-consent-container{font-size:12px;line-height:1.85;color:var(--fg-muted)}
.hs-slot .inputs-list{margin:0;padding:0;list-style:none}
.hs-slot .hs-form-booleancheckbox label,.hs-slot .hs-form-checkbox label,
.hs-slot .hs-form-radio label{display:flex;gap:9px;align-items:flex-start;font-weight:400;font-size:13px}
.hs-slot input[type=checkbox],.hs-slot input[type=radio]{width:18px;height:18px;margin:.3em 0 0;flex:none}

/* HubSpot Meetings（カレンダー）— iframe を親幅に収める */
.meetings-iframe-container{min-height:660px}
.meetings-iframe-container iframe{width:100%!important;max-width:100%!important;border:0;min-height:660px}

/* 埋め込みが読めなかったときの代替導線 */
.embed-fallback{border:1px dashed var(--border-strong);border-radius:var(--radius);padding:22px;
  background:var(--bg-3)}
.embed-fallback .t{font-size:14px;font-weight:700;line-height:1.7}
.embed-fallback p{margin:10px 0 0;font-size:13px;line-height:1.9;color:var(--fg-muted)}
.embed-fallback .btn{margin-top:16px;width:100%}

/* ---------- thanks ---------- */
.thanks-wrap{max-width:760px;margin:0 auto;padding:clamp(52px,6vw,84px) var(--gutter);text-align:center}
.thanks-wrap .mark{width:62px;height:62px;margin:0 auto 26px;border-radius:50%;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.thanks-wrap h1{font-size:clamp(23px,3.4vw,36px);line-height:1.45;font-weight:700;margin:14px 0 0}
.thanks-wrap .lead{margin:24px auto 0;max-width:60ch;text-align:left;color:var(--fg-muted);
  line-height:2;font-size:14.5px}
.thanks-wrap .lead p{margin:0 0 16px}
.thanks-wrap .lead p:last-child{margin-bottom:0}
.thanks-actions{margin-top:34px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- footer ---------- */
.site-footer{flex:none;background:var(--bg);border-top:1px solid var(--border);padding:40px 0 26px}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);
  display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between}
.footer-inner .cn{font-size:12.5px;color:var(--fg-muted)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-links a{font-size:12.5px;color:var(--fg-muted);text-decoration:none;padding:5px 0}
.footer-links a:hover{color:var(--accent);text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .cta-embed-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:680px){
  :root{--gutter:20px}
  body{font-size:14.5px}
  .brand-logo img{height:21px}
  .header-row{gap:12px;padding:11px var(--gutter)}
  .header-cta{gap:11px}
  .ghost-link{font-size:12px}
  .btn-sm{padding:9px 13px;font-size:11.5px}
  .btn-sm svg{display:none}
  .cta-page h1{font-size:clamp(22px,6.2vw,30px)}
  .cta-page .lead{font-size:14px}
  .cta-detail h2{font-size:18px}
  .cta-embed-box{padding:18px}
  .meetings-iframe-container,.meetings-iframe-container iframe{min-height:740px}
  .thanks-actions{flex-direction:column}
  .thanks-actions .btn{width:100%}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:400px){
  .brand-logo img{height:19px}
  .ghost-link{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}