@charset "UTF-8";
/* CSS Document */


/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
:root {
	--blue: #134199;
	--blue-deep: #03226b;
	--blue-mid: #1e47a5;
	--gray: #e8e9eb;
	--gray-soft: #f2f2f3;
	--text: #134199;
	--white: #ffffff;
}

html {
	scroll-behavior: smooth;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
	font-size: 12px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	color: var(--text);
	background: var(--white);
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}
ul { list-style: none; margin: 0; padding: 0;}
a { color: inherit; text-decoration: none;}

.anim {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease-out, transform .7s ease-out;
}
.anim.on {
	opacity: 1;
	transform: none;
}

.containerWrap {
	max-width: 1120px;
	margin: 0 auto;
	padding: min(10vw, 80px) min(5vw, 40px);
	box-sizing: border-box;
}

.secHead {
	position: relative;
	margin-bottom: min(8vw, 48px);
}
.secHead h2 {
  font-family: "Inter", sans-serif;
	font-weight: 700;
	font-size: min(7vw, 42px);
	letter-spacing: 0.04em;
	line-height: 1.25;
}
.secHead h2 span {
	display: block;
}
.secHead h2 small {
	display: block;
	margin-top: 0.4em;
	font-size: 0.42em;
	letter-spacing: 0.08em;
	font-weight: 500;
}
.secHead h2.tourTitle {
	width: min(72vw, 480px);
	line-height: 1;
}
.secHead h2.tourTitle img {
	display: block;
	width: 100%;
	height: auto;
}
.sparkles {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: min(1vw, 10px);
	align-items: flex-start;
}
.sparkles img {
	width: min(6vw, 34px);
	height: auto;
}
.sparkles img:nth-child(2) {
	width: min(5vw, 26px);
	margin-top: min(7vw, 44px);
}
.sparkles img:nth-child(3) {
	width: min(5.5vw, 30px);
	margin-top: min(3vw, 20px);
}

.listAsterisk,
.listDisk,
.listDash {
	list-style: none;
	padding-left: 0;
	font-size: min(3.2vw, 14px);
	line-height: 1.7;
}
.listAsterisk > li,
.listDisk > li {
	padding-left: 1.2em;
	text-indent: -1.2em;
	margin-bottom: 0.15em;
}
.listAsterisk > li:before {
	content: "※";
	margin-right: 0.15em;
}
.listDisk > li:before {
	content: "・";
	margin-right: 0.1em;
}
.listDash {
	margin: 0.4em 0 0.6em 0.2em;
}
.listDash > li {
	padding-left: 1em;
	text-indent: -1em;
	margin-bottom: 0.2em;
}
.listDash > li:before {
	content: "-";
	margin-right: 0.35em;
}

.btn a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font-size: min(3.2vw, 13px);
	font-weight: 700;
	letter-spacing: 0.04em;
	box-sizing: border-box;
  min-width: 240px;
  width: fit-content;
  margin: 0 auto;
}

