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

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

.Layout	{
	display: inline-block;
}
.LayoutBox	{
	display: inline-block;
}

/* ======================================================
	組版
====================================================== */
.Vtop	{
	vertical-align: top;
}
.Vmiddle	{
	vertical-align: middle;
}
.Vbottom	{
	vertical-align: bottom;
}

/* ======================================================
	Layer
------------------------------------------------------ */
.Layer	{
	display: block;
}
.Layer>.Box	{
	position: absolute;
	display: block;
}
.BoxA	{
	top: 0px;
	left: 0px;
	z-index: 1;
}
.BoxB	{
	top: 0px;
	right: 0px;
	z-index: 2;
}
.BoxC	{
	bottom: 0px;
	left: 0px;
	z-index: 3;
}
.BoxD	{
	bottom: 0px;
	right: 0px;
	z-index: 4;
}




/* ======================================================
	左寄せ・右寄せ
------------------------------------------------------ */
.FloatBox	{
}
.FloatBox>.Float	{
	display: block;
}

/* 幅が、481px以上 */
@media screen and (min-width: 480px) {
/*@media screen, (min-width:30em), screen, (min-width:182.1mm) {*/
	.img_l img	{
		display: block;
		float: left;
		margin-right: 1em;
	}
	.img_r img	{
		display: block;
		float: right;
		margin-left: 1em;
	}
	.FloatL	{
		float: left;
		margin-right: 1em;
	}
	.FloatR	{
		float: right;
		margin-left: 1em;
	}
}



/* ======================================================
	段組
	------------------------------------------------------
	[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: 0;
	margin-bottom: 0;
}
.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: center;
	-ms-flex-pack: center;
	justify-content: center;
	
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
/*
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
	
*/
#Admin .Column>ul,
#Admin .Column>ol,
#Admin .Column>.Wrap
	{
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.Column>ul>li,
.Column>ol>li,
.Column>.Wrap>article	{
	margin-top: 3em;
	margin-left: 3em;
	margin-bottom: 0;
	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%;
}

/* 幅が、480px未満 */
@media screen and (max-width: 480px) {
	.Column>ul>li:nth-child(1),
	.Column>ol>li:nth-child(1),
	.Column>.Wrap>article:nth-child(1)	{
		margin-top: inherit;
	}
}
/* ------------------------------------------------------
	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>ul>li:nth-child(1),
.Column2>ul>li:nth-child(2),
.Column2>ol>li:nth-child(1),
.Column2>ol>li:nth-child(2)
	{
	margin-top: inherit;
}
.Column2.Tight>ul>li,
.Column2.Tight>ol>li	{
	width: 50%;
	width: calc(100% / 2);
	flex-basis: calc(100% / 2);
}

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

	/* ------------------------------------------------------
		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>ul>li:nth-child(1),
	.Column3>ul>li:nth-child(2),
	.Column3>ul>li:nth-child(3),
	.Column3>ol>li:nth-child(1),
	.Column3>ol>li:nth-child(2),
	.Column3>ol>li:nth-child(3)
		{
		margin-top: inherit;
	}
	.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>ul>li:nth-child(1),
	.Column4>ul>li:nth-child(2),
	.Column4>ul>li:nth-child(3),
	.Column4>ul>li:nth-child(4),
	.Column4>ol>li:nth-child(1),
	.Column4>ol>li:nth-child(2),
	.Column4>ol>li:nth-child(3),
	.Column4>ol>li:nth-child(4)
		{
		margin-top: inherit;
	}
	.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>ul>li:nth-child(1),
	.Column5>ul>li:nth-child(2),
	.Column5>ul>li:nth-child(3),
	.Column5>ul>li:nth-child(4),
	.Column5>ul>li:nth-child(5),
	.Column5>ol>li:nth-child(1),
	.Column5>ol>li:nth-child(2),
	.Column5>ol>li:nth-child(3),
	.Column5>ol>li:nth-child(4),
	.Column5>ol>li:nth-child(5)
		{
		margin-top: inherit;
	}
	.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>ul>li:nth-child(1),
	.Column6>ul>li:nth-child(2),
	.Column6>ul>li:nth-child(3),
	.Column6>ul>li:nth-child(4),
	.Column6>ul>li:nth-child(5),
	.Column6>ul>li:nth-child(6),
	.Column6>ol>li:nth-child(1),
	.Column6>ol>li:nth-child(2),
	.Column6>ol>li:nth-child(3),
	.Column6>ol>li:nth-child(4),
	.Column6>ol>li:nth-child(5),
	.Column6>ol>li:nth-child(6)
		{
		margin-top: inherit;
	}
	.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;
}
.Column.Tight>ul>li,
.Column.Tight>ol>li	{
	margin: 0;
}


/* 両端揃え */
.Column.Justify	{}
.Column.Justify>ul,
.Column.Justify>ol	{
	justify-content: space-between;
}



/* ======================================================
	======================================================
	======================================================
	======================================================
====================================================== */
/*
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,
.Column>ul,
.Column>ol,
.Column>.Wrap,
.FloatBox
	{ zoom: 1; }

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