@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#footer {

  padding-top: 0px;

}

#MO260521travel {

  min-width: 100%;

  font-feature-settings: "palt";

  position: relative;

  display: flex;

  --font-credit: neue-haas-grotesk-display, sans-serif;

  --font-gothic: hiragino-kaku-gothic-pron, sans-serif;

  --font-l: 300;

  --font-r: 500;

  --black: #000000;

  --white: #ffffff;

  --yellow: #fff261;

  --pc-width: 1400;

  --sp-width: 750;

  --pc-artboard-width: 490;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}



@media (min-width: 1401px) {

  #MO260521travel {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

}

@media (min-width: 768px) and (max-width: 1400px) {

  #MO260521travel {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}

@media (max-width: 767px) {

  #MO260521travel {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#MO260521travel img,

#MO260521travel video {

  display: block;

  width: 100%;

  height: auto;

}



#MO260521travel h2,

#MO260521travel h3,

#MO260521travel p,

#MO260521travel li {

  margin-block: calc((1em - 1lh) / 2);

}



#MO260521travel .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



#MO260521travel [class*="-img-"]:has(a) {

  background: var(--white);

}



/* --- 属性セレクタ設定 --- */



#MO260521travel [class*="__inner--absolute"] {

  position: relative;

}



#MO260521travel [class*="__txt"] {

  font-family: var(--font-gothic);

  color: var(--black);

  font-size: calc(21 * var(--formula));

  line-height: calc(40 / 21);

  letter-spacing: 0.1em;

  text-align: left;

  font-weight: var(--font-l);

}



#MO260521travel [class*="__inner--vertical"] {

  display: flex;

  flex-direction: column;

}



#MO260521travel [class*="__credit"] {

  margin: calc(50 * var(--formula)) 0 0 0;

  gap: calc(18 * var(--formula));

  display: flex;

  flex-direction: column;

}

#MO260521travel [class*="__credit"] li {

  font-family: var(--font-credit);

  color: var(--black);

  font-size: calc(24 * var(--formula));

  line-height: 1;

  letter-spacing: 0.025em;

  text-align: left;

  font-weight: var(--font-r);

  gap: calc(18 * var(--formula));

  display: flex;

}



#MO260521travel [class*="__modal-btn"] {

  position: absolute;

  bottom: calc(15 * var(--formula));

  z-index: 10;

  width: calc(54 * var(--formula));

  cursor: pointer;

  padding: 0;

}

#MO260521travel .sec-set:not(.lp-main-area):has([class*="__modal-btn"]) {

  margin: 0 0 calc(99 * var(--formula)) 0;

}



#MO260521travel

  .sec-set:has([class*="__modal-btn"])

  > div:not(.travel-modal-overlay) {

  position: relative;

  z-index: 1;

}



/* --- 固有クラス設定 --- */

#MO260521travel a.link-disable:hover {

  opacity: 1;

}

#MO260521travel .z1-relative {

  z-index: 1;

  position: relative;

}



#MO260521travel .z5-absolute {

  z-index: 5;

  position: absolute;

}

#MO260521travel .self-start {

  align-self: start;

}

#MO260521travel .self-end {

  align-self: end;

}

#MO260521travel .yellow-line a,

#MO260521travel [class*="modal-sec"] > div a {

  display: block;

  width: 100%;

  height: auto;

}

#MO260521travel .yellow-line {

  position: relative;

}

#MO260521travel .yellow-line::after {

  content: "";

  position: absolute;

  inset: 0;

  border-width: calc(2 * var(--formula));

  border-style: solid;

  border-color: var(--yellow);

  z-index: 10;

  pointer-events: none;

}

#MO260521travel .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  width: calc(490 * var(--formula_pc));

  position: relative;

}



/* --- 抽出されたCSS（上から順） --- */



#MO260521travel .lp-mv-area {

  position: sticky;

  top: 0;

  height: 100vh;

}

#MO260521travel .lp-mv-area,

#MO260521travel .lp-main-area {

  flex: 0 0 50%;

  width: 50%;

}



#MO260521travel .lp-mv-img-01,

#MO260521travel .lp-mv-img-01 a {

  width: 100%;

  height: 100%;

}

#MO260521travel .lp-mv-img-01 img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



#MO260521travel .lp-mv-txt-01 {

  width: calc(22.2 * (100vw / 1400));

  right: calc(13 * var(--formula_pc));

  top: calc(11 * var(--formula_pc));

  pointer-events: none;

}

