@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: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: min(3.4vw, 16px);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
  background-color: #000;
  color: #fff;
}

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

.anim {
	opacity: 0;
	transition: all 1s ease-out;
}
.anim.on {
	opacity: 1;
}
h2.anim {
  transform: translateY(40px);
	transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}
h2.anim.on {
  transform: translateY(0px);
}
h2.anim span {
	opacity: 0;
  transform: translateY(40px);
	transition: all 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.4s;
}
h2.anim.on span {
  opacity: 1;
  transform: translateY(0px);
}

@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;}

}

#canvas {
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0.5;
}

/*
#menuButton {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  position: fixed;
  top: min(5vw, 30px);
  right: min(5vw, 30px);
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  color: #fff;
  z-index: 9998;
  text-decoration: none;
  font-size: min(4vw, 20px);
  letter-spacing: -0.08em;
}
#menuButton .on,
#menuButton.active .off {
  display: none;
}
#menuButton.active .on {
  display: block;
  letter-spacing: 0em;
}
*/
#menuButton {
  display: block;
  width: min(10vw, 60px);
  height: min(10vw, 60px);
  position: fixed;
  top: min(4vw, 30px);
  right: min(5vw, 40px);
  z-index: 9998;

  mix-blend-mode: exclusion;
}
#menuButton span {
  display: block;
  background: #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  transition: all 0.4s;
}
#menuButton span:nth-child(1) { transform: translateY(-550%) rotate(0deg);}
#menuButton span:nth-child(2) { transform: translateY(450%) rotate(0deg);}
#menuButton span:nth-child(3) { transform: translateY(-50%);}
#menuButton.active span:nth-child(1) { transform: translateY(-50%) rotate(45deg);}
#menuButton.active span:nth-child(2) { transform: translateY(-50%) rotate(-45deg);}
#menuButton.active span:nth-child(3) { opacity: 0;}


#globalNavi {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9997;
  background: linear-gradient(0deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.9) 60%);
}
#globalNavi .globalNaviInr {
  padding: 10vh 0;
}
#globalNavi ul {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  gap: min(6vw, 30px);
}
#globalNavi ul li {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  padding-top: 2.8vh;
  position: relative;
}
#globalNavi ul li::before {
  content: "";
  display: block;
  width: 1.6vh;
  aspect-ratio: 1/1;
  background-color: #884e00;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 2.2vh;
}
#globalNavi ul li a {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 5vh;
  font-style: italic;
  color: #fff;
  text-decoration: none;
  line-height: 1.2;
}
#globalNavi ul li a div {
  width: 6vh;
  margin-left: 0.8vh;
}
#globalNavi ul li a span {
  font-family: lust-sans, sans-serif;
  font-style: italic;
  font-size: 0.5em;
  font-weight: 500;
  letter-spacing: 0.08em;
  display: block;
  color: #884e00;
}



#sideNavi {
  position: fixed;
  top: min(20vw, 170px);
  right: 0;
  z-index: 9995;
  display: none;
}
#sideNavi ul {
  display: flex;
  flex-direction: column;
  gap: min(2vw, 10px);
  overflow: hidden;
}
#sideNavi li {
  transition: all 0.6s ease-out;
  transform: translateX(100%);
}
#sideNavi li:nth-child(1) { transition-delay: 0.2s;}
#sideNavi li:nth-child(2) { transition-delay: 0.4s;}
#sideNavi li:nth-child(3) { transition-delay: 0.6s;}
#sideNavi li:nth-child(4) { transition-delay: 0.8s;}
#sideNavi li:nth-child(5) { transition-delay: 1.0s;}
#sideNavi li:nth-child(6) { transition-delay: 1.2s;}

#sideNavi.on li {
  transform: translateX(0%);
}

#sideNavi ul li a {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-style: italic;
  font-size: min(3.2vw, 14px);
  font-weight: bold;
  display: block;
  background: linear-gradient(90deg, #581511 0%, #884e00 100%);
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: min(1.8vw, 8px) min(3vw, 15px);
}


