@charset "utf-8";
/*-----------------------------------------------------*/
/* 基本設定
/*-----------------------------------------------------*/
* {
	margin: 0;
	box-sizing: inherit;
}
*, ::before, ::after {
    box-sizing: inherit;
}
/* 10pxなら1remで指定（16pxなら1.6rem） */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}
body {
	font-family: "Noto Sans JP", sans-serif;
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	box-sizing: border-box;
}
img {
	max-width: 100%;
	display: block;
	height: auto;
}
a {
	display: inline-block;
}
/*-----------------------------------------------------*/
/* メインコンテンツと改行のスタイル
/*-----------------------------------------------------*/
.container {
    background-color: #fffeeb;
	color: #000000;
	font-family: "Zen Kaku Gothic New", sans-serif;
	letter-spacing: 0.125em;
}
.wrapper {
	padding-inline: clamp(2.5rem, 3.325vw - 0.053rem, 5rem);
}

.pc-br {
	display: block;
}

.tb-br, .sp-br {
	display: none;
}
@media screen and (max-width: 767px) {
	.wrapper {
		padding-inline: clamp(1.6rem, 8.673vw - 1.652rem, 5rem);
	}

	.pc-br {
		display: none;
	}

	.tb-br {
		display: block;
	}
}
@media screen and (max-width: 450px) {
	.sp-br {
		display: block;
	}
}

/*-----------------------------------------------------*/
/* アニメーション
/*-----------------------------------------------------*/

.js-scrollText {
    position: relative;
}

.js-scrollText .char {
    display: inline-block;
}


/*-----------------------------------------------------*/
/* MVのスタイル
/*-----------------------------------------------------*/
.mv {
    width: 100%;
	background-image: url(images/bg.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	position: relative;
	padding-top: 10rem;
}

.mv::after {
    content: "";
    position: absolute;
    height: 150px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);
    background-color: #fbec64;
	left: 0;
	bottom: -1px;
    bottom: -149px;
	z-index: 999;
}

.mv__content {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
}

.mv__theme {
	margin-bottom: 9rem;
	padding-inline: 5rem;
}

.mv__text {
	font-size: clamp(2.40rem, 0.69vw + 1.87rem, 3.20rem);
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: -0.02em;
	text-align: center;
}

.mv__text .red {
	font-size: clamp(3.25rem, calc(1.29vw + 2.20rem), 4.25rem);
	color: #da0101;
}

/* PC */
.mv__pc {
    position: relative;
    width: 100%;
    aspect-ratio: 1408 / 674;
}

/* PCパーツ */
.mv__textImage,
.mv__illust {
    position: absolute;
}

/* SP画像はPCでは非表示 */

.mv__textImage,
.mv__illust {
    will-change: transform, opacity;
}

.mv__textImage {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mv__image--sp {
    display: none;
}

.mv__textImage--01 {
    width: 40%;
    top: 1%;
}

.mv__textImage--02 {
    width: 46%;
    top: 39%;
}

.mv__textImage--03 {
    width: 72%;
    top: 53%;
}

.mv__illust--01 {
    width: 10%;
    top: -2%;
    left: 15%;
}

.mv__illust--02 {
    width: 18%;
    top: 13%;
    right: 5%;
}

.mv__illust--03 {
    width: 21%;
    bottom: 3%;
    left: 3%;
}

.mv__line {
    display: block;
}

.mv__text .red {
    display: inline-block;
    color: #da0101;

    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        #ffffff 65%,
        #ffffff 82%,
        transparent 82%,
        transparent 100%
    );

    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 100%;
}


@media screen and (max-width: 767px) {

    .mv {
        background: none;
        padding-top: 0;
    }

    .mv::after {
        height: 110px;
        bottom: -109px;
    }

    .mv__theme {
        padding-inline: 0;
    }

    .mv__pc {
        display: none;
    }

    .mv__image--sp {
        display: block;
        width: 100%;
        margin: 0 auto;
    }

    .mv__text {
        display: none;
    }

}

@media screen and (max-width: 640px) {

    .mv::after {
        height: 80px;
        bottom: -79px;
    }

}

/*-----------------------------------------------------*/
/* AREAのスタイル
/*-----------------------------------------------------*/
.plan {
	background-image: url(images/area_bg.png);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	position: relative;
	padding: 26rem 5rem 12rem;
}

