/* ============================================================
   LINOA 業務効率化LP
   モバイル 390px を基準に実装し、1200px以上をデスクトップ(1280px基準)へ拡張する。
   ============================================================ */

:root {
  /* color */
  --c-blue: #1264d8;
  --c-blue-dark: #0754cb;
  --c-blue-mid: #2c6fd1;
  --c-navy: #092653;
  --c-navy-2: #102b50;
  --c-navy-3: #08254b;
  --c-text: #435b7a;
  --c-text-muted: #606b7a;
  --c-text-muted-2: #4f617b;
  --c-bg-fv: #f4faff;
  --c-bg-page: #f6faff;
  --c-border: #d6e8f7;
  --c-white: #ffffff;

  /* font-size (mobile scale) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;

  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* radius */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --container: 350px;
}

/* ============================================================
   Reset / base
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--c-navy);
  background: var(--c-white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

p,
h1,
h2 {
  margin: 0;
}

.l-wrapper {
  overflow-x: clip;
}

.l-section {
  padding-left: 20px;
  padding-right: 20px;
}

.l-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

.num,
.price__num,
.kpi__num {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-feature-settings: "tnum";
}

/* Figmaの手動改行を再現する。ブレークポイントで改行位置が変わる箇所に使う */
.br-pc {
  display: none;
}

/* ============================================================
   Scroll reveal (fade-up)
   ============================================================ */
/* Content stays readable if JavaScript or IntersectionObserver is unavailable.
   Individual translate/scale preserve the mirrored .what__hero transform. */
.fade-up {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

.motion-ready .fade-up {
  transition:
    opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
    translate 900ms cubic-bezier(0.16, 1, 0.3, 1),
    scale 900ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-ready .fade-up:not(.is-visible) {
  opacity: 0;
  translate: 0 64px;
  scale: 0.985;
}

.motion-ready .fv__bg {
  animation:
    fv-arrive 1600ms cubic-bezier(0.16, 1, 0.3, 1) both,
    fv-drift 3000ms 1600ms ease-in-out forwards;
}

@keyframes fv-arrive {
  from {
    opacity: 0;
    translate: 0 20px;
    scale: 1.035;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes fv-drift {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}

/* LINEボタンの「拡大して戻る」脈打ちアニメーション。
   fade-up が scale/translate プロパティ(標準の個別プロパティ)を使うため、
   ここは transform を使って両者が同じプロパティを取り合わないようにしている。 */
@keyframes btn-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.fv__cta,
.cta .btn-line {
  animation: btn-pulse 2600ms ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .fade-up,
  .motion-ready .fade-up:not(.is-visible) {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
  .motion-ready .fv__bg {
    animation: none;
  }
  .fv__cta,
  .cta .btn-line {
    animation: none;
  }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  padding: 21px 19px;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  /* filter: drop-shadowはfade-upアニメーションと同時に走ると影が一瞬欠けることがあるため、
     box-shadowに統合している */
  box-shadow:
    0 4px 18px rgba(15, 36, 46, 0.06),
    0 4px 2px rgba(0, 0, 0, 0.25);
  text-decoration: none;
}

.btn-line__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn-line__icon {
  width: 35px;
  height: 31px;
  flex-shrink: 0;
}

.btn-line__label {
  font-weight: var(--fw-black);
  font-size: var(--fs-20);
  line-height: 1.4;
  color: var(--c-white);
  text-align: center;
}

.btn-line__note {
  font-weight: var(--fw-medium);
  font-size: var(--fs-11);
  line-height: 1.4;
  color: var(--c-white);
  text-align: center;
}

/* ============================================================
   01 FV
   ============================================================ */
.fv {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  background: var(--c-bg-fv);
  padding: 36px 20px 48px;
  min-height: 767px;
  overflow: hidden;
}

.fv__bg {
  position: absolute;
  /* 旧実装は390px基準の固定サイズ(410×672px)だったため、410pxを超える
     スマホ幅（iPhone 14 Pro Max 430px, Pixel 7 Pro 480px等）や768〜1199px
     のタブレット幅で左右に余白ができて浮いて見え、さらに .fv の
     overflow:hiddenで下端が常に11px切れていた（top106+height672=778px
     vs セクション高さ767px）。幅に関わらずセクション全面をcoverで
     敷き詰める方式に統一し、この2つを解消する。 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  z-index: 0;
}

.fv__top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.fv__logo {
  width: 135px;
  height: auto;
}

.fv__copy {
  width: 100%;
  text-align: center;
  color: var(--c-navy);
}

/* h1 の UA 既定スタイル (font-size: 2em / font-weight: bold / margin-block: 0.67em) を
   打ち消す。実際のタイポグラフィは .fv__heading-sub と .fv__copy strong が担う。
   margin を落とさないと FV のコピーが約 21px 下にずれる。
   margin は上部のリセット (p, h1, h2 { margin: 0 }) でも消えるが、
   リセット側の変更に巻き込まれないようここでも明示する */
.fv__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

/* h1 は phrasing content しか持てないため span。元の p と同じ行送りにするため block にする */
.fv__heading-sub {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: 1.65;
}

.fv__copy strong {
  display: block;
  font-weight: var(--fw-black);
  color: var(--c-blue);
  font-size: var(--fs-32);
  line-height: 1.65;
}

.fv__price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 9px;
}

.fv__price-pill {
  width: 100%;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r-lg);
  padding: 7px 16px;
  filter: drop-shadow(0 6px 10px rgba(13, 51, 115, 0.08));
}

.fv__price-row {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fv__price-label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  line-height: 1.625;
  color: var(--c-navy);
}

.fv__price-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  line-height: 1.375;
}

.fv__price-amount {
  font-weight: var(--fw-bold);
  line-height: 1.375;
  color: var(--c-blue);
}

.fv__price-amount .num {
  font-size: var(--fs-32);
  font-weight: var(--fw-bold);
}

.fv__price-amount .unit {
  font-weight: var(--fw-black);
  font-size: var(--fs-24);
}

.fv__price-tax {
  font-weight: var(--fw-black);
  font-size: var(--fs-15);
  color: var(--c-navy);
}

.fv__price-note {
  font-weight: var(--fw-black);
  color: var(--c-blue);
  font-size: var(--fs-15);
  text-align: center;
}

.fv__cta {
  position: relative;
  z-index: 1;
  width: 330px;
  max-width: 100%;
  padding: 12px 20px;
  gap: 2px;
}

/* ============================================================
   02 WHAT
   ============================================================ */
.what {
  position: relative;
  overflow: hidden;
  background: var(--c-white);
  border-top: 1px solid #aaa8a8;
  border-radius: 65px 65px 0 0;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* 斜めの帯はデスクトップのみ (Figmaのモバイルフレームでは非表示) */
.what__bands {
  display: none;
}

/* プランBの波もデスクトップのみ */
.plan__wave {
  display: none;
}

/* 下部CTAの淡い円もデスクトップのみ (実装ガイド13-7) */
.cta__circle {
  display: none;
}

.what__hero {
  width: 280px;
  max-width: 100%;
  transform: scaleX(-1);
}

.what__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: var(--c-navy);
  width: 100%;
  max-width: var(--container);
}

.what__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  color: var(--c-text);
  width: 100%;
  max-width: var(--container);
}

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

.what__card {
  width: 100%;
  max-width: var(--container);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* filter: drop-shadowはfade-upのopacity/scaleアニメーションと同時に走らせると
     合成レイヤー生成時に影が一瞬欠けることがあるため、box-shadowに置き換えている */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.what__card--today {
  background: #f4f8fd;
}

.what__card--system {
  background: #f6faff;
  border: 1px solid #d5e8ff;
}

.what__card-img {
  width: 168px;
  height: 124px;
  object-fit: contain;
}

.what__card-img--system {
  width: 156px;
  height: 109px;
}

.what__status {
  width: 100%;
  max-width: 318px;
  text-align: center;
  border-radius: var(--r-xs);
  padding: 7px 14px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: var(--c-white);
}

.what__status--now {
  background: var(--c-navy);
}

.what__status--after {
  background: var(--c-blue);
}

.what__card-heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--c-navy-2);
  text-align: center;
}

.what__card--system .what__card-heading {
  color: var(--c-blue);
}

.what__card--today .what__card-heading {
  max-width: 248px;
}

.what__bullets {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 248px;
}

.what__card--system .what__bullets {
  max-width: 272px;
}

.what__bullet {
  display: flex;
  align-items: center;
  gap: 8px;
}

.what__bullet img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.what__bullet span {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #233c60;
}

/* ============================================================
   03 CASE
   ============================================================ */
.case {
  background: #fafcff;
  border-top: 1px solid #bdbcbc;
  border-radius: 65px 65px 0 0;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56px;
}

.case__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: var(--container);
}

