@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#Contents {

  padding-top: 0 !important;

}



#FooterWrap {

  position: relative;

  background: #fff;

}



:root {

  --font_jpn_R: "MFW-YuGoPr6N-Regular", sans-serif;

  --font_jpn_M: "MFW-YuGoPr6N-Medium", sans-serif;

  --font_jpn_B: "MFW-YuGoPr6N-Bold", sans-serif;

  --color_regular: #211815;



}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .11em;

  font-feature-settings: "palt";

}



.LP_page {

  width: 100%;

  background: #fff;

  font-family: var(--font_jpn_R);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity.5s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page .activePoint {

  opacity: 0;

  transform: translateY(4rem);

  transition: opacity 1s, transform 1s;

}



.LP_page .activePoint.active {

  opacity: 1;

  transform: unset

}





/*----------------------------all*/



/*loading------------------------*/

.loading_area {

  width: 100%;

  height: 100svh;

}



.loading_area.mainHeading .firstAccess {

  display: none;

}



.loading_area::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100svh;

  background: #b8d7d9;

  content: "";

}



.LP_page.active .loading_area.mainHeading::before {

  display: none;

}



.loading_area::after {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100svh;

  background: #e2eae6;

  content: "";

  opacity: 0;

  filter: blur(10rem);

}



.LP_page.active .loading_area::after {

  animation: fade_in 1s 5s forwards;

}



.LP_page.active .loading_area.mainHeading::after {

  opacity: 1;

  filter: unset;

  animation: unset;

}



@keyframes fade_in {

  0% {

    opacity: 0;

    filter: blur(10rem);

  }



  100% {

    opacity: 1;

    filter: unset;

  }

}



.loading_area > div {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: clip;

  perspective: 1000rem; 

}



.loading_area .logo_ecostore {

  display: grid;

  place-items: center;

}



.loading_area .logo_ecostore p {

  width: 35rem;

}



.LP_page.active .loading_area .logo_ecostore p {

  animation: fade_out 1.5s 4s forwards;

}



.loading_area .illust_wave::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 220%;

  height: 220%;

  translate: -50% 0;

  margin-left: -40rem;

  background: url(../img/illust_wave_001.svg) bottom center / 100% auto no-repeat;

  content: "";

  transform: translate(-50rem, 150rem);

  opacity: 0;

  rotate: -30deg;

  transform-origin: bottom center;

}



.loading_area .illust_wave::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 220%;

  height: 220%;

  translate: -50% 0;

  margin-left: -40rem;

  background: url(../img/illust_wave_002.svg) bottom center / 100% auto no-repeat;

  content: "";

  transform: translate(-50rem, 150rem);

  opacity: 0;

  transform-origin: bottom center;

}



.LP_page.active .loading_area .illust_wave::before {

  animation: wave_translate1 1.8s 1.5s forwards, wave_scale1 4.8s 3.2s forwards, wave_rotate 3s forwards, wave_translate2 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_wave::after {

  animation: wave_translate1 2.3s 1s forwards, wave_scale1 5s 3.2s forwards, wave_translate3 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_wave,

.LP_page.active .loading_area .illust_splash {

  animation: fade_out 2s 5s forwards;

}



@keyframes wave_translate1 {

  0% {

   transform: translate(-50rem, 150rem);

    opacity: 0;

  }



  100% {

    transform: unset;

    opacity: 1;

  }

}



@keyframes wave_scale1 {

  0% {

    scale: 1;

  }



  100% {

    scale: 1.6;

  }

}



@keyframes wave_scale2 {

  0% {

    scale: 1;

  }



  100% {

    scale: 3.5;

  }

}



@keyframes wave_rotate {

  0% {

    rotate: -30deg;

  }



  100% {

    rotate: 10deg;

  }

}



@keyframes fade_out {

  0% {

    opacity: 1;

    filter: unset;

  }



  100% {

    opacity: 0;

    filter: blur(1rem);

  }

}



@keyframes wave_translate2 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(-40rem, 20rem);

  }

}



@keyframes wave_translate3 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(20rem, 20rem);

  }

}



@keyframes wave_translate4 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(-50rem, 10rem);

  }

}



.loading_area .illust_splash::before,

.loading_area .illust_splash::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 220%;

  height: 220%;

  translate: -50% 0;

  margin-left: -40rem;

  content: "";

  opacity: 0;

  transform-origin: bottom center;

  transform: translateZ(0);

}



.loading_area .illust_splash.splash1::before {

  background: url(../img/illust_splash_005.svg) bottom center / 100% auto no-repeat;

}



.loading_area .illust_splash.splash1::after {

  background: url(../img/illust_splash_004.svg) bottom center / 100% auto no-repeat;

}



.loading_area .illust_splash.splash2::before {

  background: url(../img/illust_splash_003.svg) bottom center / 100% auto no-repeat;

}



.loading_area .illust_splash.splash2::after {

  background: url(../img/illust_splash_002.svg) bottom center / 100% auto no-repeat;

}



.loading_area .illust_splash.splash3::before {

  background: url(../img/illust_splash_001.svg) bottom center / 100% auto no-repeat;

}



