/* =========================================================
   p-access.css — アクセスページ固有CSS
   InDesign原稿 (access-full.png) 忠実再現
   依存: style.css のトークン・共通クラス
   ========================================================= */

.acc{
  position:relative;
  padding:34px 22px 10px;
  background:var(--cream);
}

/* ---- ページ見出し「アクセス」(1文字ずつ出現) ---- */
.acc__title{
  text-align:center;
  font-family:var(--font-r);
  color:var(--aqua);
  font-size:26px;
  letter-spacing:.24em;
  font-weight:300;
  margin:6px 0 26px;
  padding-left:.24em; /* letter-spacing 由来の右ズレを中央へ */
}

/* =========================================================
   地図
   ========================================================= */
.acc-map-wrap{
  position:relative;
  max-width:1010px;
  margin:0 auto;
}
.acc-map{
  /* 設計: 枠は細グレー線・余白ほぼ0・角丸ごく僅か・影は控えめ
     地図SVGは内部に余白(上下約14%/左右約7%)を持つため、
     枠を地図コンテンツの実比率に固定し、
     SVGを拡大して余白をクリップ＝設計の横長地図に一致させる
     設計実測(2084w): 枠 w=1683 / h=799 → aspect 2.106 */
  position:relative;
  border:1px solid #DCD3C4;
  background:#fff;
  border-radius:2px;
  padding:0;
  overflow:hidden;
  box-shadow:0 6px 22px rgba(150,140,120,.09);
  aspect-ratio:1683 / 799;        /* 設計 地図枠の実測比 */
}
.acc-map img{
  position:absolute;
  top:50%;
  left:50%;
  width:115.8%;                   /* SVG内 地図コンテンツ(横86.4%)を枠幅いっぱいに */
  height:auto;
  transform:translate(-50%,-50%);
  display:block;
}

/* 地図脇の水彩ツリー (PCのみ) */
.acc-tree{
  position:absolute;
  pointer-events:none;
  display:none;
  z-index:2;
}
.acc-tree--l{
  width:78px;
  left:-104px;
  top:46%;
  animation:floaty 7s ease-in-out infinite;
}
.acc-tree--r{
  width:84px;
  right:-110px;
  bottom:2%;
  animation:floaty 6.4s ease-in-out .5s infinite;
}

/* =========================================================
   交通情報リスト
   ========================================================= */
