@charset "UTF-8";
/* ============================================================
   アクセスページ（page-access.php／スラッグ access）専用CSS
   本社・サテライトオフィスへの写真付き道順。
   元データ：johoku-access-implementation（Mさん支給の実装一式）。
   配色・寸法は元のモックのまま、色トークンだけサイトの実値に置き換えている。
   このファイルは functions.php で slug==='access' のときだけ読み込む。
   他ページとクラス名が重複しないことを確認済みなので、素のクラス名のまま使う。
   ============================================================ */

html{scroll-padding-top:24px}

/* 所在地カード（本社／サテライトオフィス） ----------------------- */
.access-locsec{background:rgba(71,170,79,.06)}

.location-nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  max-width:1180px;margin:0 auto;
}
.location-card{
  display:flex;min-width:0;padding:26px 30px 24px;flex-direction:column;
  border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:0 8px 24px rgba(39,79,38,.05);
}
/* アイコン無し。見出し→住所→徒歩◯分の1カラム、下にボタンを横並び 2026-08-29 */
/* 会社名の見出しは左寄せ（.sec h2 の text-align:center を上書き） 2026-08-29 */
.location-card h2{margin:0 0 9px;font-size:clamp(1.02rem,1.6vw,1.22rem);line-height:1.5;color:#1A1A1A;text-align:left}
.location-card address,.arrival{font-style:normal}
.location-card address{font-size:.94rem;line-height:1.65;color:#1A1A1A;text-align:left;margin:0}

.location-card__walk{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;margin-top:16px;
  color:var(--green-dark);font-weight:700;font-size:.92rem;
}
.location-card__walk svg{width:19px;height:19px;flex:0 0 auto;fill:currentColor}

/* Googleマップで見る（枠線）／〜への道のりを見る（塗り）を横並びで下段に 2026-08-29 */
.location-card__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* 2つのボタンは形・大きさを完全に揃え、白枠／緑塗りのコントラストだけで主従を出す（D案）。
   立体（押下）と浮き上がり（translateY）はサイト内で浮くのでやめ、
   ホバーは共通ボタン（style.css の .btn-primary / .btn-outline）と同じ「背景が少し濃くなる」に統一。
   2026-08-30 ユーザー指示 */
.map-link,.anchor-link{
  display:inline-flex;flex:1 1 0;min-width:160px;min-height:46px;padding:9px 18px;gap:8px;
  align-items:center;justify-content:center;border-radius:7px;text-align:center;
  font-size:.98rem;font-weight:700;text-decoration:none;
  transition:background-color .2s ease;
}
.map-link{border:1px solid var(--green);color:var(--green-dark);background:#fff}
.map-link svg,.arrival svg{width:20px;height:20px;flex:0 0 auto;fill:currentColor}
.map-link:hover{background:rgba(71,170,79,.1)}

.anchor-link{border:none;color:#fff;background:var(--green)}
.anchor-link span{display:inline-block}
.anchor-link:hover{background:var(--green-dark)}

/* 道のり（本社／サテライトオフィス） ------------------------------ */
.route-sec{scroll-margin-top:24px}
.route{
  max-width:1180px;margin:0 auto;padding:22px 16px 16px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(145deg,rgba(71,170,79,.06) 0%,#fff 46%);
  box-shadow:0 8px 24px rgba(39,79,38,.05);
}
/* アイコンと「田端駅 北口から徒歩◯分」バッジは削除。見出しのみ 2026-08-30 */
.route__header{display:flex;margin:0 8px 18px;gap:20px;align-items:center;justify-content:space-between}
.route__title{display:flex;min-width:0;gap:14px;align-items:center}
.route__title h2{margin:0;color:var(--green);font-size:clamp(1.3rem,2.5vw,1.85rem);line-height:1.4}
/* 見出し内の改行はSPだけ有効。PC・タブレットでは1行のまま 2026-08-30 */
.route__br{display:none}

.steps{display:grid;margin:0;padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none}
.step-card{
  position:relative;display:flex;min-width:0;min-height:100%;padding:16px 16px 18px;flex-direction:column;
  border:1px solid #e5e9e5;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(30,55,30,.03);
}
.step-card__number{
  position:absolute;z-index:1;top:8px;left:8px;display:grid;width:42px;height:42px;place-items:center;
  border:3px solid #fff;border-radius:50%;color:#fff;background:var(--green);
  font-size:1.2rem;font-weight:700;box-shadow:0 2px 8px rgba(42,94,39,.22);
}
.step-card img{width:100%;height:auto;aspect-ratio:1.15/1;border-radius:8px;object-fit:cover;display:block}
.step-card p{margin:15px 3px 0;line-height:1.75;color:#1A1A1A}

.arrival{
  display:flex;margin-top:14px;padding:14px 20px;gap:13px;align-items:center;
  border:1px solid #e5e9e5;border-radius:10px;background:#fff;line-height:1.6;color:#1A1A1A;
}
.arrival svg{color:var(--green)}
.arrival strong{display:block}

.access-page a:focus-visible{outline:3px solid rgba(71,170,79,.35);outline-offset:4px}

@media (max-width:900px){
  .location-nav,.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-card{padding-inline:22px}
  .route__header{align-items:flex-start;flex-direction:column}
}

@media (max-width:600px){
  .location-nav,.steps{grid-template-columns:1fr}
  .location-card{border-radius:14px}
  .location-card__actions{flex-direction:column}
  .map-link,.anchor-link{width:100%}
  .icon-disc{width:52px;height:52px}
  .icon-disc svg{width:29px;height:29px}
  .route{padding:16px 10px 10px;border-radius:14px;margin:0 4px}
  .route__header{margin-inline:4px}
  .route__br{display:inline}
  .step-card img{aspect-ratio:4/3}
}

@media (max-width:768px){
  .location-nav{margin:0 24px}
}

/* .flow の子は上下paddingが0にリセットされる仕様（style.css）。
   薄緑背景の所在地セクションだけは .company-spec と同じ考え方で
   上下に var(--gap) を確保する（style.css側の一覧は触らず、このファイル内で完結させる） */
.flow > .access-locsec{padding-top:var(--gap) !important;padding-bottom:var(--gap) !important}

/* このページはパンくずのすぐ下が薄緑の所在地セクション。
   .flow 側の padding-top（var(--gap)＝80px）が白い帯として残り不要なので、
   このページだけ解除する（薄緑セクション自身が上下に var(--gap) を持っている） 2026-08-30 */
.flow.access-page{padding-top:0}

/* ページ最下部の戻る導線。下のCTA帯に接してしまわないよう余白を自前で確保する。
   ★2026-08-30：ピル型（.jp-pill.jobs-back__btn）→ 共通パーツ template-parts/page-back.php
   （.page-back ＝ .btn.btn-primary の四角・白地に緑枠）に変更。ユーザー指示。
   ボタンの見た目の指定は style.css の `.case-back, .page-back` の1か所だけにあるので、
   ここでは「.flow の中に置いたときの余白」だけを持たせる。
   .flow > * が上下paddingを0にリセットするので、同じ詳細度以上で上書きする。
   上の余白は .flow の gap（var(--gap)）が持つため、ここは下だけ確保する。 */
.flow > .page-back{padding:0 20px var(--gap) !important}
/* 旧・ピル型のときの指定（.access-back）。参照用に残す。
   .access-back{text-align:center;padding:0 20px var(--gap)}
   .access-back .jobs-back__btn{gap:10px;height:48px;padding:0 30px;font-size:14.5px}
   .access-back .jobs-back__btn svg — width:17px/height:17px、hoverで translateX(-3px)
   SPは height:46px / font-size:14px */