.accessBox {
  background-color: #e6ecf0;
  padding: 60px 40px;
}

@media screen and (max-width: 768px) {
  .accessBox {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@media screen and (max-width: 768px) {
  .accessBox__head .heading {
    font-size: 20px;
  }
}

.accessBox__dist {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  font-size: 24px;
  gap: 4px;
  letter-spacing: .05em;
  line-height: 1.6;
}

.accessBox__dist:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.accessBox__dist:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.accessBox__dist:before, .accessBox__dist:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.accessBox__dist .inner {
  display: block;
}

.accessBox__dist .num {
  display: inline-block;
  font-family: "EB Garamond", serif;
  font-size: 48px;
  font-style: italic;
  letter-spacing: .05em;
  line-height: .8;
}

.accessBox__dist .caption {
  display: inline-block;
  font-size: 12px;
}

@media screen and (min-width: 768px) {
  .heading + .accessBox__dist {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .heading + .accessBox__dist {
    margin-top: 24px;
  }
}

@media screen and (min-width: 768px) {
  .accessBox__cont {
    width: 400px;
  }
}

@media screen and (min-width: 768px) {
  .accessBox__head + .accessBox__cont {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .accessBox__head + .accessBox__cont {
    margin-top: 24px;
  }
}

.accessBox__figTtl {
  background-color: #616c78;
  color: #ffffff;
  letter-spacing: .05em;
  padding: 10px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .accessBox__figTtl {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .accessBox__figTtl {
    font-size: 16px;
  }
}

.accessBox__figTtl .inner {
  display: block;
  line-height: 1.6;
}

.accessBox__figTtl .inner:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.accessBox__figTtl .inner:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.accessBox__figTtl .inner:before, .accessBox__figTtl .inner:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.accessCard__desc {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .accessCard__head + .accessCard__desc {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .accessCard__head + .accessCard__desc {
    margin-top: 16px;
  }
}

.accessCard__name {
  font-family: "EB Garamond", serif;
  font-size: 24px;
  font-style: italic;
  letter-spacing: .05em;
  line-height: 1.2;
}

.accessCard__name:before {
  content: '';
  margin-top: calc((1 - 1.2) * .5em);
}

.accessCard__name:after {
  margin-bottom: calc((1 - 1.2) * .5em);
}

.accessCard__name:before, .accessCard__name:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.accessCard__dist {
  font-family: "EB Garamond", serif;
  font-style: italic;
  letter-spacing: .05em;
  line-height: .8;
}

@media screen and (min-width: 768px) {
  .accessCard__dist {
    font-size: 40px;
  }
}

@media screen and (max-width: 768px) {
  .accessCard__dist {
    font-size: 32px;
  }
}

.accessCard__dist .small {
  font-style: normal;
}

@media screen and (min-width: 768px) {
  .accessCard__dist .small {
    font-size: 20px;
  }
}

@media screen and (max-width: 768px) {
  .accessCard__dist .small {
    font-size: 16px;
  }
}

.accessCard__name + .accessCard__dist {
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .bgLayer--traffic:after {
    background: url("../imgs/pc/bg-access-01@1.5x.jpg") top center no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (max-width: 768px) {
  .bgLayer--traffic:after {
    background: url("../imgs/sp/bg-access-01.jpg") top center no-repeat;
    background-size: 100% auto;
  }
}

@media screen and (min-width: 768px) {
  .busSect__head {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .busSect__head {
    margin: 0 -20px;
  }
}

@media screen and (max-width: 768px) {
  .busSect__cont .subSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .busSect__cont .subSect__head .enTtl {
    color: #616c78;
    -webkit-writing-mode: sideways-rl;
        -ms-writing-mode: sideways-rl;
            writing-mode: sideways-rl;
  }
}

@media screen and (min-width: 768px) {
  .busSect__cont .subSect__head .enTtl + .headingUnit {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .busSect__cont .subSect__head .headingUnit {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .busSect__cont .subSect__head .headingUnit .heading {
    font-size: 18px;
  }
}

.busSect__cont .subSect__cont {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .busSect__head + .busSect__cont {
    margin-top: 60px;
  }
}

.cyclingCard {
  background: #ffffff;
  -webkit-box-shadow: 0 0 20px 3px rgba(51, 51, 51, 0.1);
          box-shadow: 0 0 20px 3px rgba(51, 51, 51, 0.1);
  padding: 40px 24px;
  position: relative;
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .cyclingCard {
    width: 368px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingCard {
    width: 343px;
  }
}

.cyclingCard__head + .cyclingCard__body {
  margin-top: 32px;
}

.cyclingCard__ttl {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
}

.cyclingCard__ttl .num {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 1 / 1;
  background-color: #006f38;
  border-radius: 50%;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 13px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
  width: 20px;
}

.cyclingCard__ttl .t {
  display: block;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  letter-spacing: .05em;
  line-height: 1.6;
}

.cyclingCard__ttl .t:before {
  content: '';
  margin-top: calc((1 - 1.6) * .5em);
}

.cyclingCard__ttl .t:after {
  margin-bottom: calc((1 - 1.6) * .5em);
}

.cyclingCard__ttl .t:before, .cyclingCard__ttl .t:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

.cyclingCard__ttl .t .caption {
  display: block;
}

.cyclingCard__ttl + .txt {
  margin-top: 24px;
}

.cyclingCard__close {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  aspect-ratio: 1 / 1;
  background-color: rgba(34, 34, 34, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  right: 0;
  top: -45px;
  width: 46px;
  z-index: 2;
}

.cyclingCard__close .closeSVG {
  display: block;
  height: auto;
  width: 20px;
}

@media screen and (min-width: 768px) {
  .cyclingMap {
    width: 660px;
  }
}

.cyclingMap__ttl {
  font-family: "EB Garamond", serif;
  font-style: italic;
  letter-spacing: .05em;
  line-height: 1.2;
}

.cyclingMap__ttl:before {
  content: '';
  margin-top: calc((1 - 1.2) * .5em);
}

.cyclingMap__ttl:after {
  margin-bottom: calc((1 - 1.2) * .5em);
}

.cyclingMap__ttl:before, .cyclingMap__ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .cyclingMap__ttl {
    font-size: 32px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingMap__ttl {
    font-size: 24px;
  }
}

.cyclingMap__fig {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .cyclingMap__fig {
    margin-left: -20px;
    margin-right: -20px;
  }
}

.cyclingMap__ttl + .cyclingMap__fig {
  margin-top: 24px;
}

.cyclingMap__trigger {
  aspect-ratio: 1 / 1;
  background-color: #006f38;
  border: 1px solid #ffffff;
  border-radius: 50%;
  color: #ffffff;
  letter-spacing: 0;
  line-height: 1;
  position: absolute;
  -webkit-transition: -webkit-box-shadow .3s ease-in-out;
  transition: -webkit-box-shadow .3s ease-in-out;
  transition: box-shadow .3s ease-in-out;
  transition: box-shadow .3s ease-in-out, -webkit-box-shadow .3s ease-in-out;
  z-index: 2;
}

@media screen and (min-width: 768px) {
  .cyclingMap__trigger {
    font-size: 16px;
    width: 32px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingMap__trigger {
    font-size: 12px;
    width: 20px;
  }
}

@media screen and (min-width: 768px) {
  .cyclingMap__trigger:hover {
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
}

@media (hover: hover) and (pointer: fine) {
  .cyclingMap__trigger:hover {
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
}

.cyclingMap__trigger--01 {
  bottom: calc(10 / 938 * 100%);
  left: calc(602 / 750 * 100%);
}

.cyclingMap__trigger--02 {
  bottom: calc(62 / 938 * 100%);
  left: calc(638 / 750 * 100%);
}

.cyclingMap__trigger--03 {
  bottom: calc(82 / 938 * 100%);
  left: calc(584 / 750 * 100%);
}

.cyclingMap__trigger--04 {
  bottom: calc(190 / 938 * 100%);
  left: calc(577 / 750 * 100%);
}

.cyclingMap__trigger--05 {
  bottom: calc(206 / 938 * 100%);
  left: calc(539 / 750 * 100%);
}

.cyclingMap__trigger--06 {
  bottom: calc(309 / 938 * 100%);
  left: calc(439 / 750 * 100%);
}

.cyclingMap__trigger--07 {
  left: calc(389 / 750 * 100%);
  top: calc(578 / 938 * 100%);
}

.cyclingMap__trigger--08 {
  left: calc(306 / 750 * 100%);
  top: calc(501 / 938 * 100%);
}

.cyclingMap__trigger--09 {
  left: calc(99 / 750 * 100%);
  top: calc(331 / 938 * 100%);
}

.cyclingMap__trigger--10 {
  left: calc(126 / 750 * 100%);
  top: calc(246 / 938 * 100%);
}

.cyclingMap__dialog {
  left: 50%;
  opacity: 0;
  position: absolute;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  visibility: hidden;
  z-index: 4;
}

@media screen and (min-width: 768px) {
  .cyclingMap__dialog {
    top: 143px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingMap__dialog {
    top: 54px;
  }
}

.cyclingMap__dialog.is-visible {
  opacity: 1;
  visibility: visible;
}

@media screen and (min-width: 768px) {
  .cyclingSect__head {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .cyclingSect__head {
    margin: 0 -20px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingSect__cont .subSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .cyclingSect__cont .subSect__head .enTtl {
    color: #616c78;
    -webkit-writing-mode: sideways-rl;
        -ms-writing-mode: sideways-rl;
            writing-mode: sideways-rl;
  }
}

@media screen and (min-width: 768px) {
  .cyclingSect__cont .subSect__head .enTtl + .headingUnit {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .cyclingSect__cont .subSect__head .headingUnit {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .cyclingSect__cont .subSect__head .headingUnit .heading {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  .cyclingSect__cont .subSect__head .headingUnit .heading + .txt {
    max-width: 660px;
  }
}

.cyclingSect__cont .subSect__cont {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .cyclingSect__head + .cyclingSect__cont {
    margin-top: 60px;
  }
}

@media screen and (min-width: 768px) {
  .introSect {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 60px 120px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (min-width: 768px) {
  .introSect__head {
    width: 320px;
  }
}

@media print, screen and (min-width: 768px) and (max-width: 1199px) {
  .introSect__head {
    width: 760px;
  }
}

@media screen and (max-width: 768px) {
  .introSect__head .headingUnit .enTtl {
    font-size: 56px;
  }
}

@media screen and (min-width: 768px) {
  .introSect__cont {
    width: 760px;
  }
}

@media screen and (max-width: 768px) {
  .introSect__head + .introSect__cont {
    margin-top: 60px;
  }
}

.keyVisualAnimation {
  position: relative;
  z-index: 1;
}

.keyVisualAnimation__bukken {
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  -webkit-transition: opacity 1s ease-in-out 2.5s, visibility 1s ease-in-out 2.5s;
  transition: opacity 1s ease-in-out 2.5s, visibility 1s ease-in-out 2.5s;
  visibility: hidden;
  width: 100%;
  z-index: 4;
}

.keyVisualAnimation__bukken .pic {
  height: 100%;
  width: 100%;
}

.keyVisualAnimation__bukken .pic__image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  width: 100%;
}

.keyVisualAnimation__building {
  -webkit-filter: blur(20px) contrast(0.3) hue-rotate(0deg) saturate(0.5);
          filter: blur(20px) contrast(0.3) hue-rotate(0deg) saturate(0.5);
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.keyVisualAnimation__building .pic {
  height: 100%;
  width: 100%;
}

.keyVisualAnimation__building .pic__image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  width: 100%;
}

.keyVisualAnimation__building--01 {
  -webkit-animation: buildingReveal01 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.4s forwards;
          animation: buildingReveal01 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.4s forwards;
}

.keyVisualAnimation__building--02 {
  -webkit-animation: buildingReveal02 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s forwards, buildingShimmer 2s ease-in-out 3.7s infinite;
          animation: buildingReveal02 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 2.5s forwards, buildingShimmer 2s ease-in-out 3.7s infinite;
}

.keyVisualAnimation__line {
  height: 100%;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
  -webkit-mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
          mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(25%, rgba(255, 255, 255, 0)), color-stop(33%, white), color-stop(66%, white), color-stop(75%, rgba(255, 255, 255, 0)));
          mask-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 25%, white 33%, white 66%, rgba(255, 255, 255, 0) 75%);
  -webkit-mask-position: 100% 0%;
          mask-position: 100% 0%;
  -webkit-mask-size: 100% 400%;
          mask-size: 100% 400%;
  position: absolute;
  top: 0;
  -webkit-transition: -webkit-mask-position 4s cubic-bezier(0, 0.22, 0.77, 0.98);
  transition: -webkit-mask-position 4s cubic-bezier(0, 0.22, 0.77, 0.98);
  transition: mask-position 4s cubic-bezier(0, 0.22, 0.77, 0.98);
  transition: mask-position 4s cubic-bezier(0, 0.22, 0.77, 0.98), -webkit-mask-position 4s cubic-bezier(0, 0.22, 0.77, 0.98);
  width: 100%;
  z-index: 3;
}

.keyVisualAnimation__line .pic {
  height: 100%;
  width: 100%;
}

.keyVisualAnimation__line .pic__image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  width: 100%;
}

.keyVisualAnimation.sai-animate .keyVisualAnimation__line {
  -webkit-mask-position: 100% 60%;
          mask-position: 100% 60%;
}

.keyVisualAnimation.sai-animate .keyVisualAnimation__bukken {
  opacity: 1;
  visibility: visible;
}

@-webkit-keyframes buildingReveal01 {
  0% {
    -webkit-filter: blur(25px) contrast(0.2) hue-rotate(0deg) saturate(0.5);
            filter: blur(25px) contrast(0.2) hue-rotate(0deg) saturate(0.5);
    opacity: 0;
  }
  20% {
    -webkit-filter: blur(20px) contrast(0.4) hue-rotate(10deg) saturate(0.7);
            filter: blur(20px) contrast(0.4) hue-rotate(10deg) saturate(0.7);
    opacity: .2;
  }
  40% {
    -webkit-filter: blur(12px) contrast(0.6) hue-rotate(5deg) saturate(0.8);
            filter: blur(12px) contrast(0.6) hue-rotate(5deg) saturate(0.8);
    opacity: .4;
  }
  60% {
    -webkit-filter: blur(6px) contrast(0.8) hue-rotate(2deg) saturate(0.9);
            filter: blur(6px) contrast(0.8) hue-rotate(2deg) saturate(0.9);
    opacity: .6;
  }
  80% {
    -webkit-filter: blur(2px) contrast(0.95) hue-rotate(1deg) saturate(1);
            filter: blur(2px) contrast(0.95) hue-rotate(1deg) saturate(1);
    opacity: .7;
  }
  100% {
    -webkit-filter: blur(0) brightness(1);
            filter: blur(0) brightness(1);
    opacity: 1;
  }
}

@keyframes buildingReveal01 {
  0% {
    -webkit-filter: blur(25px) contrast(0.2) hue-rotate(0deg) saturate(0.5);
            filter: blur(25px) contrast(0.2) hue-rotate(0deg) saturate(0.5);
    opacity: 0;
  }
  20% {
    -webkit-filter: blur(20px) contrast(0.4) hue-rotate(10deg) saturate(0.7);
            filter: blur(20px) contrast(0.4) hue-rotate(10deg) saturate(0.7);
    opacity: .2;
  }
  40% {
    -webkit-filter: blur(12px) contrast(0.6) hue-rotate(5deg) saturate(0.8);
            filter: blur(12px) contrast(0.6) hue-rotate(5deg) saturate(0.8);
    opacity: .4;
  }
  60% {
    -webkit-filter: blur(6px) contrast(0.8) hue-rotate(2deg) saturate(0.9);
            filter: blur(6px) contrast(0.8) hue-rotate(2deg) saturate(0.9);
    opacity: .6;
  }
  80% {
    -webkit-filter: blur(2px) contrast(0.95) hue-rotate(1deg) saturate(1);
            filter: blur(2px) contrast(0.95) hue-rotate(1deg) saturate(1);
    opacity: .7;
  }
  100% {
    -webkit-filter: blur(0) brightness(1);
            filter: blur(0) brightness(1);
    opacity: 1;
  }
}

@-webkit-keyframes buildingReveal02 {
  0% {
    -webkit-filter: blur(30px) contrast(0.1) hue-rotate(0deg) saturate(0.3);
            filter: blur(30px) contrast(0.1) hue-rotate(0deg) saturate(0.3);
    opacity: 0;
  }
  30% {
    -webkit-filter: blur(25px) contrast(0.3) hue-rotate(15deg) saturate(0.6);
            filter: blur(25px) contrast(0.3) hue-rotate(15deg) saturate(0.6);
    opacity: .1;
  }
  50% {
    -webkit-filter: blur(15px) contrast(0.5) hue-rotate(8deg) saturate(0.8);
            filter: blur(15px) contrast(0.5) hue-rotate(8deg) saturate(0.8);
    opacity: .3;
  }
  70% {
    -webkit-filter: blur(8px) contrast(0.7) hue-rotate(4deg) saturate(0.9);
            filter: blur(8px) contrast(0.7) hue-rotate(4deg) saturate(0.9);
    -webkit-mask-size: 75% 75%;
            mask-size: 75% 75%;
    opacity: .5;
  }
  90% {
    -webkit-filter: blur(3px) contrast(0.9) hue-rotate(2deg) saturate(1);
            filter: blur(3px) contrast(0.9) hue-rotate(2deg) saturate(1);
    opacity: .55;
  }
  100% {
    -webkit-filter: blur(0) contrast(1) hue-rotate(0deg) saturate(1);
            filter: blur(0) contrast(1) hue-rotate(0deg) saturate(1);
    opacity: .6;
  }
}

@keyframes buildingReveal02 {
  0% {
    -webkit-filter: blur(30px) contrast(0.1) hue-rotate(0deg) saturate(0.3);
            filter: blur(30px) contrast(0.1) hue-rotate(0deg) saturate(0.3);
    opacity: 0;
  }
  30% {
    -webkit-filter: blur(25px) contrast(0.3) hue-rotate(15deg) saturate(0.6);
            filter: blur(25px) contrast(0.3) hue-rotate(15deg) saturate(0.6);
    opacity: .1;
  }
  50% {
    -webkit-filter: blur(15px) contrast(0.5) hue-rotate(8deg) saturate(0.8);
            filter: blur(15px) contrast(0.5) hue-rotate(8deg) saturate(0.8);
    opacity: .3;
  }
  70% {
    -webkit-filter: blur(8px) contrast(0.7) hue-rotate(4deg) saturate(0.9);
            filter: blur(8px) contrast(0.7) hue-rotate(4deg) saturate(0.9);
    -webkit-mask-size: 75% 75%;
            mask-size: 75% 75%;
    opacity: .5;
  }
  90% {
    -webkit-filter: blur(3px) contrast(0.9) hue-rotate(2deg) saturate(1);
            filter: blur(3px) contrast(0.9) hue-rotate(2deg) saturate(1);
    opacity: .55;
  }
  100% {
    -webkit-filter: blur(0) contrast(1) hue-rotate(0deg) saturate(1);
            filter: blur(0) contrast(1) hue-rotate(0deg) saturate(1);
    opacity: .6;
  }
}

@-webkit-keyframes buildingShimmer {
  0% {
    -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
            filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    opacity: .6;
  }
  20% {
    -webkit-filter: brightness(1.08) contrast(1.03) saturate(1.08) hue-rotate(3deg);
            filter: brightness(1.08) contrast(1.03) saturate(1.08) hue-rotate(3deg);
    opacity: .4;
  }
  40% {
    -webkit-filter: brightness(1.12) contrast(1.06) saturate(1.12) hue-rotate(-2deg);
            filter: brightness(1.12) contrast(1.06) saturate(1.12) hue-rotate(-2deg);
    opacity: .1;
  }
  60% {
    -webkit-filter: brightness(1.05) contrast(1.08) saturate(1.05) hue-rotate(4deg);
            filter: brightness(1.05) contrast(1.08) saturate(1.05) hue-rotate(4deg);
    opacity: .2;
  }
  80% {
    -webkit-filter: brightness(1.1) contrast(1.04) saturate(1.1) hue-rotate(-1deg);
            filter: brightness(1.1) contrast(1.04) saturate(1.1) hue-rotate(-1deg);
    opacity: .5;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
            filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    opacity: .6;
  }
}

@keyframes buildingShimmer {
  0% {
    -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
            filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    opacity: .6;
  }
  20% {
    -webkit-filter: brightness(1.08) contrast(1.03) saturate(1.08) hue-rotate(3deg);
            filter: brightness(1.08) contrast(1.03) saturate(1.08) hue-rotate(3deg);
    opacity: .4;
  }
  40% {
    -webkit-filter: brightness(1.12) contrast(1.06) saturate(1.12) hue-rotate(-2deg);
            filter: brightness(1.12) contrast(1.06) saturate(1.12) hue-rotate(-2deg);
    opacity: .1;
  }
  60% {
    -webkit-filter: brightness(1.05) contrast(1.08) saturate(1.05) hue-rotate(4deg);
            filter: brightness(1.05) contrast(1.08) saturate(1.05) hue-rotate(4deg);
    opacity: .2;
  }
  80% {
    -webkit-filter: brightness(1.1) contrast(1.04) saturate(1.1) hue-rotate(-1deg);
            filter: brightness(1.1) contrast(1.04) saturate(1.1) hue-rotate(-1deg);
    opacity: .5;
  }
  100% {
    -webkit-filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
            filter: brightness(1) contrast(1) saturate(1) hue-rotate(0deg);
    opacity: .6;
  }
}

@media screen and (min-width: 768px) {
  .skySect__head {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .skySect__head {
    margin: 0 -20px;
  }
}

@media screen and (max-width: 768px) {
  .skySect__cont .subSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .skySect__cont .subSect__head .enTtl {
    color: #616c78;
    -webkit-writing-mode: sideways-rl;
        -ms-writing-mode: sideways-rl;
            writing-mode: sideways-rl;
  }
}

@media screen and (min-width: 768px) {
  .skySect__cont .subSect__head .enTtl + .headingUnit {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .skySect__cont .subSect__head .headingUnit {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .skySect__cont .subSect__head .headingUnit .heading {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  .skySect__cont .subSect__head .headingUnit .heading + .txt {
    max-width: 660px;
  }
}

.skySect__cont .subSect__cont {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .skySect__head + .skySect__cont {
    margin-top: 60px;
  }
}

@media screen and (min-width: 768px) {
  .taxiCard__head + .taxiCard__desc {
    margin-top: 32px;
  }
}

@media screen and (max-width: 768px) {
  .taxiCard__head + .taxiCard__desc {
    margin-top: 16px;
  }
}

.taxiCard__ttl {
  font-family: "EB Garamond", serif;
  font-style: italic;
  letter-spacing: .05em;
  line-height: 1.2;
}

.taxiCard__ttl:before {
  content: '';
  margin-top: calc((1 - 1.2) * .5em);
}

.taxiCard__ttl:after {
  margin-bottom: calc((1 - 1.2) * .5em);
}

.taxiCard__ttl:before, .taxiCard__ttl:after {
  content: '';
  display: block;
  height: 0;
  width: 0;
}

@media screen and (min-width: 768px) {
  .taxiCard__ttl {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .taxiCard__ttl {
    font-size: 20px;
  }
}

.taxiCard__price {
  letter-spacing: .05em;
}

@media screen and (min-width: 768px) {
  .taxiCard__price {
    font-size: 16px;
    line-height: 1.6;
  }
  .taxiCard__price:before {
    content: '';
    margin-top: calc((1 - 1.6) * .5em);
  }
  .taxiCard__price:after {
    margin-bottom: calc((1 - 1.6) * .5em);
  }
  .taxiCard__price:before, .taxiCard__price:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

@media screen and (max-width: 768px) {
  .taxiCard__price {
    font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 12px;
    line-height: 1.4;
  }
  .taxiCard__price:before {
    content: '';
    margin-top: calc((1 - 1.4) * .5em);
  }
  .taxiCard__price:after {
    margin-bottom: calc((1 - 1.4) * .5em);
  }
  .taxiCard__price:before, .taxiCard__price:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
  }
}

* + .taxiCard__price {
  margin-top: 16px;
}

@media screen and (min-width: 768px) {
  .taxiSect__head {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__head {
    margin: 0 -20px;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__head {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 40px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__head .enTtl {
    color: #616c78;
    -webkit-writing-mode: sideways-rl;
        -ms-writing-mode: sideways-rl;
            writing-mode: sideways-rl;
  }
}

@media screen and (min-width: 768px) {
  .taxiSect__cont .subSect__head .enTtl + .headingUnit {
    margin-top: 60px;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__head .headingUnit {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__head .headingUnit .heading {
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) {
  .taxiSect__cont .subSect__head .headingUnit .heading + .txt {
    max-width: 660px;
  }
}

.taxiSect__cont .subSect__cont {
  margin-top: 60px;
}

@media screen and (min-width: 768px) {
  .taxiSect__cont .subSect__cont {
    max-width: 660px;
  }
}

@media screen and (min-width: 768px) {
  .taxiSect__cont .subSect__cont .usableList__inner {
    gap: 40px 20px;
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__cont .usableList__inner {
    gap: 24px;
  }
}

@media screen and (min-width: 768px) {
  .taxiSect__cont .subSect__cont .usableList__item {
    width: calc(50% - 10px);
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__cont .subSect__cont .usableList__item {
    width: calc(50% - 12px);
  }
}

@media screen and (max-width: 768px) {
  .taxiSect__head + .taxiSect__cont {
    margin-top: 60px;
  }
}

.trainSect__head {
  width: calc(100vw - var(--scrollbar));
}

@media screen and (min-width: 768px) {
  .trainSect__head {
    margin-left: calc((100% - 100vw + var(--scrollbar)) / 2);
  }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .trainSect__head {
    margin-left: -20px;
    width: calc(100% + 40px);
  }
}

@media screen and (max-width: 768px) {
  .trainSect__head {
    margin-left: -20px;
  }
}

@media screen and (min-width: 768px) {
  .trainSect__head .usableList__inner {
    gap: 32px 15px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__head .usableList__inner {
    gap: 40px 8px;
  }
}

@media screen and (min-width: 768px) {
  .trainSect__head .usableList__item {
    width: calc((100% - 30px) / 3);
  }
}

@media screen and (max-width: 768px) {
  .trainSect__head .usableList__item {
    width: calc(50% - 4px);
  }
}

@media screen and (min-width: 768px) {
  .trainSect__cont .headingUnit .heading + .txt {
    max-width: 880px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__cont .panoramaFigure {
    margin-left: -20px;
    margin-right: -20px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__cont .panoramaFigure__body {
    height: 375px;
  }
}

@media screen and (min-width: 768px) {
  .trainSect__cont .panoramaFigure:not(:first-child) {
    margin-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__cont .panoramaFigure:not(:first-child) {
    margin-top: 56px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__cont .panoramaFigure:last-child .panoramaFigure__body {
    height: 281px;
  }
}

@media screen and (min-width: 768px) {
  .trainSect__head + .trainSect__cont {
    margin-top: 200px;
  }
}

@media screen and (max-width: 768px) {
  .trainSect__head + .trainSect__cont {
    margin-top: 100px;
  }
}

@media screen and (min-width: 768px) {
  .access-introduction {
    padding: 140px 0 200px;
  }
}

@media screen and (max-width: 768px) {
  .access-introduction {
    padding: 100px 0;
  }
}

@media screen and (min-width: 768px) {
  .access-train {
    padding: 0 0 200px;
  }
}

@media screen and (max-width: 768px) {
  .access-train {
    padding: 0 0 100px;
  }
}

@media screen and (min-width: 768px) {
  .access-sky {
    padding: 0 0 200px;
  }
}

@media screen and (min-width: 768px) {
  .access-bus {
    padding: 0 0 200px;
  }
}

@media screen and (min-width: 768px) {
  .access-cycling {
    padding: 0 0 200px;
  }
}

@media screen and (max-width: 768px) {
  .access-cycling {
    padding: 0 0 80px;
  }
}

@media screen and (min-width: 768px) {
  .access-taxi {
    padding: 0 0 200px;
  }
}

@media screen and (max-width: 768px) {
  .access-taxi {
    padding: 0 0 80px;
  }
}