@charset "UTF-8";
:root {
  --inner-scale: 1;
  --vw-base: calc(1440 / var(--inner-scale));
  --inner: 1280;
  --inner-1305: 1305;
  --fz-ratio: 1; /* font-size倍率 */
}
@media screen and (max-width: 1024px) {
  :root {
    --inner-scale: calc(0.9 / (1280 / 1440));
    --fz-ratio: 1.57;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --vw-base: 375;
    --inner-scale: 1;
    --inner: 343;
    --fz-ratio: 1;
  }
}

/* ===============================
  建材事業
=============================== */
.architectural-material--hero {
  background: url(../img/architectural-material/fv.png) no-repeat center center/cover;
}

/*------------------------------
about
------------------------------*/
.about {
  padding: min( 150 * 100vw / var(--vw-base) , 150/var(--vw-base) * 1440px ) 0 min( 270 * 100vw / var(--vw-base) , 270/var(--vw-base) * 1440px );
  position: relative;
  background: #E5E8EB;
}
.about::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  background: url(../img/architectural-material/about_img01.jpg) no-repeat center center/cover;
  aspect-ratio: 1408/1684;
  width: 49%;
  height: 100%;
}
.about::after {
  content: "";
  position: absolute;
  background: url(../img/dec1.png) no-repeat center center/100%;
  aspect-ratio: 1223/1252;
  transform: translate(0%, 39%);
  width: min( 604 * 100vw / var(--vw-base) , 604/var(--vw-base) * 1440px );
  left: 0%;
  bottom: 0%;
}
.about > * {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .about {
    padding: min( 60 * 100vw / var(--vw-base) , 60/var(--vw-base) * 1440px ) 0 min( 60 * 100vw / var(--vw-base) , 60/var(--vw-base) * 1440px );
  }
  .about::before {
    position: relative;
    transform: unset;
    right: unset;
    top: unset;
    display: block;
    width: 91.3%;
    margin: 0 auto;
  }
  .about::after {
    width: 42%;
  }
}

.about__content {
  width: calc(547 / var(--inner) * 100%);
}
@media (max-width: 767px) {
  .about__content {
    width: 100%;
    margin-top: 10%;
  }
}

.about__description {
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 2.1875;
  margin-top: 4.375em;
}
@media (max-width: 767px) {
  .about__description {
    margin-top: 2em;
  }
}

/*------------------------------
procurement
------------------------------*/
.procurement {
  background: url(../img/architectural-material/procurement_bg.jpg) no-repeat center center/cover;
  padding: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px ) 0 min( 130 * 100vw / var(--vw-base) , 130/var(--vw-base) * 1440px );
  position: relative;
  margin-top: min( 280 * 100vw / var(--vw-base) , 280/var(--vw-base) * 1440px );
  z-index: 10;
}
@media (max-width: 767px) {
  .procurement {
    padding: min( 50 * 100vw / var(--vw-base) , 50/var(--vw-base) * 1440px ) 0;
    margin-top: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px );
  }
}

.procurement__en {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-98%);
  width: 100%;
}

.procurement__logo {
  width: calc(160 / var(--inner) * 100%);
  margin: 0 auto;
}

.procurement__title {
  font-size: min( (24 * 100vw / var(--vw-base)) * var(--fz-ratio) , 24/var(--vw-base) * 1440px );
  font-weight: 600;
  line-height: 1.4583333333;
  color: #fff;
  text-align: center;
  margin-top: 1em;
}

.procurement__message {
  width: calc(626 / var(--inner) * 100%);
  margin: 0 auto;
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 2.1875;
  color: #fff;
  text-align: center;
  margin-top: 1.563em;
}
@media (max-width: 767px) {
  .procurement__message {
    width: 100%;
    font-size: min( (14 * 100vw / var(--vw-base)) * var(--fz-ratio) , 14/var(--vw-base) * 1440px );
  }
}

.procurement__list {
  width: calc(886 / var(--inner) * 100%);
  margin: 0 auto;
  margin-top: calc(80 / var(--inner) * 100%);
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .procurement__list {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .procurement__list {
    width: 100%;
    display: block;
    margin-top: calc(40 / var(--inner) * 100%);
  }
}

.procurement__item {
  width: 44.35%;
}
.procurement__item a {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: min( (20 * 100vw / var(--vw-base)) * var(--fz-ratio) , 20/var(--vw-base) * 1440px );
  font-weight: 600;
  line-height: 1.75;
  background: #fff;
  padding: 1.5em;
  position: relative;
}
.procurement__item a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5em;
  transform: translateY(-50%);
  background: url(../img/icon_arrow_blue.png) no-repeat center center/contain;
  width: 1.5em;
  aspect-ratio: 1/1;
}
@media (max-width: 767px) {
  .procurement__item {
    width: 100%;
  }
  .procurement__item:nth-child(n+2) {
    margin-top: min( 20 * 100vw / var(--vw-base) , 20/var(--vw-base) * 1440px );
  }
  .procurement__item a {
    font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  }
}

