/* ============================================================
   こども秘密基地BASE ホームページ スタイルシート
============================================================ */

  :root{
    --bg:#FFFDF6;
    --bg-soft:#FFF6E4;
    --panel:#FFFFFF;
    --leaf:#8CC63F;
    --leaf-dark:#69A62A;
    --sun:#FFC93C;
    --sun-dark:#F0A800;
    --coral:#FF7A66;
    --coral-dark:#E85A45;
    --sky:#48B4E0;
    --ink:#2A2620;
    --ink-soft:#6B6055;
    --line:#F0E6CC;
    /* そっとゾーン用の落ち着いたトーン */
    --quiet-bg:#F3EFE4;
    --quiet-panel:#FFFFFF;
    --quiet-accent:#8CA37E;
    --quiet-ink:#4A4238;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--bg); color:var(--ink); font-family:'Noto Sans JP', sans-serif; line-height:1.85;}
  h1,h2,h3,h4{font-family:'Zen Maru Gothic', sans-serif; font-weight:900; line-height:1.5;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul,ol{list-style:none;}
  .wrap{max-width:1100px; margin:0 auto; padding:0 24px;}
  @media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}}
  a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--sky); outline-offset:3px; border-radius:6px;}
  .skip-link{position:absolute; left:-9999px; top:0; z-index:999; background:var(--leaf-dark); color:#fff; padding:12px 20px; border-radius:0 0 10px 0; font-weight:700;}
  .skip-link:focus{left:0;}

  header{position:sticky; top:0; z-index:100; background:rgba(255,253,246,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
  .nav{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1100px; margin:0 auto; gap:12px;}
  .logo{display:flex; align-items:center; gap:10px; font-family:'Zen Maru Gothic', sans-serif; font-weight:900; font-size:1.05rem;}
  .logo-mark{width:42px; height:42px; border-radius:50%; background:var(--sun); display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;}
  .logo-sub{display:block; font-size:0.6rem; font-weight:500; color:var(--ink-soft);}
  .nav-links{display:flex; gap:22px; font-weight:700; font-size:0.85rem; flex-wrap:wrap;}
  .nav-links a{color:var(--ink-soft);}
  .nav-links a:hover{color:var(--coral-dark);}
  .nav-cta{background:var(--coral); color:#fff; padding:11px 20px; border-radius:100px; font-weight:700; font-size:0.83rem; box-shadow:0 6px 16px rgba(255,122,102,0.35); transition:transform 0.15s ease;}
  .nav-cta:hover{transform:translateY(-2px);}
  @media (max-width:1000px){.nav-links{display:none;} .nav-cta{padding:9px 14px; font-size:0.76rem;}}

  /* ===== HERO:明るく前向きに ===== */
  .hero{position:relative; padding:66px 24px 88px; overflow:hidden; background:linear-gradient(180deg,var(--bg-soft) 0%, var(--bg) 100%);}
  .hero-blob{position:absolute; border-radius:50%; z-index:0;}
  .blob1{width:340px; height:340px; background:#FFF1C4; top:-140px; right:-100px;}
  .blob2{width:220px; height:220px; background:#DDF0C4; bottom:-100px; left:-80px;}
  .blob3{width:140px; height:140px; background:#CDEBF7; top:55%; right:6%;}
  .hero-inner{position:relative; z-index:1; max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:50px; align-items:center;}
  .eyebrow{display:inline-flex; gap:8px; background:#fff; border:1px solid var(--line); padding:7px 18px; border-radius:100px; font-size:0.82rem; font-weight:700; margin-bottom:22px; color:var(--coral-dark); box-shadow:0 4px 14px rgba(0,0,0,0.05);}
  .hero h1{font-size:clamp(2rem,4.4vw,3.1rem); margin-bottom:20px;}
  .hero .hl{color:var(--leaf-dark);}
  .hero p{font-size:1.02rem; color:var(--ink-soft); max-width:48ch; margin-bottom:30px;}
  .btn-row{display:flex; gap:14px; flex-wrap:wrap;}
  .btn{display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:100px; font-weight:700; font-size:0.98rem; transition:transform 0.15s ease, box-shadow 0.15s ease; cursor:pointer;}
  .btn-primary{background:var(--sun); color:var(--ink); box-shadow:0 10px 24px rgba(255,201,60,0.5);}
  .btn-primary:hover{transform:translateY(-3px);}
  .btn-ghost{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,0.05);}
  .btn-ghost:hover{transform:translateY(-3px);}
  .hero-art{position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
  .hero-sun{width:80%; aspect-ratio:1/1; border-radius:50%; background:radial-gradient(circle at 32% 28%, #FFF3CC, var(--sun) 72%); display:flex; align-items:center; justify-content:center; font-size:4.4rem; box-shadow:0 30px 60px rgba(255,201,60,0.35); position:relative; overflow:hidden;}
  .hero-card{position:absolute; background:#fff; border-radius:20px; box-shadow:0 14px 34px rgba(0,0,0,0.1); padding:16px 20px; font-weight:700; font-size:0.86rem;}
  .card-a{top:2%; left:-6%;} .card-b{bottom:4%; right:-6%;}
  /* 代表理事の一言バブル(リベ大アニマルレスキューの「学長の顔」吹き出しを参考) */
  .rep-bubble{
    position:absolute; top:-14px; right:8%; background:#fff; border-radius:20px;
    box-shadow:0 12px 30px rgba(0,0,0,0.12); padding:12px 16px; display:flex; align-items:center; gap:10px;
    max-width:190px; font-size:0.74rem; font-weight:700; color:var(--ink-soft);
  }
  .rep-bubble .rep-icon{width:32px; height:32px; border-radius:50%; background:var(--green-pale,var(--leaf)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1rem;}
  .why-link{
    display:inline-flex; align-items:center; gap:6px; font-size:0.86rem; font-weight:700; color:var(--coral-dark);
    margin-bottom:26px; text-decoration:underline; text-underline-offset:4px;
  }
  .why-link:hover{color:var(--coral);}
  @media (max-width:820px){.hero-inner{grid-template-columns:1fr;} .hero-art{order:-1; max-width:260px; margin:0 auto 16px;}}

  section{padding:80px 0;}
  .section-head{max-width:680px; margin:0 auto 44px; text-align:center;}
  .tag{display:inline-block; background:var(--bg-soft); color:var(--coral-dark); padding:6px 18px; border-radius:100px; font-weight:700; font-size:0.78rem; margin-bottom:14px;}
  .section-head h2{font-size:clamp(1.5rem,2.8vw,2.1rem);}
  .section-head p{color:var(--ink-soft); margin-top:12px;}

  /* ===== 理念フロー ===== */
  .about{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .flow-row{display:flex; justify-content:center; align-items:center; gap:8px; margin-bottom:44px; flex-wrap:wrap;}
  .flow-item{color:#fff; font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:0.96rem; padding:12px 26px; border-radius:100px; min-width:104px; text-align:center;}
  .flow-arrow{color:var(--ink-soft); font-size:1.05rem;}
  .f1{background:var(--leaf);} .f2{background:var(--sun); color:var(--ink);} .f3{background:var(--coral);} .f4{background:var(--sky);}
  @media (max-width:700px){.flow-row{flex-direction:column;} .flow-arrow{transform:rotate(90deg);}}
  .about-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .about-card{background:var(--bg-soft); border-radius:22px; padding:30px 24px;}
  .about-icon{width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:16px;}
  .about-card h3{font-size:1.02rem; margin-bottom:10px;}
  .about-card p{font-size:0.88rem; color:var(--ink-soft);}
  .i-leaf{background:#E4F2D9;} .i-sun{background:#FFEBCC;} .i-coral{background:#FFE1DB;}
  @media (max-width:820px){.about-grid{grid-template-columns:1fr;}}

  /* ===== 活動レポート ===== */
  .reports-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .report-card{background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,0.05); transition:transform 0.2s ease;}
  .report-card:hover{transform:translateY(-5px);}
  .report-thumb{height:110px; display:flex; align-items:center; justify-content:center; font-size:2.2rem;}
  .rt1{background:linear-gradient(135deg,#DDF0C4,#8CC63F);}
  .rt2{background:linear-gradient(135deg,#FFE3B0,#FFC93C);}
  .rt3{background:linear-gradient(135deg,#FFD2C8,#FF7A66);}
  .rt4{background:linear-gradient(135deg,#C9EAF7,#48B4E0);}
  .report-body{padding:18px 18px 22px;}
  .report-cat{display:inline-block; font-size:0.7rem; font-weight:700; color:var(--leaf-dark); background:var(--bg-soft); padding:3px 10px; border-radius:100px; margin-bottom:10px;}
  .report-date{font-size:0.72rem; color:var(--ink-soft); margin-bottom:6px;}
  .report-title{font-size:0.9rem; font-weight:700;}
  @media (max-width:900px){.reports-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.reports-grid{grid-template-columns:1fr;}}
  .reports-more{text-align:center; margin-top:34px;}

  /* ===== 活動内容 ===== */
  .activities{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .activities-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  .activity-card{background:var(--bg-soft); border-radius:22px; overflow:hidden;}
  .activity-photo{height:120px; display:flex; align-items:center; justify-content:center; font-size:2.1rem;}
  .ap-1{background:linear-gradient(135deg,#E4F2D9,#8CC63F);} .ap-2{background:linear-gradient(135deg,#FFEBCC,#FFC93C);}
  .ap-3{background:linear-gradient(135deg,#FFE1DB,#FF7A66);} .ap-4{background:linear-gradient(135deg,#C9EAF7,#48B4E0);}
  .activity-body{padding:22px;}
  .activity-body h3{font-size:1.02rem; margin-bottom:8px;}
  .activity-when{font-size:0.8rem; color:var(--leaf-dark); font-weight:700; margin-bottom:8px;}
  .activity-body p{font-size:0.87rem; color:var(--ink-soft);}
  @media (max-width:760px){.activities-grid{grid-template-columns:1fr;}}

  /* ===== 料金 ===== */
  .price{background:var(--bg-soft);}
  .price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
  .price-card{background:#fff; border-radius:22px; padding:30px 24px; text-align:center; display:flex; flex-direction:column; position:relative; box-shadow:0 10px 26px rgba(0,0,0,0.04);}
  .price-card.featured{background:linear-gradient(160deg,var(--leaf),var(--leaf-dark)); color:#fff;}
  .price-badge{position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--coral); color:#fff; font-size:0.72rem; font-weight:700; padding:5px 16px; border-radius:100px;}
  .price-name{font-family:'Zen Maru Gothic',sans-serif; font-weight:700; font-size:0.98rem; margin-bottom:10px;}
  .price-amount{font-family:'Zen Maru Gothic',sans-serif; font-weight:900; font-size:2rem;}
  .price-amount span{font-size:0.88rem; font-weight:700;}
  .price-note{font-size:0.82rem; color:var(--ink-soft); margin-top:10px;}
  .price-card.featured .price-note{color:#EAF6E2;}
  .price-entry{max-width:760px; margin:30px auto 0; text-align:center; font-size:0.85rem; color:var(--ink-soft); background:#fff; border-radius:16px; padding:16px;}
  @media (max-width:900px){.price-grid{grid-template-columns:1fr;}}

  /* ===== クイックリンク(はじめての方へ) ===== */
  .quicklinks{background:var(--panel); border-bottom:1px solid var(--line);}
  .quicklinks-inner{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding:26px 24px;}
  .quicklinks-label{font-weight:700; font-size:0.85rem; color:var(--ink-soft); flex-shrink:0;}
  .quicklinks-list{display:flex; gap:22px; flex-wrap:wrap; font-size:0.86rem; font-weight:700;}
  .quicklinks-list a{color:var(--coral-dark);}
  .quicklinks-list a:hover{text-decoration:underline;}

  /* ===== 保護者の声 ===== */
  .voices-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .voice-card{background:var(--bg-soft); border-radius:22px; padding:26px;}
  .voice-quote{font-size:0.9rem; margin-bottom:16px;}
  .voice-who{font-weight:700; font-size:0.85rem; color:var(--coral-dark);}
  .voice-sub{font-size:0.76rem; color:var(--ink-soft);}
  @media (max-width:820px){.voices-grid{grid-template-columns:1fr;}}

  /* ===== JOIN US ===== */
  .join{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .join-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .join-card{background:var(--bg-soft); border-radius:22px; padding:26px 22px; display:flex; flex-direction:column; gap:10px;}
  .join-icon{width:50px; height:50px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
  .join-card h3{font-size:0.98rem;}
  .join-card p{font-size:0.84rem; color:var(--ink-soft); flex-grow:1;}
  .join-link{font-size:0.82rem; font-weight:700; color:var(--coral-dark);}
  .join-link:hover{text-decoration:underline;}
  @media (max-width:900px){.join-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.join-grid{grid-template-columns:1fr;}}

  /* ============================================================
     そっと、のコーナー
     サイト全体は明るいトーンだが、ここだけ意図的に彩度と
     コントラストを落とし、静かで安心できる空気に切り替える。
     見た目の切り替え自体が「ここは違う場所ですよ」という
     心理的なサインになる。
  ============================================================ */
  .quiet-corner{background:var(--quiet-bg); padding:90px 0;}
  .quiet-box{
    max-width:680px; margin:0 auto; background:var(--quiet-panel);
    border-radius:28px; padding:48px 40px; text-align:center;
    box-shadow:0 16px 40px rgba(74,66,56,0.08);
  }
  .quiet-box .quiet-tag{
    display:inline-block; font-size:0.76rem; font-weight:700; color:var(--quiet-accent);
    background:#EEF1E9; padding:6px 16px; border-radius:100px; margin-bottom:20px;
  }
  .quiet-box h2{color:var(--quiet-ink); font-size:clamp(1.25rem,2.4vw,1.6rem); margin-bottom:18px; font-weight:700;}
  .quiet-box p{color:#7A7266; font-size:0.94rem; margin-bottom:28px; line-height:2;}
  .quiet-box .btn{background:var(--quiet-accent); color:#fff; box-shadow:none; font-size:0.9rem; padding:13px 26px;}
  .quiet-box .btn:hover{transform:translateY(-2px); background:#7C9270;}

  /* ===== FAQ ===== */
  .faq{background:var(--bg-soft);}
  .faq-list{max-width:760px; margin:0 auto; display:grid; gap:12px;}
  .faq-item{background:#fff; border-radius:16px; padding:6px 22px; box-shadow:0 6px 18px rgba(0,0,0,0.04);}
  .faq-item summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:700; font-size:0.92rem; display:flex; justify-content:space-between; align-items:center; gap:12px;}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:'+'; font-size:1.3rem; color:var(--coral); flex-shrink:0; transition:transform 0.2s ease;}
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{padding:0 0 18px; font-size:0.87rem; color:var(--ink-soft);}

  /* ===== お問い合わせ(全体向け) ===== */
  .contact{position:relative;}
  .contact-inner{background:linear-gradient(135deg,var(--sun),var(--coral)); border-radius:32px; padding:56px 40px; text-align:center; color:#fff; box-shadow:0 24px 50px rgba(255,122,102,0.3);}
  .contact h2{font-size:clamp(1.4rem,2.8vw,2rem); margin-bottom:14px; color:#fff;}
  .contact p{max-width:54ch; margin:0 auto 28px; opacity:0.96; font-size:0.95rem;}
  .contact .btn-row{justify-content:center;}
  .contact .btn-ghost{background:#fff; color:var(--coral-dark); border:none;}
  .contact .btn-outline{background:transparent; color:#fff; border:2px solid rgba(255,255,255,0.7); box-shadow:none;}
  .contact .btn-outline:hover{background:rgba(255,255,255,0.15); transform:translateY(-3px);}

  footer{background:var(--ink); color:#EFEAE2; padding:56px 0 28px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:36px;}
  .footer-logo{display:flex; align-items:center; gap:10px; font-family:'Zen Maru Gothic', sans-serif; font-weight:900; font-size:1.05rem; margin-bottom:12px;}
  .footer-logo .logo-mark{background:var(--sun);}
  footer p{color:#B9AE9E; font-size:0.87rem; max-width:34ch;}
  footer h3{font-size:0.87rem; margin-bottom:12px; color:#D9CFC2; font-weight:700;}
  footer li{margin-bottom:9px; font-size:0.87rem;}
  footer a:hover{color:var(--sun);}
  .footer-bottom{border-top:1px solid #4A4136; padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.77rem; color:#8C8070;}
  @media (max-width:820px){.footer-grid{grid-template-columns:1fr; gap:26px;}}

  /* ============================================================
     スクロールで表示するアニメーション
     ・JavaScriptが動かない場合は、最初から全部見える状態(opacity:1)
     ・JavaScriptが動くと、<html>に"js"クラスが付き、
       そのときだけ「最初は透明→スクロールでふわっと表示」になる
     つまりJavaScriptは「見せる/見せない」の制御はせず、
     あくまで演出(アニメーション)だけを担当する。
  ============================================================ */
  .fade-up{opacity:1; transform:none;}
  .js .fade-up{opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease;}
  .js .fade-up.in{opacity:1; transform:translateY(0);}

  /* ===== スマホ用 下部固定CTA ===== */
  .mobile-cta{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:200;
    background:#fff; border-top:1px solid var(--line); padding:10px 16px;
    box-shadow:0 -8px 24px rgba(0,0,0,0.08);
  }
  .mobile-cta a{
    display:block; text-align:center; background:var(--coral); color:#fff;
    padding:13px; border-radius:100px; font-weight:700; font-size:0.9rem;
  }
  @media (max-width:640px){
    .mobile-cta{display:block;}
    body{padding-bottom:64px;}
  }