@charset "utf-8";

#header{
 background-color: #fff;
}
.main_container{
 padding-top: 108px;
 overflow: hidden;
}

p.more_btn{
 font-size: 2.4vw;
 margin: 100px auto;
}
p.more_btn a{
 color: #000;
 text-decoration: none;
 position: relative;
}
p.more_btn a::after{
 width: 12px;
 height: 12px;
 border-color: #000 #000 transparent transparent;
}
p.more_btn a::before{
 content: "";
 display: block;
 width: 0;
 height: 1px;
 margin: 10px auto 0;
 background-color: #000;
 position: absolute;
 bottom: -15px;
 left: 0;
}
p.more_btn a:hover::before{
 width: 100%;
 transition: all .4s;
}

/* Main Visual
=======================================*/
.main_visual{
 width: 100%;
 margin: 0 auto;
 padding: 0;
 line-height: 1;
 position: relative;
 z-index: 0;
}
/*.main_visual picture{
 display: block;
 width: 100%;
 height: auto;
 position: relative;
 z-index: 0;
}*/
.main_visual img{
 width: 100%;
 height: auto;
 display: block;
 position: relative;
 z-index: 0;
}
.main_visual .mv_ttl{
 display: block;
 width: 100%;
 white-space: nowrap;
 margin: 0 auto;
 text-align: center;
 position: absolute;
 color: #fff;
 bottom: 22%;
 left: 50%;
 transform: translateX(-50%);
 text-shadow: 0 0 2px rgba(44,6,4,0.5),
  0 0 4px rgba(44,6,4,0.5),
  0 0 8px rgba(44,6,4,0.5),
  0 0 10px rgba(44,6,4,0.5),
  0 0 12px rgba(44,6,4,0.5),
  0 0 14px rgba(44,6,4,0.5);
}
.main_visual .mv_ttl p.name{
 display: inline-block;
 vertical-align: middle;
 width: auto;
 font-size: 2.92vw;
 font-weight: 350;
 position: relative;
 white-space: nowrap;
}
.main_visual .mv_ttl p.lens{
 display: inline-block;
 vertical-align: middle;
 width: auto;
 font-size: 3.48vw;
 font-weight: 350;
 white-space: nowrap;
}
.main_visual .mv_ttl span.batsu{
 display: inline-block;
 vertical-align: middle;
 width: 5.5%;
 height: 0;
 padding: 5.5% 0 0;
 margin: 0 1.2%;
 position: relative;
}
.main_visual .mv_ttl span.batsu::before,
.main_visual .mv_ttl span.batsu::after{
 content: "";
 display: block;
 width: 135%;
 height: 1px;
 background-color: #fff;
 position: absolute;
 top: 50%;
 left: -17%;
 box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
}
.main_visual .mv_ttl span.batsu::before{
 transform: rotate(45deg);
}
.main_visual .mv_ttl span.batsu::after{
 transform: rotate(-45deg);
}
.main_visual .mv_ttl p.name span,
.main_visual .mv_ttl p.lens span{
 display: block;
 font-weight: 300;
 margin-top: 6%;
}
.main_visual .mv_ttl p.name span{
 font-size: 1.87vw;
}
.main_visual .mv_ttl p.lens span{
 font-size: 2.0vw;
}

.main_visual .lens_img{
 width: 20%;
 position: absolute;
 bottom: -17%;
 left: 50%;
 transform: translateX(-50%);
}
.main_visual .lens_img img{
 display: block;
 width: 100%;
 height: auto;
}


/*--------- Animation ---------*/
.main_visual,
.main_visual .mv_ttl,
.main_visual .lens_img{
 opacity: 0;
}
.main_visual.active{
 animation: fadeIn 0.8s ease-in 0.2s;
 animation-fill-mode: both;
}
.main_visual .mv_ttl.active{
 animation: fadeIn 0.8s ease-in 0.8s;
 animation-fill-mode: both;
}
.main_visual .lens_img.active{
 animation: fadeIn 0.4s ease-in 1.2s;
 animation-fill-mode: both;
}

