.top_page p {
  color: white;
  line-height: 30px;
}

main.top_page {
  background-color: #123a78;
}

.fv {
  height: 180vw;
  width: 100%;
  background: linear-gradient(#fff 0%, #0067a5 60.67%, #123a78 100%);
  position: relative;
  z-index: 3;
  max-height: 930px;
  min-height: 675px;
}

.top_decor {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

#fv_img_1 {
  background-image: url(../images/top/fv/fv-1.png);
  aspect-ratio: 620 / 155;
  background-position: right bottom;
  top: 3.9vw;
  left: -32.3vw;
  width: 165vw;
  background-size: contain;
}

#fv_img_2 {
  background-image: url(../images/top/fv/fv-2.png);
  aspect-ratio: 375 / 189;
  top: 28.5vw;
  width: 100%;
}

#fv_img_3 {
  background-image: url(../images/top/fv/fv-3.png);
  aspect-ratio: 208 / 148;
  top: 28.3vw;
  right: 18.2vw;
  width: 55.2vw;
}

#fv_img_4 {
  background-image: url(../images/top/fv/fv-4.png);
  aspect-ratio: 179 / 242;
  width: 47.5vw;
  left: 7.2vw;
  top: 55.7vw;
  z-index: 2;
}

#fv_img_5 {
  background-image: url(../images/top/fv/fv-5.png);
  aspect-ratio: 443 / 334;
  width: 443px;
  left: -96px;
  top: 92vw;
}

#fv_img_6 {
  background-image: url(../images/top/fv/fv-6.png);
  aspect-ratio: 144 / 116;
  width: 144px;
  left: 50vw;
  top: 124vw;
}

#fv_img_7 {
  background-image: url(../images/top/fv/bonvoyage-small.png);
  aspect-ratio: 40 / 12;
  width: 85.33vw;
  top: 5vw;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
}

@media (min-width: 550px) and (max-width: 767px) {
  #fv_img_6 {
    top: calc(465px + 30vw);
  }

  #fv_img_7 {
    background-image: url(../images/top/fv/bonvoyage.png);
  }
}

.top_about {
  /* background-color: #123a78; */
  padding: 0 27px;
  height: 922px;
  position: relative;
  z-index: 2;
}

.top__content_wrapper {
  position: relative;
  z-index: 2;
}

.top_about p {
  margin-top: 40px;
  font-family: "Noto Sans JP", sans-serif;
}

#top_about_img_1 {
  background-image: url(../images/top/about/about-1.png);
  aspect-ratio: 261 / 174;
  width: 261px;
  right: 0;
  top: 42px;
}

#top_about_img_2 {
  background-image: url(../images/top/about/about-2.png);
  aspect-ratio: 579 / 401;
  width: 579px;
  right: -231px;
  top: 310px;
}

#top_about_img_3 {
  background-image: url(../images/top/about/about-3.png);
  aspect-ratio: 257 / 343;
  width: 257px;
  left: -44px;
  top: 592px;
}

#top_about_img_4 {
  background-image: url(../images/top/about/about-4.png);
  aspect-ratio: 316 / 160;
  width: 316px;
  left: 50%;
  transform: translateX(-50%);
  top: 439px;
}

#top_about_img_5,
#top_about_img_7 {
  display: none;
}

#top_about_img_6 {
  background-image: url(../images/top/about/about-5.png);
  aspect-ratio: 240 / 255;
  width: 240px;
  top: 678px;
  left: 36vw;
}

@media (max-width: 374px) {
  .fv {
    height: 180vw;
    min-height: auto;
  }

  #fv_img_5 {
    width: 118.1vw;
    left: -25.6vw;
    top: 92vw;
  }

  #fv_img_6 {
    width: 38.4vw;
    left: 50vw;
    top: 124vw;
  }

  .top_about {
    height: 246vw;
    min-height: 830px;
  }

  #top_about_img_2 {
    width: 154.4vw;
    right: -61.6vw;
    top: 82.67vw;
  }

  #top_about_img_3 {
    width: 68.5vw;
    left: -11.7vw;
    top: 158vw;
  }

  #top_about_img_4 {
    width: 84.3vw;
    top: 500px;
  }

  #top_about_img_6 {
    width: 64vw;
    top: 678px;
    left: 36vw;
  }
}

