@charset "UTF-8";
.mainn {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 0; }

.mainn::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("../images/shopping/heartcushion/pc_bg.jpg") center/cover no-repeat;
  z-index: -1; }

.mainn img {
  display: block;
  width: 100%;
  height: auto; }

.mainn a {
  display: block; }

.mainn a:hover {
  opacity: 0.5;
  transition: all .2s ease-in; }

.mainn .relative_wrap {
  position: relative; }

.mainn .abs {
  position: absolute;
  opacity: 0; }

.mainn .centering {
  left: 0;
  right: 0;
  margin: auto; }

.mainn button {
  cursor: pointer;
  width: inherit;
  margin: inherit;
  padding: inherit;
  float: none;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  background: none;
  appearance: none; }

.mainn button:hover {
  opacity: .5;
  transition: all .2s ease-in;
  text-decoration: none; }

/* フローカート */
.mainn #sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  margin: auto;
  padding: 0.5% 1%;
  width: 100%;
  max-width: 600px;
  background-color: rgba(255, 255, 255, 0.3); }

.mainn #sticky a {
  display: block;
  width: 95%;
  max-width: 640px;
  margin: 0 auto; }

/*ボタン光るアニメーション ↓*/
.mainn .shiny-btn {
  position: relative;
  display: block;
  overflow: hidden; }

.mainn .shiny-btn::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -20%;
  width: 40px;
  height: 100%;
  transform: scale(2) rotate(20deg);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite; }

@keyframes shiny {
  0% {
    left: -20%; }
  10% {
    left: 120%; }
  100% {
    left: 120%; } }
/*FV*/
.mainn .fv_area .ico01 {
  position: absolute;
  top: 2.5%;
  left: 0;
  right: 0;
  margin: auto;
  width: 95%; }

.mainn .fv_area .ico02 {
  position: absolute;
  top: 62.5%;
  left: 2.5%;
  margin: auto;
  width: 68.5%; }

.mainn .fv_area .fv_slider {
  position: absolute;
  top: 19%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%; }

/*応募要綱*/
.mainn .box_scroll_note {
  position: absolute;
  top: 15.8%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
  font-size: min(2.8vw, 11px);
  display: block;
  color: #d9d9d9;
  text-align: left;
  letter-spacing: 0;
  line-height: 1.3; }

.mainn .box_scroll {
  width: 90%;
  height: 65%;
  position: absolute;
  top: 21%;
  left: 0;
  right: 0;
  margin: auto;
  padding: 1.5% 2%;
  box-sizing: border-box;
  border-radius: .3em;
  background: #fff8fe;
  overflow-y: scroll;
  text-align: left;
  font-size: min(3vw, 12px);
  letter-spacing: 0;
  line-height: 1.3; }

.mainn .box_scroll p {
  margin-bottom: 1em; }

.mainn .box_scroll p:last-of-type {
  margin-bottom: 0; }

.mainn .box_scroll::-webkit-scrollbar {
  background: #fff8fe;
  width: 5px; }

.mainn .box_scroll::-webkit-scrollbar-thumb {
  background-color: #f54195; }

/*イントロ*/
.mainn .intro_area img:first-child {
  width: 83%;
  top: 23%; }

.mainn .intro_area2 img:first-child {
  width: 83%;
  top: 10%; }

/**カート部分**/
.mainn .cart_btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 13%;
  margin: auto;
  width: 83%; }

.mainn .guide_btn {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto; }

.mainn .cart_matte .guide_btn {
  width: 75%;
  bottom: 3.5%; }

.mainn .cart_aqua .guide_btn {
  width: 78%;
  bottom: 1.5%;
  left: -2%; }

.mainn .cart_glow .guide_btn {
  width: 75%;
  bottom: 3.5%; }

.mainn .cart2_matte button,
.mainn .cart2_glow button,
.mainn .cart2_aqua button {
  bottom: 7%; }

/* CM動画 */
.mainn .mv_cm video {
  width: 100%;
  position: absolute;
  top: 41.3%;
  left: 0;
  right: 0;
  margin: auto; }

