@charset "UTF-8";
/* =========================================================
   Adnymous サジェスト広告 LP
   構造・デザイン基準: https://www.benesse.co.jp/digital/
   ・ダークネイビー地＋ピンク〜パープルのグラデーション見出し
   ・PCではセクション見出しを90度回転して左右端に配置
   ・巨大な英字ディスプレイ見出し（白ブロック＋黒文字）
   ・角丸の半透明カード／ピル型ボタン（左からの塗りつぶし）
   ・ルート font-size をビューポート連動にした rem 設計
     SP: 750px設計（1rem = 100vw/75）／ PC: 1rem = 10px
   ========================================================= */

:root {
  --navy: #001125;
  --navy-2: #00091a;
  --black: #000;
  --white: #fff;
  --pale-white: rgba(255, 255, 255, 0.3);
  --very-pale-white: rgba(255, 255, 255, 0.1);
  --line: rgba(255, 255, 255, 0.2);
  --pink: #ff2e9f;
  --blue: #4e31ff;
  --purple: #9916ff;
  --magenta: #d52bff;
  --gradient: linear-gradient(
    90deg,
    rgb(255 46 159) 6%,
    rgb(78 49 255 / 0.97) 41%,
    rgb(153 22 255 / 0.95) 79%,
    rgb(213 43 255 / 0.91) 100%
  );
  --gradient-sheen: linear-gradient(45deg, transparent, #fff, #616f80, #fff, transparent);
  /* 小さい文字用。--gradient の青紫は暗背景に沈むため明度を上げた版 */
  --gradient-bright: linear-gradient(
    90deg,
    rgb(255 95 184) 6%,
    rgb(143 127 255) 41%,
    rgb(185 107 255) 79%,
    rgb(229 116 255) 100%
  );
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-out: cubic-bezier(0.16, 0.74, 0.16, 1);
  --px: 4rem;
}

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

* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

html {
  font-size: calc(100vw / 75);
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  /* hidden はスクロールコンテナを作り position: sticky を壊すため clip を使う */
  overflow-x: clip;
}

body {
  background: var(--navy);
  color: var(--white);
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic, Meiryo, sans-serif;
  font-size: 3.2rem;
  line-height: 1.9;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

::selection { background: var(--pink); color: var(--white); }

img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 500; }
p { margin: 0; }

/* 日本語の見出しは文節の途中で折り返さない（行の収まりは明示的な<br>で制御）。
   本文に keep-all を掛けると長い文節が折り返せず右端で切れるため、見出し限定にする */
h1, h2, h3, h4, h5 {
  word-break: keep-all;
  overflow-wrap: normal;
  line-break: strict;
}

/* 英字ディスプレイ用のフォント（Benesse の ff_tt 相当の役割） */
.tt {
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  letter-spacing: 0;
  font-weight: 500;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--white);
  color: var(--black);
  padding: 1.6rem 2.4rem;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* =========================================================
   背景エフェクト（Benesse の webp 背景をCSSグラデーションで再現）
   ========================================================= */

.bg-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(0.5px);
  animation: orbFloat 10s infinite linear alternate;
}

.bg-orb--top {
  top: -10rem;
  right: -20rem;
  width: 66rem;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 40% 40%, rgba(255, 46, 159, 0.5), transparent 62%),
    radial-gradient(circle at 70% 65%, rgba(78, 49, 255, 0.45), transparent 60%);
}

.bg-orb--mid {
  top: 20rem;
  left: -24rem;
  width: 80rem;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 55% 45%, rgba(153, 22, 255, 0.4), transparent 62%),
    radial-gradient(circle at 30% 70%, rgba(255, 46, 159, 0.32), transparent 60%);
}

.bg-orb--foot {
  bottom: -30rem;
  left: -30rem;
  width: 96rem;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle at 50% 50%, rgba(78, 49, 255, 0.4), transparent 62%),
    radial-gradient(circle at 75% 30%, rgba(213, 43, 255, 0.3), transparent 60%);
}

@keyframes orbFloat {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  100% { transform: translate3d(-3rem, 4rem, 0) rotate(24deg) scale(1.08); }
}

