@charset "utf-8";

/* =========================
   共通（SPも含む：軽い安全策だけ）
   ========================= */
.inner_news img,
.pickup .photo img {
  display: block;
  max-width: 100%;
  height: auto;
}

.pickup {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 10px;
  align-items: start;
}

.inner_news {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1px;
}

/* タブはスマホでも縦で見やすく */
.course-tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0 10px;
}

/* =========================
   タブレット・PC：中央縦並びレイアウト（スマホと同じ順序）
   ヘッダー・フッター・NAVはcommon.cssで固定
   ========================= */
@media (min-width: 641px) and (max-width: 999px) {
  /* main（中央縦並び、スマホと同じ順序） */
  main#content {
    margin-left: var(--tablet-nav-w) !important;
    margin-right: auto;
    padding-top: var(--tablet-header-h);
    padding-bottom: var(--tablet-footer-h);
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 720px;
    width: calc(100% - var(--tablet-nav-w) - 32px);
  }

  /* 各セクションは通常のブロック表示（スマホと同じ順序） */
  main#content > section {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (min-width: 1000px) {
  :root {
    --pc-header-h: 156px;
    --pc-footer-h: 60px;
    --pc-nav-w: 300px;
    --box-max: 720px;
  }

  /* main（中央縦並び、スマホと同じ順序） */
  main#content {
    margin-left: var(--pc-nav-w) !important;
    margin-right: auto;
    padding-top: var(--pc-header-h);
    padding-bottom: var(--pc-footer-h);
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: var(--box-max);
    width: calc(100% - var(--pc-nav-w) - 32px);
  }

  /* 各セクションは通常のブロック表示（スマホと同じ順序） */
  main#content > section {
    width: 100%;
    box-sizing: border-box;
  }

  /* 出勤表は非表示 */
  .section-work {
    display: none;
  }

  /* PC表示：画像を拡大しすぎないように制限 */
  .inner_news img,
  .pickup .photo img {
    width: auto;
    max-width: 100%;
  }

  .pickup {
    grid-template-columns: 150px 1fr; /* スマホと同じサイズ維持 */
  }
}