@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object] form
	@import"../css/test_line.css";
	------------------------------------------------------
	○px以上 + 印刷モード	@media print, screen and (min-width : ○px) {}
	○px以上				@media (min-width : ○px) {}
	○px以下				@media (max-width : ○px) {}
	------------------------------------------------------
	 [sp]		     ～  479	
	([tablet]	 480 ～     )
	 [pc]		1025 ～
====================================================== */
/* [pc, tablet, print] */
@media print, screen and (min-width : 480px) {}

/* [ - sp] */
@media (max-width : calc(480px - 1px)) {
.ModeSP 
{
}
}

/* [print] */
@media print {
}


form
{
}

form *
{
}
/*
	color: inherit;
	font-family: inherit;
*/

select,
input,
textarea,
button,
fieldset
{
	font-family: inherit;
	font-size: 16px;
	letter-spacing: inherit;
	margin: 0;
}

select,
/*
.select,
*/
input,
textarea,
button
{
	border-style: solid;
	border-width: 1px;
	vertical-align: middle;/* <textarea>の下に出る正体不明の余白を消す */
}
/*
	margin: -1px;
	margin-top: 0.25em;
	margin-bottom: 0.25em;

	border-radius: 0.2em;
	margin: -1px;
	background-color: #3a7dda;
	color: #fff;
	border-color: #dcdddd;
	background-color: #fff;
*/

input,
textarea
{
	font-family: Menlo, Monaco, 'Courier New', Consolas, monospace;
	letter-spacing: normal;
	font-weight: inherit;
}
/*
	font-size: inherit;
*/

form,
button
{
	padding: 0;
}

select,
input,
textarea
{
	padding: 0.25em 0.5em;
}

select,
button
{
	text-transform: none;
}

