@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;500;700&display=swap);
.font-en {
  font-family:
    Futura,
    Josefin Sans,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 500;
}
.font-en2 {
  font-family:
    Roboto,
    Helvetica Neue,
    Helvetica,
    Arial,
    sans-serif;
  font-weight: 600;
}
.font-g {
  font-family:
    Yu Gothic Medium,
    游ゴシック Medium,
    YuGothic Pr6,
    游ゴシック体 Pr6,
    YuGothic,
    游ゴシック体,
    Noto Sans JP,
    sans-serif;
}
.font-sansSerif {
  font-family:
    Work Sans,
    sans-serif;
  font-weight: 300;
}
.font-cn {
  font-family:
    Noto Sans TC,
    Noto Sans JP,
    ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro,
    Hiragino Kaku Gothic W3 JIS2004,
    游ゴシック Medium,
    Yu Gothic Medium,
    游ゴシック体,
    YuGothic,
    メイリオ,
    Meiryo,
    ＭＳ Ｐゴシック,
    MS PGothic,
    sans-serif !important;
}
.font-gothic {
  font-family:
    UD Shin Go Bold,
    Noto Sans JP,
    ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro,
    Hiragino Kaku Gothic W3 JIS2004,
    游ゴシック Medium,
    Yu Gothic Medium,
    游ゴシック体,
    YuGothic,
    メイリオ,
    Meiryo,
    ＭＳ Ｐゴシック,
    MS PGothic,
    sans-serif;
}
.font-gothic-b {
  font-family:
    Noto Sans JP,
    ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro,
    Hiragino Kaku Gothic W3 JIS2004,
    游ゴシック Medium,
    Yu Gothic Medium,
    游ゴシック体,
    YuGothic,
    メイリオ,
    Meiryo,
    ＭＳ Ｐゴシック,
    MS PGothic,
    sans-serif;
  font-weight: 700;
}
.font-gothic-bl {
  font-family:
    Noto Sans JP,
    ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro,
    Hiragino Kaku Gothic W3 JIS2004,
    游ゴシック Medium,
    Yu Gothic Medium,
    游ゴシック体,
    YuGothic,
    メイリオ,
    Meiryo,
    ＭＳ Ｐゴシック,
    MS PGothic,
    sans-serif;
  font-weight: 900;
}
.font-serif {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family:
    "Noto Serif JP",
    ヒラギノ明朝 W6 JIS2004,
    ヒラギノ明朝 ProN W3,
    Hiragino Mincho ProN,
    游明朝体,
    Yu Mincho,
    YuMincho,
    ＭＳ Ｐ明朝,
    MS PMincho,
    MS 明朝,
    メイリオ,
    Meiryo,
    serif;
}
.font-bold {
  font-family:
    Noto Sans JP,
    ヒラギノ角ゴ Pro W3,
    Hiragino Kaku Gothic Pro,
    Hiragino Kaku Gothic W3 JIS2004,
    游ゴシック Medium,
    Yu Gothic Medium,
    游ゴシック体,
    YuGothic,
    メイリオ,
    Meiryo,
    ＭＳ Ｐゴシック,
    MS PGothic,
    sans-serif;
  font-weight: 900;
}
.fontStuffing {
  letter-spacing: -0.5em;
}
.fontStuffing--l {
  display: inline-block;
  letter-spacing: -0.5em;
  transform: translateX(-0.5em);
}
.fontSmall--ss {
  font-size: 0.7em;
}
.fontSmall--s {
  font-size: 0.8em;
}

