@charset "UTF-8";

/* variable
******************************* */
:root {
	--fansite-red: #E71A0F;
	--content-width-pc: 1280px;
	--content-padding-pc: 4.6rem;
	--content-padding-sp: 10.256vw;
}

/* common - content
******************************* */
.p-fansite-content {
	background-color: #FEF6EA;
	overflow: hidden;
}
@media screen and (min-width: 560px) {
	.p-fansite-content {
		position: relative;
	}
}

.p-fansite-content__inner {
	position: relative;
	max-width: var(--content-width-pc);
	margin-inline: auto;
}

.p-fansite-content__inner::before,
.p-fansite-content__inner::after {
	content: '';
	width: 499.49vw;
	height: 152vw;
	background-color: #FCEBD2;
	position: absolute;
	left: 50%;
	z-index: 0;
}
@media screen and (min-width: 560px) {
	.p-fansite-content__inner::before,
	.p-fansite-content__inner::after {
		width: 5000px;
		height: 817px;
	}
}

.p-fansite-content__inner::before {
	top: -60px;
	transform-origin: 0 0;
	transform: translateX(calc(-50% + 150vw)) rotate(40deg);
}
@media screen and (min-width: 560px) {
	.p-fansite-content__inner::before {
		top: -630px;
		/* top: -49.22vw; */
		transform: translateX(calc(-50% + 850px)) rotate(40deg);
		/* transform: translateX(calc(-50% + 66.4vw)) rotate(40deg); */
	}
}

.p-fansite-content__inner::after {
	top: 500px;
	transform-origin: 100% 100%;
	transform: translateX(calc(-50% + 850px)) rotate(-40deg);
}
@media screen and (min-width: 560px) {
	.p-fansite-content__inner::after {
		top: 500px;
		transform-origin: 100% 100%;
		transform: translateX(calc(-50% + 850px)) rotate(-40deg);
	}
}

/* 背景の要素に隠れてしまう要素に指定 */
.p-fansite-layer-item {
	position: relative;
	z-index: 1;
}

/* common - text
******************************* */
.p-fansite-text {
	font-size: 1.6rem;
	line-height: 1.75;
	font-weight: normal;
}
@media screen and (min-width: 560px) {
	.p-fansite-text {
		font-size: 1.8rem;
	}
}

.p-fansite-text--large {
	font-size: 1.6rem;
	line-height: 1.75;
	font-weight: normal;
}
@media screen and (min-width: 560px) {
	.p-fansite-text--large {
		font-size: 1.8rem;
	}
}

.p-fansite-text--small {
	font-size: 1.4rem;
	line-height: 1.643;
	font-weight: normal;
}
@media screen and (min-width: 560px) {
	.p-fansite-text--small {
		font-size: 1.6rem;
		line-height: 1.75;
	}
}

