@charset "utf-8";


/* ----------------------------------------------------------------------------
	TOP
---------------------------------------------------------------------------- */
#mainSlideWrap { width: 100%; position: relative; margin-bottom: 4vw;}
#mainSlideWrap .catch { position: absolute; left: 5%; bottom: 4%; z-index: 100; width: 82%; }
@media screen and ( min-width:520px ){
  #mainSlideWrap .catch { bottom: 8%; width: 50%;}
}
@media screen and ( min-width:800px ){
  #mainSlideWrap { margin-bottom: 40px;}
  #mainSlideWrap .catch { left: 5%; top: 56%; width: 42%; transform: translate(0, -50%);}
}

#pageTop { padding-top: 0;}
#pageTop .aboutBox .txt {
  font-size: 1.36rem;
  margin: 1.5em 0 2.8em;
  letter-spacing: 0.2em;
  line-height: 1.8;
}
#pageTop #aBox01 .img {width: 85%;}
#pageTop #aBox01 .txt { padding-left: 12%;}
#pageTop #aBox02 .img {width: 70%; margin-left: auto;}
#pageTop #aBox02 .txt { padding-left: 22%;}
#pageTop #aBox03 .img { width: 54%; margin-left: 10%;}
#pageTop #aBox03 .txt { padding-left: 20%;}

#pageTop .aboutBox.inview .img { opacity: 0; transform: translate(0, 15px); transition: opacity 0.5s ease-in 0s, transform 0.8s ease-in 0s;}
#pageTop .aboutBox.inview.inStart .img { opacity: 1; transform: translate(0, 0); }
#pageTop .aboutBox.inview .txt { opacity: 0; transition: opacity 0.5s ease-in 0.5s;}
#pageTop .aboutBox.inview.inStart .txt { opacity: 1; }
#pageTop h2.line { padding: 2.5em 0 4.5em;}
#pageTop h2.line .line { bottom: .9em; height: 3.2em; }

@media screen and ( min-width:520px ){
  #pageTop .aboutBox {display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
  #pageTop .aboutBox .txt {
    font-size: 1.3rem;
    margin: 0;
    letter-spacing: 0.4em;
    line-height: 2.2;
  }
  #pageTop #aBox01 .img {width: auto; flex: 1;}
  #pageTop #aBox01 .txt { width: 28em; padding-left: 3em;}
  #pageTop #aBox02 { -webkit-box-direction: reverse; flex-direction: row-reverse; margin: 50px 0 0; }
  #pageTop #aBox02 .img {width: auto; flex: 1; margin-left: 0;}
  #pageTop #aBox02 .txt { width: 30em; padding-left: 17em; padding-bottom: 7em;}
  #pageTop #aBox03 { margin-bottom: 60px;}
  #pageTop #aBox03 .img { width: auto; flex: 1; margin-left: 0; margin-top: -3em; padding-left: 3.5em;}
  #pageTop #aBox03 .txt { width: 34em; padding-left: 6.5em;}
  #pageTop .aboutBox.inview#aBox03 .img { transition: opacity 0.5s ease-in 0.1s, transform 0.8s ease-in 0.1s;}
  #pageTop .aboutBox.inview#aBox03 .txt { transition: opacity 0.6s ease-in 0.5s;}
    #pageTop h2.line { padding: 2em 0 6.6em;}
    #pageTop h2.line .line { bottom: 1.6em; height: 4em;}
}
@media screen and ( min-width:800px ){
  #pageTop .aboutBox .txt { font-size: 1.4rem;}
  #pageTop #aBox02 { margin: 100px 0 0; }
  #pageTop #aBox02 .txt { width: 39em; padding-left: 26em; padding-bottom: 6em;}
  #pageTop #aBox03 .img { margin-top: -5em; padding-left: 4em;}
  #pageTop #aBox03 .txt { width: 49em; padding-left: 6em;}
}

