@charset "UTF-8";
/* =========================================================
   BIYOUDO / TOPページ 2026リニューアル
   ・FV：iframeを廃しインライン化。position:sticky で固定し
     その上に #contents（Products以降）が重なってスクロールする
   ・Products：横スクロールカルーセル＋ドラッグ可能なスクロールバー
   ※px指定（既存CSSの rem は 16px 基準のため混在を避ける）
   ========================================================= */

/* ---------------------------------------------------------
   FV（メインビジュアル）
   Swiperは同梱CSS(3.4.2)とJS(4.1.6)が不整合でレイアウトが壊れるため
   依存を外し、フェード切替を自前実装している
   --------------------------------------------------------- */
/* 既存の #wrapper{overflow:hidden} はスクロールコンテナを作り
   position:sticky を無効化するため、TOPのみ clip に置き換える。
   横方向のはみ出し防止は clip でも同じく効く */
div#wrapper {
  overflow-x: clip;
  overflow-y: visible;
}

.mainSlider_outer {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: #000;
}

/* Products以降は白背景でFVの上に重なる */
#contents {
  position: relative;
  z-index: 2;
  background: #fff;
}

.mv {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  background: #000;
  font-family: var(--bd-mincho);
}

.mv__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mv__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

.mv__slide[data-active="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease, visibility 0s;
}

.mv__bg {
  width: 100%;
  height: 100%;
  background: #000;
}

/* どの画面幅でも高さをFVいっぱいに。収まらない分は中央基準で左右を見切る */
.mv__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.mv__text {
  position: absolute;
  left: 8.3%;
  bottom: 152px;
  max-width: 80%;
  color: #fff;
}

.mv__ttl {
  font-size: 36px;
  line-height: 1.35;
  letter-spacing: .05em;
  text-align: left;
  margin: 0;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .9)) drop-shadow(0 0 12px rgba(0, 0, 0, .5));
}

.mv__lead {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .05em;
  text-align: left;
  font-feature-settings: "palt";
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, .9)) drop-shadow(0 0 12px rgba(0, 0, 0, .5));
}

/* --- ページャー（01 02 03） --- */
.mv__pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 34px;
  text-align: center;
  z-index: 10;
}

.mv__dot {
  display: inline-block;
  margin: 0 12px;
  padding: 0 0 4px;
  border: 0;
  background: none;
  color: #fff;
  font-family: var(--bd-mincho);
  font-size: 16px;
  letter-spacing: .05em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  -webkit-appearance: none;
          appearance: none;
}

.mv__dot[aria-current="true"] {
  cursor: default;
  border-bottom-color: #fff;
}

@media screen and (max-width: 859px) {
  .mainSlider_outer,
  .mv { height: 600px; }

  .mv__text {
    left: 5.33%;
    bottom: 128px;
    max-width: 90%;
  }

  .mv__ttl { font-size: 24px; line-height: 1.45; }
  .mv__lead { margin-top: 12px; font-size: 13px; line-height: 1.85; }

  .mv__pager { bottom: 28px; }
  .mv__dot { margin: 0 10px; font-size: 15px; }
}

/* ---------------------------------------------------------
   Products（横スクロールカルーセル）
   --------------------------------------------------------- */
#products {
  background: #fff;
  padding: 78px 0 92px;
  overflow: hidden;
}

/* TOPの白地に載る文字は他ページと同じ #151515 に揃える */
#products,
#products .sec-ttl,
.pcar__name,
.pcar__arrow {
  color: #151515;
}

/* カテゴリー名は完成像実測の #939393（PC・SP共通） */
.pcar__cat { color: #939393; }

.pcar__thumb-bar { background: #151515; }

#products .sec-ttl {
  font-family: var(--bd-serif);
  font-size: 17.6px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 44px;
}

.pcar {
  position: relative;
}

.pcar__track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* ホバーで枠が拡大したとき上下が overflow に切られないよう逃げを作る */
  padding: 10px 128px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* IE / 旧Edge */
}

.pcar__track::-webkit-scrollbar { display: none; }

/* ドラッグ／バー操作中はスムーススクロール補正を切って指に追従させる */
.pcar__track.is-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

.pcar__track.is-dragging .pcar__item > a { pointer-events: none; }

.pcar__item {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 486px;
}

.pcar__item + .pcar__item { margin-left: 22px; }

.pcar__item > a {
  display: block;
  text-decoration: none;
  color: #151515;
}

/* 画像枠ごと中心基準で10px拡大（486 → 496） */
.pcar__thumb {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 100%;   /* 正方形 */
  margin: 0;
}

.pcar__thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pcar__thumb {
  transform: scale(1);
  transform-origin: center center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* 「枠が10px大きくなる」拡大率。実寸から算出した値をJSが --pcar-scale に入れる */
.pcar { --pcar-scale: 1.0206; }

.pcar__item > a:hover .pcar__thumb { transform: scale(var(--pcar-scale)); }

.pcar__item > a:hover { position: relative; z-index: 2; }

.pcar__cat {
  display: block;
  font-family: var(--bd-mincho);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .06em;
  color: #939393;
  margin: 14px 0 0;   /* 画像とカテゴリー名の間隔 */
}

.pcar__name {
  display: block;
  font-family: var(--bd-mincho);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: #151515;
  margin: 5px 0 0;    /* カテゴリー名と商品名の間隔 */
  font-feature-settings: "palt";
}

/* --- 操作エリア（スクロールバー＋矢印） --- */
.pcar__ctrl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 44px;
}

.pcar__bar {
  position: relative;
  width: 478px;
  height: 14px;
  cursor: pointer;
  -ms-touch-action: none;
      touch-action: none;
}

.pcar__bar::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #d5d5d5;
}

.pcar__thumb-bar {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--bd-ink);
}

.pcar__arrows {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 44px;
}

.pcar__arrow {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  color: #151515;
  transition: opacity .25s;
  -webkit-appearance: none;
          appearance: none;
}

.pcar__arrow:disabled { opacity: .25; cursor: default; }

.pcar__arrow:hover:not(:disabled) { opacity: .55; }

.pcar__arrow::before,
.pcar__arrow::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.pcar__arrow::before {
  top: 50%;
  left: 2px;
  width: 26px;
  height: 1px;
}

.pcar__arrow::after {
  top: 50%;
  width: 9px;
  height: 1px;
}

.pcar__arrow--prev::after {
  left: 2px;
  transform-origin: left center;
  transform: rotate(-38deg);
}

.pcar__arrow--next::after {
  right: 2px;
  transform-origin: right center;
  transform: rotate(38deg);
}

.pcar__divider {
  width: 1px;
  height: 16px;
  background: #c9c9c9;
  margin: 0 14px;
}

/* ---------------------------------------------------------
   Service（完成像に合わせて黒背景に）
   --------------------------------------------------------- */
#service {
  background: #111111;
  /* 上：公開サイトの #service margin-top 実測 75px
     下：ご指示の「上＋5px」ルールに合わせて 80px */
  padding: 75px 0 80px;
  margin: 0;
}

#service h2.eng,
#service .ttl,
#service .txt {
  color: #fff;
}

