@charset 'UTF-8';

/* ===================================================================
CSS information
 file name  :  style.css
 style info :  Regain健康訴求SP style CSS
=================================================================== */
/* ---------------------------------------
header, main, footer
--------------------------------------- */
header,
main,
footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
}

* {
  box-sizing: border-box;
}

main {
  overflow-x: hidden;
}

/* ---------------------------------------
count down
--------------------------------------- */
/*本日の販売終了のカウントダウンバナー*/
/* #countdown {
  line-height: 0;
  position: relative;
  display: block;
  width: 100%;
  max-width: 750px;
  height: auto;
  margin: 0 auto;
}

#countdown.fixed {
  position: fixed;
  z-index: 1;
  top: 0;
}

#countdown input {
  width: 100%;
  border-radius: 0;
  -webkit-appearance: none;
}

#countdown ul {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 7.5%;
  margin-bottom: 3.3%;
  list-style: none;
}

#countdown ul li {
  width: 100%;
  height: auto;
  margin-left: 1%;
}

#countdown ul.hour {
  right: 48.8%;
}

#countdown ul.minute {
  right: 33%;
}

#countdown ul.second {
  right: 20.6%;
}

@media only screen and (max-width: 736px) {
  #countdown ul.hour {
    right: 48%;
  }

  #countdown ul.minute {
    right: 32.3%;
  }

  #countdown ul.second {
    right: 19.8%;
  }
} */

/* ---------------------------------------
MV
--------------------------------------- */
.mv {
  position: relative;
}

.mv span {
  position: absolute;
  top: -2.5%;
}

/* ---------------------------------------
コンバージョンエリア
--------------------------------------- */
.btnArea {
  position: relative;
}

/* Android対策 */
.cv {
  background: linear-gradient(90deg, #0097cf 0%, #fff 8%, #fff 92%, #0097cf 100%);
}

.cv h2.anata {
  position: relative;
}

.cv h2.anata span {
  position: absolute;
  top: -24%;
}

@media screen and (min-width: 750px) {
  .cv h2.anata span {
    top: -46px;
  }
}


.cv .btnArea .btn {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(724 / 750 * 100vw);
  max-width: 724px;
  -webkit-animation: move_btn 2s ease-in infinite;
  animation: move_btn 2s ease-in infinite;
}
/* ------ move_btn_anime ------ */
@keyframes move_btn {
  20%, 53%, 80%, from, to {
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  }

  40%,  43% {
    transform: translate3d(0, -10px, 0);
    animation-timing-function: cubic-bezier(.755, .050, .855, .060);
  }

  70% {
    transform: translate3d(0, -4px, 0);
    animation-timing-function: cubic-bezier(.755, .050, .855, .060);
  }

  90% {
    transform: translate3d(0, 0, 0);
  }
}
/*モーダル*/
.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 9;
}
.modal__bg{
  position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
  box-sizing: border-box;
}
.modal__content{
  background: #fff;
	text-align: left;
	padding: 14px 0 14px 30px;
  width: 85%;
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 8;
  font-size: calc(24/750 * 100vw);
  transform: translate(-50%,-50%);
}
.modal_scroll{
  max-height: 500px;
  overflow-y: auto;
  padding: 0 30px 0 0;
}
.modal_scroll span{
  display: inline-block;
  font-size: calc(20/750 * 100vw);
  padding-left:1em;
	text-indent:-1em;
}
.js-modal-open{
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(272/750 * 100vw);
  max-width: 272px;
  cursor: pointer;
}
.modal-open-cv2{
  bottom: 14%;
}
.js-modal-open02{
  top: 40.5%;
}
.modal-close{
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  background: #dc143c;
  border-radius: 50%;
  top: -5%;
  right: -5%;
  z-index: 9;
  cursor: pointer;
}
.modal-close::before, .modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 20px; /* 棒の高さ */
  background: #fff; /* バツ印の色 */
}
.modal-close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}
.modal-close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}
.modal__content p{
  margin: 16px auto;
}
p.modal-close{
  margin: 0;
}
@media screen and (min-width: 750px) {
  /*モーダル内のコンテンツの指定*/
  .modal__content{
    font-size: 24px;
    padding: 0 0 14px 50px;
    width: 60%;
  }
  .modal_scroll{
    padding: 30px 30px 30px 0;
    max-height: 800px;
  }
  .modal_scroll span{
    font-size: 20px;
  }
}
/* ---------------------------------------
メディア
--------------------------------------- */
.magazine {
  background: url('../img/magazine_bg.png') top center repeat-y;
  background-size: contain;
}

/* ---------------------------------------
評価
--------------------------------------- */
.kakutoku {
  margin-top: max(calc(-25/750 * 100vw), -25px);
}

/* ---------------------------------------
トリプルフォース3つのポイント
--------------------------------------- */
.point_box {
  position: relative;
}

.point_box .gif01 {
  position: absolute;
  width: calc(640/750*100vw);
  max-width: 640px;
  bottom: calc(190/750*100vw);
  left: 0;
  right: 0;
  margin: auto;
}

.point_box .gif02 {
  position: absolute;
  width: calc(640/750*100vw);
  max-width: 640px;
  bottom: calc(290/750*100vw);
  left: 0;
  right: 0;
  margin: auto;
}

@media screen and (min-width: 750px) {
  .point_box .gif01 {
    width: 640px;
    bottom: 190px;
  }

  .point_box .gif02 {
    width: calc(640/750*100vw);
    bottom: 290px;
  }
}

/* ---------------------------------------
3つのこだわり
--------------------------------------- */
/* .kodawari {
  margin-bottom: 60px;
}

@media screen and (min-width: 750px) {
  .kodawari {
    margin-bottom: calc(60 / 750 * 100vw);
  }
} */

/* ---------------------------------------
糖化に着目1
--------------------------------------- */
.touka1 h2 {
  position: relative;
  width: 100%;
  margin-bottom: calc(100/750*100vw);
}

.touka1 h2 span {
  position: absolute;
  bottom: calc(-120/750*100vw);
  left: 0;
  width: 100%;
  text-align: center;
}

@media screen and (min-width: 750px) {
  .touka1 h2 span {
    bottom: calc(-90/750*100vw);
  }
}

/* ---------------------------------------
糖化に着目2
--------------------------------------- */
/* .touka2 h2 {
  padding-top: 20%;
} */

/* ---------------------------------------
獲得
--------------------------------------- */
.kakutoku p {
  position: relative;
}

.kakutoku span.sarani {
  position: absolute;
  top: -6.5%;
}

/* ---------------------------------------
注釈
--------------------------------------- */
/* .chushaku {
  padding: 0 0 calc(90/750*100vw);
}

@media screen and (min-width: 750px) {
  .chushaku {
    padding: 0 0 90px;
  }
} */

/* ---------------------------------------
フッター
--------------------------------------- */
footer {
  padding-bottom: 10px;
}

footer h1 {
  margin-bottom: 10px;
}

footer .copyright {
  font-size: 1.0rem;
  line-height: 2.4;
  text-align: center;
}

footer .copyright a {
  text-decoration: underline;
  text-decoration: none;
}