/* ===================================
   MIKUMO, INC. - Modern Luxury Style
   =================================== */

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

:root {
    --blue: #0070F3;
    --blue-dark: #0056b3;
    --blue-light: #3291FF;
    --gold: var(--text-white);
    --gold-light: var(--text-muted);
    --bg-dark: #0A0A0A;
    --bg-warm: #111111;
    --bg-warm-light: #1A1A1A;
    --bg-cream: #F7F7F9;
    --text-white: #FFFFFF;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.6);
    --text-dark: #111111;
    --text-dark-secondary: #666666;
    --border-light: rgba(255, 255, 255, 0.12);
    --border-dark: rgba(0, 0, 0, 0.15);
    --font-ja: "Hiragino Kaku Gothic ProN", "郢晏・ﾎ帷ｹｧ・ｮ郢晄焔・ｧ蛛ｵ縺・ProN", "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
    --font-en: 'Inter', sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --ease-luxury: cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition: 0.4s var(--ease-luxury);
}

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

body {
    font-family: var(--font-ja);
    background: var(--bg-dark);
    color: var(--text-white);
    overflow-x: hidden;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

/* High Contrast Display for Text Selection */
::selection {
    background-color: #FFFFFF;
    color: #000000;
}

.section-dark ::selection,
.bg-dark ::selection {
    background-color: #FFFFFF;
    color: #000000;
}

.section-light ::selection,
.bg-light ::selection,
.page-light ::selection {
    background-color: #000000;
    color: #FFFFFF;
}

img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.text-red,
.text-accent {
    color: var(--text-white);
}

/* ===== Typography Utilities ===== */
.copy-main-vert {
    font-weight: 600;
    /* W6 */
    writing-mode: vertical-rl;
    letter-spacing: 0.15em;
    line-height: 1.6;
}

.copy-sub-horiz {
    font-weight: 300;
    /* W3 */
    letter-spacing: 0.05em;
    line-height: 1.8;
}

.overlay-dark-grad {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

em {
    font-style: normal;
    color: var(--text-white);
    font-weight: 500;
}

/* ===== 郢晢ｽｭ郢ｧ・ｴ騾包ｽｻ陷剃ｸ槭・鬨ｾ繝ｻ===== */
.logo-img {
    width: 32px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hero-logo-img {
    width: 80px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 24px;
    filter: brightness(0) invert(1);
}

.section-logo {
    width: 40px !important;
    height: auto !important;
    max-width: 40px;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.85;
    filter: brightness(0) invert(1);
}

.section-logo-white {
    width: 48px !important;
    height: auto !important;
    max-width: 48px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.partner-logo {
    width: 48px;
    height: auto;
    object-fit: contain;
    margin: 0 auto 24px;
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

.footer-logo-img {
    width: 32px;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.contact-logo {
    width: 40px;
    height: auto;
    object-fit: contain;
    margin-bottom: 20px;
    opacity: 0.8;
    filter: brightness(0) invert(1);
}

/* ===== 繝・ぅ繝舌う繝€繝ｼ ===== */
.hero-divider {
    width: 64px;
    height: 1px;
    margin: 24px auto;
    background: linear-gradient(90deg, transparent, var(--text-white), transparent);
}

.vision-divider {
    width: 48px;
    height: 1px;
    margin: 0 0 28px;
    background: linear-gradient(90deg, var(--text-white), transparent);
}

.const-divider {
    width: 100%;
    height: 1px;
    margin: 16px 0;
    background: linear-gradient(90deg, var(--text-white), transparent 60%);
    opacity: 0.4;
}

.partner-divider {
    width: 64px;
    height: 1px;
    margin: 0 auto 32px;
    background: linear-gradient(90deg, transparent, var(--text-white), transparent);
}

/* ===== 郢晉ｿｫ繝ｳ郢ｧ・ｲ郢晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ ===== */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 24px 0;
    transition: var(--transition);
}

#navbar.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    padding: 16px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#navbar.scrolled .logo-text,
#navbar.scrolled .nav-links a {
    color: #0A0A0A;
}

#navbar.scrolled .logo-img {
    filter: brightness(0);
}

#navbar.scrolled .nav-links a::after {
    background: #0A0A0A;
}

#navbar.scrolled .menu-toggle span {
    background: #0A0A0A;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1001;
}

.logo-text {
    font-family: var(--font-en);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-white);
    letter-spacing: 0.1em;
}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 40px;
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    position: relative;
    text-transform: uppercase;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--text-white);
    transition: var(--transition);
    transform: translateX(-50%);
}

.nav-links a:hover {
    color: var(--text-white);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-link-accent {
    color: var(--text-light) !important;
    font-weight: 600;
}

/* ===== 郢晏ｳｨﾎ溽ｹ昴・繝ｻ郢敖€郢ｧ・ｦ郢晢ｽｳ郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ ===== */
.nav-dropdown {
    position: relative;
}

.nav-dropdown>a {
    gap: 4px;
}

.nav-dropdown>a .dropdown-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    margin-left: 4px;
    transition: var(--transition);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
    background: rgba(18, 16, 14, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(8px);
    list-style: none;
    z-index: 1002;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.nav-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

.nav-dropdown:hover .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.nav-dropdown:hover>a .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu li {
    list-style: none;
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 24px;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: none;
    white-space: nowrap;
    transition: var(--transition);
}

.nav-dropdown-menu a::after {
    display: none !important;
}

.nav-dropdown-menu a:hover {
    color: var(--text-white);
    background: rgba(17, 17, 17, 0.1);
}

#navbar.scrolled .nav-dropdown-menu {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

#navbar.scrolled .nav-dropdown-menu a {
    color: #666666; /* dark gray text originally */
}

#navbar.scrolled .nav-dropdown-menu a:hover {
    color: #0A0A0A; /* black on hover */
    background: rgba(0, 0, 0, 0.05); /* slight gray */
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 4px;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-white);
    transition: var(--transition);
}

/* ===== 郢晏・繝ｻ郢晢ｽｭ郢晢ｽｼ ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.hero-img {
    position: relative;
    overflow: hidden;
}

/* Crossfade Media Logic for top page video */
.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.hero-media.active {
    opacity: 1;
}

.hero-img-2 img, .hero-img-1 .hero-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurnsHero 30s ease-in-out infinite alternate;
}

.hero:hover .hero-img-1 img, .hero:hover .hero-img-1 video {
    /* let infinite animation run instead of scaling on hover */
}

.hero:hover .hero-img-2 img, .hero:hover .hero-img-2 video {
    /* let infinite animation run */
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(18, 16, 14, 0.55);
    z-index: 10;
}

.hero-content {
    position: relative;
    z-index: 20;
    text-align: center;
}

.hero-logo-img {
    animation: heroFadeIn 1.2s var(--ease-luxury) both;
}

.stagger-char {
    display: inline-block;
    opacity: 0;
}

.hero-company .stagger-char {
    animation: heroFadeIn 1s var(--ease-luxury) both;
}

.aos-animate .stagger-char {
    animation: heroFadeIn 1s var(--ease-luxury) both;
}

.hero-company {
    font-family: var(--font-en);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.1em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
}