.case__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #1866cc;
}

.case__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #133960;
}

.case__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  color: #69778a;
}

.case__card {
  width: 100%;
  max-width: var(--container);
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 4px 4px 19.5px rgba(31, 74, 128, 0.4);
}

.case__card-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.case__tag {
  font-weight: var(--fw-bold);
  color: #3973ae;
  text-align: center;
}

.case__tag .n {
  font-size: var(--fs-24);
}

.case__tag .sub {
  display: block;
  font-size: var(--fs-16);
}

.case__result {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #18334d;
  width: 100%;
}

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

.case__kpi {
  width: 100%;
  border-radius: var(--r-sm);
  padding: 0 8px 10px;
  text-align: center;
}

.case__kpi--after {
  padding-bottom: 0;
}

.case__kpi--before {
  background: #f3f6fa;
}

.case__kpi--after {
  background: #edf5ff;
}

.case__kpi-num {
  font-weight: var(--fw-bold);
}

.case__kpi--before .case__kpi-num {
  color: #4d5a6a;
}

.case__kpi--after .case__kpi-num {
  color: #1365d7;
}

.case__kpi-num .lg {
  font-size: var(--fs-20);
}

.case__kpi--after .case__kpi-num .lg {
  font-size: var(--fs-28);
}

.case__kpi-note {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #66768b;
}

.case__arrow {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #245eaa;
}

.case__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.case__step {
  background: #f0f6fc;
  border-radius: var(--r-sm);
  /* Figmaは高さ20px固定だが、実装のフォントレンダリングでは行高そのままだと
     背景ボックスが窮屈に見えるため上下に4pxずつ持たせる (+8px/行) */
  padding: 4px 10px;
  text-align: left;
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #285485;
}

.case__img {
  width: 224px;
  max-width: 100%;
  height: auto;
}

.case__img--02 {
  width: 244px;
}

/* ============================================================
   04 PACKAGE
   ============================================================ */
.package {
  background: var(--c-bg-page);
  border-top: 1px solid #b9c5d1;
  border-radius: 65px 65px 0 0;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.package__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  letter-spacing: 2px;
  color: #075bda;
  text-align: center;
}

.package__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #08254b;
  text-align: center;
}

.package__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  color: #696969;
  text-align: center;
  line-height: 1.7;
}

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

.plan {
  width: 100%;
  max-width: var(--container);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
}

.plan--a {
  background: #fcfdfe;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.plan--b {
  background: linear-gradient(to bottom, #eff7ff 0%, #ffffff 45%);
  border: 2px solid #5da9ff;
  box-shadow:
    0 0 40px 2px rgba(38, 120, 240, 0.3),
    0 12px 28px rgba(0, 77, 178, 0.16),
    0 2px 6px rgba(0, 77, 178, 0.08);
}

.plan__ribbon {
  position: absolute;
  left: 50%;
  top: -25px;
  transform: translateX(-50%);
  background: #0769e8;
  border: 2px solid #9fd2ff;
  border-radius: var(--r-pill);
  padding: 8px 28px;
  white-space: nowrap;
}

.plan__ribbon span {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: var(--c-white);
}

.plan__letter {
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  color: #08254b;
}

.plan__name {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #08254b;
  text-align: center;
}

.plan__for {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #08254b;
  text-align: center;
}

.plan__strike {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: #203854;
  text-align: center;
}

.plan__strike s {
  text-decoration: line-through;
}

.plan__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* Figmaは「30,000 円」と単位の前に空きがある。詰めると左寄りに見える */
  gap: 7px;
  font-weight: var(--fw-bold);
  color: #08254b;
  text-align: center;
}

