@charset "utf-8";
body{overflow-x: hidden;}
.title-std { text-align: center; font-size: 1.25rem; margin-bottom: 1em; }

.breadcrumb > li { display: inline-block; font-size: .75rem; margin: 3em 0 2em;  }
.breadcrumb > li + li:before { content: '>'; display: inline-block; margin: 0 .5em; }

.page-title { font-size: 2rem; margin-bottom: 2em; }

.title-shop { display: block; background-size: cover; background-position: center center; height: 480px; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 3em; }
.title-shop::before { content: ''; width: 100%; height: 100%; background: rgba(0,0,0,.35); position: absolute; top: 0; left: 0; margin: auto; }
.title-shop .title { color: #FFF; position: relative; z-index: 2;  -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 2.8rem; letter-spacing: .5em;  }
.title-line { border-bottom: 1px solid #707070; font-size: 1.25rem; margin-bottom: 1em; padding-bottom: 1em; }

.table-std{ width: 100%; }
.table-std tr + tr { border-top: 1px solid #707070; }
.table-std th { vertical-align: middle; font-weight: normal; width: 30%; padding: 1.5em 2em; }
.table-std td { vertical-align: middle; font-weight: normal; width: 70%; padding: 1.5em 2em; }

@media screen and (max-width: 900px) {

  .page-title { font-size: 1.5rem;}
  .title-shop .title { font-size: 2rem; }
  .title-shop { height: 60vw; }
  
  .table-std th { padding: 1em .5em; }
  .table-std td { padding: 1em .5em; }
  
}
@media screen and (max-width: 600px) {
  .title-shop .title { font-size: 1.5rem; }
}

.sp-only { display: none; }

@media screen and (max-width: 767px) {
  .ps-only { display: none; }
  .sp-only { display: block; }
}

.head-subcat { margin-bottom: 3em; display: flex; flex-wrap: wrap; }
.head-subcat > li { display: inline-block; vertical-align: middle; margin-right: 2rem; width: 22%; margin-right:4%; }
.head-subcat > li:nth-child(4n) { margin-right: 0; }
.head-subcat a { padding: 1em; width: 100%; display: block; background: #F7F7F7; box-shadow: 8px 8px rgba(0,0,0,.16); position: relative; margin-bottom: 2em; }
.head-subcat a::after { content: ''; width: .4em; height: .4em; display: inline-block; vertical-align: middle; border-top: 1px solid #631E34; border-right: 1px solid #631E34; margin-left: .5em; transform: rotate(45deg); position: absolute; right: 1em; top: 0; bottom: 0; margin: auto; }

.banner-wrapper {max-width: 700px;}
.column-list { margin-bottom: 2em;}


.category-slider { position: relative; margin: 1em 0 3em; padding-bottom: 10px;  }
.category-slider .swiper-slide { height: auto; }
.category-slider .swiper-slide a { display: block; padding: 1em 1.5em; background: #FFF; box-shadow: 8px 8px rgba(0,0,0,.16); font-size: .875rem; text-align: center; height: 100%;}
.category-slider .swiper-slide .img { width: 100%; height: 0; padding-bottom: 100%; position: relative; background-position: center center; background-size: cover; }
.category-slider .swiper-slide p { line-height: 150%; margin: 1em 0; font-size: .75rem; letter-spacing: 0;  }

.category-slider .category-prev { width:42px; height: 42px; position: absolute; left: 0; top: 0; bottom: 0; margin: auto; z-index: 2; cursor: pointer; }
.category-slider .category-next { width:42px; height: 42px; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 2; cursor: pointer; }


.title-home { -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 1.25rem; letter-spacing: .3em; display: table; margin: 0 auto 2em; }

.home-cat-tab { display: flex; justify-content: space-around; width: 80%; margin: 0 auto 100px;  }
.home-cat-tab > li { display: inline-block; align-items: top; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 1.25rem; letter-spacing: .3em; vertical-align: left; letter-spacing: .5em;box-shadow: 8px 8px rgba(0,0,0,.15); cursor: pointer; }
.home-cat-tab .tabbtn { padding: 2em 2.5em 5em; height: 15em; letter-spacing: .5em; position: relative; background: #FFF; } 
.home-cat-tab .tabbtn::after { content: ''; width: 3rem; height: 3rem; display: block; background: #FFF url(../img/circle-arrow.svg)no-repeat center bottom / 100% auto; position: absolute; bottom: 1em; left: 1em; right: 1em; margin: auto; opacity: .5; }
.home-cat-tab .tabbtn:hover::after, 
.home-cat-tab .tabbtn.active::after { opacity: 1; }




.tab-contents { display: none; }
.tab-contents.active { display: block; }

.list-three-category { display: flex; flex-wrap: wrap; justify-content: space-between; }
.list-three-category > li { width: 48%; margin-bottom: 3em; }
.list-three-category .img {  margin-bottom: 2em; box-shadow: 8px 8px rgba(0,0,0,.16); }

@media screen and (max-width: 900px) {
  .home-cat-tab { margin-bottom: 50px; }
  .home-cat-tab .tabbtn { padding: 1em 1.5em 5em; font-size: .8rem;box-shadow: 4px 4px rgba(0,0,0,.15);}
  .home-cat-tab .tabbtn::after { width: 2rem; height: 2rem; } 
  
  .list-three-category > li { margin-bottom: 2em; }
  .list-three-category .img  { margin-bottom: 1em; box-shadow: 4px 4px rgba(0,0,0,.15); }
  
  .head-subcat > li { width: 48%; margin-right: 4%;}
  .head-subcat > li:nth-child(2n) { margin-right: 0; }
  
}


.list-items { display: flex; flex-wrap: wrap; }
.list-items > li { width: 22%; margin-right: 4%; margin-bottom: 3em; text-align : center; }
.list-items > li:nth-child(4n) { margin-right: 0; }
.list-items .thumbnail { width: 100%; height: 0; padding-bottom:  100%; display: block; background: #FFF; box-shadow: 8px 8px rgba(0,0,0,.16); position: relative; margin-bottom: 2em; }
.list-items .thumbnail img { max-width: 80%; max-height: 80%; width: auto; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.list-items .name { line-height: 130%; }
.list-items .price,
.list-items .soldout { font-size: .8rem; }
@media screen and (max-width: 900px) {
  .list-items > li { width: 30%; margin-right: 5%; }
  .list-items > li:nth-child(4n) { margin-right: 5%; }
  .list-items > li:nth-child(3n) { margin-right: 0; }
  .list-items .thumbnail { box-shadow: 4px 4px rgba(0,0,0,.16);  }
}

@media screen and (max-width: 600px) {
  .list-items > li { width: 48%; margin-right: 4%;  }
  .list-items > li:nth-child(3n) { margin-right: 4%; }
  .list-items > li:nth-child(2n) { margin-right: 0; }
}


.home-concept { background: url("../img/bg-concept.png") no-repeat center bottom / 100% auto; padding-bottom: 30vw; }
.home-concept .inner { display: flex; flex-direction: row-reverse; padding: 0 5%; justify-content: space-between; }
.home-concept .title { max-width: 30%; display: flex; flex-direction: row-reverse; align-items: flex-start;  }
.home-concept .title span {-webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 1.25rem; display: block; color: #765932; font-size: .8rem; margin-left: 2em; letter-spacing: .5em; }
.home-concept .title img { display: block; }

.home-concept .text { width: 65%; line-height: 250%;  }
.home-concept .text p { margin-bottom: 1em; }

@media screen and (max-width: 900px) {
  .home-concept .inner { display: block; }
  
  .home-concept .text { width: 100%; }
  .home-concept .title {float: right; margin-left: 1em; margin-bottom: 1em; }
  .home-concept .title span { font-size: .7rem; margin-left: .5em; }
  .home-concept .title img { width: 3rem;  }
}



.item-block { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 5em; }
.item-block .img-box { width: 40%; }
.item-block .detail-box { width: 55%; }

.item-block .itemimg img { width: 100%; height: auto; border: 20px solid #FFF; box-shadow: 8px 8px rgba(0,0,0,.15); }
.item-block .item-name { font-size: 2rem; margin-bottom: 1em; line-height: 130%; }
.item-block .product-info { border: 1px solid #707070; padding: 1em 3em; margin: 2em 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.item-block .product-info dt { width: 10rem; font-size: 1.25rem; } 
.item-block .product-info dd { width: calc(100% - 11rem); } 

.item-description p {  margin-bottom: 1em; }

.itemimg { background: #FFF;}
.itemsubimg { display: flex; flex-wrap: wrap; margin-top: 2em;  }
.itemsubimg > .thumbanil { width: 22%; margin-right: 4%; margin-bottom: 1rem; box-shadow: 5px 5px rgba(0,0,0,.1); background: #FFF; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
.itemsubimg > .thumbanil:nth-child(4n) { margin-right: 0; }
.itemsubimg > .thumbanil img { width: 100%; height: auto; }
.itemsubimg > .thumbanil.active::before { content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; margin: auto; background: rgba(0,0,0,.4); }


.add-info { padding: 100px 0; border-top: 1px solid #707070; }
.alignleft { float: left; margin-right: 1em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1em; margin-bottom: 1em; }

.item-reccomend  { padding-top: 50px; border-top: 1px solid #707070; }
.item-reccomend .title { font-size: 1.25rem; margin-bottom: 2em; }


.item-graybox { padding: 1.5em; background: rgba(0,0,0,.05); display: flex; margin: 2em 0; justify-content: space-between;  }
.item-graybox ul { width: calc(100% - 100px); display: flex; flex-wrap: wrap; justify-content: space-between; }
.item-graybox ul > li { width: 48%; }
.item-graybox ul > li:nth-child(n + 3) { margin-top: .3em; }
.item-graybox a { text-decoration: underline; letter-spacing: 0; font-size: .9rem; line-height: 120%;  }
.item-graybox .qr { width: 66px; }

@media screen and (max-width: 900px) {
  .item-graybox  ul > li { width: 100%; }
  .item-graybox ul > li + li { margin-top: .3em; }
}

.item-info { margin-top: 1em;  }
.item-info .c-box { display: flex; flex-wrap: wrap; justify-content: space-between; }
.item-info .cart-button { width: 100%; }
.item-info .cart-button .skubutton { width: 100%; background: #333 url("../img/cart.svg") no-repeat right 70% center; font-family: inherit; font-size: 1rem; box-shadow: 5px 5px rgba(0,0,0,.15);  }
.item-info .zaikostatus { display: none; }
@media screen and (max-width: 900px) {
  .item-block .img-box { width: 100%; }
  .item-block .detail-box { width: 100%; margin-top: 3rem; }
  
  .item-block .item-name { font-size: 1.5rem; }
  
  .add-info { padding: 50px 0;}
}

.list-news { padding: 1em; }
.list-news dt { width: 9em; float: left; }
.list-news dd { padding-left: 9em; margin-bottom: 1em;  }


.pagination_wrapper > ul { text-align: center; }
.pagination_wrapper > ul >  li { display: inline-block; }
.pagination_wrapper > ul >  li + li { margin-left: 5px; }
.pagination_wrapper > ul .page-numbers {  width: 2.5em; height: 2.5em; font-size: .8rem; line-height: 2.5em; text-align: center; background: #FFF; display: block; }
.pagination_wrapper > ul  .current { background: #631E34; color: #FFF; }


/*shop*/
.inner-link { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 100px; }
.inner-link > li { width: 35%; }
.inner-link > li + li { margin-left: 5%; }
.inner-link a { display: block;padding: 3em 1.5em; background: #FFF url("../img/circle-arrow.svg") no-repeat right 1em center / 3em auto; border-bottom: 1px solid #FFF; box-shadow: 8px 8px rgba(0,0,0,.16);  }
.inner-link a:hover { border-bottom: 1px solid #631E34; opacity: 1;  }

@media screen and (max-width: 900px) {
  .inner-link { margin-bottom: 50px; }
  .inner-link > li { width: 48%; }
  .inner-link > li + li { margin-left: 4%; }
  .inner-link a { padding: 1.5em 1em; box-shadow: 4px 4px rgba(0,0,0,.16); background-size: 1.5em auto;  }
}
.access { text-align: center; margin: 5em 0; }
.accessmap { width: 100%; height: 250px; margin: 2em 0; position: relative; background: #FFF;}
.accessmap iframe { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; }

a.btn-map { position: absolute; bottom: 1em; right: 1em; background: #631E34 ; color: #FFF; border-radius: 5px; padding: .5em 3em; font-size: .875rem;  }

.comment { max-width: 1000px; width: 100%; margin: 5em auto; background: rgba(0,0,0,.03); padding: 3em; text-align: center; }

@media screen and (max-width: 900px) {
  .comment { padding: 1.5em; }
}

.site-content { width: 90%; max-width: 1200px; margin: 100px auto;  }
.shop-gallery .main { width: 100%; max-width: 650px; margin: 0 auto;  }
.shop-gallery .gallery-prev { position: absolute; top: 200px; right: 50%; margin-right: 380px; cursor: pointer; transform: rotate(90deg); z-index: 99; }
.shop-gallery .gallery-next { position: absolute; top: 200px; left: 50%; margin-left: 380px; cursor: pointer; transform: rotate(-90deg);  z-index: 99;  }


@media screen and (max-width: 900px) {
  .shop-gallery .gallery-prev { left: 0; right: auto; top: 25vw; width: 3rem; height: auto; }
  .shop-gallery .gallery-next { left: auto; right: 0; top: 25vw; width: 3rem; height: auto; }
}

.gallery-pagination { position: relative; display: flex; flex-wrap: wrap; bottom: auto; margin: 2em auto; }
.shop-gallery .gallery-pagination .thumb { width: 15%;  height: auto; margin: 0 2% 1em 0;  border-radius: 0; opacity: 1; position: relative; }
.shop-gallery .gallery-pagination .thumb:nth-child(6n) { margin-right: 0; }
.shop-gallery .gallery-pagination .thumb.swiper-pagination-bullet-active::before { content: ''; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; right: 0; margin: auto; background: #000000; opacity: .4; }

.list-staff > li { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; }
.list-staff > li + li { margin-top: 2em; }
.list-staff .img { width: 40%; }
.list-staff .text { width: 55%; text-align: left; }
.list-staff .name { font-size: 1.125rem; margin-bottom: 1em; }

@media screen and (max-width: 900px) {
  .list-staff .img { width: 100%; text-align: center; }
  .list-staff .text { width: 100%;margin-top: 3em;  }
}

.foot-sns { display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.foot-sns > div { width: 32%; }
.foot-sns .twitter { height: 300px; overflow: hidden; }

.foot-sns .title { font-size: 1.25rem; margin-bottom: 1.5em; border-bottom: 1px solid #707070; padding-bottom: 1em; }
.foot-sns img { display: inline-block; vertical-align: middle; margin-right: .5em; }

.list-instagram { display: flex; flex-wrap: wrap; justify-content: space-between; }
.list-instagram > li { width: 30%; margin-bottom: 1em; }


@media screen and (max-width: 900px) {
.foot-sns > div { width: 100%; margin-bottom: 2em;  }
}

@media (max-width: 600px){
	.su-table table th, .su-table table td {
    width: 100%;
    display: block;
}
	input[type=text], input[type=email], input[type=tel], textarea {
    width: 100%;
}
}