/* #region MARK:page */

.page {
  align-content: center;
  align-items: center;
  background: #ffffff;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}

/* #endregion */

/* #region MARK:hero */

.hero {
  align-content: flex-start;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0.2);
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 42px;
  height: auto;
  justify-content: center;
  padding: 64px 64px 64px 64px;
  width: 100%;
  --gap-h-hero: 0px;
  --gap-v-hero: 42px;
  max-width: 100%;
  aspect-ratio: 2/2;
}

@media (min-width: 1025px) {
  .hero {
    aspect-ratio: unset;
    height: 44rem;
  }
}

.hero:before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: brightness(80%);
  --gap-h-hero: 0px;
  --gap-v-hero: 42px;
}

.hero__inner {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 16px;
  height: auto;
  justify-content: flex-start;
  margin: 0px 0px;
  padding: 0px 0px;
  width: auto;
  --gap-h-hero__inner: 0px;
  --gap-v-hero__inner: 16px;
  max-width: 100%;
}

.hero__catch {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 1.2rem;
  height: auto;
  justify-content: flex-start;
  padding: 0px;
  width: calc(100% - (var(--gap-h-hero__inner) * 0));
  --gap-h-hero__catch: 0px;
  --gap-v-hero__catch: 8px;
  max-width: calc(100% - (var(--gap-h-hero__inner) * 0));
}

.hero__catch-line-1 {
  color: #FFFFFF;
  font-family: var(--font-inter);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.36em;
  text-align: center;
  width: auto;
  max-width: 100%;
  justify-content: center;
}

@media screen and (max-width: 540px) {
  .hero__catch-line-1 {
    font-size: 40px;
  }
}

.hero__catch-line-2 {
  color: #FFFFFF;
  font-family: var(--font-inter);
  font-size: 72px;
  font-style: normal;
  font-weight: 700;
  height: auto;
  letter-spacing: 0.36em;
  text-align: left;
  width: calc(100% - (var(--gap-h-hero__catch) * 0));
  max-width: calc(100% - (var(--gap-h-hero__catch) * 0));
  justify-content: flex-start;
}

@media screen and (max-width: 540px) {
  .hero__catch-line-2 {
    font-size: 40px;
  }
}

.hero__actions {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 24px;
  height: auto;
  justify-content: flex-start;
  padding: 0px;
  width: auto;
  --gap-h-hero__actions: 24px;
  --gap-v-hero__actions: 0px;
  max-width: 100%;
}

.hero__button {
  align-content: center;
  align-items: center;
  background: #FFFFFF;
  border-radius: 40px;
  flex: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  height: auto;
  justify-content: center;
  padding: 12px 16px 12px 16px;
  width: auto;
  --gap-h-hero__button: 10px;
  --gap-v-hero__button: 0px;
  max-width: 100%;
}

.hero__button:hover {
  background: #f5a200ff;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  --gap-h-hero__button: 10px;
  --gap-v-hero__button: 0px;
}

.hero__button-label {
  color: #004ea3ff;
  flex: none;
  font-family: var(--font-inter);
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  height: auto;
  letter-spacing: 0em;
  text-align: left;
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
}

.hero__button:hover .hero__button-label:hover {
  color: #ffffff;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.hero__button:hover .hero__button-label {
  color: #ffffffff;
}

/* #endregion */

/* #region MARK:companies */

.companies {
  align-content: flex-start;
  align-items: flex-start;
  background: #e7f2ffff;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 40px;
  height: auto;
  justify-content: flex-start;
  margin: 0px 0px 0px 0px;
  padding: 80px 40px 80px 40px;
  width: 100%;
  --gap-h-companies: 0px;
  --gap-v-companies: 40px;
  max-width: 100%;
}

@media screen and (max-width: 540px) {
  .companies {
    padding: 80px 20px 80px 20px;
    --gap-h-companies: 0px;
    --gap-v-companies: 40px;
  }
}

.companies__header {
  align-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  height: auto;
  justify-content: center;
  padding: 0px 0px 0px 0px;
  width: auto;
  --gap-h-companies__header: 10px;
  --gap-v-companies__header: 0px;
  max-width: 100%;
}

.companies__header-bar {
  background: #f4a103;
  flex: none;
  height: 30px;
  width: 8px;
  max-width: 100%;
}

.companies__title {
  color: #2f64b8;
  flex: none;
  font-family: var(--font-inter);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  height: auto;
  letter-spacing: 0em;
  text-align: center;
  width: auto;
  max-width: 100%;
  justify-content: center;
}

.companies__list {
  align-content: stretch;
  align-items: stretch;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: flex-start;
  padding: 0px 0px 0px 0px;
  width: calc(100% - (var(--gap-h-companies) * 0));
  --gap-h-companies__list: 32px;
  --gap-v-companies__list: 32px;
  max-width: calc(100% - (var(--gap-h-companies) * 0));
}

@media screen and (max-width: 840px) {
  .companies__list {
    gap: 24px;
    --gap-h-companies__list: 24px;
    --gap-v-companies__list: 24px;
  }
}

/* #endregion */

/* #region MARK:company-card */

