@charset "UTF-8";
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 100%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img,
embed,
object,
iframe {
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

select::-ms-expand {
  display: none;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable] {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

@media (max-width: 750px) {
  html {
    font-size: 1.3333333333vw;
  }
}
@media (min-width: 751px) {
  html {
    font-size: 62.5%;
  }
}

body {
  /* 1枚目（常時） */
  background: url(../imgs/body_bg.webp) top/cover no-repeat fixed;
  position: relative;
  isolation: isolate;
}
@media screen and (max-width: 767px) {
  body {
    background: none;
  }
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* bodyの背景より上、コンテンツより下にしたい */
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  -webkit-transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
@media screen and (max-width: 767px) {
  body::before,
  body::after {
    display: none;
  }
}

@media (max-width: 767px) and (max-width: 640px) {
  body {
    padding-bottom: 28.8vw !important;
  }
}
body::before {
  background-image: url(../imgs/body_bg02.webp);
}

body::after {
  background-image: url(../imgs/body_bg03.webp);
}

body.is-bg02::before {
  opacity: 1;
}

body.is-bg03::after {
  opacity: 1;
}

/* 初期に戻す */
body.is-bg00::before,
body.is-bg00::after {
  opacity: 0;
}

a.p_button {
  color: #00657E;
}

main h1, main h2, main h3, main h4, main h5 {
  font-weight: 400;
}

.p_button {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p_button::after {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.p_button:hover {
  color: rgba(0, 101, 126, 0.5);
}
.p_button:hover::after {
  opacity: 0.5;
}

.bottom-nav {
  display: none !important;
}

.common-aside-instagram[data-v-92bece86] {
  padding-top: 15.3333333333vw !important;
  padding-bottom: 16vw !important;
  margin: 0 !important;
}

@media screen and (min-width: 768px) {
  .common-aside-instagram[data-v-92bece86] {
    position: relative;
    padding: 11.5rem 0 12rem !important;
    margin: 0 !important;
    background: #fff;
  }
}
footer.common-footer {
  position: relative;
}

.l-header-logo {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 25.6944444444vw;
  left: 5.7638888889vw;
}
@media screen and (max-width: 1080px) {
  .l-header-logo {
    width: 23.6111111111vw;
    left: 4.1666666667vw;
  }
}
@media screen and (max-width: 920px) {
  .l-header-logo {
    left: 1.3888888889vw;
  }
}
@media screen and (max-width: 767px) {
  .l-header-logo {
    display: none;
  }
}

.l-header-item {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 22.2222222222vw;
  right: 7.7777777778vw;
}
@media screen and (max-width: 1080px) {
  .l-header-item {
    right: 5.5555555556vw;
  }
}
@media screen and (max-width: 920px) {
  .l-header-item {
    right: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .l-header-item {
    display: none;
  }
}

.l-header-item__cleansing {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #00657E;
  font-size: 1.1111111111vw;
  line-height: 2.5;
  text-align: center;
  padding-top: 2.0833333333vw;
  padding-bottom: 1.0416666667vw;
  background: #fff;
  -webkit-box-shadow: 0 0 4px #DAEBEE;
          box-shadow: 0 0 4px #DAEBEE;
}
.l-header-item__cleansing img {
  position: absolute;
  z-index: -1;
  top: -3.125vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 13.8888888889vw;
}
.l-header-item__cleansing:hover {
  opacity: 0.6;
}

.l-header-item__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.1111111111vw;
  margin-top: 2.9861111111vw;
  margin-bottom: 1.3888888889vw;
}

.l-header-item__cream {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #00657E;
  font-size: 1.1111111111vw;
  line-height: 2.5;
  text-align: center;
  padding-top: 3.4722222222vw;
  padding-bottom: 1.0416666667vw;
  background: #fff;
  -webkit-box-shadow: 0 0 4px #DAEBEE;
          box-shadow: 0 0 4px #DAEBEE;
}
.l-header-item__cream img {
  position: absolute;
  z-index: -1;
  top: -2.2916666667vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 3.0555555556vw;
}
.l-header-item__cream:hover {
  opacity: 0.6;
}

.l-header-item__cleanser {
  position: relative;
  z-index: 1;
  width: 100%;
  color: #00657E;
  font-size: 1.1111111111vw;
  line-height: 1.3;
  text-align: center;
  padding-top: 3.4722222222vw;
  padding-bottom: 1.0416666667vw;
  background: #fff;
  -webkit-box-shadow: 0 0 4px #DAEBEE;
          box-shadow: 0 0 4px #DAEBEE;
}
.l-header-item__cleanser img {
  position: absolute;
  z-index: -1;
  top: -2.2916666667vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 5.5555555556vw;
}
.l-header-item__cleanser:hover {
  opacity: 0.6;
}

.l-header-item__banner {
  width: 100%;
}
.l-header-item__banner:hover {
  opacity: 0.6;
}

.l-header-float {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 10.8rem;
  -webkit-box-shadow: 0 0 5px rgba(0, 101, 126, 0.2);
          box-shadow: 0 0 5px rgba(0, 101, 126, 0.2);
  -webkit-transform: translateY(110%);
          transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: opacity 0.35s ease, -webkit-transform 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease;
  transition: transform 0.35s ease, opacity 0.35s ease, -webkit-transform 0.35s ease;
}
@media screen and (max-width: 767px) {
  .l-header-float {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 21.6rem;
    -webkit-box-shadow: 0 0 1rem rgba(0, 101, 126, 0.2);
            box-shadow: 0 0 1rem rgba(0, 101, 126, 0.2);
  }
}

.l-header-float.is-show {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.l-header-float__main {
  position: relative;
  width: 52%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 0.3rem;
  font-size: 1.4rem;
  line-height: 1.4285714286;
  text-align: center;
  background: #E1F4F9;
  padding-bottom: 0.4rem;
}
@media screen and (max-width: 767px) {
  .l-header-float__main {
    gap: 0.6rem;
    font-size: 2.8rem;
    padding-bottom: 0.8rem;
  }
}
.l-header-float__main::after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: -1;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.l-header-float__main img {
  position: relative;
  left: -0.5rem;
  width: 15.9rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .l-header-float__main img {
    left: -1rem;
    width: 31.8rem;
  }
}
.l-header-float__main span {
  display: block;
  margin-top: -1.6rem;
  color: #00657E;
}
@media screen and (max-width: 767px) {
  .l-header-float__main span {
    margin-top: -3.2rem;
  }
}
.l-header-float__main:hover::after {
  z-index: 2;
  opacity: 1;
}

.l-header-float__aside {
  width: 48%;
}

.l-header-float__link {
  display: block;
  width: 100%;
  font-size: 1.3rem;
  line-height: 1.5384615385;
  text-align: center;
  background: #fff;
  padding: 0.8rem;
  border-bottom: 1px solid #E1F4F9;
  color: #00657E;
}
@media screen and (max-width: 767px) {
  .l-header-float__link {
    font-size: 2.6rem;
    padding: 1.6rem;
    border-bottom: 0.2rem solid #E1F4F9;
  }
}
.l-header-float__link:last-of-type {
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .l-header-float__link:last-of-type {
    border-bottom: none;
  }
}
.l-header-float__link:hover {
  background: #F2FBFC;
}

.l-main {
  contain: paint;
  position: relative;
  z-index: 2;
  max-width: 37.5rem;
  margin: 0 auto;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .l-main {
    max-width: 100%;
  }
}

:where(.l-main, .l-header-item, .l-header-float) {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #00657E;
  font-weight: 400;
  line-height: 2;
}

:where(.l-main, .l-header-item, .l-header-float) :where(a, button) {
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

:where(.l-main, .l-header-item, .l-header-float) :where(a:hover, button:hover) {
  cursor: pointer;
}

:where(.l-main, .l-header-item, .l-header-float) :where(a) {
  display: inline-block;
}

:where(.l-main, .l-header-item, .l-header-float) :where(img) {
  display: block;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  width: 100%;
}

.p-fv {
  position: relative;
  width: 100%;
}

.p-fv__img {
  width: 100%;
}

.p-fv__batch {
  position: absolute;
  width: 7rem;
  left: 3rem;
  bottom: 4rem;
}
@media screen and (max-width: 767px) {
  .p-fv__batch {
    width: 14rem;
    left: 6rem;
    bottom: 8rem;
  }
}

.p-about {
  position: relative;
  z-index: 2;
  width: 100%;
  background-image: url(../imgs/about_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10rem 2rem;
  margin-top: -2rem;
}
@media screen and (max-width: 767px) {
  .p-about {
    padding: 20rem 4rem;
    margin-top: -4rem;
  }
}

.p-about__title {
  font-size: 2.4rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-about__title {
    font-size: 4.8rem;
  }
}

.p-about__text {
  font-size: 1.9rem;
  line-height: 1.6;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-about__text {
    font-size: 3.8rem;
    margin-top: 6rem;
  }
}
.p-about__text span {
  font-size: 0.9rem;
}
@media screen and (max-width: 767px) {
  .p-about__text span {
    font-size: 1.8rem;
  }
}

.p-about__comment {
  font-size: 0.9rem;
  line-height: 1.5555555556;
  text-align: right;
  padding-right: 1rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-about__comment {
    font-size: 1.8rem;
    padding-right: 2rem;
    margin-top: 6rem;
  }
}

.p-cream {
  width: 100%;
}

.p-creamSlider {
  width: 100%;
}
.p-creamSlider .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-creamSlider .slick-dots {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 2rem;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .p-creamSlider .slick-dots {
    bottom: 4rem;
    gap: 4rem;
  }
}
.p-creamSlider .slick-dots li {
  width: auto;
  height: auto;
  line-height: 1;
}
.p-creamSlider .slick-dots li button {
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border-radius: 50%;
  background: #D9D9D9;
  border: none;
}
@media screen and (max-width: 767px) {
  .p-creamSlider .slick-dots li button {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.p-creamSlider .slick-dots li button:before {
  display: none;
}
.p-creamSlider .slick-dots li.slick-active button {
  background: #fff;
}

.p-creamSlider__item {
  width: 100%;
}

.p-creamSlider__itemIn {
  position: relative;
  width: 100%;
  padding-top: 148.2666666667%;
  padding-top: 177.78%;
}
.p-creamSlider__itemIn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.p-creamSlider__itemIn span {
  position: absolute;
  z-index: 2;
  bottom: 1.2rem;
  right: 1.8rem;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .p-creamSlider__itemIn span {
    bottom: 2.4rem;
    right: 3.6rem;
    font-size: 2.4rem;
  }
}

.p-cream__wrapper {
  width: 100%;
  padding: 4rem 2rem 12rem 2rem;
  background-image: url(../imgs/cream_bg.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-cream__wrapper {
    padding: 8rem 4rem 24rem 4rem;
  }
}

.p-cream__title {
  color: #606262;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-cream__title {
    font-size: 3.2rem;
  }
}
.p-cream__title span {
  display: block;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-cream__title span {
    font-size: 2.6rem;
    margin-bottom: 2.4rem;
  }
}

.p-cream__label {
  color: #606262;
  font-size: 1.3rem;
  line-height: 1.3;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-cream__label {
    font-size: 2.6rem;
    margin-top: 2rem;
  }
}

.p-cream__money {
  color: #606262;
  font-size: 1.3rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-cream__money {
    font-size: 2.6rem;
    margin-top: 2rem;
  }
}

.p-cream__comment {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: center;
  margin-top: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-cream__comment {
    font-size: 1.8rem;
    margin-top: 4.4rem;
  }
}

.p-cream__button {
  width: 100%;
  max-width: 23.5rem;
  height: 3.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.5rem;
  line-height: 1.3333333333;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
          box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
  margin: 4rem auto 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-cream__button {
    max-width: 47rem;
    height: 7.2rem;
    font-size: 3rem;
    margin: 8rem auto 0rem auto;
  }
}
.p-cream__button::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 1.2rem;
  height: 1.5rem;
  background-image: url(../imgs/btn_icon.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-cream__button::after {
    width: 2.4rem;
    height: 3rem;
    margin-left: 1.6rem;
  }
}
.p-cream__button:hover {
  color: rgba(0, 101, 126, 0.5);
}
.p-cream__button:hover::after {
  opacity: 0.5;
}

.p-cream__coupon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  margin-top: 2rem;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .p-cream__coupon {
    gap: 1rem;
    font-size: 2.4rem;
    margin-top: 4rem;
  }
}
.p-cream__coupon::after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.2rem;
  width: 1rem;
  height: 0.6rem;
  background-image: url(../imgs/btn_arrow.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-cream__coupon::after {
    top: 0.4rem;
    width: 2rem;
    height: 1.2rem;
  }
}
.p-cream__coupon:hover {
  opacity: 0.5;
}

.p-effect {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 2.8rem 2rem 5rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-effect {
    padding: 5.6rem 4rem 10rem 4rem;
  }
}
.p-effect::before {
  content: "";
}
.p-effect::after {
  content: "";
}

.p-effect__cream {
  display: inline-block;
  position: absolute;
  top: -7.8rem;
  left: 0;
  width: 16.5rem;
  height: 19.55rem;
  background-image: url(../imgs/cream.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-effect__cream {
    top: -15.6rem;
    width: 33rem;
    height: 39.1rem;
  }
}

.p-effect__cream02 {
  display: inline-block;
  position: absolute;
  top: 9.2rem;
  right: 0;
  width: 8.8rem;
  height: 16.35rem;
  background-image: url(../imgs/cream02.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-effect__cream02 {
    top: 18.4rem;
    width: 17.6rem;
    height: 32.7rem;
  }
}

.p-effect__title {
  position: relative;
  z-index: 2;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-effect__title {
    font-size: 3.6rem;
  }
}
.p-effect__title::after {
  content: "";
  display: block;
  position: relative;
  width: 3rem;
  height: 1px;
  background: #00657E;
  margin: 2.4rem auto 0 auto;
}
@media screen and (max-width: 767px) {
  .p-effect__title::after {
    width: 6rem;
    margin: 4.8rem auto 0 auto;
  }
}

.p-effect__text {
  position: relative;
  z-index: 2;
  color: #606262;
  font-size: 1.4rem;
  line-height: 1.9;
  font-weight: 500;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-effect__text {
    font-size: 2.8rem;
    margin-top: 6rem;
  }
}

.p-features {
  width: 100%;
  padding: 2.8rem 2rem 5rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-features {
    padding: 5.6rem 4rem 10rem 4rem;
  }
}

.p-features__title {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-features__title {
    font-size: 3.6rem;
  }
}

.p-features__lists {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-features__lists {
    gap: 3rem;
    margin-top: 4rem;
  }
}

.p-features__list {
  width: 100%;
  max-width: 15.3rem;
  font-size: 1.4rem;
  line-height: 1.4;
  text-align: center;
  padding: 1.2rem;
  background: #E1F4F9;
  border-radius: 0.3rem;
}
@media screen and (max-width: 767px) {
  .p-features__list {
    max-width: 30.6rem;
    font-size: 2.8rem;
    padding: 2.4rem;
    border-radius: 0.6rem;
  }
}
.p-features__list span {
  display: inline-block;
  font-size: 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-features__list span {
    font-size: 2.4rem;
  }
}
.p-features__list span .comment {
  font-size: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-features__list span .comment {
    font-size: 1.6rem;
  }
}

.p-features__comment {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.4444444444;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-features__comment {
    font-size: 1.8rem;
    margin-top: 4rem;
  }
}

.p-component {
  width: 100%;
  padding: 2rem 2rem 0rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-component {
    padding: 4rem 4rem 0rem 4rem;
  }
}

.p-component__inner {
  width: 100%;
  max-width: 27rem;
  margin: 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-component__inner {
    max-width: 54rem;
  }
}

.p-component__title {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-component__title {
    font-size: 3.6rem;
  }
}
.p-component__title span {
  display: block;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .p-component__title span {
    font-size: 2.8rem;
  }
}

.p-component__block {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-component__block {
    margin-top: 4rem;
  }
}
.p-component__block::after {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 1rem;
  height: 1.2rem;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .p-component__block::after {
    width: 2rem;
    height: 2.4rem;
  }
}

.p-component__wrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 4rem;
}
@media screen and (max-width: 767px) {
  .p-component__wrapper {
    gap: 2rem 8rem;
  }
}
.p-component__wrapper::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0.5px;
  height: 27rem;
  background: #606262;
}
@media screen and (max-width: 767px) {
  .p-component__wrapper::before {
    height: 54rem;
  }
}
.p-component__wrapper::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 26.2rem;
  height: 0.5px;
  background: #606262;
}
@media screen and (max-width: 767px) {
  .p-component__wrapper::after {
    width: 52.4rem;
  }
}

.p-component__box {
  min-height: 13.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
}
@media screen and (max-width: 767px) {
  .p-component__box {
    min-height: 26.8rem;
  }
}

.p-component__img {
  width: 100%;
}

.p-component__label {
  color: #606262;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-component__label {
    font-size: 2rem;
  }
}

.p-component__text {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-component__text {
    font-size: 1.8rem;
  }
}
.p-component__text span {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-component__text span {
    font-size: 2rem;
  }
}

.p-component__comment {
  color: #606262;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-component__comment {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}

.p-componentSec {
  position: sticky;
  z-index: 1;
  top: 6rem;
  width: 100%;
  padding: 3rem 1.6rem 20rem 1.6rem;
  background: #DDF1F1;
}
@media screen and (max-width: 767px) {
  .p-componentSec {
    top: 14rem;
    padding: 6rem 3.2rem 40rem 3.2rem;
  }
}

.p-componentSec__title {
  font-size: 1.8rem;
  line-height: 1.9;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-componentSec__title {
    font-size: 3.6rem;
  }
}
.p-componentSec__title span {
  display: block;
  font-weight: 500;
}

.p-componentSec__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 0.5rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__wrapper {
    gap: 1rem;
    margin-top: 4rem;
  }
}

.p-componentSec__column {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__column {
    gap: 1rem;
  }
}

.p-componentSec__box {
  width: 10.3rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__box {
    width: 20.6rem;
  }
}
.p-componentSec__box.wid120 {
  width: 12rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__box.wid120 {
    width: 24rem;
  }
}

.p-componentSec__img {
  width: 100%;
}
.p-componentSec__img img {
  width: auto;
  height: 8rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .p-componentSec__img img {
    height: 16rem;
  }
}

.p-componentSec__label {
  color: #606262;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-componentSec__label {
    font-size: 2rem;
  }
}

.p-componentSec__text {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-componentSec__text {
    font-size: 1.8rem;
  }
}
.p-componentSec__text span {
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__text span {
    font-size: 2rem;
  }
}
.p-componentSec__text span.pozi {
  position: relative;
  left: -0.8rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__text span.pozi {
    left: -1.6rem;
  }
}

.p-componentSec__comment {
  color: #606262;
  font-size: 0.8rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-componentSec__comment {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}

.p-use {
  position: relative;
  width: 100%;
  padding: 8rem 2rem 5rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-use {
    padding: 16rem 4rem 10rem 4rem;
  }
}
.p-use::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 1rem;
  right: 0;
  width: 8.7rem;
  height: 17.3rem;
  background-image: url(../imgs/use_item.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-use::before {
    top: 2rem;
    width: 17.4rem;
    height: 34.6rem;
  }
}
.p-use::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 19rem;
  left: 0;
  width: 7.3rem;
  height: 17.85rem;
  background-image: url(../imgs/use_item02.webp);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-use::after {
    top: 38rem;
    width: 14.6rem;
    height: 35.7rem;
  }
}

.p-use__circle {
  position: absolute;
  top: 2.5rem;
  right: -8.8rem;
  width: 15.5rem;
  -webkit-animation: rotate-right 30s linear infinite;
          animation: rotate-right 30s linear infinite;
}
@media screen and (max-width: 767px) {
  .p-use__circle {
    top: 5rem;
    right: -17.6rem;
    width: 31rem;
  }
}

.p-use__circle02 {
  position: absolute;
  top: 20.5rem;
  left: -9.4rem;
  width: 14.4rem;
  -webkit-animation: rotate-left 30s linear infinite;
          animation: rotate-left 30s linear infinite;
}
@media screen and (max-width: 767px) {
  .p-use__circle02 {
    top: 41rem;
    left: -18.8rem;
    width: 28.8rem;
  }
}

/* 右回り */
@-webkit-keyframes rotate-right {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-right {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
/* 左回り */
@-webkit-keyframes rotate-left {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes rotate-left {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.p-use__title {
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-use__title {
    font-size: 2.8rem;
  }
}
.p-use__title::before {
  content: attr(data-en);
  display: block;
  position: relative;
  font-family: "Aboreto", system-ui;
  font-size: 2.8rem;
  line-height: 1.5;
  letter-spacing: 0em;
}
@media screen and (max-width: 767px) {
  .p-use__title::before {
    font-size: 5.6rem;
  }
}

.p-use__text {
  font-size: 1.2rem;
  line-height: 1.9;
  font-weight: 500;
  text-align: center;
  margin-top: 3rem;
  color: #606262;
}
@media screen and (max-width: 767px) {
  .p-use__text {
    font-size: 2.4rem;
    margin-top: 6rem;
  }
}
.p-use__text.bar {
  position: relative;
  padding-top: 2rem;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-use__text.bar {
    padding-top: 4rem;
    margin-top: 4rem;
  }
}
.p-use__text.bar::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 8rem;
  height: 0.5px;
  background: #00657E;
}
@media screen and (max-width: 767px) {
  .p-use__text.bar::before {
    width: 16rem;
  }
}

.p-point {
  width: 100%;
  padding: 0rem 2rem 14rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-point {
    padding: 0rem 4rem 28rem 4rem;
  }
}

.p-point__inner {
  width: 100%;
  max-width: 31.5rem;
  margin: 0rem auto;
  padding: 4rem 1.9rem 6rem 1.9rem;
  background: #E1F4F9;
  border-radius: 1rem;
}
@media screen and (max-width: 767px) {
  .p-point__inner {
    max-width: 63rem;
    padding: 8rem 3.8rem 12rem 3.8rem;
    border-radius: 2rem;
  }
}

.p-point__title {
  font-family: "Aboreto", system-ui;
  font-size: 2.8rem;
  line-height: 1.0714285714;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-point__title {
    font-size: 5.6rem;
  }
}

.p-point__eng {
  width: 100%;
  max-width: 10rem;
  margin: -1rem auto 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-point__eng {
    max-width: 20rem;
    margin: -2rem auto 0rem auto;
  }
}

.p-point__wrapper {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 4rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-point__wrapper {
    gap: 8rem;
    margin-top: 6rem;
  }
}
.p-point__wrapper::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 26rem;
  height: 0.5px;
  background: rgba(0, 101, 126, 0.3);
}
@media screen and (max-width: 767px) {
  .p-point__wrapper::before {
    width: 52rem;
  }
}

.p-point__box {
  width: 100%;
}
.p-point__box:first-of-type {
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-point__box:first-of-type {
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
  }
}

.p-point__img {
  width: 100%;
}

.p-point__text {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-point__text {
    font-size: 2.4rem;
    margin-top: 3rem;
  }
}
.p-point__text.ht18 {
  line-height: 1.8;
  margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-point__text.ht18 {
    margin-top: 1.6rem;
  }
}

.p-soap {
  width: 100%;
}

.p-soapSlider {
  width: 100%;
}
.p-soapSlider .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-soapSlider .slick-dots {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 2rem;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .p-soapSlider .slick-dots {
    bottom: 4rem;
    gap: 4rem;
  }
}
.p-soapSlider .slick-dots li {
  width: auto;
  height: auto;
  line-height: 1;
}
.p-soapSlider .slick-dots li button {
  cursor: pointer;
  font-size: 0;
  line-height: 0;
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 101, 126, 0.5);
  border: none;
}
@media screen and (max-width: 767px) {
  .p-soapSlider .slick-dots li button {
    width: 1.8rem;
    height: 1.8rem;
  }
}
.p-soapSlider .slick-dots li button:before {
  display: none;
}
.p-soapSlider .slick-dots li.slick-active button {
  background: #00657E;
}

.p-soapSlider__item {
  width: 100%;
}

.p-soapSlider__itemIn {
  position: relative;
  width: 100%;
  padding-top: 148.2666666667%;
  padding-top: 177.78%;
}
.p-soapSlider__itemIn img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.p-soap__wrapper {
  width: 100%;
  padding: 4rem 2rem 1rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-soap__wrapper {
    padding: 8rem 4rem 2rem 4rem;
  }
}

.p-soap__title {
  color: #606262;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-soap__title {
    font-size: 3.2rem;
  }
}
.p-soap__title span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .p-soap__title span {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }
}

.p-soap__label {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-soap__label {
    font-size: 2.4rem;
    margin-top: 2rem;
  }
}

.p-soap__money {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-soap__money {
    font-size: 2.4rem;
    margin-top: 2rem;
  }
}

.p-soap__comment {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.3;
  text-align: center;
  margin-top: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-soap__comment {
    font-size: 1.8rem;
    margin-top: 4.4rem;
  }
}

.p-soap__button {
  width: 100%;
  max-width: 23.4rem;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.4rem;
  line-height: 1.4285714286;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
          box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
  margin: 4rem auto 0rem auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
@media screen and (max-width: 767px) {
  .p-soap__button {
    max-width: 46.8rem;
    height: 8rem;
    font-size: 2.8rem;
    margin: 8rem auto 0rem auto;
  }
}
.p-soap__button::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 1.2rem;
  height: 1.5rem;
  background-image: url(../imgs/btn_icon.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-soap__button::after {
    width: 2.4rem;
    height: 3rem;
    margin-left: 1.6rem;
  }
}
.p-soap__button:hover {
  color: rgba(0, 101, 126, 0.5);
}

.p-soap__coupon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-soap__coupon {
    gap: 1rem;
    font-size: 2.4rem;
    margin-top: 4rem;
  }
}
.p-soap__coupon::after {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.2rem;
  width: 1rem;
  height: 0.6rem;
  background-image: url(../imgs/btn_arrow.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-soap__coupon::after {
    top: 0.4rem;
    width: 2rem;
    height: 1.2rem;
  }
}

.p-foam {
  position: relative;
  width: 100%;
  padding: 6rem 2rem 5rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-foam {
    padding: 12rem 4rem 10rem 4rem;
  }
}

.p-foam__item {
  width: 100%;
  max-width: 15.3rem;
  margin: 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-foam__item {
    max-width: 30.6rem;
  }
}

.p-foam__item02 {
  position: absolute;
  top: 22.8rem;
  left: 0;
  width: 6.25rem;
}
@media screen and (max-width: 767px) {
  .p-foam__item02 {
    top: 45.6rem;
    width: 12.5rem;
  }
}

.p-foam__item0203 {
  position: absolute;
  top: 36.4rem;
  right: 0rem;
  width: 5.8rem;
}
@media screen and (max-width: 767px) {
  .p-foam__item0203 {
    top: 72.8rem;
    width: 11.6rem;
  }
}

.p-foam__title {
  font-size: 1.8rem;
  line-height: 1.3;
  font-weight: 500;
  text-align: center;
  margin-top: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-foam__title {
    font-size: 3.6rem;
    margin-top: 4.4rem;
  }
}
.p-foam__title::after {
  content: "";
  display: block;
  position: relative;
  width: 3rem;
  height: 1px;
  background: #00657E;
  margin: 1.6rem auto 0 auto;
}
@media screen and (max-width: 767px) {
  .p-foam__title::after {
    width: 6rem;
    margin: 3.2rem auto 0 auto;
  }
}

.p-foam__text {
  color: #606262;
  font-size: 1.4rem;
  line-height: 1.9;
  font-weight: 500;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-foam__text {
    font-size: 2.8rem;
    margin-top: 6rem;
  }
}

.p-impression {
  position: relative;
  width: 100%;
  padding: 4rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-impression {
    padding: 8rem 4rem;
  }
}

.p-impression__title {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-impression__title {
    font-size: 3.6rem;
  }
}

.p-impression__wrapper {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  gap: 1rem;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-impression__wrapper {
    gap: 2rem;
    margin-top: 6rem;
  }
}

.p-impression__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
}
@media screen and (max-width: 767px) {
  .p-impression__box {
    gap: 4rem;
  }
}

.p-impression__circle {
  width: 13rem;
  height: 13rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  font-size: 1.4rem;
  line-height: 1.4285714286;
  font-weight: 500;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  border: 0.5px solid #00657E;
  border-radius: 100%;
}
@media screen and (max-width: 767px) {
  .p-impression__circle {
    width: 26rem;
    height: 26rem;
    font-size: 2.8rem;
  }
}
.p-impression__circle span {
  display: inline-block;
  font-size: 1.1rem;
}
@media screen and (max-width: 767px) {
  .p-impression__circle span {
    font-size: 2.2rem;
  }
}
.p-impression__circle span .comment {
  font-size: 0.9rem;
}
@media screen and (max-width: 767px) {
  .p-impression__circle span .comment {
    font-size: 1.8rem;
  }
}

.p-impression__comment {
  color: #606262;
  font-size: 0.9rem;
  line-height: 1.4444444444;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-impression__comment {
    font-size: 1.8rem;
    margin-top: 4rem;
  }
}

.p-wave {
  position: relative;
  width: 100%;
}

.p-wave__inner {
  width: 100%;
  background-image: url(../imgs/wave_bg.webp);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: -0.1rem;
}
@media screen and (max-width: 767px) {
  .p-wave__inner {
    margin-top: -0.2rem;
  }
}

.p-wave__topImg {
  width: 100%;
}

.p-wave__bottomImg {
  width: 100%;
}

.p-wave__text {
  font-size: 1.8rem;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 2rem;
}
@media screen and (max-width: 767px) {
  .p-wave__text {
    font-size: 3.6rem;
    padding: 4rem;
  }
}

.p-wave-white {
  width: 100%;
  background: #fff;
}

.p-sticky {
  position: sticky;
  z-index: 1;
  top: -4rem;
}
@media screen and (max-width: 767px) {
  .p-sticky {
    top: -22rem;
  }
}

.p-wave {
  position: relative;
  z-index: 2;
}

.p-wave-white {
  position: relative;
  z-index: 3;
}

.p-efforia {
  position: relative;
  top: -10rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-efforia {
    top: -20rem;
  }
}

.p-efforia__titleBox {
  width: 100%;
  padding-top: 10.6rem;
  padding-bottom: 3rem;
  background-image: url(../imgs/wave_bg-white.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-efforia__titleBox {
    padding-top: 21.2rem;
    padding-bottom: 6rem;
  }
}

.p-efforia-bg {
  background-image: url(../imgs/wave_bgimg.webp);
  background-position: top;
  background-size: contain;
  background-repeat: no-repeat;
}

.p-efforia__band {
  font-family: "Aboreto", system-ui;
  font-size: 3rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-efforia__band {
    font-size: 6rem;
  }
}

.p-efforia__title {
  font-size: 1.4rem;
  line-height: 1.9;
  font-weight: 500;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-efforia__title {
    font-size: 2.8rem;
    margin-top: 6rem;
  }
}
.p-efforia__title span {
  display: block;
  font-size: 2.2rem;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .p-efforia__title span {
    font-size: 4.4rem;
  }
}
.p-efforia__title span .comment {
  display: inline-block;
  font-size: 0.9rem;
}
@media screen and (max-width: 767px) {
  .p-efforia__title span .comment {
    font-size: 1.8rem;
  }
}

.p-efforia__comment {
  font-size: 0.9rem;
  line-height: 3;
  text-align: right;
  padding-right: 3.6rem;
}
@media screen and (max-width: 767px) {
  .p-efforia__comment {
    font-size: 1.8rem;
    padding-right: 7.2rem;
  }
}

.p-efforia__img {
  width: 100%;
}

.p-efforia-component {
  width: 100%;
  padding: 4rem 1.8rem 0rem 1.8rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component {
    padding: 8rem 3.6rem 0rem 3.6rem;
  }
}

.p-efforia-component__title {
  font-size: 1.3rem;
  line-height: 1.5384615385;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__title {
    font-size: 2.6rem;
  }
}
.p-efforia-component__title strong {
  position: relative;
  display: block;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__title strong {
    font-size: 3.6rem;
    margin-bottom: 1rem;
  }
}
.p-efforia-component__title strong .kana {
  position: relative;
}
.p-efforia-component__title strong .kana::after {
  content: "ちえ";
  display: inline-block;
  position: absolute;
  left: 0.5rem;
  bottom: calc(100% - 0.2rem);
  font-size: 0.9rem;
  line-height: 1;
  letter-spacing: 1em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__title strong .kana::after {
    left: 1rem;
    bottom: calc(100% - 0.4rem);
    font-size: 1.8rem;
  }
}

.p-efforia-component__text {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__text {
    font-size: 2.4rem;
    margin-top: 8rem;
  }
}

.p-efforia-component__wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__wrapper {
    margin-top: 4rem;
  }
}
.p-efforia-component__wrapper::before {
  content: "";
  display: inline-block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 26.1rem;
  height: 27.2rem;
  background-image: url(../imgs/bar_item.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__wrapper::before {
    width: 52.2rem;
    height: 54.4rem;
  }
}

.p-efforia-component__column {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 4rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__column {
    gap: 8rem;
  }
}

.p-efforia-component__box {
  width: 100%;
  max-width: 11.5rem;
  padding-top: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__box {
    max-width: 23rem;
    padding-top: 1rem;
  }
}
.p-efforia-component__box.pt15 {
  padding-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__box.pt15 {
    padding-top: 3rem;
  }
}
.p-efforia-component__box.pt22 {
  padding-top: 2.2rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__box.pt22 {
    padding-top: 4.4rem;
  }
}

.p-efforia-component__img {
  width: 100%;
  max-width: 11.5rem;
  margin: 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__img {
    max-width: 23rem;
  }
}

.p-efforia-component__label {
  color: #606262;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__label {
    font-size: 2rem;
  }
}

.p-efforia-component__exp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #606262;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__exp {
    font-size: 2rem;
  }
}
.p-efforia-component__exp span {
  white-space: nowrap;
}

.p-efforia-component__all {
  color: #606262;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__all {
    font-size: 2rem;
    margin-top: 2rem;
  }
}

.p-efforia-component__comment {
  color: #606262;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: right;
}
@media screen and (max-width: 767px) {
  .p-efforia-component__comment {
    font-size: 1.6rem;
  }
}

.p-efforia-scent {
  width: 100%;
  padding: 8rem 1.8rem 0 1.8rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent {
    padding: 16rem 3.6rem 0 3.6rem;
  }
}

.p-efforia-scent__title {
  font-size: 1.3rem;
  line-height: 1.5384615385;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__title {
    font-size: 2.6rem;
  }
}
.p-efforia-scent__title strong {
  display: block;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__title strong {
    font-size: 3.6rem;
    margin-bottom: 1rem;
  }
}

.p-efforia-scent__text {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__text {
    font-size: 2.4rem;
    margin-top: 8rem;
  }
}

.p-efforia-scent__wrapper {
  width: 100%;
  max-width: 31.5rem;
  margin: 2rem auto 0rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 1rem 2rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__wrapper {
    max-width: 63rem;
    margin: 4rem auto 0rem auto;
    gap: 2rem 4rem;
  }
}

.p-efforia-scent__box {
  width: 100%;
}

.p-efforia-scent__img {
  width: 100%;
  height: 6rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__img {
    height: 12rem;
  }
}
.p-efforia-scent__img img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.p-efforia-scent__name {
  font-size: 0.9rem;
  line-height: 3;
  text-align: center;
  margin-top: -0.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__name {
    font-size: 1.8rem;
    margin-top: -1rem;
  }
}

.p-efforia-scent__comment {
  color: #606262;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: right;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-scent__comment {
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}

.p-efforia-care {
  width: 100%;
  padding-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care {
    padding-top: 4rem;
  }
}

.p-efforia-care__title {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 3rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__title {
    font-size: 4rem;
    margin-top: 6rem;
  }
}
.p-efforia-care__title span {
  display: block;
  font-size: 1.8rem;
  line-height: 1.3888888889;
  margin-bottom: 0.6rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__title span {
    font-size: 3.6rem;
    margin-bottom: 1.2rem;
  }
}
.p-efforia-care__title span .comment {
  display: inline-block;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__title span .comment {
    font-size: 2rem;
  }
}

.p-efforia-care__comment {
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__comment {
    font-size: 2rem;
    margin-top: 2rem;
  }
}

.p-efforia-care__text {
  position: relative;
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 9rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__text {
    font-size: 3.6rem;
    margin-top: 18rem;
  }
}
.p-efforia-care__text::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: calc(100% + 3rem);
  width: 1px;
  height: 3rem;
  background: #00657E;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__text::before {
    bottom: calc(100% + 6rem);
    height: 6rem;
  }
}

