/**
 * Masthead
 * -------------------------------------------------------------------------- */
div.youtube{
  position: relative;padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top:5%;
}
div.youtube iframe.movie{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
div.message{
  margin:5% 0 10%;
}
div.message h3{
  font-size:36px;
}
@media screen and (max-width:768px) {
  div.message h3{
    font-size:30px;
  }
}

/* ポイント */
div.pointlist{
  background: url(/images/index/water_bg.jpg) no-repeat fixed;
  background-size: cover;
  padding:4%;
  width:100%;
  overflow:hidden;
  margin:5% 0 10%;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}
div.pointlist dl{
  background:rgba(255,255,255,0.9);
  float:left;
  width:23%;
  padding:3% 1%;
  margin:1%;
}
div.pointlist dl dt{
  margin-bottom:10px;
  font-size:18px;
}
div.pointlist dl dd.pointtext{
  margin-bottom:10px;
  font-size:14px;
  color: #666;
}
@media screen and (min-width:768px) and ( max-width:1280px) {
  div.pointlist dl{
    width: 46%;
    padding:2%;
    margin:2%;
  }
  div.pointlist dl dd.pointimg img{
    width: 60%;
  }
}
@media screen and (max-width:768px) {
  div.pointlist dl{
    width: 91%;
    padding:5%;
    margin:3%;
  }
  div.pointlist dl dd.pointimg img{
    width: 60%;
  }
}

/* 商品情報 */
ul.itemlist{
  margin-top:5%;
  width:100%;
  overflow:hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}
ul.itemlist li.items{
  width:calc(48% - 2px);
  border:1px solid #ccc;
  padding:4%;
  margin-right:4%;
  float:left;
  list-style:none;
}
ul.itemlist li.items:last-child{
  margin-right:0;
}
ul.itemlist li.items dl dt{
  margin-bottom: 10px;
}
ul.itemlist li.items dl dd{
  color: #666;
}
ul.itemlist li.items dl dd img{
  margin: 2% 0;
}
ul.itemlist li ul.buylist{
  margin-top:30px;
}
ul.itemlist li ul.buylist li{
  list-style:none;
  margin-bottom:10px;
}
ul.itemlist li ul.buylist li a.button {
  width: 100%;
  display: inline-block;
	position: relative;
	z-index: 2;
  padding: 1px;
  font-size: 14px;
	background-color: #fff;
	border: 1px solid #333;
	color: #333;
	line-height: 48px;
	overflow: hidden;
  text-decoration: none;
  outline: none;
}
ul.itemlist li ul.buylist li a.button::before,
ul.itemlist li ul.buylist li a.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
ul.itemlist li ul.buylist li a.button,
ul.itemlist li ul.buylist li a.button::before,
ul.itemlist li ul.buylist li a.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
ul.itemlist li ul.buylist li a.button:hover {
	color: #fff;
}
ul.itemlist li ul.buylist li a.button::after {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transform: scale(.8);
	transform: scale(.8);
}
ul.itemlist li ul.buylist li a.button:hover::after {
	background: #333;
	-webkit-transform: scale(1);
	transform: scale(1);
}
@media screen and (max-width:768px) {
  ul.itemlist li.items{
    width:calc(100% - 2px);
    margin-right: 0;
    padding: 10%;
    margin-bottom: 10%;
  }
  ul.itemlist li.items dl dd{
    font-size: 14px;
  }
}


/* Howto */
ul.howtolist{
  margin-top:5%;
  width:100%;
  overflow:hidden;
}
ul.howtolist li{
  width:calc(48% - 2px);
  padding:4%;
  margin-right:4%;
  float:left;
  list-style:none;
}
ul.howtolist li:last-child{
  margin-right: 0;
}
ul.howtolist li dl{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}
ul.howtolist li dl dd{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top:5%;
}
ul.howtolist li dl dd .howtomovie{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width:768px) {
  ul.howtolist li{
    width:calc(100% - 2px);
    margin-right: 0;
    padding: 10%;
    margin-bottom: 10%;
  }
  ul.howtolist li dl dd{
    font-size: 14px;
  }
}


ul#instafeed{
  overflow: hidden;
}
ul#instafeed li{
  list-style: none;
  float:left;
  border-top: 0;
}
ul#instafeed li a{
  border-top: 0;
}

p.more a.mbutton{
  display: block;
  border: 1px solid #333;
  color: #333;
	line-height: 48px;
  background: #fcfcfc;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Japanese", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, Meiryo, sans-serif;
}



div.contact{
  border-top: 1px solid #333;
  padding: 5% 0 10%;
}
div.contact ul li{
  list-style: none;
  display: inline-block;
  margin: 2%;
}