@charset "UTF-8";

.plan .page-ttl-block{
	position: relative;
	z-index: 2;
}
.bg-navy{
	background-color: #213244;
}
.detail .general-section .inner {
    max-width: 800px;
}

.plan-flex{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px 0;
	margin: 120px auto 60px;
}
.plan-item{
	width: calc(50% - 20px);
	position: relative;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
	transition: .6s;
}
.plan-item:hover{
	opacity: .6;
	transform: translate(3px, 3px);
	box-shadow: none;
}
.plan-detail{
	position: relative;
}
.plan-spec-wrap{
	margin-bottom: 40px;
}
.plan-point-wrap{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.plan-point{
	line-height: 1.4;
	font-size: 1.6rem;
	text-indent: -1em;
	padding-left: 1em;
}
/*.plan-point-wrap.col-03 .plan-point{
	width: calc(100% / 3 - 4px);
}*/
.plan-detail-img{
	width: 75%;
	margin: 0 auto;
}
.hanrei{
	position: absolute;
	width: 420px;
	max-width: 80%;
	right: 0;
	bottom: -48px;
}
@media screen and (max-width: 767px){
	.plan-flex{
		gap: 20px 0;
		margin: 60px auto 40px;
	}
	.plan-item{
		width: 100%;
	}
	.plan-spec-wrap{
		margin-bottom: 20px;
	}
	.plan-point-wrap{
		/* width: 100vw;
		margin: 0 calc(50% - 50vw); */
		position: relative;
		z-index: 1;
	}
	.plan-point,
	.plan-point-wrap.col-03 .plan-point{
		/*width: calc(100% / 2 - 2px);
		padding: 10px 0;*/
		font-size: 1.2rem;
	}
	.plan-detail-img{
		width: 90%;
	}
	.hanrei{
		left: 0;
		bottom: -36px;
	}
}


.plan-detail-text{
	margin: 80px auto 60px;
}
@media screen and (max-width: 767px){
	.plan-detail-text{
		margin: 60px auto 40px;
	}
	.plan-detail-text .page-sub-lead{
		font-size: 1.6rem;
	}
	.plan-detail-text .contents-note{
		text-align: left;
	}
}


/* タブ */
.is-none{
    display: none;
}
.tab-plan-name{
    position: absolute;
    color: #b5a370;
    font-size: 2.8rem;
    top: -5%;
    right: -5%;
}
.plan-tab-btns{
	display: flex;
    flex-wrap: wrap;
	gap: 12px 16px;
	justify-content: center;
	max-width: 600px;
    width: 100%;
	margin: 60px auto;
	cursor: pointer;
}
.plan-tab-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 48px;
	background: #bfc0c0;
	width: calc(100% / 2 - 10px);
	color: #fff;
	font-size: 2rem;
    align-items: center;
}
.plan-tab-btn.is-active{
	background: #ae8952;
	pointer-events: none;
}
@media screen and (max-width: 767px) {
    .tab-plan-name{
        font-size: 2rem;
        top: -2%;
        right: 0%;
    }
    .plan-tab-btns{
        gap: 8px 10px;
		margin: 30px auto;
    }
    .plan-tab-btn{
        width: calc(100% / 2 - 5px);
        font-size: 1.4rem;
	    height: 40px;
    }
}