@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap');
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans TC","Noto Sans KR",sans-serif;color:#16233b;background:#fbfdfe;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
header.site{background:#fff;border-bottom:2px solid #1b3a6b}
.bar{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-weight:800;font-size:20px;color:#1b3a6b}
.brand span{font-size:12px;color:#b4473a;vertical-align:super}
.lang a{font-size:13px;color:#475a75;margin-left:12px}
.lang a.on{color:#1b3a6b;font-weight:700;border-bottom:2px solid #1b3a6b}
.hero{background:#1b3a6b;color:#fff;padding:44px 0}
.hero .tag{margin:0 0 6px;color:#a9c0dc;font-size:14px}
.hero h1{margin:0 0 10px;font-size:26px;line-height:1.35}
.hero .lead{margin:0 0 18px;color:#eaf4fb;font-size:15px}
.cta{display:inline-block;background:#b4473a;color:#fff;padding:10px 18px;border-radius:4px;font-weight:700}
main.wrap{padding:30px 20px}
h2{font-size:18px;border-left:5px solid #1b3a6b;padding-left:10px;margin:26px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{background:#fff;border:1px solid #d6e8f5;border-radius:6px;padding:16px;text-align:center;font-weight:700;color:#1b3a6b}
.card.gen{color:#b4473a}
.card:hover{border-color:#1b3a6b}
.splash{min-height:60vh}
.crumb{font-size:13px;color:#6b8ab8;margin:0 0 12px}
.sample{background:#eaf4fb;border:1px solid #bfdbef;color:#0369a1;padding:8px 12px;border-radius:4px;font-size:13px;margin:0 0 14px}
h1{font-size:22px;margin:6px 0 16px}
.ranking{list-style:none;margin:0;padding:0}
.rk{display:flex;align-items:center;background:#fff;border:1px solid #d6e8f5;border-top:none;padding:12px 14px}
.rk:first-child{border-top:1px solid #d6e8f5;border-radius:6px 6px 0 0}
.rk:last-child{border-radius:0 0 6px 6px}
.rk.head{background:#1b3a6b;color:#fff;font-size:13px;font-weight:700}
.rk .num{width:56px;font-weight:800;color:#b4473a;font-size:18px}
.rk.head .num{color:#fff;font-size:13px}
.rk .nm{flex:1}
.rk .sc{width:120px;text-align:right;font-weight:700}
.note{color:#6b8ab8;font-size:13px;margin-top:14px}
footer.site{background:#eef0f3;margin-top:40px;padding:20px 0;border-top:1px solid #d6e8f5}
.fnote{color:#475a75;font-size:13px;margin:0 0 4px}
.fcopy{color:#9aa2ad;font-size:12px;margin:0}
/* RANK */
.langnote{font-size:12px;color:#6b8ab8}
.rankhero .src{color:#a9c0dc;font-size:12px;margin:10px 0 0}
.rankhero .lead strong{color:#fff}
.rankpage{padding-top:24px}
.rank-sec{margin:0 0 30px}
.secdesc{color:#475a75;font-size:13px;margin:2px 0 12px}
.ranking .rrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #d6e8f5;border-top:none;padding:12px 14px}
.ranking .rrow:first-child{border-top:1px solid #d6e8f5;border-radius:6px 6px 0 0}
.ranking .rrow:last-child{border-radius:0 0 6px 6px}
.ranking .rrow.head{background:#1b3a6b;color:#fff;font-size:12px;font-weight:700}
.rnum{width:40px;text-align:center;font-weight:800;color:#475a75;font-size:17px;flex:none}
.rnum.m1{color:#b8912e}.rnum.m2{color:#9aa2ad}.rnum.m3{color:#b07b46}
.rrow.head .rnum{color:#fff;font-size:12px}
.rname{flex:1;font-weight:700;font-size:15px}
.rname small{display:block;font-weight:400;color:#6b8ab8;font-size:12px;margin-top:2px}
.rrow.head .rname{font-weight:700}
.rbar{flex:1;height:8px;background:#eaf4fb;border-radius:5px;overflow:hidden;max-width:220px}
.rrow.head .rbar{background:transparent}
.rfill{display:block;height:100%;background:linear-gradient(90deg,#1b3a6b,#2d5490)}
.rscore{width:70px;text-align:right;font-weight:800;color:#1b3a6b;flex:none}
.rscore small{font-weight:400;color:#6b8ab8;font-size:11px;margin-left:2px}
.rrow.head .rscore{color:#fff;font-weight:700}
.methodology{background:#fff;border:1px solid #d6e8f5;border-radius:6px;padding:18px 20px;margin-top:10px}
.methodology h2{border:none;padding:0;font-size:16px;margin:0 0 10px}
.methodology ul{margin:0 0 8px;padding-left:18px;color:#475a75;font-size:13px;line-height:1.9}
.methodology .src{color:#6b8ab8;font-size:12px;margin:0}
@media(max-width:600px){.rbar{display:none}}
/* RANK2 */
.disclaimer{color:#6b8ab8;font-size:12px;line-height:1.8;margin:10px 0 0;padding-top:10px;border-top:1px dashed #d6e8f5}
.crumb-bottom{margin:22px 0 0;font-size:12px;color:#6b8ab8}
.crumb-bottom a{color:#475a75;text-decoration:underline}
/* RANK3 */
.intro{font-size:15px;color:#475a75;line-height:1.95;margin:4px 0 26px}
.faq{background:#fff;border:1px solid #d6e8f5;border-radius:6px;padding:18px 20px;margin:0 0 30px}
.faq h2{border:none;padding:0;font-size:16px;margin:0 0 8px}
.faq dt{font-weight:700;color:#1b3a6b;margin:14px 0 4px;padding-left:22px;position:relative}
.faq dt:before{content:"Q";position:absolute;left:0;color:#b4473a;font-weight:800}
.faq dd{margin:0 0 8px 22px;color:#475a75;font-size:14px;line-height:1.85}
.rmore{flex:none;font-size:12px;color:#1b3a6b;text-decoration:underline;margin-left:8px;white-space:nowrap}
.rrow.head .rmore{visibility:hidden}
.cta-contact{background:#1b3a6b;color:#fff;border-radius:8px;padding:24px;margin:0 0 26px;text-align:center}
.cta-contact h2{border:none;color:#fff;padding:0;margin:0 0 8px;font-size:18px}
.cta-contact p{color:#eaf4fb;font-size:14px;margin:0 0 12px}
.cta-contact .cta{background:#b4473a}
.about{background:#fff;border:1px solid #d6e8f5;border-radius:6px;padding:16px 20px;margin:0 0 26px}
.about h2{border:none;padding:0;font-size:15px;margin:0 0 8px}
.about p{color:#475a75;font-size:13px;line-height:1.85;margin:0 0 6px}
.about a{color:#1b3a6b;text-decoration:underline}
/* RANK4 */
.spotpage{padding-top:20px}
.crumb-top{font-size:12px;color:#6b8ab8;margin:0 0 14px}
.crumb-top a{color:#475a75;text-decoration:underline}
.spotpage h1{font-size:24px;margin:0 0 10px}
.spotpage h1 small{display:block;font-size:13px;color:#6b8ab8;font-weight:400;margin-top:4px}
.spotpage h2{font-size:16px}
.spotbadges{margin:0 0 16px}
.badge{display:inline-block;background:#eaf4fb;color:#1b3a6b;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.airank-card{display:flex;gap:20px;align-items:center;background:#1b3a6b;color:#fff;border-radius:8px;padding:20px 24px;margin:0 0 24px;flex-wrap:wrap}
.airank-card .big{text-align:center;flex:none}
.bignum{font-size:44px;font-weight:800;line-height:1}
.bignum small{font-size:18px;color:#a9c0dc}
.biglabel{display:block;font-size:12px;color:#a9c0dc;margin-top:2px}
.aidata{margin:0;padding-left:18px;font-size:14px;line-height:1.9}
.aidata strong{color:#fff}
.factbox{width:100%;border-collapse:collapse;font-size:14px}
.factbox th{text-align:left;width:110px;color:#475a75;font-weight:700;padding:8px 10px;border-bottom:1px solid #eaf4fb;vertical-align:top}
.factbox td{padding:8px 10px;border-bottom:1px solid #eaf4fb}
.factbox a{color:#1b3a6b;text-decoration:underline;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{background:#fff;border:1px solid #d6e8f5;border-radius:20px;padding:6px 14px;font-size:13px;color:#1b3a6b;font-weight:700}
.backlink{color:#1b3a6b;text-decoration:underline;font-size:14px}
/* RANK4v2 */
.spotpage{padding-top:20px}
.crumb-top{font-size:12px;color:#6b8ab8;margin:0 0 14px}
.crumb-top a{color:#475a75;text-decoration:underline}
.spotpage h1{font-size:24px;margin:0 0 10px}
.spotpage h1 small{display:block;font-size:13px;color:#6b8ab8;font-weight:400;margin-top:4px}
.spotpage h2{font-size:16px}
.spotbadges{margin:0 0 16px}
.badge{display:inline-block;background:#eaf4fb;color:#1b3a6b;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700;margin:0 6px 6px 0}
.badge.cat{background:#eaf4fb;color:#0369a1}
.airank-card{display:flex;gap:20px;align-items:center;background:#1b3a6b;color:#fff;border-radius:8px;padding:20px 24px;margin:0 0 24px;flex-wrap:wrap}
.airank-card .big{text-align:center;flex:none}
.bignum{font-size:44px;font-weight:800;line-height:1}
.bignum small{font-size:18px;color:#a9c0dc}
.biglabel{display:block;font-size:12px;color:#a9c0dc;margin-top:2px}
.aidata{margin:0;padding-left:18px;font-size:14px;line-height:1.9}
.aidata strong{color:#fff}
.factbox{width:100%;border-collapse:collapse;font-size:14px}
.factbox th{text-align:left;width:110px;color:#475a75;font-weight:700;padding:8px 10px;border-bottom:1px solid #eaf4fb;vertical-align:top}
.factbox td{padding:8px 10px;border-bottom:1px solid #eaf4fb}
.factbox a{color:#1b3a6b;text-decoration:underline;word-break:break-all}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.chip{background:#fff;border:1px solid #d6e8f5;border-radius:20px;padding:6px 14px;font-size:13px;color:#1b3a6b;font-weight:700}
.backlink{color:#1b3a6b;text-decoration:underline;font-size:14px}
.award{display:flex;gap:20px;align-items:center;background:#ffffff;border:1px solid #d6e8f5;border-left:6px solid #b8912e;border-radius:8px;padding:20px 22px;margin:0 0 24px;flex-wrap:wrap}
.medal{flex:none;width:132px;height:132px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.medal.gold{background:radial-gradient(circle at 40% 32%,#e7c85a,#b9962a)}
.medal.silver{background:radial-gradient(circle at 40% 32%,#d6e8f5,#9aa2ad)}
.medal.bronze{background:radial-gradient(circle at 40% 32%,#d6a877,#a9713f)}
.medal.blue{background:radial-gradient(circle at 40% 32%,#2d5490,#1b3a6b)}
.m-top{font-size:10px;font-weight:800;letter-spacing:1px;line-height:1.15}
.m-rank{font-size:40px;font-weight:800;line-height:1;margin:2px 0}
.m-rank small{font-size:15px}
.m-cat{font-size:12px;font-weight:700}
.award-txt{flex:1;min-width:250px}
.award-txt h2{border:none;padding:0;margin:0 0 6px;font-size:17px}
.award-txt>p{font-size:13px;color:#475a75;line-height:1.85;margin:0 0 8px}
.award-txt a{color:#1b3a6b;text-decoration:underline}
.badge-embed summary{cursor:pointer;color:#1b3a6b;font-weight:700;font-size:13px;margin-top:4px}
.badge-embed p{font-size:12px;color:#475a75;margin:8px 0 4px}
.badge-embed textarea{width:100%;font-size:12px;font-family:monospace;border:1px solid #d6e8f5;border-radius:4px;padding:8px;box-sizing:border-box}
.cta.small{padding:8px 14px;font-size:13px;display:inline-block;margin-top:6px}
/* GEO */
.geo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin:14px 0}
.geo-card{display:block;background:#fff;border:1px solid #d6e8f5;border-radius:8px;padding:18px 16px;text-align:center;font-weight:700;color:#1b3a6b}
.geo-card:hover{border-color:#1b3a6b}
.geo-card small{display:block;color:#6b8ab8;font-weight:400;font-size:12px;margin-top:4px}
.preflist{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.preflist li{background:#fff;border:1px solid #d6e8f5;border-radius:6px;padding:10px 14px}
.preflist a{color:#1b3a6b;font-weight:700;text-decoration:none}
.preflist a:hover{text-decoration:underline}
.preflist .soon{color:#6b8ab8;font-weight:400;font-size:13px}
.featured{background:#1b3a6b;color:#fff;border-radius:8px;padding:18px 22px;margin:22px 0}
.featured a{color:#fff;font-weight:700;text-decoration:underline}
.featured .mini{color:#a9c0dc;font-size:12px;margin:6px 0 0}
/* V5 */
.ranknote{font-size:12px;color:#6b8ab8;margin:8px 0 12px;line-height:1.7}
.ranknote a{color:#1b3a6b}
.quicktable{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.quicktable th{background:#1b3a6b;color:#fff;padding:8px 10px;text-align:left;font-size:12px}
.quicktable td{padding:8px 10px;border-bottom:1px solid #eaf4fb;white-space:nowrap}
.quicktable td a{color:#1b3a6b;font-weight:700}
.spotphoto{margin:14px 0 18px}
.spotphoto img{width:100%;height:auto;max-height:400px;object-fit:cover;border-radius:10px;display:block}
.spotphoto figcaption{font-size:11px;color:#6b8ab8;margin-top:6px}
.spotphoto figcaption a{color:#6b8ab8}
.qbox{background:#fff;border:1px solid #d6e8f5;border-left:4px solid #2d5490;border-radius:0 8px 8px 0;padding:12px 16px;margin:8px 0 14px;font-size:13px;line-height:1.9;color:#475a75}
.v5h .brandtop{margin:8px 0 0;font-size:11px;color:#6b8ab8;display:flex;justify-content:space-between}
.v5h .brandtop a{color:#6b8ab8;text-decoration:none;font-weight:700}
.v5h .brandtop a span{color:#b4473a;font-size:9px;vertical-align:super}
.v5h .surveyed{font-size:10px}
.v5h .seriesname{margin:0 0 10px;font-size:19px;font-weight:800}
.v5h .seriesname a{color:#1b3a6b;text-decoration:none}
.v5h.site{height:auto}
.v5f .fnav{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 10px}
.v5f .fnav a{color:#1b3a6b;font-size:12px;text-decoration:underline}
.spot-hero{background:linear-gradient(135deg,#1b3a6b 0%,#2d5490 55%,#2e8b6e 100%);color:#fff;border-radius:10px;padding:22px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden;margin-top:14px}
.spot-hero:before{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 60%)}
.hero-txt{flex:1;min-width:230px}
.hero-txt .loc{font-size:12px;color:#a9c0dc;margin:0 0 2px}
.hero-txt h1{margin:0 0 6px;font-size:26px;line-height:1.3;color:#fff}
.hero-txt .genrechip{display:inline-block;background:rgba(255,255,255,.16);border-radius:14px;padding:2px 10px;font-size:11px;margin-right:6px;color:#fff;text-decoration:none}
.consensus{display:inline-block;background:#b8912e;color:#fff;border-radius:14px;padding:2px 10px;font-size:11px;font-weight:700}
.hero-sub{font-size:13px;color:#eaf4fb;margin:8px 0 0}
.hero-score{flex:none;text-align:center;background:rgba(255,255,255,.12);border-radius:10px;padding:12px 18px}
.hero-score .n{font-size:40px;font-weight:800;line-height:1}
.hero-score .n small{font-size:16px;color:#a9c0dc}
.hero-score .l{font-size:11px;color:#a9c0dc}
.medal2{flex:none;width:120px;text-align:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
.medal2 .disc{width:104px;height:104px;margin:0 auto;border-radius:50%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:4px solid #fff2c2}
.medal2.gold .disc{background:radial-gradient(circle at 38% 30%,#f4dd7e,#d9b83f 55%,#a8861f);color:#5d470c}
.medal2.silver .disc{background:radial-gradient(circle at 38% 30%,#e8edf3,#b9c2cd 55%,#8b95a3);color:#3f4854;border-color:#eef2f7}
.medal2.bronze .disc{background:radial-gradient(circle at 38% 30%,#e2b183,#c08652 55%,#8f5c2e);color:#57370f;border-color:#f3dcc3}
.medal2.blue .disc{background:radial-gradient(circle at 38% 30%,#4d7fc0,#2c5a95 55%,#1b3a6b);color:#eaf1fa;border-color:#d6e8f5}
.medal2 .disc:before{content:"";position:absolute;inset:7px;border-radius:50%;border:2px dashed rgba(255,255,255,.75)}
.medal2 .mstar{font-size:9px;letter-spacing:.5px}
.medal2 .mrk{font-size:32px;font-weight:900;line-height:1.1;background:none;border:none;padding:0}
.medal2 .mrk small{font-size:13px}
.medal2 .mcat{font-size:11px;font-weight:800}
.medal2 .ribbons{height:24px;position:relative;margin-top:-6px}
.medal2 .ribbons:before,.medal2 .ribbons:after{content:"";position:absolute;top:0;width:24px;height:28px;background:#b4473a;clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.medal2 .ribbons:before{left:24px;transform:rotate(8deg)}
.medal2 .ribbons:after{right:24px;transform:rotate(-8deg)}
.medal2 .yr{font-size:10px;color:#fff;background:#1b3a6b;display:inline-block;border-radius:8px;padding:1px 8px;margin-top:2px}
.scorelist{list-style:none;margin:0;padding:0;background:#fff;border:1px solid #d6e8f5;border-radius:8px;overflow:hidden}
.scorelist li{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #eaf4fb;font-size:14px}
.scorelist li:last-child{border-bottom:none}
.scorelist .k{width:170px;color:#475a75;font-weight:700;flex:none}
.scorelist .bar{flex:1;height:8px;background:#eaf4fb;border-radius:5px;overflow:hidden}
.scorelist .fill{display:block;height:100%;background:linear-gradient(90deg,#1b3a6b,#2d5490)}
.scorelist .v{width:130px;text-align:right;font-weight:800;color:#1b3a6b;flex:none}
.scorelist .v small{color:#6b8ab8;font-weight:400}
.scorelist .rankchip{background:#fff4d6;color:#8a6d14;border-radius:12px;font-size:11px;font-weight:800;padding:2px 8px;text-decoration:none}
.aicomment{background:#fff;border:1px solid #d6e8f5;border-radius:10px;padding:14px 16px;margin:0 0 12px;display:flex;gap:12px}
.avatar{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;text-align:center;line-height:1}
.av-chatgpt{background:linear-gradient(135deg,#10a37f,#0d7a60)}
.av-gemini{background:linear-gradient(135deg,#4285f4,#9b72cb)}
.av-perplexity{background:linear-gradient(135deg,#0f2547,#20808d)}
.cbody{flex:1}
.cbody .who{font-size:12px;color:#475a75;margin:0 0 4px}
.cbody .who b{color:#16233b;font-size:13px;margin-right:6px}
.cbody .tag{display:inline-block;background:#eaf4fb;color:#0369a1;border-radius:10px;padding:1px 8px;font-size:10px;font-weight:700}
.cbody p{margin:0;font-size:15px;line-height:1.85}
.cbody p:before{content:"“";color:#b8912e;font-weight:800}
.cbody p:after{content:"”";color:#b8912e;font-weight:800}
.srcnote{font-size:12px;color:#6b8ab8;margin:0 0 8px}
.chips2{display:flex;flex-wrap:wrap;gap:8px}
.chip2{background:#fff;border:1px solid #d6e8f5;border-radius:16px;padding:5px 12px;font-size:12px;color:#475a75}
.chip2 b{color:#1b3a6b}
.factbox2{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border:1px solid #d6e8f5;border-radius:8px;overflow:hidden}
.factbox2 th{text-align:left;width:110px;color:#475a75;padding:10px 12px;border-bottom:1px solid #eaf4fb;vertical-align:top;background:#f4fafd}
.factbox2 td{padding:10px 12px;border-bottom:1px solid #eaf4fb}
.factbox2 a{color:#1b3a6b}
.nextcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.nextcard{background:#fff;border:1px solid #d6e8f5;border-radius:10px;padding:14px;text-decoration:none;display:block}
.nextcard .t{font-weight:800;color:#1b3a6b;font-size:14px;display:block}
.nextcard .d{font-size:12px;color:#6b8ab8;margin-top:4px;display:block}
.nextcard:hover{border-color:#1b3a6b}
.statstrip{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}
.stat{flex:1;min-width:130px;background:#fff;border:1px solid #d6e8f5;border-radius:8px;padding:10px 14px;text-align:center}
.stat .n{font-size:22px;font-weight:800;color:#1b3a6b}
.stat .l{font-size:11px;color:#6b8ab8}
.qteaser{display:block;font-weight:400;color:#6b8ab8;font-size:13px;margin-top:3px;font-style:normal}
.qteaser a{font-size:13px;padding:6px 2px;display:inline-block}
details.foldrank{border:none;margin:6px 0 0}
details.foldrank summary{cursor:pointer;color:#1b3a6b;font-weight:700;font-size:13px;padding:10px 14px;background:#fff;border:1px solid #d6e8f5;border-radius:6px;list-style:none}
details.foldrank summary:before{content:"▼ ";font-size:10px}
details.foldrank[open] summary{display:none}
.yado-axis{margin:0 0 18px}
.yado-axis h3{font-size:14px;margin:0 0 8px;color:#1b3a6b}
.mchip{display:inline-block;font-size:10px;border-radius:8px;padding:1px 6px;margin-left:4px;background:#eaf4fb;color:#475a75}
.riddle{background:linear-gradient(135deg,#0f2547,#1b3a6b);color:#fff;border-radius:10px;padding:16px 20px;margin:18px 0}
.riddle .q{font-weight:800;font-size:15px;margin:0 0 4px}
.riddle a{color:#38bdf8;font-weight:700}
.official-cta{background:#ffffff;border:1px solid #d6e8f5;border-left:6px solid #b8912e;border-radius:8px;padding:14px 18px;margin:16px 0;font-size:13px}
.official-cta a{font-weight:700}
.surveycomment{background:#eaf4fb;border-left:4px solid #1b3a6b;padding:10px 14px;font-size:13px;line-height:1.8;border-radius:0 6px 6px 0;margin:0 0 12px;color:#16233b}
.surveycomment b{color:#1b3a6b}
.aspects{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.aspect{background:#eaf4fb;color:#0369a1;border-radius:12px;padding:3px 10px;font-size:11px;font-weight:700}
.fcbadge{display:inline-block;background:#eaf4fb;color:#0369a1;border:1px solid #bfdbef;border-radius:12px;padding:2px 10px;font-size:11px;font-weight:700}
.caution{background:#f4fafd;border:1px solid #bfdbef;border-radius:8px;padding:10px 14px;font-size:13px;color:#475a75;margin:10px 0 0}
.mistake{background:#fff;border:1px solid #d6e8f5;border-left:4px solid #b4473a;border-radius:0 8px 8px 0;padding:12px 14px;margin:0 0 10px;font-size:13px;line-height:1.8}
.mistake b{color:#b4473a}
.usefulbox{background:#fff;border:1px solid #d6e8f5;border-radius:8px;padding:14px 16px;margin:0 0 12px;font-size:13px;line-height:1.9}
.usefulbox h3{margin:0 0 6px;font-size:13px;color:#1b3a6b}
.wish{background:#fff;border:1px solid #b8912e;color:#8a6d14;border-radius:16px;padding:5px 14px;font-size:12px;font-weight:700;cursor:pointer}
.wish.on{background:#b8912e;color:#fff}
.wishmini{background:none;border:none;color:#b8912e;font-size:20px;cursor:pointer;padding:10px 12px}
.wishbar{position:fixed;left:0;right:0;bottom:0;background:#1b3a6b;color:#fff;padding:8px 14px;font-size:12px;display:none;z-index:50}
.wishbar.show{display:block}
.wishbar a{color:#38bdf8;margin-right:10px}
.wishbar .cnt{font-weight:800;color:#38bdf8}
@media print{
header.site,footer.site,.cta-contact,.official-cta,.riddle,.wishbar,.rmore,.wish,.wishmini,.nextcards,.faq{display:none!important}
body{background:#fff}
.spot-hero,.hero{background:#fff!important;color:#16233b!important;border:1px solid #ccc}
.hero-txt h1,.hero-txt .loc,.hero-sub{color:#16233b!important}
details.foldrank>*:not(summary){display:block!important}
details.foldrank summary{display:none!important}
.rrow{break-inside:avoid}
}
@media(max-width:600px){
.hero-txt h1{font-size:21px}
.scorelist .k{width:112px;font-size:12px}
.scorelist .v{width:96px;font-size:13px}
.medal2{width:96px}.medal2 .disc{width:88px;height:88px}.medal2 .rk{font-size:26px}
.v5h .seriesname{font-size:16px}
.rbar{display:none}
}
/* ===== V6 editorial overhaul (2026-07-26) — 後勝ち上書き ===== */
.pref-hook{font-family:var(--font-serif);font-size:17px;line-height:1.8;color:var(--ink);margin:20px 0 6px}
:root{--ink:#16233b;--paper:#fbfdfe;--line:#d6e8f5;--navy:#1b3a6b;--gold:#b8912e;--red:#b4473a;
--ai-chatgpt:#10a37f;--ai-gemini:#4285f4;--ai-perplexity:#20808d;
--font-jp:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
--font-en:"Inter","Noto Sans JP",sans-serif;--font-serif:"Noto Serif JP","Hiragino Mincho ProN",serif}
body{font-family:var(--font-jp);color:var(--ink);background:var(--paper);line-height:1.85;font-feature-settings:"palt" 1;letter-spacing:.02em}
.rnum,.rscore,.bignum,.hero-score .n,.stat .n,.meta-stamp time,.quicktable td{font-family:var(--font-en);font-feature-settings:"tnum" 1;letter-spacing:0}
/* 見出し: 明朝の大見出し+金のティック+英字キッカー。左罫は廃止 */
h1{font-family:var(--font-serif);font-weight:700}
.hero h1,.spot-hero h1,.spotpage h1{font-family:var(--font-serif);font-size:clamp(26px,4vw,34px);line-height:1.45}
h2{border-left:none;padding-left:0;font-size:clamp(19px,2.4vw,24px);line-height:1.5;margin-top:56px}
h2::before{content:"";display:block;width:36px;height:3px;margin-bottom:12px;background:var(--gold)}
h2[data-kicker]::after{content:attr(data-kicker);display:block;font-family:var(--font-en);font-size:10px;letter-spacing:.2em;color:#6b8ab8;font-weight:600;margin-top:4px}
.faq h2,.methodology h2,.about h2,.cta-contact h2,.award-txt h2{margin-top:0}
.faq h2::before,.methodology h2::before,.about h2::before,.cta-contact h2::before{display:none}
/* カードの装飾を半減: 角丸小さく・影なし・罫線基調 */
.rrow,.nextcard,.faq,.about,.methodology,.usefulbox,.factbox2,.qbox,.mistake,.surveycomment,.official-cta,.quicktable{border-radius:3px;box-shadow:none}
.spot-hero{background:var(--navy);border-radius:4px}
.spot-hero:before{display:none}
.cta{background:var(--red);border-radius:3px}
.cta-contact{border-radius:4px}
.cta-contact .cta{background:var(--gold)}
/* 全国: 地域カード→罫線の編集目次 */
.geo-grid{gap:0 28px;grid-template-columns:repeat(4,1fr)}
.geo-card{padding:16px 4px;background:transparent;border:0;border-top:1px solid #d6e8f5;border-radius:0;text-align:left;font-size:16px}
.geo-card:hover{border-color:#d6e8f5;color:var(--navy)}
.geo-card small{display:inline;margin-left:8px;font-family:var(--font-en);font-size:11px}
@media(max-width:600px){.geo-grid{grid-template-columns:repeat(2,1fr);gap:0 20px}}
/* ランキング行: 1位だけ密度を変え、2位以下は罫線リスト */
.ranking .rrow{background:transparent;border-width:0 0 1px;border-radius:0;padding:14px 8px}
.ranking .rrow.head{background:transparent;color:var(--ink);border-bottom:2px solid var(--ink);font-size:12px}
.ranking .rrow.rank1{background:#eaf4fb;border-left:4px solid var(--gold);padding:20px 16px;border-radius:0 3px 3px 0}
.rnum.m1{color:var(--gold)}.rnum.m2{color:#8b95a3}.rnum.m3{color:#a9713f}
.rfill{background:var(--navy)}
/* メダル: 小さく・マットに・静かに */
.medal2{width:96px;filter:none}
.medal2 .disc{width:84px;height:84px;border-width:2px;box-shadow:none}
.medal2.gold .disc{background:var(--gold);color:#fff}
.medal2.silver .disc{background:#a9b0ba;color:#fff}
.medal2.bronze .disc{background:#a9713f;color:#fff}
.medal2 .disc:before{inset:5px;border-width:1px}
.medal2 .mrk{font-size:28px}
.medal2 .ribbons{transform:scale(.8)}
.hero-score{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25)}
.consensus{background:var(--gold)}
/* AI引用: チャットUI→審査評(左罫3色+2カラム) */
.aicomment,.avatar,.cbody{all:revert}
.ai-quote{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:16px 0 16px 14px;background:transparent;border:0;border-bottom:1px solid var(--line);border-left:3px solid var(--line);margin:0}
.ai-quote[data-ai="chatgpt"]{border-left-color:var(--ai-chatgpt)}
.ai-quote[data-ai="gemini"]{border-left-color:var(--ai-gemini)}
.ai-quote[data-ai="perplexity"]{border-left-color:var(--ai-perplexity)}
.ai-side{display:flex;flex-direction:column;gap:4px}
.ai-name{font-family:var(--font-en);font-size:12px;font-weight:800;letter-spacing:.06em}
.ai-ctx{font-size:11px;color:#6b8ab8}
.ai-quote blockquote{margin:0;font-size:15px;line-height:1.8}
.ai-quote blockquote::before{content:"「";color:var(--navy);font-weight:700}
.ai-quote blockquote::after{content:"」";color:var(--navy);font-weight:700}
@media(max-width:600px){.ai-quote{grid-template-columns:1fr;gap:6px}}
/* 写真: はみ出し禁止・3:2・明朝キャプション */
.spotphoto{width:min(100%,760px);margin:22px auto 34px}
.spotphoto img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:3/2;object-fit:cover;object-position:center 60%;border-radius:2px}
.spotphoto figcaption{font-family:var(--font-serif);font-size:12px;line-height:1.6;color:#6b8ab8;margin-top:8px;padding-left:10px;border-left:2px solid var(--line)}
/* 保存ボタン */
.wish{display:inline-flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--ink);color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
.wish.on{background:var(--ink);color:#fff}
/* モバイル再編集 */
@media(max-width:600px){
.wrap{padding-inline:16px}
.hero{padding-block:26px}
.hero h1{font-size:22px}
.v5h .seriesname{font-size:15px;line-height:1.4}
h2{margin-top:40px;font-size:19px}
.statstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.nextcards{grid-template-columns:1fr}
a.cta,.wish,.nextcard,.rmore{min-height:44px;display:inline-flex;align-items:center}
.rrow{flex-wrap:wrap}
.rrow>*{min-width:0}
.rrow .rname{flex:1 1 100%;overflow-wrap:anywhere;word-break:auto-phrase}
}
/* ===== V7 ルミエールDS反映 (2026-07-26) — 後勝ち上書き。紺#1B3A6B/空#EAF4FB/シアン#0EA5E9、金は表彰専用に温存 ===== */
:root{--ink:#16233b;--paper:#fbfdfe;--line:#d6e8f5;--navy:#1b3a6b;--gold:#b8912e;--red:#b4473a;
--navy-900:#0f2547;--navy-500:#2d5490;--navy-300:#6b8ab8;--sky-50:#f4fafd;--sky-100:#eaf4fb;--sky-200:#d6e8f5;--sky-300:#bfdbef;
--accent:#0ea5e9;--accent-hover:#0284c7;--accent-text:#0369a1;--fg2:#475a75;
--font-en:"Outfit","Noto Sans JP",sans-serif;--font-serif:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN",sans-serif}
body{background:var(--paper);color:var(--ink)}
/* 見出し: 明朝→Noto Sans JP Black 900。ティックは金→シアン（DSのキッカー様式） */
h1{font-weight:900;letter-spacing:-.01em}
.hero h1,.spot-hero h1,.spotpage h1{font-weight:900}
.pref-hook{font-weight:700}
h2{font-weight:900}
h2::before{background:var(--accent)}
h2[data-kicker]::after{font-family:var(--font-en);color:var(--navy-300);font-weight:600}
.spotphoto figcaption{font-family:var(--font-jp)}
.v5h .seriesname{font-weight:900}
/* ヘッダー/フッター: 紺のフレーム */
header.site{background:var(--navy);border-bottom:none}
.v5h .brandtop,.v5h .brandtop a{color:#a9c0dc}
.v5h .brandtop a span{color:#38bdf8}
.v5h .seriesname a{color:#fff}
.brand{color:#fff}.brand span{color:#38bdf8}
.lang a{color:#a9c0dc}.lang a.on{color:#fff;border-bottom-color:#38bdf8}
footer.site{background:var(--navy-900);border-top:none}
.v5f .fnav a{color:#a9c0dc}
.fnote{color:#a9c0dc}.fnote a{color:#eaf4fb;text-decoration:underline}
.fcopy{color:#6b8ab8}
/* CTA: シアンのピル（一点集中）。赤は「AIの誤答」マーカー専用に */
.cta{background:var(--accent);border-radius:999px;padding:12px 22px;box-shadow:0 10px 28px -10px rgba(14,165,233,.55);transition:background .16s cubic-bezier(.22,.61,.36,1)}
.cta:hover{background:var(--accent-hover)}
.cta-contact .cta{background:var(--accent)}
a.cta[style*="2d5490"],a.cta[style*="3b6fb5"]{background:var(--navy-500)!important;box-shadow:none}
.wish{border-color:var(--navy);color:var(--navy)}
.wish.on{background:var(--navy);color:#fff}
.mistake{border-left-color:var(--red)}
.faq dt:before{color:var(--accent)}
/* カード: 白面+ヘアライン+柔らかい角丸・影なし */
.rrow,.nextcard,.faq,.about,.methodology,.usefulbox,.factbox2,.quicktable,.scorelist,.stat,.card,.preflist li,details.foldrank summary{border-radius:10px}
.qbox,.mistake,.surveycomment{border-radius:0 10px 10px 0}
.spot-hero,.cta-contact,.riddle,.featured,.airank-card,.award{border-radius:16px}
.spotphoto img{border-radius:10px}
.ranking .rrow{border-radius:0}
.ranking .rrow.rank1{border-radius:0 10px 10px 0;background:var(--sky-100);border-left-color:var(--gold)}
.rfill,.scorelist .fill{background:var(--navy)}
.hero-score{background:rgba(255,255,255,.08);border:1px solid #2a4878}
.card:hover,.nextcard:hover,.geo-card:hover{border-color:var(--sky-300)}
.factbox2 th{background:var(--sky-50)}
.surveycomment{background:var(--sky-100);border-left-color:var(--navy)}
.official-cta{background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold)}
/* チップ類: ピル */
.badge,.chip,.chip2,.aspect,.fcbadge,.mchip{border-radius:999px}
.badge{background:var(--sky-100);color:var(--navy)}
.aspect,.fcbadge{background:var(--sky-100);color:var(--accent-text)}
.fcbadge{border-color:var(--sky-300)}
/* ===== V8 縦のリズム+可読性 (2026-07-26) — 章64/モジュール32の2段。山(ヒーロー・写真・審査評)に密度、従(FAQ・注記)は静かに ===== */
:root{--gap-chapter:64px;--gap-module:32px}
main.wrap{padding-block:36px 56px}
/* 見出し: バー→キッカー→見出しの縦積み(DS様式) */
h2{display:flex;flex-direction:column;gap:5px;margin:var(--gap-chapter) 0 16px;line-height:1.4}
h2::before{order:-2;margin-bottom:2px}
h2[data-kicker]::after{order:-1;margin-top:0}
h2+.secdesc,h2+.srcnote{margin-top:-8px;margin-bottom:20px}
/* モジュール間隔の統一(章間64は隣接h2のmarginが勝つ) */
.scorelist,.factbox2,.chips2,.nextcards,.aspects,.statstrip,.quicktable{margin-bottom:var(--gap-module)}
/* 行長: 長文系は約42字で折る */
.intro,.srcnote,.secdesc,.disclaimer,.faq dd,.about p,.fnote{max-width:680px}
.ranknote{max-width:680px;margin:14px 0 0}
/* 山1: ヒーロー */
.spot-hero{padding:30px 28px;gap:24px;margin-top:18px}
.hero-sub{margin-top:10px}
/* 山2: 写真は広く呼吸させる(キャプション・調査コメントは足元に密着) */
.spotphoto{margin:40px auto 8px}
.surveycomment{margin:20px 0 0;padding:14px 18px}
/* 山3: 審査評(3つのAIの回答)は本文級の密度 */
.ai-quote{padding:20px 0 20px 18px;gap:16px}
.ai-quote blockquote{font-size:16px;line-height:1.9}
/* 従の要素 */
.faq{padding:22px 24px;margin:var(--gap-module) 0}
.methodology{padding:22px 24px}
.official-cta{padding:20px 24px;margin:var(--gap-module) 0}
.rank-sec{margin-bottom:var(--gap-module)}
.ranking .rrow{padding:14px 10px}
.ranking .rrow.rank1{padding:22px 18px}
.stat{padding:14px 16px}
.statstrip{gap:12px}
.nextcards{gap:12px}
.geo-card{padding:18px 6px}
footer.site{margin-top:72px;padding:36px 0 44px}
.v5f .fnav{gap:16px;margin-bottom:14px}
/* モバイル: 44/24の2段 */
@media(max-width:600px){
:root{--gap-chapter:44px;--gap-module:24px}
main.wrap{padding-block:24px 40px}
h2{margin-top:var(--gap-chapter)}
.spot-hero{padding:24px 18px;gap:16px}
.spotphoto{margin:28px auto 6px}
.ai-quote{padding:16px 0 16px 14px}
.faq,.methodology,.official-cta{padding:18px 16px}
footer.site{margin-top:48px;padding:28px 0 32px}
}
/* ===== V9 コントロール整流 (2026-07-26) — ボタン/チップの高さ・余白を4段に統一 (44/38-40/34/28) ===== */
/* 主ボタン: 高さ44pxのピル */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 26px;font-size:14px;line-height:1.2;margin:0}
.cta.small{min-height:38px;padding:0 18px;font-size:13px}
/* CTAの並びはgapで整列(全角スペースの幅を消す) */
.official-cta p,.cta-contact p+p{font-size:0}
.official-cta p{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.official-cta .cta,.cta-contact .cta{font-size:14px}
/* 保存ボタン */
.wish{min-height:40px;padding:0 18px;font-size:13px;line-height:1.2}
.wishmini{padding:8px 12px}
/* リンクチップ(押せる): 高さ34px */
.chip,.chip2,.rankchip,.nextcard .t{line-height:1.4}
.chip,.chip2{display:inline-flex;align-items:center;min-height:34px;padding:0 16px}
.chips,.chips2{gap:8px;margin-top:0}
.rankchip{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px}
.badge{padding:7px 14px;margin:0 8px 8px 0}
/* 情報タグ(押せない): 高さ28px・小さく静かに */
.aspects{gap:8px}
.aspect,.fcbadge,.mchip{display:inline-flex;align-items:center;min-height:28px;padding:2px 12px}
.mchip{min-height:22px;padding:0 8px}
/* ヒーロー内チップの縦ズレ解消 */
.genrechip,.consensus{display:inline-flex;align-items:center;min-height:26px;padding:0 12px;vertical-align:middle}
.hero-txt .genrechip{margin-right:8px}
details.foldrank summary{padding:12px 16px}
.nextcard{padding:16px 18px}
@media(max-width:600px){
.cta{width:auto}
.official-cta p{gap:8px}
.official-cta .cta{flex:1 1 auto}
}
/* ===== V9.1 選出結果リストの折返し修正 — 長い値をクリップせず折り返す ===== */
.scorelist li{flex-wrap:wrap}
.scorelist .v{flex-shrink:1;min-width:0;overflow-wrap:anywhere}
.scorelist .v .fcbadge{max-width:100%;min-height:0;padding:5px 12px;line-height:1.7}
@media(max-width:600px){
.scorelist li{row-gap:4px}
.scorelist .k{flex:1 1 100%;width:auto}
.scorelist .v{width:auto;text-align:left}
}
/* ===== V10 自己内省の修正 (2026-07-26) — scorelist確実な折返し/バー減量/チップ整理/SPヒーロー整列 ===== */
noscript{display:none}
/* スコアバー: 細く静かに(データは数値が主役) */
.scorelist .bar,.rbar{height:6px;border-radius:999px;background:#d6e8f5}
.scorelist .fill,.rfill{border-radius:999px}
/* 順位チップ: クリーム地→白+金ヘアライン(表彰の金は保持) */
.rankchip{background:#fff;border:1px solid var(--gold);color:#8a6d14}
/* 破線→ヘアライン */
.disclaimer{border-top:1px solid var(--line)}
.nextcard{display:flex;flex-direction:column;gap:6px}
.nextcard .d{margin-top:0}
@media(max-width:600px){
/* 選出結果: 縦積みで確実に収める(ラベル上/値下、バーは非表示=.rbarと同じ扱い) */
.scorelist li{display:block;padding:12px 14px}
.scorelist .k{display:block;width:auto;margin:0 0 3px}
.scorelist .bar{display:none}
.scorelist .v{display:block;width:auto!important;max-width:100%;text-align:left;overflow-wrap:anywhere}
.scorelist .v .fcbadge{display:inline-flex;white-space:normal;height:auto}
/* ヒーロー: メダルを中央、スコアは全幅の帯に */
.spot-hero{justify-content:center}
.medal2{margin:0 auto}
.hero-txt{flex:1 1 100%}
.hero-score{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 16px;text-align:left}
.hero-score .n{font-size:30px}
.quicktable{font-size:12px}
}
/* V10.1 順位チップの詳細度合わせ */
.scorelist .rankchip,.rankchip{background:#fff;color:#8a6d14;border:1px solid var(--gold)}
/* ===== V11 TODO2-6 (2026-07-26) — ヒーロー整列 / 全国FV / 配色 / タイポ / SP縦積み ===== */
/* --- TODO4 配色: 紙面を空色寄りにして白カードを立たせる。金は表彰のみ --- */
:root{--paper:#f4fafd}
.stat,.card,.preflist li,.nextcard,.faq,.about,.methodology,.usefulbox,.factbox2,.scorelist,.quicktable,.official-cta,details.foldrank summary{background:#fff}
.quicktable th{background:var(--navy)}
.surveycomment{background:#eaf4fb}
.ranking .rrow.rank1{background:#eaf4fb}
/* 金の面積を減らす: 表彰(メダル・1位行・順位チップ・掲載枠の罫)のみ */
.consensus{background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;font-weight:600}
.cta-contact .cta{background:var(--accent)}
.wish{border-color:#c2d4e6}
/* --- TODO5 タイポスケール: 本文16/1.85は維持、見出しと最小サイズを整える --- */
.hero h1,.spot-hero h1,.spotpage h1{font-size:clamp(27px,3.4vw,40px);line-height:1.34;letter-spacing:-.015em}
h2{font-size:clamp(20px,2.2vw,26px);line-height:1.42}
h2[data-kicker]::after{font-size:11px;letter-spacing:.22em}
.intro{font-size:16px;line-height:1.95}
.secdesc,.srcnote,.ranknote,.disclaimer{font-size:13px;line-height:1.85}
.hero .src,.hero-sub{font-size:14px}
.fnote{font-size:13px}.fcopy{font-size:12px}
.aspect,.chip2,.badge,.genrechip,.consensus,.mchip,.fcbadge{font-size:12px}
.scorelist li{font-size:15px}
.faq dt{font-size:15px}.faq dd{font-size:15px}
/* --- TODO2 スポットヒーロー: 名前 → 順位(メダル) → スコア の視線順に整列 --- */
.spot-hero{align-items:center;gap:22px 26px}
.hero-txt{order:1;flex:1 1 300px}
.medal2{order:2}
.hero-score{order:3;text-align:right}
.hero-txt .loc{font-size:13px;letter-spacing:.04em}
.hero-txt h1{margin-bottom:10px}
.hero-txt p{margin:0}
.hero-txt .genrechip+.consensus{margin-left:2px}
.hero-sub{color:#d3e3f3;margin-top:12px;max-width:46em}
/* 重複する「第1位」表示は主従をつける: メダル=主、下のバッジ=補助リンク */
.spotbadges{margin-top:12px}
.spotbadges .badge{background:transparent;border:1px solid var(--sky-300);color:var(--accent-text);font-weight:600}
/* --- TODO3 全国トップFV: 紺の面を大きく取り、キッカー→大見出し→調査注記の階段に --- */
.hero{padding:64px 0 60px}
.hero .tag{display:flex;flex-direction:column;gap:8px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:16px}
.hero .tag::before{content:"";width:40px;height:3px;background:var(--accent)}
.hero h1{max-width:20em}
.hero .src{color:#a9c0dc;margin-top:16px;padding-top:14px;border-top:1px solid #2a4878;max-width:44em}
.rankpage .intro{margin:32px 0 0;max-width:38em}
.rankpage .intro p{font-size:16px;color:var(--ink)}
/* 罫線目次: 行送りと矢印で「編集された目次」に */
.geo-grid{gap:0 32px;margin:18px 0 0}
.geo-card{display:flex;align-items:baseline;gap:8px;padding:18px 2px;font-size:17px;font-weight:700;border-top-color:#c2d4e6}
.geo-card::after{content:"→";margin-left:auto;color:var(--accent);font-weight:400;font-size:14px;transition:transform .16s cubic-bezier(.22,.61,.36,1)}
.geo-card:hover::after{transform:translateX(3px)}
.geo-card small{color:var(--navy-300)}
.featured{background:transparent;color:var(--ink);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;padding:18px 22px}
.featured a{color:var(--accent-text)}
.featured .mini{color:var(--fg2)}
.featured .mini a{color:var(--accent-text)!important}
/* --- TODO6 SPヒーロー縦積み: 名前 → 順位 → スコア --- */
@media(max-width:600px){
.hero{padding:40px 0 36px}
.hero .tag{margin-bottom:12px}
.hero .src{margin-top:14px}
.rankpage .intro{margin-top:22px}
.spot-hero{gap:16px 14px;align-items:center}
.hero-txt{order:1;flex:1 1 100%}
.medal2{order:2;margin:0;width:88px}
.medal2 .disc{width:78px;height:78px}
.medal2 .mrk{font-size:25px}
.hero-score{order:3;flex:1 1 auto;width:auto;display:block;text-align:left;padding:12px 16px}
.hero-score .n{font-size:28px}
.hero-score .l{font-size:11px;line-height:1.5}
.geo-card{font-size:16px;padding:16px 2px}
.featured{padding:16px 18px}
}
/* ===== V12 仕上げ (2026-07-26 dusk) — 最後の詰めスポットをフィニッシュ ===== */
/* --- V12-1 ランキング行を再設計 --- */
.ranking .rrow.head{display:none}
.ranking .rrow{display:grid;grid-template-columns:44px 1fr auto;column-gap:14px;row-gap:6px;align-items:start;padding:16px 6px;border-radius:0}
.ranking .rrow>.rnum{grid-column:1;grid-row:1/3;font-size:22px;font-weight:800;color:#8b95a3;padding-top:2px;text-align:left;width:auto}
.ranking .rrow>.rnum.m1{color:var(--gold);font-size:26px}
.ranking .rrow>.rnum.m2{color:#8b95a3}
.ranking .rrow>.rnum.m3{color:#a9713f}
.ranking .rrow>.rname{grid-column:2;grid-row:1;min-width:0}
.ranking .rrow>.rname>a:first-child{font-family:var(--font-jp);font-weight:800;font-size:17px;line-height:1.4;color:var(--ink);letter-spacing:-.005em}
.ranking .rrow>.rname>a:first-child:hover{color:var(--accent-text);text-decoration:underline}
.ranking .rrow>.rname>small{display:block;font-family:var(--font-en);font-size:11px;letter-spacing:.06em;color:var(--navy-300);font-weight:600;margin-top:4px;text-transform:uppercase}
.ranking .rrow>.rname>.qteaser{font-family:var(--font-serif);font-size:14px;line-height:1.85;color:#475a75;margin-top:8px;display:block;font-weight:400;font-style:normal}
.ranking .rrow>.rname>.qteaser a{color:var(--accent-text);font-weight:600;white-space:nowrap;margin-left:4px}
.ranking .rrow>.rbar{grid-column:2/4;grid-row:2;max-width:none;width:100%;margin-top:6px;height:5px;background:var(--sky-200);flex:none}
.ranking .rrow>.rscore{grid-column:3;grid-row:1;text-align:right;font-size:18px;font-weight:800;color:var(--navy);white-space:nowrap;align-self:baseline;width:auto}
.ranking .rrow>.rscore>small{font-size:11px;color:var(--navy-300);font-weight:400;margin-left:2px}
.ranking .rrow>.rmore{grid-column:2;grid-row:3;justify-self:start;font-size:13px;color:var(--accent-text);font-weight:600;text-decoration:none;padding:6px 0 0;min-height:0;margin-left:0}
.ranking .rrow>.rmore:hover{text-decoration:underline}
.ranking .rrow>.rmore::after{content:" →";color:var(--accent)}
.ranking .rrow>.wishmini{grid-column:3;grid-row:3;justify-self:end;color:var(--navy-300);width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:0;border:1px solid var(--sky-200);border-radius:999px;background:#fff;transition:.16s;flex:none}
.ranking .rrow>.wishmini:hover{border-color:var(--navy);color:var(--navy)}
.ranking .rrow>.wishmini::before{content:"";display:block;width:14px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") no-repeat center/contain;mask:url("data:image/svg+xml;utf8,") no-repeat center/contain}
.ranking .rrow>.wishmini.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* 1位行の強制 */
.ranking .rrow.rank1{background:linear-gradient(90deg,#eaf4fb 0%,#eaf4fb 88%,transparent 100%);border-left:3px solid var(--gold);padding:22px 16px;margin:6px 0;border-radius:0 6px 6px 0}
.ranking .rrow.rank1>.rname>a:first-child{font-size:20px}
.ranking .rrow.rank1>.rnum{font-size:32px;padding-top:0}
.ranking .rrow:not(.rank1){border-bottom:1px solid var(--sky-200)}
.ranking .rrow:not(.rank1):last-child{border-bottom:none}
.rank-sec .ranking{margin-top:10px}
/* --- V12-2 SPでのランキング対応 --- */
@media(max-width:600px){
.ranking .rrow{grid-template-columns:36px 1fr auto;column-gap:10px;padding:14px 4px}
.ranking .rrow>.rname>a:first-child{font-size:16px;line-height:1.35}
.ranking .rrow.rank1{padding:18px 12px}
.ranking .rrow.rank1>.rname>a:first-child{font-size:18px}
.ranking .rrow.rank1>.rnum{font-size:26px}
.ranking .rrow>.rscore{font-size:16px}
.ranking .rrow>.rbar{display:block!important;height:4px}
.ranking .rrow>.rname>.qteaser{font-size:13px;line-height:1.8}
.ranking .rrow>.wishmini{width:34px;height:34px}
}
/* --- V12-3 全国ヒーロー.tag の縦積み強制 --- */
.hero .tag{flex-direction:column!important;align-items:flex-start;gap:10px}
.hero .tag::before{flex:none}
/* --- V12-4 SPヒーローの密度修正 --- */
@media(max-width:600px){
.hero .tag{font-size:11px;gap:8px}
.hero h1{font-size:24px;line-height:1.35;letter-spacing:-.015em}
.hero-txt .loc{font-size:12px}
.v5h .brandtop{gap:8px}
}
/* --- V12-5 全国 geo-cardと依存 --- */
.geo-card{align-items:center}
.geo-card small{margin-left:8px;color:var(--navy-300);font-family:var(--font-en);font-size:12px}
@media(max-width:600px){
.geo-grid{grid-template-columns:1fr;gap:0}
.geo-card{padding:16px 4px;font-size:16px;border-top-color:var(--sky-200)}
.geo-card:last-child{border-bottom:1px solid var(--sky-200)}
}
/* --- V12-6 スポットヒーローの情報重複整理 --- */
.hero-txt .loc{opacity:.9;font-weight:500}
.hero-txt .genrechip,.hero-txt .consensus{display:inline-flex;align-items:center;height:26px;line-height:1;margin-bottom:6px}
.spot-hero + .spotbadges{margin-top:10px}
.spot-hero + .spotbadges .badge:first-child{display:none}
.spotbadges:empty{display:none}
/* --- V12-7 SPスポットヒーロー: キスト/メダル/スコアの縦積み --- */
@media(max-width:600px){
.spot-hero{display:grid;grid-template-columns:1fr;grid-template-areas:"txt" "trophy" "score";gap:14px;padding:22px 18px}
.spot-hero .hero-txt{grid-area:txt;order:0;width:100%}
.spot-hero .medal2{grid-area:trophy;order:0;margin:6px auto 0}
.spot-hero .hero-score{grid-area:score;order:0;width:100%;display:flex;align-items:baseline;justify-content:space-between;text-align:left;padding:14px 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:10px}
.spot-hero .hero-score .n{font-size:32px;font-weight:800;line-height:1}
.spot-hero .hero-score .l{font-size:11px;color:#a9c0dc;text-align:right;line-height:1.5;max-width:60%}
.hero-txt .wish{margin-top:14px}
.medal2 .ribbons{transform:scale(.7)}
.medal2 .yr{font-size:9px;margin-top:6px}
.spot-hero h1{font-size:26px;letter-spacing:-.02em;line-height:1.3;margin-bottom:8px}
.spot-hero .hero-sub{font-size:14px;line-height:1.8;margin-top:10px;color:#eaf4fb}
}
/* --- V12-8 ヒーロー 保存ボタンのマージン --- */
.hero-txt .wish{margin-top:14px}
/* --- V12-9 集計結果リスト: 数値でない項目のバーを非表示 --- */
.scorelist li:has(.v .fcbadge) .bar,
.scorelist li:has(.v .chip2) .bar,
.scorelist li.no-bar .bar{visibility:hidden}
/* --- V12-10 メダル: 銀・銅は塩気を抑え、金だけ発火させる --- */
.medal2.silver .disc{background:#e3e8ee;color:#59616c;border-color:#f0f3f6}
.medal2.bronze .disc{background:#d9b189;color:#6a4a2a;border-color:#f0dcc6}
.medal2 .mstar{font-size:8.5px;letter-spacing:.4px;color:#5d470c;font-weight:700}
.medal2 .mrk{color:#5d470c}
.medal2 .mcat{color:#5d470c}
.medal2.silver .mstar,.medal2.silver .mrk,.medal2.silver .mcat{color:#59616c}
.medal2.bronze .mstar,.medal2.bronze .mrk,.medal2.bronze .mcat{color:#6a4a2a}
/* --- V12-11 「AIはここを間違えた」カード: 静かに --- */
.mistake{background:#fff;border:1px solid var(--sky-200);border-left-width:3px;padding:14px 16px}
.mistake b{font-weight:700;color:var(--red)}
/* --- V12-12 secdesc・ranknote: 静かな複行 --- */
.secdesc,.ranknote{color:var(--fg2);font-size:13.5px;line-height:1.85}
.rank-sec .secdesc{margin-top:4px}
/* --- V12-13 サーベイコメント: 上部に小さなラベルを --- */
.surveycomment{background:transparent;border-left:3px solid var(--navy);padding:12px 16px 12px 18px;font-size:14px;color:var(--ink);border-radius:0;line-height:1.85}
.surveycomment b{font-family:var(--font-en);font-size:11px;letter-spacing:.14em;color:var(--navy);font-weight:700;display:block;margin-bottom:4px;text-transform:uppercase}
/* --- V12-14 早見表 quicktableの雑誌化 --- */
.quicktable{border:1px solid var(--sky-200);border-radius:0}
.quicktable th{padding:10px 12px;font-size:11px;letter-spacing:.08em;font-family:var(--font-en);text-transform:uppercase}
.quicktable td{padding:10px 12px;font-size:13px;color:var(--ink)}
.quicktable td:not(:first-child){font-family:var(--font-en);letter-spacing:0;font-weight:600;color:var(--navy)}
.quicktable td:first-child a{font-weight:700}
/* --- V12-15 statカードの雑誌風ラベル --- */
.statstrip{margin:22px 0 var(--gap-module);border-top:1px solid var(--sky-200);border-bottom:1px solid var(--sky-200);padding:16px 0;background:transparent;gap:0}
.stat{background:transparent;border:none;text-align:left;padding:0 20px;border-right:1px solid var(--sky-200);flex:1;min-width:0;border-radius:0}
.stat:last-child{border-right:none}
.stat .n{font-size:28px;color:var(--navy);font-weight:800;letter-spacing:-.02em}
.stat .l{font-size:11px;color:var(--navy-300);font-family:var(--font-en);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;font-weight:600}
@media(max-width:600px){
.statstrip{display:grid;grid-template-columns:repeat(2,1fr);gap:0;padding:14px 0}
.stat{padding:10px 14px;border-right:1px solid var(--sky-200)}
.stat:nth-child(2n){border-right:none}
.stat:nth-child(-n+2){border-bottom:1px solid var(--sky-200);padding-bottom:14px;margin-bottom:10px}
.stat .n{font-size:22px}
}
/* --- V12-16 pref-hook: 金のティック付きのリード文に --- */
.pref-hook{font-family:var(--font-serif);font-weight:700;font-size:17px;line-height:1.85;color:var(--ink);margin:26px 0 10px}
.pref-hook::before{content:"";display:inline-block;width:24px;height:2px;background:var(--gold);vertical-align:middle;margin-right:10px;transform:translateY(-3px)}
/* --- V12-17 ヒーロー内のジャンル/合意チップの見た目 --- */
.hero-txt .consensus{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;font-family:var(--font-en);font-size:11px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.hero-txt .genrechip{background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:600}
/* --- V12-18 章間余白の一貫化 --- */
h2{margin-top:56px}
.hero + main.wrap > *:first-child + h2,
.hero + main.wrap > h2:first-of-type,
.rankpage > .wrap > h2:first-of-type,
.spotpage > .wrap > h2:first-of-type{margin-top:32px}
@media(max-width:600px){h2{margin-top:44px}}
/* --- V12-19 印刷用の追加 --- */
@media print{
.ranking .rrow>.wishmini,.ranking .rrow>.rmore{display:none!important}
.ranking .rrow.rank1{background:#fff!important;border-left:2px solid #999}
}
/* ===== V12.1 残問題の修正 ===== */
/* --- スポットヒーローのジャンル重複消し: .locの「 | 海・ビーチ」を非表示し、地名のみにする --- */
/* HTML側で変えるのが確実だが、CSSでもジャンルチップを靥やかにして重複を掛さないトーンに */
.hero-txt .genrechip{background:transparent;border:1px solid rgba(255,255,255,.35);color:#a9c0dc;font-family:var(--font-en);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.hero-txt .consensus{background:transparent;border:1px solid rgba(184,145,46,.5);color:#f4dd7e;font-family:var(--font-en);font-size:11px;letter-spacing:.06em;font-weight:700}
/* --- ランキング行の.rbar: 涼しめのニュートラルにする(100%満タンで強主張をさせない) --- */
.rfill{background:linear-gradient(90deg,#3b6fb5 0%,#1b3a6b 100%);opacity:.55}
.ranking .rrow.rank1 .rfill{opacity:.75;background:linear-gradient(90deg,#c9a227 0%,#8a6d14 100%)}
/* --- 1位行のバーを非表示に: 1位は選ばれたこと自体が価値だから、スコアはヘッダーの数値とリボンで見せる --- */
.ranking .rrow.rank1 .rbar{display:none}
.ranking .rrow.rank1 .rname>.qteaser{margin-bottom:4px}
/* --- 2位以下のバーも、スコアが95%以上なら見せない(差が少ないとちゃんと見えない) --- */
.ranking .rrow[data-score="100"] .rbar{opacity:.35}
/* --- スポットヒーローの.loc: ジャンル部分をサブテキスト化し、都市名のみを強める --- */
.hero-txt .loc{color:#a9c0dc;font-size:12px;font-family:var(--font-en);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
/* --- SPでジャンルチップと合意チップの間隔を磨く --- */
@media(max-width:600px){
.hero-txt .genrechip,.hero-txt .consensus{font-size:10px;height:22px;padding:0 10px}
}
/* --- スコアリストのバーも同様に静かに --- */
.scorelist .fill{background:linear-gradient(90deg,#3b6fb5,#1b3a6b);opacity:.55}
/* --- ヘーダーの左ブランド行: SPでも日付とブランド名の間隔を確保 --- */
.v5h .brandtop{padding:8px 0}
.v5h .seriesname{padding:4px 0 8px}
/* --- バッジ: SPで便宜上行高を一回り小さく --- */
@media(max-width:600px){
.badge{padding:5px 10px;font-size:11px}
}
/* --- V12.1-A ranking行のqteaserの尾尾に入る「→ 全文」リンクの位置微調 --- */
.ranking .rrow>.rname>.qteaser{color:#4a5b7a}
.ranking .rrow.rank1>.rname>.qteaser{color:#3b4a63}
/* --- V12.1-B 全国 geo-card の行高揃え (県数テキストの位置) --- */
.geo-card{min-height:56px;display:flex;align-items:center}
.geo-card small{margin-left:auto;margin-right:16px;color:var(--navy-300);font-family:var(--font-en);font-size:12px;font-weight:400}
.geo-card::after{margin-left:0}
@media(max-width:600px){
.geo-card{min-height:52px;padding:14px 4px}
.geo-card small{margin-right:14px}
}
/* --- V12.1-C サーベイコメントの【】のラベル化: もとの【ナタカナ】を小さなコード風ラベルに見せる --- */
/* HTMLのタグ内容を別クラス化できないので、CSSのattrはできないが、見た目はこれで良し */
/* --- V12.1-D 1位カードの白のフェードをやめて均一の水色に --- */
.ranking .rrow.rank1{background:#eaf4fb}
/* --- V12.1-E FAQ dt のQマークをシアン丸 --- */
.faq dt{padding-left:26px}
.faq dt:before{content:"Q";position:absolute;left:0;top:2px;width:20px;height:20px;background:var(--accent);color:#fff;border-radius:999px;text-align:center;font-size:12px;font-weight:800;line-height:20px;font-family:var(--font-en)}
.faq dd{padding-left:26px;margin-left:0}
.faq dd:before{content:"A";float:left;margin-left:-26px;color:var(--navy-300);font-weight:800;font-family:var(--font-en);width:20px;text-align:center;font-size:12px;line-height:24px}
/* v12.1 patch 2026-07-27: 文節折り返し+全国TOP県ディレクトリ */
.bx{word-break:keep-all;overflow-wrap:anywhere}
.geo-sec{margin:18px 0 8px}
.geo-sec h3{margin:0 0 10px;font-size:15.5px}
.geo-sec h3 a{color:var(--navy);text-decoration:none}
.geo-sec h3 a:after{content:" ›";color:#6b7f99}
.geo-sec .geo-card small{display:block;margin-top:4px;font-weight:400;color:#6b7f99;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preflist .top1{margin-left:10px;font-size:12.5px;color:#6b7f99}
/* v12.2 tag pages 2026-07-29 */
ol.taglist{list-style:none;padding:0;margin:14px 0 6px}
.taglist .rrow{align-items:flex-start;flex-wrap:wrap}
.taglist .rname{min-width:0}
.ranking.taglist .rrow>.rmore{margin-top:4px;padding:7px 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:700}
.reltags{margin:24px 0 8px}
.reltags h2{font-size:15.5px;margin:0 0 10px}
.reltags .chip2{display:inline-block;margin:0 6px 8px 0}
@media (max-width:600px){.taglist .rrow{padding:12px}.taglist .rmore{margin-left:auto}}
/* ===== v12.3 2026-07-29: 写真サムネ・部門カラー・面のメリハリ ===== */
:root{--cat-teiban:#b8912e;--cat-kazoku:#c4653a;--cat-anaba:#2f7d8c;--paper2:#eef6fb}
/* --- セクションを白いカードにして地(薄青)とのコントラストを作る --- */
body{background:var(--paper2)}
.rank-sec,.about,.methodology,.reltags,.faq-sec{background:#fff;border:1px solid var(--sky-200);border-radius:12px;padding:26px 24px;margin:26px 0;box-shadow:0 1px 2px rgba(22,35,59,.04)}
.rank-sec>h2:first-child,.about>h2:first-child,.methodology>h2:first-child,.reltags>h2:first-child{margin-top:0}
@media(max-width:600px){.rank-sec,.about,.methodology,.reltags,.faq-sec{padding:20px 14px;margin:18px 0;border-radius:10px}}
/* --- 部門ごとのアクセント色(定番=金/家族連れ=橙/穴場=青緑) --- */
.rank-sec[data-cat="teiban"]{--cat:var(--cat-teiban)}
.rank-sec[data-cat="kazoku"]{--cat:var(--cat-kazoku)}
.rank-sec[data-cat="anaba"]{--cat:var(--cat-anaba)}
.rank-sec[data-cat] h2::before{background:var(--cat)}
.rank-sec[data-cat] .rfill{background:var(--cat)}
.rank-sec[data-cat] .rrow.rank1{border-left-color:var(--cat)}
.rank-sec[data-cat] .rscore{color:var(--cat)}
.rank-sec[data-cat] .rthumb .tbadge{background:var(--cat)}
.rank-sec[data-cat] .surveycomment{border-left:3px solid var(--cat)}
/* --- サムネイル列(すかすか解消の主役) --- */
.ranking .rrow{grid-template-columns:34px 108px 1fr auto;column-gap:14px}
.ranking .rrow>.rthumb{grid-column:2;grid-row:1/4;position:relative;display:block;width:108px;aspect-ratio:3/2;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,var(--sky-100),var(--sky-200));align-self:start}
.ranking .rrow>.rthumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.ranking .rrow>.rthumb:hover img{transform:scale(1.06)}
.ranking .rrow>.rthumb.head{background:none;aspect-ratio:auto;height:0}
.ranking .rrow>.rthumb .tbadge{position:absolute;left:0;top:0;min-width:22px;text-align:center;background:var(--gold);color:#fff;font-size:12px;font-weight:800;line-height:1;padding:5px 7px;border-radius:0 0 8px 0;font-family:var(--font-en)}
.ranking .rrow>.rname{grid-column:3}
.ranking .rrow>.rbar{grid-column:3/5}
.ranking .rrow>.rscore{grid-column:4}
.ranking .rrow>.rmore{grid-column:3}
.ranking .rrow>.wishmini{grid-column:4}
/* 宿など写真を持たない一覧は従来の3列に戻す */
.ranking.nothumb .rrow{grid-template-columns:44px 1fr auto}
.ranking.nothumb .rrow>.rname{grid-column:2}
.ranking.nothumb .rrow>.rbar{grid-column:2/4}
.ranking.nothumb .rrow>.rscore{grid-column:3}
@media(max-width:600px){
.ranking .rrow{grid-template-columns:26px 84px 1fr auto;column-gap:10px}
.ranking .rrow>.rthumb{width:84px;border-radius:6px}
.ranking .rrow>.rnum{font-size:18px}
.ranking .rrow.rank1>.rnum{font-size:24px}
.ranking.nothumb .rrow{grid-template-columns:36px 1fr auto}
}
/* --- 1位をもっと主役に --- */
.ranking .rrow.rank1>.rthumb{width:100%;max-width:none;grid-column:2/5;grid-row:1;aspect-ratio:16/7;margin-bottom:10px}
.ranking .rrow.rank1>.rname{grid-column:2/5;grid-row:2}
.ranking .rrow.rank1>.rbar{grid-column:2/5;grid-row:3}
.ranking .rrow.rank1>.rscore{grid-column:4;grid-row:2;align-self:start}
.ranking .rrow.rank1>.rmore{grid-column:2;grid-row:4}
.ranking .rrow.rank1>.wishmini{grid-column:4;grid-row:4}
.ranking .rrow.rank1>.rthumb .tbadge{font-size:14px;padding:7px 11px}
@media(max-width:600px){.ranking .rrow.rank1>.rthumb{aspect-ratio:3/2}}
/* --- タグページ: サムネ入りの行に整える --- */
.ranking.taglist .rrow{grid-template-columns:108px 1fr auto;column-gap:14px;align-items:start}
.ranking.taglist .rrow>.rthumb{grid-column:1;grid-row:1/4}
.ranking.taglist .rrow>.rname{grid-column:2;grid-row:1}
.ranking.taglist .rrow>.rmore{grid-column:2;grid-row:2;margin-top:8px}
@media(max-width:600px){.ranking.taglist .rrow{grid-template-columns:84px 1fr;column-gap:12px}}
/* --- チップに色味を戻す --- */
.reltags .chip2{border-color:var(--sky-200);color:var(--navy);background:#fff}
.reltags .chip2:hover{border-color:var(--navy);background:var(--sky-100)}
/* ===== v12.4 2026-07-29: メダル色を戻す・写真なし枠を埋める・サムネ拡大 ===== */
.ranking .rrow>.rthumb{width:124px;border-radius:10px}
.ranking .rrow{grid-template-columns:32px 124px 1fr auto}
@media(max-width:600px){
.ranking .rrow{grid-template-columns:24px 96px 1fr auto;column-gap:11px}
.ranking .rrow>.rthumb{width:96px;border-radius:8px}
}
.ranking.taglist .rrow{grid-template-columns:124px 1fr auto}
@media(max-width:600px){.ranking.taglist .rrow{grid-template-columns:96px 1fr}}
/* 順位バッジは金・銀・銅(部門色より優先) */
.rank-sec[data-cat] .rthumb .tbadge.m1,.rthumb .tbadge.m1{background:linear-gradient(145deg,#d8b055,#b8912e)}
.rank-sec[data-cat] .rthumb .tbadge.m2,.rthumb .tbadge.m2{background:linear-gradient(145deg,#b9c2cc,#8b95a3)}
.rank-sec[data-cat] .rthumb .tbadge.m3,.rthumb .tbadge.m3{background:linear-gradient(145deg,#c98f5e,#a9713f)}
.rthumb .tbadge{box-shadow:0 1px 3px rgba(22,35,59,.25)}
/* 写真がないスポットは頭文字を大きく薄く敷いて空白をなくす */
.rthumb.noimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#dcebf6,#c9e0f0)}
.rthumb.noimg::before{content:attr(data-init);font-family:var(--font-jp);font-size:38px;font-weight:800;color:rgba(27,58,107,.28);line-height:1}
.ranking .rrow.rank1>.rthumb.noimg::before{font-size:76px}
@media(max-width:600px){.rthumb.noimg::before{font-size:30px}}
/* ===== v12.5 2026-07-29: 狭い列での引用の折り返しを文節寄りに ===== */
.ranking .rrow>.rname>.qteaser{word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:600px){
.ranking .rrow{grid-template-columns:24px 88px 1fr auto}
.ranking .rrow>.rthumb{width:88px}
.ranking.taglist .rrow{grid-template-columns:88px 1fr}
.ranking .rrow>.rname>.qteaser{font-size:13px;line-height:1.78;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ranking .rrow.rank1>.rname>.qteaser{-webkit-line-clamp:6}
}
/* ===== v12.6 2026-07-29: 全国TOPの県カード(名前の割れ・1位の切れを解消) ===== */
.geo-sec .geo-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:0 26px}
.geo-sec .geo-card{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:2px;padding:14px 2px;font-size:16px}
.geo-sec .geo-card>*{min-width:0}
.geo-sec .geo-card{white-space:nowrap}
.geo-sec .geo-card small{grid-column:1/3;grid-row:2;display:block;margin:0;font-family:var(--font-jp);font-size:12.5px;color:#6b7f99;font-weight:400;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.geo-sec .geo-card::after{grid-column:2;grid-row:1;margin-left:12px}
@media(max-width:600px){.geo-sec .geo-grid{grid-template-columns:1fr}}
/* 全国TOPの各ブロックも他ページと同じ白カードに揃える */
.rankpage>section:not(.hero):not(.intro):not(.featured){background:#fff;border:1px solid var(--sky-200);border-radius:12px;padding:26px 24px;margin:26px 0;box-shadow:0 1px 2px rgba(22,35,59,.04)}
.rankpage>section:not(.hero):not(.intro):not(.featured)>h2:first-child{margin-top:0}
@media(max-width:600px){.rankpage>section:not(.hero):not(.intro):not(.featured){padding:20px 14px;margin:18px 0;border-radius:10px}}
/* ===== v12.7 2026-07-29: 地方ハブの県カード(写真つき・折り返し解消) ===== */
.preflist{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.preflist li{margin:0}
a.prefcard{display:block;background:#fff;border:1px solid var(--sky-200);border-radius:10px;overflow:hidden;text-decoration:none;transition:border-color .16s,box-shadow .16s}
a.prefcard:hover{border-color:var(--navy);box-shadow:0 6px 18px -12px rgba(22,35,59,.5)}
a.prefcard .pcmedia{display:block;position:relative;aspect-ratio:3/2;background:linear-gradient(150deg,#dcebf6,#c9e0f0);overflow:hidden}
a.prefcard .pcmedia img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
a.prefcard:hover .pcmedia img{transform:scale(1.05)}
a.prefcard .pcmedia .noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
a.prefcard .pcmedia .noimg::before{content:attr(data-init);font-family:var(--font-jp);font-size:46px;font-weight:800;color:rgba(27,58,107,.26);line-height:1}
a.prefcard .pcbody{display:block;padding:12px 14px 14px}
a.prefcard .pcbody b{display:block;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:-.005em}
a.prefcard .pcbody small{display:block;margin-top:3px;font-size:12.5px;color:#6b7f99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:600px){.preflist{grid-template-columns:repeat(2,1fr);gap:12px}a.prefcard .pcbody{padding:10px 11px 12px}a.prefcard .pcbody b{font-size:15px}}