@charset "utf-8";

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

#s-line{
 scroll-margin-top: 108px;
 width: 100%;
 background: url(/cms/sp/nikkor_z/technology/img/tech_bg01.jpg) no-repeat 50% 0;
 background-size: cover;
}

.markerline{
 display: inline;
 background: linear-gradient(transparent 70%, #ffe433 0%);
 padding: 0 2px;
}

.s-line_inner{
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 0 0 80px;
}
#s-line p.copy{
 font-size: 3.8vw;
 font-weight: 350;
 line-height: 1;
 margin: 0 auto 10%;
}
#s-line p.s-line{
 display: block;
 width: 23%;
 margin: 0 auto 10%;
 overflow: hidden;
 border-radius: 11px;
 box-shadow: 0 0 30px 0 rgba(0,0,0,0.4);
}
#s-line p.s-line img{
 display: block;
 width: 100%;
 height: auto;
}
#s-line p.lead_text{
 font-size: 1.24vw;
 font-weight: 350;
 text-align: left;
 line-height: 2;
}
.s-line_img{
 width: 100%;
 line-height: 1;
 background-color: #000;
}
.s-line_img img{
 display: block;
 width: 48.6%;
 max-width: 729px;
 height: auto;
 margin: 0 auto;
}
/*--------- Animation ---------*/
#s-line p{
 opacity: 0;
}
#s-line p.copy.active{
 animation: moveInY .8s ease-in 1s;
 animation-fill-mode: both;
}
#s-line p.s-line.active{
 animation: moveInY .4s ease-in 1.4s;
 animation-fill-mode: both;
}
#s-line p.lead_text.active{
 animation: moveInY .4s ease-in 1.8s;
 animation-fill-mode: both;
}


#tech_movie{
 width: 68%;
 height: auto;
 margin: 0 auto;
 text-align: left;
 padding: 6% 0;
}
#tech_movie p.movie_lead{
 display: block;
 margin: 0 auto 0.3em;
 text-align: left;
 font-size: 1.58vw;
 line-height: 2;
}
#tech_movie .notes {
 margin: 0 auto 7%;
}
#tech_movie .mov_container{
 height: auto;
 margin: 0 auto;
}
#tech_movie .movie{
 width: 100%;
	padding: 56.25% 0 0;
 position: relative;
}
#tech_movie .movie iframe{
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
}

/*--------- Animation ---------*/
#tech_movie p.movie_lead,
#tech_movie .mov_container{
 opacity: 0;
}
#tech_movie p.movie_lead.active{
 animation: fadeIn .4s ease-in 0s;
 animation-fill-mode: both;
}
#tech_movie .mov_container.active{
 animation: fadeIn .4s ease-in 0.4s;
 animation-fill-mode: both;
}

/*-----------------------------------------
Contents
-----------------------------------------*/
.section_wrap{
 margin-top: -80px;
 padding-top: 80px;
}
.section_ttl {
 width: 100%;
 margin: 0 auto 3% 0;
 background-color: #f1f3f7;
}
.section_ttl h3{
 display: block;
 position: relative;
 margin: 0 0 0 auto;
 padding: 2% 0;
 font-size: 2.6vw;
 text-align: center;
 font-weight: 350;
}
.section_ttl.new_tech h3::before{
 content: "NEW";
 display: inline-block;
 vertical-align: middle;
 color: #fff;
 background-color: #d50000;
 margin: 0 0.5em 0.24em 0;
 padding: 7px 12px;
 border-radius: 3px;
 font-size: 1.85vw;
 font-weight: 300;
 line-height: 1;
 text-align: center;
}
.section_inner{
 width: 68%;
 height: auto;
 margin: 0 auto 12%;
 text-align: left;
}
p.section_lead{
 font-size: 1.58vw;
 line-height: 2;
 text-align: left;
 margin: 1% 0 3%;
}
.full_size {
 width: 100%;
 margin: 0 auto 8%;
 line-height: 1;
}
.half_size {
 width: 50%;
 margin: 0 auto 8%;
 line-height: 1;
}
.half_size:last-child {
 margin-bottom: 0;
}
.full_size img,
.half_size img{
 display: block;
 width: 100%;
 height: auto;
}
.half_column{
 display: flex;
 justify-content: space-between;
 align-content: flex-start;
 width: 100%;
 margin: 0 auto 8%;
}
.half_column > .col,
.half_column > .img_col,
.half_column > .txt_col{
 flex: 0 0 48%;
}
h4.ttl{
 font-size: 2vw;
 margin: 5% 0 3.5%;
}
h4.ttl_line{
 font-size: 1.8vw;
 font-weight: 300;
 padding: 1.5rem 0 1.5rem 2rem;
 margin: 0 0 1.5rem;
 border-left: 3px solid #8c98ad;
}
.half_column > .col > p{
 display: inline-block;
 vertical-align: top;
 width: 100%;
 min-height: 4.5em;
 font-size: 1.4vw;
}
.half_column > .col > figure{
 display: block;
 width: 100%;
 margin: 0 0 1.5rem;
}
figure img{
 display: block;
 width: 100%;
 height: auto;
}
figure figcaption{
 padding: 1em 0;
 font-size: 1.2vw;
}
.notes {
 font-size: 1.15vw;
}

