@charset "UTF-8";

body {
	min-width: auto;
}

main {
  background-image: url(../images/page_bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: 50% 20%;
}

section {
	position: relative;
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
	font-size: 0;
	text-align: center;
  overflow: hidden;
	z-index: 1;
}
.fv_pkg {
  position: absolute;
  bottom: 33%;
  width: 100%;
  text-align: center;
}

section.introduction {
  padding-bottom: 120px;
  background: url(../images/introduction_bg.png) 50% 50% / cover no-repeat;
}
.introduction_title {
  display: flex;
  margin-bottom: 80px;
  overflow: hidden;
  justify-content: center;
}
.introduction_title img {
  width: 617px;
  max-width: 617px;
}

.animation_inner {
  position: relative;
}
.animation_pkg {
  position: absolute;
  display: flex;
  top: 22.5%;
  left: 0;
  right: 0;
  justify-content: center;
}
.animation_pkg img {
  width: 659px;
  max-width: 659px;
  margin-right: 30px;
}
.animation_inner.inner2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.animation_mask {
  position: absolute;
  top: 25.3%;
  left: 0;
  width: 100%;
}
.animation_mask_txt {
  position: absolute;
  top: 2%;
  left: 0;
  width: 100%;
}
.animation_mask_txt img {
	width: 1922px;
	max-width: 1922px;
}
.animation_mask_txt .txt1 {
  margin-bottom: 64px;
}
.animation_mask_main {
	position: relative;
	z-index: 1;
}
.animation_point {
  position: absolute;
  top: 68%;
  left: 0;
  width: 100%;
  transition-delay: 1.5s;
  z-index: 4;
}
.animation_point_item {
  position: relative;
  max-width: 412px;
  margin: 0 auto;
  z-index: 4;
}
.animation_point_item.item1 .animation_face {
  position: absolute;
  top: -38px;
  right: -43px;
}
.animation_point_item.item2 .animation_face {
  position: absolute;
  top: -15px;
  left: -38px;
}
.animation_awa1 {
  position: absolute;
  top: 17%;
  right: 11%;
  z-index: 1;
}
.animation_awa2 {
  position: absolute;
  top: 17%;
  right: -7%;
  z-index: 1;
}
.animation_awa3 {
  position: absolute;
  top: 57%;
  right: -22%;
  z-index: 1;
}
.animation_awa4 {
  position: absolute;
  top: 31%;
  left: -13%;
  z-index: 4;
}

section.video {
  padding: 20px 0 10px;
  background: #FFF;
}
.video_player {
  position: absolute;
  top: 0;
  left: 3.5%;
  width: 100%;
  max-width: 537px;
  height: 100%;
  padding: 12% 16% 13%;
}
.video_player video {
  width: 100%;
  height: 100%;
}

.habit_awa {
  position: absolute;
  top: 0;
  right: -9%;
}
.habit_inner {
  position: absolute;
  top: 19%;
  left: 0;
  width: 100%;
}
.cp-slide-pager {
  display: flex;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  gap: 0 84px;
}
.cp-slide-pager span {
	position: relative;
	width: 64px;
	height: 64px;
	background: transparent url(../images/habit_pager_01.png) 50% 50% / auto 50% no-repeat;
	border:4px solid #FFF;
	border-radius: 50%;
	transition: 0.2s;
}
.cp-slide-pager span:nth-child(2) {
	background-image: url(../images/habit_pager_02.png);
}
.cp-slide-pager span:nth-child(3) {
	background-image: url(../images/habit_pager_03.png);
}
.cp-slide-pager span:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -35%;
	width: 54px;
	height: 6px;
	background: #FFF;
	transform: translateX(100%)translateY(-50%);
}
.cp-slide-pager span:hover,
.cp-slide-pager span.is-active {
	background-color: #FB3696;
	border-color: #FB3696;
}

