@charset "utf-8";
/* ============================================================
   富良野医師会 創立60周年記念誌 特設ページ
   ------------------------------------------------------------
   配色は記念誌の表紙から採取
     --ao    #5887C6  表紙下部の帯
     --sora  #0B6FC4  リンク・アクセント
     --fukami #1F3356 本文・見出し
     --kiri  #EEF2F8  淡い背景
   書体
     見出し・誌名  Shippori Mincho B1
     本文          Noto Sans JP
     数字（60・年表） Bodoni Moda Italic ＝ 表紙の「60」と同じ書体
   動き
     ・読み込み時のヒーロー演出は CSS アニメーション
     ・スクロール連動は animation-timeline（JavaScript不使用）
     ・prefers-reduced-motion 指定時はすべて停止
   ============================================================ */

@property --yr{syntax:"<integer>";initial-value:1908;inherits:false}
:root{
  --ao:#5887C6; --sora:#0B6FC4; --fukami:#1F3356;
  /* --ao-koi は塗りボタン専用。--ao に白文字だと3.7:1しかなく、
     日本語の細い書体では読みにくいため濃いほうを使う */
  --ao-koi:#46709F;
  --kiri:#EEF2F8; --hai:#5A6880; --sen:#D6DFEC; --shiro:#fff;
  --serif:"Shippori Mincho B1",'Hiragino Mincho ProN','Yu Mincho',serif;
  --sans:"Noto Sans JP",'Hiragino Sans','Yu Gothic',sans-serif;
  --num:"Bodoni Moda",'Didot','Hiragino Mincho ProN',serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pen:cubic-bezier(.5,.02,.28,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--fukami);background:var(--shiro);
  font-size:17px;line-height:1.85;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid var(--sora);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
/* 画面には出さず、読み上げにだけ残す文字（ページ番号の「ページ」など） */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== スクロール進捗 ===== */
.prog{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ao),var(--sora));z-index:50;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .prog{animation:grow linear both;animation-timeline:scroll(root)}
}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ===== ヒーロー ===== */
.hero{position:relative;background:var(--ao);overflow:hidden;height:clamp(460px,84vh,820px)}
.hero-fig{position:absolute;inset:0;overflow:hidden}
.hero-img{width:100%;height:120%;object-fit:cover;object-position:center 56%;
  animation:dawn 3s var(--ease) .1s both}
@keyframes dawn{
  from{transform:scale(1.12);filter:brightness(.78) saturate(.86)}
  to{transform:scale(1);filter:brightness(1) saturate(1)}
}
@supports (animation-timeline:view()){
  .hero-fig{animation:para linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
}
@keyframes para{to{transform:translateY(16%)}}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,42,96,.40) 0%,rgba(9,42,96,.10) 46%,rgba(9,42,96,0) 66%)}
.hero-mark{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;padding:clamp(30px,8vh,84px) 20px 0}
.mark60{width:clamp(200px,34vw,380px);height:auto;overflow:visible}
.mark60 path{fill:none;stroke:#fff;stroke-width:1.4;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000}
.s1{animation:draw 1.35s var(--pen) .25s both}
.s2{animation:draw .95s var(--pen) 1.5s both}
.s3{animation:draw .75s var(--pen) 2.3s both}
@keyframes draw{to{stroke-dashoffset:0}}
.anniv{font-family:var(--serif);font-style:italic;color:#fff;
  font-size:clamp(11px,2vw,16px);margin:10px 0 0 .42em;letter-spacing:.42em;
  animation:annivIn 1.1s var(--ease) 3.05s both}
@keyframes annivIn{from{opacity:0;letter-spacing:.16em}to{opacity:.95;letter-spacing:.42em}}
.hero-curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:clamp(48px,8vw,104px);display:block;animation:rise 1.05s var(--ease) 2.45s both}
@keyframes rise{from{transform:translateY(102%)}to{transform:translateY(0)}}
.hero-cue{position:absolute;left:50%;bottom:clamp(58px,9vw,116px);width:1px;height:46px;
  background:linear-gradient(#fff,rgba(255,255,255,0));opacity:0;
  animation:cue 2.4s ease-in-out 4.2s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-14px)}35%{opacity:.85}
  100%{opacity:0;transform:translateY(14px)}}