.top_service {
  padding: 120px 27px 90px 27px;
  position: relative;
  z-index: 1;
}

#top_service_img_1 {
  background-image: url(../images/top/service/ship/ship-1.png);
  aspect-ratio: 352 / 222;
  width: 352px;
  top: 0;
  left: -6px;
}

#top_service_img_2 {
  background-image: url(../images/top/service/ship/ship-2.png);
  aspect-ratio: 390 / 270;
  width: 390px;
  top: 240px;
  right: -167px;
}

#top_service_img_3 {
  background-image: url(../images/top/service/ship/ship-3.png);
  aspect-ratio: 198 / 264;
  width: 198px;
  top: 385px;
  left: -20px;
}

#top_service_img_4 {
  background-image: url(../images/top/service/ship/ship-4.png);
  aspect-ratio: 223 / 276;
  width: 223px;
  top: 250px;
  left: 50%;
  transform: translateX(-50%);
}

#top_service_img_5,
#top_service_img_6 {
  display: none;
}

@media (max-width: 374px) {
  #top_service_img_1 {
    width: 93.9vw;
    top: 0;
    left: -1.5vw;
  }

  #top_service_img_2 {
    width: 104vw;
    top: 240px;
    right: -44.5vw;
  }

  #top_service_img_3 {
    width: 52.8vw;
    top: 385px;
    left: -5.3vw;
  }

  #top_service_img_4 {
    width: 59.5vw;
    top: 250px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.top_service__content {
  margin-top: 345px;
  display: flex;
  flex-direction: column;
  gap: 160px;
}

.top__content_wrapper h3 {
  font-size: 48px;
  font-family: "Oswald", sans-serif;
  line-height: 48px;
  color: #fff500;
  margin-top: 12px;
}

.top_service__item {
  position: relative;
}

.top_service__item__content {
  position: relative;
  z-index: 2;
}

.top_service__item__content {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.top_service__item_img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  max-width: 490px;
  flex-basis: 59%;
}

.top_service__item__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.top_service__item p {
  margin-top: 20px;
  font-family: "Noto Sans JP", sans-serif;
}

.top_service__item .figure_button {
  margin-top: 20px;
}

.top_service__item:first-child {
  position: relative;
}

.top_service__item:nth-child(2) {
  position: relative;
}

.top_service__item:nth-child(2) .top_service__item_text {
  margin-right: auto;
}

.top_service__item:first-child .top_service__item_img {
  background-image: url(../images/top/service/ship/ship.png);
}

.top_service__item:nth-child(2) .top_service__item_img {
  background-image: url(../images/top/service/factory/factory.png);
}

.top_service__item:last-child .top_service__item_img {
  background-image: url(../images/top/service/locker/locker.png);
}

.top_service__item:first-child .top_service__item_img::after {
  position: absolute;
  content: "";
  background-image: url(../images/top/service/ship/ship-6.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 161 / 137;
  width: 161px;
  right: -10px;
  bottom: -145px;
  z-index: -1;
}

.top_service__item:nth-child(2) .top_service__item_img::after {
  position: absolute;
  content: "";
  background-image: url(../images/top/service/factory/factory-4.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 192 / 204;
  width: 192px;
  right: -55px;
  bottom: -95px;
}

#top_service_item__bg__img_1 {
  background-image: url(../images/top/service/ship/ship-5.png);
  aspect-ratio: 390 / 270;
  width: 390px;
  top: 151px;
  right: -175px;
}

#top_service_item__bg__img_2 {
  background-image: url(../images/top/service/ship/ship-1.png);
  aspect-ratio: 409 / 258;
  width: 409px;
  top: 289px;
  left: -110px;
}

