@charset "utf-8";

#header .site_logo_wrap{
 display: none;
 opacity: 0;
 transition: all 0.4s;
}
#header.compact .site_logo_wrap{
 display: block;
 opacity: 1;
}

.main_visual{
 width: 100%;
 height: 100vh;
 margin: 0 auto;
 position: relative;
 z-index: 0;
 overflow: hidden;
}
.mv_img{
 width: 100%;
 height: 100vh;
 z-index: 0;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-size: cover;
}
.mv_img img{
 display: none;
 width: auto;
 height: 100%;
 line-height: 1;
}
.main_visual p.lens_copy{
 width: 100%;
 white-space: nowrap;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: #fff;
 font-size: 5rem;
 font-weight: 350;
 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);
}

/*--------- Animation ---------*/
.mv_img,
.main_visual p.lens_copy span{
 opacity: 0;
}
.mv_img{
 animation: fadeIn .8s ease-in 0.4s;
 animation-fill-mode: both;
}
.main_visual p.lens_copy.active span {
 animation: fadeIn 1s ease-in 0s;
 animation-fill-mode: both;
}
.main_visual p.lens_copy.active span:nth-of-type(2){
 animation-delay: .2s;
}
.main_visual p.lens_copy.active span:nth-of-type(3){
 animation-delay: .4s;
}
.main_visual p.lens_copy.active span:nth-of-type(4){
 animation-delay: .6s;
}
.main_visual p.lens_copy.active span:nth-of-type(5){
 animation-delay: .8s;
}
.main_visual p.lens_copy.active span:nth-of-type(6){
 animation-delay: 1.0s;
}
.main_visual p.lens_copy.active span:nth-of-type(7){
 animation-delay: 1.2s;
}
.main_visual p.lens_copy.active span:nth-of-type(8){
 animation-delay: 1.4s;
}
.main_visual p.lens_copy.active span:nth-of-type(9){
 animation-delay: 1.6s;
}
.main_visual p.lens_copy.active span:nth-of-type(10){
 animation-delay: 1.8s;
}
.main_visual p.lens_copy.active span:nth-of-type(11){
 animation-delay: 2.0s;
}
.main_visual p.lens_copy.active span:nth-of-type(12){
 animation-delay: 2.2s;
}
.main_visual p.lens_copy.active span:nth-of-type(13){
 animation-delay: 2.4s;
}
.main_visual p.lens_copy.active span:nth-of-type(14){
 animation-delay: 2.6s;
}
.main_visual p.lens_copy.active span:nth-of-type(15){
 animation-delay: 2.8s;
}
.main_visual p.lens_copy.active span:nth-of-type(16){
 animation-delay: 3.0s;
}
.main_visual p.lens_copy.active span:nth-of-type(17){
 animation-delay: 3.2s;
}
.main_visual p.lens_copy.active span:nth-of-type(18){
 animation-delay: 3.4s;
}
.main_visual p.lens_copy.active span:nth-of-type(19){
 animation-delay: 3.6s;
}
.main_visual p.lens_copy.active span:nth-of-type(20){
 animation-delay: 3.8s;
}
.main_visual p.lens_copy.active span:nth-of-type(21){
 animation-delay: 4.0s;
}


/*------------------------------------------------
 Product
------------------------------------------------*/
#product{
 width: 100%;
 margin: 0 auto;
 padding: 0 0 8%;
 background: url(/cms/sp/nikkor_z/lens/assets/img/product_bg.jpg) no-repeat 50% 100%;
 background-size: cover;
 text-align: left;
}
.product_inner{
 width: 73%;
 max-width: 1000px;
 margin: 0 auto;
}
.product_img{
 display: inline-block;
 vertical-align: middle;
 width: 49%;
 margin: 0 0 -5%;
 position: relative;
 z-index: 0;
}
.product_img img{
 width: 100%;
 height: auto;
}
.product_name{
 display: inline-block;
 vertical-align: middle;
 width: 50%;
 margin: 0;
}
.product_name p.new{
 display: inline-block;
 color: #fff;
 background-color: #d50000;
 padding: 7px 12px;
 border-radius: 4px;
 font-size: 1.85vw;
 font-weight: 300;
 line-height: 1;
}
.main_container .product_name h2{
 display: block;
 font-size: 5.2vw;
 font-weight: 350;
 line-height: 1.2;
 text-align: left;
 margin: 3% 0 4%;
}
.main_container .product_name h2 span{
 display: block;
 white-space: nowrap;
}
.main_container .product_name h2::after{
 content: none;
}
.product_name p.s-line{
 display: block;
 width: 27%;
 margin: 0;
}

.product_copy,
.feature{
 width: 73%;
 max-width: 1000px;
 margin: 0 auto 5%;
}
.product_copy p.copy_ttl{
 font-size: 3.4vw;
 font-weight: 350;
 letter-spacing: normal;
 margin-bottom: 5%;
}
.product_copy  ul.copy_body{
 width: 90%;
 max-width: 1000px;
 margin: 0;
 font-size: 1.8vw;
 font-weight: 350;
}
.product_copy  ul.copy_body li{
 list-style: none outside;
 margin: 0 0 2%;
}

