@charset "UTF-8";

@media (max-width: 1400px) and (min-width: 768px){
  html{
    font-size: 0.7142857143vw!important;
  }
}
#CE240604occasion{
  --zindex-behind: -1;
  --zindex-middle: 0;
  --zindex-front: 1;
  --pointer-none: none;
  --color-credit: #251E1C;
  --color-white: #fff;
  --color-back: #FFFDF7;
  --color-back2: #EDE9DE;
}

@media screen and (max-width: 767px) {
  #breadcrumb,
  .header .btn-search,
  .header .btn-cart,
  .header .header-logo{
    display: none;
  }
  /* .main-area{
    padding-top: 0!important;
  } */
}
/*================================
  breadlist
=================================*/
#breadcrumb .cateList{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: initial;
}
.archiveArea {
  margin-top: calc(130 *(100vw / 750)) !important;
}
#breadcrumb .cateList a{
  width: auto;
}
@media screen and (min-width: 768px) {
  #breadcrumb{
    max-width: 120rem;
    width: 100%;
    margin: 0 auto;
  }
  #breadcrumb .cateList{
    text-overflow: clip;
    white-space: normal;
    overflow: visible;
  }
  .archiveArea {
    margin-top: 115px !important;
  }
}

/*================================
  variables
=================================*/
#CE240604occasion img,
#CE240604occasion picture,
#CE240604occasion a{
  display: inline-block;
  width: 100%;
  height: auto;
}
#CE240604occasion a:hover{
  transition: .5s;
  opacity: .6s;
}
#CE240604occasion span{
  display: inline-block;
}
#CE240604occasion .flexArea{
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
}
#CE240604occasion .gridWrap{
  display: grid;
  margin: 0 auto;
  width: 100%;
}
/*--------------------------------
  variables for mobile
--------------------------------*/
@media screen and (max-width: 767px) {
  .header{
    top: 0;
  }
  .header.is-headerUp{
    top: -150px;
  }
  #CE240604occasion .flexArea-sp{
    display: flex;
    width: 100%;
    margin: 0 auto;
  }
  #CE240604occasion .pc_only{
    display: none!important;
  }
}
/*--------------------------------
  variables for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  .header,
  #breadcrumb{
    display: none;
  }
  #CE240604occasion .flexArea-pc{
    display: flex;
    width: 100%;
    margin: 0 auto;
  }
}
/* end variables */
/*================================
  font
=================================*/
@font-face {
  font-family: "font-ja";
  src: url('../font/SawarabiGothic-Regular.ttf') format('truetype');
}
#CE240604occasion .font-ja-sans{
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "メイリオ", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-feature-settings: "palt";
}
#CE240604occasion .font-ja-serif{
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  font-style: normal;
  font-feature-settings: "palt";
}
#CE240604occasion .font-ja-serif2{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-weight: 600;
  font-style: normal;
  font-feature-settings: "palt";
}
#CE240604occasion .font-credit{
  font-family: "pragmatica", sans-serif;
  font-weight: 300;
  font-style: normal;
}


/*================================
  font
=================================*/
#CE240604occasion .firstviewArea__ttl{
  font-size: calc(32 *(100vw /750));
  letter-spacing: 0em;
  text-align: center;
  color: var(--color-white);
}
#CE240604occasion .lastArea__ttl{
  font-size: calc(32 *(100vw /750));
  letter-spacing: 0em;
  text-align: center;
}
#CE240604occasion .creditTxt{
  font-size: calc(26 *(100vw /750));
  line-height: 1.5384615385;
  letter-spacing: 0em;
  color: var(--color-credit);
  display: inline-block;
}
#CE240604occasion [data-lookTtl-sp]{
  z-index: var(--zindex-front);
  pointer-events: var(--pointer-none);
}
#CE240604occasion .lastArea__btn{
  font-size: calc(28 *(100vw /750));
  letter-spacing: 0em;
  text-align: center;
  color: var(--color-credit);
  text-decoration: underline;
  text-decoration-thickness: calc(2*(100vw / 750));
  text-underline-offset: calc(3*(100vw / 750));
  display: flex;
  justify-content: center;
  padding-bottom: calc(200*(100vw / 750));
}
#CE240604occasion .lastArea__btn a{
  display: inline-block;
  width: auto;
}
/*--------------------------------
  font for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #CE240604occasion .firstviewArea__ttl{
    font-size: 1.4rem;
    color: var(--color-credit);
  }
  #CE240604occasion .creditTxt,
  #CE240604occasion [data-lookTtl-pc]{
    font-size: 1.4rem;
    line-height: 1.7142857143;
  }
  #CE240604occasion .creditTxt a{
    width: auto;
  }
}
/* end font */


