@charset "utf-8";

/*+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-     Site Contents     -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+*/
/*          loading          */
#overlay{position:fixed;width:100%;height:100%;text-align:center;background:#FFF;z-index:9999;}

.garamond {
  font-family: "EB Garamond", serif;
}
/*          Site Contents          */
.visual-box {
	background: url(/img/visual-top-bg-sp.webp), url(/img/visual-top-bg-pt.webp);
	background-size: 100% auto, 400px;
	background-position-y: 47%, top;
	background-repeat: no-repeat, repeat;
}
@media (min-width: 835px) {
	.visual-box {
		background: url(/img/visual-top-bg.webp), url(/img/visual-top-bg-pt.webp);
		background-size: 100% auto, 400px;
		/* 835：350px、1980：530px */
		background-position-y: clamp(21.875rem, 13.215rem + 16.59vw, 33.75rem), top;
		background-repeat: no-repeat, repeat;
	}
}
.visual-top {
	/* 420：48px、1980：96px *//* 420：28px、1980：80px */
	padding: clamp(3rem, 2.008rem + 3.78vw, 6rem) clamp(1.75rem, 0.875rem + 3.33vw, 5rem) 0 0;
	width: 100%;
	max-width: 1920px;
	margin: auto;
}
#visual {
	position: relative;
}
#visual .visual-img {
	opacity: 0;
	transform: translateX(-10px);
	filter: grayscale(1) blur(5px);
	transition: 1.5s ease-out;
}
#visual .visual-img.show1 {
	opacity: 1;
	transform: translateX(0);
	filter: grayscale(1) blur(0);
}
#visual .visual-img.show2 {
	filter: grayscale(0) blur(0);
	transition: .5s linear;
}
.visual-img {
	/* 420：40px、1980：80px */
	border-radius: 0 0 clamp(2.5rem, 1.471rem + 3.92vw, 5rem) 0;
}
.catch {
	position: absolute;
	top: 4%;
	right: 4%;
	/* 420：45px、1980：120px */
	width: clamp(2.813rem, 1.262rem + 5.91vw, 7.5rem);
}
@media (min-width: 835px) {
	.catch {
		top: 8%;
		right: 5%;
	}
}
.catch {
	opacity: 0;
	transition: 1.5s ease-in;
}
.catch.show {
	opacity: 1;
}

.visual-bottom {
	width: 90%;
	max-width: 1200px;
	text-align: center;
	margin: auto;
	margin-top: -5.3%;
	position: relative;
	/* 420：80px、1440：120px */
	padding-bottom: clamp(5rem, 3.75rem + 4.17vw, 7.5rem);
}
.visual-bottom .logo {
	opacity: 0;
	transform: translateY(20px);
	filter: blur(10px);
	transition: 1.5s ease-out;
}
.visual-bottom .logo.show {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}
.release {
	margin: 20px auto;
	width: 70%;
	max-width: 560px;
}
.date {
	/* 420：50px、1440：72px */
	margin: clamp(3.125rem, 2.438rem + 2.29vw, 4.5rem) auto;
	width: 80%;
	max-width: 738px;
}

