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

/* header
========================================================================== */
header {
  margin: 0 0 0;
  text-align: center;
  position: relative;
  z-index: 1;
}

header h1 {
  padding: 0 0;
  line-height: 0;
  position: relative;
}

header .btn {
  margin: 0 0 0;
  line-height: 0;
  position: absolute;
  bottom: 3vw;
  left: 50%;
  margin-left: -45%;
  width: 90%;
}

header .btn a {
  display: inline-block;
  line-height: 0;
}

/* .intestinal
========================================================================== */
.intestinal {
  margin: 0 0 0;
  padding: 8vw 0 0 0;
}

.intestinal h2 {
  margin: 0 0 0;
  padding: 0;
  line-height: 0;
  text-align: center;
}

/* increase
========================================================================== */
.increase {
  margin: 6vw 0 0;
}

.increase .bottom {
  margin: 0 0 0;
}

/* age
========================================================================== */
.age {
  margin: 6vw 0 0;
}

.age h2 {
  margin: 0 0 0;
  position: relative;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.65);
}

.age .bg_block {
  margin: 0 0 0;
  padding: 0 0 6vw;
  background: url(/contents/images/images_sp/age/bg.jpg) repeat center center;
}

.age .bg_block h3 {
  padding: 8vw 10vw 0;
}

.age .bg_block ul {
  margin: 8vw 1vw 0;
}

.age .bg_block ul li {
  margin: 3vw 0 0;
  padding: 3vw;
  background: url(/contents/images/images_sp/age/box_bg.jpg) repeat center top;
  background-size: 100%;
  font-size: 0;
}

.age .bg_block ul li:nth-child(1) {
  margin: 0 0 0;
}

.age .bg_block ul li h4 {
  margin: 0 0 0;
  line-height: 0;
}

.age .bg_block ul li .box {
  margin: 3vw 0 0;
  font-size: 0;
}

.age .bg_block ul li .photo {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 30%;
}

.age .bg_block ul li p {
  padding: 0 0 0 3vw;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 70%;
  font-size: 4vw;
  line-height: 160%;
  color: #fff;
}

/* revolution
========================================================================== */
.revolution {
  margin: 6vw 0 0;
  position: relative;
}

.revolution .bottom {
  margin: 6vw 0 0;
  position: relative;
}

.revolution .bottom .arrow {
  position: absolute;
  top: -15vw;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  line-height: 0;
  animation: arrow 3s infinite;
}

