/* EVIDNCE INDEX PAGE */
/* mixin
----------------------------------------*/
/* define
----------------------------------------*/
/* MV
----------------------------------------------------------- */
.mv {
  position: relative; }
  .mv::before {
    content: '';
    display: block;
    background: url(../img/evidence-mv.jpg) no-repeat 50% 35%;
    background-size: cover; }
    @media screen and (min-width: 751px) {
      .mv::before {
        height: 38.5714285714vw;
        min-height: 500px;
        max-height: 750px; } }
    @media screen and (max-width: 750px) {
      .mv::before {
        height: 66.6666666667vw; } }
  .mv::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: 250px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, black 100%); }
    @media screen and (max-width: 750px) {
      .mv::after {
        height: 24vw;
        bottom: auto;
        top: 42.8vw;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, black 100%); } }
  .mv .inner-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 250px;
    margin-top: -250px;
    padding-top: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .mv .inner-wrap > * {
      width: 50%; }
    @media screen and (max-width: 750px) {
      .mv .inner-wrap {
        display: block;
        height: auto;
        margin-top: 0;
        padding-top: 0;
        text-align: center; }
        .mv .inner-wrap > * {
          width: auto; } }
    .mv .inner-wrap .mv-ttl {
      height: 75px;
      background-image: url(../img/evidence-mv-ttl.png); }
      @media screen and (max-width: 750px) {
        .mv .inner-wrap .mv-ttl {
          height: 10.6666666667vw;
          margin-top: -10.6666666667vw; } }
    .mv .inner-wrap .mv-lead {
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      font-size: 2.2em;
      line-height: 1.4; }
      @media screen and (min-width: 751px) {
        .mv .inner-wrap .mv-lead {
          width: 60%;
          margin-top: 0.4em; } }
      @media screen and (max-width: 750px) {
        .mv .inner-wrap .mv-lead {
          font-size: 1.4em;
          background: #000;
          padding: 1em 0 1.5em; } }

/* title
----------------------------------------------------------- */
@media screen and (min-width: 751px) {
  .line-ttl.sec-ttl {
    text-align: left; }
    .line-ttl.sec-ttl span::after {
      display: none; } }

/* select
----------------------------------------------------------- */
select {
  /* reset */
  width: auto;
  padding-right: 1em;
  cursor: pointer;
  font-family: inherit;
  text-indent: 0;
  text-overflow: ellipsis;
  text-shadow: none !important;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  /* customize */
  position: relative;
  font-size: 1.6em;
  line-height: 1.2;
  color: #FFF;
  padding: 1.1em 3em 1em 2em;
  background: url(../../common/img/icon-select.svg) no-repeat #535353;
  background-position: calc(100% - 1em) 50%;
  background-size: auto 1.2em;
  overflow: hidden; }
  select::-ms-expand {
    display: none; }
  @media screen and (max-width: 750px) {
    select {
      font-size: 1.4em;
      padding: 1.2em 2em 1.2em 1.2em; } }
  select optgroup, select option {
    background: #FFF;
    color: #000; }

/* filter-wrap
----------------------------------------------------------- */
.filter-wrap > * {
  transition: opacity 0.5s cubic-bezier(0.39, 0.575, 0.565, 1); }
.filter-wrap.tr-start > * {
  transition: none;
  opacity: 0; }
.filter-wrap .clear-btn {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  display: none;
  color: #FFF;
  border: 1px solid #FFF;
  background-color: transparent;
  width: 730px;
  margin: 80px auto 0;
  text-align: center;
  font-size: 2em;
  padding: 0.9em 0; }
  @media screen and (max-width: 750px) {
    .filter-wrap .clear-btn {
      font-size: 1.6em;
      margin-top: 13.3333333333vw;
      width: auto; } }
  .filter-wrap .clear-btn::after {
    display: none; }
  #lens-lineup .filter-wrap .clear-btn {
    color: #2e2e2e;
    border-color: #2e2e2e; }
.filter-wrap.filterd .clear-btn {
  display: block; }

/* Photographers
----------------------------------------------------------- */
#photographers .ttl-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 50px 30px 50px 0; }
  @media screen and (max-width: 750px) {
    #photographers .ttl-wrap {
      display: block;
      text-align: center;
      padding: 8vw 4vw 10.6666666667vw; } }
