/* =============================================
 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: 700px;
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: 680px;
top: 80.5%;
font-size: .85rem;font-weight: 600;
}
.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{
top:83%;
max-width: 620px;
padding:8px 16px;
font-size: .78rem;font-weight: 500;
}
.mv-nav{top:55%;width:450px;gap:3px;}
.mv-nav a{padding:6px 6px 8px;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;}
.kafun-johou{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;
right:2%;text-align: center;
bottom:16px;
margin:0;
padding:12px 20px;
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,#symptom-ranking,#sagasu{
scroll-margin-top:90px;}
.osusume-heading{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
}
.osusume-heading .section-title{
margin:0;
}
.deco{
position:relative;
width:34px;
height:28px;
flex:none;
}
.deco i{
position:absolute;
width:4px;
height:14px;
background:#4da9f5;
border-radius:4px;
top:8px;
}
/* 左 */
.deco-left i:nth-child(1){
left:12px;
transform:rotate(-80deg);
top:5px;
}
.deco-left i:nth-child(2){
left:18px;
transform:rotate(-47.5deg);
top:-7px;
}
.deco-left i:nth-child(3){
left:30px;
transform:rotate(-15deg);
top:-13px;
}
/* 右 */
.deco-right i:nth-child(1){
right:12px;
transform:rotate(80deg);
top:5px;
}
.deco-right i:nth-child(2){
right:18px;
transform:rotate(47.5deg);
top:-7px;
}
.deco-right i:nth-child(3){
right:30px;
transform:rotate(15deg);
top:-13px;
}
.osusume-grid,.kisochishiki-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-top:24px;
}
.osusume-card {
position:relative;
display:block;
height:250px;
background-image:url("/img/osusume-ranking.webp");
background-repeat:no-repeat;
background-size:600px auto;
border:1px solid #e2eef4;
border-radius:14px;
text-decoration:none;
overflow:hidden;
transition:border-color .15s,transform .12s,box-shadow .12s;
}
.osusume-card:hover {
border-color:#9ed3e8;
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(26,111,149,.09);
}
.osusume-card:nth-child(1){background-position: 0 -50px;}
.osusume-card:nth-child(2){background-position: 0 -350px;}
.osusume-card svg,.baa,.lee,.md1,.md2{position: absolute;}
.md1,.md2{display: block;}
.osusume-card svg,.osusume-card h3,.md2,.lee,.baa{left:5%;}
.osusume-card svg{width:4.5rem;height: 4.5rem;top:3%;}
.osusume-card h3{font-size: 1.5rem!important; color: #0a2d4a!important;}
.md1{top:10%;left:17%;}
.md2{top:30%;font-size: 2rem!important;color: #014bb3!important;}
.osusume-card h3 span.kusurisapli{color:#267f45!important;}
.lee{top:55%; color: #0a2d4a!important;}
.baa{top:70%; width:48%;padding:12px 30px;border-radius:999px;background-color:#014bb3 ;color: #fff!important;font-size: 1rem; font-weight: bold;text-align: center;}
.osusume-grid .osusume-card:nth-child(2) .baa{background-color:#267f45}
/* レスポンシブ */
@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;
}
.osusume-card {
height:250px;
background-size:550px auto;}
.osusume-card:nth-child(1){background-position: -50px -30px;}
.osusume-card:nth-child(2){background-position: -50px -300px;}
.md1{left:20%;}
.baa{width:43%;padding:12px 20px;}
.category-card {height:200px;padding: 16px 8px;}
}

@media (max-width: 900px) {
.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:230px!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;}
.kafun-johou{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 {
bottom:8%;
padding:8px 18px;
font-size:.75rem;
}
.rank-score-list{
top:45%;
left:120px;
width:140px;
}
.osusume-card {
height:230px;
background-size:480px auto;}
.osusume-card:nth-child(1){background-position: -60px 0px;}
.osusume-card:nth-child(2){background-position: -60px -240px;}
.osusume-card svg{width:3rem;height: 3rem;top:5%;left:3%;}
.osusume-card h3{font-size: 1.2rem!important; color: #0a2d4a!important;}
.md1{top:10%;left:17%;}
.md2{top:30%;font-size: 1.5rem!important;}
.osusume-card h3 span.kusurisapli{color:#267f45!important;}
.lee{top:50%;}
.baa{top:70%; width:49%;padding:12px 6px;font-size: 1rem;}
.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;
}}

@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:210px!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;}
.kafun-johou{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 {
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;
}
.osusume-heading{
gap:8px;
}
.deco{
width:24px;
height:22px;
}
.deco i{
width:3px;
height:10px;
}
.deco-left i:nth-child(1){left:1px;top:10px;}
.deco-left i:nth-child(2){left:5px;top:5px;}
.deco-left i:nth-child(3){left:10px;top:0px;}
.deco-right i:nth-child(1){right:1px;top:10px;}
.deco-right i:nth-child(2){right:5px;top:5px;}
.deco-right i:nth-child(3){right:10px;top:0px;}
.osusume-card {
height:200px;
width: 100%;
background-size:500px auto;
background-position: right top;}
.osusume-card:nth-child(1){background-position: 75% -40px;}
.osusume-card:nth-child(2){background-position: 60% -290px;}
.osusume-card svg{width:3rem;height: 3rem;top:5%;left:3%;}
.osusume-card h3{font-size: 1.2rem!important; color: #0a2d4a!important;}
.md1{top:10%;left:17%;}
.md2{top:30%;font-size: 1.5rem!important;}
.osusume-card h3 span.kusurisapli{color:#267f45!important;}
.lee{top:50%; font-size: .8rem;}
.baa{top:70%; width:49%;padding:12px 6px;font-size:.9rem;
}}

/* 症状から探す：グループ整理版 */
.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-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-sam4.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;
}
.osusume-grid{grid-template-columns:1fr;}
}


/* =============================================
   サイトTOP：花粉症サプリ「効く？」注目特集
   4カードは置かず、親ページへの1導線だけ強く見せる
============================================= */
.top-kiku-feature{
  padding:34px 0 40px;
}
.top-kiku-feature-card{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  min-height:250px;
  overflow:hidden;
  background:linear-gradient(135deg,#f5fbf7 0%,#ffffff 65%);
  border:1px solid #d9eade;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(31,157,85,.08);
  color:#0a2d4a;
  text-decoration:none;
  transition:.2s;
}
.top-kiku-feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(31,157,85,.13);
  color:#0a2d4a;
}
.top-kiku-feature-copy{
  padding:30px 34px;
  align-self:center;
}
.top-kiku-feature-label{
  display:inline-block;
  margin-bottom:10px;
  padding:5px 13px;
  background:#1f9d55;
  border-radius:999px;
  color:#fff;
  font-size:.76rem;
  font-weight:800;
}
.top-kiku-feature-copy h2{
  margin:0 0 14px;
  color:#0a2d4a;
  font-size:1.65rem;
  font-weight:900;
  line-height:1.45;
}
.top-kiku-feature-copy h2 span{
  display:block;
  color:#1f9d55;
}
.top-kiku-feature-copy p{
  margin:0 0 20px;
  color:#4b6472;
  font-size:.94rem;
  line-height:1.8;
}
.top-kiku-feature-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 22px;
  background:#1f9d55;
  border-radius:999px;
  color:#fff;
  font-size:.88rem;
  font-weight:900;
}
.top-kiku-feature-visual{
  width:100%;
  height:100%;
  min-height:250px;
  background-image:url("../img/suppliment-kafunsyouni-kiku.webp");
  background-repeat:no-repeat;
  background-size:100% auto;
  background-position:center 50%;
}



@media(max-width:900px){
  .top-kiku-feature-card{
    grid-template-columns:minmax(0,1.3fr) minmax(230px,.7fr);
    min-height:220px;
  }
  .top-kiku-feature-copy{
    padding:24px;
  }
  .top-kiku-feature-copy h2{
    font-size:1.35rem;
  }
  .top-kiku-feature-visual{
    min-height:220px;
  }
}

@media(max-width:680px){
  .top-kiku-feature{
    padding:24px 10px 30px;
  }
  .top-kiku-feature-card{
    display:block;
    min-height:0;
  }
  .top-kiku-feature-copy{
    padding:20px 16px 16px;
  }
  .top-kiku-feature-copy h2{
    font-size:1.25rem;
  }
  .top-kiku-feature-copy p{
    font-size:.88rem;
    line-height:1.7;
  }
  .top-kiku-feature-btn{
    width:100%;
    padding:11px 10px;
    font-size:.82rem;
  }
  .top-kiku-feature-visual{
    height:36vw;
    min-height:130px;
    max-height:190px;
    background-size:100% auto;
    background-position:center top;
  }

.top-kiku-feature{
  padding:16px 0 32px;
}
.top-kiku-feature-visual{
  width:100%;
  height:80vw;
  background-image:url("../img/suppliment-kafunsyouni-kiku.webp");
  background-repeat:no-repeat;
  background-size:70vw auto;
  background-position:center 50%;
}
}

/* =============================================
   サイトTOP：症状別ランキング
   ランキングTOP「症状別に探す」と同デザイン
============================================= */
.top-symptom-ranking{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.top-symptom-ranking-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:18px;
}
.top-symptom-ranking-card{
  position:relative;
  display:block;
  min-height:135px;
  padding:18px 20px 18px 65px;
  background:#fff;
  border:1px solid #e2eef4;
  border-radius:14px;
  text-decoration:none;
  overflow:hidden;
  transition:border-color .15s,transform .12s,box-shadow .12s;
}
.top-symptom-ranking-card:hover{
  border-color:#9ed3e8;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(26,111,149,.09);
}
.top-symptom-ranking-card .rh-cat{
  display:block;
  margin-bottom:4px;
  font-size:.78rem;
  font-weight:800;
  color:#2EA8D5;
  letter-spacing:.02em;
}
.top-symptom-ranking-card .rh-title{
  display:block;
  margin:6px 0;
  font-size:1.15rem;
  font-weight:800;
  color:#15303c;
  line-height:1.35;
}
.top-symptom-ranking-card .rh-desc{
  display:block;
  max-width:95%;
  font-size:.85rem;
  line-height:1.65;
  color:#546d7c;
  font-weight:700;
}
.top-symptom-ranking-card .rh-title,
.top-symptom-ranking-card .rh-desc{
  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;
}
.top-symptom-ranking-card .rh-go{
  display:block;
  margin-top:8px;
  font-size:.85rem;
  font-weight:800;
  color:#1a7fa8;
}
.top-symptom-ranking-card::before{
  content:"";
  position:absolute;
  left:16px;
  top:16px;
  width:40px;
  height:40px;
  background-image:url("/img/icons-R4.webp");
  background-repeat:no-repeat;
  background-size:285px auto;
  border-radius:999px;
}
.top-symptom-ranking-card::after{
  content:"";
  position:absolute;
  top:10%;
  right:5%;
  width:130px;
  height:90px;
  background-image:url("/img/icons-R3.webp");
  background-repeat:no-repeat;
  background-size:680px 215px;
  z-index:0;
  pointer-events:none;
}
.top-symptom-ranking-card > span{
  position:relative;
  z-index:1;
}
.top-symptom-ranking-card.card-runny-nose::before{background-position:-143px 0;}
.top-symptom-ranking-card.card-stuffy-nose::before{background-position:-0.5px -94px;}
.top-symptom-ranking-card.card-sneeze::before{background-position:-192px -46px;}
.top-symptom-ranking-card.card-eye::before{background-position:-193px -141.5px;}
.top-symptom-ranking-card.card-runny-nose::after{background-position:-385px -164px;}
.top-symptom-ranking-card.card-stuffy-nose::after{background-position:-265px -164px;}
.top-symptom-ranking-card.card-sneeze::after{background-position:-385px -164px;}
.top-symptom-ranking-card.card-eye::after{background-position:-520px -164px;}

@media(max-width:900px){
  .top-symptom-ranking-grid{gap:2px;}
  .top-symptom-ranking-card{
    min-height:200px;
    padding:12px 4px 16px 50px;
  }
  .top-symptom-ranking-card::before{left:5px;top:12px;}
  .top-symptom-ranking-card::after{
    top:80%;
    transform:translateY(-50%);
    width:120px;
    height:90px;
    background-size:680px 215px;
  }
}
@media(max-width:680px){
  .top-symptom-ranking{padding-left:10px;padding-right:10px;}
  .top-symptom-ranking-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .top-symptom-ranking-card{
    min-height:190px;
    padding:12px 4px 24px 50px;
  }
  .top-symptom-ranking-card::before{left:5px;top:12px;}
  .top-symptom-ranking-card::after{
    top:80%;
    transform:translateY(-50%);
    width:120px;
    height:90px;
    background-size:680px 215px;
  }
}


/* =========================================================
   よく読まれている花粉症記事：見やすさ調整
   PC 3列 / iPad 2列 / スマホ 2列
   スプライト1コマを16:9で欠けずに表示
========================================================= */

#kiji1{
  padding-top:38px;
  padding-bottom:42px;
  background:#fff;
}

#kiji1 .popular-articles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}

#kiji1 .popular-article-card{
  overflow:hidden;
  padding-bottom:18px;
  border-radius:12px;
  background:#fff;
}

#kiji1 .article-thumb1{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  margin:0 0 13px;
  border-radius:10px 10px 0 0;

  /* 3列×2段のスプライトを各コマぴったり表示 */
  background-size:300% 200%;
  background-repeat:no-repeat;
}

