/* -=-=-=-=-=-=-=-=-=-=- メディアクエリに応じた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;
	}
}



/* -=-=-=-=-=-=-=-=-=-=- ダークモード（単純な反転） -=-=-=-=-=-=-=-=-=-=- */
/* 
@media (prefers-color-scheme: dark) {
	白黒のみ反転
	html {
		filter: invert(1) hue-rotate(180deg);
	}
	画像要素は再度反転させオリジナルのままにする
	html img{
		filter: invert(1) hue-rotate(180deg);
	}
}
html {
	background-color: #ddd;
	transition: color 300ms, background-color 300ms;
}
*/

/* -=-=-=-=-=-=-=-=-=-=- カラーモード（モードに応じて個別に設定） -=-=-=-=-=-=-=-=-=-=- */
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.8rem;
}

/* デフォルト（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: 6rem;}
h2 {font-size: 3.5rem;}
h3 {font-size: 2.8rem;}
h4 {font-size: 2.4rem;}
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: 5px 0;
	margin: 10px 0;
	border-radius: 5px;
	text-align: center;
}