#photographers .select-menu {
  width: 460px; }
  @media screen and (max-width: 750px) {
    #photographers .select-menu {
      width: 100%;
      margin: 2em auto; } }
#photographers .lens-btn {
  width: auto;
  padding: 0 2em 0 0;
  font-size: 1.6em;
  background-color: transparent;
  color: #bbb; }
  #photographers .lens-btn::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0.7; }
  @media screen and (max-width: 750px) {
    #photographers .lens-btn {
      display: inline-block;
      font-size: 1.2em; } }
#photographers .photographers-wrap {
  background: #535353;
  padding: 80px 0 120px; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-wrap {
      padding: 13.3333333333vw 4vw 20vw; } }
  #photographers .photographers-wrap.filterd .photographers-sec:not(.active) {
    display: none !important; }
@media screen and (max-width: 750px) {
  #photographers .photographers-sec {
    margin: 0 -4vw; } }
#photographers .photographers-sec + .photographers-sec:not(.active) {
  margin-top: 120px; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-sec + .photographers-sec:not(.active) {
      margin-top: 18.6666666667vw; } }
@media screen and (min-width: 751px) {
  #photographers .photographers-sec .line-ttl.name-ttl {
    text-align: left; }
    #photographers .photographers-sec .line-ttl.name-ttl > span {
      padding-left: 320px; } }
#photographers .photographers-sec .sec-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 30px; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-sec .sec-inner {
      display: block;
      padding: 0; } }
#photographers .photographers-sec .comment {
  width: 250px;
  margin-top: -5em; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-sec .comment {
      width: auto;
      margin: 5.3333333333vw auto;
      padding: 0 4vw;
      display: flex;
      justify-content: flex-start;
      align-items: center; } }
  #photographers .photographers-sec .comment dt {
    width: 150px;
    margin: auto; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .comment dt {
        width: 20vw;
        flex-shrink: 0; } }
  #photographers .photographers-sec .comment dd {
    font-size: 1.3em;
    line-height: 1.6;
    margin-top: 1em;
    margin-right: -0.5em; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .comment dd {
        font-size: 1.1em;
        margin: 0 0 0 1.5em; } }
#photographers .photographers-sec .impressions {
  width: 850px;
  margin-top: 40px; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-sec .impressions {
      width: auto;
      margin-top: 0; } }
