@charset "UTF-8";
/* リキッドレイアウト対応 */
/* --- PCファースト（max-width） --- */
html {
  font-size: 16px;
}

/* pcの電話番号発信対応 */
a[href^="tel:"] {
  pointer-events: none;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

/* hover指定できるPCを想定したスタイル */
/* hoverが使えないタッチ端末を想定した装飾 */
body {
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

main {
  flex: 1;
}

body.is-fixed {
  overflow: hidden;
}
.layout-container {
  min-width: 1260px;
}
.layout-container footer {
  font-size: 12px;
  line-height: 16px;
}
.layout-container footer img {
  display: inline;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

.c-button-brown {
  background-color: #604C3F;
  border-radius: 0.625rem;
  color: #fff;
  display: inline-block;
  font-size: max(1.625rem, 10px);
  line-height: 1.7;
  padding-block: 1.9375rem 1.875rem;
  padding-inline: 0.625rem 2.8125rem;
  position: relative;
  width: 36.25rem;
}

.c-button-brown span::after {
  background-image: url(../images/link-icon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.25rem;
  position: absolute;
  right: 1.875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
}

.c-button-brown.c-button-brown--circle {
  border-radius: 3.125rem;
  font-size: max(1rem, 10px);
  line-height: 1.5;
  padding-block: 1.0625rem;
  padding-inline: 0.625rem 1.875rem;
  text-align: center;
  width: 22.75rem;
}

.c-button-brown.c-button-brown--circle span::after {
  height: 0.875rem;
  right: 1.25rem;
  width: 0.875rem;
}
.c-button-brown:has(span.u-small) {
  padding-block: 1rem 1.1875rem;
}

.c-button-brown span.u-small {
  display: block;
  font-size: max(0.875rem, 10px);
  line-height: 1.7;
  margin-top: 0.3125rem;
}

.c-button {
  background-color: #fff;
  border: 2px solid #CC6600;
  border-radius: 3.125rem;
  display: inline-block;
  font-size: max(1rem, 10px);
  line-height: 1.5;
  padding-block: 0.9375rem 1rem;
  padding-inline: 1.6875rem 3.75rem;
  position: relative;
  transition: color 0.3s ease-in-out;
}

.c-button::after {
  content: "";
  display: block;
  height: 0.875rem;
  position: absolute;
  width: 0.875rem;
  -webkit-mask-image: url(../images/link-icon.svg);
          mask-image: url(../images/link-icon.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
  background-color: currentColor;
          mask-size: contain;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
}

.c-button.c-button--square {
  border-radius: 0.625rem;
  box-shadow: 0 0 0.625rem rgba(204, 102, 0, 0.5);
  font-size: max(1.625rem, 10px);
  padding-block: 1.9375rem;
  width: 100%;
}

.c-button.c-button--square::after {
  background-color: #CC6600;
  height: 1.5rem;
  right: 1.25rem;
  width: 1.5rem;
}
.c-case-title {
  background-color: #CC6600;
  color: #CC6600;
  color: #fff;
  display: inline-block;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  padding: 0.4375rem 10rem;
  text-align: center;
}

.c-case-title span {
  font-size: 0.5625rem;
}

.c-section-head__title {
  align-items: center;
  color: #CC6600;
  display: flex;
  font-size: max(2.25rem, 10px);
  font-weight: 400;
  gap: 1.625rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  position: relative;
}

.c-section-head__title::before {
  aspect-ratio: 1/2;
  background-image: url(../images/titile-deco.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: auto;
  width: 2.5rem;
}

.c-section-head__text {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.9375rem;
  padding-left: 4.125rem;
}

.c-section-head__text span {
  font-size: 0.5625rem;
}

.l-banner {
  margin-block: 6.5625rem 7.75rem;
}

.l-header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 900;
}

.l-history {
  margin-top: 9.375rem;
}

.l-inner {
  margin-inline: auto;
  max-width: 78.125rem;
  padding-inline: 1.5625rem;
  width: 100%;
}

.l-intro {
  margin-top: 5rem;
}

.l-recycle {
  margin-top: 1.25rem;
}

.p-banner__title {
  color: #CC6600;
  font-size: max(2.25rem, 10px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}

.p-banner__list {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 4.0625rem;
}

.p-banner__item a.c-button.c-button--square {
  height: 100%;
  padding-block: 1.25rem 1.4375rem;
  padding-inline: 1.875rem;
}

.p-banner__text {
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.p-banner__logo {
  height: auto;
  margin-inline: auto;
  margin-top: 1.25rem;
  width: 8.8125rem;
}

.p-banner__item[data-company=withgarden] .p-banner__logo {
  margin-top: 0.75rem;
  width: 18.625rem;
}

.p-banner__logo img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.p-co2 {
  background-color: #FFFBEB;
  padding-block: 6.6875rem 5rem;
}

.p-co2__title {
  color: #CC6600;
  font-size: max(2.25rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.p-co2__title span {
  font-size: max(1.125rem, 10px);
}

.p-co2__lead {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.8125rem;
  text-align: center;
}

.p-co2__lead span {
  font-size: 0.5625rem;
}

.p-co2__heading {
  margin-top: 5.1875rem;
}

.p-co2__contents {
  text-align: center;
}

.p-co2__list {
  display: grid;
  gap: 2.625rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 3.125rem;
}

.p-co2__item {
  position: relative;
}

.p-co2__img {
  height: auto;
  width: 100%;
}

.p-co2__img img {
  aspect-ratio: 580/354;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-co2__img figcaption {
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.625rem;
  text-align: center;
  width: 100%;
}

.p-co2__item-text {
  bottom: 6.25rem;
  color: #fff;
  font-size: max(2.5rem, 10px);
  font-weight: 700;
  line-height: 1.75;
  line-height: 1.1;
  position: absolute;
  right: 1.875rem;
}

.p-co2__item-text span {
  font-size: max(1.25rem, 10px);
}

.p-co2__item-text span.p-co2__item-text--large {
  font-size: max(4rem, 10px);
}

.p-co2__note {
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-left: auto;
  margin-top: 2.375rem;
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
}

.p-co2__note span {
  font-size: 0.375rem;
}

.p-co2__button {
  margin-top: 2.125rem;
}

.p-header {
  background-color: rgba(255, 255, 255, 0.8);
  height: 80px;
  transition: background-color 0.3s ease-in-out;
}

.p-header:has(.is-open) {
  background-color: #fff;
}

.p-header__inner {
  display: flex;
  height: inherit;
  justify-content: space-between;
  padding-inline: 4.0625rem 2.5rem;
}

.p-header__left {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 2.3199023199vw;
  height: inherit;
}

.p-header__logo {
  height: inherit;
  min-width: 6.875rem;
  width: 7.625rem;
}

.p-header__logo a {
  align-items: center;
  display: flex;
  height: inherit;
  width: 100%;
}

.p-header__logo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.p-header__logo--sub {
  align-items: center;
  color: #000000;
  display: flex;
  font-size: max(1.375rem, 13px);
  font-weight: 700;
  height: inherit;
  line-height: 1;
}

.p-header__nav {
  display: block;
  height: inherit;
}

.p-header__nav-list {
  display: flex;
  height: inherit;
}

.p-header__nav-item {
  height: inherit;
}

.p-header__nav-item a {
  align-items: center;
  display: flex;
  font-size: max(0.875rem, 13px);
  font-weight: 400;
  height: inherit;
  line-height: 1;
  padding: 0 1.221001221vw;
  text-transform: uppercase;
}

.p-header__nav-item:first-child a {
  padding-left: 0;
}

.p-header__nav-item:nth-last-child(2) a {
  padding-right: 1.9536019536vw;
}

.p-header__nav-item.p-header__nav-item--contact a {
  background-color: #604C3F;
  color: #fff;
  padding-inline: 1.4041514042vw;
}

.p-header__hamburger {
  aspect-ratio: 1/1;
  border: none;
  cursor: pointer;
  display: none;
  flex-shrink: 0;
  height: 100%;
  height: inherit;
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  transition: 0.3s;
  width: auto;
  z-index: 999;
}

.p-header__hamburger.is-open {
  background-color: transparent;
}

.p-header__hamburger span {
  background-color: #CC6600;
  display: block;
  height: 0.1875rem;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
  transition: 0.5s;
  width: 1.4375rem;
}

.p-header__hamburger span::before,
.p-header__hamburger span::after {
  background-color: #CC6600;
  content: "";
  display: block;
  height: 0.1875rem;
  position: absolute;
  transition: transform 0.3s ease-in-out;
  width: 1.4375rem;
}

.p-header__hamburger span::before {
  transform: translateY(-0.5rem);
}

.p-header__hamburger span::after {
  transform: translateY(0.5rem);
}

.p-header__hamburger.is-open span {
  background-color: transparent;
}

.p-header__hamburger.is-open span::before {
  transform: translateY(0) rotate(-45deg);
}

.p-header__hamburger.is-open span::after {
  transform: translateY(0) rotate(45deg);
}

.p-header__drawer {
  background-color: #fff;
  border-top: 1px solid #959595;
  bottom: 0;
  height: 100vh;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  right: 0;
  scrollbar-width: none;
  top: 55px;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  width: 100%;
  z-index: 900;
  z-index: 999;
}

.p-header__drawer.is-open {
  transform: translateX(0);
}

.p-header__drawer::-webkit-scrollbar {
  display: none;
}

.p-header__drawer-item a {
  display: block;
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  padding: 1.125rem 0;
  text-align: center;
  text-transform: uppercase;
}

.p-header__drawer-item:first-child a {
  padding-top: 1.4375rem;
}

.p-header__drawer-item.p-header__drawer-item--contact {
  background-color: #604C3F;
  color: #fff;
  margin-top: 1.25rem;
}

.p-history {
  background-color: #F7F1EA;
  padding-block: 5.375rem 5.625rem;
}

.p-history__head .c-section-head__title {
  letter-spacing: 0.05em;
}

.p-history__head .c-section-head__text {
  margin-top: 1.375rem;
}

.c-section-head__text span.p-history__note {
  display: block;
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.625rem;
}

.p-history__timeline {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: 4.75rem 1fr;
  margin-inline: auto;
  margin-top: 4.5625rem;
  max-width: 70rem;
}

.p-history__group-years {
  background: linear-gradient(180deg, #FFB765 0%, #CC6600 100%);
  clip-path: polygon(0% 0%, 100% 0, 100% 96%, 50% 100%, 0 96%);
  position: relative;
}

.p-history__group-year {
  color: #fff;
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  left: 50%;
  line-height: 1;
  position: absolute;
  transform: translateX(-50%);
}

.p-history__group-year[data-year="1980"] {
  top: 2.3125rem;
}

.p-history__group-year[data-year="1990"] {
  top: 17.5%;
}

.p-history__group-year[data-year="2000"] {
  top: 46%;
}

.p-history__group-year[data-year="2010"] {
  top: 59.4%;
}

.p-history__group-year[data-year="2020"] {
  top: 84%;
}

.p-history__list {
  background: linear-gradient(to right, #CC6600 0px, #CC6600 10.875rem, #fff 10.875rem, #fff 100%);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  margin-top: 3.125rem;
}

.p-history__item {
  background: linear-gradient(to right, #CC6600 0px, #CC6600 10.875rem, #fff 10.875rem, #fff 100%);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 100% 1px;
  display: grid;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  grid-template-columns: 10.875rem 1fr;
  line-height: 1.7;
  padding-block: 1.875rem 1.84375rem;
}

.p-history__item-year {
  align-items: center;
  color: #CC6600;
  display: flex;
  justify-content: center;
}

.p-history__item-text {
  padding-left: 1.6875rem;
}

.p-history__item-text span {
  color: #CC6600;
  font-weight: 700;
}

.p-history__item.p-history__item--highlight {
  font-weight: 700;
  padding-block: 0.9375rem;
}

.p-history__item.p-history__item--highlight .p-history__item-year,
.p-history__item.p-history__item--highlight .p-history__item-text {
  background-color: #CC6600;
  color: #fff;
  padding-block: 0.875rem;
  width: 100%;
}

.p-intro__title {
  color: #000000;
  font-size: max(2.25rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.p-intro__title span {
  color: #CC6600;
}

.p-mv {
  height: 90vh;
  min-height: 33.75rem;
  overflow-x: clip;
  position: relative;
}

.p-mv__slider,
.p-mv__slider-track,
.p-mv__slider-list,
.p-mv__slider-item,
.p-mv__slider-item picture {
  height: inherit;
  min-height: inherit;
}

.p-mv__slider-item img {
  height: inherit;
  min-height: inherit;
  object-fit: cover;
}

.p-mv__copy {
  color: #fff;
  left: 50%;
  padding-top: 80px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.p-mv__main-copy {
  font-size: max(3.875rem, 10px);
  font-weight: 400;
  line-height: 1.6129032258;
}

.p-mv__main-copy span {
  font-size: max(2.625rem, 10px);
}

.p-mv__slider .splide__slide img {
  height: inherit;
  object-fit: cover;
  transform: scale(1.15);
  transition: transform 10s ease-out;
  width: 120%;
}

.p-mv__slider .splide__slide.is-active img {
  transform: translateX(2%) scale(1.15);
  transition-delay: 0s;
}

.p-product-performance {
  margin-top: 6.25rem;
}

.p-product-performance__head .c-section-head__text {
  margin-top: 1.5625rem;
}

.p-product-performance__flow-wrap {
  margin-top: 3.75rem;
}

.p-product-performance__flow-label {
  background-color: #fff;
  border: 2px solid #0078BE;
  border-radius: 0.9375rem;
  color: #0078BE;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1;
  margin-inline: auto;
  padding: 0.1875rem 2.5rem;
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 1;
}

.p-product-performance__label-list {
  display: flex;
  margin-top: -0.9375rem;
}

.p-product-performance__label-item {
  background: linear-gradient(90deg, #FFB765 0%, #CC6600 100%);
  clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
  color: #fff;
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  padding-block: 1.625rem;
  padding-inline: 1.3125rem 0.625rem;
  text-align: center;
  width: 100%;
  z-index: 0;
}

.p-product-performance__label-item .u-pc {
  display: inline-block;
}

.p-product-performance__label-item .u-sp {
  display: none;
}

.p-product-performance__label-item:nth-child(2),
.p-product-performance__label-item:nth-child(3) {
  background: linear-gradient(90deg, #80BDE0 0%, #0078BE 100%);
}

.p-product-performance__label-item:not(:first-child) {
  margin-left: -2.1875rem;
}

.p-product-performance__label-item:nth-child(2) {
  z-index: -1;
}

.p-product-performance__label-item:nth-child(3) {
  z-index: -2;
}

.p-product-performance__label-item:nth-child(4) {
  z-index: -3;
}

.p-product-performance__flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 97.3333333333%;
}

.p-product-performance__flow-item {
  padding: 3.125rem 2.125rem;
  position: relative;
}

.p-product-performance__flow-item:nth-child(1),
.p-product-performance__flow-item:nth-child(4) {
  background-color: #FFFBEB;
}

.p-product-performance__flow-item:nth-child(2),
.p-product-performance__flow-item:nth-child(3) {
  background-color: #DEF5FF;
}

.p-product-performance__flow-img {
  height: auto;
  position: relative;
  width: 100%;
  z-index: 10;
}

.p-product-performance__flow-img img {
  aspect-ratio: 220/165;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-product-performance__note {
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-left: auto;
  margin-right: -0.1875rem;
  margin-top: 1.375rem;
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
}

.p-product-performance__flow-item-text {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
  color: #CC6600;
  display: flex;
  flex-direction: column;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  gap: 1.0625rem;
  height: auto;
  justify-content: center;
  line-height: 1;
  padding-top: 0.5rem;
  position: absolute;
  right: -3.4375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 6.875rem;
  z-index: 1;
}

.p-product-performance__flow-item-text::after {
  aspect-ratio: 137/150;
  background-image: url(../images/arrow-orange.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: auto;
  width: 1.375rem;
}

.p-product-performance__case {
  margin-top: 6.875rem;
}

.p-product-performance__case-title.c-case-title {
  padding-inline: 8.125rem;
}

.p-product-performance__case-body {
  display: grid;
  gap: 2.375rem;
  grid-template-columns: 30.8% 1fr;
  margin-top: 2.3125rem;
}

.p-product-performance__case-heading {
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1;
}

.p-product-performance__case-text {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 1.75rem;
}

.p-product-performance__case-list {
  display: grid;
  gap: 0.375rem;
  grid-template-columns: 27.67396% 1fr;
}

.p-product-performance__case-img {
  height: auto;
  width: 100%;
}

.p-product-performance__case-img img {
  aspect-ratio: 220/261;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-product-performance__case-item:nth-child(2) .p-product-performance__case-img img {
  aspect-ratio: 569/261;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-product-performance__case-img figcaption {
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-right: -0.1875rem;
  margin-top: 0.625rem;
  text-align: right;
}

.p-product-performance__button {
  margin-top: 8.875rem;
  text-align: center;
}

.p-product-usage {
  background-color: #FFFBEB;
  margin-top: 9.375rem;
  padding-block: 5.625rem 8.125rem;
}

.p-product-usage__head .c-section-head__text {
  margin-top: 1.4375rem;
}

.p-product-usage__contents {
  margin-top: 4.9375rem;
}

.p-product-usage__contents + .p-product-usage__contents {
  margin-top: 5.1875rem;
}

.p-product-usage__label {
  align-items: center;
  background-color: #CC6600;
  border-radius: 1.25rem 1.25rem 0 0;
  color: #fff;
  display: flex;
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  gap: 0.9375rem;
  line-height: 1.7;
  padding: 0.4375rem 2.125rem;
  width: 46.5%;
}

.p-product-usage__label span {
  border-left: 1px solid #fff;
  display: inline-block;
  font-size: max(1.125rem, 10px);
  padding-left: 1.125rem;
}

.p-product-usage__contents-inner {
  background-color: #fff;
  padding-block: 4.5rem 3.4375rem;
  padding-inline: 2.5625rem;
}

.p-product-usage__contents-inner:has(.p-product-usage__img-note) {
  padding-block: 4.5rem 3.3125rem;
}

.p-product-usage__subtitle {
  font-size: max(1.875rem, 10px);
  font-weight: 400;
  line-height: 1.7;
}

.p-product-usage__text {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.625rem;
}

.p-product-usage__flow-box {
  display: grid;
  gap: 2.6875rem;
  grid-template-columns: repeat(2, 1fr);
  margin-left: 10.1967799642%;
  margin-top: 2.8125rem;
  width: 76.1180679785%;
}

.p-product-usage__flow-col {
  align-items: stretch;
  border: 1px solid #BBBBBB;
  border-radius: 1.25rem;
  display: flex;
  flex-direction: column;
  padding-block: 1.75rem 2.8125rem;
  padding-inline: 1.25rem;
}

.p-product-usage__flow-col[data-type=company] {
  border: 1px solid #0078BE;
}

.p-product-usage__flow-title {
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.p-product-usage__flow-title:has(img) {
  height: auto;
  margin-inline: auto;
  width: 7.6875rem;
}

.p-product-usage__flow-title img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.p-product-usage__flow-items {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.p-product-usage__flow-col[data-type=cooperation] .p-product-usage__flow-item + .p-product-usage__flow-item {
  border-top: 1px solid #BBBBBB;
  margin-top: 2.125rem;
  padding-top: 1.25rem;
}

.p-product-usage__flow-step {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  text-align: center;
}

.p-product-usage__flow-img {
  height: auto;
  margin-inline: auto;
  margin-top: 0.5rem;
  position: relative;
  width: 13.75rem;
}

.p-product-usage__flow-img img {
  aspect-ratio: 1/1;
  height: auto;
  object-fit: cover;
  position: relative;
  width: 100%;
  z-index: 1;
}

.p-product-usage__flow-arrow {
  aspect-ratio: 227/147;
  background-image: url(../images/union.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
  position: absolute;
  right: -14.1875rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14.1875rem;
}

.p-product-usage__flow-arrow-text {
  align-items: center;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  height: auto;
  justify-content: center;
  left: 50%;
  line-height: 1.7;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4.875rem;
  z-index: 1;
}

.p-product-usage__flow-img[data-num="3"] .p-product-usage__flow-arrow {
  aspect-ratio: 185/150;
  background-image: url(../images/union-bottom.svg);
  bottom: -5.9375rem;
  height: auto;
  left: 50%;
  position: absolute;
  top: initial;
  transform: translateX(-50%);
  width: 11.5625rem;
}

.p-product-usage__flow-img[data-num="3"] .p-product-usage__flow-arrow-text {
  top: 59%;
}

.p-product-usage__flow-img[data-num="4"] .p-product-usage__flow-arrow {
  left: -14.1875rem;
  position: absolute;
  right: revert;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

.p-product-usage__flow-img[data-num="4"] .p-product-usage__flow-arrow-text {
  transform: translate(-50%, -50%) rotate(-180deg);
}

.p-product-usage__img-wrap {
  display: grid;
  gap: 2.625rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 2.375rem;
  position: relative;
}

.p-product-usage__img {
  height: auto;
  position: relative;
  width: 100%;
}

.p-product-usage__img img {
  aspect-ratio: 540/330;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-product-usage__img-text {
  height: auto;
  left: 50%;
  position: absolute;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 20.6875rem;
}

.p-product-usage__img-text img {
  aspect-ratio: 321/278;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-product-usage__img-comment {
  bottom: 0.3125rem;
  color: #fff;
  font-size: max(1.875rem, 10px);
  font-weight: 700;
  left: 50%;
  line-height: 1.7;
  position: absolute;
  text-transform: capitalize;
  transform: translateX(-50%);
}

.p-product-usage__img-note {
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-left: auto;
  margin-right: -0.0625rem;
  margin-top: 1rem;
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
}

.p-product-usage__button {
  margin-top: 8.5625rem;
  text-align: center;
}

.p-recycle {
  background-color: #F7F1EA;
  padding-block: 10.625rem 2.8125rem;
  position: relative;
}

.p-recycle::before {
  aspect-ratio: 1638/110;
  background-color: #fff;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  content: "";
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.p-recycle__text {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.9375rem;
  padding-left: 4.125rem;
}

.p-recycle__img {
  height: auto;
  margin-top: 1.5rem;
  width: 100%;
}

.p-recycle__img img {
  aspect-ratio: 1201/880;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-sales-system {
  padding-top: 5.5rem;
}

.p-sales-system__head .c-section-head__text {
  margin-top: 1.4375rem;
}

.p-sales-system__lead {
  font-size: max(1.875rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 4.625rem;
  text-align: center;
}

.p-sales-system__list {
  display: grid;
  gap: 2.5rem 1.875rem;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: auto;
  margin-top: 2.8125rem;
  max-width: 70rem;
  position: relative;
}

.p-sales-system__list::after {
  aspect-ratio: 1/1;
  background-color: #F8E6CD;
  border-radius: 50%;
  content: "";
  height: auto;
  left: 50%;
  outline: 1.25rem solid #fff;
  outline-offset: -1.375rem;
  position: absolute;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 67.1428571429%;
  z-index: -1;
}

.p-sales-system__item {
  background-color: #fff;
  border-radius: 1.875rem;
  box-shadow: 0 0 0.625rem 0.125rem rgba(0, 0, 0, 0.25);
  padding: 2.25rem 3.125rem 1.5625rem;
}

.p-sales-system__item[data-company=misawa] {
  color: #1172AE;
  grid-area: 1/1/2/3;
  margin-inline: auto;
  max-width: 48.2142857143%;
  width: 100%;
}

.p-sales-system__item[data-company=withgarden] {
  color: #17706B;
  grid-area: 2/1/3/2;
  padding-top: 1.375rem;
}

.p-sales-system__item[data-company=akitawood] {
  color: #03B985;
  grid-area: 2/2/3/3;
  padding-top: 0.0625rem;
}

.p-sales-system__logo {
  height: auto;
  margin-inline: auto;
}

.p-sales-system__logo img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.p-sales-system__logo figcaption {
  color: currentColor;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.3125rem;
  text-align: center;
}

.p-sales-system__item[data-company=misawa] .p-sales-system__logo figcaption {
  margin-top: 0.9375rem;
}

.p-sales-system__item[data-company=misawa] .p-sales-system__logo {
  width: 8.8125rem;
}

.p-sales-system__item[data-company=withgarden] .p-sales-system__logo {
  width: 18.625rem;
}

.p-sales-system__item[data-company=akitawood] .p-sales-system__logo {
  width: 5.9375rem;
}

.p-sales-system__body {
  border-top: 1px solid currentColor;
  margin-top: 0.625rem;
  padding-top: 0.75rem;
}

.p-sales-system__title {
  color: #000000;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.5;
}

.p-sales-system__dl {
  color: #000000;
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.5;
}

.p-sales-system__row {
  display: flex;
}

.p-sales-system__dt {
  flex-shrink: 0;
  text-align: justify;
  width: 7rem;
  -moz-text-align-last: justify;
       text-align-last: justify;
}

.p-sales-system__row:not(:last-child) .p-sales-system__dt::after {
  content: "：";
}

.p-sales-system__row:last-child {
  flex-direction: column;
  margin-top: 0.5rem;
}

.p-sales-system__button {
  margin-top: 1.4375rem;
  text-align: center;
}

.p-sales-system__button .c-button {
  border-color: currentColor;
  box-shadow: 0 0 0.375rem #bbbbbb;
  padding-block: 0.3125rem 0.4375rem;
  padding-inline: 4.5rem;
}

.p-sales-system__button .c-button::before {
  box-shadow: 0 0 0.375rem #bbbbbb;
}

.p-sales-system__button .c-button::after {
  border-color: currentColor;
}

.p-sales-system__button .c-button span {
  color: #000000;
  transition: color 0.3s ease-in-out;
}
.p-sustainable-material {
  background-color: #F7F1EA;
  padding-block: 5.375rem 9.375rem;
}

.p-sustainable-material__head {
  text-align: center;
}

.p-sustainable-material__title {
  color: #CC6600;
  font-size: max(2.25rem, 10px);
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

.p-sustainable-material__contents {
  margin-top: 5.125rem;
}

.p-sustainable-material__contents[data-type=feature] {
  margin-top: 5.625rem;
}

.p-sustainable-material__sub-title-wrap {
  align-items: center;
  display: flex;
  justify-content: center;
}

.p-sustainable-material__sub-title.c-case-title {
  font-size: max(1.875rem, 10px);
  line-height: 1;
  padding: 0.875rem 10rem;
  width: 69%;
}

.p-sustainable-material__sub-title-wrap::after,
.p-sustainable-material__sub-title-wrap::before {
  background-color: #CC6600;
  content: "";
  flex-grow: 1;
  height: 2px;
}

.p-sustainable-material__sub-intro {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 1.6875rem;
  text-align: center;
}

.p-sustainable-material__list {
  margin-inline: auto;
  margin-top: 5.375rem;
  max-width: 70.3125rem;
}

.p-sustainable-material__item {
  display: grid;
  gap: 2rem;
  grid-template-columns: 11.25rem 1fr;
}

.p-sustainable-material__item:nth-child(2) {
  margin-top: 2.1875rem;
}

.p-sustainable-material__item:nth-child(3) {
  margin-top: 3.25rem;
}

.p-sustainable-material__item:nth-child(4) {
  margin-top: -1.125rem;
}

.p-sustainable-material__label {
  align-items: center;
  aspect-ratio: 1/1;
  background: linear-gradient(90deg, #FFB765 0%, #CC6600 100%);
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: max(1.875rem, 10px);
  font-weight: 400;
  height: auto;
  justify-content: center;
  line-height: 1;
  outline: 2px solid #fff;
  outline-offset: -0.3125rem;
  width: 100%;
}

.p-sustainable-material__body {
  display: flex;
  flex-direction: column;
}

.p-sustainable-material__heading {
  font-size: max(1.875rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  padding-top: 4.125rem;
}

.p-sustainable-material__text {
  font-size: max(1.125rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 2.6875rem;
}

.p-sustainable-material__img-list {
  display: grid;
  gap: 0.8125rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.375rem;
}

.p-sustainable-material__img {
  height: auto;
  width: 100%;
}

.p-sustainable-material__img img {
  aspect-ratio: 294/185;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-sustainable-material__button {
  margin-top: 1.125rem;
  text-align: right;
}

.p-sustainable-material__note {
  font-size: max(0.75rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.3125rem;
}

.p-sustainable-material__cert {
  background-color: #fff;
  margin-top: 5.4375rem;
  padding: 2.25rem 2.25rem 1.875rem;
  text-align: center;
}

.p-sustainable-material__cert-title.c-case-title {
  background-color: #F7F1EA;
  color: #CC6600;
  font-size: max(1.875rem, 10px);
  padding: 0.25rem 10rem;
  width: 74.4604316547%;
}

.p-sustainable-material__cert-list {
  display: grid;
  margin-top: 2.375rem;
  -moz-column-gap: 2.0625rem;
       column-gap: 2.0625rem;
  grid-template-columns: repeat(5, 1fr);
}

.p-sustainable-material__cert-item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
}

.p-sustainable-material__cert-text {
  align-items: center;
  border-bottom: 1px solid #CC6600;
  display: flex;
  font-size: max(1.25rem, 10px);
  font-weight: 400;
  justify-content: center;
  line-height: 1.5;
  padding-bottom: 1.0625rem;
  width: 100%;
}

.p-sustainable-material__cert-img {
  align-items: center;
  display: flex;
  height: auto;
  justify-content: center;
  margin-inline: auto;
  margin-top: 1.125rem;
  max-width: 10.125rem;
  width: 100%;
}

.p-sustainable-material__cert-img img {
  height: auto;
  object-fit: contain;
  width: 100%;
}

.p-sustainable-material__cert-item:nth-child(1) .p-sustainable-material__cert-img {
  max-width: 10.6875rem;
}

.p-sustainable-material__cert-item:nth-child(4) .p-sustainable-material__cert-img {
  max-width: 8.5625rem;
}

.p-sustainable-material__cert-item:nth-child(5) .p-sustainable-material__cert-img {
  max-width: 7.9375rem;
}

.p-sustainable-material__contents[data-type=feature] .p-sustainable-material__heading {
  margin-top: 2rem;
  padding-top: revert;
  text-align: center;
}

.p-sustainable-material__contents[data-type=feature] .p-sustainable-material__sub-intro {
  margin-inline: auto;
  margin-top: 1.5rem;
  max-width: 70.1875rem;
  text-align: left;
}

.p-sustainable-material__feature-list {
  display: grid;
  gap: 2.75rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 5.5rem;
}

.p-sustainable-material__feature-img {
  height: auto;
  width: 100%;
}

.p-sustainable-material__feature-img img {
  aspect-ratio: 371/232;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.p-sustainable-material__feature-img figcaption {
  font-size: max(1.625rem, 10px);
  font-weight: 400;
  line-height: 1.7;
  margin-top: 0.6875rem;
  text-align: center;
}

.p-sustainable-material__feature-button {
  margin-top: 8.75rem;
  text-align: center;
}

.js-fadein {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 2s cubic-bezier(0.2, 0.6, 0.2, 1), transform 1s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.js-fadein.is-scrolled {
  opacity: 1;
  transform: translateY(0);
}

.u-pc {
  display: block;
}

.u-sp {
  display: none;
}

@media screen and (min-width: 481px){
  .layout-container footer .gb_footer_inner {
    max-width: calc(100% - 120px);
  }
}

@media (max-width: 1440px){
  .p-header__inner {
    padding-inline: 1.25rem;
  }
}

@media screen and (max-width: 1250px){
  html {
    font-size: 1.28vw;
  }
}

@media screen and (max-width: 767px){
  html {
    font-size: 16px;
  }
  a[href^="tel:"] {
    pointer-events: initial;
  }
  .c-button-brown {
    border-radius: 0.375rem;
    font-size: max(0.9375rem, 10px);
    padding-block: 1.0625rem;
    padding-inline: 0.625rem 1.875rem;
    width: 20.75rem;
  }
  .c-button-brown span::after {
    height: 0.75rem;
    right: 1.125rem;
    width: 0.75rem;
  }
  .c-button-brown.c-button-brown--circle {
    font-size: max(0.6875rem, 10px);
    padding-block: 1rem;
    padding-inline: 0.625rem 1.875rem;
    text-align: center;
    width: 16.75rem;
  }
  .c-button-brown.c-button-brown--circle span::after {
    height: 0.75rem;
    right: 0.625rem;
    width: 0.75rem;
  }
  .c-button-brown:has(span.u-small) {
    padding-block: 0.5rem 0.625rem;
  }
  .c-button-brown span.u-small {
    font-size: 0.5rem;
    margin-top: 0.125rem;
  }
  .c-button {
    font-size: max(0.6875rem, 10px);
    padding-inline: 3.75rem 5rem;
  }
  .c-button::after {
    height: 0.75rem;
    right: 0.625rem;
    width: 0.75rem;
  }
  .c-button.c-button--square {
    border-radius: 0.3125rem;
    font-size: max(0.9375rem, 10px);
    padding-block: 1.0625rem;
    padding-inline: 1.875rem 3.125rem;
    width: 20.75rem;
  }
  .c-button.c-button--square::after {
    height: 1rem;
    right: 0.9375rem;
    width: 1rem;
  }
  .c-case-title {
    display: block;
    font-size: max(0.75rem, 10px);
    padding: 0.3125rem;
  }
  .c-case-title span {
    font-size: 0.5rem;
  }
  .c-section-head__title {
    container-type: inline-size;
    font-size: max(1.0625rem, 10px);
    gap: 0.8125rem;
    letter-spacing: 0;
    line-height: 1.4;
  }
  .c-section-head__title::before {
    width: 1.25rem;
  }
  .c-section-head__text {
    font-size: max(0.75rem, 10px);
    margin-top: 0.5rem;
    padding-inline: 1.9375rem 1.25rem;
  }
  .l-banner {
    margin-block: 2.75rem 3.125rem;
  }
  .l-history {
    margin-top: 3.75rem;
  }
  .l-inner {
    max-width: 40rem;
    padding-inline: 1.25rem;
  }
  .l-intro {
    margin-top: 2.75rem;
  }
  .l-recycle {
    margin-top: 2.625rem;
  }
  .p-banner__title {
    font-size: max(1.0625rem, 10px);
    line-height: 1.7;
  }
  .p-banner__list {
    gap: 1.5rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 2.375rem;
  }
  .p-banner__item {
    text-align: center;
  }
  .p-banner__item a.c-button.c-button--square {
    padding-block: 0.75rem 1rem;
    padding-inline: 0.625rem;
  }
  .p-banner__item[data-company=withgarden] a.c-button.c-button--square {
    padding-bottom: 0.5rem;
  }
  .p-banner__text {
    font-size: max(0.9375rem, 10px);
  }
  .p-banner__logo {
    margin-top: 0.5625rem;
    width: 5.125rem;
  }
  .p-banner__item[data-company=withgarden] .p-banner__logo {
    margin-top: 0.1875rem;
    width: 10.625rem;
  }
  .p-co2 {
    padding-block: 3rem 2rem;
  }
  .p-co2__title {
    font-size: max(1.0625rem, 10px);
  }
  .p-co2__title span {
    font-size: 0.5625rem;
  }
  .p-co2__lead {
    font-size: max(0.75rem, 10px);
    margin-top: 0.75rem;
  }
  .p-co2__heading {
    margin-top: 1.5625rem;
  }
  .p-co2__list {
    gap: 1.125rem;
    grid-template-columns: repeat(1, 1fr);
    margin-inline: auto;
    margin-top: 1.9375rem;
    width: 88.7700534759%;
  }
  .p-co2__img figcaption {
    font-size: max(1.0625rem, 10px);
    margin-top: 0.625rem;
  }
  .p-co2__item-text {
    bottom: 3.75rem;
    font-size: max(1.40625rem, 10px);
    right: 1.125rem;
  }
  .p-co2__item-text span {
    font-size: max(0.703125rem, 10px);
  }
  .p-co2__item-text span.p-co2__item-text--large {
    font-size: max(2.25rem, 10px);
  }
  .p-co2__note {
    font-size: max(0.625rem, 10px);
    margin-top: 1.1875rem;
  }
  .p-co2__button {
    margin-top: 2.25rem;
  }
  .p-header {
    height: 55px;
  }
  .p-header__inner {
    padding-inline: 1.25rem 0;
  }
  .p-header__left {
    gap: 1.25rem;
    justify-content: space-between;
    width: calc(100% - 3.4375rem);
  }
  .p-header__logo {
    max-width: 4.875rem;
    min-width: initial;
  }
  .p-header__logo--sub {
    font-size: max(1rem, 13px);
  }
  .p-header__nav {
    display: none;
  }
  .p-header__hamburger {
    display: block;
  }
  .p-history {
    padding-block: 2.6875rem 3.4375rem;
  }
  .p-history__head .c-section-head__title {
    letter-spacing: 0;
  }
  .p-history__head .c-section-head__text {
    margin-top: 1.6875rem;
  }
  .c-section-head__text span.p-history__note {
    font-size: max(0.625rem, 10px);
    margin-top: 0.4375rem;
  }
  .p-history__timeline {
    gap: 0.75rem;
    grid-template-columns: 3.4375rem 1fr;
    margin-top: 2.3125rem;
    padding-inline: 1.25rem;
  }
  .p-history__group-year {
    font-size: max(1rem, 10px);
  }
  .p-history__group-year[data-year="1980"] {
    top: 1rem;
  }
  .p-history__group-year[data-year="1990"] {
    top: 15.6%;
  }
  .p-history__group-year[data-year="2000"] {
    top: 44.7%;
  }
  .p-history__group-year[data-year="2010"] {
    top: 60%;
  }
  .p-history__group-year[data-year="2020"] {
    top: 84.5%;
  }
  .p-history__list {
    background: linear-gradient(to right, #CC6600 0px, #CC6600 2.8125rem, #fff 2.8125rem, #fff 100%);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    margin-top: 1.5625rem;
  }
  .p-history__item {
    background: linear-gradient(to right, #CC6600 0px, #CC6600 2.8125rem, #fff 2.8125rem, #fff 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 1px;
    font-size: max(0.75rem, 10px);
    grid-template-columns: 2.8125rem 1fr;
    padding-block: 2rem;
  }
  .p-history__item-text {
    padding-left: 0.625rem;
  }
  .p-history__item.p-history__item--highlight {
    padding-block: 1.375rem;
  }
  .p-history__item.p-history__item--highlight .p-history__item-year,
  .p-history__item.p-history__item--highlight .p-history__item-text {
    padding-block: 0.6875rem;
    width: 100%;
  }
  .p-intro__inner.l-inner {
    padding-inline: 0.625rem;
  }
  .p-intro__title {
    font-size: max(1.0625rem, 10px);
  }
  .p-mv {
    height: 28.75rem;
    min-height: 18.75rem;
  }
  .p-mv__copy {
    padding-top: 55px;
  }
  .p-mv__main-copy {
    font-size: max(1.8125rem, 10px);
  }
  .p-mv__main-copy span {
    font-size: max(1.25rem, 10px);
  }
  .p-mv__slider .splide__slide.is-active img {
    transform: translateX(8%) scale(1.15);
  }
  .p-product-performance {
    background-color: #F7F1EA;
    margin-top: revert;
    padding-block: 3.3125rem 3.125rem;
  }
  .p-product-performance__head .c-section-head__text {
    margin-top: 0.6875rem;
  }
  .p-product-performance__flow-wrap {
    margin-left: 2.0625rem;
    margin-top: 2.6875rem;
    width: 87.7005347594%;
  }
  .p-product-performance__flow {
    display: grid;
    grid-template-columns: 4.0625rem 1fr;
    position: relative;
  }
  .p-product-performance__flow-label {
    align-items: center;
    display: flex;
    font-size: max(0.6875rem, 10px);
    height: 8.5rem;
    justify-content: center;
    left: -0.75rem;
    padding: 0.625rem 0.3125rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1.375rem;
    writing-mode: vertical-lr;
    z-index: 11;
  }
  .p-product-performance__label-list {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    margin-top: 0;
    z-index: 10;
  }
  .p-product-performance__label-item {
    background: linear-gradient(180deg, #FFB765 0%, #CC6600 100%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    font-size: max(1.0625rem, 10px);
    height: 110%;
    letter-spacing: 0.1em;
    line-height: 1;
    padding-block: 1.5rem;
    padding-inline: 1.25rem 0.3125rem;
    position: relative;
    text-orientation: upright;
    writing-mode: vertical-lr;
    z-index: 10;
  }
  .p-product-performance__label-item .u-pc {
    display: none;
  }
  .p-product-performance__label-item .u-sp {
    display: inline-block;
  }
  .p-product-performance__label-item:nth-child(2),
  .p-product-performance__label-item:nth-child(3) {
    background: linear-gradient(180deg, #80BDE0 0%, #0078BE 100%);
  }
  .p-product-performance__label-item:not(:first-child) {
    height: 117%;
    margin-left: revert;
    margin-top: -0.625rem;
  }
  .p-product-performance__label-item:nth-child(2) {
    z-index: 2;
  }
  .p-product-performance__label-item:nth-child(3) {
    z-index: 1;
  }
  .p-product-performance__label-item:nth-child(4) {
    z-index: 0;
  }
  .p-product-performance__flow-list {
    grid-row: span 4;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: subgrid;
  }
  .p-product-performance__flow-item {
    min-height: 11.25rem;
    padding: 1.78125rem 2.375rem;
  }
  .p-product-performance__flow-item:first-child {
    padding-top: 2.375rem;
  }
  .p-product-performance__flow-img img {
    min-height: 8.125rem;
  }
  .p-product-performance__note {
    font-size: max(0.625rem, 10px);
    margin-left: -1.25rem;
    margin-right: -0.75rem;
    margin-top: 3.1875rem;
  }
  .p-product-performance__flow-item-text {
    bottom: -2.5rem;
    font-size: max(0.6875rem, 10px);
    gap: 0.625rem;
    left: 48%;
    padding-top: revert;
    top: revert;
    transform: translateX(-50%);
    width: 4.75rem;
  }
  .p-product-performance__flow-item-text::after {
    transform: rotate(90deg);
    width: 0.875rem;
  }
  .p-product-performance__case {
    margin-top: 3.125rem;
  }
  .p-product-performance__case-title.c-case-title {
    padding-inline: revert;
  }
  .p-product-performance__case-body {
    gap: 0.9375rem;
    grid-template-columns: 1fr;
    margin-top: 1.8125rem;
    padding-inline: 1.3125rem;
  }
  .p-product-performance__case-heading {
    font-size: max(1.0625rem, 10px);
  }
  .p-product-performance__case-text {
    font-size: max(0.75rem, 10px);
    margin-top: 1.25rem;
  }
  .p-product-performance__case-img figcaption {
    font-size: max(0.6875rem, 10px);
    margin-right: -0.0625rem;
    margin-top: 0.375rem;
  }
  .p-product-performance__button {
    margin-top: 2.75rem;
  }
  .p-product-usage {
    margin-top: revert;
    padding-block: 2.75rem;
  }
  .p-product-usage__head .c-section-head__text {
    margin-top: 1.6875rem;
  }
  .p-product-usage__contents {
    margin-top: 1.375rem;
  }
  .p-product-usage__contents + .p-product-usage__contents {
    margin-top: 1.75rem;
  }
  .p-product-usage__label {
    border-radius: 0.9375rem 0.9375rem 0 0;
    font-size: max(1.0625rem, 10px);
    gap: 0.75rem;
    padding: 0.3125rem 1.5625rem;
    width: 84.9462365591%;
  }
  .p-product-usage__label span {
    font-size: max(0.75rem, 10px);
    padding-left: 0.625rem;
  }
  .p-product-usage__contents-inner {
    padding-block: 1.6875rem 1.375rem;
    padding-inline: 1.375rem;
  }
  .p-product-usage__contents-inner:has(.p-product-usage__img-note) {
    padding-block: 1.625rem 3.375rem;
  }
  .p-product-usage__subtitle {
    font-size: max(1.0625rem, 10px);
  }
  .p-product-usage__text {
    font-size: max(0.75rem, 10px);
    margin-top: 0.8125rem;
  }
  .p-product-usage__flow-box {
    gap: 1rem;
    margin-inline: auto;
    margin-top: 1.125rem;
    max-width: 20.75rem;
    width: 100%;
  }
  .p-product-usage__flow-col {
    border-radius: 0.5rem;
    padding-block: 0.6875rem 1.0625rem;
    padding-inline: 0.875rem;
  }
  .p-product-usage__flow-title {
    font-size: max(0.6875rem, 10px);
  }
  .p-product-usage__flow-title:has(img) {
    width: 3rem;
  }
  .p-product-usage__flow-items {
    margin-top: 0.5625rem;
  }
  .p-product-usage__flow-col[data-type=cooperation] .p-product-usage__flow-item + .p-product-usage__flow-item {
    margin-top: 0.875rem;
    padding-top: 0.625rem;
  }
  .p-product-usage__flow-step {
    font-size: 0.4375rem;
  }
  .p-product-usage__flow-img {
    margin-top: 0.125rem;
    width: 66.40625%;
  }
  .p-product-usage__flow-arrow {
    right: -5.5rem;
    width: 5.5rem;
  }
  .p-product-usage__flow-arrow-text {
    font-size: 0.4375rem;
    right: -3.5625rem;
    width: 1.875rem;
  }
  .p-product-usage__flow-img[data-num="3"] .p-product-usage__flow-arrow {
    bottom: -2.5rem;
    width: 4.1875rem;
  }
  .p-product-usage__flow-img[data-num="4"] .p-product-usage__flow-arrow {
    left: -5.4375rem;
  }
  .p-product-usage__img-wrap {
    gap: 0.625rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 2rem;
  }
  .p-product-usage__img-text {
    top: 54%;
    width: 9.375rem;
  }
  .p-product-usage__img-comment {
    bottom: 0.125rem;
    font-size: max(1.0625rem, 10px);
    left: 0.4375rem;
    transform: initial;
  }
  .p-product-usage__img-note {
    font-size: max(0.625rem, 10px);
    margin-top: 0.8125rem;
  }
  .p-product-usage__button {
    margin-top: 3.75rem;
  }
  .p-recycle {
    padding-block: 3.4375rem 1.5625rem;
  }
  .p-recycle__img {
    margin-inline: auto;
    margin-top: 0.625rem;
    width: 88.7700534759%;
  }
  .p-sales-system {
    padding-top: 3.8125rem;
  }
  .p-sales-system__head .c-section-head__text {
    margin-top: 1.25rem;
  }
  .p-sales-system__lead {
    font-size: max(1.0625rem, 10px);
    margin-top: 2.875rem;
  }
  .p-sales-system__list {
    display: block;
    margin-top: 1.5rem;
  }
  .p-sales-system__list::after {
    content: none;
  }
  .p-sales-system__item {
    border-radius: 1.125rem;
    margin-inline: auto;
    padding: 1.375rem 1.875rem 0.9375rem;
    width: 88.7700534759%;
  }
  .p-sales-system__item[data-company=misawa] {
    max-width: revert;
    width: 88.7700534759%;
  }
  .p-sales-system__item[data-company=withgarden] {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
  }
  .p-sales-system__item[data-company=akitawood] {
    margin-top: 1.25rem;
  }
  .p-sales-system__logo figcaption {
    font-size: max(0.6875rem, 10px);
  }
  .p-sales-system__item[data-company=misawa] .p-sales-system__logo figcaption {
    margin-top: 0.5rem;
  }
  .p-sales-system__item[data-company=misawa] .p-sales-system__logo {
    width: 5.375rem;
  }
  .p-sales-system__item[data-company=withgarden] .p-sales-system__logo {
    width: 11.4375rem;
  }
  .p-sales-system__item[data-company=akitawood] .p-sales-system__logo {
    width: 3.75rem;
  }
  .p-sales-system__body {
    margin-top: 0.375rem;
    padding-top: 0.4375rem;
  }
  .p-sales-system__title {
    font-size: max(0.75rem, 10px);
  }
  .p-sales-system__dl {
    font-size: max(0.75rem, 10px);
  }
  .p-sales-system__dt {
    width: 4.5625rem;
  }
  .p-sales-system__row:last-child {
    margin-top: 0rem;
  }
  .p-sales-system__button {
    margin-top: 0.625rem;
  }
  .p-sales-system__button .c-button {
    border-width: 1px;
    font-size: 0.625rem;
    padding-block: 0.1875rem 0.3125rem;
    padding-inline: 2.75rem;
  }
  .p-sustainable-material {
    padding-block: 3rem 4.1875rem;
  }
  .p-sustainable-material__title {
    font-size: max(1.0625rem, 10px);
    line-height: 1.7;
  }
  .p-sustainable-material__contents {
    margin-top: 1.5rem;
  }
  .p-sustainable-material__contents[data-type=feature] {
    margin-top: 2.625rem;
  }
  .p-sustainable-material__sub-title.c-case-title {
    font-size: max(1.0625rem, 10px);
    padding: 0.375rem 1.25rem;
    width: 88.7700534759%;
  }
  .p-sustainable-material__sub-intro {
    font-size: max(0.75rem, 10px);
    margin-top: 0.9375rem;
  }
  .p-sustainable-material__list {
    margin-top: 3.5rem;
    width: 88.7700534759%;
  }
  .p-sustainable-material__item {
    align-items: center;
    gap: 0.625rem 0.8125rem;
    grid-template-columns: 5rem 1fr;
  }
  .p-sustainable-material__item:nth-child(2) {
    margin-top: 1.8125rem;
  }
  .p-sustainable-material__item:nth-child(3) {
    margin-top: 1.8125rem;
  }
  .p-sustainable-material__item:nth-child(4) {
    margin-top: 4.0625rem;
  }
  .p-sustainable-material__label {
    font-size: max(0.8125rem, 10px);
    grid-area: 1/1/2/2;
    outline: 1px solid #fff;
    outline-offset: -0.1875rem;
  }
  .p-sustainable-material__body {
    display: contents;
  }
  .p-sustainable-material__heading {
    font-size: max(1.0625rem, 10px);
    grid-area: 1/2/2/3;
    padding-top: 0;
  }
  .p-sustainable-material__text {
    font-size: max(0.75rem, 10px);
    grid-area: 2/1/3/3;
    margin-top: 0.625rem;
  }
  .p-sustainable-material__img-list {
    grid-area: 3/1/4/3;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 1rem;
  }
  .p-sustainable-material__button {
    grid-area: 4/1/5/3;
    margin-inline: auto;
    margin-top: 0.625rem;
  }
  .p-sustainable-material__button .c-button {
    padding-inline: 1.5625rem 2.8125rem;
  }
  .p-sustainable-material__note {
    font-size: 0.5625rem;
    grid-area: 3/1/4/3;
    margin-top: 0;
  }
  .p-sustainable-material__cert {
    margin-top: 2.75rem;
    padding: 1.5625rem 1.25rem 0.625rem;
  }
  .p-sustainable-material__cert-title.c-case-title {
    font-size: max(1.0625rem, 10px);
    padding: 0 0.625rem;
    width: 100%;
  }
  .p-sustainable-material__cert-list {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.5625rem;
    row-gap: 0.9375rem;
  }
  .p-sustainable-material__cert-item {
    grid-template-rows: 2.9375rem 1fr;
    row-gap: 0.375rem;
  }
  .p-sustainable-material__cert-text {
    font-size: max(0.75rem, 10px);
    padding-bottom: 0.8125rem;
  }
  .p-sustainable-material__cert-img {
    margin-top: 0;
    max-width: 6.375rem;
    min-height: 9.5625rem;
  }
  .p-sustainable-material__cert-item:nth-child(1) .p-sustainable-material__cert-img {
    max-width: 6.875rem;
  }
  .p-sustainable-material__cert-item:nth-child(4) .p-sustainable-material__cert-img {
    max-width: 5.375rem;
  }
  .p-sustainable-material__cert-item:nth-child(5) .p-sustainable-material__cert-img {
    max-width: 5rem;
  }
  .p-sustainable-material__contents[data-type=feature] .p-sustainable-material__heading {
    margin-top: 1.25rem;
  }
  .p-sustainable-material__contents[data-type=feature] .p-sustainable-material__sub-intro {
    margin-top: 1.375rem;
    padding-inline: 1.25rem;
  }
  .p-sustainable-material__feature-list {
    gap: 2.375rem;
    grid-template-columns: repeat(1, 1fr);
    margin-top: 1.5rem;
    padding-inline: 1.25rem;
  }
  .p-sustainable-material__feature-img figcaption {
    font-size: max(1.0625rem, 10px);
    margin-top: 0.3125rem;
  }
  .p-sustainable-material__feature-button {
    margin-top: 2.375rem;
  }
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}

@media screen and (max-width: 480px){
  .layout-container {
    min-width: 0;
  }
  .layout-container footer {
    font-size: 13px;
    line-height: 1.5;
  }
  .layout-container .footer_sp {
    padding-top: 15px;
  }
}

@media (max-width: 400px){
  .p-history__timeline {
    padding-inline: 0;
  }
}

@media screen and (max-width: 375px){
  html {
    font-size: 4.2666666667vw;
  }
}

@media{
  img {
    image-rendering: -webkit-optimize-contrast;
  }
}

@media (any-hover: hover){
  .c-button-brown:hover::before {
    opacity: 0.2;
  }
  .c-button:hover {
    color: #CC6600;
    opacity: 1;
  }
  .p-sales-system__item[data-company=misawa] .p-sales-system__button .c-button:hover,
  .p-sales-system__item[data-company=misawa] .p-sales-system__button .c-button:hover span {
    color: #0078BE;
  }
  .p-sales-system__item[data-company=withgarden] .p-sales-system__button .c-button:hover,
  .p-sales-system__item[data-company=withgarden] .p-sales-system__button .c-button:hover span {
    color: #17706B;
  }
  .p-sales-system__item[data-company=akitawood] .p-sales-system__button .c-button:hover,
  .p-sales-system__item[data-company=akitawood] .p-sales-system__button .c-button:hover span {
    color: #03B985;
  }
}

@media (hover: hover){
  a:hover {
    opacity: 0.7;
  }
}

@media (hover: none){
  a:active {
    opacity: 0.7;
  }
}