.procurement__item-icon {
  width: 3em;
  margin-right: 0.85em;
}

/*------------------------------
construction
------------------------------*/
.construction {
  padding-top: min( 140 * 100vw / var(--vw-base) , 140/var(--vw-base) * 1440px );
}
@media (max-width: 1024px) {
  .construction {
    overflow: hidden;
  }
}
@media (max-width: 767px) {
  .construction {
    padding-top: min( 70 * 100vw / var(--vw-base) , 70/var(--vw-base) * 1440px );
  }
}

.construction__wrapper {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1024px) {
  .construction__wrapper {
    display: block;
  }
}

.construction__header {
  width: calc(566 / var(--inner) * 100%);
  position: relative;
}
.construction__header::before {
  content: "";
  position: absolute;
  background: url(../img/dec4.png) no-repeat center center/100%;
  aspect-ratio: 2057/2154;
  transform: translate(-59%, -51%);
  width: 180%;
  left: 50%;
  top: 50%;
}
.construction__header > * {
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 1025px) {
  .construction__header {
    align-self: flex-start;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}
@media (max-width: 1024px) {
  .construction__header {
    width: 100%;
  }
  .construction__header::before {
    transform: translate(-50%, -51%);
    width: 150%;
    left: 50%;
    top: 50%;
  }
}

.construction__message {
  width: 80%;
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 2.1875;
  margin-top: 3.5em;
}
@media (max-width: 767px) {
  .construction__message {
    width: 100%;
    margin-top: 2em;
  }
}

.construction__list {
  width: calc(692 / var(--inner) * 100%);
  margin-top: 11.6%;
}
@media (max-width: 1024px) {
  .construction__list {
    width: 100%;
  }
}

/*------------------------------
awards
------------------------------*/
.awards {
  padding: 22.9166666667vw 0;
  position: relative;
}
.awards::before {
  content: "";
  position: absolute;
  background: url(../img/architectural-material/awards1.png) no-repeat center center/100%;
  aspect-ratio: 1400/1006;
  transform: translate(0%, -50%);
  width: 49%;
  left: 0;
  top: 50%;
  z-index: 10;
}
.awards > .inner {
  position: relative;
  z-index: 10;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .awards::before {
    width: min( 600 * 100vw / var(--vw-base) , 600/var(--vw-base) * 1440px );
  }
}
@media (max-width: 767px) {
  .awards {
    padding: min( 270 * 100vw / var(--vw-base) , 270/var(--vw-base) * 1440px ) 0 min( 70 * 100vw / var(--vw-base) , 70/var(--vw-base) * 1440px );
    overflow: hidden;
    padding-top: 100%;
    margin-top: 10%;
  }
  .awards::before {
    top: 61vw;
    width: 91.3%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.awards-en {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: min( (174 * 100vw / var(--vw-base)) * var(--fz-ratio) , 174/var(--vw-base) * 1440px );
  color: #F3F3F3;
  position: absolute;
  top: 32%;
  right: 0%;
  transform: translate(0%, -50%);
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .awards-en {
    font-size: min( (70 * 100vw / var(--vw-base)) * var(--fz-ratio) , 70/var(--vw-base) * 1440px );
    top: 0;
    transform: translate(10%, 0);
  }
}

.awards__content {
  width: calc(570 / var(--inner) * 100%);
  margin-left: auto;
}
@media (min-width: 768px) {
  .awards__content {
    padding-right: 1%;
  }
}
@media (max-width: 1024px) and (min-width: 768px) {
  .awards__content {
    width: 53%;
  }
}
@media (max-width: 767px) {
  .awards__content {
    width: 100%;
  }
}

.awards__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.awards__badge {
  width: 27.5%;
  margin-right: 3%;
}
@media (max-width: 767px) {
  .awards__badge {
    margin-right: 5%;
  }
}

.awards__message {
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 2.1875;
  margin-top: 3em;
}
@media (max-width: 767px) {
  .awards__message {
    margin-top: 2em;
  }
}

/*------------------------------
process
------------------------------*/
.process {
  padding: min( 210 * 100vw / var(--vw-base) , 210/var(--vw-base) * 1440px ) 0;
  background: #1D2088;
  color: #fff;
}
@media (max-width: 767px) {
  .process {
    padding: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px ) 0;
  }
}

.process__content {
  width: calc(892 / var(--inner) * 100%);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .process__content {
    width: 100%;
  }
}

.process__message {
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  font-weight: 500;
  line-height: 2.1875;
  margin-top: 3.125em;
}

.process__step {
  margin-top: min( 70 * 100vw / var(--vw-base) , 70/var(--vw-base) * 1440px );
  display: flex;
  gap: 0 9.64%;
  position: relative;
}
.process__step::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: #fff;
  width: 100%;
  height: 5px;
}
@media (max-width: 767px) {
  .process__step {
    display: block;
    margin-top: min( 40 * 100vw / var(--vw-base) , 40/var(--vw-base) * 1440px );
  }
  .process__step::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 5px;
  }
}

