.pageAnniversary {
	--font-xs: 0.7143rem; /* 10px */
	--font-sm: 0.8571rem; /* 12px */
	--font-md: 0.9286rem; /* 13px */
	--font-lg: 1.0714rem; /* 15px */
	--font-xl: 1.2143rem; /* 17px */
	--font-xxl: 1.4286rem; /* 20px */
	--font-3xl: 1.7143rem; /* 24px */
	--font-4xl: 2rem; /* 28px */
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--letter-tight: 0.001em;
	--letter-normal: 0.02em;
	--letter-wide: 0.05em;
	--line-tight: 1.3;
	--line-normal: 1.5;
	--line-relaxed: 1.7;
	--line-loose: 2;
	--color-primary: #ca191d;
	--color-secondary: #1ba794;
	--color-tertiary: #c788a8;
	--color-bg1: #a9a5a1;
	--color-bg2: #e9ece6;
	--color-bg3: #fce5e8;
	--color-bg4: #dfe2ea;
	--color-bg5: #feefd4;
	--color-bg6: #bce1df;
	--color-bg7: #e5e5e4;
	--container-width: 454px;

	font-size: var(--font-lg);
}

.pageAnniversary a {
	text-decoration: unset;
}

.pageAnniversary span {
	display: inline-block;
}

.pageAnniversary br.pc {
	display: none;
}

.pageAnniversary [data-effect="fade-in"] {
	opacity: 0;
	transition: 1.2s ease-out;
	transition-property: opacity;
}
.pageAnniversary [data-effect="fade-in"].show {
	opacity: 1;
}
.pageAnniversary [data-effect="fade-up"] {
	transform: translateY(80px);
	opacity: 0;
	transition: 0.6s ease-out;
	transition-property: transform, opacity;
}
.pageAnniversary [data-effect="fade-up"].effectSmall {
	transform: translateY(40px);
	transition: 0.3s ease-out;
}
.pageAnniversary [data-effect="fade-up"].show {
	transform: translateY(0);
	opacity: 1;
}

/* ボタン */
.pageAnniversary .button {
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	min-width: 206px;
	height: 35px;
	padding: 0 30px;
	text-align: center;
	text-decoration: none;
	font-size: var(--font-sm);
	font-weight: var(--font-medium);
	line-height: 1;
	border-radius: 8px;
	color: #fff;
	background: var(--button-color);
}
.pageAnniversary .button .icon {
	margin-right: 0.1em;
}
.pageAnniversary .button--secondary {
	--button-color: var(--color-secondary);
}
.pageAnniversary .button--tertiary {
	--button-color: var(--color-tertiary);
}
.pageAnniversary .button--rounded {
	border-radius: 9999px;
}
.pageAnniversary .button--large {
	min-width: 260px;
	height: 44px;
	font-size: var(--font-lg);
}

.pageAnniversary .stSection {
	padding-top: 30px;
	padding-bottom: 30px;
}

.pageAnniversary .indentBrackets {
	margin-left: -0.5em;
}

/* 初期ローディング画面 */
.pageAnniversary .loadingView {
	position: fixed;
	top: 0;
	left: 50%;
	z-index: 9999;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: var(--container-width);
	height: 100%;
	background: #fff;
	animation: loadingViewAnimation 4s forwards;
}
.pageAnniversary .loadingView.hide {
	display: none;
}
.pageAnniversary .loadingView__logo {
	width: 200px;
	opacity: 0;
	transform: translateY(-50%);
	animation: loadingLogoAnimation 3s forwards 0.5s;
}

