@charset "utf-8";

/* --------------------------------- */
/* てがろぐ公式配布コーナー内共通CSS */
/* --------------------------------- */
/* てがろぐディレクトリ内で共通して読み込まれるCSSファイル（リリースノートも含む）
   ※にししふぁくとりー共通の common.css と deep.css が先に読み込まれている点に注意すること。
   　（それらをベースにして、必要な箇所だけ上書きする方針でスタイルを加える。）
   ※TOPページだけは、にししふぁくとりー内の .deepProducts 共通装飾が適用される点にも注意する。
   ※リリースノートには、てがろぐ系統の装飾 releasenote.css も読み込まれる。
   -------------------------------------------------------------------------------------------- */
/* Last Modified: 2024/05/31 13:45 */

/* ================== */
/* ■リリース前記述用 */
/* ================== */
.versionBox.v350 {
	display: none;
}
.supportVer.v350 {
}

/* ============== */
/* ■全体共通装飾 */
/* ============== */
body {
	margin: 0;
	padding: 0;
	background-color: white;
}
body.tegalogTop {
	background-color: #eeeeff;	/* TOPページだけは、にししふぁくとりーDeepPage共通装飾が適用されているのでそれに合わせた色指定が必要。 */
}

/* ================ */
/* ■レイアウト調整 */
/* ================ */

	/* ▼リリースノート(のみ)：大外枠 */
	.contents {
		margin: 0;
		padding: 1px 0;
		background-color: white;
	}

