@charset "utf-8";
.h{
	font-size: 80%;
	font-family: "Noto Serif JP", serif;
	font-weight: 300;
}
.sec_plan {
    padding: clamp(60px, 14.583333vw,245px) 0 clamp(80px, 11.3095238vw,190px);
    overflow: hidden;
}
.sec_plan .block_title {
    color: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1.8rem,1.4285714vw,2.4rem);
    letter-spacing: 0.2em;
    line-height: 2;
	line-height: 2.4;
    opacity: 0.5;
    text-align: center;
    /*margin: 0 0 95px;*/
	margin: 0px;
}
.sec_plan .plan_block {
    display: grid;
    grid-template-columns: 25% 38% auto;
    gap: 30px 20px;
    width: 100%;
    max-width: 800px;
    margin: auto;
    align-items: center;
}
.sec_plan .plan_block .item:nth-child(1) {
    padding-right: 36.7%;
    grid-area: 1/2/1/4;
}
.sec_plan .plan_block .item:nth-child(2) {
	grid-area: 1/1/3/1;
	display: flex;
	align-items: center;
	height: 100%;
}
.sec_plan .plan_block .txt {
    font-size: clamp(1.4rem,0.95238vw,1.6rem);
    line-height: 2.3;
    letter-spacing: 0.06em;
    position: relative;
    padding: clamp(15px,1.785714vw,30px) 0;
    z-index: 0;
}
.sec_plan .plan_block .txt::after {
	content: "";
	background: url(../imgs/icon_leaf01.png) no-repeat left bottom / 100% auto;
	width: 144%;
	height: 100vh;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	transform: translate(3%,10.5%);
}
@media screen and (max-width: 767px) {
    .sec_plan .block_title {
        letter-spacing: 0.01em;
        opacity: 0.5;
        /*margin: 0 0 30px;*/
		margin: 0;
    }
    .sec_plan .plan_block {
        grid-template-columns: 30% auto;
        gap: 20px 15px;
        align-items: flex-start;
    }
    .sec_plan .plan_block .item,
    .sec_plan .plan_block .item .img {
        height: 100%;
    }
    .sec_plan .plan_block .item .img img {
        height: 100%;
        object-fit: cover;
    }
    .sec_plan .plan_block .item:nth-child(1) {
        padding-right: 0;
        grid-area: 1/1/1/3;
    }
    .sec_plan .plan_block .item:nth-child(2) {
        grid-area: 2/1/2/1;
        letter-spacing: 0;
        align-items: flex-start;
        margin-top: 0;
        padding-bottom: 20px;
    }
    .sec_plan .plan_block .item:nth-child(4) {
        grid-area: 3/1/3/3;
    }
    .sec_plan .plan_block .txt { padding: 0; text-align: center; }
    .sec_plan .plan_block .txt::after {
        width: 80%;
        left: auto;
        right: 0;
    }
}