section.campaign {
  padding: 54px 6px 40px;
  background: url(../images/campaign_bg.png) 50% 50% / 100% auto repeat-y;
}
.campaign_title {
  margin-bottom: 26px;
}
.campaign_products {
  display: flex;
  margin-bottom: 30px;
  justify-content: space-between;
  align-items: flex-end;
}
.campaign_teiki_title + .campaign_products {
  padding: 0 12px 0 17px;
}
.campaign_product_pkg {
  margin-bottom: 10px;
}
.campaign_product_btn {
  display: flex;
  justify-content: center;
}
.campaign_teiki_title {
  margin-bottom: 16px;
}
.campaign_code {
  max-width: 540px;
  padding: 32px 32px 24px;
  margin: 0 auto 24px;
  background: #88FE8D;
  border-radius: 20px;
}
.campaign_code_item {
  margin-bottom: 12px;
}
.campaign_code_btn {
  position: relative;
	cursor: pointer;
}
.campaign_use {
  max-width: 540px;
  margin: 0 auto;
}
.cp-copy-done {
  right: 0;
  top: 0;
  padding: 5px 10px;
  color: #fb3695;
  font-weight: 600;
  background: #FFF;
  border-radius: 40px;
}

section.message {
  padding: 60px 30px 45px;
  background: url(../images/message_bg.png) 50% 50% / cover no-repeat;
}
.message_txt {
  margin-bottom: 32px;
}

.situation_info {
  padding: 100px 0 0;
  border-bottom: 32px solid #FFF;
  background: #FFF url(../images/situation_bg04.png) 50% 0 / cover no-repeat;
}
.situation_title {
  margin: 0;
}
.situation_item.item1 .situation_title {
  padding: 106px 14px 44px;
  background: #FFF url(../images/situation_bg01.png) 50% 100% / cover no-repeat;
}
.situation_item.item2 .situation_title {
  padding: 74px 14px 44px;
  background: #FFF url(../images/situation_bg02.png) 50% 100% / cover no-repeat;
}
.situation_item.item3 .situation_title {
  padding: 74px 14px 44px;
  background: #FFF url(../images/situation_bg03.png) 50% 100% / cover no-repeat;
}
.situation_arw {
  margin-bottom: -32px;
}

.product_inner {
  display: block;
}
.product_inner.inner_pure {
  position: relative;
  padding: 106px 0 80px;
  background: url(../images/product_pure_bg.png) 50% 50% / cover no-repeat;
  overflow: hidden;
}
.product_title {
  margin-bottom: 40px;
}
.product_pkg {
  position: relative;
  margin-bottom: 24px;
  z-index: 2;
}
.product_slidetxt {
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  z-index: -1;
}
.product_slidetxt img {
  width: auto;
  max-width: none;
  height: 172px;
}
.product_txt {
  position: relative;
  margin-bottom: 48px;
  z-index: 2;
}
.product_slide {
  margin-bottom: 50px;
}
.product_slide .cp-slide {
  position: relative;
}
.product_slide .cp-slide-prev,
.product_slide .cp-slide-next {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0;
  background: transparent;
  border: none;
  transform: translateY(-50%);
  z-index: 1;
}
.product_slide .cp-slide-prev {
	right: auto;
	left: 0;
}
.product_slide .swiper {
  max-width: 401px;
  margin: 0 auto;
  overflow: hidden;
}
.product_name {
  margin-bottom: 22px;
}
.product_code {
  position: relative;
  max-width: 483px;
  margin: 0 auto 24px;
  cursor: pointer;
}
.product_code .cp-copy-done {
  color: #FFF;
  background: #f93f98;
  transform: translateY(-60%);
}
.product_price {
  display: flex;
  max-width: 486px;
  margin: 0 auto;
  justify-content: space-between;
}
.product_priceitem {
  position: relative;
  width: 49.5%;
  max-width: 236px;
}
.product_off {
  position: absolute;
  top: -18px;
  right: -38px;
}
.product_cart {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
}
.inner_pure .product_txt .product_txt_line1 {
  position: absolute;
  top: 64%;
  left: 14%;
}
.inner_pure .product_txt .product_txt_line2 {
  position: absolute;
  top: 25%;
  left: 50%;
}

