@charset "UTF-8";

/* ========================================================
                      * Layout style *
========================================================= */
* {
    box-sizing: border-box;
}
html {
  font-size: 62.5%;
  font-feature-settings: "palt";
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
}

main {
  width: 100%;
  max-width: 100%;
}

#Header,
#Foot {
  display: none;
}

#Contents {
  margin-bottom: 0;
}

#Wrap {
  width: 100%;
}

#sustainability a {
  text-decoration: none;
}

#sustainability * {
  font-feature-settings: "palt";
}

#sustainability img {
  width: 100%;
}

#sustainability .row-reverse {
  flex-direction: row-reverse;
}

#sustainability h3 {
  letter-spacing: 0;
}




/* ===================
      Roots
=================== */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/NotoSansCJKjp-DemiLight.otf") format("opentype"),
  url("../font/NotoSansCJKjp-DemiLight.woff") format("woff"),
  url("../font/NotoSansCJKjp-DemiLight.woff2") format("woff2");
}

:root {
  --font-serif-ja: "Noto Serif JP", serif;
  --font-noto-ja: "Noto Sans JP", sans-serif;
  --font-garamond-en: "adobe-garamond-pro", serif;
  --font-europa-en: "europa", sans-serif;
  --color-black: #333333;
  --color-white: #fff;
  --color-gray: #e9eae4;
  --color-light-gray: #E9EAE4;
  --color-text-gray: #999999;
}




/* =============================================
        ▼ ▼ ▼ Page Contents ▼ ▼ ▼  (PC)
============================================= */
#sustainability {
  font-family: var(--font-noto-ja);
  color: var(--color-black);
  letter-spacing: 0.07em;
  overflow: hidden;
}

/* ===================== mv ===================== */
#sustainability .mv_area {
  position: relative;
  width: 100%;
  z-index: 0;
}

#sustainability .mv_text_blk {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color: var(--color-white);
  margin-top: -1rem;
}

#sustainability .mv_text_blk h1 {
  font-family: var(--font-garamond-en);
  font-size: 5rem;
  font-weight: 400;
  text-align: center;
  letter-spacing: 0.05em;
}

#sustainability .mv_text_blk p {
  margin-top: 0.5rem;
  font-family: var(--font-noto-ja);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 2.5;
  text-align: center;
}

#sustainability .lead_text {
  margin-top: 8.4rem;
  font-family: var(--font-noto-ja);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.5;
  text-align: center;
}

/* ===================== page_nav ===================== */
#sustainability .page_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110rem;
  margin: 8.8rem auto 0;
}

#sustainability .page_nav div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55rem;
  height: 8rem;
  border: var(--color-black) 0.1rem solid;
  border-top: unset;
  border-bottom: unset;
  font-size: 2rem;
  font-weight: 500;
  font-family: var(--font-serif-ja);
}

#sustainability .page_nav div:nth-of-type(2) {
  border-left: unset;
}

#sustainability .page_nav div a {
  position: relative;
  display: block;
  margin-left: -8rem;
  z-index: 0;
}

#sustainability .page_nav div a::before {
  position: absolute;
  display: block;
  content: "";
  background: url(../img/nav_arrow.svg) no-repeat;
  background-size: 100%;
  width: 2.3rem;
  height: 1.2rem;
  top: 1rem;
  right: -8rem;
  z-index: 1;
}

/* ===================== element_area ===================== */
#sustainability .head_area {
  margin-top: 10rem;
}

#sustainability .head_area .lead {
  position: relative;
  text-align: center;
  padding: 6.3rem 0 8.8rem;
  background: var(--color-gray);
  z-index: 0;
}

#sustainability .head_area .lead::before {
  position: absolute;
  display: block;
  content: "";
  width: 100vw;
  height: 100%;
  background: var(--color-gray);
  top: 0;
  left: 0;
  z-index: -1;
}

#sustainability .head_area .lead::after {
  position: absolute;
  display: block;
  content: "";
  width: 100vw;
  height: 100%;
  background: var(--color-gray);
  top: 0;
  right: 0;
  z-index: -1;
}

#sustainability .head_area .lead .inner {
  position: relative;
  z-index: 0;
}

#sustainability .head_area .lead .inner::after {
  position: absolute;
  content: '';
  display: block;
  width: 0.1rem;
  height: 11rem;
  background: var(--color-black);
  animation: scrollGuide 2s ease-in-out 0s infinite normal;
  bottom: -14.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

@keyframes scrollGuide {
	0% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	20% {
		transform: scale(1, 1);
		transform-origin: center bottom;
	}
	50% {
		transform: scale(1, 0);
		transform-origin: center bottom;
	}
	50.1% {
		transform: scale(1, 0);
		transform-origin: center top;
	}
	80% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
	100% {
		transform: scale(1, 1);
		transform-origin: center top;
	}
}

#sustainability .head_area .lead h3 {
  font-size: 2.3rem;
  font-weight: 500;
  font-family: var(--font-serif-ja);
}

#sustainability .head_area .lead p {
  margin-top: 3rem;
  font-size: 1.7rem;
  font-family: var(--font-noto-ja);
  line-height: 2.5;
}

