@charset "utf-8";
/* CSS Document */

/* ======================================================
	
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
------------------------------------------------------ */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
/*
    font-size:100%;
*/
    vertical-align:baseline;
    background:transparent;
}
body, hr,
a, img, div, p, blockquote,
strong, span, b, small, em,
dl, dt, dd,
ul, ol, li,
h1, h2, h3, h4, h5, h6, pre,
table, th, td, caption, thead, tbody, tfoot,
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, article,
.Border,
*:before,
*:after,
select,
input, textarea, button, label
	{
	border-style: solid;
	border-width: 0px;
}

/*
body {
    line-height:1;
}
*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content:'';
    content:none;
}

a {
	margin:0;
	padding:0;
	font-size:inherit;
	vertical-align:baseline;
	background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
/*
table {
    border-collapse:collapse;
    border-spacing:0;
}
*/

/* change border colour to suit your needs */
/*
hr {
	display:block;
	height:1px;
	border:0;
	border-top:1px solid #cccccc;
	margin: 1rem 0;
	padding:0;
	clear: both;
}
*/
input, select {
    vertical-align:middle;
}


/* ======================================================
	下準備
------------------------------------------------------ */
body	{
	-webkit-text-size-adjust: 100%;
	word-break: normal;
	word-wrap: break-word;
}
@media screen and (max-width: 800px) {
/* [160910] PC以外で余白にゴーストが出るのを防ぐ ※fixed非対応 */
	body	{
		background-attachment: scroll;
	}
}

/* <img> */
img	{-ms-interpolation-mode: bicubic;}

/* <iframe> */
iframe	{
	overflow-x:hidden;
	background-color: transparent;
	width: 100%;
/* [180309]HTML5でiframeの下に隙間ができた。vertical-alignで消す。
http://blog.doli.jp/blog/2013/post670/ */
	vertical-align: bottom;
}

/* news<iframe>　※iPadスクロールバー表示用 */
#news iframe	{ border: 1px;}



/* ------------------------------------------------------
	<hr> */
hr	{
	border-style: solid;
	border-width: 0px;
	border-color:  rgba(255,255,255,1.0);
	height: 1px;
	margin-top: 2em;
	margin-bottom: 2em;

/*
	background-image: url(../img/line_dot.png);
	background-repeat: repeat-x;
	background-position: left center;
*/
}
.ErrorMessage hr	{
	border-width: 1px;
}



/* ------------------------------------------------------
	<address> */
address	{ font-style: normal; }
address img	{ margin-bottom: 0.5rem; }





/* ======================================================
	文字 */
h1,h2,h3,h4,h5	{
	margin-top: 2em;
	margin-bottom: 2em;
	font-weight: normal;
/*	letter-spacing: 1px;*/
}
h1	{
	font-size: 1em;
}
h2	{ font-size:1.2em; }
h3	{ font-size:1.2em; }
h4,h5	{ font-size:1em; }

small,
.small,
.Small	{
	font-size: 0.8em;
	font-weight: normal;
}

