@charset "utf-8";

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

	/* ------ Body ------ */
	#factory .inner > p.ttl_b{
		font-size:18px;
		margin-bottom:20px;
		text-align:center;
		display:block;
	}

	.step{
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
		align-items: stretch;
		-webkit-align-items: stretch;
	}
	.step li{
		margin-bottom:60px;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: stretch;
		-webkit-align-items: stretch;
		width:50%;
		position:relative;
		z-index:0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.step li:before{
		content:"";
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		left:0;
		z-index:-1;
		background-image: url(../../img/factory_info/no_line.png);
		background-repeat: repeat-x;
		background-size: auto;
	}
	.step li:nth-child(2n+1):before{
		background-position: right 0 top 20px;
	}
	.step li:nth-child(2n):before{
		background-position: left 0 top 20px;
	}
	.step li.s01{
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		padding-right:2%;
	}
	.step li.s01 .img{
		margin-right:auto;
	}
	.step li.s02{
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		padding-left:1%;
		padding-right:1%;
	}
	.step li.s02 .img{
		margin-right:auto;
	}
	.step li.s03{
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
		padding-left:1%;
		padding-right:1%;
	}
	.step li.s03 .img{
		margin-left:auto;
	}
	.step li.s04{
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
		padding-left:2%;
	}
	.step li.s04 .img{
		margin-left:auto;
	}
	.step li.s05{
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		padding-right:2%;
	}
	.step li.s05 .img{
		margin-right:auto;
	}
	.step li.s06{
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
		padding-left:1%;
		padding-right:1%;
	}
	.step li.s06 .img{
		margin-right:auto;
	}
	.step li.s07{
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
		padding-left:1%;
		padding-right:1%;
	}
	.step li.s07 .img{
		margin-right:auto;
	}
	.step li.s08{
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
		padding-left:2%;
	}
	.step li.s08 .img{
		margin-right:auto;
	}
	.step li:nth-last-child(-n+2){
		margin-bottom:0;
	}
	.step .img{
		max-width:310px;
		width:64.6%;
	}
	.step .ttl{
		width:31.3%;
	}
	.step .ttl h3{
		font-size:16px;
		margin-bottom:15px;
	}
	.step .ttl h3 .no{
		background-color:#d90000;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: center;
		justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		width:26px;
		height:26px;
		min-width:26px;
		min-height:26px;
		color:#fff;
		margin:8px auto 15px 0;
		text-align:center;
	}
	.step .ttl h3 .ttl_b{
		margin:0;
	}
	.step .ttl p{
		line-height:1.6em;
	}
}

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

	/* ------ Body ------ */
	#factory .inner > p.ttl_b{
		font-size:5vw;
		margin-bottom:0.625em;
		text-align:left;
		display:block;
	}
	.step li{
		margin-bottom:6.25vw;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		align-items: stretch;
		-webkit-align-items: stretch;
		width:100%;
		position:relative;
		z-index:0;
		box-sizing:border-box;
		-webkit-box-sizing:border-box;
	}
	.step li:before{
		content:"";
		display:block;
		width:100%;
		height:100%;
		position:absolute;
		top:0;
		z-index:-1;
		background-image: url(../../img/factory_info/no_line.png);
		background-repeat: repeat-x;
		background-size: auto 0.625vw;
	}
	.step li:nth-child(2n+1){
		flex-flow: row nowrap;
		-webkit-flex-flow: row nowrap;
	}
	.step li:nth-child(2n+1):before{
		background-position: right 0 top 2.5vw;
		right:-3.125vw;
	}
	.step li:nth-child(2n){
		flex-flow: row-reverse nowrap;
		-webkit-flex-flow: row-reverse nowrap;
	}
	.step li:nth-child(2n):before{
		background-position: left 0 top 2.5vw;
		left:-3.125vw;
	}
	.step li:last-child{
		margin-bottom:0;
	}
	.step .img{
		max-width:310px;
		width:48.438vw;
	}
	.step .ttl{
		width:42.188vw;
	}
	.step .ttl h3{
		margin-bottom:1.563vw;
	}
	.step .ttl h3 .no{
		background-color:#d90000;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border-radius: 50%;
		display:flex;
		-js-display:flex;
		display:-webkit-flex;
		-webkit-justify-content: center;
		justify-content: center;
		align-items: center;
		-webkit-align-items: center;
		width:5.625vw;
		height:5.625vw;
		min-width:5.625vw;
		min-height:5.625vw;
		color:#fff;
		margin:0 auto 3.125vw 0;
		text-align:center;
		font-size:3.5vw;
	}
	.step .ttl h3 .ttl_b{
		font-size:3.75vw;
		margin:0;
	}
	.step .ttl p{
		line-height:1.5em;
	}
}