@charset "utf-8";
/* ↓↓↓ common ↓↓↓ */
:root {
  --Livvic: "Livvic", sans-serif;
  --Zen_Kaku_New: "Zen Kaku Gothic New", sans-serif;
  --Zen_Maru: "Zen Maru Gothic", sans-serif;
  --about_color: #FDA486;
  --story_color: #FEF589;
  --recycle_color: #CAF555;
  --movie_color: #7DE24F;
  --keywords_color: #B6E4FF;
  --news_color: #FDBBE6;
}
.wb {
  display: inline-block;
}
.sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
body {
  width: 100%;
  background-color: #F8FFEB;
}
body.noscroll {
  overflow: clip;
}
ruby > rt {
  display: ruby-text;
  font-size: 50%;
  text-align: start;
}
rt {
  text-indent: 0px;
  line-height: normal;
  text-emphasis: none;
}
/* ↑↑↑ common ↑↑↑ */
/* ↓↓↓ header ↓↓↓ */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
header .ruby_switch {
  position: absolute;
  border: 1px solid #000;
  border-radius: min(0.625vw,8px);
  overflow: hidden;
  translate: 0 -50%;
  top: 50%;
  right: min(1.5625vw,20px);
}
@media screen and (max-width: 768px) {
  header .ruby_switch {
    border-radius: 8px;
    right: 84px;
  }
}
header .ruby_switch .ruby_head {
  font-size: clamp(1rem,1.09375vw,1.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 5px min(1.484375vw,19px);
}
@media screen and (max-width: 768px) {
  header .ruby_switch .ruby_head {
    font-size: 1.2rem;
    padding: 4px 16px;
  }
}
header .ruby_switch .ruby_inner {
  display: flex;
  border-top: 1px solid #000;
}
header .ruby_switch .ruby_btn {
  font-size: clamp(1.4rem,1.40625vw,1.8rem);
  font-family: var(--Livvic);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
  background-color: #969696;
  -webkit-text-stroke: 1px transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  cursor: pointer;
  padding: min(0.625vw,8px) 0;
  transition: color ease .3s, text-stroke-color ease .3s;
}
@media screen and (max-width: 768px) {
  header .ruby_switch .ruby_btn {
    font-size: 1.6rem;
    padding: 10px 0;
  }
}
header .ruby_switch .ruby_btn:last-of-type {
  border-left: 1px solid #000;
}
header .ruby_switch .ruby_btn.active {
  -webkit-text-stroke-color: #000;
  background-color: #7DE24F;
}
@media screen and (min-width: 769px) {
  header .ruby_switch .ruby_btn:not(.active):hover {
    color: #7DE24F;
    -webkit-text-stroke-color: #000;
  }
}
header .head_inner {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding: min(1.25vw,16px) min(11.25vw,144px) min(1.25vw,16px) min(1.25vw,16px);
}
@media screen and (max-width: 768px) {
  header .head_inner {
    padding: 0;
  }
}
header .head_inner::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: -1;
}
header .head_inner .head_logo {
  position: relative;
  display: flex;
  gap: 0 min(0.625vw,8px);
  align-items: center;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  header .head_inner .head_logo {
    flex-direction: column;
    align-items: flex-start;
    margin: 13px 0 12px 12px;
  }
}
header .head_inner .head_logo .logo_corp {
  width: min(19.765625vw,253px);
  display: block;
  transition: opacity ease .3s;
}
@media screen and (min-width: 769px) {
  header .head_inner .head_logo .logo_corp:hover {
    opacity: .7;
  }
}
@media screen and (max-width: 768px) {
  header .head_inner .head_logo .logo_corp {
    width: 172px;
  }
}
header .head_inner .head_logo .logo_corp picture {
  display: block;
}
header .head_inner .head_logo .logo_sustainable {
  width: min(17.96875vw,230px);
  transition: opacity ease .3s;
}
@media screen and (min-width: 769px) {
  header .head_inner .head_logo .logo_sustainable:hover {
    opacity: .7;
  }
}
@media screen and (max-width: 768px) {
  header .head_inner .head_logo .logo_sustainable {
    width: 135px;
    margin-top: 10px;
  }
}
header .head_inner .menu_btn {
  position: relative;
  width: 48px;
  display: none;
  cursor: pointer;
  margin-right: 16px;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_btn {
    display: block;
  }
}
header .head_inner .menu_btn .btn_line {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #000;
  display: block;
  transform-origin: center;
  transition: rotate ease .3s, top ease .3s;
}
header .head_inner .menu_btn .btn_line:nth-of-type(1) {
  top: 0;
}
header .head_inner .menu_btn .btn_line:nth-of-type(2) {
  top: 8px;
}
header .head_inner .menu_btn .btn_line:nth-of-type(3) {
  top: 17px;
}
header.active .head_inner .menu_btn .btn_line:nth-of-type(1),
header.active .head_inner .menu_btn .btn_line:nth-of-type(2) {
  rotate: 15deg;
  top: 8px;
}
header.active .head_inner .menu_btn .btn_line:nth-of-type(3) {
  rotate: -15deg;
  top: 8px;
}
@media screen and (min-width: 769px) {
  header .head_inner .menu_btn:hover .btn_line:nth-of-type(1),
  header .head_inner .menu_btn:hover .btn_line:nth-of-type(2) {
    rotate: 15deg;
    top: 8px;
  }
  header .head_inner .menu_btn:hover .btn_line:nth-of-type(3) {
    rotate: -15deg;
    top: 8px;
  }
}
header .head_inner .menu_btn .btn_txt {
  width: fit-content;
  height: 1.2rem;
  font-size: 1.2rem;
  font-family: var(--Livvic);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 24px auto 0;
}
header .head_inner .menu_btn .btn_txt :is(.txt_menu,.txt_close) {
  transition: translate ease .3s;
}
header.active .head_inner .menu_btn .btn_txt :is(.txt_menu,.txt_close) {
  display: block;
  translate: 0 calc(-100% - 4px);
}
@media screen and (min-width: 769px) {
  header .head_inner .menu_btn:hover .btn_txt :is(.txt_menu,.txt_close) {
    display: block;
    translate: 0 calc(-100% - 4px);
  }
}
header .head_inner .menu_block {
  height: 100%;
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block {
    position: fixed;
    width: 100%;
    height: 100vh;
    height: 100svh;
    background-color: #fff;
    display: none;
    padding: 134px 30px 149px;
    top: 0;
    left: 0;
    z-index: -1;
  }
  header .head_inner .menu_block::before {
    content: '';
    position: absolute;
    width: 68px;
    height: auto;
    aspect-ratio: 68/30;
    background-image: url(../img/common/menu_deco.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: min(61.46926536731634vh,410px);
    top: min(61.46926536731634dvh,410px);
    right: 26px;
  }
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block .scroll_wrap {
    position: relative;
    overflow: scroll;
    height: 100%;
  }
}
header .head_inner .menu_block .menu_list {
  display: flex;
  gap: min(0.9375vw,12px);
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block .menu_list {
    flex-wrap: wrap;
    gap: 30px 30px;
  }
  header .head_inner .menu_block .menu_list .menu_item {
    width: calc((100% - 30px)/2);
  }
}
header .head_inner .menu_block .menu_list .item_about {
  --menu_color: var(--about_color);
}
header .head_inner .menu_block .menu_list .item_story {
  --menu_color: var(--story_color);
}
header .head_inner .menu_block .menu_list .item_recycle {
  --menu_color: var(--recycle_color);
}
header .head_inner .menu_block .menu_list .item_movie {
  --menu_color: var(--movie_color);
}
header .head_inner .menu_block .menu_list .item_keywords {
  --menu_color: var(--keywords_color);
}
header .head_inner .menu_block .menu_list .item_news {
  --menu_color: var(--news_color);
}
header .head_inner .menu_block .menu_list .item_corp {
  display: none;
}
@media screen and (max-width: 768px) { 
  header .head_inner .menu_block .menu_list .item_corp {
    width: 100%;
    display: block;
  }
}
header .head_inner .menu_block .menu_list .item_link {
  width: fit-content;
  display: block;
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block .menu_list .item_link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
  }
}
header .head_inner .menu_block .menu_list .item_link .item_en {
  font-size: clamp(1rem,1.25vw,1.6rem);
  font-family: var(--Livvic);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background-size ease .3s;
  background: linear-gradient(90deg, var(--menu_color) 50%, var(--menu_color) 0%) 0 100% /100% var(--d, 0%) no-repeat;
  padding: min(0.3125vw,4px) min(0.78125vw,10px);
}
@media screen and (min-width: 769px) {
  header .head_inner .menu_block .menu_list .item_link:hover .item_en {
    --d: 100%;
  }
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block .menu_list .item_link .item_en {
    font-size: 2rem;
    font-weight: 900;
    color: var(--menu_color);
    -webkit-text-stroke: 1px #000;
    padding: 0 2px;
  }
}
header .head_inner .menu_block .menu_list .item_link .item_ja {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.42857;
  display: none;
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_block .menu_list .item_link .item_ja {
    display: block;
  }
}
header .head_inner .menu_block .menu_list .item_link .icon {
  width: 16px;
  display: inline-block;
}
header .head_inner .menu_under {
  position: absolute;
  width: 100%;
  height: 101px;
  display: none;
  align-items: flex-end;
  translate: -50% 0;
  bottom: 0;
  left: 50%;
}
@media screen and (max-width: 768px) {
  header .head_inner .menu_under {
    display: flex;
  }
}
header .head_inner .menu_under .earth {
  position: absolute;
  width: 161.33333333333331vw;
  translate: -50% 0;
  top: 0;
  left: 50%;
}
header .head_inner .menu_under .cement {
  position: absolute;
  width: 130px;
  top: -59px;
  right: calc((60 - 4) * ((100vw - 375px) / (768 - 375)) + 4px);
}
header .head_inner .menu_under small {
  position: relative;
  font-size: 1rem;
  font-family: var(--Livvic);
  font-weight: 500;
  letter-spacing: 0.05em;
  margin: 0 auto 8px;
}
/* ↑↑↑ header ↑↑↑ */
/* ↓↓↓ footer ↓↓↓ */
footer {
  position: relative;
  overflow: hidden;
  margin: min(9.375vw,120px) auto 0;
}
@media screen and (max-width: 768px) {
  footer {
    margin: 80px auto 0;
  }
}
footer .foot_btn {
  position: relative;
}
footer .foot_btn::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  translate: 0 -50%;
  top: 50%;
  left: 0;
}
footer .foot_btn .btn_link {
  position: relative;
  width: min(66.875vw,856px);
  border-radius: min(3.125vw,40px);
  display: block;
  overflow: clip;
  border: 2px solid #000;
  background-color: #fff;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  footer .foot_btn .btn_link {
    width: 324px;
    border-radius: 24px;
  }
}
footer .foot_btn .btn_link picture {
  width: 100%;
  display: block;
  transition: opacity ease .3s;
}
@media screen and (min-width: 769px) {
  footer .foot_btn .btn_link:hover picture {
    opacity: .6;
  }
}
footer .foot_inner {
  position: relative;
  max-width: 894px;
  container-type: inline-size;
  padding: 0 30px;
  margin: min(11.953125vw,153px) auto 0;
}
@media screen and (max-width: 768px) {
  footer .foot_inner {
    margin: 64px auto 0;
  }
}
footer .foot_inner .deco {
  position: absolute;
}
footer .foot_inner .deco01 {
  width: min(8.828125vw,113px);
  top: max(-5.703125vw,-73px);
  left: max(min(calc((-43 - 10) * ((100vw - 960px) / (1280 - 960)) + 10px),10px),-43px);
}
footer .foot_inner .deco02 {
  width: min(7.109375vw,91px);
  top: min(2.578125vw,33px);
  right: max(min(calc((-100 - 10) * ((100vw - 960px) / (1280 - 960)) + 10px),10px),-100px);
}
@media screen and (max-width: 768px) {
  footer .foot_inner .deco01 {
    width: 64px;
    top: -48px;
    left: 10px;
  }
  footer .foot_inner .deco02 {
    width: 40px;
    top: 142px;
    right: 28px;
  }
}
footer .foot_inner .foot_logo {
  width: fit-content;
  display: flex;
  gap: 8px 2.3980815347721824cqw;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  footer .foot_inner .foot_logo {
    flex-wrap: wrap;
  }
}
footer .foot_inner .foot_logo .logo_corp {
  width: 39.568345323741006cqw;
  display: block;
  transition: opacity ease .3s;
}
footer .foot_inner .foot_logo .logo_corp picture {
  display: block;
}
footer .foot_inner .foot_logo .logo_sustainable {
  width: 37.05035971223021cqw;
  display: block;
  transition: opacity ease .3s;
}
@media screen and (min-width: 769px) {
  footer .foot_inner .foot_logo :is(.logo_corp:hover,.logo_sustainable:hover) {
    opacity: .7;
  }
}
@media screen and (max-width: 768px) {
  footer .foot_inner .foot_logo .logo_corp {
    width: 291px;
  }
  footer .foot_inner .foot_logo .logo_sustainable {
    width: 193px;
  }
}