select
{
	background: rgba(255,255,255,1.0);
	white-space: inherit;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

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

input
{
}

/*
input:is([type="submit"], [type="button"], [type="reset"]):not(.ColorBtn)
input[type="submit"],
input[type="button"],
input[type="reset"]
/input[type="date"],/
/input[type="time"]/
{
	-webkit-appearance: none;
	background: transparent;
	cursor: pointer;
}
*/

input[type="submit"]
{
}

input[type="button"]
{
}

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

input[type="date"]
{
}

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

.kakunin label
{
	cursor: text;
}

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

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

/*
input.search,
input.reset
{
	border-width: 0;
	padding: calc(0.5em - 1px) 0em;
	line-height: 1;
	width: 6em;
	color: rgba(255,255,255,1.0);
}

input.search
{
	background-color: rgba(80,170,100,1.0);
}

input.reset
{
	background-color: rgba(100,100,100,1.0);
}
*/


button
{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	overflow: visible;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

/*
	width: 100%;
	min-height: 5em;
	border-width: 1px;
*/

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

textarea
{
}
/*
	font-size: 0.95em;
*/

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


/* 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: 3em;
	margin-bottom: 3em;
}
/*
	padding: 1.5em 1em;
*/

.BtnBg
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 3em;
}

.BtnBg>*,
.BtnBg>.ColorBtn
{
	display: inherit;
}

.BtnBg button
{
}

.BtnSubmit,
.BtnBack,
.BtnOk,
.BtnUpload
{
	line-height: 1;
}
/*
	padding: 1em 1.5em;
	border-width: 0;
*/

/* ボタン・リセット、確認画面へ */
.BtnSubmit
{
	text-align: center;
	margin-top: 1em;
}

/* ボタン・管理ページへ戻る、設定する、送信する */
.BtnSubmit,
.BtnSubmit input,
.BtnBack,
.BtnOk,
.ColorBtn
{
	min-width: 15em;
}

table :is(.BtnSubmit, .BtnSubmit input, .BtnBack, .BtnOk, .ColorBtn)
{
	min-width: initial;
}
/*
	max-width: initial;
*/

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

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

/* ボタン・アップロード */
.BtnUpload
{
	vertical-align: middle;
	margin-right: 0.5em;
}

/* ラジオボタン */
.BtnRadio
{
	margin-right: 0.5em;
	vertical-align: middle;
}

/* チェックボタン*/
.BtnCheck
{
	margin-right: 0.5em;
	vertical-align: middle;
}

/* [80文字以上] */
/*@media print, screen and (min-width : 80em) {*/
@media print, screen and (min-width : calc(16px * 80)) {
}

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

td select
{
	width: 100%;
}

/* [ - sp] */
@media (max-width : calc(480px - 1px)) {
.ModeSP select,
.ModeSP textarea,
.ModeSP input:is([type="text"], [type="tel"], [type="email"], [type="date"])
/*
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"]
*/
{
	font-size: 16px;
}

/*
		font-size: 16px;
		transform: scale(0.8);
		margin-left: calc(0em - (10% - 2px));
		padding: 0;
*/
	
.ModeSP input:is([type="text"], [type="tel"], [type="email"])
/*
input[type="text"],
input[type="tel"],
input[type="email"]
*/
{
	padding: 0 0.25em;
}

.ModeSP input[type="date"]
{
	padding: 0em;
}

.ModeSP :where(select, textarea, input[type="date"])
{
}

.ModeSP select
{
 max-width: calc(100vw - (4vw * 2));
}

.ModeSP td select:not([class*="Width"])
{
	width: 100%;
}

.ModeSP option
{
	font-size: 0.8em;
	white-space: inherit;
}
}


/* ------------------------------------------------------
	<select>装飾 */
.select
{
	display: inline-block;
	background-color: rgba(255,255,255,1.0);
}
/*
	background-position: 99% center;
*/

.select:before
{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 1em;
	width: 0.5em;
	height: 0.75em;
	transform: translateY(-50%) rotate(90deg);
	clip-path: polygon(
		2px 0,
		100% 50%,
		2px 100%,
		0% 100%,
		calc(100% - 2px) 50%,
		0 0
	);
	background-color: rgba(0,0,0,1.0);
	z-index: 5;
}
/*
.select:before
{
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: 0.5em;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	background-image: url(../img/arrow_ud.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
[230323]　afterは、モノを置くとpull-downが出ない
.select:after
	content: "";
	display: inline;
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
}
*/

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

/* ------------------------------------------------------
	<input>装飾 */
.hidden
{
	display: none;
}

/*
*/

label.input_btn
{
}

label.input_btn .title
{
	display: flex;
	align-items: center;
}

label.input_btn .title:before
{
	content: "";
	display: flex;
	width: 1em;
	height: 1em;
	border-width: 1px;
	margin-right: 0.5em;
}

label.input_btn .title:after
{
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
}

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

label.input_btn input
{
}

label.input_btn input:checked
{
}

label.input_btn input:checked ~ .title
{
}

label.input_btn input:checked ~ .title>b
{
}

label.input_btn input:is([type="checkbox"], [type="radio"])
{
	display: none;
}

/* <input>装飾　radio */
label.input_btn.radio
{
}

label.input_btn.radio .title:before
{
	border-radius: 100em;
}

label.input_btn.radio input:checked ~ .title:after
{
	content: "●";
}

/* <input>装飾　checkbox */
label.input_btn.checkbox
{
}

label.input_btn.checkbox .title
{
}

label.input_btn.checkbox .title:before
{
	border-radius: 0.15em;
}

label.input_btn.checkbox input:checked ~ .title
{
}

label.input_btn.checkbox input:checked ~ .title:after
{
	top: 0.25em;
	width: 1em;
	height: 0.75em;
	border-top-width: 2px;
	border-right-width: 2px;
	transform: rotate(135deg);
	line-height: 1;
}
/*
	transform: translateY(-50%) rotate(135deg);
	left: 0.125em;
label.input_btn.checkbox>b:before
{
}

.hidden:checked+label.input_btn.checkbox>b:before
{
	content: "■";
}

label.input_btn>span
{
	font-weight: normal;
	display: inline-block;
	vertical-align: middle;
}
*/


/* [ - sp] */
@media (max-width : calc(480px - 1px)) {
.ModeSP label.input_btn .title:before,
.ModeSP label.input_btn .title:after
{
	font-size: 2em;
}
.ModeSP label.input_btn.checkbox input:checked ~ .title:after
{
	top: -0.25em;
}
}



/* ------------------------------------------------------
	<placeholder> */
::placeholder
{
	color: rgba(0,0,0,0.3);
}

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