@charset "utf-8";

/* ------------------------------------------------------------------------- *
 *	PC : 641px < Window Size
/* ------------------------------------------------------------------------- */
@media print,screen and (min-width: 641px) {
	/* ------ Header ------ */
	#page-ttl{
		background-image: url(../../img/commitment/page_ttl_pc.jpg);
	}

	/* ------ Body ------ */
	#commitment .top{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		align-items: flex-start;
		-webkit-align-items: flex-start;
		margin-bottom:60px;
	}
	#commitment .top .img{
		width:48%;
	}
	#commitment .top p{
		width:48%;
		line-height:1.7em;
	}

	.commitment{
		margin-bottom:40px;
	}
	.commitment li{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: stretch;
		-webkit-align-items: stretch;
		margin-bottom:80px;
	}
	.commitment li:nth-child(2n+1){
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
	}
	.commitment li:nth-child(2n){
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
	}
	.commitment li:last-child{
		margin-bottom:0;
	}
	.commitment li .img{
		width:56%;
		position:relative;
		z-index:2;
	}
	.commitment li .tbox{
		width:44%;
		position:relative;
		z-index:0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.commitment li:nth-child(2n+1) .tbox{
		padding:40px 4% 0 0;
	}
	.commitment li:nth-child(2n) .tbox{
		padding:40px 0 0 4%;
	}
	.commitment li .tbox:before{
		content:"";
		position:absolute;
		z-index:1;
		width:127.273%;
		height:100%;
		display:block;
		background-color:#d90000;
		top:40px;
	}
	.commitment li:nth-child(2n+1) .tbox:before{
		right:0;
	}
	.commitment li:nth-child(2n) .tbox:before{
		left:0;
	}
	.commitment li h3{
		position:relative;
		z-index:2;
		margin:84px 0 28px;
		padding:0 0 22px 5%;
		border-bottom:1px solid #fff;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.commitment li:nth-child(2n+1) h3{
		padding:0 0 22px 5%;
	}
	.commitment li:nth-child(2n) h3{
		padding:0 5% 22px 0;
	}
	.commitment li h3 .no{
		margin-bottom:24px;
		display:block;
	}
	.commitment li h3 .lbl{
		color:#fff;
		font-size:40px;
		display:block;
		line-height: 1.2em;
	}
	.commitment li p{
		color:#fff;
		line-height:1.6em;
		position:relative;
		z-index:2;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.commitment li:nth-child(2n+1) p{
		padding-left:5%;
	}
	.commitment li:nth-child(2n) p{
		padding-right:5%;
	}
}

/* ------------------------------------------------------------------------- *
 *	Mobile (Low Res) : 1040px > 641px
/* ------------------------------------------------------------------------- */
@media only screen and (max-width: 1040px) and (min-width: 641px) {
	.commitment li h3 .lbl{
		font-size:3.846vw;
	}
}

/* ------------------------------------------------------------------------- *
 *	Mobile (Low Res) : 640px > 0
/* ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	/* ------ Header ------ */
	#page-ttl{
		background-image: url(../../img/commitment/page_ttl_sp.jpg);
	}

	/* ------ Body ------ */
	#commitment .top{
		margin-bottom:7.813vw;
	}
	#commitment .top .img{
		width:100%;
		margin-bottom:5.469vw;
	}
	#commitment .top p{
		width:100%;
	}

	.commitment li{
		margin-bottom:6.25vw;
	}
	.commitment li:last-child{
		margin-bottom:0;
	}
	.commitment li .img{
		width:100%;
	}
	.commitment li .tbox{
		width:100%;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
		padding:0 3.125vw 5.469vw;
		background-color:#d90000;
	}
	.commitment li h3{
		border-bottom:1px solid #fff;
		padding-bottom:4.375vw;
		margin-bottom:4.063vw;
	}
	.commitment li h3 .no{
		margin:0 0 4.219vw;
		display:block;
		width:27.188vw;
	}
	.commitment li h3 .no img{
		margin-top:-2.031vw;
	}
	.commitment li h3 .lbl{
		color:#fff;
		font-size:6.25vw;
		display:block;
		line-height: 1em;
	}
	.commitment li p{
		color:#fff;
		line-height:1.6em;
	}
}