@charset "utf-8";

.wrap {
  min-height: 650px;
}

@media all and (max-width: 576px) {
  .wrap {
    min-height: auto;
  }
}

.main-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

video.main-video {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

video.main-video.is-blur {
  filter: blur(10px);
}

/* .main-swiper
------------------------------*/
.main-swiper {
  width: 100%;
  height: 100%;
}

.main-swiper .swiper-slide {
  opacity: 1 !important;
}

.main-swiper .swiper-slide-active {
  z-index: 100 !important;
}

.swiper-slide-active {
  /* clip-path: circle(0%); */
}

.swiper-slide-active.is-first {
  clip-path: circle(100%);
}

.swiper-slide-active.is-show-right {
  animation: clipmove-right 0.75s ease-out 0s 1 both;
}

@keyframes clipmove-right {
  0% {
    clip-path: circle(0% at calc(100% - 90px));
  }

  100% {
    clip-path: circle(150% at calc(100% - 90px));
  }
}

.swiper-slide-active.is-show-left {
  animation: clipmove-left 0.75s ease-out 0s 1 both;
}

@keyframes clipmove-left {
  0% {
    clip-path: circle(0% at 90px);
  }

  100% {
    clip-path: circle(150% at 90px);
  }
}

.page02.swiper-slide-active.is-show-right,
.page01.swiper-slide-active.is-show-left {
  animation: fade-in 0.5s ease-out 0s 1 both;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* .page01
------------------------------*/
.main-swiper .swiper-slide.page01 {
  position: relative;
  color: #fff;
}

.main-swiper .swiper-slide.page01::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #051532;
  /* opacity: 0.7; */
  opacity: 0.3;
  z-index: 1;
}

.main-swiper .swiper-slide.page01 .top-header {
  /* width: 680px; */
  width: 294px;
  position: absolute;
  /* top: 50%; */
  top: 30px;
  left: 30px;
  /* transform: translate(0, -50%); */
  z-index: 1;
}

@media all and (max-width: 1920px) {
  .main-swiper .swiper-slide.page01 .top-header {
    /* width: 35.5vw; */
  }
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page01 .top-header {
    /* width: 72vw; */
    width: 180px;
    top: calc(30px + 65px);
    left: 20px;
  }
}

.main-swiper .swiper-slide.page01 .top-header .top-logo {
  margin-bottom: 70px;
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page01 .top-header .top-logo {
    margin-bottom: 35px;
  }
}

@media all and (max-width: 360px) {
  .main-swiper .swiper-slide.page01 .top-header .top-logo {
    margin-bottom: 10px;
  }
}

.main-swiper .swiper-slide.page01 .top-header .top-link {
}

.main-swiper .swiper-slide.page01 .top-header .top-link a {
  display: inline-block;
  font-size: 1.5rem;
  color: #fff;
  border: solid 1px #fff;
  text-decoration: none;
  line-height: 1.5;
  padding: 15px 20px;
  text-align: center;
  letter-spacing: 0.1em !important;
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page01 .top-header .top-link a {
    font-size: 1.15rem;
    padding: 8px 12px;
  }
}

.main-swiper .swiper-slide.page01 .top-header .top-link a .deadline {
  display: block;
  font-size: 1.3rem;
  color: #fff;
  border-top: solid 1px #fff;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em !important;
  margin-top: 9px;
  padding-top: 8px;
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page01 .top-header .top-link a .deadline {
    font-size: 1rem;
  }
}

.main-swiper .swiper-slide.page01 .top-txt {
  width: 100%;
  padding-left: 30px;
  line-height: 1.75;
  color: #fff;
  font-weight: 500;
  font-size: 2.4rem;
  position: absolute;
  left: 0;
  bottom: 50px;
  z-index: 1;
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page01 .top-txt {
    font-size: 1.6rem;
    padding-left: 20px;
    padding-right: 20px;
    bottom: 40px;
  }
}

@media all and (max-width: 360px) {
  .main-swiper .swiper-slide.page01 .top-txt {
    font-size: 4vw;
  }
}

.news {
  position: absolute;
  left: 25px;
  bottom: 25px;
  display: flex;
  align-items: center;
  z-index: 1;
  width: calc(100% - 350px);
  /* max-width: 800px; */
}

@media all and (max-width: 768px) {
  .news {
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: auto;
    /* max-width: none; */
  }
}

.news .news-heading {
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  position: relative;
  padding-right: 25px;
  margin-right: 25px;
}

@media all and (max-width: 768px) {
  .news .news-heading {
    display: none;
  }
}

.news .news-heading::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 28px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(0, -50%);
}

