@charset "UTF-8";

/* ==========================================================================
   Variables & Reset
   ========================================================================== */
:root {
    --color-bg-dark: #1a202c;
    /* Deep Navy/Black */
    --color-bg-dark-secondary: #2d3748;
    --color-text-white: #ffffff;
    --color-text-gray: #a0aec0;
    --color-accent: #c4a06d;
    /* Muted Gold/Beige for elegance */
    --font-serif: 'Shippori Mincho', 'Noto Serif JP', serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    --easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* サークルサイズ調整用変数 */
    --circle-scale-tablet: 1.2;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* General reset for wrappers that might cause gaps */
.l-wrapper,
main {
    margin-top: 0;
    padding-top: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s var(--easing);
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

li {
    list-style: none;
}

/* ==========================================================================
   Utilities
   ========================================================================== */
.l-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.u-serif {
    font-family: var(--font-serif);
}

.u-mt-1 {
    margin-top: 1rem;
}

.u-mt-2 {
    margin-top: 2rem;
}

.u-mt-4 {
    margin-top: 4rem;
}

.u-pl-2 {
    padding-left: 2em;
}

.u-sp-only {
    display: none !important;
}

.u-nowrap {
    display: inline-block;
}

@media (max-width: 768px) {
    .u-sp-only {
        display: block !important;
    }

    .u-pc-only {
        display: none !important;
    }
}

/* ==========================================================================
   Components
   ========================================================================== */
.c-section-title {
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--color-text-white);
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    line-height: 1.2;
}

.c-section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 1px;
    background: var(--color-accent);
    margin-top: 10px;
}

.c-btn-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--color-accent);
    transition: all 0.3s var(--easing);
}

.c-btn-arrow::after {
    content: "→";
    margin-left: 10px;
    transition: transform 0.3s var(--easing);
}

.c-btn-arrow:hover {
    color: var(--color-text-white);
    border-bottom-color: var(--color-text-white);
}

.c-btn-arrow:hover::after {
    transform: translateX(5px);
}

/* ==========================================================================
   Header (Unozawa Style)
   ========================================================================== */
.l-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 2.5rem 10%;
    /* 10% offset for a spacious feel */
    background: transparent;
    transition: background-color 0.4s ease, padding 0.4s ease;
}

.l-header.is-scrolled {
    background-color: rgba(26, 32, 44, 0.7);
    /* Translucent black on scroll */
    padding: 1.2rem 10%;
    backdrop-filter: blur(10px);
}

/* Ensure logo visibility or invert if needed, but since it's a PNG we assume it fits or user handles it. */

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Vertical alignment */
}

.l-header__logo img {
    height: 38px;
    /* 20% smaller than previous 48px */
    width: auto;
    display: block;
}

.l-header__nav ul {
    display: flex;
    gap: 4rem;
}

.l-header__nav a {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text-white);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    position: relative;
}

.l-header__nav a::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-accent);
    transition: width 0.3s ease;
}

.l-header__nav a:hover::after {
    width: 100%;
}

/* Hamburger Icon (1024px or less) */
.l-header__hamburger {
    display: none;
    width: 32px;
    height: 24px;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1000;
}

.l-header__hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--color-text-white);
    transition: transform 0.4s var(--easing), opacity 0.4s var(--easing), top 0.4s var(--easing);
    left: 0;
}

.l-header__hamburger span:nth-child(1) {
    top: 0;
}

.l-header__hamburger span:nth-child(2) {
    top: 11px;
}

.l-header__hamburger span:nth-child(3) {
    top: 22px;
}

/* Hamburger Metamorphosis (X) */
.body-nav-open .l-header__hamburger span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.body-nav-open .l-header__hamburger span:nth-child(2) {
    opacity: 0;
}

.body-nav-open .l-header__hamburger span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

@media (max-width: 1024px) {
    .l-header {
        padding: 1.5rem 5%;
    }

    .l-header.is-scrolled {
        padding: 1rem 5%;
    }

    .l-header__hamburger {
        display: block;
    }

    .l-header__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(26, 32, 44, 0.98);
        /* Luxury Navy Backdrop */
        transition: right 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 900;
    }

    .body-nav-open {
        overflow: hidden;
        /* Prevent background scroll */
    }

    .body-nav-open .l-header__nav {
        right: 0;
    }

    .l-header__nav ul {
        flex-direction: column;
        align-items: center;
        gap: 3.5rem;
    }

    .l-header__nav ul li a {
        font-size: 1.4rem;
        letter-spacing: 0.25em;
    }
}

/* ==========================================================================
   Hero Section (Fullscreen)
   ========================================================================== */
.p-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.p-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    /* Subtle dark overlay */
    z-index: 1;
}

.p-hero__content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    /* Copy is centered in the viewport, Button in the bottom half */
}

.p-hero__copy {
    grid-row: 2;
    padding: 0 2rem;
}

.p-hero__main-copy {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-text-white);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    margin-bottom: 0;
    /* Removing fixed margin to allow grid control */
}

/* --- PLAY VIDEO Button --- */
.p-hero__movie-btn {
    grid-row: 3;
    align-self: center;
    /* Precision Alignment: Midway between copy bottom and screen bottom */
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    /* 宇野澤様風：背景は極薄く */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-serif);

    /* Usually 50% opacity, 100% on hover */
    opacity: 0.5;
    transition: opacity 0.3s ease;

    position: relative;
    /* Switched to relative to follow grid flow */
    z-index: 10;
}

/* 築田さんの指示：ホバー時に100%へ */
.p-hero__movie-btn:hover {
    opacity: 1;
    cursor: pointer;
}

/* 再生アイコン（円形） */
.c-play-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-play-icon svg {
    width: 16px;
    margin-left: 3px;
}

/* --- Scroll Unit --- */
.p-hero__scroll {
    position: absolute;
    bottom: 0;
    left: 10%;
    /* Realigning to match the 10% header offset */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.p-hero__scroll-text {
    font-size: 11px;
    writing-mode: vertical-rl;
    margin-bottom: 20px;
    /* 文字とラインの間の適切な余白 */
    letter-spacing: 0.2em;
    font-family: var(--font-serif);
    /* Changed to Serif as requested */
    color: var(--color-text-white);
    text-transform: uppercase;
    padding-top: 5px;
}





.p-hero__scroll .p-hero__line {
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.p-hero__scroll .p-hero__line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--color-text-white);
    animation: scrollDown 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}


