/* 企業情報
 * ================================================ */

.main-content {
  background: linear-gradient(90deg, #0d76a3, #171f63);
}

/* Hero Section
 * ------------------------------------------------ */

.about-hero-animation {
  opacity: 0;
  transform: translate(20px, 0) !important;
  transition: all 0.4s ease;
}

.about-hero-animation.active {
  opacity: 1;
  transform: translate(0, 0) !important;
}

.about-hero {
  margin: auto;
  max-width: min(calc(966 / 1366 * 100vw), 966px);
  padding: min(calc(100 / 1366 * 100vw), 100px) 0 3rem;
}

.about-hero__content {
  position: relative;
}

.about-hero__content::before {
  content: url("../../images/about/about_top_after.svg");
  height: 100%;
  left: min(calc(20 / 1366 * 100vw), 20px);
  position: absolute;
  top: min(calc(20 / 1366 * 100vw), 20px);
  width: 100%;
}

.about-hero__title {
  background: #fff;
  color: #171c61;
  right: min(calc(150 / 1366 * 100vw), 150px);
  min-width: min(calc(300 / 1366 * 100vw), 300px);
  padding: 0.5rem 0.7rem;
  position: absolute;
  text-align: center;
  top: max(calc(-50 / 1366 * 100vw), -50px);
  transform: skewX(-10deg) translateY(50%) translateX(30%);
  width: max-content;
  z-index: 10;
}

.about-hero__title p {
  font-size: min(calc(20 / 1366 * 100vw), 20px);
  font-weight: bold;
}

.about-hero__image {
  position: relative;
  width: 100%;
  z-index: 1;
}

/* Slides Section
 * ------------------------------------------------ */

.about-slides {
  padding: 3rem 0;
}

.about-slides__inner {
  margin: 0 auto;
  max-width: min(calc(966 / 1366 * 100vw), 966px);
}

.about-slides__embed {
  position: relative;
  width: 100%;
  padding-bottom: 58.52%;
  overflow: hidden;
}

.about-slides__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* MVV Section
 * ------------------------------------------------ */

.about-section-title {
  background: #fff;
  padding: 3rem 0;
}

.about-section-title__content {
  margin: auto;
  max-width: 1080px;
}

.about-section-title__heading {
  background-image: linear-gradient(65deg, #0d76a3, #171f63);
  margin: 0 auto;
  max-width: 92%;
  padding: 0.7rem 1.3rem;
  text-align: center;
  transform: skewX(-10deg);
}

.about-section-title__heading p {
  color: #fff;
  font-size: min(calc(25 / 1366 * 100vw), 25px);
  font-weight: bold;
  transform: skewX(10deg);
}

.about-mvv-map {
  padding: 3rem 0;
}

.about-mvv-map__content {
  margin: auto;
  max-width: min(calc(966 / 1366 * 100vw), 966px);
}

/* Org Chart Section
 * ------------------------------------------------ */

.about-org {
  padding: 3rem 0;
}

.about-org__inner {
  margin: auto;
  max-width: min(960px, 95%);
}

/* Company Info Section
 * ------------------------------------------------ */

.about-company-table {
  padding: 3rem 0;
}

.about-company-table__wrapper {
  background: #fff;
  border-radius: min(calc(10 / 1366 * 100vw), 10px);
  color: #171c61;
  margin: auto;
  max-width: min(calc(966 / 1366 * 100vw), 966px);
  padding: 3rem;
}

.about-company-table__wrapper table {
  width: 100%;
}

.about-company-table__wrapper tr {
  border-top: #171c61 solid 1px;
  display: flex;
  padding: 0.5rem 0;
}

.about-company-table__wrapper tr:last-child {
  border-bottom: #171c61 solid 1px;
}

.about-company-table__wrapper th {
  font-size: min(calc(18 / 1366 * 100vw), 18px);
  font-weight: bold;
  padding-left: 2rem;
  width: 30%;
  text-align: left;
}

.about-company-table__wrapper td {
  font-size: min(calc(16 / 1366 * 100vw), 16px);
  font-weight: bold;
  text-align: left;
  width: 70%;
}

/* Office Section
 * ------------------------------------------------ */

.about-office {
  padding: 3rem 0;
}

.about-office__wrapper {
  background: #fff;
  border-radius: min(calc(10 / 1366 * 100vw), 10px);
  display: flex;
  gap: min(calc(20 / 1366 * 100vw), 20px);
  margin: auto;
  max-width: min(calc(966 / 1366 * 100vw), 966px);
  overflow: hidden;
  padding: min(calc(50 / 1366 * 100vw), 50px) min(calc(20 / 1366 * 100vw), 20px);
}

/* Map (left column) */

.about-office__map {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.about-office__map-illustration {
  inset: min(calc(31 / 1366 * 100vw), 31px) 0 0 min(calc(25 / 1366 * 100vw), 25px);
  position: absolute;
  z-index: 1;
  transform: scale(0.95);
}

.about-office__map-illustration > img {
  max-width: none;
  position: absolute;
}

.about-office__map-outline {
  left: max(calc(-224 / 1366 * 100vw), -224px);
  top: 0;
  width: min(calc(713 / 1366 * 100vw), 713px);
}

.about-office__map-line--1 {
  left: min(calc(301 / 1366 * 100vw), 301px);
  top: min(calc(108 / 1366 * 100vw), 108px);
  transform: rotate(52.04deg);
  width: min(calc(186 / 1366 * 100vw), 186px);
}

.about-office__map-line--2 {
  left: min(calc(190 / 1366 * 100vw), 190px);
  top: min(calc(340 / 1366 * 100vw), 340px);
  width: min(calc(286 / 1366 * 100vw), 286px);
}

.about-office__map-line--3 {
  left: min(calc(125 / 1366 * 100vw), 125px);
  top: min(calc(465 / 1366 * 100vw), 465px);
  transform: scaleY(-1) rotate(180deg);
  width: min(calc(351 / 1366 * 100vw), 351px);
}

.about-office__map-pin {
  height: min(calc(40 / 1366 * 100vw), 40px);
}

.about-office__map-pin--osaka {
  left: min(calc(105 / 1366 * 100vw), 105px);
  top: min(calc(450 / 1366 * 100vw), 450px);
}

.about-office__map-pin--nagoya {
  left: min(calc(163 / 1366 * 100vw), 163px);
  top: min(calc(430 / 1366 * 100vw), 430px);
}

.about-office__map-pin--tokyo {
  left: min(calc(256 / 1366 * 100vw), 256px);
  top: min(calc(404 / 1366 * 100vw), 404px);
}

.about-office__map-text {
  align-self: flex-start;
  background: linear-gradient(90deg, #0f74b3 0%, #115495 18%, #143b7e 37%, #152a6e 56%, #161f64 76%, #171c61 100%);
  border-radius: min(calc(10 / 1366 * 100vw), 10px);
  color: #fff;
  font-size: min(calc(14 / 1366 * 100vw), 14px);
  font-weight: bold;
  line-height: min(calc(22 / 1366 * 100vw), 22px);
  padding: min(calc(30 / 1366 * 100vw), 30px);
}

/* Cards (right column) */

.about-office__cards {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: min(calc(10 / 1366 * 100vw), 10px);
  justify-content: space-between;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.about-office__card {
  background: #e4e7f1;
  border-radius: min(calc(10 / 1366 * 100vw), 10px);
  display: flex;
  flex-direction: column;
  gap: min(calc(10 / 1366 * 100vw), 10px);
  padding: min(calc(20 / 1366 * 100vw), 20px) min(calc(20 / 1366 * 100vw), 20px) min(calc(20 / 1366 * 100vw), 20px) 0;
}

.about-office__card-header {
  align-items: center;
  display: flex;
  gap: min(calc(10 / 1366 * 100vw), 10px);
}

.about-office__card-label {
  display: flex;
  flex-shrink: 0;
}

.about-office__card-label-text {
  align-items: center;
  background: #152a6d;
  color: #fff;
  display: flex;
  font-size: min(calc(16 / 1366 * 100vw), 16px);
  font-weight: bold;
  padding: min(calc(12 / 1366 * 100vw), 12px) 0 min(calc(12 / 1366 * 100vw), 12px) min(calc(15 / 1366 * 100vw), 15px);
  white-space: nowrap;
}

.about-office__card-label-arrow {
  flex-shrink: 0;
}

.about-office__card-address {
  color: #000;
  font-size: min(calc(12 / 1366 * 100vw), 12px);
  font-weight: bold;
  line-height: min(calc(18 / 1366 * 100vw), 18px);
}

.about-office__card-photos {
  display: flex;
  gap: min(calc(10 / 1366 * 100vw), 10px);
  height: min(calc(131 / 1366 * 100vw), 131px);
  padding-left: min(calc(15 / 1366 * 100vw), 15px);
}

.about-office__card-photo {
  border-bottom: 3px solid #152a6d;
  border-right: 3px solid #152a6d;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.about-office__card-photo--portrait {
  aspect-ratio: 67 / 100;
  flex: none;
}

.about-office__card-photo img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.about-office__map-pin-label {
  display: none;
}

/* Responsive
 * ------------------------------------------------ */

@media screen and (width <= 750px) {
  /* Hero SP */

  .about-hero {
    max-width: 100%;
  }

  .about-hero {
    padding: calc(80 / 375 * 100vw) 0 calc(100 / 375 * 100vw);
  }

  .about-hero__content {
    margin: 0;
    width: calc(355 / 375 * 100vw);
  }

  .about-hero__content::before {
    top: calc(10 / 375 * 100vw);
    left: calc(10 / 375 * 100vw);
  }

  .about-hero__title {
    background: transparent;
    bottom: calc(-50 / 375 * 100vw);
    left: 0;
    max-width: 100%;
    min-width: auto;
    padding: 0;
    text-align: left;
    top: auto;
    transform: skewX(0);
    width: auto;
  }

  .about-hero__title p::after {
    position: absolute;
    left: 100%;
    top: 0;
    width: 20px;
    height: 100%;
    background-color: #fff;
    transform: skewX(-10deg) translateX(-50%);
    content: "";
    display: block;
  }

  .about-hero__title p {
    position: relative;
    display: inline-block;
    background: #fff;
    box-decoration-break: clone;
    font-size: calc(16 / 375 * 100vw);
    line-height: 2.2;
    padding: 0 calc(10 / 375 * 100vw);
    margin-top: calc(5 / 375 * 100vw);
  }

  .about-slides__inner {
    max-width: 95%;
  }

  /* Section Title SP */

  .about-section-title {
    padding: calc(30 / 375 * 100vw) 0;
  }

  .about-section-title__content {
    max-width: 95%;
  }

  .about-section-title__heading {
    padding: 0.4rem 0.8rem;
  }

  .about-section-title__heading p {
    font-feature-settings: "palt";
    font-size: 17px;
  }

  .about-mvv-map__content {
    max-width: 95%;
  }

  /* Org Chart SP */

  .about-org__inner {
    max-width: 95%;
  }

  /* Company Info SP */

  .about-company-table__wrapper {
    max-width: 95%;
    padding: 2rem 1rem;
  }

  .about-company-table__wrapper tr {
    font-size: 0.9rem;
  }

  .about-company-table__wrapper th {
    font-size: 12px;
    padding-left: 0;
    width: 70px;
  }

  .about-company-table__wrapper td {
    font-size: 14px;
  }

  /* Office SP */

  .about-office__wrapper {
    border-radius: 5px;
    flex-direction: column;
    gap: 20px;
    max-width: 95%;
    padding: 20px;
  }

  .about-office__map {
    gap: 20px;
  }

  .about-office__map-illustration {
    height: calc(235 / 375 * 100vw);
    position: relative;
    z-index: 1;
    inset: auto;
    transform: scale(1);
  }

  .about-office__map-illustration > .about-office__map-outline {
    left: calc(-58 / 375 * 100vw);
    top: calc(-80 / 375 * 100vw);
    width: calc(430 / 375 * 100vw);
  }

  .about-office__map-line {
    display: none;
  }

  .about-office__map-pin {
    height: calc(24 / 375 * 100vw);
  }

  .about-office__map-pin--osaka {
    left: calc(136 / 375 * 100vw);
    top: calc(190 / 375 * 100vw);
  }

  .about-office__map-pin--nagoya {
    left: calc(178 / 375 * 100vw);
    top: calc(180 / 375 * 100vw);
  }

  .about-office__map-pin--tokyo {
    left: calc(231 / 375 * 100vw);
    top: calc(165 / 375 * 100vw);
  }

  .about-office__map-pin-label {
    color: #152a6d;
    display: block;
    font-size: calc(10 / 375 * 100vw);
    font-weight: bold;
    position: absolute;
    text-align: center;
    text-shadow:
      -2px -2px 1px #fff,
      2px -2px 1px #fff,
      -2px 2px 1px #fff,
      2px 2px 1px #fff,
      0 -2px 1px #fff,
      0 2px 1px #fff,
      -2px 0 1px #fff,
      2px 0 1px #fff;
    transform: translateX(-50%);
  }

  .about-office__map-pin-label--tokyo {
    left: calc(240 / 375 * 100vw);
    top: calc(145 / 375 * 100vw);
  }

  .about-office__map-pin-label--nagoya {
    left: calc(186 / 375 * 100vw);
    top: calc(155 / 375 * 100vw);
  }

  .about-office__map-pin-label--osaka {
    left: calc(145 / 375 * 100vw);
    top: calc(170 / 375 * 100vw);
  }

  .about-office__map-text {
    align-self: stretch;
    border-radius: 3px;
    font-size: 12px;
    padding: 20px;
    line-height: 1.8;
  }

  .about-office__cards {
    gap: 20px;
  }

  .about-office__card {
    border-radius: 5px;
    gap: 10px;
    padding: 20px 20px 20px 0;
  }

  .about-office__card-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .about-office__card-label-text {
    font-size: 16px;
    padding: 12px 0 12px 15px;
  }

  .about-office__card-address {
    font-size: 12px;
    padding-left: 15px;
    line-height: 1.6;
  }

  .about-office__card-photos {
    display: grid;
    gap: calc(10 / 375 * 100vw);
    grid-template-columns: 42% auto;
    grid-template-rows: 1fr 1fr;
    height: calc(175 / 375 * 100vw);
    padding-left: calc(15 / 375 * 100vw);
  }

  .about-office__card-photo--portrait {
    grid-row: 1 / -1;
  }
}