#key ul {
  min-height: inherit;
  overflow: hidden;
}

#key .slick-dots {
  display: flex;
  justify-content: center;
}

#key .slick-dots li {
  margin: 0 8px;
}

#key .slick-dots li button {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #FFF;
  text-indent: -9999px;
  border: none !important;
  cursor: pointer;
}

#key .slick-dots li.slick-active {
  opacity: 0.5;
}

.slide1,
.slide2 {
  display: block;
  position: relative;
  overflow: hidden;
}
.slide1 img,
.slide2 img{
  max-width: 1280px;
  max-height: 1818px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

@media only screen and (max-width: 900px) {
  #key .slick-dots li {
    margin: 0 6px;
  }
  #key .slick-dots li button {
    width: 14px;
    height: 14px;
  }
  .slide1,
  .slide2 {
    height: auto;
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
  }

  .slide1 img,
  .slide2 img {
    width: 100vw !important;
    height: auto !important;
  }

}

@media only screen and (max-width: 659px) {

  .slide1 img,
  .slide2 img {
    width: 113vw !important;
  }
}


#sec1 {
  position: relative;
  padding-top: 0px;
}

#sec1 .box {
  position: relative;
  margin-bottom: 65px;
}

#sec1 .box h2 {
  max-width: 548px;
  position: relative;
  z-index: 1;
  margin: 0 0 50px 215px;
}

#sec1 .box .photo {
  position: absolute;
  top: 70px;
  right: 0;
  max-width: 814px;
  width: 53vw;
  max-height: 458px;
  height: 36vw;
  overflow: hidden;
}

#sec1 .box .photo img,
#sec1 .box .photo video,
#sec1 .box .photo iframe {
  width: 100%;
  height: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  will-change: transform;
}

#sec1 .box dl {
  margin: 0 0 0 14vw;
}

#sec1 .box dl dt img {
  width: 207px;
  height: auto;
}

#sec1 .box dl dt span {
  font-size: 39px;
  font-weight: bold;
  line-height: 68px;
  letter-spacing: 0.15em;
  position: relative;
  display: inline-block;
  z-index: 1;
  margin-top: 10px;
}

#sec1 .box dl dt span::after {
  width: 0;
  height: 12px;
  background: #FFF;
  position: absolute;
  bottom: 12px;
  left: -10px;
  content: "";
  z-index: -1;
  transition: width 0.6s ease 0.8s;
}

#sec1 .box dl dt.is-show span::after {
  width: 100%;
}

#sec1 .box dl dd {
  padding-top: 25px;
  font-weight: 400;
}

#sec1 .box1 {
  position: relative;
}

#sec1 .box1 .img-common {
  position: relative;
  overflow: hidden;
}

#sec1 .box1 .img-common img,
#sec1 .box1 .img-common video,
#sec1 .box1 .img-common iframe {
  width: 100%;
  height: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  will-change: transform;
}

#sec1 .box1 .img-common.photo1 {
  width: 563px;
  height: 316px;
  margin-left: 115px;
}

#sec1 .box1 .img-common.photo2 {
  width: 417px;
  height: 235px;
  position: absolute;
  top: -270px;
  right: 185px;
}

#sec1 .box1 .img-common.photo3 {
  width: 792px;
  height: 445px;
  z-index: 2;
  margin: -90px 0 0 596px;
}

#sec1 .box1 .text {
  position: absolute;
  top: 12px;
  left: 827px;
  font-weight: 400;
}

#sec1 .box2 {
  position: relative;
  z-index: 3;
  margin-top: -115px;
  padding-bottom: 140px;
}

#sec1 .box2 .img-common {
  position: relative;
  overflow: hidden;
}

#sec1 .box2 .img-common img,
#sec1 .box2 .img-common video,
#sec1 .box2 .img-common iframe {
  width: 100%;
  height: 110%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  will-change: transform;
}

#sec1 .box2 .img-common.photo1 {
  width: 820px;
  height: 536px;
  z-index: 4;
  margin-left: 115px;
}

#sec1 .box2 .img-common.photo2 {
  width: 535px;
  height: 300px;
  position: absolute;
  top: 455px;
  right: 112px;
}

#sec1 .box2 .img-common.photo3 {
  width: 418px;
  height: 235px;
  position: absolute;
  top: 835px;
  right: 340px;
}

#sec1 .box2 .text {
  position: relative;
  padding: 35px 0 45px 330px;
  font-weight: 400;
}

#sec1 .box2 .deco {
  max-width: 360px;
  margin-left: 330px;
}