.pageTop {
  position: absolute;
  bottom: min(5vw, 60px);
  right: min(5vw, 60px);
  z-index: 8000;
}
.pageTop a {
  display: flex;
  width: min(17vw, 80px);
  aspect-ratio: 1/1;
  justify-content: center;
  align-items: center;
  background-color: #884e00;
  font-family: lust-sans, sans-serif;
  font-size: min(3.2vw, 14px);
  text-align: center;
  line-height: 1.4;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  padding-top: 0.3em;
  letter-spacing: 0.1em;
}

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

  #globalNavi {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.9) 40%);
  }

  #globalNavi ul {
    flex-direction: column;
    padding: 0 min(6vw, 30px);
  }
  #globalNavi ul li {
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    padding-top: 0;
    padding-left: min(6vw, 30px);
  }
  #globalNavi ul li a {
    font-size: min(6.4vw, 36px);
  }
  #globalNavi ul li::before {
    width: min(3vw, 15px);
    top: min(2vw, 10px);
    right: inherit;
    left: 0;
  }
  #globalNavi ul li a div {
    width: auto;
    height: 8vw;
    margin-bottom: 1.8vw;
    margin-left: 0;
  }
  #globalNavi ul li a div img {
    height: 100%;
    width: auto;
  }
  #globalNavi ul li a span {
    font-size: 0.6em;
  }


  #sideNavi {
    display: none !important;
  }

}

#op {
  position: fixed;
  background: url("../images/op_bg.jpg") no-repeat center center / cover;
  z-index: 9999;
  width: 100%;
  height: 100vh;
  opacity: 1;
  animation: op02 1s linear 2s forwards;
  padding-bottom: 12vh;
}
#op .opInr {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: 4vh;
  opacity: 0;
  animation: op01 1s ease-out 0.5s forwards;
}
#op .opInr div {
  width: 24vh;
  line-height: 0;
}
#op .opInr p {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 10vh;
  font-weight: bold;
}

@keyframes op01 {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes op02 {
  0% { opacity: 1;}
  100% { opacity: 0; pointer-events: none;}
}



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


  #op .opInr {
    gap: min(4vw, 20px);
  }

  #op .opInr div {
    width: 30vw;
  }
  #op .opInr p {
    font-size: 11vw;
    line-height: 1;
  }
}

#mainvisual {
  width: 100%;
  height: 100vh;
  height: 100svh;
  background: url("../images/main_visual.jpg") no-repeat center center / cover;
  position: relative;
}
#mainvisual::before {
  content: "";
  display: block;
  position: fixed;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-color: #fff;
  background-image: url("../images/cover.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 9998;
  opacity: 1;
  pointer-events: none;

  filter: contrast(6) blur(0px) saturate(0);
  mix-blend-mode: darken;

  animation: op3 3s cubic-bezier(0.61, 1, 0.88, 1) 3s forwards;
}

@keyframes op3 {
    0% { filter: contrast(6) blur(0px) saturate(0); opacity: 1; }
    45% { filter: contrast(3) blur(0px) saturate(1); opacity: 1; }
    70% { filter: contrast(1) blur(0px) saturate(1); opacity: 1; }
    100% { filter: contrast(1) blur(0px) saturate(1); opacity: 0; }
}

#mainvisual h1 {
  position: absolute;
  bottom: min(8vw, 80px);
  left: min(6vw, 80px);
  width: min(80vw, 600px);
  line-height: 0;
}

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

  #mainvisual {
    height: auto;
    background: url("../images/main_visual_sp.jpg") no-repeat center bottom / cover;
    aspect-ratio: 75/110;
    margin-bottom: min(30vw, 200px);
  }
  #mainvisual h1 {
    bottom: max(-15vw, -90px);
  }


}


section {
  padding: min(14vw, 100px) 0;
  position: relative;
}
section h2 {
  font-family: lust-sans, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: min(7.4vw, 64px);
  line-height: 1;
  color: #884e00;
}
section h2 span {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 0.4em;
  font-style: normal;
  letter-spacing: 0.08em;
  color: #fff;
  display: block;
  text-indent: 0.22em;
  line-height: 2.4;
}
.contentWrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 min(6vw, 60px);
  position: relative;
  z-index: 1;
}
.flexWrap {
  display: flex;
  justify-content: space-between;
}

.cornerBox {
  padding: min(4vw, 50px);
  position: relative;
}
.cornerBox::before,
.cornerBox::after {
  content: "";
  display: block;
  width: min(5vw, 50px);
  aspect-ratio: 1/1;
  position: absolute;
}
.cornerBox::before {
  top: 0;
  left: 0;
  border-top: #884e00 solid 1px;
  border-left: #884e00 solid 1px;
}
.cornerBox::after {
  bottom: 0;
  right: 0;
  border-bottom: #884e00 solid 1px;
  border-right: #884e00 solid 1px;
}

