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


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

	Common

//////////////////////////////////////////////////////////////////////////////// */
@font-face {
  font-family: 'sns_ico';
  src:
    url('../fonts/sns_ico.ttf?z7sza2') format('truetype'),
    url('../fonts/sns_ico.woff?z7sza2') format('woff'),
    url('../fonts/sns_ico.svg?z7sza2#sns_ico') format('svg');
  font-weight: normal;
  font-style: normal;
}

i.snsIcon {
  font-family: 'sns_ico' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
	color: #000;
}

.icon-search:before { content: "\e908";}
.icon-arrow1_left:before { content: "\e90c";}
.icon-arrow1_bottom:before { content: "\e90d";}
.icon-arrow1_right:before { content: "\e90e";}
.icon-arrow1_top:before { content: "\e90f";}
.icon-arrow2_left:before { content: "\e910";}
.icon-arrow2_bottom:before { content: "\e911";}
.icon-arrow2_right:before { content: "\e912";}
.icon-arrow2_top:before { content: "\e913";}
.icon-link:before { content: "\e914";}
.icon-note:before { content: "\e915";}
.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}
.icon-wb:before { content: "\e90b";}
.icon-arrow3_top:before { content: "\ea3a";}
.icon-arrow3_right:before { content: "\ea3c";}
.icon-arrow3_bottom:before { content: "\ea3e";}
.icon-arrow3_left:before { content: "\ea40";}


html {
	scroll-behavior: smooth;
}
body {
  font-family: source-han-serif-japanese, serif;
  font-size: 12px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
}
ul { list-style: none;}

.anim {
	opacity: 0;
	transition: all .6s ease-out;
}
.anim.on {
	opacity: 1;
}

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


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

	Page

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

:root {
	--color-orange: #d45353;
	--color-orange-dark: #8d3b22;
	--color-white: #fff;
	--color-cream: #fffdf9;
	--color-black: #000;
	--font-serif: source-han-serif-japanese, serif;
	--font-display: modesto-condensed, serif;
}

body {
	color: var(--color-orange);
	background: var(--color-white);
}

.contentWrap {
	width: min(90%, 960px);
	margin: 0 auto;
}

.sectionTitle {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: center;
	color: var(--color-orange);
}

.btnWrap {
	text-align: center;
}

.btn {
	display: inline-block;
	min-width: min(78vw, 320px);
	padding: 0.95em 2.4em;
	border-radius: min(2vw, 10px);
	background: var(--color-orange) linear-gradient(90deg, #ffa200 40%, #ec3b34 90%);
	color: var(--color-white);
	font-size: clamp(13px, 2.6vw, 16px);
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
  box-shadow: 0px 8px 15px -6px rgba(0, 0, 0, 0.3);
/*  border: #fff solid 2px;*/
}

.fixBnr {
  position: fixed;
  bottom: 2vw;
  right: 0;
  line-height: 0;
  width: min(36vw, 200px);
  z-index: 10;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.fixBnr.is-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


@media screen and (max-width: 820px) {
  
  .fixBnr {
    bottom: 14vw;
  }
  
}


/* Hero
-------------------------------------------------- */

.ticker {
  position: relative;
  z-index: 4;
  background-color: #fff;
	font-family: var(--font-display);
  width: 100%;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  -webkit-text-size-adjust: 100%;
}
.ticker .tickerInr {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 20s linear 0s infinite;
}
.ticker .tickerTrack {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 6vw;
  line-height: 1.4;
  padding: 0 3vw;
  margin: 0;
}
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0);}
  100% { transform: translate3d(calc(-1 * var(--ticker-shift, 50%)), 0, 0);}
}

.hero {
	position: relative;
	overflow: hidden;
	background: #d45453;
}
.hero::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: url("../images/main_bg_tex.png") no-repeat center center / cover;
}

.heroBg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: #d45453;
}

.heroBg__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(56px);
	transform: translate3d(0, 0, 0);
}

