@charset "utf-8";


/* ============================================================================================================
header,
header *
{
	background-color: rgb(255 0 0 / 0.1);
}
.contents,
.contents *
{
	background-color: rgb(0 128 0 / 0.05);
}
footer,
footer *
{
	background-color: rgb(255 165 0 / 0.2);
}
============================================================================================================ */

:root
{

	--w						: 255 255 255;
	--bk					: 0 0 0;

	--r						: 166 28 69;
	--or				: 243 151 0;
	--y					: 255 193 7;

	--gr					: 28 166 125;
	--gr_w					: 221 242 236;
	--gr_dark				: 0 87 49;
	--gr_dark_01			: 229 238 234;

	--bl					: 128 163 253;
	--bl_w					: 243 249 255;
	--dark_pk				: 166 28 69;
	--navy					: 40 29 87;

	--bk_bg					: 236 236 236;

	--theme					: var(--gr);
	--theme_w				: var(--gr_w);
	--theme_dark			: var(--gr_dark);
	--theme_dark_01			: 229 238 234;


	--header_h				: 3em;
	--footer_h				: 5em;
	--button_h				: 3em;

	--th					: var(--bk) / 0.1;
	--th					: 242 241 241;

	--select_panel_h		: calc(var(--button_h) + var(--gap));

	--a						: 42 71 156;
	--border_r				: 0.5em;

	--gap					: 1em;
	--gapL					: 3em;
	--padding				: 1em;
	--td_gap				: calc(0.5em - 2px);
}

*
{
	-webkit-box-sizing: border-box;/*	Webkit系用 */
	-moz-box-sizing: border-box;/*		Firefox用 */
	box-sizing: border-box;/*			標準 */
	hyphens: manual;

	text-underline-offset: 0.25em;
	text-decoration-color: rgb(var(--a)) !important;
	text-decoration-skip-ink: none;

	position: relative;

	border-style: solid;
	border-color: rgb(var(--bk));
	border-width: 0;
}

*:before,
*:after
{
	box-sizing: inherit;

	border-style: solid;
	border-color: rgb(var(--bk));
	border-width: 0;
}


.wrapM,
.footer_bg .wrapM
{
	max-width: initial;
	min-width: initial;
	width: initial;
	margin: 0;
}

.wrap
{
	max-width: initial;
	min-width: initial;
	width: initial;
	margin: 0;
}


.flow-root
{
	display: flex;
}

.float_l
{
	float: none;
}


.fix_l
{
	position: relative;
	left: initial;
	right: initial;
	top: initial;
	bottom: initial;
}


.cl-section
{
	margin: 0;
	width: auto;
}


/* ------------------------------------------------------------------------------------------------------------
	<文字>
------------------------------------------------------------------------------------------------------------ */
h1, h2, h3, h4, h5
{
	font-size: inherit;
	margin: 0;
}

h2
{
}
h2>b
{
	font-size: 1.5em;
}

.main h2>b
{
	font-size: 1.2em;
}


.nowrap,
.keep_all_break_word,
.price
{
	word-break: keep-all;
	overflow-wrap: break-word;
}
.nowrapL
{
	white-space: nowrap;
}

.tate
{
}
/*
.tate
{
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	text-orientation: upright;
}
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl
*/
.tate .eu
{
	text-combine-upright: all;
	-ms-text-combine-horizontal: all;
}

table .tate
{
	display: inline-block;
}


.c
{
	text-align: center;
}
.l
{
	text-align: left;
}
.r
{
	text-align: right;
}



/* ------------------------------------------------------------------------------------------------------------
	<a>
------------------------------------------------------------------------------------------------------------ */
a
{
	display: flex;
	align-items: center;
	gap: var(--gap);
}


.Btn02 a
{
	margin: 0;
	background-color: transparent;
	border-width: 0;
	color: inherit;
}