@media screen and (min-width: 821px) {
	.sp { display: none !important;}
	a { transition: opacity 0.3s ease-out;}
	a:hover { opacity: 0.55;}
}
@media screen and (max-width: 820px) {
	.pc { display: none !important;}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Main Visual

//////////////////////////////////////////////////////////////////////////////// */
.mainVisual {
	position: relative;
	overflow: hidden;
	height: max(600px, min(100vh, 68vw));
	height: max(600px, min(100svh, 68vw));
	background: #111;
	line-height: 0;
}
/* 背景は表示されるたびに5秒（切り替えまで）かけて 1.1 → 1 にズームアウト */
.mainVisual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: url(../images/mv_regu.jpg) center / cover no-repeat;
	will-change: transform;
}
/* 切り替え時の暗転（暗転中に表示を入れ替えてアニメーションを開始し、明けるときには動きが安定している） */
.mainVisual::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 10;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease;
}
.mainVisual.is-black::after {
	opacity: 1;
}
/* 初回盤へ切り替えるときは、初回盤の背景を敷いて自然につなげる */
.mainVisual.is-to-limi::after {
	background: #ddd url(../images/mv_limi_bg.jpg) center / cover no-repeat;
}
.mainVisual:not(.is-limi)::before {
	animation: mvBgZoom 6s ease-out forwards;
}
@keyframes mvBgZoom {
	from { transform: scale(1.2); }
	to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.mainVisual:not(.is-limi)::before { animation: none; }
}
.mvTitle {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mvTitle img {
	width: min(38vw, 62vh);
	height: auto;
}
/* 2つのビジュアルで同じ位置（右端は切り替え後タイトルのベタ右端に揃える） */
.mainVisual .scroll {
	position: absolute;
	right: 3.7vw;
	bottom: 2.6%;
	z-index: 3;
	color: #fff;
  font-family: "Inter", sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	line-height: 1.4;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mainVisual .scroll::after {
	content: "";
	flex: none;
	width: min(3vw, 15px);
  aspect-ratio: 15/14;
	background: url(../images/scroll_arrow.png) center / contain no-repeat;
	animation: scrollArrow 1.8s ease-in-out infinite;
}
@keyframes scrollArrow {
	0% { transform: translateY(-6px); opacity: 0; }
	35% { opacity: 1; }
	70% { transform: translateY(6px); opacity: 1; }
	100% { transform: translateY(10px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mainVisual .scroll::after { animation: none; }
}

@media screen and (max-width: 820px) {
	/* タイトルと切り替え後のビジュアルを同じセルに重ね、高い方に合わせる */
	.mainVisual {
		display: grid;
		grid-template: minmax(100vh, auto) / 100%;
		grid-template: minmax(100svh, auto) / 100%;
		height: auto;
	}
	.mvTitle {
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		padding: 5vw 0 16vw;
	}
	.mvTitle img {
		width: 78vw;
	}
	.mainVisual .scroll {
		flex-direction: row-reverse;
		left: 50%;
		right: auto;
		bottom: 5vw;
		transform: translateX(-50%);
	}
}

/* 切り替えで表示するメインビジュアル（デザイン 1440×980 基準、MVの高さに対する比率で配置） */
.mainVisual {
	--mvh: max(600px, min(100vh, 68vw));
}
@supports (height: 100svh) {
	.mainVisual {
		--mvh: max(600px, min(100svh, 68vw));
	}
}
.mainVisual.is-limi > .scroll {
	opacity: 0;
}
.mvLimi {
	--loop-gap: calc(var(--mvh) * 0.02);
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #ddd url(../images/mv_limi_bg.jpg) center / cover no-repeat;
	opacity: 0;
	visibility: hidden;
}
.mainVisual.is-limi .mvLimi {
	opacity: 1;
	visibility: visible;
}
.mvLoop {
	position: absolute;
	left: 0;
	right: 0;
	height: 24.4%;
	overflow: hidden;
}
.mvLoop--top {
	top: 3.2%;
}
.mvLoop--btm {
	top: 55.7%;
}
.mvLoopTrack {
	display: flex;
	width: max-content;
	height: 100%;
	/* メンバー全員が出そろうまで初回盤を表示するので、待ち時間が長くなりすぎない速さにする */
	animation: mvLoopX 34.3s linear infinite;
	will-change: transform;
}
/* 非表示中は止めて負荷を下げる */
.mainVisual:not(.is-limi) .mvLoopTrack {
	animation-play-state: paused;
}
.mvLoop--btm .mvLoopTrack {
	animation-direction: reverse;
}
.mvLoopSet {
	display: flex;
	gap: var(--loop-gap);
	height: 100%;
	/* 3セット並べ、1セット分の移動で継ぎ目なくループさせる */
	padding-right: var(--loop-gap);
}
.mvLoopSet img {
	display: block;
	flex: none;
	width: auto;
	height: 100%;
}
@keyframes mvLoopX {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-100% / 3)); }
}
@media (prefers-reduced-motion: reduce) {
	.mvLoopTrack { animation: none; }
}
/* タイトルは左寄せ、右側の余白は画像右端と同じ色のベタで伸ばす（左右の余白は揃える） */
.mvLimiTtl {
	--ttl-w: min(92.8vw, var(--mvh) * 1.365);
	position: absolute;
	top: 41.5%;
	left: 3.7vw;
	right: 3.7vw;
	display: flex;
	align-items: center;
	transform: translateY(-50%);
}
.mvLimiTtl::after {
	content: "";
	flex: 1;
	height: calc(var(--ttl-w) * 225 / 1339);
	/* 画像との継ぎ目に隙間が出ないよう少し潜らせる */
	margin-left: -2px;
	background: #144199;
}
.mvLimiBtm {
	position: absolute;
	left: 4.1vw;
	bottom: 2.6%;
	width: min(41.6vw, var(--mvh) * 0.612);
}
.mvLimiTtl picture {
	position: relative;
	z-index: 1;
	display: block;
	flex: none;
}
.mvLimiTtl img {
	display: block;
	width: var(--ttl-w);
	height: auto;
}
.mvLimiBtm img {
	display: block;
	width: 100%;
	height: auto;
}
.mvLimi .scroll {
	color: #144199;
}
.mvLimi .scroll::after {
	background-image: url(../images/scroll_arrow_b.png);
}

@media screen and (max-width: 820px) {
	/* SPデザイン（幅472基準）: 2段のグリッドを横に流す。縦長=1マス、is-wide=横2マス、is-big=2×2マス */
	.mvLimi {
		--loop-gap: 1.5vw;
		/* 1マスはメンバー写真（600×800）と同じ 3:4。mv_pic はマスに合わせてトリミング */
		--cell-h: 25.2vw;
		--cell-w: calc(var(--cell-h) * 3 / 4);
		position: relative;
		inset: auto;
		grid-area: 1 / 1;
		display: flex;
		flex-direction: column;
		gap: 3.4vw;
		padding: 5vw 0 12.5vw;
		box-sizing: border-box;
	}
	.mvLoop {
		position: relative;
		top: auto;
		flex: none;
		height: calc(var(--cell-h) * 2 + var(--loop-gap));
	}
	.mvLoopTrack {
		animation-duration: 25.7s;
	}
	.mvLoopSet {
		display: grid;
		grid-template-rows: repeat(2, var(--cell-h));
		grid-auto-columns: var(--cell-w);
		grid-auto-flow: column dense;
	}
	.mvLoopSet img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.mvLoopSet .is-wide {
		grid-column: span 2;
	}
	.mvLoopSet .is-big {
		grid-column: span 2;
		grid-row: span 2;
	}	.mvLimiTtl,
	.mvLimiBtm {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
		transform: none;
	}
	.mvLimiTtl {
		--ttl-w: 94.7vw;
		width: auto;
		margin: 0;
		padding: 0 2.65vw;
	}
	.mvLimiTtl::after {
		height: calc(var(--ttl-w) * 443 / 2129);
	}
	.mvLimiBtm {
		width: 79.4vw;
		margin: 0 0 0 1.7vw;
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Track List

//////////////////////////////////////////////////////////////////////////////// */
#track-list {
	position: relative;
	overflow: hidden;
	background: #f1f1f1;
	color: var(--blue);
}
#track-list::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: url(../images/track_bg.jpg) center / cover no-repeat;
	opacity: 0.2;
	filter: blur(12px);
	pointer-events: none;
	z-index: 0;
}
#track-list .containerWrap {
	position: relative;
	z-index: 1;
}
#track-list .discLabel {
  font-family: "Inter", sans-serif;
	font-size: min(3.4vw, 14px);
	letter-spacing: 0.1em;
	margin-bottom: 1em;
}

