/* =========================================================
 supple-evidence.css
 「〇〇は花粉症に効く？」特化ページ共通CSS
 対象：
 - kafun-supplement.html
 - kafun-nyusankin-supplement.html
 - kafun-jabara.html
========================================================= */

/* =============================================
 TOP MV / ファーストビュー
============================================= */
.mv{
background-color: #e5f3fb;
position:relative;
overflow:hidden;
display:flex;
height:320px;
}
.mv .container{
padding:0;
position:relative;
width:100%;
height:100%;
margin:0 auto;
}
/* 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-subtitle, .mv-title, .mv-catch{
position:absolute;}
.mv-subtitle, .mv-title, .mv-catch{left:10%;}

.mv-subtitle{
top:8%;
display:inline-flex;
align-items:center;
gap:2px;
background:#1f9d55;
color:#fff;
font-size:.95rem;
font-weight:500;
padding:7px 20px 7px 12px;
border-radius:999px;
box-shadow:0 6px 16px rgba(46,168,213,.22);
z-index:2;
}

.mv-subtitle svg{
width:20px;
height:20px;
fill:currentColor;
flex:none;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
opacity:.95;
}
.mv-title{
top:23%;
font-size:2.8rem;
color:#0a2d4a;
font-weight:900;
line-height:1.2;
margin:0;
z-index: 2;
}

.mv-catch{
top:60%;
max-width:600px;
color:#0a2d4a;
font-size:1.15rem;
font-weight:500;
line-height:1.8;
margin:0;
z-index: 2;
}
main{padding:0;}

@media (min-width: 901px) and (max-width: 1366px) {
/* 小型ノート・iPad Pro */
.mv-subtitle, .mv-title, .mv-catch{left:8%;}
.mv-title{font-size:2.5rem;}
.mv-catch{
width: 550px;
font-size:1rem; line-height:1.5;}
}

/* iPad */
@media (max-width:900px){
.mv{
height:250px;
}

.mv-subtitle{
font-size:.75rem;
padding:6px 18px 6px 10px;
}
.mv-title{
top:25%;
font-size:2.1rem;
}
.mv-subtitle, .mv-title, .mv-catch{left:8%;}
.mv-catch{
top:60%;width: 400px;
font-size:0.8rem;}

}
/* スマホ */
@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, .mv-title, .mv-catch{left:5%;}
.mv-subtitle{
top:8%;
font-size:3vw;
}
.mv-title{
top:23%;
width:auto;
white-space:normal;
font-size:10vw;
line-height:1.15;
}
.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;
}
.mv-catch{
font-size:3.8vw;
top:65%;
width:55%;
}
}

.simple-body ul.kaori{
display:grid !important;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px 24px;
list-style:none;
padding:0;
margin:16px 0;
}


/* じゃばら製品一覧 カード（スプライト） */
.seihin-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:24px;
}
.seihin-card{
display:flex;
align-items:flex-start;
gap:10px;
background:#fff;
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:8px;
text-align:left;
}
.seihin-icon{
flex:none;
width:90px;
height:90px;
border-radius:10px;
background-image:url("/img/jabaras.webp");
background-repeat: no-repeat;
background-size:280px auto;
}
.seihin-icon--supple{background-position:100% 0;}
.seihin-icon--kajyu{background-position:0 0;}
.seihin-icon--funmatsu{background-position:50% 0%;}
.seihin-icon--ame{background-position:0 -95px;}
.seihin-icon--juice{background-position:-100px -95px}
.seihin-icon--suitsu{background-position:100% 100%;}