/* =========================================================
   ヘッダー
   ========================================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2.4rem var(--px);
  background: rgb(0 17 37 / 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* アンカー移動時に固定ヘッダーと見出しが重ならないようにする */
#top, #service, #value, #simulation, #pricing, #industries, #faq, #contact, #contact-form {
  scroll-margin-top: 16rem;
}

.brand {
  display: flex;
  align-items: center;
  height: fit-content;
  flex-direction: column;
  gap: 2.7rem;
  padding-top: 1.4rem;
}

.brand-logo {
  display: block;
  font-size: 5.2rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--white);
}

.brand-tag {
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--white);
}

.menu-toggle {
  background: rgba(255, 255, 255, 0.1);
  border: solid 1px var(--pale-white);
  border-radius: 50%;
  width: 10rem;
  height: 10rem;
  display: inline-flex;
  place-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.menu-toggle-inner {
  position: relative;
  width: 3.3rem;
  height: 2.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.menu-toggle-inner span {
  display: block;
  width: 3.3rem;
  height: 0.3rem;
  background: var(--white);
  position: absolute;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.menu-toggle-inner span:nth-child(1) { top: 0; }
.menu-toggle-inner span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.menu-toggle-inner span:nth-child(3) { bottom: 0; }

.menu-toggle[aria-expanded="true"] .menu-toggle-inner span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-inner span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-inner span:nth-child(3) {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.global-nav { display: none; }

/* =========================================================
   モバイルメニュー
   ========================================================= */

.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgb(0 17 37 / 0.9);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.menu-panel {
  background: var(--very-pale-white);
  border: solid 1px rgb(255 255 225 / 0.3);
  height: calc(100dvh - 27.9rem);
  max-height: 100vh;
  width: 67rem;
  border-radius: 1.2rem;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  margin: 20.3rem auto 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(5rem);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  backdrop-filter: blur(12px);
}
.menu-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }

.menu-panel-inner {
  position: relative;
  flex: 1;
  padding: 6.2rem 7.2rem 8rem;
  color: var(--white);
  overflow-y: auto;
}

.menu-list {
  display: flex;
  flex-direction: column;
  gap: 5.5rem;
  padding-bottom: 6rem;
  border-bottom: solid 1px var(--pale-white);
}

.menu-list a {
  font-size: 4rem;
  line-height: 1.2;
  position: relative;
}
.menu-list a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.8rem;
  margin: auto;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--white);
  border-radius: 50%;
  opacity: 0;
}
.menu-list a.is-current::before { opacity: 1; }

.menu-sub {
  display: flex;
  flex-direction: column;
  gap: 4.5rem;
  margin-top: 9rem;
  font-size: 2.6rem;
}

.menu-copy {
  display: block;
  margin-top: 9rem;
  font-size: 1.8rem;
}

/* =========================================================
   共通パーツ
   ========================================================= */

main { position: relative; overflow: clip; }

.section { position: relative; padding-inline: var(--px); }

.inner { position: relative; z-index: 1; }

/* セクション見出し（グラデーション文字） */
.sec-head {
  position: relative;
  width: fit-content;
  font-size: 7.4rem;
  line-height: 1.42;
  font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 見出しに添える小さなブロック（Benesse の brick 相当） */
.sec-head .brick {
  position: absolute;
  display: block;
  width: 5rem;
  height: 3.9rem;
  right: -3.5rem;
  top: 1.5rem;
  background: var(--gradient);
  clip-path: polygon(0 0, 62% 0, 62% 46%, 100% 46%, 100% 100%, 38% 100%, 38% 54%, 0 54%);
  opacity: 0.9;
}

.sec-lead {
  font-size: 4.8rem;
  line-height: 1.45;
  font-weight: 500;
  /* 長い文節でも右端で切れないよう、日本語の自然な折り返しを許可する */
  word-break: normal;
  overflow-wrap: normal;
}

.sec-body {
  line-height: 2.3;
  margin-top: 4rem;
}

.note {
  margin-top: 3.6rem;
  font-size: 2.4rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}

/* ピル型ボタン */
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  /* calc(infinity * 1px) は Safari で描画が壊れる（枠の上弧だけ表示される）ため使わない */
  border-radius: 999rem;
  letter-spacing: 0;
  line-height: 1;
  font-weight: 500;
  z-index: 0;
  overflow: hidden;
  transition: color 0.4s;
  padding: 2rem 5.2rem 2.2rem 6.4rem;
  min-height: 10rem;
  font-size: 3rem;
  color: var(--white);
  border: 0.2rem solid #fff;
  background: transparent;
  width: 48rem;
  max-width: 100%;
  cursor: pointer;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
.btn::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 101%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
  z-index: -1;
  background: var(--white);
}
.btn:hover { color: var(--black); border-color: transparent; }
.btn:hover::before { transform: scaleX(1); }

.btn .arrow {
  display: inline-block;
  aspect-ratio: 1 / 1;
  width: 1.1em;
  background: currentColor;
  mask: var(--arrow) center / contain no-repeat;
  -webkit-mask: var(--arrow) center / contain no-repeat;
  --arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.2 4.6 11.8 6l5 5H3v2h13.8l-5 5 1.4 1.4L20.6 12z'/%3E%3C/svg%3E");
}

/* =========================================================
   メインビジュアル
   ========================================================= */

.mv {
  position: relative;
  overflow: hidden;
  padding-top: 18.5rem;
  z-index: 0;
}

/* 縦組み（Latin は自動で90度回転する）。transform を使わないので位置がずれない */
.mv-side {
  font-size: 1.8rem;
  letter-spacing: 0;
  gap: 8rem;
  position: absolute;
  top: 18.8rem;
  right: 0.5rem;
  z-index: 1;
  display: flex;
  writing-mode: vertical-rl;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
}

.mv-stage { position: relative; padding-top: 4rem; }

.mv-copy {
  position: relative;
  z-index: 1;
  padding-inline: var(--px);
}

.display-title { font-size: 10rem; line-height: 0.8; }

.display-title span {
  display: block;
  position: relative;
  color: var(--black);
  width: fit-content;
  font-weight: 500;
  letter-spacing: -0.03em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out);
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
.display-title span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 102%;
  height: 100%;
  background: var(--white);
  z-index: -1;
}
.display-title.is-in span { clip-path: inset(0 -5% 0 0); }
.display-title span + span { margin-top: -0.1rem; }

