.wrapper {
  overflow: visible;
}

.pane-contents {
  overflow: visible;
}

.pane-left-menu {
  display: none;
}

@media screen and (max-width: 768px) {
  .wrapper {
    overflow: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wrapper::-webkit-scrollbar {
    display: none;
  }
  .block-topic-path {
    margin-right: 0 !important;
  }
}

:root {
  --rgb: 255, 255, 255;
  --top_btn-color: #000;
  --opacity: 0.7;
  --basis-width: 768;
}

.img_overlay {
  max-width: 100%;
  text-align: center;
  position: relative;
}

.bk_wrap {
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
  height: 100vh;
  background-image: url("/images/Cellapy/back_img02.jpg");
  background-repeat: repeat-x;
  background-size: cover;
  background-position: 0 0;
  top: 0;
}

#cellapy {
  width: 768px;
  max-width: 100%;
  margin: -100vh auto 0;
  position: relative;
  background-color: rgba(165, 206, 204, 0.3);
  font-size: clamp(16px, calc((32 / 768) * 100vw), 32px);
}

#cellapy a {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  display: block;
  color: #000;
}

#cellapy a:hover {
  opacity: var(--opacity);
  text-decoration: none;
}

#cellapy img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  height: auto;
}

#cellapy button {
  padding: 0;
  border: none;
  outline: none;
  font: inherit;
  background: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  cursor: pointer;
}

#cellapy button:hover {
  opacity: var(--opacity);
}

#cellapy picture {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#cellapy .small {
  font-size: clamp(12px, calc((15 / 768) * 100vw), 15px);
  vertical-align: baseline;
  line-height: 1.6;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: normal;
}

#cellapy .caption {
  font-size: clamp(12px, calc((12 / 768) * 100vw), 12px);
  line-height: 1.5;
  text-align: left;
  vertical-align: super;
  letter-spacing: normal;
}

#cellapy .float {
  -webkit-animation: btn-float 1s ease-in-out infinite alternate;
          animation: btn-float 1s ease-in-out infinite alternate;
}

@-webkit-keyframes btn-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
}

@keyframes btn-float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(12px);
            transform: translateY(12px);
  }
}

#cellapy .tag {
  border: 1px solid #fff;
  display: inline-block;
  padding: 0 1em 0.1em;
}

#cellapy .top_btn a {
  color: var(--top_btn-color);
  font-size: clamp(16px, calc((24 / 768) * 100vw), 24px);
  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;
  width: calc((490/var(--basis-width))*100%);
  padding: 6% 0;
  margin: 0 auto;
  border: 1px solid var(--top_btn-color);
}

#cellapy .top_btn a:hover {
  text-decoration: none;
  color: var(--top_btn-color);
}

#cellapy .top_btn .arrow {
  position: relative;
  margin-left: -2em;
}

#cellapy .top_btn .arrow::after {
  content: "";
  position: absolute;
  top: 28%;
  right: -3em;
  border-right: 3px solid var(--top_btn-color);
  border-top: 3px solid var(--top_btn-color);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  width: 0.7em;
  height: 0.7em;
  display: block;
}

#cellapy .modal_btn {
  width: calc((682/var(--basis-width))*100%);
}

#cellapy picture[class*="__ttl"] {
  width: calc((480/var(--basis-width))*100%);
  margin-bottom: min(84px, calc((84 / 768) * 100vw));
}

#cellapy picture.slider__ttl {
  width: calc((223/var(--basis-width))*100%);
}

#cellapy .mv {
  position: relative;
}

#cellapy .mv .cart_btn {
  margin-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy .anchor {
  padding-top: min(192px, calc((192 / 768) * 100vw));
  padding-bottom: min(192px, calc((192 / 768) * 100vw));
}

#cellapy .anchor__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 0 auto;
  width: calc((683/var(--basis-width))*100%);
  row-gap: min(20px, calc((20 / 768) * 100vw));
}

#cellapy .bg__wrap {
  background-color: #fff;
}

#cellapy .lineup__ttl {
  padding-top: min(190px, calc((190 / 768) * 100vw));
}

#cellapy .lineup .cart_btn {
  margin: 0 auto;
  margin-top: min(60px, calc((60 / 768) * 100vw));
  width: calc((682/var(--basis-width))*100%);
}

#cellapy .lineup__item + .lineup__item {
  margin-top: min(192px, calc((192 / 768) * 100vw));
}

#cellapy .lineup__lead {
  width: calc((618/var(--basis-width))*100%);
}

#cellapy .lineup__data {
  width: calc((528/var(--basis-width))*100%);
}

#cellapy .lineup .item_name {
  font-size: clamp(16px, calc((36 / 768) * 100vw), 36px);
  font-weight: bold;
}

