/***** ver. 20240522e *****/

/* 定数は var_dark.css および var_light.css で指定 */

/* ↓ブラウザ規定値を解除 */
select, input, button {
	font-size: unset;
}

button, textarea {
	-webkit-appearance: none;
}

/* プレースホルダ：Firefoxではopacity 0.55程度（半透過）がかかっているので明示的にopacityを指定 */
::placeholder {
	opacity: 1.0;
	color: var(--c-placeholder);
}

input[type="text"]:focus, textarea:focus {
	outline: none;
}

body.main {
	background-color: var(--c-bodybg);
	color: var(--c-text);
	margin: 2.00vw;
	font-family: sans-serif;
	touch-action: manipulation;
	/* iphoneのSafariで文字が大きくなる箇所があるバグの対策 */
	-webkit-text-size-adjust: 100%;
}

div.pagetitle {
	line-height: 0.8;
	margin-bottom: 0.35em;
}

input, textarea, select{
	color: var(--c-text);
	background-color: var(--c-inputbg);
	border: solid 1px;
	border-color: var(--c-gray);
}

button.btn1 {
	font-size: 1.10rem;
	height: 1.70em;
	color: var(--c-text);
	background-color: var(--c-btnbg);
	box-sizing: border-box;
	border: solid 1px;
	border-color: var(--c-gray);
	border-radius: 0.40em;
	padding: 0 0.45em 0 0.45em;
	vertical-align: middle;	/* 英字・日本語で高さがずれるのを防ぐ */
}

button:active {
	background-image: url("clearblue.png");
	opacity: 0.75;
}

button:disabled, select:disabled {
	opacity: 0.3;
}

button.general {
	font-size: 0.80rem;
	height: 1.9em;
	color: var(--c-text);
	background-color: var(--c-btnbg);
	border: solid 1px;
	border-color: var(--c-gray);
	border-radius: 0.20em;
	vertical-align: middle;	/* 英字・日本語で高さがずれるのを防ぐ */
}


hr.silver {
	border: solid;
	border-width: 1px 0px 0px 0px;
	color: var(--c-linesilver);
	margin: 2px 0px 2px 0px;
}

hr.black {
	border: solid;
	border-width: 2px 0px 0px 0px;
	color: var(--c-text);
	margin: 3px 0px 3px 0px;
}

hr.black_wide {
	border: solid;
	border-width: 2px 0px 0px 0px;
	color: var(--c-text);
	margin: 10px 0px 10px 0px;
}

div.note {
	font-size: 85%;
	line-height: 1.15;
}

.toggle {
	cursor: pointer;
	color: var(--c-gray);
}

/* ポップアップメッセージのアニメーション */
@keyframes msg_popup_anime {
	0%   {opacity: 0;}
	12%  {opacity: 1;}
	88%  {opacity: 1;}
	100% {opacity: 0;}
}

/* このクラスをポップアップメッセージのspanにjavascriptで付加するとanimationが始まる */
.start_msg_popup {
	animation-name: msg_popup_anime;
	animation-duration: 2.0s;
	animation-fill-mode: backwards;
	animation-timing-function: linear;
}

/* ポップアップメッセージ */
span.msg_popup {
	display: inline-block;
	padding: 0.5em 1.4em;
	opacity: 0; /* 初期値0 */
	color: var(--c-popuptext);
	background-color: var(--c-popupbg);
	backdrop-filter: blur(0.22rem);
	-webkit-backdrop-filter: blur(0.25rem);
	border-radius: 0.3rem;
	vertical-align: middle;
	position: absolute;
}

span.msg_popup::before{
	font-weight: bold;
	content: "✓";
	margin-right: 0.5em;
}

a {
	color: var(--c-link1);
}