/* =========================================================================
   Nanatetsu Modern — main.css
   なな徹デザイン踏襲 / モダン実装（Grid・カスタムプロパティ・軽量）
   クリティカルCSS（:root・ヘッダー）は header.php にインライン済み。
   ここでは本文以降のスタイルを定義する。
   ========================================================================= */

/* ----- ベース補完 ----- */
.screen-reader-text{
	position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
	clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px}

.site-main{display:block;padding-block:20px 48px}

/* ----- セクション共通 ----- */
.section{margin-block:0 28px}
.section__head{
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;margin-bottom:14px;
	border-left:6px solid var(--c-primary);padding-left:12px;
}
.section__title{
	margin:0;font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--c-ink);
}
.section__title--center{
	text-align:center;border:0;padding:0;margin:0 0 16px;
	position:relative;
}
.section__title--center::after{
	content:"";display:block;width:48px;height:4px;border-radius:2px;
	background:var(--c-primary);margin:8px auto 0;
}
.section__more{
	font-size:13px;font-weight:700;color:var(--c-muted);white-space:nowrap;flex:none;
}
.section__more span{color:var(--c-primary);margin-left:2px}

/* パネル（白背景の囲み） */
.panel{
	background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);
	padding:22px;
}
.panel__note{margin:16px 0 0;font-size:12px;color:var(--c-muted)}

/* ----- グリッド ----- */
.grid{display:grid;gap:16px}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.grid--cards-4{grid-template-columns:repeat(4,1fr)}
.grid--cards-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){
	.grid--cards-4{grid-template-columns:repeat(2,1fr)}
	.grid--cards-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
	.grid--cards-4,.grid--cards-3,.grid--cards{grid-template-columns:repeat(2,1fr);gap:12px}
}

/* ----- 記事カード ----- */
.card{
	background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);
	overflow:hidden;display:flex;flex-direction:column;
	transition:box-shadow .15s ease,transform .15s ease;
}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.08);transform:translateY(-2px)}
.card__thumb{display:block;aspect-ratio:16/9;background:var(--c-surface);overflow:hidden}
.card__img{width:100%;height:100%;object-fit:cover}
.card__img--placeholder{
	display:block;width:100%;height:100%;
	background:repeating-linear-gradient(45deg,#eceef1,#eceef1 10px,#f4f5f7 10px,#f4f5f7 20px);
}
.card__body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.card__title{margin:0;font-size:14px;font-weight:700;line-height:1.5}
.card__title a{color:var(--c-ink)}
.card__title a:hover{color:var(--c-primary)}
.card__cats{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.tag{
	display:inline-block;font-size:11px;font-weight:700;line-height:1;
	padding:5px 8px;border-radius:3px;background:var(--c-surface);color:var(--c-muted);
	border:1px solid var(--c-line);
}
.tag:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary);text-decoration:none}
.card__date{font-size:11px;color:var(--c-muted)}

/* ----- 機種検索カラム ----- */
.machine-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:680px){.machine-cols{grid-template-columns:1fr}}
.machine-col__head{
	margin:0 0 12px;font-size:15px;font-weight:800;color:#fff;
	padding:8px 12px;border-radius:4px;
}
.machine-col__head--slot{background:var(--c-slot)}
.machine-col__head--pachinko{background:var(--c-pachinko)}
.machine-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.machine-list li{border-bottom:1px dashed var(--c-line)}
.machine-list a{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:10px 4px;color:var(--c-ink);font-size:13px;font-weight:600}
.machine-list a:hover{color:var(--c-primary)}
.machine-list span{font-size:11px;color:var(--c-muted);flex:none}
.more-link{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:var(--c-primary)}
.more-link--center{display:block;text-align:center;margin-top:18px}

