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

.main_img_wrap {
  width: 100%;
  position: relative;	
  border: solid 2px #dcac7b;
  overflow: hidden;
  aspect-ratio: 16 / 9;	
}
.main_v_deco {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
  align-items: center;	
}
.main_v_deco .dot {
  width: 12px;
  height: 12px;
  background: #dcac7b;
  border-radius: 50px;
  margin-right: 16px;	
}
.audio_wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 80px;	
}
#myVideo {
  width: 100%;
}
.main_b_new {
  font-size: 16px;
  line-height: 2;
  color: #dcac7b;
}
.main_b_new .event {
  display: flex;
  align-items: center;
}
.main_b_new .event span {
  width: 6px;
  height: 20px;
  background: #dcac7b;
  display: inline-block;
  margin-left: 4px;
  animation: blinking 0.6s ease-in-out infinite alternate;	
}

@keyframes blinking {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.glitch_anime {
  --glitch-width: 100vw;
  --glitch-height: 100vh;
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
  --color-title: #fff;
  --time-anim: 4s;
  --delay-anim: 2s;
  --blend-mode-1: none;
  --blend-mode-2: none;
  --blend-mode-3: none;
  --blend-mode-4: overlay;
  --blend-mode-5: overlay;
  --blend-color-1: transparent;
  --blend-color-2: transparent;
  --blend-color-3: transparent;
  --blend-color-4: #fb909a;
  --blend-color-5: #1c1cc9;
}

/* Glitch styles */
/*.glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--glitch-width);
  height: var(--glitch-height);
  overflow: hidden;
}*/

.glitch__img {
  position: absolute;
  top: calc(-1 * var(--gap-vertical));
  left: calc(-1 * var(--gap-horizontal));
  width: calc(100% + var(--gap-horizontal) * 2);
  height: calc(100% + var(--gap-vertical) * 2);
  background: url("../img/main.jpg") no-repeat 50% 0;
  background-color: var(--blend-color-1);
  transform: translate3d(0,0,0);
  background-blend-mode: var(--blend-mode-1);
  background-position: right top;
  background-size: 100%;	
}

.glitch__img:nth-child(n+2) {
  opacity: 0;
}

.imgloaded .glitch__img:nth-child(n+2) {
  animation-duration: var(--time-anim);
  animation-delay: var(--delay-anim);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.imgloaded .glitch__img:nth-child(2) {
  background-color: var(--blend-color-2);
  background-blend-mode: var(--blend-mode-2);
  animation-name: glitch-anim-1;
}

.imgloaded .glitch__img:nth-child(3) {
  background-color: var(--blend-color-3);
  background-blend-mode: var(--blend-mode-3);
  animation-name: glitch-anim-2;
}

.imgloaded .glitch__img:nth-child(4) {
  background-color: var(--blend-color-4);
  background-blend-mode: var(--blend-mode-4);
  animation-name: glitch-anim-3;
}

.imgloaded .glitch__img:nth-child(5) {
  background-color: var(--blend-color-5);
  background-blend-mode: var(--blend-mode-5);
  animation-name: glitch-anim-flash;
}

/* Animations */

@keyframes glitch-anim-1 {
  0% { 
    opacity: 1;
    transform: translate3d(var(--gap-horizontal),0,0);
    -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  2% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  4% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  8% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  10% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  12% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  14% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  16% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  18% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal),0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-2 {
  0% { 
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
    -webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  3% {
    -webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  5% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  7% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  9% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  11% {
    -webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  13% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  15% {
    -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  17% {
    -webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  19% {
    -webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  20% {
    -webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-3 {
  0% { 
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
    -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
    clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
  }
  1.5% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
    clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
  }
  2% {
    -webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
    clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
  }
  2.5% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  3% {
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
    clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
  }
  5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
    clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
  }
  5.5% {
    -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
    clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
  }
  7% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
    clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
  }
  8% {
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  9% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
    clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
  }
  10.5% {
    -webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
    clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
  }
  11% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
    clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
  }
  13% {
    -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
    clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
  }
  14% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
    clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
  }
  14.5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
    clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
  }
  15% {
    -webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
    clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
  }
  16% {
    -webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  18% {
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
    clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
  }
  20% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
    clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
  }
  22%, 100% {
    opacity: 0;
    transform: translate3d(0,0,0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  }
}

@keyframes glitch-anim-text {
  0% { 
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
    -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
  2% {
    -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  4% {
    -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  5% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  6% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  7% {
    -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  8% {
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  9% {
    -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
  }
  9.9% {
    transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
  }
  10%, 100% {
    transform: translate3d(0,0,0) scale3d(1,1,1);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

/* Flash */
@keyframes glitch-anim-flash {
  0%, 5% { 
    opacity: 0.2; 
    transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
  }
  5.5%, 100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@media screen and (max-width:768px){
.main_v_deco {
  padding: 0 0 16px 0;
	}
.zoom {
  width: 16px;
}
.main_v_deco .dot {
  width: 10px;
  height: 10px;
  margin-right: 10px;
}
 .main_img_wrap {
    margin-bottom: 16px;
	}
}

.viewmore a:hover {
  opacity: 0.7;
  transition: 0.5s;
}

/*------------------------------------------------------
video content
------------------------------------------------------*/
.audio_content {
  max-width: 480px;
  width: 100%;	
}
.controls {
  display: flex;
  gap: 10px;
  align-items: center;
border: solid 1px #dcac7b;
  margin-left: 10px;
padding-right: 10px;	
}
#pauseBtn {
  height: 50px;	
  border-right: solid 1px #dcac7b;
  padding: 0 16px;
}
#playBtn {
  height: 50px;	
  border-right: solid 1px #dcac7b;
  padding: 0 16px 0 8px;
}
.video-wrapper {
  width: 100%;
}
#seekBar {
  flex: 1;
}
.class_video_inner {
  position: relative;
  z-index: -1;
  display: none;
}
.class_video_inner.show {
  z-index: 1;
  display: block;	
}
.audio_content {
  display: flex;
  align-items: center;
}
.seekbar_wrap {
  width: 100%;
}
/* シークバー全体のスタイル */
#seekBar {
  -webkit-appearance: none; /* Chrome, Safari */
  width: 100%;
  height: 5px;
  background: #ddd;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}

/* トラックのスタイル（Chrome, Safari, Edge） */
#seekBar::-webkit-slider-runnable-track {
  height: 5px;
  background: #f6e3d0;
  border-radius: 8px;
}

/* トラックのスタイル（Firefox） */
#seekBar::-moz-range-track {
  height: 5px;
  background: #f6e3d0;
  border-radius: 8px;
}

/* つまみ（thumb）のスタイル（Chrome, Safari, Edge） */
#seekBar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #dcac7b;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #333;
  margin-top: -6px; /* トラックの中心に合わせる */
  transition: background-color 0.3s ease;
}

#seekBar::-webkit-slider-thumb:hover {
  background: #f6e3d0;
}

/* つまみ（thumb）のスタイル（Firefox） */
#seekBar::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #dcac7b;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #333;
  transition: background-color 0.3s ease;
}

#seekBar::-moz-range-thumb:hover {
  background: #f6e3d0;
}

@media screen and (max-width:768px){	
.audio_wrap {
  margin-bottom: 40px;
  flex-direction: column-reverse;
}
.audio_content {
  max-width: 100%;
	}
}


/*------------------------------------------------------
schedule
------------------------------------------------------*/
#schedule {
  margin-bottom: 64px;
}
#schedule .section_inner {
  display: flex;
  border: solid 2px #dcac7b;
}
#schedule .schedule_content_left {
  width: 50%;
  padding: 24px;	
}
#schedule .schedule_content_right {
  width: 50%;
  border-left: solid 2px #dcac7b;
  position: relative;	
}
#schedule .schedule_list_li {
  padding: 20px 24px 20px 0;
  border-bottom: solid 2px #dcac7b;
  background-image: url("../img/arrow_view_more.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 28px;
   color: #dcac7b;	
}
#schedule .schedule_list_li:last-child{
  border-bottom: none;
}
#schedule .schedule_list_li:hover{
 opacity: 0.7;
 transition: 0.5s; 	
}
#schedule .schedule_list_li a{
 color: #dcac7b;
 text-decoration: none;
}
#schedule .date {
  font-size: 20px;