.movieWrap {
  margin: 0 min(6vw, 60px);
  position: relative;
  z-index: 2;
}
.movieWrap > div {
  width: 100%;
  aspect-ratio: 100/56.25;
}
.movieWrap iframe {
  width: 100%;
  height: 100%;
}


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

  .cornerBox {

  }

}

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

	Introduction

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

#intro h2 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#intro .introTxt {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  width: 80%;
}
#intro .introTxt h3 {
  font-size: min(4.2vw, 36px);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: min(8vw, 60px);
}
#intro .introTxt p {
  line-height: 2;
}
#intro .introTxt p + p {
  margin-top: min(6vw, 40px);
}
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	width: 200%;
	transform: translate(56%, -100%);
	top: -0.4em;
	right: 58%;
	text-align: center;
	letter-spacing: 0;
	line-height: 1;
	font-size: 0.5em;
}

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



}


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

	Comment

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

#comment::before {
  content: "";
  position: absolute;
  bottom: -22vw;
  right: 0;
  width: 80%;
  aspect-ratio: 2959/3455;
  z-index: 0;
  background: url("../images/bg_parts01.png") no-repeat center center / 100%;
}

#comment .flexWrap {
  flex-direction: row-reverse;
}

#comment .contentWrap {
}

#comment h2 {
  position: relative;
  cursor: pointer;
}
#comment h2 .plusBtn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: min(8vw, 60px);
  aspect-ratio: 1 / 1;
}
#comment h2 .plusBtn::before,
#comment h2 .plusBtn::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#comment h2 .plusBtn::after {
  transition: all 0.3s ease-out;
  transform: translate(-50%, -50%) rotate(90deg);
}
#comment h2.on .plusBtn::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

#comment .commentImg {
  position: absolute;
  bottom: 0;
  right: min(6vw, 60px);
  width: 24%;
  line-height: 0;
}
#comment .commentTxt {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  width: 100%;
  padding-top: min(6vw, 40px);
  display: none;
}
#comment .commentTxt p {
  line-height: 2;
  margin-bottom: min(4vw, 20px);
}

@media screen and (min-width: 821px) {
/*
  #comment h2 {
    background: linear-gradient(90deg, rgba(136,77,0,0) 0%, rgba(90,24,16,0) 50%, rgba(136,77,0,0) 100%);
  }
  #comment h2:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(136,77,0,0.3) 0%, rgba(90,24,16,0.3) 50%, rgba(136,77,0,0.3) 100%);
  }
*/
}
/* @media screen and (max-width: 820px) {

  #comment .commentTxt {
  width: 80%;
  }

} */

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

	Movie

//////////////////////////////////////////////////////////////////////////////// */
#movie h2 {
  text-align: right;
  margin-bottom: min(8vw, 60px);
}
#movie .movieImg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 60%;
}

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

  #movie .movieImg {
    width: 80%;
  }

}

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

	Release

//////////////////////////////////////////////////////////////////////////////// */
#release::before {
  content: "";
  position: absolute;
  top: 14vw;
  right: 0;
  width: 65%;
  aspect-ratio: 2959/3455;
  z-index: 0;
  background: url("../images/bg_parts02.png") no-repeat right center / 100%;
}
#release h2 {
  position: absolute;
  top: 0;
  left: min(6vw, 60px);
}
#release .flexWrap {
  flex-direction: row-reverse;
  align-items: flex-start;
}

#release .flexWrap h3 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  line-height: 1;
  letter-spacing: 0.14em;
  margin-top: -0.5em;
  position: relative;
}
#release .flexWrap h3 rt {
  font-size: 0.3em;
}
#release .flexWrap h3 > span.small {
  font-size: 0.4em;
  font-size: min(2.72vw, 16.8px);
  font-style: normal;
  letter-spacing: 0.08em;
  color: #fff;
  display: block;
  text-indent: 1.5em;
  line-height: 2.4;
}
#release .flexWrap h3 > span.rl {
  font-weight: 300;
  font-size: min(6.8vw, 42px);
}

