/**
 * Section CSS: ACCESS セクション
 * Page   : Contact
 * Order  : 1
 * Block  : acs-s01
 */

/* ================================================================
   SECTION-SCOPED CSS CUSTOM PROPERTIES
   Naming: --acs-s01-{property}
   ================================================================ */
:root {
    /* --- Colors --- */
    --acs-s01-color-bg:              #FDF2F8;
    --acs-s01-color-title:           #831843;
    --acs-s01-color-label:           #9CA3AF;   /* ラベル: 薄いグレー */
    --acs-s01-color-value:           #9CA3AF;   /* 値テキスト: グレー */
    --acs-s01-color-phone-link:      #9CA3AF;
    --acs-s01-color-phone-hover:     #831843;
    --acs-s01-color-map-bg:          #1A1A1A;   /* マップ読み込み前の背景 */
    --acs-s01-color-focus:           #8B5CF6;

    /* --- Typography --- */
    --acs-s01-font-family-display:   'Playfair Display', Georgia, serif;
    --acs-s01-font-family-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --acs-s01-font-size-title:       clamp(2rem, 5vw, 3.5rem);
    --acs-s01-font-size-label:       0.6875rem;   /* 11px */
    --acs-s01-font-size-value:       1rem;         /* 16px */
    --acs-s01-line-height-value:     1.75;
    --acs-s01-letter-spacing-title:  0.12em;
    --acs-s01-letter-spacing-label:  0.12em;

    /* --- Spacing --- */
    --acs-s01-section-padding-top:       40px;
    --acs-s01-section-padding-bottom:    96px;
    --acs-s01-section-padding-x-mobile:  24px;
    --acs-s01-section-padding-x-desktop: 64px;
    --acs-s01-header-margin-bottom:      48px;
    --acs-s01-content-gap:               48px;
    --acs-s01-info-item-gap:             32px;
    --acs-s01-label-value-gap:           8px;

    /* --- Grid --- */
    --acs-s01-max-width:             1200px;
    --acs-s01-map-col-width:         480px;   /* デスクトップ: マップ固定幅 */

    /* --- Map --- */
    --acs-s01-map-height-mobile:     260px;
    --acs-s01-map-height-desktop:    340px;
    --acs-s01-map-border-radius:     4px;
}


/* ================================================================
  SECTION BASE — .acs-s01
  ================================================================ */
.acs-s01 {
    background-color: var(--acs-s01-color-bg);
    padding-top: var(--acs-s01-section-padding-top);
    padding-bottom: var(--acs-s01-section-padding-bottom);
    padding-left: var(--acs-s01-section-padding-x-mobile);
    padding-right: var(--acs-s01-section-padding-x-mobile);
}

@media (width >= 768px) {
    .acs-s01 {
        padding-left: var(--acs-s01-section-padding-x-desktop);
        padding-right: var(--acs-s01-section-padding-x-desktop);
    }
}


/* ================================================================
  SECTION HEADER — "ACCESS" タイトル
  ================================================================ */
.acs-s01__header {
    text-align: center;
    margin-bottom: var(--acs-s01-header-margin-bottom);
}

.acs-s01__header-inner {
    max-width: var(--acs-s01-max-width);
    margin-left: auto;
    margin-right: auto;
}

.acs-s01__title {
    font-family: var(--acs-s01-font-family-display);
    font-size: var(--acs-s01-font-size-title);
    font-weight: 600;
    font-style: italic;
    letter-spacing: var(--acs-s01-letter-spacing-title);
    color: var(--acs-s01-color-title);
    line-height: 1.1;
}


/* ================================================================
  CONTENT WRAPPER + GRID
  Mobile : 縦並び（情報 → マップ）
  Desktop (≥ 768px): 左カラム(情報) | 右カラム(マップ)
  ================================================================ */
.acs-s01__content-wrapper {
    max-width: var(--acs-s01-max-width);
    margin-left: auto;
    margin-right: auto;
}

.acs-s01__content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--acs-s01-content-gap);
}

@media (width >= 768px) {
    .acs-s01__content-grid {
        /* 左: 情報カラム(残りスペース) / 右: マップカラム(固定幅) */
        grid-template-columns: 1fr var(--acs-s01-map-col-width);
        align-items: center;
    }
}


/* ================================================================
  LEFT COLUMN — 店舗情報
  ================================================================ */
.acs-s01__info-col {
    display: flex;
    flex-direction: column;
    gap: var(--acs-s01-info-item-gap);
}


/* ================================================================
  INFO ITEM — dl > dt + dd ペア
  ================================================================ */
.acs-s01__info-item {
    display: flex;
    flex-direction: column;
    gap: var(--acs-s01-label-value-gap);
}

/* ラベル (ADDRESS / STATION 等)
  デザイン: 小さい / グレー / 大文字スペーシング
*/
.acs-s01__info-label {
    font-family: var(--acs-s01-font-family-body);
    font-size: var(--acs-s01-font-size-label);
    font-weight: 400;
    letter-spacing: var(--acs-s01-letter-spacing-label);
    color: var(--acs-s01-color-label);
    text-transform: uppercase;
    line-height: 1.4;
}

/* 値テキスト (住所・電話番号等)
  デザイン: 通常サイズ / グレー
*/
.acs-s01__info-value {
    font-family: var(--acs-s01-font-family-body);
    font-size: var(--acs-s01-font-size-value);
    font-weight: 300;
    color: var(--acs-s01-color-value);
    line-height: var(--acs-s01-line-height-value);
}

/* 電話番号リンク */
.acs-s01__phone-link {
    color: var(--acs-s01-color-phone-link);
    text-decoration: none;
    transition: color 240ms ease;
}

.acs-s01__phone-link:hover {
    color: var(--acs-s01-color-phone-hover);
}

.acs-s01__phone-link:focus-visible {
    outline: 2px solid var(--acs-s01-color-focus);
    outline-offset: 2px;
    border-radius: 1px;
}


/* ================================================================
  RIGHT COLUMN — Google マップ
  ================================================================ */
.acs-s01__map-col {
    width: 100%;
}

/* マップラッパー: 高さを固定してiframeを内包 */
.acs-s01__map-wrapper {
    position: relative;
    width: 100%;
    height: var(--acs-s01-map-height-mobile);
    border-radius: var(--acs-s01-map-border-radius);
    overflow: hidden;

    /* マップ読み込み前の背景色 */
    background-color: var(--acs-s01-color-map-bg);
}

@media (width >= 768px) {
    .acs-s01__map-wrapper {
        height: var(--acs-s01-map-height-desktop);
    }
}

/* Google マップ iframe */
.acs-s01__map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}


/* ================================================================
  FOCUS-VISIBLE — インタラクティブ要素
  ================================================================ */
.acs-s01 a:focus-visible {
    outline: 2px solid var(--acs-s01-color-focus);
    outline-offset: 2px;
}