@charset "UTF-8";

@keyframes circle-move {
	0% {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}
@keyframes circle-move-mirai {
	0% {
		transform: translate(-50%, -50%) scale(1.189) rotate(0deg);
	}
	100% {
		transform: translate(-50%, -50%) scale(1.189) rotate(360deg);
	}
}

.sectionTitle {
	text-align: center;
}

/* kv
---------------------------------------------- */
.kv__img::before {
	opacity: 0;
}

/* future
---------------------------------------------- */
.future {
	padding-top: clamp(80px, 3.18rem + 7.77vw, 200px);
	z-index: 1;
}

.future__copy {
	max-width: 100%;
	margin-top: 3em;
	text-align: center;
}

.future__text {
	margin-top: 1.5em;
	text-align: center;
}

.futureSliderArea {
	margin-top: 80px;
}

.futureSlider {
	position: relative;
	overflow: hidden;
	z-index: 0;
}

.futureSlider .swiper-slide {
	padding: 80px 10%;
}
.futureSlider .swiper-slide:nth-of-type(odd) {
	background-color: #eaf9ff;
}

.futureSlider__inner {
	max-width: 1320px;
	margin-inline: auto;
}

.futureSlider__img {
	width: calc(660 / 1320 * 100%);
}
.futureSlider__img::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	aspect-ratio: 33 / 34;
	background: url(../img/figure_ring.png) center/contain no-repeat;
	animation: circle-move 4.5s cubic-bezier(0.78, 0.49, 0.05, 0.52) infinite;
	z-index: 1;
}

.futureSlider__img .p-caption {
	left: 3em;
	text-align: right;
}

.futureSlider__body {
	width: calc(580 / 1320 * 100%);
}
.futureSlider .swiper-slide:nth-of-type(odd) .futureSlider__body {
	color: var(--color-green);
}

.futureSlider__time {
	display: flex;
	align-items: center;
	column-gap: .4em;
	font-size: clamp(40px, 0.83rem + 3.48vw, 80px);
	font-weight: 600;
}
.futureSlider__time::before {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background-color: #000;
}
.futureSlider .swiper-slide:nth-of-type(odd) .futureSlider__time::before {
	background-color: var(--color-green);
}

.futureSlider__copy {
	font-size: clamp(18px, 0.87rem + 0.52vw, 24px);
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1.7;
	margin-top: 2em;
}

.futureSlider__text {
	margin-top: 1em;
}

.futureSlider .swiper-pagination {
	display: flex;
	flex-direction: column;
	gap: 30px 35px;
	position: absolute;
	top: 50%;
	right: 6.25%;
	bottom: auto;
	left: auto;
	transform: translateY(-50%);
	width: auto;
	padding: 10px;
}

.futureSlider .swiper-pagination-bullet {
	background: #e6e6e6;
}
.futureSlider .swiper-pagination-bullet-active {
	background: var(--color-orange);
}
.futureSlider .swiper-pagination-bullet::before {
	content: '';
	position: absolute;
	top: 51%;
	left: 51%;
	transform: translate(-50%, -50%);
	width: 104px;
	aspect-ratio: 1;
	opacity: 0;
	background: url(../../img/common/figure_slider-dot-bg.png) center/contain no-repeat;
	visibility: hidden;
	z-index: 0;
}
.futureSlider .swiper-pagination-bullet-active::before {
	opacity: 1;
	visibility: visible;
}

@media screen and (max-width: 1200px) {
	.futureSlider .swiper-slide {
		padding-left: 3%;
	}
}

@media screen and (max-width: 768px) {
	.future__copy {
		margin-top: 1.5em;
	}

	.futureSlider .swiper-slide {
		padding: 80px 0;
	}

	.futureSlider__inner {
		flex-direction: column;
    row-gap: 80px;
		width: min(calc(330 / 375* 100%), 330px);
	}

	.futureSlider__img {
		width: 100%;
	}

	.futureSlider__img .p-caption {
		bottom: -.5em;
		left: -1em;
		text-align: left;
	}

	.futureSlider__body {
		width: 100%;
		padding-inline: 5px;
	}

	.futureSlider__copy {
		margin-top: 1em;
	}

	.futureSlider__text {
		margin-top: 1em;
	}

	.futureSlider .swiper-pagination {
		flex-direction: row;
		top: 53%;
    right: 50%;
    transform: translateX(50%);
	}
}

/* movieArea
---------------------------------------------- */
.movieArea {
	background-color: #fffeef;
	margin-top: clamp(80px, 3.18rem + 7.77vw, 200px);
	padding-block: clamp(80px, 3.18rem + 7.77vw, 200px);
}
.movieBox {
	width: 90%;
	max-width: 800px;
	margin-top: 60px;
}

@media screen and (max-width: 768px) {
	.movieBox {
		margin-top: 40px;
	}
}

/* mirai
---------------------------------------------- */
.mirai {
	overflow: hidden;
}
.mirai__copy {
	text-align: center;
}