.LP_page.active .loading_area .illust_splash.splash1::before {

  animation: splash_opacity 1s 2.5s forwards, wave_scale2 5s 3.2s, wave_translate4 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_splash.splash1::after {

  animation: splash_opacity 1s 2.6s forwards, wave_scale2 5s 3.2s, wave_translate4 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_splash.splash2::before {

  animation: splash_opacity 1s 2.7s forwards, wave_scale2 5s 3.2s, wave_translate4 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_splash.splash2::after {

  animation: splash_opacity 1s 2.8s forwards, wave_scale2 5s 3.2s, wave_translate4 4s 3.2s forwards;

}



.LP_page.active .loading_area .illust_splash.splash3::before {

  animation: splash_opacity 1s 2.9s forwards, wave_scale2 5s 3.2s, wave_translate4 4s 3.2s forwards;

}





@keyframes splash_opacity {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



.loading_area .each_dots::before,

.loading_area .each_dots::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  border-radius: 50%;

  background: #fff;

  content: "";

  transform: translateZ(-1000rem);

  scale: 0;

}



.LP_page.active .loading_area .each_dots::before,

.LP_page.active .loading_area .each_dots::after {

  animation: dot_scale 4s 4s forwards, fade_out 1s 5s forwards;

}



.loading_area .dot1::before {

  width: 5rem;

  height: 5rem;

  margin: 10rem 0 0 12rem;

}



.loading_area .dot1::after {

  width: 4rem;

  height: 4rem;

  margin: -10rem 0 0 -15rem;

}



.loading_area .dot2::before {

  width: 7rem;

  height: 7rem;

  margin: -4rem 0 0 8rem;

}



.loading_area .dot2::after {

  width: 6rem;

  height: 6rem;

  margin: -8rem 0 0 -5rem;

}



.loading_area .dot3::before {

  width: 8rem;

  height: 8rem;

  margin: 3rem 0 0 -10rem;

}



.loading_area .dot3::after {

  width: 4rem;

  height: 4rem;

  margin: -15rem 0 0 -2rem;

}



.loading_area .dot4::before {

  width: 3rem;

  height: 3rem;

  margin: -10rem 0 0 16rem;

}



.loading_area .dot4::after {

  width: 5rem;

  height: 5rem;

  margin: 10rem 0 0 -16rem;

}



.loading_area .dot5::before {

  width: 5rem;

  height: 5rem;

}



.loading_area .dot5::after {

  width: 5rem;

  height: 5rem;

  margin: 15rem 0 0 -4rem;

}



@keyframes dot_scale {

  0% {

    transform: translateZ(-1000rem); 

    scale: 0;

  }



  100% {

    transform: translateZ(980rem);

    scale: 1;

  }

}



.loading_area .illust_water::before,

.loading_area .illust_water::after {

  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(1350 * (100vw/ 750));

  height: calc(1350 * (100vw/ 750));

  translate: -50% -50%;

  margin-left: 5rem;

  content: "";

  opacity: 0;

  filter: blur(10rem);

}



.loading_area .illust_water.water1::before {

  background: url(../img/illust_water_001.svg) center center / 100% auto no-repeat;

}



.loading_area .illust_water.water1::after {

  background: url(../img/illust_water_002.svg) center center / 100% auto no-repeat;

}



.loading_area .illust_water.water2::before {

  background: url(../img/illust_water_003.svg) center center / 100% auto no-repeat;

}



.LP_page.active .loading_area .illust_water.water1::before {

  animation: water_opacity 3s 4s forwards, water_scale 3s 4s forwards, fade_out 1s 8.5s forwards, rotate 50s 4s infinite;

}



.LP_page.active .loading_area .illust_water.water1::after {

  animation: water_opacity 3s 4s forwards, water_scale 3s 4s forwards, fade_out 1s 8.5s forwards, rotate 60s 4s infinite;

}



.LP_page.active .loading_area .illust_water.water2::before {

  animation: water_opacity 3s 4s forwards, water_scale 3s 4s forwards, fade_out 1s 8.5s forwards, rotate 80s 4s infinite;

}



@keyframes water_opacity {

  0% {

    opacity: 0;

    filter: blur(10rem);

  }



  70% {

    opacity: 1;

  }



  100% {

    opacity: 1;

    filter: unset;

  }

}



@keyframes water_scale {

  0% {

    scale: 0;

  }



  100% {

    scale: 1;

  }

}





.loading_area .each_txt,

.loading_area .logo_10th {

  display: grid;

  place-items: center;

}



.loading_area .each_txt p {

  width: 56rem;

}



.loading_area .txt_10thAnniversary p,

.loading_area .txt_lead p {

  scale: 0;

  filter: blur(10rem);

}



.LP_page.active .loading_area .txt_lead p {

  animation: water_opacity 3s 4s forwards, water_scale 3s 4s forwards;

}



.LP_page.active .loading_area.mainHeading .txt_lead p {

  scale: 1;

  filter: unset;

  animation: unset;

}



.LP_page.active .loading_area .txt_10thAnniversary p {

  animation: water_opacity 3s 4s forwards, water_scale 3s 4s forwards, fade_out .5s 8.5s forwards;

}



.LP_page.active .loading_area.mainHeading .txt_10thAnniversary p {

  scale: 1;

  filter: unset;

  animation: fade_out .5s 4s forwards;

} 



.loading_area .txt_RefillYourWorld p {

  opacity: 0;

  filter: blur(10rem);

}



.LP_page.active .loading_area .txt_RefillYourWorld p {

  animation: fade_in .5s 8.5s forwards;

}



.LP_page.active .loading_area.mainHeading .txt_RefillYourWorld p {

  animation: fade_in .5s 4s forwards;

}



@keyframes txt_scale {

  0% {

    scale: 0;

    filter: blur(10rem);

  }



  50% {

    filter: unset;

  }



  100% {

    scale: 1;

    filter: unset;

  }

}



.loading_area .logo_10th p {

  opacity: 0;

  filter: blur(10rem);

  width: 20rem;

  margin-top: 100rem;

}



.LP_page.active .loading_area .logo_10th p {

  animation: fade_in 1s 7s forwards;

}



.LP_page.active .loading_area.mainHeading .logo_10th p {

  opacity: 1;

  filter: unset;

  animation: unset;

}



.loading_area .polkadot::before {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  height: 100%;

  translate: -50% -50%;

  background: url(../img/polkadot.png) center center / 100% auto no-repeat;

  content: "";

  transform: translateZ(-1000rem); 

  scale: 0;

}



.LP_page.active .loading_area .polkadot::before {

  animation: polkadot_scale 3.4s 5.5s forwards, float 2s ease-in-out infinite alternate-reverse, rotate 200s 5s infinite;

}



.LP_page.active .loading_area.mainHeading .polkadot::before {

  animation: polkadot_scale 3.4s 1s forwards, float 2s ease-in-out infinite alternate-reverse, rotate 200s 5s infinite;

}



@keyframes polkadot_scale {

  0% {

    transform: translateZ(-1000rem); 

    scale: 0;

  }



  80% {

    transform: translateZ(0);

    scale: 1;

  }



  93% {

    scale: 1;

    filter: unset;

  }



  94% {

    scale: 1.02 .95;

    filter: blur(2px);

  }



  96% {

    scale: .95 1.02;

  }



  98% {

    scale: 1.01 .98;

    filter: blur(2px);

  }



  100% {

    transform: translateZ(0);

    scale: 1;

    filter: unset;

  }

}



.loading_area .layerOverlay {

  opacity: 0;

  background: url(../img/overlay_sp.svg) center center / cover no-repeat;

  mix-blend-mode: multiply;

}



.LP_page.active .loading_area .layerOverlay {

  animation: fade_in 1s 8s forwards;

}



.LP_page.active .loading_area.mainHeading .layerOverlay {

  animation: fade_in 1s forwards;

}



#HeaderWrap.hidden {

  opacity: 0;

  pointer-events: none;

}



#header_txt_slider,

#header_img_slider {

  display: none;

}



@media screen and  (min-width:769px) {

.loading_area .logo_ecostore p {

  width: calc(280 * (100vw / 1600))

}



.loading_area .illust_wave::before {

  width: calc(2400 * (100vw / 1600));

  height: calc(1200 * (100vw / 1600));

  margin-left: calc(-300 * (100vw / 1600));

  transform: translate(calc(-500 * (100vw / 1600)), calc(1500 * (100vw / 1600)));

}



.loading_area .illust_wave::after {

  width: calc(2400 * (100vw / 1600));

  height: calc(1200 * (100vw / 1600));

  margin-left: calc(-300 * (100vw / 1600));

  transform: translate(calc(-500 * (100vw / 1600)), calc(1500 * (100vw / 1600)));

}



@keyframes wave_translate1 {

  0% {

   transform: translate(calc(-500 * (100vw / 1600)), calc(1500 * (100vw / 1600)));

    opacity: 0;

  }



  100% {

    transform: unset;

    opacity: 1;

  }

}



@keyframes wave_scale1 {

  0% {

    scale: 1;

  }



  100% {

    scale: 1.3;

  }

}



@keyframes wave_scale2 {

  0% {

    scale: 1;

  }



  100% {

    scale: 2.5;

  }

}



@keyframes wave_translate2 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(calc(-1000 * (100vw / 1600)), calc(500 * (100vw / 1600)));

  }

}



@keyframes wave_translate3 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(calc(500 * (100vw / 1600)), calc(500 * (100vw / 1600)));

  }

}





@keyframes wave_translate4 {

  0% {

    transform: unset;

  }



  100% {

    transform: translate(calc(-800 * (100vw / 1600)), calc(500 * (100vw / 1600)));

  }

}





.loading_area .illust_splash::before,

.loading_area .illust_splash::after {

  width: calc(2400 * (100vw / 1600));

  height: calc(1200 * (100vw / 1600));

  margin-left: calc(-300 * (100vw / 1600));

}



.loading_area .illust_water::before,

.loading_area .illust_water::after {

  width: calc(2080 * (100vw / 1600));

  height: calc(2080 * (100vw / 1600));

  margin-left: 0;

}



.loading_area .each_txt {

  padding-bottom: calc(150 * (100vw / 1600));

}



.loading_area .each_txt p {

  width: calc(300 * (100vw / 1600));

}



.loading_area .logo_10th p {

  width: calc(140 * (100vw / 1600));

  margin-top: calc(500 * (100vw / 1600));

}



.loading_area .polkadot::before {

  width: calc(400 * (100vw / 1600));

  height: calc(400 * (100vw / 1600));

  margin-top: calc(-75 * (100vw / 1600));

}



.loading_area .layerOverlay {

  background: url(../img/overlay_pc.svg) center center / cover no-repeat;

}



.nav_list_wrap {

  position: absolute;

  z-index: 1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  margin-left: calc(-500 * (100vw / 1600));

  padding-left: calc(40 * (100vw / 1600));

  opacity: 0;

  filter: blur(10rem);

}