/* Title
=======================================*/
.lead_block{
 width: 67%;
 margin: 0 auto 8%;
 padding: 12% 0 0;
 text-align: left;
}
.lead_block p.lead_ttl{
 font-size: 3.6vw;
 margin-bottom: 3%;
 text-align: center;
}
.lead_block p.lead_txt{
 font-size: 1.3vw;
 line-height: 1.8;
}

/*--------- Animation ---------*/
.photographer_ttl p,
.lead_block p.lead_ttl,
.lead_block p.lead_txt{
 opacity: 0;
}
.photographer_ttl p.status.active{
 animation: fadeIn 0.4s ease-in 0.4s;
 animation-fill-mode: both;
}
.photographer_ttl p.name.active{
 animation: fadeIn 0.4s ease-in 0.8s;
 animation-fill-mode: both;
}
.photographer_ttl p.lens.active{
 animation: fadeIn 0.4s ease-in 1.2s;
 animation-fill-mode: both;
}

.lead_block p.lead_ttl.active{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}
.lead_block p.lead_txt.active{
 animation: fadeIn 0.4s ease-in 0.4s;
 animation-fill-mode: both;
}


/* Photo Section
=======================================*/
.photo_container{
 display: flex;
 align-items: center;
 margin: 0 0 6%;
}
.photo_left{
 justify-content: flex-start;
}
.photo_right{
 justify-content: flex-end;
}
.photo_container figure{
 flex: 0 0 62.4%;
 margin: 0;
}
.photo_portrait figure {
 flex: 0 0 40%;
}
.photo_container figure a{
 display: block;
 width: 100%;
 height: auto;
 line-height: 1;
 position: relative;
 z-index: 1;
}
.photo_container figure a::after{
 content: "";
 display: block;
 width: 3.5vw;
 height: 3.5vw;
 padding: 0;
 position: absolute;
 bottom: 0;
 right: 0;
 background: #000 url(/sp/nikkor_z/assets/img/zoom.svg) no-repeat 50% 50%;
 background-size: cover;
}
.photo_container figure img{
 display: block;
 width: 100%;
 height: auto;
 position: relative;
 z-index: 0;
}
.photo_container figcaption{
 text-align: left;
 font-size: 0.9vw;
 padding: 1em 0;
}
.photo_left figcaption{
 margin: 0 3%;
}
.photo_right figcaption{
 margin: 0 3%;
}
.photo_container .txt_block{
 flex: 0 0 30.9%;
 margin: 0 3%;
 text-align: left;
 font-size: 1.3vw;
 line-height: 1.8;
}
.photo_portrait .txt_block {
 flex: 0 0 54%;
}

/*--------- Animation ---------*/
.photo_container figure a,
.photo_container figcaption,
.photo_container .txt_block{
 opacity: 0;
}
.photo_container figure.active a{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}
.photo_container figure.active figcaption{
 animation: fadeIn 0.4s ease-in 0.8s;
 animation-fill-mode: both;
}
.photo_container .txt_block.active{
 animation: fadeIn 0.4s ease-in 0.4s;
 animation-fill-mode: both;
}

/* Gallery
=======================================*/
#gallery{
 text-align: center;
 margin-top: 12%;
}
.gallery_list{
 width: calc(100% - 10px);
 margin: 0 auto;
}
.gallery_list li{
 width: 25%;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
.gallery_list li a{
 display: block;
 padding: 0 5px 10px;
 line-height: 1;
}
.gallery_list li img{
 width: 100%;
 height: auto;
 display: block;
}
.gallery_list li.grid_sizer{
 width: 25%;
 height: 0;
 padding: 0;
}

#gallery p.note_caption {
 margin: -50px 0 150px 0;
 text-align: center;
 font-size: 1vw;
 color: #999;
}

