@charset "UTF-8";
/*
.opening {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 105;
   box-sizing: border-box;
   background-color: #fffef9;
}

@media only screen and (max-width: 767px) {
   .opening h2 {
      width: 73.3vw;
      margin: 0 auto;
   }

   .opening h2 span {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      opacity: 0;
   }

   .opening h2.is-active span {
      opacity: 1;
   }

   .opening h2.is-active span:nth-child(1) {
      animation: open 1s;
   }

   .opening h2.is-active span:nth-child(2) {
      animation: open 3s;
   }
}

@media only screen and (min-width: 768px) {
   .opening h2 {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      width: 890px;
   }

   .opening h2 span {
      display: flex;
   }

   .opening h2 {
      opacity: 0;
   }

   .opening h2.is-active {
      animation: open 1s;
   }
}

@keyframes open {
   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }
}
*/

/* -- -- */
#key .slide-item1 {
   background: url("../img/bg/key-img-1.jpg") no-repeat center center/cover;
}

#key .slide-item2 {
   background: url("../img/bg/key-img-2.jpg") no-repeat center center/cover;
}

#key .slide-item3 {
   background: url("../img/bg/key-img-3.jpg") no-repeat center center/cover;
}

#key .slide-item4 {
   background: url("../img/bg/key-img-4.jpg") no-repeat center bottom/cover;
}



/* -- -- */
#sec1 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec1 {
      padding-bottom: 30vw;
   }

   #sec1 h2 {
      display: flex;
      flex-direction: column-reverse;
      width: 34vw;
      height: 96vw;
      padding: 0;
      position: relative;
      text-align: right;
   }

   #sec1 h2:before {
      content: '';
      width: 0;
      height: 100%;
      border-left: 1px solid #000;
      position: absolute;
      top: 0;
      right: 9vw;
   }

   #sec1 h2 .h-30 span:first-child {
      padding-bottom: 34vw;
   }

   #sec1 h2 .h-22 {
      padding-left: 2vw;
   }

   #sec1 .txt p {
      padding-top: 10vw;
   }

   #sec1 .txt figure {
      width: 63.2vw;
      margin: 0 auto;
      padding-top: 10vw;
   }

   #sec1 .photo-1 {
      width: 57vw;
      position: absolute;
      top: 18.6vw;
      right: 5.3vw;
   }

   #sec1 .photo-2 {
      width: 35.2vw;
      position: absolute;
      top: 56vw;
      right: 0;
   }
}

@media only screen and (min-width: 768px) {
   #sec1 {
      padding-bottom: 150px;
   }

   #sec1 h2 {
      display: flex;
      flex-direction: column-reverse;
      width: 215px;
      height: 400px;
      padding: 260px 0 0 70px;
      position: relative;
   }

   #sec1 h2:before {
      content: '';
      width: 0;
      height: 84%;
      border-left: 1px solid #000;
      position: absolute;
      bottom: -100px;
      right: 55px;
   }

   #sec1 h2 .h-30 span:last-child {
      padding-top: 162px;
   }

   #sec1 h2 .h-22 {
      padding: 0 0 26px 40px;
   }

   #sec1 .photo-1 {
      width: 605px;
      position: absolute;
      top: 160px;
      right: -75px;
   }

   #sec1 .photo-2 {
      width: 383px;
      position: absolute;
      top: 560px;
      right: -180px;
   }

   #sec1 .photo-3 {
      width: 605px;
      position: absolute;
      bottom: 117px;
      left: -300px;
   }

   #sec1 .txt {
      padding-top: 245px;
   }

   #sec1 .txt p {
      width: 654px;
      margin-left: auto;
   }
}

@media only screen and (min-width: 1401px) {
   #sec1 .txt {
      margin-right: -125px;
   }
}

/* -- -- */
#sec2 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec2 {
      padding-bottom: 16vw;
   }

   #sec2:before {
      content: '';
      width: 50%;
      height: 30vw;
      background: #D8D2C8;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec2 h2 {
      display: flex;
      align-items: center;
      gap: 4vw;
      width: 56.5vw;
      height: 30vw;
      margin-left: auto;
      position: relative;
      z-index: 1;
      letter-spacing: 0.3em;
   }

   #sec2 h2:after {
      content: '';
      border-top: 1px solid #000;
      flex: 1 0 0;
   }

   #sec2 h3 {
      width: 22vw;
      height: 82vw;
      text-align: right;
      margin: 0 auto;
      padding: 20vw 0;
   }

   #sec2 h3 span {
      display: inline-flex;
      align-items: center;
      gap: 4vw;
   }

   #sec2 h3 span:before {
      content: '';
      height: 29.6vw;
      border-left: 1px solid #000;
   }

   #sec2 dl {
      border-top: 1px solid #a5a5a5;
      padding: 12vw 8vw 8vw;
   }

   #sec2 dl dt {
      text-indent: -2.6vw;
   }

   #sec2 dl dd {
      text-align: right;
      padding-top: 5.3vw;
   }

   #sec2 dl dd span {
      font-size: 5vw;
   }

   #sec2 .txt {
      padding-top: 12vw;
   }

   #sec2 .slider {
      margin: 0 -5.3vw;
      padding-top: 12vw;
   }

   #sec2 .slider .slick-slide {
      margin: 0 1.25vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec2 {
      padding-bottom: 188px;
   }

   #sec2:before {
      content: '';
      width: 50%;
      height: 177px;
      background: #D8D2C8;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec2 .wrap {
      padding-top: 156px;
   }

   #sec2 h2 {
      display: flex;
      align-items: center;
      gap: 30px;
      width: calc(50% + 35px);
      height: 187px;
      margin-left: auto;
      position: relative;
      z-index: 1;
      letter-spacing: 0.3em;
   }

   #sec2 h2:after {
      content: '';
      border-top: 1px solid #000;
      flex: 1 0 0;
   }

   #sec2 h3 {
      padding-top: 100px;
      line-height: 58px;
   }

   #sec2 h3 span {
      display: inline-flex;
      align-items: center;
      gap: 25px;
      padding-left: 98px;
   }

   #sec2 h3 span:before {
      content: '';
      width: 160px;
      border-top: 1px solid #000;
   }

   #sec2 dl {
      width: 566px;
      padding: 128px 0 31px 43px;
      position: relative;
   }

   #sec2 dl:before {
      content: '';
      border-top: 1px solid #a5a5a5;
      position: absolute;
      right: 0;
      bottom: 0;
      left: -20px;
   }

   #sec2 dl dt {
      text-indent: -16px;
   }

   #sec2 dl dt span {
      display: inline-block;
      padding: 4px 0 0 16px;
   }

   #sec2 dl dd {
      font-size: 17px;
      letter-spacing: 0.1em;
      padding: 21px 0 0 277px;
   }

   #sec2 dl dd span {
      letter-spacing: inherit;
   }

   #sec2 .photo {
      width: 610px;
      position: absolute;
      top: 157px;
      right: -152px;
   }

   #sec2 .slider {
      width: 430px;
      height: 440px;
      position: absolute;
      bottom: 15px;
      left: -100px;
   }

   #sec2 .slider .slick-slide {
      transition: all ease-in-out .3s;
      /*opacity: .2;*/
      margin-bottom: 23px;
   }

   #sec2 .slider .slick-active {
      opacity: 1;
   }

   #sec2 .slider .slick-current {
      opacity: 1;
   }

   #sec2 .txt {
      width: 567px;
      margin-left: auto;
      padding-top: 220px;
   }

   #sec2 .note {
      text-align: right;
      padding-top: 50px;
   }
}

