@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 TOP — access セクション
   デザイン基準: design_access.png（1x 1440×734 / 2xマスター実測）
   ========================================================== */

/* 【2026-09-01 A-1/T-22・C-2】カンプのACCESS帯は淡青ウォッシュ（旧実装は #FAFAFA）。
   実測（左右ガター平均）: 上端 (222,237,248) → 下端 (178,216,245)。
   ※地図画像そのものの配色（カンプ=青緑ティール／実装=グレー）は素材差し替えが必要なため
     本タスクでは未対応（A-2 の入稿待ち）。 */
/* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
.access {
  background: transparent;
}

.access__inner {
  position: relative;
  max-width: var(--width-canvas); /* 1440px */
  margin: 0 auto;
  height: 734px;
}

/* ---- 地図（背景・中部地方の経路図） ---- */
.access__map {
  position: absolute;
  z-index: 0;               /* 見出し・カードの背面に置く */
  /* 【2026-09-02 A-1c/top R2】地図の寸法・位置をカンプ実測に合わせた。
     カンプ（comp/top_pc.png）の陸地(#98c5c9)の外接矩形: x268-1336（幅1068）/ y6970-7782（高さ812）。
     素材 img/access_map.webp の不透明域は x21-1924（幅1904）/ y0-1467（高さ1468）。
     幅基準 s=0.561・高さ基準 s=0.553 の中間 s=0.557 を採り
       width  = 1940 × 0.557 = 1080.6 → 陸地幅 1060（カンプ比 −8）
       height = 1468 × 0.557 =  817.7 → 陸地高 818（カンプ比 +6）
     左端 = 268 − 21×0.557 = 256.3 ／ 上端 = 6970（.access__inner 上端 7046.6 基準で −76.6）。
     旧値 left:376 / 970×734 では陸地が x386-1338・y7047-7781 ＝ カンプより
     幅で 116px 小さく上端が 77px 低かった。 */
  /* 【2026-09-03 A-1c/top R3】R2の値（left256.3 / 1080.6×817.7）は「陸地の外接矩形」を
     色マスクで測った推定だったが、カンプ上端付近の別要素を拾って左端を誤測していた。
     R3では素材と一致する固有形状＝岐阜県の黄土色ハイライトで実測し直した。
       素材 access_map.webp（1940×1468）の暖色画素: n=84624・重心 (803.93, 808.47)
       カンプ comp/top_pc.png の暖色画素:            n=21384・重心 (777.7, 7452.5)
       実装 R2 の暖色画素:                          n=26213・重心 (703.8, 7420.2)
     面積比→倍率は 実装で √(26213/84624)=0.55656（真値0.55701・誤差0.08%）と検証でき、
     同じ補正をかけて カンプ倍率 s=0.50309 → 幅 1940s=976.0 ／ 高さ 1468s=738.5。
     位置は 重心 − s×素材重心 → 左端 373.3（絶対）・上端 7045.8（絶対）。
     .access__inner の上端が絶対 7046.5 なので top:-0.7px。 */
  top: -0.7px;
  left: 373.3px;
  width: 976px;
  height: 738.5px;
}

/* ---- 見出し ---- */
/* 【2026-09-01 A-1/T-20】カンプ ink 左端 x122（下のカード左端 x120 と揃う）／
   旧実装 x86（left:84・カードの x117 と揃っていない）。 */
.access__en {
  font-weight: 400;
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 79px;
  color: var(--color-primary);
  font-size: 53.57px;       /* 【2026-09-02 A-1c】spec実値（旧46.8px） */
  line-height: 1;
  letter-spacing: -0.015em; /* spec実値（旧0） */
}

.access__label {
  position: absolute;
  z-index: 1;
  /* 見出しを +36px 移動したぶん、和文ラベルも同量ずらす（カンプ ink x263） */
  left: 260px;
  top: 95px;
  color: var(--color-text); /* spec #2d2d2d（旧#78837d） */
  font-size: 17px;          /* spec実値（旧14.4px） */
  line-height: 1;
  letter-spacing: 0.11em;   /* spec実値（旧0.1em） */
}

/* ---- 左カラム：所要時間カード3枚 ---- */
.access__cards {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 175px;
}

.access__card {
  display: flex;
  align-items: center;
  width: 420px;
  height: 100px;
  padding-left: 28px;
  background: var(--color-white);
  border-radius: 4px;
}

.access__card + .access__card {
  margin-top: 8.5px; /* spec: カード段ピッチ108.5 = 高さ100 + 8.5 */
}

.access__pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 98.6px;            /* 【2026-09-02 A-1c】spec図形 98.6×32.5 */
  height: 32.5px;
  border-radius: 16.25px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 17px;          /* spec実値（旧14.4px） */
  letter-spacing: 0.11em;   /* spec実値（旧0） */
  line-height: 1;
}

