@charset "UTF-8";
/* =========================================================
   PC / desktop layout  (mockup: Masumi_PC)
   The LEFT brand column, the RIGHT floating nav card and the
   coral band form a FIXED full-viewport frame. The CENTER
   column (.main) is the ONLY scroll region: hero card → all
   sections → footer scroll inside it.
   Hidden below 1024px; mobile keeps its own chrome.
   ========================================================= */

.pchome { display: none; }
.pchome__center { display: none; }   /* PC-only hero card lives inside .main */

@media (min-width: 1024px) {

  :root { --railL: clamp(360px, 34vw, 580px); --railR: clamp(340px, 31vw, 540px); }

  /* ---- release the phone column; nothing scrolls but .main ---- */
  body { background: #fff; }
  .layout { min-height: 0; }
  .layout__inner {
    position: relative; height: 100vh; overflow: hidden;
    max-width: none; background: #fff; box-shadow: none; padding: 0;
  }

  /* ===== warm drifting aura (PC only, faint, behind everything) ===== */
  .layout__inner::before,
  .layout__inner::after {
    content: ""; position: absolute; inset: -12%; z-index: 0;
    pointer-events: none; will-change: transform;
  }
  .layout__inner::before {
    background:
      radial-gradient(34% 38% at 28% 32%, rgba(244,196,180,.55), transparent 70%),
      radial-gradient(32% 36% at 74% 28%, rgba(246,225,194,.50), transparent 70%),
      radial-gradient(38% 42% at 62% 78%, rgba(248,221,225,.55), transparent 72%),
      radial-gradient(30% 36% at 18% 82%, rgba(240,228,200,.42), transparent 72%);
    filter: blur(24px);
    animation: pcAura1 34s ease-in-out infinite alternate;
  }
  .layout__inner::after {
    background:
      radial-gradient(30% 34% at 52% 22%, rgba(245,206,188,.40), transparent 70%),
      radial-gradient(34% 38% at 84% 64%, rgba(247,228,206,.38), transparent 72%),
      radial-gradient(32% 36% at 40% 92%, rgba(248,219,225,.40), transparent 72%);
    filter: blur(30px);
    animation: pcAura2 46s ease-in-out infinite alternate;
  }
  @keyframes pcAura1 {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(2.5%, -1.8%, 0) scale(1.09); }
    100% { transform: translate3d(-2.2%, 1.6%, 0) scale(1.05); }
  }
  @keyframes pcAura2 {
    0%   { transform: translate3d(0,0,0) scale(1.05); }
    50%  { transform: translate3d(-2.8%, 1.6%, 0) scale(1.12); }
    100% { transform: translate3d(2%, -2%, 0) scale(1.02); }
  }
  @media (prefers-reduced-motion: reduce) {
    .layout__inner::before, .layout__inner::after { animation: none; }
  }

  /* ---- hide mobile-only chrome ---- */
  .header, .nav, .navtoggle, .hero, .closing { display: none !important; }
  .loading__logo { width: 420px; max-width: 40vw; }

  /* ===================== fixed frame ===================== */
  .pchome { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
  .pchome > * { pointer-events: auto; }

  /* ---------- LEFT : brand + invitation (fixed) ---------- */
  .pchome__left {
    position: absolute; top: 0; left: 0; z-index: 2;
    width: var(--railL); height: 100vh;
    overflow: hidden;
    background: transparent;
    padding: 40px clamp(34px, 3.4vw, 56px) 34px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .pchome__logo { width: min(420px, calc(var(--railL) - 80px)); height: auto; align-self: center; }
  .pchome__garland { width: min(420px, calc(var(--railL) - 80px)); height: auto; margin: clamp(16px, 2.6vh, 34px) 0; }
  .pchome__copy { text-align: center; }
  .pchome__jp { font-size: 21px; letter-spacing: .09em; color: var(--text); }
  .pchome__script {
    font-family: var(--ff-script); color: var(--coral);
    font-size: 23px; margin: 6px 0 clamp(16px, 2.4vh, 30px); letter-spacing: .01em; white-space: nowrap;
  }
  .pchome__txt { line-height: 2.2; margin-bottom: clamp(14px, 2vh, 26px); color: var(--text); letter-spacing: .04em; }
  .pchome__txt:last-of-type { margin-bottom: clamp(18px, 2.4vh, 30px); }
  .pchome__ig {
    position: relative; display: inline-flex; align-items: center; gap: 12px;
    min-width: 250px; justify-content: center;
    border: 1.5px solid var(--coral-line); border-radius: 40px;
    padding: 14px 30px; color: var(--coral-ink); font-size: 16px; letter-spacing: .04em;
    transition: box-shadow .25s ease, background .25s ease;
  }
  .pchome__ig:hover { box-shadow: 0 8px 22px rgba(160,120,110,.16); background: #fffaf8; }
  .pchome__ig-ar { position: absolute; right: 22px; font-size: 14px; color: var(--coral); }

  /* ---------- RIGHT : floating nav card (fixed) ---------- */
  .pchome__nav {
    position: absolute; top: 50%; right: clamp(26px, 3vw, 48px); z-index: 2;
    transform: translateY(-50%);
    width: min(420px, calc(var(--railR) - 44px));
    max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
    background: #fef6f5; border-radius: 28px; padding: 26px 24px 24px;
  }
  .pcnav__logo { display: block; width: clamp(190px, 17vw, 268px); margin: 2px auto 14px; }
  .pcnav__logo img { width: 100%; height: auto; display: block; }
  .pcnav > li { border-bottom: 1px dashed #efc9c4; }
  .pcnav > li:last-child { border-bottom: 0; }
  .pcnav > li > a {
    display: flex; align-items: center; gap: 10px; padding: 15px 2px;
    font-size: 16px; letter-spacing: .02em; color: var(--text);
    white-space: nowrap; transition: color .2s ease;
  }
  .pcnav > li > a {
    display: flex; align-items: center; gap: 10px; padding: 15px 2px;
    font-size: 15.5px; letter-spacing: .02em; color: var(--text);
    white-space: nowrap; transition: color .2s ease;
  }
  .pcnav > li > a:hover { color: var(--coral-ink); }
  .pcnav .ic { width: 20px; height: 20px; flex-shrink: 0; }
  .pcnav .nav-fl { width: 20px; height: auto; flex-shrink: 0; }
  .pcnav i {
    font-family: var(--ff-en); font-style: italic; font-weight: 400;
    color: #e6a59e; font-size: 13.5px; margin-left: 7px;
  }
  .pcnav__has-sub > a { padding-bottom: 11px; }
  .pcnav__sub { padding: 0 0 15px 18px; }
  .pcnav__sub > li > a {
    display: flex; align-items: center; gap: 11px; padding: 8px 2px;
    font-size: 15px; letter-spacing: .04em; color: var(--text); transition: color .2s ease;
  }
  .pcnav__sub > li > a:hover { color: var(--coral-ink); }
  .pcnav__sub .ic { width: 17px; height: 17px; }
  .pcnav__sub .nav-fl { width: 17px; height: auto; flex-shrink: 0; }
  .pcnav__cta { margin-top: 18px; font-size: 14.5px; padding: 14px 18px; }

  /* ===================== CENTER : the only scroll region ===================== */
  .main {
    position: absolute; top: 0; bottom: 0;
    left: var(--railL); right: var(--railR);
    overflow-y: auto; overscroll-behavior: contain;
    scroll-behavior: smooth; scroll-padding-top: 24px;
    z-index: 1; padding: 0; display: block;
  }

  /* hero card sits at the top of the centre column */
  .pchome__center { display: block; max-width: 432px; margin: 54px auto 56px; padding: 0 16px; }
  .pchome__card {
    border: 1.5px solid var(--coral-line); border-radius: 30px;
    background: #fbf7f2; padding: 15px 15px 30px;
    box-shadow: 0 18px 46px rgba(180,120,110,.10);
  }
  .pchome__card-photo {
    border-radius: 18px; overflow: hidden; background: var(--coral-soft);
    aspect-ratio: 100 / 132;
  }
  .pchome__card-photo .ph, .pchome__card-photo img { width: 100%; height: 100%; object-fit: cover; }
  .pchome__card-body { text-align: center; padding: 32px 8px 4px; }
  .pchome__tagline { font-size: 22px; line-height: 2.25; letter-spacing: .13em; color: var(--text); }
  .pchome__garland--card { width: 78%; max-width: none; margin: 26px auto 0; }

  /* content sections share the centre column */
  .main .section { max-width: 640px; margin-left: auto; margin-right: auto; }
  .main > .garland { max-width: 640px; margin-left: auto; margin-right: auto; }
  .footer { margin-top: 30px; }
  .footer__logo img { width: 300px; }

  /* fixed CV clears the right rail */
  .fab { right: calc(var(--railR) + 22px); bottom: 22px; z-index: 5; }
}

/* narrower desktops: slim the rails so the centre keeps breathing room */
@media (min-width: 1024px) and (max-width: 1366px) {
  :root { --railL: clamp(312px, 27vw, 420px); --railR: clamp(330px, 29vw, 430px); }
  .pchome__left { padding: 44px 26px 34px; }
  .pchome__nav { right: 22px; width: min(384px, calc(var(--railR) - 36px)); padding: 22px 22px; }
  .pchome__center { max-width: 384px; }
  .pcnav > li > a { font-size: 14.5px; gap: 9px; }
  .pcnav .ic { width: 19px; height: 19px; }
  .pcnav .nav-fl { width: 19px; }
  .pcnav i { font-size: 12.5px; margin-left: 5px; }
}