@charset "utf-8";

/* =========================================
   Variables
   ========================================= */
:root {
  --navy: #16254a;
  --navy2: #0e1938;
  --blue: #00a7e1;
  --blue2: #35bde8;
  /* eyebrow 用の濃いブルー。--blue はボタン・アイコン・タグで多用され
     コントラストも 2.76 と低いため、見出しの上の小ラベルはこちらを使う */
  --blue-deep: #0079a6;
  --sky: #eaf8fd;
  --sky2: #f5fbfe;
  --gray: #f6f8fb;
  --line: #dce5ee;
  --text: #17213a;
  --muted: #62708a;
  --white: #ffffff;
  /* 影は3段階のみ。接地(1〜4px)と環境(10〜36px)の2層構成にして輪郭を締める。
     ボカシがオフセットの2倍を超えると影ではなく光彩に見えるため比率を抑えている */
  --shadow-sm: 0 1px 2px rgba(22,37,74,.04), 0 4px 10px rgba(22,37,74,.04);
  --shadow-md: 0 2px 4px rgba(22,37,74,.05), 0 8px 20px rgba(22,37,74,.05);
  --shadow-lg: 0 4px 8px rgba(22,37,74,.06), 0 16px 36px rgba(22,37,74,.07);
  --radius: 22px;
  --max: 1120px;
}

/* =========================================
   Base
   ========================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "Yu Gothic UI", "Noto Sans JP", sans-serif;
  line-height: 1.78;
  background: var(--white);
  letter-spacing: .01em;
}

a { color: inherit; text-decoration: none; }

img {
  max-width: 100%;
  height: auto;
}

/* 改行位置の出し分け。HTML 側で <br class="pc"> を使っているが
   これまで定義が無く、スマホでも改行されてしまっていた */
.sp { display: none; }

@media (max-width: 560px) {
  .pc { display: none; }
  .sp { display: inline; }
}

.wrap { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

/* =========================================
   Header / Nav
   ========================================= */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}

.nav {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: .02em;
}

/* ロゴマーク（波形バー）。ヒーローの .wave と音源プレイヤーの波形と
   同じモチーフで、ページ全体の記号を揃えている */
.brand-mark {
  width: auto;
  height: 34px;
}

/* 提供元表記。サービス名の引き立て役なので、サイズ・太さ・濃さの3つを落とす */
.brand-by {
  margin-left: 7px;
  /* フッターは基準が13pxで .6em だと7.8pxまで落ちるため下限を設ける */
  font-size: max(10px, .6em);
  font-weight: 600;
  letter-spacing: 0;
  opacity: .6;
}

/* =========================================
   Button
   ========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 900;
  transition: .2s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn.primary {
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 4px 12px rgba(0,167,225,.10);
}

.btn.secondary {
  color: var(--navy);
  background: var(--white);
  border-color: var(--line);
}

/* CTA のようにボタンが1つだけ置かれる場所用。
   幅は可変で上限300px（狭い画面では自動的に縮む） */
.btn.large {
  min-height: 60px;
  width: 100%;
  max-width: 300px;
  padding: 0 24px;
  font-size: 20px;
}

/* ヘッダー常設のCTA。76pxのヘッダーに収まる控えめな寸法 */
.header-cta {
  flex: none;
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
}

