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


#MizuGekiWrap {
  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;
//background-color: #fff
}
.w1000 {
  max-width: 1000px;
  padding: 0;
  margin: 0 auto;
  clear: both;
  overflow: hidden
}
.w925 {
  max-width: 925px;
  padding: 0;
  margin: 0 auto;
  overflow: hidden
}

.blueText {
	color: #1966D0;
	font-weight: bold;
}
.yellowText {
	color: #FFD802;
	font-weight: bold;
}

.none_waku {background-color: #1966D0 !important}

.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を記述*/
	
.none_waku {display: none}
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }
}
/*===========================
ヘッダー要素
===========================*/
.MizuGekiHeader {
  width: 100%;
}
.HeaderImgWrap {
	width: 100%;
	background: url("img/fv_pc.jpg") no-repeat center top;
	background-size: contain;
	padding-top: 42.88%;
}


@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.HeaderImgWrap {
	width: 100%;
	background: url("img/fv_sp.jpg") no-repeat center top;
	background-size: contain;
	padding-top: 128%;
}
}



/*===========================
section01要素 アルカリ電解水って何？
===========================*/
.section01 {
	background: linear-gradient(-135deg, #ffffff, #DEDEDE);
	text-align: center;
    padding: 0 0 3% 0;
}

.sec01con {
	border-top: 3px solid #1966D0;
	background: url("img/bg_polygon.png") no-repeat top right;
	background-size: 60%;
	overflow: hidden;
	display: block;
	padding: 5% auto;
}
.sec01con p {
	padding-bottom: 0px;
	padding-top: 50px;
}
.sec01bg {
	background: url("img/bg_polygon_opo.png") no-repeat top left;
	background-size: 50%;
}
p.WhatIsImg {
	padding-top: 5%;
	width: 271px;
	margin: 0 auto;
}
p.WhatIsImg img {
	width: 100%
}
p.WhatIsText {
	padding-top: 2%;
	line-height: 1.5em;
	font-size: 18px
}
.stepSubText {
	line-height: 1.5em;
	font-size: 20px;
}

.bgWhie {
	background-color: #fff;
	margin: 5% auto;
}
p.moreDeImg {
	width: 232px;
	margin: 0 auto;
}
p.moreDeImg img {
	width: 100%;
}

ul.step {
  width: 80%;
	margin: 8% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.step li {
	width: 32%;
	border: 2px solid #000;
	border-radius: 8px;
	position: relative;
	padding-top: 26%;
}
p.stepBgBlue {
	font-size: 18px;
	line-height: 1.3em
}
ul.step li img {
    position: absolute;
    top: -39px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    width: 33%;
}
ul.step li.step01 {
	background: url("img/step01.png") no-repeat center top;
	background-size: 82%;
}

ul.step li.step02 {
	background: url("img/step02.png") no-repeat center top;
	background-size: 82%;
}

ul.step li.step03 {
	background: url("img/step03.png") no-repeat center top;
	background-size: 82%;
}
ul.step li p.stepBgBlue {
	background-color: #1966D0;
	width: 100%;
	color: #fff;
    padding: 28px 0;
}





@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
ul.step {
	width: 90%;
	}
ul.step li img {
    position: absolute;
    top: -42px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    width: 40%;
}
p.stepBgBlue {
	font-size: 13px;
	line-height: 1.3em
}
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
ul.step li img {
    position: absolute;
    top: -17%;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    width: 32%;
}
	p.WhatIsImg, p.WhatIsText {
		padding-top: 6%;
	}
	p.WhatIsText {
	font-size: 4vw;
	}
p.stepSubText {
	line-height: 1.5em;
	font-size: 4vw;
}
	
	.sec01bg {
		padding: 0 3%;
	}
	.sec01con {
		width: 100%;
		margin: 0 auto;
	}
ul.step {
  width: 95%;
	margin: 5% auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.step li {
	width: 100%;
	border: 2px solid #000;
	border-radius: 8px;
	position: relative;
    padding-top: 70%;
    margin-top: 25%;
}
	
	
ul.step li.step01 {
	background: url("img/step01.png") no-repeat center top;
	background-size: 71%;
}

ul.step li.step02 {
	background: url("img/step02.png") no-repeat center top;
	background-size: 71%;
}

ul.step li.step03 {
	background: url("img/step03.png") no-repeat center top;
	background-size: 68%;
}

p.stepBgBlue {
	font-size: 5vw;
	line-height: 1.3em
}
}




/*--以下　青い屋根エリア　要素--------------------------*/
.san_box {
  background: #1966D0;
  position: relative;
  margin: 60px 0 30px;
}
.arrow{
    padding-bottom: calc(10vw + 0px); /* 高さに合わせて調節してください。*/  
    position: relative;
}
.arrow::before,
.arrow::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 10vw solid #FFF;  /* 好みで高さ色を変えてください */ 
}
.arrow::before{
    left: 0;
    border-right: 50vw solid transparent;
}
.arrow::after{
    right: 0;
    border-left: 50vw solid transparent;
}
.san_box .san_in {
  text-align: center;
  padding: 30px 0 30px;
	position: relative
}
p.ImgHouse {
    position: absolute;
    top: -40px;
    left: 50%;
    -webkit-transform: translate(-50%, -40px);
	width: 50px
}

p.ImgHouse img {
	width: 100%
}
p.PlaceImg01 {
	width: 382px;
	margin: 0 auto !important;
	}
p.PlaceImg01 img {
	width: 100%
	}
.san_box .san_in p {
  color: #ffffff;
  font-weight: bold;
  margin: 0 0 10px;
	padding-bottom: 35px;
	text-align: center;
}
.san_box .san_in .san_t_y {
  color: #FFD802;
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 10px;
}

.san_box .san_in .san_t_c {
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  margin: 0;
}

ul.mizuPlace {
  width: 80%;
	margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.mizuPlace li {
	width: 24%;
	padding-top: 20%;
	border-radius: 10px;
	margin-bottom: 2%;
	position: relative;
}

ul.mizuPlace li.place01 {
	background: url("img/place01.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place02 {
	background: url("img/place02.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place03 {
	background: url("img/place03.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place04 {
	background: url("img/place04.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place05 {
	background: url("img/place05.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place06 {
	background: url("img/place06.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place07 {
	background: url("img/place07.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li.place08 {
	background: url("img/place08.jpg") no-repeat center center;
	background-size: cover;
}
ul.mizuPlace li::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.3);
	border-radius: 10px;
}
ul.mizuPlace li p {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size:15px;
  color:#fff;
	width: 100%
}


@media only screen and (min-width : 600px) and (max-width : 1006px) {
  /*tablet用のcssを記述*/
	
.arrow{
    padding-bottom: calc(15vw + 0px); /* 高さに合わせて調節してください。*/  
    position: relative;
}
.arrow::before,
.arrow::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 15vw solid #FFF;  /* 好みで高さ色を変えてください */ 
}
.arrow::before{
    left: 0;
    border-right: 50vw solid transparent;
}
.arrow::after{
    right: 0;
    border-left: 50vw solid transparent;
}
	
	
	
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
.arrow{
    padding-bottom: calc(20vw + 0px); /* 高さに合わせて調節してください。*/  
    position: relative;
}
.arrow::before,
.arrow::after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 20vw solid #FFF;  /* 好みで高さ色を変えてください */ 
}
.arrow::before{
    left: 0;
    border-right: 50vw solid transparent;
}
.arrow::after{
    right: 0;
    border-left: 50vw solid transparent;
}
.san_box .san_in {
  text-align: center;
  padding: 17% 3% 5%;
	position: relative
}
	.PlaceImg01 img {
		width: 90%;
	}
	
p.ImgHouse {
    position: absolute;
    top: -7px;
    left: 50%;
    -webkit-transform: translate(-50%, -40px);
	width: 60px
}
ul.mizuPlace {
  width: 100%;
	margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.mizuPlace li {
	width: 49%;
	padding-top: 37%;
	border-radius: 10px;
	margin-bottom: 2%
}
	
.san_box .san_in .san_t_c {
  color: #ffffff;
  font-size: 3.4vw;
  margin: 0;
}
	
	.san_box .san_in .san_t_y {
		font-size: 4.5vw
	}
	
	ul.mizuPlace li p {
		font-size: 4vw
	}
	
}



/*===========================
商品リストセクション
===========================*/

.LineupWrap {
	text-align: center;
}
p.ballon01 {
	width: 90px;
	margin: 0 auto;
}
p.ballon01 img {
	width: 100%
}
.LineUpTitle {
	background: url("img/bg_water.jpg") no-repeat center center;
	background-size: cover;
	padding: 3% 0;
}
span.blueTextB {
	color: #1966D0;
	font-weight: bold;
	font-size: 150%;
	font-style: italic;
}
p.LineUpTitle01 {
	color: #fff;
	font-size: 30px;
	padding: 3% 0 1% 0;
}
p.LineUpTitle02 {
	color: #fff;
	font-size: 14px
}

.LineUpItemWrap {
	padding: 0;
	margin: 0;
}
.LineUpItemTitle {
	background: url("img/bg_polygon.png") no-repeat top right;
	background-size: 50%;
	padding: 4% 0;
	font-size: 20px;
	line-height: 1.5em;
    letter-spacing: 0.05em;
}

.arrow_white {
    position: relative;
    padding: 0;
}
.arrow_white::before {
    content: "";
    position: absolute;
    top: -56px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    border: 57px solid transparent;
    border-top: 56px solid #fff;
}




p.LineUpIemName {
	line-height: 1.3em;
	font-size: 16px;
}
.LineUpItem {
	background-color: #1966D0;
	padding: 4% 0;
}
ul.LineUpItemList01,
ul.LineUpItemList02 {
  width: 100%;
	margin: 3% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.LineUpItemList01 p,
ul.LineUpItemList02 p {
	padding-bottom: 20px;
}

ul.LineUpItemList01 img,
ul.LineUpItemList02 img {
	width: 90%
}
ul.LineUpItemList01 li,
ul.LineUpItemList02 li {
	background-color: #fff;
	padding: 2%;
	margin-bottom: 2%;
	box-sizing: border-box;
}
ul.LineUpItemList01 li {
	width: 32%;
}
	
ul.LineUpItemList02 li {
	width: 24%;
}


p.addCart {
  background-color: #1966D0;
  width: 100%;
    margin: 4% auto 0;
  color: #fff;
  padding: 12px 0 !important;
  font-size: 15px;
    box-sizing: border-box;
}
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を記述*/
p.LineUpIemName {
	line-height: 1.3em;
	font-size: 12px;
}
p.LineUpTitle01 {
	color: #fff;
	font-size: 30px;
	padding: 6% 0 1% 0;
}
}
@media screen and (max-width:599px) {
  /*スマホ用のcssを記述*/
	
p.LineUpTitle01 {
	color: #fff;
	font-size: 30px;
	padding: 6% 0 1% 0;
}
.arrow_white::before {
    content: "";
    position: absolute;
    top: -28px;
    left: 50%;
    -webkit-transform: translate(-50%, 0px);
    border: 25px solid transparent;
    border-top: 32px solid #fff;
}
.LineUpItem {
	background-color: #1966D0;
	padding: 4% 0;
	margin: 0 2%
}
	
	.LineUpItemTitle {
		padding: 9% 0;
		font-size: 5.5vw;
	}
p.LineUpIemName {
	line-height: 1.3em;
	font-size: 5vw;
}
	
ul.LineUpItemList01,
ul.LineUpItemList02 {
  width: 95%;
	margin: 3% auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

ul.LineUpItemList01 li,
ul.LineUpItemList02 li {
	padding: 5%;
}
ul.LineUpItemList01 li {
	width: 100%;
}
	
ul.LineUpItemList02 li {
	width: 100%;
}


.LineUpTitle {
	background: url("img/bg_water.jpg") no-repeat center center;
	background-size: cover;
	padding: 5% 0;
}
	
	
p.addCart {
    padding: 6% 0 !important;
    font-size: 4.5vw;
}
	
	
}