.Section.Hero .HeroMainImage[data-reveal-manual="hero"],
.Section.Hero .HeroMainLogo[data-reveal-manual="hero"]{
  opacity: 0;
  transform: translateY(var(--reveal-up, 0));
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1) var(--hero-delay, 0s),
    transform .7s cubic-bezier(.22,1,.36,1) var(--hero-delay, 0s);
}

.Section.Hero .HeroMainImage[data-reveal-manual="hero"].is-inview,
.Section.Hero .HeroMainLogo[data-reveal-manual="hero"].is-inview{
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   Global animation toggle helper
   クラス `html.is-animations-disabled` で一括停止
=============================== */
html.is-animations-disabled *,
html.is-animations-disabled *::before,
html.is-animations-disabled *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  animation-play-state: paused !important;
  transition-duration: 0ms !important;
  transition-delay: 0ms !important;
}

html.is-animations-disabled .reveal,
html.is-animations-disabled .reveal.is-inview,
html.is-animations-disabled .js-fade-in,
html.is-animations-disabled .js-fade-in.is-visible,
html.is-animations-disabled .RankingItemImage.reveal,
html.is-animations-disabled .RankingItemImage.reveal.is-inview,
html.is-animations-disabled .AreaHeroMain picture.AreaHeroMain.reveal,
html.is-animations-disabled .AreaHeroMain picture.AreaHeroMain.reveal.is-inview,
html.is-animations-disabled .AreaHeroSub picture.reveal,
html.is-animations-disabled .AreaHeroSub picture.reveal.is-inview,
html.is-animations-disabled .QaBody > .QaBox.js-fade-in,
html.is-animations-disabled .QaBody > .QaBox.js-fade-in.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

html.is-animations-disabled .LoadingOverlay {
  opacity: 0 !important;
}

html.is-animations-disabled .Section.Hero .HeroMainImage img,
html.is-animations-disabled .Section.Hero .HeroMainLogo img,
html.is-animations-disabled .Section.Hero .HeroTitleEng {
  opacity: 1 !important;
  transform: none !important;
}

html.is-animations-disabled .Section.Hero .HeroMainOutline,
html.is-animations-disabled .Section.Hero .HeroImageSub img,
html.is-animations-disabled .Section.Hero .HeroKirakira img,
html.is-animations-disabled .LoadingText,
html.is-animations-disabled .LoadingText .char,
html.is-animations-disabled .LoadingText .dot,
html.is-animations-disabled .LoadingOverlay.is-drawing .LoadingPath,
html.is-animations-disabled .Section.Hero.start-stroke .LoadingPath,
html.is-animations-disabled .StrokeAccent .StrokePath {
  animation: none !important;
  transform: none !important;
}

html.is-animations-disabled .HeroBottomOutline,
html.is-animations-disabled .Section.Hero .HeroImageSub img,
html.is-animations-disabled .Section.Hero .HeroKirakira img {
  transform: none !important;
}

html.is-animations-disabled .QaBody > .QaBox.js-fade-in,
html.is-animations-disabled .QaBody > .QaBox.js-fade-in.is-visible {
  transition: none !important;
}

