@charset "UTF-8";
/*
---------------------------------------------------------------------------------------------------------------------
インタビュー　アーカイブ
---------------------------------------------------------------------------------------------------------------------
*/
.grid-interview {
  max-width: 1300px;
  margin: 100px auto 100px;
  width: 94%; }
  .grid-interview .o-6column .col-lg-6 {
    padding: 0; }
  .grid-interview .o-6column {
    margin: 0 0; }
  @media (min-width: 1200px) {
    .grid-interview {
      margin: 160px auto 160px; } }

.learn-more {
  max-width: 1200px;
  width: 90%;
  margin: auto; }
  .learn-more h3 {
    font-size: 1.6em; }

.interview-box {
  position: relative; }
  .interview-box a:hover .iCatch > img {
    transform: scale(1.02); }
  .interview-box a:hover .title-name > .title > h3 {
    color: #F1FF4E; }
  .interview-box a:hover .title-name > svg > g > .st0 {
    fill: #F1FF4E; }
  .interview-box a:hover .title > h3 {
    color: #F1FF4E; }
  .interview-box a:hover .title > svg > g > .st0 {
    fill: #F1FF4E; }
  .interview-box a .iCatch {
    position: relative;
    overflow: hidden;
    z-index: 1; }
    .interview-box a .iCatch img {
      transition-duration: 0.8s;
      transform: scale(1); }
  .interview-box a .title-name {
    position: absolute;
    bottom: 10px;
    left: 10px;
    width: 100%;
    z-index: 10; }
    @media (min-width: 1200px) {
      .interview-box a .title-name {
        bottom: 20px;
        left: 20px; } }
    .interview-box a .title-name svg {
      position: absolute;
      bottom: 10px;
      right: 10px;
      display: flex;
      margin: auto;
      width: 30px; }
      @media (min-width: 768px) {
        .interview-box a .title-name svg {
          right: 20px; } }
      @media (min-width: 1200px) {
        .interview-box a .title-name svg {
          width: 40px;
          right: 40px; } }
      .interview-box a .title-name svg .st0 {
        fill: #fff;
        transition: .5s; }
      .interview-box a .title-name svg .st1 {
        fill: #222324;
        transition: .5s; }
  .interview-box a .title {
    position: relative;
    margin-top: 10px; }
    @media (min-width: 1200px) {
      .interview-box a .title {
        margin-top: 20px; } }
    .interview-box a .title h3 {
      font-size: 0.9em;
      line-height: 1.4em;
      text-align: justify;
      color: #fff;
      transition: .5s;
      width: calc(100% - 45px); }
      @media (min-width: 1024px) {
        .interview-box a .title h3 {
          font-size: 1.0em;
          width: calc(100% - 55px); } }
      @media (min-width: 1200px) {
        .interview-box a .title h3 {
          font-size: 1.25em; } }
    .interview-box a .title svg {
      position: absolute;
      top: 10px;
      right: 0;
      display: flex;
      margin: auto;
      width: 30px; }
      @media (min-width: 1024px) {
        .interview-box a .title svg {
          width: 40px; } }
      .interview-box a .title svg .st0 {
        fill: #fff;
        transition: .5s; }
      .interview-box a .title svg .st1 {
        fill: #222324;
        transition: .5s; }
  .interview-box a .name {
    display: flex;
    color: #fff;
    margin-top: 10px; }
    .interview-box a .name h4 {
      font-family: bebas-kai, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 2.5em;
      line-height: 0.95em;
      margin-right: 10px; }
      @media (min-width: 1200px) {
        .interview-box a .name h4 {
          font-size: 3em; } }
    .interview-box a .name h5 {
      font-size: 0.8em;
      font-weight: 400;
      line-height: 1.4em; }
      @media (min-width: 1200px) {
        .interview-box a .name h5 {
          font-size: 0.9em; } }

/*
---------------------------------------------------------------------------------------------------------------------
インタビュー　投稿
---------------------------------------------------------------------------------------------------------------------
*/
#interview-header {
  position: relative;
  max-width: 2000px;
  margin: auto; }

.copy-name-box {
  position: relative;
  max-width: 960px;
  margin: -20px auto 0;
  width: 95%;
  background-color: #F1FF4E;
  color: #000;
  padding: 30px 20px; }
  @media (min-width: 768px) {
    .copy-name-box {
      margin: -40px auto 0;
      padding: 60px 40px; } }
  @media (min-width: 1200px) {
    .copy-name-box {
      margin: -80px auto 0;
      padding: 80px 60px; } }
  .copy-name-box h2 {
    font-size: 1.25em;
    line-height: 1.4em;
    text-align: justify; }
    @media (min-width: 768px) {
      .copy-name-box h2 {
        font-size: 1.6em; } }
    @media (min-width: 1200px) {
      .copy-name-box h2 {
        font-size: 2.25em; } }
  .copy-name-box .name {
    margin-top: 20px; }
    @media (min-width: 768px) {
      .copy-name-box .name {
        display: flex;
        align-items: center; } }
    @media (min-width: 1200px) {
      .copy-name-box .name {
        margin-top: 40px; } }
    .copy-name-box .name h3 {
      font-family: bebas-kai, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 3.0em;
      line-height: 0.8em;
      text-align: justify; }
      @media (min-width: 768px) {
        .copy-name-box .name h3 {
          font-size: 3.5em; } }
      @media (min-width: 1200px) {
        .copy-name-box .name h3 {
          font-size: 4.0em; } }
    .copy-name-box .name p {
      font-size: 0.9em;
      line-height: 1.4em;
      margin-top: 10px; }
      @media (min-width: 768px) {
        .copy-name-box .name p {
          margin: 0 0 0 20px; } }
      @media (min-width: 1200px) {
        .copy-name-box .name p {
          font-size: 1.0em; } }

#talk-area {
  max-width: 960px;
  margin: 0 auto;
  width: 95%;
  background-color: #fff;
  color: #000;
  padding: 60px 0; }
  @media (min-width: 1200px) {
    #talk-area {
      padding: 100px 0 140px; } }
  #talk-area p {
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.8em;
    text-align: justify; }
    @media (min-width: 768px) {
      #talk-area p {
        font-size: 1.0em; } }
    @media (min-width: 1200px) {
      #talk-area p {
        font-size: 1.125em; } }
  #talk-area .talk-area-in {
    max-width: 580px;
    margin: auto;
    width: 90%; }
    #talk-area .talk-area-in .prologue {
      border-bottom: 1px solid #979BA0;
      padding-bottom: 40px; }
      @media (min-width: 1200px) {
        #talk-area .talk-area-in .prologue {
          padding-bottom: 80px; } }
      #talk-area .talk-area-in .prologue p {
        font-weight: bold; }
    #talk-area .talk-area-in .talk-box {
      margin-top: 40px; }
      @media (min-width: 1200px) {
        #talk-area .talk-area-in .talk-box {
          margin-top: 80px; } }
      #talk-area .talk-area-in .talk-box h2 {
        font-size: 1.125em;
        line-height: 1.4em;
        text-align: justify; }
        @media (min-width: 768px) {
          #talk-area .talk-area-in .talk-box h2 {
            font-size: 1.25em; } }
        @media (min-width: 1200px) {
          #talk-area .talk-area-in .talk-box h2 {
            font-size: 1.75em; } }
      #talk-area .talk-area-in .talk-box ul {
        margin-top: 40px; }
        @media (min-width: 1200px) {
          #talk-area .talk-area-in .talk-box ul {
            margin-top: 80px; } }
        #talk-area .talk-area-in .talk-box ul li {
          margin-bottom: 20px; }
          @media (min-width: 1200px) {
            #talk-area .talk-area-in .talk-box ul li {
              margin-bottom: 40px; } }
          #talk-area .talk-area-in .talk-box ul li:last-child {
            margin-bottom: 0; }
          #talk-area .talk-area-in .talk-box ul li h3 {
            font-size: 1em;
            font-weight: bold;
            line-height: 1.25em;
            border-left: 4px solid #000;
            padding-left: 10px; }
            @media (min-width: 768px) {
              #talk-area .talk-area-in .talk-box ul li h3 {
                font-size: 1.125em; } }
            @media (min-width: 1200px) {
              #talk-area .talk-area-in .talk-box ul li h3 {
                font-size: 1.25em; } }
          #talk-area .talk-area-in .talk-box ul li p u {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15%, #F1FF4E 15%, #F1FF4E 85%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%);
            text-decoration: none; }
    #talk-area .talk-area-in .photo-in {
      margin-top: 40px; }
      @media (min-width: 1200px) {
        #talk-area .talk-area-in .photo-in {
          margin-top: 80px; } }
  #talk-area .photo {
    margin-top: 40px; }
    @media (min-width: 1200px) {
      #talk-area .photo {
        margin-top: 80px; } }
    #talk-area .photo ul {
      display: flex; }