footer .foot_inner .menu_list {
  display: flex;
  gap: 4.556354916067146cqw 7.673860911270983cqw;
  flex-wrap: wrap;
  margin: 7.553956834532374cqw auto 0;
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list {
    flex-wrap: wrap;
    gap: 30px 35px;
    margin: 46px auto 0;
  }
}
footer .foot_inner .menu_list .menu_item {
  width: calc((100% - 7.673860911270983cqw*2)/3);
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list .menu_item {
    width: calc((100% - 35px)/2);
  }
}
footer .foot_inner .menu_list .item_about {
  --menu_color: var(--about_color);
}
footer .foot_inner .menu_list .item_story {
  --menu_color: var(--story_color);
}
footer .foot_inner .menu_list .item_recycle {
  --menu_color: var(--recycle_color);
}
footer .foot_inner .menu_list .item_movie {
  --menu_color: var(--movie_color);
}
footer .foot_inner .menu_list .item_keywords {
  --menu_color: var(--keywords_color);
}
footer .foot_inner .menu_list .item_news {
  --menu_color: var(--news_color);
}
footer .foot_inner .menu_list .item_corp {
  width: 100%;
}
footer .foot_inner .menu_list .item_link {
  width: fit-content;
  display: block;
  transition: opacity ease .3s;
}
@media screen and (min-width: 769px) {
  footer .foot_inner .menu_list .item_link:hover {
    opacity: .6;
  }
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list .item_link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0;
  }
}
footer .foot_inner .menu_list .item_link .item_en {
  font-size: clamp(2rem,2.877697841726619cqw,2.4rem);
  font-family: var(--Livvic);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--menu_color);
  transition: background-size ease .3s;
  -webkit-text-stroke: 1px #000;
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list .item_link .item_en {
    font-size: 2rem;
  }
}
footer .foot_inner .menu_list .item_link .item_ja {
  font-size: clamp(1rem,1.6786570743405276cqw,1.4rem);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.42857;
  display: block;
  margin-top: 0.4796163069544364cqw;
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list .item_link .item_ja {
    font-size: 1.4rem;
    margin-top: 4px;
  }
}
footer .foot_inner .menu_list .item_link .icon {
  width: 1.9184652278177456cqw;
  display: inline-block;
}
@media screen and (max-width: 768px) {
  footer .foot_inner .menu_list .item_link .icon {
    width: 16px;
  }
}
footer .menu_under {
  position: relative;
  width: 100%;
  margin: min(5.625vw,72px) auto 0;
}
@media screen and (max-width: 768px) {
  footer .menu_under {
    height: 101px;
    margin-top: 107px;
  }
}
footer .menu_under .earth {
  width: 100%;
  display: block;
}
@media screen and (max-width: 768px) {
  footer .menu_under .earth {
    position: absolute;
    width: 161.33333333333331vw;
    translate: -50% 0;
    top: 0;
    left: 50%;
  }
}
footer .menu_under .pagetop {
  position: absolute;
  bottom: min(1.875vw,24px);
  right: min(3.75vw,48px);
}
@media screen and (max-width: 768px) {
  footer .menu_under .pagetop {
    bottom: 44px;
    right: 4px;
  }
}
footer .menu_under .pagetop .pagetop_txt {
  width: fit-content;
  font-size: clamp(1.2rem,1.25vw,1.6rem);
  font-family: var(--Livvic);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  background-image: url(../img/common/foot_txt_bg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: translate ease .3s;
  padding: min(0.546875vw,7px) min(3.2031249999999996vw,41px) min(1.25vw,16px);
  margin: 0 min(1.484375vw,19px) 0 auto;
}
@media screen and (min-width: 769px) {
  footer .menu_under .pagetop:hover .pagetop_txt {
    translate: 0 -20%;
  }
}
@media screen and (max-width: 768px) {
  footer .menu_under .pagetop .pagetop_txt {
    font-size: 1.4rem;
    background-image: url(../img/common/foot_txt_bg_sp.svg);
    padding: 6px 17px 13px;
    margin: 0 10px 0 auto;
  }
}
footer .menu_under .pagetop .cement {
  width: min(16.5625vw,212px);
  transform-origin: center bottom;
}
@media screen and (max-width: 768px) {
  footer .menu_under .pagetop .cement {
    width: 130px;
  }
}
footer .menu_under small {
  position: absolute;
  width: max-content;
  font-size: clamp(1rem,0.9375vw,1.2rem);
  font-family: var(--Livvic);
  font-weight: 500;
  letter-spacing: 0.05em;
  display: block;
  translate: -50% 0;
  bottom: min(1.25vw,16px);
  left: 50%;
}
@media screen and (max-width: 768px) {
  footer .menu_under small {
    font-size: 1rem;
    bottom: 8px;
  }
}
/* ↑↑↑ footer ↑↑↑ */
/* ↓↓↓ float-animation ↓↓↓ */
@keyframes float01 {
  0% {
    margin-top: 0;
  }

  50% {
    margin-top: -8px;
  }

  100% {
    margin-top: 0;
  }
}

@keyframes float02 {
  0% {
    margin-bottom: 0;
  }

  50% {
    margin-bottom: -8px;
  }

  100% {
    margin-bottom: 0;
  }
}
/* ↑↑↑ float-animation ↑↑↑ */