/* ============================================================
   mygear-theme-base.css — MY GEAR テーマのときの「土台」の見た目
   ------------------------------------------------------------
   これまでは Cocoon（テーマ）が、ページ全体の文字の大きさ・行の高さ・
   リンクの色・入力欄の形などの「土台」を受け持っていた。
   MY GEAR テーマ（中身が空のテーマ）に切り替えるとそれが無くなるため、
   MY GEAR の画面に実際に効いていた Cocoon の指定だけを、ここに写してある。

   ・本番サイト（Cocoon 2.9.3.1）の24ページで、MY GEAR の部分に当たっていた指定を
     機械で抜き出したもの。値は変えていない。順番も Cocoon と同じ。
   ・Cocoon と同じく、MY GEAR の CSS（parts/*.css と mygear-template.css）の後に読む。
   ・MY GEAR テーマが有効なときだけ読み込む（Cocoon のときは読まない）。
   ・印刷用の指定、Cocoon 独自のブロック（吹き出し・ボタン等）の指定、
     Cocoon のアクセス集計の指定は写していない。
   ============================================================ */

/* ---- 変数（下の指定で使うものだけ） ---- */
:root {
	--cocoon-default-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--cocoon-text-color: #333;
	--cocoon-default-text-size: 18px;
	--cocoon-text-size-s: 0.8em;
	--cocoon-basic-border-color: #ccc;
	--cocoon-basic-border-radius: 4px;
	--cocoon-three-d-border-colors: #e3e3e3 #cecece #b4b4b4 #d6d6d6;
	--cocoon-thin-color: #ddd;
	--cocoon-xx-thin-color: #f5f6f7;
	--cocoon-xxx-thin-color: #fafbfc;
	--cocoon-current-background-color: #eee;
	--cocoon-white-color: #ffffff;
}

/* ---- 入力欄 ---- */
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { padding: 11px; border: 1px solid var(--cocoon-basic-border-color); border-radius: var(--cocoon-basic-border-radius); font-size: inherit; width: 100%; }

/* ---- 文字の大きさ・太さ（body に付くクラス） ---- */
.fz-18px { font-size: 18px; }
.fw-400 { font-weight: 400; }

/* ---- 全体の初期化 ---- */
* { padding: 0px; margin: 0px; box-sizing: border-box; overflow-wrap: break-word; }
body { font-family: var(--cocoon-default-font); font-size: var(--cocoon-default-text-size); color: var(--cocoon-text-color); line-height: 1.8; margin: 0px; overflow-wrap: break-word; background-color: rgb(244, 245, 247); text-size-adjust: 100%; background-attachment: fixed; }
a { color: rgb(25, 103, 210); }
a:hover { color: rgb(229, 57, 0); }
ol, ul { padding-left: 40px; }
ul { list-style-type: disc; }
ul ul { list-style-type: revert; }
hr { color: var(--cocoon-current-background-color); }
.cf::after { clear: both; content: ""; display: block; }

/* ---- ページの枠（テンプレートが出す #content / .wrap / .main） ---- */
.main { background-color: var(--cocoon-white-color); }
.wrap { width: 1256px; margin: 0px auto; }
.content-in { display: flex; justify-content: space-between; flex-wrap: wrap; }
.main { width: 860px; padding: 36px 29px; border: 1px solid transparent; border-radius: var(--cocoon-basic-border-radius); position: relative; z-index: 0; }
.no-scrollable-main .main { height: 100%; }
label { cursor: pointer; }
figure { margin: 0px; }
img { max-width: 100%; height: auto; vertical-align: middle; }
.content { margin-top: 24px; }
pre { line-height: 1.6; overflow-wrap: normal; }

/* ---- 表・引用（固定ページの本文など） ---- */
table { margin-bottom: 20px; max-width: 100%; width: 100%; border-collapse: collapse; border-spacing: 0px; }
table th, table td { position: relative; padding: 0.5em; }
table th { background-color: var(--cocoon-xx-thin-color); }
table tr:nth-of-type(2n+1) { background-color: var(--cocoon-xxx-thin-color); }
blockquote { background-color: var(--cocoon-xxx-thin-color); border: 1px solid var(--cocoon-thin-color); padding: 1.4em 1.8em; position: relative; }
blockquote::before, blockquote::after { color: rgb(200, 200, 200); font-family: serif; position: absolute; font-size: 300%; }
blockquote::before { content: "“"; line-height: 1.1; left: 10px; top: 0px; }
blockquote::after { content: "”"; line-height: 0; right: 10px; bottom: 0px; }
blockquote cite { font-size: 0.7em; }

