@charset "UTF-8";

iframe{
  width: 100%;
  height: 378px;
}

@media screen and (min-width: 769px) {
  .contentsTtl{
    max-width: 1000px;
  }
}

@media screen and (max-width: 768px) {
  iframe{
    height: 212px;
  }
}

/* area
---------------------------------------------- */
.area{}
.areaWrap{
  padding-block: 150px;
}
.area + .area .areaWrap{
  border-top: 1px solid #999;
}
.areaBox{
  display: grid;
  grid-template-columns: calc(300 / 1000 * 100%) calc(570 / 1000 * 100%);
  gap: 30px calc(130 / 1000 * 100%);
  max-width: 1000px;
  margin: 60px auto 0;
}
.areaBox:nth-of-type(even){
  grid-template-columns: calc(570 / 1000 * 100%) calc(300 / 1000 * 100%);
}
.areaBox + .areaBox{
  margin-top: 150px;
}
.area__name{
  font-size: clamp(20px, 0.72rem + 1.09vw, 28px);
  font-weight: 600;
  letter-spacing: 0.15em;
}
.area__address{
  font-size: clamp(14px, 0.38rem + 0.83vw, 16px);
  line-height: 2.5;
  margin-top: 1.5em;
  text-align: left;
}
.area__address .small{
  font-size: 87.5%;
}
.area__btn{
  grid-area: 2/1/2/3;
  max-width: 300px;
}
.areaBox:nth-of-type(even) .area__btn{
  grid-area: 2/2/3/3;
}
.plastic .area__btn{
  background-color: rgb(var(--color-blue));
}
.areaImg{
  grid-area: 1/2/3/3;
}
.areaBox:nth-of-type(even) .areaImg{
  grid-area: 1/1/3/2;
}

@media screen and (max-width: 960px) {
  .areaBox{
    gap: 30px calc(100 / 1000 * 100%);
  }
  .area__btn{
    max-width: 250px;
  }
}

@media screen and (max-width: 768px) {
  .areaWrap{
    padding-block: 80px;
  }
  .areaBox{
    display: block;
    max-width: 560px;
    margin-top: 35px;
  }
  .areaBox:nth-of-type(even){
    flex-direction: column;
  }
  .areaBox + .areaBox{
    margin-top: 75px;
  }
  .areaHead{
    width: 100%;
  }
  .area__name{
  }
  .area__address{
    line-height: 2.2;
  }
  .area__address .small{
    font-size: 100%;
  }
  .area__btn{
    max-width: 250px;
    margin-top: 30px;
    margin-inline: auto;
  }
  .areaImg{
    width: 100%;
    margin-top: 25px;
  }
}

/* plastic
---------------------------------------------- */
.plastic__ttl{
  width: 100%;
}

/* medical
---------------------------------------------- */
.medical{}
.medical .areaBox{
  grid-template-columns: calc(400 / 1000 * 100%) calc(570 / 1000 * 100%);
  gap: 30px calc(30 / 1000 * 100%);
  margin-top: 0;
}
.medical .area__btn{
  background-color: rgb(var(--color-pink));
  margin-top: auto;
}

@media screen and (max-width: 768px) {
  .medical .areaHead{
    width: 100%;
  }
  .medical .area__btn{
    margin-top: 30px;
  }
}

/* labo
---------------------------------------------- */
.labo{}
.labo__txt{
  max-width: 1000px;
  margin-top: 2em;
}
.equipment{
  max-width: 1000px;
  margin-top: 50px;
}
.equipmentList{
  gap: 30px;
}
.equipmentList > li{
  border-color: rgb(var(--color-orange));
  color: rgb(var(--color-orange));
}

@media screen and (max-width: 768px) {
  .labo .areaWrap{
    padding-bottom: 0;
  }
  .labo__ttl{
    width: 100%;
  }
  .labo__txt{
    width: 100%;
    max-width: 560px;
    margin-top: 1.5em;
  }
  .equipment{
    width: 100%;
    max-width: 560px;
    margin-top: 20px;
  }
  .equipmentList{
    border: 1px solid rgb(var(--color-orange));
  }
}