@charset "utf-8";
/*nav*/
.sp_navbtn {
  z-index: 10;
  display: none;
  position: absolute;
  top: 0;
  right: 2%;
  bottom: 0;
  border-left: 1px solid #ddd;
  margin: auto;
  color: #333;
  width: 55px; /* common */
  height: 55px; /* common */
  line-height: 46px; /* common */
}
/* メニューボタン */
.sp_navbtn:before {
  content: "\f0c9";
  font-family: FontAwesome;
  display: block;
  position: absolute;
  top: 18px;
  right: 15px;
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* メニューボタン active */
.sp_navbtn.menuOpen {
  background: #598AC3;
  color: #fff;
}
@media screen and (max-width: 1120px) {
	
/* header
------------------------------------------------------------ */
  /* nav */
  .sp_navbtn {
    display: inline-block;
  }
  #nav {
    display: none;
    float: none;
    width: 100%;
    padding-top: 0;
    position: absolute;
    top: 100%; /* 開閉メニュー開始位置 */
    left: 0;
    z-index: 100;
  }
  #nav ul li {
    display: block;
    background: #FFF;
    margin-left: auto;
  }
  #nav ul li a, #nav ul li span {
    padding: 0 15px;
    text-align: left;
    font-size: 13px;
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px;
    -webkit-tap-highlight-color: transparent;
    background: #FFF;
  }
  #nav ul li a:hover {
    background-color: #598AC3;
  }
  #nav > ul > li > ul {
    display: none;
    position: static;
    width: 100%;
    height: auto;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
  }
  #nav > ul > li:hover > ul {
    height: auto;
  }
  #nav ul li ul li a {
    padding-left: 40px;
  }
}
/*==========================================================
      Target Devices # Tablet MobilePC #
============================================================ */
@media screen and (max-width: 1023px) {
 /*------------------------------------------------------------
     common
------------------------------------------------------------ */
/* banner */
	#bannerShop a {
		padding: 18px 20px 18px 30px;
	}
	#bannerShop a img {
		width: 20px;
	}

/* footer
------------------------------------------------------------ */
#footer .footer-nav .container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
	}
	#footer .footer-nav .sitemap-box {
		width: 100% !important;
		max-width: 250px;
		padding: 0 15px !important;
		border-left: none !important;
		margin: auto;
	}
	#footer .footer-nav .half ul {
		float: none;
		width: 100%;
	}
	#footer .footer-info .footer-logo, #footer .footer-info small {
		float: none;
		text-align: center;
	}
	#footer .footer-info .footer-box {
		float: none;
		margin-top: 10px;
		text-align: center;
	}
	#footer .footer-info .footer-box dl {
		float: none;
		display: inline-block;
		vertical-align: top;
		margin-top: 10px;
	}
	#footer .footer-info small {
		width: 100%;
	}
/*------------------------------------------------------------
     kasou
------------------------------------------------------------ */
/* hydro tablet
------------------------------------------------------------ */
}
/*==========================================================
      Target Devices # Smart Phone and Tablet #
============================================================ */
@media screen and (max-width: 767px) {
/*------------------------------------------------------------
     common
------------------------------------------------------------ */
	.h2_grad {
		text-align: left;
		font-size: 30px;
		font-size: 3.0rem;
	}
/* banner */
	#bannerShop a {
		padding: 10px 10px 10px 20px;
	}
#bannerShop a img {
	width: 15px;
}
	/* 定期購入ボタン */
	.offer_btn a {
		height: 70px;
		padding: 15px 45px 15px 35px;
		font-size: 20px;
	}
	.offer_btn a .icon {
		width: 25px;
		height: 70px;
	}
	.offer_btn a .icon::before {
		height: 70px;
		border-left-width: 15px;
		border-top-width: 35px;
		border-bottom-width: 35px;
	}
	.offer_btn a .icon img {
		width: 27px;
		max-width: inherit;
		left: 5px;
	}
	.offer_btn a::before, .offer_btn a::after {
		right: 10px;
	}
	.offer_btn a::before {
		width: 30px;
		height: 30px;
	}
	.offer_btn a::after {
		height: 24px;
		border-left-width: 22px;
		border-top-width: 12px;
		border-bottom-width: 12px;
	}
	.offer_btn a .bottle {
		display: none;
	}
/* header
------------------------------------------------------------ */
/* footer
------------------------------------------------------------ */
	.footer-items, .footer-items .footer-contact-box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
		text-align: center;
	}
	.footer-logo-copy {
  -webkit-box-ordinal-group: 1;
             -ms-flex-order: 1;
                      order: 1;
	}
	.footer-items .footer-contact-box .footer-tel {
		margin-bottom: 20px;
	}
	.footer-items .footer-contact-box .footer-tel dt {
		margin-bottom: 10px;
	}
	.footer-items .footer-contact-box dl dd a {
		margin: auto;
	}
	.footer-logo {
		width: 100%;
	}
/*------------------------------------------------------------
     kasou
------------------------------------------------------------ */
/* hydro tablet
------------------------------------------------------------ */
	.btn {
		margin-top: 50px;
	}
}
/*==========================================================
      Target Devices # Smart Phone Only #
============================================================ */
@media screen and (max-width: 479px) {
	#header.egg_header {
		padding: 8px 0;
	}
	#header.egg_header .logo {
		font-size: 16px;
		font-size: 1.6rem;
	}
	.btns a {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	.offer_btn a {
		padding-top: 20px;
		font-size: 14px;
	}
	.tydro-egg .offer_btn {
		margin-top: 50px;
	}
}