/* =============================================
   TOP MV / ファーストビュー
============================================= */
.mv{
  background-image:url('../img/wide-bg.webp');
  background-size:1920px 541px;
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#eaf3fe/*dfeefd/*#EAF7FD*/;
  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,.mv-nav{
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:8%;
    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:18%;
  font-size:4.5rem;
  font-weight:900;
  color:#0a2d4a;
  line-height:1.2;
  margin-bottom:10px;
}

/* MV キャッチコピー */
.mv-catch{
  max-width: 760px;
  top:80.6%;
  font-size:0.9rem;
  margin:0;
  font-weight:bold;
  background:rgba(255,255,255,.50);
  border-radius:16px;
  padding:16px;
  color:#16324A;
}

/* 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{
  top:55%;
  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.2;
}
.mv-nav a svg{
  width:3rem;
  height:3rem;
}
.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);
}
/*main{padding:0 16px;}/*MV以外style.cssに戻す*/

@media (min-width: 901px) and (max-width: 1366px) {
/* 小型ノート・iPad Pro */
.mv{height:480px;
}
.mv-subtitle,.mv-title,.mv-catch,.mv-nav{
left: 6%;
}
.mv-title{
  top:18%;
  font-size:4rem;
}
.mv-catch{max-width: 700px;
top: 80.5%;
}
.mv-nav{  width:550px;top:55%;gap:6px;}
.mv-nav a{
gap:2px;
padding:12px 10px;
text-align:center;
}}
/* iPad sp*/
@media (max-width: 900px) {

.mv{
  height:380px;
  }
.mv-subtitle{
  font-size:.75rem;
  padding:6px 18px 6px 10px;
  }
.mv-title{
  top:20%;
  font-size:2.95rem;
  }
.mv-title,.mv-catch,.mv-subtitle,.mv-nav{
  left:8%;}
.mv-catch{
  max-width: 650px;
  padding:8px 16px;
  font-size: .8rem;
}
.mv-nav{top:55%;width:450px;gap:4px;}
.mv-nav a{padding:8px 6px;font-size:.9rem;gap:2px;
}}
.mv-catch br{ display: none;}
/* スマホ */
@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%;
    font-size:3vw;
  }
  .mv-title{
    position:absolute;
    top:16%;
    left:6%;
    width:auto;
    white-space:normal; /* ←重要 */
    font-size:14vw;/*9.3vw*/
    line-height:1.2;
  }
  .mv-title span{display: block;}
  .mv-catch{
    position:absolute;
    background:none;
    font-size:3.8vw; letter-spacing: -.05rem;
    top:53%;
    left:2.5%;
    width: 95%;
  }
  .mv-catch br{ display: block;}
  .mv-nav{
    left:1%;
    top:70%;
    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;
  }
main{padding:0;}
}

/* =============================================
   MV直下ナビ
   PC：6カード固定
   タブレット：3列×2段
   スマホ：横フリック＋見切れ＋矢印
============================================= */
.page-nav-wrap {
  position: relative;
  max-width: 1200px;
  margin: 30px auto 34px;
}

.page-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.page-nav a{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-width:0;
  min-height:126px;
  padding:18px 6px;
  border:1px solid #d9eef7;
  border-radius:14px;
  background-color:#fff;
  box-shadow:0 7px 20px rgba(20,90,130,.09);
  color:#0a2d4a;
  font-size:1rem;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  overflow:hidden;
}