/* -- -- */
#sec3 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec3 {
      padding-bottom: 30vw;
   }

   #sec3 .box .col {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      padding-bottom: 16vw;
   }

   #sec3 .box h3 {
      flex: 1 0 0;
   }

   #sec3 .box figure {
      width: 100%;
      padding-top: 5vw;
   }

   #sec3 .box .slider-fade {
      width: 100%;
      position: relative;
   }

   #sec3 .box .slider-fade .slick-dots {
      width: 100%;
      position: absolute;
      bottom: 4vw;
      left: 0;
      padding-top: 0;
      z-index: 1;
   }

   #sec3 .box dl {
      width: 100%;
      padding-top: 6vw;
   }

   #sec3 .box dl dt {
      width: max-content;
      font-size: 4vw;
      line-height: 2;
      letter-spacing: 0.3em;
      border-bottom: 1px solid #a5a5a5;
      margin: 0 auto;
   }

   #sec3 .box dl dd {
      line-height: 30px;
      letter-spacing: 0.1em;
      padding-top: 3vw;
   }

   #sec3 .button {
      padding-top: 2vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec3 {
      padding-bottom: 173px;
   }

   #sec3 .wrap {
      width: 90%;
      margin: 0 auto;
      max-width: 1270px;
   }

   #sec3 .box {
      display: grid;
      grid-template-columns: repeat(2, 48%);
      gap: 120px 4%;
   }

   #sec3 .box .col {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
   }

   #sec3 .box h3 {
      flex: 1 0 0;
      padding-left: 10px;
   }

   #sec3 .box .price {
      padding-right: 10px;
   }

   #sec3 .box figure {
      width: 100%;
      padding-top: 6px;
   }

   #sec3 .box .slider-fade {
      width: 100%;
      max-width: 606px;
      position: relative;
   }

   #sec3 .box .slider-fade .slick-dots {
      width: 100%;
      position: absolute;
      bottom: 14px;
      left: 0;
   }

   #sec3 .box dl {
      display: grid;
      grid-template-columns: 80px 1fr;
      align-items: center;
      width: 100%;
      padding: 20px 10px 0;
              min-height: 210px;
   }

   #sec3 .box dl dt {
      font-size: 17px;
      line-height: 39px;
      letter-spacing: 0.3em;
   }

   #sec3 .box dl dd {
      line-height: 36px;
      letter-spacing: 0.1em;
      border-left: 1px solid #a5a5a5;
      padding-left: 23px;
              text-align: justify;
   }

   #sec3 .button {
      padding-top: 127px;
   }

   #sec3 .button a {
      width: 660px;
   }
}



/* -- -- */
/*#sec4 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec4 .bg-parallax {
      min-height: 126.8vw;
   }

   #sec4 .bg-parallax .img-parallax img {
   }

   #sec4 h2 {
      letter-spacing: 0.3em;
      padding: 13vw 0 8vw;
      position: relative;
   }

   #sec4 h2:before {
      content: '';
      width: 0;
      height: 13vw;
      border-left: 1px solid #000;
      position: absolute;
      top: -4.8vw;
      left: 50%;
      z-index: 1;
   }

   #sec4 h2:after {
      content: '';
      width: 0;
      height: 4.8vw;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #sec4 .photo {
      padding-top: 4vw;
   }

   #sec4 .col {
      padding-top: 8vw;
   }

   #sec4 h3 {
      padding-left: 8vw;
   }

   #sec4 .price {
      text-align: right;
      line-height: 40px;
      padding: 0 8vw 8vw 0;
   }

   #sec4 hr {
      border: 0;
      border-top: 1px solid #a5a5a5;
   }

   #sec4 .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2vw;
      font-size: 12px;
      line-height: 27px;
      letter-spacing: 0.1em;
      padding: 8vw 4vw 12vw;
   }

   #sec4 .list li {
      position: relative;
      padding-left: 15px;
   }

   #sec4 .list li:before {
      content: '・';
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .button {
      background-color: #D8D2C8;
      margin: 0 -5.3vw;
      padding: 12.8vw 5.3vw 24vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec4:before {
      content: '';
      width: calc(50% + 288px);
      height: 270px;
      background: #D8D2C8;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec4 .bg-parallax {
      background-image: url("");
      min-height: 670px;
   }

   #sec4 h2 {
      letter-spacing: 0.3em;
      padding: 72px 0 50px;
      position: relative;
   }

   #sec4 h2:before {
      content: '';
      width: 0;
      height: 91px;
      border-left: 1px solid #000;
      position: absolute;
      top: -35px;
      left: 50%;
      z-index: 1;
   }

   #sec4 h2:after {
      content: '';
      width: 0;
      height: 31px;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #sec4 .photo {
      width: 630px;
      position: absolute;
      top: 265px;
      left: -130px;
   }

   #sec4 .col {
      width: 416px;
      margin-left: auto;
      padding: 145px 0 100px;
   }

   #sec4 h3 {
      padding-left: 42px;
   }

   #sec4 .price {
      text-align: right;
      line-height: 40px;
      padding: 0px 15px 19px 0;
   }

   #sec4 hr {
      border: 0;
      border-top: 1px solid #a5a5a5;
      margin: 0 -50px 0 -50px;
   }

   #sec4 .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      line-height: 36px;
      letter-spacing: 0.1em;
      padding-top: 33px;
   }

   #sec4 .list li {
      position: relative;
      padding-left: 17px;
   }

   #sec4 .list li:before {
      content: '・';
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec4 .button {
      padding-top: 153px;
   }
}*/

/* -- -- */
#sec5 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec5 {
      padding: 15vw 0 38vw;
   }

   #sec5:before {
      content: '';
      width: 44vw;
      height: 12vw;
      background-color: #D8D2C8;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec5 h2 {
      font-size: 5.6vw;
   }

   #sec5 .box-1 {
      padding-top: 6vw;
      position: relative;
   }

   #sec5 .box-1 .txt {
      padding-bottom: 12vw;
   }

   #sec5 .box-1 figure {
      margin: 0 -5.3vw;
   }

   #sec5 .box-1 ul {
      display: flex;
      justify-content: space-between;
      position: absolute;
      right: -5.3vw;
      bottom: 0;
      left: -5.3vw;
      color: #fff;
   }

   #sec5 .box-1 ul li {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      width: 33.33%;
      height: 108vw;
      position: relative;
   }

   #sec5 .box-1 ul span {
      display: block;
      width: 10vw;
      height: 49vw;
      margin: 0 auto;
      position: relative;
   }

   #sec5 .box-1 ul span:before {
      content: '';
      width: 0;
      height: 10vw;
      border-left: 1px solid #a5a5a5;
      position: absolute;
      bottom: 52vw;
      left: 50%;
   }

   #sec5 .box-1 ul a {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec5 .box-1 ul a i {
      display: block;
      width: 12vw;
      height: 12vw;
      background: #fffef9 url("../img/bg/icon-blank.png") no-repeat center/3.3vw auto;
      border-radius: 50%;
      position: absolute;
      bottom: 4vw;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec5 .box-1 ul li:nth-child(1) span:before {
      height: 12.8vw;
   }

   #sec5 .box-1 ul li:nth-child(3) span:before {
      height: 10vw;
   }

   #sec5 .box-1 ul li:nth-child(3) span:before {
      height: 5vw;
   }

   #sec5 .box-2 {
      text-align: center;
      padding-top: 14vw;
   }

   #sec5 .box-2 h3 {
      font-size: 5.1vw;
      margin: 0 -3vw;
      padding-top: 8vw;
   }

   #sec5 .box-2 .txt {
      text-align: center;
      padding-top: 6vw;
   }

   #sec5 .box-2 .txt br {
      display: block;
   }

   .seasonings {
      display: flex;
      align-items: center;
      height: 85vh;
      overflow-y: auto;
   }

   .seasonings .slider {
      width: 75vw;
      margin: 0 auto;
   }

   .seasonings .slider .slide .col {
      text-align: left;
   }

   .seasonings .slider .slide .no {
      max-width: max-content;
      font-weight: 400;
      font-size: 4vw;
      letter-spacing: 0.3em;
      line-height: 1.5;
      border-bottom: 1px solid;
      text-align: center;
      margin: 0 auto;
      padding-top: 6vw;
   }

   .seasonings .slider .slide .no span {
      font-size: 4.8vw;
   }

   .seasonings .slider .slide h3 {
      font-size: 6.6vw;
      padding-top: 8vw;
      text-align: center;
   }

   .seasonings .slider .slide .txt {
      padding-top: 3vw;
      line-height: 2.2;
   }

   .seasonings .slider .slide .txt br {
      display: block;
   }

   .seasonings .slider .photo {
      width: 100%;
   }

   .seasonings .slider .photo .slick-dots {
      padding-top: 0;
      position: absolute;
      right: 0;
      bottom: 4vw;
      left: 0;
   }

}

