@charset 'UTF-8';

/* ===================================================================
CSS information
 file name  :  style.css
 style info :  Regain免疫ケア青汁 SP style CSS
=================================================================== */
/* ---------------------------------------
header, main, footer, common
--------------------------------------- */
header,
main,
footer {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-color: #fff;
}

* {
  box-sizing: border-box;
}

/* main {
  overflow-x: hidden;
} */



@media screen and (min-width: 750px) {

}

/* ---------------------------------------
画像間のライン対策
--------------------------------------- */
/* ネガティブマージンで重ねる */
.mb- {
  margin-bottom: calc(-2 / 750 * 100vw);
}

/* 背景色を入れる */
.appearance {
  background-color: #d5d9dd;
}
.intro {
  background: linear-gradient(to right, #f2f4f7, #fff 25%, #f2f4f7 30%, #f2f4f7);
}
.plasma {
  background-color: #e0e2e6;
}
.obsession {
  background-color: #f4f6e5;
}
.voice {
  background-color: #f7f5f0;
}

/* ---------------------------------------
MV
--------------------------------------- */
.mv {
  position: relative;
}
.mv .mv_cv {
  width: 100%;
  height: calc(274 / 750 * 100vw);
  position: relative;
  background: none;
  padding-top: 0;
}
.mv .mv_cv form {
  top: calc(33 / 750 * 100vw);
}
.mv .mv_cv .btn_box .balloon {
  top: 1px;
  left: calc(4/750*100vw);
}
@media screen and (min-width: 750px) {
  .mv .mv_cv {
    height: 274px;
    padding-top: 15px;
  }
  .mv .mv_cv form {
    top: 18px;
  }
  .mv .mv_cv .btn_box .balloon {
    top: -14px;
    left: calc(4/750*100vw);
  }
}

/*モーダル*/
.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);
}
.js-modal-open{
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  width: calc(271/750 * 100vw);
  max-width: 271px;
  cursor: pointer;
  text-align: center;
}
.js-modal-open02{
  top: 91.5%;
  width: calc(204/750 * 100vw);
  max-width: 204px;
}
.modal-close{
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  background: #da3b3e;
  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: min(calc(20/750 * 100vw), 20px);
  }
}
/* ---------------------------------------
コンバージョンエリア
--------------------------------------- */
.cv {
  background: url("../img/cv_bg.jpg") top center/cover no-repeat;
  padding-top: calc(54 / 750 * 100vw);
  padding-bottom: calc(28 / 750 * 100vw);
}
.cv h2 {
  width: calc(650 / 750 * 100vw);
  margin: 0 auto calc(46 / 750 * 100vw);
}
.cv h3 {
  width: calc(561 / 750 * 100vw);
  margin: calc(50 / 750 * 100vw) auto calc(36 / 750 * 100vw);
}
.btnArea {
  position: relative;
}
.btn_box {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  z-index: 1;
  animation: move_btn 2s ease infinite normal;
}
.btn_box .btn {
  width: calc(660/750*100vw);
  max-width: 660px;
}
.btn_box .balloon {
  position: absolute;
  top: 0;
  left: calc(4/750*100vw);
  width: calc(176/750*100vw);
  max-width: 176px;
  z-index: 2;
}
.cv form {
  width: calc(660/ 750 * 100vw);
  height: calc(150 / 750 * 100vw);
  position: absolute;
  top: calc(310 / 750 * 100vw);
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (min-width: 750px) {
  .cv {
    padding-top: 54px;
    padding-bottom: 28px;
  }
  .cv h2 {
    width: 650px;
    margin: 0 auto 46px;
  }
  .cv h3 {
    width: 561px;
    margin: 50px auto 36px;
  }
  .cv form {
    width: 660px;
    height: 150px;
    top: 310px;
  }
  .cv .btn_box form {
    left: 50%;
  }
  .btn_box .balloon {
    left: 5px;
  }
}

/* ボタンの光 */
.shine {
  position: absolute;
  width: calc(660 / 750 * 100vw);
  height: calc(150 / 750 * 100vw);
  border-radius: 100vh;
  overflow: hidden;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@media screen and (min-width: 750px) {
  .shine {
    width: 660px;
    height: 150px;
  }
  .btn_box .shine {
    width: 660px;
  }
}
.shine::before {
  content: "";
  width: 200%;
  height: 200%;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 45%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 55%, rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,rgba(255,255,255,1) 45%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 55%,rgba(255,255,255,0) 80%,rgba(255,255,255,0) 100%);
  position: absolute;
  top: -50%;
  left: -50%;
  z-index: 1;
  animation: shine 2s linear infinite;
}
/* ---------------------------------------
  Animation
--------------------------------------- */

/* ボタンの動き */
@keyframes move_btn {
  0% { left: 0; }
  50% { left: 0; }
  85% { left: 0; }
  90% { left: 6%; }
  95% { left: 0; }
  100% { left: 0; }
}

/* ボタンの光の動き */
@keyframes shine {
  from, 0% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
  20% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
    transform: translate3d( 100%, 0, 0) rotate(45deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translate3d( 100%, 0, 0) rotate(45deg);
    transform: translate3d( 100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
  to, 100% {
    -webkit-transform: translate3d( -100%, 0, 0) rotate(45deg);
    transform: translate3d( -100%, 0, 0) rotate(45deg);
    opacity: 0;
  }
}

.cv form .btn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100vh;
  box-shadow: 10px 15px 20px 0px rgba(0, 0, 0, .3);
  animation: move_btn 2s ease infinite normal;
}

/* slider */
.annotation_slider.slick-initialized.slick-slider.slick-dotted {
  width: 100%;
  margin-bottom: calc(110 / 750 * 100vw);
}
.annotation_slider .slide_item {
  width: calc(590 / 750 * 100vw);
  margin: 0 calc(20 / 750 * 100vw);
}
@media screen and (min-width: 750px) {
  .annotation_slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 110px;
  }
  .annotation_slider .slide_item {
    width: 590px;
    margin: 0 20px;
  }
}

/* slick-arrow */
.annotation_slider .slick-arrow {
  z-index: 1;
  width: calc(15 / 750 * 100vw);
  height: calc(29 / 750 * 100vw);
}
.annotation_slider .slick-prev {
  left: calc(52 / 750 * 100vw);
}
.annotation_slider .slick-next {
  right: calc(52 / 750 * 100vw);
}
.annotation_slider .slick-arrow:before {
  content:"";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
.annotation_slider .slick-prev:before {
  background: url("../img/btn_prev.svg") center/contain no-repeat;
}
.annotation_slider .slick-next:before {
  background: url("../img/btn_next.svg") center/contain no-repeat;
}
@media screen and (min-width: 750px) {
  .annotation_slider .slick-arrow {
    width: 15px;
    height: 29px;
  }
  .annotation_slider .slick-prev {
    left: 52px;
  }
  .annotation_slider .slick-next {
    right: 52px;
  }
}

/* .slick-dots */
.annotation_slider .slick-dots {
  bottom: calc(-80 / 750 * 100vw);
}
.annotation_slider .slick-dots li {
  width: 10px;
}
.annotation_slider .slick-dots li button:before {
  opacity: 1;
  color: #fff;
}
.annotation_slider .slick-dots li.slick-active button:before {
  color: #da3b3e;
}
@media screen and (min-width: 750px) {
  .annotation_slider .slick-dots {
    bottom: -80px;
  }
}

/* annotation_txt */
.annotation_txt {
  width: calc(667 / 750 * 100vw);
  margin: calc(30 / 750 * 100vw) auto 0;
}
@media screen and (min-width: 750px) {
  .annotation_txt {
    width: 667px;
    margin: 30px auto 0;
  }
}

/* ---------------------------------------
飲み方
--------------------------------------- */
.howto {
  padding-bottom: calc(130 / 750 * 100vw);
}
@media screen and (min-width: 750px) {
  .howto {
    padding-bottom: 130px;
  }
}
/* ---------------------------------------
よくあるご質問
--------------------------------------- */
.athlete {
  background-color: #f4f6e5;
  position: relative;
}
.athlete_text {
  position: absolute;
  bottom: calc(170/750 * 100vw);
  font-size: calc(16/750 * 100vw);
  right: calc(50/750 * 100vw);
}
.athlete .annotation_slider .slick-dots {
  bottom: calc(108/750 * 100vw);
}
.athlete .annotation_slider.slick-initialized.slick-slider.slick-dotted{
  margin-bottom: 0;
  padding-bottom: calc(220/750 * 100vw);
}
.athlete .annotation_slider .slick-prev:before {
  background: url("../img/btn_prev_02.svg") center/contain no-repeat;
}
.athlete .annotation_slider .slick-next:before {
  background: url("../img/btn_next_02.svg") center/contain no-repeat;
}
.athlete .annotation_slider .slick-dots li button:before {
  opacity: 1;
  color: #000;
}
.athlete .annotation_slider .slick-dots li.slick-active button:before {
  color: #da3b3e;
}
@media screen and (min-width: 750px) {
  .athlete .annotation_slider.slick-initialized.slick-slider.slick-dotted {
    margin-bottom: 0;
  padding-bottom: 217px;
  }
  .athlete .annotation_slider .slick-dots li button:before {
    font-size: 6px;
  }
  .athlete_text {
    bottom: 170px;
    font-size: 16px;
    right: 50px;
  }
  .athlete .annotation_slider .slick-dots {
    bottom: 115px;
  }
}
/* ---------------------------------------
よくあるご質問
--------------------------------------- */
.qa h2 {
  margin-bottom: calc(107 / 750 * 100vw);
}
.qa .qa-list {
  padding: 0 calc(40 / 750 * 100vw) 0 calc(50 / 750 * 100vw);
}
.qa .qa-list .qa-item {
  margin-bottom: calc(52 / 750 * 100vw);
}
.qa .qa-list .qa-item dt {
  margin-bottom: calc(45 / 750 * 100vw);
}
.qa .qa-list .qa-item dt .head-question {
  margin-bottom: calc(20 / 750 * 100vw);
}
.qa .qa-list .qa-item dt .head-title {
  position: relative;
}
.qa .qa-list .qa-item dt .head-title::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  content: "";
  width: calc(29 / 750 * 100vw);
  height: calc(16 / 750 * 100vw);
  background: url("../img/icon_question.svg") center/contain no-repeat;
  transition: all 0.3s;
}
.qa .qa-list .qa-item dt.open .head-title::after {
  transform: translateY(-50%) rotate(180deg);
}
.qa .qa-list .qa-item dd {
  display: none;
}
.qa .qa-list .qa-item dd p {
  font-size: 14px;
  line-height: 1.7;
  font-family: "Noto Sans JP";
}
.qa .qa-list .qa-item dd p.qa-annotation {
  font-size: 8px;
  line-height: 1.4;
  margin-top: calc(30 / 750 * 100vw);
}
@media screen and (min-width: 750px) {
  .qa h2 {
    margin-bottom: 107px;
  }
  .qa .qa-list {
    padding: 0 40px 0 50px;
  }
  .qa .qa-list .qa-item {
    margin-bottom: 52px;
  }
  .qa .qa-list .qa-item dt {
    margin-bottom: 45px;
  }
  .qa .qa-list .qa-item dt .head-question {
    margin-bottom: 20px;
  }
  .qa .qa-list .qa-item dt .head-title {
    cursor: pointer;
  }
  .qa .qa-list .qa-item dt .head-title::after {
    width: 29px;
    height: 16px;
  }
  .qa .qa-list .qa-item dd p.qa-annotation {
    margin-top: 30px;
  }
}

/* ---------------------------------------
注釈
--------------------------------------- */
.annotation {
  padding: calc(60 / 750 * 100vw) 0 calc(70 / 750 * 100vw);
}
@media screen and (min-width: 750px) {
  .annotation {
    padding: 60px 0 70px;
  }
}

/* ---------------------------------------
フッター
--------------------------------------- */
footer {
  padding-bottom: 10px;
}
footer h1 {
  margin-bottom: 10px;
}
footer h2 {
  padding: 0 calc(30 / 750 * 100vw) calc(68 / 750 * 100vw);
  border-bottom: #727171 solid 3px;
}
footer .regain_logo {
  width: calc(200 / 750 * 100vw);
  height: calc(68 / 750 * 100vw);
  margin: calc(44 / 750 * 100vw) auto  calc(10 / 750 * 100vw);
}
footer .copyright {
  font-size: 1.0rem;
  line-height: 2.4;
  text-align: center;
}
footer .copyright a {
  text-decoration: underline;
  color: #dc143c;
}
@media screen and (min-width: 750px) {
  footer h2 {
    padding: 0 30px 68px;
  }
  footer .regain_logo {
    width: 200px;
    height: 68px;
    margin: 44px auto 10px;
  }
}

.coupon {
  cursor: pointer;
  position: relative;
  height: calc(246/ 750 * 100vw);
}

.coupon img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.coupon .default {
  opacity: 1;
}

.coupon .copied {
  opacity: 0;
}

.coupon.active .default {
  opacity: 0 !important;
}

.coupon.active .copied {
  opacity: 1 !important;
}

#counter {
  color: #da3b3e;
  font-weight: 700;
  background-color: #f2f4f7;
  padding: calc(12 / 750 * 100vw);
  font-size: calc(38 / 750 * 100vw);
}

.counter {
  text-align: center;
}

.counter .counter-title {
  color: #fff;
  background-color: #2fb2af;
  font-weight: 700;
  padding: calc(20 / 750 * 100vw);
  font-size: calc(30 / 750 * 100vw);
}

.counter .counter-title span {
  display: block;
  font-size: calc(40 / 750 * 100vw);
}

.counter .counter-text {
  font-size: calc(24 / 750 * 100vw);
}

@media screen and (min-width: 750px) {
  .coupon {
    height: 246px;
  }

  .counter .counter-text {
    font-size: 18px;
  }

  .counter .counter-title {
    font-size: 24px;
    padding: 20px;
  }

  .counter .counter-title span {
    font-size: 40px;
  }

  #counter {
    font-size: 38px;
    padding: 12px;
  }
}