#service h2.eng {
  font-family: var(--bd-serif);
  font-size: 17.6px;
  letter-spacing: .12em;
}

#service .ttl {
  font-family: var(--bd-mincho);
}

#service .txt {
  font-family: var(--bd-mincho);
}

@media screen and (max-width: 859px) {
  #products { padding: 46px 0 54px; }

  #products .sec-ttl { font-size: 17px; margin-bottom: 30px; }

  .pcar__track { padding: 10px 20px; cursor: auto; }

  .pcar__item { width: 70%; }
  .pcar__item + .pcar__item { margin-left: 14px; }

  /* SPも枠ごと拡大（拡大率はJSが実寸から算出） */
  .pcar__item > a:active .pcar__thumb { transform: scale(var(--pcar-scale)); }

  .pcar__cat { font-size: 11px; margin-top: 14px; }
  .pcar__name { font-size: 14px; margin-top: 5px; }

  .pcar__ctrl { margin-top: 26px; }
  .pcar__bar { width: 66%; }
  .pcar__arrows { display: none; }
}

/* =========================================================
   ★B案｜Serviceセクションのホバー
     金色オーバーレイをやめ、カルーセルと同じ「枠が広がる」演出にする。
       通常時 : 枠は素のサイズ／画像だけ10px相当ぶん拡大
       ホバー時: 枠が広がり、画像は等倍に戻る（見た目の大きさは不変）
   ========================================================= */
@media screen and (min-width: 860px) {
  /* 枠 310px に対して +10px ＝ 320/310 */
  #service .col2_block { --svc-scale: 1.03226; }

  /* 従来の金色オーバーレイは出さない */
  #service .col2_block .col_box .img a.about-biyoudo-link::after,
  #service .col2_block .col_box .img a.customer-support-link::after {
    display: none;
  }

  #service .col2_block .col_box .img {
    overflow: visible;
  }

  #service .col2_block .col_box .img > a {
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: transform .45s cubic-bezier(.22, .61, .36, 1);
            transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  #service .col2_block .col_box .img > a img {
    -webkit-transform: scale(var(--svc-scale));
            transform: scale(var(--svc-scale));
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-transition: transform .45s cubic-bezier(.22, .61, .36, 1);
            transition: transform .45s cubic-bezier(.22, .61, .36, 1);
  }

  #service .col2_block .col_box .img > a:hover {
    -webkit-transform: scale(var(--svc-scale));
            transform: scale(var(--svc-scale));
    position: relative;
    z-index: 2;
  }

  #service .col2_block .col_box .img > a:hover img {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/* ドラッグできることが分かるよう、カーソルを十字にする（PCのみ） */
@media screen and (min-width: 860px) {
  .pcar__track,
  .pcar__track a,
  .pcar__track img { cursor: crosshair; }
}


/* =========================================================
   Products カテゴリータブ＋カルーセル寸法（完成像 pc_top.jpg 実測・2026-08-13）
     タブ   : 4つ×幅140px／間隔10.5px／全体590pxを中央に
              JP 13.2px 明朝 ／ EN 9.6px Libre Baskerville（字間.12em）／ ともに #151515
              下線1px：選択中 #151515 ／ それ以外 #EDEDED
     見出し「Products」インク下端 → タブJPインク上端 54.5px
     タブ下線 → 画像上端 61px
     カード : 画像400×400／間隔20px／左端から50px
              カテゴリー 11.2px #939393（画像下端から11px）
              商品名     13.6px #151515（カテゴリーから19px）
   商品数が少なくスクロール不要なときは、
   カードを中央に寄せてスクロールバーと矢印を隠す（JSが is-static を付ける）。
   ========================================================= */
.ptab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10.5px;
  margin: 50.9px auto 0;
  padding: 0 20px;
}

.ptab__btn {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  width: 140px;
  /* 押せる範囲を、文字の上端より14px上まで広げる（2026-09-08 依頼）
     上は0だったのでボタンの上端＝文字の上端だった。下の10.4pxはそのまま。
     ※ここに書くのは、global.css より top.css が後に読まれるため。
       global.css に padding-top だけ足しても、この一括指定に負ける。 */
  padding: 14px 0 10.4px;
  border: 0;
  border-bottom: 1px solid #ededed;
  background: none;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  -webkit-transition: border-color .3s, opacity .25s;
          transition: border-color .3s, opacity .25s;
}

.ptab__btn:hover { opacity: .55; }

.ptab__btn.is-active {
  border-bottom-color: #151515;
  opacity: 1;
  cursor: default;
}

.ptab__jp {
  display: block;
  font-family: var(--bd-mincho);
  font-size: 13.2px;
  line-height: 1;
  letter-spacing: .06em;
  color: #151515;
}

.ptab__en {
  display: block;
  font-family: var(--bd-serif);
  font-size: 9.6px;
  line-height: 1;
  letter-spacing: .12em;
  color: #151515;
  margin-top: 5.8px;
}

/* --- カルーセル本体を完成像の寸法に --- */
/* .pcar__track の上パディング10pxぶんを引いた実効値。
   2026-08-14：完成像でタブ下線→画像が61→40.5に詰まったため -20.5 */
.pcar { margin-top: 30.5px; }

.pcar__track { padding: 10px 50px; }

.pcar__item { width: 400px; }

.pcar__item + .pcar__item { margin-left: 20px; }

/* 隠しているカードは「隣り合っている」判定から外す */
.pcar__item[hidden] { display: none; }

.pcar__item[hidden] + .pcar__item { margin-left: 0; }

/* カテゴリー名は上部のタブに集約したため非表示（マークアップからも削除済み） */
.pcar__cat { display: none; }

.pcar__name {
  font-size: 13.6px;
  line-height: 1.5;
  /* 画像下端から商品名のインク上端まで11px（従来カテゴリー名があった位置） */
  margin-top: 7.5px;
}

/* 2026-08-14：完成像で商品名→スクロールバーが約20px詰まった */
.pcar__ctrl { margin-top: 28px; }

/* スクロールできるだけの枚数がないとき */
.pcar.is-static .pcar__track {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: auto;
  overflow-x: hidden;
}

.pcar.is-static .pcar__ctrl { display: none; }

@media screen and (max-width: 859px) {
  .ptab {
    gap: 0;
    margin-top: 40px;
    padding: 0 20px;
  }

  .ptab__btn {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0%;
            flex: 1 1 0%;
    width: auto;
    min-width: 0;
    padding-bottom: 10px;
  }

  .ptab__jp { font-size: 12px; }
  .ptab__en { font-size: 8.6px; margin-top: 7px; }

  .pcar { margin-top: 40px; }
  .pcar__track { padding: 10px 20px; }
  .pcar__item { width: 70%; }
  .pcar__item + .pcar__item { margin-left: 14px; }
  .pcar__item[hidden] + .pcar__item { margin-left: 0; }
  .pcar__cat { font-size: 11px; }
  .pcar__name { font-size: 13px; }
  .pcar__ctrl { margin-top: 32px; }
}


