@charset "UTF-8";

.sectionTitle {
	text-align: center;
}

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

/* around
---------------------------------------------- */
.around {
	padding-block: clamp(80px, 3.18rem + 7.77vw, 200px);
}

.aroundBox {
	column-gap: calc(100 / 1400 * 100%);
	max-width: 1400px;
	margin-top: 90px;
}

.aroundBoxHead {
	flex: 1;
}

.around__copy::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background-color: var(--color-orange);
	margin-block: 40px 50px;
}

.aroundBoxBody {
	width: calc(842 / 1400 * 100%);
}

.aroundBox__img .p-caption {
	bottom: 32%;
}

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

@media screen and (max-width: 960px) {
	.aroundBox {
		row-gap: 30px;
		max-width: 560px;
		margin-top: 40px;
	}

	.aroundBoxHead {
		flex: revert;
		width: 100%;
	}

	.around__copy {
		font-size: 22px;
		text-align: center;
	}
	.around__copy::after {
		width: 36px;
		margin: 15px auto 20px;
	}

	.around__text br {
		display: none;
	}

	.aroundBoxBody {
		width: 100%;
	}

	.aroundBox__img .p-caption {
		bottom: 22%;
	}
}

@media screen and (max-width: 768px) {
	.around .sectionCircle {
		width: calc(250 / 375 * 100%);
	}
}

/* movieArea
---------------------------------------------- */
.movieArea {
	background-color: #f2fafe;
	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;
	}
}

/* view
---------------------------------------------- */
.view {
	padding-bottom: clamp(80px, 3.18rem + 7.77vw, 200px);
}

.viewImg {
	position: relative;
	z-index: 0;
}

.viewImg__inner img {
	overflow: auto;
}

.viewImg__contents {
	width: 4760px;
}

.viewScrollBtn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: calc(130 / 1920 * 100%);
	height: 100%;
	z-index: 1;
}

.viewScrollBtn--left {
	left: 0;
}
.viewScrollBtn--right {
	right: 0;
	transform: translateY(-50%) scaleX(-1);
}

.viewScrollBtn img {
	display: block;
	width: calc(80 / 130 * 100%);
}

.view__caption {
	max-width: 1400px;
	font-size: 10px;
	line-height: 2;
	margin-top: 1em;
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

@media (hover: hover) and (pointer: fine) {
	.viewImg:hover {
		cursor: grab;
	}
}

@media screen and (max-width: 768px) {
	.view__caption {
		max-width: 560px;
		font-size: 9px;
	}

	.viewImg__contents {
		width: 740px;
	}

	.viewScrollBtn {
		width: 55px;
	}
	.viewScrollBtn img {
		width: calc(40 / 55 * 100%);
	}
}

/* layout
---------------------------------------------- */
.layout__copy {
	margin-top: 2.5em;
	text-align: center;
}

.layout__text {
	margin-top: 2em;
	text-align: center;
}

.layoutChange {
	position: relative;
	/* height: 100vh; */
	padding-bottom: 100vh;
	z-index: 1;
}

.layoutWrap {
	position: sticky;
	/* height: 100vh; */
	top: 0;
}

.layoutBox {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	margin-inline: auto;
	padding-block: clamp(50px, 1.76rem + 5.83vw, 140px);
	opacity: 0;
	visibility: hidden;
	transition: .3s linear;
	z-index: 1;
}
.layoutBox.is-active {
	opacity: 1;
	visibility: visible;
}

.layoutBox__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 85%;
	max-width: 1400px;
	/* height: 100%; */
}

.layoutMap {
	position: relative;
	width: calc(750 / 1400 * 100%);
	height: 100%;
	overflow: hidden;
	z-index: 0;
}
.layoutMap::before {
	content: '';
	position: absolute;
	bottom: 3%;
	left: 2.5%;
	width: 30px;
	height: 34px;
	background: url(../../img/common/icon_compass.svg) center/contain no-repeat;
	z-index: 1;
}

