/* -=-=-=-=-=-=-=-=-=-=- メディアクエリに応じたhtml要素の表示制御 -=-=-=-=-=-=-=-=-=-=- */
/* スマートフォン (縦表示時) より狭い場合に非表示 */
@media screen and (max-width: 480px) {
	.invisible_max_width_480px {
		display: none;
	}
}
/* スマートフォン (縦表示時) より狭い場合に表示 */
@media screen and (min-width: 481px) {
	.visible_min_width_481px {
		display: none;
	}
}



/* -=-=-=-=-=-=-=-=-=-=- カラーモード（モードに応じて個別に設定） -=-=-=-=-=-=-=-=-=-=- */
body {
	transition: color 300ms, background-color 300ms; /* カラーチェンジをゆっくりにする */
}
/* -=-=-=-=-=- カラーモード：未設定、ライト -=-=-=-=-=- */
body,
body.colorMode_light {
	/* 下地カラー */
	--color-body-background: #dfdfdf;
	--color-body-text: #000;
	/* input */
	--color-input-background: #ddd;
	--color-input-text: #000;
	--color-input-border: solid 1px #000;
	/* textarea */
	--color-textarea-background: #ddd;
	--color-textarea-text: #000;
	--color-textarea-border: solid 1px #000;
	/* select */
	--color-select-background: #ddd;
	--color-select-text: #000;
	--color-select-border: solid 1px #000;
	/* option */
	--color-option-background: #ddd;
	--color-option-text: #000;
	/* checkbox要素のアクセントカラー */
	--color-checkbox-accent: #fff;
	/* select（の直前のlabel）要素のbefore（▼） */
	--color-select-label-before-background: #000;
	--color-select-label-before-text: #000;
	/* button */
	--color-button-background: rgba(220, 220, 220, 0.9);
	--color-button-text: #000;
	--color-button-border: solid 1px #000;
	/* 入力必須項目（のラベル）を示すマーク */
	--color-required-after-text: #f55;
	/* ラッパー */
	--color-wrapper-background: #eee;
	--color-wrapper-text: #000;
}

/* -=-=-=-=-=- カラーモード：ダーク -=-=-=-=-=- */
body.colorMode_dark {
	/* 下地カラー */
	--color-body-background: #000;
	--color-body-text: #ccc;
	/* input */
	--color-input-background: #333;
	--color-input-text: #ccc;
	--color-input-border: solid 1px #ccc;
	/* textarea */
	--color-textarea-background: #333;
	--color-textarea-text: #ccc;
	--color-textarea-border: solid 1px #ccc;
	/* select */
	--color-select-background: #333;
	--color-select-text: #ccc;
	--color-select-border: solid 1px #ccc;
	/* option */
	--color-option-background: #333;
	--color-option-text: #ccc;
	/* checkbox要素のアクセントカラー */
	--color-checkbox-accent: #ccc;
	/* select（の直前のlabel）要素のbefore（▼） */
	--color-select-label-before-background: #ccc;
	--color-select-label-before-text: #ccc;
	/* button */
	--color-button-background: #333;
	--color-button-text: #ccc;
	--color-button-border: solid 1px #555;
	/* 入力必須項目（のラベル）を示すマーク */
	--color-required-after-text: #f55;
	/* ラッパー */
	--color-wrapper-background: #222;
	--color-wrapper-text: #ccc;
}

/* -=-=-=-=-=- カラーモード：アイボリー -=-=-=-=-=- */
body.colorMode_ivory {
	/* 下地カラー */
	--color-body-background: #dec7be;
	--color-body-text: #3d2f2b;
	/* input */
	--color-input-background: rgba(243, 221, 201, 0.9);
	--color-input-text: #3d2f2b;
	--color-input-border: solid 1px #3d2f2b;
	/* textarea */
	--color-textarea-background: rgba(243, 221, 201, 0.9);
	--color-textarea-text: #3d2f2b;
	--color-textarea-border: solid 1px #3d2f2b;
	/* select */
	--color-select-background: rgba(243, 221, 201, 0.9);
	--color-select-text: #3d2f2b;
	--color-select-border: solid 1px #3d2f2b;
	/* option */
	--color-option-background: rgba(243, 221, 201, 0.9);
	--color-option-text: #3d2f2b;
	/* checkbox要素のアクセントカラー */
	--color-checkbox-accent: rgba(243, 221, 201, 0.9);
	/* select（の直前のlabel）要素のbefore（▼） */
	--color-select-label-before-background: #3d2f2b;
	--color-select-label-before-text: #3d2f2b;
	/* button */
	--color-button-background: #f3ddc9;
	--color-button-text: #3d2f2b;
	--color-button-border: solid 1px #e9baaa;
	/* 入力必須項目（のラベル）を示すマーク */
	--color-required-after-text: #f55;
	/* ラッパー */
	--color-wrapper-background: #e8cfc0;
	--color-wrapper-text: #3d2f2b;
}