#release .flexWrap .badge {
  position: absolute;
  bottom: 0;
  right: 0;
  border: #884e00 solid 1px;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode: lr-tb;
  writing-mode: horizontal-tb;

  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: min(4.2vw, 24px);
  border-radius: 50%;
  color: #fff;
  background-color: #5a1710;
  letter-spacing: 0.08em;
  line-height: 1.4;
  width: min(32vw, 180px);
  aspect-ratio: 1/1;

  font-style: italic;
  transform: translateY(100%);
}
#release .flexWrap .badge strong {
  font-size: min(5.4vw, 32px);
}
#release .flexWrap .badge span {
  font-size: 0.5em;
  display: inline;
  text-indent: 0;
  color: #fff;
  line-height: 1.8;
  font-feature-settings: "palt";
}

#release .discWrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 min(6vw, 60px);
  position: relative;
}
#release .flexWrap .releaseInfo {
  width: 74%;
  padding-top: min(14vw, 120px);
}

#release .flexWrap .disc {
  display: flex;
  flex-wrap: wrap;
}
#release .flexWrap .disc li {
  width: 50%;
  padding-bottom: min(6vw, 40px);
  position: relative;
  margin-bottom: min(6vw, 40px);
}
#release .flexWrap .disc li:nth-child(1) {
  padding-right: min(7vw, 40px);
  border-bottom: #884e00 solid 1px;
}
#release .flexWrap .disc li:nth-child(odd)::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #884e00;
  width: 1px;
  height: calc(100% - min(6vw, 40px));
}
#release .flexWrap .disc li:nth-child(2) {
  padding-left: min(7vw, 40px);
  border-bottom: #884e00 solid 1px;
}
#release .flexWrap .disc li:nth-child(3) {
  padding-right: min(7vw, 40px);
}
#release .flexWrap .disc li .jacket {
  line-height: 0;
  margin-bottom: min(4vw, 20px);
}
#release .flexWrap .disc li .type {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: min(3.6vw, 18px);
  margin-bottom: min(3vw, 15px);
  line-height: 1.4;
}
#release .flexWrap .disc li .type span {
  color: #884e00;
  font-size: min(3.2vw, 14px);
}
#release .flexWrap .disc li .price {
  font-size: min(3.2vw, 14px);
  margin-bottom: min(3vw, 15px);
}
#release .flexWrap .disc li .benefits {
  font-size: min(3.2vw, 14px);
}


.reservebtn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: min(6vw, 30px);
}
.reservebtn.alignLeft {
  justify-content: left;
}
.reservebtn a {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  display: block;
  background: linear-gradient(90deg, #581511 0%, #884e00 100%);
  color: #fff;
  text-decoration: none;
  width: min(40vw, 300px);
  text-align: center;
  padding: min(4vw, 20px);
  letter-spacing: 0.1em;
  position: relative;
  font-size: min(3.2vw, 14px);
}
#release .reservebtn a {
  width: min(52vw, 300px);
}
.reservebtn a::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: min(4vw, 20px);
  transform: translateY(-50%);
  background: url("../images/ico_arrow.png") no-repeat center center / 100%;
  aspect-ratio: 61/24;
  width: min(4vw, 20px);
}

#release .trackListWrap {
  flex-direction: row;
  margin-top: min(18vw, 180px);
  margin-bottom: min(8vw, 60px);
}
#release .trackListWrap h3 {
  font-size: min(6.2vw, 54px);
  margin-top: 0;
}
#release .trackListWrap h3 span {
  font-size: 0.32em;
  text-indent: 0;
  color: #884e00;
}
#release .trackList {
  width: 80%;
}
#release .trackList ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#release .trackList ul li a {
  display: block;
  padding: min(1vw, 5px) min(3vw, 20px);
  font-size: min(2.8vw, 14px);
  color: #fff;
  text-decoration: none;
  border: #884e00 solid 1px;
  border-radius: 100px;
}


