/*=======================
  一貫生産システム
==========================*/

/*===============
  ページ概要
===============*/
.system-top-section .text-container {
  text-align: center;
  padding: 100px 30px 60px 30px;
  max-width: 1200px;
}

.system-top-section .text-wrapper {
  margin-bottom: 50px;
}

.top-img-wrapper {
  width: 80%;
  margin: 0 auto;
}

.top-img-wrapper img {
  object-fit: cover;
  width: 100%;
}

/*===============
  システムフロー
===============*/
.system-flow-section > section:first-of-type {
  padding-bottom: 0;
}

.system-flow-section > section:not(:first-of-type) {
  padding-top: 0;
  padding-bottom: 0;
}

.system-flow-sub-section {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

.system-flow-sub-section .system-flow-sub-title-wrapper {
  font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", HGS明朝E, メイリオ, Meiryo, serif;
  color: #c1d5b6;
}

.material-flow-section .system-flow-sub-container {
  height: 310px;
}

.system-flow-sub-section a {
  text-decoration: none;
}

.system-flow-arrow-container {
  display: flex;
  justify-content: space-between;
}

.system-flow-two-thirds-arrow-container {
  display: flex;
  justify-content: center;
}

.system-flow-single-container {
  width: 100%;
  margin: 0 auto;
}

.system-flow-sub-single-wrapper {
  text-align: center;
  padding: 20px 0;
}

.system-flow-sub-two-thirds-wrapper {
  text-align: center;
  padding: 20px 0;
}

.system-flow-sub-double-wrapper {
  width: 410px;
  background-color: #afd8b1;
  color: #313131;
  text-align: center;
}

.system-flow-double-1row-mos-green-wrapper {
  padding: 20px 0px;
}

.system-flow-double-2row-mos-green-wrapper {
  padding: 44px 0px;
}

.system-flow-double-4row-mos-green-wrapper {
  padding: 20px 0px;
  position: relative;
}

.system-flow-sub-triple-wrapper {
  width: 100%;
  text-align: center;
}

.system-flow-triple-1row-mos-green-wrapper {
  padding: 20px 0px;
}

.system-flow-green-wrapper {
  background-color: #439247;
  color: #ffffff;
}

.system-flow-mos-green-wrapper {
  background-color: #afd8b1;
  color: #313131;
}

.system-flow-sub-section .system-flow-sub-title-wrapper h2 {
  font-size: 3rem;
  font-weight: bold;
}

.system-flow-sub-section .system-flow-sub-title-wrapper p {
  font-size: 2.25rem;
  font-style: italic;
  line-height: 2rem;
}

.system-flow-sub-container {
  position: relative;
  width: 100%;
  padding: 0 10px;
}

.casting-flow-section .system-flow-sub-container {
  height: 275px;
  position: relative;
}

.shape-flow-section .system-flow-sub-container {
  height: 235px;
}

.base-flow-section .system-flow-sub-container {
  height: 235px;
}

.treatment-flow-section .system-flow-sub-container {
  height: 250px;
}

.packing-flow-section .system-flow-sub-container {
  height: 470px;
}

.system-flow-sub-body-wrapper {
  width: 80%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  top: 10px;
}

/* フロー表の開始位置 */
.material-flow-section .system-flow-sub-body-wrapper {
  top: 80px;
}

.packing-flow-section
  .system-flow-sub-body-wrapper
  .system-flow-sub-two-thirds-wrapper {
  width: 65%;
}

.system-flow-double-container {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}

.system-flow-triple-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.system-flow-triple-container {
  width: 30%;
}

.system-flow-two-thirds-container {
  display: flex;
  justify-content: end;
}

.tag > div {
  position: absolute;
  color: #439247;
  width: 185px;
  background-color: #ffffff;
  border: 2px solid #439247;
  text-align: center;
  right: -10%;
}

.tag .wooden-production {
  top: -44%;
}

.tag .composition-analysis-test {
  bottom: -20%;
}

.tag p {
  margin: 0 auto;
  padding: 8px 0;
}

.system-flow-arrow-img {
  width: 37px;
  margin: 12px auto;
}

.system-flow-arrow-img img {
  object-fit: cover;
  width: 100%;
}

.system-flow-arrow-img.a-little-left {
  position: relative;
}

.system-flow-arrow-img.a-little-left img {
  position: absolute;
  bottom: 20%;
  left: -220%;
  width: 150%;
}

.system-flow-arrow-img.kumitate img {
  margin-left: -55px;
}

/*===============
  システムフロー詳細
===============*/
.description-cover-section {
  padding-bottom: 100px;
}

#specialSkillSection .h2-title-classic {
  padding-bottom: 20px;
}

