@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600&display=swap");
.c-button.--main {
  background-color: #726140;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.c-button.--sub {
  background-color: #f7f8f8;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/*
-------------------------------------------------------*/
.bg__hokkaido {
  position: relative;
  min-height: 29.21145625vw;
  margin: 50px 0;
}
@media screen and (max-width: 767.98px) {
  .bg__hokkaido {
    margin: 0 0;
    margin-top: 6vw;
    margin-bottom: 36vw;
    min-height: 58.666666666666664vw;
  }
}
.bg__hokkaido__img {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bg__hokkaido__img picture,
.bg__hokkaido__img .bg__hokkaido__img-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.bg__hokkaido__img .bg__hokkaido__img-el {
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767.98px) {
  .bg__hokkaido__img .bg__hokkaido__img-el {
    object-fit: contain;
    object-position: center;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
  }
}
.bg__hokkaido__text {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  top: calc(50% + 0px);
}
@media screen and (max-width: 767.98px) {
  .bg__hokkaido__text {
    top: calc(50% + 18vw);
  }
}
.access-sec {
  position: relative;
}
.access-sec .inner {
  max-width: 1310px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec .inner {
    max-width: 750px !important;
  }
}
.access-sec--main {
  /* border-bottom: 1px solid #000; */
  text-align: center;
}
.access-sec--main .txt {
  z-index: 5;
  position: relative;
  line-height: 2.1818181818;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--main .txt {
    font-size: 2.1rem;
    letter-spacing: 0.15em;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--main .txt {
    line-height: 2;
    letter-spacing: 0.15em;
    font-size: 30px;
    font-size: 4.2857142857vw;
  }
}

.tab {
  width: 100%;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767.98px) {
  .tab {
    margin-top: 0;
  }
}

.tab-list {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

.tab-menu {
  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;
  position: relative;
  font-size: 2.6rem;
  line-height: 1.1;
  width: 23.7288135593%;
  height: 60px;
  color: #000;
  cursor: pointer;
  background-color: #e6e6e6;
  background-image: -webkit-gradient(linear, right bottom, left top, from(#b3b3b3), to(#e6e6e6));
  background-image: linear-gradient(to left top, #b3b3b3, #e6e6e6);
  text-align: center;
  padding-left: 10px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .tab-menu {
    font-size: 2.2rem;
  }
}
@media screen and (max-width: 767.98px) {
  .tab-menu {
    font-size: 16px;
    font-size: 4.4444444444vw;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.tab-menu::before {
  z-index: 5;
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  border-style: solid;
  border-color: transparent transparent transparent #e20000;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-width: 5px 0 5px 8px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .tab-menu::before {
    left: 12px;
    border-width: 4px 0 4px 6px;
  }
}
@media screen and (max-width: 767.98px) {
  .tab-menu::before {
    left: 7px;
    border-width: 3px 0 3px 6px;
  }
}
.tab-menu::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  opacity: 0;
  background-color: #ffefb2;
  background-image: -webkit-gradient(linear, right bottom, left top, from(#c8a15a), to(#ffefb2));
  background-image: linear-gradient(to left top, #c8a15a, #ffefb2);
}
@media screen and (min-width: 1001px), print {
  .tab-menu::after {
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
}
.tab-menu:hover:after, .tab-menu.current:after {
  opacity: 1;
}
.tab-menu span {
  z-index: 5;
  position: relative;
}

.content-box {
  position: relative;
  display: none;
  width: 100%;
  text-align: center;
}
.content-box.current {
  display: block;
}

.content-box .txt__station {
  font-size: 3.4rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .content-box .txt__station {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767.98px) {
  .content-box .txt__station {
    font-size: 32px;
    font-size: 8.8888888889vw;
  }
}

.content-box img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 30px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .content-box img {
    margin-top: 2vw;
  }
}
@media screen and (max-width: 767.98px) {
  .content-box img {
    margin-top: 40px;
    margin-top: 4vw;
  }
}

@media screen and (max-width: 767.98px) {
  .content-group {
    padding-bottom: 227vw;
  }
}

.content-box {
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}
.content-box.current {
  z-index: 2;
  opacity: 1;
}

h2 picture img {
  width: 60vw;
}
/*
access-sec--1
-------------------------------------------------------*/
.access-sec--1 .inner {
  max-width: 1540px;
}
.access-sec--1 .inner .wrap {
  position: relative;
}
@media screen and (max-width: 767.98px) {
  .access-sec--1 .inner .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .access-sec--1 .inner .wrap .content-group {
    height: auto;
  }
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--1 .inner .wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 416px;
    width: 55.4666666667vw;
    height: 350px;
    height: 46.6666666667vw;
    max-width: 416px;
    max-height: 350px;
    background-color: #fff;
  }
}
@media screen and (min-width: 1001px), print {
  .access-sec--1 .inner .wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    width: 59.4594594595%;
    height: calc(50vw - 37px);
    max-width: 880px;
    max-height: 740px;
    background-color: #fff;
  }
}
.access-sec--1 .inner .content-group {
  position: relative;
  height: 770px;
  min-height: 420px;
  margin-top: 50px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--1 .inner .content-group {
    height: 420px;
    height: 50vw;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--1 .inner .content-group {
    margin-top: 60px;
    margin-top: 6vw;
  }
}
.access-sec--1 .inner .content-group .tab-map__img {
  position: relative;
}
.access-sec--1 .inner .content-box img {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.access-sec--1 .inner .content-box .txtArea {
  width: 38.5810810811%;
  max-width: 570px;
  margin-left: auto;
  margin-right: 0;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--1 .inner .content-box .txtArea {
    max-width: 250px;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--1 .inner .content-box .txtArea {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    margin-bottom: 4vw;
  }
}
@media screen and (min-width: 768px), print {
  .access-sec--1 .inner .content-box .imgArea {
    position: absolute;
    top: 0;
    left: 0;
    width: 59.4594594595%;
    margin: auto;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--1 .inner .content-box .imgArea {
    position: relative;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.access-sec--1 .inner .content-box .imgArea img {
  margin: 0;
}

/*
access-sec--2
-------------------------------------------------------*/
.access-sec--2 .inner {
  max-width: 1240px;
}
.access-sec--2 .map {
  position: relative;
  max-width: 1000px;
  margin-top: 25px;
  margin-left: auto;
  margin-right: auto;
}

/*
access-sec--3
-------------------------------------------------------*/
.access-sec--3 .inner {
  max-width: 1240px;
}
.access-sec--3 .c-heading__line {
  text-align: center;
}
.access-sec--3 .map {
  position: relative;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 60px;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--3 .map {
    margin-top: 40px;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--3 .map {
    margin-top: 60px;
    margin-top: 6vw;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--3 .airport__photo .list {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.access-sec--3 .airport__photo .list .list-item {
  width: 19.4915254237%;
  text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1000.98px) {
  .access-sec--3 .airport__photo .list .list-item {
    margin-top: 15px;
  }
}
@media screen and (max-width: 767.98px) {
  .access-sec--3 .airport__photo .list .list-item {
    width: 32.3333333333%;
    margin-top: 15px;
    margin-left: 0.5%;
    margin-right: 0.5%;
  }
}
.access-sec--3 .airport__photo .list .list-item p {
  margin-top: 7px;
}
@media screen and (max-width: 767.98px) {
  .access-sec--3 .airport__photo .list .list-item p {
    margin-top: 4px;
    font-size: 12px;
    font-size: 3.3333333333vw;
  }
}

.access-resort-wrapper {
  background-color: #000;
}
.access-sec-resort.bg__black {
  position: relative; 
}
.access-sec-resort + .access-sec-resort {
  margin-top: 50px;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort + .access-sec-resort {
    margin-top: 6.666666666666667vw;
  }
}
p.resort-title {
  font-size: 2.5vw;
  font-weight: bold;
  line-height: 2.1818181818;
  letter-spacing: 0.2em;
  margin-bottom: 4.375vw;
}
@media screen and (max-width: 767.98px) {
  p.resort-title {
    font-size: 5.333333333333334vw;
  }
}
.resort-block {
  left: 51.875vw;
  width: 33.125vw;
}
.resort-block-left {
  left: 12.812499999999998vw;
  width: 35.625vw;
}
.resort-block,
.resort-block-left {
  position: absolute;
  top: clamp(0.5vw, 27.5vw - 60px, 23.125vw);
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  .resort-block {
    left: 21.33333333333333vw;
    width: 74.13333333333333vw;
  }
  .resort-block-left {
    left: 4.666666666666667vw;
    width: 74.13333333333333vw;
  }
  .resort-block,
  .resort-block-left {
    top: 32.66666666666667vw;
  }
}
.resort-block p.resort-sub-title,
.resort-block-left p.resort-sub-title {
 font-size: clamp(20px, 1.875vw, 30px);
 margin-top: 2.5vw;
 text-align: left;
}
.resort-block p.txt.txt__lg,
.resort-block-left p.txt.txt__lg {
  font-size: clamp(14px, 1.125vw, 18px);
  line-height: 2.1818181818;
  letter-spacing: 0.2em;
  margin-top: 2.5vw;
  text-align: left;
}
@media screen and (max-width: 767.98px) {
  .resort-block p.txt.txt__lg,
  .resort-block-left p.txt.txt__lg {
    text-align: left;
    font-size: 2.4vw;
  }
}
p.resort-sub-title {
  text-align: center;
  font-size: clamp(20px, 1.875vw, 30px);
  margin-top: 2.5vw;
}
@media screen and (max-width: 767.98px) {
  p.resort-sub-title {
    font-size: 4vw;
    margin-top: 7.333333333333333vw;
  }
}
@media screen and (max-width: 767.98px) {
  .resort-block p.resort-sub-title,
  .resort-block-left p.resort-sub-title {
    text-align: left;
    font-size: 4vw;
    margin-top: 5.333333333333334vw;
  }
}
p.txt.txt__lg {
  text-align: center;
  font-size: clamp(14px, 1.375vw, 22px);;
  line-height: 2.1818181818;
  letter-spacing: 0.2em;
  margin-top: 2.5vw;
}
@media screen and (max-width: 767.98px) {
  p.txt.txt__lg {
    font-size: 2.933333333333333vw;
  }
}
@media screen and (max-width: 767.98px) {
  .section--pt_s.section--pb_s.bg__hokkaido p.txt.txt__lg {
    font-size: 2.933333333333333vw;
  }
}
.resort-block figure picture img,
.resort-block-left figure picture img {
  width: 100%;
  height: auto;
  display: block;
}
.access-sec-resort > picture,
.access-sec-resort > picture img {
  width: 40.3125vw;
  display: block;
  margin-inline: auto;
  padding-top: 1.25vw;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort>picture,
  .access-sec-resort>picture img {
    width: 95%;
    padding-top: 5.333333333333334vw;
  }
}
.access-sec-resort figure {
  position: relative;
  margin: 0;
}
.access-sec-resort figure figcaption,
.access-sec-resort figure figcaption.caption-right {
  position: absolute;
  bottom: 6.625vw;
  font-family: "RyuminPro", "Yu Mincho", "YuMincho", serif;
  line-height: 1;
  letter-spacing: 0.1em;
  font-size: 1vw;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.6), 0 0 10px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort figure figcaption,
  .access-sec-resort figure figcaption.caption-right {
    bottom: 55.666666666666664vw;
    font-size: 2.1333333333333333vw;
  }
}
.access-sec-resort figure figcaption {
  left: 25px;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort figure figcaption {
    left: 15px;
  }
}
.access-sec-resort figure figcaption.caption-right {
  right: 25px;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort figure figcaption.caption-right {
    right: 15px;
  }
}
.access-map-embed {
  position: absolute;
  left: 50vw;
  bottom: 0;
  transform: translateX(-50%);
  width: min(73.75vw, calc(93.75vw - 290px));
  z-index: 2;
}
@media screen and (max-width: 767.98px) {
  .access-map-embed {
    width: 90.66666666666666vw;
  }
}
.access-map-embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}
.access-sec-resort--gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  gap: 0;
}
.access-sec-resort--gallery figure {
  margin: 0;
}
.access-sec-resort--gallery figure img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort--gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.access-sec-resort.access-sec-resort--gallery figcaption.caption-right {
  right: 10px;
  left: auto;
  bottom: 10px;
}
.access-sec-resort--box {
  padding-top: 2.5vw;
}
.access-sec-resort.access-sec-resort--box p.resort-sub-title {
  font-size: clamp(20px, 3vw, 48px);
  margin-top: 2.5vw;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort.access-sec-resort--box p.resort-sub-title {
    font-size: 6.4vw;
  }
}
.access-sec-resort.access-sec-resort--box p.txt.txt__lg {
  font-size: clamp(14px, 1.375vw, 22px);
  line-height: 2.1818181818;
  letter-spacing: 0.2em;
  margin-top: 2.5vw;
}
@media screen and (max-width: 767.98px) {
  .access-sec-resort.access-sec-resort--box p.txt.txt__lg {
    font-size: 2.933333333333333vw;
  }
}
/*# sourceMappingURL=style_access.css.map */