.plan--b .plan__price {
  color: #0754d6;
}

.plan__price .num {
  font-size: var(--fs-32);
}

.plan__price .unit {
  font-size: var(--fs-22);
}

.plan__price-note {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  color: #08254b;
  text-align: center;
}

.plan__price-note strong {
  font-weight: var(--fw-bold);
}

.plan__divider {
  width: 100%;
  height: 2px;
  background: #e9f1fc;
}

.plan__feature {
  width: 100%;
  font-size: var(--fs-14);
  line-height: 1.7;
  color: #4097ff;
  /* .plan の gap:7px は letter/name/price など全子要素に効くため、gap を広げると
     カード構図全体が緩む。機能リストだけに padding-block を足し、項目間を 7+2+2=11px、
     リスト前後 (divider〜先頭 / 末尾〜note・term) の境界を 7+2=9px に広げる */
  padding-block: 2px;
}

.plan__feature--bold {
  font-weight: var(--fw-bold);
}

.plan__feature--dark {
  color: #203854;
  font-weight: var(--fw-medium);
}

.plan__note {
  width: 100%;
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: #4097ff;
  background: #f5f9ff;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  margin-block: 2px;
}

.plan--b .plan__note {
  background: #eef5ff;
  color: #203854;
}

.plan__term {
  width: 100%;
  background: #f5f8fc;
  border-radius: var(--r-sm);
  padding: 10px;
  text-align: center;
  filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.25));
}

.plan__term span {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #22252b;
}

.plan__icons {
  width: 120px;
  height: 100px;
  margin-top: 4px;
}

.package__recommend {
  width: 100%;
  background: linear-gradient(to right, #f0f7ff, #d3e7ff);
  border-radius: var(--r-md);
  padding: 18px 16px;
  text-align: center;
  color: #203854;
  display: flex;
  flex-direction: column;
  gap: 8px;
  filter: drop-shadow(3px 4px 6.5px rgba(0, 0, 0, 0.25));
  margin-top: 8px;
}

.package__recommend-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
}

.package__recommend-note {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  line-height: 1.7;
}

.package__footnote {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #203854;
  text-align: center;
  line-height: 1.7;
}

/* ============================================================
   05 MENU
   ============================================================ */
.menu {
  background: var(--c-white);
  border-top: 1px solid rgba(121, 117, 117, 0.52);
  border-radius: 65px 65px 0 0;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.menu__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  letter-spacing: 2px;
  color: #2c6fd1;
  text-align: center;
}

.menu__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  color: #08254b;
  text-align: center;
}

.menu__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #606b7a;
  text-align: center;
}

.menu-tabs {
  width: 100%;
  max-width: var(--container);
}

.menu-tabs__list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.menu-tabs__list::-webkit-scrollbar {
  display: none;
}

.menu-tabs__tab {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  color: var(--c-text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  white-space: nowrap;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
}

.menu-tabs__tab.is-active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: var(--c-white);
}

.menu-carousel-wrap {
  position: relative;
  width: 100%;
  max-width: var(--container);
  display: flex;
  align-items: center;
}

.menu-carousel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 16px;
  /* 左右16pxはカードのbox-shadow(blur 12px)がスクロールコンテナの外周でクリップされないための余白 */
  padding: 16px 16px 28px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.menu-carousel::-webkit-scrollbar {
  display: none;
}

/* モバイルでも「横スクロールできる」ことが伝わるよう、カードの左右端に
   小さめの矢印ボタンを重ねて表示する（デスクトップは下の @media で
   外側オーバーレイの大きいボタンに差し替える）。 */
.menu-tabs__prev,
.menu-tabs__next {
  display: flex;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--c-blue);
  font-size: var(--fs-16);
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(14, 41, 74, 0.18);
}

.menu-tabs__prev {
  left: 4px;
}

.menu-tabs__next {
  right: 4px;
}

.menu-tabs__prev:disabled,
.menu-tabs__next:disabled {
  opacity: 0.35;
  cursor: default;
}

/* fade-up は個々の.menu-catではなく.menu-carousel-wrapにまとめて付与している（index.html側）。
   理由: (1) .menu-carouselのoverflow-y:hiddenと個別カードのtranslateYが組み合わさると
   初期表示時にカード下端がクリップされる (2) 横スクロールで隠れているカードが
   IntersectionObserverの対象になり、スワイプするたびに1枚ずつフェードインする
   挙動になってしまうため。 */

.menu-cat {
  /* 1画面に1項目だけ見えるようにする（次カードの端が見えるpeek表示だと
     見切れて見えると好評でなかったため、矢印ボタンで横スクロールできる
     ことを明示する方針に変更）。 */
  flex: 0 0 100%;
  scroll-snap-align: start;
  background: var(--c-white);
  border: 1px solid #d6e8f7;
  border-radius: var(--r-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 10px 12px rgba(14, 41, 74, 0.11);
}

.menu-cat__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}

.menu-cat__tag {
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  letter-spacing: 2px;
  /* #3a7cbd (4.38:1) はデスクトップの11px表示でWCAG AA(4.5:1)をわずかに
     下回るため、既存トークンの --c-blue-mid (4.88:1) に変更 */
  color: var(--c-blue-mid);
}

.menu-cat__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #08254b;
}

.menu-cat__desc {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  color: #506682;
}

.menu-cat__img {
  width: 72px;
  height: 64px;
  object-fit: contain;
  margin-top: 4px;
  align-self: center;
}

