@charset "UTF-8";
/*//////////////////////////////////////////////////

Title : LP CSS

//////////////////////////////////////////////////*/

/* ========================================================
                      * Layout style *
========================================================= */
#footer{
  margin-top: 0;
}
/* PC用*/
@media (min-width: 769px) {

  :root {
    --hH: 14.3rem;
  }
}
@media (min-width: 769px) and (max-width: 980px) {

  :root {
    --hH: 16rem;
  }
}

/* SP用*/
@media (max-width: 768px) {

  :root {
    --hH: 15.8rem;
  }
  .main_inner{
    padding: 0;
  }
  body{
    overflow-x:visible;
  }
}

.contents {
}

#share {
  z-index: 100 !important;
}

#FooterWrap {
  background: #fff;
}

#header.is-scroll,
#header.scroll {
  position: relative;
  animation: unset;
}

header,
header.is-scroll,
header.scroll {
  top: unset;
  animation: unset;
}

#fixed-navigation.fixed {
  position: unset;
}

#HeaderWrap #header,
#HeaderWrap #header.fixed_on {
  position: fixed;
  transform: translateZ(2px);
  animation: hdrfx_front .8s ease 0s 1 forwards;
}

#HeaderWrap #header.fixed_on {
  top: -20rem;
}

#HeaderWrap #header.fixed_off {
  position: fixed;
  top: 0;
  animation: hdrfx_back .8s ease 0.2s 1 forwards;
}

@keyframes hdrfx_front {
  100% {
    top: 0;
  }
}

@keyframes hdrfx_back {
  100% {
    top: -20rem;
  }
}

#header_txt_slider,
#header_img_slider,
.cam_bnr_wrap {
  display: none;
}

/* ===================
         FONT
=================== */
/* nomal */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Regular.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Regular.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}
/* bold */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Bold.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Bold.woff) format('woff');
  font-weight: bold;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: "YuGothic";
  src: url(../font/YuGothic/otf/YuGothic-Medium.otf) format('otf');
  src: url(../font/YuGothic/woff/YuGothic-Medium.woff) format('woff');
  font-weight: medium;
  font-style: normal;
}

/* light */
@font-face {
  font-family: "Alright Sans";
  src: url(../font/AlrightSans-Light.otf) format('otf');
  src: url(../font/AlrightSans-Light.woff) format('woff');
  font-weight: 100;
  font-style: normal;
}
/* Medium */
@font-face {
  font-family: "Alright Sans";
  src: url(../font/AlrightSans.otf) format('otf');
  src: url(../font/AlrightSans.woff) format('woff');
  font-weight: medium;
  font-style: normal;
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  position: relative;
  margin: 0 auto;
  font-family: 'Open Sans', YuGothic, "游ゴシック体", "メイリオ", "Meiryo", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  color: #000;
  font-size: 1.4rem;
  /*background: url(../img/bg_logo.svg) no-repeat calc(50% + 65rem / 1.5) calc(37.8rem / 1.5) ,url(../img/bg_logo.svg) no-repeat calc(50% - 65rem / 1.5) calc(37.8rem / 1.5) ;
  background-size: calc(31rem / 1.5),calc(31rem / 1.5);
  background-color: #008541;*/
}

.lp_contents .inner {
  width: calc(75rem / 1.5);
  margin: auto;
  background: #fff;
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a {
  color: #000;
}

.lp_contents a,
.lp_contents a:focus,
.lp_contents a:active {
  outline: none;
}

.lp_contents a:hover {
}

.lp_contents img {
  max-width: 100%;
}

.lp_contents sup {
  color: #000;
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    color .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    background-color .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    background-image .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    border-color .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    text-shadow .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ,
    text-weight .3s cubic-bezier(0.41, 0.17, 0.42, 0.96) ;
}

.lp_contents h1 {
  padding: 0;
}

p {
  text-align: left;
}

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}

.txt_en {
  font-family: "freight-neo-pro", "yu-mincho-pr6n", sans-serif;
}

/* ===================
  　　 General
=================== */

.lp_contents .txt_center {
  text-align: center;
}

.lp_contents .txt_bold {
  font-weight: bold;
}

.lp_contents .txt_en {
  font-family: 'Cinzel', serif;
}