.feature ul.feature_list{
 list-style: none;
 display: flex;
 justify-content: flex-start;
 align-content: flex-start;
 flex-wrap: wrap;
}
.feature ul.feature_list li{
 min-width: 14%;
 text-align: center;
 font-size: 1.2vw;
 font-weight: 350;
 margin: 0.55%;
 position: relative;
 display: flex;
}
.ie .feature ul.feature_list li{
 width: 23%;
}
.feature ul.feature_list li a,
.feature ul.feature_list li span{
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 padding: 5px 10px;
 white-space: nowrap;
}
.feature ul.feature_list li a{
 color: #000;
 text-decoration: none;
 background-color: #ffe433;
}
.feature ul.feature_list li span{
 border: 1px solid #000;
}
.feature ul.feature_list li a,
.feature ul.feature_list li span.tooltip {
 padding: 5px 3rem 5px 2rem;
}
.feature ul.feature_list li span.tooltip{
 cursor: pointer;
}
.feature ul.feature_list li a::after,
.feature ul.feature_list li span.tooltip::after{
 content: "";
 display: block;
 width: 8%;
 height: 0;
 padding: 8% 0 0;
 border-style: solid;
 border-width: 0 2px 2px 0;
 border-color: transparent #000 #000 transparent;
 position: absolute;
 right: 5px;
 top: 50%;
}
.feature ul.feature_list li a::after{
 transform: rotate(-45deg) translateY(-50%);
}
.feature ul.feature_list li span.tooltip::after{
 transform: rotate(45deg) translate(-50%,-50%);
}

#product p.tech_link{
 text-align: center;
}
#product p.tech_link a{
 display: inline;
 position: relative;
 color: #000;
 font-size: 1.6vw;
 font-weight: 350;
 text-decoration: none;
 margin: 0 auto;
}
#product p.tech_link img{
 display: inline-block;
 vertical-align: middle;
 width: 5%;
 height: auto;
 margin: 0 5px 0 0;
}
#product p.tech_link a.arrow::after{
 border-color: #000 #000 transparent transparent;
}
#product p.tech_link a::before{
 content: "";
 display: block;
 width: 0;
 height: 1px;
 margin: 10px auto 0;
 background-color: #000;
 position: absolute;
 bottom: -15px;
 left: 0;
}
#product p.tech_link a:hover::before{
 width: 100%;
 transition: all .4s;
}

/*--------- Animation ---------*/
#product,
#product .product_img,
#product .product_name h2,
#product .product_name p,
#product .product_copy p,
#product .product_copy ul,
#product .feature ul{
 opacity: 0;
}
#product.active{
 animation: fadeIn .8s ease-in 0s;
 animation-fill-mode: both;
}

#product .product_img.active{
 animation: fadeIn .8s ease-in 0.0s;
 animation-fill-mode: both;
}
#product .product_name.active p.new{
 animation: fadeIn .4s ease-in 0.4s;
 animation-fill-mode: both;
}
#product .product_name.active h2{
 animation: fadeIn .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#product .product_name.active p.s-line{
 animation: fadeIn .4s ease-in 0.8s;
 animation-fill-mode: both;
}
#product .product_copy p.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#product .product_copy ul.active{
 animation: fadeIn .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#product .feature ul.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}


/*------------------------------------------------
 Photographers
------------------------------------------------*/
#photographers{
 padding: 8% 0 0;
}
#photographers .photographers_block{
 margin-bottom: 12%;
}
#photographers .photographers_block.no-mb {
 margin-bottom: 0;
}
#photographers p.s-line_label {
 display: block;
 position: relative;
 width: 12.5%;
 height: 0;
 padding: 4% 0 0;
 background-color: #ffe433;
 z-index: 1;
}
#photographers .direction_l p.s-line_label{
 margin: 0 0 -2% 16%;
 box-shadow: -20px 20px 20px 0 rgba(0,0,0,0.2);
}
#photographers .direction_r p.s-line_label{
 margin: 0 0 -2% 72%;
 box-shadow: 20px 20px 20px 0 rgba(0,0,0,0.2);
}
#photographers p.s-line_label img {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 80%;
 transform: translate(-50%, -50%);
}
#photographers .photographers_copy {
 background-color: #f4f4f4;
 width: 100%;
 margin: 0 auto -8%;
 padding: 7% 0 11%;
 position: relative;
 z-index: 0;
}
#photographers p.copy_ttl {
 font-size: 3.6vw;
 font-weight: 350;
 letter-spacing: normal;
 margin: 0 auto 3.5%;
}
#photographers p.copy_txt {
 width: 68%;
 margin: 0 auto;
 text-align: left;
 font-size: 1.3vw;
 line-height: 1.8;
}
#photographers .notes {
 width: 68%;
 margin: 1.2% auto 0;
 text-align: left;
}
#photographers p.copy_link{
 width: 68%;
 margin: 3% auto 0;
 text-align: left;
 font-size: 1.3vw;
}
#photographers p.copy_link a{
 display: inline-block;
 text-decoration: none;
 color: #000;
 position: relative;
}
#photographers p.copy_link a::after{
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 0.75vw;
 height: 0.75vw;
 margin: 1% 0 0 2%;
 border-style: solid;
 border-width: 1px 1px 0 0;
 border-color: #000 #000 transparent transparent;
 transform: rotate(45deg) translate(6px, 5px);
 position: absolute;
}
#photographers p.copy_link a::before{
 content: "";
 display: block;
 width: 0;
 height: 1px;
 background-color: #000;
 opacity: 0;
 position: absolute;
 bottom: -2px;
 left: 0;
 transition: 0.4s;
}
#photographers p.copy_link a:hover::before{
 width: 100%;
 opacity: 1;
}
#photographers p.note_caption {
 width: 82%;
 margin: -2% 0 0 0;
 text-align: right;
 font-size: 1vw;
 color: #999;
}

