@charset "UTF-8";
*, *::before, *::after{box-sizing: border-box}
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul{margin: 0}
ul, ol{list-style: none; margin: 0; padding: 0}
html{font-size: 62.5%; color: #000; scroll-behavior: smooth; overflow-x: hidden; interpolate-size: allow-keywords;}
body{min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; background: #f8f8f8; color: #000; font-family: "Noto Sans JP", sans-serif; /*font-feature-settings: "palt";*/ font-weight: 400;}
a:not([class]){-webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto}
img, picture{max-width: 100%; display: block}
input, button, textarea, select{font: inherit}
button {border: none;background-color: transparent;}
main section{position: relative; /*user-select: none;*/}
main small{font-size:75%;}
main sup{font-size:50%;}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior: auto}
}
:root {
--cqw: 1px;
--cm0:#fff;
--cm1:#333;
--cm6:#666;
--cm2:#999;
--cm3:#c1c1c1;
--cm4:#ededed;
--cm5:#000f30;
--cm7:#f8f8f8;
--cc0:#00354d;
--cc1:#005d6c;
--cc1o:rgba(0,93,108,.3);
--cc2:#83cdd2;
--cc2o:rgba(131,205,209,.3);
--cc3:#D6873e;
--cc4:#edbc3f;
--cc5:#fff9f4;
--cc6:#20afb4;
--cc7:#7ad3d6;
--cc8:#f2f7f8;
--col:#f2e147;
}

header,footer,main,#kv,#mes,#features,#votes{width: calc(var(--cqw) * 750); margin: 0 auto; max-width: 750px; font-weight: 400;}
header{background: linear-gradient(to right, var(--cm5), var(--cc1)); width: 100%; height: calc(var(--cqw) * 100); display: flex; align-items: center; flex-wrap: wrap; padding: 0 calc(var(--cqw) * 18);}
header img{width: calc(var(--cqw) * 164); height: calc(var(--cqw) * 54);}
footer{background: var(--cm5); height: calc(var(--cqw) * 320); display: flex; justify-content: center; align-items: center; flex-direction: column; gap: calc(var(--cqw) * 40);}
footer img{width: calc(var(--cqw) * 266.44); height: calc(var(--cqw) * 100);}
footer ul{display: flex; list-style: none; padding: 0; margin: 0; gap: 1em; font-size: calc(var(--cqw) * 20);}
footer ul li a{color: var(--cm0);}
footer credit{color: var(--cm0); font-size: calc(var(--cqw) * 20);}
main,#kv,#mes,#features,#votes{color:var(--cm5); background: var(--cm0);}

#top #mes{background:url(../images/mes_bg.webp) var(--cm0) 55% 0/80.333% auto no-repeat; padding: calc(var(--cqw) * 100) 0 calc(var(--cqw) * 50) 0; text-align: center;}
#top #mes h1{font-size: calc(var(--cqw) * 48); font-weight: 700; margin-bottom: calc(var(--cqw) * 50); line-height: 1.5;}
#top #mes p{font-size: calc(var(--cqw) * 24);line-height: 2; margin-bottom: calc(var(--cqw) * 50);}
#top #features{background: linear-gradient(to bottom right, var(--cc2), var(--cc1) 50%); padding: calc(var(--cqw) * 100) 0; text-align: center; color:var(--cm0);}
#top #features h2{font-size: calc(var(--cqw) * 48); font-weight: 700; margin-bottom: calc(var(--cqw) * 50); line-height: 1.5;}
#top #features ul{display: flex; list-style: none; padding: 0; margin: 0; gap: calc(var(--cqw) * 32); justify-content: center;}
#top #features ul li{width:calc(var(--cqw) * 200); font-size: calc(var(--cqw) * 24);line-height: 1.5; text-align: left;}
#top #features ul li h3{font-size: calc(var(--cqw) * 36); font-weight: 700; margin-bottom: calc(var(--cqw) * 50); line-height: 1.5; padding: calc(var(--cqw) * 24) 0; margin: 0; text-align: center;}
#top #features ul li img{width: 80%; margin: 0 auto;}
#top main #topics{padding: calc(var(--cqw) * 100) 0 calc(var(--cqw) * 50) 0;}
#top main #topics h2{font-size: calc(var(--cqw) * 44); font-weight: 700; margin-bottom: calc(var(--cqw) * 50); line-height: 1.5; padding: 0 5%;}
#top main #topics h2 span{font-size: calc(var(--cqw) * 28); margin-bottom: calc(var(--cqw) * 20); display: block; color: var(--cc1); padding-left: 1em; background: url(../images/icon_dot.webp) 0 50%/ calc(var(--cqw) * 16) auto no-repeat;}
#top main #topics article + article{padding-top: 25px;}

/* ===== 静的ページ共通（about_votes / terms / contact_us / about_us） =====
   文字サイズは articles/detail ページ（#detail）本文と完全統一:
     h2 (ページタイトル) = 22px (PC/SP共通)
     h3 (セクション見出し) = 20px (PC) / 18px (SP)
     h4 (サブ見出し)       = 18px (PC) / 16px (SP)
     p  (本文)            = 18px (PC) / 16px (SP)
   PCの基本サイズをベースCSSで定義し、SPはメディアクエリで上書きする。 */
#top main #topics.static-page .static-body{padding: 0 5%; font-size: 18px; line-height: 30px; color: var(--cm5);}
#top main #topics.static-page .static-body h3{font-size: 20px; font-weight: 700; line-height: 28px; margin: 32px 0 12px 0; padding: 0 0 10px 0; border-bottom: 2px solid var(--cc1); color: var(--cm5);}
#top main #topics.static-page .static-body h3:first-child{margin-top: 0;}
#top main #topics.static-page .static-body h4{font-size: 18px; font-weight: 700; line-height: 26px; margin: 24px 0 8px 0; color: var(--cc1);}
#top main #topics.static-page .static-body p{margin-bottom: 16px; line-height: 30px;}
#top main #topics.static-page .static-body ul,
#top main #topics.static-page .static-body ol{margin: 0 0 20px 0; padding-left: 1.5em; line-height: 30px;}
#top main #topics.static-page .static-body ul li,
#top main #topics.static-page .static-body ol li{margin-bottom: 8px;}
#top main #topics.static-page .static-body a{color: var(--cc1); text-decoration: underline;}
#top main #topics.static-page .static-body a:hover{text-decoration: none;}
#top main #topics.static-page .static-body .info-list{display: grid; grid-template-columns: 180px 1fr; gap: 0; margin-bottom: 24px; border-top: 1px solid var(--cm4);}
#top main #topics.static-page .static-body h3 + .info-list{border-top: none;}
#top main #topics.static-page .static-body .info-list dt{font-weight: 700; padding: 14px 0; color: var(--cm6); border-bottom: 1px solid var(--cm4); font-size: 16px;}
#top main #topics.static-page .static-body .info-list dd{margin: 0; padding: 14px 0; border-bottom: 1px solid var(--cm4); font-size: 18px;}

/* 番号付きリスト（機能紹介・独自性・課題などで使用）— エディトリアル型・背景なし */
#top main #topics.static-page .static-body .card-list{list-style: none; padding: 0; margin: 0 0 24px 0; counter-reset: card-counter;}
#top main #topics.static-page .static-body .card-list li{counter-increment: card-counter; position: relative; padding: 18px 0 18px 56px; margin: 0; line-height: 28px; font-size: 18px; border-bottom: 1px solid var(--cm3); background: none; border-left: none; border-radius: 0;}
#top main #topics.static-page .static-body .card-list li:first-child{border-top: 1px solid var(--cm3);}
#top main #topics.static-page .static-body h3 + .card-list li:first-child{border-top: none;}
#top main #topics.static-page .static-body .card-list li::before{content: counter(card-counter, decimal-leading-zero); position: absolute; left: 0; top: 16px; font-size: 30px; font-weight: 400; color: var(--cc1); font-family: Georgia, 'Times New Roman', serif; line-height: 1; letter-spacing: -0.02em;}
#top main #topics.static-page .static-body .card-list li strong{display: block; color: var(--cm5); font-weight: 700; margin-bottom: 4px; font-size: 18px;}
#top main #topics .category-header{display: flex; align-items: center; justify-content: space-between; gap: calc(var(--cqw) * 20); padding: 0; margin-bottom: 0; flex-wrap: wrap;}
#top main #topics .category-header h2{margin-bottom: 0; padding: 0;}
#top main #topics .category-header .btn-back-all{flex-shrink: 0; font-size: calc(var(--cqw) * 11); line-height: 1; padding: calc(var(--cqw) * 10) calc(var(--cqw) * 36); background: var(--cm0); color: var(--cm5); border: 1px solid var(--cm4); border-radius: calc(var(--cqw) * 3); text-decoration: none; white-space: nowrap; transition: background .2s, color .2s;}
#top main #topics .category-header .btn-back-all:hover{background: var(--cc1); color: var(--cm0); border-color: var(--cc1);}
#top main #topics article h3{font-size: calc(var(--cqw) * 36); font-weight: 500; line-height: 1.5; margin-bottom:  calc(var(--cqw) * 20); padding: 0 5%;}
#top main #topics > p,
#top main #topics > p a{font-size: calc(var(--cqw) * 28); line-height: 1.5; padding: 0 5%;}
#top main #topics article p{font-size: calc(var(--cqw) * 28); line-height: 1.5; margin-bottom: calc(var(--cqw) * 20); padding: 0 5%;}
#top main #topics button{margin: calc(var(--cqw) * 25) auto 0 auto; width:63%; background: linear-gradient(to right, var(--cm5), var(--cc1)); aspect-ratio: 235/42; display: block; border-radius: calc(var(--cqw) * 6); cursor: pointer;}
#top main #topics button span{font-size: calc(var(--cqw) * 22); line-height: calc(var(--cqw) * 31); color:var(--cm0); background: url(../images/icon_arrow_w.webp) 100% 75%/ auto calc(var(--cqw) * 22) no-repeat; padding-right: 1.5em; display: inline-block;}

.swiper{width: 100%; height: auto; max-width: 750px; margin: 0 auto; padding: 0 5% calc(var(--cqw) * 60) 5%;}
.swiper:before{content:''; width:calc(var(--cqw) * 24); height: 100%; background: var(--cm0); display: block; position: absolute; left:0; top:0; z-index: +2;}
.swiper-slide{padding: 0 calc(var(--cqw) * 30) 0 0;}
.swiper-slide figure,.swiper-slide figcaption,.swiper-slide .votes{margin-bottom:  calc(var(--cqw) * 20); display: block;}
.swiper-slide figcaption{font-size: calc(var(--cqw) * 28); line-height: 1.5; color: var(--cm1); display: block;}
.swiper-slide .votes{border-bottom: var(--cm3) 1px solid; padding-bottom:calc(var(--cqw) * 20);}
.swiper-slide .votes span{background: url(../images/icon_star.webp) 0 60% /calc(var(--cqw) * 20) auto no-repeat; font-size: calc(var(--cqw) * 32); padding-left:.75em; line-height: 1; display: inline-block;}
.swiper-slide .votes span:after{content: 'Votes'; font-size: calc(var(--cqw) * 20); padding-left: .25em;}
.swiper-pagination{bottom: calc(var(--cqw) * 24)!important; text-align: left; padding: 0 5%;}
.swiper-pagination-bullet{margin: 0 calc(var(--cqw) * 16) 0 0!important; background: var(--cc1); width: calc(var(--cqw) * 10); height: calc(var(--cqw) * 10);}
.swiper-navigation-icon{display: none !important;}
.swiper-button-prev,
.swiper-button-next{width: calc(var(--cqw) * 60); height: calc(var(--cqw) * 60); display: block;}
.swiper-button-prev{background: url(../images/icon_prev.webp) 0 0/cover no-repeat; left: auto!important; right:calc(var(--cqw) * 120 + 5%)!important; top: auto!important; bottom:0;}
.swiper-button-next{background: url(../images/icon_next.webp) 0 0/cover no-repeat; left: auto!important; right:calc(var(--cqw) * 40 + 5%)!important; top: auto!important; bottom:0;}

