@charset "utf-8";

.pagePlan{
	/* scroll-margin-top: 0; */
	.c-kv{
		.c-kv__copy{
			bottom: -8rem;
			width: 62.4rem;
			@media (width > 767px) {/* PC */
				margin-left: 14rem;
			}
			@media (width <= 767px) {/* SP */
				width: 29.3rem;
				right: 1rem;
        bottom: -6rem;
			}
		}
	}
	.pageCnt{
		overflow: hidden;
		background: url(../images/plan/bg-blue.webp) center top;
		padding-top: 15.5rem;
		@media (width <= 767px) {/* SP */
			padding-top: 10.5rem;
		}
		.pageCnt__in{
			display: flex;
			flex-direction: column;
			margin: 0 auto;
			
			width: 128rem;
			gap: 5.6rem;
			@media (width <= 767px) {/* SP */
				width: 34.3rem;
			}
		}
	}


	.planBlock{
		position: relative;
		z-index: 2;
		&:nth-child(4n-3):before{
			position: absolute;
			background: url(../images/common/obj-sun.svg) top center /100% auto no-repeat;
			content: '';
			top: -7rem;
			width: 12rem;
			height: 12rem;
			right: -10rem;
			@media (width <= 767px) {/* SP */
				width: 7.8rem;
				top: -6rem;
        right: -3rem;
			}
		}
		&:nth-child(4n-2):before{
			position: absolute;
			background: url(../images/common/obj-kamome.svg) top center /100% auto no-repeat;
			content: '';
			width: 19.4rem;
			height: 11rem;
			left: -19rem;
			top: 12rem;
			@media (width <= 767px) {/* SP */
				width: 12.3rem;
				left: -3rem;
        top: -2.5rem;
			}
		}
		&:nth-child(4n-1):before{
			position: absolute;
			background: url(../images/common/obj-mount.svg) top center /100% auto no-repeat;
			content: '';
			right: -12rem;
			top: 21rem;
			width: 15.2rem;
			height: 10rem;
			@media (width <= 767px) {/* SP */
				width: 9.7rem;
				right: -2rem;
        top: 1rem;
			}
		}
		.planBlock__in{
			position: relative;
		}
		.planBlock__ttl{
			background: #FBFAEE;
			text-align: center;
			letter-spacing: .14em;
			font-weight: 500;
			line-height: 2.4;
			padding: 1.5rem;
			font-size: 2.2rem;
			border-radius: .6rem .6rem 0 0;
			@media (width <= 767px) {/* SP */
				text-align: left;
				line-height: 1.7;
				font-size: 1.8rem;
				padding: 2.4rem 2.5rem;
				border-radius: 1rem 1rem 0 0;
			}
		}
		.planBlock__cnt{
			background:#fff;
			padding: 5.6rem 8rem;
			display: flex;
			@media (width > 767px) {/* PC */
				justify-content: space-between;
			}
			@media (width <= 767px) {/* SP */
				flex-direction: column;
				padding: 2.4rem 1.6rem 4rem;
			}
		}
		.planBlock__img{
			@media (width > 767px) {/* PC */
				width: 50rem;
			}
			@media (width <= 767px) {/* SP */
				margin-bottom: 2.5rem;
			}
			img{
				width: 100%;
			}
		}
		.planBlock__txtarea{
			@media (width > 767px) {/* PC */
				width: 55.6rem;
			}
		}
		.planBlock__price{
			letter-spacing: .14em;
			@media (width <= 767px) {/* SP */
				font-size: 1.5rem;
			}
			.priceTtl{
				font-weight: 400;
			}
			.priceList{
				display: flex;
				flex-direction: column;
				gap: .8rem;
				margin-top: .8rem;
				
				.priceItem{
					display: flex;
					align-items: center;
					gap: 1.6rem;
					@media (width <= 767px) {/* SP */
						gap: 1.4rem;
					}
					&.-member{
						color: #FF4C00;
					}
					dt{
						line-height: 2.4;
					}
					dd{
						letter-spacing: .1em;
						display: flex;
						align-items: flex-end;
						gap: .4rem;
						line-height: 1;
					}
					.txtYen,.txtWave{
						letter-spacing: 0;
						font-size: 2.4rem;
					}
					.txtPrice{
						letter-spacing: 0;
						font-size: 3rem;
						@media (width <= 767px) {/* SP */
							letter-spacing: -.03em;
						}
					}
					.txtZei{
						padding-bottom: .4rem;
						@media (width > 767px) {/* PC */
							margin-left: .4rem;
						}
					}
				}
			}
		}
		.planBlock__info{
			letter-spacing: .14em;
			margin-top: 2.4rem;
			@media (width <= 767px) {/* SP */
				line-height: 2.4;
				font-size: 1.4rem;
			}
		}
		.planBlock__btn{
			margin-top: 4.3rem;
			@media (width <= 767px) {/* SP */
				margin-top: 4.0rem;
			}
			a{
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ED9672;
				color: #fff;
				letter-spacing: .14em;
				border-radius: .3rem;
				gap: .8rem;
				height: 4.9rem;
				width: 40rem;
				@media (width <= 767px) {/* SP */
					width: 100%;
					font-size: 1.6rem;
				}
				&:after{
					content: '';
					background: url(../images/common/arw-w.svg) center center /cover no-repeat ;
					width: .9rem;
					height: 1rem;
				}
			}
		}
	}


	.c-pageBv{
		@media (width > 767px) {/* PC */
			margin-top: -35rem;
		}
	}
	@media (width > 767px) {/* PC */
	}
	@media (width <= 767px) {/* SP */
	}

}