/*--------- Animation ---------*/
#photographers p.s-line_label,
#photographers .photographers_copy,
#photographers p.copy_ttl,
#photographers p.copy_txt,
#photographers ul{
 opacity: 0;
}
#photographers p.s-line_label.active{
 animation: moveInY .4s ease-in 0s;
 animation-fill-mode: both;
}
#photographers .photographers_copy.active{
 animation: moveInY .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#photographers p.copy_ttl.active{
 animation: moveInY .6s ease-in 0.4s;
 animation-fill-mode: both;
}
#photographers p.copy_txt.active{
 animation: moveInY .6s ease-in 0.8s;
 animation-fill-mode: both;
}
#photographers ul.active{
 animation: fadeIn .4s ease-in 1.4s;
 animation-fill-mode: both;
}

/* Profile
----------------------------------------------*/
#photographers .photographers_data {
 width: 95%;
 margin: 0 0 4% 5%;
 padding: 2% 0;
 background-color: #ffffe1;
 position: relative;
 z-index: 1;
}
#photographers .photographers_data_inner {
 display: flex;
 width: 74%;
 margin: 0 0 0 6.9%;
 text-align: left;
}
#photographers .direction_r .photographers_data {
 margin: 0 0 4% 0;
}

#photographers .direction_r .photographers_data_inner {
 width: 81%;
 margin: 0 0 0 11%;
}

#photographers .prof_img {
 flex: 0 0 25.1%;
 align-self: center;
}
#photographers .direction_r .prof_img{
 flex: 0 0 23%;
 order: 1;
}
#photographers .prof_img img{
 width: 100%;
 height: auto;
 box-sizing: border-box;
}
#photographers .prof_data{
 flex: 0 0 74.9%;
}
#photographers .direction_r .prof_data{
 flex: 0 0 77%;
 order: 2;
}
#photographers .prof_data p.prof_name{
 font-size: 3.2vw;
 font-weight: 350;
 padding: 0 0 0.1em;
 margin-bottom: 0.7em;
 border-bottom: 4px solid #fee633;
}
#photographers .direction_r .prof_data p.prof_name {
 padding-left: 8%;
}
#photographers .prof_data p.prof_name span{
 font-size: 45%;
 letter-spacing: -0.08em;
 margin-right: 1em;
}
#photographers .prof_data p.prof_note {
 width: 95.5%;
 font-size: 1.2vw;
 letter-spacing: -0.02em;
 line-height: 1.8;
}
#photographers .direction_r .prof_data p.prof_note {
 padding-left: 8%;
 width: 92%;
}

/*--------- Animation ---------*/
#photographers .photographers_data,
#photographers .prof_img,
#photographers .prof_data p.prof_note,
#photographers .prof_data p.prof_name{
 opacity: 0;
}
#photographers .photographers_data{
 overflow: hidden;
}
#photographers .photographers_data.active{
 animation: fadeIn .6s ease-in 0s;
 animation-fill-mode: both;
}
#photographers .direction_r .photographers_data.active{
 animation: fadeIn .6s ease-in 0s;
 animation-fill-mode: both;
}
#photographers .prof_img.active{
 animation: moveInX .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#photographers .prof_data.active p.prof_name{
 animation: moveInX .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#photographers .prof_data.active p.prof_note{
 animation: moveInX .4s ease-in 1.0s;
 animation-fill-mode: both;
}