/* -=-=-=-=-=- カラーモード：ブルー -=-=-=-=-=- */
body.colorMode_blue {
	/* 下地カラー */
	--color-body-background: #a8daf0;
	--color-body-text: #0f2833;
	/* input */
	--color-input-background: rgba(192, 225, 240, 0.9);
	--color-input-text: #0f2833;
	--color-input-border: solid 1px #0f2833;
	/* textarea */
	--color-textarea-background: rgba(192, 225, 240, 0.9);
	--color-textarea-text: #0f2833;
	--color-textarea-border: solid 1px #0f2833;
	/* select */
	--color-select-background: rgba(192, 225, 240, 0.9);
	--color-select-text: #0f2833;
	--color-select-border: solid 1px #0f2833;
	/* option */
	--color-option-background: rgba(192, 225, 240, 0.9);
	--color-option-text: #0f2833;
	/* checkbox要素のアクセントカラー */
	--color-checkbox-accent: #0f2833;
	/* select（の直前のlabel）要素のbefore（▼） */
	--color-select-label-before-background: #368db3;
	--color-select-label-before-text: #0f2833;
	/* button */
	--color-button-background: #d8e9f0;
	--color-button-text: #0f2833;
	--color-button-border: solid 1px #78ccf0;
	/* 入力必須項目（のラベル）を示すマーク */
	--color-required-after-text: #f55;
	/* ラッパー */
	--color-wrapper-background: #c0e1f0;
	--color-wrapper-text: #0f2833;
}



/* -=-=-=-=-=- 各要素へカラーを設定（ここは基本いじらない） -=-=-=-=-=- */
/* 下地カラー */
body {
	background-color: var(--color-body-background);
	color: var(--color-body-text);
}
/* input */
input {
	background-color: var(--color-input-background);
	color: var(--color-input-text);
	border: var(--color-input-border);
}
/* textarea */
textarea {
	background-color: var(--color-textarea-background);
	color: var(--color-textarea-text);
	border: var(--color-textarea-border);
}
/* select */
select {
	background-color: var(--color-select-background);
	color: var(--color-select-text);
	border: var(--color-select-border);
}
/* option */
option {
	background-color: var(--color-option-background);
	color: var(--color-option-text);
}
/* checkbox要素のアクセントカラー */
input[type="checkbox"] {
	accent-color: var(--color-checkbox-accent);
}
/* select（の直前のlabel）要素のbefore（▼） */
label:has(+ select)::before {
	background-color: var(--color-select-label-before-background);
	color: var(--color-select-label-before-text);
}
/* button */
button {
	background-color: var(--color-button-background);
	color: var(--color-button-text);
	border: var(--color-button-border);
}
/* ラッパー */
.wrapper {
	background-color: var(--color-wrapper-background);
	color: var(--color-wrapper-text);
}


/* -=-=-=-=-=-=-=-=-=-=- オプション -=-=-=-=-=-=-=-=-=-=- */

*, *::before, *::after {
    /* スクロールバーを非表示にする */
    -ms-overflow-style: none; /* IE */
    scrollbar-width: none; /* Firefox */
    /* 画像・テキストを選択不可にする */
    user-select: none;
    /* width値, height値にcontent, padding, borderを含ませる */
    box-sizing: border-box;
    /* 文字列を自動で折り返す */
    word-break: break-all;
    /* スクロールをスムーズにする */
    scroll-behavior: smooth;
    /* テキストアラインはinheritが便利 */
    text-align: inherit;
}
*::-webkit-scrollbar {  
    /* スクロールバーを非表示にする */
    display: none; /* Google Chrome, Safari, Edge */
}
/* 画像・テキストの選択・ドラッグ禁止 */
body {
    user-select:none;
    -webkit-user-select:none;
    -ms-user-select: none;
    -moz-user-select:none;
    -khtml-user-select:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
}



