@charset "UTF-8";
/* 縦方向マスクリビールの初期スタイル。
   mask は 4 倍背の高さで、中央 33-66% が不透明、上下 25% が透明。
   mask-position: 100% 100% で要素は mask 下端 (透明) を覗き込む → 非表示。
   maskVerticalEndStyle と組み合わせて mask-position: 100% 50% に遷移すると
   上から下へ "fade down" でテキストが現れる。 */
/* 縦方向マスクリビールの最終状態。.sai-animate などのトリガークラスと組み合わせて使う。
   transition に !important を付けるのは、親側で別の transition が上書きされていても
   このアニメ専用のタイミング曲線を必ず適用したいため (mask 系は visual showcase 用途で
   ブランドの体験品質に直結する)。 */
/* 横方向マスクリビールの初期スタイル。
   水平書字 (writing-mode: horizontal-tb) のテキストに使うと、左→右へ
   不透明帯が通過して「左の文字から順に現れる」演出になる。
   mask は 4 倍幅で中央 33-66% が不透明、左右 25% が透明。
   mask-position: 100% 100% で要素は mask の右端 (透明) を覗き込む → 非表示。 */
/* 横方向マスクリビールの最終状態。.sai-animate トリガークラスと組み合わせて使う。 */
/* ----- "ふわっと" soft 版 -----
   通常版の gradient (25-33-66-75) はバンド幅が狭く wipe 感が強い。
   小さい字 (SP の enTtl など) では「ポテポテ」と感じやすいので、
   transparent→opaque の transition を 10-40-60-90 に広げて fade-in 寄りにし、
   easing も cubic-bezier(.25,.46,.45,.94) (ease-out-quad) に変えて減速を緩やかに。 */
/* Optima 自前ホスト。
   SCSS 全体で font-family: Optima, serif; と書いてあるのに、これまで font 本体を
   読み込んでいなかったため Mac 以外のプラットフォームでは serif フォールバックになり、
   "BEAUTY" / "HEALTH" / "ONLINE" / "SHOP" などの giant 見出しが Times になっていた。
   ここで TTF を直接 @font-face 登録する。

   パフォーマンス note: TTF は WOFF2 比で約 3 倍重い (現状 ~240KB)。
   フォントロード時間が気になったら fontforge / Google Webfonts Helper 等で
   WOFF2 にコンバートして差し替える (build size 大幅減)。
   font-display:swap でロード中はシステム代替で描画 → 取得完了で差し替え。 */