display: flex;
  gap: 16px;	
}
#schedule .title {
  font-size: 24px;
  font-weight: 600;
}
#schedule .place {
  font-size: 20px;
  margin-top: 6px;	
}
#schedule .time {
  font-size: 20px;
}
#schedule .viewmore a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #dcac7b;
  z-index: 1;
  margin-top: -2px;
  position: relative;
　background-image: url("../img/arrow_di_right.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 28px;	
}
#schedule .viewmore {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
#schedule .eo-events li:nth-child(n+6) {
  display: none;
}

@media screen and (max-width:768px){
#schedule .viewmore {
  position: relative;
	}
#schedule .section_inner {
  flex-wrap: wrap;
}
#schedule .schedule_content_left {
  width: 100%;
  padding: 20px;
}
#schedule .schedule_content_right {
  width: 100%;
  border-left: none;
}
#schedule .date {
  display: block;
	}
#schedule .date span{
  display: block;
	}	
}

/*------------------------------------------------------
music
------------------------------------------------------*/
#music {
  border: solid 2px #dcac7b;
  align-items: center;
  margin-bottom: 64px;	
}
#music .music_head {
  display: flex;
  justify-content: space-between;
  border-bottom: solid 2px #dcac7b;	
}
#music .music_head .title {
  padding:  40px;
}

