:root{
    --bg:#eef3f9; --paper:#ffffff; --ink:#1f2d3d; --sub:#46586b; --line:#dbe3ee;
    --navy:#1e3a5f; --blue:#2563eb; --blue-soft:#e8f0fe; --gold:#b9791a; --gold-soft:#fbf2dd;
    --green:#2f7d4f; --green-soft:#e7f6ee; --warm:#fff7e8;
  }
  *{ box-sizing:border-box; }
  html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--ink);
    font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP","Meiryo",sans-serif;
    font-size:19px; line-height:1.8; }
  a{ color:var(--blue); }
  .wrap{ max-width:840px; margin:0 auto; padding:0 16px 64px; }
  .trial{ background:#fff3cd; border:1px solid #ffd866; color:#7a5b00; font-weight:700;
    text-align:center; border-radius:10px; padding:7px 14px; margin:12px 0 0; font-size:13.5px; line-height:1.5;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* ヘッダー */
  .site-head{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95);
    backdrop-filter:saturate(160%) blur(6px); border-bottom:1px solid var(--line); }
  .site-head .inner{ max-width:840px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--navy); }
  .brand img{ width:38px; height:38px; border-radius:50%; box-shadow:0 1px 4px rgba(31,45,61,.2); }
  .brand .nm{ font-size:19px; font-weight:800; letter-spacing:.02em; white-space:nowrap; }
  .orgs{ display:flex; gap:6px; }
  .org{ font-size:11.5px; font-weight:700; border-radius:999px; padding:2px 9px; }
  .org.k{ background:var(--blue-soft); color:var(--navy); }
  .org.j{ background:var(--gold-soft); color:var(--gold); }
  nav.main{ margin-left:auto; display:flex; gap:4px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  nav.main::-webkit-scrollbar{ display:none; }
  nav.main a{ font-size:13.5px; font-weight:700; text-decoration:none; color:var(--sub);
    padding:6px 10px; border-radius:8px; white-space:nowrap; }
  nav.main a:hover{ background:var(--blue-soft); color:var(--navy); }

  /* ヒーロー：一年の行事を写真で切り替える */
  .hero{ position:relative; overflow:hidden; color:#fff; border-radius:20px; margin:14px 0 12px;
    height:clamp(230px, 30vh, 300px); box-shadow:0 10px 26px rgba(30,58,95,.2);
    background:linear-gradient(160deg,#2a567f,#1e3a5f); }
  .hero .sl{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease-in-out;
    background-size:cover; background-position:center; pointer-events:none;
    display:block; text-decoration:none; color:inherit; }
  .hero .sl.on{ opacity:1; pointer-events:auto; }
  .hero a.sl:focus-visible{ outline:3px solid #ffe6a8; outline-offset:-4px; }
  .hero .sl::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(14,28,48,.40) 0%, rgba(14,28,48,.10) 32%, rgba(14,28,48,.66) 100%); }
  .hero .sl.oasis-sl{ background-color:#1c2a42; background-size:cover; background-position:center; }
  .hero .sl.oasis-sl::after{ background:linear-gradient(100deg, rgba(20,32,52,.10) 0%, rgba(20,32,52,.30) 34%, rgba(20,32,52,.80) 62%, rgba(20,32,52,.88) 100%); }
  .hero .cap{ position:absolute; top:14px; right:16px; z-index:3; font-size:12.5px; font-weight:700;
    background:rgba(14,28,48,.44); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:4px 13px; }
  .oasis-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column;
    align-items:flex-end; justify-content:center; gap:9px; padding:0 20px 40px 45%; text-align:right; }
  .oasis-in .ot{ font-size:12.5px; font-weight:800; letter-spacing:.18em; color:#ffe6a8; }
  .oasis{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; margin:0; }
  .oasis .c{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
    border-radius:11px; padding:5px 11px; font-size:13px; font-weight:700; }
  .oasis .c b{ color:#ffe6a8; font-size:15px; margin-right:4px; }
  .hero-t{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:13px 20px 12px;
    text-shadow:0 2px 12px rgba(10,20,35,.6); }
  .hero-t .who{ font-size:12.5px; font-weight:700; opacity:.96; }
  .hero-t h1{ margin:1px 0 2px; font-size:25px; font-weight:800; letter-spacing:.03em; }
  .hero-t .tg{ font-size:13px; margin:0; color:#eaf2fc; }
  @media (prefers-reduced-motion: reduce){ .hero .sl{ transition:none; } }

  h2{ font-size:21px; font-weight:800; color:var(--navy); margin:34px 0 8px; display:flex; align-items:center; gap:9px; }
  h2 .em{ font-size:23px; }
  .lead{ color:var(--sub); font-size:15.5px; margin:0 0 14px; }

  /* 2会紹介 */
  .twocols{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .ocard{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
  .ocard .h{ font-weight:800; color:var(--navy); font-size:17px; margin-bottom:4px; }
  .ocard .h .tag{ font-size:11.5px; font-weight:700; border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle; }
  .ocard.k .h .tag{ background:var(--blue-soft); color:var(--navy); }
  .ocard.j .h .tag{ background:var(--gold-soft); color:var(--gold); }
  .ocard p{ margin:4px 0 0; font-size:14.5px; color:var(--sub); }
  .joint{ margin-top:10px; background:var(--warm); border:1px solid #f0dcae; border-radius:12px;
    padding:11px 15px; font-size:14.5px; color:#5c4a23; }

  /* 年間行事カード */
  #tl{ display:flex; flex-direction:column; gap:14px; }
  .tlc{ position:relative; display:flex; gap:0; background:var(--paper);
    border:1px solid var(--line); border-radius:18px; overflow:hidden;
    box-shadow:0 2px 10px rgba(31,45,61,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  a.tlc{ text-decoration:none; color:inherit; }
  a.tlc:hover, a.tlc:focus-visible{ transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(31,45,61,.13); border-color:#b9c9de; }
  a.tlc:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }
  .tlc.next{ border-color:var(--blue); box-shadow:0 10px 26px rgba(37,99,235,.16); }

  /* 左の月バンド */
  .tlc .tlc-m{ flex:0 0 62px; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:1px; background:linear-gradient(170deg,#f3f7fc,#e8eef7); color:var(--navy); line-height:1;
    border-right:1px solid var(--line); }
  .tlc .tlc-m .mm{ font-size:25px; font-weight:800; letter-spacing:-.02em; }
  .tlc .tlc-m .mt{ font-size:11px; font-weight:700; color:var(--sub); }
  .tlc.next .tlc-m{ background:linear-gradient(170deg,#2f74c0,#2563eb); color:#fff; }
  .tlc.next .tlc-m .mt{ color:rgba(255,255,255,.85); }
  .tlc.done .tlc-m{ background:linear-gradient(170deg,#f4f6f8,#eceff3); color:#8494a6; }
  .tlc.done .tlc-m .mt{ color:#9aa7b5; }

  .tlc-b{ flex:1; padding:15px 16px 14px; min-width:0; }
  .tlc-ttl{ font-size:17.5px; font-weight:800; color:var(--ink); line-height:1.45; }
  .tlc-meta{ font-size:13px; color:var(--sub); margin-top:3px; }
  .tlc-sum{ font-size:14.5px; color:var(--sub); margin-top:7px; }
  .tlc-badges{ margin-top:10px; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
  .bdg{ font-size:11.5px; font-weight:700; border-radius:999px; padding:3px 11px; letter-spacing:.02em; }
  .bdg.done{ background:#eef1f5; color:#7a8aa0; }
  .bdg.cancel{ background:#f4ecee; color:#9b6b76; }
  .bdg.plan{ background:var(--blue-soft); color:var(--blue); }
  .bdg.open{ background:var(--green-soft); color:var(--green); }
  .bdg.navy{ background:#e6edf6; color:var(--navy); }
  .bdg.gold{ background:var(--gold-soft); color:var(--gold); }
  .bdg.both{ background:#eaf0fb; color:#3457a8; }
  .bdg.green{ background:var(--green-soft); color:var(--green); }
  .bdg.sky{ background:#e3f1fb; color:#1c6ea4; }
  .bdg.plain{ background:#eef1f5; color:#5c6b7d; }
  .bdg.lead{ font-weight:800; }

  /* 右端の丸い矢印（詳細ページがある行事だけ） */
  .tlc-go{ flex:0 0 52px; display:flex; align-items:center; justify-content:center; }
  .tlc-go i{ display:flex; align-items:center; justify-content:center; width:34px; height:34px;
    border-radius:50%; background:var(--blue-soft); color:var(--blue);
    font-style:normal; font-size:16px; font-weight:800; transition:background .18s ease, transform .18s ease; }
  a.tlc:hover .tlc-go i{ background:var(--blue); color:#fff; transform:translateX(2px); }

  .next-tag{ position:absolute; top:10px; right:12px; z-index:2; background:var(--blue); color:#fff;
    font-size:11px; font-weight:800; border-radius:999px; padding:3px 11px; letter-spacing:.04em;
    box-shadow:0 2px 8px rgba(37,99,235,.35); }
  .tlc.next .tlc-go{ padding-top:22px; }

  @media (max-width:480px){
    .tlc .tlc-m{ flex:0 0 52px; }
    .tlc .tlc-m .mm{ font-size:21px; }
    .tlc-b{ padding:13px 13px 12px; }
    .tlc-go{ flex:0 0 42px; }
  }

  /* 新着 */
  .news{ list-style:none; padding:0; margin:0; background:var(--paper); border:1px solid var(--line); border-radius:16px; }
  .news li{ padding:13px 17px; border-bottom:1px solid var(--line); font-size:15px; }
  .news li:last-child{ border-bottom:none; }
  .news .d{ font-size:12.5px; color:var(--sub); font-weight:700; }
  .news .o{ font-size:11.5px; font-weight:700; border-radius:999px; padding:1px 8px; margin-left:6px; }
  .news .o.k{ background:var(--blue-soft); color:var(--navy); }
  .news .o.j{ background:var(--gold-soft); color:var(--gold); }
  .news .o.b{ background:#eaf0fb; color:#3457a8; }

  /* CTA */
  .cta{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .cta a{ display:block; text-decoration:none; border-radius:16px; padding:20px 18px; text-align:center;
    font-weight:800; font-size:18px; box-shadow:0 6px 16px rgba(37,99,235,.16); }
  .cta .c1{ background:linear-gradient(100deg,#2f74c0,#2563eb); color:#fff; }
  .cta .c2{ background:var(--paper); color:var(--navy); border:2px solid var(--blue); box-shadow:none; }
  .cta .s{ display:block; font-size:13px; font-weight:600; margin-top:5px; opacity:.92; }

  /* カードグリッド（関係団体） */
  .grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .lcard{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:13px 16px; }
  .lcard .n{ font-weight:800; color:var(--navy); font-size:15.5px; }
  .lcard .r{ font-size:13.5px; color:var(--sub); margin-top:3px; }
  .lcard .soon{ font-size:11.5px; color:#9aa7b5; margin-top:5px; }
  .lcard .go{ font-size:12.5px; font-weight:700; margin-top:5px; }
  .lcard .go a{ text-decoration:none; }
  .lcard .go a:hover{ text-decoration:underline; }

  /* 連絡先 */
  .contact{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px; }
  .tel-btn{ display:inline-block; background:var(--navy); color:#fff; text-decoration:none; font-weight:800;
    font-size:19px; border-radius:12px; padding:12px 22px; margin:4px 0 8px; }
  .form-btn{ display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-weight:800;
    font-size:18px; border-radius:12px; padding:13px 24px; margin:6px 0 10px; box-shadow:0 4px 12px rgba(37,99,235,.22); }
  .contact .row{ font-size:15px; margin:6px 0; }
  .contact .row b{ color:var(--navy); }

  /* 汎用カード（会について・せいけん） */
  .panel{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
  .panel .more{ display:inline-block; margin-top:8px; font-weight:700; text-decoration:none; }

  footer{ margin-top:40px; padding-top:16px; border-top:1px solid var(--line); color:var(--sub); font-size:13.5px; }
  footer .orgline{ font-weight:700; color:var(--navy); }
  .meta{ font-size:11px; color:#8a99ab; text-align:center; padding:16px 2px 0; }

  /* A2HS */
  .a2hs{ position:relative; display:flex; align-items:center; gap:12px; background:#fff;
    border:1px solid var(--line); border-left:5px solid var(--blue); border-radius:14px;
    padding:14px 16px; margin:16px 0 0; box-shadow:0 3px 10px rgba(31,45,61,.07); }
  .a2hs[hidden]{ display:none; }
  .a2hs-ic{ font-size:26px; flex:0 0 auto; }
  .a2hs-body{ flex:1; font-size:14.5px; line-height:1.6; color:var(--sub); padding-right:14px; }
  .a2hs-body b{ display:block; color:var(--navy); font-size:16px; }
  .a2hs-btn{ flex:0 0 auto; background:var(--blue); color:#fff; border:none; border-radius:10px; padding:10px 18px; font-weight:800; font-size:15px; }
  .a2hs-btn[hidden]{ display:none; }
  .a2hs-x{ position:absolute; top:4px; right:8px; background:none; border:none; font-size:22px; color:#9aa7b5; line-height:1; padding:2px 4px; }

  @media (max-width:560px){
    .twocols, .cta, .grid{ grid-template-columns:1fr; }
    .hero{ height:clamp(150px, 25vh, 200px); }
    .hero-t h1{ font-size:20px; }
    .hero-t{ padding:10px 15px 9px; }
    .hero-t .tg{ display:none; }
    .oasis-in{ padding:0 12px 36px 38%; gap:6px; }
    .brand .nm{ display:none; }  /* スマホは3行に折れるためアイコンのみ */
    .brand img{ width:42px; height:42px; }
    .orgs{ display:none; }
    .oasis .c{ font-size:13.5px; padding:6px 11px; }
  }
  /* ── サブページへの導線 ───────────────────────────── */
  .more-link{ display:inline-flex; align-items:center; gap:6px; margin-top:12px;
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:9px 18px; font-size:14.5px; font-weight:800; color:var(--navy); text-decoration:none;
    box-shadow:0 2px 8px rgba(31,45,61,.06); }
  .more-link:hover{ border-color:var(--blue); color:var(--blue); }
  .back{ display:inline-block; margin:14px 0 0; font-size:14px; font-weight:700;
    text-decoration:none; color:var(--sub); }
  .back:hover{ color:var(--navy); }
  .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }

  /* 関係団体のチップ（トップの要約用） */
  .chips{ display:flex; flex-wrap:wrap; gap:8px; }
  .chips span{ background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:6px 13px; font-size:13.5px; font-weight:700; color:var(--navy); }

  /* ページ見出し（サブページ） */
  .ph{ background:linear-gradient(150deg,#2a567f,#1e3a5f); color:#fff; border-radius:18px;
    padding:20px 22px; margin:14px 0 6px; box-shadow:0 8px 20px rgba(30,58,95,.18); }
  .ph h1{ margin:0; font-size:25px; font-weight:800; letter-spacing:.02em; }
  .ph p{ margin:6px 0 0; font-size:14.5px; color:#e7f0fb; }

  /* クイックナビ(トップのヒーロー直下): 主役2つ+脇役3つ。彩度を抑えた中間色 */
  .qnav{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr; gap:8px; margin:12px 0 2px; }
  .qnav a{ display:flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font-weight:800;
    letter-spacing:.02em; border-radius:12px; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; white-space:nowrap; }
  .qnav a .ic{ font-size:17px; line-height:1; }
  .qnav a:hover{ transform:translateY(-1px); filter:brightness(1.04); box-shadow:0 6px 14px rgba(30,58,95,.16); }
  .qnav a:active{ transform:translateY(0); }
  /* 主役: 上段・左右半分ずつ */
  .qnav .m{ grid-column:span 3; min-height:46px; padding:8px 12px; font-size:16px; color:#fff; box-shadow:0 3px 10px rgba(30,58,95,.14); }
  .qnav .m1{ background:linear-gradient(135deg,#6a8bb0,#4f6f94); }   /* くすんだ青 */
  .qnav .m2{ background:linear-gradient(135deg,#c2905f,#a8744a); }   /* くすんだ琥珀 */
  /* 脇役: 下段・3等分・小さめ・淡い色 */
  .qnav .s{ grid-column:span 2; min-height:36px; padding:5px 8px; font-size:13.5px; color:var(--navy); border:1px solid rgba(30,58,95,.10); }
  .qnav .s .ic{ font-size:14px; }
  .qnav .s1{ background:#e4ebf3; }
  .qnav .s2{ background:#e5ede6; }
  .qnav .s3{ background:#f0e6e2; }
  @media (max-width:600px){
    .qnav{ gap:7px; }
    .qnav .m{ min-height:44px; font-size:15px; }
    .qnav .s{ min-height:34px; font-size:12.5px; padding:5px 4px; }
  }