.p-efforia-care__wrapper {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 4rem;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F3FAFA));
  background: linear-gradient(180deg, #fff, #F3FAFA);
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__wrapper {
    padding-top: 2rem;
    padding-bottom: 8rem;
    margin-top: 2rem;
  }
}

.p-efforia-care__box {
  width: 100%;
  max-width: 30rem;
  margin: 0rem auto;
  margin-top: 2rem;
  background: #fff;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__box {
    max-width: 60rem;
    margin-top: 4rem;
  }
}
.p-efforia-care__box:first-of-type {
  margin-top: 0rem;
}

.p-efforia-care__label {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: 400;
  text-align: center;
  padding: 1rem;
  background: #F2FBCC;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__label {
    font-size: 3.6rem;
    padding: 2rem;
  }
}
.p-efforia-care__label.bg {
  background: #CCEDED;
}

.p-efforia-care__group {
  padding: 0rem 1.5rem 1.5rem 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__group {
    padding: 0rem 3rem 3rem 3rem;
  }
}

.p-efforia-care__exp {
  font-size: 1.3rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__exp {
    font-size: 2.6rem;
    margin-top: 3rem;
  }
}
.p-efforia-care__exp span {
  display: block;
  font-weight: 500;
}

.p-efforia-care__minText {
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-efforia-care__minText {
    font-size: 2rem;
    margin-top: 4rem;
  }
}