/* === 記事一覧カード === */
.article-list{list-style:none; margin:0; padding:0 5%;}
.article-card{margin-bottom:calc(var(--cqw) * 40); border-bottom:1px solid var(--cm3); padding-bottom:calc(var(--cqw) * 40);}
.article-card a{display:flex; gap:calc(var(--cqw) * 24); text-decoration:none; color:inherit;}
.article-card figure{flex:0 0 35%; margin:0; padding:0;}
.article-card figure img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:calc(var(--cqw) * 8);}
.article-card-body{flex:1; min-width:0;}
.article-card-meta{display:flex; gap:calc(var(--cqw) * 16); margin-bottom:calc(var(--cqw) * 12); font-size:calc(var(--cqw) * 24);}
.article-card-category{color:var(--cc1); font-weight:700;}
.article-card-date{color:var(--cm6);}
.article-card-body h3{font-size:calc(var(--cqw) * 32); line-height:1.4; margin-bottom:calc(var(--cqw) * 12);}
.article-card-body p{font-size:calc(var(--cqw) * 26); line-height:1.5; color:var(--cm6); margin-bottom:calc(var(--cqw) * 12);}
.article-card-body .votes span{background:url(../images/icon_star.webp) 0 60%/calc(var(--cqw) * 20) auto no-repeat; font-size:calc(var(--cqw) * 28); padding-left:1em; line-height:1; display:inline-block;}
.article-card-body .votes span:after{content:'Votes'; font-size:calc(var(--cqw) * 20); padding-left:.5em;}
/* ページネーション（公開画面用） */
.pagination{display:flex; justify-content:center; gap:calc(var(--cqw) * 8); padding:calc(var(--cqw) * 40) 0; flex-wrap:wrap;}
.pagination a,.pagination span{display:inline-flex; align-items:center; justify-content:center; min-width:calc(var(--cqw) * 60); height:calc(var(--cqw) * 60); border-radius:calc(var(--cqw) * 8); font-size:calc(var(--cqw) * 28); text-decoration:none; color:var(--cm5); border:1px solid var(--cm3);}
.pagination .current{background:var(--cc1); color:var(--cm0); border-color:var(--cc1);}
.pagination .disabled{color:var(--cm3); cursor:default;}

#detail main #news{padding-bottom: calc(var(--cqw) * 1);}
#detail main article{margin-bottom: calc(var(--cqw) * 100);}
#detail main h1{background: linear-gradient(to right, var(--cc2o), var(--cc1o)),url('../images/h_news_bg.webp') 95% 0/30.7% auto no-repeat; /*aspect-ratio: 375/169;*/ line-height: 1.5; padding: calc(var(--cqw) * 60) 5% calc(var(--cqw) * 40) 5%; margin-bottom: calc(var(--cqw) * 40);}
#detail main h1 span{display: block;}
#detail main h1 .title{font-size: calc(var(--cqw) * 44); margin-bottom:calc(var(--cqw) * 24);}
#detail main h1 .sub{font-size: calc(var(--cqw) * 32); margin-bottom:calc(var(--cqw) * 24);}
#detail main h1 .sub span{font-size: calc(var(--cqw) * 24); color: var(--cm6); font-weight: 400;}
#detail main h1 .note{font-size: calc(var(--cqw) * 24); color: var(--cm6); font-weight: 400;}
#detail main h2{padding: 0 5%; font-size: calc(var(--cqw) * 36); margin-bottom: calc(var(--cqw) * 30);}
#detail main figure{padding: 0 5%; margin-bottom: calc(var(--cqw) * 60);}
#detail main figure img{width: 100%;}
#detail main ul{list-style: disc; font-size: calc(var(--cqw) * 28); line-height: 1.5; width: 90%; margin: 0 auto; padding: 0 0 0 1em;}
#detail main ul li{margin-bottom: calc(var(--cqw) * 30);}
#detail main .agreement,
#detail main .opposition{margin: 0 auto calc(var(--cqw) * 40) auto; width: 90%; padding: calc(var(--cqw) * 30) 5% 1px 5%;}
#detail main .agreement{background: var(--cc5); }
#detail main .opposition{background: var(--cm4); margin-bottom: 0;}
#detail main h3{font-size: calc(var(--cqw) * 32); margin-bottom: calc(var(--cqw) * 20); padding: 0 5%;}
#detail main .agreement h3{color:var(--cc3); padding: 0;}
#detail main .opposition h3{color:var(--cm6); padding: 0;}
#detail main ol{font-size: calc(var(--cqw) * 28); line-height: 1.5; margin: 0; padding: 0;}
#detail main ol li{margin-bottom: calc(var(--cqw) * 30); list-style: none;}
#detail main #comment ul{margin: 0 auto; padding: 0; border-top: var(--cm3) 1px solid; width: 90%;}
#detail main #comment ul li{position: relative; border-bottom: var(--cm3) 1px solid; padding:calc(var(--cqw) * 24) 0; font-size: calc(var(--cqw) * 28); line-height: 1.5; list-style: none; display: flex; gap:calc(var(--cqw) * 30); margin: 0;}
#detail main #comment ul li figure{flex-shrink: 0; width:calc(var(--cqw) * 200); text-align: center; margin: 0; padding: 0;}
#detail main #comment ul li figure > a{display: block; position: static; padding: 0; background: none; text-align: center;}
#detail main #comment ul li figure img{display: block; width: 90%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover; margin: 0 auto calc(var(--cqw) * 10) auto;}
#detail main #comment ul li figcaption{font-size: calc(var(--cqw) * 16); line-height: 1.2; width: 90%; margin: 0 auto;}
#detail main #comment ul li figcaption a{display: inline-block; position: static; color: inherit; text-decoration: none; background: url(../images/icon_arrow.webp) 100% 50%/ auto calc(var(--cqw) * 24) no-repeat; padding-right: 1.3em;}
#detail main #comment ul li .date{padding-bottom:calc(var(--cqw) * 20); font-size: calc(var(--cqw) * 24); color: var(--cm6); display: block;}
#detail main #comment ul li .votes{padding-top:calc(var(--cqw) * 20); display: block;}
#detail main #comment ul li .votes span{background: url(../images/icon_star.webp) 0 60% /calc(var(--cqw) * 20) auto no-repeat; font-size: calc(var(--cqw) * 32); padding-left:.75em; line-height: 1; display: inline-block;}
#detail main #comment ul li .votes span:after{content: 'Votes'; font-size: calc(var(--cqw) * 20); padding-left: .25em;}
#detail main #comment ul li a{font-size: calc(var(--cqw) * 24); line-height: calc(var(--cqw) * 32); color:var(--cm5); text-decoration: none; background: url(../images/icon_arrow.webp) 100% 50%/ auto calc(var(--cqw) * 32) no-repeat; padding-right: 1.5em; display: inline-block; position: absolute; right:0; bottom: calc(var(--cqw) * 32);}

/* ===== 追記履歴の折りたたみ（一般ユーザー側表示） ===== */
/* 議員コメント本文「詳しく見る」リンク（コメント本文と罫線の間に右寄せ配置） */
#detail main #comment ul li .comment-more{margin: calc(var(--cqw) * 8) 0 0 0; text-align: right; position: relative;}
#detail main #comment ul li .comment-more a{position: relative; right: auto; bottom: auto; display: inline-block;}
/* コメント本文「詳しく見る」展開のふわっと開閉（interpolate-size 対応ブラウザのみ。非対応ブラウザは即時切替） */
#detail main #comment ul li .comment-body .comment-short,
#detail main #comment ul li .comment-body .comment-full{display: block; overflow: hidden; transition: height .25s ease, opacity .2s ease;}
#detail main #comment ul li .comment-body[data-state="collapsed"] .comment-short{height: auto; opacity: 1;}
#detail main #comment ul li .comment-body[data-state="collapsed"] .comment-full{height: 0; opacity: 0;}
#detail main #comment ul li .comment-body[data-state="expanded"] .comment-short{height: 0; opacity: 0;}
#detail main #comment ul li .comment-body[data-state="expanded"] .comment-full{height: auto; opacity: 1;}
#detail main #comment ul li .amendments{margin: calc(var(--cqw) * 16) 0 0 0; border-top: 1px dashed var(--cm3); padding-top: calc(var(--cqw) * 12);}
#detail main #comment ul li .amendments summary{list-style: none; cursor: pointer; font-size: calc(var(--cqw) * 22); color: var(--cc1); font-weight: 700; display: inline-block; padding: calc(var(--cqw) * 6) calc(var(--cqw) * 16); border: 1px solid var(--cc1); border-radius: calc(var(--cqw) * 20); background: var(--cm0); user-select: none;}
#detail main #comment ul li .amendments summary::-webkit-details-marker{display: none;}
#detail main #comment ul li .amendments summary::before{content: '▼'; display: inline-block; margin-right: 0.4em; font-size: 0.8em; transition: transform .2s;}
#detail main #comment ul li .amendments[open] summary::before{transform: rotate(180deg);}
/* details のふわっと開閉（interpolate-size / ::details-content 対応ブラウザのみ。非対応ブラウザは即時開閉） */
#detail main #comment ul li .amendments::details-content{block-size: 0; overflow: hidden; transition: block-size .25s ease, content-visibility .25s ease; transition-behavior: allow-discrete;}
#detail main #comment ul li .amendments[open]::details-content{block-size: auto;}
#detail main #comment ul li .amendments summary:hover{background: var(--cc1); color: var(--cm0);}
#detail main #comment ul li .amendment-list{list-style: none; padding: 0; margin: calc(var(--cqw) * 16) 0 0 0; display: block; width: auto; border-top: none;}
#detail main #comment ul li .amendment-list li{display: block; padding: calc(var(--cqw) * 16) 0; border-bottom: 1px dashed var(--cm3); gap: 0;}
#detail main #comment ul li .amendment-list li:last-child{border-bottom: none;}
#detail main #comment ul li .amendment-list .amendment-date{display: block; font-size: calc(var(--cqw) * 22); color: var(--cm6); margin-bottom: calc(var(--cqw) * 8);}
#detail main #comment ul li .amendment-list p{margin: 0; font-size: calc(var(--cqw) * 26); line-height: 1.6; color: var(--cm5);}

