/* ==========================================================================
   アクセスページ（page-access.php）
   見出し → 会社概要（項目＋地図）→ ボタン

   背景の帯は置かず、ページの地色のまま。区切りは余白と罫線だけで作る。
   ========================================================================== */

.access {
  padding: 0 0 var(--space-3xl);
}


/* --------------------------------------------------------------------------
   ページ見出し
   衣装一覧・撮影レポートの見出しと同じ形
   -------------------------------------------------------------------------- */

.access__head {
  text-align: center;
  padding: var(--space-3xl) var(--space-md) var(--space-xl);
}

.access__en {
  display: block;
  font-family: var(--font-en);
  font-size: 0.9375rem;
  letter-spacing: 0.26em;
  color: var(--color-secondary);
  text-transform: uppercase;
}

.access__title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(1.5rem, 4vw, 1.75rem);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
  color: var(--color-text);
}

.access__lead {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--space-sm) auto 0;
  line-height: 2;
  max-width: 36rem;
}

.access__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}


/* --------------------------------------------------------------------------
   セクション見出し（会社概要）
   -------------------------------------------------------------------------- */

.access-sec__head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.access-sec__en {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 0.35em;
}

.access-sec__title {
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: 0.08em;
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   会社概要
   -------------------------------------------------------------------------- */

.access-company {
  padding: var(--space-xl) 0 0;
}

.access-dl {
  max-width: 44rem;
  margin: 0 auto;
  border-top: 1px solid var(--color-border-soft);
}

.access-dl__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 0 var(--space-lg);
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--color-border-soft);
}

.access-dl__dt {
  font-family: var(--font-jp);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-muted);
  margin: 0;
}

.access-dl__dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.9;
  color: var(--color-text);
  /* 数字は --font-en を使わない。オールドスタイル数字で高さがそろわないため。 */
  font-family: var(--font-sans);
}


/* --------------------------------------------------------------------------
   地図
   会社概要の表と同じ幅にそろえる。表と地図でひとかたまりに見せたいので、
   ページ幅いっぱいには広げない。
   高さは 16:9。読み込み前でも場所が確保されるよう aspect-ratio で持たせる。
   -------------------------------------------------------------------------- */

.access-map {
  max-width: 44rem;
  margin: var(--space-xl) auto 0;
}

.access-map__frame {
  position: relative;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.access-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.access-map__link {
  margin: 0.6rem 0 0;
  text-align: right;
  font-size: var(--fs-xs);
}

.access-map__link a {
  color: var(--color-accent);
}

.access-map__link a:hover {
  color: var(--color-secondary);
}


/* --------------------------------------------------------------------------
   ページ下部のボタン（衣装詳細・撮影レポートと同じ形）
   -------------------------------------------------------------------------- */

.access__cta {
  text-align: center;
  margin-top: var(--space-3xl);
}

.access__cta a {
  display: inline-block;
  padding: 0.875rem 3.5rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-family: var(--font-jp);
  font-size: 0.8125rem;
  letter-spacing: 0.15em;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.access__cta a:hover {
  background-color: var(--color-primary);
  color: var(--color-bg);
}


/* ==========================================================================
   レスポンシブ
   ========================================================================== */

@media (max-width: 768px) {

  .access-map__frame {
    /* 横長すぎると地図が読み取りにくいので、スマホでは正方形に近づける */
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 600px) {

  .access-dl__row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}