.itemsList { margin: 0 9vw;}
.itemsList a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.itemsList li { margin-bottom: 14vw;}
.itemsList .img { margin-bottom: 1.6em; overflow: hidden; height: 100%; width: 100%;}
.itemsList .read { line-height: 1.9; margin-bottom: 1.8em;}
.itemsList .sub { font-size: 1.3rem; line-height: 1.4; letter-spacing: 0.2em; display: block;}
.itemsList .name { font-size: 2.2rem; line-height: 1.5; margin-bottom: 1em;}
.itemsList .price { font-size: 1.3rem; line-height: 1.5; opacity: 0.9;}
.itemsList .conbini { font-size: 1.2rem; line-height: 1.0; margin-top: 0.6em;}
.itemsList .conbini span { background: #43B02A; color: #fff; display: inline-block; padding: 0.3em 0.4em 0.4em;}

@media screen and ( min-width:520px ){
  #pageTop #items { padding-top: 2vw;}
  .itemsList { -webkit-flex: flex; display: flex;  -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 1vw;}
  .itemsList li { width: 47%; margin-bottom: 7vw;}
  .itemsList li:nth-child(2n-1) { margin-right: 6%; }
}
@media screen and ( min-width:800px ){
  #pageTop #items { padding-top: 20px;}
  .itemsList { margin: 0 0 20px;}
  .itemsList li { width: 30.2%; margin-bottom: 60px; margin-right: 4.7% !important;}
  .itemsList li:nth-child(3n) { margin-right: 0 !important; }
  .itemsList li a .img img { transition: transform 0.2s ease-out; transform:scale(1,1);-webkit-backface-visibility:hidden; backface-visibility:hidden; }
  .itemsList li a:hover .img img{ transform:scale(1.04,1.04); }
  .itemsList li .enLink { margin-top: 3.5em; }
}


#instaArea { position:relative; z-index: 0; padding-bottom: 10vw; margin-bottom: 4vw;}
#instaArea:before { content: ""; display: block; width: 200vw; height: 100%; transform: translate(-50%, 0); background: #E8E8E8; position: absolute; left: 50%; top: 0; z-index: -1;}
#instaArea .hash { line-height: 1.1; font-size: 1.9rem; letter-spacing: 0.2em; margin-bottom: 1.8em;}
#instaArea ul {
  -webkit-flex: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;
  width:100vw;
  position: relative; left: 50%; top: 0; transform: translate(-50%, 0);
}
#instaArea li { width: calc((100% - 6px)/3); margin: 0 3px 3px 0;}
#instaArea li:nth-child(3n) { margin-right: 0;}
#instaArea li:nth-child(n + 10) { display: none;}
#instaArea li .img { width: 100%; padding-top: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
#instaArea li a { display: block;}
@media screen and ( min-width:520px ){
  #instaArea .hash { font-size: 2.2rem;}
  #instaArea { padding-bottom: 7.5vw; padding-top: 1.2vw; }
  #instaArea ul { width: 100%;}
  #instaArea li { width: calc((100% - 24px)/3); margin: 0 12px 12px 0;}
}
@media screen and ( min-width:800px ){
  #instaArea { padding-bottom: 85px; padding-top: 10px;}
  .flexBox { -webkit-flex: flex; display: flex;}
  #instaArea .hash { font-size: 2rem; width: 13em;}
  #instaArea ul { flex: 1; left: auto; transform: translate( 0, 0);}
  #instaArea li { width: calc((100% - 15px)/4); margin: 0 5px 5px 0 !important; display: block !important;}
  #instaArea li:nth-child(4n) { margin-right: 0 !important;}
}

#lookBook .itemsList { margin-bottom: 0;}
#lookBook .itemsList li:last-child { margin-bottom: 0;}
#lookBook .itemsList .read { margin-bottom: 0;}
#lookBook .enLink { margin-top: 2em;}
@media screen and ( min-width:520px ){
  #lookBook .enLink { margin-top: 0;}
}