/* ===== 議員コメント投稿フォーム ===== */
#detail #member-comment-form{margin: calc(var(--cqw) * 60) auto 0 auto; width: 90%; padding: calc(var(--cqw) * 40) calc(var(--cqw) * 40); background: var(--cc8); border-radius: calc(var(--cqw) * 12); border: 1px solid var(--cm4);}
#detail #member-comment-form h3{font-size: calc(var(--cqw) * 32); font-weight: 700; color: var(--cm5); margin: 0 0 calc(var(--cqw) * 24) 0; padding: 0; border: none; background: none;}
#detail #member-comment-form h4{font-size: calc(var(--cqw) * 28); font-weight: 700; color: var(--cm5); margin: 0 0 calc(var(--cqw) * 16) 0;}
#detail #member-comment-form .own-comment-history{background: var(--cm0); border: 1px solid var(--cm4); border-radius: calc(var(--cqw) * 8); padding: calc(var(--cqw) * 24); margin-bottom: calc(var(--cqw) * 24);}
#detail #member-comment-form .own-comment-body,
#detail #member-comment-form .own-amendment-body{padding: calc(var(--cqw) * 16) 0; border-bottom: 1px dashed var(--cm3);}
#detail #member-comment-form .own-comment-history > div:last-child{border-bottom: none; padding-bottom: 0;}
#detail #member-comment-form .own-comment-history > div:first-child{padding-top: 0;}
#detail #member-comment-form .own-comment-body .date,
#detail #member-comment-form .own-amendment-body .date{display: block; font-size: calc(var(--cqw) * 22); color: var(--cm6); margin-bottom: calc(var(--cqw) * 8); padding: 0;}
#detail #member-comment-form .own-comment-body p,
#detail #member-comment-form .own-amendment-body p{margin: 0; font-size: calc(var(--cqw) * 26); line-height: 1.6; color: var(--cm5);}
#detail #member-comment-form hr.sep{border: none; border-top: 1px solid var(--cm4); margin: calc(var(--cqw) * 24) 0;}
#detail #member-comment-form .member-form textarea{display: block; width: 100%; box-sizing: border-box; padding: calc(var(--cqw) * 20); border: 1px solid var(--cm3); border-radius: calc(var(--cqw) * 8); font-size: calc(var(--cqw) * 26); line-height: 1.6; font-family: inherit; color: var(--cm5); background: var(--cm0); resize: vertical; min-height: calc(var(--cqw) * 200);}
#detail #member-comment-form .member-form textarea::placeholder{color: var(--cm3);}
#detail #member-comment-form .member-form .char-counter{font-size: calc(var(--cqw) * 22); color: var(--cm6); text-align: right; margin: calc(var(--cqw) * 8) 0; padding: 0;}
#detail #member-comment-form .amend-header{display: flex; align-items: baseline; flex-wrap: wrap; gap: calc(var(--cqw) * 16); margin: 0 0 calc(var(--cqw) * 16) 0;}
#detail #member-comment-form .amend-header h3,
#detail #member-comment-form .amend-header h4{margin: 0;}
#detail #member-comment-form .amend-header .warn-inline{font-size: calc(var(--cqw) * 22); color: var(--cc6); font-weight: 400;}
#detail #member-comment-form .member-form .btn-post{display: block; margin: calc(var(--cqw) * 24) 0 0 auto; padding: calc(var(--cqw) * 16) calc(var(--cqw) * 40); background: linear-gradient(to right, var(--cm5), var(--cc1)); color: var(--cm0); border: none; border-radius: calc(var(--cqw) * 8); font-size: calc(var(--cqw) * 28); font-weight: 700; cursor: pointer; transition: filter .2s;}
#detail #member-comment-form .member-form .btn-post:hover{filter: brightness(1.1);}

#detail #votes h2{background: linear-gradient(to right, var(--cm5), var(--cc1)); font-size: calc(var(--cqw) * 40); color: var(--cm0); font-weight: 400; text-align: center; padding: calc(var(--cqw) * 30) 0; position: relative;}
#detail #votes h2:after{content: ''; position: absolute; bottom: calc(var(--cqw) * 30 * -1); left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: calc(var(--cqw) * 30) solid transparent; border-right: calc(var(--cqw) * 30) solid transparent; border-top: calc(var(--cqw) * 30 * 1.41) solid  var(--cc0);}
#detail #votes h2 + p{font-size: calc(var(--cqw) * 28); line-height: 1.5; text-align: center; padding: calc(var(--cqw) * 30) 0;}
#detail #votes nav{margin: 0 auto; width: 90%; display: flex; gap:calc(var(--cqw) * 20); font-weight: 700;}
#detail #votes nav input[type="radio"]{opacity: 0; width: 0; height: 0; position: absolute;}
#detail #votes nav label{border-radius: calc(var(--cqw) * 8); font-size: calc(var(--cqw) * 40); color: var(--cm0); flex: 1 1 50%; padding: calc(var(--cqw) * 20) 0; margin-bottom: calc(var(--cqw) * 40); text-align: center; cursor: pointer;}
#detail #votes nav #agreement + label{background: linear-gradient(to right, var(--cc3), var(--cc4));}
#detail #votes nav #opposition + label{background: linear-gradient(to right, var(--cc6), var(--cc7));}
#detail #votes nav input[type="radio"]:checked + label{outline: 2px var(--col) solid;}
#detail #votes textarea{padding: calc(var(--cqw) * 24); margin: 0 auto calc(var(--cqw) * 30) auto; width: 90%; height:calc(var(--cqw) * 200); min-height: calc(var(--cqw) * 200); border: var(--cm3) 1px solid; border-radius: calc(var(--cqw) * 8); font-size: calc(var(--cqw) * 28); line-height: 1.5; display: block; resize: vertical; box-sizing: border-box;}
#detail #votes textarea::placeholder{color: var(--cm3)}
#detail #votes button#vote{font-size: calc(var(--cqw) * 28); font-weight: 700; color:var(--cm0); background: linear-gradient(to right, var(--cm5), var(--cc1)); border-radius: calc(var(--cqw) * 8); width:calc(var(--cqw) * 200); text-align: center; padding: calc(var(--cqw) * 14) 0; margin:  0 0 calc(var(--cqw) * 40) calc(95% - var(--cqw) * 200); cursor: pointer;}
#detail #votes form + #graph + p,
#detail #votes .vote-form-wrapper + #graph + p{font-size: calc(var(--cqw) * 24); text-align: center; margin: calc(var(--cqw) * 40) 0;}
#detail #votes ul{margin: 0 auto; padding: 0; width: 90%; transition: opacity .3s ease;}
#detail #votes ul.is-fading{opacity: 0;}

/* 空状態: 既存の賛成/反対バブルと同じ構造・サイズ感で、色のみニュートラル化 */
#detail #votes ul li.empty{list-style: none;}
#detail #votes ul li.empty p{background: var(--cm2) !important; color: var(--cm0) !important; left: 0 !important; right: auto !important; width: 100% !important; text-align: center; font-style: normal; border: none; margin: 0 auto;}
#detail #votes ul li.empty p::after{display: none !important;}

/* ===== トースト通知（全ページ共通） =====
   #toast は body 直下に配置され、JS で .is-show / .is-error / .is-success / .is-info を付与して使う。
   表示位置: 画面中央上、フェードイン → 表示 → フェードアウト。
   背景は ::before 擬似要素で半透明にし、テキストは color と text-shadow の alpha 値で
   背景と同じタイミング（.3s）でフェードする。表示中はテキストは常にはっきり読める。 */
#toast{position: fixed; top: 24px; left: 50%; transform: translate(-50%, -16px); padding: 14px 28px; min-width: 220px; max-width: 90vw; border-radius: 8px; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; z-index: 9999; pointer-events: none; color: rgba(255,255,255,0); text-shadow: 0 1px 3px rgba(0,0,0,0); visibility: hidden; transition: transform .3s ease, color .3s ease, text-shadow .3s ease, visibility 0s linear .3s; isolation: isolate;}
#toast::before{content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(68,68,68,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); opacity: 0; transition: opacity .3s ease; z-index: -1;}
#toast.is-show{transform: translate(-50%, 0); color: rgba(255,255,255,1); text-shadow: 0 1px 3px rgba(0,0,0,0.55); visibility: visible; pointer-events: auto; transition: transform .3s ease, color .3s ease, text-shadow .3s ease, visibility 0s linear 0s;}
#toast.is-show::before{opacity: 1;}
#toast.is-error::before{background: rgba(192,57,43,0.5);}
#toast.is-success::before{background: rgba(30,132,73,0.5);}
#toast.is-info::before{background: rgba(85,85,85,0.5);}

/* 投票済みオーバーレイ */
#detail #votes .vote-form-wrapper{position: relative;}
#detail #votes .vote-overlay{position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; background: rgba(255,255,255,0.75); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 10; border-radius: calc(var(--cqw) * 8);}
#detail #votes .vote-overlay-card{background: var(--cm0); border: 1px solid var(--cm4); border-radius: calc(var(--cqw) * 12); padding: calc(var(--cqw) * 30) calc(var(--cqw) * 40); box-shadow: 0 calc(var(--cqw) * 8) calc(var(--cqw) * 24) rgba(0,53,77,0.12); text-align: center; max-width: 80%;}
#detail #votes .vote-overlay-card i{font-size: calc(var(--cqw) * 48); color: var(--cc1); display: block; margin-bottom: calc(var(--cqw) * 16); line-height: 1;}
#detail #votes .vote-overlay-card p{font-size: calc(var(--cqw) * 30); font-weight: 700; color: var(--cm5); line-height: 1.5; margin: 0;}
#detail #votes .vote-msg{margin: 0 auto calc(var(--cqw) * 20) auto; width: 90%; font-size: calc(var(--cqw) * 24); line-height: 1.5; min-height: 1.5em;}
#detail #votes .vote-msg.is-error{color: var(--cc6);}
#detail #votes .vote-msg.is-success{color: var(--cc3);}
#detail #votes .vote-msg.is-info{color: var(--cm6);}
#detail #votes ul li{list-style: none;}
#detail #votes ul li h3{font-size: calc(var(--cqw) * 28); padding: 0;}
#detail #votes ul li p{font-size: calc(var(--cqw) * 28); line-height: 1.5; padding: calc(var(--cqw) * 14) calc(var(--cqw) * 24); border-radius: calc(var(--cqw) * 8); position: relative; display: block; width: calc(100% - var(--cqw) * 15 * 1.41);}
#detail #votes ul li p:after{content: ''; position: absolute; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: calc(var(--cqw) * 15) solid transparent; border-bottom:  calc(var(--cqw) * 15) solid transparent;}
#detail #votes ul li:nth-child(2n - 1) p{background: var(--cc5); left: calc(var(--cqw) * 15 * 1.41);}
#detail #votes ul li:nth-child(2n - 1) p::after{left: calc(var(--cqw) * 15 * 1.41 * -1); border-right: calc(var(--cqw) * 15 * 1.41) solid var(--cc5);}
#detail #votes ul li:nth-child(2n) p{background: var(--cc8);}
#detail #votes ul li:nth-child(2n) p::after{right: calc(var(--cqw) * 15 * 1.41 * -1);border-left: calc( var(--cqw) * 15 * 1.41) solid var(--cc8);}
#detail #votes ul li:nth-child(2n - 1) h3{color:var(--cc3)}
#detail #votes ul li:nth-child(2n) h3{color: var(--cc6); text-align: right;}

#detail #votes button{margin: calc(var(--cqw) * 100) auto 0 auto; width:90%; background: linear-gradient(to right, var(--cm5), var(--cc1)); aspect-ratio: 335/60; display: block; border-radius: calc(var(--cqw) * 8); cursor: pointer;}
#detail #votes button span{font-size: calc(var(--cqw) * 32); line-height: calc(var(--cqw) * 44); color:var(--cm0); background: url(../images/icon_update.webp) 100% 75%/ auto calc(var(--cqw) * 32) no-repeat; padding-right: 1.5em; display: inline-block;}