.mv-lead {
  font-size: 5.2rem;
  line-height: 1.5;
  margin-top: 7rem;
  font-weight: 700;
}

.mv-sub {
  margin-top: 2.8rem;
  font-size: 2.8rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}

.mv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 6rem;
}
.mv-facts li {
  background: var(--very-pale-white);
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  padding: 1.6rem 2.6rem;
  font-size: 2.6rem;
  line-height: 1.5;
}
.mv-facts strong { font-weight: 700; }

.mv-actions { margin-top: 6rem; display: flex; flex-direction: column; gap: 2.4rem; }

.mv-note {
  margin-top: 3.2rem;
  font-size: 2.2rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   セクション共通レイアウト
   ========================================================= */

.block { position: relative; margin-top: 11rem; }

.block-body { margin-top: 5.6rem; }

/* 表示イメージ */
.figure-card {
  display: block;
  margin: 0;
  background: var(--very-pale-white);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 2rem;
}
.figure-card img { display: block; width: 100%; border-radius: 0.4rem; }
.figure-card figcaption {
  margin-top: 1.8rem;
  font-size: 2.2rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
}

.figure-grid { display: grid; gap: 3rem; margin-top: 4rem; }

/* 表示イメージを同サイズで縦に並べる */
.figure-stack { display: grid; gap: 3rem; }

/* 効果リスト */
.benefit-list { display: grid; gap: 2.4rem; margin-top: 6rem; }
.benefit-list li {
  position: relative;
  background: var(--very-pale-white);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 3rem 3.2rem 3rem 8rem;
  font-size: 3rem;
  line-height: 1.6;
}
.benefit-list li::before {
  content: "";
  position: absolute;
  left: 3.2rem;
  top: 3.4rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--gradient);
}

