@charset "UTF-8";

.mac body {
  font-family: "Noto Sans CJK JP", "Noto Sans", sans-serif;
}

/* 共通クラス：改行に関して
**********************************************************/
.u-pc {
	display: block !important;
}

.u-sp {
	display: none !important;
}

@media only screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
  
  .u-sp {
    display: block !important;
  }
}



/* コンテンツ中身のスタイルに関して
**********************************************************/
.m-interviews .wrap-design.recruit .contents:before {
  content: '';
  position: absolute;
  top: 0;
  right: -110px;
  display: block;
  min-width: 1430px;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.m-interviews .wrap-design.interview-index .contents:after {
  font-family: 'HelveticaNeue Condensed', 'Archivo Narrow', sans-serif;
  font-weight: 600;
  color: #f1f7f7;
  content: '';
  display: block;
  position: absolute;
  top: 0;
  text-align: right;
  font-style: italic;
  font-size: 110px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.m-interviews .wrap-design.recruit .contents-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 75px 105px 100px 80px;
  position: relative;
}

@media only screen and (max-width: 767px) {
  .m-interviews .wrap-design.recruit .contents-inner {
    padding: 0 15px 60px;
  }
}



/* DESIGNER'S INTERVIEW の中身のスタイルに関して
**********************************************************/
.m-interviews .wrap-design.interview .contents.c-designers-interview:before {
  background: #fff;
  right: -110px;
}

.m-interviews .wrap-design.interview-index .contents.c-designers-interview:after {
  content: 'DESIGNER’S INTERVIEW';
  right: 0;
}

@media only screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-designers-interview:after {
    font-size: 80px;
    left: 10px !important;
    right: auto !important;
  }
}

@media screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .c-designers-interview .contents-inner.interview-list-wrapp {
    padding: 0px 15px 60px;
  }
}

.m-interviews .wrap-design.interview-index .contents.c-designers-interview .hdg-lv3 {
  text-align: center;
  color: #313131;
  font-weight: 600;
}

.m-interviews .wrap-design.interview-index .contents.c-designers-interview .hdg-lv3:after {
  background: #313131;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-designers-interview .hdg-lv3 {
    padding-top: 55px;
    text-align: left;
    font-size: 18px;
  }

  .m-interviews .wrap-design.interview-index .contents.c-designers-interview .hdg-lv3:after {
    left: 16px;
  }
}

.m-interviews .wrap-design.interview-index .contents.c-designers-interview .txt-lead {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 2.25;
  color: #333;
  text-align: center;
  padding-bottom: 0;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-designers-interview .txt-lead {
    font-size: 14px;
    text-align: left;
    line-height: 1.78;
  }
}

.m-interviews .wrap-design.interview-index .c-designers-interview .contents-inner .list-profile {
  flex-wrap: nowrap;
}

@media screen and (min-width: 767px) {
  .m-interviews .wrap-design.interview-index .c-designers-interview .contents-inner .block-profile {
    margin: 60px 5px 0 5px;
  }
}

@media screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .c-designers-interview .contents-inner .block-profile:nth-child(2) {
    margin-top: 30px;
  }
}

.c-designers-interview .contents-inner .txt-attention {
  padding: 20px 0 0 !important;
}