#music .year_li {
  width: 140px;	
  padding: 40px 16px 40px 28px;
  border-right: solid 2px #dcac7b;	
}
#music .year_li.active{
  background-image: url("../img/arrow_nav.png");
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 9px 16px;	
}
#music .year_li:first-child {
  border-left: solid 2px #dcac7b;
}
#music .year_li:last-child {
  border-right: none;	
}
#music .music_content_left {
  width: 74%;
  border-right: solid 1px #dcac7b;
  padding: 40px;	
}
#music .music_content_right {
  width: 26%;
  display: flex;
  flex-wrap: wrap;
  position: relative;	
}
#music .deco {	
  max-width: 268px;
  width: 100%;
  height: calc(100% - 144px);	
  position: relative;
  padding: 40px 20px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;	
}
#music .icn {
  width: 80%;	
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;	
}
#music .base {
  animation: rotateAnimation 5s linear infinite;
}
#music .music_content_right .colum02 {
  width: 100%;
position: absolute;
  bottom: 0;	
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#music .buy {
  width: 100%;
  height: 72px;	
  text-align: center;
  border-top: solid 2px #dcac7b;
  border-bottom: solid 2px #dcac7b;	
}
#music .buy a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
#music .buy a:hover{
  opacity: 0.7;
  transition: 0.5s;
}
#music .music_content_wrap {
  display: flex;
}
#music .viewmore {
  width: 100%;
  height: 72px;	
  background: #dcac7b;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/arrow_di_right.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 28px;	
}
#music .viewmore a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#music .tab_content {
  display: none;
}
#music .tab_content.active {
  display: flex;
  justify-content: space-between;
}
#music .album_details{
 width: calc(48% - 64px);	
}
#music .album_img {
  width: 52%;
}
#music .album_details {
  color: #dcac7b;
}
#music .album_details .title {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 24px;
}
#music .album_details .release {
  font-size: 24px;
}
#music .album_details .song_li {
  font-size: 20px;
  margin-bottom: 8px;	
}

#music .tab_wrap {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#music .year_wrap {
  display: flex;
  align-items: center;
  position: relative;
  width: 508px;
  overflow: hidden;
  border-left: solid 2px #dcac7b;	
}
#music .year_ul_wrap {
  overflow: hidden;
  width: 100%;
}
#music .year_ul {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}

#music .year_li {
  flex: 0 0 auto;
}

#music .year_btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  padding: 0 10px;
}
#music .year_btn.prev {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #232522;
  border-right: solid 2px #dcac7b;
  margin-right: -2px;	
}
#music .year_btn.next {
  width: 50px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #232522;
  border-left: solid 2px #dcac7b;		
}