/* -=-=-=-=-=-=-=-=-=-=- フォントファミリー -=-=-=-=-=-=-=-=-=-=- */

/* Kiwi_Maru */
@font-face {
	font-family: "Kiwi_Maru";
	font-style: normal;
	font-weight: 400;
	src:    url("../font/Kiwi_Maru/KiwiMaru400.woff2") format("woff2"),
			url("../font/Kiwi_Maru/KiwiMaru400.woff") format("woff");
	font-display: swap;
}

/* Ubuntu */
@font-face {
	font-family: "Ubuntu";
	font-style: normal;
	font-weight: 400;
	src:    url("../font/Ubuntu/Ubuntu400.woff2") format("woff2"),
			url("../font/Ubuntu/Ubuntu400.woff") format("woff");
	font-display: swap;
}
@font-face {
	font-family: "Ubuntu_italic";
	font-style: italic;
	font-weight: 400;
	src:    url("../font/Ubuntu/Ubuntu400Italic.woff2") format("woff2"),
			url("../font/Ubuntu/Ubuntu400Italic.woff") format("woff");
	font-display: swap;
}

*, *::before, *::after {
	font-family: "Kiwi_Maru", "Ubuntu", "serif", "sans-serif";
	/* font-family: "Ubuntu"; */
	/* font-family: "Ubuntu_italic"; */
}



/* -=-=-=-=-=-=-=-=-=-=- フォントサイズ -=-=-=-=-=-=-=-=-=-=- */
* {
	font-size: 1.7rem;
}

/* デフォルト（PC） */
html {
	/* font-size: 62.5%; */ /* 10px (when browser 100% font-size is 16px) */
	font-size: 10px;
}
/* タブレット (縦表示時) を想定 */
@media screen and (max-width: 1024px) {
	html {
		/* font-size: 56.25%; */
		font-size: 9px;
	}
}
/* スマートフォン (横表示時) を想定 */
@media screen and (max-width: 896px) {
	html {
		/* font-size: 50%; */
		font-size: 8px;
	}
}
/* スマートフォン (縦表示時) を想定 */
@media screen and (max-width: 480px) {
	html {
		/* font-size: 43.75%; */
		font-size: 7px;
	}
}

h1 {font-size: 5.8rem;}
h2 {font-size: 3.2rem;}
h3 {font-size: 2.6rem;}
h4 {font-size: 2.2rem;}
h5 {font-size: 2rem;}
h6 {font-size: 1.8rem;}



/* -=-=-=-=-=-=-=-=-=-=- ユーザーフォーム -=-=-=-=-=-=-=-=-=-=- */

.inputForm_container {
	padding: 0 0 10px;
}

input:not([type="checkbox"]), textarea, select {
	width: 100%;
}

input[type="checkbox"] {
	transform: scale(1.5);
	margin: 0 5px 3px;
}