.heroBg__blob--a {
	width: 140%;
	height: 140%;
	top: -45%;
	left: -40%;
	background: radial-gradient(circle at 40% 40%, #c73a32 0%, rgba(199, 58, 50, 0.55) 32%, rgba(199, 58, 50, 0) 58%);
	animation: heroBlobA 9s ease-in-out infinite;
}

.heroBg__blob--b {
	width: 130%;
	height: 135%;
	bottom: -50%;
	left: -45%;
	background: radial-gradient(circle at 45% 55%, #e88738 0%, rgba(232, 135, 56, 0.5) 34%, rgba(232, 135, 56, 0) 60%);
	animation: heroBlobB 11s ease-in-out infinite;
}

.heroBg__blob--c {
	width: 145%;
	height: 145%;
	top: -35%;
	right: -50%;
	background: radial-gradient(circle at 60% 50%, #f4dcc8 0%, rgba(244, 220, 200, 0.55) 30%, rgba(244, 220, 200, 0) 56%);
	animation: heroBlobC 10s ease-in-out infinite;
}

@media screen and (max-width: 820px) {
	.heroBg__blob--a,
	.heroBg__blob--b,
	.heroBg__blob--c {
		animation-delay: 4s;
	}
}

/*
.heroBg__noise {
	position: absolute;
	inset: 0;
	opacity: 0.28;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}
*/

.heroBg.is-paused .heroBg__blob {
	animation-play-state: paused;
}

@keyframes heroBlobA {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(22%, 18%, 0) scale(1.28); }
	66% { transform: translate3d(-12%, 24%, 0) scale(0.88); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes heroBlobB {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(28%, -20%, 0) scale(1.32); }
	66% { transform: translate3d(-18%, -12%, 0) scale(0.9); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes heroBlobC {
	0% { transform: translate3d(0, 0, 0) scale(1.08); }
	33% { transform: translate3d(-24%, 16%, 0) scale(0.86); }
	66% { transform: translate3d(16%, -22%, 0) scale(1.3); }
	100% { transform: translate3d(0, 0, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.heroBg__blob {
		animation: none;
	}
}

.heroVisual {
	position: relative;
	line-height: 0;
/*  clip-path: polygon(0 0, 100% 0%, 100% 94%, 0 80%);*/
  max-width: min(144vh, 1400px);
  margin: 0 auto;
  z-index: 3;
}

.heroVisual img {
	width: 100%;
	height: auto;
	display: block;
}

.heroSlogan {
	position: absolute;
	z-index: 3;
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
	gap: 0.3em;
	color: var(--color-orange);
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	transform: rotate(12deg);
	transform-origin: right center;
}

.heroSlogan .heroSloganCol {
	display: block;
	writing-mode: vertical-rl;
	background: var(--color-white);
	color: var(--color-orange);
	padding: 0.2em 0em;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.heroSlogan .heroSloganCol span {
  position: relative;
  padding: 0.5em 0;
  display: inline-block;
}
.heroSlogan .heroSloganCol span::before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.3em;
}
.heroSlogan .heroSloganCol span::after {
  content: "”";
  position: absolute;
  bottom: -0.6em;
  right: -0.3em;
}

.heroCopy {
	position: relative;
	z-index: 4;
	color: var(--color-white);
	background: transparent;
  text-shadow: 0px 0px 14px rgba(126, 30, 30, 0.7);
}

.heroCopy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-orange);
	clip-path: polygon(0 0, 100% 12vw, 100% 100%, 0 100%);
  
  display: none;
}

.heroLabel {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1;
}

.heroTitle {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
}

.heroRelease {
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
  color: #feeed1;
}


/* Introduction
-------------------------------------------------- */

#introHead {
  padding: min(8vw, 60px) 0;
  background: #221a1a url("../images/intro_head_bg.jpg") no-repeat center center;
}
#introduction {
  background: url("../images/content_bg.jpg") repeat center center / 1400px auto;
}

.sectionIntro {
	position: relative;
	background: var(--color-white);
	overflow: hidden;
}

.sectionIntro::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(70%, 460px);
	aspect-ratio: 1196 / 1321;
	transform: translate(-50%, -50%);
	background: url("../images/intro_bg.png") no-repeat center / contain;
	opacity: 0.15;
	pointer-events: none;
}

.sectionIntro .contentWrap {
	position: relative;
	z-index: 1;
}

.introCatch {
  text-align: center;
  font-size: clamp(16px, 5.4vw, 32px);
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.6;
  width: fit-content;
  margin: 0 auto min(7vw, 40px);
  color: #eb3b3b;
}

.introTitle {
  text-align: center;
  font-size: clamp(18px, 5.4vw, 42px);
  font-weight: 600;
  letter-spacing: 0em;
  line-height: 1.6;
  width: fit-content;
  margin: 0 auto min(2vw, 10px);
  color: #ec3b34;
}
.introTitle span {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1;
  display: block;
}

.introRelease {
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
  text-align: center;
  margin: 0 auto;
  font-size: clamp(12px, 1.8vw, 26px);
  color: #feeed1;
}
.introRelease .year {
  font-size: 1.4em;
}
.introRelease .month {
  font-size: 1.6em;
}


.introLead {
	text-align: center;
  color: var(--color-black);
}

.introLead p {
	font-family: var(--font-serif);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.14em;
  font-feature-settings: "palt";
}

.introBody {
	text-align: center;
  color: var(--color-black);
}

.introBody p {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 2;
	letter-spacing: 0.04em;
	margin-bottom: 1.4em;
}

.introBody .introNote {
	font-size: 1.1em;
	margin-bottom: 0 !important;
}

.introBody .cast {
  border: #e04444 solid 1px;
  padding: min(3vw, 15px);
  margin-top: min(8vw, 60px);
  margin-bottom: min(4vw, 20px);
}
.introBody .cast h3 {
  color: #e04444;
  font-weight: normal;
  font-size: clamp(13px, 1.8vw, 17px);
}
.introBody .cast p:last-child {
  margin-bottom: 0;
}

.movWrap {
  margin-top: min(12vw, 100px);
  padding-bottom: min(8vw, 60px);
  border-bottom: #ece1de solid 1px;
}
.movWrap div {
  width: 100%;
  aspect-ratio: 16/9;
}
.movWrap div iframe {
  width: 100%;
  height: 100%;
}



#cast {
  background: url(../images/content_bg.jpg) repeat center center / 1400px auto;
  padding-bottom: min(14vw, 120px);
  padding-top: min(16vw, 60px);
}
#cast h3 {
  color: #000;
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  text-align: center;
  margin-bottom: min(6vw, 30px);
}
#cast h3 span {
  font-size: 0.6em;
  display: block;
}
#cast .contentWrap p {
  color: #000;
  margin-bottom: min(8vw, 60px);
}