@keyframes fadeIn {
  0% {
    display: none;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}

/* ===================
  　　　Animation
=================== */

/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes tra3_2 {
  0% { transform:translateY(90px) scale(1.06)}
  50% { transform:translateY(0) }
  70% { transform:translateY(20px)}
  100% { transform:translateY(0)  scale(1)}
}


@keyframes tra3_3 {
  0% { transform:translateY(100px)}
  40% { transform:translateY(0) }
  70% { transform:translateY(30px)}
  100% { transform:translateY(0) }

}

@keyframes tra3_4 {
  0% { transform:translateY(70px) scale(1.12)}
  50% { transform:translateY(0) scale(1.12)}
  70% { transform:translateY(5px) scale(1)}
  100% { transform:translateY(0)  scale(1)}
}


.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.ef-top {
  opacity: 0;
  transform:translateY(70px);
}

.ef-top.effect {
  animation: opa1 0.8s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, top_bound 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

@keyframes top_bound {
  0% { transform:translateY(70px) }
  50% { transform:translateY(0) }
  70% { transform:translateY(10px) }
  100% { transform:translateY(0) }
}

.ef-top2 {
  opacity: 0;
  transform:translateY(90px) scale(1.06);
}

.ef-top2.effect {
  animation: opa1 0.8s cubic-bezier(0.41, 0.17, 0.42, 0.96) 0s 1 forwards, tra3_2 0.9s ease-out 0s 1 forwards;
}

.ef-top3 {
  opacity: 0;
  transform:translateY(100px);
}

.ef-top3.effect {
  animation: opa1 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, tra3_3 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  animation: opa1 1.5s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, tra5 1.5s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.ef-lg.effect {
  animation: opa1 1.5s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, tra6 1.5s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

/* ===================
  　Section Common
=================== */

.section {
  position: -webkit-sticky;
  position: sticky;
  transform: translateZ(1px);
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

/* ===================
     Text Setting
=================== */

.txt_cont {
  text-align: center;
  line-height: 1.7;
}

/* ===================
  Button Setting
=================== */

.btn_wrap {
  text-align: center;
}

/* ===================
  　　FIXED　LOGO
=================== */
.fixed_logo_wrap {
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.45, 0.38, 0.4, 1.2);
  position: -webkit-sticky;
  position: sticky;
  top: 0%;
  left: calc(50% - 90rem / 1.5);
  width: calc(31.1rem / 1.5);
  height: calc(30.2rem / 1.5);
}

.nav-effect .fixed_logo_wrap {
  opacity: 1;
}

.fixed_logo_wrap svg {
  position: relative;
  bottom:  calc(-30.2rem / 1.5);
  width: calc(33rem / 1.5);
}

.intro_section .logo_side svg,
.intro_section .fixed_nav_wrap svg {
  fill: #fff;
}

.laundry_section .logo_side svg,
.laundry_section .fixed_nav_wrap svg {
  fill: #d32b1f;
}

.handWash_section .logo_side svg,
.handWash_section .fixed_nav_wrap svg {
  fill: #2683c7;
}

.refill_section .logo_side svg,
.refill_section .fixed_nav_wrap svg {
  fill: #eea1b2;
}

.about_section .logo_side svg,
.about_section .fixed_nav_wrap svg {
  fill: #ffc800;
}

/* ===================
  　　FIXED　NAVI
=================== */

.fixed_nav_wrap {
  opacity: 0;
  transition: opacity .3s cubic-bezier(0.45, 0.38, 0.4, 1.2),top .3s cubic-bezier(0.45, 0.38, 0.4, 1.2);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  right: calc(50% - 95rem / 1.5);
  height: calc(30.2rem / 1.5);
}

.intro_section .fixed_logo_wrap,
.intro_section .fixed_nav_wrap {
  top: calc(var(--hH) / 1.5);
}

.intro_section .fixed_logo_wrap.fixed_off,
.intro_section .fixed_nav_wrap.fixed_off {
  top: 0;
}

/* SP用*/
@media (max-width: 1500px) {
  .fixed_logo_wrap {
    left: calc(50% - 78rem / 1.5);
  }

  .fixed_nav_wrap {
    right: calc(50% - 78rem / 1.5);
  }
}

.nav-effect .fixed_nav_wrap {
  opacity: 1;
}

.fixed_page_nav {
  position: relative;
  bottom: calc(-30.2rem / 1.5);
}

.fixed_page_nav a {
  position: relative;
  z-index: 1;
  display: block;
}

.fixed_page_nav svg {
  height: calc(1.8rem / 1.5);
}

.fixed_page_nav svg,
.fixed_page_nav svg path {
  outline: none !important;
}

.fixed_page_nav li:last-child svg {
  height: calc(2.4rem / 1.5);
}

.fixed_page_nav li {
  margin-bottom: calc(6rem / 1.5);
}

.fixed_page_nav li:last-child {
  margin-bottom: 0;
}

/* ===================
  　　　INTRO
=================== */

.intro_section {
  top: calc(-1300rem / 1.5);
  background-color: #318748;
}

.intro_section .inner {
  padding: 0 calc(2.8rem / 1.5) calc(11rem / 1.5);
}

.intro_section .fv_area {
  margin: 0 calc(-2.8rem / 1.5);
}

/* ------ FV ------ */
.fv_area {
  position: relative;
  height: calc(1200rem / 1.5);
}

.fv_area_inner {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--hH) / 1.5);
  left: 0;
  height: calc(123rem / 1.5);
  overflow: hidden;
}

.fv_bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.fv_area_cont {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fv_area_cont.active {
  opacity: 1;
}

/* ---- fv_area01 ---- */
#fv01 {
}

.fv_scroll {
  position: absolute;
  top: calc(27rem / 1.5);
  left: calc(24rem / 1.5);
  z-index: 7;
  width: calc(29rem / 1.5);
  animation: tikatika 1.5s cubic-bezier(0.04, 0.92, 0.7, 1.42) infinite;
}

#fv01 .fv_box {
  position: absolute;
  left: calc(12.5rem / 1.5);
  bottom: calc(3.8rem / 1.5);
  width: calc(49rem / 1.5);
}

#fv01 .fv_box img {
  position: relative;
  z-index: 1;
  animation: gatagata 1.6s cubic-bezier(0.04, 0.92, 0.7, 1.42) infinite, bounce 1.6s infinite cubic-bezier(0.51, 0.05, 0.79, 0.37);
}