.Btn08
{
	width: 12em;
	height: var(--button_h);

	margin: auto;
}
.Btn08 a
{
	display: grid;
	align-items: center;
	width: 100%;
	height: 100%;

	margin: initial;
	padding: 0;

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

a>b
{
}


table a
{
	color: rgb(var(--a));
	text-decoration-line: underline;
}

table .list_y
{
}


.active
{
}
.active::before
{
	content: "";
	display: block;

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

	width: 100%;
	height: 100%;

	background-color: rgb(var(--or) / 0.2);
}



/* ------------------------------------------------------------------------------------------------------------
	<img>
------------------------------------------------------------------------------------------------------------ */
img
{
	max-width: 100%;
	width: auto;
	height: auto;

	object-fit: contain;
}


*[class*="icon_"]
{
	aspect-ratio: 1;
	display: block;
	width: 1em;
}
*[class*="icon_"] img
{
	aspect-ratio: 1;
	width: 100%;
	height: initial;
}

img.icon
{
	aspect-ratio: 1;
	display: block;
}


.logo_img img
{
	height: calc(var(--header_h) - (0.5em * 2));
}

.Login .logo_img img
{
	height: 5vh;
}


.header-navi img
{
	margin: 0;
}


canvas
{
	max-width: 100%;
	min-width: 90%;
}
/*
[250827-1611]　タグの「width="■" height="■"」より大きくなるような指定をすると、描画がずれる
	width: 100%;
	height: auto;
*/


/* ------------------------------------------------------------------------------------------------------------
	<table>
	[251017-0930/251022-1332]　<table>スクロール見直し　※:before,:afterで線を引くと、セル内の<a>が触れなくなる
------------------------------------------------------------------------------------------------------------ */
table
{
	text-align: left;

	width: 100%;
	border-collapse: collapse;
	border-collapse: separate;
	border-spacing: 0;

	background-color: rgb(var(--bk));
}
/*
[260107-1011]　ヨコスクロールで消える
	border-left-width: 1px;
*/

table caption
{
	font-weight: bold;
	padding-bottom: 0.5em;
}

table :is(th, td)
{
	vertical-align: top;

	padding: var(--td_gap);

	border-right-width: 1px;
	border-bottom-width: 1px;
	background-color: rgb(var(--w));
}
table tr:first-child :is(th, td),
table .thead :is(th, td)
{
	border-top-width: 1px;
}
table :is(th, td):first-child
{
	border-left-width: 1px;
}
/*
*/

table :is(thead, .thead, tfoot, .tfoot) :is(th, td)
{
	font-weight: bold;
}

table :is(thead, .thead) :is(th),
table :is(tfoot, .tfoot) :is(th, td)
{
	background-color: rgb(var(--th));
}

table :is(thead, .thead)
{
}
table :is(thead, .thead) :is(th, td)
{
	font-size: 0.9em;

	vertical-align: middle;
	line-height: 1.5;

	padding-left: calc(var(--td_gap) / 2);
	padding-right: calc(var(--td_gap) / 2);
}
table :is(thead, .thead) :is(th, td)
{
	text-align: center;
}

:is(th, td).icon
{
	width: 2.5em;
}


/*
	scroll table
		[251017-0930/251022-1332]　<table>スクロール見直し※:before,:after使わない
		[250826-0930/250827-1722]　<table>スクロール
*/
:is(.scroll_table, .scroll_area)
{
	max-width: 100%;
	max-height: 100%;
	overflow: auto;
}

:is(.scroll_table, .scroll_area)+.Btn08
{
	position: sticky;
	left: 0;
	right: 0;
	bottom: 0;
}

:is(.scroll_table, .scroll_area) table
{
}

:is(.scroll_table, .scroll_area) table :is(thead, .thead)
{
	position: sticky;
	left: 0;
	right: 0;
	top: 0;

	z-index: 10;
	background-color: rgb(var(--w));
}

:is(.scroll_table, .scroll_area) table tbody th:first-child
{
	position: sticky;
	left: 0;
	top: 0;

	z-index: 5;
}

:is(.modalArea, details) table :is(thead, .thead) :is(th, td)
{
	background-color: rgb(246 245 245);
}

.modalArea :is(.scroll_table, .scroll_area)
{
	max-height: 45vh;
}


/* [250917-1015]　セルいっぱいに斜めの線を引く */
.slash_cell
{
	aspect-ratio: 1;

	text-align: center;
	letter-spacing: normal;
	line-height: 1;

	padding: 0;
}
.slash_cell::after
{
	--slash_line_w			: 1.5px;

	content: "";
	display: block;

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

	width: 100%;
	height: 100%;

	border-top-width: 1px;
	
	clip-path: polygon(
		calc(100% - var(--slash_line_w)) 0%,
		100% 0%,
		var(--slash_line_w) 100%,
		0% 100%
	);
	background-color: rgb(var(--bk) / 0.8);
}

.slash_cell>*
{
	display: grid;
	width: 100%;
	height: 100%;

	line-height: 1;
}

.slash_cell>*>span
{
	aspect-ratio: 1;
	position: absolute;
	width: 0;
	overflow: hidden;
}

.slash_cell>*>b
{
	aspect-ratio: 1 / 1;

	display: grid;
	align-items: center;
	width: 50%;
}
.slash_cell>*>b:first-of-type
{
	padding: 0.25em 0 0 0.25em;
}
.slash_cell>*>b:last-of-type
{
	margin-left: auto;
	margin-right: 0;
	padding: 0 0.25em 0.25em 0;
}


/* <table>にする */
.table
{
	display: table;
}

.table>*
{
	display: table-row;
}

.table>*>*
{
	display: table-cell;
}

.table .th
{
	white-space: nowrap;
}


/* ------------------------------------------------------------------------------------------------------------
	<ul><ol><dl>
------------------------------------------------------------------------------------------------------------ */
:is(ul, ol)
{
	display: grid;
	gap: 0em;

	margin: 0;
}

ul>li
{
	margin: 0;
}


body>nav ul
{
	display: block;
	list-style: none;
}
body>nav .side ul
{
	padding: 0;
}
body>nav ul.footer
{
}


header ul
{
	list-style: none;
	padding: 0;
}


main :is(ul, ol)
{
}
main :is(ul, ol)>li
{
}

main ul
{
}

main ol
{
}


.Login ul
{
	list-style: none;
	padding: 0;
}



/* ------------------------------------------------------------------------------------------------------------
	<form>
------------------------------------------------------------------------------------------------------------ */
form
{
	margin: 0;
}

:is(
	select,
	select *,
	option,
	input,
	textarea,
	button,
	label
)
{
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	font-size: 16px;
	color: inherit;

	line-height: inherit;

	width: auto;
	max-width: 100%;
	
	padding: 0 0.25em;
	border-width: 0;
	border-color: transparent;

	outline-width: 1px;
	outline-color: rgb(var(--bk) / 0.3);
	outline-offset: -2px;
	outline-style: solid;

	background-color: transparent;
	background-color: rgb(var(--w));
	border-radius: 0.2em;
}

select
{
	width: 100%;
	
	padding-top: 0.25em;
	padding-bottom: 0.25em;
}
/*
	border-width: 1px;
	border-color: rgb(var(--bk) / 0.3);
*/
select *[aria-hidden="true"]
{
	background-color: rgb(var(--r));
}

input
{
	text-align: inherit;
}
input:is(
	[type="text"],
	[type="tel"],
	[type="email"],
	[type="url"],
	[type="color"]
),
textarea,
table select
{
	width: 100%;
}
input.unit
{
	width: calc(100% - 2em);
}

select,
input:is(
	[type="date"],
	[type="month"],
	[type="radio"],
	[type="checkbox"]
)
{
	cursor: pointer;
	outline-width: 0;
	margin: 0;
	background-color: rgb(var(--theme) / 0.3);
}

input:is(
	[type="date"],
	[type="month"]
),
.customer .main td.new_comment_date
{
}
body>nav input:is(
	[type="date"],
	[type="month"]
)
{
	width: 100%;
}
.header-navi input:is(
	[type="date"],
	[type="month"]
)
{
	width: 8.5em;
}
table input:is(
	[type="date"],
	[type="month"]
)
{
	width: 100%;
	
	padding-top: 0em;
	padding-bottom: 0em;
}

input[type="color"]
{
	vertical-align: middle;
	padding: 0;
	outline-offset: 0;
}

table input:is(
	[type="radio"],
	[type="checkbox"]
)
{
	scale: 1.25;
}
table input:is(
	[type="file"]
)
{
	width: 100%;
	outline-width: 0;
	outline-offset: 0;
	padding: 0;

	font-size: 0.9em;
	text-align: left;
}


input[size="10"]
{
	width: 10em;
}


.flex input:not(
	[type="radio"],
	[type="checkbox"]
)
{
	width: 100%;
}


button
{
	outline-offset: 0;
}
button[onclick*="ColAdd"]
{
	outline-width: 0;
	padding: 0;
}


label
{
	font-size: inherit;
	outline-width: 0;

	display: inline-flex;
	align-items: baseline;
	gap: 0.5em;

	padding: 0;

	cursor: pointer;
}
label+label
{
	margin-left: 3em;
}

:is(.flex, .list_y, .grid)>label+label
{
	margin-left: 0em;
}

.select_panel label
{
	background-color: transparent;
}

.modalArea label,
.modalArea label>*
{
	background-color: transparent;
}


/* ------------------------------------------------------------------------------------------------------------
	<item>
------------------------------------------------------------------------------------------------------------ */
.note
{
	margin-left: 1em;
}


.list
{
	display: grid;
	gap: var(--gap);
}

:is(.flex, .list_y)
{
	display: flex;
	align-items: center;
	gap: var(--gap);
}

:is(.flex_wrap, .list_y_wrap)
{
	flex-wrap: wrap;
}
:is(.flex_no_wrap, .list_y_no_wrap)
{
	flex-wrap: nowrap;
}

.list_y+.list_y
{
	margin-top: 0.25em;
}

/* [flex]　左右・中寄せ */
:is(.flex, .list_y).C
{
	justify-content: center;
}
/* [flex]　左右・左寄せ */
:is(.flex, .list_y):is(.L, .j_start)
{
	justify-content: start;
}
/* [flex]　左右・右寄せ */
:is(.flex, .list_y):is(.R, .j_end)
{
	justify-content: end;
}
/* [flex]　左右・拡げる */
:is(.flex, .list_y).J
{
	justify-content: space-between;
}
/* [flex]　上下・中寄せ */
:is(.flex, .list_y).align_c
{
	align-items: center;
}

:is(.flex, .list_y) label
{
	margin: initial;
}

:is(.flex, .list_y)[class*="gap"]
{
}
:is(.flex, .list_y).gap_min
{
	gap: 0.25em;
}
:is(.flex, .list_y).gap1px
{
	gap: 1px;
}
:is(.flex, .list_y).gap1px-1em
{
	gap: 1px 1em;
}
:is(.flex, .list_y).gap1px-3em
{
	gap: 1px 3em;
}
:is(.flex, .list_y):is(.gap_0, .gap0)
{
	gap: 0;
}
:is(.flex, .list_y).gap_ud_0
{
	gap: 0 var(--gap);
}
:is(.flex, .list_y).gap3
{
	gap: 3em;
}
:is(.flex, .list_y).gap0-3
{
	gap: 0em 3em;
}
:is(.flex, .list_y).wrap
{
	flex-wrap: wrap;
}

.w100
{
	width: 100%;
}

.grid
{
	--grid_num				: 1;

	display: grid;
	grid-template-columns: repeat(var(--grid_num), 1fr);
}
.grid.gap_min
{
	gap: 0.25em;
}
.grid.gap1px
{
	gap: 1px;
}
.grid.gap1
{
	gap: 1em;
}
.grid.gap3
{
	gap: 3em;
}

.grid.grid2
{
	--grid_num				: 2;
}
.grid.grid3
{
	--grid_num				: 3;
}
.grid.grid4
{
	--grid_num				: 4;
}



table .list
{
	gap: 0;
}

.price
{
	text-align: right;
	white-space: nowrap;

	max-width: 7em;
}

.kome
{
	text-indent: -1em;
	padding-left: 1em;
}


/* ------------------------------------------------------
	絞り込み
*/
main .select_panel
{
	--th					: 255 255 255 / 0;

	position: sticky;
	left: 0;
	right: 0;
	top: 0;

	z-index: 10;

	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gap);

	height: var(--select_panel_h);

	padding: 0.5em var(--padding);

	/* スクロールで下が見えないよう、bgはベタで */
	background-color: rgb(var(--theme_dark_01));

	border-radius: var(--border_r);
}
/*
	margin-bottom: var(--gap);
*/

