/* トップのファーストビュー(水面の動画 → 商品画像)。クラス名はすべて mfv- で始める */
/* 何も指定がない状態 = 演出が終わった状態(JavaScriptが動かなくても、商品画像とコピーが見える) */
.mfv{position:relative;overflow:hidden;display:flex;align-items:center;
  height:calc(100vh - var(--mfv-offset,111px));height:calc(100svh - var(--mfv-offset,111px));
  min-height:560px;background:#efe3d3}
.mfv-media,.mfv-product,.mfv-product img,.mfv-video{position:absolute;inset:0;width:100%;height:100%}
.mfv-media{z-index:1;background:#efe3d3 center/cover no-repeat}
.mfv-video{object-fit:cover;display:block}
.mfv-product{z-index:2;display:block}
.mfv-product img{object-fit:cover;object-position:70% center}
/* コピーを読みやすくする、ごく淡いぼかし(商品画像と一緒に出る) */
.mfv-product::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(250,244,236,.72) 0%,rgba(250,244,236,.42) 34%,rgba(250,244,236,0) 58%)}
.mfv-logo{position:absolute;inset:0;z-index:3;display:grid;place-items:center;margin:0;opacity:0;visibility:hidden;pointer-events:none;
  font-family:var(--serif);font-size:clamp(46px,8vw,104px);letter-spacing:.14em;line-height:1;color:var(--ink);
  text-shadow:0 0 32px rgba(255,250,242,.75)}
.mfv-inner{position:relative;z-index:4;width:100%}
.mfv-copy{max-width:540px}
.mfv-copy h1{outline:none}
.mfv-copy .lead{font-size:16px}
.mfv-copy p:has(>.btn){margin-top:36px}
.mfv-cap{position:absolute;right:16px;bottom:8px;z-index:4;margin:0;font-size:11px;color:var(--sub)}
.mfv-skip{position:absolute;right:20px;bottom:28px;z-index:5;padding:8px 20px;border:1px solid rgba(62,58,57,.35);border-radius:9999px;
  background:rgba(255,255,255,.7);color:var(--ink);font:inherit;font-size:13px;letter-spacing:.08em;cursor:pointer}
.mfv-skip:hover{background:#fff}
.mfv-skip[hidden]{display:none}
.mfv-br-sp{display:none}
.mfv+.about{margin-top:0}

/* 演出の前(<head>のスクリプトが付けるクラス)。商品画像とコピーを隠し、水面の最初の画を見せる */
.mfv-intro .mfv-media{background-image:url(../img/fv-poster-pc.webp)}
.mfv-intro .mfv-product,.mfv-intro .mfv-item,
.mfv-revisit .mfv-product,.mfv-revisit .mfv-item{opacity:0;animation:mfv-safety .6s ease 12s forwards}
/* 万一 fv.js が読み込めなくても、12秒後には必ず表示する */
@keyframes mfv-safety{to{opacity:1}}

@media (max-width:760px){
  /* SP: 上の空いた壁をコピーの場所に使う。画面が短いときは、商品と重ならないよう縦に伸ばす */
  .mfv{align-items:flex-start;height:auto;
    min-height:max(calc(100vh - var(--mfv-offset,114px)),820px);min-height:max(calc(100svh - var(--mfv-offset,114px)),820px)}
  .mfv-product img{object-position:80% top}
  .mfv-video{object-position:center top}
  .mfv-product::after{background:linear-gradient(180deg,rgba(250,244,236,.7) 0%,rgba(250,244,236,.45) 28%,rgba(250,244,236,0) 42%)}
  .mfv-intro .mfv-media{background-image:url(../img/fv-poster-sp.webp);background-position:center top}
  .mfv-inner{padding-top:28px}
  .mfv-copy h1{font-size:clamp(23px,6.4vw,30px);margin-bottom:.5em}
  .mfv-copy .eyebrow{font-size:11px;margin-bottom:8px}
  .mfv-copy .lead{font-size:14px;line-height:1.75;margin-bottom:0}
  .mfv-copy p:has(>.btn){margin-top:18px}
  .mfv-copy .btn{padding:13px 32px;min-height:48px}
  .mfv-skip{bottom:20px;right:16px}
  .mfv-br-sp{display:inline}
}
@media (max-width:359px){
  /* 幅の狭いスマホ: 文章が1行増えるぶん、さらに縦に伸ばして商品と重ねない */
  .mfv{min-height:max(calc(100vh - var(--mfv-offset,114px)),860px);min-height:max(calc(100svh - var(--mfv-offset,114px)),860px)}
  .mfv-product img{object-position:88% top}
}
@media (prefers-reduced-motion:reduce){
  .mfv-skip{display:none}
}