.discDetail {
  border-top: #884e00 solid 1px;
  margin-top: min(8vw, 60px);
}
.discDetail li {
  padding: min(2vw, 10px) 0;
  border-bottom: #884e00 solid 1px;
}
.discDetail li a {
  color: #fff;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: min(4vw, 20px);
  position: relative;
  font-weight: bold;
  letter-spacing: 0.08em;
}
.discDetail li a span {
  display: block;
  width: min(6vw, 30px);
  border-radius: 50%;
  border: #884e00 solid 1px;
  aspect-ratio: 1/1;
  position: absolute;
  top: 50%;
  right: min(2vw, 10px);
  transform: translateY(-50%);
}
.discDetail li a span::before,
.discDetail li a span::after {
  content: "";
  display: block;
  background-color: #fff;
  height: 1px;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.discDetail li a span::before {
  transform: translate(-50%, -50%) rotate(90deg);
}


.songTitleWrap {
  padding: min(6vw, 30px) 0;
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.songTitleWrap .songTitle {
  font-size: min(5.8vw, 36px);
}
.songTitleWrap .releaseDate {
  font-size: min(3.6vw, 18px);
  letter-spacing: 0.08em;
}
.songTitleWrap + .reservebtn {
  margin-top: min(2vw, 24px);
}


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

  #release .flexWrap h3 {
    padding-right: 2em;
  }
  #release .flexWrap h3 > span.small {
    position: absolute;
    top: 0;
    right: 0;
    width: 14em;
    transform: translate(46%, 240%) rotate(90deg);
  }
  #release .flexWrap h3 > span.rl {
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  }

  .discDetail li a {
    background: linear-gradient(90deg, rgba(136,77,0,0) 0%, rgba(90,24,16,0) 50%, rgba(136,77,0,0) 100%);
  }
  .discDetail li a:hover {
    opacity: 1;
    background: linear-gradient(90deg, rgba(136,77,0,0.3) 0%, rgba(90,24,16,0.3) 50%, rgba(136,77,0,0.3) 100%);
  }
  .discDetail li a span {
    transition: all 0.3s ease-out;
  }
  .discDetail li a:hover span {
    background: #884e00;
  }
}
@media screen and (max-width: 820px) {

  #release h2 {
    position: static;
    margin-bottom: min(6vw, 30px);
  }

  #release .flexWrap {
    flex-direction: column;
    gap: min(6vw, 30px);
  }
  #release .flexWrap h3 {
    padding: 0 min(6vw, 60px);
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
    margin-top: 0;
    width: 100%;
  }
  #release .trackListWrap.flexWrap h3 {
    padding: 0;
  }
  #release .flexWrap h3 > span {
    font-size: 0.6em;
    text-indent: 0;
  }
  #release .flexWrap .badge {
    right: min(4vw, 60px);
    bottom: min(10vw, 80px);
    transform: translateY(0%);
  }

  #release .discWrap {
    padding: 0;
  }

  #release .flexWrap .releaseInfo {
    width: 100%;
    padding-top: 0;
  }

  .reservebtn a {
    font-size: 0.8em;
    text-align: left;
    letter-spacing: 0.1em;
  }
  .reservebtn.alignLeft {
    justify-content: center;
  }

  .discDetail li a {
    text-align: left;
  }


  #release .trackList {
    width: 100%;
  }

  #release .flexWrap .disc {
    padding-top: min(14vw, 100px);
  }
  #release .flexWrap .disc li {
    padding: 0 min(6vw, 40px) !important;
    border-bottom: none !important;
    border-right: #884e00 solid 1px;
  }
  #release .flexWrap .disc li:nth-child(odd)::after {
    display: none;
  }
  #release .flexWrap .disc .slick-track {
    display: flex;
  }
  #release .flexWrap .disc .slick-slide {
    height: auto !important;
  }
  #release .flexWrap .disc li,
  #release .flexWrap .disc .slick-slide > div {
    height: 100% !important;
  }

  #release .disc .slick-prev {
    border: #884e00 solid 1px;
    background: url("../images/ico_arrow_back.png") no-repeat center center / 45%;
    border-radius: 50%;
    top: 0;
    right: min(20vw, 160px);
    left: inherit;
    width: min(10vw, 80px);
    height: min(10vw, 80px);
    transform: translate(0);
  }
  #release .disc .slick-next {
    border: #884e00 solid 1px;
    background: url("../images/ico_arrow.png") no-repeat center center / 45%;
    border-radius: 50%;
    top: 0;
    right: min(6vw, 60px);
    width: min(10vw, 80px);
    height: min(10vw, 80px);
    transform: translate(0);
  }
  #release .disc .slick-prev:before,
  #release .disc .slick-next:before {
    display: none;
  }

}


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

	Tour

