@charset "UTF-8";
:root {
  --viewport-width: min(100vw, 1600px);
  --b: calc(var(--viewport-width) / 160);
}

#plastics .commonDivisions__list__item.plastics {
  display: none;
}
#plastics .preface__wrapper {
  padding-top: max(12rem, 70px);
  padding-top: max(8rem, 50px);
}
#plastics .preface__image {
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
  width: 100%;
  min-height: 300px;
  aspect-ratio: 256/93;
  margin-bottom: max(4rem, 30px);
}
@media screen and (max-width: 550px) {
  #plastics .preface__image {
    min-height: 200px;
  }
}
#plastics .preface__image img {
  width: 100%;
  height: 100%;
  object-position: 30%;
}
#plastics .preface h4 {
  font-size: max(2rem, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: max(1rem, 10px);
}
#plastics .lineup__wrapper {
  padding-top: max(8rem, 50px);
}
#plastics .lineup__title {
  color: #fff;
  font-size: max(3rem, 22px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  display: block;
  width: 100%;
  padding: max(2.5rem, 20px) max(4.5rem, 20px);
  margin-bottom: max(5.5rem, 30px);
  background: linear-gradient(300deg, #30B8D8, #389A60 60%, #3A9447);
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
}
#plastics .lineup__content {
  display: grid;
  gap: max(15.5rem, 70px);
}
#plastics .lineup__item__inner {
  display: flex;
  justify-content: space-between;
  gap: max(6rem, 30px);
}
@media screen and (max-width: 768px) {
  #plastics .lineup__item__inner {
    flex-direction: column;
  }
}
#plastics .lineup__item__text {
  flex: 1;
}
#plastics .lineup__item__text h4 {
  color: #3A9447;
  font-size: max(2rem, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: max(2rem, 15px);
  padding-bottom: max(2rem, 15px);
  border-bottom: max(0.2rem, 2px) solid #3A9447;
}
#plastics .lineup__item__text h5 {
  font-size: max(2rem, 16px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin-bottom: max(2rem, 1.5px);
}
#plastics .lineup__item__text p {
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
}
#plastics .lineup__item__text ol li {
  position: relative;
  padding-left: 1em;
}
#plastics .lineup__item__text ol li::before {
  content: "・";
  position: absolute;
  top: 1em;
  left: 0;
  color: inherit;
  font-size: 1em;
  line-height: 1;
  transform: translateY(-50%);
}
#plastics .lineup__item__text__kind {
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  padding: max(2rem, 15px);
  margin-top: max(3rem, 25px);
  border-radius: max(1rem, 10px);
  border: max(0.1rem, 1px) solid #3A9447;
}
#plastics .lineup__item__image {
  flex-shrink: 0;
  align-self: stretch;
  position: relative;
  width: max(64rem, 300px);
  border-radius: max(0.6rem, 6px);
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  #plastics .lineup__item__image {
    width: 100%;
    height: auto;
    aspect-ratio: 5/2;
  }
}
@media screen and (max-width: 550px) {
  #plastics .lineup__item__image {
    aspect-ratio: 5/3;
  }
}
#plastics .lineup__item__image::before {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 20px rgba(58, 148, 71, 0.31);
}
#plastics .lineup__item__image img {
  width: 100%;
  height: 100%;
}
#plastics .lineup__item__list {
  --gap: max(5rem, 20px);
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: repeat(3, 1fr);
  gap: max(5rem, 40px) max(var(--gap));
  margin-top: max(6.5rem, 30px);
}
@media screen and (max-width: 768px) {
  #plastics .lineup__item__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 550px) {
  #plastics .lineup__item__list {
    grid-template-columns: 1fr;
  }
}
#plastics .lineup__item__list__material {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
}
#plastics .lineup__item__list__material h4 {
  font-size: max(1.6rem, 13px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.05em;
  padding-bottom: max(1.5rem, 15px);
  margin-bottom: max(1.5rem, 15px);
  border-bottom: max(0.2rem, 2px) dotted #3A9447;
}
#plastics .lineup__item__list__material p {
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
}
#plastics .lineup__item__list__material__exp {
  margin-top: max(2.5rem, 20px);
  border: max(0.1rem, 1px) solid #3A9447;
  border-radius: max(1rem, 10px);
  overflow: hidden;
}
#plastics .lineup__item__list__material__exp b {
  display: block;
  font-size: max(1.6rem, 13px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  padding: max(2rem, 15px) max(2rem, 15px);
  background: #F6F7F5;
}
#plastics .lineup__item__list__material__exp p {
  padding: max(1.5rem, 15px) max(2rem, 15px);
}