.hero-divider {
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-white), transparent);
    margin: 24px auto;
    opacity: 0.5;
    animation: heroFadeIn 1.2s var(--ease-luxury) 0.4s both;
}

.hero-sub {
    font-size: clamp(0.9rem, 2vw, 1.2rem);
    font-weight: 400;
    color: var(--text-light);
    letter-spacing: 0.15em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
    animation: heroFadeIn 1.2s var(--ease-luxury) 0.6s both;
}

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    animation: heroFadeIn 1.2s var(--ease-luxury) 0.6s both;
}

.scroll-label {
    font-family: var(--font-en);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--text-white);
    text-transform: uppercase;
    font-weight: 500;
}

.scroll-line {
    width: 1px;
    height: 56px;
    background: linear-gradient(to bottom, var(--text-white), transparent);
    animation: scrollPulse 2.5s ease infinite;
}

/* ===== 郢晁侭縺夂ｹ晢ｽｧ郢晢ｽｳ ===== */
.vision {
    position: relative;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
}

.vision-text-block {
    background: var(--bg-warm);
    padding: 80px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vision-headline {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.vision-body {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 2.2;
    letter-spacing: 0.02em;
    font-weight: 400;
}

.vision-image {
    overflow: hidden;
}

.vision-image img {
    transition: transform 0.8s var(--ease-luxury);
}

.vision-image:hover img {
    transform: scale(1.03);
}

/* ===== 郢ｧ・ｻ郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ陷茨ｽｱ鬨ｾ繝ｻ===== */
.section-tag {
    font-family: var(--font-en);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.section-tag-center {
    text-align: center;
    margin: 0 auto 16px;
}

.section-header-center {
    text-align: center;
    padding-bottom: 80px;
}

.section-title-lg {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

/* ===== 闔蛹ｺ・･・ｭ郢ｧ・ｻ郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ ===== */
.business {
    padding: 90px 0 0;
}

#business .container {
    max-width: 1536px;
    padding: 0 4vw;
}

.biz-block {
    background: var(--bg-dark);
}

.biz-block:nth-child(even) {
    background: var(--bg-warm);
}

.biz-block-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}

.biz-block-reverse .biz-block-inner {
    direction: rtl;
}

.biz-block-reverse .biz-block-inner>* {
    direction: ltr;
}

.biz-block-image {
    overflow: hidden;
    position: relative;
}

.biz-block-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(18, 16, 14, 0.4) 100%);
    pointer-events: none;
}

.biz-block-image img {
    transition: transform 0.8s var(--ease-luxury);
}

.biz-block-image:hover img {
    transform: scale(1.03);
}

.biz-block-text {
    padding: 60px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(24px);
}

.biz-block-text.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.biz-block-image {
    opacity: 0;
    transform: translateY(24px);
}

.biz-block-image.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.biz-label {
    font-family: var(--font-en);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.15em;
    margin-bottom: 24px;
    display: block;
    text-transform: uppercase;
}

.biz-heading {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.biz-desc {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 2;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ===== 陝抵ｽｺ驕ｽ迚呻ｽｷ・･雎輔・===== */
.construction {
    padding-bottom: 120px;
}

.construction-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
    padding-bottom: 80px;
}

.construction-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.construction-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(18, 16, 14, 0.2) 0%, rgba(18, 16, 14, 0.85) 100%);
}

.construction-hero-text {
    color: #FFFFFF;
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
    padding: 0 24px;
    opacity: 0;
    transform: translateY(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.construction-hero-text.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.construction-hero-text h2 {
    font-size: clamp(1.6rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.construction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.const-card {
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 40px 32px;
    transition: var(--transition);
    opacity: 0;
    transform: translateY(24px);
}

.const-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.const-card:hover {
    border-color: rgba(17, 17, 17, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.const-card-header {
    margin-bottom: 0;
}

.const-card-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.const-price {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--text-white);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.const-price strong {
    font-family: var(--font-en);
    font-size: 1.25rem;
}

.const-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.8;
    font-weight: 400;
    margin-top: 16px;
    word-break: keep-all;
    /* 陷雁€ｩ・ｪ讒ｭ繝ｻ鬨ｾ豈費ｽｸ・ｭ邵ｺ・ｧ邵ｺ・ｮ隰ｾ・ｹ髯ｦ蠕鯉ｽ帝ｫｦ・ｲ邵ｺ繝ｻ*/
    overflow-wrap: break-word;
}

.const-note {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
    padding-top: 16px;
    letter-spacing: 0.02em;
}

/* ===== 驍ｨ謔滄悸騾・・・ｿ・ｵ ===== */
.philosophy {
    padding: 90px 0 90px;
    background: var(--bg-dark);
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.philosophy-card {
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 48px 32px;
    text-align: center;
    transition: var(--transition);
}

.philosophy-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border-color: var(--border-light);
}

.philosophy-icon {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
}

.philosophy-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.philosophy-card p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.9;
    font-weight: 400;
}

.philosophy-comparison {
    padding: 60px 0;
    background: var(--bg-warm);
}

.comparison-header {
    text-align: center;
    padding-bottom: 48px;
}

.comparison-title {
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.comparison-subtitle {
    font-size: 1rem;
    color: var(--text-light);
    letter-spacing: 0.02em;
}

.pdf-image-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pdf-image-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.pdf-image-item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.pdf-image-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===== 陞滂ｽｧ隰・唱蛻€髮会ｽｪ郢ｧ蟶昶・雎・ｽ｣關難ｽ｡隴ｬ・ｼ邵ｺ・ｧ ===== */
.quality-price {
    padding: 90px 0;
    background: var(--bg-dark);
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-light);
    line-height: 2;
    max-width: 720px;
    margin: 24px auto 0;
    text-align: center;
    letter-spacing: 0.02em;
}

.quality-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 64px 0;
}

.quality-feature-card {
    background: var(--bg-warm);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 40px 28px;
    transition: var(--transition);
}

.quality-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--border-light);
}

.qf-number {
    font-family: var(--font-en);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.quality-feature-card h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.quality-feature-card p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.85;
    font-weight: 400;
}

.pdf-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.pdf-showcase-row3 {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 48px;
}

.pdf-showcase-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.pdf-showcase-item:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.pdf-showcase-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* ===== 隴・ｽｽ陝ｾ・･陷ｩ竏ｬ・ｳ・ｪ髫ｧ・ｳ驍擾ｽｰ ===== */
.quality-detail {
    margin-top: 80px;
    padding: 64px 0;
    border-top: 1px solid var(--border-light);
}

.quality-detail-title {
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 48px;
    letter-spacing: 0.04em;
}

.quality-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.quality-detail-item {
    text-align: center;
}

.qd-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.quality-detail-item h4 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

.quality-detail-item p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.85;
    font-weight: 400;
}

/* ===== 郢ｧ・｢郢晁ｼ斐■郢晢ｽｼ郢ｧ・ｵ郢晄亢繝ｻ郢昴・===== */
.aftercare {
    padding: 90px 0;
    background: var(--bg-warm);
}

.aftercare-partner {
    margin-top: 64px;
}

.aftercare-partner-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--bg-dark);
    border-radius: 16px;
    padding: 56px;
    border: 1px solid var(--border-light);
}

.aftercare-partner-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.aftercare-partner-text p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 12px;
}

