/* https://wakulabo.com/ の ローディング（index.php） */
.ld { overflow: hidden; background: #bfe6fb; }
.ld-bg { position: fixed; inset: -3%; z-index: 0; background: var(--bg) center / cover no-repeat; animation: ld-breathe 9s ease-in-out infinite alternate; }
@keyframes ld-breathe { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.05) translate(-1%, -.6%); } }
.ld-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ld-rays { position: absolute; left: 50%; top: -30%; width: 160vmax; height: 160vmax; margin-left: -80vmax; mix-blend-mode: screen; opacity: .45; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 250, 210, .55) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 5%, transparent 55%); mask: radial-gradient(circle, #000 5%, transparent 55%); animation: ld-spin 40s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
.ld-cloud { position: absolute; top: 8%; width: 32vw; height: 10vw; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%); filter: blur(4px); animation: ld-cloud 38s linear infinite; }
.ld-cloud.c2 { top: 18%; width: 22vw; height: 7vw; animation-duration: 52s; animation-delay: -20s; opacity: .8; }
@keyframes ld-cloud { from { transform: translateX(-40vw); } to { transform: translateX(120vw); } }
.ld-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ld-main { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; padding: 20px; }
.ld .home-logo { animation: ld-logo .9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes ld-logo { from { transform: translateY(-40px) scale(.6); opacity: 0; } }
.ld .home-logo-img { animation: ld-bounce 2.4s 1s ease-in-out infinite; }
@keyframes ld-bounce { 50% { transform: translateY(-8px) rotate(-1deg); } }
.ld-go { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; width: min(460px, 86vw); animation: ld-logo .8s .4s cubic-bezier(.3, 1.6, .5, 1) both; }
.ld-bar { position: relative; width: 100%; height: 22px; border-radius: 99px; background: rgba(255, 252, 240, .92); box-shadow: inset 0 0 0 3px #fff, 0 0 0 3px #b8793e, 0 6px 0 #6b3a12, 0 12px 20px rgba(0, 0, 0, .2); }
.ld-bar i { position: absolute; left: 3px; top: 3px; bottom: 3px; width: 0; max-width: calc(100% - 6px); border-radius: 99px; background: repeating-linear-gradient(-45deg, #ffb13d 0 10px, #ff8a1f 10px 20px); animation: ld-stripe .6s linear infinite; }
@keyframes ld-stripe { to { background-position: 28px 0; } }
.ld-bar b { position: absolute; bottom: 6px; left: 0; width: 64px; transform: translateX(-50%); }
.ld-bar b img { width: 100%; display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .3)); animation: ld-run .32s ease-in-out infinite alternate; }
@keyframes ld-run { to { transform: translateY(-6px) rotate(3deg); } }
.ld-say { padding: 6px 18px; border-radius: 99px; background: rgba(255, 252, 240, .95); color: #6b3a12; font-weight: 900; font-size: clamp(14px, 1.6vw, 18px); box-shadow: 0 3px 0 #d8b27a; }
.ld.is-leave .ld-main { animation: ld-out .6s ease-in forwards; }
.ld.is-leave .ld-bg { animation: ld-zoom .65s ease-in forwards; }
@keyframes ld-out { to { transform: scale(1.3); opacity: 0; } }
@keyframes ld-zoom { to { transform: scale(1.35); filter: brightness(1.6); opacity: .0; } }
@media (max-width: 720px) { .ld-bar b { width: 48px; } }
@media (prefers-reduced-motion: reduce) { .ld-bg, .ld-rays, .ld-cloud, .ld .home-logo-img, .ld-bar b img { animation: none; } }
@media (max-width: 720px) { .ld-bg { background-position: 28% center; } .ld-main { justify-content: flex-start; padding-top: 12vh; } }

/* ===== 入口のコピー・エリアバッジ・横展開の導線（2026-09-27） ===== */
.ld-main { gap: 2.2vh; }
.ld-copy { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 30px 18px; border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, rgba(255, 252, 244, .86), rgba(255, 246, 226, .72)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8), 0 10px 30px rgba(60, 40, 10, .18); backdrop-filter: blur(3px);
  animation: ld-logo .8s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.ld-main-copy { margin: 0; font-weight: 900; font-size: clamp(15px, 1.7vw, 21px); line-height: 1.35; color: #6b3a12; letter-spacing: .06em; }
.ld-main-copy b { display: block; margin-top: 2px; font-size: clamp(26px, 3.4vw, 44px); letter-spacing: .04em;
  background: linear-gradient(90deg, #ff5a8a, #ff8a1f 30%, #ffb000 50%, #2dbd6e 70%, #2f8bff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 5px 6px rgba(90, 50, 10, .3)); }
.ld-sub-copy { position: relative; margin: 0; padding: 4px 18px; border-radius: 99px; background: #fff; color: #2a9d48; font-weight: 900; font-size: clamp(13px, 1.3vw, 16px); box-shadow: 0 3px 0 #bfe3c6; }
.ld-area { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px 0 8px; border: 0; border-radius: 99px; cursor: pointer; font: inherit; font-weight: 900; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, #4f9dff, #1f6fe0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #0f4aa8, 0 8px 14px rgba(15, 74, 168, .3); transition: transform .2s cubic-bezier(.3, 1.8, .5, 1); }
.ld-area:hover { transform: translateY(-2px) scale(1.03); } .ld-area:active { transform: translateY(3px); box-shadow: 0 1px 0 #0f4aa8; }
.ld-area img { width: 28px; height: 28px; } .ld-area i { font-style: normal; font-size: 10px; opacity: .85; }
.ld-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); text-align: center; background: linear-gradient(180deg, transparent, rgba(40, 25, 5, .45)); }
.ld-foot a { color: rgba(255, 255, 255, .92); font-size: 11.5px; font-weight: 700; text-decoration: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.ld-foot a:hover { text-decoration: underline; }
.ld-mdl { width: min(440px, calc(100% - 32px)); padding: 26px 22px 22px; border: 0; border-radius: 26px; text-align: center; font-family: "M PLUS Rounded 1c", sans-serif; color: #3b2a14;
  background: linear-gradient(180deg, #fffaf0, #fbefd8); box-shadow: inset 0 0 0 3px #f1d9a8, 0 20px 50px rgba(0, 0, 0, .35); }
.ld-mdl::backdrop { background: rgba(30, 20, 5, .5); backdrop-filter: blur(2px); }
.ld-mdl[open] { animation: ld-logo .45s cubic-bezier(.3, 1.6, .5, 1); }
.ld-mdl-x { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #fff; color: #8a5424; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 2px #e3d6bd; }
.ld-mdl-tag { margin: 0 0 10px; font-weight: 900; font-size: 13px; color: #8a7a60; }
.ld-areas { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.ld-areas li { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px #efe0c2; text-align: left; }
.ld-areas li img { width: 26px; height: 26px; } .ld-areas li b { flex: 1; font-size: 15px; }
.ld-areas li em { font-style: normal; font-size: 11px; font-weight: 900; padding: 2px 9px; border-radius: 99px; background: #e6efff; color: #1f6fe0; }
.ld-areas li.is-soon { opacity: .6; border: 2px dashed #d8c8a8; box-shadow: none; } .ld-areas li.is-soon em { background: #eee8dc; color: #8a7a60; }
.ld-mdl h2 { margin: 0 0 8px; font-size: 24px; font-weight: 900; line-height: 1.3; color: #ff5a3c; }
.ld-mdl p { margin: 0 0 16px; font-size: 13.5px; font-weight: 700; line-height: 1.7; color: #5a4a36; }
.ld-mdl-go { display: block; padding: 15px; border-radius: 16px; color: #fff; font-weight: 900; font-size: 17px; text-decoration: none; background: linear-gradient(180deg, #ffa14a, #f07400); box-shadow: 0 5px 0 #c45f00, 0 10px 18px rgba(255, 138, 31, .3); }
@media (max-width: 720px) {
  .ld-main { padding-top: 7vh; gap: 14px; }
  .ld .home-logo-img { width: min(70vw, 280px); }
  .ld-copy { padding: 12px 16px 14px; gap: 8px; width: min(92vw, 380px); box-sizing: border-box; }
  .ld-main-copy b { font-size: 24px; }
  .ld-foot a { font-size: 10px; }
}
.ld-go { margin-top: 40px; }
@media (max-width: 720px) { .ld .home-takimin { top: auto; bottom: 90px; right: 8px; width: 80px; } .ld-go { margin-top: 30px; } }
/* 2026-09-27：新ロゴ（こどものための まちマップ）＋ エリアだけ ポップな札に */
.ld .ld-logo-img { width: min(640px, 56vw); filter: drop-shadow(0 10px 18px rgba(60, 30, 5, .3)); }
.ld .home-logo { gap: 0; }
.ld-area { min-height: 54px; padding: 0 22px 0 10px; font-size: clamp(16px, 1.7vw, 21px); letter-spacing: .03em;
  background: linear-gradient(180deg, #ffb13d, #ff7a1f); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 0 0 4px #fff, 0 7px 0 #c45f00, 0 12px 20px rgba(196, 95, 0, .35);
  text-shadow: 0 2px 0 rgba(150, 60, 0, .45); animation: ld-logo .8s .35s cubic-bezier(.3, 1.6, .5, 1) both, ld-area-bob 2.8s 1.4s ease-in-out infinite; }
@keyframes ld-area-bob { 50% { transform: translateY(-4px) rotate(-1deg); } }
.ld-area img { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); animation: ld-pin 1.4s ease-in-out infinite; }
@keyframes ld-pin { 50% { transform: translateY(-5px); } }
@media (max-width: 720px) { .ld .ld-logo-img { width: 92vw; } .ld-area { font-size: 15px; min-height: 48px; padding: 0 16px 0 8px; } .ld-area img { width: 28px; height: 28px; } }
/* 背景動画（assets/rpg/background/home-loop.mp4）があるとき：動画が主役。雲の飾りは出さない。スマホは 男の子とネズミが 真ん中に くる画角 */
.ld-bg.has-video { animation: none; inset: 0; }
.ld-bg.has-video .ld-cloud, .ld-bg.has-video .ld-rays { display: none; }
.ld-video { object-position: 50% 50%; }
@media (max-width: 720px) { .ld-video { object-position: 21% 50%; } .ld-bg.has-video { background-position: 21% center; } }
@media (min-width: 721px) and (max-width: 1080px) and (orientation: portrait) { .ld-video { object-position: 30% 50%; } }
@media (max-width: 720px) {
  .ld-main { padding-top: 4vh; gap: 8px; }
  .ld .ld-logo-img { width: 86vw; }
  .ld-go { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); margin: 0; }
  .ld .home-takimin { bottom: 150px; }
}
/* 右下：他地域むけ「あなたの町にもわくラボを」バナー */
.ld-saas { position: fixed; right: 20px; bottom: 44px; z-index: 4; width: min(340px, 26vw); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 3px #fff, 0 14px 30px rgba(60, 30, 5, .35);
  animation: ld-saas-in .8s 1.2s cubic-bezier(.3, 1.6, .5, 1) both; transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); }
.ld-saas img { display: block; width: 100%; height: auto; }
.ld-saas:hover { transform: translateY(-4px) rotate(-1deg) scale(1.03); }
@keyframes ld-saas-in { from { transform: translateY(40px) scale(.7); opacity: 0; } }
.ld.is-leave .ld-saas { opacity: 0; transition: opacity .3s; }
@media (max-width: 1080px) and (min-width: 721px) { .ld-saas { width: 34vw; } }
@media (max-width: 720px) { .ld-saas { width: 44vw; right: 8px; bottom: 124px; border-radius: 12px; } .ld .home-takimin { display: none; } }
/* しゅっぱつ！（大きなCTA・ロゴの下）／エリア札は 下（ゲージの上）へ */
.ld-cta { display: inline-flex; align-items: center; gap: 12px; min-height: 76px; padding: 0 30px 0 22px; border-radius: 99px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #ffb13d 0%, #ff8a1f 55%, #f06a00 100%); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), 0 0 0 5px #fff, 0 9px 0 #b8520a, 0 16px 26px rgba(184, 82, 10, .4);
  animation: ld-logo .8s .35s cubic-bezier(.3, 1.6, .5, 1) both, ld-cta-pulse 1.6s 1.3s ease-in-out infinite; transition: transform .15s; }
.ld-cta b { font-weight: 900; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .08em; text-shadow: 0 3px 0 #b8520a, 0 0 1px #b8520a; }
.ld-cta-ic { font-size: clamp(28px, 3vw, 38px); animation: ld-rocket 1s ease-in-out infinite alternate; }
.ld-cta i { font-style: normal; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #f06a00; font-weight: 900; font-size: 28px; line-height: 1; }
.ld-cta:hover { transform: translateY(-3px) scale(1.04); } .ld-cta:active { transform: translateY(6px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .55), 0 0 0 5px #fff, 0 2px 0 #b8520a; }
@keyframes ld-cta-pulse { 50% { transform: scale(1.05); } }
@keyframes ld-rocket { to { transform: translate(3px, -4px) rotate(8deg); } }
.ld-area { animation: none; min-height: 44px; font-size: clamp(14px, 1.3vw, 17px); background: linear-gradient(180deg, #4f9dff, #1f6fe0); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 0 0 3px #fff, 0 5px 0 #0f4aa8; text-shadow: none; }
.ld-go { margin-top: 26px; }
@media (max-width: 720px) {
  .ld-cta { min-height: 64px; padding: 0 20px 0 16px; } .ld-cta b { font-size: 30px; }
  .ld-go { bottom: 50px; } .ld-area { position: fixed; left: 50%; bottom: 128px; transform: translateX(-50%); white-space: nowrap; font-size: 13px; min-height: 40px; }
  .ld-saas { bottom: 184px; }
}
.ld-cta-ic { width: clamp(38px, 3.6vw, 50px); height: auto; }
.ld-bar b img { transform: scaleX(-1); }
/* 中央下：Produced by Forwards */
.ld-foot { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ld-credit { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 99px; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); text-shadow: none !important; }
.ld-credit small { font-size: 10px; font-weight: 700; color: #8a7a60; letter-spacing: .05em; }
.ld-credit img { height: 16px; width: auto; display: block; }
.ld-credit span { font-size: 10.5px; font-weight: 800; color: #5a4a36; }
@media (max-width: 720px) { .ld-go { bottom: 74px; } .ld-area { bottom: 150px; } .ld-saas { bottom: 204px; } .ld-credit img { height: 13px; } }
@media (max-width: 720px) { .ld-area { bottom: 168px; } .ld-saas { bottom: 222px; } }
/* ブゥが 右へ てくてく（コマ送り）。左右反転は しない */
.ld-bar b img { transform: none; animation: ld-walk .34s ease-in-out infinite alternate; }
@keyframes ld-walk { to { transform: translateY(-3px); } }
.ld-bar b { width: 70px; }
@media (max-width: 720px) { .ld-bar b { width: 56px; } }