main .select_panel table
{
	margin: initial;
	background-color: rgb(var(--w));
	background-color: transparent;
	border-width: 0;
}
main .select_panel table :is(th, td)
{
	vertical-align: middle;
	border-color: transparent;
	background-color: transparent;
}
main .select_panel table :is(th)
{
	width: 10em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

main .select_panel .Btn08
{
	justify-self: end;
	margin: initial;
	max-width: 100%;
}

main .select_panel a
{
	margin: initial;
}


/* ------------------------------------------------------
	開け閉め
*/
.accordion
{
	background-color: rgb(var(--bk) / 0.075);
	border-radius: var(--border_r);
}
/*

	max-height: 50vh;
	overflow-y: auto;
*/

.accordion summary
{
	font-weight: bold;
	
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: var(--padding);

	cursor: pointer;
}
/*
	position: relative;
	position: sticky;
	left: 0;
	right: 0;
	top: 0;

	background-color: rgb(var(--bk_bg));

	z-index: 5;
*/

.accordion summary::-webkit-details-marker
{
	display: none;
}

.accordion summary::after
{
	content: '';
	
	width: 0.75em;
	height: 0.75em;
	margin-left: 10px;

	border-bottom-width: 3px;
	border-right-width: 3px;

	transition: transform .3s;
	transform: translateY(-25%) rotate(45deg);
}
/*
*/

.accordion[open] summary::after
{
	transform: rotate(225deg);
}

.accordion .detail
{
	margin: 0;
	padding: var(--padding);
	padding-top: 0;

	opacity: 0;

	transform: translateY(-10px);
	transition: transform .5s, opacity .5s;
}

.accordion[open] .detail
{
	transform: none;
	opacity: 1;
}


/* ------------------------------------------------------
	モーダルウィンドウ
*/
#modalArea .modalWrapper
{
	padding: calc(var(--padding) * 1.5);

	min-width: initial;
	width: 70%;
	min-height: initial;
}
/*
	min-height: initial;
	height: 60%;
*/

#modalArea :is(
	form,
	.modalContents
)
{
	height: 100%;
}