.layoutMap__img {
	position: relative;
	z-index: 0;
}
/* #layoutBox03 .layoutMap__img {
	transform: scale(2.4) translate(8%, 0%);
  transform-origin: bottom;
}
#layoutBox05 .layoutMap__img {
	transform: scale(1.8);
  transform-origin: bottom left;
}
#layoutBox08 .layoutMap__img {
	transform: scale(2.8) translate(10%, 10%);
  transform-origin: bottom;
} */

.layoutMap__img .cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	animation: blinkingLight .6s alternate infinite;
	z-index: 1;
}

.layoutContents {
	width: calc(500 / 1400 * 100%);
	height: 100%;
}

.layoutItemHead {
	display: flex;
	align-items: center;
	column-gap: calc(40 / 500 * 100%);
}

.layoutItem__num {
	display: flex;
	align-items: center;
	column-gap: .6em;
	font-size: clamp(40px, 0.83rem + 3.48vw, 80px);
	font-weight: 500;
}
.layoutItem__num::before {
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	background-color: #000;
}

.layoutItem__name {
	font-size: clamp(18px, 0.87rem + 0.52vw, 24px);
	line-height: 1.5;
	/* margin-top: 0.8em; */
}

.layoutMerit {
	display: flex;
	gap: 15px calc(30 / 500 * 100%);
	position: relative;
	margin-top: clamp(30px, 0.2rem + 3.48vw, 70px);
	z-index: 0;
}

.layoutMerit__item {
	flex: 1;
	display: grid;
	place-content: center;
	position: relative;
	background-color: rgb(255 255 255 / .8);
	padding: 1.5em calc(45 / 500 * 100%);
	z-index: 0;
}
.layoutMerit__item::before {
	content: '';
	position: absolute;
	top: -8px;
	right: -8px;
	width: 16px;
	aspect-ratio: 1;
	background-color: var(--color-orange);
	border-radius: 50%;
	z-index: 1;
}

.layoutMerit__text {
	font-size: 14px;
	font-weight: 500;
	line-height: 2;
}
.layoutMerit__text--center {
	text-align: center;
}
.layoutMerit__text .num {
	font-size: 200%;
	line-height: 1;
}

.layoutItem__img {
	margin-top: clamp(30px, 0.2rem + 3.48vw, 70px);
}

.layoutBox__caption {
	position: absolute;
	bottom: -2em;
	left: 0;
	line-height: 1.4;
}

.layoutNav {
	display: grid;
	grid-template-columns: 1fr;
	position: fixed;
	top: 50%;
	right: 3.125%;
	transform: translateY(-50%);
	gap: 35px;
	opacity: 0;
	visibility: hidden;
	transition: .4s ease-out;
	z-index: 1;
}
.layoutNav.is-active {
	opacity: 1;
	visibility: visible;
}

.layoutNav__btn {
	display: block;
	position: relative;
	width: 12px;
	aspect-ratio: 1;
	background-color: rgb(255 255 255 / .6);
	border-radius: 50%;
	transition: .3s linear;
	z-index: 0;
}
.layoutNav__btn.is-active {
	background-color: #fff471;
}
.layoutNav__btn::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 200%;
	aspect-ratio: 1;
	border: 1px solid #fff471;
	border-radius: 50%;
	filter: blur(1px);
	opacity: 0;
	transition: .3s linear;
	z-index: 0;
}
.layoutNav__btn.is-active::before {
	opacity: 1;
}

.layoutSpacer {
	height: 100vh;
}

.layoutChange .swiper-pagination {
	display: none;
}

@keyframes blinkingLight {
	0% {
		opacity: 0;
		filter: brightness(.4);
	}
	100% {
		opacity: 1;
		filter: brightness(1);
	}
}
@keyframes blinkingLight02 {
	0% {
		opacity: 0;
		filter: brightness(1);
	}
	50% {
		filter: brightness(.4);
	}
	100% {
		opacity: 1;
		filter: brightness(1);
	}
}

