/* =========================================================
   記事・一覧（stg okane_column / ranking / review / articles-list の lp2 CSS を統合）
   ・stg独自ヘッダー/フッター部分は除外（hikaku準拠のものを使用）
   ・素の要素(figure/ul/ol)と汎用ユーティリティは .article-main 配下に限定
   ========================================================= */
:root{--success:#0a7a52;--warning:#704600;--danger:#b53a2d;}
.article-main ul, .article-main ol{margin: 0; padding: 0; list-style: none;}
.article-main .text-sm{font-size: 14px; margin: 0; line-height: 1.8;}
.article-main .text-xs{font-size: 12px; color: var(--ink-soft); margin: 0; line-height: 1.6;}
.article-main .text-bold{font-weight: 700;}
.article-main .mb-24{margin-bottom: 24px !important;}
.article-main .mb-12{margin-bottom: 12px !important;}
.article-main .mt-12{margin-top: 12px !important;}
.article-main .mt-16{margin-top: 16px !important;}
.article-main .mt-32{margin-top: 32px !important;}
.article-main .mt-48{margin-top: 48px !important;}
.article-main .mb-48{margin-bottom: 48px !important;}
.section{width: min(var(--container), calc(100% - 48px)); margin: 0 auto; padding: 64px 0;}
.section-label{color: var(--core-red); font-size: 13px; font-weight: 700; margin-bottom: 8px;}
.section-title{font-family: var(--font-heading); font-size: 24px; font-weight: 700; margin: 0 0 24px; line-height: 1.5;}
.button-primary{display: flex; align-items: center; justify-content: center; width: 100%; max-width: 360px; height: 52px; background: var(--core-red); color: var(--paper-white); font-weight: 700; font-size: 16px; border-radius: 12px; transition: background 0.2s, transform 0.2s;}
.button-primary:hover{background: var(--core-red-pressed); transform: translateY(-1px); color: var(--paper-white);}
.button-ghost{display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 16px; font-size: 15px; font-weight: 700; color: var(--ink); background: var(--paper-white); border: 1px solid var(--line-warm); border-radius: 12px; transition: background 0.2s, transform 0.2s;}
.button-ghost:hover{background: var(--fog-gray); transform: translateY(-1px);}
.article-main{width: 100%; padding: 40px 0; font-size: 16px; line-height: 1.95; color: var(--ink);}
.article-header, .article-intro-box, .card-detail-section, .mid-diagnosis-section, .faq-section, .review-area, .related-article-section, .review-summary-section, .toc-wrapper, #author_profile{max-width: var(--reading); margin-left: auto; margin-right: auto; width: calc(100% - 48px);}
.article-title{font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.4; margin: 0;}
.article-meta{display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: 13px; color: var(--ink-soft); margin: 16px 0 24px;}
.article-author-date a{text-decoration: underline; text-underline-offset: 4px;}
.article-date{margin-left: 8px;}
.article-tags{display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px;}
.article-tags a{padding: 0; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 700; border-radius: 0;}
.pr-tooltip{position: relative; display: inline-block; cursor: help;}
.pr-mark{border: 1px solid var(--line-warm); padding: 2px 6px; border-radius: 4px; font-size: 11px; background: var(--fog-gray);}
.pr-desc{display: none; position: absolute; top: 100%; left: 0; margin-top: 8px; width: 320px; padding: 16px; background: var(--paper-white); border: 1px solid var(--line-warm); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-radius: 12px; font-size: 12px; z-index: 10; line-height: 1.6;}
.pr-tooltip:hover .pr-desc{display: block;}
.article-intro-wrapper{background: var(--fog-gray); padding: 48px 0; margin-bottom: 56px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);}
.article-intro-box{display: flex; flex-direction: column; gap: 24px; align-items: center;}
.intro-image img{width: 100%; max-width: 600px; height: auto; border-radius: 12px; object-fit: cover; display: block; margin: 0 auto;}
.intro-text{width: 100%; background: var(--paper-white); padding: 24px; border-radius: 12px; border: 1px solid var(--line-soft); box-sizing: border-box;}
.intro-summary-title{font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); text-align: center;}
.intro-summary-list{padding-left: 16px; margin: 0 0 12px; font-size: 16px; line-height: 1.95; list-style-type: disc;}
.intro-summary-list li{margin-bottom: 8px;}
.intro-summary-list li:last-child{margin-bottom: 0;}
.toc-wrapper{margin-bottom: 48px;}
.toc-label{font-size: 14px; color: var(--ink);}
.toc-list{padding-left: 20px; margin: 8px 0 0; list-style-type: decimal;}
.toc-list li{margin-bottom: 8px; font-size: 16px; line-height: 1.8;}
.toc-list li:last-child{margin-bottom: 0;}
.link-red-underline{text-decoration: underline; color: var(--core-red);}
.note-accordion{border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); margin-bottom: 32px;}
.note-toggle-input{display: none;}
.note-toggle-label{display: block; padding: 12px 32px 12px 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; position: relative; margin: 0;}
.note-toggle-label::after{content: "▼"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; transition: transform 0.2s ease;}
.note-toggle-input:checked ~ .note-toggle-label::after{transform: translateY(-50%) rotate(180deg);}
.note-toggle-content{max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; padding: 0;}
.note-toggle-input:checked ~ .note-toggle-content{max-height: 1000px; opacity: 1; padding: 0 16px 16px;}
.character-intro-wrapper{background: var(--fog-gray); border-radius: 12px; padding: 24px; margin-bottom: 32px; border: 1px solid var(--line-soft);}
.character-intro-title{font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 16px; color: var(--core-red);}
.character-list{display: flex; flex-direction: column; gap: 16px;}
.character-item{display: flex; align-items: center; gap: 16px; background: var(--paper-white); padding: 16px; border-radius: 12px; border: 1px solid var(--line-soft);}
.character-icon{width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--line-warm);}
.character-info .name{font-size: 15px; font-weight: 700; margin-bottom: 4px;}
.character-info .desc{font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin: 0;}
.interview-item{display: flex; gap: 16px; margin-bottom: 24px;}
.interview-item:last-child{margin-bottom: 0;}
.interview-speaker{width: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;}
.interview-speaker img{width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-warm);}
.interview-speaker .name{font-size: 11px; font-weight: 700; margin-top: 4px; text-align: center; color: var(--ink-soft); white-space: nowrap;}
.interview-bubble{flex: 1; position: relative; background: var(--fog-gray); padding: 16px 20px; border-radius: 12px; font-size: 16px; line-height: 1.95;}
.interview-bubble p{margin: 0 0 12px;}
.interview-bubble p:last-child{margin-bottom: 0;}
.interview-bubble::before{content: ""; position: absolute; top: 16px; left: -8px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent var(--fog-gray) transparent transparent;}
.interview-item.editor .interview-bubble{background: var(--paper-white); border: 1px solid var(--line-soft);}
.interview-item.editor .interview-bubble::before{border-width: 8px 8px 8px 0; border-color: transparent var(--line-soft) transparent transparent; left: -9px;}
.interview-item.editor .interview-bubble::after{content: ""; position: absolute; top: 16px; left: -7px; border-style: solid; border-width: 8px 8px 8px 0; border-color: transparent var(--paper-white) transparent transparent;}
.card-detail-section p{margin: 0 0 20px;}
.card-detail-section p:last-child{margin-bottom: 0;}
.step-box{background: var(--fog-gray); padding: 24px; border-radius: 12px; margin-bottom: 24px; border: 1px solid var(--line-soft);}
.step-item{margin-bottom: 16px;}
.step-item:last-child{margin-bottom: 0;}
.step-item-title{color: var(--core-red); font-size: 16px; display: block; margin-bottom: 4px; font-weight: 700;}
.experience-spec-box{margin-top: 48px; border: 1px solid var(--line-warm); padding: 32px; border-radius: 12px; background: var(--paper-white);}
.spec-header{text-align: center; margin-bottom: 24px;}
.spec-catch{color: var(--core-red); margin-bottom: 4px; font-weight: 700;}
.spec-card-img{width: 200px; height: auto;}
.spec-title{font-size: 20px; font-weight: 700; margin: 12px 0 0;}
.spec-table{width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 24px;}
.spec-table th, .spec-table td{padding: 12px; border: 1px solid var(--line-soft);}
.spec-table th{background: var(--fog-gray); width: 30%; font-weight: 700; text-align: left;}
.eval-point-area{margin-bottom: 32px; padding: 24px; background: var(--fog-gray); border-radius: 12px;}
.eval-point-title{color: var(--core-red); font-size: 18px; font-weight: 700; margin: 0 0 12px;}
.article-main figure{text-align: center; margin: 32px 0;}
.article-main figure img{width: 100%; max-width: 560px; height: auto; display: block; margin: 0 auto; border-radius: 12px; border: 1px solid var(--line-soft);}
.article-main figure figcaption, .article-main figure .sc_caption{font-size: 13px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5;}
#author_profile{display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; background: var(--paper-white) !important; padding: 24px; border-radius: 12px; border: 1px solid var(--line-soft);}
#author_profile .label{grid-column: 1 / -1; font-size: 16px; margin: 0 0 16px; font-weight: 700; border-bottom: 1px solid var(--line-warm); padding-bottom: 8px; color: var(--ink); background: transparent !important;}
#author_profile .left img{width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-soft);}
#author_profile .author_name{display: flex; flex-direction: column; margin-bottom: 8px;}
#author_profile .position{font-size: 12px; color: var(--ink-soft); margin-bottom: 2px;}
#author_profile .name{font-size: 16px; font-weight: 700; color: var(--ink);}
#author_profile .author_description{font-size: 14px; line-height: 1.8; color: var(--ink-soft);}
.read-more-toggle{display: none;}
span.more-text{display: inline;}
.read-more-label{display: none;}
.faq-section{margin-bottom: 64px;}
.faq-item{border-bottom: 1px solid var(--line-soft); padding: 24px 0; margin: 0;}
.faq-q{display: flex; gap: 12px; font-weight: 700; font-size: 16px; margin-bottom: 12px; cursor: pointer;}
.faq-icon{flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-family: var(--font-number); font-weight: 700; font-size: 14px;}
.q-icon{background: var(--ink); color: var(--paper-white);}
.a-icon{background: var(--core-red); color: var(--paper-white);}
.faq-a{display: flex; gap: 12px; margin: 0;}
.related-article-section{margin-bottom: 64px; padding: 32px; background: var(--fog-gray); border-radius: 12px;}
.related-list{display: flex; flex-direction: column; gap: 16px;}
.related-item{display: flex; gap: 16px; padding: 16px; background: var(--paper-white); border: 1px solid var(--line-soft); border-radius: 12px; transition: transform 0.2s;}
.related-item:hover{transform: translateY(-1px); border-color: var(--line-warm);}
.related-thumb{flex: 0 0 120px;}
.related-thumb img{width: 100%; height: auto; border-radius: 8px; object-fit: cover; aspect-ratio: 16 / 9;}
.related-item-title{margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5;}
.mid-diagnosis-section{text-align: center; margin-bottom: 56px;}
.diagnosis-catcher{font-family: var(--font-heading); font-size: 15px; font-weight: 700; margin: 0 0 16px; letter-spacing: 0.05em;}
.diagnosis-banner-list{display: flex; flex-direction: column; align-items: center; gap: 24px;}
.diagnosis-banner-item{display: block; width: 100%; max-width: 728px; text-align: center; transition: transform 0.2s ease;}
.diagnosis-banner-item img{width: 100%; height: auto; border: 1px solid var(--line-warm); border-radius: 12px;}
.diagnosis-banner-item:hover{transform: translateY(-2px);}
.banner-sp-only{display: none;}
.sticky-cv-bottom{position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.65); border-top: 1px solid var(--line-soft); padding: 12px 16px 24px; z-index: 100; backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;}
.sticky-cv-bottom.is-visible{opacity: 1; visibility: visible; transform: translateY(0);}
.sticky-cv-inner{max-width: 600px; margin: 0 auto; text-align: center;}
.sticky-cv-murmur{font-size: 13px; font-weight: 700; color: var(--core-red); margin: 0 0 8px;}
.sticky-btn-primary{max-width: 100%; height: 56px; flex-direction: column; justify-content: center; gap: 2px;}
.btn-main-text{font-size: 16px; line-height: 1.2;}
.btn-sub-text{font-size: 12px; font-weight: normal; line-height: 1.2;}
.pill{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line-warm); border-radius: 9999px; background: var(--paper-white); color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5;}
.pill:hover{border-color: var(--ink-soft); background: var(--fog-gray);}
.action-right{text-align: right; margin-top: 16px;}
.article-header, .article-lead, .article-intro-box, .quick-ranking-section, .card-detail-section, .review-summary-section, .review-area, .mid-diagnosis-section, .faq-section, .related-article-section{max-width: var(--reading); margin-left: auto; margin-right: auto; width: calc(100% - 48px);}
.article-title-area{display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.title-icon{width: 40px; height: auto; flex-shrink: 0;}
.title-date-badge{font-size: 14px; color: var(--ink-soft); font-weight: 700; white-space: nowrap;}
.intro-text h2{font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); text-align: center;}
.quick-ranking-section{margin-bottom: 56px;}
.quick-ranking-list{display: flex; flex-direction: column; gap: 24px;}
.quick-ranking-item{border: 1px solid var(--line-warm); border-radius: 12px; padding: 32px; background: var(--paper-white);}
.quick-rank-header{display: flex; align-items: center; gap: 12px; margin-bottom: 16px; border-bottom: 1px dashed var(--line-warm); padding-bottom: 12px;}
.quick-rank-badge{display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--fog-gray); font-family: var(--font-number); font-weight: 700; font-size: 16px; border-radius: 6px;}
.quick-rank-badge.rank-1{background: var(--core-red); color: var(--paper-white);}
.quick-rank-name{font-family: var(--font-heading); font-size: 18px; font-weight: 700; margin: 0;}
.quick-rank-body{display: flex; gap: 48px; align-items: center; padding: 0 24px;}
.quick-rank-img{width: 200px; height: auto; object-fit: contain; flex-shrink: 0;}
.quick-rank-info{flex: 1;}
.quick-rank-stars{font-weight: 700; font-size: 15px; margin: 0 0 8px;}
.star-color{color: #F5A623;}
.quick-rank-desc{font-weight: 700; margin: 0 0 24px;}
.article-diagnosis-section{background: var(--fog-gray); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 48px 0; margin-bottom: 56px;}
.article-diagnosis-section .diagnosis-banner-list{margin: 0 auto; width: calc(100% - 48px); max-width: 800px;}
.card-detail-section{margin-bottom: 64px;}
.card-detail-box{border: 1px solid var(--line-warm); border-radius: 12px; padding: 32px; background: var(--paper-white); margin-bottom: 40px;}
.detail-header{display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 2px solid var(--ink); margin-bottom: 24px;}
.detail-rank{display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--fog-gray); font-family: var(--font-number); font-weight: 700; font-size: 18px; border-radius: 8px;}
.detail-rank.rank-1{background: var(--core-red); color: var(--paper-white);}
.detail-name{font-family: var(--font-heading); font-size: 20px; font-weight: 700; margin: 0;}
.detail-score-area{font-weight: 700; font-size: 14px; margin-left: auto;}
.score-num{font-family: var(--font-number); font-size: 18px;}
.detail-body{display: flex; gap: 32px; align-items: flex-start; margin-bottom: 32px;}
.detail-image{flex: 0 0 240px; text-align: center;}
.detail-image img{width: 100%; height: auto; object-fit: contain;}
.detail-specs{flex: 1;}
.eval-conclusion{font-weight: 700; margin: 0 0 16px;}
.eval-switch{display: none;}
.eval-content-box{position: relative; max-height: 80px; overflow: hidden; transition: max-height 0.4s ease;}
.eval-content-box::after{content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 48px; background: linear-gradient(to bottom, rgba(246, 246, 243, 0) 0%, rgba(246, 246, 243, 1) 100%); pointer-events: none; transition: opacity 0.2s ease;}
.eval-switch-label{display: block; text-align: right; margin-top: 8px; font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: color 0.2s ease;}
.eval-switch-label:hover{color: var(--core-red);}
.label-text-close{display: none;}
.eval-switch:checked ~ .eval-content-box{max-height: 1000px;}
.eval-switch:checked ~ .eval-content-box::after{opacity: 0;}
.eval-switch:checked ~ .eval-switch-label .label-text-open{display: none;}
.eval-switch:checked ~ .eval-switch-label .label-text-close{display: inline;}
.review-area{margin-bottom: 32px;}
.review-title{font-size: 18px; font-weight: 700; margin: 0 0 16px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px;}
.review-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.review-box{padding: 16px; border-radius: 12px; border: 1px solid var(--line-soft);}
.good-review{background: #fcfefd; border-color: #bce4d0;}
.bad-review{background: #fffafb; border-color: #f3c7cb;}
.review-label{display: inline-block; padding: 4px 8px; font-size: 11px; font-weight: 700; border-radius: 4px; margin-bottom: 8px;}
.good-review .review-label{background: var(--mint-soft); color: var(--mint-strong);}
.bad-review .review-label{background: #fee8eb; color: var(--core-red);}
.detail-action{display: flex; justify-content: center; margin-top: 32px;}
.detail-action .button-primary{max-width: 400px; height: 52px; font-size: 16px;}
.related-text h3{margin: 0; font-size: 15px; line-height: 1.5;}
.article-main .text-center{text-align: center !important;}
.article-main .list-unstyled{padding: 0; margin: 0; list-style: none;}
.article-main .color-star{color: #F5A623;}
.article-main .mt-8{margin-top: 8px !important;}
.article-main .mb-0{margin-bottom: 0 !important;}
.article-main .mb-4{margin-bottom: 4px !important;}
.article-main .mb-8{margin-bottom: 8px !important;}
.article-main .mb-16{margin-bottom: 16px !important;}
.card-face-img{width: 200px; height: auto; display: block; margin: 0 auto;}
.review-summary-title{font-size: 18px; margin-bottom: 16px; font-weight: 700;}
.review-item-title{font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.5;}
.review-more-wrapper{text-align: center; margin-top: 16px; position: relative; z-index: 2;}
.review-tabs{display: flex; gap: 8px; justify-content: center; margin-bottom: 24px;}
.review-tab{appearance: none; min-height: 44px; padding: 6px 16px; background: var(--paper-white); border: 1px solid var(--line-warm); border-radius: 9999px; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; transition: all 0.2s; outline: none;}
.review-tab:hover{background: var(--fog-gray);}
.review-tab.active{background: var(--ink); color: var(--paper-white); border-color: var(--ink);}
.review-item{animation: fadeIn 0.4s ease-in-out;}
.sort-radio, .eval-switch, .btn-review-more .text-close{display: none;}
.review-accordion-wrapper{position: relative;}
.review-fade-cover{position: absolute; bottom: 50px; left: 0; width: 100%; height: 120px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); pointer-events: none; transition: opacity 0.3s ease; z-index: 1;}
.review-accordion-wrapper.is-expanded .review-fade-cover{opacity: 0;}
.review-accordion-wrapper.no-fade .review-fade-cover{display: none;}
@keyframes fadeIn{from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); }}
.target-shop-wrapper{background: var(--fog-gray); padding: 24px; border-radius: 12px; margin-bottom: 24px;}
.target-shop-list{display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 8px; margin: 0; padding: 0; list-style: none;}
.target-shop-list li{font-size: 14px; position: relative; padding-left: 10px;}
.target-shop-list li::before{content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-soft);}
.review-summary-section{margin-top: 40px; margin-bottom: 40px;}
.review-summary-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.summary-box{padding: 20px; border-radius: 12px; border: 1px solid var(--line-soft);}
.summary-good{background: #fcfefd; border-color: #bce4d0;}
.summary-bad{background: #fffafb; border-color: #f3c7cb;}
.summary-good .summary-title{color: var(--mint-strong); font-weight: 700; margin-bottom: 12px; font-size: 15px;}
.summary-bad .summary-title{color: var(--core-red); font-weight: 700; margin-bottom: 12px; font-size: 15px;}
.summary-list{padding: 0; margin: 0; list-style: none;}
.summary-list li{font-size: 14px; line-height: 1.8; position: relative; padding-left: 14px; margin-bottom: 8px; color: var(--ink-soft);}
.summary-list li:last-child{margin-bottom: 0;}
.summary-list li::before{content: "・"; position: absolute; left: 0; top: 0; font-weight: 700;}
.summary-good .summary-list li::before{color: var(--mint-strong);}
.summary-bad .summary-list li::before{color: var(--core-red);}
.search-filter-section, .sort-area, .article-grid{max-width: var(--container); margin-left: auto; margin-right: auto; width: calc(100% - 48px);}
.search-filter-section{background: var(--paper-white); border: 1px solid var(--line-soft); border-radius: 12px; padding: 32px; margin-bottom: 40px;}
.filter-group{margin-bottom: 24px;}
.filter-group:last-child{margin-bottom: 0;}
.filter-title{font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--ink);}
.filter-pill-list{display: flex; flex-wrap: wrap; gap: 8px;}
.filter-pill-input{display: none;}
.filter-pill-label{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 16px; background: var(--fog-gray); color: var(--ink-soft); font-size: 14px; font-weight: 700; border-radius: 9999px; cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease;}
.filter-pill-label:hover{background: #ecece8;}
.filter-pill-input:checked + .filter-pill-label{background: var(--ink); color: var(--paper-white);}
.more-tags-toggle{display: none;}
.more-tags-label{display: inline-flex; align-items: center; font-size: 14px; font-weight: 700; color: var(--core-red); cursor: pointer; margin-top: 12px;}
.more-tags-label::before{content: "(+) ハッシュタグ一覧";}
.more-tags-content{display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-soft);}
.more-tags-toggle:checked ~ .more-tags-label::before{content: "(-) 閉じる";}
.more-tags-toggle:checked ~ .more-tags-content{display: block;}
.sort-area{display: flex; align-items: center; gap: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--line-soft); padding-bottom: 12px;}
.sort-btn{font-size: 14px; font-weight: 700; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: color 0.2s, background 0.2s;}
.sort-btn:hover{background: var(--fog-gray);}
.sort-btn.is-active{color: var(--ink); border-bottom: 2px solid var(--ink); border-radius: 0;}
.article-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 24px; margin-bottom: 48px;}
.article-card{display: flex; flex-direction: column; gap: 16px; transition: transform 0.2s ease; text-decoration: none;}
.article-card:hover{transform: translateY(-2px);}
.article-card:hover .card-title{color: var(--core-red);}
.card-thumb{position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--fog-gray); border: 1px solid var(--line-soft);}
.card-thumb img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.article-card:hover .card-thumb img{transform: scale(1.03);}
.card-badge{position: absolute; top: 8px; left: 8px; padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 9999px; z-index: 2; border: 1px solid var(--line-soft);}
.badge-tameru{background: var(--mint-soft); color: var(--mint-strong); border-color: transparent;}
.badge-tanoshimu{background: var(--butter-soft); color: var(--butter-deep); border-color: transparent;}
.badge-mamoru{background: var(--plum-soft); color: var(--ink); border-color: transparent;}
.card-info{display: flex; flex-direction: column;}
.card-title{font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--ink); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.card-lead{font-size: 14px; color: var(--ink-soft); line-height: 1.8; margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.card-tags{display: flex; flex-wrap: wrap; gap: 8px;}
.card-tags .tag{font-size: 12px; color: var(--ink-soft); background: transparent; padding: 0; border-radius: 0;}
.infinite-loader{display: none; justify-content: center; padding: 24px 0;}
.infinite-loader.is-active{display: flex;}
.spinner{width: 32px; height: 32px; border: 4px solid var(--line-soft); border-top-color: var(--core-red); border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin{to { transform: rotate(360deg); }}
@media (max-width: 640px){
  .banner-pc-only{display: none;}
  .banner-sp-only{display: block;}
  .article-title{font-size: 20px; margin-bottom: 16px; line-height: 1.5;}
  .section-title{font-size: 18px; margin: 0 0 20px; line-height: 1.5;}
  .article-meta{flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 8px 12px; font-size: 11px;}
  .pr-mark{font-size: 10px; padding: 2px 4px;}
  .pr-desc{width: 280px;}
  .article-tags{gap: 6px; margin-bottom: 24px;}
  .article-tags a{font-size: 11px; padding: 0;}
  .article-intro-wrapper{padding: 32px 0;}
  .article-intro-box{grid-template-columns: 1fr; gap: 24px;}
  .intro-text{padding: 16px;}
  .intro-summary-title{font-size: 16px;}
  .character-intro-wrapper{padding: 16px;}
  .character-item{flex-direction: column; text-align: center; gap: 8px; padding: 16px;}
  .interview-item{gap: 12px; margin-bottom: 20px;}
  .interview-speaker{width: 48px;}
  .interview-speaker img{width: 40px; height: 40px;}
  .interview-speaker .name{font-size: 12px;}
  .interview-bubble{padding: 12px 16px; font-size: 16px;}
  .experience-spec-box{padding: 16px;}
  .spec-table{font-size: 13px;}
  .spec-table th, .spec-table td{display: block; width: 100%; border-bottom: none;}
  .spec-table th{font-size: 12px; padding: 8px 12px 2px; color: var(--ink-soft);}
  .spec-table td{padding: 2px 12px 12px; border-bottom: 1px solid var(--line-soft);}
  .eval-point-area{padding: 16px; margin-bottom: 24px;}
  .eval-point-title{font-size: 15px;}
  .faq-section{margin-bottom: 48px;}
  .faq-item{padding: 16px 0;}
  .faq-q{font-size: 16px;}
  .faq-icon{width: 24px; height: 24px; font-size: 12px;}
  .related-article-section{padding: 24px 16px; margin-bottom: 48px;}
  .related-item{flex-direction: column; gap: 12px; padding: 12px;}
  .related-thumb{flex: auto; width: 100%;}
  .related-item-title{font-size: 14px;}
  .diagnosis-catcher{font-size: 12px; padding: 0; line-height: 1.4; letter-spacing: 0; white-space: nowrap;}
  .button-primary{max-width: 100%; font-size: 15px; height: 48px;}
  .sticky-cv-bottom{padding: 12px 16px 16px;}
  .sticky-cv-murmur{font-size: 11px; margin-bottom: 6px;}
  .sticky-btn-primary{height: 48px;}
  .btn-main-text{font-size: 14px;}
  .btn-sub-text{font-size: 10px;}
  #author_profile{padding: 16px; grid-template-columns: 56px 1fr; gap: 0 12px;}
  #author_profile .left img{width: 56px; height: 56px;}
  #author_profile .right{display: contents;}
  #author_profile .author_name{grid-column: 2; align-self: center; margin-bottom: 0;}
  #author_profile .author_description{grid-column: 1 / -1; margin-top: 16px;}
  span.more-text{display: none;}
  .read-more-label{display: inline; color: var(--core-red); font-weight: 700; cursor: pointer; font-size: 12px;}
  .read-more-label:hover{text-decoration: underline;}
  .read-more-toggle:checked ~ .read-more-label{display: none;}
  .read-more-toggle:checked ~ span.more-text{display: inline;}
  .intro-text h2{font-size: 16px;}
  .quick-ranking-item{padding: 16px;}
  .quick-rank-header{margin-bottom: 12px; padding-bottom: 8px;}
  .quick-rank-badge{width: 32px; height: 32px; font-size: 14px;}
  .quick-rank-name{font-size: 16px;}
  .quick-rank-body{flex-direction: column; gap: 16px; align-items: flex-start;}
  .quick-rank-img{width: 100%; max-width: 150px; align-self: center;}
  .quick-rank-info{width: 100%;}
  .diagnosis-banner-list{gap: 16px;}
  .card-detail-box{padding: 16px;}
  .detail-header{gap: 12px; margin-bottom: 16px; padding-bottom: 12px;}
  .detail-rank{width: 36px; height: 36px; font-size: 15px;}
  .detail-name{font-size: 16px;}
  .detail-score-area{margin-left: 0; width: 100%; margin-top: 8px;}
  .detail-body{flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px;}
  .detail-image{flex: auto; max-width: 150px; margin: 0 auto;}
  .detail-specs{width: 100%;}
  .review-title{font-size: 16px;}
  .review-grid{grid-template-columns: 1fr; gap: 12px;}
  .review-box{padding: 12px;}
  .button-ghost{font-size: 15px; padding: 10px 16px;}
  .detail-action{margin-top: 24px;}
  .related-text h3{font-size: 15px;}
  .intro-image .card-face-img{width: 200px !important; max-width: 80%; border-radius: 0 !important; border: none !important;}
  .review-summary-grid{grid-template-columns: 1fr; gap: 12px;}
  .summary-box{padding: 16px;}
  .search-filter-section, .sort-area, .article-grid{width: 100%;}
  .search-filter-section{padding: 16px; border-radius: 0; border-left: none; border-right: none; margin-bottom: 24px;}
  .filter-pill-label{min-height: 44px; padding: 8px 16px; font-size: 13px;}
  .article-grid{display: flex; flex-direction: column; gap: 16px; padding-inline: 16px;}
  .article-card{flex-direction: row; align-items: flex-start; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft);}
  .article-card:last-child{border-bottom: none; padding-bottom: 0;}
  .card-thumb{width: 140px; flex-shrink: 0; border-radius: 8px;}
  .card-badge{top: 4px; left: 4px; font-size: 11px; padding: 2px 6px;}
  .card-info{flex: 1; min-width: 0;}
  .card-title{font-size: 15px; line-height: 1.5; margin: 0 0 6px; -webkit-line-clamp: 3;}
  .card-lead{display: none;}
  .card-tags{gap: 4px;}
  .card-tags .tag{font-size: 11px; padding: 0;}
}

/* ---- ページ種別ごとの差分（stgの個別CSSで値が異なっていたもの） ---- */
.article-main .spec-table{margin-bottom:0}
.experience-spec-box .spec-table{margin-bottom:24px}
.article-intro-wrapper{width:100%}
.article-tags a{display:inline-flex}
.review-area{margin-bottom:56px;padding-bottom:56px;border-bottom:1px solid var(--line-soft)}
.card-detail-box .review-area{margin-bottom:32px;padding-bottom:0;border-bottom:0}
.card-detail-box .text-sm,.quick-ranking-section .text-sm{line-height:1.6}
@media (max-width:640px){
  .detail-specs .spec-table th,.detail-specs .spec-table td{padding:8px}
  .detail-specs .spec-table th{white-space:nowrap;color:inherit}
}
.card-badge{background:var(--paper-white)}
.article-main .supervisor{max-width:var(--reading);width:calc(100% - 48px);margin:0 auto 40px}
.article-main .pr-notice{max-width:var(--reading);width:calc(100% - 48px);margin:0 auto 24px}
.list-header{margin-bottom:24px}
.list-header .section-title{margin-bottom:8px}
.list-header__desc{color:var(--ink-soft);font-size:14px;margin:0}
.article-grid-empty{padding:48px 0;text-align:center;color:var(--ink-soft)}
.mkm-paging{display:flex;justify-content:center;margin:24px 0}
.js .mkm-paging{display:none}
.mkm-list .list-header,.mkm-list .article-grid-empty,.mkm-list .mkm-paging,.mkm-list .infinite-loader,.mkm-search-head{max-width:var(--container);margin-left:auto;margin-right:auto;width:calc(100% - 48px)}
.mkm-search-head .search-form{margin-top:8px}
@media (max-width:640px){.mkm-list .list-header,.mkm-search-head{width:calc(100% - 32px)}}
.md_movePageTop{transition:bottom .3s ease}
.is-cv-visible .md_movePageTop{bottom:150px}
@media (max-width:640px){.is-cv-visible .md_movePageTop{bottom:130px}}