@charset "UTF-8";

/* ==========================================================================
   brand-transition.css  ―  ヒーローとお悩みをつなぐ大型欧文「Anastacia」（PC版のみ）
   --------------------------------------------------------------------------
   ・1025px以上だけ表示。1024px以下は display:none（高さ・余白・DOM上の空白帯なし）。
   ・薄い深緑の1語だけを、画面右端から左端の外へ、約25秒かけて一度だけ横断させる（transform のみ・等速）。最後の1文字まで左へ抜けきる。
   ・書体は、この演出専用にローカル配置した Cormorant Garamond Regular（Latin）。既存の --f-serif-en は変更しない。
   ・準備クラス html.lw-anim（main.js が付与）があるときだけ、開始位置（右端）へ置く。
     無い・JSが失敗した場合は、編集的な静止位置（左から8vw）に静止表示する。
   ・will-change は使わない（transform の遷移中だけブラウザが最適化）。
   ========================================================================== */

/* この演出専用の書体名（既存の Cormorant Garamond［数字のみ］や --f-serif-en には影響しない） */
@font-face {
  font-family: "Cormorant Garamond Brand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400.woff2") format("woff2");
}

.brand-transition { display: none; }

@media (min-width: 1025px) {
  .brand-transition {
    display: block;
    position: relative;
    height: clamp(145px, 10.5vw, 162px);        /* 1440px で約151px */
    overflow: hidden;                           /* 左右をクリップ。ページ全体の overflow は触らない */
    background-color: var(--c-ivory);           /* お悩みセクションと同じ生成り（新しい背景色は追加しない） */
    pointer-events: none;
    user-select: none;
  }
  .brand-transition__word {
    position: absolute;
    top: 50%;
    left: 0;                                    /* 横位置は左端基準（中央基準は使わない） */
    margin: 0;
    color: rgba(69, 87, 63, 0.13);              /* 深いグリーン（--c-moss）の薄い色。ピンクは使わない */
    font-family: "Cormorant Garamond Brand", "Cormorant Garamond", "EB Garamond", Garamond, serif;
    font-size: clamp(148px, 12vw, 196px);       /* 1440px で約173px */
    font-weight: 400;
    font-style: normal;
    line-height: 0.85;
    letter-spacing: 0.03em;
    white-space: nowrap;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    transform: translate3d(8vw, -50%, 0);       /* 静止位置（JS失敗時・動きを減らす設定）：左から8vw */
  }

  /* お悩みの上余白：帯（約151px）の分だけ差し引き、Concerns が下がる量を従来とほぼ同じに保つ */
  .lw#worries { padding-top: clamp(3.25rem, 2.6rem + 1.2vw, 3.75rem); }
}

/* JS有効時のみ：開始位置＝画面右端（82vw）へ置き、画面へ入って is-in が付いたら、
   終了位置＝自身の幅ぶん（−100%）＋4vw だけ左へ、つまり最後の1文字まで画面の左端の外へ抜けきる位置まで、
   25秒・等速（linear）で一度だけ移動する。文字は消さず、フェードもせず、通り過ぎさせる（終了後は生成りの帯だけが残る）。
   transition は is-in の状態にだけ付ける（準備クラスが付いた瞬間に動いてしまうのを防ぐ） */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .lw-anim .brand-transition:not(.is-in) .brand-transition__word { transform: translate3d(82vw, -50%, 0); }
  .lw-anim .brand-transition.is-in .brand-transition__word {
    transform: translate3d(calc(-100% - 4vw), -50%, 0);
    transition-property: transform;
    transition-duration: 25s;
    transition-timing-function: linear;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-transition__word { transform: translate3d(8vw, -50%, 0) !important; transition: none !important; animation: none !important; }
}


/* ==========================================================================
   スマートフォン版（767px以下）専用：CONCERNS の少し上（左上寄り）から「Anastacia」が右へ流れる背景タイポ
   --------------------------------------------------------------------------
   ・PC版の帯（.brand-transition）とは別の装飾要素。768px以上では表示されない。PC版の指定は一切変更していない。
   ・CONCERNS ラベルは動かさない（前面）。文字は、CONCERNS の少し上に縦位置を固定したまま、右へ約11秒かけて一度だけ流れ、画面右端の外へ抜けながら消える。
   ・発火は、既存の observer が CONCERNS ラベルへ付ける is-in を利用（新しい observer は作らない）。
   ・動かすのは transform / opacity のみ。will-change は使わない。終了後は .is-complete で最終状態（非表示）に固定する。
   ・見出し周辺に絶対配置した専用ステージの中だけで横方向をクリップする（body / html の overflow は触らない）。
   ・JS失敗・動きを減らす設定では、装飾なので非表示のまま（空の帯や余白は作らない）。
   ========================================================================== */
.concerns-brand-motion { display: none; }

@media (max-width: 767px) {
  .lw#worries .section__head { position: relative; }
  .lw#worries .section__eyebrow { position: relative; z-index: 1; }   /* CONCERNS は前面・固定 */

  .concerns-brand-motion {
    display: block;
    position: absolute;
    top: -4.25rem;                              /* CONCERNS の上へ広げた位置（絶対配置なので、レイアウトの高さは増やさない） */
    left: calc(-1 * var(--lw-gutter));          /* 画面の左端から */
    width: 100vw;                               /* 画面の右端まで */
    height: 5rem;
    overflow: hidden;                           /* このステージの中だけで左右をクリップ */
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
  .concerns-brand-motion__word {
    position: absolute;
    left: clamp(8px, 4vw, 16px);                /* 画面左端から約8〜16px（左上寄りの開始位置） */
    top: calc(3.5rem - 0.77em);               /* 文字の基準線を、CONCERNS の基準線より約29px上（CONCERNS の上端との間は約19px）に固定 */
    margin: 0;
    color: rgb(69, 87, 63);                     /* PC版と同じ深緑。濃さは opacity（最大0.13）で調整 */
    font-family: "Cormorant Garamond Brand", "Cormorant Garamond", "EB Garamond", Garamond, serif;
    font-size: clamp(48px, 15vw, 68px);
    font-weight: 400;
    font-style: normal;
    line-height: 0.9;
    letter-spacing: 0.02em;
    white-space: nowrap;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
    opacity: 0;                                 /* 表示前は完全に見えない */
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .lw-anim #worries .section__eyebrow.is-in + .concerns-brand-motion:not(.is-complete) .concerns-brand-motion__word {
    animation: concerns-brand-drift-mobile 11.2s linear both;
  }
  .concerns-brand-motion.is-complete .concerns-brand-motion__word { animation: none; opacity: 0; }
}
/* 0〜約9%で静かに現れ、約80%まで等速で右へ進み、最後の20%で薄れながら、文字全体が画面右端の外へ抜ける */
@keyframes concerns-brand-drift-mobile {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0); }
  9%   { opacity: 0.13; }
  80%  { opacity: 0.13; }
  100% { opacity: 0;    transform: translate3d(calc(100vw - clamp(8px, 4vw, 16px) + 8px), 0, 0); }   /* 文字全体が右端の外へ */
}

@media (prefers-reduced-motion: reduce) {
  .concerns-brand-motion { display: none !important; }
}