#sustainability .content {
  margin: 10.3rem auto 0;
}

#sustainability .content h4 {
  text-align: center;
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .content .border_blk {
  border-top: var(--color-black) 0.1rem solid;
  margin-top: 4.5rem;
  padding: 6.6rem 0 0;
}

#sustainability .content .border_blk:nth-of-type(1) {
  border-top: unset;
  margin-top: 0;
  padding: 6rem 0 0;
}

#sustainability .content_wrap {
  width: 96rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sustainability .content_wrap .text_blk {
  width: 48rem;
}

#sustainability .content_wrap .img_blk {
  width: 38.6rem;
  display: flex;
  justify-content: space-between;
  margin-top: -3rem;
}

#sustainability .content_wrap .text_blk .ttl {
  font-size: 1.7rem;
  font-weight: 500;
}

#sustainability .content_wrap .text_blk .text {
  text-align: justify;
  letter-spacing: 0.07em;
  margin-top: 2rem;
  font-size: 1.5rem;
  line-height: 2;
}

#sustainability .annotation {
  margin-top: 1.8rem;
  font-size: 1.2rem;
  color: var(--color-text-gray);
}

#sustainability .content_wrap .img_blk div {
  width: 19rem;
  line-height: 1;
}

#sustainability .content_wrap .img_blk p {
  text-align: center;
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1;
}

/* ======== border_blk second ======== */
#sustainability .border_blk.second .img_blk {
  width: 31rem;
  margin: 0;
}

#sustainability .border_blk.second .img_blk div {
  width: auto;
}

#sustainability .border_blk.second {
  margin-top: 3.7rem;
  padding: 7rem 0 0;
}

#sustainability .border_blk.second .content_wrap .text_blk {
  width: 58rem;
  margin-top: -1.6rem;
}

/* ======== border_blk third ======== */
#sustainability .border_blk.third {
  margin-top: 6.8rem;
  padding: 6.3rem 0 0;
}

#sustainability .border_blk.third .content_wrap .text_blk {
  width: 58rem;
}

#sustainability .border_blk.third .sub_text_wrap {
  margin-top: 3.3rem;
  display: flex;
  justify-content: space-between;
}

#sustainability .border_blk.third .sub_text_wrap div {
  width: 19rem;
}

#sustainability .border_blk.third .sub_text_wrap div p:nth-of-type(1) {
  font-size: 1.4rem;
  background: var(--color-gray);
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#sustainability .border_blk.third .sub_text_wrap div p:nth-of-type(2) {
  text-align: justify;
  width: 16.8rem;
  margin: 1.3rem auto 0;
  font-size: 1.4rem;
  line-height: 2;
}

#sustainability .border_blk.third .img_blk {
  width: 31rem;
  margin: 0;
}

#sustainability .border_blk.third .img_blk div {
  width: auto;
}

#sustainability .border_blk.third .annotation {
  margin-top: 3rem;
}

/* ======== border_blk fourth ======== */
#sustainability .border_blk.fourth {
  position: relative;
  margin: 6.6rem auto 0;
  padding: 7rem 0 6.6rem;
  z-index: 0;
}

#sustainability .border_blk.fourth::before {
  position: absolute;
  display: block;
  content: "";
  width: 0.05rem;
  height: 66rem;
  background: var(--color-black);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#sustainability .border_blk.fourth .wrap {
  width: 86rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10rem;
}

#sustainability .border_blk.fourth .content_wrap {
  width: 31rem;
  flex-wrap: wrap;
  margin: 0;
}

#sustainability .border_blk.fourth .img_blk {
  width: 100%;
  margin-top: 0;
}

#sustainability .border_blk.fourth .img_blk div {
  width: auto;
}

#sustainability .border_blk.fourth .content_wrap .text_blk {
  margin-top: 3.5rem;
}

#sustainability .border_blk.fourth .content_wrap .text_blk .text {
  margin-top: 1.6rem;
}

/* ======== prescription blk ======== */
#sustainability .prescription {
  text-align: center;
  margin: 9.4rem auto 0;
}

#sustainability .prescription h3 {
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .prescription h4 {
  margin-top: 4rem;
  font-size: 1.7rem;
  font-weight: 400;
  font-family: var(--font-noto-ja);
}

#sustainability .prescription .content_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 110rem;
  margin: 4.5rem auto 0;
  gap: 1rem;
}

#sustainability .prescription .content_blk {
  background: var(--color-gray);
  text-align: center;
  padding: 1.8rem;
}

#sustainability .prescription .content_blk:nth-of-type(1) ,
#sustainability .prescription .content_blk:nth-of-type(2) {
  width: 54.5rem;
}

#sustainability .prescription .content_blk:nth-of-type(3) {
  width: 100%;
}

#sustainability .prescription .content_blk p {
  font-size: 1.7rem;
  font-weight: 500;
}

#sustainability .prescription .content_blk ul {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 0;
}

#sustainability .prescription .content_blk ul li {
  font-size: 1.5rem;
  background: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25rem;
  height: 4rem;
}

#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(3) ,
#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(4) ,
#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(5) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(5) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(6) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(7){
  width: 16.5rem;
}