.sec_variation {
    padding: clamp(10px,8.928571vw,150px) 0 clamp(55px, 10.119047vw,170px);
	padding: clamp(10px,8.928571vw,150px) 0 clamp(55px, 10.119047vw,70px);
    overflow: hidden;
}
.sec_variation .variation_title {
    color: rgba(63, 72, 69, 0.8);
    margin: 0 0 50px;
    text-align: center;
}
.sec_variation .variation_title .ttl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: clamp(4rem,4.166666vw,7rem);
    letter-spacing: 0.01em;
    line-height: 1;
    position: relative;
    z-index: 0;
    padding: 100px 0 50px;
    padding: clamp(50px,5.95238vw,100px) 0 clamp(25px,2.97619vw,50px);
}
.sec_variation .variation_title .ttl .small {
    font-size: 42.8%;
}
.sec_variation .variation_title .ttl:before {
    content: "";
    background: url(../imgs/icon_leaf02.png) no-repeat top right / auto 100%;
    width: 100vw;
    height: 100%;
    position: absolute;
    right: 100%;
    transform: translateX(1.5%);
    top: 0;
    z-index: -1;
}
.sec_variation .variation_title .ttl:after {
    content: "";
    background: url(../imgs/icon_leaf03.png) no-repeat top left / auto 100%;
    width: 100vw;
    height: 40%;
    position: absolute;
    left: 100%;
    transform: translateX(0.5%);
    top: 22%;
    z-index: -1;
}
.variation_list {
    display: grid;
    /*grid-template-columns: repeat(3, 1fr);*/
	/*grid-template-columns: repeat(2, 1fr);*/
    gap: 15px 25px;
	/*max-width: 800px;
    margin-left: auto;
    margin-right: auto;*/
}
@media screen and (min-width: 768px) {
	.variation_list {
		grid-template-columns: repeat(2, 1fr);
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (max-width: 767px) {
	.variation_list {
		grid-template-columns: repeat(5, 1fr);
		max-width: 800px;
		margin-left: auto;
		margin-right: auto;
	}
}



.plan_item {
    /*background: url(../imgs/bg.jpg) no-repeat top left / cover;
    color: rgba(77, 77, 77, 1);*/
	background: url(../imgs/bg_hover.jpg) no-repeat top left / cover;
    position: relative;
    overflow: hidden;
    z-index: 0;
    transition: all 0.5s ease;
	color: rgba(255, 255, 255, 1);
}
.plan_item:before {
    content: "";
    /*background: url(../imgs/bg_hover.jpg) no-repeat top left / cover;*/
	background: url(../imgs/bg.jpg) no-repeat top left / cover;
    color: rgba(77, 77, 77, 1);
	
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
}
.plan_item:hover {
    color: rgba(255, 255, 255, 1);
	color: rgba(77, 77, 77, 1);
	transition: all 0.5s ease;
}
.plan_item:hover:before {
    opacity: 1;
    visibility: visible;
	transition: all 0.5s ease;
}
.plan_item .box {
    position: relative;
    z-index: 1;
    padding: 60px 15px 80px;
	padding: 50px 15px 60px;
    text-align: center;
}
.plan_item .box .pos_link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.plan_item .name {
    
	color: rgba(255, 255, 255, 0.8);
    display: inline-flex;
    align-items: center;
	align-items: baseline;
    font-size: clamp(5.2rem,4.7619047vw,8rem);
	font-size: clamp(4.2rem,3.8619047vw,6rem);
    line-height: 1;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
	transition: all 0.5s ease;
}
.plan_item:hover .name {
    color: rgba(63, 72, 69, 0.8);
	transition: all 0.5s ease;
}
.plan_item .name .small {
    font-size: 37.5%;
}
.plan_item .type {
    font-size: clamp(2.2rem,1.785714vw,3rem);
    line-height: 1.6;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
}
.plan_item .type .large {
    font-size: 133%;
    line-height: 1;
}
.plan_item .type .small { font-size: 67%; }
.plan_item .txt {
    font-size: clamp(1.4rem,1.0714285vw,1.8rem);
    line-height: 1.4;
    letter-spacing: 0.1em;
}
.plan_item .txt .small { font-size: 67%; }
.plan_item .txt .num01 { font-size: 167%; }
.plan_item .txt .num01 { font-size: 280%; }
.plan_item .txt .num02 { font-size: 180%; }
.plan_item .capt {
    /*color: rgba(63, 72, 69, 0.8);*/
    font-size: clamp(1.4rem,1.1163333vw,1.6rem);
	font-size: clamp(1.2rem,0.9663333vw,1.5rem);
    margin-top: clamp(20px,3.571428vw,40px);
	margin-top: clamp(10px,0.871428vw,15px);
    letter-spacing: 0.1em;
    line-height: 1.7;
	margin-left: auto;
    margin-right: auto;
	color: rgba(255, 255, 255, 0.8);
}
.plan_item:hover .capt {
    /*color: rgba(255, 255, 255, 0.8);*/
	color: rgba(63, 72, 69, 0.8);
}
@media screen and (max-width: 767px) {
    .sec_variation .variation_title {
        margin: 0 0 10px;
    }
    .variation_list {
        gap: 10px;
        /* grid-template-columns: auto; */
        overflow-y: hidden;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .variation_list .item {
        min-width: 260px;
    }
    .plan_item .box {
        padding: 30px 15px 35px;
		padding: 25px 15px 30px;
    }
}




.ts{font-size:60%;}
.w1000 {max-width: 1000px; margin-left: auto; margin-right: auto;}
.notes {
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

/* */
.padTB{
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}
@media screen and (max-width: 767px) {
	.padTB{
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}
}

/* */
.cas{max-width: 320px;margin-top: 60px; margin-left: auto; margin-right: auto;}
@media screen and (max-width: 767px) {
	.cas{margin-top: 30px;}
}


/* */
.btn-view-more {
	margin-top: 30px;
	text-align: center;
	display: inline-block;
	padding: 12px 40px;
	/*color: #4D4D4D;
	border: 1px solid #4D4D4D;*/
	color: #fff;
	border: 1px solid #fff;
	border-radius: 9999px;
	background: transparent;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 0.05em;
	line-height: 1;
}
.plan_item .capt{letter-spacing: 0.05em; max-width: 88%; margin-left: auto;margin-right: auto; padding: 8px 2px; line-height: 1.2;background: rgba(255,255,255,.7); transition: all 0.5s ease; color: #183B2E;}
	
.plan_item:hover .btn-view-more {
	color: #4d4d4d;
	border: 1px solid #4d4d4d;
	transition: all 0.5s ease;
}
.plan_item:hover .capt{background: rgba(24,59,46,.9);transition: all 0.5s ease;color: #fff;}
@media screen and (max-width: 767px) {
	.btn-view-more {margin-top: 20px;}
}