/* ==========================================================================
   About (さくらヒルズとは)
   ========================================================================== */
.about {
  position: relative;
  padding: 32px 0;
  overflow: hidden;
  color: var(--color-base);
}

.about__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.about__inner {
  position: relative;
}

.about__left {
  display: flex;
  flex-direction: column;
}

.about__head {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.about__title {
  font-weight: 900;
  letter-spacing: 0.04em;
}

.about__title span {
  font-size: 2.4rem;
}

.about__title {
  font-size: 2rem;
}

.about__underline {
  width: 213px;
  max-width: 100%;
  /* about-underline.svgの実際のviewBox比率(367.435:2)でaspect-ratioを
     計算すると、幅213pxでは高さが1.16px相当のsub-pixel値になり、
     ブラウザのアンチエイリアスで線が薄く霞んで見えてしまっていた。
     Figma側もこの線は幅に関わらず固定2px高さで描画されているため、
     aspect-ratioではなく高さを直接2px指定し、くっきり表示させる。 */
  height: 2px;
}

.about__catch {
  margin-top: 24px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.about__right {
  margin-top: 24px;
  position: relative;
  /* SP版Figmaでは特徴一覧を囲うダーク角丸ボックスは存在せず、
     背景写真の上に直接配置されているため、padding/border-radius/
     背景色を削除する(PC版は元々別途上書きで透明・パディング0済み)。 */
}

.about__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px 4px 11px;
  background-color: var(--color-accent);
  border-radius: 12px;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-align: center;
}

.about__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* SP版: 文字自体にtext-shadowを付けるのではなく、チェックポイント
     エリアの背景写真の上にごく薄い黒のレイヤーを重ねて可読性を上げる。
     単色rgba矩形だと箱の輪郭がくっきり見えてしまうため、
     radial-gradientで中心が少し濃く、外側(box境界に到達する手前)で
     完全に透明になるようにし、境界線を感じさせず自然に馴染ませる。
     background-colorは要素のcontent/borderより背面に描画されるため、
     追加のz-index調整なしで文字・アイコン・区切り線より背面、
     背景写真(.about__bg, z-index:-2)より前面になる。 */
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.46) 0%,
    rgba(0, 0, 0, 0.28) 40%,
    rgba(0, 0, 0, 0.1) 65%,
    rgba(0, 0, 0, 0) 85%
  );
}

.about__item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.about__item-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
}

.about__item-check {
  width: 12px;
  flex-shrink: 0;
  /* about-icon-check.svgも同じくwidth/height=100%のみでルートに絶対
     サイズを持たないSVGストレッチバグ対象。PC版は既にaspect-ratio
     指定済みだったが、SP版(base)に指定が漏れており、チェックマークが
     縦に伸びて線のように見えていた。 */
  aspect-ratio: 19.286 / 15;
}

.about__item p {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
}

/* about-divider.svgはfill:whiteのSVGで、幅350pxに対しaspect-ratio
   547.812:1で高さを計算するとsub-pixel(0.63px)になり、アンチエイリアスで
   ほぼ見えなくなっていた。Figmaの実際の色は白のため、色はそのまま
   (var(--stroke-0, white))維持し、高さを固定値にして視認性を上げる。 */
.about__divider img {
  width: 100%;
  height: 1.5px;
  opacity: 0.8;
}

/* スクロールインアニメーション(初回表示時のみ、js側でis-visibleを付与) */
.about__left {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.about__label {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.about__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.about__item:nth-child(1) { transition-delay: 0s; }
.about__item:nth-child(3) { transition-delay: 0.175s; }
.about__item:nth-child(5) { transition-delay: 0.35s; }

.about.is-visible .about__left,
.about.is-visible .about__item {
  opacity: 1;
  transform: translateY(0);
}

.about.is-visible .about__label {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .about__left,
  .about__label,
  .about__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* PC版レイアウト。以前は css/base/scroll-animation.css に混在していたが
   (.hero__cta-btn / .fade-up の詳細度タイを保つための読み込み順維持が理由で、
   about要素は元々fade-upを使わないため実際には無関係だった)、
   about要素に関するプロパティのみのため、本来の about.css へ移動した。
   カスケード順への影響がないことは移動前に確認済み。 */
@media (min-width: 768px) {
  .about {
    padding: 78px 0;
  }

  .about__overlay {
    position: absolute;
    right: 0;
    top: 0;
    width: 34%;
    height: 100%;
    z-index: -1;
  }

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

  .about__inner {
    display: flex;
    gap: 70px;
    align-items: flex-start;
  }

  .about__left {
    flex: 0 0 510px;
    max-width: 510px;
  }

  .about__title span {
    font-size: 4rem;
  }

  .about__title {
    font-size: 3.2rem;
  }

  .about__underline {
    width: 366px;
    height: 2px;
  }

  .about__divider img {
    height: 1px;
    opacity: 0.6;
  }

  .about__catch {
    margin-top: 48px;
    width: 538px;
    max-width: none;
    font-size: 2.8rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
  }

  .about__right {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
  }

  .about__label {
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 2rem;
    letter-spacing: 0.06em;
  }

  .about__list {
    margin-top: 48px;
    gap: 16px;
    /* PC版はSP用のradial-gradient(背景画像扱い)を打ち消し、
       従来通り背景なしにする。background-colorだけでなく
       background-imageも明示的にnoneへ戻す必要がある。 */
    background: none;
  }

  .about__item {
    gap: 24px;
  }

  .about__item-icon {
    width: 56px;
    height: 56px;
  }

  .about__item-check {
    width: 16px;
    aspect-ratio: 19.286 / 15;
  }

  .about__item p {
    font-size: 2rem;
  }
}