@charset "utf-8";
/*------------------------------------------------------------
	汎用スタイル
------------------------------------------------------------*/
/* clearfix */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
/* flex */
.flex, .flexA, .flexB, .flexC {
	display: flex;
	flex-wrap: wrap;
}
.flexA {
	justify-content: space-around;
}
.flexB {
	justify-content: space-between;
}
.flexC {
	justify-content: center;
}
/*------------------------------------------------------------
	comBox
------------------------------------------------------------*/
.comBox {
	margin: 0 auto;
	width: 1080px;
	box-sizing: border-box;
}
@media all and (max-width: 896px) {
	.comBox {
		padding: 0 20px;
		width: auto;
	}
}
/*------------------------------------------------------------
	headLine01
------------------------------------------------------------*/
.headLine01 {
	margin-bottom: 37px;
	font-size: 2.4rem;
	line-height: 1.3;
	text-align: center;
}
.headLine01 .en {
	display: block;
	font-size: 4.8rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	font-family: 'Raleway', sans-serif;
}
.headLine01.white {
	color: #FFF;
}
@media all and (max-width: 896px) {
	.headLine01 {
		margin-bottom: 30px;
		font-size: 1.6rem;
		line-height: 1.125;
	}
	.headLine01 .en {
		margin-bottom: 7px;
		font-size: 4.1rem;
	}
}
/*------------------------------------------------------------
	comList
------------------------------------------------------------*/
.comList {
	margin-bottom: 27px;
}
.comList li {
	width: 345px;
	position: relative;
	box-sizing: border-box;
	border-radius: 12px;
	box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.16);
}
.comList li .imgBox::before {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: -55px;
	background-color: #7998FF;
	content: '';
	z-index: -1;
	border-radius: 12px;
}
.comList li a {
	display: block;
	padding-bottom: 55px;
	background: url("../../img/index/icon02.png") no-repeat bottom center / 90px auto;
	height: 100%;
	box-sizing: border-box;
}
.comList li .imgBox {
	padding: 37px 22px 10px 11px;
	position: relative;
}
.comList li .imgBox .photo {
	margin-top: -6px;
	width: 112px;
	float: left;
}
.comList li .imgBox .textBox {
	width: 187px;
	float: right;
}
.comList li .imgBox .textBox p {
	color: #fff;
	font-weight: bold;
	font-size: 1.4rem;
	line-height: 1.28;
}
.comList li .imgBox .textBox .kw {
	margin-bottom: 3px;
	padding: 5px 25px 8px 50px;
	font-size: 2.4rem;
	border-radius: 19px;
	line-height: 1;
	box-shadow: 3px 6px 16px rgba(0, 0, 0, 0.16);
	background: #111111 url("../../img/index/icon03.png") no-repeat left 11px center / 24px auto;
}
.comList li .imgBox .textBox .price {
	margin-bottom: 6px;
	font-size: 2.4rem;
}
.comList li .imgBox .textBox .price > span {
	font-size: 3.9rem;
}
.comList li .imgBox .textBox .price > span span {
	font-size: 2.6rem;
}
.comList li .imgBox .textBox .size {
	padding: 9px 0 10px 30px;
	font-size: 1.8rem;
	background-size: 18px auto;
}
.comList li a:hover {
	opacity: 0.7;
}
.comList li:nth-child(2) .imgBox::before {
	background-color: #406CFF;
}
.comList li:nth-child(3) .imgBox::before {
	background-color: #0030D0;
}
@media all and (max-width: 896px) {
	.comList {
		margin-bottom: 24px;
		display: block;
	}
	.comList li {
		margin-bottom: 24px;
		width: auto;
	}
	.comList li:last-child {
		margin-bottom: 0;
	}
	.comList li .imgBox {
		padding: 37px 17px 10px 6px;
	}
	.comList li a {
		padding-bottom: 58px;
	}
	.comList li .imgBox::before {
		bottom: -58px;
	}
	.comList li:last-child .imgBox .photo {
		margin-top: -8px;
	}
	.comList li .imgBox .textBox {
		width: 	calc(100% - 125px);
	}
	.comList li .imgBox .textBox .price {
		letter-spacing: -0.05em;
	}
	
}
@media all and (max-width: 374px) {
	.comList li .imgBox {
		padding: 37px 6px 10px;
	}
	.comList li .imgBox .photo {
		width: 95px;
	}
	
}
@media all and (-ms-high-contrast:none){

	.comList li .imgBox .textBox .kw {
		padding: 10px 25px 2px 50px;
	}
	.comList li .imgBox .textBox .size {
		padding: 12px 0 7px 35px;
	}
	
}