/* Works
--------------------------------*/
#photographers .photographers_works{
 margin-bottom: 8%;
}
#photographers .photographers_block.no-mb .photographers_works {
 margin-bottom: 0;
}
#photographers .photographers_works figure{
 display: block;
 width: 50%;
 margin: 0 auto 0 5%;
 position: relative;
 z-index: 1;
}
#photographers .photographers_works.photo_portrait figure{
 width: 36%;
}
#photographers .direction_r .photographers_works figure{
 margin: 0 5% 0 auto;
}
#photographers .photographers_works figure img{
 display: block;
 width: 100%;
 height: auto;
 box-shadow: -20px 20px 20px 0 rgba(0,0,0,0.3);
}
#photographers .photographers_works figcaption{
 display: inline-block;
 width: 95%;
 margin: 0 auto;
 padding: 30px 0 0 0;
 font-size: 1vw;
 text-align: left;
}
#photographers .photographers_works .comment {
 width: 80.5%;
 background-color: #f4f4f4;
 margin: -33% 0 0 11%;
 padding: 2% 0 21% 48%;
 box-sizing: border-box;
 position: relative;
 z-index: 0;
}
#photographers .direction_r .photographers_works .comment {
 margin: -33% 0 0 10%;
 padding: 2% 0 19% 3%;
}
#photographers .direction_l .photographers_works.photo_portrait .comment {
 padding: 2% 0 21% 33%;
}
#photographers .direction_r .photographers_works.photo_portrait .comment {
 padding: 2% 0 21% 3%;
}
#photographers .photographers_works .comment p{
 width: 90%;
 font-size: 1.2vw;
 line-height: 1.8;
 text-align: left;
}
#photographers .direction_r .photographers_works .comment p{
 width: 38%;
}
#photographers .direction_r .photographers_works.photo_portrait .comment p{
 width: 52%;
}

/*--------- Animation ---------*/
#photographers .photographers_works figure,
#photographers .photographers_works figcaption,
#photographers .photographers_works .comment,
#photographers .photographers_works .comment p{
 opacity: 0;
}
#photographers .photographers_works figure.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#photographers .photographers_works figure a {
 display: block;
 position: relative;
}
#photographers .photographers_works .comment.active{
 animation: slideLeft .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#photographers .direction_r .photographers_works .comment.active{
 animation: slideRight .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#photographers .photographers_works figure.active figcaption{
 animation: fadeIn .4s ease-in 1.2s;
 animation-fill-mode: both;
}
#photographers .photographers_works .comment.active p{
 animation: fadeIn .4s ease-in 1.6s;
 animation-fill-mode: both;
}


/* Interview
--------------------------------*/
#photographers .interview_link {
 width: 90%;
 margin: 0 auto;
 padding: 0;
 background-color: #ffffe1;
}
#photographers .interview_link_inner {
 display: flex;
 width: 100%;
 margin: 0 auto;
}
#photographers .interview_link_inner p.link_btn {
 flex: 0 0 36%;
 align-content: start;
}
#photographers .interview_link_inner p.link_btn img{
 width: 100%;
 height: auto;
 display: block;
}
#photographers .interview_link_inner p.link_ttl {
 flex: 0 0 48%;
 text-align: right;
 align-self: center;
 font-size: 1.9vw;
 padding: 0 0 1%;
 margin: 0 auto 3.1vw 0;
 position: relative;
}
#photographers .interview_link_inner p.link_ttl span{
 margin: 0 0 0 1em;
}
#photographers .interview_link_inner p.link_ttl::after{
 content: "";
 display: block;
 width: 100%;
 height: 6px;
 position: absolute;
 left: 0;
 top: 100%;
 background-color: #ffe433;
}
#photographers .direction_r .interview_link_inner p.link_btn {
 order: 2;
}
#photographers .direction_r .interview_link_inner p.link_ttl {
 order: 1;
 text-align: left;
 margin: 0 0 3.1vw auto;
}

/*--------- Animation ---------*/
#photographers .interview_link,
#photographers .interview_link_inner p.link_btn,
#photographers .interview_link_inner p.link_ttl{
 opacity: 0;
}
#photographers .interview_link.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#photographers .interview_link_inner p.link_btn.active{
 animation: moveInX .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#photographers .interview_link_inner p.link_ttl.active{
 animation: moveInX .4s ease-in 1s;
 animation-fill-mode: both;
}


#photographers p.other_works {
 width: 25%;
 margin: 4% 0 4% auto;
 text-align: left;
 font-size: 1.6vw;
}
#photographers p.other_works a{
 display: inline-block;
 color: #000;
 text-decoration: none;
 position: relative;
}
#photographers p.other_works a::before{
 content: "";
 display: block;
 width: 0;
 height: 1px;
 opacity: 0;
 margin: 1.5% 0 0 0;
 background-color: #000;
 position: absolute;
 bottom: -2px;
 left: 0;
 transition: 0.4s;
}
#photographers p.other_works a:hover::before{
 width: 100%;
 opacity: 1;
}
#photographers p.other_works a.arrow::after{
 border-color: #000 #000 transparent transparent;
}
#photographers .direction_r p.other_works{
 margin: 4% 0;
 text-align: right;
}

/*--------- Animation ---------*/
#photographers p.other_works{
 opacity: 0;
}
#photographers p.other_works.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}


