@charset "utf-8";

:root {
 --vw: 1 / 1000 * min(100vw, 2000px);

 @media only screen and (max-width: 760px) {
  --vw: 1 / 375 * 100vw;
 }
}

/* Main Visual
=======================================*/
.main_visual {
 margin-bottom: calc(80 * var(--vw));

 @media only screen and (max-width: 760px) {
  margin-bottom: calc(60 * var(--vw));
 }

 .mv_img {
  position: relative;

  picture {
   img {
    width: 100%;
   }
  }

  .lens {
   margin-top: calc(-125 * var(--vw));

   @media only screen and (max-width: 760px) {
    margin-top: calc(-100 * var(--vw));
   }

   img {
    display: block;
    margin-inline: auto;
    width: auto;
    height: calc(250 * var(--vw));

    @media only screen and (max-width: 760px) {
     max-width: 100%;
     height: calc(200 * var(--vw));
     object-fit: contain;
    }
   }
  }
 }

 .mv_ttl {
  @media only screen and (max-width: 760px) {
   padding-inline: calc(20 * var(--vw));
  }

  .title {
   margin: 0 0 calc(15 * var(--vw));
   font-size: calc(28 * var(--vw));

   @media only screen and (max-width: 760px) {
    font-size: calc(24 * var(--vw));
   }
  }

  .catch {
   margin: 0 0 calc(30 * var(--vw));
   font-size: calc(24 * var(--vw));

   @media only screen and (max-width: 760px) {
    font-size: calc(20 * var(--vw));
   }
  }

  .author {
   font-size: calc(18 * var(--vw));

   @media only screen and (max-width: 760px) {
    font-size: calc(14 * var(--vw));
   }
  }
 }
}

/* Main
=======================================*/
.interview_container {
 margin-inline: auto;
 padding-inline: calc(20 * var(--vw));
 max-width: calc(880 * var(--vw));
}

.interview_section {
 margin-bottom: calc(80 * var(--vw));
 font-size: calc(14 * var(--vw));
 line-height: 2;
 text-align: left;

 @media only screen and (max-width: 760px) {
  margin-bottom: calc(60 * var(--vw));
  font-size: calc(16 * var(--vw));
 }

 &:has(+ .interview_photo) {
  margin-bottom: 1lh;
 }

 .title_underline,
 .title_underline_center {
  display: block;
  margin: 0 0 calc(40 * var(--vw));
  font-weight: bold;
  font-size: calc(22 * var(--vw));
  line-height: 1.5;

  @media only screen and (max-width: 760px) {
   margin-bottom: calc(30 * var(--vw));
   font-size: calc(18 * var(--vw));
  }
 }

 .title_underline {
  padding: 0 0 calc(15 * var(--vw));
  border-bottom: 3px solid #ffe200;
  text-align: inherit;
  &::after {
   content: none;
  }
 }

 .title_underline_center {
  text-align: center;
  &::after {
   content: "";
   display: block;
   width: calc(72 * var(--vw));
   height: calc(3 * var(--vw));
   margin: calc(15 * var(--vw)) auto 0;
   background-color: #ffe200;
  }
 }

 .title_normal {
  display: block;
  margin: 0 0 calc(15 * var(--vw));
  font-weight: bold;
  font-size: calc(16 * var(--vw));
  line-height: 1.5;
  text-align: inherit;

  @media only screen and (max-width: 760px) {
   font-size: calc(18 * var(--vw));
  }

  &::after {
   content: none;
  }
 }

 p:not(:last-child) {
  margin: 0 0 1lh;
 }

 .talk_q {
  display: flex;
  color: #0900e3;

  &::before {
   flex-shrink: 0;
   min-width: 2em;
   content: "——";
  }
 }

 .talk_a {
  display: flex;

  .name {
   flex-shrink: 0;

   &::after {
    content: "：";
   }
  }
 }

 .align_right {
  text-align: right;
 }

 .align_center {
  text-align: center;
 }

 .photo_caption {
  margin: 0.5em 0 0;
  font-size: calc(12 * var(--vw));
  line-height: 1.5;
  text-align: left;
 }
}