#top_service_item__bg__img_4 {
  background-image: url(../images/top/service/factory/factory-1.png);
  aspect-ratio: 275 / 303;
  width: 275px;
  top: -140px;
  left: -125px;
}

#top_service_item__bg__img_5 {
  background-image: url(../images/top/service/factory/factory-3.png);
  aspect-ratio: 198 / 264;
  width: 198px;
  top: -85px;
  right: -60px;
}

#top_service_item__bg__img_6 {
  background-image: url(../images/top/service/factory/factory-2.png);
  aspect-ratio: 390 / 270;
  width: 390px;
  top: 84px;
  right: -125px;
}

.top_service__item:last-child .top_service__item_img::after {
  position: absolute;
  content: "";
  background-image: url(../images/top/service/locker/locker-3.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 185 / 164;
  width: 185px;
  right: -27px;
  bottom: -80px;
}

#top_service_item__bg__img_7 {
  background-image: url(../images/top/service/locker/locker-4.png);
  aspect-ratio: 364 / 275;
  width: 364px;
  top: -140px;
  left: -134px;
}

#top_service_item__bg__img_8 {
  background-image: url(../images/top/service/locker/locker-1.png);
  aspect-ratio: 421 / 262;
  width: 421px;
  top: 17px;
  right: -190px;
}

#top_service_item__bg__img_9 {
  background-image: url(../images/top/service/locker/locker-5.png);
  aspect-ratio: 198 / 264;
  width: 198px;
  top: calc(75vw - 180px);
  left: -103px;
}

@media (min-width: 544px) {
  #top_service_item__bg__img_9 {
    left: calc(50vw - 260px - 120px);
    top: 228px;
  }
}

#top_service_item__bg__img_10 {
  display: none;
}

.top_news {
  padding: 80px 27px;
  background-image: url(../images/top/news/news-bg.png);
  background-size: 150px 150px;
  background-color: white;
}

.top_news .title h2 {
  color: #001f65;
}

.top_news .title span {
  color: black;
}

@media (max-width: 374px) {
  #top_service_item__bg__img_1 {
    width: 104vw;
    top: 65.6vw;
    right: -175px;
  }

  #top_service_item__bg__img_2 {
    width: 109vw;
    top: 289px;
    left: -29.3vw;
  }

  .top_service__item:first-child .top_service__item_img::after {
    width: 42.9vw;
    right: -2.7vw;
    bottom: -38.7vw;
  }

  #top_service_item__bg__img_4 {
    width: 73.3vw;
    top: -140px;
    left: -33.3vw;
  }

  #top_service_item__bg__img_5 {
    width: 52.8vw;
    top: -85px;
    right: -16vw;
  }

  #top_service_item__bg__img_6 {
    width: 104vw;
    top: 84px;
    right: -33.3vw;
  }

  .top_service__item:nth-child(2) .top_service__item_img::after {
    width: 51.2vw;
    right: -14.7vw;
    bottom: -25.3vw;
  }

  .top_service__item .top_service__item_text {
    position: relative;
    z-index: 2;
  }

  #top_service_item__bg__img_7 {
    width: 97vw;
    top: -140px;
    left: -35.7vw;
  }

  #top_service_item__bg__img_8 {
    width: 112vw;
    top: 17px;
    right: -51vw;
  }

  #top_service_item__bg__img_9 {
    width: 52.9vw;
    top: 28vw;
    left: -27.5vw;
  }

  .top_service__item:last-child .top_service__item_img::after {
    width: 49.3vw;
    right: -7.2vw;
    bottom: -21.3vw;
  }
  footer {
    padding-left: 27px;
    padding-right: 27px;
  }
}

.news-container-index {
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 20px 7px;
  border-radius: 10px;
  max-width: 826px;
  margin: 40px auto 0;
  border: 1px solid #707070;
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.16));
}

.news-container__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 7px 20px;
  border-bottom: 1px solid #707070;

  color: #484848;
}

