@charset "utf-8";
/* CSS Document */

/*-------------------------
  全体設定
-------------------------*/

*{
  padding: 0px;
  box-sizing: border-box;
}

/*-------------------------
  改行調整
-------------------------*/
.br-pc {display: none;} /* スマホの時は改行しない */
.br-sp {display: block;} /* PCの時は改行しない */

span {display: inline-block;} /* 文章区切り */
/*-------------------------
  メイン
-------------------------*/

section#mv {
    margin-bottom: 20px
}

.mv-img {
    display: block;
    width: 100%;
    height: auto;
}


/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.mv-img-pc { display: none !important; }
.mv-img-sp { display: block !important; }


#lp-main{
	margin: 0 auto;
}



#lp-main h2 {
	font-size: 1.6rem;
    font-weight: 700;
}


#lp-main h4 {
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 2rem;
	text-align: center;
    border-bottom: solid 1px;
    margin-bottom: 2rem;
	margin-top: 2rem;
}



/*-------------------------
  TOP部分
-------------------------*/
section #sec-top{
    padding: 1.2rem;
    margin: 4rem auto 2rem;
/*    border: thin solid #b1371a;*/
    background-color: #FFFFFF;
}

#sec-top h2{
    text-align: center;
    color: #b1371a;
}

div.top-text {
    font-size: 1.2rem;
    text-align: left;
    margin-top: 3rem;
}

	
/****************************************************

特集_LP清水

****************************************************/

#feature-base {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 1.4rem;
}

#feature-base ul {
  margin: 1em 0;
  padding-left: 40px;
  list-style-type: disc;
}

.feature-base-p {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-evenly;
  font-size: 1.2rem;
}

.attention {
  font-size: 1.2rem;
  color: #ca0000;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-evenly;
}



/*-------------------------
  商品一覧
-------------------------*/
	
.item-list {
  padding: 2rem auto;
  margin-bottom: 5rem;
}

.item-list h2 {
  font-size: 2.5rem;
  text-align: center;
  padding: 5rem 0 1rem;
  margin-bottom: 1.5rem;
  border-bottom: dashed 1.5px #707070;
}

#feature-base h3 {
  font-size: 2rem;
  padding: 1.5rem 0 0.5rem;
}

#feature-base h4 {
  font-size: 1.8rem;
  padding: 1.5rem 0 0.5rem;
}

/*横3個*/

ul.list-main {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 8%;
  -moz-column-gap: 8%;
  column-gap: 5%;
  /*8%*/
  row-gap: 25px;
  padding: 2rem;
  background-color: #ffffff;
}

li.list-item {
  list-style: none;
  width: 30%;
  /*19%*/
  float: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


ul.list-main::after, ul.list-main::before{
width: 45%;
content: "";
display: block;
}
ul.list-main::before{
order: 1;
}

@media only screen and (min-width: 1024px) {
ul.list-main::after, ul.list-main::before{
width: 30%;
content: "";
display: block;
}
}

/*横2個*/

ul.list-main2 {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-column-gap: 8%;
  -moz-column-gap: 8%;
  column-gap: 8%;
  /*8%*/
  row-gap: 8em;/*25px*/
  padding: 2rem 0 2rem 0;
  background-color: #ffffff;
  justify-content: space-between;
}

li.list-item2 {
  list-style: none;
  width: 46%;
  float: left;
  box-sizing: border-box;
}

img.list-item {
  padding-bottom: 0.2rem;
}

.list-name {
	font-size: 1.2rem;
	margin: 0.5em 0;
}


.price{
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

.list-point {
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: normal;
	color: #c36825;
    position: absolute;
    float: left;
}

.list-price {
  text-decoration: line-through;
  font-size: 1.1rem;
}


.list-saleprice {
  font-size: 1.3em;
  font-weight: bold;
  color: #c36825;
  text-align: right;
}

.list-saleprice::before {
    content: "→";
    color: #333333;
	margin: 0 2px;
}


.list-saleprice::after {
  content: " (税込)";
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  #feature-base {
    margin: 0 12px;
    font-size: 1.2rem;
  }
  #feature-base ul {
    padding-left: 20px;
  }
    .feature-base-p {
    /*padding: 1rem;*/
  }
  .item-list {
    padding: 1rem auto;
    margin-bottom: 3rem;
  }
  .item-list h2 {
    /*    padding: 0;
*/
  }
  ul.list-main, ul.list-main2 {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-column-gap: 8%;
    -moz-column-gap: 8%;
    column-gap: 8%;
    row-gap: 25px;
    padding: 1rem;
  }
  li.list-item, li.list-item2 {
    list-style: none;
    width: 46%;
    /*28%*/
    float: left;
    box-sizing: border-box;
  }
.list-point {
    position:unset;
	float: none;
}
	
	
}

/*-------------------------
  もっと見る部分
-------------------------*/
.moreinfo{
	text-align: center;
	margin: 60px auto;
}


/*-------------------------
  丸ボタン
-------------------------*/
.shouhin-bg {
  margin: 0 auto;
  background: #ffffff;
  /*width: 280px;*/
  height: auto;
  position: relative;
  /*margin-bottom: 1em;*/
} 