.hero-name{background:var(--ao);color:#fff;text-align:center;
  padding:clamp(20px,4vw,42px) 20px clamp(44px,6vw,64px);position:relative;z-index:2}
.hero-name h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,6.4vw,52px);
  letter-spacing:.14em;margin:0 0 .5em .14em;line-height:1.35;
  animation:up 1s var(--ease) 2.8s both}
/* 表紙のキャッチコピー。2行とも同じ大きさで、表紙の見え方に合わせています */
.hero-copy{font-family:var(--serif);font-size:clamp(14px,2.5vw,19px);letter-spacing:.16em;
  line-height:2;margin:0 0 1.5em .16em;animation:up 1s var(--ease) 2.9s both}
.hero-org{font-family:var(--serif);font-size:clamp(15px,2.6vw,21px);letter-spacing:.34em;
  margin:0 0 0 .34em;animation:up 1s var(--ease) 3.06s both}
/* 「一般社団法人」は表紙と同じく一段小さく */
.hero-org .corp{font-size:.72em;letter-spacing:.2em;margin-right:.6em}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* スマホ横持ち。既定の高さだと表紙下の弧が画面外に出てしまう */
@media (orientation:landscape) and (max-height:560px){
  .hero{height:clamp(320px,94svh,560px)}
  .hero-mark{padding-top:clamp(16px,5vh,40px)}
  .mark60{width:clamp(150px,24vw,260px)}
}

/* ===== 共通 ===== */
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
section{padding:clamp(48px,8vw,80px) 0}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(21px,3.6vw,27px);
  letter-spacing:.08em;margin:0 0 .35em;line-height:1.5}
.lead{color:var(--hai);font-size:15.5px;margin:0 0 30px;line-height:1.8}

/* ===== 歩み ===== */
/* overflow は clip。x だけだと、スクロールで大きな年号が
   下の「記念誌を読む」の白い区画まではみ出してしまう */
.history{background:var(--kiri);timeline-scope:--hist;overflow:clip}
.hist{position:relative;margin-top:8px}
.ghost{display:none;position:sticky;top:0;height:0;z-index:0;pointer-events:none}
.ghost .yr{position:absolute;top:22vh;left:50%;transform:translateX(-50%);
  font-family:var(--num);font-style:italic;font-size:clamp(130px,30vw,320px);
  line-height:1;color:var(--ao);opacity:.13;white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums}