#detail #votes #graph{border-radius: calc(var(--cqw) * 8); background: var(--cm7); padding: calc(var(--cqw) * 30) calc(var(--cqw) * 20) 1px calc(var(--cqw) * 20); margin: 0 auto calc(var(--cqw) * 40) auto; width:90%; display: none; align-items: center; justify-content: center;}
#detail #votes #graph.on{display: flex;}
#detail #votes #graph .graph-inner{width: 100%;}
#detail #votes #graph span{display: block; width: auto;}
#detail #votes #graph .agmt span,#detail #votes #graph .opp span{height: calc(var(--cqw) * 40); margin-bottom: calc(var(--cqw) * 20); border-radius: 0 calc(var(--cqw) * 16) calc(var(--cqw) * 16) 0;}
#detail #votes #graph .agmt + span,#detail #votes #graph .opp + span{font-size: calc(var(--cqw) * 30); font-weight: 700; margin-bottom: calc(var(--cqw) * 20);}
#detail #votes #graph .agmt span{background: linear-gradient(to right, var(--cc3), var(--cc4));}
#detail #votes #graph .agmt + span{color: var(--cc3);}
#detail #votes #graph .opp span{background: linear-gradient(to right, var(--cc6), var(--cc7));}
#detail #votes #graph .opp + span{color: var(--cc6);}

#mypage main #profile h1{line-height: 1.5; padding: calc(var(--cqw) * 60) 5% calc(var(--cqw) * 40) 5%;}
#mypage main #profile h1 .title{font-size: calc(var(--cqw) * 44);}
#mypage main #profile article{margin: 0 auto; width: 90%; position: relative; padding:0 0 calc(var(--cqw) * 40) 0; font-size: calc(var(--cqw) * 28); line-height: 1.5; list-style: none; display: flex; gap:calc(var(--cqw) * 30);}
#mypage main #profile article figure{flex-shrink: 0; width:calc(var(--cqw) * 192); text-align: center; margin: 0; padding: 0;}
#mypage main #profile article figure img{width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover;}
#mypage main #profile article .degree{font-size: calc(var(--cqw) * 28); color:var(--cm6); display: block; padding-top: 1em;}
#mypage main #profile article .name{font-size: calc(var(--cqw) * 40); color:var(--cm5); display: block; font-weight: 700;}

#mypage main #tabs{display: flex; flex-wrap: wrap; justify-content: space-between; width: 90%; margin: 0 auto; padding-bottom: calc(var(--cqw) * 100); align-items: flex-end;}
#mypage main #tabs input[name="tab"]{display: none;}
#mypage main #tabs .tab{display: inline-block; padding: calc(var(--cqw) * 36) 0; cursor: pointer; background: var(--cm4); font-size: calc(var(--cqw) * 28); width: calc(var(--cqw) * 320); text-align: center; border-radius: calc(var(--cqw) * 8) calc(var(--cqw) * 8) 0 0; flex-shrink: 0;transition: background 0.3s, color 0.3s;}
#mypage main #tabs #tab_profile:checked + label,#mypage main #tabs #tab_comment:checked + label{background: linear-gradient(to right, var(--cm5), var(--cc1)); color: var(--cm0);}
#mypage main #tabs .content {display: none; width: 100%; padding: calc(var(--cqw) * 80) 0 0 0; box-sizing: border-box; position: relative;}
#mypage main #tabs .content::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--cqw) * 12); background: linear-gradient(to right, var(--cm5), var(--cc1));}
#mypage main #tabs #tab_profile:checked ~ #profile_content,
#mypage main #tabs #tab_comment:checked ~ #comment_content {display: block;}

#mypage main #tabs article + article{padding: calc(var(--cqw) * 60) 0 0 0;}
#mypage main #tabs h2{font-size: calc(var(--cqw) * 44); font-weight: 700; margin-bottom: calc(var(--cqw) * 50); line-height: 1.5;}
#mypage main #tabs h2 span{font-size: calc(var(--cqw) * 28); margin-bottom: calc(var(--cqw) * 20); display: block; color: var(--cc1); padding-left: 1em; background: url(../images/icon_dot.webp) 0 50%/ calc(var(--cqw) * 16) auto no-repeat;}
#mypage main #tabs h3{font-size: calc(var(--cqw) * 36); font-weight: 500; line-height: 1.5; margin-bottom: calc(var(--cqw) * 20);}
#mypage main #tabs p{font-size: calc(var(--cqw) * 28); line-height: 1.5; margin-bottom: calc(var(--cqw) * 20);}
#mypage main #tabs p + h3{margin-top: calc(var(--cqw) * 50); }
#mypage main #tabs .sns{display: flex; list-style: none; padding: 0; gap: calc(var(--cqw) * 40); /*justify-content: center;*/ align-items: center;}
#mypage main #tabs .sns img{width: calc(var(--cqw) * 100); height: auto;}

#mypage main #tabs .card li{list-style: none; width:100%; padding-top: calc(var(--cqw) * 60);}
#mypage main #tabs .card li:nth-child(1){padding: 0;}
#mypage main #tabs .card .top, #mypage main #tabs .card .bottom{display: flex; justify-content: space-between; align-items: stretch;}
#mypage main #tabs .card .top{margin-bottom: calc(var(--cqw) * 20);}
#mypage main #tabs .card .img{width: calc(var(--cqw) * 320); flex-shrink: 0;}
#mypage main #tabs .card .img img{width: 100%; height: auto; object-fit: cover; display: block; }
#mypage main #tabs .card .head{width: calc(var(--cqw) * 350); flex-shrink: 0; padding-left: calc(var(--cqw) * 30); font-weight: 700; color: var(--cm5);}
#mypage main #tabs .card .head .title{font-size: calc(var(--cqw) * 28); line-height: 1.3; margin-bottom: 1em; display: block;}
#mypage main #tabs .card .head .lead{font-size: calc(var(--cqw) * 24); display: block;}

#mypage main #tabs .card .user{width: calc(var(--cqw) * 280); flex-shrink: 0; display: flex; gap: calc(var(--cqw) * 20.7);}
#mypage main #tabs .card .user .avatar{width: calc(var(--cqw) * 116); height: auto; object-fit: cover;}
#mypage main #tabs .card .user .avatar img{width: 100%; aspect-ratio: 1/1; border-radius: 50%; object-fit: cover;}

#mypage main #tabs .card .user .degree{font-size: calc(var(--cqw) * 20); color: var(--cm6); margin-bottom: .6em; display: block;}
#mypage main #tabs .card .user .name{font-size: calc(var(--cqw) * 28); font-weight: 700; color: var(--cm5); display: block;}

#mypage main #tabs .card .comment{position: relative; padding-bottom: calc(var(--cqw) * 40);}
#mypage main #tabs .card .comment .date{padding-bottom:calc(var(--cqw) * 20); font-size: calc(var(--cqw) * 24); color: var(--cm6); display: block;}
#mypage main #tabs .card .comment .votes{padding-top:calc(var(--cqw) * 20); display: block;}
#mypage main #tabs .card .comment .votes span{background: url(../images/icon_star.webp) 0 60% /calc(var(--cqw) * 20) auto no-repeat; font-size: calc(var(--cqw) * 32); padding-left:.75em; line-height: 1; display: inline-block;}
#mypage main #tabs .card .comment .votes span:after{content: 'Votes'; font-size: calc(var(--cqw) * 20); padding-left: .25em;}
#mypage main #tabs .card .comment a{font-size: calc(var(--cqw) * 24); line-height: calc(var(--cqw) * 32); color:var(--cm5); text-decoration: none; background: url(../images/icon_arrow.webp) 100% 50%/ auto calc(var(--cqw) * 32) no-repeat; padding-right: 1.5em; display: inline-block; position: absolute; right:0; bottom: 0;}

@media screen and (max-width: 750px) {
    :root {--cqw: calc(100cqw / 750);}
}

/* html背景: max-width時に左右余白を表示するため必須指定 */
html { background: var(--cm7); }

/* ================================================
   Swiperコンパクト化（共通）
   ================================================ */
.swiper {
  padding-bottom: 20px !important;
}
.swiper-slide figcaption {
  font-size: 15px !important;
  line-height: 20px !important;
  margin-bottom: 8px !important;
}
.swiper-slide .votes {
  padding-bottom: 8px !important;
  margin-bottom: 8px !important;
}
.swiper-slide .votes span {
  font-size: 13px !important;
  background-size: 14px auto !important;
  padding-left: 1.5em !important;
}
.swiper-slide .votes span::after {
  font-size: 12px !important;
}
.swiper-button-prev,
.swiper-button-next {
  width: 30px !important;
  height: 30px !important;
  top: 50% !important;
  bottom: auto !important;
  margin-top: -15px !important;
  background: none !important;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 14px !important;
}
.swiper-slide figure img {
  max-height: 260px;
  object-fit: cover;
  width: 100%;
}
.swiper-pagination {
  bottom: 4px !important;
  padding: 0 16px !important;
}
/* main-inner: スワイパーのはみ出しを中央カラム内に封じ込める */
main .main-inner {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
/* .swiper::before 非表示 */
.swiper::before {
  display: none !important;
}
/* グリッドchildren min-width制御（横スクロール防止） */
#detail > #site-grid > * {
  min-width: 0;
}
/* 投票ラベル選択状態: pill対応のbox-shadow */
#votes nav input[type="radio"]:checked + label {
  outline: none !important;
  box-shadow: 0 0 0 3px var(--cc1) !important;
}
/* インタラクティブ要素: transition + hover状態 */
#votes button#vote,
#votes button.update,
#votes nav label {
  transition: filter 0.2s;
}
#comment ul li a:hover {
  text-decoration: underline !important;
}
#votes button#vote:hover {
  filter: brightness(1.15);
}
#votes button.update:hover {
  filter: brightness(1.15);
}
#votes nav label:hover {
  filter: brightness(1.15);
  cursor: pointer;
}
/* アクセシビリティ: focus-visible状態 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
label:focus-visible {
  outline: 2px solid var(--cc1) !important;
  outline-offset: 2px;
}

/* ================================================
   DETAIL PAGE — PC (min-width: 1024px)
   ================================================ */