/* 閉じる */
#modalArea .closeModal
{
	line-height: 0;
	font-weight: bold;
	filter: invert(1);
}
/*
*/

#modalArea .closeModal::before
{
	aspect-ratio: 1;

	content: "";
	display: block;

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

	width: calc(100% + 0.5em);

	background-color: rgb(var(--w));
	border-width: 3px;
	border-color: rgb(0 0 0);
	border-radius: 100em;

	z-index: -1;
}


#modalArea .modalContents
{
	font-size: 1.2em;

	display: grid;
	align-items: start;
	gap: var(--gap);
}

#modalArea .modalContents select
{
	font-size: calc(var(--font) * 1.2);
}

#modalArea .modalContents .modal_title
{
}

#modalArea .modalContents .modal_detail
{
	display: grid;
	gap: 0;

	padding: var(--padding);
	padding-top: 0;

	background-color: rgb(var(--bk) / 0.075);
	border-width: 1px;
	border-radius: var(--border_r);

	overflow: hidden;
}
/*
	gap: var(--gap);
*/

#modalArea .modalContents .modal_detail>*
{
}

/* [250826-0930/250827-1517]　タテスクロール */
#modalArea .modalContents .modal_detail .list
{
	max-height: 50vh;
	overflow: auto;
}


#modalArea :is(.shohin, .head_line)
{
	font-weight: bold;
	padding-top: calc(var(--padding) / 2);
	padding-bottom: calc(var(--padding) / 2);
}