.company-card {
  align-content: flex-start;
  align-items: flex-start;
  background: #fafafa;
  border-bottom: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 0px solid transparent;
  border-top: 0px solid transparent;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0px 0px 0px 0px;
  width: calc(33.33% - (var(--gap-h-companies__list) * 0.6667));
  --gap-h-company-card: 0px;
  --gap-v-company-card: 0px;
  max-width: calc(33.33% - (var(--gap-h-companies__list) * 0.6667));
}

@media screen and (max-width: 840px) {
  .company-card {
    flex: none;
    width: calc(50% - (var(--gap-h-companies__list) * 0.5));
    --gap-h-company-card: 0px;
    --gap-v-company-card: 0px;
    max-width: calc(50% - (var(--gap-h-companies__list) * 0.5));
  }
}

@media screen and (max-width: 540px) {
  .company-card {
    width: calc(100% - (var(--gap-h-companies__list) * 0));
    --gap-h-company-card: 0px;
    --gap-v-company-card: 0px;
    max-width: calc(100% - (var(--gap-h-companies__list) * 0));
  }
}

.company-card__inner {
  align-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: flex-start;
  padding: 0px;
  width: calc(100% - (var(--gap-h-company-card) * 0));
  --gap-h-company-card__inner: 0px;
  --gap-v-company-card__inner: 0px;
  max-width: calc(100% - (var(--gap-h-company-card) * 0));
}

.company-card__inner:hover {
  opacity: 1;
  --gap-h-company-card__inner: 0px;
  --gap-v-company-card__inner: 0px;
}

.company-card__thumb-frame {
  align-content: flex-start;
  align-items: flex-start;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0px;
  justify-content: flex-start;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0px;
  width: calc(100% - (var(--gap-h-company-card__inner) * 0));
  --gap-h-company-card__thumb-frame: 0px;
  --gap-v-company-card__thumb-frame: 0px;
  max-width: calc(100% - (var(--gap-h-company-card__inner) * 0));
}

.company-card__thumb {
  border-radius: 0;
  flex: none;
  height: 240px;
  width: calc(100% - (var(--gap-h-company-card__thumb-frame) * 0));
  max-width: calc(100% - (var(--gap-h-company-card__thumb-frame) * 0));
}

.company-card__inner:hover .company-card__thumb {
  scale: 1.05 1.05;
}

.company-card__footer {
  align-content: center;
  align-items: center;
  background: transparent;
  flex: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  height: auto;
  justify-content: space-between;
  padding: 16px;
  width: calc(100% - (var(--gap-h-company-card__inner) * 0));
  --gap-h-company-card__footer: 8px;
  --gap-v-company-card__footer: 0px;
  max-width: calc(100% - (var(--gap-h-company-card__inner) * 0));
}

@media screen and (max-width: 840px) {
  .company-card__footer {
    gap: 6px;
    --gap-h-company-card__footer: 6px;
    --gap-v-company-card__footer: 0px;
  }
}

@media screen and (max-width: 540px) {
  .company-card__footer {
    gap: 4px;
    --gap-h-company-card__footer: 4px;
    --gap-v-company-card__footer: 0px;
  }
}

.company-card__name {
  color: #2f64b8;
  flex: none;
  font-family: var(--font-lato);
  font-feature-settings: 'palt' 1;
  font-size: 16px;
  font-weight: 700;
  height: auto;
  line-height: 1.75;
  text-align: left;
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
}

@media screen and (max-width: 540px) {
  .company-card__name {
    font-size: 14px;
  }
}

.company-card__arrow {
  height: 26px;
  width: 38px;
  max-width: 100%;
}

body {
  background: #ffffff;
  transition: background 0.5s cubic-bezier(0.4, 0.4, 0, 1);
}

/* #endregion */

/* #region MARK:hero */

.hero:before {
  background-image: url("../../images/index-hero.webp?v=20260921");
}

/* #endregion */

/* #region MARK:company-card */

.company-card__thumb--monden:before {
  background-image: url("../../images/monden-thumb.webp");
}

.company-card__arrow:before {
  background-image: url("../../images/icon-arrow.svg");
}

.company-card__thumb--kyushu-daiden:before {
  background-image: url("../../images/kyushu-daiden-thumb.webp");
}

.company-card__thumb--higuchi-kogyo:before {
  background-image: url("../../images/higuchi-kogyo-thumb.webp");
}

.company-card__thumb--kuma-kensetsu:before {
  background-image: url("../../images/kuma-kensetsu-hero.webp");
}

.company-card__thumb--hasuike-kogyo:before {
  background-image: url("../../images/hasuike-kogyo-thumb.webp");
}

.company-card__thumb--ryokuken:before {
  background-image: url("../../images/ryokuken-thumb.webp");
}

.company-card__thumb--nishinihon-framing:before {
  background-image: url("../../images/nishinihon-framing-thumb.webp");
}

.company-card__thumb--furuya-kogyosho:before {
  background-image: url("../../images/furuya-kogyosho-thumb.webp");
}

.company-card__thumb--kawakami-kogyo:before {
  background-image: url("../../images/kawakami-kogyo-thumb.webp");
}

.company-card__thumb--work:before {
  background-image: url("../../images/work-thumb.webp");
}

.company-card__thumb--oka-kogyo:before {
  background-image: url("../../images/oka-kogyo-thumb.webp");
}

/* #endregion */