big,
.big,
.Big	{
	font-size: large;
}
strong	{}
.StrongUnder	{
	border-style:solid;
	border-width:0 0 1px 0;
	border-color: #c33;
}
em	{
	font-style: normal;
	color: #c33;
}
.jisage	{padding-left:2em;}
.r	{text-align:right;}
.l	{text-align:left;}
.c	{text-align:center;}
.modoru	{
	font-size: 0.8em;
	text-align: right;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/* ※印 */
.kome li	{
	list-style : none;
	text-indent: -1em;
}
.kome	{
	padding-left: 1em;
	text-indent: -1em;
	text-align: left;
	display: inline-block;
}
.kome2	{
	padding-left:2em;
	text-indent:-2em;
}
.kome3	{
	padding-left:3em;
	text-indent:-3em;
}
.kome4	{
	padding-left:4em;
	text-indent:-4em;
}
small.kome,
span.kome	{
	display: block;
}


.nowrap	{white-space:nowrap;}
a .nowrap	{
	background-image: none;
	padding: 0;
}

/* 段落を付ける */
.Paragraph	{
	text-align: left;
}
.Paragraph p	{
	text-indent: 1em;
/*
	margin-top: 1rem;
	margin-bottom: 1rem;
*/
}



sup	{
	font-weight:normal;
	line-height:1.1;
	vertical-align: super;
}
sub	{
	font-weight:normal;
	line-height:1.1;
	vertical-align: sub;
}

/* underline */
u,
.UnderLineDouble	{
	white-space: nowrap;
}
.u,
.UnderLineDouble	{
	display: inline-block;
	line-height: 1.5em;
	min-height: calc(1.5em + 1px);
	margin-bottom: 1em;
/*
	margin: 0.25em 0;
*/
}
.u	{
	border-bottom-width: 1px;
}
td>div.u	{
	display: block;
}

.UnderLineDouble	{
	border-bottom-width: 3px;
	border-bottom-style: double;
}






/* ======================================================
	画像
------------------------------------------------------ */
img	{
	vertical-align: bottom;
	max-width: 100%;
	height: auto;

	object-fit: cover;
}
/* IE hack
http://qiita.com/ShioTsugi/items/4edf6fae3329c4904f29
http://qiita.com/syossan27/items/75348163b457154a19a9 */
img[src$=".svg"] {
	max-width: 100%;
	height: auto;
}

a img	{
	vertical-align: middle;
}

img	{ letter-spacing: 0px; }
.Main img	{
	border-style: solid;
	border-width: 0px;
	border-color: rgba(255,255,255,1.0);
}

/* 写真にフチをつける
.Snap	{ text-align: center; }
*/
.Snap img	{
	border-width: 5px;
	box-shadow: 0px 0px 5px rgba(29,21,21,0.2);
	-moz-box-shadow: 0px 0px 5px rgba(29,21,21,0.2);
	-webkit-box-shadow: 0px 0px 5px rgba(29,21,21,0.2);
}


/* 画像無し */
.NoImg	{
	position: relative;
	display: table;
	display: inline-block;
	width: 100%;
	text-align: center;
	opacity: 0.6;
	border-width: 1px;
	border-style: dashed;
	background-color: rgba(255,255,255,0.5);
}
.NoImg:after	{
	content: "no image";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	transform: translateY(-50%);
}
.NoImg img	{
	width: 100%;
}
/*
[221207]変更
.NoImg:after	{
	content: "no image";
	display: table-cell;
	display: inline-block;
	position: absolute;
	left: 0;
	top: calc(50% - 0em);
	width: 100%;
	height: 100%;
	line-height: 0em;
}

[200510]変更
.NoImg	{
	display: block;
	text-align: center;
	line-height: 150px;
	border-width: 1px;
	border-style: dashed;
	opacity: 0.6;
	background-color: rgba(255,255,255,0.8);
	min-height: 100px;
}
*/

/* トリミング */
.Trimming	{
	overflow: hidden;
	position: relative;
}
.Trimming img	{ position: absolute; }

.ImgBorderNone img	{ border-width: 0px; }


/* 範囲内へ納める・全体 */
.ImgFit	{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 100%;
}
.ImgFit img	{
	display: block;
	width: 100%;
}

/* 範囲内へ納める・はみ出させる */
.ImgCover	{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
	width: 100%;
}
.ImgCover img	{
	display: block;
	width: 100%;
}






/* ------------------------------------------------------
	pic */
figure,
figcaption,
.pic	{
	text-align:center;
}
figcaption,
.pic	{
	font-size:0.8em;
	line-height: 1.8;
	text-align: right;
}
figure img	{ margin-bottom: 0.5rem; }


/*
.ErrorMessage	{ text-align: left; }
*/





/* ======================================================
	<ul><ol><li> */
ul,ol	{
	margin-left:1.5em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

li	{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
li>.Wrap	{
	width: 100%;
}

td>ul,
td>ul>li,
td.Column>ul,
td.Column>ul>li
	{
	margin-top: 0;
	margin-bottom: 0;
}


/* <ul>選択肢の頭を揃えて並べる */
.ListTable ul	{
	list-style: none;
	margin-left: 0px;
	width: 100%;
}
.ListTable li	{
	display: block;
	float: left;
	padding: 0;
	width: 49.5%;	/* 1列2個 */
/*	width: 33%;	 1列3個 */
/*	width: 24.5%;	 1列4個 */
}
.ListTable li p	{	/* 字下げ */
	text-indent: -1.5em;
	padding-left: 1.5em;
}

/* <ul>選択肢の頭を揃えて並べる・幅自由 */
.ListTableFree ul	{
	list-style: none;
	margin-left: -5%;
	width: 105%;
}
.ListTableFree li	{
	display: block;
	float: left;
	padding: 0;
	margin-left: 5%;
}
.ListTableFree li p	{	/* 字下げ */
	text-indent: -1.5em;
	padding-left: 1.5em;
}


/* ------------------------------------------------------
	<li>で<table> */
.LiTable>ul,
.LiTable>ol	{
	list-style: none;
	display: table;
	margin-left: 0;
}

.LiTable>ul>li,
.LiTable>ol>li	{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

/* <ol>はナンバリング
https://blog.quusookagaku.com/14859 */
.LiTable>ol	{
	counter-reset:number;
}
.LiTable>ol>li:before	{
	counter-increment: number;
	content: counter(number) ". ";
}


/* <li>○数字 */
.LiAnyCh	{
	list-style-type: none;
	margin-left: 0px;
}
.LiAnyCh li	{
	text-indent: -1em;
	padding-left: 1em;
}

/* <li>■ */
.LiSquare	{ list-style-type: square; }





/* ======================================================
	<dl> */
dt	{
	font-weight: bold;
	margin-top: 2em;
	margin-bottom: 2em;
}
dd	{
	margin-left:2em;
}





/* ======================================================
	<table>
------------------------------------------------------ */
table,
th,
td	{
}

table:not(:last-child)	{
	margin-bottom: 1.5em;
}

caption	{
	text-align:left;
	font-weight: bold;
}
caption span	{}

tr	{ }



/* <thead> */
thead th small	{
	font-size: 1em;
	font-weight: normal;
}
thead.l th,
thead.l td	{
	text-align: left;
}
thead.c th,
thead.c td	{
	text-align: center;
}
thead.r th,
thead.r td	{
	text-align: right;
}

/* <tfoot> */
tfoot th,
tfoot td,
.Tfoot th,
.Tfoot td	{
	text-align: right;
	white-space: nowrap;
	width: auto;
}
tfoot.l th,
tfoot.l td	{
	text-align: left;
}
tfoot.c th,
tfoot.c td	{
	text-align: center;
}


/* <table>の中の<table> */
table table,
table table th	{
	width: auto;
}
table table td	{ padding-left: 0px; }


/* 幅自由の<th> */
.ThAuto th	{
	width: auto;
}

th table,
td table	{
	border-collapse:inherit;
	background: none;
}
td th,
td td	{
	border-width: 0;
	background: none;
}


.ie6 th,
.ie7 th,
.ie8 th,
.ie9 th	{width: 13em;}
th span	{}


thead th,
thead td,
tfoot th,
tfoot td
	{
	border-style: solid;
}


/* センター揃、センター揃えの中の<table> */
.TableCenter	{ text-align: center; }
.TableCenter table	{
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
/* 左揃えの中の<table> */
.l table	{
	width: auto;
	margin-left: 0px;
	margin-right: auto;
}
/* 右揃えの中の<table> */
.r table	{
	width: auto;
	margin-left: auto;
	margin-right: 0px;
}
/* 幅自由の<table> */
.TableAuto,
.TableAuto table,
.TableAuto th,
.TableAuto td	{ width: auto; }
/* 幅自由の<table>・中揃え */
.TableAutoCenter	{
	margin-left: auto;
	margin-right: auto;
}
.TableAutoCenter,
.TableAutoCenter table,
.TableAutoCenter th,
.TableAutoCenter td	{ width: auto; }
/* 幅自由の<table>・左揃え */
.TableAutoLeft	{
	width: auto;
	margin-left: 0;
	margin-right: auto;
}
.TableAutoLeft,
.TableAutoLeft table,
.TableAutoLeft th,
.TableAutoLeft td	{ width: auto; }
/* 幅自由の<table>・右揃え */
.TableAutoRight	{
	width: auto;
	margin-left: auto;
	margin-right: 0;
}
.TableAutoRight,
.TableAutoRight table,
.TableAutoRight th,
.TableAutoRight td	{ width: auto; }
/* 線を消す */
.TableNoLine,
.TableNoLine table,
.TableNoLine th,
.TableNoLine td,
.TableNoLine thead,
.TableNoLine thead th,
.TableNoLine thead td
.TableNoLine tfoot,
.TableNoLine tfoot th,
.TableNoLine tfoot td
	{ border-width: 0; }
.TableNoLine td	{ padding-left: 0px; }
/* 背景を消す */
.TableNoBg,
.TableNoBg table,
.TableNoBg th,
.TableNoBg td	{
	background-image: none;
	background-color: transparent;
	background-color: rgba(255,255,255,0);
}


/* 線を入れる */
.TableLine,
.TableLine table,
.TableLine th,
.TableLine td
	{ border-width: 1px; }
.TableLine thead th,
.TableLine thead td,
.TableLine tfoot th,
.TableLine tfoot td
	{
	border-width: 2px 1px;
}
/* 線を入れる・破線 */
.TableLine.BorderStyleDashed th,
.TableLine.BorderStyleDashed td
	{ border-style: solid dashed; }
/* 線を入れる・点線 */
.TableLine.BorderStyleDotted th,
.TableLine.BorderStyleDotted td
	{ border-style: solid dotted; }

/* 装飾は引き継ぎつつ 
.TableSimple,
.TableSimple table,
.TableSimple th,
.TableSimple td	{
}
*//* レイアウトとして使う */
.TableLayout,
.TableLayout table,
.TableLayout th,
.TableLayout td	{
	padding: 0px;
	border-width: 0;
	vertical-align: top;
	background-image: none;
	background-color: rgba(255,255,255,0);
	background-color: transparent;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	color: inherit;
}
.TableLayout,
.TableLayout table	{
	border-collapse: collapse;
	border-spacing: 0;
	width: auto;
	overflow: auto;
	border-radius: 0;
}
.TableLayout th:not([class]),
.TableLayout td:not([class])
	{
	width: auto;
}
.TableLayout th:first-child
	{
	padding-left: 0px;		
}


/* 等幅 */
.TableNameList tbody td	{
	font-family: monospace;
	font-size: 101%;
}

/* <header><table> */
#Header table,
#Header th,
#Header td	{
	background: none;
	border-width: 0;
	padding: 0;
	width: auto;
}

/* <tbody>縦複数列の<th> */
.TateThAuto th	{
	vertical-align: middle;
	width: 8em;
}
.TateThAuto th.TateThAutoTitle	{
	width: 1em;
	line-height: 1.2;
	text-align: center;
	padding: 0 1em;
}

/* <th>幅auto */
.ThAuto th	{
	width: auto;
	min-width: initial;
	max-width: initial;
}

/* <th>幅auto+自動改行禁止 */
.ThNoWrap th	{
	width: auto;
	white-space: nowrap;
}

/* <thead>1px */
.Solid1px th,
.Solid1px td
	{
	border-width: 1px;
}


/* 必須項目 */
.TableRequired tbody th	{
	padding-left: calc((1.5em * 0.8) * 1.5);
}
tbody th.Required	{
	text-indent: calc(0em - (1.5em * 0.8));
}
.Required::before,
.Required::after	{
	display: inline-block;
	width: 1em;
	font-weight: normal;
	text-align:center;
	line-height:1;
	letter-spacing: 0;
	white-space: nowrap;
	text-indent:0;
/*
	margin-left: 0.5em;
	margin-right: 0.5em;
	font-size: smaller;
	font-size: 0.8em;
	vertical-align: super;
*/
}
tbody th.Required::before,
tbody th.Required::after	{
	font-size: 0.8em;
}

/* 共通 */
sup.Required	{
	display: inline;
	vertical-align: middle;
}
sup.Required::before,
sup.Required::after	{
}

.SupNavi	{
	text-align: left;
}
.SupNavi:before,
.SupNavi:after	{
}
.SupNavi:before	{
}
.SupNavi:after	{
}




/* シマシマ */
.zebra>tr>th,
.zebra>tr>td
	{
}
.Stripe>tbody>tr>th,
.Stripe>tbody>tr>td,
.Stripe thead th,
.Stripe thead td,
.Stripe tfoot th,
.Stripe tfoot td	{
	padding-left: 0.5em;
	padding-right: 0.5em;
}


/* ぴったり2段組み */
.TableColumn2L	{}
.TableColumn2L>ul	{
	margin: 0;
	list-style: none;
	width: 100%;
/*
	display: table;
	table-layout: fixed;
*/
}
.TableColumn2L>ul>li	{
	margin: 0;
	display: block;
	vertical-align: top;
	margin: 0;
/*
	display: table-cell;
*/
}
.TableColumn2L>ul>li:last-child table	{
	margin-left: -1px;
	width: calc(100% + 1px);
}
/*
.TableColumn2L	{
	width: calc(50% + 1px);
	margin-right:-1px;
	float: left;
}
.TableColumn2R	{
	width: 50%;
}
*/

/* 直前の<table>にぴったり */
.FitH	{
	margin-top: -1.5em;
	border-top-width: 0px;
}


/* 価格 のセル*/
.TablePrice td	{
	text-align: center;
	vertical-align: middle;
}
.PriceCell,
thead .PriceCell,
tfoot .PriceCell	{
	white-space: nowrap;
	text-align: right;
}
/* 時間のセル */
.TimeCell	{
	white-space: nowrap;
	text-align: center;
}
/* 単位(円だけとか)のセル */
.TdUnit	{
	padding-left: 0px;
	padding-right: 0px;
}
/* 「数量」のセル */
.QuantityCell	{
	width: 5em;

}
.Print .QuantityCell	{
	width: 3em;
}

/* 1行の縦書き風のセル */
.VerticalWriting	{
	width: 2em;
	padding-left: 0px;
	padding-right: 0px;
	letter-spacing: normal;
	white-space: normal;
}
.VerticalWriting>p	{
	width: 1em;
	line-height: 1.1;
	margin: auto;
	font-weight: inherit;
	text-align: center;
}


table.Fixed	{
	table-layout: fixed;
}
table.Fixed tbody th	{
	min-width: 8em;
	max-width: 13em;
}








/* ======================================================
	<form>
*/
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) / 0.3);
	outline-style: solid;
	outline-offset: 0em;
	border-radius: 0.1em;
}

form,
button
{
	padding: 0;
}

input,
textarea
{
	padding: 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;
	cursor: pointer;
}

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


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

	background-color: rgb(var(--w));
}

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"]
{
	cursor: pointer;
}

input[type="button"]
{
	cursor: pointer;
}

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

input[type="date"]
{
}

input[type="reset"]
{
	cursor: pointer;
}

input[type="file"]
{
	cursor: pointer;
}


.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;
}

label + label
{
	margin-left: 1em;
}



.InputS
{
	width: calc(1.15em * 12);
}
.InputM
{
	width: 50%;
}
.InputMin
{
	width: calc(1.15em * 6)
}

.InputL,
.TextareaL,
.TextareaMax
{
	width: 100%;
}

.TextareaMax
{
	height: 15em;
}

.InputRight
{
	text-align: right;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* 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;
	padding: 0.5em;
	min-width: 15em;
}


/* ボタン・送信する */
.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;
}