/* ----- タブ（更新情報） ----- */
.tabs__nav{display:flex;gap:0;border-bottom:2px solid var(--c-line);margin-bottom:0}
.tabs__btn{
	appearance:none;border:0;background:transparent;cursor:pointer;
	font:inherit;font-weight:800;font-size:14px;color:var(--c-muted);
	padding:12px 20px;position:relative;
}
.tabs__btn.is-active{color:var(--c-primary)}
.tabs__btn.is-active::after{
	content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:var(--c-primary);
}
.tabs__panel{
	background:var(--c-base);border:1px solid var(--c-line);border-top:0;
	border-radius:0 0 var(--radius) var(--radius);padding:6px 16px;
}
.update-list{list-style:none;margin:0;padding:0}
.update-list li{border-bottom:1px solid var(--c-line)}
.update-list li:last-child{border-bottom:0}
.update-list a{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding:12px 0;color:var(--c-ink);font-size:13px}
.update-list a:hover{color:var(--c-primary);text-decoration:none}
.update-list b{font-weight:800}
.update-list time{margin-left:auto;font-size:12px;color:var(--c-muted);flex:none}
.badge-new{
	display:inline-block;background:var(--c-primary);color:#fff;font-size:10px;font-weight:800;
	padding:2px 6px;border-radius:3px;line-height:1.2;flex:none;
}