@keyframes scrollDown {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(200%);
    }
}

/* ==========================================================================
   Sections General
   ========================================================================== */
.l-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Works Section (Unozawa Reconstruction - Precision Alignment)
   ========================================================================== */
.p-works {
    position: relative;
    padding: 7.5% 0;
    background-color: #1a202c;
    overflow: hidden;
    min-height: 80vh;
    /* Ensure section prominence */
    display: flex;
    align-items: center;
    /* Center content vertically in the 80vh space */
}

.p-works__inner {
    padding: 0 10%;
    position: relative;
    z-index: 10;
    width: 100%;
    /* Brought to front to avoid background text block */
}



.p-works__content-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align left photo bottom with right side content bottom */
    gap: 4vw;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
    /* Fluid but capped */
}

/* Column 1: Left Photo (Lower) */
.p-works__col-img-left {
    width: 32%;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    /* Lowest layer */
}

/* Column 2: Vertical Copy (Center) */
.p-works__col-copy {
    width: 60px;
    padding-bottom: 5rem;
    position: relative;
    z-index: 5;
    /* Highest layer - Above "Works" and Photos */
}

.p-works__catch-vertical p {
    writing-mode: vertical-rl;
    font-size: 1.8rem;
    line-height: 2;
    letter-spacing: 0.4em;
    font-family: var(--font-serif);
    color: var(--color-text-white);
    white-space: nowrap;
    margin: 0;
}

/* Staggered Layout for Vertical Copy */

.p-works__catch-line2 {
    margin-top: 4.4rem;
    /* Offset to align Line 2 top with Line 1 "は" */
}


/* Column 3: Right (Higher Photo + Content) */
.p-works__col-content-right {
    width: 48%;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    /* Same layer as left photo */
}

.p-works__img-photo {
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

.p-works__img-photo img {
    width: 100%;
    height: auto;
    display: block;
    /* Hover zoom removed as requested */
}

.p-works__img-unit-main {
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    margin-bottom: 5rem;
}

.p-works__img-unit-main img {
    width: 100%;
    height: auto;
    display: block;
    /* Hover zoom removed as requested */
}

.p-works__info-v6 {
    width: 100%;
    /* Take full width of parent col */
    margin-top: 3rem;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Align with left edge of image */
}

.p-works__desc-v6 {
    font-size: 0.95rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 3rem;
    letter-spacing: 0.05em;
    font-family: var(--font-serif);
    text-align: left;
    /* Precision: Align left edge with image */
}

.p-works__action {
    text-align: right;
}

/* Signature Unozawa Button (Red Dot & Dual Underline) */
.c-btn-unozawa {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-white);
    text-decoration: none;
    font-family: var(--font-serif);
    font-size: 1rem;
    letter-spacing: 0.1em;
    position: relative;
    transition: opacity 0.3s ease;
}

/* Red Dot (Signature Red) */
.c-btn-unozawa::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #e60012;
    border-radius: 50%;
    margin-left: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.c-btn-unozawa:hover::after {
    transform: scale(1.5);
    background-color: #ff3333;
}

.c-btn-unozawa__text {
    position: relative;
    padding-bottom: 8px;
}

/* Baseline: Constant faint white line */
.c-btn-unozawa__text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Active: Sliding red line on hover */
.c-btn-unozawa__text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e60012;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: scaleX(0);
    transform-origin: left;
}

.c-btn-unozawa:hover .c-btn-unozawa__text::after {
    transform: scaleX(1);
}

.c-btn-unozawa:hover {
    opacity: 0.7;
}

/* High-Fidelity Reveal Animations */
.js-reveal-left,
.js-reveal-right,
.js-reveal-bg-left,
.js-reveal-up {
    transition: transform 0.8s ease, opacity 0.8s ease;
    will-change: transform, opacity;
}

/* Initial Offsets */
.js-reveal-up {
    opacity: 0;
    transform: translateY(30px);
}

.js .js-reveal-left {
    opacity: 0;
    transform: translateX(-50px);
}

.js .js-reveal-right {
    opacity: 0;
    transform: translateX(50px);
}

.js .js-reveal-bg-left {
    opacity: 0;
    transform: translateX(-100px);
}

/* Triggered States */
.js-reveal-up.is-active {
    opacity: 1;
    transform: translateY(0);
}

.js .js-reveal-left.is-active,
.js .js-reveal-right.is-active,
.js .js-reveal-bg-left.is-active {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Background Reveal (Slide L->R) */
.js .js-reveal-bg-left {
    opacity: 0;
    transform: translateX(-100px);
}


/* Active State: Triggered when in viewport */
.js .js-reveal-left.is-active,
.js .js-reveal-right.is-active,
.js .js-reveal-bg-left.is-active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Mobile Adjustments */


/* ==========================================================================
   Service
   ========================================================================== */
/* ==========================================================================
   Service Section (Video & Glassmorphism)
   ========================================================================== */
.p-service {
    background-color: var(--color-bg-dark);
    position: relative;
    overflow: hidden;
    padding: 12% 0;
    /* Expanded for visual impact */
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Video Backdrop */
.p-service__bg-video-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.p-service__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-service__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 32, 44, 0.8);
    /* Slightly deeper to ensure text pop */
}

/* Works Section PC Background Text (Strict Fix & Animation) */
/* ==========================================================================
   Works Section Background Text (Final Logic: No Conflict)
   ========================================================================== */
/* WORKS背景文字：完全上書き（最後尾に記述することで強制適用） */
.p-works__bg-text {
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    font-family: 'Noto Serif JP', serif !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.3) !important;
    opacity: 0.3 !important;
    /* 背景文字は常に0.5の薄さ */
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
    top: 10% !important;
    /* PC版：2枚目写真の高さ */
    left: 10vw !important;
    font-size: 15vw !important;
    transform: translateX(-5%) !important;
}

