@charset "utf-8";

html {
  scroll-padding-top: 150px;
}

.content-title {
  margin-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
@media screen and (max-width: 768px) {
  .content-title {
    margin-left: calc(10 / var(--vw-min) * 100vw);
  }
}
@media screen and (max-width: 768px) {
  .content-titleWrap {
    overflow: hidden;
    display: block;
    position: relative;
  }
  .interview .content-title-navIn {
    position: absolute;
    right: 0;
    top: 0;
    height: calc(190 / var(--vw-min) * 100vw);
  }
  .interview .breadcrumbs li {
    white-space: nowrap;
  }
}
/*---------------------------------
* interview / content
----------------------------------*/
.content__aroundWrap {
  height: calc(100% - var(--footerHeight));
}
.interview {
  padding: min(calc(186 / var(--vw-min) * 100vw), 186px) 0 min(calc(310 / var(--vw-min) * 100vw), 310px);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .interview {
    padding: calc(170 / var(--vw-min) * 100vw) 0 calc(190 / var(--vw-min) * 100vw);
  }
}
.interview__content {
  width: min(calc(880 / var(--vw-min) * 100vw), 880px);
  margin: min(calc(70 / var(--vw-min) * 100vw), 70px) auto;
}

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

/*---------------------------------
* interviewListWrap
----------------------------------*/
/* interviewListWrap */
@media screen and (max-width: 768px) {
  .interviewListWrap {
    width: 80%;
    margin: 0 auto;
  }
}

/* interviewTit */
.interviewTit {
  text-align: center;
  margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .interviewTit {
    font-size: calc(30 / var(--vw-min) * 100vw);
    margin-bottom: calc(80 / var(--vw-min) * 100vw);
  }
}

.interviewTit > span {
  font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
  font-weight: 800;
  background: linear-gradient(transparent 70%, #b69848 30%);
  display: inline;
}
@media screen and (max-width: 768px) {
  .interviewTit > span {
    font-size: calc(30 / var(--vw-min) * 100vw);
    line-height: 1.5;
  }
}

.interviewTit img {
  margin-bottom: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
@media screen and (max-width: 768px) {
  .interviewTit img {
    margin-bottom: calc(20 / var(--vw-min) * 100vw);
  }
}

/* interviewImg */
.interviewImg {
  margin: min(calc(40 / var(--vw-min) * 100vw), 40px) 0;
}
.interviewImg img {
  width: 100%;
}
@media screen and (max-width: 768px) {
  .interviewImg {
    margin: calc(50 / var(--vw-min) * 100vw) 0;
  }
}

/* interviewTxt */
.interviewTxt {
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  letter-spacing: 0.2em;
  line-height: 2;
  margin: min(calc(40 / var(--vw-min) * 100vw), 40px) 0;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .interviewTxt {
    font-size: calc(24 / var(--vw-min) * 100vw);
    margin: calc(50 / var(--vw-min) * 100vw) 0;
  }
}

/* interviewCast */
.interviewCast {
  font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
  letter-spacing: 0.2em;
  line-height: 2.3;
}
@media screen and (max-width: 768px) {
  .interviewCast {
    font-size: calc(24 / var(--vw-min) * 100vw);
  }
}


/* interviewSubtxt */
.interviewSubtxt {
  margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .interviewSubtxt {
    font-size: calc(30 / var(--vw-min) * 100vw);
    margin-top: calc(80 / var(--vw-min) * 100vw);
  }
}

.interviewSubtxt > span {
  font-size: min(calc(17 / var(--vw-min) * 100vw), 17px);
  font-weight: 700;
  background: linear-gradient(transparent 70%, #b64848 30%);
  display: inline;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .interviewSubtxt > span {
    font-size: calc(27 / var(--vw-min) * 100vw);
    line-height: 1.5;
  }
}

/* interviewNav */
.interviewNav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.interviewNav li {
  width: calc(100% / 4);
  padding: 5px;
}
@media screen and (max-width: 768px) {
  .interviewNav ul {
    flex-direction: column;
  }
  .interviewNav li {
    width: 100%;
  }
}

/* collabo */
.collaboA,
.collaboB,
.collaboC,
.collaboD{
  font-weight: 800;
}
.collaboA {
  color: #bf954a;
}
.collaboB {
  color: #b64848;
}
.collaboD {
  color: #848685;
}

/* iv */
.iv {
  margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
  margin-bottom: min(calc(15 / var(--vw-min) * 100vw), 15px);
}
@media screen and (max-width: 768px) {
  .iv {
    margin-top: calc(80 / var(--vw-min) * 100vw);
    margin-bottom: calc(40 / var(--vw-min) * 100vw);
  }
}

/* icon */
.icon {
  font-size: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
@media screen and (max-width: 768px) {
  .icon {
    font-size: calc(17 / var(--vw-min) * 100vw);
  }
}

/*---------------------------------
* youtube
----------------------------------*/
.youtubeWrap {
  display: flex;
  justify-content: center;
}

.youtubeWrap iframe {
  width: min(calc(720 / var(--vw-min) * 100vw), 720px);
  height: min(calc(404 / var(--vw-min) * 100vw), 404px);
}

@media screen and (max-width: 768px) {
  .youtubeWrap iframe {
    width: 100%;
    height: calc(340 / var(--vw-min) * 100vw);
  }
}

/*---------------------------------
* linkBox
----------------------------------*/
.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;
}
.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;
}

@media screen and (max-width: 768px) {
  .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);
  }
}

.linkBox_nav {
  width: min(calc(210 / var(--vw-min) * 100vw), 210px);
}
@media screen and (max-width: 768px) {
  .linkBox_nav {
    width: 100%;
    margin: calc(10 / var(--vw-min) * 100vw) auto 0;
  }
}