@media only screen and (min-width: 768px) {
   #sec5 {
      padding: 124px 0 222px;
      position: relative;
   }

   #sec5:before {
      content: '';
      width: 310px;
      height: 275px;
      background-color: #D8D2C8;
      position: absolute;
      bottom: 0;
      right: 0;
   }

   #sec5 .box-1 {
      background: url("") no-repeat center top/cover;
      width: 1304px;
      height: 825px;
      margin: 83px -152px 110px;
      padding: 92px 0 0;
      color: #fff;
      box-sizing: border-box;
   }

   #sec5 .box-1 .txt {
      width: 585px;
      line-height: 36px;
      letter-spacing: 0.1em;
      margin-left: auto;
      position: relative;
      z-index: 1;
   }

   #sec5 .box-1 ul {
      display: flex;
      justify-content: space-between;
      gap: 0px;
      max-width: 740px;
      margin: 0 auto;
      padding-top: 260px;
   }

   #sec5 .box-1 ul li {
      position: relative;
   }

   #sec5 .box-1 ul span {
      display: block;
      width: 68px;
      height: 160px;
      padding-top: 116px;
      position: relative;
   }

   #sec5 .box-1 ul span:before {
      content: '';
      width: 0;
      height: 100px;
      border-left: 1px solid #a5a5a5;
      position: absolute;
      top: 0;
      left: 50%;
   }

   #sec5 .box-1 ul a {
      display: block;
      width: 330px;
      height: 530px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
   }

   #sec5 .box-1 ul a i {
      display: block;
      width: 62px;
      height: 62px;
      background: #fffef9 url("../img/bg/icon-blank.png") no-repeat center/15px auto;
      border-radius: 50%;
      opacity: 0;
      position: fixed;
      transition: opacity 0.3s, clip-path 0.5s ease-out, left 0.6s ease-out, top 0.6s ease-out, transform 0.6s ease-out;
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      z-index: 1;
   }

   #sec5 .box-1 ul a:hover {
      opacity: 1;
   }

   #sec5 .box-1 ul li:last-child span:before {
      top: 50px;
      height: 50px;
   }

   #sec5 .box-1 ul li:last-child a {
      height: 470px;
   }

   #sec5 .box-2 {
      min-height: 445px;
      position: relative;
   }

   #sec5 .box-2 figure {
      width: 864px;
      position: absolute;
      top: 0;
      left: -250px;
   }

   #sec5 .box-2 h3 {
      mix-blend-mode: difference;
      color: #fff;
      text-align: right;
      padding: 90px 31px 0 0;
      position: relative;
      z-index: 1;
   }

   #sec5 .box-2 .txt {
      width: 290px;
      margin-left: auto;
      padding-top: 30px;
      line-height: 36px;
   }

   .seasonings {
      overflow-y: auto;
   }

   .seasonings .slider {
      width: 1100px;
      margin: 0 auto;
   }

   .seasonings .slider .slide {
      display: flex;
      justify-content: space-between;
      align-items: center;
   }

   .seasonings .slider .slide .col {
      text-align: left;
   }

   .seasonings .slider .slide .no {
      max-width: max-content;
      font-weight: 400;
      font-size: 17px;
      letter-spacing: 0.3em;
      line-height: 39px;
      border-bottom: 1px solid;
   }

   .seasonings .slider .slide .no span {
      font-size: 22px;
   }

   .seasonings .slider .slide h3 {
      padding-top: 40px;
   }

   .seasonings .slider .slide .txt {
      padding-top: 30px;
   }

   .seasonings .slider .photo {
      width: 650px;
   }

   .seasonings .slider .photo .slick-dots {
      position: absolute;
      right: 0;
      bottom: 12px;
      left: 0;
   }

   .seasonings .slider .col {
      width: 320px;
   }

}

@media only screen and (min-width: 768px) and (min-height: 650px) {
   .seasonings {
      display: flex;
      align-items: center;
      height: 80vh;
   }
}

/* -- -- */
#sec6 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec6 {
      padding-bottom: 30vw;
   }

   #sec6 .photo {
      background: url("../img/bg/sec6-photo-1_sp.jpg") no-repeat center bottom/cover;
      width: 100%;
      color: #fff;
   }

   #sec6 .photo h2 {
      width: 57vw;
      height: 147vw;
      margin-left: auto;
      padding: 8vw 0 0;
   }

   #sec6 .photo h2 span {
      display: block;
   }

   #sec6 .photo h2 .en {
      letter-spacing: 0.3em;
      border-bottom: 1px solid #fffef9;
      padding-left: 32vw;
   }

   #sec6 .photo h2 .ja {
      width: 48vw;
      height: 59vw;
      padding-top: 8vw;
   }

   #sec6 .txt {
      padding: 12vw 4vw 0;
   }

   #sec6 .box-1 {
      padding: 0 5.3vw 11vw;
   }

   #sec6 .box-1 .col {
      padding-top: 10.8vw;
   }

   #sec6 .box-1 figure {
      position: relative;
   }

   #sec6 .box-1 figcaption {
      position: absolute;
      right: 5.3vw;
      bottom: 3.3vw;
      left: 5.3vw;
      color: #fff;
      text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.16);
   }

   #sec6 .box-1 .txt-1 {
      text-align: justify;
      padding-top: 4vw;
      letter-spacing: 0;
   }

   #sec6 .box-2 {
      margin: 0 -2.65vw;
      position: relative;
   }

   #sec6 .box-2 h3 {
      width: 40vw;
      color: #fff;
      position: absolute;
             top: 5vw;
        left: -1.7vw;
   }

   #sec6 .box-2 h3 span {
      display: block;
   }

   #sec6 .box-2 h3 .en {
      width: 17vw;
      text-align: center;
      border-bottom: 1px solid #fffef9;
      margin-left: auto;
      letter-spacing: 0.3em;
      position: relative;
   }

   #sec6 .box-2 h3 .en:before {
      content: '';
      width: 0;
      height: 17vw;
      border-left: 1px solid #fffef9;
      position: absolute;
      top: 100%;
      right: 0;
   }

   #sec6 .box-2 h3 .ja {
      width: 36vw;
      height: 32vw;
      padding-top: 5vw;
      font-size: 5.2vw;
   }
   #sec6 .box-2 .txt-1{
           text-align: justify;
              padding: 4vw 5.3vw 0;
        letter-spacing: 0;
   }

   #sec6 .button {
      padding-top: 16vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec6 {
      padding-bottom: 176px;
   }

   #sec6 .photo {
      background: url("../img/bg/sec6-photo-1.jpg") no-repeat center top/cover;
      width: 100%;
      color: #fff;
   }

   #sec6 .photo h2 {
      width: calc(50% - 373px);
      height: 634px;
      margin-left: auto;
      padding: 122px 0 0;
   }

   #sec6 .photo h2 .en {
      display: block;
      letter-spacing: 0.3em;
      border-bottom: 1px solid #fffef9;
      margin-left: 20px;
      padding-left: 18px;
   }

   #sec6 .photo h2 .ja {
      padding-top: 56px;
   }

   #sec6 .txt {
      width: 644px;
      height: 320px;
      margin: 0 auto;
      padding: 110px 0 100px;
   }

   #sec6 .box-1 {
      display: flex;
      width: 90%;
      margin: 0 auto;
      max-width: 1350px;
      justify-content: space-between;
   }

   #sec6 .box-1 .col {
      width: 48%;
   }

   #sec6 .box-1 figure {
      position: relative;
   }

   #sec6 .box-1 figcaption {
      color: #fff;
      position: absolute;
      right: 10px;
      bottom: 27px;
      left: 47px;
   }

   #sec6 .box-1 .txt-1 {
      line-height: 36px;
      text-align: justify;
      margin-left: 13%;
      padding-top: 20px;
   }

   #sec6 .box-2 {
      width: 864px;
      margin: 100px auto 0;
      position: relative;
   }

   #sec6 .box-2 h3 {
      width: 190px;
      color: #fff;
      position: absolute;
              top: 99px;
      left: 60px;
   }

   #sec6 .box-2 h3 span {
      display: block;
   }

   #sec6 .box-2 h3 .en {
      width: 94px;
      text-align: center;
      border-bottom: 1px solid #fffef9;
      margin-left: auto;
      letter-spacing: 0.3em;
      position: relative;
   }

   #sec6 .box-2 h3 .en:before {
      content: '';
      width: 0;
      height: 94px;
      border-left: 1px solid #fffef9;
      position: absolute;
      top: 100%;
      right: 0;
   }

   #sec6 .box-2 h3 .ja {
      width: 165px;
      height: 165px;
      line-height: 55px;
      padding-top: 44px;
   }
   #sec6 .box-2 .txt-1{
          line-height: 36px;
    text-align: justify;
    margin: 0 auto;
    padding-top: 20px;
    max-width: 600px;
   }
   
   #sec6 .button {
      padding-top: 132px;
   }

   #sec6 .button a {
      width: 660px;
   }
}


