/* Button */
.btn-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 30px;
  font-weight: 500;
  color: var(--c-white);
  text-align: center;
  background: var(--c-gold);
  border-radius: 4px;
}

/* 折り返しても途中で割らせない塊 */
.chunk { display: inline-block; }

/* PCだけで折り返す位置 */
.br-pc { display: inline; }

/* SPだけで折り返す位置 */
.br-sp { display: none; }

/* 塊ごとに左から右へ変化させる */
.accent {
  background: linear-gradient(90deg, var(--c-pink), var(--c-coral));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Motion */
@keyframes fade-up {
  from { opacity: 0; translate: 0 40px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fade-left {
  from { opacity: 0; translate: -40px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes fade-right {
  from { opacity: 0; translate: 40px 0; }
  to { opacity: 1; translate: 0 0; }
}

/* JSが動く環境でだけ隠す */
@media (scripting: enabled) {
  .fade:not(.is-shown) {
    opacity: 0;
    translate: 0 40px;
  }

  .fade--left:not(.is-shown) { translate: -40px 0; }
  .fade--right:not(.is-shown) { translate: 40px 0; }

  .fade.is-shown { animation: fade-up 1800ms ease 200ms backwards; }

  .fade--left.is-shown { animation-name: fade-left; }
  .fade--right.is-shown { animation-name: fade-right; }

  .fade--delay-2.is-shown { animation-delay: 400ms; }
  .fade--delay-3.is-shown { animation-delay: 600ms; }
  .fade--delay-4.is-shown { animation-delay: 800ms; }
  .fade--delay-5.is-shown { animation-delay: 1000ms; }
}

/* SPだけ向きを変える */
@media (scripting: enabled) and (max-width: 768px) {
  .fade--sp-left:not(.is-shown) { translate: -40px 0; }
  .fade--sp-right:not(.is-shown) { translate: 40px 0; }

  .fade--sp-left.is-shown { animation-name: fade-left; }
  .fade--sp-right.is-shown { animation-name: fade-right; }
}

@media (prefers-reduced-motion: reduce) {
  .fade:not(.is-shown),
  .fade.is-shown {
    opacity: 1;
    translate: 0 0;
    animation: none;
  }
}

/* Hover */
.header-logo,
.header-nav a,
.drawer-nav a,
.btn-cta,
.chat-btn,
.faq-q { transition: opacity 200ms ease; }

.header-logo:hover,
.btn-cta:hover { opacity: .7; }

.header-nav a:hover,
.drawer-nav a:hover,
.chat-btn:hover,
.faq-q:hover { opacity: .6; }

/* Header */
.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 48px;
}

.header-logo {
  font-family: var(--ff-en);
  font-size: 28px;
  font-weight: 700;
  color: var(--c-gold-logo);
  white-space: nowrap;
}

.header-nav ul {
  display: flex;
  gap: 24px;
}

.header-nav a {
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--c-text);
  white-space: nowrap;
}

.header-cta {
  width: 180px;
  height: 48px;
  font-size: 14px;
  letter-spacing: .04em;
}

.header-burger {
  display: none;
  flex-direction: column;
  gap: 7px;
  width: 24px;
  height: 24px;
  padding: 9px 0 0;
}

.header-burger span {
  display: block;
  height: 1px;
  background: var(--c-ink);
}
/* Drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  justify-content: center;
  padding-block: 60px 97px;
  background: var(--c-white);
  opacity: 0;
  visibility: hidden;
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.drawer-inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
  width: 316px;
  max-width: calc(100% - 40px);
}

.drawer-logo {
  font-family: var(--ff-en);
  font-size: 24px;
  font-weight: 700;
  color: var(--c-gold-logo);
  text-align: center;
}

.drawer-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.drawer-nav a {
  font-size: 22px;
  font-weight: 700;
  line-height: 33px;
  color: var(--c-text);
}

.drawer-cta {
  height: 72px;
  font-size: 18px;
  font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
  .drawer { transition: opacity .3s ease, visibility .3s ease; }
}

/* Footer */
.site-footer .inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-emblem {
  width: 55.1px;
  height: 74.1px;
  object-fit: contain;
}

.footer-copy {
  font-size: 12px;
  line-height: 1.2;
  color: var(--c-white);
  text-align: center;
}
/* FV */
.fv {
  position: relative;
  overflow: hidden;
  padding-top: 45px;
  background: var(--c-black) url(../img/fv-new-pc.png) no-repeat center / cover;
  isolation: isolate;
}

.fv::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgb(0 0 0 / .85);
  content: "";
}

.fv-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
  width: 100%;
  max-width: 900px;
}

.fv-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.fv-emblem {
  width: 107px;
  height: 107px;
  object-fit: contain;
}

.fv-copy,
.fv-message,
.fv-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fv-copy { gap: 24px; }
.fv-message { gap: 24px; }

.fv-kicker {
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: .03em;
  color: var(--c-white);
}

.fv-head {
  gap: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .03em;
  color: var(--c-white);
  text-align: center;
}

.fv-head > span {
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: max-content;
  place-items: start;
  white-space: nowrap;
}

.fv-head b,
.fv-head small {
  grid-area: 1 / 1;
  font: inherit;
}

.fv-head b { font-size: 46px; }

.fv-head > span:nth-child(1) small {
  margin-top: 16.54px;
  margin-left: 295px;
  font-size: 32px;
}

.fv-head > span:nth-child(2) small {
  margin-top: 19.52px;
  margin-left: 372px;
  font-size: 28px;
}

.fv-description {
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: .03em;
  color: var(--c-white);
  text-align: center;
}

.fv-cta {
  height: 72px;
  padding-inline: 40px;
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  background: #cfa55b;
}

/* LISAがおすすめな人 */
.recommended {
  padding: 79px var(--pad-x);
  overflow: hidden;
  background: var(--c-bg-features);
}

.recommended-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.recommended-head {
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 880px;
  max-width: 100%;
}

.recommended-head h2 {
  font-size: 56px;
  line-height: normal;
  color: var(--c-ink);
}

.recommended-head p,
.recommended-card p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-sub);
}