/* =========================================================
   TOP Service（PC）／完成像 pc_top.jpg 実測・2026-08-13
     セクション上端 → 見出しインク上端 : 103px（＝padding-top 96.5）
     見出しインク下端 → 画像上端        : 55px
     画像                              : 310×180px／間隔80.5px（変更なし）
     画像下端 → タイトルインク上端       : 27px
     タイトルインク下端 → 本文インク上端  : 17.5px
     本文最終行インク下端 → ボタン枠      : 27.5px
     ボタン                            : 181×51px（枠1px #999999・塗りなし）
     ボタン枠下端 → セクション下端       : 100px
   ボタンは白塗り→枠線のみに変更。文字と矢印は白。
   ========================================================= */
@media screen and (min-width: 860px) {
  #service { padding: 96.5px 0 100px; }

  #service .col2_block .col_box .ttl { margin-top: 19.5px; }

  #service .col2_block .col_box .txt { margin-top: 5.5px; }

  #service .col2_block .col_box .btn { margin-top: 23px; }

  #service .col2_block .col_box .btn a {
    width: 181px;
    height: 51px;
    border: 1px solid #999999;
    background: transparent;
    color: #ffffff;
  }

  #service .col2_block .col_box .btn a::after {
    background-image: url("/resources/images/common/icon/icon_arrow-white.svg");
  }
}


/* =========================================================
   TOP Products 見出しの上（完成像 pc_top.jpg 実測・2026-08-13）
   FVの下端（600px）から「Products」のインク上端まで98.5px。
   ヘッダー下130pxのために #contents を 200px にしたが、TOPは
   ヘッダーの下にFVが入るので対象外。公開サイトと同じ余白に戻す。
   ========================================================= */
@media screen and (min-width: 860px) {
  main#contents:has(#products) { padding-top: 18.5px; }
}


/* =========================================================
   TOP（SP）／完成像 sp_top.jpg 実測・2026-08-14
   ── Products ──
     セクション上端 → 見出しインク : 56px
     見出しインク下端 → タブJP     : 44.5px
     タブJP → タブEN（インク上端間）: 19.5px
     タブEN下端 → 下線             : 15.5px
     タブ                          : 幅80px ／ 間隔4.5px ／ 左端21.5px
     下線 → カード画像             : 31px
     カード                        : 275 × 275px ／ 間隔10.5px ／ 左端20.5px
     画像下端 → 商品名インク        : 11px
     商品名インク下端 → スクロールバー: 44px（バー幅238px）
   ── Service ──
     セクション上端 → 見出しインク  : 57.5px
     見出しインク下端 → 画像        : 45px
     画像                          : 232 × 135px（1列・中央）
     画像下端 → タイトルインク      : 27px
     タイトルインク下端 → 本文      : 17.5px
     本文下端 → ボタン             : 30.5px
     ボタン                        : 233 × 51px（枠線1px #999999）
     ボタン下端 → 次の画像          : 60px
     最後のボタン → セクション下端   : 60px
   ========================================================= */
@media screen and (max-width: 859px) {

  /* ---------- Products ---------- */
  #products .sec-ttl { margin-top: 8px; }

  .ptab {
    gap: 4.5px;
    padding: 0 21.5px;
    margin-top: 41px;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .ptab__btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 80px;
            flex: 0 0 80px;
    width: 80px;
    padding-bottom: 13.9px;
  }

  .ptab__en { margin-top: 6.9px; }

  .pcar { margin-top: 21px; }

  .pcar__track { padding: 10px 20.5px; }

  .pcar__item { width: 275px; }

  .pcar__item + .pcar__item { margin-left: 10.5px; }

  .pcar__item[hidden] + .pcar__item { margin-left: 0; }

  .pcar__name { margin-top: 6px; }

  .pcar__ctrl { margin-top: 22px; }

  .pcar__bar { width: 238px; }

  /* ---------- Service ---------- */
  #service { padding: 51.5px 0 60px; }

  /* 見出し → 画像 45px */
  #service .col2_block { margin-top: 38.5px; }

  #service .col2_block .col_box .img { text-align: center; }

  #service .col2_block .col_box .img img,
  #service .col2_block .col_box .img a {
    width: 232px;
    height: 135px;
    object-fit: cover;
    display: inline-block;
  }

  #service .col2_block .col_box .ttl { margin-top: 13.5px; }

  #service .col2_block .col_box .txt { margin-top: 5.5px; }

  #service .col2_block .col_box .btn { margin-top: 26px; }

  #service .col2_block .col_box .btn a,
  #service .col2_block .col_box .btn a:last-child {
    width: 233px;
    height: 51px;
    max-width: none;
    margin: 0 auto;
    border: 1px solid #999999;
    background: transparent;
    color: #ffffff;
  }

  #service .col2_block .col_box .btn a::after {
    background-image: url("/resources/images/common/icon/icon_arrow-white.svg");
  }

  /* 2つ目のブロックの上を60pxに */
  #service .col2_block .col_box:not(:first-child) { margin-top: 60px; margin-left: 0; }
}


/* =========================================================
   B案：FVを画面いっぱいにする（試験実装・2026-08-14）
   svh＝ブラウザのアドレスバーが出ている状態の高さ。
   これを使うと、スマホでFVの下が隠れることがない。
   （dvh はスクロール中にアドレスバーが消えるたびに高さが変わり、
     画面がガタつくため採用していない）
   未対応の古いブラウザには 100vh が使われる。
   ※デザイン確定後に、文字位置やページャーの位置を調整すること。
   ========================================================= */
/* .mainSlider_outer はFVの外枠（600px固定・overflow:hidden）。
   ここも一緒に伸ばさないとFVが600pxで切られる */
.mainSlider_outer,
.mv {
  height: 100vh;    /* 未対応ブラウザ用のフォールバック */
  height: 100svh;
}

@media screen and (max-width: 859px) {
  .mainSlider_outer,
  .mv {
    height: 100vh;
    height: 100svh;
  }
}


/* =========================================================
   TOPのセクションタイトルも17.6pxに揃える（2026-08-14）
   top.css は global.css より後に読み込まれるため、ここで指定する
   ========================================================= */
#products .sec-ttl,
#service h2.eng { font-size: 17.6px; }

@media screen and (max-width: 859px) {
  #products .sec-ttl,
  #service h2.eng { font-size: 17.6px; }
}


/* TOPのセクションタイトルも同じ字間（.12em）で揃える */
#products .sec-ttl,
#service h2.eng { letter-spacing: .12em; }


/* =========================================================
   カルーセルのスクロールバー（2026-08-18）
   下敷きの細い線を #151515 の不透明度10%に。
   top.css が global.css より後に読み込まれるので、そちらに書く。
   ========================================================= */
.pcar__bar::before { background: rgba(21, 21, 21, .1); }


/* =========================================================
   カルーセルのカーソル（2026-08-20）
   十字（crosshair）から人差し指（pointer）に変更。
   参考：https://www.haagen-dazs.co.jp/products/pint/green-tea.html
   ドラッグ中も人差し指のまま（途中でアイコンが変わらないように）。
   ========================================================= */
/* 2026-09-08 追記：リンク（a）と、その中の文字・カテゴリ名も pointer にする。
   前回 .pcar__track a を入れ忘れており、商品名の上だけ十字のままだった。
   いまは商品数が少なく横スクロールしないので、ドラッグを示す十字は使わない。 */
