/* ===== 全体 ===== */
.site-top {
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #F5F7FA; /* 画面全体の背景色をここではなくbodyで設定する */
  padding: 30px;
  width: 100%; /* 親は全幅 */
  margin: 0;
  box-sizing: border-box;
}

.site-top .inner {
  width: 80%;        /* コンテンツ幅だけ80%に */
  max-width: 1200px;
  margin: 0 auto;    /* 中央寄せ */
}

/* ===== 2カラムレイアウト ===== */
.top-layout {
  display: flex;
  gap: 30px;
  width: 100%; /* 親に合わせる */
}

/* 左：固定コンテンツ */
.top-left {
  flex-basis: 33%;
}

/* 右：最新記事 */
.top-right {
  flex-basis: 67%;
}

/* ===== タイトル ===== */
.site-top h1 {
  color: #003366;
  font-size: 32px;
  margin-bottom: 10px;
  text-align: center;
}

.site-top .subtitle {
  color: #555;
  margin-bottom: 30px;
  text-align: center;
}

/* ===== セクション ===== */
.section {
  background: #ffffff;
  border-left: 8px solid #0066CC;
  padding: 20px;
  margin-bottom: 30px;
}

.section h2 {
  color: #0066CC;
  margin-top: 0;
}

/* ===== 学年見出し ===== */
.section h3 {
  color: #003366;
  margin-bottom: 10px;
}

/* ===== リンク ===== */
.section ul {
  list-style: none;
  padding-left: 0;
}

.section li {
  margin-bottom: 8px;
}

.section a {
  text-decoration: none;
  color: #0066CC;
  font-weight: bold;
}

.section a:hover {
  color: #003366;
  text-decoration: underline;
}

.highlight {
  background: #FFCC00;
  padding: 15px;
  font-weight: bold;
  margin: 0 auto 30px auto; /* 上:0, 左右:auto, 下:30px */
  text-align: center;       /* 文字中央 */
  width: 80%;               /* 幅は80% */
  box-sizing: border-box;   /* パディング込みで幅を計算 */
}

/* ===== スマホ対応 ===== */
@media screen and (max-width: 768px) {

  .site-top {
    padding: 15px;
    max-width: 100%;
  }

  .top-layout {
    flex-direction: column; /* 縦並び */
    width: 100%; /* 幅は100%に */
  }

  .top-left,
  .top-right {
    width: 100%; /* 全幅 */
  }

  /* スマホでは見出し少し小さく */
  .site-top h1 {
    font-size: 24px;
  }

  .section {
    padding: 15px;
  }
}



.page-wrap-printpage {
  max-width: 80%;
  margin: 0 auto;
}

/* ブロック内 */
.print-item {
  display: flex;
  align-items: flex-start; /* 上を揃える */
  gap: 16px;
}

/* サムネ */
.print-item img {
  width: 250px;
  border: 1px solid #ccc;
  border-radius: 6px;
  display: block;
  flex-shrink: 0;
}

/* リンク5個ゾーン */
.print-links {
  display: grid;
  grid-template-columns: repeat(1, minmax(140px, 1fr));
  gap: 5px;
  width: 100%;
  min-width: 0;
}

.print-links a {
  display: block;        /* 縦に並べる */
  white-space: nowrap;  /* 勝手に改行させない */
  margin-bottom: 6px;   /* 行間だけ少し */
}

.plus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ← 3つ並べる */
  gap: 150px;
}




/* ===== スマホ専用レイアウト調整 ===== */
@media screen and (max-width: 768px) {

  /* 全体幅を少し余裕もたせる */
  .page-wrap-printpage {
    max-width: 100%;
    padding: 0 12px;
  }

  /* 3列 → 1列 */
  .plus-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* サムネ＋リンクを縦に */
  .print-item {
    display:grid;
    flex-direction: column;
    align-items: center;
  }

  /* サムネをスマホ用サイズに */
  .print-item img {
    display: block;
    width: 60vw !important;
    max-width:60vw !important;
    height: auto;
    margin: 0 auto;
  }

  /* リンクは中央寄せ */
  .print-links {
    width: 100%;
    justify-items: center;
  }

  .print-links a {
    text-align: center;
    white-space: normal; /* スマホでは改行OK */
  }
}