/* common - title
******************************* */
.p-fansite-title1 {
	display: inline-block;
	margin-inline: auto;
	color: #FFF;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
	background-color: var(--fansite-red);
	border-radius: 32px;
}
@media screen and (max-width: 559px) {
	.p-fansite-title1 {
		padding: 6px min(7.7vw, 30px);
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-title1 {
		padding: 9px 48px 8px;
		font-size: 2rem;
	}
}

.p-fansite-title2 {
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
@media screen and (min-width: 560px) {
	.p-fansite-title2 {
		font-size: 3.2rem;
	}
}

/* common - button
******************************* */
.p-fansite-button {
	position: relative;
	width: 100%;
	padding: 14px 20px;
	color: var(--fansite-red);
	font-size: 1.4rem;
	font-weight: bold;
	text-align: center;
	background-color: #FFF;
	border: 2px solid var(--fansite-red);
	border-radius: 14px;
	overflow: hidden;
	transition: 0.3s;
}
@media screen and (min-width: 560px) {
	.p-fansite-button {
		padding: 2.4rem 2.8rem 2.3rem;
		font-size: 1.6rem;
	}

	.p-fansite-button:hover {
		color: #FFF;
		background-color: var(--fansite-red);
	}

	.p-fansite-button:hover::after {
		opacity: 1;
	}
}

.p-fansite-button::before,
.p-fansite-button::after {
	content: '';
	display: block;
	width: 8px;
	height: 12px;
	position: absolute;
	top: 50%;
	right: 6%;
	transform: translateY(-50%);
	transition: 0.3s;
}

.p-fansite-button::before {
	mask: url(/assets/images/icon/icon_arrow_red.svg) no-repeat center / contain;
	background: var(--fansite-red);
	z-index: 0;
}

.p-fansite-button::after {
	background: url(/assets/images/icon/icon_arrow_white.svg) no-repeat center / contain;
	z-index: 1;
	opacity: 0;
}

.p-fansite-button > span {
	display: block;
	font-size: 1.2rem;
	font-weight: normal;
}
@media screen and (min-width: 560px) {
	.p-fansite-button > span {
		font-size: 1.4rem;
	}
}

/* common - button group
******************************* */
.p-fansite-button-group {
	display: grid;
	gap: 20px 10px;
	margin-inline: auto;
}
@media screen and (min-width: 560px) {
	.p-fansite-button-group {
		grid-template-columns: repeat(2, 1fr);
		gap: 2.34vw 3.125vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-button-group {
		gap: 30px 40px;
	}
}

/* common - section
******************************* */
.p-fansite-section {
	position: relative;
	width: 100%;
}

.p-fansite-section--over {
	width: 100%;
	padding-inline: 10.26vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-section--over {
		position: relative;
		padding-inline: 0;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-section--over {
		width: 100vw;
		margin-left: calc((100vw - var(--content-width-pc)) / -2);
	}
}

.p-fansite-section__inner {
	width: 100%;
	margin-inline: auto;
}
@media screen and (min-width: 560px) {
	.p-fansite-section__inner {
		max-width: calc(760px + (3.125vw * 2));
		padding-inline: 3.125vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-section__inner {
		max-width: calc(760px + (40px * 2));
		padding-inline: 40px;
	}
}

.p-fansite-section__inner--wide {
	max-width: calc(1280px + (4.6rem * 2));
}
@media screen and (min-width: 560px) {
	.p-fansite-section__inner--wide {
		padding-inline: 4.6rem;
	}
}

/* common - breadcrumb
******************************* */
.p-fansite-breadcrumb {
	max-width: 1200px;
	width: 100%;
  margin: 0 auto;
	position: absolute;
	z-index: 4;
}
@media screen and (max-width: 559px) {
	.p-fansite-breadcrumb {
		bottom: 0;
		left: 0;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-breadcrumb {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

.p-fansite-breadcrumb .c-breadcrumb {
	background-color: transparent;
}

/* about
******************************* */
.p-fansite-section--about {
	z-index: 3;
}
.p-fansite-section--about .p-fansite-section__inner {
	padding-top: 64px;
}
@media screen and (min-width: 560px) {
	.p-fansite-section--about .p-fansite-section__inner {
		padding-top: 124px;
	}
}

.p-fansite-about-title {
	display: flex;
	flex-direction: column;
	font-weight: bold;
	text-align: center;
}

.p-fansite-about-title__sub {
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.4;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-title__sub {
		font-size: 2.6rem;
	}
}

.p-fansite-about-title__main {
	margin-inline: auto;
	text-align: center;
}
@media screen and (max-width: 559px) {
	.p-fansite-about-title__main {
		margin-top: 15px;
		width: 88.46vw;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-about-title__main {
		max-width: calc(845px + 2.5vw);
		width: 67.66vw;
		padding-left: 2.5vw;
	}
}
@media screen and (min-width: 1281px) {
	.p-fansite-about-title__main {
		padding-left: 32px;
	}
}

.p-fansite-about-lead {
	margin-top: 20px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-lead {
		margin-top: 24px;
		font-size: 2.6rem;
	}
}

.p-fansite-slide-kv-wrapper {
	margin-top: 40px;
	width: 100%;
	transition-timing-function: linear !important;
}
@media screen and (min-width: 560px) {
	.p-fansite-slide-kv-wrapper {
		margin-top: 75px;
		width: 100vw;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-slide-kv-wrapper {
		margin-left: calc(var(--content-padding-pc) * -1);
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-slide-kv-wrapper {
		margin-left: calc((100vw - var(--content-width-pc)) / -2);
	}
}

.p-fansite-slide-kv {
	margin-left: -65.38vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-slide-kv {
		margin-left: -12.34vw;
	}
}

.p-fansite-slide-kv .swiper-wrapper {
	transition-timing-function: linear;
}

.p-fansite-slide-kv .swiper-slide {
	width: 82.1vw;
	padding-inline: 2.56vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-slide-kv .swiper-slide {
		width: 41.5625vw;
		padding-inline: 1.25vw;
	}
}

.p-fansite-slide-kv__image {
	font-size: 0;
	border-radius: 20px;
	overflow: hidden;
}

.p-fansite-slide-kv__image img {
	width: 100%;
}

.p-fansite-about-text {
	position: relative;
	padding-block: 30.77vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-text {
		padding-block: 136px;
	}
}

.p-fansite-about-text .p-fansite-text--large {
	position: relative;
	font-size: 1.8rem;
	line-height: 2;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-text .p-fansite-text--large {
		font-size: 2rem;
	}
}

.p-fansite-about-illust {
	position: absolute;
	z-index: 0;
}

.p-fansite-about-illust1 {
	width: 85%;
	top: -35.9vw;
	left: -39.49%;
}
@media screen and (min-width: 560px) and (max-width: 1280px) {
	.p-fansite-about-illust1 {
		width: 34.375vw;
		top: -30px;
		left: -8.28vw;
	}
}
@media screen and (min-width: 1281px) {
	.p-fansite-about-illust1 {
		width: 440px;
		top: -30px;
		left: -106px;
	}
}

.p-fansite-about-illust2 {
	width: 61%;
	top: 74.36vw;
	right: -25.64vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-illust2 {
		width: 40.86vw;
		top: 24.77vw;
		right: -16.41vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-about-illust2 {
		width: 523px;
		top: 317px;
		right: -210px;
	}
}

@media screen and (max-width: 559px) {
	.p-fansite-about-illust3 {
		width: 26.4%;
		top: -3.59vw;
		right: 2.3vw;
		z-index: 1;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-about-illust3 {
		width: 25.16vw;
		top: -18px;
		right: 7.5vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-about-illust3 {
		width: 322px;
		top: -18px;
		right: 96px;
	}
}

.p-fansite-about-illust4 {
	width: 59.74%;
	left: -14.87vw;
	bottom: -2.564vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-about-illust4 {
		width: 47.97vw;
		left: -24.38vw;
		bottom: -2.34vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-about-illust4 {
		width: 614px;
		bottom: -30px;
		left: -312px;
	}
}

@media screen and (max-width: 559px) {
	.p-fansite-about-illust5 {
		width: 22.3vw;
		top: 3.59vw;
		left: -5.9vw;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-about-illust5 {
		width: 37.19vw;
		top: -10.55vw;
		right: -18.75vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-about-illust5 {
		width: 476px;
		top: -135px;
		right: -240px;
	}
}

@media screen and (max-width: 559px) {
	.p-fansite-about-illust6 {
		display: none;
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-about-illust6 {
		width: 9.45vw;
		bottom: 2.1vw;
		left: 5.7vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-about-illust6 {
		width: 121px;
		bottom: 27px;
		left: 73px;
	}
}


/* event
******************************* */
.p-fansite-section--event {
	position: relative;
	padding-block: 66px;
	text-align: center;
	background-color: #F8D462;
	z-index: 2;
}
@media screen and (min-width: 560px) {
	.p-fansite-section--event {
		padding-block: 88px;
	}
}

@media screen and (max-width: 599px) {
	.p-fansite-event-text-wrap {
		width: 111%;
		margin-inline: -5.5%;
	}
}

.p-fansite-event-product {
	position: relative;
	width: 79.49vw;
	height: 69.23vw;
	margin-block: -4.1vw -1.54vw;
	margin-inline: auto;
	border-radius: 50%;
	z-index: 0;
}
@media screen and (min-width: 560px) {
	.p-fansite-event-product {
		width: 524px;
		height: 454px;
		margin-top: -30px;
	}
}

.p-fansite-event-product::after {
	content: '';
	display: block;
	width: 69.23vw;
	height: 69.23vw;
	background-color: #FFF;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
}
@media screen and (min-width: 560px) {
	.p-fansite-event-product::after  {
		width: 454px;
		height: 454px;
	}
}

.p-fansite-event-product img {
	width: 100%;
	aspect-ratio: 640 / 426;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4));
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
}
@media screen and (min-width: 560px) {
	.p-fansite-event-product img {
		width: 524px;
		aspect-ratio: 640 / 426;
	}
}

/* history
******************************* */
.p-fansite-section--history {
	position: relative;
	z-index: 1;
}
.p-fansite-section--history .p-fansite-section__inner {
	position: relative;
	padding-block: 31.28vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-section--history .p-fansite-section__inner {
		max-width: var(--content-width-pc);
		padding-block: 138px;
	}
}

@media screen and (max-width: 559px) {
	.p-fansite-section--history .p-fansite-text {
		width: 110%;
		margin-inline: -5%;
	}
}

.p-fansite-history-slide-wrapper {
	width: 100vw;
}
@media screen and (max-width: 559px) {
	.p-fansite-history-slide-wrapper {
		margin-top: 9.74vw;
		margin-left: calc((100vw - 100%) / -2);
	}
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide-wrapper {
		margin-top: 3.6vw;
		margin-left: -3.125vw;
	}
}
@media screen and (min-width: 1280px) {
	.p-fansite-history-slide-wrapper {
		margin-top: 46px;
		margin-left: calc((100vw - var(--content-width-pc) + (40px * 2)) / -2);
	}
}

.p-fansite-history-slide {
	padding-inline: 11.282vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide {
		padding-inline: 8.359vw 36.1vw;
	}
}

.p-fansite-history-slide .swiper-slide {
	width: 77.44vw;
	padding-inline: 4.1vw;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide .swiper-slide {
		width: 27.81vw;
		padding-inline: 2.1875vw;
	}
}

.p-fansite-history-slide-control {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 120px;
	column-gap: 12px;
	margin-top: 6.67vw;
	margin-inline: auto;
	font-size: 0;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide-control {
		width: 128px;
		column-gap: 16px;
		margin-top: 80px;
	}
}

.p-fansite-history-slide-control__button {
	position: relative;
	width: 54px;
	height: 54px;
	background-color: #FFF;
	border: 2px solid var(--fansite-red);
	border-radius: 50%;
	overflow: hidden;
	transition: 0.3s;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide-control__button {
		width: 56px;
		height: 56px;
	}
}

.p-fansite-history-slide-control__button::before,
.p-fansite-history-slide-control__button::after {
	content: '';
	width: 8px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: 50%;
	/* transform: translate(-50%, -50%); */
	transition: 0.2s;
}

.p-fansite-history-slide-control__button::before {
	mask: url('/assets/images/common/icon/icon_arrow_red.svg') no-repeat center / contain;
	background-color: var(--fansite-red);
	z-index: 0;
}

.p-fansite-history-slide-control__button::after {
	background: url('/assets/images/common/icon/icon_arrow_white.svg') no-repeat center / contain;
	z-index: 0;
	opacity: 0;
}

@media screen and (min-width: 560px) {
	.p-fansite-history-slide-control__button:hover {
		background-color: var(--fansite-red);
	}

	.p-fansite-history-slide-control__button:hover::after {
		opacity: 1;
	}
}

.p-fansite-history-slide-control__button.swiper-button-disabled {
	background-color: #E3E3E3;
	border-color: #E3E3E3;
	pointer-events: none;
}

.p-fansite-history-slide-control__button.swiper-button-disabled::before {
	background: url('/assets/images/common/icon/icon_arrow_white.svg') no-repeat center / contain, #FFF;
}

.p-fansite-history-slide-control__button--prev::before,
.p-fansite-history-slide-control__button--prev::after {
	transform: translate(-50%, -50%) scale(-1, 1);
}

.p-fansite-history-slide-control__button--next::before,
.p-fansite-history-slide-control__button--next::after {
	transform: translate(-50%, -50%);
}

.p-fansite-history-slide__item-img img {
	width: 100%;
}

.p-fansite-history-slide__item-date {
	display: block;
	margin-top: 14px;
	font-size: 1.2rem;
	font-weight: bold;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide__item-date {
		margin-top: 20px;
		font-size: 1.4rem;
	}
}

.p-fansite-history-slide__item-title {
	display: block;
	margin-top: 5px;
	font-size: 1.9rem;
	font-weight: bold;
	line-height: 1.26;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide__item-title {
		margin-top: 8px;
		font-size: 2.2rem;
	}
}

.p-fansite-history-slide__item-text {
	margin-top: 7px;
	display: block;
	font-size: 1.4rem;
	line-height: 1.65;
}
@media screen and (min-width: 560px) {
	.p-fansite-history-slide__item-text {
		margin-top: 12px;
		font-size: 1.6rem;
		line-height: 1.4735;
	}
}


/* contact
******************************* */
.p-fansite-section--contact {
	position: relative;
	padding: 60px 10.26vw;
	background-color: #FFF;
	z-index: 1;
}
@media screen and (min-width: 560px) {
	.p-fansite-section--contact {
		padding: 70px 80px 80px;
	}
}

.p-fansite-contact-title {
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
}
@media screen and (min-width: 560px) {
	.p-fansite-contact-title {
		font-size: 2.4rem;
	}
}

@media screen and (max-width: 559px) {
	.p-fansite-contact-reception {
		width: calc(100% + 1em);
		margin-inline: -0.5em;
	}
}

.p-fansite-contact-note {
	margin-top: 10px;
}
@media screen and (min-width: 560px) {
	.p-fansite-contact-note {
		text-align: center;
	}
}

@media screen and (max-width: 559px) {
	.u-palt-sp {
		font-feature-settings: 'palt';
	}
}