@charset "utf-8";


/*  l-flow
--------------------------------------------------*/
.l-flow {
	padding-block: 4.0rem 8.0rem;
}
.flow-head {
	margin-bottom: 9.0rem;
}
.flow-head__heading {
	font-size: 4.0rem;
	line-height: 1.45;
	letter-spacing: .05em;
	text-align: center;
	padding-top: 4.1rem;
	margin-bottom: 3.0rem;
}
.flow-head__heading i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
    display: block;
    width: 2.9rem;
    font-size: 0;
    line-height: 1;
}
.flow-head__desc {
	font-size: 1.8rem;
	line-height: 1.45;
	letter-spacing: .05em;
	text-align: center;
}
.flow-list {
	width: 100%;
}
.flow-list__item {
	position: relative;
	width: calc(310 / 1500 * 100%);
}
.flow-list__item + .flow-list__item::before {
	content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(18 / 310 * 100%);
    padding-bottom: calc(18 / 310 * 100%);
    margin: calc(160 / 310 * 100%) 0 0 calc(-60 / 310 * 100%);
    border-top: 1.5px solid #bebebe;
    border-right: 1.5px solid #bebebe;
    transform: rotate(45deg);
}
.flow-list__item__image {
	width: calc(300 / 310 * 100%);
	margin: 0 auto 4.0rem;
}
.flow-list__item__detail {
	width: 100%;
}
.flow-list__item__detail__heading {
	font-size: clamp(14px, 1.676646706586826vw, 2.8rem);
	line-height: 1.285714285714286;
	letter-spacing: .01em;
	text-align: center;
	margin-bottom: 1.3rem;
}
.flow-list__item1 .flow-list__item__detail__heading {
	color: #47b3d1;
}
.flow-list__item2 .flow-list__item__detail__heading {
	color: #43ccb8;
}
.flow-list__item3 .flow-list__item__detail__heading {
	color: #7bc255;
}
.flow-list__item4 .flow-list__item__detail__heading {
	color: #ebbe00;
}
.flow-list__item__detail__desc {
	font-size: clamp(12px, 1.08vw, 1.8rem);
	line-height: 2.222222222222222;
	letter-spacing: .01em;
	text-align: center;
}
.flow-list__item__detail__btn {
	width: 100%;
	height: 6.0rem;
	font-size: 1.8rem;
	line-height: 1;
	letter-spacing: .05em;
	font-weight: 500;
	color: var(--white);
	text-align: center;
	letter-spacing: .05em;
	background: #6c6c6c;
	border-radius: 3.0rem;
	margin-top: 4.0rem;
}
.flow-list__item__detail__btn span {
	display: block;
}
.flow-list__item__detail__btn i {
	display: inline-block;
	width: 2.8rem;
	vertical-align: -.15em;
	margin-right: 1.6rem;
}
@media (any-hover: hover){
	.flow-list__item__detail__btn {
		transition: transform .2s linear,filter .2s linear;
	}
	.flow-list__item__detail__btn:hover {
		transform: scale(1.01);
        filter: drop-shadow(4px 4px 1px rgba(0 0 0 / .2));
	}
}
@media screen and (max-width: 768px){
	.l-flow {
		padding-block: 3.5rem 4.4rem;
	}
	.flow-head {
		margin-bottom: 5.0rem;
	}
	.flow-head__heading {
		font-size: 2.8rem;
		padding-top: 2.3rem;
		margin-bottom: 1.5rem;
	}
	.flow-head__heading i {
	    width: 2.0rem;
	}
	.flow-head__desc {
		font-size: 1.6rem;
		line-height: 2.125;
	}
	.flow-list__item {
		width: 100%;
	}
	.flow-list__item + .flow-list__item {
		padding-top: 6.9rem;
        margin-top: 4.1rem;
	}
	.flow-list__item + .flow-list__item::before {
	    right: 0;
	    width: calc(16 / 320 * 100%);
	    padding-bottom: calc(16 / 320 * 100%);
	    margin: 0 auto;
	    transform: rotate(135deg);
	}
	.flow-list__item__image {
		width: calc(240 / 320 * 100%);
		margin: 0 auto 3.3rem;
	}
	.flow-list__item__detail__heading {
		font-size: 2.4rem;
		margin-bottom: 1.2rem;
	}
	.flow-list__item__detail__desc {
		font-size: 1.6rem;
		line-height: 2.125;
	}
	.flow-list__item__detail__btn {
		width: calc(240 / 320 * 100%);
		height: 5.0rem;
		font-size: 1.6rem;
		border-radius: 2.4rem;
		margin: 3.1rem auto 0;
	}
	.flow-list__item__detail__btn i {
		width: 2.4rem;
		vertical-align: -.15em;
		margin-right: 1.2rem;
	}
}