.access__time {
  margin-left: 16px;        /* spec: 所要時間ink左端 x262.6 */
  color: var(--color-text);
  font-size: 17px;          /* spec実値（旧16.2px） */
  letter-spacing: 0.07em;   /* spec実値（旧0） */
  line-height: 1;
}

/* ==========================================================
   SP（〜768px）: spec_sp_access_footer.json 実測準拠
   見出し（絶対配置のまま座標だけSP値）→カード→地図（フッターに密着）
   ========================================================== */
@media (max-width: 768px) {
  /* 【2026-09-02 A-1c/top】旧・グラデ近似は撤去。ウォッシュは main::before の画像タイル。 */
  .access {
    background: transparent;
  }

  .access__inner {
    max-width: none;
    height: auto;
    /* 【2026-09-02 A-1c/top R2】padding-bottom 0→52。カンプはボタン下端8398から
       フッター上端8450まで52pxのウォッシュが入る（comp/top_sp.png 列走査 x=5: 8450で青帯）。
       旧実装はボタン下端＝フッター上端で、この52pxが無かった。 */
    padding: 79.5px 20px 52px; /* 見出しは絶対配置＝カード上端79.5(=8009-7929.5) */
  }

  .access__en {
    left: 31.5px;
    top: 33px;
    font-size: 34.19px;       /* 【2026-09-02 A-1c】spec実値（旧30.8px） */
    letter-spacing: -0.015em; /* spec実値 */
  }

  .access__label {
    left: 117px;
    top: 41.5px;
    font-size: 15px;          /* spec実値（旧12.7px） */
  }

  .access__cards {
    position: static;
  }

  .access__card {
    width: 100%;
    height: 56px;
    padding-left: 23px;
    border-radius: 3px; /* カンプ実測2-3px */
  }

  .access__pill {
    width: 83.1px;      /* spec図形 83.1×27.4 */
    height: 27.4px;
    border-radius: 13.7px;
    font-size: 14.33px; /* 【2026-09-02 A-1c】spec実値（旧12px） */
  }

  .access__time {
    margin-left: 11px;  /* spec: 所要時間ink左端 x140.2 */
    font-size: 14.33px; /* spec実値（旧13.6px） */
  }

  .access__map {
    position: static;
    display: block;
    width: calc(100% + 35px); /* 左5px/右0px flush（padding20を突き抜け） */
    max-width: none; /* base.cssのimg{max-width:100%}を解除 */
    height: auto;
    /* 【2026-09-02 A-1c/top R2】上マージン 27.5→4。カンプは3枚目カード下端(8034)の
       直後から地図が始まる（comp/top_sp.png 列走査 x=350: カード下端8034／陸地 8042〜）。
       PCと違いSPの地図サイズはカンプ一致（陸地幅 実装381.8 / カンプ376）なので寸法は据え置き。 */
    margin: 4px -20px 0 -15px;
  }
}

/* ---- 【2026-08-01】アクセスを見る ボタン（news/experience と同じ体裁） ----
   このセクションは .access__inner(高さ734px) の中を全部 absolute で組んでいるため、
   ボタンも absolute で置く（flowに入れるとセクション先頭に出てしまう）。
   左端はカード(left:120px)に揃え、3枚目のカード下端(≒491px)の下に配置する。 */
.access__more {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 545px;
}
.access__more-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 70px; /* spec図形 300×70 */
  /* 【2026-09-01 A-1/C-1】2026-08-02の暫定対処（#0081DF→#0D62A3）は撤去。
     カンプのアクセント #165CE2 は白文字 5.73:1 で基準を満たすため primary に一本化。 */
  background: var(--color-primary);
  border-radius: 6px;
  color: var(--color-white);
}
.access__more-text {
  font-size: 17px;        /* 【2026-09-02 A-1c】spec実値（旧15.3px） */
  letter-spacing: 0.05em; /* spec実値（旧0.1em） */
}
.access__more-icon {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-primary);
}
.access__more-icon svg { width: 14px; height: 14px; stroke: currentColor; }

@media (max-width: 768px) {
  /* SPは .access__inner が通常フローに戻る（地図が static）ので、ボタンもフローで置く */
  /* 【2026-09-02 A-1c/top R2】上マージン 27.5→7。カンプのボタン上端は y8338
     （comp/top_sp.png 列走査 x=200 で 8338 から #165ce2）＝地図の陸地下端 8336 のすぐ下。
     修正前の実装は 8382.1（DOM実測）で +44 低かった。 */
  .access__more { position: static; margin: 7px auto 0; }
  .access__more-btn { width: 265px; height: 60px; margin: 0 auto; }
  .access__more-text { font-size: 16px; } /* 【2026-09-02 A-1c】spec実値（旧14px） */
}

