@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object] utility
	@import"../css/test_line.css";
	------------------------------------------------------
	[240109]　幅判定不可
====================================================== */

/* ------------------------------------------------------
	block
	------------------------------------------------------
	[190724]
	inline-blockの隙間をなくす方法
	https://qiita.com/BEMU/items/0f500e0306471073ed63
*/
.Inline
{
	display: inline;
}

.Block
{
	display: block;
}


.IBlock
{
	display: inline-block;
}

.BlockInherit
{
	display: inherit;
}


.Flex.IBlock
{
}

.Flex.IBlock>*
{
	display: inline-flex;
}

.Flex.IBlock>*>*
{
	width: auto;
}


/* ------------------------------------------------------
	Layout */
.Layout
{
	display: inline-block;
}

table.Layout,
table.Layout :is(th, td)
/*
table.Layout th,
table.Layout td,
table.Layout tbody tr:last-of-type th,
table.Layout tbody tr:last-of-type td,
#Admin table.Layout th,
#Admin table.Layout td
*/
{
	vertical-align: top;
	width: initial;
	min-width: initial;
	height: initial;
	background: transparent;
	border-width: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	color: inherit;
}

table.Layout
{
	display: inline-table;
	width: auto;
}

table.Layout :is(th, td)
{
	display: table-cell;
}

/*
table.Layout,
table.Layout table
{
	display: inline-table;
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
	width: auto;
	overflow: auto;
	border-radius: 0;
}

table.Layout th:not([class]),
table.Layout td:not([class])
{
	width: auto;
	min-width: initial;
}

table.Layout th:first-of-type
{
	padding-left: 0;
}
*/

.Flex.Layout,
.Flex.Layout>*,
.Flex.Layout>*>*
{
	width: auto;
}

.Flex.Layout>*
{
	display: inline-flex;
}


.grid.Layout,
.grid.Layout>*,
.grid.Layout>*>*
{
	width: auto;
}

.grid.Layout>*
{
	display: inline-grid;
}


/* ------------------------------------------------------
	幅 */
.WidthAuto,
.Width50,
.Width100,
.WidthAuto :where(table, th, td),
.Width50 :where(table, th, td),
.Width100 :where(table, th, td),
:where(table, .BtnOk, .ColorBtn).WidthAuto,
:where(table, .BtnOk, .ColorBtn).Width50,
:where(table, .BtnOk, .ColorBtn).Width100,
/*
.WidthAuto table,
.WidthAuto th,
.WidthAuto td,
.BtnOk.WidthAuto,
.ColorBtn.WidthAuto,
*/
.WidthS,
/*
.Width50,
.Width50 table,
.Width50 tbody th,
.BtnOk.Width50,
.ColorBtn.Width50,
*/
.WidthM,
.WidthL,
/*
.Width100,
.Width100 table,
.Width100 tbody th,
.BtnOk.Width100,
.ColorBtn.Width100,
table.Width100,
*/
.Width1,
.Width2,
.Width3,
.Width4,
.Width5,
.Width6,
.Width7,
.Width8,
.Width9,
.Width10
{
	width: initial;
	min-width: initial;
	max-width: initial;
}

.WidthAuto,
.WidthAuto :where(table, th, td),
:where(table, .BtnOk, .ColorBtn).WidthAuto
/*
.WidthAuto table,
.WidthAuto th,
.WidthAuto td,
.BtnOk.WidthAuto,
.ColorBtn.WidthAuto
*/
{
	width: auto;
}

.Flex.WidthAuto
{
}

.Flex.WidthAuto>*
{
	width: auto;
}

.Flex.WidthAuto>*>*:not([class*="Width"])
{
	width: auto;
}

.Flex .WidthFree
{
	width: auto;
}

.Width1
{
	width: 1em;
}

.Width2
{
	width: 2em;
}

.Width3
{
	width: 3em;
}

.Width4
{
	width: 4em;
}

.Width5
{
	width: 5em;
}

.Width6
{
	width: 6em;
}

.Width7
{
	width: 7em;
}

.Width8
{
	width: 8em;
}

.Width9
{
	width: 9em;
}

.Width10
{
	width: 10em;
}

.Width15
{
	width: 15em;
}

