@charset "utf-8";

/* -------------------------------------------------- */
/* #store-wrap */
/* -------------------------------------------------- */
#store-wrap > .container{display:flex;flex-direction:row-reverse;}
#store-wrap .store-contents{width:calc(100% - 360px);min-width:calc(73% - 40px);padding-right:40px;}
#store-wrap .store-sidenav{width:320px;margin-right:40px;max-width:27%;min-width:200px;}
#store-wrap .store-sidenav .list-nav{border-top:1px solid #baada2;}
#store-wrap .store-sidenav .list-nav > li{border-bottom:1px solid #baada2;}
#store-wrap .store-sidenav .list-nav > li a{display:block;padding:10px 30px 10px 20px;position:relative;}
#store-wrap .store-sidenav .list-nav > li a:hover{opacity:0.7;}
#store-wrap .store-sidenav .list-nav > li a::after{content:"";display:block;width:8px;height:12px;background:url(/img/arrow08.png) no-repeat;background-size:100% auto;position:absolute;top:50%;right:10px;margin-top:-6px;transition:.2s ease;}
#store-wrap .store-sidenav .list-nav > li a:hover::after{right:5px;}
#store-wrap .store-sidenav .list-nav > li.login a,
#store-wrap .store-sidenav .list-nav > li.register a,
#store-wrap .store-sidenav .list-nav > li.guide a{padding-left:50px;}
#store-wrap .store-sidenav .list-nav > li.login a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_login.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}
#store-wrap .store-sidenav .list-nav > li.register a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_register.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}
#store-wrap .store-sidenav .list-nav > li.guide a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_guide.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}
#store-wrap .store-sidenav .ttl{font-size:3.2rem;text-align:center;color:#baada2;margin:120px auto 30px;line-height:1;white-space:nowrap;}
#store-wrap .store-sidenav iframe{width:100%;}

/* -------------------------------------------------- */
/* #block-category */
/* -------------------------------------------------- */
body#category-iframe{padding-top:0;font-size:16px;overflow:hidden;min-width:1px;}
#block-category .list-nav2{border-top:1px solid #baada2;}
#block-category .list-nav2 > li{border-bottom:1px solid #baada2;}
#block-category .list-nav2 > li a{display:block;padding:10px 30px 10px 20px;position:relative;}
#block-category .list-nav2 > li a:hover{opacity:0.7;}
#block-category .list-nav2 > li a::after{content:"";display:block;width:8px;height:12px;background:url(/img/arrow08.png) no-repeat;background-size:100% auto;position:absolute;top:50%;right:10px;margin-top:-6px;transition:.2s ease;}
#block-category .list-nav2 > li a:hover::after{right:5px;}
#block-category .list-nav2 > li.login a,
#block-category .list-nav2 > li.register a,
#block-category .list-nav2 > li.guide a{padding-left:50px;}
#block-category .list-nav2 > li.login a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_login.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}
#block-category .list-nav2 > li.register a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_register.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}
#block-category .list-nav2 > li.guide a::before{content:"";display:inline-block;width:16px;height:16px;background:url(/img/store/icon_guide.png) no-repeat;background-size:100% auto;margin-right:10px;position:absolute;top:50%;left:20px;margin-top:-8px;}

/* -------------------------------------------------- */
/* #block-list */
/* -------------------------------------------------- */
#block-list .attention{padding:10px;background:url(/img/back01.jpg) no-repeat center top;background-size:cover;font-weight:bold;padding:10px 20px;margin-bottom:30px;}
#block-list .attention.red{font-size:1.8rem;background:none;border:1px solid #e78282;}
#block-list .attention.red strong{color:#e78282;}
#block-list .attention.small{font-size:1.5rem;}
#block-list .attention + .attention{margin-top:-15px;}
#block-list .list-item{display:flex;flex-wrap:wrap;margin-bottom:-60px;}
#block-list .list-item > li{width:30%;margin:0 5% 60px 0;}
#block-list .list-item > li:nth-child(3n){margin-right:0;}
#block-list .list-item > li .img{position:relative;width:100%;height:0;padding-bottom:100%;overflow:hidden;margin-bottom:20px;}
#block-list .list-item > li .img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;font-family:"object-fit:cover";}
#block-list .list-item > li .name{font-size:2rem;font-weight:bold;line-height:1.5;}
#block-list .list-item > li .price{font-size:2rem;text-align:right;white-space:nowrap;}
#block-list .list-item > li .price small{font-size:1.2rem;}
#block-list .list-item > li .category{margin-top:5px;font-size:0;}
#block-list .list-item > li .category span{font-size:1.4rem;padding:3px 17px;display:inline-block;background:#f7f5f3;border-radius:50px;line-height:1.5;margin:0 5px 3px;}
#block-list .list-item > li a{display:block;}
#block-list .list-item > li a img{opacity:1;}
#block-list .list-item > li a:hover img{transform:scale(1.1);}
#block-list .list-item > li a:hover{opacity:0.7;}