.h2-title-classic p.title-number {
  font-size: 1.8rem;
  font-style: italic;
  line-height: 2rem;
  margin-left: 4px;
}

#assemblyInspectionPacking {
  padding-bottom: 100px;
}

.description-section-body-container {
  margin: 50px auto 0 auto;
  display: flex;
  justify-content: space-between;
}

#casting .description-section-body-container {
  margin: 10px auto 0 auto;
  display: inline-block;
}

.description-section {
  padding: 0 30px;
}

#material .description-section-body-text-wrapper {
  width: 60%;
}

.description-section-body-text-wrapper {
  margin-top: 20px;
  width: 100%;
}

#material .description-img-are {
  width: 50%;
  padding-left: 20px;
}

#assemblyInspectionPacking .description-img-are {
  width: 100%;
}

#shapeProcessing .description-img-are,
#baseProcessing .description-img-are {
  width: 100%;
}

.description-img-are img {
  width: 100%;
}

#material .description-img-are img {
  object-fit: contain;
}

#assemblyInspectionPacking .description-img-are img,
#surfaceTreatment .description-img-are img {
  object-fit: contain;
  aspect-ratio: 7 / 6;
}

#shapeProcessing .description-img-are img,
#baseProcessing .description-img-are img {
  object-fit: cover;
}

#casting .description-container .description-section-body-container {
  padding: 0 30px 20px 30px;
}

/* ■■■■ */
/* ■■■■　description-section-body-pdf */
/* ■■■■ */
.description-section-body-pdf {
  margin-top: 50px;
}

.description-section-body-pdf .pdf-file-link-container {
  display: flex;
  justify-content: left;
}

.description-section-body-pdf .pdf-file-link-container .pdf-icon {
  width: 50px;
  margin-left: 10px;
}

.description-section-body-pdf .pdf-file-link-container .pdf-icon img {
  object-fit: contain;
  width: 25px;
  height: 25px;
}

.description-section-body-pdf .pdf-file-link-container .pdf-file-link {
  color: #598d64;
  text-decoration: underline;
}

.description-section-body-pdf .pdf-file-link-container {
  margin-bottom: 15px;
}

.second-description-section {
  margin: auto;
  padding-bottom: 0;
}

.second-description-container:not(:first-of-type) {
  margin-top: 50px;
}

.second-description-section-body-container {
  margin: 40px auto 0 auto;
  padding: 0 50px;
  width: 100%;
}

.vacuum-seald-moldinngu-process-text {
  margin-top: 40px;
  margin-left: 25px;
}

.second-description-section .second-description-section-body-img-wrapper {
  margin: 50px auto 0 auto;
  padding: 0 30px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}

.second-description-section .second-description-section-body-img-wrapper img {
  object-fit: cover;
  width: 100%;
}

.description-section-body-container {
  padding: 0 50px;
}

#material .description-img-are {
  width: 60%;
}

#shapeProcessing .description-img-are,
#baseProcessing .description-img-are,
#surfaceTreatment .description-img-are,
#assemblyInspectionPacking .description-img-are {
  padding-left: 20px;
  width: 100%;
}

.second-description-section .second-description-section-body-img {
  width: 100%;
}

