/* ---------------- フォント ---------------- */
:root{
  --bg: #0f172a; /* slate-900 */
  --fg: #f8fafc; /* slate-50  */
  --accent: #2563eb; /* indigo-600 */
}
  

/* ------------- ベースリセット ------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ color-scheme: light dark; }

body{
  margin:0;
  min-block-size:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:"Inter","Noto Sans JP",sans-serif;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-block:clamp(1.5rem,4vw,3rem);
  padding-inline:clamp(1rem,4vw,3rem);
}

/* ------------- レイアウト ------------- */
main{
  inline-size:100%;
  max-inline-size:65ch;      /* “読みやすい行長” を基準に */
  text-align:center;
}

/* ------------- 見出し ------------- */
.page-title{
  margin:0 0 2rem;
  font-weight:700;
  line-height:1.15;
  font-size:clamp(1.8rem,6vw,4rem);
  position:relative;
  max-inline-size:none;
  white-space:nowrap;
}
.page-title span{ display:block; }
.title-main{ margin-bottom:.25em; }


/* ------------- 段落 ------------- */
p{
  text-align:center;
  margin:0 0 2rem;
  line-height:1.7;
}
p.intro{
  text-align:left;
  text-indent:1em;
}

/* ------------- リンク ------------- */
a{
  color:var(--accent);
  text-decoration:none;
  position:relative;
  transition:opacity .2s ease, transform .2s ease;
}
a::after{                       /* 下線をアニメ化 */
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  inline-size:100%;
  block-size:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
a:hover{
  opacity:.85;
  transform:translateY(-2px);
}
a:hover::after{ transform:scaleX(1); }
a:visited{ color:color-mix(in srgb,var(--accent) 55%,var(--fg)); }
/* ==========================================================
   PDF リンク用カード
   ========================================================== */
.pdf-box{
  background: #ffffff;                /* 常に白背景 */
  border: 2px solid var(--accent);    /* アクセント色の縁取り */
  border-radius: .5rem;
  padding: 1rem 1.5rem;
  margin: 0 auto 2rem;               /* 下に余白、中央寄せ */
  display: inline-block;             /* コンテンツ幅だけのカード */
  box-shadow: 0 3px 6px rgba(0,0,0,.06);
}

.pdf-box .pdf-link{
  color: var(--accent);              /* 文字もアクセント色で強調 */
  font-weight: 600;                  /* 太字で目立たせる */
}

.pdf-box .pdf-link::after{ background: currentColor; }   /* 下線も同色 */