@charset "UTF-8";

/* --------------------------------------------------

基本スタイル

-------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  outline: none;
}
.wrapper {
  max-width: 750px;
  margin: auto;
  overflow: hidden;
}
.wrapper * {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.wrapper ul,
.wrapper dl {
  list-style: none;
}
/* .wrapper img,
.wrapper video {
  width: 100%;
  height: auto;
  vertical-align: top;
} */
img,
video {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.wrapper > div {
  /* position: relative; */
  /* overflow: hidden; */
}
.wrapper .slider {
  display: none;
}
.wrapper .slider.slick-initialized {
  display: block;
}

/* --------------------------------------------------

offer

-------------------------------------------------- */
.wrapper .cta {
  position: relative;
}
.wrapper .cta .btn {
  position: absolute;
  top: 57.4%;
  left: 45%;
  width: 49.2%;
}

/* --------------------------------------------------

各コンテンツ

-------------------------------------------------- */
.wrapper .float {
  position: fixed;
  bottom: 1%;
  z-index: 9999;
  width: 100%;
  max-width: 750px;
  text-align: center;
}
.wrapper .float img {
  width: 93.333%;
}

.wrapper .fv .line {
  position: absolute;
  top: 85.5%;
  left: 3.6%;
  width: 0%;
  height: 5.9%;
  background: url("../images/fv/shirosai_fv_line_sp.png") top left no-repeat;
  background-size: cover;
  transition-duration: 0.8s;
}
.wrapper .fv .line.move {
  width: 61.2%;
}
.wrapper .fv .arrow {
  position: absolute;
  top: 64.2%;
  left: 43.6%;
  width: 52.8%;
  transition-duration: 0.8s;
  opacity: 0;
  transform: scale(0) rotateZ(90deg);
}
.wrapper .fv .arrow.move {
  opacity: 1;
  transform: scale(1) rotateZ(0deg);
  transform-origin: left center;
}
.wrapper .fv .percent {
  position: absolute;
  top: 72%;
  left: 4%;
  width: 65.733%;
}
.wrapper .fv .up {
  position: absolute;
  top: 60.7%;
  left: 62%;
  width: 33.6%;
  transition-duration: 0.8s;
  opacity: 0;
}
.wrapper .fv .up.move {
  opacity: 1;
}

.wrapper .clinical_trial {
  position: relative;
}

.wrapper .clinical_trial .gif1 {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 90%;
}
.wrapper .clinical_trial .gif2 {
  position: absolute;
  top: 66%;
  left: 5%;
  width: 90%;
}

.wrapper .published .graph {
  position: absolute;
  top: 55.6%;
  left: 6.6%;
  width: 86.8%;
  transition: 0.8s cubic-bezier(0.27, 1.47, 0.76, 1.01);
  transform: scale(0);
}
.wrapper .published .graph.move {
  transform: scale(1);
}

.wrapper .development .gif {
  position: absolute;
  top: 70%;
  left: 5%;
  width: 90%;
}
.wrapper .development .catch {
  position: absolute;
  top: 59%;
  left: 0%;
  width: 100%;
}

.wrapper .media video {
  position: absolute;
  top: 66%;
  left: 5%;
  width: 90%;
}

.wrapper .unrequited .let1 {
  position: absolute;
  top: 59.7%;
  left: 11.6%;
  width: 12.533%;
  transition-duration: 0.6s;
  opacity: 0;
}
.wrapper .unrequited .let1.move {
  opacity: 1;
}
.wrapper .unrequited .let2 {
  position: absolute;
  top: 59.7%;
  left: 35%;
  width: 54.8%;
  transition-duration: 0.6s;
  opacity: 0;
}
.wrapper .unrequited .let2.move {
  opacity: 1;
}

.wrapper .cause .slider_wrap {
  position: absolute;
  top: 26%;
  left: 4.666%;
  width: 90.666%;
}
.wrapper .cause .slider_wrap .slider .slick-dots {
  display: flex;
  justify-content: space-between;
  bottom: auto;
  top: -10%;
  height: 10%;
}
.wrapper .cause .slider_wrap .slider .slick-dots li {
  width: 48.529% !important;
  height: 100% !important;
  margin: 0 !important;
}
.wrapper .cause .slider_wrap .slider .slick-dots li:nth-child(1) {
  background: url("../images/cause/shirosai_cause_tab1_off_sp.png") left top
    no-repeat;
  background-size: cover;
}
.wrapper .cause .slider_wrap .slider .slick-dots li:nth-child(2) {
  background: url("../images/cause/shirosai_cause_tab2_off_sp.png") left top
    no-repeat;
  background-size: cover;
}
.wrapper .cause .slider_wrap .slider .slick-dots li.slick-active:nth-child(1) {
  background: url("../images/cause/shirosai_cause_tab1_on_sp.png") left top
    no-repeat;
  background-size: cover;
}
.wrapper .cause .slider_wrap .slider .slick-dots li.slick-active:nth-child(2) {
  background: url("../images/cause/shirosai_cause_tab2_on_sp.png") left top
    no-repeat;
  background-size: cover;
}
.wrapper .cause .slider_wrap .slider .slick-dots li * {
  display: none;
}
.wrapper .cause .icon li {
  position: absolute;
  width: 20.666%;
  transition: 0.5s cubic-bezier(0.81, 0.07, 0.43, 0.96);
  transform: translateY(-200%);
}
.wrapper .cause .icon li:nth-child(1) {
  top: 76%;
  left: 5%;
}
.wrapper .cause .icon li:nth-child(2) {
  top: 82.3%;
  left: 5%;
}
.wrapper .cause .icon li:nth-child(3) {
  top: 76%;
  right: 5%;
}
.wrapper .cause .icon li:nth-child(4) {
  top: 82.3%;
  right: 5%;
}
.wrapper .cause .icon li.move {
  transform: translateY(0%);
}

.wrapper .answer .ceramide {
  position: absolute;
  top: 6.4%;
  left: 6.2%;
  width: 86.6%;
  transition-duration: 0.6s;
  opacity: 0;
  transform: translateY(-20px);
}
.wrapper .answer .ceramide.move {
  opacity: 1;
  transform: translateY(0px);
}

.wrapper .lamella .gif1 {
  position: absolute;
  top: 19.8%;
  left: 10%;
  width: 80%;
}
.wrapper .lamella .gif2 {
  position: absolute;
  top: 38.2%;
  left: 10%;
  width: 80%;
}
.wrapper .lamella .gif3 {
  position: absolute;
  top: 85.4%;
  left: 13%;
  width: 74%;
}

.wrapper .component {
  position: relative;
}
.wrapper .component .icon li {
  position: absolute;
  transition-duration: 0.8s;
  opacity: 0;
}
.wrapper .component .icon li:nth-child(1) {
  top: 2.2%;
  left: 50%;
  width: 42.533%;
}
.wrapper .component .icon li:nth-child(2) {
  top: 5%;
  left: 31%;
  width: 42.533%;
}
.wrapper .component .icon li:nth-child(3) {
  top: 8%;
  left: 50%;
  width: 39.333%;
}
.wrapper .component .icon li.move {
  opacity: 1;
}
.wrapper .component .let {
  position: absolute;
  top: 2%;
  left: 5.2%;
  width: 25.733%;
  transition-duration: 0.8s;
  opacity: 0;
}
.wrapper .component .let.move {
  opacity: 1;
}

.wrapper .massage {
  position: relative;
}

.wrapper .massage .slider_wrap {
  position: absolute;
  top: 26%;
  left: 0%;
  width: 100%;
}
.wrapper .massage .slider_wrap .slider .slick-dots {
  bottom: -16px !important;
}
.wrapper .massage .slider_wrap .slider .slick-dots li {
  width: 9px !important;
  height: 9px !important;
  margin: 0px 3px !important;
  background-color: #ffffff;
  border-radius: 50%;
}
.wrapper .massage .slider_wrap .slider .slick-dots li.slick-active {
  background-color: #002870;
}
.wrapper .massage .slider_wrap .slider .slick-dots li * {
  display: none;
}

.wrapper .faq .list {
  padding-bottom: 5%;
  background-color: #f0f0f0;
}
.wrapper .faq .list dt,
.wrapper .faq .list dd {
  width: 90%;
  margin: auto;
}
.wrapper .faq .list dt {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 2% 3%;
  box-sizing: border-box;
  background-color: #229cb9;
  cursor: pointer;
}
.wrapper .faq .list dt:nth-of-type(n + 2) {
  margin-top: 5%;
}
.wrapper .faq .list dt .q {
  width: 5.185%;
  margin-right: 3%;
  font-size: 4.2vw;
  line-height: 1.4em;
}
.wrapper .faq .list dt .q img {
  vertical-align: middle;
}
.wrapper .faq .list dt p {
  color: #ffffff;
  font-size: 4.2vw;
  line-height: 1.4em;
}
.wrapper .faq .list dt::after {
  content: "";
  display: block;
  position: absolute;
  top: 0%;
  right: 3%;
  width: 5%;
  height: 100%;
  background: url("../img/shirosai_faq_arrow_sp.png") center center
    no-repeat;
  background-size: contain;
  transition-duration: 0.6s;
}
.wrapper .faq .list dt.open::after {
  transform: rotateZ(180deg);
}
.wrapper .faq .list dd {
  font-size: 95%;
  line-height: 1.4em;
  box-sizing: border-box;
  padding: 2% 6%;
  text-align: justify;
  text-justify: inter-ideograph;
  background-color: #ffffff;
  display: none;
}
@media screen and (min-width: 750px) {
  .wrapper .faq .list dt .q {
    font-size: 31.458px;
  }
  .wrapper .faq .list dt p {
    font-size: 31.458px;
  }
}

/* footer {
  background: #5eb9df;
  margin-top: 5%;
}
.footer ul li {
  background: #c8e7f4;
  list-style: none inside;
}
.footer ul li {
  border-top: #fff solid 1px;
}
.footer ul li a {
  color: #333;
  text-decoration: none;
}
.footer .footer_link a span {
  background: url(https://b-shiki.jp/shirosai/img/footer_arrow.png) no-repeat
    97% center;
  background-size: 10px;
  display: block;
  padding: 3% 0% 3% 10%;
}
.footer .specific {
  background: url(https://b-shiki.jp/shirosai/img/footer_icon_specific.png)
    no-repeat 3% center;
  background-size: 30px;
  display: block;
}
.footer .company {
  background: url(https://b-shiki.jp/shirosai/img/footer_icon_company.png)
    no-repeat 3% center;
  background-size: 30px;
  display: block;
}
.footer .privacy {
  background: url(https://b-shiki.jp/shirosai/img/footer_icon_privacy.png)
    no-repeat 3% center;
  background-size: 30px;
  display: block;
}
.footer .footer_top {
  background: url(https://b-shiki.jp/shirosai/img/footer_icon_top.png) no-repeat
    3% center;
  background-size: 30px;
  display: block;
}
.footer .copy {
  background: #5eb9df;
  color: #fff;
  text-align: center;
  font-size: 0.8rem;
  padding: 2% 0%;
} */

/* --------------------------------------------------

↓↓↓　2021/12/29 - 2022/1/5 追加　↓↓↓

-------------------------------------------------- */
.fv_layout {
  max-width: 750px;
  margin: 0 auto;
}
.fv_layout_gif {
  top: 46%;
}

.fv-top-fade-box {
  overflow: hidden;
}
.fv-top-fade,
.fv-top-fade-02 {
  width: 96%;
  display: inline-block;
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  margin: auto;
  -webkit-animation-name: fv-bounce;
  animation-name: fv-bounce;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.fv-top-fade-02 {
  -webkit-animation-delay: -2.5s;
  animation-delay: -2.5s;
}

.fv-bottom-fade-box {
  width: 90%;
  display: block;
  position: absolute;
  bottom: 22%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 15%;
}

@keyframes fv-bounce {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.uservoice {
  padding-bottom: 30px;
}
.slider03 .slick-dots li {
  margin: 0;
}
.slider03 .slick-dots li.slick-active button:before {
  color: #002870;
}

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

.guide .toggle_title {
  position: relative;
  cursor: pointer;
}

.guide .toggle_title .arrow {
  background: url(https://b-shiki.jp/shirosai/img/footer_arrow.png) no-repeat
    97% center;
  background-size: 10px;
  display: block;
  padding: 3% 0% 3% 10%;
}

.guide .toggle_btn {
  position: absolute;
  top: 50%;
  right: 110px;
  transform: translateY(-50%);
  display: block;
  width: 24px;
  height: 24px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-radius: 50%;
}

.guide .toggle_btn:before {
  width: 2px;
  height: 10px;
}

.guide .toggle_contents dt {
  background: #c8e7f4;
  list-style: none inside;
  color: #333;
  border-top: #fff solid 1px;
}

.guide .toggle_contents dd {
  display: none;
}

.float-bnr {
  display: none;
}

.float-bnr.b_btn_active {
  display: block;
  opacity: 1;
  transition: 1s;
  pointer-events: painted;
}

.slick-prev {
  left: 4px !important;
  z-index: 999;
}
.slick-next {
  right: 14px !important;
  z-index: 999;
}

.slick-prev:before,
.slick-next:before {
  color: #002870 !important;
  font-size: 30px !important;
}