.second-description-section .second-description-section-body-img img {
  width: 100%;
  object-fit: cover;
}

.second-description-section .second-description-section-body-img img {
  object-fit: contain;
}

.third-description-section {
  padding: 0 40px;
}

.third-description-section .third-description-section-body-container {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
}

.third-description-section .third-description-section-body-text {
  width: 50%;
  padding-right: 30px;
}

.third-description-section .third-description-section-text {
  padding: 20px 30px;
}

.third-description-section-mockup-production-img-wrapper {
  width: 50%;
  display: flex;
  gap: 10px;
}

.third-description-section-mockup-production-img-wrapper
  .mockup-production-img1 {
  width: 100%;
}

.third-description-section-mockup-production-img-wrapper
  .mockup-production-img2 {
  width: 100%;
}

.third-description-section-mockup-production-img-wrapper img {
  object-fit: contain;
  width: 100%;
}

.forth-description-section {
  margin-top: 50px;
}

.forth-description-section-body-container {
  margin: 30px auto 0 auto;
  padding: 0 30px;
}

.forth-description-section-mockup-production-img {
  width: 100%;
  margin-top: 30px;
}

.forth-description-section-mockup-production-img img {
  object-fit: contain;
  width: 100%;
  aspect-ratio: 7 / 1;
}

.system-flow-sub-section .system-flow-sub-section-btn {
  transition: all 0.5s;
}

.system-flow-sub-section
  .system-flow-sub-section-btn:hover
  .system-flow-sub-container {
  opacity: 0.7;
  background-color: #e6f5e8;
}

.description-section .description-container {
  padding-top: 100px;
}

#material .third-description-section .third-description-container {
  margin-top: 50px;
}

.list-setting {
  padding-left: 18px;
}

@media (max-width: 960px) {
  .system-top-section .text-container {
    padding: 50px 0;
    margin: 0 auto;
  }

  .system-top-section .text-wrapper {
    margin-bottom: 30px;
  }

  .system-top-section .text-wrapper p:last-of-type {
    margin-bottom: 30px;
  }

  .description-section-body-container {
    padding: 0 30px;
  }

  .description-section-body-text-wrapper {
    margin-top: 0;
  }

  #material .description-section-body-pdf {
    margin-top: 30px;
  }

  .system-top-section p {
    font-size: 0.9rem;
    line-height: 1.6rem;
  }

  .system-top-section .text-container {
    padding: 50px 10px;
  }

  .system-flow-double-container {
    gap: 30px;
  }

  .system-flow-triple-wrapper {
    gap: 15px;
  }

  .system-flow-sub-section {
    max-width: 620px;
  }

  .system-flow-sub-section .system-flow-sub-title-wrapper h2 {
    font-size: 2rem;
  }

  .system-flow-sub-section .system-flow-sub-title-wrapper p {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  .system-flow-double-1row-mos-green-wrapper,
  .system-flow-triple-1row-mos-green-wrapper,
  .system-flow-sub-single-wrapper,
  .system-flow-sub-two-thirds-wrapper,
  .system-flow-double-4row-mos-green-wrapper {
    padding: 12px 0px;
  }

  .system-flow-double-2row-mos-green-wrapper {
    padding: 34px 0px;
  }

  .system-flow-arrow-img {
    width: 26px;
    margin: 8px auto;
  }

  .material-flow-section .system-flow-sub-container {
    height: 220px;
  }

  .casting-flow-section .system-flow-sub-container {
    height: 200px;
  }

  .shape-flow-section .system-flow-sub-container,
  .base-flow-section .system-flow-sub-container,
  .treatment-flow-section .system-flow-sub-container {
    height: 160px;
  }

  .packing-flow-section .system-flow-sub-container {
    height: 320px;
  }

  /* フロー表の開始位置 */
  .system-flow-sub-body-wrapper {
    top: -5px;
  }

  .system-flow-arrow-img.kumitate img {
    margin-left: -37px;
  }

  .material-flow-section .system-flow-sub-body-wrapper {
    top: 55px;
  }

  .tag > div {
    width: 140px;
    right: -20%;
  }

  .tag .wooden-production {
    top: -35%;
  }

  .tag .composition-analysis-test {
    bottom: -18%;
  }

  .tag p {
    font-size: 0.9rem;
    padding: 5px 0 3px 0;
  }

  .description-cover-section {
    padding-bottom: 80px;
  }

  .second-description-section-body-container {
    margin-top: 30px;
  }

  .second-description-section .second-description-section-body-img-wrapper {
    margin-top: 30px;
  }

  .third-description-section .third-description-section-body-text {
    width: 100%;
  }

  .third-description-section .third-description-section-text {
    padding: 20px 20px 0 20px;
  }

  .third-description-section-body-container {
    flex-direction: column;
    align-items: center;
  }

  .third-description-section-mockup-production-img-wrapper {
    padding-top: 50px;
    width: 80%;
  }

  .third-description-section
    .forth-description-section
    .forth-description-container {
    margin-top: 50px;
  }

  .third-description-section .third-description-section-body-container {
    margin-top: 30px;
    padding: 0 20px;
  }

  #assemblyInspectionPacking {
    padding-bottom: 50px;
  }

  .h2-title-classic p.title-number {
    font-size: 1.6rem;
  }

  .description-section {
    padding: 0 15px;
  }

  #material .description-section-body-text-wrapper {
    font-size: 0.9rem;
  }

  #casting .description-container .description-section-body-container {
    padding: 0 20px 20px 20px;
  }

  .description-section .description-container {
    padding-top: 80px;
  }
}

