@charset "UTF-8";
/* =========================================================
   LOGI NEXA デモ申し込みページ
   css/style.css のデザイントークン（濃紺・青・白／Meiryo優先）を継承し、
   入力に集中できるよう余白を広くとったレイアウト。
   ========================================================= */

.page-inquiry{background:var(--bg-light);}
.page-inquiry .site-header{position:static;}
.br-pc{display:inline;}

/* ---------- ヘッダーの戻りリンク ---------- */
.site-header__inner > .back-link--header{margin-left:auto;}
.back-link{
  display:inline-flex;align-items:center;gap:.7em;
  font-size:.86rem;font-weight:700;text-decoration:none;line-height:1.5;
  transition:color .2s,border-color .2s;
}
.back-link::before{
  content:"";flex:none;width:.5em;height:.5em;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.back-link--header{color:#d5e4f5;padding:6px 0;border-bottom:1px solid transparent;}
.back-link--header:hover{color:#fff;border-bottom-color:var(--blue-400);}

/* ---------- 見出し（濃紺） ---------- */
.inq-hero{
  background:
    radial-gradient(900px 520px at 78% 10%,rgba(30,100,195,.34),transparent 62%),
    linear-gradient(168deg,var(--navy-900) 0%,var(--navy-950) 58%,#070d22 100%);
  /* ページを開いたときにフォームが視界に入るよう、高さを抑えている */
  padding:clamp(32px,3.4vw,52px) 0 clamp(28px,3vw,44px);
}
.inq-hero__inner{max-width:780px;}
.inq-hero__eyebrow{
  color:var(--cyan);font-size:clamp(11px,.4vw + 9.8px,13px);font-weight:700;
  letter-spacing:.18em;margin-bottom:.7em;
}
.inq-hero__title{
  color:#fff;font-size:clamp(24px,1.7vw + 16px,37px);line-height:1.32;
  letter-spacing:.01em;margin-bottom:.5em;text-wrap:balance;
}
/* 「デモのお申し込み」が語中で折り返さないようにする */
.inq-hero__title .keep{display:inline-block;}
.inq-hero__lead{
  color:#dbe7f7;font-size:var(--fs-lead);line-height:1.85;margin-bottom:.85em;
}
.inq-hero__note{
  display:inline-block;margin:0;padding:.5em 1.2em;
  border-left:3px solid var(--blue-400);background:rgba(255,255,255,.06);
  color:#bdd2ec;font-size:.88rem;line-height:1.7;
}

/* ---------- フォーム面（白） ---------- */
.inq-form{padding:clamp(22px,2.4vw,36px) 0 clamp(48px,6vw,96px);}
.inq-form__card{
  max-width:820px;margin-inline:auto;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:clamp(18px,3vw,44px) clamp(14px,2.6vw,40px);
}
.inq-form__help{
  max-width:820px;margin:1.4em auto 0;
  font-size:.82rem;color:var(--muted);text-align:center;
}

/* フォーム描画時は「設定待ち」の装飾を外し、フォームだけを見せる */
.form-embed{padding:0;border:0;background:none;}

/* Googleフォーム本体。内側の見た目はGoogle側の設定に依存する。 */
.form-frame{
  display:block;width:100%;border:0;
  height:var(--form-height,3200px);
}

/* ---------- 設定待ち／エラーの案内 ---------- */
.form-notice{
  border:1px dashed #b9cde3;border-radius:8px;
  background:linear-gradient(160deg,#f5f9fd,#eaf1f9);
  padding:clamp(22px,3vw,40px);text-align:center;
}
.form-notice[data-state="error"]{border-color:#e0a9a4;background:linear-gradient(160deg,#fdf6f5,#f8eceb);}
.form-notice__title{
  font-size:clamp(17px,.9vw + 14px,21px);font-weight:700;color:var(--ink);
  margin-bottom:.9em;
}
.form-notice p{font-size:.92rem;line-height:1.95;color:var(--body);}
.form-notice code{
  background:#e3ecf6;border-radius:3px;padding:.1em .45em;
  font-size:.92em;font-family:Consolas,"Courier New",monospace;
}
.form-notice__contact{
  display:inline-flex;flex-direction:column;gap:.5em;
  margin:.8em 0 .2em;text-align:left;
}
.form-notice__contact li{display:flex;align-items:baseline;gap:1em;}
.form-notice__contact span{
  flex:none;width:3em;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:#fff;background:var(--navy-800);border-radius:3px;padding:.2em .6em;text-align:center;
}
.form-notice__contact a{color:var(--blue-600);font-weight:700;text-decoration:none;}
.form-notice__contact a:hover{text-decoration:underline;}
.form-notice__note{
  margin:1.2em 0 0;font-size:.82rem;line-height:1.8;color:var(--muted);text-align:center;
}

/* ---------- 下部の戻りリンク ---------- */
.back-link-wrap{max-width:820px;margin:clamp(28px,4vw,48px) auto 0;text-align:center;}
.back-link-wrap .back-link{
  color:var(--blue-600);border:1px solid #bcd2e8;border-radius:999px;
  padding:.9em 2em;background:#fff;
}
.back-link-wrap .back-link:hover{background:#eaf2fb;border-color:var(--blue-500);}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  .site-header__tag{display:none;}
}
@media (max-width:680px){
  .br-pc{display:none;}
  .site-header__inner{min-height:56px;gap:12px;}
  .back-link--header{font-size:.74rem;gap:.5em;text-align:right;}
  .inq-hero__note{display:block;}
  /* Googleフォームは横幅が狭いと内部に横スクロールが出るため、
     スマートフォンではフォーム面の左右余白を詰めて幅を確保する */
  .page-inquiry .inq-form .wrap{width:min(100% - 16px,var(--wrap));}
  .inq-form__card{padding:12px 6px;border-radius:8px;}
  .form-notice{padding:20px 14px;}
  .form-notice__contact{display:flex;}
  .form-frame{height:var(--form-height,4000px);}
}