:root {
	--color-black: #26211D;
	--color-white: #ffffff;
	--color-bl: #232b7c;
	--font-cin: "Cinzel", serif;
	--base-ease: cubic-bezier(.16, 1, .3, 1);
	--slide-ease: cubic-bezier(0.33, 1, 0.68, 1);
}

body.j20th.is-anim .p-j20th-cover {
	animation-name: cover;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-timing-function: var(--base-ease);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes cover {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}
body.j20th.is-anim .p-j20th-mv__mark h2 {
	animation-name: marks;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-timing-function: var(--base-ease);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@media screen and (min-width: 768px) {
	@keyframes marks {
		0% {
			opacity: 0;
			left: 50%;
		}
		49% {
			opacity: 1;
			left: 50%;
		}
		50% {
			left: 50%;
			transform: translateX(-50%);
			opacity: 1;
		}
		100% {
			left: 0;
			transform: translateX(0);
			opacity: 1;
		}
	}
}
@media screen and (max-width: 767px) {
	@keyframes marks {
		0% {
			opacity: 0;
		}
		49% {
			opacity: 1;
		}
		50% {
			transform: translate(0, 20vh);
			opacity: 1;
		}
		100% {
			transform: translate(0, 0);
			opacity: 1;
		}
	}
}
body.j20th.is-anim .p-j20th-mv__mark svg {
	animation-name: svgs;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-timing-function: var(--base-ease);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes svgs {
	0% {
		fill: var(--color-white);
	}
	100% {
		fill: var(--color-bl);
	}
}
body.j20th.is-anim .p-j20th-mv__mark p {
	animation-name: txt;
	animation-delay: 1.5s;
	animation-duration: 3s;
	animation-timing-function: var(--base-ease);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes txt {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
body.j20th.is-anim .p-j20th-mv__slide {
	animation-name: slds;
	animation-delay: 2s;
	animation-duration: 3s;
	animation-timing-function: var(--base-ease);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slds {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
body.j20th .float-banner.is-visible {
	display: none;
}

.p-j20th {
	position: relative;
	background-image: url(../images/20th/bg.jpg);
	background-size: cover;
}
@media screen and (max-width: 767px) {
	.p-j20th {
		background-image: url(../images/20th/bg-sp.jpg);
	}
}
.p-j20th .u-none {
	display: none;
}
.p-j20th-cover {
	position: absolute;
	background-color: var(--color-bl);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.p-j20th-mv__mark {
	display: flex;
	align-items: center;
	padding-block: clamp(10rem, 8rem + 6.25vw, 20rem);
	width: 75%;
	max-width: 1350px;
	position: relative;
	margin-inline: auto;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv__mark {
		flex-direction: column;
	}
}
.p-j20th-mv h2 {
	width: 30%;
	transform: translateX(-50%);
	left: 50%;
	opacity: 0;
	position: relative;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv h2 {
		width: 55%;
		left: 0;
		transform: translate(0, 20vh);
	}
}
.p-j20th-mv h2 svg {
	width: 100%;
	aspect-ratio: 381/443;
	fill: var(--color-white);
}
.p-j20th-mv p {
	font-size: clamp(1.7rem, 1.12rem + 1.8125vw, 4.6rem);
	font-weight: 700;
	color: var(--color-bl);
	letter-spacing: 0.2em;
	line-height: 1.5;
	opacity: 0;
	position: absolute;
	right: 0;
	width: 100%;
	text-align: right;
	padding-inline-start: 28%;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv p {
		text-align: center;
		line-height: 2;
		position: static;
		padding: 0;
	}
}
.p-j20th-mv__slide {
	opacity: 0;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv__slide {
		padding-inline-start: 0;
	}
}
.p-j20th-mv__slide .slick-list {
	padding: 0 10% 0 0 !important;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv__slide .slick-list {
		padding: 0 30% 0 0 !important;
	}
}
.p-j20th-mv__slide .slick-slide {
	margin: 0 15px;
}
@media screen and (max-width: 767px) {
	.p-j20th-mv__slide .slick-slide {
		margin: 0 20px 0 0;
	}
}
.p-j20th-area .inner-narrow {
	max-width: 845px;
	padding: clamp(8rem, 5.8rem + 6.875vw, 19rem) 0;
}
@media screen and (max-width: 767px) {
	.p-j20th-area .inner-narrow {
		width: 85%;
	}
}
.p-j20th-area dl {
	color: var(--color-bl);
}
.p-j20th-area dl:nth-of-type(2) {
	margin-block-start: clamp(8rem, 6.2rem + 5.625vw, 17rem);
}
.p-j20th-area dl dt {
	font-size: clamp(2.4rem, 1.68rem + 2.25vw, 4rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.1em;
	margin-block-end: clamp(0.5rem, -0.2rem + 2.1875vw, 4rem);
}
@media screen and (max-width: 767px) {
	.p-j20th-area dl dt {
		line-height: 1.75;
	}
}
.p-j20th-area dl dd {
	font-size: clamp(1.4rem, 1.2rem + 0.625vw, 2rem);
	font-weight: 400;
	letter-spacing: 0.03em;
	line-height: 2;
}
.p-j20th-area.-area1 {
	background-image: url(../images/20th/treat1.webp);
	background-size: 90%;
	background-position: center 5%;
	background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area1 {
		background-image: url(../images/20th/treat1-sp.webp);
		background-position: center 12vw;
		background-size: 100%;
	}
}
.p-j20th-area.-area1 .inner {
	position: relative;
}
@media screen and (max-width: 1300px) {
	.p-j20th-area.-area1 .inner {
		max-width: 650px;
	}
}
@media screen and (max-width: 1100px) {
	.p-j20th-area.-area1 .inner {
		max-width: 845px;
	}
}
.p-j20th-area.-area1 ul {
	display: flex;
	gap: clamp(5.5rem, 4rem + 4.6875vw, 13rem);
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area1 ul {
		flex-direction: column;
	}
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area1 ul li {
		width: 80%;
	}
}
.p-j20th-area.-area1 ul li:nth-of-type(2) {
	margin-block-start: clamp(10rem, 8rem + 6.25vw, 20rem);
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area1 ul li:nth-of-type(2) {
		margin-block-start: 0;
		margin-inline: auto 0;
	}
}
.p-j20th-area.-area2 {
	background-image: url(../images/20th/treat2.webp);
	background-size: 90%;
	background-position: center top;
	background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area2 {
		background-image: url(../images/20th/treat2-sp.webp);
		background-position: center 17.5vw;
		background-size: 95%;
	}
}
.p-j20th-area.-area2 .inner {
	position: relative;
}
@media screen and (max-width: 1300px) {
	.p-j20th-area.-area2 .inner {
		max-width: 650px;
	}
}
@media screen and (max-width: 1100px) {
	.p-j20th-area.-area2 .inner {
		max-width: 845px;
	}
}
.p-j20th-area.-area2 figure {
	position: absolute;
	max-width: 380px;
	width: calc((100vw - 845px) / 2);
}
@media screen and (max-width: 1700px) {
	.p-j20th-area.-area2 figure {
		width: calc((100vw - 900px) / 2);
	}
}
@media screen and (max-width: 1300px) {
	.p-j20th-area.-area2 figure {
		width: calc((100vw - 750px) / 2);
	}
}
@media screen and (max-width: 1100px) {
	.p-j20th-area.-area2 figure {
		position: static;
		max-width: none;
		width: 60%;
		margin-block-start: 7%;
	}
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area2 figure {
		margin-block-start: 12%;
		width: 64%;
	}
}
.p-j20th-area.-area2 figure.-pic3 {
	left: -480px;
	bottom: 50px;
}
@media screen and (max-width: 1700px) {
	.p-j20th-area.-area2 figure.-pic3 {
		left: calc((845px - 100vw) / 2);
	}
}
@media screen and (max-width: 1300px) {
	.p-j20th-area.-area2 figure.-pic3 {
		left: calc((690px - 100vw) / 2);
	}
}
@media screen and (max-width: 1100px) {
	.p-j20th-area.-area2 figure.-pic3 {
		margin-inline: auto 0;
	}
}
.p-j20th-area.-area2 figure.-pic4 {
	right: -450px;
	top: 0;
}
@media screen and (max-width: 1700px) {
	.p-j20th-area.-area2 figure.-pic4 {
		right: calc((845px - 100vw) / 2);
	}
}
@media screen and (max-width: 1300px) {
	.p-j20th-area.-area2 figure.-pic4 {
		right: calc((690px - 100vw) / 2);
	}
}
@media screen and (max-width: 767px) {
	.p-j20th-area.-area2 figure.-pic4 {
		margin-inline-start: 10%;
	}
}/*# sourceMappingURL=j20th.css.map */