.tech_note {
 width: 100%;
 padding: 3%;
 margin-bottom: 8%;
 box-sizing: border-box;
 background-color: #fffde3;
}
.tech_note h4{
 font-size: 1.8vw;
 font-weight: 350;
 margin: 1% 0 4%;
}
.tech_note h5{
 font-size: 1.5vw;
 font-weight: 350;
 margin: 1em 0 0;
}
.tech_note p.img img{
 display: block;
 width: 100%;
 height: auto;
 margin: 0 auto;
}
.tech_note p.note{
 font-size: 1.3vw;
 line-height: 1.8;
 padding: 1.5em 0;
}
.tech_note .notes{
 margin: 0 0 2em 1.1em;
}
.tech_note .notes li{
 display: block;
 text-indent: -1.1em;
}

.mov_container{
 width: 100%;
 height: auto;
 margin: 0 auto;
}
.mov_container.is-mt4p{
 margin-top: 4%;
}
.mov_container .movie_ttl {
 margin: 0 0 2%;
 font-size: 1.4vw;
}
.movie{
 width: 100%;
 padding: 56.25% 0 0;
 position: relative;
}
.movie iframe{
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 top: 0;
}


/*--------- Animation ---------*/
.section_ttl,
.section_inner > div,
.section_inner > p,
.section_inner > figure,
.section_inner > figure figcaption,
.section_inner > dl,
.section_inner > dt,
.section_inner > dd,
.section_inner > ul,
.half_column .col,
.tech_note,
.lens_link{
 opacity: 0;
}
.section_ttl.active,
.section_inner > div.active,
.section_inner > p.active,
.section_inner > figure.active,
.section_inner > figure.active figcaption,
.section_inner > dl.active,
.section_inner > dt.active,
.section_inner > dd.active,
.section_inner > ul.active,
.half_column .col.active,
.tech_note.active,
.lens_link.active{
 animation: fadeIn .4s ease-in 0s;
 animation-fill-mode: both;
}

.lens_link h4.link_ttl{
 font-size: 1.4vw;
 text-align: center;
 margin-bottom: 1.5em;
 background: #f1f3f7;
 padding: 4px 0;
}
.lens_link ul{
 list-style: none;
 margin: 0 auto 4%;
 font-size: 1.2vw;
}
.lens_link ul li{
 margin: 0 0 0.5em;
}
.lens_link ul li::before{
 content: "＞";
 margin-right: 5px;
}
.lens_link a{
 display: inline-block;
 padding: 0.3em 0;
 text-decoration: none;
 color: #000;
 border-bottom: 1px solid #000;
}

#arneo_coat figure{
 margin-bottom: 4%;
}
#arneo_coat figure figcaption{
 font-size: 1.5vw;
 padding: 1.5em 0;
}
#arneo_coat p.c_txt,
#controlring p.c_txt{
 font-size: 1.5vw;
 margin: 8% 0 4%;
}

.tech_note div.half_img{
 display: flex;
 justify-content: space-between;
 align-content: flex-start;
 margin: 0 auto 3%;
}
.tech_note div.half_img p{
 flex: 0 0 48.5%;
 line-height: 1;
}
.tech_note div.half_img img{
 display: block;
 width: 100%;
 height: auto;
}


#movie p.section_lead{
 margin-bottom: 0.3em;
}
#movie .notes{
 margin: 0 0 3%;
}
#movie figure{
 margin: 4% auto 2%;
}
#movie figcaption em{
 display: block;
}
#movie p.text_l{
 font-size: 1.9vw;
 font-weight: 350;
 margin: 1em 0;
}
#movie .lens_link{
 margin-top: 8%;
}
#movie .mov_container {
 margin-top: 6%;
}