.pcar__track,
.pcar__track a,
.pcar__track img,
.pcar__track .pcar__thumb,
.pcar__track .pcar__cat,
.pcar__track .pcar__name,
.pcar__wrap,
.pcar__track.is-dragging,
#product .pcar--oprod .pcar__track,
#product .pcar--oprod .pcar__track a,
#product .pcar--oprod .pcar__track img { cursor: pointer; }


/* =========================================================
   カルーセルのタブ：選ばれていないときの色（2026-08-20）
     タブ名 … 通常のテキスト色（#151515）の不透明度60%
     罫線   … 同じく不透明度10%
   選ばれているタブは従来どおり #151515。
   ========================================================= */
.ptab__btn {
  border-bottom-color: rgba(21, 21, 21, .1);
  color: rgba(21, 21, 21, .6);
}

.ptab__btn .ptab__jp,
.ptab__btn .ptab__en { color: inherit; }

.ptab__btn.is-active {
  border-bottom-color: #151515;
  color: #151515;
}


/* =========================================================
   SP：カルーセルの画像の上でも横スワイプできるようにする（2026-08-20）
   画像は既定でドラッグ（長押しで画像を掴む／プレビュー）の対象になり、
   その挙動がスワイプを食っていた。画像側のドラッグと長押しメニューを止め、
   トラックには縦横のパンを扱うことを明示する。
   ========================================================= */
@media screen and (max-width: 859px) {
  .pcar__track {
    -ms-touch-action: pan-x pan-y;
        touch-action: pan-x pan-y;
  }

  .pcar__track a,
  .pcar__track img {
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

  /* 触っている間に拡大すると、指の動きがスクロールに渡らないことがある */
  .pcar__item > a:active .pcar__thumb {
    -webkit-transform: none;
            transform: none;
  }
}


/* =========================================================
   SP：カルーセルのタブを左右中央に（2026-08-20）
   PCで中央にそろえている要素は、SPでも中央にする。
   ========================================================= */
@media screen and (max-width: 859px) {
  .ptab {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}


/* =========================================================
   SP：FVの画像は上を基準に伸縮させる（2026-08-20）
   .mv__bg img が center center を持っているので、
   後から読まれるこちら（top.css）で上基準に上書きする。
   ========================================================= */
@media screen and (max-width: 859px) {
  .mv__bg img,
  .mv__slide img {
    -o-object-position: center top;
       object-position: center top;
  }
}


/* =========================================================
   B案｜FV（完成像 pc_top_fv-0*_B.jpg / sp_top_fv-0*_B.jpg 実測・2026-08-21）
     テキストは左 x200 から。英字2行 → 日本語 → 短い罫線 → 本文2行
       英字   : 68px / 行送り62.5px（インク高45px）
       日本語 : 20px（インク高19.5px）。英字の2行目から16px下
       罫線   : 幅60px。日本語から34.5px下
       本文   : 12px / 行送り24px
     SCROLL : 中央下に縦書き
     背景が明るい写真（01・02）は文字を黒、暗い写真（03）は白にする。
   ========================================================= */
.mv__text {
  left: 200px;
  bottom: auto;
  top: 213px;
  max-width: 46%;
  color: #ffffff;
}

.mv__ttl {
  font-family: var(--bd-serif, "Times New Roman", serif);
  font-size: 63.5px;
  line-height: 62.5px;
  letter-spacing: .02em;
  -webkit-filter: none;
          filter: none;
}

.mv__sub {
  font-size: 20px;
  line-height: 1;
  letter-spacing: .06em;
  margin: 6.5px 0 0;
  text-align: left;
}

/* 本文の上の短い罫線 */
.mv__lead {
  position: relative;
  margin: 26px 0 0;
  font-size: 11px;
  line-height: 24px;
  letter-spacing: .04em;
  -webkit-filter: none;
          filter: none;
}


/* 明るい写真のスライドは文字を黒に */
.mv__slide[data-tone="light"] .mv__text { color: #151515; }

/* --- SCROLL（中央下・縦書き） --- */
.mv__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin: 0;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  font-family: var(--bd-serif, "Times New Roman", serif);
  font-size: 10px;
  letter-spacing: .2em;
  color: #ffffff;
  pointer-events: none;
}

.mv__slide[data-active="true"][data-tone="light"] ~ .mv__scroll { color: #151515; }

@media screen and (max-width: 859px) {
  .mv__text {
    left: 5.33%;
    top: auto;
    bottom: 96px;
    max-width: 84%;
  }
  .mv__ttl { font-size: 40px; line-height: 44px; }
  .mv__sub { font-size: 14px; margin-top: 12px; }
  .mv__lead { margin-top: 40px; font-size: 11px; line-height: 20px; }
  .mv__scroll { font-size: 9px; }
}



.mv__scroll {
  padding-bottom: 60px;
}

.mv__scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 1px;
  height: 50px;
  margin-left: -0.5px;
  background: currentColor;
}

/* ここで無条件に黒にしていたため、3枚目の暗い写真でも SCROLL の文字と罫線だけ
   黒のまま残っていた。既定は白（上の .mv__scroll）に任せ、明るい写真のときだけ
   黒にする（下の :has() の指定）。罫線は background-color: currentColor なので
   文字色を変えれば一緒に変わる。（2026-08-25 修正） */

.mv__scroll { -webkit-transform: translateX(-50%); transform: translateX(-50%); }

.mv__scroll {
    left: auto; right: 30px;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }

@media screen and (max-width: 859px) {
  .mv__scroll {
    /* 完成像 2026-08-25：罫線の中心が右端から25px */
    left: auto; right: 25px;
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
}

.mv:has(.mv__slide[data-active="true"][data-tone="light"]) .mv__scroll { color: #151515; }
/* =========================================================
   SPのTOPカルーセル：タブを変えても下端が動かないようにする（2026-08-21）
   高さが変わっていた原因は2つ。
     ・商品名が1行のタブと2行のタブがある（19.5px差）
     ・商品が1件のタブは操作部（スクロールバー）が消える（36px差）
   いちばん高い状態（商品名2行＋操作部あり）で場所を先に取っておく。
   商品名は2行で打ち切って「…」にする。
   ========================================================= */
@media screen and (max-width: 859px) {
  .pcar__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 39px;            /* 19.5px（1行）× 2行 */
  }

  /* 横スクロールしないタブでも、操作部のぶんの高さは残す */
  .pcar.is-static .pcar__ctrl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    visibility: hidden;
  }
}


/* =========================================================
   B案FV｜テキスト（完成像 pc_top_fv-01_B.jpg / sp_top_fv-01_B.jpg 実測・2026-08-25）

   並びが「英字 → 日本語 → 本文 → ボタン」に変わった（英字が上・太字）。
   書体は Inter。文字は実サイトの中にプローブを差し込み、完成像の
   インクの幅と高さの両方が合う組み合わせを総当たりで出した。

     PC  英字 Bold 61px（字間.09em）／ 日本語 Light 17.6px ／ 本文 Light 13.6px
     SP  英字 Bold 34.2px（字間.07em）／ 日本語 Light 15.4px ／ 本文 Light 11.8px

   完成像はFVが600px、実装は全画面。上端基準だと文字が上に取り残されるので
   「下端からの距離」で置く。
   ========================================================= */
.mv .mv__text {
  top: auto;
  left: 222px;
  bottom: 168px;
}

.mv .mv__ttl {
  font-size: 61px;
  /* 字間0。完成像の文字間の空き（中央値6.0px）と、Inter Bold 61px・字間0 の
     空き（6.0px）が一致する。幅は完成像より37.5px狭いが、これは書体そのものの
     差（完成像の書体は Inter より幅広）で、字間では埋めない。 */
  letter-spacing: 0;
  line-height: 1;
  margin: 0;
  /* 長い商品名は折り返させる。指定しないと「BOTANICAL ENZYME」が
     右端852pxまで伸び、写真のボトルに重なる（実測）。 */
  max-width: 560px;
}

.mv .mv__sub {
  font-size: 17.6px;
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  margin: 7px 0 0;   /* 2026-08-25：英字とのあきを6px詰めた（13→7px） */
}

.mv .mv__lead {
  font-size: 14.4px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 24.5px;
  margin: 16px 0 0;
  padding: 0;
  /* PCは句読点のあとで改行する（.mv__wrap を block にして行を割る）。
     幅で折り返させると位置が原稿ごとに変わるので、幅の制限は外す。 */
  max-width: none;
}

/* PC：ここで行を割る。中身が空の要素を block にすると、その前後で行が分かれる。
   <br> を使わないのは、行を包むJSが <br> で分割してしまい、
   SPの「箱組み（幅で折り返す）」ができなくなるため。 */
.mv .mv__lead .mv__wrap { display: block; }

/* 太さは「文字を実際に描いている要素」に当てる。
   下から出す演出で中身が <span class="mv__line"><i> に包まれるので、
   .mv__ttl だけに書くと、中の <i> が body * { font-weight:300 !important } のまま細くなる。 */
.mv .mv__ttl,
.mv .mv__ttl .mv__line,
.mv .mv__ttl .mv__line > i { font-weight: 700 !important; }

/* 英字商品名の改行マーカー（PC・SP共通。2026-09-07） */
.mv .mv__ttl .mv__wrap { display: block; }

/* 「詳しく見る →」。枠も矢印も currentColor なので、
   スライドの明暗で文字色が変わればそのまま追従する */
.mv .mv__btn { margin: 22px 0 0; }

.mv .mv__btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 完成像の実測（pc_top_fv-01_B.jpg）
       枠 119.0 × 36.5 ／ 文字のインク幅 64.5・高さ11.5 ／ 矢印のインク 10.5 × 9.0
       左の余白 19.0 ／ 文字と矢印のあいだ 10.0 ／ 右の余白 15.0 */
  gap: 6px;
  padding-left: 3px;   /* 中身をわずかに右へ。左19.0／右15.0 にそろえる */
  width: 119px;
  height: 36.5px;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
  text-decoration: none;
  -webkit-transition: opacity .3s ease;
          transition: opacity .3s ease;
}

.mv .mv__btn a:hover { opacity: .55; }

.mv .mv__btn a::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask: url("/resources/images/common/icon/icon_arrow-black.svg") no-repeat center / contain;
          mask: url("/resources/images/common/icon/icon_arrow-black.svg") no-repeat center / contain;
}