.plan::after {
    content: "";
    position: absolute;
    height: 150px;
    width: 100%;
    clip-path: polygon(0 0,50% 100%,100% 0);
    background-color: #fffeeb;
	left: 0;
    bottom: -149px;
}

.plan__title {
	max-width: 400px;
	margin: 0 auto;
}

.plan__title img {
	display: block;
	margin: 0 auto 7rem;
}

@media screen and (max-width: 767px) {

	.plan {
		padding-block: 5rem;
		background-position: center;
		background-size: 140%;
	}

	.plan::after {
		height: 110px;
		bottom: -109px;
	}

}
@media screen and (max-width: 640px) {

	.plan {
		padding: 2rem;
	}

	.plan::after {
		height: 80px;
		bottom: -79px;
	}

	.plan__title img {
		margin-bottom: 5rem;
	}

	.area-buttons {
		padding-inline: 2rem;
	}

}

/*-----------------------------------------------------*/
/* POINTのスタイル
/*-----------------------------------------------------*/
.point {
	background-color: #fff175;
	background-image:
    url("images/point_bg1.png"), url("images/point_bg2.png") ;
	background-position: 98% 32%, 2% 95%;
	background-size: 17%, 17%;
    background-repeat: no-repeat, no-repeat;
}

.point__inner {
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding: 28rem 3rem 26rem;
}

