:root {
        --source-width: 1440;
        --source-height: 6380;
        --page-width: 1366px;
        --scale: 0.9486111111;
        --page-height: 6053px;
        --cream: #f6f1ec;
        --ink: #111;
        --nav: #2e2e2e;
        --reserve: #556456;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        background: var(--cream);
        color: var(--ink);
        font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
        letter-spacing: 0;
      }
      button {
        appearance: none;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
      }
      a { color: inherit; text-decoration: none; }
      img { display: block; width: 100%; height: 100%; object-fit: cover; }

      .viewport {
        width: var(--page-width);
        height: var(--page-height);
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        background: var(--cream);
      }

      .stage {
        position: absolute;
        inset: 0 auto auto 0;
        width: 1440px;
        height: 6380px;
        transform: scale(var(--scale));
        transform-origin: top left;
        background: var(--cream);
        overflow: hidden;
      }

      .abs { position: absolute; }
      .cream { background: var(--cream); }
      .paper {
        background-image: url("assets/paper-texture.jpg");
        background-size: cover;
        background-position: center;
      }
      .round-right { border-radius: 0 68px 68px 0; overflow: hidden; }

      .hero { left: 0; top: 0; width: 1362px; height: 853px; overflow: hidden; }
      .hero img { animation: heroBreath 12s ease-in-out infinite alternate; }
      .hero-brand {
        left: 110px;
        top: 328px;
        width: 420px;
        padding: 0;
        animation: titleFloat 4s ease both;
      }
      .hero-brand img {
        width: 100%;
        height: auto;
        object-fit: contain;
        filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
      }
      .hero-brand p {
        margin: 16px 0 0;
        color: rgba(255,255,255,.96);
        font-size: 14px;
        line-height: 1.8;
        letter-spacing: .16em;
        text-align: left;
        text-shadow: 0 2px 12px rgba(0,0,0,.28);
      }

      .side-nav { left: 1362px; top: 0; width: 78px; height: 100vh; min-height: 420px; background: var(--nav); color: #fff; font-size: 11px; font-weight: 800; text-align: center; z-index: 20; }
      .side-logo {
        left: 4px;
        top: 22px;
        width: 70px;
        height: 34px;
      }
      .side-logo img { object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
      .insta { left: 27px; top: 142px; width: 24px; height: 24px; border: 2px solid #fff; border-radius: 4px; }
      .insta::before { content: ""; position: absolute; inset: 5px; border: 2px solid #fff; border-radius: 50%; }
      .insta::after { content: ""; position: absolute; top: 4px; right: 4px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
      .lang { left: 15px; top: 192px; width: 50px; }
      .lang-toggle {
        cursor: pointer;
        text-align: center;
      }
      .lang-toggle.is-en {
        color: #dff0c8;
      }
      .reserve-tab { left: 0; bottom: 0; width: 78px; height: 110px; background: var(--reserve); display: grid; place-items: center; }

      .history-illust { left: 65px; top: 914px; width: 708px; height: 708px; }
      .history-copy { left: 836px; top: 1013px; width: 350px; }
      .history-copy h2 { margin: 0 0 34px; font-size: 24px; line-height: 1.55; letter-spacing: .18em; font-weight: 900; }
      .history-copy p { margin: 0; font-size: 14px; line-height: 1.95; letter-spacing: .08em; }

      .pill {
        display: grid;
        place-items: center;
        width: 338px;
        height: 91px;
        border: 2px solid currentColor;
        border-radius: 999px;
        font-size: 17px;
        letter-spacing: .02em;
        transition: transform .35s ease, background .35s ease, color .35s ease;
      }
      .pill:hover { transform: translateY(-5px); background: #111; color: #fff; }
      .history-btn { left: 836px; top: 1484px; }

      .rooms-bg { left: -142px; top: 1682px; width: 1363px; height: 1387px; }
      .room-copy { left: 111px; top: 1887px; width: 345px; }
      .room-copy h2 { margin: 0 0 38px; font-size: 24px; line-height: 1.55; font-weight: 900; letter-spacing: .02em; }
      .room-copy p { margin: 0; font-size: 14px; line-height: 2.05; letter-spacing: .04em; }
      .room-btn { left: 111px; top: 2630px; }
      .room-green { left: 570px; top: 1772px; width: 554px; height: 375px; border-radius: 0 18px 0 0; overflow: hidden; }
      .room-blue { left: 570px; top: 2180px; width: 554px; height: 375px; }
      .room-bunk { left: 111px; top: 2401px; width: 334px; height: 536px; border-radius: 0 16px 0 0; overflow: hidden; }
      .room-tatami { left: 570px; top: 2588px; width: 554px; height: 375px; border-radius: 0 20px 0 0; overflow: hidden; }

      .front-illust { left: 0; top: 3190px; width: 325px; height: 486px; }
      .vertical-title {
        left: 402px; top: 3266px;
        writing-mode: vertical-rl;
        text-orientation: upright;
        margin: 0;
        font-size: 42px;
        line-height: 1.45;
        font-weight: 900;
        letter-spacing: .1em;
      }
      .about-copy { left: 628px; top: 3328px; width: 465px; }
      .about-copy p { margin: 0; font-size: 14px; line-height: 1.92; letter-spacing: .04em; }
      .bike-illust { left: 720px; top: 3988px; width: 617px; height: 412px; }

      .mountain { left: 0; top: 4443px; width: 1440px; height: 832px; overflow: hidden; color: #fff; text-align: center; }
      .mountain img { filter: brightness(.62); }
      .mountain-copy { left: 405px; top: 4720px; width: 640px; }
      .mountain-copy h2 { margin: 0 0 28px; font-size: 28px; line-height: 1.55; letter-spacing: .08em; font-weight: 900; }
      .mountain-copy p { margin: 0; font-size: 14px; line-height: 2.05; letter-spacing: .03em; }
      .mountain-btn { left: 576px; top: 5022px; color: #fff; border-color: #fff; }
      .mountain-btn:hover { background: #fff; color: #14301f; }

      .access-copy { left: 110px; top: 5430px; width: 460px; }
      .access-copy h2 { margin: 0 0 26px; font-size: 26px; line-height: 1.52; font-weight: 900; }
      .access-copy p { margin: 0; font-size: 14px; line-height: 1.95; letter-spacing: .035em; }
      .access-btn { left: 110px; top: 5798px; }
      .valley { left: 675px; top: 5423px; width: 659px; height: 372px; }

      .footer { left: 0; top: 5929px; width: 1440px; height: 451px; background: #414141; color: #fff; border-radius: 30px 30px 0 0; }
      .footer-logo {
        left: 565px;
        top: 132px;
        width: 310px;
        height: 72px;
      }
      .footer-logo img {
        object-fit: contain;
        filter: drop-shadow(0 4px 14px rgba(255,255,255,.08));
      }
      .footer-links { right: 14px; top: 58px; display: grid; gap: 20px; font-size: 11px; font-weight: 900; text-align: right; }
      .footer-address { left: 407px; top: 312px; font-size: 16px; letter-spacing: .02em; }
      .footer-address span { margin-left: 42px; }
      .copyright { left: 496px; top: 354px; font-size: 16px; opacity: .9; }

      .has-js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
      .reveal.is-visible { opacity: 1; transform: translateY(0); }
      .delay-1 { transition-delay: .12s; }
      .delay-2 { transition-delay: .24s; }

      @keyframes heroBreath {
        from { transform: scale(1); }
        to { transform: scale(1.035); }
      }
      @keyframes titleFloat {
        from { opacity: 0; transform: translateY(18px); }
        to { opacity: 1; transform: translateY(0); }
      }

      @media (max-width: 1365px) {
        :root { --page-width: 100vw; }
      }

      .sp-page { display: none; }

      @media (max-width: 900px) {
        :root {
          --sp-side: 50px;
          --sp-canvas: min(100vw, 390px);
        }

        body {
          background: var(--cream);
          overflow-x: hidden;
        }

        .viewport {
          display: none;
        }

        .sp-page {
          display: block;
          width: var(--sp-canvas);
          min-height: 100vh;
          background: var(--cream);
          color: var(--ink);
          overflow: hidden;
        }

        .sp-page::after {
          content: "";
          position: fixed;
          z-index: 55;
          top: 0;
          right: 0;
          left: calc(var(--sp-canvas) - var(--sp-side));
          width: var(--sp-side);
          height: 100vh;
          background: var(--nav);
          pointer-events: none;
        }

        .sp-nav {
          position: fixed;
          z-index: 80;
          top: 0;
          right: 0;
          left: calc(var(--sp-canvas) - var(--sp-side));
          width: var(--sp-side);
          height: 100vh;
          background: var(--nav);
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 9px;
          font-weight: 800;
          text-align: center;
        }

        .sp-nav-logo {
          width: 44px;
          height: 20px;
          margin-top: 18px;
        }

        .sp-nav-logo img {
          object-fit: contain;
          filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
        }

        .sp-nav-link {
          margin-top: 44px;
          display: grid;
          gap: 22px;
        }
        .sp-lang {
          margin-top: 22px;
          color: #fff;
          font-size: 9px;
          font-weight: 800;
          letter-spacing: .08em;
          cursor: pointer;
        }

        .sp-reserve {
          margin-top: auto;
          width: 100%;
          height: 92px;
          background: var(--reserve);
          display: grid;
          place-items: center;
          writing-mode: vertical-rl;
          letter-spacing: .08em;
        }

        .sp-hero {
          position: relative;
          width: calc(var(--sp-canvas) - var(--sp-side));
          height: 78svh;
          min-height: 520px;
          max-height: 680px;
          overflow: hidden;
          background: #000;
        }

        .sp-hero img {
          height: 100%;
          object-fit: cover;
          object-position: 50% center;
          opacity: .96;
          animation: heroBreath 12s ease-in-out infinite alternate;
        }

        .sp-hero-brand {
          position: absolute;
          z-index: 2;
          left: 16px;
          right: 16px;
          top: 48%;
          padding: 0;
          animation: titleFloat 4s ease both;
        }
        .sp-hero-brand img {
          width: 100%;
          height: auto;
          object-fit: contain;
          filter: drop-shadow(0 8px 20px rgba(0,0,0,.3));
        }
        .sp-hero-brand p {
          margin: 10px 0 0;
          color: rgba(255,255,255,.96);
          font-size: 11px;
          line-height: 1.7;
          letter-spacing: .14em;
          text-align: left;
          text-shadow: 0 2px 10px rgba(0,0,0,.28);
        }

        .sp-section {
          width: calc(var(--sp-canvas) - var(--sp-side));
          padding: 58px 24px;
        }

        .sp-section h2 {
          margin: 0 0 24px;
          font-size: 23px;
          line-height: 1.65;
          font-weight: 900;
          letter-spacing: .04em;
        }

        .sp-section p {
          margin: 0;
          font-size: 14px;
          line-height: 2.05;
          letter-spacing: .035em;
        }

        .sp-history {
          padding-top: 46px;
        }

        .sp-illust {
          width: min(88vw, 420px);
          height: auto;
          margin: 0 auto 34px;
        }

        .sp-illust img {
          height: auto;
          object-fit: contain;
        }

        .sp-pill {
          display: grid;
          place-items: center;
          width: min(100%, 315px);
          height: 72px;
          margin-top: 30px;
          border: 2px solid currentColor;
          border-radius: 999px;
          font-size: 15px;
          letter-spacing: .03em;
        }

        .sp-rooms {
          width: calc(var(--sp-canvas) - var(--sp-side));
          margin: 18px 0 0;
          padding: 58px 24px 66px;
          border-radius: 0 38px 38px 0;
          background: #e5dbce;
        }

        .sp-room-grid {
          display: grid;
          gap: 18px;
          margin-top: 34px;
        }

        .sp-room-grid img {
          width: 100%;
          height: auto;
          border-radius: 0 14px 0 0;
        }

        .sp-room-grid .sp-bunk {
          width: 62%;
        }

        .sp-vertical-title {
          margin: 0 auto 34px;
          writing-mode: vertical-rl;
          text-orientation: upright;
          font-size: 34px;
          line-height: 1.45;
          font-weight: 900;
          letter-spacing: .1em;
        }

        .sp-philosophy {
          display: grid;
          grid-template-columns: 34% 1fr;
          column-gap: 22px;
          align-items: start;
          padding-top: 70px;
        }

        .sp-philosophy .sp-front {
          width: 100%;
          margin-top: 0;
        }

        .sp-philosophy-copy {
          grid-column: 1 / -1;
          margin-top: 34px;
        }

        .sp-bike {
          margin-top: 36px;
        }

        .sp-bike img {
          height: auto;
          object-fit: contain;
        }

        .sp-mountain {
          position: relative;
          width: calc(var(--sp-canvas) - var(--sp-side));
          min-height: 720px;
          color: #fff;
          text-align: center;
          display: grid;
          align-items: center;
          padding: 70px 24px;
          background:
            linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.38)),
            url("assets/mountain.jpg") center / cover;
        }

        .sp-mountain h2 {
          font-size: 22px;
          line-height: 1.7;
        }

        .sp-mountain p {
          font-size: 13px;
          line-height: 2;
        }

        .sp-mountain .sp-pill {
          margin-left: auto;
          margin-right: auto;
          color: #fff;
          border-color: #fff;
        }

        .sp-access img {
          width: 100%;
          height: auto;
          margin-top: 34px;
          object-fit: contain;
        }

        .sp-footer {
          position: relative;
          width: calc(var(--sp-canvas) - var(--sp-side));
          min-height: 420px;
          padding: 84px 24px 44px;
          background: #414141;
          border-radius: 24px 24px 0 0;
          color: #fff;
          text-align: center;
        }

        .sp-footer-logo {
          width: min(240px, 100%);
          margin: 0 auto;
          padding: 0;
        }
        .sp-footer-logo img {
          width: 100%;
          height: auto;
          object-fit: contain;
        }

        .sp-footer-links {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 18px;
          margin: 44px 0 34px;
          font-size: 11px;
          font-weight: 900;
        }

        .sp-footer p {
          margin: 0 auto 12px;
          font-size: 12px;
          line-height: 1.8;
          color: rgba(255,255,255,.9);
        }
      }

      .legal-page {
        min-height: 100vh;
        background: #f8f4e7 url("assets/paper-texture.jpg") center top / 680px auto repeat;
        color: #414141;
        font-family: var(--serif);
        padding: 72px 22px 96px;
      }
      .legal-wrap {
        width: min(920px, 100%);
        margin: 0 auto;
      }
      .legal-brand {
        display: inline-block;
        margin-bottom: 56px;
        font-family: var(--sans);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1;
      }
      .legal-brand small {
        display: block;
        margin-left: 92px;
        margin-top: -2px;
        font-family: var(--serif);
        font-size: 10px;
        font-weight: 400;
      }
      .legal-page h1 {
        margin: 0 0 18px;
        font-size: 34px;
        font-weight: 400;
        letter-spacing: .08em;
      }
      .legal-lead {
        margin: 0 0 42px;
        max-width: 760px;
        font-size: 16px;
        line-height: 2;
      }
      .legal-card {
        margin: 0 0 18px;
        padding: 30px 34px;
        background: rgba(255,255,255,.58);
        border: 1px solid rgba(65,65,65,.12);
      }
      .legal-card h2 {
        margin: 0 0 14px;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: .06em;
      }
      .legal-card h3 {
        margin: 22px 0 8px;
        font-size: 16px;
        font-weight: 600;
      }
      .legal-card p,
      .legal-card li {
        font-size: 15px;
        line-height: 1.9;
      }
      .legal-card p { margin: 0 0 12px; }
      .legal-card ul { margin: 0; padding-left: 1.25em; }
      .legal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 28px;
      }
      .legal-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 180px;
        min-height: 50px;
        padding: 0 22px;
        background: #556456;
        color: #fff;
        border-radius: 999px;
        font-family: var(--serif);
        font-size: 14px;
        letter-spacing: .08em;
      }
      .legal-button.secondary {
        background: transparent;
        color: #556456;
        border: 1px solid rgba(85,100,86,.45);
      }
      .reservation-frame {
        width: 100%;
        height: min(2000px, 78vh);
        min-height: 720px;
        border: 0;
        background: #fff;
      }
      .legal-note {
        color: rgba(65,65,65,.72);
        font-size: 13px !important;
      }

      @media (max-width: 700px) {
        .legal-page {
          padding: 42px 18px 72px;
          background-size: 460px auto;
        }
        .legal-brand {
          margin-bottom: 40px;
          font-size: 24px;
        }
        .legal-brand small { margin-left: 78px; }
        .legal-page h1 {
          font-size: 28px;
          line-height: 1.35;
        }
        .legal-lead {
          margin-bottom: 30px;
          font-size: 14px;
        }
        .legal-card {
          padding: 24px 20px;
        }
        .legal-card h2 { font-size: 18px; }
        .legal-card p,
        .legal-card li { font-size: 14px; }
        .legal-button {
          width: 100%;
        }
        .reservation-frame {
          min-height: 620px;
        }
      }