.castWrap {
  width: min(100%, 960px);
  margin: 0 auto min(6vw, 30px);
}
.cast {
  position: relative;
}
.castDetail {
  position: relative;
  display: none;
}
.castDetail#cast01 {
  display: flex;
}
.castPhoto {
  width: 23%;
  aspect-ratio: 10/14;
  overflow: hidden;
  line-height: 0;
}
.castPhoto img {
  width: 100%;
  height: auto;
}
.castName {
  width: 77%;
  background-color: #d83535;
  background-image: linear-gradient(0deg, #fab388 22%, #f7ccbc 36%, #d83535 53%);
  padding: 4%;
  color: #fff;
}
.castName p {
  font-size: min(7.8vw, 38px);
  margin-bottom: 0.2em;
  line-height: 1.4;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.castName p span {
  display: inline-block;
  font-size: 0.6em;
  letter-spacing: 0.04em;
}
.castName .en {
  font-family: var(--font-display);
  font-size: 1.7em;
  font-weight: 300;
}

.castThumb {
  position: absolute;
  bottom: 11%;
  right: 0;
  display: flex;
  width: 77%;
  justify-content: space-between;
  padding: 0 4%;
}
.castThumb li {
  width: 15%;
  line-height: 0;
  border-radius: min(2vw, 10px);
  overflow: hidden;
}
.castThumb li.current {
  border: #fff solid 3px;
}

.introLead span {
  color: #eb3b3b;
}


/* Disc
-------------------------------------------------- */

#disc {
  background: url("../images/content_bg.jpg") repeat center center / 1400px auto;
  padding: min(4vw, 30px) 0 min(10vw, 100px);
}
.discWrap {
  display: flex;
  align-items: center;
  gap: min(4vw, 20px);
}
.discJacket {
  flex: 0 0 min(28%, 240px);
  width: min(28%, 240px);
  max-width: 240px;
  aspect-ratio: 1;
  background: #f7e4dc;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
}
.discJacket img {
  width: 100%;
  height: auto;
  display: block;
}
.discJacket p {
  font-family: var(--font-display);
  color: var(--color-orange);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
}
.discList {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.discList li {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  padding: 0 1.2em;
}
.discList li + li {
  border-left: 1px solid #ccc;
}
.discList h3 {
  color: #000;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  text-align: center;
  margin-bottom: 0.35em;
  letter-spacing: 0.12em;
}

.discRelease {
  font-size: clamp(15px, 1.5vw, 14px);
  text-align: center;
  color: var(--color-orange);
  font-weight: 700;
  margin-bottom: 1.25em;
}
.discRelease span {
  font-size: 1.4em;
}


.discName {
  color: #000;
  font-size: clamp(13px, 1.4vw, 14px);
  font-weight: 700;
  text-align: center;
  line-height: 1.7;
  margin-bottom: 0.15em;
}
.discMeta {
  color: #666;
  font-size: clamp(11px, 1.2vw, 13px);
  text-align: center;
  line-height: 1.7;
}
.discList .btnWrap {
  margin-top: auto;
  padding-top: 2em;
  text-align: center;
  width: 100%;
}
.discList .btn {
  min-width: 0;
  width: 100%;
  padding: 0.9em 0.5em;
  font-size: clamp(11px, 1.3vw, 13px);
}
.btn-gray {
  background: #bdbdbd;
  box-shadow: none;
}

#colorbox {
  overflow: visible !important;
}
#cboxLoadedContent {
  border-radius: min(2vw, 10px);
}
.cboxIframe {
    background-color: #fff;
}

