@charset "UTF-8";
#service {
  --service-heading-font: "Noto Sans JP", "BIZ UDPGothic", system-ui, sans-serif;
  --service-background: #f1f2f4;
  --service-map-pink: #ec4f81;
  --service-map-blue: #45a9b9;
  --service-information: #e30074;
  --service-environment: #039536;
  --service-healthcare: #d76e1e;
  --service-manufacturing: #954691;
  --service-startup: #0097d8;
  --service-other: #7d7d7d;
  --service-rule: #9daabb;
  margin-bottom: 0;
  overflow-x: clip;
}

.service-page-title {
  width: min(1200px, 90%);
  margin-inline: auto;
  padding-block: 8rem 10rem;
  color: var(--c_navy2);
  font-size: 5.2rem;
  font-weight: 700;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .service-page-title {
    padding-block: 4rem 5rem;
    font-size: 2.8rem;
  }
}

@media screen and (max-width: 1200px) {
  header {
    overflow-x: clip;
  }
}

.venue-zones {
  display: grid;
  gap: 3.6rem;
  padding-block: 5.3rem 11.8rem;
  background: var(--service-background) url("../img/zones-background.jpg") center top/1500px auto repeat;
}
@media screen and (max-width: 768px) {
  .venue-zones {
    gap: 2.8rem;
    padding-block: 4rem 6rem;
  }
}

.venue-guide__frame {
  position: relative;
  width: min(1206px, 90%);
  margin-inline: auto;
  padding: 1.4rem 1.9rem 1.7rem;
  border: 3px solid var(--c_white);
  border-radius: 2.2rem;
}
.venue-guide__frame-deco span {
  position: absolute;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.venue-guide__frame-deco-top, .venue-guide__frame-deco-bottom {
  width: 0.5rem;
}
.venue-guide__frame-deco-top {
  top: 0;
}
.venue-guide__frame-deco-top--1 {
  left: 20.73%;
}
.venue-guide__frame-deco-top--2 {
  left: 49.59%;
}
.venue-guide__frame-deco-top--3 {
  left: 80.18%;
}
.venue-guide__frame-deco-bottom {
  bottom: 0;
}
.venue-guide__frame-deco-bottom--1 {
  left: 19.24%;
}
.venue-guide__frame-deco-bottom--2 {
  left: 49.83%;
}
.venue-guide__frame-deco-bottom--3 {
  left: 78.69%;
}
.venue-guide__frame-deco-left, .venue-guide__frame-deco-right {
  width: 3.5rem;
}
.venue-guide__frame-deco-left {
  left: 0;
}
.venue-guide__frame-deco-left--1 {
  top: 19.6%;
}
.venue-guide__frame-deco-left--2 {
  top: 40.6%;
}
.venue-guide__frame-deco-right {
  right: 0;
}
.venue-guide__frame-deco-right--1 {
  top: 19%;
}
.venue-guide__frame-deco-right--2 {
  top: 40%;
}
.venue-guide__body {
  display: grid;
  justify-items: center;
  gap: 2rem;
  padding: 3.8rem 2.4rem 3.1rem;
  border-radius: 1.8rem;
  background: var(--c_white);
}
.venue-guide__title {
  font-size: 2.6rem;
  line-height: 1.615;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--c_navy2);
  text-align: center;
}
.venue-guide__title span {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(70%, transparent), color-stop(70%, var(--c_yellow)));
  background: -webkit-linear-gradient(transparent 70%, var(--c_yellow) 70%);
  background: linear-gradient(transparent 70%, var(--c_yellow) 70%);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.venue-guide__content {
  display: grid;
  justify-items: center;
  gap: 2.7rem;
  width: min(719px, 100%);
  min-width: 0;
}
.venue-guide__map {
  width: 100%;
}
.venue-guide__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 3.2rem;
  width: 100%;
}
.venue-guide__actions a {
  width: min(287px, 100%);
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover) {
  .venue-guide__actions a:hover {
    opacity: 0.7;
  }
}
.venue-guide__button {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 5.2rem;
  padding: 1rem 3rem;
  border-radius: 9999px;
  color: var(--c_white);
  font-family: var(--service-heading-font);
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.venue-guide__button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 0.9rem;
  aspect-ratio: 9/12;
  translate: 0 -50%;
  -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
          clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--c_white);
}
.venue-guide__button--pink {
  background: var(--service-map-pink);
}
.venue-guide__button--blue {
  background: var(--service-map-blue);
}
@media screen and (max-width: 768px) {
  .venue-guide__frame {
    padding: 1rem;
    border-radius: 1.5rem;
  }
  .venue-guide__body {
    padding: 2.4rem 1.2rem;
    border-radius: 1rem;
  }
  .venue-guide__title {
    font-size: 2rem;
    line-height: 1.6;
  }
  .venue-guide__content {
    gap: 2.4rem;
  }
  .venue-guide__actions {
    gap: 1.2rem;
  }
  .venue-guide__button {
    min-height: 4.6rem;
    font-size: 1.5rem;
  }
}