/* Reveal base */
/* transform 合成用のカスタムプロパティを登録 */
@property --float-y {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
  }
  
  .reveal {
      opacity: 0;
      transition: opacity .6s ease, transform .6s ease, filter .6s ease;
      will-change: opacity, transform;
    }
    
    /* 状態遷移 */
    .reveal.is-inview {
      opacity: 1;
    }
    
    /* パターン: 上に3px */
    .reveal--up-3 { transform: translateY(3px) translateY(var(--float-y, 0)); }
    .reveal--up-3.is-inview { transform: translateY(0) translateY(var(--float-y, 0)); }
    
    /* パターン: 上に8px */
    .reveal--up-8 { transform: translateY(8px) translateY(var(--float-y, 0)); }
    .reveal--up-8.is-inview { transform: translateY(0) translateY(var(--float-y, 0)); }
    
    /* パターン: フェードのみ */
    .reveal--fade { transform: translateY(var(--float-y, 0)); }
    
    /* パターン: ズーム（微小） */
    .reveal--zoom { transform: scale(0.98); }
    .reveal--zoom.is-inview { transform: scale(1); }
  
    /* ------------------------------
       data 属性で任意値を指定できる可変版
       data-reveal-up: 0〜999(px)
       data-reveal-zoom: 例 98 → 0.98
       クラス指定よりも限定的に適用（属性が付いている要素のみ）
    ------------------------------- */
    .reveal[data-reveal-up],
    .reveal[data-reveal-zoom] {
      /* 両方指定時は合成 */
      transform: translateY(var(--reveal-up, 0)) scale(var(--reveal-zoom, 1)) translateY(var(--float-y, 0));
    }
    .reveal[data-reveal-up].is-inview,
    .reveal[data-reveal-zoom].is-inview {
      transform: translateY(0) scale(1) translateY(var(--float-y, 0));
    }
  
  /* ==============================
     Marker underline on in-view
     対象: .js-marker（主に .AreaHeadingText > h3 に付与）
  =============================== */
  @keyframes area-h3-marker-grow{
    0%{ width: 0; }
    100%{ width: 100%; }
  }
  .js-marker.is-inview::after{
    animation: area-h3-marker-grow 0.9s ease 0.1s forwards;
  }
  @media (prefers-reduced-motion: reduce){
    .js-marker.is-inview::after{ animation: none; width: 100%; }
  }
  
  /* ==============================
     Loading Overlay
     左から右へ描くストローク（筆感）
  =============================== */
  .LoadingOverlay{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ffe3e6; /* 優しいピンク */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity .6s ease;
    pointer-events: none; /* 表示中でも操作はブロックしない */
  }
  .LoadingOverlay.is-done{ opacity: 0; }
  .LoadingText{
    position: absolute;
    bottom: 28%;
    left: 50%;
    transform: translateX(-50%);
    /* Hero と同じ英字フォント */
    font-family: "Allison", cursive, system-ui, -apple-system, sans-serif;
    color: rgba(255,255,255,.85); /* 半透明の白（初期色） */
    font-weight: 400;
    font-size: clamp(18px, 3.2vw, 36px);
    letter-spacing: .1em;
    opacity: .9;
    animation: loading-text-breath 1.8s ease-in-out infinite;
  }
  .LoadingText .char{
    display: inline-block;
    color: rgba(255,255,255,.85); /* 初期は白 */
    /* 左から順に一度だけピンクに変化し、そのまま保持 */
    animation: loading-char-fill .9s ease forwards;
  }
  /* 左から順に遅延（7文字: L o a d i n g） */
  .LoadingText .char:nth-child(1){ animation-delay: 0s; }
  .LoadingText .char:nth-child(2){ animation-delay: .12s; }
  .LoadingText .char:nth-child(3){ animation-delay: .24s; }
  .LoadingText .char:nth-child(4){ animation-delay: .36s; }
  .LoadingText .char:nth-child(5){ animation-delay: .48s; }
  .LoadingText .char:nth-child(6){ animation-delay: .60s; }
  .LoadingText .char:nth-child(7){ animation-delay: .72s; }
  @keyframes loading-char-fill{
    0%{ color: rgba(255,255,255,.85); }
    100%{ color: #EF1F75; }
  }
  .LoadingText .dot{
    display: inline-block;
    width: 0.6em;
    text-align: center;
    color: rgba(255,255,255,.85); /* ベースは白 */
    /* バウンス/点滅 + 色ループを同時適用。両方に同じ遅延を与える */
    animation: 
      loading-dot 1.2s ease-in-out infinite,
      loading-dot-color 1.2s ease-in-out infinite;
    animation-delay: 
      calc(var(--i) * 0.2s),
      calc(var(--i) * 0.2s);
  }
  @keyframes loading-dot-color{
    0%, 30%{ color: rgba(255,255,255,.85); }
    50%{ color: #EF1F75; }
    100%{ color: rgba(255,255,255,.85); }
  }
  .LoadingSvg{
    position: absolute;
    left: -5vw;
    bottom: 24%;
    width: 110vw; /* 画面より少し大きく */
    height: auto;
  }
  .LoadingPath{
    /* JS で stroke-dasharray/offset を設定 */
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    stroke-linecap: round;
  }
  .LoadingOverlay.is-drawing .LoadingPath{
    /* ローディング中は往復ループ */
    animation: loading-stroke-draw 2.4s ease-in-out infinite alternate;
  }
  /* Hero セクション内のストロークはデフォルト停止。開始クラス付与で一度だけ描画して保持 */
  .Section.Hero .LoadingPath{ animation: none; }
  .Section.Hero.start-stroke .LoadingPath{
    animation: loading-stroke-draw 2.4s ease-out forwards;
  }
  @keyframes loading-stroke-draw{
    0%{ stroke-dashoffset: var(--dash, 1); }
    100%{ stroke-dashoffset: 0; }
  }
  @keyframes loading-dot{
    0%, 20%{ opacity: .2; transform: translateY(0); }
    50%{ opacity: 1; transform: translateY(-2px); }
    100%{ opacity: .2; transform: translateY(0); }
  }
  @keyframes loading-text-breath{
    0%{ opacity: .7; }
    100%{ opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce){
    .LoadingOverlay.is-drawing .LoadingPath{ animation: none; stroke-dashoffset: 0; }
    .LoadingText{ animation: none; }
    .LoadingText .dot{ animation: none; }
    .Section.Hero .LoadingPath{ animation: none; stroke-dashoffset: 0; }
    .Section.Hero.start-stroke .LoadingPath{ animation: none; stroke-dashoffset: 0; }
  }
  
  /* ==============================
     Hero Heart (Logo) Appear
     - オーバーレイ消失後に左-8px/下-8pxからふわっと
  =============================== */
  .Section.Hero .HeroMainLogo{
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: .15s;
    will-change: opacity, transform;
  }
  .Section.Hero.show-heart .HeroMainLogo{
    opacity: 1;
    transform: translate(0, 0);
  }
  @media (max-width: 768px){
    .Section.Hero.show-heart .HeroMainLogo{
      transform: translate(-50%, 0);
    }
  }
  /* メイン画像も同じ効果 */
  .Section.Hero .HeroMainImage{
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity .6s ease, transform .6s ease;
    transition-delay: .1s; /* タイトルより少し遅らせる */
    will-change: opacity, transform;
  }
  .Section.Hero.show-heart .HeroMainImage{
    opacity: 1;
    transform: translate(0, 0);
  }
  /* 英語タイトルも同様に先に出現（遅延なし） */
  .Section.Hero .HeroTitleEng{
    opacity: 0;
    transform: translate(-8px, 8px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }
  .Section.Hero.show-heart .HeroTitleEng{
    opacity: 1;
    transform: translate(0, 0);
  }
  /* 以前の前面化をリセット（オーバーレイ背面に戻す） */
  .Section.Hero .HeroImageSub,
  .Section.Hero .HeroKirakira{
    /* position: static; */
    z-index: 1000000;
    pointer-events: auto;
  }
  
  /* Hero のサブ画像/キラキラはリビール演出を無効化してガクン防止 */
  .Section.Hero .HeroImageSub .reveal.float-y,
  .Section.Hero .HeroKirakira .reveal.float-y{
    opacity: 1 !important;
    /* transform は !important を外し、後段のアニメを許可 */
    transform: none;
    transition: none !important;
  }
  
  /* ふわふわ上下（レイアウトに影響しないtransformのみ） */
  @keyframes hero-float-y{
    0%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
    100%{ transform: translateY(0); }
  }
  
  /* 拡大縮小も含めた前後感（サブ画像用） */
  @keyframes hero-float-zoom{
    0%{ transform: translateY(0) scale(1); }
    50%{ transform: translateY(-2px) scale(1.01); }
    100%{ transform: translateY(0) scale(1); }
  }
  
  /* サブ画像は前後感ありの揺れ、キラキラは従来の揺れ */
  .Section.Hero .HeroImageSub img{
    animation: hero-float-zoom 4.8s ease-in-out infinite;
    will-change: transform;
  }
  .Section.Hero .HeroKirakira img{
    animation: hero-float-y 3.6s ease-in-out infinite;
    will-change: transform;
  }
  .Section.Hero .HeroImageSubItem01 img{ animation-delay: 0s; }
  .Section.Hero .HeroImageSubItem02 img{ animation-delay: .2s; }
  .Section.Hero .HeroImageSubItem03 img{ animation-delay: .4s; }
  .Section.Hero .HeroImageSubItem04 img{ animation-delay: .6s; }
  .Section.Hero .HeroKirakira .HeroKirakiraItem01 img{ animation-delay: .1s; }
  .Section.Hero .HeroKirakira .HeroKirakiraItem02 img{ animation-delay: .3s; }
  .Section.Hero .HeroKirakira .HeroKirakiraItem03 img{ animation-delay: .5s; }
  .Section.Hero .HeroKirakira .HeroKirakiraItem04 img{ animation-delay: .7s; }
  
  @media (prefers-reduced-motion: reduce){
    .Section.Hero .HeroImageSub img,
    .Section.Hero .HeroKirakira img{ animation: none !important; }
  }
  
  /* ==============================
    Scroll Fade In Animation
  =============================== */
  .js-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1), transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
  }
  
  .js-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
/* Reveal base */
/* transform 合成用のカスタムプロパティを登録 */
@property --float-y {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

/* ==============================
   HeroBottomOutline Slide-up & Soft Bounce
   - ページロード後に .Section.Hero に is-loaded が付与済み
   - その直後にある .HeroBottomOutline に対してアニメ適用
   - このファイルを削除すれば効果は消える
=============================== */
.HeroBottomOutline{
  /* 基底は“見える”状態にしておく（.is-loaded が外れても消えないように） */
  transform: none;
  transform-origin: center bottom;
}
.Section.Hero.is-loaded .HeroBottomOutline{
  /* ふわっと上がってから軽くバウンスして着地 */
  animation: hero-outline-enter 900ms cubic-bezier(.22,1,.36,1) 120ms both;
}
@keyframes hero-outline-enter{
  0%{ opacity: 0; transform: translateY(80px); }
  60%{ opacity: 1; transform: translateY(-6px); }
  80%{ transform: translateY(2px); }
  100%{ transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .HeroBottomOutline{ transform: none; }
  .Section.Hero.is-loaded .HeroBottomOutline{ animation: none; }
}

/* ==============================
   Hero Sub Images: Slide-up + Soft Bounce (staggered)
   - Targets: .HeroImageSubItem01..04
   - Trigger: .Section.Hero.is-loaded
   - This block is self-contained; remove this file to disable
=============================== */
.Section.Hero .HeroImageSubItem01,
.Section.Hero .HeroImageSubItem02,
.Section.Hero .HeroImageSubItem03,
.Section.Hero .HeroImageSubItem04{
  /* 基底は“見える”状態にしておく（.is-loaded が外れても消えないように） */
  opacity: 1;
  transform: none;
  transform-origin: center bottom;
}
.Section.Hero.is-loaded .HeroImageSubItem01{ animation: hero-sub-enter 900ms cubic-bezier(.22,1,.36,1) 120ms both; }
.Section.Hero.is-loaded .HeroImageSubItem02{ animation: hero-sub-enter 900ms cubic-bezier(.22,1,.36,1) 220ms both; }
.Section.Hero.is-loaded .HeroImageSubItem03{ animation: hero-sub-enter 900ms cubic-bezier(.22,1,.36,1) 320ms both; }
.Section.Hero.is-loaded .HeroImageSubItem04{ animation: hero-sub-enter 900ms cubic-bezier(.22,1,.36,1) 420ms both; }

@keyframes hero-sub-enter{
  0%{ opacity: 0; transform: translateY(40px); }
  60%{ opacity: 1; transform: translateY(-6px); }
  80%{ transform: translateY(2px); }
  100%{ transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .Section.Hero .HeroImageSubItem01,
  .Section.Hero .HeroImageSubItem02,
  .Section.Hero .HeroImageSubItem03,
  .Section.Hero .HeroImageSubItem04{ opacity: 1; transform: none; }
  .Section.Hero.is-loaded .HeroImageSubItem01,
  .Section.Hero.is-loaded .HeroImageSubItem02,
  .Section.Hero.is-loaded .HeroImageSubItem03,
  .Section.Hero.is-loaded .HeroImageSubItem04{ animation: none; }
}

.reveal {
    opacity: 0;
    transition: opacity .6s ease, transform .6s ease, filter .6s ease;
    will-change: opacity, transform;
  }
  
  /* 状態遷移 */
  .reveal.is-inview {
    opacity: 1;
  }
  
  /* パターン: 上に3px */
  .reveal--up-3 { transform: translateY(3px) translateY(var(--float-y, 0)); }
  .reveal--up-3.is-inview { transform: translateY(0) translateY(var(--float-y, 0)); }
  
  /* パターン: 上に8px */
  .reveal--up-8 { transform: translateY(8px) translateY(var(--float-y, 0)); }
  .reveal--up-8.is-inview { transform: translateY(0) translateY(var(--float-y, 0)); }
  
  /* パターン: フェードのみ */
  .reveal--fade { transform: translateY(var(--float-y, 0)); }
  
  /* パターン: ズーム（微小） */
  .reveal--zoom { transform: scale(0.98); }
  .reveal--zoom.is-inview { transform: scale(1); }

  /* ------------------------------
     data 属性で任意値を指定できる可変版
     data-reveal-up: 0〜999(px)
     data-reveal-zoom: 例 98 → 0.98
     クラス指定よりも限定的に適用（属性が付いている要素のみ）
  ------------------------------- */
  .reveal[data-reveal-up],
  .reveal[data-reveal-zoom] {
    /* 両方指定時は合成 */
    transform: translateY(var(--reveal-up, 0)) scale(var(--reveal-zoom, 1)) translateY(var(--float-y, 0));
  }
  .reveal[data-reveal-up].is-inview,
  .reveal[data-reveal-zoom].is-inview {
    transform: translateY(0) scale(1) translateY(var(--float-y, 0));
  }

  /* ==============================
     常時ふわふわ上下アニメーション
     対象: .float-y を付与した要素（例: <picture class="float-y">）
  =============================== */
  /* .float-y {
    animation: floatYVar 5.5s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes floatYVar {
    0%   { --float-y: 0px; }
    50%  { --float-y: -6px; }
    100% { --float-y: 0px; }
  }
  .float-y2 {
    animation: floatYVar2 4.5s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes floatYVar2 {
    0%   { --float-y: 0px; }
    50%  { --float-y: -3px; }
    100% { --float-y: 0px; }
  }
  .float-y3 {
    animation: floatYVar3 3.5s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes floatYVar3 {
    0%   { --float-y: 0px; }
    50%  { --float-y: -6px; }
    100% { --float-y: 0px; }
  } */

/* ==============================
   Marker underline on in-view
   対象: .js-marker（主に .AreaHeadingText > h3 に付与）
=============================== */
@keyframes area-h3-marker-grow{
  0%{ width: 0; }
  100%{ width: 100%; }
}
.js-marker.is-inview::after{
  animation: area-h3-marker-grow 0.9s ease 0.1s forwards;
}
@media (prefers-reduced-motion: reduce){
  .js-marker.is-inview::after{ animation: none; width: 100%; }
}

/* ==============================
   Loading Overlay
   左から右へ描くストローク（筆感）
=============================== */
.LoadingOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #ffe3e6; /* 優しいピンク */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .6s ease;
  pointer-events: none; /* 表示中でも操作はブロックしない */
}
.LoadingOverlay.is-done{ opacity: 0; }
.LoadingText{
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
  /* Hero と同じ英字フォント */
  font-family: "Allison", cursive, system-ui, -apple-system, sans-serif;
  color: rgba(255,255,255,.85); /* 半透明の白（初期色） */
  font-weight: 400;
  font-size: clamp(18px, 3.2vw, 36px);
  letter-spacing: .1em;
  opacity: .9;
  animation: loading-text-breath 1.8s ease-in-out infinite;
}
.LoadingText .char{
  display: inline-block;
  color: rgba(255,255,255,.85); /* 初期は白 */
  /* 左から順に一度だけピンクに変化し、そのまま保持 */
  animation: loading-char-fill .9s ease forwards;
}
/* 左から順に遅延（7文字: L o a d i n g） */
.LoadingText .char:nth-child(1){ animation-delay: 0s; }
.LoadingText .char:nth-child(2){ animation-delay: .12s; }
.LoadingText .char:nth-child(3){ animation-delay: .24s; }
.LoadingText .char:nth-child(4){ animation-delay: .36s; }
.LoadingText .char:nth-child(5){ animation-delay: .48s; }
.LoadingText .char:nth-child(6){ animation-delay: .60s; }
.LoadingText .char:nth-child(7){ animation-delay: .72s; }
@keyframes loading-char-fill{
  0%{ color: rgba(255,255,255,.85); }
  100%{ color: #EF1F75; }
}
.LoadingText .dot{
  display: inline-block;
  width: 0.6em;
  text-align: center;
  color: rgba(255,255,255,.85); /* ベースは白 */
  /* バウンス/点滅 + 色ループを同時適用。両方に同じ遅延を与える */
  animation: 
    loading-dot 1.2s ease-in-out infinite,
    loading-dot-color 1.2s ease-in-out infinite;
  animation-delay: 
    calc(var(--i) * 0.2s),
    calc(var(--i) * 0.2s);
}
@keyframes loading-dot-color{
  0%, 30%{ color: rgba(255,255,255,.85); }
  50%{ color: #EF1F75; }
  100%{ color: rgba(255,255,255,.85); }
}
.LoadingSvg{
  position: absolute;
  left: -5vw;
  bottom: 24%;
  width: 110vw; /* 画面より少し大きく */
  height: auto;
}
.LoadingPath{
  /* JS で stroke-dasharray/offset を設定 */
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  stroke-linecap: round;
}
.LoadingOverlay.is-drawing .LoadingPath{
  /* ローディング中は往復ループ */
  animation: loading-stroke-draw 2.4s ease-in-out infinite alternate;
}
/* Hero セクション内のストロークはデフォルト停止。開始クラス付与で一度だけ描画して保持 */
.Section.Hero .LoadingPath{ animation: none; }
.Section.Hero.start-stroke .LoadingPath{
  animation: loading-stroke-draw 2.4s ease-out forwards;
}
@keyframes loading-stroke-draw{
  0%{ stroke-dashoffset: var(--dash, 1); }
  100%{ stroke-dashoffset: 0; }
}
@keyframes loading-dot{
  0%, 20%{ opacity: .2; transform: translateY(0); }
  50%{ opacity: 1; transform: translateY(-2px); }
  100%{ opacity: .2; transform: translateY(0); }
}
@keyframes loading-text-breath{
  0%{ opacity: .7; }
  100%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .LoadingOverlay.is-drawing .LoadingPath{ animation: none; stroke-dashoffset: 0; }
  .LoadingText{ animation: none; }
  .LoadingText .dot{ animation: none; }
  .Section.Hero .LoadingPath{ animation: none; stroke-dashoffset: 0; }
  .Section.Hero.start-stroke .LoadingPath{ animation: none; stroke-dashoffset: 0; }
}

/* ==============================
   Hero Heart (Logo) Appear
   - オーバーレイ消失後に左-8px/下-8pxからふわっと
=============================== */
.Section.Hero .HeroMainImage:not([data-reveal-manual="hero"]),
.Section.Hero .HeroMainLogo:not([data-reveal-manual="hero"]){
  opacity: 1;
  transition: none;
}

/* 初期は非表示＋左下（FOUC防止）。.show-heart 付与でアニメ開始（フェード＋斜めスライド） */
.Section.Hero .HeroMainImage img,
.Section.Hero .HeroMainLogo  img{
  opacity: 0;
  transform: translate(-24px, 16px);
}
.Section.Hero.show-heart .HeroMainImage img,
.Section.Hero.show-heart .HeroMainLogo  img{
  opacity: 1;
  transform: translate(0, 0);
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1) var(--hero-delay, 0s),
    transform .7s cubic-bezier(.22,1,.36,1) var(--hero-delay, 0s);
  will-change: opacity, transform;
}
/* 英語タイトルも同様に先に出現（遅延なし） */
.Section.Hero .HeroTitleEng{
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.Section.Hero.show-heart .HeroTitleEng{
  opacity: 1;
  transform: translate(0, 0);
}
/* 以前の前面化をリセット（オーバーレイ背面に戻す） */
.Section.Hero .HeroImageSub,
.Section.Hero .HeroKirakira{
  /* position: static; */
  z-index: 1000000;
  pointer-events: auto;
}

/* Hero のサブ画像/キラキラはリビール演出を無効化してガクン防止 */
.Section.Hero .HeroImageSub .reveal.float-y,
.Section.Hero .HeroKirakira .reveal.float-y{
  opacity: 1 !important;
  /* transform は !important を外し、後段のアニメを許可 */
  transform: none;
  transition: none !important;
}

/* ふわふわ上下（レイアウトに影響しないtransformのみ） */
@keyframes hero-float-y{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
  100%{ transform: translateY(0); }
}

/* 拡大縮小も含めた前後感（サブ画像用） */
@keyframes hero-float-zoom{
  0%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-6px) scale(1.02); }
  100%{ transform: translateY(0) scale(1); }
}

/* サブ画像は前後感ありの揺れ、キラキラは従来の揺れ */
.Section.Hero .HeroImageSub img{
  animation: hero-float-zoom 6s ease-in-out infinite;
  will-change: transform;
}
.Section.Hero .HeroKirakira img{
  animation: hero-float-y 3.6s ease-in-out infinite;
  will-change: transform;
}
.Section.Hero .HeroImageSubItem01 img{ animation-delay: 0s; }
.Section.Hero .HeroImageSubItem02 img{ animation-delay: .2s; }
.Section.Hero .HeroImageSubItem03 img{ animation-delay: .4s; }
.Section.Hero .HeroImageSubItem04 img{ animation-delay: .6s; }
.Section.Hero .HeroKirakira .HeroKirakiraItem01 img{ animation-delay: .1s; }
.Section.Hero .HeroKirakira .HeroKirakiraItem02 img{ animation-delay: .3s; }
.Section.Hero .HeroKirakira .HeroKirakiraItem03 img{ animation-delay: .5s; }
.Section.Hero .HeroKirakira .HeroKirakiraItem04 img{ animation-delay: .7s; }

@media (prefers-reduced-motion: reduce){
  .Section.Hero .HeroImageSub img,
  .Section.Hero .HeroKirakira img{ animation: none !important; }
}

/* SP用: HeroKirakiraを非表示 */
@media (max-width: 420px){
  .Section.Hero .HeroKirakira,
  .Section.Hero .HeroKirakira .HeroKirakiraItem01,
  .Section.Hero .HeroKirakira .HeroKirakiraItem02,
  .Section.Hero .HeroKirakira .HeroKirakiraItem03,
  .Section.Hero .HeroKirakira .HeroKirakiraItem04{
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* ==============================
   HeroMainImage Outline with Heart Tiles
   - 背景に同形状のシルエットを生成し、ハートパターン(bg_love03.svg)を敷き詰め
   - マスクに hero_mv002.svg を使用し、形状を一致させる
   - わずかに拡大してアウトライン風に
   ============================== */
.Section.Hero .HeroImage{ position: relative; }
.Section.Hero .HeroMainImage{ position: relative; z-index: 1; }
.Section.Hero .HeroMainOutline{
  opacity: 0.15;
  position: absolute;
  inset: 0;
  z-index: 0; /* HeroMainImage の背面 */
  background-image: url('../images/bg_love03.svg');
  background-repeat: repeat;
  background-size: 40px 40px; /* タイル密度（調整可） */
  /* タイルの位相を画像と合わせる（中央基準） */
  background-position: center center;
  pointer-events: none;
  transform: translateX(61px); /* 右へオフセット */
  transform-origin: center; 
  /* 背景のアニメに備えて will-change を追加 */
  will-change: opacity, transform, background-size, background-position;
  /* ハートがふわっと外側に広がる・流れるように */
  animation: hero-heart-flow 160s ease-in-out infinite;
  /* 形状マスク（Safari対応含む） */
  -webkit-mask-image: url('../images/hero_mv002.svg');
  mask-image: url('../images/hero_mv002.svg');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  /* 本体より少し大きいマスクで“外側へ”縁取り。高さ基準にしてアスペクト維持 */
  -webkit-mask-size: auto 105%; mask-size: auto 105%;
  /* マスクの基準を“中央”にして拡大時に外側へ均等に広がる */
  -webkit-mask-position: center center; mask-position: center center;
}


/* ハート背景をゆっくり拡大・平行移動して“外側に流れる”印象を作る */
@keyframes hero-heart-flow{
  0%{
    transform: translateX(61px) scale(0.95);
  }
  50%{
    transform: translateX(61px) scale(1.2);
  }
  100%{
    transform: translateX(61px) scale(0.95);
  }
}

@media (prefers-reduced-motion: reduce){
  .Section.Hero .HeroMainOutline{ animation: none; }
}
.Section.Hero.show-heart .HeroMainOutline,
.Section.Hero.is-loaded .HeroMainOutline{ animation-play-state: running; }

/* SP用: translateXをリセットしてスケールのみ、位置を下に調整、サイズを大きく */
@media (max-width: 768px){
  .Section.Hero .HeroMainOutline{
    transform: translateY(20px) scale(1.05);
  }
  @keyframes hero-heart-flow{
    0%{
      transform: translateY(20px) scale(1.05);
    }
    50%{
      transform: translateY(20px) scale(1.35);
    }
    100%{
      transform: translateY(20px) scale(1.05);
    }
  }
}

@media (prefers-reduced-motion: reduce){
  .Section.Hero .HeroMainImage::before{
    opacity: 1; transform: none; animation: none;
  }
}

/* ==============================
   Stroke Accent（セクション背景用）
   - 任意のエリアに重ねる装飾線
   - .js-stroke-accent 内に SVG を挿入して使用
=============================== */
.js-stroke-accent{
  position: relative; /* 背景的に重ねる前提 */
}
.StrokeAccent{
  position: absolute;
  inset: 0; /* 横いっぱい */
  /* 100vw はスクロールバー幅ぶんはみ出すため 100% に変更 */
  width: 100%;
  left: 0;
  right: 0;
  top: 20px;
  z-index: -1; /* 背面へ */
  pointer-events: none;
  transform: translateX(-160px);
}
.StrokeAccent .StrokeSvg{ width: 110%; height: auto; display: block; }
.StrokeAccent .StrokePath{
  fill: none;
  stroke: #FFD805; /* デフォルト色 */
  stroke-opacity: .1; /* デフォルト10% */
  stroke-width: 24; /* デフォルト太さ */
  stroke-linecap: round;
}
.StrokeAccent.is-inview .StrokePath{
  animation: loading-stroke-draw 2s ease-out forwards;
}
@media (prefers-reduced-motion: reduce){
  .StrokeAccent.is-inview .StrokePath{ animation: none; stroke-dashoffset: 0; }
}

/*
===============================
Scroll Fade In Animation
=============================== */
.js-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.33, 1, 0.68, 1), transform 0.8s cubic-bezier(0.33, 1, 0.68, 1);
}

.js-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==============================
   Ranking / Area Images Pop-Up
   - Trigger: .reveal.is-inview（js/animation.js）
   - Target: ランキング画像、エリアヒーロー画像・サブ画像
=============================== */
.RankingItemImage.reveal,
.AreaHeroMain picture.AreaHeroMain.reveal,
.AreaHeroSub picture.reveal {
  opacity: 0;
  transform: var(--reveal-base-transform, translateY(0)) translateY(36px);
}

@keyframes pop-up-enter {
  0% { opacity: 0; transform: var(--reveal-base-transform, translateY(0)) translateY(36px); }
  100% { opacity: 1; transform: var(--reveal-base-transform, translateY(0)) translateY(0); }
}

.RankingItemImage.reveal.is-inview,
.AreaHeroMain picture.AreaHeroMain.reveal.is-inview,
.AreaHeroSub picture.reveal.is-inview {
  animation: pop-up-enter 0.9s cubic-bezier(.22,1,.36,1) both;
}

/* 連続配置要素にわずかなディレイを付与してリズム調整 */
.RankingListInner .RankingItemBox:nth-child(1) .RankingItemImage.reveal.is-inview { animation-delay: 80ms; }
.RankingListInner .RankingItemBox:nth-child(2) .RankingItemImage.reveal.is-inview { animation-delay: 140ms; }
.RankingListInner .RankingItemBox:nth-child(3) .RankingItemImage.reveal.is-inview { animation-delay: 200ms; }

.RankingListMore .RankingItemBox:nth-child(odd) .RankingItemImage.reveal.is-inview { animation-delay: 100ms; }
.RankingListMore .RankingItemBox:nth-child(even) .RankingItemImage.reveal.is-inview { animation-delay: 160ms; }

.AreaHeroSub picture.reveal.is-inview:nth-child(1) { animation-delay: 40ms; }
.AreaHeroSub picture.reveal.is-inview:nth-child(2) { animation-delay: 110ms; }
.AreaHeroSub picture.reveal.is-inview:nth-child(3) { animation-delay: 180ms; }
.AreaHeroSub picture.reveal.is-inview:nth-child(4) { animation-delay: 250ms; }

/* HeroMain の画像には少し遅らせてからポップ */
.AreaHeroMain picture.AreaHeroMain.reveal.is-inview { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce){
  .RankingItemImage.reveal,
  .AreaHeroMain picture.AreaHeroMain.reveal,
  .AreaHeroSub picture.reveal {
    opacity: 1;
    transform: var(--reveal-base-transform, translateY(0));
  }
  .RankingItemImage.reveal.is-inview,
  .AreaHeroMain picture.AreaHeroMain.reveal.is-inview,
  .AreaHeroSub picture.reveal.is-inview {
    animation: none;
  }
}

/* ==============================
   QaBox: Scroll-in Fade-up (staggered)
   - Trigger: IntersectionObserver が .is-visible を付与
   - Target: .QaBody > .QaBox
   ============================== */
.QaBody > .QaBox.js-fade-in{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(0.33, 1, 0.68, 1), transform .8s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: opacity, transform;
}
.QaBody > .QaBox.js-fade-in.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.QaBody > .QaBox.js-fade-in{ transition-delay: 0ms; }
.QaBody > .QaBox.js-fade-in:nth-of-type(2){ transition-delay: 120ms; }
.QaBody > .QaBox.js-fade-in:nth-of-type(3){ transition-delay: 240ms; }
.QaBody > .QaBox.js-fade-in:nth-of-type(4){ transition-delay: 360ms; }
.QaBody > .QaBox.js-fade-in:nth-of-type(5){ transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce){
  .QaBody > .QaBox.js-fade-in{ opacity: 1; transform: none; transition: none; }
}


@media (max-width: 600px){
  .Section.Hero .HeroMainOutline {
    opacity: 0.2;
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url(../images/bg_love03.svg);
    background-repeat: repeat;
    background-size: 30px;
    background-position: center center;
    pointer-events: none;
    transform: translateX(0px) translateY(40px);
    animation: hero-heart-flow 120s ease-in-out infinite;
    -webkit-mask-size: auto 90%;
    mask-size: auto 90%;
  }
}
  

.js-hero-slide {
  transform: translate(-8px, 8px);
  transition: opacity 0.6s ease, transform 0.6s ease var(--hero-delay, 0s);
  opacity: 0;
}
.js-hero-slide.is-enter {
  transform: translate(0, 0);
  opacity: 1;
}
/* Manual reveal override for hero main assets */
.Section.Hero.show-heart .HeroMainImage[data-reveal-manual="hero"],
.Section.Hero.show-heart .HeroMainLogo[data-reveal-manual="hero"] {
  opacity: 0;
  transform: translateY(var(--reveal-up, 0));
}

.Section.Hero.show-heart .HeroMainImage[data-reveal-manual="hero"].is-inview,
.Section.Hero.show-heart .HeroMainLogo[data-reveal-manual="hero"].is-inview {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px){
  /* 768px以下: 中央揃え + アニメーション */
  .Section.Hero .HeroMainLogo[data-reveal-manual="hero"]{
    transform: translateX(-50%) translateY(var(--reveal-up, 0));
  }
  .Section.Hero .HeroMainLogo[data-reveal-manual="hero"].is-inview{
    transform: translateX(-50%) translateY(0);
  }
  .Section.Hero.show-heart .HeroMainLogo[data-reveal-manual="hero"].is-inview {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.Ranking::before{
  animation: sparkle 4s ease-in-out infinite;
}

@keyframes parallax-small-anim {
  from {
    transform: translateY(-500px);
  }
  to {
    transform: translateY(0px);
  }
}