.donationsAnchor {
  margin-top: min(10vw, 60px);
}
.donationsAnchor .btn {
  padding: 1.05em 2.4em;
  min-width: min(58vw, 320px);
  background: #d45353;
}

/* Track list
-------------------------------------------------- */

#trackList {
  background: url("../images/content_bg.jpg") repeat center center / 1400px auto;
  padding: 0 0 min(14vw, 100px);
}
#trackList h3 {
  color: #000;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  text-align: center;
  margin-bottom: min(5vw, 28px);
}
.trackPanel h4 {
  color: #c43c38;
  font-weight: 700;
  font-size: clamp(15px, 1.8vw, 20px);
  text-align: center;
  letter-spacing: 0.12em;
  margin-bottom: min(4vw, 20px);
}
.trackPanel + .trackPanel {
  margin-top: min(8vw, 56px);
}
.trackItems {
  display: flex;
  flex-direction: column;
  gap: 0.55em;
  font-size: min(3.6vw, 18px);
}
.trackItems li {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: min(2vw, 10px);
  padding: 0.85em 1.1em;
  color: #000;
  line-height: 1.5;
}
.trackItems .num {
  flex: 0 0 2.4em;
  width: 2.4em;
  color: #c43c38;
  font-weight: 700;
  text-align: center;
  border-right: 1px solid #e4d4d0;
  padding-right: 0.85em;
  margin-right: 0.95em;
}
.trackItems .title {
  font-weight: 700;
}
.trackItems .artist {
  color: #000;
  font-size: 0.9em;
}

@media screen and (max-width: 820px) {

  .trackItems li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
  }
  .trackItems .num {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
  }
  .trackItems .title,
  .trackItems .artist {
    grid-column: 2;
    min-width: 0;
  }
  .trackItems .artist {
    display: block;
    line-height: 1.45;
    font-feature-settings: "palt";
  }

}


/* Donations
-------------------------------------------------- */