#controlring .half_column{
 margin: 5% auto;
}
#controlring .tech_commentary{
 width: 100%;
 margin: 0 auto 8%;
 background-color: #f1f3f7;
}
#controlring .tech_commentary img{
 width: 100%;
 height: auto;
}
#controlring .tech_commentary_head,
#controlring .tech_commentary_head img{
 position: relative;
 z-index: 0;
}
#controlring .tech_commentary_head h4{
 white-space: nowrap;
 color: #fff;
 font-size: 2.2vw;
 font-weight: 350;
 position: absolute;
 top: 50%;
 left: 8.5%;
 transform: translate(0, -50%);
 z-index: 1;
}
#controlring .tech_commentary_head h4 span{
 display: block;
 font-weight: 300;
 font-size: 1.6vw;
}
#controlring .tech_commentary p.c_txt{
 font-size: 1.3vw;
 margin: 4% auto;
}
#controlring .tech_commentary_body{
 width: 90%;
 margin: 0 auto;
 padding: 0 0 2%;
}
#controlring .tech_commentary_flex{
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
 flex-wrap: wrap;
 font-size: 1.3vw;
}
#controlring .tech_commentary_flex .img_box01,
#controlring .tech_commentary_flex .img_box02{
 flex: 0 0 33%;
 width: 33%;
 margin-bottom: 3%;
}
#controlring .tech_commentary_flex .txt_box01,
#controlring .tech_commentary_flex .txt_box02{
 flex: 0 0 64%;
 width: 64%;
 margin-bottom: 3%;
}
#controlring .tech_commentary_flex .img_box01{order: 1;}
#controlring .tech_commentary_flex .img_box02{order: 4;}
#controlring .tech_commentary_flex .txt_box01{order: 2;}
#controlring .tech_commentary_flex .txt_box02{order: 3;}


#dust_dripproof .section_inner{
 margin-bottom: 0;
}
#dust_dripproof .img_col img{
 display: block;
 width: 100%;
 height: auto;
}
#dust_dripproof .txt_col h5{
 font-size: 1.5vw;
 font-weight: 350;
 margin: 0 0 1.5em;
}
#dust_dripproof .txt_col p{
 font-size: 1.3vw;
 margin: 0 0 1em;
}
#dust_dripproof .txt_col .notes{
 margin: 4em 0 0;
}


#aspheric_lens .cross_section{
 text-align: center;
 margin: 5% auto 8%;
}
#aspheric_lens .cross_section p.img_cap{
 margin-bottom: 2%;
 font-size: 1.2vw;
 text-align: center;
}
#aspheric_lens .cross_section figure{
 display: block;
 width: 100%;
 margin: 0 auto;
}
#aspheric_lens .cross_section figure img{
 display: block;
 width: 28%;
 margin: 0 auto;
}
#aspheric_lens .cross_section ul li{
 display: inline-block;
 vertical-align: top;
 margin-right: 1.8em;
}
#aspheric_lens .cross_section ul li::before{
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 20px;
 height: 20px;
}
#aspheric_lens .cross_section ul li.lens_icon01::before{
  background-color: #fff100;
}
#aspheric_lens .cross_section ul li.lens_icon02::before{
 background-color: #7ecef4;
}



/*********************************************
 Mobile Style
*********************************************/
@media only screen and (max-width: 760px) {
 .main_container{
  padding-top: 70px;
 }

 #s-line {
  scroll-margin-top: 70px;
  background: url(/cms/sp/nikkor_z/technology/img/tech_bg01_sp.jpg) no-repeat 50% 0;
 }
 #s-line p.copy{
  font-size: 6.2vw;
 }
 #s-line p.s-line{
  border-radius: 5px;
  line-height: 1;
 }
 .s-line_inner{
  padding: 0 0 8%;
 }
 .s-line_img img{
  width: 77%;
 }