@keyframes tikatika {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes gatagata {
  0% {
    transform: rotate(-5deg);
  }

  15% {
    transform: rotate(5deg);
  }

  30% {
    transform: rotate(-5deg);
  }

  45% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-2deg);
  }

  75% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes bounce {
  0%   {top:0;  }
  10%  { top: -4rem }
  20%  {top: 0}
  30%  { top: -3rem; }
  40%  {top: 0}
  50%  { top: -1rem; }
  55%  { top: 0}
  100% {top: 0}
}

/* ---- fv_area02 ---- */
#fv02 {
  position: relative;
}

#fv02::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
  content: "";
}

#fv02.active::before {
  animation: strobe_aninme 0.6s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

@keyframes strobe_aninme {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}

#fv02 .fv_logo {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity .5s cubic-bezier(0, 0.98, 1, 1) .2s,transform .6s cubic-bezier(0, 0.98, 1, 1) .2s;
  position: absolute;
  top: calc(3rem / 1.5);
  left: calc(21rem / 1.5);
  z-index: 1;
  width: calc(36rem / 1.5);
}

#fv02.active .fv_logo {
  opacity: 1;
  transform: scale(1);
  transition-delay: .4s,.4s;
}

#fv02 .fv_character01 {
  opacity: 0;
  transform: translateX(4rem) translateY(4rem) scale(0.85);
  /*transition: opacity .6s cubic-bezier(0, 0.98, 1, 1) .22s,transform .5s cubic-bezier(0, 0.98, 1, 1) .22s;*/
  position: absolute;
  bottom: calc(21rem / 1.5);
  z-index: 2;
  left: calc(-9rem / 1.5);
  width: calc(59.2rem / 1.5);
}

#fv02.active .fv_character01 {
  animation: fv_character01_anime 1s cubic-bezier(0, 1.7, 0.93, 1.47)  0s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_character01_anime {
  0% {
    opacity: 0;
    transform: translateX(4rem) translateY(4rem) scale(0.85);
  }
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateX(0.5rem) translateY(1rem) scale(1);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

#fv02 .fv_character02 {
  opacity: 0;
  transform: translateX(-5rem) translateY(8rem) scale(0.7);
  /*transition: opacity .6s cubic-bezier(0, 0.98, 1, 1) .2s,transform .6s cubic-bezier(0, 0.98, 1, 1) .12s;*/
  position: absolute;
  top: calc(21rem / 1.5);
  z-index: 3;
  left: calc(42rem / 1.5);
  width: calc(35rem / 1.5);
}

#fv02.active .fv_character02 {
  animation: fv_character02_anime 1.25s cubic-bezier(0, 1.7, 0.93, 1.47) 0.08s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_character02_anime {
  0% {
    opacity: 0;
    transform: translateX(-5rem) translateY(8rem) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  68% {
    opacity: 1;
    transform: translateX(-1rem) translateY(1rem) scale(0.98);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}


.fv_box_back {
  position: absolute;
  top: calc(61rem / 1.5);
  left: calc(9rem / 1.5);
  z-index: 4;
  width: calc(59rem / 1.5);
}

#fv02 .fv_character03 {
  opacity: 0;
  transform: translateY(8rem) scale(0.7);
  /*transition: opacity .7s cubic-bezier(0.61, 0.13, 0.32, 0.88) 0s,transform .8s cubic-bezier(0.61, 0.13, 0.32, 0.88) 0s;*/
  position: absolute;
  bottom: calc(15.5rem / 1.5);
  z-index: 5;
  left: calc(13.2rem / 1.5);
  width: calc(64rem / 1.5);
}

#fv02.active .fv_character03 {
  animation: fv_character03_anime 1s cubic-bezier(0, 1.7, 0.93, 1.47)  0.09s 1 forwards;
  animation-delay: 0.2s;
}


