@charset "utf-8";




@media screen and (max-width: 768px) {
	
	
}

/* -----------------------------------------------------------
    トップキャッチエリア
------------------------------------------------------------
#recruit.flow .catch-area .txt-img-wrap {
	display: flex;
	gap: 50px;
	justify-content: space-between;
	align-items: center;
	margin-top: 80px;
}

#recruit.flow .catch-area .txt-area {
	width: 45%;
}

#recruit.flow .catch-area .txt-area .catch {
	font-size: 3rem;
	line-height: 1.8;
	letter-spacing: 0.02em;
}

#recruit.flow .catch-area .img-area {
	display: flex;
	gap: 30px;
}

#recruit.flow .catch-area .img-wrap:nth-child(2) {
	margin-top: 20px;
}



@media screen and (max-width: 667px){


}
-- */



/* -----------------------------------------------------------
    MV
-------------------------------------------------------------- */
.lower-ttl-area {
	height: 860px;
}

.lower-ttl-area .int-mv-inner .img-area {
	height: 860px;
}

#recruit.flow .h1-wrap h1 {
    top: 880px;
}
#recruit.flow .breadcrumbs {
    top: 890px;
}

.point-list {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 20px;
}

.point-list li {
	position: relative;
	padding-left: 25px;
}
.point-list li::before {
    content: '\f058';
    position: absolute;
    top: 6px;
    left: -0px;
    font-family: 'FontAwesome';
    color: #31d8a8;
    font-size: 1.8rem;
}

@media screen and (max-width: 768px) {
	.lower-ttl-area {
		height: 100%;
	}

	.lower-ttl-area .int-mv-inner .img-area {
		height: 100%;
	}
	#recruit.flow .h1-wrap h1 {
		top: 5px;
	}
}


/* -------------------------------------------------------------
    導入の流れ
-------------------------------------------------------------- */
.flow-area.inner {
    margin: 100px auto;
    position: relative;
}

.flow-area .flow-list {
    margin-top: 40px;
    position: relative;
}

.flow-area .flow-list::before {
    content: "";
    width: 5px;
    height: 100%;
    background-color: #002060;
    position: absolute;
    left: 7.5%;
    z-index: -1;
}

.flow-area .flow-list li {
    background-color: #F5F7F9;
    padding: 30px;
    display: flex;
    border-radius: 30px;
    align-items: center;
    gap: 50px;
    margin-bottom: 30px;
}


.flow-area .flow-list li .icon-ttl {
    display: flex;
    align-items: center;
    gap: 50px;
}

.flow-area .flow-list li .icon-area {
    width: 150px;
    height: 150px;
    border-radius: 80px;
    background-color: #fff;
    position: relative;
}

.flow-area .flow-list li .icon-area img {
    max-width: 95px;
    max-height: 95px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


.flow-area .flow-list li .ttl {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002060;
    width: 332px;
    text-align: left;
    display: flex;
	line-height: 1.5;
}

.flow-area .flow-list li .ttl span {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002060;
    margin-right: 20px;
    white-space: nowrap;
}

.flow-area .flow-list li .txt {
    text-align: left;
}

.flow-area .flow-list li .flow-in-list{
	margin: 10px 0;
}

.flow-area .flow-list li .flow-in-list div {
    position: relative;
	padding-left: 20px;
}

.flow-area .flow-list li .flow-in-list div::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    top: 11px;
    left: 0px;
    border-radius: 5px;
    background: #002060;
}

.flow-area .flow-list li a {
    font-weight: 700;
	color: #ccab21;
    display: inline-block;
    text-decoration: underline;
}



@media screen and (max-width: 1400px) {
	.flow-area .flow-list::before {
		left: 8.5%;
	}
}

@media screen and (max-width: 768px) {
	.flow-area.inner {
		margin: 40px 0;
	}
	
	.flow-area .flow-list {
		margin-top: 20px;
	}

	.flow-area .flow-list::before {
		content: "";
		width: 5px;
		height: 95%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

	.flow-area .flow-list li {
		padding: 30px;
		display: flex;
		border-radius: 30px;
		align-items: center;
		gap: 20px;
		margin-bottom: 10px;
		flex-direction: column;
	}

	.flow-area .flow-list li:last-child {
		margin-bottom: 0px;
	}

	.flow-area .flow-list li .icon-ttl {
		display: flex;
		align-items: center;
		gap: 20px;
		width: 100%;
	}

	.flow-area .flow-list li .icon-area {
		width: 70px;
		height: 70px;
		position: relative;
		flex-shrink: 0;
	}

	.flow-area .flow-list li .icon-area img {
		max-width: 45px;
		max-height: 45px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}

	.flow-area .flow-list li .ttl {
		font-size: 1.8rem;
		width: 100%;
		text-align: left;
		display: flex;
	}

	.flow-area .flow-list li .ttl span {
		font-size: 2.2rem;
		margin-right: 15px;
	}
}