/* ===============================================### 
base（編集不可）
###=============================================== */
/* --------------- ▽ reset css ▽ --------------- */
.main-area {
  display: block;
  min-width: unset;
  max-width: unset;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
}

#Contents {
  overflow: hidden;
}



.main-area * {
  box-sizing: border-box;
}

.main-area img, .main-area video, .main-area picture {
  width: 100%;
  height: auto;
}

.main-area a, .main-area picture, .main-area figure {
  display: block;
}

.main-area a {
  color: inherit;
  text-decoration: none;
}

.main-area table {
  border-collapse: collapse;
}

.main-area img {
  width: 100%;
  height: auto;
  border: none;
  vertical-align: bottom;
}

.white_box {
  width: 100%;
  background-color: #fff;
}

.li_block {
  display: block;
  width: 100%;
}

#lookBook_230201 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.main-area *::before, .main-area *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.link_none {
  pointer-events: none;
}

/* base */
@media screen and (max-width: 767px) {
  .main-area .pc_only {
    display: none;
  }

  .main-area .sp_only {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .main-area .sp_only {
    display: none;
  }

  .main-area .pc_only {
    display: block;
  }

  .main-area img {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ===============================================### 
編集エリア
###=============================================== */
/************** commmon **************/

  .main-area {
    margin: calc(60* (100vw /750)) 0 calc(20* (100vw /750));
  }

  div#Contents {
    margin-bottom: calc(-55* (100vw /750));
  }

  /* lookBook */
  #lookBook {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
  }

  @media only screen and (max-width: 767px) {
    #lookBook {
      position: relative;
      width: calc(670 * (100vw / 750));
      margin: 0 auto calc(60* (100vw /750));
      gap: calc(42* (100vw /750)) 0; 
    }

  #lookBook .bookWrapper {
    width: calc(312 * (100vw / 750));
  }

  #lookBook .bookWrapper .creditWrap {
    display: none;
  }
}

/* ダブレット */
@media only screen and (min-width: 768px) {
  #lookBook {
    width: calc(1120 * (100vw / 1920));
    margin: calc(187 * (100vw / 1920)) auto 0;
  }

  #lookBook .bookWrapper {
    position: relative;
    width: calc(320 * (100vw / 1920));
  }

  #lookBook .bookWrapper::before {
    transition-duration: 1.2s;
    position: absolute;
    content: "";
    display: block;
    bottom: 0;
    left: 0;
    max-height: 85px;
    width: 100%;
    height: 100%;
    background-color: rgb(255, 255, 255 ,0.65);
    background-repeat: no-repeat;
    background-position: bottom;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
  }

  #lookBook .bookWrapper:hover::before {
    opacity: 1;
  }

  #lookBook .bookWrapper .creditWrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 5;
  }

  #lookBook .bookWrapper .creditWrap .credit {
    padding: 0 calc(12 * (100vw / 1920)) calc(8 * (100vw / 1920));
    text-align: left;
  }

  #lookBook .bookWrapper .creditWrap .credit a {
    transition: transform 0.8s, opacity 0.8s;
    transform: translateY(20%);
    opacity: 0;
    display: inline-block;
    margin: 0 calc(14 * (100vw / 1920)) calc(0 * (100vw / 1920)) 0;
    font-size: calc(11 * (100vw / 1920));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
    display: flex;
    gap: 0 5rem;
    width: 100%;
  }

  #lookBook .landscape_img .bookWrapper .creditWrap .credit a {
    gap: 0 2rem;
  }

  #lookBook .bookWrapper:hover .creditWrap .credit a {
    transition-duration: 1.2s;
    transform: translateY(0);
    opacity: 1;
  }

  #lookBook .bookWrapper .creditWrap .credit a span {
    display: block;
    white-space: nowrap;
  }

  #lookBook .bookWrapper .creditWrap .credit a span:nth-of-type(1) {
    width: 30%;
  }

  #lookBook .landscape_img .bookWrapper .creditWrap .credit a span:nth-of-type(1) {
    width: 20%;
  }

  #lookBook .bookWrapper .creditWrap .credit a span:nth-of-type(2) {
    width: 35%;
  }

  #lookBook .landscape_img .bookWrapper .creditWrap .credit a span:nth-of-type(2) {
    width: 25%;
  }
}