#track-list h3 {
  font-size: min(4vw, 18px);
  letter-spacing: 0.08em;
  margin-bottom: min(4vw, 20px);
}

.listWrap {
	display: flex;
	gap: min(5vw, 48px);
}
.listWrap > ul,
.listCol {
	flex: 1;
	min-width: 0;
}
.listCol {
	display: flex;
	flex-direction: column;
}
.listWrap li {
	font-size: min(3.4vw, 15px);
	font-weight: 500;
	letter-spacing: 0.02em;
	padding: 0.4em 0;
	border-bottom: 1px solid rgba(19, 65, 153, 0.85);
}
@media screen and (max-width: 820px) {
	.listWrap {
		flex-direction: column;
		gap: 0;
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Products / WebGL jackets

//////////////////////////////////////////////////////////////////////////////// */
.editionBlock {
  position: relative;
}
.editionBlock.limited {
	background: linear-gradient(180deg, #001f6d 0%, #144199 20%, #144199 100%);
	color: #fff;
}
.editionBlock.limited .secHead h2 {
	color: #fff;
}
.editionBlock.regular {
	background: #efecea;
	color: var(--blue);
}
.editionBlock::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/disc_info_bg.png") no-repeat center top / 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.editionBlock .containerWrap {
	max-width: none;
  position: relative;
  z-index: 1;
}
.editionBlock .secHead {
	max-width: calc(1120px - min(5vw, 40px) * 2);
	margin-left: auto;
	margin-right: auto;
}
.discLayout {
	--disc-gap: min(5vw, 56px);
	display: flex;
	align-items: flex-start;
	gap: var(--disc-gap);
}
.discImg {
	/* カラム幅と画面高さの小さい方でジャケット幅を決め、高さ（幅 × 1102/821）から縦中央へ固定 */
	--col-w: calc((100vw - min(5vw, 40px) * 2 - var(--disc-gap)) / 2);
	--jkt-w: min(var(--col-w), (100vh - 120px) * 821 / 1102);
	position: sticky;
	top: max(20px, calc(50vh - var(--jkt-w) * 0.6712));
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.editionBlock.limited .discImg {
	background-image: url(../images/jkt_limi_bg.jpg);
}
.editionBlock.regular .discImg {
	background-image: url(../images/jkt_regu_bg.jpg);
}
/* 枠の大きさは初回盤・通常盤で共通（sticky の縦中央計算と揃える）。ジャケットは比率を保って中に収める */
.jacketImg {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jkt-w);
	max-width: 100%;
	aspect-ratio: 821 / 1102;
	margin: 0 auto;
	padding: 10%;
	box-sizing: border-box;
}
.jacketStatic {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 18px 28px rgba(0,0,0,0.22));
}

.discList {
	flex: 1 1 0;
	min-width: 0;
}
.discContents {
	padding-top: min(2vw, 12px);
}
.discContents + .discContents {
	margin-top: min(12vw, 100px);
}
.discContents .type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: min(5.2vw, 28px);
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	margin-bottom: 0.35em;
}
.discContents .type span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	min-height: 28px;
	padding: 4px 14px;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.editionBlock.limited .discContents .type span {
	background: #fff;
	color: var(--blue);
}
.editionBlock.regular .discContents .type span {
	background: var(--blue);
	color: #fff;
}
.discContents .price {
	font-size: min(3.4vw, 15px);
	font-weight: 400;
  letter-spacing: 0.08em;
  padding-bottom: 1em;
  margin-bottom: 1.2em;
	border-bottom: 1px solid currentColor;
	opacity: 0.95;
}
.discContents .spec {
	font-size: min(3.2vw, 14px);
	margin-bottom: 1.2em;
}
.bonusBlock {
	margin-bottom: 2.4em;
}
.bonusHead {
	font-size: min(3.6vw, 16px);
	font-weight: 700;
	margin-bottom: 0.6em;
  letter-spacing: 0.08em;
}
.note {
	background: #fff;
	color: var(--blue);
	padding: min(3.8vw, 18px) min(4vw, 24px);
	border-radius: 5px;
}