#sustainability .prescription .content_blk:nth-of-type(3) ul {
  width: 76rem;
  margin: 1.5rem auto 0;
}

#sustainability .prescription .content_blk:nth-of-type(3) ul li {
  width: 18.6rem;
}

#sustainability .prescription .annotation {
  margin-top: 2.8rem;
}

/* ======== package_area ======== */
#sustainability .head_area.package {
  margin-top: 16rem;
}

#sustainability .package .main_blk {
  margin-top: 10rem;
  text-align: center;
}

#sustainability .package .main_blk h3 {
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .package .main_img {
  width: 40rem;
  margin: 4.7rem auto 0;
}

#sustainability .package .main_text {
  margin-top: 3.2rem;
  font-size: 1.7rem;
  line-height: 2.5;
  font-family: var(--font-noto-ja);
  font-weight: 400;
}

/* ======== ingredients_blk ======== */
#sustainability .ingredients_blk {
  width: 90rem;
  height: 45.3rem;
  margin: 5.7rem auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 11.5rem;
  border: var(--color-black) 0.1rem solid;
}

#sustainability .ingredients_blk .text_blk {
  width: 36.6rem;
  margin-top: 10rem;
}

#sustainability .ingredients_blk .text_blk .ttl {
  font-size: 1.7rem;
  font-weight: 500;
}

#sustainability .ingredients_blk .text_blk .text {
  margin-top: 1.8rem;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.07em;
  text-align: justify;
}

#sustainability .ingredients_blk .img_blk {
  width: 28rem;
  margin-top: 7rem;
}

#sustainability .ingredients_blk .img_blk p {
  text-align: justify;
  font-size: 1.4rem;
  line-height: 2;
}

/* ======== wards_blk ======== */
#sustainability .wards_blk {
  position: relative;
  text-align: center;
  margin-top: 10rem;
  background : rgba(233, 234, 228, 0.4);
  padding: 6.4rem 0 7rem;
  z-index: 0;
}

#sustainability .wards_blk h3 {
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .wards_blk h4 {
  margin-top: 3.2rem;
  font-size: 1.7rem;
  line-height: 2.5;
  font-family: var(--font-noto-ja);
  font-weight: 400;
}

#sustainability .wards_blk .wrap {
  margin: 3.8rem auto 0;
  width: 90rem;
  background: var(--color-white);
  padding: 5rem 11rem 4.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#sustainability .wards_blk .wrap .img_blk {
  width: 14rem;
}

#sustainability .wards_blk .wrap .text_blk {
  width: 43rem;
  font-size: 1.4rem;
  line-height: 2;
  text-align: justify;
  margin-top: -2rem;
}

/* ======== container_blk ======== */
#sustainability .container_blk {
  text-align: center;
  margin-top: 8.8rem;
}

#sustainability .container_blk h3 {
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .container_blk h4 {
  margin-top: 3.2rem;
  font-size: 1.7rem;
  line-height: 2.5;
  font-family: var(--font-noto-ja);
  font-weight: 400;
}

#sustainability .container_blk .wrap {
  margin-top: 3.5rem;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 4.8rem;
}

#sustainability .container_blk .wrap div {
  width: 24rem;
  padding-bottom: 4rem;
}

#sustainability .container_blk .wrap .img_blk {
  width: 24rem;
  margin: auto;
}

#sustainability .container_blk .wrap .name {
  margin-top: 2.5rem;
  font-size: 1.5rem;
  line-height: 2;
}

#sustainability .container_blk .wrap .price {
  margin-top: 0.2rem;
  font-size: 1.5rem;
  line-height: 2.3;
}

#sustainability .container_blk .wrap .price .en {
  font-size: 1.5rem;
  font-family: var(--font-europa-en);
}

#sustainability .container_blk .wrap .price .tax {
  font-size: 1.3rem;
}

#sustainability .container_blk .page_btn {
  position: relative;
  margin: 3rem auto 0;
  width: 10rem;
  padding: 0.8rem 0 0.5rem 2rem;
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  font-family: var(--font-garamond-en);
  color: var(--color-white);
  background: var(--color-black);
  line-height: 1;
  z-index: 0;
}

#sustainability .container_blk .page_btn::before {
  position: absolute;
  display: block;
  content: "";
  background: url(../img/btn_icon.svg) no-repeat;
  background-size: 100%;
  width: 0.52rem;
  height: 1rem;
  top: 0.8rem;
  right: 1.5rem;
  z-index: 1;
}

#sustainability .container_blk div:nth-of-type(3) .name ,
#sustainability .container_blk div:nth-of-type(4) .name {
  margin-top: 4.2rem;
}

#sustainability .container_blk div:nth-of-type(3) .price ,
#sustainability .container_blk div:nth-of-type(4) .price {
  margin-top: 1.5rem;
}


/* ======== new_container_blk ======== */
#sustainability .new_container_blk {
  text-align: center;
  margin-top: 9.6rem;
}

#sustainability .new_container_blk .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9rem;
}

#sustainability .new_container_blk .wrap:nth-of-type(2) {
  flex-direction: row-reverse;
  margin-top: 9.5rem;
}

