@charset "euc-jp";

section h2[class="Oswald"]{
  text-align: center;
  font-weight: bold;
  font-size: 38px;
}

.mv-slider{
  overflow:hidden;
}
.mv-slider img{width:100%;}
.top-slide{
  opacity: 0;
  transition: opacity .2s linear;
}
.top-slide.slick-initialized{
  opacity: 1;
}
 

#slider figure{position: relative;}

/* 遅延読み込み対策 */
#slider > div:not(:first-child) {
    display: none;
}
.bx-wrapper #slider > div:not(:first-child) {
    display: block;
}

  .pc-slide {
    display: block;
  }
  .sp-slide {
    display: none!important;
  }

  /* スマホ（768px以下）ではSP用を表示、PC用を非表示 */
  @media screen and (max-width: 768px) {
    .pc-slide {
      display: none!important;
    }
    .sp-slide {
      display: block!important;
    }

  }


section.popup_banner{
  position: relative;
  background: #F2F2F2;
  margin-top:38px;
  padding-top:24px;
  padding-bottom:24px;
  min-width: 1200px;
}

section.pickup{
  position: relative;
  /*background: #F2F2F2;*/
  padding-top:28px;
  padding-bottom:28px;
  min-width: 1200px;
}
section.pickup h2{border-bottom:solid 1px #C7B299;}
section.pickup ul.items{margin-top:5px;margin-bottom: 0;}
section.pickup ul.items li{
  width:620px;
  max-width: 31.6%;
  margin:0 15px;
  background-color: #F2F2F2;
  padding: 5px;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
}
section.pickup figure.thum{position: relative;}
section.pickup figure.thum img{position: relative;z-index: 2;}
section.pickup figure.thum:before{
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: 90%;
  margin-left: -45%;
  height: 20px;
  border-radius: 100%;
  -webkit-box-shadow: 0 -1px 16px 25px rgba(0, 0, 0 ,0.25);
  box-shadow: 0 -1px 16px 25px rgba(0, 0, 0 ,0.25);
}
section.pickup .brand_name{
  position: relative;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  margin-top:32px;
}
section.pickup .desc{
  font-size: 12px;
  line-height: 21px;
  text-align: left;
  margin-top:5px;
  padding:0 0.5em;
  letter-spacing: -0.025em;
}
section.pickup .desc p:not(:last-of-type){margin-bottom:21px;}
section.pickup a.goto{
  position: absolute;
  top:-2px;right:0;
  line-height: 28px;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  background: #df2a1c;
  padding:0 8px;
}
section.pickup .desc > a.goto{
  position: static;
  display: table;
  line-height: 40px;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  background: #df2a1c;
  margin:1.0em auto;
  padding:0 0.5em;
}



section.recommend ul.items{margin:30px auto 50px;}
/* section.recommend ul.items li:nth-of-type(n+6){margin-top:28px;} */



@media screen and (max-width:980px) {
  .slider{
    min-width: 100%;
    overflow:hidden;
  }
  .slide36{
    width: 300%;
    margin-left: -100%;
  }
  .slider .bx-wrapper{max-width: 100%!important;}
  /* section[class].news_info {padding-top:50px;} */


  section.popup_banner[class] ul.items li,
  .hot_brands ul.brand_list li:nth-of-type(n)
    {margin: 0;width:50%;}


  section.recommend {padding-bottom:2.0em;}
  section.category[class] ul.items li:nth-of-type(n) {width: 20%;margin:0}
  section.category ul.items li a:not([class]){
    font-size: 1.35vw;
    line-height: 2.0vw;
  }
  section.category ul.items li i.arrow{
    height:2.0vw;
    width:0.65vw;
    background-size: contain;
  }

  section.pickup ul.items {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}
  section.pickup ul.items li{
    max-width: auto;
    max-width: none;
  }
  section.pickup ul.items li:nth-of-type(n+2){margin-top:1.0em;}
  .hot_brands ul.brand_list{margin:1.0em 0;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
  section.ranking {padding-bottom:2.0em;}

  
  section.blog ul.posts li:nth-of-type(n+3){margin-top: 1.0em;}
  section.about .desc article{background-image: none}
}

@media screen and (min-width:769px) {
  section.category ul.items li:nth-of-type(n+6){margin-top:23px;}
}
@media screen and (max-width:768px) {
  section.news_info > div[class] {width: 100%;}
  section.news_info > .infomation{display: none;}

  section.category[class] ul.items {margin-bottom: 1.0em;}
  section.category[class] ul.items li:nth-of-type(n){width: 50%;}

  section.category ul.items li a:not([class]){
    font-size: 3.2vw;
    line-height: 4.0vw;
  }
  section.category ul.items li i.arrow{
    height:4.0vw;
    width:1.5vw;
  }
  section.pickup ul.items li:nth-of-type(n){width:100%;}
  section[class] h2 a,
  footer.footer section.bnr_links{display: none;}
}

.information-area{
  padding: 5em 0 6em;
}
.information-area .info-banner{
  display: flex;
  justify-content: space-between;
  margin-top: 3em;
}
.information-area .info-banner img{
 display:block;width:100%;
}
.information-area .btn01{
  margin: 1em auto 0;
  display: block;
}

.news_info{
  padding: 1em 0 0;
}
.news_info .info__newsItem{
  border-bottom: 1px solid #000;
  display: none;
  position: relative;
}
.news_info .info__newsItem::before {
  content: '';
  background: url(https://zabou.org/anize/newtemplate/common/icon_arrow.svg) no-repeat;
  width: 11px;
  height: 11px;
  position: absolute;
  background-size: cover;
  top: 50%;
  transform: translate(0px, -50%);
  right: 13px;
}
.news_info .info__newsItem a{
  color: #000;
}
.news_info .info__newsItem:first-of-type {
  display: flex;
  justify-content: center;
  padding: 1em 0.2em;
}
.news_info .info__newsItem img{
  display: none;
}

.hot_brands{
  padding:9em 0 5em;
}
.hot_brands ul.brand_list{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin:40px auto 50px;
}
.hot_brands ul.brand_list li{
  width:280px;
  margin:0 10px;
}
.hot_brands ul.brand_list li a{
  display: block;
  color: #000;transition: all 0.3s ease;
}
.hot_brands ul.brand_list li a:hover{opacity:0.6;}
.hot_brands ul.brand_list li:nth-of-type(n+5){
  margin-top:2em;
}
.hot_brands ul.brand_list figure{
  text-align: center;
}
.hot_brands ul.brand_list figcaption{
  font-size: 12px;
  text-align: center;
  color: #333;
  -webkit-box-shadow: 0 -3px 0 #f2f2f2;
  box-shadow: 0 -3px 0 #f2f2f2;
  margin-top:2px;
  padding-top:7px;
}
.hot_brands .btn02{
    margin: 1em 0 0 auto;
}
.middle-banner{
  display: flex;
  justify-content: space-between;
}
.middle-banner a{
  width: 49.5%;
  color: #Fff;
  display: block;
  text-align: center;
  min-height: 570px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
.middle-banner a:hover{
  opacity: 0.8;
  text-decoration: none;
}
.middle-banner a.bn01{
  background: url(https://zabou.org/anize/newtemplate/top/bg_guide.jpg) no-repeat;
  background-size: cover;
}
.middle-banner a.bn02{
  background: url(https://zabou.org/anize/newtemplate/top/bg_faq.jpg) no-repeat;
  background-size: cover;
}
.recommend{padding:5em 0 4em;}
#new-arrival-product .items li,
.recommend ul.items a,
.ranking ul.items a{
  color: #000;
  text-align: left;transition: all 0.3s ease;
}
.recommend ul.items a:hover,
.ranking ul.items a:hover{
  opacity:0.6;text-decoration:none;
}
#new-arrival-product .items li a{
  transition: all 0.3s ease;color:#000;
}
#new-arrival-product .items li a:hover{
  opacity:0.6;
  transition: all 0.3s ease;
}
#new-arrival-product .items li .price span,
.recommend ul.items a .price span,
.ranking ul.items a .price span{
  color: #000;
  font-weight: 500;
  margin-top: 1em;
}
.recommend .btn02{margin: 1em 0 0 auto;}

.newarrival{padding: 3em 0 12em;}
.newarrival .btn02{margin: 1em 0 0 auto;}
#new-arrival-product .items li{
  display: none;
  /*width: 23.5%;*/
}
#new-arrival-product .items li:nth-child(1),
#new-arrival-product .items li:nth-child(2),
#new-arrival-product .items li:nth-child(3),
#new-arrival-product .items li:nth-child(4){
  display: block;
}
#new-arrival-product .items li:nth-of-type(4n+1){
  margin-left: 0;
}
#new-arrival-product .items li:nth-of-type(4n+4) {
    margin-right: 0;
}
#new-arrival-product .items li .moreDetail{display:none;}
.ranking .btn02{margin: 1em 0 0 auto;}
 
