@charset "utf-8";

#header{
 background-color: #fff;
}
.main_container{
 padding-top: 108px;
}
.main_container h2 {
 font-size: 2.0vw;
 margin: 0 auto 3.5%;
}
#gallery_container{
 display: flex;
 justify-content: space-between;
 align-content: flex-start;
}
#search_bar{
 flex: 0 0 18%;
 margin: 0;
 position: sticky;
 top: 88px;
 left: 0;
 max-height: calc(100vh - 88px);
 overflow: auto;
 overscroll-behavior: contain;
}
#search_bar dl,
#search_bar p{
 font-size: 1.1vw;
}
#search_bar dl{
 text-align: left;
}
#search_bar dt {
 display: flex;
 justify-content: space-between;
 align-items: center;
 color: #fff;
 padding: 0 0 0 1em;
 background-color: #808080;
 border-bottom: 1px solid #fff;
 cursor: pointer;
}
#search_bar dt span{
 flex: 0 0 auto;
 margin: 0 auto 0 0;
}
#search_bar dt span.icon {
 display: block;
 flex: 0 0 24%;
 width: 24%;
 height: 0;
 padding: 24% 0 0;
 margin: 0 0 0 auto;
 background-color: #505050;
 position: relative;
}
#search_bar dt span.icon::before,
#search_bar dt span.icon::after{
 content: "";
 display: block;
 background-color: #fff;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
#search_bar dt span.icon::before{
 width: 40%;
 height: 1px;
}
#search_bar dt span.icon::after{
 width: 1px;
 height: 0;
 padding: 40% 0 0;
}

#search_bar dt.open span.icon::after{
 content: none;
}

#search_bar dd{
 display: none;
}
#search_bar .child_menu li {
 padding: 1em;
 background-color: #ececec;
 border-bottom: 1px solid #fff;
}
#search_bar input[type="checkbox"] {
 display: none;
}
#search_bar input[type="checkbox"] + span {
 display: block;
 position: relative;
 padding-left: 25px;
 cursor: pointer;
}
#search_bar input[type="checkbox"] + span::before {
 content: "";
 display: block;
 width: 16px;
 height: 16px;
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 background-color: #808080;
}
#search_bar input[type="checkbox"]:checked + span::before {
 background-color: #ffe433;
}
#search_bar input[type="checkbox"]:checked + span::after {
 content: "";
 display: block;
 position: absolute;
 top: 50%;
 left: 5px;
 width: 5px;
 height: 10px;
 -webkit-transform: rotate(45deg) translate(-90%, -40%);
 transform: rotate(45deg) translate(-90%, -40%);
 border-bottom: 2px solid #000;
 border-right: 2px solid #000;
}
p.search_reset{
 display: flex;
 align-items: center;
 padding: 1em 2em;
 text-align: left;
 background-color: #c3c3c3;
 cursor: pointer;
}
p.search_reset span{
 flex: 0 0 auto;
}
p.search_reset::after {
 flex: 0 0 10%;
 content: "";
 display: inline-block;
 vertical-align: middle;
 width: 8%;
 height: 0;
 padding: 7% 0 0;
 margin: 0 0 0 auto;
 background: url(/sp/nikkor_z/gallery/img/icon_search.svg) no-repeat 50%;
 background-size: contain;
}

#img_container{
 flex: 0 0 82%;
 margin: 0 5px 0 auto;
 position: relative;
 max-width: calc(82% - 10px);
}
.gallery_list{
 line-height: 1;
 letter-spacing: -0.04em;
}
.gallery_list li,
.gallery_list li.grid_sizer{
 display: inline-block;
 width: 33.333333%;
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}
.gallery_list li{
 transition: opacity 0.4s;
}
.gallery_list li.grid_sizer{
 height: 0;
}
.gallery_list li.w02{
 width: 40%;
}
.gallery_list li a{
 display: block;
 padding: 0 5px 10px;
}
.gallery_list li img{
 width: 100%;
 height: auto;
}

.search__none{
 display: none;
}
p.result_none {
 margin: 12% auto 5%;
 font-size: 1.6vw;
}
.search__none p.search_reset{
 width: 28%;
 max-width: 380px;
 margin: 0 auto;
 font-size: 1.3vw;
}

.more_box{
 display: none;
 margin: 0 auto;
 padding: 20% 0 10%;
 background: rgb(255,255,255);
 background: linear-gradient(0deg,
  rgba(255,255,255,1) 0,
  rgba(255,255,255,0.9) 60%,
  rgba(255,255,255,0) 100%);
 position: absolute;
 left: 0;
 right: 0;
 bottom: -5px;
}
p.more_load {
 width: 28%;
 margin: 0 auto;
 padding: 1em 2em;
 font-size: 1.3vw;
 background-color: #ffe433;
 cursor: pointer;
}

/*********************************************
 Mobile Style
*********************************************/
@media only screen and (max-width: 760px) {
 .main_container{
  padding-top: 70px;
 }
 .main_container h2{
 font-size: 5.2vw;
 margin: 0 auto 20px;
}

 #gallery_container{
  /*flex-direction: column;*/
  display: block;
 }
 #search_bar {
  position: static;
 }
 #search_bar,
 #img_container{
  flex:none;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 auto 4px;
 }
 #search_bar dl, #search_bar p {
  font-size: 4.2vw;
 }
 #search_bar dd{
  display: none;
 }
 #search_bar dt span.icon{
  flex: 0 0 14%;
  width: 14%;
  padding: 14% 0 0;
 }
 #search_bar .child_menu li {
    padding: 0.8em 1em;
 }
 .more_box{
  display: none;
  padding: 41.5% 0 10%;
  background: linear-gradient(0deg,
   rgba(255,255,255,1) 0,
   rgba(255,255,255,0.9) 50%,
   rgba(255,255,255,0) 100%);
 }
 p.more_load {
  width: 60%;
  font-size: 4.2vw;
 }
 p.search_reset{
  padding: 0.8em 2em;
 }
 p.search_reset::after{
  flex: 0 0 10%;
  width: 8%;
  height: 0;
  padding: 7% 0 0;
 }
 .gallery_list{
  padding: 0 2px;
 }
 .gallery_list li,
 .gallery_list li.w02,
 .gallery_list li.grid_sizer{
  width: calc(50% - 2px);
 }
 .gallery_list li a{
  padding: 0 2px 4px;
 }
 p.result_none{
  font-size: 4.2vw;
 }
 .search__none p.search_reset {
  width: 50%;
  max-width: none;
  margin: 0 auto;
  font-size: 4.2vw;
 }
 .search__none p.search_reset::after {
  flex: 0 0 12%;
  width: 12%;
  height: 0;
  padding: 12% 0 0;
 }
}


/*********************************************
 Max Width Size 2000px (Gallery mobile)
*********************************************/
@media only screen and (min-width: 2000px) {
 #search_bar dl,
 #search_bar p,
 p.more_load{
  font-size: 2.1rem;
 }
 p.result_none{
  font-size: 3.2rem;
 }
}