﻿@charset "UTF-8";


/*=======================================
              ライブ配信
========================================*/

.sec_contents02 .content_area {
  overflow: visible;
}

.live_now_list .prev_button,
.live_now_list .next_button {
  display: none;
}

.live_now_list .live_now_list__item {
  position: relative;
  width: calc(358 * 60rem / 430);
  margin-right: calc(60 * 60rem / 430);
}

.live_now_list .live_now_list__item.active .live_thumb::before {
  opacity: .6;
  position: absolute;
  left: calc(10* 60rem / 430);
  bottom: calc(10* 60rem / 430);
  z-index: 10;
  width: calc(45* 60rem / 430);
  height: calc(45* 60rem / 430);
  background-color: #d3d3d3;
  border-radius: 100%;
  content: "";
}

.live_now_list .live_now_list__item.active .live_thumb::after {
  position: absolute;
  width: 0;
  height: 0;
  left: calc(27 * 60rem / 430);
  bottom: calc(22 * 60rem / 430);
  z-index: 10;
  border-top: calc(10 * 60rem / 430) solid transparent;
  border-left: calc(16 * 60rem / 430) solid #fff;
  border-bottom: calc(10 * 60rem / 430) solid transparent;
  content: "";
}

.live_now_list .live_now_list__item.active.status_03 a::before {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  position: absolute;
  top: calc(-11* 60rem / 430);
  right: calc(-13* 60rem / 430);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(65* 60rem / 430);
  height: calc(65* 60rem / 430);
  background: #F87889;
  border-radius: 100%;
  color: #fff;
  font-size: calc(16* 60rem / 430);
  white-space: nowrap;
  content: "LIVE";
  letter-spacing: 0.04em;
  transform: scale(0.9) translate3d(0,0,0);
  box-shadow: 0 0 0 0 rgba(248, 120, 137, 0.4);
  animation: livePulse 1.6s ease-in-out infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(0.9) translate3d(0,0,0);
    box-shadow: 0 0 0 0 rgba(248, 120, 137, 0.4);
  }
  50% {
    transform: scale(1.08) translate3d(0,0,0);
    box-shadow: 0 0 0 5px rgba(248, 120, 137, 0.25);
  }
  100% {
    transform: scale(0.9) translate3d(0,0,0);
    box-shadow: 0 0 0 0 rgba(248, 120, 137, 0);
  }
}

.live_now_list .live_now_list__item img {
  height: 100%;
  border-radius: calc(10 * 60rem / 430);
}

.live_now_list .live_now_list__item .live_title {
  margin: calc(10* 60rem / 430) auto;
  font-size: calc(14* 60rem / 430);
}

.live_now_list .live_now_list__item .live_datetime {
  font-size: calc(13* 60rem / 430);
}

.sec_contents02 .slide_wrap .next_button::after {
  background: url(../img/next_livenow.svg) no-repeat center;
  background-size: 100%;
}

.sec_contents02 .slide_wrap .prev_button::after {
  background: url(../img/prev_livenow.svg) no-repeat center;
  background-size: 100%;
}





/*=======================================
                アーカイブ
========================================*/
.live_archives_list {
  display: flex;
  flex-wrap: wrap;
  gap:  calc(20 * 60rem / 430);
  justify-content: flex-start;
  padding: 0 0 0  calc(25 * 60rem / 430);
}

.live_archives_list li {
  width: calc(180 * 60rem / 430);
}

.live_archives_list li img {
  border-radius: calc(6 * 60rem / 430);
  overflow: hidden;
  height: calc(300 * 60rem / 430);
  object-fit: cover;
}

.live_archives_list li .live_thumb {
  position: relative;
  z-index: 0;
}

.live_archives_list li .live_thumb::before {
  opacity: .6;
  position: absolute;
  left: calc(10* 60rem / 430);
  bottom: calc(10* 60rem / 430);
  z-index: 10;
  width: calc(30* 60rem / 430);
  height: calc(30* 60rem / 430);
  background-color: #d3d3d3;
  border-radius: 100%;
  content: "";
}

.live_archives_list li .live_thumb::after {
  position: absolute;
  width: 0;
  height: 0;
  left: calc(21* 60rem / 430);
  bottom: calc(18* 60rem / 430);
  z-index: 10;
  border-top: calc(7* 60rem / 430) solid transparent;
  border-left: calc(11* 60rem / 430) solid #fff;
  border-bottom: calc(7* 60rem / 430) solid transparent;
  content: "";
}

.live_archives_list li .live_title {
  margin: calc(7* 60rem / 430) auto calc(5* 60rem / 430);
  font-size: calc(13* 60rem / 430);
}

.live_archives_list li .live_datetime {
  font-size: calc(10* 60rem / 430);
}

.accordion_wrap {
  position: relative;
  max-height: 95rem;/*JSと連動*/
  overflow: hidden;
  transition: max-height .4s ease;
  padding: calc(50 * 60rem / 430) 0 0;
}

.btn_accordion {
  display: none;
}

.btn_accordion.active {
  display: block;
  cursor: pointer;
}

.accordion_wrap.is-open + .btn_accordion.active p:after {
    transform: translateY(-50%) rotate(0deg);
  background: url(../img/minus_orange.svg);
}

/*
.accordion_wrap:not(.is-open)::after{
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 100%;
  height: calc(50 * 60rem / 430);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(218, 106, 42, 0), rgba(218, 106, 42, 1));
}*/

.btn_accordion p {
  padding: calc(12 * 60rem / 430);
}
