/*
Theme Name: Vistras Original
Description: 一般社団法人 地域自殺対策戦略機構 コーポレートサイト用オリジナルテーマ（v18デザイン準拠）
Author: Custom Build
Version: 1.0
Text Domain: vistras
*/

/* ===== リセット ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN',sans-serif;
  background:#FAFAF8; color:#333; line-height:1.8;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.site-wrap { max-width:1080px; margin:0 auto; background:#fff; }

/* ===== カラートークン（サイト全体で使い回す） ===== */
:root {
  --color-navy: var(--navy);
  --color-terracotta: #C97A5B;
  --color-bg-sub: #F7F5F1;
  --color-text-sub: #999;
  --color-border: #EFEFEF;

  /* カスタマイザー「デザイン（色・文字サイズ）」で上書きされる初期値 */
  --ink:#101b25;
  --navy:#112a41;
  --muted:#66737c;
  --fs-heading:1;
  --fs-body:1;
}

/* ===== Header ===== */
.site-header {
  padding:1.3rem 2.5rem; display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--color-border); position:sticky; top:0; background:#fff; z-index:10;
}
.site-header .logo { font-size:calc(13px * var(--fs-body)); font-weight:600; color:var(--color-navy); letter-spacing:0.03em; }
.site-header nav { display:flex; gap:1.9rem; font-size:calc(11.5px * var(--fs-body)); color:var(--muted); }
.site-header nav a:hover { color:var(--color-navy); }
.site-header nav .cta { color:var(--color-terracotta); font-weight:500; }

/* ===== Hero ===== */
.hero { padding:7rem 2rem 5rem; text-align:center; }
.hero .eyebrow { font-size:calc(10.5px * var(--fs-body)); letter-spacing:0.35em; color:var(--color-terracotta); margin-bottom:26px; }
.hero h1 { font-size:calc(38px * var(--fs-heading)); font-weight:500; line-height:1.9; color:var(--color-navy); margin-bottom:20px; letter-spacing:0.02em; }
.hero .sub { font-size:calc(14px * var(--fs-body)); color:var(--color-terracotta); margin-bottom:28px; letter-spacing:0.05em; }
.hero p { font-size:calc(12.5px * var(--fs-body)); color:var(--color-text-sub); max-width:440px; margin:0 auto; line-height:2.1; }

section { padding:3.4rem 2.5rem; }
.section-label { font-size:calc(10.5px * var(--fs-body)); letter-spacing:0.15em; color:#B0B0B0; margin-bottom:1.6rem; }

/* ===== Vision ===== */
.vision { background:var(--color-bg-sub); text-align:center; padding:5rem 2.5rem; }
.vision .label { font-size:calc(10.5px * var(--fs-body)); letter-spacing:0.2em; color:var(--color-terracotta); margin-bottom:24px; }
.vision h2 { font-size:calc(22px * var(--fs-heading)); font-weight:500; color:var(--color-navy); line-height:2; max-width:620px; margin:0 auto 24px; }
.vision p { font-size:calc(12.5px * var(--fs-body)); color:var(--muted); max-width:560px; margin:0 auto; line-height:2.2; }

/* ===== 事業内容 ===== */
.services { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--color-border); border:1px solid var(--color-border); }
.services div { background:#fff; padding:2rem 1.6rem; }
.services .num { font-size:calc(10px * var(--fs-body)); color:var(--color-terracotta); margin-bottom:14px; letter-spacing:0.05em; }
.services .title { font-size:calc(14.5px * var(--fs-body)); font-weight:500; color:var(--color-navy); margin-bottom:10px; }
.services .desc { font-size:calc(11.5px * var(--fs-body)); color:var(--color-text-sub); line-height:1.9; }

/* ===== 理事紹介 ===== */
.board { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 20px; }
.board .member { text-align:center; }
.board .photo { width:76px; height:76px; border-radius:50%; background:#EEEAE3; margin:0 auto 12px; overflow:hidden; }
.board .photo img { width:100%; height:100%; object-fit:cover; }
.board .name { font-size:calc(12.5px * var(--fs-body)); font-weight:500; color:var(--color-navy); margin-bottom:4px; }
.board .role { font-size:calc(10.5px * var(--fs-body)); color:var(--muted); }

/* ===== 連携協定 ===== */
.partners { background:var(--color-bg-sub); border-radius:10px; padding:1.9rem 2.2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.partners .label { font-size:calc(10.5px * var(--fs-body)); color:#B0B0B0; margin-bottom:6px; letter-spacing:0.1em; }
.partners .names { font-size:calc(12.5px * var(--fs-body)); color:var(--muted); }
.partners .more { font-size:calc(11px * var(--fs-body)); color:var(--color-terracotta); white-space:nowrap; }

/* ===== 活動報告（投稿ループ） ===== */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.news-card .thumb {
  background:linear-gradient(135deg,var(--color-navy) 0%,#2A3F63 100%);
  height:120px; border-radius:6px; margin-bottom:14px; overflow:hidden;
}
.news-card .thumb img { width:100%; height:100%; object-fit:cover; }
.news-card .meta { font-size:calc(10px * var(--fs-body)); color:#B0B0B0; margin-bottom:8px; }
.news-card .tag { padding:2px 8px; border-radius:3px; margin-left:6px; }
.news-card .tag.a { background:#1C2B4510; color:var(--color-navy); }
.news-card .tag.b { background:#C97A5B15; color:var(--color-terracotta); }
.news-card .title { font-size:calc(12.5px * var(--fs-body)); color:#333; line-height:1.7; }
.news-more { text-align:center; margin-top:2rem; }
.news-more a { font-size:calc(11.5px * var(--fs-body)); color:var(--color-terracotta); border-bottom:1px solid #C97A5B44; padding-bottom:3px; }

/* ===== CTA ===== */
.cta-band { background:var(--color-navy); color:#fff; text-align:center; padding:4rem 2rem; }
.cta-band p.label { font-size:calc(10.5px * var(--fs-body)); letter-spacing:0.25em; color:var(--color-terracotta); margin-bottom:18px; }
.cta-band h3 { font-size:calc(20px * var(--fs-heading)); font-weight:500; margin-bottom:24px; line-height:1.8; }
.cta-band .btn {
  display:inline-block; background:var(--color-terracotta); color:#fff; border:none; padding:12px 32px; border-radius:4px;
  font-size:calc(12.5px * var(--fs-body)); letter-spacing:0.05em; cursor:pointer;
}

/* ===== Footer ===== */
.site-footer { padding:2.6rem 2.5rem 2rem; }
.site-footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem; }
.site-footer .colname { font-size:calc(10.5px * var(--fs-body)); color:#B0B0B0; margin-bottom:12px; letter-spacing:0.1em; }
.site-footer .collink { font-size:calc(11.5px * var(--fs-body)); color:var(--muted); margin-bottom:8px; }
.site-footer .bottom { border-top:1px solid var(--color-border); padding-top:1.4rem; display:flex; justify-content:space-between; font-size:calc(10px * var(--fs-body)); color:#BBB; }

@media (max-width:700px) {
  .services, .board, .news-grid, .site-footer .cols { grid-template-columns:1fr; }
  .site-header nav { display:none; }
}