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

/* ============================
		Reset
 ============================ */


/* ============================
		topVisualSection
 ============================ */

.topVisualSection .smartContainer {
background-image: url("../images/top_visual001.webp");
}


/* ============================
		entrancePhotoList /
		flowNumberList
 ============================ */

.mainSection .entrancePhotoList {
text-align: center;
margin-bottom: 0.5em;
}

.mainSection .entrancePhotoList li {
display: inline-block;
width: calc(50% - 6px);
text-align: right;
}
.mainSection .entrancePhotoList li:nth-child(even) {
text-align: left;
margin-left: 5px;
}

.mainSection .entrancePhotoList img {
width: 100%;
max-width: 500px;
}


.mainSection .flowNumberList {
counter-reset:number;
list-style-type: none!important;
margin-bottom: 3em;
}
.mainSection .flowNumberList > li {
position: relative;
padding-left: 30px;
line-height: 1.5em;
padding: 0.5em 0.5em 4em 2.5em;
margin-left: 0;
list-style:none;
background-image: url("../images/arrow001.svg");
background-repeat: no-repeat;
background-position: bottom center;
margin-bottom: 1em;
}
.mainSection .flowNumberList > li:last-child {
background-image: none;
padding-bottom: 0.5em;
}


.mainSection .flowNumberList > li::before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
background-color: #b32d24;
color: #fff;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 2.2rem;
border: 1px solid #000;
border-radius: 50%;
left: 0.1em;
width: 1.2em;
height: 1.2em;
line-height: 1.2em;
text-align: center;
top: 0.5em;
border-color: #b32d24;
}

.mainSection .commonFlowDivision .flowNumberList h4 {
font-size: 2.2rem;
color: #b32d24;
line-height: 1.5em;
margin-bottom: 1em;
}

.mainSection .flowNumberList .iLeft {
margin-bottom: 1em;
}

.mainSection .flowNumberList .iRight {
}

.mainSection .flowNumberList .photoList > li {
float: left;
width: calc(50% - 6px);
}
.mainSection .flowNumberList .photoList > li:nth-child(even) {
float: right;
}

.mainSection .flowNumberList .photoList li img {
width: 100%;
max-width: 390px;
}

.mainSection .flowNumberList .basicList > li {
background-position: left top 0.5em;
background-size: 12px auto;
line-height: 1.75em;
margin-bottom: 1.0em;
}

.mainSection .informationCounter .photo {
text-align: center;
margin-bottom: 1em;
}

.mainSection .informationCounter .photo img {
max-width: 100%;
}





/* for PC */
@media screen and (min-width: 1201px) {

	.mainSection .flowNumberList > li {
	padding-bottom: 6em;
	background-size: 150px auto;
	margin-bottom: 2em;
	background-position: bottom left 6.5em;
	}

	.mainSection .flowNumberList > li::before{
	font-size: 2.4rem;
	left: 0.1em;
	width: 1.4em;
	height: 1.4em;
	line-height: 1.3em;
	top: 0.35em;
	}

	.mainSection .entrancePhotoList li {
	width: calc(50% - 2em - 2px);
	}
	.mainSection .entrancePhotoList li:nth-child(even) {
	margin-left: 2em;
	}

	.mainSection .flowNumberList li {
	}

	.mainSection .commonFlowDivision .flowNumberList h4 {
	font-size: 2.4rem;
	}

	.mainSection .flowNumberList .iLeft {
	margin-bottom: 1em;
	float: left;
	width: 280px;
	}

	.mainSection .flowNumberList .iRight {
	float: right;
	width: calc(100% - 280px - 3em)
	}


	.mainSection .flowList h4 {
	font-size: 2.2rem;
	margin-left: 1em;
	}

	.mainSection .overtimeCallNumber a {
	font-size: 2.6rem;
	padding: 0 2em;
	}

	.mainSection .commonFlowDivision > li::before{
	top: 0.8em;
	}
	
	.mainSection .flowNumberList .photoList > li {
	float: none;
	width: 100%;
	margin-bottom: 1em;
	}
	.mainSection .flowNumberList .photoList > li:nth-child(even) {
	float: none;
	margin-bottom: 0;
	}



	.mainSection .informationCounter .photo {
	text-align: center;
	margin-bottom: 1em;
	float: right;
	}

}



/* ============================
		other
 ============================ */

/* for SP */
@media screen and (max-width: 767px) {
}

/* for TB */
@media screen and (max-width: 1200px) and (min-width: 768px){
}

/* for PC */
@media screen and (min-width: 1201px) {
}

/* for PCX */
@media screen and (min-width: 1501px) {
}