@media screen and (max-width:768px){
#music .music_head .title {
  padding: 24px;
}	
#music .tab_content.active {
  display: block;
	}
#music .album_img {
  width: 100%;
  margin-bottom: 16px;
  text-align: center;	
}	
#music .music_content_left {
  width: 100%;
  padding: 24px;
  border-right: none;	
}	
#music .album_details {
  width: 100%;
}
#music .album_details .title {
  font-size: 28px;
  margin-bottom: 16px;
}
#music .album_details .release {
  font-size: 18px;
  margin-bottom: 16px;
}
#music .album_details .song_li {
  font-size: 16px;
  margin-bottom: 8px;
}
#music .music_content_right {
  width: 100%;
  flex-wrap: wrap;
}
#music .music_head {
  display: block;
	}
#music .year_li {
  width: calc((100% + 3px) / 3);
  padding: 20px 8px 20px 28px;
	}
#music .year_wrap {
width: 100%;	
  border-left: none;
  border-top: solid 2px #dcac7b;
}
#music .music_content_wrap {
  flex-wrap: wrap;
}
#music .music_content_right .colum02 {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
#music .deco {
  max-width: 100%;
  width: 50%;
  padding: 16px;
  border-right: solid 2px #dcac7b;
  border-top: solid 2px #dcac7b;
  height: auto !important;
}	
#music .buy {
  height: 50%;
	}
#music .viewmore {
  height: 50%;
	}
}

@media screen and (max-width:599px){
#music .viewmore a {
  padding: 20px 40px 20px 10px;
}
}

/*------------------------------------------------------
video
------------------------------------------------------*/
#video {
  border: solid 2px #dcac7b;
  margin-bottom: 100px;	
}
#video .section_inner {
  display: flex;
}
#video .video_left {
  width: 30%;
  text-align: center;
  border-right: solid 2px #dcac7b;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: last baseline;
}
#video .video_right {
  width: 70%;
}
#video .title_wrap {
  padding: 16px;
}
#video .title_base {
  position: relative;
}
#video .title_ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#video .title_base {
  position: relative;
}
#video .title_ul {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
}
#video .title_li {
  text-align: center;
}
#video .title_li.deco01 {
  grid-column: 1 / 1;
  grid-row: 2 / 3;
}
#video .title_li.deco02 {
  grid-column: 2/ 3;
  grid-row: 1 / 1;
  margin-right: -8px;	
}
#video .title_li.deco03 {
  grid-column: 3/ 4;
  grid-row: 2 / 3;
}
#video .title_li.deco04 {
  grid-column: 4/ 5;
  grid-row: 3 / 4;
}
#video .title_li.deco05 {
  grid-column: 5/ 6;
  grid-row: 4 / 6;
  margin-left: -20px;	
}
#video .title_li {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
#video .title_li.show {
  opacity: 1;
  transform: translateY(0);
  animation: bounceIn 0.6s ease;
}

@keyframes bounceIn {
  0% {
    transform: translateY(30px);
  }
  50% {
    transform: translateY(-10px);
  }
  70% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
#video .viewmore {
  width: 100%;	
  background: #dcac7b;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../img/arrow_di_right.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 28px;	
}
#video .viewmore a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#video .slick-dots {
  display: none;
}
#video .slick-prev {
  width: 24px;
  height: 100%;
  background-color: #242424;
  background-image: url("../img/btn_left.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 20px;	
  left: 0;
  z-index: 1;
  border-right: solid 2px #dcac7b;
}
#video .slick-next {
  width: 24px;
  height: 100%;
  background-color: #242424;
  background-image: url("../img/btn_right.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 20px;	
  right: 0;
  z-index: 1;
  border-left: solid 2px #dcac7b;	
}

@media screen and (max-width:768px){
#video .section_inner {
  display: block;
	}
#video .video_left {
  width: 100%;
  border-right: none;	
	}
#video .video_right {
  width: 100%;
}

}

/*------------------------------------------------------
link
------------------------------------------------------*/
 /* Common styles for all faces */