.aftercare-partner-image {
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

.aftercare-partner-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 3隴幢ｽｬ隴滂ｽｱ */
.aftercare-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 64px;
}

.aftercare-pillar {
    background: var(--bg-dark);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 40px 28px;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.aftercare-pillar:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--border-light);
}

.pillar-number {
    font-family: var(--font-en);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 20px;
    letter-spacing: 0.05em;
}

.aftercare-pillar h4 {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.aftercare-pillar p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 20px;
}

.pillar-image {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    margin-top: auto;
    cursor: pointer;
}

.pillar-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 郢ｧ・ｻ郢晢ｽｬ郢ｧ・ｯ郢昜ｺ･螳・*/
.aftercare-select {
    margin-top: 64px;
}

.aftercare-select-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--bg-dark);
    border-radius: 16px;
    padding: 56px;
    border: 1px solid var(--border-light);
}

.aftercare-select-text h3 {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.7;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.text-gold {
    color: var(--text-white);
}

.aftercare-select-text p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 12px;
}

.aftercare-select-image {
    border-radius: 12px;
    overflow: hidden;
}

.aftercare-select-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.aftercare-comparison {
    margin-top: 48px;
}

/* アフター費用 比較テーブル */
.aftercare-comparison-table {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 8px;
}

.comparison-row {
    border-left: 3px solid var(--accent-gold, #c5a55a);
    padding-left: 16px;
}

.comparison-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-gold, #c5a55a);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.comparison-detail p {
    font-size: 0.88rem;
    line-height: 1.7;
    margin-bottom: 6px;
}

.comparison-other {
    color: var(--text-muted, #999);
}

.comparison-ours {
    color: var(--text-light, #ccc);
}

.comparison-ours strong {
    color: var(--text-white, #fff);
}

/* ===== 郢ｧ・｢郢晢ｽｼ郢昴・縺・ｹｧ・ｹ郢昴・===== */
.artist {
    background: var(--bg-dark);
}

.artist-hero {
    position: relative;
    height: 500px;
    overflow: hidden;
}

.artist-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(18, 16, 14, 0.4), rgba(18, 16, 14, 0.85));
}


.artist-hero-text h1 {
    color: #FFFFFF;
}
.artist-hero-text {
    position: absolute;
    bottom: 64px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}

.section-tag-white {
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.3);
}

.artist-hero-text h2 {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
    margin-top: 16px;
}

.artist-profile {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 56px;
    padding: 60px 0;
    border-bottom: 1px solid var(--border-light);
}

.artist-name {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: 0.06em;
}

.artist-name-en {
    display: block;
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: 0.15em;
    margin-top: 8px;
}

.artist-bio {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 2;
    margin-bottom: 16px;
    font-weight: 400;
}

.artist-info-block {
    margin-bottom: 32px;
}

.artist-info-block h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.artist-info-block p {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.9;
}

.artist-awards {
    list-style: none;
    padding: 0;
}

.artist-awards li {
    font-size: 0.92rem;
    color: var(--text-light);
    line-height: 1.9;
    padding-left: 16px;
    position: relative;
}

.artist-awards li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    background: var(--text-white);
    border-radius: 50%;
}

/* 陞ｳ貅ｽ・ｸ・ｾ郢晢ｽｪ郢ｧ・ｹ郢昴・*/
.artist-works {
    padding: 60px 0;
}

.artist-works-title {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 48px;
    letter-spacing: 0.04em;
}

.artist-works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.artist-work-item {
    display: flex;
    gap: 20px;
    padding: 24px;
    background: var(--bg-warm);
    border-radius: 8px;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.artist-work-item:hover {
    border-color: var(--border-light);
}

.aw-year {
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-white);
    letter-spacing: 0.05em;
    white-space: nowrap;
    min-width: 56px;
    padding-top: 2px;
}

.aw-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: 0.02em;
}

.aw-content p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.artist-link-wrap {
    text-align: center;
    margin-top: 40px;
}

.artist-link {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: 0.1em;
    padding: 12px 32px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    transition: var(--transition);
}

.artist-link:hover {
    background: var(--text-white);
    color: var(--bg-dark);
}

/* ===== 郢晢ｽｯ郢晢ｽｼ郢ｧ・ｯ郢ｧ・ｹ郢ｧ・ｮ郢晢ｽ｣郢晢ｽｩ郢晢ｽｪ郢晢ｽｼ ===== */
.works {
    padding: 90px 0 60px;
    background: var(--bg-warm);
    overflow: hidden;
}

.works-gallery {
    position: relative;
    margin-top: 48px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.works-gallery::-webkit-scrollbar {
    display: none;
}

.works-gallery-track {
    display: flex;
    gap: 24px;
    padding: 0 40px;
    cursor: grab;
}

.works-gallery-track:active {
    cursor: grabbing;
}

.works-gallery-item {
    flex: 0 0 400px;
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.works-gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.works-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.works-gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 24px 24px;
    background: linear-gradient(to top, rgba(18, 16, 14, 0.85), transparent);
}

.works-gallery-caption span {
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ===== 陝抵ｽｺ驕ｽ迚呻ｽｷ・･雎戊ｼ斐◎郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ ===== */
.construction {
    overflow: hidden;
}

.construction-hero {
    position: relative;
    height: 60vh;
    min-height: 400px;
    overflow: hidden;
}

.construction-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.construction-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(18, 16, 14, 0.3), rgba(18, 16, 14, 0.8));
}

.construction-hero-text {
    color: #FFFFFF;
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    text-align: center;
}

.construction-hero-text .section-logo {
    width: 80px !important;
    max-width: 80px !important;
    margin: 0 auto 32px;
}

.construction-hero-text h2 {
    font-size: clamp(1.6rem, 4vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.construction-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 48px 0 0;
    max-width: 100%;
}

.const-card {
    background: var(--bg-warm);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.const-card:hover {
    border-color: var(--text-white);
    transform: translateY(-4px);
}

.const-card-image {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.const-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

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

.const-card-body {
    padding: 24px;
}

.const-card-header {
    padding: 24px 24px 0;
}

.const-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.const-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.8;
    padding: 0 24px 24px;
}

.const-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 24px;
}

/* ===== 闔蛟ｶ・ｾ迢暦ｽｴ・ｹ闔我ｹ昴″郢晢ｽｫ郢晢ｽｼ郢ｧ・ｻ郢晢ｽｫ ===== */
.works-carousel {
    padding: 90px 0;
    background: var(--bg-warm);
    overflow: hidden;
}

.works-carousel .container {
    max-width: 1200px;
}

.works-carousel-track-wrap {
    position: relative;
    margin-top: 48px;
    overflow: hidden;
}

.works-carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    cursor: grab;
    will-change: transform;
}

.works-carousel-track.dragging {
    cursor: grabbing;
}

.works-carousel-item {
    flex: 0 0 350px;
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.works-carousel-item:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.works-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurnsPanX 25s ease-in-out infinite alternate;
}

.works-carousel-item:nth-child(even) img {
    animation: kenBurnsPanY 28s ease-in-out infinite alternate;
}

.works-carousel-item:hover img {
    /* override hover scale */
}

.works-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(18, 16, 14, 0.85), transparent);
}

.works-carousel-caption span {
    font-family: var(--font-en);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.works-carousel-caption p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 4px;
}