.menu-cat__items {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.menu-item {
  width: 100%;
  background: #eff7fe;
  border: 1px solid #dceaf7;
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.menu-item__label {
  color: #253d5d;
}

.menu-item__label strong {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}

.menu-item__info {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  border: 1px solid var(--c-blue);
  border-radius: 50%;
  background: none;
  color: var(--c-blue);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  vertical-align: middle;
}

.menu-item__note {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
}

.menu-item__note[hidden] {
  display: none;
}

.menu-item__price {
  font-weight: var(--fw-black);
  color: #0754cb;
  text-align: right;
  width: 100%;
}

.menu-item__price .num {
  font-size: var(--fs-18);
}

.menu-item__price .unit {
  font-size: var(--fs-13);
}

.menu-cat__subhead {
  width: 100%;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-cat__subhead strong {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #08254b;
}

.menu-cat__subhead p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-14);
  color: #506682;
}

.menu-cat--custom {
  gap: 20px;
}

.menu-cat--custom img.menu-cat__hero {
  width: 250px;
  height: auto;
  max-width: 100%;
  align-self: center;
  margin-top: auto;
}

.menu-cat--custom .menu-cat__tag,
.menu-cat--custom .menu-cat__title,
.menu-cat--custom .menu-cat__desc {
  text-align: center;
}

.menu-cat--custom .menu-cat__tag {
  font-size: var(--fs-24);
}

.menu-cat--custom .menu-cat__title {
  color: #08254b;
}

.menu-quote {
  width: 100%;
  background: #eff7fe;
  border: 1px solid #dceaf7;
  border-radius: var(--r-md);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-quote__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: #08254b;
}

.menu-quote__price {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #08254b;
  text-align: right;
}

.menu__aftercare {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.menu__policy-card {
  width: 100%;
  background: var(--c-white);
  border-radius: var(--r-lg);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  box-shadow: 4px 8px 12px rgba(20, 56, 97, 0.06);
}

.menu__policy-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #102b50;
  text-align: center;
}

.menu__policy-accent {
  width: 54px;
  height: 4px;
  border-radius: var(--r-pill);
  background: #176bcd;
}

.policy {
  width: 100%;
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
}

.policy__num {
  width: 100%;
  text-align: center;
  border: 2px solid #176bcd;
  border-radius: var(--r-pill);
  padding: 2px 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #176bcd;
}

.policy__case {
  width: 100%;
  color: #102b50;
}

.policy__case span {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
}

.policy__case strong {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
}

.policy__arrow {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #176bcd;
}

.policy__result {
  width: 100%;
  background: #eaf5fe;
  border-radius: var(--r-sm);
  padding: 10px 16px;
  text-align: center;
}

.policy__result strong {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #176bcd;
}

.policy__result span {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #61758b;
}

/* ============================================================
   06 COVERAGE
   ============================================================ */
.coverage {
  background: var(--c-bg-page);
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-radius: 65px 65px 0 0;
}

.coverage__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  letter-spacing: 2px;
  color: #2c6fd1;
  text-align: center;
}

.coverage__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #10263e;
  text-align: center;
}

.coverage__heading em {
  font-style: normal;
  color: #0958a7;
}

.coverage__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  color: #606b7a;
  text-align: center;
}

.coverage__table-wrap {
  width: 100%;
  max-width: var(--container);
  overflow-x: auto;
}

.coverage__table {
  width: 100%;
  min-width: 350px;
  border-collapse: collapse;
  background: var(--c-white);
  border: 2px solid #dde3ec;
  border-radius: var(--r-md);
  overflow: hidden;
}

.coverage__table th,
.coverage__table td {
  padding: 10px 6px;
  text-align: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-11);
  border-top: 1px solid #dde3ec;
}

.coverage__table thead th {
  background: #1e5099;
  color: var(--c-white);
  border-top: none;
}

.coverage__table td:first-child,
.coverage__table th:first-child {
  text-align: left;
  background: #f5f8fc;
  color: #22252b;
}

.coverage__table thead th:first-child {
  background: #1e5099;
  color: var(--c-white);
}

.coverage__table tbody td {
  color: #606b7a;
}

.coverage__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: var(--container);
}

.coverage-card {
  width: 100%;
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.coverage-card__icon {
  width: 40px;
  height: auto;
}

.coverage-card__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coverage-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  color: #104982;
}

.coverage-card__text {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  color: #4f617b;
}

/* ============================================================
   07 SECURITY
   ============================================================ */
.security {
  background: var(--c-bg-page);
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.security__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  letter-spacing: 2px;
  color: #2c6fd1;
  text-align: center;
}

.security__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  color: #102b50;
  text-align: center;
}

.security__lead {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #606b7a;
  text-align: center;
}

.security-card {
  width: 100%;
  max-width: var(--container);
  background: var(--c-white);
  border-radius: var(--r-md);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  box-shadow: 4px 4px 4px rgba(97, 120, 154, 0.7);
}

.security-card__img {
  width: 96px;
  height: auto;
}

.security-card__img--03 {
  width: 94px;
}

.security-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.security-card__num-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* モバイルは横幅いっぱいの太いバーになっていて目立ちすぎたため、
   デスクトップと同じ丸バッジ（一回り小さいサイズ）に統一する。 */
.security-card__num {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #176bcd;
  color: var(--c-white);
  border-radius: 50%;
  padding: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
}

.security-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-15);
  color: #102b50;
}

.security-card__text {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #4f617b;
}


/* ============================================================
   08 FAQ
   ============================================================ */
.faq {
  background: var(--c-navy-2);
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.faq__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  letter-spacing: 2px;
  color: #51b8ff;
  text-align: center;
}

.faq__heading {
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  color: var(--c-white);
  text-align: center;
}

.faq-item {
  width: 100%;
  max-width: var(--container);
  background: var(--c-white);
  border: 2px solid #badbfa;
  border-radius: var(--r-md);
  /* paddingはsummary側に持たせる。ここに置くとバーの端がクリックできない */
  padding: 0;
}

.faq-item__q {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.faq-item__badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--r-pill);
  background: #096bdd;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
}

.faq-item__q-text {
  flex: 1;
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: #102b50;
}

.faq-item__toggle {
  flex-shrink: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: #096bdd;
  width: 16px;
  text-align: center;
}

.faq-item__toggle::before {
  content: "+";
}

.faq-item[open] .faq-item__toggle::before {
  content: "\2212";
}

.faq-item__a {
  padding: 0 16px 16px;
  font-size: var(--fs-15);
  line-height: 1.7;
  color: #35567a;
}