#photographers .photographers-sec .impression-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2e2e2e;
  position: relative; }
  @media screen and (max-width: 750px) {
    #photographers .photographers-sec .impression-item {
      flex-direction: row-reverse;
      flex-wrap: wrap;
      align-items: baseline;
      background: none;
      padding: 0 4vw 4vw; }
      #photographers .photographers-sec .impression-item > * {
        position: relative; }
      #photographers .photographers-sec .impression-item::before {
        content: '';
        position: absolute;
        top: 24vw;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #2e2e2e; } }
  #photographers .photographers-sec .impression-item + .impression-item {
    margin-top: 20px; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .impression-item + .impression-item {
        margin-top: 8vw; } }
  #photographers .photographers-sec .impression-item .impression-img {
    width: 270px;
    overflow: hidden; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .impression-item .impression-img {
        width: 60vw; } }
    #photographers .photographers-sec .impression-item .impression-img > span {
      height: 180px;
      background-size: cover; }
      @media screen and (max-width: 750px) {
        #photographers .photographers-sec .impression-item .impression-img > span {
          height: 40vw; } }
  #photographers .photographers-sec .impression-item .lens-img {
    width: 120px;
    height: auto;
    position: relative; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .impression-item .lens-img {
        width: 29.3333333333vw; } }
  @media screen and (min-width: 751px) {
    #photographers .photographers-sec .impression-item.new .lens-img {
      margin-top: 1em; } }
  #photographers .photographers-sec .impression-item.new .lens-img::before {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    position: absolute;
    content: 'NEW!';
    font-size: 1.3em;
    font-weight: bold;
    text-align: center;
    color: #00afcb;
    width: 100%;
    left: 0;
    top: -1.5em; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .impression-item.new .lens-img::before {
        font-size: 1.1em; } }
  #photographers .photographers-sec .impression-item .impression-ttl {
    width: 420px; }
    @media screen and (max-width: 750px) {
      #photographers .photographers-sec .impression-item .impression-ttl {
        width: 100%;
        padding-left: 0vw;
        margin-top: 3.3333333333vw; } }
    #photographers .photographers-sec .impression-item .impression-ttl.movie-ttl {
      position: relative;
      left: -120px; }
      @media screen and (max-width: 750px) {
        #photographers .photographers-sec .impression-item .impression-ttl.movie-ttl {
          left: 0; } }
    #photographers .photographers-sec .impression-item .impression-ttl.new:before {
      content: "NEW!";
      display: inline-block;
      color: #dd0000;
      font-size: 16px;
      font-weight: bold;
      margin-top: -2em;
      margin-bottom: 5px; }
    #photographers .photographers-sec .impression-item .impression-ttl dt {
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      color: #ffcc00;
      font-size: 1.8em;
      font-weight: bold;
      line-height: 1.4;
      margin-right: 1em; }
      @media screen and (max-width: 750px) {
        #photographers .photographers-sec .impression-item .impression-ttl dt {
          font-size: 1.6em;
          margin-right: 0; } }
    #photographers .photographers-sec .impression-item .impression-ttl dd {
      margin-top: 0.5em;
      font-size: 1.7em;
      margin-right: 2em;
      line-height: 1.5; }
      @media screen and (max-width: 750px) {
        #photographers .photographers-sec .impression-item .impression-ttl dd {
          font-size: 1.5em;
          margin-right: 0; } }
  body:not(.has-touch) #photographers .photographers-sec .impression-item {
    transition: background-color 0.8s cubic-bezier(0.39, 0.575, 0.565, 1); }
    body:not(.has-touch) #photographers .photographers-sec .impression-item .impression-img .bg-img {
      transition: transform 0.8s cubic-bezier(0.39, 0.575, 0.565, 1); }
    body:not(.has-touch) #photographers .photographers-sec .impression-item:hover {
      background-color: #000; }
      body:not(.has-touch) #photographers .photographers-sec .impression-item:hover .impression-img .bg-img {
        -webkit-transform: scale(1.07);
        transform: scale(1.07); }

