* { margin:0; padding:0; box-sizing:border-box; }

body {
  background: linear-gradient(to bottom, #ffffff 0%, #a8dff5 50%, #29b5e8 100%);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 2rem 2rem;
}

.stars {
  position: fixed; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 15% 20%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 72%  8%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 45%, rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 80%, rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 30%, rgba(255,255,255,.4) 0%, transparent 100%);
}

/* ===== ページ本体(旧スライド) =====
   実ページ遷移になったので、読み込み時にフェードインするだけの演出。
   遷移前に .leaving を付けてから次のページへ移動し、旧スライドの
   「フワッと消えて出てくる」感覚を再現する。 */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.page.in {
  opacity: 1;
  transform: translateY(0);
}
.page.leaving {
  opacity: 0;
  transform: translateY(-24px);
}

.msg {
  font-size: clamp(22px, 5.5vw, 42px);
  font-weight: 700;
  color: #1a7fd4;
  text-align: center;
  line-height: 1.75;
  letter-spacing: .2em;
  white-space: pre-line;
  margin-bottom: 36px;
}
.msg.green {
  color: #1a7fd4;
  font-size: clamp(26px, 6vw, 48px);
}

/* ===== チェック ===== */
.checks {
  display: flex;
  gap: 14px;
  margin-bottom: 28px;
}
.cbtn {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.55);
  border: 2px solid rgba(26,127,212,.3);
  border-radius: 12px;
  padding: 12px 26px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
  user-select: none;
}
.cbtn.yes-sel {
  background: rgba(26,127,212,.15);
  border-color: #1a7fd4;
}
.cbtn.no-sel {
  background: rgba(255,255,255,.7);
  border-color: rgba(26,127,212,.5);
}
.cbox {
  width: 20px; height: 20px;
  border: 2px solid rgba(26,127,212,.4);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.yes-sel .cbox { background: #1a7fd4; border-color: #1a7fd4; }
.no-sel  .cbox { background: rgba(255,255,255,.8); border-color: rgba(26,127,212,.5); }
.cbox svg { display: none; }
.yes-sel .cbox .ico-yes { display: block; }
.no-sel  .cbox .ico-no  { display: block; }
.clabel {
  font-size: clamp(14px, 3.5vw, 17px);
  font-weight: 700;
  color: #1a5fa8;
}

/* ===== 次へボタン(実リンク) ===== */
.nbtn {
  display: inline-block;
  background: #1a7fd4;
  color: #fff;
  font-size: clamp(15px, 3.5vw, 17px);
  font-weight: 700;
  padding: 14px 48px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  letter-spacing: .06em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, box-shadow .2s;
  pointer-events: none;
}
.nbtn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nbtn:hover { box-shadow: 0 6px 20px rgba(26,127,212,.35); }
.nbtn.green-btn {
  background: #1a7fd4;
  color: #fff;
}

/* ドット(現在地表示。実ページなので静的にON/OFFを埋め込む) */
#dots {
  position: fixed;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none; z-index: 10;
}
#dots span {
  display: block; width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(26,127,212,.25);
  transition: background .4s, transform .4s;
}
#dots span.on {
  background: #1a7fd4;
  transform: scale(1.6);
}

