@charset "utf-8";
/* CSS Document */
/* Base */
.l-content-body, .l-wrapper, .l-content, .l-content-main {
 padding: 0;
 margin: 0;
 max-width: 100%;
}
.t-mode-rwd .l-content-main {
 padding: 0 !important;
}
.t-mode-rwd .l-header {
 z-index: -1000;
}
.t-mode-rwd.is-sticky .l-header {
 z-index: 1001;
}
.article-inner {
 max-width: 1030px;
 margin: 0 auto;
 padding: 100px 15px;
}
.article-inner > *:first-child {
 margin-top: 0;
}
.article-inner > *:last-child {
 margin-bottom: 0;
}
.sp-only {
 display: none;
}
body.noscroll {
 overflow: hidden;
}
@media screen and (max-width: 1024px) and (min-width: 768px) {
 .t-mode-rwd .l-content-body[data-type="full"] .l-content-main {
  padding: 0 !important;
 }
 .l-footer {
  margin-top: -1px;
 }
}
@media screen and (min-width: 768px) {
 .l-content-related[data-type="full"] {
  max-width: 1000px;
  float: none;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 80px 15px 100px;
 }
 .t-mode-rwd[data-type="simple"] .l-content {
  margin-top: -110px;
 }
 .article-inner[data-type="thin"] {
  padding: 70px 15px;
 }
 .l-footer {
  position: relative;
  z-index: 500;
 }
}
@media screen and (max-width: 767px) {
 html[lang="ja"] .m-header-logo {
  margin-left: 0 !important;
  left: 12px !important;
 }
 .l-content-body[data-type="full"] {
  margin: 0;
 }
 .l-content-related[data-type="lp"] {
  margin: 0;
 }
 .t-mode-rwd[data-type="simple"] .l-wrapper {
  padding-top: 0;
 }
 .article-inner {
  padding: 50px 10px;
 }
 .t-mode-rwd[data-type="simple"] .l-footer {
  position: relative;
  z-index: 5;
  margin-top: -1px;
 }
 .sp-only {
  display: block;
 }
 .pc-only {
  display: none;
 }
}
/* Section Color */
section {
 background-color: transparent;
 color: #333;
}
section[data-type="white"] {
 background-color: #fff;
 color: #333;
}
section[data-type="blk"] {
 background-color: #1e1e1e;
 color: #ccc;
}
section[data-type="blk"] h2 {
 color: #f2f2f2;
}
section[data-type="blk"] a {
 color: #ccc;
}
section[data-type="gray"] {
 background-color: #f2f2f2;
 color: #333;
}
section.introduction {
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px);
 background-color: rgba(45, 45, 45, 0.4);
}
/* Fixed Background */
#fixed-bg {
 width: 100%;
 height: 100vh;
 min-height: 40vw;
 position: fixed;
 top: 0;
 left: 0;
 display: flex;
 flex-wrap: wrap;
 z-index: -500;
}
#fixed-bg > div {
 width: 50%;
 height: 50%;
}
#fixed-bg > div:first-child {
  background: url("../img/img_autumn01.jpg") center center;
  background-size: cover;
}
#fixed-bg > div:nth-child(2) {
  background: url("../img/img_autumn02.jpg") 90% top;
  background-size: cover;
}
#fixed-bg > div:nth-child(3) {
  background: url("../img/img_autumn03.jpg") 0% center;
  background-size: cover;
}
#fixed-bg > div:nth-child(4) {
  background: url("../img/img_autumn04.jpg") center center;
  background-size: cover;
}
/* Hero Header */
.hero-header {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100vh;
 padding: 20% 25px;
 position: relative;
}
.hero-header > h1 {
 width: 26%;
 max-width: 500px;
 padding: 0;
 margin: 0;
}
.hero-header > h1 img {
 width: 100%;
 max-height: 50vh;
}
.hero-header > .scroll {
 position: absolute;
 bottom: 82px;
 left: 46%;
 width: 8%;
 animation: scroll 3s infinite;
}
@keyframes scroll {
 0% {
  transform: translate(0, -30px);
 }
 80% {
  transform: translate(0, 0);
 }
 0%, 80%, 100% {
  opacity: 0;
 }
 40% {
  opacity: 1;
 }
}
@media (orientation: portrait) {
 .hero-header > h1 {
  width: 50%;
  max-width: 522px;
 }
 .hero-header > .scroll {
  left: 44%;
  width: 12%;
 }
 #fixed-bg > div:nth-child(2) {
    background: url("../img/img_autumn02.jpg") 50% bottom;
    background-size: cover;
  }
  #fixed-bg > div:nth-child(3) {
    background: url("../img/img_autumn03.jpg") 15% top;
    background-size: cover;
  }
}
@media screen and (max-width: 767px) {
 .hero-header > h1 {
  width: 70%;
 }
 .hero-header > .scroll {
  left: 41%;
  width: 18%;
 }
 #fixed-bg > div:nth-child(4) {
    background: url("../img/img_autumn04.jpg") 50% center;
    background-size: cover;
  }
}
/* Lead Section */
#lead-section {
 background: url("../img/img_lead_bg.jpg") 80% center;
 background-size: cover;
}
#lead-section .m-img {
 width: 100%;
 max-width: 680px;
}
/* Flex List */
.m-flex-list {
 margin: 50px 0 0 -20px;
 display: flex;
 flex-wrap: wrap;
}
.m-flex-list[data-col="2"] > li {
 width: 50%;
}
.m-flex-list[data-col="3"] > li {
 width: 33.3%;
}
.m-flex-list > li {
 padding-left: 20px;
}
@media screen and (max-width: 767px) {
 .m-flex-list {
  margin: 40px auto 0;
  flex-direction: column;
  align-items: center;
 }
 .m-flex-list > li {
  width: 65% !important;
  padding-left: 0;
  margin-top: 20px;
 }
 .m-flex-list > li:first-child {
  margin-top: 0;
 }
}
/* Mile */
.mile {
 background: repeating-linear-gradient(to right, #fbfbfb, #fbfbfb 10%, white 10%, white 20%);
}
.mile .article-inner {
 max-width: 1260px;
}
.mile .m-img {
 width: 100%;
 max-width: 660px;
}
#regular, #sp-regular {
 display: none;
}
#reg-button, #low-button, #sp-reg-button, #sp-low-button {
 cursor: pointer;
 transition: .3s;
}
#reg-button:hover, #low-button:hover {
 opacity: .7;
}
/* TRIP */
.trip {
 background-color: #fff;
}
.hdg-trip {
 width: 100%;
 padding: 180px 0 0;
 background: url("../img/img_trip_hdg.jpg") center center;
 background-size: cover;
 position: relative;
}
.hdg-trip h2 {
 text-align: center;
 font: normal normal normal 53px/110px VDL-ADMin;
 letter-spacing: 10.6px;
 color: #333333;
 opacity: 1;
}
.hdg-trip .hdg-trip-txt {
 margin-top: 150px;
 width: 100%;
 text-align: center;
 font-size: 2.0rem;
 padding: 100px 0 50px;
 background: url("../img/img_trip_lead_bg.svg") center top;
 background-size: 400vw;
}
@media screen and (max-width: 767px) {
 .hdg-trip {
  padding: 60px 0 0;
 }
 .hdg-trip h2 {
  font: normal normal normal 3rem/4.5rem VDL-ADMin;
  letter-spacing: 0.5rem;
 }
 .hdg-trip .hdg-trip-txt {
  margin-top: 40px;
  font-size: 1.6rem;
  padding: 60px 10px 30px;
  background-size: 400vw;
 }
}
.hdg-trip + .article-inner {
 padding-top: 0;
}
.m-flex-trip {
 margin: 0 -130px;
 display: flex;
 flex-wrap: wrap;
}
.m-flex-trip > li {
 width: 25%;
 padding-left: 50px;
 margin-top: 50px;
}
.m-flex-trip-inner .m-btn {
 padding: 12px;
 border-radius: 25px;
 margin-top: 30px;
}
@media screen and (max-width: 767px) {
 .m-flex-trip {
  margin: 0 0 0 -20px;
 }
 .m-flex-trip > li {
  width: 50%;
  padding-left: 20px;
  margin-top: 40px;
 }
 .m-flex-trip-inner .m-btn {
  padding: 0;
  border-radius: 50px;
  margin-top: 20px;
 }
}
.m-img-line {
 width: 100%;
 margin: 100px 0;
}
.m-img-line img {
 width: 100%;
}
@media screen and (max-width: 767px) {
 .m-img-line {
  width: 100%;
  margin: 60px 0;
 }
}
.m-txt-starcompass {
 margin-top: 50px;
 font-size: 2.0rem;
 text-align: center;
}
@media screen and (max-width: 767px) {
 .m-txt-starcompass {
  margin-top: 30px;
  font-size: 1.6rem;
 }
}
/* STARCOMPASS ボタン */
.particle-wrapper {
 margin-top: 40px;
 text-align: center;
}
.particle-wrapper > a {
 display: inline-block;
 color: #fff;
 font-size: 1.7rem;
 letter-spacing: 0.2rem;
 position: relative;
 z-index: 1;
 background: transparent;
 padding: 20px 10px;
 width: 100%;
 max-width: 480px;
}
.particle-wrapper > a:hover {
 text-decoration: none;
}
.particle-wrapper > a > span:first-child {
 color: #fff;
}
#particles-js {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(12deg, #000000 0%, #340347 100%);
 border-radius: 5px;
 z-index: -1;
}
#particles-js > img {
 display: none;
}
@media screen and (max-width: 767px) {
 .particle-wrapper {
  margin-top: 30px;
 }
}
/* Photo List */
@keyframes infinity-scroll-left {
 from {
  transform: translateX(0);
 }
 to {
  transform: translateX(-100%);
 }
}
.photo-wrap {
 display: flex;
 overflow: hidden;
}
.m-flex-photo {
 display: flex;
 animation: infinity-scroll-left 120s infinite linear 0.5s both;
}
.m-flex-photo > li {
 width: calc(100vw / 6);
 padding-left: 20px;
}
.m-flex-photo > li img {
 width: 100%;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
 .m-flex-photo > li {
  width: calc(100vw / 4);
 }
}
@media screen and (max-width: 767px) {
 .m-flex-photo > li {
  width: calc(100vw / 3);
  padding-left: 10px;
 }
}
/* Recommend */
.recommend {
 background: url("../img/img_recommend_bg.jpg") center center;
 background-size: cover;
}
.hdg-sec-lv2 h2 {
 text-align: center;
 font: normal normal normal 53px/110px VDL-ADMin;
 letter-spacing: 10.6px;
}
@media screen and (max-width: 767px) {
 .hdg-sec-lv2 h2 {
  font: normal normal normal 3rem/4.5rem VDL-ADMin;
  letter-spacing: 0.5rem;
 }
}