.recommended-carousel { width: 100%; }

.recommended-track {
  display: flex;
  gap: 18px;
  width: auto;
  margin-right: calc(50% - 50vw);
  padding-right: max(var(--pad-x), calc((100vw - var(--w-wide)) / 2));
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 64px), transparent 100%);
}

.recommended-track::-webkit-scrollbar { display: none; }

.recommended-track.is-at-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.recommended-card {
  display: flex;
  flex: 0 0 370px;
  flex-direction: column;
  gap: 16px;
  scroll-snap-align: start;
}

.recommended-card > img,
.recommended-card__image {
  width: 370px;
  height: 370px;
  overflow: hidden;
  object-fit: cover;
  border-radius: 20px;
}

.recommended-card--02 > img { object-position: 85% center; }
.recommended-card--04 > img { object-position: 60% center; }
.recommended-card--08 > img { object-position: 39% center; }

.recommended-card__image { position: relative; }

.recommended-card__image img {
  position: absolute;
  top: -8.66%;
  left: -17.67%;
  width: 128.41%;
  height: 128.41%;
  max-width: none;
  object-fit: cover;
}

.recommended-card p { padding-inline: 10px; }

.recommended-card strong {
  color: var(--c-ink);
  font-weight: inherit;
}

.recommended-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  opacity: .5;
}

.recommended-nav button,
.recommended-nav img {
  width: 36px;
  height: 24px;
}

/* Section header（他セクションでも使う） */
.section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  text-align: center;
}

.section-label {
  font-family: var(--ff-en);
  font-size: 14px;
  font-weight: 700;
  line-height: 16.95px;
  color: var(--c-coral);
  text-transform: uppercase;
}

.section-title {
  font-size: 56px;
  font-weight: 700;
  line-height: 82.65px;
  color: var(--c-ink);
}

.section-title--gold { color: var(--c-gold); }
/* 経営スタイル */
.style-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.style-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 24px;
}

.style-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  line-height: 27.2px;
  color: var(--c-sub);
  text-align: center;
}

.style-map {
  width: 100%;
  max-width: var(--w-mid);
  aspect-ratio: 1000 / 616.707;
  border-radius: 20px;
}
/* 提供内容 */
.features-list {
  display: flex;
  flex-direction: column;
  gap: 110.2px;
  margin-top: 100.78px;
}

.feature-label {
  font-size: 22px;
  font-weight: 700;
  line-height: 28.3px;
  color: var(--c-gold);
}

.feature-title {
  margin-top: 11.14px;
  font-size: 48px;
  font-weight: 700;
  line-height: 59px;
  color: var(--c-ink);
}

.feature-body {
  max-width: 600px;
  margin-top: 26.36px;
  font-size: 17px;
  font-weight: 600;
  line-height: 27px;
  color: var(--c-sub);
}

/* 空行1行ぶん */
.feature-body p + p { margin-top: 27px; }

.feature-media { margin-top: 59.83px; }

.feature--online .feature-media { margin-top: 36px; }

.feature-media--tags { margin-top: 36px; }

.feature-media--chat { margin-top: 31.84px; }

.chat-track img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 3px 4px 10px rgb(0 0 0 / .1);
}