/* ===== 最終画面(soudan.html) ===== */
#last {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 24px 80px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
#last.in {
  opacity: 1;
  transform: translateY(0);
}
.l-lead {
  font-size: clamp(16px,4vw,20px);
  font-weight: 700; color: #333;
  text-align: center; line-height: 1.8;
  margin-bottom: 32px;
}
.l-list { list-style:none; width:100%; max-width:340px; margin-bottom:36px; display:flex; flex-direction:column; gap:16px; }
.l-list li {
  display:flex; align-items:center; gap:14px;
  font-size:clamp(14px,3.5vw,16px); color:#333; line-height:1.5;
}
.l-list li::before {
  content:'';
  flex-shrink:0; width:22px; height:22px;
  border:2px solid #333; border-radius:5px;
  background: #fff
    url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1,5 4.5,8.5 11,1' stroke='%2306c755' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center/18px;
}
.l-btns { display:flex; flex-direction:column; gap:12px; width:100%; max-width:340px; margin-bottom:36px; }
.l-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:clamp(15px,3.5vw,17px); font-weight:700; padding:16px 28px;
  border-radius:999px; border:none; cursor:pointer;
  text-decoration:none; transition:transform .2s, box-shadow .2s;
}
.l-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.l-btn.line { background:#4cc764; color:#fff; }
.l-btn.tel  { background:#1a7fd4; color:#fff; border:none; }
.l-links { display:flex; flex-direction:column; gap:14px; align-items:flex-start; width:100%; max-width:340px; }
.l-link {
  font-size:clamp(14px,3.5vw,16px); color:#555;
  text-decoration:none; display:flex; align-items:center; gap:6px;
  transition:color .2s;
}
.l-link:hover { color:#06c755; }
.l-link::before { content:'›'; font-size:18px; color:#06c755; font-weight:700; }

/* ===== 支援実績・詳細ページ：会話形式(インタビュー)ブロック =====
   クラス名は既存の .msg / .avatar 等と衝突しないよう jchat- で名前空間化 */
.jchat-section{
  background:#e8f4fc;
  border-radius:10px;
  padding:12px 16px;
  font-size:15px;
  font-weight:900;
  color:#1a5fa8;
  margin:28px 0 16px;
}
.jchat-section:first-of-type{ margin-top:0; }

.jchat-thread{ display:flex; flex-direction:column; gap:16px; margin-bottom:8px; }
.jchat-row{ display:flex; gap:10px; align-items:flex-end; }
.jchat-row.me{ flex-direction:row-reverse; }

.jchat-avatar{
  width:46px; height:46px; border-radius:999px; flex:0 0 46px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:900; color:#fff;
  overflow:hidden; padding:0;
}
.jchat-avatar.staff{
  background:#fff;
  box-shadow: inset 0 0 0 1px rgba(26,127,212,.18);
}
.jchat-avatar.staff .jchat-avatar-img{ object-fit:contain; }
.jchat-avatar.me{ background:linear-gradient(135deg,#1a7fd4,#29b5e8); }
.jchat-avatar-img{ width:100%; height:100%; object-fit:cover; border-radius:999px; display:block; }

.jchat-body{ display:flex; flex-direction:column; gap:4px; max-width:82%; }
.jchat-row.me .jchat-body{ align-items:flex-end; }
.jchat-name{ font-size:11px; font-weight:700; color:#8593a0; padding:0 4px; }
.jchat-bubble{
  background:#f1f6fa;
  border-radius:16px 16px 16px 4px;
  padding:12px 16px;
  font-size:14.5px;
  line-height:1.85;
  color:#333;
}
.jchat-row.me .jchat-bubble{
  background:#ffffff;
  border:1.5px solid rgba(26,127,212,.18);
  border-radius:16px 16px 4px 16px;
}
.jchat-hl{
  font-weight:700;
  background-image:linear-gradient(transparent 68%, #fff1a8 0);
  padding:0 1px;
}

.jchat-quote{
  background:linear-gradient(135deg,#eafbee,#f3f9fd);
  border:1px solid rgba(76,199,100,.35);
  border-radius:16px; padding:20px 22px; margin:26px 0 8px;
}
.jchat-quote p{ margin:0 0 8px; font-size:15px; line-height:1.85; color:#333; font-weight:700; }
.jchat-quote .jchat-cite{ font-size:12px; color:#8593a0; font-weight:700; }

/* ===== 支援実績・詳細ページ(旧 #page-jisseki / #page-detail) =====
   元は同じHTML内でoverlay表示していたものを、実ページに分割。
   見た目・フェード演出の数値は元のインラインstyleと同一。 */
.jpage {
  min-height: 100vh;
  padding: 48px 24px 80px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .5s ease, transform .5s ease;
}
.jpage.in {
  opacity: 1;
  transform: translateY(0);
}
.jback {
  background: none;
  border: none;
  cursor: pointer;
  color: #1a7fd4;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.jtitle {
  font-size: clamp(18px,4.5vw,24px);
  font-weight: 700;
  color: #1a5fa8;
  text-align: center;
  margin-bottom: 8px;
}
.jsubtitle {
  text-align: center;
  color: #555;
  font-size: 14px;
  margin-bottom: 28px;
}
.jlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 400px;
  margin: 0 auto;
  padding-bottom: 80px;
}
.jcard {
  display: block;
  background: rgba(255,255,255,.7);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  border: 1.5px solid rgba(26,127,212,.15);
  transition: box-shadow .2s;
  text-decoration: none;
  color: inherit;
}
.jtag {
  display: inline-block;
  background: #1a7fd4;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.jcard-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a5fa8;
  margin-bottom: 6px;
}
.jcard-summary {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
}
.jcard-more {
  text-align: right;
  font-size: 13px;
  color: #1a7fd4;
  font-weight: 700;
  margin-top: 8px;
}

.jdetail {
  max-width: 400px;
  margin: 0 auto;
}
.jdetail .jtag { margin-bottom: 12px; }
.jdetail h3 {
  font-size: clamp(17px,4vw,22px);
  font-weight: 700;
  color: #1a5fa8;
  margin-bottom: 20px;
  line-height: 1.5;
}
.jdetail p.jbody {
  font-size: 15px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 16px;
}
.jcta {
  background: rgba(255,255,255,.6);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-top: 24px;
}
.jcta p {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}
.jcta a {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 32px;
  border-radius: 999px;
  text-decoration: none;
  margin-bottom: 10px;
}
.jcta a.line { background: #4cc764; color: #fff; }
.jcta a.tel { background: #1a7fd4; color: #fff; }

/* ===== 下部固定バナー(支援実績・詳細ページのみ表示) ===== */
#sticky-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  flex-direction: row;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#sticky-banner a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: "Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 8px;
  text-decoration: none;
  color: #fff;
}
#sticky-banner a.tel { background: #1a7fd4; }
#sticky-banner a.line { background: #4cc764; }

/* アニメーションを好まないユーザーへの配慮 */
@media (prefers-reduced-motion: reduce) {
  .page, #last, .jpage { transition: none; }
}

/* ===== 電話番号の表示(相談ページ・記事内の電話ボタン) =====
   ※下部の固定バナーには番号を出さない(画面を狭くしないため) */
.tel-num { display:block; font-size:.82em; font-weight:500; letter-spacing:.04em; line-height:1.3; font-variant-numeric:tabular-nums; }
.l-btn.tel .tel-txt { display:flex; flex-direction:column; align-items:center; line-height:1.35; }
.jcta a.tel .tel-num { margin-top:2px; }

/* ===== 相談ページ下部の団体概要 ===== */
.l-info { width:100%; max-width:340px; margin-top:36px; padding:18px 20px; background:rgba(255,255,255,.9); border-radius:14px; color:#333; }
.l-info-name { font-size:15px; font-weight:700; line-height:1.6; margin:0 0 10px; }
.l-info-list { display:flex; flex-direction:column; gap:6px; margin:0; font-size:13px; line-height:1.7; }
.l-info-list div { display:grid; grid-template-columns:4em 1fr; gap:8px; }
.l-info-list dt { color:#777; font-weight:500; }
.l-info-list dd { margin:0; }
.l-info-list a { color:#1a7fd4; font-weight:700; text-decoration:none; font-variant-numeric:tabular-nums; }

/* ===== 「支援実績はこちらから」を白いボタン風にして見やすく ===== */
.l-link.l-link-case {
  width:100%; justify-content:center; gap:6px;
  padding:14px 20px; border-radius:999px;
  background:#fff; color:#1a5fa0; font-weight:700;
  font-size:clamp(15px,3.5vw,16px);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:transform .2s, box-shadow .2s;
}
.l-link.l-link-case::before { content:none; }
.l-link.l-link-case::after { content:'›'; font-size:22px; line-height:1; color:#1a7fd4; margin-top:-3px; }
.l-link.l-link-case:hover { color:#1a5fa0; transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }