@charset "utf-8";
* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
body {
  font-family:"ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  color:#000;
  line-height: 1.2em;
}
ul,ol {
  list-style-type:none;
}
a:hover {
  opacity:1.0;
}
a:focus {
  outline: none;
}
img{
	height:auto;
	border:0;
	vertical-align:top;
  max-width: 100%;
	margin:0;
}
video {
  vertical-align: bottom;
  width:100%;
  height:auto;
  outline: none;
}
.content_wrap {
  max-width: 750px;
  margin:0 auto;
  overflow: hidden;
}
.content_wrap img {
  display: block;
  height: auto;
}
.rl {
  position: relative;
}
.slide {
  width: 100%;
  position: absolute!important;
  left:0;
  top:36%;
  margin-left:4%;
}
.slide .swiper-button-prev {
  left: -2.7% !important;
}
.slide .swiper-button-next {
  right: 5.2% !important;
}
.slide [class^="swiper-button-"]::after {
  content: "" !important;
}
.slide [class^="swiper-button-"] {
  width: 54px;
  height: 55px;
}
.slide .swiper-horizontal>.swiper-pagination-bullets, .slide .swiper-pagination-bullets.swiper-pagination-horizontal, .slide .swiper-pagination-custom, .slide .swiper-pagination-fraction {
  left:-4%!important;
  bottom:-9.5%!important;
}
.slide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 7px;
}
.slide .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #fefe22;
}
.slide .swiper-pagination-bullet {
  background-color:#fff;
  opacity: 1;
  height: 12px;
  width: 12px;
}
.slide .swiper-slide {
  position: relative;
}
.slider {
  position: absolute;
  overflow: hidden;
  width: 511px;
  height: 276px;
  left:40px;
  top:40px;
}
.slider__item {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider__item.pre {
  z-index: 2;
}
.slider__item.now {
  z-index: 3;
}
@supports (-webkit-mask-size: 100% 100%) {
  .slider__item img {
    -webkit-mask-image: url("../images/mask.jpg");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: left center;
  }
  .slider li:nth-of-type(1).now img {
    animation: slide1 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:top 0 left 0;
    mask-position:top 0 left 0;
  }
  .slider li:nth-of-type(2).now img {
    animation: slide2 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
    -webkit-mask-position:top 0 right 0;
    mask-position:top 0 right 0;
  }
}
@supports (mask-size: 100% 100%) {
  .slider__item img {
    mask-image: url("../images/mask.jpg");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-position: left center;
  }
  .slider li:nth-of-type(1).now img {
    -webkit-mask-position:left top;
    mask-position:left top;
    animation: slide1 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
  .slider li:nth-of-type(2).now img {
    -webkit-mask-position:right top;
    mask-position:right top;
    animation: slide2 2s cubic-bezier(.4, 0, .2, 1) 0s forwards;
  }
}

@keyframes slide1 {
  0% {
    -webkit-mask-position:left top;
    mask-position:left top;
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-position:left top;
    mask-position:left top;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@keyframes slide2 {
  0% {
    -webkit-mask-position:right top;
    mask-position:right top;
    -webkit-mask-size: 0% 100%;
    mask-size: 0% 100%;
  }
  100% {
    -webkit-mask-position:top 0 right 0;
    mask-position:top 0 right 0;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
#thisMonth {
  position: absolute;
  text-align: center;
  width: 14.8%;
  top:41.8%;
  left:8.66%;
  color:#fff;
  font-size:28px;
  font-weight: 300;
  line-height: 1.0em;
}
#lastMonth {
  position: absolute;
  text-align: center;
  width: 10.8%;
  color:#fff;
  font-size:22px;
  top:33.3%;
  left:11.5%;
  font-weight: 300;
  line-height: 1.0em;
}
#monthBeforeLast {
  position: absolute;
  text-align: center;
  width: 10.8%;
  color:#fff;
  font-size:22px;
  top:25.4%;
  left:11.5%;
  font-weight: 300;
  line-height: 1.0em;
}
.fade {
  -webkit-transition: .3s ease-in-out;
  -moz-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.fade:hover {
  opacity: 0.7;
}
.btn01 a {
  display: block;
}
.btn01 {
  position: absolute;
  width: 86.66%;
  top:76.5%;
  left:7.46%;
}
.pt01 {
  position: absolute;
  width: 37.2%;
  top:-1.4%;
  left:3.33%;
}
.video01 {
  position: absolute;
  z-index: -1;
  left:0;
  top:2.8%;
}
.slide03 {
  width: 100%;
  position: absolute!important;
  top:75%;
  left:0;
  overflow: hidden;
}
.slide03 .swiper-wrapper {
  transition-timing-function: linear;
}
.slide04 {
  width: 100%;
  position: absolute!important;
  top:74.4%;
  left:0;
  overflow: hidden;
}
.slide04 .swiper-wrapper {
  transition-timing-function: linear;
}
.slt select {
  position: absolute;
  display: block;
  width: 79.6%;
  height: min(13.3vw, 100px);
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  top:76.5%;
  left:10.2%;
  color: #959595;
  font-size: min(4.5vw, 30px);
  box-sizing: border-box;
  padding: 0 0 0 2em;
  background: transparent;
  cursor: pointer;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.btn02 a {
  display: block;
}
.btn02 {
  position: absolute;
  width: 86.66%;
  top:74.1%;
  left:7.46%;
}
.pt02 {
  position: absolute;
  width: 10.53%;
  top:63.2%;
  right:3.73%;
}
@media(max-width:749px) {
 img {
   width: 100%;
 }
 .slider {
   width: 68.13vw;
   height: 36.8vw;
   left:5.33vw;
   top:5.33vw;
 }
 #thisMonth {
   font-size:3.8vw;
 }
 #lastMonth {
   font-size:2.93vw;
 }
 #monthBeforeLast {
   font-size:2.93vw;
 }
 .slide [class^="swiper-button-"] {
   width: 7.2vw;
   height: 7.33vw;
 }
 .slide .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
 .slide .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
   margin: 0 4px;
 }
 .slide .swiper-pagination-bullet {
   height: 7px;
   width: 7px;
 }
 .slide .swiper-horizontal>.swiper-pagination-bullets, .slide .swiper-pagination-bullets.swiper-pagination-horizontal, .slide .swiper-pagination-custom, .slide .swiper-pagination-fraction {
   bottom:-11%!important;
 }
}