.news-container__item__date {
  width: 112px;
  height: 26px;
  color: white;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  background-color: #123a78;
  text-align: center;
  line-height: 26px;
  border-radius: 13px;
  padding: 0 8px;
}

.news-container__item__text {
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 24px;
}

@media (min-width: 768px) {
  .fv {
    height: 62.9vw;
    z-index: 1;
  }
  #fv_img_1 {
    top: -4.4vw;
    left: -6.1vw;
    width: 121vw;
  }
  #fv_img_2 {
    top: 12.5vw;
    width: 100%;
  }

  #fv_img_3 {
    top: 13.2vw;
    right: 19.6vw;
    width: 54vw;
    z-index: 2;
  }

  #fv_img_4 {
    width: 29.3vw;
    left: 7.1vw;
    top: 26.9vw;
    max-width: 400px;
  }

  #fv_img_5 {
    width: 51.5vw;
    left: -9.8vw;
    top: 62.2vw;
  }

  #fv_img_6 {
    width: 17.2vw;
    left: 8.6vw;
    top: 76vw;
    max-width: 235px;
  }

  #fv_img_7 {
    display: block;
  }

  #fv_img_7 {
    background-image: url(../images/top/fv/bonvoyage-pc.png);
    aspect-ratio: 40 / 12;
    width: 73.2vw;
    max-width: 1000px;
    top: 2vw;
    left: 50%;
    transform: translateX(-50%);
    background-position: center;
  }

  #top_about_img_1 {
    background-image: url(../images/top/about/about-1.png);
    aspect-ratio: 261 / 174;
    width: 38.1vw;
    right: 0;
    top: 13.5vw;
  }

  .top_about .title {
    text-align: left;
    margin: 0;
  }

  .title h2 {
    font-size: 80px;
    line-height: normal;
  }

  .title span {
    font-size: 30px;
  }

  .top_about p {
    margin-top: 20px;
    max-width: 490px;
  }

  .top_about .top__content_wrapper {
    margin-left: 44.5vw;
  }

  .top_about {
    height: 100vw;
    min-height: 1300px;
    max-height: 1428px;
  }

  .top_about .figure_button {
    margin: 40px 0 0 0;
  }

  #top_about_img_0 {
    background-image: url(../images/top/about/about-0.png);
    aspect-ratio: 703 / 444;
    width: 704px;
    left: -115px;
    top: 460px;
  }

  #top_about_img_2 {
    width: 780px;
    right: -277px;
    top: 372px;
  }

  #top_about_img_3 {
    width: 29vw;
    left: -9.4vw;
    top: 300px;
  }

  #top_about_img_4 {
    width: 570px;
    left: auto;
    right: 103px;
    transform: none;
    top: 524px;
    z-index: 2;
  }

  #top_about_img_5 {
    display: block;
    background-image: url(../images/top/about/about-6.png);
    aspect-ratio: 78 / 54;
    width: 780px;
    top: 878px;
    left: -342px;
  }

  #top_about_img_6 {
    width: 437px;
    top: 642px;
    left: 133px;
    transform: none;
    z-index: 3;
  }

  #top_about_img_7 {
    display: block;
    aspect-ratio: 396 / 528;
    background-image: url(../images/top/about/about-7.png);
    width: 396px;
    top: 613px;
    right: -22px;
    z-index: 1;
  }

  .top_service {
    padding: 0 0 160px 0;
    z-index: 3;
  }

  #top_service_img_1 {
    display: none;
  }

  #top_service_img_2 {
    width: 780px;
    top: -190px;
    right: -309px;
  }

  #top_service_img_4 {
    width: 335px;
    top: -110px;
    left: auto;
    transform: none;
    right: 125px;
    z-index: 2;
  }

  #top_service_img_7 {
    background-image: url(../images/top/service/ship/ship-9.png);
    aspect-ratio: 396 / 528;
    width: 396px;
    top: -50px;
    right: -128px;
    /* z-index: 2; */
  }

  .top_service__item:nth-child(2) {
    right: 42.5px;
    z-index: 2;
  }

  .top_service__content {
    margin-top: 120px;
  }

  .top_service__item__content {
    display: flex;
    flex-direction: row;
    max-width: 830px;
    margin: 0 auto;
    gap: 20px;
  }

  .top_service__item_text {
    flex-basis: 40%;
  }

  .top_service__item_img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    max-width: 490px;
    flex-basis: 59%;
  }

  .top_service__item:first-child .top_service__item_img::after {
    width: 411px;
    height: 350px;
    right: auto;
    left: -261px;
    top: -235px;
    z-index: 2;
  }

  .top_service__item:nth-child(2) .top_service__item__content {
    max-width: 915px;
    flex-direction: row-reverse;
  }

  #top_service_item__bg__img_1 {
    background-image: url(../images/top/service/ship/ship-7.png);
    width: 390px;
    top: -230px;
    left: -239px;
    right: auto;
    width: 901px;
  }

  #top_service_img_3 {
    display: none;
  }

  #top_service_img_5 {
    display: block;
    background-image: url(../images/top/service/ship/ship-8.png);
    width: 818px;
    height: 517px;
    top: 60px;
    right: -409px;
    z-index: 0;
  }

  #top_service_item__bg__img_2 {
    display: block;
    background-image: url(../images/top/service/ship/ship-3.png);
    width: 396px;
    height: 528px;
    top: 0px;
    left: -62px;
  }

  .top_service__item:nth-child(2) .top_service__item_img::after {
    width: 320px;
    right: -255px;
    bottom: -92px;
  }

  #top_service_item__bg__img_5 {
    width: 396px;
    top: 108px;
    right: -75px;
  }

  #top_service_item__bg__img_6 {
    width: 780px;
    top: -84px;
    right: -312px;
    z-index: 0;
  }

  #top_service_item__bg__img_7 {
    width: 728px;
    top: -20px;
    left: auto;
    right: -150px;
  }

  #top_service_item__bg__img_4 {
    display: none;
  }

  #top_service_item__bg__img_8 {
    background-image: url(../images/top/service/locker/locker-6.png);
    aspect-ratio: 421 / 262;
    width: 697px;
    top: -194px;
    right: auto;
    left: -279px;
    z-index: 2;
  }

  #top_service_item__bg__img_9 {
    width: 396px;
    top: -20px;
    left: -62px;

    z-index: 2;
    background-image: url(../images/top/service/locker/locker-2.png);
  }

  #top_service_item__bg__img_10 {
    display: block;
    background-image: url(../images/top/service/factory/factory-1.png);
    aspect-ratio: 275 / 303;
    width: 550px;
    top: -520px;
    left: -136px;
  }

  .top_service__item:last-child .top_service__item_img::after {
    width: 351px;
    right: auto;
    bottom: auto;
    top: 137px;
    left: -224px;
  }

  .top_news {
    position: relative;
    z-index: 4;
  }

  .top_service__item .figure_button {
    margin-top: 12px;
  }

  .top_service__item:nth-child(2) .figure_button {
    margin-left: 0;
  }

  .top_news {
    padding: 160px 27px;
  }

  @media (max-width: 1365px) {
    #top_about_img_2 {
      width: 57.1vw;
      right: -20.3vw;
      top: 372px;
    }

    #top_about_img_4 {
      width: 41.7vw;
      left: auto;
      right: 7.5vw;
      transform: none;
      top: 524px;
      z-index: 2;
    }

    #top_about_img_5 {
      width: 57.1vw;
      top: calc(878px + 10vw - 134px);
      left: -25vw;
    }

    #top_about_img_6 {
      width: 32vw;
      top: 642px;
      left: 9.7vw;
      transform: none;
    }

    #top_about_img_7 {
      width: 29vw;
      top: 613px;
      right: -1.6vw;
    }

    #top_about_img_0 {
      background-image: url(../images/top/about/about-0.png);
      aspect-ratio: 703 / 444;
      width: 51.5vw;
      left: -8.4vw;
      top: 460px;
    }

    #top_service_img_2 {
      width: 57.1vw;
      top: -190px;
      right: -22.6vw;
    }

    #top_service_img_4 {
      width: 24.5vw;
      top: -110px;
      left: auto;
      transform: none;
      right: 9.1vw;
    }

    #top_service_img_5 {
      width: 59.9vw;
      height: 37.8vw;
      top: 60px;
      right: -29.9vw;
    }

    #top_service_img_7 {
      width: 29vw;
      top: -50px;
      right: -9.4vw;
    }

    #top_service_item__bg__img_1 {
      top: -230px;
      left: -17.5vw;
      right: auto;
      width: 66vw;
    }

    #top_service_item__bg__img_2 {
      width: 29vw;
      height: 38.7vw;
      top: calc(410px - 30vw);
      left: -4.5vw;
    }

    .top_service__item:first-child .top_service__item_img::after {
      width: 30.1vw;
      height: 25.6vw;
      left: -19.1vw;
      top: -17.2vw;
    }

    .top_service__item {
      padding: 0 27px;
    }

    #top_service_item__bg__img_5 {
      width: 29vw;
      top: 108px;
      right: -5.5vw;
    }

    #top_service_item__bg__img_6 {
      width: 57.1vw;
      top: -84px;
      right: -22.8vw;
    }

    #top_service_item__bg__img_7 {
      width: 53.3vw;
      top: -20px;
      right: -11vw;
    }

    #top_service_item__bg__img_8 {
      width: 51vw;
      top: -194px;
      left: -20.4vw;
    }

    #top_service_item__bg__img_9 {
      width: 29vw;
      top: -20px;
      left: -4.5vw;
    }

    #top_service_item__bg__img_10 {
      width: 41.2vw;
      top: -212px;
      left: -15.1vw;
    }

    #top_service_item__bg__img_10 {
      width: 40.2vw;
      top: -520px;
      left: -10vw;
    }

    @media (max-width: 1248px) {
      .top_service__item:last-child .top_service__item_img::after {
        left: calc(50% - 50vw + 170px);
        top: 230px;
      }
    }

    @media (max-width: 1075px) {
      .top_service__item:nth-child(2) .top_service__item_img::after {
        width: 35.7vw;
        right: -15.4vw;
        bottom: -10.3vw;
      }

      .top_service__item:first-child .top_service__item_img::after {
        left: -10.1vw;
      }

      @media (max-width: 896px) {
        .top_service__item:nth-child(2) .top_service__item_img::after {
          width: 35.7vw;
          right: -15.4vw;
          bottom: -10.3vw;
        }
        .top_service__item:last-child .top_service__item_img::after {
          width: 39.2vw;
          top: 25.7vw;
        }
      }
    }

    @media (max-width: 1052px) {
      .top_service__item:nth-child(2) {
        right: 0;
        z-index: 2;
      }
    }
  }
}

@media (min-width: 1466px) {
  .fv {
    max-height: 1185px;
  }
}

@media (min-width: 768px) {
  .news {
    padding: 0 27px 160px;
  }

  .news_page .page_cover {
    height: auto;
    padding: 126px 0 74px;
  }

  .news-container-index {
    padding: 40px;
    margin-top: 80px;
  }

  .news-container__item {
    flex-direction: row;
    gap: 12px;
    /* justify-content: center; */
    padding-bottom: 32px;
  }

  .news_container {
    padding: 160px 27px;
  }

  .news_container__item {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 30px 15px;
  }
}

@media (min-width: 1440px) {
  #fv_img_6 {
    display: none;
    width: 17.2vw;
    left: 8.6vw;
    top: 76vw;
    max-width: 235px;
  }

  #top_about_img_8 {
    background-image: url(../images/top/fv/fv-6.png);
    aspect-ratio: 144 / 116;
    width: 235px;
    left: 200px;
    top: 200px;
  }
}
