/* A living plate in the learning natural history book. Front page only. */
.atlas{position:relative;border:1px solid var(--line);padding:9px;background:var(--panel);box-shadow:0 12px 36px -26px rgba(58,46,35,.5);isolation:isolate}
.atlas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23765f3b' opacity='.12' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.atlas__mast,.atlas__colophon{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 22px;border:1px solid var(--line-soft);font-size:.73rem;color:var(--ink-soft)}
.atlas__edition{font-family:var(--en);letter-spacing:.16em;font-weight:600}
.atlas__edition span{margin:0 10px;color:var(--line)}
.atlas__instruction{letter-spacing:.05em}
.atlas__instruction>span{margin-left:12px;color:var(--wax)}
.atlas__spread{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);border-inline:1px solid var(--line-soft)}
/* ── 地図 ──
   地図の中身（文字・アイコン・封蝋）は地図の幅に比例して拡縮する（--u = 地図幅の1%）。
   位置は地図に対する％、線は viewBox 座標で、どちらも地図と一緒に伸び縮みするので、
   地図の大きさが変わっても「文字と線の間隔」の比率は崩れない。
   サイズは下の --* に倍率（×--u）でまとめてあり、狭い地図（≤600px）では倍率だけを差し替える。 */
.atlas__map{position:relative;min-width:0;aspect-ratio:660/570;align-self:center;container-type:inline-size;
  background:radial-gradient(ellipse at 50% 50%,rgba(169,134,47,.07),transparent 65%);
  --u:1cqi;
  --num:2.42;--num-sub:1.5;--icon:7.27;--icon-mt:1.21;--icon-mb:.76;--name:3.27;--cap:1.6;--pin-gap:1.36;
  --seal:11.5;--seal-svg:8.64;--seal-gap:2.27;--ring1:.91;--ring2:1.06;--ring3:2.27;--org:1.89;--org-sub:1.41;
  --title:4.39;--compass:6.06;--compass-n:1.58;--note:1.82;--st-w:29%}
.atlas__map-title{position:absolute;top:5%;left:5.5%;font-family:var(--en);font-size:calc(var(--title)*var(--u));line-height:1.06;letter-spacing:-.02em;color:var(--ink-soft)}
.atlas__map-title em{font-weight:400}
.atlas__terrain,.atlas__routes{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* 線は塗らない。SVG の fill="none" 属性は CSS に負けるため、CSS で明示する
   （ログイン中だけ読み込まれる賢威のブロックエディター用CSSに svg{fill:currentcolor} があり、線が塗りつぶしになっていた）*/
.atlas__terrain,.atlas__routes,.atlas__terrain *,.atlas__routes *{fill:none}
.atlas__layer--narrow{display:none}
.atlas__terrain{color:var(--gold);opacity:.22}
.atlas__terrain path,.atlas__terrain circle{vector-effect:non-scaling-stroke}
.atlas__route{stroke:var(--line);stroke-width:1.3;stroke-dasharray:.015 .035;vector-effect:non-scaling-stroke;transition:stroke .3s}
.atlas__route.is-active{stroke:var(--wax);stroke-width:1.8;stroke-dasharray:1;animation:atlas-route .7s ease-out both}
/* 中央：封蝋の中心を地図の中心（経路の始点）に合わせ、理念の文言はその下に垂らす */
.atlas__origin{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(var(--seal)*var(--u)/-2));text-align:center;white-space:nowrap;pointer-events:none}
.atlas__origin .seal{width:calc(var(--seal)*var(--u));height:calc(var(--seal)*var(--u));margin:0 auto calc(var(--seal-gap)*var(--u));
  box-shadow:0 0 0 calc(var(--ring1)*var(--u)) var(--panel),0 0 0 calc(var(--ring2)*var(--u)) var(--line),0 0 0 calc(var(--ring3)*var(--u)) rgba(169,134,47,.06)}
.atlas__origin .seal svg{width:calc(var(--seal-svg)*var(--u));height:calc(var(--seal-svg)*var(--u))}
.atlas__origin>span{display:block;font-size:max(9px,calc(var(--org)*var(--u)))}
.atlas__origin small{font-family:var(--en);font-size:max(7px,calc(var(--org-sub)*var(--u)));letter-spacing:.19em;color:var(--ink-soft)}
.atlas__br-narrow{display:none}
/* 拠点：ピン（経路の終点）を left/top の点にぴったり置く。
   上の2拠点は文字の下にピン、下の2拠点は文字の上にピン。経路は中央側からピンに届き、文字の中を通らない。 */