#donations {
  background-color: #fff;
  padding: min(14vw, 80px) 0 min(16vw, 120px);
}
#donations h3 {
  color: #000;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 26px);
  text-align: center;
  margin-bottom: min(5vw, 28px);
}
.donationsTxt {
  color: #000;
  text-align: center;
  font-size: clamp(12px, 3.6vw, 18px);
  line-height: 2;
  font-weight: 600;
/*  margin-bottom: min(6vw, 40px);*/
}
.donationsTxt span {
  display: inline-block;
  font-size: 0.8em;
  margin-top: 0.7em;
}


/* PC
-------------------------------------------------- */

@media screen and (min-width: 821px) {

	.heroSlogan {
      top: calc(100vw * 1664 / 2960 - 21vw);
      right: min(5.2vw, 64px);
      font-size: clamp(15px, 4.6vw, 52px);
	}

	.heroCopy {
		margin-top: min(-18vw, -160px);
		padding: min(9vw, 110px) min(8vw, 50px) min(6vw, 50px);
		text-align: center;
	}

	.heroCopy::before {
		clip-path: polygon(0 8vw, 100% 16vw, 100% 100%, 0 100%);
	}

	.heroLabel {
    font-size: clamp(16px, 4.8vw, 56px);
    margin-bottom: 0.05em;
	}

	.heroTitle {
		font-size: clamp(36px, 5vw, 72px);
		margin-bottom: 0.1em;
	}

	.heroRelease {
		font-size: clamp(16px, 2.1vw, 32px);
	}
  .heroRelease .year {
    font-size: 1.4em;
  }
  .heroRelease .month {
    font-size: 1.6em;
  }

	.sectionIntro {
		padding: clamp(72px, 8vw, 80px) 0 clamp(20px, 4vw, 30px);
	}

	.sectionTitle {
		font-size: clamp(18px, 3vw, 32px);
		margin-bottom: clamp(36px, 4vw, 52px);
	}

  
  .introCatch::after {
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #eb3b3b;
    line-height: 1.6;
  }
  
	.introLead {
		margin-bottom: clamp(32px, 4vw, 48px);
	}

	.introLead p {
		font-size: clamp(18px, 3.8vw, 28px);
	}

	.introBody {
		margin-bottom: clamp(40px, 5vw, 56px);
	}

	.introBody p {
		font-size: clamp(13px, 1.8vw, 16px);
	}

}


/* SP
-------------------------------------------------- */

