/* 手書きイラストと水彩の丸の散らし方（3案共通）
   ★2026-09-16 見直し: 参考サイト waka-kids.org を実測したら、
     こちらの飾りは「小さくて少ない」のが賑やかさ不足の正体だった。
       - 参考サイトの飾りは 100〜150px、写真に重なる大きさで置かれている（こちらは 72〜110px）
       - 写真の背後に、写真より大きい淡い色の丸（223〜320px）が必ずずらして敷いてある
       - 区画の縦余白は参考サイトのほうが大きい（144px）＝詰めたから賑やかなのではない
     なので「大きくする・数を増やす・余白に淡い面を置く」を同時にやる。
   置き方の考えは前と同じ: 主役（写真・見出し・文章）は塞がない。大きさと傾きは揃えない。

   本番（Gutenberg）ではイラストは普通の画像ブロック、水彩の丸は空の段落/グループ。
   位置はこの CSS が持つ（＝顧客が中身を差し替えても崩れない）。 */

.deco { position: absolute; pointer-events: none; z-index: 3; display: block; height: auto; }
/* ★本文の帯（中央 1120px）に掛かる位置へ置く飾りは、必ず本文より後ろへ。
   飾りの z-index が本文より上だと、カードの説明文やボタンの上に葉が乗る（実測で踏んだ）。
   端に置く飾りだけが写真に重なってよい。 */
.deco.is-behind { z-index: 1; }

/* 水彩の丸は .wash（色と形は mock.css / blobs.css）。ここは位置と大きさだけ。 */
.wash { display: block; }

/* 区画に位置の基準を持たせる */
.hero, .worry, .about, .support, .news, .guide, .access, .cta { position: relative; }
/* ★水彩の丸は器から外へはみ出す位置に置く（端で切れる形が自然）。
   区画の外まで出すと隣の帯の色に乗って濁るので、区画で切る。
   .hero と .guide は切らない（案Aのカードと .guide の芽が外へ出る作りのため）。 */
.worry, .about, .support, .news, .access, .cta { overflow: hidden; }

/* ── メインビジュアル ── */
.d-hero-flower { width: 132px; }

/* ── 悩み（こんなこと、ありませんか） ── */
.w-worry-1 { width: 380px; height: 380px; left: -90px;  top: 40px; }
.w-worry-2 { width: 300px; height: 300px; right: -70px; bottom: -40px; }
.d-worry-leaf      { width: 168px; left: -1%;  top: 96px;   transform: rotate(-12deg); }   /* ★案Aは白カードが区画の頭に 56px はみ出しているので、その下へ */
.d-worry-clover    { width: 118px; right: 4%;  bottom: 30px; transform: rotate(9deg); }
.d-worry-bird      { width: 142px; right: 7%;  top: 28px;   transform: rotate(4deg); }
.d-worry-sprout    { width: 120px; left: 11%;  bottom: -18px; transform: rotate(5deg); opacity: .9; }   /* ★中央の締めの一文の真下に置くと「くっついている」と読まれる。横へ逃がす */

/* ── あゆみプラスとは ── */
.w-about-1 { width: 420px; height: 420px; left: -60px; top: 20px; }
.w-about-2 { width: 300px; height: 300px; left: 300px; bottom: 10px; }
.d-about-bird   { width: 138px; right: 5%;  top: 26px; transform: rotate(-5deg); }
.d-about-grass  { width: 190px; left: 1%;   bottom: 0;  opacity: .9; }
.d-about-flower { width: 116px; left: 30%;  top: 8px;  transform: rotate(8deg); }

/* ── 3つのサポート ── */
.w-support-1 { width: 400px; height: 400px; right: -110px; top: 30px; }
.w-support-2 { width: 280px; height: 280px; left: -80px;   bottom: 60px; }
.d-support-sun    { width: 168px; left: 2%;   top: 20px;   opacity: .9; }
.d-support-flower { width: 140px; right: 3%;  bottom: 26px; transform: rotate(6deg); }
.d-support-bird   { width: 112px; right: 16%; top: 18px;   transform: rotate(-9deg); }
.d-support-ivy    { width: 150px; left: 0;    bottom: 0;   opacity: .85; transform: rotate(4deg); }

/* ── お知らせ ── */
.w-news-1 { width: 340px; height: 340px; left: -90px;  bottom: 20px; }
.w-news-2 { width: 300px; height: 300px; right: -80px; top: 30px; }
.d-news-mimosa { width: 128px; right: 1%;  top: 24px;   transform: rotate(-8deg); }
.d-news-bird   { width: 118px; left: 3%;   top: 34px;   transform: rotate(6deg); }

/* ── 3つの入口 ── */
.w-guide-1 { width: 300px; height: 300px; right: -70px; top: -30px; }
.d-guide-sprig { width: 132px; left: -5%;  top: -22px; transform: rotate(14deg); }
.d-guide-flower { width: 106px; right: 1%;  top: -20px; transform: rotate(-10deg); }

/* ── アクセス ── */
.w-access-1 { width: 360px; height: 360px; right: -100px; bottom: -40px; }
.d-access-tree   { width: 162px; right: 2%;  bottom: 18px; opacity: .92; }
.d-access-bird   { width: 110px; left: 2%;   top: 20px;   transform: rotate(-7deg); }

/* ── お問い合わせ誘導 ── */
.w-cta-1 { width: 420px; height: 420px; left: -110px;  top: -30px; }
.w-cta-2 { width: 320px; height: 320px; right: -90px;  bottom: -30px; }
.d-cta-bush      { width: 230px; left: 1%;   bottom: 0;   opacity: .95; }
.d-cta-hill      { width: 180px; right: 1%;  bottom: 0;   opacity: .9; transform: rotate(-4deg); }
.d-cta-butterfly { width: 88px;  left: 22%;  top: 16px;   transform: rotate(-12deg); }

