@charset "UTF-8";
/*===================================
	TOP
=====================================*/
.header:not(.scroll) {
  background-color: transparent;
}
.header:not(.scroll) .header__ttl__logo__st0 {
  fill: white;
}
.header:not(.scroll) .header__ttl__logo__st1 {
  fill: white;
}
.header:not(.scroll) .header__lan {
  border-color: white;
  color: white;
}
.header:not(.scroll) #menu_trigger:not(.active) {
  background-color: white;
}

#header_overlay {
  right: initial;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.sm_wrap {
  margin: auto;
  background-color: #fff;
  overflow: hidden;
  max-width: 375px;
}
@media screen and (max-width: 600px) {
  .sm_wrap {
    max-width: 100%;
  }
}
@media screen and (max-width: 950px) {
  .sm_wrap {
    padding-bottom: 67px;
  }
}

/* nav
-------------------------------------*/
.nav__list {
  position: fixed;
  left: 50%;
  bottom: 0;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 67px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.1;
  text-align: center;
  z-index: 9;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-weight: 500;
  max-width: 375px;
}
@media screen and (max-width: 600px) {
  .nav__list {
    max-width: 100%;
  }
}
@media screen and (min-width: 951px) {
  .nav__list {
    display: none;
    z-index: -1;
  }
}
.nav__list.font_ja {
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: bold;
}
.nav__list.scroll {
  opacity: 1;
}
.nav__list__item {
  background-color: #000;
  width: 25%;
  border-right: 1px solid #4d4d4d;
}
.nav__list__item a {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 1;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.nav__list__item a:hover {
  opacity: 0.7;
}

/* main visual
-------------------------------------*/
.mainvisual {
  background: url(../img/index/mainvisual_bg.jpg) no-repeat center/cover;
  height: 650px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 25px 10px;
  position: relative;
}
@media screen and (max-width: 600px) {
  .mainvisual {
    height: 100svh;
  }
}
.mainvisual::before {
  position: absolute;
  content: "";
  background-color: #b3b3b3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
.mainvisual__txt {
  position: relative;
  max-width: 306px;
}

/* about
-------------------------------------*/
.top_about {
  position: relative;
  color: white;
  padding: 55px 0 50px;
  text-align: center;
}
.top_about::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  background-image: url(../img/index/about_bg.jpg);
  background-size: cover;
  background-position: top left;
  width: 100%;
  height: 100%;
  z-index: -1;
}
@media screen and (max-width: 600px) {
  .top_about::before {
    position: fixed;
  }
}
.top_about::after {
  position: absolute;
  content: "";
  background-color: #858585;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  z-index: -1;
}
.top_about__ttl {
  line-height: 1;
  font-size: 1.6rem;
  margin-bottom: 25px;
}
.top_about__ttl2 {
  font-size: 3.3rem;
  line-height: 1.2;
  margin-bottom: 15px;
}
.top_about__ttl2.font_ja {
  font-weight: bold;
  font-size: 2.8rem;
  line-height: 1.4;
  margin-bottom: 25px;
}
.top_about__txt {
  text-align: left;
  margin-bottom: 30px;
}
.top_about__map {
  width: calc(100% + 20px);
  max-width: unset;
  margin-bottom: 45px;
}
.top_about__slider {
  padding: 0 20px;
  line-height: 1;
}
.top_about__slider__list__item__img {
  margin: 0 auto 15px;
  width: 95%;
}
.top_about__slider__list__item__txt {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 5px;
}
.top_about__slider__list__item__txt.font_ja {
  font-size: 1.1rem;
  margin-bottom: 7px;
}
.top_about__slider__list__item__txt2 {
  font-size: 1.8rem;
}
.top_about__slider__list__item__txt2.font_ja {
  font-size: 1.4rem;
  line-height: 1.4;
}
.top_about__movie {
  margin-top: 30px;
}
.top_about__movie .top_about__movie__ttl {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 500;
}
.top_about__movie .top_about__movie__ttl.font_ja {
  font-weight: bold;
}
.top_about__movie .movie_wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
.top_about__movie .movie_wrap iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* WHY NAGANO CITY?
-------------------------------------*/
.top_why {
  padding-top: 90px;
  background-color: #fff;
  overflow: hidden;
}
.top_why__ttl {
  margin-bottom: 70px;
}
.top_why__list {
  margin-bottom: 30px;
}
.top_why__list__item {
  overflow: hidden;
}
.top_why__list__item:not(:last-child) {
  margin-bottom: 50px;
}
.top_why__list__item__sub {
  text-align: right;
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 3px;
}
.top_why__list__item__wrap {
  margin-top: -15px;
  padding: 0 10px;
}
.top_why__list__item__ttl {
  position: relative;
  font-size: 2.5rem;
  display: inline-block;
  z-index: 1;
  margin-bottom: 10px;
  line-height: 1.1;
}
.top_why__list__item__ttl.font_ja {
  font-size: 2.2rem;
  margin-bottom: 7px;
  margin-bottom: 13px;
}
.top_why__list__item__ttl.font_ja::before {
  top: -15px;
}
.top_why__list__item__ttl::before {
  position: absolute;
  content: "";
  left: -10px;
  top: -5px;
  background-color: white;
  width: calc(100% + 20px);
  height: calc(100% + 10px);
  z-index: -1;
}
.top_why__list__item__txt.font_ja2 {
  font-size: 1.5rem;
}
.top_why__list__item a.link {
  margin-top: 15px;
  float: right;
}
.top_why__hotel {
  background-color: #f2f2f2;
  padding: 35px 25px 30px;
  text-align: center;
  margin-bottom: 108px;
}
.top_why__hotel__ttl {
  font-size: 2rem;
  margin-bottom: 20px;
  line-height: 1.25;
  font-weight: 500;
}
.top_why__hotel__ttl.font_ja {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.5;
}
.top_why__hotel__list {
  max-width: 240px;
  margin: auto;
}
.top_why__hotel__list__item {
  margin-bottom: 20px;
}
.top_why__hotel__list__item img {
  margin-bottom: 5px;
}
.top_why__hotel__txt {
  font-size: 1.2rem;
}
.top_why__hotel__txt.font_ja2 {
  font-size: 1.3rem;
}
.top_why__base {
  background-color: #f2f2f2;
  padding: 35px 25px 30px;
  text-align: center;
  margin-bottom: 108px;
}
.top_why__base__ttl {
  font-size: 2.2rem;
  margin-bottom: 20px;
  line-height: 1.25;
  font-weight: 500;
}
.top_why__base__map {
  aspect-ratio: 1/1;
}
.top_why__base__map iframe {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.top_why__base__detail dl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5px 15px;
  text-align: left;
  padding: 15px 0;
}
.top_why__base__detail dl:not(:first-child) {
  border-top: 1px solid #000;
}
.top_why__base__detail dl:last-child {
  padding-bottom: 0;
}
.top_why__base__detail dl dt {
  font-size: 2rem;
  line-height: 1.25;
  font-weight: 500;
}
.top_why__base__detail dl dt.font_ja {
  font-size: 1.6rem;
}
.top_why__base__detail dl dd {
  font-size: 1.6rem;
  line-height: 1.5;
}
.top_why__base__detail dl dd ul {
  list-style: none;
}
.top_why__base__detail dl dd ul li {
  position: relative;
  padding-left: 1.25em;
}
.top_why__base__detail dl dd ul li::before {
  content: "・";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.top_why__base__detail dl dd ul li .time {
  position: relative;
  display: inline-block;
  padding-left: 1.15em;
}
.top_why__base__detail dl dd ul li .time::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1em;
  aspect-ratio: 1/1;
  background-image: url(../img/common/icn_time.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  pointer-events: none;
}
.top_why__base__detail dl dd.font_ja2 {
  font-size: 1.6rem;
}
.top_why__base__detail dl .icon {
  position: relative;
  font-weight: 500;
  padding-left: 35px;
}
.top_why__base__detail dl .icon::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.top_why__base__detail dl .icon.--lang::before {
  width: 30px;
  aspect-ratio: 30/20;
  background-image: url(../img/common/icon_lang.svg);
}
.top_why__base__detail dl .icon.--wifi::before {
  width: 25px;
  aspect-ratio: 25/20;
  background-image: url(../img/common/icon_wifi.svg);
}

/* HOW TO USE?
-------------------------------------*/
.top_use {
  color: white;
  position: relative;
  background-color: #517289;
  padding: 39% 0 100px;
}
.top_use.jp {
  padding: 34% 0 100px;
}
.top_use::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(../img/index/use_bg.png) no-repeat top center/100%;
  opacity: 0.4;
  mix-blend-mode: overlay;
}
.top_use__ttl {
  margin-bottom: 40px;
}
.top_use__ttl__en {
  font-size: 6.3rem;
  line-height: 1;
  white-space: nowrap;
  font-weight: 600;
}
.top_use__ttl__jp {
  font-size: 2.2rem;
  font-weight: bold;
}
.top_use .inner {
  position: relative;
}
.top_use__list__item:not(:last-child) {
  margin-bottom: 50px;
}
.top_use__list__item__ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}
.top_use__list__item__ttl__num {
  font-weight: 200;
  font-size: 3.4rem;
  border-radius: 50%;
  border: 1px solid;
  width: 55px;
  height: 55px;
  line-height: 52px;
  text-align: center;
  margin-right: 10px;
}
.top_use__list__item__ttl__txt {
  width: calc(100% - 65px);
  font-size: 2.3rem;
  line-height: 1.1;
}
.top_use__list__item__ttl__txt.font_ja {
  font-size: 2rem;
  line-height: 1.4;
}
.top_use__list__item__wrap {
  margin-left: 65px;
}
.top_use__list__item__txt {
  margin-bottom: 10px;
}
.top_use__list__item__dlist {
  background-color: rgba(255, 255, 255, 0.2);
  padding: 15px;
}
.top_use__list__item__dlist__ttl {
  line-height: 1;
  font-weight: 500;
  margin-bottom: 5px;
}
.top_use__list__item__dlist__txt {
  font-size: 1.2rem;
}
.top_use__list__item__dlist__txt.font_ja2 {
  font-size: 1.2rem;
}

