@charset "UTF-8";
.top-mv {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 45px);
}
.top-mv__block {
  position: absolute;
  top: 72px;
  left: 72px;
  display: grid;
  grid-template: 1fr/1fr;
  width: 486px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
}
.top-mv__title {
  grid-column: 1/2;
  grid-row: 1/2;
}
.top-mv__title img {
  width: 100%;
  height: 100%;
}
.top-mv__text {
  grid-column: 1/2;
  grid-row: 1/2;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 48px;
}
.top-mv__text .c-btn {
  align-self: start;
  margin-top: 20px;
}
.top-mv__control {
  position: absolute;
  right: 12px;
  bottom: 12px;
}
.top-mv__controlBtn {
  display: block;
  width: 32px;
  height: 32px;
  border: 0;
  color: #006078;
}
.top-mv__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.top-mv__background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top-mv__movieWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
}
.top-mv__scroll {
  transform: rotate(90deg) translateX(-100%);
  transform-origin: left bottom;
  position: absolute;
  left: 28px;
  bottom: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-family: "Cormorant Infant", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 600;
  text-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
}
.top-mv__scroll::after {
  display: block;
  content: "";
  width: 28px;
  height: 1px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.4);
  background-color: #fff;
}
.top-news {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
.top-section__head__copy {
  display: grid;
  grid-template: 1fr/1fr;
  align-items: end;
  margin-bottom: 44px;
}
.top-section__head__copy .en {
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: 0;
  color: #E0F0F3;
  font-family: "Cormorant Infant", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
  font-size: 9.6rem;
  font-weight: 400;
  line-height: 75%;
}
.top-section__head__copy .jp {
  grid-column: 1/2;
  grid-row: 1/2;
  z-index: 1;
  margin-bottom: -8px;
  color: #0081A0;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 120%;
  letter-spacing: -1%;
}
.top-section__head__title {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 500;
  font-size: 5.6rem;
  letter-spacing: 2%;
  line-height: 1.5;
}
.top-section__head.-h2 {
  margin-bottom: 34px;
  text-align: center;
}
.top-section__head.-h3 {
  margin-bottom: 40px;
}
.top-section__head.-h3 .en {
  font-size: 6.4rem;
}
.top-section__head.-h3 .jp {
  padding-left: 12px;
  font-size: 1.8rem;
  position: relative;
}
.top-section__head.-h3 .jp:before {
  position: absolute;
  display: block;
  content: "";
  left: 0;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background-color: #0081A0;
}
.top-section__head.-h3 .top-section__head__copy {
  margin-bottom: 72px;
}
.top-section__head.-h3 .top-section__head__title {
  font-size: 4.4rem;
}
.top-section__head.-h4 {
  margin-bottom: 24px;
  text-align: center;
}
.top-section__head.-h4 .en {
  font-size: 1.6rem;
}
.top-section__head.-h4 .top-section__head__copy {
  margin-bottom: 0;
}
.top-section__head.-h4 .top-section__head__title {
  font-size: 4.4rem;
}
.top-section__grid {
  display: grid;
  gap: 32px 80px;
  width: min(1248px, 100% - 32px);
  margin-inline: auto;
}
.top-section__grid__image img {
  width: 100%;
  height: auto;
}
.top-section__grid__text {
  max-width: 518px;
}
.top-story {
  position: relative;
  padding-top: 118px;
  padding-bottom: 668px;
}
.top-story .top-section__head__title {
  padding-left: 20px;
}
.top-story__intro {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 200%;
  text-align: center;
}
.top-story__image {
  position: absolute;
}
.top-story__image.-image01 {
  top: 60px;
  left: calc(50% + 185px);
}
.top-story__image.-image02 {
  top: 202px;
  right: calc(50% + 299px);
}
.top-story__image.-image03 {
  top: 341px;
  left: calc(50% + 477px);
  z-index: 2;
}
.top-story__image.-image04 {
  top: 430px;
  left: calc(50% + 213px);
  z-index: 1;
}
.top-story__image.-image05 {
  top: 571px;
  right: calc(50% + 143px);
}
.top-story__image.-image06 {
  top: 864px;
  right: calc(50% - 9px);
}
.top-maintenance {
  position: relative;
  padding-bottom: 446px;
}
.top-maintenance__image {
  position: absolute;
}
.top-maintenance__image.-image02 {
  bottom: 222px;
  left: calc(50% + 162px);
}
.top-maintenance__image.-image03 {
  bottom: 132px;
  right: calc(50% - 40px);
}
.top-safety {
  position: relative;
  margin-bottom: 140px;
  padding-bottom: 353px;
}
.top-safety__image {
  position: absolute;
}
.top-safety__image.-image02 {
  bottom: 208px;
  left: calc(50% + 297px);
}
.top-safety__image.-image03 {
  bottom: 0;
  left: calc(50% - 160px);
}
.top-disaster {
  position: relative;
  padding-bottom: 557px;
}
.top-disaster .top-section__head {
  padding-top: 8px;
}
.top-disaster .top-section__head .top-section__head__title {
  font-size: 4.8rem;
}
.top-disaster__image {
  position: absolute;
}
.top-disaster__image.-image02 {
  bottom: 448px;
  right: calc(50% + 208px);
}
.top-disaster__image.-image03 {
  bottom: 148px;
  left: calc(50% - 88px);
}
.top-gallery {
  padding-top: 80px;
  padding-bottom: 76px;
  background: url(/ss/initiatives/assets/img/top/bg-gallery-pc.webp) no-repeat center center/cover;
  color: #fff;
}
.top-gallery__inner {
  padding-left: 80px;
  padding-right: 80px;
}
.top-gallery__intro {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 140%;
  text-align: center;
}
.top-gallery__text {
  margin-bottom: 48px;
  font-size: 1.4rem;
  line-height: 170%;
  text-align: center;
}
.top-gallery .c-btnWrap {
  margin-top: 4px;
  text-align: center;
}
.top-gallery .c-btn {
  width: min(360px, 100%);
}
.top-gallery .c-card__title {
  color: #fff;
}
.top-gallery .swiper-button-next, .top-gallery .swiper-button-prev {
  border: 1px solid #fff;
  color: #fff;
}
.top-gallery .swiper-pagination {
  color: #fff;
}
.top-gallery .swiper-pagination-current::after {
  background-color: #fff;
}
.top-event {
  padding-top: 96px;
  padding-bottom: 96px;
}
.top-event__grid {
  display: grid;
}
.top-event__carousel {
  overflow: hidden;
}
.top-event__title {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}
.top-event__title .en {
  color: #0081A0;
  font-family: "Cormorant Infant", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, sans-serif;
  font-weight: 600;
  line-height: 75%;
}
.top-event__title .jp {
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 120%;
}
.top-event__copy01 {
  color: #006078;
  font-family: "Noto Serif JP", "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "ヒラギノ明朝 ProN W3", "MS PMincho", "MS 明朝", serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 150%;
}
.top-event__copy02 {
  color: #006078;
  font-size: 1.4rem;
  line-height: 180%;
}
.top-event__btnWrap {
  padding-top: 38px;
}

.swiper {
  overflow: visible;
}
.swiper-slide {
  width: 320px;
}

/* ▼hover挙動 */
@media (hover: hover) {
  .top-mv__controlBtn:hover {
    background-color: #E0F0F3;
  }
  .top-gallery .c-card:has(.c-card__image:hover) .c-card__title, .top-gallery .c-card:has(.c-card__title:hover) .c-card__title {
    color: #fff;
  }
  .top-bnr a:hover {
    opacity: 0.7;
  }
}
/* ▼タブレット用デザインとして付け足すデザイン */
@media print, screen and (min-width: 768px) {
  .top-section__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .top-section__grid__text {
    padding-bottom: 40px;
  }
  .top-section__grid.-reverse .top-section__grid__image {
    order: 2;
  }
  .top-section__grid.-reverse .top-section__grid__text {
    order: 1;
    margin-left: auto;
  }
  .top-safety .-h3 .top-section__head__copy {
    margin-bottom: 112px;
  }
  .top-safety .top-section__grid__text p {
    line-height: 1.6;
  }
  .top-event__grid {
    grid-template-columns: 480px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "head carousel" "btn carousel";
  }
  .top-event__head {
    grid-area: head;
    padding-top: 48px;
    padding-inline: 80px 115px;
  }
  .top-event__carousel {
    grid-area: carousel;
  }
  .top-event__btnWrap {
    padding-inline: 80px 115px;
    grid-area: btn;
  }
}
/* ▼モバイルのみ付け足すデザイン */
@media screen and (max-width: 767.98px) {
  .top-mv {
    height: calc(100dvh - 45px);
  }
  .top-mv__block {
    top: 12px;
    left: 12px;
    width: 247px;
  }
  .top-mv__text {
    padding: 114px 24px 28px 24px;
    font-size: 1.4rem;
  }
  .top-mv__text p {
    line-height: 1.6;
  }
  .top-mv__text .c-btn {
    padding-block: 8px;
  }
  .top-mv__control {
    right: 8px;
  }
  .top-mv__background {
    background-image: url(/ss/initiatives/assets/img/top/img-poster-sp.webp);
  }
  .top-mv__scroll {
    left: 10px;
    bottom: 24px;
  }
  .top-news {
    min-height: 64px;
  }
  .top-section__head__copy {
    margin-bottom: 24px;
  }
  .top-section__head__copy .en {
    font-size: 5.6rem;
  }
  .top-section__head__copy .jp {
    margin-bottom: -6px;
    font-size: 1.4rem;
  }
  .top-section__head__title {
    font-size: 3.2rem;
  }
  .top-section__head.-h2 {
    margin-bottom: 26px;
  }
  .top-section__head.-h3 {
    margin-bottom: 32px;
  }
  .top-section__head.-h3 .en {
    font-size: 4.2rem;
  }
  .top-section__head.-h3 .jp {
    padding-left: 12px;
    font-size: 1.6rem;
  }
  .top-section__head.-h3 .top-section__head__copy {
    margin-bottom: 30px;
  }
  .top-section__head.-h3 .top-section__head__title {
    font-size: 2.8rem;
  }
  .top-section__head.-h4 {
    margin-bottom: 24px;
  }
  .top-section__head.-h4 .top-section__head__copy {
    margin-bottom: 4px;
  }
  .top-section__head.-h4 .top-section__head__title {
    font-size: 2.8rem;
  }
  .top-section__grid {
    width: min(1248px, 100% - 16px);
  }
  .top-section__grid__text {
    max-width: 100%;
    padding-inline: 16px;
  }
  .top-story {
    padding-top: 92px;
    padding-bottom: 447px;
  }
  .top-story .top-section__head__title {
    padding-left: 16px;
  }
  .top-story__intro {
    font-size: 1.6rem;
  }
  .top-story__image.-image01 {
    top: 36px;
    left: calc(50% + 56px);
    width: 61px;
  }
  .top-story__image.-image02 {
    top: 63px;
    right: calc(50% + 80px);
    width: 92px;
  }
  .top-story__image.-image03 {
    top: 337px;
    left: calc(50% + 109px);
    width: 63px;
  }
  .top-story__image.-image04 {
    top: 374px;
    left: calc(50% + 14px);
    width: 130px;
  }
  .top-story__image.-image05 {
    top: 485px;
    right: calc(50% + 46px);
    width: 110px;
  }
  .top-story__image.-image06 {
    top: 584px;
    right: calc(50% + 4px);
    width: 72px;
  }
  .top-maintenance {
    margin-bottom: 32px;
    padding-bottom: 406px;
  }
  .top-maintenance__image.-image02 {
    bottom: 208px;
    left: calc(50% - 32px);
    width: 172px;
  }
  .top-maintenance__image.-image03 {
    bottom: 88px;
    right: calc(50% - 8px);
    width: 148px;
  }
  .top-safety {
    margin-bottom: 90px;
    padding-bottom: 338px;
  }
  .top-safety__image.-image02 {
    bottom: 176px;
    left: auto;
    right: calc(50% - 4px);
    width: 128px;
  }
  .top-safety__image.-image03 {
    bottom: 0;
    left: calc(50% - 72px);
    width: 218px;
  }
  .top-disaster {
    padding-top: 0;
    padding-bottom: 480px;
  }
  .top-disaster__image.-image02 {
    bottom: 360px;
    left: calc(50% + 4px);
    width: 127px;
  }
  .top-disaster__image.-image03 {
    bottom: 152px;
    right: calc(50% - 76px);
    left: auto;
    width: 196px;
  }
  .top-gallery {
    padding-top: 80px;
    padding-bottom: 120px;
    background-image: url(/ss/initiatives/assets/img/top/bg-gallery-sp.webp);
  }
  .top-gallery__inner {
    padding-left: 24px;
    padding-right: 24px;
  }
  .top-gallery__intro {
    font-size: 1.6rem;
  }
  .top-gallery__text {
    margin-top: 6px;
    margin-bottom: 54px;
  }
  .top-gallery .c-btnWrap {
    margin-top: 48px;
  }
  .top-gallery .c-btn {
    width: 100%;
  }
  .top-event {
    padding-top: 80px;
    padding-bottom: 120px;
  }
  .top-event__inner {
    padding-inline: 24px;
  }
  .top-event__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .top-event__head {
    text-align: center;
  }
  .top-event__title {
    margin-bottom: 28px;
  }
  .top-event__title .jp {
    font-size: 2.4rem;
  }
  .top-event__copy01 {
    font-size: 1.6rem;
  }
  .top-event__copy02 {
    margin-top: 8px;
    line-height: 1.7;
  }
  .top-event__btnWrap {
    padding-top: 8px;
  }
  .top-event__carousel {
    overflow: visible;
  }
  .swiper-slide {
    width: 264px;
  }
  .swiper-slide .c-tagList {
    margin-top: 12px;
  }
}