.Width20
{
	width: 20em;
}

.Width25
{
	width: 25em;
}

.WidthMin
{
	width: 12.5%;
}

.WidthS
{
	width: 25%;
}

.WidthM,
.Width50,
.Width50 table,
:where(table, .BtnOk, .ColorBtn).Width50
/*
.BtnOk.Width50,
.ColorBtn.Width50
*/
{
	width: 50%;
}

.Width80,
:where(table, .BtnOk, .ColorBtn).Width80
{
	width: 80%;
}

.WidthL,
.Width100,
:where(table, .BtnOk, .ColorBtn).Width100
/*
.BtnOk.Width100,
.ColorBtn.Width100,
table.Width100
*/
{
	width: 100%;
}

.WidthMin50
{
	min-width: 50%;
}

.Width-1em
{
	width: calc(100% - (((1em + var(--tracking)) * 1) * 1.5));
}

.Width-2em
{
	width: calc(100% - (((1em + var(--tracking)) * 2) * 1.5));
}

.Width-3em
{
	width: calc(100% - (((1em + var(--tracking)) * 3) * 1.5));
}

.Width-4em
{
	width: calc(100% - (((1em + var(--tracking)) * 4) * 1.5));
}

.Width-5em
{
	width: calc(100% - (((1em + var(--tracking)) * 5) * 1.5));
}

/* ------------------------------------------------------
	高さ */
.HeightAuto,
.HeightAuto :where(table, th, td),
:where(.BtnOk, .ColorBtn).HeightAuto,
/*
.HeightAuto table,
.HeightAuto th,
.HeightAuto td,
.BtnOk.HeightAuto,
.ColorBtn.HeightAuto,
*/
.Height100,
.Height1,
.Height2,
.Height3,
.Height4,
.Height5,
.Height6,
.Height7,
.Height8,
.Height9,
.Height10,
.Height20
{
	height: initial;
	min-height: initial;
	max-height: initial;
}

.HeightAuto,
.HeightAuto :where(table, th, td),
:where(.BtnOk, .ColorBtn).HeightAuto
/*
.HeightAuto table,
.HeightAuto th,
.HeightAuto td,
.BtnOk.HeightAuto,
.ColorBtn.HeightAuto
*/
{
	height: auto;
}

.Height1
{
	height: 1em;
}

.Height2
{
	height: 2em;
}

.Height3
{
	height: 3em;
}

.Height4
{
	height: 4em;
}

.Height5
{
	height: 5em;
}

.Height6
{
	height: 6em;
}

.Height7
{
	height: 7em;
}

.Height8
{
	height: 8em;
}

.Height9
{
	height: 9em;
}

.Height10
{
	height: 10em;
}

.Height20
{
	height: 20em;
}

.Height25
{
	height: 25em;
}

.HeightMin
{
	height: 3em;
}

.HeightS
{
	height: 4em;
}

.HeightM
{
	height: 8em;
}

.HeightL
{
	height: 15em;
}

.Height100
{
	height: 100%;
}

/* ------------------------------------------------------
	margin */
.Margin0
{
	margin: 0;
}

.MarginAuto
{
	margin: auto;
}

[class*="MarginT"]{
	margin-top: calc(1em * var(--margin_top));
}

.MarginTAuto
{
	margin-top: auto;
}

.MarginT0
{
	--margin_top: 0;
}

.MarginT0h
{
	--margin_top: 0.5;
}

.MarginT1
{
	--margin_top: 1;
}

.MarginT2
{
	--margin_top: 2;
}

.MarginT3
{
	--margin_top: 3;
}

.MarginT4
{
	--margin_top: 4;
}

.MarginT5
{
	--margin_top: 5;
}

.MarginT10
{
	--margin_top: 10;
}


[class*="MarginL"]{
	margin-left: calc((1em + var(--tracking)) * var(--margin_left));
}

.MarginLAuto
{
	margin-left: auto;
}

.MarginL0
{
	--margin_left: 0;
}

.MarginL0h
{
	--margin_left: 0.5;
}

.MarginL1
{
	--margin_left: 1;
}

.MarginL2
{
	--margin_left: 2;
}

.MarginL3
{
	--margin_left: 3;
}

.MarginL4
{
	--margin_left: 4;
}

