@charset "UTF-8";
/* navi-guide.scss • v0.0.1 */
/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/*==========================================================================

   mixin

===========================================================================*/
/*==========================================================================

   keyframes

===========================================================================*/
/* section
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
   common
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
/*--------------------------------------------------------------------------
  #sec-guide
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
.sec-guide {
  margin-top: clamp(0px, 7.4626865672vw, 100px);
  padding-bottom: clamp(0px, 1.4925373134vw, 20px);
}
@media only screen and (max-width: 767px) {
  .sec-guide {
    margin-top: 50px;
    padding-bottom: 30px;
  }
}
.sec-guide .header__tags {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.sec-guide .header__tag {
  padding: 17px 20px;
  font-size: 14px;
  background: #EFF3FB;
  color: #0075C4;
  letter-spacing: 0.6px;
  line-height: 1;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__tag {
    padding: 9px 12px;
    font-size: 12px;
  }
}
.sec-guide .header__tag span {
  font-family: "Montserrat", sans-serif;
}
.sec-guide .header__tag--new {
  min-width: 124px;
  margin-right: 10px;
  background: #E5BC4A;
  border: 0;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__tag--new {
    margin-right: 5px;
    min-width: 75px;
  }
}
.sec-guide .header__ttl {
  margin-top: 20px;
  font-size: clamp(20px, 2.1538461538vw, 28px);
  font-weight: 500;
  letter-spacing: 5.6px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__ttl {
    margin-top: 10px;
    font-size: 22px;
  }
}
.sec-guide .header__lead {
  margin-top: 10px;
  font-size: clamp(15px, 1.3846153846vw, 18px);
  line-height: 200%;
  letter-spacing: 0.54px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__lead {
    letter-spacing: 0.45px;
  }
}
.sec-guide .header__station {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: clamp(0px, 7.6923076923vw, 100px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__station {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 50px;
  }
}
.sec-guide .header__station-signboard {
  position: relative;
  width: 64.6%;
  padding-top: clamp(0px, 5.3846153846vw, 70px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__station-signboard {
    width: auto;
    padding-top: 22px;
  }
}
.sec-guide .header__station-signboard figure {
  text-align: right;
}
.sec-guide .header__station-signboard figure img {
  width: 100%;
  height: auto;
}
.sec-guide .header__station-map {
  width: 32.3%;
}
@media only screen and (max-width: 767px) {
  .sec-guide .header__station-map {
    width: auto;
    margin-top: 40px;
  }
}
.sec-guide .header__station-map figure {
  text-align: right;
}
.sec-guide .header__station-map figure img {
  width: 100%;
  height: auto;
}
.sec-guide .point {
  margin-top: clamp(100px, 9.2307692308vw, 120px);
  padding: clamp(20px, 3.8461538462vw, 50px) clamp(20px, 3.0769230769vw, 40px);
  background: #EFF3FB;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point {
    margin: 50px -30px 0;
    padding: 50px 25px;
  }
}
.sec-guide .point__ttl {
  font-size: clamp(24px, 2.1538461538vw, 28px);
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 5.6px;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__ttl {
    font-size: 23px;
    line-height: 150%;
    letter-spacing: 2.3px;
  }
}
.sec-guide .point__list {
  margin-top: clamp(64px, 6.4615384615vw, 84px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(20px, 2.3076923077vw, 30px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 60px;
  }
}
.sec-guide .point__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: clamp(30px, 3.0769230769vw, 40px) clamp(20px, 2.3076923077vw, 30px) clamp(20px, 2.3076923077vw, 30px) clamp(20px, 2.3076923077vw, 30px);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
      -ms-flex: 1 0 0px;
          flex: 1 0 0;
  background: #FFF;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__item {
    padding: 35px 30px 25px;
  }
}
.sec-guide .point__item-num {
  position: absolute;
  left: 50%;
  top: -25px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 50px;
  height: 50px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFF;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(22px, 2vw, 26px);
  line-height: 90%;
  border-radius: 40px;
  background: #0075C4;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__item-num {
    font-size: 26px;
  }
}
.sec-guide .point__item-ttl {
  margin-top: 15px;
  color: #0075C4;
  text-align: center;
  font-size: clamp(18px, 1.5384615385vw, 20px);
  letter-spacing: 4px;
  line-height: 1;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__item-ttl {
    font-size: 18px;
    letter-spacing: 3.6px;
  }
}
.sec-guide .point__item-txt {
  margin-top: 10px;
  font-size: clamp(16px, 1.3846153846vw, 18px);
  line-height: 200%;
  letter-spacing: 0.54px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .point__item-txt {
    font-size: 15px;
    letter-spacing: 0.45px;
  }
}
.sec-guide .content {
  margin-top: clamp(0px, 9.2307692308vw, 120px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .content {
    margin-top: 60px;
  }
}
.sec-guide .content.child {
  margin-top: 0;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content.child {
    margin-top: 60px;
  }
}
.sec-guide .content.town, .sec-guide .content.spot {
  margin-top: clamp(0px, 12.3076923077vw, 160px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .content.town, .sec-guide .content.spot {
    margin-top: 60px;
  }
}
.sec-guide .content__ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content__ttl {
    gap: 15px;
  }
}
.sec-guide .content__ttl .num {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 57px;
  height: 57px;
  padding: 15px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
  border-radius: 45px;
  background: #EFF3FB;
  color: #0075C4;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.3076923077vw, 30px);
  line-height: 90%;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content__ttl .num {
    width: 44px;
    height: 44px;
    font-size: 26px;
  }
}
.sec-guide .content__ttl .txt {
  color: #0075C4;
  font-size: clamp(20px, 2.1538461538vw, 28px);
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 2.8px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content__ttl .txt {
    font-size: 22px;
  }
}
.sec-guide .content__lead {
  margin-top: 10px;
  color: #0075C4;
  font-size: clamp(18px, 1.5384615385vw, 20px);
  line-height: 200%;
  letter-spacing: 2px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content__lead {
    font-size: 18px;
    letter-spacing: 1.8px;
  }
}
.sec-guide .content__txt {
  margin-top: clamp(20px, 3.0769230769vw, 40px);
  font-size: clamp(14px, 1.2307692308vw, 16px);
  line-height: 200%;
  letter-spacing: 0.48px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .content__txt {
    margin-top: 20px;
    font-size: 15px;
    letter-spacing: 0.45px;
  }
}
.sec-guide .access__station {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(20px, 3.0769230769vw, 40px);
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  margin-top: clamp(20px, 3.0769230769vw, 40px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__station {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 30px;
  }
}
.sec-guide .access__time {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  gap: 20px;
  width: 23.84%;
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__time {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
    gap: 0;
  }
}
.sec-guide .access__time img {
  max-width: 100%;
  height: auto;
}
.sec-guide .access__map {
  width: 71.53%;
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__map {
    width: auto;
  }
}
.sec-guide .access__map figure img {
  max-width: 100%;
  height: auto;
}
.sec-guide .access__map .ico {
  display: none;
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__map .ico {
    display: block;
    margin: 10px 0 0 auto;
  }
}
.sec-guide .access__caption {
  margin-top: clamp(20px, 3.0769230769vw, 40px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__caption {
    margin-top: 30px;
  }
}
.sec-guide .access__caption li {
  position: relative;
  font-size: 12px;
  line-height: 200%;
  letter-spacing: 0.36px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .access__caption li {
    font-size: 11px;
  }
}
.sec-guide .access__caption li::before {
  content: "※";
}
.sec-guide .child__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__header {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.sec-guide .child__header-obj {
  max-width: 456px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__header-obj {
    margin-top: 20px;
  }
}
.sec-guide .child__header-obj img {
  max-width: 100%;
  height: auto;
}
.sec-guide .child__list {
  margin-top: clamp(10px, 3.0769230769vw, 40px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(10px, 2.9230769231vw, 38px);
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__list {
    gap: 20px;
    margin-top: 30px;
  }
}
.sec-guide .child__item {
  width: 48.4%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(16px, 3.0769230769vw, 40px);
  padding: clamp(16px, 3.0769230769vw, 40px);
  background: #EFF3FB;
}
@media screen and (min-width: 768px) and (max-width: 1180px) {
  .sec-guide .child__item {
    gap: 16px;
  }
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: auto;
    padding: 25px;
  }
}
.sec-guide .child__item-ttl {
  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;
  width: clamp(150px, 13.5384615385vw, 176px);
  height: clamp(150px, 13.5384615385vw, 176px);
  background: #fff;
  border-radius: 50%;
  color: #0075C4;
  text-align: center;
  font-size: clamp(14px, 1.3076923077vw, 17px);
  line-height: 160%;
  letter-spacing: 1.7px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__item-ttl {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 160px;
    height: 160px;
    font-size: 18px;
    letter-spacing: 0.54px;
  }
}
.sec-guide .child__item-txt {
  width: calc(100% - 216px);
  font-size: clamp(15px, 1.2307692308vw, 16px);
  line-height: 200%;
  letter-spacing: 0.48px;
}
@media screen and (min-width: 768px) and (max-width: 1180px) {
  .sec-guide .child__item-txt {
    width: calc(100% - 166px);
  }
}
@media only screen and (max-width: 767px) {
  .sec-guide .child__item-txt {
    width: auto;
    font-size: 15px;
  }
}
.sec-guide .town__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(10px, 2.7692307692vw, 36px);
  -ms-flex-item-align: stretch;
      -ms-grid-row-align: stretch;
      align-self: stretch;
  margin-top: clamp(10px, 3.0769230769vw, 40px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .town__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }
}
.sec-guide .town__item {
  width: 48.46%;
  padding: clamp(20px, 3.0769230769vw, 40px);
  background: #EFF3FB;
}
@media only screen and (max-width: 767px) {
  .sec-guide .town__item {
    width: auto;
    padding: 25px;
  }
}
.sec-guide .town__item-img img {
  width: 100%;
  height: auto;
}
.sec-guide .town__item-txt {
  margin-top: clamp(10px, 1.5384615385vw, 20px);
  font-size: clamp(14px, 1.2307692308vw, 16px);
  line-height: 200%;
  letter-spacing: 0.48px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .town__item-txt {
    margin-top: 20px;
    font-size: 15px;
  }
}
.sec-guide .town__item-txt span {
  display: block;
  font-weight: 700;
}
.sec-guide .spot__ttl {
  margin-top: clamp(20px, 3.0769230769vw, 40px);
  font-size: clamp(18px, 1.5384615385vw, 20px);
  font-weight: 500;
  line-height: 200%;
  letter-spacing: 0.6px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__ttl {
    margin-top: 30px;
    font-size: 18px;
  }
}
.sec-guide .spot__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(10px, 2.9230769231vw, 38px);
  margin-top: clamp(10px, 1.5384615385vw, 20px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__list {
    gap: 20px;
    margin-top: 10px;
  }
}
.sec-guide .spot__item {
  width: 31.2%;
  background: #EFF3FB;
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__item {
    width: 46.8%;
  }
}
.sec-guide .spot__item-img {
  aspect-ratio: 406/270;
}
.sec-guide .spot__item-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.sec-guide .spot__item-body {
  padding: clamp(10px, 1.5384615385vw, 20px) clamp(20px, 3.0769230769vw, 40px);
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__item-body {
    padding: 10px;
  }
}
.sec-guide .spot__item-ttl {
  font-size: clamp(14px, 1.2307692308vw, 16px);
  line-height: 200%;
  letter-spacing: 0.54px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__item-ttl {
    font-size: 13px;
    line-height: 130%;
  }
}
.sec-guide .spot__item-txt {
  font-size: 12px;
  line-height: 200%;
  letter-spacing: 0.36px;
}
@media only screen and (max-width: 767px) {
  .sec-guide .spot__item-txt {
    font-size: 11px;
    line-height: 150%;
  }
}

/*--------------------------------------------------------------------------
   custom animation
---------------------------------------------------------------------------*/
/* use
-----------------------------------------------------------------*/
/* section
-----------------------------------------------------------------*/
/*# sourceMappingURL=navi-guide.css.map */