/* ---- 目次（固定ページ。inc/theme-mode.php の mygear_doc_toc() が出す） ---- */
.toc { border: 1px solid var(--cocoon-basic-border-color); font-size: 0.9em; padding: 1em 1.6em; display: table; }
.toc .toc-list { padding-left: 1em; margin-bottom: 0px; }
.toc li { margin: 0px; }
.toc a { color: var(--cocoon-text-color); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc-title { font-size: 1.1em; text-align: center; display: block; padding: 2px 16px; }
.toc-center { margin: 1em auto; }

figcaption { margin: 0px; font-size: 0.7em; opacity: 0.8; padding: 0px 6px; }

/* ---- ページ送り（WordPress の paginate_links が出す） ---- */
.page-numbers { color: var(--cocoon-text-color); text-decoration: none; display: inline-block; height: 46px; width: 46px; border: 1px solid var(--cocoon-thin-color); margin: 0px 4px; line-height: 44px; text-align: center; border-radius: var(--cocoon-basic-border-radius); font-size: 16px; }
.page-numbers span { line-height: inherit; }
.page-numbers.dots { opacity: 0.6; background-color: var(--cocoon-xx-thin-color); }

canvas, iframe, video { max-width: 100%; }
input[type="search"] { width: auto; flex-grow: 1; }
option { padding: 12px; }
input[type="submit"] { padding: 11px; width: 100%; margin: 0px; cursor: pointer; }
input[type="submit"] { appearance: none; border: 1px solid var(--cocoon-thin-color); background-color: rgb(245, 248, 250); color: rgb(51, 51, 51); }
.page-numbers { border-color: var(--cocoon-three-d-border-colors); border-width: 1px; border-style: solid; }

@media screen and (max-width: 1023px) {
	.content-in { display: block; }
	main.main { display: block; margin: 10px; width: auto; }
}
@media screen and (max-width: 834px) {
	main.main { padding: 32px 16px; margin: 12px 0px; border-width: 0px; }
	table th, table td { padding: 3px; font-size: var(--cocoon-text-size-s); }
	textarea { min-height: 160px; }
	.content { margin-top: 10px; }
}
@media screen and (max-width: 480px) {
	h2, h3 { font-size: 20px; }
	body { font-size: 16px; }
	.page-numbers.dots { display: none; }
}
pre { background-color: var(--cocoon-xx-thin-color); border: 1px solid var(--cocoon-thin-color); overflow: auto; padding: 10px; }

/* ---- ここから下は、Cocoon がページごとに書き込んでいた指定 ---- */
.main { width: 860px; }
@media screen and (max-width: 1255px) {
	.wrap { width: auto; }
	.main { margin: 0px 0.5%; }
	.main { width: 67.4%; }
}
.toc-checkbox { display: none; }
.toc-content { visibility: hidden; height: 0px; opacity: 0.2; transition: 0.5s ease-out; }
.toc-checkbox:checked ~ .toc-content { visibility: visible; padding-top: 0.6em; height: 100%; opacity: 1; }
.toc-title::after { content: "[開く]"; margin-left: 0.5em; cursor: pointer; font-size: 0.8em; }
.toc-title:hover::after { text-decoration: underline; }
.toc-checkbox:checked + .toc-title::after { content: "[閉じる]"; }
@media screen and (max-width: 480px) {
	.body { font-size: 16px; }
}

/* ---- ここから下は MY GEAR で足したもの ---- */
/* 本文へ移動（キーボードで操作したときだけ見える） */
.mygear-skip { position: absolute; left: -9999px; top: 0; z-index: 10000; }
.mygear-skip:focus { left: 12px; top: 12px; background: #000; color: #fff; padding: 8px 14px; border-radius: 6px; text-decoration: none; }