@charset "UTF-8";
/* =========================================================================
   index.css — Home V1（Figma 実体フレーム 16070:22945・1440×9659）
   縦方向はセクション間のローカル差（次要素Y −（前要素Y＋高さ））で積む。
   ========================================================================= */

/* Figma フレーム下端：フッター(〜9615)の下に地色 44px（フレーム実寸 9659） */
/* The 44px blank strip at the end of the Figma frame (9615–9659) is not reproduced (CLAUDE.md default 1) */

/* ---------- 上部の連絡先バー（1420×47・#C399FF・角丸9） ---------- */
.topbar {
  width: 142rem; height: 4.7rem; margin: 1.2rem auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 17.6rem 0 17.63rem;
  background: var(--color-primary-100); border-radius: 0.9rem;
  font-size: 1.4rem; line-height: 1.6rem; font-weight: 600; color: var(--color-neutral-800);
}
.topbar__group { display: flex; align-items: center; gap: 1.5rem; }
.topbar__item { display: flex; align-items: center; gap: 0.6rem; white-space: nowrap; }
.topbar__item a:hover { color: var(--color-neutral-100); }
.topbar__phone { width: 1.5172rem; height: 1.5172rem; }
.topbar__email { width: 1.5766rem; height: 1.3591rem; }
.topbar__address { gap: 0.2rem; }
.topbar__pin { width: 1.4655rem; height: 1.7rem; margin: 0 0.2673rem; }