//////////////////////////////////////////////////////////////////////////////// */
#tour::before {
  content: "";
  position: absolute;
  top: -56vw;
  left: 0;
  width: 80%;
  aspect-ratio: 2959/3455;
  z-index: 0;
  background: url("../images/bg_parts03.png") no-repeat left center / 100%;
}
#tour .flexWrap {
  flex-direction: row-reverse;
}
#tour h2 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#tour .tourTxt {
  width: 82%;
}
#tour .tourLead {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  margin-bottom: min(8vw, 60px);
}
#tour .tourLead h3 {
  font-size: min(4.6vw, 36px);
  font-weight: 400;
  line-height: 1.6;
}
#tour .tourTxt h4 {
  font-family: lust-sans, sans-serif;
  font-weight: 500;
  font-size: min(6.6vw, 48px);
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #884e00;
  margin-bottom: min(6vw, 30px);
}

.scheduleHead {
  display: flex;
  color: #884e00;
  border-bottom: #884e00 solid 1px;
  font-size: min(3.2vw, 14px);
  margin-bottom: min(2vw, 10px);
}
.scheduleHead .date {
  width: 35%;
}
.scheduleHead .area {
  width: 12%;
}
.scheduleHead .venue {
  width: 48%;
}

.scheduleList {
  margin-bottom: min(8vw, 60px);
}
.scheduleList li {
  display: flex;
  align-items: center;
  padding: min(3vw, 15px) 0;
  border-bottom: #884e00 solid 1px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.scheduleList li .date {
  width: 35%;
  font-size: min(5.2vw, 20px);
  color: #884e00;
}
.scheduleList li .date span {
  color: #fff;
}
.scheduleList li .date span.week {
  font-size: 0.6em;
}
.scheduleList li .area {
  width: 11%;
  padding-right: min(4vw, 20px);
  font-size: min(3.2vw, 14px);
}
.scheduleList li .area span {
  display: block;
  background-color: #884e00;
  text-align: center;
  letter-spacing: 0.1em;
}
.scheduleList li .venue {
  width: 49%;
  font-size: min(3.6vw, 18px);
}

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

  .scheduleHead {
    display: none;
  }
  #tour .schedule .tourTxt {
    width: 100%;
  }
  .scheduleList {
    border-top: #884e00 solid 1px;
  }
  .scheduleList li {
    flex-wrap: wrap;
  }
  .scheduleList li .date {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: min(1vw, 5px);
    margin-bottom: min(1vw, 5px);
  }
  .scheduleList li .date::before {
    display: block;
    content: "DATE";
	  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    font-size: min(3vw, 12px);
    width: min(25vw, 120px);
  }
  .scheduleList li .area {
    width: 50%;
    display: flex;
    gap: min(1vw, 5px);
  }
  .scheduleList li .area::before {
    display: block;
    content: "AREA / VENUE";
	  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
    color: #884e00;
    font-size: min(3vw, 12px);
    width: min(25vw, 120px);
  }
  .scheduleList li .area span {
    width: calc(100% - min(25vw, 120px));
  }
  .scheduleList li .venue {
    width: 50%;
  }

}

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

	Book

//////////////////////////////////////////////////////////////////////////////// */
#book .flexWrap {
  padding-bottom: min(14vw, 120px);
}
#book h2 {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
#book .bookContent {
  width: 80%;
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  padding-bottom: min(6vw, 30px);
  border-bottom: #884e00 solid 1px;
}
/* #book .bookContent .thumb {
  width: 35%;
  aspect-ratio: 1/1;
  line-height: 0;
  background-color: #fff;
} */
#book .bookContent .bookTxt {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  /* width: 60%; */
}
#book .bookContent .bookTxt h3 {
  /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: min(3.8vw, 20px);
  font-weight: normal; */
  font-size: min(6.4vw, 36px);
  font-weight: 400;
  line-height: 1.6;
  /* letter-spacing: 0.1em; */
  margin-bottom: min(3vw, 15px);
}
#book .bookContent .bookTxt h3 + p {
  font-size: min(3.8vw, 20px);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: min(3vw, 15px);
}
#book .bookContent .bookTxt p {
  font-size: min(3vw, 14px);
  margin-bottom: min(6vw, 30px);
}