.p-works__bg-text.is-active {
    transform: translateX(0) !important;
}

@media (max-width: 768px) {
    .p-works__bg-text {
        top: 4% !important;
        /* スマホ版：上部に配置 */
        left: 50% !important;
        font-size: 25vw !important;
        transform: translateX(-80%) !important;
    }

    .p-works__bg-text.is-active {
        transform: translateX(-50%) !important;
        /* スマホ中央揃え */
    }
}

/* --- Service背景文字：レスポンシブ＆アニメーション統合設定 --- */
.p-service__bg-text {
    position: absolute !important;
    color: rgba(255, 255, 255, 0.3) !important;
    font-weight: 700 !important;
    pointer-events: none !important;
    z-index: 1 !important;
    /* 最初は非表示 */
    opacity: 0 !important;
    transition: opacity 1.5s cubic-bezier(0.22, 1, 0.36, 1), transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
    font-family: var(--font-serif);
}

/* 1. PC（1025px以上）: 左側垂直中央 */
@media (min-width: 1025px) {
    .p-service__bg-text {
        writing-mode: vertical-rl !important;
        left: 20px !important;
        top: 50% !important;
        transform: translateY(calc(-50% + 30px)) !important;
        /* 初期位置：中央から30px下 */
        right: auto !important;
        font-size: 13vw !important;
    }

    .p-service__bg-text.is-active {
        opacity: 0.5 !important;
        transform: translateY(-50%) !important;
        /* スッ…と定位置へ */
    }

    .p-service__circle-text {
        /* 現在のサイズ感を維持しつつ、確実に収まるように設定 */
        font-size: clamp(14px, 1.2vw, 18px) !important;
    }
}

/* 2. タブレット（768px〜1024px）: キャッチコピーと左端整列 */
@media (min-width: 768px) and (max-width: 1024px) {
    .p-service__bg-text {
        writing-mode: vertical-rl !important;
        left: 5% !important;
        top: 25% !important;
        transform: translateY(calc(-50% + 30px)) !important;
        right: auto !important;
        font-size: 15vw !important;
    }

    .p-service__bg-text.is-active {
        opacity: 0.5 !important;
        transform: translateY(-50%) !important;
    }
}

/* 3. スマホ（767px以下）: 横書き・上部1%配置（WORKSと統一） */
@media (max-width: 767px) {
    .p-service__bg-text {
        writing-mode: horizontal-tb !important;
        top: 1% !important;
        left: 50% !important;
        transform: translate(-50%, 20px) !important;
        /* 初期位置：中央から20px下 */
        right: auto !important;
        font-size: 18vw !important;
        width: 100% !important;
        text-align: center !important;
    }

    .p-service__bg-text.is-active {
        opacity: 0.5 !important;
        transform: translate(-50%, 0) !important;
    }
}




@media (max-width: 768px) {
    .p-service__circle-text {
        font-size: 3.2vw !important;
        /* 文字がはみ出さないサイズ */
        white-space: nowrap;
    }
}

.p-service__container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 120px;
    align-items: center;
}

/* ==========================================================================
   Service Circle Cluster - Mathematical Precision (52.83% Ratio)
   ========================================================================== */
/* PC版（1024px以上）：マスター比率として固定 */
/* --- サークルコンテナの完全可変化 --- */
.p-service__circle-wrap {
    width: clamp(320px, 42vw, 530px) !important;
    margin: 0 0 0 auto !important;
    position: relative !important;
    aspect-ratio: 530 / 480 !important;
}

.p-service__circle {
    width: 52.83% !important;
    /* 黄金比サイズ */
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    position: absolute !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    backdrop-filter: blur(8px);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    will-change: transform;
}

/* 円1（高品質）- 上中央 */
.p-service__circle--1 {
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 3;
}

/* 円2（地域密着）- 左下 */
.p-service__circle--2 {
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    z-index: 2;
}

/* 円3（幅広い技術）- 右下 */
.p-service__circle--3 {
    bottom: 0 !important;
    right: 0 !important;
    transform: none !important;
    z-index: 1;
}

.p-service__circle-text {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

    font-size: 1.2vw;
    white-space: nowrap !important;
    /* 改行を禁止 */
    word-break: keep-all !important;
    /* 単語の途中での改行も防ぐ */
}

.p-service__circle-sub {
    font-size: 0.9rem;
    font-weight: 300;
    opacity: 0.8;
    display: block;
    margin-top: 5px;
}

.p-service__content-side {
    text-align: right;
    /* Editorial Right Alignment */
}

.p-service__header {
    margin-bottom: 40px;
}

.p-service__catch-v7 {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 4.2vw, 2.5rem);
    line-height: 2;
    color: var(--color-text-white);
    letter-spacing: 0.05em;
    white-space: nowrap !important;
}

.p-service__list-v6 {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: #ffffff;
    /* Contrast fix: White text */
    letter-spacing: 0.1em;
    margin-bottom: 4rem;
}

.p-service__action {
    display: flex;
    justify-content: flex-end;
    /* Perfect right-edge alignment with catchphrase */
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .p-service__container {
        grid-template-columns: 1fr;
        gap: 80px;
        text-align: center;
    }

    .p-service__visual {
        display: flex;
        justify-content: center;
    }

    .p-service__body {
        margin-left: 0;
    }

    .p-service__action {
        justify-content: center;
    }

    .p-service__circle-wrap {
        /* 1. 中央揃えに変更 */
        margin: 0 auto !important;

        /* 2. サイズを20%アップ（元の45vwから54vwへ拡大） */
        width: calc(45vw * var(--circle-scale-tablet)) !important;
        max-width: 550px !important;
        /* タブレットで大きすぎないよう上限を設定 */

        display: block !important;
        position: relative !important;
    }

    /* 文字が円からはみ出さないよう微調整 */
    .p-service__circle-text {
        font-size: 2.2vw !important;
    }
}




/* ==========================================================================
   Company & Social Media (Unozawa Styled)
   ========================================================================== */
.p-company {
    background-color: var(--color-bg-dark);
    position: relative;
    padding: 180px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Background Glass Circles */
.p-company__bg-circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(40px);
    z-index: 1;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.05);
    opacity: 1;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.js-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
}