#modalArea .customer_set
{
	justify-content: initial;
	font-size: inherit;

	margin-left: calc(0em - var(--padding));
	margin-right: calc(0em - var(--padding));
	padding: calc(var(--padding) / 2) var(--padding);
	
	background-color: rgb(var(--w));
	border-bottom-width: 1px;
}

#modalArea .upload_area
{
	max-height: 55vh;
	overflow-y: auto;
	
	display: grid;
}
#modalArea .upload_area>.wrap
{
	position: sticky;
	left: 0;
	right: 0;
	top: 0;

	z-index: 5;

	padding-bottom: var(--gap);

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

#modalArea .upload_area #preview
{
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--gap);
}
#modalArea .upload_area #preview>p
{
	width: 100%;
}
#modalArea .upload_area #preview img
{
	background-color: rgb(var(--w));
}


#modalArea .modalContents .modal_footer
{
	align-self: self-end;

	display: block;
}

#modalArea .modalContents .modal_footer>*
{
	justify-content: initial;
	justify-content: space-between;
}

#modalArea .modalContents .modal_footer button
{
	min-width: 8em;
	max-width: initial;
	height: var(--footer_h);
}
/*
	width: 100%;
*/

/* [モーダルウィンドウ]　ボタン・決定 */
#modalArea .modalContents .modal_footer button.ok
{
	flex-grow: 2;
}


/* ------------------------------------------------------
	[250903-1055/250917-1705]　PCにもプルダウン追加した
	[250826-0930/250827-1517]
	<header>　ドライバー　プルダウン
*/
[onclick*="DrawerMenu"]
{
	cursor: pointer;
}