/* Interview
=======================================*/
#interview{
 background-color: #f9f9fa;
}
#interview h2.fz_jp {
 font-size: 3vw;
}
#interview .interview_mov,
#interview .profile{
 width: 68%;
 height: auto;
 margin: 0 auto;
}
#interview .movie{
 width: 100%;
	padding: 56.25% 0 0;
 position: relative;
}
#interview .movie iframe{
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
}
#interview .profile{
 display: flex;
 justify-content: space-between;
 padding: 4% 0;
}
#interview .profile .prof_img{
 flex: 0 0 25%;
 align-self: flex-start;
}
#interview .profile .prof_img img{
 display: block;
 width: 100%;
 height: auto;
 margin: 0;
 line-height: 1;
}
#interview .profile .prof_data{
 flex: 0 0 70%;
 text-align: left;
 display: flex;
 flex-direction: column;
}
#interview .profile .prof_data p.prof_status,
#interview .profile .prof_data p.prof_name span,
#interview .profile .prof_data p.prof_note{
 font-size: 1.06vw;
 font-weight: 300;
}
#interview .profile .prof_data p.prof_name{
 font-size: 2.8vw;
 font-weight: 350;
 margin-bottom: auto;
}

/*--------- Animation ---------*/
#interview .interview_mov,
#interview .profile .prof_img,
#interview .profile .prof_data p{
 opacity: 0;
}
#interview .interview_mov.active{
 animation: fadeIn 0.4s ease-in 0.2s;
 animation-fill-mode: both;
}
#interview .profile .prof_img.active{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}
#interview .profile .prof_data.active p.prof_status{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}
#interview .profile .prof_data.active p.prof_name{
 animation: fadeIn 0.4s ease-in 0.5s;
 animation-fill-mode: both;
}
#interview .profile .prof_data.active p.prof_note{
 animation: fadeIn 0.4s ease-in 0.8s;
 animation-fill-mode: both;
}


/* Lens
=======================================*/
#lens{
 padding: 6% 0;
 background-color: #f1f2f4;
}
#lens a{
 display: block;
 text-decoration: none;
 color: #000;
}
#lens p.s-line{
 display: block;
 width: 9.333%;
 margin: 3% auto;
}
#lens p.lens_name{
 font-size: 3.5vw;
 font-weight: 350;
 line-height: 1.4;
 margin-bottom: 3%;
}
#lens p.lens_name span{
 display: inline-block;
 margin-left: 1vw;
/* font-size: 2.1vw; */
}
#lens p.lens_copy{
 font-size: 1.5vw;
 font-weight: 350;
}
#lens .lens_img{
 width: 20%;
 margin: 0 auto 3%;
}
#lens .lens_img img{
 width: 100%;
 height: auto;
}


/*--------- Animation ---------*/
#lens > div,
#lens > p{
 opacity: 0;
}
#lens > div.active{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}
#lens > p.active{
 animation: fadeIn 0.4s ease-in 0s;
 animation-fill-mode: both;
}


/*********************************************
 Mobile Style
*********************************************/
@media only screen and (max-width: 760px) {

 .main_container{
  padding-top: 70px;
 }
 p.more_btn{
  font-size: 4.4vw;
  margin: 15% auto;
 }
 p.more_btn a::after {
  width: 8px;
  height: 8px;
 }
 .main_visual .lens_img {
  width: 44.26%;
  bottom: -19%;
 }
 .main_visual .mv_ttl p.name{
  font-size: 6.4vw;
 }
 .main_visual .mv_ttl p.lens{
  font-size: 6.95vw;
 }
 .main_visual .mv_ttl p.name span{
  font-size: 4vw;
 }
 .main_visual .mv_ttl p.lens span{
  font-size: 4.0vw;
 }

 .photographer_ttl {
  margin: -15% auto 6%;
 }
 .photographer_ttl p.status,
 .photographer_ttl p.name::after,
 .lead_block p.lead_txt{
  font-size: 3.6vw;
 }
 .photographer_ttl p.name {
  font-size: 7.6vw;
 }
 .photographer_ttl p.lens {
  font-size: 6.4vw;
 }
 .lead_block{
  width: 90%;
  padding-top: 20%;
 }
 .lead_block p.lead_ttl{
  font-size: 6.4vw;
  text-align: center;
  margin: 0 auto 5%;
 }
 .photo_container{
  flex-direction: column;
  width: 90%;
  margin: 0 auto 15%;
 }
 .photo_container figure{
  flex: 0 0 100%;
  width: 100%;
  margin: 0 auto 5%;
  order: 1;
 }
 .photo_container figure a::after {
  width: 7vw;
  height: 7vw;
 }
 .photo_container figcaption,
 .photo_left figcaption{
  font-size: 3vw;
  padding: 1em;
  margin: 0 auto;
  background-color: #ebebeb;
 }
 .photo_container .txt_block{
  flex: 0 0 100%;
  margin: 0 auto;
  font-size: 3.6vw;
  order: 2;
 }
 .photo_container figure.active figcaption{
  animation: fadeIn 0.4s ease-in 0.4s;
  animation-fill-mode: both;
 }
 .photo_container .txt_block.active{
  animation: fadeIn 0.4s ease-in 0.8s;
  animation-fill-mode: both;
 }


 .gallery_list{
  width: calc(100% - 4px);
 }
 .gallery_list li a {
  padding: 0 2px 4px;
 }
 .gallery_list li.grid_sizer,
 .gallery_list li{
  width: 50%;
 }

 #gallery p.note_caption {
 margin: -8% auto 15% ;
 padding: 0;
 text-align: center;
 font-size: 3vw;
 color: #999;
}

