/* NPO法人すいみぃ（旧Wixサイトの配色・文字・配置を踏襲） */
:root {
  --blue: #58B8DC;
  --blue-band: #6DB6DA;
  --cream: #FCF4DC;
  --ink: #303030;
  --yellow: #FFE45C;
  --yellow-frame: #FAD86E;
  --red: #EB7777;
  --foot: #E3E1DC;
  --white: #fff;
  --ja: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
  --en: "Roboto Slab", "Rockwell", Georgia, serif;
  --hand: "Klee One", "Zen Maru Gothic", sans-serif;
  --box: 980px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--ja); font-size: 15px; line-height: 2; letter-spacing: .04em; overflow-x: hidden; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.5; }
p { margin: 0 0 1em; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul[role=list] { list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: #fff; padding: 8px 16px; z-index: 100; }
.skip:focus { left: 8px; }
.center { text-align: center; }
.small { font-size: 13px; }
.tiny { font-size: 11px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- ヘッダー ---------- */
.site-header { background: #fff; position: relative; z-index: 20; }
.header-inner { max-width: 1180px; margin: 0 auto; padding: 18px 180px 18px 40px; display: flex; align-items: center; gap: 24px; min-height: 128px; }
.logo { flex: 0 0 auto; width: 191px; }
.gnav { display: flex; align-items: center; gap: 18px; flex: 1; justify-content: flex-start; }
.gnav-list { display: flex; gap: 17px; list-style: none; margin: 0; padding: 0; }
.gnav-list a, .f-nav a { display: flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1.25; padding: 4px 2px; }
.gnav-list .en, .f-nav .en { font-family: var(--en); font-weight: 800; font-size: 17px; color: var(--blue); letter-spacing: .02em; }
.gnav-list .ja, .f-nav .ja { font-size: 9.5px; color: var(--ink); letter-spacing: 0; font-weight: 700; }
.gnav-list a:hover .en, .gnav-list a[aria-current] .en { color: #2F8FB8; }
.gnav-list a[aria-current] { box-shadow: inset 0 -3px 0 var(--yellow); }
.sns { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; align-items: center; }
.sns img { width: 34px; height: 34px; }
.sns a { display: block; border-radius: 50%; transition: transform .15s; }
.sns a:hover { transform: translateY(-2px); }
.sns-head { align-self: flex-end; margin-left: auto; }
.badge { position: fixed; top: 10px; right: 10px; width: 152px; z-index: 30; transition: transform .2s; }
.badge:hover { transform: rotate(-6deg); }
.menu-btn { display: none; }

/* ---------- ページ見出しの帯 ---------- */
.band { background: var(--blue-band); }
.band-inner { max-width: var(--box); margin: 0 auto; padding: 18px 20px; display: flex; align-items: baseline; gap: 10px; font-weight: 400; }
.band .en { font-family: var(--en); font-weight: 800; font-size: 30px; color: #fff; letter-spacing: .02em; }
.band .ja { color: var(--yellow); font-size: 16px; font-weight: 700; }

/* ---------- 共通の区画 ---------- */
.cream, .white, .blue { position: relative; overflow: hidden; padding: 72px 20px; }
.cream { background: var(--cream); }
.white { background: #fff; }
.blue { background: var(--blue); color: #fff; text-align: center; }
.cream > *, .white > * { position: relative; }
.wm { position: absolute !important; width: min(560px, 60vw); pointer-events: none; z-index: 0; }
.wm-r { right: -20px; top: 40px; }
.wm-l { left: -140px; top: 120px; }
.wm-low { top: auto; bottom: 120px; }
.sec-title { text-align: center; margin-bottom: 32px; }
.sec-title .en { display: block; font-family: var(--en); font-weight: 800; font-size: 36px; color: var(--blue); line-height: 1.3; }
.sec-title .sub { display: inline-block; font-size: 14px; font-weight: 400; margin-top: 6px; }
.sec-title .sub::before, .sec-title .sub::after { content: ""; display: inline-block; width: 2px; height: 16px; background: var(--blue); margin: 0 10px; vertical-align: -2px; }
.sec-title .sub::before { transform: rotate(-30deg); }
.sec-title .sub::after { transform: rotate(30deg); }
.plain-title { text-align: center; font-size: 20px; font-weight: 700; margin-bottom: 32px; }
.blue-title { text-align: center; color: var(--blue); font-size: 20px; margin-bottom: 8px; }
.red-title { text-align: center; color: var(--red); font-size: 20px; margin: -8px 0 24px; }
.page-lead { text-align: center; font-family: var(--round); font-weight: 700; font-size: 19px; margin: 0 auto 48px; line-height: 2; }
.page-lead.small { font-size: 14px; font-weight: 500; }
.cta-center { text-align: center; margin-top: 40px; }
.cta-center p { font-family: var(--round); font-weight: 700; }
.cta-row { display: flex; justify-content: space-between; max-width: 820px; margin: 40px auto 0; gap: 16px; flex-wrap: wrap; }

/* ---------- ボタン ---------- */
.btn-pill { display: inline-block; min-width: 210px; padding: 6px 28px; background: #fff; color: var(--blue); font-family: var(--en); font-weight: 800; font-size: 15px; text-align: center; text-decoration: none; border-radius: 8px; line-height: 1.7; transition: transform .15s, box-shadow .15s; border: 0; cursor: pointer; }
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(0,0,0,.08); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-yellow { background: var(--yellow); color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.18); }
.btn-white { background: #fff; color: var(--blue); }
.btn-red { background: var(--red); color: #fff; }
.btn-report { display: inline-block; min-width: 150px; background: var(--red); color: #fff; text-decoration: none; text-align: center; padding: 4px 16px; border-radius: 6px; font-weight: 700; margin: 0 8px 8px 0; }
.btn-link { display: block; text-decoration: none; background: #fff; border: 2px solid var(--blue); color: var(--ink); border-radius: 8px; padding: 8px 16px; text-align: center; font-weight: 700; }
.btn-link:hover { background: var(--blue); color: #fff; }

/* ---------- トップ ---------- */
.h-hero { position: relative; background: #fff; overflow: hidden; }
.slides { position: relative; height: 580px; max-width: 1280px; margin: 0 auto; }
.slides li { position: absolute; inset: 0 0 0 0; width: min(870px, 100%); margin: 0 auto; opacity: 0; transition: opacity 1s; }
.slides li.on { opacity: 1; }
.slides img { width: 100%; height: 100%; object-fit: cover; }
.sl-prev, .sl-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 56px; line-height: 1; cursor: pointer; text-shadow: 0 0 6px rgba(0,0,0,.4); padding: 8px 16px; }
.sl-prev { left: calc(50% - 470px); }
.sl-next { right: calc(50% - 470px); }
.blue-bar { height: 82px; background: var(--blue); margin: 0 5px; }
.h-famisapo { background: var(--cream); text-align: center; padding: 12px 20px; }
.fs-banner { display: inline-block; width: 368px; max-width: 100%; transition: transform .15s; }
.fs-banner:hover { transform: scale(1.03); }
.prologue { text-align: center; font-family: var(--ja); font-weight: 700; font-size: 20px; margin-bottom: 36px; }
.prologue p { margin: 0 0 1.4em; }
.h-prologue, .h-report, .h-follow, .h-donate { text-align: center; padding: 56px 20px; }
.cards { display: grid; gap: 32px; max-width: 940px; margin: 0 auto 40px; list-style: none; padding: 0; text-align: left; }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; }
.card a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 3px solid #8CCDE6; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.card a:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(88,184,220,.35); }
.card-pic { aspect-ratio: 16 / 9; overflow: hidden; background: #F3F0E6; display: block; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; }
.card-pic .noimg { display: flex; height: 100%; align-items: center; justify-content: center; }
.card-pic .noimg img { width: 60%; height: auto; object-fit: contain; opacity: .5; }
.card-body { padding: 12px 16px 16px; display: block; }
.card-body time { display: block; font-size: 11px; color: #888; }
.card-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.7; }
.follow-box { max-width: 860px; margin: 0 auto; background: #fff; border: 16px solid var(--yellow-frame); padding: 0 24px 32px; }
.follow-title { font-size: 20px; font-weight: 700; border-bottom: 2px solid var(--ink); padding: 12px 0 8px; margin-bottom: 24px; }
.follow-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: start; }
.follow-text p { font-size: 13px; }
.follow-btns { display: grid; gap: 10px; justify-items: center; }
.follow-btns img { width: 242px; }
.follow-embed { min-height: 300px; display: flex; justify-content: center; }
.follow-embed iframe { max-width: 100%; }
.x-link { color: #1155CC; font-size: 13px; }
.note-small { font-size: 13px; margin-top: 24px; }
.donate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 860px; margin: 0 auto; }
.circle-photo { position: relative; width: min(340px, 80vw); margin: 0 auto; aspect-ratio: 1; }
.circle-photo .stripe { position: absolute; width: 92%; left: 12%; top: 12%; }
.circle-photo .round { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.donate-text h3 { font-size: 20px; margin-bottom: 24px; }
.donate-text p { font-size: 14px; }
.h-contact { background: var(--blue); color: #fff; text-align: center; padding: 56px 20px; }
.h-contact h2 { font-size: 22px; margin: 0 0 16px; }
.h-contact .btn-pill { margin-bottom: 40px; }
.h-contact .btn-pill:last-child { margin-bottom: 0; }

/* ---------- すいみぃについて ---------- */
.about-lead { text-align: center; }
.catch { font-size: 22px; margin-bottom: 24px; }
.about-lead p { font-size: 16px; max-width: 640px; margin: 0 auto 1.4em; }
.lead-light { font-family: var(--round); font-weight: 700; color: #000; }
.lead-bold { font-family: var(--round); font-weight: 700; font-size: 17px; }
.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 900px; margin: 0 auto 96px; }
.vm-r .vm-pic { order: 2; }
.vm-pic { position: relative; width: min(325px, 72vw); aspect-ratio: 325 / 377; margin: 0 auto; }
.vm-pic .stripe { position: absolute; width: 111.7%; max-width: none; left: -22.8%; top: 22.3%; }
.vm-r .vm-pic .stripe { width: 116.7%; left: 3.5%; top: 5.2%; transform: rotate(90deg); }
.vm-photo { position: absolute; inset: 0; }
.vm-photo img { width: 100%; height: 100%; object-fit: cover; }
.vm-text h2, .value-head h2 { margin-bottom: 16px; }
.vm-text h2 .en, .value-head .en { display: inline-block; font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700; font-size: 24px; letter-spacing: 6px; margin-right: 10px; }
.vm-text h2 .ja, .value-head .ja { font-size: 13px; font-weight: 400; }
.vm-text p { font-size: 15px; font-family: var(--round); font-weight: 500; }
.value-head { max-width: 900px; margin: 0 auto 16px; }
.value-head .ja { display: block; }
.value-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; align-items: center; }
.values li { padding: 6px 0 10px 64px; position: relative; min-height: 64px; }
.v-ico { position: absolute; left: 0; top: 6px; width: 50px; height: 50px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--round); font-weight: 700; font-size: 26px; line-height: 50px; text-align: center; }
.values h3 { font-family: var(--hand); font-weight: 600; font-size: 21px; }
.values p { font-family: var(--round); font-weight: 700; font-size: 14px; margin: 0; }
.values rt { font-size: 11px; font-family: var(--ja); }
.value-en { font-family: var(--en); font-weight: 800; color: #fff; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.35; text-shadow: 0 0 1px rgba(88,184,220,.35); margin: 0; }
.founder { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1.8fr 1fr; gap: 32px; align-items: center; }
.founder-msg { font-size: 15px; }
.founder-name { font-size: 20px; font-weight: 700; letter-spacing: .3em; }
.founder-name small { font-size: 12px; letter-spacing: 0; margin-right: 1em; }
.founder-msg strong { font-weight: 700; }
.outline-list { max-width: 820px; margin: 0 auto; }
.outline-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 24px 0; border-bottom: 4px dotted var(--red); align-items: center; }
.outline-list dt { text-align: center; font-size: 20px; }
.outline-list dd { font-size: 18px; text-align: center; line-height: 1.8; }
.outline-list dd.reports { text-align: left; }

/* ---------- 写真の切り抜き（旧サイトと同じ形） ---------- */
.mask-blob { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='31.499 20 137.001 160.001' preserveAspectRatio='none'%3E%3Cpath d='M166.344 54.704c-1.805-4.794-4.774-9.353-9.025-13.403-11.189-10.658-30.812-17.352-48.765-20.236-47.41-7.615-75.151 27.098-76.986 56.126-.874 13.824 6.889 27.31 7.497 41.175.652 14.878-5.574 29.557-2.586 44.536 1.666 8.348 8.576 13.214 20.06 15.16 34.353 5.821 80.34-1.147 97.585-25.256 4.83-6.752 6.951-14.461 7.698-21.959.881-8.85-1.181-17.654-1.463-26.49-.268-8.412 2.606-16.449 5.664-24.509 3.091-8.151 3.392-16.986.321-25.144z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='31.499 20 137.001 160.001' preserveAspectRatio='none'%3E%3Cpath d='M166.344 54.704c-1.805-4.794-4.774-9.353-9.025-13.403-11.189-10.658-30.812-17.352-48.765-20.236-47.41-7.615-75.151 27.098-76.986 56.126-.874 13.824 6.889 27.31 7.497 41.175.652 14.878-5.574 29.557-2.586 44.536 1.666 8.348 8.576 13.214 20.06 15.16 34.353 5.821 80.34-1.147 97.585-25.256 4.83-6.752 6.951-14.461 7.698-21.959.881-8.85-1.181-17.654-1.463-26.49-.268-8.412 2.606-16.449 5.664-24.509 3.091-8.151 3.392-16.986.321-25.144z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-tblob { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='27 20.292 146 159.001' preserveAspectRatio='none'%3E%3Cpath d='M105.62 20.539c-11.093-1.138-22.389 1.79-32.926 6.024-14.085 5.66-26.237 15.306-35.976 27.705l-.321.41c-14.337 18.42-9.706 45.162-2.95 68.163s15.105 41.76 35.949 49.984c9.508 3.751 19.612 5.428 29.702 6.154 22.064 1.587 46.55-2.484 61.129-20.595 12.506-15.536 14.845-38.297 11.227-58.58-3.052-17.112-10.138-33.266-20.083-46.891-8.862-12.14-19.809-23.404-33.243-29.161-4.104-1.761-8.291-2.781-12.508-3.213z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='27 20.292 146 159.001' preserveAspectRatio='none'%3E%3Cpath d='M105.62 20.539c-11.093-1.138-22.389 1.79-32.926 6.024-14.085 5.66-26.237 15.306-35.976 27.705l-.321.41c-14.337 18.42-9.706 45.162-2.95 68.163s15.105 41.76 35.949 49.984c9.508 3.751 19.612 5.428 29.702 6.154 22.064 1.587 46.55-2.484 61.129-20.595 12.506-15.536 14.845-38.297 11.227-58.58-3.052-17.112-10.138-33.266-20.083-46.891-8.862-12.14-19.809-23.404-33.243-29.161-4.104-1.761-8.291-2.781-12.508-3.213z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.mask-rrect { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 160 160' preserveAspectRatio='none'%3E%3Cpath d='M146.316 180H53.684C35.158 180 20 164.842 20 146.316V53.684C20 35.158 35.158 20 53.684 20h92.632C164.842 20 180 35.158 180 53.684v92.632C180 164.842 164.842 180 146.316 180z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 20 160 160' preserveAspectRatio='none'%3E%3Cpath d='M146.316 180H53.684C35.158 180 20 164.842 20 146.316V53.684C20 35.158 35.158 20 53.684 20h92.632C164.842 20 180 35.158 180 53.684v92.632C180 164.842 164.842 180 146.316 180z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* ---------- 取り組み ---------- */
.pj { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 840px; margin: 0 auto 96px; align-items: start; }
.pj-r .pj-pic { order: 2; }
.pj-pic img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pj-text { padding-top: 16px; }
.pj-text h2 { margin-bottom: 16px; }
.pj-title { display: inline-block; font-size: 17px; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.pj-sub { display: block; font-size: 13px; font-weight: 400; }
.pj-text p { font-size: 13px; color: #555; }

/* ---------- 活動・記事 ---------- */
.sns-note { text-align: center; font-weight: 700; margin-bottom: 12px; }
.sns-center { justify-content: center; }
.post-sec { padding-top: 48px; }
.post { max-width: 760px; margin: 0 auto; background: #fff; padding: 40px 48px 48px; border: 3px solid #8CCDE6; }
.post-meta { font-size: 12px; color: #777; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cat { background: var(--blue); color: #fff; padding: 0 10px; border-radius: 99px; font-size: 11px; }
.post h1 { font-size: 22px; margin-bottom: 28px; font-family: var(--round); }
.post-body p { margin: 0 0 .5em; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }
.post-body h2 { font-size: 18px; margin: 1.2em 0 .6em; color: var(--blue); }
.post-body a { color: #1E7FA8; }
.post-pics { margin: 16px 0 24px; }
.post-pics.many { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.post-pics img { width: 100%; }
.post-pics.many img { aspect-ratio: 1; object-fit: cover; }
.post-nav { max-width: 760px; margin: 24px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pn { display: block; background: #fff; border: 2px solid #8CCDE6; padding: 10px 16px; text-decoration: none; font-size: 13px; line-height: 1.6; }
.pn small { display: block; color: var(--blue); font-weight: 700; }
.pn.next { text-align: right; }

/* ---------- 応援する ---------- */
.donate-top .donate-text p { font-size: 15px; }
.mem-list { max-width: 820px; margin: 40px auto 24px; }
.mem-list > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 16px 0; border-bottom: 4px dotted var(--blue); align-items: center; }
.mem-list > div:last-child { border-bottom: 0; }
.mem-list dt { text-align: center; color: var(--blue); font-size: 18px; font-family: var(--round); font-weight: 700; }
.mem-list dd p { margin: 0; font-size: 13px; }
.mem-more { font-size: 11px !important; font-weight: 700; margin-top: 4px !important; }
.mem-more a { color: var(--ink); }
.any { text-align: center; color: var(--red); font-size: 28px; font-weight: 700; font-family: var(--round); margin: 16px 0 0; }
.bank-wrap { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; margin: 24px 0; }
.bank-fish { position: relative; width: 150px; text-align: center; font-size: 12px; margin: 0; }
.bank-fish img { position: absolute; inset: 0; margin: auto; width: 150px; opacity: .9; }
.bank-fish span { position: relative; display: block; padding: 40px 0; }
.bank-list li { background: #DCD6C6; text-align: center; padding: 8px 24px; margin-bottom: 12px; font-size: 13px; min-width: 320px; }
.bank-list p { margin: 0; }
.bank-note { max-width: 640px; margin: 48px auto 0; text-align: center; }
.bank-note h3 { font-size: 16px; margin-bottom: 12px; }

/* ---------- よくある質問 ---------- */
.qa-list { max-width: 820px; margin: 0 auto; display: grid; gap: 36px; }
.qa { background: #fff; border: 3px solid var(--blue); border-radius: 8px; box-shadow: 6px 6px 0 var(--blue); padding: 16px 28px 20px; }
.qa dt { font-size: 19px; font-family: var(--round); font-weight: 700; border-bottom: 1px solid #ccc; padding-bottom: 6px; margin-bottom: 10px; }
.qa dd { display: flex; gap: 8px; font-size: 13px; }
.qa dd p { margin: 0; }
.qa dd a { color: var(--blue); font-weight: 700; }
.q, .a { font-family: var(--en); font-weight: 800; font-size: 22px; line-height: 1; margin-right: 8px; }
.q { color: var(--blue); }
.a { color: var(--red); font-size: 18px; padding-top: 2px; }

/* ---------- サポーター ---------- */
.supporter-top { text-align: center; }
.sup-photo { max-width: 540px; margin: 0 auto; }
.sup-photo figcaption { font-size: 10px; text-align: right; }
.sup-cta { padding: 56px 20px; }
.sup-big { font-size: 20px; font-weight: 700; }
.sup-mid { font-size: 20px; font-weight: 700; color: var(--yellow); }
.sup-mid .slash { color: #fff; margin: 0 6px; }
.yellow { color: var(--yellow); font-weight: 700; }
.sup-cta .btn-pill { margin-top: 24px; }
.sup-video { text-align: center; }
.yt { max-width: 720px; margin: 0 auto 32px; aspect-ratio: 16 / 9; }
.yt iframe { width: 100%; height: 100%; border: 0; }

/* ---------- お問い合わせ・フォーム ---------- */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; max-width: 900px; margin: 0 auto; align-items: start; }
.contact-grid.one { grid-template-columns: 1fr; max-width: 640px; }
.contact-side { text-align: center; padding-top: 80px; }
.contact-side img { width: 300px; margin-bottom: 24px; }
.contact-side p { font-size: 14px; }
.form .field { margin-bottom: 18px; border: 0; padding: 0; }
.name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form label, .form legend { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea { width: 100%; font: inherit; font-size: 16px; padding: 8px 12px; border: 1px solid #C9DCE6; border-radius: 6px; background: #fff; }
.form textarea { min-height: 180px; }
.form input:focus, .form textarea:focus { border-color: var(--blue); outline: 2px solid rgba(88,184,220,.35); }
.form [aria-invalid=true] { border-color: var(--red); background: #FFF5F5; }
.choices { display: grid; gap: 4px; }
.choices label, .agree label { font-weight: 400; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.choices input, .agree input { width: 18px; height: 18px; accent-color: var(--blue); }
.req { display: inline-block; background: var(--red); color: #fff; font-size: 10px; padding: 0 6px; border-radius: 3px; margin-left: 8px; vertical-align: 2px; line-height: 1.7; }
.hint { font-size: 12px; color: #777; margin: 4px 0 0; }
.hp { position: absolute !important; left: -9999px; }
.btn-submit { display: block; margin: 24px auto 0; min-width: 230px; background: var(--blue); color: #fff; border: 0; border-radius: 6px; padding: 10px 24px; font: inherit; font-weight: 700; cursor: pointer; }
.btn-submit:disabled { opacity: .6; cursor: default; }
.form-status { text-align: center; margin-top: 16px; font-weight: 700; }
.form-status.ok { color: #1E7FA8; }
.form-status.ng { color: #C0392B; }

/* ---------- 観光 ---------- */
.tourism p.center { max-width: 720px; margin-left: auto; margin-right: auto; font-size: 13px; }
.t-pic { position: relative; width: 100%; margin: 15% auto 14%; }
.t-frame { position: absolute; display: block; }
.t-frame img { width: 100%; height: 100%; object-fit: cover; }
.t-photo { position: absolute; inset: 0; }
.t-photo a, .t-photo img { display: block; width: 100%; height: 100%; }
.t-photo img { object-fit: cover; }
.tour-links { max-width: 640px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---------- ファミリーサポートセンター ---------- */
.no-header .fs { background: #FDF7E7; padding-bottom: 24px; }
.fs { font-family: var(--round); }
.bunting { display: block; width: 100%; max-width: 1209px; margin: 0 auto; }
.fs-hero { max-width: 902px; margin: 40px auto 24px; padding: 0 20px; }
.fs-sec { max-width: 860px; margin: 0 auto; padding: 48px 20px; text-align: center; position: relative; }
.fs-sec > p { font-size: 14px; }
.fs-title { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 22px; font-weight: 500; margin-bottom: 24px; }
.fs-deco { width: 40px; }
.fs-sub { display: block; font-size: 11px; }
.fs-t { line-height: 1.4; }
.fs-ill.intro { position: absolute; left: -60px; top: 20px; width: 160px; }
.fs-note { position: absolute; right: 0; top: 160px; width: 60px; }
.fs-ex { display: inline-flex; align-items: center; gap: 20px; background: #F6DE85; border-radius: 99px; padding: 10px 40px; margin: 8px 0 24px; text-align: left; font-size: 13px; }
.fs-ex ul { list-style: "・"; padding-left: 1em; }
.fs-diagram { background: #fff; border-radius: 200px 200px 24px 24px; padding: 32px; margin-top: 24px; }
.fs-member { display: grid; grid-template-columns: 160px 1fr 80px; gap: 16px; align-items: center; text-align: left; margin-top: 32px; }
.fs-member .fs-ill { width: 160px; }
.fs-balloon { width: 70px; }
.pill { display: inline-block; background: #F6DE85; border-radius: 99px; padding: 0 40px; font-size: 13px; margin-bottom: 8px; }
.fs-target { display: flex; gap: 6px; font-weight: 700; }
.fs-target ul { list-style: "・"; padding-left: 1em; }
.fs-target p { margin: 0; }
.fee { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; max-width: 760px; margin: 0 auto 24px; position: relative; }
.fee li { background: #fff; border-radius: 12px; overflow: hidden; position: relative; }
.fee .fee-k { display: block; padding: 8px; color: var(--ink); font-size: 13px; }
.fee li:nth-child(1) .fee-k { background: #EFA389; }
.fee li:nth-child(2) .fee-k { background: #F6DE85; }
.fee li:nth-child(3) .fee-k { background: #8EB7E5; }
.fee .fee-v { display: block; font-size: 30px; font-weight: 700; padding: 12px; }
.fee li:nth-child(1)::after, .fee li:nth-child(2)::after { position: absolute; right: -27px; top: 50%; width: 26px; height: 26px; border-radius: 50%; background: #F6C24A; color: #fff; font-weight: 700; line-height: 26px; z-index: 1; }
.fee li:nth-child(1)::after { content: "+"; }
.fee li:nth-child(2)::after { content: "="; background: #8EB7E5; }
.fee li { overflow: visible; }
.fs-docs { display: flex; justify-content: center; gap: 32px; font-size: 13px; }
.fs-contact { display: flex; justify-content: center; align-items: center; gap: 24px; text-align: left; margin-top: 16px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 16px 0; }
.fs-contact .fs-ill { width: 120px; }
.fs-contact p { margin: 0; }
.fs-tel { font-size: 32px; font-weight: 700; font-family: var(--ja); }
.fs-tel a { text-decoration: none; }
.fs-office { margin-top: 16px; }

/* ---------- 文章ページ ---------- */
.text-page { max-width: 900px; margin: 0 auto; }
.check-list { max-width: 680px; margin: 24px auto 32px; }
.check-list li { background: #fff; border-left: 6px solid var(--blue); padding: 8px 16px; margin-bottom: 8px; font-size: 14px; }
.privacy h2 { font-size: 17px; margin: 32px 0 8px; color: var(--blue); }
.privacy p, .privacy li { font-size: 14px; }
.privacy ol { padding-left: 1.6em; margin-bottom: 1em; }
.privacy ol ol { list-style: lower-roman; }

/* ---------- フッター ---------- */
.site-footer { background: var(--foot); padding: 40px 20px 24px; }
.footer-inner { max-width: 960px; margin: 0 auto; }
.f-top { display: grid; grid-template-columns: 257px 1fr auto; gap: 24px; align-items: center; }
.f-name { margin: 0; font-size: 17px; font-weight: 700; }
.sns-foot img { width: 46px; height: 46px; }
.f-mid { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 24px 0 24px 281px; }
.f-info li { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 18px; }
.f-info a { text-decoration: none; }
.f-links li { font-size: 11px; font-weight: 700; text-align: center; margin-bottom: 18px; }
.f-nav { display: flex; justify-content: center; gap: 36px; list-style: none; padding: 0; margin: 16px 0; }
.copy { text-align: center; font-size: 11px; color: #777; margin: 16px 0 0; }

/* ---------- 写真の拡大 ---------- */
a.lb { display: block; cursor: zoom-in; }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgba(0,0,0,.85); }
.lightbox img { max-width: 94vw; max-height: 88vh; display: block; }
.lb-close { position: fixed; top: 12px; right: 16px; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; }

/* ---------- ふわっと表示 ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 1100px) {
  .header-inner { padding: 12px 120px 12px 20px; }
  .badge { width: 100px; }
  .gnav-list { gap: 10px; }
  .gnav-list .en { font-size: 15px; }
  .cards-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  body { font-size: 14px; }
  .header-inner { min-height: 72px; padding: 10px 16px; justify-content: space-between; }
  .logo { width: 130px; }
  .badge { width: 64px; top: 4px; right: 64px; position: absolute; }
  .menu-btn { display: block; position: relative; width: 44px; height: 44px; border: 0; background: var(--blue); border-radius: 50%; cursor: pointer; }
  .menu-btn span:first-child, .menu-btn span:first-child::before, .menu-btn span:first-child::after { position: absolute; left: 12px; width: 20px; height: 2px; background: #fff; content: ""; transition: transform .2s; }
  .menu-btn span:first-child { top: 21px; }
  .menu-btn span:first-child::before { left: 0; top: -6px; }
  .menu-btn span:first-child::after { left: 0; top: 6px; }
  .menu-btn[aria-expanded=true] span:first-child { background: transparent; }
  .menu-btn[aria-expanded=true] span:first-child::before { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded=true] span:first-child::after { transform: translateY(-6px) rotate(-45deg); }
  .gnav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; padding: 8px 16px 24px; box-shadow: 0 8px 16px rgba(0,0,0,.08); }
  .gnav.open { display: flex; }
  .gnav-list { flex-direction: column; width: 100%; gap: 0; }
  .gnav-list a { flex-direction: row; gap: 12px; align-items: baseline; padding: 12px 4px; border-bottom: 1px dashed #cde; }
  .gnav-list .ja { font-size: 12px; }
  .sns-head { margin: 16px auto 0; align-self: center; }
  .band .en { font-size: 24px; }
  .cream, .white, .blue { padding: 48px 16px; }
  .slides { height: 62vw; }
  .slides li { width: 100%; }
  .sl-prev { left: 0; }
  .sl-next { right: 0; }
  .blue-bar { height: 40px; margin: 0; }
  .cards-3, .cards-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .follow-box { border-width: 10px; padding: 0 16px 24px; }
  .follow-grid, .donate-grid, .vm, .value-grid, .founder, .pj, .contact-grid, .fs-member { grid-template-columns: 1fr; }
  .vm-r .vm-pic, .pj-r .pj-pic { order: 0; }
  .vm-r .vm-text { text-align: left; }
  .follow-embed { min-height: 0; }
  .x-link { display: none; }
  .outline-list > div, .mem-list > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .outline-list dt { font-size: 15px; color: var(--red); }
  .outline-list dd { font-size: 15px; }
  .any { font-size: 20px; }
  .bank-list li { min-width: 0; }
  .post { padding: 24px 18px 32px; }
  .post h1 { font-size: 19px; }
  .post-nav { grid-template-columns: 1fr; }
  .contact-side { padding-top: 0; order: -1; }
  .contact-side img { width: 200px; }
  .fs-ill.intro, .fs-note { position: static; display: inline-block; }
  .fs-member { text-align: left; justify-items: center; }
  .fs-balloon { display: none; }
  .fee { grid-template-columns: 1fr; gap: 32px; }
  .fee li:nth-child(1)::after, .fee li:nth-child(2)::after { right: auto; left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); text-align: center; }
  .fs-ex { flex-direction: column; border-radius: 24px; padding: 12px 20px; gap: 4px; }
  .fs-contact { flex-direction: column; text-align: center; }
  .fs-tel { font-size: 24px; }
  .f-top { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .f-top .f-logo { width: 200px; }
  .f-mid { grid-template-columns: 1fr; padding: 16px 0; }
  .f-links li { text-align: left; }
  .f-nav { flex-wrap: wrap; gap: 16px 24px; }
  .tour-links { grid-template-columns: 1fr; }
  .wm { width: 70vw; }
}
@media (max-width: 480px) {
  .cards-3, .cards-4 { grid-template-columns: 1fr; }
  .name-row { grid-template-columns: 1fr; }
  .prologue { font-size: 17px; }
  .page-lead { font-size: 16px; }
}