@charset "UTF-8";
/* =========================================================
   Design Tokens（Figma Variables の実値）
   ========================================================= */
:root {
  /* Gray */
  --gray-0: #ffffff;
  --gray-400: #999999;
  /* Brand（ブルー系） */
  --brand-10: #f6fbf9;
  --brand-50: #f4f8ff;
  --brand-100: #e8f2fe;
  --brand-200: #d1e4fd;
  --brand-300: #aecdfb;
  --brand-400: #8ab5f8;
  --brand-500: #679df2;
  --brand-600: #4b82d8;
  --brand-700: #3669b8;
  --brand-800: #245196; /* Primary */
  --brand-900: #153a74;
  /* Sub（紫紺系） */
  --sub-400: #8987c8;
  --sub-800: #2b286b; /* Sub Primary */
  --sub-900: #181642;
  /* Layout */
  --container: 1080px;
}

/* ボタン矢印の「>」シェブロン（round linejoin/linecap で先端も脚先も丸い）。
   mask + background-color:currentColor で各ボタンの文字色に追従 */
/* 1440 デザイン基準で 100vw スケール（上限なし） */
/* SP（375 基準）で 100vw スケール。背景画像に重なる KV ヒーローのみで使用。他は固定 px で書く */
/* =========================================================
   Base
   ========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* ナビのスムーススクロール */
}

html,
body {
  margin: 0;
  padding: 0;
}

/* SP専用の改行（PCでは無効） */
.br-sp {
  display: none;
}

/* PC専用の改行（SPでは無効） */
.br-pc {
  display: inline;
}

/* Safari が電話番号を自動リンク化した場合の保険（meta format-detection と併用）。
   リンク色・下線が付かないよう親の見た目を維持する */
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

/* 料金表の行ラベル：PCは共通ラベル列を使うので非表示。SPで各行にインライン表示 */
.pricing-plan__rowlabel {
  display: none;
}

button {
  background-color: transparent;
  padding: 0;
  border: none;
}

/* アンカー到達位置を固定ヘッダー分オフセット */
section[id] {
  scroll-margin-top: 64px;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  color: var(--sub-800);
  background: var(--gray-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto; /* width/height属性でCLSを防ぐ際に、縮小時の縦横比崩れを防止 */
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

.page {
  position: relative; /* .kv-bridge(movie)の絶対配置基準 */
  margin-inline: auto;
  overflow-x: hidden; /* 装飾(140%幅など)のはみ出しをクリップ */
}

/* PCでは movie を KV に重ねるため箱を消す（子は .page 基準で絶対配置） */
.kv-bridge {
  display: contents;
}

/* =========================================================
   ヘッダー（固定ナビ）
   ========================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: #e7f0ff;
  box-shadow: 0 4px 10px rgba(43, 40, 107, 0.1);
}

.header__logo {
  display: block;
  flex-shrink: 0;
}

/* ハンバーガー（PCでは非表示） */
.header__menu {
  display: none;
}

.header__logo img {
  width: 188px;
  height: 36px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 50px;
}

.header__links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.header__link {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--sub-900);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.header__link:hover {
  opacity: 0.6;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 電話番号はSPドロワー内のみ（PCヘッダーには出さない） */
.header__tel {
  display: none;
}

.header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  padding: 4px 32px;
  border-radius: 44px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.header__btn:hover {
  opacity: 0.6;
}
.header__btn::after {
  /* 右向き矢印（>シェブロン）。currentColor で各ボタンの文字色に追従 */
  content: "";
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.header__btn--login {
  background: var(--gray-0);
  color: var(--sub-800);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.header__btn--contact {
  background: var(--sub-800);
  color: var(--gray-0);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

/* =========================================================
   共通: セクション見出し（引用符付き）
   ========================================================= */
.section-heading {
  margin: 0;
  text-align: center;
}

.section-heading__inner {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0; /* ロゴ〜接尾辞の間隔はロゴ側 margin で確保（接尾辞分割時に隙間を作らない） */
}

/* 左右の引用符（左右で色が異なるため別アセット） */
.section-heading__inner::before,
.section-heading__inner::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 31px;
  height: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.section-heading__inner::before {
  left: -44px;
  background-image: url("../images/quote.svg"); /* 開き引用符 #679df2 */
}

.section-heading__inner::after {
  right: -44px;
  background-image: url("../images/quote-right.svg"); /* 閉じ引用符 #8987c8 */
}

.section-heading__logo {
  width: 240px;
  height: auto;
  margin-right: 8px;
}

.section-heading__suffix {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  color: var(--sub-800); /* 既定（明色セクション） */
}
.section-heading__suffix.--white {
  color: #fff;
}

/* 濃色セクション（S3 .cando）は見出しを白に */
.cando .section-heading__suffix {
  color: var(--gray-0);
}

/* =========================================================
   KV
   ========================================================= */
.kv {
  position: relative;
  overflow: hidden; /* 背景のズームアニメーションがはみ出さないように */
  background: var(--sub-800);
}

.kv__bg {
  width: 100%;
}

/* --- 見出し・リード --- */
.kv__copy {
  position: absolute;
  z-index: 1;
  left: calc(95 / 1440 * 100vw);
  top: calc(51 / 1440 * 100vw);
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: calc(48.788 / 1440 * 100vw);
  line-height: 1.425;
  letter-spacing: 0.1em;
  color: var(--sub-800);
}

.kv__copy-line {
  display: block;
}

/* 1行目「もしも」で：Figma 実測のトラッキング（やや詰め） */
.kv__copy-line--a {
  letter-spacing: 0.06em;
}

/* 1行目末尾「で」：Figma で「もしも」側へ詰めて配置 */
.kv__copy-de {
  margin-left: calc(-24 / 1440 * 100vw);
}

/* 2行目：Figma で約27.7px インデント（「もしも」の鉤括弧分） */
.kv__copy-line--b {
  margin-left: calc(27.69 / 1440 * 100vw);
}

.kv__copy-accent {
  color: var(--brand-600);
}

.kv__lead {
  position: absolute;
  z-index: 1;
  left: calc(123 / 1440 * 100vw);
  top: calc(204 / 1440 * 100vw);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: calc(16 / 1440 * 100vw);
  line-height: 1.8;
  letter-spacing: 0.1em;
  color: var(--sub-800);
}

/* --- 動画（埋め込み予定）--- */
.kv-movie {
  position: absolute;
  z-index: 1;
  left: calc(123 / 1440 * 100vw);
  top: calc(298 / 1440 * 100vw);
  width: calc(408 / 1440 * 100vw);
  height: calc(103 / 1440 * 100vw);
}

/* 横長の青カード（サムネ＋テキスト＋丸再生ボタン）。カード全体がモーダル起動ボタン */
.kv-movie__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: calc(12 / 1440 * 100vw) calc(24 / 1440 * 100vw) calc(12 / 1440 * 100vw) calc(12 / 1440 * 100vw);
  border: 0;
  border-radius: calc(12 / 1440 * 100vw);
  background: var(--brand-600);
  text-align: left;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.kv-movie__card:hover {
  opacity: 0.85;
}

.kv-movie__body {
  display: flex;
  align-items: flex-start;
  gap: calc(16 / 1440 * 100vw);
}

.kv-movie__thumb {
  flex-shrink: 0;
  width: calc(142 / 1440 * 100vw);
  height: calc(79 / 1440 * 100vw);
  border-radius: calc(8 / 1440 * 100vw);
  overflow: hidden;
}

.kv-movie__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.kv-movie__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(6 / 1440 * 100vw);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: var(--gray-0);
  white-space: nowrap;
}

.kv-movie__label {
  font-size: calc(12 / 1440 * 100vw);
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.kv-movie__title-a {
  display: block;
  font-size: calc(22 / 1440 * 100vw);
  line-height: 1.1;
  letter-spacing: 0.0909em;
}

.kv-movie__title-b {
  display: block;
  font-size: calc(24 / 1440 * 100vw);
  line-height: 1.1;
}

.kv-movie__play {
  flex-shrink: 0;
  width: calc(40 / 1440 * 100vw);
  height: calc(40 / 1440 * 100vw);
}

.kv-movie__play img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- CTA ボタン --- */
.kv__actions {
  position: absolute;
  z-index: 1;
  left: calc(121 / 1440 * 100vw);
  top: calc(431 / 1440 * 100vw);
  display: flex;
  gap: calc(16 / 1440 * 100vw);
}

.kv-btn {
  display: inline-flex;
  align-items: center;
  gap: calc(12 / 1440 * 100vw);
  padding: calc(10 / 1440 * 100vw) calc(28 / 1440 * 100vw);
  border-radius: calc(80 / 1440 * 100vw);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: calc(14 / 1440 * 100vw);
  line-height: 2;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 0 calc(6 / 1440 * 100vw) rgba(0, 0, 0, 0.12);
  transition: opacity 0.3s ease;
}
.kv-btn:hover {
  opacity: 0.6;
}
.kv-btn::after {
  /* 右向きシェブロン（丸い角）。currentColor 追従 */
  content: "";
  width: calc(7 / 1440 * 100vw);
  height: calc(10 / 1440 * 100vw);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.kv-btn--primary {
  background: var(--sub-800);
  color: var(--gray-0);
}
.kv-btn--secondary {
  background: var(--gray-0);
  color: var(--sub-800);
}

/* =========================================================
   S1: SonaEverにできること
   ========================================================= */
.cando {
  position: relative;
  z-index: 1; /* .kv の下端の円より背面 */
  overflow: hidden; /* 140%幅の::afterを中央だけ見せる */
  /* 下端 --arc-depth だけ「弧の外側＝下に続く features の色」、それより上は弧と同色。
     実機で ::after が1px下にズレて描かれても地の色が線として出ない（青グラデは::afterへ） */
  background: linear-gradient(to top, #f6faff var(--arc-depth), var(--sub-800) var(--arc-depth));
  padding-top: 100px;
  padding-bottom: 189px;
}

.kv__deco {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}
.kv__deco img {
  width: 100%;
}

/* 下端アークの深さ（縦半径）。SPでは浅くする。地の色グラデの境目とも共有する */
.cando,
.features,
.service,
.voice,
.pricing {
  --arc-depth: 300px;
}

/* 青グラデ全面＋下端カーブ。140%幅で端フックを回避（青はこの1枚だけ＝継ぎ目なし） */
.cando::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 140%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--sub-800) 0%, var(--brand-700) 100%);
  border-bottom-left-radius: 50% var(--arc-depth);
  border-bottom-right-radius: 50% var(--arc-depth);
  z-index: 0;
}

/* features / service / voice の下端アーク（単色版・candoと同じ140%幅/深さ--arc-depth） */
.features::after,
.service::after,
.voice::after,
.pricing::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 140%;
  transform: translateX(-50%);
  border-bottom-left-radius: 50% var(--arc-depth);
  border-bottom-right-radius: 50% var(--arc-depth);
  z-index: 0;
}

.features::after {
  background: #f6faff;
} /* 自色。次=service も明色なので弧は不可視 */
.service::after {
  background: #f6faff;
} /* 自色。次=voice 暗色へ膨らむ＝可視 */
.voice::after {
  background: var(--sub-800);
} /* 自色。次=faq 明色へ膨らむ＝可視 */
.pricing::after {
  background: var(--sub-800);
}

/* 装飾の弧線（Subtract リングを SVG 化） */
.cando::before {
  content: "";
  position: absolute;
  z-index: 1; /* 青(::after)の上 */
  top: 71px;
  width: 100%;
  height: 100%;
  background: url("../images/cando-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.cando__inner {
  position: relative;
  z-index: 2; /* 青・弧より前面 */
  width: min(97.22%, var(--container)); /* max1080 / 左右20px（40px÷1440）を%化。狭めると縮んで折り返す */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px; /* お悩みブロック ↔ にできることブロック */
}

/* 区切り線（Figma Vector 214: 中央白→両端透明） */
.cando__divider {
  width: 100%;
  height: 3px;
  margin: 0; /* 上下の余白は .about__group の gap で確保 */
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0) 100%);
}

/* =========================================================
   S3-1: お悩み
   ========================================================= */
.worries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.worries__lead {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--gray-0);
  text-align: center;
}

/* 上段3枚・下段2枚（中央寄せ）。カードは固定344px→2段目もはみ出さず中央に */
.worries__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.worry-card {
  width: 344px;
  display: flex;
  flex-direction: column;
  align-items: stretch; /* タイトル/本文を全幅に（テキストの折り返しを効かせる） */
  background: var(--gray-0);
  border-radius: 24px;
  padding: 31px 20px 24px;
  box-shadow: 4px 4px 8px rgba(43, 40, 107, 0.15);
}

.worry-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.worry-card__icon img {
  width: auto;
  height: auto;
}

.worry-card__title {
  width: 100%;
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--brand-600);
  text-align: center;
}

.worry-card__body {
  width: 100%;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sub-800);
}