.mainn .mv_cm .ico {
  position: absolute;
  margin: auto; }

.mainn .mv_cm .ico01 {
  width: 50.1%;
  top: 27.1%;
  left: 25.1%; }

.mainn .mv_cm .ico02 {
  width: 24.5%;
  top: 79.5%;
  right: 37.5%; }

/* 会見動画 */
.mainn .mv_press video,
.mainn .mv_press .inner1 {
  width: 79%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28.6%;
  margin: auto; }

/*スライダー SNS*/
.mainn .slider-list {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto; }

.mainn .slider-list.sl01 {
  top: 37.5%; }

.mainn .slider-list.sl02 {
  top: 66.5%; }

.mainn .slider-list li {
  margin: 0 .1%; }

/*ポイント*/
.mainn .point_h img {
  opacity: 1;
  top: 19%; }

.mainn .point_h img:first-child {
  width: 88%;
  z-index: 9; }

.mainn .point_h img:nth-child(2) {
  z-index: 9; }

.mainn .point_1_1 img:first-child {
  width: 70%;
  top: 23%; }

.mainn .point_1_2 img:first-child {
  width: 61%;
  top: 18%; }

.mainn .point_1_3 img:first-child {
  width: 43%;
  top: 13%; }

.mainn .point_1_4 img:first-child {
  width: 40%;
  top: 19%; }

.mainn .point_1_5 img:first-child {
  width: 67%;
  top: 11%; }

.mainn .point_2 img:first-child {
  width: 51%;
  top: 9%; }

.mainn .point_2 img:nth-child(2) {
  width: 97%;
  bottom: 6%; }

.mainn .point_3 img:first-child {
  width: 67%;
  top: 9%; }

.mainn .point_3 img:nth-child(2) {
  width: 31%;
  right: 19%;
  top: 29%; }

.mainn .point_3 img:nth-child(3) {
  width: 32%;
  left: 22%;
  bottom: 33.3%; }

/* マット1 */
.mainn .matte_content .flex_wrap,
.mainn .aqua_content .flex_wrap,
.mainn .glow_content .flex_wrap {
  position: absolute;
  top: 45%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between; }

.mainn .matte_content .flex_wrap img,
.mainn .aqua_content .flex_wrap img,
.mainn .glow_content .flex_wrap img {
  width: 49.5%; }

.mainn .matte_content .matte_osusume,
.mainn .aqua_content .aqua_osusume {
  width: 53%;
  top: 4%; }

.mainn .matte_content .matte_mittyaku {
  width: 83%;
  top: 17%; }

.mainn .matte_content .matte_nokuzure {
  width: 47%;
  top: 46.7%; }

.mainn .aqua_content .aqua_nameraka {
  width: 69%;
  top: 17%; }

.mainn .aqua_content .aqua_usuduki {
  width: 62%;
  top: 44%; }

/* グロウ1 */
.mainn .glow_content .flex_wrap {
  top: 43.5%; }

.mainn .glow_content .glow_osusume {
  width: 53%;
  top: 4.05%; }

.mainn .glow_content .glow1 .glow_shittori {
  width: 60%;
  top: 16%; }

/* グロウ2 */
.mainn .glow_content .glow2 .glow_kagayaku {
  width: 60%;
  top: 12%; }

.mainn .glow2 .inner1 {
  width: 44.5%;
  position: absolute;
  top: 59.3%;
  right: 5%; }

/*クロージング*/
.mainn .closing_area img:first-child {
  width: 19%;
  top: 3%;
  right: 26%; }

.mainn .closing_area img:nth-child(2) {
  width: 19%;
  top: 6%;
  right: 6%; }

.mainn .closing_area img:nth-child(3) {
  width: 80%;
  top: 20%; }

/*比較*/
.mainn .graph_area {
  padding: 2em 3%;
  background: #fff;
  width: 100%;
  overflow: hidden; }

.mainn .graph_area .scroll_wrap {
  overflow-x: scroll;
  margin-bottom: .5em;
  box-sizing: border-box; }

.mainn .graph_area .scroll_wrap > div {
  width: 800px; }

