@charset "utf-8";
html {
  scroll-behavior: smooth;
}
.shop {
  padding: 40px 0 120px;
}
.shop__container {
  display: flex;
  position: relative;
}
.side {
      position: absolute;
    height: 100%;
    width: 27%;
    padding-left: clamp(2.5rem, -11.833rem + 29.86vw, 24rem);
}
.shop__left {
      position: sticky;
    height: fit-content;
    top: 180px;
}
.shop-left__header {
      font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
    font-weight: 500;
    color: #C7081C;
}
.shop-left__box {
      margin-top: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    display: flex;
    flex-direction: column;
    row-gap: clamp(2.25rem, 2.083rem + 0.35vw, 2.5rem);
    border-left: 2px solid #000;
    padding-left: clamp(1.625rem, 1.375rem + 0.52vw, 2rem);
}
.shop-left__link {
  width: clamp(5.625rem, 3.958rem + 3.47vw, 8.125rem);
      font-size: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    font-weight: 600;
    transition: all 0.5s;
  position: relative;
}
.shop-left__link:hover {
  color: #DD0000;
}
.shop-left__link:after {
      content: '';
    width: clamp(0.5rem, 0.25rem + 0.52vw, 0.875rem);
    height: clamp(0.5rem, 0.25rem + 0.52vw, 0.875rem);
    border: 0;
    border-bottom: solid 3px #DD0000;
    border-right: solid 3px #DD0000;
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 0;
}
.shop__right {
  width: 100%;
}
.message {
      padding: 0 clamp(15rem, -4.25rem + 40.1vw, 43.875rem);
    padding-right: clamp(2.813rem, -11.313rem + 29.43vw, 24rem);
    padding-top: 154px;
    padding-bottom: clamp(5rem, 3.333rem + 3.47vw, 7.5rem);
    margin-top: -154px;
}
.message__content {
  margin-top: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
}
.message__title {
      font-size: clamp(1.125rem, 0.875rem + 0.52vw, 1.5rem);
    font-weight: 600;
}
.message__text {
      margin-top: clamp(1.25rem, 0.417rem + 1.74vw, 2.5rem);
    line-height: 1.7;
    font-weight: 400;
}
.message__text strong {
      background: linear-gradient(transparent 70%, rgba(199,8,28,0.6) 70%);
    background-repeat: no-repeat;
    background-size: 0%;
  font-weight: 400;
    animation: underLine 2s ease 0.5s forwards;
    animation-delay: 0.5s;
}
@keyframes underLine {
    100% {
        background-size: 100%;
    }
}
.message__company {
      margin-top: clamp(2.5rem, 1.667rem + 1.74vw, 3.75rem);
    font-weight: 500;
}
.message__bottom {
      margin-top: 16px;
    display: flex;
    align-items: baseline;
    column-gap: 1em;
}
.message__position {
      font-weight: 500;
}
.message__name {
      font-size: 24px;
    font-weight: 600;
}

.information {
      padding: 0 clamp(15rem, -4.25rem + 40.1vw, 43.875rem);
    padding-right: clamp(2.813rem, -11.313rem + 29.43vw, 24rem);
    padding-top: clamp(7.375rem, 5.875rem + 3.13vw, 9.625rem);
    padding-bottom: clamp(5rem, 3.333rem + 3.47vw, 7.5rem);
    background-color: #F7F7F7;
}
.information__items {
      margin-top: 40px;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}
.information__item {
      display: flex;
    column-gap: 8px;
}
.information-item__left {
      padding: clamp(0.5rem, 0.167rem + 0.69vw, 1rem) 20px;
    background-color: #C7081C;
    color: #fff;
    font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
    font-weight: 700;
    width: 145px;
  min-width: 145px;
}
.information-item__right {
      padding: clamp(0.5rem, 0.167rem + 0.69vw, 1rem) 20px;
    background-color: #fff;
    font-weight: 700;
  width: 100%;
}
.info__bottom {
  margin-top: 40px;
}
.info-box__title {
      font-size: 16px;
    font-weight: 700;
}
.info__box {
      margin-top: 16px;
    display: flex;
    column-gap: clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem);
}
.main {
  width: 64%;
}
.info-box__left {
    height: auto;
    aspect-ratio: 532/368;
    object-fit: cover;
}
.thumbnail {
    width: 36%;
}
.thumbnail > div {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: fit-content;
    row-gap: clamp(0.75rem, 0.333rem + 0.87vw, 1.375rem);
}
.thumbnail > div > div >img {
      height: auto;
    aspect-ratio: 130/88;
    object-fit: cover;
}