.LP_page.active .loading_area .nav_list_wrap {

  animation: fade_in 1s 9s forwards;

}



.LP_page.active .loading_area.mainHeading .nav_list_wrap {

  opacity: 1;

  filter: unset;

  animation: unset;

}



.nav_list_wrap::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 1px;

  height: 100%;

  background: var(--color_regular);

  content: "";

}



.nav_list li:nth-of-type(n+2) {

  margin-top: calc(60 * (100vw / 1600));

}



.nav_list li a {

  width: fit-content;

  font-family: var(--font-en);

  font-size: calc(18 * (100vw / 1600));

  font-weight: 500;

}

}

/*------------------------loading*/



/*main lead----------------------*/

.each_area {

  min-height: 100lvh;

}



.each_area .for_bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  clip-path: inset(0);

  pointer-events: none;

}



.each_area .for_bg::before,

.each_area .for_bg::after {

  position: fixed;

  background: url(../img/polkadot.png) center center / 100% auto no-repeat;

  content: "";

  animation: float 2s ease-in-out infinite alternate-reverse, rotate 200s infinite;

}



.each_area .for_bg.bg1::before {

  top: 0;

  right: 0;

  width: 19.5rem;

  height: 19.5rem;

  margin: 20rem -8rem 0 0;

}



.each_area .for_bg.bg1::after {

  top: 0;

  left: 0;

  width: 9.6rem;

  height: 9.6rem;

  margin: 80rem 0 0 -4rem;

}



.each_area .for_bg.bg2::before {

  bottom: 0;

  right: 0;

  width: 7.5rem;

  height: 7.5rem;

  margin: 0 2rem 30rem 0;

}



.each_area .area_inner {

  padding: 20rem 0 70rem;

}



.for_parallax {

  position: sticky;

  top: -100lvh;

}



.mainLead_area {

  background: #e2eae6;

}



.mainLead_area .logo_10th {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 43.4rem;

  height: 43.4rem;

  margin: 0 auto 15rem;

}



.mainLead_area .logo_10th img {

  width: 20rem;

}



.mainLead_area .logo_10th::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: 100%;

  height: 100%;

  background: url(../img/polkadot.png) center center / 100% auto no-repeat;

  content: "";

  animation: float 2s ease-in-out infinite alternate-reverse, rotate 200s infinite;

}



@keyframes float {

   0% {

    transform: translateY(-.5rem);

   }



   100% {

    transform: translateY(.5rem);

   }

}





@keyframes rotate {

   0% {

    rotate: 0deg;

   }



   100% {

    rotate: 360deg;

   }

}



.mainLead_area .txt_wrap {

  width: fit-content;

  margin: 0 auto;

}



.mainLead_area h2 {

  margin-bottom: 6rem;

  font-family: var(--font-en);

  font-size: 6.2rem;

  font-weight: 500;

  letter-spacing: 0;

  white-space: nowrap;

}



.mainLead_area .main_lead {

  font-size: 2.9rem;

  line-height: 2.1;

  font-family: var(--font_jpn_B);

  font-weight: 700;

}



.mainLead_area .main_lead:nth-of-type(n+2) {

  margin-top: 4.5rem;

}



.mainLead_area .main_lead .txt_L {

  margin-right: 1rem;

  font-size: 4.4rem;

}



@media screen and  (min-width:769px) {

.mainLead_area {

  display: grid;

  place-items: center;

}



.each_area .for_bg.bg1::before {

  width: 19.5rem;

  height: 19.5rem;

  margin: 15rem -8rem 0 0;

}



.each_area .for_bg.bg1::after {

  width: 9.6rem;

  height: 9.6rem;

  margin: 30rem 0 0 -4rem;

}



.each_area .for_bg.bg2::before {

  right: auto;

  left: 0;

  width: 7.5rem;

  height: 7.5rem;

  margin: 0 0 10rem 8rem;

}



.each_area .area_inner {

  padding: 15rem 0;

}



.mainLead_area .area_inner {

  display: flex;

  align-items: center;

  gap: 20rem;

  width: 100rem;

  margin: 0 auto;

  padding-bottom: 50rem;

}



.mainLead_area .logo_10th {

  width: 36rem;

  height: 36rem;

  margin: 0;

}



.mainLead_area .logo_10th img {

  width: 15rem;

}



.mainLead_area .logo_10th::before {

  width: 36rem;

  height: 36rem;

}



.mainLead_area .txt_wrap {

  flex: 1;

  width: auto;

  margin: 0;

}



.mainLead_area h2 {

  margin-bottom: 3rem;

  font-size: 5.3rem;

  letter-spacing: .05em;

}



.mainLead_area .main_lead {

  font-size: 1.7rem;

  line-height: 1.9;

}



.mainLead_area .main_lead:nth-of-type(n+2) {

  margin-top: 3rem;

}



.mainLead_area .main_lead .txt_L {

  font-size: 2.8rem;

}

}

/*----------------------main lead*/





/*project------------------------*/

.project_area {

  position: relative;

  z-index: 1;

  background: #fff;

}



.each_area.overlap {

  z-index: 2;

}



.project_area .area_inner {

  padding-bottom: 20rem;

}



.project_area .area_heading {

  margin-bottom: 15rem;

}



.area_ttl {

  position: relative;

  z-index: 1;

  font-family: var(--font-en);

  font-size: 9.6rem;

  font-weight: 500;

  letter-spacing: .05em;

  white-space: nowrap;

}



.area_ttl .txt_S {

  display: block;

  font-size: 4rem;

  letter-spacing: .04em;

}



.area_ttl .txt_S .txt_th {

  font-size: 2.6rem;

  letter-spacing: .04em;

}



.area_ttl .txt_S .txt_10 {

  font-size: 5rem;

  letter-spacing: .04em;

  font-variant-numeric: lining-nums;

}



.project_area .area_ttl {

  width: 53rem;

  height: 53rem;

  margin: 0 auto 1rem;

  padding-top: 20rem;

  text-align: center;

}



.project_area .area_ttl::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: 100%;

  height: 100%;

  background: url(../img/polkadot.png) center center / 100% auto no-repeat;

  content: "";

  animation: float 2s ease-in-out infinite alternate-reverse, rotate 200s infinite;

}



.project_area .area_ttl .txt_S {

  width: fit-content;

  margin: 0 auto 1rem;

}



.project_area .lead_wrap {

  width: fit-content;

  margin: 0 auto;

}



.lead_wrap .area_lead {

  font-family: var(--font_jpn_B);

  font-size: 2.7rem;

  font-weight: 700;

  line-height: 2;

}



.project_area .thumbnail_list {

  display: flex;

  align-items: flex-end;

}



.project_area .thumbnail_list li {

  position: relative;

  width: 14rem;

  font-family: var(--font-en);

  text-align: center;

}



.project_area .thumbnail_list li:nth-of-type(1) {

  margin-left: 5rem;

}



.project_area .thumbnail_list li:nth-last-of-type(1) {

  margin-right: 5rem;

}



.project_area .thumbnail_list li:nth-of-type(n+2) {

  margin-left: 6rem;

}



.project_area .thumbnail_list li:not(:has(.month)) {

  margin-left: 3rem;

}



.project_area .thumbnail_list li > div {

  cursor: pointer;

}



.project_area .thumbnail_list li:not(.btn_modalOpen) > div {

  pointer-events: none;

}



.project_area .thumbnail_list li .month {

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  margin-bottom: 1rem;

  font-size: 14rem;

  font-weight: 500;

  letter-spacing: 0;

  font-variant-numeric: lining-nums;

  transition: font-size .3s;

}



.project_area .modal_content .thumbnail_list li .month {

  min-height: 22rem;

}



.project_area .modal_content .thumbnail_list li .selected .month,

.project_area .modal_content .thumbnail_list li .selectedMonth .month {

  font-size: 18.5rem;

}