@media (min-aspect-ratio: 1920/1200) {
	.layoutBox__inner {
		width: 150vh;
	}

	.layoutItem__num {
		font-size: 8vh;
	}
	.layoutItem__name {
		font-size: 3vh;
	}

	.layoutMerit,
	.layoutItem__img {
		margin-top: 5vh;
	}
}

@media screen and (max-width: 1200px) {
	.layoutMap {
		width: 50%;
	}
	.layoutContents {
		width: 46%;
	}
}

@media screen and (max-width: 768px) {
	.layout__copy {
		width: 90%;
		font-size: 22px;
		letter-spacing: 0;
		margin-top: 1.5em;
	}

	.layout__text {
		margin-top: 1.5em;
		text-align: left;
	}

	.layoutChange {
		margin-top: 50px;
		/* padding-bottom: 0; */
		/* overflow: hidden; */
	}

	.layoutWrap {
		/* position: relative; */
	}

	.layoutBox {
		/* position: static;
		height: auto;
		padding: 0;
		opacity: 1;
		visibility: visible; */
	}

	.layoutBox__inner {
		flex-direction: column;
		width: calc(320 / 375 * 100%);
		max-width: 400px;
	}

	.layoutMap {
		width: 100%;
		height: auto;
	}
	.layoutMap::before {
		width: 15px;
		height: 17px;
	}

	.layoutContents {
		width: 100%;
		height: auto;
		margin-top: 90px;
	}

	.layoutItemHead {
		column-gap: 1.5em;
	}
	.layoutItem__num::before {
		width: 15px;
	}

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

	.layoutMerit__item {
		padding: 1em;
	}
	.layoutMerit__item::before {
		top: -5px;
		right: -5px;
		width: 10px;
	}

	.layoutMerit__text {
		font-size: 12px;

		line-height: 1.8;
	}

	.layoutBox__caption {
		position: static;
		width: 100%;
		font-size: 10px;
		margin-top: 1em;
	}

	.layoutNav {
		/* display: flex;
		justify-content: space-between;
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(50%,-50%);
		max-width: 290px;
		gap: revert; */
	}

	.layoutNav__btn {
		width: 14px;
	}

	.layoutChange .swiper-pagination {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: min(88vw, 400px);
		bottom: auto;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 290px;
	}
	.layoutChange .swiper-pagination-bullet {
		background-color: #e6e6e6;
	}
	.layoutChange .swiper-pagination-bullet-active {
		background-color: #fff471;
	}
	.layoutChange .swiper-pagination-bullet::before {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 200%;
		aspect-ratio: 1;
		border: 1px solid #fff471;
		border-radius: 50%;
		filter: blur(1px);
		opacity: 0;
		transition: .3s linear;
		z-index: 0;
	}
	.layoutChange .swiper-pagination-bullet-active::before {
		opacity: 1;
	}

	/* 戻す時削除 */
	.layoutBox {
		align-items: flex-start;
		padding-top: 50px;
	}
	.layoutBox__inner {
		width: calc(340 / 375 * 100%);
		padding-right: 25px;
	}

	.layoutMap {
		width: calc(300 / 315 * 100%);
		margin-inline: auto;
	}

	.layoutContents {
		margin-top: 20px;
	}

	.layoutItem {
		display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
	}

	.layoutItemHead {
		grid-area: 1/1/2/3;
	}

	.layoutMerit {
		grid-area: 2/1/3/2;
		margin-top: 0;
	}

	.layoutMerit__text {
		font-size: 11px;
	}

	.layoutItem__img {
		grid-area: 2/2/3/3;
		align-self: flex-start;
		margin-top: 0;
	}
	.layoutItem__img .p-caption {
		position: static;
		color: #000;
		text-shadow: none;
		padding: 0;
	}

	.layoutNav {
		gap: 15px;
		right: 4%;
	}
	.layoutNav__btn {
		width: 12px;
	}

	.layoutSpacer {
    height: 50vh;
	}

	.layoutBox__caption {
		font-size: 9px;
	}
}

@media screen and (min-height: 720px) {
	.layoutBox {
		align-items: center;
	}
}