/* ============================================================
       IPHOLIC — TOP / DESIGN
       Direction: white-based monochrome, modern & refined
       Benchmark: cartazero.co.jp
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #FFFFFF;
      --bg-soft:   #F5F4F1;   /* warm off-white */
      --text:      #141414;
      --text-mid:  #6E6E6E;
      --text-soft: #9B9B9B;
      --line:      #E7E6E2;
      --line-dark: #141414;
      --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    }

    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: "Noto Sans JP", sans-serif;
      background: var(--bg);
      color: var(--text);
      letter-spacing: 0.04em;
      line-height: 1.8;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }

    .en {
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 300;
      letter-spacing: 0.32em;
    }

    /* ===== Scroll reveal (JS toggles .is-visible) ===== */
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    /* ============================================================
       HEADER
    ============================================================ */
    .header {
      position: fixed;
      top: 0; left: 0;
      width: 100%;
      height: 76px;
      padding: 0 clamp(20px, 5vw, 56px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 100;
      background: rgba(255,255,255,0);
      transition: background 0.5s var(--ease), height 0.5s var(--ease), border-color 0.5s var(--ease);
      border-bottom: 1px solid transparent;
    }
    .header.is-scrolled {
      height: 64px;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .header__logo img { height: 54px; width: auto; transition: height 0.5s var(--ease); }
    .header.is-scrolled .header__logo img { height: 46px; }

    .header__nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); }
    .header__nav a {
      position: relative;
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.1em;
      padding: 4px 0;
    }
    .header__nav a:not(.nav-contact)::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 100%; height: 1px;
      background: var(--text);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform 0.5s var(--ease);
    }
    .header__nav a:not(.nav-contact):hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
    .nav-contact {
      border: 1px solid var(--text);
      border-radius: 999px;
      padding: 9px 24px !important;
      font-size: 11.5px !important;
      letter-spacing: 0.16em !important;
      transition: background 0.45s var(--ease), color 0.45s var(--ease);
    }
    .nav-contact:hover { background: var(--text); color: #fff; }

    .header__burger {
      display: none;
      width: 28px; height: 16px;
      position: relative;
      cursor: pointer;
    }
    .header__burger span {
      position: absolute; left: 0;
      width: 100%; height: 1.5px;
      background: var(--text);
      transition: transform 0.45s var(--ease), opacity 0.3s var(--ease);
    }
    .header__burger span:nth-child(1) { top: 0; }
    .header__burger span:nth-child(2) { top: 7px; }
    .header__burger span:nth-child(3) { top: 14px; }

    /* ===== Mobile drawer ===== */
    .drawer {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 90;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease);
    }
    .drawer.is-open { opacity: 1; visibility: visible; }
    .drawer a {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.14em;
      padding: 16px 0;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    }
    .drawer a .sub { display: block; font-size: 10px; letter-spacing: 0.3em; color: var(--text-soft); margin-top: 4px; }
    .drawer.is-open a { opacity: 1; transform: none; }
    .drawer.is-open a:nth-child(1) { transition-delay: 0.12s; }
    .drawer.is-open a:nth-child(2) { transition-delay: 0.18s; }
    .drawer.is-open a:nth-child(3) { transition-delay: 0.24s; }
    .drawer.is-open a:nth-child(4) { transition-delay: 0.30s; }
    .drawer.is-open a:nth-child(5) { transition-delay: 0.36s; }
    body.menu-open .header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    body.menu-open .header__burger span:nth-child(2) { opacity: 0; }
    body.menu-open .header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ============================================================
       HERO
    ============================================================ */
    .hero {
      position: relative;
      height: 100vh;
      min-height: 660px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 0 5%;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute;
      inset: -10%;
      background:
        radial-gradient(42% 52% at 24% 32%, rgba(0,0,0,0.045) 0%, transparent 62%),
        radial-gradient(40% 48% at 78% 72%, rgba(0,0,0,0.03) 0%, transparent 60%);
      animation: heroDrift 18s ease-in-out infinite alternate;
      z-index: 0;
    }
    @keyframes heroDrift {
      0%   { transform: scale(1) translate(0, 0); }
      100% { transform: scale(1.12) translate(2.5%, -1.5%); }
    }

    /* rotating brand mark (signature motif) */
    .hero__mark {
      position: absolute;
      top: 50%; left: 50%;
      width: min(94vh, 760px);
      aspect-ratio: 1 / 1;
      transform: translate(-50%, -50%);
      z-index: 0;
      pointer-events: none;
      opacity: 0;
      animation: markIn 2.6s 0.3s var(--ease) forwards, markSpin 70s linear infinite;
    }
    .hero__mark img { width: 100%; height: 100%; opacity: 0.05; }
    @keyframes markIn { to { opacity: 1; } }
    @keyframes markSpin {
      0%   { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(360deg); }
    }

    /* editorial corner meta */
    .hero__meta {
      position: absolute;
      z-index: 2;
      top: 104px;
      font-size: 10px;
      line-height: 1.9;
      letter-spacing: 0.28em;
      color: var(--text-soft);
      opacity: 0;
      animation: fadeUp 1.2s 1.6s var(--ease) forwards;
    }
    .hero__meta--tl { left: clamp(20px, 5vw, 56px); text-align: left; }
    .hero__meta--tr { right: clamp(20px, 5vw, 56px); text-align: right; }

    .hero__inner { position: relative; z-index: 2; }
    .hero__label {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 11px;
      letter-spacing: 0.38em;
      color: var(--text-soft);
      margin-bottom: clamp(24px, 3.4vh, 38px);
      opacity: 0;
      animation: fadeUp 1s 0.25s var(--ease) forwards;
    }
    .hero__label::before, .hero__label::after {
      content: ''; width: 28px; height: 1px; background: var(--line);
    }

    .hero__catch {
      font-family: "Noto Serif JP", serif;
      font-weight: 400;
      font-size: clamp(3.1rem, 9vw, 8rem);
      line-height: 1.22;
      letter-spacing: 0.07em;
      /* 末尾の句読点（、。）で生じる右側の余白を補正し光学的に中央へ寄せる */
      transform: translateX(0.5em);
    }
    .hero__catch .line { display: block; overflow: hidden; padding: 0.04em 0; }
    .hero__catch .line > span {
      display: inline-block;
      transform: translateY(112%);
      animation: lineUp 1.15s var(--ease) forwards;
    }
    .hero__catch .line:nth-child(1) > span { animation-delay: 0.55s; }
    .hero__catch .line:nth-child(2) > span { animation-delay: 0.72s; }
    @keyframes lineUp { to { transform: none; } }

    .hero__sub {
      margin-top: clamp(30px, 4vh, 46px);
      font-size: clamp(0.82rem, 1.15vw, 1rem);
      font-weight: 300;
      line-height: 2.5;
      letter-spacing: 0.08em;
      color: #3a3a3a;
      opacity: 0;
      animation: fadeUp 1.1s 1.7s var(--ease) forwards;
    }
    @keyframes fadeUp { to { opacity: 1; transform: none; } }

    /* vertical scroll cue (right) */
    .hero__scroll {
      position: absolute;
      bottom: 96px; right: clamp(18px, 5vw, 52px);
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      opacity: 0;
      animation: fadeUp 1s 2.4s var(--ease) forwards;
    }
    .hero__scroll span { writing-mode: vertical-rl; font-size: 9px; letter-spacing: 0.4em; color: var(--text-soft); }
    .hero__scroll-line { width: 1px; height: 56px; background: var(--line); position: relative; overflow: hidden; }
    .hero__scroll-line::after {
      content: '';
      position: absolute; top: 0; left: 0;
      width: 100%; height: 100%;
      background: var(--text);
      animation: scrollPulse 2.2s var(--ease) infinite;
    }
    @keyframes scrollPulse {
      0%   { transform: translateY(-100%); }
      50%  { transform: translateY(0); }
      100% { transform: translateY(100%); }
    }

    /* ============================================================
       SECTION HEADING (shared)
    ============================================================ */
    .sec-head { display: flex; align-items: baseline; gap: 20px; }
    .sec-head__en { font-size: 11px; letter-spacing: 0.34em; color: var(--text-soft); }
    .sec-head__line { flex: 1; height: 1px; background: var(--line); }
    .sec-head__ja {
      font-family: "Noto Serif JP", serif;
      font-weight: 400;
      font-size: clamp(1.5rem, 2.6vw, 2.2rem);
      letter-spacing: 0.08em;
    }

    /* ============================================================
       WORKS
    ============================================================ */
    .works {
      padding: clamp(90px, 12vh, 150px) clamp(20px, 5vw, 56px) clamp(40px, 6vh, 80px);
    }
    .works__head { margin-bottom: clamp(48px, 7vh, 88px); }
    .works__head .sec-head { margin-bottom: 14px; }

    .works__list { display: flex; flex-direction: column; }
    .work {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      align-items: stretch;
      gap: clamp(28px, 5vw, 72px);
      padding: clamp(40px, 6vh, 72px) 0;
      border-top: 1px solid var(--line);
    }
    .works__list .work:last-child { border-bottom: 1px solid var(--line); }
    .work:nth-child(even) .work__media { order: 2; }

    .work__media {
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: var(--bg-soft);
    }
    .work__media img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 1.4s var(--ease);
    }
    .work:hover .work__media img { transform: scale(1.05); }
    .work__media::after {
      content: '';
      position: absolute; inset: 0;
      border: 1px solid rgba(0,0,0,0.04);
      pointer-events: none;
    }

    .work__body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 4px 0;
    }
    .work__num { font-size: 11px; letter-spacing: 0.3em; color: var(--text-soft); margin-bottom: 26px; }
    .work__tag {
      display: inline-block;
      width: fit-content;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: var(--text-mid);
      border: 1px solid var(--line);
      padding: 5px 12px;
      margin-bottom: 22px;
    }
    .work__title {
      font-family: "Noto Serif JP", serif;
      font-weight: 400;
      font-size: clamp(1.25rem, 2.2vw, 1.9rem);
      line-height: 1.55;
      letter-spacing: 0.05em;
      margin-bottom: 18px;
    }
    .work__client { font-size: 0.92rem; font-weight: 500; color: var(--text); margin-bottom: 14px; }
    .work__scope {
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.1em;
      line-height: 1.9;
      color: var(--text-soft);
      margin-bottom: 34px;
    }
    .work__more {
      display: inline-flex; align-items: center; gap: 12px;
      width: fit-content;
      font-size: 11px; letter-spacing: 0.18em; font-weight: 500;
    }
    .work__more .bar { width: 40px; height: 1px; background: var(--text); transition: width 0.5s var(--ease); }
    .work:hover .work__more .bar { width: 64px; }

    .works__more {
      display: flex; justify-content: center;
      padding-top: clamp(48px, 7vh, 80px);
    }
    .btn-line {
      display: inline-flex; align-items: center; gap: 16px;
      font-size: 12px; letter-spacing: 0.2em; font-weight: 500;
      padding: 18px 4px;
    }
    .btn-line .bar { width: 48px; height: 1px; background: var(--text); transition: width 0.5s var(--ease); }
    .btn-line:hover .bar { width: 76px; }

    /* ============================================================
       MENU NAV
    ============================================================ */
    .menu-sec {
      background: var(--bg-soft);
      padding: clamp(80px, 11vh, 140px) clamp(20px, 5vw, 56px);
    }
    .menu-sec__label {
      text-align: center;
      font-size: 11px;
      letter-spacing: 0.4em;
      color: var(--text-soft);
      margin-bottom: clamp(40px, 6vh, 64px);
    }
    /* editorial index list */
    .menu-list {
      max-width: 1080px;
      margin: 0 auto;
      border-top: 1px solid var(--line);
    }
    .menu-row {
      position: relative;
      display: grid;
      grid-template-columns: clamp(40px, 5vw, 70px) 1fr auto;
      align-items: center;
      gap: clamp(14px, 3vw, 40px);
      padding: clamp(24px, 3.6vw, 44px) clamp(6px, 2vw, 28px);
      border-bottom: 1px solid var(--line);
      overflow: hidden;
    }
    .menu-row::before {
      content: '';
      position: absolute; inset: 0;
      background: rgba(0,0,0,0.022);
      transform: scaleY(0);
      transform-origin: bottom;
      transition: transform 0.6s var(--ease);
      z-index: 0;
    }
    .menu-row:hover::before { transform: scaleY(1); }
    .menu-row > * { position: relative; z-index: 1; }

    .menu-row__index { font-size: 11px; letter-spacing: 0.26em; color: var(--text-soft); }

    .menu-row__titles {
      display: flex;
      align-items: baseline;
      gap: clamp(12px, 2vw, 26px);
      flex-wrap: wrap;
    }
    .menu-row__en {
      position: relative;
      display: inline-block;
      font-size: clamp(2rem, 5.6vw, 4.2rem);
      font-weight: 300;
      letter-spacing: 0.05em;
      line-height: 1.05;
      color: #cbc9c3;
      transition: transform 0.6s var(--ease);
    }
    .menu-row__en .fill {
      position: absolute; left: 0; top: 0;
      color: var(--text);
      white-space: nowrap;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.7s var(--ease);
    }
    .menu-row:hover .menu-row__en { transform: translateX(clamp(6px, 1vw, 18px)); }
    .menu-row:hover .menu-row__en .fill { clip-path: inset(0 0 0 0); }

    .menu-row__ja {
      font-family: "Noto Serif JP", serif;
      font-size: 0.84rem;
      color: var(--text-mid);
    }
    .menu-row__arrow {
      width: clamp(40px, 4vw, 50px); height: clamp(40px, 4vw, 50px);
      border-radius: 50%;
      border: 1px solid var(--line);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease);
    }
    .menu-row__arrow::before {
      content: '';
      width: 8px; height: 8px;
      border-top: 1px solid var(--text);
      border-right: 1px solid var(--text);
      transform: rotate(45deg);
      transition: border-color 0.5s var(--ease);
    }
    .menu-row:hover .menu-row__arrow { background: var(--text); border-color: var(--text); transform: translateX(6px); }
    .menu-row:hover .menu-row__arrow::before { border-color: #fff; }

    .menu-contact {
      width: fit-content;
      max-width: 100%;
      margin: clamp(46px, 6.5vh, 80px) auto 0;
      background: var(--text);
      color: #fff;
      padding: 15px 15px 15px 38px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: clamp(28px, 4vw, 52px);
      transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
    }
    .menu-contact:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 38px rgba(0,0,0,0.20);
    }
    .menu-contact__en { font-size: clamp(0.98rem, 1.3vw, 1.2rem); font-weight: 300; letter-spacing: 0.16em; }
    .menu-contact__ja { font-family: "Noto Serif JP", serif; font-size: 0.7rem; color: rgba(255,255,255,0.6); margin-top: 5px; }
    .menu-contact__circle {
      width: 46px; height: 46px;
      border-radius: 50%;
      background: #fff;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.5s var(--ease);
    }
    .menu-contact__circle::before {
      content: '';
      width: 8px; height: 8px;
      border-top: 1px solid var(--text);
      border-right: 1px solid var(--text);
      transform: rotate(45deg);
    }
    .menu-contact:hover .menu-contact__circle { transform: translateX(4px); }

    /* ============================================================
       FOOTER
    ============================================================ */
    .footer { padding: clamp(64px, 9vh, 110px) clamp(20px, 5vw, 56px) 36px; }
    .footer__top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 40px;
      padding-bottom: clamp(40px, 6vh, 72px);
      border-bottom: 1px solid var(--line);
    }
    .footer__logo img { height: 22px; width: auto; }
    .footer__tagline { font-size: 11px; letter-spacing: 0.2em; color: var(--text-soft); margin-top: 18px; }
    .footer__nav { display: flex; flex-wrap: wrap; gap: 14px 40px; }
    .footer__nav a {
      position: relative;
      font-size: 12.5px; font-weight: 400; letter-spacing: 0.08em; color: var(--text-mid);
      transition: color 0.4s var(--ease);
    }
    .footer__nav a:hover { color: var(--text); }
    .footer__bottom {
      display: flex; justify-content: space-between; align-items: center;
      flex-wrap: wrap; gap: 12px;
      padding-top: 28px;
    }
    .footer__copy { font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-soft); }
    .footer__copy .en { font-weight: 300; letter-spacing: 0.18em; }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 560px) {
      .menu-row__titles { flex-direction: column; align-items: flex-start; gap: 6px; }
    }
    @media (max-width: 768px) {
      .header__nav { display: none; }
      .header__burger { display: block; z-index: 110; }
      .hero__meta { display: none; }
      .hero__scroll { display: none; }
      .hero__mark { width: min(80vw, 460px); }
      .work {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 44px 0;
      }
      .work:nth-child(even) .work__media { order: 0; }
      .work__client { margin-bottom: 26px; }
      .menu-contact { gap: 22px; padding-left: 30px; }
      .footer__top { flex-direction: column; gap: 28px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; }
      .reveal { opacity: 1; transform: none; }
      .hero__catch .line > span, .hero__sub, .hero__label, .hero__scroll, .hero__meta { opacity: 1; transform: none; }
      .hero__mark { opacity: 1; }
    }