#sustainability .new_container_blk .img_blk {
  width: 26rem;
}

#sustainability .new_container_blk .text_blk {
  margin-top: -1rem;
}

#sustainability .new_container_blk h3 {
  text-align: left;
  font-size: 2.3rem;
  font-family: var(--font-serif-ja);
  font-weight: 500;
}

#sustainability .new_container_blk h4 {
  text-align: left;
  margin-top: 3.2rem;
  font-size: 1.7rem;
  line-height: 2.5;
  font-family: var(--font-noto-ja);
  font-weight: 400;
}


/* ======== container_bottom ======== */
#sustainability .container_bottom {
  position: relative;
  margin-top: 10rem;
  background : rgba(233, 234, 228, 0.4);
  padding: 4rem 0;
  z-index: 0;
}

#sustainability .container_bottom .wrap {
  display: flex;
  justify-content: space-between;
  width: 110rem;
  height: 31rem;
  margin: auto;
}

#sustainability .container_bottom .wrap div:nth-of-type(2) {
  width: 40rem;
  border: var(--color-black) 0.1rem solid;
  border-top: unset;
  border-bottom: unset;
  padding: 0 6rem;
}

#sustainability .container_bottom .wrap div:nth-of-type(1) ,
#sustainability .container_bottom .wrap div:nth-of-type(3) {
  width: 35rem;
}

#sustainability .container_bottom .wrap div:nth-of-type(1) {
  padding: 0 7rem 0 0;
}

#sustainability .container_bottom .wrap div:nth-of-type(3) {
  padding: 0 0 0 7rem;
}

#sustainability .container_bottom .wrap div .ttl {
  position: relative;
  margin-top: 2.5rem;
  font-size: 1.7rem;
  font-weight: 500;
  z-index: 0;
}

#sustainability .container_bottom .wrap div:nth-of-type(1) .ttl::before ,
#sustainability .container_bottom .wrap div:nth-of-type(2) .ttl::before ,
#sustainability .container_bottom .wrap div:nth-of-type(3) .ttl::before {
  position: absolute;
  display: block;
  content: "";
  width: 4.6rem;
  height: 5.1rem;
  top: 0;
  right: 0;
  z-index: 1;
}

#sustainability .container_bottom .wrap div:nth-of-type(1) .ttl::before {
  background: url(../img/container_logo_1.svg) no-repeat;
  background-size: 100%;
  width: 11.6rem;
  height: 7.3rem;
  margin-top: -1.7rem;
}
#sustainability .container_bottom .wrap div:nth-of-type(2) .ttl::before {
  background: url(../img/container_logo_2.svg) no-repeat;
  background-size: 100%;
  width: 8.2rem;
  height: 5.5rem;
  top: -1rem;
}
#sustainability .container_bottom .wrap div:nth-of-type(3) .ttl::before {
  background: url(../img/container_logo_3.svg) no-repeat;
  background-size: 100%;
  width: 5.6rem;
  height: 8.7rem;
  margin-top: -2.5rem;
}


#sustainability .container_bottom .wrap div .text {
  text-align: justify;
  margin-top: 6rem;
  font-size: 1.5rem;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.07em;
}


/*---------- 追従メニュー ----------*/
#page-top .page_nav {
  background: var(--color-white);
  border-top: var(--color-black) 0.1rem solid;
}




/*リンクを右下に固定*/
#page-top {
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
}

#page-top .check_blk {
position: relative;
width: 18rem;
height: 18rem;
z-index: 0;
}


/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 1s forwards;
}
@keyframes UpAnime{
from {
  opacity: 1;
  transform: translateY(250px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 1s forwards;
}
@keyframes DownAnime{
from {
  opacity: 1;
  transform: translateY(0);
}
to {
  opacity: 1;
  transform: translateY(250px);
}
}


/* =============================================
  animation
============================================= */
.js-loadfade {
  opacity: 0;
  transition: all 1s;
}
.js-loadfade.active {
  opacity: 1;
}

.js-fade {
  opacity: 0;
  transition: all 1s;
}
.js-fade.active {
  opacity: 1;
}


/* PC */
@media only screen and (min-width: 769px) {
  .sp_only {
    display: none;
  }
  .pc_only {
    display: block;
  }

  @-moz-document url-prefix() {
    #sustainability .border_blk.fourth::before {
      position: absolute;
      display: block;
      content: "";
      width: 0.1rem;
      height: 66rem;
      background: var(--color-black);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
  }
  }

}

/* SP */
@media only screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}


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

html {
  font-size: calc(10 * (100vw / 1400));
}

}


/* =============================================
        ▼ ▼ ▼ Page Contents ▼ ▼ ▼  (SP)
============================================= */

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

/* ===================== mv ===================== */
#sustainability .mv_area {
  position: relative;
  width: 100%;
  z-index: 0;
}

#sustainability .mv_text_blk {
  top: 50%;
}

#sustainability .mv_text_blk h1 {
  font-size: calc(70*(100vw / 750));
}

#sustainability .mv_text_blk p {
  margin-top: calc(18*(100vw / 750));
  font-size: calc(27*(100vw / 750));
  line-height: 2;
}