.process__item {
  position: relative;
  width: 17.77%;
  background: #fff;
  border-radius: 50%;
  aspect-ratio: 1/1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media (max-width: 767px) {
  .process__item {
    width: calc(150 / var(--inner) * 100%);
    margin: 0 auto;
  }
  .process__item:nth-child(n+2) {
    margin-top: calc(20 / var(--inner) * 100%);
  }
}

.process__item-ja {
  display: block;
  font-size: min( (20 * 100vw / var(--vw-base)) * var(--fz-ratio) , 20/var(--vw-base) * 1440px );
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.process__item-en {
  display: block;
  font-size: min( (14 * 100vw / var(--vw-base)) * var(--fz-ratio) , 14/var(--vw-base) * 1440px );
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #727272;
  margin-top: 0.36em;
}

/*------------------------------
equipment
------------------------------*/
.equipment {
  padding: min( 250 * 100vw / var(--vw-base) , 250/var(--vw-base) * 1440px ) 0 min( 300 * 100vw / var(--vw-base) , 300/var(--vw-base) * 1440px );
}
@media (max-width: 767px) {
  .equipment {
    padding: min( 100 * 100vw / var(--vw-base) , 100/var(--vw-base) * 1440px ) 0;
  }
}

.equipment__message {
  margin-top: 2.6em;
  line-height: 2;
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
}

.equipment__item-number {
  font-size: min( (24 * 100vw / var(--vw-base)) * var(--fz-ratio) , 24/var(--vw-base) * 1440px );
  font-weight: 500;
  color: #1D2088;
  margin-top: 0.4em;
  display: flex;
  align-items: center;
}
.equipment__item-number span {
  font-size: min( (20 * 100vw / var(--vw-base)) * var(--fz-ratio) , 20/var(--vw-base) * 1440px );
  color: #9D9D9D;
  margin-left: 1.4em;
}
@media (max-width: 1024px) and (min-width: 768px) {
  .equipment__item-number {
    font-size: calc(min( (24 * 100vw / var(--vw-base)) * var(--fz-ratio) , 24/var(--vw-base) * 1440px ) / 1.57);
  }
  .equipment__item-number span {
    font-size: calc(min( (20 * 100vw / var(--vw-base)) * var(--fz-ratio) , 20/var(--vw-base) * 1440px ) / 1.57);
  }
}
@media (max-width: 767px) {
  .equipment__item-number {
    font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  }
  .equipment__item-number span {
    font-size: min( (14 * 100vw / var(--vw-base)) * var(--fz-ratio) , 14/var(--vw-base) * 1440px );
  }
}

.equipment__item-name {
  font-weight: 500;
  font-size: min( (16 * 100vw / var(--vw-base)) * var(--fz-ratio) , 16/var(--vw-base) * 1440px );
  color: #000;
  margin-top: 1em;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .equipment__item-name {
    font-size: min( (14 * 100vw / var(--vw-base)) * var(--fz-ratio) , 14/var(--vw-base) * 1440px );
  }
}

.equipment-swiper {
  overflow: hidden;
  margin-top: 5%;
  margin-left: calc(min( 72 * 100vw / var(--vw-base) , 72/var(--vw-base) * 1440px ) + max((100vw - 1440px) / 2, 0px));
}
.equipment-swiper .swiper-slide {
  padding-right: 3.5%;
}
@media (max-width: 767px) {
  .equipment-swiper .swiper-slide {
    padding-right: 10%;
  }
}

.nav-wrap {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(0%, -50%);
  width: 13%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .nav-wrap {
    width: 25%;
  }
}

.swiper-button-next, .swiper-button-prev {
  top: unset;
  bottom: unset;
  left: unset;
  right: unset;
  margin: 0;
  height: auto;
  width: auto;
  position: relative;
  background: url(../img/icon_arrow_blue.svg) no-repeat center center/100%;
  aspect-ratio: 1/1;
  width: 37%;
}
.swiper-button-next::after, .swiper-button-prev::after {
  display: none;
}

.swiper-button-prev {
  transform: scale(-1, 1);
}
/*# sourceMappingURL=architectural-material.css.map */