.tl{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.tl::before{content:'';position:absolute;left:5px;top:12px;bottom:34px;width:1px;
  background:var(--ao);transform-origin:top;transform:scaleY(1)}
.tl li{position:relative;padding:0 0 42px 30px}
.tl li::before{content:'';position:absolute;left:0;top:11px;width:11px;height:11px;
  border-radius:50%;background:var(--kiri);border:1.5px solid var(--ao)}
.tl li:last-child::before{background:var(--ao)}
.tl-y{display:flex;align-items:baseline;gap:12px;margin-bottom:2px}
.tl-y .ad{font-family:var(--num);font-style:italic;font-size:30px;line-height:1.1;
  color:var(--ao);font-variant-numeric:lining-nums tabular-nums}
.tl-y .wa{font-size:13px;color:var(--hai);letter-spacing:.06em}
.tl-b h3{font-family:var(--serif);font-weight:500;font-size:18.5px;
  letter-spacing:.04em;margin:0 0 .25em;line-height:1.6}
.tl-b p{margin:0;font-size:15.5px;line-height:1.85;color:var(--hai)}
.hist-note{margin:6px 0 0;font-size:13.5px;color:var(--hai);line-height:1.8}

@supports (animation-timeline:view()){
  .hist{view-timeline-name:--hist}
  .ghost{display:block}
  .ghost .yr{counter-reset:yr var(--yr);animation:tick linear both;
    animation-timeline:--hist;animation-range:entry 85% exit 15%}
  .ghost .yr::after{content:counter(yr)}
  .tl::before{animation:line linear both;animation-timeline:--hist;
    animation-range:entry 90% exit 25%}
  .tl li{animation:rowIn linear both;animation-timeline:view();
    animation-range:entry 6% entry 52%}
}
@keyframes tick{from{--yr:1908}to{--yr:2026}}
@keyframes line{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rowIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ===== 読む・ダウンロード ===== */
.acts{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.acts{grid-template-columns:1fr}}
.act{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:20px 22px;
  border-radius:4px;text-decoration:none;border:1px solid var(--ao);min-height:84px;
  transition:background .25s var(--ease),border-color .25s,transform .25s var(--ease)}
.act:hover{transform:translateY(-2px)}
.act .big{font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1.5}
.act .sml{font-size:13.5px;color:var(--hai);line-height:1.5}
.act-main{background:var(--ao-koi);border-color:var(--ao-koi);color:#fff}
.act-main .sml{color:rgba(255,255,255,.92)}
.act-main:hover{background:#3A5F8A;border-color:#3A5F8A}
.act-sub:hover{background:var(--kiri)}

/* ===== 目次 ===== */
.read{padding-bottom:0}
/* 一覧の上端に罫線を引く。.row と .ch は別々の要素なので、
   隣り合う箇所で罫線が二重にならないよう片方を消す */
.row,.ch{border-bottom:1px solid var(--sen)}
.toc .row:first-of-type,.toc .ch:first-of-type{border-top:1px solid var(--sen)}
.toc .row+.ch{border-top:none}
.row a,.ch>summary{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;padding:18px 4px;text-decoration:none}
.row .ch-m{margin-left:auto}
/* ページ番号。表紙の「60」や年表と同じ Bodoni Italic でそろえています */
.pg{flex:0 0 auto;margin-left:auto;font-family:var(--num);font-style:italic;
  font-size:16px;line-height:1;color:var(--ao-koi);
  font-variant-numeric:lining-nums tabular-nums}
.ch>summary{cursor:pointer;list-style:none}
.ch>summary::-webkit-details-marker{display:none}
.ch-t{font-family:var(--serif);font-size:19px;letter-spacing:.05em;font-weight:500;
  transition:color .2s}
.ch-m{font-size:13.5px;color:var(--hai);white-space:nowrap;flex:0 0 auto}
.row a:hover .ch-t,.ch>summary:hover .ch-t{color:var(--sora)}
@media(max-width:480px){
  /* 見出しとページ番号を1行目に、執筆者名を2行目に */
  .row a{flex-wrap:wrap;gap:2px 10px}
  .row .ch-t{flex:1 1 0}
  .row .ch-m{flex:1 1 100%;order:3;margin-left:0;white-space:normal}
  .row .pg{order:2}
}
.ch>summary .ch-t::after{content:'';display:inline-block;width:7px;height:7px;
  margin-left:12px;border-right:1.5px solid var(--ao);border-bottom:1.5px solid var(--ao);
  transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.ch[open]>summary .ch-t::after{transform:translateY(1px) rotate(-135deg)}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .ch::details-content{block-size:0;opacity:0;overflow:hidden;content-visibility:hidden;
    transition:block-size .42s var(--ease),opacity .32s ease,content-visibility .42s allow-discrete}
  .ch[open]::details-content{block-size:auto;opacity:1;content-visibility:visible}
}
.ch-body{padding:0 0 22px}
.ch-pdf{display:inline-block;background:var(--kiri);border:1px solid var(--sen);
  border-radius:4px;padding:13px 18px;text-decoration:none;font-size:15px;
  font-weight:500;margin-bottom:14px;transition:border-color .2s,color .2s}
.ch-pdf:hover{border-color:var(--ao);color:var(--sora)}
.ch-pdf .from{color:var(--hai);font-weight:400;font-size:13.5px;margin-left:.7em}
.subs{list-style:none;margin:0;padding:0}
.subs li{border-top:1px solid var(--sen)}
.subs li:first-child{border-top:none}
.subs a{display:flex;align-items:baseline;gap:14px;
  padding:12px 6px;text-decoration:none;font-size:16px;
  line-height:1.7;transition:color .18s,padding-left .22s var(--ease)}
.subs .t{flex:0 1 auto;min-width:0}
/* 会員随想の題名。項目が氏名だけの章では使いません */
.subs .n{font-size:13.5px;color:var(--hai);line-height:1.6;flex:0 1 auto}
@media(max-width:560px){
  /* 氏名とページ番号を1行目に、題名を2行目に。
     flex-basis を 0 にしないと、長い項目名が折り返したときに
     ページ番号だけ次の行へ落ちてしまいます */
  .subs a{flex-wrap:wrap;gap:2px 10px}
  .subs .t{flex:1 1 0}
  .subs .n{flex:1 1 100%;order:3}
  .subs .pg{order:2}
}
.subs a:hover{color:var(--sora);padding-left:12px}
.subs a:hover .t{text-decoration:underline;text-underline-offset:3px}
.subs .grp{border-top:none;padding:18px 6px 6px;font-size:13px;color:var(--hai);
  letter-spacing:.12em}
.subs .grp:first-child{padding-top:4px}
@supports (animation-timeline:view()){
  .row,.ch{animation:rowIn linear both;animation-timeline:view();
    animation-range:entry 4% entry 46%}
}

/* ===== 補足 ===== */
.notes{background:var(--kiri)}
.notes ul{margin:0;padding:0;list-style:none}
.notes li{font-size:14.5px;color:var(--hai);line-height:1.85;padding:12px 0 12px 18px;
  border-top:1px solid var(--sen);position:relative}
.notes li:first-child{border-top:none}
/* top は「上の余白 + 行の高さの半分」。行の中央に合わせる */
.notes li::before{content:'';position:absolute;left:0;top:calc(12px + .925em);
  transform:translateY(-50%);width:5px;height:5px;
  border-radius:50%;background:var(--ao)}
.notes a{color:var(--fukami);text-underline-offset:3px}

/* ===== フッター ===== */
footer{background:var(--fukami);color:#fff;padding:52px 0 40px;font-size:14.5px}
footer .wrap{display:grid;gap:30px;grid-template-columns:1fr auto}
@media(max-width:600px){footer .wrap{grid-template-columns:1fr}}
footer .nm{font-family:var(--serif);font-size:19px;letter-spacing:.14em;margin:0 0 12px;
  font-weight:400}
footer .nm .corp{font-size:.74em;letter-spacing:.1em;margin-right:.5em}
footer p{margin:0;line-height:1.9;color:rgba(255,255,255,.82)}
footer a{color:#fff;text-underline-offset:4px}
footer .wrap>div:last-of-type{display:flex;align-items:center}
.back{display:inline-block;padding:11px 20px;
  border:1px solid rgba(255,255,255,.45);border-radius:4px;text-decoration:none;
  font-size:14.5px;white-space:nowrap;transition:background .25s var(--ease)}
.back:hover{background:rgba(255,255,255,.14)}
.copy{grid-column:1/-1;margin-top:34px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.18);font-size:12.5px;color:rgba(255,255,255,.6)}

/* ===== 印刷 =====
   ブラウザは既定で背景色を印刷しないため、そのままだと
   色地に白文字の部分（表紙・フッター・塗りボタン）が真っ白になり
   何も読めません。印刷時は白地・濃い文字に固定します。
   記念誌そのものを印刷する場合はPDFを開いてから印刷してください。 */
@media print{
  .prog,.hero-cue,.hero,.back{display:none!important}
  body{font-size:11pt;line-height:1.7}
  section{padding:16pt 0}
  .hero-name{background:#fff!important;color:var(--fukami)!important;
    padding:0 0 18pt;text-align:left}
  .hero-name h1{font-size:22pt;margin-bottom:.4em}
  .hero-org{font-size:12pt}
  .history,.notes{background:#fff!important}
  .act{min-height:0;padding:10pt 12pt}
  .act-main{background:#fff!important;color:var(--fukami)!important;
    border-color:var(--fukami)!important}
  .act-main .sml{color:var(--hai)!important}
  footer{background:#fff!important;color:var(--fukami)!important;
    padding:18pt 0 0;border-top:1px solid var(--sen)}
  footer p,footer a,.copy{color:var(--fukami)!important}
  .copy{border-top-color:var(--sen)}
  .wrap{max-width:none}
  .tl li,.row,.ch,.notes li,.subs li{break-inside:avoid}
}

/* ===== モーションを控えたい設定の方へ ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mark60 path{stroke-dasharray:none;stroke-dashoffset:0}
  .prog{display:none}
  .hero-cue{display:none}
  .tl::before{transform:scaleY(1)}
  .ghost{display:none}
}