@media screen and (max-width: 820px) {

	body {
		font-size: 12px;
	}
  
  .ticker .tickerTrack {
    font-size: 14vw;
    font-weight: 300;
  }

	.heroSlogan {
    right: 6%;
    top: calc(100vw * 1664 / 2960 - 8vw);
		bottom: auto;
		flex-direction: column;
		align-items: flex-end;
		font-size: clamp(11px, 5.4vw, 22px);
		letter-spacing: 0.02em;
		gap: 0.2em;
    transform: rotate(6deg);
	}

	.heroSlogan .heroSloganCol {
		writing-mode: horizontal-tb;
    padding: 0em 0.35em;
    letter-spacing: 0.01em;
	}

	.heroSlogan .heroSloganCol span {
		padding: 0;
	}

	.heroSlogan .heroSloganCol span::before,
	.heroSlogan .heroSloganCol span::after {
		position: static;
	}

	.heroCopy {
		margin-top: 0;
		padding: 9vw 4%;
    text-align: center;
	}

	.heroCopy::before {
		clip-path: polygon(0 8vw, 100% 18vw, 100% 100%, 0 100%);
	}

	.heroLabel {
		font-size: clamp(16px, 9vw, 124px);
		margin-bottom: 0.2em;
	}

	.heroTitle {
		font-size: clamp(22px, 10.4vw, 46px);
    letter-spacing: 0.08em;
		margin-bottom: 0.3em;
    font-feature-settings: "palt";
	}

	.heroRelease {
		font-size: clamp(14px, 5vw, 20px);
    font-feature-settings: "palt";
	}
  .heroRelease .year {
    font-size: 1.2em;
  }
  .heroRelease .month {
    font-size: 1.7em;
  }

	.sectionIntro {
		background: var(--color-cream);
		padding: clamp(30px, 11vw, 64px) 0 clamp(20px, 6vw, 80px);
	}

	.sectionIntro .sectionTitle {
		color: var(--color-orange);
		font-size: clamp(16px, 4.6vw, 20px);
		margin-bottom: clamp(28px, 7vw, 40px);
	}

  .introCatch span {
    display: inline-block;
    position: relative;
    line-height: 1.2;
  }
  .introCatch span::after {
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #eb3b3b;
    line-height: 1.6;
  }
  
	.introLead {
		margin-bottom: clamp(24px, 6vw, 32px);
	}

	.introLead p {
    font-size: clamp(13px, 4.4vw, 20px);
    line-height: 1.8;
		color: var(--color-black);
	}

	.introBody {
		margin-bottom: clamp(32px, 8vw, 44px);
	}

	.introBody p {
		font-size: clamp(12px, 3.3vw, 16px);
		line-height: 1.95;
		color: var(--color-black);
    text-align: left;
    letter-spacing: 0;
    font-weight: 600;
	}
  
  .introBody .introNote {
    font-size: 0.9em;
  }

	.btn {
		color: var(--color-white);
    padding: 1.25em 2.4em;
	}
  
  .castPhoto {
    width: 70%;
    aspect-ratio: auto;
  }
  .castName {
    width: 30%;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }
  .castName .en {
    font-size: 1.3em;
  }
  .castThumb {
    width: 100%;
    flex-wrap: wrap;
    gap: min(4vw, 20px) 0;
    bottom: 4%;
  }
  .castThumb li {
    width: 31%;
  }
  .castName p span {
    font-size: 0.35em;
  }

  .discWrap {
    flex-direction: column;
    gap: min(8vw, 40px);
  }
  .discJacket {
    flex: none;
    width: min(72%, 280px);
    max-width: 72%;
    margin: 0 auto;
  }
  .discList {
    width: 100%;
    flex-direction: column;
    gap: 0;
  }
  .discList li {
    align-items: center;
    padding: min(8vw, 36px) 0;
  }
  .discList li + li {
    border-left: none;
    border-top: 1px solid #ccc;
  }
  .discList li:first-child {
    padding-top: 0;
  }
  .discList li:last-child {
    border-bottom: 1px solid #ccc;
  }
  .discList h3,
  .discRelease,
  .discName,
  .discMeta {
    text-align: center;
  }
  .discList .btnWrap {
    text-align: center;
    width: 70%;
    padding-top: 1.2em;
  }
  .discList .btn {
    min-width: min(80%, 260px);
  }
  
  .discRelease {
    margin-bottom: 0.75em;
  }

  .donationsTxt {
    text-align: left;
  }

}


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

	Opening

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

.heroLabel {
  opacity: 0;
  transform: translateY(30px);
  animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}
.heroTitle {
  opacity: 0;
  transform: translateY(30px);
  animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
.heroRelease {
  opacity: 0;
  transform: translateY(30px);
  animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

@keyframes op01 {
  0% { opacity: 0; transform: translateY(30px);}
  100% { opacity: 1; transform: translateY(0px);}
}


.heroVisual {
  clip-path: polygon(0 80%, 100% 94%, 100% 94%, 0 80%);
  animation: op02 0.6s cubic-bezier(0.85, 0, 0.15, 1) 2.2s forwards;
}
@keyframes op02 {
  0% { clip-path: polygon(0 80%, 100% 94%, 100% 94%, 0 80%);}
  20% { clip-path: polygon(0 80%, 100% 94%, 100% 94%, 0 80%);}
  100% { clip-path: polygon(0 -14%, 100% 0, 100% 93%, 0 80%);}
}
@keyframes op02_sp {
  0% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);}
  20% { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);}
  100% { clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);}
}


@media screen and (max-width: 820px) {
  
  .heroLabel {
    animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 5s forwards;
  }
  .heroTitle {
    animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 5.2s forwards;
  }
  .heroRelease {
    animation: op01 0.8s cubic-bezier(0.22, 1, 0.36, 1) 5.4s forwards;
  }
  .heroVisual {
    animation: op02 0.6s cubic-bezier(0.85, 0, 0.15, 1) 6.2s forwards;
  }
  
  .heroVisual {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 1000%);
    animation: op02_sp 0.6s cubic-bezier(0.85, 0, 0.15, 1) 2.2s forwards;
  }
}