#link .face {
        position: absolute;
        width: 50px;
        height: 50px;
        border: 2px solid #dcac7b;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
        color: white;
        opacity: 1;
    }
#link .front {
        background-color: #232421;
        transform: rotateY(0deg) translateZ(25px);
        /* Moves the front face 50px towards the viewer */
    }
#link .back {
        background-color: #232421;
        transform: rotateY(180deg) translateZ(25px);
        /* Rotates 180° around Y-axis and moves 50px forward */
    }
#link .right {
        background-color: #232421;
        transform: rotateY(90deg) translateZ(25px);
        /* Rotates 90° right around Y-axis and moves 50px forward */
    }
#link .left {
        background-color: #232421;
        transform: rotateY(-90deg) translateZ(25px);
        /* Rotates 90° left around Y-axis and moves 50px forward */
    }
#link .top {
        background-color: #232421;
        transform: rotateX(90deg) translateZ(25px);
        /* Rotates 90° upward around X-axis and moves 50px forward */
    }
#link .bottom {
        background-color: #232421;
        transform: rotateX(-90deg) translateZ(25px);
        /* Rotates 90° downward around X-axis and moves 50px forward */
    }
    .cube {
        width: 50px;
        height: 50px;
        position: absolute;
        transform-style: preserve-3d;
    }
    .bigcube {
        width: 150px;
        height: 150px;
        position: absolute;
        transform-style: preserve-3d;
        transform: rotateX(-45deg) rotateY(-45deg) rotateZ(0deg); /* ルービック・キューブ表示角度 */
        /*
        animation: rotate 20s infinite linear;  /* ルービック・キューブ全体を回すanimation */
        /* 20s defines the duration of one complete rotation */
        /* infinite means the animation will repeat forever */
        /* linear means the animation speed is constant */
    }


/* =========================
   3D空間
========================= */

#link .scene{
/*  width:100vw;
  height:100vh;
*/
  display:flex;
  justify-content:center;
  align-items:center;
/*  perspective:1600px;
*/}

/* =========================
   全体キューブ
========================= */
#link .wrap{
  position:relative;
  width:180px;
  height:180px;
  transform-style:preserve-3d;
  transform:
    rotateX(-32deg)
    rotateY(38deg);
display: flex;
  justify-content: center;	
}
/* =========================
   小キューブ
========================= */
#link .cube{
  position:absolute;
  width:50px;
  height:50px;
  transform-style:preserve-3d;
  /* ★滑らか改善 */
  transition:
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================
   面（枠線だけ）
========================= */

#link .face{
  position:absolute;
  width:50px;
  height:50px;
  box-sizing:border-box;
  border:1px solid rgba(220,172,123,.8);
  background:rgba(35,37,34,.6);
  backface-visibility:hidden;
}

/* =========================
   6面
========================= */

#link .front{
  transform:translateZ(25px);
}
#link .back{
  transform:rotateY(180deg) translateZ(25px);
}
#link .right{
  transform:rotateY(90deg) translateZ(25px);
}
#link .left{
  transform:rotateY(-90deg) translateZ(25px);
}
#link .top{
  transform:rotateX(90deg) translateZ(25px);
}
#link .bottom{
  transform:rotateX(-90deg) translateZ(25px);
}

    /* Define the rotation animation */
    @keyframes rotate {
        0% {
            transform: rotateX(0deg) rotateY(0deg);
        }

        25% {
            transform: rotateX(90deg) rotateY(90deg);
        }

        50% {
            transform: rotateX(180deg) rotateY(180deg);
        }

        75% {
            transform: rotateX(270deg) rotateY(270deg);
        }

        100% {
            transform: rotateX(360deg) rotateY(360deg);
        }
    }

    @keyframes rotateX90 {
        100% {
            transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
        }
    }

    @keyframes rotateXr90 {
        100% {
            transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
        }
    }

    @keyframes rotateY90 {
        100% {
            transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
        }
    }

    @keyframes rotateYr90 {
        100% {
            transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg);
        }
    }

    @keyframes rotateZ90 {
        100% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
        }
    }

    @keyframes rotateZr90 {
        100% {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(-90deg);
        }
    }