@media (min-width: 1024px) {

  /* ===== DETAIL/TOP 共通: LEFT SIDEBAR Footer (Nav) ===== */
  #detail footer,
  #top footer {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 12px 8px 16px 8px !important;
    gap: 0 !important;
    border: none !important;
    position: sticky;
    top: 66px;
    align-self: start;
    z-index: 10;
    max-height: calc(100vh - 66px);
    overflow-y: auto;
  }
  #detail footer > p,
  #top footer > p {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 12px !important;
    width: 100% !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    color: var(--cm5) !important;
  }
  #detail footer > p i,
  #top footer > p i {
    font-size: 18px !important;
    color: var(--cc1) !important;
  }
  #detail footer ul,
  #top footer ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    font-size: 15px !important;
    width: 100% !important;
  }
  #detail footer ul li,
  #top footer ul li {
    list-style: none !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  #detail footer ul li a,
  #top footer ul li a {
    display: block !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--cm5) !important;
    border-radius: 9999px !important;
    text-decoration: none;
    transition: background 0.2s;
  }
  #detail footer ul li a:hover,
  #top footer ul li a:hover {
    background: rgba(0,15,48,0.1) !important;
  }
  #detail footer credit,
  #top footer credit {
    display: block !important;
    color: var(--cm6) !important;
    font-size: 12px !important;
    padding: 12px !important;
  }

  /* --- Grid Container (wrapper div) --- */
  #detail > #site-grid {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    max-width: min(1200px, calc(100vw - 32px));
    width: calc(100vw - 32px);
    margin: 0 auto;
    background: var(--cm0);
    min-height: 100vh;
    color: var(--cm5);
    border-left: 1px solid var(--cm4);
    border-right: 1px solid var(--cm4);
  }

  /* ===== TOP BAR: Header (Logo) ===== */
  #detail header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    position: sticky;
    top: 0;
    z-index: 11;
  }
  #detail header p {
    background: none;
    padding: 0;
    border-radius: 0;
    display: inline-block;
  }
  #detail header img {
    width: 120px !important;
    height: auto !important;
  }

  /* ===== CENTER COLUMN: main ===== */
  #detail main {
    grid-column: 2 !important;
    grid-row: 1 / span 100 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    border-right: 1px solid var(--cm4) !important;
    padding: 0 !important;
    background: var(--cm0) !important;
  }
  #detail #news > h1 {
    padding: 12px 16px 4px !important;
    margin: 0 !important;
    background: none !important;
  }
  #detail #news > h1 .title {
    font-size: 28px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    line-height: 36px;
    color: var(--cm5);
  }
  #detail #news > h1 .sub {
    font-size: 16px !important;
    margin-bottom: 6px !important;
    line-height: 22px;
    color: var(--cm5);
  }
  #detail #news > h1 .sub span {
    font-size: 13px !important;
    color: var(--cm6);
  }
  #detail #news > h1 .note {
    font-size: 13px !important;
    color: var(--cm6);
  }
  #detail #news > figure {
    padding: 4px 16px 0 !important;
    margin: 0 !important;
  }
  #detail #news > figure img {
    border-radius: 16px;
    border: 1px solid var(--cm4);
  }
  #detail #news > article {
    margin-bottom: 0 !important;
    padding: 12px 0;
    border-bottom: 1px solid var(--cm4);
  }
  #detail h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
    line-height: 28px;
    color: var(--cm5);
  }
  /* 記事内ul/olの横パディングをh2と揃える */
  #detail #news > article:not(#comment):not(#votes) ul {
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px 0 32px !important;
  }
  #detail #news > article:not(#comment):not(#votes) ol {
    padding: 0 16px 0 32px !important;
  }
  #detail #news > article p,
  #detail .article-body,
  #detail .opinion-body {
    font-size: 18px !important;
    line-height: 30px !important;
    padding: 0 16px;
  }
  #detail h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    line-height: 28px;
    color: var(--cm5);
  }
  #detail ul li {
    font-size: 18px !important;
    line-height: 28px !important;
    margin-bottom: 12px !important;
    color: var(--cm5);
  }
  #detail ol li {
    font-size: 18px !important;
    line-height: 28px !important;
    margin-bottom: 12px !important;
    color: var(--cm5);
  }
  #detail ol li h4 {
    font-size: 19px !important;
    font-weight: 700;
  }
  #detail .agreement,
  #detail .opposition {
    padding: 12px !important;
    margin: 0 16px 8px !important;
    width: auto !important;
    border-radius: 16px;
    border: 1px solid var(--cm4);
  }
  #detail .opposition {
    margin-bottom: 0 !important;
  }
  #detail .agreement h3,
  #detail .opposition h3 {
    padding: 0 !important;
    font-size: 20px !important;
  }
  #detail #comment h3 {
    padding: 0 16px !important;
  }
  #detail #comment ul {
    width: calc(100% - 32px) !important;
    border-top-color: var(--cm4) !important;
  }
  #detail #comment ul li {
    border-bottom-color: var(--cm4) !important;
    padding: 12px 0 !important;
    gap: 12px !important;
  }
  #detail #comment ul li figure {
    width: 96px !important;
    padding: 0 !important;
  }
  #detail #comment ul li figcaption {
    font-size: 12px !important;
    width: 90% !important;
    margin: 0 auto !important;
  }
  #detail #comment ul li .date {
    font-size: 13px !important;
    color: var(--cm6) !important;
    padding-bottom: 4px !important;
  }
  #detail #comment ul li .txt p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  #detail #comment ul li .votes span {
    font-size: 13px !important;
    color: var(--cm6);
    background-size: 14px auto !important;
    padding-left: 1.5em !important;
  }
  #detail #comment ul li .votes span::after {
    font-size: 12px !important;
  }
  #detail #comment ul li a {
    font-size: 13px !important;
    color: var(--cc1) !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 12px !important;
    display: inline-block !important;
    width: auto !important;
    margin-left: 0 !important;
    background-size: auto 16px !important;
    line-height: 18px !important;
    margin-top: 0 !important;
  }
  /* 「詳しく見る」リンクは絶対配置から外し、コメント本文の下に右寄せ配置（1023px以下と同じ挙動） */
  #detail #comment ul li .comment-more {
    margin-top: 8px !important;
    text-align: right !important;
    position: relative !important;
  }
  #detail #comment ul li .comment-more a {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-top: 0 !important;
  }
  /* ===== 議員コメント投稿フォーム・追記折りたたみ UI（PC） ===== */
  #detail #member-comment-form {
    margin: 24px 16px 16px 16px !important;
    padding: 20px !important;
    width: auto !important;
    background: var(--cc8) !important;
    border: 1px solid var(--cm4) !important;
    border-radius: 12px !important;
  }
  #detail #member-comment-form h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    color: var(--cm5) !important;
    line-height: 1.5 !important;
  }
  #detail #member-comment-form h4 {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: var(--cm5) !important;
  }
  #detail #member-comment-form .own-comment-history {
    padding: 12px 16px !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  #detail #member-comment-form .own-comment-body .date,
  #detail #member-comment-form .own-amendment-body .date {
    font-size: 11px !important;
    padding: 0 !important;
    margin-bottom: 4px !important;
  }
  #detail #member-comment-form .own-comment-body p,
  #detail #member-comment-form .own-amendment-body p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  #detail #member-comment-form hr.sep {
    margin: 16px 0 !important;
  }
  #detail #member-comment-form .member-form textarea {
    padding: 12px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-height: 120px !important;
  }
  #detail #member-comment-form .member-form .char-counter {
    font-size: 11px !important;
    margin: 4px 0 !important;
  }
  #detail #member-comment-form .amend-header {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 0 0 8px 0 !important;
  }
  #detail #member-comment-form .amend-header h3,
  #detail #member-comment-form .amend-header h4 {
    margin: 0 !important;
  }
  #detail #member-comment-form .amend-header .warn-inline {
    font-size: 12px !important;
    color: var(--cc6) !important;
    font-weight: 400 !important;
  }
  #detail #member-comment-form .member-form .btn-post {
    position: static !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    color: var(--cm0) !important;
    margin: 16px 0 0 auto !important;
  }
  /* 追記折りたたみ (PC) */
  #detail #comment ul li .amendments {
    margin-top: 12px !important;
    padding-top: 10px !important;
  }
  #detail #comment ul li .amendments summary {
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
  }
  #detail #comment ul li .amendment-list li {
    padding: 8px 0 !important;
  }
  #detail #comment ul li .amendment-list .amendment-date {
    font-size: 11px !important;
  }
  #detail #comment ul li .amendment-list p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  #detail #comment ul li figure > a {
    display: block !important;
    text-align: center !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
  }
  #detail #comment ul li figcaption a {
    display: inline-block !important;
    position: static !important;
    color: inherit !important;
    text-decoration: none !important;
    background: url(../images/icon_arrow.webp) 100% 50%/ auto 12px no-repeat !important;
    padding: 0 1.2em 0 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }

  /* ===== RIGHT SIDEBAR: #votes (Sticky Card) ===== */
  #detail #votes {
    grid-column: 3 !important;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    position: sticky !important;
    top: 66px;
    align-self: start;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 16px 16px !important;
    background: var(--cm0) !important;
    overflow-y: visible !important;
  }
  /* #votes スクロールバースタイリング */
  #detail #votes::-webkit-scrollbar {
    width: 6px;
  }
  #detail #votes::-webkit-scrollbar-track {
    background: transparent;
  }
  #detail #votes::-webkit-scrollbar-thumb {
    background: var(--cm4);
    border-radius: 3px;
  }
  #detail #votes::-webkit-scrollbar-thumb:hover {
    background: var(--cm6);
  }
  #detail #votes {
    scrollbar-width: thin;
    scrollbar-color: var(--cm4) transparent;
  }
  #detail #votes h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    line-height: 1.4;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    color: var(--cm0) !important;
    text-align: center !important;
    position: relative;
    margin: 0 -16px 16px !important;
    border-radius: 0 !important;
  }
  #detail #votes h2::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: 14px solid var(--cc0) !important;
  }
  #detail #votes h2 + p {
    font-size: 13px !important;
    padding: 16px 0 12px !important;
    text-align: center !important;
    color: var(--cm6);
  }
  #detail #votes nav {
    width: 100% !important;
    gap: 8px !important;
  }
  #detail #votes nav label {
    font-size: 14px !important;
    padding: 8px 0 !important;
    margin-bottom: 12px !important;
    border-radius: 8px !important;
  }
  #detail #votes textarea {
    width: 100%;
    height: 80px;
    min-height: 80px !important;
    font-size: 13px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    border-color: var(--cm4) !important;
    resize: vertical !important;
    box-sizing: border-box !important;
  }
  #detail #votes button#vote {
    font-size: 14px !important;
    width: auto !important;
    padding: 8px 24px !important;
    margin: 0 0 12px auto !important;
    border-radius: 8px !important;
    display: block;
  }
  #detail #votes #graph {
    width: 100% !important;
    padding: 12px 0 1px !important;
    margin: 0 0 12px !important;
    background: transparent !important;
    border-radius: 0 !important;
  }
  #detail #votes #graph .agmt span,
  #detail #votes #graph .opp span {
    height: 16px !important;
    margin-bottom: 4px !important;
    border-radius: 0 8px 8px 0 !important;
  }
  #detail #votes #graph .agmt + span,
  #detail #votes #graph .opp + span {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  #detail #votes form + #graph + p,
  #detail #votes .vote-form-wrapper + #graph + p {
    font-size: 12px !important;
    text-align: left !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
    color: var(--cm6);
  }
  #detail #votes ul {
    width: 100% !important;
  }
  #detail #votes ul li h3 {
    font-size: 13px !important;
    padding: 0 !important;
  }
  #detail #votes ul li p {
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    width: calc(100% - 12px) !important;
    line-height: 1.5 !important;
  }
  #detail #votes ul li:nth-child(2n - 1) p {
    left: 12px !important;
  }
  #detail #votes ul li:nth-child(2n) p {
    left: auto !important;
  }
  /* 空状態: 左右オフセット打ち消し + 白抜き + 中央配置 */
  #detail #votes ul li.empty p {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    background: var(--cm2) !important;
    color: var(--cm0) !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  #detail #votes ul li.empty p::after {
    display: none !important;
  }
  #detail #votes ul li p::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
  }
  #detail #votes ul li:nth-child(2n - 1) p::after {
    left: -12px !important;
    right: auto !important;
    border-right: 12px solid var(--cc5) !important;
    border-left: none !important;
  }
  #detail #votes ul li:nth-child(2n) p::after {
    right: -12px !important;
    left: auto !important;
    border-left: 12px solid var(--cc8) !important;
    border-right: none !important;
  }
  /* 投票済みオーバーレイ（PC）—— 半透明背景＋カードごと上に 50px シフト */
  #detail #votes .vote-overlay {
    border-radius: 12px !important;
    transform: translateY(-50px) !important;
  }
  #detail #votes .vote-overlay-card {
    padding: 16px 24px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,53,77,0.12) !important;
  }
  #detail #votes .vote-overlay-card i {
    font-size: 28px !important;
    margin-bottom: 8px !important;
  }
  #detail #votes .vote-overlay-card p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  #detail #votes button.update {
    margin: 32px auto 0 auto !important;
    width: 90% !important;
    aspect-ratio: auto !important;
    padding: 12px 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    border: none !important;
    cursor: pointer !important;
    display: block !important;
  }
  #detail #votes button.update span {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--cm0) !important;
    background: url(../images/icon_update.webp) 100% 50% / auto 16px no-repeat !important;
    padding: 0 1.5em 0 0 !important;
    display: inline-block !important;
  }

  /* ===== 記事一覧カード（PC） ===== */
  .article-list { padding: 0 16px !important; }
  .article-card { margin-bottom: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid var(--cm4); }
  .article-card a { gap: 16px !important; }
  .article-card figure { flex: 0 0 140px !important; }
  .article-card figure img { border-radius: 12px !important; }
  .article-card-meta { font-size: 13px !important; gap: 8px !important; margin-bottom: 4px !important; }
  .article-card-body h3 { font-size: 17px !important; line-height: 22px !important; margin-bottom: 4px !important; }
  .article-card-body p { font-size: 14px !important; line-height: 20px !important; margin-bottom: 4px !important; }
  .article-card-body .votes span { font-size: 14px !important; background-size: 14px auto !important; padding-left: 1.2em !important; }
  .article-card-body .votes span::after { font-size: 12px !important; padding-left: .5em !important; }
  .pagination { padding: 16px 0 !important; gap: 4px !important; }
  .pagination a, .pagination span { min-width: 36px !important; height: 36px !important; font-size: 14px !important; border-radius: 8px !important; }

  /* ===== INDEX PAGE: #kv (中カラム) ===== */
  #detail #kv {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  #detail #kv img {
    width: 100% !important;
  }

  /* ===== INDEX PAGE: #topics (中カラム) ===== */
  #detail #topics {
    padding: 32px 0 !important;
    overflow: hidden !important;
  }
  #detail #topics h2 {
    line-height: 1.5 !important;
    margin-bottom: 20px !important;
  }
  #detail #topics h2 span {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: var(--cc1) !important;
    padding-left: 1em !important;
    background: url(../images/icon_dot.webp) 0 50% / 8px auto no-repeat !important;
  }
  #detail #topics article + article {
    padding-top: 16px !important;
  }
  #detail #topics article h3 {
    padding: 0 5% !important;
    font-weight: 500 !important;
  }
  #detail #topics article p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    padding: 0 5% !important;
    color: var(--cm5) !important;
  }
  #detail #topics > button {
    margin: 32px auto 0 !important;
    width: 90% !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    aspect-ratio: 335/60 !important;
    display: block !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }
  #detail #topics > button span {
    font-size: 16px !important;
    line-height: 22px !important;
    color: var(--cm0) !important;
    background: url(../images/icon_arrow_w.webp) 100% 75% / auto 16px no-repeat !important;
    padding-right: 1.5em !important;
    display: inline-block !important;
  }

  /* ===== INDEX PAGE: #votes 新コンテンツ (右カラム) ===== */
  #detail #votes h1 {
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 12px 0 8px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    color: var(--cm5) !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }
  #detail #votes > p {
    font-size: 12px !important;
    line-height: 1.7 !important;
    color: var(--cm6) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
  }
  #detail #votes #features {
    width: auto !important;
    max-width: none !important;
    background: linear-gradient(to bottom, var(--cc2), var(--cc1) 100%) !important;
    padding: 12px !important;
    border-radius: 12px !important;
    margin: 8px 0 0 !important;
    text-align: center !important;
    color: var(--cm0) !important;
  }
  #detail #votes #features h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cm0) !important;
    padding: 0 0 10px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    margin-bottom: 0 !important;
  }
  #detail #votes #features ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #detail #votes #features ul li {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--cm0) !important;
    text-align: left !important;
    margin-bottom: 0 !important;
  }
  #detail #votes #features ul li h3 {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--cm0) !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  #detail #votes #features ul li img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  /* ===== INDEX PAGE: タイムラインヘッダー (中カラム) ===== */
  #detail .timeline-header {
    position: sticky;
    top: 66px;
    z-index: 11;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cm4);
    padding: 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--cm5);
  }

  /* ===== INDEX PAGE: 右カラム 新コンテンツ (PC) ===== */
  #detail #votes .search-box {
    background: var(--cm4);
    border-radius: 9999px;
    padding: 10px 16px;
    margin: 16px 0;
    color: var(--cm6);
    font-size: 14px;
  }
  #detail #votes .sidebar-card {
    padding-top: 16px;
    border-top: 1px solid var(--cm4);
    margin-bottom: 16px;
  }
  #detail #votes .sidebar-card h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 0 10px !important;
  }
  #detail #votes .category-list {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #detail #votes .category-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--cm4) !important;
    display: block !important;
    font-size: 13px !important;
    color: var(--cm6) !important;
    margin-bottom: 0 !important;
  }
  #detail #votes .category-list li:last-child {
    border-bottom: none !important;
  }
  #detail #votes .category-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cm5) !important;
    display: block !important;
    margin-bottom: 2px !important;
  }
  #detail #votes .sidebar-footer {
    font-size: 12px !important;
    color: var(--cm6) !important;
    line-height: 1.8 !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--cm4) !important;
  }
  #detail #votes .sidebar-footer a {
    color: var(--cm6) !important;
    text-decoration: none !important;
    margin-right: 8px !important;
    display: inline-block !important;
  }
  #detail #votes .sidebar-footer a:hover {
    text-decoration: underline !important;
  }
  #detail #votes .sidebar-footer small {
    display: block !important;
    margin-top: 4px !important;
  }

  /* === PC: Swiper調整（padding縮小・overflow制御・幅制限解除） === */
  #detail .swiper {
    padding-bottom: 12px !important;
    overflow: hidden !important;
    max-width: none !important;
  }
  #detail .swiper-slide {
    padding-right: 0 !important;
  }

  /* === PC: グリッド左カラム境界線を全高延長 === */
  #detail > #site-grid {
    position: relative;
  }
  #detail > #site-grid::before {
    content: '';
    position: absolute;
    left: 220px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--cm4);
    pointer-events: none;
    z-index: 0;
  }
}