.movBox {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
}
.movBox iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.movBox--sq {
  padding-bottom: 100%;
}
.movBox--sq .movBox__cover:after {
  padding-bottom: 25.2390057361%;
  width: 25.2390057361%;
}
.movBox__cover {
  background-color: #000;
  cursor: pointer;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.movBox__cover img {
  display: block;
  height: auto;
  transition-duration: 0.3s;
  transition-property: opacity;
  width: 100%;
}
.movBox__cover:after {
  /* background: hsla(0, 0%, 100%, 0.5) url(../img/icon_play.svg) no-repeat 50%; */
  background: hsla(0, 0%, 100%, 0.5);
  background-size: 100% auto;
  border-radius: 50%;
  bottom: 0;
  content: "";
  height: 0;
  left: 0;
  margin: auto;
  opacity: 0.9;
  overflow: hidden;
  padding-bottom: 12.6923076923%;
  position: absolute;
  right: 0;
  top: 0;
  transition-duration: 0.3s;
  transition-property: opacity;
  width: 12.6923076923%;
}
@media only screen and (max-width: 750px) {
  .movBox__cover:after {
    padding-bottom: 19.7183098592%;
    width: 19.7183098592%;
  }
}
.movBox__cover:hover img {
  opacity: 0.8;
}
.movBox__cover:hover:after {
  opacity: 0.9;
}
.movBox.is-modeMov .movBox__cover {
  opacity: 0;
  pointer-events: none;
}
.u-pagination {
  font-size: 1.13rem;
}
@media only screen and (max-width: 1000px) {
  .u-pagination {
    font-size: 1.8vw;
  }
}
@media only screen and (max-width: 750px) {
  .u-pagination {
    font-size: 3.7333333333vw;
  }
}
@media only screen and (max-width: 750px) and (min-width: 521px) {
  .u-pagination {
    font-size: 19.4133333333px;
  }
}
.u-pagination__items {
  align-items: center;
  display: flex;
  font-size: 1.1111111111em;
  justify-content: center;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .u-pagination__items {
    font-size: 1.0357142857em;
  }
}
.u-pagination__item {
  font-weight: 700;
  margin: 0 0.25em;
}
.u-pagination__item a,
.u-pagination__item > span {
  background-color: #fff;
  border: 1px solid #fff;
  box-sizing: border-box;
  color: #000;
  display: block;
  height: 2.5em;
  line-height: 2.375em;
  position: relative;
  text-decoration: none;
  transition-duration: 0.2s;
  transition-property: color, background-color, opacity;
  width: 2.5em;
}
.u-pagination__item a {
  cursor: pointer;
}
.u-pagination__item a:hover {
  background-color: hsla(0, 0%, 100%, 0.4);
  color: #fff;
}
.u-pagination__item.is-current a,
.u-pagination__item.is-current > span {
  background-color: #000;
  color: #fff;
}
.u-pagination__abb a,
.u-pagination__abb span {
  border-width: 0;
}
.u-pagination__abb > span {
  background-color: transparent;
  border-width: 0;
  color: #fff;
  width: 2em;
}
.u-pagination__next,
.u-pagination__prev {
  display: table;
  font-weight: 700;
  margin: 0 0.625em;
}
.u-pagination__next a,
.u-pagination__prev a {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  color: #fff;
  display: table-cell;
  line-height: 1.5;
  position: relative;
  text-decoration: none;
  vertical-align: middle;
  width: auto;
}
.u-pagination__next a:hover,
.u-pagination__prev a:hover {
  background-color: transparent;
  opacity: 0.8;
}
.u-pagination__next a:before,
.u-pagination__prev a:before {
  box-sizing: border-box;
  content: "";
  height: 1em;
  position: absolute;
  width: 1em;
}
@media only screen and (max-width: 750px) {
  .u-pagination__next a span,
  .u-pagination__prev a span {
    display: none;
  }
}
.u-pagination__prev {
  margin-left: 0;
}
.u-pagination__prev a {
  padding-left: 1.25em;
}
.u-pagination__prev a:before {
  border-left: 0.1em solid;
  border-top: 0.1em solid;
  left: 0;
  top: 50%;
  transform: scaleY(0.6) rotate(-45deg);
  transform-origin: 0 0;
}
@media only screen and (max-width: 750px) {
  .u-pagination__prev a:before {
    left: 0.5em;
  }
}
.u-pagination__next {
  margin-right: 0;
}
.u-pagination__next a {
  padding-right: 1.25em;
}
.u-pagination__next a:before {
  border-right: 0.1em solid;
  border-top: 0.1em solid;
  right: 0;
  top: 50%;
  transform: scaleY(0.6) rotate(45deg);
  transform-origin: 100% 0;
}
@media only screen and (max-width: 750px) {
  .u-pagination__next a:before {
    right: 0.5em;
  }
}
.overlay-lock-test {
  overflow-y: hidden !important;
}
.overlay-lock {
  overflow: hidden !important;
  width: auto;
}
.overlay-lock body {
  overflow: hidden !important;
}
.modal-overlay-lock {
  overflow: hidden !important;
  width: auto;
}
.modal-overlay-lock body {
  overflow: hidden !important;
}
html.remodal-is-locked {
  overflow: hidden;
  touch-action: none;
}
.remodal,
[data-remodal-id] {
  display: none;
}
a[data-remodal-target] {
  cursor: pointer;
}
.remodal-overlay {
  bottom: -5000px;
  display: none;
  left: -5000px;
  position: fixed;
  right: -5000px;
  top: -5000px;
  z-index: 9999;
}
.remodal-wrapper {
  -webkit-overflow-scrolling: touch;
  bottom: 0;
  display: none;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  text-align: center;
  top: 0;
  z-index: 10000;
}
.remodal-wrapper:after {
  content: "";
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
}
.remodal-overlay,
.remodal-wrapper {
  backface-visibility: hidden;
}
.is-modalFull .remodal-wrapper {
  overflow: hidden;
}
.remodal {
  text-size-adjust: 100%;
  outline: none;
  position: relative;
}
.remodal-is-initialized {
  display: inline-block;
}
.remodal-bg.remodal-is-opened,
.remodal-bg.remodal-is-opening {
  filter: blur(3px);
}
.remodal-overlay {
  background: rgba(0, 0, 0, 0.5);
}
.is-modalCart .remodal-overlay {
  background: rgba(0, 0, 0, 0.9);
}
.is-modalBlk .remodal-overlay {
  background: rgba(0, 0, 0, 0.9);
}
.remodal-overlay.remodal-is-closing,
.remodal-overlay.remodal-is-opening {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal-overlay.remodal-is-opening {
  animation-name: remodal-overlay-opening-keyframes;
}
.remodal-overlay.remodal-is-closing {
  animation-name: remodal-overlay-closing-keyframes;
}
.remodal-wrapper {
  overflow-y: scroll;
}
.remodal {
  box-sizing: border-box;
  padding: 4% 0;
  transform: translateZ(0);
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .remodal {
    padding: 24px;
  }
}
.remodal-closeOver {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.remodal__main {
  position: relative;
}
.remodal.remodal-is-closing,
.remodal.remodal-is-opening {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.remodal.remodal-is-opening {
  animation-name: remodal-opening-keyframes;
}
.remodal.remodal-is-closing {
  animation-name: remodal-closing-keyframes;
}
.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}
.remodal-close {
  appearance: none;
  backface-visibility: hidden;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  display: block;
  height: min(60px, 5.0847457627vw);
  margin: 0;
  outline: 0;
  overflow: visible;
  padding: 0;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
  width: min(60px, 5.0847457627vw);
  z-index: 10;
}
@media only screen and (max-width: 750px) {
  .remodal-close {
    height: min(96px, 12.8vw);
    margin: 0;
    width: min(96px, 12.8vw);
  }
}
.remodal-close > span {
  background-color: var(--colorBrn);
  border-radius: 50%;
  bottom: 0;
  display: block;
  height: 50%;
  left: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}
.remodal-close > span:after,
.remodal-close > span:before {
  background-color: #fff;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 46.6666666667%;
}
@media only screen and (max-width: 750px) {
  .remodal-close > span:after,
  .remodal-close > span:before {
    height: min(2px, 0.2666666667vw);
    width: 41.6666666667%;
  }
}
.remodal-close > span:before {
  transform: rotate(45deg);
}
.remodal-close > span:after {
  transform: rotate(-45deg);
}
.remodal-cancel,
.remodal-confirm {
  border: 0;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  margin: 0;
  min-width: 110px;
  outline: 0;
  overflow: visible;
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
  vertical-align: middle;
}
.remodal-confirm {
  background: #81c784;
  color: #fff;
}
.remodal-confirm:focus,
.remodal-confirm:hover {
  background: #66bb6a;
}
.remodal-cancel {
  background: #e57373;
  color: #fff;
}
.remodal-cancel:focus,
.remodal-cancel:hover {
  background: #ef5350;
}
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner,
.remodal-confirm::-moz-focus-inner {
  border: 0;
  padding: 0;
}
@keyframes remodal-opening-keyframes {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: none;
  }
}
@keyframes remodal-closing-keyframes {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    filter: blur(0);
    opacity: 0;
    transform: scale(0.95);
  }
}
@keyframes remodal-overlay-opening-keyframes {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes remodal-overlay-closing-keyframes {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@media only screen and (min-width: 751px) {
  .remodal {
    max-width: 600px;
  }
}
.modalMov {
  font-size: 1.13rem;
  margin: 40px min(40px, 3.3898305085%) min(40px, 3.3898305085%);
  max-width: 1100px;
  padding: 0;
  width: calc(100% - min(80px, 6.7796610169%));
}
@media only screen and (max-width: 1200px) {
  .modalMov {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 750px) {
  .modalMov {
    font-size: 3.7333333333vw;
    margin: 9.3333333333vw 2.4% 0;
    width: 95.2%;
  }
}
@media only screen and (max-width: 750px) and (min-width: 521px) {
  .modalMov {
    font-size: 19.4133333333px;
  }
}
.modalMov .remodal-close {
  margin-right: -0.8333333333em;
  margin-top: 0;
  transform: translateY(-100%);
}
@media only screen and (max-width: 750px) {
  .modalMov .remodal-close {
    margin-right: -1em;
    margin-top: 0.3571428571em;
  }
}
.modalMov .remodal-close > span {
  background-color: #fff;
}
.modalMov .remodal-close > span:after,
.modalMov .remodal-close > span:before {
  background-color: var(--colorBrn);
}
.modalMov__inner {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  width: 100%;
  background-color: #000;
}
.modalMov__inner iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #000;
}
.modalMov--square {
  max-width: 600px;
}
.modalMov--square .modalMov__inner {
  padding-bottom: 100%;
}
.modalMov--vertical {
  margin-left: 0;
  margin-right: 0;
  max-width: 400px;
}
@media only screen and (max-height: 780px) {
  .modalMov--vertical {
    max-width: 51.2820512821vh;
  }
}
@media only screen and (max-width: 750px) {
  .modalMov--vertical {
    max-width: 400px;
    width: 100%;
  }
}
@media only screen and (max-width: 750px) and (max-height: 680px) {
  .modalMov--vertical {
    max-width: 52vh;
  }
}
.modalMov--vertical .modalMov__inner {
  padding-bottom: 177.6%;
}
html:not([lang="ja"]) .is-ja {
  display: none;
}
html:not([lang="en"]) .is-en {
  display: none;
}
html:not([lang="zh-Hans"]) .is-hans {
  display: none;
}
html:not([lang="zh-Hant"]) .is-hant {
  display: none;
}
html[lang="ja"] .is-ja {
  display: block;
}
html[lang="ja"] .not-ja {
  display: none;
}
html[lang="en"] .is-en {
  display: block;
}
html[lang="en"] .not-en {
  display: none;
}
html[lang="zh-Hans"] .is-hans {
  display: block;
}
html[lang="zh-Hans"] .not-hans {
  display: none;
}
html[lang="zh-Hant"] .is-hant {
  display: block;
}
html[lang="zh-Hant"] .not-hant {
  display: none;
}
.u-cf {
  * {
    zoom: 1;
  }
}
.u-cf:after,
.u-cf:before {
  content: " ";
  display: table;
}
.u-cf:after {
  clear: both;
}
.u-taL {
  text-align: left;
}
.u-taR {
  text-align: right;
}
.u-taC {
  text-align: center;
}
.u-visHide {
  visibility: hidden;
}
.u-hide {
  display: none !important;
}
.u-hideTxt {
  display: block;
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.u-pcHide {
  display: none;
}
.u-fColor--wht {
  color: #fff;
}
.u-fColor--grn {
  color: #00a040;
}
.u-fColor--orange {
  color: #ee7800;
}
.u-fColor--red {
  color: #f10000;
}
.u-indent--1 {
  text-indent: 1em;
}
.u-indent--n1 {
  padding-left: 1em;
  text-indent: -1em;
}
.u-indent--n1_3 {
  padding-left: 1.25em;
  text-indent: -1.25em;
}
.u-indent--n1_5 {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.u-indent--n2 {
  padding-left: 2em;
  text-indent: -2em;
}
.u-liMarker {
  padding-left: 1em;
  text-indent: -1em;
}
.u-liMarker:before {
  content: "・";
}
.u-pcNobreak {
  display: none;
}
.u-inlineBlock {
  display: inline-block;
}
.u-urlTxt {
  word-break: break-all;
}
.u-scrTxt {
  height: 0;
  overflow: hidden;
  position: absolute;
  width: 0;
}
.u-blankIcon {
  height: 1em;
  line-height: 1em;
  padding-left: 3px;
  position: relative;
  top: -0.1em;
  vertical-align: middle;
  width: auto;
}
@media only screen and (max-width: 750px) {
  .u-pcNobreak {
    display: inline;
  }
  .u-spNobreak {
    display: none;
  }
  .u-pcHide {
    display: block;
  }
  .u-spHide {
    display: none;
  }
}
.u-bdrBtm {
  border-bottom: 1px solid #595757;
}
.u--bdrTop {
  border-top: 1px solid #595757;
}
.u-countBox {
  counter-reset: number;
}
.u-countBox .u-countItem:before {
  color: #00a040;
  content: counter(number) ". ";
  counter-increment: number;
  font-style: normal;
}
.u-qaBox .u-qaItem-Q {
  padding-left: 1.8em;
  position: relative;
}
.u-qaBox .u-qaItem-Q:before {
  color: #00a040;
  content: "Q. ";
  font-size: 1.38em;
  font-size: 28px;
  font-style: normal;
  left: 0;
  position: absolute;
  top: -0.2em;
}
.u-qaBox .u-qaItem-A {
  padding-left: 2.2em;
  padding-top: 0.5em;
  position: relative;
}
.u-qaBox .u-qaItem-A:before {
  color: #00a040;
  content: "A. ";
  font-size: 28px;
  font-style: normal;
  left: 0;
  position: absolute;
  top: 0;
}
@media only screen and (max-width: 750px) {
  .u-qaBox .u-qaItem-Q {
    padding-left: 1.5em;
  }
  .u-qaBox .u-qaItem-Q:before {
    font-size: 21px;
    top: -0.1em;
  }
  .u-qaBox .u-qaItem-A {
    padding-left: 1.8em;
  }
  .u-qaBox .u-qaItem-A:before {
    font-size: 21px;
    top: 0.2em;
  }
}
.u-linkIcon {
  display: inline-block;
  padding-left: 1em;
  position: relative;
  text-decoration: none;
}
.u-linkIcon:before {
  border-bottom: 1px solid #8b8b8b;
  border-right: 1px solid #8b8b8b;
  content: "";
  height: 0.4em;
  left: 0;
  position: absolute;
  top: 0.6em;
  transform: rotate(-45deg);
  width: 0.4em;
}
.u-linkIcon:link,
.u-linkIcon:visited {
  text-decoration: none;
}
.u-linkIcon:active,
.u-linkIcon:hover {
  text-decoration: underline;
}
.u-videoBox {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}
.u-videoBox iframe {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.serumIndex {
  -ms-scroll-chaining: none;
  --colorBrn: #623b2a;
  --colorGry1: #b4b4b4;
  --colorGry2: #505050;
  --colorGry3: #d7d7d7;
  overscroll-behavior: none;
  transition-duration: 0s;
  transition:
    all 0.2s ease 0s,
    padding 0s ease 0s;
}
.serumIndex .main {
  font-family:
    Yu Gothic Medium,
    游ゴシック Medium,
    YuGothic Pr6,
    游ゴシック体 Pr6,
    YuGothic,
    游ゴシック体,
    Noto Sans JP,
    sans-serif;
}
.serumIndex sup {
  font-size: 0.6em;
  vertical-align: super;
}
.serumIndex > img[height="1"] {
  position: absolute;
}
.serumIndex img {
  height: auto;
  max-width: 100%;
}
.serumIndex .keyVisual + .content {
  background: transparent;
  padding-bottom: 0;
  padding-top: 0;
}
.serumIndex .ei_top {
  background-color: #fff;
  position: relative;
}
.serumIndex .l-wrapper {
  position: relative;
}
.serumIndex .l-container {
  position: relative;
}

.serumIndex .main {
  position: relative;
}

.serumIndex .mainInner {
  position: relative;
}

.serumIndex .pageTopBtn {
  bottom: min(15px, 1.25vw);
  font-size: 1.13rem;
  position: fixed;
  right: min(60px, 5vw);
  z-index: 2;
}
@media only screen and (max-width: 1200px) {
  .serumIndex .pageTopBtn {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 750px) {
  .serumIndex .pageTopBtn {
    bottom: 4.6428571429em;
    font-size: 3.7333333333vw;
    opacity: 0;
    pointer-events: none;
    right: 1.4285714286em;
  }
}
@media only screen and (max-width: 750px) and (min-width: 521px) {
  .serumIndex .pageTopBtn {
    font-size: 19.4133333333px;
  }
}
.serumIndex .pageTopBtn.is-show {
  opacity: 1;
  pointer-events: auto;
}
.serumIndex .pageTopBtn a {
  background-color: hsla(0, 0%, 100%, 0.9);
  border: 1px solid var(--colorBrn);
  border-radius: 50%;
  box-sizing: border-box;
  color: var(--colorBrn);
  display: block;
  height: 2.7777777778em;
  position: relative;
  text-decoration: none;
  width: 2.7777777778em;
}
@media only screen and (max-width: 750px) {
  .serumIndex .pageTopBtn a {
    border-width: 0.0357142857em;
    height: 1.7142857143em;
    width: 1.7142857143em;
  }
}
.serumIndex .pageTopBtn a:after {
  aspect-ratio: 1/1;
  border-bottom: 0.1111111111em solid;
  border-right: 0.1111111111em solid;
  bottom: 62%;
  box-sizing: border-box;
  content: "";
  height: auto;
  position: absolute;
  right: 50%;
  transform: rotate(-135deg);
  transform-origin: 100% 100%;
  transition-duration: 0.2s;
  transition-property: opacity, transform, filter;
  width: 26%;
}
@media only screen and (max-width: 750px) {
  .serumIndex .pageTopBtn a:after {
    border-width: 0.1071428571em;
    bottom: 70%;
    width: 35%;
  }
}
@media only screen and (min-width: 751px) {
  .serumIndex.is-load01 .pageTopBtn {
    opacity: 1;
    transform: none;
  }
}
.serumIndex.is-load01 .btmFixedBtn {
  opacity: 1;
  transform: none;
}
@media only screen and (min-width: 751px) {
  .serumIndex.is-scrollOn2 .pageTopBtn {
    opacity: 1;
    transform: none;
  }
}
.serumIndex.is-fixedBtnHide .btmFixedBtn {
  opacity: 0;
  pointer-events: none;
}
.serumIndex .btmFixedBtn {
  opacity: 0;
  transform: translateY(calc(105% + min(15px, 1.25vw)));
  transition-duration: 0.5s, 0.6s, 0.8s;
}
.serumIndex .pageTopBtn {
  opacity: 0;
  transition-duration: 0.5s, 0.6s, 0.8s;
  transition-property: opacity, transform, filter;
}
@media only screen and (min-width: 751px) {
  .serumIndex .pageTopBtn {
    transform: translateY(calc(105% + min(15px, 1.25vw)));
  }
}
.serumIndex .btmFixedBtn {
  bottom: min(15px, 1.25vw);
  font-size: 1.13rem;
  position: fixed;
  right: min(130px, 10.8333333333vw);
  transition-property: opacity, transform, filter;
  z-index: 2;
}
@media only screen and (max-width: 1200px) {
  .serumIndex .btmFixedBtn {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 750px) {
  .serumIndex .btmFixedBtn {
    bottom: 0;
    font-size: 3.7333333333vw;
    left: 0;
    right: 0;
  }
}
@media only screen and (max-width: 750px) and (min-width: 521px) {
  .serumIndex .btmFixedBtn {
    font-size: 19.4133333333px;
  }
}
.serumIndex .btmFixedBtn a {
  align-items: center;
  background-color: hsla(0, 0%, 100%, 0.9);
  background: linear-gradient(
    80deg,
    hsla(33, 45%, 76%, 0.9),
    hsla(43, 75%, 95%, 0.9) 50%,
    hsla(43, 75%, 95%, 0.9) 65%,
    hsla(40, 63%, 86%, 0.9)
  );
  border: 0.25em solid #bfa87e;
  border-radius: 5em;
  box-sizing: border-box;
  color: var(--colorBrn);
  column-gap: 0.625em;
  display: inline-grid;
  font-size: 0.8888888889em;
  font-weight: 700;
  grid-template-columns: 1fr auto 1fr;
  height: 3.125em;
  padding: 0 0.25em;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 17.5em;
}
@media only screen and (max-width: 750px) {
  .serumIndex .btmFixedBtn a {
    background: linear-gradient(80deg, #dec6a8, #fcf7ea 50%, #fcf7ea 65%, #f2e3c5);
    border-radius: 0;
    border-width: 0;
    border-top: 0.2142857143em solid #bfa87e;
    font-size: 1em;
    height: 3.5714285714em;
    justify-content: center;
    padding: 0 1.2142857143em 0 1.4285714286em;
    text-align: center;
    width: 100%;
  }
}
.serumIndex .btmFixedBtn a:before {
  content: "";
  margin-right: auto;
}
.serumIndex .btmFixedBtn a:after {
  aspect-ratio: 1/1;
  background: var(--colorBrn) url('../img/icon_cart.svg') no-repeat
    center center/contain;
  border-radius: 50%;
  content: "";
  margin-left: auto;
  width: 2.1875em;
}
@media only screen and (max-width: 750px) {
  .serumIndex .btmFixedBtn a:after {
    width: 2.1428571429em;
  }
}
.modalShop {
  box-sizing: border-box;
  font-size: 1.13rem;
  margin: min(80px, 6.6666666667%);
  max-width: 1040px;
  padding: 0;
  position: relative;
  width: calc(100% - min(160px, 13.3333333333%));
}
@media only screen and (max-width: 1200px) {
  .modalShop {
    font-size: 1.5vw;
  }
}
@media only screen and (max-width: 750px) {
  .modalShop {
    font-size: 3.7333333333vw;
    margin: 5.3333333333% 2.4%;
    width: 95.2%;
  }
}
@media only screen and (max-width: 750px) and (min-width: 521px) {
  .modalShop {
    font-size: 19.4133333333px;
  }
}
.modalShop .remodal-closeSticky {
  height: 0;
  left: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.modalShop .remodal-close {
  background-color: transparent;
  cursor: pointer;
  height: min(60px, 5.0847457627vw);
  margin: 10px;
  max-height: none;
  max-width: none;
  padding: 0;
  width: min(60px, 5.0847457627vw);
}
@media only screen and (max-width: 750px) {
  .modalShop .remodal-close {
    height: min(96px, 12.8vw);
    margin: 0;
    width: min(96px, 12.8vw);
  }
}
.modalShop .remodal-close > span {
  background-color: var(--colorBrn);
  border-radius: 50%;
  bottom: 0;
  display: block;
  height: 50%;
  left: 0;
  margin: auto;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
}
.modalShop .remodal-close > span:after,
.modalShop .remodal-close > span:before {
  background-color: #fff;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 46.6666666667%;
}
@media only screen and (max-width: 750px) {
  .modalShop .remodal-close > span:after,
  .modalShop .remodal-close > span:before {
    height: min(2px, 0.2666666667vw);
    width: 41.6666666667%;
  }
}
.modalShop .remodal-close > span:before {
  transform: rotate(45deg);
}
.modalShop .remodal-close > span:after {
  transform: rotate(-45deg);
}
.modalShop .remodal-close:after,
.modalShop .remodal-close:before {
  display: none;
}
.modalShop .modal-content {
  background-color: transparent;
  overflow: visible;
  position: relative;
}
.modalShop .modal-inner {
  background-color: #ededed;
  box-sizing: border-box;
  color: #000;
  padding: 0;
  position: relative;
  width: 100%;
}
.modalShop .remodal__main__inner {
  background: #fff;
  border: 1px solid var(--colorBrn);
  border-radius: 0.5555555556em;
  padding: 7.2727272727% 3.6363636364% 9.0909090909%;
}
@media only screen and (max-width: 750px) {
  .modalShop .remodal__main__inner {
    padding: 5.3221288515% 5.6022408964% 14.0056022409%;
  }
}
.modalShop__inner {
  margin: 0 auto;
  max-width: 800px;
}
.modalShop__mainTitle {
  color: var(--colorBrn);
  font-size: 1.2222222222em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1.5909090909em;
  text-align: left;
}
@media only screen and (max-width: 750px) {
  .modalShop__mainTitle {
    font-size: 1.1428571429em;
    margin-bottom: 1.5625em;
  }
}
.modalShop__itemInfoBox {
  margin-bottom: 9.375%;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfoBox {
    margin-bottom: 19.0476190476%;
  }
}
.modalShop__itemInfoBox:last-child {
  margin-bottom: 0;
}
.modalShop__itemInfo {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 7.5%;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfo {
    align-items: flex-start;
    margin-bottom: 7.9365079365%;
  }
}
.modalShop__itemInfoHeader {
  border-top: 1px solid #000;
  margin-bottom: 1.6666666667em;
  padding-top: 0.2777777778em;
  text-align: left;
  width: 100%;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfoHeader {
    margin-bottom: 1.4285714286em;
    padding-top: 0.5357142857em;
  }
}
.modalShop__itemInfoLead {
  font-size: 0.8888888889em;
  font-weight: 700;
  line-height: 1.5;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfoLead {
    font-size: 1.1428571429em;
  }
}
.modalShop__itemInfo__img {
  border: 1px solid var(--colorGry3);
  box-sizing: border-box;
  width: 25%;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfo__img {
    width: 47.619047619%;
  }
}
.modalShop__itemInfo__img img {
  display: block;
  height: auto;
  width: 100%;
}
.modalShop__itemInfo__txtBox {
  margin-left: 3.75%;
  text-align: left;
  width: 43.75%;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfo__txtBox {
    margin-left: 4.7619047619%;
    width: 47.619047619%;
  }
}
.modalShop__itemInfo__name {
  font-size: 0.8888888889em;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.5em;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfo__name {
    font-size: 1em;
    letter-spacing: 0;
  }
}
.modalShop__itemInfo__name2 {
  font-size: 0.7777777778em;
  line-height: 1.5;
}
@media only screen and (max-width: 750px) {
  .modalShop__itemInfo__name2 {
    font-size: 0.8571428571em;
    letter-spacing: 0;
  }
}
.modalShopList__items {
  margin-bottom: 10%;
}
@media only screen and (max-width: 750px) {
  .modalShopList__items {
    margin-bottom: 12.6984126984%;
  }
}
.modalShopList__items:last-child {
  margin-bottom: 0;
}
.modalShopList__item {
  margin-bottom: 3.75%;
}
.modalShopList__item:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 751px) {
  .modalShopList__item {
    border-top: 1px solid var(--colorGry3);
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__item {
    border-top: 1px solid var(--colorGry3);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 15.873015873%;
  }
}
.modalShopList__itemMain {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 3.75%;
}
@media only screen and (max-width: 750px) {
  .modalShopList__itemMain {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 7.9365079365%;
  }
  .modalShopList__itemMain:last-child {
    padding-bottom: 0;
  }
}
.modalShopList__itemHeader {
  margin-bottom: 2.2222222222em;
  padding-top: 0.5555555556em;
  text-align: left;
  width: 100%;
}
@media only screen and (max-width: 750px) {
  .modalShopList__itemHeader {
    padding-top: 0.8928571429em;
  }
}
.modalShopList__itemName {
  font-size: 0.8888888889em;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  margin-bottom: 0.2em;
}
@media only screen and (max-width: 750px) {
  .modalShopList__itemName {
    font-size: 1.1428571429em;
  }
}
.modalShopList__itemName2 {
  font-size: 0.8888888889em;
  line-height: 1.4;
  margin-bottom: 0.8em;
}
@media only screen and (max-width: 750px) {
  .modalShopList__itemName2 {
    font-size: 1.1428571429em;
  }
}
.modalShopList__itemName3 {
  font-size: 0.6666666667em;
  letter-spacing: 0.01em;
  line-height: 1.5;
}
@media only screen and (max-width: 750px) {
  .modalShopList__itemName3 {
    font-size: 0.7142857143em;
  }
}
.modalShopList__img {
  width: 16%;
}
@media only screen and (max-width: 750px) {
  .modalShopList__img {
    width: 25.3968253968%;
  }
}
.modalShopList__img img {
  display: block;
  height: auto;
  width: 100%;
}
@media only screen and (min-width: 751px) {
  .modalShopList__txtWrap {
    box-sizing: border-box;
    padding-left: 0.4444444444em;
    text-align: left;
    width: 21.25%;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__txtWrap {
    display: contents;
  }
}
.modalShopList__amount {
  letter-spacing: 0;
  line-height: 1.4;
  text-align: left;
}
@media only screen and (min-width: 751px) {
  .modalShopList__amount {
    font-size: 0.8888888889em;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__amount {
    font-size: 1.1428571429em;
    width: 31.746031746%;
  }
}
.modalShopList__price {
  line-height: 1.4;
}
@media only screen and (min-width: 751px) {
  .modalShopList__price {
    font-size: 0.8888888889em;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__price {
    box-sizing: border-box;
    font-size: 1.1428571429em;
    inline-size: fit-content;
    margin-left: auto;
    max-width: 42.0634920635%;
    padding-right: 2.380952381%;
    text-align: left;
    width: auto;
  }
}
.modalShopList__btnList {
  margin-left: auto;
  width: 62.5%;
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList {
    margin-top: 2.380952381%;
    width: 100%;
  }
}
.modalShopList__btnList__item {
  font-size: 0.8888888889em;
  margin-bottom: 8.6956521739%;
}
@media only screen and (min-width: 751px) {
  .modalShopList__btnList__item {
    align-items: center;
    display: flex;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__item {
    font-size: 1em;
    margin-bottom: 9.5238095238%;
  }
}
.modalShopList__btnList__item:last-child {
  margin-bottom: 0;
}
.modalShopList__btnList__item a {
  align-items: center;
  background-color: var(--colorBrn);
  border: 1px solid var(--colorBrn);
  border-radius: 5em;
  color: #fff;
  display: flex;
  height: 3.125em;
  justify-content: center;
  padding: 0 1.875em 0 0.625em;
  position: relative;
  text-decoration: none;
}
@media only screen and (min-width: 751px) {
  .modalShopList__btnList__item a {
    margin-left: auto;
    width: 64%;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__item a {
    height: 2.8571428571em;
  }
}
.modalShopList__btnList__item a:after,
.modalShopList__btnList__item a:before {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 1.6666666667em;
  position: absolute;
  right: 0.5555555556em;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6666666667em;
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__item a:after,
  .modalShopList__btnList__item a:before {
    height: 1.7857142857em;
    right: 0.6785714286em;
    width: 1.7857142857em;
  }
}
.modalShopList__btnList__item a:after {
  background: var(--colorBrn);
  mask: url('../img/icon_blank.svg') no-repeat center center/contain;
}
.modalShopList__btnList__item.btn02 a {
  background-color: #fff;
  color: var(--colorBrn);
}
.modalShopList__btnList__item.btn02 a img {
  display: block;
  height: auto;
  width: 4.625em;
}
.modalShopList__btnList__item.btn02 a:before {
  background: var(--colorBrn);
}
.modalShopList__btnList__item.btn02 a:after {
  background-color: #fff;
}
@media only screen and (min-width: 751px) {
  .modalShopList__btnList__logo,
  .modalShopList__btnList__logoL {
    margin-right: 3.8461538462%;
    width: 30.7692307692%;
  }
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__logo,
  .modalShopList__btnList__logoL {
    margin-bottom: 1em;
    text-align: center;
  }
}
.modalShopList__btnList__logo span,
.modalShopList__btnList__logoL span {
  display: block;
}
.modalShopList__btnList__logo img,
.modalShopList__btnList__logoL img {
  display: block;
  height: 1.875em;
  margin: 0 auto;
  width: auto;
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__logo img,
  .modalShopList__btnList__logoL img {
    height: 1.7857142857em;
  }
}
.modalShopList__btnList__logoL img {
  height: 2.625em;
}
@media only screen and (max-width: 750px) {
  .modalShopList__btnList__logoL img {
    height: 2.8571428571em;
  }
}
.modalShop__note {
  color: var(--colorGry2);
  font-size: 0.6666666667em;
  text-align: center;
}
@media only screen and (max-width: 750px) {
  .modalShop__note {
    font-size: 0.7142857143em;
  }
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(1turn);
  }
}
@keyframes scrollAttention {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }
  5% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(5%);
  }
}