#link .link_ul {
  display: flex;
  justify-content: space-between;
  align-items: center;	
  column-gap: 40px;	
}
#link .link_li {
  flex: 1;
  text-align: center;	
}
#link .link_li.goods {
  position: relative;
}
#link .link_li.goods .title {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;	
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: hurueru .1s  infinite;
}
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(1px, 1px) rotateZ(1deg)}
    50% {transform: translate(0px, 1px) rotateZ(0deg)}
    75% {transform: translate(1px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

.waveText{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:.82;
}

/* 各DOMICO */
.waveText span{
  font-size:56px;
  font-weight:900;
  font-family: "Righteous", sans-serif;
  color:#dcac7b;
  animation: wave 2s infinite ease-in-out;
}
.waveText span:nth-child(2n) {
  color: transparent;
  -webkit-text-stroke: 1px #dcac7b;
}
.link_li a {
  text-decoration: none;
}
/* 1行ずつ遅延 */
.waveText span:nth-child(1){ animation-delay:0s; }
.waveText span:nth-child(2){ animation-delay:.1s; }
.waveText span:nth-child(3){ animation-delay:.2s; }
.waveText span:nth-child(4){ animation-delay:.3s; }
.waveText span:nth-child(5){ animation-delay:.4s; }
.waveText span:nth-child(6){ animation-delay:.5s; }
.waveText span:nth-child(7){ animation-delay:.6s; }

@keyframes wave{

  0%,100%{
    transform:
      translateX(0)
      skewX(0deg);
    opacity:.5;
  }

  50%{
    transform:
      translateX(40px)
      skewX(-18deg);
    opacity:1;
  }
}

#link #addcube {
  margin: auto;
  width: 100%;
  max-width: 150px;
}
#link .link_li.contact {
  position: relative;
  display: flex;
  align-items: center;
}
#link .cube-wrapper {
  width: 100%;
  height: 225px;
display: flex;
  justify-content: center;	
}
#link .link_li.contact h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


@media screen and (max-width:768px){
#link .link_ul {
  display: block;
	}
#link .link_li.contact {
  margin-top: 56px;
}
#link .link_li.goods {
margin-top: 56px;
  margin-bottom: 130px;
}	
}

/*------------------------------------------------------
news
------------------------------------------------------*/
#news {
  border: solid 2px #dcac7b;
  margin-bottom: 64px;
}
#news .section_inner {
  display: flex;
  justify-content: space-between;
}
#news .news_content_left {
  width: 30%;
  text-align: center;
  border-right: solid 2px #dcac7b;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: last baseline;
}
#news .news_content_right {
  width: 70%;
  padding: 40px;
}
#news .viewmore {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #dcac7b;
  z-index: 1;
  margin-top: -2px;
  position: relative;
}
#news .viewmore a {
  width: 100%;
  height: 100%;
  display: block;
  background-image: url("../img/arrow_di_right.png");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) center;
  background-size: 28px;
  padding: 20px;
}
#news .news_content_left .title {
  padding: 40px;
}
#news .title img {
  animation: rotateAnimation 5s linear infinite;
}
#news .news {
  display: flex;
  column-gap: 16px;	
  padding: 16px;
  border-bottom: solid 1px #dcac7b;
}
#news .news dt {
  font-size: 17px;
  color: #dcac7b;	
}
#news .news dd a {
  font-size: 17px;
  text-decoration: none;
  color: #dcac7b;	
}

@media screen and (max-width:768px){
#news .section_inner {
  flex-wrap: wrap;
  flex-direction: column-reverse;
}
#news .news_content_right {
  width: 100%;
  padding: 0;
}
#news .news_content_left {
  width: 100%;
	}
#news .news_content_left .title {
  padding: 10px;
  width: 32%;
}	
#news .viewmore {
  width: 68%;
	}
#news .news_content_left {
  align-items: stretch;
  align-content: stretch;
}	
#news .viewmore a {
  padding: 0 16px;
  display: flex;
  align-items: center;
}	
}

@media screen and (max-width:599px){
 #news .viewmore a {
    padding: 0 40px 0 16px;
}
}