/* ══════════ 川の帯 ── /ame/ の岸を、各ページの頭に ══════════
   /ame/ は一枚の実験で終わっていた。その世界を、実際に読まれる頁へ配り直す。
   ここでは雨だけ。石は降らせない——物語は /ame/ と本にあり、この帯は入口なので。 */

#kawa{position:relative;overflow:hidden;background:var(--washi);
 /* 帯の描き直しを、頁のスクロールから切り離す */
 contain:paint;
 /* 高さは【幅】に連動させる。画面の高さで決めると、横に広い窓ほど絵が拡大され、
    岸が帯の外へ沈む（1728幅で岸が45.7%＝帯の下に隠れた。実測して直した） */
 height:clamp(300px,27vw,470px)}
#kawa .kawabg{position:absolute;inset:0;
 /* 無彩色化・明暗の調整は【画像に焼き込んである】。
    CSSのfilterを大きな絵にかけたままだと、スクロールのたびに層を塗り直すことになり、
    携帯で目に見えて引っかかる（2026-08-22 著者「スクロールすると挙動がおかしい」） */
 background:url('/ame/kishi.jpg') center 25%/cover}
#kawa .kawabg::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,
  rgba(244,239,230,.92) 0%, rgba(244,239,230,.5) 26%,
  rgba(244,239,230,0) 52%, rgba(244,239,230,0) 80%, var(--washi) 100%)}
#kawa canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#kawa #head{position:relative;padding:13vh 6vw 0}

/* 狭い画面では、岸が高く出て題が沈む。空を多めに切る */
@media(max-width:640px){
 #kawa{height:clamp(320px,46vh,420px)}
 /* 携帯には、携帯の大きさの絵を渡す（1456px→760px・240KB→45KB） */
 #kawa .kawabg{background-image:url('/ame/kishi-sp.jpg');
  background-size:auto 168%;background-position:center top}
 /* 携帯のナビは二段で背が高い。その下から題を始める */
 #kawa #head{padding-top:17vh}
}

/* ══════════ 紙の石 ── 文の右の余白に、一粒ずつ ══════════
   この頁たちの本文は max-width:25〜34em で、右に広い余白が残る。
   そこに、ちぎった紙の石を置く。数えられる数だけ、離して置く。 */

.tsubu{position:absolute;background-repeat:no-repeat;background-size:contain;
 opacity:.72;pointer-events:none;user-select:none}

/* 十の約束は、十の石 ── 「小さいものを、一つずつ数えます」（第七条） */
@media(min-width:1100px){
 .ten li::after{content:"";position:absolute;background-repeat:no-repeat;
  background-size:contain;pointer-events:none}
 .ten li:nth-child(1)::after{background-image:url(/assets/ishi/ishi3.png);
  left:calc(100% + 3.4rem);top:2.0rem;width:76px;height:86px;opacity:0.74}
 .ten li:nth-child(2)::after{background-image:url(/assets/ishi/ishi6.png);
  left:calc(100% + 8.6rem);top:3.4rem;width:92px;height:60px;opacity:0.7}
 .ten li:nth-child(3)::after{background-image:url(/assets/ishi/ishi8.png);
  left:calc(100% + 2.2rem);top:2.8rem;width:62px;height:56px;opacity:0.78}
 .ten li:nth-child(4)::after{background-image:url(/assets/ishi/ishi2.png);
  left:calc(100% + 6.8rem);top:2.2rem;width:100px;height:99px;opacity:0.72}
 .ten li:nth-child(5)::after{background-image:url(/assets/ishi/ishi7.png);
  left:calc(100% + 3.0rem);top:3.2rem;width:74px;height:57px;opacity:0.72}
 .ten li:nth-child(6)::after{background-image:url(/assets/ishi/ishi1.png);
  left:calc(100% + 7.8rem);top:1.8rem;width:54px;height:101px;opacity:0.7}
 .ten li:nth-child(7)::after{background-image:url(/assets/ishi/ishi4.png);
  left:calc(100% + 2.6rem);top:2.6rem;width:80px;height:105px;opacity:0.66}
 .ten li:nth-child(8)::after{background-image:url(/assets/ishi/ishi3.png);
  left:calc(100% + 8.2rem);top:3.0rem;width:70px;height:79px;opacity:0.7;transform:scaleX(-1)}
 .ten li:nth-child(9)::after{background-image:url(/assets/ishi/ishi8.png);
  left:calc(100% + 4.4rem);top:2.4rem;width:82px;height:74px;opacity:0.74;transform:scaleX(-1)}
 .ten li:nth-child(10)::after{background-image:url(/assets/ishi/ishi6.png);
  left:calc(100% + 2.8rem);top:2.8rem;width:106px;height:70px;opacity:0.68;transform:scaleX(-1)}
}