.shouhin-button　{
  width: 280px;
}

ul.shouhin-button {
  display: flex;
  margin: 0 auto;
  list-style-type: none;
  padding: 0.2em;/*0.5em*/
  font-size: 10px;/*13px*/
  position: absolute;
  z-index: 1;
}

@media only screen and (min-width: 1024px) {
ul.shouhin-button {
  padding: 0.5em;/*0.5em*/
  font-size: 14px;/*13px*/
}
}


.shouhin-button li{
    display: inline-block;
    align-self: auto;
    min-width: 0;
    padding-right: 1em;
}

li.button02,
li.button03,
li.button04
{
  line-height: 1.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: calc( 1em - 2px);
  margin-right: 0.5em;
  /*color: #fff;*/
  text-decoration: none;
  text-align: center;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  word-break: break-all;
  box-sizing: border-box;
  z-index: 1;
}
   
li.button02 /*送料無料*/{
color: #36afc2;
background: #ffffff;
border: solid 1px #36afc2;
}   
li.button03 /*ポイント*/{
color: #c36825;
background: #ffffff;
border: solid 1px #c36825;
}   
li.button04 /*割引％*/{
    color: #ffffff;
    background-color: #b1371a;
/*border: solid 1px #b1371a;*/
}   


/*-------------------------
  ボタン
-------------------------*/

.lp-btn01 {
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.lp-btn01 a {
    /*max-width: 370px;*/
    min-width: 300px;
    height: 45px;
    background: #f5f4f2;
    color: #333;
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 5px;
    border: solid thin #797979;
    font-size: 12px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 1em;
}

.lp-btn02 {
    z-index: 2;
    position: fixed;
    background: #b1371a;
    right: 0;
    top: 50%;
	border-radius: 5px 0 0 5px;
    padding: 0.5em 1em 0.5em 0.5em;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.25);
    writing-mode: vertical-rl;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.lp-btn02 a {
  color: #fff;
  font-size: 1.2rem;
}
@media only screen and (min-width: 1024px) {
	
.lp-btn02 {
    padding: 2em 3em 2em 2em;
    letter-spacing: 0.5em;
	}
.lp-btn02 a {
  color: #fff;
  font-size: 1.5rem;
	font-weight: bold;
}
	
}



.lp-btn-cart,
.lp-btn-page
{
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1em;
}

.lp-btn-cart a,
.lp-btn-page a{
  font-size: 1.2rem;
  width: 100%;
  height: 2.5em;
  background: #fff;
  color: #707070;
  border: solid 1px #707070;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 20px;
}

.lp-btn-cart ::after {
  content: "カートに入れる";
}
.lp-btn-page ::after {
  content: "商品詳細をチェック";
}

/*-------------------------
 カテゴリー部分
-------------------------*/

ul.lp-btn-cate {
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: space-between;
   /* margin-top: 40px;*/
    column-gap: 4%;
    row-gap: 15px;
    /* padding: 1rem; */
    flex-direction: row;
    flex-wrap: wrap;
}

li.lp-btn-cate_list {
    list-style: none;
    width: 30%;/*48*/
    float: left;
	box-sizing: border-box;}


.lp-btn-cate a {
    cursor: pointer;
    font-size: 13px;
    font-size: 1.3rem;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    margin: auto;
    display: block;
    height: 50px;
    padding: 5px;
    text-align: center;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    display: block;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
    background-color: #dc9f91;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
}

.lp-btn-cate_list ::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
    right: 12px;
    left: auto
}

.lp-btn-cate {
    margin: auto
}


/*-------------------------
  タブレット
-------------------------*/
@media only screen and (min-width: 768px){
	
#lp-main h4 {
    margin-bottom: 3rem;
}

	
/*オリジナルポイント紹介*/
.point-img-sp{
	display: none;
	}
	
.point-img,	
.point-img-pc{
	display: block;
	margin: 0 auto;
    max-width: 100%;
    padding: 2rem;
	}

	
div.point-sub{
	display: flex;
	width: 100%;
	margin: 0 auto;
	
}
.point-sub img{
	width: 45%;
	margin: auto;	
}

.lp-btn01 a {
    height: 55px;
  }

}

/*-------------------------
  PC
-------------------------*/
@media only screen and (min-width: 1024px) {

.br-pc {display: block;} /* スマホの時は改行 */
.br-sp {display: none;} /* PCの時は改行 */

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.mv-img-pc { display: block !important; max-width: 1000px; margin: 0 auto;}
.mv-img-sp { display: none !important; }
    
#lp-main{
	width: 1000px;
}
	
#lp-main h2 {
	font-size: 2rem; /*1.6rem;*/
    font-weight: 700;
}

#lp-main h4 {
	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
	font-size: 3rem;
	text-align: center;
    border-bottom: solid 1px;
    margin-bottom: 3rem;
}

	
.feature-base-p {
  font-size: 1.4rem;
}
.list-name {
  font-size: 1.4rem;
}
	
	
    
	
div.top-text {
	font-size: 1.4rem;
	text-align: center;
}

	
	
  .lp-btn01 a {
	  min-width: 50%;
    height: 65px;
    font-size: 14px;
    font-size: 1.4rem;
	}
	
	
}