/* まとめバナー（Figma: brand-600 / 712px） */
.worries__banner {
  width: 712px;
  max-width: 100%;
  margin: 0;
  padding: 20px 40px;
  border-radius: 16px;
  background: var(--brand-600);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--gray-0);
  text-align: center;
}

/* 「」まわりの詰め（Figma tracking -7px 相当） */
.worries__kern {
  letter-spacing: -0.25em;
}

/* =========================================================
   S3-2: SonaEverにできること
   ========================================================= */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
}

.about__lead {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--gray-0);
  text-align: center;
}

.about__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 46px;
  width: 100%;
}

/* --- 価値カード --- */
.values__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.value-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
  padding: 24px;
  background: var(--gray-0);
  border-radius: 24px;
  overflow: hidden;
}

/* 偶数カードは写真を左に（DOM は全カード body→photo 統一、表示だけ反転） */
.value-card:nth-child(even) {
  flex-direction: row-reverse;
}

.value-card__body {
  flex: 1 0 0; /* 写真左/右どちらでもテキストは可変幅で折り返す */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding-top: 16px;
}

.value-card__label {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--brand-800);
}

.value-card__title {
  margin: 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--brand-600);
}

.value-card__text {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--sub-800);
}

.value-card__photo {
  flex-shrink: 0;
  width: 320px;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
}

.value-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 番号 01–05 は画像（Futura は Adobe Fonts ライセンスのため SVG 化。opacity 0.2 は SVG に baked） */
.value-card__num {
  position: absolute;
  bottom: 65px;
  left: 82.5px; /* 中心を左から82.5px（奇数＝テキスト左） */
  transform: translate(-50%, 100%); /* カード下方に沈める（overflow:hidden で下端クリップ） */
  pointer-events: none;
}

/* 偶数＝テキスト右。右基準で固定し、幅が狭まっても消えないように */
.value-card:nth-child(even) .value-card__num {
  left: auto;
  right: 87px; /* 中心を右から87px（= 1000 - 913） */
  transform: translate(50%, 100%);
}

/* =========================================================
   S3-3: 安心の実績と強み
   ========================================================= */
.strengths {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.strengths__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.strengths__logo {
  width: 175px;
  height: auto;
}

.strengths__title {
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--gray-0);
}

.strengths__list {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 1000px;
}

.strength-card {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 16px 33px;
  background: var(--gray-0);
  border-radius: 24px;
  overflow: hidden;
}

/* 装飾の弧（左上に淡く。カードで clip） */
.strength-card__arc {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.strength-card__arc img {
  width: 100%;
  height: auto;
}

.strength-card__head {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.0625em;
  color: var(--sub-800);
  text-align: center;
}

.strength-card__accent {
  font-size: 24px;
  color: var(--brand-600);
}

.strength-card__text {
  position: relative;
  z-index: 1;
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--sub-800);
}

/* =========================================================
   共通: ボタン
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  border-radius: 80px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25);
}
.btn:hover {
  opacity: 0.6;
}
.btn::after {
  /* 右向き矢印（>シェブロン）。currentColor で各ボタンの文字色に追従 */
  content: "";
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.btn--primary {
  background: var(--brand-500);
  color: var(--gray-0);
}
.btn--secondary {
  background: var(--gray-0);
  color: var(--sub-800);
}

/* =========================================================
   下部追従 CV バー（KV通過後に表示）
   ========================================================= */
.cv-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 90; /* ヘッダー(100)より下・モーダルより下 */
  display: flex;
  flex-wrap: wrap; /* .cv-bar__notice を1行目に単独で置くため */
  align-items: center;
  justify-content: center;
  /* row-gap は0。flex-wrap 下では gap が行間にも効くため、
     行間は .cv-bar__notice の margin-bottom だけで決める */
  gap: 0 56px;
  width: 100%;
  padding: 16px;
  background: var(--gray-0);
  box-shadow: 0 -4px 10px rgba(43, 40, 107, 0.15);
  /* 初期は画面外下に隠す。KV通過で is-visible を付与してスライドイン */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s;
}

.cv-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* CVバー内の告知行（時限）。9/1以降は「正式リリースしました」＋導入支援プログラムへ差し替える。
   → Marketing/04_SL/03_SonaEver/01_Strategy/ソナエバ_PR配信設計_2026.md §6
   .cv-bar__text はSPで display:none になるため、告知は独立した要素として持つ */
.cv-bar__notice {
  width: 100%; /* flex-wrap 下で1行目を単独占有する */
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 2px 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--sub-800);
}

.cv-bar__notice-date {
  color: var(--brand-600);
}

