/* =========================================================
   Access page
   =======================================================*/

/* 0) Subhero variant（共通 sub-common.css を前提に最小限の上書き）
   -------------------------------------------------------- */
/* 背景は components/subhero の inline style で設定済み。
   ここではオーバーレイ濃度などのトーンだけ調整します。 */
/* .subhero--access { */
    /* フォールバック背景（image_url が無い場合の保険） */
  /* background-image: url("../img/access-hero.webp"); */

  /* オーバーレイ（sub-common.css の ::before が参照） */
  /* --subhero-overlay-from: rgba(0, 0, 0, 0.35);
  --subhero-overlay-to: rgba(0, 0, 0, 0.35); */

/* } */

/* 1) Layout -------------------------------------------------- */

.access__body {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .access__body {
    grid-template-columns: 3fr 2fr;
    align-items: start;
  }
}

/* 2) Map ----------------------------------------------------- */
.access__map-frame {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  aspect-ratio: 1 / 1; /* 正方形ベース */
}
@media (min-width: 640px) {
  .access__map-frame {
    aspect-ratio: 4 / 3;
  }
}
.access__map-iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  transition: transform 0.8s ease;
}
.access__map-frame:hover .access__map-iframe {
  transform: scale(1.06);
}

/* 3) Desc ---------------------------------------------------- */
.access__desc {
  background: url("../img/Palm-seagull.png") center/auto no-repeat;
  padding: clamp(12px, 2.5vw, 20px);
  color: #333;
  font-size: 16px; /* モバイルのvw拡大を避ける */
}
.access__block {
  margin-bottom: 24px;
}
.access__block-title {
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid #b4b4b4;
  margin-bottom: 10px;
}

.access__address > div {
  line-height: 1.7;
}

.access__wayto {
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.7;
}
.access__wayto li {
  margin: 0.25em 0;
  list-style: decimal;
}
.access__note {
  color: #005b94;
  margin-top: 6px;
}

.access__tel {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 700;
}
.access__tel a {
  color: #005b94;
  text-decoration: none;
}
.access__tel a:hover {
  text-decoration: underline;
}
.access__tel-icon {
  font-size: 1.2em;
  line-height: 1;
}
.access__tel-svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.access__hours {
  color: #005b94;
  margin-top: 6px;
}

/* 4) モバイル文字サイズの自動拡大抑止 ---------------------- */
.access,
.access * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}