/*
 * LP 共通スタイル (LP / 資料請求フォーム / サンクスページで共有)。
 *
 * 本文のレイアウトは Claude Design 由来のインライン style が担っているため、
 * ここには全体のリセット・フォーム要素のスタイル・キーフレームのみを置く。
 */

html,
body {
  margin: 0;
  padding: 0;
  background: #DDE9F4;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

a {
  color: #1F86D0;
  text-decoration: none;
}

a:hover {
  color: #16324F;
}

/*
 * ハンバーガーメニューは hidden 属性で開閉する。対象の <nav> はインラインで
 * display:flex を持つため、!important でないと hidden が効かない。
 */
[hidden] {
  display: none !important;
}

/* ------------------------------------------------------------------
 * SP / PC レイアウトの切り替え
 *
 * Claude Design が SP 版と PC 版を別マークアップで書き出しており、レイアウトが
 * すべてインライン style のためメディアクエリで上書きできない。そのため両方を
 * 同梱してブレークポイントで出し分ける。PC 側の id とページ内アンカーは
 * -pc 接尾辞で名前空間を分けてある。
 * ---------------------------------------------------------------- */

.hd-view-pc {
  display: none;
}

@media (min-width: 1024px) {
  .hd-view-sp {
    display: none;
  }

  .hd-view-pc {
    display: block;
  }
}

/* ------------------------------------------------------------------
 * 固定ヘッダーぶんのアンカー位置の補正
 *
 * ヘッダーが position:fixed のため、ページ内アンカーで飛ぶと見出しが
 * ヘッダーの下に潜る。ヘッダーの高さは SP / PC で異なる。
 * ---------------------------------------------------------------- */

.hd-view-sp section[id] {
  scroll-margin-top: 64px;
}

.hd-view-pc section[id] {
  scroll-margin-top: 80px;
}

/* ------------------------------------------------------------------
 * 現場の声のカルーセル
 *
 * トラックはインライン style で scrollbar-width:none を持つが、
 * WebKit にはこのプロパティが無いのでスクロールバーを別途隠す。
 * ---------------------------------------------------------------- */

[data-hd="voice-track"]::-webkit-scrollbar {
  display: none;
}

/*
 * SP は1枚見せにする。
 *
 * Claude Design は SP でも2枚見せ (flex: 0 0 47% = 375px 幅で 154px) だが、
 * padding 20px を引くと本文が1行7文字ほどしか入らず、カードが 324px の縦長になり
 * 文節の途中で改行されて読みづらい。幅を 86% に広げると1行16文字・高さ 209px に収まる。
 * 100% にせず次カードの端を覗かせているのは、横に続きがあると気づけるようにするため。
 * スクロールスナップで1枚ずつ止める (カード側は scroll-snap-align:start を持っている)。
 *
 * カード幅はインライン style なので !important が必要。
 */
.hd-view-sp [data-hd="voice-track"] {
  scroll-snap-type: x mandatory;
}

.hd-view-sp [data-hd="voice-track"] > * {
  flex: 0 0 86% !important;
  max-width: none !important;
}

/* ------------------------------------------------------------------
 * SP ヘッダーの「資料DL」ボタン
 *
 * ロゴ (幅 215px) と並ぶと残り幅が 118px しかなく、ボタンが flex で縮められて
 * 「資料 / DL」の2行になり、文字も上寄りに見えていた。折り返しを禁止して
 * 上下左右の中央に置く。縮まなくなったぶん、360px 以下ではロゴを縮ませて
 * 行の幅に収める (アスペクト比は保つ)。
 *
 * 本文のレイアウトはインライン style なので !important が必要。
 * ---------------------------------------------------------------- */

.hd-view-sp header > div > div > a[href="/doc-request/"] {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.hd-view-sp header > div > a {
  min-width: 0 !important;
}

.hd-view-sp header > div > a img {
  max-width: 100% !important;
  height: auto !important;
}

/* ------------------------------------------------------------------
 * PC ヘッダーのナビゲーション
 *
 * Claude Design の PC 版はもっと広いキャンバス前提で書き出されており、
 * 1024〜1400px では nav の項目が縮んで「現場のリ / アル」のように
 * 単語の途中で2行に折り返してしまう。項目の折り返しを禁止したうえで、
 * 余白とフォントサイズをビューポート幅に追従させて1行に収める。
 *
 * 本文のレイアウトはインライン style なので !important が必要。
 * ---------------------------------------------------------------- */

.hd-view-pc header > div {
  padding-left: 32px !important;
  padding-right: 32px !important;
  gap: 16px !important;
}

/* ロゴは幅だけを指定すると、本文インラインの height:42px と噛み合って
 * 横に潰れる。height:auto を添えてアスペクト比を保ったまま、
 * 幅をビューポートに追従させる (広い画面ではデザインどおりの 265px)。 */
.hd-view-pc header > div > a img {
  width: clamp(200px, 16vw, 265px) !important;
  height: auto !important;
}

.hd-view-pc header nav {
  gap: clamp(10px, 1.15vw, 26px) !important;
}

.hd-view-pc header nav a {
  white-space: nowrap !important;
  font-size: clamp(12.5px, 1.02vw, 14px) !important;
}

/* ------------------------------------------------------------------
 * フォーム (資料請求ページ)
 * ---------------------------------------------------------------- */

input,
select,
textarea {
  font-family: 'Noto Sans JP', sans-serif;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #1F86D0 !important;
  box-shadow: 0 0 0 3px rgba(31, 134, 208, .18);
}

/* ------------------------------------------------------------------
 * FAQ (ネイティブ <details>/<summary>)
 * ---------------------------------------------------------------- */

summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-plus {
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------
 * アニメーション
 * ---------------------------------------------------------------- */

@keyframes hd-catch-pop {
  0%   { opacity: 0; transform: scale(.82) rotate(-5deg) translateY(14px); }
  60%  { opacity: 1; transform: scale(1.04) rotate(2deg) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) rotate(0deg) translateY(0); }
}

@keyframes hd-catch-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1.4deg); }
}

@keyframes hd-fly-bob {
  0%, 100% { transform: translateY(-4px) rotate(-5deg); }
  50%      { transform: translateY(5px) rotate(5deg); }
}

/* サンクスページのマスコット */
@keyframes hd-fly {
  0%   { transform: translateY(6px) rotate(-4deg); }
  50%  { transform: translateY(-8px) rotate(3deg); }
  100% { transform: translateY(6px) rotate(-4deg); }
}

/* 最終CTAでマスコットが着地したときの演出 */
.hd-found {
  animation: hd-found-pop .72s cubic-bezier(.2, 1.35, .4, 1) both;
}

@keyframes hd-found-pop {
  0%   { transform: scale(.42) translateY(30px) rotate(-14deg); }
  58%  { transform: scale(1.12) translateY(-6px) rotate(5deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hd-catch-anim,
  .hd-found,
  .hd-fly-inner {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------
 * formrun 埋め込みフォームの高さ確保
 * formrun SDK が iframe に高さを付けないケースがあり、SP で
 * フォームが潰れて見えなくなるため明示的に高さを確保する。
 * デザイン素材の HTML にも同じ指定がある。
 * ---------------------------------------------------------------- */

.formrun-embed iframe {
  width: 100%;
  min-height: 680px;
}