.product_inner.inner_hydra {
  position: relative;
  padding: 80px 0;
  background: url(../images/product_hydra_bg.png) 50% 50% / cover no-repeat;
  overflow: hidden;
}
.inner_hydra .product_txt .product_txt_line1 {
  position: absolute;
  top: 46%;
  left: 27%;
}
.inner_hydra .product_txt .product_txt_line2 {
  position: absolute;
  top: 17%;
  left: 15.2%;
}
.product_inner.inner_hydra .product_awa {
  position: absolute;
  top: 2.2%;
  left: 9%;
}
.product_inner.inner_precious {
  position: relative;
  padding: 80px 0;
  background: url(../images/product_precious_bg.png) 50% 50% / cover no-repeat;
  overflow: hidden;
}
.product_inner.inner_precious .product_awa {
  position: absolute;
  top: -5.5%;
  right: 4%;
  z-index: 3;
}
.inner_precious .product_txt .product_txt_line1 {
  position: absolute;
  top: 103%;
  left: 26%;
}
.inner_precious .product_txt .product_txt_line2 {
  position: absolute;
  top: 36%;
  left: 22.2%;
}
.product_appeal {
  position: relative;
  padding: 0;
  background: url(../images/product_pr_bg.png) 50% 50% / cover no-repeat;
  overflow: hidden;
  z-index: 1;
}
.product_appeal_item.item_pure {
	position: relative;
	padding-left: 11%;
  margin: -3% 0 0;
  z-index: 2;
}
.product_mark1 {
  position: absolute;
  top: 63%;
  left: 8%;
  z-index: -1;
}
.product_mark2 {
  position: absolute;
  top: 46.6%;
  left: 8%;
  z-index: -1;
}
.product_appeal_item.item_hydra {
  position: relative;
  margin: -7% 0 0;
  z-index: 2;
}
.product_appeal_item.item_hydra .product_mark1 {
  top: 58.5%;
  left: 55.5%;
}
.product_appeal_item.item_hydra .product_mark2 {
  top: 41.8%;
  left: 55.5%;
}
.product_appeal_item.item_precious {
  position: relative;
  padding-left: 11%;
  margin: -7% -5% -6% 0;
  z-index: 2;
}
.product_appeal_item.item_precious .product_mark1 {
  top: 54%;
  left: 8.5%;
}
.product_appeal_item.item_precious .product_mark2 {
  top: 39%;
  left: 8.5%;
}

.campaign_teiki_info {
  max-width: 540px;
  margin: 35px auto 64px;
  background: #FFF;
  border-radius: 32px;
}
.campaign_teiki_q {
  padding: 32px 40px;
  border-radius: 32px;
  cursor: pointer;
}
.campaign_teiki_a {
  position: relative;
  padding: 30px;
}
.campaign_teiki_a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	right: 30px;
	height: 1px;
	background: #000;
}
.campaign_teiki_a_title {
  padding: 6px 10px 4px;
  margin: 0;
  font-size: 18px;
  background: #ebebeb;
  font-family: "fot-tsukuardgothic-std", "TsukuARdGothic", "TsukuARdGothic Std E", "筑紫A丸ゴシック", sans-serif;
  font-weight: 600;
}
.campaign_teiki_a p {
  padding-left: 1.3em;
  margin: 12px 0;
  font-size: 17px;
  text-align: left;
  font-weight: 400;
  font-family: "fot-tsukuardgothic-std", "TsukuARdGothic", "TsukuARdGothic Std E", "筑紫A丸ゴシック", sans-serif;
  line-height: 1.3;
  text-indent: -1.3em;
}
.campaign_slidetxt {
  margin-bottom: 18px;
}

