@charset "utf-8";
/* ----------------------------------------------
  ! Top header Elements
 ---------------------------------------------- */

.t-contents-header__box {
	margin: 0 40px;
	width: 996px;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.t-contents-header__box a.btn {
	position: relative;
	display: block;
	width: 237px;
	min-height: 335px;
	margin-right: 16px;
	float: left;
	overflow: hidden;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.1);
}

.t-contents-header__box a.btn:nth-of-type(4n) {
	margin-right: 0;
}

.t-contents-header__box a.btn img {
	margin: 3px 0 14px;
}

.t-contents-header__box a.btn::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 87px 87px 0 0;
	top: 3px;
	left: 0px;
}

.t-contents-header__box a.btn::after {
	content: '';
	position: absolute;
	height: 42px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	top: 5px;
	left: 10px;
}

.t-contents-header__box .bg-color01.btn::before {
	border-color: #f33b69 transparent transparent transparent;
}

.t-contents-header__box .bg-color02.btn::before {
	border-color: #3069be transparent transparent transparent;
}

.t-contents-header__box .bg-color03.btn::before {
	border-color: #23b460 transparent transparent transparent;
}

.t-contents-header__box .bg-color04.btn::before {
	border-color: #ffb400 transparent transparent transparent;
}

.t-contents-header__box .bg-color01.btn::after {
	width: 25px;
	background-image: url('../images/common/icon01_mc.png');
}

.t-contents-header__box .bg-color02.btn::after {
	width: 39px;
	background-image: url('../images/common/icon02_mc.png');
}

.t-contents-header__box .bg-color03.btn::after {
	width: 35px;
	background-image: url('../images/common/icon03_mc.png');
}

.t-contents-header__box .bg-color04.btn::after {
	width: 30px;
	background-image: url('../images/common/icon04_mc.png');
}

.t-contents-header__box h2 {
	min-height: 42px;
	font-size: 18px;
	line-height: 1.2;
	color: #fff;
	padding: 0 10px;
}

.t-contents-header__box .notes {
	font-size: 12px;
	line-height: 1.5;
	color: #fff;
	padding: 10px 10px 52px;
}

.t-contents-header__box .st-category {
	position: absolute;
	/*
	display: table;
*/
	width: 100%;
	height: 42px;
	background-color: #fff;
	bottom: 0;
	padding: 0 10px;
}

.t-contents-header__box .st-category p {
	position: relative;
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1;
	padding: 15.5px 0 15.5px 28px;
	letter-spacing: -0.03em;
}

.t-contents-header__box .st-category p::before {
	content: '';
	position: absolute;
	display: block;
	width: 22px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0px;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
}

.t-contents-header__box .st-category p {
	/*
	display: table-cell;
	vertical-align: middle;
*/
}

.t-contents-header__box .st-category p.color01::before {
	background-image: url('../images/common/icon01.png');
}

.t-contents-header__box .st-category p.color02::before {
	background-image: url('../images/common/icon02.png');
}

.t-contents-header__box .st-category p.color03::before {
	background-image: url('../images/common/icon03.png');
}

.t-contents-header__box .st-category p.color04::before {
	background-image: url('../images/common/icon04.png');
}

.t-contents-header__box .st-category p.color05::before {
	background-image: url('../images/common/icon05.png');
}

@media screen and (max-width: 640px) {
	.t-contents-header__box {
		width: 93.75%;
		margin: 0 auto;
	}
	.t-contents-header__box a.btn {
		width: 48%;
		min-height: 64.0625vw;
		/*410*/
		margin-right: 2%;
		margin-bottom: 3.125vw;
		/*20*/
		border-radius: 0.78125vw;
		/*5*/
		-moz-border-radius: 0.78125vw;
		-webkit-border-radius: 0.78125vw;
		-o-border-radius: 0.78125vw;
		-ms-border-radius: 0.78125vw;
	}
	.t-contents-header__box a.btn:nth-of-type(2n) {
		margin-right: 0;
	}
	.t-contents-header__box a.btn img {
		margin: 0.625vw 0 3.125vw;
		/*4,20*/
	}
	.t-contents-header__box a.btn::before {
		border-width: 16.875vw 16.875vw 0 0;
		/*108 108*/
		top: 0.625vw;
		/*4*/
	}
	.t-contents-header__box a.btn::after {
		height: 8.125vw;
		/*52*/
		top: 1.25vw;
		/*8*/
		left: 2.1875vw;
		/*14*/
	}
	.t-contents-header__box .bg-color01.btn::after {
		width: 4.84375vw;
		/*31*/
	}
	.t-contents-header__box .bg-color02.btn::after {
		width: 7.5vw;
		/*48*/
	}
	.t-contents-header__box .bg-color03.btn::after {
		width: 6.71875vw;
		/*43*/
	}
	.t-contents-header__box .bg-color04.btn::after {
		width: 5.78125vw;
		/*37*/
	}
	.t-contents-header__box h2 {
		min-height: 3.75vw;
		/*24*/
		font-size: 3.4375vw;
		/*22*/
		padding: 0 3.125vw;
		/*20*/
	}
	.t-contents-header__box .notes {
		font-size: 3.125vw;
		/*20*/
		line-height: 1.3;
		padding: 3.125vw 3.125vw 11.5625vw;
		/*20,20,74*/
	}
	.t-contents-header__box .st-category {
		height: 0;
		min-height: 10vw;
		/*64*/
		padding: 0 3.125vw;
		/*20*/
	}
	.t-contents-header__box .st-category p {
		padding: 1.25vw 0 1.25vw 5.3125vw;
		/*8,8,34*/
		font-size: 3.125vw !important;
		/*20*/
		line-height: 1.2;
	}
	.t-contents-header__box .st-category p::before {
		width: 4.0625vw;
		/*26*/
		height: 4.0625vw;
		/*26*/
	}
}

/* ----------------------------------------------
  ! section01 Elements
 ---------------------------------------------- */

.t-section01 {
	margin-top: 30px;
}

.t-section01__sub {
	margin-bottom: 40px;
}

.t-section01__sub p {
	font-size: 12px;
}


@media screen and (max-width: 640px) {
	.t-section01__sub {
		margin: 5.3125vw 7.8125vw;
		/*34,50*/
	}
	.t-section01__sub p {
		font-size: 3.125vw;
		/*20*/
		text-indent: -1em;
		padding-left: 1em;
		line-height: 1.8;
	}
}

.random {
	display: none !important;
}