@media print, screen and (max-width: 768px) {
  .mainn .graph_area .scroll_wrap > div {
    width: 750px; } }
.mainn .graph_area .barometer {
  margin: 0 auto;
  max-width: 280px; }

.mainn .graph_area table, .mainn .graph_area th, .mainn .graph_area td {
  border: 2px solid #af928c; }

.mainn .graph_area table {
  width: 100%;
  letter-spacing: 0em;
  margin-bottom: 1em; }

.mainn .graph_area th, .mainn .graph_area td {
  vertical-align: middle;
  font-size: 12px; }

.mainn .graph_area th {
  background: #c7b3af;
  color: #fff;
  width: 16%;
  font-weight: 500;
  padding: 0.8em 0; }

.mainn .graph_area td {
  background: #fffcf7;
  width: 28%;
  padding: 0.8em; }

.mainn .graph_area strong {
  font-weight: 500; }

.mainn .graph_area .ico_h {
  max-width: 100px;
  margin: 0 auto; }

.mainn .graph_area sup, .mainn .graph_area sub {
  font-size: 11px; }

.mainn .graph_area .note {
  text-align: left;
  font-size: 11px;
  letter-spacing: .03em; }

/*アコーディオン共通*/
.mainn .accordion__container .title {
  cursor: pointer; }

.mainn .accordion__container .box {
  display: none; }

/*FAQアコーディオン*/
.mainn .faq_area {
  line-height: 0; }

.mainn .faq_area dt {
  position: relative; }

.mainn .faq_area dt:after {
  content: "";
  position: absolute;
  top: 0;
  right: 9.5%;
  bottom: 0;
  width: 0.7em;
  height: 0.7em;
  margin: auto;
  border: 0.2em solid #f89198;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(135deg);
  transition: all .2s ease-in; }

.mainn .faq_area dt.close:after {
  transform: rotate(-45deg);
  top: 0; }

/*全成分アコーディオン*/
.mainn .seibun_area {
  letter-spacing: 0; }

.mainn .seibun_area dl {
  margin-bottom: 1.5%; }

.mainn .seibun_area dt {
  padding: 1em 3em;
  display: block;
  color: #fff;
  background: #f7848b;
  position: relative;
  font-size: min(12px, 3.8vw); }

.mainn .seibun_area dt:after {
  content: "";
  position: absolute;
  top: 0;
  right: 5%;
  bottom: 0;
  width: .6em;
  height: .6em;
  margin: auto;
  border: 0.2em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  transform: rotate(135deg);
  transition: all .2s ease-in; }

.mainn .seibun_area dt.close:after {
  transform: rotate(-45deg);
  top: 0; }

.mainn .seibun_area dd {
  padding: 3% 5%;
  background: #fff;
  text-align: left;
  font-size: min(3.3vw, 11px);
  line-height: 1.5; }

/*アニメーション*/
.zoomIn {
  animation: zoomIn 1.5s alternate infinite; }

@keyframes zoomIn {
  0% {
    transform: scale(0.9); }
  100% {
    transform: scale(1); } }
/* 上から */
.fadeDown {
  animation: fadeDown 1s both; }

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-45%); }
  to {
    opacity: 1;
    transform: translateY(0); } }
.fuwafuwa {
  opacity: 1 !important;
  animation: fuwaFuwa ease-in-out infinite alternate 1s; }

.poton {
  opacity: 1 !important;
  animation: bounce 1s ease-out forwards,fuwaFuwa2 1s ease-in-out infinite 0.98s alternate; }

@keyframes fuwaFuwa {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, -15%); } }
@keyframes bounce {
  0% {
    transform: translateY(-8em);
    animation-timing-function: cubic-bezier(0, 1, 1, 1); }
  100% {
    transform: translateY(1em);
    animation-timing-function: cubic-bezier(0, 1, 1, 0.78); } }
@keyframes fuwaFuwa2 {
  0% {
    transform: translate(0, 1em); }
  100% {
    transform: translate(0, 0); } }
.delay05 {
  animation-delay: .5s; }

.mainn .mist {
  position: absolute;
  width: 90%;
  left: 5%;
  bottom: 3%; }