/* 比較表 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 6rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: rgb(0 17 37 / 0.5);
}
.compare-table { width: 100%; border-collapse: collapse; min-width: 62rem; }
.compare-table caption {
  caption-side: top;
  text-align: left;
  padding: 3rem 3rem 2.4rem;
  font-weight: 700;
  font-size: 2.6rem;
  border-bottom: 1px solid var(--line);
}
.compare-table th,
.compare-table td {
  padding: 2.8rem 3rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 2.4rem;
  line-height: 1.7;
  vertical-align: top;
  color: rgba(255, 255, 255, 0.82);
}
.compare-table thead th {
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  font-size: 2.2rem;
}
.compare-table tbody th { color: var(--white); font-weight: 700; white-space: nowrap; }
.compare-table .col-own { color: var(--white); font-weight: 700; }
.compare-table thead .col-own {
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* 列の背景ハイライトは中途半端に見えるため使わない（白太字のみで区別する） */
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }

/* 試算カード */
.calc-grid { display: grid; gap: 3rem; margin-top: 6rem; }
.calc-card {
  background: var(--very-pale-white);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 4.4rem 4rem;
  position: relative;
  overflow: hidden;
}
.calc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.4rem;
  background: var(--gradient);
}
.calc-label {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.calc-num {
  display: block;
  margin-top: 1.6rem;
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.calc-card ul { margin-top: 2.8rem; display: grid; gap: 1.4rem; font-size: 2.4rem; }
.calc-card li { padding-left: 2.4rem; position: relative; color: rgba(255, 255, 255, 0.82); }
.calc-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  width: 1.2rem;
  height: 0.2rem;
  background: var(--pink);
}

.assump {
  margin-top: 3rem;
  background: rgb(0 17 37 / 0.5);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 4rem;
}
.assump h3 { font-size: 2.6rem; margin-bottom: 2.4rem; }
.assump ul { display: grid; gap: 1.8rem; }
.assump li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 2.4rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}
.assump li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.9rem;
  width: 1.2rem;
  height: 0.2rem;
  background: var(--pink);
}

/* 料金 */
.price-card {
  margin-top: 6rem;
  background: var(--very-pale-white);
  border: 1px solid var(--pale-white);
  border-radius: 1.2rem;
  padding: 5.6rem 4.4rem;
}
.price-label {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.price-main {
  display: block;
  margin-top: 1.4rem;
  font-size: 7.6rem;
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.price-sub { margin-top: 1.6rem; font-size: 2.4rem; color: rgba(255, 255, 255, 0.72); }
.price-card ul { margin-top: 3.6rem; display: grid; gap: 2rem; }
.price-card li {
  position: relative;
  padding-left: 2.4rem;
  font-size: 2.6rem;
  line-height: 1.7;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2rem;
  width: 1.2rem;
  height: 0.2rem;
  background: var(--pink);
}

/* 導入の流れ */
.steps { display: grid; gap: 2.4rem; margin-top: 6rem; }
.step {
  background: var(--very-pale-white);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 3.6rem 3.2rem;
}
.step-num {
  font-size: 2.2rem;
  letter-spacing: 0.4em;
  font-weight: 700;
  margin-bottom: 1.6rem;
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
.step-title { font-size: 3.4rem; font-weight: 700; margin-bottom: 1.4rem; line-height: 1.5; }
.step p { font-size: 2.6rem; line-height: 1.9; color: rgba(255, 255, 255, 0.82); }

/* 対象業種タグ */
.tags { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 5rem; }
.tags li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--very-pale-white);
  border-radius: 0.8rem;
  padding: 1.5rem 1.6rem 1.4rem;
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 700;
}
.tags li::before {
  content: "";
  width: 1.2rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--pink);
}
.tags li:nth-child(even)::before { background: var(--blue); }

/* FAQ */
.faq-list { margin-top: 5rem; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
details summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 3.6rem 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.6;
}
details summary::-webkit-details-marker { display: none; }
/* display:flex でも ::marker が幅を持つため明示的に消す。
   overflow-x: clip は、回転した＋アイコンの角（透明領域）が
   summary の scrollWidth に計上されるのを防ぐ */
details summary { list-style: none; overflow-wrap: anywhere; overflow-x: clip; }
/* 「＋」はボックスではなく ::before の記号だけを回転させる。
   ボックスごと回すと角がsummaryの外へ出て scrollWidth に計上されるため */