@keyframes fv_character03_anime {
  0% {
    opacity: 0;
    transform: translateY(8rem) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  68% {
    opacity: 1;
    transform: translateY(1rem) scale(1);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

.fv_box_front {
  position: absolute;
  top: calc(66rem / 1.5);
  left: calc(3.8rem / 1.5);
  z-index: 5;
  width: calc(63.2rem / 1.5);
}

#fv02 .fv_character04 {
  opacity: 0;
  transform: translateX(3rem) translateY(-4rem) scale(0.9) rotate(20deg);
  /*transition: opacity .65s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s,transform .65s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s;*/
  position: absolute;
  top: calc(81rem / 1.5);
  left: calc(43rem / 1.5);
  z-index: 6;
  width: calc(30rem / 1.5);
}

#fv02.active .fv_character04 {
  animation: fv_character04_anime 1.2s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_character04_anime {
  0% {
    opacity: 0;
    transform: translateX(3rem) translateY(-4rem) scale(0.9) rotate(20deg);
  }
  40% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }
  70% {
    opacity: 1;
    transform: translateX(1rem) translateY(-1rem) scale(1) rotate(10deg);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
  }
}

#fv02 .fv_scroll {
  position: relative;
}

.fv_scroll_bar {
  opacity: 0;
  animation: opa1 0.2s linear 1s 1 forwards;
  overflow: hidden;
  display: block;
  position: absolute;
  left: calc(3.2rem / 1.5);
  bottom: calc(7.5rem / 1.5);
  width: calc(23.5rem / 1.5);
  height: calc(23rem / 1.5);
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.fv_scroll_bar span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
}

/* ---- fv_area03 ---- */
#fv03 {
}

#fv03::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #fff;
  content: "";
}

#fv03.active::before {
  animation: strobe_aninme 0.6s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

#fv03 .fv_item_back {
  opacity: 0;
  transform: translateX(0) translateY(-4rem) scale(0.7);
  position: absolute;
  top: calc(-57rem / 1.5);
  left: calc(-34rem / 1.5);
  right: calc(-27rem / 1.5);
  z-index: 1;
  width: auto;
}

#fv03.active .fv_item_back {
  animation: fv_item_back_anime 0.9s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_item_back_anime {
  0% {
    opacity: 0;
    transform: translateX(0) translateY(-4rem) scale(0.7);
  }
  40% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) ;
  }
  70% {
    opacity: 1;
    transform: translateX(0) translateY(-0.5rem) scale(0.98);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) ;
  }
}

#fv03 .fv_meets01 {
  opacity: 0;
  transform: translateX(0) translateY(4rem) scale(0.6);
  transition: opacity .6s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s,transform .6s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s;
  transition-delay: .3s,.3s;
  position: absolute;
  top: calc(23rem / 1.5);
  left: calc(10.5rem / 1.5);
  z-index: 2;
  width: calc(55rem / 1.5);
}

#fv03.active .fv_meets01 {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

#fv03 .fv_meets02 {
  opacity: 0;
  transform: translateX(0) translateY(-2rem) scale(0.6);
  transition: opacity .6s cubic-bezier(0.61, 0.13, 0.32, 0.88) .12s,transform .55s cubic-bezier(0.61, 0.13, 0.32, 0.88) .12s;
  transition-delay: .32s,.32s;
  position: absolute;
  top: calc(47rem / 1.5);
  left: calc(28rem / 1.5);
  z-index: 3;
  width: calc(15rem / 1.5);
}

#fv03.active .fv_meets02 {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

#fv03 .fv_box_wrap {
}

#fv03 .fv_box_back {
}

#fv03 .fv_item_box01 {
  opacity: 0;
  transform: translateX(-4rem) translateY(8rem) scale(0.7);
  position: absolute;
  top: calc(37rem / 1.5);
  left: calc(22rem / 1.5);
  z-index: 5;
  width: calc(53rem / 1.5);
}

#fv03.active .fv_item_box01 {
  animation: fv_item_box01_anime 0.9s cubic-bezier(0.61, 0.13, 0.32, 0.88) 0s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_item_box01_anime {
  0% {
    opacity: 0;
    transform: translateX(-4rem) translateY(8rem) scale(0.7);
  }
  50% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  70% {
    opacity: 1;
    transform: translateX(-0.2rem) translateY(0.5rem) scale(1);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}

#fv03 .fv_item_box02 {
  opacity: 0;
  transform: translateX(4rem) translateY(8rem) scale(0.8);
  position: absolute;
  top: calc(33rem / 1.5);
  left: calc(4rem / 1.5);
  z-index: 5;
  width: calc(51rem / 1.5);
}

#fv03.active .fv_item_box02 {
  animation: fv_item_box02_anime 0.9s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
  animation-delay: 0.2s;
}

@keyframes fv_item_box02_anime {
  0% {
    opacity: 0;
    transform: translateX(4rem) translateY(8rem) scale(0.8);
  }
  40% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
  60% {
    opacity: 1;
    transform: translateX(0.5rem) translateY(1rem) scale(1);
   }
  100% {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1);
  }
}
#fv03 .fv_box_front {
}