/* ---------- ヒーロー（1420×700。hero-bg.svg＝紺＋曲線＋角丸13込み） ---------- */
.hero {
  position: relative; width: 142rem; height: 70rem; margin: 0 auto;
  background: url("../img/index/hero-bg.svg") center / 100% 100% no-repeat;
  border-radius: 1.3rem;
}
.hero__body { display: flex; align-items: flex-start; padding-left: 17.6rem; }
.hero__info { width: 51.7rem; margin-top: 8rem; display: flex; flex-direction: column; align-items: flex-start; }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.hero__rating {
  display: inline-flex; align-items: center; gap: 0.5rem; width: 25.3rem; height: 2.9rem; padding-left: 0.5rem;
  background: var(--color-neutral-100); border-radius: 5rem;
  font-size: 1.6rem; line-height: 1.8rem; font-weight: 600; color: var(--color-rating-text); white-space: nowrap;
}
.hero__rating img { width: 1.8998rem; height: 1.9386rem; }
.hero__title { width: 51.7rem; }
.hero__desc { margin-top: -0.9rem; color: var(--color-text-on-dark); }  /* 見出し→本文 5px（gap14を相殺） */
.hero__buttons { margin-top: 2.4rem; }
.hero__line { width: 50.7rem; height: 0; margin: 3.7rem 0 0; border: 0; border-top: 1.5px solid var(--color-header-line-dark); }
.hero__video { display: flex; align-items: center; gap: 1.1rem; margin-top: 3.55rem; text-align: left; }
.hero__video-thumb { width: 10.3444rem; height: 6.3rem; border-radius: 1.1667rem; overflow: hidden; }
.hero__video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hero__video-text { display: flex; flex-direction: column; gap: 0.2rem; font-size: 1.6rem; line-height: 1.8rem; font-weight: 500; white-space: nowrap; }
.hero__video-title { color: var(--color-neutral-100); }
.hero__video-link { color: var(--color-primary-100); }
.hero__video:hover .hero__video-link { text-decoration: underline; }
.hero__photo {
  width: 46.4rem; height: 48.9rem; margin: 5.9rem 0 0 8.429rem; flex-shrink: 0;
  border-radius: 2.7rem; overflow: hidden; background: var(--color-primary-100);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- お客様のレビュー（横5件・左右は画面外） ---------- */
.reviews { margin-top: 3.4rem; }
.reviews__track { display: flex; gap: 4.8rem; width: max-content; margin-left: -7.36rem; }
.review { display: flex; align-items: center; gap: 0.9rem; }
.review__photo {
  width: 7rem; height: 7rem; flex-shrink: 0; overflow: hidden;
  border: 0.2rem solid var(--color-neutral-100); border-radius: 1.1rem; background: var(--color-neutral-100);
  box-shadow: 0 0.2rem 0.8rem rgba(238, 238, 227, 0.88);
}
.review__photo img { width: 6.6rem; height: 6.6rem; object-fit: cover; }
.review__text { width: 20rem; display: flex; flex-direction: column; gap: 0.2rem; }
.review__quote { min-height: 3.8rem; font-size: 1.4rem; line-height: 1.25; font-weight: 500; letter-spacing: 0; color: var(--color-neutral-800); }
.review__author { font-size: 1.2rem; line-height: 1.5rem; font-weight: 600; color: var(--color-neutral-400); }

/* ---------- サービス ---------- */
.services { margin-top: 10rem; }
.services__head { display: flex; align-items: flex-end; padding-left: 18.62rem; }
.services__title { width: 31.6rem; flex-shrink: 0; }
.services__buttons { margin: 0 0 0.8rem 34.67rem; }
.services__slider { margin-top: 3.2rem; }
.services__track { display: flex; width: max-content; padding-left: 18.62rem; }
.service { width: 37rem; flex-shrink: 0; }
.service + .service { margin-left: 3rem; }
.service:nth-child(3) { margin-left: 2.9rem; }
.service:nth-child(4) { margin-left: 2.2rem; }
.service__card {
  position: relative; width: 37rem; height: 43.2rem; overflow: hidden;
  border-radius: 1.6rem; background: var(--color-primary-100);
  box-shadow: 0 0.2rem 0.5rem rgba(29, 39, 63, 0.11);
}
.service__img { width: 100%; height: 100%; object-fit: cover; }
.service__pills { position: absolute; left: 1.8rem; top: 38.3rem; display: flex; gap: 0.6rem; }
.service__pills span {
  padding: 1rem 1.2rem; border-radius: 0.8rem; background: var(--color-neutral-100);
  box-shadow: 0 0.1rem 0.4rem rgba(108, 66, 170, 0.13);
  font-size: 1.6rem; line-height: 1.8rem; font-weight: 600; color: var(--color-neutral-800); white-space: nowrap;
}
.service__row { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.service__icon { flex-shrink: 0; }
.service__row > div { width: 28.3rem; }
.service__name { font-size: 2.4rem; line-height: 3rem; font-weight: 600; color: var(--color-neutral-800); }
.service__desc { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; color: var(--color-neutral-400); }

/* ---------- The Dentalflow dentist experience（白・角丸28・1440×947） ---------- */
.promo {
  width: 144rem; margin: 12rem auto 0; padding: 12rem 0 11.953rem;
  background: var(--color-neutral-100); border-radius: var(--radius-section); overflow: hidden;
}
.promo__head { display: flex; align-items: flex-start; padding-left: 19rem; }
.promo__title { width: 39.8rem; flex-shrink: 0; }
.promo__head .btn-group { margin: 4.8rem 0 0 25.6rem; }
.promo__slider { margin-top: 2.6rem; }
.promo__track { display: flex; justify-content: center; gap: 1.8rem; }
.promo-card {
  position: relative; width: 67.2rem; height: 44.3rem; flex-shrink: 0; overflow: hidden;
  border-radius: 2rem; background: var(--color-photo-placeholder);
}
.promo-card__img { width: 100%; height: 100%; object-fit: cover; }
.promo-card__label {
  position: absolute; left: 1.4rem; top: 35.5rem; width: 37.3rem; height: 7.4rem;
  display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem;
  background: var(--color-neutral-100); border-radius: 1.4rem;
}
.promo-card__label--wide { width: 38.4rem; }
.promo-card__icon { display: flex; align-items: center; justify-content: center; width: 5.1rem; height: 5.1rem; flex-shrink: 0; border-radius: 1.2rem; background: var(--color-primary-100); }
.promo-card__icon img { width: 3rem; height: 3rem; }
.promo-card__title { font-size: var(--fs-card); line-height: 3rem; font-weight: 600; color: var(--color-neutral-800); white-space: nowrap; }
.promo-card__desc { font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: 500; color: var(--color-neutral-400); }
.features { display: flex; justify-content: center; gap: 5.4rem; margin-top: 3.947rem; }
.features--row2 { margin-top: 3.1rem; }
.feature { display: flex; align-items: center; gap: 1.1rem; font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 600; color: var(--color-neutral-800); white-space: nowrap; }
.feature--first { width: 30.8rem; }  /* アイコン36＋11＋文字枠261 */
.feature__icon { display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; flex-shrink: 0; border-radius: var(--radius-icon); background: var(--color-primary-100); }
.feature__icon img { width: 2.4rem; height: 2.4rem; }

/* ---------- Meet our wonderful team ---------- */
.team { margin-top: 12rem; }
.team__grid {
  display: grid; grid-template-columns: repeat(3, 34.3317rem); column-gap: 2rem; row-gap: 3.485rem;
  width: max-content; margin-left: 18.473rem;
}
.team__intro { padding-top: 9.432rem; }
.team__title { width: 34.3316rem; }
.team__desc { width: 33.98rem; margin-top: 1rem; }
.team__intro .btn { display: flex; width: fit-content; margin-top: 3.2rem; }

/* ---------- Bright smiles showcase（1441×565・bright-smiles-bg.svg） ---------- */
.bright {
  display: flex; width: 144rem; height: 56.5rem; margin: 12rem auto 0;
  background: #1d273f url("../img/index/bright-smiles-bg.svg") center / 100% 100% no-repeat; /* navy base so no pale 1px line forms at the edges */
}
.bright__grid { display: grid; grid-template-columns: 37.75rem 37.75rem; grid-template-rows: 28.3rem 28.2rem; flex-shrink: 0; }
.bright__photo { overflow: hidden; }
.bright__photo img { width: 100%; height: 100%; object-fit: cover; }
.bright__photo--1 { height: 28.244rem; margin-top: 0.012rem; }
.bright__photo--2 { height: 28.244rem; }
.bright__quote { background: var(--color-neutral-800); padding: 9.7rem 0 0 4.1rem; }
.bright__quote--2 { padding: 9.6rem 0 0 4.165rem; }
.bright__quote p { width: 29.42rem; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-primary-300); }
.bright__quote cite { display: block; margin-top: 1.2rem; font-size: 1.8rem; line-height: 1.8rem; font-weight: 500; color: var(--color-primary-100); }
.bright__content { padding: 13.3rem 0 0 9.663rem; }
.bright__happy { display: flex; align-items: center; gap: 0.8rem; font-size: 1.6rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-100); }
.bright__happy-num { color: var(--color-primary-100); }
.bright__avatars { display: flex; }
.bright__avatar { position: relative; width: 3rem; height: 3rem; }
.bright__avatar + .bright__avatar { margin-left: -0.6rem; }
.bright__avatar img { width: 3rem; height: 3rem; }
.bright__ring { position: absolute; inset: 0; }
.bright__title { width: 30.353rem; margin-top: 1.6rem; }
.bright__desc { width: 40.32rem; margin-top: 1.2rem; color: var(--color-text-on-dark); }
.bright__buttons { margin-top: 3.2rem; }

