/* -----------------------------------------------
= initial-anime
----------------------------------------------- */
.initial-anime {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: #fff;
	animation: overlayFadeOut 1s ease forwards;
	animation-delay: 3s;
}
.initial-anime p {
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: imagesFadeOut 1s ease forwards;
	animation-delay: 3s;
}
.initial-anime p img {
	width: calc(150 / 375 * 100vw);
	opacity: 0;
}
.initial-anime p img:first-child {
	animation: fadeIn 1.5s ease forwards;
	animation-delay: .4s;
}
.initial-anime p img:last-child {
	animation: fadeIn 1.5s ease forwards;
	animation-delay: 1.6s;
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes imagesFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
@keyframes overlayFadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		pointer-events: none;
	}
}
@media print, screen and (min-width: 768px) {/* PC */
.initial-anime p img {
	width: calc(337 / 1500 * 100vw);
}
}/* @media */
/* -----------------------------------------------
= kv
----------------------------------------------- */
.kv img {
	width: 100%;
	height: calc(100svh - 45px);
	max-height: 700px;
	object-fit: cover;
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 3s;
	transform: scale(1.05);
}
.kv .swiper {
	opacity: 0;
	transition: opacity 1s;
	visibility: hidden;
}
.kv .swiper-slide-active img {
	transform: scale(1);
}
@media print, screen and (min-width: 768px) {/* PC */
.kv img {
	height: calc(100vh - 80px);
	max-height: 800px;
}
.kv .num01 img {
	object-position: 20% 50%;
}
.kv .num02 img {
	object-position: 92% 80%;
}
.kv .num03 img {
	object-position: 82% 30%;
}
.kv .num04 img {
	object-position: 92% 80%;
}
.kv .num05 img {
	object-position: 10% 0;
}
.kv .num06 img {
	object-position: 5% 50%;
}
}/* @media */
/* -----------------------------------------------
= title
----------------------------------------------- */
.title {
	margin-bottom: 20px;
	font-weight: 700;
}
.title .en {
	display: block;
	color: #4d4d4d;
	font-family: var(--en);
	font-size: calc(1.2rem / 1.6);
}
.title .jp {
	display: block;
	font-family: var(--serif);
	font-size: calc(2rem / 1.6);
}
@media print, screen and (min-width: 768px) {/* PC */
.title {
	margin-bottom: 40px;
}
.title .en {
	margin-bottom: 10px;
	font-size: calc(2rem / 1.6);
}
.title .jp {
	font-size: calc(3.6rem / 1.6);
}
}/* @media */
@media print, screen and (max-width: 1279px) and (min-width: 768px) {/* TABLET */
.title .en {
	font-size: calc(1.8rem / 1.6);
}
.title .jp {
	font-size: calc(3rem / 1.6);
}
}/* @media */
/* -----------------------------------------------
= more
----------------------------------------------- */
.more {
	padding-right: 50px;
	font-family: var(--en);
	font-size: calc(1.1rem / 1.6);
	font-weight: 600;
}
.more::after {
	content: "";
	position: absolute;
	top: calc(50% - 2px);
	right: 0;
	width: 40px;
	height: 4px;
	background: url(../img/shared/icon_more_arrow.svg) no-repeat 50% / cover;
	filter: var(--filter-white);
}
@media print, screen and (min-width: 768px) {/* PC */
.more {
	padding-right: 100px;
	font-size: calc(2.2rem / 1.6);
}
.more::after {
	top: calc(50% - 4px);
	width: 80px;
	height: 8px;
}
}/* @media */
@media print, screen and (max-width: 1279px) and (min-width: 768px) {/* TABLET */
.more {
	font-size: calc(22 / 1500 * 100vw);
}
}/* @media */
@media (hover: hover) {
a .more::after {
	transition: right .3s;
}
a:hover .more::after {
	right: -10px;
}
}/* @media */
/* -----------------------------------------------
= about
----------------------------------------------- */
.about {
	padding: 40px 12px 70px;
}
.about .lead {
	max-width: 305px;
	margin: 0 auto 63px;
}
.about .lead p + p {
	margin-top: 30px;
}
.about .lead p:last-child {
	margin-top: 50px;
}
.about .lead.js-inview {
	opacity: 1;
}
.about .lead.js-inview p {
	opacity: 0;
	transition: opacity .8s;
}
.about .lead.js-inview.is-show p {
	opacity: 1;
}
.about .lead.js-inview p:nth-child(1) {
	transition-delay: .4s;
}
.about .lead.js-inview p:nth-child(2) {
	transition-delay: .6s;
}
.about .lead.js-inview p:nth-child(3) {
	transition-delay: .8s;
}
.about .lead.js-inview p:nth-child(4) {
	transition-delay: 1s;
}
.about .lead.js-inview p:nth-child(5) {
	transition-delay: 1.2s;
}
.about .lead.js-inview p:nth-child(6) {
	transition-delay: 1.4s;
}
.about .menu .inner {
	position: relative;
	color: #fff;
}
.about .menu .set {
	position: absolute;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
.about .menu .en {
	font-family: var(--en);
	font-size: calc(1.2rem / 1.6);
	font-weight: 700;
}
.about .menu .jp {
	font-family: var(--serif);
	font-size: calc(2rem / 1.6);
	font-weight: 700;
}
.about .menu img {
	height: 262px;
	object-fit: cover;
	object-position: 50% 0%;
}
.about .menu .text {
	margin-top: 10px;
	font-size: calc(1.3rem / 1.6);
	line-height: calc(18 / 13);
}
.about .menu .more {
	position: absolute;
	bottom: 16px;
	right: 20px;
}
@media print, screen and (min-width: 768px) {/* PC */
.about {
	display: flex;
	align-items: end;
	max-width: 1500px;
	margin-inline: auto;
	padding: 70px 0 100px;
}
.about .lead {
	max-width: none;
	width: min(510px, calc(510 / 1500 * 100vw));
	margin-bottom: calc(216 / 1500 * 100vw);
}
.about .lead p + p {
	margin-top: 50px;
}
.about .lead p:last-child {
	margin-top: 95px;
}
.about .menu {
	position: relative;
	width: min(766px, calc(766 / 1500 * 100vw));
}
.about .menu .set {
	top: calc(50% - 100px);
	left: 40px;
	transform: translateY(0);
}
.about .menu .en {
	font-size: calc(2rem / 1.6);
}
.about .menu .jp {
	font-size: calc(3.6rem / 1.6);
}
.about .menu img {
	height: 677px;
}
.about .menu .text {
	position: absolute;
	top: calc(50% + 10px);
	left: 40px;
	margin-top: 0;
	color: #fff;
	font-size: calc(1.6rem / 1.6);
	line-height: calc(28 / 16);
}
.about .menu .more {
	position: absolute;
	bottom: 40px;
	right: 40px;
}
}/* @media */
@media (hover: hover) {
.about .menu a {
	transition: opacity .3s;
}
.about .menu a:hover {
	opacity: .8;
}
}/* @media */
/* -----------------------------------------------
= interview
----------------------------------------------- */
.interview {
	padding: 0 12px 75px;
}
.interview .swiper {
	margin-bottom: 10px;
	padding-bottom: 50px;
}
.interview .swiper-slide {
	flex: 0 0 calc((100% - 12px) / 3);
	transition: flex 0.4s ease, width 0.4s ease;
}
.interview .swiper-slide.is-expanded {
	flex: 0 0 100%;
}/*
.swiper-slide.is-expanded-left {
	flex: 0 0 100%;
	order: -1;
}*/
.interview .swiper-slide button {
	display: block;
	position: relative;
	color: #fff;
}
.interview .swiper-slide button::before,
.interview .swiper-slide button::after {
	content: "";
	position: absolute;
	width: 40px;
	height: 30px;
	z-index: 1;
	background: var(--red);
	clip-path: polygon(0 0,100% 0, 100% 8px, 8px 8px, 8px 100%, 0 100%);
}
.interview .swiper-slide button::before {
	top: 0;
	left: 0;
}
.interview .swiper-slide button::after {
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
}
.interview .swiper-slide .set {
	display: block;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 1;
}
.interview .swiper-slide .type {
	display: block;
	margin-bottom: 5px;
	font-size: calc(1rem / 1.6);
	font-weight: 700;
}
.interview .swiper-slide .division {
	display: block;
	font-size: calc(.7rem / 1.6);
}
.interview .swiper-slide .img {
	display: block;
	position: relative;
}
.interview .swiper-slide .img::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
	transition: background .3s;
}
.interview .swiper-slide .img img {
	height: 300px;
	object-fit: cover;
	object-position: 35% 50%;
	filter: grayscale(100%);
	transition: filter .3s;
}
.interview .swiper-slide .btn.is-active .img::after {
	background: rgba(0,0,0,.3);
}
.interview .swiper-slide .btn.is-active .img img {
	filter: grayscale(0);
}
.interview .swiper-slide .detail {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 2;
	color: #fff;
}
.interview .swiper-slide .detail.is-open {
	display: block;
}
.interview .swiper-slide .detail .text {
	position: absolute;
	left: 15px;
	right: 135px;
	bottom: 15px;
	font-size: calc(1.4rem / 1.6);
	line-height: calc(18 / 14);
}
.interview .swiper-slide .detail .more {
	position: absolute;
	right: 15px;
	bottom: 15px;
}
.interview .swiper-pagination {
	left: calc(50% - 80px);
	bottom: -5px;
	width: 160px;
}
.interview .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: #ccc;
	border-radius: 0;
	opacity: 1;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 5px;
}
.interview .swiper-pagination-bullet-active {
	background: var(--red);
}
.interview .swiper-button-next,
.interview .swiper-button-prev {
	top: auto;
	bottom: 5px;
	width: 50px;
	height: 30px;
	background: #808080;
	border: 1px solid #808080;
	box-sizing: border-box;
}
.interview .swiper-button-next {
	right: 0;
}
.interview .swiper-button-prev {
	left: 0;
}
.interview .swiper-button-next::after,
.interview .swiper-button-prev::after {
	color: #fff;
	font-size: 18px;
}
.interview .link {
	text-align: center;
}
.interview .link p {
	margin-bottom: 10px;
	color: var(--red);
	font-size: calc(1.2rem / 1.6);
}
.interview .link a {
	display: block;
	padding: 5px;
	color: #fff;
	background: var(--red);
	font-family: var(--en);
	font-size: calc(2rem / 1.6);
	font-weight: 700;
}
@media print, screen and (min-width: 768px) {/* PC */
.interview {
	max-width: 1418px;
	margin-inline: auto;
	padding: 0 42px 150px;
}
.interview .swiper-outer {
	position: relative;
	margin-inline: -120px;
	padding-inline: 120px;
}
.interview .swiper {
	padding-bottom: 160px;
}
.interview .swiper-slide {
	flex: 0 0 calc((100% - 110px) / 6);
}
.interview .swiper-slide.is-expanded {
	flex: 0 0 calc((100% - 44px) / 2);
}
.interview .swiper-slide button::before,
.interview .swiper-slide button::after {
	width: 80px;
	height: 58px;
	clip-path: polygon(0 0,100% 0, 100% 16px, 16px 16px, 16px 100%, 0 100%);
}
.interview .swiper-slide .set {
	top: 25px;
	left: 25px;
}
.interview .swiper-slide .type {
	font-size: calc(2rem / 1.6);
}
.interview .swiper-slide .division {
	font-size: calc(1.4rem / 1.6);
}
.interview .swiper-slide .img img {
	height: 600px;
}
.interview .swiper-slide .detail .text {
	left: 50px;
	bottom: 90px;
	font-size: calc(3.2rem / 1.6);
	line-height: calc(44 / 32);
	white-space: nowrap;
}
.interview .swiper-slide .detail .more {
	right: 45px;
	bottom: 45px;
}
.interview .swiper-pagination {
	left: -14px;
	bottom: 130px;
	width: calc(100% + 28px);
}
.interview .swiper-pagination-bullet {
	width: calc((100% / 13 - 14px));
	height: 3px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 7px;
}
.interview .swiper-button-next,
.interview .swiper-button-prev {
	bottom: 420px;
	width: 100px;
	height: 60px;
}
.interview .swiper-button-next::after,
.interview .swiper-button-prev::after {
	font-size: 36px;
}
.interview .link {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: -112px auto 0;
}
.interview .link p {
	margin-bottom: 15px;
	font-size: calc(1.8rem / 1.6);
}
.interview .link a {
	padding: 8px 0;
	border: 1px solid var(--red);
	font-size: calc(2.8rem / 1.6);
}
}/* @media */
@media print, screen and (max-width: 1673px) and (min-width: 768px) {
.interview .swiper-outer {
	margin-inline: 0;
	padding-inline: 0;
}
.interview .swiper-button-next {
	right: -40px;
}
.interview .swiper-button-prev {
	left: -40px;
}
}/* @media */
@media print, screen and (max-width: 1279px) and (min-width: 768px) {/* TABLET */
.interview .swiper-slide {
	flex: 0 0 calc((100% - 66px) / 4);
}
}/* @media */
@media (hover: hover) {
.interview .link a {
	transition: .3s;
}
.interview .link a:hover {
	color: var(--red);
	background: #fff;
}
.interview .swiper-button-next,
.interview .swiper-button-prev {
	transition: background .3s;
}
.interview .swiper-button-next:hover,
.interview .swiper-button-prev:hover {
	background: #fff;
}
.interview .swiper-button-next::after,
.interview .swiper-button-prev::after {
	transition: color .3s;
}
.interview .swiper-button-next:hover::after,
.interview .swiper-button-prev:hover::after {
	color: #808080;
}
}/* @media */
/* -----------------------------------------------
= movie
----------------------------------------------- */
.movie {
	margin: 0 12px 75px;
}
.movie iframe {
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
}
@media print, screen and (min-width: 768px) {/* PC */
.movie {
	max-width: 680px;
	margin: 0 auto 150px;
}
}/* @media */
/* -----------------------------------------------
= project
----------------------------------------------- */
.project {
	padding: 0 12px 75px;
}
.project .lead {
	margin-bottom: 30px;
	font-size: calc(1.3rem / 1.6);
	line-height: calc(18 / 13);
}
.project .menu li + li {
	margin-top: 30px;
}
.project .menu a {
	display: block;
	position: relative;
	color: #fff;
}
.project .menu .num {
	display: grid;
	place-content: center;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 45px;
	height: 45px;
	padding-top: 5px;
	color: #000;
	font-size: calc(.7rem / 1.6);
	font-weight: 700;
	text-align: center;
}
.project .menu li:nth-child(1) .num {
	background: url(../img/index/project_bg_num.svg) no-repeat 50% / 100% auto;
}
.project .menu li:nth-child(2) .num {
	background: url(../img/index/project_bg_num02.svg) no-repeat 50% / 100% auto;
}
.project .menu li:nth-child(3) .num {
	background: url(../img/index/project_bg_num03.svg) no-repeat 50% / 100% auto;
}
.project .menu .num span {
	display: block;
	font-size: calc(1rem / 1.6);
}
.project .menu img {
	height: 283px;
	object-fit: cover;
}
.project .menu .text {
	position: absolute;
	bottom: 30px;
	left: 15px;
	font-family: var(--serif);
	font-size: calc(2rem / 1.6);
	font-weight: 700;
	line-height: calc(26 / 20);
}
.project .menu .more {
	position: absolute;
	bottom: 10px;
	right: 15px;
}
@media print, screen and (min-width: 768px) {/* PC */
.project {
	display: flex;
	gap: 0 40px;
	max-width: 1420px;
	margin-inline: auto;
	padding: 0 40px 120px;
}
.project .side {
	width: calc(400 / 1500 * 100%);
}
.project .sticky {
	position: sticky;
	top: 100px;
}
.project .side .lead {
	margin-bottom: 0;
	font-size: calc(1.6rem / 1.6);
	line-height: calc(28 / 16);
}
.project .menu {
	flex: 1;
}
.project .menu li + li {
	margin-top: 40px;
}
.project .menu .num {
	top: 20px;
	left: 20px;
	width: 90px;
	height: 90px;
	padding-top: 10px;
	color: #fff;
	font-size: calc(1.4rem / 1.6);
}
.project .menu li:nth-child(1) .num {
	color: #000;
}
.project .menu .num span {
	font-size: calc(2rem / 1.6);
}
.project .menu img {
	height: auto;
}
.project .menu .text {
	left: 30px;
	font-size: calc(4rem / 1.6);
}
.project .menu .more {
	bottom: 30px;
	right: 30px;
}
}/* @media */
@media print, screen and (max-width: 1279px) and (min-width: 768px) {/* TABLET */
.project .menu .num {
	top: 10px;
	left: 10px;
	width: 60px;
	height: 60px;
	padding-top: 5px;
	font-size: calc(1rem / 1.6);
}
.project .menu .num span {
	font-size: calc(1.4rem / 1.6);
}
.project .menu .text {
	left: 10px;
	font-size: calc(40 / 1500 * 100vw);
}
.project .menu .more {
	bottom: 10px;
	right: 10px;
}
}/* @media */
@media (hover: hover) {
.project .menu a {
	transition: opacity .3s;
}
.project .menu a:hover {
	opacity: .8;
}
}/* @media */
/* -----------------------------------------------
= other
----------------------------------------------- */
.other .talk,
.other .region,
.other .information {
	margin: 0 12px 75px;
}
.other .item {
	position: relative;
}
.other .item a {
	display: block;
	position: relative;
	color: #fff;
}
.other .item .text {
	position: absolute;
	bottom: 40px;
	left: 15px;
	font-size: calc(1.3rem / 1.6);
	line-height: calc(18 / 13);
}
.other .item img {
	height: 302px;
	object-fit: cover;
}
.other .item .more {
	position: absolute;
	bottom: 15px;
	right: 15px;
}
.other .events,
.other .information {
	margin-bottom: 80px;
}
.other .environment .title,
.other .events .title,
.other .information .title {
	position: absolute;
	top: 15px;
	left: 15px;
}
.other .environment .title .en,
.other .events .title .en,
.other .information .title .en {
	color: #fff;
}
.other .environment .title .jp,
.other .events .title .jp,
.other .information .title .jp {
	color: #fff;
	font-family: var(--gothic);
	font-size: calc(1.8rem / 1.6);
	font-weight: 700;
}
.other .item.environment img,
.other .item.events img {
	height: 218px;
}
.other .information ul {
	margin-left: 1em;
	list-style-type: disc;
}
.other .information li {
	margin-block: 5px;
	font-size: calc(1.4rem / 1.6);
	line-height: calc(22 / 14);
}
.other .information li a {
	color: #000;
	text-decoration: underline;
}
.other .item.information img {
	height: 200px;
	object-position: 0 50%;
}
@media print, screen and (min-width: 768px) {/* PC */
.other {
	display: flex;
	flex-wrap: wrap;
	gap: 140px 0;
	padding: 0;
}
.other .talk,
.other .region {
	margin: 0;
}
.other .talk,
.other .region {
	width: calc(50% - 60px);
}
.other .talk {
	margin-inline: 40px 20px;
}
.other .region {
	margin-inline: 20px 40px;
}
.other .item .text {
	bottom: auto;
	top: 20px;
	left: 20px;
	right: 20px;
	font-size: calc(1.6rem / 1.6);
	line-height: calc(28 / 16);
}
.other .item img {
	height: auto;
}
.other .item .more {
	bottom: 40px;
	right: 35px;
}
.other .environment,
.other .events {
	width: 50%;
	margin-bottom: 0;
}
.other .environment .title,
.other .events .title {
	top: 30px;
	left: 80px;
}
.other .information .title {
	top: 30px;
	left: 40px;
}
.other .environment .title .jp,
.other .events .title .jp,
.other .information .title .jp {
	font-size: calc(2.8rem / 1.6);
}
.other .item.environment img,
.other .item.events img {
	height: auto;
}
.other .information {
	margin-bottom: 140px;
}
.other .information {
	width: 100%;
}
.other .information ul {
	position: absolute;
	top: 50%;
	right: 80px;
	transform: translateY(-50%);
}
.other .information li {
	margin-block: 10px;
	color: #fff;
	font-size: calc(1.8rem / 1.6);
}
.other .information li a {
	color: #fff;
}
.other .item.information img {
	height: auto;
}
}/* @media */
@media (hover: hover) {
.other .information li a:hover {
	text-decoration: none;
}
.other .item a {
	transition: opacity .3s;
}
.other .item a:hover {
	opacity: .8;
}
}/* @media */