/*------------------------------------------------
 Technology
------------------------------------------------*/
#technology{
 margin-bottom: 15%;
}
#technology p.c_txt{
 font-size: 1.4vw;
}
#technology .tech_ttl{
 margin-bottom: 8%;
}
.main_container #technology .tech_ttl h2{
 margin-top: 0;
 margin-bottom: 2%;
}
#technology .tech_ttl p{
 font-size: 1.35vw;
}
#technology .section_ttl {
 width: 100%;
 margin: 0 auto 3% 0;
 background-color: #f1f3f7;
}
#technology .section_ttl h3{
 display: block;
 position: relative;
 margin: 0 0 0 auto;
 padding: 3% 0;
 font-size: 2.6vw;
 text-align: center;
 font-weight: 350;
}
#technology .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;
}
#technology .section_inner{
 width: 68%;
 height: auto;
 margin: 0 auto 5%;
 text-align: left;
}
#technology .section_inner .half_column{
 display: flex;
 justify-content: space-between;
 align-content: flex-start;
 width: 100%;
 margin: 5% auto;
}
#technology .section_inner .half_column > .col{
 flex: 0 0 48%;
}
#technology .section_inner .half_column > .col.middle{
 align-self: center;
}
#technology .section_inner .half_column > .col > figure{
 display: block;
 width: 100%;
 margin: 0 0 1.5rem;
}
#technology .section_inner figure img,
#technology .section_inner .col img{
 display: block;
 width: 100%;
 height: auto;
}
#technology .section_inner figure figcaption{
 padding: 1em 0;
}
#technology p.more_btn a{
 color: #000;
 text-decoration: none;
 font-size: 1.4vw;
 position: relative;
}

#technology p.more_btn a::after{
 width: 12px;
 height: 12px;
 border-color: #000 #000 transparent transparent;
}
#technology 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;
}
#technology p.more_btn a:hover::before{
 width: 100%;
 transition: all .4s;
}

/*--------- Animation ---------*/
#technology .tech_ttl h3,
#technology .tech_ttl p,
#technology .section_ttl,
#technology .section_ttl h3,
#technology .section_ttl h3::before,
#technology .section_inner > p.c_txt,
#technology .section_inner > ul,
#technology .section_inner .half_column > div,
#technology .section_inner .mov_container{
 opacity: 0;
}
#technology .tech_ttl h3.active{
 animation: fadeIn .4s ease-in 0s;
 animation-fill-mode: both;
}
#technology .tech_ttl p.active{
 animation: fadeIn .4s ease-in 0.4s;
 animation-fill-mode: both;
}

#technology .section_ttl.active{
 animation: slideRight .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#technology .section_ttl.active h3::before{
 animation: fadeIn .4s ease-in 0.6s;
 animation-fill-mode: both;
}
#technology .section_ttl.active h3{
 animation: fadeIn .4s ease-in 1s;
 animation-fill-mode: both;
}
#technology .section_inner > p.c_txt.active{
 animation: fadeIn .4s ease-in 0.2s;
 animation-fill-mode: both;
}
#technology .section_inner > ul.active {
 animation: fadeIn .4s ease-in 0.3s;
 animation-fill-mode: both;
}
#technology .section_inner .half_column > div.active:nth-of-type(1){
 animation: fadeIn .4s ease-in 0.4s;
 animation-fill-mode: both;
}
#technology .section_inner .half_column > div.active:nth-of-type(2){
 animation: fadeIn .4s ease-in 0.8s;
 animation-fill-mode: both;
}
#technology .section_inner .mov_container.active {
 animation: fadeIn 0.4s ease-in 0.4s;
 animation-fill-mode: both;
}


#technology .technology_block .section_inner .c_sub {
 text-align: center;
 margin: 0 auto;
 width: 68%;
 position: relative;
}

#technology .technology_block .section_inner .c_sub ul {
 position: absolute;
 right: 0;
 bottom: 0;
 text-align: left;
}

#technology .technology_block .section_inner .c_sub ul li {
 font-size: 1.3vw;
}

#technology .technology_block .section_inner .c_sub ul li img {
 display: inline-block;
 vertical-align: middle;
 margin: -4px 4px 0 0;
}

#product .product_copy .copy_ttl01 {
 text-align: left;
}

#technology .technology_block .section_inner .c_sub .pho > img {
 margin: 0 auto;
 width: 41.36%;
}


.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;
}



/*------------------------------------------------
 Related Links
------------------------------------------------*/
#related_links{
 margin: 15% 0 0;
 padding: 0 0 10%;
 background-color: #f0f0f0;
}
.main_container #related_links h2{
 margin: 40px auto;
}
#related_links ul.link_list{
 display: block;
 width: 68%;
 text-align: left;
 margin: -1% auto 3%;
}
#related_links ul.link_list li{
 display: block;
 padding: 0;
 margin: 0 0 2%;
 font-size: 1.4vw;
 position: relative;
}
#related_links ul.link_list a{
 display: inline-block;
 padding: 0.7em 1em 0.7em 0.5em;
 color: #000;
 text-decoration: none;
}
#related_links ul.link_list.link_bk a{
 color: #fff;
 background-color: #000;

}
#related_links ul.link_list a::before{
 content: "";
 display: inline-block;
 width: 0.9vw;
 height: 0.9vw;
 padding: 0;
 margin: 0 0.5em 0 0;
 border: 1px solid #000;
 border-width: 1px 1px 0 0;
 transform: rotate(45deg);
}
#related_links ul.link_list.link_bk a::before{
 border: 1px solid #fff;
 border-width: 1px 1px 0 0;
}
#related_links ul.link_list a.new_window::after{
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 1.44vw;
 height: 1.44vw;
 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;
}