@media only screen and (max-width: 1489px) {
  #sec1 .box h2 {
    width: 36.5vw;
    margin: 0 0 3.5vw 14.2vw;
  }
  #sec1 .box .photo {
    max-width: 814px;
    width: 53vw;
    max-height: 458px;
    height: 30vw;
  }
  #sec1 .box dl {
    margin: 0 0 0 14.2vw;
  }
  #sec1 .box dl dt img {
    max-width: 207px;
    width: 13.5vw;
    height: auto;
  }
  #sec1 .box1 {
    position: relative;
  }
  #sec1 .box1 .img-common.photo1 {
    max-width: 563px;
    max-height: 316px;
    width: 37.5vw;
    height: 21vw;
    margin-left: 7.5vw;
  }
  #sec1 .box1 .img-common.photo2 {
    max-width: 417px;
    max-height: 235px;
    position: absolute;
    top: -17.5vw;
    right: 12vw;
    width: 27vw;
    height: 15.5vw;
  }
  #sec1 .box1 .img-common.photo3 {
    max-width: 792px;
    max-height: 445px;
    width: 53vw;
    height: 29vw;
    z-index: 2;
    margin: -6vw 0 0 39vw;
  }
  #sec1 .box1 .text {
    top: 1vw;
    left: 54vw;
  }
  #sec1 .box2 {
    position: relative;
    z-index: 3;
    margin-top: -7.5vw;
    padding-bottom: 140px;
  }
  #sec1 .box2 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box2 .img-common.photo1 {
    max-width: 935px;
    max-height: 536px;
    width: 61vw;
    height: 35vw;
  }
  #sec1 .box2 .img-common.photo2 {
    max-width: 535px;
    max-height: 300px;
    width: 35vw;
    height: 20vw;
    position: absolute;
    top: 29.5vw;
    right: 7.5vw;
  }
  #sec1 .box2 .img-common.photo3 {
    max-width: 418px;
    max-height: 235px;
    width: 28vw;
    height: 15.5vw;
    position: absolute;
    top: 54vw;
    right: 22vw;
  }
  #sec1 .box2 .text {
    padding: 2.4vw 0 3vw 21vw;
  }
  #sec1 .box2 .deco {
    max-width: 360px;
    width: 25vw;
    margin-left: 21.5vw;
  }
}

@media only screen and (max-width: 1299px) {
  #sec1 .box h2 {
    width: 36.5vw;
    margin: 0 0 3.5vw 14.2vw;
  }
  #sec1 .box .photo {
    max-width: 814px;
    width: 53vw;
    max-height: 458px;
    height: 30vw;
  }
  #sec1 .box dl {
    margin: 0 0 0 14.2vw;
  }
  #sec1 .box dl dt img {
    max-width: 207px;
    width: 13.5vw;
    height: auto;
  }
  #sec1 .box dl dt span {
    font-size: 3vw;
    font-weight: bold;
    line-height: 68px;
    letter-spacing: 0.15em;
    position: relative;
    display: inline-block;
    z-index: 1;
    margin-top: 10px;
  }
  #sec1 .box dl dd {
    font-size: 1.5vw;
    line-height: 2.5;
  }
  #sec1 .box1 {
    position: relative;
  }
  #sec1 .box1 .img-common.photo1 {
    max-width: 563px;
    max-height: 316px;
    width: 37.5vw;
    height: 21vw;
    margin-left: 7.5vw;
  }
  #sec1 .box1 .img-common.photo2 {
    max-width: 417px;
    max-height: 235px;
    position: absolute;
    top: -17.5vw;
    right: 12vw;
    width: 27vw;
    height: 15.5vw;
  }
  #sec1 .box1 .img-common.photo3 {
    max-width: 792px;
    max-height: 445px;
    width: 53vw;
    height: 29vw;
    z-index: 2;
    margin: -6vw 0 0 39vw;
  }
  #sec1 .box1 .text {
    top: 1vw;
    left: 54vw;
    font-size: 1.5vw;
    line-height: 2.5;
  }
  #sec1 .box2 {
    position: relative;
    z-index: 3;
    margin-top: -7.5vw;
    padding-bottom: 140px;
  }
  #sec1 .box2 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box2 .img-common.photo1 {
    max-width: 935px;
    max-height: 536px;
    width: 61vw;
    height: 35vw;
  }
  #sec1 .box2 .img-common.photo2 {
    max-width: 535px;
    max-height: 300px;
    width: 35vw;
    height: 20vw;
    position: absolute;
    top: 29.5vw;
    right: 7.5vw;
  }
  #sec1 .box2 .img-common.photo3 {
    max-width: 418px;
    max-height: 235px;
    width: 28vw;
    height: 15.5vw;
    position: absolute;
    top: 56vw;
    right: 22vw;
  }
  #sec1 .box2 .text {
    padding: 2.4vw 0 3vw 21vw;
    font-size: 1.5vw;
    line-height: 2.5;
  }
  #sec1 .box2 .deco {
    max-width: 360px;
    width: 25vw;
    margin-left: 21.5vw;
  }
}

@media only screen and (max-width: 1149px) {
  #sec1 .box .photo {
    width: 54.5vw;
  }
  #sec1 .box2 .img-common.photo3 {
    width: 29.5vw;
    height: 16vw;
  }
  #sec1 .box2 .text {
    padding: 2.4vw 0 3vw 21vw;
    font-size: 1.5vw;
    line-height: 2.5;
  }
  #sec1 .box2 .deco {
    max-width: 425px;
    width: 28vw;
    margin-left: 21.5vw;
  }
}

@media only screen and (max-width: 900px) {
  #sec1 {
    position: relative;
    padding-top: 20px;
  }
  #sec1 .box {
    position: relative;
    margin-bottom: 50px;
  }
  #sec1 .box h2 {
    width: 80vw;
    margin: 0 auto 3.5vw;
    text-align: center;
  }
  #sec1 .box .photo {
    position: relative;
    top: 0;
    right: 0;
    width: 85vw;
    height: 46vw;
    overflow: hidden;
    margin-left: 20vw;
  }
  #sec1 .box dl {
    margin: 0;
  }
  #sec1 .box dl dt {
    text-align: center;
  }
  #sec1 .box dl dt img {
    width: 28vw;
  }
  #sec1 .box dl dt span {
    font-size: 44px;
    line-height: 62px;
    margin: 10px 0 0 2vw;
  }
  #sec1 .box dl dt span::after {
    bottom: 14px;
    left: -12px;
  }
  #sec1 .box dl dd {
    padding: 15px 5% 40px;
    font-size: 21px;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box1 {
    position: relative;
  }
  #sec1 .box1 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box1 .img-common.photo1 {
    width: 59vw;
    margin-left: 35vw;
    margin-bottom: -2vw;
    height: 33vw;
    z-index: 0;
  }
  #sec1 .box1 .img-common.photo2 {
    width: 38vw;
    height: 23vw;
    position: relative;
    top: 0px;
    right: 0px;
    margin: 0vw 0 -2vw 13vw;
    z-index: 2;
  }
  #sec1 .box1 .img-common.photo2 video {
    z-index: 0;
    height: 108%;
  }
  #sec1 .box1 .img-common.photo3 {
    width: 78vw;
    height: 47vw;
    z-index: 2;
    margin: 0 0 0 5vw;
  }
  #sec1 .box1 .text {
    position: relative;
    top: 0;
    left: 0;
    font-weight: 400;
    padding: 35px 5% 45px;
    font-size: 21px;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box2 {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #sec1 .box2 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box2 .img-common.photo1 {
    width: 95vw;
    height: 50vw;
    margin-left: -20px;
  }
  #sec1 .box2 .img-common.photo2 {
    width: 58vw;
    height: 33vw;
    margin: 5vw 5vw -12vw 38vw;
    position: relative;
    top: 0;
    right: 0;
    z-index: 1;
  }
  #sec1 .box2 .img-common.photo3 {
    width: 38vw;
    height: 24vw;
    margin-left: 4vw;
    position: relative;
    top: 0;
    right: 0;
  }
  #sec1 .box2 .text {
    position: relative;
    padding: 30px 5% 35px;
    font-weight: 400;
    font-size: 21px;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box2 .deco {
    max-width: 425px;
    width: 30vw;
    margin: auto;
  }
}

@media only screen and (max-width: 659px) {
  #sec1 {
    position: relative;
    padding-top: 20px;
  }
  #sec1 .box {
    position: relative;
    margin-bottom: 40px;
  }
  #sec1 .box h2 {
    width: 80vw;
    margin: 0 auto 3.5vw;
    text-align: center;
  }
  #sec1 .box .photo {
    position: relative;
    top: 0;
    right: 0;
    width: 90vw;
    height: 51vw;
    overflow: hidden;
    margin-left: 10vw;
    z-index: 1;
  }
  #sec1 .box dl {
    margin: 0;
  }
  #sec1 .box dl dt img {
    width: 30vw;
  }
  #sec1 .box dl dt span {
    font-size: 21px;
    line-height: 40px;
    margin: 5px 0 0 2vw;
  }
  #sec1 .box dl dt span::after {
    bottom: 8px;
    height: 10px;
    left: -12px;
  }
  #sec1 .box dl dd {
    padding: 15px 5% 40px;
    font-size: 3.2vw;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box1 {
    position: relative;
  }
  #sec1 .box1 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box1 .img-common.photo1 {
    width: 60vw;
    margin-left: 30vw;
    height: 35vw;
    z-index: 0;
  }
  #sec1 .box1 .img-common.photo2 {
    width: 44vw;
    height: 27vw;
    position: relative;
    top: 0px;
    right: 0px;
    margin: -2vw 0 -2vw 5vw;
  }
  #sec1 .box1 .img-common.photo3 {
    width: 79vw;
    height: 48vw;
    z-index: 2;
    margin: 0;
  }
  #sec1 .box1 .text {
    position: relative;
    top: 0;
    left: 0;
    font-weight: 400;
    padding: 35px 5% 45px;
    font-size: 3.2vw;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box2 {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #sec1 .box2 .img-common {
    position: relative;
    overflow: hidden;
  }
  #sec1 .box2 .img-common.photo1 {
    width: 95vw;
    height: 54vw;
    margin-left: -10vw;
  }
  #sec1 .box2 .img-common.photo2 {
    width: 58vw;
    height: 38vw;
    margin: 6vw 5vw -12vw 32vw;
  }
  #sec1 .box2 .img-common.photo3 {
    width: 40vw;
    height: 25vw;
    margin-left: 0;
    position: relative;
    top: 0;
    right: 0;
  }
  #sec1 .box2 .text {
    position: relative;
    padding: 30px 0% 20px;
    font-weight: 400;
    font-size: 2.85vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
  }
  #sec1 .box2 .deco {
    max-width: 425px;
    width: 38vw;
    margin: auto;
  }
}

#sec2 {
  position: relative;
}

#sec2 .box {
  position: relative;
  width: 100%;
  height: 686px;
  transition: all 0.3s ease;
}

#sec2 .box:hover {
  /* opacity: 0.9; */
}

#sec2 .box .video-box {
  width: 101%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -1px;
}

#sec2 .box .video-box img,
#sec2 .box .video-box video,
#sec2 .box .video-box iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  object-fit: cover;
  will-change: transform;
  opacity: 1 !important;
}

#sec2 .box .play {
  /* width: 161px; */
  width: 260px;
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

@media only screen and (max-width: 1449px) {
  #sec2 {
    position: relative;
  }
  #sec2 .box {
    position: relative;
    width: 100%;
    height: 45vw;
  }
  #sec2 .box .play {
    /* max-width: 161px; */
    max-width: 260px;
    width: 13vw;
  }
}

@media only screen and (max-width: 659px) {
  #sec2 .box {
    height: 52vw;
  }
  #sec2 .box .play {
    /* width: 17.5vw; */
    width: 27.13vw;
  }
}

#sec3 {
  position: relative;
  padding: 100px 25px;
}

#sec3 .box {
  max-width: 1080px;
  margin: auto;
  position: relative;
  height: auto;
}

#sec3 h2 {
  text-align: center;
  font-size: 30px;
  line-height: 52px;
  letter-spacing: 0.15em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  margin-bottom: 75px;
  font-weight: bold;
  padding: 12px;
}

#sec3 dl dt img {
  width: 188px;
  height: auto;
}

#sec3 dl dt span {
  font-size: 39px;
  font-weight: bold;
  line-height: 68px;
  letter-spacing: 0.15em;
  position: relative;
  display: inline-block;
  z-index: 1;
  margin-top: 5px;
}

#sec3 dl dt span::after {
  width: 0;
  height: 12px;
  background: #FFF;
  position: absolute;
  bottom: 12px;
  left: -10px;
  content: "";
  z-index: -1;
  transition: width 0.6s ease 0.8s;
}

#sec3 dl dt.is-show span::after {
  width: 100%;
}

#sec3 dl dd {
  font-weight: 400;
  padding: 35px 0 55px;
}

#sec3 .photo {
  max-width: 576px;
  position: absolute;
  top: 170px;
  right: -30px;
}

#sec3 .photo img {
  width: 100%;
  height: auto;
}

#sec3 .btn-link {
  margin-left: -10px;
}

.btn-link {
  font-size: 15px;
  font-weight: 400;
}

.btn-link a {
  text-decoration: none;
  border: 1px solid #000;
  border-radius: 30px;
  line-height: 50px;
  padding: 0 65px 0 35px;
  display: inline-block;
  transition: all 0.4s ease;
  background: url(../img/shared/arr.svg) no-repeat center right 25px;
  background-size: 11px auto;
  letter-spacing: 0.1em;
}

.btn-link a:hover {
  background: url(../img/shared/arr.svg) no-repeat center right 25px #FFF;
  background-size: 11px auto;
}

@media only screen and (max-width: 1149px) {
  #sec3 {
    position: relative;
    padding: 100px 25px;
  }
  #sec3 .box {
    max-width: 1080px;
    margin: auto;
    position: relative;
  }
  #sec3 h2 {
    font-size: 2.6vw;
    padding: 10px;
  }
  #sec3 dl dt img {
    max-width: 188px;
    width: 16vw;
    height: auto;
  }
  #sec3 dl dt span {
    font-size: 3vw;
    line-height: 62px;
  }
  #sec3 dl dt span::after {
    width: 0;
    height: 12px;
    background: #FFF;
    position: absolute;
    bottom: 14px;
    left: -10px;
    content: "";
    z-index: -1;
    transition: width 0.6s ease 0.8s;
  }
  #sec3 dl dt.is-show span::after {
    width: 100%;
  }
  #sec3 dl dd {
    font-weight: 400;
    padding: 35px 0 55px;
    font-size: 1.5vw;
    line-height: 2.5;
  }
  #sec3 .photo {
    max-width: 576px;
    width: 52.5vw;
    position: absolute;
    top: 170px;
    right: 0;
  }
  #sec3 .btn-link {
    margin-left: -10px;
  }
  .btn-link {
    font-size: 14px;
    font-weight: 400;
  }
  .btn-link a {
    text-decoration: none;
    border: 1px solid #000;
    border-radius: 100vh;
    line-height: 50px;
    padding: 0 65px 0 35px;
    display: inline-block;
    transition: all 0.4s ease;
    background: url(../img/shared/arr.svg) no-repeat center right 25px;
    background-size: 10px auto;
    letter-spacing: 0.1em;
  }
  .btn-link a:hover {
    background: url(../img/shared/arr.svg) no-repeat center right 25px #FFF;
    background-size: 10px auto;
  }
}

@media only screen and (max-width: 900px) {
  #sec3 {
    position: relative;
    padding: 75px 5% 45px;
  }
  #sec3 h2 {
    text-align: center;
    font-size: 3vw;
    padding: 10px;
    margin-bottom: 4vw;
  }
  #sec3 dl dt {
    text-align: center;
  }
  #sec3 dl dt img {
    max-width: 545px;
    width: 30vw;
    margin: auto;
    height: auto;
  }
  #sec3 dl dt span {
    font-size: 44px;
    line-height: 62px;
  }
  #sec3 dl dt span::after {
    width: 0;
    height: 12px;
    background: #FFF;
    position: absolute;
    bottom: 12px;
    left: -10px;
    content: "";
    z-index: -1;
    transition: width 0.6s ease 0.8s;
  }
  #sec3 dl dd {
    font-weight: 400;
    padding: 30px 0 40px;
    font-size: 21px;
    line-height: 2;
    text-align: center;
  }
  #sec3 .photo {
    max-width: 576px;
    margin: auto;
    position: relative;
    top: 0;
    right: 0;
  }
  #sec3 .photo img {
    width: 100%;
    height: auto;
  }
  #sec3 .btn-link {
    margin: auto;
    display: flex;
    justify-content: center;
    padding-top: 6vw;
    font-size: 18px;
  }
  #sec3 .btn-link a {
    line-height: 66px;
  }
}

@media only screen and (max-width: 659px) {
  #sec3 {
    position: relative;
    padding: 50px 0 25px;
  }
  #sec3 h2 {
    text-align: center;
    font-size: 3.3vw;
    padding: 0px 0;
    letter-spacing: 0.05em;
    margin-bottom: 2vw;
    line-height: 3;
  }
  #sec3 dl dt {
    text-align: center;
    line-height: 42px;
  }
  #sec3 dl dt img {
    max-width: 188px;
    width: 30vw;
    margin: auto;
    height: auto;
  }
  #sec3 dl dt span {
    font-size: 21px;
    line-height: 36px;
    margin-top: -5px;
  }
  #sec3 dl dt span::after {
    width: 0;
    height: 12px;
    background: #FFF;
    position: absolute;
    bottom: 4px;
    left: -10px;
    content: "";
    z-index: -1;
    transition: width 0.6s ease 0.8s;
  }
  #sec3 dl dd {
    font-weight: 400;
    padding: 20px 0 30px;
    font-size: 2.85vw;
    letter-spacing: 0.05em;
    line-height: 2;
    text-align: center;
  }
  #sec3 .photo {
    max-width: 576px;
    width: 78vw;
    margin: auto;
    position: relative;
    top: 0;
    right: 0;
  }
  #sec3 .photo img {
    width: 100%;
    height: auto;
  }
  #sec3 .btn-link {
    margin: auto;
    display: flex;
    justify-content: center;
    padding-top: 8vw;
    font-size: 12px;
  }
  #sec3 .btn-link a {
    padding: 0 50px 0 20px;
    letter-spacing: 0.05em;
    line-height: 46px;
    background-size: 8px auto;
  }
}

#sec4 {
  position: relative;
  padding: 5px 25px 110px;
}

#sec4 .box {
  max-width: 1080px;
  margin: auto;
  position: relative;
  height: auto;
}

#sec4 h2 {
  width: 109px;
  margin-bottom: 35px;
  display: inline-block;
}

#sec4 h2 img {
  width: 100%;
  height: auto;
}

#sec4 h2 + a {
  display: inline-block;
  margin-left: 30px;
  line-height: 1;
  font-size: 16px;
  text-decoration: underline;
}

#sec4 h2 + a:hover{
  opacity: 0.7;
  text-decoration: none;
}

#sec4 .btn-link a {
  padding: 0 52px 0 32px;
}

@media only screen and (max-width: 900px) {
  #sec4 {
    position: relative;
    padding: 5px 5% 50px;
  }
  #sec4 h2 {
    max-width: 129px;
    width: 16vw;
    margin: 0 auto 3vw;
  }
  #sec4 h2 img {
    width: 100%;
    height: auto;
  }
  #sec4 .btn-link {
    display: flex;
    justify-content: center;
    font-size: 18px;
  }
  #sec4 .btn-link a {
    padding: 0 65px 0 40px;
    line-height: 66px;
  }
}

@media only screen and (max-width: 659px) {
  #sec4 {
    position: relative;
    padding: 5px 0 40px;
  }
  #sec4 h2 {
    max-width: 109px;
    width: 22vw;
    margin: 0 auto 3vw;
  }
  #sec4 h2 img {
    width: 100%;
    height: auto;
  }
  #sec4 #instafeed {
    margin-bottom: 25px;
  }
  #sec4 #instafeed li:nth-child(7), #sec4 #instafeed li:nth-child(8), #sec4 #instafeed li:nth-child(9), #sec4 #instafeed li:nth-child(10) {
    display: none;
  }
  #sec4 .btn-link {
    display: flex;
    justify-content: center;
    font-size: 12px;
  }
  #sec4 .btn-link a {
    padding: 0 50px 0 25px;
    line-height: 46px;
    background-size: 8px auto;
  }
}

#sec5 {
  position: relative;
  padding: 80px 25px 85px;
  background: #FFF;
}

#sec5 .box {
  max-width: 1080px;
  margin: auto;
  position: relative;
  height: auto;
}

#sec5 h2 {
  width: 166px;
  margin-bottom: 30px;
}

#sec5 h2 img {
  width: 100%;
  height: auto;
}

#sec5 dl {
  width: 100%;
  display: flex;
  align-items: flex-end;
}

#sec5 dl dt {
  width: 202px;
}

#sec5 dl dt img {
  width: 100%;
  height: auto;
}

#sec5 dl dd {
  box-sizing: border-box;
  width: calc(100% - 202px);
  padding-left: 35px;
  font-size: 14px;
  line-height: 22px;
  letter-spacing: 0.09em;
  margin-bottom: -10px;
}

#sec5 dl dd i {
  font-style: normal;
  padding-top: 20px;
  display: block;
}

#sec5 dl dd i a {
  text-decoration: underline;
  transition: all 0.3s ease;
}

#sec5 dl dd i a:hover {
  text-decoration: none;
}

#sec5 dl dd span {
  display: block;
  font-weight: bold;
  font-size: 41px;
  line-height: 72px;
  margin-bottom: -20px;
}

@media only screen and (max-width: 1149px) {
  #sec5 dl dd i {
    letter-spacing: 0.05em;
  }
}

@media only screen and (max-width: 900px) {
  #sec5 {
    position: relative;
    padding: 35px 5% 40px;
    background: #FFF;
  }
  #sec5 h2 {
    max-width: 166px;
    width: 22vw;
    margin: 0 auto 1vw;
  }
  #sec5 h2 img {
    width: 100%;
    height: auto;
  }
  #sec5 dl {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
  #sec5 dl dt {
    max-width: 252px;
    width: 35vw;
    margin-bottom: 2vw;
  }
  #sec5 dl dt img {
    width: 100%;
    height: auto;
  }
  #sec5 dl dd {
    box-sizing: border-box;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.09em;
    margin-bottom: 0;
  }
  #sec5 dl dd i {
    font-style: normal;
    display: block;
  }
  #sec5 dl dd i:last-child {
    padding-top: 0;
  }
  #sec5 dl dd span {
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 30px;
    line-height: 2;
    margin-bottom: 0;
  }
}

@media only screen and (max-width: 659px) {
  #sec5 {
    position: relative;
    padding: 20px 0 35px;
    background: #FFF;
  }
  #sec5 h2 {
    max-width: 166px;
    width: 35vw;
    margin: 0 auto 0vw;
  }
  #sec5 h2 img {
    width: 100%;
    height: auto;
  }
  #sec5 dl {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
  }
  #sec5 dl dt {
    max-width: 252px;
    width: 45vw;
    margin-bottom: 2vw;
  }
  #sec5 dl dt img {
    width: 100%;
    height: auto;
  }
  #sec5 dl dd {
    box-sizing: border-box;
    width: 100%;
    padding-left: 0%;
    padding-right: 0%;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.09em;
    margin-bottom: 0;
  }
  #sec5 dl dd i {
    font-style: normal;
    padding-top: 0;
    display: block;
  }
  #sec5 dl dd span {
    display: block;
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 0;
  }
}

/* ---------------------------------*/
/* 下層共通 */
/* ---------------------------------*/

#event .wrap{
  padding-left: 5%;
  padding-right: 5%;
}

@media only screen and (max-width: 1320px) {
	#event #page-title,
	#event .section{
    width: 1320px;
	}
}