header .drawer
{
	position: absolute;
	left: -0.75em;
	right: initial;
	top: calc(100% + 1em);

	padding: 0;

	word-break: keep-all;
	overflow-wrap: break-word;

	border-width: 0;
	border-color: transparent;
	border-radius: var(--border_r);

	box-shadow: none;
	filter: drop-shadow(0 0 1px rgb(var(--bk))) drop-shadow(0.25em 0.25em 0.5em rgb(var(--bk) / 0.2));

	z-index: 15;
}
header .drawer::after
{
	aspect-ratio: 1 / cos(30deg);
	
	content: "";
	display: block;

	position: absolute;
	left: 1em;
	bottom: 100%;

	width: 1em;

	background-color: rgb(var(--w));
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.header-navi .drawer
{
	left: 0;
}


header .drawer ul
{
	width: auto;
	
	padding: 0;
	border-radius: var(--border_r);
	overflow: hidden;
}

header .drawer ul>li
{
	aspect-ratio: initial;

	width: initial;
	padding: 0;
}

header .drawer li.active
{
	background: rgb(var(--dark_pk) / 0.2);
}

header .drawer li:hover
{
	opacity: inherit;
	background: rgb(var(--dark_pk) / 0.1);
}

header .drawer li a
{
	padding: 1em;
}



/* ------------------------------------------------------------------------------------------------------------
	ボタン
------------------------------------------------------------------------------------------------------------ */
.btn
{
	text-align: center;

	display: flex;
	justify-content: space-between;
}

.btn>*,
.btn a
{
	height: 100%;
}

.btn>*
{
	display: flex;
	justify-content: end;
	gap: var(--gap);
}

.btn>*.btnR
{
	justify-self: end;
	margin-left: auto;
	margin-right: 0;
}

.btn :is(a, .a, button),
.btn .Btn02 a
{
	--btn_count			: 7;

	display: grid;
	justify-content: center;
	align-items: center;

	max-width: calc((100vw - (var(--gap) * (var(--btn_count) - 2))) / (var(--btn_count) - 1));
	width: calc((100vw - (var(--gap) * (var(--btn_count) - 1))) / var(--btn_count));
	padding: 0;

	border-width: 1px;
	border-radius: var(--border_r);

	color: inherit;
}

.btn :is(a, .a, button)>b,
.btn .Btn02 a>b
{
	font-size: 1.2em;
	font-weight: bold;
}

.photo .btn :is(a, .a, button)
{
	max-width: initial;
}

.c :is(a, button)
{
	justify-content: center;
}


table .btn
{
	display: block;
	width: 100%;
}
table .btn :is(a, .a, button)
{
	text-decoration-line: none;
	width: 100%;

	padding-left: 0.25em;
	padding-right: 0.25em;
}


/* ボタン・基本 */
.btn :is(a, .a, button)
{
	--button_c				: var(--theme);

	background-color: rgb(var(--button_c));
	border-color: rgb(var(--button_c));
	outline-color: rgb(var(--button_c));
	color: rgb(var(--w));
}

/* ボタン・基本　空ボタン */
.btn .a.blank
{
	--button_c				: 255 255 255 / 0;

	aspect-ratio: 1;
	position: absolute;
	width: 0;
	overflow: hidden;
}


/* ボタン・全消 */
.btn a[onclick="AllDel();"],
.btn button.cancelModal
{
	--button_c				: var(--bk);

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


/* ボタン・戻る */
.btn a[href="top_menu.php"]
{
	--button_c				: var(--bk) / 0.075;
}

.btn a.back
{
	background-color: transparent;
	border-color: inherit;
	color: inherit;
}


/* ボタン・一括ナビ */
.btn a.Navi
{
	--button_c				: var(--gr);

	justify-self: start;

	margin-left: 0;
	margin-right: auto;

	background-image: none;
	color: rgb(var(--w));
}
.btn a.Navi>*
{
	width: 2.5em;
}

/* ボタン・決定 */
.btn a[onclick="Add();"]
{
	--button_c				: var(--theme);
}



/* ボタン　コメント */
.btn a[onclick="Comment();"]
{
}
.btn a[onclick="Comment();"]>*
{
	letter-spacing: -0.1em;
}


/* ボタン　訪問レポート */
.btn a[onclick="VisitReport();"]
{
}
.btn a[onclick="VisitReport();"]>*
{
	letter-spacing: -0.1em;
}


/* ボタン　商品参照 */
.btn a[onclick="Shohin();"]
{
}
.btn a[onclick="Shohin();"]>*
{
	width: 2.5em;
}


/* ボタン　設定後、元の画面へ戻る */
a[href*="frm.submit()"]
{
}


/* ボタン　[モーダルウィンドウ]　キャンセル */
.btn.cancelModal
{
}


/* ボタン　画像アップロード */
a[onclick*="ImgUpLoad"]
{
}


/* ボタン　black */
.btn a.black
{
	--button_c				: var(--bk);
}

/* ボタン　green */
.btn a.green
{
	--button_c				: var(--gr);
}


/* ------------------------------------------------------
	グラデーションボタン　詳細、ナビ
*/
:is(table, .customer_set) a:is(
	[href*="customer.php"],
	[onclick*="Customer"],
	[onclick*="OldNohin"],
	[onclick*="OldNenNohin"],
	.Navi
)
{
	--gradation_angle				: 135deg;
	--gradation_color_start_alpha	: 1;
	--gradation_color_end_alpha		: 1;
}

:is(table, .customer_set) a:is(
	[href*="customer.php"],
	[onclick*="Customer"],
	[onclick*="OldNohin"],
	[onclick*="OldNenNohin"],
	.Navi
)
{
	aspect-ratio: 1;

	display: grid;
	align-items: center;

	height: 3.5em;

	background-image: linear-gradient(
		var(--gradation_angle),
		rgb(var(--gradation_color_start) / var(--gradation_color_start_alpha)),
		rgb(var(--gradation_color_end) / var(--gradation_color_end_alpha))
	);
	background-color: rgb(var(--gradation_color_end) / 0);

	color: rgb(var(--w));
	outline-color: transparent;
	border-color: transparent;
	border-radius: var(--border_r);

	text-align: center;
	text-decoration-line: none;
}


/* グラデーションボタン　詳細 */
:is(table, .customer_set) a:is([href*="customer.php"], [onclick*="Customer"], [onclick*="OldNohin"], [onclick*="OldNenNohin"])
{
	--gradation_color_start			: 96 121 253;
	--gradation_color_end			: 67 96 231;
}

/* グラデーションボタン　ナビ */
:is(table, .customer_set) a.Navi
{
	--gradation_color_start			: 255 157 122;
	--gradation_color_end			: 252 105 53;
}


/* [250826-0930/250827-1517]新規　ボタン・前回分 */
:is(table, .customer_set) a:is([onclick*="OldNohin"], [onclick*="OldNenNohin"])
{
	aspect-ratio: initial;

	padding-left: 1em;
	padding-right: 1em;
}

/* [250917-1030/250918-1635]新規　ボタン・前年分 */
:is(table, .customer_set) a:is([onclick*="OldNenNohin"])
{
	--gradation_color_start			: var(--gr);
	--gradation_color_start_alpha	: 0.65;
	--gradation_color_end			: var(--gr);
	--gradation_color_end_alpha		: 1;
}


/* ============================================================================================================
	フキダシ
*/
.balloon
{
	--balloon_color				: var(--button_bg_color);
	--balloon_arrow_size		: 0.75em;
	--color						: var(--w);
	
	--balloon_line_color		: rgb(var(--border_color) / 0.3);
	--balloon_line_w			: 2px;
	--balloon_line_blur			: 0px;

	background-color: rgb(var(--balloon_color));
	padding: var(--gap);
	border-radius: 1em;
	color: rgb(var(--color));
}
.balloon::before
{
	aspect-ratio: 1/cos(30deg);

	content: "";
	display: block;
	position: absolute;
	
	width: var(--balloon_arrow_size);

	background-color: inherit;
}

.balloon.balloonT
{
}
.balloon.balloonT::before
{
	left: 50%;
	bottom: calc(100% - 1px);
	translate: -50% -0%;

	clip-path: polygon(
		50% 0%,
		0% 100%,
		100% 100%
	);
}

.balloon.balloonL
{
}
.balloon.balloonL::before
{
	right: calc(100% - 1px);
	top: 50%;
	translate: -0% -50%;

	clip-path: polygon(
		100% 0,
		0 50%,
		100% 100%
	);
}

.balloon.balloonR
{
}
.balloon.balloonR::before
{
	left: calc(100% - 1px);
	top: 50%;
	translate: -0% -50%;

	clip-path: polygon(
		0 0,
		0% 100%,
		100% 50%
	);
}

.balloon.balloonB
{
}
.balloon.balloonB::before
{
	left: 50%;
	top: calc(100% - 1px);
	translate: -50% -0%;

	clip-path: polygon(
		0 0,
		50% 100%,
		100% 0
	);
}


/* [フキダシ]　線アリ */
.balloon.balloon_line
{
	filter:
		drop-shadow(calc(0em - var(--balloon_line_w)) 0px var(--balloon_line_blur) var(--balloon_line_color))
		drop-shadow(var(--balloon_line_w) 0px var(--balloon_line_blur) var(--balloon_line_color))
		drop-shadow(0px calc(0em - var(--balloon_line_w)) var(--balloon_line_blur) var(--balloon_line_color))
		drop-shadow(0px var(--balloon_line_w) var(--balloon_line_blur) var(--balloon_line_color))
	;
}



/* ------------------------------------------------------------------------------------------------------------
	[layout]
------------------------------------------------------------------------------------------------------------ */
body
{
	font-size: 16px;
	font-size: clamp(1.2rem, calc(1rem + 0.625vw), 1.7rem);
	color: rgb(var(--bk));
	color: rgb(0 0 0);

	display: grid;
	grid-template-rows: var(--header_h) 1fr;
	gap: var(--gap);

	height: 100vh;
	height: 100%;

	line-height: 2;

	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
}



/* ------------------------------------------------------
	設定後、元の画面へ「戻る」
*/
body>.add_btn
{
	position: absolute;
	left: 50%;
	top: 40%;
	translate: -50% -50%;

	margin: initial;

	display: grid;
	justify-items: center;
	gap: var(--gap);

	text-align: center;
}

body>.add_btn::before
{
	content: none;
}


/* ------------------------------------------------------------------------------------------------------------
	<header>
------------------------------------------------------------------------------------------------------------ */
.header-navi
{
}



/* ------------------------------------------------------------------------------------------------------------
	ログイン
	/navi/index.php
------------------------------------------------------------------------------------------------------------ */
.Login
{
	grid-template-rows: 1fr;
	justify-items: center;
	align-content: center;
	align-items: center;

	background-image: url(../img/26553215_gr.jpg);
	background-position: center;
}

.Login header
{
	position: absolute;
	left: 50%;
	top: 0;
	translate: -50% -0%;

	display: grid;
	align-items: center;

	height: calc(30% / 2);
}

.Login header+form
{
	display: grid;
	grid-template-rows: repeat(2, 1fr);
	align-items: start;

	width: 70%;
	height: 70%;

	padding: 3em;

	background-color: rgb(var(--w) / 0.5);

	box-shadow: 0.25em 0.25em 1em rgb(var(--theme_dark) / 0.2);
}
/*
	gap: 3em;
	filter: drop-shadow(0.25em 0.25em 0.5em rgb(var(--bk) / 0.5));
*/

.Login header+form>ul
{
	font-size: 1.5em;
	z-index: 5;
}

.Login header+form>ul>li,
.login01-inner-input li:first-child
{
	margin: 0;
}

.Login header+form>ul>li
{
}

.Login header+form input:is([type="text"], [type="password"])
{
	width: 100%;

	text-align: center;
}

.Login header+form select
{
	width: 100%;
}


.Login header+form .password
{
	display: grid;
	grid-template-columns: 1fr 1em;
	align-items: center;
	gap: 0.5em;
}

.Login header+form .password #buttonEye
{
	aspect-ratio: 1;
	width: 100%;
}


.Login header+form .btn
{
}
.Login header+form .btn a
{
	--button_c				: var(--r);

	justify-self: center;
	margin-left: auto;
	margin-right: auto;

	text-align: center;
	justify-content: center;

	width: 10em;
	max-width: initial;

	padding: var(--padding);

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

	border-radius: 100em;
}
.Login header+form .btn a>b
{
	font-weight: inherit;
}


.Login .login_img
{
	align-self: flex-end;
}

.Login .login_img img
{
	aspect-ratio: 1;
	height: 30vh;
	object-position: bottom;
}

@media screen and (orientation: landscape) {
	.Login
	{
		font-size: 1.5vh;
	}
	.Login header+form
	{
	}
	.Login .login_img
	{
	}
	.Login .login_img img
	{
		height: 25vh;
	}
}
/*
@media screen and (orientation: landscape) {
	.Login .login_img img
	{
		max-height: 20vh;
	}
}

*/