.faq-icon {
  width: 4.4rem;
  height: 4.4rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 2.8rem;
}
.faq-icon::before {
  content: "+";
  display: block;
  line-height: 1;
  transition: transform 0.25s var(--ease);
  background: var(--gradient-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
details[open] .faq-icon::before { transform: rotate(45deg); }
.faq-body {
  padding: 0 0 3.6rem;
  font-size: 2.6rem;
  line-height: 1.95;
  color: rgba(255, 255, 255, 0.82);
}

/* =========================================================
   CTA セクション（Benesse の Career セクション相当）
   ========================================================= */

.cta-section {
  position: relative;
  overflow: hidden;
  z-index: 0;
  margin-top: 16rem;
  padding-bottom: 8.5rem;
}
.cta-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20rem;
  width: 100%;
  aspect-ratio: 750 / 841;
  z-index: -1;
  mix-blend-mode: lighten;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 46, 159, 0.35), transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(78, 49, 255, 0.35), transparent 55%);
}

.cta-inner { padding-inline: var(--px); }

.cta-display { line-height: 0.84; margin-top: 8rem; font-size: 9.4rem; }
.cta-display span {
  display: block;
  position: relative;
  width: fit-content;
  color: var(--black);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out);
  letter-spacing: -0.03em;
  font-weight: 500;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}
.cta-display span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 102%;
  height: 100%;
  background: var(--white);
  z-index: -1;
}
.cta-display.is-in span { clip-path: inset(0 -5% 0 0); }
.cta-display span + span { margin-top: -0.1rem; }

