@charset "UTF-8";

#PathNaviArea{
font-size:1.4em;
padding:10px;

}

/*.contents_nav,h3,.column_list,.key,.copy{

width:960px;
}*/





#eco-topics{
    font-size:1em;
    width: 100%;/*ディスプレイ横サイズに自動可変*/
	  overflow: hidden;
	  position: relative;
	  text-align: center;
	  -webkit-text-size-adjust: none;
    margin:0px;
    font-size: 1.2em;
    letter-spacing:0.5px;
	  font-size:16px;

}


#eco-topics div{
		box-sizing:border-box
}


.clearFix{
  display:inline-block;
  min-height: 1%;
  }


/*-------------------基礎CSS-------------------*/
.br-sp{
  display: none;
}
.br-pc{
  display: block;
}
.m01{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg01.jpg');
}

.m02{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg01.jpg');
  padding:  0% 5% 5% 5%;
  color: #ffe9c7;
  text-align: left;
}


.m02 p {
  line-height: 200%;
   font-weight:600;
   font-size:1.6rem;
  }

.m03{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg02.jpg');
}

.m04{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg02.jpg');
  padding:  0% 5% 5% 5%;
  color: #103409;
  text-align: left;
  box-shadow:0px 4px 6px 0px #e0ceb6;
  position:relative;
}

.m04 p {
  line-height: 200%;
  font-weight:600;
  font-size:1.6rem;
}

.product_wrap{
	background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg03.jpg');
	padding:3.3% 4.3%
}

.product{
	padding: 3% 3% 3% 3%;
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg02.jpg');
  margin:0% 0% 3% 0%;
  width: 100%;
}

.product_category{
    font-weight: 600;
    width:100%;
    font-size: 1.5em;
    background-color: #2d5b24;
    color: #ffffff;
    padding:  10px 0;
    margin:   20px 0px 10px 0px;
    text-align: center;
    /* font-family: “Noto Serif JP”,“Times New Roman”, “游明朝”, YuMincho, “ヒラギノ明朝 ProN W3”, “Hiragino Mincho ProN”, “HG明朝E”, “メイリオ”, Meiryo, serif; */

}

.product_left {
	width:35%;
	max-width: 35%;
	float: left;
	margin:0 4.5% 0 0;
}

.product_right{
	width:60.5%;
	max-width: 60.5%;
	float: left;
	margin:0% 0% 0% 0%;
	text-align: left;
}

.product_name{
    font-weight:600;
    font-size: 1.5em;
    background-color: #2d5b24;
    color: #ffffff;
    padding:  10px 10px 10px 20px;
	  width:100%;
	  box-sizing:border-box;
}

.product_price{
    color: #112c09;
	  margin:15px 0 0 20px;
	  font-size:250%;
    line-height:1;

}

.product_cart{
    margin:   15px 0px 0px 15px;

}

.product .thumbnail{
	width:100%;
	border:2px solid #355830;
	box-sizing:	border-box;
}


.m05{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg04.jpg');
  box-shadow:0px -5px 3px 0px #c2c0b1;
}

.m06{
    background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg04.jpg');
    padding:  0% 5% 5% 5%;
    float: left;
    color: #24315b;
    text-align: left;
  }

.m06 p{
  max-width: 100%;
  float: left;
  line-height: 200%;
  padding:0% 0% 5% 0%;
}

.m07{
  background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg04.jpg');
  padding:  0% 5% 5% 5%;
    float: left;
    color: #24315b;
    text-align: left;
  }

.m07 .title   {
font-size:3.5rem;
  padding: 0.3em 0 0.3em 0.5em;/*文字の上下 左右の余白*/
  color: #ffffff;/*文字色*/
  background: #24315b;/*背景色*/
  /* width: 60%; */
  margin: 0% 0% 5% 0%;
  box-shadow:-5px 0px 0px 0px #ffffff,-15px 0px 0px 0px #24315b;
}

.m07 p   {max-width: 100%;float: left;line-height: 180%;padding:  0% 0% 5% 5%;font-size:1.6rem;}

.m07 img   {padding:  0% 5% 5% 5%;}



.m08{background-image:url('https://kaicom.itembox.design/item/images/guide/eco_bg04.jpg');padding:  0% 5% 5% 5%;
    background-size: contain;
    width: 100%;
    float: left;
    color: #24315b;
    text-align: left;}