/* ========== */
/* ■汎用装飾 */
/* ========== */

	/* ▼URLが書かれた場合の装飾 */
	.url {
		display:inline;
		word-break:break-all;	/* 自動リンクのはみ出しを防ぐ */
	}

	/* ▼汎用取り消し */
	del { color: gray; }

	/* ▼見出し：deep.css の上書き */
	@media (min-width: 920px) {
		h4.expsubtitle {
			font-size: 1.25em;
			padding: 0.75em 0;
			line-height: 1;
			margin-top: 3em;
			border-top: 3px solid #808000;
		}
		h5.notetitle {
			padding: 0.75em 0.1em 0.65em;
			line-height: 1;
			margin-top: 2em;
			border-top: 1px solid #e5e5e5;
		}
	}
	h4.expsubtitle {
		margin-top: 3em;
	}

	/* ▼最深見出し */
	h6 {
		background-color: #fafafa;
		color: #050;
		font-weight: bold;
		font-size: 1em;
		padding: 0.2em 0.5em 0.1em 0.5em;
		margin: 1.3em 0px 0.5em 0px;
		clear: both;
		border-bottom: 1px dashed gray;
	}

	/* ▼強調の追記（※にししふぁくとりー共通の装飾が既に適用されている） */
	.important, .important2 { overflow-wrap:break-word; word-wrap:break-word; word-break:break-all; }
	.highset { color: #b00; }

/* ========================== */
/* ■ページ最上部(ヘッダ)領域 */
/* ========================== */
header {
}

	/* ▼各ページ上端のheader要素（にししふぁくとりーロゴやパンくずリストがある領域全体） */
	#deephead {
		background-color: #e0e0ff;
	}

	/* ------------------------------------------------- */
	/* ▼各ページ共通ヘッダ部分（ただしTOPページを除く） */
	/* ------------------------------------------------- */
	.tegalogheader {
		margin: 0;
		padding: 1px 0;
		background: linear-gradient(to bottom, #e0e0ff, #fff);
	}

		/* --------------------------------------------------------------------- */
		/* ▼タイトル区画（ページ上部のグラデーション区間の中身：TOP以外に適用） */
		/* --------------------------------------------------------------------- */
		.headtitle {
			margin: 0;
			padding: 2em 1em;
		}

			/* ▽メインタイトル */
			.maintitle {
				margin: 0;
				font-size: 3.6rem;
				font-weight: bold;
			}
			.maintitle a {
				color: #000;
				text-shadow: 1px 1px 1px white;
				text-decoration: none;
			}
			.maintitle a:hover {
				color: blue;
				background-color: skyblue;
				border-radius: 7px;
				text-decoration: underline;
			}

			/* ▽サブタイトル */
			.subtitle {
				display: inline-block;	/* インラインブロック化 */
				font-weight: normal;
				font-size: 2.7rem;
			}

			/* ▽タイトル下部の概要文 */
			.mainguide {
				margin: 1em 0 0 0;	/* 外側の余白量 */
				font-size: 1.1em;
			}

			/* 最終更新日 */
			.lastupdate {
				font-size: 0.9em;
				margin: 2em 0;
			}

			/* SNSボタン群 */
			.tegalogheader .socialbuttons {
				margin: 0px;
				padding: 0px;
				line-height: 1;
				text-align: right;
				background-color: transparent;
			}

		/* ----------------------------------------- */
		/* ▼ヘッダ領域：画面の横幅が480px以下の場合 */
		/* ----------------------------------------- */
		@media all and (max-width: 480px) {

			.headtitle {
				padding: 1.5em 0.5em;
			}

			.maintitle {
				font-size: 2.4rem;
				letter-spacing: -1px;
			}
			.maintitle a {
			}
			.subtitle {
				font-size: 1.5rem;		/* 文字サイズ */
				letter-spacing: -2px;
			}
			.mainguide {
				font-size: 1rem;		/* 文字サイズ */
				line-height: 1.25;		/* 行の高さ */
			}
			.mainguidenote {
				font-size: 0.8em;
				display: block;
				line-height: 1.2;
				margin: 1em 0;
			}

			.lastupdate {
				font-size: 0.7em;
				margin: 1.5em 0;
			}

		}

/* ====================== */
/* ■メインコンテンツ領域 */
/* ====================== */
.deepcontents {
}

	/* ------------------------------ */
	/* ▼グローバルナビとページ内目次 */
	/* ------------------------------ */
	.headNavi {
	}

		/* ………………………… */
		/* グローバルナビ(タブ) */
		/* ………………………… */
		.navforpages {
			margin: 0;
			padding: 0;
			list-style-type: none;
			white-space: nowrap;
			overflow: auto;
		}
		.navforpages::after {
			content: '';
			display: block;
			border-top: 1px solid black;
			position: relative;
			z-index: 1;
		}
			.navforpages li {
				display: inline-block;
			}
			.navforpages li:first-child {
				margin-left: 0.5em;
			}
				.navforpages li a {
					display: block;
					text-decoration: none;
					font-size: 0.95em;
					text-align: center;
					line-height: 1.1;

					border-width: 1px 1px 0 1px;
					border-style: solid;
					border-color: black;
					border-radius: 0.67em 0.67em 0 0;
					padding: 0.85em 0.67em 0.75em 0.67em;
					background-color: #ebebff;
					position: relative;
					top: 1px;
					z-index: 0;
				}
					.navforpages li a .mobile-only {
						font-size: 0.85em;
					}

				/* Selected Tab */
				.tegalogTop		.navforpages li a.tTop,
				.tegalogSetup	.navforpages li a.tSetup,
				.tegalogUsage	.navforpages li a.tUsage,
				.tegalogCustom	.navforpages li a.tCustom,
				.tegalogFaq		.navforpages li a.tFaq,
				.tegalogSkin	.navforpages li a.tSkin,
				.tegalogRNote	.navforpages li a.tRNote
				{
					background-color: white;
					color: black;
					z-index: 10;
				}

				/* Cursor on Tab */
				.navforpages li a:hover {
					background-color: #7575ff;
					color: white;
				}

		/* ‥‥‥‥‥‥‥‥‥‥‥‥‥ */
		/* ▼上下逆転タブ用の追加装飾 */
		.footNavi .navforpages::after {
			display: none;
		}
		.footNavi .navforpages::before {
			content: '';
			display: block;
			border-top: 1px solid black;
			position: relative;
			z-index: 1;
		}
				.footNavi .navforpages li a {
					border-width: 0 1px 1px 1px;
					border-radius: 0 0 0.67em 0.67em;
					padding: 0.75em 0.67em 0.85em 0.67em;
					top: -1px;
				}

		/* ……………… */
		/* ページ内目次 */
		/* ……………… */
		.contentsList {
			margin: 1em;
			padding: 0 1em;
			font-size: 0.9em;
			list-style-type: none;
			border-left: 5px double #7575ff;
		}

			/* コンテンツカテゴリ名 */
			.contentCategory {
				display: inline-block;
				background-color: #0a0;
				color: white;
				border-radius: 7px;
				margin: 0.25em 0;
				padding: 1px 0.5em;
			}
			a.contentCategory:link,
			a.contentCategory:visited {
				text-decoration: none;
				color: white;
			}
			a.contentCategory:hover {
				text-decoration: underline;
			}

			/* コンテンツ1階層目 */
			.contentsIndex {
				list-style-type: disc;
				margin: 0;
				padding: 0 0 0.25em 35px;
			}
				/* コンテンツ2階層目 */
				.subContentsIndex {
					list-style-type: none;
					margin: 0;
					padding: 0 0 0.25em 1em;
				}
				.subContentsIndex li {
					display: inline-block;
				}
				.subContentsIndex li::before {
					content: '▶';
				}
					/* コンテンツ3階層目 */
					.subSubContentsIndex {
						display: inline;
						list-style-type: none;
						margin: 0;
						padding: 0;
						font-size: 0.8em;
					}
					.subSubContentsIndex::before {
						content:'（';
					}
					.subSubContentsIndex::after {
						content:'）';
					}
					.subSubContentsIndex li::before {
						color: #ccc;
					}

				/* リファレンスサイン */
				.reference {
					display: inline-block;
					font-size: 0.65em;
					color: crimson;
					border: 1px solid crimson;
					line-height: 1;
					padding: 2px 3px;
					vertical-align: top;
				}

			/* コンテンツ1階層目が連続する場合の余白調節 */
			.contentsIndex + .contentsIndex {
				margin-top: -0.25em;
			}

	.helpIndexLink { text-align: center; margin: 0; }

	/* ------------------------------- */
	/* ▼グローバルナビ周囲（TOPのみ） */
	/* ------------------------------- */
	.headNavi .navonpage {
		margin-top: 0px;
		padding: 1em 0.75em;
		border-radius: 0;
	}

	/* サーバ別案内 */
	.serverlist {
		margin-top: 0;
	}
	.setupsteps{font-size:0.67em;color:gray;}

	/* -------------------------------- */
	/* 本文段組：解説ペイン＋画像ペイン */
	/* -------------------------------- */
	.widthimagecomplexbox {
		clear: both;
		display: flex;
		flex-direction: row;
		-webkit-column-gap: 1em;
		column-gap: 1em;
	}
		/* 解説段 */
		.complex-explaincolmun {
		}
		/* 画像段 */
		.complex-imagecolumn {
		}
			/* 画像1枚BOX */
			.complex-imagecolumn p {
				margin: 1em 0 0 0;
				padding: 0px;
				font-size: 0.95em;
				line-height: 1.25;
				text-align: center;
			}
				.complex-imagecolumn p a {
					display: block;
				}

	@media all and (max-width: 1023px) {
		/* 横幅1023px以下では段組にしない */
		.widthimagecomplexbox {
			display: block;
		}
			/* 画像1枚BOX */
			.complex-imagecolumn p {
				display: inline-block;	/* 段組にしない場合は横にも並ぶようにする */
			}
				.complex-imagecolumn img {
					max-width: 100%;
					height: auto;
					border-width: 0px;
				}
	}

	/* ---------------------- */
	/* 本文段組：軽い段組構成 */
	/* ---------------------- */
	.easyexpcomplex {
		display: flex;
		gap: 1rem;
	}
	@media (max-width: 599px) {
		/* 横幅599px以下では段組にしない */
		.easyexpcomplex {
			display: block;
		}
			.easyexpcomplex img {
				max-width: 100%;
				height: auto;
			}
	}

	/* ------------ */
	/* ▼本文見出し */
	/* ------------ */
	.bodyblock h3 {
		margin: 2.5em 0px 1em 0px;
		border-radius: 10px;
	}

	/* ------------ */
	/* ▼本文の囲み */
	/* ------------ */
	.explainBox {
		margin: 0px;
		padding: 0px 1em;
	}

		/* 引用枠 */
		.explainBox blockquote {
			margin: 1em 0.3em 1em 1em;
			padding: 0.75em 0.5em;
			border-left: 5px double #5c5;
			background-color: #efe;
			font-size: 1em;
		}

	/* -------------------- */
	/* ▼対応バージョン表記 */
	/* -------------------- */
	.supportVer {
		color: darkblue;
	}

	/* ▼β版での追加機能テンポラリ表記 */
	.supportBeta {
		color: darkblue;
		background-color: #eef;
		display: inline-block;
		padding: 0 0.25em 0 2.25em;
		position: relative;
	}
	p.supportBeta {
		display: block;
		background-color: #f0f0ff;
		border: 1px solid #aac;
		border-radius: 5px;
		padding: 0.5em 2.5em 0.5em;
	}

	.supportBeta::before {
		content: 'Beta';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.75em;
		background-color: darkblue;
		color: white;
		padding: 2px;
		line-height: 1;
	}

	/* 事前非表示を調整する区画 */
	.versionBox {
	}

	/* ------------------------ */
	/* ▼簡単セットアップリスト */	/* ol＋li要素で作る番号付きリスト用 */
	/* ------------------------ */
	.easysetuplist { font-size: 1.7em; padding: 0 0 0 2em; }
	.easysetuplist a,
	.easysetuplist small { display: inline-block; font-size: 1rem; vertical-align:middle; line-height: 1.1; }

	/* ------------------------ */
	/* ▼詳細ページ誘導リンク枠 */
	/* ------------------------ */
	.moveMorePage {
	}
		.moreArrow {
			display: inline-block;
			vertical-align: middle;
			font-size: 3em;
			line-height: 1;
			color: royalblue;
		}
		.moveMorePage a {
			font-size: 1.35em;
			display: inline-block;
			vertical-align: middle;
		}

	/* ------------------ */
	/* ▼簡単操作ステップ */
	/* ------------------ */
	.easyoperationstep {
		margin: 1.5em 0;
		padding: 0 0.5em 0 3.6em;
		position: relative;
		min-height: 3em;
		box-sizing: border-box;
	}
		.easyoperationstepNum {
			font-size: 3em;
			line-height: 1;
			position: absolute;
			top: 0;
			left: 0;
		}

	.easyoperationguide {
		font-size: 1.75em;
		font-weight: normal;
	}

	@media all and (max-width: 410px) {
		.easyoperationstep {
			padding-left: 2em;
			min-height: 2em;
		}
			.easyoperationstepNum {
				font-size: 1.5em;
			}

		.easyoperationguide {
			font-size: 1em;
			font-weight: bold;
		}
	}

	/* ---------------- */
	/* ▼ヒント用の囲み */
	/* ---------------- */
	.hintBox {
		background-color: #f0f8ff;
		margin: 1em 0;
		padding: 0.5em 0.5em 0.5em 4.25em;
		border: 1px solid #d9eeff;
		border-radius: 0.5em;
		position: relative;
		min-height: 4em;
		box-sizing: border-box;
	}
		.hintIcon {
			font-size: 3em;
			color: skyblue;
			line-height: 1;
			position: absolute;
			top: 0.5rem;
			left: 0.5rem;
		}
		.hintBox > p {
			margin: 0;
		}
		.hintBox > p + p {
			margin-top: 1em;
		}
		.hintBox > ul {
			margin: 0;
			padding-left: 1.5em;
		}

		/* コード */
		.hintBox code {
			background-color: rgba(255,255,255,0.5);	/* 50％透過の白 */
		}

	@media all and (max-width: 410px) {
		.hintBox {
			padding-left: 2.1em;
			min-height: 2em;
		}
			.hintIcon {
				font-size: 1.5em;
				top: 0.5rem;
				left: 0.25rem;
			}
	}

	/* ---------------------- */
	/* ▼小さいヒント用の囲み */
	/* ---------------------- */
	.miniHintBox {
		display: inline-block;
		background-color: #f0f8ff;
		margin: 0;
		padding: 0.5em 0.5em 0.5em 3em;
		border: 1px solid #d9eeff;
		border-radius: 0.5em;
		position: relative;
		box-sizing: border-box;
	}
	.miniHintBox::before {
		content: '➡';
		color: skyblue;
		font-size: 2em;
		line-height: 1;
		position: absolute;
		top: 0.34rem;
		left: 0.5rem;
	}

	/* ------------ */
	/* ▼汎用表示例 */
	/* ------------ */
	.showexampleline {
		font-weight:bold;
		background-color:#ffc;
		border:1px solid #cc8;
		padding:0 0.5em;
		color:green;
	}

	/* ---------------- */
	/* ▼もっと読む機能 */
	/* ---------------- */
	.moreReadingBox {
		max-height: 20em;
		position: relative;
		overflow: hidden;
	}
	.moreReadingBox::after {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		content: ' ';
		background: linear-gradient(transparent, white);
		height: 20em;
	}
	.moreReadingButton {
		position: relative;
		top: -1.5em;
		text-align: center;
		font-size: 1.33em;
		font-weight: bold;
	}

	/* ------------------ */
	/* ▼検討中機能リスト */
	/* ------------------ */
	.considerations li {
		margin-bottom: 0.75em;
		line-height: 1.25;
	}


	/* ▼メニュー画面項目表示の説明用見出し */
	.setting-menu-itemname { background-color: #0000cc; }

	/* ▼解説文リストのサブ見出し */
	.edit-item-title { background-color: #008000; }

	/* ▼上記2つに共通する装飾 */
	.setting-menu-itemname,
	.edit-item-title {
		color: white;
		font-weight: bold;
		padding: 0px 0.5em;
		border-radius: 0.25em;
	}

	/* ▼解説文リストの項目内の行内見出し文字 */
	.item-condition {
		font-weight: bold;
		background-color: #eef5ff;
	}
	.item-condition.code {
		font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	}

	/* ▼スペック(仕様)リスト */
	dl.speclist { border-left: 3px solid green; padding: 0.5em 0 1px 0.5em; }
	dl.speclist dt { font-weight:bold; }
	dl.speclist dt::before { content:'✅'; margin-right:3px; }
	dl.speclist dd { margin-bottom: 1em; margin-left: 2em; }

	/* ------------ */
	/* ▼汎用解説用 */
	/* ------------ */
	/* ulリストで解説を見やすくするために項目ごとに空行を挟みたい場合 */
	.individualitemlist li {
		margin-bottom: 1em;
	}
	.individualitemlist li:last-child {
		margin-bottom: 0;
	}

	/* ulチェックマークリスト */
	.individualchecklist {
		list-style-type:'✅';
		margin-top:1em; padding-top:1em; border-top:1px dashed #ccc;
		margin-bottom:1em; padding-bottom:1em; border-bottom:1px dashed #ccc;
	}
	.individualchecklist li {
		margin-bottom: 1.5em;
		padding-bottom: 1em;
		border-bottom:1px dashed #ccc;
	}
	.individualchecklist li:last-child {
		margin-bottom: 0;
		padding-bottom: 0;
		border: 0;
	}

	/* 点線囲みサブ解説ボックス */
	.subExplainGuideBox {
		margin:0.25rem 0;
		padding:0.5rem;
		background-color:#fff5f0;
		border:1px dashed #ccc5c0;
		border-radius:0.5rem;
	}

	/* -------------------- */
	/* ▼カスタマイズ解説用 */
	/* -------------------- */
	/* リファレンスの「ジャンル」サブ見出し */
	.genre {
		font-weight: bold;
		background-color:#fff5f5;
		border-top: 3px double maroon;
		padding: 0.4em 0.3em;
		margin-top: 1.75em;
	}

	/* リファレンス内リストの装飾 */
	.howtowriteskin li {
		line-height: 1.45;
	}
	.howtowriteskin li + li {
		margin-top: 0.67em;
		padding-top: 0.67em;
		border-top: 1px dotted #ccc;
	}
	.howtocustomize .keypoint {
		display: inline-block;
		margin-bottom: 0.67em;
	}
	.manytime { color: royalblue; font-size: 0.9em; }
	.onlyonce { color: snow; background-color:royalblue; font-size: 0.9em; border-radius:3px; padding:0 0.5em; }

	/* ▼サンプル画像ボックス */
	.sampleimagebox { clear: right; }

	/* ▼更新履歴の1履歴を囲む全体枠 */
	.oneupdatelist { margin-bottom: 2em; }

	/* ▼更新履歴内の1カテゴリ名 */
	.upcategory { list-style-type: none; color: #bbb; text-indent: -1.2em; margin-top: 0.5em; }

	/* ▼更新履歴の先頭でリリースノートの参照を促す枠 */
	.toreleasenote { margin: 1.25em 0.25em 1.75em 0.25em; padding: 0.75em; border: 2px solid #050; border-radius: 0.75em; background-color: #efe; }
	.toreleasenote p { margin:0; }
	.toreleasenote p + p { margin-top:0.75em; padding-top:0.75em; border-top:1px dotted #050; }

	/* ▼ソースコードの表示枠 */
	.sourcecode {
		margin: 1em 0; padding: 0.5em 0; background-color: #f0f8f0;
		font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,"メイリオ",monospace;	/* 等幅フォント */
	}
		/* ▼例示用記号「●●●」みたいなの用 */
		.varmark {
			font-family: monospace;
		}

	/* ▼行番号付きソースコードの表示枠 */
	.deco-pre {
		display: block;
		position: relative;
		width: 100%;
		line-height: 1.4;
		white-space: pre;
		font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,"メイリオ",monospace;
		background-color: #f0f8f0;
		border-width: 1px 1px 1px 4px;
		border-color: #93b893;
		border-style: solid;
		padding: 1rem 0 1rem 3.8rem;
		margin: 1.6rem 0;
		overflow-x: auto;
		overflow-y: hidden;
		box-sizing: border-box;
	}
	.deco-pre:before {
		position:absolute;
		top:1rem;
		left:0;
		bottom:1rem;
		overflow:hidden;
		color:#93b6b8;
		content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A";
		border-right: 1px solid #93b6b8;
		padding-right:1rem;
		width:2.0rem;
		text-align:right;
	}

	/* ▼備考枠 */
	.notebox { margin: 1em 0; padding: 0.75em 0.5em; border: 1px dashed gray; border-radius: 1em; background-color: #f3f3f3; }

	.notememo { font-size: 0.8em; line-height: 1.25; }

	/* 汎用強調バリエーション */
	.important2nd { color: #0000ee; }

		.sourceblue { color:royalblue; }
		.sourcelightgreen { color:#0a0; }
		.sourcegreen { color:#090; }
		.sourcesky { color:deepskyblue; }
		.sourcepurple { color:#b0b; }
		.sourcepink { color:deeppink; }
		.sourceyellow { color:#aa0; }
		.sourceorange { color:orange; }
		.sourcegray { color:#999; }
		.sourcelightgray { color:#ccc; }

	/* 互換性維持のために残してある古い記述用の装飾 */
	.compatible { color: #bbb; }
	.compatible::after { content: '《旧記法》'; display:inline-block; background-color:black; color:white; font-size:0.9em; font-weight:bold; border-radius:0.4em; padding:3px 0.35em; line-height:1; }


/* ========================== */
/* ■ページ最下部(フッタ)領域 */
/* ========================== */

	/* ▼グラデーションフッタ（※TOPページ以外にある） */
	.tegalogfooter {
		background: linear-gradient(to top, #e0e0ff, #fff);
		margin: 0;
		padding: 1em 0;
	}

		/* ▼戻るリンク群 */
		.returnlink {
			margin: 2em 0 1em 0;
			text-align: center;
			line-height: 1.7;
		}


/* ================= */
/* ■PC/モバイル分岐 */
/* ================= */
@media all and (max-width: 767px) {

	.pc-only { display: none; }

}
@media all and (min-width: 768px) {

	.mobile-only { display: none; }

}



/* End of file */