@media (max-width: 800px) {
  .forth-description-section-mockup-production-img img {
    aspect-ratio: 4 / 1;
  }

  #surfaceTreatment .description-img-are img {
    aspect-ratio: 1 / 1;
  }

  #assemblyInspectionPacking .description-img-are img {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 620px) {
  .system-flow-sub-section {
    max-width: 520px;
  }

  .system-flow-double-container {
    gap: 20px;
  }

  .system-flow-triple-wrapper {
    gap: 10px;
  }

  .system-flow-sub-section .system-flow-sub-title-wrapper h2 {
    font-size: 1.6rem;
  }

  .system-flow-sub-section .system-flow-sub-title-wrapper p {
    font-size: 1.2rem;
    line-height: 1.2rem;
  }

  .system-flow-double-1row-mos-green-wrapper,
  .system-flow-triple-1row-mos-green-wrapper,
  .system-flow-sub-single-wrapper,
  .system-flow-sub-two-thirds-wrapper,
  .system-flow-double-4row-mos-green-wrapper {
    padding: 8px 0px;
  }

  .system-flow-double-2row-mos-green-wrapper {
    padding: 29px 0px;
  }

  .system-flow-arrow-img {
    width: 18px;
    margin: 6px auto;
  }

  .material-flow-section .system-flow-sub-container {
    height: 165px;
  }

  .casting-flow-section .system-flow-sub-container {
    height: 155px;
  }

  .shape-flow-section .system-flow-sub-container,
  .base-flow-section .system-flow-sub-container,
  .treatment-flow-section .system-flow-sub-container {
    height: 120px;
  }

  .packing-flow-section .system-flow-sub-container {
    height: 240px;
  }

  /* フロー表の開始位置 */
  .system-flow-sub-body-wrapper {
    width: 85%;
    top: 2px;
  }

  .material-flow-section .system-flow-sub-body-wrapper {
    top: 43px;
  }

  .system-flow-sub-body-wrapper p {
    font-size: 0.9rem;
  }

  .tag > div {
    width: 110px;
    right: -5%;
  }

  .tag .wooden-production {
    top: -35%;
    width: 85px;
  }

  .tag .composition-analysis-test {
    bottom: -18%;
  }

  .tag p {
    font-size: 0.8rem;
    padding: 5px 0 3px 0;
  }

  .description-cover-section {
    padding-bottom: 60px;
  }

  .description-section-body-text-wrapper {
    width: 100%;
  }

  .description-section-body-pdf {
    margin-top: 30px;
  }

  .third-description-section .third-description-section-text {
    padding: 20px 10px 0 10px;
  }

  .description-section-body-pdf .pdf-file-link-container {
    margin-bottom: 10px;
  }

  #material .description-img-are {
    order: 1;
  }

  #material .description-section-body-text-wrapper {
    order: 2;
    padding-top: 30px;
  }

  .description-section > .description-container:first-of-type {
    padding-top: 50px;
  }

  #material .description-img-are {
    width: 80%;
    padding-left: 0;
  }

  .description-section-body-container {
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
  }

  .second-description-section .second-description-section-body-img-wrapper {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  #shapeProcessing .description-img-are,
  #baseProcessing .description-img-are,
  #surfaceTreatment .description-img-are,
  #assemblyInspectionPacking .description-img-are {
    padding-top: 30px;
  }

  #surfaceTreatment .description-img-are {
    width: 70%;
  }

  #assemblyInspectionPacking .description-img-are {
    padding-left: 0;
    width: 80%;
  }

  .second-description-section .second-description-section-body-img-wrapper {
    margin-top: 30px;
  }

  .second-description-section-body-container {
    padding: 0 30px;
  }

  .second-description-section .third-description-section {
    padding: 0 10px;
  }

  .second-description-section
    .third-description-section
    .third-description-section-body-container {
    margin-top: 30px;
  }

  .third-description-section-mockup-production-img-wrapper {
    padding-top: 30px;
    width: 100%;
  }

  .description-section-body-container {
    padding: 0 20px;
  }

  .third-description-section .third-description-section-body-container {
    padding: 0 10px;
  }

  .forth-description-section-body-container {
    padding: 0 10px;
  }

  .h2-title-classic p.title-number {
    font-size: 1.4rem;
    line-height: 1.7rem;
  }

  .description-section {
    padding: 0 10px;
  }

  .second-description-section {
    padding: 0 10px;
  }

  #material .description-section-body-text-wrapper {
    width: 80%;
    font-size: 1rem;
  }

  .description-section .description-container {
    padding-top: 60px;
  }
}