@media screen and (max-width: 820px) {
	.discLayout {
		flex-direction: column;
		gap: 28px;
	}
	.discImg {
		position: relative;
		top: auto;
		flex: none;
		width: 100%;
		max-width: 320px;
		margin: 0 auto;
	}
	.jacketImg {
		width: 100%;
	}
	.discContents .type {
		font-size: 22px;
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Benefits

//////////////////////////////////////////////////////////////////////////////// */
#benefit {
	position: relative;
	overflow: clip;
	background: #f1f1f1;
	color: var(--blue);
}
#benefit::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: url(../images/benefits_bg.jpg) center / cover no-repeat;
	opacity: 0.2;
	filter: blur(12px);
	pointer-events: none;
	z-index: 0;
}
#benefit .containerWrap {
	position: relative;
	z-index: 1;
}
.benefitList {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: min(5vw, 36px) min(4vw, 28px);
}
.benefitList li {
	display: flex;
	flex-direction: column;
}
.benefitImage {
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 12px;
	aspect-ratio: 1 / 0.85;
}
.benefitImage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.benefitList .txtBox {
	text-align: center;
	line-height: 1.45;
	margin-bottom: 10px;
}
.benefitName {
	font-size: min(3.2vw, 13px);
	margin-bottom: 4px;
}
.benefitName span {
	font-size: 0.92em;
}
.benefitTxt {
	font-size: min(3.6vw, 15px);
	font-weight: 700;
}
.benefitList .btn {
	margin-top: auto;
}
.benefitList .btn a {
	min-width: 0;
	width: 100%;
	max-width: 240px;
}

