/* =========================================================
   アクセス(/access/)固有 ── 元:mock/access-v4.html
   モックの「.sched .tl の打ち消し」は、年表とのクラス名の衝突よけなので不要(曜日表は .oc-sched__tl)
   写真で見る道順(第7回)── 元:access/access-v7.html。モックの .walk〜 は .oc-walk〜、.tag は .oc-tag
     (.walk は道順の図の中の歩道と同じ名前でぶつかるため)。写真の箱・画面の端まで広げる部品は base.css
   ========================================================= */

/* ---------- 駅からの道順 ---------- */
.route-grid{margin-top:clamp(28px,4vw,40px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); column-gap:clamp(28px,4vw,56px); align-items:start}
.route-fig{background:#fff; border-radius:8px; box-shadow:0 0 0 1px rgba(33,33,33,.08); padding:12px}
/* 道順の図 */
.rmap{display:block; width:100%; height:auto; font-family:var(--gothic)}
.rmap .bld rect{fill:#F7F1E8; stroke:rgba(33,33,33,.25); stroke-width:1}
.rmap .bld .octo-b{fill:#FFF3F1; stroke:var(--red-soft); stroke-width:1.6}
.rmap .bld .bluedoor{fill:#1B2087; stroke:none; opacity:.8}
.rmap text{font-size:11px; fill:var(--ink); text-anchor:middle}
.rmap text.sm{font-size:9.5px; fill:var(--ink-soft)}
.rmap text.red{fill:var(--red-soft); font-size:10.5px}
.rmap text.w{fill:#fff}
.rmap .walk{fill:#EDEDED}
.rmap .road{fill:#9a9a9a}
.rmap .rail{stroke:#c9c9c9; stroke-width:1.2}
.rmap .stop{fill:#EDEDED}
.rmap .zebra rect{fill:#fff}
/* 道順の線(第8回):電停 → 横断歩道 → 右へ → 院の入口 を、くり返したどる(元:sample-08.html の「1」)
   ・うすい点線(.route-base):いつも見えている。動きが止まっていても道順が分かる
   ・赤い実線(.route):JS(page-access.js)が図に .loop を付けたら、たどる → 止まって見せる → すっと消える → 少し休む をくり返す(1周 4.2秒)
     JS が動かないとき・動きを減らす設定のときは、実線が最初から全部見えている
   ・入口の波紋(.goal):線が入口に着いたころ、赤い細い輪が1回広がって消える
   ・アクセスは演出なしのページだが、この線は道順を伝える情報なので例外として動かす(.oc-live。base.css の .oc-static の対象外)
   ・動かす線には !important を付けない(!important はアニメーションより強く、線が止まってしまう)
   ・図が画面に入っていないときは止める(.paused) */
.rmap .route-base{fill:none; stroke:var(--red-soft); stroke-opacity:.28; stroke-width:2; stroke-dasharray:2 5; stroke-linecap:round}
.rmap .route{fill:none; stroke:var(--red-soft); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1.02; stroke-dashoffset:0}
.rmap .goal{fill:none; stroke:var(--red-soft); stroke-width:1.5; opacity:0}
.route-fig.loop .route{animation:routeLoop 4.2s cubic-bezier(.45,.05,.35,1) .3s infinite backwards}
.route-fig.loop .goal{transform-box:fill-box; transform-origin:center; animation:goalPulse 4.2s ease-out .3s infinite}
.route-fig.loop.paused .route,.route-fig.loop.paused .goal{animation-play-state:paused}
@keyframes routeLoop{0%{stroke-dashoffset:1.02; opacity:1} 50%{stroke-dashoffset:0; opacity:1} 80%{stroke-dashoffset:0; opacity:1} 92%{stroke-dashoffset:0; opacity:0} 100%{stroke-dashoffset:1.02; opacity:0}}
@keyframes goalPulse{0%,48%{opacity:0; transform:scale(.6)} 54%{opacity:.9; transform:scale(1)} 78%{opacity:0; transform:scale(2.4)} 100%{opacity:0}}
.rmap .pin{fill:var(--red-soft)}
.rmap .busstop rect{fill:#fff; stroke:var(--blue); stroke-width:1.2}
.rmap .busstop text{font-size:9px; fill:var(--blue)}
/* 4ステップ */
.route-steps{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.route-steps li{display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:14px; align-items:start}
.route-steps .n{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1.5px solid var(--red-soft); color:var(--red-soft); font-family:var(--mincho); font-size:.86rem}
.route-steps b{display:block; font-weight:500; font-size:.98rem; line-height:1.7}
.route-steps span{display:block; font-size:.88rem; color:var(--ink-soft); line-height:1.85; margin-top:2px}
/* 第22回 Z-5:かぎかっこと助詞を離さないための .oc-nb は、上の span の指定を受けない(文字の大きさ・色は親のまま) */
.route-steps .oc-nb{display:inline; white-space:nowrap; font-size:inherit; color:inherit; line-height:inherit; margin-top:0} /* inline のまま:句読点とかぎかっこの間が空かない */
.route-steps li:nth-child(2){transition-delay:.1s} .route-steps li:nth-child(3){transition-delay:.2s} .route-steps li:nth-child(4){transition-delay:.3s}
/* 看板の目印のオクト君:40px(第11回・院長決定。トップと同じ大きさ) */
.sign-line{display:flex; align-items:center; gap:9px; margin:28px 0 0; font-size:.92rem; color:var(--ink-soft)}
.sign-line img{width:40px; height:auto}

/* ---------- 地図 ---------- */
#map .oc-map{margin-top:clamp(24px,3.5vw,36px); aspect-ratio:16/9; max-height:460px}
#map .oc-link--s{margin-top:16px}

/* ---------- バス・お車 ---------- */
#other .oc-cards2 p{color:var(--ink-soft)}

/* ---------- 営業時間 ---------- */
#hours .oc-hours{max-width:520px; margin-top:8px}
/* 営業時間の下のお電話:ひかえめな電話の形(base.css の .oc-tellink・第9回) */
.tel-line{margin:16px 0 0}
.tel-line .oc-tellink{margin-top:0}

@media (max-width:820px){ .route-grid{grid-template-columns:1fr; row-gap:24px} }
@media (max-width:720px){
  .route-fig{padding:6px; margin:0 -6px}
  .rmap text{font-size:13px}
  .rmap text.sm{font-size:11.5px}
  .rmap text.red{font-size:12px}
  .rmap .busstop text{font-size:10.5px}
  .rmap text.w{font-size:12px}
  #map .oc-map{aspect-ratio:4/3.6}
}
/* ---------- 写真で見る道順(左右交互。PC は 写真7:文5) ---------- */
.oc-walk-head{margin:clamp(64px,9vw,104px) 0 0}
.oc-walk-head h3{margin:0; font-family:var(--mincho); font-weight:500; font-size:clamp(1.2rem,1rem + .6vw,1.45rem); letter-spacing:.08em}
.oc-walk{margin-top:clamp(28px,4vw,44px); display:grid; gap:clamp(48px,7vw,88px)}
.oc-walk-row{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px,5vw,64px); align-items:center}
.oc-walk-row.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.oc-walk-row.rev .oc-walk-ph{order:2}
.oc-walk-n{display:block; font-family:var(--mincho); font-size:clamp(2.6rem,2rem + 2vw,3.6rem); line-height:1; color:var(--red); opacity:.85; margin-bottom:14px}
.oc-walk-n small{font-family:var(--gothic); font-size:.72rem; letter-spacing:.2em; color:var(--ink-soft); margin-right:10px; vertical-align:middle} /* 第18回 A25:「STEP 2」の順 */
.oc-walk-tx h4{margin:0 0 10px; font-family:var(--mincho); font-weight:500; font-size:1.15rem; letter-spacing:.06em; line-height:1.7}
.oc-walk-tx p{margin:0; font-size:.92rem; line-height:1.95; color:var(--ink-soft)}
/* 入口の写真の目印(白い丸みの札+下に小さな丸。引き出し線は使わない。位置は style の left / top) */
.oc-tag{position:absolute; z-index:2; transform:translate(-50%,-100%); padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.94); font-size:.74rem; line-height:1.45; letter-spacing:.04em; white-space:nowrap; box-shadow:0 3px 12px rgba(0,0,0,.12); color:var(--ink)}
.oc-tag::after{content:""; position:absolute; left:50%; top:100%; width:7px; height:7px; margin:4px 0 0 -3.5px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px currentColor}
.oc-tag.red{color:var(--red); font-weight:500}
.oc-tag.red span{color:var(--ink)}
.oc-tag.blue{color:var(--blue)}
.oc-tag small{display:block; font-size:.66rem; color:var(--ink-soft)}
@media (max-width:720px){
  .oc-walk-row,.oc-walk-row.rev{grid-template-columns:1fr; row-gap:22px}
  .oc-walk-row.rev .oc-walk-ph{order:0}
  .oc-walk-n{font-size:2.4rem; margin-bottom:10px}
  .oc-tag{font-size:.68rem; padding:4px 9px}
  .oc-tag small{display:none}
  .oc-tag.blue{left:24% !important}
}
@media (prefers-reduced-motion:reduce){ .route-fig.loop .route,.route-fig.loop .goal{animation:none} .rmap .route{stroke-dashoffset:0; opacity:1} .rmap .goal{display:none} }