#sustainability .lead_text {
  margin-top: calc(116*(100vw / 750));
  font-size: calc(25*(100vw / 750));
}

/* ===================== page_nav ===================== */
#sustainability .page_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  margin: calc(160*(100vw / 750)) auto 0;
}

#sustainability .page_nav div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(135*(100vw / 750));
  border: var(--color-black) calc(2*(100vw / 750)) solid;
  font-size: calc(32*(100vw / 750));
  border-left: unset;
  border-right: unset;
}

#sustainability .page_nav div:nth-of-type(2) {
  border-top: unset;
}

#sustainability .page_nav div:nth-of-type(2) a::before {
  right: calc(-313*(100vw / 750));
}

#sustainability .page_nav div a {
  margin-left: calc(35*(100vw / 750));
}

#sustainability .page_nav div a::before {
  position: absolute;
  display: block;
  content: "";
  background: url(../img/nav_arrow_sp.svg) no-repeat;
  background-size: 100%;
  width: calc(32*(100vw / 750));
  height: calc(17*(100vw / 750));
  top: calc(15*(100vw / 750));
  right: calc(-375*(100vw / 750));
  z-index: 1;
}

/* ===================== element_area ===================== */
#sustainability .head_area {
  margin-top: calc(175*(100vw / 750));
}

#sustainability .head_area .lead {
  padding: calc(110*(100vw / 750)) 0 calc(160*(100vw / 750));
}

#sustainability .head_area .lead .inner {
  position: relative;
  z-index: 0;
}

#sustainability .head_area .lead .inner::after {
  position: absolute;
  content: '';
  display: block;
  width: calc(2*(100vw / 750));
  height: 11rem;
  background: var(--color-black);
  animation: scrollGuide 2s ease-in-out 0s infinite normal;
  bottom: -14.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

#sustainability .head_area.element .lead .inner::after {
  bottom: calc(-250*(100vw / 750));
  height: calc(180*(100vw / 750));
}


#sustainability .head_area .lead h3 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .head_area .lead p {
  margin-top: calc(40*(100vw / 750));
  font-size: calc(27*(100vw / 750));
}

#sustainability .content {
  margin: calc(179*(100vw / 750)) auto 0;
}

#sustainability .content h4 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .content .border_blk:nth-of-type(1) {
    padding: calc(90*(100vw / 750)) 0 0;
}

#sustainability .content .border_blk {
  border-top: var(--color-black) calc(2*(100vw / 750)) solid;
  margin-top: calc(60*(100vw / 750));
  padding: calc(100*(100vw / 750)) 0 0;
}

#sustainability .content_wrap {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  flex-direction: column-reverse;
}

#sustainability .content_wrap .text_blk {
  width: calc(670*(100vw / 750));
  margin-top: calc(60*(100vw / 750));
}

#sustainability .content_wrap .img_blk {
  width: calc(667*(100vw / 750));
  display: flex;
  justify-content: space-between;
  margin-top: 0;
}

#sustainability .content_wrap .text_blk .ttl {
  text-align: center;
  font-size: calc(30*(100vw / 750));
}

#sustainability .content_wrap .text_blk .text {
  margin-top: calc(40*(100vw / 750));
  font-size: calc(25*(100vw / 750));
}

#sustainability .annotation {
  margin-top: calc(35*(100vw / 750));
  font-size: calc(22*(100vw / 750));
  line-height: 2;
}

#sustainability .content_wrap .img_blk div {
  width: calc(326*(100vw / 750));
  line-height: 1;
}

#sustainability .content_wrap .img_blk p {
  text-align: center;
  margin-top: calc(28*(100vw / 750));
  font-size: calc(22*(100vw / 750));
  line-height: 1;
}

/* ======== border_blk second ======== */
#sustainability .border_blk.second .img_blk {
  width: calc(470*(100vw / 750));
  margin: 0;
}

#sustainability .border_blk.second .img_blk div {
  width: auto;
}

#sustainability .border_blk.second {
  margin-top: calc(89*(100vw / 750));
  padding: calc(100*(100vw / 750)) 0 0;
}

#sustainability .border_blk.second .content_wrap .text_blk {
  width: calc(670*(100vw / 750));
  margin-top: calc(60*(100vw / 750));
}

/* ======== border_blk third ======== */
#sustainability .border_blk.third {
  margin-top: calc(90*(100vw / 750));
  padding: calc(100*(100vw / 750)) 0 0;
}

#sustainability .border_blk.third .content_wrap .text_blk {
  width: calc(670*(100vw / 750));
}

#sustainability .border_blk.third .sub_text_wrap {
  margin-top: calc(50*(100vw / 750));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#sustainability .border_blk.third .sub_text_wrap div {
  width: calc(325*(100vw / 750));
}

#sustainability .border_blk.third .sub_text_wrap div:nth-of-type(3) {
  width: 100%;
  margin-top: calc(50*(100vw / 750));
}

#sustainability .border_blk.third .sub_text_wrap div p:nth-of-type(1) {
  font-size: calc(23*(100vw / 750));
  background: var(--color-gray);
  width: 100%;
  height: calc(50*(100vw / 750));
  display: flex;
  justify-content: center;
  align-items: center;
}