#cellapy .lineup .price {
  font-size: clamp(16px, calc((46 / 768) * 100vw), 46px);
  font-size: clamp(16px, calc((46 / 768) * 100vw), 46px);
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}

#cellapy .lineup .price__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#cellapy .lineup .price__tab {
  background-color: #FFFB87;
  color: #115156;
  font-size: clamp(16px, calc((25 / 768) * 100vw), 25px);
  font-weight: 600;
  padding: 0.1em 0.6em 0.2em;
  margin-left: 0.5em;
}

#cellapy .lineup .line {
  position: relative;
}

#cellapy .lineup .line::after {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: #fff;
  left: 0;
  top: 54%;
}

#cellapy .lineup .s_char {
  font-size: clamp(16px, calc((36 / 768) * 100vw), 36px);
}

#cellapy .lineup .unit {
  font-size: 65%;
}

#cellapy .lineup .sub_name {
  font-size: clamp(16px, calc((30 / 768) * 100vw), 30px);
  font-weight: 500;
}

#cellapy .secret {
  padding-top: min(190px, calc((190 / 768) * 100vw));
  padding-bottom: min(190px, calc((190 / 768) * 100vw));
}

#cellapy .secret__item-ttl {
  width: calc((74/var(--basis-width))*100%);
}

#cellapy .secret__item > * + * {
  margin-top: min(60px, calc((60 / 768) * 100vw));
}

#cellapy .secret__item-lead {
  margin-top: min(40px, calc((40 / 768) * 100vw));
  width: calc((496/var(--basis-width))*100%);
}

#cellapy .secret__item-txt {
  width: calc((625/var(--basis-width))*100%);
}

#cellapy .secret__item-notes {
  width: calc((661/var(--basis-width))*100%);
}

#cellapy .secret__item + .secret__item {
  margin-top: min(192px, calc((192 / 768) * 100vw));
}

#cellapy .secret .secret01_img02 {
  width: calc((663/var(--basis-width))*100%);
}

#cellapy .secret .secret02_img01 {
  width: calc((695/var(--basis-width))*100%);
}

#cellapy .recommend__img {
  width: calc((697/var(--basis-width))*100%);
}

#cellapy .recommend__txt {
  width: calc((681/var(--basis-width))*100%);
}

#cellapy .recommend__inner {
  background-color: #C8E1DF;
  padding-top: min(122px, calc((122 / 768) * 100vw));
  padding-bottom: min(122px, calc((122 / 768) * 100vw));
}

#cellapy .recommend__inner > * + * {
  margin-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy .recommend .cart_btn {
  margin: 0 auto;
  margin-top: min(122px, calc((122 / 768) * 100vw));
  width: calc((682/var(--basis-width))*100%);
}

#cellapy .recommend .small {
  margin-top: min(122px, calc((122 / 768) * 100vw));
  width: calc((620/var(--basis-width))*100%);
}

#cellapy .step {
  background-color: #fff;
  padding-top: min(122px, calc((122 / 768) * 100vw));
  padding-bottom: min(122px, calc((122 / 768) * 100vw));
}

#cellapy .step__inner {
  margin-top: min(40px, calc((40 / 768) * 100vw));
}

#cellapy .step__item-txt {
  margin-top: min(40px, calc((40 / 768) * 100vw));
  width: calc((627/var(--basis-width))*100%);
}

#cellapy .step__item-ttl {
  width: calc((576/var(--basis-width))*100%);
}

#cellapy .step__arrow {
  margin-top: min(50px, calc((50 / 768) * 100vw));
  width: calc((54/var(--basis-width))*100%);
}

#cellapy .faq {
  background-color: #fff;
  padding-top: min(192px, calc((192 / 768) * 100vw));
  padding-bottom: min(192px, calc((192 / 768) * 100vw));
}

#cellapy .faq summary {
  list-style: none;
}

#cellapy .faq summary::-webkit-details-marker {
  display: none;
}

#cellapy .faq__item {
  text-align: left;
}

#cellapy .faq__item + .faq__item {
  margin-top: min(40px, calc((40 / 768) * 100vw));
}

#cellapy .faq__item:last-child .anser {
  padding-bottom: 0;
}

#cellapy .faq .question {
  color: #fff;
  background-color: #74B0AD;
  padding: 1.4em 2.4em 1.4em 1.4em;
  position: relative;
}

#cellapy .faq .question::before {
  content: "";
  position: absolute;
  display: block;
  width: 1em;
  height: 4px;
  top: 50%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  right: 1.5em;
  background: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#cellapy .faq .question::after {
  content: "";
  position: absolute;
  display: block;
  width: 1em;
  height: 4px;
  top: 50%;
  right: 1.5em;
  background: #fff;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}

#cellapy .faq__item[open] > .question::before {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}

#cellapy .faq .anser {
  padding: 1.4em;
}