/* 【2026-09-16 打ち合わせ反映】3都市カードの上に「主なアクセス（車）」の小ラベル。
   カードは絶対配置（x120 / y175）なので、その上 y146 に置く。SP はカードが static なので流し込み */
.access__sublabel {
  position: absolute;
  z-index: 1;
  left: 120px;
  top: 146px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}
@media (max-width: 768px) {
  .access__sublabel { position: static; display: block; margin: 0 0 8px; font-size: 12px; }
}

/* 【2026-09-17 修正】トップの地図に「飛騨ほおのき平スキー場」のピン（Googleマップ風・青）。
   位置は素材 access_map.webp（1940×1468）上の高山IC東方＝ (48%, 47.5%)。地図の配置は .access__mapwrap が引き継ぐ */
.access__mapwrap { position: absolute; z-index: 0; top: -0.7px; left: 373.3px; width: 976px; height: 738.5px; }
.access__inner .access__mapwrap .access__map { position: static; display: block; width: 100%; height: 100%; max-width: none; margin: 0; }
.access__pin { position: absolute; left: 48%; top: 47.5%; width: 44px; height: 44px; transform: translate(-50%, -100%); color: #1673e2; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }
.access__pin svg { width: 100%; height: 100%; fill: #fff; }
.access__pinlabel { position: absolute; left: 48%; top: 47.5%; transform: translate(-50%, 6px); padding: 4px 10px; border-radius: 4px; background: #1673e2; color: #fff; font-size: 13px; line-height: 1.4; letter-spacing: 0.06em; white-space: nowrap; }
@media (max-width: 768px) {
  .access__mapwrap { position: relative; top: auto; left: auto; width: calc(100% + 35px); height: auto; margin: 4px -20px 0 -15px; }
  .access__pin { width: 34px; height: 34px; }
  .access__pinlabel { font-size: 11px; padding: 3px 8px; }
}

/* 【2026-09-17 深夜3】市岡さん指示: ピンは青丸（Googleマップ風）・ラベルはロゴ */
.access__pin--dot { width: 22px; height: 22px; transform: translate(-50%, -50%); border-radius: 50%; background: #1673e2; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(22, 115, 226, 0.25); filter: none; }
.access__pinlabel--logo { display: flex; align-items: center; transform: translate(-50%, 18px); padding: 8px 14px; border-radius: 6px; background: #1673e2; }
.access__pinlabel--logo img { display: block; width: auto; height: 30px; }
@media (max-width: 768px) {
  .access__pin--dot { width: 16px; height: 16px; border-width: 2px; box-shadow: 0 0 0 4px rgba(22, 115, 226, 0.25); }
  .access__pinlabel--logo { transform: translate(-50%, 12px); padding: 5px 10px; }
  .access__pinlabel--logo img { height: 20px; }
}

/* 【2026-09-17 議事録】白カードの上下余白を詰める（PC） */
@media (min-width: 769px) {
  .access__card { height: 72px; }
}

/* 【2026-09-18】市岡さん指示: 「アクセスを見る」を少し上へ（カードを詰めた分 545→440px）／地図を少し小さく（976→850px・右端は据え置き・上下中央） */
@media (min-width: 769px) {
  .access__more { top: 440px; }
  .access__mapwrap { top: 45px; left: 499.3px; width: 850px; height: 643px; }
}
/* 【2026-09-18】市岡さん指示「戻して」: 地図の縮小（850px）を取り消し、元の 976×738.5px に戻す（ボタン位置 440px は維持） */
@media (min-width: 769px) {
  .access__mapwrap { top: -0.7px; left: 373.3px; width: 976px; height: 738.5px; }
}
/* 【2026-09-18】市岡さん指示: 地図の上端がセクションの境で切れて見えるため、地図を上の HOW TO ENJOY 側へ 230px 持ち上げてセクションをつなぐ（PC） */
@media (min-width: 769px) {
  .access { overflow: visible; }
  .access__inner { overflow: visible; }
  .access__mapwrap { top: -230px; }
}
/* 地図は HOW TO ENJOY のカードの「下」に潜らせ、カードと ACCESS 見出しの間の空きにだけ顔を出す */
@media (min-width: 769px) {
  .howto { z-index: 1; }
  .access { position: relative; z-index: 0; }
}
/* 【2026-09-18】市岡さん指示「上寄せすぎ・下の余白が目立つ」: 持ち上げを 230→80px（カード下の空きぶんだけ）にし、
   セクションの高さも 80px 詰めて地図の下端をセクション下端に合わせる */
@media (min-width: 769px) {
  .access__mapwrap { top: -80px; }
  .access__inner { height: 654px; }
}