/* ================================================
   DETAIL PAGE — Mobile (max-width: 1023px)
   ================================================ */
@media (max-width: 1023px) {

  /* モバイル: 全要素をフルワイド化（751-1023pxでの左右余白解消） */
  /* 横スクロール防止 */
  body#detail {
    overflow-x: hidden;
  }

  #detail,
  #detail header,
  #detail main,
  #detail #votes,
  #detail footer {
    width: 100% !important;
    max-width: 100% !important;
  }

  #detail header {
    height: 53px !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    border-bottom: 1px solid var(--cm4);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
  }
  #detail header img {
    width: 80px !important;
    height: auto !important;
  }

  #detail #news h1 {
    padding: 12px 16px 4px !important;
    margin: 0 !important;
    background: none !important;
  }
  #detail #news h1 .title {
    font-size: 24px !important;
    margin-bottom: 6px !important;
    line-height: 32px;
    color: var(--cm5);
  }
  #detail #news h1 .sub {
    font-size: 15px !important;
    margin-bottom: 4px !important;
    line-height: 20px;
  }
  #detail #news h1 .sub span {
    font-size: 13px !important;
    color: var(--cm6);
  }
  #detail #news h1 .note {
    font-size: 13px !important;
    color: var(--cm6);
  }
  #detail figure {
    margin: 0 !important;
    padding: 4px 16px 0 !important;
  }
  #detail figure img {
    border-radius: 16px;
    border: 1px solid var(--cm4);
  }
  #detail article {
    margin-bottom: 0 !important;
    padding: 16px 0;
    border-bottom: 1px solid var(--cm4);
  }
  #detail h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    margin-bottom: 12px !important;
    padding: 0 16px !important;
    line-height: 28px;
    color: var(--cm5);
  }
  /* 記事内ul/olの横パディングを統一 */
  #detail #news > article:not(#comment):not(#votes) ul {
    width: auto !important;
    margin: 0 !important;
    padding: 0 16px 0 32px !important;
  }
  #detail #news > article:not(#comment):not(#votes) ol {
    padding: 0 16px 0 32px !important;
  }
  #detail #news > article p,
  #detail .article-body,
  #detail .opinion-body {
    font-size: 16px !important;
    line-height: 26px !important;
    padding: 0 16px;
  }
  #detail h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    line-height: 24px;
    color: var(--cm5);
  }
  #detail ul li {
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 10px !important;
  }
  #detail ol li {
    font-size: 16px !important;
    line-height: 24px !important;
    margin-bottom: 10px !important;
  }
  #detail ol li h4 {
    font-size: 17px !important;
    font-weight: 700;
  }
  #detail .agreement,
  #detail .opposition {
    padding: 12px !important;
    margin: 0 16px 8px !important;
    width: auto !important;
    border-radius: 16px;
    border: 1px solid var(--cm4);
  }
  #detail .opposition {
    margin-bottom: 0 !important;
  }
  #detail #comment h3 {
    padding: 0 16px !important;
  }
  #detail #comment ul {
    width: calc(100% - 32px) !important;
    border-top-color: var(--cm4) !important;
  }
  #detail #comment ul li {
    padding: 12px 0 !important;
    gap: 12px !important;
    border-bottom-color: var(--cm4) !important;
  }
  #detail #comment ul li figure {
    flex: 0 0 25% !important;
    width: 25% !important;
  }
  #detail #comment ul li .txt {
    flex: 1 1 75% !important;
    min-width: 0 !important;
  }
  #detail #comment ul li figcaption {
    font-size: 12px !important;
    width: 90% !important;
    margin: 0 auto !important;
  }
  #detail #comment ul li .date {
    font-size: 13px !important;
    color: var(--cm6) !important;
  }
  #detail #comment ul li .txt p {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  #detail #comment ul li .votes span {
    font-size: 13px !important;
    background-size: 14px auto !important;
    padding-left: 1.5em !important;
  }
  #detail #comment ul li a {
    font-size: 13px !important;
    color: var(--cc1) !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    background-size: auto 16px !important;
    line-height: 18px !important;
    margin-top: 4px !important;
  }
  #detail #comment ul li figure > a {
    display: block !important;
    text-align: center !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
  }
  #detail #comment ul li figcaption a {
    display: inline-block !important;
    position: static !important;
    color: inherit !important;
    text-decoration: none !important;
    background: url(../images/icon_arrow.webp) 100% 50%/ auto 12px no-repeat !important;
    padding: 0 1.2em 0 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
  #detail #votes {
    margin: 0 16px !important;
    width: calc(100% - 32px) !important;
    background: var(--cm0) !important;
  }
  #detail #votes h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    padding: 14px 16px !important;
    line-height: 1.4 !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    color: var(--cm0) !important;
    text-align: center !important;
    position: relative !important;
    margin: 0 0 16px !important;
    border-radius: 0 !important;
  }
  #detail #votes h2::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    bottom: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: 14px solid var(--cc0) !important;
  }
  #detail #votes h2 + p {
    font-size: 15px !important;
    padding: 16px 0 12px !important;
    text-align: center !important;
    color: var(--cm6);
  }
  #detail #votes nav label {
    font-size: 15px !important;
    padding: 10px 0 !important;
    margin-bottom: 16px !important;
    border-radius: 8px !important;
  }
  #detail #votes textarea {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    height: 100px;
    min-height: 100px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
    border-color: var(--cm4) !important;
    resize: vertical !important;
    box-sizing: border-box !important;
  }
  #detail #votes button#vote {
    font-size: 15px !important;
    border-radius: 8px !important;
    padding: 8px 24px !important;
    width: auto !important;
    margin: 0 0 16px auto !important;
    display: block;
  }
  #detail #votes form + #graph + p,
  #detail #votes .vote-form-wrapper + #graph + p {
    font-size: 13px !important;
    color: var(--cm6);
  }
  #detail #votes ul li h3 {
    font-size: 15px !important;
    padding: 0 !important;
  }
  #detail #votes ul li p {
    font-size: 15px !important;
    padding: 12px 18px !important;
    border-radius: 8px !important;
    width: calc(100% - 18px) !important;
    line-height: 1.6 !important;
  }
  #detail #votes ul li:nth-child(2n - 1) p {
    left: 18px !important;
  }
  #detail #votes ul li:nth-child(2n) p {
    left: auto !important;
  }
  /* 空状態: 左右オフセット打ち消し + 白抜き + 中央配置 */
  #detail #votes ul li.empty p {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    background: var(--cm2) !important;
    color: var(--cm0) !important;
    text-align: center !important;
    margin: 0 auto !important;
  }
  #detail #votes ul li.empty p::after {
    display: none !important;
  }
  #detail #votes ul li p::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 10px solid transparent !important;
    border-bottom: 10px solid transparent !important;
  }
  #detail #votes ul li:nth-child(2n - 1) p::after {
    left: -18px !important;
    right: auto !important;
    border-right: 18px solid var(--cc5) !important;
    border-left: none !important;
  }
  #detail #votes ul li:nth-child(2n) p::after {
    right: -18px !important;
    left: auto !important;
    border-left: 18px solid var(--cc8) !important;
    border-right: none !important;
  }
  /* 投票済みオーバーレイ（モバイル） */
  #detail #votes .vote-overlay {
    border-radius: 12px !important;
  }
  #detail #votes .vote-overlay-card {
    padding: 20px 28px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0,53,77,0.12) !important;
  }
  #detail #votes .vote-overlay-card i {
    font-size: 36px !important;
    margin-bottom: 10px !important;
  }
  #detail #votes .vote-overlay-card p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  #detail #votes button.update {
    margin: 30px auto 20px auto !important;
    width: 90% !important;
    aspect-ratio: auto !important;
    padding: 12px 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    border: none !important;
    cursor: pointer !important;
    display: block !important;
  }
  #detail #votes button.update span {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--cm0) !important;
    background: url(../images/icon_update.webp) 100% 50% / auto 18px no-repeat !important;
    padding: 0 1.5em 0 0 !important;
    display: inline-block !important;
  }
  #detail footer {
    height: auto !important;
    background: var(--cm0) !important;
    padding: 16px !important;
    gap: 8px !important;
    border-top: 1px solid var(--cm4);
  }
  #detail footer img {
    width: 80px !important;
    height: auto !important;
  }
  #detail footer ul {
    font-size: 13px !important;
    gap: 16px !important;
  }
  #detail footer ul li a {
    color: var(--cm6) !important;
  }
  #detail footer credit {
    font-size: 13px !important;
    color: var(--cm6) !important;
  }

  /* ===== INDEX PAGE: モバイル追加スタイル ===== */
  /* Swiper nav ボタン: モバイルでは非表示 */
  .swiper-button-prev,
  .swiper-button-next {
    display: none !important;
  }
  /* #kv: フルワイド */
  #detail #kv {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #detail #kv img {
    width: 100% !important;
  }
  /* #topics: スタイル復元 */
  #detail #topics {
    padding: 32px 0 !important;
  }
  #detail #topics h2 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    padding: 0 5% !important;
  }
  #detail #topics h2 span {
    font-size: 14px !important;
    margin-bottom: 8px !important;
    display: block !important;
    color: var(--cc1) !important;
    padding-left: 1em !important;
    background: url(../images/icon_dot.webp) 0 50% / 8px auto no-repeat !important;
  }
  #detail #topics article + article {
    padding-top: 32px !important;
    border-top: 1px solid var(--cm4) !important;
  }
  #detail #topics article h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    padding: 0 5% !important;
  }
  #detail #topics article p {
    font-size: 15px !important;
    line-height: 1.5 !important;
    margin-bottom: 8px !important;
    padding: 0 5% !important;
    color: var(--cm5) !important;
  }
  #detail #topics > button {
    margin: 16px auto 0 !important;
    width: 80% !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    aspect-ratio: 335/44 !important;
    display: block !important;
    border-radius: 8px !important;
    cursor: pointer !important;
  }
  #detail #topics > button span {
    font-size: 14px !important;
    color: var(--cm0) !important;
    background: url(../images/icon_arrow_w.webp) 100% 75% / auto 14px no-repeat !important;
    padding-right: 1.5em !important;
    display: inline-block !important;
  }
  /* #votes h1 */
  #detail #votes h1 {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    padding: 20px 16px 12px !important;
    color: var(--cm5) !important;
    border-bottom: 2px solid var(--cc2) !important;
    margin-bottom: 0 !important;
  }
  /* #votes 説明文 */
  #detail #votes > p {
    font-size: 15px !important;
    line-height: 1.8 !important;
    padding: 8px 16px !important;
    color: var(--cm5) !important;
  }
  /* #features: スタイル復元 */
  #detail #features {
    width: 100% !important;
    max-width: 100% !important;
    background: linear-gradient(to bottom right, var(--cc2), var(--cc1) 50%) !important;
    padding: 24px 16px !important;
    text-align: center !important;
    color: var(--cm0) !important;
    margin-top: 16px !important;
  }
  #detail #features h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    line-height: 1.5 !important;
    color: var(--cm0) !important;
    padding: 0 !important;
  }
  #detail #features ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #detail #features ul li {
    width: 80% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: left !important;
    color: var(--cm0) !important;
    margin-bottom: 0 !important;
  }
  #detail #features ul li h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
    padding: 12px 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    color: var(--cm0) !important;
  }
  #detail #features ul li img {
    width: 60% !important;
    margin: 0 auto !important;
  }

  /* ===== INDEX PAGE: 新要素 モバイル ===== */
  #detail .timeline-header {
    position: sticky;
    top: 53px;
    z-index: 11;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--cm4);
    padding: 12px 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cm5);
  }
  #detail #votes .search-box {
    background: var(--cm4);
    border-radius: 9999px;
    padding: 10px 16px;
    margin: 12px 0;
    color: var(--cm6);
    font-size: 14px;
  }
  #detail #votes .sidebar-card {
    padding-top: 12px;
    border-top: 1px solid var(--cm4);
    margin-bottom: 12px;
  }
  #detail #votes .sidebar-card h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 0 0 8px !important;
    background: none !important;
    color: var(--cm5) !important;
  }
  #detail #votes .category-list {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #detail #votes .category-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--cm4) !important;
    display: block !important;
    font-size: 13px !important;
    color: var(--cm6) !important;
    margin-bottom: 0 !important;
  }
  #detail #votes .category-list li:last-child {
    border-bottom: none !important;
  }
  #detail #votes .category-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cm5) !important;
    display: block !important;
    margin-bottom: 2px !important;
  }
  #detail #votes .sidebar-footer {
    font-size: 12px !important;
    color: var(--cm6) !important;
    line-height: 1.8 !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--cm4) !important;
  }
  #detail #votes .sidebar-footer a {
    color: var(--cm6) !important;
    text-decoration: none !important;
    margin-right: 8px !important;
    display: inline-block !important;
  }
  #detail #votes .sidebar-footer small {
    display: block !important;
    margin-top: 4px !important;
  }

  /* ===== モバイル: Swiper overflow・画像サイズ縮小 ===== */
  #detail .swiper {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  #detail .swiper-slide figure img {
    max-height: 160px !important;
    object-fit: cover !important;
    width: 100% !important;
  }
}

