@charset "utf-8";

/*Keyvisual_01******************/
.Keyvisual_01 {
	background-image: image-set(url(../images/flow/Flow-key-img.jpg) 1x, url(../images/flow/Flow-key-img@2x.jpg) 2x);
	background-image: -webkit-image-set(url(../images/flow/Flow-key-img.jpg) 1x, url(../images/flow/Flow-key-img@2x.jpg) 2x);
}

/*Flow******************/
.Flow-block__body {
	position: relative;
}
.Flow-block__body:not(:last-child) {
	margin-bottom: 13.6rem;
}
.Flow-block__body:not(:last-child)::after {
	content: "";
	width: 0;
	height: 0;
	border-left: 36px solid transparent;
	border-right: 36px solid transparent;
	border-top: 40px solid var(--maincolor);
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	bottom: -10rem;
}
.Flow-block__flow-wrap {
	position: relative;
}
.flow-no {
	width: 12.2rem;
	height: 12.2rem;
	background-color: #fff;
	border-radius: 10rem;
	border: 3px solid var(--maincolor);
	color: var(--maincolor);
	font-size: 5rem;
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: -2.5rem;
	transform: translateY(-50%);
	font-weight: 700;
}
.Flow-block__title {
	font-size: 4rem;
	color: #fff;
	line-height: 2em;
	background-color: var(--maincolor);
	font-weight: 700;
	padding-left: 13.8rem;
}
.Flow-block__text-wrap {
	background-color: #fff;
	padding: 5rem;
	border: 3px solid var(--maincolor);
	min-height: 20.5rem;
	display: flex;
	align-items: center;
}

/*Catalog******************/
.Catalog {
	background-color: var(--maincolor);
}
.Catalog-block__text {
	color: #fff;
}
.Catalog-block__image {
	width: 50%;
}
.Catalog-block__body {
	width: 50%;
	padding-left: 7rem;
}
.Catalog-block__button-wrap {
	margin-top: 4.5rem;
}

/*SP対応******************/
@media screen and (max-width: 769px), print {
	.Keyvisual_01 {
		background-image: image-set(url(../images/flow/Flow-key-img-sp.jpg) 1x, url(../images/flow/Flow-key-img-sp@2x.jpg) 2x);
		background-image: -webkit-image-set(url(../images/flow/Flow-key-img-sp.jpg) 1x, url(../images/flow/Flow-key-img-sp@2x.jpg) 2x);
	}
	.Flow-block__title {
		font-size: 3.2rem;
		line-height: 2.5em;
		padding-left: 12.5rem;
	}
	.Flow-block__body:not(:last-child)::after {	
		border-left: 3.6rem solid transparent;
		border-right: 3.6rem solid transparent;
		border-top: 4rem solid var(--maincolor);
	}
	.Flow-block__text-wrap {
		padding: 4.4rem 3.5rem;
		min-height: 39rem;
		align-items: flex-start;
	}
	.Catalog-block_wrap {
		flex-direction: column;
	}
	.Catalog-block__image {
		width: 100%;
		margin-bottom: 5rem;
	}
	.Catalog-block__body {
		width: 100%;
		padding-left: 0;
	}
	.Catalog-block__button-wrap {
		margin-top: 5.5rem;
	}
    .Catalog-block__button-wrap .C-Button a {
        font-size: 3rem;
        height: 9.5rem;
    }
}