@media only screen and (max-width: 1350px) {
   #sec6 .box-1 .txt-1 br {
      display: none;
   }
}



/* -- -- */
#sec7 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec7 {
      border: 5.3vw solid #D8D2C8;
   }

   #sec7 .wrap {
      padding: 0 4vw;
   }

   #sec7 h2 {
      letter-spacing: 0.3em;
      padding: 12vw 0 8vw;
      position: relative;
   }

   #sec7 h2:before {
      content: '';
      width: 0;
      height: 13vw;
      border-left: 1px solid #000;
      position: absolute;
      top: -5.3vw;
      left: 50%;
      z-index: 1;
   }

   #sec7 h2:after {
      content: '';
      width: 0;
      height: 4.8vw;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #sec7 .box {
      padding: 4.8vw 0 12.8vw;
   }

   #sec7 .box figure {
      padding: 0 6.4vw;
   }

   #sec7 .box .col {
      padding-top: 13vw;
   }

   #sec7 .box h3 {
      font-size: 5.6vw;
      border-bottom: 1px solid #a5a5a5;
      padding-bottom: 8vw;
   }

   #sec7 .box h3 small {
              font-size: 3.8vw;
        display: block;
        letter-spacing: 0.1em;
   }

   #sec7 .box .txt {
      text-align: center;
      border-bottom: 1px solid #a5a5a5;
      padding: 6vw 0;
   }

   #sec7 .box .txt br {
      display: block;
   }

   #sec7 .box ul {
      width: max-content;
      letter-spacing: 0.1em;
      line-height: 25px;
      text-align: left;
      margin: 0 auto;
      padding-top: 10.8vw;
   }

   #sec7 .box ul li {
      padding-left: 38px;
   }

   #sec7 .box ul .home {
      background: url("") no-repeat center left/28px auto;
   }

   #sec7 .box ul .time {
      background: url("") no-repeat center left/28px auto;
      margin-top: 15px;
   }

   #sec7 .box .button {
      padding-top: 10vw;
   }

   #sec7 .box .button a:before {
      width: 6.6vw;
      height: 6.6vw;
      background: url("../img/icon-insta.png") no-repeat center top/cover;
   }
   
   
   #sec7 .box .button2 {
      padding-top: 10vw;
   }

   #sec7 .box .button2 a:before {
      width: 6.6vw;
      height: 6.6vw;
      background: url("../img/icon-hp.png") no-repeat center top/cover;
   }
   
}

@media only screen and (min-width: 768px) {
   #sec7 {
      border: 40px solid #D8D2C8;
   }

   #sec7 h2 {
      letter-spacing: 0.3em;
      padding: 68px 0 50px;
      position: relative;
   }

   #sec7 h2:before {
      content: '';
      width: 0;
      height: 91px;
      border-left: 1px solid #000;
      position: absolute;
      top: -40px;
      left: 50%;
      z-index: 1;
   }

   #sec7 h2:after {
      content: '';
      width: 0;
      height: 31px;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #sec7 .box {
      position: relative;
      margin-top: 60px;
      padding: 22px 0 110px;
   }

   #sec7 .box figure {
      width: 610px;
      position: absolute;
      top: 0;
      right: -100px;
   }

   #sec7 .box .col {
      width: 440px;
   }

   #sec7 .box h3 {
      border-bottom: 1px solid #a5a5a5;
      padding-bottom: 20px;
   }

   #sec7 .box h3 small {
      display: block;
      line-height: 45px;
              font-size: 19px;
   }

   #sec7 .box .txt {
      border-bottom: 1px solid #a5a5a5;
      padding: 20px 0 30px;
   }

   #sec7 .box ul {
      max-width: 345px;
      line-height: 30px;
      letter-spacing: 0.1em;
      margin: 0 auto;
      padding-top: 58px;
   }

   #sec7 .box ul li {
      text-align: left;
      padding-left: 46px;
   }

   #sec7 .box ul .home {
      background: url("") no-repeat center left/34px auto;
   }

   #sec7 .box ul .time {
      background: url("") no-repeat center left/34px auto;
      margin-top: 17px;
   }

   #sec7 .box .button {
      padding-top: 52px;
   }

   #sec7 .box .button a {
      width: 360px;
      height: 63px;
   }

   #sec7 .box .button a:before {
      width: 30px;
      height: 30px;
      background: url("../img/icon-insta.png") no-repeat center top/cover;
   }
   
   
   #sec7 .box .button2 {
      padding-top: 52px;
   }

   #sec7 .box .button2 a {
      width: 360px;
      height: 63px;
   }

   #sec7 .box .button2 a:before {
      width: 30px;
      height: 30px;
      background: url("../img/icon-hp.png") no-repeat center top/cover;
   }
}