/* Lens Lineup
----------------------------------------------------------- */
#lens-lineup {
  background: #dcdcdc;
  padding: 60px 0 80px;
  color: #2e2e2e; }
  @media screen and (max-width: 750px) {
    #lens-lineup {
      padding: 13.3333333333vw 0 13.3333333333vw; } }
  #lens-lineup .ttl-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center; }
    @media screen and (max-width: 750px) {
      #lens-lineup .ttl-wrap {
        display: block;
        text-align: center;
        padding: 0 4vw; } }
    #lens-lineup .ttl-wrap .line-ttl.sec-ttl {
      color: #2e2e2e; }
      #lens-lineup .ttl-wrap .line-ttl.sec-ttl span::before, #lens-lineup .ttl-wrap .line-ttl.sec-ttl span::after {
        background-color: #2e2e2e; }
  #lens-lineup .select-menu {
    width: 600px;
    margin-left: 70px; }
    @media screen and (max-width: 750px) {
      #lens-lineup .select-menu {
        width: 100%;
        margin: 2em auto 0; } }
  #lens-lineup .lineup-wrap {
    margin-top: 60px;
    padding: 0 30px; }
    @media screen and (max-width: 750px) {
      #lens-lineup .lineup-wrap {
        margin-top: 10.6666666667vw;
        padding: 0 4vw; } }
    #lens-lineup .lineup-wrap .category-ttl {
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      font-size: 3em;
      color: #666;
      margin-bottom: 0.5em; }
      @media screen and (max-width: 750px) {
        #lens-lineup .lineup-wrap .category-ttl {
          font-size: 2.5em; } }
    #lens-lineup .lineup-wrap.filterd .category-ttl {
      display: none; }
    #lens-lineup .lineup-wrap.filterd .lens-sec:not(.active) {
      display: none !important; }
  #lens-lineup .lens-sec {
    border: solid #2e2e2e;
    border-width: 1px 0;
    padding: 40px 0 20px 25px;
    margin-bottom: -1px; }
    @media screen and (max-width: 750px) {
      #lens-lineup .lens-sec {
        padding: 3.3333333333vw 0 6.6666666667vw; } }
    #lens-lineup .lens-sec.disabled {
      pointer-events: none; }
      #lens-lineup .lens-sec.disabled > * {
        opacity: 0.3; }
    #lens-lineup .lens-sec + .category-ttl {
      margin-top: 60px; }
      @media screen and (max-width: 750px) {
        #lens-lineup .lens-sec + .category-ttl {
          margin-top: 10.6666666667vw; } }
    #lens-lineup .lens-sec .lens-ttl {
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      font-size: 2.8em; }
      @media screen and (max-width: 750px) {
        #lens-lineup .lens-sec .lens-ttl {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 2em;
          min-height: 32vw; }
          #lens-lineup .lens-sec .lens-ttl .lens-img.for-sp {
            width: 33.3333333333vw;
            flex-shrink: 0; }
          #lens-lineup .lens-sec .lens-ttl .lens-name {
            width: 54.6666666667vw;
            line-height: 1.3; } }
    #lens-lineup .lens-sec .sec-inner {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 15px;
      position: relative; }
      @media screen and (min-width: 751px) {
        #lens-lineup .lens-sec .sec-inner::before {
          content: '';
          position: absolute;
          top: 10px;
          bottom: 10px;
          width: 1px;
          background-color: #2e2e2e;
          left: 290px; } }
      @media screen and (max-width: 750px) {
        #lens-lineup .lens-sec .sec-inner {
          display: block;
          margin-top: 0;
          padding: 0 2.6666666667vw; } }
      #lens-lineup .lens-sec .sec-inner .lens-img.for-pc {
        width: 290px;
        flex-shrink: 0;
        padding-right: 60px;
        margin: 10px 60px 10px 0; }
      #lens-lineup .lens-sec .sec-inner .reviewer-ttl {
        display: none; }
  #lens-lineup .page-top-btn {
    display: block;
    color: #FFF;
    width: 730px;
    margin: 80px auto 0;
    text-align: center;
    font-size: 2em;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    padding: 0.9em 0; }
    @media screen and (max-width: 750px) {
      #lens-lineup .page-top-btn {
        font-size: 1.6em;
        margin-top: 13.3333333333vw;
        width: auto; } }
    #lens-lineup .page-top-btn::after {
      left: 1.5em;
      right: auto;
      -webkit-transform: rotate(-90deg);
      transform: rotate(-90deg); }
      @media screen and (max-width: 750px) {
        #lens-lineup .page-top-btn::after {
          left: 1em; } }
    body:not(.has-touch) #lens-lineup .page-top-btn {
      transition: background-color 0.3s; }
      body:not(.has-touch) #lens-lineup .page-top-btn:hover {
        background-color: #2e2e2e; }

/*# sourceMappingURL=style.css.map */