/* WHERE TO SKI?
-------------------------------------*/
.top_ski {
  padding: 70px 0 80px;
  background-color: #fff;
}
.top_ski__ttl_wrap {
  position: relative;
  height: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
.top_ski__ttl {
  max-width: 306px;
  margin-bottom: 20px;
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.top_ski__img {
  position: absolute;
  right: -22%;
  top: -90px;
  width: 60%;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.top_ski__img.active {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.top_ski__txt {
  margin-bottom: 20px;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.top_ski__nav {
  border-top: 1px solid #000;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 120px;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.top_ski__nav__item {
  border-bottom: 1px solid #000;
}
.top_ski__nav__item a {
  display: block;
  position: relative;
  padding: 16px 20px 16px 0;
}
.top_ski__nav__item a::after {
  position: absolute;
  content: "";
  background: url(../img/common/arrow.svg) no-repeat center/cover;
  width: 10px;
  height: 10px;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.top_ski__nav__item span {
  font-family: "Barlow Semi Condensed", serif;
  font-size: 1.9rem;
}
.top_ski__list__item:not(:last-child) {
  margin-bottom: 125px;
}
.top_ski__content {
  margin-bottom: 50px;
}
.top_ski__content img {
  margin-bottom: 25px;
}
.top_ski__content__wrap {
  padding: 0 10px;
}
.top_ski__content__ttl {
  font-size: 3.8rem;
  margin-bottom: 10px;
  line-height: 1.1;
}
.top_ski__content__ttl.font_ja {
  font-size: 2.5rem;
  margin-bottom: 15px;
  line-height: 1.25;
}
.top_ski__content__ttl span {
  font-size: 2.8rem;
  font-family: "Barlow Semi Condensed", serif;
}
.top_ski__content__txt.font_ja2 {
  font-size: 1.5rem;
}
.top_ski__content a.link {
  margin-top: 10px;
}
.top_ski__live {
  padding: 0 5px;
  margin-bottom: 50px;
}
.top_ski__live__ttl {
  text-align: center;
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 10px;
  line-height: 1.3;
}
.top_ski__live__ttl.font_ja {
  font-weight: bold;
  font-size: 2rem;
}
.top_ski__live__ttl.font_ja .top_ski__live__ttl__sm {
  font-size: 1.3rem;
  margin-bottom: 3px;
}
.top_ski__live__ttl__sm {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.top_ski__live__ttl__en {
  display: block;
  font-family: "Barlow Semi Condensed", serif;
}
.top_ski__live__slider {
  overflow: unset;
}
.top_ski__live__slider__list__item__txt {
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 5px;
}
.top_ski__live__slider__list__item__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 71/65;
}
.top_ski__live__slider__list__item__wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.top_ski__live__slider__arrow {
  position: absolute;
  background: url(../img/common/arrow_slider.svg) no-repeat center/100%;
  width: 8px;
  height: 20px;
  top: 45%;
  z-index: 1;
}
.top_ski__live__slider__arrow.live__slider__next {
  right: -5px;
}
.top_ski__live__slider__arrow.live__slider__prev {
  left: -5px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.top_ski__live__slider__pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.top_ski__live__slider__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px !important;
  background: #ccc;
  opacity: 1;
}
.top_ski__live__slider__pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #517289;
}
.top_ski__map {
  text-align: center;
  padding: 0 10px;
}
.top_ski__map img {
  margin-bottom: 5px;
}
.top_ski__map__ttl {
  font-size: 2rem;
  margin-bottom: 10px;
  font-weight: 500;
}
.top_ski__map__ttl.font_ja {
  font-weight: bold;
}
.top_ski__other {
  padding-top: 50px;
}
.top_ski__other__ttl {
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}
.top_ski__other__ttl.font_ja {
  font-size: 2.4rem;
  line-height: 1.5;
}
.top_ski__other ul {
  list-style: none;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  margin: 20px auto 0;
}
.top_ski__other ul li {
  font-size: 1.6rem;
  text-align: center;
}
.top_ski__other ul li:not(:first-child) {
  margin-top: 0.5em;
}
.top_ski__other ul li a {
  text-decoration: underline;
}
.top_ski__other ul li a:hover {
  text-decoration: none;
}

/* HOW TO GO?
-------------------------------------*/
.top_go {
  background-color: #f1f3f2;
  padding-top: 50px;
}
.top_go__ttl {
  margin-bottom: 15px;
}
.top_go__ttl__en {
  font-size: 6.8rem;
  line-height: 1;
  white-space: nowrap;
  font-family: "Barlow Semi Condensed", serif;
  font-weight: 600;
}
.top_go__ttl__jp {
  font-size: 2.3rem;
  margin-top: 10px;
  font-family: "source-han-sans-japanese", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: bold;
}
.top_go__txt {
  margin-bottom: 50px;
}
.top_go__tab_wrap {
  position: relative;
  z-index: 1;
  color: white;
  text-align: center;
}
.top_go__tab_wrap::before {
  position: absolute;
  content: "";
  background-color: #517289;
  width: 100%;
  height: calc(100% - 56px);
  bottom: 0;
  left: 0;
  z-index: -1;
}
.top_go__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.3rem;
  line-height: 1.15;
  height: 56px;
  font-weight: bold;
}
.top_go__tab__item {
  width: 32.7%;
  background-color: #b3b3b3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
}
.top_go__tab__item.active {
  background-color: #517289;
}
.top_go__tab_content {
  display: none;
  padding: 30px 0 40px;
}
.top_go__tab_content.active {
  display: block;
}
.top_go__tab_content__txt {
  min-height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.8rem;
  line-height: 1.4;
}
.top_go__tab_content__txt.font_ja2 {
  font-size: 1.6rem;
}
.top_go__tab_content__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-flow: wrap;
      flex-flow: wrap;
  margin: 50px 0 20px;
}
.top_go__tab_content__ttl {
  font-size: 3.1rem;
  line-height: 1.1;
  margin-bottom: 5px;
}
.top_go__tab_content__ttl.font_ja {
  font-size: 2.2rem;
}
.top_go__tab_content__ttl span {
  display: block;
  font-size: 1.8rem;
}
.top_go__tab_content__price {
  font-size: 4.7rem;
  line-height: 1;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.top_go__tab_content__price span {
  font-size: 1.8rem;
  letter-spacing: 0;
  margin-top: 3px;
}
.top_go__tab_content__dlist {
  margin-bottom: 12px;
}
.top_go__tab_content__dlist.font_ja2 .top_go__tab_content__dlist__ttl {
  font-size: 1.4rem;
}
.top_go__tab_content__dlist.font_ja2 .top_go__tab_content__dlist__txt {
  font-size: 1.6rem;
}
.top_go__tab_content__dlist__ttl {
  font-size: 1.3rem;
}
.top_go__tab_content__dlist__txt {
  font-size: 1.8rem;
  min-height: 48px;
  line-height: 1.3;
}
.top_go__tab_content a.btn {
  margin-top: 30px;
}