@charset "UTF-8";
/* Tomomin-art Web個展
   ごじゃっぺ屋＝森・紙・手書き（Klee One）／光のパレット＝水・光・余白（Shippori Mincho）
   作品・原画・写真には何も重ねない。装飾は作品の外側にだけ置く。 */
:root{
  --paper:#f6efdf;--paper-hi:#fbf6ea;--ink:#4a3f30;--muted:#857a66;--green:#5f7458;--wood:#8a6a45;
  --hikari:#f7f8f5;--hikari-ink:#4b5558;--hikari-muted:#7f8d90;
  --hand:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  --mincho:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --latin:"Cormorant Garamond",Georgia,serif;
  --sans:"Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif;
  --gutter:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px;-webkit-text-size-adjust:100%}
body{margin:0;background:linear-gradient(#f6efdfc4,#f6efdfc4),var(--paper) url('assets/deco/paper-cream.jpg') 0 0/900px auto;color:var(--ink);font-family:var(--hand);font-size:16px;line-height:2.15;letter-spacing:.06em;overflow-x:hidden}
body.locked{overflow:hidden}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #6f977f;outline-offset:6px}
.skip{position:fixed;top:-90px;left:16px;z-index:200;background:#fff;padding:10px}.skip:focus{top:12px}
.deco{pointer-events:none;user-select:none}

/* ===== Header ===== */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:68px;display:flex;align-items:center;justify-content:space-between;padding:8px var(--gutter);background:#fbf6eaee;backdrop-filter:blur(10px);border-bottom:1px solid #d9cfb860}
.brand{display:flex;align-items:center;gap:10px;font-size:19px;line-height:1.35;letter-spacing:.06em}
.brand img{width:38px;height:38px;object-fit:cover;object-position:50% 22%;border-radius:50%}
.menu{border:0;background:none;width:44px;height:44px;padding:10px}
.menu span{display:block;height:1.5px;background:var(--green);margin:7px 0;transition:transform .25s}
.menu[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
nav{display:none;position:absolute;inset:68px 0 auto;flex-direction:column;align-items:center;gap:2px;padding:22px;background:#fbf6eafa;box-shadow:0 14px 22px #5a46280f;font-size:15px}
nav.open{display:flex}
nav a{padding:9px 14px}

/* ===== 森の入口 ===== */
/* 森の入口：1枚目の風景。スマホでは、スクロールに合わせて空 → 大きな木とお店へ、絵がゆっくり流れる */
.entrance{position:relative;height:calc(230svh - 68px);text-align:center}
.entrance-stage{position:sticky;top:calc(68px + env(safe-area-inset-top,0px));height:calc(100svh - 68px);min-height:560px;overflow:hidden}
/* 入口の下端は、続きの小道の絵と重ねてなじませる（.forest を少し上に重ねる） */
.entrance-pan{position:absolute;top:0;left:0;height:100%;aspect-ratio:1536/1024;background:url('assets/entrance-scene.webp') 0 0/100% 100% no-repeat;transform:translate3d(var(--pan,-12.5%),0,0);will-change:transform}
/* 文字は絵の空の位置に置く（絵と一緒に流れる）。後ろにほんのりもや */
.entrance-sky{position:absolute;top:10%;left:calc(13% - 14px);width:min(92vw,520px);padding:22px 10px 26px;color:#4a3a2a;text-shadow:0 0 6px #fff9;background:radial-gradient(ellipse 62% 58% at 50% 50%,#fbf6eab8 0%,#fbf6ea80 45%,#fbf6ea30 70%,transparent 82%)}
.entrance-lead{font-size:clamp(16px,4.3vw,21px);font-weight:700;line-height:1.75;letter-spacing:.08em}
.sw-lead{display:block;width:min(210px,58%);height:28px;margin:0 auto 8px;color:#6b5640}
.entrance-title{width:68%;margin:0 auto}
.entrance-title img{width:100%;mix-blend-mode:multiply}
.entrance-copy{margin-top:8px;font-size:14px;line-height:2;font-weight:500}

/* ===== ごじゃっぺ屋の森 ===== */
.forest{position:relative;overflow:hidden;isolation:isolate;margin-top:-90px}
/* 森の紙の地は、入口と重なる上90pxには敷かない */
.forest::before{content:"";position:absolute;inset:90px 0 0;z-index:-2;background:linear-gradient(#f6efdfb0,#f6efdfb0),var(--paper) url('assets/deco/paper-cream.jpg') 0 0/900px auto;pointer-events:none}
.fern{position:absolute;z-index:-1;width:clamp(92px,22vw,240px);aspect-ratio:1/3;background:url('assets/deco/fern-side.png') left top/100% 100% no-repeat;pointer-events:none;will-change:transform;transform:translateY(var(--py,0px));-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 80%,transparent)}
.fern-l{left:-30px}
.fern-r{right:-30px;transform:translateY(var(--py,0px)) scaleX(-1)}
.fern-leaf{opacity:.82;width:clamp(76px,17vw,190px);filter:hue-rotate(-8deg) saturate(.85)}
.fern-r.fern-leaf{transform:translateY(var(--py,0px)) scaleX(-1) scaleY(-1)}
.village{position:relative;padding:150px var(--gutter) 30px}
/* 入口の小道が、そのまま下へ続く絵（ごじゃっぺ屋の説明の背景） */
.village::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:clamp(1000px,140vw,1500px);background:url('assets/path-continue.jpg') 70% 0/cover no-repeat;-webkit-mask-image:linear-gradient(transparent 0,#000 86px,#000 70%,transparent);mask-image:linear-gradient(transparent 0,#000 86px,#000 70%,transparent);pointer-events:none}
.branch{position:absolute;top:-30px;width:min(48vw,330px);opacity:.95}
.branch-l{left:-20px}

/* 紙のカード（手漉き紙の画像を伸ばして使う） */
.card{position:relative;background:url('assets/deco/paper-card.png') center/100% 100% no-repeat;filter:drop-shadow(0 10px 18px #6b57321c)}
.intro{max-width:600px;margin:30px auto 0;padding:58px 26px 62px;text-align:center;transform:rotate(-1deg)}
.eyebrow{font:italic 17px/1.6 var(--latin);letter-spacing:.06em;color:var(--green)}
.intro h2{font-size:clamp(16px,4.9vw,24px);font-weight:700;line-height:1.7;letter-spacing:.02em;white-space:nowrap;margin:12px 0 26px}
.intro p+p{margin-top:22px}
.intro p{font-size:15px;line-height:2.05;letter-spacing:.04em;word-break:keep-all}

/* 足あと：まっすぐ並べず、小道のようにうねらせる */
.paws{position:relative;height:190px;width:min(300px,78vw);margin:10px auto}
.paws i{position:absolute;width:24px;height:28px;background:url('assets/paw-print.svg') center/contain no-repeat;opacity:.78}
.paws i:nth-child(1){top:0;left:18%;transform:rotate(160deg) scale(.95)}
.paws i:nth-child(2){top:15%;left:38%;transform:rotate(175deg)}
.paws i:nth-child(3){top:32%;left:26%;transform:rotate(195deg) scale(.95)}
.paws i:nth-child(4){top:49%;left:48%;transform:rotate(170deg)}
.paws i:nth-child(5){top:66%;left:40%;transform:rotate(190deg) scale(.9)}
.paws i:nth-child(6){top:83%;left:62%;transform:rotate(165deg) scale(.88)}
.paws-b{transform:scaleX(-1)}
.paws-c{transform:scaleX(-1) translateX(10%)}

/* キャラクターとの出会い：名前 → 原画 */
.encounters{max-width:900px;margin:0 auto}
.encounter{position:relative;margin:10px 0 30px;padding:14px 16px 16px;width:fit-content;max-width:100%}
.encounter:nth-child(even){margin-left:auto}
/* 光は、文章の側（イラストと反対側）に少し広げる */
.encounter:nth-child(odd){padding-right:38px}
.encounter:nth-child(even){padding-left:38px}
.encounter figcaption{position:relative;z-index:2;width:max-content;margin-left:8%}
.encounter h3{font-size:30px;font-weight:700;letter-spacing:.24em;line-height:1.4;color:var(--ink)}
.encounter-art{position:relative;display:grid;grid-template-columns:clamp(110px,33vw,210px) auto;align-items:center;gap:12px;margin:0}
.encounter-art>img:first-child{width:100%;mix-blend-mode:multiply}
.encounter:nth-child(even) figcaption{margin:0 8% 0 auto}
.encounter:nth-child(even) .encounter-art{grid-template-columns:auto clamp(110px,33vw,210px)}
.encounter:nth-child(even) .meet{order:-1}
/* ふきだし：作家の紹介画像の名前タグの色。キャラクターの顔の横にポンと出る */
/* 名前札：作家さんのチラシと同じ色 */
.encounter:nth-child(1){--tag:#f6c9a3}.encounter:nth-child(2){--tag:#d9d3a6}.encounter:nth-child(3){--tag:#bdd0e6}.encounter:nth-child(4){--tag:#d9d3a6}
/* キャラクター紹介：キャラクターと紹介文を、ひとつのやわらかい光の中に置く（両端は小道が見える大きさ） */
.encounter::before{content:"";position:absolute;inset:0;z-index:-1;background:#fbf6eae6;border-radius:34px;filter:blur(7px);pointer-events:none}
.meet{position:relative;z-index:3;margin:0;text-align:left;font-size:clamp(12px,3.3vw,14px);font-weight:500;line-height:1.7;color:#5a4632;min-width:0}
.meet-label{margin:0 0 2px;font-size:.78em;font-weight:700;letter-spacing:.2em;color:#8a7258}
.meet dl{margin:0}
.meet dt{margin:9px 0 1px;font-size:.78em;font-weight:700;letter-spacing:.2em;color:#8a7258}
.meet dd{margin:0 0 0 .4em;white-space:nowrap}


.meet .name-tag{display:inline-block;margin:0;padding:2px 14px;font-size:clamp(18px,5vw,22px);font-weight:700;letter-spacing:.14em;line-height:1.6;color:#5a4632;background:var(--tag);border-radius:5px;text-shadow:none}
.js .meet{opacity:0;transform:translateY(10px)}
.js .encounter.met .meet{animation:meet .9s ease-out .3s forwards}
@keyframes meet{to{opacity:1;transform:none}}
/* 「ごじゃっぺ屋のなかまたち」のリボン見出し */
.nakama-title{margin:20px auto 44px;width:min(94%,560px)}
.nakama-title img{display:block;width:100%;height:auto}

.story-invitation{text-align:center;margin:30px auto 0;max-width:560px;font-size:15px}
.note{width:min(300px,82%);margin:52px auto 0;padding:46px 20px 50px;font-size:27px;font-weight:700;line-height:1.9;background:url('assets/deco/paper-card.png') center/100% 100%;transform:rotate(-3deg);filter:drop-shadow(0 10px 16px #6b57321e)}

/* 絵本「眠れない猫」 */
.story{padding:30px 14px 10px}
.chalkboard{--board-ratio:1222/1287;--board-x:22.2%;--board-r:20.7%;--board-y:20.6%;--board-b:41.8%;position:relative;width:min(340px,88vw);aspect-ratio:var(--board-ratio);margin:0 auto 26px;background:url('assets/deco/chalkboard.png') center/contain no-repeat}
.chalkboard h2{position:absolute;left:var(--board-x);right:var(--board-r);top:var(--board-y);bottom:var(--board-b);display:flex;flex-direction:column;justify-content:center;align-items:center;margin:0;text-align:center;color:#f4f1e6;font-size:clamp(25px,7vw,34px);font-weight:700;line-height:1.35;letter-spacing:.14em;text-shadow:0 0 1px #fff8}
.chalkboard .board-title{display:block;font-family:"Yusei Magic",var(--sans);font-size:clamp(23px,6.2vw,29px);font-weight:400;letter-spacing:.08em;padding-left:.08em;transform:rotate(-2deg)}
.chalkboard small{display:block;padding-left:.14em;font-size:clamp(12.5px,3.5vw,17px);letter-spacing:.14em;margin-bottom:6px;opacity:.9}
.book{max-width:560px;margin:0 auto}
.page{position:relative;display:block;margin:0 auto 34px;padding:12px;background:var(--paper-hi);box-shadow:0 2px 0 #e3d6b8,0 14px 26px #5c47241f;transform:rotate(-.8deg)}
.page+.page{transform:rotate(.8deg)}
.page::before{content:"";position:absolute;top:-12px;left:50%;width:96px;height:24px;transform:translateX(-50%) rotate(-3deg);background:#e8dcb6b8;box-shadow:0 1px 2px #0000000d}
.crop{display:block;overflow:hidden}
.crop img{width:100%}
.crop-top{aspect-ratio:721/888}
.crop-top img{margin-top:-8.738%}
.crop-bottom{aspect-ratio:710/893}
.story-end{text-align:center;margin:34px 0 0;font-family:"Yusei Magic",var(--sans);font-size:clamp(21px,6vw,26px);line-height:1.7;letter-spacing:.08em;color:#5a4632}
.sw-end{display:block;width:180px;height:24px;margin:6px auto 0}
.view-hint{text-align:center;font:500 13px var(--sans);letter-spacing:.08em;color:#fff;text-shadow:0 0 1px #4a3a28,0 0 3px #4a3a28d9,0 0 6px #4a3a28a6,0 1px 12px #4a3a2880;margin:2px 0 0}

/* 作品：マットに乗せて全体を見せる（切り抜かない） */
.art-button{display:block;width:100%;padding:0;border:0;background:none;text-align:inherit;position:relative;transition:transform .35s}
.art-button img{width:100%}
@media(hover:hover){.art-button:hover{transform:translateY(-3px)}}

.gallery{padding:40px var(--gutter) 10px}
.hanging-sign{position:relative;width:min(300px,80vw);aspect-ratio:3/2;margin:0 auto 40px;background:url('assets/deco/sign-hanging.png') center/contain no-repeat;font:italic 600 clamp(32px,9vw,44px)/1 var(--latin);letter-spacing:.06em;color:#5a4128}
.hanging-sign span{position:absolute;top:61%;left:53%;transform:translate(-50%,-50%);white-space:nowrap}
.gallery-lead{text-align:center;margin:0;font-size:clamp(19px,5.4vw,24px);font-weight:700;line-height:1.8;letter-spacing:.14em;padding-left:.14em}
.doodle.sw-gallery{display:block;width:150px;height:22px;margin:4px auto 34px}
.work-grid{columns:2;column-gap:16px;max-width:1000px;margin:0 auto}
.work{position:relative;break-inside:avoid;margin:0 0 28px}
.work .art-button{padding:7px;background:#fffdf7;box-shadow:0 2px 0 #e7dcc3,0 16px 30px #5e48231f}
.work::before{content:"";position:absolute;z-index:2;top:-7px;left:50%;width:58px;height:15px;transform:translateX(-50%) rotate(2deg);background:#e5d8b0b0;pointer-events:none}
.work figcaption{text-align:center;padding-top:10px}
.work h3{font-size:clamp(14px,3.9vw,18px);font-weight:700;letter-spacing:.1em;line-height:1.6}
.more-works{position:relative;z-index:1;display:table;margin:34px auto 0;padding:11px 30px;font-size:15px;letter-spacing:.12em;color:#5a4632;text-decoration:none;background:#efe3c8;border-radius:99px;box-shadow:0 3px 0 #dccdab,0 10px 18px #6b57321a}
.more-works span{margin-left:.4em}

/* 続きは絵本で…。／またね。 */
.farewell{position:relative;text-align:center}
.farewell::before{content:"";position:absolute;left:0;right:0;top:-40px;bottom:0;z-index:-1;background:linear-gradient(#f6efdfc4,#f6efdfc4),var(--paper) url('assets/deco/paper-cream.jpg') 0 0/900px auto;pointer-events:none}
/* 結び：開いたノートに、さいごのことばを書いて「またね。」で押印 */
.notebook{position:relative;aspect-ratio:1;margin:-80px 0 0;background:url('assets/deco/notebook-table.jpg') center/cover;-webkit-mask-image:linear-gradient(transparent,#000 24%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 24%,#000 88%,transparent);pointer-events:none}
.nb-page{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r)) skewX(var(--s,0deg));transform-origin:0 0;font-family:"Yomogi",var(--sans);color:#57524b;font-size:clamp(11px,3.1vw,17px);line-height:1.8;letter-spacing:.06em;text-align:left}
.nb-page p{--ink:#57524b;margin:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -0.55'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/140px,linear-gradient(var(--ink),var(--ink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.nb-left{--x:15.5%;--y:41.5%;--w:31%;--r:-9deg}
.nb-right{--x:54%;--y:36%;--w:31%;--h:38%;--r:-10deg;--s:3deg;height:var(--h)}
.nb-page p:not([class]){--ink:#1f1d1a}
.nb-hand{margin-top:.6em!important;font-size:1.3em;-webkit-text-stroke:.35px #57524b80;line-height:1.5}
.nb-bye{position:absolute;right:0;bottom:0;padding-right:1.15em;text-align:right;white-space:nowrap;font-size:1.9em;-webkit-text-stroke:.6px #57524b99;line-height:1.3;letter-spacing:.1em;color:#4a3a28}
.nb-stamp{position:absolute;right:0;bottom:-.3em;width:1.05em;height:1.15em;background:#b4523e;-webkit-mask:url('assets/paw-print.svg') center/contain no-repeat;mask:url('assets/paw-print.svg') center/contain no-repeat;opacity:.82;transform:rotate(-16deg);mix-blend-mode:multiply}

/* ===== Profile：森を閉じて、本人に出会う ===== */
/* Profile：絵本のさいごの「作者紹介」のページ */
.profile{position:relative;padding:40px 12px 36px;background:linear-gradient(#fbf6ea00,var(--paper-hi) 160px,var(--paper))}
.author-page{position:relative;max-width:920px;margin:0 auto;padding:34px 22px 38px;background:linear-gradient(#fffbf2e0,#fffbf2e0),url('assets/deco/paper-cream.jpg') 0 0/700px auto;border-radius:3px;box-shadow:0 1px 0 #e6dbc2,0 22px 44px #5e48231f}
.author-page::before{content:"";position:absolute;inset:9px;border:1px solid #dccfb3;border-radius:2px;pointer-events:none}
.author-eyebrow{margin:0 0 20px;text-align:center;font:italic 17px var(--latin);letter-spacing:.14em;color:#8a7258}
.author-grid{display:flex;flex-direction:column;align-items:center}
.author-side{display:contents}
.author-name{margin-top:26px;text-align:center}
.author-name h2{margin:0;padding-left:.22em;font-family:"Yomogi",var(--sans);font-size:clamp(32px,9vw,42px);font-weight:400;letter-spacing:.22em;color:#2e2b27}
.author-name p{margin:4px 0 0;font:italic 19px var(--latin);letter-spacing:.14em;color:#8a7258}
.doodle.sw-author{display:block;width:150px;height:22px;margin:8px auto 0}
.profile-copy{order:2;margin-top:30px;font-family:"Klee One",var(--sans);color:#2e2b27}
.profile-copy h3{margin:0 0 22px;text-align:center;font-size:clamp(21px,5.8vw,26px);font-weight:600;letter-spacing:.14em}
.profile-copy p{margin:0 0 20px;font-size:16px;line-height:2.2;letter-spacing:.06em}
.profile-copy br{display:none}
.vow{flex:1;margin:0;text-align:center;white-space:nowrap;font-family:"Klee One",var(--sans);font-weight:600;font-size:clamp(13.5px,3.9vw,18px);line-height:2;letter-spacing:.04em;color:#2e2b27}
.vow-sign{display:block;font-weight:400;margin-top:8px;padding-right:2%;text-align:right;font-size:.6em;letter-spacing:.24em}
.vow-sign::before{content:"―  "}
/* 決意のことばを、上の本文と分けるための短い細線（上下） */
.vow::before,.vow::after{content:"";display:block;width:52px;height:1px;margin:0 auto 14px;background:#c9b996}
.vow::after{margin:14px auto 0}
.photo{position:relative;background:#fffdf8;padding:10px 10px 30px;box-shadow:0 14px 28px #52452620}
.photo::before{content:"";position:absolute;top:-11px;left:50%;width:86px;height:22px;transform:translateX(-50%) rotate(-2deg);background:#e5d8b0b0}

/* ===== 水と光への転換（雫は一度だけ） ===== */
.water-transition{position:relative;overflow:hidden;padding:84px 20px 90px;text-align:center;font-family:var(--mincho);color:var(--hikari-ink);background:linear-gradient(var(--paper),#f6efdf00 12%,#f6efdf00 86%,var(--hikari)),url('assets/deco/pastel-water-tall.jpg') 50% 100%/cover no-repeat,var(--paper)}
.palette-intro p{margin:0;font-size:15px;line-height:2.3;letter-spacing:.16em}
.palette-intro .pi-lead{font-size:clamp(18px,5.2vw,23px);line-height:2.1;letter-spacing:.18em}
.pi-leaf{display:block;width:38px;height:19px;margin:26px auto;color:#7d8f6c}
.water-stage{position:relative;height:clamp(400px,110vw,560px)}
/* 雫がぽたっと落ち、水面に触れた瞬間、波紋といっしょに水面が虹色に広がる。背景の絵の波紋の位置に合わせ、数秒おきにくり返す（本人の判断で、一度だけのルールを変更） */
.water-ritual{position:absolute;inset:0;pointer-events:none;--wl:340px;--cx:50%;--ww:110vw}
.water-iris,.ripple{position:absolute;left:var(--cx);top:var(--wl);width:var(--ww);aspect-ratio:4.6/1;border-radius:50%;transform:translate(-50%,-50%)}
.water-iris{background:radial-gradient(closest-side,#ffffff 0,#fffdf6e6 22%,#fff1f8b0 42%,#eef8ffa0 58%,#fffbe860 74%,transparent);-webkit-mask:radial-gradient(closest-side,#000 40%,#000c 70%,transparent);mask:radial-gradient(closest-side,#000 40%,#000c 70%,transparent);opacity:0;transform:translate(-50%,-50%) scale(.04);filter:saturate(1.3) blur(3px)}
.ripple{background:linear-gradient(#fffffff0,#fffffff0);-webkit-mask:radial-gradient(closest-side,transparent 84%,#000 90%,#000 92%,transparent 98%);mask:radial-gradient(closest-side,transparent 84%,#000 90%,#000 92%,transparent 98%);opacity:0;transform:translate(-50%,-50%) scale(.06)}
.falling-drop{position:absolute;top:16px;left:calc(var(--cx) - 8px);width:16px;height:25px;border-radius:75% 75% 85% 85%;background:radial-gradient(circle at 32% 26%,#fff 8%,#e4f7f7 40%,#8cc4cd 92%);box-shadow:0 0 14px #fff,0 0 26px #d6ecec;opacity:0}
.water-contact{position:absolute;top:calc(var(--wl) - 8px);left:calc(var(--cx) - 8px);width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 22px 9px #fffbe8c0;opacity:0}
.water-transition.lit :is(.falling-drop,.water-contact,.water-iris,.ripple){animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:both}
.water-transition.lit .falling-drop{animation-name:fall}
.water-transition.lit .water-contact{animation-name:touch}
.water-transition.lit .water-iris{animation-name:iris}
.water-transition.lit .ripple-one{animation-name:ripple1}
.water-transition.lit .ripple-two{animation-name:ripple2}
.water-transition.lit .ripple-three{animation-name:ripple3}
@keyframes fall{0%{opacity:0;transform:translateY(-20px) scale(.7);animation-timing-function:cubic-bezier(.5,0,.9,.6)}5%{opacity:1;transform:translateY(0) scale(.85);animation-timing-function:cubic-bezier(.45,.05,.85,.6)}29.6%{opacity:1;transform:translateY(calc(var(--wl) - 16px - 25px)) scale(.92,1.06)}30.3%{opacity:0;transform:translateY(calc(var(--wl) - 16px - 16px)) scale(1.35,.5)}100%{opacity:0;transform:translateY(calc(var(--wl) - 32px)) scale(1.35,.5)}}
@keyframes touch{0%,29.6%{opacity:0;transform:scale(.3)}32%{opacity:1;transform:scale(1.2)}40%,100%{opacity:0;transform:scale(3.2)}}
@keyframes iris{0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.04);animation-timing-function:cubic-bezier(.16,.7,.25,1)}39%{opacity:.88}70%{opacity:.7;transform:translate(-50%,-50%) scale(1)}96%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes ripple1{0%,30%{opacity:0;transform:translate(-50%,-50%) scale(.06);animation-timing-function:cubic-bezier(.2,.6,.3,1)}34%{opacity:.95}70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes ripple2{0%,35%{opacity:0;transform:translate(-50%,-50%) scale(.06);animation-timing-function:cubic-bezier(.2,.6,.3,1)}39%{opacity:.88}80%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes ripple3{0%,41%{opacity:0;transform:translate(-50%,-50%) scale(.06);animation-timing-function:cubic-bezier(.2,.6,.3,1)}45%{opacity:.78}90%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.05)}}
.palette-heading{position:absolute;left:0;right:0;top:var(--ht,40%);z-index:1;margin:0;padding:20px 10px;background:radial-gradient(ellipse closest-side,#fbfaf6b8,#fbfaf600)}
.palette-heading p{margin:0 0 22px;font-size:clamp(18px,5vw,22px);line-height:2.1;letter-spacing:.2em}
.ph-script{display:block;font:clamp(30px,8.6vw,40px)/1.2 "Sacramento",var(--latin);color:#6f7d81;transform:rotate(-4deg)}
.palette-heading h2{margin:4px 0 0;font-size:clamp(22px,6.2vw,30px);font-weight:500;letter-spacing:.34em;padding-left:.34em;line-height:1.6}

/* ===== 光のパレット：作品とタイトルだけ ===== */
.hikari{padding:90px var(--gutter) 40px;font-family:var(--mincho);color:var(--hikari-ink);background:linear-gradient(#f7f8f5c8,#f7f8f5c8),url('assets/deco/hikari-light.jpg') 50% 0/cover fixed,var(--hikari)}
/* 作品たち：見出し → 作品カード（題名と「作品を見る」）→ 額装作品の写真 */
.h-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:40px}
.h-head h2{margin:0;font-size:clamp(24px,6.6vw,30px);font-weight:500;letter-spacing:.3em;padding-left:.3em}
.h-orn{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px}
.h-orn i{width:56px;height:1px;background:#9aa7aa80}
.h-orn b{width:6px;height:6px;border-radius:50%;background:#f3c3cf}
.h-orn b+b{background:#f6dcae}.h-orn b+b+b{background:#bcdcef}
.h-head-side{margin-top:18px}
.h-script{margin:0;font:clamp(30px,8vw,40px)/1 "Sacramento",var(--latin);color:#8d9a9d;transform:rotate(-6deg)}
.h-lead{margin:10px 0 0;font-size:13.5px;line-height:2.1;letter-spacing:.1em}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px 14px;max-width:1040px;margin:0 auto}
.h-card{margin:0;text-align:center}
.h-card .art-button{padding:6px;background:#fff;box-shadow:0 12px 30px #4555631a}
.h-card figcaption{padding-top:14px}
.h-card h3{margin:0;font-size:clamp(14px,3.9vw,17px);font-weight:500;letter-spacing:.14em}
.h-more{margin-top:10px;padding:7px 16px;border:0;border-radius:99px;font:inherit;font-size:12px;letter-spacing:.12em;color:#5e6a6d;background:#f6ecdc;box-shadow:0 3px 8px #6b57321f;cursor:pointer}
.h-more span{margin-left:.3em}
.h-collection{max-width:760px;margin:60px auto 40px}
.h-collection img{width:100%;box-shadow:0 20px 50px #45556312}
.hikari-closing{position:relative;padding:110px 20px 150px;text-align:center;font-family:var(--mincho);color:var(--hikari-ink);background:linear-gradient(var(--hikari),#f7f8f500 22%,#faf1dd00 82%,#faf1dd),url('assets/deco/hikari-meadow.jpg') 50% 100%/cover no-repeat,var(--hikari)}
.hikari-closing p{margin:0}
.hc-main,.hc-sub{text-shadow:0 0 6px #fffdf6,0 0 14px #fffdf6,0 0 24px #fffdf6cc}
.hc-main{font-size:clamp(21px,5.8vw,32px);letter-spacing:.18em}
.hc-sub{margin-top:22px!important;font-size:clamp(13px,3.6vw,16px);line-height:2.2;letter-spacing:.1em}
.hc-script{position:absolute;right:6%;top:30px;font:clamp(22px,5.6vw,34px)/1.15 "Sacramento",var(--latin);color:#8d9a9d;text-align:left;transform:rotate(-12deg)}

/* ===== Order ===== */
/* Order → SHOP／Instagram → 机の上のお礼カード → フッター（本人モック mock_order_footer.jpg） */
.order{position:relative;padding:70px var(--gutter) 30px;text-align:center;font-family:var(--mincho);color:#4a4239;background:url('assets/deco/order-paper-tall.jpg') 50% 0/100% auto no-repeat,#faf1dd}
.od-dandelion{display:block;width:96px;height:32px;margin:0 auto 22px;color:#8b8a6e}
.order h2{margin:0;font-size:clamp(22px,6.4vw,34px);font-weight:500;line-height:1.75;letter-spacing:.16em}
.od-lead{margin:22px 0 0;font-size:clamp(13px,3.6vw,16px);line-height:2.1;letter-spacing:.06em}
.od-rule,.foot-rule{display:block;width:160px;height:1px;margin:26px auto 0;background:linear-gradient(90deg,transparent,#a89c84,transparent)}
.od-mid{display:flex;flex-direction:column;align-items:center;gap:30px;margin-top:40px}
.od-photo{position:relative;width:min(70%,300px);margin:0;padding:9px 9px 34px;background:#fffdf7;box-shadow:0 14px 30px #5e48231f;transform:rotate(-5deg)}
.od-photo img{display:block;width:100%}
/* 写真の中のキャンバスだけをフレームに合わせ、約2°の傾きを直す（表示のみ。元画像は無加工） */
.od-crop{position:relative;display:block;aspect-ratio:990/1245;overflow:hidden;background:#e9e2d4}
.od-photo .od-crop img{position:absolute;max-width:none;width:111.9%;left:-5.6%;top:-12.85%;transform-origin:49.8% 52.9%;transform:rotate(2deg) scale(1.04)}
.od-photo figcaption{position:absolute;right:12px;bottom:4px;font:22px/1 "Sacramento",var(--latin);color:#8a7e6d;transform:rotate(-6deg)}
.od-side{margin:0;font-size:13.5px;line-height:2.1;letter-spacing:.14em}
.od-side span{display:block;margin-top:18px}
.site-exit{position:relative;padding:30px var(--gutter) 50px;text-align:center;font-family:var(--mincho);background:#faf1dd}
.doors{display:flex;flex-direction:column;gap:22px;max-width:320px;margin:0 auto 10px}
.door{display:flex;align-items:center;gap:16px;width:100%;padding:16px 26px;border:0;border-radius:60px;color:#fffaf0;font:20px var(--latin);letter-spacing:.16em;text-decoration:none;box-shadow:0 6px 14px #58462b2e}
.door-icon{width:26px;height:26px;flex:none}
.door-label{flex:1;text-align:left}
.shop{background:#5f7356}
.instagram{background:#cf7d63}
@media(hover:hover){.shop:hover{background:#536649}.instagram:hover{background:#bf6d54}}
.doors p{font-size:13px;line-height:1.8;letter-spacing:.14em;margin-top:10px;color:#6c6253}
footer{position:relative;display:flex;flex-direction:column;align-items:center;padding:26px 20px 40px;background:#faf1dd;font:12px/2 var(--sans);color:#4a4239}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0}
.foot-nav a{padding:0 12px;color:inherit;text-decoration:none;letter-spacing:.08em}
.foot-nav a+a{border-left:1px solid #b9ad95}
.foot-rule{width:90px;margin:16px auto 10px}
footer small{font-size:11px;color:#6c6253}
.foot-bye{display:flex;align-items:flex-end;gap:6px;margin:18px 0 0;font-family:"Yomogi",var(--sans);font-size:20px;letter-spacing:.12em;color:#6c6253}
.foot-bye svg{width:20px;height:28px;color:#8b8a6e}

/* ===== 拡大表示 ===== */
dialog{padding:0;border:0;width:min(1050px,96vw);max-height:94svh;overflow:hidden;background:#f8f4e9;color:var(--ink);box-shadow:0 25px 90px #0005}
dialog::backdrop{background:#21291ed9;backdrop-filter:blur(5px)}
.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#f8f4e9}
.viewer-bar h2{font-size:16px}
.viewer-bar button{border:1px solid #c9c4b5;background:none;padding:8px 14px;font:13px var(--sans)}
.viewer-scroll{overflow:auto;max-height:calc(94svh - 66px);padding:6px 10px 24px}
.viewer-scroll img{margin:auto}

/* ふわっと現れる（スクロールは奪わない） */
.reveal{transition:opacity .9s ease,translate .9s ease}
.reveal.awaiting{opacity:0;translate:0 24px}

/* ===== PC：横の景色と奥行き ===== */
@media(min-width:900px){
  :root{--gutter:6vw}
  .site-header{height:84px}
  .brand{font-size:23px;gap:14px}.brand img{width:46px;height:46px}
  .menu{display:none}
  nav{display:flex;position:static;flex-direction:row;gap:26px;padding:0;background:none;box-shadow:none;font:13px var(--sans);letter-spacing:.12em}
  nav a{padding:12px 0;border-bottom:1px solid transparent}
  nav a:hover,nav a.active{border-color:var(--green)}
  html{scroll-padding-top:90px}
  .entrance{height:auto}
  .entrance-stage{position:relative;top:0;height:clamp(680px,66.6vw,1000px)}
  .entrance-pan{width:100%;height:100%;aspect-ratio:auto;background-size:cover;background-position:50% 50%;transform:none}
  .entrance-sky{top:8%;left:9%;width:min(41%,600px);padding:30px 20px 34px}
  .entrance-title{width:100%}
  .entrance-lead{font-size:clamp(20px,1.8vw,26px)}
  .entrance-copy{font-size:16px}
  .village{padding-top:180px}
  .village::before{background-position:50% 0}
  .intro{padding:72px 70px 78px}
  .intro h2{font-size:28px}
  .intro br.sp{display:none}.intro p{font-size:16px}
  .paws{height:220px;width:360px}
  /* キャラクターは小道に沿って、左右にジグザグに出会う */
  .encounters{display:grid;grid-template-columns:1fr 1fr;column-gap:6%;max-width:1000px}
  .encounter{margin:0 0 30px;align-self:start}
  .encounter:nth-child(even){margin-top:180px}
  .encounter{padding:18px 22px 20px}
  .encounter:nth-child(odd){padding-right:56px}
  .encounter:nth-child(even){padding-left:56px}

  .nakama-title{width:620px;margin-bottom:70px}
  .encounter h3{font-size:34px}
  .meet{font-size:15px}
  .meet .name-tag{font-size:24px}

  .story-invitation{font-size:16px;margin-top:10px}
  .story-invitation br{display:inline}
  /* 開いた絵本の上に、左右のページとして置く */
  .story{padding-top:60px}
  .chalkboard{width:360px}
  .book{position:relative;max-width:1180px;aspect-ratio:3/2;display:grid;grid-template-columns:1fr 1fr;gap:3.4%;align-items:center;padding:4.2% 9.6% 7.6% 9.8%;background:url('assets/forest-book-v2.png') center/contain no-repeat}
  .page,.page+.page{margin:0;padding:0;background:none;box-shadow:none;transform:none}
  .page::before{display:none}
  .page .crop{box-shadow:0 0 0 1px #00000008}
  .story-end{font-size:28px;margin-top:40px}
  .page:first-child{transform:perspective(1400px) rotateY(3deg)}
  .page+.page{transform:perspective(1400px) rotateY(-3deg)}
  .gallery{max-width:1180px;margin:0 auto;padding-top:60px}
  .hanging-sign{width:360px;margin-bottom:60px}
  .water-transition{padding:120px 40px 170px;background-image:linear-gradient(var(--paper),#f6efdf00 14%,#f6efdf00 86%,var(--hikari)),url('assets/deco/pastel-water-wide.jpg')}
  .palette-intro p{font-size:17px}
  .palette-intro .pi-lead{font-size:26px}
  .water-stage{height:520px}
  .palette-heading h2{font-size:34px}
  .ph-script{font-size:46px}
  .palette-heading p{font-size:24px}
  .hikari{padding:120px max(6vw,calc((100vw - 1100px)/2)) 40px}
  .h-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:40px;margin-bottom:60px}
  .h-head-main{grid-column:2}
  .h-head-side{grid-column:3;display:flex;align-items:center;gap:22px;margin:0;text-align:left}
  .h-head h2{font-size:32px}
  .h-lead{margin:0;font-size:14px;white-space:nowrap}
  .h-grid{grid-template-columns:repeat(3,1fr);gap:56px 50px}
  .h-card .art-button{padding:9px}
  .h-card h3{font-size:18px}
  .h-collection{margin:90px auto 60px}
  .hikari-closing{padding:150px 20px 230px}
  .hc-script{right:12%;top:60px}
  .order{padding:110px var(--gutter) 180px;background:url('assets/deco/order-paper-wide.jpg') 50% 0/cover no-repeat,#faf1dd}
  .od-mid{position:relative;display:block;margin-top:10px;min-height:0}
  .od-photo{position:absolute;left:max(2%,calc(50% - 580px));top:-230px;width:260px}
  .od-side{position:absolute;right:max(4%,calc(50% - 540px));top:-170px;text-align:left}

  .doors{flex-direction:row;max-width:680px;gap:60px}
  .doors>div{flex:1}
  .order br.sp,.site-exit br.sp{display:none}
}
@media(min-width:1500px){.encounters{max-width:1100px}}

/* PCでは光を固定背景に。iOSは fixed が効かないので通常スクロールに戻す */
@supports (-webkit-touch-callout:none){.hikari{background-attachment:scroll}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .meet{opacity:1;transform:none}
  .entrance{height:auto}
  .entrance-stage{position:relative;top:0}
  .reveal.awaiting{opacity:1;translate:none}
  .falling-drop,.water-contact,.ripple{display:none}
  .water-iris{opacity:.45;transform:translate(-50%,-50%)}
}
@media print{.site-header,.menu,dialog,.down{display:none}.reveal.awaiting{opacity:1;translate:none}figure{break-inside:avoid}}

/* 道しるべと切り株 */
.trail{position:relative;max-width:620px;margin:0 auto}
.signpost{position:absolute;right:-6px;top:30px;width:min(130px,34vw)}
@media(min-width:900px){.signpost{width:170px;right:-40px}}

/* ===== 線のいたずら描き（ごじゃっぺ屋とOrderだけ） ===== */
.doodle{display:inline-block;color:#5a4632;pointer-events:none;overflow:visible}
.intro{position:relative}
.sw-intro{display:block;width:150px;height:22px;margin:-14px auto 18px}
.encounter figcaption{display:flex;align-items:center;gap:6px}
.mk-name{width:14px;height:26px;opacity:.75}
.encounter:nth-child(even) .mk-name{order:2;transform:scaleX(-1)}
.note{position:relative}
.mk-note{position:absolute;left:-6px;top:30px;width:18px;height:32px}
.note-lead{display:block;font-size:19px;font-weight:700;line-height:1.75;color:#6b5640}
.note-paw{display:block;width:20px;height:23px;margin:14px auto 12px;background:url('assets/paw-print.svg') center/contain no-repeat;opacity:.7;transform:rotate(-8deg)}
.lp-board{position:absolute;left:-22%;top:12%;width:44%;height:40px;opacity:.7}
.hanging-sign .doodle{position:absolute;width:26px;height:26px}
@media(min-width:900px){.lp-board{left:-28%}}

/* ===== 小道を Gallery までつなぐ（入口 → 説明 → キャラクター → 第1話 → Gallery） ===== */
/* 上下の端をなじませた小道の絵を縦に敷きつめる。最初は説明カードの後ろの「続きの絵」の下に重ねてなじませる */
.path-zone{position:relative}
.path-zone::before{content:"";position:absolute;left:0;right:0;top:clamp(500px,70vw,800px);bottom:0;z-index:-1;background:linear-gradient(#f6efdf4d,#f6efdf4d),url('assets/path-tile.jpg') 50% 0/max(100%,680px) auto repeat-y;-webkit-mask-image:linear-gradient(transparent 0,#000 220px,#000 calc(100% - 300px),transparent);mask-image:linear-gradient(transparent 0,#000 220px,#000 calc(100% - 300px),transparent);pointer-events:none}
/* 原画は白地を紙になじませて見せているので、後ろに淡い光を置いて絵の色を守る */
/* 地の上に直接のる文字は、ふちに淡い光をつけて読みやすく */
.path-zone .story-invitation>p:first-child,.path-zone .story-end,.path-zone .work figcaption,.path-zone .encounter h3{text-shadow:0 0 6px #fbf6ea,0 0 12px #fbf6ea,0 0 20px #fbf6eacc}


/* Gallery の手前で小道の絵をふわっと消し、紙だけにする */
.gallery{position:relative}
.gallery::after{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-300px;bottom:0;z-index:-1;pointer-events:none;background:linear-gradient(#f6efdfc4,#f6efdfc4),var(--paper) url('assets/deco/paper-cream.jpg') 0 0/900px auto;-webkit-mask-image:linear-gradient(transparent,#000 300px);mask-image:linear-gradient(transparent,#000 300px)}
@media(min-width:900px){.gallery-lead{font-size:28px}.doodle.sw-gallery{width:180px;height:26px;margin-bottom:56px}.work-grid{columns:3;column-gap:40px}.work{margin-bottom:46px}.work .art-button{padding:10px}.work h3{font-size:18px}}
@media(min-width:600px){.notebook{aspect-ratio:2/1;margin-top:-60px;background-image:url('assets/deco/notebook-wide.jpg')}.nb-page{font-size:clamp(10.5px,1.3vw,19px)}.nb-left{--y:38.5%;--r:-6deg;--s:3deg}.nb-right{--y:34%;--h:34.7%;--r:-7deg;--s:7deg}}
@media(min-width:600px) and (max-width:899px){.notebook{aspect-ratio:4/3;background-size:cover}.nb-page{font-size:clamp(11px,2vw,17px)}.nb-left{--x:19.3%;--w:27%}.nb-right{--x:52.3%;--w:28.5%}}
@media(min-width:900px){.notebook{aspect-ratio:5/3;background-size:cover}.nb-page{font-size:clamp(13px,1.45vw,21px)}.nb-left{--x:25.4%;--w:21.6%}.nb-right{--x:51.8%;--w:22.8%}}
.photo-main{width:min(74%,300px);margin:0;transform:rotate(-2deg)}
.author-foot{display:flex;align-items:center;gap:14px;margin-top:34px}
.photo-sub{flex:none;width:46%;max-width:250px;margin:0;padding-bottom:22px;transform:rotate(3deg)}
@media(min-width:900px){.profile{padding:80px var(--gutter) 50px}.author-page{padding:56px 70px 60px}.author-eyebrow{margin-bottom:46px}.author-grid{display:grid;grid-template-columns:.82fr 1fr;column-gap:72px;align-items:start}.author-side{display:flex;flex-direction:column;align-items:center}.photo-main{width:100%}.author-foot{justify-content:center;gap:70px;margin-top:50px}.photo-sub{width:260px}.profile-copy{margin-top:6px}.profile-copy h3{text-align:left;font-size:28px}.profile-copy p{font-size:17px}.profile-copy br{display:inline}.vow{flex:none;font-size:25px;letter-spacing:.08em}.author-foot br.sp{display:none}}