/* ============================================================
 * top.css — 星樹の森 トップページ
 *
 * ⚠️ このファイルは こまち（ChatGPT）が書いたものです。
 *    2026年8月12日 受領（星樹の森_TOP完成版）
 *    クロコが直したのは、次の2つだけです。
 *      ① 背景画像の置き場所を img/風景_秋_ユイノキ.jpg に
 *      ② いちばん下に「クロコの追記」を足した
 *
 *    ⚠️ 圧縮された書き方（1行が長い）のは、こまちの元のままです。
 *       見た目を変えたいときは、こまちに直してもらってください。
 * ============================================================ */

:root{--cream:#fff8e8;--ink:#18352e;--gold:#d8b46a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#101d19;color:var(--cream);font-family:"Yu Mincho","Hiragino Mincho ProN",serif}button,a{font:inherit}.forest,.scene{min-height:100svh;overflow:hidden}.scene{position:relative;isolation:isolate}.background,.time-wash{position:absolute;inset:0}.background{z-index:-5;background:url('../img/風景_秋_ユイノキ.jpg') center 58%/cover no-repeat;transform:scale(1.01)}.background:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,26,11,.2),rgba(24,27,11,.07) 36%,rgba(22,22,7,.1) 65%,rgba(13,17,8,.52))}.time-wash{z-index:-4;transition:1.2s;pointer-events:none}.time-morning .time-wash{background:linear-gradient(120deg,rgba(255,243,197,.12),rgba(166,199,141,.06));backdrop-filter:brightness(1.04) saturate(.94)}.time-day .time-wash{background:rgba(255,250,220,.02);backdrop-filter:brightness(1.07)}.time-evening .time-wash{background:linear-gradient(110deg,rgba(190,102,35,.06),rgba(101,62,83,.04))}.time-night .time-wash{background:linear-gradient(rgba(9,21,46,.52),rgba(7,24,32,.64));backdrop-filter:brightness(.58) saturate(.78)}
.topbar{position:absolute;z-index:20;inset:0 0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:28px 42px}.brand{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none;text-shadow:0 2px 18px #0008}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffeeb9ad;border-radius:50%;color:#f7d990}.brand b{display:block;font-size:19px;letter-spacing:.2em;font-weight:500}.brand small{display:block;margin-top:4px;font:8px Arial;letter-spacing:.28em;opacity:.78}
.sound-plaque{position:relative;display:flex;align-items:center;gap:9px;min-width:220px;padding:12px 42px 11px 18px;border:1px solid #d8b36d99;border-radius:45% 8px 40% 10px/18% 44% 20% 45%;color:#f9ebc7;background:linear-gradient(160deg,#6f492aee,#3d281aee);box-shadow:inset 0 0 18px #1e100999,0 7px 22px #0005;cursor:pointer;text-align:left;text-shadow:0 1px #1d1008}.sound-plaque:before,.sound-plaque:after{content:"";position:absolute;inset:4px;border:1px solid #d5a95a36;border-radius:inherit;pointer-events:none}.sound-plaque:after{inset:auto 10px 7px 22px;height:1px;border:0;background:#e3bd7559;box-shadow:28px -19px 0 #e3bd752c}.sound-leaves{position:absolute;left:-12px;top:-15px;color:#84975d;font-size:31px;transform:rotate(-18deg);filter:drop-shadow(0 2px 2px #16230f)}.sound-note{font-size:22px;color:#efd28c}.sound-copy small,.sound-copy strong{display:block}.sound-copy small{font-size:8px;letter-spacing:.15em;color:#dbc69a}.sound-copy strong{margin-top:2px;font-size:13px;font-weight:500;letter-spacing:.12em}.sound-state{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:8px Arial;letter-spacing:.08em;color:#bda878}.sound-plaque.is-on{filter:brightness(1.15);box-shadow:inset 0 0 22px #e5bd5333,0 0 22px #f6cf6b38}.sound-plaque.is-on .sound-state{color:#ffdc7b}
.welcome{position:absolute;z-index:8;top:19%;left:50%;width:min(680px,88vw);transform:translateX(-50%);text-align:center;text-shadow:0 2px 3px rgba(20,12,4,.94),0 5px 24px rgba(13,15,7,.9)}.eyebrow{margin:0 0 16px;font:9px Arial;letter-spacing:.38em;opacity:.92}.welcome h1{margin:0;color:#fffdf4;font-size:clamp(38px,4.6vw,72px);font-weight:400;letter-spacing:.12em;text-shadow:0 1px 1px rgba(37,20,6,.95),0 3px 8px rgba(23,15,6,.88),0 0 25px rgba(255,239,194,.26)}.welcome>p:not(.eyebrow){margin:19px 0 27px;color:#fff9e8;font-size:clamp(14px,1.25vw,19px);font-weight:500;line-height:2;letter-spacing:.12em;white-space:nowrap;text-align:center;text-shadow:0 1px 2px rgba(24,13,4,1),0 3px 12px rgba(14,12,5,.96)}.enter{display:inline-flex;gap:13px;align-items:center;color:#fff8df;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.16em;text-shadow:0 1px 2px #160d05,0 2px 8px #120e07;border-bottom:1px solid rgba(255,242,199,.8);padding:0 3px 8px}.enter span{animation:float 1.8s ease-in-out infinite}.mobile-break{display:none}
.haku{position:absolute;z-index:11;left:17%;bottom:4%;width:clamp(105px,10.5vw,172px);padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 8px 12px #040a084d);transition:.35s}.haku:hover{transform:translateY(-5px) rotate(-1deg)}.haku img{display:block;width:100%}.haku-bubble{position:absolute;left:8%;top:-18%;width:max-content;padding:9px 13px;border-radius:18px 18px 18px 4px;background:#fffbf1e8;color:#526058;font-size:11px;letter-spacing:.08em;animation:breathe 4s ease-in-out infinite}
.signposts{position:absolute;z-index:10;left:50%;bottom:2.5%;width:min(560px,48vw);height:250px;transform:translateX(-50%)}.post{position:absolute;z-index:0;left:calc(50% - 14px);bottom:-10px;width:28px;height:218px;border:1px solid #a27a46;background:linear-gradient(90deg,#392416,#81542e 40%,#5b351e 68%,#2d1a11);box-shadow:inset 4px 0 7px #160d08aa,6px 10px 15px #0006}.post-cap{position:absolute;z-index:1;left:calc(50% - 21px);top:11px;width:42px;height:22px;border-radius:50% 50% 20% 20%;background:linear-gradient(90deg,#3b2516,#896039,#3e2517);box-shadow:0 3px 5px #0006}.post-vine{position:absolute;z-index:3;left:calc(50% + 8px);bottom:31px;color:#687b49;font-size:51px;transform:rotate(68deg)}
.sign{position:absolute;z-index:2;left:50%;display:flex;align-items:center;width:286px;height:67px;padding:8px 27px;color:#f7e4b9;text-decoration:none;border:1px solid #d1a65c70;background:linear-gradient(178deg,#8a5a2cf2 0 16%,#62401ff2 18% 72%,#3d2818f2 75%);box-shadow:inset 0 0 20px #2b150999,3px 8px 13px #0007;text-shadow:0 1px 2px #211006;transition:.25s;clip-path:polygon(3% 4%,92% 0,100% 48%,93% 96%,4% 100%,0 49%)}.sign:before{content:"";position:absolute;inset:5px 12px;border-top:1px solid #efc06e34;border-bottom:1px solid #28170d70;clip-path:inherit}.sign:after{content:"";position:absolute;width:5px;height:5px;right:15px;top:13px;border-radius:50%;background:#c4a16a;box-shadow:0 0 0 1px #352014,0 37px 0 #b6925c,0 37px 0 1px #352014}.sign>span:last-child{flex:1;text-align:center}.sign strong,.sign small{display:block}.sign strong{font-size:15px;letter-spacing:.13em;font-weight:500}.sign small{margin-top:4px;color:#ddc494;font-size:9px;letter-spacing:.1em}.sign-arrow{width:28px;color:#edca80;font-size:34px;line-height:1}.sign-knot{position:absolute;width:19px;height:10px;left:61%;top:9px;border:1px solid #3b2415;border-radius:50%;opacity:.45}.sign-home{top:92px;margin-left:-296px;transform:rotate(-3deg)}.sign-tree{top:20px;margin-left:-143px;transform:rotate(.7deg)}.sign-tree .sign-arrow{transform:translateY(7px)}.sign-lake{top:97px;margin-left:10px;transform:rotate(3deg)}.sign-lake .sign-arrow{order:2;text-align:right}.sign:hover,.sign:focus-visible{filter:brightness(1.18);transform:translateY(-3px) rotate(0)}
.time-switcher{position:absolute;z-index:20;right:34px;bottom:28px;display:flex;align-items:center;gap:14px;padding:7px 8px 7px 16px;border:1px solid #fff5d854;border-radius:999px;background:#0c1d1973;backdrop-filter:blur(12px)}.time-switcher>span{font-size:9px;letter-spacing:.15em}.time-switcher>div{display:flex}.time-switcher button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;color:inherit;background:transparent;cursor:pointer;opacity:.64}.time-switcher b{font-weight:400}.time-switcher small{font-size:8px}.time-switcher .active{background:#fae3a533;opacity:1;box-shadow:inset 0 0 0 1px #ffe8a961}
.sunbeams{position:absolute;z-index:-2;inset:0;pointer-events:none;mix-blend-mode:screen}.sunbeams i{position:absolute;top:-20%;width:9vw;height:95%;background:linear-gradient(#ffedb329,transparent);filter:blur(8px);transform:rotate(18deg);animation:sway 9s ease-in-out infinite alternate}.sunbeams i:nth-child(1){left:36%}.sunbeams i:nth-child(2){left:49%;animation-delay:-3s}.sunbeams i:nth-child(3){left:62%;animation-delay:-6s}.time-night .sunbeams{opacity:.08}.stars{position:absolute;z-index:-1;top:11%;right:16%;font:18px/3 serif;letter-spacing:1.3em;opacity:0;transition:1s;animation:twinkle 3.6s ease-in-out infinite}.time-night .stars{opacity:.78}.lake-shimmer{position:absolute;z-index:2;right:6%;bottom:22%;width:31%;height:15%;pointer-events:none;overflow:hidden}.lake-shimmer i{position:absolute;right:5%;width:44%;height:1px;background:linear-gradient(90deg,transparent,#fff5c4e6,transparent);animation:ripple 5s ease-in-out infinite}.lake-shimmer i:nth-child(2){top:38%;right:28%;animation-delay:-1.7s}.lake-shimmer i:nth-child(3){top:68%;right:8%;animation-delay:-3.2s}.falling-leaves i{position:absolute;z-index:4;top:-5%;color:#b86834;font-size:9px;animation:fall 12s linear infinite}.falling-leaves i:nth-child(1){left:15%}.falling-leaves i:nth-child(2){left:72%;animation-delay:-4s}.falling-leaves i:nth-child(3){left:86%;animation-delay:-8s}.foreground{position:absolute;z-index:16;bottom:-10%;width:32%;height:40%;pointer-events:none;filter:blur(2px);opacity:.78;background:radial-gradient(ellipse at bottom,#09150ff5,transparent 66%)}.foreground-left{left:-8%;transform:rotate(8deg)}.foreground-right{right:-8%;transform:rotate(-8deg)}
.dialog-backdrop{position:fixed;z-index:50;inset:0;display:grid;place-items:center;padding:20px;background:#050f0d94;backdrop-filter:blur(8px)}.dialog-backdrop[hidden]{display:none}.dialog{width:min(430px,94vw);padding:38px 34px 30px;border:1px solid #e2c48580;border-radius:20px;background:linear-gradient(145deg,#fdf7e4fa,#e6dfc1f7);color:var(--ink);text-align:center;box-shadow:0 24px 80px #0006}.dialog-star{color:#ae7f34;font-size:20px}.dialog p{margin:14px 0;line-height:1.9}.dialog button{margin-top:12px;padding:10px 23px;border:1px solid #8e7042;border-radius:99px;background:transparent;color:#4b493a;cursor:pointer}
@keyframes float{50%{transform:translateY(5px)}}@keyframes breathe{50%{transform:translateY(-3px)}}@keyframes sway{to{transform:rotate(21deg) translateX(20px);opacity:.65}}@keyframes twinkle{50%{opacity:.35}}@keyframes ripple{50%{transform:translateX(-28px) scaleX(.7);opacity:.35}}@keyframes fall{to{transform:translate(11vw,110vh) rotate(520deg)}}
@media(max-width:720px){.background{background-position:44% center}.topbar{padding:18px;align-items:center}.brand b{font-size:15px}.brand-mark{width:32px;height:32px}.sound-plaque{min-width:0;width:52px;height:48px;padding:0;border-radius:43% 12px 40% 14px}.sound-copy,.sound-state{display:none}.sound-note{margin:auto}.sound-leaves{font-size:23px;left:-8px;top:-12px}.welcome{top:16%}.eyebrow{font-size:7px;letter-spacing:.25em}.welcome h1{font-size:clamp(34px,10vw,47px);letter-spacing:.06em}.welcome>p:not(.eyebrow){font-size:13px;line-height:1.9}.mobile-break{display:block}.haku{left:3%;bottom:29%;width:92px}.haku-bubble{top:-28%;font-size:10px}.signposts{left:53%;bottom:12%;width:330px;height:190px;transform:translateX(-50%) scale(.73);transform-origin:bottom}.sign-home{margin-left:-255px}.sign-tree{margin-left:-138px}.sign-lake{margin-left:-7px}.time-switcher{right:50%;bottom:14px;transform:translateX(50%)}.time-switcher>span{display:none}.foreground{height:30%;width:48%}.lake-shimmer{right:-8%;width:46%;bottom:26%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* TOP背景_基準.png 用レイアウト。背景・UI・キャラクターを独立レイヤーで管理する。 */
.background{background-image:url('../img/風景_秋_ユイノキ.jpg');background-position:center 52%;transform:scale(1.002)}
.background:after{background:linear-gradient(180deg,rgba(42,27,8,.2),transparent 27%,transparent 61%,rgba(20,16,7,.38))}
.time-morning .time-wash{background:linear-gradient(115deg,rgba(255,247,209,.08),rgba(255,225,151,.025));backdrop-filter:brightness(1.025) saturate(.96)}
.time-day .time-wash{background:rgba(255,250,220,.015);backdrop-filter:brightness(1.055)}
.time-evening .time-wash{background:linear-gradient(110deg,rgba(190,102,35,.12),rgba(101,62,83,.08));backdrop-filter:brightness(.86) saturate(.94)}
.time-night .time-wash{background:linear-gradient(rgba(9,21,46,.54),rgba(7,24,32,.68));backdrop-filter:brightness(.5) saturate(.72)}
.welcome{top:17%;left:50%;width:min(680px,88vw);padding:34px 36px;transform:translateX(-50%);text-align:center;background:radial-gradient(ellipse at 50% 46%,rgba(38,24,9,.62) 0%,rgba(40,25,9,.42) 45%,rgba(38,24,9,.16) 67%,transparent 76%);border-radius:42%}
.welcome h1{font-size:clamp(38px,4vw,64px);letter-spacing:.09em;white-space:nowrap}
.character-layer{position:absolute;z-index:11;inset:0;pointer-events:none}
.character-layer .haku{pointer-events:auto;left:15%;bottom:3%;width:clamp(100px,9vw,148px)}
.signposts{left:52%;bottom:1%}
.sign,.sound-plaque,.haku{touch-action:manipulation}
.sign:focus-visible,.sound-plaque:focus-visible,.haku:focus-visible,.time-switcher button:focus-visible,.enter:focus-visible{outline:3px solid #fff2ae;outline-offset:4px}

@media(max-width:900px){
  .welcome{left:50%;width:min(680px,90vw);padding:22px;transform:translateX(-50%);text-align:center}
  .welcome h1{font-size:clamp(32px,5vw,48px)}
  .welcome>p:not(.eyebrow){font-size:13px}
}

@media(max-width:720px){
  .scene{min-height:100svh;background:#261d0d}
  .background{inset:0 0 auto;height:64svh;background-color:#3b2d13;background-size:100% auto;background-position:center top;background-repeat:no-repeat;transform:none}
  .background:before{display:none}
  .background:after{background:linear-gradient(180deg,rgba(30,18,5,.22),transparent 35%,rgba(38,29,13,.06) 70%,#261d0d 100%)}
  .time-wash{height:64svh}
  .topbar{padding:15px 16px}
  .welcome{top:13%;left:50%;width:94vw;padding:22px 18px;transform:translateX(-50%);text-align:center;background:radial-gradient(ellipse,rgba(34,21,7,.68) 0%,rgba(36,22,8,.4) 52%,transparent 75%)}
  .welcome h1{font-size:clamp(32px,9.7vw,45px);white-space:normal}
  .welcome>p:not(.eyebrow){margin:10px 0 16px;font-size:clamp(10px,3vw,12px);line-height:1.75;letter-spacing:.06em}
  .enter{font-size:11px}
  .character-layer .haku{left:7%;bottom:34%;width:82px}
  .haku-bubble{display:none}
  .signposts{left:50%;bottom:9%;width:330px;height:190px;transform:translateX(-50%) scale(.72)}
  .time-switcher{bottom:11px}
  .foreground{display:none}
  .lake-shimmer{top:44%;right:2%;bottom:auto;width:36%;height:10%}
}

/* 参考TOPに寄せたヒーロー構成：中央コピー、左下ハク、右下案内板 */
@media(min-width:721px){
  .topbar{padding:24px 30px}
  .brand{gap:12px}
  .brand-mark{width:58px;height:58px;border-color:rgba(255,245,216,.86);background:rgba(72,40,15,.16);box-shadow:0 0 18px rgba(255,216,130,.18)}
  .brand-mark svg{width:42px;height:42px;fill:none;stroke:#fff8e7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .brand b{font-size:23px;letter-spacing:.24em}
  .brand small{font-size:8px;letter-spacing:.31em}

  .sound-plaque{min-width:190px;padding:12px 42px 12px 20px;border-radius:999px;border-color:rgba(230,190,105,.78);background:linear-gradient(165deg,rgba(112,70,32,.96),rgba(58,36,21,.97));box-shadow:inset 0 0 0 4px rgba(61,36,18,.34),inset 0 0 16px rgba(255,220,142,.08),0 8px 24px rgba(30,16,5,.35)}
  .sound-plaque:before{inset:4px;border-color:rgba(240,204,125,.35)}
  .sound-plaque:after{content:"❧  ❀";inset:-15px -9px auto auto;width:auto;height:auto;color:#8ca24f;background:none;border:0;font-size:22px;letter-spacing:8px;text-shadow:-130px 12px 0 #768c43;box-shadow:none}
  .sound-leaves{left:-10px;top:-11px;font-size:28px}
  .sound-note{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(245,209,133,.65);border-radius:50%;font:10px Arial;color:#ffe1a2}

  .welcome{top:14%;width:min(760px,72vw);padding:24px 38px 30px;background:radial-gradient(ellipse at 50% 45%,rgba(43,25,8,.44),rgba(36,22,7,.2) 48%,transparent 73%)}
  .welcome h1{font-size:clamp(54px,6vw,86px);letter-spacing:.1em;line-height:1.22}
  .welcome h1:after{content:"✦";display:block;width:min(470px,62vw);height:18px;margin:6px auto 0;color:#fff0bd;font-size:14px;line-height:18px;background:linear-gradient(90deg,transparent 0 3%,rgba(255,237,190,.7) 3% 47%,transparent 47% 53%,rgba(255,237,190,.7) 53% 97%,transparent 97%);text-shadow:0 0 10px #ffd475}
  .welcome>p:not(.eyebrow){margin:7px 0 18px;font-size:clamp(14px,1.35vw,18px);letter-spacing:.11em}
  .eyebrow{font-size:10px;letter-spacing:.45em}
  .enter{position:relative;left:auto;bottom:auto;transform:none;display:inline-grid;gap:5px;justify-items:center;margin-top:18px;padding:7px 16px 3px;border:0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.2em;white-space:nowrap;text-transform:none}
  .enter span{font-size:20px;line-height:1}

  .character-layer .haku{left:7%;bottom:3%;width:clamp(190px,19vw,300px);filter:drop-shadow(0 12px 18px rgba(12,8,4,.4))}
  .haku-bubble{left:-2%;top:14%;padding:12px 17px;border:1px solid rgba(151,107,54,.58);background:rgba(255,249,228,.91);color:#76532f;font-size:12px;transform:rotate(-7deg)}

  .signposts{left:auto;right:4.5%;bottom:8%;width:min(620px,52vw);height:190px;transform:none}
  .post,.post-cap,.post-vine{display:none}
  .sign{width:clamp(235px,23vw,320px);height:70px;margin:0;transform:none}
  .sign-tree{top:0;left:50%;transform:translateX(-50%)}
  .sign-home{top:auto;bottom:0;left:0}
  .sign-lake{top:auto;bottom:0;left:auto;right:0}
  .sign-tree:hover,.sign-tree:focus-visible{transform:translateX(-50%) translateY(-4px)}
  .sign-home:hover,.sign-home:focus-visible,.sign-lake:hover,.sign-lake:focus-visible{transform:translateY(-4px)}
  .sign strong{font-size:15px}
  .yui-emblem{width:34px!important;height:34px!important;left:13px!important;font-size:17px;border-color:rgba(237,204,134,.67)}
  .sign>span:last-child{padding-left:16px}

  .forest-switchers{right:24px;bottom:16px;opacity:.18;transition:opacity .25s}
  .forest-switchers:hover,.forest-switchers:focus-within{opacity:1}
}

@media(max-width:980px) and (min-width:721px){
  .character-layer .haku{left:3%;width:180px}
  .signposts{right:2%;width:56vw;transform:scale(.9);transform-origin:right bottom}
  .welcome{top:16%}
}

/* 星樹の森・公式案内板 */
.signposts{--board-gold:rgba(224,190,119,.72)}
.sign{
  overflow:hidden;
  height:72px;
  padding:9px 31px;
  border:1px solid var(--board-gold);
  border-radius:18px 13px 17px 12px/15px 18px 13px 17px;
  clip-path:none;
  color:#fff8df;
  background:
    radial-gradient(ellipse at 16% 31%,rgba(37,19,8,.34) 0 3px,transparent 4px),
    radial-gradient(ellipse at 78% 68%,rgba(32,16,7,.3) 0 2px,transparent 3px),
    repeating-linear-gradient(176deg,transparent 0 7px,rgba(255,231,181,.07) 8px,rgba(29,15,7,.11) 9px,transparent 11px),
    linear-gradient(165deg,#8d6038 0%,#694426 36%,#4a2f1d 76%,#352218 100%);
  box-shadow:inset 0 0 0 4px rgba(67,38,20,.33),inset 0 1px 0 rgba(255,235,191,.18),0 9px 18px rgba(17,10,5,.4);
  text-shadow:0 1px 2px rgba(27,14,6,.95),0 0 10px rgba(255,221,142,.12);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,filter .28s ease;
}
.sign:before{inset:5px;border:1px solid rgba(226,187,110,.36);border-radius:13px 9px 12px 8px;box-shadow:inset 0 0 16px rgba(255,222,156,.035)}
.sign:after{right:12px;top:14px;background:#bb9860;box-shadow:0 0 0 1px #392315,0 38px 0 #aa8754,0 38px 0 1px #392315}
.sign strong{color:#fffaf0;font-size:15px;letter-spacing:.14em;text-shadow:0 1px 2px #1d0e06,0 0 7px rgba(255,219,139,.14)}
.sign small{color:#eedaa9;font-size:9px;letter-spacing:.12em}
.sign-arrow{color:#f2d592;font-size:30px}
.yui-emblem{position:absolute!important;z-index:5;left:16px!important;top:50%!important;width:19px!important;height:19px!important;display:grid!important;place-items:center;transform:translateY(-50%);border:1px solid rgba(225,193,122,.46);border-radius:50%;color:#e7c77c;font-size:9px;line-height:1;background:rgba(48,29,16,.44);box-shadow:0 0 0 3px rgba(76,45,23,.23)}
.season-decor{opacity:.54;filter:saturate(.65) brightness(.86)}
.sign:hover,.sign:focus-visible{filter:none;border-color:rgba(255,222,151,.92);box-shadow:inset 0 0 0 4px rgba(67,38,20,.3),inset 0 0 24px rgba(255,221,143,.1),0 10px 22px rgba(17,10,5,.45),0 0 22px rgba(255,207,107,.2);transform:translateY(-4px) rotate(0)}
.sign:active{transform:translateY(-1px) scale(.99)}

@media(max-width:720px){
  .signposts{bottom:10%;transform:translateX(-50%) scale(.69)}
  .sign{height:74px}
  .character-layer .haku{left:5%;bottom:33%;width:clamp(84px,25vw,108px)}
  .haku-bubble{display:block;top:-22%;left:1%;font-size:10px;padding:7px 10px}
}

@media(max-width:420px) and (max-height:740px){
  .welcome{top:11%}
  .welcome .eyebrow{margin-bottom:9px}
  .character-layer .haku{bottom:32%}
  .signposts{bottom:8%;transform:translateX(-50%) scale(.66)}
}

/* 季節で表情が変わる木札 */
.forest{--wood-light:#84572f;--wood-mid:#5e4024;--wood-dark:#38271c;--leaf-a:#a38349;--leaf-b:#814d35;--leaf-stem:#5e603d;--season-glow:rgba(220,176,91,.08);--season-scene:transparent}
.season-spring{--wood-light:#856247;--wood-mid:#604732;--wood-dark:#392c24;--leaf-a:#c7a5a9;--leaf-b:#d9c9ad;--leaf-stem:#6c7b56;--season-glow:rgba(231,191,199,.07);--season-scene:rgba(255,218,226,.035)}
.season-summer{--wood-light:#74583a;--wood-mid:#4f3e2a;--wood-dark:#30271e;--leaf-a:#6c814c;--leaf-b:#89965a;--leaf-stem:#485c3e;--season-glow:rgba(126,163,82,.07);--season-scene:rgba(91,153,73,.03)}
.season-autumn{--wood-light:#895a30;--wood-mid:#604022;--wood-dark:#39271b;--leaf-a:#a98648;--leaf-b:#8b4e35;--leaf-stem:#62603b;--season-glow:rgba(217,153,62,.08);--season-scene:rgba(255,176,59,.018)}
.season-winter{--wood-light:#665345;--wood-mid:#483b33;--wood-dark:#2c2723;--leaf-a:#d4d9d5;--leaf-b:#8fa5a7;--leaf-stem:#617069;--season-glow:rgba(184,211,218,.07);--season-scene:rgba(183,222,235,.045)}
.scene:after{content:"";position:absolute;z-index:-3;inset:0;background:var(--season-scene);pointer-events:none;transition:background 1s ease}
.sign{overflow:visible;border-color:rgba(188,148,91,.42);background:
  radial-gradient(ellipse at 19% 28%,rgba(40,20,9,.2) 0 3px,transparent 4px),
  radial-gradient(ellipse at 77% 72%,rgba(35,17,7,.2) 0 2px,transparent 3px),
  repeating-linear-gradient(176deg,transparent 0 8px,rgba(255,224,165,.055) 9px,rgba(28,14,7,.07) 10px,transparent 12px),
  linear-gradient(178deg,var(--wood-light) 0 15%,var(--wood-mid) 18% 73%,var(--wood-dark) 77%);
  box-shadow:inset 0 1px 1px rgba(255,227,171,.16),inset 0 -4px 9px rgba(25,12,5,.38),0 8px 14px rgba(23,13,6,.38),0 0 10px var(--season-glow)}
.sign:before{inset:6px 13px;border-top-color:rgba(255,223,161,.21);border-bottom-color:rgba(25,13,7,.46);box-shadow:inset 0 0 10px rgba(255,226,164,.035)}
.sign-knot{width:22px;height:8px;border:0;background:radial-gradient(ellipse,rgba(39,23,13,.56) 0 16%,rgba(92,57,31,.32) 21% 42%,transparent 48%);opacity:.58}
.season-decor{position:absolute!important;z-index:4!important;inset:-3px!important;pointer-events:none;text-align:initial!important;opacity:.68;filter:saturate(.72) brightness(.9)}
.season-decor:before,.season-decor:after{content:"";position:absolute;width:34px;height:.7px;background:var(--leaf-stem);opacity:.65;transform-origin:left center}
.season-decor:before{left:7px;top:13px;transform:rotate(15deg)}
.season-decor:after{right:1px;bottom:12px;transform:rotate(192deg)}
.season-decor i{position:absolute;width:9px;height:5px;border-radius:82% 14% 78% 18%;background:linear-gradient(145deg,var(--leaf-a),var(--leaf-b));box-shadow:0 .5px 1px rgba(30,16,7,.38);transform-origin:bottom left}
.season-decor i:before{content:"";position:absolute;inset:48% 2px auto;height:.5px;background:rgba(54,48,27,.34);transform:rotate(-8deg)}
.season-decor i:after{content:"";position:absolute;left:-3px;bottom:0;width:4px;height:.7px;background:var(--leaf-stem);transform:rotate(25deg);transform-origin:right}
.season-decor i:nth-child(1){left:5px;top:5px;transform:rotate(-19deg) scale(.82)}
.season-decor i:nth-child(2){left:21px;top:10px;transform:rotate(34deg) scale(.58)}
.season-decor i:nth-child(3){right:10px;top:5px;transform:rotate(119deg) scale(.69)}
.season-decor i:nth-child(4){right:3px;bottom:5px;transform:rotate(159deg) scale(.78)}
.season-decor i:nth-child(5){right:26px;bottom:9px;transform:rotate(202deg) scale(.52)}
.sign-home .season-decor i:nth-child(3){display:none}.sign-home .season-decor:after{width:26px;bottom:10px}
.sign-tree .season-decor i:nth-child(2),.sign-tree .season-decor i:nth-child(4){display:none}.sign-tree .season-decor:before{left:13px;width:27px;transform:rotate(9deg)}
.sign-tree .season-decor i:nth-child(1){left:12px;top:7px}.sign-tree .season-decor i:nth-child(5){right:19px;bottom:7px}
.sign-lake .season-decor i:nth-child(1),.sign-lake .season-decor i:nth-child(5){display:none}.sign-lake .season-decor:before{left:18px;top:12px;width:23px}.sign-lake .season-decor i:nth-child(2){left:28px;top:9px;transform:rotate(43deg) scale(.54)}
.season-spring .season-decor{opacity:.58}.season-spring .season-decor i{width:7px;height:7px;border-radius:68% 24% 66% 28%;filter:brightness(1.02)}
.season-summer .season-decor{opacity:.72}.season-summer .season-decor i{width:10px;height:6px;border-radius:90% 8% 88% 10%}
.season-winter .season-decor{opacity:.6}.season-winter .season-decor i{width:7px;height:7px;border-radius:50%;background:radial-gradient(circle,#e7ebe8 0 24%,var(--leaf-b) 28% 43%,transparent 49%);box-shadow:none}
.season-winter .season-decor i:after{display:none}
.season-winter .season-decor:before,.season-winter .season-decor:after{background:#87998c}

/* 季節と時間をまとめた切替UI */
.forest-switchers{position:absolute;z-index:20;right:25px;bottom:20px;display:grid;gap:7px;justify-items:end}
.forest-switchers .time-switcher{position:static;right:auto;bottom:auto}
.season-switcher{display:flex;align-items:center;gap:14px;padding:7px 8px 7px 16px;border:1px solid rgba(255,245,216,.33);border-radius:999px;background:rgba(12,29,25,.48);backdrop-filter:blur(12px);box-shadow:0 6px 20px rgba(0,0,0,.12)}
.season-switcher>span{font-size:9px;letter-spacing:.15em}.season-switcher>div{display:flex}
.season-switcher button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;color:inherit;background:transparent;cursor:pointer;opacity:.64}
.season-switcher button b{font-size:14px;line-height:1;font-weight:400}.season-switcher button small{font-size:8px;margin-top:2px}
.season-switcher button.active{background:var(--season-glow);opacity:1;box-shadow:inset 0 0 0 1px rgba(255,236,179,.38)}

@media(max-width:720px){
  .forest-switchers{right:50%;bottom:8px;display:flex;gap:6px;transform:translateX(50%)}
  .forest-switchers .time-switcher{transform:none}
  .season-switcher{padding:5px 6px}.season-switcher>span{display:none}
  .season-switcher button,.forest-switchers .time-switcher button{width:33px;height:36px}
  .season-switcher button b,.forest-switchers .time-switcher button b{font-size:12px}
  .season-switcher button small,.forest-switchers .time-switcher button small{font-size:7px}
}

/* 最終配置補正（案内板の共通装飾より後に適用） */
@media(min-width:721px){
  .signposts{left:auto;right:4.5%;bottom:8%;width:min(620px,52vw);height:190px;transform:none}
  .sign{width:clamp(210px,23vw,320px);height:72px;margin:0;transform:none}
  .sign-tree{top:0;left:50%;transform:translateX(-50%)}
  .sign-home{top:auto;bottom:0;left:0}
  .sign-lake{top:auto;bottom:0;left:auto;right:0}
  .yui-emblem{left:13px!important;width:34px!important;height:34px!important;font-size:17px}
  .sign-tree:hover,.sign-tree:focus-visible{transform:translateX(-50%) translateY(-4px)}
  .sign-home:hover,.sign-home:focus-visible,.sign-lake:hover,.sign-lake:focus-visible{transform:translateY(-4px)}
  .forest-switchers{right:24px;bottom:16px;opacity:.18}
}

@media(max-width:980px) and (min-width:721px){
  .character-layer .haku{left:3%;width:clamp(190px,22vw,230px)}
  .signposts{right:2%;width:56vw;transform:scale(.9);transform-origin:right bottom}
  .sign-tree{transform:translateX(-50%)}
  .sign-tree:hover,.sign-tree:focus-visible{transform:translateX(-50%) translateY(-4px)}
}

.brand-mark svg{display:block;width:76%;height:76%;margin:auto;fill:none;stroke:#fff8e7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 参考画像に合わせた横長の公式案内板 */
.sign{
  overflow:visible;
  height:72px;
  padding:8px 54px 8px 68px;
  border:2px solid rgba(229,181,79,.92);
  border-radius:999px;
  background:
    radial-gradient(ellipse at 26% 32%,rgba(53,25,10,.3) 0 3px,transparent 4px),
    radial-gradient(ellipse at 72% 68%,rgba(48,22,8,.24) 0 2px,transparent 3px),
    repeating-linear-gradient(176deg,transparent 0 6px,rgba(255,226,161,.065) 7px,rgba(41,18,7,.08) 8px,transparent 10px),
    linear-gradient(176deg,#9b6332 0%,#77451f 50%,#542f18 100%);
  box-shadow:inset 0 0 0 3px rgba(79,40,17,.65),inset 0 0 0 4px rgba(241,197,99,.48),inset 0 5px 12px rgba(255,221,156,.07),0 8px 17px rgba(29,14,5,.38);
}
.sign:before{inset:5px;border:1px solid rgba(255,215,125,.45);border-radius:999px;box-shadow:none}
.sign:after{display:none}
.sign>span:last-child{padding:0!important;text-align:left}
.sign strong{font-size:15px;letter-spacing:.13em;line-height:1.35;white-space:nowrap}
.sign small{margin-top:2px;font-size:9px;letter-spacing:.1em;white-space:nowrap}
.yui-emblem{
  left:9px!important;
  width:51px!important;
  height:51px!important;
  border:1px solid rgba(251,219,144,.83)!important;
  color:#fff0c6;
  font-size:21px;
  background:radial-gradient(circle,rgba(126,76,34,.96),rgba(69,38,19,.98));
  box-shadow:inset 0 0 0 3px rgba(66,34,16,.5),0 0 0 2px rgba(239,190,92,.42),0 2px 8px rgba(25,12,5,.42)
}
.yui-emblem svg{width:34px;height:34px;fill:none;stroke:#fff2cf;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sign-knot{display:none}
.sign-arrow{
  position:absolute;
  right:9px;
  top:50%;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  order:initial!important;
  transform:translateY(-50%)!important;
  border:1px solid rgba(246,208,127,.72);
  border-radius:50%;
  color:#ffe9ae;
  background:rgba(69,37,18,.7);
  box-shadow:inset 0 0 0 3px rgba(42,22,11,.34),0 2px 7px rgba(24,12,5,.4);
  font:23px/1 serif;
  text-align:center
}
.sign-tree .sign-arrow{font-size:0}
.sign-tree .sign-arrow:before{content:"›";font-size:23px}
.season-decor{inset:-11px 4px!important;opacity:.9!important;filter:saturate(.82) brightness(1.02)!important}
.season-decor:before{left:5px;top:8px;width:54px;height:2px;background:linear-gradient(90deg,#65723f,#8b8248,transparent);transform:rotate(-3deg)}
.season-decor:after{right:6px;bottom:7px;width:43px;height:2px;background:linear-gradient(90deg,#65723f,#8b8248,transparent);transform:rotate(185deg)}
.season-decor i{width:12px;height:8px;box-shadow:0 1px 2px rgba(35,17,6,.5)}
.season-decor i:nth-child(1){left:2px;top:2px;transform:rotate(-18deg)}
.season-decor i:nth-child(2){left:27px;top:5px;transform:rotate(30deg) scale(.7)}
.season-decor i:nth-child(3){right:28px;top:2px;transform:rotate(120deg) scale(.8)}
.season-decor i:nth-child(4){right:1px;bottom:2px;transform:rotate(158deg)}
.season-decor i:nth-child(5){right:48px;bottom:6px;transform:rotate(205deg) scale(.65)}
.sign:hover,.sign:focus-visible{border-color:#f6cf75;box-shadow:inset 0 0 0 3px rgba(79,40,17,.6),inset 0 0 0 4px rgba(255,218,128,.68),inset 0 0 22px rgba(255,222,154,.1),0 9px 20px rgba(29,14,5,.42),0 0 20px rgba(255,203,98,.2)}

@media(max-width:720px){
  .sign{padding-left:68px;padding-right:54px}
  .yui-emblem{left:9px!important;width:51px!important;height:51px!important;font-size:21px}
  .sign-arrow{right:9px;width:35px;height:35px}
}

/* 丸型案内板の意匠は保ち、中央の木柱へ取り付ける */
.welcome h1:after{display:none!important}

@media(min-width:721px){
  .signposts{left:50%;right:auto;bottom:2.5%;width:min(680px,72vw);height:250px;transform:translateX(-50%)}
  .post{display:block;left:calc(50% - 14px);bottom:-10px;width:28px;height:218px}
  .post-cap{display:block;left:calc(50% - 21px);top:11px}
  .post-vine{display:block;left:calc(50% + 8px);bottom:31px}
  .sign{width:clamp(235px,25vw,305px)}
  .sign-home{top:105px;bottom:auto;left:50%;right:auto;margin-left:clamp(-322px,-27vw,-255px);transform:rotate(-3deg)}
  .sign-tree{top:20px;bottom:auto;left:50%;right:auto;margin-left:clamp(-153px,-12.5vw,-118px);transform:rotate(.7deg)}
  .sign-lake{top:105px;bottom:auto;left:50%;right:auto;margin-left:12px;transform:rotate(3deg)}
  .sign-home:hover,.sign-home:focus-visible,.sign-tree:hover,.sign-tree:focus-visible,.sign-lake:hover,.sign-lake:focus-visible{transform:translateY(-4px) rotate(0)}
}

@media(max-width:980px) and (min-width:721px){
  .signposts{left:50%;right:auto;width:min(650px,76vw);transform:translateX(-50%) scale(.9);transform-origin:center bottom}
}

/* 木柱を太くし、森の地面になじむ古木の質感へ */
@media(min-width:721px){
  .post{
    left:calc(50% - 25px);
    bottom:-18px;
    width:50px;
    height:230px;
    overflow:visible;
    border:1px solid rgba(120,77,40,.78);
    border-radius:13px 10px 8px 12px/7px 9px 13px 10px;
    background:
      radial-gradient(ellipse at 66% 29%,rgba(32,17,9,.7) 0 3px,rgba(114,73,38,.38) 4px 7px,transparent 8px),
      radial-gradient(ellipse at 31% 69%,rgba(37,19,9,.62) 0 2px,rgba(128,82,41,.28) 3px 6px,transparent 7px),
      repeating-linear-gradient(87deg,transparent 0 5px,rgba(255,213,142,.055) 6px,rgba(41,22,12,.14) 8px,transparent 11px),
      linear-gradient(90deg,#2d1a10 0%,#51301a 16%,#87562d 43%,#66401f 68%,#392217 91%,#26170f 100%);
    box-shadow:inset 7px 0 9px rgba(18,9,5,.55),inset -5px 0 8px rgba(20,10,5,.48),inset 0 0 3px rgba(246,198,119,.22),8px 12px 18px rgba(11,8,4,.48);
    transform:rotate(.35deg)
  }
  .post:before{
    content:"";
    position:absolute;
    inset:5px 6px;
    border-radius:inherit;
    opacity:.55;
    background:repeating-linear-gradient(92deg,transparent 0 7px,rgba(238,184,105,.13) 8px,transparent 9px 14px,rgba(24,13,7,.18) 15px,transparent 17px)
  }
  .post:after{
    content:"";
    position:absolute;
    z-index:-1;
    left:50%;
    bottom:-4px;
    width:78px;
    height:29px;
    transform:translateX(-50%);
    border-radius:48% 52% 42% 45%;
    background:radial-gradient(ellipse at center,rgba(40,25,13,.9) 0 35%,rgba(55,38,20,.64) 36% 55%,rgba(18,18,9,.28) 58%,transparent 72%);
    filter:blur(.3px)
  }
  .post-cap{
    left:calc(50% - 33px);
    top:5px;
    width:66px;
    height:31px;
    border:1px solid rgba(124,78,39,.76);
    border-radius:52% 48% 27% 25%/58% 58% 28% 30%;
    background:
      radial-gradient(ellipse at 48% 45%,rgba(40,21,10,.82) 0 5px,rgba(122,78,39,.44) 6px 12px,transparent 13px),
      radial-gradient(ellipse at center,#96643a 0%,#69401f 46%,#3a2214 78%,#23150e 100%);
    box-shadow:inset 0 2px 3px rgba(255,215,145,.16),inset 5px 0 6px rgba(29,15,8,.38),0 5px 8px rgba(20,11,6,.45);
    transform:rotate(-1deg)
  }
  .post-vine{left:calc(50% + 14px);bottom:27px;font-size:58px;filter:drop-shadow(1px 2px 2px rgba(17,13,6,.48))}
}

/* 背景の森になじませる控えめな柱仕上げ */
@media(min-width:721px){
  .signposts:before,.signposts:after{content:none}
  .post-cap,.post-vine{display:none}
  .post{
    top:auto;
    bottom:-22px;
    height:226px;
    border-color:rgba(77,50,28,.55);
    border-radius:11px 9px 16px 13px/8px 12px 18px 15px;
    opacity:.9;
    filter:saturate(.72) brightness(.82);
    box-shadow:inset 8px 0 10px rgba(14,8,5,.48),inset -6px 0 9px rgba(18,10,5,.42),inset 0 0 3px rgba(220,171,103,.12),5px 9px 13px rgba(12,9,5,.3)
  }
  .post:after{opacity:.55;filter:blur(1.2px)}
}


/* ============================================================
 * ここから下は クロコの追記です（こまちの部分は上まで）
 * ============================================================ */


/* ── ③ 📱 スマホの下半分が真っ黒でした ────────────────
   ⚠️ 2026-08-12 に確かめて見つけました。

      こまちのCSSは、スマホでは意図的にこうなっています。
        ・背景の絵は 上64% だけ（横長の全景を見せるため）
        ・その下は 暗い木の色（#261d0d）一色

      READMEにも「スマホでは横長背景の全景を優先し、
      木札を画面下部へ再配置」と書かれていて、意図どおりです。

   ⚠️ ただ実際に見ると、画面の下2/3が真っ黒で、
      ハクと案内板が暗闇に浮いて見えました。
      和美さんが大事にしている「森の中にいる感」と逆になります。

   → こまちの「全景を見せる」意図はそのままに、
      下の暗いところへ、同じ森をぼかして敷きます。
      森の奥に立って、遠くがぼんやり見えている感じです。 */
@media(max-width:900px){
  /* ⚠️ こまちのスマホ設計は「上に絵の全景、下は木の色の板」でした。
        でも実機で見ると、画面の下2/3が茶色一色で、
        ハクと案内板が暗がりに浮いて見えました。

     → 背景を画面いっぱいに広げます（PCと同じ形）。
        絵の全景は見えなくなりますが、
        和美さんが大事にしている「森の中にいる感」が保てます。 */
  .background{
    inset:0; height:auto;
    background-size:cover; background-position:52% center;
  }
  .background:after{
    background:linear-gradient(180deg,
      rgba(30,18,5,.26), transparent 30%,
      rgba(38,29,13,.10) 62%, rgba(20,14,6,.62) 100%);
  }
  .scene{background:#1a1408}
}

/* ── ① ⭐ 今日のおすすめの案内板が、ゆっくり光ります ────
   まだ名前がない人 → 🏠「ハクのおうちへ」
   もう名前がある人 → 🌊「星の湖へ」
   矢印もボタンも使わずに、森が「今日はこっちだよ」と教えてくれます。 */
.sign.lead{animation:signBreath 4.2s ease-in-out infinite}
@keyframes signBreath{
  0%,100%{filter:none}
  50%    {filter:drop-shadow(0 0 14px rgba(255,226,150,.55))}
}

/* ── ② 🌿 風景の下に続く言葉 ─────────────────
   ⚠️ こまちの提案5「トップを短い森歩きにする」。
      「森の小道を歩く ↓」を押すと、ここへ下りてきます。 */
.below{
  position:relative; overflow:hidden;
  padding:clamp(46px,9vh,84px) 22px clamp(50px,8vh,80px);
  text-align:center;
}
.below::before{
  content:""; position:absolute; inset:-14%;
  background:url('../img/風景_秋_ユイノキ@小.jpg') center 78% / cover no-repeat;
  filter:blur(26px) saturate(.62) brightness(.72);
  transform:scaleX(-1);
}
.below::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(16,29,25,.86) 0%, rgba(16,29,25,.72) 22%, rgba(16,29,25,.78) 100%);
}
.below>*{position:relative; z-index:1}

.below .words{font-size:clamp(15px,3.9vw,17px); line-height:2.15; letter-spacing:.07em;
              color:#efe4cf; max-width:30em; margin:0 auto}
.below .tagline{font-size:clamp(17px,4.4vw,21px); color:#d8b46a;
                letter-spacing:.16em; margin:clamp(26px,4.4vh,40px) 0}

.opening{display:inline-block; padding:clamp(15px,2.3vh,21px) clamp(28px,6.5vw,42px);
  border:1px solid #d1a65c55; border-radius:3px;
  background:rgba(30,44,38,.42); backdrop-filter:blur(8px)}
.opening .lb{font-size:12.5px; letter-spacing:.3em; text-indent:.3em; color:#c9bda4; margin-bottom:9px}
.opening .date{font-size:clamp(21px,5.6vw,27px); letter-spacing:.12em; color:#fff8e8}
.opening .growing{font-size:13px; color:#c0b49c; margin-top:10px}

.below footer{margin-top:clamp(34px,5.5vh,54px); font-size:12.5px;
              letter-spacing:.12em; color:#9d9483}

/* 🎨 2026-09-01・公式ロゴマーク（和美さん＋こまち決定・クロコ追記）
   左上の線画の紋章が、絵の公式ロゴになりました。
   ロゴ自体が金の円枠を持っているので、こまちの丸枠は消して絵をそのまま出します。
   ⚠️ こまちのCSS本体は書き換えず、末尾からの上書きだけにしています。 */
.brand-mark{border:none;background:none;box-shadow:none}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}

/* 🐉 守り龍から、今日のあなたへ（2026-09-03・和美さんのご希望・クロコ追記）
   「登録した人は、今日の自分の運勢どうだったかなって思う。
     TOPページに今日の言葉を出すようにできないかな」
   名前を書いた人にだけ、入口でも今日のことばに会えます。
   色は下の「森の扉がひらく日」の札（.opening）に合わせています。 */
.kyou-top{display:none; max-width:430px; margin:clamp(30px,5vh,46px) auto 0;
  padding:clamp(20px,3.4vh,28px) clamp(22px,5vw,34px);
  border:1px solid #d1a65c55; border-radius:3px;
  background:rgba(30,44,38,.42); backdrop-filter:blur(8px); text-align:center}
.kyou-top.show{display:block}
.kyou-top .lb{font-size:12.5px; letter-spacing:.28em; text-indent:.28em; color:#c9bda4; margin-bottom:14px}
.kyou-top img{width:64px; height:auto; display:block; margin:0 auto 10px}
.kyou-top .who{font-size:13px; letter-spacing:.2em; color:#c0b49c; margin-bottom:10px}
.kyou-top .kotoba{font-size:clamp(16.5px,4.4vw,18.5px); letter-spacing:.08em; color:#fff8e8; line-height:2}
.kyou-top .soe{font-size:14px; color:#d9cfba; line-height:2.05; margin-top:8px; text-wrap:pretty}
.kyou-top .more{display:inline-block; margin-top:14px; font-size:13.5px; letter-spacing:.14em;
  color:#d8b46a; text-decoration:none; border-bottom:1px solid #d1a65c88; padding-bottom:3px}
.kyou-top .more:hover{color:#fff8e8}

/* 🌏 2026-09-05・トップの追加文と、はじまりページへの入口（クロコ追記）
   文はこまちの確定版（依頼書5番）そのまま。こまちの本体CSSは無変更です。 */
.welcome .soe-msg{
  margin-top:14px; font-size:clamp(13.5px,3.6vw,15.5px); line-height:2.05;
  letter-spacing:.06em; color:#f4ecdc; text-shadow:0 2px 16px #000a}
.welcome .hajimari-in{
  display:inline-block; margin-top:14px; margin-left:18px;
  font-size:13.5px; letter-spacing:.14em; color:#ffe9b3;
  text-decoration:none; border-bottom:1px solid #ffe9b380; padding-bottom:3px;
  text-shadow:0 2px 14px #000a; transition:color .4s ease}
.welcome .hajimari-in:hover{color:#fff8e8}
@media (max-width:720px){
  .welcome .hajimari-in{display:block; margin-left:0; margin-top:12px}
}