/* brightness(1.02) は2%の変化でほぼ知覚できないため、背景色で明示する */
.btn:hover { transform: translateY(-2px); }
.btn.primary:hover { background: #0092c4; }
.btn.secondary:hover { background: var(--sky2); border-color: #bfeaf7; }

/* =========================================
   ファーストビューのCTA
   2つ並ぶので、主ボタンだけ 文字サイズ・余白・影 で差をつける。
   高さは揃えないと並びが不格好になるため同じにする
   ========================================= */
.hero .hero-actions .btn {
  min-height: 58px;
  padding: 0 30px;
  font-size: 16px;
}

.hero .hero-actions .btn.primary {
  padding: 0 36px;
  font-size: 17.5px;
  box-shadow: 0 8px 22px rgba(0,167,225,.32);
}

/* 押せる方向を示す矢印。事例の「詳細はこちら」と同じ描き方 */
.hero .hero-actions .btn.primary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 13px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.hero .hero-actions .btn.primary:hover {
  box-shadow: 0 12px 26px rgba(0,167,225,.38);
}

.hero .hero-actions .btn.primary:hover::after {
  transform: rotate(45deg) translate(2.1px, -2.1px);
}

/* =========================================
   Hero
   ========================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 86px 0 82px;
  background:
    linear-gradient(90deg, rgba(234,248,253,.9), rgba(255,255,255,.92) 54%, rgba(234,248,253,.75)),
    radial-gradient(circle at 85% 18%, rgba(0,167,225,.17), transparent 32%);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(22,37,74,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,37,74,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg, black, transparent 80%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 56px;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  color: var(--blue);
  background: var(--white);
  border: 1px solid #cceff9;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

/* h1 の文字サイズをカラム幅基準でも制限するためのコンテナ */
.hero-copy {
  container-type: inline-size;
}

h1 {
  margin: 22px 0 20px;
  /* フォールバック: コンテナクエリ単位が使えない環境用 */
  font-size: clamp(42px, 6.7vw, 78px);
  /*
    「サウンドロゴを、」は全角8文字（letter-spacing -.055em）で約 7.55em。
    カラム幅の 13% を上限にすることで、どの画面幅でも文中で折り返さず
    <br> の位置だけで改行される。
  */
  font-size: min(clamp(42px, 6.7vw, 78px), 13cqi);
  line-height: 1.08;
  letter-spacing: -.055em;
  color: var(--navy);
}

.blue-text { color: var(--blue); }

.lead {
  max-width: 660px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* 560px以下で flex-direction が column になり justify-content が縦方向の
   制御に変わるため、交差軸の align-items も指定して両方向で中央に置く */
.hero-actions.center {
  justify-content: center;
  align-items: center;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.hero-points li {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

/* =========================================
   Hero visual / Player
   ========================================= */
.visual-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 34px;
  padding: 30px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.visual-card::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--sky);
  right: -120px;
  top: -120px;
}

.player {
  position: relative;
  padding: 26px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--sky2), var(--white));
  border: 1px solid var(--line);
}

.player-kicker {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.player-title {
  margin: 0;
  color: var(--navy);
  font-size: 26px;
  line-height: 1.35;
  font-weight: 950;
  letter-spacing: -.035em;
}

.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 152px;
  margin: 26px 0;
  background: var(--white);
  border-radius: 22px;
  border: 1px solid var(--line);
}

.bar {
  width: 10px;
  border-radius: 99px;
  background: var(--blue);
  animation: pulse 1.55s ease-in-out infinite;
  opacity: .92;
}

.bar:nth-child(1) { height: 30px; animation-delay: .05s; }
.bar:nth-child(2) { height: 68px; animation-delay: .16s; }
.bar:nth-child(3) { height: 108px; animation-delay: .27s; }
.bar:nth-child(4) { height: 52px; animation-delay: .38s; }
.bar:nth-child(5) { height: 126px; animation-delay: .49s; }
.bar:nth-child(6) { height: 78px; animation-delay: .60s; }
.bar:nth-child(7) { height: 42px; animation-delay: .71s; }
.bar:nth-child(8) { height: 98px; animation-delay: .82s; }
.bar:nth-child(9) { height: 58px; animation-delay: .93s; }
.bar:nth-child(10) { height: 112px; animation-delay: 1.04s; }
.bar:nth-child(11) { height: 44px; animation-delay: 1.15s; }
.bar:nth-child(12) { height: 74px; animation-delay: 1.26s; }

@keyframes pulse {
  0%, 100% { transform: scaleY(.62); opacity: .55; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ラベルが最長11文字（パターンでデモ音源作成）あり、3列固定だと狭い幅で
   5行に割れる。列数を可変にして1タイルの幅を確保する */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 12px;
}

.spec {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 12px;
}

/* vw961〜1119 ではヒーロー右カードが細く、タイル内寸が 54〜78px まで縮む。
   「低価格」が途中で割れないよう、幅に応じて縮めたうえで nowrap を効かせる */
/* 最長の値が「最短3週間」= 約4.5em。3列時の内寸82〜90pxに収めるため
   上限を19pxにしている（24pxだと nowrap のままはみ出す） */
.spec b {
  display: block;
  color: var(--navy);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.1;
  white-space: nowrap;
}

/* inline のままだと body の line-height 1.78 を継承し、12pxの文字に対して
   行送りが21.4pxとゆるくなる。2行に折り返すラベルがあるので詰める */
.spec span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

/* =========================================
   Section common
   ========================================= */
section { padding: 76px 0; }

.section-head {
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 34px;
}

h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.22;
  letter-spacing: -.045em;
}

/* 子セレクタにする。子孫セレクタだと入れ子の div 内にある .eyebrow にも
   当たり、詳細度(0,1,1)が .eyebrow(0,1,0) に勝って色を上書きしてしまう */
/* justify-self: end で幅が内容に合わせて縮み、右端に揃う。
   長文はカラム幅いっぱいまで伸びるので従来どおり。
   text-align: right にしないのは、複数行のときに左端がガタつくため */
.section-head > p {
  margin: 0;
  justify-self: end;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}

.eyebrow {
  color: var(--blue-deep);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .13em;
  margin: 0 0 10px;
}

/* セクション背景バリエーション */
.section-sky,
.section-gray {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-sky { background: var(--sky2); }
.section-gray { background: var(--gray); }

/* =========================================
   Card
   ========================================= */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* .card は19個あり、全部浮かせると階層が機能しないので罫線のみ */
.card {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

/* ABOUT の番号バッジ。.icon-badge と同寸にして2セクションの見出し高さを揃える */
.num {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sky);
  color: var(--blue);
  font-size: 18px;
  font-weight: 950;
}

/* アイコン付きカード（WHY セクション）
   アイコンを左、番号+見出しを右に置く2カラムのヘッダー */
.card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.icon-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sky);
  color: var(--blue);
}