/* ----- ランキング（番号バッジ） ----- */
.rank-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
@media(max-width:680px){.rank-list{grid-template-columns:1fr}}
.rank-list--compact{grid-template-columns:1fr}
.rank{border-bottom:1px solid var(--c-line)}
.rank__link{display:flex;align-items:center;gap:10px;padding:10px 2px;color:var(--c-ink)}
.rank__link:hover{color:var(--c-primary);text-decoration:none}
.rank__no{
	flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
	font-size:12px;font-weight:800;background:var(--c-surface);color:var(--c-muted);
	border:1px solid var(--c-line);
}
.rank__no--1{background:#e6b422;color:#3a2a00;border-color:#e6b422}
.rank__no--2{background:#9fa4ad;color:#1c1f24;border-color:#9fa4ad}
.rank__no--3{background:#8a5226;color:#fff;border-color:#8a5226}
.rank__thumb{flex:none;width:60px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:var(--c-surface)}
.rank__img{width:100%;height:100%;object-fit:cover}
.rank__title{font-size:13px;font-weight:600;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ----- 新台導入日 ----- */
.release__date{
	display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;
	margin:18px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--c-line);
}
.release__date:first-child{margin-top:0}
.release__arrow{color:var(--c-primary);font-size:11px}
.release__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px}
@media(max-width:680px){.release__list{grid-template-columns:1fr}}
.release__list a{display:flex;align-items:center;gap:8px;padding:8px 2px;color:var(--c-ink);font-size:13px;font-weight:600}
.release__list a:hover{color:var(--c-primary);text-decoration:none}
.release__list em{font-style:normal;color:var(--c-muted);font-size:11px;margin-left:auto;flex:none}
.chip{
	display:inline-block;font-size:10px;font-weight:800;color:#fff;padding:3px 7px;border-radius:3px;flex:none;
}
.chip--slot{background:var(--c-slot)}
.chip--pachinko{background:var(--c-pachinko)}

/* ----- 2カラムレイアウト（アーカイブ・記事） ----- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
@media(max-width:980px){.layout{grid-template-columns:1fr}}
.content{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:20px}
.widget{background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);padding:16px}
.widget__title{margin:0 0 12px;font-size:15px;font-weight:800;border-left:5px solid var(--c-primary);padding-left:10px}

/* ----- パンくず ----- */
.breadcrumb{margin:0 0 16px;font-size:12px;color:var(--c-muted)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumb li::after{content:"›";margin-left:6px;color:var(--c-line)}
.breadcrumb li:last-child::after{content:""}

/* ----- アーカイブヘッダー ----- */
.archive-head{margin-bottom:18px}
.archive-title{margin:0;font-size:22px;font-weight:800;border-left:6px solid var(--c-primary);padding-left:12px}
.archive-desc{margin:8px 0 0;color:var(--c-muted);font-size:13px}

/* ----- 記事本文 ----- */
.single{background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);padding:22px}
@media(max-width:560px){.single{padding:16px}}
.single__head{margin-bottom:16px}
.single__title{margin:8px 0 10px;font-size:24px;font-weight:800;line-height:1.4}
@media(max-width:560px){.single__title{font-size:20px}}
.single__date{font-size:12px;color:var(--c-muted)}
.single__eyecatch{margin:0 0 20px}
.single__eyecatch img{width:100%;border-radius:var(--radius)}
.single__body{font-size:15px;line-height:1.9}
.single__body h2{font-size:20px;font-weight:800;margin:32px 0 14px;padding:8px 12px;border-left:6px solid var(--c-primary);background:var(--c-surface);border-radius:0 4px 4px 0}
.single__body h3{font-size:17px;font-weight:800;margin:26px 0 12px;padding-bottom:6px;border-bottom:2px solid var(--c-line)}
.single__body p{margin:0 0 1.2em}
.single__body img{height:auto;border-radius:4px;margin:8px 0}
.single__body a{text-decoration:underline}
.single__body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.single__body th,.single__body td{border:1px solid var(--c-line);padding:8px 10px;text-align:left}
.single__body th{background:var(--c-surface)}
.single__body blockquote{margin:16px 0;padding:12px 16px;border-left:4px solid var(--c-line);background:var(--c-surface);color:#444}
.single__foot{margin-top:24px;padding-top:16px;border-top:1px solid var(--c-line)}
.tag-cloud a{display:inline-block;margin:0 6px 6px 0;font-size:12px;color:var(--c-muted)}

/* ----- ページネーション ----- */
.pagination,.page-links{margin:28px 0 0;display:flex;justify-content:center}
.pagination .nav-links,.page-links{display:flex;flex-wrap:wrap;gap:6px}
.page-numbers{
	display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;
	background:var(--c-base);border:1px solid var(--c-line);border-radius:4px;
	font-size:14px;font-weight:700;color:var(--c-ink);
}
.page-numbers.current{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.page-numbers:hover:not(.current){border-color:var(--c-primary);color:var(--c-primary);text-decoration:none}

/* ----- 検索フォーム ----- */
.searchform{display:flex;gap:0;max-width:420px}
.searchform input{flex:1;border:1px solid var(--c-line);border-right:0;border-radius:4px 0 0 4px;padding:10px 12px;font:inherit;font-size:14px}
.searchform button{border:0;background:var(--c-primary);color:#fff;padding:0 18px;border-radius:0 4px 4px 0;font-weight:700;cursor:pointer}

/* ----- 共通ボタン / 空状態 / 404 ----- */
.btn{display:inline-block;background:var(--c-primary);color:#fff;font-weight:700;padding:11px 24px;border-radius:5px}
.btn:hover{background:var(--c-primary-dark);text-decoration:none}
.empty{grid-column:1/-1;background:var(--c-base);border:1px dashed var(--c-line);border-radius:var(--radius);padding:24px;color:var(--c-muted);font-size:14px;text-align:center}
.empty code{background:var(--c-surface);padding:2px 6px;border-radius:3px;font-size:12px}
.error-404{text-align:center;padding:48px 16px;background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius)}
.error-404__code{font-size:64px;font-weight:900;color:var(--c-primary);margin:0;line-height:1}
.error-404__title{font-size:22px;margin:8px 0}
.error-404__lead{color:var(--c-muted);margin:0 0 20px}
.error-404__search{margin-top:24px;display:flex;justify-content:center}

/* ----- フッター ----- */
.site-footer{background:var(--c-header);color:#cfcfcf;margin-top:40px;padding:32px 0 28px}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #3a3a3a}
.footer-brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;font-size:18px}
.footer-brand:hover{text-decoration:none;opacity:.9}
.footer-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0}
.footer-nav a{color:#cfcfcf;font-size:13px}
.footer-nav a:hover{color:#fff}
.footer-copy{margin:18px 0 0;font-size:12px;color:#9a9a9a;text-align:center}

/* ----- トップへ戻る ----- */
.to-top{
	position:fixed;right:16px;bottom:16px;width:44px;height:44px;border:0;border-radius:50%;
	background:var(--c-primary);color:#fff;font-size:14px;cursor:pointer;z-index:90;
	box-shadow:0 4px 12px rgba(0,0,0,.25);opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;
}
.to-top.is-visible{opacity:1;transform:translateY(0)}
.to-top:hover{background:var(--c-primary-dark)}

/* ----- モーション配慮 ----- */
@media(prefers-reduced-motion:reduce){
	*{animation-duration:.001ms!important;transition-duration:.001ms!important}
	.card:hover{transform:none}
}

/* =========================================================================
   なな徹(kaiseki) — 機種ハブ用コンポーネント
   ========================================================================= */

/* タブパネル（枠なしバリエーション：厳選/50音/ランキング/導入日用） */
.tabs__panel--plain{background:transparent;border:0;padding:0;margin-top:16px}

/* 機種グリッド */
.mgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.mgrid--rank{grid-template-columns:repeat(5,1fr)}
.mgrid--guide{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.mgrid,.mgrid--rank,.mgrid--guide{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.mgrid,.mgrid--rank,.mgrid--guide{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.mgrid,.mgrid--rank,.mgrid--guide{grid-template-columns:repeat(2,1fr);gap:10px}}

/* 機種カード */
.mcard{display:flex;flex-direction:column;background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;color:var(--c-ink);transition:box-shadow .15s,transform .15s}
.mcard:hover{box-shadow:0 6px 16px rgba(0,0,0,.1);transform:translateY(-2px);text-decoration:none}
.mcard__thumb{position:relative;display:block;aspect-ratio:16/9;background:var(--c-surface);overflow:hidden}
.mcard__img{width:100%;height:100%;object-fit:cover}
.mcard__img--ph{display:block;width:100%;height:100%;background:repeating-linear-gradient(45deg,#e9ebee,#e9ebee 8px,#f4f5f7 8px,#f4f5f7 16px)}
.mcard--slot .mcard__thumb{border-top:3px solid var(--c-slot)}
.mcard--pachinko .mcard__thumb{border-top:3px solid var(--c-pachinko)}
.mcard__body{padding:8px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.mcard__name{font-size:12px;font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mcard__maker{font-size:11px;color:var(--c-muted)}
.mcard__rank{position:absolute;top:0;left:0;background:var(--c-ink);color:#fff;font-size:11px;font-weight:800;padding:3px 8px;border-radius:0 0 6px 0}
.mcard__rank--1{background:#e6b422;color:#3a2a00}.mcard__rank--2{background:#9fa4ad;color:#1c1f24}.mcard__rank--3{background:#8a5226;color:#fff}

/* 厳選フィーチャー枠（先頭の大きい説明付きカード：2列分） */
.feature-machine{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;background:var(--c-base);border:2px solid var(--c-primary);border-radius:var(--radius);overflow:hidden;color:var(--c-ink)}
.feature-machine:hover{text-decoration:none;box-shadow:0 8px 20px rgba(195,13,35,.15)}
.feature-machine__thumb{aspect-ratio:16/9;background:var(--c-surface);overflow:hidden}
.feature-machine__img{width:100%;height:100%;object-fit:cover}
.feature-machine__body{padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.feature-machine__name{font-size:16px;font-weight:800;line-height:1.4}
.feature-machine__desc{font-size:12px;color:#444;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:760px){.feature-machine{grid-column:span 3}}
@media(max-width:480px){.feature-machine{grid-column:span 2;grid-row:auto}.feature-machine__desc{-webkit-line-clamp:3}}

/* 50音インデックス */
.kana{display:flex;flex-direction:column;gap:6px}
.kana__row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.kana__cell{display:grid;place-items:center;height:42px;background:var(--c-base);border:1px solid var(--c-line);border-radius:4px;font-size:16px;font-weight:700;color:var(--c-ink)}
.kana__cell:hover{background:var(--c-primary);color:#fff;border-color:var(--c-primary);text-decoration:none}
.kana__cell--empty{background:transparent;border-color:transparent;pointer-events:none}
@media(max-width:480px){.kana__cell{height:38px;font-size:15px}}

/* 機種詳細 */
.machine-single{background:var(--c-base);border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden}
.machine-single__head{padding:20px 22px;border-bottom:1px solid var(--c-line)}
.machine-single__head--slot{border-top:5px solid var(--c-slot)}
.machine-single__head--pachinko{border-top:5px solid var(--c-pachinko)}
.machine-single__type{display:inline-block;font-size:12px;font-weight:800;color:#fff;background:var(--c-ink);padding:3px 10px;border-radius:3px;margin-bottom:8px}
.machine-single__head--slot .machine-single__type{background:var(--c-slot)}
.machine-single__head--pachinko .machine-single__type{background:var(--c-pachinko)}
.machine-single__title{margin:0 0 12px;font-size:24px;font-weight:800;line-height:1.4}
@media(max-width:560px){.machine-single__title{font-size:19px}}
.machine-single__meta{display:flex;flex-wrap:wrap;gap:8px 20px}
.machine-single__meta span{font-size:13px;color:#444}
.machine-single__meta b{display:inline-block;font-size:11px;color:var(--c-muted);font-weight:700;margin-right:6px}
.machine-single__eyecatch{margin:0}
.machine-single__eyecatch img{width:100%}
.machine-single__body{padding:22px}
@media(max-width:560px){.machine-single__body{padding:16px}}