.page-nav a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/card-bg.webp");
  background-repeat:no-repeat;
  background-size:600px auto;
  opacity:.72;
}
.page-nav a:nth-child(1)::before{background-position:-400px 0;background-color: #fdf6f8;}
.page-nav a:nth-child(4)::before{background-position:-200px 0; background-color: #f8faf7;}
.page-nav a:nth-child(3)::before{background-position:0 0; background-color: #ebf6fc;}
.page-nav a:nth-child(5)::before{background-position:0 100%;background-color: #f3f2f8;}
.page-nav a:nth-child(2)::before{background-position:-200px 100%;background-color: #fef8e8;}
.page-nav a:nth-child(6)::before{background-position:-400px 100%;background-color: #f4f9f5;}

.page-nav a:hover {
  transform: translateY(-4px);
  border-color: #2ea8d5;
  background: #f9fdff;
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(20,90,130,.14);
  color: #0a2d4a;
}

.page-nav a:focus-visible {
  outline: 3px solid rgba(46, 168, 213, 0.35);
  outline-offset: 3px;
}

.page-nav .icons-card {
  flex: none;
  transform: scale(1.2);
  transition: transform 0.2s ease;
}

.page-nav a:hover .icons-card {
  transform: scale(1.28);
}

.page-nav-arrow {
  display: none;
}


.icons-card{
  background-image:url("../img/icons-R2.webp");
  background-repeat:no-repeat;
  background-size:360px auto;
  width:50px;
  height:50px;
  flex-shrink:0;
  flex:0 0 50px;
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
}
.i-kusuri{background-position:0 0;}
.i-supp{background-position:-60px 0;}
.i-muryo{background-position:-243px 0;}
.i-check{background-position:-62px -62px;}
.i-combination{background-position:-310px -62px;}
.i-calendar{background-position:-1px -122.5px;}


.haba{letter-spacing: -.05rem;}
@media (min-width: 901px) and (max-width: 1366px) {
  .page-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
.page-nav a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/card-bg.webp");
  background-repeat:no-repeat;
  background-size:1150px auto;
  opacity:.72;
}
.page-nav a:nth-child(3)::before{background-position:0 8%;}
.page-nav a:nth-child(4)::before{background-position:-400px 8%;}
.page-nav a:nth-child(1)::before{background-position:-800px 25%;}
.page-nav a:nth-child(5)::before{background-position:0 77%;}
.page-nav a:nth-child(2)::before{background-position:-400px 90%;}
.page-nav a:nth-child(6)::before{background-position:-800px 80%;}
}
/* タブレット：3列×2段 */
@media (max-width: 900px) {
  .page-nav-wrap {
    margin: 24px 16px 30px;
  }

  .page-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .page-nav a {
    min-height: 108px;
    padding: 16px 8px;
    font-size: 0.9rem;
  }
  .page-nav a::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("../img/card-bg.webp");
  background-repeat:no-repeat;
  background-size:800px auto;
  opacity:.72;
}
.page-nav a:nth-child(3)::before{background-position:0 8%;}
.page-nav a:nth-child(4)::before{background-position:-290px 8%;}
.page-nav a:nth-child(1)::before{background-position:-530px 25%;}
.page-nav a:nth-child(5)::before{background-position:0 77%;}
.page-nav a:nth-child(2)::before{background-position:-290px 90%;}
.page-nav a:nth-child(6)::before{background-position:-530px 80%;}
}

/* スマホ：横フリック */
@media (max-width: 680px) {
  .flick-lead{
    display:block;
    margin:8px 12px 5px;
    text-align:center;
    font-size:12px;
    font-weight:700;
    color:#49657a;
  }
  .page-nav-wrap {
    max-width: none;
    margin: 18px 0 30px;
    overflow: hidden;
  }

  .page-nav {
    display: flex;
    gap: 2px;
    width: auto;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 42px 12px 10px;
    scroll-padding-left: 14px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
.page-nav a:nth-child(5)::before{background-position:-10px 85%;}
.page-nav a:nth-child(2)::before{background-position:-310px 95%;}
.page-nav a:nth-child(6)::before{background-position:-640px 85%;}
  .page-nav::-webkit-scrollbar {
    display: none;
  }

  .page-nav a {
    flex: 0 0 158px;
    min-height: 102px;
    padding: 15px 9px;
    border-radius: 13px;
    box-shadow: 0 6px 16px rgba(20, 90, 130, 0.09);
    font-size: 0.88rem;
    scroll-snap-align: start;
  }

  .page-nav .icons-12 {
    transform: scale(1.12);
  }

  /* 右側を少し隠して、横に続くことを伝える */
  .page-nav-wrap::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 46px;
    height: calc(100% - 10px);
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.94) 72%,
      #fff 100%
    );
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .page-nav-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(46, 168, 213, 0.94);
    box-shadow: 0 5px 14px rgba(20, 90, 130, 0.22);
    color: #fff;
    font-size: 21px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }

  .page-nav-arrow:hover {
    transform: translateY(-50%) scale(1.06);
  }

  /* JSで最後までスクロールしたときに付くクラス */
  .page-nav-wrap.end::after {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-nav,
  .page-nav a,
  .page-nav .icons-12,
  .page-nav-arrow {
    scroll-behavior: auto;
    transition: none;
  }
}

/* =============================================
   4カテゴリーナビ
============================================= */
.category-nav { padding: 32px 16px; background: var(--color-bg); }
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 36px;
}
.category-card {
position: relative;
height: 200px;
background: var(--color-white);
border: 2px solid var(--color-border);
border-radius: 12px;
padding: 25px 12px;
transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
cursor: pointer;
display: block;
color: var(--color-text);
}
.category-card:hover {
border-color: var(--color-main);
box-shadow: var(--shadow-hover);
transform: translateY(-4px);
color: var(--color-text);
}
.category-icon { font-size: 2.8rem; margin-bottom: 14px; }
.category-card h3 {
display:flex;
justify-content:left;
align-items:center;
gap:4px;
font-size: 1.05rem;
font-weight: 900;
margin-bottom: 15px;
line-height: 1.4;
text-align: left;
}

.category-card p {text-align: left; font-size: 0.82rem; color: var(--color-subtext); line-height: 1.6; margin-bottom: 18px; }
.category-link {
position: absolute;
display: inline-block;
bottom:8%;
left:5%;
background: var(--color-main);
color: white;
font-size: 0.82rem;
font-weight: 700;
padding: 7px 18px;
border-radius:50px;
transition: var(--transition);
}
.category-card:hover .category-link { background: var(--color-main-dark); }
.category-card.free .category-link { background: var(--color-accent); }
.category-card.free:hover .category-link { background: var(--color-accent-dark); }

/* =============================================
   ランキングTOP3プレビュー
============================================= */
.ranking-preview { padding: 32px 0; background: var(--color-white); }
.ranking-section { margin-bottom: 48px; }
.ranking-section:last-child { margin-bottom: 0; }

.ranking-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 3px solid var(--color-main);
}
.ranking-title {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--color-dark);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ranking-more {
  font-size: 0.85rem;
  color: var(--color-main);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ranking-more:hover { color: var(--color-main-dark); }
.ranking-list { display: flex; flex-direction: column; gap: 12px; width: 100%;}
.ranking-item {
  display:flex;
  align-items:flex-start;
  position:relative;
  min-height:200px!important;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
}
.ranking-item:hover { box-shadow: var(--shadow); transform: translateX(4px); }
.rank-badge,.rank-img,.rankings,.rank-name,.rank-desc,.rank-btn{
position:absolute;}

.rank-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  top:1px;
  left:1px;
  flex-shrink:0;
  flex:0 0 80px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  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%;}
/* =============================================
   ランキング商品画像
============================================= */
.rankings{
  width:125px;
  height:125px;
  top:20px;
  left:10px;
  background: white;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  background-image:url(/img/rankings.webp);
  background-repeat: no-repeat;
  background-size:770px auto;
}
.allegra{background-position:0 0;}
.arejion{background-position:-133px 0;}
.allerbi{background-position:-263px 0;}
.kyupy{background-position:-390px 0;}
.jabara{background-position:-523px 0;}
.kirin{background-position:-668px 0;}

.hanaugai{background-position:0 -133px;}
.naos-sapuri{background-position:-129px -133px;}
.line-oc{background-position:-263px -120px;}
.flonase{background-position:-390px -133px;}
.nazal-ar{background-position:-522px -130px;}
.ag-nose-allercut{background-position:-658px -130px;}

.rohto-alguard{background-position:0 -262px;}
.iris-ag{background-position:-129px -262px;}
.noarl-p{background-position:-263px -264px;}
.bilanoa{background-position:-391px -262px;}
.desalex{background-position:-517px -262px;}
.alock{background-position:-649.5px -264px;}

.rank-name,.rank-desc{
  display:block;
  width:65%;
  left:170px;
}
.rank-name { top:22px; font-size: 1.1rem; line-height:1.3; font-weight: 700; color: var(--color-dark); margin-bottom: 3px; }
.rank-desc { top:55px;font-size: 0.85rem; color: var(--color-subtext);font-weight: 500; line-height: 1.2;}
.rank-stars { color: var(--color-gold); font-size: 0.9rem; margin-top: 4px; }
.rank-btn {
  background: var(--color-main);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
 left:78%;
  bottom:16px;
  margin:0;
  padding:12px 25px;
  border-radius: 50px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
}
.rank-btn:hover { background: var(--color-main-dark); color: white; }
/* =============================================
   ランキング 2カラム横並び  ③ ランキング導線ブロック
============================================= */
.ranking-columns {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  gap: 32px;
  align-items: start;
}
.ranking-columns .ranking-section {
  margin-bottom: 0;
}
.ranking-columns {
  display: grid;
  grid-template-columns:repeat(2,1fr);
  gap: 32px;
  align-items: start;
}

.ranking-columns--second { margin-top: 32px; }
.ranking-nav-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:24px;
}
.ranking-nav-card{
display:flex;
align-items:center;
gap:14px;
background:#fff;
border:1px solid var(--color-border);
border-radius:10px;
padding:14px 16px;
transition:box-shadow var(--transition);
color:var(--color-text);
}
.ranking-nav-card:hover{
box-shadow:var(--shadow);
color:var(--color-text);
}
.ranking-nav-icon{
flex-shrink:0;
width:36px;
height:36px;
}
.ranking-nav-icon img{
width:100%;
height:100%;
object-fit:contain;
}

