@charset "UTF-8";
/* ==========================================================================
   STEMON北九州 - style.css
   ベース / デザイントークン / タイポグラフィ / レイアウト
   WordPress(Lightning)移植時は、このファイルを子テーマの style.css または
   functions.php から wp_enqueue_style() で読み込む想定。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（CSS変数）
   -------------------------------------------------------------------------- */
:root {
  /* 基本色 */
  --color-primary:        #17529b; /* メイン：信頼感のあるブルー */
  --color-primary-dark:   #0f3c74;
  --color-primary-light:  #e8f0fa;

  /* アクセント色 */
  --color-accent:         #ef7d00; /* CTA / ものづくり */
  --color-accent-dark:    #d26a00;
  --color-accent-light:   #fff3e5;

  --color-steam:          #0f9c7c; /* STEAM / 科学 */
  --color-steam-light:    #e6f6f2;
  --color-robot:          #7a4bc4; /* ロボット */
  --color-robot-light:    #f1ebfb;
  --color-yellow:         #ffc233;

  /* 文字色 */
  --color-text:           #1f2a37;
  --color-text-muted:     #5b6674;
  --color-text-invert:    #ffffff;

  /* 背景色 */
  --color-bg:             #ffffff;
  --color-bg-soft:        #f4f7fb;
  --color-bg-warm:        #fff9f2;
  --color-border:         #dfe5ec;
  --color-border-strong:  #c3cddb;

  /* 最大幅 */
  --width-max:            1120px;
  --width-narrow:         760px;
  --width-wide:           1320px;

  /* 余白 */
  --space-2xs:  .25rem;
  --space-xs:   .5rem;
  --space-sm:   .75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;
  --section-padding:      3.5rem; /* セクション上下余白（SP） */
  --gutter:               1.25rem; /* 左右の最低余白 */

  /* ボタン */
  --btn-padding-y:        .9rem;
  --btn-padding-x:        1.75rem;
  --btn-font-size:        1rem;

  /* 角丸 */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* 影 */
  --shadow-sm: 0 1px 3px rgba(23, 42, 71, .08);
  --shadow-md: 0 4px 16px rgba(23, 42, 71, .10);
  --shadow-lg: 0 12px 32px rgba(23, 42, 71, .13);

  /* その他 */
  --header-height: 60px;
  --transition:    .2s ease;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  margin: 0;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic",
               "Noto Sans JP", Meiryo, "Yu Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

img, svg, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: .15em;
  transition: color var(--transition);
}
a:hover, a:focus-visible { color: var(--color-accent-dark); }

:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

ul, ol { padding-left: 1.3em; }
li + li { margin-top: .3em; }

table { border-collapse: collapse; width: 100%; }

/* 視覚的に隠すがスクリーンリーダーには読ませる */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. タイポグラフィ
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  line-height: 1.4;
  font-weight: 700;
  color: var(--color-text);
}

h1 { font-size: 1.75rem; letter-spacing: .01em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1.03rem; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.stm-lead {
  font-size: 1.06rem;
  color: var(--color-text-muted);
}

.text-center { text-align: center; }
.text-muted  { color: var(--color-text-muted); }
.text-sm     { font-size: .875rem; }
.text-xs     { font-size: .8rem; }
.text-accent { color: var(--color-accent-dark); }
.nowrap      { white-space: nowrap; }

/* 注釈 */
.stm-note {
  font-size: .85rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   4. レイアウト
   -------------------------------------------------------------------------- */
.stm-container {
  width: 100%;
  max-width: var(--width-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.stm-container--narrow { max-width: var(--width-narrow); }
.stm-container--wide   { max-width: var(--width-wide); }

.stm-section {
  padding-block: var(--section-padding);
}
.stm-section--soft { background: var(--color-bg-soft); }
.stm-section--warm { background: var(--color-bg-warm); }
.stm-section--primary {
  background: var(--color-primary);
  color: var(--color-text-invert);
}
.stm-section--primary h2,
.stm-section--primary h3 { color: var(--color-text-invert); }
.stm-section--primary a  { color: #ffffff; }
.stm-section--tight { padding-block: calc(var(--section-padding) * .6); }

/* セクション見出し */
.section-head {
  margin-bottom: var(--space-xl);
}
.section-head--center { text-align: center; }
.section-head__label {
  display: inline-block;
  margin-bottom: var(--space-xs);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-accent-dark);
  text-transform: uppercase;
}
.section-head__title {
  font-size: 1.5rem;
  margin-bottom: var(--space-sm);
}
.section-head__lead {
  margin: 0;
  color: var(--color-text-muted);
}
.stm-section--primary .section-head__label { color: var(--color-yellow); }
.stm-section--primary .section-head__lead  { color: rgba(255,255,255,.88); }

/* 汎用グリッド（SPは1カラム、responsive.css で段階的に増やす） */
.stm-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}

/* 横スクロールを許すラッパー（表や時間割用） */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 本文用の余白ユーティリティ（最小限） */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* --------------------------------------------------------------------------
   5. 記事本文（固定ページ本文で使う基本スタイル）
   -------------------------------------------------------------------------- */
.prose > * + * { margin-top: 1.2em; }
.prose h2 {
  margin-top: 2.2em;
  padding-bottom: .4em;
  border-bottom: 3px solid var(--color-primary-light);
  font-size: 1.35rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  margin-top: 1.8em;
  padding-left: .65em;
  border-left: 5px solid var(--color-accent);
  font-size: 1.1rem;
}
.prose ul, .prose ol { margin-block: 1em; }
.prose img { border-radius: var(--radius-md); }

/* 印刷時の最低限の配慮 */
@media print {
  .site-header, .site-footer, .cta-band, .breadcrumb { display: none; }
  body { color: #000; }
}