/*================================
  layout
=================================*/
#CE240604occasion{
  background-color: var(--color-back);
}
#CE240604occasion .firstviewArea{
  position: relative;
  margin: 0 auto calc(25 *(100vw /750));
}
#CE240604occasion .firstviewArea__ttlWrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  top: auto;
  bottom: calc(90 *(100vw /750));
  z-index: var(--zindex-front);
  pointer-events: var(--pointer-none);
}
#CE240604occasion .firstviewArea__ttl[data-line="1"]{
  margin-left: calc(2*(100vw / 750));
  margin-bottom: calc(29 *(100vw /750));
}
#CE240604occasion .firstviewArea__ttl[data-line="2"]{
  margin-bottom: calc(16 *(100vw /750));
}
#CE240604occasion .firstviewArea__ttl[data-line="3"]{
  width: calc(676 *(100vw /750));
  margin-bottom: calc(241 *(100vw /750));
}
#CE240604occasion .firstviewArea__logo{
  width: calc(242 *(100vw /750));
}
#CE240604occasion .look01{
  margin-bottom: calc(174 *(100vw /750));
}
#CE240604occasion [data-img="01"]{
  width: calc(700 *(100vw /750));
  margin: 0 auto calc(180 *(100vw /750));
}
#CE240604occasion [data-img="02"]{
  width: calc(478 *(100vw /750));
  margin: 0 auto calc(25 *(100vw /750)) calc(25 *(100vw /750));
}
#CE240604occasion [data-img="03"]{
  width: calc(560 *(100vw /750));
  margin: 0 calc(26 *(100vw /750)) calc(16 *(100vw /750)) auto;
  position: relative;
}
#CE240604occasion [data-lookTtl-sp="01"]{
  width: calc(200.75 *(100vw /750));
  position: absolute;
  top: auto;
  bottom: calc(35.6 *(100vw /750));
  left: calc(-92.8 *(100vw /750));
}
#CE240604occasion [data-credit-sp="01"]{
  text-align: left;
  margin: 0 0 0 calc(70 *(100vw /750));
}
#CE240604occasion .look02{
  margin-bottom: calc(180 *(100vw /750));
}
#CE240604occasion [data-img="04"]{
  margin-bottom: calc(180 *(100vw /750));
}
#CE240604occasion [data-img="05"]{
  width: calc(478 *(100vw /750));
  margin: 0 auto calc(25 *(100vw /750));
}
#CE240604occasion [data-img="06"]{
  width: calc(478 *(100vw /750));
  margin: 0 auto calc(180 *(100vw /750));
}
#CE240604occasion [data-lookTtl-sp="02"]{
  width: calc(214.67 *(100vw /750));
  margin: 0 auto calc(52*(100vw /750));
}
#CE240604occasion [data-credit-sp="02"]{
  text-align: center;
  margin: 0 auto calc(174*(100vw /750));
}
#CE240604occasion .other01{
  margin: 0 auto calc(180 *(100vw /750));
}
#CE240604occasion [data-img="08"]{
  width: calc(478 *(100vw /750));
  margin: 0 auto calc(42*(100vw /750));
}
#CE240604occasion [data-credit-sp="03"]{
  text-align: center;
}
#CE240604occasion .look03{
  margin-bottom: calc(174 *(100vw /750));
}
#CE240604occasion [data-img="09"]{
  margin-bottom: calc(25 *(100vw /750));
}
#CE240604occasion [data-img="10"]{
  width: calc(700 *(100vw /750));
  margin: 0 auto calc(180 *(100vw /750));
}
#CE240604occasion [data-img="11"]{
  width: calc(478 *(100vw /750));
  margin: 0 calc(25 *(100vw /750)) calc(14 *(100vw /750)) auto;
  position: relative;
}
#CE240604occasion [data-lookTtl-sp="03"]{
  width: calc(193.07 *(100vw /750));
  position: absolute;
  top: auto;
  bottom: calc(35.4 *(100vw /750));
  left: calc(-47.4 *(100vw /750));
}
#CE240604occasion [data-credit-sp="04"]{
  text-align: right;
  display: inline-block;
  margin: 0 0 0 calc(23 *(100vw /750));
}
#CE240604occasion .other02{
  margin: 0 auto calc(180 *(100vw /750)) calc(25 *(100vw /750));
}
#CE240604occasion [data-img="12"]{
  width: calc(560 *(100vw /750));
  margin-bottom: calc(44 *(100vw /750));
}
#CE240604occasion [data-credit-sp="05"]{
  width: calc(560 *(100vw /750));
}
#CE240604occasion .look04{
  margin-bottom: calc(180 *(100vw /750));
}
#CE240604occasion [data-img="13"]{
  width: calc(478 *(100vw /750));
  margin: 0 0 calc(25 *(100vw /750)) auto;
}
#CE240604occasion [data-img="14"]{
  width: calc(478 *(100vw /750));
  margin: 0 0 calc(176 *(100vw /750)) auto;
}
#CE240604occasion [data-img="15"]{
  margin-bottom: calc(180 *(100vw /750));
}
#CE240604occasion [data-img="16"]{
  width: calc(526 *(100vw /750));
  margin: 0 auto calc(180 *(100vw /750));
}
#CE240604occasion [data-lookTtl-sp="04"]{
  width: calc(215.64 *(100vw /750));
  margin: 0 auto calc(52 *(100vw /750));
}
#CE240604occasion [data-credit-sp="06"]{
  text-align: center;
}
#CE240604occasion .look04__inner,
#CE240604occasion .lastArea__cont-ttl{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#CE240604occasion .lastArea__liner{
  width: 100%;
  height: calc(300.72*(100vw / 750));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: calc(76*(100vw / 750));
}
#CE240604occasion .lastArea__liner-cont{
  width: calc(2*(100vw / 750));
  display: block;
  background: #000;
}
#CE240604occasion .lastArea__ttl[data-line="1"]{
  margin-left: calc(2*(100vw / 750));
  margin-bottom: calc(29 *(100vw /750));
}
#CE240604occasion .lastArea__ttl[data-line="2"]{
  margin-bottom: calc(16 *(100vw /750));
}
#CE240604occasion .lastArea__ttl[data-line="3"]{
  width: calc(676 *(100vw /750));
  margin-bottom: calc(64 *(100vw /750));
}
/*--------------------------------
  layout for desktop
--------------------------------*/
@media only screen and (min-width: 768px) {
  #CE240604occasion{
    position: relative;
    overflow: clip;
    z-index: var(--zindex-middle);
  }
  #style-archive{
    display: none;
  }
  #footer{
    background-color: #fff;
    position: relative;
    z-index: var(--zindex-front);
  }
  #CE240604occasion .leftArea{
    background-color: var(--color-back2);
    width: 28.7%;
    /* height: var(--page-height); */
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #CE240604occasion .leftArea__sticky{
    width: 100%;
    height: 100vh;
    padding-bottom: 50vh;
    position: sticky;
    top: -50vh;
    z-index: 100;
    pointer-events: var(--pointer-none);
  }
  #CE240604occasion .leftArea__sticky-cont{
    width: 100%;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
  }
  #CE240604occasion .firstviewArea__ttl[data-line="3"]{
    padding-bottom: 4rem;
  }
  #CE240604occasion .leftArea__cont-logo{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #CE240604occasion .leftArea__cont-ttl{
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
  }
  #CE240604occasion .leftArea__credit{
    width: 28.7%;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: center;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--color-back2);
  }
  #CE240604occasion [data-look-target="look01"]{
    z-index: 1;
  }
  #CE240604occasion [data-look-target="look02"]{
    z-index: 2;
  }
  #CE240604occasion [data-look-target="other01"]{
    z-index: 3;
  }
  #CE240604occasion [data-look-target="look03"]{
    z-index: 4;
  }
  #CE240604occasion [data-look-target="other02"]{
    z-index: 5;
  }
  #CE240604occasion [data-look-target="look04"]{
    z-index: 6;
  }
  #CE240604occasion [data-look-target="lastCont"]{
    position: sticky;
    width: 100%;
    z-index: 7;
  }
  #CE240604occasion .creditTxt:last-child{
    padding-bottom: 5rem;
  }
  #CE240604occasion .lookWrap{
    width: 71.3%;
    margin: 0 0 0 auto;
  }
  #CE240604occasion .firstviewArea{
    height: 150vh;
    margin-bottom: 15rem;
  }
  #CE240604occasion .firstviewArea__inner{
    position: sticky;
    top: 0;
  }
  #CE240604occasion .firstviewArea__ttl[data-line="1"]{
    margin-bottom: 1.2rem;
  }
  #CE240604occasion .firstviewArea__ttl[data-line="2"]{
    margin-bottom: 0.5rem;
  }
  #CE240604occasion .firstviewArea__ttl[data-line="3"]{
    width: 29rem;
    margin-bottom: 0;
  }
  #CE240604occasion .firstviewArea__logo{
    width: 22.5rem;
    filter: invert(1);
  }
  #CE240604occasion .firstviewArea__img,
  #CE240604occasion [data-img="01"]{
    width: 35.5vw;
    height: 100vh;
    margin: 0;
  }
  #CE240604occasion .firstviewArea__img a,
  #CE240604occasion [data-img="01"] a,
  #CE240604occasion .firstviewArea__img img,
  #CE240604occasion [data-img="01"] img{
    height: 100%;
    object-fit: cover;
  }
  #CE240604occasion .look01{
    margin-bottom: 15rem;
    position: relative;
    z-index: var(--zindex-front);
  }
  #CE240604occasion [data-img="02"]{
    width: 38.8%;
    margin: 0;
  }
  #CE240604occasion [data-img="03"]{
    width: 52.7%;
    margin: 23rem 0 0 1rem;
  }
  #CE240604occasion .look02{
    margin-bottom: 23rem;
  }
  #CE240604occasion [data-img="04"]{
    width: 52.8%;
    margin-bottom: 13.7rem;
  }
  #CE240604occasion .look02__flex{
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  #CE240604occasion [data-img="05"],
  #CE240604occasion [data-img="06"]{
    width: 49.5%;
    margin: 0 0 13.7rem;
  }
  #CE240604occasion [data-img="07"]{
    width: 67.2%;
  }
  #CE240604occasion .other01{
    margin: 0 0 23.2rem auto;
  }
  #CE240604occasion [data-img="08"]{
    width: 42.4%;
    margin: 0 auto;
  }
  #CE240604occasion .look03{
    margin-bottom: 23.2rem;
  }
  #CE240604occasion [data-img="09"]{
    width: 55%;
    margin: 0 6.8rem 6.3rem auto;
  }
  #CE240604occasion [data-img="10"]{
    width: 67.2%;
    margin: 0 0 6rem;
  }
  #CE240604occasion [data-img="11"]{
    width: 42.4%;
    margin: 0 8.5rem 0 auto;
    position: relative;
  }
  #CE240604occasion .other02{
    margin: 0 0 23.2rem auto;
  }
  #CE240604occasion [data-img="12"]{
    width: 55%;
    margin-bottom: 0;
  }
  #CE240604occasion .look04{
    margin-bottom: 0;
  }
  #CE240604occasion .look04__inner{
    display: block;
  }
  #CE240604occasion [data-img="13"]{
    width: 55%;
    margin: 0 6.5rem 1rem auto;
  }
  #CE240604occasion [data-img="14"]{
    width: 55%;
    margin: 0 6.5rem 23.3rem auto;
  }
  #CE240604occasion [data-img="15"]{
    width: 80.4%;
    margin-bottom: 23.2rem;
  }
  #CE240604occasion [data-img="16"]{
    width: 52.8%;
    margin: 0 auto;
  }
}
/* end layout */



/*================================
  fadeIn
=================================*/
#CE240604occasion .js-fadeIn{
  opacity: 0;
  will-change: opacity, transform;
  -webkit-transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
  transition: ease-in, opacity 1500ms, -webkit-transform 1000ms;
  transition: ease-in, opacity 1500ms, transform 1000ms;
  transition: ease-in, opacity 1500ms, transform 1000ms, -webkit-transform 1000ms;
  -webkit-transform: translate3d(0, 2.5rem, 0);
  transform: translate3d(0, 2.5rem, 0);
}
#CE240604occasion .js-scrollIn{
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
/*================================
  change
=================================*/
#CE240604occasion [data-look-target],
#CE240604occasion .look01__credit{
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
}
#CE240604occasion [data-look-target].is_view,
#CE240604occasion .look01__credit.is_view{
  opacity: 1;
  visibility: visible;
}
/*================================
  liner
=================================*/
#CE240604occasion .js-liner{
  height: 0;
  transition: all 1s;
}
#CE240604occasion .js-liner100{
  height: 100%;
}