@charset "utf-8";

/* ==========================
ローディング
============================= */
#loading {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transition: all 1s ease;
  &.loaded {
    opacity: 1;
    visibility: hidden;
    pointer-events: none;
  }
  &.show-img .spinner img {
    opacity: 1;
    transform: scale(1);
  }
  .loadLine {
    display: flex;
    align-items: end;
    gap: .3rem;
    &.sp_block {display: none;}
  }
  .loadLine span {
    opacity: 0;
    transform: translateY(20px);
    display: inline-block;
    transition: opacity 0.5s ease, transform 0.5s ease;
    &.show {
      opacity: 1;
      transform: translateY(0);
    }
    img[src="img/loading/shi.svg"] {
      width: 28px;
      aspect-ratio: 19 / 29;
    }
    img[src="img/loading/ta.svg"] {
      width: 35px;
      aspect-ratio: 22 / 26;
    }
    &:has(img[src="img/loading/yr2.svg"]) {position: relative;top: -5px;}
    &:has(img[src="img/loading/yr5.svg"]) {position: relative;top: -5px;}
  }
  @media screen and (max-width: 767px) {
    .loadLine {
      &.sp_block {display: flex;}
    }
    .loadLine span {
      &.pc_block {display: none;}
      &:has(img[src="img/loading/yr2.svg"]) {top: -2.5px;}
      &:has(img[src="img/loading/yr5.svg"]) {top: -2.5px;}
    }
  }
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  @media screen and (max-width: 767px) {
    width: 300px;
    margin: auto;
    justify-content: center;
    .loadLine:nth-of-type(1){width: 250px;}
    .loadLine:nth-of-type(2){width: 100px;}
  }
}

/* メインビジュアル箇所 */
.top_mv {
  position: relative;
}
.top_mv--txt {
  position: absolute;
  font-size: 9.6rem;
  font-weight: 700;
  color: var(--light-gray);
  padding-left: 24px;
  bottom: 144px;
  left: 5%;
  line-height: 1;
  z-index: 2;
  &::before {
    content: '';
    position: absolute;
    background: var(--light-gray);
    width: 1px;
    height: 90%;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
  }
  @media screen and (max-width: 767px) {
    font-size: min(9.6rem, 18vw);
    padding-left: 16px;
    bottom: 40px;
    right: 5%;
  }
}

