@charset "utf-8";
/* CSS Document */
#SesukiWrap {
  width: 100%;
  padding: 0 0 10% 0;
  margin: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
}
/*--以下　Adobe Font 要素---------------*/
.HeiseiMaruGothicStdW8 {
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 800;
  font-style: normal;
}
.HeiseiMaruGothicStdW4 {
  font-family: heisei-maru-gothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}
/*-----------------*/
.w100p {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.w1006 {
  max-width: 1006px;
  margin: 0 auto;
  text-align: center;
}
.w1000 {
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
  clear: both;
  overflow: hidden
}
.w925 {
  max-width: 925px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden
}
.BkgGreenStrp {
  background: -webkit-repeating-linear-gradient(-45deg, #008037 0, #008037 8px, #148846 8px, #148846 16px);
  background: -o-repeating-linear-gradient(-45deg, #008037 0, #008037 8px, #148846 8px, #148846 16px);
  background: repeating-linear-gradient(-45deg, #008037 0, #008037 8px, #148846 8px, #148846 16px);
}
.BkgGreen {
  background: url("img/bg_green.jpg") top center;
}
span.TextG {
  color: #009944;
  font-weight: bold;
}
.pc-only {
  display: block;
}
.sp-only {
  display: none;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}
/*===========================
ヘッダー要素
===========================*/
.SesukiHeader {
  width: 100%;
  height: 271px;
}
.HeaderImgWrap {
  max-width: 850px;
  background: url("img/fv_pc.png") no-repeat center top;
  background-size: contain;
  padding-top: 55.78%;
  margin: 0 auto 0;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
  .SesukiHeader {
    width: 100%;
    height: 0;
    padding-top: 30%;
    position: relative;
  }
  .HeaderImgWrap {
    width: 90%;
    background: url(img/fv_tb.png) no-repeat center top;
    background-size: contain;
    padding-top: 55.61%;
    margin: 0 auto 0;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
  }
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
  .SesukiHeader {
    width: 100%;
    height: 0;
    padding-top: 50%;
    position: relative;
  }
  .HeaderImgWrap {
    width: 88%;
    background: url(img/fv_sp.png) no-repeat center top;
    background-size: contain;
    padding-top: 163.48%;
    margin: 0 auto 0;
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
  }
}
.SectionWrap {
  max-width: 850px;
  margin: 0 auto;
}
.section01, .section02, .section03 {
  width: 100%;
  margin: 30px 0;
  padding: 50px 150px 20px;
  box-sizing: border-box;
  border-top-left-radius: 80px;
  border-bottom-right-radius: 80px;
  text-align: center
}
/*===========================
section01要素 セスキって何？
===========================*/
.section01 {
  margin-top: 203px;
  border: solid 8px #007E37;
  background: url("img/bg_floor-green.jpg") no-repeat center top;
  background-size: cover;
}
.section01 p {
  margin-bottom: 30px;
}
p.Sec01Text {
  text-align: left;
  font-size: 17px;
  line-height: 1.8em;
}
p.TextWakuMoji {
  font-size: 52px;
  color: #F1F1F1;
  text-shadow: 0 1px 0 #43974E, 1px 0 0 #43974E, 0 -1px 0 #43974E, -1px 0 0 #43974E, -1px -1px 0 #43974E, 1px -1px 0 #43974E, -1px 1px 0 #43974E, 1px 1px 0 #43974E;
  letter-spacing: 0.1em
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
  .section01 {
    width: 96%;
    margin-top: 24.4%;
    margin-left: 2%;
    margin-bottom: 7%;
    margin-right: 2%;
    padding: 50px 40px 20px;
  }
  .section02, .section03 {
    width: 96%;
    margin: 7% 2%;
    padding: 50px 40px 20px;
    box-sizing: border-box;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
    text-align: center;
    display: block;
    overflow: hidden;
  }
	p.TextWakuMoji {
  font-size: 11vw;
	line-height: 1em;
	}
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
  .section01 {
    width: 96%;
    margin: 81% 2% 6%;
    padding: 11% 6% 2%;
    box-sizing: border-box;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
    text-align: center;
  }
  .section02, .section03 {
    width: 96%;
    margin: 10% 2%;
    padding: 10% 6% 4%;
    box-sizing: border-box;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
    text-align: center
  }
  .section01 p:first-child img {
    width: 80%
  }
	p.TextWakuMoji {
  font-size: 11vw;
	line-height: 1em;
	}
}
/*===========================
section02要素 こんな場所におすすめ
===========================*/
.section02 {
  border: solid 8px #007E37;
  background-color: #fff;
  background-size: cover;
}
.section02 p {
  margin-bottom: 30px;
}
.BkgLeef {
  background: url("img/leaf.png") no-repeat center;
  background-size: contain;
  height: 51px;
  font-size: 25px;
  /* 文字を真ん中寄せするための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Sec02BkgGeki {
  background: url("img/icon_gekiochi-osouji.png") no-repeat center;
  height: 95px;
  background-size: contain;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.Sec02BkgGeki > span {
  background-color: #FFD802;
  font-size: 20px;
  padding: 5px;
}
ul.yogoreList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}
ul.yogoreList li {
  width: 32%;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  height: 116px;
  color: #fff;
  /* 文字を真ん中寄せするための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-shadow: 1px 1px 5px #000;
}
ul.yogoreList li.abura {
  background: url("img/spot_kitchen.jpeg") no-repeat center center;
  background-size: cover;
}
li.yani {
  background: url("img/spot_living.jpg") no-repeat center center;
  background-size: cover;
}
li.irui {
  background: url("img/spot_shirts.jpg") no-repeat center center;
  background-size: cover;
}
p.TsizeS {
  font-size: 12px;
  padding-bottom: 3px;
  padding-top: 31px;
  margin: 0;
}
p.TsizeM {
  font-size: 18px
}
p.Sec02Text {
  font-size: 18px;
  line-height: 1.8em;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
	.BkgLeef {
		font-size: 5.5vw
	}
	.Sec02BkgGeki {
		font-size: 5.5vw		
	}
  ul.yogoreList li {
    width: 100%;
    height: auto;
    padding-top: 50%;
    margin: 0 0 8% 0;
    position: relative;
  }
	ul.yogoreList li p {
		padding-bottom: 1.5em
	}
  p.TsizeS {
    position: absolute;
    width: 100%;
	  top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
  }
  p.TsizeM {
    position: absolute;
    width: 100%;
	  top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
  }
	
p.Sec02Text {
  font-size: 4vw;
	text-align: left;
}
}
/*===========================
section03要素 汚れ落ちのひみつ
===========================*/
.section03 {
  border: solid 8px #FFF;
  background: url("img/bg-board.jpg") no-repeat;
  background-size: cover;
}
p.sen03title {
  width: 70%;
  margin: 0 auto;
  color: #fff;
  background: url("img/line-dashed.png") no-repeat center bottom;
  background-size: contain;
  padding-top: 0px;
  height: 110px;
}
span.sen03titleTop {
  font-size: 22px;
  line-height: 2em;
}
span.sen03titleBotm {
  font-size: 30px
}
.section03 p {
  margin-bottom: 20px;
}
.section03 img {
  width: 100%;
}
p.sec03Arrow img {
  width: 20%;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
  p.sen03title {
    width: 80%;
  }
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
  p.sen03title {
    width: 95%;
	  height: 0;
	  padding-top: 27%;
	  position: relative
  }
  span.sen03titleTop {
	  width: 100%;
    font-size: 4vw;
	  position: absolute;
	  top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
  }
  span.sen03titleBotm {
	  width: 100%;
    font-size: 5.5vw;
	  position: absolute;
	  top: 39%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
  }
}
/*===========================
section04要素 アルカリ電解水って？
===========================*/
.section04 {
  width: 100%;
  box-sizing: border-box;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
  border: solid 8px #00BAFF;
  background-color: #fff;
}
.section04 ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section04 ul li.left {
  width: 30%;
  color: #fff;
  font-size: 20px;
  border-top-left-radius: 10px;
  background: -webkit-repeating-linear-gradient(-45deg, #00b7f2 0, #00b7f2 8px, #00baff 8px, #00baff 16px);
  background: -o-repeating-linear-gradient(-45deg, #00b7f2 0, #00b7f2 8px, #00baff 8px, #00baff 16px);
  background: repeating-linear-gradient(-45deg, #00b7f2 0, #00b7f2 8px, #00baff 8px, #00baff 16px);
  /* 文字を真ん中寄せするための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.section04 ul li.right {
  width: 70%;
  padding: 40px 20px;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.6em;
  /* 文字を真ん中寄せするための設定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
  .section04 {
    width: 96%;
    margin: 0 2%;
  }
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.section04 {
	width: 96%;
	margin: 0 auto;
	}
  .section04 ul li.left, .section04 ul li.right {
    width: 100%;
  }
	.section04 ul li.left {
		padding: 6% 0;
		font-size: 4vw
	}
	.section04 ul li.right {
		padding: 3%;
		font-size: 3vw
	}
}
/*===========================
section05要素 商品ラインナップ
===========================*/
.section05 {
  margin-bottom: 80px;
}
.clearfix {
  clear: both;
}
.SesukiLineUp {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 20px;
}
p.SesukiLineUpTitle {
  padding: 20px 0;
  color: #fff;
	line-height:2.2em
}
span.LineUpTitle01 {
	font-size: 23px;
}
span.LineUpTitle02 {
	font-size:30px;
}

.LineUpSpray, .LineUpAwa, .LineUpSheet, .LineUpPowder {
  position: relative;
}
p.ImgOfTitle {
  position: absolute;
  width: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.ImgOfSpray {
  top: 42px;
  z-index: 0;
}
.ImgOfForm {
  top: 42px
}
.ImgOfSheet {
  top: -30px
}
.ImgOfPowder {
  top: -30px
}
p.ImgOfTitle img {
  width: 100%
}
.LineUpType {
  background-color: #007E37;
  text-align: center;
  color: #FFFFFF;
  padding: 20px 0;
  margin-bottom: 15px;
  margin-top: 80px;
}
.LineUpType p {
  line-height: 1.5em
}
p.TypeOfName {
  font-size: 22px;
}
.LineUpItem {
  text-align: center;
  margin-bottom: 20px;
}
.LineUpItem img {
  width: 75%;
}
.LineUpSpray {
  width: 49%;
  float: left;
}
.LineUpAwa {
  width: 49%;
  float: right;
}
.LineUpSheet {
  width: 100%;
  clear: both;
}
.LineUpSheet ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.LineUpSheet ul li {
  width: 49.5%
}
.LineUpSpray ul li, .LineUpAwa ul li, .LineUpSheet ul li, .LineUpPowder ul li {
  border: solid 8px #007E37;
  border-top-left-radius: 80px;
  border-bottom-right-radius: 80px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px 0
}
p.itemName {
  margin: 20px 0;
  line-height: 1.5em
}
.LineUpPowder .LineUpItem {
  width: 50%;
  margin: 0 auto;
}
p.addCart {
  background-color: #DB45A9;
  width: 70%;
  margin: 8px auto;
  color: #fff;
  padding: 8px;
  border-radius: 6px;
  font-size: 15px;
}
p.addCart:before {
  content: ''; /*何も入れない*/
  display: inline-block; /*忘れずに！*/
  width: 18px; /*画像の幅*/
  height: 18px; /*画像の高さ*/
  font-family: 'Material Icons';
  content: "shopping_cart";
  vertical-align: middle;
}

p.addCart a {
	color: #fff;
	text-decoration: none;
}
p.addCart a:hover {
	text-decoration: underline;
}

@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
  .section05 {
    width: 96%;
    margin: 0 2% 10%;
  }
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
  .section05 {
    width: 96%;
    margin: 0 2% 10%;
  }
	
span.LineUpTitle01 {
	font-size: 6vw;
}
span.LineUpTitle02 {
	font-size:7.5vw;
}
	p.TypeOfName {font-size:6.5vw;}
	p.DetailOfType {font-size:5.3vw;}
	
	
.LineUpSpray, .LineUpAwa, .LineUpSheet, .LineUpPowder {
	width: 100%
}
	.LineUpItem {
  width: 96%!important;
  margin: 0 auto;
}
	
.LineUpSheet ul li {
  width: 100%;
	margin-bottom: 3%
}
	
	
}