@media only screen and (min-width: 1241px) {
   #sec7 .wrap {
      width: 1140px;
   }

   #sec7 .box figure {
      right: 0;
   }
}

/* -- -- */
#sec8 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec8 {
      padding: 24vw 0 20vw;
   }

   #sec8 h2 .en {
      display: inline-block;
      vertical-align: top;
      width: 10vw;
      height: 28vw;
      border-right: 1px solid #000;
      line-height: 10vw;
      letter-spacing: 0.1em;
   }

   #sec8 h2 .ja {
      display: inline-block;
      vertical-align: top;
      padding-left: 9vw;
      position: relative;
      top: -3vw;
   }

   #sec8 .photo {
      margin: 0 -5.3vw;
   }

   #sec8 .floormap {
      padding: 8vw 4vw 0;
   }

   #sec8 .txt {
      padding-top: 8vw;
   }

   #sec8 .txt br {
      display: block;
   }
}

@media only screen and (min-width: 768px) {
   #sec8 {
      padding: 184px 0 125px;
   }

   #sec8 h2 .en {
      display: inline-block;
      vertical-align: top;
      width: 10px;
      height: 128px;
      border-right: 1px solid #000;
      line-height: 10px;
      letter-spacing: 0.1em;
      padding-right: 26px;
   }

   #sec8 h2 .ja {
      display: inline-block;
      vertical-align: top;
      line-height: 48px;
      padding-left: 50px;
   }

   #sec8 .photo {
      margin: 0 -152px;
   }

   #sec8 .floormap {
      position: absolute;
      bottom: 0;
      left: 0;
   }

   #sec8 .txt {
      width: 400px;
      margin-left: auto;
      padding: 150px 0 47px;
   }
}

/* -- -- */
#sec9 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec9 {
      padding-bottom: 30vw;
   }

   #sec9:before {
      content: '';
      width: 20vw;
      height: 112vw;
      background: #D8D2C8;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec9 h2 {
      display: flex;
      align-items: center;
      gap: 6vw;
      padding: 13vw 5.3vw;
      position: relative;
      z-index: 1;
      letter-spacing: 0.3em;
      box-sizing: border-box;
   }

   #sec9 h2:after {
      content: '';
      border-top: 1px solid #000;
      flex: 1 0 0;
   }

   #sec9 .slider {
      width: 100%;
   }

   #sec9 .slider figure {
      width: 157vw;
      margin-right: 8vw;
   }

   #sec9 .c-box {
      padding-top: 32vw;
   }
   #sec9 .cln{
    margin: 0 auto;
    text-align: center;
    position: relative;
    display: block;
}
   #sec9 .button {
      padding-top: 1em;
   }

   #sec9 .button a {
      height: 27.5vw;
   }

   #sec9 .button a:before {
      width: 6.6vw;
      height: 6.6vw;
      background: url("../img/icon-insta.png") no-repeat center top/cover;
   }
   #sec9 .ph-area{
          margin-bottom: -14vw;
   }
   
   #sec9 .s9-img1{
          margin: 0 49vw 4vw 5vw;
    padding-top: 220px;
   }
   #sec9 .s9-img2{
          margin: -355px 10vw 0;
   }
   #sec9 .s9-img3{
          margin: -10vw 4vw 0 67vw;
   }
}

@media only screen and (min-width: 768px) {
   #sec9 {
      padding-bottom: 222px;
   }

   #sec9:before {
      content: '';
      width: calc(50% - 415px);
      height: 790px;
      background: #D8D2C8;
      position: absolute;
      top: 0;
      left: 0;
   }

   #sec9 h2 {
      display: flex;
      align-items: center;
      gap: 25px;
      width: 1090px;
      margin: 0 auto;
      padding: 73px 0 95px 78px;
      position: relative;
      z-index: 1;
      letter-spacing: 0.3em;
      box-sizing: border-box;
   }

   #sec9 h2:after {
      content: '';
      border-top: 1px solid #000;
      flex: 1 0 0;
   }

   #sec9 .slider {
      width: 100%;
   }

   #sec9 .slider figure {
      width: 1470px;
      margin-right: 65px;
   }
   #sec9 .c-box {
    padding-top: 250px;
   }
   #sec9 .cln{
    font-size: 14px;
}
   #sec9 .button {
      padding-top: 10px;
   }

   #sec9 .button a {
      width: 900px;
      height: 125px;
   }

   #sec9 .button a:before {
      width: 30px;
      height: 30px;
      background: url("../img/icon-insta.png") no-repeat center top/cover;
   }
   #sec9 .ph-area{
      min-height: calc(690px - 250px);
      position: relative;
      max-width: 1380px;
      width: 90%;
      margin: 0 auto;
   }
   #sec9 .photo{
      position: absolute;
   }
   #sec9 .photo img{
      width: 100%;
      height: auto;
   }
   #sec9 .s9-img1{
      top: 0;
      left: 3%;
      width: 27%;
      z-index: 1;
   }
   #sec9 .s9-img2{
      top: 23%;
      left: 27%;
      width: 49%;
      z-index: 3;
      max-width: 660px;
   }
   #sec9 .s9-img3{
      top: 53%;
      right: 0;
      width: 18%;
      z-index: 2;
   }
}

/* -- -- */
#sec10 {
   position: relative;
}