.news .news-txtarea {
  /* width: 800px; */
  width: 100%;
  overflow: hidden;
}

@media all and (max-width: 768px) {
  .news .news-txtarea {
    width: 100%;
  }
}

.news .news-txtarea ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.news .news-txtarea ul li {
  display: none;
}

.news .news-txtarea ul li div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1.4;
}

@media all and (max-width: 768px) {
  .news .news-txtarea ul li div {
    display: block;
    font-size: 1.2rem;
    /* height: 60px; */
  }
}

@media all and (max-width: 320px) {
  .news .news-txtarea ul li div {
    font-size: 1.1rem;
  }
}

.news .news-txtarea ul li div > span {
  /* width: 12em; */
  margin-right: 20px;
  letter-spacing: 0.1em;
  font-weight: 300;
  /* line-height: 1.0; */
  display: inline-block;
}

@media all and (max-width: 768px) {
  .news .news-txtarea ul li div > span {
    width: 100%;
    margin-right: 0;
    margin-bottom: 8px !important;
    opacity: 0.7;
  }
}

.news .news-txtarea ul li div a {
  color: #fff;
  text-decoration: none;
  display: flex;
}

.news .news-txtarea ul li div a:hover {
  opacity: 0.6;
}

.news .news-txtarea ul li div a span {
  position: relative;
  /* word-break: break-all; */
}

@media all and (max-width: 576px) {
  .news .news-txtarea ul li div a span {
    word-break: normal;
  }
}

/* .news .news-txtarea ul li div a span::before {
  content: "";
  display: block;
  height: 1px;
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  background-color: #fff;
}

.news .news-txtarea ul li div a:hover span::before {
  animation: underline_animation_on .3s ease 0s 1 forwards;
} */

/* .page02
------------------------------*/
.main-swiper .swiper-slide.page02 {
  position: relative;
  color: #fff;
}

.main-swiper .swiper-slide.page02::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #051532;
  opacity: 0.6;
  z-index: 1;
}

.msg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px;
  z-index: 1;
}

@media all and (max-width: 768px) {
  .msg {
    top: 56%;
    width: calc(100% - 40px);
  }
}

/* .msg .msg-heading {
  font-size: 3.4rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-bottom: 45px;
  line-height: 1.5;
}
@media all and (max-width: 768px) {
  .msg .msg-heading {
    font-size: 2.6rem;
    margin-bottom: 20px;
  }
}
@media all and (max-width: 320px) {
  .msg .msg-heading {
    font-size: 1.8rem;
  }
} */
.msg .msg-heading {
  width: 100%;
  max-width: 696px;
  margin: 0 auto 45px;
}

