@charset "UTF-8";

/* ===================================
	File Name   : interview.css
	Description : Interview Page's Layout CSS
	Editor      : Bface Saeki
	Last Editor : Bface Saeki
	
	Update Description :
  [2025/04/23] 英語サイトにあわせて余白調整
	[2021/04/12] 2022改訂調整
	[2020/07/04] 2021インタビュー追加
	[2020/04/28] 新規作成

====================================== */

/*========== Style Contents ==========

	1. Share Elements
	2. Top Page
	3. Exhibit Top Page
	4. Visitor Top Page
	5. Detail Pages
	
====================================== */



/*===== ■1. Share Elements =====*/
/* #visual { background-image: url(../img/interview/img-visual.jpg);} */
a.comingsoon {
  display: block;
  position: relative;
  pointer-events: none;
  text-decoration: none;
}
a.comingsoon::before,
a.comingsoon::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;

}
a.comingsoon::before {
  height: 100%;
  background: rgba(0,0,0,.25);
  content: "";
}
a.comingsoon::after {
  top: 50%;
  padding: 15px 0;
  background: rgba(255,255,255,.9);
  color: #c00;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  transform: translateY(-50%);
  content: "動画は近日公開！";
}


/*===== ■2. Top Page =====*/
#interview_top li#intro_exhibit .cover span { background-image: url("../img/interview/img-visual-exhibit.jpg");}
#interview_top li#intro_visitor .cover span { background-image: url("../img/interview/img-visual-visitor.jpg");}


@media (max-width: 768px) {
  #interview_top li#intro_exhibit { background-image: url("../img/interview/img-visual-exhibit.jpg");}
  #interview_top li#intro_visitor { background-image: url("../img/interview/img-visual-visitor.jpg");}
}





/*===== ■3. Exhibit Top Page =====*/
#interview_exhibit section section {
  padding: 0;
}

#interview_exhibit #about_preface p {
  margin: 60px 20px 0;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

#interview_exhibit #tabs li {
  margin: 0 40px -1px 0;
}
#interview_exhibit #tabs li::after {
  width: 40px;
}

#interview_exhibit #tabs li p b {
  font-size: 1.4rem;
}



@media (max-width: 768px) {
  #interview_exhibit #tabs li {
    padding: 1.34vw 1%;
  }
  #interview_exhibit #tabs li p b {
    font-size: 1.2rem;
  }
  #interview_exhibit #about_preface p {
    margin: 6.67vw 5.34vw 0;
    text-align: left;
    font-size: 1.4rem;
  }
  #interview_exhibit #tabs li {
    margin: 0 0 -0.27px;
  }
  #interview_exhibit #tabs li::after {
    content: none;
  }
}

#interview_exhibit #tabs {
  margin: 0 auto;
}

#interview_exhibit .inner > section section:nth-last-child(-n+2) { margin-bottom: 0;}

#interview_exhibit .inner > section > p {
  margin-bottom: 30px;
  font-size: 1.8rem;
  text-align: center;
}

#interview_exhibit .inner section:not(#interview_video) figure {
  margin-bottom: 20px;
}

#interview_exhibit .inner section:not(#interview_video) figure > img {
  max-width: 100%;
}

#interview_exhibit .inner figure.movie {
  text-align: center;
}
#interview_exhibit .inner figure.movie a {
  position: relative;
  display: block;
}

#interview_exhibit .inner figure.movie a > img {
  max-width: 100%;
}

#interview_exhibit .inner figure.movie a::before {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  background: url(../img/interview/img-movie.png) no-repeat center / contain;
  content: "";
  z-index: 1;
}
#interview_exhibit .inner figure.movie a::after {
  position: absolute;
  bottom: 0;
  right: 0;
  border-left: 70px solid transparent;
  border-bottom: 70px solid #8a0e10;
  content: "";
}

#interview2021 .inner section p em,
#interview2020 .inner section p em {
  display: block;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
}

#interview2021_02 .inner section dt,
#interview2021 .inner section dt,
#interview2020 .inner section dt {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-weight: bold;
  counter-increment: num;
}

#interview2021_02 .inner section dt span,
#interview2021 .inner section dt span,
#interview2020 .inner section dt span { flex: 1;}

#interview2021_02 .inner section dt::before,
#interview2021 .inner section dt::before,
#interview2020 .inner section dt::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 5px;
  border-radius: 50%;
  background: #c00;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
  content: "Q" counter(num);
}

#interview2021_02 .inner section dd,
#interview2021 .inner section dd,
#interview2020 .inner section dd { margin: 0 0 20px 35px;}

#interview2021 .inner section dd span,
#interview2020 .inner section dd span { color: #d71518;}

#interview2021_02 .inner section a.boxlink,
#interview2021 .inner section a.boxlink,
#interview2020 .inner section a.boxlink { margin-top: 20px;}

#interview2019 .inner section p { margin-bottom: 20px;}
#interview2019 .inner section p > span { color: #d71518;}

#interview2019 .inner section p a.pdflink span { margin-top: 10px;}

#interview2019 .inner section dl { border-left: 1px solid #333;}
#interview2019 .inner section dt {
  padding: 5px 0 5px 5px;
  border-left: 4px solid #333;
}
#interview2019 .inner section dd {
  padding: 5px 0 5px 10px;
  font-size: 1.4rem;
}

#interview2019 .inner section dd p {
  margin-bottom: 5px;
  font-size: 1.4rem;
}

#interview2019 .inner section dd p em {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  background: #333;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}

#interview2021_02 .inner section dd > span.right {
 float: right;
 width: 200px;
 margin: 10px;
}
#interview2021_02 .inner section dd > span.left {
 float: left;
 width: 200px;
 margin: 10px;
}
#interview2021_02 .inner p {
  margin-bottom: 20px;
}