/* インジケーターの位置は「FVのインジケーター」のブロックで指定している
   （このブロックより後ろにあるため、ここに書いても勝てない） */

@media screen and (max-width: 859px) {
  /* 英字を1行に収める。太字＋字間で送り幅が330.8px要る（既定の84%＝315pxでは折り返す） */
  .mv .mv__text { left: 21px; bottom: 26.5px; max-width: 92%; }

  .mv .mv__ttl  { font-size: 34.2px; letter-spacing: 0; }
  .mv .mv__sub  { font-size: 15.4px; letter-spacing: .02em; margin-top: 9.5px; }
  /* SPは箱組み。改行マーカーを消して、テキストエリアいっぱいで折り返させる */
  .mv .mv__lead { font-size: 12.4px; letter-spacing: .03em; line-height: 20px; margin-top: 19px; max-width: 287px; }
  .mv .mv__lead .mv__wrap { display: none; }
  .mv .mv__lead .mv__line > i { line-height: 20px; }

  /* SPはボタンとインジケーターが横に並ぶ */
  .mv .mv__btn { margin-top: 23.5px; }
  .mv .mv__btn a { width: 119px; height: 51px; font-size: 13px; gap: 4px; padding-left: 6px; }
}
/* =========================================================
   B案FV｜テキストを下から出す（2026-08-21）
   参考：https://www.positive.co.jp/ のFV
     ・行を枠で隠し、中身を下から持ち上げる
     ・行ごとに0.09秒ずつ遅らせる
     ・スライドが切り替わるたびに走る（data-active が引き金）
   枠は clip-path で作る。overflow:hidden＋padding/margin で余裕を作ると、
   負のマージンが隣の行と相殺して行間が広がってしまう（実測で17px増えた）。
   clip-path なら箱の大きさを変えずに、切る位置だけ動かせる。
     上 -25% : 見出しは行の高さ（62.5px）より文字（63.5px）が大きく、
               上にはみ出すぶんを切らないようにする
     下  -6% : 日本語の下に出るぶんの逃げ
   下に逃げを作ったぶん、隠すときの移動量を多めにとる（160%）。
   ========================================================= */
.mv__line {
  display: block;
  -webkit-clip-path: inset(-25% -2% -6% -2%);
          clip-path: inset(-25% -2% -6% -2%);
}

.mv__line > i {
  display: block;
  font-style: normal;
  -webkit-transform: translateY(160%);
          transform: translateY(160%);
  -webkit-transition: -webkit-transform .9s cubic-bezier(.165, .84, .44, 1);
          transition: transform .9s cubic-bezier(.165, .84, .44, 1);
}

html.is-mv-ready .mv__slide[data-active="true"] .mv__line > i {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: calc(var(--i, 0) * .09s);
          transition-delay: calc(var(--i, 0) * .09s);
}

/* 表に出ていないスライドは、戻る動きを見せない */
.mv__slide:not([data-active="true"]) .mv__line > i {
  -webkit-transition: none;
          transition: none;
}


/* =========================================================
   FVのインジケーター（完成像 pc_top_fv-0*_B.jpg / sp_top_fv-0*_B.jpg 実測・2026-08-21）
     停止/再生ボタン 11×11 → あき13.5px → 丸3つ（21.5×21.5・中心の間隔25px）
     選ばれている丸 : 外にリング（径20.5・線1px）＋中心の塗り7.5px
                      リングが5秒かけて一周し、一周すると次の画像に変わる
     選ばれていない丸: 中心の塗り7.5pxだけ（薄い）
   停止ボタンを押すと、切り替えもリングの進み方もその場で止まる。
   ========================================================= */
.mv .mv__pager {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  z-index: 3;
  left: 229.5px;    /* 完成像 2026-08-25：ボタンの下に左ぞろえ */
  bottom: 105px;
  top: auto;
}