.outline-nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 2rem 5.9rem;
  width: min(1200px, 90%);
  margin-inline: auto;
}
.outline-nav__link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: min(316px, 100%);
  min-height: 5.6rem;
  padding: 1rem 4.5rem 1rem 2.5rem;
  border-radius: 9999px;
  background: var(--c_navy2);
  color: var(--c_white);
  font-family: var(--service-heading-font);
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
@media (hover) {
  .outline-nav__link:hover {
    opacity: 0.7;
  }
}
.outline-nav__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2.3rem;
  width: 1.3rem;
  aspect-ratio: 13/10;
  translate: 0 -50%;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
          clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--c_white);
}
@media screen and (max-width: 768px) {
  .outline-nav {
    gap: 1.2rem;
  }
  .outline-nav__link {
    min-height: 5rem;
    font-size: 1.6rem;
  }
}

.zones {
  padding-top: 6.7rem;
  scroll-margin-top: 14rem;
}
.zones__inner {
  display: grid;
  gap: 3.4rem;
  width: min(1200px, 90%);
  margin-inline: auto;
}
.zones .section-title {
  margin: 0;
}
.zones__list {
  display: grid;
  gap: 2.4rem;
}
.zones__item {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr) 30rem;
  overflow: hidden;
  border-radius: 2rem 0 2rem 0;
  background: var(--c_white);
}
.zones__item--information {
  --zone-color: var(--service-information);
  --zone-icon-width: 83px;
}
.zones__item--environment {
  --zone-color: var(--service-environment);
  --zone-icon-width: 75px;
}
.zones__item--healthcare {
  --zone-color: var(--service-healthcare);
  --zone-icon-width: 83px;
}
.zones__item--manufacturing {
  --zone-color: var(--service-manufacturing);
  --zone-icon-width: 94px;
}
.zones__item--startup {
  --zone-color: var(--service-startup);
  --zone-icon-width: 105px;
}
.zones__name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 1.2rem;
  min-height: 18rem;
  padding: 2.4rem 1.2rem;
  background: var(--zone-color);
  color: var(--c_white);
  font-family: var(--service-heading-font);
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
}
.zones__name img {
  width: var(--zone-icon-width);
  max-width: 100%;
}
.zones__content {
  display: contents;
}
.zones__desc {
  -ms-flex-item-align: center;
      align-self: center;
  min-width: 0;
  padding: 2.4rem 4rem;
  color: var(--c_black);
  font-size: 2rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.zones__photo {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.zones__other {
  display: grid;
  grid-template-columns: 20rem minmax(0, 1fr);
  overflow: hidden;
  border-radius: 2rem 0 2rem 0;
  background: var(--c_white);
}
.zones__other-name {
  display: grid;
  -ms-flex-line-pack: start;
      align-content: start;
  gap: 1.4rem;
  padding: 4rem 3rem;
  background: var(--service-other);
  color: var(--c_white);
  font-family: var(--service-heading-font);
  letter-spacing: 0.02em;
}
.zones__other-name h3 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.zones__other-name p {
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.4;
}
.zones__other-content {
  display: grid;
  gap: 2rem;
  min-width: 0;
  padding: 3.2rem 4rem 3rem;
}
.zones__other-list {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 2rem;
  color: var(--c_black);
  font-size: 2rem;
  line-height: 1.7;
}
.zones__other-list li {
  padding-left: 1em;
  text-indent: -1em;
  overflow-wrap: anywhere;
}
.zones__other-list li::before {
  content: "●";
}
.zones__other-photos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.4rem;
}
.zones__other-photos img {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 calc((100% - 2.8rem) / 3);
          flex: 1 1 calc((100% - 2.8rem) / 3);
  min-width: 0;
  width: calc((100% - 2.8rem) / 3);
  aspect-ratio: 30/19;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 1200px) {
  .zones__item {
    grid-template-columns: 17rem minmax(0, 1fr) minmax(200px, 25%);
  }
  .zones__desc {
    padding: 2.4rem;
    font-size: 1.8rem;
  }
  .zones__other {
    grid-template-columns: 17rem minmax(0, 1fr);
  }
  .zones__other-name {
    padding-inline: 2rem;
  }
  .zones__other-content {
    padding: 2.8rem;
  }
  .zones__other-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    font-size: 1.7rem;
  }
}
@media screen and (max-width: 768px) {
  .zones {
    padding-top: 2.2rem;
    scroll-margin-top: 9rem;
  }
  .zones__inner {
    gap: 2.6rem;
  }
  .zones__item {
    grid-template-columns: minmax(0, 1fr);
  }
  .zones__name {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2rem;
    min-height: 0;
    padding: 2rem;
    font-size: 1.9rem;
    text-align: left;
  }
  .zones__name img {
    width: 6rem;
  }
  .zones__content {
    display: grid;
    gap: 2rem;
    min-width: 0;
    padding: 2rem;
  }
  .zones__desc {
    padding: 0;
    font-size: 1.4rem;
    line-height: 1.6;
  }
  .zones__photo {
    min-height: 0;
    height: auto;
    aspect-ratio: 5/3;
  }
  .zones__other {
    grid-template-columns: minmax(0, 1fr);
  }
  .zones__other-name {
    grid-template-columns: auto minmax(0, 1fr);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 2rem;
    gap: 2rem;
  }
  .zones__other-name h3 {
    font-size: 1.9rem;
  }
  .zones__other-name p {
    font-size: 1.5rem;
  }
  .zones__other-content {
    gap: 2rem;
    padding: 2rem;
  }
  .zones__other-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    font-size: 1.4rem;
  }
  .zones__other-photos {
    gap: 0.8rem;
  }
  .zones__other-photos img {
    -ms-flex-preferred-size: calc((100% - 1.6rem) / 3);
        flex-basis: calc((100% - 1.6rem) / 3);
    width: calc((100% - 1.6rem) / 3);
  }
}

