/*
Theme Name: マテックス様 ワイヤーフレーム準拠テーマ
Description: 提出済みワイヤーフレームの配色・タイポグラフィ・レイアウトをそのまま再現したオリジナルテーマです。ヘッダー・パンくず・フッター・カード等の見た目をワイヤーフレームに合わせています。
Author: Matex
Version: 1.4
Text Domain: matex-wireframe-theme
*/

:root{
  --paper:#fafaf9;
  --panel:#ffffff;
  --ink:#18181b;
  --ink-soft:#52525b;
  --line:#3f3f46;
  --line-soft:#a1a1aa;
  --line-faint:#d4d4d8;
  --fill:#e4e4e7;
  --fill-mid:#d4d4d8;
  --fill-soft:#f4f4f5;
  --upd:#18181b;
  --upd-bg:#f4f4f5;
  --upd-border:#a1a1aa;
  --proposal:#b5530a;
  --review-bg:#fff8e7;
  --review-line:#c47f00;
  --review-ink:#5c3b00;
  --review-tag-bg:#f3d089;
}
*{box-sizing:border-box;}

/* クライアント確認コメント：白パネル外の右グレー余白へ絶対配置（スクロール非追従・本体非干渉・本番前削除可） */
.review-layer{
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:0;
  z-index:40;
  pointer-events:none;
  overflow:visible;
}
.review-layer-label{
  position:absolute;
  font-size:10px;
  letter-spacing:.06em;
  font-weight:700;
  color:var(--review-ink);
  background:var(--review-bg);
  border:1px solid var(--review-line);
  padding:6px 10px;
  pointer-events:auto;
  box-sizing:border-box;
}
.review-pin{
  position:absolute;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  background:var(--review-bg);
  border:1.4px solid var(--review-line);
  border-left:4px solid var(--review-line);
  color:var(--review-ink);
  font-size:12px;
  line-height:1.55;
  pointer-events:auto;
  box-sizing:border-box;
  max-width:240px;
}
.review-pin.is-unanchored{ opacity:.92; }
.review-tag{
  align-self:flex-start;
  display:inline-block;
  padding:2px 7px;
  font-size:10px;
  font-weight:700;
  font-family:'IBM Plex Mono',monospace;
  background:var(--review-tag-bg);
  border:1px solid var(--review-line);
  color:var(--review-ink);
}
.review-text{ display:block; white-space:pre-line; }
html{ scroll-behavior:smooth; }
html,body{height:100%;}
[id^="matex-cf-block"]{ scroll-margin-top:24px; }
body{
  position:relative;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Archivo',sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
.mono{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* ---------- ページ全体の最大幅（ワイヤーフレームの1280px幅に合わせる） ---------- */
.site-shell{
  max-width:1280px; margin:0 auto; background:var(--panel);
  min-height:100vh;
}

/* ---------- header / nav ---------- */
.wf-nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 40px; border-bottom:1.4px solid var(--line); background:var(--panel); flex-wrap:wrap; row-gap:14px; }
.wf-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.wf-logo-mark{ width:36px; height:36px; background:var(--ink); flex:none; }
.wf-logo-text{ display:flex; flex-direction:column; line-height:1.4; }
.wf-logo-text .org{ font-size:9.5px; color:var(--ink-soft); }
.wf-logo-text .name{ font-size:13.5px; font-weight:800; letter-spacing:-.01em; white-space:nowrap; color:var(--ink); }
.wf-menu{ display:flex; align-items:baseline; gap:26px; flex-wrap:wrap; }
.wf-menu a{ font-size:13px; font-weight:600; color:var(--ink); text-decoration:none; }
.wf-menu a.on{ text-decoration:underline; text-underline-offset:4px; }

/* ---------- breadcrumb / page title ---------- */
.page-title-bar{ width:100%; padding:22px 40px; border-bottom:1.4px solid var(--line); background:var(--panel); }
.page-title-bar h1{ margin:0; font-size:22px; font-weight:800; letter-spacing:-.01em; line-height:1.3; }
.crumb{ padding:16px 40px 0; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); }
.crumb a{ color:var(--ink-soft); text-decoration:none; }
.crumb b{ color:var(--ink); font-weight:600; }

/* ---------- layout helpers ---------- */
.section-gap{ padding:0 40px; }
.section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.stack{ display:flex; flex-direction:column; gap:10px; }

/* ---------- content typography ---------- */
.entry-content{ font-size:14.5px; line-height:1.9; color:var(--ink); }
.entry-content h2{ font-size:19px; font-weight:800; letter-spacing:-.005em; margin:34px 0 12px; }
.entry-content h2:first-child{ margin-top:0; }
.entry-content h3{ font-size:150%; font-weight:800; margin:24px 0 8px; }
.entry-content h4{ font-size:120%; font-weight:800; margin:18px 0 6px; }
.entry-content p{ margin:0 0 14px; }
.entry-content ul{ margin:0 0 14px; padding-left:1.2em; }
.entry-content li{ margin-bottom:6px; }
.entry-content a{ text-decoration:underline; text-underline-offset:3px; }
.entry-content img{ max-width:100%; height:auto; }