@media only screen and (max-width: 767px) {
   #sec10 {
      padding-bottom: 22vw;
   }

   #sec10 figure {
      width: 52vw;
      margin: 0 auto;
   }

   #sec10 .col {
      padding: 12vw 0.7vw 0;
   }

   #sec10 h2 {
      position: relative;
   }

   #sec10 h2 .en {
      font-size: 3.2vw;
      letter-spacing: 0.3em;
      position: absolute;
      bottom: -0.8vw;
      left: 25vw;
   }

   #sec10 .table-year {
      font-size: 12px;
      line-height: 35px;
      padding-top: 30px;
      position: relative;
   }

   #sec10 .table-year:before {
      content: '';
      border-left: 1px solid #a5a5a5;
      position: absolute;
      top: 42px;
      bottom: 9px;
      left: 45px;
   }

   #sec10 .table-year dl {
      display: grid;
      grid-template-columns: 45px 1fr;
      letter-spacing: 0.1em;
   }

   #sec10 .table-year dl dd {
      padding-left: 15px;
   }
}

@media only screen and (min-width: 768px) {
   #sec10 {
      padding-bottom: 227px;
   }

   #sec10 .wrap {
      display: flex;
      justify-content: space-between;
      gap: 20px;
   }

   #sec10 figure {
      width: 386px;
   }

   #sec10 .col {
      width: 500px;
      padding: 54px 0 0;
   }

   #sec10 h2 {
      line-height: 42px;
      position: relative;
   }

   #sec10 h2 span {
      line-height: inherit;
   }

   #sec10 h2 .en {
      font-size: 17px;
      letter-spacing: 0.3em;
      position: absolute;
      bottom: -2px;
      left: 137px;
   }

   #sec10 .table-year {
      padding-top: 42px;
      position: relative;
   }

   #sec10 .table-year:before {
      content: '';
      border-left: 1px solid #a5a5a5;
      position: absolute;
      top: 57px;
      bottom: 15px;
      left: 74px;
   }

   #sec10 .table-year dl {
      display: grid;
      grid-template-columns: 75px 1fr;
      letter-spacing: 0.1em;
   }

   #sec10 .table-year dl dd {
      padding-left: 32px;
   }
}



#other {
   padding: 0;
   position: relative;
   overflow: hidden;
}

#other .inner {
   position: relative
}

#other .inner::before {
   content: "";
   position: absolute;
   border: 1px solid #a5a5a5;
   inset: 62vw 5% 16vw;
   z-index: -1
}

#other h2 {
   letter-spacing: 0.3em;
   padding: 13vw 0 4vw;
   position: relative;
}

#other h2:before {
   content: '';
   width: 0;
   height: 13vw;
   border-left: 1px solid #000;
   position: absolute;
   top: -4.8vw;
   left: 50%;
   z-index: 1;
}
#other .txt1{
   text-align: center;
   padding: 0 0 8vw;
   position: relative;
}
#other .txt1:after {
   content: '';
   width: 0;
   height: 4.8vw;
   border-left: 1px solid #000;
   position: absolute;
   bottom: 0;
   left: 50%;
}

#other .swiper-container{
   overflow: visible;
   margin-top: 32vw
}
#other .course-container{
   overflow: visible;
   margin-top: 20vw;
       padding-bottom: 5vw;
}

#other .swiper-container .img ,
#other .course-container .img  {
   transition: all 1s ease
}

#other .swiper-container .info {
   opacity: 0;
   width: 84vw;
   margin: 20vw auto 20vw -23vw;
   transition: all 1s ease
}
#other .course-container .info{
   width: 84vw;
   margin: 10vw auto 20vw ;
   transition: all 1s ease
}


#other .swiper-container .col h3 ,
#other .course-container .col h3 {
   padding-left: 2vw;
}

#other .swiper-container .col .price ,
#other .course-container .col .price {
   text-align: right;
   line-height: 1;
   padding: 0 2vw 4vw 0;
}
#other .swiper-container .col .price b ,
#other .course-container .col .price b {
   font-weight: normal;
   display: block;
           font-size: 5vw;
   text-align: left;
   line-height: 2;
}

   #other .course-container .col .price-l{
          display: flex;
    flex-direction: column;
    text-align: left;
   }
   #other .course-container .col .price-l dt{
          font-weight: normal;
    display: inline-block;
         font-size: 4.5vw;
    line-height: 2.5;
   }
   #other .course-container .col .price-l dd{
      text-align: right;  
           font-size: 5vw;
   }

#other .swiper-container .col hr ,
#other .course-container .col hr {
   border: 0;
   border-top: 1px solid #a5a5a5;
}

#other .swiper-container .col .list ,
#other .course-container .col .list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 2vw;
   font-size: 12px;
   line-height: 27px;
   letter-spacing: 0;
   padding: 6vw 0;
}

#other .swiper-container .col .list li ,
#other .course-container .col .list li {
   position: relative;
   padding-left: 15px;
}

#other .swiper-container .col .list li:before ,
#other .course-container .col .list li:before {
   content: '・';
   position: absolute;
   top: 0;
   left: 0;
}
#other .swiper-container .col .memo ,
#other .course-container .col .memo {
   /*font-size: 12px;
   line-height: 27px;
   letter-spacing: 0;*/
   padding: 6vw 0;
}

#other .swiper-container .swiper-slide ,
#other .course-container .course-slide {
   transition: all 200ms linear
}

#other .swiper-container .swiper-slide.swiper-slide-prev {
   left: 4%
}

#other .swiper-container .swiper-slide.swiper-slide-prev img {
   -o-object-position: left 5vw top 0px;
   object-position: left 5vw top 0px
}

#other .swiper-container .swiper-slide.swiper-slide-next {
   right: 9%
}

#other .swiper-container .swiper-slide.swiper-slide-next img {
   -o-object-position: left 5vw top 0px;
   object-position: left 5vw top 0px
}

#other .swiper-container .swiper-slide .img {
   position: relative;
   top: -6vw
}
#other .course-container .course-slide .img{
   position: relative;
   margin: 0 9vw;   
}