/* -------------------------------------------------- */
/* #block-detail 商品詳細 */
/* -------------------------------------------------- */
#block-detail .favorite{text-align:right;white-space:nowrap;}
#block-detail .favorite a{display:inline-block;font-size:1.4rem;font-weight:bold;}
#block-detail .favorite a::after{content:"";display:inline-block;width:32px;height:32px;background:url(/img/icon_favorite01.png) no-repeat;background-size:100% auto;vertical-align:middle;margin-left:12px;transition:.3s ease;}
#block-detail .favorite a:hover{opacity:0.7;}
#block-detail .favorite a:hover::after,
#block-detail .favorite.active a::after{background-image:url(/img/icon_favorite02.png);}
#block-detail .block-intro{margin-top:30px;}
#block-detail .block-intro .img{max-width:720px;width:100%;margin:auto;}
#block-detail .block-intro .img .img-preview{width:100%;height:480px;height:0;padding-bottom:66.666%;background:#f7f5f3;position:relative;max-width:100%;}
#block-detail .block-intro .img .img-preview img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;font-family:"object-fit:contain";}
#block-detail .block-intro .img .img-preview.fade img{animation:previewFade .3s ease forwards;opacity:0;}
@keyframes previewFade{0%{opacity:0;}100%{opacity:1;}}
#block-detail .block-intro .img .img-slider{margin-top:30px;padding:0 18px;}
#block-detail .block-intro .img .img-slider .slider{display:none;}
#block-detail .block-intro .img .img-slider .slider.slick-initialized{display:block;}
#block-detail .block-intro .img .img-slider .item{margin:0 10px;border:4px solid #f7f5f3;cursor:pointer;transition:opacity .3s ease;}
#block-detail .block-intro .img .img-slider .item:hover{opacity:0.7;}
#block-detail .block-intro .img .img-slider .item > div{width:100%;height:0;padding-bottom:100%;position:relative;}
#block-detail .block-intro .img .img-slider .item > div img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;font-family:"object-fit:contain";}
#block-detail .block-intro .img .img-slider .slick-arrow{width:48px;height:48px;background:url(/img/arrow05.png) no-repeat 53% center #786f6b;background-size:9px auto;border-radius:100%;font-size:0;position:absolute;top:50%;margin-top:-24px;right:-15px;z-index:10;transition:.3s ease;}
#block-detail .block-intro .img .img-slider .slick-arrow:hover{transform:scale(1.2);}
#block-detail .block-intro .img .img-slider .slick-prev{right:auto;left:-15px;transform:scale(-1,1);}
#block-detail .block-intro .img .img-slider .slick-prev:hover{transform:scale(-1.2,1.2);}
#block-detail .block-intro .img .img-slider .slick-disabled{opacity:0;}
#block-detail .block-intro .img .img-slider .slick-track{display:flex;}
#block-detail .block-intro .img .img-slider .item.active{border-color:#baada2;transition:.3s ease;}
#block-detail .block-intro .txt{letter-spacing:0.06em;}
/*
#block-detail .block-size .common-table01{max-width:100%;}
#block-detail .block-size .common-table01 th{width:25%;}
#block-detail .block-size .link{margin-top:12px;}
#block-detail .block-size .link a{font-size:1.2rem;border-bottom:1px solid #534e4e;display:inline-block;margin:0 20px 15px 0;transition:.1s ease;}
#block-detail .block-size .link a:hover{border-color:transparent;}
*/
#block-detail .block-bottom{display:flex;}
#block-detail .block-bottom .block-price{width:50%;margin-right:10%;}
#block-detail .block-bottom .block-quantity{flex:1;}
#block-detail .block-price .price{font-size:3.6rem;white-space:nowrap;}
#block-detail .block-price .price small{font-size:2.8rem;}
#block-detail .block-price .price .small{font-size:1.6rem;}
#block-detail .block-price .common-table01 th{padding:15px 20px;}
#block-detail .block-price .common-table01 td{padding:15px 20px;white-space:nowrap;}
#block-detail .block-quantity .select{position:relative;text-align:center;width:100%;border:1px solid #baada2;border-radius:100px;}
#block-detail .block-quantity .select .plus{position:absolute;right:15px;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:bold;cursor:pointer;padding:10px;transition:.3s ease;user-select:none;}
#block-detail .block-quantity .select .plus::before{content:"＋";}
#block-detail .block-quantity .select .minus{position:absolute;left:15px;top:0;height:100%;display:flex;align-items:center;justify-content:center;font-weight:bold;cursor:pointer;padding:10px;transition:.3s ease;user-select:none;}
#block-detail .block-quantity .select .minus::before{content:"－";}
#block-detail .block-quantity .select input{text-align:center;width:100%;background:transparent;font-size:1.6rem;padding:13px 20px;color:#786f6b;}
#block-detail .block-quantity .select .plus:hover,
#block-detail .block-quantity .select .minus:hover{opacity:0.7;}
#block-detail .block-quantity .cartjs_product_table table{width:100%!important;border:0!important;}
#block-detail .block-quantity .cartjs_product_table table th{border:0!important;white-space:nowrap;padding:5px 10px!important;color:#786f6b;}
#block-detail .block-quantity .cartjs_product_table table td{border:0!important;padding:5px 10px!important;}
#block-detail .block-quantity .cartjs_product_table table input{width:100%!important;}
#block-detail .block-quantity .cartjs_product_table table select{width:100%!important;background-color:transparent!important;border:1px solid #ccc;}
#block-detail .block-quantity .cartjs_cart_in input{width:100%;max-width:320px;display:inline-block;background:#e78282;color:#fff;border-radius:50px;font-size:1.6rem;font-weight:bold;padding:13px 20px;letter-spacing:0.075em;white-space:nowrap;transition:.3s ease;border:0;cursor:pointer;}
#block-detail .block-quantity .cartjs_cart_in input:hover{opacity:0.7;}

