@charset "UTF-8";

html, body{
  margin: 0;
  padding: 0;
}

/* =========================
   日付＋在庫アラート帯
========================= */
.stockBadge{
  width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  white-space:nowrap;
  overflow:visible;
  padding:6px 0;
  font-weight:800;
  line-height:1.1;
  font-size:clamp(14px,7vw,50px);
  letter-spacing:clamp(-0.02em,0.12vw,0.04em);
}
.stockBadge__date{position:relative;display:inline-block;z-index:0;}
.dateHighlight{
  position:absolute;left:0;right:0;bottom:.15em;height:.9em;display:block;
  background:#ffdd1f;z-index:0;
  transform-origin:left center;
  animation:highlightPulse 3s ease-in-out infinite;
}
@keyframes highlightPulse{
  0%{transform:scaleX(.05);opacity:.05;}
  50%{transform:scaleX(1);opacity:.90;}
  100%{transform:scaleX(.05);opacity:.05;}
}
.dateText{position:relative;z-index:1;}
.stockBadge__alert{
  color:#e60000;
  font-weight:900;
  animation:alertBlink 1.2s ease-in-out infinite;
}
@keyframes alertBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
@media (max-width:360px){
  .stockBadge{font-size:clamp(12px,4.2vw,18px);letter-spacing:0;gap:.4em;}
}

/* =========================
   reviews：集計 + rotator
========================= */
:root{
  --wrap: 950px;
  --accent: #b61612;
  --text: #111;
  --muted: rgba(17,17,17,.72);
  --line: rgba(0,0,0,.12);
  --starOff: rgba(0,0,0,.18);
  --bg: #fff;
}

.rvWrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:18px 14px 34px;
  color:var(--text);
  background:var(--bg);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",system-ui,-apple-system,sans-serif;
}

.rvSummary{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:26px;
  align-items:center;
  padding:8px 0 18px;
  border-bottom:1px solid var(--line);
}
@media (max-width:760px){
  .rvSummary{grid-template-columns:1fr;gap:14px;}
}

