@charset "utf-8";

/* CSS Document */

/* ======================================================
	[object] utility
	@import"../css/test_line.css";
	------------------------------------------------------
	min-width　→　○px以上だと??という設定にする
	max-width　→　○px以下だと??という設定にする
====================================================== */

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

.Block
{
	display: block;
}

.IBlock
{
	display: inline-block;
}

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

table.Layout,
table.Layout :is(th, td)
/*
table.Layout th,
table.Layout td,
table.Layout tbody tr:last-child th,
table.Layout tbody tr:last-child 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-child
{
	padding-left: 0;
}
*/

/* ------------------------------------------------------
	幅 */
.WidthAuto,
.Width50,
.Width100,
.WidthAuto :is(table, th, td),
.Width50 :is(table, th, td),
.Width100 :is(table, th, td),
:is(table, .BtnOk, .ColorBtn).WidthAuto,
:is(table, .BtnOk, .ColorBtn).Width50,
:is(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 :is(table, th, td),
:is(table, .BtnOk, .ColorBtn).WidthAuto
/*
.WidthAuto table,
.WidthAuto th,
.WidthAuto td,
.BtnOk.WidthAuto,
.ColorBtn.WidthAuto
*/
{
	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;
}

.WidthMin
{
	width: 12.5%;
}

.WidthS
{
	width: 25%;
}

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

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

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

/* 幅が、指定未満 */
@media screen and (max-width: 750px) {

.WidthMin
{
	width: 25%;
}

.WidthS
{
	width: 75%;
}

.WidthM
{
	width: 100%;
}

}

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

.HeightAuto,
.HeightAuto :is(table, th, td),
:is(.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;
}

.HeightMin
{
	height: 3em;
}

.HeightS
{
	height: 4em;
}

.HeightM
{
	height: 8em;
}

.HeightL
{
	height: 15em;
}

.Height100
{
	height: 100%;
}

/* ------------------------------------------------------
	margin */
.MarginTAuto
{
	margin-top: auto;
}

.Margin0
{
	margin: 0;
}

.MarginT0
{
	margin-top: 0;
}

.MarginT05
{
	margin-top: calc(1.1em * 0.5);
}

.MarginT1
{
	margin-top: calc(1.1em * 1);
}

.MarginT2
{
	margin-top: calc(1.1em * 2);
}

.MarginT3
{
	margin-top: calc(1.1em * 3);
}

.MarginT4
{
	margin-top: calc(1.1em * 4);
}

.MarginT5
{
	margin-top: calc(1.1em * 5);
}

.MarginL0
{
	margin-left: 0;
}

.MarginLAuto
{
	margin-left: auto;
}

.MarginL05
{
	margin-left: calc(1.1em * 0.5);
}

.MarginL1
{
	margin-left: calc(1.1em * 1);
}

.MarginL2
{
	margin-left: calc(1.1em * 2);
}

.MarginL3
{
	margin-left: calc(1.1em * 3);
}

.MarginL4
{
	margin-left: calc(1.1em * 4);
}

.MarginL5
{
	margin-left: calc(1.1em * 5);
}

.MarginLAuto
{
	margin-left: auto;
}

.MarginR0
{
	margin-right: 0;
}

.MarginRAuto
{
	margin-right: auto;
}

.MarginR05
{
	margin-right: calc(1.1em * 0.5);
}

.MarginR1
{
	margin-right: calc(1.1em * 1);
}

.MarginR2
{
	margin-right: calc(1.1em * 2);
}

.MarginR3
{
	margin-right: calc(1.1em * 3);
}

.MarginR4
{
	margin-right: calc(1.1em * 4);
}

.MarginR5
{
	margin-right: calc(1.1em * 5);
}

.MarginB0
{
	margin-bottom: 0;
}

.MarginBAuto
{
	margin-bottom: auto;
}

.MarginB05
{
	margin-bottom: calc(1.1em * 0.5);
}

.MarginB1
{
	margin-bottom: calc(1.1em * 1);
}

.MarginB2
{
	margin-bottom: calc(1.1em * 2);
}

.MarginB3
{
	margin-bottom: calc(1.1em * 3);
}

.MarginB4
{
	margin-bottom: calc(1.1em * 4);
}

.MarginB5
{
	margin-bottom: calc(1.1em * 5);
}

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

.Padding1
{
	padding: 1em;
}

.Padding2
{
	padding: 2em;
}

.PaddingT0
{
	padding-top: 0;
}

.PaddingT1
{
	padding-top: calc(1.1em * 1);
}

.PaddingT2
{
	padding-top: calc(1.1em * 2);
}

.PaddingT3
{
	padding-top: calc(1.1em * 3);
}

.PaddingT4
{
	padding-top: calc(1.1em * 4);
}

.PaddingT5
{
	padding-top: calc(1.1em * 5);
}

.PaddingL0
{
	padding-left: 0;
}

.PaddingL1
{
	padding-left: calc(1.1em * 1);
}

.PaddingL2
{
	padding-left: calc(1.1em * 2);
}

.PaddingL3
{
	padding-left: calc(1.1em * 3);
}

.PaddingL4
{
	padding-left: calc(1.1em * 4);
}

.PaddingL5
{
	padding-left: calc(1.1em * 5);
}

.PaddingR0
{
	padding-right: 0;
}

.PaddingR1
{
	padding-right: calc(1.1em * 1);
}

.PaddingR2
{
	padding-right: calc(1.1em * 2);
}

.PaddingR3
{
	padding-right: calc(1.1em * 3);
}

.PaddingR4
{
	padding-right: calc(1.1em * 4);
}

.PaddingR5
{
	padding-right: calc(1.1em * 5);
}

.PaddingB0
{
	padding-bottom: 0;
}

.PaddingB1
{
	padding-bottom: calc(1.1em * 1);
}

.PaddingB2
{
	padding-bottom: calc(1.1em * 2);
}

.PaddingB3
{
	padding-bottom: calc(1.1em * 3);
}

.PaddingB4
{
	padding-bottom: calc(1.1em * 4);
}

.PaddingB5
{
	padding-bottom: calc(1.1em * 5);
}

/* ------------------------------------------------------
	背景を消す */
.NoBg,
.NoBg :is(table, th, td)
/*
.NoBg table,
.NoBg th,
.NoBg td
*/
{
	background-image: none;
	background: transparent;
	background-color: rgba(255,255,255,0);
}

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

.borderline :is(thead, tfoot) :is(th, td)
/*
.TableLine thead th,
.TableLine thead td,
.TableLine tfoot th,
.TableLine tfoot td
*/
{
	border-width: 2px 1px;
}

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

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

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

/* ------------------------------------------------------
	線を消す */
.NoLine,
.NoLine :is(table, thead, th, td, tfoot),
.NoLine :is(thead, tbody, tfoot) :is(th, td)
/*
.NoLine table,
.NoLine th,
.NoLine td,
.NoLine tbody th,
.NoLine tbody td,
.NoLine thead,
.NoLine thead th,
.NoLine thead td .NoLine tfoot,
.NoLine tfoot th,
.NoLine tfoot td
*/
{
	border-width: 0;
	border-color: rgba(255,255,255,0);
}

.NoLine :is(th, td)
{
	padding-left: 0;
	padding-top: 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
{
	border-bottom-width: 1px;
}

/* ------------------------------------------------------
	左寄せ */
.l,
.l *
{
	text-align: left;
}

:is(.Width50, .WidthAuto, .HeightAuto).L,
:is(.Width50, .WidthAuto, .HeightAuto).Left
/*
.Width50.L,
.WidthAuto.L,
.HeightAuto.L,
.Width50.Left,
.WidthAuto.Left,
.HeightAuto.Left
*/
{
	margin-left: 0;
	margin-right: auto;
}

.Column.L>*
{
	justify-content: flex-start;
}

.Flex.L>*
{
	justify-content: flex-start;
}

/* ------------------------------------------------------
	中心 */
.c,
.c *
{
	text-align: center;
}

:is(.Width50, .WidthAuto, .HeightAuto).C,
:is(.Width50, .WidthAuto, .HeightAuto).Center
/*
.Width50.C,
.WidthAuto.C,
.HeightAuto.C,
.Width50.Center,
.WidthAuto.Center,
.HeightAuto.Center
*/
{
	margin-left: auto;
	margin-right: auto;
}

.Flex.C>*
{
	justify-content: center;
}

/* ------------------------------------------------------
	右寄せ */
.r,
.r *
{
	text-align: right;
}

:is(.Width50, .WidthAuto, .HeightAuto).R,
:is(.Width50, .WidthAuto, .HeightAuto).Right
/*
.Width50.R,
.WidthAuto.R,
.HeightAuto.R,
.Width50.Right,
.WidthAuto.Right,
.HeightAuto.Right
*/
{
	margin-left: auto;
	margin-right: 0;
}

.Flex.R>*
{
	justify-content: flex-end;
}

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

.Column.Just>*
{
}

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

/* ------------------------------------------------------
	両端空けて、左右に拡げる */
.Flex.Jsp>*
{
	justify-content: space-around;
}

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

.Flex.Vtop>*
{
	align-items: flex-start;
}

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

.Flex.Vmiddle>*
{
	align-items: center;
}

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

.Flex.Vbottom>*
{
	align-items: flex-end;
}

/* ------------------------------------------------------
	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
{
	display: block;
	position: relative;
	width: 100%;
	overflow: hidden;
}

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

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

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

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

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

}

/* ======================================================
	======================================================
	======================================================
	======================================================
====================================================== */





/* ======================================================
	段組
	------------------------------------------------------
	[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;
	padding: 0;
	margin: 0;
	width: calc(100% + 3em);
	margin-top: -3em;
	margin-left: -3em;
}

.Flex>*>*
{
	margin: 0;
	margin-top: 3em;
	margin-left: 3em;
	width: calc(100% - 3em);
}

/* 幅が、指定以上　float */
@media print, screen and (min-width: 750px) {

.Flex>*
{
	display: block;
}

/*
	float: left;
*/

.Flex>*>*
{
	display: inline-block;
	float: left;
	vertical-align: top;
	height: 100%;
}

}

/* 幅が、指定未満　flex */
@media screen and (max-width: 750px) {

.Flex>*
{
	display: flex;
	flex-wrap: wrap;
}

.Flex>*>*
{
}
/*
	flex: 1;
	flex-grow: 1;
*/

}

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

/* 2段 */
.Flex2>*>*
{
	width: calc((100% / 2) - 3em);
}

.Flex2.Tight>*>*
{
	width: calc(100% / 2);
}

/* 幅が、指定以上 */
@media print, screen and (min-width: 750px) {

/* 3段 */
.Flex3>*>*
{
	width: calc((100% / 3) - 3em);
}

.Flex3.Tight>*>*
{
	width: calc(100% / 3);
}

/* 4段 */
.Flex4>*>*
{
	width: calc((100% / 4) - 3em);
}

.Flex4.Tight>*>*
{
	width: calc(100% / 4);
}

/* 5段 */
.Flex5>*>*
{
	width: calc((100% / 5) - 3em);
}

.Flex5.Tight>*>*
{
	width: calc(100% / 5);
}

/* 6段 */
.Flex6>*>*
{
	width: calc((100% / 6) - 3em);
}

.Flex6.Tight>*>*
{
	width: calc(100% / 6);
}

}

/* 幅が、指定未満 */
@media screen and (max-width: 750px) {

.Flex3>*>*,
.Flex4>*>*,
.Flex5>*>*,
.Flex6>*>*
{
	width: calc((100% / 2) - 3em);
}

.Flex3.Tight>*>*,
.Flex4.Tight>*>*,
.Flex5.Tight>*>*,
.Flex6.Tight>*>*
{
	width: calc(100% / 2);
}

}

/* ======================================================
	======================================================
	======================================================
	======================================================
====================================================== */





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

.Column>*
{
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: -3em;
	width: calc(100% + 3em);
}

.Column>*>*
{
	display: block;
	vertical-align: top;
	margin-top: 3em;
	margin-left: 3em;
	margin-bottom: 0;
	float: left;
}

/* IE11 hack 
_:-ms-lang(x)::-ms-backdrop, .Column>*
	{
	display: block;
}
_:-ms-lang(x)::-ms-backdrop, .Column>*>*
	{
	display: inline-block;
	margin-left: calc(3em * 0.8);
}
*/
.Column>*>*>.Wrap
{
	width: 100%;
	height: 100%;
}

/* ------------------------------------------------------
	1段組 */
.Column>*>*
{
	width: calc((100% / 1) - 3em);
}

/* 幅が、指定未満 */
@media screen and (max-width: 750px) {

.Column>*>*:nth-child(1)
{
	margin-top: inherit;
}

}

/* ------------------------------------------------------
	2段組 */
.Column2
{
}

.Column2>*>*
{
	width: calc((100% / 2) - 3em);
}

.Column2>*>*:nth-child(1),
.Column2>*>*:nth-child(2)
{
	margin-top: inherit;
}

.Column2.Tight>*>*
{
	width: calc(100% / 2);
}

/* 幅が、指定以上 */
@media print, screen and (min-width: 750px) {

/*@media screen and (max-width: 360px) {*/
/*@media screen, (min-width:30em), screen, (min-width:182.1mm) {*/
	/* ------------------------------------------------------
		3段組 */
.Column3
{
}

.Column3>*>*
{
	width: calc((100% / 3) - 3em);
}

.Column3>*>*:nth-child(1),
.Column3>*>*:nth-child(2),
.Column3>*>*:nth-child(3)
{
	margin-top: inherit;
}

.Column3.Tight>*>*
{
	width: calc(100% / 3);
}

/* ------------------------------------------------------
		4段組 */
.Column4
{
}

.Column4>*>*
{
	width: calc((100% / 4) - 3em);
}

.Column4>*>*:nth-child(1),
.Column4>*>*:nth-child(2),
.Column4>*>*:nth-child(3),
.Column4>*>*:nth-child(4)
{
	margin-top: inherit;
}

.Column4.Tight>*>*
{
	width: calc(100% / 4);
}

/* ------------------------------------------------------
			5段組 */
.Column5
{
}

.Column5>*>*
{
	width: calc((100% / 5) - 3em);
}

.Column5>*>*:nth-child(1),
.Column5>*>*:nth-child(2),
.Column5>*>*:nth-child(3),
.Column5>*>*:nth-child(4),
.Column5>*>*:nth-child(5)
{
	margin-top: inherit;
}

.Column5.Tight>*>*
{
	width: calc(100% / 5);
}

/* ------------------------------------------------------
		6段組 */
.Column6
{
}

.Column6>*>*
{
	width: calc((100% / 6) - 3em);
}

.Column6>*>*:nth-child(1),
.Column6>*>*:nth-child(2),
.Column6>*>*:nth-child(3),
.Column6>*>*:nth-child(4),
.Column6>*>*:nth-child(5),
.Column6>*>*:nth-child(6)
{
	margin-top: inherit;
}

.Column6.Tight>*>*
{
	width: calc(100% / 6);
}

}

/* 幅が、指定未満 */
@media screen and (max-width: 750px) {
:is(.Column3, .Column4, .Column5, .Column6)>*>*
{
	width: calc((100% / 2) - 3em);
}

:is(.Column3, .Column4, .Column5, .Column6)>*>*:nth-child(1),
:is(.Column3, .Column4, .Column5, .Column6)>*>*:nth-child(2)
{
	margin-top: inherit;
}

:is(.Column3, .Column4, .Column5, .Column6).Tight>*>*
{
	width: calc(100% / 2);
}

}

/* ====================================================== */

/* ぴったり */
:is(.Flex, .Column).Tight>*
{
	margin: 0;
	width: 100%;
}

:is(.Flex, .Column).Tight>*>*
{
	margin: 0;
}

/* 隙間狭く */
:is(.Flex, .Column).Narrow>*
{
	margin-left: -0.25em;
	margin-right: -0.25em;
	width: calc(100% + (0.25em * 2));
}

/*
	margin: 0;
	margin-top: -0.5em;
	margin-left: -0.5em;
	width: calc(100% + 0.5em);
*/

:is(.Flex, .Column).Narrow>*>*
{
	padding: 0.25em;
}

:is(.Flex, .Column).Narrow1>*
{
	margin-left: -0.5em;
	margin-right: -0.5em;
	width: calc(100% + (0.5em * 2));
}

:is(.Flex, .Column).Narrow1>*>*
{
	padding: 0.5em;
}

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

/* 等幅 */
.Flex.grow1>*
{
}

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

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

.Flex.tate:not([class*="Narrow"])>*
{
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

.Flex.tate:not([class*="Narrow"])>*>*
{
	width: 100%;
	margin-left: 0;
}

/* 幅が、指定以上 */
@media print, screen and (min-width: 750px) {

.Flex.tate>*
{
}

.Flex.tate>*>*
{
	float: none;
}

}

/* 幅が、指定未満 */
@media screen and (max-width: 750px) {

.Flex.tate>*
{
}

.Flex.tate>*>*
{
}

}

/* ======================================================
	box
------------------------------------------------------ */
:is(.Flex, .Column)>*
{
	zoom: 1;
}

:is(.Flex, .Column)>*:after
{
	content: "";
	display: block;
	clear: both;
}

:is(.Flex2, .Column2) :is(li, .Flex>*>*):nth-child(2n+3),
:is(.Flex3, .Column3) :is(li, .Flex>*>*):nth-child(3n+4),
:is(.Flex4, .Column4) :is(li, .Flex>*>*):nth-child(4n+5),
:is(.Flex6, .Column6) :is(li, .Flex>*>*):nth-child(5n+6)
{
	clear: both;
}




/* ============================================================================================================
	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;
}
*/
}