.faq-item__a strong {
  font-weight: var(--fw-bold);
}

/* neutralize <details> default marker, keep accessible semantics */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary {
  list-style: none;
}

.faq-item[open] .faq-item__toggle {
  transform: rotate(180deg);
}

/* ============================================================
   09 LIMITED CTA
   ============================================================ */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* 上はFAQとの間を空ける。下は波(105px)＋イラストとの重なりを保つ。
     イラストは bottom 基準なので、padding-top を変えても波との位置はずれない。
     ボタンとイラストの間に最低30px程度の余白を残す(design-review #2 指摘対応) */
  padding: 64px 16px 160px;
  background: linear-gradient(to bottom, #f5fcff 0%, #bfe8ff 55%, #3da1f0 100%);
  overflow: hidden;
}

.cta__deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  object-fit: cover;
}

.cta__deco--left {
  left: -3px;
  bottom: 0;
  width: 158px;
  height: 124px;
}

.cta__deco--right {
  right: -5px;
  bottom: 0;
  width: 150px;
  height: 127px;
}

.cta__wave {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  line-height: 0;
  z-index: 0;
}

.cta__wave img {
  width: 100%;
  height: 105px;
  display: block;
}

.cta__copy {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta__copy strong {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-22);
  color: #0f3670;
  line-height: 1.7;
}

.cta__copy p {
  font-weight: var(--fw-medium);
  font-size: var(--fs-15);
  color: #315576;
  line-height: 1.7;
}

/* FVボタンより縦を抑える。デスクトップ用の大きなpaddingをここに書くと
   モバイルにも漏れるので、上書きは1200px以上のブロックに置く。 */
.cta .btn-line {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 330px;
  padding: 12px 20px;
  gap: 2px;
}

/* ============================================================
   11 FOOTER
   ============================================================ */