.sns a {
	display: flex;
	justify-content: center;
	align-items: center;
	/* 420：12px、1440：24px */
	font-size: clamp(0.75rem, 0.441rem + 1.18vw, 1.5rem);
	font-weight: bold;
	width: 100%;
	max-width: 290px;
	margin: auto;
	padding: 16px 0;
	background: linear-gradient(270deg, #0dcbdf 0%, #4bd2e0 100%);
}
.sns a img {
	/* 420：12px、1440：24px */
	padding-left: clamp(0.75rem, 0.441rem + 1.18vw, 1.5rem);
}
@media not (min-width: 835px) {
	.sns a {
		width: 40%;
		max-width: 150px;
		margin: auto;
		padding: 8px 0;
	}
	.sns a img {
		width: 30px;
	}
}
.loading-in {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(20px);
	transition: 1s ease-out;
}
.loading-in.show {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

.scroll-in {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(20px);
	transition: 1s ease-out;
}
.scroll-in.show {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

.movie {
	overflow: hidden;
}
.movie-box {
	position: relative;
}
.movie-box .play {
	width: 0;
	height: 0;
	margin: auto;
	border-style: solid;
	/* 420：10px、1980：35px *//* 420：10px、1980：35px *//* 420：17px、1980：60px */
	border-width: clamp(0.625rem, 0.204rem + 1.6vw, 2.188rem) 0px clamp(0.625rem, 0.204rem + 1.6vw, 2.188rem) clamp(1.063rem, 0.339rem + 2.76vw, 3.75rem);
	border-color: transparent;
	border-left-color: #d987a0;
	position: relative;
	/* 420：3px、1980：10px */
	left: clamp(0.188rem, 0.07rem + 0.45vw, 0.625rem);
	z-index: 3;
}
.movie-box a {
	/* 420：80px、1690：260px */
	padding: clamp(5.625rem, 2.111rem + 13.39vw, 16.25rem) 0;
	display: block;
}
.movie-box a::after {
	content: "";
	position: absolute;
	/* 420：48px、1980：150px */
	width: clamp(3rem, 1.284rem + 6.54vw, 9.375rem);
	height: clamp(3rem, 1.284rem + 6.54vw, 9.375rem);
	background: rgba(255, 255, 255, .3);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	border: 2px solid #fff;
	border-radius: 50%;
	z-index: 2;
}
.movie-box a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(78, 187, 242, .4);
	z-index: 1;
	top: 0;
}
.movie-box #movie-bg {
	position: absolute;
	width: 100%;
	top: 50%;
	left: 49.9999%;
	transform: translate(-50%, -50%);
	margin: auto;
	z-index: -1;
}

#comment {
	/* 420：100px、1440：176px *//* 420：40px、1440：176px */
	padding: clamp(6.25rem, 2.786rem + 6.64vw, 11rem) 0 clamp(2.5rem, -1rem + 13.33vw, 11rem);
	position: relative;
}
#comment::after {
	content: "";
	position: fixed;
	width: 100%;
	height: 100vh;
	background: url(/img/comment-bg-sp.webp);
	background-size: cover;
	top: 0;
	left: 0;
	z-index: -2;
}
@media (min-width: 835px) {
	#comment::after {
		background: url(/img/comment-bg.webp);
	background-size: cover;
	}
}
#comment .title {
	width: 80%;
	max-width: 1440px;
	margin: auto;
	/* 420：40px、1440：56px */
	font-size: clamp(2.5rem, 1.771rem + 1.4vw, 3.5rem);
	font-style: italic;
	line-height: 1;
	/* 420：64px、1440：80px */
	margin-bottom: clamp(4rem, 3.271rem + 1.4vw, 5rem);
}
.comment-box {
	width: 80%;
	max-width: 1440px;
	margin: auto;
	/* 420：16px、1440：20px */
	font-size: clamp(1rem, 0.818rem + 0.35vw, 1.25rem);
}
.comment {
	/* 420：72px、1440：144px */
	margin-bottom: clamp(4.5rem, 2.647rem + 7.06vw, 9rem);
}
.comment .name {
	/* 420：32px、1440：60px */
	margin-bottom: clamp(2rem, 1.279rem + 2.75vw, 3.75rem);
	/* 420：26px、1440：40px */
	font-size: clamp(1.625rem, 0.987rem + 1.22vw, 2.5rem);
	line-height: 1;
}
.comment .name span {
	/* 420：16px、1440：20px */
	font-size: clamp(1rem, 0.818rem + 0.35vw, 1.25rem);
}
.comment .txt {
	line-height: 1.8;
}
.comment .txt p {
	/* 420：32px、1440：60px */
	margin-bottom: clamp(2rem, 1.279rem + 2.75vw, 3.75rem);
}
#comment02 img {
	/* 420：32px、1440：60px */
	margin-bottom: clamp(2rem, 1.279rem + 2.75vw, 3.75rem);
}

.footer-wrap {
	text-align: center;
}
.footer-banner-list {
	width: 90%;
	max-width: 1440px;
	display: flex;
	justify-content: center;
	margin: auto;
	/* 420：120px、1440：240px */ /* 420：20px、1440：40px */
	margin: clamp(7.5rem, 4.412rem + 11.76vw, 15rem) auto clamp(1.25rem, 0.735rem + 1.96vw, 2.5rem);
}
.footer-banner-item {
	/* 420：8px、1440：24px */
	margin: 0 clamp(0.5rem, 0.088rem + 1.57vw, 1.5rem);
}

.footer-copyright {
	/* 420：7px、1440：14px */
	font-size: clamp(0.438rem, 0.257rem + 0.69vw, 0.875rem);
}