.cv-bar__text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  color: var(--sub-800);
  white-space: nowrap;
}

.cv-bar__actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* PC は3つ横並びで見た目は同じ。SP で列方向にしたときに
   .cv-bar__actions の幅が「ボタン行の幅」になり、電話ボタンがそこに揃う */
.cv-bar__buttons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cv-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 210px; /* 3ボタン共通の実測サイズ */
  height: 56px;
  padding: 8px 28px;
  border-radius: 80px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.3s ease;
}
.cv-bar__btn:hover {
  opacity: 0.6;
}
.cv-bar__btn::after {
  /* 右向き矢印（.btn と同じ chevron・currentColor 追従） */
  content: "";
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.cv-bar__btn--primary {
  background: var(--sub-800);
  color: var(--gray-0);
}
.cv-bar__btn--secondary {
  background: var(--brand-200);
  color: var(--sub-800);
}

/* 電話番号（枠線のみ・矢印なし）。表示のみ・リンクなし */
.cv-bar__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 210px;
  height: 56px;
  padding: 8px 20px;
  border: 2px solid var(--sub-800);
  border-radius: 79px;
  color: var(--sub-800);
}

.cv-bar__tel-icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon-tel.svg") no-repeat center/contain;
  mask: url("../images/icon-tel.svg") no-repeat center/contain;
}

.cv-bar__tel-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cv-bar__tel-num {
  color: var(--sub-800-Primary);
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cv-bar__tel-hours {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  white-space: nowrap;
}

/* =========================================================
   共通: CTA バナー
   ========================================================= */
.cta-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
  padding: 60px 24px;
  border-radius: 24px;
  background: linear-gradient(102.74deg, var(--sub-800) 0%, var(--brand-700) 100%);
}

.cta-banner__arc {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
}

.cta-banner__heading {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--gray-0);
  white-space: nowrap;
}

/* 引用符（前セクションと共通の quote アセットを流用） */
.cta-banner__heading::before,
.cta-banner__heading::after {
  content: "";
  position: absolute;
  width: 21px;
  height: 17px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cta-banner__heading::before {
  top: 10px;
  left: -23px;
  background-image: url("../images/quote.svg");
}

.cta-banner__heading::after {
  top: 65px;
  right: 1px;
  background-image: url("../images/quote-right.svg");
}

.cta-banner__body {
  position: relative;
  z-index: 1;
  flex: 0 1 653px; /* 実測653px・狭幅では縮小 */
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cta-banner__desc {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--gray-0);
}

.cta-banner__actions {
  display: flex;
  gap: 16px;
}

/* 電話番号ボックス（白の枠線）。表示のみ・リンクなし */
.cta-banner__tel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 13px;
  width: 410px;
  padding: 16px 27px;
  border: 1px solid var(--gray-0);
  border-radius: 12px;
  color: var(--gray-0);
}

.cta-banner__tel-label {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0.6px;
}

.cta-banner__tel-hours {
  font-weight: 500;
  font-size: 12px;
}

.cta-banner__tel-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cta-banner__tel-icon {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("../images/icon-tel.svg") no-repeat center/contain;
  mask: url("../images/icon-tel.svg") no-repeat center/contain;
}

.cta-banner__tel-num {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* =========================================================
   S2: SonaEverの機能
   ========================================================= */
.features {
  position: relative;
  /* 下端 --arc-depth だけ弧の外側＝下の pricing 色、それより上は弧(::after)と同色 */
  background: linear-gradient(to top, var(--sub-800) var(--arc-depth), #f6faff var(--arc-depth));
  padding: 120px 0;
}

/* 装飾の弧（右上・light-arc は反転済みの1440キャンバス） */
.features::before {
  content: "";
  position: absolute;
  z-index: 1; /* 弧(::after)の上・中身より下 */
  top: 62px;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/features-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.features__inner {
  position: relative;
  z-index: 2; /* 弧(::after 0)・light-arc(::before 1)より前面 */
  width: min(97.22%, var(--container)); /* 左右20px（40px÷1440）を%化 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.features__dashboard {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.features__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.features__subhead {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--sub-800);
}

.features__subhead-accent {
  color: var(--brand-600);
}

.features__lead {
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--sub-800);
}

/* --- 大ダッシュボード（積層フレーム=CSS）Figma: movie 772×412 / node 5447:26723 ---
   ずらし量は横6px・縦12pxで非対称。screenもレイヤーとは別サイズ・別radiusなので実測値で指定する */
.dashboard {
  position: relative;
  width: 772px;
  max-width: 100%;
  height: 412px;
}

.dashboard__layer {
  position: absolute;
  width: calc(100% - 6px); /* 766 / 772 */
  height: calc(100% - 12px); /* 400 / 412 */
  border-radius: 28px;
}
.dashboard__layer--back {
  top: 12px;
  left: 6px;
  background: #504d9e;
}
.dashboard__layer--mid {
  top: 0;
  left: 0;
  background: var(--brand-600);
}

.dashboard__screen {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(100% - 12px); /* 760 / 772 */
  height: calc(100% - 12px); /* 400 / 412 */
  padding: 0;
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  /* 裏に影用の青レイヤー(--mid)があるため opacity だと青が透ける。brightnessで明るくする */
  transition: filter 0.3s ease;
}
.dashboard__screen:hover {
  filter: brightness(1.08);
}

.dashboard__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dashboard__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}

.dashboard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  pointer-events: none;
}

.dashboard__play img {
  width: 100%;
  height: 100%;
}

/* --- 機能カード（3+2 中央寄せ） --- */
.features__list {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 24px;
  row-gap: 40px;
  width: 100%;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 344px;
}

.feature-card__thumb {
  position: relative;
  width: 344px;
  max-width: 100%;
  height: 220px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--brand-200);
}

.feature-card__arc {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.feature-card__num {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 28px;
}

.feature-card__shot {
  position: absolute;
  top: calc(50% + 14.5px);
  left: calc(50% + 22px);
  transform: translate(-50%, -50%);
  width: 340px;
  height: 191px;
  border-radius: 4px;
  object-fit: contain;
  /* span でラップした場合（--csv の06）は中の img を敷き詰める */
}
.feature-card__shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
.feature-card__shot.--short {
  width: 274px;
  top: 50%;
  left: 50%;
}
.feature-card__shot.--csv {
  /* position は base の absolute のまま（::after の基準）。span なので ::after が描画される（img は不可） */
}
.feature-card__shot.--csv::after {
  position: absolute;
  content: "";
  width: 70px;
  height: 70px;
  top: -2px;
  right: -15px;
  background: transparent url(../images/csv.svg) no-repeat center center/contain;
}

.feature-card__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feature-card__title {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--brand-600);
}

.feature-card__body {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sub-800);
}

/* CTA バナーは機能セクション下部にも配置 */
.features__inner > .cta-banner {
  margin-top: 80px;
}

/* =========================================================
   S3: 料金プラン
   ========================================================= */
