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

ul ul	{
	list-style-type: disc;
}


/* ======================================================
	組版
====================================================== */
/* ======================================================
	左寄せ・右寄せ
------------------------------------------------------ */
.LayoutBox	{
	display: inline-block;
	vertical-align: top;
}

/* 幅が、481px以上 */
@media (min-width: 37.5em) {
/*@media screen, (min-width:30em), screen, (min-width:182.1mm) {*/

	.img_l img	{
		display: block;
		float: left;
		margin-right: 1em;
		margin-bottom: 0px;
	}
	.img_r img	{
		display: block;
		float: right;
		margin-left: 1em;
		margin-bottom: 0px;
	}

	.Cap_l>figure	{
		display: block;
		float: left;
		margin-right: 1em;
		margin-bottom: 0px;
	}
	.Cap_r>figure	{
		display: block;
		float: right;
		margin-left: 1em;
		margin-bottom: 0px;
	}

	.img_l table,
	.img_r table	{
		display: inline-table;
	}
	.img_l table,
	.img_l th,
	.img_r table,
	.img_r th,
	.Cap_l table,
	.Cap_l th,
	.Cap_r table,
	.Cap_r th	{ width: auto; }
}

.FigureLayout>div	{
	display: inline-block;
	vertical-align: middle;
}
.FigureLayout figure.c	{
}
.FigureLayout figure.l	{
}
.FigureLayout figure.r	{
}