#event .wrap .box{
  max-width: 1080px;
  margin: auto;
  position: relative;
}
.no-division{
  display: inline-block;
}

#event img{
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* ---------------------------------*/
/* event.html */
/* ---------------------------------*/
/* 色 */
:root{
  --keyaki: #FCCF00;
  --campain: #62A1D8;
  --newshop: #E29223;
  --anniv: #3EAC4A;
  --white: #fff;
  --gray: #717071;
  --gourmet: #88BE43;
}

#event .keyaki{
  color: var(--keyaki);
}
#event .shopinfo{
  color: var(--gourmet);
}
#event .blue{
  color: #32A2D3;
}
#event .newshop {
  color: var(--newshop);
}
#event .anniv {
  color: var(--anniv);
}
#event .keyaki-back{
  background: var(--keyaki);
}
#event .shopinfo-back{
  background: var(--gourmet);
}
#event .campaign-back{
  background: var(--campain);
}
#event .newshop-back{
  background: var(--newshop);
}
#event .gourmet-back{
  background: var(--gourmet);
}
#event .bg-white{
  background: #FFF;
}

/* ---------------------------------------- */

#event #page-title .btn-area{
  margin-top: 75px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#event #page-title .event-btn{
  max-width: 292px;
  width: 100%;
  display: inline-block;
  font-size: 14px;
  text-align: center;
  color: var(--white);
  border-radius: 100vh;
  letter-spacing: 0.1em;
}

#event .event-btn p{
  display: inline;
}

#event #page-title .event-btn:nth-of-type(n+2){
  margin-left: 24px;
}

#event .section{
  position: relative;
}

#event .section .eventwrap{
  display: grid;
  grid-column-gap: 35px;
}
#event .section #anniv_event .eventwrap{
  grid-template-columns: 1fr 194px;
  align-items: end;
}
#event .section #keyaki_event .eventwrap{
  grid-template-columns: 1fr 425px;
  align-items: center;
}
#event .section #shopinfo .eventwrap{
  grid-template-columns: 1fr 500px;
  align-items: center;
}
#event .section #campaign .eventwrap{
  /* grid-template-columns: 260px 1fr; */
  grid-template-columns: 240px 1fr;
  align-items: center;
  grid-column-gap: 0;
  padding: 35px 0;
}
#event .section #newshop .eventwrap{
  grid-template-columns: 1fr 397px;
  align-items: center;
  grid-column-gap: 50px;
}


#event .section .eventwrap h4{
  font-size: 31px;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.45;
  letter-spacing: 0.05em;
}

#event .section .eventwrap dl{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
#event .section .eventwrap dl:nth-of-type(n+2){
  margin-top: 8px;
}

#event .section .eventwrap dt{
  background: var(--gray);
  width: 152px;
  font-size: 14px;
  text-align: center;
  line-height: 23px;
  border-radius: 100vh;
  color: var(--white);
}

#event .section .eventwrap dd{
  margin-left: 8px;
  font-size: 18px;
  line-height: 1.278;
  font-weight: bold;
  font-feature-settings: "palt";
}

#event .section .eventwrap .detail{
  margin-top: 18px;
  display: block;
  width: 100%;
  line-height: 1.57;
  font-size: 14px;
  letter-spacing: 0.09em;
  text-align: justify;
}

#event .section .subtitle{
  color: var(--white);
  max-width: 526px;
  width: 100%;
  font-size: 19px;
  border-radius: 100vh;
  margin: 0 auto 70px;
  text-align: center;
  line-height: 64px;
}

/* ---------------------------------------- */
/* anniv_event */
/* ---------------------------------------- */
#event .section #anniv_event{
  padding-top: 95px;
}
#event .section #anniv_event .eventwrap:nth-of-type(2){
  padding-top: 25px;
  padding-bottom: 35px;
}
#event .section #anniv_event .eventwrap:nth-of-type(3){
  padding-top: 35px;
  padding-bottom: 35px;
  border-top: 1px solid #231815;
}
#event .section #anniv_event .eventwrap .item_wrap{
  position: relative;
  display: flex;
  justify-content: flex-start;
}
#event .section #anniv_event .eventwrap .item_wrap div:first-of-type{
  width: 460px;
}
#event .section #anniv_event .eventwrap h4{
  font-size: 39px;
  margin-bottom: 15px;
}
#event .section #anniv_event .eventwrap h4.small-title{
  font-size: 28px;
  margin-bottom: 10px;
}
#event .section #anniv_event .eventwrap .anniv-icon{
  width: 125px;
  height: auto;
}
#event .section #anniv_event .eventwrap .detail.kyosan{
  margin-top: 5px;
  font-weight: bold;
}
#event .section #anniv_event .eventwrap .image{
  border-radius: 13px;
}
/* ---------------------------------------- */
/* #keyaki_event */
/* ---------------------------------------- */