/* ---------- Your smile journey ---------- */
.journey { margin-top: 12.044rem; text-align: center; }
.journey__title { padding-left: 0.32rem; }
.journey__desc { position: relative; left: 1.942rem; width: 44.96rem; margin: 1.2rem auto 0; }
.journey__slide { position: relative; left: 0.176rem; /* Figma centre line x≈721.7 (aligned with the heading and buttons) */ display: flex; gap: 3rem; width: 107.033rem; margin: 3.2rem auto 0; text-align: left; }
.journey__photo { width: 47rem; height: 33.4219rem; border-radius: 2rem; overflow: hidden; flex-shrink: 0; }
.journey__photo img { width: 100%; height: 100%; object-fit: cover; }
.journey__box { width: 57.0328rem; height: 33.4219rem; padding: 4.094rem 0 0 3.558rem; background: var(--color-neutral-100); border-radius: 2rem; }
.journey__num { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 500; color: var(--color-primary-400); }
.journey__step { margin-top: 1.316rem; font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; color: var(--color-neutral-800); }
.journey__text { width: 49.916rem; margin-top: 1rem; }
.journey__items { display: flex; gap: 2.5rem; margin-top: 4.318rem; }
.journey__item { display: flex; align-items: center; gap: 1.1rem; font-size: 1.6rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-800); white-space: nowrap; }
.journey__icon { position: relative; width: 3.6rem; height: 3.6rem; flex-shrink: 0; border-radius: var(--radius-icon); background: var(--color-primary-100); }
.journey__icon img { position: absolute; left: 0.563rem; top: 0.624rem; width: 2.4rem; height: 2.4rem; }
.journey__prev, .journey__next { position: absolute; top: 14.411rem; }
.journey__prev { left: -2.384rem; }
.journey__next { right: -2.2rem; }
.journey__buttons { justify-content: center; margin-top: 3.2rem; padding-left: 0.32rem; }

