@charset "UTF-8";
/* ============================================ */
/* function
/* ============================================ */
/* ===== fontサイズ ===== */
/* ============================================ */
/* mixin
/* ============================================ */
/* ===== mediaquery ===== */
/* ============================================ */
/* company
/* ============================================ */
/* ===== title-area ===== */
#title-area .img::before {
  background-image: url(../img/company/top.jpg);
  background-position: right bottom;
}

/* ===== message ===== */
#message {
  padding: 0 0 100px;
}
#message .catch {
  font-size: 1.875rem;
  font-weight: 500;
  margin: 2em 0;
}
#message .text {
  line-height: 2.5;
}
#message .text p + p {
  margin: 2em 0 0;
}
#message .from {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin: 100px 0 0;
  font-size: 0.9375rem;
  font-weight: 500;
}
#message .from .name {
  width: 180px;
  margin: 0 0 0 20px;
}

@media screen and (max-width: 1024px) {
  #message .catch {
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 768px) {
  #message {
    padding: 0 0 80px;
  }
  #message .catch {
    font-size: 1.25rem;
  }
  #message .from {
    margin: 60px 0 0;
    font-size: 0.875rem;
  }
  #message .from .name {
    width: 120px;
    margin: 0 0 0 15px;
  }
}
/* ===== philosoph ===== */
#philosoph {
  padding: 80px 0 100px;
  background: var(--color-bg);
}
#philosoph .img {
  width: 80%;
  max-width: 500px;
  margin-inline: auto;
}
#philosoph .text {
  margin: 40px 0 0;
  line-height: 2.5;
}
#philosoph .text p + p {
  margin: 2em 0 0;
}

@media screen and (max-width: 768px) {
  #philosoph {
    padding: 60px 0 80px;
  }
}
/* ===== profile ===== */
#profile {
  padding: 100px 0 0;
}
#profile .chart {
  background: var(--color-bg);
  margin: 60px 0 0;
  padding: 40px 0 75px;
}
#profile .chart .title {
  font-weight: 500;
  margin: 0 0 2em;
}
#profile .location-item {
  display: flex;
}
#profile .location-item .name {
  width: 7em;
  flex-shrink: 0;
}

@media screen and (max-width: 768px) {
  #profile {
    padding: 80px 0 0;
  }
}
/* ===== record ===== */
/*
#record {
  padding: 100px 0 120px;

  .year-month {
    margin: 0 0 2em;
  }

  .record-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 25px 0;
  }

  .record-item {
    width: 48.5%;
    background: #fff;
    padding: 1.5em 2.5em;
    border-radius: 15px;
    font-size: function.rem(17);
    font-weight: 500;

    .title {}

    .value {
      display: flex;
      justify-content: center;
      align-items: last baseline;
      gap: 0.5em;

      .number {
        font-family: var(--fontfamily-en);
        font-size: function.rem(70);
        font-weight: 700;
        line-height: 1;
        color: var(--color-primary);
      }
    }
  }

  .btn {
    margin: 45px 0 0;
  }
}

@include mixin.mq-max('md') {

  #record {
    padding: 60px 0 80px;

    .record-item {
      font-size: function.rem(15);

      .value {
        .number {
          font-size: function.rem(56);
        }
      }
    }
  }

}

@include mixin.mq-max('sm') {

  #record {

    .record-list {
      flex-direction: column;
    }

    .record-item {
      width: 100%;
    }
  }

}
*/
/* ===== history ===== */
#history {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 80px 0 180px;
  background: url(../img/company/record_bg.jpg) no-repeat center;
  background-size: cover;
}
#history .history-track {
  position: relative;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  width: fit-content;
  padding: 0 150px;
}
#history .history-item {
  position: relative;
  width: 300px;
  aspect-ratio: 1/1;
  color: #fff;
  border: solid 1px #fff;
  padding: 3em 2.5em 2.5em;
  flex-shrink: 0;
}
#history .history-item::after {
  content: "";
  position: absolute;
  left: calc(100% - 10px);
  top: 50%;
  display: block;
  height: 20px;
  width: 80px;
  background: #fff;
  border-radius: 10px;
  transform: translate(0, -50%);
}
#history .history-item:first-child::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  display: block;
  height: 20px;
  width: 20px;
  background: #fff;
  border-radius: 10px;
  transform: translate(0, -50%);
}
#history .history-item:last-child::after {
  display: none;
}
#history .history-item .title {
  font-family: var(--fontfamily-en);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.8em;
}

@media screen and (max-width: 768px) {
  #history {
    padding: 50px 0 100px;
  }
  #history .history-track {
    gap: 40px;
    padding: 0 100px;
  }
  #history .history-item {
    width: 260px;
    padding: 2.5em 2em 2em;
  }
  #history .history-item::after {
    left: calc(100% - 8px);
    top: 50%;
    height: 16px;
    width: 60px;
    border-radius: 8px;
  }
  #history .history-item .title {
    font-size: 1.875rem;
  }
}
/* ===== access ===== */
#access {
  padding: 100px 0 0;
}
#access .how-to {
  margin: 0 0 2em;
}
#access .how-to .how-to-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1em;
  line-height: 1.5;
}
#access .how-to .how-to-item.how-to-item {
  margin: 1em 0 0;
}
#access .how-to .how-to-item::before {
  content: "";
  display: block;
  width: 3em;
  height: 2em;
  background: url() no-repeat center;
  background-size: contain;
}
#access .how-to .how-to-item.bus::before {
  background-image: url(../img/company/access_bus.svg);
}
#access .how-to .how-to-item.car::before {
  background-image: url(../img/company/access_car.svg);
}
#access .map {
  width: 100%;
  aspect-ratio: 44/17;
}
#access .map iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  #access {
    padding: 80px 0 0;
  }
  #access .map {
    width: 100%;
    aspect-ratio: 3/2;
  }
}
/* ===== group ===== */
#group {
  padding: 80px 0 300px;
  background: var(--color-bg);
}
#group .group-section {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}
#group .group-section:not(:first-child) {
  margin: 60px 0 0;
}
#group .group-section .img {
  width: 210px;
  border-radius: 15px;
  overflow: hidden;
  flex-shrink: 0;
}
#group .group-section .text {
  width: 100%;
}
#group .logo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 20px;
}
#group .profile {
  width: 100%;
  max-width: 300px;
  margin: 0 0 25px;
  background: var(--color-bg-gray);
  padding: 0.5em 1em;
}
#group .profile a {
  text-decoration: underline;
}
#group .location-item:not(:first-child) {
  margin: 0 0 1.5em;
}
#group .location-item + .logo {
  margin-top: 45px;
}
#group .location-item .name {
  width: 7em;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  background: #000;
  margin: 0 0 0.5em;
}
@media screen and (max-width: 768px) {
  #group {
    padding: 60px 0 150px;
  }
  #group .group-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }
  #group .group-section:not(:first-child) {
    margin: 40px 0 0;
  }
  #group .group-section .img {
    width: fit-content;
  }
  #group .location-item .name {
    font-size: 0.875rem;
  }
}

/*# sourceMappingURL=company.css.map */