.icon-badge svg {
  width: 28px;
  height: 28px;
}

.card-num {
  display: block;
  margin-bottom: 3px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .1em;
}

/* ヘッダー内の見出しは下マージンを持たせない（.card-head 側で余白を取る） */
.card-head h3 {
  margin: 0;
  font-size: 18px;
}

.card h3, .format h3, .step h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.card p, .format p, .step p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

/* =========================================
   Format
   ========================================= */
.formats {
  display: grid;
  gap: 14px;
}

.format {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
}

.format-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: var(--sky);
  border-radius: 18px;
  font-size: 26px;
  font-weight: 900;
}

.format-tag {
  padding: 7px 12px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--sky);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

/* =========================================
   Price
   ========================================= */
.price-section {
  background: linear-gradient(180deg, var(--sky2), var(--white));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.price-box {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 22px;
  align-items: stretch;
}

.price-card {
  padding: 34px;
  border-radius: 30px;
  color: var(--white);
  background:
    radial-gradient(circle at 88% 16%, rgba(0,167,225,.30), transparent 30%),
    var(--navy);
  box-shadow: var(--shadow-lg);
}

.price-card p { margin: 0; color: rgba(255,255,255,.78); font-weight: 700; }

.yen {
  margin: 16px 0 12px;
  font-size: clamp(48px, 7vw, 76px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.06em;
}

.yen span {
  font-size: 23px;
  letter-spacing: 0;
  opacity: .86;
}

/* 数字ではなく日本語テキストを入れる場合（詰めすぎを防ぐ） */
.yen-text {
  font-size: clamp(38px, 5vw, 56px);
  letter-spacing: -.02em;
}

.included {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.included li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
}

.included li:last-child { border-bottom: none; }
.check { color: var(--blue); font-weight: 950; }

/* =========================================
   Flow
   ========================================= */
.flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;                    /* 接続線と矢印を置くため 14px から拡張 */
}

.step {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white);
  position: relative;
}