/* ---------- About our experience（白の帯 1441×790） ---------- */
.experience { margin-top: 12.034rem; padding: 12rem 0 11.99rem; background: var(--color-neutral-100); }
.experience__head { display: flex; align-items: flex-start; padding-left: 18.43rem; }
.experience__title { width: 30rem; flex-shrink: 0; }
.experience__desc { width: 36.7rem; /* Figma 370. Narrowed by 3px to match Figma line breaks ("…porta blandit" / "sit lectus…"); a rendering-width difference */ margin: 2.4rem 0 0 39.967rem; }
.experience__slider { margin-top: 3.2rem; }
.experience__track { display: flex; width: max-content; margin-left: -6.003rem; }
.stat { display: flex; flex-direction: column; align-items: flex-start; gap: 3.2rem; flex-shrink: 0; }
.stat:nth-child(2) { margin-left: 2.686rem; }
.stat:nth-child(3), .stat:nth-child(4) { margin-left: 2.635rem; }
.stat:nth-child(5) { margin-left: 3.2rem; }
.stat__img { width: 32.9646rem; height: 33.8107rem; border-radius: 1.6652rem; overflow: hidden; }
.stat__img img { width: 100%; height: 100%; object-fit: cover; }
.stat__pill {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem;
  background: var(--color-neutral-800); border-radius: 1.4rem;
  font-size: 1.6rem; line-height: 1.8rem; font-weight: 500; color: var(--color-neutral-100); white-space: nowrap;
}
.stat__num { color: var(--color-primary-200); }
.stat__icon { position: relative; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: 0.8rem; background: var(--color-primary-100); }
.stat__icon img { position: absolute; }
.stat__icon-smiley { left: 0.4rem; top: 0.4rem; width: 2.2rem; height: 2.2rem; }
.stat__icon-star { left: 0.333rem; top: 0.289rem; width: 2.4rem; height: 2.4rem; }
.stat__icon-full { left: 0; top: 0; width: 3rem; height: 3rem; }
.stat__icon-tick { left: 0.3rem; top: 0.3rem; width: 2.4rem; height: 2.4rem; }
.stat__pill--alt { height: 5.2rem; gap: 0.9rem; padding: 1.2rem 1.3rem; border-radius: 1rem; filter: drop-shadow(0 0.4rem 0.2rem rgba(29, 39, 63, 0.09)); }
.stat__pill--alt .stat__icon { border-radius: 0.4rem; }

/* ---------- Before / After ---------- */
.index-ba { margin-top: 12rem; }

/* ---------- The difference we make（白・上角丸28・1440.6×794.42） ---------- */
.difference { margin-top: 12rem; padding: 12rem 0 16.423rem; background: var(--color-neutral-100); border-radius: var(--radius-section) var(--radius-section) 0 0; }
.difference__inner { display: flex; align-items: flex-start; padding-left: 18.65rem; }
.difference__photo { width: 50rem; height: 51.017rem; border-radius: 1.6rem; overflow: hidden; flex-shrink: 0; }
.difference__photo img { width: 100%; height: 100%; object-fit: cover; }
.difference__content { position: relative; z-index: 1; margin-left: 5.666rem; padding-top: 7.455rem; }
.difference__title { width: 34.3316rem; }
.difference__desc { width: 45.8756rem; margin-top: 1rem; }
.difference__btn { display: flex; width: fit-content; margin-top: 3.075rem; }
.difference__pills { display: flex; gap: 1.6rem; margin: 7.85rem 0 0 -13.126rem; }
.difference__pill {
  display: flex; align-items: center; gap: 0.9rem; height: 5rem; padding: 0 1.3rem;
  background: var(--color-neutral-800); border-radius: 1rem;
  font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--color-neutral-100); white-space: nowrap;
  filter: drop-shadow(0 0.4rem 0.2rem rgba(29, 39, 63, 0.09));
}
.difference__pill img { width: 3rem; height: 3rem; }
/* Figma places each pill on its own (239 / 181 / 191) → fixed widths so the start positions don't drift */
.difference__pill:nth-child(1) { width: 23.9rem; }
.difference__pill:nth-child(2) { width: 18.1rem; }
.difference__pill:nth-child(3) { width: 19.1rem; }

