@charset "utf-8";

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

@import "reset.css";
@import "base_sp_min.css";
@import "rpst_reset_smp.css";

/*******************

 LP style

********************/

/*-------------------------------------------
 footer
-----------------------------------------------*/
.footer-link {
  text-align: center;
  margin-top: 8%;
  margin-bottom: 1em;
}

.footer-link li {
  font-size: .95rem;
  margin-bottom: .4em;
}

.footer-link a {
  color: #101010;
}

#copy {
  text-align: center;
  font-size: .75em;
  color: #fff;
  background-color: #fb7172;
  box-sizing: border-box;
  padding: .5em;
}



/*-------------------------------------------
追加CSS
-----------------------------------------------*/

div#lpshoppingcolumn {
  width: 95%;
}

.w120 {
  width: 40%;
}

.products_dt td {
  width: 87%;
}

#lpshoppingcolumn input[type=checkbox]+label {
  font-size: 16px;
}

#lpshoppingcolumn input[type=checkbox]+label {
  font-size: 16px !important;
}

#lpshoppingcolumn .register_btn {
  width: 66% !important;
}

#lpshoppingcolumn form .custom-select.w30 {
  width: 50%;
}

#lpshoppingcolumn h3.pdt20 {
  font-size: 24px;
}

#lpshoppingcolumn img.lp_submit_area {
  width: 80%;
}

#lpshoppingcolumn form .custom-select select {
  font-size: 20px !important;
}

#payment_area table td {
  width: 100%;
  float: left;
}

#payment_area table img {
  width: 70%;
}

#footer_inner {
  width: 100% !important;
}

/*-------------------------------------------
クロスアップ追加CSS
-----------------------------------------------*/
div#header {
  display: none;
}

div#g_navi {
  display: none;
}

.shopping_inner {
  display: none;
}

.sp_btn {
  display: none;
}

#pagetop {
  width: 94% !important;
}

/*-------------------------------------------
注意書き用追加CSS
-----------------------------------------------*/
.caution {
  /*position: relative;*/
}

.caution_text {
  /*position: absolute;*/
  text-align: justify;
  top: 0;
  left: 0;
  font-size: 12pt;
  line-height: 1.5;
  padding: 3%;
  /* margin: 4% 0%;
  border-radius: 20px;
  background-color: #f5e7e6; */
}

/*@media (max-width: 767px) {

  .caution_text {
    font-size: 0.8em;
    line-height: 1;
  }
}*/


/*-------------------------------------------
基本_CSS
-----------------------------------------------*/

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.center {
  left: 0;
  right: 0;
  margin: 0 auto;
}


/*-------------------------------------------
CTA_CSS
-----------------------------------------------*/

.cta_btn {
  margin: auto;
  margin-bottom: 4%;
  margin-top: 6%;
  width: 93%;
}

.cta_txt {
  margin: auto;
  margin-bottom: 4%;
  width: 85%;
}

.anim-box.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}

@keyframes poyopoyo {

  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }

  50%,
  70% {
    transform: scale(0.95);
  }
}


/*-------------------------------------------
Content01_CSS
-----------------------------------------------*/

.fv_video {
  width: 100%;
}

.zaiko {
  width: 90%;
  margin: 2% auto;
}

.cnt01_caution {
  width: 95%;
  margin: 4% auto;
}

.content01.relative {
  width: 100%;
}

.video_top {
  top: 16%;
  width: 81%;
}

.video_ba {
  top: 84.5%;
  width: 83%;
}

/*-------------------------------------------
Content02_CSS
-----------------------------------------------*/

.content02 {
  margin-top: -6%;
}

/*-------------------------------------------
Content03_CSS
-----------------------------------------------*/

/*-------------------------------------------
Content04_CSS
-----------------------------------------------*/

.cnt04_01 {
  position: relative;
  z-index: 2;
  margin-top: -8%;
}

.cnt04_02 {
  position: relative;
  z-index: 1;
  margin-top: -21%;
}

/*-------------------------------------------
Content05_CSS
-----------------------------------------------*/

/*-------------------------------------------
Content06_CSS
-----------------------------------------------*/

/*-------------------------------------------
Content07_CSS
-----------------------------------------------*/

.video_coffee {
  top: 41.45%;
  width: 79.9%;
}

/*-------------------------------------------
Content08_CSS
-----------------------------------------------*/

.video_cnt08 {
  top: 36.5%;
  width: 81%;
}

/*-------------------------------------------
Content09_CSS
-----------------------------------------------*/

.qa {
  margin-top: -9%;
}





/* SNSスライダー */

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}

.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}

.scroll-infinity__list--left_01 {
  animation: infinity-scroll-left 25s infinite linear 0.5s both;
}

.scroll-infinity__list--left_02 {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}

.scroll-infinity__item {
  width: calc(42rem / 4);
  /* padding: 0% 1%; */
}

.scroll-infinity__item>img {
  width: 100%;
}

.scroll-infinity {
  top: 15.27%;
  max-width: 750px;
  width: 100%;
}

/* SNSスライダーここまで */

.cta_btn.anim-box.poyopoyo.absolute {
  top: 85.5%;
  width: 97%;
  right: 0;
  left: 0;
}



/*-------------------------
Q&Aアコーディオン
-------------------------*/


/* 必須 */
.accordion-content {
  display: none;
}

/* 装飾用 */

.accordion-header {
  background: linear-gradient(0deg, #aca8e0, #525589);
  padding: 4.5% 3%;
  margin: 12% 0 0;
  transition: background .3s ease;
  cursor: pointer;
  position: relative;
  border-radius: 5px;
  color: white;
}

.accordion-header::before,
.accordion-header::after {
  position: absolute;
  content: '';
  top: 1px;
  right: 16px;
  bottom: 0;
  width: 3%;
  height: 3%;
  margin: auto;
  background: #ffffff;
}

.accordion-header::after {
  transform: rotate(-90deg);
  transition: transform 0.3s;
}

.accordion-header.active::after {
  transform: rotate(0deg);
}

.accordion-content {
  background-color: #f6f2fc;
  padding: 3%;
  border-radius: 0 0 5px 5px;
}

.accordion-header span {
  padding-left: 4%;
  position: relative;
  font-size: 1.01rem;
  letter-spacing: normal;
}

.accordion-header span::before {
  position: absolute;
  content: "Q";
  top: auto;
  left: -1%;
  color: #ffffff;
  font-size: 1.1rem;
}

.accordion-content span {
  font-size: 0.9rem;
  letter-spacing: normal;
}

/* .accordion-content span::before{
  position: absolute;
  content:"A";
  top: auto;
  left: 0;
  color: #151E2F;
  font-size: 110%;
} */

.accordion {
  margin: -17% 5% 12%;
  font-family: serif;
}

.qa_img {
  width: 90%;
  margin: 3% auto;
}


.caution {
  padding: 4%;
  margin: 3%;
  font-size: 12pt;
  border: 1px solid #b7b7b7;
  border-radius: 10px;
  line-height: 1.8;
  text-align: justify;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}