.works-carousel-link {
    text-align: center;
    margin-top: 48px;
}

/* ===== 郢晏｣ｹ繝ｻ郢ｧ・ｸCTA ===== */
.page-cta {
    padding: 90px 0;
    background: var(--bg-warm);
}

.page-cta-inner {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.page-cta-inner h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: 0.04em;
}

.page-cta-inner p {
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.9;
    margin-bottom: 40px;
}

/* ===== 髫ｧ・ｳ邵ｺ蜉ｱ・･髫穂ｹ晢ｽ狗ｹ晄㈱縺｡郢晢ｽｳ ===== */
.btn-detail {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-white);
    letter-spacing: 0.05em;
    margin-top: 20px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition);
}

.btn-detail:hover {
    color: #fff;
    border-color: #fff;
}

.const-cta-wrap {
    text-align: center;
    margin: 40px 0 16px;
}

/* ===== 郢晢ｽｯ郢晢ｽｼ郢ｧ・ｯ郢ｧ・ｹ郢晁ｼ釆晉ｹｧ・ｰ郢晢ｽｪ郢昴・繝ｩ ===== */
.works-full-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.works-full-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    transition: var(--transition);
}

.works-full-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.works-full-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.works-full-item:hover img {
    transform: scale(1.06);
}

.works-full-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 48px 24px 24px;
    background: linear-gradient(to top, rgba(18, 16, 14, 0.85), transparent);
}

.works-full-caption span {
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.works-full-caption p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.5;
}

/* ===== 郢昜ｻ｣繝ｻ郢晏現繝ｪ郢晢ｽｼCTA ===== */
.partner { position: relative; padding: 120px 0; background: url('images/cta_momiji.jpg') center/cover no-repeat; color: #FFFFFF; overflow: hidden; --text-white: #FFFFFF; --text-light: rgba(255, 255, 255, 0.9); }
.partner::before { content: ''; position: absolute; inset: 0; background: rgba(18, 16, 14, 0.6); z-index: 1; }
.partner .container { position: relative; z-index: 2; }

.partner-inner {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(24px);
}

.partner-inner.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.partner-headline { font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 700; line-height: 1.3; margin-bottom: 24px; letter-spacing: 0.02em; color: #FFFFFF; text-shadow: 0 4px 24px rgba(0,0,0,0.4); }

.partner-body { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.9; padding-bottom: 48px; font-weight: 400; letter-spacing: 0.02em; text-shadow: 0 2px 12px rgba(0,0,0,0.5); }

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 64px;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-ja);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    transition: var(--transition);
    border: 1px solid var(--blue);
}

.btn-cta:hover {
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 112, 243, 0.4);
}

/* ===== 郢晏｣ｹ繝ｻ郢ｧ・ｸ郢晏€･繝｣郢敖€郢晢ｽｼ (company) ===== */
.page-header {
    position: relative;
    padding: 180px 0 100px;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
}

.page-header-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center top, rgba(17, 17, 17, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.page-header-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-header-logo {
    width: 56px;
    height: auto;
    object-fit: contain;
    margin-bottom: 24px;
    opacity: 0.9;
    filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.page-header-text {
    text-align: center;
}

.page-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-top: 0;
    color: var(--text-white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
    line-height: 1.2;
}

/* ===== 雎墓・蝎ｪ郢ｧ・ｻ郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ ===== */
.legal-section {
    padding: 100px 0;
}

.legal-section-alt {
    background: var(--bg-warm);
}

.legal-block {
    max-width: 860px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
}

.legal-block.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.legal-heading {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.02em;
}

.legal-marker {
    color: var(--text-dark);
    font-size: 0.8rem;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

.info-table tr {
    border-bottom: 1px solid var(--border-light);
}

.info-table th {
    padding: 24px 32px 24px 0;
    text-align: left;
    font-weight: 600;
    font-size: 0.95rem;
    white-space: nowrap;
    vertical-align: top;
    width: 200px;
    color: var(--text-white);
    letter-spacing: 0.02em;
}

.info-table td {
    padding: 24px 0;
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.9;
    font-weight: 400;
}

.email-link {
    color: var(--text-white);
    font-weight: 500;
}

.email-link:hover {
    color: var(--text-muted);
    text-decoration: underline;
}

.notice-box {
    background: rgba(17, 17, 17, 0.08);
    border: 1px solid rgba(17, 17, 17, 0.2);
    border-radius: 8px;
    padding: 24px 32px;
}

.notice-box p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.9;
    font-weight: 400;
}

.legal-intro {
    font-size: 1rem;
    color: var(--text-light);
    margin-bottom: 32px;
    font-weight: 400;
}

.privacy-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.privacy-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 32px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: var(--transition);
}

.privacy-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.privacy-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--text-dark);
    color: var(--bg-dark);
    font-family: var(--font-en);
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 6px;
}

.privacy-item h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.privacy-item p {
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 400;
    line-height: 1.8;
}

/* ===== 邵ｺ髮∵牒邵ｺ繝ｻ邊狗ｹｧ荳岩雷 ===== */
.contact {
    background: var(--bg-cream);
    color: var(--text-dark);
    padding: 100px 0;
}

.contact .section-tag {
    color: var(--text-dark);
}

.contact h2 {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 24px;
    color: var(--text-dark);
    letter-spacing: 0.02em;
}

.contact-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: stretch;
}

.contact-lead {
    color: var(--text-dark-secondary);
    margin-bottom: 40px;
    line-height: 1.9;
    font-weight: 400;
    font-size: 1.05rem;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ci-label {
    font-family: var(--font-en);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ci-value {
    font-size: 1rem;
    color: var(--text-dark);
    font-weight: 500;
}

.email-link-dark {
    color: var(--text-dark);
    text-decoration: underline;
}

.email-link-dark:hover {
    color: var(--text-muted);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 1px solid var(--border-dark);
    border-radius: 6px;
    color: var(--text-dark);
    font-family: var(--font-ja);
    font-size: 1rem;
    transition: var(--transition);
    outline: none;
    font-weight: 400;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--text-dark);
    box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 140px;
}

.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 48px;
    background: var(--blue);
    color: white;
    font-family: var(--font-ja);
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    border-radius: 9999px;
    transition: var(--transition);
    letter-spacing: 0.05em;
}

.btn-submit:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 112, 243, 0.3);
}

/* ===== 郢晁ｼ斐Ε郢ｧ・ｿ郢晢ｽｼ ===== */
.footer {
    padding: 64px 0 32px;
    border-top: 1px solid var(--border-light);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 48px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-company {
    font-family: var(--font-en);
    font-size: 1.1rem;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    letter-spacing: 0.05em;
}

.footer-company-ja {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: block;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.footer-nav {
    display: flex;
    gap: 32px;
}

.footer-nav a {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-en);
}

.footer-nav a:hover {
    color: var(--text-white);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 32px;
    border-top: 1px solid var(--border-light);
}

.footer-bottom p {
    font-family: var(--font-en);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-legal {
    display: flex;
    gap: 24px;
}

.footer-legal a {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.footer-legal a:hover {
    color: var(--text-white);
}

/* ===== 郢ｧ・｢郢昜ｹ斟鍋ｹ晢ｽｼ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ ===== */
@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Lightbox ===== */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    transform: scale(0.95);
    transition: var(--transition);
}

.lightbox.active .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 40px;
    color: white;
    font-size: 48px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    font-family: var(--font-en);
    transition: color 0.3s;
    z-index: 2;
}

.lightbox-close:hover {
    color: var(--text-white);
}

.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 40px;
    cursor: pointer;
    user-select: none;
    padding: 24px;
    transition: color 0.3s;
    z-index: 2;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: var(--text-white);
}