#related_links ul.link_list.link_bk a.new_window::after{
 background: url(/cms/sp/nikkor_z/assets/img/icon_new_window_w.svg) no-repeat 50% 50%;
 background-size: cover;
}

/*------------------------------------------------
 Tool Tip
------------------------------------------------*/
.tips_container{
 visibility: hidden;
 display: none;
}
.tooltipster-base {
 width: 70% !important;
 max-width: 970px !important;
 left: 50% !important;
 transform: translateX(-50%) !important;
 pointer-events: auto;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-box {
 margin: 10px auto;
 position: relative;
 z-index: 0;
}
.tooltipster-sidetip .tooltipster-box {
 background: #fff;
 border: 1px solid #ddd;
 border-radius: 5px;
 box-shadow: 0 0 20px 0 rgba(0,0,0,0.7);
}
.tooltipster-sidetip .tooltipster-box::after{
 content: "";
 display: block;
 width: 2.4vw;
 height: 2.4vw;
 max-width: 40px;
 max-height: 40px;
 position: absolute;
 right: 0;
 top: 0;
 border-radius: 5px;
 background: #000 url(/cms/sp/nikkor_z/assets/img/batsu_w.svg) no-repeat center center;
 background-size: cover;
}
.tooltipster-sidetip .tooltipster-content {
 color: #000;
 font-size: 1.3vw;
 line-height: 1.5;
 padding: 15px;
}
.tooltipster-sidetip .tooltipster-content p.tips_ttl{
 font-size: 1.5vw;
 font-weight: 350;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow,
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
 height: 12px;
 margin-left: -12px;
 width: 24px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow {
 bottom: 0;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow {
 top: 0;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-uncropped {
 top: -12px;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-border {
 border-bottom-color: #ddd;
}
.tooltipster-sidetip .tooltipster-arrow-border {
 border: 12px solid transparent;
 left: 0;
 top: -1px;
}
.tooltipster-sidetip.tooltipster-bottom .tooltipster-arrow-background {
 border-bottom-color: #fff;
 left: 0;
 top: -1px;
}
.tooltipster-sidetip.tooltipster-top .tooltipster-arrow-background{
 border-top-color: #fff;
 left: 0;
 top: 0;
}
.tooltipster-sidetip .tooltipster-arrow-background {
 border: 12px solid transparent;
}

a.zoom::after {
 width: 3.5vw;
 height: 3.5vw;
 padding: 0;
 position: absolute;
 top: 0;
 bottom: auto;
}


/*********************************************
 Mobile Style
*********************************************/
@media only screen and (max-width: 760px) {
 .product_copy,
 .feature,
 #photographers p.copy_txt,
 #photographers .notes,
 #photographers .interview_link_inner,
 #technology .section_inner,
 #related_links ul.link_list{
  width: 90%;
 }
 .main_visual p.lens_copy{
  font-size: 6.2vw;
 }
 #product {
  padding-top: 5%;
  background: url(/cms/sp/nikkor_z/lens/assets/img/product_bg_sp.jpg) no-repeat 50% 100%;
  background-size: cover;
 }
 .product_inner{
   width: 100%;
  }
 .product_img{
  width: 43.8%;
  vertical-align: top;
 }
 .product_name{
  vertical-align: top;
  width: 45%;
  margin: 12% 0 0 5%;
 }
 .product_name p.new{
  margin: 0;
  padding: 4px 5px;
  border-radius: 2px;
  font-weight: 300;
  font-size: 3.6vw;
 }
 .main_container .product_name h2 {
  font-size: 5.2vw;
  line-height: 1.5;
  font-weight: 350;
  margin: 0 0 5%;
 }
 .product_name p.s-line {
  width: 26.4%;
  line-height: 1;
 }
 .product_name p.s-line img{
  display: block;
 }
 .product_copy {
  margin: 0 auto 11%;
 }
 .feature {
  margin: 0 auto 4%;
 }
 .product_copy p.copy_ttl {
  font-size: 5.2vw;
 }
 .product_copy ul.copy_body {
  width: 100%;
  font-size: 3.7vw;
 }
 .product_copy ul.copy_body li {
  list-style: none outside;
  margin: 0 0 3.5%;
 }
 .feature ul.feature_list li {
  min-width: 23.9%;
  text-align: center;
  font-size: 3.2vw;
  font-weight: 350;
 }
 .feature ul.feature_list li a,
 .feature ul.feature_list li span.tooltip {
  padding: 5px 1.5rem 5px 1rem;
 }
  .feature ul.feature_list li span.fc {
  padding: 5px 2.6rem 5px 1rem;
 }
 .feature ul.feature_list li.sm-fzsm {
  font-size: 2.6vw;
 }
 .feature ul.feature_list li.sm-fzsm a,
 .feature ul.feature_list li.sm-fzsm span.tooltip {
  padding-right: 12%;
  padding-left: 0;
 }
 .feature ul.feature_list li a::after,
 .feature ul.feature_list li span.tooltip::after{
  border-width: 0 1px 1px 0;
 }
 #product p.tech_link a{
  font-size: 3.6vw;
 }
 #product p.tech_link img{
  width: 14%;
 }
 #photographers{
  margin-top: 15%;
 }
 #photographers p.s-line_label {
  width: 20%;
  padding: 7% 0 0;
 }
 #photographers .direction_l p.s-line_label {
  margin: 0 0 -3% 5.5%;
  box-shadow: -10px 10px 10px 0 rgba(0,0,0,0.2);
 }
 #photographers .direction_r p.s-line_label {
  margin: 0 0 -3% 75%;
  box-shadow: 10px 10px 10px 0 rgba(0,0,0,0.2);
 }
 #photographers .photographers_copy {
  margin: 0 auto;
  padding: 12% 0 4%;
 }
 #photographers p.copy_ttl {
  font-size: 5.2vw;
  margin: 0 auto 8%;
 }
 #photographers p.copy_txt{
  font-size: 3.6vw;
  margin: 0 auto 6%;
 }
 #photographers p.copy_link{
  width: 90%;
  font-size: 3.4vw;
 }
 #photographers p.copy_link a::after{
  width: 1.5vw;
  height: 1.5vw;
  margin: -1% 0 0 2%;
 }
 #photographers .photographers_data,
 #photographers .direction_r .photographers_data{
  width: 100%;
  margin: 0 auto 10%;
  padding: 4% 0;
 }
 #photographers .photographers_data_inner,
 #photographers .direction_r .photographers_data_inner{
  width: 90%;
  margin: 0 auto;
 }
 #photographers .prof_data,
 #photographers .direction_r .prof_data{
  flex: 0 0 63%;
 }
 #photographers .prof_data p.prof_name{
  font-size: 5.2vw;
  padding: 0 0 0.1em;
  margin: 0 0 0.3em;
  border-bottom: 2px solid #fee633;
 }
 #photographers .prof_data p.prof_name span{
  display: block;
  margin: 0;
  padding: 0;
  font-size: 3.2vw;
  font-weight: 300;
 }
 #photographers .prof_img,
 #photographers .direction_r .prof_img{
  flex: 0 0 37%;
  align-self: flex-start;
 }
 #photographers .prof_data p.prof_note{
  font-size: 3.6vw;
 }
 #photographers .prof_data p.prof_note br{
  display: none;
 }
 #photographers .photographers_works{
  margin-bottom: 0;
 }
 #photographers .photographers_works figure,
  #photographers .photographers_works.photo_portrait figure{
  width: 86.666%;
  margin: 0 auto !important;
 }
 #photographers .photographers_works figure img {
  box-shadow: -10px 10px 10px 0 rgba(0,0,0,0.3);
 }
 #photographers .photographers_works figcaption {
  padding: 3% 0 0 0;
  font-size: 3vw;
 }
 #photographers .direction_r .photographers_works figcaption {
  padding: 3% 0 0 0;
 }
 #photographers .photographers_works .comment,
 #photographers .direction_r .photographers_works .comment,