.chat-nav { display: none; }

.feature-media--duo {
  display: flex;
  gap: 14.53px;
  align-items: flex-start;
  margin-top: 24px;
}

.feature-media--duo img {
  min-width: 0;
  border-radius: 12px;
  box-shadow: 3px 4px 10px rgb(0 0 0 / .1);
}

.feature-media--duo img:first-child {
  flex: 0 1 450px;
  aspect-ratio: 450 / 355.744;
}

/* カンプで2枚目だけ下にずれている */
.feature-media--duo img:last-child {
  flex: 0 1 335.473px;
  margin-top: 66.3px;
  aspect-ratio: 335.473 / 256;
}

.chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--c-sub);
  border: 1px solid var(--c-sub);
  border-radius: 50%;
}

.feature-media--tags img {
  width: 100%;
  aspect-ratio: 800 / 346;
  object-fit: cover;
  border: 3px solid var(--c-gold);
  border-radius: 12px;
  box-shadow: 3px 4px 10px rgb(0 0 0 / .1);
}

.feature-media--pair {
  display: flex;
  gap: 20px;
}

/* 写真の共通の見た目 */
.feature-media--pair img,
.feature-grid {
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 3px 4px 10px rgb(0 0 0 / .1);
}

.feature-media--pair img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 390 / 215.175;
}

.feature-title-sub {
  display: block;
  font-size: 42px;
  line-height: 54.6px;
}

.feature-split {
  display: flex;
  gap: 40px;
  max-width: 760.47px;
  margin-top: 23.18px;
}

.feature-split .feature-body {
  flex: 1 1 380.45px;
  min-width: 0;
  margin-top: 0;
}

.feature-grid {
  flex: 0 1 340.02px;
  min-width: 0;
  margin-top: 17.78px;
  aspect-ratio: 340.02 / 382.762;
}

.feature-laptops {
  display: flex;
  gap: 27.9px;
  margin-top: 39.84px;
}

.feature-laptops img {
  flex: 1;
  min-width: 0;
  aspect-ratio: 386.05 / 233.19;
}
/* CTA */
.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cta-lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 29.52px;
  color: var(--c-white);
}

.cta-title {
  margin-top: 16px;
  font-size: 56px;
  font-weight: 700;
  line-height: 82.65px;
}

.cta-sub {
  margin-top: 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 24.86px;
  color: var(--c-white);
}

.cta-btn {
  min-height: 72px;
  max-width: 100%;
  margin-top: 40px;
  padding-inline: 40px;
  font-size: 16px;
  font-weight: 700;
}
/* 導入事例 */
.cases-inner {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.cases-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 30px;
}

.section-header--start {
  align-items: flex-start;
  text-align: left;
}

.cases-lead {
  max-width: var(--w-lead);
  font-size: 17px;
  font-weight: 600;
  line-height: 27.2px;
  color: var(--c-sub);
}

.cases-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.case {
  padding: 30px;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 12px;
  box-shadow: 2px 4px 12px rgb(0 0 0 / .14);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 19.6px;
  letter-spacing: .42px;
}

.case-meta__no { color: var(--c-ink); }
.case-meta__who { color: var(--c-sub); }

/* 見出しコピーとグラフ */
.case-head {
  /* 内容幅940pxを基準に、狭くなった分だけ縮める */
  --cs: min(1px, (83.3333vw - 60px) / 940);

  display: flex;
  align-items: flex-start;
}

.case-text {
  flex: 0 1 auto;
  min-width: 0;
  margin-right: calc(-24 * var(--cs));
}

.case-copy .chunk {
  vertical-align: top;
  white-space: nowrap;
}

.case-copy__lead {
  font-family: var(--ff-en);
  font-size: calc(26 * var(--cs));
  font-weight: 700;
  line-height: calc(23.19 * var(--cs));
  letter-spacing: calc(.5 * var(--cs));
  color: var(--c-ink);
}

.case-copy__main {
  font-weight: 700;
  color: var(--c-gold);
}

.case-copy__row { display: block; }

.case-fig { font-family: var(--ff-en); }

.case-copy__ink { color: var(--c-ink); }

.case-chart {
  flex: none;
  margin-top: calc(26 * var(--cs));
  margin-right: calc(23.74 * var(--cs));
  margin-left: auto;
  width: calc(414 * var(--cs));
}

.case--01 .case-chart { width: calc(426 * var(--cs)); }

.case--01 .case-copy { margin-top: calc(66.96 * var(--cs)); }

.case--01 .case-copy__main {
  margin-top: calc(6.73 * var(--cs));
  font-size: calc(59 * var(--cs));
  line-height: calc(82.9 * var(--cs));
  letter-spacing: calc(1.78 * var(--cs));
}