.lightbox-prev {
    left: 16px;
}

.lightbox-next {
    right: 16px;
}

.lightbox-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
}

.lightbox-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background 0.3s, transform 0.3s;
}

.lightbox-dot.active {
    background: var(--text-white);
    transform: scale(1.3);
}

.lightbox-dot:hover {
    background: rgba(255, 255, 255, 0.7);
}

/* Lightbox nav-row: PC邵ｺ・ｧ邵ｺ・ｯ郢晏ｳｨ繝｣郢晏現繝ｻ邵ｺ・ｿ髯ｦ・ｨ驕会ｽｺ */
.lightbox-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.lightbox-nav-row .lightbox-dots {
    position: static;
    transform: none;
}

.lightbox-prev-mobile,
.lightbox-next-mobile {
    display: none;
}

/* 郢ｧ・ｹ郢晄ｧｭ繝ｻ騾包ｽｨ Lightbox 郢晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢昴・*/
@media (max-width: 768px) {
    .lightbox {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 60px 16px 40px;
    }

    .lightbox.active {
        display: flex;
    }

    .lightbox-img {
        max-width: 100%;
        max-height: 60vh;
    }

    /* PC騾包ｽｨ邵ｺ・ｮ陝ｾ・ｦ陷ｿ・ｳ驕擾ｽ｢陷奇ｽｰ郢ｧ蟶晄直髯ｦ・ｨ驕会ｽｺ */
    .lightbox-prev-desktop,
    .lightbox-next-desktop {
        display: none !important;
    }

    /* 郢晉ｿｫ繝ｳ髯ｦ蠕鯉ｽ帝勗・ｨ驕会ｽｺ: 陝ｾ・ｦ邵ｺ・ｫ隰鯉ｽｻ郢ｧ荵敖€竏ｽ・ｸ・ｭ陞滂ｽｮ邵ｺ・ｫ郢晏ｳｨ繝｣郢晏現ﾂ€竏晄価邵ｺ・ｫ隹ｺ・｡邵ｺ・ｸ */
    .lightbox-nav-row {
        position: static;
        transform: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 16px;
        width: 100%;
    }

    .lightbox-prev-mobile,
    .lightbox-next-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: static;
        font-size: 1.8rem;
        line-height: 1;
        color: rgba(255, 255, 255, 0.8);
        padding: 8px 16px;
        cursor: pointer;
        user-select: none;
    }

    .lightbox-dots {
        position: static;
        transform: none;
        margin-top: 0;
        display: inline-flex;
        align-items: center;
    }
}

.pdf-image-item img,
.pdf-showcase-item img {
    cursor: pointer;
    transition: transform 0.4s ease;
}

.pdf-image-item img:hover,
.pdf-showcase-item img:hover {
    transform: scale(1.02);
}

@keyframes scrollPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 1;
    }
}

