@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object] form
	@import"../css/test_line.css";
====================================================== */


form
{
}

select,
input,
textarea,
button,
fieldset
{
	font-family: inherit;
	font-size: var(--font);
	letter-spacing: inherit;
	margin: 0;
}

select,
input,
textarea,
button
{
	vertical-align: middle;/* <textarea>の下に出る正体不明の余白を消す */
	font-family: Menlo, Monaco, 'Courier New', Consolas, monospace;
	letter-spacing: normal;
	font-weight: inherit;
}
/*
	border-style: solid;
	border-width: 1px;
*/

select,
input,
textarea
{
	outline-width: 1px;
	outline-color: rgb(var(--border_color));
	outline-style: solid;
	outline-offset: 0em;
}

form,
button
{
	padding: 0;
}

input,
textarea
{
	padding: 0 0.5em;
}
/*
	padding: 0.25em 0.5em;
*/

select,
button
{
	text-transform: none;
}


select
{
	background: rgb(var(--w));
	white-space: nowrap;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;

	padding: 0.35em 0.5em;
}

option
{
	padding: 1px;
	background: inherit;
}


input
{
	background: transparent;
	text-overflow: ellipsis;
}

input:is([type="radio"], [type="checkbox"])
{
	margin-top: 0;
	margin-bottom: 0;
	background: transparent;

	outline-width: 0px;
}

input:checked:is([type="radio"], [type="checkbox"])
{
}

input[type="submit"]
{
}

input[type="button"]
{
}

input[type="file"]
{
	border-width: 0;
	padding: 0;
	background: none;
	cursor: pointer;
}

input[type="date"]
{
}

.kakunin label
{
	cursor: text;
}

.kakunin input:is([type="radio"], [type="checkbox"])
{
	opacity: 0;
}

.kakunin input:checked:is([type="radio"], [type="checkbox"])
{
	opacity: 1.0;
}


button
{
	display: inline-flex;
	justify-content: center;
	align-items: center;

	padding: 1em;

	background: transparent;
	border-width: 1px;

	font-family: inherit;

	color: inherit;
	cursor: pointer;
	overflow: visible;
}

button.DF
{
	height: initial;
	padding: 0.5em 1em;
	border-radius: 100em;
}


textarea
{
}


label
{
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	cursor: pointer;
}

label>b
{
	font-weight: inherit;
}


/* Google */
@media (-webkit-min-device-pixel-ratio:0) {
}


/* ------------------------------------------------------
	button */
.BtnBg,
:is(th, td).BtnBg,
.BtnBg :is(th, td)
/*
th.BtnBg,
td.BtnBg,
.BtnBg th,
.BtnBg td
*/
{
	background: none;
	text-align: center;
	border-width: 0;
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}
/*
	padding: 1.5em 1em;
*/

.BtnBg
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap);
}


.BtnSubmit,
.BtnBack,
.BtnOk,
.BtnUpload
{
	line-height: 1;
}


/* ボタン・送信する */
.BtnOk
{
}


/* ボタン・設定する */
.BtnSubmit
{
}


/* ボタン・戻る */
.BtnBack
{
}


/* ボタン・アップロード */
.BtnUpload
{
	vertical-align: middle;
	outline-color: transparent;
}


/* ボタン・削除 */
.BtnDel
{
	width: auto;
	height: auto;
	padding: 0.5em;
	border-width: 0;
}


/* ボタン・色,線,背景なし */
.BtnClear
{
	border-width: 0;
	background: transparent;
}


/* [pc, tablet, print] */
@media print, screen and (min-width : 480px) {}
select
{
	max-width: 100%;
}

td select
{
	width: 100%;
}


/* ------------------------------------------------------
	<select>装飾 */
.select
{
	display: inline-block;
}
/*
	background-color: rgb(var(--w));
	background-position: 99% center;
*/

table .select
{
	display: block;
}

.select::before
{
}
/*
	z-index: 5;
	aspect-ratio: 1 / cos(30deg);
	
	position: absolute;
	top: 50%;
	right: 1em;
	translate: -0% -50%;
	rotate: 90deg;
	
	background-color: rgb(var(--bk));
	z-index: 5;
}

[230323]　afterは、モノを置くとpull-downが出ない
.select:after
	content: "";
	display: inline;
	position: absolute;
	top: 50%;
	right: 1em;
	translate: -0% -50%;
}
*/

.select select
{
	width: 100%;
	padding-right: 2.5em;
	
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
	outline-width: 0;
	cursor: pointer;
}
/*
.select select
{
	width: 100%;
	padding-right: 3em;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
	outline: none;
	cursor: pointer;
}
*/

/* ------------------------------------------------------
	<input>装飾 */
input
{
}

/* <input>装飾　base */
/* defaultは消す */
label.input_btn input:is([type="checkbox"], [type="radio"])
{
	display: none;
}

.input_btn
{
	--input_btnsize				: 1em;
	--radio_size				: 0.6em;
	--check_border_width		: 2px;
}

label.input_btn>.title
{
	display: grid;
	grid-template-areas:
		"mark title"
	;
	align-items: center;
	gap: 0.5em;
}
label.input_btn>.title::before
{
	grid-area: mark;
}
label.input_btn>.title>b
{
	grid-area: title;
}

label.input_btn .title
{
}

label.input_btn .title:before
{
	aspect-ratio: 1;
	
	content: "";
	display: block;

	width: var(--input_btnsize);
	border-width: 1px;
	border-radius: var(--border_radius);
}

label.input_btn .title::after
{
	aspect-ratio: 1;

	content: "";
	display: block;

	position: absolute;
	left: 0;
	top: 50%;
	translate: -0% -50%;

	width: var(--input_btnsize);
	opacity: 0;
}

label.input_btn .title>b
{
	font-weight: inherit;
}

label.input_btn input:checked ~ .title::after
{
	opacity: 1.0;
}


/* <input>装飾　radio */
label.input_btn input[type="radio"] ~ .title::before
{
	border-radius: 100em;
}

label.input_btn input[type="radio"] ~ .title::after
{
	left: calc(0em + ((var(--input_btnsize) - var(--radio_size)) / 2));
	width: var(--radio_size);

	background-color: rgb(var(--arrow_color));
	border-radius: 100em;
}


/* <input>装飾　checkbox */
label.input_btn input[type="checkbox"] ~ .title::after
{
	--border_color				: var(--arrow_color);
	aspect-ratio: 3 / 2;

	width: var(--input_btnsize);

	border-top-width: var(--check_border_width);
	border-right-width: var(--check_border_width);
	rotate: 135deg;

	margin-top: -0.8em;
}

label.input_btn input[type="checkbox"]:checked ~ .title::after
{
	margin-top: -0.4em;
}


/* ------------------------------------------------------
	<placeholder> */
::placeholder
{
	color: rgb(var(--bk) / 0.3);
}

:focus::-webkit-input-placeholder
{
	color: transparent;
}