/* STEP ラベルの頭に、接続線の起点となるノードを置く */
.step small {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .1em;
}

.step small::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--blue);
}

/* カード間をつなぐ線と矢印（2枚目以降の左側に描く） */
.step + .step::before,
.step + .step::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* ノード中心は実測でカード上端から 37.5px、左端から 27.5px。
   線(太さ2px)は中心-1px、矢印(ボーダー込み9px角)は中心-4.5px に置く */
.step + .step::before {
  top: 36.5px;
  left: -25px;
  width: 25px;
  height: 2px;
  background: #cfdae6;
}

.step + .step::after {
  top: 33px;
  left: -9px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #a9bccd;
  border-right: 2px solid #a9bccd;
  transform: rotate(45deg);
}

/* =========================================
   FAQ
   ========================================= */
.faq {
  display: grid;
  gap: 12px;
}

details {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
}

summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  color: var(--navy);
  font-weight: 900;
}

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

/* 開閉インジケータ: 閉じている時は ＋ 、開いている時は −
   縦棒の background-size を 0 にして − に変える（transition が効く） */
summary::after {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--sky);
  background-image:
    linear-gradient(var(--blue), var(--blue)),
    linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 2.5px, 2.5px 13px;
  transition: background-size .22s ease, background-color .22s ease;
}

details[open] summary::after {
  background-size: 13px 2.5px, 2.5px 0;
}

summary:hover::after { background-color: #d3eff9; }

details[open] { border-color: #bfeaf7; }

details p {
  margin: 12px 0 0;
  color: var(--muted);
  font-weight: 600;
}

/* =========================================
   CTA / Footer
   ========================================= */
.cta {
  padding: 84px 0 96px;
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -180px;
  top: -180px;
  background: radial-gradient(circle, rgba(0,167,225,.28), transparent 66%);
}

.cta-box {
  position: relative;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.cta h2 { color: var(--white); }

.cta .eyebrow { color: var(--blue2); }

.cta p {
  margin: 16px auto 28px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
  font-weight: 600;
  max-width: 700px;
}

/* =========================================
   HubSpot フォーム（CTA内）
   埋め込み側で css:"" を渡し HubSpot 既定のCSSは読み込ませていない。
   ただし HubSpot は inline <style> で
   「.hs-form-<id> fieldset { max-width:500px }」を後から差し込むため、
   同じ詳細度(0,1,1)だと後勝ちで負ける。.hs-form を挟んで(0,2,1)にしている。
   ========================================= */
.form-wrap {
  max-width: 720px;
  margin: 38px auto 0;
  padding: 40px;
  border-radius: 28px;
  background: var(--gray);
  text-align: left;
}

.form-wrap .hs-form fieldset {
  display: grid;
  gap: 20px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-wrap .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr 1fr; }
.form-wrap .hs-form fieldset.form-columns-1 { grid-template-columns: 1fr; }
.form-wrap .hs-form fieldset + fieldset { margin-top: 20px; }

/* HubSpot が後から inline <style> で注入してくる旧レイアウト（float + %幅）を無効化する。
     .hs-form-<id> fieldset.form-columns-2 .hs-form-field { width:50%; float:left }
     .hs-form-<id> fieldset.form-columns-1 .hs-input      { width:95% }
     .hs-form-<id> fieldset.form-columns-N .input         { margin-right:8px }
   いずれも詳細度 (0,3,1) でこちらと同値、かつ後から読み込まれるため後勝ちされる。
   ID が動的で狙い撃ちできず、こちらは grid で組んでいるので !important で打ち消す。 */
.form-wrap .hs-form fieldset .hs-form-field {
  width: 100% !important;
  float: none !important;
}

.form-wrap .hs-form fieldset .input { margin-right: 0 !important; }

.form-wrap .hs-form fieldset .hs-input {
  width: 100% !important;
  max-width: 100% !important;
}

/* チェックボックスだけは幅を広げない */
.form-wrap .hs-form fieldset input[type="checkbox"],
.form-wrap .hs-form fieldset input[type="radio"] {
  width: 18px !important;
}

.form-wrap .hs-form-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
}

/* HubSpot の「*」を「必須」の文字に差し替える */
.form-wrap .hs-form-required {
  margin-left: 7px;
  color: var(--blue);
  font-size: 0;
  vertical-align: 1px;
}

.form-wrap .hs-form-required::after {
  content: "必須";
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.form-wrap .hs-input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.form-wrap .hs-form textarea.hs-input {
  min-height: 190px;
  line-height: 1.75;
  resize: vertical;
}

.form-wrap .hs-input::placeholder { color: #9aa7ba; font-weight: 500; }

.form-wrap .hs-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,167,225,.18);
}

/* 同意チェックボックス */
.form-wrap .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.form-wrap .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  cursor: pointer;
}

.form-wrap .hs-form-booleancheckbox-display > input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 4px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--blue);
}