#photographers .direction_l .photographers_works.photo_portrait .comment,
#photographers .direction_r .photographers_works.photo_portrait .comment{
  width: 100%;
  margin: -65% auto 0;
  padding: 71% 0 8%;
 }
 #photographers .photographers_works .comment p,
 #photographers .direction_r .photographers_works .comment p,
 #photographers .direction_l .photographers_works.photo_portrait .comment p,
 #photographers .direction_r .photographers_works.photo_portrait .comment p{
  width: 90%;
  margin: 0 auto;
  font-size: 3.6vw;
 }
 #photographers .interview_link{
  width: 100%;
 }
 #photographers .interview_link_inner{
  width: 100%;
 }
 #photographers .interview_link_inner p.link_btn {
  flex: 0 0 46%;
  align-content: start;
 }
 #photographers .interview_link_inner p.link_ttl {
  flex: 0 0 50%;
  font-size: 3.8vw;
  margin: 0 auto 2.1vw 0;
 }
 #photographers .direction_r .interview_link_inner p.link_ttl{
  margin: 0 0 2.1vw auto;
 }

 #photographers .interview_link_inner p.link_ttl::after{
  height: 2px;
 }
 #photographers .interview_link_inner p.link_ttl span{
  display: block;
  margin: 0;
 }
 #photographers p.other_works {
  width: auto;
  text-align: right;
  font-size: 3.6vw;
  margin: 8% 5% 6% auto;
 }
 #photographers p.other_works::after{
  height: 1px;
 }
 #photographers .direction_r p.other_works{
  text-align: left;
  margin: 8% auto 6% 5%;
 }

 #technology .tech_ttl p{
  font-size: 3.2vw;
 }
 #technology .section_ttl {
  width: 100%;
  margin: 0 auto 3% 0;
 }
 #technology .section_ttl h3 {
  font-size: 5.2vw;
  padding: 3% 0 2.4%;
 }
 #technology .section_ttl.new_tech h3::before {
  width: 9vw;
  vertical-align: middle;
  border-radius: 2px;
  padding: 4px 5px;
  font-size: 3.6vw;
 }
 #technology p.c_txt{
  font-size: 3.6vw;
 }
 #technology .section_inner{
  margin: 0 auto 10%;
 }
 #technology .section_inner .half_column{
  flex-direction: column;
 }
 #technology .section_inner .half_column > .col{
  flex: 0 0 100%;
  width: 100%;
  margin: 0 auto 5%;
 }
 #technology .section_inner figure figcaption{
  padding: 0.2em 0;
 }
 #technology p.more_btn a{
  font-size: 3.6vw;
 }
 #technology p.more_btn a::after{
  width: 8px;
  height: 8px;
 }
 #technology .technology_block .section_inner .c_sub .pho > img {
  width: 80% !important;
 }

 #technology .technology_block .section_inner .c_sub ul {
  position: inherit;
  right: auto;
  bottom: auto;
  margin: 3% -22% 0;
  text-align: center;
 }

 #technology .technology_block .section_inner .c_sub ul li {
  padding: 0 2px;
  display: inline;
  font-size: 3.3vw;
 }

 #technology .technology_block .section_inner .c_sub ul li img {
  width: auto;
  width: 2.8vw;
  margin: -2px 6px 0 0;
 }

 .mov_container .movie_ttl {
  font-size: 3.6vw;
 }

 #related_links ul.link_list{
  margin: 0 auto 4%;
 }
 #related_links ul.link_list li{
  font-size: 3.2vw;
 }
 #related_links ul.link_list a::before{
  width: 2.5vw;
  height: 2.5vw;
 }
 #related_links ul.link_list a.new_window::after{
  width: 3.2vw;
  height: 3.2vw;
 }
 #related_links ul.link_list li{
  margin: 0 0 2%;
 }

 .movie_wrapp{
  width: 100%;
 }

 a.zoom::after {
  width: 7vw;
  height: 7vw;
 }

 #photographers p.note_caption {
 width: 92%;
 margin: 0 0 0 3%;
 padding: 0;
 text-align: right;
 font-size: 3vw;
 color: #999;
}