.case--01 .case-fig { font-size: calc(88 * var(--cs)); }

.case--01 .case-copy__row + .case-copy__row { margin-top: calc(-2.15 * var(--cs)); }

/* カンプの枠座標どおりに1語ずつ置く */
.case--01 .case-copy__row:first-child .chunk:nth-child(1) {
  width: calc(180 * var(--cs));
  margin-top: calc(9.46 * var(--cs));
  line-height: calc(64.97 * var(--cs));
  letter-spacing: calc(1.39 * var(--cs));
}

.case--01 .case-copy__row:first-child .chunk:nth-child(2) {
  width: calc(44 * var(--cs));
  margin-left: calc(.3 * var(--cs));
}

.case--01 .case-copy__row:first-child .chunk:nth-child(3) {
  width: calc(181 * var(--cs));
  margin-left: calc(4.25 * var(--cs));
}

.case--01 .case-copy__row:last-child .chunk:nth-child(1) { width: calc(181 * var(--cs)); }

.case--01 .case-copy__row:last-child .chunk:nth-child(2) {
  width: calc(105 * var(--cs));
  margin-left: calc(-3.25 * var(--cs));
  letter-spacing: calc(7 * var(--cs));
}

.case--01 .case-copy__row:last-child .chunk:nth-child(3) {
  width: calc(166 * var(--cs));
  margin-left: calc(-.87 * var(--cs));
  letter-spacing: calc(-3.67 * var(--cs));
}

.case--02 .case-copy { margin-top: calc(78.15 * var(--cs)); }

.case--02 .case-copy__main {
  margin-top: calc(10.54 * var(--cs));
  font-size: calc(49 * var(--cs));
  line-height: calc(69.74 * var(--cs));
  letter-spacing: calc(1.49 * var(--cs));
}

.case--02 .case-fig { font-size: calc(74 * var(--cs)); }
.case--02 .case-copy__ink { font-size: calc(26 * var(--cs)); }

.case--02 .case-copy__row:first-child { line-height: calc(54.65 * var(--cs)); }

.case--02 .case-copy__row + .case-copy__row { margin-top: calc(5.32 * var(--cs)); }

.case--02 .case-copy__row:first-child .chunk:nth-of-type(1) { width: calc(451 * var(--cs)); }

.case--02 .case-copy__row:last-child .chunk:nth-of-type(1) {
  width: calc(214 * var(--cs));
  margin-top: calc(21.55 * var(--cs));
  line-height: calc(35.52 * var(--cs));
}

.case--02 .case-copy__row:last-child .chunk:nth-of-type(2) {
  width: calc(150 * var(--cs));
  margin-left: calc(3 * var(--cs));
}

.case--02 .case-copy__row:last-child .chunk:nth-of-type(3) {
  width: calc(135 * var(--cs));
  margin-left: calc(-.4 * var(--cs));
  font-size: calc(48 * var(--cs));
}

.case--03 .case-copy { margin-top: calc(66.14 * var(--cs)); }

.case--03 .case-copy__main {
  margin-top: calc(11.31 * var(--cs));
  font-size: calc(49 * var(--cs));
  line-height: calc(70 * var(--cs));
  letter-spacing: 0;
}

.case--03 .case-fig { font-size: calc(74 * var(--cs)); }
.case--03 .case-copy__ink { font-size: calc(29 * var(--cs)); }

.case--03 .case-copy__row + .case-copy__row { margin-top: calc(2.04 * var(--cs)); }

.case--03 .case-copy__row:first-child .chunk:nth-of-type(1) {
  width: calc(194 * var(--cs));
  letter-spacing: calc(4 * var(--cs));
}

.case--03 .case-copy__row:first-child .chunk:nth-of-type(2) {
  width: calc(300 * var(--cs));
  margin-top: calc(7.88 * var(--cs));
  margin-left: calc(10.37 * var(--cs));
  line-height: calc(55 * var(--cs));
}

.case--03 .case-copy__row:last-child .chunk:nth-of-type(1) {
  width: calc(87 * var(--cs));
  margin-top: calc(23 * var(--cs));
  margin-left: calc(7.15 * var(--cs));
  line-height: calc(39 * var(--cs));
}

.case--03 .case-copy__row:last-child .chunk:nth-of-type(2) {
  width: calc(48 * var(--cs));
  margin-left: calc(.53 * var(--cs));
}

.case--03 .case-copy__row:last-child .chunk:nth-of-type(3) {
  width: calc(142 * var(--cs));
  margin-top: calc(7.5 * var(--cs));
  line-height: calc(55 * var(--cs));
}