#cellapy .faq .anser .small {
  font-size: clamp(12px, calc((22 / 768) * 100vw), 22px);
}

#cellapy .modal__container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: .2s;
  transition: .2s;
  overscroll-behavior: contain;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -ms-touch-action: none;
      touch-action: none;
}

#cellapy .modal__container.active {
  opacity: 1;
  visibility: visible;
  z-index: 1000;
}

#cellapy .modal__container::before {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh + 1px);
  width: 1px;
}

#cellapy .modal__container::after {
  content: "";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh + 1px);
  width: 1px;
}

#cellapy .modal__container::-webkit-scrollbar {
  display: none;
}

#cellapy .modal__body {
  background-color: #fff;
  width: calc((682/var(--basis-width))*100%);
  padding-bottom: min(60px, calc((60 / 768) * 100vw));
  padding-top: min(60px, calc((60 / 768) * 100vw));
  max-width: 682px;
  margin: 0 auto;
  margin-top: min(280px, calc((280 / 768) * 100vw));
}

#cellapy .modal__contents > * + * {
  margin-top: min(40px, calc((40 / 768) * 100vw));
}

#cellapy .modal__wrap + .modal__wrap {
  margin-top: min(60px, calc((60 / 768) * 100vw));
}

#cellapy .modal__heading {
  width: calc((251/var(--basis-width))*100%);
}

#cellapy .modal__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  --basis-width: 682;
  width: calc((614/var(--basis-width))*100%);
  margin-top: min(30px, calc((30 / 768) * 100vw));
  margin-left: auto;
  margin-right: auto;
  gap: 1cqw 2%;
}

#cellapy .modal__item {
  width: 49%;
}

#cellapy .modal__close {
  margin-top: min(60px, calc((60 / 768) * 100vw));
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
}

#cellapy .modal__lead {
  width: calc((413/682)*100%);
}

#cellapy .modal__txt {
  width: calc((286/682)*100%);
}

#cellapy .slider__area {
  color: #000;
  background-color: #fff;
  font-size: clamp(16px, calc((30 / 768) * 100vw), 30px);
  padding-top: min(122px, calc((122 / 768) * 100vw));
  padding-bottom: min(122px, calc((122 / 768) * 100vw));
  text-align: left;
  margin-top: min(122px, calc((122 / 768) * 100vw));
}

#cellapy .slider__small {
  font-size: clamp(12px, calc((21 / 768) * 100vw), 21px);
  text-align: center;
  margin-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy .slider_arrow {
  position: absolute;
  top: calc(50% - 0.35em);
  content: "";
  display: block;
  height: 50px;
  width: calc((50/var(--basis-width))*100%);
  background: rgba(164, 205, 203, 0.7);
}

#cellapy .slider_prev_arrow {
  left: 0;
  z-index: 1;
}

#cellapy .slider_prev_arrow::after {
  position: absolute;
  content: "";
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
  height: 45%;
  width: 45%;
  top: 28%;
  left: 38%;
}

#cellapy .slider_next_arrow {
  right: 0;
}

#cellapy .slider_next_arrow::after {
  position: absolute;
  content: "";
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  height: 45%;
  width: 45%;
  top: 28%;
  left: 18%;
}

#cellapy .voice__ttl {
  font-size: clamp(16px, calc((36 / 768) * 100vw), 36px);
  font-weight: 500;
  margin-top: min(10px, calc((10 / 768) * 100vw));
}

#cellapy .voice_slider {
  position: relative;
}

#cellapy .voice_slider_wrap {
  display: -ms-grid;
  display: grid;
      grid-template-areas: "img lead"
 "txt txt";
  -ms-grid-columns: calc((201/653)*100%) 1fr;
      grid-template-columns: calc((201/653)*100%) 1fr;
  width: calc((653/var(--basis-width))*100%);
  margin: 0 auto;
}

#cellapy .voice__img {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: img;
}

#cellapy .voice__wrap01 {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  grid-area: lead;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  padding-left: 1.5em;
}

#cellapy .voice__wrap01 .star {
  margin-left: 0;
}

#cellapy .voice__wrap02 {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: txt;
  margin-top: min(30px, calc((30 / 768) * 100vw));
}

#cellapy .voice__txt {
  font-size: clamp(16px, calc((30 / 768) * 100vw), 30px);
}

#cellapy .voice__name {
  font-size: clamp(16px, calc((26 / 768) * 100vw), 26px);
  text-align: right;
  margin-top: min(20px, calc((20 / 768) * 100vw));
}

#cellapy .tab {
  width: calc((378/var(--basis-width))*100%);
}

#cellapy .tab_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

