html {
  scroll-padding-top: 80px;
}

.area_mainvisual {
  aspect-ratio: 750/760;
  padding: 0 6%;
  position: relative;
  background: url(../img/common/tricolour.png) no-repeat center bottom, -webkit-gradient(linear, left top, left bottom, from(rgb(0, 82, 165)), color-stop(40%, rgb(0, 82, 165)), color-stop(40%, rgba(0, 82, 165, 0)), to(rgba(0, 82, 165, 0)));
  background: url(../img/common/tricolour.png) no-repeat center bottom, linear-gradient(to bottom, rgb(0, 82, 165) 0%, rgb(0, 82, 165) 40%, rgba(0, 82, 165, 0) 40%, rgba(0, 82, 165, 0) 100%);
  background-size: 100%, 100%;
}
.area_mainvisual .img {
  position: absolute;
}
.area_mainvisual .img.img01 {
  width: 88.2666666667%;
  top: 10.1333333333%;
  opacity: 0;
}
.area_mainvisual .img.img02 {
  width: 62.6666666667%;
  top: 22.4%;
}
.area_mainvisual .img.img03 {
  width: 41.2%;
  top: 53.0666666667%;
  left: 29.8%;
  opacity: 0;
}

.area_lead {
  margin-top: 1.2em;
  padding-bottom: 2em;
}
.area_lead .tit_lead,
.area_lead .box_text {
  opacity: 0;
}
.area_lead .tit_lead {
  font-size: min(48 / 750 * 100vw, 32px);
  color: #0052a5;
}
.area_lead .box_text {
  margin-top: 1em;
}
.area_lead .box_text p + p {
  margin-top: 1.8em;
}

#lineup {
  padding: 2.9em 0 12.4em;
  background: url(../img/common/diagonal_w.png) no-repeat center top, url(../img/common/tricolour_w.png) no-repeat center bottom;
  background-color: #0052a5;
  background-size: 100% auto, 100% auto;
}
#lineup, #lineup a {
  color: #fff;
}
#lineup .box_lineup .item {
  margin-top: 3.9em;
}
#lineup .box_lineup .item .img,
#lineup .box_lineup .item .tit_item {
  margin-inline: auto;
}
#lineup .box_lineup .item .text {
  margin-top: 0.8em;
}
#lineup .box_lineup .item .img {
  margin-top: 1.1em;
}
#lineup .box_lineup .item01 {
  margin-top: 2.7em;
}
#lineup .box_lineup .item01 .tit_item {
  width: 31.2%;
}
#lineup .box_lineup .item01 .img {
  width: 37.6%;
}
#lineup .box_lineup .item02 .tit_item {
  width: 52.5333333333%;
}
#lineup .box_lineup .item02 .img {
  width: 56.5333333333%;
  margin-top: 1.4em;
}
#lineup .box_lineup .item03 .tit_item {
  width: 40.6666666667%;
}
#lineup .box_lineup .item03 .img {
  width: 36.1333333333%;
}
#lineup .box_lineup .item04 .tit_item {
  width: 39.0666666667%;
}
#lineup .box_lineup .item04 .img {
  width: 21.4666666667%;
}
#lineup .box_btn {
  width: 60%;
  margin-top: 1.55em;
}
#quality {
  padding: 2.4em 0 4.2em;
}
#quality .txt_lead {
  margin-top: 1.8em;
  line-height: 2;
}
#quality .box_image {
  width: 92%;
  margin: 0.8em auto 0;
}
#quality .box_btn {
  margin-top: 1.6em;
}

#usersvoice {
  padding: 3.8em 0 4em;
  background: url(../img/top/usersvoice_bg.gif);
  background-size: 0.8rem;
}
#usersvoice .txt_lead {
  margin-top: 2em;
  line-height: 2;
}
#usersvoice .box {
  position: relative;
}
#usersvoice .box .voice {
  width: 96%;
}
#usersvoice .box .img {
  position: absolute;
  bottom: 0;
}
#usersvoice .box.box01 {
  margin-top: 1em;
  padding-bottom: 3.4em;
}
#usersvoice .box.box01 .img {
  width: 40%;
  right: -2.9%;
}
#usersvoice .box.box02 {
  padding-bottom: 4.7em;
}
#usersvoice .box.box02 .voice {
  margin-left: 4%;
}
#usersvoice .box.box02 .img {
  width: 34.2%;
  left: -1%;
}
#usersvoice .box_btn {
  margin-top: 1.8em;
}

#history {
  padding: 3.8em 0 5em;
  background: url(../img/top/history_bg.png) no-repeat center top;
  background-size: 100%;
}
#history .txt_lead {
  margin-top: 2em;
  line-height: 2;
}
#history .img {
  width: 94%;
  margin: 2em auto 0;
}
#history .box_btn {
  margin-top: 2.8em;
}

#gallery {
  margin-top: -11em;
  padding: 2.8em 0 9.2em;
  position: relative;
  z-index: 5;
  background: url(../img/common/diagonal.png) no-repeat center top, url(../img/common/tricolour.png) no-repeat center bottom, linear-gradient(to bottom, transparent 0%, transparent 200px, #0052a5 200px, #0052a5 100%);
}
@media screen and (min-width: 501px) {
  #gallery {
    background: url(../img/common/diagonal.png) no-repeat center top, url(../img/common/tricolour.png) no-repeat center bottom, linear-gradient(to bottom, transparent 0%, transparent 250px, #0052a5 250px, #0052a5 100%);
  }
}
#gallery {
  background-size: 100%;
}
#gallery .box_gallery {
  margin-top: 2.3em;
}
#gallery .box_gallery .swiper .swiper-slide .img {
  position: relative;
  background: #fff;
}
#gallery .box_gallery .swiper .swiper-slide .img img {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
@media (hover: hover) {
  #gallery .box_gallery .swiper .swiper-slide .img:hover img {
    opacity: 0.8;
  }
}
#gallery .box_gallery .swiper .swiper-slide button.js-modal {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
#gallery .box_gallery .caption {
  margin-top: 0.8em;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
}
#gallery .box_gallery .swiper-pagination {
  margin-top: 0.85em;
  position: relative;
}
#gallery .box_gallery .swiper-pagination .swiper-pagination-bullet {
  width: min(24 / 750 * 100vw, 16px);
  height: min(24 / 750 * 100vw, 16px);
  margin: 0 6px;
  border: 1px solid #fff;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #0052a5;
  opacity: 1;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#gallery .box_gallery .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #fff;
}
@media (hover: hover) {
  #gallery .box_gallery .swiper-pagination .swiper-pagination-bullet:hover {
    background: #fff;
  }
}
#gallery .box_gallery .swiper-button-prev,
#gallery .box_gallery .swiper-button-next {
  width: min(90 / 750 * 100vw, 60px);
  height: min(90 / 750 * 100vw, 60px);
  background: url(../img/common/slider_arrow.png) no-repeat center #3bbee8;
  background-size: 100%;
  border-radius: 50%;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  top: 4.3em;
  margin-top: auto;
}
#gallery .box_gallery .swiper-button-prev::before, #gallery .box_gallery .swiper-button-prev::after,
#gallery .box_gallery .swiper-button-next::before,
#gallery .box_gallery .swiper-button-next::after {
  content: none;
}
@media (hover: hover) {
  #gallery .box_gallery .swiper-button-prev:hover,
  #gallery .box_gallery .swiper-button-next:hover {
    background-color: #0052a5;
  }
}
#gallery .box_gallery .swiper-button-next {
  -webkit-transform: scale(-1, 1);
          transform: scale(-1, 1);
}