@charset "utf-8";

/* 加齢皮膚医学研究会 — 全ページ共通のスタイル
   個々の見た目は各ページのインラインスタイルが持っている。ここにあるのは、
   インラインでは書けないもの（擬似クラス・メディアクエリ・アニメーション）だけ。 */

/* 横あふれの止め方。もとはページ全体を包む div の overflow-x:hidden で
   止めていたが、その div 自体がスクロール枠になるため、中の position:sticky が
   効かない。追従するはずのヘッダーが流れて消え、下までスクロールすると
   メニューのボタンに戻れなくなっていた。html に移せばスクロール枠は
   viewport のままなので、あふれを止めたまま sticky が生きる */
html { overflow-x:hidden; }

body { margin:0; background:#FBFAF7; color:#14181C; font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:#2A3164; text-decoration:underline; text-underline-offset:0.2em; }
a:hover { color:#1C2246; }
a:focus-visible, button:focus-visible { outline:2px solid #2A3164; outline-offset:2px; }
::selection { background:#F5EFE2; }

/* iOS Safari は電話番号のほかに住所や日付も勝手にリンクにして、システム既定の
   青と下線を付ける。フッターは紺地なので、そこに濃い青が乗ると読めない。
   電話番号は format-detection のメタで自動リンクごと切ってあるが、それ以外は
   残るため、色と下線だけ地の文字に戻す。inherit なので、紺地のフッターでは
   紙色、白地の本文では黒のままになる */
a[x-apple-data-detectors],
a[x-apple-data-detectors] * {
  color:inherit !important;
  text-decoration:none !important;
  font-size:inherit !important;
  font-weight:inherit !important;
}

/* 外部リンクもサイト共通のリンク色で扱う */
.rohto-link:hover { color:#1C2246; text-decoration-thickness:2px; }

/* 読み上げにだけ残す文字 */
.visually-hidden { position:absolute; left:-9999px; }

/* ここで折り返してはいけない、というかたまり。ブラウザの日本語の折り返しは
   仮名も漢字も1文字ずつ切れるので、狭い画面だと「ホームペ／ージ」のように
   語の途中で割れる。固有名詞・カタカナ語・日付・数字と単位のように、
   割れると読みがつっかえるものだけを包んで止める。
   長すぎるものを包むと今度ははみ出すので、画面に収まる長さのものに限る */
.nowrap { white-space:nowrap; }

/* 本文へスキップ。ふだんは画面外、フォーカスで出てくる */
.skiplink { position:absolute; left:-9999px; top:12px; background:#2A3164; color:#FBFAF7;
            padding:12px 20px; text-decoration:none; z-index:60; }
.skiplink:focus { left:12px; }

/* --- ホバー ----------------------------------------------------------
   もとはキャンバス形式の style-hover 属性だったもの。
   このサイトは見た目をインラインスタイルで持っているので、同じプロパティを
   外部CSSから上書きするには !important が要る。hover のときだけに閉じてある。
   .hv-row だけは対応するインライン指定がないので付けていない */
.hv-btn:hover   { background:#1C2246 !important; }
.hv-card:hover  { border-color:#2A3164 !important; }
.hv-thumb:hover { border-color:#2A3164 !important; }
.hv-row:hover   { background:#F5EFE2; }

/* --- 面ごとリンクのカード --------------------------------------------
   リンクは「詳細を見る」の1本だけ。その ::after を面いっぱいに広げて
   当たり判定にしているので、入れ子のリンクを作らずに面全体が押せる。
   触れているあいだは地紋を持ち上げて、押せることを示す */

.card-link { position:relative; cursor:pointer; }
.card-link-cta::after { content:""; position:absolute; inset:0; }
.card-link-mark { transition:transform 320ms cubic-bezier(.16,.7,.3,1), opacity 320ms ease; }
.card-link:hover .card-link-mark,
.card-link:focus-within .card-link-mark { transform:translateY(-8px) scale(1.04); opacity:0.55 !important; }
.card-link:hover .card-link-cta,
.card-link:focus-within .card-link-cta { text-decoration-thickness:2px; }

@media (prefers-reduced-motion: reduce) {
  .card-link-mark { transition:none; }
  .card-link:hover .card-link-mark,
  .card-link:focus-within .card-link-mark { transform:none; }
}

/* --- ヘッダー --------------------------------------------------------
   960px を境に、横並びのナビとハンバーガーを入れ替える。5項目とロックアップが
   1行に収まる下限がこの幅で、これを下回るとナビが2行に折れる。
   （もとは 900px だったが、その値だと 900〜959px で2行になっていた。
   「プライバシーポリシー」を上メニューに置いていたあいだは6項目で 1200px。）
   600px を切ると英名がロックアップに収まらず、追従ヘッダーが3行ぶんの
   高さになるので、その幅では英名を出さない（フッターには残る） */

.site-header { position:sticky; top:0; z-index:50; background:#FBFAF7; border-bottom:1px solid #DFDCD3; }
.header-row  { padding:22px 0; transition:padding 220ms cubic-bezier(.2,.6,.2,1); }
.site-header.is-compact .header-row { padding:12px 0; }

.lockup-en   { display:block; }
.nav-desktop { display:flex; }
.nav-toggle  { display:none; }

/* ナビはすべて同じ扱い。1項目だけ色が異なると、そこだけ状態が違う
   （訪問済み・選択中）ように見えるため */
.navlink:hover { border-bottom-color:#2A3164 !important; }

/* --- まだ開かない項目 --------------------------------------------------
   いま公開するのはトップとロート賞だけ。項目を消してしまうと会の全体像が
   見えなくなるので、並びは残したまま押せなくする。href を外した a は
   リンクではなくなるため、キーボードの移動先にも読み上げのリンク一覧にも
   入らない（メニューの focus トラップも a[href] を見ている）。
   色は本文より弱くして、押せる項目と見分けがつくところまで落とす */
.navlink.is-disabled,
.gm-link.is-disabled,
footer nav a.is-disabled { cursor:default; pointer-events:none; }
.navlink.is-disabled span,
.gm-link.is-disabled .gm-label { color:#8A9099 !important; }
.gm-link.is-disabled .gm-arrow { opacity:0.12; }
footer nav a.is-disabled { color:#7B80A5 !important; }

/* --- ハンバーガーのボタン --------------------------------------------
   3本線と×を1つのボタンで兼ねる。開くと上下の線が中央で交差して×になり、
   真ん中の線は消える。閉じるボタンを別に置かないので、押した指の位置から
   閉じるところまで動かずに済む。線の太さは1.5pxのまま、×になっても変わらない。
   位置と変形は切り離せないため、線の座標もここに置いている */
.nav-toggle       { transition:background-color 200ms ease, border-color 200ms ease; }
.nav-toggle-bars  { position:absolute; inset:0; }
.nav-toggle-bars span {
  position:absolute; left:50%; top:50%; width:20px; height:1.5px;
  margin:-0.75px 0 0 -10px; background:currentColor;
  transition:transform 320ms cubic-bezier(.16,.7,.3,1), opacity 160ms ease;
}
.nav-toggle-bars span:nth-child(1) { transform:translateY(-6.5px); }
.nav-toggle-bars span:nth-child(3) { transform:translateY(6.5px); }

/* 触れて反応するのはマウスのときだけ。指で押した跡が残らないよう、
   hover のある機器に閉じてある */
@media (hover:hover) {
  .nav-toggle:hover { background:#F5EFE2 !important; border-color:#2A3164 !important; }
}
.nav-toggle[aria-expanded="true"] { border-color:#2A3164 !important; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity:0; transform:scaleX(.3); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform:rotate(-45deg); }

/* --- ハンバーガーメニューの面 ----------------------------------------
   ヘッダーの高さ（--header-h。site.js が入れる）だけ下げた位置から、
   下を紙色で覆う。画面ごと覆ってしまうと会名も閉じるボタンも消えて、
   いまどこを見ているのか分からなくなるため、マストヘッドだけ残す */
.globalmenu {
  position:fixed; left:0; right:0; top:var(--header-h,0px); bottom:0; z-index:40;
  display:flex; flex-direction:column; justify-content:space-between;
  background:#FBFAF7; overflow-y:auto; overscroll-behavior:contain;
}
.globalmenu[hidden] { display:none; }

/* 項目は罫線で仕切らない。触れているあいだだけ面がうっすら沈み、
   矢印が右へ出る。矢印はトップの帯と同じもの */
.gm-link  { transition:background-color 200ms ease; }
.gm-arrow { opacity:0.3; transition:opacity 240ms ease, transform 260ms cubic-bezier(.16,.7,.3,1); }
.gm-link:focus-visible { background:#F2F0E9; }
.gm-link:focus-visible .gm-arrow { opacity:1; transform:translateX(6px); }
@media (hover:hover) {
  .gm-link:hover { background:#F2F0E9; }
  .gm-link:hover .gm-arrow { opacity:1; transform:translateX(6px); }
}

/* いま開いているページ。生成りの面と、横並びのナビと同じ2pxの下線で示す。
   面はホバーで塗り替えない（いま居る場所の印が消えてしまうため）。
   aria-current は各ページが持つ */
.gm-link[aria-current="page"],
.gm-link[aria-current="page"]:hover { background:#F5EFE2; }
.gm-link[aria-current="page"] .gm-label { border-bottom-color:#2A3164 !important; }

@media (max-width:959px) {
  .nav-desktop { display:none; }
  .nav-toggle  { display:flex; }
}
@media (max-width:599px) {
  .lockup-en { display:none; }
}
/* メニューの足の欧文は、ロックアップの欧文が出ない幅のときだけ出す。
   両方出すと、同じ一文が上下に並んでしまう */
@media (min-width:600px) {
  .gm-foot { display:none; }
}

/* --- 事務局の表記 ----------------------------------------------------
   フッターと「送付先」は、左にラベルを置いた表の形で揃えている。
   値の欄が狭くなる幅ではラベルを値の上へ回す。横に並べたままだと
   「大阪公立大学大学院医学研究科皮膚病態学」が語の途中で折り返す。
   フッターは2段組みなので、960pxを切るあたりから欄が足りなくなる。
   display:flex は各行のインラインスタイルが持っているので !important が要る */
@media (max-width:959px) {
  .stack-sm > div { display:block !important; }
  .stack-sm dt   { margin-bottom:2px; }
}

/* --- 過去のプログラム ------------------------------------------------
   広いときは表、狭いときはカード。中身は同じ21件 */
.prog-cards { display:none; }
@media (max-width:899px) {
  .prog-table { display:none; }
  .prog-cards { display:block; }
}

/* --- 動き ------------------------------------------------------------
   ページ遷移とメニュー開閉の演出。いずれも動きを減らす設定を尊重する */

/* ページ遷移：対応ブラウザでは文書間をクロスフェードする */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pageOut 200ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: pageIn 360ms cubic-bezier(.16,.7,.3,1) both; }
@keyframes pageOut { to { opacity:0; transform:translateY(-8px); } }
@keyframes pageIn { from { opacity:0; transform:translateY(12px); } }

/* 未対応ブラウザ向けの控えめな代替 */
@supports not (view-transition-name: none) {
  main, header { animation: pageIn 380ms cubic-bezier(.16,.7,.3,1) both; }
}

/* ハンバーガーメニュー：ヘッダーの下から紙が降りてきて画面を覆い、
   項目が上から順に立ち上がる。閉じるときは同じ紙が上へ戻る。
   面そのものは透かさない（下の本文が透けると紙に見えないため）、
   出入りは上端を軸にした切り抜きで行う */
#globalmenu { animation: sheetIn 300ms cubic-bezier(.16,.7,.3,1) both; }
@keyframes sheetIn { from { clip-path: inset(0 0 100% 0); } }
#globalmenu.is-closing { animation: sheetOut 200ms cubic-bezier(.4,0,1,1) both; pointer-events:none; }
@keyframes sheetOut { to { clip-path: inset(0 0 100% 0); } }

#globalmenu .gm-link { animation: itemIn 420ms cubic-bezier(.16,.7,.3,1) both; }
#globalmenu .gm-link:nth-of-type(1) { animation-delay:60ms; }
#globalmenu .gm-link:nth-of-type(2) { animation-delay:105ms; }
#globalmenu .gm-link:nth-of-type(3) { animation-delay:150ms; }
#globalmenu .gm-link:nth-of-type(4) { animation-delay:195ms; }
#globalmenu .gm-link:nth-of-type(5) { animation-delay:240ms; }
#globalmenu .gm-link:nth-of-type(6) { animation-delay:285ms; }
@keyframes itemIn { from { opacity:0; transform:translateY(10px); } }
/* 閉じるあいだは項目を動かさない。紙が上がっていく途中で
   項目が立ち上がり直すと、ちらついて見える */
#globalmenu.is-closing .gm-link { animation:none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root),
  main, header, #globalmenu, #globalmenu .gm-link { animation: none !important; }
  .header-row, .nav-toggle, .nav-toggle-bars span, .gm-link, .gm-arrow { transition: none; }
}

/* --- 受賞者の枠 ------------------------------------------------------
   サイト共通の罫線と紺を使い、ほかのカードと同じ静かな扱いにする */
.award-card {
  border:1px solid #DFDCD3;
  transition: transform 300ms cubic-bezier(.16,.7,.3,1),
              box-shadow 300ms cubic-bezier(.16,.7,.3,1),
              border-color 260ms ease;
}
/* 触れているあいだは持ち上げ、サイト共通の紺で輪郭を示す */
.award-card:hover {
  transform:translateY(-6px);
  border-color:#2A3164;
  box-shadow:0 16px 34px rgba(20,24,28,0.10);
}
@media (prefers-reduced-motion: reduce) {
  .award-card { transition:none; }
  .award-card:hover { transform:none; }
}

/* --- ページ先頭へ戻る ------------------------------------------------
   右下に浮かべる丸いボタン。300pxほど下へ送ると現れる。
   触れると濃紺が下から満ちてきて、矢印が紙色に反転する */

footer { margin-top:clamp(40px,4vw,56px); }

.back-to-top {
  position:fixed; right:clamp(16px,2.5vw,40px); bottom:clamp(16px,2.5vw,40px);
  width:56px; height:56px; padding:0;
  background:#FBFAF7; border:1px solid #DFDCD3; border-radius:50%;
  cursor:pointer; overflow:hidden; z-index:45;
  box-shadow:0 10px 30px rgba(20,24,28,0.06);
  opacity:0; visibility:hidden; transform:translateY(24px);
  transition:opacity 500ms cubic-bezier(.19,1,.22,1),
             transform 500ms cubic-bezier(.19,1,.22,1),
             border-color 300ms ease, box-shadow 300ms ease,
             visibility 0s 500ms;
}
.back-to-top.is-visible {
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s;
}

/* 下から満ちてくる面 */
.back-to-top::before {
  content:""; position:absolute; left:0; bottom:0; width:100%; height:0;
  background:#2A3164; border-radius:50% 50% 0 0;
  transition:height 420ms cubic-bezier(.19,1,.22,1), border-radius 420ms cubic-bezier(.19,1,.22,1);
}
/* 上向きの矢印 */
.back-to-top::after {
  content:""; position:absolute; inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%232A3164" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="17.5" x2="12" y2="6.5"/><polyline points="7.5,11 12,6.5 16.5,11"/></svg>');
  background-size:24px 24px; background-position:center; background-repeat:no-repeat;
  transition:background-image 200ms ease, transform 420ms cubic-bezier(.19,1,.22,1);
}
.back-to-top:hover { border-color:#2A3164; box-shadow:0 14px 34px rgba(42,49,100,0.18); }
.back-to-top:hover::before { height:100%; border-radius:0; }
.back-to-top:hover::after {
  background-image:url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23FBFAF7" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><line x1="12" y1="17.5" x2="12" y2="6.5"/><polyline points="7.5,11 12,6.5 16.5,11"/></svg>');
  transform:translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top, .back-to-top::before, .back-to-top::after { transition:none; }
}

/* --- 帯の見出しリンク ------------------------------------------------
   見出しそのものがリンクのとき、矢印を右へ送って「別のページへ行く」を示す */
.band-arrow { flex:0 0 auto; transition:transform 260ms cubic-bezier(.16,.7,.3,1); }
.card-link:hover .band-arrow,
.card-link:focus-within .band-arrow { transform:translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .band-arrow { transition:none; }
  .card-link:hover .band-arrow, .card-link:focus-within .band-arrow { transform:none; }
}

/* 帯ごと持ち上げる。矢印の動きと合わせて「押すと先へ進む」を示す */
.band-lift { transition:transform 300ms cubic-bezier(.16,.7,.3,1), box-shadow 300ms cubic-bezier(.16,.7,.3,1); }
.band-lift:hover, .band-lift:focus-within {
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(20,24,28,0.08);
}
@media (prefers-reduced-motion: reduce) {
  .band-lift { transition:none; }
  .band-lift:hover, .band-lift:focus-within { transform:none; }
}