@media screen and (max-width: 820px) {
	.benefitList {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}
	.benefitList .btn a {
		min-height: 40px;
		padding: 8px 10px;
		font-size: clamp(10px, 3vw, 12px);
		letter-spacing: 0.02em;
		text-align: center;
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Video

//////////////////////////////////////////////////////////////////////////////// */
.videoList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: min(6vw, 44px) min(4vw, 32px);
}
.videoList .thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 5px;
	background: #000;
}
.videoList .thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.videoList .play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(16vw, 72px);
	aspect-ratio: 1;
	border: 2px solid #fff;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	transform: translate(-50%, -50%);
	transition: background-color 0.3s ease;
}
/* 三角形は重心が左に寄って見えるので少し右へずらす */
.videoList .play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-style: solid;
	border-width: 0.6em 0 0.6em 1.0em;
	border-color: transparent transparent transparent #fff;
	font-size: min(3.4vw, 16px);
	transform: translate(-50%, -50%);
}
@media (hover: hover) {
	.videoList .thumb:hover img {
		transform: scale(1.05);
	}
	.videoList .thumb:hover .play {
		background-color: rgba(0, 0, 0, 0.5);
	}
}
.videoList p {
	margin-top: 12px;
	font-size: min(3.6vw, 14px);
	font-weight: 700;
	line-height: 1.6;
}
@media screen and (max-width: 820px) {
	.videoList {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	Campaign / Footer

//////////////////////////////////////////////////////////////////////////////// */
#campaign {
	background: #f3f3f4;
	color: var(--blue);
}
.campaignBox {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border-radius: 5px;
	padding: min(5vw, 36px) 0;
	margin-bottom: min(5vw, 40px);
	box-shadow: 0 8px 24px rgba(19, 65, 153, 0.06);
	text-align: center;
}
.campaignLeft,
.campaignRight {
	flex: 1;
	min-width: 0;
	padding: 0 min(4vw, 40px);
	box-sizing: border-box;
}
.campaignLeft {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-right: 1px solid rgba(19, 65, 153, 0.18);
}
.campaignRight {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.cTitle {
	width: 100%;
	max-width: 420px;
	margin: 0 0 1.8em;
	line-height: 0;
}
.cTitle img {
	width: 100%;
	height: auto;
	display: block;
}
.cLead {
	font-size: min(4vw, 20px);
	font-weight: 700;
	line-height: 1.6;
}
.cHead {
	display: block;
	width: 100%;
	box-sizing: border-box;
	font-size: min(3.8vw, 16px);
	font-weight: 700;
	margin: 0 0 0.8em;
	padding: 0.45em 1em;
	background: var(--blue);
	color: #fff;
	border-radius: 0;
	text-align: center;
}
.cTxt {
	font-size: min(3.4vw, 16px);
	margin-bottom: 0.8em;
  font-weight: bold;
}
.campaignBox .listAsterisk {
	padding-left: 0;
	text-align: center;
	width: 100%;
}
.campaignBox .listAsterisk > li {
	padding-left: 0;
	text-indent: 0;
}
.campaignBox .listAsterisk > li:before {
	margin-right: 0.15em;
}
.cDateHead {
	font-weight: 700;
	margin: 1em 0 0.4em;
	text-align: center;
	font-size: min(3.2vw, 14px);
}
.cDates {
	text-align: center;
	font-size: min(3.4vw, 16px);
	font-weight: 600;
}
.campaignPhoto {
	background: #f3f3f4;
}
.campaignPhoto img {
	width: 100%;
	height: auto;
	display: block;
}
/* IntersectionObserverは対象自身のclip-pathも考慮するため、clipは子要素に掛ける */
.clipReveal > * {
	clip-path: inset(50% 50% 50% 50%);
	transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.18, 1);
}
.clipReveal.on > * {
	clip-path: inset(0% 0% 0% 0%);
}
@media (prefers-reduced-motion: reduce) {
	.clipReveal > * {
		clip-path: none;
		transition: none;
	}
}

#footer {
	background: #f3f3f4;
	color: var(--blue);
}
#footer .pageTop {
	display: flex;
	justify-content: center;
	padding: min(10vw, 56px) min(5vw, 40px) 0;
}
#footer .pageTop a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: min(46vw, 220px);
	height: min(12vw, 50px);
	border-radius: 999px;
	background: var(--white);
	color: var(--blue);
	font-family: "Inter", sans-serif;
	font-size: min(3.2vw, 14px);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
}
#footer .pageTop a::after {
	content: "";
	width: min(3vw, 16px);
  aspect-ratio: 31/28;
	background: url(../images/pagetop_arrow.png) center / contain no-repeat;
	transition: transform 0.3s ease;
}
@media (hover: hover) {
	#footer .pageTop a:hover::after {
		transform: translateY(-3px);
	}
}
#footer .inBox {
	/* 左：メニュー＋コピーライト／右：ロゴ（コピーライトと下揃え） */
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"links logo"
		"credit logo";
	align-items: end;
	gap: 0 min(5vw, 40px);
	padding: min(12vw, 48px) min(5vw, 40px) min(8vw, 56px);
}
#footer .listLink {
	grid-area: links;
	align-self: start;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	list-style: none;
	padding: 0;
	font-size: min(3vw, 13px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
}
#footer .listLink a::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-left: 6px;
	vertical-align: 0;
	background: url(../images/ftr_arrow.png) center / contain no-repeat;
}
#footer .credit {
	grid-area: credit;
	margin-top: min(8vw, 32px);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1;
}
#footer .twiceLogo {
	grid-area: logo;
	line-height: 0;
}
#footer .twiceLogo img {
	width: min(14vw, 60px);
	height: auto;
}


.comingsoon {
  padding: min(6vw, 50px) 0 min(12vw, 80px);
  color: var(--blue);
}
.comingsoon p {
  text-align: center;
  font-size: min(5.2vw, 28px);
  font-weight: 800;
}

@media screen and (max-width: 820px) {
	.campaignBox {
		flex-direction: column;
		gap: 0;
		padding: min(6vw, 28px) 0;
	}
	.campaignLeft,
	.campaignRight {
		padding: 0 min(5vw, 24px);
	}
	.campaignLeft {
		border-right: 0;
		border-bottom: 1px solid rgba(19, 65, 153, 0.18);
		padding-bottom: min(5vw, 24px);
	}
	.campaignRight .cHead {
		margin-top: min(5vw, 24px);
	}
}