.point__title {
	max-width: 650px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

.point__title img {
	margin: 0 auto;
}

.point__list {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	gap: 8rem;
	align-items: center;
	padding-inline: 5rem;
}

.point_lead {
    font-size: clamp(1.70rem, 0.52vw + 1.51rem, 2.50rem);
	font-weight: 500;
	line-height: 1.7;
	margin-bottom: 14rem;
	letter-spacing: 0;
}

.point__item {
	position: relative;
	width: 90%;
}

.point__heading {
	color: #fff;
    font-size: clamp(3.00rem, 1.30vw + 2.00rem, 4.50rem);
	font-weight: 900;
    display: inline-block;
    padding: clamp(0.7rem, 0.8vw, 1rem) clamp(2.5rem, 4vw, 5rem) clamp(2rem, 2.8vw, 3.5rem);
    position: absolute;
    width: fit-content;
    white-space: nowrap;
}

.point__text {
    font-size: clamp(1.7rem, 0.48vw + 1.33rem, 2.25rem);
	line-height: 1.6;
	font-weight: 500;
	position: absolute;
	padding: clamp(3rem, 2vw + 3rem, 10rem);
}

/*---------------------------------------*/
/* POINT1個目
/*---------------------------------------*/

.point__item:first-of-type {
	background-image: url(images/point_list1.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	aspect-ratio: 1247 / 594;
	align-self: flex-start;
}

.point__item:first-of-type .point__heading {
	background-image: url(images/point_ttl1.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	top: -5%;
	left: -5%;
	transform: rotate(-4deg);
}

.point__item:first-of-type .point__text {
	display: inline-block;
	background-image: url(images/point_right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 6%;
	right: -3%;
}

/*---------------------------------------*/
/* POINT2個目
/*---------------------------------------*/

.point__item:nth-of-type(2) {
	background-image: url(images/point_list2.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	align-self: center;
	aspect-ratio: 1251/ 614;
}

.point__item:nth-of-type(2) .point__heading {
	background-image: url(images/point_ttl2.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	top: 2%;
	right: -5%;
	transform: rotate(5deg);
}

.point__item:nth-of-type(2) .point__text {
	display: inline-block;
	background-image: url(images/point_left.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: 13%;
	left: -7%;
}

/*---------------------------------------*/
/* POINT3個目
/*---------------------------------------*/

.point__item:last-of-type {
	background-image: url(images/point_list3.png);
	background-size: 100%;
	background-repeat: no-repeat;
	aspect-ratio: 1249/ 593;
	align-self: flex-end;
}

.point__item:last-of-type .point__heading {
	background-image: url(images/point_ttl3.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	bottom: -5%;
	left: -6%;
	transform: rotate(3deg);
	padding-block: 3.5rem 2rem;
}

.point__item:last-of-type .point__text {
	background-image: url(images/point_right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	top: -4%;
	right: -5%;
}

/*---------------------------------------*/




@media screen and (max-width: 1260px) {

	.point {
		background-color: #fff175;
		background-image:
		url("images/point_bg1.png"), url("images/point_bg2.png") ;
		background-position: 96% 8%, 4% 4%;
		background-size: 17%, 17%;
		background-repeat: no-repeat, no-repeat;
	}

	.point__item {
		width: 100%;
	}
}

@media screen and (max-width: 980px) {

}

@media screen and (max-width: 767px) {

	.point {
		background-color: #fff175;
		background-image:
		url("images/point_bg1.png"), url("images/point_bg2.png") ;
		background-position: 96% 6%, 4% 3%;
		background-size: 17%, 17%;
		background-repeat: no-repeat, no-repeat;
	}

	.point__inner {
		padding-block: 18rem 10rem;
	}
	.point__list {
		gap: 12rem;
		padding-inline: 3rem;
	}
	.point__item:first-of-type {
		flex-direction: column-reverse;
	}
	.point__item:nth-of-type(2) {
		flex-direction: column-reverse;
	}
	.point__item:last-of-type {
		flex-direction: column-reverse;
	}

	.point__image-box {
		width: 100%;
		justify-content: center;
	}
	.point__image {
		width: 100%;
		align-items: center;
	}

	.point__heading {
		font-size: clamp(2.50rem, 6.38vw + 0.11rem, 5.00rem);
		    padding:
        0.7rem
        clamp(1.5rem, 4vw, 3.5rem)
        clamp(2rem, 4vw, 3rem);
		letter-spacing: -0.02em;
	}

	.point__text {
		width: 110%;
		font-size: clamp(1.6rem, 1.02vw + 1.218rem, 2rem);
		padding: clamp(5rem, 8vw, 7rem) 0 clamp(3rem, 4vw, 4rem);
		box-sizing: border-box;
		left: 50%;
		transform: translateX(-50%);
		letter-spacing: -0.05em;
		line-height: 1.6;
	}

	.point__text span {
		display: block;
		width: 85%;
		margin: 0 auto;
	}

	/*---------------------------------------*/
	/* POINT1個目
	/*---------------------------------------*/

	.point__item:first-of-type {
		background-image: url(images/point_list1_sp.png);
		aspect-ratio: 526 / 707;
		align-self: center;
	}

	.point__item:first-of-type .point__text {
		background-image: url(images/point_right_sp.png);
		background-size: 100% 100%;
		top: 65%;
	}

	/*---------------------------------------*/
	/* POINT2個目
	/*---------------------------------------*/

	.point__item:nth-of-type(2) {
		background-image: url(images/point_list2_sp.png);
		aspect-ratio: 526 / 696;
		align-self: center;
	}

	.point__item:nth-of-type(2) .point__heading {
		top: -5%;
		right: -3%;
		transform: rotate(3deg);
	}

	.point__item:nth-of-type(2) .point__text {
		background-image: url(images/point_left_sp.png);
		background-size: 100% 100%;
		top: 65%;
		left: 50%;
        right: auto;
        transform: translateX(-50%);
	}

	/*---------------------------------------*/
	/* POINT3個目
	/*---------------------------------------*/

	.point__item:last-of-type {
		background-image: url(images/point_list3_sp.png);
		aspect-ratio: 528 / 693;
		align-self: center;
	}

	.point__item:last-of-type .point__heading {
		background-image: url(images/point_ttl3_sp.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		bottom: 93%;
		left: -7%;
		transform: rotate(-3deg);
		font-size: clamp(2.2rem, 6vw, 4.6rem);
		padding:
        0.7rem
        clamp(1.2rem, 2.5vw, 2rem)
        clamp(2rem, 4vw, 3rem);
	}

	.point__item:last-of-type .point__text {
		background-image: url(images/point_right_sp.png);
		background-size: 100% 100%;
		top: 65%;
	}
}

@media screen and (max-width: 640px) {
	
	.point_lead {
		margin-bottom: 10rem;
	}

	.point__inner {
		padding-top: 14rem;
	}

	.point__list {
		gap: 8rem;
	}

	.point__item:nth-of-type(2) {
		margin-bottom: 2rem;
	}

}

@media screen and (max-width: 500px) {
	.point__list {
		padding-inline: 1.5rem;
	}

	.point__title {
		padding-bottom: 3rem;
	}

}

@media screen and (max-width: 450px) {
	
	.point_lead {
		margin-bottom: 7rem;
	}

	.point__list {
		gap: 10rem;
	}

}

/*-----------------------------------------------------*/
/* 今回仕様のフッターのスタイル
/*-----------------------------------------------------*/
#footer {
    margin-top: 0;
}