#sustainability .border_blk.third .sub_text_wrap div p:nth-of-type(2) {
  text-align: justify;
  width: calc(275*(100vw / 750));
  margin: calc(19*(100vw / 750)) auto 0;
  font-size: calc(23*(100vw / 750));
  line-height: 2;
}

#sustainability .border_blk.third .sub_text_wrap div:nth-of-type(3) p:nth-of-type(2) {
  width: calc(620*(100vw / 750));
}

#sustainability .border_blk.third .img_blk {
  width: calc(470*(100vw / 750));
  margin: 0;
}

#sustainability .border_blk.third .img_blk div {
  width: auto;
}

#sustainability .border_blk.third .annotation {
  margin-top: calc(36*(100vw / 750));
}

/* ======== border_blk fourth ======== */
#sustainability .border_blk.fourth {
  position: relative;
  margin: calc(88*(100vw / 750)) auto 0;
  padding: calc(100*(100vw / 750)) 0 calc(0*(100vw / 750));
  z-index: 0;
}

#sustainability .border_blk.fourth::before {
  display: none;
}

#sustainability .border_blk.fourth .wrap {
  width: 100%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0;
}

#sustainability .border_blk.fourth .content_wrap {
  width: 100%;
  flex-wrap: wrap;
  margin: 0;
  flex-direction: column;
  padding-bottom: calc(90*(100vw / 750));
  border-bottom: var(--color-black) calc(2*(100vw / 750)) solid;
}

#sustainability .border_blk.fourth .content_wrap:nth-of-type(2) {
  padding-top: calc(100*(100vw / 750));
  padding-bottom: 0;
  border-bottom: unset;
}

#sustainability .border_blk.fourth .img_blk {
  width: calc(470*(100vw / 750));
  margin-top: 0;
}

#sustainability .border_blk.fourth .img_blk div {
  width: auto;
}

#sustainability .border_blk.fourth .content_wrap .text_blk {
  margin-top: calc(60*(100vw / 750));
}

#sustainability .border_blk.fourth .content_wrap .text_blk .text {
  margin-top: calc(40*(100vw / 750));
}

/* ======== prescription blk ======== */
#sustainability .prescription {
  text-align: center;
  margin: calc(170*(100vw / 750)) auto 0;
}

#sustainability .prescription h3 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .prescription h4 {
  margin-top: calc(40*(100vw / 750));
  font-size: calc(27*(100vw / 750));
  line-height: 2.5;
}

#sustainability .prescription .content_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin: calc(80*(100vw / 750)) auto 0;
  gap: calc(24*(100vw / 750));
  flex-direction: column;
}

#sustainability .prescription .content_blk {
  background: var(--color-gray);
  text-align: center;
  padding: calc(40*(100vw / 750)) calc(20*(100vw / 750)) calc(50*(100vw / 750));
}

#sustainability .prescription .content_blk:nth-of-type(1) ,
#sustainability .prescription .content_blk:nth-of-type(2) {
  width: 100%;
}

#sustainability .prescription .content_blk:nth-of-type(3) {
  width: 100%;
}

#sustainability .prescription .content_blk p {
  font-size: calc(30*(100vw / 750));
}

#sustainability .prescription .content_blk ul {
  margin-top: calc(40*(100vw / 750));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(10*(100vw / 750)) 0;
}

#sustainability .prescription .content_blk ul li {
  font-size: calc(25*(100vw / 750));
  background: var(--color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(330*(100vw / 750));
  height: calc(66*(100vw / 750));
}

#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(3) ,
#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(4) ,
#sustainability .prescription .content_blk:nth-of-type(1) ul li:nth-of-type(5) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(5) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(6) ,
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(7){
  width: calc(216*(100vw / 750));
}

#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(5) {
  width: calc(260*(100vw / 750));
}
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(6) {
  width: calc(200*(100vw / 750));
}
#sustainability .prescription .content_blk:nth-of-type(2) ul li:nth-of-type(7) {
  width: calc(190*(100vw / 750));
}

#sustainability .prescription .content_blk:nth-of-type(3) ul {
  width: 100%;
  margin: calc(44*(100vw / 750)) auto 0;
}

#sustainability .prescription .content_blk:nth-of-type(3) ul li {
  width: calc(330*(100vw / 750));
}

#sustainability .prescription .annotation {
  margin-top: calc(57*(100vw / 750));
}

/* ======== package_area ======== */
#sustainability .head_area.package {
  margin-top: calc(180*(100vw / 750));
  padding-bottom: calc(180*(100vw / 750));
}

#sustainability .package .main_blk {
  margin-top: calc(180*(100vw / 750));
}

#sustainability .package .main_blk h3 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .package .main_img {
  width: calc(670*(100vw / 750));
  margin: calc(58*(100vw / 750)) auto 0;
}

#sustainability .package .main_text {
  margin-top: calc(45*(100vw / 750));
  font-size: calc(27*(100vw / 750));
}

/* ======== ingredients_blk ======== */
#sustainability .ingredients_blk {
  width: calc(710*(100vw / 750));
  height: calc(1190*(100vw / 750));
  margin: calc(77*(100vw / 750)) auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  border: var(--color-black) calc(2*(100vw / 750)) solid;
}

