/* 商品ページ ファーストビュー：二人の写真に差し替え（2026-09-29）。元に戻すときは product.html の hero-2people.css の行を削除し、ロゴ行と写真のsrcを戻す */
@media (min-width:901px){
  html [data-tone] .lp-hero, html body .lp-hero{height:auto !important;min-height:min(calc(100svh - 111px),880px) !important;
    background-color:#f6f5f2 !important;
    background-image:linear-gradient(180deg,rgba(243,244,246,0) 74%,rgba(243,244,246,.55) 87%,rgba(243,244,246,.92) 96%,#f3f4f6 100%),linear-gradient(90deg,rgba(255,253,252,.94) 0%,rgba(255,253,252,.84) 24%,rgba(255,253,252,.42) 36%,rgba(255,253,252,0) 46%),url("../images/hero-product-2people.jpg.jpg?v=2") !important;
    background-size:cover,cover,cover !important;background-position:center,center,68% 75% !important;background-repeat:no-repeat !important}
  html [data-tone] .lp-hero::before{display:none !important}
  html [data-tone] .lp-hero .lp-hero-content{max-width:none !important;margin:0 !important;padding-left:clamp(28px,4.6vw,76px) !important;padding-right:0 !important;padding-top:clamp(24px,3vw,44px) !important;justify-content:center !important;align-items:flex-start !important}
  html [data-tone] .lp-hero .lp-hero-content > *{max-width:min(470px,35vw) !important}
}
.lp-hero .hero-logo{margin:0 0 12px !important;line-height:1 !important}
.lp-hero .hero-logo ruby{ruby-position:over;font-family:"Cormorant Garamond","Times New Roman",Georgia,serif;font-weight:500;font-size:clamp(28px,2.6vw,40px);letter-spacing:.2em;color:#22306e}
.lp-hero .hero-logo rt{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-size:max(11px,.3em);letter-spacing:.42em;color:#22306e;font-weight:500;padding-bottom:4px}
@media (max-width:900px){
  html [data-tone] .lp-hero .hero-visual img{aspect-ratio:5/4;object-fit:cover;object-position:74% 40%}
  .lp-hero .hero-logo{margin-top:4px !important}
}
.lp-hero .lp-hero-content > .nh-labcap-wrap{order:1}
@media (min-width:901px){html [data-tone] .lp-hero .nh-labcap-wrap{margin-top:12px !important}}

/* 2026-09-29 頭が切れないよう、写真を高さに合わせて右下基準で表示。写真の左端は背景色になじませる（--ph-edge は js/hero-2people.js が計算） */
@media (min-width:901px){
  html [data-tone] .lp-hero, html body .lp-hero{background-color:#fdfdfc !important;
    background-image:linear-gradient(180deg,rgba(243,244,246,0) 74%,rgba(243,244,246,.55) 87%,rgba(243,244,246,.92) 96%,#f3f4f6 100%),linear-gradient(90deg,#fdfdfc 0,#fdfdfc var(--ph-edge,0px),rgba(253,253,252,0) calc(var(--ph-edge,0px) + 180px)),linear-gradient(90deg,rgba(255,253,252,.94) 0%,rgba(255,253,252,.84) 24%,rgba(255,253,252,.42) 36%,rgba(255,253,252,0) 46%),url("../images/hero-product-2people.jpg.jpg?v=2") !important;
    background-size:cover,cover,cover,auto 100% !important;background-position:center,center,center,right bottom !important;background-repeat:no-repeat !important}
}
/* 2026-09-29 幅901〜1180px（小さめのノートPC・タブレット横）は、写真を上・文章を下に並べる */
@media (min-width:901px) and (max-width:1180px){
  html [data-tone] .lp-hero, html body .lp-hero{background-image:none !important;background-color:transparent !important;min-height:0 !important}
  html [data-tone] .lp-hero .hero-visual{display:block !important;order:-1 !important;width:100% !important;max-width:none !important;margin:0 0 28px !important}
  html [data-tone] .lp-hero .hero-visual img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:70% 45%;box-shadow:none !important;border-radius:0 !important}
  html [data-tone] .lp-hero .lp-hero-content{padding:0 0 48px !important;align-items:stretch !important}
  html [data-tone] .lp-hero .lp-hero-content > *:not(.hero-visual){max-width:680px !important;margin-left:clamp(28px,5vw,64px) !important;margin-right:clamp(28px,5vw,64px) !important}
  html [data-tone] .lp-hero::after{display:none !important}
}