.p-commodity {
  padding-top: 4rem;
  padding-bottom: 7rem;
  background: #F2FAFA;
  margin-top: -10rem;
}
@media screen and (max-width: 767px) {
  .p-commodity {
    padding-top: 8rem;
    padding-bottom: 14rem;
    margin-top: -20rem;
  }
}

.p-commodity__box {
  width: 100%;
}
.p-commodity__box:first-of-type {
  margin-bottom: 5rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__box:first-of-type {
    margin-bottom: 10rem;
  }
}

.p-commodity__img {
  width: 100%;
}

.p-commodity__name {
  color: #606262;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .p-commodity__name {
    font-size: 3.2rem;
  }
}
.p-commodity__name span {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__name span {
    font-size: 2.4rem;
    margin-bottom: 2rem;
  }
}

.p-commodity__label {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 1rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__label {
    font-size: 2.4rem;
    margin-top: 2rem;
  }
}

.p-commodity__money {
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__money {
    font-size: 2.4rem;
    margin-top: 1.6rem;
  }
}

.p-commodity__tag {
  width: 100%;
  max-width: 8.5rem;
  height: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #606262;
  font-size: 1.2rem;
  line-height: 1.3;
  border: 0.5px solid #606262;
  margin: 1rem auto;
}
@media screen and (max-width: 767px) {
  .p-commodity__tag {
    max-width: 17rem;
    height: 4rem;
    font-size: 2.4rem;
    margin: 2rem auto;
  }
}

