:root{--picnic-ink:#29435e;--picnic-lemon:#f8e45c;--picnic-coral:#ef8064;--picnic-blue:#e8f4fa;--picnic-grass:#f1f6e5;--picnic-paper:#fffdf8;--picnic-sage:#718467}
.picnic-hero{height:min(800px,calc(100vh - 80px));min-height:650px;position:relative;overflow:hidden;background:var(--picnic-paper)}
.picnic-hero__picture{width:100%;height:100%;object-fit:cover;object-position:center}
.picnic-hero__story{position:absolute;left:max(5vw,calc((100vw - 1460px)/2));top:9%;width:min(560px,43vw);padding:34px 38px;text-align:center;background:rgba(255,253,248,.86);border-radius:48% 52% 45% 55%/46% 43% 57% 54%;backdrop-filter:blur(5px)}
.picnic-kicker{margin:0 0 8px;color:var(--picnic-sage);font-size:.76rem;font-weight:700;letter-spacing:.15em}
.picnic-hero h1{margin:0 0 18px;font-size:clamp(2.15rem,3.8vw,3.85rem);line-height:1.45;color:var(--picnic-ink)}
.picnic-hero h1 em{color:var(--picnic-coral);font-style:normal}
.picnic-hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:24px 0 8px}
.picnic-button{display:inline-block;padding:12px 21px;border-radius:999px;background:var(--picnic-coral);color:#fff;text-decoration:none;font-weight:700}
.picnic-button--quiet{background:#fff;color:#52705b}
.picnic-hero__story small{color:#71817b}
.picnic-hero__scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);color:#627760;text-decoration:none;font-size:.8rem}
.picnic-map{padding:105px max(24px,calc((100% - 1080px)/2));background:var(--picnic-grass);position:relative;overflow:hidden}
.picnic-map:before,.picnic-map:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.48)}
.picnic-map:before{width:430px;height:160px;left:-120px;top:280px}
.picnic-map:after{width:520px;height:190px;right:-160px;bottom:40px}
.picnic-map__head{text-align:center;position:relative;z-index:1}
.picnic-map__head h2{margin:0 0 12px;font-size:clamp(1.9rem,3.6vw,3rem);color:var(--picnic-ink)}
.picnic-trail{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 35px;max-width:980px;margin:60px auto 35px;position:relative;z-index:1}
.picnic-trail:before{content:"";position:absolute;inset:30px 9% 30px;border:2px dashed #bacaad;border-radius:48%;transform:rotate(-4deg);z-index:-1}
.picnic-place{min-height:150px;padding:24px 18px;text-align:center;text-decoration:none;color:var(--picnic-ink);background:var(--place,#fff);border-radius:48% 52% 44% 56%/52% 44% 56% 48%;transition:transform .2s}
.picnic-place:hover{transform:translateY(-6px)}
.picnic-place__marker{display:grid;place-items:center;width:38px;height:38px;margin:-40px auto 12px;border-radius:50%;background:var(--picnic-lemon);font-weight:700}
.picnic-place strong,.picnic-place small{display:block}
.picnic-place small{margin-top:7px}
.picnic-place--library{--place:#e3f1f7}
.picnic-place--lunch{--place:#fff0c8}
.picnic-place--play{--place:#eee9f7}
.picnic-place--tent{--place:#f8e9d9}
.picnic-place--board{--place:#e8efd4}
.picnic-place--market{--place:#fae8e1}
.picnic-rest{text-align:center;position:relative;z-index:1}
.picnic-rest span{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#bfd8b7;color:transparent;margin-right:8px}
@media(max-width:820px){.picnic-hero{height:740px}
.picnic-hero__picture{object-position:64% center}
.picnic-hero__story{left:4%;top:5%;width:58%;padding:28px 22px}
.picnic-trail{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.picnic-hero{height:680px;min-height:680px}
.picnic-hero__picture{object-position:66% center}
.picnic-hero__story{left:16px;right:16px;top:18px;width:auto;padding:22px 16px;background:rgba(255,253,248,.9)}
.picnic-hero h1{font-size:1.82rem}
.picnic-hero__story>p:not(.picnic-kicker){font-size:.86rem}
.picnic-map{padding:75px 18px}
.picnic-trail{grid-template-columns:1fr 1fr;gap:38px 8px}
.picnic-place{min-height:145px;padding:22px 8px}
.picnic-place strong{font-size:.88rem}
.picnic-place small{font-size:.7rem}
}

/* 学びの移動図書館。検索フォームではなく、草原で本を選ぶ場面として見せる。 */
.library-hero{position:relative;min-height:540px;overflow:hidden;background:#edf4dd}
.library-hero>img{display:block;width:100%;height:540px;object-fit:cover;object-position:center}
.library-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,253,247,.92) 0%,rgba(255,253,247,.7) 34%,rgba(255,255,255,0) 67%);pointer-events:none}
.library-hero__story{position:absolute;z-index:1;left:max(5vw,28px);top:50%;width:min(470px,42vw);transform:translateY(-50%);color:#17345d}
.library-hero__story h1{margin:.35rem 0 1rem;font-size:clamp(2rem,4vw,3.4rem);line-height:1.34;letter-spacing:.04em}
.library-hero__story p:last-child{line-height:2;font-weight:500}
.library-counter{padding:0 20px 62px;background:linear-gradient(#edf4dd 0,#f8f4df 60%,#fffdf8 100%)}
.library-search{position:relative;z-index:2;width:min(720px,calc(100% - 20px));margin:-34px auto 0;padding:24px 30px 20px;border:1px solid rgba(63,91,70,.12);border-radius:28px;background:rgba(255,253,247,.96);box-shadow:0 12px 30px rgba(48,74,58,.1)}
.library-search label{display:block;margin-bottom:10px;color:#17345d;font-size:1.05rem;font-weight:700}
.library-search label span{display:inline-grid;place-items:center;width:32px;height:32px;margin-right:7px;border-radius:50%;background:#f8e45c;font-size:1.3rem}
.library-search input{box-sizing:border-box;width:100%;padding:15px 18px;border:2px solid #c9dcc4;border-radius:16px;background:#fff;font:inherit;color:#17345d;outline:none}
.library-search input:focus{border-color:#7fa77c;box-shadow:0 0 0 4px rgba(167,201,158,.2)}
.library-search p{margin:10px 2px 0;color:#647060;font-size:.86rem}
.library-search strong{color:#e9785f;font-size:1.08rem}
.library-empty{margin:48px auto;padding:30px;border-radius:24px;background:#eef4fa;text-align:center;color:#17345d}
.term-list__item[hidden],.library-empty[hidden]{display:none}

@media(max-width:720px){
  .library-hero{min-height:610px}
  .library-hero>img{height:610px;object-position:63% center}
  .library-hero::after{background:linear-gradient(180deg,rgba(255,253,247,.94) 0%,rgba(255,253,247,.68) 48%,rgba(255,255,255,0) 75%)}
  .library-hero__story{left:22px;right:22px;top:42px;width:auto;transform:none}
  .library-hero__story h1{font-size:2rem}
  .library-search{padding:20px 18px}
}

/* ---- はじまりの劇(トップの吹き出しアニメ・2026-07-19統合) ---- */
.stage-balloons{position:absolute;inset:0;z-index:3;pointer-events:none}
.say{position:absolute;margin:0;max-width:330px;padding:14px 20px;background:rgba(255,255,255,.96);border-radius:24px 24px 24px 8px;box-shadow:0 10px 24px rgba(41,67,94,.10);font-size:.95rem;line-height:1.7;opacity:0;color:var(--picnic-ink)}
.say b{display:block;font-size:.7rem;color:#6c8265;margin-bottom:2px;font-weight:700}
.say--moyan{left:57%;top:24%}
.say--moyan:after{content:"";position:absolute;left:38px;bottom:-12px;border:8px solid transparent;border-top:14px solid rgba(255,255,255,.96)}
.say--sunny{left:33%;top:33%;background:#fff7dd;border-radius:24px 24px 8px 24px}
.say--sunny:after{content:"";position:absolute;right:44px;bottom:-12px;border:8px solid transparent;border-top:14px solid #fff7dd}
.say--sunny b{color:#b08a2e}
.loop.say--sunny{left:47%;top:42%}
@keyframes pic-say{0%{opacity:0;transform:translateY(12px) scale(.96)}8%{opacity:1;transform:none}80%{opacity:1;transform:none}96%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
.say-m1,.say-m2,.say-s1,.say-s2,.say-s3{animation:pic-say 3.1s ease both}
.say-m1{animation-delay:.8s}
.say-m2{animation-delay:4s}
.say-s1{animation-delay:7.2s}
.say-s2{animation-delay:10.4s}
.say-s3{animation-delay:13.6s}
@keyframes pic-step{to{opacity:1;transform:none}}
.picnic-hero__story{opacity:0;animation:pic-step 1.1s ease 16.2s forwards}
.picnic-hero .step{opacity:0;transform:translateY(10px);animation:pic-step .9s ease forwards}
.picnic-hero .step-1{animation-delay:16.6s}
.picnic-hero .step-2{animation-delay:16.9s}
.picnic-hero .step-3{animation-delay:17.3s}
.picnic-hero .step-4{animation-delay:17.7s}
.picnic-hero .step-5{animation-delay:18.1s}
.picnic-hero .step-6{animation-delay:18.5s}
@keyframes pic-loop{0%{opacity:0;transform:translateY(12px) scale(.96)}1.6%{opacity:1;transform:none}13.5%{opacity:1;transform:none}16%{opacity:0;transform:translateY(-6px)}100%{opacity:0}}
.loop{animation:pic-loop 28.8s ease infinite}
.loop-1{animation-delay:19.6s}
.loop-2{animation-delay:24.4s}
.loop-3{animation-delay:29.2s}
.loop-4{animation-delay:34s}
.loop-5{animation-delay:38.8s}
.loop-6{animation-delay:43.6s}
.picnic-hero__sub{font-size:1.12rem;font-weight:700;line-height:1.9;margin:0 0 10px}
.picnic-hero__sub em{font-style:normal;color:var(--picnic-coral)}
.picnic-hero__tag{font-size:.88rem;color:#71808a;margin:0}
.picnic-hero h1{line-height:1.35}
.library-trust{margin:8px 2px 0;font-size:.76rem;color:#6f8267}
@media (prefers-reduced-motion: reduce){
  .stage-balloons{display:none}
  .picnic-hero__story{opacity:1;animation:none}
  .picnic-hero .step{opacity:1;transform:none;animation:none}
}
@media(max-width:820px){
  .say{max-width:64vw;font-size:.86rem}
  .say--moyan{left:auto;right:5%;top:18%}
  .say--sunny{left:6%;top:34%}
  .loop.say--moyan{left:auto;right:5%;top:18%}
  .loop.say--sunny{left:6%;top:36%}
}
@media(max-width:560px){
  .say{max-width:80vw}
  .say--moyan{right:4%;top:14%}
  .say--sunny{left:4%;top:30%}
  .say--sunny:after{right:auto;left:44px}
}

/* ---- ヒーローv3: 中央ロックアップ+下段の草原(2026-07-19) ---- */
.picnic-hero--lockup{height:auto;min-height:0;display:flex;flex-direction:column;background:linear-gradient(#fffdf8,#fdfaf0)}
.picnic-lockup{position:relative;z-index:2;width:min(660px,94vw);margin:40px auto 0;text-align:center}
.picnic-arch{width:100%;height:auto;display:block;margin-bottom:-26px}
.picnic-arch__text{font-size:20px;font-weight:700;fill:#5b7562;letter-spacing:.05em}
.picnic-arch__text--sub{font-size:17px;fill:#83926f}
.picnic-rainbow{position:relative;width:180px;height:86px;margin:0 auto 10px}
.picnic-rainbow i{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:50% 50% 0 0;border:9px solid var(--c);border-bottom:0;width:var(--w);height:calc(var(--w)/2)}
.picnic-rainbow i:nth-child(1){--w:162px;--c:#f4a8a0}
.picnic-rainbow i:nth-child(2){--w:134px;--c:#f7ca92}
.picnic-rainbow i:nth-child(3){--w:106px;--c:#f7e28e}
.picnic-rainbow i:nth-child(4){--w:78px;--c:#cfe4ab}
.picnic-rainbow i:nth-child(5){--w:50px;--c:#b7dbe9}
.picnic-rainbow i:nth-child(6){--w:22px;--c:#d8cbe9}
.picnic-hero--lockup h1{margin:0 0 10px;font-size:clamp(2.05rem,4vw,3.35rem);line-height:1.3;color:var(--picnic-ink)}
.picnic-hero--lockup .picnic-hero__sub{margin:0 0 6px;font-size:clamp(1rem,1.9vw,1.2rem)}
.picnic-hero--lockup .picnic-hero__actions{margin:16px 0 8px}
.picnic-hero--lockup .picnic-lockup small{color:#71817b}
.picnic-hero__scene{position:relative;margin-top:16px}
.picnic-hero__scene .picnic-hero__picture{width:100%;height:min(46vh,440px);object-fit:cover;object-position:center 100%;display:block}
.picnic-hero--lockup .picnic-hero__scroll{position:static;transform:none;display:block;text-align:center;padding:12px 0 16px;background:#f4f0e2}
/* 吹き出しは下段の草原の中で */
.picnic-hero--lockup .stage-balloons{position:absolute;inset:0}
.picnic-hero--lockup .say--moyan{left:56%;top:3%}
.picnic-hero--lockup .say--sunny{left:29%;top:9%}
.picnic-hero--lockup .loop.say--moyan{left:56%;top:3%}
.picnic-hero--lockup .loop.say--sunny{left:44%;top:12%}
/* 台本v3: タイトルが先(1〜3.4s)、劇は3.6sから */
.picnic-hero--lockup .step-1{animation-delay:.5s}
.picnic-hero--lockup .step-2{animation-delay:1s}
.picnic-hero--lockup .step-3{animation-delay:1.5s}
.picnic-hero--lockup .step-4{animation-delay:2s}
.picnic-hero--lockup .step-5{animation-delay:2.5s}
.picnic-hero--lockup .step-6{animation-delay:2.9s}
.picnic-hero--lockup .say-m1{animation-delay:3.6s}
.picnic-hero--lockup .say-m2{animation-delay:6.8s}
.picnic-hero--lockup .say-s1{animation-delay:10s}
.picnic-hero--lockup .say-s2{animation-delay:13.2s}
.picnic-hero--lockup .say-s3{animation-delay:16.4s}
.picnic-hero--lockup .loop-1{animation-delay:20.4s}
.picnic-hero--lockup .loop-2{animation-delay:25.2s}
.picnic-hero--lockup .loop-3{animation-delay:30s}
.picnic-hero--lockup .loop-4{animation-delay:34.8s}
.picnic-hero--lockup .loop-5{animation-delay:39.6s}
.picnic-hero--lockup .loop-6{animation-delay:44.4s}
@media(max-width:820px){
  .picnic-hero--lockup{height:auto}
  .picnic-hero__scene .picnic-hero__picture{height:320px;object-position:60% 100%}
  .picnic-hero--lockup .say--moyan,.picnic-hero--lockup .loop.say--moyan{left:auto;right:4%;top:3%}
  .picnic-hero--lockup .say--sunny{left:5%;top:8%}
  .picnic-hero--lockup .loop.say--sunny{left:5%;top:8%}
}
@media(max-width:560px){
  .picnic-hero--lockup{height:auto;min-height:0}
  .picnic-arch{margin-bottom:0}
  .picnic-hero--lockup h1{font-size:1.68rem}
  .picnic-rainbow{width:120px;height:58px;margin-bottom:6px}
  .picnic-rainbow i{border-width:6px}
  .picnic-hero__scene .picnic-hero__picture{height:290px;object-position:63% 100%}
}

/* ロックアップの飾り雲(2026-07-19 パーツ素材) */
.picnic-lockup__cloud{position:absolute;z-index:-1;opacity:.85}
.picnic-lockup__cloud--l{left:-16%;top:4%;width:120px}
.picnic-lockup__cloud--r{right:-14%;top:26%;width:90px}
/* エピソードのアバター: 透過パーツ用に調整 */
@media(max-width:560px){.picnic-lockup__cloud--l{left:-2%;width:74px}.picnic-lockup__cloud--r{right:-2%;width:56px}}

/* ---- キャリア理論家とピクニックランチ(ハブ /obento/) ---- */
.obento-hero{position:relative;text-align:center;padding:70px 20px 56px;background:linear-gradient(#f6fbf2,#eef4dd);overflow:hidden}
.obento-hero h1{margin:6px 0 14px;font-size:clamp(2rem,4vw,3.2rem);line-height:1.35;color:var(--picnic-ink)}
.obento-hero__lede{margin:0 auto;max-width:560px;line-height:2;color:#5c6f60}
.obento-hero__bento{position:absolute;right:max(4vw,20px);bottom:-14px;width:110px;transform:rotate(6deg);opacity:.95}
.obento-search{width:min(720px,100%);margin:34px auto 8px;padding:22px 28px 16px;border:1px solid rgba(63,91,70,.12);border-radius:26px;background:rgba(255,253,247,.96);box-shadow:0 10px 26px rgba(48,74,58,.08)}
.obento-search label{display:block;margin-bottom:10px;color:#17345d;font-weight:700}
.obento-search label span{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:6px;border-radius:50%;background:#f8e45c}
.obento-search input{box-sizing:border-box;width:100%;padding:14px 17px;border:2px solid #c9dcc4;border-radius:15px;background:#fff;font:inherit;color:#17345d;outline:none}
.obento-search input:focus{border-color:#7fa77c;box-shadow:0 0 0 4px rgba(167,201,158,.2)}
.obento-search__note{margin:10px 2px 0;color:#647060;font-size:.84rem}
.obento-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px;margin:26px 0 10px}
.obento-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:24px;background:#fffdf8;border:1px solid rgba(63,91,70,.1);text-decoration:none;color:var(--picnic-ink);transition:transform .18s,box-shadow .18s}
.obento-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(48,74,58,.1)}
.obento-card--ready{border-color:#f0c98d;background:#fffbef}
.obento-card__motif{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#f1f6e5;font-size:1.5rem;font-style:normal}
.obento-card__body{display:grid;gap:4px}
.obento-card__body strong{font-size:1.04rem}
.obento-card__body small{color:#71817b}
.obento-card__greeting{margin-top:2px;padding:9px 13px;border-radius:14px 14px 14px 4px;background:#f4f8ed;font-size:.84rem;line-height:1.7}
.obento-card--ready .obento-card__greeting{background:#fff1c8}
.obento-card__cta{margin-top:4px;font-size:.8rem;font-weight:700;color:#b0693f}
.obento-card:not(.obento-card--ready) .obento-card__cta{color:#7d8b80;font-weight:500}
.obento-note{margin:26px auto 60px;max-width:640px;text-align:center;font-size:.78rem;color:#8a97a4;line-height:1.9}
.obento-card[hidden]{display:none}
@media(max-width:560px){.obento-hero__bento{width:76px}.obento-grid{grid-template-columns:1fr}}

/* ---- クリックできるピクニックマップ + 施設カード(2026-07-19) ---- */
.picnic-map{background:var(--picnic-grass)}
.map-stage{position:relative;width:min(1120px,94vw);margin:40px auto 10px;border-radius:34px;overflow:hidden;box-shadow:0 16px 40px rgba(48,74,58,.12)}
.map-stage__picture{display:block;width:100%;height:auto}
.map-spot{position:absolute;display:flex;align-items:flex-end;justify-content:center;text-decoration:none;border-radius:22px;min-width:44px;min-height:44px;transition:transform .22s ease,background .22s ease}
.map-spot:hover,.map-spot:focus-visible{transform:translateY(-4px);background:rgba(255,255,255,.22);box-shadow:0 0 0 3px rgba(255,255,255,.55),0 14px 30px rgba(248,228,92,.35)}
.map-spot:focus-visible{outline:3px solid #e7995d;outline-offset:2px}
.map-spot__sign{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:7px 12px;border-radius:14px;background:rgba(255,253,248,.94);border:2px solid var(--sign,#e5d9b8);box-shadow:0 4px 10px rgba(48,74,58,.12);font-size:.8rem;color:#3d4f42;white-space:nowrap;transition:transform .22s ease}
.map-spot__sign i{font-style:normal;font-size:1rem}
.map-spot__sign b{font-weight:700}
.map-spot__sign small{color:#b0693f;font-weight:700}
.map-spot:hover .map-spot__sign{transform:scale(1.05)}
.map-spot__hint{position:absolute;left:50%;top:-8px;transform:translate(-50%,-100%);padding:6px 12px;border-radius:999px;background:#29435e;color:#fff;font-size:.72rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease}
.map-spot__hint:after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top:6px solid #29435e;border-bottom:0}
@media(hover:hover){.map-spot:hover .map-spot__hint{opacity:1}}
.map-spot--blue{--sign:#bcd9e8}.map-spot--coral{--sign:#f3c1ae}.map-spot--yellow{--sign:#eeda90}.map-spot--pink{--sign:#f0c6cb}.map-spot--green{--sign:#c9dcb0}.map-spot--lavender{--sign:#d5c9e6}.map-spot--cream{--sign:#e5d9b8}
.picnic-rest-note{text-align:center;margin:18px 0 0;color:#657a67;font-size:.86rem}
/* 施設カード(絵本風) */
.facility-cards{padding:85px max(24px,calc((100% - 1120px)/2));background:linear-gradient(#fffdf8,#fbf7ea)}
.facility-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:36px}
.facility-card{position:relative;display:flex;gap:14px;align-items:flex-start;padding:22px 20px;border-radius:26px 30px 26px 30px;background:var(--card,#fffdf8);border:2px solid var(--edge,#eadfc2);text-decoration:none;color:var(--picnic-ink);transition:transform .2s ease,box-shadow .2s ease;overflow:hidden}
.facility-card:before{content:"❀";position:absolute;right:14px;bottom:8px;color:rgba(255,255,255,.8);font-size:1.1rem}
.facility-card:hover,.facility-card:focus-visible{transform:translateY(-5px);box-shadow:0 14px 30px rgba(48,74,58,.13)}
.facility-card:focus-visible{outline:3px solid #e7995d;outline-offset:2px}
.facility-card__icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:46% 54% 48% 52%;background:rgba(255,255,255,.85);font-size:1.5rem}
.facility-card__body{display:grid;gap:7px}
.facility-card__body strong{font-size:1.06rem}
.facility-card__desc{font-size:.87rem;line-height:1.8;color:#54695a}
.facility-card__reco{display:flex;flex-wrap:wrap;gap:5px}
.facility-card__reco em{font-style:normal;font-size:.72rem;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.9);color:#6a7d6c}
.facility-card__cta{margin-top:2px;font-size:.84rem;font-weight:700;color:#b0693f}
.facility-card--blue{--card:#eef6fa;--edge:#cfe2ec}
.facility-card--coral{--card:#fdf1ea;--edge:#f0cdb9}
.facility-card--yellow{--card:#fdf7e2;--edge:#eadfa0}
.facility-card--pink{--card:#fbeff0;--edge:#eccdd2}
.facility-card--green{--card:#f1f6e7;--edge:#d3e0ba}
.facility-card--lavender{--card:#f3f0f8;--edge:#d9cfe8}
.facility-card--cream{--card:#faf6ec;--edge:#e5dcc2}
@media(max-width:980px){.facility-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .facility-grid{grid-template-columns:1fr}
  .map-spot__sign{font-size:.68rem;padding:5px 8px;gap:4px}
  .map-spot__sign small{display:none}
  .map-stage{border-radius:20px}
}

/* ---- オリジナルイラスト対応(2026-07-19) ---- */
.map-spot__sign i img{width:22px;height:22px;object-fit:contain;vertical-align:-5px}
.facility-card__icon img{width:40px;height:40px;object-fit:contain}
.obento-card__motif img,.line__avatar--motif img{width:80%;height:80%;object-fit:contain}

/* ---- v1.2 余白とこじんまり調整(2026-07-19 ちゃん指示) ----
 * タイトル・アイキャッチを控えめに、余白を主役に */
.picnic-lockup{width:min(560px,92vw);margin:64px auto 0}
.picnic-arch{width:78%;margin:0 auto -16px}
.picnic-rainbow{width:118px;height:56px;margin:0 auto 10px}
.picnic-rainbow i{border-width:6px}
.picnic-hero--lockup h1{font-size:clamp(1.65rem,2.8vw,2.45rem);letter-spacing:.04em}
.picnic-hero--lockup .picnic-hero__sub{font-size:clamp(.95rem,1.6vw,1.08rem);margin-bottom:4px}
.picnic-hero__tag{font-size:.8rem}
.picnic-button{padding:10px 20px;font-size:.9rem}
.picnic-hero--lockup .picnic-hero__actions{margin:18px 0 6px}
.picnic-hero__scene{width:min(840px,88vw);margin:34px auto 0;border-radius:26px;overflow:hidden;box-shadow:0 14px 34px rgba(48,74,58,.10)}
.picnic-hero__scene .picnic-hero__picture{height:min(34vh,300px);object-position:center 100%}
.picnic-hero--lockup .say{max-width:250px;font-size:.82rem;padding:10px 15px}
.picnic-hero--lockup .say b{font-size:.64rem}
.picnic-hero--lockup .picnic-hero__scroll{position:static;transform:none;display:block;text-align:center;background:transparent;padding:18px 0 26px;color:#8a9a89}
@media(max-width:560px){
  .picnic-lockup{margin-top:40px}
  .picnic-hero--lockup h1{font-size:1.5rem}
  .picnic-hero__scene{width:94vw;border-radius:18px}
  .picnic-hero__scene .picnic-hero__picture{height:210px}
}

/* ---- v1.3 パーツ配置ステージ(2026-07-19 ちゃん指示:1枚絵をやめて、イラストを一つずつ配置) ---- */
.picnic-stage{position:relative;width:min(1060px,96vw);height:400px;margin:40px auto 0}
.picnic-stage:before{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:130%;height:230px;background:#eef4dd;border-radius:50% 50% 0 0 / 100% 100% 0 0}
.ps{position:absolute;height:auto}
/* 空 */
.ps-cloud1{left:4%;top:2%;width:88px;opacity:.9}
.ps-cloud2{right:6%;top:8%;width:78px;opacity:.9}
/* 左サイド:移動図書館 */
.ps-wagon{left:1.5%;bottom:13%;width:168px}
.ps-pinwheel{left:17.5%;bottom:15%;width:36px}
/* 右サイド:テント・掲示板・マルシェ・木 */
.ps-tree{right:24.5%;bottom:26%;width:84px}
.ps-tent{right:17%;bottom:19%;width:104px}
.ps-board{right:7.5%;bottom:14%;width:112px}
.ps-stall{right:-0.5%;bottom:9%;width:126px}
/* 中央:シートとふたり */
.ps-mat{left:50%;bottom:-2%;transform:translateX(-56%);width:470px}
.ps-sunny{left:31%;bottom:9%;width:148px}
.ps-moyan{left:50%;bottom:10%;width:118px}
.ps-lunch{left:44.5%;bottom:3.5%;width:86px}
.ps-note{left:34%;bottom:1.5%;width:64px}
.ps-pencil{left:40.5%;bottom:.5%;width:40px}
.ps-ball{left:59.5%;bottom:2%;width:52px}
.ps-bag{left:63%;bottom:8%;width:72px}
/* 足元の草花 */
.ps-flowerl{left:0;bottom:-2%;width:96px}
.ps-bushl{left:9%;bottom:-4%;width:74px}
.ps-flowerr{right:0;bottom:-2%;width:92px}
.ps-bushr{right:10%;bottom:-4%;width:72px}
/* ゆるやかな浮遊(雲だけ) */
@media(prefers-reduced-motion:no-preference){
  .ps-cloud1{animation:ps-drift 9s ease-in-out infinite alternate}
  .ps-cloud2{animation:ps-drift 11s ease-in-out infinite alternate-reverse}
  @keyframes ps-drift{from{transform:translateX(0)}to{transform:translateX(14px)}}
}
/* 吹き出しの位置(ふたりの頭の上に) */
.picnic-hero--lockup .picnic-stage .say--sunny{left:16%;top:6%}
.picnic-hero--lockup .picnic-stage .say--moyan{left:55%;top:2%}
.picnic-hero--lockup .picnic-stage .loop.say--sunny{left:16%;top:6%}
.picnic-hero--lockup .picnic-stage .loop.say--moyan{left:55%;top:2%}
/* タブレット〜スマホ:施設は畳んで、ふたりとシートを主役に */
@media(max-width:900px){
  .picnic-stage{height:330px}
  .ps-wagon{left:0;width:126px;bottom:10%}
  .ps-pinwheel{left:12.5%}
  .ps-stall{display:none}
  .ps-board{right:1%}
  .ps-tent{right:13%}
  .ps-tree{display:none}
}
@media(max-width:640px){
  .picnic-stage{height:300px;margin-top:26px}
  .picnic-stage:before{height:180px}
  .ps-wagon,.ps-pinwheel,.ps-board{display:none}
  .ps-tent{right:4%;bottom:12%;width:88px}
  .ps-mat{width:340px}
  .ps-sunny{left:16%;bottom:10%;width:118px}
  .ps-moyan{left:48%;bottom:11%;width:96px}
  .ps-lunch{left:40%;bottom:4%;width:68px}
  .ps-note{left:22%;bottom:2%;width:52px}
  .ps-pencil{left:31%;bottom:1%;width:32px}
  .ps-ball{left:62%;bottom:3%;width:44px}
  .ps-bag{left:68%;bottom:9%;width:60px}
  .picnic-hero--lockup .picnic-stage .say{max-width:74vw;font-size:.8rem}
  .picnic-hero--lockup .picnic-stage .say--sunny,.picnic-hero--lockup .picnic-stage .loop.say--sunny{left:4%;top:2%}
  .picnic-hero--lockup .picnic-stage .say--moyan,.picnic-hero--lockup .picnic-stage .loop.say--moyan{left:auto;right:4%;top:2%}
}

/* ---- v1.3b 縦の詰め(1画面でロックアップ+舞台が収まるように) ---- */
.picnic-lockup{margin-top:40px}
.picnic-stage{height:330px;margin-top:12px}
.picnic-stage:before{height:200px}
.ps-cloud1{top:6%}
.ps-cloud2{top:14%}
@media(max-width:900px){.picnic-stage{height:300px}}
@media(max-width:640px){.picnic-stage{height:260px;margin-top:6px}.picnic-stage:before{height:160px}}

/* ---- v1.4 マップのパーツ化(2026-07-19 ちゃん指示:べた画像をやめ、白背景でパーツを直接配置) ---- */
.picnic-map{background:#fff}
.picnic-map:before,.picnic-map:after{display:none}
.map-stage{border-radius:0;overflow:visible;box-shadow:none;aspect-ratio:16/9;width:min(1120px,94vw)}
.mp{position:absolute;height:auto}
/* 空 */
.mp-cloud1{left:24%;top:2%;width:6%;opacity:.85}
.mp-cloud2{left:57%;top:0;width:5.5%;opacity:.85}
/* 施設(看板の位置=picnicFacilitiesの%と対応) */
.mp-wagon{left:6.5%;top:14%;width:13%}
.mp-pinwheel{left:20.5%;top:24%;width:2.8%}
.mp-mat{left:31%;top:20%;width:17%}
.mp-lunch{left:36.5%;top:25%;width:6%}
.mp-tent1{left:71%;top:6%;width:9.5%}
.mp-tent2{left:80%;top:37%;width:8.5%}
.mp-board{left:6%;top:52%;width:11.5%}
.mp-stall{left:37%;top:60%;width:11%}
.mp-tree1{left:64%;top:57%;width:6.5%}
.mp-hammock{left:68.5%;top:69%;width:10.5%}
.mp-tree2{left:78%;top:57%;width:6.5%}
/* 草花 */
.mp-flowerl{left:1%;top:88%;width:8%}
.mp-bushl{left:26%;top:90%;width:6%}
.mp-flowerr{left:90.5%;top:84%;width:8%}
.mp-bushr{left:55%;top:90%;width:6%}
/* モヤン&サニー(カーソルを追いかけて散歩) */
.map-chara{position:absolute;pointer-events:none;z-index:2;will-change:transform}
#map-sunny{left:47%;top:38%;width:7.5%}
#map-moyan{left:54.5%;top:44%;width:5.8%}
.map-chara img{width:100%;height:auto;display:block;animation:mp-bob 3.4s ease-in-out infinite}
#map-moyan img{animation-duration:2.9s}
@keyframes mp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.map-chara img{animation:none}}
/* 小さい画面:ステージを縦長にして看板を読みやすく */
@media(max-width:640px){
  .map-stage{aspect-ratio:5/6}
  .mp-cloud1{width:10%}
  .mp-cloud2{width:9%}
  .mp-wagon{width:20%;top:12%}
  .mp-pinwheel{display:none}
  .mp-mat{width:26%;left:32%}
  .mp-lunch{width:9%;left:40%}
  .mp-tent1{width:15%;left:72%}
  .mp-tent2{width:13%;left:80%}
  .mp-board{width:17%}
  .mp-stall{width:17%;left:36%}
  .mp-tree1{width:10%;left:62%}
  .mp-hammock{width:16%;left:68%}
  .mp-tree2{width:10%;left:83%}
  .mp-bushl,.mp-bushr{display:none}
  #map-sunny{width:12%;left:44%;top:40%}
  #map-moyan{width:9.5%;left:55%;top:45%}
}
/* v1.4b 看板は常にキャラより手前・キャラ定位置を空きへ */
.map-spot{z-index:3}
#map-sunny{left:48%;top:46%}
#map-moyan{left:55%;top:52%}

/* ---- v1.5 マップ背景を草原に+小道(2026-07-19 ちゃん指示) ---- */
.picnic-map{background:linear-gradient(180deg,#f8fbf0 0%,#eef4dc 55%,#e9f1d3 100%)}
.picnic-map:before,.picnic-map:after{display:block}
.map-trail{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}

/* ---- v1.7 一括調整(2026-07-19 ちゃん指示11項目) ---- */
/* 1) 虹をワンポイントサイズに */
.picnic-rainbow{width:44px;height:23px;margin:0 auto 8px}
.picnic-rainbow i{border-width:2.5px}
.picnic-rainbow i:nth-child(1){--w:40px}
.picnic-rainbow i:nth-child(2){--w:33px}
.picnic-rainbow i:nth-child(3){--w:26px}
.picnic-rainbow i:nth-child(4){--w:19px}
.picnic-rainbow i:nth-child(5){--w:12px}
.picnic-rainbow i:nth-child(6){--w:5px}
/* 2) ボタン撤去後の余白 */
.picnic-lockup small{display:block;margin-top:12px}
/* 3) レジャーシートを半分に+ふたりを寄せる */
.ps-mat{left:50%;transform:translateX(-50%);width:260px}
.ps-sunny{left:38%;bottom:10%;width:112px}
.ps-moyan{left:52%;bottom:11%;width:88px}
.ps-lunch{left:45.5%;bottom:4.5%;width:62px}
.ps-note{left:39.5%;bottom:2.5%;width:46px}
.ps-pencil{left:43.5%;bottom:1.5%;width:30px}
.ps-ball{left:56.5%;bottom:3%;width:40px}
.ps-bag{left:59.5%;bottom:9%;width:54px}
/* 5) マップ背景をトップの草原と同じ色に。楕円は撤去 */
.picnic-map{background:#eef4dd}
.picnic-map:before,.picnic-map:after{display:none}
/* 6) 白抜きのモコモコ雲 */
.map-cloud{position:absolute;z-index:0;width:110px;height:34px;background:#fff;border-radius:999px}
.map-cloud:before,.map-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.map-cloud:before{width:46px;height:46px;left:16px;top:-22px}
.map-cloud:after{width:30px;height:30px;right:18px;top:-13px}
.map-cloud--a{left:21%;top:2%}
.map-cloud--b{left:55%;top:0;transform:scale(.8)}
.map-cloud--c{left:86%;top:6%;transform:scale(.62)}
/* 8) 広場にスーパーさん */
.mp-super{left:44%;top:13%;width:5%;border-radius:50%;box-shadow:0 4px 12px rgba(48,74,58,.16)}
/* 9) ホバー効果の見直し:白かぶせ・白リング・濃紺ヒントを廃止 */
.map-spot:hover,.map-spot:focus-visible{transform:translateY(-3px);background:transparent;box-shadow:none}
.map-spot:focus-visible{outline:3px solid #e7995d;outline-offset:2px}
/* 11) 施設ごとのひとこと(トンマナ吹き出し) */
.map-spot__note{position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%) scale(.96);padding:8px 14px;border-radius:16px;background:#fffdf8;border:2px solid var(--sign,#e5d9b8);color:#3d4f42;font-size:.78rem;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 6px 16px rgba(48,74,58,.12);z-index:4}
.map-spot__note:after{content:"";position:absolute;left:calc(50% - 5px);bottom:-7px;width:10px;height:10px;background:#fffdf8;border-right:2px solid var(--sign,#e5d9b8);border-bottom:2px solid var(--sign,#e5d9b8);transform:rotate(45deg)}
@media(hover:hover){.map-spot:hover .map-spot__note,.map-spot:focus-visible .map-spot__note{opacity:1;transform:translate(-50%,-100%) scale(1)}}
/* スマホ調整 */
@media(max-width:640px){
  .ps-mat{width:210px}
  .ps-sunny{left:30%;bottom:10%;width:96px}
  .ps-moyan{left:52%;bottom:11%;width:74px}
  .ps-lunch{left:44%;bottom:5%;width:52px}
  .ps-note{left:34%;bottom:3%;width:38px}
  .ps-pencil{display:none}
  .ps-ball{left:60%;bottom:3.5%;width:34px}
  .ps-bag{left:64%;bottom:9%;width:46px}
  .map-cloud--b,.map-cloud--c{display:none}
  .mp-super{width:9%;left:43%;top:12%}
}

/* ---- v1.8b タイトルの格を戻す(2026-07-19 ちゃん指示:マップ見出しと同じフォント感・タイトルらしい大きさ) ---- */
.picnic-hero--lockup h1{font-size:clamp(2.2rem,4.4vw,3.5rem);letter-spacing:0;line-height:1.3;font-weight:700}
@media(max-width:640px){.picnic-hero--lockup h1{font-size:2rem}}
.picnic-lockup{width:min(760px,94vw)}
.picnic-hero--lockup h1{white-space:nowrap}
@media(max-width:640px){.picnic-hero--lockup h1{white-space:normal}}
@media(max-width:640px){.picnic-hero--lockup h1{font-size:1.72rem;white-space:nowrap}}

/* ---- v2.1 ランチハブにピクニックシーン(2026-07-20 ちゃん指示) ---- */
.obento-hero__bento{display:none}
.obento-hero__scene{position:relative;width:min(560px,90vw);height:170px;margin:18px auto -20px}
.ob{position:absolute;bottom:0;height:auto}
.ob-mat{left:50%;transform:translateX(-50%);bottom:-4px;width:340px}
.ob-sunny{left:24%;bottom:12px;width:110px}
.ob-moyan{left:46%;bottom:14px;width:86px}
.ob-lunch{left:38%;bottom:2px;width:64px}
.ob-ball{left:62%;bottom:4px;width:44px}
.ob-flowerl{left:0;bottom:0;width:74px}
.ob-flowerr{right:0;bottom:0;width:72px}
@media(max-width:640px){
  .obento-hero__scene{height:140px}
  .ob-mat{width:270px}
  .ob-sunny{left:20%;width:92px}
  .ob-moyan{left:45%;width:70px}
  .ob-lunch{left:36%;width:52px}
  .ob-ball{left:63%;width:36px}
}

/* ---- v2.3 note式ヒーロー(2026-07-20 ちゃん相談で決定:大きな一言+絵+ボタン1個) ---- */
.hero-note{width:min(880px,94vw);margin:72px auto 0;text-align:center}
.picnic-hero--note h1{margin:0 0 18px;font-size:clamp(1.85rem,3.5vw,2.9rem);line-height:1.65;letter-spacing:.01em;white-space:normal;color:var(--picnic-ink);font-weight:700}
.picnic-hero--note h1 em{color:var(--picnic-coral);font-style:normal}
.hero-note__sub{margin:0 0 28px;color:#5d7263;font-size:clamp(.95rem,1.6vw,1.08rem);font-weight:500}
.picnic-hero--note .picnic-button{padding:14px 32px;font-size:1rem;box-shadow:0 8px 20px rgba(239,128,100,.28)}
.picnic-hero--note .picnic-stage{margin-top:26px}
@media(max-width:640px){
  .hero-note{margin-top:44px}
  .picnic-hero--note h1{font-size:1.5rem;line-height:1.75}
}

/* ---- v2.4 はじまりの劇 復活版(2026-07-20 ちゃん指示:不安→寄り添い→ベネフィット→縮小→タイトル) ---- */
.picnic-hero--note{position:relative}
/* 幕が上がるまで、主役たちは待機 */
.picnic-hero--note .hero-note .step{opacity:0;transform:translateY(10px);animation:pic-step .9s ease forwards}
.picnic-hero--note .step-1{animation-delay:10.6s}
.picnic-hero--note .step-2{animation-delay:11s}
.picnic-hero--note .step-3{animation-delay:11.4s}
.picnic-hero--note .picnic-stage{opacity:0;animation:pic-step 1.1s ease 9.9s forwards}
/* 劇の舞台 */
.hero-intro{position:absolute;inset:0;z-index:6;pointer-events:none}
.hero-intro__moyan,.hero-intro__sunny{position:absolute;opacity:0}
.hero-intro__moyan{left:51%;top:24%;width:150px;animation:hi-in .9s ease .3s forwards,hi-out 1.3s ease 9.2s forwards}
.hero-intro__sunny{left:33%;top:21%;width:190px;animation:hi-in .9s ease 3.4s forwards,hi-out 1.3s ease 9.2s forwards}
@keyframes hi-in{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes hi-out{to{opacity:0;transform:translateY(300px) scale(.4)}}
/* 劇のセリフ(順番に出て、消える) */
.hero-say{position:absolute;margin:0;max-width:340px;padding:16px 22px;background:rgba(255,255,255,.97);border-radius:24px 24px 24px 8px;box-shadow:0 10px 26px rgba(41,67,94,.12);font-size:.95rem;line-height:1.9;opacity:0;color:var(--picnic-ink)}
.hero-say b{display:block;font-size:.7rem;color:#6c8265;margin-bottom:3px;font-weight:700}
.hero-say--moyan{left:56%;top:8%}
.hero-say--moyan:after{content:"";position:absolute;left:34px;bottom:-12px;border:8px solid transparent;border-top:14px solid rgba(255,255,255,.97)}
.hero-say--sunny{left:24%;top:5%;background:#fff7dd;border-radius:24px 24px 8px 24px}
.hero-say--sunny:after{content:"";position:absolute;right:40px;bottom:-12px;border:8px solid transparent;border-top:14px solid #fff7dd}
.hero-say--sunny b{color:#b08a2e}
.hero-say-1{animation:pic-say 3s ease .8s both}
.hero-say-2{animation:pic-say 3s ease 3.9s both}
.hero-say-3{animation:pic-say 3s ease 7s both;max-width:400px}
.hero-intro__skip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;font-size:.72rem;color:#9aa79b;opacity:0;animation:hi-in .8s ease 1.6s forwards,hi-out .5s ease 9s forwards}
/* 劇の間、舞台上の会話(重複するセリフ)は出さない */
.picnic-hero--note .say-m1,.picnic-hero--note .say-m2,.picnic-hero--note .say-s1,.picnic-hero--note .say-s2,.picnic-hero--note .say-s3{display:none}
/* クリックでスキップ(JSが .is-done を付ける) */
.picnic-hero--note.is-done .hero-intro{display:none}
.picnic-hero--note.is-done .hero-note .step,.picnic-hero--note.is-done .picnic-stage{opacity:1;transform:none;animation:none}
/* 動きを減らす設定の人には、完成形を最初から */
@media(prefers-reduced-motion:reduce){
  .hero-intro{display:none}
  .picnic-hero--note .hero-note .step,.picnic-hero--note .picnic-stage{opacity:1;transform:none;animation:none}
}
@media(max-width:640px){
  .hero-intro__sunny{left:12%;top:24%;width:140px}
  .hero-intro__moyan{left:56%;top:27%;width:110px}
  .hero-say{max-width:76vw;font-size:.85rem}
  .hero-say--moyan{left:auto;right:4%;top:6%}
  .hero-say--sunny{left:4%;top:4%}
}
/* 遅延の優先度修正(ショートハンド打ち消し対策) */
.picnic-hero--note .hero-note .step-1{animation-delay:10.6s}
.picnic-hero--note .hero-note .step-2{animation-delay:11s}
.picnic-hero--note .hero-note .step-3{animation-delay:11.4s}

/* ---- v2.5 劇の調整(2026-07-20 ちゃん指示:緑背景・ゆったり・距離・えーんから) ---- */
/* 背景をマップと同じ緑に(白いモヤンがちゃんと見える) */
.picnic-hero--note{background:#eef4dd}
.picnic-hero--note .picnic-stage:before{background:#e4eec9}
/* ふたりの距離を離す */
.hero-intro__sunny{left:20%;top:20%}
.hero-intro__moyan{left:61%;top:25%}
.hero-say--moyan{left:auto;right:8%;top:7%}
.hero-say--sunny{left:11%;top:4%}
/* ゆったりテンポ(えーん→不安→寄り添い→ベネフィット→着地) */
.hero-intro__moyan{animation:hi-in 1.2s ease .5s forwards,hi-out 1.8s ease-in-out 21.8s forwards}
.hero-intro__sunny{animation:hi-in 1.2s ease 9.6s forwards,hi-out 1.8s ease-in-out 21.8s forwards}
.hero-say-0{animation:pic-say 3.4s ease 1.4s both;max-width:150px}
.hero-say-1{animation:pic-say 4.8s ease 4.9s both}
.hero-say-2{animation:pic-say 5.2s ease 10.6s both}
.hero-say-3{animation:pic-say 5.6s ease 16s both}
.hero-intro__skip{animation:hi-in .8s ease 2s forwards,hi-out .5s ease 21.4s forwards}
.picnic-hero--note .picnic-stage{animation:pic-step 1.4s ease 22.8s forwards}
.picnic-hero--note .hero-note .step-1{animation-delay:23.6s}
.picnic-hero--note .hero-note .step-2{animation-delay:24.2s}
.picnic-hero--note .hero-note .step-3{animation-delay:24.8s}
.hero-say--moyan{top:11%}
.hero-say--sunny{top:6%}

/* ---- v2.6 劇の立ち位置(2026-07-20 ちゃん指示:左右入替+向かい合わせ) ---- */
.hero-intro__moyan{left:23%;top:25%;animation:hi-in-flip 1.2s ease .5s forwards,hi-out-flip 1.8s ease-in-out 21.8s forwards}
.hero-intro__sunny{left:62%;top:19%;animation:hi-in-flip 1.2s ease 9.6s forwards,hi-out-flip 1.8s ease-in-out 21.8s forwards}
@keyframes hi-in-flip{from{opacity:0;transform:translateY(14px) scale(.94) scaleX(-1)}to{opacity:1;transform:scaleX(-1)}}
@keyframes hi-out-flip{to{opacity:0;transform:translateY(300px) scale(.4) scaleX(-1)}}
/* 吹き出しも相手の方を向く(モヤン=左で右向きに、サニー=右で左向きに話す) */
.hero-say--moyan{left:10%;right:auto;top:10%;border-radius:24px 24px 8px 24px}
.hero-say--moyan:after{left:auto;right:56px}
.hero-say--sunny{left:auto;right:8%;top:5%;border-radius:24px 24px 24px 8px}
.hero-say--sunny:after{right:auto;left:48px}
@media(max-width:640px){
  .hero-intro__moyan{left:12%;top:27%;width:110px}
  .hero-intro__sunny{left:56%;top:23%;width:140px}
  .hero-say--moyan{left:4%;right:auto;top:8%}
  .hero-say--sunny{left:auto;right:4%;top:4%}
}

/* ---- v2.6b 空の明け(2026-07-20 ちゃん指示:劇=緑→タイトル出現時に空が白へ) ---- */
.picnic-hero--note{animation:hero-sky 1.8s ease 22.2s forwards}
@keyframes hero-sky{to{background:#fffdf8}}
.picnic-hero--note .picnic-stage:before{background:#eef4dd}
.picnic-hero--note.is-done{animation:none;background:#fffdf8}
@media(prefers-reduced-motion:reduce){.picnic-hero--note{animation:none;background:#fffdf8}}

/* ---- v2.7 劇の舞台をまっさらに(2026-07-20 ちゃん指示:白背景・キャラ小さく・モヤンに縁取り・下の文字を見せない) ---- */
.picnic-hero--note{background:#fffdf8;animation:none;min-height:calc(100vh - 120px);overflow:hidden}
/* キャラを小さく */
.hero-intro__moyan{width:112px;left:25%;top:30%}
.hero-intro__sunny{width:144px;left:62%;top:25%}
/* 白いモヤンに、やわらかい縁取り(白背景でも見える) */
.hero-intro__moyan{filter:drop-shadow(0 0 1px #c8d3bf) drop-shadow(0 0 1px #c8d3bf) drop-shadow(0 10px 18px rgba(41,67,94,.10))}
.hero-intro__sunny{filter:drop-shadow(0 8px 16px rgba(41,67,94,.08))}
.ps-moyan{filter:drop-shadow(0 0 1px #cfd8c6)}
.pm-moyan{filter:drop-shadow(0 0 1px #cfd8c6)}
/* セリフ位置もキャラに合わせて少し下げる */
.hero-say--moyan{top:14%}
.hero-say--sunny{top:9%}
@media(max-width:640px){
  .picnic-hero--note{min-height:calc(100vh - 110px)}
  .hero-intro__moyan{width:88px;left:14%;top:30%}
  .hero-intro__sunny{width:112px;left:58%;top:26%}
}

/* ---- v2.8 劇の距離+雲+着地後の続き(2026-07-20 ちゃん指示) ---- */
/* ふたりを近づける */
.hero-intro__moyan{left:31%;top:30%}
.hero-intro__sunny{left:55%;top:25%}
.hero-say--moyan{left:16%;top:13%}
.hero-say--sunny{right:12%;top:8%}
/* 空の雲(左右バランス) */
.hero-intro__cloud{position:absolute;opacity:0;animation:hi-in 1.4s ease .6s forwards,hi-out 1s ease 21.6s forwards}
.hero-intro__cloud--l{left:9%;top:9%;width:84px}
.hero-intro__cloud--r{right:11%;top:34%;width:66px}
/* 着地後:シートをヒーローの底へ寄せ、真下の空欄をなくす */
.picnic-hero--note{display:flex;flex-direction:column;justify-content:flex-start}
.picnic-hero--note .hero-note{margin-top:auto}
.picnic-hero--note .picnic-stage{margin-top:auto;margin-bottom:0}
/* 草原の続き:こんなサイトです */
.picnic-about{padding:64px max(24px,calc((100% - 1040px)/2)) 56px;background:#eef4dd}
.picnic-about__lede{margin:14px auto 0;max-width:640px;line-height:2.1;color:#42584a}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:36px auto 0}
.about-card{border-radius:22px;padding:26px 24px;line-height:2}
.about-card--how{background:#fdf6dd}
.about-card--merit{background:#e3eef7}
.about-card--benefit{background:#fbe7dc}
.about-card h3{margin:0 0 12px;font-size:1.05rem;color:var(--picnic-ink)}
.about-card ol,.about-card ul{margin:0;padding-left:1.3em}
.about-card li{margin:6px 0;font-size:.92rem}
.picnic-about__concept{margin:36px auto 0;max-width:640px;text-align:center;line-height:2.2;color:#42584a}
.picnic-about__concept b{color:var(--picnic-ink)}
/* マップを上に詰める(草原がひと続きに見えるように) */
.picnic-map{padding-top:56px}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;max-width:560px}}
@media(max-width:640px){
  .hero-intro__moyan{left:16%;top:31%}
  .hero-intro__sunny{left:54%;top:26%}
  .hero-intro__cloud--l{width:64px;top:7%}
  .hero-intro__cloud--r{width:52px;top:38%}
  .picnic-about{padding:44px 18px 40px}
}

/* ---- v2.9 見出しの緩急(前半セクションも後半と同じ26pxに) ---- */
.picnic-map__head h2{font-size:26px}
.picnic-map__head h2:after{content:"";display:block;width:46px;border-bottom:3px dotted #e9785f;margin:12px auto 0;opacity:.75}
@media(max-width:640px){.picnic-map__head h2{font-size:20px}}

/* ---- v3.0 About刷新+シーン位置(2026-07-20 ちゃん指示:白抜き・ワクワク・レベルアップ式/シーンを上へ/ボタン文言) ---- */
/* 劇の後はヒーローを自然な高さに(シーンがタイトルのすぐ下に来る) */
.picnic-hero--note.is-done{min-height:0}
.picnic-hero--note.is-done .hero-note{margin-top:64px}
.picnic-hero--note.is-done .picnic-stage{margin-top:30px}
/* レベルアップ式フロー(白抜きカード) */
.about-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:stretch;max-width:1030px;margin:40px auto 0}
.about-step{background:#fffdf8;border-radius:26px;padding:28px 22px 24px;text-align:center;box-shadow:0 10px 26px rgba(48,74,58,.09)}
.about-step img{height:76px;width:auto;margin:0 auto 12px;display:block}
.about-step h3{margin:0 0 10px;font-size:1.04rem;color:var(--picnic-ink)}
.about-step p{margin:0;font-size:.9rem;line-height:2.05;text-align:left;color:#42584a}
.about-arrow{align-self:center;color:#ef8064;font-size:1.5rem;font-style:normal}
.about-step--goal{box-shadow:0 10px 26px rgba(239,128,100,.18);position:relative}
.about-step--goal:before{content:"✨";position:absolute;right:14px;top:10px}
.about-step--goal:after{content:"✨";position:absolute;left:14px;top:26px;font-size:.8rem}
@media(max-width:820px){
  .about-flow{grid-template-columns:1fr;max-width:520px}
  .about-arrow{transform:rotate(90deg);justify-self:center}
}

/* ---- v3.3 マップ回遊型+スーパーさん輪郭切り抜き(2026-07-20 ちゃん指示) ---- */
/* シートを中心に、まわりをぐるっと回遊 */
.mp-mat{left:39%;top:34%;width:22%}
.mp-lunch{left:45%;top:43%;width:6.5%}
.mp-super{left:44.5%;top:15%;width:10.5%;pointer-events:auto;position:absolute}
.mp-super img{width:100%;height:auto;display:block}
.mp-super .mp-super__s{position:absolute;inset:0;opacity:0;transition:opacity .25s ease}
.mp-super:hover .mp-super__s{opacity:1}
.mp-wagon{left:6%;top:13%;width:13%}
.mp-pinwheel{left:19.5%;top:24%;width:2.8%}
.mp-tent1{left:72.5%;top:8%;width:9.5%}
.mp-tent2{left:80.5%;top:42%;width:8.5%}
.mp-board{left:5%;top:49%;width:11.5%}
.mp-stall{left:35%;top:66%;width:11%}
.mp-tree1{left:63%;top:62%;width:6.5%}
.mp-hammock{left:67.5%;top:73%;width:10.5%}
.mp-tree2{left:76.5%;top:62%;width:6.5%}
#map-sunny{left:30%;top:47%}
#map-moyan{left:63%;top:50%}
/* 劇:ふたりの高さを揃える */
.hero-intro__sunny{top:28.5%}
@media(max-width:640px){.hero-intro__sunny{top:29%}}

/* ---- v3.4 スーパーさん輪郭精密化+3人でシートに(2026-07-20 ちゃん指示) ---- */
.mp-super{left:44.8%;top:17.5%;width:10%}
#map-sunny{left:40%;top:44%}
#map-moyan{left:57%;top:47%}

/* ---- v3.5 トップページ改善指示書対応(2026-07-20) ---- */
/* 主要3ボタン(優先順位: 3分学習>はじめて>ことば検索) */
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.picnic-button--line{background:#fffdf8;color:#b3543a;border:2px solid #efb5a2;box-shadow:none}
.picnic-button--line:hover{background:#fdf1ec}
.hero-note__sub{word-break:keep-all;overflow-wrap:anywhere}
/* ヒーロー直後の3分学びは草原の続き */
.section--grass{background:#eef4dd}
/* 劇: 吹き出しとキャラの距離を広く(窮屈解消) */
.hero-say--moyan{top:8%}
.hero-say--sunny{top:3.5%}
@media(max-width:640px){
  .hero-cta{flex-direction:column;align-items:center;gap:10px}
  .hero-cta .picnic-button{width:min(300px,86vw);text-align:center}
  .hero-note__sub{font-size:.9rem;padding:0 10px;line-height:1.9}
  .hero-say--moyan{top:3%}
  .hero-say--sunny{top:1.5%}
  .hero-intro__moyan{top:35%}
  .hero-intro__sunny{top:34%}
  /* 施設カード・バナーは縦積みをやめて横スクロールに */
  .facility-grid{display:flex;overflow-x:auto;gap:14px;padding:4px 4px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .facility-grid .facility-card{flex:0 0 78vw;scroll-snap-align:center}
}
/* スマホ: タイトルが語の途中で割れないように */
@media(max-width:640px){
  .picnic-hero--note h1{font-size:1.29rem;letter-spacing:0;line-height:1.8;white-space:nowrap}
}
.br-sp{display:none}
@media(max-width:640px){.br-sp{display:inline}.hero-note__sub{word-break:keep-all}}

/* ---- v3.7 景色の交互とトンマナ統一(2026-07-20 相談で決定) ---- */
/* Aboutは「空」に(草原→空→草原のリズム) */
.picnic-about{background:#fffdf8}
/* 施設カードはスマホ専用の確実な導線(デスクトップはマップが担う) */
@media(min-width:641px){.facility-cards{display:none}}
/* ロゴのサニー */
.logo-sun{width:22px;height:22px;object-fit:contain;vertical-align:-4px;margin-right:5px}

/* ---- v3.8 全着地ページに「ページの情景」(2026-07-20 ちゃん指示) ---- */
.page-scene{position:relative;height:128px;margin:4px auto 6px;max-width:1120px;overflow:hidden}
.page-scene:before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:150%;height:64px;background:#eef4dd;border-radius:50% 50% 0 0/100% 100% 0 0}
.pgs{position:absolute;bottom:10px;height:auto}
.pgs-a{left:50%;transform:translateX(-170%);width:88px}
.pgs-chara{left:50%;transform:translateX(-50%);width:66px;bottom:14px;filter:drop-shadow(0 0 1px #cfd8c6)}
.pgs-b{left:50%;transform:translateX(85%);width:62px;bottom:8px}
@media(max-width:640px){
  .page-scene{height:104px}
  .pgs-a{width:70px;transform:translateX(-160%)}
  .pgs-chara{width:56px}
  .pgs-b{width:50px;transform:translateX(80%)}
}
.page-scene{max-width:none;margin:4px 0 6px}

/* ---- v3.9 サニー先生の図解案内ステップ(2026-07-20 ちゃん指示:サニーが案内・モヤンがふんふん) ---- */
.guided-steps{margin:10px 0 30px}
.guided-steps__opening,.guided-steps__closing{display:flex;gap:14px;align-items:flex-end;margin:18px 0}
.guided-steps__closing{justify-content:flex-end;flex-direction:row-reverse}
.guided-steps__sunny,.guided-steps__opening img,.guided-steps__closing img{width:64px;height:auto;flex:none;filter:drop-shadow(0 0 1px #cfd8c6)}
.guided-steps__say{margin:0;max-width:520px;padding:16px 20px;background:#fff7dd;border-radius:22px 22px 22px 8px;line-height:2}
.guided-steps__say b{display:block;font-size:.7rem;color:#b08a2e;margin-bottom:3px}
.guided-steps__say--moyan{background:#f4f8ed;border-radius:22px 22px 8px 22px}
.guided-steps__say--moyan b{color:#6c8265}
/* 小道でつながるステップ */
.gstep-list{list-style:none;margin:8px 0;padding:0 0 0 30px;border-left:4px dotted #d9c9a2}
.gstep{position:relative;display:flex;gap:16px;align-items:flex-start;background:#fffdf8;border-radius:22px;padding:22px 24px;margin:18px 0;box-shadow:0 8px 22px rgba(48,74,58,.08)}
.gstep__num{position:absolute;left:-49px;top:26px;width:34px;height:34px;border-radius:50%;background:#f8e45c;display:grid;place-items:center;font-weight:700;color:#5c4d1d;box-shadow:0 3px 8px rgba(41,67,94,.12)}
.gstep__icon{width:64px;height:auto;flex:none;margin-top:4px}
.gstep__body h2{margin:0 0 10px;font-size:1.08rem;color:var(--picnic-ink)}
.gstep__body h2:after{display:none}
.gstep__sunny{margin:0;line-height:2.05;font-size:.93rem}
.gstep__sunny b{display:inline-block;margin-right:8px;padding:2px 10px;border-radius:999px;background:#fff7dd;color:#b08a2e;font-size:.7rem;vertical-align:2px}
/* モヤンの相づち */
.gstep-aizuchi{display:flex;gap:8px;align-items:center;margin:4px 0 4px 12px;color:#6c8265;font-size:.85rem;font-weight:700}
.gstep-aizuchi img{width:36px;height:auto}
.gstep-aizuchi--r{justify-content:flex-end;margin-right:12px}
@media(max-width:640px){
  .gstep-list{padding-left:22px}
  .gstep{padding:18px 16px;gap:12px}
  .gstep__num{left:-40px;width:30px;height:30px}
  .gstep__icon{width:48px}
  .guided-steps__say{max-width:76vw}
}

/* ---- v4.0 ゆとりとシンプルな配色(2026-07-20 ちゃん指示) ---- */
/* 全体のゆとり */
.section{padding:88px 0}
.picnic-about{padding:96px max(24px,calc((100% - 1040px)/2)) 88px}
.picnic-map{padding-top:88px;padding-bottom:96px}
.about-flow{gap:22px;margin-top:52px}
.about-step{padding:34px 28px 30px}
.daily-grid{gap:20px}
/* Aboutはベージュに(白カードが浮き立つ) */
.picnic-about{background:#f6f0e3}
.picnic-about__lede{max-width:600px;margin:12px auto 0}
.picnic-about__lede + .picnic-about__lede{margin-top:6px}
/* コンセプトは黄色マーカーで主役に */
.marker{background:linear-gradient(transparent 58%, #f8e45c 58%);padding:0 3px}
.picnic-about__concept{margin-top:48px;font-size:1.05rem}
/* 生まれた背景: 箱をなくして文章だけの美しさに */
.school-story-card{background:transparent;box-shadow:none;padding:0;max-width:620px;margin:0 auto;text-align:left}
#school-story{background:#fffdf8}

/* ---- v4.1 マップの仕上げ(2026-07-20 ちゃん指示:看板テキスト化・スーパーさん・案内演出) ---- */
/* 看板: 箱をやめてテキストだけ(白いハローで読みやすく) */
.map-spot__sign{background:transparent;border:0;box-shadow:none;padding:2px 6px;font-size:.84rem;text-shadow:0 0 8px #fff,0 0 4px #fff,0 1px 0 #fff}
.map-spot__sign i{display:none}
.map-spot__sign b{color:#334b5e}
.map-spot__sign small{text-shadow:0 0 8px #fff,0 0 4px #fff}
.map-spot:hover .map-spot__sign{transform:scale(1.06)}
/* スーパーさん: シートの奥にきちんと腰かける */
.mp-super{left:44.6%;top:16%;width:10.2%}
/* 案内のふきだし(サニー→モヤンの順にふわっと出て、ゆらゆら) */
.map-say{position:absolute;z-index:2;margin:0;max-width:250px;padding:12px 16px;background:rgba(255,255,255,.97);border-radius:20px 20px 20px 6px;box-shadow:0 8px 20px rgba(41,67,94,.12);font-size:.85rem;line-height:1.8;opacity:0;color:var(--picnic-ink)}
.map-say b{display:block;font-size:.66rem;color:#6c8265;margin-bottom:2px;font-weight:700}
.map-say--sunny{left:13%;top:30%;background:#fff7dd;border-radius:20px 20px 6px 20px}
.map-say--sunny b{color:#b08a2e}
.map-say--moyan{left:66%;top:33%}
@media(prefers-reduced-motion:no-preference){
  .map-say--sunny{animation:map-say-in 1s ease 1.2s forwards,pic-loop-float 5s ease-in-out 2.2s infinite}
  .map-say--moyan{animation:map-say-in 1s ease 2.6s forwards,pic-loop-float 5.6s ease-in-out 3.6s infinite}
  @keyframes map-say-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @keyframes pic-loop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
}
@media(prefers-reduced-motion:reduce){.map-say{opacity:1}}
@media(max-width:640px){
  .map-say{max-width:56vw;font-size:.74rem;padding:9px 12px}
  .map-say--sunny{left:2%;top:26%}
  .map-say--moyan{left:auto;right:2%;top:30%}
}
/* 案内ふきだしは中央上の空きスペースへ(看板と重ねない) */
.map-say{max-width:235px}
.map-say--sunny{left:20%;top:13%}
.map-say--moyan{left:60%;top:15%;max-width:250px}
@media(max-width:640px){
  .map-say--sunny{left:2%;top:8%}
  .map-say--moyan{left:auto;right:2%;top:12%}
}

/* ---- v4.2 1問1答チャレンジ(2026-07-20 ちゃん指示:ジャンル×時間×ランダム) ---- */
.daily-cta-wrap{text-align:center;margin:34px 0 4px}
.daily-cta{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:16px 40px;border-radius:999px;background:#ef8064;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(239,128,100,.3);transition:transform .2s ease}
.daily-cta:hover{transform:translateY(-2px)}
.daily-cta__kicker{font-size:.72rem;letter-spacing:.12em;opacity:.92}
.daily-cta__label{font-weight:700;font-size:1.05rem}
.quiz-drill__or{text-align:center;color:#8b9788;font-size:.8rem;margin:10px 0 6px}
.quiz-drill__start{text-align:center}
.quiz-drill__count b{color:#e9785f}
/* プロフィールは背景の直下・やわらかい箱で */
.author-profile{border-radius:22px;background:#f6f0e3;box-shadow:0 8px 22px rgba(48,74,58,.07);padding:26px 28px}

/* ============================================================
 * v4.3 ことば図鑑(/terms/)の調整
 * - ヒーロー絵を切り抜かず、白いグラデーションで隠さず、まるごと見せる
 * - ジャンルから探すナビ + あいうえお順の表示
 * ============================================================ */
.library-hero{min-height:0;background:#fff}
.library-hero>img{height:auto;object-fit:contain;object-position:center}
.library-hero::after{content:none}
.library-hero__story{top:44px;transform:none;width:min(480px,46vw)}
.library-hero__story h1{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff}
.library-hero__story p{text-shadow:0 0 8px #fff,0 0 16px #fff}
@media (max-width: 640px){
  .library-hero{min-height:0}
  .library-hero>img{height:auto;object-position:center}
  .library-hero__story{position:static;padding:26px 22px 6px;width:auto}
  .library-hero__story h1{font-size:1.55rem}
}

.term-genre-nav{margin:30px 0 6px;text-align:center}
.term-genre-nav__label{margin:0 0 12px;font-size:.8rem;font-weight:700;letter-spacing:.18em;color:#7a8a6f}
.term-genre-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.term-genre-nav li{margin:0}
.term-genre-nav a{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;border:1.5px solid #dbe7c9;color:#2f4a2f;text-decoration:none;font-weight:600;font-size:.92rem;line-height:1.4}
.term-genre-nav a:hover{background:#f2f8e6;border-color:#bcd39a}
.term-genre-nav a.term-genre-nav__theorists{background:#fdf6e0;border-color:#f0dfa4}
.term-genre-nav a.term-genre-nav__theorists:hover{background:#faeec6}
.term-category{scroll-margin-top:84px}
.term-category__order{margin-left:12px;font-size:.76rem;font-weight:500;letter-spacing:.1em;color:#8a9a80;vertical-align:middle}
/* v4.3b 見出しの折り返しと検索カードの重なりを調整 */
.library-hero__story h1{font-size:clamp(1.9rem,3.1vw,2.7rem)}
@media (max-width: 640px){
  .library-hero__story{padding-bottom:34px}
  .library-search{margin-top:-12px}
}
/* v4.4 ことば図鑑: あ行・か行…の電話帳インデックス */
.term-gyo{grid-column:1/-1;list-style:none;margin:14px 0 -6px;padding:0}
.term-category .term-gyo:first-child{margin-top:2px}
.term-gyo span{display:inline-block;padding:5px 18px;border-radius:999px;background:#e8f0d8;color:#4f6342;font-weight:700;font-size:.88rem;letter-spacing:.16em}
/* v4.5 ○×クイズドリル: プルダウン選択+スタートをボックスの外へ */
.quiz-pickers{display:flex;flex-wrap:wrap;gap:16px 26px;justify-content:center;margin:26px 0 6px}
.quiz-picker{display:flex;align-items:center;gap:10px}
.quiz-picker__label{font-weight:700;color:#2f4a2f;font-size:.95rem;letter-spacing:.06em}
.quiz-picker select{appearance:none;-webkit-appearance:none;padding:11px 44px 11px 18px;border:2px solid #dbe7c9;border-radius:999px;background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235c6e51' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 18px center;font:inherit;font-weight:600;color:#2f4a2f;cursor:pointer}
.quiz-picker select:focus{outline:none;border-color:#7fa77c;box-shadow:0 0 0 4px rgba(167,201,158,.25)}
.quiz-drill__start{margin:22px 0 30px}
.quiz-drill__start .button{transition:transform .25s ease,box-shadow .25s ease}
.quiz-drill__start .button:hover{transform:translateY(-2px)}
@media (max-width: 560px){
  .quiz-pickers{flex-direction:column;align-items:stretch;gap:12px}
  .quiz-picker{justify-content:space-between}
  .quiz-picker select{flex:1;margin-left:12px}
}
/* v4.6 トップ: プロフィール/ピクニック新聞は白背景。フッターは草原の緑をそのままつなげる */
.section--white{background:#fff}
.site-footer{background:#eef4dd;border-top:none;margin-top:0}
.site-footer::before{content:none}
/* ============================================================
 * v4.7 (2026-07-20 ちゃん指示)
 * 1) マップの案内吹き出しを施設に被らない位置(上の空エリア)へ
 * 2) 会話の立ち位置を全ページで交換: サニー=左 / モヤン=右(お互いを向く)
 * 3) 用語ページ「身近なたとえ」「子育て・仕事で考えると」を
 *    「小学生でもわかる説明」と同じ黄色ボックスに
 * ============================================================ */

/* 1) マップ吹き出し: 空のエリアへ退避 */
.map-say--sunny{left:2%;top:1%}
.map-say--moyan{left:auto;right:3%;top:1%}
@media (max-width: 640px){
  .map-say--sunny{left:2%;top:0}
  .map-say--moyan{left:auto;right:2%;top:1%}
}

/* 2) サニー=左, モヤン=右 に交換(吹き出しのしっぽも反転) */
.chara-guide--sunny{flex-direction:row}
.chara-guide--moyan{flex-direction:row-reverse}
.chara-guide--sunny .chara-guide__bubble::before{right:auto;left:-12px;border-width:8px 12px 8px 0;border-left-color:transparent;border-right-color:#ded263}
.chara-guide--sunny .chara-guide__bubble::after{right:auto;left:-9px;border-width:7px 11px 7px 0;border-left-color:transparent;border-right-color:#fdf9dc}
.chara-guide--moyan .chara-guide__bubble::before{left:auto;right:-12px;border-width:8px 0 8px 12px;border-right-color:transparent;border-left-color:#b6c0cc}
.chara-guide--moyan .chara-guide__bubble::after{left:auto;right:-9px;border-width:7px 0 7px 11px;border-right-color:transparent;border-left-color:#ffffff}

/* 3) 白ボックスを黄色ボックスに統一 */
.term-analogy,
.term-life{background:var(--color-yellow-light);border:none}
/* ============================================================
 * v4.8 マップの手直し(2026-07-20 ちゃん指示)
 * - 吹き出しはマップの上(見出しの下)に固定表示。施設に絶対被らない
 * - スーパーさん削除。シートの真ん中にお弁当2つ+水筒、モヤンの黄色い帽子
 * ============================================================ */
.map-say-row{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:center;margin:22px auto 4px;padding:0 20px;max-width:880px}
.map-say-row .map-say{position:static;opacity:1;transform:none;animation:none;max-width:350px;left:auto;right:auto;top:auto}
@media (max-width: 640px){
  .map-say-row{gap:10px;margin-top:16px}
  .map-say-row .map-say{max-width:100%;font-size:.8rem}
}
/* シートの上のピクニックセット */
.mp-lunch--a{left:46.5%;top:40%;width:5.5%}
.mp-lunch--b{left:53%;top:44.5%;width:5.5%}
.mp-suito{left:50.5%;top:37%;width:2.7%}
.mp-hat{left:47.4%;top:50.5%;width:4.4%;transform:rotate(-10deg)}
@media (max-width: 640px){
  .mp-lunch--a{left:44%;top:40%;width:8%}
  .mp-lunch--b{left:53%;top:45%;width:8%}
  .mp-suito{left:50.5%;top:36%;width:4%}
  .mp-hat{left:42%;top:50%;width:6.5%}
}
/* v4.8b トップ: 草原の上のベージュ帯を消して白に。丘のアーチにあわせる */
.is-home .picnic-meadow{background:#fff;margin-top:0}
/* v4.9 理論家図鑑: ランチ風景のヒーロー(チャッピー画像1号) */
.library-hero__title{margin:.35rem 0 1rem;font-size:clamp(1.9rem,3.1vw,2.7rem);line-height:1.34;letter-spacing:.04em;font-weight:700;font-family:var(--font-serif);color:#17345d;text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #fff}
.library-hero--lunch>img{background:#f2f2f0}
@media (max-width: 640px){
  .library-hero__title{font-size:1.55rem}
}
/* ============================================================
 * v5.0 (2026-07-20 ちゃん指示)
 * 1) マップ: お弁当1つ+チャッピー画の水筒を隣に。帽子なし。
 *    吹き出しはレジャーシートの上で、サニー⇔モヤンが交互におしゃべり
 * 2) 全ページの行間をゆったり統一
 * ============================================================ */

/* 1) シートの上 */
.mp-lunch--a{left:47%;top:41%;width:6%}
.mp-suito{left:53.5%;top:38.5%;width:3%}
@media (max-width: 640px){
  .mp-lunch--a{left:45%;top:41%;width:8.5%}
  .mp-suito{left:54%;top:38%;width:4.2%}
}

/* 吹き出し: シートの真上で交互に表示 */
.map-say-row{display:none}
.map-say{position:absolute;opacity:0;max-width:280px;text-align:left}
.map-say--sunny{left:50%;top:22%;transform:translateX(-50%);border-radius:20px 20px 20px 6px;animation:say-turn-a 11s ease-in-out 1.2s infinite}
.map-say--moyan{left:50%;right:auto;top:22%;transform:translateX(-50%);border-radius:20px 20px 6px 20px;animation:say-turn-b 11s ease-in-out 1.2s infinite}
@keyframes say-turn-a{0%{opacity:0;}3%,42%{opacity:1}48%,100%{opacity:0}}
@keyframes say-turn-b{0%,52%{opacity:0}55%,94%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .map-say--sunny{opacity:1;animation:none}
  .map-say--moyan{display:none}
}
@media (max-width: 640px){
  .map-say--sunny,.map-say--moyan{left:50%;right:auto;top:18%;max-width:64vw}
}

/* 2) 行間ゆったり統一 */
.container p,
.container li,
.container dd{line-height:1.95}
.container p{margin-bottom:1.15em}
.chara-guide__bubble{line-height:1.9;padding:15px 20px}
.term-formal__box p{line-height:2.05}
.term-list__oneliner{line-height:1.75}
.theorist-list__oneliner{line-height:1.75}
.map-say{line-height:1.85}
.school-exp__status-list li,
.school-exp__worries li,
.school-exp__fit li,
.school-exp__checklist li{line-height:1.9;margin-bottom:.35em}
.article-list-item p{line-height:1.9}
/* ============================================================
 * v5.1 論述ボードゲーム & ことばのキャッチボール
 * ============================================================ */
.ron-badge{display:inline-block;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;vertical-align:middle}
.ron-badge--cc{background:#e3edf8;color:#2c5a8a;border:1px solid #bcd4ec}
.ron-badge--jcda{background:#f3e8f4;color:#7a4a80;border:1px solid #dfc6e2}
.ron-badge--both{background:#e8f0d8;color:#4f6342;border:1px solid #cbdcae}

.ron-guide__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media (max-width:640px){.ron-guide__grid{grid-template-columns:1fr}}
.ron-guide__card{background:#fff;border:1.5px solid #e4ddca;border-radius:16px;padding:18px 20px}
.ron-guide__card p{margin:6px 0;line-height:1.85}
.ron-guide__note{font-size:.82rem;color:#8a8371;line-height:1.8}

.ron-case__profile{background:#fdf6e0;border-radius:14px;padding:14px 18px;line-height:1.9}
.ron-transcript{background:#fff;border:1.5px solid #e4ddca;border-radius:16px;padding:20px 22px;margin:14px 0}
.ron-line{display:flex;gap:12px;margin:0 0 12px;line-height:1.9}
.ron-line b{flex:none;width:44px;font-size:.78rem;color:#8a8371;padding-top:3px}
.ron-line--cl span{background:#f2f6fb;border-radius:12px;padding:8px 14px}
.ron-line--cc span{background:#fdf9dc;border-radius:12px;padding:8px 14px}
.ron-case__note{font-size:.78rem;color:#8a8371}

.ron-progress,.cb-score{position:sticky;top:8px;z-index:5;width:fit-content;margin:22px auto;padding:8px 22px;background:#fff;border:1.5px solid #dbe7c9;border-radius:999px;font-size:.9rem;box-shadow:0 6px 16px rgba(48,74,58,.1)}
.ron-progress b,.cb-score b{color:#e9785f}

.ron-station,.cb-rally{position:relative;background:#fff;border:1.5px solid #e4ddca;border-radius:20px;padding:24px 26px;margin:22px 0}
.ron-station--write{background:#fdf6e0}
.ron-station.is-locked,.cb-rally.is-locked{overflow:hidden}
.ron-station.is-locked>*:not(.ron-lock-note),.cb-rally.is-locked>*{filter:blur(4px);pointer-events:none;user-select:none}
.ron-lock-note{display:none}
.ron-station.is-locked .ron-lock-note{display:block;position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);text-align:center;font-weight:700;color:#6c8265;filter:none;z-index:2}
.cb-rally.is-locked::after{content:"🔒 前の球をキャッチすると開くよ";position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:#6c8265;z-index:2}
.ron-station__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ron-station__no{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:#b0813f;background:#fdf1cf;border-radius:999px;padding:4px 12px}
.ron-station__title{margin:0;font-size:1.08rem}
.ron-station__q{font-weight:600;line-height:1.9}

.ron-choices,.cb-choices{display:grid;gap:10px;margin:14px 0}
.ron-choice,.cb-choice{text-align:left;font:inherit;line-height:1.75;padding:13px 16px;border-radius:14px;border:1.5px solid #d8d2c0;background:#fffdf7;cursor:pointer;transition:transform .15s ease,border-color .15s ease}
.ron-choice:hover:not(:disabled),.cb-choice:hover:not(:disabled){border-color:#a7c99e;transform:translateY(-1px)}
.ron-choice:disabled,.cb-choice:disabled{cursor:default;opacity:.75}
.ron-choice.is-correct,.cb-choice.is-correct{border-color:#7fa77c;background:#eef6e6;opacity:1}
.ron-choice.is-wrong,.cb-choice.is-wrong{border-color:#dc8b7a;background:#fbeeea}

.ron-feedback,.cb-feedback{border-top:1.5px dashed #e0d9c5;margin-top:14px;padding-top:14px}
.ron-feedback__verdict.is-ok,.cb-feedback__verdict.is-ok{color:#4f7d4a;font-weight:700}
.ron-feedback__verdict.is-ng,.cb-feedback__verdict.is-ng{color:#c05f4a;font-weight:700}
.ron-feedback__why,.cb-feedback__why{line-height:1.9}
.cb-feedback__giho b{color:#b0813f}
.ron-next{margin:14px 0 0}

.ron-write__hint{font-size:.88rem;color:#6c8265;line-height:1.85}
.ron-write__area{width:100%;box-sizing:border-box;font:inherit;line-height:1.9;padding:14px 16px;border:1.5px solid #d8d2c0;border-radius:14px;background:#fff;resize:vertical}
.ron-write__area:focus{outline:none;border-color:#7fa77c;box-shadow:0 0 0 4px rgba(167,201,158,.2)}
.ron-model{margin-top:16px}
.ron-model h4{margin:16px 0 8px}
.ron-model__text{background:#fff;border:1.5px solid #e4ddca;border-radius:14px;padding:16px 18px;line-height:2}
.ron-checklist{list-style:none;margin:0;padding:0}
.ron-checklist li{margin:6px 0;line-height:1.85}
.ron-checklist label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.ron-checklist input{margin-top:6px}
.ron-jcda-note{display:flex;gap:12px;align-items:flex-start;background:#f3e8f4;border-radius:14px;padding:14px 16px;margin-top:14px}
.ron-jcda-note p{margin:0;line-height:1.85;font-size:.92rem}

.ron-goal,.cb-goal{background:#eef4dd;border-radius:20px;padding:26px 28px;margin:26px 0;text-align:center}
.ron-goal__title{font-size:1.3rem;font-weight:700;margin:0 0 10px}
.ron-goal p{line-height:1.95}
.ron-goal__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.ron-goal .chara-guide,.cb-goal .chara-guide{text-align:left}
.cb-goal__score{font-size:1.15rem;font-weight:700;color:#e9785f}

.cb-rally__no{font-size:.78rem;font-weight:700;letter-spacing:.14em;color:#b0813f;margin:0 0 6px}
.cb-scene{color:#8a8371;font-size:.88rem;line-height:1.8;margin:0 0 6px}
.cb-prompt{font-weight:700;margin:14px 0 4px}
.cb-feedback__link a{font-size:.9rem}
/* v5.2 試験対策テント: あそんで対策バナー */
.exam-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
@media (max-width: 760px){.exam-tools{grid-template-columns:1fr}}
.exam-tool{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 20px 18px;border-radius:20px;text-decoration:none;color:#2f3b2f;border:1.5px solid transparent;transition:transform .2s ease,box-shadow .2s ease}
.exam-tool:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(48,74,58,.14)}
.exam-tool--gakka{background:#fdf6dd;border-color:#f0dfa4}
.exam-tool--ronjutsu{background:#e9f1fa;border-color:#c5d9ee}
.exam-tool--mensetsu{background:#eaf5e2;border-color:#c9dfb4}
.exam-tool__img{width:64px;height:64px;object-fit:contain;align-self:flex-start}
.exam-tool__badge{position:absolute;top:16px;right:16px;font-size:.7rem;font-weight:700;letter-spacing:.1em;background:#fff;border-radius:999px;padding:4px 12px;color:#6c8265}
.exam-tool__title{font-size:1.12rem;font-weight:700;line-height:1.5;font-family:var(--font-serif)}
.exam-tool__desc{font-size:.85rem;line-height:1.8;color:#5a6455}
.exam-tool__cta{margin-top:auto;font-size:.88rem;font-weight:700;color:#e9785f}
/* ============================================================
 * v5.3 キャリコンNOW掲示板(/laws/)の読みやすさ改善
 * ============================================================ */
.now-board{background:#fdf6e0;border:2px solid #eadfba;border-radius:22px;padding:24px 26px;margin:26px 0 30px;box-shadow:0 10px 24px rgba(120,100,40,.08)}
.now-board__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.now-board__head h2{margin:0 0 8px;font-size:1.15rem}
.now-board__updated{margin:0;font-size:.78rem;color:#8a8371}
.now-list{list-style:none;margin:8px 0 0;padding:0}
.now-item{display:grid;grid-template-columns:110px 1fr auto;gap:6px 14px;align-items:baseline;padding:11px 4px;border-bottom:1.5px dashed #eadfba;line-height:1.75}
.now-item:last-child{border-bottom:none}
.now-item__date{font-size:.8rem;color:#8a8371;white-space:nowrap}
.now-item__new{color:#e9785f;font-size:.7rem;letter-spacing:.06em}
.now-item__title{text-decoration:none;color:#2f3b2f;font-weight:600}
.now-item__title:hover{text-decoration:underline}
.now-item__source{font-size:.74rem;color:#a89f89;white-space:nowrap}
.now-empty{padding:16px 4px;color:#8a8371;line-height:1.9}
.now-board__more{text-align:center;margin:12px 0 0}
.now-board__note{font-size:.78rem;color:#8a8371;line-height:1.8;margin:14px 0 0}
@media (max-width:640px){
  .now-item{grid-template-columns:1fr;gap:2px}
  .now-item__source{display:none}
}
.law-shelf__note{margin:-6px 0 14px;color:#6c8265;font-size:.9rem}
.law-sources .ron-guide__card p{margin:4px 0}
/* v5.3b 掲示板: hidden属性を確実に効かせる */
.now-board [hidden]{display:none!important}
/* ============================================================
 * v5.4 ヒーローの「ガクン」解消(2026-07-20 ちゃん指示)
 * 劇の間も最初から最終レイアウト(上寄せ)で固定しておき、
 * is-done では劇の幕(オーバーレイ)を消すだけにする。
 * タイトルとピクニック広場は、最初から適切な場所にフェードインする。
 * ============================================================ */
.picnic-hero--note{justify-content:flex-start;min-height:0}
.picnic-hero--note .hero-note{margin-top:64px}
.picnic-hero--note .picnic-stage{margin-top:30px;margin-bottom:0}
@media (max-width: 640px){
  .picnic-hero--note{min-height:0}
  .picnic-hero--note .hero-note{margin-top:48px}
}
/* v5.5 学校ページの広告注記 */
.school-header__adnote{font-size:.76rem;color:#8a8371;margin:6px 0 0}
/* ============================================================
 * v5.6 改善指示書 第1〜3弾(2026-07-20 承認済み)
 * ============================================================ */
/* 用語ページ: 目次チップ */
.term-toc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.term-toc a{padding:7px 14px;border-radius:999px;background:#fff;border:1.5px solid #e4ddca;color:#5c6e51;text-decoration:none;font-size:.82rem;font-weight:600}
.term-toc a:hover{border-color:#a7c99e;background:#f2f8e6}
/* 覚え方・間違えやすい */
.term-oboekata{background:#fdf6dd;border-radius:12px;padding:24px 28px;margin-bottom:28px}
.term-pitfall{margin-bottom:40px}
.term-pitfall__box{background:#fbeeea;border:1.5px solid #ecc4b8;border-radius:12px;padding:18px 22px}
.term-pitfall__box p{margin:0;line-height:2}
/* つぎに読むなら */
.term-next{margin:34px 0}
.term-next__label{font-weight:700;letter-spacing:.08em;color:#6c8265;margin:0 0 10px}
.term-next__card{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#eef4dd;border-radius:16px;padding:18px 22px;text-decoration:none;color:#2f3b2f;transition:transform .2s ease}
.term-next__card:hover{transform:translateY(-2px)}
.term-next__card b{font-size:1.05rem}
.term-next__card span{flex:1;min-width:200px;font-size:.86rem;color:#5a6455;line-height:1.8}
.term-next__card i{font-style:normal;color:#e9785f;font-weight:700}
/* シェアボタン */
.term-share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:26px 0}
.term-share__label{margin:0;font-size:.85rem;color:#6f6a58}
.term-share__btn{padding:9px 18px;border-radius:999px;text-decoration:none;font-size:.85rem;font-weight:700}
.term-share__btn--line{background:#e8f6e0;color:#1e7d32;border:1.5px solid #b9e0aa}
.term-share__btn--x{background:#eef1f4;color:#31404e;border:1.5px solid #ccd6df}
.term-share__btn:hover{transform:translateY(-1px)}
/* 参考文献 */
.term-refs{margin:34px 0;border-top:1.5px dashed #e0d9c5;padding-top:22px}
.term-refs__list{margin:0;padding-left:1.3em}
.term-refs__list li{line-height:1.95;font-size:.9rem}
.term-refs__note{font-size:.82rem;color:#6f6a58;line-height:1.9;margin-top:12px}
/* コントラスト改善(注記の文字を一段濃く) */
.term-category__order{color:#6b7a62}
.now-item__date,.now-board__updated,.ron-guide__note,.ron-case__note{color:#6f6a58}
.cb-scene{color:#6f6a58}
.school-header__adnote{color:#6f6a58}
/* v5.6b ヒーローCTAの4ボタン+サブ行 */
.hero-cta__sub{margin:14px 0 0;font-size:.85rem;color:#6f6a58}
.hero-cta__sub a{color:#e9785f}
.quiz-share{justify-content:center}
/* v5.7 ヒーロー: ボタンは1つだけ、他はマーカーの入る太字リンク */
.hero-links{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin:20px 0 0}
.hero-link{font-weight:700;color:var(--picnic-ink);text-decoration:none;padding:2px 4px;background:linear-gradient(transparent 62%, transparent 62%);transition:background .2s ease}
.hero-link:hover{background:linear-gradient(transparent 62%, #f8e45c 62%)}
.hero-cta__sub{margin-top:12px}
@media (max-width: 640px){.hero-links{gap:8px 18px;font-size:.95rem}}
/* v5.8 1問1答カプセルを小さく(キッカーは外・テラコッタ) + ヘッダーナビ */
.daily-cta-kicker{display:block;margin:0 0 10px;color:#ef8064;font-weight:700;font-size:.82rem;letter-spacing:.16em}
.daily-cta{flex-direction:row;padding:13px 34px}
.header-nav{display:flex;gap:4px 20px;flex-wrap:wrap;align-items:center;margin:0 18px}
.header-nav .hero-link{font-size:.92rem}
.header-nav .hero-link:hover{background:linear-gradient(transparent 62%, rgba(239,128,100,.45) 62%)}
@media (max-width: 960px){.header-nav{display:none}}
/* v5.8b ヘッダーナビをサニーの検索窓のすぐ左に寄せる */
.header-nav{margin-left:auto;margin-right:26px;gap:4px 18px;justify-content:flex-end}
/* v5.9 ヘッダーのブランドを中央揃えのサンドイッチに(EN→ロゴ→タグライン) */
.site-header__brand{text-align:center}
.site-header__brand .site-logo{display:inline-block}
.site-header__brand .site-logo__ja{display:flex;align-items:center;justify-content:center}
.site-header__brand .site-header__tagline{text-align:center}