.last {
  padding: 13px 20px;
  font-size: 10px;
  text-align: left;
  font-weight: 500;
  font-family: "Inter", sans-serif;
  color: #000;
  background: #FFF;
}

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

  /* --- base --- */
  section img {
    width: 100%;
    height: auto;
  }
  section {
    max-width: 100vw;
  }

  /* --- fv --- */
  .fv_pkg {
    left: 50%;
    width: 76.03vw;
    transform: translateX(-50%);
  }

  /* --- introduction --- */
  section.introduction {
    padding-bottom: 20.69vw;
  }
  .introduction_title {
    margin-bottom: 13.79vw;
  }
  .introduction_title img {
    width: 106.38vw;
    max-width: 106.38vw;
  }
  .introduction_txt {
    width: 61.55vw;
    margin: 0 auto;
  }

  /* --- animation --- */
  .animation_pkg img {
    width: 113.62vw;
    max-width: 113.62vw;
    margin-right: 5.17vw;
  }
  .animation_mask_txt img {
    width: 331.38vw;
    max-width: none;
  }
  .animation_mask_txt .txt1 {
    margin-bottom: 11.03vw;
  }
  .animation_point_item {
    max-width: 71.03vw;
  }
  .animation_point_item.item1 .animation_face {
    top: -6.55vw;
    right: -7.41vw;
  }
  .animation_point_item.item2 .animation_face {
    top: -2.59vw;
    left: -6.55vw;
  }
  .animation_awa1 img {
    width: 4.48vw;
  }
  .animation_awa2 img {
    width: 15.86vw;
  }
  .animation_awa3 img {
    width: 37.07vw;
  }
  .animation_awa4 img {
    width: 44.48vw;
  }
  .animation_mask_main {
    width: 82.41vw;
    margin: 0 auto;
  }
  .animation_face img {
    width: 33.79vw;
  }
  .item2 .animation_face img {
    width: 32.07vw;
  }
  .item1 .animation_pp img {
    width: 82.59vw;
  }
  .item2 .animation_pp img {
    width: 85.86vw;
  }

  /* --- video --- */
  section.video {
    padding: 3.45vw 0 1.72vw;
  }
  .video_player {
    max-width: 92.59vw;
  }

  /* --- habit --- */
  .habit_awa img {
    width: 30.52vw;
  }
  .habit_inner {
    left: 4%;
    right: 4%;
    width: 92%;
    overflow: hidden;
  }
  .cp-slide-pager {
    margin-top: 8.62vw;
    gap: 0 14.48vw;
  }
  .cp-slide-pager span {
    width: 11.03vw;
    height: 11.03vw;
    border-width: 0.69vw;
  }
  .cp-slide-pager span:not(:last-child)::after {
    width: 9.31vw;
    height: 1.03vw;
  }

  /* --- campaign --- */
  section.campaign {
    padding: 9.31vw 1.03vw 6.90vw;
  }
  .campaign_title {
    margin-bottom: 4.48vw;
  }
  .campaign_products {
    margin-bottom: 5.17vw;
  }
  .campaign_teiki_title + .campaign_products {
    padding: 0 2.07vw 0 2.93vw;
  }
  .campaign_product_pkg {
    margin-bottom: 1.72vw;
  }
  .campaign_product_btn {
    width: 29.66vw;
    margin: 0 auto;
  }
  .campaign_teiki_title {
    width: 63.62vw;
    margin: 0 auto 2.76vw;
  }
  .campaign_code {
    max-width: 93.10vw;
    padding: 5.52vw 5.52vw 4.14vw;
    margin: 0 auto 4.14vw;
    border-radius: 3.45vw;
  }
  .campaign_code_item {
    margin-bottom: 2.07vw;
  }
  .campaign_teiki_title + .campaign_products .campaign_product_pkg {
    width: 29.66vw;
  }
  .campaign_use {
    max-width: 93.10vw;
  }

  /* --- message --- */
  section.message {
    padding: 10.34vw 5.17vw 7.76vw;
  }
  .message_txt {
    margin-bottom: 5.52vw;
  }

  /* --- situation --- */
  .situation_info {
    padding: 17.24vw 0 0;
    border-bottom-width: 5.52vw;
  }
  .situation_item.item1 .situation_title {
    padding: 18.28vw 2.41vw 7.59vw;
  }
  .situation_item.item2 .situation_title {
    padding: 12.76vw 2.41vw 7.59vw;
  }
  .situation_item.item3 .situation_title {
    padding: 12.76vw 2.41vw 7.59vw;
  }
  .situation_item.item1 .situation_title img {
    width: 85.69vw;
  }
  .situation_item.item2 .situation_title img {
    width: 84.66vw;
  }
  .situation_item.item3 .situation_title img {
    width: 75.86vw;
  }
  .situation_txt img {
    width: 98.45vw;
  }
  .situation_arw {
    margin-top: 3vw;
    margin-bottom: -5.52vw;
  }
  .situation_arw img {
    width: 37.07vw;
  }

  /* --- product --- */
  .product_inner.inner_pure {
    padding: 18.28vw 0 13.79vw;
  }
  .product_title img {
    width: 82.07vw;
  }
  .product_title {
    margin-bottom: 6.90vw;
  }
  .product_pkg {
    margin-bottom: 4.14vw;
  }
  .inner_pure .product_pkg > img {
    width: 64.31vw;
  }
  .inner_hydra .product_pkg > img {
    width: 63.10vw;
  }
  .inner_precious .product_pkg > img {
    width: 61.72vw;
  }
  .product_slidetxt img {
    width: auto;
    max-width: none;
    height: 29.66vw;
  }
  .inner_pure .product_txt > img {
    width: 70.69vw;
  }
  .inner_hydra .product_txt > img {
    width: 77.24vw;
  }
  .inner_precious .product_txt > img {
    width: 78.45vw;
  }
  .inner_pure .product_txt_line1 img {
    width: 39.14vw;
  }
  .inner_pure .product_txt_line2 img {
    width: 22.59vw;
  }
  .inner_hydra .product_txt_line1 img {
    width: 45.34vw;
  }
  .inner_hydra .product_txt_line2 img {
    width: 63.62vw;
  }
  .inner_precious .product_txt_line1 img {
    width: 23.28vw;
  }
  .inner_precious .product_txt_line2 img {
    width: 65.52vw;
  }
  .product_txt {
    margin-bottom: 8.28vw;
  }
  .product_slide {
    margin-bottom: 8.62vw;
  }
  .product_slide .swiper {
    max-width: 69.14vw;
  }
  .product_slide .cp-slide-prev img {
    width: 14.83vw;
  }
  .product_slide .cp-slide-next img {
    width: 14.48vw;
  }
  .inner_pure .product_name img {
    width: 71.72vw;
  }
  .inner_hydra .product_name img {
    width: 76.38vw;
  }
  .inner_precious .product_name img {
    width: 77.41vw;
  }
  .product_name {
    margin-bottom: 3.79vw;
  }
  .product_code {
    max-width: 83.28vw;
    margin: 0 auto 4.14vw;
  }
  .product_price {
    max-width: 83.79vw;
  }
  .product_priceitem {
    max-width: 40.69vw;
  }
  .product_cart img {
    width: 35.34vw;
  }
  .inner_hydra .product_cart img {
    width: 35.17vw;
  }
  .product_off img {
    width: 14.83vw;
  }
  .product_off {
    top: -3.10vw;
    right: -6.55vw;
  }
  .product_cart {
    bottom: 3.45vw;
  }
  .inner_hydra .product_awa img {
    width: 14.83vw;
  }
  .inner_precious .product_awa img {
    width: 39.83vw;
  }
  .product_inner.inner_hydra {
    padding: 13.79vw 0;
  }
  .product_inner.inner_precious {
    padding: 13.79vw 0;
  }

  /* --- product appeal --- */
  .product_appeal_item.item_pure > img {
    width: 89.48vw;
  }
  .product_appeal_item.item_hydra > img {
    width: 92.24vw;
  }
  .product_appeal_item.item_precious > img {
    width: 91.90vw;
  }
  .item_pure .product_mark1 img {
    width: 39.31vw;
  }
  .item_pure .product_mark2 img {
    width: 32.93vw;
  }
  .item_hydra .product_mark1 img {
    width: 31.90vw;
  }
  .item_hydra .product_mark2 img {
    width: 37.76vw;
  }
  .item_precious .product_mark1 img {
    width: 37.93vw;
  }
  .item_precious .product_mark2 img {
    width: 28.10vw;
  }

  /* --- campaign2 (teiki info) --- */
  .campaign2 .campaign_benefits img {
    width: 92.59vw;
  }
  .campaign_teiki_info {
    max-width: 93.10vw;
    margin: 6.03vw auto 11.03vw;
    border-radius: 5.52vw;
  }
  .campaign_teiki_q {
    padding: 5.52vw 6.90vw;
    border-radius: 5.52vw;
  }
  .campaign_teiki_q img {
    width: 77.76vw;
  }
  .campaign_teiki_a {
    padding: 5.17vw;
  }
  .campaign_teiki_a::before {
    left: 5.17vw;
    right: 5.17vw;
    height: 1px;
  }
  .campaign_teiki_a_title {
    padding: 1.03vw 1.72vw 0.69vw;
    font-size: 3.10vw;
  }
  .campaign_teiki_a p {
    margin: 2.07vw 0;
    font-size: 2.93vw;
  }
  .campaign_slidetxt {
    margin-bottom: 3.10vw;
  }
  .campaign_slidetxt img {
    width: 163.62vw;
    max-width: none;
  }
  .campaign2 .campaign_code_item img {
    width: 84.14vw;
  }
  .campaign2 .campaign_code_btn img {
    width: 80.17vw;
  }
  .campaign_use img {
    width: 92.59vw;
  }

  /* --- last --- */
  .last {
    padding: 3.24vw 3.45vw;
    font-size: 2.5vw;
  }

}

section.foot_recommend {
  max-width: none;
}

@media (max-width: 767px) {
  .cp-copy-done {
    padding: 1vw 2vw 1.5vw;
    font-size: 2.2vw;
  }
}