@charset "UTF-8";
/* ===========================================
 * ----------------------------------
  Structure
  ----------------------------------
  01_head
  02_parking lists
 * ======================================== */


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

/* head */
/* ======================================== */
.c-head__bg {
  background-image: url('../img/img_parking_head.webp');
}

/* ===========================================
 * 02_sparking lists
 * ======================================== */
/* title */
/* ======================================== */
.parking {
  container-type: inline-size;
  padding-bottom: var(--spc-120-60);
}
.parking__inner {
  max-width: 900px;
}
.parking__title {
  --clamp-min: 22;
  --clamp-max: 44;
  font-weight: bold;
  color: var(--color-font-or);
  padding-bottom: var(--spc-40-20);
  text-align: center;
  &.--left {
    text-align: left;
  }
}

/* splide */
/* ======================================== */
.parking-splide {
  margin-bottom: var(--spc-40-20);
}
.splide__pagination__page.is-active {
  background: var(--color-bg);
}

.parking__image {
  padding-bottom: var(--spc-40-20);

  img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}
@container (width <= 768px) {
  .parking__image {
    padding-bottom: var(--spc-60-30);
  }
}

.parking__subtitle {
  --clamp-min: 18;
  --clamp-max: 30;
  color: var(--color-font-or);
  padding-bottom: var(--spc-20-10);
  &.--spc-wide {
    padding-bottom: var(--spc-40-20);
  }
}

.parking__text {
  --clamp-min: 16;
  --clamp-max: 20;
  line-height: 1.8;
  text-align: justify;

  &.--spc-wide {
    padding-bottom: var(--spc-40-20);
  }
  
  &.--bold {
    font-weight: bold;
  }
}

.parking__details {
  display: grid;
  align-items: center;
  gap: var(--spc-40-20);
}
.parking-table__item {
  grid-template-columns: 20% 1fr;
  align-items: center;
  &:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }
  dt {
    padding: var(--spc-4-2);
  }
  dd {
    padding-left: var(--spc-10-5);
  }
}
@container (width <= 768px) {
  .parking-table__item {
    grid-template-columns: 1fr;
  }
}
.parking__map {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* アスペクト比（16:9）を指定 */
  background-color: var(--color-bg-lgr); /* 読み込み前の背景色 */
  margin-bottom: var(--spc-20-10);

  iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
}

.parking__nearby {
  border: 1px solid var(--color-border);

  li:not(:last-child) {
    border-bottom: 1px solid var(--color-border);
  }
  li {
    padding: var(--spc-4-2) var(--spc-10-5);
  }
  
}