#MO260521travel .lp-mv-txt-02 {

  width: calc(428 * (100vw / 1400));

  top: 40.5%;

  left: calc(44 * var(--formula_pc));

  pointer-events: none;

}



#MO260521travel .lp-mv-txt-03 {

  width: calc(243 * (100vw / 1400));

  right: calc(26 * var(--formula_pc));

  bottom: 30.15%;

  pointer-events: none;

}



#MO260521travel .lp-mv-txt-04 {

  width: calc(317 * (100vw / 1400));

  bottom: calc(35 * var(--formula_pc));

  left: calc(52 * var(--formula_pc));

  pointer-events: none;

}

#MO260521travel .after-img::after {

  content: "";

  background-size: contain;

  background-position: center center;

  position: absolute;

  top: 50%;

  left: 50%;

  background-repeat: no-repeat;

  mix-blend-mode: multiply;

  z-index: -1;

  transform: translate(-50%, -50%);

  display: block;

  pointer-events: none;

}

#MO260521travel .lp-mv-txt-01.after-img::after {

  width: calc(85 * (100vw / 1400));

  height: calc(330 * (100vw / 1400));

  background-image: url(../img/lp-mv-shadow-01.png);

}

#MO260521travel .lp-mv-txt-02.after-img::after {

  width: calc(520 * (100vw / 1400));

  height: calc(206 * (100vw / 1400));

  background-image: url(../img/lp-mv-shadow-02.png);

}

#MO260521travel .lp-mv-txt-03.after-img::after {

  width: calc(320 * (100vw / 1400));

  height: calc(137 * (100vw / 1400));

  background-image: url(../img/lp-mv-shadow-03.png);

}

#MO260521travel .lp-mv-txt-04.after-img::after {

  width: calc(349 * (100vw / 1400));

  height: calc(122 * (100vw / 1400));

  background-image: url(../img/lp-mv-shadow-04.png);

}

#MO260521travel .lp-footer-txt-03.after-img::after {

  width: calc(483 * var(--formula));

  height: calc(321 * var(--formula));

  background-image: url(../img/lp-footer-shadow-01.png);

}



#MO260521travel .teaser-sec {

  margin: calc(103 * var(--formula)) 0 calc(138 * var(--formula)) 0;

  gap: calc(48 * var(--formula));

  /* width: 100%; */

}



#MO260521travel .teaser-txt-02 {

  width: calc(425 * var(--formula));

  margin: 0 0 0 calc(52 * var(--formula));

}



#MO260521travel .terser__txt {

  margin-left: calc(50 * var(--formula));

}



#MO260521travel .teaser__inner--vertical {

  position: absolute;

  right: calc(15 * var(--formula));

  top: calc(-2 * var(--formula));

  gap: calc(5 * var(--formula));

  align-items: center;

}



#MO260521travel .teaser__animate-line {

  position: relative;

  display: inline-block;

  width: 1px;

  height: calc(225 * var(--formula));

  overflow: hidden;

  margin: 0 0 0 calc(-4 * var(--formula));

}



#MO260521travel .teaser__animate-line::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: var(--black);

  animation: linePassThrough 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;

}



#MO260521travel .teaser-txt-01 {

  width: calc(16 * var(--formula));

}



#MO260521travel .sec01-01 {

  width: calc(660 * var(--formula));

}



#MO260521travel .sec01__modal-btn {

  right: calc(60 * var(--formula));

}



#MO260521travel .sec02 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec02-01 {

  width: calc(660 * var(--formula));

}



#MO260521travel .sec02__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec03 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel #sec03-slide,

#MO260521travel #sec03-slide .splide__slide,

#MO260521travel .sec03-01,

#MO260521travel .sec03-02 {

  width: calc(690 * var(--formula));

}



#MO260521travel .splide {

  z-index: 1;

}



#MO260521travel .sec03__modal-btn {

  right: calc(15 * var(--formula));

}



#MO260521travel .sec04 {

  margin: 0 0 calc(101 * var(--formula)) 0 !important;

}



#MO260521travel .sec04-01 {

  width: calc(690 * var(--formula));

}



#MO260521travel .sec04__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec05 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec05-01 {

  width: calc(660 * var(--formula));

}



#MO260521travel .sec05__modal-btn {

  right: calc(62 * var(--formula));

  bottom: calc(17 * var(--formula));

}



#MO260521travel .sec06 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel #sec06-slide,

#MO260521travel #sec06-slide .splide__slide,

#MO260521travel .sec06-01,

#MO260521travel .sec06-02 {

  width: calc(750 * var(--formula));

}