/************** modal **************/
@media only screen and (max-width: 767px) {
  #modalBook.modalBookWrap {
    pointer-events: none;
    position: fixed;
    top: 48.5%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transition: opacity 0.6s 0.3s;
    box-shadow: calc(3 * (100vw / 750)) calc(3 * (100vw / 750)) calc(10 * (100vw / 750)) 0 rgb(0 0 0 / 16%);
    opacity: 0;
    z-index: 999999;
  }

  #modalBook.modalBookWrap.onView {
    pointer-events: all;
    opacity: 1;
  }

  #modalBook .modal-bg.modal-close {
    transition: opacity 0.4s 0.2s;
    pointer-events: none;
    opacity: 0;
  }

  #modalBook.onView .modal-bg.modal-close {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 150vw;
    height: 150vh;
    pointer-events: all;
    background-color: #fff;
    opacity: 0.7;
    z-index: 0;
  }

  #modalBook .modal-close {
    position: absolute;
    top: calc(30 * (100vw / 750));
    right: calc(30 * (100vw / 750));
    font-size: 0;
    width: calc(66 * (100vw / 750));
    cursor: pointer;
    z-index: 100;
  }

  #modalBook .mordalSlider {
    overflow: hidden;
    overflow-y: scroll;
    display: block;
    width: calc(750 * (100vw / 750));
    height: calc(1134 * (100vw / 750));
    background-color: #fff;
  }

  .mordalSlider .slick-list {
    padding-top: calc(120* (100vw /750));
  }

  #modalBook .mordalSlider .creditWrap p {
    margin: 0 auto;
    padding-top: calc(30* (100vw /750));
    width: calc(578 * (100vw / 750));
    display: flex;
    flex-wrap: wrap;
    gap: 0 calc(18* (100vw /750));
  }

  #modalBook .mordalSlider .creditWrap .credit {
    line-height: 1;
  }

  #modalBook .mordalSlider .creditWrap .credit a {
    display: inline-block;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    white-space: nowrap;
    font-size: calc(25 * (100vw / 750));
    letter-spacing: 0.02em;
    line-height: 1.71;
    color: #000;
    font-family: Arial, sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  #modalBook .mordalSlider .bookWrapper.sp_only {
    display: none;
  }

  #modalBook .slick-arrow::after {
    content: none ;
  }

  .main-area .lookBookWrap li {
    width: calc(312 * (100vw / 750));
  }

  .main-area .lookBookWrap li.landscape_img {
    margin: calc(5* (100vw /750)) auto calc(8* (100vw /750));
    width: calc(665* (100vw /750));
  }

  .main-area .lookBookWrap li.landscape_img:last-child {
    margin-bottom: 0;
  }
    /* パンくず */
  #breadcrumb {
    margin-bottom: calc(30* (100vw / 750));
    font-size: calc(24* (100vw / 750));
    width: 100%;
    color: #1c1c1c;
    padding: calc(26*(100vw/750)) calc(30*(100vw/750));
}

  #modalBook .bookWrapper .imgbox {
    margin: 0 auto;
    width: calc(578 * (100vw / 750));
  }
}

/* ===============================================###
SP用デザイン
###=============================================== */
  .tax_none {
    display: none !important;
  }

  /************** js **************/
  .js-fade.active {
    opacity: 1;
  }
  
  .js-fade {
    opacity: 0;
    transition: ease-in, opacity 2500ms, transform 1000ms;
  }

  .imgbox a:hover {
    opacity: 1;
  }

  .book--movie::before {
    content: none !important;
  }

  .book--movie a:hover {
    opacity: .6 !important;
  }

  /************** mv **************/
  .mainVisual {
    margin: 0 auto calc(10* (100vw /750));
  }

  .main_text {
    margin-bottom: calc(56* (100vw /750));
    font-size: calc(22* (100vw /750));
    letter-spacing: 0.05em;
    line-height: 1.5;
    text-align: center;
    font-weight: 300;
  }

  /************** look **************/
  .lookBookWrap {
    position: relative;
  }

  .main-area .lookBookWrap li {
    margin: -0.8rem auto;
  }

  .bookWrapper .imgbox {
    margin-bottom: 0;
  }

  .bookWrapper .imgbox .img_videox {
    padding:0 0 140.25%;
    position:relative;
    pointer-events: none;
  }

  .bookWrapper .imgbox .img_videox iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events: none;
  }
  
  /************** btn **************/
  .all_btn {
    margin: calc(140* (100vw /750)) auto calc(0* (100vw /750));
    width: calc(210* (100vw /750));
  }
  
  /************** under_bunner **************/
  .under_bunner {
    margin: 0 auto;
    width: calc(670* (100vw /750));
  }


/* ===============================================### 
PC用デザイン
###=============================================== */
@media only screen and (min-width: 768px) {
  /************** common **************/
    
    .main-area {
    margin: 6rem 0 6rem;
  }

  div#Contents {
    margin-bottom: 0rem;
  }

  .main-area .lookBookWrap li {
    margin: -0.8rem auto;
    width: 27.7rem;
  }

  .main-area .lookBookWrap li.landscape_img {
    margin: 2rem auto;
    width: 100%;
  }

  .main-area .lookBookWrap li.landscape_img:last-child {
    margin-bottom: 0;
  }

  .main-area .lookBookWrap li.landscape_img .slick-list {
    margin: 0 auto;
    width: 75.2rem;
  }
  /* パンくず */
  #breadcrumb {
    margin: 0 auto 2rem;
    padding: 2.3rem 0 1.7rem;
    font-size: 1.2rem;
    line-height: 1;
    width: 120rem;
    color: #1C1C1C;
  }


  /************** mv **************/
  .mainVisual {
    margin: 0 auto 1rem;
    width: 120rem;
  }
  .title {
    margin-bottom: 7rem;
    font-size: 4rem;
    letter-spacing: 0.05em;
    line-height: 1.45;
  }
    
  .main_text {
    margin-bottom: 7rem;
    font-size: 1.6rem;
    letter-spacing: 0.05em;
    line-height: 1.45;
  }
  
  /************** look **************/
  .bookWrapper .imgbox {
    margin-bottom: 0;
  }

  #lookBook {
    width: 120rem;
    margin: 0 auto;
    gap: 3.8rem 0;
  }

  #lookBook .bookWrapper {
    width: 27.7rem;
  }

  #lookBook .bookWrapper::before {
    max-height: 100%;
    width: 100%;
    height: 100%;
  }

  #lookBook .bookWrapper .creditWrap .credit {
    padding: 0 0rem 2.7rem 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem 0;
  }

  #lookBook .bookWrapper .creditWrap .credit a {
    margin: 0 14px 0px 0;
    font-size: 2rem;
    color: #000;
  }

  /************** modal **************/
  #modalBook {
    display: none!important;
  }

  /************** btn **************/
  .all_btn {
    margin: 18rem auto 0rem;
    width: 34rem;
  }

  /************** under_bunner **************/
  .under_bunner {
    margin: 0 auto;
    width: 120rem;
  }

}