.js-reveal-scale.is-active {
    opacity: 1;
    transform: scale(1);
}

.p-company__bg-circle--1 {
    width: 600px;
    height: 600px;
    top: -10%;
    left: -10%;
}

/* Removal of .p-company__bg-circle--2 for cleaner SNS area */

.p-company__container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: center;
}

/* Left: Company Content */
.p-company__title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: var(--color-text-white);
    letter-spacing: 0.1em;
    margin-bottom: 2rem;
    line-height: 1;
}

.p-company__title-sub {
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    margin-left: 1.5rem;
    vertical-align: middle;
    color: var(--color-text-gray);
    font-weight: 400;
}

.p-company__lead {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 2;
    color: var(--color-text-white);
    margin-bottom: 3rem;
    max-width: 400px;
}

/* Right: Social Media blocks */
.p-company__sns-label {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    color: var(--color-text-white);
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    margin-left: 2rem;
    /* Initial shift to bottom-right alignment */
    display: flex;
    align-items: center;
    gap: 10px;
}

.c-dot-v7 {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--color-red);
    border-radius: 50%;
}

.p-company__sns-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1rem;
    /* Precise alignment with Company lead text */
}

.p-company__sns-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
}

.p-company__sns-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(10px);
}

.p-company__sns-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Brand Colors */
.p-company__sns-item:nth-child(1) .p-company__sns-icon {
    color: #FF0000;
    /* YouTube Red */
}

.p-company__sns-item:nth-child(2) .p-company__sns-icon {
    color: transparent;
    /* Supported via SVG url gradients */
}

/* Specific SVG treatment if needed for fill overrides */
.p-company__sns-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.p-company__sns-name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--color-text-white);
    margin-bottom: 0.3rem;
    letter-spacing: 0.1em;
}

.p-company__sns-desc {
    font-size: 0.85rem;
    color: var(--color-text-gray);
    letter-spacing: 0.1em;
}

