/* ===== 基本設定 ===== */
:root{
  --bg:#0b0b0c; --fg:#e6e7ea; --muted:#a6adbb; --line:#1b1c20;
  --accent:#8ab7ff;
  --maxw:980px; --pad:20px;
  --gap:18px;
  --radius:12px;
  --shadow-soft:0 6px 18px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ color-scheme:dark; }
body{
  background:var(--bg); color:var(--fg);
  font:16px/1.7 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP","Yu Gothic UI","Meiryo",Roboto,sans-serif;
  letter-spacing:.01em; text-rendering:optimizeLegibility;
}

/* アクセシビリティ */
.skip{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip:focus{ position:fixed; left:var(--pad); top:var(--pad); background:#fff; color:#000; padding:8px 12px; border-radius:6px; z-index:1000; }

/* コンテナ */
.wrap{ width:min(var(--maxw), 100% - 2*var(--pad)); margin-inline:auto; }

/* ルビ：英語(rt)を下 */
.rb-under{ ruby-position:under; }
ruby rt{ color:var(--muted); font-size:.68em; letter-spacing:.06em; }

/* ===== ヘッダー／ナビ ===== */
.header{
  position:sticky; top:0; z-index:10;
  background:rgba(0,0,0,.7); border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.header-row{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.logo{ margin:0; font-size:clamp(18px,2.2vw,22px); font-weight:700; }
.logo a{ color:inherit; text-decoration:none; }

/* PCナビ（折返し防止：nowrap＋横スクロール） */
.nav{
  margin-left:auto; display:flex; gap:14px;
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.nav a{
  display:inline-flex; align-items:center; gap:8px;
  white-space:nowrap;
  padding:8px 10px; border-radius:10px; border:1px solid transparent;
  text-decoration:none; color:inherit;
}
.nav a:hover, .nav a:focus-visible{ border-color:var(--accent); outline:2px solid transparent; }
.ico{ width:18px; height:18px; fill:currentColor; }

/* ハンバーガー（SP） */
.navchk{ display:none; }
.navbtn{
  display:none; margin-left:auto; border:1px solid var(--line);
  width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center;
  background:transparent; cursor:pointer;
}
.navbtn .ico{ width:22px; height:22px; opacity:.9; }

/* 早めにSPへ切替（960px）して二段化を回避 */
@media (max-width:960px){
  .navbtn{ display:inline-flex; }
  .nav{
    position:fixed; right:16px; top:64px; width:min(320px,92vw);
    display:block; padding:8px;
    background:#0f1014; border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow-soft);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.22s ease;
  }
  .nav a{ display:flex; padding:12px; border-radius:10px; }
  .nav a:hover{ background:rgba(255,255,255,.04); border-color:transparent; }
  .navchk:checked ~ .navbtn{ border-color:var(--accent); }
  .navchk:checked ~ .nav{ transform:none; opacity:1; pointer-events:auto; }
}

/* ===== ヒーロー（テキスト版：かたち＝金色＋上品な光アニメ） ===== */
.hero{
  margin: 24px 0 14px;
}
.hero-copy{
  margin: 0;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .01em;
  font-size: clamp(24px, 5.4vw, 48px);
  text-align: center;
  color: var(--fg);
}

/* 「かたち」金色＋上品な光の反射 */
.katati{
  position: relative;
  display: inline-block;
  color: #ffce54; /* ベース金色 */
  font-weight: 900;
  background: linear-gradient(90deg, #ffd56a, #fff2b2, #ffbf00, #ffd56a);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: katatiShine 5s ease-out forwards;
  will-change: background-position, filter;
}

/* 光の流れアニメ（控えめ） */
@keyframes katatiShine {
  0% { background-position: 0% 50%; filter: brightness(1); }
  40% { background-position: 80% 50%; filter: brightness(1.4); }
  70% { background-position: 100% 50%; filter: brightness(1.2); }
  100% { background-position: 100% 50%; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .katati { animation: none; background-position: 100% 50%; filter: brightness(1); }
}

/* ===== 見出し ===== */
.sec{ margin:0 0 10px; font-size:clamp(18px,2.2vw,22px); font-weight:700; }

/* ===== コンテンツ：画像のみ・1カラム ===== */
.image-list{ display:grid; gap:var(--gap); }
.fig{ display:block; position:relative; }
.fig img{ display:block; width:100%; height:auto; border:0; }

@media (hover:hover){
  .fig img{ transition: transform .18s ease, box-shadow .18s ease; }
  .fig:hover img{ transform: scale(1.012); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
}
.fig:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* ===== お知らせ ===== */
#news{ margin-top:36px; }
.news{ list-style:none; margin:0; padding:0; }
.news-item{ border-top:1px solid var(--line); }
.news-item:last-child{ border-bottom:1px solid var(--line); }
.news-link{
  display:flex; gap:12px; align-items:baseline; padding:12px 4px;
  color:inherit; text-decoration:none;
}
.news-link time{ color:var(--muted); font-variant-numeric:tabular-nums; min-width:8ch; }
@media (hover:hover){
  .news-link{ transition: background-color .16s ease, color .16s ease; }
  .news-link:hover{ background:rgba(255,255,255,.03); }
  .news-link:hover time{ color:var(--accent); }
}
.news-link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }

/* 前年度以前トグル */
.toggle-old{ display:none; }
.ghost-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:transparent; cursor:pointer;
  user-select:none; text-decoration:none; color:inherit;
}
.ghost-btn .ico{ width:16px; height:16px; transform:rotate(0); transition:transform .18s ease; }
.toggle-old:checked + .ghost-btn .ico{ transform:rotate(180deg); }
.ghost-btn:hover{ border-color:var(--accent); }

.oldnews-panel{ max-height:0; overflow:hidden; transition:max-height .24s ease; }
.toggle-old:checked ~ .oldnews-panel{ max-height:1200px; }

/* ===== 代表コラム ===== */
.cta-row{
  margin-top:10px;
  text-align:left; /* ★ 左寄せに変更 */
}
.cta-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:1px solid var(--line); border-radius:999px;
  text-decoration:none; color:inherit;
}
.cta-link:hover{ border-color:var(--accent); }

/* ===== 組織概要 ===== */
.toggle-about{ display:none; }
.about-panel{ max-height:0; overflow:hidden; transition:max-height .24s ease; }
.toggle-about:checked ~ .about-panel{ max-height:800px; }
.about-list{ display:grid; gap:10px; margin-top:12px; }
.about-list dt{ color:var(--muted); min-width:7em; }
.about-list dd{ margin:0; }

/* ===== お問い合わせ ===== */
.contact-row{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:10px;
  justify-content:flex-start; /* ★ 左寄せに変更 */
}
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px;
  border:1px solid var(--line); text-decoration:none; color:inherit;
}
.btn:hover{ border-color:var(--accent); }
.btn-secondary{ opacity:.95; }

/* ===== フッター ===== */
.footer{ margin-top:36px; border-top:1px solid var(--line); }
.footer .wrap{ text-align:center; padding:22px 0 40px; color:var(--muted); }

/* ===== フォーカス可視化 ===== */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }


/* ===== ヘッダーロゴ画像 ===== */
.yoiyoru-logo {
  height: 28px; /* ロゴの高さ調整 */
  margin-left: 10px; /* タイトルとの間隔 */
  vertical-align: middle;
  opacity: 0.95;
  transition: opacity .2s ease;
}

.logo a:hover .yoiyoru-logo {
  opacity: 1;
}