@keyframes loadingViewAnimation {
	80% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes loadingLogoAnimation {
	0% {
		transform: translateY(30%);
		opacity: 0;
	}
	20% {
		transform: translateY(0);
		opacity: 1;
	}
	70% {
		transform: translateY(0);
		opacity: 1;
	}
	100% {
		transform: translateY(100%);
		opacity: 0;
	}
}

/* レイアウト */
/* メイン */
.pageAnniversary .stMain,
.pageAnniversary .pageAnniversary__footer {
	position: relative;
	max-width: var(--container-width);
	margin: 0 auto;
}

.pageAnniversary .stMain {
	background: #fff;
	margin-top: var(--header-height);
}

/* フッター */
.pageAnniversary .pageAnniversary__footer {
	overflow: hidden;
	margin: 0 auto;
	background: var(--color-primary);
}

.pageAnniversary .pageAnniversary__footer__navi {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.pageAnniversary .pageAnniversary__footer__navi .stHeaderElement__freedial {
	color: #fff;
}
.pageAnniversary .pageAnniversary__footer__navi .stHeaderElement__freedialNum {
	font-size: var(--font-3xl);
	font-weight: var(--font-bold);
	letter-spacing: var(--letter-wide);
}
.pageAnniversary
	.pageAnniversary__footer__navi
	.stHeaderElement__freedialNum
	a {
	color: unset;
}
.pageAnniversary .pageAnniversary__footer__navi .stHeaderElement__freedialIcon {
	position: relative;
	left: 0.2em;
	width: 1.6em;
}
.pageAnniversary .pageAnniversary__footer__navi .stHeaderElement__freedialCap {
	padding-left: 36px;
	font-size: var(--font-xs);
	font-weight: var(--font-medium);
	text-align: center;
}

.pageAnniversary .mv__main img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.pageAnniversary .swiper-wrapper {
	transition-timing-function: linear;
}
.pageAnniversary .swiper-slide img {
	width: 100%;
	height: 74px;
	object-fit: cover;
}

.pageAnniversary .about {
	overflow: hidden;
	padding-top: 60px;
	text-align: center;
}
.pageAnniversary .about__heading {
	font-size: var(--font-xxl);
	font-weight: var(--font-medium);
}
.pageAnniversary .about__text {
	margin-top: 30px;
	font-weight: var(--font-medium);
	letter-spacing: var(--letter-tight);
	line-height: var(--line-loose);
}
.pageAnniversary .about__logo {
	margin-top: 30px;
}

/* ブランドムービー */
.pageAnniversary .brand {
	overflow: hidden;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
	box-sizing: content-box;
	border-image: url(../images/anniversary/border.svg) 14 / 14px 0 repeat;
	background: var(--color-bg2);
}
.pageAnniversary .brand .stContainer {
	padding: 0;
}
.pageAnniversary .brand__heading {
	font-size: var(--font-xxl);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
}
.pageAnniversary .brand__text {
	margin-top: 5px;
	font-size: var(--font-md);
	font-weight: var(--font-medium);
}

.pageAnniversary .brandVideo {
	margin-top: 20px;
}
.pageAnniversary .brandVideo video {
	width: 100%;
	aspect-ratio: 390 / 220;
}

.pageAnniversary .brandVideo__caption {
	margin-top: 8px;
	font-size: var(--font-md);
	font-weight: var(--font-medium);
}

.pageAnniversary .greeting {
	overflow: hidden;
	background: var(--color-bg2);
}
.pageAnniversary .greeting__heading {
	font-size: var(--font-md);
	font-weight: var(--font-medium);
}
.pageAnniversary .greeting__text {
	margin-top: 30px;
	font-size: var(--font-sm);
	font-weight: var(--font-medium);
	line-height: var(--line-loose);
}
.pageAnniversary .greeting__name {
	margin-top: 20px;
	text-align: right;
	font-size: var(--font-md);
	font-weight: var(--font-medium);
}
.pageAnniversary .brandVideo,
.pageAnniversary .staff__video {
	position: relative;
}
.pageAnniversary .brandVideo::after,
.pageAnniversary .staff__video::after {
	content: url(../images/anniversary/play.svg);
	pointer-events: none;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
}
.pageAnniversary .brandVideo::after {
	top: calc(50% - 21px);
	width: 46px;
	height: 46px;
}
.pageAnniversary .staff__video::after {
	top: 50%;
	width: 40px;
	height: 40px;
}
.pageAnniversary .brandVideo.active::after,
.pageAnniversary .staff__video.active::after {
	display: none;
}

/* スタッフ紹介 */
.pageAnniversary .staff__heading {
	text-align: center;
	font-size: var(--font-xxl);
	font-weight: var(--font-medium);
	letter-spacing: var(--letter-wide);
	line-height: var(--line-normal);
	color: var(--color-primary);
}
.pageAnniversary .staff__heading small {
	position: relative;
	display: inline-block;
	margin-bottom: 10px;
	font-size: var(--font-lg);
}
.pageAnniversary .staff__heading small::before,
.pageAnniversary .staff__heading small::after {
	content: "";
	position: absolute;
	top: 0;
	display: inline-block;
	width: 2px;
	height: 32px;
	background: var(--color-primary);
}
.pageAnniversary .staff__heading small::before {
	left: -20px;
	transform: rotate(-25deg);
	transform-origin: top left;
}
.pageAnniversary .staff__heading small::after {
	right: -20px;
	transform: rotate(25deg);
	transform-origin: top right;
}

.pageAnniversary .staff__list {
	position: relative;
	margin-top: 20px;
}

.pageAnniversary .staff__item {
	overflow: hidden;
	padding: 28px 20px;
	background: var(--color-bg3);
}
.pageAnniversary .staff__item:nth-of-type(2) {
	background: var(--color-bg4);
}
.pageAnniversary .staff__item:nth-of-type(3) {
	background: var(--color-bg5);
}
.pageAnniversary .staff__item:nth-of-type(4) {
	background: var(--color-bg6);
}

.pageAnniversary .staff__copy {
	font-size: var(--font-lg);
	font-weight: var(--font-bold);
	letter-spacing: var(--letter-wide);
	line-height: var(--line-normal);
}

.pageAnniversary .staff__card {
	position: relative;
	margin-top: 14px;
	border-radius: 30px;
}
.pageAnniversary .staff__picture img {
	width: 100%;
	object-fit: cover;
}
.pageAnniversary .staff__info {
	position: absolute;
	top: 20%;
	left: 5%;
	min-width: 152px;
	padding: 18px 20px;
	border-top: solid 4px var(--color-primary);
	background: rgba(255, 255, 255, 0.8);
}
.pageAnniversary .staff__info--right {
	left: auto;
	right: 5%;
}
.pageAnniversary .staff__position {
	font-size: var(--font-md);
	font-weight: var(--font-medium);
	letter-spacing: var(--letter-wide);
}
.pageAnniversary .staff__name {
	font-size: var(--font-xxl);
	font-weight: var(--font-medium);
	letter-spacing: var(--letter-wide);
	line-height: var(--line-tight);
}

.pageAnniversary .staff__comment {
	margin-top: 14px;
	font-size: var(--font-sm);
	font-weight: var(--font-regular);
	letter-spacing: var(--letter-tight);
	line-height: var(--line-relaxed);
}

.pageAnniversary .staff__video {
	text-align: center;
}
.pageAnniversary .staff__video video {
	width: 100%;
	aspect-ratio: 320 / 180;
}

.pageAnniversary .staff__recruit {
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	margin-top: 8px;
	padding: 10px 30px;
	background: var(--color-bg7);
}

.pageAnniversary .logo__eyes {
	animation: blink-eyes 4s infinite;
}
.pageAnniversary .logo__eyelids {
	visibility: hidden;
	animation: blink-eyelids 4s infinite;
}

@keyframes blink-eyes {
	0% {
		visibility: visible;
	}
	5% {
		visibility: hidden;
	}
	19% {
		visibility: hidden;
	}
	20% {
		visibility: visible;
	}
	100% {
		visibility: visible;
	}
}
@keyframes blink-eyelids {
	0% {
		visibility: hidden;
	}
	5% {
		visibility: hidden;
	}
	18% {
		visibility: visible;
	}
	19% {
		visibility: hidden;
	}
	100% {
		visibility: hidden;
	}
}

@media (min-width: 841px) {
	.pageAnniversary {
		--container-width: 100vw;
		position: relative;
	}

	.pageAnniversary .stMain {
		margin-top: calc(var(--header-height) + var(--globalNavi-height));
	}

	.pageAnniversary .stSection {
		padding-top: 60px;
		padding-bottom: 60px;
	}

	.pageAnniversary br.sp {
		display: none;
	}

	.pageAnniversary br.pc {
		display: inline;
	}

	.pageAnniversary .top {
		position: relative;
	}

	.pageAnniversary .button--large {
		min-width: 320px;
		height: 54px;
		border-radius: 14px;
		font-size: var(--font-lg);
	}

	.pageAnniversary .pageAnniversary__footer__navi {
		flex-direction: row;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.pageAnniversary
		.pageAnniversary__footer__navi
		.stHeaderElement__freedialNum {
		margin-top: 0.3em;
		font-size: var(--font-4xl);
		font-weight: var(--font-semibold);
		letter-spacing: var(--letter-wide);
	}
	.pageAnniversary
		.pageAnniversary__footer__navi
		.stHeaderElement__freedialCap {
		position: relative;
		top: 0.2em;
		padding-left: 28px;
		font-size: var(--font-sm);
		font-weight: var(--font-medium);
		letter-spacing: var(--letter-wide);
		text-align: center;
	}

	.pageAnniversary .swiper-slide {
		width: 214px;
	}

	.pageAnniversary .swiper-slide img {
		width: 214px;
		height: 140px;
	}

	.pageAnniversary .mv__main img {
		height: 790px;
	}

	.pageAnniversary .about {
		position: absolute;
		top: 50%;
		right: 50%;
		transform: translate(95%, -49%);
	}
	.pageAnniversary .about__heading {
		font-weight: var(--font-semibold);
	}
	.pageAnniversary .about__text {
		margin-top: 40px;
		font-size: var(--font-md);
		line-height: var(--line-relaxed);
		white-space: nowrap;
	}

	.pageAnniversary .brandWrapper {
		padding: 15px 20px;
	}
	.pageAnniversary .brand {
		padding-top: 40px;
		padding-bottom: 40px;
		border-image: url(../images/anniversary/border.svg) 40 / 16px 0 repeat;
	}
	.pageAnniversary .brand .stContainer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 30px;
		max-width: 1000px;
	}
	.pageAnniversary .brand__inner {
		text-align: left;
	}
	.pageAnniversary .brand__text {
		line-height: var(--line-loose);
	}
	.pageAnniversary .brandVideo {
		position: relative;
		margin-top: 0;
	}
	.pageAnniversary .brandVideo::after {
		top: calc(50% - 24px);
		width: 58px;
		height: 58px;
	}
	.pageAnniversary .brandVideo__caption {
		position: absolute;
		left: -17em;
		bottom: 0;
	}

	.pageAnniversary .greeting .stContainer {
		max-width: 930px;
	}
	.pageAnniversary .greeting__heading {
		font-size: var(--font-xxl);
		font-weight: var(--font-semibold);
	}
	.pageAnniversary .greeting__text {
		font-size: var(--font-md);
	}
	.pageAnniversary .greeting__name {
		font-size: var(--font-xxl);
		font-weight: var(--font-semibold);
	}

	.pageAnniversary .staff__heading {
		font-weight: var(--font-semibold);
		line-height: var(--line-loose);
	}
	.pageAnniversary .staff__heading small {
		font-size: var(--font-xxl);
	}

	.pageAnniversary .staff__heading small::before,
	.pageAnniversary .staff__heading small::after {
		top: -3px;
		width: 2px;
		height: 50px;
	}
	.pageAnniversary .staff__heading small::before {
		left: -50px;
	}
	.pageAnniversary .staff__heading small::after {
		right: -50px;
	}

	.pageAnniversary .staff__list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 36px;
	}

	.pageAnniversary .staff__item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 10px;
	}
	.pageAnniversary .staff__copy {
		font-size: var(--font-xxl);
	}
	.pageAnniversary .staff__info {
		min-width: 200px;
		padding: 24px 40px;
		border-top-width: 6px;
	}
	.pageAnniversary .staff__picture {
		margin-top: 20px;
	}
	.pageAnniversary .staff__position {
		font-size: var(--font-lg);
		line-height: var(--line-normal);
	}
	.pageAnniversary .staff__name {
		font-size: var(--font-3xl);
		line-height: var(--line-normal);
	}
	.pageAnniversary .staff__comment {
		margin-top: 20px;
		font-size: var(--font-md);
		font-weight: var(--font-medium);
	}
	.pageAnniversary .staff__video::after {
		width: 46px;
		height: 46px;
	}

	.pageAnniversary .staff__recruit {
		margin-top: 26px;
		padding: 14px 30px;
	}
	.pageAnniversary .staff__recruit .button {
		width: 450px;
		padding-top: 0.2em;
		font-size: var(--font-md);
	}
}

@media (min-width: 1201px) {
	.pageAnniversary {
		--font-xs: 0.75rem; /* 12px */
		--font-sm: 0.9375rem; /* 15px */
		--font-md: 1.0625rem; /* 17px */
		--font-lg: 1.25rem; /* 20px */
		--font-xl: 1.375rem; /* 22px */
		--font-xxl: 1.5rem; /* 24px */
		--font-3xl: 1.75rem; /* 28px */
		--font-4xl: 2.25rem; /* 36px */
	}

	.pageAnniversary .about {
		transform: translate(108%, -49%);
	}

	.pageAnniversary .staff__item {
		padding: 40px 60px;
	}
	.pageAnniversary .staff__picture img {
		border-radius: 40px;
	}
}

@media (min-width: 2241px) {
	.pageAnniversary .mv__main img {
		height: auto;
	}
}