/* 明るい写真のときは黒 */
.mv:has(.mv__slide[data-active="true"][data-tone="light"]) .mv__pager { color: #151515; }

/* ---- 停止／再生ボタン ---- */
.mv .mv__toggle {
  position: relative;
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  margin: 0 13.5px 0 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* アイコンは currentColor で塗る（写真の明暗で白黒が変わる） */
.mv .mv__toggle::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: currentColor;
  -webkit-mask: url("/resources/images/common/icon/icon_stop.svg") no-repeat center / contain;
          mask: url("/resources/images/common/icon/icon_stop.svg") no-repeat center / contain;
}

.mv.is-paused .mv__toggle::before {
  -webkit-mask-image: url("/resources/images/common/icon/icon_play.svg");
          mask-image: url("/resources/images/common/icon/icon_play.svg");
}

/* 押せる範囲を広げる（見た目の大きさは変えない） */
.mv .mv__toggle::after {
  content: "";
  position: absolute;
  left: -9px; right: -9px; top: -15px; bottom: -15px;
}

/* ---- 丸 ---- */
.mv .mv__dot {
  position: relative;
  width: 21.5px;
  height: 21.5px;
  padding: 0;
  border: 0;
  margin: 0;
  background: none;
  color: inherit;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

.mv .mv__dot + .mv__dot { margin-left: 3.5px; }   /* 21.5 + 3.5 = 中心の間隔25px */

/* 中心の塗り */
.mv .mv__dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.5px;
  height: 7.5px;
  margin: -3.75px 0 0 -3.75px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
}

.mv .mv__dot[aria-current="true"]::before { opacity: 1; }

/* 押せる範囲を上下に広げる */
.mv .mv__dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -15px; bottom: -15px;
}

/* ---- 進み方を表すリング ---- */
.mv .mv__ring {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-transform: rotate(-90deg);   /* 12時から時計回りに始める */
          transform: rotate(-90deg);
}

.mv .mv__ring circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 64.4;              /* 円周 2π×10.25 */
  stroke-dashoffset: 64.4;
  opacity: 0;
}

.mv .mv__dot[aria-current="true"] .mv__ring circle {
  opacity: 1;
  -webkit-animation: mvRing 5s linear forwards;
          animation: mvRing 5s linear forwards;   /* 5s＝切り替えの間隔と同じ */
}

/* ローディングが終わるまでリングを止める（2026-09-08）
   リングは CSS だけで動いており、aria-current は HTML の初期状態で1枚目に付いている。
   そのため CSS が読まれた瞬間に回りはじめ、ローディングが明けたときには
   すでに31%進んでいた（実測：ローダーが消えるのが約1.8秒後）。
   FVが見えたところで0から始まるように、is-loading のあいだは止めておく。 */