/* ----------------------------------------------------------------------------
	ITEMS
---------------------------------------------------------------------------- */
#pageItems .topBlock { padding-top: 2vw;}
#pageItems .itemImage { width: 100vw; position: relative; left: 50%; transform: translate(-50%, 0); text-align: center; z-index: 0;}
#pageItems .itemImage p { opacity: 0; z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: auto; transition: opacity 0.3s ease-out 0.1s; }
#pageItems .itemImage p:first-child { position:relative; }
#pageItems .itemImage p.active,
#pageItems .dataBox h1 p.active { opacity: 1; z-index: 2; display: block;}
#pageItems .itemImage img { width: auto; max-width: 100%; height: auto; max-height:70vh; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
#pageItems .dataBox h1 { font-size: 2.4rem; font-weight: 300; line-height: 1.6; margin: 0 0 0.8em; padding-bottom: 0.9em; border-bottom: #E0E0E0 1px solid; }
#pageItems .dataBox h1 p {opacity: 0; display: none; transition: opacity 0.3s ease-out 0.1s;}
#pageItems .priceArea { -webkit-flex: flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; align-items: center; margin-bottom: 2em; }
#pageItems .dataBox .conbini { font-size: 1.2rem; line-height: 1.0; margin-left: auto;}
#pageItems .dataBox .conbini span { background: #43B02A; color: #fff; display: inline-block; padding: 0.3em 0.4em 0.4em;}
#pageItems .typeChange dt {
  font-size: 1.4rem;
  padding: 0 0 5em;
  position: relative;
}
#pageItems .typeChange dt .line {
  display: block;
  width: 1px;
  height: 2.6em;
  overflow: hidden;
  position: absolute;
  left: 1.1em;
  bottom: 1.5em;
}
#pageItems .typeChange dt .line:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #BEBEBE;
  position: absolute;
  left: 0;
  top: 0;
  animation: downLine ease 2s infinite;
}
#pageItems .typeChange dd { display: inline-block; margin: 0 1.3em 1em 0; width: 2em; height: 2em; line-height: 1.0; position: relative; cursor: pointer;}
#pageItems .typeChange dd span { display: inline-block; border-radius: 50%; width: 100%; height: 100%;}
#pageItems .typeChange dd.siro span { border: #999 1px solid;}
#pageItems .typeChange dd.active:before { content: ""; display: block; width: calc(100% + 8px); height: calc(100% + 8px); border: #888 0.8px solid; border-radius: 50%; position: absolute; left: -5px; top: -5px;}
#pageItems .read { font-size: 1.8rem; margin-top: 1.9em; margin-right: -1em; letter-spacing: 0.15em; line-height: 1.8;}
#pageItems .itemSlide { padding: 0 5vw; margin-top: 1.6em;}
#pageItems .itemSlide img { -webkit-backface-visibility:hidden; backface-visibility:hidden;}
#pageItems .itemSlide .txt { font-size: 1.3rem; line-height: 1.5; margin-top: 1em;}
#pageItems .itemSlide .txt .type { display: block; margin-bottom: 0.3em;}
#pageItems .itemSlide .slick-arrow { display: block; font-size: 0; line-height: 0; width: 3vw; padding: 0; border: none; background: none; position: absolute; top: 30%; }
#pageItems .itemSlide .slick-arrow:before { content: url("../img/slide_arrow.svg"); display: block; width: 3vw;}
#pageItems .itemSlide .slick-prev { left: 0; transform: translate(-25%, 0); }
#pageItems .itemSlide .slick-next { right: 0; transform: translate(25%, 0); }
#pageItems .itemSlide .slick-next:before { transform:scale(-1,1);}

#pageItems .productBox { margin-top: 6vw;}
#pageItems .howtoBox { margin-top: -4vw;}
#pageItems .wMax .block { padding-top: 4vw;}
#pageItems h3.minJP { font-size: 1.8rem; line-height: 1.5; letter-spacing: 0.15em; margin-top: 0.5em;}
#pageItems .inBox { margin: 4.4vw -.8vw 15vw 2vw; font-size: 1.3rem; line-height: 2.0;}
#pageItems .inBox p { margin-bottom: 5vw;}
#pageItems .inBox img { width: auto; height: auto; max-width: 100%; max-height: 600px;}

.otherItemBox .itemsList { padding-top: 5%;}

@media screen and ( min-width:520px ){
  #pageItems .topBlock { -webkit-flex: flex; display: flex; padding-top: 50px;}
  #pageItems .itemImage { width: 50%; margin-right: 3%; left: auto; transform: translate(0, 0);}
  #pageItems .itemImage img { width: 100%; max-height:600px; }
  #pageItems .dataBox { width: 47%; }
  #pageItems .itemSlide { padding: 0 32px; max-width: 400px;}
  #pageItems .itemSlide .slick-arrow { width: 15px; }
  #pageItems .itemSlide .slick-arrow:before { width: 15px;}
  #pageItems .itemSlide .slick-prev { left: 0; transform: translate(0, 0); }
  #pageItems .itemSlide .slick-next { right: 0; transform: translate(0, 0); }
  
  #pageItems .productBox { margin-top: 0;}
  #pageItems .howtoBox { margin-top: -4vw;}
  #pageItems .wMax .block { padding-top: 1vw;}
  #pageItems .block { width: 80%; max-width: 700px; margin-left: auto; margin-right: auto;}
  #pageItems h3.minJP { font-size: 2.4rem;}
  #pageItems .inBox { margin: 2.9vw 0 11vw; font-size: 1.5rem; line-height: 2.3;}
  
  .otherItemBox .itemsList { padding-top: 4%;}
}
@media screen and ( min-width:800px ){
  #pageItems .itemImage { width: 56%; margin-right: 4%;}
  #pageItems .dataBox { width: 40%; }
  #pageItems .itemSlide .slick-arrow:hover { opacity: .8; }
  #pageItems .typeChange dd:hover span { transform:scale(0.94,0.94); }
  
  #pageItems .howtoBox { margin-top: -40px;}
  #pageItems .wMax .block { padding-top: 15px;}
  #pageItems .inBox { margin: 25px 0 90px; font-size: 1.5rem; line-height: 2.3;}
  #pageItems .inBox p { margin-bottom: 30px;}
  
  .otherItemBox .itemsList { padding-top: 15px;}
}