.seihin-body{text-align:left;}
.seihin-title{
font-weight:700;
font-size:.95rem;
margin:5px 0 4px!important;
font-size: 1.2rem!important;
text-align:left;
}
.seihin-title a{color:var(--free-ink,#0a2d4a);}
.seihin-desc{
font-size:.85rem;
color:#555;
margin:0;
text-align:left;
}

/* 比較表 */

.compare-table{
width: auto;
min-width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
margin-bottom: 24px;
}
.compare-table th, .compare-table td{
padding: 10px 14px;
border: 1px solid var(--color-border);
vertical-align: middle; text-align: left;
}
.compare-table th{
background: var(--color-main);
color: white;
font-weight: 700;
}
.compare-table th:first-child{ background: var(--color-dark); }
.compare-table td:first-child{
background: var(--color-bg);
font-weight: 700;
}
.compare-table tr:nth-child(even) td{ background: #f9fdff; }


.table-scroll{
width:100%;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

/* CTAボタン */


.btn-cta-sub{
display: block;
background: var(--color-main);
color: white;
text-align: center;
font-size: 0.92rem;
font-weight: 700;
padding: 12px 24px;
border-radius: 50px;
margin: 8px 0;
transition: background var(--transition);
}
.btn-cta-sub:hover{ background: var(--color-main-dark); color: white; }

/* 関連記事 */

.related-title{
font-size: 1rem;
font-weight: 900;
color: var(--color-dark);
margin-bottom: 16px;
}

.related-card{
display: flex;
gap: 12px;
background: var(--color-bg);
border-radius: var(--radius);
padding: 12px;
border: 1px solid var(--color-border);
color: var(--color-text);
transition: box-shadow var(--transition);
}
.related-card:hover{ box-shadow: var(--shadow); color: var(--color-text); }
.related-card img{
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.related-card-title{ font-size: 0.82rem; font-weight: 700; line-height: 1.5; }

#toha, #chumoku, #shikumi, #konkyo, #syurui-hikaku, #kinsu, #osusume-item, #ranking-best5, #timing, #nomikata, #faq, #matome{scroll-margin-top:90px!important;}

figure{
margin:24px 0;
text-align:center;
}
figure img{
display:block;
width:100%;
max-width:800px;
height:auto;
margin:auto;
}
figcaption{ font-size: 0.85rem; letter-spacing: -.02rem;}

/* 商品紹介・価格比較（jabara-syohin.webpスプライト） */


:root{
--free-accent:#1f9d55;
--free-accent-d:#16793f;
--free-ink:#0a2d4a;
--free-line:#e3ebf2;
}
/* 関連ページ */
.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}


/* ②注目される乳酸菌カード */
.strain-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-bottom:24px;
}
.strain-card{
display:block;
background:#fff;
border:1px solid var(--color-border);
border-radius:var(--radius);
padding:12px;
text-align:left;
color:var(--color-text);
transition:box-shadow var(--transition);
}
.strain-grid h3{ line-height: 1.2; margin-top: 12px;}
.strain-card:hover{box-shadow:var(--shadow);color:var(--color-text);}
.strain-header{
width:95%;
height: 52%;
position:relative;
padding: 8px;
background-image:url("/img/nyusankin-kabu.webp");
background-repeat:no-repeat;
background-size:630px 350px;
}
.strain-header--l92{background-position:15px 0;}
.strain-header--plasma{background-position:-195px 0;}
.strain-header--lgg{background-position:100% 0;}
.strain-header--bb536{background-position:15px -170px;}
.strain-header--kw{background-position:-195px -170px;}
.strain-header--fecalis{background-position:100% -170px;}

.strain-header .strain-icon{
flex:none;
width:56px;
height:56px;
border-radius:50%;
background:#fff;
border:2px solid #fff;
box-shadow:0 2px 6px rgba(0,0,0,.25);
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
font-size:.78rem;
color:var(--free-ink,#0a2d4a);
margin:0 0 10px;
}

.strain-body{padding:10px 8px 14px;}
.strain-name{
font-weight:900;
font-size:1.8rem!important;margin:0 0 4px;color:#0a2d4a!important; border-bottom:none!important; 
 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;
}
.strain-brand{font-size:.78rem;color:#888;margin:0 0 8px;}
.strain-desc{font-size:.85rem;color:#555;margin:0;}

/* ⑦おすすめ製品カード */
.kin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px;}
.kin-card{display:flex;gap:12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:12px;text-align:left;}
.kin-icon{
flex:none;width:72px;height:72px;border-radius:10px;
background:#eef6f2;border:1px dashed var(--color-border);
/* TODO: 画像完成後、background-imageのスプライトに差し替え */
}
.kin-body{text-align:left;flex:1;min-width:0;}
.kin-title{font-weight:700;font-size:.95rem;margin:0 0 4px!important;}
.kin-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;}
.kin-tag{font-size:.72rem;background:#eef6f2;color:var(--free-accent,#1f9d55);border-radius:999px;padding:2px 10px;font-weight:700;}
.kin-price{font-size:.85rem;font-weight:700;color:var(--free-ink,#0a2d4a);margin:0;}
.kin-icon{
flex:none;
background-image:url("/img/nyusankin-syohin.webp");
background-repeat:no-repeat;
background-size:342px 228px;
border-radius:8px;
border:none;
}
.kin-icon--arerukea{width:64px;height:95px;background-position:0 0;}
.kin-icon--imuse{width:64px;height:95px;background-position:-88px 0;}
.kin-icon--menekipeace{width:65px;height:98px;background-position:-88px -130px;}
.kin-icon--helve{width:65px;height:95px;background-position:-277px 0;}
.kin-icon--arelupita{width:64px;height:98px;background-position:0 -130px;}
.kin-icon--fecalis-a{width:82px;height:98px;background-position:-179px -130px;}
.kin-icon--bibitas{width:82px;height:95px;background-position:-179px 0;}
.kin-icon--cocokara{width:65px;height:98px;background-position:-277px -130px;}
.kin-shop{
display:inline-block;
font-size:.7rem;
font-weight:700;
color:#888;
background:#f2f2f2;
border-radius:4px;
padding:2px 8px;
margin-top:6px;
}
.kin-qty{font-size:.78rem;color:#666;margin:2px 0 0;}


/* メリット・デメリット（左右2カラム、視認性強化版） */


@media (min-width: 901px) and (max-width: 1366px) {
.seihin-grid{
grid-template-columns:repeat(2,1fr);
gap:6px;
}
.strain-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
margin-bottom:24px;
}
.strain-card{padding: 6px 10px;}
.strain-header{
width:100%;
height: 45%;
background-size:950px 750px;
border-radius: 16px;
}
.strain-header--l92{background-position:-50px -70px;}
.strain-header--plasma{background-position:50% -70px;}
.strain-header--lgg{background-position:90% -70px;}
.strain-header--bb536{background-position:-50px 75%;}
.strain-header--kw{background-position:50% 80%;}
.strain-header--fecalis{background-position:90% 75%;}
}
.strain-name{
font-size:1.4rem!important; letter-spacing: -.04rem;}
@media(max-width:900px){
.strain-card{padding: 6px 10px;}
.strain-header{
width:100%;
height: 45%;
padding: 12px;
background-size:1000px 800px;
border-radius: 16px;
}
.strain-header--l92{background-position:-50px -90px;}
.strain-header--plasma{background-position:50% -70px;}
.strain-header--lgg{background-position:90% -70px;}
.strain-header--bb536{background-position:-50px 80%;}
.strain-header--kw{background-position:48% 75%;}
.strain-header--fecalis{background-position:90% 75%;}

.related-links, .seihin-grid{
grid-template-columns:repeat(2,1fr);
}
.seihin-grid{gap: 6px;}
}

@media(max-width:680px){
.strain-card{min-height: 40vh;}
.strain-header{
width:100%;
height: 50%;
padding: 12px;
background-size:1350px 1000px;
border-radius: 16px;
}
.strain-header--l92{background-position:-50px -150px;}
.strain-header--plasma{background-position:50% -150px;}
.strain-header--lgg{background-position:92% -150px;}
.strain-header--bb536{background-position:-50px 80%;}
.strain-header--kw{background-position:48% 75%;}
.strain-header--fecalis{background-position:90% 80%;}
.strain-name{
font-size:1.8rem!important; letter-spacing: -.04rem;}

.article-body{ padding-top: 0;}
.related-links, .simple-body ul.kaori{grid-template-columns:1fr;
}
.compare-table{width: 100%;}


.seihin-grid{gap: 2px;}
.seihin-card{position: relative;height:70px; padding: 6px;}
.seihin-icon{
flex:none;
width:55px;
height:55px;
background-image:url("/img/jabaras.webp");
background-repeat: no-repeat;
background-size:170px auto;
}
.seihin-icon--supple{background-position:100% 0;}
.seihin-icon--kajyu{background-position:0 0;}
.seihin-icon--funmatsu{background-position:50% 0;}
.seihin-icon--ame{background-position:0 -55px;}
.seihin-icon--juice{background-position:0 -55px}
.seihin-icon--suitsu{background-position:100% 100%;}

.seihin-icon{top:8%;left:2%;}


.seihin-desc{display: none;}


}


/* ⑤種類比較表のスター */
.star-rate{color:#f4a100;letter-spacing:1px;}

/* ⑥優先順位フロー */
.priority-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 24px;}
.priority-step{background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:10px 18px;font-weight:700;font-size:.9rem;}
.priority-step.is-top{background:var(--color-main);color:#fff;border-color:var(--color-main);}
.priority-arrow{color:#aaa;font-weight:900;}


/* ⑧ランキングBEST5 */
.rank-best5{list-style:none;margin:0 0 20px;padding:0;}
.rank-best5 li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius);padding:12px 16px;margin-bottom:8px;}
.rank-best5 .rank-num{flex:none;width:32px;height:32px;border-radius:50%;background:var(--color-main);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;}

/* ⑨飲み始める時期タイムライン */
.timing-flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 24px;}
.timing-step{background:#fff;border:2px solid var(--color-border);border-radius:12px;padding:14px 18px;text-align:center;min-width:120px;}
.timing-step.is-now{border-color:#e74c3c;}
.timing-step-label{font-weight:900;font-size:.9rem;}
.timing-step-sub{font-size:.72rem;color:#888;}
.timing-arrow{color:#aaa;font-weight:900;}

@media(max-width:900px){
.strain-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
.strain-grid, .kin-grid{grid-template-columns:1fr;}
.timing-flow{flex-direction:column;align-items:stretch;}
.timing-arrow{text-align:center;}
}


/* =============================================
 A8広告：ページ内 / サイドバー
============================================= */


/* =============================================
 じゃばら特化ページ：追加アンカー
============================================= */
#osusume-item, #timing, #faq, #matome, #narutin, #erabi{
scroll-margin-top:90px!important;
}


/* ===== 花粉症サプリ総合：エビデンス強化 ===== */
.evidence-point{
margin-top:18px;
padding:16px 18px;
background:#f2f9fc;
border-left:4px solid #2EA8D5;
border-radius:8px;
}
.evidence-point strong{display:block;margin-bottom:5px;color:#0a2d4a;}
.evidence-point p{margin:0;}

.strain-link{
display:block;
margin-top:10px;
color:#1687bd;
font-size:.84rem;
font-weight:800;
}

.doctor-view-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
margin-top:18px;
margin-bottom:30px;
}
.doctor-view-card{
padding:16px 18px;
background:#fff;
border:1px solid #dce8ee;
border-radius:12px;
}
.doctor-view-card strong{
display:block;
margin-bottom:7px;
color:#0a2d4a;
}
.doctor-view-card p{margin:0;}

@media (min-width:901px) and (max-width:1366px){
.doctor-view-grid{gap:12px;}
}
@media (max-width:900px){
.doctor-view-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:680px){
.doctor-view-grid{grid-template-columns:1fr;}
.evidence-point{padding:14px;
}}
/* ===== kafun-supplement.html：kafun-sapli-kiku.webp スプライト ===== */
.kafun-sapli-visual{
width:96%;
height:140px;
margin:18px auto 30px;
background-image:url("/img/kafun-sapli-kiku.webp");
background-repeat:no-repeat;
background-size:110% auto;
}
.kafun-sapli-visual--question{background-position:center 0;}
.kafun-sapli-visual--doctor{background-position:center 68%;}
.kafun-sapli-visual--summary{background-position:center 102%;}

/* 6成分カード：同じスプライトの2段目を使用 */
#shurui + .w96-m2 + .strain-grid .strain-header{
width:100%;
height:180px;
padding:0;
border-radius:12px;
background-image:url("/img/kafun-sapli-kiku.webp");
background-repeat:no-repeat;
background-size:590% auto;
/*clip-path:inset(0px 0px 0px 0px);*/
}
#shurui + .w96-m2 + .strain-grid .strain-header--nyusankin{background-position:0 38%;}
#shurui + .w96-m2 + .strain-grid .strain-header--jabara{background-position:20% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--vitamind{background-position:40.5% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--tencha{background-position:60% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--shiso{background-position:78% 36%;}
#shurui + .w96-m2 + .strain-grid .strain-header--epa{background-position:100% 38%;}

@media (min-width: 901px) and (max-width: 1366px) {
.kafun-sapli-visual{
height:115px;
}
.strain-grid h3{font-size: 1.1rem!important;
}}
@media (max-width:900px){
.kafun-sapli-visual{
height:90px;
}
#shurui + .w96-m2 + .strain-grid .strain-header{
height:170px;
background-size:580% auto;
}
#shurui + .w96-m2 + .strain-grid .strain-header--shiso{background-position:79% 38%;}
}
@media(max-width:680px){
.kafun-sapli-visual{height:18vw;margin:14px auto 24px;}
.kafun-sapli-visual--question{background-position:center -5%;}
.kafun-sapli-visual--doctor{background-position:center 70%;}
.kafun-sapli-visual--summary{background-position:center 108%;}
.strain-grid h3{font-size: 1.25rem!important;}
#shurui + .w96-m2 + .strain-grid .strain-header{
height:55vw;
background-size:500% auto;
margin-left: 15px;
clip-path:inset(0px 50px 0px 0px);
}
#shurui + .w96-m2 + .strain-grid .strain-card{min-height:0;}
#shurui + .w96-m2 + .strain-grid .strain-header--nyusankin{background-position:30px 38%;}
#shurui + .w96-m2 + .strain-grid .strain-header--jabara{background-position:20.5% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--vitamind{background-position:41% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--tencha{background-position:61% 37.3%;}
#shurui + .w96-m2 + .strain-grid .strain-header--shiso{background-position:81% 38%;}
#shurui + .w96-m2 + .strain-grid .strain-header--epa{background-position:102% 38%;}
}


/* ===== じゃばら「効く？」特化ページ：研究要約 ===== */
.research-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:16px;
  margin-bottom:30px;
}
.research-summary-card{
  padding:15px 16px;
  background:#f7fbfd;
  border:1px solid #dce8ee;
  border-radius:12px;
}
.research-summary-card strong{
  display:block;
  margin-bottom:6px;
  color:#0a2d4a;
}
.research-summary-card p{margin:0;font-size:.9rem;}

@media (min-width:901px) and (max-width:1366px){
  .research-summary{gap:10px;}
}
@media (max-width:900px){
  .research-summary{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:680px){
  .research-summary{grid-template-columns:1fr;}
}