html.is-loading .mv .mv__dot[aria-current="true"] .mv__ring circle {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

/* 止めているあいだはリングもその場で止める */
.mv.is-paused .mv__dot[aria-current="true"] .mv__ring circle {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes mvRing { from { stroke-dashoffset: 64.4 } to { stroke-dashoffset: 0 } }
@keyframes mvRing { from { stroke-dashoffset: 64.4 } to { stroke-dashoffset: 0 } }

@media screen and (max-width: 859px) {
  /* SPはボタンの右に、ボタンと縦中央をそろえて並ぶ（完成像 2026-08-25） */
  .mv .mv__pager { left: 205.5px; bottom: 41.25px; }
}


/* =========================================================
   スクロールの慣性で、地の色がのぞかないようにする（2026-08-21）
   参考：https://luma-pet.com/about/
   スマホで勢いよくスクロールすると画面の端が跳ねる（オーバースクロール）。
   このとき FV の下の地（#000）が一瞬のぞいてしまう。
   写真は動かさず、地の色を写真の上端の色にそろえる。
   写真がわずかにずれても、色が同じなので切れ目に見えない。
   （跳ねるのは主に上なので、上端の色に合わせる）
     1枚目 水       PC #dadfe3 / SP #c5cbce
     2枚目 スムージー PC #cdcdcd / SP #b2b2b2
     3枚目 酵素      PC #234c09 / SP #193b05
   ※ 背景を上下に伸ばす方法も試したが、object-fit:cover の効き方が変わって
     写真の写り方がずれるため採用しない。
   ========================================================= */
.mv,
.mainSlider_outer {
  background-color: #dadfe3;
  -webkit-transition: background-color .6s ease;
          transition: background-color .6s ease;
}

/* 画像がずれたときに見える下地も、同じ色にしておく */
.mv__slide:nth-child(1) .mv__bg { background-color: #dadfe3; }
.mv__slide:nth-child(2) .mv__bg { background-color: #cdcdcd; }
.mv__slide:nth-child(3) .mv__bg { background-color: #234c09; }

.mv:has(.mv__slide:nth-child(2)[data-active="true"]),
body:has(.mv__slide:nth-child(2)[data-active="true"]) .mainSlider_outer { background-color: #cdcdcd; }

.mv:has(.mv__slide:nth-child(3)[data-active="true"]),
body:has(.mv__slide:nth-child(3)[data-active="true"]) .mainSlider_outer { background-color: #234c09; }

@media screen and (max-width: 859px) {
  .mv,
  .mainSlider_outer { background-color: #c5cbce; }

  .mv__slide:nth-child(1) .mv__bg { background-color: #c5cbce; }
  .mv__slide:nth-child(2) .mv__bg { background-color: #b2b2b2; }
  .mv__slide:nth-child(3) .mv__bg { background-color: #193b05; }

  .mv:has(.mv__slide:nth-child(2)[data-active="true"]),
  body:has(.mv__slide:nth-child(2)[data-active="true"]) .mainSlider_outer { background-color: #b2b2b2; }

  .mv:has(.mv__slide:nth-child(3)[data-active="true"]),
  body:has(.mv__slide:nth-child(3)[data-active="true"]) .mainSlider_outer { background-color: #193b05; }
}


/* =========================================================
   上端の色帯を、FVのスライドに合わせる（2026-08-22）

   global.css の html::before（画面に固定した色帯）の色を、
   いま表示しているスライドの写真の上端色に合わせる。
   上に引っ張っても、写真の上に同じ色が続くので切れ目に見えない。
   色は「スクロールの慣性で〜」のブロックと同じ実測値。
   ========================================================= */
html:has(.mv__slide:nth-child(1)[data-active="true"]) { --page-top-bg: #dadfe3; }
html:has(.mv__slide:nth-child(2)[data-active="true"]) { --page-top-bg: #cdcdcd; }
html:has(.mv__slide:nth-child(3)[data-active="true"]) { --page-top-bg: #234c09; }

@media screen and (max-width: 859px) {
  html:has(.mv__slide:nth-child(1)[data-active="true"]) { --page-top-bg: #c5cbce; }
  html:has(.mv__slide:nth-child(2)[data-active="true"]) { --page-top-bg: #b2b2b2; }
  html:has(.mv__slide:nth-child(3)[data-active="true"]) { --page-top-bg: #193b05; }
}


/* =========================================================
   B案FV｜SCROLLを画面の中央下に置く（完成像 pc_top_fv-01_B.jpg 実測・2026-08-25）

   PCは 右端の縦書き → 中央下の横書き＋下に伸びる縦罫線 に変わった。
   完成像の実測（CSS値・FVが600pxのとき）
     文字   y517.5〜525.0 ／ x698.5〜741.0 ／ 中心x 719.8（画面中央720）
     縦罫線 y535.5〜画面下端 ／ x719.5〜720.5（幅1px・中心720.0）
     文字の下端から罫線の上端まで 10.5px

   left:50% は箱の左端を中央に置くだけなので、幅の半分を translateX で戻す（4.11）。
   SPは従来どおり右端の縦書き。
   ========================================================= */
@media screen and (min-width: 860px) {
  .mv .mv__scroll {
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    width: auto;
    height: auto;
    padding: 0 0 75px;   /* 文字の下端から画面下端まで（罫線10.5＋罫線64.5） */
    font-size: 10px;
    letter-spacing: .12em;
    text-indent: .12em;  /* 末尾の字間ぶん、中心を戻す */
    line-height: 1;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }

  .mv .mv__scroll::after {
    content: "";
    position: absolute;
    left: 50%;
    right: auto;
    top: auto;
    bottom: 0;
    width: 1px;
    height: 64.5px;
    margin-left: -.5px;
    background-color: currentColor;
  }
}


/* =========================================================
   セクションタイトルの英文（2026-08-25／TOP）
   太さは global.css の --sec-ttl-weight で決めている（戻すときはそちらを変える）
   ========================================================= */
body h2.eng,
body .sec-ttl,
#service h2.eng {
  font-weight: var(--sec-ttl-weight) !important;
  letter-spacing: 0 !important;
}


/* =========================================================
   クリックできる画像のホバー（2026-08-18 / B案にも 2026-08-25）
   拡大をやめて、少しだけ明るくする
   ========================================================= */
.pcar__item > a:hover .pcar__thumb,
.pcar__item > a:active .pcar__thumb {
  -webkit-transform: none;
          transform: none;
}

.pcar__thumb img,
.oprod__thumb img {
  -webkit-transition: -webkit-filter .35s var(--bd-ease);
          transition: filter .35s var(--bd-ease);
}

.pcar__item > a:hover .pcar__thumb img,
.oprod__item > a:hover .oprod__thumb img {
  -webkit-filter: brightness(1.06);
          filter: brightness(1.06);
}




/* =========================================================
   TOPカルーセルの文字（PC・2026-08-25）
     タブの日本語（.ptab__jp） : 14px
     商品名（.pcar__name）     : 12px
   太さの振り分け（global-menu.js の is-thin / is-ja）に負けないよう
   body を付けて !important で書く。英字（.ptab__en）は現状のまま。
   ========================================================= */
@media screen and (min-width: 860px) {
  body .ptab__jp { font-size: 14px !important; }
  body .pcar__name { font-size: 12px !important; }
}

/* ============================================================
   FV（2026-08-28・完成像 pc_top_fv-01_D）
   英字を2行組みの小さめに。容量表記を追加
   ============================================================ */
@media screen and (min-width: 860px) {
  /* 完成像17:17版：テキスト群を35px下へ（ボタン下端 496.5 → 600-496.5=103.5） */
  /* 左位置は「コンテンツ幅1000pxの左端」。画面幅が変わっても中央基準で追従する
     （旧: left: 222.5px の固定。1440pxでは 220.0px とほぼ同じ位置になる）        */
  /* コンテンツ幅1000pxの左端に置く。ただし画面が1000pxより狭いと
     calc(50% - 500px) が負になり、文字が画面の外へ出る（2026-09-07 実測）。
       幅737 → -131.5px ／ 幅800 → -100px ／ 幅900 → -50px
     max() で下限を19pxにする。19pxは他セクション（コンテンツ幅700px）の
     幅737での左端と同じ値。 */
  .mv .mv__text { left: max(19px, calc(50% - 500px)); bottom: 101.5px; }
  /* ボタンの高さも完成像に合わせる（帯 37.0 → 31.5） */
  .mv .mv__btn a { height: 31px; }

  /* 英字：26px・行送り28px（完成像のインク幅で確定） */
  .mv .mv__ttl,
  .mv .mv__ttl .mv__line,
  .mv .mv__ttl .mv__line > i {
    font-size: 26px !important;
    line-height: 28px !important;
    letter-spacing: 0 !important;
  }
  /* 改行位置は HTML の空マーカー <span class="mv__wrap"> で固定している
     （NATURAL / MINERAL WATER）。max-width は「各行が1行に収まるか」だけに効く。
     実測（PC 1440・26px/700）：NATURAL 119.4px ／ MINERAL WATER 208.9px。
     220px だと 2行目が入りきらず「MINERAL / WATER」と3行に割れていた（2026-09-07）。
     余裕を見て 260px にする。全体（335.5px）は入らないので2行のまま。 */
  .mv .mv__ttl { max-width: 260px; margin: 0; }

  /* 和文 */
  .mv .mv__sub { font-size: 11px !important; line-height: 1; margin: 7px 0 0; }

  /* 容量・内容量（新規） */
  .mv .mv__cap {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1;
    margin: 14px 0 0;
    color: inherit;
  }

  /* 本文 */
  .mv .mv__lead { margin: 22px 0 0; }

  /* ボタン */
  .mv .mv__btn { margin: 20px 0 0; }      /* 完成像：本文2行目下端438.5 → ボタン上端465.0 */

  /* インジケーター：完成像 y500.0-521.5（FV600pxなら下端から78.5px） */
  .mv .mv__pager { bottom: 58.5px; }      /* 完成像：y520.0（600-520-21.5≒58.5） */
}

/* SP：容量表記の体裁（レイアウトは既存のまま） */
@media screen and (max-width: 859px) {
  .mv .mv__cap { font-size: 11px !important; font-weight: 700 !important; line-height: 1; margin: 10px 0 0; }
}

/* ===== FVの文字（PC・2026-08-31） =====
   PC だけの指定。SP は従来のまま。

   文字は演出のため <span class="mv__line"><i>…</i></span> で包まれている。
   親（.mv__sub 等）に指定しても、中の <i> には body * { font-weight:300 !important }
   が当たっているので効かない。内側の <i> まで届かせる。

       日本語商品名 .mv__sub  … 11px/300  → 12px/700
       商品説明    .mv__lead … 14.4px    → 14px
       容量       .mv__cap  … 上のあき 14px → 12px（2px 詰める）
       ボタン      .mv__btn a … 13px      → 12px

   ■ 戻すときは、この ===== から次の ===== の手前までを削除する ■
   ============================================================ */
@media screen and (min-width: 860px) {

  /* 日本語商品名：12px・bold */
  .mv .mv__sub,
  .mv .mv__sub .mv__line,
  .mv .mv__sub .mv__line > i {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /* 容量：日本語商品名とのあきを 14px → 12px */
  .mv .mv__cap { margin-top: 12px; }

  /* 商品説明：14px */
  .mv .mv__lead,
  .mv .mv__lead .mv__line,
  .mv .mv__lead .mv__line > i {
    font-size: 14px !important;
  }

  /* 詳しく見る：12px（文字を持つのは中の <a>） */
  .mv .mv__btn a { font-size: 12px !important; }
}

/* ===== インジケーターの左位置をテキストにそろえる（2026-08-31） =====
   FVのテキスト群（.mv__text）は「コンテンツ幅1000pxの左端」に置いている。
   インジケーター（.mv__pager）は left: 229.5px の固定のままだったので、
   画面幅が変わるほどテキストとずれていた（1440px で 9.5px、1280px で 89.5px）。
   同じ式にそろえる。

   SP（736px以下）は従来どおり left: 205.5px。ここでは触らない。

   ■ 戻すときは、この ===== から次の ===== の手前までを削除する ■
   ============================================================ */
@media screen and (min-width: 860px) {
  .mv .mv__pager { left: max(19px, calc(50% - 500px)); }
}

/* ===== FVの英字：2・3枚目は折り返さない（2026-08-31） =====
   英字は .mv__ttl { max-width: 220px } で折り返させている。
   1枚目「NATURAL MINERAL WATER」は2行のまま。
   2・3枚目（BOTANICAL SMOOTHY / BOTANICAL ENZYME）は1行にする。

   1行にしたときの右端（PC1440）
       BOTANICAL SMOOTHY 513.0 / BOTANICAL ENZYME 488.7
     … 写真のボトルは 760px 以降なので重ならない（実測ずみ）。

   スライドの順番で指定する。1枚目以外＝2枚目以降。
   ■ 戻すときは、この ===== から次の ===== の手前までを削除する ■
   ============================================================ */
@media screen and (min-width: 860px) {
  .mv .mv__slide:not(:first-of-type) .mv__ttl { max-width: none; }
}

/* ===== SP FVの縦の送りを完成像にそろえる（2026-08-31） =====
   完成像 sp_top_fv-01.jpg のレイアウトに合わせる。**文言は現状のまま**。

   ★ 測り方をそろえるのが要点。
     完成像は画像なので「インクの上下端」しか測れない。
     実装を DOM の getClientRects で測ると**行ボックス（line-height 込み）**が返り、
     文字の実インクより上下に広い。この2つを突き合わせると、あきを実際より
     小さく見積もる。→ 実装も**要素ごとに切り出したスクリーンショットのインク**で測る。

   インク基準のあき（前の下端 → 次の上端・CSS px）
                    完成像    行ボックスで測った時   直した後
       英字→日本語      1.93        （6.59）        1.93
       日本語→容量     11.17       （15.30）       11.17
       容量→本文      24.00       （30.00）       24.00
       本文→ボタン     21.50       （27.00）       21.50

   ■ 戻すときは、この ===== から次の ===== の手前までを削除する ■
   ============================================================ */
@media screen and (max-width: 859px) {
  .mv .mv__sub  { margin-top: 1.94px; }    /* 6.6  − 4.66 */
  .mv .mv__cap  { margin-top: 10.77px; }   /* 14.9 − 4.13 */
  .mv .mv__lead { margin-top: 19px; }      /* 25.0 − 6.00 */
  .mv .mv__btn  { margin-top: 16px; }      /* 21.5 − 5.50 */
}

/* ===== SP FVの文字（完成像 sp_top_fv-01・2026-08-31） =====
   完成像に合わせて、SPだけ文字のサイズと太さを変える。

       英字      .mv__ttl  34.2px → 26px
       日本語     .mv__sub  weight 300 → 700（ボールド）
       商品説明    .mv__lead 12.4px → 12px
       ボタン     .mv__btn a 13px → 12px

   文字は演出のため <span class="mv__line"><i>…</i></span> に包まれている。
   親に指定しても中の <i> には body * { font-weight:300 !important } が当たるので、
   内側まで届かせる。

   ■ 戻すときは、この ===== から次の ===== の手前までを削除する ■
   ============================================================ */
@media screen and (max-width: 859px) {

  /* 英字：26px */
  .mv .mv__ttl,
  .mv .mv__ttl .mv__line,
  .mv .mv__ttl .mv__line > i {
    font-size: 26px !important;
    /* 行間はPCの比率にそろえる（2026-09-07）
       PC: font-size 26px / line-height 28px = 1.077
       SP: 26px × 1.077 = 28px */
    line-height: 28px !important;
  }

  /* 英字商品名の改行位置を PC と同じ「NATURAL / MINERAL WATER」にする（2026-09-07）
     幅で折り返させると SP は 287px なので「NATURAL MINERAL / WATER」になってしまう。
     中身が空の <span class="mv__wrap"> をブロックにして、そこで行を割る。
     <br> ではなく空要素にするのは、行を包む演出のJSが <br> を分割対象にするため。
     PC も同じ位置なので、この指定は画面幅を問わず効かせる。 */
  .mv .mv__ttl .mv__wrap { display: block; }

  /* 英字商品名の幅を本文（.mv__lead）と同じ 287px にそろえる（2026-09-07）
     これまで max-width:560px だったため、SPでは折り返さず1行で伸びていた。
     287px にすると実測で次のように分かれる：
       NATURAL MINERAL WATER  347.6px → 2行
       BOTANICAL SMOOTHY      293.0px → 2行
       BOTANICAL ENZYME       284.3px → 1行のまま（287に収まる） */
  .mv .mv__ttl { max-width: 287px; }
  .mv .mv__slide:not(:first-of-type) .mv__ttl { max-width: 287px; }

  /* 日本語商品名：ボールド */
  .mv .mv__sub,
  .mv .mv__sub .mv__line,
  .mv .mv__sub .mv__line > i {
    font-weight: 700 !important;
  }

  /* 商品説明：12px */
  .mv .mv__lead,
  .mv .mv__lead .mv__line,
  .mv .mv__lead .mv__line > i {
    font-size: 12px !important;
  }

  /* 詳しく見る：12px */
  .mv .mv__btn a { font-size: 12px !important; }
}

/* ===== 内容量も下から出す演出の対象に（2026-09-01） =====
   .mv__cap を JS の TARGETS に加えたので、中身が
   <span class="mv__line"><i>…</i></span> に包まれるようになった。

   包まれた <i> には body * { font-weight: 300 !important } が当たるため、
   親（.mv__cap）にだけ太さを書いていると **300 に戻ってしまう**。
   実際、対象に加えた直後は PC・SP とも 700 → 300 になっていた。
   サイズも同じ理由で届かせておく。

   ■ 演出をやめるときは global-menu.js の TARGETS から ".mv__cap" を外し、
     このブロックも削除する ■
   ============================================================ */
.mv .mv__cap,
.mv .mv__cap .mv__line,
.mv .mv__cap .mv__line > i { font-weight: 700 !important; }

@media screen and (min-width: 860px) {
  .mv .mv__cap,
  .mv .mv__cap .mv__line,
  .mv .mv__cap .mv__line > i { font-size: 12.5px !important; line-height: 1 !important; }
}

@media screen and (max-width: 859px) {
  .mv .mv__cap,
  .mv .mv__cap .mv__line,
  .mv .mv__cap .mv__line > i { font-size: 11px !important; line-height: 1 !important; }
}