.atlas__station{position:absolute;display:flex;flex-direction:column;align-items:center;width:var(--st-w);color:var(--ink);font:inherit;text-decoration:none;text-align:center;-webkit-tap-highlight-color:transparent;border:0;border-radius:48%;background:transparent;cursor:pointer;transition:background .25s,color .25s}
.atlas__station--find,.atlas__station--learn{transform:translate(-50%,calc(-100% + 3px));padding:calc(1.4*var(--u)) calc(1.2*var(--u)) 0}
.atlas__station--support,.atlas__station--connect{transform:translate(-50%,-3px);padding:0 calc(1.2*var(--u)) calc(1.4*var(--u))}
.atlas__station--support .atlas__pin,.atlas__station--connect .atlas__pin{order:-1;margin:0 0 calc(var(--pin-gap)*var(--u))}
.atlas__station--find{left:18.94%;top:44.91%}
.atlas__station--learn{left:81.06%;top:44.91%}
.atlas__station--support{left:81.06%;top:55.09%}
.atlas__station--connect{left:18.94%;top:55.09%}
.atlas__number{font-family:var(--en);font-size:calc(var(--num)*var(--u));color:var(--wax);line-height:1.2}
.atlas__number>span{font-size:max(8px,calc(var(--num-sub)*var(--u)));letter-spacing:.13em;margin-left:.3em}
.atlas__station>svg{width:calc(var(--icon)*var(--u));height:calc(var(--icon)*var(--u));margin:calc(var(--icon-mt)*var(--u)) 0 calc(var(--icon-mb)*var(--u));color:var(--ink-soft);transition:transform .3s,color .3s}
/* 文字の背景は透過（地図の紙の地がそのまま見える）。線との重なりは配置で避けている */
.atlas__name{font-family:var(--hand);font-weight:600;font-size:calc(var(--name)*var(--u));line-height:1.6;padding:0 .35em;white-space:nowrap}
.atlas__caption{font-size:max(9px,calc(var(--cap)*var(--u)));color:var(--ink-soft);padding:0 3px;white-space:nowrap}
.atlas__pin{width:6px;height:6px;border:1px solid var(--wax);background:var(--panel);border-radius:50%;margin-top:calc(var(--pin-gap)*var(--u));transition:box-shadow .3s,background .3s}
.atlas__station[aria-selected="true"]{color:var(--wax);background:radial-gradient(ellipse,rgba(169,134,47,.11),transparent 70%)}
.atlas__station[aria-selected="true"]>svg{color:var(--wax);transform:translateY(-3px)}
.atlas__station[aria-selected="true"] .atlas__pin{background:var(--wax);box-shadow:0 0 0 5px var(--panel),0 0 0 6px var(--wax)}
.atlas__station:focus-visible{outline:2px solid var(--wax);outline-offset:5px;border-radius:3px}
@media(hover:hover){.atlas__station:hover>svg{transform:translateY(-5px);color:var(--wax)}.atlas__station:hover .atlas__name{color:var(--wax)}}
.atlas__compass{position:absolute;right:5%;top:5%;display:grid;justify-items:center;color:var(--ink-soft)}
.atlas__compass>span{font-family:var(--en);font-size:max(8px,calc(var(--compass-n)*var(--u)));line-height:1}
.atlas__compass svg{width:calc(var(--compass)*var(--u));height:calc(var(--compass)*var(--u));opacity:.7}
.atlas__map-note{position:absolute;bottom:4%;left:6%;font-size:max(9px,calc(var(--note)*var(--u)));transform:rotate(-3deg)}
.atlas__fieldnotes{min-width:0;padding:26px 28px 20px;border-left:1px solid var(--line);background:linear-gradient(90deg,rgba(199,183,154,.13),transparent 18%);display:flex;flex-direction:column}
.atlas__note-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:.76rem;letter-spacing:.1em}
.atlas__count{font-family:var(--en);font-size:.95rem;letter-spacing:.12em}
.atlas__entry{padding-top:25px;scroll-margin-top:30px}
.atlas__entry+.atlas__entry{margin-top:32px;border-top:1px solid var(--line)}
.atlas.is-enhanced .atlas__entry{margin:0;border:0;animation:atlas-page .35s ease-out both}
.atlas [hidden]{display:none!important}
.atlas__eyebrow{display:block;color:var(--wax);font-family:var(--en);font-size:.73rem;letter-spacing:.15em;margin-bottom:14px}
.rd .atlas__entry h3{font-size:clamp(1.45rem,2.3vw,1.85rem);font-weight:500;line-height:1.65;letter-spacing:.04em;margin-bottom:18px}
.rd .atlas__entry p{font-size:.85rem;line-height:2.1;color:var(--ink-soft)}
.rd .atlas__services{margin-top:23px;border-top:1px solid var(--line-soft)}
.atlas__services>div{padding:11px 0;border-bottom:1px solid var(--line-soft)}
.atlas__services dt{font-size:.89rem;font-weight:600}
.atlas__services dt>span{display:inline-block;font-size:.59rem;font-weight:400;color:var(--wax);border:1px solid var(--line);padding:0 5px;vertical-align:middle;margin-left:5px}
.atlas__services dd{margin:2px 0 0;font-size:.71rem;line-height:1.8;color:var(--ink-soft)}
/* 事業名は各サービスへのリンク。::after を行いっぱいに広げ、説明文まで含めた行全体を押せるようにする */
.atlas__services>div{position:relative}
.atlas__svc{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.atlas__svc::after{content:"";position:absolute;inset:0}
.atlas__svc>i{display:inline-block;margin-left:.3em;font-style:normal;font-size:1.05em;line-height:1;color:var(--wax);transition:transform .2s}
.atlas__svc:hover,.atlas__svc:focus-visible{color:var(--wax);border-bottom-color:var(--wax)}
.atlas__svc:hover>i{transform:translate(2px,-2px)}
.atlas__svc:focus-visible{outline:2px solid var(--wax);outline-offset:3px}
.atlas__link{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:22px 0 26px;padding-bottom:9px;border-bottom:1px solid var(--wax);text-decoration:none;color:var(--wax);font-size:.82rem}
.atlas__link>span{font-size:1.2rem;transition:transform .2s}
.atlas__link:hover>span{transform:translate(2px,-2px)}
.atlas__paging{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink-soft);font-size:.65rem;letter-spacing:.15em}
.atlas__paging button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--wax);font-size:1.2rem;cursor:pointer;transition:background .2s,color .2s}
.atlas__paging button:hover{background:var(--wax);color:var(--panel);border-color:var(--wax)}
.atlas__colophon{font-size:.7rem;padding-block:13px}
.atlas__colophon>span:last-child{font-family:var(--en);letter-spacing:.17em;font-size:.65rem}
@keyframes atlas-route{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes atlas-page{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:901px){.atlas.is-enhanced .atlas__fieldnotes{min-height:620px}}
@media(max-width:900px){
  .atlas__spread{grid-template-columns:1fr}
  .atlas__map{width:100%;max-width:660px;justify-self:center}
  .atlas__fieldnotes{border-left:0;border-top:1px solid var(--line);padding:24px 30px}
  .atlas__entry{min-height:350px}
  .atlas__instruction{font-size:.65rem}
}
/* 狭い地図（幅 約500px 未満）：縦長の地図に切り替え、拠点を上下2段に分けて中央の封蝋を挟む。
   --u は 3.9px で頭打ちにする（地図が広がっても文字は大きくなりすぎず、間隔だけが広がる）。
   点線の円は置く余地がないので、この地図では描かない。 */
@media(max-width:600px){
  .atlas__map{aspect-ratio:660/858;
    --u:min(1cqi,3.9px);
    --num:3.89;--num-sub:2.67;--icon:11.55;--icon-mt:1.52;--icon-mb:.91;--name:5.54;--cap:2.92;--pin-gap:2.74;
    --seal:14.6;--seal-svg:10.64;--seal-gap:3.04;--ring1:1.15;--ring2:1.34;--ring3:2.88;--org:2.92;--org-sub:2.33;
    --title:6.08;--compass:8.81;--compass-n:3.16;--note:3.02;--st-w:36%}
  .atlas__layer--wide{display:none}
  .atlas__layer--narrow{display:block}
  .atlas__br-narrow{display:inline}
  .atlas__map-title,.atlas__compass{top:3.5%}
  .atlas__map-note{bottom:3%}
  .atlas__station--find{left:18.48%;top:43.47%}
  .atlas__station--learn{left:81.52%;top:43.47%}
  .atlas__station--support{left:81.52%;top:56.53%}
  .atlas__station--connect{left:18.48%;top:56.53%}
}
@media(max-width:520px){
  #journey>.wrap{padding-inline:16px}
  .atlas{padding:5px}
  .atlas__mast{padding:12px;align-items:flex-start;flex-direction:column;gap:3px}
  .atlas__edition{font-size:.68rem}
  .atlas__fieldnotes{padding:20px}
  .rd .atlas__entry h3{font-size:1.55rem}
  .atlas__entry{min-height:390px}
  .atlas__colophon{padding:12px;text-align:center;justify-content:center}
  .atlas__colophon>span:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){.atlas *{animation:none!important;transition:none!important}}
@media print{
  .atlas__spread{display:block}.atlas [data-atlas-panel][hidden]{display:block!important}
  .atlas__paging,.atlas__instruction{display:none}.atlas__fieldnotes{border-left:0}
  .atlas__entry{break-inside:avoid}.atlas__map{max-width:600px;margin:auto}
}