/* ---------- Trusted by real people（紺・角丸28・1440×768.64。上の白帯に44px重なる） ---------- */
.trusted {
  position: relative; z-index: 1; margin-top: -4.427rem;
  padding: 11.924rem 0 12.027rem; background: var(--color-neutral-800); border-radius: var(--radius-section);
}
.trusted__inner { padding-left: 18.55rem; }
.trusted__title { width: 47.5363rem; }
.trusted__body { display: flex; margin-top: 4.563rem; }
.trusted__media { display: flex; align-items: flex-end; gap: 2.003rem; }
.trusted__thumb { width: 11.2273rem; height: 15.5981rem; border-radius: 0.8283rem; overflow: hidden; flex-shrink: 0; }
.trusted__thumb img { width: 100%; height: 100%; object-fit: cover; }
.trusted__video { position: relative; width: 31.3478rem; height: 43.5513rem; border-radius: 1.0767rem; overflow: hidden; background: #d9d9d9; flex-shrink: 0; }
.trusted__video > img { width: 100%; height: 100%; object-fit: cover; }
.trusted__play { position: absolute; left: 13.42rem; top: 19.53rem; width: 4.5rem; height: 4.5rem; }
.trusted__play img { width: 100%; height: 100%; }
.trusted__review { display: flex; flex-direction: column; align-items: flex-start; width: 30rem; margin-left: 5.923rem; padding-top: 3.28rem; }
.trusted__quote-icon { width: 2.6476rem; height: 1.8912rem; }
.trusted__quote { margin-top: 3.609rem; font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; color: var(--color-neutral-100); }
.trusted__name { margin-top: 3.606rem; font-size: 1.6rem; line-height: 2.4rem; font-weight: 500; color: var(--color-neutral-100); }
.trusted__place { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-neutral-200); }
.trusted__nav { display: flex; gap: 1.6rem; margin-top: auto; }

/* ---------- Articles & resources ---------- */
.articles { margin-top: 12rem; text-align: center; }
.articles__desc { width: 52.18rem; margin: 0.84rem auto 0; }
.articles__list { display: flex; justify-content: center; gap: 2.12rem; margin-top: 2.86rem; text-align: left; }
.articles__more { margin-top: 2.61rem; }
.articles + * { margin-top: 0; }
main + .site-footer { margin-top: 12rem; }

/* =========================================================================
   SP（<1024px）— 自作レイアウト（Figma に SP カンプなし）
   ========================================================================= */