/* TALK & INTERVIEW の中身のスタイルに関して
**********************************************************/
.c-talk-interview .contents-inner {
  z-index: auto !important;
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview:before {
  background: #fff;
  left: -110px;
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview::after {
  content: 'TALK & INTERVIEW';
  left: 0;
  opacity: 0;
  transition: 0.5s;
}

@media only screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-talk-interview:after {
    font-size: 80px;
    left: 10px !important;
    right: auto !important;
  }
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview .hdg-lv3 {
  text-align: center;
  color: #313131;
  font-weight: 600;
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview .hdg-lv3:after {
  background: #313131;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media only screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-talk-interview .hdg-lv3 {
    padding-top: 55px;
    text-align: left;
    font-size: 18px;
  }

  .m-interviews .wrap-design.interview-index .contents.c-talk-interview .hdg-lv3:after {
    left: 16px;
  }
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview .txt-lead {
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: 2.25;
  color: #333;
  text-align: center;
  padding-bottom: 0;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .m-interviews .wrap-design.interview-index .contents.c-talk-interview .txt-lead {
    font-size: 14px;
    text-align: left;
    line-height: 1.78;
  }
}

.c-talk-interview .m-card {
  position: relative;
}

.c-talk-interview .m-card .card {
  display: flex;
  position: relative;
  background: #303131;
  margin-top: 100px;
  margin-left: 15px;
}

.c-talk-interview .m-card:nth-of-type(2) .card {
  flex-direction: row-reverse;
  margin-right: 15px;
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  .c-talk-interview .m-card {
    height: 100%;
  }

  .c-talk-interview .m-card .card {
    flex-wrap: wrap;
    margin-top: 30px;
    margin-left: 15px;
  }

  .c-talk-interview .m-card:nth-of-type(2) .card {
    margin-right: 0;
    margin-left: 15px;
  }
}

.c-talk-interview .m-card .card .imgbox {
  position: relative;
  top: -30px;
  left: -15px;
  width: 725px;
}

.c-talk-interview .m-card:nth-of-type(2) .card .imgbox {
  left: 15px;
}

.c-talk-interview .m-card .card .imgbox img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .c-talk-interview .m-card .card .imgbox {
    margin-bottom: 0;
    top: -8px;
    left: -8px;
    position: absolute;
    width: 100%;
  }

  .c-talk-interview .m-card:nth-of-type(2) .card .imgbox {
    top: -8px;
    left: -8px;
  }
}

.c-talk-interview .m-card .card .txtbox {
  width: 425px;
  align-content: center;
  margin: 0 auto;
}

.c-talk-interview .m-card .card .txtbox .talk-title {
  color: #FFFFFF;
  text-align: center;
  font-size: 26px;
  line-height: 1.2;
}

.c-talk-interview .m-card .card .txtbox .talk-title span {
  font-size: 14px;
}

.c-talk-interview .m-card .card .txtbox .talk-txt {
  color: #FFFFFF;
  font-size: 14px;
  padding: 20px 15px 20px 5px;
}

.c-talk-interview .m-card:nth-of-type(2) .card .txtbox .talk-txt {
  padding: 20px 0 20px 18px;
}

@media screen and (max-width: 767px) {
  .c-talk-interview .m-card .card .txtbox {
    width: 100%;
    align-content: center;
    margin: 0 auto;
    margin-top: 50vw;
  }

  .c-talk-interview .m-card .card .txtbox .talk-title {
    padding-top: 0;
  }

  .c-talk-interview .m-card .card .txtbox .talk-txt {
    padding: 20px;
  }

  .c-talk-interview .m-card:nth-of-type(2) .card .txtbox .talk-txt {
    padding: 20px;
  }
}

.c-talk-interview .contents-inner .txt-attention {
  display: block;
  text-align: right;
  font-size: 13px;
  padding: 20px 0 0;
  /* font-family: "Noto Sans CJK JP", "Noto Sans", sans-serif; */
}

@media screen and (max-width: 767px) {
  .c-talk-interview .contents-inner .txt-attention {
    font-size: 10px;
    padding: 20px 0 0;
  }
}



/* モーダルのスタイルに関して
**********************************************************/
.m-interviews .wrap-design.interview-index .contents.c-talk-interview.js-anim2,
.m-interviews .wrap-design.interview-index .contents.c-talk-interview.js-anim2.anim,
.m-card.js-anim.anim,
.m-card.js-anim {
  transform: none;
}

.m-interviews .wrap-design.interview-index .contents.c-talk-interview.js-anim2.anim::after {
  left: 50px;
  opacity: 1;
}

.m-card.js-anim {
  position: relative;
  transition: .5s;
  top: 30px;
}

.m-card.js-anim.anim {
  top: 0;
}

.c-talk-interview .m-card .modal-content {
  background-color: #fff;
}

.c-talk-interview .m-card .modal-content .modal-header button span {
  cursor: pointer;
}

.c-talk-interview .m-card .imgbox::after {
  content: url(/K14/Image/modal/icon_modal_movie.png);
  position: absolute;
  width: 84px;
  height: 44px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  cursor: pointer;
}

.c-talk-interview .m-card .js-modalMovie_trigger-youtube:after {
  content: none;
}

@media screen and (max-width: 767px) {
  .c-talk-interview .m-card .modal {
    top: 0% !important;
    position: fixed !important;
  }

  .c-talk-interview .m-card .js-modalMovie_trigger-youtube:after {
    margin: -52px 0 0 -216px;
  }
}