/*------------------------------------------------
 Tool Tip
------------------------------------------------*/
 .tooltipster-base {
  width: 87% !important;
  max-width: 87% !important;
 }
 .tooltipster-sidetip .tooltipster-box::after{
  width: 5.5vw;
  height: 5.5vw;
 }
 .tooltipster-sidetip .tooltipster-content {
  font-size: 2.8vw;
 }
 .tooltipster-sidetip .tooltipster-content p.tips_ttl{
  font-size: 3.2vw;
 }
}


/*********************************************
 Max Width Size 1000px
*********************************************/
@media only screen and (min-width: 1000px) {
 .main_visual p.lens_copy{
  font-size: 3.4vw;
 }
}

/*********************************************
 Max Width Size 1340px
*********************************************/
@media only screen and (min-width: 1340px) {
 .product_name p.new{
  font-size: 2.2rem;
 }
 .main_container .product_name h2{
  font-size: 7.0rem;
 }
 .product_copy p.copy_ttl{
  font-size: 4.5rem;
 }
 .product_copy ul.copy_body{
  font-size: 2.4rem;
 }
 .feature ul.feature_list li{
  font-size: 2.4rem;
 }
 .ie .feature ul.feature_list li{
  width: 23%;
 }
 .feature ul.feature_list li span.tooltip::after {
  width: 1rem;
  padding-top: 1rem;
 }
}
/*********************************************
 Max Width Size 2000px
*********************************************/
@media only screen and (min-width: 2000px) {
 .main_visual p.lens_copy{
  font-size: 6.8rem;
 }
 #photographers p.copy_ttl{
  font-size: 5.4rem;
 }
 #photographers p.copy_txt{
  font-size: 2.4rem;
 }
 #photographers p.copy_link{
  font-size: 2.8rem;
 }
 #product p.tech_link a{
  font-size: 2.0rem;
 }
 #photographers .prof_data p.prof_name{
  font-size: 6.4rem;
 }
 #photographers .prof_data p.prof_note,
 #photographers .photographers_works .comment p{
  font-size: 2.4rem;
 }
 #photographers .photographers_works figcaption{
  font-size: 2rem;
 }
 #photographers .interview_link_inner p.link_ttl{
  font-size: 3.8rem;
 }
 #photographers p.other_works{
  font-size: 3.2rem;
 }
 #technology .tech_ttl p{
  font-size: 2.7rem;
 }
 #technology .section_ttl h3{
  font-size: 5.2rem;
 }
 #technology p.c_txt,
 #technology p.more_btn a,
 #related_links ul.link_list li{
  font-size: 2.8rem;
 }
 #related_links ul.link_list a.new_window::after{
  width: 2.4rem;
  height: 2.4rem;
 }
 a.zoom::after {
  width: 5.4%;
  height: 0;
  padding: 5.4% 0 0;
 }

 .tooltipster-sidetip .tooltipster-content {
  font-size: 2.4rem;
 }
 .tooltipster-sidetip .tooltipster-content p.tips_ttl{
  font-size: 2.6rem;
 }
}