/* =========================================================
   /ac/cabinet 『スーパーリアル麻雀AC』対応筐体ページ専用スタイル
   読者はゲームセンターの店長・オーナー。「うちの筐体で動くか」「何が要るか」が
   すぐわかることを優先し、演出（フェードイン等）は付けない。
   本体サイト (top_v2.css) のトンマナに準拠:
   - 見出し: #2a5c6e / アクセント: #46baa1 / 本文: #555
   - 白半透明パネル + ティール系ボーダー
   ========================================================= */

/* --- アンカー着地位置の調整 (sticky ヘッダー対策) --- */
#ac-hero,
.ac-section {
	scroll-margin-top: 80px;
}
@media (max-width: 768px) {
	#ac-hero,
	.ac-section { scroll-margin-top: 64px; }
}

/* --- ヘッダー調整（サブページ用・/assets と同じ考え方） --- */
#gheader nav { margin-left: auto; }
@media (min-width: 981px) and (max-width: 1120px) {
	#gnav ul { gap: 1.1em !important; }
	#gnav a { font-size: 0.88rem !important; }
}

/* --- 共通 --- */
.page-ac main.visible-area section .inner { max-width: 960px; }

.ac-section { padding: 48px 0; }
.ac-section h2 {
	color: #2a5c6e;
	font-size: clamp(1.4rem, 4.2vw, 2rem);
}
.ac-section .sub { color: #666 !important; margin-bottom: 1.6em; }
.ac-section h3 {
	margin: 1.8em 0 0.8em;
	color: #2a5c6e;
	font-size: 1.1rem;
	font-weight: 600;
	text-align: left;
}

/* セクション番号（01〜05） */
.ac-num {
	margin: 0 0 0.4em;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	color: #46baa1 !important;
	line-height: 1 !important;
}

.page-ac main p,
.page-ac main li,
.page-ac main dt,
.page-ac main dd,
.page-ac main th,
.page-ac main td {
	line-height: 1.9;
}
.page-ac main p { margin: 0 0 1em; color: #555; }
.page-ac main p:last-child { margin-bottom: 0; }
.page-ac main strong { color: #2a5c6e; }

.ac-text { text-align: center; }
@media (max-width: 768px) {
	.ac-text { text-align: left; }
}

/* 白半透明パネル */
.ac-panel {
	margin: 0 auto;
	padding: 1.8em 2.2em;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(70, 186, 161, 0.25);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(42, 141, 118, 0.08);
	font-size: 0.98rem;
}
@media (max-width: 768px) {
	.ac-panel { padding: 1.3em 1.2em; font-size: 0.94rem; }
}

/* スクリーンリーダー用テキスト */
.ac-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --- ヒーロー --- */
#ac-hero {
	padding: clamp(40px, 6vw, 72px) 0 24px;
}
.ac-eyebrow {
	margin: 0 0 0.8em !important;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.24em;
	color: #46baa1 !important;
}
#ac-hero h1 {
	margin: 0 0 0.6em;
	text-align: center;
	color: #2a5c6e;
	font-size: clamp(1.6rem, 5vw, 2.5rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 1.45;
}
#ac-hero h1 br.sp { display: none; }
@media (max-width: 768px) {
	#ac-hero h1 br.sp { display: inline; }
}
.ac-hero-to {
	max-width: 860px;
	margin: 0 auto 2em !important;
	text-align: center;
	font-size: 1rem;
}
@media (max-width: 768px) {
	.ac-hero-to { text-align: left; font-size: 0.94rem; }
}
.ac-lead { max-width: 860px; }

/* ひと目でわかる対応状況 */
.ac-summary {
	margin: 1.4em 0 0;
	padding: 0;
	border-top: 1px solid rgba(70, 186, 161, 0.3);
}
.ac-summary > div {
	display: grid;
	grid-template-columns: 15em 1fr;
	gap: 0.3em 1.2em;
	padding: 0.9em 0;
	border-bottom: 1px solid rgba(70, 186, 161, 0.3);
}
.ac-summary dt {
	/* master.css の dt（黄色の角丸ラベル）を打ち消す */
	display: block;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #2a5c6e;
}
.ac-summary dd {
	margin: 0;
	font-weight: 600;
	color: #333;
}
.ac-summary dd a {
	color: #333;
	text-decoration: underline;
	text-decoration-color: rgba(70, 186, 161, 0.6);
	text-underline-offset: 0.25em;
}
.ac-summary dd a:hover { color: #2a8d76; opacity: 1; }
.ac-summary-note {
	display: block;
	font-size: 0.82rem;
	font-weight: 500;
	color: #666;
}
@media (max-width: 768px) {
	.ac-summary > div { grid-template-columns: 1fr; }
}

/* --- 01 システム基板を設置できる筐体 --- */
.ac-cab-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.4em;
	margin: 1.8em 0 0;
	padding: 0;
	list-style: none;
}
.ac-cab {
	width: calc((100% - 2.8em) / 3);
	margin: 0;
	background: #fff;
	border: 1px solid rgba(70, 186, 161, 0.25);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(42, 141, 118, 0.08);
}
@media (max-width: 768px) {
	.ac-cab-grid { gap: 0.9em; }
	.ac-cab { width: calc((100% - 0.9em) / 2); }
}
/* exA-Arcadia のアイコン（1024x1024）は全体を表示し、
   焼き込まれた赤帯（y=603〜799px ＝ 58.9%〜78.1%）の上にページ側の名前帯を重ねる。
   帯の縁のにじみが見えないよう、上下に少しはみ出させている */
.ac-cab-img {
	position: relative;
	container-type: inline-size;
	background: #f2f2f2;
}
.ac-cab-img img {
	display: block;
	width: 100%;
	height: auto;
}
.ac-cab-name {
	position: absolute;
	left: 0;
	right: 0;
	top: 58.5%;
	height: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 0 0.5em;
	background: #2a5c6e;
	text-align: center;
	font-size: 1.1rem;
	font-size: clamp(0.85rem, 6.4cqw, 1.3rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff !important;
	line-height: 1.25 !important;
}
.ac-cab-name span {
	display: block;
	margin-top: 0.15em;
	font-size: 0.72rem;
	font-size: clamp(0.6rem, 3.8cqw, 0.8rem);
	font-weight: 500;
	letter-spacing: 0.1em;
	color: #bfe9de;
}

/* ARC-32（基板標準搭載の公式筐体） */
.ac-arc32 {
	display: flex;
	align-items: center;
	gap: 2em;
	margin: 2em 0 0;
	padding: 1.6em 2em;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(70, 186, 161, 0.45);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(42, 141, 118, 0.08);
}
.ac-arc32-img {
	flex: 0 0 auto;
	margin: 0;
}
.ac-arc32-img img {
	display: block;
	width: auto;
	height: 260px;
}
.ac-arc32-body { flex: 1 1 auto; min-width: 0; }
.ac-arc32-label {
	margin: 0 !important;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: #46baa1 !important;
}
.ac-arc32 h3 {
	margin: 0.1em 0 0.5em;
	font-size: 1.5rem;
	letter-spacing: 0.06em;
}
.ac-spec {
	margin: 1.2em 0 0;
	padding: 0;
	font-size: 0.88rem;
}
.ac-spec > div {
	display: flex;
	gap: 1em;
	padding: 0.35em 0;
	border-bottom: 1px dashed rgba(70, 186, 161, 0.35);
}
.ac-spec dt {
	display: block;
	flex: 0 0 5.5em;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	color: #2a5c6e;
	font-weight: 600;
}
.ac-spec dd { margin: 0; color: #555; }
.ac-ext { margin-top: 1em !important; font-size: 0.9rem; }
.ac-ext a,
.ac-links a {
	color: #2a5c6e;
	font-weight: 600;
}
.ac-ext a::after,
.ac-links a::after {
	content: "↗";
	margin-left: 0.3em;
	font-size: 0.85em;
}
.ac-ext a:hover,
.ac-links a:hover { color: #46baa1; opacity: 1; }
@media (max-width: 768px) {
	.ac-arc32 {
		flex-direction: column;
		align-items: stretch;
		gap: 1.2em;
		padding: 1.3em 1.2em;
	}
	.ac-arc32-img { text-align: center; }
	.ac-arc32-img img { display: inline-block; height: 220px; }
}

.ac-credit {
	margin: 1em 0 0 !important;
	text-align: right;
	font-size: 0.75rem;
	color: #999 !important;
}

/* --- 02 麻雀コンパネ --- */
/* コンパネ単体は横長なので幅いっぱい、取り付け写真は縦長なので幅を絞って中央に置く */
.ac-photos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6em;
	margin: 1.6em 0;
}
.ac-photos figure { margin: 0; width: 100%; }
.ac-photos figure.ac-photo-konpane_cabinet { max-width: 400px; }
@media (max-width: 768px) {
	.ac-photos figure.ac-photo-konpane_cabinet { max-width: 300px; }
}
.ac-photos img {
	display: block;
	width: 100%;
	height: auto;
}
.ac-photos figcaption {
	margin-top: 0.5em;
	text-align: center;
	font-size: 0.85rem;
	color: #666;
}

.ac-table-wrap { margin: 1.2em 0 1.4em; }
/* master.css の table（オレンジ枠・黄色背景）を打ち消す */
.ac-matrix {
	width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(70, 186, 161, 0.45);
	border-radius: 10px;
	overflow: hidden;
	font-size: 0.98rem;
}
.ac-matrix th,
.ac-matrix td {
	padding: 0.85em 1em;
	border: none;
	border-bottom: 1px solid rgba(70, 186, 161, 0.22);
	background: #fff;
	text-align: center;
	vertical-align: middle;
	font-weight: 500;
}
.ac-matrix tbody tr:last-child th,
.ac-matrix tbody tr:last-child td { border-bottom: none; }
.ac-matrix thead th {
	background: #2a5c6e;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.06em;
}
.ac-matrix tbody th {
	text-align: left;
	font-weight: 700;
	color: #2a5c6e;
	white-space: nowrap;
}
.ac-matrix tr.is-konpane th,
.ac-matrix tr.is-konpane td { background: #eaf7f3; }
.ac-mark {
	font-weight: 700;
	color: #2a8d76;
	white-space: nowrap;
}
.ac-mark.is-konpane { color: #c2410c; }
.ac-none { color: #b5bec4; }
@media (max-width: 480px) {
	.ac-matrix { font-size: 0.86rem; }
	.ac-matrix th,
	.ac-matrix td { padding: 0.75em 0.5em; }
}

.ac-warn {
	margin: 0 !important;
	padding: 1em 1.2em;
	background: #fff6e5;
	border-left: 4px solid #e0a33c;
	border-radius: 0 8px 8px 0;
	font-size: 0.92rem;
	color: #7a5520 !important;
}
.ac-warn strong { color: #7a5520 !important; }

/* --- 03 導入に必要なもの --- */
.ac-req {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: acreq;
}
@media (max-width: 768px) {
	.ac-req { grid-template-columns: 1fr; gap: 0.7em; }
}
.ac-req li {
	position: relative;
	margin: 0;
	padding: 1.1em 1.2em 1.1em 4em;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(70, 186, 161, 0.25);
	border-radius: 12px;
	counter-increment: acreq;
}
.ac-req li::before {
	content: counter(acreq);
	position: absolute;
	left: 1.1em;
	top: 50%;
	transform: translateY(-50%);
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: #46baa1;
	color: #fff;
	font-weight: 700;
	line-height: 2em;
	text-align: center;
}
.ac-req-name {
	display: block;
	font-weight: 700;
	color: #2a5c6e;
	font-size: 1.02rem;
}
.ac-req-note {
	display: block;
	font-size: 0.82rem;
	color: #666;
}

/* 導入済み店舗はカートリッジ差し替えだけ（導入のハードルが低いことを伝える一番強い情報） */
.ac-point {
	margin: 1.6em 0 !important;
	padding: 1.1em 1.4em;
	background: rgba(70, 186, 161, 0.12);
	border: 1px solid rgba(70, 186, 161, 0.55);
	border-radius: 12px;
	text-align: center;
	font-weight: 600;
	color: #2a5c6e !important;
}
@media (max-width: 768px) {
	.ac-point { text-align: left; }
}

.ac-links {
	margin: 0.8em 0 0;
	padding: 0;
	list-style: none;
}
.ac-links li {
	margin: 0 0 0.3em;
	padding-left: 1.1em;
	position: relative;
}
.ac-links li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.8em;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: #46baa1;
}

/* --- 04 exA-Arcadia について --- */
.ac-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6em 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 768px) {
	.ac-features { grid-template-columns: 1fr; }
}
.ac-features li {
	position: relative;
	margin: 0;
	padding: 0.2em 0 0.2em 1.7em;
	color: #333;
	font-weight: 600;
}
.ac-features li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.2em;
	color: #46baa1;
	font-weight: 700;
}
.ac-brand {
	margin-top: 1.8em !important;
	padding: 1em 1.2em;
	background: #f5f9fb;
	border-left: 4px solid #9fc0ce;
	border-radius: 0 8px 8px 0;
	font-size: 0.92rem;
}

/* --- 05 設置のご相談 --- */
.ac-contact {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.2em;
	margin: 1.6em 0 0;
}
@media (max-width: 768px) {
	.ac-contact { grid-template-columns: 1fr; }
}
.ac-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.6em 1.4em;
	background: #2a5c6e;
	border-radius: 12px;
	text-align: center;
}
.ac-contact-label {
	margin: 0 !important;
	font-size: 0.88rem;
	color: #bfe9de !important;
	letter-spacing: 0.04em;
}
.ac-contact-org {
	margin: 0.3em 0 1.1em !important;
	font-size: 1.2rem;
	font-weight: 700;
	color: #fff !important;
}
.ac-btn {
	display: inline-block;
	margin-top: auto;
	padding: 0.75em 2em;
	border-radius: 999px;
	background: linear-gradient(135deg, #46baa1, #2a8d76);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	letter-spacing: 0.06em;
	transition: opacity 0.2s, transform 0.2s;
}
.ac-btn::after { content: " ↗"; }
.ac-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* --- フッター注記 --- */
.ac-notes {
	max-width: 760px;
	margin: 0 auto 1.5em;
	text-align: left;
}
.ac-notes p {
	margin: 0 0 0.3em;
	font-size: 0.82rem;
	line-height: 1.8;
	color: #555;
	padding-left: 1em;
	text-indent: -1em;
}