@media (max-width: 768px) {
  #interview_exhibit .inner > section section:nth-last-child(-n+2) { margin-bottom: 8vw;}
  #interview_exhibit .inner > section section:last-of-type { margin-bottom: 0;}
  
  #interview_exhibit .inner > section > p {
    margin-bottom: 5.34vw;
    font-weight: bold;
    font-size: 1.6rem;
  }
  
  #interview_exhibit .inner section:not(#interview_video) figure {
    margin-bottom: 2.67vw;
  }
  
  #interview_exhibit .inner figure.movie a::before {
    bottom: 1.34vw;
    right: 1.34vw;
    width: 6.67vw;
    height: 5.34vw;
  }
  #interview_exhibit .inner figure.movie a::after {
    border-left: 14.67vw solid transparent;
    border-bottom: 14.67vw solid #8a0e10;
  }
  
  #interview2021_02 .inner section p em,
  #interview2021 .inner section p em,
  #interview2020 .inner section p em {
    margin-bottom: 2.67vw;
    padding-bottom: 2.67vw;
    font-size: 1.4rem;
  }

  #interview2021_02 .inner section dt,
  #interview2021 .inner section dt,
  #interview2020 .inner section dt { margin-bottom: 1.34vw;}

  #interview2021_02 .inner section dt::before,
  #interview2021 .inner section dt::before,
  #interview2020 .inner section dt::before {
    width: 5.34vw;
    height: 5.34vw;
    margin-right: 1.34vw;
    padding: .67vw;
    font-size: 1.2rem;
  }


  #interview2021_02 .inner section dd,
  #interview2021 .inner section dd,
  #interview2020 .inner section dd { margin: 0 0 5.34vw 8vw;}

  #interview2021_02 .inner section a.boxlink,
  #interview2021 .inner section a.boxlink,
  #interview2020 .inner section a.boxlink { margin-top: 5.34vw;}
  
  #interview2019 .inner section p { margin-bottom: 4vw;}

  #interview2019 .inner section p a.pdflink span { margin-top: 2.67vw;}

  #interview2019 .inner section dt {
    padding: 1.34vw 0 1.34vw 1.34vw;
    border-left: 4px solid #333;
  }
  #interview2019 .inner section dd {
    padding: 1.34vw 0 1.34vw 2.67vw;
    font-size: 1.2rem;
  }

  #interview2019 .inner section dd p {
    margin-bottom: 1.34vw;
    font-size: 1.2rem;
  }

  #interview2019 .inner section dd p em {
    padding: 1.34vw 2.67vw;
    font-size: 1.2rem;
  }
  #interview2021_02 .inner section dd > span.right {
    width: auto;
    margin: 0 0 2.67vw;
   }
   #interview2021_02 .inner section dd > span.left {
    width: auto;
    margin: 0 0 2.67vw;
   }
   
  #interview2021_02 .inner p {
    margin-bottom: 5.34vw;
  }
}



/*===== ■4. Visitor Top Page =====*/
#interview_visitor #visual { background-image: url("../img/interview/img-visual-visitor.jpg");}

#interview_visitor #interview_visitor_preface p {
  margin: 60px 20px 0;
  text-align: center;
  font-weight: 700;
  font-size: 2rem;
}

#interview_visitor #tabs {
  margin: 0 auto;
}

#interview_visitor #tabs li {
  margin: 0 30px -1px 0;
  padding: 15px 1%;
}

#interview_visitor #tabs li::after {
  width: 30px;
}

#interview_visitor #tabs li.active {
  padding: 20px 1%;
}


#interview_visitor #tabs li p b {
  font-size: 1.4rem;
}


@media (max-width: 768px) {
  #interview_visitor #interview_visitor_preface p {
    margin: 6.67vw 5.34vw 0;
    text-align: left;
    font-size: 1.4rem;
  }
  #interview_visitor #tabs li {
    margin: 0 0 -0.27px;
    padding: 1.34vw;
  }
  #interview_visitor #tabs li::after {
    content: none;
  }
    #interview_visitor #tabs li.active {
    padding: 1.34vw;
  }
  #interview_visitor #tabs li p {
    font-size: 1.1rem;
  }
  #interview_visitor #tabs li p b {
    font-size: 1.0rem;
  }
}




/*===== ■5. Detail Pages =====*/
#interview_visitor #visitor_detail #detail_intro {
  display: flex;
  align-items: flex-start;
}

#interview_visitor #visitor_detail #detail_intro > div {
  order: 1;
  flex: 1;
  margin-right: 20px;
}

#interview_visitor #visitor_detail #detail_intro figure {
  order: 2;
  width: calc(50% - 20px);
  max-width: 640px;
  margin: 0 0 20px 20px;
  padding: 0 20px 20px;
  background: rgba(255, 255, 255, .5);
}

#interview_visitor #visitor_detail .tit_fill {
  margin-bottom: 20px;
  text-align: left;
  line-height: 1.5;
}

#interview_visitor #visitor_detail dd {  margin: 0 10px 30px;}

#interview_visitor #visitor_detail dd p:not(:last-child) { margin-bottom: 10px;}


@media (max-width: 768px) {
  #interview_visitor #visitor_detail #detail_intro { display: block;}
  
  #interview_visitor #visitor_detail #detail_intro > div { margin-right: 0;}

  #interview_visitor #visitor_detail #detail_intro figure {
    width: 80%;
    margin: 0 auto 5.34vw;
    padding: 2.67vw;
  }

  #interview_visitor #visitor_detail .tit_fill { margin-bottom: 2.67vw;}

  #interview_visitor #visitor_detail dd { margin: 0 2.67vw 5.34vw;}

  #interview_visitor #visitor_detail dd p:not(:last-child) { margin-bottom: 2.67vw;}

}