@charset "UTF-8";
body.spMenu_open .spMenuBtn_bar {
  position: relative;
}
body.spMenu_open .spMenuBtn_bar::before, body.spMenu_open .spMenuBtn_bar::after {
  content: "";
}
body.spMenu_open .spMenuBtn_bar span, body.spMenu_open .spMenuBtn_bar::before, body.spMenu_open .spMenuBtn_bar::after {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  margin: auto;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
body.spMenu_open .spMenuBtn_bar span {
  opacity: 0;
  top: 0;
  bottom: 0;
}
body.spMenu_open .spMenuBtn_bar::before {
  top: 0;
  bottom: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
body.spMenu_open .spMenuBtn_bar::after {
  top: 0;
  bottom: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*
.my-button {
  font-size: rem(14); // font-sizeは14px相当にする
}
*/
/*
$gradation01: transparent linear-gradient(219deg, $color02 0%, $color01 100%) 0% 0% no-repeat padding-box;
$gradation01_hover: transparent linear-gradient(219deg, $color02 0%, $color01 50%, $color02 100%) 0% 0% no-repeat padding-box;
@mixin gradation01 {
	background: $gradation01;
}
*/
/*-------------------------
  mainvisual
-------------------------*/
#first_animation {
  opacity: 1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 100000;
  width: 560px;
  background: #fff;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  visibility: visible;
  overflow: hidden;
}
@media print, screen and (max-width: 560px) {
  #first_animation {
    width: auto;
    left: 0;
    right: 0;
    -webkit-transform: none;
            transform: none;
  }
}
#first_animation.fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
#first_animation .text {
  position: absolute;
  top: 188px;
  left: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
#first_animation .text > * {
  display: inline-block;
  -webkit-animation-timing-function: cubic-bezier(0, 1.15, 1, 1);
          animation-timing-function: cubic-bezier(0, 1.15, 1, 1);
}
#first_animation .text > * {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
}
#first_animation .text1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
#first_animation .text2 {
  margin: 9px 0 7px;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
#first_animation .text3 {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#first_animation .text_img {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
  position: absolute;
  top: 0;
  left: 0;
}

.toppage {
  overflow: hidden;
}
.toppage #page_toppage {
  visibility: hidden;
}

.sb {
  position: relative;
  overflow: hidden;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.sb.sbanime .sb_wrap:nth-of-type(2) .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.sb.sbanime .sb_wrap:nth-of-type(2) .sb_player {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
.sb.sbanime .sb_wrap:nth-of-type(3) .sb_player {
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
}
.sb.sbanime .sb_wrap:nth-of-type(4) .sb_player {
  -webkit-animation-delay: 9.5s;
          animation-delay: 9.5s;
}
.sb.sbanime .sb_wrap:nth-of-type(4) .sb_player {
  -webkit-animation-delay: 12.5s;
          animation-delay: 12.5s;
}

.sb_wrap {
  opacity: 1;
  position: absolute;
  left: 50%;
  z-index: -1;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 680px;
  text-align: center;
}
.sb_wrap.animated {
  opacity: 1;
  visibility: visible;
}

.sb_path {
  opacity: 0;
  position: relative;
  width: 100%;
  -webkit-transform: translate(0, -20%);
          transform: translate(0, -20%);
}
@media print, screen and (max-width: 767px) {
  .sb_path {
    -webkit-transform: translate(0, -5%);
            transform: translate(0, -5%);
  }
}

@-webkit-keyframes sb_player {
  to {
    offset-distance: 100%;
  }
}

@keyframes sb_player {
  to {
    offset-distance: 100%;
  }
}
.sb_player {
  position: absolute;
  width: 48.564px;
  height: 48.019px;
  background-image: url(../../_sb/sb_player.svg);
  offset-distance: 0%;
  offset-rotate: auto;
}
.sbanime .sb_player {
  -webkit-animation: sb_player 3s ease-out 1;
          animation: sb_player 3s ease-out 1;
}

#sb1_player {
  top: -20%;
  offset-path: path("M.24.06c7.01,31.1,24.45,64.39,38.18,93.16,62.66,131.3,77.83,144.13,133.45,210.68,24.04,28.77,61.95,55.4,93.14,76.19,22.31,14.87,46.74,26.22,71.07,37.5,44.44,20.61,86.46,35.62,134.02,47.37,23.75,5.86,50.51,16.28,74.31,21.92,76.22,18.08,97.67,44.63,132.25,84.99");
  -webkit-transform: translate(0px, -20px);
          transform: translate(0px, -20px);
}
@media print, screen and (max-width: 767px) {
  #sb1_player {
    top: -5%;
  }
}

