/* ==========================================================================
   /aboutus/ v3（PROMOTION-42 アバウトアス フィロソフィーページ）
   デザイン正: Figma qOmIhjuaAbcxb0TN000VLJ（aboutus/pc 1440・aboutus/sp 375）
   PC / SP の切替は本番共通の 979px。
   ========================================================================== */

/* 共通 style.css は SP で body をスクロール容器にしている（position: fixed + overflow-y: auto）。
   FV の sticky とスクロール量の計測を window 基準にするため、v2 と同じく解除する。 */
html {
  overflow: visible !important;
  overflow-y: visible !important;
}
body {
  overflow-x: visible !important;
  overflow-y: visible !important;
  position: relative !important;
}

/* --- 既存の共通バナー・CVA（v2 から引き継ぎ） ------------------------- */
.cva, .bannerCommon {
  position: relative;
  z-index: 2;
}
.aboutus_area .has_animation {
  opacity: 0;
  transform: translateX(-10px);
  transition: 0.8s ease-in-out;
}
.aboutus_area .has_animation.animation-active {
  opacity: 1;
  transform: translateX(0px);
}
@media screen and (max-width: 979px) {
  .cvaSP__contact {
    border-top: none !important;
  }
  /* 「ゴリラクリニックを知る」と共通バナーの間を空ける（共通CSSは padding: 0 20px） */
  .aboutusV3 .bannerCommon {
    padding: 48px 20px 0;
  }
}

