@charset "UTF-8";

/* ************************************************ */
/* フォーム共通 */
/* ************************************************ */
input, select, textarea, button {
	font-family:"メイリオ","Hiragino Kaku Gothic Pro",Meiryo,Arial,sans-serif;
	font-size:1em;
}

::placeholder { color:#aaa; }
::-ms-input-placeholder { color:#aaa; }
::-webkit-input-placeholder { color:#aaa; }

input[type="text"],
input[type="password"],
input[type="mail"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
select
{
	line-height:1.5em;
	padding:.6em .5em;
	border:1px solid #aaa;
	border-radius:.2em;
	width:100%;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
}
input[type="checkbox"],
input[type="radio"]
{
	display:none;
	width:initial;
}
input[type="checkbox"] + label:not(.ui-button),
input[type="radio"] + label:not(.ui-button)
{
	display:inline-block;
	position:relative;
	cursor:pointer;
	user-select: none;
	line-height:1.4;
	padding-left:1.6em;
}
input[type="checkbox"] + label:not(.ui-button)::before,
input[type="radio"] + label:not(.ui-button)::before
{
	content:"";
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	margin:auto 0;
	display:inline-block;
	border:.1em solid gray;
	border-radius:.15em;
	width:1.3em;
	height:1.2em;
	box-sizing:border-box;
	text-align:center;
	line-height:1.2;
}
input[type="radio"] + label:not(.ui-button)::before {
	border-radius:50%;
}
input[type="checkbox"]:checked + label:not(.ui-button)::before,
input[type="radio"]:checked + label:not(.ui-button)::before
{
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA+klEQVQ4T6WS0VECQRBEuyPgMhAyIAM1AiUCMQIxA4kAjUDIACIQIlAzODPACNpqapbaO/eqDpjP3em3PdNLXFg8Ry9pCGABYHcyQNI0xNbenAQI8Xu4fiS57A1oiZ9Jvhp0BEiqSO5LO2mJNyTvU98BIGkG4AHAbRsiaQzgA0AF4AfAOO+hpGWIzfrKIXYF4BOAt+7yA9vcpQGe5Sk7XJOchLM1gLu4W5F0Ao1KI5h6nd3Y1XfE5eNfuyjtKAFs1favOj7WnORL6S5Pwcuyk0GrsfP1Rowxs2dMHyVx3kg6pWL9+0iFpY5I1r0B4SRFVZc234ixi9z3/A+1pV2r9zrY5gAAAABJRU5ErkJggg==);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:.7em;
	background-color:rgb(90,161,59);
}

input.toggle { display:unset; }
input{&.toggle {
	--cl:#5aa13b;
	--w:4em;
	--h: 2em;
	--h2: calc(var(--h) * 0.75);
	--hm: calc((var(--h) - var(--h2)) / 2);
	--bd-c:#bbb;
	--ani-s:.2s;
	container-type:inline-size;
	display:inline-block;
	position:relative;
	width:var(--w);
	height:var(--h);
	border-radius:1em;
	appearance:none;
	background-color:var(--bd-c);
	transition:all var(--ani-s) ease-out;
	line-height:0;
	vertical-align:middle;
	cursor:pointer;

	&:checked {
		background-color:var(--cl);
	}

	&::before {
		content:"";
		transition:all var(--ani-s) ease-out;
		display:block;
		position:absolute;
		margin:0;
		top:var(--hm);
		bottom:unset;
		left:var(--hm);
		border-radius:50%;
		width:var(--h2);
		height:var(--h2);
		background:center 1px no-repeat #fff;
	}
	&:checked::before {
		left:calc(var(--w) - var(--h2) - var(--hm));
		background:center 1px no-repeat #fff;
		background-size:calc(var(--h) * 0.65);
		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PGcgZGF0YS1uYW1lPSJsYXllcjIiPjxwYXRoIHN0eWxlPSJmaWxsOm5vbmUiIGQ9Ik0wIDBoNDh2NDhIMHoiIGRhdGEtbmFtZT0iUmVjdCIvPjxwYXRoIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiM1YWExM2I7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDo0cHgiIGQ9Im0xMS4xMyAyOC4xMyA4LjIgOC4yIDE5LjgzLTE4LjgyIi8+PC9nPjwvc3ZnPg==);
	}

	&:focus, &:focus-visible {
		outline:unset;
	}
}}

select {
	background-color:#fffff0;
}

textarea {
	width:100%;
	padding:.5em;
	min-height:5em;
}

button, input[type="submit"], input[type="button"] {
	border:initial;
	border-radius:.2em;
	background-color:rgb(90,161,59);
	color:white;
	line-height:1.3;
	padding:.9em 1.5em;
	cursor:pointer;
}
button:hover {
	opacity:.5;
}
button.mini {
	font-size:.9em;
}
button[disabled] {
	background-color:#ccc;
}

.error {
	color:red;
	background-color:#fddfdf;
	border:1px solid #f1a899;
	border-radius:.2em;
	padding:.5em;
	margin:2em 0;
}


/* ************************************************ */
/* 入力項目表示リスト */
/* ************************************************ */
form > ul {
	background-color:white;
	border:1px solid #ddd;
	border-radius:.1em;
	padding:1em 2em;
}
form > ul > li {
	padding:1em 0;
}

form label.require::after {
	content:"*";
	color:red;
}

form > ul > li > p {
	font-size:.9em;
	margin:.3em 0;
	color:#999;
}



/* ************************************************ */
/* スマホ対応 */
/* ************************************************ */
@media screen and (max-width: 600px) {

form > ul {
	padding:.5em;
}

}