#sustainability .ingredients_blk .text_blk {
  width: calc(582*(100vw / 750));
  margin-top: calc(89*(100vw / 750));
}

#sustainability .ingredients_blk .text_blk .ttl {
  font-size: calc(30*(100vw / 750));
  text-align: center;
}

#sustainability .ingredients_blk .text_blk .text {
  margin-top: calc(42*(100vw / 750));
  font-size: calc(24*(100vw / 750));
}

#sustainability .ingredients_blk .img_blk {
  width: calc(582*(100vw / 750));
  margin-top: calc(-30*(100vw / 750));
}

#sustainability .ingredients_blk .img_blk img {
  display: block;
  width: calc(400*(100vw / 750));
  margin: auto;
}

#sustainability .ingredients_blk .img_blk p {
  font-size: calc(24*(100vw / 750));
  margin-top: calc(55*(100vw / 750));
}

/* ======== wards_blk ======== */
#sustainability .wards_blk {
  margin-top: calc(180*(100vw / 750));
  padding: calc(88*(100vw / 750)) 0 calc(100*(100vw / 750));
}

#sustainability .wards_blk h3 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .wards_blk h4 {
  margin-top: calc(40*(100vw / 750));
  font-size: calc(27*(100vw / 750));
}

#sustainability .wards_blk .wrap {
  margin: calc(100*(100vw / 750)) auto 0;
  width: calc(710*(100vw / 750));
  background: var(--color-white);
  padding: calc(50*(100vw / 750)) calc(65*(100vw / 750)) calc(55*(100vw / 750));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

#sustainability .wards_blk .wrap .img_blk {
  width: calc(220*(100vw / 750));
  margin: auto;
}

#sustainability .wards_blk .wrap .text_blk {
  width: 100%;
  font-size: calc(24*(100vw / 750));
  line-height: 2;
  text-align: justify;
  margin-top: calc(55*(100vw / 750));
}

/* ======== container_blk ======== */
#sustainability .container_blk {
  margin-top: calc(150*(100vw / 750));
}

#sustainability .container_blk h3 {
  font-size: calc(36*(100vw / 750));
}

#sustainability .container_blk h4 {
  margin-top: calc(40*(100vw / 750));
  font-size: calc(27*(100vw / 750));
}

#sustainability .container_blk .wrap {
  margin-top: calc(80*(100vw / 750));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: calc(20*(100vw / 750));
}

#sustainability .container_blk .wrap div {
  width: calc(345*(100vw / 750));
  padding-bottom: calc(40*(100vw / 750));
}

#sustainability .container_blk .wrap .img_blk {
  width: 100%;
  margin: auto;
}

#sustainability .container_blk .wrap .name {
  margin-top: calc(42*(100vw / 750));
  font-size: calc(25*(100vw / 750));
}

#sustainability .container_blk .wrap .price {
  margin-top: 0;
  font-size: calc(25*(100vw / 750));
}

#sustainability .container_blk .wrap .price .en {
  margin-top: 0;
  font-size: calc(25*(100vw / 750));
}

#sustainability .container_blk .wrap .price .tax {
  font-size: calc(22*(100vw / 750));
}

#sustainability .container_blk .page_btn {
  position: relative;
  margin: calc(43*(100vw / 750)) auto 0;
  width: calc(180*(100vw / 750));
  padding: calc(13*(100vw / 750)) 0 calc(11*(100vw / 750)) calc(36*(100vw / 750));
  display: flex;
  align-items: center;
  font-size: calc(22*(100vw / 750));
  font-family: var(--font-garamond-en);
  color: var(--color-white);
  background: var(--color-black);
  line-height: 1;
  z-index: 0;
}

#sustainability .container_blk .page_btn::before {
  position: absolute;
  display: block;
  content: "";
  background: url(../img/btn_icon.svg) no-repeat;
  background-size: 100%;
  width: calc(11*(100vw / 750));
  height: calc(22*(100vw / 750));
  top: calc(13*(100vw / 750));
  right: calc(30*(100vw / 750));
  z-index: 1;
}

#sustainability .container_blk div:nth-of-type(3) .name ,
#sustainability .container_blk div:nth-of-type(4) .name {
  margin-top: calc(42*(100vw / 750));
}

#sustainability .container_blk div:nth-of-type(3) .price ,
#sustainability .container_blk div:nth-of-type(4) .price {
  margin-top: 0;
}

/* ======== new_container_blk ======== */
#sustainability .new_container_blk {
  margin-top: calc(170*(100vw / 750));
}

#sustainability .new_container_blk .wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column-reverse;
  gap: calc(20*(100vw / 750));
  margin-top: calc(60*(100vw / 750));
}

#sustainability .new_container_blk .wrap:nth-of-type(2) {
  flex-direction: column-reverse;
  margin-top: calc(66*(100vw / 750));
}

#sustainability .new_container_blk .img_blk {
  width: calc(470*(100vw / 750));
}

#sustainability .new_container_blk .text_blk {
  margin-top: calc(-10*(100vw / 750));
}