#sb2_player {
  top: -20%;
  offset-path: path("M.22,566.47c56.99-97.46,81.92-146.44,163.18-224.82,20.56-19.83,55.55-45.95,80.67-59.55,32.58-17.64,64-34.38,97.99-49.14,34.1-14.81,64.2-27.72,96.92-42.28,48.29-21.49,120.66-48.2,164.18-78.19,43.52-29.99,78.67-64.44,88.7-112.44");
  offset-position: revert;
  animation-direction: reverse;
  -webkit-transform: rotateY(180deg) translate(0, -60%);
          transform: rotateY(180deg) translate(0, -60%);
}
@media print, screen and (max-width: 767px) {
  #sb2_player {
    top: 0;
    -webkit-transform: rotateY(180deg) translate(0, -108%);
            transform: rotateY(180deg) translate(0, -108%);
  }
}

#page_toppage #intro.sb {
  padding-top: 15px;
  padding-bottom: 30px;
  margin-top: -15px;
  margin-bottom: -30px;
}
#page_toppage #intro.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

#page_toppage #gear.sb {
  padding-top: 34px;
  margin-top: 0;
  padding-bottom: 100px;
  margin-bottom: -100px;
}
#page_toppage #gear.sb .sb1 {
  top: -30%;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gear.sb .sb1 {
    top: -25%;
  }
}
#page_toppage #gear.sb .sb2 {
  top: 10%;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gear.sb .sb2 {
    top: 17%;
  }
}
#page_toppage #gear.sb .sb3 {
  -webkit-transform: translate(-50%, -80%);
          transform: translate(-50%, -80%);
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gear.sb .sb3 {
    margin-top: 100%;
  }
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gear.sb .sb4 {
    display: none;
  }
}
#page_toppage #gear.sb .blk_gear {
  background: none;
}

#page_toppage #gourmet.sb {
  padding-bottom: 100px;
  margin-bottom: -100px;
}
#page_toppage #gourmet.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #gourmet.sb .sb1 {
  top: 0;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gourmet.sb .sb1 {
    display: none;
  }
}
#page_toppage #gourmet.sb .sb2 {
  margin-top: 30%;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #gourmet.sb .sb2 {
    top: 0;
    margin-top: 70%;
  }
}

#page_toppage #hotspring.sb {
  padding-bottom: 100px;
  margin-bottom: -100px;
}
#page_toppage #hotspring.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #hotspring.sb.sbanime .sb2 .sb_player {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
#page_toppage #hotspring.sb .sb1 {
  margin-top: -60%;
}
#page_toppage #hotspring.sb .sb2 {
  margin-top: 30%;
}

#page_toppage #gelande.sb {
  margin-top: 0;
  padding-top: 100px;
  margin-bottom: -100px;
  padding-bottom: 100px;
}
#page_toppage #gelande.sb.sbanime .sb2 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #gelande.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
#page_toppage #gelande.sb .sb2 {
  margin-top: -150px;
}
#page_toppage #gelande.sb .sb1 {
  margin-top: -30%;
}

#page_toppage #burton.sb {
  margin-bottom: -100px;
  padding-bottom: 100px;
}
#page_toppage #burton.sb.sbanime .sb2 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #burton.sb .sb2 {
  margin-top: 50%;
}

#page_toppage #voice.sb {
  margin-bottom: -100px;
  padding-bottom: 100px;
}
#page_toppage #voice.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #voice.sb .sb1 {
  margin-top: 50%;
}

#page_toppage #j-trip_hokkaido_tours.sb {
  padding-bottom: 138px;
  margin-bottom: -138px;
}
#page_toppage #j-trip_hokkaido_tours.sb.sbanime .sb2 .sb_player {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
#page_toppage #j-trip_hokkaido_tours.sb.sbanime .sb1 .sb_player {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}
#page_toppage #j-trip_hokkaido_tours.sb .sb2 {
  margin-top: -100%;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #j-trip_hokkaido_tours.sb .sb2 {
    margin-top: -13%;
    z-index: 0;
  }
}
#page_toppage #j-trip_hokkaido_tours.sb .sb1 {
  margin-top: 10%;
}
@media print, screen and (min-width: 768px) {
  #page_toppage #j-trip_hokkaido_tours.sb .sb1 {
    display: none;
  }
}