.form-wrap .hs-form-booleancheckbox-display a {
  color: var(--blue-deep);
  text-decoration: underline;
}

/* reCAPTCHA バッジ。Google の規約上そのまま表示し、位置だけ整える */
.form-wrap .hs_recaptcha {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

/* 送信ボタン */
.form-wrap .hs_submit .actions {
  margin-top: 28px;
  text-align: center;
}

.form-wrap .hs-button {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  /* Safari は input[type=submit] にネイティブ外観を当て角丸を無視する */
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,167,225,.18);
  transition: background .15s ease, transform .15s ease;
}

.form-wrap .hs-button:hover {
  background: #0092c4;
  transform: translateY(-2px);
}

.form-wrap .hs-error-msgs {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.form-wrap .hs-error-msgs label,
.form-wrap .hs-error-msg {
  color: #d64545;
  font-size: 12px;
  font-weight: 700;
}

.form-wrap .hs-input.invalid { border-color: #e08282; }

.form-wrap .submitted-message {
  color: var(--navy);
  font-weight: 700;
  text-align: center;
}

footer {
  padding: 56px 0 0;
  background: var(--navy2);
  color: rgba(255,255,255,.68);
  font-size: 13px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  padding-bottom: 44px;
}

/* .brand は紺文字なので、暗い背景では白に上書きする */
.footer-brand {
  align-self: start;
  color: var(--white);
}

.footer-nav-title {
  margin: 0 0 18px;
  color: var(--white);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
}

.footer-nav ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-nav a {
  color: rgba(255,255,255,.72);
  font-weight: 600;
  transition: color .15s ease;
}

.footer-nav a:hover { color: var(--blue2); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}

/* 高さ28px×2倍 = 56px が元画像の高さと一致するのでリサイズ不要 */
.footer-otonal {
  display: block;
  width: auto;
  height: 28px;
}

/* .45 だと紺背景で 4.41 と AA(4.5) に届かないため少し上げる */
.footer-bottom small {
  color: rgba(255,255,255,.52);
  font-size: 12px;
  letter-spacing: .02em;
}

/* =========================================
   Before / After
   ========================================= */
.before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.ba-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.ba-card.before {
  background: #fbfcfe;
}

.ba-card.after {
  background:
    radial-gradient(circle at 88% 8%, rgba(0,167,225,.16), transparent 34%),
    var(--white);
  border-color: #bfeaf7;
}

/* このセクションで2番目に大きい文字サイズ（h2 48px > ここ 24px = .ba-card h3）。
   固定 height だと収まらないので padding で組む */
/* inline-flex だと中の <br> が改行として働かない（子が個別のフレックス
   アイテムになるため）ので inline-block + text-align で中央寄せする */
.ba-label {
  display: inline-block;
  text-align: center;
  padding: 4px 18px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: .04em;
  line-height: 1.35;
  margin-bottom: 18px;
}

.ba-label.before {
  color: var(--muted);
  background: #eef2f6;
}

.ba-label.after {
  color: var(--blue);
  background: var(--sky);
}

/* BEFORE / AFTER の比較イラスト
   <picture> は既定で inline のため、余白は picture 側に持たせる */
.ba-card picture {
  display: block;
  margin-bottom: 22px;
}

/* 素材が背景透過のため、枠・角丸・背景は付けない
   （付けるとカード内に白い箱が二重に見える） */
.ba-illust {
  display: block;
  width: 100%;
  height: auto;
}

.ba-card h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.35;
  letter-spacing: -.03em;
}

.ba-card p {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.ba-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.ba-list li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: var(--text);
  font-weight: 750;
}

.ba-list .minus {
  color: #94a3b8;
  font-weight: 950;
}

.ba-list .plus {
  color: var(--blue);
  font-weight: 950;
}

/* =========================================
   Use case（アイコン＋ラベルのみの一覧）
   本文を持たせず、6項目を一目で見渡せる密度にする
   ========================================= */
.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.usecase-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 26px 22px;
  text-align: left;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
}