.pricing {
  /* 下端 --arc-depth だけ弧の外側＝下の service 色、それより上は弧(::after)と同色 */
  background: linear-gradient(to top, #f6faff var(--arc-depth), var(--sub-800) var(--arc-depth));
  position: relative;
  padding: 130px 0 180px;
}

.pricing::before {
  content: "";
  position: absolute;
  z-index: 1; /* 青(::after)の上 */
  top: 146px;
  width: 100%;
  height: 100%;
  background: url("../images/pricing-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.pricing__inner {
  position: relative;
  z-index: 1;
  width: min(97.22%, var(--container)); /* 左右20px（40px÷1440）を%化 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pricing__lead {
  margin: 40px 0 24px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  text-align: center;
  color: var(--gray-0);
}
.pricing__lead span {
  color: var(--brand-500);
  font-size: 32px;
}

.pricing__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* ---- 比較表 ---- */
.pricing-table-wrap {
  width: 100%;
  background: #f7faff;
  border-radius: 24px;
  padding: 40px 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pricing-table {
  width: 100%;
  display: flex;
  align-items: flex-end; /* ラベル列を下揃え＝データ行に合わせる */
}

.pricing-table__labels {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.pricing-table__label {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px 4px 0;
  background: var(--brand-300);
  color: var(--brand-800);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--brand-50);
}
.pricing-table__label:first-child {
  border-radius: 12px 0 0 0;
}
.pricing-table__label:last-child {
  border-radius: 0 0 0 12px;
  border-bottom: none;
}

.pricing-table__plans {
  display: flex;
  flex: 1; /* ラベル列(160px)を除いた残り幅を埋める＝固定幅をやめて可変に */
  min-width: 0;
}

.pricing-plan {
  flex: 1; /* 3プランで等分。狭い画面(〜1025px)でも縮んではみ出さない */
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pricing-plan__name {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 10px;
  background: #e1eeff;
  color: var(--brand-800);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
}

.pricing-plan__price,
.pricing-plan__spec {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: #fff;
  border-bottom: 2px solid #eaeaea;
  color: var(--brand-800);
  text-align: center;
  white-space: nowrap;
}
.pricing-plan__price:last-child,
.pricing-plan__spec:last-child {
  border-bottom: none;
}

/* num（金額）とtax（税別）を1まとまりにしてベースライン＝下端で揃える */
.pricing-plan__amount {
  display: inline-flex;
  align-items: baseline;
}

.pricing-plan__num {
  font-size: 18px;
  font-weight: 500;
}

.pricing-plan__tax {
  font-size: 12px;
  font-weight: 500;
}

.pricing-plan__spec {
  font-size: 16px;
  font-weight: 500;
}

/* 角丸（プラン3列のブロック端） */
.pricing-plan:first-child .pricing-plan__name {
  border-radius: 12px 0 0 0;
}

.pricing-plan:last-child .pricing-plan__name {
  border-radius: 0 12px 0 0;
}

.pricing-plan:last-child .pricing-plan__spec:last-child {
  border-radius: 0 0 12px 0;
}

/* おすすめ列 */
.pricing-plan.--recommend .pricing-plan__name {
  position: relative;
  background: var(--brand-600);
  color: var(--gray-0);
}
.pricing-plan.--recommend .pricing-plan__price,
.pricing-plan.--recommend .pricing-plan__spec {
  background: var(--brand-200);
  border-bottom-color: var(--gray-0);
}

.pricing-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 28px 8px;
  border-radius: 39px;
  background: var(--brand-500);
  color: var(--gray-0);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.pricing__note {
  display: flex;
  align-self: flex-start; /* pricing-tableと同じ左端に揃える（wrapのalign-items:center解除） */
  align-items: flex-start;
  gap: 4px;
  color: var(--brand-800);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.05em;
}

/* ※は折り返さず先頭固定。本文は独立カラムで折り返し（※下に回り込ませない） */
.pricing__note-mark {
  flex-shrink: 0;
}

/* ---- 都市部限定プラン ---- */
.pricing-city {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: 24px;
  padding: 40px 60px;
  background: linear-gradient(105.67deg, var(--brand-200) 0%, var(--brand-300) 100%);
  display: flex;
  justify-content: center;
}

.pricing-city__deco {
  position: absolute;
  top: -145.81px;
  left: 184.56px;
  width: 1082.685px;
  height: 1030.75px;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.pricing-city__deco img {
  width: 848.187px;
  height: 739.366px;
  transform: rotate(-154.72deg) scaleY(-1);
}

.pricing-city__watermark {
  position: absolute;
  top: 0;
  right: 0;
  width: 210px; /* Futuraを画像化（images/pricing-point.svg・実寸210x58） */
  opacity: 0.5;
  mix-blend-mode: soft-light; /* SVG内部でなく要素側にかけて背景写真とブレンドさせる */
  z-index: 2; /* body(1)より前面に出し、画像の上でsoft-lightブレンドさせる */
  pointer-events: none;
}
.pricing-city__watermark img {
  display: block;
  width: 100%;
  height: auto;
}

.pricing-city__body {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.pricing-city__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pricing-city__heads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pricing-city__head {
  color: var(--brand-900);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}

.pricing-city__lead {
  color: var(--brand-600);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

.pricing-city__desc {
  width: 100%;
  color: var(--sub-800);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.pricing-city__points {
  display: flex;
  gap: 16px;
}

.pricing-city__point {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  background: var(--brand-10);
  color: var(--brand-600);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.8;
  white-space: nowrap;
}
.pricing-city__point::before {
  content: "";
  flex-shrink: 0;
  width: 16.32px;
  height: 12.45px;
  background: transparent url(../images/check.svg) no-repeat center center/contain;
}

.pricing-city__images {
  position: relative;
  flex-shrink: 0;
  width: 378px;
}
.pricing-city__images img {
  width: 100%;
}

/* =========================================================
   S4: サービスの流れ
   ========================================================= */
.service {
  position: relative;
  overflow: hidden;
  /* 下端 --arc-depth だけ弧の外側＝下の voice 色、それより上は弧(::after)と同色 */
  background: linear-gradient(to top, var(--sub-800) var(--arc-depth), #f6faff var(--arc-depth));
  padding: 120px 0;
}

/* 装飾の弧（右上・light-arc は反転済みの1440キャンバス） */
.service::before {
  content: "";
  position: absolute;
  z-index: 1; /* 弧(::after)の上・中身より下 */
  top: 116px;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/service-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.service__inner {
  position: relative;
  z-index: 2; /* 弧(::after 0)・light-arc(::before 1)より前面 */
  width: min(97.22%, var(--container)); /* 左右20px（40px÷1440）を%化 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service__subhead {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.service__list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-bottom: 80px;
}

.service-card {
  position: relative; /* 矢印::after の基準。clipはしない（矢印を切らない） */
}
.service-card::after {
  position: absolute;
  content: "";
  width: 38px;
  height: 21px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent url(../images/service-polygon.svg) no-repeat center center/contain;
  bottom: -37px;
}
.service-card:last-child::after {
  content: none;
}

/* clip層: ここで overflow:hidden → num はカード角でクリップ、矢印(::after)は外なので残る */
.service-card__body {
  position: relative; /* num(absolute)の基準 */
  overflow: hidden;
  border-radius: 20px;
  background-color: #fff;
  padding: 28px 40px;
  display: flex;
  gap: 60px;
}

.service-card__num {
  height: 49px;
  position: absolute;
  right: 18px;
  bottom: 0;
}

.service-card__num img {
  height: 100%;
  width: auto;
  display: block;
}

.service-card__icon {
  width: 120px;
  flex-shrink: 0;
}

.service-card__contents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.service-card__head {
  color: var(--brand-600);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1; /* 24px */
  letter-spacing: 0.05em;
}

.service-card__text {
  color: var(--Sub-800);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4; /* 22.4px */
}

/* =========================================================
   S5: お客様の声
   ========================================================= */
.voice {
  position: relative;
  overflow: hidden;
  /* 下端 --arc-depth だけ弧の外側＝下の faq 色、それより上は弧(::after)と同色 */
  background: linear-gradient(to top, #f6faff var(--arc-depth), var(--sub-800) var(--arc-depth));
}

/* 装飾の弧（左上・dark-arc） */
.voice::before {
  content: "";
  position: absolute;
  z-index: 1; /* 弧(::after 0)の上・中身より下 */
  top: 129px;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/voice-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.voice__inner {
  position: relative;
  z-index: 2; /* 弧(::after 0)・dark-arc(::before 1)より前面 */
  padding: 138px 3.6805555556vw;
}

.voice__slider {
  overflow: hidden; /* はみ出すスライドを横でクリップ */
  padding-top: 125px;
}

.voice__swiper {
  overflow: visible; /* 拡大した中央スライドを切らない（クリップは親で） */
}

.swiper-slide-active, .swiper-slide-duplicate-active {
  transform: scale(1.3) !important;
}

.voice__list {
  align-items: stretch; /* 全スライドをカラム内で最も高いものに揃える（Swiper 既定の normal だと伸びないため明示） */
}

.swiper-slide {
  height: auto; /* 親の stretch を受けて等高になるよう明示（Swiper 既定を上書き） */
  display: flex;
  flex-direction: column; /* 等高で余った分を company の上に寄せる（company を下端固定） */
  padding: 72px 24px 60px;
  background-color: #fff;
  border-radius: 24px;
  /* 中央スライドの拡縮をスライド移動(speed:800ms)と同期させる。無いと拡大が瞬間的で「がたつく」 */
  transition: transform 0.8s ease;
}

.voice__list-lead {
  color: var(#2B286B);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5; /* 39px */
  margin-bottom: 32px;
  position: relative;
}
.voice__list-lead::before {
  position: absolute;
  content: "";
  width: 28px;
  height: 24px;
  background: transparent url(../images/quote-voice.svg) no-repeat center center/contain;
  left: -8px;
  top: -36px;
}

.voice__list-text {
  color: var(#2B286B);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6; /* 29.12px */
  margin-bottom: 24px;
}

.voice__list-company {
  color: var(#2B286B);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5; /* 31.2px */
  margin-top: auto; /* 余白を company の上に集約し、company をカード下端に固定 */
}

.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: 0;
  z-index: 10;
  cursor: pointer;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  content: none; /* Swiper既定の矢印を消す（slider-arrow.svg を使う） */
}
.swiper-button-prev img,
.swiper-button-next img {
  width: 100%;
  height: 100%;
}

.swiper-button-prev {
  left: 50%;
  margin-left: -16.25vw; /* 中央スライド左端（半幅 ≒ 468/2）。実測で微調整 */
  transform: translate(-50%, -50%);
}

.swiper-button-next {
  left: 50%;
  margin-left: 16.25vw; /* 中央スライド右端 */
  transform: translate(-50%, -50%);
}
.swiper-button-next img {
  transform: scaleX(-1); /* slider-arrow は左向きなので右向きに反転 */
}

.swiper-pagination {
  position: static;
  margin-top: 100px; /* 拡大した中央スライドの下までずらす（実測調整） */
  text-align: center;
}

.swiper-pagination-bullet {
  display: inline-block; /* spanにwidth/heightを効かせる */
  width: 12.8px;
  height: 12.8px;
  border-radius: 50%;
  margin: 0 6.4px; /* dot12.8 + gap12.8 */
  cursor: pointer;
  border: 1.6px solid var(--brand-400);
}

.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--brand-400);
}

/* =========================================================
   S6: よくあるご質問
   ========================================================= */
.faq {
  position: relative;
  overflow: hidden;
  background: #f6faff;
  padding: 125px 0;
}

/* 装飾の弧（右上・light-arc は反転済みの1440キャンバス） */
.faq::before {
  content: "";
  position: absolute;
  z-index: 1; /* 弧(::after)の上・中身より下 */
  top: 144px;
  right: 0;
  width: 100%;
  height: 100%;
  background: url("../images/faq-arc.svg") no-repeat;
  pointer-events: none;
  background-size: contain;
}

.faq__contents {
  width: 100%;
}

.faq__inner {
  position: relative;
  z-index: 2; /* 弧(::before 1)より前面 */
  width: min(97.22%, var(--container)); /* 左右20px（40px÷1440）を%化 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq__item + .faq__item {
  margin-top: 60px;
}

.faq__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.faq__head-img {
  width: 40px;
}

.faq__head-text {
  color: var(--brand-900);
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 2; /* 56px */
  letter-spacing: 0.05em;
}

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.faq-card {
  position: relative;
  padding: 0; /* 余白は faq-card--q / --a 側へ（クリック範囲を広げるため） */
  border-radius: 8px;
  background: #FFF;
  box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.faq-card--q {
  position: relative;
  padding: 20px 40px 20px 60px; /* 旧: faq-card(20 40 0 20) + q(左40/下20) を合算。カード全域をクリック可に */
  cursor: pointer;
}
.faq-card--q::before {
  position: absolute;
  content: "";
  width: 18px;
  height: 17px;
  background: transparent url(../images/faq-q.svg) no-repeat center center/contain;
  top: 28px;
  left: 20px;
}
.faq-card--q::after {
  position: absolute;
  content: "";
  width: 16px;
  height: 9px;
  top: 28px;
  right: 40px;
  background: transparent url(../images/faq-arrow.svg) no-repeat center center/contain;
  transition: transform 0.3s ease;
}
.faq-card--q.is-open::after {
  transform: rotate(180deg);
}

.faq-card__text {
  color: var(--sub-900);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 2; /* 32px */
  letter-spacing: 0.05em;
}
.faq-card__text.--a {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

.faq-card--a {
  position: relative;
  display: none;
  padding: 20px 40px 20px 60px; /* faq-card の余白撤去分を合算（旧: card左20/右40 + a左40） */
  border-top: 2px solid var(--brand-50);
}
.faq-card--a::before {
  position: absolute;
  content: "";
  width: 18px;
  height: 17px;
  background: transparent url(../images/faq-a.svg) no-repeat center center/contain;
  top: 24px;
  left: 20px;
}

.faq-card.is-open .faq-card__arrow {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.footer {
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.footer__copyright {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 2; /* 24px */
  color: #000;
}

/* =========================================================
   S7: 運営会社について
   ========================================================= */
.corporate {
  background: var(--sub-800);
  padding: 55px 0 72px;
  position: relative;
  overflow: hidden;
}
.corporate::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  aspect-ratio: 1440/588; /* 箱をアーク(1440×588)の比率にして下端に固定。高さがwidth連動で決まる */
  background: url(../images/corporate-arc.svg) no-repeat;
  pointer-events: none;
  background-size: 100% 100%; /* 箱＝アーク比率なので歪まず、常に幅いっぱい・下端ピッタリ（position不要） */
}

.corporate__inner {
  position: relative;
  z-index: 2; /* アーク画像(::before z-index:1)より前面に文字を出す */
  width: min(97.22%, var(--container)); /* 左右20px（40px÷1440）を%化 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px; /* 見出し＋会社情報のまとまり ↔ ボタン */
}

/* 見出し ＋ 会社情報のまとまり（↔ ボタンとは 56px、内側は 80px） */
.corporate__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 61px;
  width: 100%;
}

.corporate__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  text-align: center;
  color: var(--gray-0);
}

.corporate__label {
  font-weight: 700;
  font-size: 24px;
  line-height: 2;
}

.corporate__title {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.5;
}

.corporate__profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 701px;
  max-width: 100%;
}

.corporate__sub {
  font-weight: 900;
  font-size: 18px;
  line-height: 1.5;
  text-align: center;
  color: var(--gray-0);
}

/* 日本パープル ＋ MAMORU ロゴ */
.corporate__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
  flex-direction: column;
}

.corporate__logo {
  width: 367px;
  max-width: 100%;
  height: auto;
}

.corporate__logo-mamoru {
  width: 173px;
  max-width: 100%;
  height: auto;
}

/* 企業情報ボタン（.btn--secondary を流用しサイズ上書き） */
.corporate__btn {
  font-size: 16px;
  letter-spacing: 0.1em;
  padding: 8px 28px;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.25);
}

/* =========================================================
   SP（1024px以下）
   ========================================================= */
/* ヘッダーのみ 1300px で切替。中身が固定px構成で最低幅≈1270px必要なため、メインコンテンツ(1024px)より先にハンバーガーへ */
@media (max-width: 1395px) {
  /* ----- ヘッダー ----- */
  .header {
    height: 60px;
    padding: 0 16px;
  }
  .header__logo img {
    width: 146px;
    height: 28px;
  }
  /* ハンバーガー（40×40 紺丸 + 白3本線） */
  .header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sub-800);
    cursor: pointer;
  }
  .header__menu-bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .is-nav-open .header__menu-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .is-nav-open .header__menu-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  } /* opacityだけだとiOS実機で中央に1pxの点が残ることがあるため幅も0に潰す */
  .is-nav-open .header__menu-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* ナビ：ドロワー（PC内容を縦並び） */
  .header__nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    height: calc(100vh - 60px); /* dvh非対応ブラウザ用フォールバック */
    height: calc(100dvh - 60px); /* ヘッダー(60px)下から画面下端まで。実機のアドレスバー等で100vhが実領域より大きくなり下部ボタンが見切れるのをdvhで防ぐ */
    overflow-y: auto; /* 端末が小さくメニューが収まらない場合はメニュー内スクロール */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 44px;
    background: #e7f0ff;
    box-shadow: 0 8px 12px rgba(43, 40, 107, 0.1);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .is-nav-open .header__nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .header__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .header__link {
    display: block;
    padding: 12px 0px;
    border-bottom: 1px solid var(--brand-300);
    font-size: 20px;
    line-height: 2;
    color: var(--sub-900);
    font-weight: 700;
  }
  .header__actions {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    margin-top: auto; /* メニュー最下部へ */
    justify-content: center;
  }
  /* メニュー展開中は背面（body）をスクロール固定 */
  body.is-nav-open {
    overflow: hidden;
  }
  .header__btn {
    text-align: center;
    padding: 10px 32px;
    font-size: 15px;
    width: calc((100% - 8px) / 2);
    max-width: 200px;
  }
  /* ドロワー最下部の電話番号 */
  .header__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 25px; /* .header__actions 下端からの実測値 */
    color: var(--sub-800);
    text-decoration: none;
    transition: opacity 0.3s ease;
  }
  .header__tel-body {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .header__tel-icon {
    display: block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("../images/icon-tel.svg") no-repeat center/contain;
    mask: url("../images/icon-tel.svg") no-repeat center/contain;
  }
  .header__tel-num {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .header__tel-hours {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 1.4;
    white-space: nowrap;
  }
}
@media (max-width: 1024px) {
  /* ----- KV（SP画像 kv-sp.png を背景にテキストを重ねる） ----- */
  .kv__bg {
    width: 100%;
    display: block;
  } /* <picture> で kv-sp.png に切替 */
  .kv__copy {
    left: 0;
    right: 0;
    top: calc(32.47 / 375 * 100vw);
    font-size: calc(27.787 / 375 * 100vw);
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-align: center;
    padding-left: calc(19 / 375 * 100vw);
  }
  .kv__copy-line--a {
    letter-spacing: 0.06em;
  }
  .kv__copy-line--b {
    margin-left: 0;
  }
  .kv__copy-de {
    margin-left: 0;
  }
  .kv__lead {
    left: 0;
    right: 0;
    top: calc(117 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
    line-height: 1.8;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .kv__actions {
    left: 0;
    right: 0;
    top: calc(413 / 375 * 100vw);
    flex-direction: column;
    align-items: center;
    gap: calc(8 / 375 * 100vw);
  }
  .kv-btn {
    width: calc(220 / 375 * 100vw);
    justify-content: center;
    padding: calc(9 / 375 * 100vw) calc(28 / 375 * 100vw);
    font-size: calc(14 / 375 * 100vw);
  }
  /* 矢印は vw(1440基準) だとSPで極小になるため spvw(375基準) に補正 */
  .kv-btn::after {
    width: calc(7 / 375 * 100vw);
    height: calc(10 / 375 * 100vw);
  }
  /* ----- 動画ブリッジ（紺背景・縦並び） ----- */
  .kv-bridge {
    display: block;
    padding: 40px 0 0;
    background: var(--sub-800);
  }
  .kv-movie {
    position: relative;
    left: auto;
    top: auto;
    width: 86.67%; /* 左右余白を他セクション(.cando__inner)と同じ可変%に（375基準で左右25px相当） */
    height: auto;
    margin: 0 auto;
  }
  .kv-movie__card {
    padding: calc(12 / 375 * 100vw) calc(20 / 375 * 100vw) calc(12 / 375 * 100vw) calc(12 / 375 * 100vw);
    border-radius: calc(16 / 375 * 100vw);
  }
  .kv-movie__body {
    gap: calc(12 / 375 * 100vw);
    align-items: center;
  }
  .kv-movie__thumb {
    width: calc(120 / 375 * 100vw);
    height: calc(67 / 375 * 100vw);
    border-radius: calc(6 / 375 * 100vw);
  }
  .kv-movie__text {
    gap: calc(4 / 375 * 100vw);
  }
  .kv-movie__label {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: 0.1em;
  }
  .kv-movie__title-a {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: 0.125em;
  }
  .kv-movie__title-b {
    font-size: calc(18 / 375 * 100vw);
  }
  .kv-movie__play {
    width: calc(32 / 375 * 100vw);
    height: calc(32 / 375 * 100vw);
  }
  /* ----- 各セクションの装飾アーク（::before）をSP版に差し替え ----- */
  .cando::before {
    background-image: url("../images/cando-arc-sp.svg");
    top: 21px;
  }
  .features::before {
    background-image: url("../images/features-arc-sp.svg");
    top: -13px;
  }
  .pricing::before {
    background-image: url("../images/pricing-arc-sp.svg");
    top: 83px;
  }
  .service::before {
    background-image: url("../images/service-arc-sp.svg");
    top: 81px;
  }
  .voice::before {
    background-image: url("../images/voice-arc-sp.svg");
    top: 43px;
  }
  .faq::before {
    background-image: url("../images/faq-arc-sp.svg");
    top: 95px;
  }
  .corporate::before {
    background-image: url("../images/corporate-arc-sp.svg");
    top: 53px;
    bottom: auto;
    aspect-ratio: 275/220;
  }
  /* ----- 下部追従CVバー（SP: テキスト非表示・ボタン2つ＋電話番号） ----- */
  /* ボタン2つの行＋電話番号の行で2段。
     Figma SP は上下パディングのみ（左右0）＝ボタン2つが1行に収まる前提 */
  .cv-bar {
    gap: 0;
    padding: 16px 0;
  }
  .cv-bar__text {
    display: none;
  }

  .cv-bar__notice {
    margin-bottom: 10px;
    font-size: 12px;
    gap: 2px 12px;
  }
  /* 列方向にすると .cv-bar__actions の幅＝子の最大幅（＝ボタン行の幅）になるので、
     電話ボタンの width:100% がボタン行の左右端にそろう */
  .cv-bar__actions {
    flex-direction: column;
    gap: 12px;
  }
  .cv-bar__buttons {
    flex-wrap: wrap; /* 320px級では2つが縦積みに落ちる */
    justify-content: center;
    gap: 12px;
  }
  .cv-bar__btn {
    width: auto;
    height: auto;
    gap: 8px;
    padding: 8px 24px;
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .cv-bar__tel {
    gap: 12px;
    width: 100%; /* = .cv-bar__actions の幅 */
    height: 40px;
    padding: 10px 28px;
    border-radius: 80px;
  }
  /* SP は番号と受付時間を横並び */
  .cv-bar__tel-body {
    flex-direction: row;
    align-items: center;
    gap: 5px;
  }
  /* ----- できること（.cando：紺セクション） ----- */
  .cando {
    padding-top: 36px;
    padding-bottom: 120px;
    --arc-depth: 100px; /* 下端アークをSP向けに浅く（角度を緩く） */
  }
  .cando__inner {
    width: 86.67%; /* 左右25px（50px÷375）を%化 */
    gap: 80px; /* SP: お悩み ↔ にできること */
  }
  /* 見出し（SonaEverにできること） */
  .section-heading__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 0;
  }
  .section-heading__logo {
    width: 178px;
    margin-right: 4px;
  }
  /* できること見出しのみ「SonaEverに」＋「できること」の2行に折り返す。
     1行目(ロゴ+「に」≒218px)は収まり2行目に「できること」が落ちる幅で box を固定し、
     引用符が箱＝テキストの角に来るようにする */
  /* できること/機能見出し：SPで「ロゴ+1文字目」を1行目、残りを2行目に折り返す
     （ロゴ+「に」or「の」≒218pxは収まり、次の文字が落ちる幅でboxを固定） */
  .cando .section-heading__inner,
  .features .section-heading__inner {
    max-width: 222px;
  }
  .br-sp {
    display: inline;
  }
  .br-pc {
    display: none;
  }
  .cando .section-heading__suffix {
    font-size: 36px;
  }
  .section-heading__inner::before,
  .section-heading__inner::after {
    width: 24px;
    height: 20px;
    top: -10px;
  }
  .section-heading__inner::before {
    left: -34px;
  }
  .section-heading__inner::after {
    right: -34px;
  }
  /* お悩み */
  .worries {
    gap: 24px;
  }
  .worries__lead {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0.05em;
  }
  .worries__list {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .worry-card {
    width: 100%;
    padding: 28px 16px 24px;
    border-radius: 24px;
  }
  .worry-card__icon {
    height: auto;
    margin-bottom: 12px;
  }
  .worry-card__title {
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
  }
  .worry-card__body {
    font-size: 16px;
  }
  /* まとめバナー */
  .worries__banner {
    width: 100%;
    padding: 16px 10px;
    font-size: 16px;
    letter-spacing: 0.05em;
  }
  .worries__kern {
    letter-spacing: -0.2em;
  }
  /* にできること */
  .about {
    gap: 32px;
  }
  .about__lead {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left;
  }
  .about__group {
    gap: 32px;
  }
  /* 区切り線 */
  .cando__divider {
    margin: 0;
  }
  /* value カード（縦積み・画像上） */
  .values__list {
    gap: 16px;
  }
  .value-card,
  .value-card:nth-child(even) {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    max-width: none;
    padding: 16px 16px 40px;
    border-radius: 24px;
  }
  .value-card__photo {
    order: -1;
    width: 100%;
    height: auto;
    aspect-ratio: 160/90;
    border-radius: 16px;
  }
  .value-card__body {
    padding-top: 0;
    gap: 14px;
  }
  .value-card__label {
    font-size: 12px;
    letter-spacing: 0.05em;
    color: var(--brand-800);
  }
  .value-card__title {
    font-size: 18px;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }
  .value-card__text {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
  .value-card__num,
  .value-card:nth-child(even) .value-card__num {
    left: auto;
    right: 8px;
    bottom: 0px;
    transform: none;
    width: 96px;
    height: auto;
  }
  .value-card:nth-child(even) .value-card__num {
    right: auto;
    left: 8px;
  }
  /* 安心の実績と強み（縦積み） */
  .strengths {
    gap: 20px;
  }
  .strengths__head {
    gap: 8px;
  }
  .strengths__logo {
    width: 122px;
  }
  .strengths__title {
    font-size: 28px;
    letter-spacing: 0.05em;
  }
  .strengths__list {
    flex-direction: column;
    gap: 12px;
    max-width: none;
  }
  .strength-card {
    padding: 20px 16px;
    gap: 6px;
    flex: initial;
  }
  .strength-card__accent {
    font-size: 20px;
  }
  .strength-card__head {
    letter-spacing: 0.0438em;
  }
  /* ----- 共通: 見出し接尾辞をSPサイズに（全セクション） ----- */
  .section-heading__suffix {
    font-size: 36px;
  }
  /* ----- 共通: 下端アークをSP向けに浅く（features/service/voice/pricing） -----
     --arc-depth を変えるだけで radius と地の色グラデの境目が同時に追従する */
  .features,
  .service,
  .voice,
  .pricing {
    --arc-depth: 100px;
  }
  /* ----- 共通: CTAバナー（縦積み・Figma SP実測） ----- */
  .cta-banner {
    flex-direction: column;
    gap: 16px;
    padding: 32px 16px 18px;
    border-radius: 24px;
  }
  .cta-banner__arc {
    width: 100%;
    height: auto;
    top: 6.9333333333vw;
  }
  .cta-banner__heading {
    font-size: 28px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: normal;
    padding-left: 12px; /* 中央基準を少し右へずらす（引用符::before/afterは絶対配置なので不動） */
  }
  .cta-banner__heading::before {
    top: 1px;
    left: 17px;
  }
  .cta-banner__heading::after {
    top: 43px;
    right: -10px;
  }
  .cta-banner__body {
    flex: initial;
    width: 100%;
    gap: 24px;
  }
  .cta-banner__desc {
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left; /* 文字は左寄せ */
    width: fit-content; /* ブロックは内容幅にして */
    max-width: 100%;
    margin-inline: auto; /* 左右中央に配置 */
  }
  .cta-banner__actions {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .cta-banner__actions .btn {
    justify-content: center;
    width: 220px;
  }
  .cta-banner__tel {
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 293px;
    margin-inline: auto; /* 左右中央 */
    padding: 12px 0;
    margin-top: -2px; /* __body の gap 24px を Figma SP 実測の22px に詰める */
  }
  .cta-banner__tel-label {
    font-size: 16px;
    text-align: center;
  }
  .cta-banner__tel-row {
    gap: 10px;
  }
  /* ----- 共通: コンテンツ幅は左右25px（50px÷375）を%化。Figma SP=325px ----- */
  .features__inner,
  .pricing__inner,
  .service__inner,
  .faq__inner {
    width: 86.67%;
  }
  /* ----- 機能（.features） ----- */
  .features {
    padding: 64px 0;
  }
  .features__dashboard {
    margin-top: 24px;
    gap: 32px;
  }
  .features__head {
    gap: 24px;
  }
  .features__subhead {
    font-size: 20px;
    letter-spacing: 0.05em;
    line-height: 1.4;
  }
  .features__lead {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    text-align: left;
  }
  /* ダッシュボード（Figma: movie 325×172 / node 5447:26751）
     SPのずらし量は横3px・縦4px。PC(横6px・縦12px)とは比率が違うので実測値で上書きする */
  .dashboard {
    width: 100%;
    height: auto;
    aspect-ratio: 325/172;
  }
  .dashboard__layer {
    width: calc(100% - 3px); /* 322 / 325 */
    height: calc(100% - 4px); /* 168 / 172 */
    border-radius: 11.788px;
  }
  .dashboard__layer--back {
    top: 4px;
    left: 3px;
  }
  .dashboard__screen {
    top: 3px;
    left: 3.5px;
    width: calc(100% - 7px); /* 318 / 325 */
    height: calc(100% - 6px); /* 166 / 172 */
    border-radius: 10.104px;
  }
  .dashboard__play {
    width: 44px;
    height: 44px;
  }
  /* 機能カード（1列） */
  .features__list {
    margin-top: 24px;
    column-gap: 0;
    row-gap: 40px;
  }
  .feature-card {
    width: 100%;
    gap: 16px;
  }
  .feature-card__num {
    height: calc(28 / 375 * 100vw);
  } /* SP: 375px時に28px（画面幅で可変） */
  .feature-card__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 325/207.849;
    border-radius: 22.674px;
  }
  .feature-card__shot {
    width: 94%;
    height: auto;
    top: 59%;
    left: 58%;
  }
  .feature-card__shot.--short {
    width: 80%;
    top: 50%;
    left: 50%;
    height: auto;
  }
  .feature-card__shot.--csv::after {
    width: 50px;
    height: 50px;
    top: -11px;
    right: -13px;
  }
  .feature-card__title {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.05em;
  }
  .feature-card__body {
    font-size: 14px;
    line-height: 1.4;
  }
  .features__inner > .cta-banner {
    margin-top: 64px;
  }
  /* ----- 料金プラン（.pricing） ----- */
  .pricing {
    padding: 64px 0 80px;
  }
  .pricing__lead {
    margin: 24px 0;
    font-size: 20px;
    line-height: 1.4;
  }
  .pricing__lead span {
    font-size: 24px;
  }
  .pricing__list {
    gap: 24px;
  }
  /* 比較表：SPは1プラン=1カードで縦積み（ラベルは各行にインライン表示） */
  .pricing-table-wrap {
    padding: 16px;
    border-radius: 24px;
    gap: 12px;
    overflow: visible;
    align-items: center;
  }
  .pricing-table {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }
  .pricing-table__labels {
    display: none;
  }
  .pricing-table__plans {
    flex-direction: column;
    width: 100%;
    gap: 24px;
  }
  .pricing-plan {
    width: 100%;
  }
  /* おすすめカードと直下カードの間隔だけ詰める（親gap24px − 12px = 12px） */
  .pricing-plan.--recommend {
    margin-bottom: -12px;
  }
  .pricing-plan__name {
    height: 58px;
    font-size: 20px;
    letter-spacing: 0.05em;
  }
  /* 全プランのヘッダー上端を角丸に。base の :first-child/:last-child(詳細度0,3,0)に勝つよう同等セレクタで上書き */
  .pricing-plan .pricing-plan__name,
  .pricing-plan:first-child .pricing-plan__name,
  .pricing-plan:last-child .pricing-plan__name {
    border-radius: 12px 12px 0 0;
  }
  .pricing-plan__price,
  .pricing-plan__spec {
    height: auto;
    min-height: 52px;
    justify-content: flex-start;
    padding: 4px 16px;
    white-space: normal;
  }
  /* 各カード最下行の下端を角丸に。base の :last-child 指定(詳細度0,4,0)に勝つよう同等セレクタで上書き */
  .pricing-plan .pricing-plan__spec:last-child,
  .pricing-plan:last-child .pricing-plan__spec:last-child {
    border-radius: 0 0 12px 12px;
  }
  .pricing-plan__rowlabel {
    display: block;
    margin-right: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    align-self: center;
  }
  .pricing-plan__num {
    font-size: 16px;
  }
  .pricing-plan__tax {
    font-size: 12px;
  }
  .pricing-plan__spec {
    font-size: 14px;
    text-align: left;
  }
  .pricing-plan__badge {
    font-size: 12px;
    padding: 6px 28px 8px;
    top: -13px;
  }
  .pricing__note {
    width: 100%;
    font-size: 12px;
  }
  /* 都市部限定プラン（縦積み） */
  .pricing-city {
    padding: 24px 16px 32px;
    border-radius: 24px;
  }
  .pricing-city__deco {
    display: none;
  }
  /* 透かし「POINT」はSPでも表示（Figma: 52px / top -9px / 右84.5px≒26% + translateX(50%)） */
  .pricing-city__watermark {
    left: auto;
    bottom: auto;
    top: 0;
    right: 26%;
    transform: translateX(50%);
    width: 37.6vw;
  }
  .pricing-city__body {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  /* SP順序: 見出し→リード→画像→説明文→ポイント。text/headsを透過して1カラムに並べ替え（Figma gap: 12/12/16/24） */
  .pricing-city__text {
    display: contents;
  }
  .pricing-city__heads {
    display: contents;
  }
  .pricing-city__head {
    order: 1;
    font-size: 20px;
    letter-spacing: 0.05em;
    text-align: center;
  }
  .pricing-city__lead {
    order: 2;
    font-size: 16px;
    letter-spacing: 0.05em;
  }
  /* 画像はPC同様2枚を斜めに重ねる（Figma実測: 比率344/200, back 68.1% / front 55.9%・左44.1%・上43.8%） */
  .pricing-city__images {
    order: 3;
    width: 100%;
    height: auto;
  }
  .pricing-city__desc {
    order: 4;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.4;
  }
  .pricing-city__points {
    order: 5;
    margin-top: 12px;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .pricing-city__point {
    font-size: 14px;
    white-space: normal;
    border-radius: 8px;
  }
  .pricing-city__img.--back {
    top: 0;
    left: 0;
    width: 68.1%;
    height: auto;
    aspect-ratio: 344/200;
  }
  .pricing-city__img.--front {
    display: block;
    top: 43.8%;
    left: 44.1%;
    width: 55.9%;
    height: auto;
    aspect-ratio: 344/200;
  }
  /* ----- サービスの流れ（.service：カードは縦積み） ----- */
  .service {
    padding: 64px 0;
  }
  .service__subhead {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 24px;
  }
  .service__list {
    gap: 36px;
    margin-bottom: 64px;
  }
  .service-card__body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 32px 16px;
    border-radius: 24px;
  }
  .service-card__icon {
    width: 120px;
    height: 90px;
  }
  .service-card__contents {
    width: 100%;
    gap: 12px;
  }
  .service-card__head {
    font-size: 20px;
    letter-spacing: 0.05em;
    text-align: center;
    width: 100%;
  }
  .service-card__text {
    font-size: 16px;
    line-height: 1.4;
  }
  .service-card__num {
    height: 36px;
    right: 12px;
    top: 0;
  }
  .service-card::after {
    width: 36px;
    height: 20px;
    bottom: -28px;
  }
  /* ----- お客さまの声（.voice） ----- */
  .voice__inner {
    padding: 48px 0 64px;
  }
  .voice__slider {
    padding-top: 32px;
    padding-bottom: 24px;
  } /* 下のボタン行が overflow:hidden で切れないよう余白確保 */
  .swiper-slide-active, .swiper-slide-duplicate-active {
    transform: scale(1) !important;
  }
  .swiper-slide {
    width: 316px;
    padding: 64px 24px 32px;
    border-radius: 31.2px;
  }
  .voice__list-lead {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .voice__list-lead::before {
    width: 28px;
    height: 24px;
    top: -32px;
    left: 0;
  }
  .voice__list-text {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 16px;
  }
  .voice__list-company {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .voice__list-category {
    font-size: 12px;
    padding: 6px 10px;
  }
  /* prev/next はカード下のページネーション行に配置（Figma: カード下24px・行高48pxの中央ライン、
     ドットは画面中央、ボタンは画面中央から左右 ±118.8px）。
     top:calc(100% + 24px) は .voice__swiper（=カード）下端から24px下 → ボタン中心はカード下48px。 */
  .swiper-button-prev,
  .swiper-button-next {
    width: 48px;
    height: 48px;
    top: calc(100% + 24px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  .swiper-button-prev {
    margin-left: -118.8px;
  }
  .swiper-button-next {
    margin-left: 118.8px;
  }
  /* ドット中心をボタン中心（カード下48px）に合わせる: margin-top 41.6 + ドット半径6.4 = 48 */
  .swiper-pagination {
    margin-top: 41.6px;
  }
  /* ----- よくあるご質問（.faq） ----- */
  .faq {
    padding: 64px 0;
  }
  .faq__item + .faq__item {
    margin-top: 32px;
  }
  .faq__head {
    gap: 8px;
    margin-bottom: 12px;
  }
  .faq__head-img {
    width: 34px;
  }
  .faq__head-text {
    font-size: 20px;
    line-height: 2;
    letter-spacing: 0.05em;
  }
  .faq__list {
    gap: 12px;
  }
  .faq-card {
    padding: 0;
    border-radius: 8px;
  }
  .faq-card--q {
    padding: 20px 20px 20px 44px;
  } /* 旧: card(20 20 0 16)+q(左28/下20) を合算 */
  .faq-card--q::before {
    width: 16px;
    height: 15px;
    top: 24px;
    left: 16px;
  }
  .faq-card--q::after {
    width: 14px;
    height: 8px;
    top: 28px;
    right: 20px;
  }
  .faq-card--a {
    padding: 16px 20px 20px 44px;
  }
  .faq-card--a::before {
    width: 16px;
    height: 15px;
    top: 18px;
    left: 16px;
  }
  .faq-card__text {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
    padding-right: 26px;
  }
  .faq-card__text.--a {
    font-size: 14px;
    line-height: 1.6;
  }
  /* ----- 運営会社（.corporate） ----- */
  .corporate {
    padding: 64px 0;
  }
  .corporate__inner {
    gap: 56px;
    width: 86.67%;
  } /* 左右25px（50px÷375）を%化 */
  .corporate__main {
    gap: 37px;
  }
  .corporate__heading {
    gap: 10px;
  }
  .corporate__label {
    font-size: 16px;
    line-height: 2;
  }
  .corporate__title {
    font-size: 24px;
    line-height: 1.5;
  }
  .corporate__profile {
    gap: 22px;
    width: 100%;
  }
  .corporate__sub {
    font-size: 14px;
    line-height: 1.5;
  }
  .corporate__logos {
    gap: 28px;
  }
  .corporate__logo {
    width: 244px;
  }
  .corporate__logo-mamoru {
    width: 143px;
  }
  .corporate__btn {
    font-size: 14px;
    padding: 10px 28px;
  }
  /* ----- フッター ----- */
  .footer {
    gap: 16px;
    padding: 20px;
  }
  .footer__copyright {
    font-size: 12px;
    line-height: 2;
  }
}
/* =========================================================
   スクロールでふわっと表示（JS有効時のみ初期非表示）
   ========================================================= */
.js .js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}

.js .js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .js-reveal,
  .js .js-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* =========================================================
   KV エントランス（ページ読込時に再生・ファーストビュー用）
   背景はゆるくズームアウト、コピー→リード→ボタンを順にフェードアップ
   ========================================================= */
@keyframes kv-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes kv-zoom-out {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}
.kv__bg {
  animation: kv-zoom-out 2.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.kv__copy-line,
.kv__lead,
.kv__actions,
.kv-movie {
  animation: kv-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* PC: 縦位置順（copy→lead→movie→actions）で出す。movieはボタンより上にある */
.kv__copy-line--a {
  animation-delay: 0.15s;
  padding-right: 1em;
}

.kv__copy-line--b {
  animation-delay: 0.3s;
}

.kv__lead {
  animation-delay: 0.45s;
}

.kv-movie {
  animation-delay: 0.6s;
}

.kv__actions {
  animation-delay: 0.75s;
}

/* SP: 縦積み順（copy→lead→actions→movie）でmovieを最後に */
@media (max-width: 1024px) {
  .kv__actions {
    animation-delay: 0.6s;
  }
  .kv-movie {
    animation-delay: 0.75s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kv__bg,
  .kv__copy-line,
  .kv__lead,
  .kv__actions,
  .kv-movie {
    animation: none;
  }
}

/* =========================================================
    調査レポート導線（お悩みセクション内 / #can-do）
    ダーク背景(--sub-800)の上に置くため、worry-card と同じ
    「白・角丸24px・4px 4px 8px の影」の質感に合わせる
========================================================= */
/* 正式リリース告知（時限）。9/1以降は「正式リリースしました」＋導入支援プログラムへ差し替える。
   → Marketing/04_SL/03_SonaEver/01_Strategy/ソナエバ_PR配信設計_2026.md §6
   .worries の flex(column / align-items:center / gap:40px) に載せるため、位置指定を持たない */
.release-note {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 10px 28px 11px;
  border-radius: 39px;
  background: var(--sub-800);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--gray-0);
  text-align: center;
}

.survey-link {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head figures"
    "more figures";
  align-items: center;
  gap: 18px 40px;
  padding: 28px 32px;
  background: var(--gray-0);
  border-radius: 24px;
  box-shadow: 4px 4px 8px rgba(43, 40, 107, 0.15);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.survey-link:hover {
  opacity: 0.6;
}

.survey-link__head {
  grid-area: head;
}

.survey-link__label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 18px 5px;
  border-radius: 39px;
  background: var(--brand-600);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: var(--gray-0);
}

.survey-link__title {
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--sub-800);
}

.survey-link__note {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-400);
}

.survey-link__figures {
  grid-area: figures;
  display: flex;
  align-items: flex-start;
  gap: 26px;
}

.survey-link__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.survey-link__num {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--brand-600);
  white-space: nowrap;
}

.survey-link__num small {
  font-size: 16px;
  font-weight: 700;
  margin-left: 1px;
}

.survey-link__cap {
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--sub-800);
  text-align: center;
}

.survey-link__more {
  grid-area: more;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.1em;
  color: var(--brand-600);
}

/* 矢印は .btn::after と同じマスクを使う */
.survey-link__more::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 10px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%207%2010'%3E%3Cpath%20d='M1.5%201.5%205.5%205%201.5%208.5'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* フッターの補助リンク */
.footer {
  flex-wrap: wrap;
}

.footer__link {
  font-size: 12px;
  font-weight: 500;
  line-height: 2;
  color: #000;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.footer__link:hover {
  opacity: 0.6;
}

@media (max-width: 1024px) {
  .survey-link {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "figures"
      "more";
    gap: 20px;
    padding: 24px 20px;
  }
  .survey-link__title {
    font-size: 20px;
  }
  .survey-link__figures {
    justify-content: space-between;
    gap: 10px;
  }
  .survey-link__num {
    font-size: 26px;
  }
  .survey-link__num small {
    font-size: 14px;
  }
  .survey-link__cap {
    font-size: 10px;
  }
}