.access {
      padding: 0 clamp(15rem, -4.25rem + 40.1vw, 43.875rem);
    padding-right: clamp(2.813rem, -11.313rem + 29.43vw, 24rem);
    padding-top: clamp(7.375rem, 5.875rem + 3.13vw, 9.625rem);
    padding-bottom: 120px;
  margin-bottom: -120px;
}
.google-map {
  width: 100%;
  margin-top: 20px;
}
.google-map iframe {
      width: 100%;
    height: clamp(18.75rem, 14.208rem + 9.46vw, 25.563rem);
    border: none;
}
.access__items {
      margin-top: clamp(1.5rem, 0.833rem + 1.39vw, 2.5rem);
    display: flex;
    flex-direction: column;
    row-gap: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
}
.access__item {
      padding-bottom: clamp(2rem, 1.667rem + 0.69vw, 2.5rem);
    border-bottom: 1px solid #707070;
}
.access-item__header {
      display: flex;
    column-gap: clamp(1rem, 0.833rem + 0.35vw, 1.25rem);
    align-items: center;
}
.access-item-header__icon {
      width: clamp(1.813rem, 1.563rem + 0.52vw, 2.188rem);
    object-fit: contain;
}
.access-item-header__title {
      font-size: 16px;
    font-weight: 700;
}
.access-item__text {
      margin-top: clamp(0.25rem, 0.52vw, 0.625rem);
    padding-left: clamp(2.813rem, 2.396rem + 0.87vw, 3.438rem);
    font-size: 16px;
    font-weight: 400;
}
.access-item__content {
      margin-top: 20px;
    display: flex;
    align-items: center;
    column-gap: clamp(0.625rem, 0.208rem + 0.87vw, 1.25rem);
    width: 80%;
  min-width: 460px;
}
.access-item-content__box {
  width: 48%;
}
.access-item-content-box__text {
      font-size: clamp(0.75rem, 0.583rem + 0.35vw, 1rem);
    font-weight: 400;
}
.access-item-content-box__img {
      margin-top: 4px;
    height: auto;
    aspect-ratio: 307/199;
    object-fit: cover;
}
.access-item-content__arrow {
      width: 0;
    height: 0;
    border-style: solid;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 16px solid #c7081c;
    border-right: 0;
}
.access-item-content__img {
  margin-top: 20px;
      width: 56%;
    height: auto;
    aspect-ratio: 464/301;
    object-fit: cover;
}



@media (max-width: 767px) {
  .shop__container {
        flex-direction: column;
    row-gap: 64px;
  }
  .side {
        position: unset;
    width: 100%;
    padding-left: 20px;
  }
  .shop__left {
        position: unset;
    width: 100%;
    padding-left: 20px;
  }
  .shop__right {
    width: 100%;
  }
  .shop__right {
    width: 100%;
  }
  .message {
        padding-left: 20px;
    padding-right: 20px;
    padding-top: 72px;
    margin-top: -72px;
  }
  .information {
        padding-left: 20px;
    padding-right: 20px;
    padding-top: 72px;
  }
  .information__item {
        flex-direction: column;
    row-gap: 4px;
  }
  .information-item__left,
  .information-item__right {
    width: 100%;
  }
  .info__box {
        flex-direction: column;
    row-gap: 8px;
  }
  
  .main {
    width: 100%;
  }
  .thumbnail {
    width: 100%;
  }
  .thumbnail > div {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .access {
        padding-left: 20px;
    padding-right: 20px;
    padding-top: 72px;
  }
  .google-map iframe {
    height: clamp(13.313rem, 7.688rem + 23.08vw, 18.75rem);
  }
  .access-item__content {
        flex-direction: column;
    row-gap: 20px;
    width: 100%;
    min-width: unset;
  }
  .access-item-content__box {
    width: 100%;
  }
  .access-item-content-box__text {
    font-size: 16px;
  }
  .access-item-content__arrow {
    transform: rotate(90deg);
  }
  .access-item-content__img {
    width: 100%;
  }
}

@media (max-width: 389px) {
  .access-item__text {
    font-size: 14px;
  }
  .access-item-content-box__text {
    font-size: 14px;
  }
}