/* Responsive Company */
@media (max-width: 1024px) {
    .p-company {
        padding: 120px 0;
    }

    .p-company__container {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .p-company__title {
        font-size: 2.8rem;
        text-align: center;
    }

    .p-company__title-sub {
        display: block;
        margin-left: 0;
        margin-top: 1rem;
    }

    .p-company__lead {
        text-align: center;
        margin: 0 auto 3rem;
    }

    .p-company__action {
        display: flex;
        justify-content: center;
    }

    .p-company__sns-label {
        justify-content: center;
    }
}

.p-company-page {
    font-family: var(--font-serif);
    color: var(--color-text-white);
}

.p-company-page__hero {
    padding: 160px 0 40px;
    text-align: center;
}

.p-company-page__title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.p-company-page__title {
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-company-page__title-line {
    width: 120%;
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 1.5rem 0;
}

.p-company-page__title-sub {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: 0.2em;
    font-weight: 400;
}

.p-company-page__content {
    padding-bottom: 160px;
}

.p-company-page__container {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 100px;
    align-items: start;
    /* Required for sticky behavior */
}

/* --- Companyページ：サイドナビ追従 最終解決策 --- */

/* 1. 全ての親要素の overflow 制限を解除（stickyが効かない最大の原因） */
html,
body,
.l-wrapper,
main,
.p-company-page {
    overflow: visible !important;
}

/* 2. コンテナを Flexbox にして、左枠が伸びるのを防ぐ */
.p-company-page__container {
    display: flex !important;
    align-items: flex-start !important;
    /* 左枠が下に引き伸ばされないように固定 */
    gap: 80px !important;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* 3. 左側のナビゲーション枠を追従させる */
/* クラス名を .p-company-page__sidebar に指定（asideタグ自体をstickyに） */
.p-company-page__sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 120px !important;
    /* ヘッダーの下で止まる位置 */
    width: 250px !important;
    /* 幅を固定 */
    flex-shrink: 0 !important;
    height: auto !important;
    z-index: 10 !important;
    padding-top: 0 !important;
    /* 余計なパディングをリセット */
}

/* 4. 右側のコンテンツ領域 */
.p-company-page__main {
    flex: 1 !important;
}

/* 5. タブレット・スマホでは追従を解除 */
@media (max-width: 1024px) {
    .p-company-page__container {
        flex-direction: column !important;
    }

    .p-company-page__sidebar {
        position: static !important;
        width: 100% !important;
        margin-bottom: 40px !important;
    }
}

.p-company-page__nav {
    background: rgba(255, 255, 255, 0.05);
    /* Slightly bright glass background */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2.5rem 2rem;
}

.p-company-page__nav ul {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.p-company-page__nav a {
    font-size: 1rem;
    color: var(--color-text-gray);
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    display: inline-block;
    /* Changed to inline-block for underline width */
    position: relative;
    padding-left: 0;
    padding-bottom: 5px;
}

.p-company-page__nav a:hover,
.p-company-page__nav a.is-active {
    color: var(--color-text-white);
}

.p-company-page__nav a.is-active {
    padding-left: 0;
    /* Reset previous padding */
}

/* Sliding Yellow Underline (Delicate 1px) */
.p-company-page__nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    /* Thinned for delicate impression */
    background-color: var(--color-accent);
    /* Unified with vertical line color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-company-page__nav a:hover::after {
    transform: scaleX(1);
    /* Strictly only on hover */
}

/* Sections */
.p-company-page__section {
    margin-bottom: 120px;
}

.p-company-page__section:last-child {
    margin-bottom: 0;
}

.p-company-page__section-title {
    font-size: 1.8rem;
    margin-bottom: 3rem;
    position: relative;
    padding-left: 1.5rem;
    border-left: 3px solid var(--color-accent);
}

/* Table */
.p-company-page__table {
    width: 100%;
    border-collapse: collapse;
}

.p-company-page__table th,
.p-company-page__table td {
    padding: 2.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
    vertical-align: top;
}

.p-company-page__table th {
    width: 200px;
    font-weight: 600;
    color: var(--color-text-gray);
    font-size: 0.95rem;
    letter-spacing: 0.2em;
}

.p-company-page__table td {
    font-size: 1.05rem;
    line-height: 2;
    color: var(--color-text-white);
}

.p-company-page__list {
    list-style: none;
}

.p-company-page__list li {
    margin-bottom: 0.5rem;
}

/* Map */
.p-company-page__map-action {
    display: flex;
    justify-content: flex-start;
    /* Editorial Right Alignment */
    margin-top: 2rem;
}

.p-company-page__map-wrap {
    filter: grayscale(1) invert(0.9) contrast(1.2);
    /* Desaturated / Dark Map */
    margin-bottom: 2rem;
    transition: filter 0.5s ease;
}

.p-company-page__map-wrap:hover {
    filter: grayscale(0) invert(0) contrast(1);
}

.p-company-page__address {
    font-style: normal;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    color: var(--color-text-gray);
}

/* Responsive */
@media (max-width: 1024px) {
    .p-company-page__container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .p-company-page__sidebar {
        position: static !important;
        margin-bottom: 40px !important;
    }

    .p-company-page__nav ul {
        flex-direction: row;
        gap: 3rem;
        justify-content: center;
    }

    .p-company-page__table th {
        width: 120px;
    }
}

@media (max-width: 768px) {

    .p-company-page__table th,
    .p-company-page__table td {
        display: block;
        width: 100%;
        padding: 1.5rem 0;
    }

    .p-company-page__table th {
        padding-bottom: 0.5rem;
        border-bottom: none;
    }
}

.p-privacy {
    font-family: var(--font-serif);
    /* Standardized to Serif */
}

.p-privacy__hero {
    padding: 160px 0 40px;
    /* Reduced bottom padding */
    text-align: center;
}

.p-privacy__title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.p-privacy__title {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    color: var(--color-text-white);
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-privacy__title-line {
    width: 120%;
    /* Slightly wider than title text */
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 1.5rem 0;
}

.p-privacy__title-sub {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: 0.2em;
    font-weight: 400;
}

.p-privacy__content {
    padding-bottom: 120px;
    padding-top: 20px;
    /* Reduced gap from hero */
}

.p-privacy__lead {
    margin-bottom: 6rem;
    /* Increased breathing room */
    font-size: 1.05rem;
}

.p-privacy__item {
    margin-bottom: 6rem;
    /* Increased breathing room */
}

.p-privacy__item-title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-text-white);
    margin-bottom: 2rem;
    /* Increased spacing */
    border-left: 3px solid var(--color-accent);
    padding-left: 15px;
    letter-spacing: 0.05em;
}

.p-privacy__item p {
    margin-bottom: 1.5rem;
    /* Paragraph spacing */
}

.p-privacy__contact-note {
    margin-top: 8rem;
    padding: 40px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.p-privacy__contact-note p {
    color: var(--color-text-white);
    font-family: var(--font-serif);
    letter-spacing: 0.05em;
}

/* ==========================================================================
   Works Catalog - Reconstruction (Yamamoto Toso Style)
   ========================================================================== */
.p-works-page {
    background-color: #1a202c;
    /* Theme background */
    color: #ffffff;
    font-family: 'Shippori Mincho', serif;
}

.p-works-page__hero {
    padding: 160px 0 40px;
    /* Synchronized with Company Hero */
    text-align: center;
}

.p-works-page__title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

.p-works-page__title {
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-works-page__title-line {
    width: 120%;
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 1.5rem 0;
}

.p-works-page__title-sub {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: 0.2em;
    font-weight: 400;
}

.p-works-page__layout {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 20px 120px;
    gap: 60px;
}

/* 1. Left Column: Project Selector (Sticky Sidebar) */
.l-works-selector {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 120px;
    height: auto;
}

.p-works-selector__nav {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem 2.5rem;
    border-radius: 12px;
}

.p-works.p-top-service__btn {
    position: relative;
    width: fit-content;
    margin: 80px auto 0;
}

.p-top-service__btn {
    margin: 80px auto 0;
}

.p-works-selector__nav ul {
    display: flex;
    flex-direction: column;
}

.p-works-selector__nav li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.p-works-selector__nav li:last-child {
    border-bottom: none;
}

.p-works-selector__item {
    display: block;
    text-decoration: none;
    padding: 1.2rem 0;
    transition: color 0.3s ease;
    position: relative;
    width: 100%;
}

.p-works-selector__label {
    font-size: 0.95rem;
    color: var(--color-text-gray);
    letter-spacing: 0.1em;
    line-height: 1.5;
    font-family: 'Shippori Mincho', serif;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 8px;
    display: inline-block;
}

.p-works-selector__item:hover .p-works-selector__label {
    color: #ffffff;
}

/* Sliding Gold Underline (Yamamoto Style) - Refined */
.p-works-selector__label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-works-selector__item:hover .p-works-selector__label::after {
    transform: scaleX(1);
}

/* 2. Right Column: Main Content */
.l-works-main {
    flex: 1;
}

.p-works-project {
    margin-bottom: 160px;
    scroll-margin-top: 120px;
}

.p-works-project:last-of-type {
    margin-bottom: 0px;
}

.p-works-project__title {
    font-size: 2.2rem;
    color: #ffffff;
    margin-bottom: 40px;
    border-left: 1px solid #c4a06d;
    padding-left: 20px;
}

/* Spec Table: Minimal with gold accent */
.p-works-data__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 60px;
}

.p-works-data__table th {
    width: 180px;
    padding: 20px 0;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #c4a06d;
    /* Accent Gold */
    font-size: 0.9rem;
    font-weight: 400;
}

.p-works-data__table td {
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    color: #ffffff;
}

.p-works-project__subtitle {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 30px;
}

/* Gallery: 4-column 1:1 grid */
.p-works-gallery {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}

.p-works-gallery__item {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background-color: #000;
}

.p-works-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-works-gallery__item:hover img {
    transform: scale(1.08);
}

/* Trust Banner: Quiet text list */
.p-works-trust {
    padding: 40px 0 100px;
    /* Reduced padding-top from 100px to 40px */
    margin-top: 0;
    /* Removed margin-top */
    background: #1a202c;
    /* Theme background */
}

.p-works-trust__line {
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 auto 80px;
}

.p-works-trust__inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.p-works-trust__group {
    margin-bottom: 2rem;
}

.p-works-trust__group:last-child {
    margin-bottom: 0;
}

.p-works-trust__label {
    font-size: 0.8rem;
    color: #c4a06d;
    margin-bottom: 1.5rem;
    letter-spacing: 0.15em;
    opacity: 0.8;
}

.p-works-trust__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8rem 2rem;
    font-size: clamp(12px, 1.2vw, 14px);
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.05em;
    line-height: 1.6;
}

.p-works-trust__list li {
    position: relative;
    white-space: nowrap;
}

/* Smart Separator: Using a thin vertical bar or slash that feels balanced */
.p-works-trust__list li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.15);
}

