@charset "UTF-8";

/* ------------------ 技術力と品質力 ------------------ */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .grid-item-link {
    display: block;
    position: relative;
  }
  .grid-item-text {
    font-size: max(15px, min(3vw,20px) );
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(0, 78, 162, 0.00) 0%, rgba(0, 78, 162, 0.70) 78.61%, rgba(0, 78, 162, 0.70) 100%);
    padding: 1em 1em 10px 1em;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .grid-item-image-pc{
    display: block;
  }
  .grid-item-image-sp{
    display: none;
  }
  @media(max-width:599px) {
    .grid-container {
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }
    .grid-item-image-pc{
      display: none;
    }
    .grid-item-image-sp{
      display: block;
      width: 100%;
    }
  }

  /* ------------------ 独自の開発体制・プロセス ------------------ */
  .process-front {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .process-front .page-textarea {
    margin: auto 0;
}
.process-front .page-picture {
  margin: 0 auto;
}
.resource-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.resource-item .page-textarea {
  margin-bottom: 40px;
}
.sp-section-btn__container {
  display: none;
}
@media(max-width:740px) {
  .technology-backlink {
      padding: 30px 0 0 0;
  }
 .process-front {
      display: block;
 }
 .process-front .page-picture {
  padding: 30px;
 }
 .sp-section-btn__container {
  width: min(100%, 385px);
  margin-inline: auto;
  display: block;
}
.section-btn__container {
  display: none;
}
.resource-block {
  display: block;
}
}

 /* ------------------ 安心・安全のために ------------------ */
.safety-block__image  {
  display: flex;
}
.safety-block__image .safety-image {
  margin: 0 auto 100px ;
}
@media(min-width: 741px) {
  #sp-safety-introduction {
    display: none;
  }
}
@media(max-width: 740px) {
  .safety-block__image .safety-image {
    margin-bottom: 0;
  }
  #safety-introduction {
    display: none;
  }
}

 /* ------------------ 商品ができるまで ------------------ */
 .product-flow-box {
  display: flex;
  padding: 1rem 0 0 1rem;
}

.product-flow-title p {
  font-size: 28px;
  font-weight: 600;
  color:#153367 ;
  writing-mode: vertical-rl;
  margin: 0;
}
.product-flow-title {
  text-align: center;
}
.product-flow-subtitle p {
  font-size: 28px;
  font-weight: 600;
  color:#ffffff ;
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin: 0;
  padding: 10px;
}
.product-flow-subtitle {
  display: block;
  background:linear-gradient(180deg, rgba(20,50,102) 84%, rgba(20,50,102,0));
  height: 682px;
}
.product-flow-contents {
  display: flex;
}
.product-flow-box .page-textarea {
  margin-left: 1rem;
}
.product-flow-box .page-textarea p {
  margin: 0;
}
.product-flow-contents {
  margin-bottom: 5rem;
}
.figure-sp {
  display: none;
}
@media(max-width: 740px) {
  .product-flow-box {
    display: block;
  }
  .product-flow-title p {
    font-size: 15px;
    padding: 0.5rem 0.3rem 5rem;
  }
  .product-flow-subtitle p {
    font-size: 15px;
    padding: 0.5rem 0;
  }
  .product-flow-subtitle {
    height: 917px;
  }
  .product-flow-box img {
    width: 120px;
    height: 78px;
  }
  .product-flow-box .page-textarea {
    margin: 0;
  }
  .product-flow-box .page-textarea p {
    font-size: 15px;
  }
  .product-flow-contents {
    margin-bottom: 0;
  }
  .figure-pc {
    display: none;
  }
  .figure-sp {
    display: block;
  }
}

 /* ------------------ 市場に不良を出さない体制 ------------------ */
 .picture-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
 }
@media (max-width: 740px) {
  .picture-box {
    display: block;
  }
}
 /* ------------------ 設計品質評価 ------------------ */
.subtitle-box {
  height: 6rem;
  background: #F8FBFE;
  display: flex;
}
.subtitle-box .section-subtitle {
  display: block;
  margin: auto 0;
}
.assessment-contents {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
.item-subtitle {
  font-size: 1rem;
}
.assessment-item .item-title {
  background: #153367;
  color: #fff;
  padding: 0.5em 1.5rem;
  display: inline-block;
  border-radius: 5px;
  margin: 0.5rem auto;
}
.assessment-movie iframe {
  aspect-ratio: 5 / 3;
  display: flex;
  margin: 2.5rem auto;
}
.assessment-contents .assessment-item {
  display: block;
  box-shadow: 5px 10px 30px  rgba(0, 0, 0, 0.05);
}
.assessment-item .assessment-item-inner {
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 740px) {
  .assessment-contents {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .assessment-item-inner .page-textarea p {
    margin: 0;
    padding: 1rem 0;
  }
  .assessment-movie iframe {
    width: 100%;
  }
}