select {
	cursor: pointer;
}
/* select要素は疑似セレクタが設定できないので設定可能なlabel要素に設定 */
label:has(+ select) {
	position: relative;
	display: block;
	width: 100%;
}
label:has(+ select)::before {
	position: absolute;
    content: '';
	/* 図形の位置 */
    top: 26px;
    right: 8px;
	/* 図形の大きさ、形 */
    height: calc(tan(60deg) * 10px / 2);
	width: 10px;
	/* 三角形の向き */
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 入力必須項目（のラベル）を示すマーク */
.required::after {
	content: " *";
	vertical-align: middle;
}

/* メニューアイテムボタン（アコーディオン開閉ボタン）以外のボタン要素 */
button:not([id^="menuItemButton"]) {
	display: inline-block;
	width: 100%;
	padding: 10px 0;
	margin: 10px 0;
	border-radius: 5px;
	text-align: center;
}



/* -=-=-=-=-=-=-=-=-=-=- 目次サイドメニュー -=-=-=-=-=-=-=-=-=-=- */
/* サイドメニュー表示制御 */
/* スマートフォン (横表示時) 以下で非表示 */
@media screen and (max-width: 896px) {
	aside {
		display: none;
	}
}
aside {
	overflow-y: scroll;
	position: sticky;
	top: 0;
	height: 100vh;
	width: 400px;
	background-color: #fff;
}

#tocContainerTarget {
	/* #tocContainerTarget以下は、js/toc.jsで生成されるタグ要素 */
	/* .activeMenuPaginatorCSSクラスは、js/paginator.jsで付与されるプロパティ */

	#tocContainer {
		padding: 2rem 2rem;

		& li {
			/* 行間 */
			margin: 3px 0;

			& ul {
				/* table of contentsをアウトラインに沿ってインデントさせる */
				padding-left: 1em;
			}
		}

		& a {
			display: block;
			padding: 8px;
			/* font-size: 1.7rem; */
		}
		& a.activeMenuPaginator {
			background-color: rgba(150, 150, 150, 0.5);
			border-radius: 1px;
		}
	}
}