/* アイコンを見出しの左に置く */
.usecase-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.usecase-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.usecase-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--sky);
  color: var(--blue);
}

.usecase-icon svg {
  width: 25px;
  height: 25px;
}

.usecase-item h3 {
  margin: 0;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* =========================================
   Recommend（チェックリスト）
   自分に当てはまるか照合する内容なので、カードではなく罫線区切りのリスト
   ========================================= */
.checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

/* 2カラム時の最終行 */
.checklist li:nth-last-child(-n+2) { border-bottom: none; }

.checklist-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 8px;
  background: var(--sky);
  color: var(--blue);
}

.checklist-icon svg {
  width: 14px;
  height: 14px;
}

.checklist h3 {
  margin: 0;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.55;
  letter-spacing: -.01em;
}

.checklist p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.65;
}
@media (max-width: 767px) {
  .checklist h3 { font-size: 15px; }
  .checklist p { font-size:13px; }
}

/* =========================================
   Cases
   ========================================= */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* ロゴ＋試聴プレイヤー型のカード。
   プレイヤーをカード下端に貼り付けるため flex + margin-top:auto で組む */
.case-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 20px 0;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.case-tag {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--blue);
  background: var(--sky);
  font-size: 12px;
  font-weight: 900;
}

/* ロゴ枠。画像に差し替えても4枚の高さが揃うよう最小高を確保する */
/* ロゴ使用規定のクリアスペース確保のため、左右に最低16pxを空ける */
.case-logo-area {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 72px;
  margin-bottom: 16px;
  padding: 0 16px;
}

/* ロゴは縦横比が 2.5:1 〜 6.2:1 とばらつくため、高さを揃えると見た目の
   大きさが揃わない。面積が近くなるよう1点ずつ上限高さを与える */
/* max-height ではなく height を指定する。max-height だと小さいSVG（with は
   実寸 106x43）が拡大されず、他とサイズが揃わないため。
   max-width で枠を超える場合は縦横比を保ったまま縮む */
.case-logo {
  width: auto;
  height: 52px;
  max-width: 100%;
}

/* 高さは、デスクトップ（ロゴ枠の内寸194px）で max-width に当たらない値にする。
   頭打ちになるとクリアスペースが0になるため */
.case-logo--with     { height: 56px; }  /* 2.47:1 幅138px */
.case-logo--alalink  { height: 56px; }  /* 2.87:1 幅161px 2行組なので少し高め */
.case-logo--laxus    { height: 40px; }  /* 4.57:1 幅183px */
.case-logo--descente { height: 30px; }  /* 6.24:1 幅187px 最も横長 */

.case-company {
  margin: 0 0 5px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}

/* リンクであることを常時示すため下線を敷く。
   offset を空けないと日本語の下端に線が触れて読みにくくなる */
.case-company a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.case-company a:hover {
  color: var(--blue-deep);
}

/* 説明文とプレイヤーの間に置く導線。
   ページ共通の「丸ピル」語彙に合わせた枠線付き。青ベタにすると
   同じカード内の再生ボタンと主張が競合するため、一段軽い枠線型にしている。
   ホバーの挙動は .btn.secondary と揃えた */