#sustainability .new_container_blk h3 {
  text-align: center;
  font-size: calc(36*(100vw / 750));
}

#sustainability .new_container_blk h3:nth-of-type(2) {
  margin-top: calc(146*(100vw / 750));
  letter-spacing: -0.02em;
}

#sustainability .new_container_blk h4 {
  text-align: center;
  margin-top: calc(27*(100vw / 750));
  font-size: calc(27*(100vw / 750));
}

/* ======== container_bottom ======== */
#sustainability .container_bottom {
  margin-top: calc(140*(100vw / 750));
  background: rgba(233, 234, 228, 0.4);
  padding: calc(120*(100vw / 750)) 0 calc(90*(100vw / 750));
}

#sustainability .container_bottom .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: calc(710*(100vw / 750));
  height: auto;
  margin: auto;
}

#sustainability .container_bottom .wrap div:nth-of-type(2) {
  width: calc(710*(100vw / 750));
  border: var(--color-black) calc(2*(100vw / 750)) solid;
  border-left: unset;
  border-right: unset;
  padding: calc(90*(100vw / 750)) calc(21*(100vw / 750)) calc(96*(100vw / 750));
}

#sustainability .container_bottom .wrap div:nth-of-type(1) ,
#sustainability .container_bottom .wrap div:nth-of-type(3) {
  width: calc(710*(100vw / 750));
}

#sustainability .container_bottom .wrap div:nth-of-type(1) {
  padding: 0 calc(21*(100vw / 750)) calc(86*(100vw / 750));
}

#sustainability .container_bottom .wrap div:nth-of-type(3) {
  padding: calc(119*(100vw / 750)) calc(21*(100vw / 750)) 0;
}

#sustainability .container_bottom .wrap div .ttl {
  position: relative;
  margin-top: 0;
  font-size: calc(30*(100vw / 750));
}

#sustainability .container_bottom .wrap div:nth-of-type(1) .ttl::before ,
#sustainability .container_bottom .wrap div:nth-of-type(2) .ttl::before ,
#sustainability .container_bottom .wrap div:nth-of-type(3) .ttl::before {
  position: absolute;
  display: block;
  content: "";
  width: calc(80*(100vw / 750));
  height: calc(87*(100vw / 750));
  right: 0;
  z-index: 1;
}

#sustainability .container_bottom .wrap div:nth-of-type(1) .ttl::before {
  background: url(../img/container_logo_1.svg) no-repeat;
  background-size: 100%;
  width: calc(210*(100vw / 750));
  height: calc(130*(100vw / 750));
  margin-top: calc(-50*(100vw / 750));
}
#sustainability .container_bottom .wrap div:nth-of-type(2) .ttl::before {
  background: url(../img/container_logo_2.svg) no-repeat;
  background-size: 100%;
  width: calc(158*(100vw / 750));
  height: calc(106*(100vw / 750));
  top: calc(-17*(100vw / 750));
}
#sustainability .container_bottom .wrap div:nth-of-type(3) .ttl::before {
  background: url(../img/container_logo_3.svg) no-repeat;
  background-size: 100%;
  width: calc(114*(100vw / 750));
  height: calc(175*(100vw / 750));
  margin-top: calc(-48*(100vw / 750));
}

#sustainability .container_bottom .wrap div:nth-of-type(3) .text {
  margin-top: calc(127*(100vw / 750));
}

#sustainability .container_bottom .wrap div .text {
  text-align: justify;
  margin-top: calc(80*(100vw / 750));
  font-size: calc(25*(100vw / 750));
}

/*---------- 追従メニュー ----------*/
#page-top .page_nav {
  width: 100%;
  background: var(--color-white);
  border-top: var(--color-black) calc(2*(100vw / 750)) solid;
  margin: 0;
}

#page-top .page_nav div {
  width: 50%;
  border: unset;
}

#page-top .page_nav div a {
  margin-top: calc(-35*(100vw / 750));
  margin-left: auto;
  margin-right: auto;
  letter-spacing: -0.05em;
}

#page-top .page_nav div:nth-of-type(1) {
  border-right: var(--color-black) calc(2*(100vw / 750)) solid;
}

#page-top .page_nav div a::before {
  width: calc(28*(100vw / 750));
  height: calc(15*(100vw / 750));
  top: calc(75*(100vw / 750));
  right: calc(122*(100vw / 750));
}

#page-top .page_nav div:nth-of-type(2) a::before {
  right: calc(150*(100vw / 750));
}


/*リンクを右下に固定*/
#page-top {
  width: 100%;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  opacity: 0;
}

#page-top .check_blk {
position: relative;
width: 18rem;
height: 18rem;
z-index: 0;
}


/*　上に上がる動き　*/

#page-top.UpMove{
  animation: UpAnime 1s forwards;
}
@keyframes UpAnime{
from {
  opacity: 1;
  transform: translateY(250px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}

/*　下に下がる動き　*/

#page-top.DownMove{
  animation: DownAnime 1s forwards;
}
@keyframes DownAnime{
from {
  opacity: 1;
  transform: translateY(0);
}
to {
  opacity: 1;
  transform: translateY(250px);
}
}


}