/* ===== 郢晢ｽｬ郢ｧ・ｹ郢晄亢ﾎｦ郢ｧ・ｷ郢昴・===== */
@media (max-width: 968px) {
    .container {
        padding: 0 32px;
    }

    .hero-bg {
        grid-template-columns: 1fr;
    }

    .hero-img-1 {
        display: none;
    }

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

    .vision-image {
        height: 400px;
    }

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

    .biz-block-reverse .biz-block-inner {
        direction: ltr;
    }

    .biz-block-image {
        height: 350px;
    }

    .biz-block-text {
        padding: 60px 40px;
    }

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

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

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

    .aftercare-pillars {
        grid-template-columns: 1fr;
    }

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

    .artist-profile {
        grid-template-columns: 1fr;
    }

    .aftercare-partner-inner,
    .aftercare-select-inner {
        grid-template-columns: 1fr;
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 56px;
    }

    .info-table th {
        width: 140px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(18, 16, 14, 0.98);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 80px 24px 32px;
        overflow-y: auto;
        gap: 20px;
    }

    .nav-links li {
        list-style: none;
    }

    .nav-links.active {
        display: flex;
    }

    /* 郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ邵ｺ遒∝ｹ慕ｸｺ繝ｻ窶ｻ邵ｺ繝ｻ・狗ｸｺ・ｨ邵ｺ髦ｪﾂ€・ｽavbar髢ｾ・ｪ闖ｴ阮呻ｽ定怦・ｨ騾包ｽｻ鬮ｱ・｢陋ｹ繝ｻ*/
    #navbar.menu-open {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100vh;
        padding: 24px 0;
        background: rgba(18, 16, 14, 0.98);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        z-index: 9999;
    }

    .nav-links a {
        font-size: 1.1rem;
        color: var(--text-white);
    }

    .nav-dropdown>a {
        display: block !important;
        text-align: center;
        width: 100%;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        visibility: visible;
        opacity: 1;
        display: block;
        margin-top: 16px;
    }

    .nav-dropdown-menu li {
        padding-left: 0;
    }

    .nav-dropdown-menu a {
        padding: 12px 0;
        text-align: center;
        font-size: 0.9rem;
        color: var(--text-muted) !important;
    }

    .dropdown-arrow {
        display: none !important;
    }

    .menu-toggle {
        display: flex;
    }

    .menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .hero-logo-img {
        width: 64px;
    }

    .vision-text-block {
        padding: 64px 32px;
    }

    .biz-block-text {
        padding: 48px 32px;
    }

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

    .construction-hero {
        height: 350px;
    }

    .construction-hero-text .section-logo {
        width: 80px !important;
        max-width: 80px !important;
        margin-bottom: 32px;
    }

    .construction-hero-text {
    color: #FFFFFF;
        padding: 0 16px;
        bottom: 32px;
    }

    .section-logo-white {
        width: 32px;
        margin-bottom: 16px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-top {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }

    .footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .footer-brand {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-header {
        padding: 90px 0 45px;
    }

    .info-table th {
        display: block;
        width: 100%;
        padding-bottom: 8px;
    }

    .info-table td {
        display: block;
        padding-top: 0;
        padding-bottom: 24px;
    }

    .nav-container {
        padding: 0 24px;
    }

    /* 郢ｧ・ｹ郢晄ｧｭ繝ｻ隴弱・ <br>郢ｧ蝣､笏瑚怏・ｹ陋ｹ謔ｶ・邵ｺ・ｦ髢ｾ・ｪ霎滂ｽｶ隰壼€･・企恆譁撰ｼ邵ｺ・ｫ */
    .biz-heading br,
    .biz-desc br,
    .vision-body br,
    .partner-body br {
        display: none;
    }

    /* 郢晁ｼ斐°郢晢ｽｼ郢晢ｿｽ鬮｢鬥ｴ蝗育ｹｧ蝣､・ｸ・ｮ陝・・*/
    .contact-form {
        gap: 16px;
    }

    .form-group label {
        margin-bottom: 6px;
    }

    /* 郢晢ｽ｡郢昜ｹ斟礼ｹ晢ｽｼ郢晏現縺堤ｹ晢ｽｫ邵ｺ・ｮz-index郢ｧ蜻域€呵恆蝓ｼ謫・ｸｺ・ｫ */
    .menu-toggle {
        z-index: 10000;
    }

    /* -- 隴・ｽｰ郢ｧ・ｻ郢ｧ・ｯ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ 郢晢ｽｬ郢ｧ・ｹ郢晄亢ﾎｦ郢ｧ・ｷ郢昴・-- */
    .philosophy-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .philosophy-card {
        padding: 36px 24px;
    }

    .philosophy-comparison {
        padding: 48px 0;
    }

    .pdf-image-grid {
        grid-template-columns: 1fr;
    }

    .quality-price {
        padding: 60px 0;
    }

    .quality-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .quality-feature-card {
        padding: 32px 24px;
    }

    .pdf-showcase {
        grid-template-columns: 1fr;
    }

    .pdf-showcase-row3 {
        grid-template-columns: 1fr;
    }

    .quality-detail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .aftercare {
        padding: 60px 0;
    }

    .aftercare-partner-inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }

    .aftercare-pillars {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .aftercare-pillar {
        padding: 32px 24px;
    }

    .aftercare-select-inner {
        grid-template-columns: 1fr;
        padding: 32px 24px;
    }

    .artist-hero {
        height: 300px;
    }

    .artist-hero-text {
        bottom: 32px;
    }

    .artist-profile {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 48px 0;
    }

    .artist-works-grid {
        grid-template-columns: 1fr;
    }

    .works {
        padding: 60px 0 40px;
    }

    .works-gallery-track {
        padding: 0 24px;
    }

    .works-gallery-item {
        flex: 0 0 300px;
    }

    /* 郢ｧ・ｹ郢晄ｧｭ繝ｻ隴弱ｅ繝ｻbr郢ｧ・ｿ郢ｧ・ｰ霎滂ｽ｡陷会ｽｹ陋ｹ謔ｶ・定ｫ｡・｡陟托ｽｵ */
    .section-title-lg br,
    .aftercare-pillar h4 br,
    .aftercare-select-text h3 br,
    .comparison-title br {
        display: none;
    }

    .works-full-grid {
        grid-template-columns: 1fr;
    }

    .page-cta {
        padding: 60px 0;
    }
}


/* ===== Full Screen Vertical Layout ===== */
.sec-fullscreen {
    position: relative;
    min-height: 100vh;
    display: flex;
    padding: 90px 4% 40px;
    overflow: hidden;
    color: var(--text-white);
}

.sec-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sec-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 隴√・・ｭ蜉ｱ繝ｻ髫募・・ｪ閧ｴﾂ€・ｧ郢ｧ蟶晢ｽｫ蛟･・∫ｹｧ蛹ｺ蝗楢楜・､陋ｹ謔ｶ縺堤ｹ晢ｽｩ郢昴・繝ｻ郢ｧ・ｷ郢晢ｽｧ郢晢ｽｳ繝ｻ蛹ｻ縺帷ｹ晄ｧｭ繝ｻ陷・ｽｪ陷郁肩・ｼ繝ｻ*/
.sec-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* 陷ｿ・ｳ邵ｺ荵晢ｽ芽淦・ｦ邵ｺ・ｸ繝ｻ閧ｲ・ｸ・ｦ隴厄ｽｸ邵ｺ髦ｪﾎ鍋ｹｧ・､郢晢ｽｳ郢ｧ・ｳ郢晄鱒繝ｻ騾包ｽｨ繝ｻ蟲ｨ竊定叉荵敖ｰ郢ｧ謌托ｽｸ鄙ｫ竏医・蝓滂ｽｨ・ｪ隴厄ｽｸ邵ｺ髦ｪ縺礼ｹ晄じ縺慕ｹ晄鱒繝ｻ騾包ｽｨ繝ｻ蟲ｨ繝ｻ髫阪・邊・*/
    background: 
        linear-gradient(to left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 30%, rgba(0,0,0,0) 80%),
        linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%);
}

.sec-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: calc(100vh - 180px); /* adjusted for padding */
}

.sec-copy-main-area {
    display: flex;
    flex-direction: row-reverse; /* 陷ｿ・ｳ陋幢ｽｴ邵ｺ・ｫ鬩溷調・ｽ・ｮ */
    flex: 1; /* fills available vertical space */
    margin-bottom: 40px;
    margin-right: 0;
}

.sec-copy-main-area .copy-main-vert {
    font-size: clamp(2.2rem, 7vw, 4rem);
    text-shadow: 0 4px 12px rgba(0,0,0,0.5); 
    margin-left: 1rem; 
}

.sec-copy-sub-area {
    max-width: 600px;
    margin-top: auto;
}

.sec-copy-sub-area .copy-sub-horiz {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: var(--text-light);
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* 郢ｧ・｢郢ｧ・ｯ郢ｧ・ｻ郢晢ｽｳ郢晏現繝ｻ邵ｲ譴ｧ諢墓ｿｶ・ｲ繝ｻ莠･譟ｱ邵ｺ・ｮ隘搾ｽ､繝ｻ蟲ｨﾂ€繝ｻ*/
.accent-blue {
    color: #0070F3; 
}

/* PC霑夲ｽｹ隴帛ｳｨ繝ｻ郢晢ｽｬ郢ｧ・､郢ｧ・｢郢ｧ・ｦ郢昜ｺ･・ｾ・ｮ髫ｱ・ｿ隰ｨ・ｴ */
@media (min-width: 769px) {
    .sec-copy-main-area {
        margin-right: 8%; /* PC邵ｺ・ｧ邵ｺ・ｯ陷ｿ・ｳ驕ｶ・ｯ邵ｺ・ｫ闖ｴ蜻ｵ・｣霈費ｽ定ｬ問・笳・ｸｺ蟶呻ｽ・*/
    }
}
@media (max-width: 768px) {
    .sec-fullscreen {
        padding: 90px 20px 40px;
    }
    .sec-copy-main-area .copy-main-vert {
        letter-spacing: 0.1em; /* 郢ｧ・ｹ郢晄ｧｭ繝ｻ邵ｺ・ｯ陝・ｻ｣・陝・斡菫｣郢ｧ螳夲ｽｩ・ｰ郢ｧ竏夲ｽ・*/
    }
}

/* ===================================
   ===== DUAL THEME UTILITIES ======
   =================================== */

/* Page Light Variant & Section Light Object Override */
body.page-light, .section-light {
    --text-white: #111111;
    --text-light: #666666;
    --gold: #111111;
    --text-muted: rgba(0, 0, 0, 0.4);
    --border-light: rgba(0, 0, 0, 0.1);
    --bg-dark: #F7F7F9; /* Inverse dark becomes cream */
    --bg-warm: #FFFFFF;
    background: #FFFFFF;
    color: var(--text-dark);
}

/* Section Dark (explicit reset for dark sections in light pages) */
.section-dark {
    --text-white: #FFFFFF;
    --text-light: rgba(255, 255, 255, 0.9);
    --gold: #FFFFFF;
    --text-muted: rgba(255, 255, 255, 0.6);
    --border-light: rgba(255, 255, 255, 0.12);
    --bg-dark: #0A0A0A;
    --bg-warm: #111111;
    background: var(--bg-dark);
    color: var(--text-white);
}

/* Base Light Utility Class */
.section-light {
    background: #FFFFFF;
    color: var(--text-dark);
}
.section-light .vision-text-block,
.section-light .biz-block,
.section-light .biz-block:nth-child(even),
.section-light .const-card {
    background: #FFFFFF;
    border-color: var(--border-dark);
}
.section-light .vision-headline,
.section-light .biz-heading,
.section-light .const-card-header h3,
.section-light .section-title-lg,
.section-light .service-card h3 {
    color: var(--text-dark);
}
.section-light .vision-body,
.section-light .biz-desc,
.section-light .const-card p,
.section-light .service-card p {
    color: var(--text-dark-secondary);
}

/* Background Gray Variant */
.bg-gray {
    background: #F8F8F8 !important;
}
.bg-gray .biz-block,
.bg-gray .const-card,
.bg-gray .vision-text-block {
    background: #F8F8F8;
    border-color: rgba(0,0,0,0.06);
}

/* Section Dark (explicit) */
.section-dark {
    background: var(--bg-dark);
    color: var(--text-white);
}

/* Navbar Light Variant */
#navbar.light {
    background: transparent;
}
#navbar.light.scrolled {
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#navbar.light .logo-text {
    color: var(--text-dark);
}
#navbar.light .nav-links a {
    color: rgba(0, 0, 0, 0.6);
}
#navbar.light .nav-links a:hover,
#navbar.light .nav-link-accent {
    color: var(--text-dark) !important;
}
#navbar.light .menu-toggle span {
    background: var(--text-dark);
}