@media screen and (max-width: 820px) {
  #book .bookContent {
    flex-direction: column;
    gap: min(6vw, 30px);
  }
  #book .bookContent .thumb {
    width: 100%;
  }
  #book .bookContent .bookTxt {
    width: 100%;
  }

}


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

.modal {
  background-color: #fff;
  padding: min(8vw, 60px) min(5vw, 60px);
  color: #000;
  min-height: 100%;
  box-sizing: border-box;
}
.modal h3 {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: min(4.2vw, 24px);
  font-weight: normal;
  line-height: 1.6;
  text-align: center;
  padding-bottom: min(3vw, 15px);
  border-bottom: #884e00 solid 1px;
  color: #884e00;
}
.modalCont {
  padding: min(6vw, 30px) 0;
  border-bottom: #884e00 solid 1px;
}
.modalCont p {
  font-size: min(3.2vw, 14px);
}
.modalCont p strong {
  color: #000;
}
.modalCont p + p {
  margin-top: min(4vw, 20px);
}
.modalCont p a {
  color: #884e00;
  text-decoration: underline;
}
.modalCont .note {
  font-size: min(3vw, 12px);
}
.modalCont h4 {
  font-size: min(3.6vw, 18px);
  font-weight: bold;
  color: #884e00;
  margin-bottom: min(4vw, 20px);
}
.modalCont h4 span {
  font-size: min(3.2vw, 14px);
  display: block;
  color: red;
  font-weight: normal;
}
.modalCont .beltTtl {
  background-color: #f3e5d2;
  padding: min(1vw, 5px) min(4vw, 20px);
  font-weight: bold;
  margin-bottom: min(4vw, 20px);
}

.modalCont .modalTable {
  display: flex;
  flex-wrap: wrap;
  border-top: #000 solid 1px;
  font-size: min(3.2vw, 14px);
  margin-bottom: min(4vw, 20px);
  margin-top: min(4vw, 20px);
}
.modalCont .modalTable dt {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  border-bottom: #000 solid 1px;
  padding: min(1vw, 5px) min(2vw, 20px);
  width: min(22vw, 140px);
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.modalCont .modalTable dd {
  border-right: #000 solid 1px;
  border-bottom: #000 solid 1px;
  padding: min(1vw, 5px) min(3vw, 20px);
  width: calc(100% - min(22vw, 140px));
  box-sizing: border-box;
}

.modalCont .anchorList {
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 16px);
  margin-bottom: min(4vw, 32px);
}
.modalCont .anchorList a {
  font-size: min(3vw, 14px);
  text-decoration: none;
  background-color: #ccc;
  color: #000;
  border-radius: 100px;
  padding: 0 1em;
}
.modalCont table {
  width: 100%;
  border-spacing: 1px;
  background-color: #000;
}
.modalCont table th {
  background-color: #ccc;
  line-height: 1.2;
  padding: min(2.5vw, 14px) min(4vw, 16px);
}
.modalCont table td {
  background-color: #fff;
  padding: min(2vw, 10px) min(4vw, 16px);
}
.modalCont table th,
.modalCont table td {
  font-size: min(3.4vw, 16px);
}
.modalCont table tbody th {
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
}

.modal > .backBtn {
  text-align: center;
  margin-top: min(6vw, 30px);
}
.modal > .backBtn >.change-modal {
  color: #884e00;
  text-decoration: underline;
}

/* .logoList {
  display: flex;
  flex-wrap: wrap;
  gap: min(3vw, 15px) calc((100% - 23.5% * 4) / 3);
  margin-bottom: min(6vw, 30px);
}
.logoList li {
  width: 23.5%;
  aspect-ratio: 20/8;
  box-sizing: border-box;
}
.logoList li a {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #884e00;
  border-radius: 100px;
  color: #fff;
  text-decoration: none;
  font-size: min(3vw, 12px);
  line-height: 1.4;
} */

.logoList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: min(1.5vw,10px) 2%;
  margin-bottom: min(6vw, 32px);
}
.logoList li {
  width: 48%;
  border: #ccc solid 1px;
  border-radius: 100px;
}
.logoList li:first-child {
  width: 100%;
}
.logoList li:first-child a img {
  width: 80%;
  max-width: 282px;
  padding: min(2vw, 10px) 0;
}
.logoList li a img {
  display: block;
  width: 100%;
  max-width: 180px;
  margin: auto;
}


