/* =========================
   Base / Layout
   ========================= */
html, body { overflow-x: hidden; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:#222;
}
*,*::before,*::after{ box-sizing:border-box; }
img,video{ max-width:100%; height:auto; -webkit-touch-callout:none; -webkit-user-drag:none; user-select:none; }

/* =========================
   Header / Navigation
   ========================= */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:999;
  background:#fff;
  border-bottom:none;
  overflow:visible;
  width:100%;
}
.site-header__inner{
  max-width:1100px; margin:0 auto;
  padding:10px 20px;
  display:flex; align-items:center; gap:24px;
}
.brand__logo{ height:56px; display:block; }

.nav-toggle{
  margin-left:auto;
  border:1px solid #ddd;
  background:#fff; border-radius:10px;
  padding:8px 12px; cursor:pointer;
  display:none;
}

/* PC: 横並び */
@media (min-width:961px){
  .site-nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
  .site-nav__panel{ display:flex; align-items:center; gap:18px; width:100%; }
  .nav-list{ display:flex; gap:24px; margin:0; padding:0; list-style:none; }
  .nav-list a{ padding:10px 6px; font-size:15px; letter-spacing:.02em; white-space:nowrap; text-decoration:none; color:#222; border:1px solid transparent; border-radius:10px; }
  .nav-list a:hover{ border-color:#e5e7eb; background:#f8fafc; }
  .nav-cta{ display:flex; gap:12px; }
  .btn{ display:inline-block; padding:12px 16px; font-size:14px; border-radius:14px; line-height:1; text-decoration:none; }
  .btn.reserve{ background:#3b82f6; color:#fff; border:1px solid #3b82f6; font-weight:700; }
  .btn.tel{ background:#fff; color:#3b82f6; border:1px solid #3b82f6; }
  .nav-cta .btn.tel{ display:none; }
}

/* Mobile: オーバーレイ＋右スライドパネル */
@media (max-width:960px){
  .nav-toggle{ display:inline-block; }
  .site-nav{
    position:fixed; left:0; right:0; top:var(--header-h,56px); bottom:0;
    background:rgba(0,0,0,.45);
    padding:0; transition:opacity .2s ease;
    opacity:0; pointer-events:none; z-index:1000; width:100%;
  }
  .site-nav.open{ opacity:1; pointer-events:auto; }
  .site-nav__panel{
    position:absolute; top:0; right:0; bottom:0;
    width:min(88vw,200px); background:#fff;
    box-shadow:-10px 0 24px rgba(15,23,42,.16);
    border-left:1px solid #eee; padding:14px; overflow:auto;
    transform:translateX(100%); transition:transform .24s ease;
  }
  .site-nav.open .site-nav__panel{ transform:translateX(0); }
  .nav-list{ display:flex; flex-direction:column; gap:8px; margin:0; padding:0; list-style:none; }
  .nav-list a{ padding:12px; border-radius:10px; text-decoration:none; color:#222; }
  .nav-cta{ margin-top:8px; display:flex; gap:10px; justify-content:space-between; }
}
html.nav-lock, body.nav-lock{ overflow:hidden; touch-action:none; }

/* =========================
   Decorative stripes (header/section)
   ========================= */
.site-header::before,
.site-header::after,
.section-heading::before,
.section-heading::after{
  content:"";
  position:absolute; left:0; right:0;
  height:6px; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    #ffd1dc 0 14.2857%, #ffe8a3 14.2857% 28.5714%, #d1ffd6 28.5714% 42.8571%,
    #d6e7ff 42.8571% 57.1428%, #e8d1ff 57.1428% 71.4285%, #ffead6 71.4285% 85.7142%,
    #c8f7f5 85.7142% 100%);
  background-size:280px 100%;
}
.site-header::before{ top:0; animation:headerStripesL 18s linear infinite; }
.site-header::after { bottom:-1px; animation:headerStripesR 18s linear infinite; }
.section-heading{ position:relative; z-index:1; overflow:visible; width:min(1100px,95%); margin:24px auto 8px; padding:8px 14px; border-left:6px solid #7db7ff; font-weight:800; }
.section-heading::before{ top:-8px; animation:sectionStripesL 18s linear infinite; }
.section-heading::after { bottom:-8px; animation:sectionStripesR 18s linear infinite; }
@keyframes headerStripesL{ from{background-position:0 0} to{background-position:-280px 0} }
@keyframes headerStripesR{ from{background-position:0 0} to{background-position: 280px 0} }
@keyframes sectionStripesL{ from{background-position:0 0} to{background-position:-280px 0} }
@keyframes sectionStripesR{ from{background-position:0 0} to{background-position: 280px 0} }
@media (max-width:960px){
  .site-header::before,.site-header::after{ height:6px; }
}

/* =========================
   Slider (top)
   ========================= */
.main-slider{ width:min(1100px,95%); margin:70px auto 10px; overflow:hidden; } /* 70px: fixed header分 */
.main-slider .slide{ position:relative; border-radius:12px; overflow:hidden; }
.slide-img{ width:100%; height:auto; display:block; object-fit:contain; }
.slick-list{ overflow:hidden !important; }

/* =========================
   Event slider
   ========================= */
#event-banner-slider .slick-slide{ margin:0 10px; }
#event-banner-slider .slick-list{ margin:0 -10px; }
.event-video, .event-img{ width:100%; max-width:630px; height:auto; display:block; }
.event-missing{ margin:8px 0; color:#666; }

/* =========================
   Cards / Grid
   ========================= */
.therapist-container{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px; width:min(1100px,95%); margin:12px auto;
}
@media (min-width:1280px){ .therapist-container{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:960px){ .therapist-container{ grid-template-columns:repeat(2,1fr); } }

.therapist-card{
  display:block; border:1px solid #e7eaf3; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.06); text-decoration:none; color:inherit; position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; contain:paint;
}
.therapist-card .thumb{ position:relative; aspect-ratio:3/4; background:linear-gradient(135deg,#e7f1ff,#ffffff 60%); overflow:hidden; }
.therapist-card .thumb>img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s ease; }
.therapist-card:hover{ transform:translateY(-4px) scale(1.01); box-shadow:0 10px 24px rgba(15,23,42,.16); border-color:#c7d7ff; }
.therapist-card:hover .thumb>img{ transform:scale(1.03); }
.therapist-info{ padding:8px 10px 10px; text-align:center; }
.therapist-name{ margin:0; font-weight:800; }
.therapist-details{ margin:6px 0 0; color:#666; font-size:12px; }
.profile{ text-align:center; }
.schedule-list{ margin:8px auto 0; padding:0; display:inline-block; text-align:center; }
.schedule-item{ list-style:none; font-size:12px; display:inline-flex; align-items:center; gap:6px; }

/* New icon */
.new-icon{ position:absolute; top:8px; left:8px; z-index:5; pointer-events:none; }
.new-icon img{ width:clamp(20px,6vw,32px); height:auto; display:block; }

/* Traits */
.traits-container{ display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 12px; justify-content:flex-start; text-align:left; }
.trait-badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:11px; border:1px solid transparent; white-space:nowrap; }
.cat-rank{ background:#fff5d7; border-color:#ffe29a; color:#7a5a00; }
.cat-play{ background:#ffe4ea; border-color:#ffccd8; color:#7a1f3a; }
.cat-appeal{ background:#eaf2ff; border-color:#d7e6ff; color:#1f3a7a; }
.cat-look{ background:#eaf8f0; border-color:#cfeede; color:#1f5a3a; }
.cat-mind{ background:#f2eaff; border-color:#e3d6ff; color:#4a2a7a; }
.cat-content{ background:#fff1e6; border-color:#ffd7bf; color:#7a3a1f; }

/* =========================
   Fuzoku badges
   ========================= */
.hv-badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-weight:bold; font-size:12px; line-height:1; color:#fff; vertical-align:middle; }
.hv-now{ background:#22c55e; }
.hv-soon{ background:#f59e0b; }
.hv-far{ background:#64748b; }
.hv-unknown{ background:#94a3b8; }
.hv-next{ margin-left:4px; color:#444; font-weight:normal; font-size:11px; }
.hv-wrap{ display:inline-flex; align-items:center; gap:4px; }
.hv-min{ background:#bfdbfe; color:#1e3a8a; }

/* =========================
   Promo 25th
   ========================= */
.promo25{
  position:relative; width:100%; max-width:1100px; margin:20px auto; padding:16px 18px; border-radius:16px;
  border:8px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    conic-gradient(#ff5fa2,#ffd166,#7dd3fc,#a78bfa,#22c55e,#ff9f1c,#ff5fa2) border-box;
  box-shadow:0 10px 24px rgba(15,23,42,.16), inset 0 0 0 1px rgba(255,255,255,.9);
  overflow:hidden;
}
.promo25__link{
  display:block; text-decoration:none; color:#222; font-weight:800; line-height:1.6; text-align:center;
  background:linear-gradient(135deg,#fff 0%, #fff7fb 40%, #f0fbff 100%);
  border-radius:10px; padding:14px 12px;
}
.promo25__link strong{
  background:linear-gradient(90deg,#ff5fa2,#ff9f1c,#ffd166,#22c55e,#7dd3fc,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.promo25__link:hover{ text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:2px; }
.promo25::after{
  content:"25th"; position:absolute; top:-12px; right:-12px; width:88px; height:88px; border-radius:50%;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 60%, transparent 61%),
    conic-gradient(#ff5fa2,#ffd166,#22c55e,#7dd3fc,#a78bfa,#ff9f1c,#ff5fa2);
  color:#111; font-weight:900; font-size:18px; letter-spacing:.5px;
  box-shadow:0 8px 18px rgba(0,0,0,.18); transform:rotate(12deg); border:2px solid rgba(255,255,255,.9);
}
@media (max-width:600px){
  .promo25{ border-width:6px; border-radius:14px; }
  .promo25__link{ padding:12px 10px; }
  .promo25::after{ width:72px; height:72px; font-size:16px; }
}

/* =========================
   Reviews (official)
   ========================= */
.reviews-grid{
  width:min(1100px,95%); margin:12px auto 0;
  display:grid; grid-template-columns:1fr; gap:10px;
}
.review-card{
  display:flex; align-items:flex-start; gap:10px;
  background:#fff; border:1px solid #e7eaf3; border-radius:12px; overflow:hidden;
  padding:8px 10px; box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.review-card:hover{ box-shadow:0 8px 18px rgba(15,23,42,.12); border-color:#c7d7ff; }
.review-thumb{ display:block; position:relative; overflow:hidden; border-radius:6px; background:#f7f9ff; flex:0 0 50px; width:50px; height:70px; }
.review-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (min-width:961px){ .review-thumb{ width:56px; height:80px; flex-basis:56px; } }

.review-body{ flex:1 1 auto; padding:0; display:flex; flex-direction:column; gap:4px; min-width:0; }
.review-meta{ display:flex; align-items:center; gap:8px; font-size:12px; color:#555; }
.review-girl{ font-weight:700; color:#333; }
.review-submeta{ font-size:11px; color:#6b7280; line-height:1.4; display:flex; flex-wrap:wrap; gap:6px 10px; }
.review-submeta .review-date,.review-submeta .review-user{ white-space:nowrap; }
.review-title{ margin:0; font-size:13px; line-height:1.3; font-weight:800; color:#222; }
.review-text{ margin:0; font-size:12px; color:#444; line-height:1.5; }
@media (min-width:961px){ .review-title{ font-size:13.5px; } .review-text{ font-size:12.5px; } }

.stars{ display:inline-flex; gap:2px; vertical-align:middle; }
.star{ width:12px; height:12px; position:relative; }
.star::before{ content:"★"; font-size:12px; line-height:12px; position:absolute; inset:0; color:#e5e7eb; }
.star.full::before{ color:#f59e0b; }
.star.half::before{
  color:#f59e0b;
  background:linear-gradient(90deg,currentColor 0 50%, #e5e7eb 50% 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.star.empty::before{ color:#e5e7eb; }
.reviews-more-all{ width:min(1100px,95%); margin:6px auto 0; text-align:center; }
.reviews-more-all a{
  display:inline-block; padding:6px 10px; border-radius:999px;
  border:1px solid #93c5fd; color:#1d4ed8; text-decoration:none; font-weight:700; font-size:16px;
}
.reviews-more-all a:hover{ background:#eff6ff; }
/* 続きを読む：下線なし＋オレンジ */
a.review__more{
  color:#ff7a00;
  text-decoration:none;
  font-weight:700;
}
a.review__more:hover,
a.review__more:focus{
  text-decoration:none;
  opacity:.88;
  outline: none;
}

/* カード全体をクリック可能に見せる */
.review-card{
  cursor: pointer;
}
/* ただしカード内の本来のリンク上では通常カーソルに戻す */
.review-card a,
.review-card button{ cursor:auto; }

/* キーボード操作でもカード境界が分かるように（任意） */
.review-card:focus-within{
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}
/* ★評価（グレーの土台 + 色付きの被せ） */
.stars{
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 14px;         /* 必要なら 12～16px で微調整 */
  letter-spacing: 1px;     /* 星の詰まりを調整 */
  vertical-align: middle;  /* 名前の横で高さを揃える */
}
.stars .base{
  color: #e5e7eb;          /* 土台（薄グレー） */
}
.stars .fill{
  color: #f59e0b;          /* 色付き（アンバー系） */
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  overflow: hidden;        /* 幅％で切る */
}
/* 小さめ・大きめバリエーション（任意） */
.stars.sm{ font-size: 12px; letter-spacing: .5px; }
.stars.lg{ font-size: 16px; letter-spacing: 1.5px; }


/* =========================
   PICKUP（動画＋右プロフィール）
   ========================= */
#pickup-area.video-mode2 .pickup-grid{
  width:min(1100px,95%); margin:12px auto 0;
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:14px; align-items:start;
}
@media (max-width:960px){
  #pickup-area.video-mode2 .pickup-grid{ grid-template-columns:1fr; }
}
#pickup-area.video-mode2 .pickup-media{
  position:relative; border-radius:14px; overflow:hidden;
  box-shadow:0 0 0 4px rgba(125,183,255,.85), 0 10px 24px rgba(15,23,42,.20), inset 0 0 0 1px rgba(255,255,255,.35);
  background:#000;
}
#pickup-area.video-mode2 .pickup-media[data-ar="pending"]{ aspect-ratio:16/9; }
#pickup-area.video-mode2 .pickup-media>video{
  position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover !important; max-width:none !important;
}
#pickup-area.video-mode2 .pickup-profile{
  border:1px solid #e7eaf3; border-radius:14px; background:#fff;
  box-shadow:0 6px 20px rgba(15,23,42,.10);
  padding:12px; display:flex; flex-direction:column; gap:8px;
}
#pickup-area.video-mode2 .pickup-profile__head{ display:flex; align-items:center; gap:10px; }
#pickup-area.video-mode2 .pickup-profile__thumb{ flex:0 0 56px; width:56px; height:80px; border-radius:8px; overflow:hidden; background:#f7f9ff; }
#pickup-area.video-mode2 .pickup-profile__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
#pickup-area.video-mode2 .pickup-profile__name{ font-weight:900; font-size:16px; line-height:1.2; }
#pickup-area.video-mode2 .pickup-profile__spec{ color:#666; font-size:12px; }
#pickup-area.video-mode2 .pickup-profile__sched{
  font-size:12px; color:#333; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border:1px solid #eef2ff; background:#f8fbff; padding:8px; border-radius:10px;
}
#pickup-area.video-mode2 .pickup-profile__traits{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
#pickup-area.video-mode2 .pickup-profile__actions{ display:flex; gap:8px; margin-top:4px; }
#pickup-area.video-mode2 .pickup-profile__actions .btn{ flex:1 1 auto; text-align:center; padding:10px 0; border-radius:10px; text-decoration:none; font-weight:800; }
#pickup-area.video-mode2 .pickup-profile__actions .btn.profile{ border:1px solid #94a3b8; color:#0f172a; background:#fff; }
#pickup-area.video-mode2 .pickup-profile__actions .btn.reserve{ border:1px solid #3b82f6; color:#fff; background:#3b82f6; }
#pickup-area.video-mode2 .pickup-profile a{ text-decoration:none !important; }
#pickup-area.video-mode2 .pickup-traits{ display:none !important; }

/* =========================
   Footer / Misc
   ========================= */
/* === footer (main.html と同等トーン) === */
.footer{
  background:#111827;
  color:#e5e7eb;
  margin-top:24px;
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer a{ color:#e5e7eb; text-decoration:none; }
.footer a:hover{ text-decoration:underline; }

.footer-content{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  gap:20px;
  padding:0 16px 10px;
  flex-wrap:wrap;
}
.footer-column ul{ list-style:none; margin:0; padding:0; }
.footer-column li{ margin:6px 0; }

.footer-contact{ color:#e5e7eb; }
.footer-bottom{
  margin-top:6px;
  padding:10px 16px 14px;
  text-align:center;
  background:#0f172a;
  color:#cbd5e1;
  font-size:13px;
}


#scrollTopBtn{
  position:fixed; right:12px; bottom:12px; display:none;
  border:0; background:#7db7ff; color:#fff; border-radius:999px;
  width:44px; height:44px; font-size:18px; cursor:pointer;
}

/* =========================
   Utility
   ========================= */
.view-all-btn{ font-size:12px; margin-left:8px; text-decoration:none; color:#2563eb; border-bottom:1px solid #bfdbfe; }
.view-all-btn:hover{ border-bottom-color:#2563eb; }

/* ===== Mobile menu normalization (force same look when opened) ===== */
@media (max-width:960px){

  /* パネル内リンクの初期化（青＆下線を殺す） */
  .site-nav__panel a{
    color:#222 !important;
    text-decoration:none !important;
  }
  .site-nav__panel a:focus,
  .site-nav__panel a:hover{
    text-decoration:none !important;
  }

  /* 縦並びメニューの見た目を固定 */
  .site-nav__panel .nav-list{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin:0 !important; padding:0 !important; list-style:none !important;
  }
  .site-nav__panel .nav-list a{
    display:block !important;
    padding:12px !important;
    border-radius:10px !important;
    border:1px solid transparent !important;
  }
  .site-nav__panel .nav-list a:hover,
  .site-nav__panel .nav-list a:focus{
    background:#f8fafc !important;
    border-color:#e5e7eb !important;
  }

  /* 予約/TEL のボタン行を固定（1枚目と同じレイアウト＆造形） */
  .site-nav__panel .nav-cta{
    margin-top:8px !important;
    display:flex !important;
    gap:10px !important;
    justify-content:space-between !important;
  }
  .site-nav__panel .nav-cta .btn{
    flex:1 1 auto !important;
    display:block !important;
    text-align:center !important;
    font-weight:800 !important;
    padding:12px 0 !important;
    border-radius:10px !important;
    border:1px solid #3b82f6 !important;
  }
  .site-nav__panel .nav-cta .btn.reserve{
    background:#3b82f6 !important;
    color:#fff !important;
    box-shadow:0 4px 10px rgba(59,130,246,.25) !important;
  }
  .site-nav__panel .nav-cta .btn.tel{
    background:#fff !important;
    color:#3b82f6 !important;
  }
}
/* ===== ランキング用バッジ（共通） ===== */
.rank-badge{
  position: relative;
  isolation: isolate;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  background: linear-gradient(135deg, var(--rank-from,#fff5d7), var(--rank-to,#ffe59a));
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 3px 10px rgba(0,0,0,.08), inset 0 0 0 1px rgba(255,255,255,.7);
  overflow: hidden;
  animation: rankFloat 3.2s ease-in-out infinite;
}
/* きらめき＆発光（控えめ） */
.rank-badge::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 15%, rgba(255,255,255,0) 30%) no-repeat;
  background-size: 180% 180%;
  mix-blend-mode: screen;
  z-index:-1;
  animation: rankShimmer 2.6s linear infinite;
}
.rank-badge::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius:inherit;
  background: radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.5) 0 30%, rgba(255,255,255,0) 60%);
  filter: blur(8px);
  opacity:.55;
  z-index:-2;
  animation: rankPulse 2.8s ease-in-out infinite;
}
/* No別のベース色（No.1は後段で虹色に上書き） */
.rank-1{ --rank-from:#fff3c4; --rank-to:#ffd166; color:#6b4600; box-shadow:0 6px 18px rgba(255,193,7,.28), inset 0 0 0 1px rgba(255,255,255,.8);}
.rank-2{ --rank-from:#eef2ff; --rank-to:#dbe7ff; color:#1f2a44; box-shadow:0 6px 18px rgba(90,116,148,.20), inset 0 0 0 1px rgba(255,255,255,.8);}
.rank-3{ --rank-from:#ffe6d5; --rank-to:#ffccaa; color:#6a3b17; box-shadow:0 6px 18px rgba(235,131,52,.22), inset 0 0 0 1px rgba(255,255,255,.8);}
.rank-4{ --rank-from:#eaf8f0; --rank-to:#d7fbe8; color:#075e3b; }
.rank-5{ --rank-from:#eaf2ff; --rank-to:#dbeafe; color:#113a7b; }

/* 王冠は文字の先頭にインラインで表示（重なり防止） */
.rank-badge .crown{
  position: static;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  line-height: 1;
  font-size: 1em;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* No.1専用：虹色グラデーションが流れる */
.rank-1{
  background: linear-gradient(90deg,#ff5fa2,#ff9f1c,#ffd166,#22c55e,#7dd3fc,#a78bfa,#ff5fa2);
  background-size: 400% 100%;
  color:#111; text-shadow:0 1px 0 rgba(255,255,255,.6);
  animation: rainbowSlide 4s linear infinite, rankFloat 3.2s ease-in-out infinite, rankPulse 2.8s ease-in-out infinite;
}
@keyframes rainbowSlide{ 0%{background-position:0% 50%} 100%{background-position:400% 50%} }
@keyframes rankShimmer{ 0%{background-position:-120% -120%} 100%{background-position:120% 120%} }
@keyframes rankPulse{ 0%,100%{opacity:.45;transform:scale(1)} 50%{opacity:.75;transform:scale(1.03)} }
@keyframes rankFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.5px)} }

/* 動きを抑える設定のユーザーへ配慮 */
@media (prefers-reduced-motion: reduce){
  .rank-badge, .rank-badge::before, .rank-badge::after{ animation: none !important; }


}
/* === PICKUP（PC）横の余白を詰める／行幅を固定 === */
@media (min-width: 961px){
  /* 行全体の横幅を絞って中央寄せ */
  #pickup-area.video-mode2 .pickup-grid{
    /* 必要以上に広がらないよう幅を固定 */
    max-width: 760px;            /* お好みで 720〜820px 程度に */
    margin: 0 auto;              /* 画面中央に配置 */
    grid-template-columns: 300px 420px; /* 左画像 300 / 右情報 420 */
    gap: 12px;                   /* カラムの間隔を詰める（以前より小さく） */
    align-items: start;
    justify-content: center;
  }

  /* 画像枠は 300×400（前回の指定と同じ、念のため） */
  #pickup-area.video-mode2 .pickup-media{
    width: 300px !important;
    height: 400px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  #pickup-area.video-mode2 .pickup-media img,
  #pickup-area.video-mode2 .pickup-media video{
    width: 100%; height: 100%; object-fit: cover;
  }

  /* 右側パネルの幅をグリッドに合わせる */
  #pickup-area.video-mode2 .pickup-profile{ width: 420px; }

  /* 余計な上下マージンを抑える（テーマ側の margin を打ち消し） */
  #pickup-area{ padding: 8px 0; }
  #pickup-area .pickup-profile > *{ margin-top: 8px; }
  #pickup-area .pickup-profile__head{ margin-bottom: 8px; }
}
/* === PICKUP（PC）横の余白を詰める／行幅を固定 === */
@media (min-width: 961px){
  /* 行全体の横幅を絞って中央寄せ */
  #pickup-area.video-mode2 .pickup-grid{
    /* 必要以上に広がらないよう幅を固定 */
    max-width: 760px;            /* お好みで 720〜820px 程度に */
    margin: 0 auto;              /* 画面中央に配置 */
    grid-template-columns: 300px 420px; /* 左画像 300 / 右情報 420 */
    gap: 12px;                   /* カラムの間隔を詰める（以前より小さく） */
    align-items: start;
    justify-content: center;
  }

  /* 画像枠は 300×400（前回の指定と同じ、念のため） */
  #pickup-area.video-mode2 .pickup-media{
    width: 300px !important;
    height: 400px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
  }
  #pickup-area.video-mode2 .pickup-media img,
  #pickup-area.video-mode2 .pickup-media video{
    width: 100%; height: 100%; object-fit: cover;
  }

  /* 右側パネルの幅をグリッドに合わせる */
  #pickup-area.video-mode2 .pickup-profile{ width: 420px; }

  /* 余計な上下マージンを抑える（テーマ側の margin を打ち消し） */
  #pickup-area{ padding: 8px 0; }
  #pickup-area .pickup-profile > *{ margin-top: 8px; }
  #pickup-area .pickup-profile__head{ margin-bottom: 8px; }
}
/* ==== PICKUP（PC）画像サイズ強制固定 & 行幅調整 ==== */
@media (min-width: 961px){
  /* 行の幅とカラム間隔を絞る（右パネルは 420px 想定） */
  #pickup-area.video-mode2 .pickup-grid,
  #pickup-area.image-mode2 .pickup-grid,
  #pickup-area .pickup-grid{
    max-width: 760px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 420px;
    gap: 12px;
    align-items: start;
    justify-content: center;
  }

  /* --- 画像が .pickup-media 内にある場合（動画・画像共通） --- */
  #pickup-area .pickup-media{
    width: 300px !important;
    height: 400px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    border-radius: 16px;
  }
  #pickup-area .pickup-media img,
  #pickup-area .pickup-media video{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* --- 画像が直下に置かれている場合のフォールバック --- */
  #pickup-area > img,
  #pickup-area > a > img,
  #pickup-area picture > img{
    width: 300px !important;
    height: 400px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px;
  }

  /* 右側パネルの幅を合わせる（存在する場合） */
  #pickup-area .pickup-profile{ width: 420px; }
}
/* ===== ピックアップ内：チップの縦位置を統一（No◯も含む） ===== */
#pickup-area .pickup-profile__traits{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}

/* 共通チップ（rank/通常どちらも） */
#pickup-area .pickup-profile__traits .trait-badge,
#pickup-area .pickup-profile__traits .trait-chip,
#pickup-area .pickup-profile__traits .rank-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px;
  height:28px;               /* ← 全員の背丈を合わせる */
  padding:0 10px;            /* 上下は 0 に */
  line-height:1 !important;  /* 文字の行高を固定 */
  vertical-align:middle;     /* ベースラインのズレ防止 */
  font-size:12px;            /* 必要なら 13px に */
  border-radius:999px;
}

/* ランクの王冠アイコンの微調整（沈み対策） */
#pickup-area .pickup-profile__traits .rank-badge .crown{
  margin-right:4px;
  line-height:1;
  transform: translateY(-0.5px); /* ほんの少しだけ持ち上げる */
}
/* ========== 公式口コミ：レイアウト＆星（共通） ========== */

/* レビュー一覧のグリッド（横2～3列など、お好みで） */
.reviews-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (min-width: 1024px){
  .reviews-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* カード基本 */
.review-card{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid #e7eaf3; border-radius:14px;
  padding:10px 12px; position:relative; box-shadow:0 4px 14px rgba(15,23,42,.10);
}
.review-thumb{ flex:0 0 56px; width:56px; height:80px; border-radius:8px; overflow:hidden; background:#f1f5f9; box-shadow:inset 0 0 0 1px #e5e7eb }
.review-thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.review-body{ flex:1 1 auto; min-width:0 }

/* バッジ */
.badge{display:inline-block;padding:3px 8px;border:1px solid #c7d2fe;border-radius:999px;font-size:12px;background:#eef2ff;color:#3730a3;white-space:nowrap}
.badge--user{background:#ecfeff;border-color:#bae6fd;color:#075985}
.badge--date{background:#fef9c3;border-color:#fde68a;color:#854d0e}
.badge--girl{background:#f0fdf4;border-color:#bbf7d0;color:#166534}

/* タイトル/本文 */
.rev-title{margin:.25rem 0 0; font-size:14.5px; line-height:1.4}
.rev-body{margin-top:6px; font-size:14px}

/* ===== 揃え：数値 / 星(固定幅) / バッジ群 を Grid で固定 ===== */
:root{
  --star-size: 18px;
  --star-gap:  2px;
  --star-row-w: calc(var(--star-size)*5 + var(--star-gap)*4);
  --star-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
}

.rev-hd{
  display:grid;
  grid-template-columns: auto var(--star-row-w) 1fr; /* 数値 / 星 / バッジ群 */
  align-items:center;
  column-gap:8px;
}

/* 数値は等幅数字＋最小幅固定 */
.avg{
  font-weight:900; font-size:18px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width:3.2ch; text-align:right; line-height:1;
}

/* 星列は“総幅固定” */
.star5{
  display:inline-flex; gap:var(--star-gap);
  width:var(--star-row-w); flex:0 0 var(--star-row-w);
  vertical-align:middle;
  line-height:0; font-size:0;
  position:relative;
}

/* 星1個の箱（フォント非依存・SVGマスク） */
.s{ position:relative; display:block; width:var(--star-size); height:var(--star-size); flex:0 0 var(--star-size); }

/* 空星（下地） */
.s::before{
  content:""; position:absolute; inset:0; background:#d1d5db;
  -webkit-mask:var(--star-mask) no-repeat center/contain;
          mask:var(--star-mask) no-repeat center/contain;
}

/* 塗り（full=100%, half=50%） */
.s::after{
  content:""; position:absolute; inset:0; background:#f59e0b; width:0;
  -webkit-mask:var(--star-mask) no-repeat center/contain;
          mask:var(--star-mask) no-repeat center/contain;
}
.s.full::after{ width:100%; }
.s.half::after{ width:50%; }

/* 非インタラクティブ化（点線枠対策） */
.star5, .star5 * {
  pointer-events:none;
  outline:none !important;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.star5::after{
  /* 透明ヒットボックス（クリック吸収用）。必要なければ削除可 */
  content:""; position:absolute; left:0; right:0; top:-6px; bottom:-6px; background:transparent;
}

/* ピックアップ強調（既存を継承） */
.review-card.is-pickup{
  border:2px solid #ef4444;
  box-shadow:0 10px 24px rgba(239,68,68,.18);
}
.review-card .pickup-ribbon{
  position:absolute; right:8px; top:8px;
  background:#ef4444; color:#fff; font-weight:900; font-size:13px;
  padding:6px 12px; border-radius:10px; box-shadow:0 6px 16px rgba(239,68,68,.35);
  z-index:3; pointer-events:none;
}
@media (max-width:600px){
  .review-card .pickup-ribbon{ top:auto; bottom:8px; right:8px; }
}

/* かなり狭い端末でのみバッジを折り返す */
@media (max-width:360px){
  .rev-hd{ grid-template-columns:auto var(--star-row-w); }
  .rev-hd > .badge{ grid-column:1 / -1; margin-top:6px; }
}
/* 公式口コミカード：レイアウトと抜粋 */
.reviews-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.review-card{
  display:flex;
  gap:12px;
  background:#fff;
  border:1px solid #e7eaf3;
  border-radius:14px;
  padding:12px;
  box-shadow:0 4px 14px rgba(15,23,42,.08);
}

.review-thumb{ flex:0 0 56px; width:56px; height:80px; border-radius:8px; overflow:hidden; }
.review-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.review-body{ flex:1 1 auto; min-width:0; }
.rev-hd{ display:grid; grid-template-columns:auto 110px 1fr; column-gap:8px; align-items:center; }
.rev-hd .avg{ font-weight:900; font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right; }

/* 星（既に導入済みのものと同義。重複したら片方に寄せてOK） */
.star5{ display:inline-flex; gap:2px; width:110px; flex:0 0 110px; vertical-align:middle; line-height:0; font-size:0; }
.s{ position:relative; display:block; width:18px; height:18px; flex:0 0 18px; }
:root{ --star-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); }
.s::before{content:"";position:absolute;inset:0;background:#d1d5db;-webkit-mask:var(--star-mask) no-repeat center/contain;mask:var(--star-mask) no-repeat center/contain;}
.s::after{content:"";position:absolute;inset:0;background:#f59e0b;width:0;-webkit-mask:var(--star-mask) no-repeat center/contain;mask:var(--star-mask) no-repeat center/contain;}
.s.full::after{width:100%} .s.half::after{width:50%}

/* タイトル・本文の抜粋（行数クランプ） */
.rev-title{
  font-size:15px; font-weight:700; margin:6px 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.rev-body{
  font-size:14px; line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:10; -webkit-box-orient:vertical; overflow:hidden;
}

/* バッジ類（既存の .badge 系があればそれを使用） */
.badge{ display:inline-block; padding:3px 8px; border:1px solid #c7d2fe; border-radius:999px; font-size:12px; background:#eef2ff; color:#3730a3; white-space:nowrap; }
.badge--user{ background:#ecfeff; border-color:#bae6fd; color:#075985; }
.badge--date{ background:#fef9c3; border-color:#fde68a; color:#854d0e; }
.badge--girl{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 600px以下は1列で読みやすく */
@media (max-width: 600px){
  .reviews-grid{ grid-template-columns: 1fr; gap:12px; }
  .rev-body{ -webkit-line-clamp: 12; } /* モバイルは少し長めに */
}
/* === 公式口コミカードの微調整 ===================== */

/* サムネとの間隔を少し狭める */
.review-card{ gap:8px; }

/* ヘッダー：数値/星/バッジの列。左寄せ＆詰める */
.review-card .rev-hd{
  display:grid;
  grid-template-columns: minmax(2.6ch,auto) var(--star-row-w) 1fr;
  column-gap:6px;                /* 星までの距離を詰める */
  align-items:center;
}

/* スコアは左寄せで最小幅だけ確保 */
.review-card .avg{
  text-align:left;
  min-width:2.6ch;               /* 0.0〜5.0 ぶん */
  line-height:1;
}

/* バッジ（投稿者/女の子/来店日）は3列目へ */
.review-card .rev-hd > .badge{ grid-column:3; }

/* 画面が狭いときはバッジを下段で全幅扱いに */
@media (max-width: 480px){
  .review-card .rev-hd{
    grid-template-columns:auto var(--star-row-w);
  }
  .review-card .rev-hd > .badge{
    grid-column:1 / -1;
    margin-top:6px;
  }
}

/* 来店日バッジのはみ出しを防ぐ（ノーラップ＋やや小さめ） */
.badge--date{
  white-space:nowrap;
  font-size:12px;
  line-height:1.2;
  padding:4px 10px;
}

/* 「続きを読む」をオレンジ・下線なしで統一 */
.readmore-link{
  color:#f59e0b;                 /* オレンジ */
  text-decoration:none;          /* 下線なし */
  font-weight:700;
}
.readmore-link:visited{ color:#f59e0b; }
.readmore-link:hover{ text-decoration:none; opacity:.9; }

/* 星列は元のマスク描画のまま。念のため行高ゼロで詰める */
.star5{ line-height:0; }
/* ── 公式口コミカード／一覧カード 共通：ピックアップを常に右下へ ── */
.review-card,
.card { position: relative; } /* 位置の基準を明示 */

.review-card.is-pickup,
.card.is-pickup {
  padding-bottom: 42px; /* バッジが本文に被らないよう下マージンを足す */
}

.review-card.is-pickup .pickup-ribbon,
.card.is-pickup .pickup-ribbon {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: 12px !important;
  bottom: 12px !important;
  transform: none !important;
  z-index: 3 !important;
  pointer-events: none;
}

/* 画面が狭い時も同じ位置（念のため明示） */
@media (max-width: 960px){
  .review-card.is-pickup .pickup-ribbon,
  .card.is-pickup .pickup-ribbon{
    right: 10px !important;
    bottom: 10px !important;
  }
}
/* ====== もっと口コミを読む（グローバルCTA） ====== */
.reviews-more-global{
  width:min(1100px,95%);
  margin:20px auto 28px;
  text-align:center;            /* ← センター寄せ */
}

.reviews-more-global .readmore-link{
  display:inline-block;
  min-width: 260px;             /* 幅しっかり */
  padding:14px 22px;            /* タップ領域44px以上 */
  border-radius:9999px;         /* 完全ピル型 */
  font-weight:700;
  font-size:16px;
  line-height:1.1;
  text-decoration:none;
  border:1px solid #ff7a00;
  background: linear-gradient(180deg,#fff7f0, #ffe9d6); /* 目立つけど下品じゃない */
  color:#c85a00;
  box-shadow:0 6px 18px rgba(255,122,0,.25); /* ふわっと */
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.reviews-more-global .readmore-link:hover,
.reviews-more-global .readmore-link:focus{
  transform: translateY(-1px);
  box-shadow:0 10px 24px rgba(255,122,0,.35);
  background: linear-gradient(180deg,#fff1e3, #ffd9b8);
  outline: none;
}

.reviews-more-global .readmore-link:active{
  transform: translateY(0);
  box-shadow:0 4px 12px rgba(255,122,0,.25);
}

/* 強制表示（他CSSに消されがちな場合の保険） */
.reviews-more-global,
.reviews-more-global .readmore-link{
  visibility: visible !important;
  opacity: 1 !important;
}

/* ダーク背景サイトでも読めるように（任意） */
@media (prefers-color-scheme: dark){
  .reviews-more-global .readmore-link{
    background: linear-gradient(180deg,#2b2b2b,#1f1f1f);
    color:#ffd1a1;
    border-color:#ff9a3c;
    box-shadow:0 6px 18px rgba(0,0,0,.45);
  }
  .reviews-more-global .readmore-link:hover,
  .reviews-more-global .readmore-link:focus{
    background: linear-gradient(180deg,#333,#222);
    box-shadow:0 10px 24px rgba(0,0,0,.55);
  }
}

/* 低視力・動き苦手な方向け（任意） */
@media (prefers-reduced-motion: reduce){
  .reviews-more-global .readmore-link{ transition:none; }
}