.m08 .title   {
  padding: 0.3em 0 0.3em 0.5em;/*文字の上下 左右の余白*/
  font-size:3.5rem;
  /* width: 60%; */
  color: #ffffff;/*文字色*/
  margin: 0% 0% 5% 0%;
  background: #24315b;/*背景色*/

box-shadow:-5px 0px 0px 0px #ffffff,-15px 0px 0px 0px #24315b;
}
.m08-flex{
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.m08-flex__img{
  max-width: 20%;
  margin:  0% 0% 5% 5%;
}
.m08-flex__img img{
  width: 100%;
}
.m08 p {
  max-width: 65%;
  line-height: 180%;
  font-size:1.6rem;
}

.m08 p b {
  font-weight: bold;
  font-size:2.1rem;
}


/*ナビゲーション*/

.navWrap.fixed{
    position: fixed;
    top: 0px;
	  z-index:99999;

}

.contents_nav ul {
  display: flex;
  justify-content: center;
  width: 100%;
}
.mt50{

	margin-top:50px;

}

/*.contents_nav{

	width:100%;

	padding:10px 0;

	background-image: linear-gradient(-180deg, #fdfbfb 0%, #ebedee 100%);

	font-size:85%;

	position:absolute;

}*/


.fixed .contents_nav{
	background-image: linear-gradient(-180deg, #FDEB71 0%, #F8D800 100%);
}



.navWrap li{
	padding-right:1%;
}

.navWrap li:last-child{
	padding-right:0;
}


.navWrap li a{

	display:block;

}




img {

  max-width: 100%;

}

.product .product_price{

}

.product_unit-price{
	font-size:200%;
	margin:10px 0 0 20px;
	color:#112c09;
}

.product .product_price span.font-s{
	font-size:60%;

}

.product .size{
	font-size:80%;
}






#page_top{

  width: 90px;

  height: 90px;

  position: fixed;

  right: 0;

  bottom: 0px;

  opacity: 0.6;

}

#page_top a{

  position: relative;

  display: block;

  width: 90px;

  height: 90px;

  text-decoration: none;

}

#page_top a::before{

  font-family: 'Font Awesome 5 Free';

  font-weight: 900;

  content: '\f102';

  font-size: 25px;

  color: #000;

  position: absolute;

  width: 25px;

  height: 25px;

  top: -40px;

  bottom: 0;

  right: 0;

  left: 0;

  margin: auto;

  text-align: center;

}

#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #000;

}

/* 詳細ボタンcss */

.https img{
	width:40%;
}
@media screen and (max-width:980px){
  .https img{
    width:60%;
  }
}

/* もっと見るボタン */

.moreBtn{
	margin:15px auto 15px;
	min-width:200px;
	padding:5px 5px 15px;
	text-align:center;
	margin: 0 auto;
	width:60%;
}
.moreBtn img{
	width:50%;
	max-width:100%;
}

/* リード文レスポンシブ */

.m02, .m04{
  display: flex;
  justify-content: space-around;
  gap:20px ;
  min-height: 0;
 }

.m02 h2, .m04 h2{
  max-width: 27%;
}
.m02 h2 img, .m04 h2 img  {
   width: 100%;
}
.m02 p, .m04 p{
   max-width:65%;
}

@media screen and (max-width: 980px){
.br-sp{
  display: block;
}
.br-pc{
  display: none;
}
.m02, .m04{
   display: block;
}
.m02 h2, .m04 h2{
  max-width: 35%;
 margin:0 auto;

}
.m02 h2 img, .m04 h2 img {
width: 100%;

}
.m02 p, .m04 p{
max-width:100%;
padding: 0% 0% 5% 0%;
font-size: 1.3rem;
}
}


/* ナビゲーションレスポンシブ */
@media screen and (max-width: 980px){
.navWrap{
  margin: 0 -4.3%;
  width: auto;
}
.contents_nav ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.navWrap li{
  width: calc(100% / 3);
  padding-right:0;

}
}

/* 商品詳細レスポンシブ */
@media screen and (max-width: 980px){
  .product_name{
    font-size: 1.6rem;
  }
    .product_unit-price{
      font-size :1.6rem;
}
.product_price {
  font-size: 200%;
}
}

/* 生分解性プラスチック・脱プラスチックとはレスポンシブ */
@media screen and (max-width: 980px)
{
  .m08 .title, .m07 .title{
    width: 80%;
    font-size:2.0rem;
  }
  .m08 p, .m07 p{
    font-size:1.4rem;
  }
  .m08-flex{
   display: block;
  }
  .m08 p {
    max-width: 100%;
    line-height: 180%;
    margin-bottom: 25px;
  }
  .m08-flex__img{
    margin: 0 auto;
  }

}