#tech_movie {
  width: 100%;
 }
 #tech_movie .mov_container,
 .section_inner{
  width: 90%;
 }
 .section_inner{
  display: none;
  }
 #s-line p.lead_text,
 p.section_lead,
 .half_column > .col > p,
 figure figcaption,
 .tech_note p.note,
 .lens_link ul,
 #movie p.text_l,
 #arneo_coat figure figcaption,
 #arneo_coat p.c_txt,
 #controlring p.c_txt,
 #dust_dripproof .txt_col p,
 #aspheric_lens .cross_section p.ttl{
  font-size: 3.6vw;
 }
 #tech_movie p.movie_lead{
  width: 90%;
  text-align: center;
  font-size: 3.2vw;
  margin: 0 auto 3%;
 }
 #tech_movie .notes {
  width: 90%;
 }

 .section_wrap {
  padding-top: 70px;
  margin-top: -70px;
 }

 .section_ttl{
  width: 100%;
  margin: 0 auto 3%;
  cursor: pointer;
  position: relative;
 }
 .section_ttl::after{
  content: "";
  display: block;
  width: 3%;
  height: 0;
  padding: 3% 0 0;
  border-style: solid;
  border-width: 0 0 1px 1px;
  border-color: transparent transparent #000 #000;
  position: absolute;
  top: 50%;
  right: 4%;
  transform: translateY(-50%) rotate(-45deg);
 }
 .section_ttl.open::after{
  transform: translateY(-50%) rotate(-225deg);
 }
 .section_ttl h3 {
  width: 90%;
  margin: 0 auto;
  font-size: 5.2vw;
  padding: 2% 0;
 }
 h4.ttl {
  font-size: 4.6vw;
 }
 h4.ttl_line,
 .tech_note h4,
 .lens_link h4.link_ttl{
  font-size: 4.2vw;
 }
 .tech_note h5,
 #dust_dripproof .txt_col h5{
  font-size: 3.8vw;
  font-weight: 350;
 }
 .section_ttl.new_tech h3::before{
  width: 9vw;
  vertical-align: middle;
  border-radius: 2px;
  padding: 4px 5px;
  font-size: 3.6vw;
 }
 .half_size {
  width: 100%;
 }
 .half_column{
  flex-direction: column;
 }
 .half_column > .col,
 .half_column > .img_col,
 .half_column > .txt_col{
  flex: 0 0 100%;
  margin-bottom: 5%;
 }
 .mov_container .movie_ttl {
  font-size: 3.6vw;
 }

 #controlring .half_column{
  flex-direction: row;
 }
 #controlring .half_column > .col{
  flex: 0 0 48%;
  margin-bottom: 0;
 }
 #controlring .half_column > .col > figure{
  margin-bottom: 0;
 }
 #controlring .tech_commentary_head h4{
  font-size: 3.6vw;
 }
 #controlring .tech_commentary_head h4 span,
 #controlring .tech_commentary p.c_txt,
 #controlring .tech_commentary_flex{
  font-size: 3.6vw;
 }
 #controlring .tech_commentary_flex .img_box01,
 #controlring .tech_commentary_flex .img_box02{
  flex: 0 0 48%;
  width: 48%;
 }
 #controlring .tech_commentary_flex .txt_box01,
 #controlring .tech_commentary_flex .txt_box02{
  flex: 0 0 100%;
  width: 100%;
  margin-bottom: 0;
 }
 #controlring .tech_commentary_flex .img_box01{order: 1;}
 #controlring .tech_commentary_flex .img_box02{order: 2;}
 #controlring .tech_commentary_flex .txt_box01{order: 3;}
 #controlring .tech_commentary_flex .txt_box02{order: 4;}
 #controlring .tech_commentary_body{
  padding: 4% 0 8%;
 }


#aspheric_lens .cross_section figure img{
 width: 54.5%;
}
#aspheric_lens .cross_section ul li::before{
 width: 3.6vw;
 height: 3.6vw;
}


 h4.ttl_line{
  padding: 0 0 0 1rem;
  border-left: 1px solid #8c98ad;
 }
 .notes {
  font-size: 3vw;
 }
 .tech_note div.half_img{
  flex-direction: column;
 }
 .tech_note div.half_img p{
  margin-bottom: 1em;
 }
 .tech_note div.half_img p + p{
  margin-bottom: 0;
 }
 /*--------- Animation ---------*/
 .section_ttl,
 .section_inner > div,
 .section_inner > p,
 .section_inner > figure,
 .section_inner > figure figcaption,
 .section_inner > dl,
 .section_inner > dt,
 .section_inner > dd,
 .half_column .col,
 .tech_note,
 .lens_link{
  opacity: 1;
 }
 .section_ttl.active,
  .section_inner > div.active,
 .section_inner > p.active,
 .section_inner > figure.active,
 .section_inner > figure.active figcaption,
 .section_inner > dl.active,
 .section_inner > dt.active,
 .section_inner > dd.active,
 .half_column .col.active,
 .tech_note.active,
 .lens_link.active{
  animation: none;
 }
}




/*********************************************
 Max Width Size 2000px
*********************************************/
@media only screen and (min-width: 2000px) {
 #s-line p.copy{
  font-size: 7.6rem;
 }
 #s-line p.lead_text,
 #tech_movie p.movie_lead{
  font-size: 2.5rem;
 }
 .section_ttl h3{
  font-size: 4.8rem;
 }
 p.section_lead,
 #controlring .tech_commentary_head h4{
  font-size: 3.2rem;
 }
 h4.ttl,
 h4.ttl_line,
 .tech_note h4{
  font-size: 3.6rem;
 }
 .half_column > .col > p,
 .lens_link h4.link_ttl,
 .lens_link ul{
  font-size: 2.8rem;
 }
 figure figcaption,
 .tech_note p.note,
 .tech_note h5,
 #arneo_coat figure figcaption,
 #arneo_coat p.c_txt,
 #controlring p.c_txt,
 #controlring .tech_commentary_head h4 span,
 #controlring .tech_commentary_flex,
 #controlring .tech_commentary p.c_txt,
 #aspheric_lens .cross_section p.ttl{
  font-size: 2.4rem;
 }
 .notes {
  font-size: 1.8rem;
 }
}