.footer {
  background: #f8f8f8;
  padding: 56px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.footer__copy {
  font-weight: var(--fw-medium);
  font-size: var(--fs-12);
  /* 背景 #f8f8f8 に対して 4.73:1。WCAG AA (通常テキスト 4.5:1) を満たす */
  color: #6f6f6f;
  line-height: 1.7;
}

.footer__link {
  display: inline-block;
  padding-block: 12px;
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: #000;
  text-decoration: underline;
}

@media (max-width: 1199.98px) {
  /* 1199px以下(モバイルレイアウト帯)で、幅100%または max-content まで伸びる要素を
     コンテナ幅に収めて中央寄せする。これがないとタブレット幅で間延びして見える。
     767px以下では --container が内容幅と等しくなるため実質no-op。
     .menu__lead や .footer__copy は1行に収まり間延びしないため、意図的に対象外。 */
  .fv__top,
  .package__recommend,
  .package__footnote,
  .coverage__lead,
  .security__lead {
    max-width: var(--container);
    margin-inline: auto;
  }
}

/* ============================================================
   Desktop (1200px 以上) — 1280px 基準
   デスクトップ用のレイアウトは1280px基準の固定幅(.what__cards の max-width:1082px、
   .what__card--today の flex:0 0 505px など)で組んでいるため、1150px未満では
   これらがビューポートを超えて実測クリップが発生する(1140px以下で発生、1150px以上はクリーン)。
   よって下限は1200pxとする (1280pxだとWindowsのスクロールバー分で
   ビューポートが数px狭くなったときにデスクトップ版が当たらなくなるため)。
   ============================================================ */
@media (min-width: 1200px) {
  :root {
    --container: 1168px;
  }

  .br-pc {
    display: inline;
  }

  .br-sp {
    display: none;
  }

  .l-section {
    padding-left: max(20px, calc((100vw - 1280px) / 2 + 56px));
    padding-right: max(20px, calc((100vw - 1280px) / 2 + 56px));
  }

  /* デスクトップ全体を85%に縮小し、サイドの余白を増やして見やすくする。
     各要素の固定px値(幅・フォントサイズ・余白)を個別に書き換えるのは
     デスクトップブロック全体(1000行超)に及び手戻りリスクが高いため、
     zoomで一括縮小する(モダンブラウザで対応済み。Chromium/Safari/Firefox 126+)。
     FVだけは対象外: min-height:100vhで画面ぴったりに設計されているため、
     縮小すると画面下に空白ができてしまう。 */
  #what,
  #case,
  #package,
  #menu,
  #coverage,
  #security,
  #faq,
  #cta,
  .footer {
    zoom: 0.85;
  }

  /* ---------- FV ---------- */
  /* スクロールせずに1画面で収まるようにする (Figmaは852px固定) */
  .fv {
    min-height: 100vh;
    padding: 60px 40px 32px;
    background: var(--c-bg-fv);
  }

  .fv__bg {
    left: 0;
    top: -20px;
    width: 100%;
    height: calc(100% + 20px);
    max-width: none;
    object-fit: cover;
    object-position: top center;
  }

  .fv__top {
    max-width: 1200px;
    margin: 0 auto;
  }

  .fv__logo {
    position: absolute;
    left: 40px;
    top: 25px;
    width: 169px;
  }

  .fv__copy {
    margin-top: 42px;
    max-width: 580px;
  }

  .fv__heading-sub {
    font-size: 36px;
  }

  .fv__copy strong {
    font-size: 64px;
  }

  .fv__price-block {
    max-width: 451px;
    /* コピー枠(580px)の中で中央に置く。autoが無いと左寄せになる */
    margin: 21px auto 0;
  }

  .fv__price-pill {
    padding: 17px 36px;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(13, 51, 115, 0.08);
  }

  .fv__price-label {
    font-size: 22px;
  }

  .fv__price-amount .num {
    font-size: 48px;
  }

  .fv__price-amount .unit {
    font-size: 32px;
  }

  .fv__price-tax {
    font-size: 20px;
  }

  .fv__price-row {
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 11px;
  }

  .fv__price-note {
    font-size: 20px;
  }

  .fv__cta {
    width: 330px;
    margin-top: 40px;
    padding: 14px 20px;
    gap: 2px;
  }

  /* ---------- WHAT ---------- */
  .what {
    /* 上部の余白は斜め帯の装飾スペース (Figma: 見出しy=216 / カードy=410 / 全高880) */
    padding: 216px 56px 110px;
    gap: 42px;
  }

  /* 斜め帯。get_metadataのbbox y座標は実描画と50〜70pxずれていたため、
     角度と厚みはbboxから逆算し、垂直位置はget_screenshotの実描画に合わせている。 */
  .what__bands {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  /* Figmaの帯は端が角丸ではなく直角 */
  .what__band {
    position: absolute;
    transform: rotate(-3deg);
  }

  /* 水色だけ他2本と逆向きに傾いている(実描画から確認) */
  .what__band--light {
    left: 160px;
    top: -5px;
    width: 1201px;
    height: 27px;
    background: linear-gradient(to right, #8cc9ff 0%, #a9d9ff 45%, #d6ecff 100%);
    transform: rotate(3deg);
  }

  .what__band--blue {
    left: 290px;
    top: -28px;
    width: 1121px;
    height: 22px;
    background: linear-gradient(to right, #1e56ab 0%, var(--c-blue-mid) 50%, #4a90e8 100%);
  }

  .what__band--navy {
    left: 500px;
    top: -11px;
    width: 951px;
    height: 36px;
    background: linear-gradient(to right, #061a3a 0%, var(--c-navy) 45%, #143f80 100%);
  }

  /* Figmaではイラストがテキストの右上に重なり、下端だけ本文と揃う */
  .what__intro {
    position: relative;
    display: block;
    width: 100%;
    max-width: 1034px;
    margin-inline: auto;
  }

  .what__title {
    font-size: 40px;
    text-align: left;
    max-width: 900px;
  }

  /* イラスト左端(introからの相対x=698px)を超えると3行目が被るため、本文だけ狭める */
  .what__lead {
    font-size: 16px;
    text-align: left;
    max-width: 680px;
    margin-top: 12px;
  }

  .what__hero {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 336px;
    height: auto;
    margin-top: 0;
  }

  .what__cards {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 107px;
    width: 100%;
    max-width: 1082px;
    margin-inline: auto;
  }

  /* カード間の「>」(Figma 170:23) */
  .what__cards::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 181px;
    width: 13px;
    height: 13px;
    border-top: 3px solid #0e2a47;
    border-right: 3px solid #0e2a47;
    transform: translateX(-50%) rotate(45deg);
  }

  .what__card--today::before,
  .what__card--system::before {
    position: absolute;
    left: 10px;
    top: 26px;
    writing-mode: vertical-rl;
    font-size: 30px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    color: #ced6e1;
  }

  .what__card--today::before {
    content: "TODAY";
  }

  .what__card--system::before {
    content: "SYSTEM";
  }

  .what__card {
    position: relative;
    max-width: none;
    min-height: 360px;
    text-align: left;
    align-items: flex-start;
    padding: 34px 32px 32px 52px;
  }

  .what__card--today {
    flex: 0 0 505px;
  }

  .what__card--system {
    flex: 0 0 470px;
    padding-left: 68px;
  }

  /* Figmaではカード右上に重ねて配置される(フローには入らない) */
  .what__card-img {
    position: absolute;
    top: 14px;
    right: 13px;
    width: 119px;
    height: 88px;
    margin: 0;
  }

  .what__card-img--system {
    top: 32px;
    right: 25px;
    width: 156px;
    height: 109px;
  }

  .what__status,
  .what__card-heading {
    text-align: left;
  }

  .what__status {
    width: auto;
  }

  .what__card-heading {
    font-size: 22px;
  }

  /* Figmaの折り返し位置に合わせる (Bullet w=358 / 見出し TODAY 419・SYSTEM 342) */
  .what__bullets,
  .what__card--system .what__bullets {
    max-width: 358px;
  }

  .what__card--today .what__card-heading {
    max-width: 419px;
  }

  .what__card--system .what__card-heading {
    max-width: 342px;
  }

  /* ---------- CASE ---------- */
  .case {
    padding: 64px 56px;
    gap: 28px;
  }

  .case__head {
    max-width: 1168px;
    gap: 14px;
  }

  .case__heading {
    font-size: 36px;
  }

  .case__lead {
    font-size: 16px;
  }

  .case__card {
    max-width: 1168px;
    flex-direction: row;
    align-items: stretch;
    text-align: left;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .case__card--02 {
    flex-direction: row-reverse;
  }

  .case__card-content {
    flex: 1;
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .case__card-side {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .case__card-side img {
    width: 100%;
    height: auto;
    max-width: 340px;
  }

  .case__tag,
  .case__result {
    text-align: left;
  }

  .case__tag .n {
    font-size: 24px;
  }

  /* Figmaは「CASE 01　　SNS運用支援 / …」が1行 */
  .case__tag .sub {
    display: inline;
    margin-left: 24px;
  }

  .case__result {
    font-size: 24px;
  }

  /* Figmaはbefore/afterとも h=92 で高さが揃う */
  .case__kpis {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
  }

  /* Figmaのデスクトップは右向きの塗り三角(モバイルは下向き矢印) */
  .case__arrow {
    align-self: center;
    font-size: 0;
  }

  .case__arrow::before {
    content: "▶";
    font-size: 18px;
  }

  .case__kpi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 16px;
  }

  .case__kpi-note {
    line-height: 1.1;
  }

  .case__kpi-num .lg {
    font-size: 32px;
  }

  /* Figmaはafterのほうが大きい (before h=56 / after h=66) */
  .case__kpi--after .case__kpi-num .lg {
    font-size: 40px;
  }

  /* Figmaは4カラム(h=76)。CASE 01は項目が5つあるので均等割りで1行に収める */
  .case__steps {
    flex-direction: row;
    width: 100%;
  }

  .case__step {
    flex: 1;
    padding: 19px 10px;
  }

  .case__img {
    width: 100%;
    height: auto;
    max-width: 320px;
  }

  /* ---------- PACKAGE ---------- */
  /* Figma: ラベルy=48 / 見出しy=92 / リードy=160 / plansy=254 */
  .package {
    padding: 36px 100px 32px;
    gap: 12px;
  }

  /* リード下端(214)からplansまで40px。詰めるとリボンが本文に重なる */
  .package__plans {
    margin-top: 18px;
  }

  /* Figma: ラベルh=30 / 見出しh=54 */
  .package__label {
    line-height: 1.25;
  }

  .package__heading {
    font-size: 36px;
    line-height: 1.5;
  }

  .package__lead {
    font-size: 16px;
  }

  .package__plans {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    /* A460 + gap20 + B600 = 1080。1168だと右に余りが出て左寄りに見える */
    max-width: 1080px;
  }

  .plan {
    max-width: none;
    padding: 26px 20px 20px;
  }

  .plan--a {
    width: 460px;
    flex-shrink: 0;
  }

  .plan--b {
    width: 600px;
    flex-shrink: 0;
    padding-top: 40px;
    /* Figmaのデスクトップは白地に波の装飾 (モバイルのグラデーションは使わない) */
    background: var(--c-white);
  }

  /* カードにoverflow:hiddenを掛けるとリボンが切れるので、波側でクリップする */
  .plan__wave {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 84px;
    line-height: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    overflow: hidden;
  }

  .plan__wave img {
    width: 100%;
    height: 84px;
  }

  .plan__letter,
  .plan__name,
  .plan__for,
  .plan__strike {
    position: relative;
    z-index: 1;
  }

  /* Figmaは各項目に青い●が付く */
  .plan__feature::before {
    content: "●";
    margin-right: 8px;
    font-size: 0.7em;
    color: #4a9bf5;
    vertical-align: 0.15em;
  }

  /* Figma: ribbon w=275 h=52 / テキスト 16px */
  .plan__ribbon {
    padding: 8px 28px;
  }

  .plan__ribbon span {
    font-size: 14px;
  }

  .plan__letter {
    font-size: 26px;
  }

  .plan__name {
    font-size: 19px;
  }

  .plan__for {
    font-size: 14px;
  }

  .plan__price {
    gap: 10px;
  }

  .plan__price .num {
    font-size: 44px;
  }

  .plan__price .unit {
    font-size: 32px;
  }

  /* font-size/line-heightは tests/spacing-adjustment.test.sh が検知する
     「機能リストの窮屈さ解消(padding-block:2px)」と直結する数値のため、
     PACKAGEのコンパクト化ではここには手を入れない */
  .plan__feature,
  .plan__note {
    text-align: left;
    font-size: 15px;
  }

  .plan__icons {
    position: absolute;
    right: 24px;
    top: 24px;
    margin-top: 0;
  }

  .package__recommend {
    max-width: 1168px;
  }

  .package__recommend-title {
    font-size: 24px;
  }

  .package__recommend-note {
    font-size: 15px;
  }

  .package__footnote {
    max-width: 1168px;
    font-size: 14px;
  }

  /* ---------- MENU ---------- */
  .menu {
    padding: 56px;
  }

  .menu__heading {
    font-size: 36px;
  }

  .menu__lead {
    font-size: 20px;
  }

  .menu-tabs__list {
    gap: 12px;
  }

  .menu-tabs__tab {
    padding: 12px 22px;
    font-size: var(--fs-16);
  }

  .menu-carousel {
    gap: 24px;
  }

  /* 矢印はカルーセル行の外側に絶対配置でオーバーレイする（インラインでflex幅を
     消費すると1168pxコンテナ内に「3枚+次カードの端」が収まらないため）。
     .menu 自体のpadding(56px)が左右の逃げ場になる。 */
  .menu-tabs__prev,
  .menu-tabs__next {
    display: flex;
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--c-border);
    background: var(--c-white);
    color: var(--c-blue);
    font-size: var(--fs-20);
    line-height: 1;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(14, 41, 74, 0.15);
  }

  .menu-tabs__prev {
    left: -56px;
  }

  .menu-tabs__next {
    right: -56px;
  }

  /* 1画面に2枚だけ見える幅（次カードの端が見切れないよう、ぴったり2枚分にする）。
     calc()はコンテナの実幅を基準にするため、768〜1199pxのタブレット帯を含む
     デスクトップ表示のどの幅でも常に2枚ぴったり収まる。 */
  .menu-cat {
    flex: 0 0 calc(50% - 12px);
    padding: 16px;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
  }

  .menu-cat__head {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
  }

  .menu-cat__title {
    font-size: 19px;
    text-align: left;
  }

  .menu-cat__desc {
    text-align: left;
  }

  .menu-cat__img {
    width: 60px;
    height: 53px;
  }

  .menu-cat__tag {
    text-align: left;
    font-size: 11px;
  }

  .menu-item__label,
  .menu-cat__subhead strong,
  .menu-cat__subhead p {
    text-align: left;
  }

  .menu-cat__subhead {
    align-items: flex-start;
  }

  .menu-item {
    padding: 12px;
    align-items: flex-start;
  }

  .menu-item__label strong {
    font-size: 15px;
  }

  .menu-item__price .num {
    font-size: var(--fs-18);
  }

  .menu-item__price .unit {
    font-size: var(--fs-13);
  }

  .menu-cat--custom {
    align-items: center;
    text-align: center;
  }

  .menu-cat--custom .menu-cat__tag,
  .menu-cat--custom .menu-cat__title {
    text-align: center;
  }

  .menu-cat--custom .menu-quote {
    flex-direction: row;
    justify-content: space-between;
  }

  /* 340px幅カードに合わせて406px→200pxへ比例縮小（Figma上のデスクトップ版レドラインなし） */
  .menu-cat--custom img.menu-cat__hero {
    width: 380px;
  }

  .menu__aftercare {
    max-width: 1168px;
  }

  .menu__policy-title {
    font-size: 26px;
  }

  /* Figma: カード内padding 28px / policy幅1112 */
  .menu__policy-card {
    padding: 32px 28px;
  }

  /* Figma: num62 + case430 + 矢印46 + 料金464 (gapはすべて18px) */
  .policy {
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 14px 38px 14px 18px;
    text-align: left;
  }

  .policy__num {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .policy__case {
    flex: 0 0 430px;
    width: auto;
    text-align: left;
  }

  .policy__arrow {
    width: 46px;
    flex-shrink: 0;
    text-align: center;
    font-size: 24px;
    transform: rotate(-90deg);
  }

  /* Figmaは料金枠の中は中央揃え */
  .policy__result {
    flex: 0 0 464px;
    width: auto;
    text-align: center;
  }

  /* Figma: 「こんな時」h=19 / 本文h=25 */
  .policy__case span {
    line-height: 1.58;
  }

  .policy__case strong {
    line-height: 1.25;
  }

  /* ---------- COVERAGE ---------- */
  /* Figma: ラベルy=36 / 表y=256 / チェックリストy=525 / 3カードy=781 (間隔24px) */
  .coverage {
    padding: 36px 60px 40px;
    gap: 24px;
  }

  .coverage__heading {
    font-size: 36px;
  }

  .coverage__lead {
    font-size: 16px;
  }

  .coverage__table-wrap {
    max-width: 760px;
  }

  .coverage__table th,
  .coverage__table td {
    font-size: 14px;
    padding: 12px 8px;
  }

  /* デスクトップはチェックリストが先、3カードが後 (モバイルは逆順) */
  .coverage__cards {
    order: 1;
    flex-direction: row;
    max-width: 1160px;
    align-items: stretch;
  }

  .coverage-card {
    flex: 1;
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }

  .coverage-card__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .coverage-card__title,
  .coverage-card__text {
    text-align: left;
  }

  /* ---------- SECURITY ---------- */
  .security {
    padding: 60px 96px;
    gap: 12px;
  }

  .security__heading {
    font-size: 36px;
  }

  .security__lead {
    font-size: 16px;
  }

  .security-card {
    max-width: 936px;
    flex-direction: row;
    text-align: left;
    align-items: center;
    border-left: 7px solid #1974d8;
    gap: 28px;
    padding: 12px 20px;
  }

  .security-card__body {
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }

  /* Figmaは正円(56×56)。モバイル基準は40pxなのでデスクトップだけ広げる */
  .security-card__num {
    width: 56px;
    height: 56px;
  }

  .security-card__title {
    font-size: 19px;
    text-align: left;
  }

  .security-card__text {
    text-align: left;
  }

  /* ---------- FAQ ---------- */
  .faq {
    padding: 56px 180px 64px;
  }

  .faq__heading {
    font-size: 40px;
  }

  .faq-item {
    max-width: 1168px;
    padding: 0;
  }

  .faq-item__q {
    padding: 16px 22px;
  }

  .faq-item__q-text {
    font-size: 18px;
  }

  .faq-item__a {
    padding: 0 22px 16px;
    font-size: 15px;
  }

  /* ---------- LIMITED CTA ---------- */
  /* 下のpadding-bottomは波(180px)の高さ以上を保たないとボタンと波が重なる。
     左右のdeco(イラスト)はボタンと水平方向で重ならない配置のため、
     モバイルと違い「ボタン〜decoの空白」を気にせず詰められる。 */
  .cta {
    padding: 72px 96px 190px;
    gap: 24px;
  }

  .cta__copy {
    gap: 14px;
  }

  .cta__copy strong {
    font-size: 40px;
    line-height: 1.45;
  }

  .cta__copy p {
    font-size: 16px;
    line-height: 1.44;
  }

  .cta__circle {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: #c2e7ff;
    opacity: 0.55;
    z-index: 0;
  }

  .cta__circle--left {
    left: -105px;
    top: 120px;
    width: 260px;
    height: 260px;
  }

  .cta__circle--right {
    left: 1160px;
    top: 80px;
    width: 220px;
    height: 220px;
  }

  /* Figma: Bottom wave h=180 */
  .cta__wave,
  .cta__wave img {
    height: 180px;
  }

  .cta__deco--left {
    left: -29px;
    top: auto;
    bottom: 0;
    width: 397px;
    height: 312px;
  }

  .cta__deco--right {
    right: auto;
    left: 912px;
    top: auto;
    bottom: 0;
    width: 368px;
    height: 312px;
  }

  /* Figmaは429pxだが横に広く見えるため控えめにしている。
     max-widthはベース(モバイル用330px)を上書きしないと380pxが効かない */
  .cta .btn-line {
    width: 380px;
    max-width: 380px;
    padding: 14px 20px;
    gap: 2px;
  }

  .cta .btn-line__icon {
    width: 40px;
    height: 36px;
  }

  .cta .btn-line__label {
    font-size: 24px;
  }

  .cta .btn-line__note {
    font-size: 13px;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    padding: 28px 40px;
  }

  .footer__copy {
    font-size: 12px;
  }

  .footer__link {
    font-size: 13px;
  }
}

@media (min-width: 1400px) {
  .cta__deco--right {
    left: auto;
    right: -60px;
  }
}

/* ============================================================
   Continuous section backgrounds
   Blend inside existing padding, keeping the content positions intact.
   ============================================================ */
.fv::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 110px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #fff);
}

.what,
.case,
.package,
.menu,
.coverage {
  border-top: 0;
  border-radius: 0;
}

.what {

  background: #fff;

}
.case {
  background: linear-gradient(#fff, #fafcff 48px);
}
.package {
  background: linear-gradient(#fafcff, var(--c-bg-page) 48px);
}
.menu {
  background: linear-gradient(var(--c-bg-page), #fff 48px);
}
.coverage {
  background: linear-gradient(#fff, var(--c-bg-page) 48px);
}
.faq {
  background: var(--c-navy-2);
}
.cta {
  background: linear-gradient(to bottom, #f5fcff 0%, #bfe8ff 55%, #3da1f0 100%);
}

@media (min-width: 1200px) {
  /* Static accents sit fully below the FV blend instead of clipping its edge. */
  .what__bands {
    opacity: 0.55;
  }
  .what__band--light {
    top: 54px;
  }
  .what__band--blue {
    top: 70px;
  }
  .what__band--navy {
    top: 90px;
  }
}