.mirai .sectionDeco {
	position: relative;
	inset: auto;
	margin: 80px auto 100px;
}

.mirai__conceptCopy {
	width: min(calc(792 / 1920 * 100%), 792px);
	margin-inline: auto;
}

.miraiCircle {
	position: absolute;
	transition: 1.2s cubic-bezier(0, 0, 0, 1.01);
	opacity: 0;
	z-index: 1;
}
.miraiCircle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.189);
	width: 100%;
	aspect-ratio: 352 / 363;
	background: url(../img/figure_ring-mirai.png) center/contain no-repeat;
	animation: circle-move-mirai 6.5s linear infinite;
	z-index: 1;
}

.miraiCircle--01 {
	top: 22%;
	left: calc(130 / 1920 * 100%);
	width: calc(296 / 1920 * 100%);
	transform: translate(-30%, 30%);
}
.miraiCircle--02 {
	bottom: 12%;
	left: calc(-25 / 1920 * 100%);
	width: calc(383 / 1920 * 100%);
	transform: translate(-30%, 30%);
}
.miraiCircle--03 {
	top: 15%;
	right: calc(150 / 1920 * 100%);
	width: calc(306 / 1920 * 100%);
	transform: translate(30%, 30%);
}
.miraiCircle--04 {
	bottom: 38%;
	right: calc(-40 / 1920 * 100%);
	width: calc(255 / 1920 * 100%);
	transform: translate(30%, 30%);
}
.miraiCircle--05 {
	bottom: 12%;
	right: calc(120 / 1920 * 100%);
	width: calc(248 / 1920 * 100%);
	transform: translate(30%, 30%);
}

.miraiCircle.inview {
	transform: translate(0, 0);
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.mirai__copy {
		width: 100%;
		font-size: 22px;
		margin-top: 2em;
	}

	.mirai .sectionDeco {
		margin-block: 0;
	}

	.mirai__conceptCopy {
		width: 280px;
	}

	.miraiCircleWrap {
		position: relative;
		/* position: absolute;
		top: 30%;
		left: 50%;
		transform: translateX(-50%); */
		width: min(100%, 320px);
		margin: 40px auto;
		padding-block: 110px;
		z-index: 0;
	}

	.miraiCircle--01 {
		top: 0;
		left: calc(40 / 320 * 100%);
		width: min(calc(90 / 320 * 100%), 90px);
	}
	.miraiCircle--02 {
		bottom: 5%;
		left: 0;
		width: min(calc(120 / 320 * 100%), 120px);
	}
	.miraiCircle--03 {
		top: 5%;
		right: calc(60 / 320 * 100%);
		width: min(calc(90 / 320 * 100%), 90px);
	}
	.miraiCircle--04 {
		bottom: 23%;
		right: 0;
		width: min(calc(80 / 320 * 100%), 80px);
	}
	.miraiCircle--05 {
		bottom: 0;
		right: calc(90 / 320 * 100%);
		width: min(calc(76 / 320 * 100%), 76px);
	}
}

/* mainImg
---------------------------------------------- */
.mainImg {
	overflow: hidden;
}

/* redevelopment
---------------------------------------------- */
.redevelopment {
	padding-block: clamp(80px, 3.33rem + 7.12vw, 190px);
	overflow: hidden;
}
.redevelopment::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 100%;
	background-color: #fff;
	filter: blur(30px);
	z-index: -2;
}

.redevelopment .sectionTitle {
	max-width: 1440px;
	font-size: clamp(34px, 1.12rem + 4.27vw, 100px);
	text-align: left;
}

.redevelopmentBox {
	position: relative;
	max-width: 1440px;
	margin-top: 70px;
	z-index: 0;
}

.redevelopmentBox__copy {
	padding-right: calc(960 / 1440 * 100%);
}

.redevelopmentBox__text {
	margin-top: 1.5em;
}

.redevelopmentBoxBody {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(740 / 1440 * 100%);
	z-index: 0;
}

.redevelopmentBoxList {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px calc(20 / 740 * 100%);
}

.redevelopment .sectionCircle {
	bottom: 0;
	right: 0;
	width: calc(1088 / 1920 * 100%);
	z-index: -1;
}

@media screen and (max-width: 960px) {
	.redevelopmentBoxBody {
		position: static;
		width: 100%;
		margin-top: 30px;
	}

	.redevelopmentBox__copy {
		padding-right: 0;
	}
}

@media screen and (max-width: 768px) {
	.redevelopment .sectionTitle {
		max-width: 560px;
	}

	.redevelopmentBox {
		max-width: 560px;
		margin-top: 30px;
	}

	.redevelopmentBox__text {
		margin-top: 1em;
	}

	.redevelopmentBoxBody {
		width: calc(260 / 320 * 100%);
		margin-inline: auto;
	}

	.redevelopmentBoxList {
		grid-template-columns: 1fr;
	}

	.redevelopment .sectionCircle {
		width: calc(250 / 375 * 100%);
	}
}