/* 左右 */
.Layout	{
	width: 100%;
	
	display: block;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.Layout .LayoutBox	{
	display: inline-block;
	vertical-align: top;
	
	-webkit-align-self:stretch;
	-ms-flex-item-align:stretch;
	align-self:stretch;
	
	float: left;
	float: none;
}
.Layout .LayoutBox>.Wrap	{
	width: 100%;
}
.Layout.LayoutL	{
}
.Layout.LayoutR	{
}

.Layout.Short	{
}

.Layout.Img	{
	text-align: left;
}
.Layout.Img img	{
	width: 100%;
}
.Layout.Img .pic	{
	text-align: right;
}


/* ======================================================
	段組
	------------------------------------------------------
	[190724]
	inline-blockの隙間をなくす方法
	https://qiita.com/BEMU/items/0f500e0306471073ed63
	------------------------------------------------------
	[190724]Flexboxは印刷に不向き...かな?
	------------------------------------------------------
	まだfloat使ってる？CSSのFlexboxを徹底解説！ 
	https://webdesignday.jp/inspiration/pickup/4175/
------------------------------------------------------ */
/* 通常 */
.Column	{
}
.Column>ul,
.Column>ol	{
	list-style: none;
	margin-left: 0px;
	margin-top: -3em;
}
.Column>.Wrap	{
	margin: 0px;
	padding: 0px;
}

.Column>ul,
.Column>ol,
.Column>.Wrap
	{
	margin-left: -3em;
	width: calc(100% + 3em);
	-webkit-margin-left: -5%;
	-webkit-width: 105%;
	
	display: block;
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
/*
*/
}
.Column>ul>li,
.Column>ol>li,
.Column>.Wrap>article	{
	margin-top: 3em;
	margin-left: 3em;
	webkit-margin-left: 5%;
	
	display: inline-block;
	vertical-align: top;
	
	-webkit-align-self:stretch;
	-ms-flex-item-align:stretch;
	align-self:stretch;
	
	float: none;
	-webkit-float: left;
}
.Column>ul>li>.Wrap,
.Column>ol>li>.Wrap,
.Column>.Wrap>article>.Wrap	{
	width: 100%;
}



/* ------------------------------------------------------
	1段組 */
.Column>ul>li,
.Column>ol>li
	{
	width: 105%;
	width: calc((100% / 1) - 3em);
	flex-basis: calc((100% / 1) - 3em);
}
.Column.Tight>ul>li,
.Column.Tight>ol>li	{
	width: 100%;
	flex-basis: 100%;
}

/* 幅が、481px以上 */
@media (min-width: 37.5em) {
/*@media screen, (min-width:30em), screen, (min-width:182.1mm) {*/

	/* ------------------------------------------------------
		2段組 */
	.Column2
		{
	}
	.Column2>ul>li,
	.Column2>ol>li,
	.Column2>.Wrap>article
		{
		width: 45%;
		width: calc((100% / 2) - 3em);
		flex-basis: calc((100% / 2) - 3em);
	}
	.Column2.Tight>ul>li,
	.Column2.Tight>ol>li	{
		width: 50%;
		width: calc(100% / 2);
		flex-basis: calc(100% / 2);
	}

	/* ------------------------------------------------------
		3段組 */
	.Column3
		{
	}
	.Column3>ul>li,
	.Column3>ol>li,
	.Column3>.Wrap>article
		{
		width: 28.333%;
		width: calc((100% / 3) - 3em);
		flex-basis: calc((100% / 3) - 3em);
	}
	.Column3.Tight>ul>li,
	.Column3.Tight>ol>li
		{
		width: 33.333%;
		width: calc(100% / 3);
		flex-basis: calc(100% / 3);
	}

	/* ------------------------------------------------------
		4段組 */
	.Column4
		{
	}
	.Column4>ul>li,
	.Column4>ol>li,
	.Column4>.Wrap>article
		{
		width: 20%;
		width: calc((100% / 4) - 3em);
		flex-basis: calc((100% / 4) - 3em);
	}
	.Column4.Tight>ul>li,
	.Column4.Tight>ol>li	{
		width: 25%;
		width: calc(100% / 4);
		flex-basis: calc(100% / 4);
	}

	/* ------------------------------------------------------
		5段組 */
	.Column5
		{
	}
	.Column5>ul>li,
	.Column5>ol>li,
	.Column5>.Wrap>article
		{
		width: 15%;
		width: calc((100% / 5) - 3em);
		flex-basis: calc((100% / 5) - 3em);
	}
	.Column5.Tight>ul>li,
	.Column5.Tight>ol>li
		{
		width: 20%;
		width: calc(100% / 5);
		flex-basis: calc(100% / 5);
	}

	/* ------------------------------------------------------
		6段組 */
	.Column6
		{
	}
	.Column6>ul>li,
	.Column6>ol>li,
	.Column6>.Wrap>article
		{
		width: 11.666%;
		width: calc((100% / 6) - 3em);
		flex-basis: calc((100% / 6) - 3em);
	}
	.Column6.Tight>ul>li,
	.Column6.Tight>ol>li
		{
		width: 16.666%;
		width: calc(100% / 6);
		flex-basis: calc(100% / 6);
	}
}


/* ぴったり */
.Column.Tight	{}
.Column.Tight>ul,
.Column.Tight>ol	{
	width: 100%;
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}
.Column.Tight>ul>li,
.Column.Tight>ol>li	{
	margin: 0;
}

/* 幅自由に横並び */
.Layout>ul,
.Layout.Tight>ul,
.Layout>ol,
.Layout.Tight>ol	{
	margin-left: -3em;
	width: calc(100% + 3em);
}
.Layout>ul>li,
.Layout.Tight>ul>li,
.Layout>ol>li,
.Layout.Tight>ol>li	{
	width: auto;
	flex-basis: auto;
	margin-left: 3em;
}
.Layout>ul>li:not(:first-child),
.Layout.Tight>ul>li:not(:first-child),
.Layout>ol>li:not(:first-child),
.Layout.Tight>ol>li:not(:first-child)	{
}




/* ======================================================
	Layer
------------------------------------------------------ */
.Layer	{
	overflow: hidden;
	width: 100%;
	display: block;
}
.Layer div img	{ border-width: 0; }
.LayerBox	{
	position: absolute;
	width: 100%;
	display: block;
}

.LayerBoxA	{
	top: 0px;
	left: 0px;
	z-index: 1;
}
.LayerBoxB	{
	top: 0px;
	right: 0px;
	z-index: 2;
}
.LayerBoxC	{
	bottom: 0px;
	left: 0px;
	z-index: 3;
}
.LayerBoxD	{
	bottom: 0px;
	right: 0px;
	z-index: 4;
}




/* ======================================================
	======================================================
	======================================================
	======================================================
====================================================== */
th .Column,
td .Column,
.l .Column
{
	text-align: left;
}

th .Column>ul,
td .Column>ul,
th .Column>ol,
td .Column>ol,
.l .Column>ul,
.l .Column>ol	{
	margin-top: 0px;
	margin-bottom: 0px;
	justify-content: flex-start;
}
th .Column>ul>li,
td .Column>ul>li,
th .Column>ol>li,
td .Column>ol>li,
.l .Column>ul>li,
.l .Column>ol>li	{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}





/* ======================================================
	box
------------------------------------------------------ */
.img_l,
.img_r,
.Cap_l,
.Cap_r,
.Layout,
.Column>ul,
.Column>ol,
.Column>.Wrap,
.FigureLayout
	{ zoom: 1; }

.img_l:after,
.img_r:after,
.Cap_l:after,
.Cap_r:after,
.Layout:after,
.Column>ul:after,
.Column>ol:after,
.Column>.Wrap:after,
.FigureLayout:after
	{
	content: ""; 
	display: block; 
	clear: both;
}