/* Page: cross-interior */
/*
 * BISHOP SUNRISE – Official Website
 * style.css
 * Aesthetic: Silent Craft Studio — refined, editorial, grounded in real work
 */

      /* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
      @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;600&display=swap");

      /* ============================================
   DESIGN TOKENS
   ============================================ */
      :root {
        /* Core palette — warm neutrals */
        --c-bg: #f4f2ed;
        --c-bg-alt: #edebe5;
        --c-surface: #ffffff;
        --c-text: #1a1816;
        --c-text-sub: #6a6760;
        --c-line: #d8d5ce;
        --c-accent: #8a6b3c;
        --c-accent-h: #7a5c2f;
        --c-accent-light: #c4a06a;
        --c-dark: #141210;
        --c-dark-2: #0e0c0a;

        /* Typography */
        --f-serif-ja: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
        --f-sans-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
        --f-en: "Cormorant Garamond", Georgia, serif;

        /* Spacing scale */
        --sp-2xs: 0.25rem;
        --sp-xs: 0.5rem;
        --sp-sm: 1rem;
        --sp-md: 2rem;
        --sp-lg: 4rem;
        --sp-xl: 6.5rem;
        --sp-2xl: 10rem;

        /* Layout */
        --max-w: 1160px;
        --header-h: 60px;
        --gap: 8px;

        /* Easing */
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

        /* Transition */
        --tr-fast: 0.2s ease;
        --tr-base: 0.35s ease;
        --tr-slow: 0.65s var(--ease-reveal);
      }

      /* ============================================
   RESET & BASE
   ============================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        font-size: 16px;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }

      body {
        font-family: var(--f-sans-ja);
        font-weight: 400;
        color: var(--c-text);
        background-color: var(--c-bg);
        line-height: 1.85;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      ul,
      ol {
        list-style: none;
      }
      button {
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
      }
      address {
        font-style: normal;
      }

      /* ============================================
   ACCESSIBILITY
   ============================================ */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

      :focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 3px;
      }

      /* ============================================
   UTILITIES
   ============================================ */
      .container {
        max-width: var(--max-w);
        margin: 0 auto;
        padding-inline: var(--sp-md);
      }

      .text-accent {
        color: var(--c-accent);
      }
      .text-sub {
        color: var(--c-text-sub);
      }

      .divider {
        width: 28px;
        height: 1px;
        background: var(--c-accent);
        margin: var(--sp-sm) 0;
      }

      /* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity var(--tr-slow),
          transform var(--tr-slow);
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .reveal-d1 {
        transition-delay: 0.08s;
      }
      .reveal-d2 {
        transition-delay: 0.16s;
      }
      .reveal-d3 {
        transition-delay: 0.24s;
      }
      .reveal-d4 {
        transition-delay: 0.32s;
      }
      .reveal-d5 {
        transition-delay: 0.4s;
      }

      .img-reveal {
        overflow: hidden;
      }
      .img-reveal img {
        transform: scale(1.06);
        transition: transform 1.3s var(--ease-reveal);
      }
      .img-reveal.is-visible img {
        transform: scale(1);
      }

      /* ============================================
   TYPOGRAPHY — Section headers
   ============================================ */
      .sec-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--c-accent);
        margin-bottom: 0.875rem;
      }

      .sec-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.5rem, 3.5vw, 2.125rem);
        font-weight: 400;
        letter-spacing: 0.025em;
        line-height: 1.55;
      }

      .sec-sub {
        margin-top: 1rem;
        font-size: 0.875rem;
        color: var(--c-text-sub);
        line-height: 2;
        max-width: 560px;
      }

      /* On dark bg */
      .on-dark .sec-label {
        color: rgba(255, 255, 255, 0.35);
      }
      .on-dark .sec-title {
        color: rgba(255, 255, 255, 0.9);
      }
      .on-dark .sec-sub {
        color: rgba(255, 255, 255, 0.5);
      }

      /* ============================================
   BUTTONS
   ============================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem 1.875rem;
        font-family: var(--f-sans-ja);
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1;
        transition:
          background var(--tr-base),
          color var(--tr-base),
          border-color var(--tr-base);
        white-space: nowrap;
      }

      .btn svg {
        flex-shrink: 0;
        transition: transform var(--tr-base);
      }
      .btn:hover svg {
        transform: translateX(3px);
      }

      .btn-dark {
        background: var(--c-text);
        color: #fff;
      }
      .btn-dark:hover {
        background: var(--c-accent);
      }

      .btn-outline {
        border: 1px solid var(--c-text);
        color: var(--c-text);
      }
      .btn-outline:hover {
        background: var(--c-text);
        color: #fff;
      }

      .btn-outline-w {
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: rgba(255, 255, 255, 0.85);
      }
      .btn-outline-w:hover {
        border-color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.07);
      }

      .btn-text {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--c-accent);
        letter-spacing: 0.04em;
      }
      .btn-text svg {
        transition: transform var(--tr-base);
      }
      .btn-text:hover svg {
        transform: translateX(4px);
      }

      /* ============================================
   SITE HEADER
   ============================================ */
      .site-header {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        height: var(--header-h);
        z-index: 100;
        transition:
          background var(--tr-base),
          box-shadow var(--tr-base);
      }

      .site-header.is-scrolled {
        background: rgba(244, 242, 237, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 var(--c-line);
      }

      /* On hero: transparent, white type */
      .site-header.header-hero .logo-en,
      .site-header.header-hero .logo-ja {
        color: rgba(255, 255, 255, 0.9);
      }
      .site-header.header-hero .logo-ja {
        color: rgba(255, 255, 255, 0.45);
      }
      .site-header.header-hero .site-nav a {
        color: rgba(255, 255, 255, 0.8);
      }
      .site-header.header-hero .hamburger span {
        background: #fff;
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        margin: 0 auto;
      }

      /* Logo */
      .site-logo {
        display: flex;
        flex-direction: column;
        gap: 1px;
        line-height: 1;
      }

      .logo-en {
        font-family: var(--f-en);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--c-text);
        transition: color var(--tr-base);
      }

      .logo-ja {
        font-size: 0.575rem;
        color: var(--c-text-sub);
        letter-spacing: 0.06em;
        transition: color var(--tr-base);
      }

      /* Desktop nav */
      .site-nav {
        display: none;
        align-items: center;
        gap: 2.5rem;
      }

      .site-nav a {
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        color: var(--c-text);
        position: relative;
        padding-block: 0.25rem;
        transition: color var(--tr-base);
      }

      .site-nav a::after {
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        width: 0;
        height: 1px;
        background: var(--c-accent);
        transition: width var(--tr-base);
      }

      .site-nav a:hover::after,
      .site-nav a[aria-current="page"]::after {
        width: 100%;
      }

      .nav-cta {
        padding: 0.5rem 1.25rem;
        border: 1px solid var(--c-text) !important;
        font-size: 0.75rem !important;
        transition: background var(--tr-base) !important;
      }

      .site-header.header-hero .nav-cta {
        border-color: rgba(255, 255, 255, 0.45) !important;
      }

      .nav-cta:hover {
        background: var(--c-text);
        color: #fff !important;
      }

      /* ============================================
   HAMBURGER
   ============================================ */
      .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 26px;
        padding: 4px 0;
        cursor: pointer;
        position: relative;
        z-index: 110;
      }

      .hamburger span {
        display: block;
        height: 1px;
        background: var(--c-text);
        transition:
          transform var(--tr-base),
          opacity var(--tr-base);
        transform-origin: center;
      }

      .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      /* ============================================
   MOBILE MENU
   ============================================ */
      .mobile-menu {
        position: fixed;
        inset: 0;
        background: var(--c-dark);
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sp-md);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.45s var(--ease-reveal),
          visibility 0.45s;
      }

      .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
      }

      .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-md);
        text-align: center;
      }

      .mobile-nav-links a {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        color: rgba(255, 255, 255, 0.75);
        letter-spacing: 0.04em;
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease,
          color var(--tr-base);
      }

      .mobile-menu.is-open .mobile-nav-links a {
        opacity: 1;
        transform: translateY(0);
      }

      .mobile-nav-links a:nth-child(1) {
        transition-delay: 0.08s;
      }
      .mobile-nav-links a:nth-child(2) {
        transition-delay: 0.14s;
      }
      .mobile-nav-links a:nth-child(3) {
        transition-delay: 0.2s;
      }
      .mobile-nav-links a:nth-child(4) {
        transition-delay: 0.26s;
      }
      .mobile-nav-links a:nth-child(5) {
        transition-delay: 0.32s;
      }
      .mobile-nav-links a:nth-child(6) {
        transition-delay: 0.38s;
      }

      .mobile-nav-links a:hover {
        color: var(--c-accent-light);
      }

      .mobile-menu-cta {
        margin-top: 1rem;
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity 0.5s ease 0.44s,
          transform 0.5s ease 0.44s;
      }

      .mobile-menu.is-open .mobile-menu-cta {
        opacity: 1;
        transform: translateY(0);
      }

      /* ============================================
   HERO
   ============================================ */
      .hero {
        position: relative;
        height: 100svh;
        min-height: 600px;
        max-height: 1000px;
        display: flex;
        align-items: flex-end;
        padding-block-end: clamp(3rem, 9vh, 6.5rem);
        overflow: hidden;
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        background-color: #1a1614;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYwMCA3MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnaGZsIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNDNEI4OUEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0FGQTA4QSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImdoYnciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0UyRERENiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRDRDRkM4IiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ2hsdyIgeDE9IjEiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRDRDRkM4IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNDOEMzQkMiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJnaHJ3IiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNDOEMzQkMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0IwQUFBMiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImdoY2wiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0RERDlEMiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjQzBCQ0I1IiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ2h3bCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRDhFREY1IiBzdG9wLW9wYWNpdHk9IjAuOTUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNEOEU2RjAiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Imdob3ZybCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTQxMjEwIiBzdG9wLW9wYWNpdHk9IjAuNTUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNDEyMTAiIHN0b3Atb3BhY2l0eT0iMC4xMCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJnaG92cnIiIHgxPSIxIiB5MT0iMCIgeDI9IjAiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE0MTIxMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTQxMjEwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwb2x5Z29uIHBvaW50cz0iMCwwIDMyMCwxNTAgMTI4MCwxNTAgMTYwMCwwIiBmaWxsPSJ1cmwoI2doY2wpIi8+PHBvbHlnb24gcG9pbnRzPSIwLDAgMzIwLDE1MCAzMjAsNTMwIDAsNzAwIiBmaWxsPSJ1cmwoI2dobHcpIi8+PHBvbHlnb24gcG9pbnRzPSIzMjAsMTUwIDEyODAsMTUwIDEyODAsNTMwIDMyMCw1MzAiIGZpbGw9InVybCgjZ2hidykiLz48cG9seWdvbiBwb2ludHM9IjEyODAsMTUwIDE2MDAsMCAxNjAwLDcwMCAxMjgwLDUzMCIgZmlsbD0idXJsKCNnaHJ3KSIvPjxwb2x5Z29uIHBvaW50cz0iMCw3MDAgMzIwLDUzMCAxMjgwLDUzMCAxNjAwLDcwMCIgZmlsbD0idXJsKCNnaGZsKSIvPjxyZWN0IHg9IjQyMCIgeT0iMTkwIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjI1MCIgZmlsbD0idXJsKCNnaHdsKSIvPjxyZWN0IHg9IjQyMCIgeT0iMTkwIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjA5MDYwIiBzdHJva2Utd2lkdGg9IjEwIiByeD0iMiIvPjxsaW5lIHgxPSI1NTAiIHkxPSIxOTAiIHgyPSI1NTAiIHkyPSI0NDAiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PGxpbmUgeDE9IjQyMCIgeTE9IjMxNSIgeDI9IjY4MCIgeTI9IjMxNSIgc3Ryb2tlPSIjQjA5MDYwIiBzdHJva2Utd2lkdGg9IjciLz48cG9seWdvbiBwb2ludHM9IjQyMCw0NDAgNjgwLDQ0MCA4ODAsNzAwIDIyMCw3MDAiIGZpbGw9IiNGRkY1RTAiIG9wYWNpdHk9IjAuMTIiLz48cmVjdCB4PSI5MjAiIHk9IjE5MCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIyNTAiIGZpbGw9InVybCgjZ2h3bCkiLz48cmVjdCB4PSI5MjAiIHk9IjE5MCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIyNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSIxMCIgcng9IjIiLz48bGluZSB4MT0iMTA1MCIgeTE9IjE5MCIgeDI9IjEwNTAiIHkyPSI0NDAiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PGxpbmUgeDE9IjkyMCIgeTE9IjMxNSIgeDI9IjExODAiIHkyPSIzMTUiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PHBvbHlnb24gcG9pbnRzPSI5MjAsNDQwIDExODAsNDQwIDEzODAsNzAwIDcyMCw3MDAiIGZpbGw9IiNGRkY1RTAiIG9wYWNpdHk9IjAuMTIiLz48bGluZSB4MT0iMzA3LjI1IiB5MT0iNTQ1IiB4Mj0iMTI5Mi43NSIgeTI9IjU0NSIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIyODguNTUiIHkxPSI1NjciIHgyPSIxMzExLjQ1IiB5Mj0iNTY3IiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PGxpbmUgeDE9IjI2OS44NSIgeTE9IjU4OSIgeDI9IjEzMzAuMTUiIHkyPSI1ODkiIHN0cm9rZT0iIzk4Nzg0OCIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9IjAuMTgiLz48bGluZSB4MT0iMjUxLjE1IiB5MT0iNjExIiB4Mj0iMTM0OC44NSIgeTI9IjYxMSIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIyMzIuNDUiIHkxPSI2MzMiIHgyPSIxMzY3LjU1IiB5Mj0iNjMzIiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PGxpbmUgeDE9IjIxMy43NSIgeTE9IjY1NSIgeDI9IjEzODYuMjUiIHkyPSI2NTUiIHN0cm9rZT0iIzk4Nzg0OCIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9IjAuMTgiLz48bGluZSB4MT0iMTk1LjA1IiB5MT0iNjc3IiB4Mj0iMTQwNC45NSIgeTI9IjY3NyIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIxNzYuMzUiIHkxPSI2OTkiIHgyPSIxNDIzLjY1IiB5Mj0iNjk5IiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PHJlY3QgeD0iMzIwIiB5PSI1MjAiIHdpZHRoPSI5NjAiIGhlaWdodD0iMTIiIGZpbGw9IiNDNEI4OUEiIG9wYWNpdHk9IjAuNiIvPjxsaW5lIHgxPSIzMjAiIHkxPSI1MzAiIHgyPSIwIiB5Mj0iNzAwIiBzdHJva2U9IiNDNEI4OUEiIHN0cm9rZS13aWR0aD0iOCIgb3BhY2l0eT0iMC40Ii8+PGxpbmUgeDE9IjEyODAiIHkxPSI1MzAiIHgyPSIxNjAwIiB5Mj0iNzAwIiBzdHJva2U9IiNDNEI4OUEiIHN0cm9rZS13aWR0aD0iOCIgb3BhY2l0eT0iMC40Ii8+PHBvbHlnb24gcG9pbnRzPSIzMjAsMTUwIDM0MiwxNjIgMzQyLDUzNiAzMjAsNTMwIiBmaWxsPSIjMTQxMjEwIiBvcGFjaXR5PSIwLjEwIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgwLDE1MCAxMjU4LDE2MiAxMjU4LDUzNiAxMjgwLDUzMCIgZmlsbD0iIzE0MTIxMCIgb3BhY2l0eT0iMC4wOCIvPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjcwMCIgZmlsbD0idXJsKCNnaG92cmwpIi8+PC9zdmc+");
        background-size: cover;
        background-position: center 35%;
        will-change: transform;
      }

      .hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 9, 7, 0.88) 0%, rgba(10, 9, 7, 0.45) 45%, rgba(10, 9, 7, 0.18) 100%);
      }

      .hero-content {
        position: relative;
        z-index: 1;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        width: 100%;
        margin: 0 auto;
      }

      .hero-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.65rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-block-end: 1.25rem;
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.3s both;
      }

      .hero-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(2.25rem, 8vw, 5.25rem);
        font-weight: 400;
        color: #fff;
        line-height: 1.3;
        letter-spacing: 0.015em;
        margin-block-end: var(--sp-md);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.5s both;
      }

      .hero-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 2;
        max-width: 500px;
        margin-block-end: var(--sp-lg);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.7s both;
      }

      .hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-sm);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.9s both;
      }

      /* Scroll indicator */
      .hero-scroll {
        position: absolute;
        inset-block-end: var(--sp-md);
        inset-inline-end: var(--sp-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--f-en);
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        animation: fadeIn 1s ease 1.3s both;
      }

      .hero-scroll-line {
        width: 1px;
        height: 42px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3));
        animation: scrollPulse 2.2s ease-in-out infinite 1.6s;
      }

      /* ============================================
   SECTIONS — common
   ============================================ */
      .sec {
        padding-block: var(--sp-xl);
      }
      .sec-alt {
        background: var(--c-bg-alt);
      }
      .sec-dark {
        background: var(--c-dark);
        color: #fff;
      }
      .sec-dark-2 {
        background: var(--c-dark-2);
        color: #fff;
      }

      .sec-header {
        margin-block-end: var(--sp-lg);
      }
      .sec-header-center {
        text-align: center;
      }
      .sec-header-center .sec-sub {
        margin-inline: auto;
      }

      /* ============================================
   ABOUT SECTION
   ============================================ */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: center;
      }

      .about-img-wrap {
        position: relative;
        aspect-ratio: 4 / 3;
        background: var(--c-bg-alt);
        overflow: hidden;
      }

      .about-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        transition: transform 1.4s var(--ease-reveal);
      }

      .about-img-wrap.is-visible img {
        transform: scale(1);
      }

      .about-badge {
        position: absolute;
        inset-block-end: var(--sp-sm);
        inset-inline-end: var(--sp-sm);
        background: var(--c-dark);
        color: rgba(255, 255, 255, 0.85);
        padding: 0.75rem 1rem;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        line-height: 1.7;
        font-family: var(--f-sans-ja);
      }

      .about-body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .about-heading {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.02em;
      }

      .about-text {
        font-size: 0.9rem;
        color: var(--c-text-sub);
        line-height: 2.1;
      }

      .about-text strong {
        color: var(--c-text);
        font-weight: 500;
      }

      .about-qualification {
        border-left: 2px solid var(--c-accent);
        padding-left: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
      }

      .about-qual-label {
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-accent);
      }

      .about-qual-name {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        color: var(--c-text);
        line-height: 1.5;
      }

      .about-qual-desc {
        font-size: 0.78rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* ============================================
   SERVICES SECTION
   ============================================ */
      .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--gap);
      }

      .service-card {
        display: block;
        background: var(--c-surface);
        overflow: hidden;
        position: relative;
        transition: box-shadow var(--tr-base);
      }

      .service-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
      }

      .service-card-img {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--c-bg-alt);
        position: relative;
      }

      .service-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.9s var(--ease-reveal);
      }

      .service-card:hover .service-card-img img {
        transform: scale(1.05);
      }

      .service-card-body {
        padding: var(--sp-md);
      }

      .service-card-num {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        color: var(--c-accent);
        margin-block-end: 0.5rem;
      }

      .service-card-title {
        font-family: var(--f-serif-ja);
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        margin-block-end: 0.75rem;
      }

      .service-card-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
        margin-block-end: 1rem;
      }

      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
      }

      .tag {
        font-size: 0.68rem;
        padding: 0.25rem 0.625rem;
        border: 1px solid var(--c-line);
        color: var(--c-text-sub);
        letter-spacing: 0.03em;
      }

      /* ============================================
   REASONS SECTION
   ============================================ */
      .reasons-list {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--c-line);
      }

      .reason-item {
        display: grid;
        grid-template-columns: 36px 1fr;
        gap: var(--sp-sm);
        padding-block: var(--sp-md);
        border-bottom: 1px solid var(--c-line);
        align-items: start;
        transition: background var(--tr-fast);
      }

      .reason-item:hover {
        background: var(--c-bg-alt);
      }

      .reason-num {
        font-family: var(--f-en);
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        color: var(--c-accent);
        padding-top: 0.2rem;
      }

      .reason-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.4rem;
        letter-spacing: 0.02em;
      }

      .reason-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
      }

      /* ============================================
   GALLERY SECTION
   ============================================ */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        margin-block-start: var(--sp-lg);
      }

      .gallery-item {
        overflow: hidden;
        background: #222;
        position: relative;
      }

      .gallery-item:first-child {
        grid-column: 1 / -1;
      }

      .gallery-item-inner {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        position: relative;
      }

      .gallery-item:first-child .gallery-item-inner {
        aspect-ratio: 16 / 7;
      }

      .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s var(--ease-reveal);
      }

      .gallery-item:hover img {
        transform: scale(1.05);
      }

      .gallery-caption {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        padding: 0.75rem 1rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        opacity: 0;
        transform: translateY(4px);
        transition:
          opacity var(--tr-base),
          transform var(--tr-base);
      }

      .gallery-item:hover .gallery-caption {
        opacity: 1;
        transform: translateY(0);
      }

      /* ============================================
   B2B SECTION
   ============================================ */
      .b2b-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
      }

      .b2b-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
      }

      .b2b-card {
        background: var(--c-surface);
        padding: var(--sp-md);
        border-top: 2px solid var(--c-accent);
        transition: box-shadow var(--tr-base);
      }

      .b2b-card:hover {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
      }

      .b2b-card-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--c-accent);
        margin-block-end: 0.5rem;
      }

      .b2b-card-title {
        font-family: var(--f-serif-ja);
        font-size: 1.1rem;
        font-weight: 400;
        margin-block-end: 0.75rem;
      }

      .b2b-card-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
        margin-block-end: var(--sp-sm);
      }

      /* ============================================
   AREA SECTION
   ============================================ */
      .area-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: start;
      }

      .area-main-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.375rem, 3.5vw, 1.875rem);
        font-weight: 400;
        line-height: 1.6;
        margin-block-end: var(--sp-sm);
      }

      .area-desc {
        font-size: 0.875rem;
        color: var(--c-text-sub);
        line-height: 2;
        margin-block-end: var(--sp-md);
      }

      .area-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-end: var(--sp-sm);
      }

      .area-tag {
        padding: 0.375rem 0.875rem;
        background: var(--c-bg-alt);
        border: 1px solid var(--c-line);
        font-size: 0.78rem;
        color: var(--c-text-sub);
      }

      .area-note {
        font-size: 0.78rem;
        color: var(--c-text-sub);
      }

      .area-address {
        padding: var(--sp-md);
        background: var(--c-surface);
        border-top: 2px solid var(--c-line);
      }

      .area-address dt {
        font-size: 0.68rem;
        color: var(--c-text-sub);
        letter-spacing: 0.06em;
        margin-block-end: 0.25rem;
      }

      .area-address dd {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        line-height: 1.7;
        margin-block-end: 0.75rem;
      }

      .area-address dd:last-child {
        margin-block-end: 0;
      }

      /* ============================================
   CTA SECTION
   ============================================ */
      .cta-sec {
        background: var(--c-dark);
        padding-block: var(--sp-xl);
        text-align: center;
      }

      .cta-sec-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.65rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        margin-block-end: 1rem;
      }

      .cta-sec-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        color: rgba(255, 255, 255, 0.9);
        font-weight: 400;
        line-height: 1.6;
        margin-block-end: 0.875rem;
      }

      .cta-sec-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.48);
        line-height: 2;
        max-width: 500px;
        margin: 0 auto var(--sp-lg);
      }

      .cta-sec-btns {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-sm);
      }

      .cta-sec-note {
        display: block;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.25);
        margin-block-start: 1rem;
        line-height: 1.8;
      }

      /* ============================================
   COMPANY TABLE
   ============================================ */
      .company-table {
        width: 100%;
        border-collapse: collapse;
      }

      .company-table tr {
        border-bottom: 1px solid var(--c-line);
      }

      .company-table th,
      .company-table td {
        padding: 0.875rem 0;
        font-size: 0.875rem;
        text-align: left;
        vertical-align: top;
      }

      .company-table th {
        font-weight: 500;
        color: var(--c-text-sub);
        white-space: nowrap;
        padding-right: var(--sp-md);
        width: 120px;
      }

      .company-table td {
        color: var(--c-text);
        line-height: 1.8;
      }

      /* ============================================
   FOOTER
   ============================================ */
      .site-footer {
        background: var(--c-dark-2);
        color: rgba(255, 255, 255, 0.5);
        padding-block: var(--sp-xl) var(--sp-md);
      }

      .footer-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        margin-block-end: var(--sp-lg);
      }

      .footer-brand-name {
        font-family: var(--f-en);
        font-size: 1.2rem;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.82);
        margin-block-end: 0.375rem;
      }

      .footer-brand-sub {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.32);
        letter-spacing: 0.05em;
        line-height: 1.8;
      }

      .footer-brand-addr {
        margin-block-start: 0.875rem;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.38);
        line-height: 1.85;
      }

      .footer-nav-head {
        font-family: var(--f-en);
        font-size: 0.6rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        margin-block-end: 0.875rem;
      }

      .footer-nav-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .footer-nav-list a {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.48);
        transition: color var(--tr-base);
      }

      .footer-nav-list a:hover {
        color: rgba(255, 255, 255, 0.82);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding-top: var(--sp-sm);
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
      }

      .footer-copy {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.22);
      }

      /* ============================================
   BREADCRUMB
   ============================================ */
      .breadcrumb {
        padding: calc(var(--header-h) + 1rem) 0 0.75rem;
        font-size: 0.72rem;
      }

      .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.375rem;
        align-items: center;
        color: var(--c-text-sub);
      }

      .breadcrumb li a {
        color: var(--c-text-sub);
        transition: color var(--tr-base);
      }

      .breadcrumb li a:hover {
        color: var(--c-accent);
      }
      .breadcrumb li + li::before {
        content: "/";
        color: var(--c-line);
      }
      .breadcrumb li:last-child {
        color: var(--c-text);
      }

      /* ============================================
   SUB-PAGE HERO
   ============================================ */
      .sub-hero {
        position: relative;
        height: 50vw;
        max-height: 460px;
        min-height: 260px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding-block-end: var(--sp-lg);
      }

      .sub-hero-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-color: var(--c-dark);
      }

      .sub-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 9, 7, 0.82) 0%, rgba(10, 9, 7, 0.3) 100%);
      }

      .sub-hero-content {
        position: relative;
        z-index: 1;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        width: 100%;
        margin: 0 auto;
      }

      .sub-hero-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
        margin-block-end: 0.75rem;
        animation: fadeUpHero 0.8s ease 0.2s both;
      }

      .sub-hero-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.75rem, 5vw, 3.25rem);
        font-weight: 400;
        color: #fff;
        line-height: 1.4;
        letter-spacing: 0.015em;
        animation: fadeUpHero 0.8s ease 0.35s both;
      }

      .sub-hero-desc {
        margin-block-start: 0.875rem;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.52);
        max-width: 500px;
        line-height: 1.95;
        animation: fadeUpHero 0.8s ease 0.5s both;
      }

      /* ============================================
   SERVICE DETAIL (sub-pages)
   ============================================ */
      .sd-intro {
        padding-block: var(--sp-xl);
      }

      .sd-intro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: center;
      }

      .sd-heading {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.3rem, 3vw, 1.75rem);
        font-weight: 400;
        margin-block-end: var(--sp-sm);
        line-height: 1.6;
      }

      .sd-text {
        font-size: 0.9rem;
        color: var(--c-text-sub);
        line-height: 2.1;
        margin-block-end: 0.875rem;
      }

      .sd-text strong {
        color: var(--c-text);
        font-weight: 500;
      }

      .sd-img {
        overflow: hidden;
        background: var(--c-bg-alt);
      }

      .sd-img img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform 1s var(--ease-reveal);
      }

      .sd-img.is-visible img {
        transform: scale(1);
      }

      /* Service items grid */
      .sv-items {
        padding-block: var(--sp-xl);
      }

      .sv-items-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-lg);
      }

      .sv-item {
        background: var(--c-surface);
        padding: var(--sp-md);
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: var(--sp-sm);
        align-items: start;
        transition: box-shadow var(--tr-base);
      }

      .sv-item:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
      }

      .sv-item-icon {
        width: 44px;
        height: 44px;
        border: 1px solid var(--c-line);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--c-accent);
      }

      .sv-item-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .sv-item-desc {
        font-size: 0.8rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* Process flow */
      .process-steps {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--c-line);
        margin-block-start: var(--sp-lg);
      }

      .process-step {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: var(--sp-sm);
        padding-block: var(--sp-md);
        border-bottom: 1px solid var(--c-line);
        align-items: start;
      }

      .process-step-num {
        font-family: var(--f-en);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        color: var(--c-accent);
        padding-top: 0.3rem;
      }

      .process-step-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .process-step-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
      }

      /* Cases */
      .cases-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-lg);
      }

      .case-card {
        background: var(--c-surface);
        padding: var(--sp-md);
        border-left: 2px solid var(--c-line);
        transition:
          border-color var(--tr-base),
          box-shadow var(--tr-base);
      }

      .case-card:hover {
        border-left-color: var(--c-accent);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      }

      .case-card-title {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .case-card-desc {
        font-size: 0.8rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* Work images */
      .work-imgs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        margin-block-start: var(--sp-lg);
      }

      .work-img-item {
        overflow: hidden;
        background: #252220;
      }

      .work-img-item:first-child {
        grid-column: 1 / -1;
      }

      .work-img-item img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform 0.9s var(--ease-reveal);
      }

      .work-img-item:first-child img {
        aspect-ratio: 16 / 7;
      }
      .work-img-item:hover img {
        transform: scale(1.04);
      }

      /* Related services */
      .related-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-md);
      }

      .related-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-sm);
        padding: var(--sp-md);
        background: var(--c-bg-alt);
        overflow: hidden;
        position: relative;
        transition: background var(--tr-base);
      }

      .related-link::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 2px;
        background: var(--c-accent);
        transform: scaleY(0);
        transition: transform var(--tr-base);
      }

      .related-link:hover {
        background: var(--c-surface);
      }
      .related-link:hover::before {
        transform: scaleY(1);
      }

      .related-link-inner {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .related-link-sub {
        font-size: 0.7rem;
        color: var(--c-text-sub);
      }

      .related-link-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
      }

      .related-link-arrow {
        color: var(--c-accent);
        flex-shrink: 0;
        transition: transform var(--tr-base);
      }

      .related-link:hover .related-link-arrow {
        transform: translateX(4px);
      }

      /* ============================================
   KEYFRAMES
   ============================================ */
      @keyframes fadeUpHero {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes scrollPulse {
        0% {
          opacity: 0;
          transform: scaleY(0);
          transform-origin: top;
        }
        50% {
          opacity: 1;
          transform: scaleY(1);
          transform-origin: top;
        }
        51% {
          transform-origin: bottom;
        }
        100% {
          opacity: 0;
          transform: scaleY(0);
          transform-origin: bottom;
        }
      }

      /* ============================================
   RESPONSIVE — Tablet 768px+
   ============================================ */
      @media (min-width: 768px) {
        :root {
          --header-h: 68px;
        }

        .about-grid {
          grid-template-columns: 1fr 1fr;
        }

        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .b2b-cards {
          grid-template-columns: repeat(2, 1fr);
        }

        .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .gallery-item:first-child {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
        }
        .gallery-item:first-child .gallery-item-inner {
          aspect-ratio: unset;
          height: 100%;
        }

        .cta-sec-btns {
          flex-direction: row;
          justify-content: center;
        }

        .area-inner {
          grid-template-columns: 1fr 1fr;
        }

        .sd-intro-grid {
          grid-template-columns: 1fr 1fr;
        }

        .sv-items-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .cases-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .work-imgs-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .related-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .footer-inner {
          grid-template-columns: 2fr 1fr 1fr;
        }

        .company-table th {
          width: 160px;
        }
      }

      /* ============================================
   RESPONSIVE — Desktop 1024px+
   ============================================ */
      @media (min-width: 1024px) {
        .site-nav {
          display: flex;
        }
        .hamburger {
          display: none;
        }

        .sv-items-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .cases-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .about-grid {
          grid-template-columns: 5fr 6fr;
          gap: var(--sp-xl);
        }
      }

      /* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        html {
          scroll-behavior: auto;
        }

        .reveal,
        .img-reveal {
          opacity: 1 !important;
          transform: none !important;
        }

        .img-reveal img {
          transform: none !important;
        }
      }

      /* ============================================
   CLEANING PAGE — Specific Styles
   ============================================ */

      /* Cleaning items grid */
      .cleaning-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-md);
      }

      .cleaning-item {
        padding: var(--sp-lg);
        border: 1px solid var(--c-border);
        background: var(--c-bg);
        transition:
          border-color var(--ease-base) 0.25s,
          transform var(--ease-base) 0.25s;
      }

      .cleaning-item:hover {
        border-color: var(--c-accent);
        transform: translateY(-2px);
      }

      .cleaning-icon {
        color: var(--c-accent);
        margin-bottom: var(--sp-sm);
      }

      .cleaning-item h3 {
        font-family: var(--font-serif-jp);
        font-size: 1rem;
        font-weight: 500;
        color: var(--c-dark);
        margin-bottom: 0.5rem;
      }

      .cleaning-item p {
        font-size: 0.875rem;
        line-height: 1.75;
        color: var(--c-mid);
      }

      /* Cleaning gallery */
      .cleaning-gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
      }

      .cleaning-gallery-main img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
      }

      .cleaning-gallery-sub {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-sm);
      }

      .cleaning-gallery-item img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
        transition: transform var(--ease-base) 0.4s;
      }

      .cleaning-gallery-item:hover img {
        transform: scale(1.03);
      }

      /* For-whom grid */
      .for-whom-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-md);
      }

      .for-whom-card {
        padding: var(--sp-lg);
        border-left: 2px solid var(--c-accent);
        background: var(--c-bg);
      }

      .for-whom-tag {
        font-family: var(--font-serif-jp);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--c-accent);
        margin-bottom: var(--sp-xs);
        letter-spacing: 0.04em;
      }

      .for-whom-card p {
        font-size: 0.9375rem;
        line-height: 1.75;
        color: var(--c-mid);
      }

      /* Property types list */
      .property-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--c-border);
      }

      .property-item {
        padding: var(--sp-md) 0;
        border-bottom: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        gap: var(--sp-sm);
      }

      .property-item::before {
        content: "";
        display: block;
        width: 24px;
        height: 1px;
        background: var(--c-accent);
        flex-shrink: 0;
      }

      .property-item span {
        font-size: 0.9375rem;
        color: var(--c-dark);
        line-height: 1.6;
      }

      /* Related links */
      .related-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
      }

      .related-link-card {
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--c-border);
        overflow: hidden;
        transition: border-color var(--ease-base) 0.25s;
      }

      .related-link-card:hover {
        border-color: var(--c-accent);
      }

      .related-link-image {
        overflow: hidden;
      }

      .related-link-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        transition: transform var(--ease-base) 0.5s;
      }

      .related-link-card:hover .related-link-image img {
        transform: scale(1.03);
      }

      .related-link-body {
        padding: var(--sp-lg);
      }

      .related-link-label {
        font-family: var(--font-en);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--c-accent);
        margin-bottom: 0.5rem;
        font-weight: 400;
      }

      .related-link-body h3 {
        font-family: var(--font-serif-jp);
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--c-dark);
        margin-bottom: 0.5rem;
      }

      .related-link-body p {
        font-size: 0.875rem;
        line-height: 1.75;
        color: var(--c-mid);
        margin-bottom: var(--sp-sm);
      }

      .related-link-cta {
        font-size: 0.875rem;
        color: var(--c-accent);
        font-weight: 500;
      }

      /* ============================================
   CLEANING PAGE — Responsive
   ============================================ */
      @media (min-width: 768px) {
        .cleaning-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .cleaning-gallery-main img {
          height: 420px;
        }

        .cleaning-gallery-sub {
          grid-template-columns: repeat(3, 1fr);
        }

        .cleaning-gallery-item img {
          height: 200px;
        }

        .for-whom-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .property-list {
          grid-template-columns: repeat(2, 1fr);
        }

        .property-item {
          border-right: none;
        }

        .related-links {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 1024px) {
        .cleaning-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .cleaning-gallery {
          grid-template-columns: 3fr 2fr;
          grid-template-rows: auto;
        }

        .cleaning-gallery-main {
          grid-row: 1;
        }

        .cleaning-gallery-main img {
          height: 100%;
          min-height: 460px;
        }

        .cleaning-gallery-sub {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(3, 1fr);
          gap: var(--sp-sm);
        }

        .cleaning-gallery-item img {
          height: 100%;
          min-height: 140px;
        }

        .for-whom-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .property-list {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* ============================================
   SUB-HERO IMG VARIANT (cleaning, b2b pages)
   ============================================ */
      .sub-hero {
        position: relative;
        overflow: hidden;
      }
      .sub-hero-image {
        position: relative;
        width: 100%;
        height: 420px;
      }
      @media (min-width: 768px) {
        .sub-hero-image {
          height: 560px;
        }
      }
      @media (min-width: 1024px) {
        .sub-hero-image {
          height: 680px;
        }
      }

      .sub-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }
      .sub-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(20, 18, 16, 0.45) 0%, rgba(20, 18, 16, 0.55) 100%);
      }
      /* sub-hero-content over the image */
      .sub-hero .sub-hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--sp-xl) var(--sp-lg);
        z-index: 2;
      }
      @media (min-width: 768px) {
        .sub-hero .sub-hero-content {
          padding: var(--sp-2xl) var(--sp-xl);
        }
      }
    


      /*
 * BISHOP SUNRISE – Official Website
 * style.css
 * Aesthetic: Silent Craft Studio — refined, editorial, grounded in real work
 */

      /* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
      @import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Noto+Sans+JP:wght@400;500&family=Noto+Serif+JP:wght@400;600&display=swap");

      /* ============================================
   DESIGN TOKENS
   ============================================ */
      :root {
        /* Core palette — warm neutrals */
        --c-bg: #f4f2ed;
        --c-bg-alt: #edebe5;
        --c-surface: #ffffff;
        --c-text: #1a1816;
        --c-text-sub: #6a6760;
        --c-line: #d8d5ce;
        --c-accent: #8a6b3c;
        --c-accent-h: #7a5c2f;
        --c-accent-light: #c4a06a;
        --c-dark: #141210;
        --c-dark-2: #0e0c0a;

        /* Typography */
        --f-serif-ja: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
        --f-sans-ja: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
        --f-en: "Cormorant Garamond", Georgia, serif;

        /* Spacing scale */
        --sp-2xs: 0.25rem;
        --sp-xs: 0.5rem;
        --sp-sm: 1rem;
        --sp-md: 2rem;
        --sp-lg: 4rem;
        --sp-xl: 6.5rem;
        --sp-2xl: 10rem;

        /* Layout */
        --max-w: 1160px;
        --header-h: 60px;
        --gap: 8px;

        /* Easing */
        --ease-out: cubic-bezier(0, 0, 0.2, 1);
        --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);

        /* Transition */
        --tr-fast: 0.2s ease;
        --tr-base: 0.35s ease;
        --tr-slow: 0.65s var(--ease-reveal);
      }

      /* ============================================
   RESET & BASE
   ============================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html {
        font-size: 16px;
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
      }

      body {
        font-family: var(--f-sans-ja);
        font-weight: 400;
        color: var(--c-text);
        background-color: var(--c-bg);
        line-height: 1.85;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
      }

      img {
        display: block;
        max-width: 100%;
        height: auto;
      }

      a {
        color: inherit;
        text-decoration: none;
      }
      ul,
      ol {
        list-style: none;
      }
      button {
        cursor: pointer;
        background: none;
        border: none;
        font-family: inherit;
      }
      address {
        font-style: normal;
      }

      /* ============================================
   ACCESSIBILITY
   ============================================ */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }

      :focus-visible {
        outline: 2px solid var(--c-accent);
        outline-offset: 3px;
      }

      /* ============================================
   UTILITIES
   ============================================ */
      .container {
        max-width: var(--max-w);
        margin: 0 auto;
        padding-inline: var(--sp-md);
      }

      .text-accent {
        color: var(--c-accent);
      }
      .text-sub {
        color: var(--c-text-sub);
      }

      .divider {
        width: 28px;
        height: 1px;
        background: var(--c-accent);
        margin: var(--sp-sm) 0;
      }

      /* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
      .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition:
          opacity var(--tr-slow),
          transform var(--tr-slow);
      }
      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .reveal-d1 {
        transition-delay: 0.08s;
      }
      .reveal-d2 {
        transition-delay: 0.16s;
      }
      .reveal-d3 {
        transition-delay: 0.24s;
      }
      .reveal-d4 {
        transition-delay: 0.32s;
      }
      .reveal-d5 {
        transition-delay: 0.4s;
      }

      .img-reveal {
        overflow: hidden;
      }
      .img-reveal img {
        transform: scale(1.06);
        transition: transform 1.3s var(--ease-reveal);
      }
      .img-reveal.is-visible img {
        transform: scale(1);
      }

      /* ============================================
   TYPOGRAPHY — Section headers
   ============================================ */
      .sec-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.68rem;
        font-weight: 400;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--c-accent);
        margin-bottom: 0.875rem;
      }

      .sec-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.5rem, 3.5vw, 2.125rem);
        font-weight: 400;
        letter-spacing: 0.025em;
        line-height: 1.55;
      }

      .sec-sub {
        margin-top: 1rem;
        font-size: 0.875rem;
        color: var(--c-text-sub);
        line-height: 2;
        max-width: 560px;
      }

      /* On dark bg */
      .on-dark .sec-label {
        color: rgba(255, 255, 255, 0.35);
      }
      .on-dark .sec-title {
        color: rgba(255, 255, 255, 0.9);
      }
      .on-dark .sec-sub {
        color: rgba(255, 255, 255, 0.5);
      }

      /* ============================================
   BUTTONS
   ============================================ */
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.875rem 1.875rem;
        font-family: var(--f-sans-ja);
        font-size: 0.85rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 1;
        transition:
          background var(--tr-base),
          color var(--tr-base),
          border-color var(--tr-base);
        white-space: nowrap;
      }

      .btn svg {
        flex-shrink: 0;
        transition: transform var(--tr-base);
      }
      .btn:hover svg {
        transform: translateX(3px);
      }

      .btn-dark {
        background: var(--c-text);
        color: #fff;
      }
      .btn-dark:hover {
        background: var(--c-accent);
      }

      .btn-outline {
        border: 1px solid var(--c-text);
        color: var(--c-text);
      }
      .btn-outline:hover {
        background: var(--c-text);
        color: #fff;
      }

      .btn-outline-w {
        border: 1px solid rgba(255, 255, 255, 0.4);
        color: rgba(255, 255, 255, 0.85);
      }
      .btn-outline-w:hover {
        border-color: rgba(255, 255, 255, 0.85);
        background: rgba(255, 255, 255, 0.07);
      }

      .btn-text {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--c-accent);
        letter-spacing: 0.04em;
      }
      .btn-text svg {
        transition: transform var(--tr-base);
      }
      .btn-text:hover svg {
        transform: translateX(4px);
      }

      /* ============================================
   SITE HEADER
   ============================================ */
      .site-header {
        position: fixed;
        inset-block-start: 0;
        inset-inline: 0;
        height: var(--header-h);
        z-index: 100;
        transition:
          background var(--tr-base),
          box-shadow var(--tr-base);
      }

      .site-header.is-scrolled {
        background: rgba(244, 242, 237, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 var(--c-line);
      }

      /* On hero: transparent, white type */
      .site-header.header-hero .logo-en,
      .site-header.header-hero .logo-ja {
        color: rgba(255, 255, 255, 0.9);
      }
      .site-header.header-hero .logo-ja {
        color: rgba(255, 255, 255, 0.45);
      }
      .site-header.header-hero .site-nav a {
        color: rgba(255, 255, 255, 0.8);
      }
      .site-header.header-hero .hamburger span {
        background: #fff;
      }

      .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        margin: 0 auto;
      }

      /* Logo */
      .site-logo {
        display: flex;
        flex-direction: column;
        gap: 1px;
        line-height: 1;
      }

      .logo-en {
        font-family: var(--f-en);
        font-size: 1.125rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        color: var(--c-text);
        transition: color var(--tr-base);
      }

      .logo-ja {
        font-size: 0.575rem;
        color: var(--c-text-sub);
        letter-spacing: 0.06em;
        transition: color var(--tr-base);
      }

      /* Desktop nav */
      .site-nav {
        display: none;
        align-items: center;
        gap: 2.5rem;
      }

      .site-nav a {
        font-size: 0.78rem;
        letter-spacing: 0.04em;
        color: var(--c-text);
        position: relative;
        padding-block: 0.25rem;
        transition: color var(--tr-base);
      }

      .site-nav a::after {
        content: "";
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 0;
        width: 0;
        height: 1px;
        background: var(--c-accent);
        transition: width var(--tr-base);
      }

      .site-nav a:hover::after,
      .site-nav a[aria-current="page"]::after {
        width: 100%;
      }

      .nav-cta {
        padding: 0.5rem 1.25rem;
        border: 1px solid var(--c-text) !important;
        font-size: 0.75rem !important;
        transition: background var(--tr-base) !important;
      }

      .site-header.header-hero .nav-cta {
        border-color: rgba(255, 255, 255, 0.45) !important;
      }

      .nav-cta:hover {
        background: var(--c-text);
        color: #fff !important;
      }

      /* ============================================
   HAMBURGER
   ============================================ */
      .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 26px;
        padding: 4px 0;
        cursor: pointer;
        position: relative;
        z-index: 110;
      }

      .hamburger span {
        display: block;
        height: 1px;
        background: var(--c-text);
        transition:
          transform var(--tr-base),
          opacity var(--tr-base);
        transform-origin: center;
      }

      .hamburger[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
      }
      .hamburger[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      .hamburger[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
      }

      /* ============================================
   MOBILE MENU
   ============================================ */
      .mobile-menu {
        position: fixed;
        inset: 0;
        background: var(--c-dark);
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--sp-md);
        opacity: 0;
        visibility: hidden;
        transition:
          opacity 0.45s var(--ease-reveal),
          visibility 0.45s;
      }

      .mobile-menu.is-open {
        opacity: 1;
        visibility: visible;
      }

      .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-md);
        text-align: center;
      }

      .mobile-nav-links a {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        color: rgba(255, 255, 255, 0.75);
        letter-spacing: 0.04em;
        opacity: 0;
        transform: translateY(14px);
        transition:
          opacity 0.5s ease,
          transform 0.5s ease,
          color var(--tr-base);
      }

      .mobile-menu.is-open .mobile-nav-links a {
        opacity: 1;
        transform: translateY(0);
      }

      .mobile-nav-links a:nth-child(1) {
        transition-delay: 0.08s;
      }
      .mobile-nav-links a:nth-child(2) {
        transition-delay: 0.14s;
      }
      .mobile-nav-links a:nth-child(3) {
        transition-delay: 0.2s;
      }
      .mobile-nav-links a:nth-child(4) {
        transition-delay: 0.26s;
      }
      .mobile-nav-links a:nth-child(5) {
        transition-delay: 0.32s;
      }
      .mobile-nav-links a:nth-child(6) {
        transition-delay: 0.38s;
      }

      .mobile-nav-links a:hover {
        color: var(--c-accent-light);
      }

      .mobile-menu-cta {
        margin-top: 1rem;
        opacity: 0;
        transform: translateY(12px);
        transition:
          opacity 0.5s ease 0.44s,
          transform 0.5s ease 0.44s;
      }

      .mobile-menu.is-open .mobile-menu-cta {
        opacity: 1;
        transform: translateY(0);
      }

      /* ============================================
   HERO
   ============================================ */
      .hero {
        position: relative;
        height: 100svh;
        min-height: 600px;
        max-height: 1000px;
        display: flex;
        align-items: flex-end;
        padding-block-end: clamp(3rem, 9vh, 6.5rem);
        overflow: hidden;
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        background-color: #1a1614;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYwMCA3MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJnaGZsIiB4MT0iMCIgeTE9IjAiIHgyPSIwIiB5Mj0iMSIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNDNEI4OUEiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0FGQTA4QSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImdoYnciIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0UyRERENiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRDRDRkM4IiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ2hsdyIgeDE9IjEiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRDRDRkM4IiBzdG9wLW9wYWNpdHk9IjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNDOEMzQkMiIHN0b3Atb3BhY2l0eT0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJnaHJ3IiB4MT0iMCIgeTE9IjAiIHgyPSIxIiB5Mj0iMCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNDOEMzQkMiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0IwQUFBMiIgc3RvcC1vcGFjaXR5PSIxIi8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9ImdoY2wiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0RERDlEMiIgc3RvcC1vcGFjaXR5PSIxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjQzBCQ0I1IiBzdG9wLW9wYWNpdHk9IjEiLz48L2xpbmVhckdyYWRpZW50PjxsaW5lYXJHcmFkaWVudCBpZD0iZ2h3bCIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRDhFREY1IiBzdG9wLW9wYWNpdHk9IjAuOTUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNEOEU2RjAiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48bGluZWFyR3JhZGllbnQgaWQ9Imdob3ZybCIgeDE9IjAiIHkxPSIwIiB4Mj0iMSIgeTI9IjAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTQxMjEwIiBzdG9wLW9wYWNpdHk9IjAuNTUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxNDEyMTAiIHN0b3Atb3BhY2l0eT0iMC4xMCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJnaG92cnIiIHgxPSIxIiB5MT0iMCIgeDI9IjAiIHkyPSIwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzE0MTIxMCIgc3RvcC1vcGFjaXR5PSIwLjI1Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTQxMjEwIiBzdG9wLW9wYWNpdHk9IjAuMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwb2x5Z29uIHBvaW50cz0iMCwwIDMyMCwxNTAgMTI4MCwxNTAgMTYwMCwwIiBmaWxsPSJ1cmwoI2doY2wpIi8+PHBvbHlnb24gcG9pbnRzPSIwLDAgMzIwLDE1MCAzMjAsNTMwIDAsNzAwIiBmaWxsPSJ1cmwoI2dobHcpIi8+PHBvbHlnb24gcG9pbnRzPSIzMjAsMTUwIDEyODAsMTUwIDEyODAsNTMwIDMyMCw1MzAiIGZpbGw9InVybCgjZ2hidykiLz48cG9seWdvbiBwb2ludHM9IjEyODAsMTUwIDE2MDAsMCAxNjAwLDcwMCAxMjgwLDUzMCIgZmlsbD0idXJsKCNnaHJ3KSIvPjxwb2x5Z29uIHBvaW50cz0iMCw3MDAgMzIwLDUzMCAxMjgwLDUzMCAxNjAwLDcwMCIgZmlsbD0idXJsKCNnaGZsKSIvPjxyZWN0IHg9IjQyMCIgeT0iMTkwIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjI1MCIgZmlsbD0idXJsKCNnaHdsKSIvPjxyZWN0IHg9IjQyMCIgeT0iMTkwIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjA5MDYwIiBzdHJva2Utd2lkdGg9IjEwIiByeD0iMiIvPjxsaW5lIHgxPSI1NTAiIHkxPSIxOTAiIHgyPSI1NTAiIHkyPSI0NDAiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PGxpbmUgeDE9IjQyMCIgeTE9IjMxNSIgeDI9IjY4MCIgeTI9IjMxNSIgc3Ryb2tlPSIjQjA5MDYwIiBzdHJva2Utd2lkdGg9IjciLz48cG9seWdvbiBwb2ludHM9IjQyMCw0NDAgNjgwLDQ0MCA4ODAsNzAwIDIyMCw3MDAiIGZpbGw9IiNGRkY1RTAiIG9wYWNpdHk9IjAuMTIiLz48cmVjdCB4PSI5MjAiIHk9IjE5MCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIyNTAiIGZpbGw9InVybCgjZ2h3bCkiLz48cmVjdCB4PSI5MjAiIHk9IjE5MCIgd2lkdGg9IjI2MCIgaGVpZ2h0PSIyNTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSIxMCIgcng9IjIiLz48bGluZSB4MT0iMTA1MCIgeTE9IjE5MCIgeDI9IjEwNTAiIHkyPSI0NDAiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PGxpbmUgeDE9IjkyMCIgeTE9IjMxNSIgeDI9IjExODAiIHkyPSIzMTUiIHN0cm9rZT0iI0IwOTA2MCIgc3Ryb2tlLXdpZHRoPSI3Ii8+PHBvbHlnb24gcG9pbnRzPSI5MjAsNDQwIDExODAsNDQwIDEzODAsNzAwIDcyMCw3MDAiIGZpbGw9IiNGRkY1RTAiIG9wYWNpdHk9IjAuMTIiLz48bGluZSB4MT0iMzA3LjI1IiB5MT0iNTQ1IiB4Mj0iMTI5Mi43NSIgeTI9IjU0NSIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIyODguNTUiIHkxPSI1NjciIHgyPSIxMzExLjQ1IiB5Mj0iNTY3IiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PGxpbmUgeDE9IjI2OS44NSIgeTE9IjU4OSIgeDI9IjEzMzAuMTUiIHkyPSI1ODkiIHN0cm9rZT0iIzk4Nzg0OCIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9IjAuMTgiLz48bGluZSB4MT0iMjUxLjE1IiB5MT0iNjExIiB4Mj0iMTM0OC44NSIgeTI9IjYxMSIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIyMzIuNDUiIHkxPSI2MzMiIHgyPSIxMzY3LjU1IiB5Mj0iNjMzIiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PGxpbmUgeDE9IjIxMy43NSIgeTE9IjY1NSIgeDI9IjEzODYuMjUiIHkyPSI2NTUiIHN0cm9rZT0iIzk4Nzg0OCIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9IjAuMTgiLz48bGluZSB4MT0iMTk1LjA1IiB5MT0iNjc3IiB4Mj0iMTQwNC45NSIgeTI9IjY3NyIgc3Ryb2tlPSIjOTg3ODQ4IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iMC4xOCIvPjxsaW5lIHgxPSIxNzYuMzUiIHkxPSI2OTkiIHgyPSIxNDIzLjY1IiB5Mj0iNjk5IiBzdHJva2U9IiM5ODc4NDgiIHN0cm9rZS13aWR0aD0iMS41IiBvcGFjaXR5PSIwLjE4Ii8+PHJlY3QgeD0iMzIwIiB5PSI1MjAiIHdpZHRoPSI5NjAiIGhlaWdodD0iMTIiIGZpbGw9IiNDNEI4OUEiIG9wYWNpdHk9IjAuNiIvPjxsaW5lIHgxPSIzMjAiIHkxPSI1MzAiIHgyPSIwIiB5Mj0iNzAwIiBzdHJva2U9IiNDNEI4OUEiIHN0cm9rZS13aWR0aD0iOCIgb3BhY2l0eT0iMC40Ii8+PGxpbmUgeDE9IjEyODAiIHkxPSI1MzAiIHgyPSIxNjAwIiB5Mj0iNzAwIiBzdHJva2U9IiNDNEI4OUEiIHN0cm9rZS13aWR0aD0iOCIgb3BhY2l0eT0iMC40Ii8+PHBvbHlnb24gcG9pbnRzPSIzMjAsMTUwIDM0MiwxNjIgMzQyLDUzNiAzMjAsNTMwIiBmaWxsPSIjMTQxMjEwIiBvcGFjaXR5PSIwLjEwIi8+PHBvbHlnb24gcG9pbnRzPSIxMjgwLDE1MCAxMjU4LDE2MiAxMjU4LDUzNiAxMjgwLDUzMCIgZmlsbD0iIzE0MTIxMCIgb3BhY2l0eT0iMC4wOCIvPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxNjAwIiBoZWlnaHQ9IjcwMCIgZmlsbD0idXJsKCNnaG92cmwpIi8+PC9zdmc+");
        background-size: cover;
        background-position: center 35%;
        will-change: transform;
      }

      .hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 9, 7, 0.88) 0%, rgba(10, 9, 7, 0.45) 45%, rgba(10, 9, 7, 0.18) 100%);
      }

      .hero-content {
        position: relative;
        z-index: 1;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        width: 100%;
        margin: 0 auto;
      }

      .hero-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.65rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-block-end: 1.25rem;
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.3s both;
      }

      .hero-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(2.25rem, 8vw, 5.25rem);
        font-weight: 400;
        color: #fff;
        line-height: 1.3;
        letter-spacing: 0.015em;
        margin-block-end: var(--sp-md);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.5s both;
      }

      .hero-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.6);
        line-height: 2;
        max-width: 500px;
        margin-block-end: var(--sp-lg);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.7s both;
      }

      .hero-cta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-sm);
        animation: fadeUpHero 0.9s var(--ease-reveal) 0.9s both;
      }

      /* Scroll indicator */
      .hero-scroll {
        position: absolute;
        inset-block-end: var(--sp-md);
        inset-inline-end: var(--sp-md);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        font-family: var(--f-en);
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.3);
        animation: fadeIn 1s ease 1.3s both;
      }

      .hero-scroll-line {
        width: 1px;
        height: 42px;
        background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3));
        animation: scrollPulse 2.2s ease-in-out infinite 1.6s;
      }

      /* ============================================
   SECTIONS — common
   ============================================ */
      .sec {
        padding-block: var(--sp-xl);
      }
      .sec-alt {
        background: var(--c-bg-alt);
      }
      .sec-dark {
        background: var(--c-dark);
        color: #fff;
      }
      .sec-dark-2 {
        background: var(--c-dark-2);
        color: #fff;
      }

      .sec-header {
        margin-block-end: var(--sp-lg);
      }
      .sec-header-center {
        text-align: center;
      }
      .sec-header-center .sec-sub {
        margin-inline: auto;
      }

      /* ============================================
   ABOUT SECTION
   ============================================ */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: center;
      }

      .about-img-wrap {
        position: relative;
        aspect-ratio: 4 / 3;
        background: var(--c-bg-alt);
        overflow: hidden;
      }

      .about-img-wrap img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.06);
        transition: transform 1.4s var(--ease-reveal);
      }

      .about-img-wrap.is-visible img {
        transform: scale(1);
      }

      .about-badge {
        position: absolute;
        inset-block-end: var(--sp-sm);
        inset-inline-end: var(--sp-sm);
        background: var(--c-dark);
        color: rgba(255, 255, 255, 0.85);
        padding: 0.75rem 1rem;
        font-size: 0.68rem;
        letter-spacing: 0.06em;
        line-height: 1.7;
        font-family: var(--f-sans-ja);
      }

      .about-body {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
      }

      .about-heading {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.25rem, 3vw, 1.75rem);
        font-weight: 400;
        line-height: 1.6;
        letter-spacing: 0.02em;
      }

      .about-text {
        font-size: 0.9rem;
        color: var(--c-text-sub);
        line-height: 2.1;
      }

      .about-text strong {
        color: var(--c-text);
        font-weight: 500;
      }

      .about-qualification {
        border-left: 2px solid var(--c-accent);
        padding-left: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
      }

      .about-qual-label {
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--c-accent);
      }

      .about-qual-name {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        color: var(--c-text);
        line-height: 1.5;
      }

      .about-qual-desc {
        font-size: 0.78rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* ============================================
   SERVICES SECTION
   ============================================ */
      .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--gap);
      }

      .service-card {
        display: block;
        background: var(--c-surface);
        overflow: hidden;
        position: relative;
        transition: box-shadow var(--tr-base);
      }

      .service-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.09);
      }

      .service-card-img {
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: var(--c-bg-alt);
        position: relative;
      }

      .service-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.9s var(--ease-reveal);
      }

      .service-card:hover .service-card-img img {
        transform: scale(1.05);
      }

      .service-card-body {
        padding: var(--sp-md);
      }

      .service-card-num {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        color: var(--c-accent);
        margin-block-end: 0.5rem;
      }

      .service-card-title {
        font-family: var(--f-serif-ja);
        font-size: 1.2rem;
        font-weight: 400;
        letter-spacing: 0.02em;
        margin-block-end: 0.75rem;
      }

      .service-card-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
        margin-block-end: 1rem;
      }

      .tag-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
      }

      .tag {
        font-size: 0.68rem;
        padding: 0.25rem 0.625rem;
        border: 1px solid var(--c-line);
        color: var(--c-text-sub);
        letter-spacing: 0.03em;
      }

      /* ============================================
   REASONS SECTION
   ============================================ */
      .reasons-list {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--c-line);
      }

      .reason-item {
        display: grid;
        grid-template-columns: 36px 1fr;
        gap: var(--sp-sm);
        padding-block: var(--sp-md);
        border-bottom: 1px solid var(--c-line);
        align-items: start;
        transition: background var(--tr-fast);
      }

      .reason-item:hover {
        background: var(--c-bg-alt);
      }

      .reason-num {
        font-family: var(--f-en);
        font-size: 0.72rem;
        letter-spacing: 0.1em;
        color: var(--c-accent);
        padding-top: 0.2rem;
      }

      .reason-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.4rem;
        letter-spacing: 0.02em;
      }

      .reason-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
      }

      /* ============================================
   GALLERY SECTION
   ============================================ */
      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        margin-block-start: var(--sp-lg);
      }

      .gallery-item {
        overflow: hidden;
        background: #222;
        position: relative;
      }

      .gallery-item:first-child {
        grid-column: 1 / -1;
      }

      .gallery-item-inner {
        aspect-ratio: 4 / 3;
        overflow: hidden;
        position: relative;
      }

      .gallery-item:first-child .gallery-item-inner {
        aspect-ratio: 16 / 7;
      }

      .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.8s var(--ease-reveal);
      }

      .gallery-item:hover img {
        transform: scale(1.05);
      }

      .gallery-caption {
        position: absolute;
        inset-block-end: 0;
        inset-inline: 0;
        padding: 0.75rem 1rem;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.68rem;
        letter-spacing: 0.08em;
        opacity: 0;
        transform: translateY(4px);
        transition:
          opacity var(--tr-base),
          transform var(--tr-base);
      }

      .gallery-item:hover .gallery-caption {
        opacity: 1;
        transform: translateY(0);
      }

      /* ============================================
   B2B SECTION
   ============================================ */
      .b2b-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
      }

      .b2b-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
      }

      .b2b-card {
        background: var(--c-surface);
        padding: var(--sp-md);
        border-top: 2px solid var(--c-accent);
        transition: box-shadow var(--tr-base);
      }

      .b2b-card:hover {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.07);
      }

      .b2b-card-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--c-accent);
        margin-block-end: 0.5rem;
      }

      .b2b-card-title {
        font-family: var(--f-serif-ja);
        font-size: 1.1rem;
        font-weight: 400;
        margin-block-end: 0.75rem;
      }

      .b2b-card-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
        margin-block-end: var(--sp-sm);
      }

      /* ============================================
   AREA SECTION
   ============================================ */
      .area-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: start;
      }

      .area-main-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.375rem, 3.5vw, 1.875rem);
        font-weight: 400;
        line-height: 1.6;
        margin-block-end: var(--sp-sm);
      }

      .area-desc {
        font-size: 0.875rem;
        color: var(--c-text-sub);
        line-height: 2;
        margin-block-end: var(--sp-md);
      }

      .area-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-end: var(--sp-sm);
      }

      .area-tag {
        padding: 0.375rem 0.875rem;
        background: var(--c-bg-alt);
        border: 1px solid var(--c-line);
        font-size: 0.78rem;
        color: var(--c-text-sub);
      }

      .area-note {
        font-size: 0.78rem;
        color: var(--c-text-sub);
      }

      .area-address {
        padding: var(--sp-md);
        background: var(--c-surface);
        border-top: 2px solid var(--c-line);
      }

      .area-address dt {
        font-size: 0.68rem;
        color: var(--c-text-sub);
        letter-spacing: 0.06em;
        margin-block-end: 0.25rem;
      }

      .area-address dd {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        line-height: 1.7;
        margin-block-end: 0.75rem;
      }

      .area-address dd:last-child {
        margin-block-end: 0;
      }

      /* ============================================
   CTA SECTION
   ============================================ */
      .cta-sec {
        background: var(--c-dark);
        padding-block: var(--sp-xl);
        text-align: center;
      }

      .cta-sec-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.65rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        margin-block-end: 1rem;
      }

      .cta-sec-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        color: rgba(255, 255, 255, 0.9);
        font-weight: 400;
        line-height: 1.6;
        margin-block-end: 0.875rem;
      }

      .cta-sec-desc {
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.48);
        line-height: 2;
        max-width: 500px;
        margin: 0 auto var(--sp-lg);
      }

      .cta-sec-btns {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--sp-sm);
      }

      .cta-sec-note {
        display: block;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.25);
        margin-block-start: 1rem;
        line-height: 1.8;
      }

      /* ============================================
   COMPANY TABLE
   ============================================ */
      .company-table {
        width: 100%;
        border-collapse: collapse;
      }

      .company-table tr {
        border-bottom: 1px solid var(--c-line);
      }

      .company-table th,
      .company-table td {
        padding: 0.875rem 0;
        font-size: 0.875rem;
        text-align: left;
        vertical-align: top;
      }

      .company-table th {
        font-weight: 500;
        color: var(--c-text-sub);
        white-space: nowrap;
        padding-right: var(--sp-md);
        width: 120px;
      }

      .company-table td {
        color: var(--c-text);
        line-height: 1.8;
      }

      /* ============================================
   FOOTER
   ============================================ */
      .site-footer {
        background: var(--c-dark-2);
        color: rgba(255, 255, 255, 0.5);
        padding-block: var(--sp-xl) var(--sp-md);
      }

      .footer-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        margin-block-end: var(--sp-lg);
      }

      .footer-brand-name {
        font-family: var(--f-en);
        font-size: 1.2rem;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.82);
        margin-block-end: 0.375rem;
      }

      .footer-brand-sub {
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.32);
        letter-spacing: 0.05em;
        line-height: 1.8;
      }

      .footer-brand-addr {
        margin-block-start: 0.875rem;
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.38);
        line-height: 1.85;
      }

      .footer-nav-head {
        font-family: var(--f-en);
        font-size: 0.6rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.28);
        margin-block-end: 0.875rem;
      }

      .footer-nav-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
      }

      .footer-nav-list a {
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.48);
        transition: color var(--tr-base);
      }

      .footer-nav-list a:hover {
        color: rgba(255, 255, 255, 0.82);
      }

      .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding-top: var(--sp-sm);
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
      }

      .footer-copy {
        font-size: 0.68rem;
        color: rgba(255, 255, 255, 0.22);
      }

      /* ============================================
   BREADCRUMB
   ============================================ */
      .breadcrumb {
        padding: calc(var(--header-h) + 1rem) 0 0.75rem;
        font-size: 0.72rem;
      }

      .breadcrumb ol {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.375rem;
        align-items: center;
        color: var(--c-text-sub);
      }

      .breadcrumb li a {
        color: var(--c-text-sub);
        transition: color var(--tr-base);
      }

      .breadcrumb li a:hover {
        color: var(--c-accent);
      }
      .breadcrumb li + li::before {
        content: "/";
        color: var(--c-line);
      }
      .breadcrumb li:last-child {
        color: var(--c-text);
      }

      /* ============================================
   SUB-PAGE HERO
   ============================================ */
      .sub-hero {
        position: relative;
        height: 50vw;
        max-height: 460px;
        min-height: 260px;
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding-block-end: var(--sp-lg);
      }

      .sub-hero-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        background-color: var(--c-dark);
      }

      .sub-hero-bg::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(10, 9, 7, 0.82) 0%, rgba(10, 9, 7, 0.3) 100%);
      }

      .sub-hero-content {
        position: relative;
        z-index: 1;
        padding-inline: var(--sp-md);
        max-width: var(--max-w);
        width: 100%;
        margin: 0 auto;
      }

      .sub-hero-label {
        display: block;
        font-family: var(--f-en);
        font-size: 0.62rem;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.38);
        margin-block-end: 0.75rem;
        animation: fadeUpHero 0.8s ease 0.2s both;
      }

      .sub-hero-title {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.75rem, 5vw, 3.25rem);
        font-weight: 400;
        color: #fff;
        line-height: 1.4;
        letter-spacing: 0.015em;
        animation: fadeUpHero 0.8s ease 0.35s both;
      }

      .sub-hero-desc {
        margin-block-start: 0.875rem;
        font-size: 0.875rem;
        color: rgba(255, 255, 255, 0.52);
        max-width: 500px;
        line-height: 1.95;
        animation: fadeUpHero 0.8s ease 0.5s both;
      }

      /* ============================================
   SERVICE DETAIL (sub-pages)
   ============================================ */
      .sd-intro {
        padding-block: var(--sp-xl);
      }

      .sd-intro-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
        align-items: center;
      }

      .sd-heading {
        font-family: var(--f-serif-ja);
        font-size: clamp(1.3rem, 3vw, 1.75rem);
        font-weight: 400;
        margin-block-end: var(--sp-sm);
        line-height: 1.6;
      }

      .sd-text {
        font-size: 0.9rem;
        color: var(--c-text-sub);
        line-height: 2.1;
        margin-block-end: 0.875rem;
      }

      .sd-text strong {
        color: var(--c-text);
        font-weight: 500;
      }

      .sd-img {
        overflow: hidden;
        background: var(--c-bg-alt);
      }

      .sd-img img {
        width: 100%;
        aspect-ratio: 4/3;
        object-fit: cover;
        transition: transform 1s var(--ease-reveal);
      }

      .sd-img.is-visible img {
        transform: scale(1);
      }

      /* Service items grid */
      .sv-items {
        padding-block: var(--sp-xl);
      }

      .sv-items-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-lg);
      }

      .sv-item {
        background: var(--c-surface);
        padding: var(--sp-md);
        display: grid;
        grid-template-columns: 44px 1fr;
        gap: var(--sp-sm);
        align-items: start;
        transition: box-shadow var(--tr-base);
      }

      .sv-item:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
      }

      .sv-item-icon {
        width: 44px;
        height: 44px;
        border: 1px solid var(--c-line);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--c-accent);
      }

      .sv-item-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .sv-item-desc {
        font-size: 0.8rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* Process flow */
      .process-steps {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 1px solid var(--c-line);
        margin-block-start: var(--sp-lg);
      }

      .process-step {
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: var(--sp-sm);
        padding-block: var(--sp-md);
        border-bottom: 1px solid var(--c-line);
        align-items: start;
      }

      .process-step-num {
        font-family: var(--f-en);
        font-size: 0.68rem;
        letter-spacing: 0.12em;
        color: var(--c-accent);
        padding-top: 0.3rem;
      }

      .process-step-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .process-step-desc {
        font-size: 0.845rem;
        color: var(--c-text-sub);
        line-height: 1.95;
      }

      /* Cases */
      .cases-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-lg);
      }

      .case-card {
        background: var(--c-surface);
        padding: var(--sp-md);
        border-left: 2px solid var(--c-line);
        transition:
          border-color var(--tr-base),
          box-shadow var(--tr-base);
      }

      .case-card:hover {
        border-left-color: var(--c-accent);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      }

      .case-card-title {
        font-family: var(--f-serif-ja);
        font-size: 0.95rem;
        font-weight: 400;
        margin-block-end: 0.375rem;
      }

      .case-card-desc {
        font-size: 0.8rem;
        color: var(--c-text-sub);
        line-height: 1.9;
      }

      /* Work images */
      .work-imgs-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--gap);
        margin-block-start: var(--sp-lg);
      }

      .work-img-item {
        overflow: hidden;
        background: #252220;
      }

      .work-img-item:first-child {
        grid-column: 1 / -1;
      }

      .work-img-item img {
        width: 100%;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transition: transform 0.9s var(--ease-reveal);
      }

      .work-img-item:first-child img {
        aspect-ratio: 16 / 7;
      }
      .work-img-item:hover img {
        transform: scale(1.04);
      }

      /* Related services */
      .related-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
        margin-block-start: var(--sp-md);
      }

      .related-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-sm);
        padding: var(--sp-md);
        background: var(--c-bg-alt);
        overflow: hidden;
        position: relative;
        transition: background var(--tr-base);
      }

      .related-link::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        width: 2px;
        background: var(--c-accent);
        transform: scaleY(0);
        transition: transform var(--tr-base);
      }

      .related-link:hover {
        background: var(--c-surface);
      }
      .related-link:hover::before {
        transform: scaleY(1);
      }

      .related-link-inner {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
      .related-link-sub {
        font-size: 0.7rem;
        color: var(--c-text-sub);
      }

      .related-link-title {
        font-family: var(--f-serif-ja);
        font-size: 1rem;
        font-weight: 400;
      }

      .related-link-arrow {
        color: var(--c-accent);
        flex-shrink: 0;
        transition: transform var(--tr-base);
      }

      .related-link:hover .related-link-arrow {
        transform: translateX(4px);
      }

      /* ============================================
   KEYFRAMES
   ============================================ */
      @keyframes fadeUpHero {
        from {
          opacity: 0;
          transform: translateY(18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes scrollPulse {
        0% {
          opacity: 0;
          transform: scaleY(0);
          transform-origin: top;
        }
        50% {
          opacity: 1;
          transform: scaleY(1);
          transform-origin: top;
        }
        51% {
          transform-origin: bottom;
        }
        100% {
          opacity: 0;
          transform: scaleY(0);
          transform-origin: bottom;
        }
      }

      /* ============================================
   RESPONSIVE — Tablet 768px+
   ============================================ */
      @media (min-width: 768px) {
        :root {
          --header-h: 68px;
        }

        .about-grid {
          grid-template-columns: 1fr 1fr;
        }

        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .b2b-cards {
          grid-template-columns: repeat(2, 1fr);
        }

        .gallery-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .gallery-item:first-child {
          grid-column: 1 / 3;
          grid-row: 1 / 3;
        }
        .gallery-item:first-child .gallery-item-inner {
          aspect-ratio: unset;
          height: 100%;
        }

        .cta-sec-btns {
          flex-direction: row;
          justify-content: center;
        }

        .area-inner {
          grid-template-columns: 1fr 1fr;
        }

        .sd-intro-grid {
          grid-template-columns: 1fr 1fr;
        }

        .sv-items-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .cases-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .work-imgs-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .related-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .footer-inner {
          grid-template-columns: 2fr 1fr 1fr;
        }

        .company-table th {
          width: 160px;
        }
      }

      /* ============================================
   RESPONSIVE — Desktop 1024px+
   ============================================ */
      @media (min-width: 1024px) {
        .site-nav {
          display: flex;
        }
        .hamburger {
          display: none;
        }

        .sv-items-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .cases-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .about-grid {
          grid-template-columns: 5fr 6fr;
          gap: var(--sp-xl);
        }
      }

      /* ============================================
   PREFERS REDUCED MOTION
   ============================================ */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }

        html {
          scroll-behavior: auto;
        }

        .reveal,
        .img-reveal {
          opacity: 1 !important;
          transform: none !important;
        }

        .img-reveal img {
          transform: none !important;
        }
      }

      /* ============================================
   CLEANING PAGE — Specific Styles
   ============================================ */

      /* Cleaning items grid */
      .cleaning-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-md);
      }

      .cleaning-item {
        padding: var(--sp-lg);
        border: 1px solid var(--c-border);
        background: var(--c-bg);
        transition:
          border-color var(--ease-base) 0.25s,
          transform var(--ease-base) 0.25s;
      }

      .cleaning-item:hover {
        border-color: var(--c-accent);
        transform: translateY(-2px);
      }

      .cleaning-icon {
        color: var(--c-accent);
        margin-bottom: var(--sp-sm);
      }

      .cleaning-item h3 {
        font-family: var(--font-serif-jp);
        font-size: 1rem;
        font-weight: 500;
        color: var(--c-dark);
        margin-bottom: 0.5rem;
      }

      .cleaning-item p {
        font-size: 0.875rem;
        line-height: 1.75;
        color: var(--c-mid);
      }

      /* Cleaning gallery */
      .cleaning-gallery {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-sm);
      }

      .cleaning-gallery-main img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        display: block;
      }

      .cleaning-gallery-sub {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-sm);
      }

      .cleaning-gallery-item img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
        transition: transform var(--ease-base) 0.4s;
      }

      .cleaning-gallery-item:hover img {
        transform: scale(1.03);
      }

      /* For-whom grid */
      .for-whom-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-md);
      }

      .for-whom-card {
        padding: var(--sp-lg);
        border-left: 2px solid var(--c-accent);
        background: var(--c-bg);
      }

      .for-whom-tag {
        font-family: var(--font-serif-jp);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--c-accent);
        margin-bottom: var(--sp-xs);
        letter-spacing: 0.04em;
      }

      .for-whom-card p {
        font-size: 0.9375rem;
        line-height: 1.75;
        color: var(--c-mid);
      }

      /* Property types list */
      .property-list {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        border-top: 1px solid var(--c-border);
      }

      .property-item {
        padding: var(--sp-md) 0;
        border-bottom: 1px solid var(--c-border);
        display: flex;
        align-items: center;
        gap: var(--sp-sm);
      }

      .property-item::before {
        content: "";
        display: block;
        width: 24px;
        height: 1px;
        background: var(--c-accent);
        flex-shrink: 0;
      }

      .property-item span {
        font-size: 0.9375rem;
        color: var(--c-dark);
        line-height: 1.6;
      }

      /* Related links */
      .related-links {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-lg);
      }

      .related-link-card {
        display: block;
        text-decoration: none;
        color: inherit;
        border: 1px solid var(--c-border);
        overflow: hidden;
        transition: border-color var(--ease-base) 0.25s;
      }

      .related-link-card:hover {
        border-color: var(--c-accent);
      }

      .related-link-image {
        overflow: hidden;
      }

      .related-link-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
        transition: transform var(--ease-base) 0.5s;
      }

      .related-link-card:hover .related-link-image img {
        transform: scale(1.03);
      }

      .related-link-body {
        padding: var(--sp-lg);
      }

      .related-link-label {
        font-family: var(--font-en);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        color: var(--c-accent);
        margin-bottom: 0.5rem;
        font-weight: 400;
      }

      .related-link-body h3 {
        font-family: var(--font-serif-jp);
        font-size: 1.125rem;
        font-weight: 500;
        color: var(--c-dark);
        margin-bottom: 0.5rem;
      }

      .related-link-body p {
        font-size: 0.875rem;
        line-height: 1.75;
        color: var(--c-mid);
        margin-bottom: var(--sp-sm);
      }

      .related-link-cta {
        font-size: 0.875rem;
        color: var(--c-accent);
        font-weight: 500;
      }

      /* ============================================
   CLEANING PAGE — Responsive
   ============================================ */
      @media (min-width: 768px) {
        .cleaning-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .cleaning-gallery-main img {
          height: 420px;
        }

        .cleaning-gallery-sub {
          grid-template-columns: repeat(3, 1fr);
        }

        .cleaning-gallery-item img {
          height: 200px;
        }

        .for-whom-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .property-list {
          grid-template-columns: repeat(2, 1fr);
        }

        .property-item {
          border-right: none;
        }

        .related-links {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (min-width: 1024px) {
        .cleaning-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .cleaning-gallery {
          grid-template-columns: 3fr 2fr;
          grid-template-rows: auto;
        }

        .cleaning-gallery-main {
          grid-row: 1;
        }

        .cleaning-gallery-main img {
          height: 100%;
          min-height: 460px;
        }

        .cleaning-gallery-sub {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(3, 1fr);
          gap: var(--sp-sm);
        }

        .cleaning-gallery-item img {
          height: 100%;
          min-height: 140px;
        }

        .for-whom-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .property-list {
          grid-template-columns: repeat(3, 1fr);
        }
      }

      /* ============================================
   SUB-HERO IMG VARIANT (cleaning, b2b pages)
   ============================================ */
      .sub-hero {
        position: relative;
        overflow: hidden;
      }
      .sub-hero-image {
        position: relative;
        width: 100%;
        height: 420px;
      }
      @media (min-width: 768px) {
        .sub-hero-image {
          height: 560px;
        }
      }
      @media (min-width: 1024px) {
        .sub-hero-image {
          height: 680px;
        }
      }

      .sub-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
      }
      .sub-hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(20, 18, 16, 0.45) 0%, rgba(20, 18, 16, 0.55) 100%);
      }
      /* sub-hero-content over the image */
      .sub-hero .sub-hero-content {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: var(--sp-xl) var(--sp-lg);
        z-index: 2;
      }
      @media (min-width: 768px) {
        .sub-hero .sub-hero-content {
          padding: var(--sp-2xl) var(--sp-xl);
        }
      }