.top_mv--random {
  height: 840px;
  @media screen and (max-width: 767px) {
    height: 560px;
  }
}
.top_mv--random img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* トピックス */
.top_topics {
  background: var(--light-gray);
}
.top_topics .swiper-outer {margin-top: 0;}
.topics_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}
.topics_item {
  width: 100%;
  padding: 1em;
  background: #fff;
  color: var(--var-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4em 0.8em;
  &:has(.topics_item--block) {
    flex-wrap: initial;
    justify-content: space-between;
  }
  @media screen and (max-width: 767px) {
    &:has(.topics_item--block) {flex-wrap: wrap;}
  }
}
.topics_item--block {
  display: flex;
  align-items: center;
  gap: 0.4em 0.8em;
  /* .topics_ttl {margin-top: 2px;} */
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
  }
}
.topics_label {
  min-width: 136px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--var-color);
  font-size: var(--basic-txt);
  font-weight: bold;
  border: 1px solid var(--var-color);
  &.emergency {
    color: #f00;
    border: 1px solid #f00;
  }
}
.topics_ttl {
  font-size: var(--basic-txt);
  font-weight: 500;
  a {
    text-decoration: underline;
  }
  a:hover {
    text-decoration: none;
  }
}
.topics_others {
  width: 100%;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8em;
  a {
    width: max-content;
    background: var(--var-color);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
.swiper-topics {
  &:not(:has(.swiper-slide:nth-child(8))) {
    width: 100%;
    max-width: 920px;
  }
}
.swiper-topics .swiper-slide {
  a {
    display: flex;
    width: 100%;
  }
  a img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* 見出し（グレー／svg画像） */
.gray_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  margin-bottom: var(--space-30);
}
.gray_heading--sub {
  position: relative;
  bottom: 2px;
  margin-bottom: 1em;
  @media screen and (max-width: 767px) {
    
  }
}
.gray_heading--main {
  font-size: var(--font-32);
  letter-spacing: var(--letter-64);
  color: var(--var-color);
}

/* 電車・きっぷ */
.top_trains {
  padding: 0;
}
@media screen and (max-width: 767px) {
  .top_trains .gray_heading--sub {
    font-size: min(7.2rem, 9.2vw);
  }
}
.ticket_list {
  width: 100%;
  max-width: 850px;
  margin: var(--space-30) auto 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.ticket_list--item {
  background: var(--light-gray);
  width: calc(20% - 16px);
  max-width: 154px;
  height: 144px;
  @media screen and (max-width: 767px) {
    width: calc(50% - 5px);
  }
}
.ticket_list--itemLink {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}
.ticket_list--fig {
  background: var(--var-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  & + p {
    font-size: var(--basic-txt);
    color: var(--var-color);
  }
}
.ticket_list--mega {
  position: absolute;
  width: 100%;
  max-width: 850px;
  height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75em;
  background: var(--light-gray);
  top: 346px;
  right: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
  @media screen and (max-width: 767px) {
    display: none;
  }
}
.ticket_list--item:nth-child(2) .ticket_list--mega {justify-content: center;}
.ticket_list--item:hover .ticket_list--mega {
  height: auto;
  padding: 1em 1.5em;
  overflow: initial;
  z-index: 1;
  &::before {
    content: '';
    position: absolute;
    background: var(--light-gray);
    width: 154px;
    height: 20px;
    top: -20px;
  }
}
.ticket_list--item:nth-child(2):hover .ticket_list--mega::before {left: 174px;}
.ticket_list--item:nth-child(3):hover .ticket_list--mega::before {
  left: 0;
  right: 0;
  margin: auto;
}

.ticket_list--megaLink {
  a {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    padding: 0.25em 1em;
  }
}

/* 電車・きっぷ（trains_list） */
.top_trains .trains_list {
  &::before {
    content: '';
    position: absolute;
    background: var(--light-gray);
    width: 100%;
    max-width: 850px;
    height: 3px;
    top: 32px;
    right: 0;
    left: 0;
    margin: auto;
  }
}
.top_trains p.center_txt:has(a.more_btn) {
  margin-top: var(--space-30);
}


/* お知らせ */
.top_news {
  padding-bottom: 162px;
  @media screen and (max-width: 767px) {
    
  }
}


/* エリア インフォメーション */
.top_area {
  position: relative;
  background: var(--light-gray);
  &::after {
    content: '';
    position: absolute;
    background: url(../img/area_bg.webp)no-repeat center;
    background-size: cover;
    width: 100%;
    height: 500px;
    top: 10em;
    right: 0;
    left: 0;
    margin: auto;
  }
}
.top_area--inner {
  position: relative;
  z-index: 1;
  @media screen and (max-width: 767px) {
    
  }
}
.top_area .gray_heading {
  margin-top: -157px;
}
@media screen and (max-width: 767px) {
  .top_area .gray_heading {
    position: absolute;
    top: -144px;
    right: 0;
    left: 0;
    margin-top: 0;
    margin-bottom: 0;
    height: 144px;
    justify-content: flex-end;
  }
}

.area_list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 3em;
  li {
    width: calc(25% - 15px);
    max-width: 270px;
  }
  li a {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    li {
      width: 270px;
    }
  }
}
.area_listcircle {
  position: relative;
  height: 154px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.area_listcircle--txt {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 154px;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  color: var(--var-color);
  p {
    position: relative;
    font-size: var(--font-24);
    writing-mode: vertical-rl;
    text-orientation: upright;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  p::before {
    content: '';
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px solid var(--var-color);
    border-radius: 50%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
  }
}
.area_listcircle--fig {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 154px;
  height: 100%;
}
.area_listtitle {
  background: #fff;
  color: var(--var-color);
  font-size: var(--font-20);
  font-weight: 400;
}
.top_area .swiper-outer:first-of-type {
  margin-top: var(--space-65);
}
.top_area--cover {
  width: 100%;
  height: 450px;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
  @media screen and (max-width: 767px) {
    height: 240px;
  }
}

/* おでかけ・イベント Pick Up */
.swiper-event .swiper-station--icon {display: none;}
.swiper-event .swiper-station--ex.bg_gray {background: #fff;}

/* 企業情報 */
.top_profile--link {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0 24px;
  li {
    width: 100%;
    max-width: calc(33.3% - 16px);
  }
  li a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: var(--space-30);
    border-top: 1px solid var(--var-color);
    font-size: var(--font-20);
    color: var(--var-color);
  }
  li:nth-last-of-type(-n + 3) a {
    border-bottom: 1px solid var(--var-color);
  }
  @media screen and (max-width: 767px) {
    gap: 0 12px;
    li {
      max-width: calc(50% - 6px);
    }
    li a {
      padding: 1em var(--space-30);
      font-size: min(1.6rem, 3.3vw);
    }
    li:nth-child(8) a {border-bottom: none;}
  }
}


/* banner_list */
.banner_list {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto var(--space-65);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  li {
    width: 100%;
    max-width: 220px;
  }
  @media screen and (max-width: 767px) {
    flex-wrap: wrap;
    gap: 10px;
    li {
      width: calc(50% - 5px);
    }
  }
}