#event .section #keyaki_event{
  padding-top: 60px;
  padding-bottom: 75px;
}
#event .section #keyaki_event .eventwrap{
  padding-top: 30px;
  padding-bottom: 30px;
}
#event .section #keyaki_event .eventwrap .image{
  text-align: right;
} 
#event .section #keyaki_event .eventwrap .image > img{
  width: 190px;
} 
#event .section #keyaki_event .eventwrap:nth-of-type(1){
  padding-top: 0;
}
#event .section #keyaki_event .eventwrap:nth-of-type(2){
  grid-template-columns: 1fr 300px;
}
#event .section #keyaki_event .eventwrap:nth-of-type(n+2){
  border-top: 1px solid #231815;
}

#event .section #keyaki_event .eventwrap:nth-of-type(3){
  align-items: center;
} 

/* ---------------------------------------- */
/* #shopinfo */
/* ---------------------------------------- */

#event .section #shopinfo{
  padding-top: 60px;
  padding-bottom: 75px;
}
#event .section #shopinfo .eventwrap{
  padding-top: 30px;
  padding-bottom: 30px;
}
#event .section #shopinfo .eventwrap .image{
  text-align: right;
} 
#event .section #shopinfo .eventwrap .image > img{
  width: 190px;
} 
#event .section #shopinfo .eventwrap:nth-of-type(1){
  padding-top: 0;
}
#event .section #shopinfo .eventwrap:nth-of-type(2){
  grid-template-columns: 1fr 300px;
}
#event .section #shopinfo .eventwrap:nth-of-type(n+2){
  border-top: 1px solid #231815;
}

#event .section #shopinfo .eventwrap:nth-of-type(3){
  align-items: center;
} 


/* ---------------------------------------- */
/* #campaign */
/* ---------------------------------------- */
#event .section #campaign,
#event .section #newshop{
  padding-top: 95px;
  padding-bottom: 105px;
}

#event .section #campaign .box{
  border-radius: 30px;
  /* padding: 55px 50px; */
  padding: 30px 50px;
  margin: 0 auto;
  max-width: 980px;
} 
#event .section #campaign .box:nth-of-type(2) {
  padding: 0;
  max-width: 1080px;
}

#event .section #campaign .wrap.gourmet .box{
  padding: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  grid-column-gap: 13px;
  grid-row-gap: 12px;
  max-width: 1080px;
} 
#event .section #campaign .wrap.gourmet .box:last-of-type{
  display: block;
}

#event .section #campaign .eventwrap:nth-of-type(n+2){
  align-items: center;
  border-top: 1px solid #231815;
}

#event .section #campaign .eventwrap .logo{
  text-align: center;
  padding: 0;
}
#event .section #campaign .eventwrap .logo > img{
  max-width: 185px;
}

#event .section #campaign .eventwrap .contents{
  display: grid;
  grid-row-gap: 30px;
}
#event .section #campaign .eventwrap .contents .unit{
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 150px;
  grid-column-gap: 30px;
  /* grid-template-columns: 1fr 210px; */
  /* grid-column-gap: 50px; */
}
#event .section #campaign .eventwrap .contents .unit .image{
  position: relative;
}
#event .section #campaign .eventwrap .contents .unit .image .fair3{
  position: absolute;
  /* top: 111px; */
  top: 84px;
  right: 0;
}

#event .section #campaign .gourmet{
  padding-top: 95px;
}

/* ---------------------------------------- */
/* #newshop */
/* ---------------------------------------- */
#event .section #newshop .eventwrap{
  padding-top: 35px;
  padding-bottom: 35px;
}
#event .section #newshop .eventwrap > div{
  position: relative;
}

#event .section #newshop .eventwrap:nth-of-type(1){
  padding-top: 0;
}
#event .section #newshop .eventwrap:nth-of-type(n+2){
  border-top: 1px solid #231815;
}
#event .section #newshop .eventwrap .place{
  line-height: 1.22;
  font-size: 18px;
  font-weight: bold;
  font-feature-settings: "palt";
}
#event .section #newshop .icon{
  width: 85px;
  position: absolute;
  top: -30px;
  right: 0;
}
#event .section .note{
  font-size: 14px;
  margin-top: 30px;
  letter-spacing: 0.09em;
}

#event .view{
  display: none;
}

@media only screen and (max-width: 900px){

}

@media only screen and (max-width: 1320px) {
  #event .section .eventwrap h4,
  #event .section #anniv_event .eventwrap h4.small-title{
    font-size: 32px;
  }
  #event .view{
    display: inline-block;
  }
}

/* ---------------------------------------- */
/* #flyer */
/* ---------------------------------------- */

#event .section .flyer{
  padding-bottom: 75px;
}
#event .section .flyer .eventwrap{
  padding-top: 30px;
  padding-bottom: 30px;
}

/* ---------------------------------------- */
/* utility */
/* ---------------------------------------- */
.b20 {
  margin-bottom: 20px;
}