/* 子どもらしい地・ほかのページ共通（漫画 2026-10-15）。kids/ に置く。絵は同じフォルダ */

/* ==========================================================================
   HP 全体 «子どもらしい地»（漫画 2026-10-15）── manga_top.css ＋ manga_top_kids.css の«あと»に足す
   飾りの絵は site_assets/ に（index.html と同じ階層に置く）
   ========================================================================== */
:root{--kid-cream:#fffaf4;--kid-pink:#fdf2f4;--kid-lilac:#f6effb;--kid-ink:#3a3029;--kid-pur:#6a4fa3}
body{background:var(--kid-cream)}
main{background:url(dots_tile.svg) 0 0/520px 520px repeat, var(--kid-cream)}

/* ---- 見出し：虹の線 → 小さな花と蝶 ---- */
.sec-head h2{font-size:1.5rem;letter-spacing:.16em;color:#3f3550}
.sec-head::after{width:150px;height:36px;border-radius:0;background:url(deco_head.svg) center/contain no-repeat;margin:.7rem auto 0}

/* ---- セクション：交互の地＋雲のさかい目 ---- */
section{position:relative}
section.alt,.alt{background:url(dots_tile.svg) 0 0/520px 520px repeat, var(--kid-pink)}
section.alt::before,section.alt::after{content:"";position:absolute;left:0;right:0;height:34px;pointer-events:none}
section.alt::before{top:-33px;background:url(cloud_up_cream.svg) center/100% 100% no-repeat}
section.alt::after{bottom:-33px;background:url(cloud_down_cream.svg) center/100% 100% no-repeat}

/* ---- カード：白い«ふうせん»。角を大きく、ふちに淡い虹 ---- */
.card,.konna,.ann-card,.fq-list details{border-radius:26px!important;border:2px solid #f0e3ee!important;background:#fff!important;
  box-shadow:0 14px 30px -22px rgba(120,80,130,.45)!important}
.card{position:relative;overflow:hidden}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#f3a6ac,#f6c69d,#f1e3a4,#bfe3c4,#aecfee,#cbbae7);opacity:.8}
.card h3{font-size:1.15rem;color:#3f3550}
.card img{border-radius:14px}

/* こんなとき：点 → 小さな花 */
.konna li::before{width:12px;height:12px;top:.62em;background:radial-gradient(circle,#fbe08a 32%,transparent 34%),radial-gradient(circle at 50% 0,#f8b8c8 30%,transparent 32%),radial-gradient(circle at 100% 50%,#aed7f1 30%,transparent 32%),radial-gradient(circle at 50% 100%,#bfe3c4 30%,transparent 32%),radial-gradient(circle at 0 50%,#d9c2f3 30%,transparent 32%)}

/* ご案内：アプリの扉は«まるい窓»、読む・会うのカードは«しずく» */
.app-door{border-radius:34px!important;border:2px solid #f0e3ee;box-shadow:0 18px 36px -24px rgba(120,80,130,.55)!important}
.app-door .ad-thumb{border-radius:28px 28px 0 0}
.app-door .ad-cta{display:inline-flex!important;align-items:center;min-height:44px;margin:.2rem auto 1rem!important;padding:0 1.4rem!important;border-radius:999px;background:#f3ecfb;color:#5a3f96!important}
.ann-card{border-radius:40px 40px 40px 12px!important}
.ann-card:nth-child(2n){border-radius:40px 40px 12px 40px!important}
.ann-card .ic{font-size:2rem}
.ann-g{color:#3f3550}

/* ボタン：こげ茶 → やわらかな藤の«まるいボタン» */
.btn,.btn-note{background:linear-gradient(135deg,#a58bd4,#7a5fb0)!important;color:#fff!important;border-radius:999px!important;
  min-height:48px;display:inline-flex!important;align-items:center;justify-content:center;padding:.8em 2.2em!important;font-size:1rem!important;font-weight:700;letter-spacing:.08em;
  box-shadow:0 10px 22px -12px rgba(106,79,163,.7)}
.btn:hover,.btn-note:hover{filter:brightness(1.06);opacity:1!important;transform:translateY(-1px)}

/* よくあるご質問：Qを花のまるに */
.fq-list .q{background:radial-gradient(circle,#fff 55%,transparent 56%),conic-gradient(#f8b8c8,#fbd38d,#f6e48c,#bfe3c4,#aed7f1,#d9c2f3,#f8b8c8)!important;color:#6a4fa3!important}

/* 本・漫画の絵：角を丸く、ふわっと浮かせる */
.manga-strip img{border-radius:20px;border:3px solid #fff;box-shadow:0 12px 26px -16px rgba(120,80,130,.55)}
.profile-photo{border-radius:50%;width:min(60%,220px);aspect-ratio:1/1;border:6px solid #fff;box-shadow:0 0 0 6px #f6e1ea,0 16px 30px -18px rgba(120,80,130,.6)}
.profile-photo img{height:100%;object-fit:cover}

/* フッター：こげ茶 → 夜空。上に花が咲く */
footer{position:relative;background:url(night_stars.svg) center/cover no-repeat,linear-gradient(180deg,#3b3270,#2a2350)!important;color:#ece6f6!important;margin-top:120px}
footer::before{content:"";position:absolute;left:0;right:0;top:-118px;height:120px;background:url(flowers_strip.svg) center bottom/auto 120px repeat-x;pointer-events:none}
footer a{color:#f3e7ff!important}
footer .btn-note{background:#fff!important;color:#4a337f!important}
.rainbow-line{height:8px}


/* ---- ほかのページ共通：上の帯・ページの頭 ---- */
header{background:url(dots_tile.svg) 0 0/520px 520px repeat,rgba(255,250,244,.97)!important;border-bottom:2px solid #f3e6ef!important}
.hero,.page-hero,.ph{background:radial-gradient(90% 70% at 50% 0%,#fffaf2,#fdf3f5 60%,#f8effa)!important;position:relative}
.hero h1,h1{color:#3f3456}
h2{color:#3f3550}
/* 古い帯のメニュー：小さく薄い字を、濃く大きく（老眼の方へ） */
nav a{color:#3f3550!important;font-size:15px!important;font-weight:700}
nav a .en{color:#6e6380!important;font-size:11px!important;font-weight:500}
.hero .en,.eyebrow,[class*="eyebrow"]{color:#7a64a8!important}
.hero .lead,.lead{color:#3a3029}

/* ページの頭（.hero）も、1ページ目のヒーローと同じ地 */
main>.hero,main>div.hero,.hero{background:url(chou_kids.svg) right 16px top 16px/82px auto no-repeat, url(hero_bg_kids_sp.svg) center bottom/100% auto no-repeat, radial-gradient(90% 60% at 50% 0%,#fffaf2,#fdf3f5 60%,#f8effa)!important;padding-bottom:150px!important}
@media(min-width:900px){main>.hero,main>div.hero,.hero{background:url(chou_kids.svg) right 8% top 28px/120px auto no-repeat, url(hero_bg_kids_pc.svg) center bottom/cover no-repeat, radial-gradient(90% 60% at 50% 0%,#fffaf2,#fdf3f5 60%,#f8effa)!important;padding-bottom:130px!important}}
header.bd{position:relative!important;top:auto!important;background:url(band_bg_kids.svg) center/cover no-repeat, radial-gradient(120% 90% at 50% 0%,#fffaf3 0%,#fdf4f4 55%,#f7eefb 100%)!important;border-bottom:1px solid #eadff0!important}
.hero p{color:#4a4055!important} .hero h1{color:#3f3456!important}