.acc-info{
  max-width:880px;
  margin:38px auto 0;
}
.acc-block{
  padding:6px 4px;
}
.acc-label{
  font-family:var(--font-r);
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.acc-text{
  font-size:14px;
  color:var(--ink);
  line-height:1.95;
  letter-spacing:.06em;
}
.acc-text--tel{
  display:flex;
  align-items:center;
  gap:4px;
}
.acc-text--tel svg{
  width:14px;height:14px;
  color:var(--ink);
  flex-shrink:0;
}

/* Google Map ピル */
.acc-gmap{
  display:inline-flex;
  align-items:center;justify-content:center;
  margin-top:14px;
  min-width:200px;
  padding:9px 30px;
  background:var(--aqua-btn);
  color:#fff;
  font-family:var(--font-r);
  font-weight:500;
  font-size:15px;
  letter-spacing:.14em;
  border-radius:30px;
  transition:transform .4s var(--ease-soft),background .4s,box-shadow .4s;
}
.acc-gmap:hover{
  transform:scale(1.02);
  background:var(--aqua-btn-d);
  box-shadow:0 6px 18px rgba(143,209,225,.4);
}
.acc-gmap:active{transform:scale(.98)}

/* dots 区切りは style.css の .dots を使用 (clip-path ワイプ対象) */
.acc-info .dots{
  margin:18px 0;
}

/* =========================================================
   ここよこ (横須賀の魅力)
   ========================================================= */
.acc-yoko{
  text-align:center;
  margin:64px auto 0;
  max-width:880px;
}
.acc-yoko__btn{
  display:inline-flex;
  align-items:center;justify-content:center;
  padding:12px 34px;
  background:var(--aqua-btn);
  color:#fff;
  font-family:var(--font-r);
  font-weight:500;   /* 先方指摘: 学園の様子の同ボタン(weight500)に合わせる */
  font-size:16px;
  letter-spacing:.08em;
  border-radius:30px;
  box-shadow:0 4px 12px rgba(143,209,225,.35);
  transition:transform .45s var(--ease-soft),background .45s,box-shadow .45s;
}
.acc-yoko__btn:hover{
  transform:scale(1.02);
  background:var(--aqua-btn-d);
  box-shadow:0 8px 22px rgba(116,194,214,.5);
}
.acc-yoko__btn:active{transform:scale(.99)}
.acc-yoko__sub{
  margin-top:16px;
  font-family:var(--font-r);
  font-size:14px;
  color:var(--ink2);
  letter-spacing:.06em;
  line-height:1.9;
}


/* =========================================================
   SP (〜859px)
   ========================================================= */
@media (max-width:859px){
  .acc{padding:28px 20px 10px}
  .acc__title{font-size:24px;letter-spacing:.22em;margin:4px 0 20px;padding-left:.22em}
  .acc-map{padding:8px}
  .acc-info{margin-top:26px}
  .acc-label{font-size:14px}
  .acc-text{font-size:13px}
  .acc-gmap{font-size:14px;min-width:180px;padding:8px 26px}
  .acc-yoko{margin-top:46px}
  .acc-yoko__btn{font-size:14.5px;padding:11px 24px;max-width:calc(100% - 24px)}
  .acc-yoko__sub{font-size:13px}
}

/* =========================================================
   PC (860px〜) — InDesign原稿 忠実再現
   ・基準: 設計 2084px幅 → 描画 1389px幅 (scale .6665)
   ・地図 幅72.2% / 本文列 左端30.2%・幅39.7%・左寄せ
   ・点線セパレータは全幅(設計 3〜91.6%)
   ========================================================= */
@media (min-width:860px){
  .acc{padding:8px clamp(40px,5vw,90px) 20px}

  /* タイトル「アクセス」: 設計 字高52px(2084w)→render34.7px ≒ font31px,
     字幅244px(2084w)→render162px に合わせ letter-spacing を詰める。weight=Light(300)。
     設計の見出し中心は描画y≈295(ヘッダ下に余白) → 上マージン調整 */
  .acc__title{
    font-size:clamp(33px,2.74vw,38px);  /* 設計字高 render33px に合わせ微増 */
    letter-spacing:.19em;               /* 字幅 render162px に合わせ詰め */
    font-weight:300;
    margin:103px 0 81px;        /* 設計: 見出し中心r294 → 地図top r411 のギャップ */
    padding-left:.19em;
  }

  /* ---- 地図: 設計 幅80.8%(1683/2084)・余白0で枠いっぱい ----
     描画1389w換算で 1122px。aspect 2.106 で高さ533px、設計どおりの横長 */
  .acc-map-wrap{max-width:1122px}
  .acc-map{padding:0}
  .acc-map img{width:100%;height:auto}

  /* 地図脇ツリー (設計実測 1389換算):
     左=ピンク水彩 map左端に接し中心y≈630(=map上から約24%) 幅≈78px
     右=針葉樹 map右端外・中心y≈735(=map下から約20%) 幅≈95px・やや大きめ */
  .acc-tree{display:block}
  .acc-tree--l{width:78px;left:-66px;top:24%}
  .acc-tree--r{width:95px;right:-118px;bottom:20%}

  /* ---- 本文情報リスト ----
     設計: 点線セパレータは全幅(88.6%)、本文テキストは左端30.2%の左寄せ列。
     → コンテナを全幅(1230px)で中央寄せし、テキストブロックだけ左インデント。 */
  .acc-info{
    max-width:1230px;          /* 設計 点線幅 1846/2084 → 1389換算 */
    margin:0 auto;
    padding-top:0;
  }
  /* テキスト列: 設計 左端30.2%(描画≈419px)。コンテナ左端(≈79px)からのインデント */
  .acc-block{
    padding:0;
    margin-left:340px;
    max-width:600px;           /* 長行(バス ※京急〜JR衣笠駅方面)を1行に収める */
  }
  .acc-label{
    font-size:20px;            /* 設計 ラベル字高17px(1389w render)→ font20px */
    line-height:1.05;
    letter-spacing:.05em;
    margin-bottom:4px;
  }
  .acc-text{
    font-size:19px;            /* 設計 本文字高17px(1389w render)→ font19px */
    line-height:1.5;           /* 設計 行ピッチ≈29px(描画) → 29/19≈1.5 */
    letter-spacing:.01em;
    white-space:nowrap;        /* 設計通り各行を折り返さない */
  }
  .acc-text--tel{gap:7px}
  .acc-text--tel svg{width:22px;height:22px}

  /* Google Map ピル: 設計 幅358px・高さ46px(描画31px)の横長ピル */
  .acc-gmap{
    font-size:19px;
    line-height:1;
    min-width:0;
    width:240px;
    padding:7px 0;
    margin-top:12px;
    letter-spacing:.12em;
  }

  /* 点線セパレータ: 設計のブロック間ギャップを実測平均化(本文→dots / dots→ラベル
     が設計はブロック毎に非対称なため、誤差最小の対称値 28px を採用) */
  .acc-info .dots{
    max-width:none;
    width:100%;
    margin:28px auto;
  }
  /* 地図枠とのギャップ(設計 map_bot→1st dots ≈49px / 1389w) */
  .acc-info .dots:first-child{margin-top:49px}
  /* バス直後の最終 dots: 設計は本文→dots に余白多め(≈50px) */
  .acc-info .dots:last-child{margin-top:43px}

  /* ---- ここよこ(横須賀の魅力): 中央ピル 設計 幅646px(31%) ----
     最終dotsを下げた分を相殺し cocoyoko位置(設計 dots→1580)を維持 */
  .acc-yoko{margin-top:101px;max-width:none}
  .acc-yoko__btn{
    font-size:20px;
    padding:11px 0;
    width:430px;
    max-width:90%;
    letter-spacing:.04em;
  }
  .acc-yoko__sub{font-size:19px;margin-top:18px;line-height:1.7}
}