.case-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 9px 16px 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  /* gap は動かさない。変えるとピルの幅が変わり、中央揃えのぶん文字がずれる */
  transition: background .15s ease, border-color .15s ease;
}

/* 矢印は border で描いて要素を増やさない */
.case-more::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-top: 2px solid var(--blue);
  border-right: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

/* 矢印だけを transform で右へ。transform はレイアウトに影響しないので
   ピルの幅も文字位置も動かない。45度回転後の座標系なので (d, -d) で真右になる */
.case-more:hover::after {
  transform: rotate(45deg) translate(2.1px, -2.1px);
}

.case-more:hover {
  background: var(--sky2);
  border-color: #bfeaf7;
}

.case-company a:focus-visible,
.case-more:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.case-title {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.02em;
}

.case-desc {
  margin: 0 0 18px;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.7;
}

/* カード幅いっぱいに広げて下端へ寄せる */
.case-audio {
  width: calc(100% + 40px);
  margin: auto -20px 0;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: var(--gray);
}

/* JS 無効時はネイティブプレイヤーがそのまま出る */
.case-audio audio {
  display: block;
  width: 100%;
  height: 36px;
}

.case-audio.is-enhanced audio { display: none; }

/* JS で差し替える独自プレイヤー */
.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
}

.audio-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.audio-btn:hover {
  background: #0092c4;
  transform: scale(1.06);
}

/* 38px に対して偶数の 14px。端数が出ず中心が整数ピクセルに乗る */
.audio-btn svg {
  width: 14px;
  height: 14px;
}

.audio-wave {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 30px;
  cursor: pointer;
}

.audio-wave i {
  flex: 1;
  border-radius: 99px;
  background: #cfdae6;
  transition: background .1s linear;
}

.audio-wave i.is-played { background: var(--blue); }

.audio-btn:focus-visible,
.audio-wave:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

.audio-time {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* =========================================
   Responsive
   ========================================= */
/* 4カラムだとロゴ枠が173pxまで縮み、横長ロゴが潰れるため早めに2カラムへ */
@media (max-width: 1100px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .hero-grid, .section-head, .price-box, .before-after { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  /* 事例は1カラムだとプレイヤーが間延びするので2カラムで保つ */
  .case-grid { grid-template-columns: 1fr 1fr; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .checklist { grid-template-columns: 1fr; gap: 0; }
  .checklist li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .checklist li:last-child { border-bottom: none; }
  /* BEFORE/AFTER が縦積みになり横幅が余るので、ラベルを帯状に広げる */
  .ba-label { display: block; width: 100%; }
  .flow { grid-template-columns: 1fr 1fr; }
  /* 2カラムでは行をまたぐ位置に線が出てしまうため、いったん消す */
  .step + .step::before,
  .step + .step::after { display: none; }
  .format { grid-template-columns: 62px 1fr; }
  .format-tag { grid-column: 2; justify-self: start; }
}

@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, var(--max)); }
  .hero { padding: 54px 0 52px; }
  section { padding: 56px 0; }
  .hero-actions { flex-direction: column; }
  .btn { width: 100%; }
  .specs, .flow { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .case-grid { grid-template-columns: 1fr; }
  /* 改行するので区切りの縦線は不要。行末に「｜」が残ると収まりが悪い */
  .ba-sep { display: none; }
  /* ロゴ（実測282px）だけで横幅を使い切るため、この幅では併置できない */
  .header-cta { display: none; }
  .form-wrap { padding: 26px 20px; border-radius: 22px; }
  .form-wrap .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  /* 1カラムでは縦に流れるので、線と矢印を縦向きに描き直す */
  .step + .step::before,
  .step + .step::after { display: block; }
  .step + .step::before {
    top: -24px;
    left: 26.5px;
    width: 2px;
    height: 24px;
  }
  .step + .step::after {
    top: -13px;
    left: 23px;
    transform: rotate(135deg);
  }
  .visual-card, .player, .price-card, .card { padding: 22px; }
  .format { grid-template-columns: 1fr; }
  .format-tag { grid-column: auto; }
}