/* Intro
=======================================*/
.interview_intro {
 position: relative;
 display: flex;

 @media only screen and (max-width: 760px) {
  flex-direction: column;
 }

 &::before {
  @media only screen and (min-width: 761px) {
   content: "";
   position: absolute;
   top: calc(30 * var(--vw));
   right: 0;
   z-index: 1;
   display: block;
   width: calc(100% - (30 * var(--vw)));
   height: 100%;
   background-color: #f4f4f4;
  }
 }

 > * {
  position: relative;
  z-index: 2;
 }

 .photo {
  width: calc(500 * var(--vw));

  @media only screen and (max-width: 760px) {
   width: 100%;
  }

  img {
   display: block;
   width: 100%;
   height: auto;
  }
 }

 .body {
  flex: 1;
  padding: calc(60 * var(--vw)) calc(30 * var(--vw)) calc(30 * var(--vw));

  @media only screen and (max-width: 760px) {
   padding: calc(30 * var(--vw));
   background-color: #f4f4f4;
  }
 }
}

/* Photo
=======================================*/
.interview_photo {
 margin: 1lh auto;

 @media only screen and (min-width: 761px) {
  width: calc(375 * var(--vw));
 }

 img {
  display: block;
  width: 100%;
  height: auto;
 }
}

.interview_photo_block {
 display: grid;
 grid-template-columns: calc(440 * var(--vw)) 1fr;
 background-color: #f4f4f4;

 @media only screen and (min-width: 761px) {
  align-items: center;
 }

 @media only screen and (max-width: 760px) {
  grid-template-columns: 1fr;
 }

 .photo {
  img {
   display: block;
   width: 100%;
   height: auto;
  }
 }

 .body {
  padding: calc(30 * var(--vw));

  @media only screen and (max-width: 760px) {
   padding: calc(20 * var(--vw));
  }
 }
}

.interview_photo_double {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: calc(30 * var(--vw));

 @media only screen and (min-width: 761px) {
  align-items: center;
 }

 @media only screen and (max-width: 760px) {
  grid-template-columns: 1fr;
 }

 .photo {
  img {
   display: block;
   width: 100%;
   height: auto;
  }
 }
}

.interview_row {
 display: flex;
 gap: 1lh calc(30 * var(--vw));

 @media only screen and (max-width: 760px) {
  flex-direction: column;
 }

 .photo {
  @media only screen and (min-width: 761px) {
   width: calc(375 * var(--vw));
  }

  &.is_right {
   @media only screen and (min-width: 761px) {
    order: 999;
   }
  }

  img {
   display: block;
   width: 100%;
   height: auto;
  }
 }

 .body {
  flex: 1;
 }
}

.interview_special_banner {
 margin-block: 1lh;

 &:is(a) {
  display: block;
  transition: opacity .25s ease-in-out;

  @media (hover) {
   &:hover {
    opacity: 0.7;
   }
  }
 }

 img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
 }
}

/*------------------------------------------------
 Related Links
------------------------------------------------*/
#related_links {
 margin: calc(80 * var(--vw)) 0 0;
 padding: calc(50 * var(--vw)) 0;
 background-color: #f0f0f0;
 font-size: calc(14 * var(--vw));

 @media only screen and (max-width: 760px) {
  margin-top: calc(60 * var(--vw));
  font-size: calc(12 * var(--vw));
 }

 h2 {
   margin: 0 auto calc(40 * var(--vw));
 }

 ul.link_list {
   display: block;
   margin-inline: auto;
   width: 68%;
   text-align: left;

   @media only screen and (max-width: 760px) {
    width: 90%;
   }

   &.link_bk {
     a {
       color: #fff;
       background-color: #000;

       &.new_window::after {
         background: url(/cms/sp/nikkor_z/assets/img/icon_new_window_w.svg) no-repeat 50% 50%;
         background-size: cover;
       }

       &::before {
         border: 1px solid #fff;
         border-width: 1px 1px 0 0;
       }
     }
   }

   li {
     display: block;
     padding: 0;
     margin: 0 0 2%;
     position: relative;
   }

   a {
     display: inline-block;
     padding: 0.7em 1em 0.7em 0.5em;
     color: #000;
     text-decoration: none;

     &.new_window::after {
       content: "";
       display: inline-block;
       vertical-align: middle;
       width: 1em;
       height: 1em;
       margin: 0 0 0 0.5em;
       background: url(/cms/sp/nikkor_z/assets/img/icon_new_window_bk.svg) no-repeat 50% 50%;
       background-size: cover;
     }

     &::before {
       content: "";
       display: inline-block;
       width: 0.9em;
       height: 0.9em;
       padding: 0;
       margin: 0 0.5em 0 0;
       border: 1px solid #000;
       border-width: 1px 1px 0 0;
       transform: rotate(45deg);
     }
   }
 }
}