.ranking-nav-title{
font-size:1.1rem;
font-weight:700;
color:var(--color-dark);
margin-bottom:2px;
}
.ranking-nav-desc{
font-size:.8rem;
color:var(--color-subtext);
}
.ranking-nav-arrow{
flex-shrink:0;
color:var(--color-main);
font-weight:700;
font-size:1rem;
}

/* ランキングカード内 星評価 */
.rank-score-list{
  position:absolute;
  top:45%;
  left:175px;
  width:150px;
  font-size:.85rem;
}
.rank-score-list div{
  display:flex;
  align-items:center;
  line-height:1.7;
}
.rank-score-list span{
  width: 50%;
  color:#123047;
  font-weight:700;
  font-size:.78rem;
  white-space:nowrap;
}
.rank-score-list b{
  font-weight:900;
  font-size:.88rem;
  letter-spacing:.04em;
  white-space:nowrap;
}
/* 1行目：総合 */
.rank-score-list div:nth-child(1) span,
.rank-score-list div:nth-child(1) b{
  color:#f5a623;
}
/* 2行目：効果 */
.rank-score-list div:nth-child(2) span,
.rank-score-list div:nth-child(2) b{
  color:#2EA8D5;
}
/* 3行目：眠気 */
.rank-score-list div:nth-child(3) span,
.rank-score-list div:nth-child(3) b{
  color:#22a447;
}
/* 4行目：価格 */
.rank-score-list div:nth-child(4) span{ color: #666;} 
.rank-score-list div:nth-child(4) b{
  color:#0b63c9;
  font-weight:700;
}

.ss70pc{font-size:70%; letter-spacing: -.04rem;}

#top3,#cate,#nani,#kafunsyo-toha,#faq,#kiji1,#syojo,#chisiki,#articles,#sagasu{scroll-margin-top:90px;}
/* レスポンシブ */
@media (min-width: 901px) and (max-width: 1366px) {
/* 小型ノート・iPad Pro */
.ranking-columns {
    grid-template-columns:repeat(2,1fr);
    gap:2%;
  }
.rank-name,.rank-desc{
left:150px; 
}
.rank-name{
white-space: nowrap;
}
.habatume3{ letter-spacing: -.1rem;}
.rank-desc{font-size:.75rem;width:62%;}
.rank-btn {left:72%;}

.rank-score-list{
  top:48%;
  left:150px;
  width:155px;}

.rank-score-list div{
  line-height:1.5;
}
.category-card {height:200px;padding: 16px 8px;}
}

@media (max-width: 900px) {
.category-grid { grid-template-columns: repeat(2, 1fr);}
.category-grid { grid-template-columns: repeat(2, 1fr); gap: 4px;margin-top: 25px;}
.category-card {height:170px;padding: 20px 8px;}
.category-card h3 {font-size: .92rem;}
.category-card p { font-size: 0.8rem; letter-spacing: -0.03rem;}
.category-link {
font-size: 0.8rem;padding: 7px 10px;}
.ranking-nav-grid{
grid-template-columns:repeat(2,1fr);
gap:4px;
} 
.ranking-columns {
grid-template-columns:repeat(2,1fr);
gap: 12px;
}
.rank-badge {
width: 70px;
height: 70px;
}
.ranking-item{min-height:210px!important;}
.rankings{
  width:100px;
  height:100px;
  top:25px;
  left:5px;
  background-image:url(/img/rankings.webp);
  background-repeat: no-repeat;
  background-size:600px auto;
}
.allegra{background-position:0 0;}
.arejion{background-position:-100px 0;}
.allerbi{background-position:-200px 0;}
.kyupy{background-position:-303px 0;}
.jabara{background-position:-407px 0;}
.kirin{background-position:-520px 0;}

.hanaugai{background-position:0 -100px;}
.naos-sapuri{background-position:-100px -100px;}
.line-oc{background-position:-200px -100px;}
.flonase{background-position:-300px -98px;}
.nazal-ar{background-position:-398px -95px;}
.ag-nose-allercut{background-position:-502px -100px;}

.rohto-alguard{background-position:0 -200px;}
.iris-ag{background-position:-103px -200px;}
.noarl-p{background-position:-205px -200px;}
.bilanoa{background-position:-304px -200px;}
.desalex{background-position:-405px -200px;}
.alock{background-position:-505px -200px;}
.rank-name,.rank-desc{
left:120px;
}
.rank-name{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-name span{
font-size:80%;
}
.rank-desc{top:50px;}
.rank-btn {
left: 72.5%;
bottom:8%;
padding:8px 18px;
font-size:.75rem;
}
.rank-score-list{
top:45%;
left:120px;
width:140px;
}}

@media(max-width:680px){
.category-grid { grid-template-columns: repeat(2, 1fr); gap: 4px;margin-top: 25px;}
.category-card { height:210px;padding: 20px 5px;}
.category-card h3 {font-size: .92rem;}
.category-card p { font-size: 0.8rem; letter-spacing: -0.03rem;}
.category-link {
font-size: 0.8rem;padding: 7px 10px;}
.ranking-columns {
  grid-template-columns: 1fr;
}
.ranking-nav-grid{
grid-template-columns:1fr;
gap:12px;
}
.ranking-item{
min-height:190px!important;
}
.rank-badge,.rank-img,.rank-btn{
position:absolute;}
.rank-badge{
top:0px;
left:0px;
width:60px;
height:60px;
Z-index:2;
}
.rankings{
  width:80px;
  height:80px;
  top:20px;
  left:8px;
  background-image:url(/img/rankings.webp);
  background-repeat: no-repeat;
  background-size:480px auto;
}
.allegra{background-position:0 0;}
.arejion{background-position:-80px 0;}
.allerbi{background-position:-160px 0;}
.kyupy{background-position:-243px 0;}
.jabara{background-position:-328px 0;}
.kirin{background-position:-415px 0;}

.hanaugai{background-position:0 -80px;}
.naos-sapuri{background-position:-80px -80px;}
.line-oc{background-position:-160px -75px;}
.flonase{background-position:-243px -80px;}
.nazal-ar{background-position:-324px -80px;}
.ag-nose-allercut{background-position:-410px -80px;}

.rohto-alguard{background-position:0 -160px;}
.iris-ag{background-position:-78px -165px;}
.noarl-p{background-position:-162px -165px;}
.bilanoa{background-position:-243px -160px;}
.desalex{background-position:-321px -160px;}
.alock{background-position:-403px -160px;}

.rank-name,.rank-desc{
left:96px;
width: 68%;
}
.rank-name{top:20px;font-size:1.2rem;}
.rank-name span{font-size:65%;}
.rank-desc{font-size:.8rem;}
.rank-stars{font-size:.65rem;}
.rank-btn {
left: 71%;
bottom:10%;
padding:10px 18px;
font-size:.7rem;
}
.rank-score-list{
top: 46%;
left: 96px;
width:43%;
font-size:.75rem;
}
.rank-score-list div{
  line-height:1.4;
}}


/* 症状から探す：グループ整理版 */
.symptom-group-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.symptom-group-card{
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  padding:22px 20px;
}

.symptom-group-card h3{
  font-size:1.05rem;
  font-weight:900;
  color:var(--color-dark);
  padding-bottom:10px;
  margin-bottom:12px;
  border-bottom:2px solid var(--color-main);
}

.symptom-group-links{
  display:flex;
  flex-direction:column;
}

.symptom-group-links a{
  display:block;
  padding:9px 0;
  border-bottom:1px solid #eef5f8;
  font-size:.88rem;
  font-weight:700;
  color:var(--color-dark);
  line-height:1.55;
}

.symptom-group-links a:last-child{
  border-bottom:none;
}

.symptom-group-links a:hover{
  color:var(--color-main);
}

@media(max-width:680px){
  .symptom-group-grid{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* =============================================
   ⑤ 花粉症の基礎知識
============================================= */
.kisochishiki-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:24px;
}
.kisochishiki-card{
display:block;
background:#fff;
border:1px solid var(--color-border);
border-radius:10px;
padding:20px;
transition:box-shadow var(--transition);
color:var(--color-text);
}
.kisochishiki-card:hover{
box-shadow:var(--shadow);
}
.kisochishiki-title{
font-size:1rem;
font-weight:900;
color:var(--color-dark);
margin-bottom:8px;
}
.kisochishiki-card p{
font-size:.85rem;
line-height:1.75;
color:var(--color-subtext);
margin-bottom:12px;
}
.kisochishiki-link{
font-size:.82rem;
font-weight:700;
color:var(--color-main);
}

@media(max-width:680px){
.kisochishiki-grid{grid-template-columns:1fr;}
}

/* 今何花粉？ */
.no-rap{white-space: nowrap;}
.season-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
margin-top:24px;
}
.season-card{
background:#fff;
border:1px solid var(--color-border);
border-radius:10px;
padding:24px 6px;
text-align:center;
}

.season-card h3{
font-size:1.1rem;
font-weight:900;
margin-bottom:8px;
color:var(--color-main);
}

.season-card p{
font-size:.95rem;
font-weight:700;
margin-bottom:6px;
}

.season-card span{
font-size:.8rem;
color:var(--color-subtext);
}
.season-feature-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:30px;
}

.season-feature-card{
  display:flex;
  align-items:flex-start;
  gap:5px;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:14px;
  padding:12px;
  color:var(--color-text);
  transition:.2s;
}

.season-feature-card:hover{
  box-shadow:var(--shadow);
  transform:translateY(-3px);
}
.season-feature-image{
  flex:0 0 160px;
}

.season-feature-image img{
  width:150px;
  height:170px;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.season-feature-body{
  flex:1;
  min-width:0;
}
.season-feature-body h3{
  font-size:1.2rem;
  font-weight:900;
  color:var(--color-main);
  letter-spacing: -0.02rem;
  margin-bottom:8px;
}
.season-feature-body p{
  font-size:.8rem;
  line-height:1.2;
  color:var(--color-subtext);
}
.season-points{
  margin-top:10px;
  padding:0;
  list-style:none;
}
.season-points li{
  font-size:.88rem;
  font-weight:700;
}
.season-points li::before{
  content:"✓";
  color:var(--color-main);
  margin-right:8px;
}
.season-cta-btn{
  display:inline-block;
  margin-top:16px;
  background:var(--color-main);
  color:#fff;            /* ←白文字 */
  padding:10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
}
@media (max-width: 900px) {
  .season-feature-grid{
    grid-template-columns:1fr;
    gap:8ppx;
  }
  .season-feature-image{
  flex:0 0 170px;
}
.season-feature-image img{
  width:160px;
  height:160px;
}
}
@media(max-width:680px){
  .season-card{padding:18px 6px;}
  .season-card span{
font-size:.725rem;letter-spacing: -0.02rem;}

.season-feature-card{padding:4px;}
.season-feature-image{
  flex:0 0 105px;
}
.season-feature-image img{
  width:100px;
  height:100px;
}
  .season-feature-body h3{
    font-size:1rem;letter-spacing: -0.02rem;
  }
.season-points li{
  font-size:.8rem;}
}


/* =========================
   人気記事TOP6
========================= */

.popular-articles-grid{
  width:100%;
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:28px;
}

.popular-article-card{
  display:block;
  padding:0 0 20px 0/*22px 20px*/;
  background:#fff;
  border:1px solid var(--color-border);
  border-radius:12px;
  color:var(--color-text);
  transition:.2s;
}

.popular-article-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow);
  color:var(--color-text);
}