@keyframes arrow {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.revolution .bottom .recognized {
  margin: 0 3vw;
  position: absolute;
  bottom: 8vw;
}

/* step
========================================================================== */
.step {
  margin: 0 0 0;
}

.step h2 {
  margin: -4vw 0 0;
}

.step ul {
  margin: 0 0 0;
}

.step ul li {
  margin: 0 0 0;
  line-height: 0;
  text-align: center;
}

/* grain
========================================================================== */
.grain {
  margin: 6vw 0 0;
}

.grain .main {
  padding: 0 0 0;
  line-height: 0;
  position: relative;
}

.grain .main .recognized {
  margin: 0 3vw;
  position: absolute;
  bottom: 8vw;
}

/* instagram
========================================================================== */
.instagram {
  margin: 5vw 2vw 0;
  padding: 0 0 10vw;
  border-top: 1px dotted #ccc;
}

.instagram .top_block {
  padding: 6vw 0 0;
}

.instagram .top_block h2 {
  line-height: 0;
  text-align: center;
}

.instagram .top_block p {
  margin: 3vw 0 0;
  font-size: 4vw;
  line-height: 170%;
}

.instagram .top_block p .green_text {
  color: #0c3f17;
  font-weight: bold;
}

.instagram .insta_main {
  margin: 6vw 0 0;
  padding: 0 5vw;
  overflow-y: scroll;
  border: 3px solid #0c3f17;
  text-align: center;
  height: 100vw;
  -webkit-overflow-scrolling: touch;
}

/* voice
=========================================== */
.voice {
  margin: 0 0 20vw;
  padding: 0 0 60px;
  background: url(/contents/images/images_sp/grain/voice_bg.jpg) repeat left 5vw;
  position: relative;
}

.voice h2 {
  margin: -4vw 0 0;
  display: inline-block;
}

.voice ul {
  margin: -2vw 0 0;
  position: relative;
  z-index: 1;
}

.voice ul li {
  margin: 2vw 0 0;
  line-height: 0;
  text-align: center;
}

.voice .bottom {
  position: absolute;
  bottom: -17vw;
  left: 0;
  width: 100%;
}

/* regular
========================================================================== */
.regular {
  margin: 0 0 0;
}

.regular .main .quo_main {
  position: relative;
}

.regular .main .quo_main .quo {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 2vw;
  width: 96%;
}

.regular .quo_block {
  margin: 2vw auto 0;
  width: 96%;
}

.regular .main .quo_main .cashless {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 64vw;
  width: 96%;
}

.regular .cashless p {
  margin: 1vw 0 0;
  font-size: 3vw;
  line-height: 150%;
  text-align: right;
}

.regular .main .tel {
  position: relative;
}

.regular .main .tel a.tel01 {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 22vw;
}

.regular .main .tel a.tel02 {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 5vw;
}

/* recommended
=========================================== */
.recommended {
  margin: 0 0 0;
  padding: 0 0 5vw;
  background: url(/contents/images/images_sp/regular/bg.jpg) repeat center top;
  background-size: 100%;
}

.recommended ul {
  margin: 5vw 0 0;
  text-align: center;
  font-size: 0;
}

.recommended ul li {
  padding: 0 1vw;
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 50%;
  line-height: 0;
}

.recommended ul li:nth-child(3) {
  margin: 3vw 0 0;
}

.recommended ul li:nth-child(4) {
  margin: 3vw 0 0;
  /*padding: 4.5vw 3vw;*/
  padding: 10.5vw 3vw;
}

.recommended .price {
  margin: 0 1vw 0;
  text-align: center;
  line-height: 0;
}

.regular .bottom {
  position: relative;
}

.regular .bottom a {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 6vw;
}

/* contact
========================================================================== */
.contact {
  margin: 6vw 0 10vw;
}

.contact .btn {
  margin: auto;
  text-align: center;
  line-height: 0;
  width: 95%;
}

.contact .btn a {
  display: inline-block;
}

.contact h2 {
  margin: 0 0 3vw;
}

#content {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

#content iframe#egg_form {
  width: 100%;
  min-height: 360vw;
}

.order-footer .button-next .btn {
  padding: 0 !important;
  background-color: transparent !important;
}

#efo_sign_payment0 input,
#efo_sign_fixed_purchase0 input,
#ctl00_ContentPlaceHolder1_rCartList_ctl00_rblOwnerSex input {
  vertical-align: top !important;
}

/* company
   ========================================================================== */
/* title_arrow */
.title_arrow {
  margin: 0 0 11vw;
  background: #0e4017;
  padding: 16px 10px;
  position: relative;
  text-align: enter;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
  font-size: 5vw;
  line-height: 150%;
  color: #fff;
}

.title_arrow img {
  width: 95%;
}

.title_arrow:before {
  position: absolute;
  left: 50%;
  bottom: -25px;
  margin-left: -50px;
  width: 100px;
  height: 25px;
  content: "";
  background: url(/contents/images/images_sp/common/title_arrow.png) no-repeat center
    bottom;
  background-size: 100%;
}

.company_wrap {
  padding: 0 0 2vw;
}

.company_wrap table {
  width: 95%;
  box-sizing: border-box;
  margin: 0 auto 20px;
}

.company_wrap table th.title {
  font-weight: bold;
  text-align: center;
}

.company_wrap th,
.company_wrap td {
  border: 1px solid #dddddd;
  width: 100%;
  display: block;
  font-weight: normal;
  border-bottom: none;
  padding: 10px 5px;
  box-sizing: border-box;
}

.company_wrap table th {
  background: #efefef;
}

.company_wrap table td {
  vertical-align: middle;
  display: block;
}

