/* =========================================================
   T-M・サポート — お知らせ・地域での活動 専用スタイル

   news.php でのみ読み込む。DESIGN_GUIDELINES.md に準拠。

   以前はグラデーションのバナーと角丸カード＋ピル型タグだったため、
   このページだけ別サイトのように見えていた。
   他ページと同じ言語（番号・罫線・余白・写真）に揃えている。
   ========================================================= */

:root {
    --nw-ink: #16233A;
    --nw-navy: #2C4773;
    --nw-body: #4E5966;
    --nw-mute: #5F6874;
    --nw-red: #C32B38;
    --nw-line: #DFD8CA;
    --nw-paper: #FBF8F2;
}

.nw { background: #fff; color: var(--nw-ink); }
.nw-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }

.nw-label {
    display: block;
    font-size: 12px; font-weight: 700; letter-spacing: .2em;
    color: var(--nw-red); margin: 0 0 18px;
}

/* ---------------------------------------------------------
   冒頭
   --------------------------------------------------------- */
.nw-open { padding: clamp(44px, 7vw, 88px) 0 clamp(28px, 4vw, 44px); }
.nw-open h1 {
    font-size: clamp(26px, 4.6vw, 46px);
    font-weight: 900; line-height: 1.45; letter-spacing: -.01em;
    margin: 0 0 24px; word-break: auto-phrase;
}
.nw-open p { font-size: clamp(15px, 1.9vw, 16.5px); line-height: 2.2; color: var(--nw-body); max-width: 54em; margin: 0; }

/* ---------------------------------------------------------
   Instagram ── グラデーションのバナーをやめ、罫線の一行に
   --------------------------------------------------------- */
.nw-ig {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px clamp(16px, 3vw, 30px);
    padding: clamp(20px, 3vw, 28px) 0;
    border-top: 1px solid var(--nw-line);
    border-bottom: 1px solid var(--nw-line);
    text-decoration: none; color: inherit;
    margin-bottom: clamp(40px, 6vw, 72px);
    transition: border-color .18s ease;
}
.nw-ig:hover { opacity: 1; border-color: var(--nw-navy); }
.nw-ig svg { width: 26px; height: 26px; color: var(--nw-ink); flex: 0 0 auto; }
.nw-ig .handle { font-size: clamp(16px, 2.2vw, 20px); font-weight: 800; letter-spacing: .02em; }
.nw-ig .txt { font-size: 14px; color: var(--nw-body); line-height: 1.9; flex: 1 1 240px; }
.nw-ig .go {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 14px; font-weight: 800; color: var(--nw-navy); white-space: nowrap;
}
.nw-ig .go::after {
    content: ""; width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
    transform: rotate(45deg); transition: margin-left .2s ease;
}
.nw-ig:hover .go::after { margin-left: 6px; }

/* ---------------------------------------------------------
   地域での活動 ── 番号と罫線の横長リスト（施工事例と同じ組み方）
   --------------------------------------------------------- */
.nw-acts { padding-bottom: clamp(48px, 7vw, 88px); }
.nw-acts h2 {
    font-size: clamp(20px, 2.8vw, 27px);
    font-weight: 900; line-height: 1.6; margin: 0 0 clamp(22px, 3vw, 34px);
}
.nw-list { border-top: 1px solid var(--nw-line); }
.nw-item {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(20px, 4vw, 52px);
    align-items: center;
    padding: clamp(26px, 3.6vw, 42px) 0;
    border-bottom: 1px solid var(--nw-line);
}
@media (max-width: 760px) {
    .nw-item { grid-template-columns: 1fr; gap: 16px; }
    .nw-item figure { order: 2; }
}
.nw-item-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.nw-no {
    font-size: clamp(20px, 2.6vw, 28px);
    font-weight: 800; color: var(--nw-red); line-height: 1;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.nw-tag { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--nw-mute); }
.nw-item h3 {
    font-size: clamp(17px, 2.4vw, 22px);
    font-weight: 800; line-height: 1.6; margin: 0 0 14px; color: var(--nw-ink);
    word-break: auto-phrase;
}
.nw-item p { font-size: 15px; line-height: 2.1; color: var(--nw-body); margin: 0 0 16px; max-width: 39em; }
.nw-item .freq { font-size: 13px; color: var(--nw-mute); margin-bottom: 14px; }
.nw-item figure { margin: 0; overflow: hidden; background: var(--nw-paper); }
.nw-item figure img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
    border-radius: 2px;
}
.nw-more {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13.5px; font-weight: 700; color: var(--nw-navy); text-decoration: none;
    /* 指で押せる高さ（24px以上）を確保する */
    padding: 6px 0;
}
.nw-more::after {
    content: ""; width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
    transform: rotate(45deg); transition: margin-left .2s ease;
}
.nw-more:hover { opacity: 1; color: var(--nw-red); }
.nw-more:hover::after { margin-left: 6px; }

/* ---------------------------------------------------------
   CTA ── 他ページと同じ形
   --------------------------------------------------------- */
.nw-cta { background: var(--nw-ink); color: #fff; padding: clamp(48px, 7vw, 96px) 0; }
.nw-cta h2 { font-size: clamp(21px, 3.4vw, 34px); font-weight: 900; line-height: 1.5; color: #fff; margin: 0 0 20px; }
/* 左に文章、右に連絡先。縦に4つ積むと横が空いたまま縦に伸びるため。 */
.nw-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(26px, 4.5vw, 72px);
    align-items: center;
}
@media (max-width: 820px) { .nw-cta-inner { grid-template-columns: 1fr; gap: 26px; } }
.nw-cta-act { display: flex; flex-direction: column; align-items: flex-start; }
.nw-cta p { font-size: 15.5px; line-height: 2.15; color: rgba(255,255,255,.78); max-width: 34em; margin: 0 0 10px; }
.nw-cta-act p { margin: 14px 0 20px; }
.nw-cta-tel {
    display: inline-block;
    font-size: clamp(26px, 4.4vw, 38px); font-weight: 900; letter-spacing: .02em;
    color: #fff; text-decoration: none; line-height: 1.2;
    font-variant-numeric: tabular-nums;
    border-bottom: 3px solid var(--nw-red); padding-bottom: 4px;
}
.nw-cta-tel:hover { opacity: 1; color: #fff; }
.nw-cta-hours { font-size: 13.5px; color: rgba(255,255,255,.62); line-height: 2; margin: 18px 0 30px; }
.nw-cta .nw-link {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 800; color: #fff; text-decoration: none;
    padding: 12px 0; border-bottom: 2px solid rgba(255,255,255,.6);
    transition: border-color .18s ease;
}
.nw-cta .nw-link::after {
    content: ""; width: 8px; height: 8px;
    border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
    transform: rotate(45deg); transition: margin-left .2s ease;
}
.nw-cta .nw-link:hover { opacity: 1; border-color: #fff; }
.nw-cta .nw-link:hover::after { margin-left: 8px; }

.nw a:focus-visible, .nw-cta a:focus-visible { outline: 3px solid var(--nw-red); outline-offset: 3px; }
.nw-cta a:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .nw *, .nw-cta * { transition: none !important; } }