/* ================================================
   TOP PAGE — shared (メディアクエリ外)
   TOP共通スタイル
   ================================================ */
/* sticky を壊さないための overflow 制御 */
body#top { overflow-x: clip !important; overflow-y: visible !important; }
/* --cqw 強制（cqw 単位のブラウザ挙動差異対策） */
:root { --cqw: 1px; }
@media (max-width: 750px) { :root { --cqw: calc(100vw / 750); } }
/* main-inner: スワイパーのはみ出しを中央カラム内に封じ込める */
#top main .main-inner {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
/* スワイパー: overflow封じ込め + 高さ制御 + 罫線 */
#top .swiper {
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 38px !important;
  padding: 0 !important;
  height: auto !important;
  border-bottom: 1px solid var(--cm3) !important;
}
#top .swiper::before {
  display: none !important;
}
/* Votes → 12px空白 → pagination（罫線はswiperのborder-bottom） */
#top .swiper-slide .votes {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}
#top .swiper-pagination {
  position: relative !important;
  bottom: auto !important;
  text-align: left !important;
  padding: 6px 0 8px !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}
#top .swiper-wrapper {
  height: auto !important;
  align-items: flex-start !important;
}
#top .swiper-slide {
  height: auto !important;
}

/* ================================================
   TOP PAGE — PC (min-width: 1024px)
   ================================================ */