/* Override light navbar when menu is open (dark overlay) */
#navbar.light.menu-open .logo-text {
    color: var(--text-white) !important;
}
#navbar.light.menu-open .nav-links a {
    color: #fff !important;
}
#navbar.light.menu-open .nav-dropdown-menu a {
    color: rgba(255,255,255,0.6) !important;
}
#navbar.light.menu-open .menu-toggle span,
#navbar.light.menu-open .menu-toggle.active span {
    background: #fff !important;
}


/* Page Header Light Override */
.section-light.page-header .page-header-bg {
    background: transparent;
}
.section-light.page-header {
    background: var(--bg-cream);
}
.section-light .page-title,
.section-light.page-header .section-tag {
    color: var(--text-dark);
    text-shadow: none;
}
.section-light .page-header-logo,
.section-light .footer-logo-img,
body.page-light .footer-logo-img,
body.page-light .contact-logo {
    /* filter replaced with black filter to match user request on bright backgrounds */
    filter: brightness(0) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.05));
}
/* ==========================================================================
   NOT A HOTEL Design System Components
   ========================================================================== */

/* 1. Pill Button */
.nah-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0070F3;
    color: #FFFFFF !important;
    padding: 16px 40px;
    border-radius: 9999px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 112, 243, 0.4);
}
.nah-btn-primary:hover {
    background: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 112, 243, 0.6);
}

/* Service Grid (4 cards) */
.nah-service-grid {
    grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1024px) {
    .nah-service-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .nah-service-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2. Card UI */
.nah-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 40px 0;
}

@media (max-width: 1024px) {
    .nah-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .nah-card-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px 0;
    }
}
.nah-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: #1A181A; /* Slightly lighter than var(--bg-dark) for contrast */
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.6s var(--ease-luxury);
    border: 1px solid rgba(255,255,255,0.05);
}
.section-light .nah-card {
    background: #FFFFFF;
    box-shadow: 0 10px 40px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
}
.nah-card:hover {
    transform: translateY(-8px);
}
.nah-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.nah-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurnsSlow 30s ease-in-out infinite alternate;
}
.nah-card:nth-child(even) .nah-card-image img {
    animation: kenBurnsReverse 35s ease-in-out infinite alternate;
}
.nah-card:hover .nah-card-image img {
    /* overriding scale, letting the infinite animation play smoothly */
}
.nah-card-content {
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.nah-card-tag {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var(--text-white);
}
.nah-card-title {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 16px;
    color: var(--text-white);
}
.section-light .nah-card-title {
    color: var(--text-dark);
}
.nah-card-desc {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 32px;
}
.section-light .nah-card-desc {
    color: var(--text-dark-secondary);
}
.nah-card .nah-btn-text {
    margin-top: auto;
    align-self: center;
    font-size: clamp(0.95rem, 1.5vw, 1.15rem) !important;
}

/* 3. Hero Vision Text overlay */
.nah-vision-fullscreen {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 90px 24px;
}
.nah-vision-heading {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
}
.nah-vision-desc {
    font-size: clamp(1.1rem, 1.5vw, 1.25rem);
    line-height: 2.2;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 400;
}


.text-white {
    color: #FFFFFF !important;
}

/* ===== Vision Collage Layout ===== */
.vision-collage {
    position: relative;
    overflow: hidden;
    background: #F0EFED;
}
.vision-collage-bg {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    z-index: 0;
}
.vision-collage-item {
    overflow: hidden;
    opacity: 0.45;
}
.vision-collage-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 10s ease;
}
.vision-collage:hover .vision-collage-item img {
    transform: scale(1.05);
}
.vision-col-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}
.vision-col-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}
.vision-col-3 {
    grid-column: 4 / 6;
    grid-row: 1 / 3;
}
.vision-col-4 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
}
.vision-col-5 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
.vision-collage-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}
.vision-collage .nah-vision-heading {
    color: #111111;
    text-shadow: none;
}
.vision-collage .nah-vision-desc {
    color: #666666;
}