#other .swiper-container .swiper-slide .img img ,
#other .course-container .course-slide .img img  {
   width: 100%;
   height: 100%;
   -o-object-fit: cover;
   object-fit: cover
}

#other .swiper-container .swiper-slide.swiper-slide-active .info {
   opacity: 1
}

#other .swiper-container .swiper-slide.swiper-slide-active .img {
   transform: scale(1.9);
   top: 0
}

#other .swiper-container .swiper-button-prev,
#other .swiper-container .swiper-button-next {
   width: 11vw;
   height: 11vw;
   background-repeat: no-repeat;
   background-size: 100%;
   margin-top: 0;
   top: 26.6vw
}

#other .swiper-container .swiper-button-prev {
   background-image: url("../img/bg/prev.png") !important;
   left: 1vw
}

#other .swiper-container .swiper-button-next {
   background-image: url("../img/bg/next.png") !important;
   right: 1vw
}

#other .bnr-popup {
   width: -moz-fit-content;
   width: fit-content;
   margin: 20vw 2% 0 auto
}

@media only screen and (min-width: 768px) {
   #other {
      padding: 0;
   }

   #other .inner {
      max-width: 1390px;
      margin: 0 auto
   }

   #other .inner::before {
      inset: 318px 119px 0
   }

   #other h2 {
      letter-spacing: 0.3em;
      padding: 72px 0 30px;
      position: relative;
   }

   #other h2:before {
      content: '';
      width: 0;
      height: 91px;
      border-left: 1px solid #000;
      position: absolute;
      top: -35px;
      left: 50%;
      z-index: 1;
   }

   #other .txt1{
      padding: 0 0 50px;
   }
   #other .txt1:after {
      content: '';
      width: 0;
      height: 31px;
      border-left: 1px solid #000;
      position: absolute;
      bottom: 0;
      left: 50%;
   }

   #other .swiper-container {
      margin-top:150px;
   }
   #other .course-container  {
      margin-top:150px;
       padding-bottom: 20px;
   }

   #other .swiper-container .info ,
   #other .course-container .info  {
      max-width: 553px;
      margin: 57px auto 100px
   }
   #other .course-container .info  {
           max-width: 673px;
   }

   

   #other .swiper-container .col h3 ,
   #other .course-container .col h3  {
      padding-left: 42px;
   }

   #other .swiper-container .col .price ,
   #other .course-container .col .price  {
      text-align: right;
      line-height: 40px;
      padding: 0px 15px 19px 0;
   }
   #other .swiper-container .col .price b ,
   #other .course-container .col .price b {
   font-weight: normal;
   display: inline-block;
   font-size: 22px;
   text-align: left;
           line-height: inherit;
}

   #other .course-container .col .price-l{
          display: flex;
    flex-direction: column;
    text-align: left;
              max-width: 523px;
        margin: 0 auto;
   }
   #other .course-container .col .price-l dt{
    font-size: 22px;
              line-height: 2;
   }
   #other .course-container .col .price-l dd{
      font-size: 22px;
   }
   
   
   
   #other .swiper-container .col hr ,
   #other .course-container .col hr  {
      border: 0;
      border-top: 1px solid #a5a5a5;
      margin: 0 -50px 0 -50px;
   }

   #other .swiper-container .col .list ,
   #other .course-container .col .list  {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
      line-height: 36px;
      letter-spacing: 0.1em;
      padding: 33px 0;
      font-size: inherit;
   }

   #other .swiper-container .col .list li ,
   #other .course-container .col .list li  {
      position: relative;
      padding-left: 17px;
   }

   #other .swiper-container .col .list li:before ,
   #other .course-container .col .list li:before  {
      content: '・';
      position: absolute;
      top: 0;
      left: 0;
   }

   #other .swiper-container .col .memo ,
   #other .course-container .col .memo {
    /*  line-height: 36px;
      letter-spacing: 0.1em;*/
      padding: 33px 0;
   }
   #other .course-container .col .memo{
      text-align: center;
   }

   #other .swiper-container .swiper-slide .img   {
      top: 0;
      transform: translateY(26.5%) scale(0.52)
   }
   #other .course-container .course-slide .img{
                margin: 0 auto;
        max-width: 820px;
   }

   #other .swiper-container .swiper-slide.swiper-slide-prev {
      left: 69px
   }

   #other .swiper-container .swiper-slide.swiper-slide-prev img {
      -webkit-clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
      clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
      -o-object-position: left 138px top 0px;
      object-position: left 138px top 0px
   }

   #other .swiper-container .swiper-slide.swiper-slide-next {
      right: 181px
   }

   #other .swiper-container .swiper-slide.swiper-slide-next img {
      -webkit-clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
      clip-path: polygon(31% 0, 100% 0, 100% 100%, 31% 100%);
      -o-object-position: left 138px top 0px;
      object-position: left 138px top 0px
   }

   #other .swiper-container .swiper-slide.swiper-slide-active .img {
      transform: scale(1.05)
   }

   #other .swiper-container .swiper-button-prev,
   #other .swiper-container .swiper-button-next {
      width: 74px;
      height: 74px;
      top: 43.5%
   }

   #other .swiper-container .swiper-button-prev:hover,
   #other .swiper-container .swiper-button-next:hover {
      opacity: .8
   }

   #other .swiper-container .swiper-button-prev {
      left: 20%
   }

   #other .swiper-container .swiper-button-next {
      right: 20%
   }

   #other .bnr-popup {
      margin: -66px 199px 0 auto
   }
}

@media screen and (min-width: 768px)and (max-width: 1500px) {
   #other {
      background-size: 1500px auto
   }
}

@media screen and (min-width: 768px)and (max-width: 1350px) {
   #other .swiper-container .swiper-slide.swiper-slide-prev {
      left: calc(-50vw + 56.7%)
   }

   #other .swiper-container .swiper-slide.swiper-slide-next {
      right: calc(-50vw + 65%)
   }

   #other .bnr-popup {
      margin-right: 20px
   }
}