/* --- ベース -------------------------------------------------------------- */
.aboutusV3 {
  --ab-header-h: 58px;
  --ab-color-text: var(--gc-color-text, #1a1a1a);
  --ab-color-gold: var(--gc-color-gold, #bba171);
  overflow-x: clip;
  /* SP の共通CSSは html が黒・body が1画面分の高さのため、背景を持たないと2画面目以降が黒くなる */
  background-color: #fff;
  color: #000;
}
/* 新しい部分（FV〜ゴリラクリニックを知る）だけ Google Fonts の Noto Sans JP（350 / 600 のみ読み込み）を使う。
   本文の 350 は、サイト共通の NotoSansJp が既定で表示していた Light（Google の 300 相当）より一段太い太さ。
   共通バナー・CVA は読み込んでいない太さを使うので、サイト共通の書体のままにする */
.abFv,
.abSection {
  font-family: "Noto Sans JP", "NotoSansJp", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, sans-serif;
}
@media screen and (max-width: 979px) {
  .aboutusV3 {
    --ab-header-h: 50px;
  }
}

/* --- FV（スクロール連動） ------------------------------------------------
   --p（0〜1）は aboutus.js がスクロール量から設定する。
   0: 写真＋キャッチ / 1: 白ベール（67%）＋フィロソフィー本文（Figma の fv 2状態） */
.abFv {
  --p: 0;
  --ab-fv-h: calc(100vh - var(--ab-header-h));
  --ab-fv-distance: 150vh;
  position: relative;
}
@supports (height: 100svh) {
  .abFv {
    --ab-fv-h: calc(100svh - var(--ab-header-h));
  }
}
.abFv.is-motion {
  height: calc(var(--ab-fv-h) + var(--ab-fv-distance));
}
/* aboutus.js が動かなかったときは、キャッチと本文が重ならないよう最後の状態（白ベール＋本文）で止める */
html:not(.abFv-js) .abFv:not(.is-motion) {
  --p: 1;
}
.abFv__stage {
  position: sticky;
  top: var(--ab-header-h);
  height: var(--ab-fv-h);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-left: 25%;
  /* 写真の読み込みが終わるまで白く抜けないよう、写真の背景に近いグレーを敷く */
  background: linear-gradient(180deg, #a4a9af 0%, #d4d7da 100%);
}
.abFv__img,
.abFv__veil {
  position: absolute;
  inset: 0;
}
.abFv__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 0;
  transform: scale(calc(1 + clamp(0, var(--p) / 0.4, 1) * 0.04));
  transform-origin: 62% 30%;
  transition: transform 0.3s ease-out;
  will-change: transform;
}
.abFv__veil {
  background: rgba(255, 255, 255, 0.67);
  opacity: clamp(0, (var(--p) - 0.1) / 0.3, 1);
  /* スクロール量に直接つないだ変化を短い transition でならし、慣性スクロール中のカクつきを抑える */
  transition: opacity 0.3s ease-out;
  will-change: opacity;
}
.abFv__catch {
  position: absolute;
  left: 25%;
  top: 50%;
  margin: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  opacity: clamp(0, 1 - var(--p) / 0.2, 1);
  transform: translateY(calc(-50% - clamp(0, var(--p) / 0.2, 1) * 24px));
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  will-change: opacity, transform;
}
/* 本文の文字サイズは、FV の高さ（--ab-fv-h）と幅に収まる範囲でできるだけ大きくする。
   PC: 本文8行＋段落間3行＝11行 × 行間2.3 が高さの約9割に収まるよう 1/28。上限 18px */
.abFv__philosophy {
  position: relative;
  color: var(--ab-color-text);
  font-size: clamp(12px, min(1.25vw, calc(var(--ab-fv-h) / 28)), 18px);
  font-weight: 350;
  line-height: 2.3;
}
.abFv__philosophy p {
  margin: 0;
}
.abFv__philosophy p + p {
  margin-top: 2.3em;
}
/* 1行ずつ表示する。行の番号 --i は PC の行（--pc）、スマホでは --sp を使う（aboutus.js が読む）。
   隠すのは html に abFv-js が付いているときだけ（ページ内のインラインスクリプトが最初の描画前に付ける）。
   JS が動かなければ本文はそのまま表示される */
.abLine {
  --i: var(--pc);
}
.abFv-js .abLine {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  /* 消えるときは短く。上へ一気に戻したとき、消えきる前に戻ってきたキャッチと重ならないようにする */
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}
.abFv-js .abLine.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
@media screen and (max-width: 979px) {
  .abFv {
    --ab-fv-distance: 170vh;
  }
  .abFv__stage {
    padding: 0 24px;
  }
  .abFv__img img {
    object-position: 70% 0;
    transform-origin: 70% 30%;
  }
  .abFv__catch {
    left: 24px;
    top: 32%;
    font-size: 18px;
    transform: translateY(calc(clamp(0, var(--p) / 0.2, 1) * -24px));
  }
  /* SP: 本文15行＋段落間3行＝18行 × 行間2 が高さの約9割に収まるよう 1/40。
     幅は最長の行（19字）が左右24pxの余白に収まるよう (100vw - 48px) / 19.5。上限 16px */
  .abFv__philosophy {
    font-size: clamp(8px, min(calc((100vw - 48px) / 19.5), calc(var(--ab-fv-h) / 40)), 16px);
    line-height: 2;
  }
  .abFv__philosophy p + p {
    margin-top: 2em;
  }
  .abLine,
  .abFv-js .abLine {
    --i: var(--sp);
    display: block;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* 動き（移動・拡大）は止め、スクロールに合わせた切り替え（不透明度）だけ残す */
  .abFv__img img,
  .abFv-js .abLine,
  .abCard:hover img {
    transform: none;
  }
  .abFv__catch {
    transform: translateY(-50%);
  }
}
@media screen and (max-width: 979px) and (prefers-reduced-motion: reduce) {
  .abFv__catch {
    transform: none;
  }
}

/* --- セクション共通 ------------------------------------------------------ */
.abSection {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: 80px;
}
.abSection--last {
  padding-bottom: 80px;
}
.abTitle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 64px;
  text-align: center;
}
.abTitle__sub {
  margin: 0;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.7;
}
.abTitle__main {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
@media screen and (max-width: 979px) {
  .abSection {
    width: calc(100% - 32px);
    max-width: 343px;
    padding-top: 48px;
  }
  .abSection--movie,
  .abSection--last {
    padding-bottom: 48px;
  }
  .abTitle {
    gap: 2px;
    margin-bottom: 32px;
  }
  .abTitle__sub {
    font-size: 14px;
  }
  .abTitle__main {
    font-size: 18px;
  }
}

/* --- ゴリラクリニックとは ------------------------------------------------- */
.abAbout {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.abAbout__item {
  display: flex;
  gap: 48px;
  align-items: flex-start;
}
.abAbout__img {
  flex: 0 0 384px;
  height: 224px;
}
.abAbout__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abAbout__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-width: 0;
}
.abAbout__ttl {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.abAbout__txt {
  margin: 0;
  font-size: 14px;
  font-weight: 350;
  line-height: 1.7;
}
/* PC の強制改行は 1200px 幅の組みに合わせたもの。それより狭いと中途半端な位置で折り返すため外す */
@media screen and (max-width: 1199px) {
  .abAbout__txt br {
    display: none;
  }
}
@media screen and (max-width: 979px) {
  .abAbout {
    gap: 32px;
  }
  .abAbout__item {
    flex-direction: column;
    gap: 16px;
  }
  .abAbout__img {
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 343 / 223;
  }
  .abAbout__body {
    gap: 16px;
  }
  .abAbout__ttl {
    font-size: 18px;
  }
}

/* --- 画像カード（治療一覧・ゴリラクリニックを知る） ----------------------- */
.abTreatment,
.abKnow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.abCard {
  position: relative;
  display: block;
  aspect-ratio: 384 / 224;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}
.abCard--know {
  aspect-ratio: 384 / 112;
}
.abCard img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.abCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.abCard__label {
  position: absolute;
  left: 14px;
  bottom: 9px;
  z-index: 1;
  font-size: 16px;
  font-weight: 350;
  line-height: 1.7;
}
.abCard--know .abCard__label {
  left: 10px;
  bottom: 8px;
}
.abCard__en {
  display: block;
  color: var(--ab-color-gold);
  font-size: 12px;
  font-weight: 350;
  line-height: 1.7;
}
.abCard__sm {
  font-size: 14px;
}
@media (hover: hover) {
  .abCard:hover img {
    transform: scale(1.05);
  }
}
@media screen and (max-width: 979px) {
  .abTreatment {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 17px;
  }
  .abKnow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .abCard {
    aspect-ratio: 163 / 106;
  }
  .abCard--know {
    aspect-ratio: 343 / 106;
  }
  .abCard__label {
    left: 8px;
    bottom: 4px;
    font-size: 14px;
  }
  .abCard--know .abCard__label {
    left: 8px;
    bottom: 4px;
  }
  .abCard__en {
    font-size: 11px;
    line-height: 1.3;
  }
  .abCard__sm {
    font-size: 12px;
  }
}

/* --- ブランドムービー ---------------------------------------------------- */
.abMovie {
  width: 792px;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 792 / 446;
  background: #000;
}
.abMovie video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}