* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

main {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
}

main {
  max-width: 750px;
  margin: 0 auto;
}

.header {
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  z-index: 100;
  height: 136px;
}
.header__nav {
  display: none;
  height: 100vh;
  padding: 2.5em 1em;
  background: url(../img/header_bg.png) no-repeat center center/cover;
  overflow: scroll;
}
.header__nav-item img {
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto 27.5px;
}
.header__btn {
  position: absolute;
  top: 22.5px;
  right: 21.5px;
  width: 45.5px;
  height: 45.5px;
  background: url(../img/hamburger.png) no-repeat center center/cover;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.header__btn .bar {
  background-color: #000;
  width: 26.5px;
  height: 4px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.header__btn .bar:first-child {
  -webkit-transform: translate(-50%, calc(-50% - 9px));
          transform: translate(-50%, calc(-50% - 9px));
}
.header__btn .bar:nth-child(2) {
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.header__btn .bar:last-child {
  -webkit-transform: translate(-50%, calc(-50% + 9px));
          transform: translate(-50%, calc(-50% + 9px));
}
.header.is-open .header__nav {
  display: block;
}
.header.is-open .header__btn .bar:first-child {
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}
.header.is-open .header__btn .bar:nth-child(2) {
  opacity: 0;
}
.header.is-open .header__btn .bar:last-child {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

.is-scrolled .header__btn {
  opacity: 1;
}

.fv {
  position: relative;
}
.fv__movie video {
  width: 100%;
  height: 100%;
}

.example {
  background: url(../img/example_bg.png) no-repeat center center/cover;
  padding: 14px 24.5px 15px;
}
.example__title {
  margin-bottom: 20px;
}
.example__swiper {
  padding-bottom: 35px;
}
.example__pagination {
  bottom: 0px !important;
}
.example .swiper-pagination-bullet {
  width: 9.5px;
  height: 9.5px;
  background-color: #fff;
  opacity: 1;
}
.example .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #FEDE89;
}

.voice {
  background: url(../img/voice_bg.png) no-repeat center center/cover;
}
.voice__inner {
  padding: 13px 0 30px;
}
.voice__title {
  width: 85%;
  margin: 0 auto 15.5px;
}
.voice__swiper {
  margin-bottom: 15.5px;
}
.voice__list {
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
}
.voice__text {
  max-width: 225px;
  margin: 0 auto;
}

.youtube {
  position: relative;
}
.youtube__movie {
  position: absolute;
  left: 50%;
  bottom: 9.5px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 83.733%;
  height: 178px;
}
.youtube__movie iframe {
  width: 100%;
  height: 100%;
}

.type {
  background: url(../img/type_bg.png) no-repeat center center/cover;
  padding: 22.5px 0 37.5px;
}
.type__title {
  width: 89.7333%;
  margin: 0 auto 17.5px;
}
.type__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18.5px 13px;
  width: 83.4667%;
  margin: 0 auto;
}
.type__item a {
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.type__item a:hover {
  opacity: 0.8;
}

.change {
  background: url(../img/change_bg.png) no-repeat center center/cover;
  padding: 14px 24.5px 15px;
}
.change__title {
  margin-bottom: 20px;
}
.change__item {
  background-color: #fff;
  border-radius: 21px;
  padding: 18px 2.5px 19px;
}
.change__item-title img {
  height: 31.5px;
  margin: 0 auto 19px;
}
.change__item-images {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 3.5px;
  margin-bottom: 27px;
}
.change__item-images-before, .change__item-images-after {
  width: 50%;
}
.change__item-images-title img {
  height: 6.5px;
  margin: 0 auto 6.5px;
}
.change__item-text {
  width: 80%;
  max-width: 263.5px;
  margin: 0 auto;
}
.change__swiper {
  padding-bottom: 35px;
}
.change__pagination {
  bottom: 0px !important;
}
.change .swiper-pagination-bullet {
  width: 9.5px;
  height: 9.5px;
  background-color: #fff;
  opacity: 1;
}
.change .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #7DBB28;
}

.lightbox {
  -webkit-transform: translateY(17vh);
          transform: translateY(17vh);
}

.access {
  padding: 26px 11.5px 32px;
  background: url(../img/access_bg.png) no-repeat center center/cover;
}
.access__text {
  width: 69.8667%;
  margin: 0 auto 24px;
}
.access__map {
  width: 100%;
  margin: 0 auto 24px;
  height: 300px;
}
.access__map iframe {
  width: 100%;
  height: 100%;
}
.access__time {
  margin-top: 40px;
}

.footer {
  padding-top: 42px;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 750px;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.fixed__btn {
  width: 50%;
}