/*
 #interview {
  border-top: 1px solid #484848;
 }
*/
 #interview h2.fz_jp {
  font-size: 7vw;
 }
 #interview .interview_mov{
  width: 100%;
 }
 #interview .profile{
  flex-direction: column;
  width: 90%;
  margin: 0 auto;
  padding: 5% 0 10%;
 }
 #interview .profile .prof_img{
  flex: 0 0 33%;
  width: 33%;
  margin: 0 auto 5%;
 }
 #interview .profile .prof_data {
  flex: 0 0 100%;
 }
 #interview .profile .prof_data p.prof_status{
  font-size: 3.5vw;
 }
 #interview .profile .prof_data p.prof_status,
 #interview .profile .prof_data p.prof_name{
  text-align: center;
 }
 #interview .profile .prof_data p.prof_name{
  font-size: 5.8vw;
  text-align: center;
  margin-bottom: 5%;
 }
 #interview .profile .prof_data p.prof_name span{
  display: block;
 }
 #interview .profile .prof_data p.prof_name span{
  font-size: 3.8vw;
 }
 #interview .profile .prof_data p.prof_note{
  font-size: 3.6vw;
 }
 #lens .lens_img{
  width: 44.26%;
 }
 #lens p.s-line {
  width: 18.666%;
 }
 #lens p.lens_name{
  font-size: 5.8vw;
 }
 #lens p.lens_name span{
/*
  display: block;
  font-size: 3.8vw;
*/
  margin-left: 2vw;
 }
 #lens p.lens_copy {
  font-size: 3.8vw;
 }
}


/*********************************************
 Max Width Size 2000px
*********************************************/
@media only screen and (min-width: 2000px) {
 p.more_btn{
  font-size: 4.8rem;
 }
 .main_visual .mv_ttl p.name{
  font-size: 5.8rem;
 }
 .main_visual .mv_ttl p.lens{
  font-size: 6.95rem;
 }
 .main_visual .mv_ttl span.batsu{
  flex: 0 0 120px;
  width: 120px;
  padding: 120px 0 0;
 }
 .main_visual .mv_ttl p.name span{
  font-size: 3.74rem;
 }
 .main_visual .mv_ttl p.lens span{
  font-size: 4.0rem;
 }

 .photographer_ttl p.status,
 .photographer_ttl p.name::after{
  font-size: 2.2rem;
 }
 .photographer_ttl p.name,
 .photographer_ttl p.lens{
  font-size: 6.4rem;
 }
 .lead_block p.lead_ttl{
  font-size: 7.2rem;
 }
 .lead_block p.lead_txt,
 .photo_container .txt_block{
  font-size: 2.6rem;
 }
 .photo_container figcaption{
  font-size: 1.8rem;
 }
 #interview .profile .prof_data p.prof_status,
 #interview .profile .prof_data p.prof_name span,
 #interview .profile .prof_data p.prof_note{
  font-size: 2.12rem;
 }
 #interview .profile .prof_data p.prof_name{
  font-size: 5.6rem;
 }
 #lens p.lens_name{
  font-size: 7rem;
 }
 #lens p.lens_name span{
  font-size: 4.2rem;
 }
 #lens p.lens_copy{
  font-size: 3rem;
 }
}