/* Collage gradient overlay for readability */
.vision-collage::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(240,239,237,0.85) 30%, rgba(240,239,237,0.5) 70%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 768px) {
    .vision-collage-bg {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .vision-col-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .vision-col-2 {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .vision-col-3 {
        grid-column: 3 / 4;
        grid-row: 1 / 3;
    }
    .vision-col-4 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .vision-col-5 {
        display: none;
    }
}

/* ===== Works Carousel Light Theme ===== */
.works-carousel-light {
    background: #FFFFFF !important;
    padding: 90px 0 75px;
}
.works-carousel-light .section-tag {
    color: #111111;
}
.works-carousel-light .section-title-lg {
    color: #111111;
}
.works-carousel-light .works-carousel-item {
    flex: 0 0 420px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.works-carousel-light .works-carousel-item:hover {
    box-shadow: 0 20px 48px rgba(0,0,0,0.15);
}
.works-carousel-light .nah-btn-primary {
    /* stays blue */
}
/* COMING SOON cards in light theme */
.works-carousel-light .works-carousel-item[style*="background"] {
    background: #F7F7F9 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

@media (max-width: 768px) {
    .works-carousel-light .works-carousel-item {
        flex: 0 0 320px;
    }
}

/* ===== 莠倶ｾ狗ｴｹ莉九き繝ｫ繝ｼ繧ｻ繝ｫ ===== */
.works-carousel {
    padding: 90px 0;
    background: var(--bg-warm);
    overflow: hidden;
}

.works-carousel .container {
    max-width: 1200px;
}

.works-carousel-track-wrap {
    position: relative;
    margin-top: 48px;
    overflow: hidden;
}

.works-carousel-track {
    display: flex;
    gap: 24px;
    width: max-content;
    cursor: grab;
    will-change: transform;
}

.works-carousel-track.dragging {
    cursor: grabbing;
}

.works-carousel-item {
    flex: 0 0 350px;
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.works-carousel-item:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
}

.works-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.works-carousel-item:hover img {
    transform: scale(1.08);
}

.works-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 20px 20px;
    background: linear-gradient(to top, rgba(18, 16, 14, 0.85), transparent);
}

.works-carousel-caption span {
    font-family: var(--font-en);
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.works-carousel-caption p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-top: 4px;
}

.works-carousel-link {
    text-align: center;
    margin-top: 48px;
}




/* Mono construction image filters */
#construction .nah-card-image img {
    object-fit: contain;
    padding: 24px;
    box-sizing: border-box;
    filter: grayscale(100%) contrast(3);
    mix-blend-mode: screen;
}


#navbar.menu-open .nav-links a {
    color: #FFFFFF !important;
}
#navbar.menu-open .nav-dropdown-menu a {
    color: rgba(255, 255, 255, 0.7) !important;
}
#navbar.menu-open .logo-text {
    color: #FFFFFF !important;
}
#navbar.menu-open .menu-toggle span {
    background: #FFFFFF !important;
}
#navbar.menu-open .logo-img {
    filter: brightness(0) invert(1) !important;
}


#navbar.menu-open {
    background: rgba(18, 16, 14, 0.98) !important;\n    backdrop-filter: none !important;\n    -webkit-backdrop-filter: none !important;
}


/* menu-open scrolled cleanup */
#navbar.menu-open.scrolled {
    border-bottom: none !important;
}
#navbar.menu-open .nav-dropdown-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
#navbar.menu-open .nav-dropdown-menu a:hover {
    color: #FFFFFF !important;
    background: transparent !important;
}
#navbar.menu-open .nav-links a::after {
    background: #FFFFFF !important;
}

/* ===== NOT A HOTEL Dynamic Camera Works ===== */
@keyframes kenBurnsHero {
    0% { transform: scale(1.0) translate(0, 0); }
    100% { transform: scale(1.06) translate(-2%, -1%); }
}

@keyframes kenBurnsSlow {
    0% { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.1) translate(-2%, 1%); }
}

@keyframes kenBurnsReverse {
    0% { transform: scale(1.1) translate(-2%, 1%); }
    100% { transform: scale(1.05) translate(0, 0); }
}

@keyframes kenBurnsPanX {
    0% { transform: scale(1.1) translateX(-3%); }
    100% { transform: scale(1.1) translateX(1%); }
}

@keyframes kenBurnsPanY {
    0% { transform: scale(1.1) translateY(-2%); }
    100% { transform: scale(1.1) translateY(2%); }
}

/* ===== NOT A HOTEL Slider ===== */
.nah-slider-controls {
    display: flex;
    gap: 12px;
}

.nah-slider-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.nah-slider-btn:hover {
    background: #FFFFFF;
    color: #000000;
}

.nah-slider-viewport {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}

.nah-slider-viewport::-webkit-scrollbar {
    display: none;
}

.nah-slider-viewport.is-dragging {
    scroll-behavior: auto;
    scroll-snap-type: none;
    cursor: grabbing;
}

.nah-slider-track {
    display: flex;
    gap: 2rem;
    padding-bottom: 2rem;
    width: max-content;
    cursor: grab;
    /* align cards with container while bleeding viewport to screen edge */
    padding-left: calc(max(40px, 50vw - 600px + 40px));
    padding-right: calc(max(40px, 50vw - 600px + 40px));
}

.nah-slider-viewport.is-dragging .nah-slider-track {
    cursor: grabbing;
}

.nah-slider-track .nah-card {
    min-width: 320px;
    max-width: 360px;
    flex: 0 0 auto;
    scroll-snap-align: start;
}

.nah-slider-track img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    user-select: none;
    pointer-events: none; /* disables image drag fully relying on parent div */
}

@media (max-width: 768px) {
    .nah-slider-track {
        padding-left: 32px;
        padding-right: 32px;
    }
    .nah-slider-track .nah-card {
        min-width: 280px;
        max-width: 300px;
    }
    .const-header .nah-slider-controls {
        position: static !important;
        display: flex;
        justify-content: center;
        margin-top: 24px;
        width: 100%;
    }
}

/* ===== NOT A HOTEL Style Text Button ===== */
.nah-btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0070F3;
    color: #FFFFFF !important;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.3s var(--ease-luxury);
    padding: 14px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.nah-btn-text:hover {
    background: #0056b3;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.section-dark .nah-btn-text {
    background: #0070F3;
    color: #FFFFFF !important;
    border: none;
}
.section-dark .nah-btn-text:hover {
    background: #0056b3;
    transform: translateY(-2px);
}

/* ===== レスポンシブ改行制御 ===== */
.sp-br { display: none !important; }
.pc-br { display: inline !important; }

/* ===== フレーズ単位の改行制御 ===== */
.phrase {
    display: inline-block;
}

@media (max-width: 768px) {
    .sp-br { display: inline !important; }
    .pc-br { display: none !important; }
}

/* ===== コンタクトフォーム中央寄せ・開閉UI追加 ===== */
.btn-contact-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 48px;
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-family: var(--font-ja);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 112, 243, 0.2);
    margin: 0 auto;
}
.btn-contact-toggle:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 112, 243, 0.4);
}

.contact-close-btn {
    position: absolute;
    top: 0px;
    right: 0;
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
}
@media (max-width: 768px) {
    .contact-close-btn {
        right: 10px;
    }
}
.contact-close-btn.is-active {
    opacity: 1;
    visibility: visible;
}
.contact-close-btn:hover {
    background: #F8F8F8;
    transform: rotate(90deg);
}
@media (max-width: 768px) {
    #contact-form-content {
        margin-left: -32px;
        margin-right: -32px;
        width: calc(100% + 64px) !important;
    }
    #contact-form-content iframe {
        max-width: 100% !important;
    }
}

/* ===== Artist Online Shop Section ===== */
.artist-shop-section {
    margin-top: 80px;
    padding-bottom: 80px;
    padding-top: 80px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.artist-shop-card {
    max-width: 640px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.4s var(--ease-luxury), box-shadow 0.4s var(--ease-luxury);
}

.artist-shop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
}

.artist-shop-card-inner {
    padding: 48px 40px;
    text-align: center;
}

.artist-shop-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.artist-shop-icon svg {
    opacity: 0.8;
}

.artist-shop-title {
    font-family: var(--font-en);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

.artist-shop-desc {
    color: var(--text-dark-secondary);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 28px;
}

/* ===== Page CTA Buttons ===== */
.page-cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-cta-outline {
    background: transparent !important;
    border: 2px solid #fff !important;
}

.btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff !important;
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
    .artist-shop-section {
        margin-top: 48px;
        padding-bottom: 48px;
        padding-top: 48px;
    }
    .artist-shop-card-inner {
        padding: 32px 24px;
    }
    .page-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}