html {
      transition: font-size 0.3s ease;
      scroll-behavior: smooth;
    }
    html.text-large-mode {
      font-size: 115%;
    }
    ::-webkit-scrollbar {
      width: 5px;
      height: 5px;
    }
    ::-webkit-scrollbar-track {
      background: #fafaf8;
    }
    ::-webkit-scrollbar-thumb {
      background: #c85a3a;
      border-radius: 2px;
    }
    .grid-bg {
      background-image: radial-gradient(#c85a3a 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.04;
    }
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .animate-fade-in-up {
      animation: fadeInUp 0.6s ease-out forwards;
    }
    @keyframes slowZoom {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1); }
    }
    .hero-zoom-img {
      animation: slowZoom 20s ease-in-out infinite;
      will-change: transform;
    }
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-100%); }
    }
    .marquee-container {
      display: flex;
      overflow: hidden;
      white-space: nowrap;
      width: 100%;
    }
    .marquee-content {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      animation: marquee 25s linear infinite;
    }
    .char-anim {
      display: inline-block;
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .js-text-anime:not(.is-ready) {
      opacity: 0;
    }
    .js-text-anime.is-active .char-anim {
      opacity: 1;
      transform: translateY(0);
    }
    .js-fade-up {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .js-fade-up.is-active {
      opacity: 1;
      transform: translateY(0);
    }
    .swiper-button-next, .swiper-button-prev {
      color: #c85a3a !important;
      background-color: rgba(250, 250, 248, 0.8);
      width: 40px !important;
      height: 40px !important;
      border-radius: 50%;
    }
    .swiper-button-next::after, .swiper-button-prev::after {
      font-size: 16px !important;
      font-weight: bold;
    }
    .swiper-pagination-bullet-active {
      background: #c85a3a !important;
    }
    details > summary {
      list-style: none;
    }
    details > summary::-webkit-details-marker {
      display: none;
    }

    /* SEO/クローラー対策: JSが無効な環境ではアニメーションによる非表示を解除し、全てのコンテンツを最初から表示する */
    .no-js .js-fade-up,
    .no-js .char-anim,
    .no-js .js-text-anime,
    .no-js .animate-fade-in-up {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
      animation: none !important;
    }
    .no-js #splash-screen {
      display: none !important;
    }
    /* 2026 refresh: existing utilities and interaction classes remain intact. */
    :root {
      --street-line: #e7dfd4;
      --street-shadow: 0 8px 28px -16px rgba(83, 54, 33, .24);
      --street-ease: cubic-bezier(.22, 1, .36, 1);
    }
    html { scroll-padding-top: 104px; }
    ::selection { background: #f2d8c6; color: #512d23; }
    #root > section { padding-block: clamp(4rem, 7.5vw, 7rem); border-color: var(--street-line); }
    #root > section:first-of-type {
      padding-top: clamp(8rem, 13vw, 11rem);
      background: radial-gradient(ellipse at 95% 20%, #f4e4d3 0, transparent 55%),
                  linear-gradient(135deg, #fafaf8, #fbf8f2);
    }
    #root > section.bg-minimal-gray {
      background: linear-gradient(135deg, #f5f3ed, #f8f5ee);
    }
    #root > section .grid > * { min-width: 0; }
    #root > section h2 { line-height: 1.65; letter-spacing: .07em; text-wrap: balance; }
    #root > section:first-of-type h2 { line-height: 1.6; letter-spacing: .035em; }
    #root > section p.font-light { font-weight: 400; line-height: 1.95; }
    #root > section .text-center.mb-16 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
    #root > section .text-center > span.uppercase { letter-spacing: .24em; }
    #root > section .text-center > .w-12 {
      width: 3.5rem; height: 3px; border-radius: 3px;
      background: linear-gradient(90deg, #b64f35, #dfaa70);
    }
    /* Heading rules expand from the center using the existing scroll observer. */
    #root > section .text-center > .w-12.js-fade-up {
      transform: scaleX(0);
      transform-origin: center;
      transition: transform .8s var(--street-ease), opacity .5s ease;
    }
    #root > section .text-center > .w-12.js-fade-up.is-active {
      transform: scaleX(1);
    }
    #root > nav {
      border-color: var(--street-line);
      box-shadow: 0 4px 24px -16px rgba(64, 43, 29, .28);
    }
    #root > nav > div:first-child { gap: 1rem; }
    #root > nav > div:first-child > div:first-child { min-width: 0; }
    #mobile-toggle { flex-shrink: 0; min-width: 44px; min-height: 44px; }
    #mobile-menu { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }
    #mobile-menu > :is(a, button) { min-height: 44px; border-radius: .5rem; }
    #root > section .rounded.border,
    #root > section .rounded.shadow-md,
    #root > section .rounded.shadow-lg,
    #root > section .rounded.shadow-xl {
      border-radius: 1rem;
      border-color: var(--street-line);
      box-shadow: var(--street-shadow);
    }
    #root > section:first-of-type .shadow-2xl {
      border-radius: 1.25rem;
      box-shadow: 0 22px 48px -24px rgba(82, 48, 28, .4);
      outline: 1px solid rgba(116, 77, 43, .12);
    }
    #root :is(a, button).rounded { border-radius: .55rem; }
    #root :is(a, button) {
      transition-property: color, background-color, border-color, box-shadow, opacity, transform;
      transition-duration: 220ms;
    }
    #root :is(a, button).bg-minimal-accent {
      background-image: linear-gradient(120deg, rgba(255,255,255,.05), rgba(95,30,17,.12));
      box-shadow: 0 5px 14px -7px rgba(149, 61, 35, .5);
    }
    :is(a, button, summary, input, select, textarea):focus-visible {
      outline: 2px solid #c85a3a !important; outline-offset: 4px;
    }
    #news-container { scrollbar-gutter: stable; }
    #news-container details { padding: .75rem .25rem 1rem; border-color: var(--street-line); }
    #news-container time { color: #787168; }
    #contact {
      background: radial-gradient(ellipse at 90% 0, rgba(174,91,57,.17), transparent 65%), #292723;
    }
    #contact > div > .shadow-xl { border-top: 3px solid #c85a3a; }
    #contact-form :is(input, select, textarea) { border-radius: .5rem .5rem 0 0; font-weight: 400; }
    #contact-form label { color: #6c645d; }
    #root > footer { background: #211f1c; }
    .swiper-button-next, .swiper-button-prev {
      box-shadow: 0 2px 12px rgba(45, 30, 20, .13);
      border: 1px solid rgba(200,90,58,.15);
    }
    .swiper-pagination-bullet { transition: background-color .25s ease, opacity .25s ease; }
    .js-fade-up { transform: translateY(18px); transition-duration: .65s; }
    .js-fade-up:focus-within { opacity: 1; transform: none; }
    .hero-zoom-img { animation-duration: 28s; will-change: auto; }
    .swiper-slide:not(.swiper-slide-active) .hero-zoom-img { animation-play-state: paused; }
    .marquee-content { animation-duration: 40s; }
    .marquee-container:hover .marquee-content { animation-play-state: paused; }
    @media (hover: hover) and (pointer: fine) {
      #root section :is(a, button).shadow:hover { transform: translateY(-2px); }
      #root section .cursor-pointer.rounded.border:hover {
        border-color: #cea890; box-shadow: 0 12px 30px -15px rgba(83,54,33,.32);
      }
    }
    /* Use the existing mobile menu until the full navigation has room. */
    @media (min-width: 1440px) {
      #root > nav > div:first-child { max-width: 100rem; }
      #root > nav .lg\:flex > * + * { margin-left: .85rem; }
      #root > nav .lg\:flex > :is(a, button) { font-size: .75rem; white-space: nowrap; }
      #root > nav h1 { font-size: 1rem; }
    }
    @media (min-width: 1024px) and (max-width: 1439px) {
      #root > nav .lg\:flex { display: none; }
      #mobile-toggle { display: block; }
      #mobile-menu:not(.hidden) { display: block; }
    }
    @media (max-width: 639px) {
      #root > section { padding-inline: 1.25rem; }
      #root > nav > div:first-child { padding-inline: 1rem; gap: .5rem; }
      #root > nav h1 { font-size: .8rem; line-height: 1.6; }
      #root > nav h1 + p { font-size: 7px; letter-spacing: .06em; }
      #root > nav > div:first-child > div:first-child > div:first-child { flex-shrink: 0; }
      #intro .p-8, #contact .p-8 { padding: 1.5rem; }
      #contact-form :is(input, select, textarea) { font-size: 16px; }
      #board .justify-between { gap: .75rem; flex-wrap: wrap; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; transition: none; }
      *, *::before, *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
      .js-fade-up, .char-anim, .js-text-anime { opacity: 1 !important; transform: none !important; }
      #splash-screen, #paw-trail-container { display: none !important; }
    }
    /* Lightweight motion: only decoration transforms with scroll; content stays still. */
    .street-atmosphere-host { position: relative; isolation: isolate; }
    .street-atmosphere {
      position: absolute; inset: 0; overflow: hidden; z-index: -1; pointer-events: none;
    }
    .street-atmosphere::before {
      content: ''; position: absolute; inset: -24px 0;
      background: radial-gradient(ellipse at 8% 35%, rgba(212,155,94,.10), transparent 48%),
                  radial-gradient(ellipse at 94% 70%, rgba(200,90,58,.06), transparent 40%);
      transform: translate3d(0, var(--street-drift, 0px), 0);
    }
    .street-atmosphere::after {
      content: ''; position: absolute; width: 65%; height: 75%; left: 12%; top: 10%;
      background: radial-gradient(circle at 10% 30%, #c99e70 0 2px, transparent 3px),
                  radial-gradient(circle at 85% 60%, #c99e70 0 2px, transparent 3px),
                  radial-gradient(circle at 35% 90%, #c99e70 0 1px, transparent 2px);
      opacity: .18; animation: street-light-drift 24s ease-in-out infinite alternate paused;
    }
    .motion-in-view > .street-atmosphere::after { animation-play-state: running; }
    @keyframes street-light-drift { to { transform: translate3d(12px, -16px, 0); opacity: .3; } }
    #root > nav::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      border-bottom: 1px solid rgba(200,90,58,.26);
      box-shadow: 0 8px 24px -14px rgba(63,42,24,.3);
      opacity: 0; transition: opacity .35s ease;
    }
    #root > nav.is-scrolled::after { opacity: 1; }
    #root > nav > div:first-child > div:first-child > div:first-child {
      transition: transform .35s var(--street-ease);
    }
    #root > nav.is-scrolled > div:first-child > div:first-child > div:first-child { transform: scale(.94); }
    .street-photo-zoom { animation: street-photo-breathe 28s ease-in-out infinite alternate paused; }
    .street-photo-zoom.motion-in-view { animation-play-state: running; }
    @keyframes street-photo-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
    .swiper:not(.motion-in-view) .hero-zoom-img { animation-play-state: paused; }
    @media (hover: hover) and (pointer: fine) {
      #root section :is(a, button):is(.rounded, .rounded-full):hover { transform: translateY(-2px); }
      #root section :is(a, button):is(.rounded, .rounded-full):active { transform: translateY(0) scale(.99); }
    }

    /* Awa Odori: a quiet night-festival frame around the original photo gallery. */
    #awa-gallery {
      position: relative; isolation: isolate; overflow: hidden;
      max-width: 72rem; padding: 7rem 3rem 5rem;
      border: 1px solid #38404a; border-radius: 1.5rem;
      background: #17202c; color: #faf5ea;
      box-shadow: 0 20px 50px -30px rgba(17,24,35,.5);
    }
    #awa-gallery::before {
      content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
      background: radial-gradient(ellipse at 18% 0, rgba(171,78,41,.25), transparent 48%),
                  radial-gradient(ellipse at 92% 75%, rgba(86,108,139,.14), transparent 48%),
                  linear-gradient(155deg, #1b293b, #10151e 70%, #221c20);
      opacity: 0; transition: opacity 1.6s ease;
    }
    #awa-gallery.festival-entered::before, .no-js #awa-gallery::before { opacity: 1; }
    #awa-gallery > .text-center, #awa-gallery > .max-w-4xl { position: relative; z-index: 1; }
    #awa-gallery h3 { color: #fff5e5; font-size: clamp(1.5rem, 3.2vw, 2.25rem); line-height: 1.7; }
    #awa-gallery > .text-center > span { color: #e7b486; letter-spacing: .28em; }
    #awa-gallery > .text-center > p, #awa-gallery .text-stone-500 { color: #c5c6c8; }
    #root #awa-gallery > .text-center > .w-12 {
      background: linear-gradient(90deg, #a95b3d, #f0cf99, #a95b3d);
      transition-delay: .95s;
    }
    #awa-gallery .awa-swiper {
      border-color: rgba(229,182,124,.45); border-radius: 1rem;
      box-shadow: 0 0 32px rgba(220,146,75,.10), 0 18px 35px -20px #000;
      background: #10151e;
    }
    #awa-gallery .swiper-slide { overflow: hidden; }
    #awa-gallery .swiper-slide img { transform: scale(1); }
    #awa-gallery .swiper-slide-active img { animation: street-photo-breathe 18s ease-out both paused; }
    #awa-gallery.motion-in-view .swiper-slide-active img { animation-play-state: running; }
    #awa-gallery .swiper-button-prev, #awa-gallery .swiper-button-next {
      background: rgba(21,29,41,.88); color: #f3d3a3 !important;
      border: 1px solid rgba(239,200,144,.5);
      width: 44px !important; height: 44px !important;
    }
    #awa-gallery .swiper-pagination { bottom: 12px; }
    #awa-gallery .swiper-pagination-bullet {
      background: #e9d6bc; opacity: .7; width: 10px; height: 10px;
      box-shadow: 0 0 0 3px rgba(17,24,35,.55);
    }
    #awa-gallery .swiper-pagination-bullet-active { background: #efb276 !important; opacity: 1; }
    #awa-gallery .animate-bounce { animation: none; }
    #awa-gallery a.rounded-full { max-width: 100%; white-space: normal; text-wrap: balance; }
    #awa-motion-toggle {
      display: block; margin: 1.25rem auto 0; padding: .6rem 1rem; min-height: 44px;
      border: 1px solid #626169; border-radius: 2rem; color: #e4d8c9;
      font-size: .75rem; letter-spacing: .06em;
    }
    #awa-motion-toggle:disabled { opacity: .65; cursor: default; }
    .no-js #awa-motion-toggle { display: none; }
    .awa-scenery { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
    .awa-lantern {
      position: absolute; top: -10px; left: 4%; width: 44px; height: 122px;
      transform-origin: 50% 0; animation: awa-sway 7s ease-in-out infinite alternate paused;
    }
    .awa-lantern:nth-child(2) { left: 17%; top: -38px; animation-delay: -3s; animation-duration: 8s; }
    .awa-lantern:nth-child(3) { left: auto; right: 17%; top: -32px; animation-delay: -5s; }
    .awa-lantern:nth-child(4) { left: auto; right: 4%; animation-delay: -2s; animation-duration: 9s; }
    .awa-lantern::before { content: ''; position: absolute; left: 50%; top: 0; height: 46px; width: 1px; background: #a38868; }
    .awa-lantern > i {
      position: absolute; top: 44px; width: 100%; height: 62px; border-radius: 42%;
      border-block: 5px solid #3d2d29;
      background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(72,30,22,.22) 8px 9px),
                  radial-gradient(ellipse, #efb877, #c76a43 58%, #913c30);
      box-shadow: 0 0 24px 5px rgba(211,116,55,.12);
    }
    .awa-lantern > i::after {
      content: ''; position: absolute; inset: 8px; border-radius: 50%;
      background: radial-gradient(ellipse, rgba(255,221,151,.4), transparent 70%);
      animation: awa-lamp 5s ease-in-out infinite alternate paused;
    }
    @keyframes awa-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
    @keyframes awa-lamp { from { opacity: .4; } to { opacity: .85; } }
    .awa-dancer { position: absolute; width: 120px; height: 240px; color: #e4c29b; opacity: .13; bottom: 16px; left: 1%; }
    .awa-dancer:nth-of-type(2) { left: auto; right: 1%; bottom: 28px; width: 135px; }
    .awa-dancer:nth-of-type(3) { left: 11%; bottom: 5px; width: 90px; height: 180px; opacity: .07; }
    .awa-dancer .awa-body { transform-origin: 60px 140px; animation: awa-dance 6s ease-in-out infinite alternate paused; }
    .awa-dancer .awa-arm { transform-box: fill-box; transform-origin: 50% 100%; animation: awa-arm 4s ease-in-out infinite alternate paused; }
    .awa-dancer .awa-arm-right { animation-delay: -2s; animation-direction: alternate-reverse; }
    .awa-dancer .awa-leg { transform-box: fill-box; transform-origin: 50% 0; animation: awa-step 6s ease-in-out infinite alternate paused; }
    .awa-dancer:nth-of-type(2) .awa-body, .awa-dancer:nth-of-type(3) .awa-body { animation-delay: -3s; }
    @keyframes awa-dance { from { transform: translateY(3px) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
    @keyframes awa-arm { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
    @keyframes awa-step { from { transform: rotate(-3deg); } to { transform: rotate(5deg); } }
    .awa-ripple {
      position: absolute; left: -50px; top: 22%; width: 230px; height: 230px;
      border: 1px solid rgba(225,178,115,.25); border-radius: 50%; opacity: 0;
      animation: awa-rhythm 10s ease-out infinite paused;
    }
    .awa-ripple:nth-last-child(2) { left: auto; right: -60px; top: 53%; animation-delay: -4s; }
    .awa-ripple:last-child { left: 48%; top: 4%; width: 100px; height: 100px; animation-delay: -7s; }
    @keyframes awa-rhythm { 0% { transform: scale(.65); opacity: 0; } 35% { opacity: .5; } 100% { transform: scale(1.3); opacity: 0; } }
    #awa-gallery.motion-in-view .awa-scenery *, #awa-gallery.motion-in-view .awa-lantern > i::after { animation-play-state: running; }
    @media (max-width: 639px) {
      #awa-gallery { padding: 6.5rem 1rem 3rem; border-radius: 1rem; }
      .awa-lantern:nth-child(2), .awa-lantern:nth-child(3), .awa-dancer:nth-of-type(3), .awa-ripple:last-child { display: none; }
      .awa-lantern { width: 34px; left: 8%; }
      .awa-lantern:nth-child(4) { right: 8%; }
      .awa-dancer { width: 70px; height: 140px; opacity: .08; bottom: 0; }
      .awa-dancer:nth-of-type(2) { width: 75px; height: 140px; bottom: 0; }
      #awa-gallery a.rounded-full { padding: .9rem 1rem; font-size: .75rem; letter-spacing: .03em; }
      #awa-gallery .swiper-button-prev { left: 6px; }
      #awa-gallery .swiper-button-next { right: 6px; }
      .street-atmosphere::after { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      #awa-gallery::before { opacity: 1; }
      .street-atmosphere::before, #root > nav.is-scrolled > div:first-child > div:first-child > div:first-child,
      #root section :is(a, button):hover, #root section :is(a, button):active { transform: none !important; }
    }


    /* TWO STREETS：縦写真を大きく、縦横比を崩さず表示 */
    #intro .two-streets-photo-frame {
      width: 100%;
      max-width: 520px;
      aspect-ratio: 3 / 4;
      margin: 0 auto 1.5rem;
      overflow: hidden;
      border-radius: 1rem;
      background: #e7e5e4;
      box-shadow: 0 16px 34px -24px rgba(45, 30, 20, .42);
    }
    #intro .two-streets-photo-frame img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    @media (max-width: 639px) {
      #intro .two-streets-photo-frame {
        max-width: 100%;
        border-radius: .85rem;
      }
    }