#MO260521travel .sec06__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec07 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec07-01 {

  width: calc(630 * var(--formula));

}



#MO260521travel .sec07__modal-btn {

  right: calc(77 * var(--formula));

  bottom: calc(17 * var(--formula));

}



#MO260521travel .sec08 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec08-01 {

  width: calc(705 * var(--formula));

}



#MO260521travel .sec08__modal-btn {

  left: calc(37 * var(--formula));

}



#MO260521travel .sec09 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec09-01 {

  width: calc(615 * var(--formula));

}



#MO260521travel .sec09__modal-btn {

  right: calc(152 * var(--formula));

  bottom: calc(17 * var(--formula));

}



#MO260521travel .sec10-01 {

  width: calc(750 * var(--formula));

}



#MO260521travel .sec10__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec11 {

  margin: 0 0 calc(101 * var(--formula)) 0 !important;

}



#MO260521travel #sec11-slide,

#MO260521travel #sec11-slide .splide__slide,

#MO260521travel .sec11-01,

#MO260521travel .sec11-02 {

  width: calc(675 * var(--formula));

}



#MO260521travel .sec11__modal-btn {

  right: calc(15 * var(--formula));

}



#MO260521travel .sec12 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec12-01 {

  width: calc(705 * var(--formula));

}



#MO260521travel .sec12__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec13 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec13-01 {

  width: calc(690 * var(--formula));

}



#MO260521travel .sec13__modal-btn {

  right: calc(17 * var(--formula));

  bottom: calc(17 * var(--formula));

}



#MO260521travel .sec14 {

  margin: 0 0 calc(100 * var(--formula)) 0 !important;

}



#MO260521travel .sec14-01 {

  width: calc(630 * var(--formula));

}



#MO260521travel .sec14__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec15-01 {

  width: calc(750 * var(--formula));

}



#MO260521travel .sec15__modal-btn {

  right: calc(15 * var(--formula));

}



#MO260521travel .sec16 {

  margin: 0 0 calc(101 * var(--formula)) 0 !important;

}



#MO260521travel #sec16-slide,

#MO260521travel #sec16-slide .splide__slide,

#MO260521travel .sec16-01,

#MO260521travel .sec16-02 {

  width: calc(660 * var(--formula));

}



#MO260521travel .sec16__modal-btn {

  left: calc(15 * var(--formula));

}



#MO260521travel .sec17-01 {

  width: calc(660 * var(--formula));

}



#MO260521travel .sec17__modal-btn {

  right: calc(62 * var(--formula));

  bottom: calc(17 * var(--formula));

}



#MO260521travel .lp-footer-txt-01 {

  width: calc(612 * var(--formula));

  margin: calc(60 * var(--formula)) 0 calc(56 * var(--formula)) 0;

}



#MO260521travel .footer__video-cont {

  width: calc(684 * var(--formula));

  height: calc(1216 * var(--formula));

  position: relative;

}



#MO260521travel .video-sound-btn {

  position: absolute;

  z-index: 10;

  bottom: calc(19 * var(--formula));

  right: calc(14 * var(--formula));

  width: calc(64 * var(--formula));

  cursor: pointer;

}



#MO260521travel .js-video-sound[data-state="off"] .icon-on {

  display: none;

}

#MO260521travel .js-video-sound[data-state="on"] .icon-off {

  display: none;

}



#MO260521travel .lp-footer-txt-02 {

  width: calc(410 * var(--formula));

  margin: calc(136 * var(--formula)) 0 calc(151 * var(--formula)) 0;

}



#MO260521travel .lp-footer-img-01 {

  width: calc(750 * var(--formula));

}



#MO260521travel .lp-footer-txt-03 {

  width: calc(422 * var(--formula));

  bottom: calc(45 * var(--formula));

  left: calc(35 * var(--formula));

}



#MO260521travel .visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border-width: 0;

}



#MO260521travel .travel-modal-overlay {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  width: 100%;

  z-index: 10;

  background: transparent;

  opacity: 0;

  visibility: hidden;

  transition:

    opacity 0.6s,

    visibility 0.6s;

  display: flex;

  align-items: start;

  pointer-events: none;

  overflow-y: auto;

  overscroll-behavior: contain;

  justify-content: end;

  height: 100vh;

  scrollbar-color: var(--yellow) transparent;

}



#MO260521travel .travel-modal-overlay::-webkit-scrollbar-thumb {

  background: var(--yellow);

}