/* -=-=-=-=-=-=-=-=-=-=- 複数ページに共通するスタイル -=-=-=-=-=-=-=-=-=-=- */
body {
	/* このページのテキストは原則、左寄せ */
	text-align: left;
	background-color: #eee;
}
.wrapper {		
	width: 95%;
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
strong {
	color: #f55;
}
main {
	background-color: #fff;
	/* width: calc(100% - 400px); */
	width: 100%;
	padding-bottom: 3rem;

	/* padding: 0 3rem; */
	/* ※ 不採用 ∵ 左右の余白は個別で設定した方が、後々柔軟なレイアウトに対応できるから */
	/* 横幅いっぱいいっぱいのグローバル画像を後に追加したい場合など */

	& h1 {
		padding-top: 5rem;
		margin: 0 3rem 5rem;
		line-height: 1em;
	}
	& h2 {
		margin: 4rem 3rem;
		padding: 1.5rem;
		line-height: 1.2em;
		background-color: #dcdcdc;
		border-left: solid 1rem #888;
	}
	& h3 {
		margin: 3rem 3rem;
		padding: 1rem 1.5rem;
		border-left: solid 5px #888;
	}

	& p {
		margin: 2rem 4rem;
		/* font-size: 1.7rem; */
		line-height: 1.5em;
	}

	& input {
		padding: 1rem;
		margin: 0 0 1rem;
	}

	& button {
		padding: 1rem;

		&:hover {
			background-color: #555;
			color: #999;
		}

		&:focus {
			background-color: #555;
			color: #999;
		}
	}

	/* イメージ要素は余白0とする */
	/* 余白が必要な場合は原則p要素で囲うようにする */
	& img,
	& video {
		display: inline-block;
		width: 100%;

		&.maximum {
			padding: 0;
		}
	}
	& p,
	& div,
	& picture,
	& figure {
		& > img,
		& > video {
			/* 縦に大きすぎるイメージは見づらいので上限を設定 */
			max-height: 50vh;
			object-fit: contain;
			/* aspect-ratio: 1 / 1; */
		}
		& > img.maxHeight_none,
		& > video.maxHeight_none {
			/* 上限設定を解除 */
			max-height: none;
		}
	}

	& ul {
		margin: 0 3rem;
		padding-left: 3.5rem;
	}
	& li {
		list-style: disc;
		/* font-size: 1.7rem; */
		line-height: 1.5em;
	}

	& table {
		width: calc(100% - 2 * 3rem);
		margin: 0 auto 4.5rem;
		border-collapse: collapse;
	}
	& tbody {
		border: solid 1px #555;
	}
	& th,
	& td {
		border: dashed 1px #555;
		vertical-align: middle;
		padding: 0.8rem 1.2rem;

		/* テーブルセル内のコンテンツの余白を0にする */
		& * {
			margin: 0;

			/* ol, ulは行頭記号スペースとしてpaddingが必要 */
			&:not(ol):not(ul) {
				padding: 0;
			}
		}
	}
	& th {
		word-break: keep-all;
		font-weight: 500;
		text-align: center;
		background-color: #dcdcdc;
	}
	& td {
		word-break: break-all;
		text-align: left;
		background-color: #fff;
	}

	& a[download],
	& a.btn {
		display: block;
		background-color: #333;
		color: #fff;
		text-align: center;
		margin: 0 4rem;
		padding: 2rem;
		border-radius: 100vh;
	}

	& small {
		display: block;
		text-align: center;
	}

	/* 余白のリセット */
	.container_flexContents {
		& p,
		& div,
		& figure,
		& img,
		& video {
			padding: 0;
			margin: 0;
		}	
	}
}


/* -=-=-=-=-=- コンテナ用に余白を付加するクラス -=-=-=-=-=- */
.container_padding_horizontal {
	padding: 0 3rem;
}


/* -=-=-=-=-=- イメージ要素用のフレックスコンテナ -=-=-=-=-=- */
.container_flexContents {
	margin: 0 3rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	.basis_50 {
		/* ※ flex-basisだと、何故かChromeで指定した幅に収まらない */
		/* Firefoxではflex-basisでも理想通りの動きをする */
		/* --> flex-basisの代わりにwidthを用いる */
		/* flex-basis: 50%; */
		width: 50%;
		padding: 2rem;
		/* コンテンツの最小幅を設定 ※コンテンツが小さくなりすぎることを防止 */
		min-width: 250px;
	}
	.basis_33 {
		/* flex-basis: 33%; */
		width: 33%;
		padding: 1.5rem;
		min-width: 150px;
	}
	.basis_25 {
		/* flex-basis: 25%; */
		width: 25%;
		padding: 1rem;
		min-width: 50px;
	}
	.basis_20 {
		/* flex-basis: 20%; */
		width: 20%;
		padding: 0.5rem;
		min-width: 10px;
	}
}

/* -=-=-=-=-=- タブボックス -=-=-=-=-=- */
.tabBody {
	margin: 0 3rem;
	display: flex;
	flex-wrap: wrap;

	& input {
		display: none;

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.1 */
		&.input1:checked {

			& ~ .label1 {
				cursor: default;
			}
			
			& ~ .tabBoxContainer > .tabBox1 {
				/* チェック時はブロックとして表示する */
				display: block;
				background-color: #ff8484;						
			}
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.2 */
		&.input2:checked {
			
			& ~ .label2 {
				cursor: default;
			}

			& ~ .tabBoxContainer > .tabBox2 {
				/* チェック時はブロックとして表示する */
				display: block;
				background-color: #ffc080;						
			}
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.3 */
		&.input3:checked {
			
			& ~ .label3 {
				cursor: default;
			}

			& ~ .tabBoxContainer > .tabBox3 {
				/* チェック時はブロックとして表示する */
				display: block;
				background-color: #83ffc1;						
			}
		}
		
		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.4 */
		&.input4:checked {
			
			& ~ .label4 {
				cursor: default;
			}

			& ~ .tabBoxContainer > .tabBox4 {
				/* チェック時はブロックとして表示する */
				display: block;
				background-color: #5badff;						
			}
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.5 */
		&.input5:checked {
			
			& ~ .label5 {
				cursor: default;
			}

			& ~ .tabBoxContainer > .tabBox5 {
				/* チェック時はブロックとして表示する */
				display: block;
				background-color: #8484ff;						
			}
		}
	}
	
	& label {
		display: inline-block;
		flex-basis: 20%;
		padding: 1.5rem 0;
		text-align: center;
		transition: background-color 0.5 ease, color 0.5 ease;

		&:hover {
			cursor: pointer;
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.1 */
		&.label1 {
			background-color: #ff8484;
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.2 */
		&.label2 {
			background-color: #ffc080;
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.3 */
		&.label3 {
			background-color: #83ffc1;
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.4 */
		&.label4 {
			background-color: #5badff;
		}

		/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */
		/*  タブ No.5 */
		&.label5 {
			background-color: #8484ff;
		}
	}

	/* タブボックスコンテナ */
	.tabBoxContainer {
		
		width: 100%;

		/* tabBox */
		& > div {
			/* 非チェック時は隠しておく */
			display: none;
			padding: 3rem 0;
		}
	}
}