.visitor-support {
  position: relative;
  isolation: isolate;
  padding-block: 10.6rem 18.4rem;
  background: var(--c_navy3) url("../img/support-background.jpg") center/cover no-repeat;
  scroll-margin-top: 12rem;
}
.visitor-support::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("../img/support-pattern.png") center/cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
}
.visitor-support__inner {
  display: grid;
  gap: 3.7rem;
  width: min(1000px, 90%);
  margin-inline: auto;
}
.visitor-support__section-title {
  margin: 0;
  color: var(--c_white);
}
.visitor-support__section-title .liner--left::before,
.visitor-support__section-title .liner--left::after,
.visitor-support__section-title .liner--right::before,
.visitor-support__section-title .liner--right::after {
  background: var(--c_white);
}
.visitor-support__list {
  display: grid;
  gap: 2.8rem;
}
.visitor-support__item {
  display: grid;
  grid-template-columns: minmax(0, 520fr) minmax(0, 366fr);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 3.4rem;
  padding: 4rem;
  border-radius: 1.2rem;
  background: var(--c_white);
  color: var(--c_navy2);
}
.visitor-support__content {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
}
.visitor-support__title {
  padding-block: 0.2rem 0.8rem;
  border-bottom: 1px solid var(--service-rule);
  font-size: 2.3rem;
  line-height: 1.4;
  font-weight: 700;
}
.visitor-support__desc {
  font-size: 1.6rem;
  line-height: 1.625;
  overflow-wrap: anywhere;
}
.visitor-support__photo {
  width: 100%;
  aspect-ratio: 366/222;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.8rem;
}
.visitor-support__details {
  display: grid;
  gap: 0.7rem;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: 700;
}
.visitor-support__details > div {
  display: grid;
  grid-template-columns: 8.4rem minmax(0, 1fr);
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 0.8rem;
}
.visitor-support__details dt {
  padding: 0.2rem 1.2rem 0.2rem 0.6rem;
  -webkit-clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
          clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
  background: var(--c_navy3);
  color: var(--c_white);
  font-size: 1.4rem;
  text-align: center;
}
.visitor-support__note {
  font-size: 1.4rem;
}
@media screen and (max-width: 1024px) {
  .visitor-support__item {
    gap: 2.4rem;
    padding: 3rem;
  }
  .visitor-support__title {
    font-size: 2.1rem;
  }
}
@media screen and (max-width: 768px) {
  .visitor-support {
    padding-block: 5.6rem 8rem;
    scroll-margin-top: 9rem;
  }
  .visitor-support__inner {
    gap: 2.8rem;
  }
  .visitor-support__section-title {
    font-size: 1.7rem;
  }
  .visitor-support__list {
    gap: 2.4rem;
  }
  .visitor-support__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    padding: 2.4rem 2rem;
  }
  .visitor-support__title {
    font-size: 1.9rem;
  }
  .visitor-support__desc, .visitor-support__details {
    font-size: 1.4rem;
  }
  .visitor-support__photo {
    width: min(366px, 100%);
    margin-inline: auto;
  }
}
/*# sourceMappingURL=style.css.map */