.p-works-trust__list li:hover {
    color: #ffffff;
}

@media (max-width: 1024px) {
    .p-works-trust {
        padding: 40px 15% 100px;
        /* Aligned with pillar effect, using 40px top padding */
    }

    .p-works-trust__list {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0;
    }

    .p-works-trust__list li {
        font-size: 15px;
        /* Absolute Rule: Fixed readable size */
        margin-bottom: 1.0rem;
        /* Absolute Rule: Vertical spacing */
    }

    .p-works-trust__list li:last-child {
        margin-bottom: 0;
    }

    .p-works-trust__list li:not(:last-child)::after {
        display: none;
        /* Absolute Rule: No separators in vertical view */
    }
}

/* Responsive Optimization for Catalog */
@media (max-width: 1024px) {
    .p-works-page__layout {
        flex-direction: column;
        gap: 80px;
    }

    .l-works-selector {
        width: 100%;
        height: auto;
        position: static;
    }

    .p-works-selector__nav {
        padding: 1.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .p-works-selector__nav ul {
        flex-direction: row;
        gap: 2rem;
        width: max-content;
    }

    .p-works-selector__nav li {
        border-bottom: none;
    }

    .p-works-selector__item {
        width: auto;
        padding: 0.5rem 0;
    }

    .p-works-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .p-works-page__title {
        font-size: 2.5rem;
    }

    .p-works-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .p-works-project__title {
        font-size: 1.6rem;
    }

    @media (max-width: 385px) {
        .p-works-project__title {
            font-size: 1.2rem;
            padding-left: 15px;
            margin-bottom: 30px;
        }
    }
}

/* ==========================================================================
   Footer (Benchmark Style)
   ========================================================================== */
.p-footer {
    background-color: var(--color-bg-dark);
    padding: 0;
    /* Vertical rhythm handled by children */
    position: relative;
    overflow: hidden;
}

/* Horizontal Separator Line */
.p-footer__line {
    width: 80%;
    max-width: 1200px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    margin: 0 auto 120px;
}

.p-footer__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    padding-bottom: 120px;
}

/* Left: Info */
.p-footer__logo {
    margin-bottom: 0.5rem;
    /* Tightened per benchmark image */
}

.p-footer__logo img {
    height: 45px;
    width: auto;
}

.p-footer__company-name {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--color-text-white);
    margin-bottom: 1.5rem;
    letter-spacing: 0.1em;
}

.p-footer__address-block p {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    color: var(--color-text-gray);
    line-height: 2;
    letter-spacing: 0.05em;
}