/* ---------- atoms reused from the wireframe ---------- */
.imgph{ background:var(--fill-soft); border:1.4px solid var(--line); position:relative; }
.imgph::before,.imgph::after{ content:""; position:absolute; inset:0; }
.imgph::before{ background:linear-gradient(to bottom right, transparent calc(50% - .6px), var(--line-soft) calc(50% - .6px), var(--line-soft) calc(50% + .6px), transparent calc(50% + .6px)); }
.imgph::after{ background:linear-gradient(to top right, transparent calc(50% - .6px), var(--line-soft) calc(50% - .6px), var(--line-soft) calc(50% + .6px), transparent calc(50% + .6px)); }
.imgph .tag{ position:absolute; left:9px; top:9px; z-index:2; background:var(--panel); border:1px solid var(--line-soft); font-family:'IBM Plex Mono',monospace; font-size:9.5px; padding:2px 6px; color:var(--ink-soft); }

.wbtn{
  display:inline-flex; align-items:center; gap:6px;
  border:1.4px solid var(--line); padding:10px 20px;
  font-size:12.5px; font-weight:700; font-family:'IBM Plex Mono',monospace;
  background:var(--panel); width:fit-content; text-decoration:none; color:var(--ink);
}
.wbtn.solid{ background:var(--ink); color:#fafafa; border-color:var(--ink); }
.wbtn::after{ content:"→"; }

.wlink{ font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; color:var(--ink); width:fit-content; }

.badge{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px; letter-spacing:.06em;
  border:1px solid var(--line); padding:2px 7px; color:var(--ink);
  text-transform:uppercase; width:fit-content; flex:none; display:inline-block;
}

.card{ border:1.4px solid var(--line); padding:18px; display:flex; flex-direction:column; gap:12px; background:var(--panel); }
.row-list > *{ border-bottom:1px solid var(--line-faint); }
.row-list > *:last-child{ border-bottom:none; }

.pill{ border:1.4px solid var(--line); padding:7px 15px; font-size:12px; font-weight:600; font-family:'IBM Plex Mono',monospace; display:inline-block; }
.pill.active{ background:var(--ink); color:#fafafa; }

.dash{ border:1.4px dashed var(--line-soft); }

/* FAQ (details/summary) */
.entry-content details.dash{ padding:14px 18px; margin-bottom:10px; background:var(--panel); }
.entry-content details.dash summary{ cursor:pointer; font-weight:700; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.entry-content details.dash summary::-webkit-details-marker{ color:var(--ink-soft); }
.entry-content details.dash p{ margin-top:10px; margin-bottom:0; }
.faq-item{ background:var(--panel); }
.faq-q{
  display:flex; align-items:center; gap:16px;
  padding:17px 18px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:600;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:"＋"; margin-left:auto; font-family:'IBM Plex Mono',monospace;
  font-size:14px; color:var(--ink-soft); flex:none;
}
.faq-item[open] > .faq-q::after{ content:"−"; }
.faq-item[open] > .faq-q{ font-weight:700; }
.faq-q-text{ flex:1; }
.faq-a{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 18px 20px 18px; font-size:13.5px; line-height:1.9;
}

/* ---------- footer ---------- */
.footer-sitemap{
  border-top:1.4px solid var(--line); padding:32px 40px; display:grid;
  grid-template-columns:repeat(5,1fr); gap:30px; background:var(--panel);
}
.footer-sitemap .col{ display:flex; flex-direction:column; gap:10px; }
.footer-sitemap .col-head{ font-size:10.5px; letter-spacing:.05em; color:var(--ink-soft); }
.footer-sitemap .col a{ font-size:12px; line-height:1.5; text-decoration:none; color:var(--ink); }
.footer-sitemap .col a:hover{ text-decoration:underline; }
.footer{
  border-top:1.4px solid var(--line);
  padding:26px 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-size:11.5px; color:var(--ink-soft); background:var(--panel);
}
.footer .fmenu{ display:flex; gap:18px; flex-wrap:wrap; }
.footer .fmenu a{ color:var(--ink-soft); text-decoration:none; }
.footer .fmenu a:hover{ text-decoration:underline; }

/* ---------- front page ---------- */
.front-hero-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.front-hero-cards .card a.wlink{ margin-top:auto; }
.front-heading{ color:var(--ink); }

/* ---------- news / update rows (WF) ---------- */
.upd-row{ background:var(--upd-bg); border-left:3px solid var(--upd); }
.row-list > .upd-row{ border-bottom:1px solid var(--upd-border); }
.row-list > .upd-row:last-child{ border-bottom:none; }
.badge.upd{ border-color:var(--upd); color:var(--upd); }
.upd-legend{ display:inline-flex; align-items:center; gap:7px; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--upd); }
.upd-legend .sw{ width:11px; height:11px; background:var(--upd-bg); border-left:3px solid var(--upd); border-top:1px solid var(--upd-border); border-bottom:1px solid var(--upd-border); border-right:1px solid var(--upd-border); flex:none; }
a.news-row{ display:flex; gap:18px; align-items:center; padding:15px 18px; text-decoration:none; color:var(--ink); }
a.news-row:hover .news-row-title{ text-decoration:underline; text-underline-offset:3px; }
.news-row-title{ font-size:13.5px; flex:1; min-width:0; }
.news-row-date{ font-size:11px; color:var(--ink-soft); margin-left:auto; flex:none; }
a.pill{ text-decoration:none; color:inherit; cursor:pointer; }
a.pill.active{ color:#fafafa; }

/* ---------- block page (student_info) front-end ---------- */
.matex-blocks{ display:flex; flex-direction:column; gap:0; }
.matex-block-front{ border:1.4px solid var(--line); padding:20px; margin:0 0 20px !important; background:var(--panel); }
.matex-block-front h2{ margin-top:0 !important; }

/* 部活ブロック 目次 */
.matex-cf-toc{
  border:1.4px solid var(--line); padding:16px 18px; margin:0 0 28px; background:var(--fill-soft);
}
.matex-cf-toc ol{ margin:0; padding-left:1.2em; }
.matex-cf-toc li{ margin:6px 0; font-size:13.5px; }
.matex-cf-toc a{ text-decoration:none; }
.matex-cf-toc a:hover{ text-decoration:underline; text-underline-offset:3px; }

.sidenav-box{
  position:sticky;
  top:20px;
  align-self:start;
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.matex-cf-block{ border-bottom:1.4px solid var(--line-faint); }
.matex-cf-blocks > .matex-cf-block:last-child{ border-bottom:none; }

@media (max-width: 1100px){
  .footer-sitemap{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 900px){
  .site-shell{ border-left:none; border-right:none; }
  .wf-nav, .page-title-bar, .crumb, .section-gap, .footer-sitemap, .footer{ padding-left:20px; padding-right:20px; }
  .footer-sitemap{ grid-template-columns:repeat(2,1fr); }
  .sitemap-row{ grid-template-columns:1fr !important; gap:6px !important; }
  .front-hero-cards{ grid-template-columns:1fr; }
  .front-intro{ grid-template-columns:1fr !important; }
  .front-mv{ margin-left:20px !important; margin-right:20px !important; height:220px !important; }
  .section-gap > div[style*="grid-template-columns:240px"]{ display:block !important; }
  .sidenav-box{ margin-bottom:24px; position:static; max-height:none; overflow:visible; }
  .news-sidenav{ margin-bottom:24px; }
  a.news-row{ flex-wrap:wrap; gap:10px 14px; }
  .news-row-date{ margin-left:0; width:auto !important; }
}

.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.news-sidenav a:hover{ text-decoration:underline; text-underline-offset:3px; }


/* static design extras */
body{ background:var(--paper); }
.dev-bar{
  max-width:1280px; margin:0 auto; background:#111; color:#ccc;
  font-size:11px; padding:6px 14px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  font-family:'IBM Plex Mono',monospace;
}
.dev-bar a{ color:#9ec1ff; }
.tline{ height:9px; background:var(--line-faint); }
.tline.w95{width:95%;} .tline.w90{width:90%;} .tline.w80{width:80%;} .tline.w70{width:70%;}
.tline.w60{width:60%;} .tline.w50{width:50%;} .tline.w40{width:40%;} .tline.w30{width:30%;} .tline.w20{width:20%;}
.tline.head{ height:17px; background:var(--line-soft); }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:700; }
.field label i{ color:var(--ink-soft); font-style:normal; font-weight:400; }
.field .box{ border:1.4px solid var(--line-soft); height:40px; background:var(--panel); }
.field .box.ta{ height:100px; }
.checkline{ display:flex; align-items:center; gap:8px; font-size:12px; }
.checkbox{ width:16px; height:16px; border:1.4px solid var(--line); flex:none; }
.dash.upd-row{ border-color:var(--upd-border); border-left:3px solid var(--upd); background:var(--upd-bg); }
.sidenav-item.proposal{ color:var(--proposal); }
.navlink-item{ cursor:pointer; }
[id^="matex-cf-block"]{ scroll-margin-top:24px; }
.sidenav-box{
  position:sticky;
  top:20px;
  align-self:start;
  max-height:calc(100vh - 40px);
  overflow:auto;
}
.matex-cf-block{ border-bottom:1.4px solid var(--line-faint); }
.stack > .matex-cf-block:last-child{ border-bottom:none; }
.faq-item{ background:var(--panel); }
.faq-item[open]{ background:var(--panel); }
.faq-q{
  display:flex; align-items:center; gap:16px;
  padding:17px 18px; cursor:pointer; list-style:none;
  font-size:13px; font-weight:600;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::after{
  content:"＋"; margin-left:auto; font-family:'IBM Plex Mono',monospace;
  font-size:14px; color:var(--ink-soft); flex:none;
}
.faq-item[open] > .faq-q::after{ content:"−"; }
.faq-item[open] > .faq-q{ font-weight:700; }
.faq-q-text{ flex:1; }
.faq-a{
  display:flex; align-items:flex-start; gap:16px;
  padding:0 18px 20px 18px; font-size:13.5px; line-height:1.9;
}