/* =============================================
   TOP MV / ファーストビュー
============================================= */
.mv{
  background-image:url('../img/m-bg.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  height:541px;
}/* 共通MV */
.mv .container{
  padding:0; /* MVのみ左右余白を解除。重要！style.cssの左右余白20px上書き*/
  position:relative;
  width:100%;
  height:100%;
  margin: 0 auto;
}
.mv-title,.mv-catch,.mv-subtitle{
position: absolute;
left:10%;
z-index: 2;
}
.mv-title,.mv-catch{
text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
  z-index: 2;
}
.mv-subtitle{
  top:10%;
    display:inline-flex;
    align-items:center;
    gap:2px;
    background:#1f9d55;
    color:#fff;
    font-weight:700;
    font-size:.95rem;
    padding:7px 20px 7px 12px;
    border-radius:999px;
    box-shadow:0 6px 16px rgba(46,168,213,.22);
    z-index:3;
}
.mv-subtitle svg{
    width:20px;
    height:20px;
    fill:currentColor;
    flex:none;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
 opacity:.95;
 margin-top: 3px;
}
.mv-title{
  top:21%;
  font-size:4.5rem;
  font-weight:900;
  color:#0a2d4a;
  line-height:1.2;
  margin-bottom:10px;
}
.top{
    display:inline-block;
    margin-right:12px;
}
.top5{
    position:relative;
    display:inline-block;
    font-size:.9em;
    z-index:2;
    letter-spacing: -0.1rem;
}
.five{
    position:relative;
    left:15px;
}
/*王冠*/
.top5::before{
    content:"";
    position:absolute;
    width:105px;
    height:68px;
    left:100%;
    top:50%;
    transform:translate(-50%,-50%);
    background:url("../img/crown.webp") center/contain no-repeat;
    z-index:-1;
}

/* MV キャッチコピー */
.mv-catch{
  max-width: 570px;
  top:56%;
  font-size:1rem;
  margin:0;
  padding:0;
  font-weight:500;
  color:#0a2d4a;
}

/* MV内 画像 */
.mv-person{
  position:absolute;
  inset:0;
  z-index:1;
}

.mv-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* =========================
   MV内ナビ
========================= */
.mv-nav{
  position:absolute;
  top:72%;
  left:10%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  width:600px;
  z-index:3;
}
.mv-nav a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:18px 10px;
  background:rgba(255,255,255,.82);
  border:1px solid #d9eef7;
  border-radius:8px;
  color:#0a2d4a;
  text-align:center;
  font-size:1.05rem;
  font-weight:800;
  line-height:1.25;
  box-shadow:0 6px 18px rgba(20,90,130,.08);
  transition:.2s;
}
.mv-nav .read{
  font-size:.72rem;
  font-weight:500;
  color:#4d7288;
  line-height:1.35;
}
.mv-nav a svg{
  width:2rem;
  height:2rem;
}
.mv-nav a:hover{
  border-color:#2EA8D5;
  background:#f9fdff;
  box-shadow:0 10px 24px rgba(46,168,213,.18);
  transform:translateY(-3px) scale(1.04);
}
.habatume2{letter-spacing: -.1rem;}
/* iPad Pro・小型ノート */
@media (min-width:901px) and (max-width:1366px){
.mv-subtitle,.mv-title,.mv-catch,.mv-nav{
left:8%;
}
.mv{
height:460px;
}
.mv-title{
top:21%;
font-size:4rem;
}
.mv-catch{
top:57%;font-size: 0.9rem;letter-spacing: -.04rem;
max-width:520px;
}
.mv-nav{top:72%;gap:8px;}
.mv-nav a{
gap:2px;
padding:12px 10px;
text-align:center;
}
}
/* iPad */
@media (max-width:900px){

.mv{height:360px;}
.mv-subtitle{font-size:.75rem;
padding:6px 18px 6px 10px;}
.mv-title{
top:22%;
font-size:3rem;
}
.mv-title,
.mv-catch,
.mv-subtitle,.mv-nav{
left:6%;
}
.top5::before{
    width:85px;
    height: 55px;
  }
.mv-catch{
  max-width: 450px;font-size: 0.8rem;letter-spacing: -0.04rem;
  top:56%;
}
.mv-nav{top:72%;width:450px;gap:4px;}
.mv-nav a{padding:4px 6px 12px;font-size:.8rem;gap:2px;
}
}