.instagram-area{
  padding: 5em 0 6em;
}
.instagram-area .insta-list{
  display: flex;
  justify-content: space-between;
  margin-top: 4em;
}
.instagram-area .insta-list a{
  width: 18.5%;
  display: block;
  color: #000;transition: all 0.3s ease;
}
.instagram-area .insta-list a img{
 display:block;margin:0 auto;
}
.instagram-area .insta-list a:hover{opacity:0.6;text-decoration:none;}
.instagram-area .insta-list a .store-name{
  text-align: center;
  margin-top: 0.7em;
}
.instagram-area .insta-list a .store-name .insta-id{
  display: block;
  font-weight: bold;
  font-size: 25px;
  margin-bottom: 0.5em;
}
.youtube-area{
  padding: 8em 0 11em;
}
.youtube-area .yt-banner{
  max-width: 900px;
  width: 100%;
  display: block;
  margin: 3em auto 0;
  transition: all 0.3s ease;
}
.youtube-area .yt-banner:hover{opacity:0.8;}

.blog{
  padding: 5em 0 8em;
}
.blog ul.posts{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;margin-top: 5em;
}
.blog ul.posts li{
  width: 48%;
  margin-bottom: 4em;
}
.blog ul.posts li:nth-child(5),
.blog ul.posts li:nth-child(6){
  display: none;
}
.blog ul.posts li a{
  display: flex;
  justify-content: space-between;
  color: #000;
  transition: all 0.3s ease;
}
.blog ul.posts li a:hover{opacity:0.6;}
.blog ul.posts li a figure{
  width: 41%;
      margin: 0 0 0;
    padding-top: 51.14%;
    overflow: hidden;
    position: relative;
}
.blog ul.posts li a figure img{
  max-width: initial;
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.blog ul.posts li a .info-wrap{
  width: 55%;
  padding-top: 3em;
}
.blog ul.posts li a .title{
  font-size: 16px;
}
.blog ul.posts li a .desc{
  display: none;
}
.blog ul.posts li a .author{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: 1px solid #DEDEDE;
  padding: 0.8em 0.5em;
  margin: 3em 0 1em;
  position: relative;
  flex-flow: row-reverse;
}
.blog ul.posts li a .author::before{
  content: 'この記事を書いた人';
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 7px;
  transform: translate(0,-50%);
  color: #666666;
}
.blog ul.posts li a .author img{
  border-radius: 40px;
  overflow: hidden;
  width: 30px;
  height: 30px;
  vertical-align: middle;
  margin-left: 0.3em;
}
.blog ul.posts li a .author .author-inner{
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
  color: #666666;
}
.blog .btn02{margin: 1em 0 0 auto;}
.store-area{margin-top:6em;}
.store-wrap .c-ttl{text-align:left;}

@media screen and (max-width: 1300px) {
  .instagram-area .insta-list a .store-name .insta-id {
    font-size: 15px;
  }
}

@media screen and (max-width: 980px) {
  .recommend {
    padding: 2em 0 4em;
  }
  .middle-banner a.bn01{margin-bottom: 5px;
  }
  .news_info .info__newsItem:first-of-type {
    display: block;
    padding: 1em 3em 1em 0.2em;
	}
  .information-area .info-banner {
    display: block;
  }
  .middle-banner {
    display: block;
  }
  .middle-banner a {
    width: 100%;
    min-height: auto;
    padding: 3em 0
  }
  .blog ul.posts li:nth-of-type(n) {
     margin: 0 0 2em;
     width: 48%;
  }
  .blog ul.posts li a {
    display: block;
  }
  .blog ul.posts li a .author::before{
   content: none;
  }
  .blog ul.posts li a .info-wrap {
    width: 100%;
    padding-top: 0.5em;
  }
  .blog ul.posts li a .title {
    font-size: 14px;
  }
  .blog ul.posts li a figure {
    width: 100%;padding-top: 125.14%;
  }
  .blog ul.posts li a .author {
    padding: 0.3em 0em;
    margin: 1em 0 1em;border: none;flex-flow: row;
  }
  /*.ranking .btn02 {
    margin: 0.5em auto 0;
  }*/
  .newarrival {
    padding: 3em 0 5em;
  }
  /*#new-arrival-product .items li{
    width: 48%;
  }*/
  #new-arrival-product .items li:nth-of-type(2n+2) {
    margin-left: 2%;
  }
  #new-arrival-product .items li:nth-of-type(n+3){
    margin-top: 20px;
  }
  .hot_brands {
    padding: 4em 0 1em;
  }
  .blog {
    padding: 2em 0 4em;
  }
  .blog ul.posts {
    margin-top: 2em;
  }
  .blog ul.posts li a .author .author-inner {
    flex-flow: row;
  }
  .blog ul.posts li a .author img{
    margin-left: 0;
    margin-right: 0.3em;
  }
  .instagram-area {
    padding: 5em 0 2em;
  }
  .instagram-area .insta-list{flex-wrap: wrap;}
  .instagram-area .insta-list a {
    width: 48%;margin-bottom: 2em;
  }
  .instagram-area .insta-list a .store-name .insta-id {
     margin-bottom: 0.1em;
   }
  .youtube-area {
    padding: 1em 0 5em;
  }
  .store-area {
    margin-top: 3em;
  }
}