/*//////////////////////////////////////////////////

Title : layout.css
For   : FURFUR styles of look page

Created       : 2022-08-16
Last Modified : 2022-08-21

//////////////////////////////////////////////////*/

/*
==============================================================================================
																				1. common / module
==============================================================================================
*/
#Contents .contLook img {
  width: 100%;
  height: auto;
}

#Contents .contLook .content__block {
  display: grid;
}

#Contents .contLook .content__text,
#Contents .contLook .products__list {
  display: none;
}

#Contents .contLook .products__list.is-current {
  display: block;
}

#Contents .contLook .index {
  text-align: center;
}

#Contents .contLook .index__category {
  display: inline-block;
  color: #808080;
  cursor: pointer;
}

#Contents .contLook .index__category.is-current {
  color: #000000;
  border-bottom: 1px solid #000000;
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for desktop
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (min-width: 768px) {
  .hidden-desktop {
    display: none;
  }

  #Contents .contLook {
    padding-block: 60px;
  }

  #Contents .contLook .content__block {
    margin-block-start: 60px;
  }

  #Contents .contLook .content__block {
    grid-template-columns: repeat(3,1fr);
    column-gap: 15px;
    row-gap: 15px;
    max-width: 990px;
    width: 95%;
    margin-inline: auto;
  }

  #Contents .contLook .index {
    margin-block-start: 60px;
  }

  #Contents .contLook .index__category {
    font-size: 15px;
  }

  #Contents .contLook .index__category + .index__category {
    margin-inline-start: 15px;
  }
}

/*
//////////////////////////////////////////////////////////////////////////////////////////////
                                          for mobile
//////////////////////////////////////////////////////////////////////////////////////////////
*/
@media screen and (max-width: 767px) {
  .hidden-phone {
    display: none;
  }

  #Contents .contLook {
    padding-block: calc(100* (100vw/750));
  }

  #Contents .contLook .content__block {
    margin-block-start: calc(100* (100vw/750));
  }

  #Contents .contLook .content__block {
    grid-template-columns: repeat(2,1fr);
    column-gap: calc(20* (100vw/750));
    row-gap: calc(20* (100vw/750));
    width: calc(680* (100vw/750));
    margin-inline: auto;
  }

  #Contents .contLook .index {
    margin-block-start: calc(100* (100vw/750));
  }

  #Contents .contLook .index__category {
    font-size: calc(28* (100vw/750));
  }

  #Contents .contLook .index__category + .index__category {
    margin-inline-start: calc(30* (100vw/750));
  }
}