/* [新機能] 2026-10：スマホ用の見た目
   画面の幅が 760px 以下のときだけ使う。PC の見た目は変えない。
   左の目次・右の最新の50件・上のタブ（本文/ノート/ソース/差分）は、
   画面の下のメニューから引き出して見る。色は PC と同じ */

/* PC と印刷では下のメニューを出さない */
#m-bar, #m-shade { display: none; }

@media screen and (max-width: 760px) {

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
	font: 13px sans-serif;
	background-size: auto 90px;
	padding-bottom: calc(58px + env(safe-area-inset-bottom));
}
body.m-open { overflow: hidden; }

#globalWrapper { font-size: 100%; }

/* ---------- 上：ロゴだけの帯 ---------- */
#logo a {
	position: absolute;
	top: 0;
	left: 8px;
	width: 130px;
	height: 64px;
	background-size: contain;
	background-position: 0 50%;
}

#mainColumnWrapper { float: none; }
#main-column {
	margin: 0 !important;
	padding-top: 64px;
	line-height: 1.7;
}

/* ---------- 本文 ---------- */
#content {
	font-size: 16px;
	border: none;
	border-top: 2px solid #fabd23;
	padding: 0 14px 16px;
	overflow: visible;
}
#content h1.firstHeading { font-size: 22px; padding-top: 14px; line-height: 1.3; }
#content h2 { font-size: 19px; }
#content h3 { font-size: 17px; }
#content p { line-height: 1.75; }
#content li { line-height: 1.7; margin-bottom: .2em; }
#content ul, #content ol { margin-left: 1.2em; }
#content blockquote { margin-left: 12px; }
#contentSub { margin: 8px 0 12px; }
/* 上の広告（横 728px）は、スマホのときはサーバー側でページに入れていない（monobook.skin.php）。
   CSS で隠すのは AdSense の決まりに反するのでしない。
   スマホ以外（PC のウィンドウを細くしたときなど）で出たときは、広告の所だけ横に動かせるようにする */
#contentSub { max-width: 100%; overflow-x: auto; }

/* 画像・表・枠は画面の幅に収める。横に長い表は表だけ横に動かす */
#content img { max-width: 100%; height: auto; }
#content div.ie5,
#content .style_table_wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#content table { max-width: none; }
/* 列が細くつぶれて 1 文字ずつ折り返さないように */
#content td, #content th { min-width: 6.5em; }
#content pre { white-space: pre-wrap; word-break: break-all; }
#content iframe, #content embed, #content object, #content video { max-width: 100%; }
#content table[width="637"] { width: 100% !important; height: auto !important; }
#content input[type="text"], #content textarea { max-width: 100%; box-sizing: border-box; font-size: 16px; }

/* 文中の [ ] で始まる字下げを少し浅く */
#content div[style*="padding-left"] { padding-left: 1em !important; }

/* ---------- 掲示板：字下げを浅くして、右にも余白 ---------- */
#bbs .bbs_thread { width: auto; padding: 4px 0 2px; }
#bbs .bbs_comment_head { margin-left: 10px; margin-right: 10px; }
#bbs .bbs_comment { margin-left: 1.6em; margin-right: 1em; padding-right: 0; line-height: 1.75; }
#bbs .bbs_res_form, #bbs .bbs_threadfoot { margin-left: 10px; margin-right: 10px; width: auto; }
#bbs #bbs_headline, #bbs #bbs_newThread_form { width: auto; box-sizing: border-box; }

/* ---------- 下：メニュー ---------- */
#m-bar {
	display: flex;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: #372828;
	border-top: 2px solid #fabd23;
	padding-bottom: env(safe-area-inset-bottom);
}
#m-bar button {
	flex: 1;
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: none;
	color: #ffdc68;
	font: 11px sans-serif;
	height: 56px;
	padding: 6px 0 4px;
	line-height: 1.2;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
#m-bar button svg {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 3px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#m-bar button[aria-pressed="true"] { background: #fabd23; color: #000; }

#m-shade {
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	z-index: 40;
	background: rgba(0, 0, 0, .55);
}
body.m-open #m-shade { display: block; }

/* ---------- 引き出す板（目次・検索・最新・ページ） ---------- */
#menubar, #sidebar, #navigator {
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(58px + env(safe-area-inset-bottom));
	z-index: 50;
	width: auto;
	max-height: 72vh;
	margin: 0 !important;
	float: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background: #000;
	border-top: 2px solid #fabd23;
	border-radius: 12px 12px 0 0;
	padding: 6px 14px 14px;
	box-sizing: border-box;
	font-size: 16px;
	visibility: hidden;
	transform: translateY(105%);
	transition: transform .2s ease-out, visibility 0s linear .2s;
}
body.m-open-menu #menubar,
body.m-open-search #menubar,
body.m-open-recent #sidebar,
body.m-open-page #navigator {
	visibility: visible;
	transform: none;
	transition: transform .2s ease-out;
}
br.clear { display: none; }

/* 目次：箱の枠をやめて、指で押しやすい間隔に */
#menubar h2, #menubar h3, #menubar h4, #menubar h5,
#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5 {
	display: block;
	font-size: 15px;
	font-weight: bold;
	color: #fff;
	padding: 10px 0 4px;
	border: none;
}
#menubar div.menubox,
#sidebar div.menubox,
#sidebar div.monobook_recent {
	font-size: 16px;
	border: none;
	padding: 0;
	margin: 0;
}
#menubar ul, #sidebar ul { font-size: 16px; line-height: 1.4; }
#menubar li, #sidebar li { padding: 5px 0; }
#menubar ul ul { margin-left: .4em; }
#sidebar div.monobook_recent strong { display: block; color: #aaa; font-size: 13px; padding-top: 8px; }

/* 目次の板では検索を隠し、検索の板では検索だけを出す */
body.m-mode-menu #menubar > h4:first-child,
body.m-mode-menu #menubar > .monobook_search { display: none; }
body.m-mode-search #menubar > * { display: none; }
body.m-mode-search #menubar > .monobook_search { display: block; padding-top: 8px; }

#menubar .monobook_search .searchInput {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 6px;
	border: 1px solid #aaa;
}
#menubar .monobook_search label { display: none; }
#menubar .monobook_search .searchButton {
	width: 100%;
	font-size: 16px;
	padding: 10px;
	border-radius: 6px;
	border: none;
	background: #fabd23;
	color: #000;
	font-weight: bold;
}

/* ページ：本文・ノート・ソース・差分を大きなボタンで */
#navigator ul {
	margin: 8px 0 0;
	white-space: normal;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	font-size: 16px;
}
#navigator ul li,
#navigator ul li.selected {
	display: block;
	margin: 0 !important;
	padding: 0;
	border: 1px solid #aaa;
	border-radius: 8px;
	overflow: hidden;
}
#navigator ul li a,
#navigator ul li span.noexists,
#navigator ul li.selected a,
#navigator ul li.selected span.noexists {
	display: block;
	text-align: center;
	padding: 14px 4px;
}
#navigator ul li.selected { border-color: #fabd23; }
#navigator ul li.selected a { background: #fabd23; color: #000; }

/* ---------- 下の帯 ---------- */
#footer { margin-bottom: 0; }
#footer #f-officialico, #footer #f-officialdevico { display: none; }
#footer li { display: block; margin: 0; }

}