.MarginL5
{
	--margin_left: 5;
}

.MarginL10
{
	--margin_left: 10;
}


[class*="MarginR"]{
	margin-right: calc((1em + var(--tracking)) * var(--margin_right));
}

.MarginRAuto
{
	margin-right: auto;
}

.MarginR0
{
	--margin_right: 0;
}

.MarginR0h
{
	--margin_right: 0.5;
}

.MarginR1
{
	--margin_right: 1;
}

.MarginR2
{
	--margin_right: 2;
}

.MarginR3
{
	--margin_right: 3;
}

.MarginR4
{
	--margin_right: 4;
}

.MarginR5
{
	--margin_right: 5;
}

.MarginR10
{
	--margin_right: 10;
}


[class*="MarginB"]{
	margin-bottom: calc(1em * var(--margin_bottom));
}

.MarginBAuto
{
	margin-bottom: auto;
}

.MarginB0
{
	--margin_bottom: 0;
}

.MarginB0h
{
	--margin_bottom: 0.5;
}

.MarginB1
{
	--margin_bottom: 1;
}

.MarginB2
{
	--margin_bottom: 2;
}

.MarginB3
{
	--margin_bottom: 3;
}

.MarginB4
{
	--margin_bottom: 4;
}

.MarginB5
{
	--margin_bottom: 5;
}

.MarginB10
{
	--margin_bottom: 10;
}


/* ------------------------------------------------------
	padding */
.Padding0
{
	padding: 0;
}

.Padding1
{
	padding: 1em;
}

.Padding2
{
	padding: 2em;
}


[class*="PaddingT"]{
	padding-top: calc(1em * var(--padding_top));
}

.PaddingT0
{
	--padding_top: 0;
}

.PaddingT0h
{
	--padding_top: 0.5;
}

.PaddingT1
{
	--padding_top: 1;
}

.PaddingT2
{
	--padding_top: 2;
}

.PaddingT3
{
	--padding_top: 3;
}

.PaddingT4
{
	--padding_top: 4;
}

.PaddingT5
{
	--padding_top: 5;
}

.PaddingT10
{
	--padding_top: 10;
}


[class*="PaddingL"]{
	padding-left: calc((1em + var(--tracking)) * var(--padding_left));
}

.PaddingL0
{
	padding-left: 0;
}

.PaddingL0h
{
	--padding_left: 0.5;
}

.PaddingL1
{
	--padding_left: 1;
}

.PaddingL2
{
	--padding_left: 2;
}

.PaddingL3
{
	--padding_left: 3;
}

.PaddingL4
{
	--padding_left: 4;
}

.PaddingL5
{
	--padding_left: 5;
}

.PaddingL10
{
	--padding_left: 10;
}


[class*="PaddingR"]{
	padding-right: calc((1em + var(--tracking)) * var(--padding_right));
}

.PaddingR0
{
	padding-right: 0;
}

.PaddingR0h
{
	--padding_right: 0.5;
}

.PaddingR1
{
	--padding_right: 1;
}

.PaddingR2
{
	--padding_right: 2;
}

.PaddingR3
{
	--padding_right: 3;
}

.PaddingR4
{
	--padding_right: 4;
}

.PaddingR5
{
	--padding_right: 5;
}

.PaddingR10
{
	--padding_right: 10;
}


[class*="PaddingB"]{
	padding-bottom: calc(1em * var(--padding_bottom));
}

.PaddingB0
{
	padding-bottom: 0;
}

.PaddingB0h
{
	--padding_bottom: 0.5;
}

.PaddingB1
{
	--padding_bottom: 1;
}

.PaddingB2
{
	--padding_bottom: 2;
}

.PaddingB3
{
	--padding_bottom: 3;
}

.PaddingB4
{
	--padding_bottom: 4;
}

.PaddingB5
{
	--padding_bottom: 5;
}

.PaddingB10
{
	--padding_bottom: 10;
}

/* ------------------------------------------------------
	背景を消す */
.NoBg,
.NoBg :where(table, th, td)
{
	background-image: none;
	background: transparent;
	background-color: rgb(var(--w) / 0);
}

/* ------------------------------------------------------
	線を入れる */
