/* ============================================================ ここほか新デザイン共通スタイル（index.html / history.html 共用）方針：生成りの余白 × 手描きKVが主役 × 写真は手描き額縁 × すっきり ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} :root{ --cream:#fdf2df; /* KV背景と実測で完全一致（#fdf2df）*/ --cream-deep:#f3e7cd; --paper:#f8eeda; --ink:#2e2b3d; /* 額縁と同じ濃紺＝本文・見出し */ --ink-soft:#6a6478; --blue:#7ba3c4; /* こころ／家 */ --green:#a0bd92; /* ほかほか／木 */ --coral:#dd937f; /* あたたかい／家 */ --coral-deep:#cf6f4f; /* 見出し用の濃いコーラル */ --mustard:#d6a648; /* まち／ハート */ --star:#6f9fce; } html{scroll-behavior:smooth} body{ font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN',sans-serif; color:var(--ink);background:var(--cream); line-height:1.9;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} /* ============ 日本語の改行を読みやすくする（3層）============ ①text-wrap:pretty … 行末に1文字だけ落ちる「泣き別れ」を防ぐ ②word-break:auto-phrase … 文節の途中で折らない（「遊びに／来た」を防ぐ・対応ブラウザのみ） ③.tw（js/typeset.js が付与）… 「。」のかたまりごとに改行させる ※①②は非対応ブラウザでは無視されるだけなので安全 */ body{text-wrap:pretty;word-break:auto-phrase} .tw{display:inline-block} /* 途中で割りたくないかたまり（会場名など）に付ける */ .nb{white-space:nowrap} /* ---- 見出し系 ---- */ .h2{font-size:clamp(1.4rem,4.4vw,2.1rem);font-weight:700;line-height:1.5;letter-spacing:.02em} .lead{color:var(--ink-soft);font-size:clamp(.98rem,2.6vw,1.08rem);margin-top:16px} /* ---- ボタン ---- */ .btn{ display:inline-flex;align-items:center;gap:10px; font-weight:700;font-size:1rem;padding:14px 30px;border-radius:40px; transition:.18s;border:2px solid var(--ink); } .btn-fill{background:var(--ink);color:var(--cream)} .btn-line{background:transparent;color:var(--ink)} .btn:hover{transform:translateY(-2px)} .btn-cta{background:var(--coral);border-color:var(--coral);color:#fff;font-size:1.1rem;padding:18px 40px;box-shadow:0 5px 0 #c0745f} /* ボタンの行き先グループを、小さな色の丸で予告する（ロゴの●と同じ作法） g-kid=市民の子ども / g-vis=ビジター / g-vol=ボランティア / g-rec=活動を知りたい方 */ .btn.g-kid,.btn.g-vis,.btn.g-vol,.btn.g-rec{position:relative} .btn.g-kid::before,.btn.g-vis::before,.btn.g-vol::before,.btn.g-rec::before{ content:'';width:11px;height:11px;border-radius:50%;flex:0 0 auto;background:var(--g)} .g-kid{--g:var(--coral)} .g-vis{--g:#6f8fb5} .g-vol{--g:#5f9e6b} .g-rec{--g:var(--mustard)} .btn-cta:hover{transform:translateY(-2px)} .btn-cta:active{transform:translateY(3px);box-shadow:none} /* ============ ページの系統色 ============ 「いま自分は誰向けのページを読んでいるか」がひと目でわかるようにする。色はトップページの3分岐（市民＝コーラル／ビジター＝青／ボランティア＝緑）から引き継ぎ、記録・活動紹介の系統だけ4色目のマスタードを使う。使い方：のように付けるだけ。 p-kid …… 市民になる子ども向け（お仕事・あそぶ/まなぶ・市民の一日） p-vis …… 付き添いの大人向け（ビジター） p-vol …… 手伝いたい大人向け（ボランティア） p-rec …… 活動を知りたい方向け（これまでのここほか・記録ページ） p-doc …… 正式な文書（セーフガーディング指針）※4色のどれでもない濃紺ヘッダーは sticky なので、スクロール中もずっと色の線が見えている。 */ body{--pagecolor:transparent} body.p-kid{--pagecolor:var(--coral)} body.p-vis{--pagecolor:#6f8fb5} body.p-vol{--pagecolor:#5f9e6b} body.p-rec{--pagecolor:var(--mustard)} /* p-doc …… 正式な文書（セーフガーディング指針）。誰向けかではなく「公式文書」を示すので本文の濃紺 */ body.p-doc{--pagecolor:var(--ink)} .pagechip{display:inline-block;font-weight:700;color:#fff;font-size:.92rem;letter-spacing:.03em; padding:5px 20px;border-radius:20px;margin-bottom:16px;background:var(--pagecolor)} /* トップページなど、系統色を持たないページで個別に色を指定したいとき */ .chip-kid{--pagecolor:var(--coral)} .chip-vis{--pagecolor:#6f8fb5} .chip-vol{--pagecolor:#5f9e6b} .chip-rec{--pagecolor:var(--mustard)} .chip-doc{--pagecolor:var(--ink)} /* ============ ヘッダー ============ */ .header{position:sticky;top:0;z-index:60;background:rgba(253,242,223,.86);backdrop-filter:blur(8px); border-bottom:5px solid var(--pagecolor)} .header-in{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px} .logo{display:flex;align-items:baseline;gap:8px;font-weight:700} .logo b{font-size:1.3rem;letter-spacing:.04em} .logo .dot{width:8px;height:8px;border-radius:50%;background:var(--mustard);display:inline-block} .logo small{font-size:.62rem;color:var(--ink-soft);font-weight:500} .nav{display:none;gap:4px;align-items:center} .nav a{font-size:.92rem;font-weight:500;padding:8px 11px;border-radius:22px;letter-spacing:.03em;transition:.15s} .nav a:hover{background:var(--cream-deep)} .nav .cta{background:var(--coral);color:#fff;font-weight:700} .burger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px} .mnav{display:none;flex-direction:column;background:var(--paper);padding:8px 24px 16px} .mnav.open{display:flex} .mnav a{padding:13px 6px;font-weight:500;border-bottom:1px dashed var(--cream-deep)} /* メニュー項目が7つになったため、横並びは1180px以上でのみ表示（それ未満はハンバーガー） */ @media(min-width:1180px){.nav{display:flex}.burger{display:none}} /* ============ セクション ============ */ .section{padding:74px 22px} .section.tint{background:var(--paper)} @media (max-width:600px){ .section{padding:52px 20px} } .center{text-align:center;max-width:640px;margin:0 auto} /* ============ 額縁つき写真 ============ */ .framed{position:relative;width:100%;aspect-ratio:var(--fw)/var(--fh)} /* background は読み込み中の下地。額縁の中が真っ白に抜けて見えるのを防ぐ */ .framed .ph{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);object-fit:cover;border-radius:5px;background:var(--cream-deep)} .framed .fr{position:absolute;inset:0;width:100%;height:100%} .fr01{--fw:1093;--fh:1144;--l:16.65%;--t:15.56%;--w:67.52%;--h:68.71%} .fr02{--fw:922;--fh:1240;--l:17.46%;--t:11.85%;--w:65.62%;--h:75.97%} .fr03{--fw:1137;--fh:811;--l:8.88%;--t:12.58%;--w:82.15%;--h:75.83%} .fr04{--fw:1244;--fh:908;--l:11.01%;--t:14.32%;--w:78.46%;--h:71.48%} .fr05{--fw:980;--fh:1023;--l:13.27%;--t:12.41%;--w:74.18%;--h:75.07%} .fr06{--fw:910;--fh:1289;--l:18.13%;--t:13.27%;--w:63.52%;--h:73.62%} /* ============ 写真ギャラリー（流れる）============ */ .marquee{overflow:hidden;--gap:26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .mtrack{display:flex;gap:var(--gap);width:max-content;align-items:center;animation:scroll 46s linear infinite} .marquee:hover .mtrack{animation-play-state:paused} .mtrack .item{flex:0 0 auto} @keyframes scroll{to{transform:translateX(calc(-50% - var(--gap)/2))}} .gallery-btn{text-align:center;margin-top:34px} /* ギャラリー下の控えめなリンク。ここで目立つべきなのは参加を考えている子ども・保護者なので、記録への入口はボタンにせず、探している人だけが見つける佇まいにする。 */ .quietlink{text-align:center;margin-top:30px} .quietlink a{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink-soft); border-bottom:1px solid var(--cream-deep);padding-bottom:3px;transition:.15s} .quietlink a::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--mustard);flex:0 0 auto} .quietlink a:hover{color:var(--ink);border-bottom-color:var(--mustard)} /* ============ 活動を知りたい方へ（トップ最下部）============ */ .knowbox{max-width:660px;margin:0 auto;text-align:center} .glead{max-width:620px;margin:0 auto 26px;color:var(--ink-soft);font-size:clamp(.94rem,2.5vw,1.02rem)} .know-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch} .know-btns .btn{font-size:.95rem;padding:13px 24px} /* ============ 事前登録（3分岐）============ 実体が市民・ビジター・ボランティアの3つに分かれているので、CTAも3つ見せる。フォールバック用に .is-soon（準備中）を用意してある。届いたらをに替えるだけ。 */ .applys{display:grid;grid-template-columns:1fr;gap:14px;max-width:820px;margin:0 auto;text-align:left} @media(min-width:760px){.applys{grid-template-columns:repeat(3,1fr)}} .apply{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center; background:var(--cream);border:2.5px solid var(--ink); border-radius:22px;padding:18px 20px;box-shadow:0 5px 0 rgba(46,43,61,.10);transition:.18s} .apply .ad{grid-row:1 / span 2} a.apply:hover{transform:translateY(-2px)} a.apply:active{transform:translateY(3px);box-shadow:none} .apply .ad{width:14px;height:14px;border-radius:50%;flex:0 0 auto} .ad-kid{background:var(--coral)} .ad-vis{background:#6f8fb5} .ad-vol{background:#5f9e6b} .apply b{font-weight:700;font-size:1rem;line-height:1.4} .apply small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:2px} .apply.is-soon{opacity:.55;box-shadow:none;border-style:dashed;cursor:default} /* ============ ヒーロー（KV）============ */ /* ヒーロー：KVは全幅・ページ最上端にぴったり。画像の下端の帯は --cream と同色で、そのままページ背景につながる設計。左右に余白を作らない／上に何も挟まない／縦にトリミングしない。 */ /* トップだけ、KVに重なっている間はヘッダーを白に。 KVの空が純白なので境目が消える。通り過ぎたら生成りに戻る（JSで on-kv を付け外し）。 */ .home .header{transition:background-color .28s ease,backdrop-filter .28s ease} .home .header.on-kv{background:#fff;backdrop-filter:none} .hero{text-align:center;padding:0 0 10px} .hero picture{display:block} .hero .kv{display:block;width:100%;max-width:none;height:auto;margin:0; aspect-ratio:2/1} @media(max-width:767px){.hero .kv{aspect-ratio:3/4}} .hero .hero-cap{margin-top:26px} .hero-cap{font-family:'Zen Maru Gothic',sans-serif;font-weight:500;color:var(--ink);font-size:clamp(1.15rem,3.4vw,1.45rem);margin-top:20px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:14px} .hero-cap::before,.hero-cap::after{content:'';width:30px;height:2.5px;background:var(--coral);border-radius:2px;flex:0 0 auto} /* 日付＋会場。せまい画面では「／」を消して2行に折る（両端の線はそのまま） */ .hero-cap .hc-in{min-width:0;text-align:center} .hero-cap .hc-br{display:none} @media(max-width:600px){ .hero-cap{gap:10px;font-size:1.02rem;line-height:1.7} .hero-cap::before,.hero-cap::after{width:18px} .hero-cap .hc-sep{display:none} .hero-cap .hc-br{display:block} } .scrollcue{margin:22px auto 0;width:26px;height:26px;border-right:2.5px solid var(--ink-soft);border-bottom:2.5px solid var(--ink-soft);transform:rotate(45deg);opacity:.5;animation:bob 1.8s ease-in-out infinite} @keyframes bob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(6px) rotate(45deg)}} /* ============ 参加フロー ============ */ .flow{max-width:720px;margin:30px auto 0} .step{display:flex;gap:20px;align-items:flex-start;padding:14px 0} .step .n{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--cream);border:2px solid var(--ink);display:grid;place-items:center;font-weight:700} .step h4{font-weight:700;font-size:1.05rem} .step p{color:var(--ink-soft);font-size:.95rem;margin-top:2px} /* ============ サブカード（3枚並び）============ */ .subgrid{display:grid;grid-template-columns:1fr;gap:26px;max-width:1040px;margin:44px auto 0} @media(min-width:820px){.subgrid{grid-template-columns:repeat(3,1fr)}} .subcard{background:var(--cream);border:2px solid var(--ink);border-radius:24px;padding:24px;text-align:center;display:flex;flex-direction:column} .subcard .btn{margin-top:auto;align-self:center} /* 準備中の案内（ボタンの位置に置き、カードの下端そろえを保つ） */ .soon-note{margin-top:auto;font-size:.86rem;color:var(--ink-soft);line-height:1.75} .soon-note a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px} .subcard .tag{display:inline-block;font-weight:500;font-size:.78rem;color:var(--ink-soft);border:1px dashed var(--ink-soft);border-radius:20px;padding:2px 12px;margin-bottom:12px;align-self:center} .subcard h3{font-weight:700;font-size:1.12rem;margin-bottom:8px} .subcard p{color:var(--ink-soft);font-size:.92rem;margin-bottom:18px} .photo-pair{display:flex;gap:14px;justify-content:center;margin-bottom:20px} .photo-pair .framed{width:47%} /* ============ 参加できるのは？（2分岐）============ */ .who-grid{display:grid;grid-template-columns:1fr;gap:26px;max-width:520px;margin:40px auto 0} @media(min-width:900px){.who-grid{grid-template-columns:repeat(3,1fr);max-width:1120px}} .who-card{background:var(--cream);border:2.5px solid var(--ink);border-radius:26px;padding:36px 28px 32px;text-align:center;display:flex;flex-direction:column;box-shadow:0 6px 0 rgba(46,43,61,.07);position:relative} /* カード上辺に行き先の色を予告（押した先のページのヘッダー線と同じ色）*/ .who-card::before{content:'';position:absolute;top:-2.5px;left:50%;transform:translateX(-50%);width:96px;height:11px;border-radius:0 0 8px 8px;background:var(--coral)} .who-vol::before{background:#5f9e6b} .who-vis::before{background:#6f8fb5} .who-card .badge{align-self:center;font-weight:700;color:#fff;font-size:.92rem;padding:5px 20px;border-radius:20px;margin-bottom:14px} .who-kid .badge{background:var(--coral)} .who-vol .badge{background:#5f9e6b} .who-vis .badge{background:#6f8fb5} .who-card h3{font-size:clamp(1.2rem,3.6vw,1.5rem);font-weight:700;margin-bottom:8px} .who-card .age{font-weight:700;color:var(--coral-deep);font-size:1.05rem;margin-bottom:10px} .who-card p{color:var(--ink-soft);font-size:.95rem;margin-bottom:22px} .who-card .btn{margin-top:auto;align-self:center} /* ============ CTA ============ */ .cta{text-align:center;padding:84px 24px;background:var(--cream-deep)} /* ここほかの鳥（子どもたちが考えたキャラクター）。1ページに1羽だけ、見出しの上にちょこんと。 */ .bird-deco{display:block;margin:0 auto 18px;width:clamp(72px,10vw,104px);height:auto; pointer-events:none;user-select:none} .cta .date{font-weight:700;color:var(--coral-deep);font-size:1.05rem;margin-bottom:10px} .cta h2{font-size:clamp(1.5rem,5vw,2.3rem);font-weight:700;line-height:1.5;margin-bottom:10px} .cta p{color:var(--ink-soft);margin-bottom:30px} .cta .note{margin-top:16px;font-size:.82rem;color:var(--ink-soft)} .cta .vol{display:inline-block;margin-top:22px;font-size:.9rem;color:var(--ink-soft);border-bottom:1px dotted var(--ink-soft)} /* ============ フッター ============ */ .footer{background:var(--ink);color:var(--cream);text-align:center;padding:50px 24px 34px} .footer .fname{font-weight:700;font-size:1.1rem;letter-spacing:.05em} .footer .fnav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin:20px 0} .footer .fnav a{font-size:.9rem;opacity:.85} .footer .fnav a:hover{opacity:1;text-decoration:underline} .footer .ig{display:inline-block;margin:6px 0 18px;font-size:.9rem;opacity:.85} .footer small{opacity:.55;font-size:.76rem;display:block;margin-top:8px} .footer .fcontact{display:table;margin:2px auto 6px;font-size:.92rem;font-weight:700; border-bottom:2px solid rgba(247,240,226,.45);padding-bottom:2px} .footer .fcontact:hover{border-bottom-color:var(--cream)} .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.25,1)} .reveal.in{opacity:1;transform:none} /* グループ内は少しずつ、ほわっと連続で */ .subgrid .subcard:nth-child(2){transition-delay:.12s} .subgrid .subcard:nth-child(3){transition-delay:.24s} @media (prefers-reduced-motion:reduce){.reveal{transition:none;opacity:1;transform:none}} /* ============ セーフガーディングへの誘導（ビジター／ボランティア） ============ */ .sgbox{max-width:760px;margin:0 auto;background:var(--ink);color:var(--cream); border-radius:26px;padding:34px 30px 32px;text-align:center} .sgbox .sgtag{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.1em; border:1.5px solid rgba(253,242,223,.45);border-radius:20px;padding:4px 15px;margin-bottom:15px} .sgbox h3{font-weight:700;font-size:clamp(1.08rem,3.6vw,1.32rem);line-height:1.6;margin-bottom:13px} .sgbox p{font-size:.93rem;line-height:1.95;opacity:.88;margin:0 auto 22px;max-width:34em} .sgbox .btn{background:var(--cream);border-color:var(--cream);color:var(--ink)} @media(max-width:520px){.sgbox{padding:28px 22px 26px}}