@media (max-width: 1023px) {
  body[data-page="index"] { padding-bottom: 0; }

  .topbar {
    width: auto; height: auto; margin: 1.2rem 1.2rem 0; padding: 1rem 1.6rem;
    flex-direction: column; align-items: flex-start; gap: 0.8rem; font-size: 1.3rem;
  }
  .topbar__group { flex-wrap: wrap; row-gap: 0.8rem; }

  .hero { width: auto; height: auto; margin: 0.8rem 1.2rem 0; padding-bottom: 3.2rem; background: var(--color-neutral-800) url("../img/index/hero-bg.svg") center top / cover no-repeat; border-radius: 1.3rem; }
  .hero .site-header { margin-inline: 1.6rem; }
  .hero__body { flex-direction: column; padding: 0 1.6rem; }
  .hero__info { width: 100%; margin-top: 3.2rem; }
  .hero__title { width: auto; }
  .hero__desc { margin-top: -0.4rem; }
  .hero__rating { width: auto; padding-right: 1rem; font-size: 1.4rem; }
  .hero__line { width: 100%; margin-top: 3.2rem; }
  .hero__video { margin-top: 3.2rem; }
  .hero__body { max-width: 75.2rem; margin-inline: auto; } /* content width 72rem = aligned with .l-container */
  .hero__photo { width: 100%; max-width: 56rem; height: auto; aspect-ratio: 464 / 489; margin: 3.2rem auto 0; align-self: center; } /* portrait photo: capped at 56rem and centred */

  /* 横スライダー群：SP は横スクロール（ページには横溢れさせない） */
  .reviews, .services__slider, .promo__slider, .experience__slider { overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-inset); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .reviews::-webkit-scrollbar, .services__slider::-webkit-scrollbar, .promo__slider::-webkit-scrollbar, .experience__slider::-webkit-scrollbar { display: none; }

  .reviews { margin-top: 3.2rem; }
  .reviews__track { margin-left: 0; padding-inline: var(--sp-inset); gap: 2.4rem; }
  .review { scroll-snap-align: start; }

  .services { margin-top: var(--space-section); }
  .services__head { flex-direction: column; align-items: flex-start; gap: 2rem; padding: 0 var(--sp-inset); }
  .services__title { width: auto; }
  .services__buttons { margin: 0; }
  .services__slider { margin-top: 2.4rem; }
  .services__track { padding: 0 var(--sp-inset) 0.8rem; gap: 1.6rem; }
  .service, .service + .service, .service:nth-child(n) { width: 28rem; margin-left: 0; scroll-snap-align: start; }
  .service__card { width: 28rem; height: 32.7rem; }
  .service__pills { top: auto; bottom: 1.2rem; left: 1.2rem; right: 1.2rem; flex-wrap: wrap; }
  .service__pills span { font-size: 1.4rem; padding: 0.8rem 1rem; }
  .service__row > div { width: auto; }
  .service__name { font-size: 2rem; line-height: 2.6rem; }
  .service__desc { font-size: 1.5rem; line-height: 2rem; }

  .promo { width: auto; margin: var(--space-section) 0 0; padding: var(--space-section) 0; border-radius: 2rem; }
  .promo__head { flex-direction: column; gap: 2rem; padding: 0 var(--sp-inset); }
  .promo__title { width: auto; }
  .promo__head .btn-group { margin: 0; }
  .promo__slider { margin-top: 2.4rem; }
  .promo__track { justify-content: flex-start; width: max-content; padding: 0 var(--sp-inset); gap: 1.2rem; }
  .promo-card { width: 30rem; height: 34rem; scroll-snap-align: start; }
  .promo-card__label, .promo-card__label--wide { left: 1rem; right: 1rem; top: auto; bottom: 1rem; width: auto; height: auto; padding: 1rem; }
  .promo-card__icon { width: 4.4rem; height: 4.4rem; }
  .promo-card__icon img { width: 2.6rem; height: 2.6rem; }
  .promo-card__title { font-size: 1.7rem; line-height: 2.4rem; white-space: normal; }
  .promo-card__desc { font-size: 1.4rem; line-height: 1.8rem; }
  .features, .features--row2 { flex-direction: column; align-items: flex-start; gap: 1.6rem; margin: 1.6rem var(--sp-inset) 0; }
  .features { margin-top: 3.2rem; }
  .feature, .feature--first { width: auto; font-size: 1.8rem; line-height: 2.4rem; white-space: normal; }

  .team { margin-top: var(--space-section); }
  .team__grid { grid-template-columns: 1fr; width: auto; margin: 0 var(--sp-inset); row-gap: 2.4rem; justify-items: center; }
  .team__intro { padding-top: 0; justify-self: stretch; }
  .team__title, .team__desc { width: auto; }
  .team__intro .btn { margin-top: 2.4rem; }

  .bright { flex-direction: column; width: auto; height: auto; margin-top: var(--space-section); background-size: cover; background-color: var(--color-neutral-800); }
  .bright__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
  .bright__photo--1, .bright__photo--2 { height: auto; margin: 0; aspect-ratio: 377.5 / 282.44; }
  .bright__quote, .bright__quote--2 { display: flex; flex-direction: column; justify-content: center; padding: 1.6rem; }
  .bright__quote p { width: auto; font-size: 1.5rem; line-height: 2rem; }
  .bright__quote cite { margin-top: 0.8rem; font-size: 1.4rem; line-height: 1.8rem; }
  .bright__content { padding: 4rem var(--sp-inset) 4.8rem; }
  .bright__title, .bright__desc { width: auto; }

  .journey { margin-top: var(--space-section); padding: 0 var(--sp-inset); }
  .journey__title, .journey__buttons { padding-left: 0; }
  .journey__desc { left: 0; width: auto; }
  .journey__slide { left: 0; max-width: 72rem; flex-direction: column; width: auto; gap: 1.6rem; margin-top: 2.4rem; padding-bottom: 6.2rem; }
  .journey__photo { width: 100%; height: auto; aspect-ratio: 470 / 334.219; }
  .journey__box { width: 100%; height: auto; padding: 2.4rem 2rem; }
  .journey__text { width: auto; }
  .journey__items { flex-direction: column; gap: 1.2rem; margin-top: 2.4rem; }
  .journey__item { white-space: normal; }
  .journey__prev, .journey__next { top: auto; bottom: 0; }
  .journey__prev { left: calc(50% - 5.4rem); }
  .journey__next { right: calc(50% - 5.4rem); }

  .experience { margin-top: var(--space-section); padding: var(--space-section) 0; }
  .experience__head { flex-direction: column; padding: 0 var(--sp-inset); }
  .experience__title { width: auto; }
  .experience__desc { width: auto; margin: 1.6rem 0 0; }
  .experience__slider { margin-top: 2.4rem; }
  .experience__track { margin-left: 0; padding: 0 var(--sp-inset) 0.8rem; gap: 1.6rem; }
  .stat, .stat:nth-child(n) { margin-left: 0; gap: 1.6rem; scroll-snap-align: start; }
  .stat__img { width: 24rem; height: 24.6rem; }

  .index-ba { margin-top: var(--space-section); padding: 0 var(--sp-inset); }

  .difference { margin-top: var(--space-section); padding: var(--space-section) 0 calc(var(--space-section) + 4.4rem); border-radius: 2rem 2rem 0 0; }
  .difference__inner { flex-direction: column; padding: 0 var(--sp-inset); }
  .difference__photo { width: 100%; max-width: 56rem; height: auto; aspect-ratio: 500 / 510.17; }
  .difference__content { margin: 0; padding-top: 3.2rem; }
  .difference__title, .difference__desc { width: auto; }
  .difference__btn { margin-top: 2.4rem; }
  .difference__pills { flex-wrap: wrap; gap: 1rem; margin: 2.4rem 0 0; }
  .difference__pill, .difference__pill:nth-child(n) { width: auto; height: 4.6rem; font-size: 1.6rem; line-height: 2rem; }

  .trusted { padding: var(--space-section) 0; border-radius: 2rem; }
  .trusted__inner { padding: 0 var(--sp-inset); }
  .trusted__title { width: auto; }
  .trusted__body { flex-direction: column; margin-top: 2.4rem; }
  .trusted__media { max-width: 56rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 1rem; align-items: stretch; }
  .trusted__video { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 313.478 / 435.513; }
  .trusted__play { left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .trusted__thumb { width: 100%; height: auto; aspect-ratio: 112.273 / 155.981; grid-row: 2; }
  .trusted__review { width: auto; margin: 3.2rem 0 0; padding-top: 0; }
  .trusted__quote { margin-top: 2rem; }
  .trusted__name { margin-top: 2rem; }
  .trusted__nav { margin-top: 2.4rem; }

  .articles { margin-top: var(--space-section); padding: 0 var(--sp-inset); }
  .articles__desc { width: auto; }
  .articles__list { flex-direction: column; align-items: center; gap: 1.6rem; margin-top: 2.4rem; }
  .article-card { max-width: 52.4rem; }
  .articles__more { margin-top: 2.4rem; }
  main + .site-footer { margin-top: var(--space-section); }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .team__grid { grid-template-columns: repeat(2, minmax(0, 34.3317rem)); justify-content: center; }
  .team__intro { grid-column: 1 / -1; }
  .article-card { flex-direction: row; }
  .article-card__img { order: 0; width: 45%; }
  .article-card__body { flex: 1; }
}