/* 実践前と実践後 */
.case-ba {
  display: flex;
  margin-top: 26.31px;
}

.case-ba__col {
  flex: 1;
  min-width: 0;
  padding: 14px 15px 10px;
}

.case-ba__col--before { background: var(--c-bg-cases); }
.case-ba__col--after { background: var(--c-cream); }

.case-chip {
  display: inline-block;
  padding: 0 6px 1px;
  font-size: 12px;
  font-weight: 500;
  line-height: 19.6px;
  letter-spacing: .42px;
  color: var(--c-white);
  background: var(--c-ink);
  border-radius: 9999px;
}

.case-chip--after { background: linear-gradient(270deg, var(--c-coral), var(--c-pink)); }

.case-ba__text {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--c-ink);
}

.case-mark { color: var(--c-pink); }

/* 体験談と人物写真 */
.case-foot {
  position: relative;
  margin-top: 40.31px;
}

.case--01 .case-foot { padding-right: 251.74px; }
.case--02 .case-foot { padding-right: 273px; }
.case--03 .case-foot { padding-right: 294px; }

.case-voice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 661.38px;
  padding-left: 10px;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  color: var(--c-ink);
}

.case-photo {
  position: absolute;
  right: -30px;
  bottom: -30px;
  max-width: 100%;
}

.case--01 .case-photo { width: 281.74px; }

.case--02 .case-photo { width: 303px; }
.case--03 .case-photo { width: 324px; }

.case-name {
  position: absolute;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  color: var(--c-white);
  white-space: nowrap;
}

.case-name span {
  font-size: 12px;
  line-height: 18px;
}

.case--01 .case-name {
  bottom: 7.988%;
  left: 5.679%;
  color: var(--c-ink);
}

.case--02 .case-name {
  bottom: 7.546%;
  left: 15.842%;
}

.case--03 .case-name {
  bottom: 9.795%;
  left: 65.432%;
}

.case-note {
  position: absolute;
  bottom: 7.854%;
  left: 50.969%;
  font-family: var(--ff-en);
  font-size: 12px;
  font-weight: 500;
  line-height: 20.23px;
  letter-spacing: .43px;
  color: var(--c-sub);
  white-space: nowrap;
}
/* 数字で見るLISA */
.numbers-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.numbers-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 20px;
}

.numbers-lead {
  font-size: 17px;
  font-weight: 600;
  line-height: 27.2px;
  color: var(--c-white);
  text-align: center;
}

/* 数字と単位だけ幅に比例して縮める */
.numbers-body {
  --ns: min(1px, .0694444vw);
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 40px;
}

.numbers-row {
  display: flex;
  justify-content: space-between;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 350px;
  max-width: 100%;
  gap: 4px;
  text-align: center;
}

.stat-label {
  font-size: 17px;
  font-weight: 600;
  line-height: 25.09px;
  color: var(--c-white);
  white-space: nowrap;
}

.stat-value {
  font-family: var(--ff-num);
  font-size: calc(140 * var(--ns));
  line-height: calc(140 * var(--ns));
  white-space: nowrap;
}

.stat-unit {
  font-size: calc(48 * var(--ns));
  line-height: 1;
}

/* 下段は上段の器に対する比率で持つ */
.numbers-row--pair {
  width: 62.5%;
  margin-inline: auto;
}
/* メディア実績 */
.logos-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}

.logos-list {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 60px;
}

.logos-row {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.logos-row--wide { gap: 70px; }

.media-card {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}

.media-thumb {
  padding: 20px;
  background: var(--c-white);
  border-radius: 12px;
}

.media-thumb img { aspect-ratio: 525 / 264.075; }

.media-body {
  margin-top: 20px;
  padding-inline: 10px;
}

.media-card--wide .media-body {
  width: 450px;
  max-width: 100%;
  padding-inline: 0;
}

.media-title {
  font-size: clamp(18.5px, .81967vw + 12.1967px, 24px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-ink);
}

.media-text {
  margin-top: 10px;
  font-size: clamp(13px, .14903vw + 11.854px, 14px);
  font-weight: 600;
  line-height: 1.6;
  color: var(--c-sub);
}
/* 料金プラン */
.pricing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

.pricing-lead {
  max-width: var(--w-lead);
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  color: var(--c-white);
  text-align: center;
}
/* よくある質問 */
.faq-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}

.faq-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
  gap: 30px;
}

.faq-lead {
  max-width: var(--w-lead);
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  color: var(--c-sub);
  text-align: center;
}

.faq-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--w-narrow);
  gap: 16px;
}

.faq-item {
  padding: 24px;
  box-shadow: inset 0 -1px 0 var(--c-border);
}