.project_area .thumbnail_list li .month.multipleProject::before {

  position: absolute;

  left: 100%;

  top: 50%;

  translate: 0 -50%;

  width: 47rem;

  height: .8rem;

  margin-top: -2rem;

  margin-left: 4rem;

  background: var(--color_regular);

  content: "";

}



.project_area .modal_content .thumbnail_list li .month.multipleProject::before {

  margin-top: 0;

}



.project_area .thumbnail_list li .txt_eng {

  display: block;

  margin-top: -1rem;

  font-size: 2.1rem;

  letter-spacing: .04em;

  transition: font-size .3s;

}



.project_area .modal_content .thumbnail_list li .selected .txt_eng,

.project_area .modal_content .thumbnail_list li .selectedMonth .txt_eng {

  font-size: 4rem;

}



.project_area .modal_content .thumbnail_list li .thumbnail {

  transition: opacity .3s;

}



.project_area .modal_content .thumbnail_list li .selected .thumbnail {

  opacity: .4;

}



.project_area .thumbnail_list_wrap .swiper-pagination {

  position: static;

  margin-top: 2rem;

}



.project_area .thumbnail_list_wrap .swiper-pagination-bullet {

  width: 1rem;

  height: 1rem;

  margin: 0 .8rem;

  border-radius: 10rem;

  background: var(--color_regular);

  opacity: 1;

  transition: width .3s;

}



.project_area .thumbnail_list_wrap .swiper-pagination-bullet.swiper-pagination-bullet-active {

  width: 7.3rem;

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



#fixed-navigation.hidden {

  opacity: 0;

  pointer-events: none;

}