#MO260521travel .travel-modal-overlay.is-travel-active {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



#MO260521travel .travel-modal-cont {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  width: 50%;

  min-height: 100%;

  background: rgba(255, 242, 97, 0.8);

  padding-top: calc(140 * var(--formula));

  padding-bottom: calc(60 * var(--formula));

  box-sizing: border-box;

}

#MO260521travel [class*="modal-sec"] > div {

  width: calc(660 * var(--formula));

  background: var(--white);

}

#MO260521travel .travel-modal-cont > [class*="modal-sec"] {

  margin: 0 0 calc(141 * var(--formula)) 0;

}

#MO260521travel .travel-modal-cont > [class*="modal-sec"] .yellow-line::after {

  border: none;

}



#MO260521travel [class*="__credit"] li span {

  margin-right: calc(-14 * var(--formula));

}



#MO260521travel .modal-close-btn {

  position: fixed;

  top: calc(var(--modal-top-offset, 0px) + 25 * var(--formula));

  right: calc(25 * var(--formula) + var(--scrollbar-width));

  width: calc(50 * var(--formula));

  height: calc(50 * var(--formula));

  padding: 0;

  cursor: pointer;

  z-index: 110;

  background: none;

  border: none;

  outline: none;

}



#MO260521travel .modal-close-btn::before,

#MO260521travel .modal-close-btn::after {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: calc(64 * var(--formula));

  height: calc(5 * var(--formula));

  background-color: var(--black);

}



#MO260521travel .modal-close-btn::before {

  transform: translate(-50%, -50%) rotate(45deg);

}

#MO260521travel .modal-close-btn::after {

  transform: translate(-50%, -50%) rotate(-45deg);

}

html.travel-scroll-lock {

  overflow: hidden !important;

  padding-right: var(--scrollbar-width) !important;

}



@media (max-width: 767px) {

  #MO260521travel {

    flex-direction: column;

  }

  #MO260521travel .lp-footer {

    margin: 0 0 calc(109 * var(--formula)) 0 !important;

  }

  #MO260521travel .lp-mv-area {

    position: relative;

    height: auto;

  }

  #MO260521travel .lp-mv-img-01 {

    height: auto;

  }

  #MO260521travel .sec-set {

    width: 100%;

  }

  #MO260521travel .travel-modal-overlay {

    width: 100%;

    left: 0;

  }

  #MO260521travel .travel-modal-cont {

    background: var(--white);

    width: 100%;

  }

  #MO260521travel .modal-close-btn::before,

  #MO260521travel .modal-close-btn::after {

    background-color: var(--yellow);

  }

  #header {

    position: relative;

  }

  #Contents .main-area {

    padding-top: 20px;

  }

  #MO260521travel .lp-mv-txt-01 {

    width: calc(23.75 * var(--formula));

    right: calc(14 * var(--formula));

    top: calc(11 * var(--formula));

  }

  #MO260521travel .lp-mv-txt-02 {

    width: calc(459 * var(--formula));

    top: calc(365 * var(--formula));

    left: calc(46 * var(--formula));

  }



  #MO260521travel .lp-mv-txt-03 {

    width: calc(260 * var(--formula));

    right: calc(28 * var(--formula));

    top: 61.6%;

  }



  #MO260521travel .lp-mv-txt-04 {

    width: calc(338 * var(--formula));

    bottom: calc(38 * var(--formula));

    left: calc(56 * var(--formula));

  }

  #MO260521travel .lp-mv-txt-01.after-img::after {

    width: calc(85 * var(--formula));

    height: calc(330 * var(--formula));

  }

  #MO260521travel .lp-mv-txt-02.after-img::after {

    width: calc(520 * var(--formula));

    height: calc(206 * var(--formula));

  }

  #MO260521travel .lp-mv-txt-03.after-img::after {

    width: calc(320 * var(--formula));

    height: calc(137 * var(--formula));

  }

  #MO260521travel .lp-mv-txt-04.after-img::after {

    width: calc(349 * var(--formula));

    height: calc(122 * var(--formula));

  }

}

/* 

////////////////////////////////////////////

animation

////////////////////////////////////////////

*/

#MO260521travel .animate-item {

  opacity: 0;

  transition: all 1s cubic-bezier(0.39, 0.575, 0.565, 1);

}

#MO260521travel .animate-item.is-visible {

  opacity: 1;

}

@keyframes linePassThrough {

  0% {

    transform: translateY(-100%);

  }

  50% {

    transform: translateY(0);

  }

  100% {

    transform: translateY(100%);

  }

}