.borderline,
.borderline :where(table, th, td)
{
	border-width: 1px;
}

.borderline :where(thead, tfoot) :where(th, td)
{
	border-width: 2px 1px;
}

/* ------------------------------------------------------
	線を入れる・破線 */
.borderline.dashed,
.borderline.dashed :where(th, td)
{
	border-style: dashed;
}

/* ------------------------------------------------------
	線を入れる・点線 */
.borderline.dotted,
.borderline.dotted :where(th, td)
{
	border-style: dotted;
}

/* ------------------------------------------------------
	装飾は引き継ぎつつ 
.TableSimple,
.TableSimple table,
.TableSimple th,
.TableSimple td
	{
}
*/

/* ------------------------------------------------------
	線を消す */
.NoLine,
.NoLine :where(table, thead, th, td, tfoot),
.NoLine :where(thead, tbody, tfoot) :where(th, td):not([class*="Border"])
{
	border-width: 0;
	border-color: rgb(var(--w) / 0);
}

.NoLine :where(th, td):not([class*="Border"])
{
	padding-top: 0;
	padding-left: 0;
	padding-bottom: 0;
}

.NoLine :where(th, td):not([class*="Border"]):last-child
{
	padding-right: 0;
}

/* ------------------------------------------------------
	線 */
.BorderT0
{
	border-top-width: 0;
}

.BorderT1px
{
	border-top-width: 1px;
}

.BorderL0
{
	border-left-width: 0;
}

.BorderL1px
{
	border-left-width: 1px;
}

.BorderR0
{
	border-right-width: 0;
}

.BorderR1px
{
	border-right-width: 1px;
}

.BorderB0
{
	border-bottom-width: 0;
}

.BorderB1px
/*,
.NoLine .BorderB1px
*/
{
	border-bottom-width: 1px;
}


/* ------------------------------------------------------
	左寄せ */
.l,
.l :where(th, td),
:is(.c, .r, .j) .l :where(th, td)
{
	text-align: left;
}


.L[class*="Width"],
.Left[class*="Width"]
{
	margin-left: 0;
	margin-right: auto;
}

:where(.grid, .Flex).L>*
{
	justify-content: flex-start;
}

:where(.grid, .Flex).tate.L>*
{
	align-items: stretch;
}

.Layout.L
{
}

table.Layout.L
{
	margin-left: 0;
	margin-right: auto;
}


/* ------------------------------------------------------
	中心 */
.c,
.c :where(th, td),
:is(.l, .r, .j) .c :where(th, td)
{
	text-align: center;
}


.C[class*="Width"],
.Center[class*="Width"]
{
	margin-left: auto;
	margin-right: auto;
}

:where(.grid, .Flex).C>*
{
	justify-content: center;
}

:where(.grid, .Flex).tate.C>*
{
	align-items: center;
}