.cta-content {
  margin-top: 5.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta-content p { font-weight: 700; line-height: 2.2; font-size: 3rem; }

/* マーキー */
.marquee {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 12rem;
  overflow: hidden;
}
.marquee ul {
  display: flex;
  align-items: center;
  gap: 7rem;
  animation: loopText 18s infinite linear;
  padding-right: 7rem;
}
.marquee li {
  font-size: 9rem;
  letter-spacing: 0;
  white-space: nowrap;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-weight: 500;
}
@keyframes loopText {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* =========================================================
   問い合わせ
   ========================================================= */

.contact-band {
  border-top: solid 0.2rem var(--pale-white);
  display: flex;
  flex-direction: column;
  gap: 4.3rem;
  position: relative;
  padding: 8rem var(--px) 6rem;
  margin-top: 14rem;
}

.contact-form {
  margin-top: 6rem;
  background: var(--very-pale-white);
  border: 1px solid var(--pale-white);
  border-radius: 1.2rem;
  padding: 5.6rem 4.4rem;
  scroll-margin-top: 20rem;
}

.form-grid { display: grid; gap: 4rem; }
.form-group { display: flex; flex-direction: column; }
.form-label { font-size: 2.4rem; font-weight: 700; margin-bottom: 1.4rem; }
.form-label .opt { font-weight: 400; color: rgba(255, 255, 255, 0.72); font-size: 2.2rem; }

.form-label .req {
  display: inline-block;
  vertical-align: 0.2em;
  margin-left: 0.8rem;
  padding: 0.3rem 1.2rem 0.4rem;
  border-radius: 0.6rem;
  background: var(--pink);
  color: var(--white);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.form-input,
.form-select,
.form-textarea {
  appearance: none;
  background: rgb(0 17 37 / 0.6);
  border: 1px solid var(--pale-white);
  border-radius: 0.8rem;
  color: var(--white);
  font-family: inherit;
  font-size: 2.8rem;
  line-height: 1.6;
  padding: 2rem 2.2rem;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder,
.form-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 0.3rem rgba(255, 46, 159, 0.25);
}
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2.2rem center;
  background-size: 2rem auto;
  padding-right: 6rem;
}
.form-select option { background: var(--navy); color: var(--white); }
.form-textarea { min-height: 18rem; resize: vertical; }

.form-consent {
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  font-size: 2.4rem;
  line-height: 1.8;
  cursor: pointer;
}
.form-consent input {
  width: 3rem;
  height: 3rem;
  margin-top: 0.6rem;
  accent-color: var(--pink);
  flex-shrink: 0;
  cursor: pointer;
}

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { font-size: 2.4rem; line-height: 1.8; }
.form-status[data-state="error"] { color: #ff9db2; font-weight: 700; }
.form-status[data-state="success"] {
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid var(--pale-white);
  border-radius: 0.8rem;
  padding: 2.4rem 2.6rem;
}

.form-alt {
  margin-top: 3.2rem;
  font-size: 2.3rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}
.form-alt a { text-decoration: underline; }

.notes {
  margin-top: 6rem;
  display: grid;
  gap: 2rem;
  background: rgb(0 17 37 / 0.5);
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  padding: 4rem;
  font-size: 2.2rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
}

/* =========================================================
   フッター
   ========================================================= */

.site-footer-wrap { position: relative; overflow: hidden; z-index: 0; }

.site-footer { padding: 12rem var(--px) 8rem; position: relative; }

.footer-brand { display: flex; flex-direction: column; gap: 2rem; }

.footer-nav {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  grid-template-columns: 22rem;
  margin-top: 9rem;
  gap: 4.4rem 6.6rem;
  font-size: 3rem;
  font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  font-weight: 500;
}

.footer-bottom { margin-top: 12rem; display: grid; gap: 4rem; }

.footer-links { display: grid; gap: 2.4rem; font-size: 2.4rem; }
.footer-links a { color: rgba(255, 255, 255, 0.82); }
.footer-links a:hover { color: var(--white); }

.footer-copy {
  font-size: 2.2rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.72);
  border-top: 1px solid var(--line);
  padding-top: 3.2rem;
}

/* =========================================================
   出現アニメーション
   ========================================================= */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.js-reveal .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition: none !important; }
  .js-reveal .reveal { opacity: 1; transform: none; }
    .display-title span,
  .cta-display span { clip-path: none !important; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   PC（751px 以上）
   ========================================================= */

@media (min-width: 751px) {
  /* PCデザインは1280px基準。751〜1280pxはビューポートに比例して縮小し、
     固定remレイアウトのままタブレット幅でも溢れないようにする */
  html { font-size: calc(100vw / 128); }

  body { font-size: 1.6rem; line-height: 1.9; }

  :root { --px: 4rem; }

  /* ヘッダー */
  .site-header { padding: 1.6rem 17rem 1.6rem 4rem; }
  #top, #service, #value, #simulation, #pricing, #industries, #faq, #contact, #contact-form {
    scroll-margin-top: 10rem;
  }
  .brand { flex-direction: row; gap: 3.6rem; padding-top: 0; }
  .brand-logo { font-size: 3.2rem; }
  .brand-tag { font-size: 1.4rem; padding-top: 1.2rem; }
  .menu-toggle { display: none; }
  .menu-panel, .menu-backdrop { display: none; }

  .global-nav { display: block; padding-top: 0.5rem; }
  .global-nav ul { display: flex; align-items: center; column-gap: 3.4rem; }
  .global-nav a {
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 0;
    color: var(--white);
    background: var(--gradient);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s;
    font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
  }
  .global-nav a:hover {
    background-size: 200% 100%;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  /* セクション見出しをPCで縦組みに（Benesse の rotate 90deg 表現の再現）。
     writing-mode なら transform-origin の位置計算に依存せず画面内に収まる */
  .block { margin-top: 15rem; }

  .block { display: grid; grid-template-columns: 22rem minmax(0, 1fr); }
  .block--right { grid-template-columns: minmax(0, 1fr) 22rem; }
  .bg-orb { grid-area: 1 / 1; } /* absolute なのでグリッド配置の影響は受けないが行を作らせない */

  .sec-head {
    position: sticky;
    top: 10rem;
    align-self: start;
    justify-self: start;
    grid-column: 1;
    grid-row: 1;
    margin-left: 1rem;
    font-size: 6.4rem;
    white-space: nowrap;
    z-index: 1;
    writing-mode: vertical-rl;
  }
  .sec-head .brick {
    width: 4.8rem;
    height: 4.8rem;
    right: auto;
    left: 50%;
    translate: -50% 0;
    top: auto;
    bottom: -7rem;
  }

  .block--right .sec-head { grid-column: 2; justify-self: end; margin-left: 0; margin-right: 1rem; }

  .sec-lead { font-size: 4rem; }
  .sec-body { line-height: 2.5; margin-top: 3.8rem; }
  .note { font-size: 1.3rem; margin-top: 3rem; }

  .btn {
    height: 6rem;
    min-height: 6rem;
    padding: 0.8rem 2.5rem 0.8rem 3.2rem;
    font-size: 1.8rem;
    width: 24rem;
    border: 1px solid #fff;
  }
  .btn .arrow { width: 1em; }

  /* MV */
  .mv { padding-top: 15rem; }
  .mv-side {
    top: 16rem;
    right: 1.6rem;
    font-size: 1.2rem;
    gap: 6.5rem;
  }
  .mv-stage { height: auto; padding: 4rem 0 0; }
  .mv-copy { padding: 0 0 0 4rem; }
  .display-title { font-size: 11rem; }
  .mv-lead { font-size: 3.6rem; line-height: 1.5; margin-top: 3.6rem; }
  .mv-sub { font-size: 1.7rem; margin-top: 2rem; }
  .mv-facts { gap: 1.2rem; margin-top: 3.2rem; }
  .mv-facts li { font-size: 1.5rem; padding: 1rem 1.8rem; }
  .mv-actions { flex-direction: row; gap: 1.6rem; margin-top: 4rem; }
  .mv-note { font-size: 1.3rem; margin-top: 2.4rem; max-width: 52rem; }

  /* 見出し列はグリッドで確保するため、内側の余白は不要 */
  .block-inner { grid-column: 2; grid-row: 1; min-width: 0; }
  .block--right .block-inner { grid-column: 1; grid-row: 1; }

  .block-body { margin-top: 3.8rem; }

  .figure-card { padding: 1.8rem; }
  .figure-card figcaption { font-size: 1.2rem; margin-top: 1.4rem; }
  .figure-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

  .benefit-list { gap: 1.4rem; margin-top: 3.8rem; max-width: 76rem; }
  .benefit-list li { font-size: 1.7rem; padding: 2rem 2.4rem 2rem 5.4rem; }
  .benefit-list li::before { left: 2.4rem; top: 2.6rem; width: 1.2rem; height: 1.2rem; }

  .table-scroll { margin-top: 4.4rem; }
  .compare-table { min-width: 64rem; }
  .compare-table caption { font-size: 1.6rem; padding: 2.2rem 2.4rem 1.8rem; }
  .compare-table th,
  .compare-table td { font-size: 1.5rem; padding: 2rem 2.4rem; }
  .compare-table thead th { font-size: 1.4rem; }

  .calc-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 4rem; }
  .calc-card { padding: 3.6rem; }
  .calc-label { font-size: 1.4rem; }
  .calc-num { font-size: 3.4rem; margin-top: 1.2rem; }
  .calc-card ul { font-size: 1.5rem; gap: 0.9rem; margin-top: 2rem; }
  .calc-card li::before { top: 1.2rem; width: 0.8rem; }

  .assump { padding: 3rem 3.2rem; margin-top: 2rem; }
  .assump h3 { font-size: 1.6rem; margin-bottom: 1.6rem; }
  .assump ul { gap: 1rem; }
  .assump li { font-size: 1.5rem; padding-left: 1.8rem; }
  .assump li::before { top: 1.4rem; width: 0.8rem; }

  .price-card { padding: 4.4rem 4.8rem; max-width: 86rem; margin-top: 3.6rem; }
  .price-label { font-size: 1.4rem; }
  .price-main { font-size: 5rem; }
  .price-sub { font-size: 1.5rem; }
  .price-card ul { gap: 1.2rem; margin-top: 2.6rem; }
  .price-card li { font-size: 1.6rem; padding-left: 1.8rem; }
  .price-card li::before { top: 1.5rem; width: 0.8rem; }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 4.4rem; }
  .step { padding: 3rem 2.8rem; }
  .step-num { font-size: 1.2rem; }
  .step-title { font-size: 1.9rem; }
  .step p { font-size: 1.5rem; line-height: 1.8; }

  .tags { gap: 1.9rem 1.8rem; margin-top: 3.4rem; }
  .tags li { font-size: 1.2rem; padding: 0.6rem 0.9rem 0.5rem; gap: 0.6rem; border-radius: 0.4rem; }
  .tags li::before { width: 0.8rem; }

  .faq-list { margin-top: 3.6rem; }
  details summary { padding: 2.4rem 0; font-size: 1.8rem; }
  .faq-icon { width: 2.8rem; height: 2.8rem; font-size: 1.8rem; }
  .faq-body { font-size: 1.5rem; padding-bottom: 2.4rem; }

  /* CTA */
  .cta-section { margin-top: 24rem; padding-bottom: 0; background: var(--black); }
  .cta-section::before { top: 4.2rem; aspect-ratio: 1440 / 744; }
  .cta-inner { padding-left: 8rem; }
  .cta-display { font-size: 10rem; margin-top: 11rem; }
  .cta-content { margin: 4.8rem auto 0; max-width: 60rem; }
  .cta-content p { font-size: 1.8rem; line-height: 2.2; }
  .marquee { margin-top: 20rem; }
  .marquee li { font-size: 10rem; }

  /* 問い合わせ */
  .contact-band {
    flex-direction: row;
    align-items: center;
    padding: 11.2rem var(--px) 6rem;
    border-top: solid 1px var(--pale-white);
    margin-top: 0;
  }
  .contact-band .sec-head {
    position: relative;
    rotate: none;
    left: auto;
    top: auto;
    transform-origin: initial;
  }
  .contact-band .sec-head .brick { display: none; }
  .contact-band p { margin-left: auto; margin-right: 7.8rem; white-space: nowrap; line-height: 2.5; }

  .contact-body { padding: 0 var(--px) 8rem; }
  .contact-form { padding: 4.4rem 4.8rem; max-width: 82rem; margin: 4rem auto 0; }
  .form-grid { grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
  .form-group.full { grid-column: 1 / -1; }
  .form-label { font-size: 1.4rem; margin-bottom: 0.8rem; }
  .form-label .opt { font-size: 1.3rem; }
  .form-label .req { font-size: 1.1rem; padding: 0.2rem 0.8rem 0.3rem; margin-left: 0.6rem; border-radius: 0.4rem; }
  .form-input,
  .form-select,
  .form-textarea { font-size: 1.6rem; padding: 1.2rem 1.4rem; }
  .form-textarea { min-height: 11rem; }
  .form-consent { grid-column: 1 / -1; font-size: 1.4rem; gap: 1.2rem; }
  .form-consent input { width: 1.8rem; height: 1.8rem; margin-top: 0.3rem; }
  .form-status { grid-column: 1 / -1; font-size: 1.4rem; }
  .form-submit { grid-column: 1 / -1; }
  .form-alt { font-size: 1.3rem; margin-top: 2rem; }
  .notes { padding: 3rem 3.2rem; font-size: 1.2rem; gap: 1.2rem; margin: 4rem auto 0; max-width: 82rem; }

  /* フッター */
  .site-footer { padding: 10.2rem 9.6rem 6.5rem var(--px); }
  .footer-top { display: flex; justify-content: space-between; column-gap: 2rem; padding-right: 10rem; }
  .footer-brand { flex-direction: row; align-items: center; gap: 4.8rem; }
  .footer-nav {
    grid-template-columns: 14rem;
    gap: 2.7rem 2rem;
    margin-top: 0;
    font-size: 1.8rem;
  }
  .footer-bottom { margin-top: 7rem; gap: 3.4rem; }
  .footer-links { grid-auto-flow: column; justify-content: start; column-gap: 3rem; font-size: 1.4rem; }
  .footer-copy { font-size: 1.2rem; padding-top: 2.4rem; }

  .bg-orb--top { width: 66.9rem; right: -24rem; }
  .bg-orb--mid { width: 101.2rem; }
  .bg-orb--foot { width: 112.9rem; }
}

/* 1280px 以上は等倍（1rem = 10px）で固定 */
@media (min-width: 1281px) {
  html { font-size: 10px; }
}

/* 大きめのPC */
@media (min-width: 1441px) {
  .mv-copy { padding-left: 4rem; }
}