@charset "utf-8";
/*---------------------------------
* RADIO
----------------------------------*/
.content__aroundWrap {
  height: calc(100% - var(--footerHeight));
}
.radio {
  padding: min(calc(186 / var(--vw-min) * 100vw), 186px) 0 min(calc(100 / var(--vw-min) * 100vw), 100px);
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .radio {
    padding: calc(170 / var(--vw-min) * 100vw) 0 calc(190 / var(--vw-min) * 100vw);
  }
}

.radio__content {
  width: min(calc(880 / var(--vw-min) * 100vw), 880px);
  margin: min(calc(110 / var(--vw-min) * 100vw), 110px) auto 0;
}

@media screen and (max-width: 768px) {
  .radio__content {
    width: 100%;
    padding: 0 calc(45 / var(--vw-min) * 100vw);
    margin: calc(96 / var(--vw-min) * 100vw) 0 calc(48 / var(--vw-min) * 100vw);
  }
}

/*specialLists*/
.radioLists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.radioLists__item {
  width: calc((100% - 48px) / 2);
  margin-bottom: 56px;
}
@media screen and (max-width: 768px) {
  .radioLists__item {
    width: 100%;
    margin-bottom: calc(80 / var(--vw-min) * 100vw);
  }
}

.radioBoxWrap {
  background: #000;
  display: block;
  width: 100%;
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}
.radioBoxWrap::before {
  background: #000;
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 1;
  opacity: 0.3;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.radioLists__item:hover .radioBoxWrap::before {
  opacity: 0;
}
.item_title {
  display: block;
  font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
  color: #b69848;
  line-height: calc(32 / 20);
  letter-spacing: 0.04em;
  margin-top: min(calc(18 / var(--vw-min) * 100vw), 18px);
  text-align: center;
}
body[data-cate="recording"] .item_title {
  color: #000;
}
.item_text {
  font-size: min(calc(15 / var(--vw-min) * 100vw), 15px);
  letter-spacing: 0.06em;
  line-height: calc(30 / 15);
}

.item_img {
  transition: 0.4s ease;
}
@media screen and (max-width: 768px) {
  .item_title {
    font-size: calc(28 / var(--vw-min) * 100vw);
    line-height: calc(32 / 28);
    margin-top: calc(32 / var(--vw-min) * 100vw);
  }
  .item_text {
    font-size: calc(24 / var(--vw-min) * 100vw);
    line-height: calc(46 / 24);
    margin-top: calc(24 / var(--vw-min) * 100vw);
  }
}
.radioBox {
  width: 100%;
  height: 100%;
  transition: 0.3s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.play-icon {
  width: min(calc(80 / var(--vw-min) * 100vw), 80px);
  height: min(calc(80 / var(--vw-min) * 100vw), 80px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: url(../img/common/deco/play_icon.svg) no-repeat center center/contain;
  transform: scale(1);
  transition: 0.4s ease;
}

.btn_radioPlay {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/*hover*/
.radioBoxWrap:hover .item_img {
  transform: scale(1.05);
}
.radioBox:hover {
  cursor: pointer;
}

.linkBoxWrap {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.linkBoxWrap li {
  width: calc((100% - 22px) / 3);
  position: relative;
}
@media screen and (min-width: 767px) {
  .linkBoxWrap li:nth-child(n + 4) {
    margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
  }
}

.linkBox {
  display: block;
  position: relative;
  width: min(calc(300 / var(--vw-min) * 100vw), 300px);
  height: min(calc(48 / var(--vw-min) * 100vw), 48px);
  color: #fff;
  background: url(../img/movie/linkbtn_off.png) no-repeat center center / contain;
  transition: all 0.3s ease;
  color: #fff;
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  letter-spacing: 0.013em;
  font-family: source-han-serif-japanese, "bodoni-urw", serif;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  margin-top: 40px;
}
.linkBox button {
  color: #fff;
  display: block;
  cursor: pointer;
}
.linkBox a {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.linkBox.is-active,
.linkBox:hover {
  color: #b64848;
  background: url(../img/movie/linkbtn_on.png) no-repeat center center / contain;
  cursor: pointer;
}
.linkBox.is-active a,
.linkBox:hover a {
  color: #b64848;
}
.interview .tabBtnWrap li .linkBox {
  margin-top: 0;
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .linkBoxWrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: calc(64 / var(--vw-min) * 100vw);
    margin-top: 0;
  }
  .linkBoxWrap li {
    width: calc((100% - calc(14 / var(--vw-min) * 100vw)) / 2);
  }
  .linkBox {
    height: min(calc(64 / var(--vw-min) * 100vw), 64px);
    font-size: calc(22 / var(--vw-min) * 100vw);
    letter-spacing: 0.08em;
    width: 60vw;
    margin: calc(40 / var(--vw-min) * 100vw) auto 0;
  }
  .interview .tabBtnWrap li .linkBox {
    margin-bottom: calc(5 / var(--vw-min) * 100vw);
  }
}


.production_headArea {
  text-align: center;
  margin: min(calc(40 / var(--vw-min) * 100vw), 40px) auto min(calc(63 / var(--vw-min) * 100vw), 63px);
}
.production_ttlWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.production_logo_link {
  transition: opacity 0.3s ease;
}
.production_logo_link:hover {
  opacity: 0.8;
}
.production_ttl {
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  line-height: calc(32 / 16);
  letter-spacing: 0.08em;
  /*color:#B69848;*/
  color: #fff;
  line-height: 1;
}
.production_text {
  width: min(calc(600 / var(--vw-min) * 100vw), 600px);
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  line-height: calc(33 / 16);
  letter-spacing: 0.03em;
  color: #fff;
  margin: min(calc(40 / var(--vw-min) * 100vw), 40px) auto 0;
}
.production_logo {
  width: min(calc(320 / var(--vw-min) * 100vw), 320px);
  height: min(calc(121 / var(--vw-min) * 100vw), 121px);
  background: url(../img/special/production_logo.png) no-repeat center center;
  background-size: contain;
  margin: 0 auto min(calc(15 / var(--vw-min) * 100vw), 15px);
}
@media screen and (max-width: 768px) {
  .production_ttl {
    font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
    line-height: calc(32 / 24);
    letter-spacing: 0.04em;
  }
  .production_text {
    width: 100%;
    font-size: calc(24 / var(--vw-min) * 100vw);
    line-height: calc(44 / 24);
    margin: min(calc(52 / var(--vw-min) * 100vw), 52px) auto 0;
    text-align: left;
  }
  .production_logo {
    width: calc(482 / var(--vw-min) * 100vw);
    height: calc(146 / var(--vw-min) * 100vw);
    background: url(../img/special/production_logo_sp.png) no-repeat center center;
    background-size: contain;
    margin: 0 auto min(calc(15 / var(--vw-min) * 100vw), 15px);
  }
}

.recordingItem {
  display: none;
  pointer-events: none;
}
body[data-cate="recording"] .recordingItem {
  display: block;
}
/*p-recordBg*/
.p-recordBgWrap {
  position: relative;
  padding: min(calc(50 / var(--vw-min) * 100vw), 50px) 0;

  position: absolute;
  top: min(calc(180 / var(--vw-min) * 100vw), 180px);
  width: 100%;
  height: calc(100% - min(calc(250 / var(--vw-min) * 100vw), 250px));
}
@media screen and (max-width: 768px) {
  .p-recordBgWrap {
    height: calc(100% - calc(300 / var(--vw-min) * 100vw));
  }
}

.p-recordBg {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}
.p-recordBg::before {
  content: "";
  display: block;
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/special/deco/p-record_bg_top.png), url(../img/special/deco/p-record_bg_btm.png);
  background-size: 100% auto, 100% auto;
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
}
.p-recordBg::after {
  content: "";
  display: block;
  z-index: -2;
  position: absolute;
  width: 100%;
  height: calc(100% - calc(110 / var(--vw-min) * 100vw));
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../img/special/deco/p-record_bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
@media screen and (max-width: 768px) {
  .p-recordBg::after {
    height: calc(100% - calc(80 / var(--vw-min) * 100vw));
  }
}
.p-recordBgWrap .special__content {
  width: min(calc(880 / var(--vw-min) * 100vw), 880px);
  margin: min(calc(50 / var(--vw-min) * 100vw), 50px) auto 0;
}
@media screen and (max-width: 768px) {
  .p-recordBgWrap .special__content {
    width: 100%;
    margin: calc(50 / var(--vw-min) * 100vw) auto 0;
    padding: 0 calc(50 / var(--vw-min) * 100vw);
  }
}
.p-recordBgWrap .production_text,
.p-recordBgWrap .item_title,
.p-recordBgWrap .item_text {
  color: #000;
}

.tab-content__inner {
  width: min(calc(880 / var(--vw-min) * 100vw), 880px);
  margin: min(calc(50 / var(--vw-min) * 100vw), 50px) auto 0;
}
@media screen and (max-width: 768px) {
  .tab-content__inner {
    width: 100%;
    padding: 0 calc(45 / var(--vw-min) * 100vw);
  }
}

.production_logo {
  width: min(calc(191 / var(--vw-min) * 100vw), 191px);
  height: min(calc(41 / var(--vw-min) * 100vw), 41px);
  background: url(../img/common/logo/logo_yoko.png) no-repeat center center;
  background-size: contain;
  margin: 0 auto min(calc(15 / var(--vw-min) * 100vw), 15px);
}
.pr_headTtlWrap {
  margin: min(calc(80 / var(--vw-min) * 100vw), 80px) auto min(calc(150 / var(--vw-min) * 100vw), 150px);
}
.pr_headTtl {
  text-align: center;
  background: url(../img/special/name_deco.png) no-repeat center bottom;
  background-size: min(calc(320 / var(--vw-min) * 100vw), 320px) auto;
  padding-bottom: min(calc(30 / var(--vw-min) * 100vw), 30px);
  margin-bottom: min(calc(60 / var(--vw-min) * 100vw), 60px);
}
.pr_headTtl .production_ttl {
  font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
  width: min(calc(460 / var(--vw-min) * 100vw), 460px);
  height: min(calc(47 / var(--vw-min) * 100vw), 47px);
  background: url(../img/special/p-record_logo.png) no-repeat center center;
  background-size: contain;
  line-height: calc(31 / 24);
  letter-spacing: 0.02em;
  font-weight: 600;
  margin: 0 auto;
}
.production_ttl_sub {
  color: #000;
  font-weight: 600;
  font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
}

/**/
.p-record__backLink {
  margin-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
  pointer-events: all;
}
.p-record__backLink .linkBox {
  display: block;
  position: relative;
  width: min(calc(300 / var(--vw-min) * 100vw), 300px);
  height: min(calc(48 / var(--vw-min) * 100vw), 48px);
  background: url(../img/radio/linkbtn_off.png) no-repeat center center / contain;
  transition: all 0.3s ease;
  color: #fff;
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  letter-spacing: 0.013em;
  font-family: source-han-serif-japanese, "bodoni-urw", serif;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.p-record__backLink .linkBox a {
  width: 100%;
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.p-record__backLink .linkBox:hover {
  background: url(../img/radio/linkbtn_on.png) no-repeat center center / contain;
}
.p-record__backLink .linkBox:hover a {
  color: #b64848;
}
@media screen and (max-width: 768px) {
  .p-record__backLink .linkBox {
    height: min(calc(64 / var(--vw-min) * 100vw), 64px);
    font-size: calc(22 / var(--vw-min) * 100vw);
    letter-spacing: 0.08em;
    width: 60vw;
    margin: calc(40 / var(--vw-min) * 100vw) auto 0;
  }
}
/*btn*/
.btn_moviePlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}