@media (min-width: 1024px) {

  /* --- Body: prevent horizontal overflow (clip = sticky互換) --- */
  body#top {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  /* PC: swiper罫線・余白を消す（article の border-bottom + padding で制御） */
  #top .swiper {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* --- Grid Container --- */
  #top > #site-grid {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 300px;
    max-width: min(1200px, calc(100vw - 32px));
    width: calc(100vw - 32px);
    margin: 0 auto;
    background: var(--cm0);
    min-height: 100vh;
    color: var(--cm5);
    border-left: 1px solid var(--cm4);
    border-right: 1px solid var(--cm4);
  }
  #top > #site-grid > * {
    min-width: 0;
  }

  /* ===== TOP BAR: Header (Logo) ===== */
  #top > header {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: auto !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    position: sticky;
    top: 0;
    z-index: 11;
  }
  #top > header p {
    background: none;
    padding: 0;
    border-radius: 0;
    display: inline-block;
  }
  #top > header img {
    width: 120px !important;
    height: auto !important;
  }

  /* ===== CENTER COLUMN: main ===== */
  #top main {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
    width: calc(min(1200px, 100vw - 32px) - 520px) !important;
    max-width: calc(min(1200px, 100vw - 32px) - 520px) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-right: 1px solid var(--cm4);
    padding: 0 !important;
    background: var(--cm0) !important;
  }
  #top #kv {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
  #top #kv p {
    margin: 0 !important;
    padding: 0 !important;
  }
  #top #kv img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    max-width: 100% !important;
  }
  #top #topics {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 16px !important;
    height: auto !important;
    border-bottom: 1px solid var(--cm4);
  }
  #top #topics > h2,
  #top #topics .category-header h2 {
    font-size: 20px !important;
    font-weight: 800 !important;
    padding: 0 0 12px !important;
    margin: 0 !important;
    color: var(--cm5) !important;
    background: none !important;
    width: auto !important;
  }
  #top #topics h2 span {
    font-size: 13px !important;
    margin-bottom: 4px !important;
  }
  #top #topics article {
    border-bottom: 1px solid var(--cm4);
    padding: 16px 0;
    margin: 0 !important;
    width: auto !important;
  }
  #top #topics article:last-of-type {
    border-bottom: none;
  }
  #top #topics h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    color: var(--cm5) !important;
    padding: 0 !important;
    background: none !important;
  }
  #top #topics > p,
  #top #topics > p a {
    font-size: 14px !important;
    padding: 0 16px !important;
  }
  #top #topics article > p {
    font-size: 14px !important;
    color: var(--cm6) !important;
    margin-bottom: 12px !important;
    line-height: 1.6 !important;
    padding: 0 !important;
  }
  #top #topics > button {
    display: block !important;
    margin: 16px auto 0 !important;
    padding: 10px 24px !important;
    background: var(--cc1) !important;
    color: var(--cm0) !important;
    border: none !important;
    border-radius: 9999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: auto !important;
    aspect-ratio: auto !important;
  }
  #top #topics > button span {
    font-size: 14px !important;
    line-height: 1.5 !important;
    background: none !important;
    padding: 0 !important;
  }
  #top #mes {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    background: var(--cc8) !important;
  }
  #top #mes > h1 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--cm5) !important;
    margin-bottom: 12px !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    background: none !important;
    width: auto !important;
  }
  #top #mes > p {
    font-size: 14px !important;
    color: var(--cm6) !important;
    line-height: 1.8 !important;
    margin-bottom: 8px !important;
    width: auto !important;
  }
  /* PC: #features は右カラムの .feature-list で代替するため非表示 */
  #top #features {
    display: none !important;
  }

  /* ===== RIGHT SIDEBAR: #votes (Sticky Card) ===== */
  #top #votes {
    grid-column: 3 !important;
    grid-row: 1;
    width: auto !important;
    max-width: none !important;
    position: sticky !important;
    top: 66px;
    align-self: start;
    margin: 8px !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    overflow-y: auto;
    max-height: calc(100vh - 66px - 16px);
  }
  #top #votes::-webkit-scrollbar { width: 6px; }
  #top #votes::-webkit-scrollbar-track { background: transparent; }
  #top #votes::-webkit-scrollbar-thumb { background: var(--cm4); border-radius: 3px; }
  #top #votes::-webkit-scrollbar-thumb:hover { background: var(--cm6); }
  #top #votes { scrollbar-width: thin; scrollbar-color: var(--cm4) transparent; }
  #top #votes h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    padding: 0 0 8px !important;
    background: none !important;
    color: var(--cm5) !important;
    width: auto !important;
    margin: 0 !important;
  }
  #top #votes .sidebar-card {
    background: var(--cc8) !important;
    border: 1px solid var(--cm4) !important;
    border-radius: 16px !important;
    padding: 12px 16px 16px !important;
    margin-bottom: 12px;
  }
  #top #votes .category-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  #top #votes .category-list li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--cm4) !important;
    display: block !important;
    font-size: 13px !important;
    color: var(--cm6) !important;
    margin: 0 !important;
  }
  #top #votes .category-list li:last-child {
    border-bottom: none !important;
  }
  #top #votes .category-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--cm5) !important;
    display: block !important;
    text-decoration: none !important;
  }
  #top #votes .category-title:hover {
    text-decoration: underline !important;
  }
  #top #votes .feature-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
  }
  #top #votes .feature-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--cm4) !important;
  }
  #top #votes .feature-list li:last-child {
    border-bottom: none !important;
  }
  #top #votes .feature-list img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
  }
  #top #votes .feature-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--cm5) !important;
    display: block !important;
  }
  #top #votes .feature-desc {
    font-size: 12px !important;
    color: var(--cm6) !important;
    line-height: 1.5 !important;
    display: block !important;
  }
  #top #votes .sidebar-footer {
    font-size: 12px !important;
    color: var(--cm6) !important;
    line-height: 1.8 !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--cm4) !important;
  }
  #top #votes .sidebar-footer a {
    color: var(--cm6) !important;
    text-decoration: none !important;
    margin-right: 8px !important;
    display: inline-block !important;
  }
  #top #votes .sidebar-footer small {
    display: block !important;
    margin-top: 4px !important;
  }

  /* === PC: Swiper調整 === */
  #top .swiper-slide figure img {
    max-height: 260px !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
  }
  #top .swiper-slide figcaption {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* === PC: グリッド左カラム境界線を全高延長 === */
  #top > #site-grid {
    position: relative;
  }
  #top > #site-grid::before {
    content: '';
    position: absolute;
    left: 220px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--cm4);
    pointer-events: none;
    z-index: 0;
  }
}

/* ================================================
   TOP PAGE — モバイル (max-width: 1023px)
   ================================================ */
@media (max-width: 1023px) {

  /* ガワ: 全要素フルワイド */
  #top,
  #top header,
  #top main,
  #top footer {
    width: 100% !important;
    max-width: 100% !important;
  }
  #top > header {
    height: 53px !important;
    background: linear-gradient(to right, var(--cm5), var(--cc1)) !important;
    border-bottom: 1px solid var(--cm4);
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    margin: 0 !important;
    position: sticky;
    top: 0;
    z-index: 11;
  }
  #top > header p {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: inline-block !important;
  }
  #top > header img {
    width: 80px !important;
    height: auto !important;
  }
  /* フッター表示 */
  #top footer {
    display: block !important;
    height: auto !important;
    background: var(--cm0) !important;
    padding: 16px !important;
    border-top: 1px solid var(--cm4);
    text-align: center;
  }
  #top footer > p { margin-bottom: 8px !important; }
  #top footer ul {
    font-size: 13px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
  }
  #top footer ul li a { color: var(--cm6) !important; text-decoration: none !important; }
  #top footer credit { font-size: 13px !important; color: var(--cm6) !important; }
  /* 右サイドバー非表示 */
  #top #votes {
    display: none !important;
  }
  #top main {
    margin: 0 !important;
    padding: 0 !important;
  }
  #top #kv,
  #top #topics,
  #top #mes {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #top #kv { padding: 0 !important; }
  #top #kv img { width: 100% !important; height: auto !important; display: block !important; }
  /* Swiper を親要素内に収める（左右余白） */
  #top #topics .swiper {
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }
  /* Swiper nav ボタン: モバイルでは非表示 */
  #top .swiper-button-prev,
  #top .swiper-button-next {
    display: none !important;
  }
  /* モバイル: pagination→罫線→10px
     height:fit-content でswiperコンテナを内容にフィットさせる */
  #top .swiper {
    display: flex !important;
    flex-direction: column !important;
    height: fit-content !important;
    max-height: fit-content !important;
    min-height: 0 !important;
    margin: 0 0 10px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid var(--cm3) !important;
  }
  #top .swiper-wrapper {
    flex-shrink: 0 !important;
    height: auto !important;
  }
  #top .swiper-slide .votes {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 12px !important;
  }
  #top .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    text-align: left !important;
    padding: 6px 0 10px !important;
    border-bottom: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  /* article間の巨大padding-topを上書き（swiperのmargin-bottom:10pxで制御） */
  #top #topics article + article {
    padding-top: 25px !important;
  }

  /* ===== 静的ページ共通（モバイル）=====
     articles/detail の SP サイズに完全一致させる:
       p / 本文      = 16px
       h3           = 18px
       h4           = 16px
     info-list は1カラム縦積みに変更。 */
  #top #topics.static-page .static-body {
    font-size: 16px !important;
    line-height: 26px !important;
  }
  #top #topics.static-page .static-body h3 {
    font-size: 18px !important;
    line-height: 24px !important;
    margin: 24px 0 8px 0 !important;
    padding-bottom: 8px !important;
  }
  #top #topics.static-page .static-body h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    margin: 18px 0 6px 0 !important;
  }
  #top #topics.static-page .static-body p {
    margin-bottom: 12px !important;
    line-height: 26px !important;
  }
  #top #topics.static-page .static-body ul,
  #top #topics.static-page .static-body ol {
    line-height: 26px !important;
    margin-bottom: 16px !important;
  }
  #top #topics.static-page .static-body ul li,
  #top #topics.static-page .static-body ol li {
    margin-bottom: 6px !important;
  }
  #top #topics.static-page .static-body .info-list {
    display: block !important;
    border-top: 1px solid var(--cm4) !important;
    margin-bottom: 20px !important;
  }
  #top #topics.static-page .static-body h3 + .info-list {
    border-top: none !important;
  }
  #top #topics.static-page .static-body .info-list dt {
    border-bottom: none !important;
    padding: 12px 0 2px 0 !important;
    font-size: 14px !important;
  }
  #top #topics.static-page .static-body .info-list dd {
    padding: 0 0 12px 0 !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }
  /* 番号付きリスト（モバイル）*/
  #top #topics.static-page .static-body .card-list {
    margin-bottom: 20px !important;
  }
  #top #topics.static-page .static-body h3 + .card-list li:first-child {
    border-top: none !important;
  }
  #top #topics.static-page .static-body .card-list li {
    padding: 14px 0 14px 44px !important;
    line-height: 24px !important;
    font-size: 16px !important;
  }
  #top #topics.static-page .static-body .card-list li::before {
    top: 12px !important;
    font-size: 24px !important;
  }
  #top #topics.static-page .static-body .card-list li strong {
    font-size: 16px !important;
    margin-bottom: 2px !important;
  }
  /* カテゴリヘッダー: h2 と戻るボタンを同一行で右寄せ（モバイル時は左右5%余白・ボタンはCategoriesラベル行に揃える） */
  #top #topics .category-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 0 5% !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
  }
  #top #topics .category-header h2 {
    margin-bottom: 0 !important;
  }
  #top #topics .category-header .btn-back-all {
    flex-shrink: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    padding: 10px 20px !important;
    background: var(--cm0) !important;
    color: var(--cm5) !important;
    border: 1px solid var(--cm4) !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .2s, color .2s !important;
  }
  #top #topics .category-header .btn-back-all:hover {
    background: var(--cc1) !important;
    color: var(--cm0) !important;
    border-color: var(--cc1) !important;
  }
  /* 一覧はこちらボタン: モバイル時は上下余白3倍 */
  #top #topics button {
    width: 63% !important;
    aspect-ratio: 235/42 !important;
    border-radius: calc(var(--cqw) * 6) !important;
    margin: calc(var(--cqw) * 75) auto calc(var(--cqw) * 75) auto !important;
  }
  #top #topics button span {
    font-size: calc(var(--cqw) * 22) !important;
    line-height: calc(var(--cqw) * 31) !important;
  }
  /* /articles/index.php 専用: h2 上余白を半分に（#kv が無いページ = topics が main-inner の最初の子） */
  #top .main-inner > #topics:first-child {
    padding-top: calc(var(--cqw) * 50) !important;
  }
}