@font-face {
  font-display: swap;
  font-family: 'Optima';
  font-style: normal;
  font-weight: 400;
  src: url("/brand/fonts/optima-regular.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: 'Optima';
  font-style: normal;
  font-weight: 500;
  src: url("/brand/fonts/optima-medium.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: 'Optima';
  font-style: normal;
  font-weight: 700;
  src: url("/brand/fonts/optima-bold.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: 'Optima';
  font-style: italic;
  font-weight: 400;
  src: url("/brand/fonts/optima-italic.ttf") format("truetype");
}

[data-sai][data-sai][data-sai-duration='50'],
body[data-sai-duration='50'] [data-sai] {
  -webkit-transition-duration: 50ms;
          transition-duration: 50ms;
}

[data-sai][data-sai][data-sai-delay='50'],
body[data-sai-delay='50'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='50'].sai-animate,
body[data-sai-delay='50'] [data-sai].sai-animate {
  -webkit-transition-delay: 50ms;
          transition-delay: 50ms;
}

[data-sai][data-sai][data-sai-duration='100'],
body[data-sai-duration='100'] [data-sai] {
  -webkit-transition-duration: .1s;
          transition-duration: .1s;
}

[data-sai][data-sai][data-sai-delay='100'],
body[data-sai-delay='100'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='100'].sai-animate,
body[data-sai-delay='100'] [data-sai].sai-animate {
  -webkit-transition-delay: .1s;
          transition-delay: .1s;
}

[data-sai][data-sai][data-sai-duration='150'],
body[data-sai-duration='150'] [data-sai] {
  -webkit-transition-duration: .15s;
          transition-duration: .15s;
}

[data-sai][data-sai][data-sai-delay='150'],
body[data-sai-delay='150'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='150'].sai-animate,
body[data-sai-delay='150'] [data-sai].sai-animate {
  -webkit-transition-delay: .15s;
          transition-delay: .15s;
}

[data-sai][data-sai][data-sai-duration='200'],
body[data-sai-duration='200'] [data-sai] {
  -webkit-transition-duration: .2s;
          transition-duration: .2s;
}

[data-sai][data-sai][data-sai-delay='200'],
body[data-sai-delay='200'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='200'].sai-animate,
body[data-sai-delay='200'] [data-sai].sai-animate {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}

[data-sai][data-sai][data-sai-duration='250'],
body[data-sai-duration='250'] [data-sai] {
  -webkit-transition-duration: .25s;
          transition-duration: .25s;
}

[data-sai][data-sai][data-sai-delay='250'],
body[data-sai-delay='250'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='250'].sai-animate,
body[data-sai-delay='250'] [data-sai].sai-animate {
  -webkit-transition-delay: .25s;
          transition-delay: .25s;
}

[data-sai][data-sai][data-sai-duration='300'],
body[data-sai-duration='300'] [data-sai] {
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
}

[data-sai][data-sai][data-sai-delay='300'],
body[data-sai-delay='300'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='300'].sai-animate,
body[data-sai-delay='300'] [data-sai].sai-animate {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}

[data-sai][data-sai][data-sai-duration='350'],
body[data-sai-duration='350'] [data-sai] {
  -webkit-transition-duration: .35s;
          transition-duration: .35s;
}

[data-sai][data-sai][data-sai-delay='350'],
body[data-sai-delay='350'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='350'].sai-animate,
body[data-sai-delay='350'] [data-sai].sai-animate {
  -webkit-transition-delay: .35s;
          transition-delay: .35s;
}

[data-sai][data-sai][data-sai-duration='400'],
body[data-sai-duration='400'] [data-sai] {
  -webkit-transition-duration: .4s;
          transition-duration: .4s;
}

[data-sai][data-sai][data-sai-delay='400'],
body[data-sai-delay='400'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='400'].sai-animate,
body[data-sai-delay='400'] [data-sai].sai-animate {
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
}

[data-sai][data-sai][data-sai-duration='450'],
body[data-sai-duration='450'] [data-sai] {
  -webkit-transition-duration: .45s;
          transition-duration: .45s;
}

[data-sai][data-sai][data-sai-delay='450'],
body[data-sai-delay='450'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='450'].sai-animate,
body[data-sai-delay='450'] [data-sai].sai-animate {
  -webkit-transition-delay: .45s;
          transition-delay: .45s;
}

[data-sai][data-sai][data-sai-duration='500'],
body[data-sai-duration='500'] [data-sai] {
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
}

[data-sai][data-sai][data-sai-delay='500'],
body[data-sai-delay='500'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='500'].sai-animate,
body[data-sai-delay='500'] [data-sai].sai-animate {
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}

[data-sai][data-sai][data-sai-duration='550'],
body[data-sai-duration='550'] [data-sai] {
  -webkit-transition-duration: .55s;
          transition-duration: .55s;
}

[data-sai][data-sai][data-sai-delay='550'],
body[data-sai-delay='550'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='550'].sai-animate,
body[data-sai-delay='550'] [data-sai].sai-animate {
  -webkit-transition-delay: .55s;
          transition-delay: .55s;
}

[data-sai][data-sai][data-sai-duration='600'],
body[data-sai-duration='600'] [data-sai] {
  -webkit-transition-duration: .6s;
          transition-duration: .6s;
}

[data-sai][data-sai][data-sai-delay='600'],
body[data-sai-delay='600'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='600'].sai-animate,
body[data-sai-delay='600'] [data-sai].sai-animate {
  -webkit-transition-delay: .6s;
          transition-delay: .6s;
}

[data-sai][data-sai][data-sai-duration='650'],
body[data-sai-duration='650'] [data-sai] {
  -webkit-transition-duration: .65s;
          transition-duration: .65s;
}

[data-sai][data-sai][data-sai-delay='650'],
body[data-sai-delay='650'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='650'].sai-animate,
body[data-sai-delay='650'] [data-sai].sai-animate {
  -webkit-transition-delay: .65s;
          transition-delay: .65s;
}

[data-sai][data-sai][data-sai-duration='700'],
body[data-sai-duration='700'] [data-sai] {
  -webkit-transition-duration: .7s;
          transition-duration: .7s;
}

[data-sai][data-sai][data-sai-delay='700'],
body[data-sai-delay='700'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='700'].sai-animate,
body[data-sai-delay='700'] [data-sai].sai-animate {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
}

[data-sai][data-sai][data-sai-duration='750'],
body[data-sai-duration='750'] [data-sai] {
  -webkit-transition-duration: .75s;
          transition-duration: .75s;
}

[data-sai][data-sai][data-sai-delay='750'],
body[data-sai-delay='750'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='750'].sai-animate,
body[data-sai-delay='750'] [data-sai].sai-animate {
  -webkit-transition-delay: .75s;
          transition-delay: .75s;
}

[data-sai][data-sai][data-sai-duration='800'],
body[data-sai-duration='800'] [data-sai] {
  -webkit-transition-duration: .8s;
          transition-duration: .8s;
}

[data-sai][data-sai][data-sai-delay='800'],
body[data-sai-delay='800'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='800'].sai-animate,
body[data-sai-delay='800'] [data-sai].sai-animate {
  -webkit-transition-delay: .8s;
          transition-delay: .8s;
}

[data-sai][data-sai][data-sai-duration='850'],
body[data-sai-duration='850'] [data-sai] {
  -webkit-transition-duration: .85s;
          transition-duration: .85s;
}

[data-sai][data-sai][data-sai-delay='850'],
body[data-sai-delay='850'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='850'].sai-animate,
body[data-sai-delay='850'] [data-sai].sai-animate {
  -webkit-transition-delay: .85s;
          transition-delay: .85s;
}

[data-sai][data-sai][data-sai-duration='900'],
body[data-sai-duration='900'] [data-sai] {
  -webkit-transition-duration: .9s;
          transition-duration: .9s;
}

[data-sai][data-sai][data-sai-delay='900'],
body[data-sai-delay='900'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='900'].sai-animate,
body[data-sai-delay='900'] [data-sai].sai-animate {
  -webkit-transition-delay: .9s;
          transition-delay: .9s;
}

[data-sai][data-sai][data-sai-duration='950'],
body[data-sai-duration='950'] [data-sai] {
  -webkit-transition-duration: .95s;
          transition-duration: .95s;
}

[data-sai][data-sai][data-sai-delay='950'],
body[data-sai-delay='950'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='950'].sai-animate,
body[data-sai-delay='950'] [data-sai].sai-animate {
  -webkit-transition-delay: .95s;
          transition-delay: .95s;
}

[data-sai][data-sai][data-sai-duration='1000'],
body[data-sai-duration='1000'] [data-sai] {
  -webkit-transition-duration: 1s;
          transition-duration: 1s;
}

[data-sai][data-sai][data-sai-delay='1000'],
body[data-sai-delay='1000'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1000'].sai-animate,
body[data-sai-delay='1000'] [data-sai].sai-animate {
  -webkit-transition-delay: 1s;
          transition-delay: 1s;
}

[data-sai][data-sai][data-sai-duration='1050'],
body[data-sai-duration='1050'] [data-sai] {
  -webkit-transition-duration: 1.05s;
          transition-duration: 1.05s;
}

[data-sai][data-sai][data-sai-delay='1050'],
body[data-sai-delay='1050'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1050'].sai-animate,
body[data-sai-delay='1050'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.05s;
          transition-delay: 1.05s;
}

[data-sai][data-sai][data-sai-duration='1100'],
body[data-sai-duration='1100'] [data-sai] {
  -webkit-transition-duration: 1.1s;
          transition-duration: 1.1s;
}

[data-sai][data-sai][data-sai-delay='1100'],
body[data-sai-delay='1100'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1100'].sai-animate,
body[data-sai-delay='1100'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.1s;
          transition-delay: 1.1s;
}

[data-sai][data-sai][data-sai-duration='1150'],
body[data-sai-duration='1150'] [data-sai] {
  -webkit-transition-duration: 1.15s;
          transition-duration: 1.15s;
}

[data-sai][data-sai][data-sai-delay='1150'],
body[data-sai-delay='1150'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1150'].sai-animate,
body[data-sai-delay='1150'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.15s;
          transition-delay: 1.15s;
}

[data-sai][data-sai][data-sai-duration='1200'],
body[data-sai-duration='1200'] [data-sai] {
  -webkit-transition-duration: 1.2s;
          transition-duration: 1.2s;
}

[data-sai][data-sai][data-sai-delay='1200'],
body[data-sai-delay='1200'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1200'].sai-animate,
body[data-sai-delay='1200'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.2s;
          transition-delay: 1.2s;
}

[data-sai][data-sai][data-sai-duration='1250'],
body[data-sai-duration='1250'] [data-sai] {
  -webkit-transition-duration: 1.25s;
          transition-duration: 1.25s;
}

[data-sai][data-sai][data-sai-delay='1250'],
body[data-sai-delay='1250'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1250'].sai-animate,
body[data-sai-delay='1250'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.25s;
          transition-delay: 1.25s;
}

[data-sai][data-sai][data-sai-duration='1300'],
body[data-sai-duration='1300'] [data-sai] {
  -webkit-transition-duration: 1.3s;
          transition-duration: 1.3s;
}

[data-sai][data-sai][data-sai-delay='1300'],
body[data-sai-delay='1300'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1300'].sai-animate,
body[data-sai-delay='1300'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.3s;
          transition-delay: 1.3s;
}

[data-sai][data-sai][data-sai-duration='1350'],
body[data-sai-duration='1350'] [data-sai] {
  -webkit-transition-duration: 1.35s;
          transition-duration: 1.35s;
}

[data-sai][data-sai][data-sai-delay='1350'],
body[data-sai-delay='1350'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1350'].sai-animate,
body[data-sai-delay='1350'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.35s;
          transition-delay: 1.35s;
}

[data-sai][data-sai][data-sai-duration='1400'],
body[data-sai-duration='1400'] [data-sai] {
  -webkit-transition-duration: 1.4s;
          transition-duration: 1.4s;
}

[data-sai][data-sai][data-sai-delay='1400'],
body[data-sai-delay='1400'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1400'].sai-animate,
body[data-sai-delay='1400'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.4s;
          transition-delay: 1.4s;
}

[data-sai][data-sai][data-sai-duration='1450'],
body[data-sai-duration='1450'] [data-sai] {
  -webkit-transition-duration: 1.45s;
          transition-duration: 1.45s;
}

[data-sai][data-sai][data-sai-delay='1450'],
body[data-sai-delay='1450'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1450'].sai-animate,
body[data-sai-delay='1450'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.45s;
          transition-delay: 1.45s;
}

[data-sai][data-sai][data-sai-duration='1500'],
body[data-sai-duration='1500'] [data-sai] {
  -webkit-transition-duration: 1.5s;
          transition-duration: 1.5s;
}

[data-sai][data-sai][data-sai-delay='1500'],
body[data-sai-delay='1500'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1500'].sai-animate,
body[data-sai-delay='1500'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.5s;
          transition-delay: 1.5s;
}

[data-sai][data-sai][data-sai-duration='1550'],
body[data-sai-duration='1550'] [data-sai] {
  -webkit-transition-duration: 1.55s;
          transition-duration: 1.55s;
}

[data-sai][data-sai][data-sai-delay='1550'],
body[data-sai-delay='1550'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1550'].sai-animate,
body[data-sai-delay='1550'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.55s;
          transition-delay: 1.55s;
}

[data-sai][data-sai][data-sai-duration='1600'],
body[data-sai-duration='1600'] [data-sai] {
  -webkit-transition-duration: 1.6s;
          transition-duration: 1.6s;
}

[data-sai][data-sai][data-sai-delay='1600'],
body[data-sai-delay='1600'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1600'].sai-animate,
body[data-sai-delay='1600'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.6s;
          transition-delay: 1.6s;
}

[data-sai][data-sai][data-sai-duration='1650'],
body[data-sai-duration='1650'] [data-sai] {
  -webkit-transition-duration: 1.65s;
          transition-duration: 1.65s;
}

[data-sai][data-sai][data-sai-delay='1650'],
body[data-sai-delay='1650'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1650'].sai-animate,
body[data-sai-delay='1650'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.65s;
          transition-delay: 1.65s;
}

[data-sai][data-sai][data-sai-duration='1700'],
body[data-sai-duration='1700'] [data-sai] {
  -webkit-transition-duration: 1.7s;
          transition-duration: 1.7s;
}

[data-sai][data-sai][data-sai-delay='1700'],
body[data-sai-delay='1700'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1700'].sai-animate,
body[data-sai-delay='1700'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.7s;
          transition-delay: 1.7s;
}

[data-sai][data-sai][data-sai-duration='1750'],
body[data-sai-duration='1750'] [data-sai] {
  -webkit-transition-duration: 1.75s;
          transition-duration: 1.75s;
}

[data-sai][data-sai][data-sai-delay='1750'],
body[data-sai-delay='1750'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1750'].sai-animate,
body[data-sai-delay='1750'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.75s;
          transition-delay: 1.75s;
}

[data-sai][data-sai][data-sai-duration='1800'],
body[data-sai-duration='1800'] [data-sai] {
  -webkit-transition-duration: 1.8s;
          transition-duration: 1.8s;
}

[data-sai][data-sai][data-sai-delay='1800'],
body[data-sai-delay='1800'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1800'].sai-animate,
body[data-sai-delay='1800'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.8s;
          transition-delay: 1.8s;
}

[data-sai][data-sai][data-sai-duration='1850'],
body[data-sai-duration='1850'] [data-sai] {
  -webkit-transition-duration: 1.85s;
          transition-duration: 1.85s;
}

[data-sai][data-sai][data-sai-delay='1850'],
body[data-sai-delay='1850'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1850'].sai-animate,
body[data-sai-delay='1850'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.85s;
          transition-delay: 1.85s;
}

[data-sai][data-sai][data-sai-duration='1900'],
body[data-sai-duration='1900'] [data-sai] {
  -webkit-transition-duration: 1.9s;
          transition-duration: 1.9s;
}

[data-sai][data-sai][data-sai-delay='1900'],
body[data-sai-delay='1900'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1900'].sai-animate,
body[data-sai-delay='1900'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.9s;
          transition-delay: 1.9s;
}

[data-sai][data-sai][data-sai-duration='1950'],
body[data-sai-duration='1950'] [data-sai] {
  -webkit-transition-duration: 1.95s;
          transition-duration: 1.95s;
}

[data-sai][data-sai][data-sai-delay='1950'],
body[data-sai-delay='1950'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='1950'].sai-animate,
body[data-sai-delay='1950'] [data-sai].sai-animate {
  -webkit-transition-delay: 1.95s;
          transition-delay: 1.95s;
}

[data-sai][data-sai][data-sai-duration='2000'],
body[data-sai-duration='2000'] [data-sai] {
  -webkit-transition-duration: 2s;
          transition-duration: 2s;
}

[data-sai][data-sai][data-sai-delay='2000'],
body[data-sai-delay='2000'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2000'].sai-animate,
body[data-sai-delay='2000'] [data-sai].sai-animate {
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

[data-sai][data-sai][data-sai-duration='2050'],
body[data-sai-duration='2050'] [data-sai] {
  -webkit-transition-duration: 2.05s;
          transition-duration: 2.05s;
}

[data-sai][data-sai][data-sai-delay='2050'],
body[data-sai-delay='2050'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2050'].sai-animate,
body[data-sai-delay='2050'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.05s;
          transition-delay: 2.05s;
}

[data-sai][data-sai][data-sai-duration='2100'],
body[data-sai-duration='2100'] [data-sai] {
  -webkit-transition-duration: 2.1s;
          transition-duration: 2.1s;
}

[data-sai][data-sai][data-sai-delay='2100'],
body[data-sai-delay='2100'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2100'].sai-animate,
body[data-sai-delay='2100'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.1s;
          transition-delay: 2.1s;
}

[data-sai][data-sai][data-sai-duration='2150'],
body[data-sai-duration='2150'] [data-sai] {
  -webkit-transition-duration: 2.15s;
          transition-duration: 2.15s;
}

[data-sai][data-sai][data-sai-delay='2150'],
body[data-sai-delay='2150'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2150'].sai-animate,
body[data-sai-delay='2150'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.15s;
          transition-delay: 2.15s;
}

[data-sai][data-sai][data-sai-duration='2200'],
body[data-sai-duration='2200'] [data-sai] {
  -webkit-transition-duration: 2.2s;
          transition-duration: 2.2s;
}

[data-sai][data-sai][data-sai-delay='2200'],
body[data-sai-delay='2200'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2200'].sai-animate,
body[data-sai-delay='2200'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.2s;
          transition-delay: 2.2s;
}

[data-sai][data-sai][data-sai-duration='2250'],
body[data-sai-duration='2250'] [data-sai] {
  -webkit-transition-duration: 2.25s;
          transition-duration: 2.25s;
}

[data-sai][data-sai][data-sai-delay='2250'],
body[data-sai-delay='2250'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2250'].sai-animate,
body[data-sai-delay='2250'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.25s;
          transition-delay: 2.25s;
}

[data-sai][data-sai][data-sai-duration='2300'],
body[data-sai-duration='2300'] [data-sai] {
  -webkit-transition-duration: 2.3s;
          transition-duration: 2.3s;
}

[data-sai][data-sai][data-sai-delay='2300'],
body[data-sai-delay='2300'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2300'].sai-animate,
body[data-sai-delay='2300'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.3s;
          transition-delay: 2.3s;
}

[data-sai][data-sai][data-sai-duration='2350'],
body[data-sai-duration='2350'] [data-sai] {
  -webkit-transition-duration: 2.35s;
          transition-duration: 2.35s;
}

[data-sai][data-sai][data-sai-delay='2350'],
body[data-sai-delay='2350'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2350'].sai-animate,
body[data-sai-delay='2350'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.35s;
          transition-delay: 2.35s;
}

[data-sai][data-sai][data-sai-duration='2400'],
body[data-sai-duration='2400'] [data-sai] {
  -webkit-transition-duration: 2.4s;
          transition-duration: 2.4s;
}

[data-sai][data-sai][data-sai-delay='2400'],
body[data-sai-delay='2400'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2400'].sai-animate,
body[data-sai-delay='2400'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.4s;
          transition-delay: 2.4s;
}

[data-sai][data-sai][data-sai-duration='2450'],
body[data-sai-duration='2450'] [data-sai] {
  -webkit-transition-duration: 2.45s;
          transition-duration: 2.45s;
}

[data-sai][data-sai][data-sai-delay='2450'],
body[data-sai-delay='2450'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2450'].sai-animate,
body[data-sai-delay='2450'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.45s;
          transition-delay: 2.45s;
}

[data-sai][data-sai][data-sai-duration='2500'],
body[data-sai-duration='2500'] [data-sai] {
  -webkit-transition-duration: 2.5s;
          transition-duration: 2.5s;
}

[data-sai][data-sai][data-sai-delay='2500'],
body[data-sai-delay='2500'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2500'].sai-animate,
body[data-sai-delay='2500'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.5s;
          transition-delay: 2.5s;
}

[data-sai][data-sai][data-sai-duration='2550'],
body[data-sai-duration='2550'] [data-sai] {
  -webkit-transition-duration: 2.55s;
          transition-duration: 2.55s;
}

[data-sai][data-sai][data-sai-delay='2550'],
body[data-sai-delay='2550'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2550'].sai-animate,
body[data-sai-delay='2550'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.55s;
          transition-delay: 2.55s;
}

[data-sai][data-sai][data-sai-duration='2600'],
body[data-sai-duration='2600'] [data-sai] {
  -webkit-transition-duration: 2.6s;
          transition-duration: 2.6s;
}

[data-sai][data-sai][data-sai-delay='2600'],
body[data-sai-delay='2600'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2600'].sai-animate,
body[data-sai-delay='2600'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.6s;
          transition-delay: 2.6s;
}

[data-sai][data-sai][data-sai-duration='2650'],
body[data-sai-duration='2650'] [data-sai] {
  -webkit-transition-duration: 2.65s;
          transition-duration: 2.65s;
}

[data-sai][data-sai][data-sai-delay='2650'],
body[data-sai-delay='2650'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2650'].sai-animate,
body[data-sai-delay='2650'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.65s;
          transition-delay: 2.65s;
}

[data-sai][data-sai][data-sai-duration='2700'],
body[data-sai-duration='2700'] [data-sai] {
  -webkit-transition-duration: 2.7s;
          transition-duration: 2.7s;
}

[data-sai][data-sai][data-sai-delay='2700'],
body[data-sai-delay='2700'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2700'].sai-animate,
body[data-sai-delay='2700'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.7s;
          transition-delay: 2.7s;
}

[data-sai][data-sai][data-sai-duration='2750'],
body[data-sai-duration='2750'] [data-sai] {
  -webkit-transition-duration: 2.75s;
          transition-duration: 2.75s;
}

[data-sai][data-sai][data-sai-delay='2750'],
body[data-sai-delay='2750'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2750'].sai-animate,
body[data-sai-delay='2750'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.75s;
          transition-delay: 2.75s;
}

[data-sai][data-sai][data-sai-duration='2800'],
body[data-sai-duration='2800'] [data-sai] {
  -webkit-transition-duration: 2.8s;
          transition-duration: 2.8s;
}

[data-sai][data-sai][data-sai-delay='2800'],
body[data-sai-delay='2800'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2800'].sai-animate,
body[data-sai-delay='2800'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.8s;
          transition-delay: 2.8s;
}

[data-sai][data-sai][data-sai-duration='2850'],
body[data-sai-duration='2850'] [data-sai] {
  -webkit-transition-duration: 2.85s;
          transition-duration: 2.85s;
}

[data-sai][data-sai][data-sai-delay='2850'],
body[data-sai-delay='2850'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2850'].sai-animate,
body[data-sai-delay='2850'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.85s;
          transition-delay: 2.85s;
}

[data-sai][data-sai][data-sai-duration='2900'],
body[data-sai-duration='2900'] [data-sai] {
  -webkit-transition-duration: 2.9s;
          transition-duration: 2.9s;
}

[data-sai][data-sai][data-sai-delay='2900'],
body[data-sai-delay='2900'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2900'].sai-animate,
body[data-sai-delay='2900'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.9s;
          transition-delay: 2.9s;
}

[data-sai][data-sai][data-sai-duration='2950'],
body[data-sai-duration='2950'] [data-sai] {
  -webkit-transition-duration: 2.95s;
          transition-duration: 2.95s;
}

[data-sai][data-sai][data-sai-delay='2950'],
body[data-sai-delay='2950'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='2950'].sai-animate,
body[data-sai-delay='2950'] [data-sai].sai-animate {
  -webkit-transition-delay: 2.95s;
          transition-delay: 2.95s;
}

[data-sai][data-sai][data-sai-duration='3000'],
body[data-sai-duration='3000'] [data-sai] {
  -webkit-transition-duration: 3s;
          transition-duration: 3s;
}

[data-sai][data-sai][data-sai-delay='3000'],
body[data-sai-delay='3000'] [data-sai] {
  -webkit-transition-delay: 0;
          transition-delay: 0;
}

[data-sai][data-sai][data-sai-delay='3000'].sai-animate,
body[data-sai-delay='3000'] [data-sai].sai-animate {
  -webkit-transition-delay: 3s;
          transition-delay: 3s;
}

[data-sai][data-sai][data-sai-easing='linear'],
body[data-sai-easing='linear'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
          transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}

[data-sai][data-sai][data-sai-easing='ease'],
body[data-sai-easing='ease'] [data-sai] {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
}

[data-sai][data-sai][data-sai-easing='ease-in'],
body[data-sai-easing='ease-in'] [data-sai] {
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}

[data-sai][data-sai][data-sai-easing='ease-out'],
body[data-sai-easing='ease-out'] [data-sai] {
  -webkit-transition-timing-function: ease-out;
          transition-timing-function: ease-out;
}

[data-sai][data-sai][data-sai-easing='ease-in-out'],
body[data-sai-easing='ease-in-out'] [data-sai] {
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}

[data-sai][data-sai][data-sai-easing='ease-in-back'],
body[data-sai-easing='ease-in-back'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
          transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

[data-sai][data-sai][data-sai-easing='ease-out-back'],
body[data-sai-easing='ease-out-back'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-sai][data-sai][data-sai-easing='ease-in-out-back'],
body[data-sai-easing='ease-in-out-back'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
          transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[data-sai][data-sai][data-sai-easing='ease-in-sine'],
body[data-sai-easing='ease-in-sine'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
          transition-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
}

[data-sai][data-sai][data-sai-easing='ease-out-sine'],
body[data-sai-easing='ease-out-sine'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
          transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

[data-sai][data-sai][data-sai-easing='ease-in-out-sine'],
body[data-sai-easing='ease-in-out-sine'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
          transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

[data-sai][data-sai][data-sai-easing='ease-in-quad'],
body[data-sai-easing='ease-in-quad'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
          transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-sai][data-sai][data-sai-easing='ease-out-quad'],
body[data-sai-easing='ease-out-quad'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sai][data-sai][data-sai-easing='ease-in-out-quad'],
body[data-sai-easing='ease-in-out-quad'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-sai][data-sai][data-sai-easing='ease-in-cubic'],
body[data-sai-easing='ease-in-cubic'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
          transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-sai][data-sai][data-sai-easing='ease-out-cubic'],
body[data-sai-easing='ease-out-cubic'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sai][data-sai][data-sai-easing='ease-in-out-cubic'],
body[data-sai-easing='ease-in-out-cubic'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-sai][data-sai][data-sai-easing='ease-in-quart'],
body[data-sai-easing='ease-in-quart'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
          transition-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

[data-sai][data-sai][data-sai-easing='ease-out-quart'],
body[data-sai-easing='ease-out-quart'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-sai][data-sai][data-sai-easing='ease-in-out-quart'],
body[data-sai-easing='ease-in-out-quart'] [data-sai] {
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

[data-sai^='fade'][data-sai^='fade'] {
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

[data-sai^='fade'][data-sai^='fade'].sai-animate {
  opacity: 1;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

[data-sai='fade-up'] {
  /* ブランドサイトでは "下からそっと現れる" 控えめな量にしたいので 8px に縮めた。
     元値 40px はやや大きく、ゆったり時間と合わせると下に沈みすぎて感じる。 */
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}

[data-sai='fade-down'] {
  -webkit-transform: translate3d(0, -100px, 0);
          transform: translate3d(0, -100px, 0);
}

[data-sai='fade-right'] {
  -webkit-transform: translate3d(-100px, 0, 0);
          transform: translate3d(-100px, 0, 0);
}

[data-sai='fade-left'] {
  -webkit-transform: translate3d(100px, 0, 0);
          transform: translate3d(100px, 0, 0);
}

[data-sai='fade-up-right'] {
  -webkit-transform: translate3d(-100px, 100px, 0);
          transform: translate3d(-100px, 100px, 0);
}

[data-sai='fade-up-left'] {
  -webkit-transform: translate3d(100px, 100px, 0);
          transform: translate3d(100px, 100px, 0);
}

[data-sai='fade-down-right'] {
  -webkit-transform: translate3d(-100px, -100px, 0);
          transform: translate3d(-100px, -100px, 0);
}

[data-sai='fade-down-left'] {
  -webkit-transform: translate3d(100px, -100px, 0);
          transform: translate3d(100px, -100px, 0);
}

[data-sai^='zoom'][data-sai^='zoom'] {
  opacity: 0;
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform;
  transition-property: opacity, transform, -webkit-transform;
}

[data-sai^='zoom'][data-sai^='zoom'].sai-animate {
  opacity: 1;
  -webkit-transform: translateZ(0) scale(1);
          transform: translateZ(0) scale(1);
}

[data-sai='zoom-in'] {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}

[data-sai='zoom-in-up'] {
  -webkit-transform: translate3d(0, 100px, 0) scale(0.6);
          transform: translate3d(0, 100px, 0) scale(0.6);
}

[data-sai='zoom-in-down'] {
  -webkit-transform: translate3d(0, -100px, 0) scale(0.6);
          transform: translate3d(0, -100px, 0) scale(0.6);
}

[data-sai='zoom-in-right'] {
  -webkit-transform: translate3d(-100px, 0, 0) scale(0.6);
          transform: translate3d(-100px, 0, 0) scale(0.6);
}

[data-sai='zoom-in-left'] {
  -webkit-transform: translate3d(100px, 0, 0) scale(0.6);
          transform: translate3d(100px, 0, 0) scale(0.6);
}

[data-sai='zoom-out'] {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

[data-sai='zoom-out-up'] {
  -webkit-transform: translate3d(0, 100px, 0) scale(1.2);
          transform: translate3d(0, 100px, 0) scale(1.2);
}

[data-sai='zoom-out-down'] {
  -webkit-transform: translate3d(0, -100px, 0) scale(1.2);
          transform: translate3d(0, -100px, 0) scale(1.2);
}

[data-sai='zoom-out-right'] {
  -webkit-transform: translate3d(-100px, 0, 0) scale(1.2);
          transform: translate3d(-100px, 0, 0) scale(1.2);
}

[data-sai='zoom-out-left'] {
  -webkit-transform: translate3d(100px, 0, 0) scale(1.2);
          transform: translate3d(100px, 0, 0) scale(1.2);
}

[data-sai^='slide'][data-sai^='slide'] {
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

[data-sai^='slide'][data-sai^='slide'].sai-animate {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

[data-sai='slide-up'] {
  -webkit-transform: translate3d(0, 100%, 0);
          transform: translate3d(0, 100%, 0);
}

[data-sai='slide-down'] {
  -webkit-transform: translate3d(0, -100%, 0);
          transform: translate3d(0, -100%, 0);
}

[data-sai='slide-right'] {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}

[data-sai='slide-left'] {
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}

[data-sai^='flip'][data-sai^='flip'] {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

[data-sai='flip-left'] {
  -webkit-transform: perspective(2500px) rotateY(-100deg);
          transform: perspective(2500px) rotateY(-100deg);
}

[data-sai='flip-left'].sai-animate {
  -webkit-transform: perspective(2500px) rotateY(0);
          transform: perspective(2500px) rotateY(0);
}

[data-sai='flip-right'] {
  -webkit-transform: perspective(2500px) rotateY(100deg);
          transform: perspective(2500px) rotateY(100deg);
}

[data-sai='flip-right'].sai-animate {
  -webkit-transform: perspective(2500px) rotateY(0);
          transform: perspective(2500px) rotateY(0);
}

[data-sai='flip-up'] {
  -webkit-transform: perspective(2500px) rotateX(-100deg);
          transform: perspective(2500px) rotateX(-100deg);
}

[data-sai='flip-up'].sai-animate {
  -webkit-transform: perspective(2500px) rotateX(0);
          transform: perspective(2500px) rotateX(0);
}

[data-sai='flip-down'] {
  -webkit-transform: perspective(2500px) rotateX(100deg);
          transform: perspective(2500px) rotateX(100deg);
}

[data-sai='flip-down'].sai-animate {
  -webkit-transform: perspective(2500px) rotateX(0);
          transform: perspective(2500px) rotateX(0);
}

[data-sai^='target'][data-sai^='target'] {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .only-pc {
    display: none;
  }
}

@media print, screen and (min-width: 768px) {
  .only-sp {
    display: none;
  }
}

/* generalBtn の arrow swoosh (translateY 下抜け→上戻り) と同じ挙動。
   この矢印は rotate(90deg) で下向きに固定しているため、回転を keyframe に
   含めた上で local translateX を使う (rotate(90) 下では +X が画面下方向)。 */
@-webkit-keyframes anchorListArwSwooshDown {
  0% {
    opacity: 1;
    -webkit-transform: rotate(90deg) translateX(0);
            transform: rotate(90deg) translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: rotate(90deg) translateX(200%);
            transform: rotate(90deg) translateX(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: rotate(90deg) translateX(-200%);
            transform: rotate(90deg) translateX(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(90deg) translateX(0);
            transform: rotate(90deg) translateX(0);
  }
}
@keyframes anchorListArwSwooshDown {
  0% {
    opacity: 1;
    -webkit-transform: rotate(90deg) translateX(0);
            transform: rotate(90deg) translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: rotate(90deg) translateX(200%);
            transform: rotate(90deg) translateX(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: rotate(90deg) translateX(-200%);
            transform: rotate(90deg) translateX(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(90deg) translateX(0);
            transform: rotate(90deg) translateX(0);
  }
}

.anchorList {
  /* IntersectionObserver で対応セクションがビューポートに入っている間付与される */
}

.anchorList__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media print, screen and (min-width: 768px) {
  .anchorList__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 32px;
  }
}

@media screen and (max-width: 768px) {
  .anchorList__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: calc(20 / 375 * 100vw);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .anchorList__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
}

.anchorList__link {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  text-decoration: none;
  -webkit-transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  /* :visited 等のブラウザ既定色 (紫) で上書きされないよう全状態で白を維持 */
  /* hover: リンク全体を opacity .7 に。矢印は generalBtn と同じ swoosh を下方向で。 */
}

.anchorList__link:hover, .anchorList__link:visited, .anchorList__link:active, .anchorList__link:focus {
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .anchorList__link:hover {
    opacity: .7;
  }
  .anchorList__link:hover .anchorList__iconArrow {
    -webkit-animation: anchorListArwSwooshDown 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: anchorListArwSwooshDown 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .anchorList__link:hover {
    opacity: .7;
  }
  .anchorList__link:hover .anchorList__iconArrow {
    -webkit-animation: anchorListArwSwooshDown 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: anchorListArwSwooshDown 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media print, screen and (min-width: 768px) {
  .anchorList__link {
    border-bottom: 1px solid #b2cae9;
    font-size: 15px;
    letter-spacing: 1.5px;
    line-height: 22.5px;
    padding: 0 0 16px;
    position: relative;
    width: 229px;
    /* アクティブ時にスライドして出る 2px の白ライン。
         border-bottom (1px #b2cae9) を覆うように bottom:-1px / height:2px で配置。
         初期は scaleX(0) で transform-origin:left → 左→右へスライドして現れる。 */
  }
  .anchorList__link::after {
    background: #ffffff;
    bottom: -1px;
    content: '';
    height: 2px;
    left: 0;
    position: absolute;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transition: -webkit-transform 0.4s ease;
    transition: -webkit-transform 0.4s ease;
    transition: transform 0.4s ease;
    transition: transform 0.4s ease, -webkit-transform 0.4s ease;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .anchorList__link {
    border-bottom: 1px solid #b2cae9;
    font-size: calc(12 / 375 * 100vw);
    gap: calc(10 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
    line-height: calc(18 / 12);
    padding-bottom: calc(10 / 375 * 100vw);
    width: calc(134 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .anchorList__item.is-active .anchorList__link::after {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@media screen and (max-width: 768px) {
  .anchorList__label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    text-align: center;
  }
}

.anchorList__icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #ffffff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* swoosh で矢印が円外へ抜ける間はクリップ (generalBtn__icon と同様)。 */
  overflow: hidden;
}

@media print, screen and (min-width: 768px) {
  .anchorList__icon {
    height: 21px;
    width: 21px;
  }
}

@media screen and (max-width: 768px) {
  .anchorList__icon {
    height: calc(21 / 375 * 100vw);
    width: calc(21 / 375 * 100vw);
  }
}

.anchorList__iconArrow {
  background-color: #1e4d9e;
  display: block;
  -webkit-mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  /* icon-arrow-01.svg は右向きが既定。回転して下向きに揃える。 */
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

@media print, screen and (min-width: 768px) {
  .anchorList__iconArrow {
    height: 9px;
    width: 9px;
  }
}

@media screen and (max-width: 768px) {
  .anchorList__iconArrow {
    height: calc(9 / 375 * 100vw);
    width: calc(9 / 375 * 100vw);
  }
}

/* beauty セクション。
   PC: 淡青パネル 1207 中央寄せ。pseudo bg (.beautySect::before) で viewport 左端まで
       淡青を伸ばす。商品画像 (623×707) は .beautySect を anchor に右端ピン留め。
       __body に headingCombi と generalBtn を含め、それぞれ width/margin を個別調整。
   SP: 淡青パネル全幅。enTtl--large.--split (display:contents) で __en と __ja を
       grid の直接の子に。'en' 行 BEAUTY 横全幅、'ja photo' 行で縦書きJA+画像横並び、
       'body body' 行で headingCombi + 詳しく見る (右寄せ) を縦積み。
   IE10/11: @supports not (display: grid) で flex single-column。 */
.beautySect {
  isolation: isolate;
  /* stacking context — ::before が z-index: -1 で背面に行けるように */
  margin: 0 auto;
  max-width: 980px;
  /* デザインフレーム (Figma section 1761:5720 の幅)。広い viewport では中央寄せ */
  position: relative;
  /* photo を .beautySect anchor にするため __upper は position:relative にしない */
  /* body 全体を覆うリンク。flex column は __body から移譲
     (headingCombi / generalBtn の align-self はこの flex コンテキストを参照)。 */
}

@media print, screen and (min-width: 768px) {
  .beautySect {
    margin-top: 200px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect {
    margin-top: calc(196 / 375 * 100vw);
  }
}

.beautySect__panel {
  /* bg は .beautySect::before に移譲 */
  /* data-sai="panel-fade" 付き。bgLayer が青→白に切り替わる瞬間 (news→beauty 境界が
       viewport 中央を越えた瞬間) に JS が .sai-animate を即座に付与 → ::before
       (淡青背景の viewport 左端まで拡張ぶん) が opacity 0→1 でフェードイン。
       他の data-sai 要素には 0.3s の遅延がかかるが、panel-fade はその遅延なし。 */
}

@media print, screen and (min-width: 768px) {
  .beautySect__panel {
    margin: 0 auto;
    max-width: 1207px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__panel {
    margin: 0 auto;
    width: 100%;
  }
}

.beautySect__panel[data-sai='panel-fade']:before {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.43, 0.02, 0.05, 1);
  transition: opacity 1s cubic-bezier(0.43, 0.02, 0.05, 1);
}

.beautySect__panel[data-sai='panel-fade'].sai-animate:before {
  opacity: 1;
}

.beautySect__panel:before {
  background: #f2f5fb;
  content: '';
  height: 100%;
  position: absolute;
  z-index: -1;
}

@media print, screen and (min-width: 768px) {
  .beautySect__panel:before {
    /* 左: section 左端から viewport 左端まで延長 (中央寄せ時のはみ出し分を負 left で稼ぐ) */
    left: calc(50% - 50vw);
    /* 右: section 右端から 233px 内側 (= section x=1207 = パネル右辺) */
    right: 0;
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__panel:before {
    height: calc(100% - 196 / 375 * 100vw);
    left: 0;
    right: calc(64 / 375 * 100vw);
    top: calc(196 / 375 * 100vw);
    width: calc(100% - 64 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .beautySect__upper {
    margin-left: -80px;
    padding: 0 50px 0;
    /* 画像は height 707 で top:0 配置。__upper 全体高 (664) を 43px 超過して
         __recommend 領域に食い込む。デザイン意図どおり (Figma も同じ) なので許容 */
  }
}

@media screen and (max-width: 768px) {
  .beautySect__upper {
    padding: 0 0 calc(20 / 375 * 100vw);
  }
}

.beautySect__upper + .beautySect__recommend {
  margin-top: 116px;
}

@media screen and (max-width: 768px) {
  .beautySect__upper + .beautySect__recommend {
    margin-top: calc(80 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .beautySect__inner {
    -webkit-column-gap: 80px;
       -moz-column-gap: 80px;
            column-gap: 80px;
    display: grid;
    grid-template-areas: 'head body';
    grid-template-columns: 156px 1fr;
    margin: 0 auto;
    max-width: 1107px;
    min-height: 504px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__inner {
    -webkit-column-gap: calc(20 / 375 * 100vw);
       -moz-column-gap: calc(20 / 375 * 100vw);
            column-gap: calc(20 / 375 * 100vw);
    display: grid;
    grid-template-areas: 'en en' 'ja photo' 'body body';
    grid-template-columns: calc(28 / 375 * 100vw) 1fr;
    row-gap: 0;
  }
}

.beautySect__body {
  /* generalBtn の位置は body 内で width/margin を個別調整 */
}

@media print, screen and (min-width: 768px) {
  .beautySect__body {
    grid-area: body;
    /* 156(head) + 80(gap) + 298(body) = 534 panel-x 終端、photo は 637 開始 → 103px 安全マージン */
    max-width: 298px;
    padding-top: 103px;
    /* Figma body y=303 − __upper pad-top 80 = 223 */
  }
}

@media screen and (max-width: 768px) {
  .beautySect__body {
    grid-area: body;
    margin-top: calc(37 / 375 * 100vw);
    /* Figma body y=373 − photo bottom y=336 = 37 */
    padding-left: calc(44 / 375 * 100vw);
    padding-right: calc(45 / 375 * 100vw);
  }
}

.beautySect__body .headingCombi {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.beautySect__body .headingCombi .txt {
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .beautySect__body .generalBtn {
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-left: 153px;
    /* Figma 詳しく見る x=389 − body x=236 = 153 */
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__body .generalBtn {
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-right: 0;
    margin-top: calc(40 / 375 * 100vw);
  }
}

.beautySect__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
}

.beautySect__photo {
  /* 内側 .parallaxPhoto (100% × 100%, overflow:hidden) が四隅をクリップするが、
       外側でも border-radius を当てておけば parallaxPhoto を外したときも崩れない。 */
  border-radius: 4px;
  overflow: hidden;
  /* photo は section 右端から -233px 突き出すため、viewport <= 1446px だと右辺が
       viewport 右端に張り付く (section max-width 980 + photo offset 233 ×2 = 1446)。
       その状態では右側の角丸が viewport 外で意味を持たないので外す。SP も同じ理由。 */
}

@media (max-width: 1446px) {
  .beautySect__photo {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .beautySect__photo {
    height: 707px;
    position: absolute;
    right: -233px;
    top: -200px;
    width: 623px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__photo {
    grid-area: photo;
    /* Figma SP は写真 278×280 (ほぼ正方形)。元画像 (623×707) は縦長なので
         明示 height を当て object-fit:cover でクロップする。
         クロップ位置が気になる場合は SP 専用画像 (278×280 / @1.5x=417×420) に差し替え。 */
    height: calc(280 / 375 * 100vw);
    justify-self: end;
    margin-top: calc(-30 / 375 * 100vw);
    position: relative;
    width: calc(278 / 375 * 100vw);
    z-index: 1;
  }
}

.beautySect__photo img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .beautySect__recommend {
    padding: 0 50px 80px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__recommend {
    padding: 0 calc(20 / 375 * 100vw) calc(60 / 375 * 100vw);
  }
}

/* enTtl--large.--split は SP のみ display:contents なので __en と __ja が
   beautySect__inner grid の直接の子になる。PC では enTtl 自体が grid item */
@media print, screen and (min-width: 768px) {
  .beautySect .enTtl--large {
    grid-area: head;
    height: 504px;
    margin-top: -200px;
  }
}

@media screen and (max-width: 768px) {
  .beautySect .enTtl--large {
    position: relative;
    z-index: 2;
  }
}

@media screen and (max-width: 768px) {
  .beautySect .enTtl__en {
    grid-area: en;
    padding-left: calc(21 / 375 * 100vw);
    /* デザインに合わせて BEAUTY をセクション top より少し上に持ち上げる。
       grid item に対する負 margin なので、後続行 (ja/photo/body) の位置は
       影響を受けず、BEAUTY 文字だけが視覚的に上にずれる。 */
    margin-top: calc(-35 / 375 * 100vw);
    position: relative;
    text-align: left;
    white-space: nowrap;
    /* 80px font + 8px ls の BEAUTY が 2 行に折り返さないよう保険 */
    z-index: 2;
  }
}

@media screen and (max-width: 768px) {
  .beautySect .enTtl__ja {
    grid-area: ja;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    padding-left: calc(40 / 375 * 100vw);
    /* Figma 化粧品 x=23 */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

/* IE10/11 fallback: grid 未対応環境では flex 縦並びに degrade */
@supports not (display: grid) {
  .beautySect__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  @media print, screen and (min-width: 768px) {
    .beautySect__photo {
      position: static;
      right: auto;
      top: auto;
    }
  }
}

.bgLayer {
  background-color: transparent;
  inset: 0;
  opacity: 1;
  /* 画像にかける scale / translateX のドリフトがビューポート外へ漏れて
     水平スクロールを起こさないように、bgLayer 自身で clip。 */
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  -webkit-transition: opacity 1.2s, background-color 1.2s;
  transition: opacity 1.2s, background-color 1.2s;
  z-index: -1;
  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  /* health セクション到達時: 写真を消し blue-03 のベタ背景に切り替える。
     is-health は is-hide より後に判定するため opacity を 1 に戻す。
     写真側は opacity 0 と同時に blur 15px をかけて、白ベタへの切り替えが
     "ぼかしながら消える" 印象になる。 */
  /* 背景写真にゆっくり左右へ漂う呼吸感のドリフトをかける。
     scale(1.06) で 3% ずつ余白を作ってから translateX ±2% にとどめる →
     画像端が露出しない。24s ease-in-out alternate で 48s 往復、無限ループ。
     hide / health で opacity 0 のときも継続させる (見た目に影響しない)。 */
}

.bgLayer.is-hide {
  opacity: 0;
}

.bgLayer.is-health {
  background-color: var(--blue-03, #f2f6fb);
  opacity: 1;
}

.bgLayer.is-health .photo {
  -webkit-filter: blur(15px);
          filter: blur(15px);
  opacity: 0;
}

.bgLayer .photo {
  /* 明示的に blur(0) を基準にしておくことで、is-health の付与／除去
       どちらの方向でも filter が確実に補間される (none ⇄ blur(15px)
       の補間はブラウザ実装差があるため避ける)。 */
  -webkit-filter: blur(0);
          filter: blur(0);
  -webkit-transition: opacity 1.2s, -webkit-filter 1.2s;
  transition: opacity 1.2s, -webkit-filter 1.2s;
  transition: opacity 1.2s, filter 1.2s;
  transition: opacity 1.2s, filter 1.2s, -webkit-filter 1.2s;
  width: 100%;
  -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.bgLayer .photo__pic,
.bgLayer .photo__image {
  width: 100%;
}

.bgLayer .photo__image {
  -webkit-animation: bgLayer-drift 24s ease-in-out infinite alternate;
          animation: bgLayer-drift 24s ease-in-out infinite alternate;
  /* 連続スクロール連動アニメは will-change を付けて GPU レイヤに分離。 */
  will-change: transform;
}

@-webkit-keyframes bgLayer-drift {
  from {
    -webkit-transform: translateX(-2%) scale(1.06);
            transform: translateX(-2%) scale(1.06);
  }
  to {
    -webkit-transform: translateX(2%) scale(1.06);
            transform: translateX(2%) scale(1.06);
  }
}

@keyframes bgLayer-drift {
  from {
    -webkit-transform: translateX(-2%) scale(1.06);
            transform: translateX(-2%) scale(1.06);
  }
  to {
    -webkit-transform: translateX(2%) scale(1.06);
            transform: translateX(2%) scale(1.06);
  }
}

.enTtl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #1e4d9e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  /* --large: BEAUTY的なオーバーサイズ縦書きバリエーション。今後別セクションでも再利用想定
     gap 値は Figma の Group 90 (W=156 = BEAUTY 120 + gap 16 + JA 20) より 16px */
  /* --split: 親側で `__en` と `__ja` を個別配置したい場合に併用。SP で wrapper を
     display: contents にして子要素を親の grid に流す（IE10/11 は flex column の
     degradation で表示。pixel-perfect でなくとも崩れず読める前提） */
  /* --large と組み合わせて使用。SP のみ wrapper を display:contents にして
     `__en` / `__ja` を親 grid の直接の子として扱えるようにする。
     PC は通常の --large (flex row) のまま */
  /* --large の giant テキストを mask gradient でリビール。
     data-sai="mask-fade-down" を要素に付与すると、sai.js が
     IntersectionObserver でビューポート交差時に .sai-animate を付ける。
     PC: __en / __ja とも縦書きなので、両方に縦方向 (top→bottom) のマスクを適用。
     SP: __en は writing-mode:horizontal-tb (横書き) になるので、横方向 (left→right)
         マスクを適用。__ja は SP でも縦書きなので縦マスクのまま。
     リビールが「文字の流れる向き」と一致するように分岐させている。 */
}

@media print, screen and (min-width: 768px) {
  .enTtl {
    gap: 4px;
  }
}

@media screen and (max-width: 768px) {
  .enTtl {
    gap: calc(4 / 375 * 100vw);
  }
}

.enTtl__en {
  font-family: Optima, serif;
  font-weight: 400;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .enTtl__en {
    font-size: 28px;
    letter-spacing: 2.8px;
  }
}

@media screen and (max-width: 768px) {
  .enTtl__en {
    font-size: calc(22 / 375 * 100vw);
    letter-spacing: calc(2.2 / 375 * 100vw);
  }
}

.enTtl__ja {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .enTtl__ja {
    font-size: 11px;
    letter-spacing: 1.1px;
    line-height: calc(16.5 / 11);
  }
}

@media screen and (max-width: 768px) {
  .enTtl__ja {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: calc(18 / 10);
  }
}

.enTtl--large {
  /* JA は縦書き＋上部に丸ドット装飾。
       writing-mode 配下では擬似要素の block 配置が水平方向に流れてしまうため、
       要素自身の背景画像（radial-gradient）として描画し、padding-top でテキストを下げる */
}

@media print, screen and (min-width: 768px) {
  .enTtl--large {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(24 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .enTtl--large .enTtl__en {
    font-size: 120px;
    letter-spacing: 12px;
    line-height: 1;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large .enTtl__en {
    font-size: calc(80 / 375 * 100vw);
    letter-spacing: calc(8 / 375 * 100vw);
    line-height: 1;
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
  }
}

.enTtl--large .enTtl__ja {
  background-position: top center;
  background-repeat: no-repeat;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  /* 縦書きの文字送りをデザインに合わせる。Figma は 20px / 文字送り 25px
         (8文字=200px, 9文字=225px)。CSS の縦書きでは 1文字の advance =
         font-size(1em=20px) + letter-spacing なので、25px advance にするため
         letter-spacing を 5px に。line-height は縦書きでは列幅 (水平) を制御する
         ので文字間には影響しない。 */
}

@media print, screen and (min-width: 768px) {
  .enTtl--large .enTtl__ja {
    font-size: 20px;
    letter-spacing: 5px;
    line-height: 1.25;
    padding-top: 12px;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large .enTtl__ja {
    font-size: calc(20 / 375 * 100vw);
    letter-spacing: calc(5 / 375 * 100vw);
    line-height: 1.25;
    padding-top: calc(16 / 375 * 100vw);
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large.enTtl--split {
    display: contents;
  }
}

.enTtl--large[data-sai='mask-fade-down'] {
  /* SP で enTtl は --split (display:contents) なので box を持たず、
       IntersectionObserver が観測できず sai-animate が付与されない。
       PC でも一貫性を保つため、親パネル (beautySect__panel / healthSect__panel) が
       sai-animate になったタイミングを共通トリガーとして使う。
       両パネルとも data-sai="panel-fade" 経由で sai に観測されている。 */
}

.enTtl--large[data-sai='mask-fade-down'] .enTtl__en {
  /* SP は文字サイズが小さく wipe 感が強いと "ポテポテ" 感が出るので soft 版を使う */
}

@media print, screen and (min-width: 768px) {
  .enTtl--large[data-sai='mask-fade-down'] .enTtl__en {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
            mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
            mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    -webkit-mask-size: 100% 400%;
            mask-size: 100% 400%;
    /* mask の透明端が SP の小さい字で滲んで見えることがあるので、opacity でも確実に隠す。
     End 側の transition は property 無し (= all) なので opacity も一緒に補間される。 */
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large[data-sai='mask-fade-down'] .enTtl__en {
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(40%, white), color-stop(60%, white), color-stop(90%, rgba(255, 255, 255, 0)));
    -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, white 40%, white 60%, rgba(255, 255, 255, 0) 90%);
            mask-image: -webkit-gradient(linear, left top, right top, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(40%, white), color-stop(60%, white), color-stop(90%, rgba(255, 255, 255, 0)));
            mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, white 40%, white 60%, rgba(255, 255, 255, 0) 90%);
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    -webkit-mask-size: 400% 100%;
            mask-size: 400% 100%;
    opacity: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
            mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
            mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    -webkit-mask-size: 100% 400%;
            mask-size: 100% 400%;
    /* mask の透明端が SP の小さい字で滲んで見えることがあるので、opacity でも確実に隠す。
     End 側の transition は property 無し (= all) なので opacity も一緒に補間される。 */
    opacity: 0;
  }
}

@media screen and (max-width: 768px) {
  .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(40%, white), color-stop(60%, white), color-stop(90%, rgba(255, 255, 255, 0)));
    -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, white 40%, white 60%, rgba(255, 255, 255, 0) 90%);
            mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(255, 255, 255, 0)), color-stop(40%, white), color-stop(60%, white), color-stop(90%, rgba(255, 255, 255, 0)));
            mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, white 40%, white 60%, rgba(255, 255, 255, 0) 90%);
    -webkit-mask-position: 100% 100%;
            mask-position: 100% 100%;
    -webkit-mask-size: 100% 400%;
            mask-size: 100% 400%;
    opacity: 0;
  }
}

.beautySect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'],
.healthSect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] {
  /* __en と __ja に 0.3s の差を付けて、giant EN → 補足 JA の順で
         読み手の視線誘導を作る。両方とも 2s かけてゆっくりリビール。 */
}

@media print, screen and (min-width: 768px) {
  .beautySect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__en,
  .healthSect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__en {
    -webkit-mask-position: 100% 50%;
            mask-position: 100% 50%;
    opacity: 1;
    /* opacity は短め (.5s) で先に出し切り、mask-position は本来の duration で
     ゆっくり wipe させる → マスクのリビールがしっかり見える。 */
    -webkit-transition: opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
    transition: opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
    transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s, opacity 0.5s ease 0s !important;
    transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s, opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__en,
  .healthSect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__en {
    -webkit-mask-position: 50% 100%;
            mask-position: 50% 100%;
    opacity: 1;
    /* opacity は短め (.5s) で先に出し切り、mask-position は本来の duration で
     ゆっくり wipe させる → マスクのリビールがしっかり見える。 */
    -webkit-transition: opacity 0.5s ease 0s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s !important;
    transition: opacity 0.5s ease 0s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s !important;
    transition: mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity 0.5s ease 0s !important;
    transition: mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s, opacity 0.5s ease 0s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s !important;
  }
}

@media print, screen and (min-width: 768px) {
  .beautySect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja,
  .healthSect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja {
    -webkit-mask-position: 100% 50%;
            mask-position: 100% 50%;
    opacity: 1;
    /* opacity は短め (.5s) で先に出し切り、mask-position は本来の duration で
     ゆっくり wipe させる → マスクのリビールがしっかり見える。 */
    -webkit-transition: opacity 0.5s ease 0.3s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0.3s !important;
    transition: opacity 0.5s ease 0.3s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0.3s !important;
    transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0.3s, opacity 0.5s ease 0.3s !important;
    transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0.3s, opacity 0.5s ease 0.3s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0.3s !important;
  }
}

@media screen and (max-width: 768px) {
  .beautySect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja,
  .healthSect__panel.sai-animate .enTtl--large[data-sai='mask-fade-down'] .enTtl__ja {
    -webkit-mask-position: 100% 50%;
            mask-position: 100% 50%;
    opacity: 1;
    /* opacity は短め (.5s) で先に出し切り、mask-position は本来の duration で
     ゆっくり wipe させる → マスクのリビールがしっかり見える。 */
    -webkit-transition: opacity 0.5s ease 0.3s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s !important;
    transition: opacity 0.5s ease 0.3s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s !important;
    transition: mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s, opacity 0.5s ease 0.3s !important;
    transition: mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s, opacity 0.5s ease 0.3s, -webkit-mask-position 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s !important;
  }
}

@-webkit-keyframes generalBtnArwSwoosh {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes generalBtnArwSwoosh {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateY(-200%);
            transform: translateY(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* リンク用の右向き矢印 (arrow-01) 用。右に抜けて左から戻る swoosh。 */
@-webkit-keyframes generalBtnArwSwooshRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes generalBtnArwSwooshRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

/* hover 時の見た目変化一式。ボタン自身の :hover に加え、カード全体リンク
   ([data-hover-btn] 付き anchor) の hover からも同じ演出を発火させるため mixin 化。 */
.generalBtn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #1e4d9e;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0 auto;
  position: relative;
  text-decoration: none;
  /* min-width / padding は accordion (.is-open) で もっと見る → 閉じる に切り替わる際に
     ボタンを縮めるため、滑らかに補間するよう transition に含めておく。 */
  -webkit-transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), min-width 0.4s cubic-bezier(0.43, 0.02, 0.05, 1), padding 0.4s cubic-bezier(0.43, 0.02, 0.05, 1);
  transition: background-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), min-width 0.4s cubic-bezier(0.43, 0.02, 0.05, 1), padding 0.4s cubic-bezier(0.43, 0.02, 0.05, 1);
  /* --large: メインCTA向けの一回り大きい寸法。化粧品トップへ等で利用 */
  /* --withSub: ラベル内にサブテキストを縦並びで持たせるバリエーション
     params.ttl に <span class="generalBtn__labelSub">…</span><span class="generalBtn__labelMain">…</span>
     の HTML を渡して使用する */
  /* --xl: linkSect--shop の CTA 向け 287x56 (PC) / calc(287/375*100vw) x calc(56/375*100vw) (SP) サイズ。
     ラベルは中央寄せ、アイコン (27x27) は右端にピン留め。
     filled = `['xl']` (青 bg・白文字)、outline は `['xl', 'outline']` の組み合わせで使用。
     withSub を併用すると sub/main の二段ラベルになる (FANCL SKIN PATCH 特設サイト)。
     --withSub の後に書くことで SP の labelMain サイズ等を Figma 値で上書きする。 */
}

.generalBtn, .generalBtn:link, .generalBtn:visited, .generalBtn:hover, .generalBtn:active {
  color: #ffffff;
}

@media print, screen and (min-width: 768px) {
  .generalBtn {
    height: 46px;
    min-width: 152px;
    /* Figma 1761:5466 (もっと見る 152×46): text x=32, icon x=117-140 (right 12)。 */
    padding: 0 12px 0 32px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn {
    height: calc(44 / 375 * 100vw);
    min-width: calc(140 / 375 * 100vw);
    /* Figma 1733:5040/5333 (続きを読む/詳しく見る 140×44): text x=28, right 12。 */
    padding: 0 calc(12 / 375 * 100vw) 0 calc(28 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn:hover {
    background-color: #3373c4;
    /* リンク (arrow-01・右向き固定) は親が無回転なので translateY だと下に抜けてしまう。
     水平方向の swoosh keyframe に差し替える。 */
  }
}

@media print, screen and (min-width: 768px) and (min-width: 768px) {
  .generalBtn:hover .generalBtn__icon {
    -webkit-transform: rotate(var(--icon-rotate, 0deg)) scale(1);
            transform: rotate(var(--icon-rotate, 0deg)) scale(1);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn:hover .generalBtn__icon .generalBtn__iconMask {
    -webkit-animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  .generalBtn:hover .generalBtn__icon .generalBtn__iconMask--link {
    -webkit-animation-name: generalBtnArwSwooshRight;
            animation-name: generalBtnArwSwooshRight;
  }
}

@media (hover: hover) and (pointer: fine) {
  .generalBtn:hover {
    background-color: #3373c4;
    /* リンク (arrow-01・右向き固定) は親が無回転なので translateY だと下に抜けてしまう。
     水平方向の swoosh keyframe に差し替える。 */
  }
}

@media print and (hover: hover) and (pointer: fine), screen and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .generalBtn:hover .generalBtn__icon {
    -webkit-transform: rotate(var(--icon-rotate, 0deg)) scale(1);
            transform: rotate(var(--icon-rotate, 0deg)) scale(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .generalBtn:hover .generalBtn__icon .generalBtn__iconMask {
    -webkit-animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  .generalBtn:hover .generalBtn__icon .generalBtn__iconMask--link {
    -webkit-animation-name: generalBtnArwSwooshRight;
            animation-name: generalBtnArwSwooshRight;
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn__label {
    font-size: 13px;
    letter-spacing: 1.3px;
    line-height: calc(19.5 / 13);
  }
}

@media screen and (max-width: 768px) {
  .generalBtn__label {
    font-size: calc(12 / 375 * 100vw);
    /* Figma SP base (続きを読む 12px) は ls 1.2。.5 はミス値だったので修正。 */
    letter-spacing: calc(1.2 / 375 * 100vw);
    line-height: calc(18 / 12);
  }
}

.generalBtn__icon {
  --icon-rotate: 0deg;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  /* 青背景ボタンの矢印円の縁取りはデザイン指定の淡青ライン (#b2cae9)。 */
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  -webkit-transform: rotate(var(--icon-rotate));
          transform: rotate(var(--icon-rotate));
  -webkit-transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), -webkit-transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media print, screen and (min-width: 768px) {
  .generalBtn__icon {
    -webkit-transform: rotate(var(--icon-rotate)) scale(0.9);
            transform: rotate(var(--icon-rotate)) scale(0.9);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn__icon {
    height: 23px;
    width: 23px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn__icon {
    height: calc(21 / 375 * 100vw);
    width: calc(21 / 375 * 100vw);
  }
}

.generalBtn__icon .generalBtn__iconMask {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .generalBtn__icon .generalBtn__iconMask {
    height: 9px;
    width: 9px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn__icon .generalBtn__iconMask {
    height: calc(9 / 375 * 100vw);
    width: calc(9 / 375 * 100vw);
  }
}

.generalBtn__icon--up {
  --icon-rotate: 180deg;
}

.generalBtn__icon--right {
  --icon-rotate: -90deg;
}

.generalBtn__iconMask {
  background-color: currentColor;
}

.generalBtn__iconMask--link {
  -webkit-mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
}

.generalBtn__iconMask--toggle {
  -webkit-mask: url("/brand/images/icon-arrow-02.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-02.svg") center/contain no-repeat;
}

.generalBtn--outline {
  background: #ffffff;
  border: 1px solid #b2cae9;
  /* outline (白背景) は背景白のまま据え置き。
       hover ではテキストと矢印のみ opacity を落として反応を出す。 */
}

.generalBtn--outline, .generalBtn--outline:link, .generalBtn--outline:visited, .generalBtn--outline:hover, .generalBtn--outline:active {
  color: #1e4d9e;
}

.generalBtn--outline .generalBtn__icon {
  border-color: #b2cae9;
}

.generalBtn--outline .generalBtn__label,
.generalBtn--outline .generalBtn__icon {
  -webkit-transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@media print, screen and (min-width: 768px) {
  .generalBtn--outline:hover {
    background-color: #ffffff;
    border-color: #b2cae9;
  }
  .generalBtn--outline:hover .generalBtn__label,
  .generalBtn--outline:hover .generalBtn__icon {
    opacity: .8;
  }
}

@media (hover: hover) and (pointer: fine) {
  .generalBtn--outline:hover {
    background-color: #ffffff;
    border-color: #b2cae9;
  }
  .generalBtn--outline:hover .generalBtn__label,
  .generalBtn--outline:hover .generalBtn__icon {
    opacity: .8;
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--large {
    gap: 18px;
    height: 52px;
    min-width: 199px;
    /* Figma 1761:5797/5725 (詳しく見る・化粧品トップへ 168/199×52): text x=35, icon at right 14。 */
    padding: 0 14px 0 35px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--large {
    gap: calc(12 / 375 * 100vw);
    height: calc(44 / 375 * 100vw);
    min-width: calc(165 / 375 * 100vw);
    /* Figma 1733:5258/5070 (化粧品/健康食品トップへ 165-178×44): text x=28, right 12。 */
    padding: 0 calc(12 / 375 * 100vw) 0 calc(28 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--large .generalBtn__label {
    font-size: 14px;
    letter-spacing: 1.4px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--large .generalBtn__label {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
    line-height: 1.5;
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--large .generalBtn__icon {
    height: 25px;
    width: 25px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--large .generalBtn__icon {
    height: calc(21 / 375 * 100vw);
    width: calc(21 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--withSub {
    height: 56px;
    min-width: 287px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--withSub {
    height: calc(56 / 375 * 100vw);
    min-width: calc(287 / 375 * 100vw);
  }
}

.generalBtn--withSub .generalBtn__label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  line-height: 1;
}

@media print, screen and (min-width: 768px) {
  .generalBtn--withSub .generalBtn__labelSub {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 15px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--withSub .generalBtn__labelSub {
    font-size: calc(10 / 375 * 100vw);
    font-weight: 400;
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: calc(15 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--withSub .generalBtn__labelMain {
    font-size: 16px;
    letter-spacing: 2.4px;
    line-height: 24px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--withSub .generalBtn__labelMain {
    font-size: calc(14 / 375 * 100vw);
    letter-spacing: calc(2 / 375 * 100vw);
    line-height: calc(22 / 375 * 100vw);
  }
}

.generalBtn--xl {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* アイコンは右端ピン留め。justify-content:center で label が中央寄せされても重ならない。
       transform は使わず top/right の値だけで位置決め (hover 時の rotate アニメと衝突しない)。 */
  /* 27px の icon に合わせて mask も少し大きく (9 → 11) */
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl {
    height: 56px;
    min-width: 287px;
    padding: 0 14px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl {
    height: calc(56 / 375 * 100vw);
    min-width: calc(287 / 375 * 100vw);
    padding: 0 calc(14 / 375 * 100vw);
  }
}

.generalBtn--xl .generalBtn__label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl .generalBtn__label {
    font-size: 14px;
    letter-spacing: 2.1px;
    line-height: calc(17.5 / 14);
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl .generalBtn__label {
    font-size: calc(13 / 375 * 100vw);
    letter-spacing: calc(1.95 / 375 * 100vw);
    line-height: calc(16.25 / 13);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl .generalBtn__labelSub {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: calc(15 / 10);
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl .generalBtn__labelSub {
    font-size: calc(10 / 375 * 100vw);
    font-weight: 400;
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: calc(15 / 10);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl .generalBtn__labelMain {
    font-size: 16px;
    letter-spacing: 2.4px;
    line-height: calc(24 / 16);
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl .generalBtn__labelMain {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: calc(2.4 / 375 * 100vw);
    line-height: calc(24 / 16);
  }
}

.generalBtn--xl .generalBtn__icon {
  border-color: #b2cae9;
  position: absolute;
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl .generalBtn__icon {
    height: 27px;
    right: 14px;
    top: calc(50% - 13.5px);
    width: 27px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl .generalBtn__icon {
    height: calc(27 / 375 * 100vw);
    right: calc(14 / 375 * 100vw);
    top: calc(50% - (13.5 / 375 * 100vw));
    width: calc(27 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .generalBtn--xl .generalBtn__iconMask {
    height: 11px;
    width: 11px;
  }
}

@media screen and (max-width: 768px) {
  .generalBtn--xl .generalBtn__iconMask {
    height: calc(11 / 375 * 100vw);
    width: calc(11 / 375 * 100vw);
  }
}

/* カード全体リンク: data-hover-btn 付き anchor (beautySect__link 等) を hover すると、
   内側の generalBtn (tag:'div' の装飾ボタン) がボタン単体 hover と同じ演出で反応する。 */
@media print, screen and (min-width: 768px) {
  [data-hover-btn]:hover .generalBtn {
    background-color: #3373c4;
    /* リンク (arrow-01・右向き固定) は親が無回転なので translateY だと下に抜けてしまう。
     水平方向の swoosh keyframe に差し替える。 */
  }
}

@media print, screen and (min-width: 768px) and (min-width: 768px) {
  [data-hover-btn]:hover .generalBtn .generalBtn__icon {
    -webkit-transform: rotate(var(--icon-rotate, 0deg)) scale(1);
            transform: rotate(var(--icon-rotate, 0deg)) scale(1);
  }
}

@media print, screen and (min-width: 768px) {
  [data-hover-btn]:hover .generalBtn .generalBtn__icon .generalBtn__iconMask {
    -webkit-animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  [data-hover-btn]:hover .generalBtn .generalBtn__icon .generalBtn__iconMask--link {
    -webkit-animation-name: generalBtnArwSwooshRight;
            animation-name: generalBtnArwSwooshRight;
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-hover-btn]:hover .generalBtn {
    background-color: #3373c4;
    /* リンク (arrow-01・右向き固定) は親が無回転なので translateY だと下に抜けてしまう。
     水平方向の swoosh keyframe に差し替える。 */
  }
}

@media print and (hover: hover) and (pointer: fine), screen and (hover: hover) and (pointer: fine) and (min-width: 768px) {
  [data-hover-btn]:hover .generalBtn .generalBtn__icon {
    -webkit-transform: rotate(var(--icon-rotate, 0deg)) scale(1);
            transform: rotate(var(--icon-rotate, 0deg)) scale(1);
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-hover-btn]:hover .generalBtn .generalBtn__icon .generalBtn__iconMask {
    -webkit-animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwoosh 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
  [data-hover-btn]:hover .generalBtn .generalBtn__icon .generalBtn__iconMask--link {
    -webkit-animation-name: generalBtnArwSwooshRight;
            animation-name: generalBtnArwSwooshRight;
  }
}

.heading {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  /* --large: ビューティーセクションのリード文用。h2 を使うと自動付与される */
}

.heading .caption {
  display: inline-block;
}

@media print, screen and (min-width: 768px) {
  .heading + .txt {
    margin-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .heading + .txt {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.heading--large {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .heading--large {
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 2;
  }
}

@media screen and (max-width: 768px) {
  .heading--large {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: calc(1.6 / 375 * 100vw);
    line-height: 2;
  }
}

.heading--medium {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .heading--medium {
    font-size: 18px;
    letter-spacing: 1.8px;
    line-height: 1.75;
  }
}

@media screen and (max-width: 768px) {
  .heading--medium {
    font-size: calc(15 / 375 * 100vw);
    letter-spacing: calc(1.5 / 375 * 100vw);
    line-height: 1.75;
  }
}

.heading--default {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .heading--default {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 1.625;
  }
}

@media screen and (max-width: 768px) {
  .heading--default {
    font-size: calc(14 / 375 * 100vw);
    letter-spacing: calc(1.4 / 375 * 100vw);
    line-height: 1.625;
  }
}

.heading--small {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .heading--small {
    font-size: 14px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .heading--small {
    font-size: calc(12 / 375 * 100vw);
    line-height: 1.5;
  }
}

.heading--center {
  text-align: center;
}

.headingCombi {
  position: relative;
  /* オプションの目印（eyebrow） */
  /* --badge: 薄青背景＋濃青文字。リンクエリアの淡いバッジ用 */
}

.headingCombi .ttl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1e4d9e;
  border-radius: 999px;
  color: #fff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .headingCombi .ttl {
    font-size: 12px;
    height: 22px;
    letter-spacing: 1.2px;
    margin-bottom: 16px;
    padding: 0 14px;
  }
}

@media screen and (max-width: 768px) {
  .headingCombi .ttl {
    font-size: calc(11 / 375 * 100vw);
    height: calc(20 / 375 * 100vw);
    letter-spacing: calc(1.1 / 375 * 100vw);
    margin-bottom: calc(14 / 375 * 100vw);
    padding: 0 calc(12 / 375 * 100vw);
  }
}

.headingCombi .ttl--badge {
  background-color: #f2f6fb;
  color: #1e4d9e;
}

@media print, screen and (min-width: 768px) {
  .headingCombi .ttl--badge {
    font-size: 16px;
    height: 40px;
    letter-spacing: 1.6px;
    padding: 0 20px;
  }
}

@media screen and (max-width: 768px) {
  .headingCombi .ttl--badge {
    font-size: calc(12 / 375 * 100vw);
    height: calc(32 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
    padding: 0 calc(16 / 375 * 100vw);
  }
}

/* health セクション。beautySect の鏡像。
   PC: 淡青パネル 1207 中央寄せ。pseudo bg (.healthSect::before) で viewport 右端まで
       淡青を伸ばす。商品画像 (623×707) は .healthSect を anchor に左端ピン留め。
       __body に headingCombi と generalBtn を含め、それぞれ width/margin を個別調整。
   SP: 淡青パネル全幅 (右寄せ、左 64vw 空ける)。enTtl--large.--split (display:contents) で
       __en と __ja を grid の直接の子に。'en' 行 HEALTH 横全幅、'photo ja' 行で
       写真+縦書きJA 横並び (beautySect と逆順)、'body body' 行で headingCombi + 詳しく見る (右寄せ) を縦積み。
   IE10/11: @supports not (display: grid) で flex single-column。 */
.healthSect {
  isolation: isolate;
  /* stacking context — ::before が z-index: -1 で背面に行けるように */
  margin: 0 auto;
  max-width: 980px;
  /* デザインフレーム (Figma section 1761:5525 の幅)。広い viewport では中央寄せ */
  position: relative;
  /* photo を .healthSect anchor にするため __upper は position:relative にしない */
  /* body 全体を覆うリンク。flex column は __body から移譲
     (headingCombi / generalBtn の align-self はこの flex コンテキストを参照)。 */
}

@media print, screen and (min-width: 768px) {
  .healthSect {
    margin-top: 200px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect {
    margin-top: calc(140 / 375 * 100vw);
  }
}

.healthSect__panel {
  /* bg は .healthSect::before に移譲 */
  /* data-sai="panel-fade" 付きで sai.js が IntersectionObserver で
       .sai-animate を付けると、::before (白の背景拡張) が opacity 0→1 でフェードイン。
       enTtl のマスクリビールと同じ easing で揃え、健康セクションの "白がふわっと出る"
       導入感を演出する。 */
}

@media print, screen and (min-width: 768px) {
  .healthSect__panel {
    margin: 0 auto;
    max-width: 1207px;
  }
}

.healthSect__panel[data-sai='panel-fade']:before {
  opacity: 0;
  -webkit-transition: opacity 1s cubic-bezier(0.43, 0.02, 0.05, 1);
  transition: opacity 1s cubic-bezier(0.43, 0.02, 0.05, 1);
}

.healthSect__panel[data-sai='panel-fade'].sai-animate:before {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .healthSect__panel {
    margin: 0 auto;
    width: 100%;
  }
}

.healthSect__panel:before {
  background: #ffffff;
  content: '';
  height: 100%;
  position: absolute;
  z-index: -1;
}

@media print, screen and (min-width: 768px) {
  .healthSect__panel:before {
    /* 左: パネル左辺 (= section 左端から 233px 内側) */
    left: 0;
    /* 右: パネル右端から viewport 右端まで延長 (中央寄せ時のはみ出し分を負 right で稼ぐ) */
    right: calc(50% - 50vw);
    top: 0;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__panel:before {
    height: calc(100% - 196 / 375 * 100vw);
    left: calc(64 / 375 * 100vw);
    right: 0;
    top: calc(196 / 375 * 100vw);
    width: calc(100% - 64 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .healthSect__upper {
    padding: 0 0 0;
    /* 画像は height 707 で top:0 配置。__upper 全体高 (664) を 43px 超過して
         __recommend 領域に食い込む。デザイン意図どおり (Figma も同じ) なので許容 */
  }
}

@media screen and (max-width: 768px) {
  .healthSect__upper {
    padding: 0 0 calc(20 / 375 * 100vw);
  }
}

.healthSect__upper + .healthSect__recommend {
  margin-top: 116px;
}

@media screen and (max-width: 768px) {
  .healthSect__upper + .healthSect__recommend {
    margin-top: calc(80 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .healthSect__inner {
    -webkit-column-gap: 44px;
       -moz-column-gap: 44px;
            column-gap: 44px;
    display: grid;
    grid-template-areas: 'body head';
    grid-template-columns: 1fr 156px;
    margin: 0 auto;
    margin-right: -60px;
    max-width: 1107px;
    min-height: 504px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__inner {
    -webkit-column-gap: calc(20 / 375 * 100vw);
       -moz-column-gap: calc(20 / 375 * 100vw);
            column-gap: calc(20 / 375 * 100vw);
    display: grid;
    grid-template-areas: 'en en' 'photo ja' 'body body';
    grid-template-columns: 1fr calc(28 / 375 * 100vw);
    row-gap: 0;
  }
}

.healthSect__body {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* generalBtn の位置は body 内で width/margin を個別調整 */
}

@media print, screen and (min-width: 768px) {
  .healthSect__body {
    grid-area: body;
    /* photo 623 が左端を占有するため、body は head 列の左隣 (1fr) でも実質右半分から開始。
         beautySect と同じく max-width 298 + top padding で position 調整 */
    margin-left: auto;
    /* 1fr 列内で右寄せ → photo (left:0, 623w) を避けて body を右側に */
    padding-top: 103px;
    /* Figma body y=303 − __upper pad-top 80 = 223 相当 */
    width: 321px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__body {
    grid-area: body;
    margin-top: calc(37 / 375 * 100vw);
    /* Figma body y=373 − photo bottom y=336 = 37 */
    padding-left: calc(44 / 375 * 100vw);
    padding-right: calc(45 / 375 * 100vw);
  }
}

.healthSect__body .headingCombi {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.healthSect__body .headingCombi .txt {
  letter-spacing: 0;
}

@media print, screen and (min-width: 768px) {
  .healthSect__body .generalBtn {
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-right: 0;
    /* body が右寄せ済みなので追加オフセット不要 (Figma 詳しく見る x は body 左端と同じ列) */
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__body .generalBtn {
    -ms-flex-item-align: end;
        align-self: flex-end;
    margin-right: calc(0 / 375 * 100vw);
    margin-top: calc(40 / 375 * 100vw);
  }
}

.healthSect__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
}

.healthSect__photo {
  /* 内側 .parallaxPhoto (100% × 100%, overflow:hidden) が四隅をクリップするが、
       外側でも border-radius を当てておけば parallaxPhoto を外したときも崩れない。 */
  border-radius: 4px;
  overflow: hidden;
  /* photo は section 左端から -233px 突き出すため、viewport <= 1446px だと左辺が
       viewport 左端に張り付く (section max-width 980 + photo offset 233 ×2 = 1446)。
       その状態では左側の角丸が viewport 外で意味を持たないので外す。SP も同じ理由。 */
}

@media (max-width: 1446px) {
  .healthSect__photo {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
}

@media print, screen and (min-width: 768px) {
  .healthSect__photo {
    height: 707px;
    left: -233px;
    position: absolute;
    top: -200px;
    width: 623px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__photo {
    grid-area: photo;
    /* Figma SP は写真 278×280 (ほぼ正方形)。元画像 (623×707) は縦長なので
         明示 height を当て object-fit:cover でクロップする。
         クロップ位置が気になる場合は SP 専用画像 (278×280 / @1.5x=417×420) に差し替え。 */
    height: calc(280 / 375 * 100vw);
    justify-self: start;
    margin-top: calc(-30 / 375 * 100vw);
    position: relative;
    width: calc(278 / 375 * 100vw);
    z-index: 1;
  }
}

.healthSect__photo img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .healthSect__recommend {
    padding: 0 50px 80px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect__recommend {
    padding: 0 calc(20 / 375 * 100vw) calc(60 / 375 * 100vw);
  }
}

/* enTtl--large.--split は SP のみ display:contents なので __en と __ja が
   healthSect__inner grid の直接の子になる。PC では enTtl 自体が grid item */
@media print, screen and (min-width: 768px) {
  .healthSect .enTtl--large {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    grid-area: head;
    height: 504px;
    margin-top: -200px;
  }
}

@media screen and (max-width: 768px) {
  .healthSect .enTtl--large {
    position: relative;
    z-index: 2;
  }
}

@media screen and (max-width: 768px) {
  .healthSect .enTtl__en {
    grid-area: en;
    /* デザインに合わせて HEALTH をセクション top より少し上に持ち上げる。
       grid item に対する負 margin なので、後続行 (ja/photo/body) の位置は
       影響を受けず、HEALTH 文字だけが視覚的に上にずれる。 */
    margin-top: calc(-35 / 375 * 100vw);
    padding-left: calc(21 / 375 * 100vw);
    position: relative;
    text-align: left;
    white-space: nowrap;
    /* 80px font + 8px ls の HEALTH が 2 行に折り返さないよう保険 */
    z-index: 2;
  }
}

@media screen and (max-width: 768px) {
  .healthSect .enTtl__ja {
    grid-area: ja;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    -webkit-transform: translateX(calc(-40 / 375 * 100vw));
            transform: translateX(calc(-40 / 375 * 100vw));
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

/* IE10/11 fallback: grid 未対応環境では flex 縦並びに degrade */
@supports not (display: grid) {
  .healthSect__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  @media print, screen and (min-width: 768px) {
    .healthSect__photo {
      left: auto;
      position: static;
      top: auto;
    }
  }
}

/* ▼ ページ内アンカー (#online / #shop) の着地調整 (pure CSS。html{scroll-behavior:smooth} と対) ▼
   固定ヘッダーに潜らないよう scroll-margin-top で「ヘッダー高 + 余白」ぶん上に余白を取る。
   値は FANCL テンプレートで一定なので定数で固定する (←ここだけ調整すれば着地位置が動く):
     $linkSect-header-pc … PC 固定ヘッダー高 = .pc_gnavi_height (113px)
     $linkSect-header-sp … SP 着地オフセット (固定ヘッダー帯 ≒64px + SP 特有の追加はみ出し)。
                           実測で 100px がヘッダー下に約32px 空く値。被るなら増やす / 空きすぎなら減らす。
     $linkSect-gap       … ヘッダー下に空ける余白
   bigEn / __photo の上方向はみ出しも加味する:
     PC … padding-top:143px が bigEn top:-143px を相殺 → はみ出し 0 (加算不要)
     SP … bigEn / __photo は panel_top の 100vw 上 → 100vw を加算 */
.linkSect {
  scroll-margin-top: 145px;
  /* __photo / __bigEn が margin-top:calc(-100/375*100vw) / top:calc(-100/375*100vw) で
     panel の外 (上方向) に飛び出すぶん、linkSect 自体を下にずらして
     直前セクションと重ならないようにする。 */
  /* enTtl--large と同じ縦リビール (上→下に mask gradient で出現)。
     sai.js が viewport 交差時に .sai-animate を付与 → mask-position が
     100% → 50% に遷移して文字が上から順に現れる。
     bigEn は writing-mode:vertical-rl だが mask は視覚座標で動くため
     ビジュアル的にも "上の文字から順に reveal" として読める。 */
  /* SP では panel が viewport 中央から横に 22v (= 44/2) ずれて配置されている
     (--online は右に / --shop は左に)。__head は viewport 中央に揃えたいので、
     反対側に 44v のマージンを足して text-align:center の中心軸をずらし戻す。 */
  /* __head と同じ理由で SP の __cta も viewport 中央に揃え直す。
     panel が右にずれている --online は margin-right を、左にずれている --shop は
     margin-left を、それぞれ 44v 足して justify-content:center の中心軸を補正。 */
}

@media print, screen and (min-width: 768px) {
  .linkSect {
    max-width: 740px;
    padding-top: 143px;
    scroll-margin-top: 145px;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .linkSect {
    margin-top: calc(100 / 375 * 100vw);
    scroll-margin-top: calc((100 / 375 * 100vw) + 100px + 32px);
  }
}

.linkSect__panel {
  background: rgba(255, 255, 255, 0.07);
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .linkSect__panel {
    border-radius: 4px;
    max-width: 740px;
    padding: 60px 50px 80px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__panel {
    padding: 0 calc(22 / 375 * 100vw) calc(80 / 375 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__panel {
    border-radius: calc(4 / 375 * 100vw) 0 0 calc(4 / 375 * 100vw);
    margin-left: calc(24 / 375 * 100vw);
    margin-right: calc(-20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect--shop .linkSect__panel {
    margin-left: auto;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__panel {
    border-radius: 0 calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) 0;
    margin-left: calc(-20 / 375 * 100vw);
    margin-right: calc(24 / 375 * 100vw);
  }
}

.linkSect__bigEn {
  color: #b2cae9;
  font-family: Optima, serif;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
  position: absolute;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
}

@media print, screen and (min-width: 768px) {
  .linkSect__bigEn {
    font-size: 100px;
    letter-spacing: 10px;
    top: -143px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__bigEn {
    font-size: calc(56 / 375 * 100vw);
    letter-spacing: calc(5.2 / 375 * 100vw);
    top: calc(-100 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect--online .linkSect__bigEn {
    right: -50px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__bigEn {
    right: calc(19 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect--shop .linkSect__bigEn {
    left: -50px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__bigEn {
    left: calc(19 / 375 * 100vw);
  }
}

.linkSect__bigEn[data-sai='mask-fade-down'] {
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
          mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-position: 100% 100%;
          mask-position: 100% 100%;
  -webkit-mask-size: 100% 400%;
          mask-size: 100% 400%;
  /* mask の透明端が SP の小さい字で滲んで見えることがあるので、opacity でも確実に隠す。
     End 側の transition は property 無し (= all) なので opacity も一緒に補間される。 */
  opacity: 0;
}

.linkSect__bigEn[data-sai='mask-fade-down'].sai-animate {
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
  opacity: 1;
  /* opacity は短め (.5s) で先に出し切り、mask-position は本来の duration で
     ゆっくり wipe させる → マスクのリビールがしっかり見える。 */
  -webkit-transition: opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
  transition: opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
  transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s, opacity 0.5s ease 0s !important;
  transition: mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s, opacity 0.5s ease 0s, -webkit-mask-position 2s cubic-bezier(0.43, 0.02, 0.05, 1) 0s !important;
}

.linkSect__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  .linkSect__inner {
    gap: 40px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__inner {
    gap: calc(24 / 375 * 100vw);
  }
}

.linkSect__head {
  text-align: center;
  /* リンクエリアのバッジは塗りなし＋淡青ボーダー＋白文字（shopPickup の濃青バッジとは別仕様）。 */
}

.linkSect__head .ttl--badge {
  background-color: transparent;
  border: 1px solid #b2cae9;
  color: #ffffff;
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__head {
    margin-right: calc(44 / 375 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__head {
    margin-left: calc(44 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect__photo {
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
    margin-top: -203px;
    max-width: 506px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__photo {
    margin-bottom: calc(8 / 375 * 100vw);
    margin-top: calc(-100 / 375 * 100vw);
    width: calc(286 / 375 * 100vw);
  }
}

.linkSect__photo img {
  display: block;
  height: auto;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .linkSect__photo img {
    border-radius: 4px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__photo {
    margin-left: calc(-66 / 375 * 100vw);
    margin-right: 0;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__photo img {
    border-radius: 0 calc(4 / 375 * 100vw) calc(4 / 375 * 100vw) 0;
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__photo {
    /* flex column 内で右寄せ。margin-right の負値で panel padding-right (22vw)
         + panel margin-right (24vw) = 46vw を相殺して viewport 右端まで張り出す。 */
    margin-left: auto;
    margin-right: calc(-66 / 375 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__photo img {
    border-radius: calc(4 / 375 * 100vw) 0 0 calc(4 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: calc(20 / 375 * 100vw);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: calc(-46 / 375 * 100vw);
    margin-right: calc(-1 / 375 * 100vw);
    width: calc(334 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .linkSect__pickup {
    margin-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__pickup {
    margin-top: calc(16 / 375 * 100vw);
  }
}

.linkSect__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .linkSect__cta {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .linkSect__cta {
    margin-top: calc(24 / 375 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .linkSect--online .linkSect__cta {
    margin-right: calc(44 / 375 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .linkSect--shop .linkSect__cta {
    margin-left: calc(44 / 375 * 100vw);
  }
}

.mainVisual {
  position: relative;
  /* PC は 1440 基準で vw 換算してウインドウサイズに合わせて可変に。
     ※ FANCL 既定は PC px だが mainVisual のみウインドウ追従させる方針。 */
}

@media print, screen and (min-width: 768px) {
  .mainVisual {
    margin: 0 auto;
    max-width: calc(1360 / 1440 * 100vw);
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .mainVisual {
    margin: calc(20 / 375 * 100vw) auto 0;
    width: calc(335 / 375 * 100vw);
  }
}

.mainVisual__visual {
  /* 内側 __pic はそのまま、外側で四隅を 4px 丸める。 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .mainVisual__visual {
    border-radius: 4px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}

@media screen and (max-width: 768px) {
  .mainVisual__visual {
    border-radius: calc(4 / 375 * 100vw);
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.mainVisual__pic {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  /* スケールが 1 を超える瞬間に img が __visual の幅をはみ出さないよう、
       __pic 側で切る。__ttl は __visual のさらに外 (mainVisual 直下) なので影響を受けない。 */
  overflow: hidden;
}

.mainVisual__pic img {
  /* 優しいフェード＋ズームアウト。scale(1.12) からゆっくり 1 に戻して
         "そっと寄ってきて落ち着く" 感を出す。 */
  -webkit-animation: mainVisual-pic-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
          animation: mainVisual-pic-in 1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  display: block;
  height: auto;
  width: 100%;
}

.mainVisual__ttl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 画像のフェードがほぼ落ち着いた頃にテキストをふわっと出す。
       translate(-50%, -50%) は中央寄せの基本値を維持しつつ、
       ターン中だけ Y を +8px ずらして "下からそっと現れる" 感じ。
       duration を 1s に伸ばし、easing を ease-out-quart に変えて
       終端のフェードがより滑らかに収まるように。 */
  -webkit-animation: mainVisual-ttl-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
          animation: mainVisual-ttl-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.7s both;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  left: 50%;
  position: absolute;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

@media print, screen and (min-width: 768px) {
  .mainVisual__ttl {
    gap: calc(14 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .mainVisual__ttl {
    gap: calc(8 / 375 * 100vw);
  }
}

.mainVisual__logo {
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .mainVisual__logo {
    height: calc(21 / 1440 * 100vw);
    width: calc(96 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .mainVisual__logo {
    height: calc(16 / 375 * 100vw);
    width: calc(72 / 375 * 100vw);
  }
}

.mainVisual__logo img {
  display: block;
  height: 100%;
  width: 100%;
}

.mainVisual__heading {
  font-family: Optima, serif;
  font-weight: 400;
  line-height: 1;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .mainVisual__heading {
    font-size: calc(40 / 1440 * 100vw);
    letter-spacing: calc(4 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .mainVisual__heading {
    font-size: calc(34 / 375 * 100vw);
    letter-spacing: calc(3.4 / 375 * 100vw);
  }
}

.mainVisual__caption {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .mainVisual__caption {
    font-size: calc(12 / 1440 * 100vw);
    letter-spacing: calc(1.2 / 1440 * 100vw);
    line-height: calc(18 / 12);
  }
}

@media screen and (max-width: 768px) {
  .mainVisual__caption {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: calc(15 / 10);
  }
}

@-webkit-keyframes mainVisual-pic-in {
  from {
    opacity: 0;
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes mainVisual-pic-in {
  from {
    opacity: 0;
    -webkit-transform: scale(1.12);
            transform: scale(1.12);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes mainVisual-ttl-in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, calc(-50% + 4px));
            transform: translate(-50%, calc(-50% + 4px));
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

@keyframes mainVisual-ttl-in {
  from {
    opacity: 0;
    -webkit-transform: translate(-50%, calc(-50% + 4px));
            transform: translate(-50%, calc(-50% + 4px));
  }
  to {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}

.messageSect {
  color: #1e4d9e;
  text-align: center;
}

.messageSect__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .messageSect__inner {
    width: calc(300 / 375 * 100vw);
  }
}

.messageSect__ttl {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .messageSect__ttl {
    font-size: 24px;
    letter-spacing: 3.6px;
    line-height: calc(36 / 24);
  }
}

@media screen and (max-width: 768px) {
  .messageSect__ttl {
    font-size: calc(23 / 375 * 100vw);
    letter-spacing: calc(3.45 / 375 * 100vw);
    line-height: calc(34.5 / 23);
  }
}

.messageSect__ttl + .messageSect__body {
  margin-top: 28px;
}

@media screen and (max-width: 768px) {
  .messageSect__ttl + .messageSect__body {
    margin-top: calc(28 / 375 * 100vw);
  }
}

.messageSect__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.messageSect__body + .generalBtn {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .messageSect__body + .generalBtn {
    margin-top: calc(40 / 375 * 100vw);
  }
}

.messageSect__txt {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .messageSect__txt {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: calc(33.6 / 16);
  }
}

@media screen and (max-width: 768px) {
  .messageSect__txt {
    font-size: calc(15 / 375 * 100vw);
    letter-spacing: calc(1.5 / 375 * 100vw);
    line-height: calc(31.5 / 15);
  }
}

.messageSect__txt + .messageSect__txt {
  margin-top: 18px;
}

@media screen and (max-width: 768px) {
  .messageSect__txt + .messageSect__txt {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.messageSect__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: max-height 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition: max-height 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media print, screen and (min-width: 768px) {
  .messageSect__more {
    gap: 18px;
  }
}

@media screen and (max-width: 768px) {
  .messageSect__more {
    gap: calc(20 / 375 * 100vw);
  }
}

.messageSect.is-open {
  /* 閉じる表示時は Figma (PC 122×46 / SP 114×44) に合わせてボタンを narrower にする。
       JS でテキスト ("もっと見る" → "閉じる") だけ差し替えているので、
       min-width / padding-right も .is-open 状態で詰める。 */
}

.messageSect.is-open .messageSect__more {
  max-height: 2000px;
  opacity: 1;
  /* 開く方向は S 字カーブ (低速スタート → 中盤加速 → 終端でゆっくり収束) で
         "ふわっと開く" 感を出す。ease-out 系だと立ち上がりが速くて
         ボタンが一気に押し下げられる印象になるので、cubic-bezier(.65,0,.35,1) で
         初動を抑える。閉じる方向は base 側 (cubic-bezier(.22,1,.36,1) 1.2s) のまま。 */
  -webkit-transition: max-height 1.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1), margin-top 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  transition: max-height 1.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1), margin-top 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

@media print, screen and (min-width: 768px) {
  .messageSect.is-open .messageSect__more {
    margin-top: 18px;
  }
}

@media screen and (max-width: 768px) {
  .messageSect.is-open .messageSect__more {
    margin-top: calc(20 / 375 * 100vw);
  }
}

.messageSect.is-open .generalBtn__icon {
  --icon-rotate: 180deg;
}

@media print, screen and (min-width: 768px) {
  .messageSect.is-open .generalBtn {
    min-width: 122px;
    padding-right: 11px;
  }
}

@media screen and (max-width: 768px) {
  .messageSect.is-open .generalBtn {
    min-width: calc(114 / 375 * 100vw);
    padding-right: calc(11 / 375 * 100vw);
  }
}

.newsCard {
  background: transparent;
  color: #1e4d9e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* grid 行内で兄弟カードと高さを揃えるため、__item (grid cell) いっぱいに伸びる。
     その上で __info を flex-grow させ、__foot に margin-top:auto を当てることで
     タイトル行数の違いがあっても日付/矢印は常にカード下端で揃う。 */
  height: 100%;
  /* ::before (b 白フレーム) を z-index:-1 でカード内の背面に置くため、
     スタッキングコンテキストをカード内に閉じ込める。 */
  isolation: isolate;
  position: relative;
  text-decoration: none;
  /* :visited 等のブラウザ既定色 (紫) で上書きされないよう全状態で色を維持。
     アンカー根本に color はあるが、対象ブラウザでは擬似クラス明示が確実 (generalBtn と同様)。 */
  /* 画像の背後に右上にずれて覗く "b" 白フレーム。
     PC: 286×286 (image 350×350 に対し top -20 / left +84)
     SP: 151×151 (image 151×151 と同サイズで、image top-left に対し top -14 / left +12)
         SP は card に padding 6vw があるので、card-left からの offset は 6vw + 12vw = 18vw、
         card-top からの offset は 6vw + (-14vw) = -8vw となる。 */
  /* hover: 縮小 (浅め .99) + 画像を少しだけ透過 (ブランドバナーと同様)。
     __visual に白ベタを敷いてあるので、画像が透けても背後の淡青ではなく白が見える。
     + __icon を opacity フェード + __iconMask は generalBtn と同じ右向き swoosh。
     keyframe (generalBtnArwSwooshRight) は generalBtn 側で定義済みのものを流用。 */
  /* タグ + 日付をまとめる左グループ (foot 内、矢印アイコンの対向)。
     旧デザインの画像右上オーバーレイ (position:absolute) を廃止し、
     NEW タグを日付の左に通常フローで並べる配置へ変更。 */
  /* ブランドブルー塗り + 白文字。NEW も他のタグも同じ見た目。
     チップ同士は 1px 枠線を共有するため margin-left: -1px で重ねる。 */
}

@media print, screen and (min-width: 768px) {
  .newsCard {
    gap: 16px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard {
    /* Figma 最新案ではカード全体の白塗りはやめ、画像の背後に小さな "b" 白フレームを
       覗かせる構造に変更。background / border-radius は外し、padding は info を card edge から
       離すために残しておく。 */
    gap: calc(10 / 375 * 100vw);
    padding: calc(6 / 375 * 100vw) calc(6 / 375 * 100vw) calc(10 / 375 * 100vw);
  }
}

.newsCard:link, .newsCard:visited, .newsCard:hover, .newsCard:active {
  color: #1e4d9e;
}

.newsCard:before {
  /* 透過 60% の白フレーム (シャドウなし)。背後の淡青がうっすら透ける。 */
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  content: '';
  position: absolute;
  z-index: -1;
}

@media print, screen and (min-width: 768px) {
  .newsCard:before {
    height: 286px;
    left: 84px;
    top: -20px;
    width: 286px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard:before {
    height: calc(151 / 375 * 100vw);
    left: calc(18 / 375 * 100vw);
    top: calc(-8 / 375 * 100vw);
    width: calc(151 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsCard:hover .newsCard__visual {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
  }
  .newsCard:hover .newsCard__visual img {
    opacity: .85;
  }
  .newsCard:hover .newsCard__icon {
    opacity: .85;
  }
  .newsCard:hover .newsCard__iconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .newsCard:hover .newsCard__visual {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
  }
  .newsCard:hover .newsCard__visual img {
    opacity: .85;
  }
  .newsCard:hover .newsCard__icon {
    opacity: .85;
  }
  .newsCard:hover .newsCard__iconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

.newsCard__visual {
  /* hover 時に画像を透過させたとき背後の淡青が透けないよう、画像の後ろに白ベタ。 */
  background: #ffffff;
  border-radius: 4px;
  /* Figma: 画像にも b と同じ落ち影 (透明感のある淡青)。card 全体ではなく
       画像と b 各自にシャドウを当てて、重ねた "紙が浮いている" 感を出す。 */
  -webkit-box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
          box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
  overflow: hidden;
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
  width: 100%;
}

.newsCard__visual img {
  display: block;
  height: auto;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
  width: 100%;
}

.newsCard__meta {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media print, screen and (min-width: 768px) {
  .newsCard__meta {
    gap: 10px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard__meta {
    gap: calc(6 / 375 * 100vw);
  }
}

.newsCard__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.newsCard__tag {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #1e4d9e;
  border: 1px solid #b2cae9;
  color: #ffffff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1.25;
  white-space: nowrap;
}

@media print, screen and (min-width: 768px) {
  .newsCard__tag {
    font-size: 12px;
    padding: 3px 8px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard__tag {
    font-size: calc(9 / 375 * 100vw);
    padding: calc(3 / 375 * 100vw) calc(6 / 375 * 100vw);
  }
}

.newsCard__tag + .newsCard__tag {
  margin-left: -1px;
}

.newsCard__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  .newsCard__info {
    gap: 12px;
    padding: 0 32px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard__info {
    gap: calc(10 / 375 * 100vw);
    padding: 0 calc(4 / 375 * 100vw);
  }
}

.newsCard__ttl {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-line-clamp: 3;
  margin: 0;
  overflow: hidden;
}

@media print, screen and (min-width: 768px) {
  .newsCard__ttl {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: calc(26.4 / 16);
  }
}

@media screen and (max-width: 768px) {
  .newsCard__ttl {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: calc(.96 / 375 * 100vw);
    line-height: calc(18 / 12);
  }
}

.newsCard__foot {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  /* __info を flex-grow させているので、__foot を auto で押し下げると
       タイトル行数違いのカード同士で日付/矢印行が下端で揃う。 */
  margin-top: auto;
}

.newsCard__date {
  color: #7894c5;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .newsCard__date {
    font-size: 12px;
    letter-spacing: 1.2px;
    line-height: calc(15 / 12);
  }
}

@media screen and (max-width: 768px) {
  .newsCard__date {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: calc(12.5 / 10);
  }
}

.newsCard__icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 円の塗りと縁取りはデザインに合わせて白地 + 淡青ライン (anchorList と同系統)。 */
  background: #ffffff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* swoosh animation の translateX が pill 外へ抜けて画面に残らないよう clip */
  overflow: hidden;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

@media print, screen and (min-width: 768px) {
  .newsCard__icon {
    height: 25px;
    width: 25px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard__icon {
    height: calc(21 / 375 * 100vw);
    width: calc(21 / 375 * 100vw);
  }
}

.newsCard__iconMask {
  background-color: currentColor;
  display: block;
  -webkit-mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
}

@media print, screen and (min-width: 768px) {
  .newsCard__iconMask {
    height: 10px;
    width: 10px;
  }
}

@media screen and (max-width: 768px) {
  .newsCard__iconMask {
    height: calc(9 / 375 * 100vw);
    width: calc(9 / 375 * 100vw);
  }
}

.newsSect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* "最新情報" 見出し: BRAND NEWS の英大文字は撤去し、和文 1 行のみ。
     PC 20px / SP 18px、共に line-height 1.25・letter-spacing 約 10% (Figma 値)。 */
}

.newsSect__head {
  text-align: center;
}

.newsSect__heading {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .newsSect__heading {
    font-size: 20px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__heading {
    font-size: calc(18 / 375 * 100vw);
    letter-spacing: calc(1.8 / 375 * 100vw);
  }
}

.newsSect__cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  .newsSect__cont {
    max-width: 1200px;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__cont {
    width: calc(335 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsSect__head + .newsSect__cont {
    margin-top: 64px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__head + .newsSect__cont {
    margin-top: calc(50 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsSect__cont + .newsSect__slider,
  .newsSect__head + .newsSect__slider {
    margin-top: 100px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__cont + .newsSect__slider,
  .newsSect__head + .newsSect__slider {
    margin-top: calc(80 / 375 * 100vw);
  }
}

.newsSect__list {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .newsSect__list {
    gap: 60px;
    grid-template-columns: repeat(2, 350px);
  }
}

@media screen and (max-width: 768px) {
  .newsSect__list {
    gap: calc(20 / 375 * 100vw);
    grid-template-columns: repeat(2, 1fr);
  }
}

.newsSect__item {
  display: block;
}

.newsSect__more {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  -webkit-transition: max-height 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition: max-height 1.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  /* newsCard の ::before (b 白フレーム) は image の上に top:-20px (PC) / top:-8vw (SP) で
       はみ出して配置される。__more が overflow:hidden でクリップするため、内側 grid に
       padding-top を入れて先頭行を下にずらし、b が clip 端で切られないようにする。
       値は Figma (1761:5873) の行間に合わせる: row1 のコンテンツ下端 → row2 画像上端の
       可視ギャップが 68px (= group 間 48px + b の上はみ出し 20px)。padding-top がそのまま
       この可視ギャップになるので PC=68px。 */
}

@media print, screen and (min-width: 768px) {
  .newsSect__more .newsSect__list--more {
    padding-top: 68px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__more .newsSect__list--more {
    padding-top: calc(20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsSect__list + .newsSect__more {
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__list + .newsSect__more {
    margin-top: 0;
  }
}

.newsSect__btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .newsSect__btn {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect__btn {
    margin-top: calc(46 / 375 * 100vw);
  }
}

.newsSect.is-open {
  /* 閉じる表示時は Figma (PC 122×46 / SP 114×44) に合わせてボタンを narrower にする。
       同じ <button> 要素のテキスト ("もっと見る" → "閉じる") だけ JS で差し替えているので、
       min-width / padding-right も .is-open 状態で詰めて視覚的にテキストを中央寄りに見せる。 */
}

.newsSect.is-open .newsSect__more {
  max-height: 3000px;
  opacity: 1;
  /* 開く方向は S 字カーブ (低速スタート → 中盤加速 → 終端でゆっくり収束) で
         "ふわっと開く" 感を出す。ease-out 系だと立ち上がりが速くて
         ボタンが一気に押し下げられる印象になるので、cubic-bezier(.65,0,.35,1) で
         初動を抑える。閉じる方向は base 側 (cubic-bezier(.22,1,.36,1) 1.2s) のまま。 */
  -webkit-transition: max-height 1.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1), margin-top 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  transition: max-height 1.8s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1), margin-top 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  /* row1 と __more の間隔は内側 .newsSect__list--more の padding-top で確保するので
         margin-top は 0 にする (二重に空かないよう)。 */
}

@media print, screen and (min-width: 768px) {
  .newsSect.is-open .newsSect__more {
    margin-top: 0;
  }
}

@media screen and (max-width: 768px) {
  .newsSect.is-open .newsSect__more {
    margin-top: 0;
  }
}

.newsSect.is-open .generalBtn__icon {
  --icon-rotate: 180deg;
}

@media print, screen and (min-width: 768px) {
  .newsSect.is-open .generalBtn {
    min-width: 122px;
    padding-right: 11px;
  }
}

@media screen and (max-width: 768px) {
  .newsSect.is-open .generalBtn {
    min-width: calc(114 / 375 * 100vw);
    padding-right: calc(11 / 375 * 100vw);
  }
}

.newsSect__slider {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .newsSect__slider {
    overflow: hidden;
  }
}

/* prev ボタン用の左向き swoosh。generalBtnArwSwooshRight の鏡像。 */
@-webkit-keyframes newsSliderArwSwooshLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes newsSliderArwSwooshLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(-200%);
            transform: translateX(-200%);
  }
  50.1% {
    opacity: 0;
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.newsSlider {
  position: relative;
  /* スライド全体をクリック可能リンクとして使う場合のラッパ。
     hover で opacity フェードのみ (transform はスライドの自動再生と衝突するので加えない)。 */
}

.newsSlider__viewport {
  overflow: visible;
  width: 100%;
}

.newsSlider .swiper {
  overflow: visible;
}

.newsSlider__slide.swiper-slide {
  border-radius: 4px;
  -webkit-box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
          box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__slide.swiper-slide {
    height: calc(384 / 1440 * 100vw);
    width: calc(720 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__slide.swiper-slide {
    height: calc(389 / 375 * 100vw);
    width: calc(311 / 375 * 100vw);
  }
}

.newsSlider__slide.swiper-slide .photo,
.newsSlider__slide.swiper-slide .photo__pic {
  display: block;
  height: 100%;
  width: 100%;
}

.newsSlider__slide.swiper-slide img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.newsSlider__slideLink {
  /* 現状は画像のみだが、:visited のブラウザ既定色 (紫) を継承色で打ち消しておく
       (将来テキストを内包しても紫化しないよう防御的に指定)。 */
  color: inherit;
  display: block;
  height: 100%;
  text-decoration: none;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__slideLink:hover {
    opacity: .85;
  }
}

@media (hover: hover) and (pointer: fine) {
  .newsSlider__slideLink:hover {
    opacity: .85;
  }
}

.newsSlider__navWrap {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: calc(790 / 1440 * 100vw);
  z-index: 2;
  /* SP: Figma だと arrow が viewport 左右端から 10vw のところに置かれる
       (frame 375, btn 32, btn_x=10 / btn_right_from_frame_right=10)。
       base の calc(790/1440*100vw) は SP で ~205vw に縮んでしまい矢印が中央寄り
       になりすぎるので、355vw に上書きして両端 10vw のレイアウトを作る。 */
}

@media screen and (max-width: 768px) {
  .newsSlider__navWrap {
    max-width: calc(355 / 375 * 100vw);
    width: calc(355 / 375 * 100vw);
  }
}

.newsSlider__nav {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #1e4d9e;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 矢印 swoosh が pill 外へ抜けないよう clip */
  overflow: hidden;
  padding: 0;
  pointer-events: auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  /* translateY(-50%) は基準値として保持しつつ scale だけ hover で乗せ替えるため、
       multi-value transition で scale を別管理 */
  -webkit-transition: scale .3s ease;
  transition: scale .3s ease;
  /* 他 FANCL サイトと揃え、hover で丸を少し拡大 + 矢印 swoosh。
       swoosh は generalBtn と同じ感覚 (.4s / cubic-bezier(.645,.045,.355,1))。 */
  /* prev は左向きなので左へ抜けて右から戻る方向の swoosh を使う */
}

@media print, screen and (min-width: 768px) {
  .newsSlider__nav {
    height: 48px;
    width: 48px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__nav {
    height: calc(32 / 375 * 100vw);
    width: calc(32 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsSlider__nav:hover {
    scale: 1.08;
  }
  .newsSlider__nav:hover svg {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .newsSlider__nav:hover {
    scale: 1.08;
  }
  .newsSlider__nav:hover svg {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

.newsSlider__nav--prev {
  left: 0;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__nav--prev:hover svg {
    -webkit-animation-name: newsSliderArwSwooshLeft;
            animation-name: newsSliderArwSwooshLeft;
  }
}

@media (hover: hover) and (pointer: fine) {
  .newsSlider__nav--prev:hover svg {
    -webkit-animation-name: newsSliderArwSwooshLeft;
            animation-name: newsSliderArwSwooshLeft;
  }
}

.newsSlider__nav--next {
  right: 0;
}

.newsSlider__nav svg {
  display: block;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__nav svg {
    height: 20px;
    width: 20px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__nav svg {
    height: calc(11 / 375 * 100vw);
    width: calc(11 / 375 * 100vw);
  }
}

.newsSlider__nav.swiper-button-disabled {
  opacity: .3;
  pointer-events: none;
}

.newsSlider__controls {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__controls {
    gap: 12px;
    margin-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__controls {
    gap: calc(12 / 375 * 100vw);
    margin-top: calc(20 / 375 * 100vw);
  }
}

.newsSlider__pagination.swiper-pagination {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  bottom: auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: auto;
  position: static;
  -webkit-transform: none;
          transform: none;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pagination.swiper-pagination {
    gap: 8px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__pagination.swiper-pagination {
    gap: calc(8 / 375 * 100vw);
  }
}

.newsSlider__pagination.swiper-pagination .swiper-pagination-bullet {
  background: #fff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  opacity: 1;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pagination.swiper-pagination .swiper-pagination-bullet {
    height: 8px;
    width: 8px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__pagination.swiper-pagination .swiper-pagination-bullet {
    height: calc(8 / 375 * 100vw);
    width: calc(8 / 375 * 100vw);
  }
}

.newsSlider__pagination.swiper-pagination .swiper-pagination-bullet-active {
  background: #1e4d9e;
  border-color: #1e4d9e;
}

.newsSlider__pause {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #ffffff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  position: relative;
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pause {
    height: 24px;
    width: 24px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__pause {
    height: calc(24 / 375 * 100vw);
    width: calc(24 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pause:hover {
    opacity: .8;
  }
}

@media (hover: hover) and (pointer: fine) {
  .newsSlider__pause:hover {
    opacity: .8;
  }
}

.newsSlider__pauseIcon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.newsSlider__pauseIcon svg {
  display: block;
  /* pause アイコンは Figma の stroke ベース 11×11 アイコンに合わせる。
         play 側 (--play) は 8×10 の filled triangle のままなので、内部の
         <svg width/height> 属性で正しい比率を保たせる (この CSS は両方に効くが
         viewBox に合わせて scale されるので問題なし)。 */
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pauseIcon svg {
    height: 11px;
    width: 11px;
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__pauseIcon svg {
    height: calc(11 / 375 * 100vw);
    width: calc(11 / 375 * 100vw);
  }
}

.newsSlider__pauseIcon--play {
  display: none;
  /* 右向き三角形は重心 (centroid) が左寄り (1/3 from base) なので、
         幾何学的中心を viewBox center に置くと視覚的に左に寄って見える。
         centroid を視覚中央に持ってくるため SVG 全体を少し右にずらす。 */
}

@media print, screen and (min-width: 768px) {
  .newsSlider__pauseIcon--play svg {
    -webkit-transform: translateX(1.5px);
            transform: translateX(1.5px);
  }
}

@media screen and (max-width: 768px) {
  .newsSlider__pauseIcon--play svg {
    -webkit-transform: translateX(calc(1.5 / 375 * 100vw));
            transform: translateX(calc(1.5 / 375 * 100vw));
  }
}

.newsSlider__pause.is-paused .newsSlider__pauseIcon--pause {
  display: none;
}

.newsSlider__pause.is-paused .newsSlider__pauseIcon--play {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.onlineItem {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* リード (小・上段) と メイン (大・下段) を縦に積む。Figma では一つのテキストノードに
     character-style override で 2 サイズを混在させていたが、HTML では子 span を分けて
     セマンティクスとサイズ管理を明確にする。 */
}

@media print, screen and (min-width: 768px) {
  .onlineItem {
    gap: 20px;
    width: 193px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem {
    gap: calc(16 / 375 * 100vw);
    width: calc(157 / 375 * 100vw);
  }
}

.onlineItem__label {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .onlineItem__labelLead {
    font-size: 14px;
    letter-spacing: 1.4px;
    line-height: calc(21 / 14);
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__labelLead {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
    line-height: calc(21 / 12);
  }
}

@media print, screen and (min-width: 768px) {
  .onlineItem__labelMain {
    font-size: 18px;
    letter-spacing: 1.8px;
    line-height: calc(21 / 18);
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__labelMain {
    font-size: calc(16 / 375 * 100vw);
    letter-spacing: calc(1.6 / 375 * 100vw);
    line-height: calc(21 / 16);
  }
}

.onlineItem__photo {
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .onlineItem__photo {
    height: 193px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__photo {
    height: calc(157 / 375 * 100vw);
  }
}

.onlineItem__photo img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .onlineItem__photo img {
    border-radius: 4px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__photo img {
    border-radius: calc(4 / 375 * 100vw);
  }
}

.onlineItem__btn {
  width: 100%;
}

.onlineItem__btn .generalBtn {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  /* PC は Figma 1761:5682/5697 (onlineItem 化粧品/健康食品トップへ 193×52) に合わせる。
         font 14/1.4、padding は短い text 用に右 13 / 左 27 で base override (健康食品が収まるよう詰めている)。 */
  /* SP は Figma 1733:5220/5235 (onlineItem 化粧品/健康食品トップへ 148×40) に合わせる。
         base 12/1.2 + padding 28/12 のままだと "健康食品トップへ" が幅オーバーで 2 行に折り返す。
         font を 11/1.1 に縮め、padding も text 用に左 18vw / 右 11vw に詰める。 */
}

@media print, screen and (min-width: 768px) {
  .onlineItem__btn .generalBtn {
    height: 52px;
    padding: 0 13px 0 27px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__btn .generalBtn {
    height: calc(40 / 375 * 100vw);
    padding: 0 calc(11 / 375 * 100vw) 0 calc(18 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .onlineItem__btn .generalBtn__label {
    font-size: 14px;
    letter-spacing: 1.4px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__btn .generalBtn__label {
    font-size: calc(11 / 375 * 100vw);
    letter-spacing: calc(1.1 / 375 * 100vw);
  }
}

.onlineItem__btn .generalBtn__icon {
  margin-left: auto;
}

@media print, screen and (min-width: 768px) {
  .onlineItem__btn .generalBtn__icon {
    height: 25px;
    width: 25px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem__btn .generalBtn__icon {
    height: calc(19 / 375 * 100vw);
    width: calc(19 / 375 * 100vw);
  }
}

/* 1 個目の onlineItem (化粧品トップへ) は text が "健康食品トップへ" より短いため、
   Figma では padding-left を広げてバランスを取っている。
   2 個目 (健康食品) は base override の値のまま (text を収めるため詰めている)。
     PC: 35 (1761:5682) vs 27 (1761:5697)
     SP: 24vw (1733:5220) vs 18vw (1733:5235) */
@media print, screen and (min-width: 768px) {
  .onlineItem:first-child .onlineItem__btn .generalBtn {
    padding-left: 35px;
  }
}

@media screen and (max-width: 768px) {
  .onlineItem:first-child .onlineItem__btn .generalBtn {
    padding-left: calc(24 / 375 * 100vw);
  }
}

.parallaxPhoto {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.photo {
  position: relative;
}

.photo__capIn, .photo__capOut {
  font-size: 10px;
  line-height: calc(18 / 10);
}

.photo__capIn, .photo__capOut {
  position: absolute;
}

.photo__capIn {
  bottom: 5px;
  right: 5px;
}

.photo__capIn[data-color='label'] {
  bottom: 0;
  right: 0;
}

.photo__capOut {
  padding-top: 5px;
  right: 0;
  top: 100%;
}

.photo__pic {
  display: block;
}

.photo--full .photo__image {
  width: 100%;
}

.photo--fit {
  height: 100%;
}

.photo--fit .photo__pic,
.photo--fit .photo__image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.photo--shadow {
  -webkit-box-shadow: 0 20px 20px rgba(18, 15, 4, 0.1);
          box-shadow: 0 20px 20px rgba(18, 15, 4, 0.1);
}

.recommendCard {
  background: var(--pure-white, #ffffff);
  border-radius: 4px;
  -webkit-box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
          box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #1e4d9e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  -webkit-transition: -webkit-transform .6s ease;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;
  /* hover で全体を控えめに縮小 (.97) + __btn / __btnIcon を opacity フェード
     + __btnIconMask を generalBtn と同じ右向き swoosh で動かす。
     keyframe (generalBtnArwSwooshRight) は generalBtn 側で定義済み。 */
  /* :visited 等のブラウザ既定色 (紫) で上書きされないよう全状態で色を維持。
     アンカー根本に color はあるが、対象ブラウザでは擬似クラス明示が確実 (generalBtn と同様)。 */
}

@media print, screen and (min-width: 768px) {
  .recommendCard {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 22px;
    height: 175px;
    padding: 6px;
    width: 360px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    gap: calc(8 / 375 * 100vw);
    height: calc(230 / 375 * 100vw);
    padding: calc(8 / 375 * 100vw);
    width: calc(157 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendCard:hover {
    /* hover の沈み込みは控えめに (元 .97 → .985 → さらに浅く .99 で微反応のみ)。 */
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
    /* ブランドバナー (newsSlider__slideLink) と同様、画像を少しだけ透過させる。 */
  }
  .recommendCard:hover .recommendCard__photo {
    opacity: .8;
  }
  .recommendCard:hover .recommendCard__btn {
    opacity: .85;
  }
  .recommendCard:hover .recommendCard__btnIcon {
    opacity: .85;
  }
  .recommendCard:hover .recommendCard__btnIconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .recommendCard:hover {
    /* hover の沈み込みは控えめに (元 .97 → .985 → さらに浅く .99 で微反応のみ)。 */
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
    /* ブランドバナー (newsSlider__slideLink) と同様、画像を少しだけ透過させる。 */
  }
  .recommendCard:hover .recommendCard__photo {
    opacity: .8;
  }
  .recommendCard:hover .recommendCard__btn {
    opacity: .85;
  }
  .recommendCard:hover .recommendCard__btnIcon {
    opacity: .85;
  }
  .recommendCard:hover .recommendCard__btnIconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

.recommendCard:link, .recommendCard:visited, .recommendCard:hover, .recommendCard:active {
  color: #1e4d9e;
}

.recommendCard:focus {
  outline: none;
}

.recommendCard:focus-visible {
  outline: 2px solid #1e4d9e;
  outline-offset: 2px;
}

.recommendCard__photo {
  border-radius: 4px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
  /* hover フェードを newsSlider と同じ .6s ease で滑らかに。 */
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__photo {
    height: 163px;
    width: 163px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__photo {
    height: calc(141 / 375 * 100vw);
    width: calc(141 / 375 * 100vw);
  }
}

.recommendCard__photo img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

.recommendCard__ttl {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__ttl {
    -ms-flex-item-align: center;
        align-self: center;
    font-size: 15.5px;
    letter-spacing: 0;
    line-height: 1.25;
    padding-right: 18px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__ttl {
    font-size: calc(14 / 375 * 100vw);
    letter-spacing: 0;
    line-height: 1.25;
    padding: 0 calc(4 / 375 * 100vw);
    width: 100%;
  }
}

.recommendCard__btn {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1e4d9e;
  bottom: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #ffffff;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: absolute;
  right: 0;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__btn {
    border-radius: 4px 0 0 0;
    height: 27px;
    padding: 0 8px 0 12px;
    width: 100px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__btn {
    border-radius: 0 calc(4 / 375 * 100vw) 0 0;
    height: calc(25 / 375 * 100vw);
    padding: 0 calc(6 / 375 * 100vw) 0 calc(10 / 375 * 100vw);
    width: calc(90 / 375 * 100vw);
  }
}

.recommendCard__btnLabel {
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__btnLabel {
    font-size: 11px;
    letter-spacing: 1.1px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__btnLabel {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: calc(1 / 375 * 100vw);
    line-height: 1.5;
  }
}

.recommendCard__btnIcon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* swoosh animation の translateX が parent 外へ抜けて画面に残らないよう clip */
  overflow: hidden;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__btnIcon {
    height: 17px;
    width: 17px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__btnIcon {
    height: calc(15 / 375 * 100vw);
    width: calc(15 / 375 * 100vw);
  }
}

.recommendCard__btnIconMask {
  background-color: currentColor;
  display: block;
  -webkit-mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
}

@media print, screen and (min-width: 768px) {
  .recommendCard__btnIconMask {
    height: 7px;
    width: 7px;
  }
}

@media screen and (max-width: 768px) {
  .recommendCard__btnIconMask {
    height: calc(6 / 375 * 100vw);
    width: calc(6 / 375 * 100vw);
  }
}

.recommendSection {
  margin: 0 auto;
  /* .swiper-wrapper を直接いじらず BEM クラスを併記してスコープ。
     PC は Swiper 未初期化なので CSS で gap を付ける。
     SP は Swiper 初期化 → spaceBetween = calc(20 / 375 * 100vw) 相当 (JS で viewport 幅から算出) */
  /* 一時停止ボタン (SP のみ表示) */
  /* 一時停止中: 一時停止アイコンを隠して再生アイコンを表示 */
}

@media print, screen and (min-width: 768px) {
  .recommendSection {
    max-width: 740px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection {
    width: 100%;
  }
}

.recommendSection__ttl {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #1e4d9e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  gap: 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .recommendSection__ttl {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 2;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__ttl {
    font-size: calc(16 / 375 * 100vw);
    gap: calc(16 / 375 * 100vw);
    letter-spacing: calc(1.6 / 375 * 100vw);
    line-height: 2;
  }
}

.recommendSection__dots {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.recommendSection__dots svg {
  display: block;
  height: auto;
  width: 16px;
}

@media screen and (max-width: 768px) {
  .recommendSection__dots svg {
    width: calc(16 / 375 * 100vw);
  }
}

.recommendSection__feature {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .recommendSection__feature {
    gap: 20px;
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__feature {
    gap: calc(20 / 375 * 100vw);
    margin-top: calc(28 / 375 * 100vw);
    padding: 0 calc(20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendSection__sliderWrap {
    margin-top: 36px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__sliderWrap {
    margin-top: calc(28 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendSection__slider {
    /* Swiper-bundle CSS が .swiper に overflow:hidden を当てるため、
         PC 未初期化時の 5 件並列でも切れないよう visible に上書き */
    overflow: visible;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__slider {
    margin: 0 calc(-20 / 375 * 100vw);
    padding: 0 calc(10 / 375 * 100vw) 0 calc(20 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendSection__track {
    gap: 20px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.recommendSection__slide {
  /* 共通テンプレ common_sp/style_sp.css に .swiper-slide { float:left } が
       残っているため、SP で Swiper の flex layout を壊さないよう明示的に解除 */
  float: none;
}

@media print, screen and (min-width: 768px) {
  .recommendSection__slide {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 132px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__slide.swiper-slide {
    width: calc(110 / 375 * 100vw);
  }
}

.recommendSection__pause {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #ffffff;
  border: 1px solid #b2cae9;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .recommendSection__pause {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: calc(24 / 375 * 100vw);
    margin-left: calc(24 / 375 * 100vw);
    margin-top: calc(16 / 375 * 100vw);
    width: calc(24 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendSection__pause:hover {
    opacity: .8;
  }
}

@media (hover: hover) and (pointer: fine) {
  .recommendSection__pause:hover {
    opacity: .8;
  }
}

.recommendSection__pauseIcon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.recommendSection__pauseIcon svg {
  display: block;
}

@media screen and (max-width: 768px) {
  .recommendSection__pauseIcon svg {
    height: calc(10 / 375 * 100vw);
    width: calc(8 / 375 * 100vw);
  }
}

.recommendSection__pauseIcon--play {
  display: none;
}

.recommendSection__pause.is-paused .recommendSection__pauseIcon--pause {
  display: none;
}

.recommendSection__pause.is-paused .recommendSection__pauseIcon--play {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.recommendSection__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .recommendSection__cta {
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSection__cta {
    margin-top: calc(40 / 375 * 100vw);
  }
}

.recommendSliderItem {
  color: #1e4d9e;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-decoration: none;
  /* hover: 縮小は __photo のみ (浅め .99) + __icon を opacity フェード
     + __iconMask を generalBtn と同じ右向き swoosh で動かす。 */
  /* デフォルト focus アウトラインを抑え、キーボード操作時のみ明確に表示 */
  /* :visited 等のブラウザ既定色 (紫) で上書きされないよう全状態で色を維持。
     アンカー根本に color はあるが、対象ブラウザでは擬似クラス明示が確実 (generalBtn と同様)。 */
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem {
    gap: 10px;
    width: 132px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem {
    gap: calc(8 / 375 * 100vw);
    width: calc(110 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem:hover .recommendSliderItem__photo {
    /* hover の沈み込みは控えめに (元 .96 だと押し込みが深く感じる)。
         ブランドバナーと同様に画像を少しだけ透過させる。 */
    opacity: .8;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  .recommendSliderItem:hover .recommendSliderItem__icon {
    opacity: .85;
  }
  .recommendSliderItem:hover .recommendSliderItem__iconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

@media (hover: hover) and (pointer: fine) {
  .recommendSliderItem:hover .recommendSliderItem__photo {
    /* hover の沈み込みは控えめに (元 .96 だと押し込みが深く感じる)。
         ブランドバナーと同様に画像を少しだけ透過させる。 */
    opacity: .8;
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
  }
  .recommendSliderItem:hover .recommendSliderItem__icon {
    opacity: .85;
  }
  .recommendSliderItem:hover .recommendSliderItem__iconMask {
    -webkit-animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
            animation: generalBtnArwSwooshRight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) forwards;
  }
}

.recommendSliderItem:link, .recommendSliderItem:visited, .recommendSliderItem:hover, .recommendSliderItem:active {
  color: #1e4d9e;
}

.recommendSliderItem:focus {
  outline: none;
}

.recommendSliderItem:focus-visible {
  outline: 2px solid #1e4d9e;
  outline-offset: 2px;
}

.recommendSliderItem__photo {
  background: var(--pure-white, #fff);
  border-radius: 4px;
  -webkit-box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
          box-shadow: 0 0 20px 0 rgba(30, 77, 158, 0.1);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: opacity .6s ease, -webkit-transform .6s ease;
  transition: opacity .6s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .6s ease;
  transition: transform .6s ease, opacity .6s ease, -webkit-transform .6s ease;
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem__photo {
    height: 132px;
    padding: 6px;
    width: 132px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem__photo {
    height: calc(110 / 375 * 100vw);
    padding: calc(6 / 375 * 100vw);
    width: calc(110 / 375 * 100vw);
  }
}

.recommendSliderItem__photo img {
  border-radius: 4px;
  display: block;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.recommendSliderItem__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem__meta {
    padding: 0 4px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem__meta {
    padding: 0 calc(2 / 375 * 100vw);
  }
}

.recommendSliderItem__ttl {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem__ttl {
    font-size: 14px;
    letter-spacing: 0;
    line-height: calc(17.5 / 14);
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem__ttl {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: 0;
    line-height: calc(15 / 12);
  }
}

.recommendSliderItem__icon {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #1e4d9e;
  border-radius: 999px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* swoosh animation の translateX が pill 外へ抜けて画面に残らないよう clip */
  overflow: hidden;
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem__icon {
    height: 20px;
    width: 20px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem__icon {
    height: calc(17 / 375 * 100vw);
    width: calc(17 / 375 * 100vw);
  }
}

.recommendSliderItem__iconMask {
  background-color: #ffffff;
  display: block;
  -webkit-mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
  mask: url("/brand/images/icon-arrow-01.svg") center/contain no-repeat;
}

@media print, screen and (min-width: 768px) {
  .recommendSliderItem__iconMask {
    height: 9px;
    width: 9px;
  }
}

@media screen and (max-width: 768px) {
  .recommendSliderItem__iconMask {
    height: calc(7 / 375 * 100vw);
    width: calc(7 / 375 * 100vw);
  }
}

.serviceLink {
  position: relative;
  width: 100%;
  /* Figma の Mask group (1782:6730 PC / 1782:6202 SP) は楕円 2500×328 (PC) /
     1250×328 (SP) を mask rect の上辺に揃えてカーブを作る。
     CSS では .serviceLink 自身に border-radius (横 50% / 縦 30px ≒ Figma の
     可視カーブ深) を当てることで同じ楕円アーチを上下に再現する。
     旧 ::before/::after の bump 方式から差し替え。 */
}

@media print, screen and (min-width: 768px) {
  .serviceLink {
    padding: 160px 0 160px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink {
    padding: calc(120 / 375 * 100vw) 0 calc(120 / 375 * 100vw);
  }
}

.serviceLink__bg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

.serviceLink__bg:before {
  background: #1e4d9e;
  /* 初期は border-radius:0 でフラットな帯。__bg に .sai-animate が
         付与されるタイミングで 50% まで成長させ、楕円アーチが "ひらく" 演出。 */
  border-radius: 0;
  content: '';
  display: block;
  left: 50%;
  overflow: hidden;
  position: absolute;
  top: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  /* sai fade と完全同期させるため duration/easing を一致 (1s + ease-out-cubic)。
         ease-in-out だと前半が緩慢で fade-in 終了後にアーチが開く印象になる。 */
  -webkit-transition: border-radius 1s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: border-radius 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media print, screen and (min-width: 768px) {
  .serviceLink__bg:before {
    height: calc(328 / 1440 * 100vw);
    width: calc(2500 / 1440 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__bg:before {
    height: calc(328 / 375 * 100vw);
    width: calc(1250 / 375 * 100vw);
  }
}

.serviceLink__bg.sai-animate:before {
  border-radius: 50%;
}

.serviceLink__bg:after {
  background: #1e4d9e;
  bottom: 0;
  content: '';
  display: block;
  position: absolute;
  width: 100%;
}

@media print, screen and (min-width: 768px) {
  .serviceLink__bg:after {
    height: calc(100% - (328 / 1440 * 100vw) / 2);
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__bg:after {
    height: calc(100% - (328 / 375 * 100vw) / 2);
  }
}

.serviceLink__inner {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

@media print, screen and (min-width: 768px) {
  .serviceLink__inner {
    max-width: 1200px;
    padding: 0 50px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__inner {
    padding: 0 calc(20 / 375 * 100vw);
  }
}

.serviceLink__lead {
  color: #ffffff;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .serviceLink__lead {
    font-size: 26px;
    letter-spacing: 2.6px;
    line-height: 2;
    padding-top: 16px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__lead {
    font-size: calc(20 / 375 * 100vw);
    letter-spacing: calc(2 / 375 * 100vw);
    line-height: 2;
    padding-top: calc(12 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .serviceLink__main {
    display: grid;
    gap: 171px;
    grid-template-columns: 229px 1fr;
    margin-top: 120px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: calc(60 / 375 * 100vw);
    margin-top: calc(40 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .serviceLink__anchor {
    -ms-flex-item-align: start;
        align-self: start;
    position: sticky;
    /* スクロール時に viewport の上端から ~240px の位置に貼り付くように調整。
         ブランドヘッダー (80px) のすぐ下ではなく、画像のように画面中央寄り上で
         止めて anchor を読みやすくする。 */
    top: 240px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__anchor {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }
}

.serviceLink__sections {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 768px) {
  .serviceLink__sections {
    gap: 80px;
  }
}

@media screen and (max-width: 768px) {
  .serviceLink__sections {
    gap: calc(60 / 375 * 100vw);
  }
}

.serviceLink .heading,
.serviceLink .txt {
  color: #ffffff;
}

.shopPickup {
  background: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* ボタン下に付く注釈 (※角層細胞をAIで...)。
     Figma: PC 中央寄せ・1行 / SP 左寄せ・折り返し。font 10px / weight 500 /
     line-height 1.5 / letter-spacing 1px / color #1e4d9e。 */
}

@media print, screen and (min-width: 768px) {
  .shopPickup {
    border-radius: 12px;
    gap: 32px;
    padding: 40px 20px;
  }
}

@media screen and (max-width: 768px) {
  .shopPickup {
    border-radius: calc(8 / 375 * 100vw);
    gap: calc(24 / 375 * 100vw);
    padding: calc(32 / 375 * 100vw) calc(20 / 375 * 100vw);
    width: calc(334 / 375 * 100vw);
  }
}

.shopPickup__head {
  text-align: center;
}

.shopPickup__badge {
  background: #f2f6fb;
  border-radius: 999px;
  color: #1e4d9e;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* "日本初※" の ※ は注釈参照記号として小さく上付き。
       Figma だと漢字の上端あたりに乗る位置感なので、top を浅めに。 */
}

@media print, screen and (min-width: 768px) {
  .shopPickup__badge {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 32px;
    padding: 4px 20px;
  }
}

@media screen and (max-width: 768px) {
  .shopPickup__badge {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
    line-height: calc(24 / 375 * 100vw);
    padding: calc(4 / 375 * 100vw) calc(16 / 375 * 100vw);
  }
}

.shopPickup__badge sup {
  font-size: .7em;
  line-height: 1;
  position: relative;
  top: .4rem;
  vertical-align: baseline;
}

.shopPickup__heading {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
}

@media print, screen and (min-width: 768px) {
  .shopPickup__heading {
    font-size: 36px;
    letter-spacing: 7.2px;
    line-height: 1;
    margin-top: 24px;
  }
}

@media screen and (max-width: 768px) {
  .shopPickup__heading {
    font-size: calc(22 / 375 * 100vw);
    letter-spacing: calc(4.4 / 375 * 100vw);
    line-height: 1;
    margin-top: calc(16 / 375 * 100vw);
  }
}

.shopPickup__photo {
  margin: 0 auto;
  width: 100%;
}

.shopPickup__photo img {
  display: block;
  height: auto;
  width: 100%;
}

.shopPickup__txt {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .shopPickup__txt {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 1.5;
  }
}

@media screen and (max-width: 768px) {
  .shopPickup__txt {
    font-size: calc(13 / 375 * 100vw);
    letter-spacing: calc(1.3 / 375 * 100vw);
    line-height: 1.5;
  }
}

.shopPickup__btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.shopPickup__note {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

@media print, screen and (min-width: 768px) {
  .shopPickup__note {
    font-size: 10px;
    letter-spacing: 1px;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  .shopPickup__note {
    font-size: calc(10 / 375 * 100vw);
    letter-spacing: calc(1 / 375 * 100vw);
    text-align: left;
  }
}

/* 汎用テキスト。<p class="txt">…</p> 形式でどこからでも使う想定。EJS パーシャルは無し */
.txt {
  color: #1e4d9e;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 500;
}

@media print, screen and (min-width: 768px) {
  .txt {
    font-size: 16px;
    letter-spacing: 1.6px;
    line-height: 2;
  }
}

@media screen and (max-width: 768px) {
  .txt {
    font-size: calc(13 / 375 * 100vw);
    letter-spacing: calc(1.3 / 375 * 100vw);
    line-height: 2;
  }
}

.txt--center {
  text-align: center;
}

@media print, screen and (min-width: 768px) {
  .txt--small {
    font-size: 14px;
    letter-spacing: 1.4px;
  }
}

@media screen and (max-width: 768px) {
  .txt--small {
    font-size: calc(12 / 375 * 100vw);
    letter-spacing: calc(1.2 / 375 * 100vw);
  }
}

/* FANCL の vendor CSS (common/css/style_common_light.css) が main に
   overflow:hidden を当てて position:sticky をブロックしている。
   overflow:clip は overflow を切るが「スクロール box」を作らないため、
   sticky 子孫が viewport を基準に動ける。
   IE10/11 は clip 未対応 → visible にフォールバックで横スクロール出る可能性あり。
   kikaku テンプレ移行後は inner の <div class="container main"> に当てる
   (旧: <main class="main">)。 */
.main {
  overflow: clip;
}

.container {
  position: relative;
  z-index: 1;
}

/* kikaku テンプレ標準の .l-main--responsive は FANCL 共通 CSS で
   - max-width: 指定 (brand では全幅にしたい → width:100% で上書き)
   - overflow: hidden 指定 (sticky descendant をブロックしてしまう
     → serviceLink__anchor の sticky が効かない原因)
   の両方が当たっている。overflow:clip は box 内の overflow を切るが
   「スクロール container」を作らないため、内部の sticky 要素は引き続き
   viewport を基準にできる。!important は vendor CSS 上書きのため。 */
.l-main--responsive {
  overflow: clip !important;
}

@media screen and (min-width: 1000px) {
  .l-main--responsive {
    width: 100% !important;
  }
}

@media print, screen and (min-width: 768px) {
  .brand-news {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .brand-news {
    margin-top: calc(80 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .brand-message {
    margin-top: 120px;
  }
}

@media screen and (max-width: 768px) {
  .brand-message {
    margin-top: calc(100 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .brand-beauty {
    padding-top: 170px;
  }
}

@media screen and (max-width: 768px) {
  .brand-beauty {
    margin-top: calc(100 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .brand-health {
    padding-top: 170px;
  }
}

@media screen and (max-width: 768px) {
  .brand-health {
    margin-top: calc(100 / 375 * 100vw);
  }
}

@media print, screen and (min-width: 768px) {
  .brand-link {
    margin-top: 160px;
  }
}

@media screen and (max-width: 768px) {
  .brand-link {
    margin-top: calc(120 / 375 * 100vw);
  }
}

/* ページ内アンカー (#online / #shop) は src/brand/js/index.js の smoothAnchorInit が
   毎フレーム window.scrollTo で動かす (FANCL 共通 JS の横取りを止めて自前スクロール)。
   標準の scroll-behavior:smooth が混ざると各フレームがアニメ化して干渉するので auto。 */
html {
  scroll-behavior: auto;
}