/* ドーナツ */
.rvDonutBox{display:flex;justify-content:center;}
.rvDonut{
  width:260px;aspect-ratio:1/1;border-radius:999px;
  background:conic-gradient(var(--accent) 0 92%, rgba(0,0,0,.08) 92% 100%);
  display:flex;align-items:center;justify-content:center;
}
.rvDonut__inner{
  width:72%;height:72%;border-radius:999px;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.rvDonut__label{font-weight:800;font-size:14px;line-height:1.2;}
.rvDonut__label span{font-weight:700;color:var(--muted);font-size:12px;}
.rvDonut__score{margin-top:6px;font-weight:900;font-size:44px;letter-spacing:.02em;}

/* 内訳 */
.rvBreakdown__head{font-weight:800;margin-bottom:10px;}
.rvRow{display:grid;grid-template-columns:160px 1fr 64px;gap:12px;align-items:center;padding:7px 0;}
@media (max-width:520px){
  .rvRow{grid-template-columns:140px 1fr 52px;gap:10px;}
}
.rvRow__left{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.rvStarLbl{font-weight:800;font-size:13px;color:var(--muted);}

/* ★色（黒化防止：明示） */
.rvStars{display:inline-flex;gap:2px;font-size:14px;line-height:1;}
.rvStars i{font-style:normal;color:var(--starOff);}
.rvStars i.on{color:#f2a23a;}

.rvBar{width:100%;height:10px;background:rgba(0,0,0,.08);border-radius:999px;overflow:hidden;}
.rvBar>span{display:block;height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .3s ease;}
.rvCnt{text-align:right;font-size:12px;color:var(--muted);font-weight:700;}

/* rotator */
.revRotator{max-width:950px;margin:0 auto;padding:12px 0;}
.revRotator__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin:0 10px 10px;
}
.revRotator__ttl{margin:0;font-weight:900;}
.revRotator__updated{font-size:12px;line-height:1.2;color:rgba(0,0,0,.65);white-space:nowrap;}
.revRotator__list{display:grid;gap:12px;}

.revCard{
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:12px;
  background:#fff;
}
.revCard__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.revCard__name{font-weight:900;}
.revCard__meta{font-weight:700;opacity:.7;font-size:.9em;}
.revCard__rate{white-space:nowrap;font-weight:900;}
.revCard__kv{margin-top:8px;display:flex;gap:12px;flex-wrap:wrap;}
.revCard__kvRow span{opacity:.7;margin-right:6px;font-weight:700;}
.revCard__text{margin:10px 0 0;line-height:1.7;}

.revCard.revOut{opacity:0;transform:translateY(10px);transition:.28s ease;}
.revCard.revIn{opacity:1;transform:translateY(0);transition:.28s ease;}
@media (max-width:520px){
  .revCard{padding:10px;}
  .revCard__head{flex-direction:column;}
}
#revRotator{padding-left:10px;padding-right:10px;box-sizing:border-box;}

/* rotatorの★（黄色★ + 空☆ + 半端） */
.revStars{display:inline-flex;gap:.08em;align-items:center;line-height:1;}
.revStars__full{color:#f5a623;}
.revStars__empty{color:rgba(0,0,0,.28);}
.revStars__half{position:relative;color:rgba(0,0,0,.28);}
.revStars__half::before{
  content:"★";
  position:absolute;left:0;top:0;width:50%;overflow:hidden;
  color:#f5a623;
}
.revCard__rateText{color:inherit;margin-left:.35em;}
.revCard__rate::before,.revCard__rate::after,.revStars::before,.revStars::after{
  content:none !important;display:none !important;background:none !important;
}

/* =========================
   〇月〇日限定（limitedBetween）
========================= */
.limitedBetween{
  width:100%;
  margin:0;
  padding:14px 0 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  container-type:inline-size;
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",system-ui,-apple-system,sans-serif;
}
.limitedBetween__text{
  margin:0;
  text-align:center;
  font-weight:900;
  line-height:1.05;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:clamp(30px,9cqw,79.5px);
}
.limitedBetween__top{color:#b61612;font-weight:900;letter-spacing:.02em;animation:none !important;}
#limitedBetweenDate{
  color:#b61612;
  display:inline-block;
  letter-spacing:.02em;
  animation:limitedBetweenBlink 1s steps(1,end) infinite;
}
@keyframes limitedBetweenBlink{50%{opacity:0;}}

/* =========================
   注文状況ウィジェット
========================= */
.orderSection{width:100%;margin:0;padding:0;}
.orderWrap{
  width:100%;
  padding:16px;
  box-sizing:border-box;
  display:flex;
  justify-content:center;
  align-items:center;
}
.orderWidget{
  width:min(950px,100%);
  background:#fff;
  border:1px solid #cfcfcf;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  border-radius:4px;
  overflow:hidden;
}
.orderHeader{
  background:#ff0000;
  color:#fff;
  text-align:center;
  font-weight:700;
  padding:10px 12px;
  font-size:clamp(30px,2.0vw,56px);
  letter-spacing:.02em;
}
.orderBody{padding:10px 12px 12px;background:#fff;}
.orderRow{
  border:1px solid #cfcfcf;
  border-radius:3px;
  padding:10px 12px;
  background:#fff;
}
.orderRow + .orderRow{margin-top:10px;}
.rowMain{
  font-size:clamp(13px,1.7vw,25px);
  line-height:1.55;
  font-weight:600;
  overflow-wrap:anywhere;
}
.accent{color:#d31616;font-weight:800;}
.rowSub{
  margin-top:4px;
  font-size:clamp(12px,1.4vw,22px);
  color:#666;
  overflow-wrap:anywhere;
}
.orderTime{margin-left:.6em;font-weight:800;color:#444;}

.fadeOut{animation:fadeOut .28s ease forwards;}
.fadeIn{animation:fadeIn .32s ease forwards;}
@keyframes fadeOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(6px);}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

@media (max-width:480px){
  .orderHeader{font-size:clamp(18px,4.6vw,22px);padding:10px 10px;}
  .rowMain{font-size:clamp(18px,4.2vw,22px);}
  .rowSub{font-size:clamp(14px,3.6vw,16px);}
  .orderBody{padding:10px;}
  .orderRow{padding:10px;}
}

/* =======================================
   ZEN：症例スライダー
======================================= */
.zx-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.zx-slider__viewport {
  width: 100%;
  overflow: hidden;
}

.zx-slider__track {
  display: flex;
  will-change: transform;
  transition: transform 300ms ease;
}

.zx-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

.zx-slide picture,
.zx-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* 矢印（画像上に20%透過オーバーレイ） */
.zx-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: 0.4em 0.5em;
  line-height: 1;
  font-size: clamp(20px, 4vw, 40px);
  color: #fff;
  background: rgba(0, 0, 0, 0.2); /* 20%透過 */
  opacity: 0.8;
  cursor: pointer;
  user-select: none;
  z-index: 5;
}

.zx-arrow--prev {
  left: 6px;
}

.zx-arrow--next {
  right: 6px;
}

.zx-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Safari保険：pictureをブロック要素化（念のためダブり防止でここでも） */
.zx-slide picture {
  display: block;
}

/* =======================================
   Movie (YouTube iframe)
======================================= */
.item-movie {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.item-movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* =========================
   画像の左右余白（意図的な縮小）を無効化
   ※必要なら特定箇所だけ残してください
========================= */
.sswp img,
.swp img,
.wp img,
.wwp img,
.wwwp img,
.wwwwp img{
  width: 100% !important;
  margin: 0 !important;
}