@media all and (max-width: 768px) {
  .msg .msg-heading {
    max-width: 267px;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 320px) {
  .msg .msg-heading {
    margin-bottom: 20px;
  }
}

.msg .msg-heading img.pc-only {
  display: inline;
}

@media all and (max-width: 768px) {
  .msg .msg-heading img.pc-only {
    display: none;
  }
}

.msg .msg-heading img.sp-only {
  display: none;
}

@media all and (max-width: 768px) {
  .msg .msg-heading img.sp-only {
    display: inline;
  }
}

.msg .msg-movie {
  width: 100%;
  max-width: 415px;
  margin: 0 auto 40px;
  cursor: pointer;
  position: relative;
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .msg .msg-movie {
    width: 48%;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 320px) {
  .msg .msg-movie {
    margin-bottom: 20px;
  }
}

.msg .msg-movie::after {
  content: '';
  display: block;
  width: 67px;
  height: 67px;
  background: url(../img/common/icon_play.svg) no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease-out;
}

@media all and (max-width: 768px) {
  .msg .msg-movie::after {
    width: 40px;
    height: 40px;
  }
}

.msg .msg-movie:hover::after {
  background-image: url(../img/common/icon_play_hover.svg);
}

.msg .msg-txt {
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 2.5;
  text-align: center;
}

@media all and (max-height: 1050px) {
  .msg .msg-txt {
    line-height: 2;
  }
}

@media all and (max-height: 750px) {
  .msg .msg-txt {
    line-height: 1.5;
  }
}

@media all and (max-width: 768px) {
  .msg .msg-txt {
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-align: left;
    margin: 0 0 20px;
    line-height: 2;
  }

  .msg .msg-txt br {
    display: none;
  }
}

@media all and (max-height: 553px) {
  .msg .msg-txt {
    font-size: 1.1rem;
    line-height: 1.75;
  }
}

@media all and (max-width: 320px) {
  .msg .msg-txt {
    font-size: 1rem;
  }
}

.msg-btn-logo-pc {
  width: 166px;
  height: 166px;
  position: fixed;
  /* right: calc(30px + 230px + 30px); */
  left: 30px;
  bottom: 30px;
  z-index: 2;
  cursor: pointer;
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 1920px) {
  .msg-btn-logo-pc {
    /* right: calc(30px + 12vw + 30px); */
  }
}

@media all and (max-width: 1400px) {
  .msg-btn-logo-pc {
    /* right: calc(30px + 170px + 30px); */
  }
}

@media all and (max-width: 768px) {
  .msg-btn-logo-pc {
    display: none;
  }
}

.msg-btn-logo-sp {
  text-align: center;
  display: none;
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .msg-btn-logo-sp {
    display: block;
  }
}

.msg-btn-logo-sp span {
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  padding: 10px 16px;
  border: solid 1px #fff;
  cursor: pointer;
}

.msg-btn-logo-sp span::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 10.5px;
  background: url(../img/common/icon_arrow_right_white.svg) no-repeat center center / 100% auto;
  margin-left: 15px;
}

/* .modal
------------------------------*/
.modal-logo,
.modal-msg,
.modal-works {
  display: none;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.modal-logo .modal-bg,
.modal-msg .modal-bg,
.modal-works .modal-bg {
  background-color: #051532;
  height: 100%;
  position: absolute;
  width: 100%;
  opacity: 0.95;
  top: 0;
  left: 0;
}

.modal-logo .modal-close,
.modal-msg .modal-close,
.modal-works .modal-close {
  width: 60px;
  height: 60px;
  background: url(../img/common/icon_close.svg) no-repeat center center / 100% auto;
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  transition: all 0.2s ease-out;
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .modal-logo .modal-close,
  .modal-msg .modal-close,
  .modal-works .modal-close {
    width: 54px;
    height: 54px;
    background-color: rgba(255, 255, 255, 0.1);
    background-image: none;
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
  }

  .modal-logo .modal-close::before,
  .modal-msg .modal-close::before,
  .modal-works .modal-close::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background: url(../img/common/icon_close.svg) no-repeat center center / 100% auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.modal-logo .modal-close:hover,
.modal-msg .modal-close:hover,
.modal-works .modal-close:hover {
  opacity: 0.6;
}

.modal-msg .modal-content,
.modal-works .modal-content {
  width: 100%;
  max-width: 790px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.modal-msg .modal-content .msg-wrap,
.modal-works .modal-content .works-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  width: 100%;
}

.modal-msg .modal-content .msg-wrap iframe,
.modal-works .modal-content .works-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-logo .modal-content {
  width: 100%;
  max-width: 940px;
  padding: 0 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content {
    display: block;
  }
}

.modal-logo .modal-content-left {
  width: 45%;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content-left {
    width: 100%;
    margin: 0 0 25px;
  }
}

.modal-logo .modal-content-img {
  width: 100%;
  margin: 0 auto;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content-img {
    width: 54.5%;
  }
}

@media all and (max-width: 320px) {
  .modal-logo .modal-content-img {
    /* width: 100%; */
  }
}

.modal-logo .modal-content-right {
  width: 48%;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content-right {
    width: 100%;
  }
}

.modal-logo .modal-content-heading {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  margin: -8px 0 20px;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content-heading {
    font-size: 6.4vw;
    margin: 0 0 20px;
    text-align: center;
  }
}

.modal-logo .modal-content-txt {
  color: #fff;
  letter-spacing: -0.04em;
}

@media all and (max-width: 768px) {
  .modal-logo .modal-content-txt {
    letter-spacing: 0;
    line-height: 1.65;
  }
}

@media all and (max-width: 320px) {
  .modal-logo .modal-content-txt {
    font-size: 1rem;
  }
}

/* .page03
------------------------------*/
.main-swiper .swiper-slide.page03 {
  background: url(../img/top/works_bg@2x.jpg) no-repeat center center / cover;
  position: relative;
  color: #fff;
}

.main-swiper .swiper-slide.page03::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #051532;
  opacity: 0.8;
}

.works-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.works-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

@media all and (max-width: 768px) {
  .works-header {
    top: 56%;
    width: calc(100% - 40px);
  }
}

.works-heading {
  /* font-size: 11rem;
  margin-bottom: 40px; */
  font-size: 8.2rem;
  margin-bottom: 30px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-weight: 200;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

/* @media all and (max-width: 1920px) {
  .works-heading {
    font-size: 5.8vw;
    margin-bottom: 0.365em;
  }
}

@media all and (max-width: 1400px) {
  .works-heading {
    font-size: 8.2rem;
    margin-bottom: 30px;
  }
} */
@media all and (max-width: 768px) {
  .works-heading {
    font-size: 3.8rem;
    margin-bottom: 18px;
  }
}

@media all and (max-width: 320px) {
  .works-heading {
    font-size: 2.4rem;
    /* margin-bottom: 10px; */
  }
}

.works-movie {
  width: 100%;
  max-width: 415px;
  margin: 0 auto 40px;
  cursor: pointer;
  position: relative;
  opacity: 0;
  /* transform: translate(0, 10px); */
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .works-movie {
    width: 48%;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 320px) {
  .works-movie {
    margin-bottom: 20px;
  }
}

.works-movie::after {
  content: '';
  display: block;
  width: 67px;
  height: 67px;
  background: url(../img/common/icon_play.svg) no-repeat center center / 100% auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.2s ease-out;
}

@media all and (max-width: 768px) {
  .works-movie::after {
    width: 40px;
    height: 40px;
  }
}

.works-movie:hover::after {
  background-image: url(../img/common/icon_play_hover.svg);
}

.works-txt {
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
  margin: 0 0 60px;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 768px) {
  .works-txt {
    font-size: 1.25rem;
    letter-spacing: 0em;
    text-align: left;
    margin: 0 0 20px;
  }

  .works-txt br {
    display: none;
  }
}

@media all and (max-height: 553px) {
  .works-txt {
    font-size: 1.1rem;
    line-height: 1.75;
  }
}

@media all and (max-width: 320px) {
  .works-txt {
    font-size: 1rem;
  }
}

.works-btn {
  width: 360px;
  display: inline-block;
}

@media all and (max-width: 768px) {
  .works-btn {
    width: 280px;
  }

  .works-btn .btn02 {
    padding: 14px 0;
  }
}

@media all and (max-width: 576px) {
  .works-btn .btn02 {
    font-size: 1.1rem;
  }
}

.swiper-slide-active .works-heading,
.swiper-slide-active .works-movie,
.swiper-slide-active .works-txt {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

/* .page04
------------------------------*/
.main-swiper .swiper-slide.page04 {
  background: url(../img/top/gallery_bg@2x.jpg) no-repeat center center / cover;
  position: relative;
  color: #051532;
}

@media all and (max-width: 768px) {
  .main-swiper .swiper-slide.page04 {
    background-image: url(../img/top/gallery_bg_sp@2x.jpg);
  }
}

ul.gallery-img {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  /* slide */
  position: relative;
}

ul.gallery-img li {
  background: no-repeat left top / cover;
  width: 100%;
  height: 100%;
  /* slide */
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

@media all and (max-width: 768px) {
  ul.gallery-img li {
    background: no-repeat center center / cover;
  }
}

ul.gallery-img li.gallery-img01 {
  background-image: url(../img/top/gallery_img01@2x.png?v01);
}

ul.gallery-img li.gallery-img02 {
  background-image: url(../img/top/gallery_img02@2x.png?v01);
}

ul.gallery-img li.gallery-img03 {
  background-image: url(../img/top/gallery_img03@2x.png?v01);
}

@media all and (max-width: 768px) {
  ul.gallery-img li.gallery-img01 {
    background-image: url(../img/top/gallery_img01_sp@2x.png?v01);
  }

  ul.gallery-img li.gallery-img02 {
    background-image: url(../img/top/gallery_img02_sp@2x.png?v01);
  }

  ul.gallery-img li.gallery-img03 {
    background-image: url(../img/top/gallery_img03_sp@2x.png?v01);
  }
}

.gallery-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.gallery-header {
  position: absolute;
  left: 165px;
  top: 50%;
  transform: translate(0, -50%);
}

@media all and (max-width: 768px) {
  .gallery-header {
    top: 72%;
    left: 20px;
    right: 20px;
    transform: translate(0, -50%);
  }
}

.gallery-heading {
  font-size: 11rem;
  margin-bottom: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 200;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 1920px) {
  .gallery-heading {
    font-size: 5.8vw;
    margin-bottom: 0.365em;
  }
}

@media all and (max-width: 1400px) {
  .gallery-heading {
    font-size: 8.2rem;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 768px) {
  .gallery-heading {
    font-size: 3.8rem;
    margin-bottom: 10px;
    text-align: center;
  }
}

@media all and (max-width: 320px) {
  .gallery-heading {
    font-size: 2.4rem;
  }
}

.swiper-slide-active .gallery-heading {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.gallery-txt {
  font-size: 2.1rem;
  margin-bottom: 63px;
  letter-spacing: 0.08em;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 1920px) {
  .gallery-txt {
    font-size: 1.1vw;
    margin-bottom: 3em;
  }
}

@media all and (max-width: 1400px) {
  .gallery-txt {
    font-size: 1.5rem;
    margin-bottom: 50px;
  }
}

@media all and (max-width: 768px) {
  .gallery-txt {
    letter-spacing: 0em;
    margin-bottom: 20px;
    line-height: 1.65;
    text-align: center;
  }

  .gallery-txt br {
    display: none;
  }
}

@media all and (max-width: 320px) {
  .gallery-txt {
    font-size: 1rem;
  }
}

.swiper-slide-active .gallery-txt {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.gallery-btn {
  max-width: 280px;
}

@media all and (max-width: 768px) {
  .gallery-btn {
    max-width: 240px;
    margin: 0 auto;
  }

  .gallery-btn a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* .page05
------------------------------*/
.main-swiper .swiper-slide.page05 {
  background-color: #fff;
  color: #051532;
}

.history-content {
  width: 100%;
  height: 100%;
  display: flex;
}

.history-content-left {
  width: 60%;
  height: 100%;
}

@media all and (max-width: 1200px) {
  .history-content-left {
    width: 50%;
  }
}

@media all and (max-width: 768px) {
  .history-content-left {
    display: none;
  }
}

.history-content-right {
  width: 40%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

@media all and (max-width: 1200px) {
  .history-content-right {
    width: 50%;
  }
}

@media all and (max-width: 768px) {
  .history-content-right {
    width: 100%;
  }
}

ul.history-img {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  /* slide */
  position: relative;
}

ul.history-img.pc-only {
  display: block;
}

ul.history-img.sp-only {
  display: none;
}

@media all and (max-width: 768px) {
  ul.history-img.pc-only {
    display: none;
  }

  ul.history-img.sp-only {
    display: block;
  }
}

ul.history-img li {
  background: no-repeat center center / cover;
  width: 100%;
  height: 100%;
  /* slide */
  position: absolute;
  left: 0;
  top: 0;
}

@media all and (max-width: 768px) {
  ul.history-img li {
    height: 91%;
  }
}

ul.history-img li.history-img01 {
  background-image: url(../img/top/history_img01@2x.jpg?v01);
}

ul.history-img li.history-img02 {
  background-image: url(../img/top/history_img02@2x.jpg?v01);
  background-position: center top;
}

ul.history-img li.history-img03 {
  background-image: url(../img/top/history_img03@2x.jpg?v01);
}

@media all and (max-width: 768px) {
  ul.history-img li.history-img01 {
    background-image: url(../img/top/history_img01_sp@2x.png?v01);
  }

  ul.history-img li.history-img02 {
    background-image: url(../img/top/history_img02_sp@2x.png?v01);
    /* background-position: center top 65px; */
  }

  ul.history-img li.history-img03 {
    background-image: url(../img/top/history_img03_sp@2x.png?v01);
  }
}

.history-img-title {
  position: absolute;
  left: 20px;
  bottom: 20px;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.14em;
}

ul.history-img li.history-img02 .history-img-title,
ul.history-img li.history-img03 .history-img-title {
  color: #fff;
}

video.history-video {
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.2;
}

@media all and (max-width: 768px) {
  video.history-video {
    display: none;
  }
}

.history-header {
  position: absolute;
  left: 60px;
  top: 50%;
  transform: translate(0, -50%);
  /* width: auto; */
  /* width:calc(100% - 200px); */
}

@media all and (max-width: 1400px) {
  .history-header {
    /* width: 350px; */
  }
}

@media all and (max-width: 768px) {
  .history-header {
    top: 72%;
    left: 20px;
    right: 20px;
    transform: translate(0, -50%);
    /* width: auto; */
  }
}

.history-heading {
  font-size: 11rem;
  margin-bottom: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 200;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 1920px) {
  .history-heading {
    font-size: 5.6vw;
    margin-bottom: 0.365em;
  }
}

@media all and (max-width: 1400px) {
  .history-heading {
    font-size: 8.2rem;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 768px) {
  .history-heading {
    font-size: 3.8rem;
    margin-bottom: 10px;
    text-align: center;
  }
}

@media all and (max-width: 320px) {
  .history-heading {
    font-size: 2.4rem;
  }
}

.swiper-slide-active .history-heading {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.history-txt {
  font-size: 2.1rem;
  margin-bottom: 63px;
  letter-spacing: 0.08em;
  opacity: 0;
  /* transform: translate(0, 10px); */
  width: calc(calc(100vw - 100px) * 0.4 - 200px);
}

@media all and (max-width: 1920px) {
  .history-txt {
    font-size: 1.1vw;
    margin-bottom: 3em;
  }
}

@media all and (max-width: 1400px) {
  .history-txt {
    font-size: 1.5rem;
    margin-bottom: 50px;
  }
}

@media all and (max-width: 1200px) {
  .history-txt {
    width: calc(calc(100vw - 100px) * 0.4 - 100px);
  }
}

@media all and (max-width: 768px) {
  .history-txt {
    letter-spacing: 0em;
    margin-bottom: 20px;
    line-height: 1.65;
    text-align: center;
    width: auto;
  }

  .history-txt br {
    display: none;
  }
}

@media all and (max-width: 320px) {
  .history-txt {
    font-size: 1rem;
  }
}

.swiper-slide-active .history-txt {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.history-btn {
  max-width: 280px;
}

@media all and (max-width: 768px) {
  .history-btn {
    max-width: 240px;
    margin: 0 auto;
  }

  .history-btn a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

/* .page06
------------------------------*/
.main-swiper .swiper-slide.page06 {
  position: relative;
  color: #fff;
  background-color: #000;
}

ul.gift-img {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* slide */
  position: relative;
}

ul.gift-img li {
  width: 100%;
  height: 100%;
  /* slide */
  position: absolute;
  left: 0px;
  top: 0px;
}

@media all and (max-width: 768px) {
  ul.gift-img li {
    height: 75%;
  }
}

ul.gift-img li.gift-img01 {
  background: url(../img/top/gift_img01@2x.jpg) no-repeat center top / cover;
}

ul.gift-img li.gift-img01-blur {
  background: url(../img/top/gift_img01_blur@2x.jpg) no-repeat center top / cover;
}

ul.gift-img li.gift-img02 {
  background: url(../img/top/gift_img02@2x.jpg) no-repeat left top / cover;
}

ul.gift-img li.gift-img02-blur {
  background: url(../img/top/gift_img02_blur@2x.jpg) no-repeat left top / cover;
}

ul.gift-img li.gift-img03 {
  background: url(../img/top/gift_img03@2x.jpg) no-repeat center top / cover;
}

ul.gift-img li.gift-img03-blur {
  background: url(../img/top/gift_img03_blur@2x.jpg) no-repeat center top / cover;
}

ul.gift-img li::after {
  content: '';
  background: no-repeat center center / 100% auto;
  width: 940px;
  height: 902px;
  /* slide */
  position: absolute;
  right: -35px;
  bottom: 40px;
}

ul.gift-img li.gift-img01::after {
  background-image: url(../img/top/gift_img01_pc_blur@2x.png);
}

ul.gift-img li.gift-img01-blur::after {
  background-image: url(../img/top/gift_img01_pc@2x.png);
}

ul.gift-img li.gift-img02::after {
  background-image: url(../img/top/gift_img02_pc_blur@2x.png);
}

ul.gift-img li.gift-img02-blur::after {
  background-image: url(../img/top/gift_img02_pc@2x.png);
}

ul.gift-img li.gift-img03::after {
  background-image: url(../img/top/gift_img03_pc_blur@2x.png);
}

ul.gift-img li.gift-img03-blur::after {
  background-image: url(../img/top/gift_img03_pc@2x.png);
}

@media all and (max-width: 1920px) {
  ul.gift-img li::after {
    /* width: 690px; */
    width: 49vw;
    /* height: 660px; */
    height: 47vw;
  }
}

@media all and (max-width: 768px) {
  ul.gift-img li::after {
    background: no-repeat center top / 100% auto;
    /* width:127px; */
    /* width: 33.86vw; */
    width: 43vw;
    /* height: 260px; */
    height: calc(43vw * 2.04);
    position: absolute;
    right: auto;
    bottom: auto;
    /* top:95px; */
    top: 14vh;
    left: 50%;
    transform: translate(-50%, 0);
  }

  ul.gift-img li.gift-img01::after {
    background-image: url(../img/top/gift_img01_sp_blur@2x.png);
  }

  ul.gift-img li.gift-img01-blur::after {
    background-image: url(../img/top/gift_img01_sp@2x.png);
  }

  ul.gift-img li.gift-img02::after {
    background-image: url(../img/top/gift_img02_sp_blur@2x.png);
  }

  ul.gift-img li.gift-img02-blur::after {
    background-image: url(../img/top/gift_img02_sp@2x.png);
  }

  ul.gift-img li.gift-img03::after {
    background-image: url(../img/top/gift_img03_sp_blur@2x.png);
  }

  ul.gift-img li.gift-img03-blur::after {
    background-image: url(../img/top/gift_img03_sp@2x.png);
  }
}

@media all and (max-width: 320px) {
  ul.gift-img li::after {
    width: 40vw;
    height: calc(40vw * 2.04);
    top: 18vh;
  }
}

.gift-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@media all and (max-width: 768px) {
  .gift-content::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 25%);
  }
}

.gift-header {
  position: absolute;
  left: 165px;
  top: 50%;
  transform: translate(0, -50%);
}

@media all and (max-width: 768px) {
  .gift-header {
    top: 72%;
    left: 20px;
    right: 20px;
    transform: translate(0, -50%);
  }
}

.gift-heading {
  font-size: 11rem;
  margin-bottom: 40px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 200;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 1920px) {
  .gift-heading {
    font-size: 5.8vw;
    margin-bottom: 0.365em;
  }
}

@media all and (max-width: 1400px) {
  .gift-heading {
    font-size: 8.2rem;
    margin-bottom: 30px;
  }
}

@media all and (max-width: 768px) {
  .gift-heading {
    font-size: 3.8rem;
    margin-bottom: 10px;
    text-align: center;
  }
}

@media all and (max-width: 320px) {
  .gift-heading {
    font-size: 2.4rem;
  }
}

.swiper-slide-active .gift-heading {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.gift-txt {
  font-size: 2.1rem;
  margin-bottom: 63px;
  letter-spacing: 0.08em;
  opacity: 0;
  /* transform: translate(0, 10px); */
}

@media all and (max-width: 1920px) {
  .gift-txt {
    font-size: 1.1vw;
    margin-bottom: 3em;
  }
}

@media all and (max-width: 1400px) {
  .gift-txt {
    font-size: 1.5rem;
    margin-bottom: 50px;
  }
}

@media all and (max-width: 768px) {
  .gift-txt {
    letter-spacing: 0em;
    margin-bottom: 20px;
    line-height: 1.65;
    text-align: center;
  }

  .gift-txt br {
    display: none;
  }
}

@media all and (max-width: 320px) {
  .gift-txt {
    font-size: 1rem;
  }
}

.swiper-slide-active .gift-txt {
  transition: all 1s ease-out 0.5s;
  opacity: 1;
  /* transform: translate(0, 0); */
}

.gift-btn {
  max-width: 280px;
}

@media all and (max-width: 768px) {
  .gift-btn {
    max-width: 240px;
    margin: 0 auto;
  }

  .gift-btn a {
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

.main-swiper-prev {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translate(0, -50%);
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease-out;
  /* 初期設定 */
  /* opacity: 0; */
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .main-swiper-prev {
    width: 40px;
    height: 40px;
    left: 20px;
  }
}

.main-swiper-prev::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 21px;
  background: url(../img/common/icon_arrow_left.svg) no-repeat center center / 100% auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

@media all and (max-width: 768px) {
  .main-swiper-prev::before {
    width: 8px;
    height: 14px;
  }
}

.main-swiper-prev:hover::before {
  animation: prev_animation 0.4s ease 0s 1;
}

.main-swiper-prev::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  border-radius: 50%;
  opacity: 0;
}

.main-swiper-prev:hover::after {
  animation: btn-pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1;
}

.main-swiper-next,
.main-swiper-top {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 60px;
  transform: translate(0, -50%);
  z-index: 10;
  cursor: pointer;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  transition: all 0.2s ease-out;
  /* タップ時のハイライト非表示 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@media all and (max-width: 768px) {
  .main-swiper-next,
  .main-swiper-top {
    width: 40px;
    height: 40px;
    right: 20px;
  }
}

.main-swiper-next::before,
.main-swiper-top::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 21px;
  background: url(../img/common/icon_arrow_right.svg) no-repeat center center / 100% auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
}

@media all and (max-width: 768px) {
  .main-swiper-next::before,
  .main-swiper-top::before {
    width: 8px;
    height: 14px;
  }
}

.main-swiper-next:hover::before,
.main-swiper-top:hover::before {
  animation: next_animation 0.4s ease 0s 1;
}

.main-swiper-next::after,
.main-swiper-top::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  border-radius: 50%;
  opacity: 0;
}

.main-swiper-next:hover::after,
.main-swiper-top:hover::after {
  animation: btn-pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1;
}

.main-swiper-top {
  opacity: 0;
  pointer-events: none;
}

.main-swiper-top.is-show {
  opacity: 1;
  pointer-events: auto;
}

@keyframes btn-pulse {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

.main-swiper-next span {
  font-family: 'Poppins', sans-serif;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  top: 50%;
  left: -150%;
  transform: translate(0, -50%);
  position: absolute;
  opacity: 1;
  transition: all 0.2s ease-out;
  pointer-events: none;
}

@media all and (max-width: 768px) {
  .main-swiper-next span {
    display: none;
  }
}

.main-swiper-next.is-hide span {
  opacity: 0;
  pointer-events: none;
}

.main-swiper-prev.swiper-button-disabled {
  /* opacity: 0 !important; */
  pointer-events: none;
  display: none;
}

.main-swiper-next.swiper-button-disabled {
  /* opacity: 0 !important; */
  pointer-events: none;
  display: none;
}

.btn-list {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  display: flex;
  z-index: 2;
  transition: all 0.2s ease-out;
}

@media all and (max-width: 768px) {
  .btn-list {
    width: 100%;
  }
}

.btn-contest,
.btn-100works {
  width: 50%;
}

.btn-contest a {
  position: relative;
  display: block;
  background: linear-gradient(to bottom right, #9d6e2e, #38210b);
  width: 100%;
  line-height: 0;
  padding: 22px 24px;
}

@media all and (max-width: 768px) {
  .btn-contest a {
    background: linear-gradient(to right, #9d6e2e, #38210b);
    padding: 20px 10px;
  }
}

.btn-100works a {
  position: relative;
  display: block;
  background: linear-gradient(to bottom right, #818181, #555555);
  width: 100%;
  line-height: 0;
  padding: 22px 16px;
}

@media all and (max-width: 768px) {
  .btn-100works a {
    background: linear-gradient(to right, #818181, #555555);
    padding: 20px 10px;
  }
}

.btn-contest a::after,
.btn-100works a::after {
  content: '';
  display: inline-block;
  width: 9.7px;
  height: 17px;
  background: url(../img/common/icon_arrow_right_white.svg) no-repeat center center / 100% auto;
  top: 50%;
  transform: translate(0, -50%);
  position: absolute;
}

@media all and (max-width: 768px) {
  .btn-contest a::after,
  .btn-100works a::after {
    width: 6.85px;
    height: 12px;
  }
}

.btn-contest a::after {
  right: 20px;
}

@media all and (max-width: 768px) {
  .btn-contest a::after {
    right: 10px;
  }
}

.btn-100works a::after {
  right: 14px;
}

@media all and (max-width: 768px) {
  .btn-100works a::after {
    right: 10px;
  }
}

.btn-contest a:hover::after,
.btn-100works a:hover::after {
  animation: next_animation 0.3s ease 0s 1;
}

.btn-list .btn-contest a img.pc-only {
  display: inline;
  width: 83px;
}

@media all and (max-width: 768px) {
  .btn-list .btn-contest a img.pc-only {
    display: none;
  }
}

.btn-list .btn-contest a img.sp-only {
  display: none;
}

@media all and (max-width: 768px) {
  .btn-list .btn-contest a img.sp-only {
    display: inline;
    width: 112px;
  }
}

@media all and (max-width: 320px) {
  .btn-list .btn-contest a img.sp-only {
    width: 89.6px;
  }
}

.btn-list .btn-100works a img.pc-only {
  display: inline;
  width: 103px;
}

@media all and (max-width: 768px) {
  .btn-list .btn-100works a img.pc-only {
    display: none;
  }
}

.btn-list .btn-100works a img.sp-only {
  display: none;
}

@media all and (max-width: 768px) {
  .btn-list .btn-100works a img.sp-only {
    display: inline;
    width: 136px;
  }
}

@media all and (max-width: 320px) {
  .btn-list .btn-100works a img.sp-only {
    width: 108.8px;
  }
}

@media all and (max-width: 768px) {
  .btn-list.is-hide {
    opacity: 0;
    pointer-events: none;
  }

  .btn-list.is-show {
    opacity: 1;
    pointer-events: auto;
  }
}

/**/