/* スマホ */
@media(max-width:680px){
  .mv{
    height:auto;
    min-height:0;
  }
   .mv-person{
    position:relative;
    z-index:1;
  }
  .mv-person img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .mv-subtitle{
    position:absolute;
    top:5.5%;
    left:5.5%;
    font-size:3vw;
  }
  .mv-title{
    position:absolute;
    top:15%;
    left:5%;
    width:auto;
    white-space:normal; /* ←重要 */
    font-size:15vw;
    line-height:1.15;
  }
  .mv-catch{
    position:absolute;
    font-size:4vw;
    top:48%;
    left:3%;
    width:51%;
    padding: 12px;
  }
  .mv-nav{
    left:1%;
    top:78%;
    width:98%;
    gap:2px;
   font-size:1.125rem; /* 18px */ 
  }
  .mv-nav a{
  font-size:clamp(16px, 4.2vw, 18px);
  gap:6px;
  padding:8px 0 20px;
  }
}


/* =============================================
   ランキング
============================================= */
.ranking-free {
  position:relative;
  min-height:200px!important;
  padding:25px 16px;
  margin-bottom: 25px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.ranking-free:last-child{ margin-bottom: 15px;}
.ranking-free:hover { box-shadow: var(--shadow); transform: translateX(4px); }
.top-medal,.rank-badge,.rank-img,.rank-btn,.rank-name,.rank-desc,.rank-btn{
position:absolute;}
.top-medal{
top:1px;
left:1px;
width:90px;
height:84px;
Z-index:2;
}
.rank-badge {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: flex;
  top:10px;
  left:10px;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  flex-shrink: 0;
  font-family: var(--font-serif);
  Z-index:2;
}
.rank-1,.rank-2,.rank-3{
  background-image:url('../img/medals.webp');
  background-repeat:no-repeat;
  background-size:300% auto;
}
.rank-1{background-position:-2% 0%;}
.rank-2{background-position:55% 0%;}
.rank-3{background-position:107% 0%;}
/* =============================================
   ランキング商品画像
============================================= */
.rank-img {
  width: 140px;
  height: 140px;
  top:20px;
  left:20px;
  object-fit: contain!important;
  border-radius: 8px;
  background: white;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.rank-name,.rank-desc{
  display:block;
  left:180px; 
}
.rank-name { width:76%;top:12%;font-size: 1.8rem; line-height:1.3; font-weight: 700; color: var(--color-dark); margin-bottom: 3px; }
.rank-name span{font-size:80%;}
.rank-desc { width:45%;top:40%;font-size: 0.9rem; color: var(--color-subtext); }
.rank-btn {
  width: 220px;
  background: var(--color-main);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;text-align: center;
  top:70%; right:16px;
  margin:0;
  padding:10px 25px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.rank-btn:hover { background: var(--color-main-dark); color: white; }
/* ランキングカード内 星評価 */
.rank-score-list{
  position:absolute;
  top:12%;
  right:16px;
  width:220px;
  background:#fff;
  border:1px solid #d7eaf5;
  border-radius:8px;
  padding:8px 12px;
  font-size:.78rem;
}
.rank-score-list div{
  display:flex;
  align-items:center;
  gap:8px;
  line-height:1.7;
}
.rank-score-list span{
  width: 50%;
  color:#0a2d4a;
  font-weight:700;
  white-space:nowrap;
}
.rank-score-list b{
  color:#f5a623;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}


#top5,#sapli-hikaku,#seibun,#ninki,#erabi,#chigai,#muryo-sapli,#faq,#kanren{scroll-margin-top:90px;}


/* =========================
   サプリ成分メニュー
========================= */

.supple-menu{
  margin:40px 0 60px;
}
.supple-menu-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:30px auto;
}
.supple-menu-head{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:12px;
  position:relative;
  z-index:2;
}
.supple-menu-card{
  position:relative;
  aspect-ratio:1 / 1;
  padding:16px;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  transition:.2s;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center bottom;
}
.supple-menu-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.rank-medal{
  z-index:2;
  font-size:2rem;
  line-height:1;
  color:#3fa735;
}

.supple-menu-card h3{
  margin:0;
  padding-top: 10px;
  font-size:1.4rem;
  font-weight:900;
  line-height:1.2;
  color:#3fa735;}
.card-jabara h3,.card-quercetin h3{color:#f29a00;}
.card-vitd h3{color:#2386d8;}
.card-shiso h3{color:#8a33d1;}
.card-dha h3{color:#1560c7;}
.card-propolis h3{color:#9a6330;}
.supple-menu-card p{
  margin:0;
  font-size:.95rem;
  line-height:1.8;
  color:#444;
  position:relative;
  z-index:2;
  text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
}

.card-nyusankin,.card-jabara,.card-vitd,.card-shiso,
.card-amacha,.card-dha,.card-quercetin,.card-propolis{
  background-image:url("../img/Sp1.webp");
  background-size:400% 200%;
}
.card-nyusankin{background-position:0.3% 2%;}
.card-jabara{background-position:33.33% 2%;}
.card-vitd{ background-position:66.66% 2%;}
.card-shiso{background-position:99.7% 2%;}
.card-amacha{background-position:0.3% 102%;}
.card-dha{background-position:33.33% 102%;}
.card-quercetin{background-position:66.66% 102%;}
.card-propolis{background-position:99.7% 102%;}
.section-note{
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 10px 14px;
  font-size: .92rem;
  line-height: 1.8;
  color: #4e6070;
  text-align: center;
  background: #f6fbff;
  border: 1px solid #dceef8;
  border-radius: 999px;
}
.criteria-target{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #e8eef5;
  font-size:.85rem;
  color:#2f6da8;
  font-weight:700;
}
.supple-guide-cta{
  text-align:center;
  margin-top:24px;
}

.supple-guide-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  background:linear-gradient(135deg,#2ea6d6,#1c86c8);
  color:#fff;
  font-size:.95rem;
  font-weight:700;
  text-decoration:none;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(46,166,214,.25);
  transition:.25s;
}

.supple-guide-cta a:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(46,166,214,.35);
  background:linear-gradient(135deg,#39b1e3,#2694d4);
}

/* =============================================
   薬ランキングページ（#tumer）専用
============================================= */

.ranking-compare-table thead tr{background:#2EA8D5;color:#fff;}
.ranking-compare-table th{padding:12px 10px;text-align:center;font-weight:700;}
.ranking-compare-table th:first-child{text-align:left;}
.ranking-compare-table td{padding:12px 10px;text-align:center;border-bottom:1px solid #e8f0f5;}
.ranking-compare-table th,
.ranking-compare-table td{
white-space:nowrap;
}
.ranking-compare-table td:first-child{text-align:left;font-weight:700;}
.ranking-compare-table tr.highlight{background:#fffbe6;}
.ranking-compare-table tr:nth-child(even){background:#f8fcff;}
.ranking-compare-table tr.highlight:nth-child(even){background:#fffbe6;}
.ranking-compare-table .tag-recommend{display:inline-block;background:#2EA8D5;color:#fff;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.ranking-compare-table .tag-recommend.orange{background:#e07b00;}
.ranking-compare-table .tag-recommend.green{background:#5ba85b;}
.table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-note{font-size:.78rem;color:#888;margin-top:6px;}

/* 選定基準グリッド */
.criteria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
.criteria-card{background:#f8fcff;border:1px solid #d9eef7;border-radius:10px;padding:0 20px 20px;}
.criteria-card h3{display: flex; align-items: center;font-size:1rem;font-weight:700;color:#1a2f3a;margin-bottom:8px;}
.criteria-card p{font-size:.88rem;line-height:1.8;color:#444;margin:0;}
.icons-su1{
background-image:url('../img/icons-su1.webp');
background-repeat:no-repeat;
background-size:250px auto;
width:40px;
height:40px;
flex-shrink:0;
flex:0 0 40px;
display:inline-flex;
align-items:center;
border-radius: 999px;
margin-right: 4px;
}
.sup-01{background-position:0 0;}
.sup-02{background-position:-43px 3px;}
.sup-03{background-position:-125px 0;}
.sup-04{background-position:-210px 0;}
.sup-05{background-position:0 -43px;}
.sup-06{background-position:-41px -43px;}

:root{
  --free-accent:#1f9d55;
  --free-accent-d:#16793f;
  --free-ink:#0a2d4a;
  --free-line:#e3ebf2;
}
/* レスポンシブ */
@media (min-width: 901px) and (max-width: 1366px) {
.criteria-grid{grid-template-columns:repeat(2,1fr);}
/* 小型ノート・iPad Pro */
.rank-img{
width:120px;
height:120px;top:25px;}
.rank-name,.rank-desc{left:155px; }
.rank-name { font-size: 1.45rem;letter-spacing: -.04rem; }
.rank-desc{top:70px;width:41%;}
.rank-btn{width:170px;top:68%;right:2%;}
.rank-score-list{
top:25px;
right:2%;gap:0;
width:170px;}
.supple-menu-grid{
grid-template-columns:repeat(3,1fr);
gap:8px;
}
.supple-menu-head{gap:6px;}
.supple-menu-card{padding:12px;}
.rank-medal{font-size:1.6rem;}
.supple-menu-card h3{padding-top: 10px; font-size:1.2rem; line-height:1;}
.supple-menu-card p{
  font-size:.85rem;
  line-height:1.5;
}}

@media(max-width:900px){

.supple-menu-grid{
grid-template-columns:repeat(3,1fr);
gap:8px;
}
.supple-menu-head{gap:6px;}
.supple-menu-card{padding:12px;}
.rank-medal{font-size:1.5rem;}
.supple-menu-card h3{padding-top: 10px; font-size:1.2rem; line-height:1;}
.supple-menu-card p{
  font-size:.85rem;
  line-height:1.5;
  text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
}
.ranking-free {
  width: 100%;
  min-height:180px!important;}
.rank-badge {left:1%;top:1%;}
.rank-img{
width:100px;
height:100px;
left:2%;
top:20%;
}
.rank-name,.rank-desc{left:120px; }
.rank-name { width:70%;top:30px; font-size: 1rem; letter-spacing: -.04rem;}
.rank-desc{ top:36%;width:41%;font-size: 0.8rem;line-height: 1.6!important;}
.rank-score-list{
  top:18%;
  width:155px;
  font-size:.7rem;
}
.rank-btn{
width:155px;
top:74%;
padding:6px 12px;
font-size:.75rem;
}}

@media(max-width:680px){
  .supple-menu{
    padding: 0 8px;
  }
 .supple-menu-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
  .supple-menu-card{
    aspect-ratio:0.95;
    min-height:auto;
    padding: 12px;
  }
  .supple-menu-head{
    gap:8px;
    margin-bottom:10px;
  }
  .supple-menu-card h3{
    font-size:4.5vw;
  }
  .rank-medal{
    font-size:1.5rem;
  }
.ranking-free{
min-height:210px!important;
}
.top-medal{
width:60px;
height:55px;
}
.rank-badge{
font-size:1.4rem;
top:1px;
left:1px;
width:33px;
height:33px;
Z-index:2;
}
.rank-img{
top:8px;
left:8px;
width:28%;
height:60%;
object-fit:contain;
}
.rank-name,.rank-desc{
left:33%; 
}
.rank-name{top:6%;font-size:1rem;}
.rank-desc{top:20%;width:65%;font-size:.75rem!important;}
.rank-btn{
left: 3%;right: auto;
top:70%;left:8px;
width:28%;
padding:5px 15px;
font-size:.7rem;
}
 .rank-score-list{
top: 50%;left:33%; right: auto;
width:65%;
padding:5px 16px;
font-size:.75rem;
}

.supple-menu-card p{
font-size:3.2vw;
line-height:1.6;
}
.supple-menu-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.88) 35%,
      rgba(255,255,255,0) 65%
    );
  z-index:1;
}}
.midori{color:#5ba85b !important;}

/* =============================================
   レスポンシブ
============================================= */
@media(max-width:900px){
.rank-name{ font-size: 1.3rem!important;}
.criteria-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:680px){
.criteria-grid{grid-template-columns:1fr;}
.rank-name{ font-size: .9rem!important;}
}


/* =============================================
   ランキング詳細セクション
============================================= */
.ranking-detail-list{
display:flex;
flex-direction:column;
gap:20px;
margin-top:24px;
}
.ranking-card{
border:2px solid #d9eef7;
border-radius:12px;
padding:20px 24px;
background:#fff;
}
.ranking-card.rank-1st{border-color:#d4af37;}
.ranking-card.rank-2nd{border-color:#b0b0b0;}
.ranking-card.rank-3rd{border-color:#cd7f32;}
.ranking-card-header{
display:flex;
align-items:center;
gap:16px;
margin-bottom:12px;
}
.ranking-card-badge{
width:44px;
height:44px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:1.2rem;
font-weight:900;
color:#fff;
flex-shrink:0;
}
.rank-1st .ranking-card-badge{background:linear-gradient(135deg,#f5d061,#d4af37);}
.rank-2nd .ranking-card-badge{background:linear-gradient(135deg,#e8e8e8,#b0b0b0);}
.rank-3rd .ranking-card-badge{background:linear-gradient(135deg,#e0a060,#cd7f32);}
.ranking-card-img{
width:80px;
height:80px;
object-fit:contain;
border:1px solid #e8f0f5;
border-radius:8px;
flex-shrink:0;
}
.ranking-card-title{
font-size:1.05rem;
font-weight:900;
color:#1a2f3a;
margin-bottom:4px;
}
.ranking-card-stars{color:#f5a623;font-size:.9rem;}
.ranking-card p{
font-size:.9rem;
line-height:1.8;
color:#444;
margin-bottom:12px;
}
.btn-cta{
display:block;
background:linear-gradient(135deg,#e74c3c,#c0392b);
color:#fff;
text-align:center;
font-size:1rem;
font-weight:900;
padding:14px 24px;
border-radius:50px;
margin:12px 0 0;
}
.btn-cta:hover{color:#fff;opacity:.9;}
.btn-cta-sub{
display:block;
background:#2EA8D5;
color:#fff;
text-align:center;
font-size:.92rem;
font-weight:700;
padding:14px 24px;
border-radius:50px;
margin:12px 0 0;
}
.btn-cta-sub:hover{background:#1a7fa8;color:#fff;}

.box-warn{
background:#fff8e1;
border:1px solid #ffe082;
border-radius:8px;
padding:14px 18px;
margin:20px 0;
}
.box-warn p{font-size:.85rem;color:#7d5a00;margin:0;}

#ranking-detail .table-scroll{
background:#fff;
border-radius:10px;
border:1px solid #d9eef7;
padding:16px;
margin:0 0 24px;
}
#ranking-detail .ranking-compare-table{
min-width:auto;
width:100%;
}
#ranking-detail .ranking-compare-table th,
#ranking-detail .ranking-compare-table td{
white-space:normal;
}
#ranking-detail{
background:#fff;
border-radius:12px;
border:1px solid #d9eef7;
padding:32px;
margin-top:16px;
}


/* =============================================
   FAQ
============================================= */
.faq-item{
border:1px solid #d9eef7;
border-radius:8px;
margin-bottom:0;
background:#fff;
overflow:hidden;
}
.faq-item summary{
cursor:pointer;
font-weight:700;
font-size:.9rem;
color:#1a2f3a;
padding:18px 20px;
list-style:none;
display:flex;
justify-content:space-between;
align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:'＋';
font-size:.8rem;
color:#2EA8D5;
flex-shrink:0;
}
.faq-item[open] summary::after{content:'－';}
.faq-item p{
padding:0 20px 16px;
font-size:.8rem;
line-height:1.8;
color:#444;
margin:0;
border-top:1px solid #e8f5fb;
}


/* 関連ページ */
.related-links{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.related-links a{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid var(--free-line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--free-ink);font-weight:600;font-size:.92rem;transition:.2s;}
.related-links a:hover{border-color:var(--free-accent);background:#f4f9f6;}
.related-links svg.icon{color:#388E3C}
/* =============================================
   眠気ランキング・ランキング詳細共通
============================================= */

/* FAQ 2カラムグリッド */
.faq-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:20px;
align-items:start;
}
/* 高さ調節 */
.faq-item summary{
padding:8px 16px;
}

@media(max-width:680px){
.faq-item summary, .faq-item summary::after{
font-size:.75rem;}
.faq-item p{
font-size:.75rem;
}
}

/* =============================================
   関連記事グリッド
============================================= */
.related-yakuu-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:20px;
}
.related-yakuu-card{
display:block;
background:#fff;
border:1px solid #d9eef7;
border-radius:8px;
padding:14px;
transition:box-shadow .2s;
}
.related-yakuu-card:hover{
box-shadow:0 4px 12px rgba(0,0,0,.08);
}
.related-yakuu-card.highlight{
border-color:#2EA8D5;
background:#f0f9fd;
}
.related-yakuu-cat{
font-size:.7rem;
font-weight:700;
color:#2EA8D5;
margin-bottom:6px;
}
.related-yakuu-title{
font-size:.82rem;
font-weight:700;
color:#1a2f3a;
line-height:1.5;
}
.related-yakuu-card.highlight .related-yakuu-title{
color:#1a7fa8;
}

@media(max-width:900px){
.related-yakuu-grid,.related-links{grid-template-columns:repeat(2,1fr);}
.tsuyosa-nemuai{display:none;}
}
@media(max-width:680px){
.related-yakuu-grid,.related-links{grid-template-columns:1fr;}
.tsuyosa-item{flex-wrap:wrap;}
.kalam221 a span{display: block;}
}

/* サプリTOP5拡張：4・5位バッジ色（append-only） */
.rank-badge.rank-4,.rank-badge.rank-5{background:#2EA8D5;color:#fff;}

/* 比較表 幅修正：#tumer以外のページ（サプリ等）でも全幅・罫線統合（append-only） */
.ranking-compare-table{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:.92rem;}
.mb24{margin-bottom: 24px;}