@charset "utf-8";

/* css Document
*****************************************************************/
@import "../../n_common/css/_variable.css";


.location-main{
  padding-block: 32px;
  background: #c0e4f0;
  @media (width < 810px) {
    padding-block: 24px;
  }
  .location-main__ttl{
    text-align: left;
    font-family: var(--font_min);
    font-size: clamp(24px, 5.544px + 2.278vw, 42px);/*42~24(1600~810)*/
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #494544;
    @media (width < 810px) {
      font-size: min(4.53vw, 24px);/*24/530*/
    }
  }
  .location-main__img{
    margin-top: -9.75cqw;/*156/1600*/
    @media (width < 810px) {
      margin-top: -6.2cqw;
    }
    img{
      width: 100%;
      max-width: none;
    }
  }
}


.location-access{
  margin-top: 100px;
  background: #fff;
  font-family: var(--font_min);
  color: #494544;
  @media (width < 810px) {
    margin-top: 48px;
  }
}

.location-aeon{
  display: flex;
  gap: 20px 4cqw;/*64/1600*/
  @media (width < 810px) {
    flex-direction: column;
    max-width: 600px;
    margin-inline: auto;
  }
  .location-aeon__img{
    flex-shrink: 0;
    width: 47.81cqw;/*765/1600*/
    @media (width < 810px) {
      width: 100%;
    }
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .location-aeon__contents{
    text-align: left;
    flex-grow: 1;
    @media (width < 810px) {
      width: 100%;
    }
  }
  .location-aeon__ttl{
    font-size: clamp(28px, -8.911px + 4.557vw, 64px);/*64~28(1600~810)*/
    font-weight: 600;
    line-height: 1.3;
  }
  .location-aeon__txt{
    font-size: clamp(16px, 3.696px + 1.519vw, 28px);/*28~16(1600~810)*/
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    margin-top: 20px;
    @media (width < 810px) {
      margin-top: 12px;
    }
  }
  .location-aeon__route{
    font-size: clamp(24px, -8.810px + 4.051vw, 56px);/*56~24(1600~810)*/
    font-weight: 500;
    line-height: 1.1;
    .txt_number{
      font-size: 1.8em;
      color: var(--point02);
    }
    .txt_small{
      display: inline-block;
      font-size: 0.7em;
    }
  }
}

.location-place{
  text-align: left;
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 4.5cqw;/*72/1600*/
  font-family: var(--font_min);
  color: #494544;
  @media (width < 810px) {
    margin-top: 40px;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
  }
  @media (width < 500px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  >li{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }
  .location-place__img{
    img{
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: cover;
      aspect-ratio: 400 / 226;
    }
  }
  .location-place__box{
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .location-place__ttl{
    word-break: keep-all;
    font-size: clamp(20px, 7.696px + 1.519vw, 32px);/*32~20(1600~810)*/
    font-weight: 600;
    line-height: 1.3;
  }
  .location-place__route{
    font-size: clamp(20px, 7.696px + 1.519vw, 32px);/*32~20(1600~810)*/
    font-weight: 500;
    line-height: 1.1;
    .txt_number{
      font-size: 1.62em;
      color: var(--point02);
    }
    .txt_small{
      display: inline-block;
      font-size: 0.7em;
    }
  }
}

.location-map{
  margin-top: 100px;
  @media (width < 810px) {
    margin-top: 48px;
  }
  .location-map__exp{
    display: none;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    font-size: clamp(14px, 9.846px + 0.513vw, 16px);/*16~14(1200~810)*/
    margin-bottom: 24px;
    @media (width < 810px) {
      display: flex;
      margin-bottom: 16px;
    }
    &::before{
      content: "";
      display: inline-block;
      width: 2em;
      height: 2em;
      background: url("../../images/common/icon_exp.svg") center center/ contain no-repeat;
    }
  }
  .location-map__exp__txt{
    text-align: left;
    font-family: var(--font_min);
    font-weight: 500;
    color: #9a9a9b;
  }
  .location-map__img{
    max-width: 1000px;
    margin-inline: auto;
    border: 1px solid #494544;
  }
}

.location-info{
  font-family: var(--font_min);
  color: #494544;
  font-weight: 500;
  margin-top: 80px;
  padding-bottom: 120px;
  .location-info__ttl{
    font-family: var(--font_eb);
    font-optical-sizing: auto;
    font-size: clamp(20px, 7.696px + 1.519vw, 32px);/*32~20(1600~810)*/
    font-weight: 400;
  }
  .location-info__anchor{
    margin-top: 32px;
    margin-inline: auto;
    max-width: 1000px;
    font-size: clamp(15px, -12.000px + 3.333vw, 28px);/*28~15(1200~810)*/
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2.67cqw;/*32/1200*/
    @media (width < 810px) {
      gap: 20px;
    }
  }
  .location-info__anchor__item{
    width: 200px;
    @media (width < 810px) {
      width: 120px;
    }
    a{
      padding: 0.4em 0.6em;
      border-radius: 10px;
      display: block;
      background: var(--info01);
      color: #fff;
      transition: all .3s ease-out;
      font-weight: 600;
      letter-spacing: 0.1em;
      line-height: 1.4;
      @media (width < 810px) {
        border-radius: 6px;
      }
      &:hover{
        text-decoration: none;
        opacity: 0.7;
      }
    }
    &.info01{
      a{
        background: var(--info01);
      }
    }
    &.info02{
      a{
        background: var(--info02);
      }
    }
    &.info03{
      a{
        background: var(--info03);
      }
    }
    &.info04{
      a{
        background: var(--info04);
      }
    }
    &.info05{
      a{
        background: var(--info05);
      }
    }
    &.info06{
      a{
        background: var(--info06);
      }
    }
    &.info07{
      width: 360px;
      @media (width < 810px) {
        width: 220px;
      }
      a{
        background: var(--info07);
      }
    }
  }
  .location-info__inner{
    padding-top: 80px;
    text-align: left;
    @media (width < 810px) {
      padding-top: 64px;
    }
    +.location-info__inner{
      padding-top: 56px;
      @media (width < 810px) {
        padding-top: 48px;
      }
    }
    &.info02{
      .location-info__block{
        &::before{
          background-color: var(--info02);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info02);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info02);
          }
        }
      }
    }
    &.info03{
      .location-info__block{
        &::before{
          background-color: var(--info03);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info03);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info03);
          }
        }
      }
    }
    &.info04{
      .location-info__block{
        &::before{
          background-color: var(--info04);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info04);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info04);
          }
        }
      }
    }
    &.info05{
      .location-info__block{
        &::before{
          background-color: var(--info05);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info05);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info05);
          }
        }
      }
    }
    &.info06{
      .location-info__block{
        &::before{
          background-color: var(--info06);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info06);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info06);
          }
        }
      }
    }
    &.info07{
      .location-info__block{
        &::before{
          background-color: var(--info07);
        }
      }
      .location-info__category{
        .ttl_en{
          color: var(--info07);
        }
      }
      .location-info__list{
        >li{
          &::before{
            background-color: var(--info07);
          }
        }
      }
    }
  }
  .location-info__block{
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
    @media (width < 810px) {
      margin-bottom: 20px;
    }
    &::before{
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: var(--info01);
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 -50%;
      z-index: -1;
    }
  }
  .location-info__category{
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    background: #fff;
    padding-right: 12px;
    @media (width < 810px) {
      padding-right: 10px;
    }
    @media (width < 500px) {
      flex-direction: column;
      align-items: flex-start;
    }
    .ttl_en{
      display: inline-block;
      font-family: var(--font_eb);
      font-optical-sizing: auto;
      font-size: clamp(18px, 11.848px + 0.759vw, 24px);
      font-weight: 400;
      line-height: 1.2;
      padding-right: 16px;
      color: var(--info01);
      @media (width < 810px) {
        padding-right: 12px;
      }
      &:first-letter{
        font-size: 1.2em;
      }
    }
    .ttl_jp{
      display: inline-block;
      font-size: clamp(15px, 11.924px + 0.38vw, 18px);/*18~15(1600~810)*/
      font-weight: 500;
      letter-spacing: 0.1em;
      padding-left: 16px;
      position: relative;
      @media (width < 810px) {
        padding-left: 12px;
      }
      &::before{
        content: "";
        display: inline-block;
        width: 1px;
        height: 1em;
        background: #494544;
        position: absolute;
        top: 50%;
        left: 0;
        translate: 0 -50%;
      }
    }
  }
  .location-info__contents{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 6%;/*72/1200*/
    @media (width < 810px) {
      grid-template-columns: repeat(1, 1fr);
    }
  }
  .location-info__list{
    font-size: clamp(14px, 7.848px + 0.759vw, 20px);/*20~14(1600~810)*/
    line-height: 1.4;
    >li{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px 1em;
      padding-left: 1.2em;
      position: relative;
      z-index: 1;
      margin-top: 8px;
      &::before{
        content: "";
        display: inline-block;
        width: 0.9em;
        height: 0.9em;
        background: var(--info01);
        position: absolute;
        top: 0.35em;
        left: 0;
      }
      &::after{
        content: "";
        display: block;
        width: calc(100% - 1.4em);
        height: 1px;
        background: url("../../images/location/line_dot.svg") left center/ auto 100% repeat-x;
        position: absolute;
        bottom: 0.55em;
        right: 0;
        z-index: -1;
      }
      &:first-of-type{
        margin-top: 0;
      }
    }
  }
  .location-info__name{
    display: inline-block;
    padding-right: 0.5em;
    background: #fff;
  }
  .location-info__box{
    display: inline-flex;
    background: #fff;
    inline-size: fit-content;
    margin: 0 0 0 auto;
    padding-left: 0.5em;
  }
  .location-info__route{
    width: 5.5em;
    display: inline-flex;
    justify-content: space-between;
  }
  .location-info__note{
    text-align: right;
    width: 5.8em;
  }
}

.second-comments{
  .second-comments__wrap{
    max-width: 1400px;
  }
}