@charset "utf-8";

/* ========= Reset / Base ========= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: "Hiragino Sans", "BIZ UDPGothic", "Meiryo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7; background:#fff; color:#0f172a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img { max-width:100%; height:auto; }
a { color: inherit; text-decoration: none; }
ul,ol { list-style: none; }

/* ========= Tokens ========= */
:root{
  /* brand */
  --campus-green: #10b981; --campus-orange:#f59e0b; --campus-blue:#3b82f6; --campus-red:#ef4444; --campus-navy:#1e3a8a;
  /* base */
  --bg-card:#ffffff; --bg-muted:#f8fafc; --text:#0f172a; --text-2:#475569; --text-3:#64748b;
  --border:#e2e8f0; --border-2:#cbd5e1;
  /* misc */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:20px; --radius-full:9999px;
  --shadow-sm:0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1);
  --shadow-card:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
  --space-xs:.25rem; --space-sm:.5rem; --space-md:.75rem; --space-lg:1rem; --space-xl:1.5rem; --space-2xl:2rem; --space-3xl:3rem;

  --container-max: 1200px;
  --container-wide-max: clamp(1200px, 92vw, 1500px); /* ←ココ */
  /* 画面に応じて伸縮＋上限800px（FHDで約800px想定）*/
  --tip-media-max: clamp(560px, 50vw, 760px);
}

/* ========= Layout ========= */
/* 既存の .container をこの形に */
.container{ max-width: var(--container-max); margin: 0 auto; padding-inline: 16px; }
.container--wide{ max-width: var(--container-wide-max); }

/* ========= Header ========= */
:root{ --brand-logo: 40px; --brand-font: 1.5rem; }
@media (min-width: 768px){ :root{ --brand-logo: 44px; --brand-font: 1.6rem; } }

.site-header{
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-card); border-bottom:1px solid var(--border); box-shadow: var(--shadow-sm);
}
.header-inner{
  max-width:1280px; margin:0 auto; padding: var(--space-lg) var(--space-xl);
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-xl);
}
.brand{ line-height:1; }
.brand__link{ display:inline-flex; align-items:center; gap:10px; }
.brand__logo{ width:var(--brand-logo); height:var(--brand-logo); object-fit:contain; flex:0 0 auto; }
.brand__text{
  font-weight:800; font-size:var(--brand-font);
  background: linear-gradient(135deg, var(--campus-blue), var(--campus-green));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav{ display:flex; gap: var(--space-xl); align-items:center; }
.nav a{ color: var(--text-2); padding: 10px 12px; border-radius: var(--radius-sm); transition: .2s; }
.nav a:hover{ color: var(--campus-blue); background: rgba(59,130,246,.08); }

/* ========= Footer ========= */
.site-footer{ background: var(--text); color:#fff; margin-top: var(--space-3xl); }
.footer-inner{
  max-width:1280px; margin:0 auto; padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
  display:flex; justify-content:space-between; align-items:center; gap: var(--space-xl);
}
.footer-links{ display:flex; gap: var(--space-xl); flex-wrap:wrap; }
.footer-links a{ color: rgba(255,255,255,.85); }
.footer-links a:hover{ color:#fff; }
.copyright{ color: rgba(255,255,255,.7); }

/* ========= Reusable UI ========= */
.card{
  background: linear-gradient(145deg, #fff 0%, var(--bg-muted) 100%);
  border:1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-xl); transition:.25s; color: inherit; display:block;
}
.card:hover{ transform: translateY(-2px); border-color: var(--campus-blue); box-shadow: var(--shadow-md); }
.card h3{ font-size:1.2rem; font-weight:600; margin-bottom: var(--space-md); color: var(--text); }
.card .excerpt{ color: var(--text-2); font-size:.95rem; line-height:1.6; }

.chips{ display:flex; flex-wrap:wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.chip{
  background: linear-gradient(135deg, var(--campus-blue), var(--campus-green));
  color:#fff; font-size:.78rem; font-weight:700; padding: 4px 10px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

/* grid helpers */
.grid{ display:grid; gap: var(--space-xl); }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
@media (max-width:1024px){ .grid-4,.grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){ .grid-4,.grid-3,.grid-2{ grid-template-columns: 1fr; } }

/* accessibility */
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* small utilities */
.text-muted{ color: var(--text-3); }
.badge{ display:inline-block; padding:2px 6px; border-radius:6px; font-size:.72rem; font-weight:700; }
.badge-class{ background: rgba(59,130,246,.1); color: var(--campus-blue); }
.badge-tip{ background: rgba(16,185,129,.12); color: var(--campus-green); }
.badge-assignment{ background: rgba(245,158,11,.12); color: var(--campus-orange); }
.badge-typing{ background: rgba(239,68,68,.12); color: var(--campus-red); }

/* タイトル行の並びと縦位置を安定させる */
.class-head{
  display:flex;
  align-items:center;         /* ← 縦揃え */
  gap:12px;
  margin-bottom:8px;
}

/* アイコンの見た目・ベースライン補正 */
.class-icon{
  /* デスクトップで約 2rem、スマホで自動で少し縮む */
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
  line-height: 1;             /* ← ベースラインのズレ防止 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  vertical-align: middle;     /* 念のため */
  /* 微妙な沈み上げ（環境次第で効く） */
  transform: translateY(0.5px);
  position: relative;
  isolation: isolate;
}

.class-icon::after{
  content: "";
  position: absolute;
  inset: -6px;                /* バッジのサイズ感 */
  border-radius: 12px;
  background: currentColor;   /* ← アイコン色を流用 */
  opacity: .08;               /* ほんのり */
  z-index: -1;
}

/* タイトルが大きすぎてアイコンが小さく見えるとき */
.card h3{
  font-size: 1.15rem;         /* お好みで 1.1〜1.2rem */
  line-height: 1.25;
  margin: 0;
}

/* パンくず */
.breadcrumbs {
  margin: 24px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.breadcrumbs a {
  color: var(--campus-blue);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

/* 狭い幅での調整（任意） */
@media (max-width: 640px){
  .card h3{ font-size: 1.05rem; }
}