/* Right: Inquiry */
.p-footer__col-inquiry {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

.p-footer__inquiry-item {
    position: relative;
}

.p-footer__inquiry-label {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    color: var(--color-text-white);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.1em;
}

.p-footer__inquiry-tel-val,
.p-footer__inquiry-email-val {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: var(--color-text-white);
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}

.p-footer__inquiry-hours,
.p-footer__inquiry-note {
    font-size: 0.85rem;
    line-height: 1.8;
    color: var(--color-text-gray);
    letter-spacing: 0.05em;
}

.p-footer__inquiry-note {
    margin-top: 1rem;
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Bottom Bar */
.p-footer__bottom {
    padding: 60px 0 100px;
}

.p-footer__links {
    display: flex;
    flex-direction: row;
    /* Inline layout */
    justify-content: center;
    /* Centered */
    align-items: center;
    gap: 2rem;
}

.p-footer__privacy-link,
.p-footer__copyright {
    font-family: var(--font-serif);
    font-size: 0.75rem;
    color: var(--color-text-gray);
    text-decoration: none;
    letter-spacing: 0.15em;
    transition: color 0.3s ease;
}

.p-footer__privacy-link:hover {
    color: var(--color-text-white);
}

.p-footer__copyright {
    margin: 0;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .p-footer__container {
        grid-template-columns: 1fr;
        gap: 80px;
        padding-bottom: 80px;
        text-align: center;
    }

    .p-footer__line {
        margin-bottom: 80px;
    }

    .p-footer__inquiry-label {
        justify-content: center;
    }

    .p-footer__links {
        align-items: center;
    }
}

/* ==========================================================================
   Mobile Optimization (Max-Width: 768px)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Hero Section Refinement (Strict 2-Line & Proportional Button) */
    .p-hero__main-copy {
        font-size: clamp(14px, 6vw, 2rem);
        /* Fluid scaling */
        white-space: nowrap;
        /* Prevent wrapping except at <br> */
        line-height: 1.6;
        width: auto;
        /* Allow natural width */
    }

    /* Proportional Play Video Button */
    .p-hero__movie-btn {
        padding: 3vw 6vw;
        gap: 4vw;
        font-size: 3.5vw;
        border-width: 1px;
        /* Keep thin styling */
        width: auto;
        /* Fit content */
        transform: scale(0.7);
        /* Scale down to 70% */
        transform-origin: center bottom;
        margin-bottom: -10px;
    }

    .c-play-icon {
        width: 10vw;
        height: 10vw;
    }

    .c-play-icon svg {
        width: 4vw;
        height: 4vw;
    }

    /* Font Optimizations for other sections (maintained) */
    .p-works__catch-vertical p {
        font-size: 4vw;
        letter-spacing: 0.3em;
    }

    /* Service Section Mobile Updates (Exclusive) */
    /* Service Section Mobile Updates (Exclusive) */
    /* スマホ版キャッチコピー：改行させずに縮小 */
    .p-service__catch-v7 {
        font-size: 4.2vw !important;
        line-height: 1.6;
        white-space: nowrap !important;
        /* 強制一行 */
    }



    /* Mobile Geometry Optimization */


    /* Override any transform conflicts if needed, but the new Global Logic is robust */
    .p-service__circle--1 {
        transform: translateX(-50%) !important;
    }

    .p-service__circle--2,
    .p-service__circle--3 {
        transform: none !important;
    }

    .p-service__circle-text {
        font-size: 3.2vw !important;
    }

    .p-service__list-v6 {
        font-size: 3.8vw;
    }

    /* 2. Header (Logo 50%) */
    .l-header__logo img {
        height: 19px;
    }

    /* 3. Works Section Layout (Unozawa Style Reconstruction) */
    .p-works {
        padding: 0 0 100px;
        /* No top padding, bg-text uses top: 60px */
        min-height: auto;
        position: relative;
    }

    .p-works__inner {
        padding-top: calc(18vw + 120px);
        /* Uniform Gap: Top(60px) + Text(18vw) + Gap(60px) */
        padding-left: 5%;
        padding-right: 5%;
    }



    .p-works__content-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        position: relative;
        z-index: 1;
        /* Ensure content is above BG text */
    }

    /* Order 1: Catchphrase */
    .p-works__col-copy {
        order: 1;
        width: 100%;
        margin-bottom: 60px;
        /* Gap 3: 60px */
        padding-bottom: 0;
        display: block;
        text-align: center;
    }

    .p-works__catch-vertical {
        writing-mode: horizontal-tb;
        text-align: center;
        display: block;
    }

    .p-works__catch-vertical p {
        writing-mode: horizontal-tb;
        font-size: 6vw;
        letter-spacing: 0.2em;
        line-height: 1.6;
        white-space: normal;
        margin: 0;
        display: block;
    }

    .p-works__catch-line2 {
        margin-top: 1rem;
    }

    /* Order 2: Image 1 (Left Img) */
    .p-works__col-img-left {
        order: 2;
        width: 90%;
        /* Controlled width */
        margin: 0 auto 60px;
        /* Gap 4: 60px */
    }

    /* Order 3: Right Column Content (Text -> Img 2 -> Button) */
    .p-works__col-content-right {
        order: 3;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    /* Interleave Wrapper: Text/Button Wrapper */
    .p-works__info-v6 {
        display: contents;
        /* Allows children to be sorted in parent flex */
    }

    /* 3-A: Text (Inside info-v6) -> Order 1 */
    .p-works__desc-v6 {
        order: 1;
        width: fit-content;
        max-width: 88%;
        margin: 0 auto 60px;
        /* Consistent spacing */
        text-align: left;
        font-size: 0.95rem;
        line-height: 2;
    }

    /* 3-B: Image 2 (Sibling in col-right) -> Order 2 -> HIDDEN */
    .p-works__img-unit-main {
        display: none;
        /* Hidden on mobile */
    }

    /* 3-C: Button (Inside info-v6) -> Order 3 */
    .p-works__action {
        order: 3;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
    }

    /* 4. Service Section (Geometry & Alignment) */
    .p-service {
        padding: 100px 0;
        display: block;
    }

    /* Background Text "Service": Horizontal, Top */


    .p-service__container {
        display: flex;
        flex-direction: column-reverse;
        gap: 60px;
        position: relative;
        z-index: 1;
    }

    .p-service__content-side {
        text-align: center;
    }

    .p-service__action {
        justify-content: center;
    }

    /* Three Circles: Equilateral Triangle with Overlap */
    .p-service__visual {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    /*
       Calculation:
       Diameter: 140px.
       Wanted: Equilateral Triangle Setup.
       To overlap, distance between centers < 140px.
       Assume overlap = 3px approx (2%).
       Side Length (Center-to-Center) = 137px.
       Height of Triangle = 137 * sqrt(3)/2 = 118.6px.
       Total Height = Radius(70) + Height(118.6) + Radius(70) = 258.6px.
       Total Width = Radius(70) + Base(137) + Radius(70) = 277px.
    */
    /* スマホ：中央配置を維持しつつサイズ最適化 */
    .p-service__circle-wrap {
        width: clamp(280px, 85vw, 380px) !important;
        margin: 0 auto !important;
    }

    /* 文字サイズ：視認性確保 */
    .p-service__circle-text {
        font-size: 14px !important;
    }
}

/* ==========================================================================
   Service Page (service.html)
   ========================================================================== */

.p-service-page {
    font-family: var(--font-serif);
    color: var(--color-text-white);
    background-color: #1a202c;
    overflow: visible !important;
    /* Required for sticky */
}

/* Force Serif for everything in Service page per request */
.p-service-page * {
    font-family: 'Shippori Mincho', 'Noto Serif JP', serif !important;
}

/* Background text optimization (Only Hero) */
.p-service-page__hero .p-service-bg-text {
    position: absolute;
    font-size: 20vw;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    top: 55%;
    left: -5%;
    transform: translateY(-50%);
}

/* Hero - Strictly matching Company page */
.p-service-page__hero {
    padding: 160px 0 40px;
    text-align: center;
}

.p-service-page__title-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.p-service-page__title {
    font-size: 3.5rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.p-service-page__title-line {
    width: 120%;
    max-width: 500px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    margin: 1.5rem 0;
}

.p-service-page__title-sub {
    font-size: 1.1rem;
    color: var(--color-text-gray);
    letter-spacing: 0.2em;
    font-weight: 400;
}

.p-service-page__content {
    padding-bottom: 160px;
}

/* Layout (2-column Flex mirror of Company) */
.p-service-page__container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 80px !important;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.p-service-page__sidebar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0px !important;
    width: 250px !important;
    flex-shrink: 0 !important;
    height: auto !important;
    z-index: 10 !important;
    /* Precise Alignment: Match border top with title's first character top line */
    margin-top: 0.45rem !important;
}

.p-service-page__main {
    flex: 1 !important;
}

/* Sidebar Nav glass architecture (Exact mirror) */
.p-service-page__nav {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2.5rem 2rem;
}

.p-service-page__nav ul {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
}

.p-service-page__nav a {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
    /* Unselected state dimmed */
    letter-spacing: 0.1em;
    transition: color 0.4s ease;
    display: inline-block;
    position: relative;
    padding-bottom: 5px;
}

/* Clear white on hover/active per request */
.p-service-page__nav a:hover,
.p-service-page__nav a.is-active {
    color: #ffffff;
    opacity: 1;
    /* Ensure 100% opacity for clear white */
}

/* Sliding Underline Animation (Pixel Perfect) */
.p-service-page__nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-accent);
    transform: scaleX(0);
    /* Hidden by default */
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Underline display restricted to HOVER only per request */
.p-service-page__nav a:hover::after {
    transform: scaleX(1);
}

/* Sections & Spacing Parity */
.p-service-page__section {
    margin-bottom: 120px;
}

.p-service-page__section:last-child {
    margin-bottom: 0;
}

.p-service-page__section-title {
    font-size: 1.8rem;
    margin-bottom: 3.5rem;
    position: relative;
    padding-left: 1.5rem;
    border-left: 3px solid var(--color-accent);
    line-height: 1.2;
    /* Tighter line height for alignment */
}

/* Signs Section - Rebuilt 2x2 Grid Layout */
.p-service-signs__header {
    margin-bottom: 80px;
}

.p-service-signs__lead {
    font-size: 1.25rem;
    line-height: 2.2;
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.05em;
}

.p-service-signs__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 80px 40px;
    /* Generous vertical and horizontal gap */
}

