/* === 背面固定背景（拡大なし / 上寄せ） ========================== */

html, body { position: relative; z-index: 0; isolation: isolate; } /* 負のz-indexを安全に背面へ */

.para--fixed .para__bg{
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: min(100vw, 2370px);                  /* PC 実寸上限 */
  aspect-ratio: 2370 / 824;
  background: url("../../ANDCARE_GGS/img/ANDCARE.webp") no-repeat top center / contain;
  z-index: -2;
  pointer-events: none;
}

@media (max-width: 992px){
  .para--fixed .para__bg{
    width: min(100vw, 586px);                 /* SP 実寸上限 */
    aspect-ratio: 586 / 824;
    background-image: url("../../ANDCARE_GGS/img/ANDCARE-sp02.webp");
  }
}

/* === スペーサ（表示区間＝画像の見える高さと一致） ================= */

.para--fixed .para__spacer{
  /* PC: 2370×824 → 100vw * 824/2370 */
  height: calc(100vw * 824 / 2370);
}
#voice { clear: both; }
#AboutANDCARE{ clear: both; }

@media (min-width: 2370px){
  .para--fixed .para__spacer{ height: 824px; } /* 超大型画面で頭打ち */
}

@media (max-width: 992px){
  .para--fixed .para__spacer{
    /* SP: 586×824 → 100vw * 824/586 */
    height: calc(100vw * 824 / 586);
  }
}
/* #kv { margin-bottom: 0; } */
/* #kv + * { margin-top: 0; } */

/* === ヒーローテキスト（セクション内のみ表示） ====================== */

.para .hero-text{
  position: fixed;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  z-index: 5;
  pointer-events: none;
  opacity: 0;                                  /* デフォ非表示 */
  transition: opacity .35s ease;
}
.para.is-active .hero-text{ opacity: 1; }      /* IOで .is-active が付いた時だけ表示 */

#kv .hero-text h2{
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin: 0;
  font-feature-settings: "palt";
  --track: 0.08em;                              /* ← 字間はここで調整（例: 0.03em〜0.12em） */
}

/* 行をブロック化して行間を作る（<br> は非表示） */
#kv .hero-text .line{
  display: block !important;
  white-space: nowrap;
  margin: 0.45em 0 !important;                  /* 行間 */
}
#kv .hero-text br{ display: none; }
#kv .hero-text .ch{ font-weight: inherit; }

/* === “流れる”タイプアニメ：is-activeの時だけ発火 ==================== */

/* 初期：アニメ指定なし（毎回リセットさせるため） */
.line{ display:inline-block; white-space:nowrap; }
.line .ch{
  display:inline-block;
  opacity:0;
  transform: translateY(14px);
  filter: blur(6px);
}

/* “字間”は隣接 .ch の左マージンで作る（1文字分割でも効く） */
.line .ch + .ch{ margin-left: var(--track); }

/* セクションがアクティブな間だけアニメ付与 → 再入場で毎回再生 */
.para.is-active .line .ch{
  animation: luxeIn .7s ease forwards;
  animation-delay: calc(var(--line-delay, 0ms) + var(--i, 0) * var(--stagger, 60ms));
}

/* keyframes：letter-spacing は含めない（上書き防止） */
@keyframes luxeIn{
  0%   { opacity:0; transform:translateY(14px); filter:blur(6px); }
  60%  { filter:blur(2px); }
  100% { opacity:1; transform:translateY(0);   filter:blur(0); }
}

/* 動きを苦手な設定の人には静止表示 */
@media (prefers-reduced-motion: reduce){
  .line .ch{ animation: none !important; opacity: 1 !important; transform:none !important; filter:none !important; }
}

/* === レイアウトのブレイクポイント調整 =============================== */

@media (min-width: 749px) and (max-width: 991px) {
  .para .hero-text{
    position: fixed;
    right: 30%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
  }
}

@media (min-width: 992px) and (max-width: 1700px) {
  .para .hero-text{
    position: fixed;
    right: 20%;
    top: 30%;
    transform: translateY(-50%);
    text-align: center;
    color: #fff;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
  }
}

@media (max-width: 748px) {

}