/* ── メインビジュアルまわり（案ごとに位置が違う） ── */
.plan-a .d-hero-cloud  { width: 210px; left: 5%;  top: 70px;  opacity: .92; z-index: 3; }
.plan-a .d-hero-bird   { width: 112px; left: 1%;  top: 230px; transform: rotate(-8deg); }
.plan-a .d-hero-flower { right: 6%;    bottom: -40px; transform: rotate(9deg); }
.plan-a .w-hero-1      { width: 300px; height: 300px; right: 2%; bottom: -70px; }
.plan-b .d-hero-cloud  { width: 178px; right: 3%;  top: 10px; opacity: .9; }
.plan-b .d-hero-bird   { width: 124px; left: 40%;  top: 8px;  transform: rotate(-10deg); }
.plan-b .d-hero-flower { width: 120px; left: -1%;  bottom: 10px; transform: rotate(-8deg); }
.plan-b .w-hero-1      { width: 360px; height: 360px; left: -110px; top: 40px; }
.plan-c .d-hero-cloud  { width: 196px; right: 6%;  top: 26px; opacity: .85; z-index: 3; }
.plan-c .d-hero-bird   { width: 112px; right: 6%;  top: 170px; transform: rotate(-6deg); z-index: 3; }
.plan-c .d-hero-flower { width: 124px; left: -2%;  bottom: -26px; transform: rotate(10deg); z-index: 3; }
.plan-c .d-about-flower { left: -1%; top: 18px; }
.plan-c .w-hero-1      { display: none; }

@media (max-width: 900px) {
  /* ★スマホでは飾りを一律で本文より後ろへ。
     画面が狭いと、PC では空いている所がそのまま本文の真上になる（鳥が見出しの上に乗った）。
     位置を1つずつ直すより、「文字と釦が必ず勝つ」を先に決めるほうが崩れない。 */
  .deco { z-index: 1; }

  /* スマホは点数を減らす（狭い画面で飾りが本文に重なると読みにくい）。
     ★減らすのは「小さい物」から。大きさを保ったまま数を落とすほうが、
       全部を小さくするより賑やかさが残る（縮めると「パラパラ」に戻る）。 */
  .d-about-flower, .d-support-bird, .d-guide-flower, .d-cta-butterfly,
  .plan-c .d-hero-bird,
  .plan-a .d-worry-bird { display: none; }   /* ★案Aは白カードが区画の頭にはみ出していて居場所が無い */

  /* ★スマホは横に逃げ場が無い（本文が幅いっぱい）。縦に居場所を作るほうが速い。
     区画の上下の余白を広げ、飾りはその帯の中に置く。 */
  .worry, .about, .support, .news, .guide, .access, .cta { padding-top: 84px; padding-bottom: 84px; }
  .worry, .cta { padding-bottom: 96px; }

  .d-worry-leaf { width: 84px;  top: 152px; left: -17%; }  /* 見出しの脇ではなく一覧の左端から覗かせる */
  .d-worry-clover { width: 72px;  bottom: 6px; right: -3%; }
  .d-worry-bird { width: 76px;  top: 6px; right: 1%; }
  .d-worry-sprout { width: 78px;  bottom: 8px; left: 3%; }
  .d-about-bird   { width: 84px;  top: 4px; }
  .d-about-grass { width: 104px; bottom: -16px; }
  .d-support-sun { width: 84px;  top: 2px; left: 0; }
  .d-support-flower { width: 82px;  bottom: 14px; }
  .d-support-ivy    { width: 84px;  bottom: -4px; }
  .d-news-mimosa  { width: 78px;  top: 4px; }
  .d-news-bird    { width: 66px;  top: 8px; }
  .d-guide-sprig { width: 78px;  top: -28px; left: -8%; }
  .d-access-tree  { width: 98px;  bottom: 6px; opacity: .85; }
  .d-access-bird { width: 66px;  top: 22px; left: -1%; }
  .d-cta-bush { width: 128px; opacity: .85; bottom: -8px; }
  .d-cta-hill { width: 96px;  bottom: -8px; }

  .plan-a .d-hero-cloud  { width: 118px; left: 3%; top: 24px; }
  .plan-a .d-hero-bird   { display: none; }
  .plan-a .d-hero-flower { width: 82px; right: 2%; top: 196px; bottom: auto; }
  .plan-b .d-hero-cloud { width: 104px; top: 2px; right: -9%; }
  .plan-b .d-hero-bird   { width: 78px;  left: auto; right: -2%; top: 2px; }
  .plan-b .d-hero-flower { width: 78px;  top: auto; left: auto; right: -2%; bottom: -26px; }   /* 左下は「できた！」の丸が居るので右へ */
  /* ★案Cは飾りに z-index 3 を明示しているため、一律の「スマホは後ろへ」が詳細度で負ける。
     ここで明示的に戻す（写真の上・本文の下）。 */
  .plan-c .d-hero-cloud, .plan-c .d-hero-bird, .plan-c .d-hero-flower { z-index: 1; }
  .plan-c .d-hero-cloud  { width: 110px; top: 4px; right: 1%; }
  .plan-c .d-hero-flower { width: 78px;  left: -3%; right: auto; bottom: -18px; }

  /* 水彩の丸は画面幅に対して大きすぎると帯に見えるので、7割に落とす */
  .wash { transform: scale(.66); transform-origin: center; }
}