@charset "UTF-8";



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

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 5;

}



:root {

  --pw: 1920; /* PC幅 */

  --sw: 750; /* SP幅 */

  --artboard-pw: 750; /* PCアートボード幅 */

  --artboard-sw: 750; /* SPアートボード幅 */

  --rem: calc(var(--variable) * var(--ratio));

  --rem-pc: var(--variable);



  --font_regular: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;

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

  --font_mix: "AlrightSans", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;



  --color_regular: #000;

  --color_green: #70a590;

}



@media (768px <= width) {

  :root {

    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));

    --variable: calc(100vw / var(--pw));

  }

}

@media (1920px <= width) {

  :root {

    --variable: 1px;

  }

}

@media (width < 768px) {

  :root {

    --ratio: 1;

    --variable: calc(100vw / var(--sw));

  }

}





.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  font-feature-settings: "palt";

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.LP_page {

  width: 100%;

  background: #fff;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page :where(a) {

  display: block;

}



/* .LP_page a:hover {

  opacity: 1 !important;

} */



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page_inner {

  background: #fff;

  border-bottom: 1px solid #f7f7f7;

}





.fade {

  opacity: 0;

  transition: opacity 1s cubic-bezier(.4,.4,0,1);

  &.is-active {

    opacity: 1;

  }

  .is-active > & {

    opacity: 1;

  }

}



.clip-anim {

  display: block;

  clip-path: inset(0 100% 0 0);

  transition: clip-path .9s .2s ease-out;

  &.is-active {

    clip-path: inset(0 0 0 0);

  }

  .is-active > & {

    clip-path: inset(0 0 0 0);

  }

}



.slide-up {

  --slide-duration: 0.9s;

  opacity: 0;

  transform: translateY(calc(50 * var(--rem)));

  transition: opacity calc(var(--slide-duration) - .2s) ease, transform var(--slide-duration) ease;

  transition-delay: var(--delay, 0.3s);

  &.is-active {

    opacity: 1;

    transform: translateY(0);

  }

  .is-active > & {

    opacity: 1;

    transform: translateY(0);

  }

}



/* .slide-up-text {

  overflow: clip;

}

.slide-up-text-item {

  display: inline-block;

  opacity: 0;

  translate: 0 140%;

  transition: opacity .4s ease-in-out, translate .7s ease-in-out;

  transition-delay: var(--delay, 0s);

  .slide-up-text-container.is-active & {

    opacity: 1;

    translate: 0 0;

  }

} */



.component_section_heading {

  display: flex;

  flex-direction: column;

  align-items: center;

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-weight: bold;

  font-size: calc(46 * var(--rem));

  line-height: calc(68 / 46);

  letter-spacing: .02em;

  text-align: center;

}

.component_section_heading_main,

.component_section_heading_sub {

  display: block;

}

.component_section_heading_sub {

  margin-top: calc(24 * var(--rem));

  font-size: calc(30 * var(--rem));

  letter-spacing: .1em;

}



.component_button {

  display: flex;

  align-items: center;

  justify-content: center;

  width: calc(258 * var(--rem));

  height: calc(67 * var(--rem));

  margin-inline: auto;

  padding-top: calc(12 * var(--rem));

  padding-left: calc(8 * var(--rem));

  border-radius: calc(999 * var(--rem));

  background: var(--color_green);

  color: #fff;

  font-family: var(--font_eng);

  font-variant-numeric: lining-nums;

  font-size: calc(38 * var(--rem));

  letter-spacing: .17em;

}



.main_visual {

  position: relative;

}

.main_visual_heading {

  position: absolute;

  top: calc(67 * var(--rem));

  left: calc(75 * var(--rem));

  width: calc(501 * var(--rem));

  transition-delay: .5s;

}

.main_visual_icon {

  position: absolute;

  top: calc(38 * var(--rem));

  right: calc(44 * var(--rem));

  width: calc(137 * var(--rem));

  transition-delay: 1.6s;

}



.section_intro {

  padding-block: calc(65 * var(--rem)) calc(65 * var(--rem));

}

.section_intro_text {

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-size: calc(28 * var(--rem));

  font-weight: bold;

  line-height: calc(60 / 28);

  letter-spacing: .1em;

  text-align: center;

}



.banner_area {

  width: calc(660 * var(--rem));

  margin-bottom: calc(52 * var(--rem));

  margin-inline: auto;

}





.project_section_refill_pack {

  padding-top: calc(92 * var(--rem));

  .component_section_heading {

    margin-bottom: calc(68 * var(--rem));

  }

  .item_box_list_container {

    padding-bottom: calc(95 * var(--rem));

  }

}



.project_section_bottle {

  .component_section_heading {

    margin-bottom: calc(67 * var(--rem));

  }

  .item_box_list_container {

    padding-bottom: calc(100 * var(--rem));

  }

  .benefit_block {

    padding-top: calc(49 * var(--rem));

    padding-bottom: calc(129 * var(--rem));

    /* padding-bottom: calc(50 * var(--rem)); */

  }

}





.item_box_list {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.item_box_list--1 {

  margin-left: calc(-10 * var(--rem));

}

.item_box_list--2 {

  margin-top: calc(62 * var(--rem));

  margin-left: calc(44 * var(--rem));

}

.item_box_list--3 {

  margin-top: calc(66 * var(--rem));

}

.item_box_list--4 {

  margin-left: calc(-24 * var(--rem));

}

.item_box_list--5 {

  margin-top: calc(25 * var(--rem));

  margin-left: calc(33 * var(--rem));

}

.item_box_list--6 {

  margin-top: calc(15 * var(--rem));

  margin-left: calc(-9 * var(--rem));

}

.item_box {

  width: calc(258 * var(--rem));

  &:nth-child(even) {

    margin-left: calc(89 * var(--rem));

  }

  &.--only {

    width: fit-content;

    margin-left: calc(35 * var(--rem));

  }

}

.item_box--secondary {

  .item_box_body {

    margin-top: calc(8 * var(--rem));

  }

}

.item_box--5 {

  width: fit-content;

}

.item_box_image {

  width: calc(var(--image-width) * var(--rem));

  margin-inline: auto;

}

.item_box_body {

  margin-top: calc(33 * var(--rem));

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-weight: bold;

  text-align: center;

}

.item_box_name {

  font-size: calc(27 * var(--rem));

  line-height: calc(35 / 27);

  letter-spacing: .1em;

  .--small {

    font-size: calc(20 * var(--rem));

  }

}

.item_box_price {

  margin-top: calc(8 * var(--rem));

  font-size: calc(25 * var(--rem));

  line-height: calc(28 / 25);

  letter-spacing: .06em;

  .capacity {

    margin-right: calc(18 * var(--rem));

    font-size: calc(18 * var(--rem));

  }

  .--small {

    font-size: calc(17 * var(--rem));

  }

}

.item_box_button {

  margin-top: calc(24 * var(--rem));

}

.item_box_list_note {

  margin-top: calc(71 * var(--rem));

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-weight: bold;

  font-size: calc(16 * var(--rem));

  line-height: 1;

  letter-spacing: .11em;

  text-align: center;

}





.benefit_block {

  padding-top: calc(55 * var(--rem));

  padding-inline: calc(45 * var(--rem));

  padding-bottom: calc(125 * var(--rem));

  background: #e2eae6;

}

.benefit_box {

  & + & {

    margin-top: calc(76 * var(--rem));

  }

}

.benefit_box_image {

  position: relative;

  width: 100%;

}

.benefit_box_image_logo {

  position: absolute;

  right: calc(-28 * var(--rem));

  bottom: calc(-81 * var(--rem));

  width: calc(246 * var(--rem));

  height: calc(247 * var(--rem));

}

.benefit_box_image_logo_round {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100%;

  translate: -50% -50%;

  animation: rotation 40s linear infinite;

}

@keyframes rotation {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}

.benefit_box_body {

  padding-top: calc(41 * var(--rem));

  .fade-slide-right {

    opacity: 0;

    transform: translateX(calc(-60 * var(--rem)));

    transition: .8s;

    transition-delay: var(--delay, 0s);

  }

  &.is-active {

    .fade-slide-right {

      opacity: 1;

      transform: translateX(0);

    }

  }

}

.benefit_box_body--2 {

  padding-top: calc(47 * var(--rem));

  .benefit_box_check {

    margin-left: calc(24 * var(--rem));

  }

}

.benefit_box_body--3 {

  position: relative;

  padding-top: calc(59 * var(--rem));

  .benefit_box_check {

    margin-left: calc(24 * var(--rem));

  }

  .benefit_box_check_item {

    &.--3,

    &.--4 {

      margin-top: calc(23 * var(--rem));

    }

  }

}

.benefit_box_body_logo {

  position: absolute;

  top: calc(355 * var(--rem));

  right: calc(22 * var(--rem));

  width: calc(99 * var(--rem));

  height: calc(98 * var(--rem));

}

.benefit_box_tag {

  display: flex;

  align-items: center;

  width: calc(310 * var(--rem));

  height: calc(48 * var(--rem));

  margin-bottom: calc(37 * var(--rem));

  padding-top: calc(6 * var(--rem));

  padding-left: calc(28 * var(--rem));

  background: url(../img/bg_tag.png) no-repeat top left/cover;

  color: #fff;

  font-family: var(--font_eng);

  font-variant-numeric: lining-nums;

  font-weight: bold;

  font-size: calc(26 * var(--rem));

  line-height: 1;

  letter-spacing: .07em;

}



.benefit_box_check {

  margin-left: calc(47 * var(--rem));

}

.benefit_box_check_item {

  font-size: calc(27 * var(--rem));

  font-weight: bold;

  line-height: calc(36 / 27);

  letter-spacing: var(--letter-spacing, 0.09em);

  & + & {

    margin-top: calc(16 * var(--rem));

  }

}

.benefit_box_check_item_body {

  position: relative;

  display: flex;

  line-height: inherit;

  &::before {

    content: "";

    flex-shrink: 0;

    display: block;

    width: calc(28 * var(--rem));

    height: calc(21 * var(--rem));

    margin-top: calc(8 * var(--rem));

    margin-right: calc(19 * var(--rem));

    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22%E7%B7%A8%E9%9B%86%E3%83%A2%E3%83%BC%E3%83%89%22%20viewBox%3D%220%200%2027.63%2020.64%22%3E%3Cpath%20d%3D%22M11.03%2012.56%204.04%205.57%200%209.61l6.99%206.99%204.04%204.04%204.04-4.04L27.63%204.04%2023.59%200z%22%20style%3D%22fill%3A%2370a590%22%2F%3E%3C%2Fsvg%3E') no-repeat top left/100%;

  }

}



.benefit_block_button {

  width: calc(658 * var(--rem));

  margin-inline: auto;

  margin-top: calc(150 * var(--rem));

}





.sticky-parallax-wrapper {

  position: relative;

  /* height: calc(4560 * var(--rem)); */

  /* padding-bottom: 150px; */

  background: linear-gradient(to top, #e2eae6 0px, #e2eae6 500px, transparent 500px, transparent 100%);

}

.js-sticky-section {

  position: sticky;

  top: 0;

  min-height: 100dvh;

}





.project_section_head {

  padding-top: calc(129 * var(--rem));

  padding-bottom: calc(147 * var(--rem));

}

.project_section_head_heading {

  position: relative;

  display: flex;

  flex-direction: column;

  width: fit-content;

  margin-inline: auto;

  color: var(--color_green);

  font-family: var(--font_mix);

  font-weight: bold;

  text-align: center;

  translate: calc(6 * var(--rem)) 0;

  &::before,

  &::after {

    content: "";

    position: absolute;

    top: calc(-2 * var(--rem));

    display: block;

    width: calc(89 * var(--rem));

    height: calc(118 * var(--rem));

    background: no-repeat top center / 100%;

  }

  &::before {

    background-image: url(../img/heading_deco_3.png);

    left: calc(-71 * var(--rem));

  }

  &::after {

    background-image: url(../img/heading_deco_4.png);

    right: calc(-75 * var(--rem));

  }

}

.project_section_head_heading_main {

  font-size: calc(59 * var(--rem));

  font-weight: 600;

  line-height: 1;

  letter-spacing: .01em;

}

.project_section_head_heading_sub {

  margin-top: calc(21 * var(--rem));

  font-size: calc(36 * var(--rem));

  line-height: 1;

  letter-spacing: .08em;

}

.project_section_head_image {

  width: calc(656 * var(--rem));

  margin-top: calc(42 * var(--rem));

  margin-inline: auto;

}

.project_section_head_text {

  margin-top: calc(29 * var(--rem));

  font-family: var(--font_mix);

  font-size: calc(28 * var(--rem));

  font-weight: bold;

  line-height: calc(60 / 28);

  letter-spacing: .1em;

  text-align: center;

}





.front {

  position: relative;

  /* z-index: 10; */

  /* margin-top: -150px; */

  background: #fff;

}

.section_point_wrapper {

  background: #e2eae6;

}

.section_point {

  background: var(--color_green);

  border-radius: calc(45 * var(--rem)) calc(45 * var(--rem)) 0 0;

  padding-top: calc(91 * var(--rem));

  padding-bottom: calc(45 * var(--rem));

  color: #fff;

}

.section_point_label {

  width: fit-content;

  margin-inline: auto;

  padding-bottom: calc(13 * var(--rem));

  padding-inline: calc(9 * var(--rem));

  border-bottom: calc(2 * var(--rem)) solid currentColor;

  font-family: var(--font_eng);

  font-weight: 900;

  font-size: calc(21 * var(--rem));

  line-height: 1;

  letter-spacing: .09em;

  text-align: center;

}

.section_point_heading {

  margin-top: calc(66 * var(--rem));

  font-family: var(--font_mix);

  font-size: calc(32.24 * var(--rem));

  font-weight: bold;

  line-height: calc(74.93 / 32.24);

  letter-spacing: .1em;

  text-align: center;

  .--em {

    font-style: normal;

    font-size: calc(52 * var(--rem));

    letter-spacing: .06em;

  }

}

.section_point_heading_body {

  position: relative;

  &::before,

  &::after {

    content: "";

    position: absolute;

    top: 0;

    width: calc(76 * var(--rem));

    height: calc(121 * var(--rem));

    background: no-repeat top center/100%;

  }

  &::before {

    left: calc(-58 * var(--rem));

    background-image: url(../img/heading_deco_1.png);

  }

  &::after {

    right: calc(-111 * var(--rem));

    background-image: url(../img/heading_deco_2.png);

  }

}

.section_point_image {

  width: calc(667 * var(--rem));

  margin-inline: auto;

  margin-top: calc(30 * var(--rem));

}

.section_point_body {

  margin-top: calc(51 * var(--rem));

}

.section_point_body_arrow {

  width: calc(125 * var(--rem));

  height: calc(47 * var(--rem));

  margin-inline: auto;

  margin-bottom: calc(56 * var(--rem));

  border-top: calc(47 * var(--rem)) solid #b0d4ca;

  border-left: calc((125 / 2) * var(--rem)) solid transparent;

  border-right: calc((125 / 2) * var(--rem)) solid transparent;

}

.section_point_body_main {

  display: flex;

  margin-left: calc(58 * var(--rem));

}

.section_point_body_main_fig {

  width: calc(197 * var(--rem));

  margin-right: calc(31 * var(--rem));

}

.section_point_body_main_content_text {

  margin-top: calc(17 * var(--rem));

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-size: calc(28.42 * var(--rem));

  font-weight: bold;

  line-height: calc(46.01 / 28.42);

  > span {

    display: block;

  }

  .--em {

    position: relative;

    margin-top: calc(31 * var(--rem));

    padding-bottom: calc(12 * var(--rem));

    font-style: normal;

    font-size: calc(46.01 * var(--rem));

    letter-spacing: .06em;

    &::after {

      content: "";

      position: absolute;

      bottom: 0;

      left: 0;

      width: 0;

      height: calc(3 * var(--rem));

      background: currentColor;

      transition: width .7s .6s ease-in-out;

    }

    .section_point_body_main.is-active & {

      &::after {

        width: 100%;

      }

    }

    sup {

      margin-left: calc(4 * var(--rem));

      font-size: .6em;

    }

  }

  .--1 {

    letter-spacing: .06em;

  }

  .--3 {

    margin-top: calc(38 * var(--rem));

    letter-spacing: .07em;

  }

  sub {

    font-size: .8em;

    vertical-align: baseline;

  }

  sup {

    font-size: .8em;

    vertical-align: top;

  }

}

.section_point_note {

  margin-top: calc(77 * var(--rem));

  margin-left: calc(48 * var(--rem));

}

.section_point_note_item {

  display: flex;

  font-family: var(--font_mix);

  font-variant-numeric: lining-nums;

  font-size: calc(11 * var(--rem));

  font-weight: bold;

  line-height: calc(18 / 11);

  text-align: justify;

  > p {

    line-height: inherit;

  }

}

.section_point_note_item_number {

  margin-right: calc(8 * var(--rem));

  letter-spacing: -.05em;

}

.section_point_note_item_text {

  width: calc(632 * var(--rem));

  letter-spacing: var(--letter-spacing, .03em);

}





.section_bottom {

  padding-top: calc(73 * var(--rem));

  padding-inline: calc(50 * var(--rem));

  padding-bottom: calc(82 * var(--rem));

  border-bottom: 1px solid #f7f7f7;

}



.refill_block {

  padding-top: calc(56 * var(--rem));

  padding-bottom: calc(52 * var(--rem));

  background: #e2eae6;

  border-radius: calc(39 * var(--rem));

  .component_section_heading_main {

    font-size: calc(50 * var(--rem));

    letter-spacing: -.02em;

  }

}

.refill_block_image {

  width: calc(539 * var(--rem));

  margin-top: calc(49 * var(--rem));

  margin-inline: auto;

}

.refill_block_button {

  width: calc(543 * var(--rem));

  margin-top: calc(63 * var(--rem));

  margin-inline: auto;

}







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

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

.only_pc {

  display: none;

}



}

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





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

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

  .only_sp {

    display: none;

  }



  .LP_page {

    position: relative;

    z-index: 1;

    background: #b0d4ca;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    margin: 0 auto;

  }



  .LP_page_inner {

    width: calc(var(--artboard-pw) * var(--rem-pc));

    overflow: clip;

    /* border-right: 1px solid #B8D4C2; */

    /* border-left: 1px solid #B8D4C2; */

  }



  .fixed_area {

    position: fixed;

    top: 0;

    left: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100%;

    margin: 0 auto;

  }



  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

    width: calc((100% - (var(--artboard-pw) * var(--rem-pc))) / 2);

    height: 100%;

    padding-top: calc(120 * var(--rem-pc));

  }



  .fixed_left .logo_eco {

    width: calc(206 * var(--rem-pc));

  }



  .fixed_right .navigation_list > li:nth-of-type(n+2) {

    margin-top: calc(44 * var(--rem-pc));

  }



  .fixed_right .navigation_list li a {

    font-size: calc(17 * var(--rem-pc));

    font-weight: bold;

    letter-spacing: .07em;

  }



  .fixed_right .navigation_list li a .txt_eng {

    margin-right: calc(32 * var(--rem-pc));

    font-family: var(--font_eng);

    font-variant-numeric: lining-nums;

    font-size: calc(31 * var(--rem-pc));

    font-weight: 500;

    letter-spacing: .07em;

    color: var(--color_green);

  }



}

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