.faq-q {
  display: flex;
  align-items: flex-start;
  width: 100%;
  text-align: left;
}

.faq-mark {
  flex: none;
  width: 16px;
  margin-right: 4px;
  padding-top: 3px;
  font-family: var(--ff-en);
  font-size: 16px;
  font-weight: 700;
  line-height: 19.38px;
  color: var(--c-ink);
}

.faq-text {
  flex: 1 1 0;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.63px;
  color: var(--c-ink);
}

/* 質問文の1行目の中心に合わせる */
.faq-icon {
  flex: none;
  margin-top: 2.32px;
  margin-left: 10px;
  width: 18px;
  height: 18px;
  stroke: var(--c-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.faq-icon-v { display: none; }

.faq-q[aria-expanded="false"] .faq-icon-v { display: inline; }

.faq-a {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 16px;
  transition: grid-template-rows 300ms ease, margin-top 300ms ease;
  padding-inline: 20px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22.4px;
  color: var(--c-sub);
}

.faq-a > p { overflow: hidden; }

.faq-q[aria-expanded="false"] + .faq-a {
  grid-template-rows: 0fr;
  margin-top: 0;
}


/* ===== 幅ごとの調整 ===== */

/* 769〜899px */
@media (min-width: 769px) and (max-width: 899px) {
  .site-header { padding-inline: 45px; }

  .fv-lead {
    font-size: 22px;
    line-height: 35.2px;
  }

  .fv-head {
    font-size: 58px;
  }
}

/* 768px以下 */
@media (max-width: 768px) {
  /* Header */
  .header-logo { font-size: 20px; }
  .header-nav,
  .header-cta { display: none; }
  .header-burger { display: flex; }

  /* Footer */
  .footer-brand { align-items: center; }

  /* FV */
  .fv {
    min-height: 638px;
    padding: 40px 24px 60px;
    background-image: url(../img/fv-new-sp.png);
    background-position: 41% bottom;
    background-size: auto 136%;
  }

  .fv-inner {
    align-items: stretch;
    gap: 60px;
    max-width: 392px;
  }

  .fv-main {
    align-items: center;
    gap: 48px;
  }

  .fv-copy,
  .fv-message,
  .fv-head {
    align-items: flex-start;
    width: 100%;
  }

  .fv-kicker { font-size: 14px; }

  .fv-head {
    gap: 12px;
    text-align: left;
  }

  .fv-head b { 
    font-size: 23px;
    letter-spacing: 0px;
  }

  .fv-head > span:nth-child(1) small {
    margin-top: 7.38px;
    margin-left: 144px;
    font-size: 16px;
    letter-spacing: 0px;
  }

  .fv-head > span:nth-child(2) small {
    margin-top: 7.38px;
    margin-left: 182px;
    font-size: 16px;
    letter-spacing: 0px;

  }

  .fv-description {
    font-size: 14px;
    text-align: left;
  }

  .fv-cta {
    width: 100%;
    height: 65px;
    padding-inline: 20px;
    font-size: 16px;
  }

  /* LISAがおすすめな人 */
  .recommended { padding: 60px 20px; }

  .recommended-head { gap: 40px; }

  .recommended-head h2 {
    font-size: 32px;
    line-height: normal;
  }

  /* Section header */
  .section-label {
    font-size: 12px;
    line-height: 14.53px;
  }

  .section-title {
    font-size: 32px;
    line-height: 46.34px;
  }

  /* 経営スタイル */
  .style-inner { gap: 40px; }

  .style-lead {
    font-size: 14px;
    line-height: 22.4px;
  }

  .style-lead__line1 {
    display: flex;
    flex-direction: column;
  }

  /* 提供内容 */
  .features-list {
    gap: 60px;
    max-width: 400px;
    margin-top: 60.8px;
    margin-inline: auto;
  }

  .feature-label {
    font-size: 18px;
    line-height: 23.15px;
  }

  .feature-title {
    margin-top: 8.11px;
    font-size: 28px;
    line-height: 36px;
  }

  .feature-body {
    margin-top: 24.18px;
    font-size: 16px;
    line-height: 26px;
  }

  .feature-body p + p { margin-top: 26px; }

  .br-pc { display: none; }

  .feature-media {
    margin-top: 31.89px;
    margin-inline: 5px;
  }

  .feature--online .feature-media { margin-top: 31.89px; }

  .feature-media--tags { margin-inline: 0; }

  /* 見出し2行目だけカンプが字詰め */
  .feature--online .feature-title span { letter-spacing: -1px; }

  .feature-media--chat { margin-inline: 0; }

  .chat-track {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .chat-track::-webkit-scrollbar { display: none; }

  .chat-track img {
    width: 800px;
    max-width: none;
  }

  .feature-media--duo {
    flex-direction: column;
    gap: 24px;
  }

  .feature-media--duo img:first-child,
  .feature-media--duo img:last-child {
    flex: none;
    width: 100%;
    margin-top: 0;
  }

  .chat-nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
  }

  .feature-media--pair { flex-direction: column; }

  .feature-media--pair img {
    flex: none;
    width: 100%;
  }

  .br-sp { display: inline; }

  .feature-title-sub {
    font-size: 22px;
    line-height: 28.6px;
  }

  .feature-split {
    display: block;
    max-width: none;
    margin-top: 24.18px;
  }

  .feature-grid {
    width: 100%;
    max-width: 340.02px;
    margin: 31.89px auto 0;
  }

  .feature-laptops {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
  }

  .feature-laptops img {
    flex: none;
    width: 100%;
    max-width: 386.05px;
  }

  /* CTA */
  .cta-inner { padding-inline: 20px; }

  .cta-lead {
    font-size: 16px;
    line-height: 23.61px;
  }

  .cta-title {
    font-size: 42px;
    line-height: 61.99px;
  }

  .cta-sub {
    font-size: 14px;
    line-height: 19.89px;
  }

  /* 300pxで28px/18pxに届くよう連続的に */
  .cta-btn { padding-inline: clamp(28px, 8.5714vw + 2.286px, 40px); }

  /* 導入事例 */
  .cases-head {
    align-items: center;
    gap: 24px;
  }

  .section-header--start {
    align-items: center;
    text-align: center;
  }

  .cases-lead {
    font-size: 14px;
    line-height: 22.4px;
    text-align: center;
  }

  .case { padding: 30px 16px 0; }

  .case-meta { font-size: 14px; }

  .case-head {
    --cs: min(1px, .22727vw);

    flex-direction: column;
    align-items: stretch;
    max-width: 368px;
    margin-inline: auto;
  }

  .case-text { flex: none; }

  .case-chart {
    width: 347.58px;
    margin-top: -16px;
    margin-right: auto;
  }

  .case--01 .case-chart {
    width: 357.66px;
    margin-top: -8px;
  }

  .case--03 .case-chart { margin-top: -43px; }

  .case--01 .case-copy,
  .case--02 .case-copy,
  .case--03 .case-copy { margin-top: 16px; }

  .case--01 .case-copy__main { margin-top: 13.84px; }

  .case--01 .case-copy__row + .case-copy__row { margin-top: 0; }

  .case--01 .case-copy__row:first-child .chunk:nth-child(n),
  .case--01 .case-copy__row:last-child .chunk:nth-child(n) {
    width: auto;
    margin: 0;
    line-height: inherit;
    letter-spacing: inherit;
  }

  .case--01 .case-copy__row .chunk.case-fig:nth-child(n) { margin-left: max(-6.96px, -1.5818vw); }
  .case--02 .case-copy__main { margin-top: .45px; }
  .case--03 .case-copy__main { margin-top: calc(-3.19 * var(--cs)); }

  .case--03 .case-meta__who { letter-spacing: normal; }

  .case--03 .case-copy__lead { letter-spacing: calc(.1 * var(--cs)); }

  .case--03 .case-fig { letter-spacing: calc(4 * var(--cs)); }

  /* 440px未満では幅に比例させる */
  .case-copy__lead { font-size: min(24px, 5.4545vw); }

  .case--01 .case-copy__main {
    font-size: min(41px, 9.3182vw);
    line-height: min(69.23px, 15.7341vw);
  }

  /* カンプは数字の枠が仮名より上にある */
  .case--01 .case-fig {
    position: relative;
    top: max(-5.18px, -1.1773vw);
    font-size: min(70px, 15.9091vw);
  }

  .case--02 .case-copy__main {
    margin-top: calc(11.57 * var(--cs));
    font-size: calc(41 * var(--cs));
    line-height: calc(41 * var(--cs));
    letter-spacing: calc(.1 * var(--cs));
  }

  .case--02 .case-fig { font-size: calc(70 * var(--cs)); }
  .case--02 .case-copy__ink { font-size: calc(41 * var(--cs)); }

  .case--02 .case-copy__row:first-child { line-height: calc(41 * var(--cs)); }

  .case--02 .case-copy__row + .case-copy__row { margin-top: calc(15.88 * var(--cs)); }

  .case--02 .case-copy__row:first-child .chunk:nth-of-type(1) { width: calc(369 * var(--cs)); }

  .case--02 .case-copy__row:last-child .chunk:nth-of-type(1) {
    width: calc(328 * var(--cs));
    margin-top: 0;
    line-height: calc(41 * var(--cs));
  }

  .case--02 .case-copy__row:last-child .chunk:nth-of-type(2) {
    width: calc(139 * var(--cs));
    margin-top: calc(12.28 * var(--cs));
    margin-left: 0;
    line-height: calc(70 * var(--cs));
  }

  .case--02 .case-copy__row:last-child .chunk:nth-of-type(3) {
    width: calc(114 * var(--cs));
    margin-top: calc(31.28 * var(--cs));
    margin-left: calc(5.46 * var(--cs));
    font-size: calc(41 * var(--cs));
    line-height: calc(41 * var(--cs));
  }

  .case--03 .case-copy__main {
    font-size: calc(32 * var(--cs));
    line-height: calc(83 * var(--cs));
  }

  .case--03 .case-fig { font-size: calc(62 * var(--cs)); }
  .case--03 .case-copy__ink { font-size: calc(32 * var(--cs)); }

  .case--03 .case-copy__row + .case-copy__row { margin-top: calc(-19 * var(--cs)); }

  .case--03 .case-copy__row:first-child .chunk:nth-of-type(1) { width: calc(164 * var(--cs)); }

  .case--03 .case-copy__row:first-child .chunk:nth-of-type(2) {
    width: calc(192 * var(--cs));
    margin-top: calc(32 * var(--cs));
    margin-left: 0;
    line-height: calc(32 * var(--cs));
  }

  .case--03 .case-copy__row:last-child .chunk:nth-of-type(1) {
    width: calc(96 * var(--cs));
    margin-top: calc(20 * var(--cs));
    margin-left: 0;
    line-height: calc(32 * var(--cs));
  }

  .case--03 .case-copy__row:last-child .chunk:nth-of-type(2) {
    width: calc(40 * var(--cs));
    margin-top: 0;
    margin-left: calc(2.39 * var(--cs));
    line-height: calc(62 * var(--cs));
  }

  .case--03 .case-copy__row:last-child .chunk:nth-of-type(3) {
    width: calc(89 * var(--cs));
    margin-top: calc(20 * var(--cs));
    margin-left: calc(2.22 * var(--cs));
    line-height: calc(32 * var(--cs));
  }

  .case-ba {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }

  .case-ba__col { padding: 10px; }

  .case-foot { margin-top: 30px; }

  .case--01 .case-foot,
  .case--02 .case-foot,
  .case--03 .case-foot { padding-right: 0; }

  .case-voice { max-width: none; }

  .case-photo {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 0 auto;
  }

  .case--01 .case-photo { margin-top: 15px; }

  .case--01 .case-name { bottom: .475%; }
  .case--03 .case-name { bottom: 3.476%; }

  .case-note { bottom: .404%; }

  /* 数字で見るLISA */
  .numbers-inner { gap: 60px; }

  .numbers-lead {
    font-size: 14px;
    line-height: 22.4px;
  }

  .numbers-row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .numbers-row--pair { width: 100%; }

  .stat-label {
    font-size: 16px;
    line-height: 23.61px;
  }

  .stat-value {
    font-size: 72px;
    line-height: 72px;
  }

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

  /* メディア実績 */
  .logos-inner { gap: 60px; }

  .logos-list { gap: 40px; }

  .logos-row,
  .logos-row--wide {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .media-card {
    flex: none;
    width: 380px;
    max-width: 100%;
  }

  /* カンプは上2枚だけ枠の上下に余りがある */
  .media-card--wide { padding-block: 7.655px; }

  .media-body {
    margin-top: 10px;
    padding-inline: 0;
  }

  .media-title { font-size: clamp(17px, .71429vw + 14.857px, 18px); }

  .media-text {
    margin-top: 6px;
    font-size: clamp(13px, 2.1429vw + 6.5714px, 16px);
  }

  /* 料金プラン */
  .pricing-inner { gap: 24px; }

  .pricing-lead {
    font-size: 14px;
    line-height: 22.4px;
  }

  /* よくある質問 */
  .faq-inner { gap: 60px; }

  .faq-head { gap: 24px; }

  .faq-lead {
    font-size: 14px;
    line-height: 22.4px;
  }

  .faq-list { gap: 24px; }

  .faq-item { padding: 0 0 24px; }

  .faq-mark {
    font-size: 16px;
    line-height: 19.38px;
  }

  .faq-text {
    font-size: 16px;
    line-height: 23.62px;
  }

  .faq-icon { margin-top: 2.81px; }

  .faq-a {
    padding-inline: 20px 0;
    font-size: 16px;
    line-height: 25.6px;
  }
}