/* ======================================================================================================================= */
/* for tablet */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:1399px){
  #store-wrap .store-contents{padding-right:0px;}
  #store-wrap > .container{padding-left:5%;padding-right:5%;}
}
@media screen and (min-width:1px) and (max-width:999px){
  #store-wrap .store-sidenav .ttl{font-size:2.8rem;}
  /* -------------------------------------------------- */
  /* #block-list */
  /* -------------------------------------------------- */
  #block-list .list-item > li .img{margin-bottom:15px;}
  #block-list .list-item > li .name{font-size:1.7rem;}
  #block-list .list-item > li .price{font-size:1.7rem;}
  #block-list .list-item > li .price small{font-size:1.1rem;}
  #block-list .list-item > li .category span{font-size:1.2rem;padding:3px 12px;margin:0 3px 3px;}

  /* -------------------------------------------------- */
  /* #block-detail 商品詳細 */
  /* -------------------------------------------------- */
  #block-detail .block-bottom{display:block;}
  #block-detail .block-bottom .block-price{width:100%;margin-right:0;}
  #block-detail .block-quantity .cartjs_box{max-width:300px;margin:auto!important;}
}

/* ======================================================================================================================= */
/* for sp */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:767px){
  #store-wrap > .container{flex-direction:column;padding-top:4rem!important;}
  #store-wrap .store-contents{width:100%;}
  #store-wrap .store-sidenav{width:100%;max-width:100%;margin-top:60px;}
  #store-wrap .store-sidenav .ttl{font-size:2.4rem;margin:40px auto 15px;}

  /* -------------------------------------------------- */
  /* #block-list */
  /* -------------------------------------------------- */
  #block-list .list-item > li{width:47.5%;margin-bottom:30px;}
  #block-list .list-item > li:nth-child(3n){margin-right:5%;}
  #block-list .list-item > li:nth-child(even){margin-right:0;}
  #block-list .list-item > li .img{margin-bottom:12px;}
  #block-list .list-item > li .name{font-size:1.6rem;}
  #block-list .list-item > li .price{font-size:1.6rem;margin-top:3px;}
  #block-list .list-item > li .price small{font-size:1rem;}
  #block-list .list-item > li .category{margin-top:8px;}

  /* -------------------------------------------------- */
  /* #block-detail 商品詳細 */
  /* -------------------------------------------------- */
  #block-detail .block-intro{margin-top:15px;}
  #block-detail .block-intro .img .img-slider{padding:0;}
  #block-detail .block-intro .img .img-slider .item{margin:0 5px;border-width:3px;}
  #block-detail .block-intro .img .img-slider .slick-arrow{width:36px;height:36px;right:-15px;margin-top:-18px;}
  #block-detail .block-intro .img .img-slider .slick-prev{left:-15px;}
  #block-detail .block-price .price{font-size:3rem;}
  #block-detail .block-price .price small{font-size:2.2rem;}
  #block-detail .block-price .common-table01 th,
  #block-detail .block-price .common-table01 td{padding:12px 20px!important;}
  #block-detail .block-quantity .select{margin-right:10px;}


}
@media screen and (min-width:1px) and (max-width:599px){

}