.popular-article-label{
  display:inline-block;
  background:var(--color-main);
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  margin-left: 18px;
  margin-bottom:6px;
}

.popular-article-card h3{
  font-size:1rem;
  font-weight:900;
  color:var(--color-dark);
  line-height:1.45;
  margin:0 8px 8px;
}

.popular-article-card p{
  font-size:.84rem;
  color:var(--color-subtext);
  line-height:1.7;
  margin-left: 18px;
}
.article-thumb1{background-image:url("../img/kiji-sam1.webp");}
.article-thumb2{background-image:url("../img/kiji-sam2.webp");}
.article-thumb1,.article-thumb2{
  width:100%;
  height: auto;
  aspect-ratio:300 / 169;
  border-radius:10px 10px 0 0;
  margin-bottom:14px;
  background-repeat:no-repeat;
  background-size:305% auto;
}
.thumb01{background-position:0 0;}/*article-thumb1 とarticle-thumb2　位置共通*/
.thumb02{background-position:50% 0;}/*article-thumb1 とarticle-thumb2　位置共通*/
.thumb03{background-position:100% 0;}/*article-thumb1 とarticle-thumb2　位置共通*/
.thumb04{background-position:0 100%;}
.thumb05{background-position:50% 100%;}
.thumb06{background-position:100% 100%;}



@media (max-width: 900px) {
.popular-articles-grid{
width:100%;
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.popular-article-card h3{
font-size:0.8rem; margin-left:8px;
}
.popular-article-card p{
font-size:.75rem; margin-left:8px;
}
}
@media(max-width:680px){
.season-grid{
grid-template-columns:repeat(2,1fr);
}
.popular-articles-grid{
grid-template-columns:repeat(2,1fr);
gap:5px;
}

}