#spOp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 100;
  background-color: #fff;
  animation: spOp2 0.6s linear 4.9s forwards;
  will-change: transform,animation,position;
}
#spOp > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 200vw;
  aspect-ratio: 380/135;
  background: url(../images/main_pic.jpg) repeat-x left top / auto 100%;
  animation: spOp1 8s cubic-bezier(0.11, 0, 0.5, 0) 0s forwards;
  will-change: transform,animation,position;
  transform: translateX(-4%);
  filter: blur(20px);
}

@keyframes spOp1 {
  0% { transform: translateX(-5%); filter: blur(20px);}
  15% { filter: blur(0px);}
  100% { transform: translateX(-100%); filter: blur(0px);}
}
@keyframes spOp2 {
  0% { opacity: 1; filter: blur(0px);}
  100% { opacity: 0; filter: blur(20px); pointer-events: none;}
}


@media screen and (min-width: 821px) {

  #spOp {
    display: none;
  }
}

/*
@media screen and (min-width: 821px) {
  .heroSlogan .heroSloganCol:nth-child(1) {
    clip-path: inset(0 0 100% 0);
    animation: op03pc 0.5s cubic-bezier(0.83, 0, 0.17, 1) 2s forwards;
  }
  .heroSlogan .heroSloganCol:nth-child(2) {
    clip-path: inset(0 0 100% 0);
    animation: op03pc 0.5s cubic-bezier(0.83, 0, 0.17, 1) 2.2s forwards;
  }
}
@media screen and (max-width: 820px) {
  .heroSlogan .heroSloganCol:nth-child(1) {
    clip-path: inset(0 100% 0 0);
    animation: op03sp 0.5s cubic-bezier(0.83, 0, 0.17, 1) 2s forwards;
  }
  .heroSlogan .heroSloganCol:nth-child(2) {
    clip-path: inset(0 100% 0 0);
    animation: op03sp 0.5s cubic-bezier(0.83, 0, 0.17, 1) 2.2s forwards;
  }
}
@keyframes op03pc {
  0% { clip-path: inset(0 0 100% 0);}
  100% { clip-path: inset(0 0 0 0);}
}
@keyframes op03sp {
  0% { clip-path: inset(0 100% 0 0);}
  100% { clip-path: inset(0 0 0 0);}
}
*/


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

	Footer

//////////////////////////////////////////////////////////////////////////////// */
footer {
  background-color: #d45453;
  color: #fff;
  position: relative;
}
footer .ftrSns {
  border-top: 1px solid rgba(255,255,255,0.55);
  display: flex;
}
footer .ftrSns li {
  border-bottom: 1px solid rgba(255,255,255,0.55);
  width: 25%;
  border-right: 1px solid rgba(255,255,255,0.55);
}
footer .ftrSns li:last-child {
  border-right: none;
}
footer .ftrSns a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 1.15em 1em;
  font-size: clamp(13px, 1.5vw, 14px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.55;
}
footer .ftrSns a + a {
  padding-top: 0;
}
footer .ftrSns a:hover {
  opacity: 0.75;
}
footer .copyright {
  font-size: clamp(10px, 1.15vw, 12px);
  text-align: center;
  padding: min(5.5vw, 36px) 16px min(7vw, 44px);
  font-weight: 400;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 820px) {
  footer {
    padding-top: min(8vw, 60px);
  }
  footer .ftrSns {
    width: 86%;
    margin: 0 auto;
    display: block;
    border-top: none;
  }
  footer .ftrSns li {
    width: 100%;
    border-right: none;
  }
  footer .ftrSns a {
    font-size: clamp(12px, 3.6vw, 15px);
    padding: min(4.6vw, 22px) 0;
    letter-spacing: 0.04em;
    text-align: left;
  }
  footer .copyright {
    font-size: clamp(9px, 2.4vw, 10px);
    padding: min(6.5vw, 32px) 0 min(8vw, 40px);
  }

}