.company_wrap tr:last-child td {
  border-bottom: 1px solid #dddddd;
}

.company_wrap table td a {
  color: #0099ff;
}

.company_wrap table td .photo {
  margin: 3vw 0 0;
  line-height: 0;
}

/* privacy_wrap
   ========================================================================== */
.privacy_wrap {
  padding: 0 0 2vw;
}

.privacy_wrap .box {
  width: 95%;
  box-sizing: border-box;
  margin: 0 auto 15px;
}

.privacy_wrap .box h3 {
  font-size: 16px;
  margin: 0 0 5px;
  line-height: 150%;
  text-align: left;
}

.privacy_wrap .box .text {
  font-size: 15px;
  padding: 0 0 0 10px;
  display: block;
}

.privacy_wrap .box .text span {
  font-size: 15px;
  padding: 0 0 0 16px;
  display: block;
  position: relative;
  margin: 2px 0;
}

.privacy_wrap .box .text span:before {
  content: "・";
  position: absolute;
  left: 0;
  font-weight: bold;
}

.privacy_wrap .box .text span.callma_tel {
  padding: 0 0 0 44px;
}

.privacy_wrap .box .text span.callma_tel:before {
  content: "TEL : ";
  position: absolute;
  left: 0;
  font-weight: normal;
}

/* footer
   ========================================================================== */
footer {
  margin: 0;
  padding: 8vw 0 0 !important;
  background: #fff !important;
}

footer .footer_top {
  position: relative;
  margin: 0 auto;
  background: #0e4017;
  box-sizing: border-box;
}

footer .footer_top .footer_logo {
  position: absolute;
  left: 2.5%;
  top: -7vw;
  line-height: 0;
  width: 25%;
}

footer .footer_top .footer_logo a {
  display: block;
  margin: 0;
}

footer ul {
  margin: 0 0 0;
  padding: 3vw 0 3vw 33%;
}

footer ul li {
  margin: 0 0 0;
  line-height: 150%;
}

footer ul li a {
  font-size: 15px;
  line-height: 150%;
  display: inline-block;
  margin: 0 0 0;
  background-size: auto;
  border: none;
  padding: 0;
  color: #fff;
  width: auto;
  text-align: left;
  background: none;
  font-family: "icon", "ヒラギノ角ゴ ProN W3", "helvetica", "arial", "verdana",
    "sans-serif";
}

footer ul li a span {
  color: #fff;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  padding: 0 10px;
  font-size: 14px;
  line-height: 150%;
  font-family: "icon", "ヒラギノ角ゴ ProN W3", "helvetica", "arial", "verdana",
    "sans-serif";
  display: inline-block;
}

footer address {
  font-size: 2vw;
  padding: 2vw 0 3vw 33%;
  color: #333;
  display: block;
  background: #fff;
}

/* year_block
   ========================================================================== */
.year_block {
  line-height: 0;
  position: relative;
}

.year_block .period {
  line-height: 0;
  position: absolute;
  top: 35vw;
  right: 5vw;
  width: 67%;
}

.year_block .btn {
  display: inline-block;
  line-height: 0;
  position: absolute;
  margin: auto;
  bottom: 7vw;
  right: 0;
  left: 0;
  width: 65%;
}

.year_block .btn a {
  display: inline-block;
  line-height: 0;
}

/* deferred_payment
   ========================================================================== */
.deferred_payment {
  margin: 20px 0 0;
}

.deferred_payment .img_banner {
  line-height: 0;
}

.deferred_payment .img_banner a {
  display: inline-block;
  line-height: 0;
}

.deferred_payment p {
  margin: 25px 0 0;
  letter-spacing: 0.1em;
  line-height: 170% !important;
}

.notice {
  padding: 2vw 1vw;
  border: 2px solid #0e4017;
  font-size: 3.6vw;
  line-height: 1.2;
  color: #d80000;
  font-weight: bold;
  text-align: center;
}

.banner {
  width: 96%;
  margin: 8vw auto 0 auto;
  text-align: center;
}