#fv03 .fv_scroll_bar {
  top: calc(52.5rem / 1.5);
  left: calc(24rem / 1.5);
  bottom: auto;
}

#fv03 .fv_logo {
  opacity: 0;
  transform: translateX(0) translateY(-21rem) scale(0.5);
  transition: opacity .6s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s,transform .65s cubic-bezier(0.61, 0.13, 0.32, 0.88) .1s;
  position: absolute;
  top: calc(80rem / 1.5);
  left: calc(17rem / 1.5);
  z-index: 7;

  width: calc(43rem / 1.5);
}

#fv03.active .fv_logo {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* ---- Message ---- */

.intro_section .message_area {
  margin-bottom: calc(11rem / 1.5);
}

.message_area {
}

.message_area .message_ttl {
  margin-bottom: calc(5rem / 1.5);
  padding-top: calc(8rem / 1.5);
  font-size: calc(7rem / 1.5);
  text-align: center;
  letter-spacing: 0.2em;
  color: #4a844e;
  white-space: nowrap;
}

.intro_section .message_area .message_ttl svg {
  width: calc(62.1rem / 1.5);
  height: auto;
}

.message_area .message_ttl svg,
.message_area .message_ttl path {
  fill: #4a844e;
}

.intro_section .message_area .message_ttl path {
  transform:translateY(80px);
}

.intro_section .ttl_section.effect .ttl_section_inner path {
  animation: intro_bound 1s cubic-bezier(0.63, -0.13, 0.3, 0.74) 0s 1 forwards, opa1 0.2s linear 0s 1 forwards;
}

@keyframes intro_bound {
  0% { transform:translateY(70px) }
  50% { transform:translateY(0) }
  70% { transform:translateY(10px) }
  100% { transform:translateY(0) }
}

.message_cont {
  margin-bottom: calc(8rem / 1.5);
  font-size: calc(3rem / 1.5);
}

.message_cont p {
  transform:translateY(70px);
  animation: opa1 0.8s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, top_bound 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
  margin-bottom: calc(8rem / 1.5);
  text-align: center;
  line-height: 2;
}

.message_cont p:nth-child(1) {
  animation-delay: 0.2s;
}

.message_cont p:nth-child(2) {
  animation-delay: 0.3s;
}

.message_cont p:last-child {
  margin-bottom: 0;
}


.intro_section .btn_link a {
}

.intro_section .page_nav li {
  margin-bottom: calc(2.8rem / 1.5);
}

/* ===================
  　　　LAUNDRY
=================== */

.laundry_section {
  top: calc(-620rem / 1.5);
  background-color: #fcf2f2;
}

.laundry_section .inner {
  padding-top: calc(15.6rem / 1.5);
  padding-bottom: calc(24.6rem / 1.5);
  background-color: #d32b1f;
}

.ttl_section {
  margin-bottom: calc(10rem / 1.5);
  text-align: center;
}

.ttl_section .ttl_icn {
  width: calc(12.7rem / 1.5);
  margin-bottom: calc(4.5rem / 1.5);
  opacity: 0;
}

.ttl_section.effect .ttl_icn  {
  animation:bound3 0.6s cubic-bezier(0.41, 0.17, 0.42, 0.96) 0.4s 1 forwards, opa1 0.2s cubic-bezier(0.41, 0.17, 0.42, 0.96) 0.4s 1 forwards;
}

.ttl_section .ttl_section_inner {
  display: block;
  margin-bottom: calc(4.5rem / 1.5);
  text-align: center;
  transform: translateY(0);
}

.ttl_section.effect .ttl_section_inner {
  animation: bound2 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
 }

.ttl_section .ttl_section_inner svg {
  width: auto;
  height: calc(6.9rem / 1.5);
  fill: #fff;
}

.ttl_section .ttl_section_inner path {
  opacity: 0;
  transform: translateY(100px);
}

.ttl_section.effect .ttl_section_inner path {
  animation: bound 0.9s cubic-bezier(0.63, -0.13, 0.3, 0.74) 0s 1 forwards, opa1 0.4s linear 0s 1 forwards;

}