.Layout.C
{
	justify-self: center;
	justify-content: center;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

table.Layout.C
{
	margin-left: auto;
	margin-right: auto;
}


/* ------------------------------------------------------
	右寄せ */
.r,
.r :where(th, td),
:is(.l, .c, .j).r :where(th, td)
{
	text-align: right;
}


.R[class*="Width"],
.Right[class*="Width"]
{
	margin-left: auto;
	margin-right: 0;
}

:where(.grid, .Flex).R>*
{
	justify-content: flex-end;
}

:where(.grid, .Flex).tate.R>*
{
	align-items: flex-end;
}

table.Layout.R
{
	margin-left: auto;
	margin-right: 0;
}


/* ------------------------------------------------------
	両端揃え */
.j
{
	text-align: justify;
}

.Flex.Just>*
{
	justify-content: space-between;
}

.Flex.tate.Just
{
	height: 100%;
}

.Flex.tate.Just>*
{
	align-content: space-between;
	height: 100%;
}

/* ------------------------------------------------------
	両端空けて、左右に拡げる */
:where(.grid, .Flex).Jsp>*
{
	justify-content: space-around;
}
/*
	justify-content: space-evenly;
	margin-left: 0;
	width: 100%;
*/

.Flex.Jsp>*>*
{
}
/*
	margin-left: 0;
*/

.Flex.tate.Jsp>*>*
{
}

/* ------------------------------------------------------
	上揃え */
.Vtop,
table.Vtop :where(th, td),
.table.Vtop>*>*,
#Admin table.Vtop :where(th, td)
{
	vertical-align: top;
}

:where(.grid, .Flex).Vtop>*
{
	align-items: flex-start !important;
}

/* ------------------------------------------------------
	上下中心 */
.Vmiddle,
table.Vmiddle :where(th, td),
.table.Vmiddle>*>*,
#Admin table.Vmiddle :where(th, td)
{
	vertical-align: middle;
}

:where(.grid, .Flex).Vmiddle>*
{
	align-items: center !important;
}

/* ------------------------------------------------------
	下揃え */
.Vbottom,
table.Vbottom :where(th, td),
.table.Vbottom>*>*,
#Admin table.Vbottom :where(th, td)
{
	vertical-align: bottom;
}

:where(.grid, .Flex).Vbottom>*
{
	align-items: flex-end !important;
}

/* ------------------------------------------------------
	line-height */
.LineH0
{
	line-height: 0;
}

.LineH1
{
	line-height: 1;
}

.LineH1-5
{
	line-height: 1.5;
}

.LineH2
{
	line-height: 2;
}

.LineH2-5
{
	line-height: 2.5;
}

.LineH3
{
	line-height: 3;
}

/* ------------------------------------------------------
	letter-spacing */
.LetterSP0
{
	letter-spacing: normal;
}

/* ------------------------------------------------------
	z-index */
.index5
{
	z-index: 5;
}

/* ------------------------------------------------------
	角丸 */
.R100
{
	border-radius: 100em;
}

/* ============================================================================================================
	Layer
------------------------------------------------------------------------------------------------------------ */
/* 囲んでから */
.Layer
{
}
/*
	overflow: hidden;
	display: block;
	position: relative;
	width: 100%;
*/

.Layer>.Box
{
	display: block;
	position: absolute;
}

/* 直 */
.LayerD
{
	display: block;
	position: absolute;
}

.LayerD.sticky
{
	display: block;
	position: sticky;
}

.Layer.sticky
{
	position: sticky;
}

.Layer.sticky.T
{
	top: 0;
}

.Layer.sticky.L
{
	left: 0;
}

.Layer.sticky.R
{
	right: 0;
}

.Layer.sticky.B
{
	bottom: 0;
}

.LayerD.sticky
{
	display: block;
	position: fixed;
}

.Layer.fixed
{
	position: fixed;
}

.Layer.fixed.T
{
	top: 0;
}

.Layer.fixed.L
{
	left: 0;
}

.Layer.fixed.R
{
	right: 0;
}

.Layer.fixed.B
{
	bottom: 0;
}

.Layer .BoxA,
.LayerD.BoxA
{
	top: 0;
	left: 0;
	z-index: 1;
}

.Layer .BoxB,
.LayerD.BoxB
{
	top: 0;
	right: 0;
	z-index: 2;
}

.Layer .BoxC,
.LayerD.BoxC
{
	bottom: 0;
	left: 0;
	z-index: 3;
}

.Layer .BoxD,
.LayerD.BoxD
{
	bottom: 0;
	right: 0;
	z-index: 4;
}

/* ============================================================================================================
	float
------------------------------------------------------------------------------------------------------------ */
.Float
{
}

.Float.None
{
	float: none;
}

.Float.L
{
	float: left;
}

.Float.R
{
	float: right;
}

.Clear
{
	clear: both;
}

/* ============================================================================================================
	Fixed
------------------------------------------------------------------------------------------------------------ */
.Fixed
{
	position: fixed;
}

@media print {
	
	.Fixed
	{
		position: absolute;
	}
	
}


/* ============================================================================================================
	flex
	------------------------------------------------------
	[190724]
	inline-blockの隙間をなくす方法
	https://qiita.com/BEMU/items/0f500e0306471073ed63
	------------------------------------------------------
	[190724]Flexboxは印刷に不向き...かな?
	------------------------------------------------------
	まだfloat使ってる？CSSのFlexboxを徹底解説！ 
	https://webdesignday.jp/inspiration/pickup/4175/
------------------------------------------------------------------------------------------------------------ */
.Flex
{
	display: block;
}

.Flex>*
{
	list-style: none;
	margin: 0;

	display: flex;
	gap: var(--gap);

	width: 100%;
	padding: 0;
}
/*
	flex-wrap: wrap;
*/

.Flex[class*=" Flex"]>*
/*:where(.Flex2, .Flex3, .Flex4, .Flex5, .Flex6)>**/
{
	flex-wrap: wrap;
}

.Flex>*>*:not([class*="Margin"])
{
	margin: 0;
}
/*
	display: inherit;
	width: 100%;
	flex: 1;
	flex-grow: 1;
*/


/* 2段 */
.Flex2>*>*
{
	--num: 2.001;
}

/* 3段 */
.Flex3>*>*
{
	--num: 3.001;
}

/* 4段 */
.Flex4>*>*
{
	--num: 4.001;
}

/* 5段 */
.Flex5>*>*
{
	--num: 5.001;
}

/* 6段 */
.Flex6>*>*
{
	--num: 6.001;
}


.Flex[class*=" Flex"]:not([class*=" gap"])>*>*:not([class*="Width"])
{
	--width: (100% - (var(--gap) * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap0"]>*>*:not([class*="Width"])
{
	--width: 100% / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap0h"]>*>*:not([class*="Width"])
{
	--width: (100% - (0.5em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap1"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_1"]>*>*:not([class*="Width"])
{
	--width: (100% - (1em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap1h"]>*>*:not([class*="Width"])
{
	--width: (100% - (1.5em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap1px"]>*>*:not([class*="Width"])
{
	--width: (100% - (1px * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap2"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_2"]>*>*:not([class*="Width"])
{
	--width: (100% - (2em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap3"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_3"]>*>*:not([class*="Width"])
{
	--width: (100% - (3em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap4"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_4"]>*>*:not([class*="Width"])
{
	--width: (100% - (4em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap5"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_5"]>*>*:not([class*="Width"])
{
	--width: (100% - (5em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}

.Flex[class*=" gap6"]>*>*:not([class*="Width"]),
.Flex[class*=" gap0_6"]>*>*:not([class*="Width"])
{
	--width: (100% - (6em * (var(--num) - 1))) / var(--num);
	width: calc(var(--width));
}


/*
.Flex:not([class*=" WFree"])>*>*
*/
.Flex:not([class*=" Flex"], .Layout)>*>*:not([class*="Width"])
{
	width: 100%;
}

.Flex.WFree>*>*
{
	width: auto;
}
/*
*/

.Flex>*>*>.Wrap
{
	width: 100%;
}

.Flex>*>*>.Wrap:not([class*="Height"])
{
	height: 100%;
}


/* Flex 幅2倍 */
.Flex:not([class*=" gap"])>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + var(--gap));
}

/* Flex 幅2倍 + 隙間ヨコ0 */
.Flex[class*=" gap0"]>*>.grow2:not([class*=" Width"])
{
	width: calc(var(--width) * 2);
}

/* Flex 幅2倍 + 隙間ヨコ0.5 */
.Flex[class*=" gap0h"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 0.5em);
}

/* Flex 幅2倍 + 隙間ヨコ1 */
.Flex[class*=" gap1"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_1"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 1em);
}

/* Flex 幅2倍 + 隙間ヨコ1.5 */
.Flex[class*=" gap1h"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 1.5em);
}

/* Flex 幅2倍 + 隙間ヨコ1px */
.Flex[class*=" gap1px"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 1px);
}

/* Flex 幅2倍 + 隙間ヨコ2 */
.Flex[class*=" gap2"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_2"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 2em);
}

/* Flex 幅2倍 + 隙間ヨコ3 */
.Flex[class*=" gap3"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_3"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 3em);
}

/* Flex 幅2倍 + 隙間ヨコ4 */
.Flex[class*=" gap4"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_4"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 4em);
}

/* Flex 幅2倍 + 隙間ヨコ5 */
.Flex[class*=" gap5"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_5"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 5em);
}

/* Flex 幅2倍 + 隙間ヨコ6 */
.Flex[class*=" gap6"]>*>.grow2:not([class*=" Width"]),
.Flex[class*=" gap0_6"]>*>.grow2:not([class*=" Width"])
{
	width: calc((var(--width) * 2) + 6em);
}


/* ------------------------------------------------------------------------------------------------------------ */


/* 折り返す */
.Flex.wrap>*
{
	flex-wrap: wrap;
}

/* 折り返さない */
.Flex.Nowrap>*
{
	flex-wrap: nowrap;
}

/* 横へ流す */
.Flex.yoko>*
{
	flex-direction: row;
}

/* 縦へ流す */
.Flex.tate>*
{
	flex-direction: column;
}


/* ぴったり */
.Flex.gap0>*
{
	--gap: 0 !important;
}

/* 隙間1px */
.Flex.gap1px>*
{
	--gap: 1px !important;
}
/*
	gap: 1px !important;
*/

/* 隙間0.5 */
.Flex.gap0h>*
{
	--gap: 0.5em !important;
}

/* 隙間1 */
.Flex.gap1>*
{
	--gap: 1em !important;
}

/* 隙間1.5 */
.Flex.gap1h>*
{
	--gap: 1.5em !important;
}

/* 隙間2 */
.Flex.gap2>*
{
	--gap: 2em !important;
}

/* 隙間3 */
.Flex.gap3>*
{
	--gap: 3em !important;
}

/* 隙間4 */
.Flex.gap4>*
{
	--gap: 4em !important;
}

/* 隙間5 */
.Flex.gap5>*
{
	--gap: 5em !important;
}

/* 隙間6 */
.Flex.gap6>*
{
	--gap: 6em !important;
}

/* 隙間　上下0 + 左右1 */
.Flex.gap0_1>*
{
	--gap: 0em 1em !important;
}

/* 隙間　上下0 + 左右2 */
.Flex.gap0_2>*
{
	--gap: 0em 2em !important;
}

/* 隙間　上下0 + 左右3 */
.Flex.gap0_3>*
{
	--gap: 0em 3em !important;
}

/* 隙間　上下0 + 左右4 */
.Flex.gap0_4>*
{
	--gap: 0em 4em !important;
}

/* 隙間　上下0 + 左右5 */
.Flex.gap0_5>*
{
	--gap: 0em 5em !important;
}

/* 隙間　上下0 + 左右6 */
.Flex.gap0_6>*
{
	--gap: 0em 6em !important;
}


/* ============================================================================================================
	grid
------------------------------------------------------------------------------------------------------------ */
.grid
{
}

.grid>*
{
	display: grid;
	gap: var(--gap);

	list-style: none;
	margin: 0;
}
/*
	 grid-template-columns: 150px 1fr;
	 grid-template-rows: 100px 50px;
*/
.grid>*>*
{
	margin: 0;
}

.grid[class*=" gap0"]>*
{
	--gap				: 0em;
}

.grid[class*=" gap1"]>*
{
	--gap				: 1em;
}

.grid[class*=" gap2"]>*
{
	--gap				: 2em;
}

.grid[class*=" gap3"]>*
{
	--gap				: 3em;
}

.grid[class*=" gap4"]>*
{
	--gap				: 4em;
}

.grid[class*=" gap5"]>*
{
	--gap				: 5em;
}

.grid[class*=" gap6"]>*
{
	--gap				: 6em;
}

.grid[class*=" gap7"]>*
{
	--gap				: 7em;
}

.grid[class*=" gap8"]>*
{
	--gap				: 8em;
}

.grid[class*=" gap9"]>*
{
	--gap				: 9em;
}

.grid[class*=" gap10"]>*
{
	--gap				: 10em;
}


.grid.grid2>*
{
	 grid-template-columns: repeat(2, 1fr);
}

.grid.grid3>*
{
	 grid-template-columns: repeat(3, 1fr);
}

.grid.grid4>*
{
	 grid-template-columns: repeat(4, 1fr);
}

.grid.grid5>*
{
	 grid-template-columns: repeat(5, 1fr);
}

.grid.grid6>*
{
	 grid-template-columns: repeat(6, 1fr);
}


/* ============================================================================================================
	accessibility
	------------------------------------------------------
	[220927]
	CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
	https://coliss.com/articles/build-websites/operation/css/media-query-code-snippets.html
------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
/*
:not([style*="opacity"])
{
	animation: none !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
}
*/
}