@charset "utf-8";

/* ------------------------------------------------------------ fv */
#fv{ overflow: hidden; position: relative; padding: 150px 0 120px; background: #FCFAF9; }
#fv:before{ position: absolute; content: ""; left: -29%; top: -159%; width: 860px; height: 860px; background: url(../images/common/item_10.svg) center/cover no-repeat; }
#fv .main-ttl{ position: relative; padding: 0; font-size: 41px; }
.custom-shape-divider-bottom-1772422016 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1772422016 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 85px;
}

.custom-shape-divider-bottom-1772422016 .shape-fill {
    fill: #FFFFFF;
}


/* ------------------------------------------------------------ feature */
#feature{ padding: 80px 0 0; }

.feature_list{ padding: 0 2.5%; max-width: 1600px; margin: 0 auto; }
.feature_list li{ display: flex; align-items: center; justify-content: flex-start; gap: 5%; margin: 0 0 100px; }
.feature_list li:last-of-type{ margin: 0; }
.feature_list li:nth-of-type(even){ flex-direction: row-reverse; gap: 0; }

.feature_list .figure{ position: relative; width: 48%; max-width: 720px; }
.feature_list .figure:before{ position: absolute; content: ""; right: -16px; top: 10px; width: 100%; height: 100%; background: #EDE9DD; border-radius: 20px; }
.feature_list .figure img{ position: relative; }

.feature_list_text{ width: 38%; }
.feature_list_text .txt{ line-height: 2.5; font-size: 18px; }
.feature_list_ttl{ display: flex; align-items: center; padding: 0 0 40px; gap: 15px; }
.feature_list_ttl p{ font-size: clamp(60px,6vw,90px); color: var(--main-color); font-family: "ads-tomorrowskip", sans-serif; font-weight: 400; font-style: normal; }
.feature_list_ttl h3{ font-size: clamp(25px,2vw,32px); font-family: "hachi-maru-pop", sans-serif; font-weight: 400; font-style: normal; }


/* ------------------------------------------------------------ movie */
#movie{ padding: 100px 0; }
#movie .iframe-wrapper{ border-radius: 20px; }

.iframe-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.iframe-wrapper iframe,
.iframe-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }




/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	

/* ------------------------------------------------------------ fv */
	#fv{ padding: 60px 0 40px; }
	#fv:before{ left: -25%; top: -77%; width: 200px; height: 200px; }
	#fv .main-ttl{ font-size: 31px; }
	.custom-shape-divider-bottom-1772422016 svg{ height: 35px; }


/* ------------------------------------------------------------ feature */
	#feature{ padding: 30px 0 0; }

	.feature_list { width: 90%; margin: 0 auto; padding: 0; }	
	.feature_list li,
	.feature_list li:nth-of-type(even) { flex-direction: column; margin: 0 auto 40px; gap: 15px; }
	
	.feature_list .figure { width: 100%; max-width: 100%; }
	.feature_list .figure:before { display: none; }
	.feature_list .figure img { width: 100%; height: auto; border-radius: 15px; }
	
	.feature_list_text { width: 100%; padding: 0; box-sizing: border-box; }
	.feature_list_text .txt { font-size: 15px; line-height: 1.5; }
	
	.feature_list_ttl { padding: 0 0 10px; }
	.feature_list_ttl p { width: auto; font-size: 36px; }
	.feature_list_ttl h3 { font-size: 18px; }
	
	.featherlight .featherlight-content{ padding-top: 10%!important; }





}