.ttl_section.effect .ttl_section_inner path:nth-child(1) {
  animation-delay: 0.1s,0.1s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(2) {
  animation-delay: 0.2s,0.2s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(3) {
  animation-delay: 0.3s,0.3s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(4) {
  animation-delay: 0.4s,0.4s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(5) {
  animation-delay: 0.5s,0.5s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(6) {
  animation-delay: 0.6s,0.6s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(7) {
  animation-delay: 0.7s,0.7s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(8) {
  animation-delay: 0.8s,0.8s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(9) {
  animation-delay: 0.9s,0.9s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(10) {
  animation-delay: 1.0s,1.0s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(11) {
  animation-delay: 1.2s,1.2s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(12) {
  animation-delay: 1.3s,1.3s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(13) {
  animation-delay: 1.4s,1.4s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(14) {
  animation-delay: 1.5s,1.5s;
}

.ttl_section.effect .ttl_section_inner path:nth-child(15) {
  animation-delay: 1.6s,1.6s;
}

@keyframes bound {
  0% { transform:translateY(100px)  }
  50% { transform:translateY(0) }
  70% { transform:translateY(25px) }
  100% { transform:translateY(0) }
}

@keyframes bound2 {
  0% { transform:translateY(0) }
  70% { transform:translateY(-20px)}
  100% { transform:translateY(0)}
}

@keyframes bound3 {
  0% { transform:translateY(0) rotate(0)}
  70% { transform:translateY(-20px)rotate(10deg) }
  100% { transform:translateY(0) rotate(0)}
}

.ttl_section .ttl_txt {
  opacity: 0;
  height: calc(3.3rem / 1.5);
}

.ttl_section.effect .ttl_txt  {
  animation: opa1 0.2s linear 0.8s 1 forwards;
 }

/* ----  PRODUCT WRAP ---- */

.product_area_wrap {
  padding-top: calc(35rem / 1.5);
}

.ttl_section + .product_area_wrap {
  padding-top: 0;
}

.ttl_sub {
  margin-bottom: calc(10rem / 1.5);
  text-align: center;
}

.ttl_sub img {
  width: calc(64.5rem / 1.5);
  margin: auto;
  animation: fuwafuwa .8s infinite alternate ease-in-out;
}

/* ----  PRODUCT AREA ---- */

.product_area {
  padding-top: calc(15rem / 1.5);
}

.ttl_sub + .product_area,
.product_area:first-child {
  padding-top: 0;
}

.product_area .product_thumb_wrap {
  position: relative;
}

.product_area .product_thumb {
  overflow: hidden;
  height: calc(62rem / 1.5);
  margin-bottom: calc(5rem / 1.5);
  text-align: center;
}

.product_area .product_thumb img {
  width: auto;
  height: 100%;
}

.product_area .product_point {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(2.5rem / 1.5);
  width: calc(61.4rem / 1.5);
  margin: auto;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(2rem / 1.5);
}

.product_area .product_point li {
  opacity: 0;
  transform:translateY(40px) scale(1.09);
}

.product_area.effect .product_point li {
  animation: opa1 0.6s cubic-bezier(0.41, 0.17, 0.42, 0.96) 0s 1 forwards, tra3_4 0.9s ease-out 0s 1 forwards;
}

.product_area.effect .product_point li:nth-child(1) {
  animation-delay: 0.5s,0.5s;
}

.product_area.effect .product_point li:nth-child(2) {
  animation-delay: 0.6s,0.6s;
}

.product_area .product_point img {
  width: calc(11.4rem / 1.5);
  height: calc(11.4rem / 1.5);
}

.product_cont {
  color: #fff;
  text-align: center;
}

.product_cont .product_name {
  opacity: 0;
  width: calc(61.4rem / 1.5);
  max-width: 100%;
  margin: auto auto calc(3rem / 1.5);;
  padding: 0 0 calc(3.2rem / 1.5);
  border-bottom: 2px solid #fff;
  font-size: calc(4rem / 1.5);
  font-weight: bold;
  text-align: center;
  line-height: 1.8;
}

.product_area.effect .product_cont .product_name  {
  animation: opa1 .8s cubic-bezier(0.41, 0.17, 0.42, 0.96) .5s 1 forwards;
}

.product_cont .product_name span {
  display: block;
  font-size: calc(3rem / 1.5);
  line-height: 1;
}

.product_cont .product_txt {
  opacity: 0;
  width: calc(61.4rem / 1.5);
  max-width: 100%;
  margin: auto auto calc(6.4rem / 1.5);
  font-size: calc(2.6rem / 1.5);
  text-align: center;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.product_area.effect .product_cont .product_txt  {
  animation: opa1 .8s cubic-bezier(0.41, 0.17, 0.42, 0.96) .7s 1 forwards;
}

.product_cont .product_txt .txt_sm {
  display: block;
  padding-top: calc(1rem / 1.5);
  text-align: right;
  font-size: calc(1.9rem / 1.5);
}

.product_area .btn_link {
  margin: auto;
}

.product_area .btn_link a {
  overflow: hidden;
  position: relative;
  display: block;
  width:  calc(61.4rem / 1.5);
  border-radius: 20rem;
  margin: auto;
  cursor: pointer;
}

.laundry_section .ttl_section + .product_area_wrap {
 padding-top: calc(12rem / 1.5);
}

.btn_link {
  margin: auto;
  text-align: center;
}

.btn_link img {
  width: calc(61.4rem / 1.5);
}

.btn_link a:hover {
  opacity: 1;
}

.product_area .btn_link a::before {
	content: "";
	position: absolute;
	top: 0;
	left: -130%;
	width: 120%;
	height: 100%;
  border-radius: 20rem;
}

.product_area .btn_link a:hover::before {
	animation: skewanime .6s cubic-bezier(0.41, 0.17, 0.42, 0.96) forwards;
}

@keyframes skewanime {
	100% {
		left:-10%;
	}
}

.product_area .btn_link a img {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.laundry_section .btn_link a {
  background: #580300;
}

.laundry_section .btn_link a::before {
  background: #720905;
}

.handwash_section .btn_link a {
  background: #003255;
}

.handwash_section .btn_link a::before {
  background: #014273;
}

.refill_section .btn_link a {
  background: #63043a;
}

.refill_section .btn_link a::before {
  background: #79124d;
}


/* ===================
  　　HAND WASH
=================== */

.handwash_section {
  top: calc(-240rem / 1.5);
  background-color: #eef5fb;
}

.handwash_section .inner {
  padding-top: calc(11.3rem / 1.5);
  padding-bottom: calc(24.6rem / 1.5);
  background-color: #2683c7;
}

.handwash_section .ttl_section .ttl_section_inner svg {
  height: calc(6.7rem / 1.5);
}

.handwash_section .product_cont .product_txt {
  font-size: calc(2.35rem / 1.5);
  letter-spacing: 0;
}

.handwash_section .product02 .product_thumb {
  height: calc(65rem / 1.5);
}

.handwash_section .product_area .product_point {
  bottom: calc(7rem / 1.5);
  gap: calc(5rem / 1.5);
}

.handwash_section .product_area .product_point li:nth-child(1) img {
  width: calc(26rem / 1.5);
  height: calc(29.6rem / 1.5);
}

.handwash_section .product_area .product_point li:nth-child(2) img {
  width: calc(25.6rem / 1.5);
  height: calc(11.4rem / 1.5);
}

.handwash_section .product02 .product_point {
  bottom: calc(3rem / 1.5);
  gap: calc(5rem / 1.5);
  align-items: flex-start;
  padding-left: calc(3rem / 1.5);
}


/* ===================
  　　　REFILL
=================== */

.refill_section {
  top: calc(-1460rem / 1.5);
  background-color: #fef6fa;
}

.refill_section .inner {
  padding-top: calc(11.3rem / 1.5);
  padding-bottom: calc(24.6rem / 1.5);
  background-color: #f094b3;
}

.refill_section .ttl_section .ttl_section_inner svg {
  height: calc(19.2rem / 1.5);
}


/* ---- リフィルステーション ---- */

.refill_station {
  position: relative;
  padding-top: calc(23rem / 1.5);
  padding-bottom: calc(10rem / 1.5);
}

.refill_station_ttl {
  color: #fff;
  margin-bottom: calc(4rem / 1.5);
  font-size: calc(4.5rem / 1.5);
  font-weight: bold;
  text-align: center;
}

.refill_station_cont {
  width: calc(59rem / 1.5);
  max-width: 100%;
  margin: auto;
  background: #fff;
  border-radius: calc(1rem / 1.5);
  padding: calc(13.4rem / 1.5) 0 calc(8.2rem / 1.5);
}

.refill_station_img {
  position: relative;
  width: calc(39.6rem / 1.5);
  margin: auto auto calc(6.4rem / 1.5);
  padding: 0 0 calc(6.4rem / 1.5);
}

.refill_station .refill_station_img::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  border-bottom: 2px solid #5a1039;
  transition: width 1.2s ease-in-out .6s;
  content: "";
}

.refill_station.effect .refill_station_img::before {
  width: 100%;
}

.refill_station_img img {
  width: calc(36.5rem / 1.5);
}

.refill_station_txt {
  margin-bottom: calc(10.3rem / 1.5);
  font-size: calc(1.99rem / 1.5);
  text-align: center;
  color: #5a1039;
  line-height: 2;
  text-align: center;
}

.refill_station .btn_more {
  position: relative;
  z-index: 2;
  width: calc(23.7rem / 1.5);
  margin-left: calc(21rem / 1.5);
}

.refill_station_item {
  opacity: 0;
  transform:translateY(40px) scale(1.09);
  position: absolute;
  left: 0;
  bottom: calc(-3rem / 1.5);
  width: calc(35rem / 1.5);
}

.refill_station.effect .refill_station_item {
  animation: opa1 0.6s cubic-bezier(0.41, 0.17, 0.42, 0.96) .4s 1 forwards, tra3_2 0.9s ease-out .4s 1 forwards;
}


/* ===================
  　　　ABOUT
=================== */

.about_section {
  background-color: #fefcee;
}

.about_section .inner {
  padding-top: calc(28rem / 1.5);
  padding-bottom: calc(10rem / 1.5);
  background-color: #f6dd2f;
}

.about_section .ttl_section {
  text-align: center;
}

.about_section .ttl_section .ttl_fukid {
  opacity: 1;
  display: block;
  width: calc(55.8rem / 1.5);
  margin: auto auto calc(6rem / 1.5);
  animation: fuwafuwa .8s infinite alternate ease-in-out;
}

@keyframes fuwafuwa {
  from {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  to {
    -webkit-transform: translateY(1vh);
    transform: translateY(1vh)
  }
}

.about_section .ttl_section .ttl_eco {
  display: block;
  width: calc(51.6rem / 1.5);
  height: auto;
  margin: auto;
}

.about_cont {
  margin-bottom: calc(11rem / 1.5);
  color: #423418;
}

.about_cont p {
  opacity: 0;
  transform:translateY(70px);
  margin-bottom: calc(2.6rem / 1.5);
  text-align: center;
  font-size: calc(2.6rem / 1.5);
  line-height: 2.1;
}

.about_cont.effect p {
  animation: opa1 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards, top_bound 1s cubic-bezier(0.41, 0.17, 0.42, 0.96)  0s 1 forwards;
}

.about_cont.effect p:nth-child(1) {
  animation-delay: 0.2s;
}

.about_cont.effect p:nth-child(2) {
  animation-delay: 0.3s;
}

.about_point {
  width: calc(59rem / 1.5);
  max-width: 100%;
  margin: auto auto calc(16.8rem / 1.5);
  background: #fff;
  border-radius: calc(1rem / 1.5);
  padding: 0 calc(4.7rem / 1.5);
}

.about_point li {
  padding: calc(10rem / 1.5) 0;
  border-bottom: 2px solid #c89e05;
}

.about_point li:nth-child(1) {
  animation-duration: .6s;
}

.about_point li:nth-child(2) {
  animation-duration: .8s;
}

.about_point li:nth-child(3) {
  animation-duration: 1s;
}

.about_point li:last-child {
  border-bottom: none;
}

.about_point li dl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.about_point li dl dt {
  width: calc(15rem / 1.5);
  max-width: 100%;
  text-align: center;
}

.about_point li dl dt span {
  overflow: hidden;
  display: block;
  width: 0;
  transition: width 1s ease-in-out;
  padding-bottom: calc(2rem / 1.5);
}

.about_point li.effect dl dt span {
  width: calc(15rem / 1.5);
}

.about_point li dl dt img {
  height: calc(6.2rem / 1.5);
}

.about_point li dl dt span img {
  width: calc(15rem / 1.5);
  height: calc(3.8rem / 1.5);
  max-width: inherit;
}

.about_point li dl dd {
  width: calc(31rem / 1.5);
  max-width: 100%;
  text-align: center;
}

.about_point li:nth-child(2) dd img {
  width: calc(22rem / 1.5);
  max-width: 100%;
}

.about_section .btn_link {
  margin-bottom: calc(6.2rem / 1.5);
}

.copyright_area {
  display: block;
  margin: calc(13rem / 1.5) auto auto;
  padding: 0 calc(6rem / 1.5);
  font-family: "Alright Sans",sans-serif;
  font-size: calc(2rem / 1.5);
  font-weight: 200;
  text-align: left;
  line-height: 1.7;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: #000;
}


/*=======================================
                    PC
========================================*/


@media screen and (min-width: 768px)  {
  .sp_only {
    display: none;
  }

  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }
/*
  html,
  body,
  #Wrap,
  .wrapBottom,
  .wrapTop,
  #BrandID_EC,
  #Contents,
  .lp_contents {
    overflow: unset !important;
  }
*/
  #Contents {
    padding-top: 96px;
  }

  .section {
    display: flex;
    justify-content: center;
  }

}


/*=======================================
                    SP
========================================*/

/* only SP */
@media only screen and (max-width: 767px) {
  html {
    font-size: calc((15*(100vw / 750)));
  }
  .pc_only {
    display: none;
  }

  /* ===================
    LP Contents
  =================== */

  .lp_contents {
    overflow-x: clip;
  }

  /* ===================
    　　FIXED　LOGO
  =================== */
  .fixed_logo_wrap {
    display: none;
  }

  /* ===================
    　　FIXED　NAVI
  =================== */
  .fixed_nav_wrap {
    display: none;
  }

  /* ===================
    　Section Common
  =================== */

  .contents {
    padding-top: 0;
  }

  .contents_inner .section {
    padding-right: 0;
    padding-left: 0;
  }

  .lp_contents .inner {
    width: 100%;
  }

  /* ===================
    　　　INTRO
  =================== */

  .intro_section {
  }

  /* ===================
    　　　LAUNDRY
  =================== */

  .laundry_section {
    top: calc(-610rem / 1.5);
  }

  /* ===================
    　　HAND WASH
  =================== */

  .handwash_section {
    top: calc(-200rem / 1.5);
  }

  /* ===================
    　　　REFILL
  =================== */

  .refill_section {
    top: calc(-440rem / 1.5);
  }




}