/* スプライト座標 */
#kiji1 .article-thumb1.thumb01{background-position:0% 0%;}
#kiji1 .article-thumb1.thumb02{background-position:50% 0%;}
#kiji1 .article-thumb1.thumb03{background-position:100% 0%;}
#kiji1 .article-thumb1.thumb04{background-position:0% 100%;}
#kiji1 .article-thumb1.thumb05{background-position:50% 100%;}
#kiji1 .article-thumb1.thumb06{background-position:100% 100%;}

#kiji1 .popular-article-label{
  margin-left:14px;
  margin-bottom:6px;
}

#kiji1 .popular-article-card h3{
  margin:0 14px 7px;
  font-size:.98rem;
  line-height:1.45;
}

#kiji1 .popular-article-card p{
  margin:0 14px;
  font-size:.82rem;
  line-height:1.6;
}
.article-map h3,.symptom-nav h3,.kisochishiki-title{display:flex;align-items: center; gap: 2px;}
/* iPad・タブレット：2列にして画像を十分な大きさで見せる */
@media (max-width:900px){
  #kiji1 .popular-articles-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  #kiji1 .popular-article-card h3{
    margin:0 12px 6px;
    font-size:.9rem;
  }

  #kiji1 .popular-article-card p{
    margin:0 12px;
    font-size:.76rem;
  }

  #kiji1 .popular-article-label{
    margin-left:12px;
  }
}

/* スマホ：2列を維持。画像は16:9のまま切らない */
@media (max-width:680px){
  #kiji1{
    padding-top:28px;
    padding-bottom:32px;
  }

  #kiji1 .popular-articles-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:20px;
  }

  #kiji1 .popular-article-card{
    padding-bottom:12px;
    border-radius:9px;
  }

  #kiji1 .article-thumb1{
    aspect-ratio:16 / 9;
    margin-bottom:9px;
    border-radius:8px 8px 0 0;
    background-size:300% 200%;
  }

  #kiji1 .popular-article-label{
    margin-left:8px;
    margin-bottom:5px;
    padding:2px 8px;
    font-size:.64rem;
  }

  #kiji1 .popular-article-card h3{
    margin:0 8px 5px;
    font-size:.76rem;
    line-height:1.4;
  }

  #kiji1 .popular-article-card p{
    margin:0 8px;
    font-size:.68rem;
    line-height:1.48;
  }
}