/*  l-price
--------------------------------------------------*/
.l-price {
	position: relative;
	padding-block: 12.0rem 15.0rem;
	background : linear-gradient(90deg, rgba(246 221 124 / 1) 0%, rgba(240 220 125 / 1) 9.54%, rgba(224, 219, 127, 1) 22.03%, rgba(197, 216, 131, 1) 36.08%, rgba(163, 212, 136, 1) 50%, rgba(163, 212, 136, 1) 50.12%, rgba(147, 208, 174, 1) 64.9%, rgba(135, 205, 201, 1) 78.61%, rgba(128, 203, 217, 1) 90.74%, rgba(126, 202, 223, 1) 100%);
}
.l-price::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 66.0rem;
	background : linear-gradient(180deg, rgba(255 255 255 / 1) 0%, rgba(255 255 255 / 0) 100%);
	z-index: 1;
}
.price-inner {
	padding-block: 10.0rem 7.0rem;
	border-radius: 6.0rem;
	background: var(--white);
	z-index: 2;
}
.price-reward {
	width: calc(1300 / 1500 * 100%);
	margin: 0 auto;
}
.price-reward__heading {
	position: relative;
	font-size: 4.0rem;
	line-height: 1.45;
	letter-spacing: .05em;
	text-align: center;
	padding-top: 4.1rem;
	margin-bottom: 7.0rem;
}
.price-reward__heading i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
    display: block;
    width: 2.9rem;
    font-size: 0;
    line-height: 1;
}
.price-reward__contents {
	width: 100%;
}
.price-reward__contents__figure {
	position: relative;
}
.price-service {
	width: calc(1300 / 1500 * 100%);
	margin: 7.5rem auto 0;
}
.price-service__heading {
	position: relative;
	font-size: 3.2rem;
	line-height: 1.45;
	letter-spacing: .05em;
	text-align: center;
	padding-top: 3.1rem;
	margin-bottom: 5.0rem;
}
.price-service__heading i {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin-inline: auto;
    display: block;
    width: 2.2rem;
    font-size: 0;
    line-height: 1;
}
.price-service__contents {
	width: 100%;
}
.price-service__contents__figure {
	position: relative;
}
.price-note {
	font-size: 1.4rem;
	line-height: 1.45;
	letter-spacing: .05em;
	text-align: right;
	margin-top: 1.5rem;
}
@media screen and (max-width: 768px){
	.l-price {
		padding-block: 5.0rem 8.0rem;
	}
	.l-price::before {
		height: 20.0rem;
	}
	.price-inner {
		padding-block: 5.0rem 4.0rem;
		border-radius: 2.6rem;
	}
	.price-reward {
		width: calc(260 / 320 * 100%);
	}
	.price-reward__heading {
		font-size: 2.8rem;
		padding-top: 2.3rem;
		margin-bottom: 3.4rem;
	}
	.price-reward__heading i {
	    width: 2.0rem;
	}
	.price-reward__contents__figure figure {
		width: 800px;
	}
	.price-service {
		width: calc(260 / 320 * 100%);
		margin: 5.0rem auto 0;
	}
	.price-service__heading {
		font-size: 2.0rem;
		padding-top: 2.3rem;
		margin-bottom: 2.5rem;
	}
	.price-service__heading i {
	    width: 1.6rem;
	}
	.price-service__contents__figure figure {
		width: 800px;
	}
	.price-note {
		font-size: 1.1rem;
		text-align: left;
		margin-top: 1.0rem;
	}
}