.p-commodity__button {
  width: 100%;
  max-width: 23.4rem;
  height: 4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 1.4rem;
  line-height: 1.4285714286;
  background: #fff;
  -webkit-box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
          box-shadow: 0 0 10px rgba(0, 101, 126, 0.15);
  margin: 3rem auto 2rem auto;
}
@media screen and (max-width: 767px) {
  .p-commodity__button {
    max-width: 46.8rem;
    height: 8rem;
    font-size: 2.8rem;
    margin: 6rem auto 4rem auto;
  }
}
.p-commodity__button::after {
  content: "";
  display: inline-block;
  position: relative;
  width: 1.2rem;
  height: 1.5rem;
  background-image: url(../imgs/btn_icon.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  margin-left: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__button::after {
    width: 2.4rem;
    height: 3rem;
    margin-left: 1.6rem;
  }
}
.p-commodity__button:hover {
  color: rgba(0, 101, 126, 0.5);
}

.p-commodity__text {
  color: #606262;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 6rem;
}
@media screen and (max-width: 767px) {
  .p-commodity__text {
    font-size: 2rem;
    margin-top: 12rem;
  }
}

.p-coupon {
  width: 100%;
  background: #F2FAFA;
}

.p-coupon__inner {
  width: 100%;
  padding: 3.2rem 2rem 3rem 2rem;
  background-image: url(../imgs/coupon_bg.webp);
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  .p-coupon__inner {
    padding: 6.4rem 4rem 6rem 4rem;
  }
}

.p-coupon__band {
  width: 100%;
  max-width: 26.5rem;
  margin: 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-coupon__band {
    max-width: 53rem;
  }
}

.p-coupon__title {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 0.8rem;
}
@media screen and (max-width: 767px) {
  .p-coupon__title {
    font-size: 3.2rem;
    margin-top: 1.6rem;
  }
}

.p-coupon__img {
  width: 100%;
  max-width: 12.5rem;
  margin: 3rem auto 0rem auto;
}
@media screen and (max-width: 767px) {
  .p-coupon__img {
    max-width: 25rem;
    margin: 6rem auto 0rem auto;
  }
}

.p-coupon__name {
  font-size: 1.4rem;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  margin-top: 1.2rem;
}
@media screen and (max-width: 767px) {
  .p-coupon__name {
    font-size: 2.8rem;
    margin-top: 2.4rem;
  }
}

.p-coupon__line {
  position: relative;
  width: 100%;
  max-width: 30rem;
  height: 6.3rem;
  margin: 3rem auto 0rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 500;
  padding-left: 4rem;
  background: #06C755;
  border-radius: 0.5rem;
}
@media screen and (max-width: 767px) {
  .p-coupon__line {
    max-width: 60rem;
    height: 12.6rem;
    margin: 6rem auto 0rem auto;
    font-size: 3.2rem;
    padding-left: 8rem;
    border-radius: 1rem;
  }
}
.p-coupon__line img {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 2.6rem;
  width: 5.2rem;
}
@media screen and (max-width: 767px) {
  .p-coupon__line img {
    left: 5.2rem;
    width: 10.4rem;
  }
}
.p-coupon__line:hover {
  opacity: 0.6;
}

.p-coupon__comment {
  color: #606262;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  margin-top: 2rem;
}
@media screen and (max-width: 767px) {
  .p-coupon__comment {
    font-size: 2rem;
    margin-top: 4rem;
  }
}

.u-anime-up {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.u-anime-up.is-show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.u-anime-fade {
  opacity: 0;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  -webkit-transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.u-anime-fade.is-show {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.u-anime-left {
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
  -webkit-transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.u-anime-left.is-show {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.u-anime-right {
  opacity: 0;
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
  -webkit-transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 2.2s cubic-bezier(0.22, 1, 0.36, 1), transform 2.2s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 2.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.u-anime-right.is-show {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

@media screen and (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

.u-sp {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp {
    display: block !important;
  }
}

.u-sp-inline {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp-inline {
    display: inline-block !important;
  }
}

.u-sp-flex {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .u-sp-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}/*# sourceMappingURL=style.css.map */