#interview-other {
  margin-top: 100px; }
  @media (min-width: 768px) {
    #interview-other {
      margin-top: 160px; } }
  @media (min-width: 1200px) {
    #interview-other {
      margin-top: 200px; } }
  #interview-other .midashi {
    display: flex;
    align-items: center;
    padding: 0 0 0 4%;
    margin-bottom: 20px; }
    @media (min-width: 768px) {
      #interview-other .midashi {
        padding: 0 0 0 5%;
        margin-bottom: 40px; } }
    #interview-other .midashi h2 {
      font-family: bebas-kai, sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 2.0em;
      line-height: 0.8em;
      margin-right: 10px; }
      @media (min-width: 768px) {
        #interview-other .midashi h2 {
          font-size: 3.0em; } }
      @media (min-width: 1200px) {
        #interview-other .midashi h2 {
          font-size: 4.0em; } }
    #interview-other .midashi h3 {
      font-size: 1.0em; }
      @media (min-width: 768px) {
        #interview-other .midashi h3 {
          font-size: 1.25em; } }
      @media (min-width: 1200px) {
        #interview-other .midashi h3 {
          font-size: 1.5em; } }
  #interview-other .interview-card {
    padding: 50px 0 0 4%;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: -50px; }
    @media (min-width: 768px) {
      #interview-other .interview-card {
        padding: 70px 0 0 5%;
        margin-top: -70px; } }
    #interview-other .interview-card .swiper-slide {
      width: 300px;
      margin: 0 15px 0 0; }
      @media (min-width: 768px) {
        #interview-other .interview-card .swiper-slide {
          width: 350px;
          margin: 0 20px 0 0; } }
      @media (min-width: 1250px) {
        #interview-other .interview-card .swiper-slide {
          width: 400px;
          margin: 0 30px 0 0; } }
      #interview-other .interview-card .swiper-slide:last-child {
        margin-right: 3%; }
  #interview-other .swiper-button-prev, #interview-other .swiper-button-next {
    top: 30px;
    right: 10px; }
    @media (min-width: 1024px) {
      #interview-other .swiper-button-prev, #interview-other .swiper-button-next {
        right: 20px; } }
  #interview-other .swiper-button-prev {
    right: 46px;
    left: inherit; }
    @media (min-width: 1024px) {
      #interview-other .swiper-button-prev {
        right: 75px; } }