@media (max-width: 480px) {
  .flow-br {
    display: block;
    width: 100%;
  }

  .system-flow-sub-body-wrapper {
    width: 90%;
  }

  .packing-flow-section .system-flow-sub-body-wrapper,
  .treatment-flow-section .system-flow-sub-body-wrapper {
    top: 35px;
  }

  .shape-flow-section .system-flow-sub-container,
  .base-flow-section .system-flow-sub-container {
    height: 145px;
  }

  .treatment-flow-section .system-flow-sub-container {
    height: 155px;
  }

  .packing-flow-section .system-flow-sub-container {
    height: 275px;
  }

  .tag > div {
    right: -8%;
  }

  .system-flow-arrow-img.a-little-left img {
    bottom: 30%;
    left: -250%;
    width: 200%;
  }

  .description-cover-section {
    padding-bottom: 50px;
  }

  .description-section-body-container {
    padding: 0 15px;
  }

  .second-description-section-body-container {
    margin: 30px auto 0 auto;
    padding: 0 20px;
  }

  .description-section {
    padding: 0 4px;
  }

  #material .description-section-body-text-wrapper {
    width: 90%;
  }

  #casting .description-container .description-section-body-container {
    padding: 0 15px 20px 15px;
  }

  .description-section .description-container {
    padding-top: 50px;
  }
}

@media (max-width: 400px) {
  .system-flow-sub-body-wrapper {
    width: 95%;
  }

  .system-flow-arrow-img.casting-flow-arrow img {
    margin-right: 20px;
  }

  .tag .wooden-production {
    width: 70px;
  }

  .tag > div {
    right: -2%;
  }
}