/* 動きを望まない人には、雨を降らせない */
@media(prefers-reduced-motion:reduce){ #kawa canvas{display:none} }

/* ── ごあいさつ ── 二つの節に、一粒ずつ。
   「いちばん弱い石のこと」の節には、いちばん小さい石を置く */
#aisatsu .prose{position:relative}
@media(min-width:1000px){
 .tsubu.a{background-image:url(/assets/ishi/ishi2.png);
  right:1.5rem;top:2.6rem;width:104px;height:103px}
 .tsubu.b{background-image:url(/assets/ishi/ishi8.png);
  right:5.5rem;top:9rem;width:60px;height:54px;opacity:.8}
}

/* ── お問い合わせ ── 紙の脇に、石が置いてある。左右に一粒ずつ、高さを違えて ── */
#tegami{position:relative}
@media(min-width:1000px){
 .tsubu.c{background-image:url(/assets/ishi/ishi4.png);
  right:calc(50% + 18rem);top:9rem;width:84px;height:110px;opacity:.6}
 .tsubu.d{background-image:url(/assets/ishi/ishi6.png);
  left:calc(50% + 18rem);top:19rem;width:104px;height:68px;opacity:.6}
}
@media(max-width:999px){ .tsubu{display:none} }

/* 帯には、番号と題だけ。前置き・目次は紙の上に下ろす（石に沈めない） */
.atoAtama{max-width:1060px;margin:0 auto;padding:5.5vh 6vw 0}
.atoAtama .lead+.lead{margin-top:2.2rem}

/* ── 名乗りの横 ──
   「小さくちぎった紙を、何十枚も貼り重ねていくと、いつのまにか、一つの絵に
   なっています」——その段落を、そのまま絵にした。図鑑の紙片を積んだ一山。
   飾りではなく、この人の作り方そのもの */
#nanori{position:relative}
.tsubu.f{background-image:url(/assets/ishi/tsumu.webp);aspect-ratio:400/375;opacity:.92}
@media(min-width:1000px){
 .tsubu.f{right:2.5rem;top:3.2rem;width:clamp(160px,13.5vw,215px)}
}
/* 携帯では、名乗りのすぐ下に置く（横に並べる余白が無いので、下が「横」になる） */
@media(max-width:999px){
 .tsubu.f{display:block;position:static;margin:1.6rem auto .2rem;
  width:min(56vw,220px)}
}

/* ══════════ トップページ ── ところどころに、石を ══════════
   本文は max-width 24〜30em で、右に約 400px の余白が残る（実測853−445）。
   離してばらばらに置くと、ただの黒い染みに見えた。**意味のある塊で置く** */
#message,#words,#journal,#contact{position:relative}
@media(min-width:1000px){
 /* ごあいさつ ── 三つの約束を引いている。その横に、三粒をまとめて。
    離れていると意味を失う。寄り合っているから、約束に見える（実測：約束の塊は節から57.9rem） */
 .tsubu.m1{background-image:url(/assets/ishi/ishi3.png);
  right:6.5rem;top:59.4rem;width:76px;height:86px;opacity:.7}
 .tsubu.m2{background-image:url(/assets/ishi/ishi8.png);
  right:2.2rem;top:62.6rem;width:82px;height:74px;opacity:.66}
 .tsubu.m3{background-image:url(/assets/ishi/ishi7.png);
  right:8.4rem;top:66.8rem;width:74px;height:57px;opacity:.6}
 /* ことばの部屋 ── 掘り起こすと物語が埋まっている（一覧は節から29.4rem） */
 .tsubu.w1{background-image:url(/assets/ishi/ishi2.png);
  right:3.5rem;top:32rem;width:96px;height:95px;opacity:.6}
 /* 日記 ── 一粒（一覧は節から18.4rem） */
 .tsubu.j1{background-image:url(/assets/ishi/ishi6.png);
  right:2.5rem;top:21rem;width:104px;height:68px;opacity:.58}
 /* お問い合わせ ── 中央揃えなので、左右に振り分ける */
 .tsubu.c1{background-image:url(/assets/ishi/ishi8.png);
  right:calc(50% + 17rem);top:15rem;width:82px;height:74px;opacity:.5}
 .tsubu.c2{background-image:url(/assets/ishi/ishi1.png);
  left:calc(50% + 18rem);top:20rem;width:54px;height:101px;opacity:.5}
}