#cellapy .skincare .cart_btn {
  -webkit-filter: drop-shadow(5px 6px 8px #003D31);
          filter: drop-shadow(5px 6px 8px #003D31);
}

#cellapy .skincare .lineup__item {
  background-color: #115156;
  padding-top: min(120px, calc((120 / 768) * 100vw));
  padding-bottom: min(190px, calc((190 / 768) * 100vw));
}

#cellapy .skincare .lineup .item_name {
  color: #fff;
}

#cellapy .skincare .lineup .price {
  color: #fff;
}

#cellapy .skincare .lineup__detail {
  padding-bottom: min(70px, calc((70 / 768) * 100vw));
}

#cellapy .skincare .lineup__detail .lineup__lead {
  margin-top: min(120px, calc((120 / 768) * 100vw));
}

#cellapy .skincare .lineup__detail .item04__txt {
  width: calc((519/var(--basis-width))*100%);
  margin-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy .skincare .lineup__detail .item04__img02 {
  width: calc((695/var(--basis-width))*100%);
  margin-top: min(120px, calc((120 / 768) * 100vw));
}

#cellapy .skincare .secret__item-img {
  width: calc((706/var(--basis-width))*100%);
}

#cellapy .skincare .recommend {
  background-color: #115156;
  padding-top: min(120px, calc((120 / 768) * 100vw));
  padding-bottom: min(120px, calc((120 / 768) * 100vw));
}

#cellapy .skincare .recommend__txt {
  padding-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy .skincare .skincare-item01 .tag {
  font-size: clamp(16px, calc((32 / 768) * 100vw), 32px);
  font-weight: bold;
  color: #fff;
  margin-top: min(20px, calc((20 / 768) * 100vw));
}

#cellapy .skincare .skincare-item01 .price {
  margin-top: min(15px, calc((15 / 768) * 100vw));
}

#cellapy .skincare .skincare-item01 .lineup__lead {
  width: calc((675/var(--basis-width))*100%);
}

#cellapy .skincare .skincare-item01 .lineup__link {
  position: relative;
}

#cellapy .skincare .skincare-item01 .lineup__ico {
  width: calc((172/var(--basis-width))*100%);
  position: absolute;
  top: 6%;
  right: 5%;
}

#cellapy .skincare .skincare-item01 .lineup__detail {
  padding-bottom: 0;
}

#cellapy .skincare .skincare-item01 .secret__item-lead {
  width: calc((608/var(--basis-width))*100%);
}

#cellapy .skincare .skincare-item01 .secret__item-img {
  width: auto;
}

#cellapy .skincare .skincare-item01 .secret__item-txt {
  width: calc((666/var(--basis-width))*100%);
}

#cellapy .skincare .skincare-item01 .recommend {
  background-color: #fff;
}

#cellapy *[class*="item05__txt"] {
  width: calc((533/var(--basis-width))*100%);
  margin-top: min(84px, calc((84 / 768) * 100vw));
}

#cellapy *[class*="item05__img"] {
  margin-top: min(120px, calc((120 / 768) * 100vw));
}

#cellapy .item05__txt01 {
  width: calc((533/var(--basis-width))*100%);
}

#cellapy .item05__txt02 {
  width: calc((533/var(--basis-width))*100%);
}

#cellapy .item05__img01 {
  margin-top: 0;
}

#cellapy .item05__img03 {
  width: calc((694/var(--basis-width))*100%);
}

#cellapy .bodycare .lineup {
  background-color: #C8E1DF;
  padding-top: min(122px, calc((122 / 768) * 100vw));
}

#cellapy .bodycare .lineup .line::after {
  background-color: #000;
}

#cellapy .float__btn {
  position: absolute;
  top: 24%;
  right: 5%;
  width: calc((239/var(--basis-width))*100%);
  -webkit-filter: drop-shadow(0.8cqw 0.8cqw 1cqw #003d31);
          filter: drop-shadow(0.8cqw 0.8cqw 1cqw #003d31);
}

@media screen and (max-width: 768px) {
  #cellapy a:hover {
    opacity: 1;
    text-decoration: none;
  }
  #cellapy button:hover {
    opacity: 1;
  }
  #cellapy a:active {
    opacity: var(--opacity);
    text-decoration: none;
  }
  #cellapy button:active {
    opacity: var(--opacity);
  }
  #cellapy .top_btn .arrow::after {
    border-right: 2px solid var(--top_btn-color);
    border-top: 2px solid var(--top_btn-color);
  }
  #cellapy .faq .question::before {
    height: 2px;
  }
  #cellapy .faq .question::after {
    height: 2px;
  }
  #cellapy .modal__contents {
    overflow-y: scroll;
  }
  #cellapy .slider_arrow {
    height: calc((50/768)*100vw);
  }
  #cellapy .slider_arrow::after {
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
  }
  .tab_group_top {
    padding-top: 16vw;
    margin-top: -16vw;
  }
}
/*# sourceMappingURL=c_cellapy.css.map */