.dotList {
  padding-left: min(4vw, 20px);
  font-size: min(3.2vw, 14px);
  list-style: disc;
  margin-bottom: min(6vw, 30px);
}
.bgBox {
  background-color: #eeeeee;
}
.bgBox h5 {
  border-bottom: #000 solid 1px;
  font-size: min(3.4vw, 16px);
  padding: min(4vw, 20px) min(4vw, 30px) min(2vw, 10px);
  text-align: center;
}
.bgBox .bgBoxTxt {
  padding: min(4vw, 20px) min(4vw, 30px);
}


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


  /* .logoList {
    justify-content: space-between;
    gap: min(4vw, 20px) 0;
  }
  .logoList li {
    width: 48%;
  } */

}


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

	Footer

//////////////////////////////////////////////////////////////////////////////// */
footer {
  font-family: "source-han-sans-japanese", sans-serif;
	background-color: #000;
	color: #fff;
	position: relative;
}
footer .ftrSns {
	display: flex;
	border-top: #333 solid 1px;
	border-bottom: #333 solid 1px;
}
footer .ftrSns li {
	width: 20%;
}
footer .ftrSns li + li {
	border-left: #333 solid 1px;
}
footer .ftrSns li a {
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.6;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 25px 30px;
	height: 100%;
}
footer .ftrSns li a i.snsIcon {
	color: #fff;
	font-size: 24px;
	margin-right: 20px;
}
footer .ftrSns li a span {
  width: 45px;
	line-height: 0;
	margin-right: 20px;
}

footer .ftrMain {
	padding: min(6vw, 60px) min(6vw, 60px) min(10vw, 100px);
}
footer .ftrMain .copyWrap {
	display: flex;
	align-items: center;
	width: 82%;
	max-width: 880px;
	margin: auto;
}
footer .ftrMain .copyWrap .logo {
	width: 540px;
	margin-right: 30px;
}
footer .ftrMain .copyWrap p {
	font-size: 12px;
	font-weight: 200;
}
footer .ftrMain .copyright {
	font-size: 10px;
	text-align: center;
	margin-top: 30px;
	font-weight: 200;
}


footer .ftrMain .ftrNav {
	width: 50%;
	display: flex;
}
footer .ftrMain .ftrNav ul {
	width: 50%;
	border-left: #333 solid 1px;
	padding: 0 6%;
}
footer .ftrMain .ftrNav li + li {
	margin-top: 8px;
}
footer .ftrMain .ftrNav a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
}
footer .ftrMain .ftrSubNav {
	width: 25%;
	border-left: #333 solid 1px;
	padding: 0 3%;
}
footer .ftrMain .ftrSubNav li + li {
	margin-top: 8px;
}
footer .ftrMain .ftrSubNav a {
	color: #fff;
	text-decoration: none;
	font-size: 14px;
}

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

	footer .ftrSns {
		display: flex;
		flex-wrap: wrap;
	}
	footer .ftrSns li {
		width: 50%;
	}
	footer .ftrSns li:last-child {
		width: 100%;
	}
	footer .ftrSns li + li {
		border-left: none;
	}
	footer .ftrSns li:nth-child(even) {
		border-left: #333 solid 1px;
	}
	footer .ftrSns li:nth-child(n+3) {
		border-top: #333 solid 1px;
	}

	footer .ftrSns li a {
    	font-size: min(2.6vw, 12px);
		padding: min(4vw, 25px) min(5vw, 30px);
	}
	footer .ftrSns li a i.snsIcon {
		font-size: min(6vw, 24px);
		margin-right: min(3vw, 20px);
	}
	footer .ftrSns li a span {
		width: min(14vw, 45px);
		margin-right: min(4vw, 20px);
	}
	footer .ftrSns li:last-child a {
		justify-content: center;
	}

	footer .ftrMain {
	  padding: min(6vw, 60px) min(6vw, 60px) min(22vw, 100px);
	}
	footer .ftrMain .copyWrap {
		flex-direction: column;
	}
	footer .ftrMain .copyWrap .logo {
    width: 68%;
    max-width: 240px;
    margin: 0 auto min(5vw, 25px);

	}
	footer .ftrMain .copyWrap p {
		font-size: min(3vw, 12px);
	}
	footer .ftrMain .copyright {
		font-size: min(2.2vw, 10px);
		margin-top: min(8vw, 30px);
	}

}