.p-service-signs__item {
    display: flex;
    flex-direction: column;
}

.p-service-signs__img-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    margin-bottom: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4);
    position: relative;
}

.p-service-signs__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-service-signs__item:hover .p-service-signs__img-wrap img {
    transform: scale(1.08);
    /* Sophisticated micro-animation */
}

.p-service-signs__name {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--color-accent);
    /* Red/Accent as per PDF */
    font-weight: 600;
    letter-spacing: 0.1em;
}

.p-service-signs__text {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.05em;
}

/* Process Section - Refined Vertical Timeline */
.p-service-process__timeline {
    position: relative;
    padding-left: 3rem;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.p-service-process__step {
    margin-bottom: 5rem;
    position: relative;
}

.p-service-process__step:last-child {
    margin-bottom: 0;
}

.p-service-process__step::before {
    content: '';
    position: absolute;
    left: -3rem;
    top: 0.8rem;
    width: 0.6rem;
    height: 0.6rem;
    background: var(--color-accent);
    border-radius: 50%;
    transform: translateX(-50%);
}

.p-service-process__num {
    font-size: 1rem;
    color: var(--color-accent);
    opacity: 0.6;
    margin-bottom: 1rem;
    display: block;
    letter-spacing: 0.1em;
}

.p-service-process__title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

.p-service-process__text {
    font-size: 1.05rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.7);
}

/* Flow Section - Refined Steps */
.p-service-flow__item {
    display: flex;
    gap: 3rem;
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.p-service-flow__item:first-child {
    padding-top: 0;
}

.p-service-flow__item:last-child {
    border-bottom: none;
}

.p-service-flow__num {
    font-size: 0.9rem;
    color: var(--color-accent);
    width: 100px;
    flex-shrink: 0;
    padding-top: 0.4rem;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.p-service-flow__title {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}

.p-service-flow__text {
    font-size: 1.05rem;
    line-height: 2.2;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Sync with Company */
@media (max-width: 1024px) {
    .p-service-page__container {
        flex-direction: column !important;
        gap: 60px !important;
    }

    .p-service-page__sidebar {
        position: static !important;
        width: 100% !important;
        margin-bottom: 40px !important;
        margin-top: 0 !important;
    }

    .p-service-page__nav ul {
        flex-direction: row;
        gap: 2.5rem;
        justify-content: center;
        flex-wrap: wrap;
    }

    .p-service-page__nav a {
        padding-bottom: 2px;
        text-decoration: none;
    }

    .p-service-page__nav a::after {
        display: block;
        bottom: -2px;
    }

    .p-service-signs__grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .p-service-page__hero {
        padding-top: 120px;
    }

    .p-service-page__title {
        font-size: 2.8rem;
    }

    .p-service-page__nav ul {
        gap: 1.5rem;
    }

    .p-service-signs__name {
        font-size: 1.25rem;
    }

    .p-service-flow__item {
        flex-direction: column;
        gap: 1.5rem;
        padding: 3rem 0;
    }

    .p-service-process__timeline {
        padding-left: 2rem;
    }

    .p-service-process__step::before {
        left: -2rem;
    }
}

.p-service-process__step::before {
    left: -2rem;
}

/* ==========================================================================
   Accessibility & Performance Improvements
   ========================================================================== */

/* フォーカス時のアウトライン（キーボード操作対応） */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* マウス操作時はアウトラインを非表示 */
:focus:not(:focus-visible) {
    outline: none;
}

/* スキップリンク（スクリーンリーダー・キーボード用） */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--color-accent);
    color: #1a202c;
    padding: 0.5rem 1rem;
    font-family: var(--font-serif);
    font-size: 0.9rem;
    z-index: 9999;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}

/* ハンバーガーボタン：フォーカス改善 */
.l-header__hamburger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 6px;
    border-radius: 2px;
}

/* モーション軽減設定への対応 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    video {
        display: none;
    }

    /* 動画が非表示になるため、ヒーローに背景色を設定 */
    .p-hero {
        background-color: var(--color-bg-dark);
    }

    .p-service {
        background-color: var(--color-bg-dark);
    }
}

/* 画像のドラッグ防止 */
img {
    -webkit-user-drag: none;
    user-select: none;
}

/* 動画のパフォーマンス最適化 */
video {
    will-change: transform;
}

/* スクロールバーのスタイリング（Webkit系ブラウザ） */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(196, 160, 109, 0.4);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent);
}

/* テキスト選択色のカスタマイズ */
::selection {
    background-color: rgba(196, 160, 109, 0.3);
    color: var(--color-text-white);
}