@charset "euc-jp";
.slider {
  position: relative;
}
.bx-viewport {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  left: 0 !important;
  border: none !important;
}
#slider div {
  width: 100% !important;
}

.more_prd {
  display: none;
  background-color: #aaa;
  color: #fff;
  font-size: 123.076%;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.free_space_block {
  margin-top: 3em;
}
.free_space {
  font: 10px  arial, helvetica, clean, sans-serif;
   max-width: 500%;
}


 .shop_info  {
  
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  flex-flow: row wrap;
  align-items: center;

  }

  .flexitem {
  flex: 0 30%;
}

.flexitem p {
  text-align: center;
}

  .shop_info_img1{
    max-width: 100%;
    background-color: #ffffff;
  }

  .shop_info_img2{
   max-width: 250%;
   margin-left: 100px;
  background-color: #ffffff;
  }


.recommend_item {
   padding:20px;
}

.recommend_icon{
    margin:10px;
   width: 200px;
   height: auto;
}




.category_icon{
    margin:10px;
    width: 30%;

}
.category_item{
  display: flex;              /* フレックスボックスにする */
  space-between;
}



.category_title{
padding:20px;
}

.category_tool{
margin:10px;
 width: 30%;

flex-basis:70%;
}

.tool_icon{
  padding:20px;
      width: 50%;

}


.tool_title{
 padding-top:50px;
}

.tool_item{
  display: flex;              /* フレックスボックスにする */
}

.tool_name{
 
 line-height:3;
 padding: 0px 20px 0px 20px;;
   color: #3C3C43; 
  font-size:15px;

}

.news{
    text-align: center;
}

.news_icon{
  margin:10px;
  width: 25%;
}

.news_1{
  position: relative;/*親要素にrelative*/
}

.news_day_1{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:35%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}
.news_message_1{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}

.news_2{
  position: relative;/*親要素にrelative*/
}

.news_day_2{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:35%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}
.news_message_2{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}
 
.news_3{
  position: relative;/*親要素にrelative*/
}

.news_day_3{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:35%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}
.news_message_3{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}

.news_4{
  position: relative;/*親要素にrelative*/
}

.news_day_4{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:35%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}
.news_message_4{
  position: absolute;/*重ねたい子要素にabsolute*/
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);/*センター寄せの修正*/
}

.contact{
    text-align: center;
}

.contact_icon{
  margin:20px;
  width: 30%;
}

.sns{
  padding:20px;
   text-align: center;
}

.home_icon{
padding:20px;
  width:50px;
}

.instagram_icon{
padding:20px;
  width:50px;
}

.x_icon{
padding:20px;
  width:50px;
}


.js-accordion--close{
  display: none;
}
.accordion-box{
  display: flex;
  height:0;
  overflow:hidden;
  transition:.4s ease;
}
.js-accordion{
  position: relative;
  padding: 0 35px 0 10px; 
}
.js-accordion::before{
  content: "";
  width: 2px;
  height: 10px;
  background: #000;
  position: absolute;
  right: 250px;
  top: -7px;
  bottom: 0;
  margin: auto;
  transition: .6s ease;
}
.js-accordion::after{
  content: "";
  width: 10px;
  height: 2px;
  background: #000;
  position: absolute;
  right: 246px;
  top: -7px;
  bottom: 0;
  margin: auto;
  transition: .6s ease;
}
.js-accordion.is-accordion--open::before{
  transform: rotate(90deg);
}
.js-accordion.is-accordion--open::after{
  transform: rotate(-180deg);
}
.js-accordion.is-accordion--open + .accordion-box{
  height: auto;
  opacity: 1;
}



.slide-items {
  width: 100%;
  height: 100%;
}

.slide-items img {
  max-width: 95%;
  margin: 10px;
  height: auto;
  object-fit: cover;
}

/*左右の矢印の色を変える*/
.slick-prev:before,
.slick-next:before {
  color: #000 !important;

}


/*左右の矢印の位置を変える*/
.slick-next {
    right: 20px;
    z-index: 99;
}
.slick-prev {
    left: 15px;
    z-index: 100;
}
/*スライド数のドットの色を変える*/
.slick-dots li.slick-active button:before,
.slick-dots li button:before {
    color:;
}


.txt-hide{
display: none;
}

button.more {
margin: 20px auto;
display: block;
background-color: #fff;
color: #3C3C43;
padding:10px 15px;
border: none;
outline: 0;
transition: .5s;
-erbkit-transition: .5s;
}
 
button.more::after {
content: "もっと見る";
transition: .2s;
-erbkit-transition: .2s;
font-size:20px;
}

button.more.on-click::after{
content: "閉じる";
font-size:20px;
}