.modal_outside.hidden {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 50%;

  translate: -50% 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_outside::-webkit-scrollbar {

  display:none;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  content: "";

}



.modal_outside input {

  display: none;

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  width: 100%;

  margin: 0 auto;

  max-height: 100%;

  padding: 1rem 0 10rem;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.btn_modalClose {

  position: relative;

  width: 10rem;

  margin: 0 5rem 2rem auto;

  padding-top: 12rem;

  font-family: var(--font-en);

  font-size: 2rem;

  font-weight: 500;

  letter-spacing: .5em;

  text-align: center;

  cursor: pointer;

}



.btn_modalClose::before,

.btn_modalClose::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: .25rem;

  height: 12rem;

  border-radius: 10rem;

  background: var(--color_regular);

  content: "";

}



.btn_modalClose::before {

  rotate: -45deg;

}



.btn_modalClose::after {

  rotate: 45deg;

}





.modal_inner {

  position: relative;

}



.each_project {

  opacity: 0;

  height: 0;

  overflow: hidden;

  transition: opacity .3s;

}



.each_project.selected {

  opacity: 1;

  height: auto;

  overflow: visible;

}



.project_img {

  width: 55rem;

  margin: 0 auto 3rem;

}



.each_project .txt_wrap {

  text-align: center;

}



.project_ttl {

  font-family: var(--font_jpn_B);

  font-size: 3.5rem;

  font-weight: 700;

  line-height: 1.7;

  letter-spacing: .05em;

}



.project_lead {

  width: 68rem;

  margin: 2rem auto 0;

  font-family: var(--font_jpn_M);

  font-size: 2.2rem;

  line-height: 1.8;

  font-weight: 500;

  letter-spacing: .023em;

}



.project_link {

  display: grid !important;

  place-items: center;

  width: 25rem;

  height: 4rem;

  margin: 2rem auto 0;

  border-radius: 10rem;

  background: var(--color_regular);

  font-family: var(--font_jpn_B);

  font-size: 1.6rem;

  font-weight: 700;

  letter-spacing: .2em;

  color: #fff;

}



.project_area .switching_list {

  margin-bottom: 4rem;

}



@media screen and  (min-width:769px) {

.project_area .area_inner {

  width: 110rem;

  margin: 0 auto;

}



.project_area .area_heading {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 13rem;

  margin-bottom: 9rem;

  padding-left: 8rem;

}



.area_ttl {

  font-size: 5.6rem;

  letter-spacing: .039em;

}



.area_ttl .txt_S {

  font-size: 2.2rem;

}



.area_ttl .txt_S .txt_th {

  font-size: 1.5rem;

}



.area_ttl .txt_S .txt_10 {

  font-size: 2.7rem;

}



.project_area .area_ttl {

  width: 32.6rem;

  height: 32.6rem;

  margin: 0 auto;

  padding-top: 11rem;

}



.project_area .lead_wrap {

  width: fit-content;

  margin: 0 auto;

}



.lead_wrap .area_lead {

  font-size: 2.6rem;

  line-height: 1.7;

  letter-spacing: .093em;

}



.lead_wrap .area_lead:nth-of-type(n+2) {

  margin-top: 3rem;

}



.project_area .thumbnail_list {

  justify-content: center;

}



.project_area .thumbnail_list li {

  width: 10.5rem;

}



.project_area .thumbnail_list li:nth-of-type(1) {

  margin-left: 0;

}



.project_area .thumbnail_list li:nth-last-of-type(1) {

  margin-right: 0;

}



.project_area .thumbnail_list li:nth-of-type(n+2) {

  margin-left: 5rem;

}



.project_area .thumbnail_list li:not(:has(.month)) {

  margin-left: 3rem;

}



.project_area .thumbnail_list li .month {

  font-size: 9rem;

}



.project_area .modal_content .thumbnail_list li .month {

  min-height: 18rem;

}



.project_area .modal_content .thumbnail_list li .selected .month,

.project_area .modal_content .thumbnail_list li .selectedMonth .month {

  font-size: 16.1rem;

}



.project_area .thumbnail_list li .month.multipleProject::before {

  width: 34rem;

  height: .5rem;

}



.project_area .modal_content .thumbnail_list li .month.multipleProject::before {

  margin-top: 2rem;

}



.project_area .thumbnail_list li .txt_eng {

  margin-top: 0;

  font-size: 1.2rem;

}



.project_area .modal_content .thumbnail_list li .selected .txt_eng,

.project_area .modal_content .thumbnail_list li .selectedMonth .txt_eng {

  font-size: 1.2rem;

}



.project_area .thumbnail_list_wrap .swiper-pagination {

  display: none;

}



.modal_wrap {

  padding: 5rem 0;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.btn_modalClose {

  position: fixed;

  top: 0;

  right: 0;

  width: 7rem;

  margin: 8rem 8rem 0 0;

  padding-top: 8rem;

  font-size: 1.4rem;

}



.btn_modalClose::before,

.btn_modalClose::after {

  width: .16rem;

  height: 8rem;

}



.each_project {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10rem;

}



.project_img {

  width: 35rem;

  margin: 0;

}



.each_project .txt_wrap {

  text-align: left;

}



.project_ttl {

  font-size: 3.4rem;

  line-height: 1.8;

}



.project_lead {

  width: 55.2rem;

  margin: 2rem 0 0;

  font-size: 1.9rem;

  line-height: 1.8;

}



.project_link {

  width: 14rem;

  height: 2.2rem;

  margin: 2rem 0 0;

  font-size: .9rem;

}



.project_area .switching_list {

  margin-bottom: 4rem;

}

}

/*------------------------project*/





/*people-------------------------*/

.people_area {

  background: #fff;

}



.area_heading {

  width: fit-content;

  margin: 0 auto;

}



.people_area .area_heading {

  position: relative;

  margin-bottom: 10rem;

}



.people_area .area_ttl {

  margin-bottom: 2rem;

  font-family: var(--font_jpn_B);

  font-size: 9rem;

  font-weight: 700;

  line-height: 1.17;

  letter-spacing: .05em;

}



.people_area .area_ttl .txt_S {

  margin-bottom: 3.5rem;

  font-family: var(--font-en);

  font-size: 4.4rem;

  font-weight: 500;

}



.people_area .area_ttl .txt_S .txh_10 {

  font-size: 5.4rem;

}



.people_area .area_ttl .txt_S .txt_th {

  font-size: 2.9rem;

}



.people_list {

  padding-bottom: 35rem;

}



.people_list li {

  position: relative;

}



.people_list li:nth-of-type(n+2) {

  margin-top: 55rem;

}



.people_list li:nth-of-type(2) {

  padding-top: 25rem;

}



.people_list li:nth-of-type(3) {

  padding-top: 27rem;

}



.people_list li:nth-of-type(4) {

  padding-top: 22rem;

}



.people_list li:nth-of-type(5) {

  padding-top: 26rem;

}



.people_catch {

  position: absolute;

  z-index: 1;

  top: 0;

  display: grid;

  place-items: center;

  width: 53rem;

  height: 40rem;

  font-family: var(--font_jpn_B);

  font-size: 3.6rem;

  font-weight: 700;

  line-height: 1.6;

  letter-spacing: .093em;

  color: #fff;

}



.people_list li:nth-of-type(1) .people_catch {

  right: 0;

  margin: 50rem -2rem 0 0;

  background: url(../img/shape_polkadot_001_sp.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(2) .people_catch {

  right: 0;

  margin: 0 -1rem 0 0;

  background: url(../img/shape_polkadot_002_sp.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(3) .people_catch {

  left: 0;

  margin: 0 0 0 -1rem;

  padding: 4rem 0 0 .5rem;

  background: url(../img/shape_polkadot_003_sp.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(4) .people_catch {

  left: 0;

  margin: 0 0 0 -1rem;

  background: url(../img/shape_polkadot_004_sp.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(5) .people_catch {

  left: 0;

  margin: 0 0 0 3rem;

  background: url(../img/shape_polkadot_005_sp.svg) center center / 100% auto no-repeat;

}





.people_list .txt_wrap {

  position: absolute;

  top: 100%;

  left: 50%;

  translate: -50% 0;

  width: 63rem;

}



.people_list li:nth-of-type(1) .txt_wrap {

  margin-top: 7.5rem;

}



.people_list li:nth-of-type(2) .txt_wrap {

  margin-top: 2rem;

}



.people_list li:nth-of-type(3) .txt_wrap {

  margin-top: 4rem;

}



.people_list li:nth-of-type(5) .txt_wrap {

  margin-top: 4rem;

}



.people_num {

  position: absolute;

  top: 0;

  right: 0;

  margin-top: -2rem;

  font-family: var(--font-en);

  font-size: 9.8rem;

  font-weight: 500;

  letter-spacing: .05em;

  font-variant-numeric: lining-nums;

}



.people_name {

  margin-bottom: 2rem;

  font-family: var(--font_jpn_B);

  font-size: 3.4rem;

  font-weight: 700;

  letter-spacing: .1em;

}



.people_name .jobTitle {

  display: block;

  margin-bottom: 2rem;

  font-family: var(--font_jpn_M);

  font-size: 2rem;

  font-weight: 500;

}



.people_name .txt_eng {

  font-family: var(--font-en);

}



.people_name .txt_kana {

  margin-left: 2rem;

  font-size: 1.7rem;

}



.people_area .accordion_outside input {

  display: none;

}



.people_area .accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .5s;

}



.people_area .opened .accordion_wrap {

  grid-template-rows: 1fr;

}



.people_area .accordion_inner {

  min-height: 9.5rem;

  overflow: hidden;

}



.people_area .accordion_btn {

  width: fit-content;

}



.people_area .opened .accordion_btn {

  margin-top: -7rem;

  margin-bottom: 7rem;

  transition: margin .5s;

}



.people_list li:nth-of-type(3) .opened .accordion_btn {

  margin-top: -16rem;

  margin-bottom: 16rem;

}



.people_list li:nth-of-type(4) .opened .accordion_btn {

  margin-top: -10rem;

  margin-bottom: 10rem;

}



.people_list li:nth-of-type(5) .opened .accordion_btn {

  margin-top: -10rem;

  margin-bottom: 10rem;

}



.people_area .accordion_btn span {

  position: relative;

  place-items: center;

  height: 4rem;

  padding-right: 2rem;

  font-family: var(--font-en);

  font-size: 2rem;

  letter-spacing: .2em;

  cursor: pointer;

}



.people_area .accordion_btn span::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1rem;

  height: 1rem;

  border-top: solid var(--color_regular) 1px;

  border-right: solid var(--color_regular) 1px;

  box-sizing: border-box;

  content: "";

}



.people_area .accordion_btn .opened::before {

  rotate: 135deg;

  margin-top: -.5rem;

}



.people_area .accordion_btn .closed::before {

  rotate: -45deg;

  margin-top: .1rem;

}



.people_area .opened .accordion_btn .opened,

.people_area .accordion_btn .closed {

  display: none;

}



.people_area .accordion_btn .opened,

.people_area .opened .accordion_btn .closed {

  display: grid;

}



.people_comment_wrap .for_space {

  display: block;

  float: right;

  width: 1px;

  height: 9.5rem;

}



.product_wrap {

  display: block;

  float: right;

  clear: both;

  width: 21rem;

}



.product_name {

  margin-top: 1rem;

  font-family: var(--font_jpn_B);

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: .1em;

  text-align: center;

}



.product_link {

  display: grid !important;

  place-items: center;

  width: 16.6rem;

  height: 3.4rem;

  margin: 1.5rem auto 0;

  border-radius: 10rem;

  background: var(--color_regular);

  font-family: var(--font-en);

  font-size: 2rem;

  color: #fff;

}



.product_link span {

  position: relative;

  padding-right: 2.5rem;

  letter-spacing: .2em;

}



.product_link span::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1rem;

  height: 1rem;

  border-top: solid #fff 1px;

  border-right: solid #fff 1px;

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.people_comment {

  font-family: var(--font_jpn_M);

  font-size: 1.9rem;

  line-height: 1.57;

  font-weight: 500;

  letter-spacing: .025em;

}



.people_comment .txt_eng {

  font-family: var(--font-en);

  font-weight: 400;

  letter-spacing: .025em;

}





@media screen and  (min-width:769px) {

.people_area {

  padding: 0;

}



.people_area .area_inner {

  position: relative;

  width: 130rem;

  margin: 0 auto;

  display: flex;

  gap: 6rem;

}



.area_heading {

  margin: 0;

}



.people_area .area_heading {

  position: sticky;

  top: 0;

  display: grid;

  place-items: center;

  height: auto;

  max-height: 100vh;

  margin-bottom: 0;

  padding-bottom: 20rem;

}



.people_area .area_heading::before {

  display: none;

}



.people_area .area_ttl {

  margin-bottom: 2rem;

  font-size: 6.8rem;

  line-height: 1.3;

  letter-spacing: .1em;

}



.people_area .area_ttl .txt_S {

  margin-bottom: 3.5rem;

  font-size: 2.6rem;

}



.people_area .area_ttl .txt_S .txh_10 {

  font-size: 3.2rem;

}



.people_area .area_ttl .txt_S .txt_th {

  font-size: 1.7rem;

}



.people_area .area_lead {

  font-size: 1.6rem;

  line-height: 1.875;

}



.people_list {

  flex: 1;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  padding: 16rem 0 50rem;

}



.people_list li {

  width: 35rem;

  height: fit-content;

}



.people_list li:nth-of-type(n+2) {

  margin-top: 0;

}



.people_list li:nth-of-type(even) {

  margin-top: 40rem;

}



.people_list li:nth-of-type(2) {

  padding-top: 16.5rem;

}



.people_list li:nth-of-type(3) {

  padding-top: 17rem;

}



.people_list li:nth-of-type(4) {

  z-index: 1;

  padding-top: 12rem;

}



.people_list li:nth-of-type(5) {

  padding-top: 17rem;

}



.people_list li:nth-of-type(2)::before {

  display: none;

}



.people_list li:nth-of-type(3)::before {

  display: none;

}



.people_list li:nth-of-type(4)::before {

  width: 21rem;

  height: 21rem;

  margin: -15rem -20rem 0 0;

  filter: blur(.5rem);

}



.people_list li:nth-of-type(5)::before {

  top: auto;

  right: auto;

  bottom: 0;

  left: 100%;

  width: 9.7rem;

  height: 9.7rem;

  margin: 0 0 -5rem 30rem;

}



.people_catch {

  width: 32rem;

  height: 25rem;

  font-size: 2.3rem;

  letter-spacing: .05em;

}



.people_list li:nth-of-type(1) .people_catch {

  margin: 20rem -9rem 0 0;

  background: url(../img/shape_polkadot_001_pc.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(2) .people_catch {

  margin: 0 -6rem 0 0;

  background: url(../img/shape_polkadot_002_pc.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(3) .people_catch {

  margin: 0 0 0 -8rem;

  padding: 1rem 0 0 1rem;

  background: url(../img/shape_polkadot_003_pc.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(4) .people_catch {

  margin: 0 0 0 -7rem;

  background: url(../img/shape_polkadot_004_pc.svg) center center / 100% auto no-repeat;

}



.people_list li:nth-of-type(5) .people_catch {

  margin: 0 0 0 -4rem;

  background: url(../img/shape_polkadot_005_pc.svg) center center / 100% auto no-repeat;

}



.people_list .txt_wrap {

  width: 34rem;

  margin-left: 2rem;

}



.people_list li:nth-of-type(1) .txt_wrap {

  margin-top: 4rem;

}



.people_list li:nth-of-type(2) .txt_wrap {

  margin-top: 0;

}



.people_list li:nth-of-type(3) .txt_wrap {

  margin-top: 1rem;

}



.people_list li:nth-of-type(5) .txt_wrap {

  margin-top: 1rem;

}



.people_num {

  margin-top: 1.2rem;

  margin-right: 2rem;

  font-size: 4rem;

}



.people_name {

  margin-bottom: 2.5rem;

  font-size: 2.2rem;

}



.people_name .jobTitle {

  margin-bottom: 1rem;

  font-size: 1rem;

}



.people_name .txt_kana {

  margin-left: 2rem;

  font-size: .8rem;

}



.people_comment_wrap {

  padding-right: 2rem;

}



.people_area .accordion_inner {

  min-height: 5rem;

}



.people_area .opened .accordion_btn {

  margin-top: .5rem;

  margin-bottom: 0;

}



.people_list li:nth-of-type(3) .opened .accordion_btn {

  margin-top: -3rem;

  margin-bottom: 3rem;

}



.people_list li:nth-of-type(4) .opened .accordion_btn {

  margin-top: .5rem;

  margin-bottom: 0;

}



.people_list li:nth-of-type(5) .opened .accordion_btn {

  margin-top: .5rem;

  margin-bottom: 0;

}



.people_area .accordion_btn span {

  height: 2.5rem;

  padding-right: 1rem;

  font-size: 1rem;

}



.people_area .accordion_btn span::before {

  width: .5rem;

  height: .5rem;

}



.people_area .accordion_btn .opened::before {

  margin-top: -.2rem;

}



.people_area .accordion_btn .closed::before {

  margin-top: 0;

}



.people_comment_wrap .for_space {

  height: 5rem;

}



.product_wrap {

  width: 11.5rem;

  margin: 0 -2rem 0 1rem;

}



.product_name {

  margin-top: .5rem;

  font-size: .8rem;

}



.product_link {

  width: 8.3rem;

  height: 1.7rem;

  margin: .8rem auto 0;

  font-size: 1rem;

}



.product_link span {

  padding-right: 1rem;

}



.product_link span::before {

  width: .5rem;

  height: .5rem;

}



.people_comment {

  font-size: 1.3rem;

  line-height: 1.3;

}



}

/*-------------------------people*/





/*refill-------------------------*/

.refill_area {

  background: #e2eae6;

}



.area_ttl .logo_ecostore {

  position: relative;

  display: block;

  width: 39rem;

  margin-bottom: 6rem;

  font-size: 0;

}



.area_ttl .logo_ecostore img {

  opacity: 0;

}



.area_ttl .logo_ecostore::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mask-image: url(../img/logo_ecostore.svg);

  mask-position: center center;

  mask-repeat: no-repeat;

  mask-size: 100% auto;

  -webkit-mask-image: url(../img/logo_ecostore.svg);

  -webkit-mask-position: center center;

  -webkit-mask-repeat: no-repeat;

  -webkit-mask-size: 100% auto;

  content: "";

}



.refill_area .area_ttl .logo_ecostore::before {

  background: var(--color_regular);

}



.refill_area .area_ttl {

  font-size: 17.8rem;

  letter-spacing: .09em;

}



.refill_area .area_lead {

  font-size: 2.9rem;

  line-height: 1.8;

  letter-spacing: .093em;

}



.refill_area .area_lead:nth-of-type(n+2) {

  margin-top: 5rem;

}



.refill_area .area_lead .txt_eng {

  font-family: var(--font-en);

  font-weight: 500;

  letter-spacing: .093em;

}



.refill_area .content_list {

  margin-top: 6rem;

}



.refill_area .content_list .each_content:nth-of-type(n+2) {

  margin-top: 1rem;

}



.refill_thumbnail {

  width: 61rem;

  margin: 0 auto;

  cursor: pointer;

}



.refill_area .thumbnail_caption {

  position: relative;

  width: 61rem;

  margin: 2rem auto 0;

  padding: 0 4rem;

  font-family: var(--font_jpn_M);

  font-size: 2.7rem;

  font-weight: 500;

  line-height: 1.85;

  letter-spacing: .09em;

}



.refill_ttl {

  width: 60.5rem;

  margin: 0 auto 4rem;

  padding-bottom: 4rem;

  border-bottom: solid var(--color_regular) .3rem;

  font-family: var(--font-en);

  text-align: center;

}



.content_refillStation .refill_ttl {

  font-size: 7.9rem;

  font-weight: 500;

  letter-spacing: .05em;

}



.content_ecofill .refill_ttl {

  padding-bottom: 1rem;

}



.content_ecofill .refill_ttl .logo_ecofill {

  display: block;

  width: 20rem;

  margin: 0 auto;

}



.content_5L .refill_ttl {

  font-size: 8rem;

  font-weight: 700;

  letter-spacing: .1em;

}



.content_5L .refill_ttl .txt_L {

  font-size: 11.7rem;

  letter-spacing: .1em;

  font-variant-numeric: lining-nums;

}



.refill_lead {

  margin-bottom: 3rem;

  font-family: var(--font_jpn_B);

  font-size: 3rem;

  font-weight: 700;

  line-height: 2;

  letter-spacing: .05em;

  text-align: center;

}



.refill_img {

  width: 64rem;

  margin: 0 auto 6rem;

}



.refill_caption {

  font-family: var(--font_jpn_M);

  font-size: 2.2rem;

  font-weight: 500;

  line-height: 2.2;

  letter-spacing: .093em;

  text-align: center;

}



.refill_link {

  display: grid !important;

  place-items: center;

  width: 40.6rem;

  height: 6.4rem;

  margin: 4rem auto 0;

  border-radius: 10rem;

  background: var(--color_regular);

  font-family: var(--font_jpn_B);

  font-size: 2.5rem;

  font-weight: 700;

  letter-spacing: .2em;

  color: #fff;

}





@media screen and  (min-width:769px) {

.refill_area {

  display: grid;

  place-items: center;

}



.refill_area .area_inner {

  position: sticky;

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 120rem;

  margin: 0 auto;

  padding-left: 2rem;

  padding-right: 9rem;

  padding-top: 0;

}



.area_ttl .logo_ecostore {

  width: 25rem;

  margin-bottom: 6rem;

}





.refill_area .area_heading {

  position: sticky;

  top: 0;

  display: grid;

  place-items: center;

  height: auto;

  height: 100vh;

  margin-bottom: 0;

  padding-bottom: 20rem;

}



.refill_area .area_heading::before {

  bottom: 100%;

  left: auto;

  right: 100%;

  width: 9.6rem;

  height: 9.6rem;

  margin: 0 17rem -5rem 0;

}



.refill_area .area_heading::after {

  bottom: auto;

  right: auto;

  top: 100%;

  left: 100%;

  width: 7.5rem;

  height: 7.5rem;

  margin: 10rem 0 0 5rem;

  rotate: -236deg;

}



.refill_area .area_ttl {

  margin-bottom: 3rem;

  font-size: 10.8rem;

}



.refill_area .area_lead {

  font-size: 1.7rem;

}



.refill_area .area_lead:nth-of-type(n+2) {

  margin-top: 3rem;

}



.refill_area .content_list {

  margin-top: 0;

  padding: 40rem 0 32rem;

}



.refill_area .content_list .each_content:nth-of-type(n+2) {

  margin-top: 3rem;

}



.refill_thumbnail {

  width: 43rem;

  margin: 0;

}



.refill_area .thumbnail_caption {

  width: auto;

  margin: 1rem 0 0;

  font-size: 1.6rem;

}



.refill_area .content_refillStation .thumbnail_caption::before {

  display: none;

}



.refill_area .content_5L .thumbnail_caption::before {

  display: none;

}



.refill_area .modal_outside::before {

  background: #e2eae6;

  opacity: .5;

}



.refill_area .modal_wrap {

  width: 150rem;

  padding: 12rem 0;

  background: #fff;

}



.refill_area .btn_modalClose {

  top: auto;

  right: auto;

  margin: -10rem 0 0 140rem;

}



.each_content .modal_content {

  display: flex;

  gap: 15rem;

  justify-content: center;

  align-items: center;

  padding-right: 14rem;

}



.refill_ttl {

  width: 50rem;

  border-bottom: solid var(--color_regular) .2rem;

}



.content_refillStation .refill_ttl {

  font-size: 6.8rem;

}



.content_ecofill .refill_ttl {

  padding-bottom: 3rem;

}



.content_ecofill .refill_ttl .logo_ecofill {

  width: 20rem;

}



.content_5L .refill_ttl {

  font-size: 8rem;

}



.content_5L .refill_ttl .txt_L {

  font-size: 11.7rem;

}



.refill_lead {

  margin-bottom: 0;

  font-size: 2.5rem;

  line-height: 2.2;

}



.refill_img {

  width: 50rem;

  margin: 0 auto 2rem;

}



.refill_caption {

  font-size: 1.6rem;

  line-height: 2;

}



.refill_link {

  width: 21rem;

  height: 3.3rem;

  margin: 3rem auto 0;

  font-size: 1.3rem;

}

}

/*-------------------------refill*/





/*promise-------------------------*/

.promise_area {

  padding: 15rem 0 70rem;

}



.promise_area::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/bg_promise_sp.jpg) top center / 100% auto no-repeat;

  content: "";

}



.promise_area::after {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(transparent 50rem, #bed3c4 105rem);

  content: "";

}



.promise_area .area_inner {

  padding: 0;

}



.promise_area .area_heading {

  color: #fff;

}



.promise_area .area_ttl .logo_ecostore {

  width: 32rem;

  margin-bottom: 3rem;

}



.promise_area .area_ttl .logo_ecostore::before {

  background: #fff;

}



.promise_area .area_ttl {

  margin-bottom: 2rem;

  font-family: var(--font_jpn_B);

  font-size: 9rem;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .1em;

}



.promise_area .area_lead {

  font-size: 4rem;

  line-height: 1.925;

  letter-spacing: .1em;

}



.promise_area .area_lead .txt_eng {

  font-family: var(--font-en);

  letter-spacing: .1em;

}



.promise_list {

  margin-top: 10rem;

  padding: 0 6rem;

}



.promise_list li:nth-of-type(n+2) {

  margin-top: 10rem;

}



.promise_img {

  margin-bottom: 3rem;

  border-radius: 2rem;

  overflow: clip;

}



.promise_list .txt_wrap {

  position: relative;

}



.promise_ttl {

  margin-bottom: 2rem;

  font-family: var(--font_jpn_B);

  font-size: 4.1rem;

  font-weight: 700;

  letter-spacing: .1em;

}



.promise_lead {

  font-family: var(--font_jpn_M);

  font-size: 2.6rem;

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .025em;

}



.promise_notes {

  position: absolute;

  top: 100%;

  right: 0;

  font-family: var(--font_jpn_M);

  font-size: 1.9rem;

  font-weight: 500;

  letter-spacing: .1em;

  text-align: right;

}



.promise_closing {

  width: fit-content;

  margin: 10rem auto 0;

  font-family: var(--font_jpn_B);

  font-size: 3.6rem;

  font-weight: 700;

  line-height: 1.8;

  letter-spacing: .05em;

}



@media screen and  (min-width:769px) {

.promise_area {

  padding: 0;

}



.promise_area .area_inner {

  display: flex;

}



.promise_area::before {

  display: none;

}



.promise_area::after {

  display: none;

}



.promise_area .area_heading {

  position: sticky;

  top: 0;

  display: grid;

  place-items: center;

  width: 48%;

  height: auto;

  max-height: 100vh;

  background: url(../img/bg_promise_pc.jpg) center left / cover no-repeat;

}



.promise_area .area_ttl .logo_ecostore {

  width: 19rem;

  margin-bottom: 3rem;

}



.promise_area .area_ttl {

  margin-bottom: 1rem;

  font-size: 7.5rem;

  line-height: 1.4;

  letter-spacing: .05em;

}



.promise_area .area_lead {

  font-size: 3.5rem;

  line-height: 1.7;

  letter-spacing: .05em;

}



.promise_area .area_lead .txt_eng {

  letter-spacing: .05em;

}



.promise_area .right_area {

  flex: 1;

  min-height: 100vh;

  padding: 80rem 0 100rem;

  background: #bed3c4;

}



.promise_area .right_area > div {

  width: 68rem;

  padding-left: 14.5rem;

}



.promise_list {

  display: grid;

  grid-template-rows: repeat(3, auto); 

  grid-auto-flow: column; 

  gap: 3rem 11.5rem;

  margin-top: 0;

  padding: 0;

}



.promise_list li {

  width: 22rem;

}



.promise_list li:nth-of-type(n+2) {

  margin-top: 0;

}



.promise_img {

  margin-bottom: 1rem;

  border-radius: .5rem;

}



.promise_ttl {

  margin-bottom: 1rem;

  font-size: 1.7rem;

}



.promise_lead {

  font-size: 1rem;

  line-height: 1.6;

}



.promise_notes {

  margin-top: 1rem;

  font-size: .7rem;

}



.promise_closing {

  margin: 2rem 0 ;

  font-size: 1.6rem;

  line-height: 1.9;

  letter-spacing: .093em;

  color: #fff;

}



}

/*-------------------------promise*/







/*story---------------------------*/

.story_area {

  padding: 15rem 0 70rem;

}



.story_area::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/bg_story_sp.jpg) top center / 100% auto no-repeat;

  content: "";

}



.story_area::after {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(transparent 50rem, #bed3c4 85rem);

  content: "";

}



.story_area .area_inner {

  padding: 0;

}



.story_area .area_heading {

  color: #fff;

}



.story_area .area_ttl .logo_ecostore {

  width: 30rem;

  margin-bottom: 3rem;

}



.story_area .area_ttl .logo_ecostore::before {

  background: #fff;

}



.story_area .area_ttl {

  margin-bottom: 3rem;

  font-size: 14.7rem;

  letter-spacing: .05em;

}



.story_area .sub_ttl {

  margin-bottom: 5rem;

  font-family: var(--font_jpn_B);

  font-size: 4.5rem;

  font-weight: 700;

  line-height: 1.7;

  letter-spacing: .1em;

}



.story_area .area_lead {

  width: 48.5rem;

  font-family: var(--font_jpn_B);

  font-size: 2.9rem;

  line-height: 1.8;

  letter-spacing: .05em;

}



.story_list_wrap {

  position: relative;

  margin-top: 15rem;

}



.story_list_wrap::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  margin-top: 44.5rem;

  font-family: var(--font-en);

  font-size: 2.5rem;

  letter-spacing: .1em;

  white-space: nowrap;

  content: "scroll ▶";

}



.story_list {

  position: relative;

  display: grid;

  grid-template-columns: repeat(7, 59.4rem);

  gap: 25rem;

  padding: 0 7rem;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.story_list::before {

  position: absolute;

  top: 0;

  left: 0;

  margin-top: 40rem;

  width: calc(700% - 18rem);

  height: .3rem;

  margin-left: 15rem;

  background: var(--color_regular);

  content: "";

}



.story_list::-webkit-scrollbar {

  display: none;

}



.story_list li .story_img {

  position: relative;

  margin-bottom: -5.5rem;

}



.story_list li .story_img::before {

  position: absolute;

  top: 100%;

  left: 0;

  width: 1.2rem;

  height: 1.2rem;

  margin: 4.3rem 0 0 8rem;

  border-radius: 50%;

  background: var(--color_regular);

  content: "";

}



.story_list li .txt_wrap {

  position: relative;

}



.story_list li .year_num {

  margin: 0 0 16rem 4rem;

  font-family: var(--font-en);

  font-size: 4.5rem;

  font-weight: 700;

  letter-spacing: .1em;

  color: #fff;

  font-variant-numeric: lining-nums;

}



.story_ttl {

  margin-bottom: 1rem;

  font-family: var(--font_jpn_B);

  font-size: 3.3rem;

  font-weight: 700;

  line-height: 1.4;

  letter-spacing: .1em;

}



.story_lead {

  font-family: var(--font_jpn_M);

  font-size: 2.6rem;

  font-weight: 500;

  line-height: 1.7;

  letter-spacing: 0;

}



.story_closing {

  width: fit-content;

  margin: 14rem auto 0;

  font-family: var(--font_jpn_B);

  font-size: 5rem;

  font-weight: 700;

  line-height: 1.85;

  letter-spacing: .075em;

}







@media screen and  (min-width:769px) {

.story_area {

  padding: 0;

}



.story_area::before {

  display: none;

}



.story_area::after {

  display: none;

}



.story_area .area_inner {

  display: flex;

}



.story_area .area_heading {

  position: sticky;

  top: 0;

  display: grid;

  place-items: center;

  width: 48%;

  height: auto;

  max-height: 100vh;

  background: url(../img/bg_story_pc.jpg) center right / cover no-repeat;

  order: 2;

}



.story_area .area_ttl .logo_ecostore {

  width: 19rem;

  margin-bottom: 3rem;

}



.story_area .area_ttl {

  margin-bottom: 3rem;

  font-size: 10.2rem;

}



.story_area .sub_ttl {

  margin-bottom: 3rem;

  font-size: 3.5rem;

  letter-spacing: .05em;

}



.story_area .area_lead {

  width: fit-content;

  font-size: 1.6rem;

  line-height: 1.9;

  letter-spacing: .093em;

}



.story_area .left_area {

  flex: 1;

  min-height: 100vh;

  padding: 60rem 0 100rem;

  background: #bed3c4;

}



.story_area .left_area > div {

  width: 68rem;

  margin: 0 0 0 auto;

  padding-right: 16.5rem;

}



.story_list_wrap {

  margin-top: 0;

}



.story_list_wrap::after {

  display: none;

}



.story_list {

  display: block;

  padding: 0;

  overflow-y: visible;

}



.story_list::before {

  margin: 0 0 0 21.6rem;

  width: 1px;

  height: calc(100% - 15rem);

  margin: 1.5rem 0 0 21.2rem;

}



.story_list li {

  display: flex;

  gap: 6rem;

}



.story_list li:nth-of-type(n+2) {

  margin-top: 7rem;

}



.story_list li .story_img {

  width: 18rem;

  margin-bottom: 0;

}



.story_list li .story_img::before {

  top: 0%;

  left: 100%;

  width: .5rem;

  height: .5rem;

  margin: 1.5rem 0 0 3rem;

}



.story_list li .txt_wrap {

  flex: 1;

}



.story_list li .year_num {

  margin: 0 0 1rem 0;

  font-size: 3.2rem;

  letter-spacing: .025em;

  color: var(--color_regular);

}



.story_ttl {

  margin-bottom: 1rem;

  font-size: 1.8rem;

  line-height: 1.5;

  letter-spacing: .025em;

}



.story_lead {

  font-size: 1.4rem;

  letter-spacing: .025em;

}



.story_closing {

  margin: 3rem 0 0;

  font-size: 3.4rem;

  line-height: 1.7;

  letter-spacing: .1em;

}

}

/*---------------------------story*/





/*message-------------------------*/

.message_area {

  padding: 15rem 0;

  background: #fff;

}



.message_area .area_ttl {

  margin-bottom: 5rem;

  font-family: var(--font_jpn_B);

  font-size: 6.8rem;

  font-weight: 700;

  letter-spacing: .1em;

}



.message_area .area_ttl .txt_S {

  margin-bottom: 3rem;

  font-family: var(--font-en);

  font-size: 2.9rem;

  font-weight: 500;

  line-height: 1.5;

}



.message_area .area_ttl .txt_10 {

  font-size: 3.6rem;

}



.message_area .area_ttl .txt_th {

  font-size: 1.9rem;

}



.message_img {

  width: 60.4rem;

  margin: 0 auto 9rem;

}



.message_wrap {

  padding: 0 6rem;

}



.message_wrap p {

  font-family: var(--font_jpn_R);

  font-size: 2.4rem;

  line-height: 2.2;

  letter-spacing: .01em;

}



.message_wrap p:nth-of-type(n+2) {

  margin-top: 9rem;

}



.message_wrap p:nth-last-of-type(1) {

  width: fit-content;

  margin: 7rem 0 0 auto;

}



.message_wrap .jobTitle {

  display: block;

  margin: 0 0 .5rem -4rem;

}



@media screen and  (min-width:769px) {

.message_area {

  padding: 16rem 0;

}



.message_area .area_inner {

  display: flex;

  gap: 12rem;

  width: 120rem;

  margin: 0 auto;

  padding-left: 11rem;

}



.message_area .area_ttl {

  width: fit-content;

  margin: 0 auto 5rem;

  font-size: 3.8rem;

}



.message_area .area_ttl .txt_S {

  margin-bottom: 2rem;

  font-size: 1.8rem;

  line-height: 1.8;

}



.message_area .area_ttl .txt_10 {

  font-size: 2.3rem;

}



.message_area .area_ttl .txt_th {

  font-size: 1.2rem;

}



.message_img {

  width: 35rem;

  margin: 0;

}



.message_wrap {

  flex: 1;

  padding: 0;

}



.message_wrap p {

  font-size: 1.5rem;

  line-height: 2;

  letter-spacing: .025em;

}



.message_wrap p:nth-of-type(n+2) {

  margin-top: 4rem;

}



.message_wrap p:nth-last-of-type(1) {

  margin: 0 0 0 auto;

}



.message_wrap .jobTitle {

  margin: 0 0 .0 -2.5rem;

}



}

/*-------------------------message*/





/*floating icon-------------------*/

.icon_floating {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  width: 11rem;

  margin: 0 4rem 8rem 0;

  filter: drop-shadow(0 0 .5rem rgba(0, 0, 0, .15));

  cursor: pointer;

  opacity: 0;

  pointer-events: none;

  transition: opacity .5s;

}



.icon_floating.active {

  opacity: 1;

  pointer-events: auto;

}



@media screen and  (min-width:769px) {

.icon_floating {

  width: 7rem;

  margin: 0 5rem 5rem 0;

}

}

/*-------------------floating icon*/



/*shareボタン、shareテキスト---------------------------*/

@media screen and  (max-width:768px) {

.LP_page .only_pc {

  display: none;

}



#page-top {

  display: none !important;

}



.share-txt {

  display: none;

}



#HeaderWrap {

  height: 0;

}



}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .LP_page .only_sp {

    display: none;

  }



.LP_page .activePoint {

  transform: translateY(2rem);

}





}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1600px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1600));

  }

}



@media screen and (max-width: 768px) {

  html {

    font-size: calc(10 * (100vw / 750));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/