/* =========================================
   1. Base Settings & Variables
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --bg-color: #FAF9F7;
    --text-color: #2b2b2b;
    --accent-color: #8C3A3A;
    --line-color: #E0E0E0;
    --footer-bg: #1a1a1a;
    --footer-text: #f0f0f0;
    --font-main: 'DM Sans', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
    --font-serif: 'Cormorant Garamond', serif;
    --font-size-base: clamp(15px, 2vw, 18px);
}

body.dark-mode {
    --bg-color: #121212;
    --text-color: #f5f5f5;
    /* Increased brightness for better contrast against #121212 */
    --line-color: #444444;
    /* Slightly lighter border color */
    --footer-bg: #0a0a0a;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: var(--font-size-base);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    /* Slower, sunset-like fade transition */
    transition: background-color 2.5s ease-in-out, color 2.5s ease-in-out, border-color 2.5s ease-in-out;
}

body.dark-mode .section-container,
body.dark-mode .diary-grid .diary-item,
body.dark-mode .blog-item {
    background-color: #1a1a1a;
    border-color: var(--line-color);
}

body.dark-mode .section-title::after {
    background-color: var(--text-color);
}

body.dark-mode .common-header,
body.dark-mode .site-header {
    background: rgba(18, 18, 18, 1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 2.5s ease-in-out, border-color 2.5s ease-in-out;
}

body.dark-mode .common-header.scrolled,
body.dark-mode .site-header.scrolled {
    background: rgba(18, 18, 18, 1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

body.dark-mode .brand-name,
body.dark-mode .site-header.scrolled .brand-name,
body.dark-mode .site-header.scrolled .site-nav a,
body.dark-mode .diary-card-title,
body.dark-mode .article-title,
body.dark-mode .blog-item h3 {
    color: var(--text-color);
}

body.dark-mode .site-header.scrolled .hamburger span {
    background: var(--text-color);
}

body.dark-mode .site-header.scrolled .icon-link svg {
    fill: var(--text-color);
}

body.dark-mode .view-more-action-btn,
body.dark-mode .view-all-btn,
body.dark-mode .diary-category {
    border-color: var(--text-color);
    color: var(--text-color);
    transition: all 0.3s ease;
    /* Keep hover fast, but base colours use variable */
}

body.dark-mode .view-more-action-btn:hover,
body.dark-mode .view-all-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

body.dark-mode .opening-overlay {
    background-color: var(--bg-color);
}

/* Worksページ用: スマホではスクロールを許可 */
body.works-page-body {
    overflow: hidden;
    background-color: #f4f4f4;
}

@media (max-width: 768px) {
    body.works-page-body {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        /* iOSでスムーズスクロール */
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

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

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* =========================================
   2. Opening Animation
   ========================================= */
.opening-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: openingSequence 4.5s ease-in-out 0s 1 forwards;
    pointer-events: none;
}

.opening-overlay.hidden {
    display: none;
}

.opening-title {
    color: #333;
    font-family: var(--font-main);
    font-weight: 700;
    letter-spacing: 4px;
    font-size: 1.8rem;
    opacity: 0;
    animation: textFadeInOut 4s ease-in-out 0s 1 forwards;
}

@keyframes openingSequence {

    0%,
    85% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes textFadeInOut {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    25%,
    75% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}


/* =========================================
   3. Header & Navigation
   ========================================= */
.site-header {
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 2147483647;
    /* Solid background for light mode */
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.brand-name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    color: #2b2b2b; /* Dark text for light mode header */
    text-transform: uppercase;
    transition: color 0.3s ease;
    z-index: 1002;
}

.site-nav {
    display: flex;
    align-items: center;
}

.site-nav ul {
    display: flex;
    gap: 40px;
    align-items: center;
}

.site-nav a {
    font-size: 1rem;
    font-weight: 700;
    color: #2b2b2b; /* Dark text for light mode header */
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 1;
    transition: color 0.3s ease, opacity 0.3s ease;
    display: flex;
    align-items: center;
}

.site-nav a:hover {
    opacity: 0.7;
}

.icon-link svg {
    width: 22px;
    height: 22px;
    fill: #2b2b2b; /* Dark icon for light mode header */
    transition: fill 0.3s ease;
}

/* Scrolled State */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 20px 40px;
}

.site-header.scrolled .brand-name {
    color: #2b2b2b;
}

.site-header.scrolled .site-nav a {
    color: #2b2b2b;
    text-shadow: none;
}

.site-header.scrolled .icon-link svg {
    fill: #2b2b2b;
}

/* Hamburger Button */
.hamburger {
    display: none;
    cursor: pointer;
    z-index: 1002;
    width: 30px;
    height: 24px;
    position: relative;
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #2b2b2b;
    border-radius: 2px;
    transition: .3s;
}

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

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

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

.site-header.scrolled .hamburger span {
    background: #2b2b2b;
    box-shadow: none;
}

.hamburger.active span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
    background: #2b2b2b;
    box-shadow: none;
}

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

.hamburger.active span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
    background: #2b2b2b;
    box-shadow: none;
}


/* =========================================
   4. Hero Section
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    /* Full screen layout - Mobile friendly */
    height: 100vh;
    /* Fallback */
    height: 100dvh;
    /* Dynamic Viewport Height */
    min-height: 400px;
    /* max-height removed for full screen */
    overflow: hidden;
    background-color: #111;
}

.hero-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    /* 画像の読み込み最適化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.slide.active {
    opacity: 1;
    z-index: 2;
}


/* =========================================
   5. Section Common & Grids
   ========================================= */
.section-container {
    padding: 120px 6%;
    max-width: 1600px;
    margin: 0 auto;
    scroll-margin-top: 100px;
}

.collection-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    border-bottom: 2px solid var(--line-color);
    padding-bottom: 20px;
    flex-wrap: wrap;
    gap: 20px;
}

.section-title {
    font-family: var(--font-main);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 2.5rem;
    margin: 0;
    color: var(--text-color);
}

/* Controls & Switch */
.header-controls {
    display: flex;
    align-items: center;
    gap: 30px;
}

.control-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 10px;
    color: #555;
    font-weight: 600;
}

.toggle-wrapper {
    display: flex;
    align-items: center;
}

.toggle-switch {
    position: relative;
    width: 56px;
    height: 28px;
    display: inline-block;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e5e5;
    border-radius: 14px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.toggle-switch input:checked~.toggle-track {
    background-color: #333333;
}

.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.toggle-switch input:checked~.toggle-knob {
    transform: translateX(28px);
    background-color: #1a1a1a;
}

.toggle-knob .icon-sun,
.toggle-knob .icon-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    transition: opacity 1.0s ease-out, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    display: block;
}

.toggle-knob .icon-sun {
    opacity: 1;
}

.toggle-knob .icon-moon {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-30deg) scale(0.8);
}

.toggle-switch input:checked~.toggle-knob .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(30deg) scale(0.8);
}

.toggle-switch input:checked~.toggle-knob .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0) scale(1);
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #999;
    border-radius: 30px;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #999;
    border-radius: 50%;
    transition: .4s;
}

input:checked+.slider:before {
    transform: translateX(24px);
    background-color: var(--accent-color);
}

input:checked+.slider {
    border-color: var(--accent-color);
}

/* Grids */
.day-night-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
}

.grid-drum {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
}

#section-1994 .grid-1994 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
}

.img-box,
.blog-thumb {
    position: relative;
    background: #E0E0E0;
    color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    letter-spacing: 1px;
    transition: all 0.5s ease;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease;
}

.day-night-grid .grid-item {
    aspect-ratio: 1 / 1;
    min-height: 0;
}

.day-night-grid .img-box,
.day-night-grid .day-night-box {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
}

.grid-drum .img-box {
    aspect-ratio: 3 / 2;
}

.grid-1994 .img-box {
    aspect-ratio: 16 / 9;
    font-size: 1.5rem;
}

.img-box.day-night-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.img-box.day-night-box.is-night {
    background: transparent;
}

.day-night-box .photo-day,
.day-night-box .photo-night {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 2.5s ease-in-out;
    display: block;
}

.day-night-box .photo-day {
    opacity: 1;
    z-index: 1;
}

.day-night-box .photo-night {
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.day-night-box.is-night .photo-day {
    opacity: 0;
    z-index: 1;
}

.day-night-box.is-night .photo-night {
    opacity: 1;
    z-index: 2;
}

.grid-item {
    position: relative;
}

.item-info {
    font-size: 0.95rem;
    font-weight: 500;
    color: #444;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* 1994 View More */
.works-wrapper {
    position: relative;
    width: 100%;
    max-height: 40vw;
    overflow: hidden;
    transition: max-height 0.8s ease;
}

.works-wrapper.is-expanded {
    max-height: 5000px;
}

.fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(to bottom, rgba(250, 249, 247, 0), rgba(250, 249, 247, 1));
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.5s, background 0.5s ease;
}

body.dark-mode .fade-overlay {
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0), rgba(18, 18, 18, 1));
}

.works-wrapper.is-expanded .fade-overlay {
    opacity: 0;
}

.more-btn-container {
    margin-top: -20px;
    position: relative;
    z-index: 3;
    text-align: center;
}

.view-more-action-btn {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #2b2b2b;
    color: #2b2b2b;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    padding: 0 0 5px 0;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.view-more-action-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.archive-note {
    font-size: 0.85rem;
    color: #999;
    margin: -20px 0 30px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-align: left;
}


/* =========================================
   6. DailyDiary List & Article
   ========================================= */
.blog-list {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
}

.blog-item {
    display: flex;
    align-items: center;
    gap: 30px;
    padding: 25px 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.blog-item:hover {
    background-color: #fcfcfc;
}

.blog-thumb {
    width: 150px;
    aspect-ratio: 3 / 2;
    flex-shrink: 0;
    border-radius: 4px;
    font-size: 0.9rem;
}

.blog-item:hover .blog-thumb {
    transform: scale(1.05);
}

.blog-info {
    flex: 1;
}

.blog-date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.blog-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    font-family: var(--font-main);
    color: var(--text-color);
    line-height: 1.4;
}

.btn-container {
    margin-top: 60px;
    text-align: center;
}

.view-all-btn {
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--text-color);
    padding-bottom: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.view-all-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

/* Diary Page */
.diary-header {
    padding-top: 150px;
    text-align: center;
    margin-bottom: 80px;
}

.diary-title-main {
    font-size: 3rem;
    font-family: var(--font-serif);
    letter-spacing: 2px;
    font-weight: 400;
    margin-bottom: 20px;
}

.diary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto 100px;
    padding: 0 6%;
}

.diary-card {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.diary-card:hover {
    transform: translateY(-5px);
    opacity: 0.9;
}

.diary-card-thumb {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    background-color: #eee;
    border-radius: 4px;
    margin-bottom: 15px;
}

.diary-card-date {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
    font-family: var(--font-main);
}

.diary-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    font-family: var(--font-serif);
}

.article-container {
    max-width: 800px;
    margin: 150px auto 100px;
    padding: 0 20px;
}

.article-header {
    text-align: center;
    margin-bottom: 80px;
}

.article-date {
    display: block;
    color: #888;
    margin-bottom: 10px;
    font-family: var(--font-main);
}

.article-title {
    font-size: 2rem;
    font-family: var(--font-serif);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.005em;
    margin: 0;
}

.diary-block {
    margin-bottom: 60px;
}

.block-text {
    font-family: 'Cormorant Garamond', 'Yu Mincho', serif;
    font-size: 1rem;
    line-height: 2;
    color: #333;
    font-feature-settings: "palt";
    text-align: justify;
}

.block-text p {
    margin-bottom: 1.5em;
}

.block-image-full img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.caption {
    font-size: 0.8rem;
    color: #888;
    margin-top: 10px;
    text-align: center;
}

.block-split {
    display: flex;
    align-items: center;
    gap: 40px;
}

.block-split img {
    width: 50%;
    height: auto;
    object-fit: cover;
    border-radius: 2px;
}

.split-text {
    width: 50%;
    font-size: 0.95rem;
    line-height: 1.9;
    font-family: 'Cormorant Garamond', serif;
}

.block-split.reverse {
    flex-direction: row-reverse;
}

.smart-gallery {
    display: grid;
    gap: 10px;
    width: 100%;
}

.smart-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* =========================================
   7. Works List Mode (Added)
   ========================================= */
.gallery-list {
    padding-top: 100px;
    /* Header space */
    padding-bottom: 100px;
}

.list-item {
    position: relative;
    pointer-events: auto;
    display: block;
    margin-bottom: 10px;
    z-index: 2;
}

.list-item-title {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
    pointer-events: auto;
}

.list-item-title-text {
    font-family: var(--font-serif);
    font-size: 3rem;
    /* Adjust based on original JS size or preference */
    color: #333;
    transition: color 0.3s ease;
    font-feature-settings: "palt";
}

.list-item:hover .list-item-title-text {
    /* Slightly lighter than requested to ensure visibility against dark backgrounds if any, but request was "closer to white grey" */
    color: #e0e0e0;
}

/* Background for List Mode */
#gallery-list-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 0;
    /* Behind content */
    pointer-events: none;
}

#gallery-list-background.active {
    opacity: 1;
}

/* Ensure locked items are handled correctly */
.list-item.locked .list-item-title-text {
    color: #999;
}

.list-item.locked:hover .list-item-title-text {
    color: #bbb;
}

.smart-gallery[data-count="2"] {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 16/9;
}

.smart-gallery[data-count="3"] {
    grid-template-columns: 1fr 1fr 1fr;
    aspect-ratio: 5/2;
}

.smart-gallery[data-count="4"] {
    grid-template-columns: 1fr 1fr;
    aspect-ratio: 1/1;
}

.smart-gallery[data-count="5"] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 16/9;
}

.smart-gallery[data-count="5"] img:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}


/* =========================================
   7. Footer
   ========================================= */
.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 100px 6% 50px;
    margin-top: 150px;
}

.footer-content {
    max-width: 800px;
    margin: 0 auto 80px;
}

.footer-links {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.footer-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.4rem;
    font-weight: 300;
    transition: padding-left 0.3s;
    color: #f0f0f0;
}

.footer-link-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide About link on Index page and fix border */
body.index-page #footer-about {
    display: none;
}
body.index-page #footer-about + .footer-link-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-link-item:hover {
    padding-left: 20px;
    background-color: rgba(255, 255, 255, 0.05);
}

.link-arrow {
    font-size: 1rem;
    opacity: 0.6;
    transition: transform 0.3s;
}

.footer-link-item:hover .link-arrow {
    transform: translate(5px, -5px);
    opacity: 1;
}

.copyright {
    text-align: center;
    font-size: 0.85rem;
    color: #9a9a9a;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
}


/* =========================================
   8. About Page
   ========================================= */
.about-container {
    padding: 180px 6% 100px;
    max-width: 800px;
    margin: 0 auto;
    display: block;
}

.about-video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #E0E0E0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 60px;
    border-radius: 4px;
    overflow: hidden;
}

.about-video-placeholder video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-header {
    margin-bottom: 50px;
}

.about-name-jp {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 5px;
    letter-spacing: 2px;
}

.bio-block {
    margin-bottom: 60px;
}

.bio-text {
    font-size: 0.95rem;
    line-height: 2;
    color: #444;
    text-align: left;
    font-feature-settings: "palt";
    font-weight: 500;
    font-family: var(--font-main);
}

.en-text {
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

.bio-list {
    display: grid;
    grid-template-columns: 3.5em 1fr;
    gap: 0 1.5em;
    margin-bottom: 2em;
    font-family: var(--font-main);
    color: #444;
    font-size: 0.95rem;
    font-weight: 500;
}

.bio-dt {
    font-weight: 500;
    font-feature-settings: "palt";
    text-align: right;
}

.bio-dd {
    margin: 0;
    margin-bottom: 1em;
    font-weight: 500;
    line-height: 2;
    text-align: left;
    font-feature-settings: "palt";
}

.about-footer-info {
    border-top: 2px solid var(--text-color);
    padding-top: 50px;
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
    margin-top: 100px;
}

.about-footer-info h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 15px;
    font-weight: 700;
    font-family: var(--font-main);
}

.about-footer-info p {
    margin: 0;
    font-size: 1rem;
}

.about-footer-info a {
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.3s;
}

.about-footer-info a:hover {
    color: var(--accent-color);
}

/* --- Footer Sections (SUPPORT / CONTACT) --- */
.footer-sections {
    display: flex;
    gap: 60px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.footer-heading {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: #999;
    margin-bottom: 20px;
    font-weight: normal;
    font-family: var(--font-main);
    text-transform: uppercase;
}

.support-icons-only,
.contact-icons-only {
    display: flex;
    gap: 20px;
    align-items: center;
}

.support-icons-only a,
.contact-icons-only a {
    text-decoration: none;
    color: inherit;
}

.contact-icon-trigger {
    display: inline-flex;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.unified-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    color: var(--text-color);
    transition: color 0.3s ease, transform 0.3s ease;
    display: block;
}

.support-icons-only a:hover .unified-icon,
.contact-icons-only a:hover .unified-icon,
.contact-icon-trigger:hover .unified-icon,
.game-icon-trigger:hover .unified-icon {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.game-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.game-icon-trigger {
    display: inline-flex;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.about-contact-section {
    margin-top: 120px;
    padding-top: 80px;
    border-top: 1px solid #eee;
}

.contact-heading {
    font-size: 1.2rem;
    font-family: var(--font-main);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 30px;
    text-align: center;
}

.contact-message-text {
    text-align: center;
    font-size: 0.95rem;
    line-height: 2;
    margin-bottom: 50px;
    font-weight: 500;
    color: #444;
    font-family: var(--font-main);
}

.contact-message-text .en {
    font-size: 0.85rem;
    color: #888;
    font-weight: 400;
    display: block;
    margin-top: 5px;
    font-family: var(--font-main);
}

.contact-form-box {
    max-width: 700px;
    margin: 0 auto;
}

.input-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.contact-form-box label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 8px;
    font-weight: 600;
    font-family: var(--font-main);
}

.contact-form-box input,
.contact-form-box textarea {
    border: none;
    border-bottom: 1px solid #ddd;
    background: transparent;
    padding: 10px 0;
    font-size: 1rem;
    color: var(--text-color);
    transition: border-color 0.3s;
    border-radius: 0;
    font-family: var(--font-main);
}

.contact-form-box input:focus,
.contact-form-box textarea:focus {
    outline: none;
    border-bottom-color: var(--accent-color);
}

.form-submit-area {
    text-align: center;
    margin-top: 50px;
}

.submit-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--text-color);
    padding-bottom: 5px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-main);
    text-transform: uppercase;
    color: var(--text-color);
}

.submit-btn:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.form-status-message {
    margin-top: 30px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: var(--font-main);
    min-height: 1.5em;
    transition: opacity 0.3s ease;
}

.form-status-message.success {
    color: var(--text-color);
}

.form-status-message.error {
    color: #c0392b;
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mail-icon-only {
    display: inline-block;
    color: var(--text-color);
    transition: all 0.3s ease;
    margin-top: -5px;
}

.mail-icon-only svg {
    width: 32px;
    height: 32px;
}

.mail-icon-only:hover {
    color: var(--accent-color);
    transform: scale(1.1);
}

.contact-area-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.secret-game-trigger {
    display: inline-block;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-color);
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.3s ease, opacity 0.3s ease;
    font-family: var(--font-main);
    user-select: none;
    text-transform: uppercase;
}

.secret-game-trigger:hover {
    color: var(--accent-color);
    opacity: 1;
}

/* =========================================
   9. Works Detail Overlay & Common UI
   ========================================= */
#work-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2000;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    padding: 0;
}

#work-detail-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 閉じるボタン */
#close-detail {
    position: fixed;
    top: 110px;
    right: 40px;
    z-index: 2001;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid #333;
    color: #333;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px 24px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

#close-detail:hover {
    background: #333;
    color: #fff;
    transform: translateY(-2px);
}

.detail-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 120px 6% 100px;
    position: relative;
}

.detail-text-area {
    text-align: center;
    margin-bottom: 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#detail-title {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    margin-bottom: 10px;
}

#detail-date {
    font-family: var(--font-main);
    color: #888;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

#detail-meta {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 30px;
    font-family: var(--font-main);
}

#detail-desc {
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.8;
    color: #333;
}

/* Masonry Layout */
/* プロのギャラリー風レイアウト - 余白なし、きれいな並び */
.album-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* ギャップを0にして余白を完全に排除 */
    width: 100%;
    overflow: hidden;
    /* はみ出しを防ぐ */
}

.album-item {
    position: relative;
    width: 100%;
    /* 3:2アスペクト比を強制して統一 */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    opacity: 0;
    animation: fadeUp 0.6s ease forwards;
    /* プロのギャラリー風：ボーダーで区切り */
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* 最後の列の右側ボーダーを削除 */
.album-item:nth-child(3n) {
    border-right: none;
}

.album-item img {
    width: 100%;
    height: 100%;
    display: block;
    /* 画像をアスペクト比を維持してカバー表示 */
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    /* プロのギャラリー風：角丸なし */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* 画像の読み込み最適化 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.album-item img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Password Modal */
#password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}

#password-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-box {
    background: #fff;
    padding: 50px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.modal-msg {
    font-family: var(--font-main);
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

#unlock-pass {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1.2rem;
}

#unlock-btn {
    width: 100%;
    padding: 12px;
    background: #333;
    color: #fff;
    border: none;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
}

#close-modal {
    margin-top: 15px;
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    color: #888;
}

.error-msg {
    color: #c0392b;
    font-size: 0.8rem;
    margin-top: 10px;
    min-height: 1.2em;
}


/* =========================================
   10. Film Library
   ========================================= */
.film-page-container {
    padding-top: 150px;
    min-height: 100vh;
    background-color: var(--bg-color);
}

.film-header {
    text-align: center;
    margin-bottom: 80px;
}

.film-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--text-color);
}

.film-header p {
    color: #888;
    font-family: 'DM Sans', sans-serif;
}

.film-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    align-items: end;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 6% 100px;
}

.film-item-container {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 3 / 2;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.film-box-face {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    transform-origin: bottom center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.canister-clip-wrapper {
    position: absolute;
    top: 4px;
    /* inset slightly from the top to hide perfectly behind the box opening */
    bottom: 3px;
    left: 4px;
    right: 4px;
    pointer-events: none;
    z-index: 1;
    /* Clip everywhere EXCEPT extending infinitely UP (-500% top padding allowed). Also clip bottom 20% to prevent transparency bleed */
    clip-path: inset(-500% 0px 20% 0px round 0px 0px 4px 4px);
}

.canister-clip-wrapper.is-animating {
    /* Allow it to pop completely out of bounds and OVER the box face, but still clip bottom 20% */
    clip-path: inset(-500% -500% 20% -500%) !important;
}

.film-canister-element {
    position: absolute;
    top: 5px;
    /* Rest just below the lip of the box opening */
    left: 50%;
    transform: translate(-50%, 0) scale(1) rotate(0deg);
    width: 90px;
    z-index: 1;
    /* Hides behind the film-box-face z: 2 */
    opacity: 1;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.film-item-container:hover .film-canister-element {
    /* Peek OUT slightly from the TOP of the box upwards */
    transform: translate(-50%, -45px) scale(1) rotate(0deg);
}

a.film-item-container {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

a.film-item-container:hover {
    transform: translateY(-5px);
}

a.film-item-container:hover .film-canister-element {
    transform: translate(-50%, -45px) scale(1) rotate(0deg) !important;
}

.film-hover-info {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: transparent;
    color: var(--text-color, #333);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0 0 0;
    z-index: 3;
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    pointer-events: none;
    box-sizing: border-box;
    text-align: center;
}

.film-brand {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.5;
    font-family: var(--font-main);
}

.film-name-text {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: var(--font-main);
    opacity: 0.9;
}

.film-item-container:hover .film-hover-info,
a.film-item-container:hover .film-hover-info {
    opacity: 1;
    transform: translateY(0);
}

#index-film-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Vertical Film Strip (negatives) */
.film-strip-container {
    max-width: 720px;
    margin: 0 auto 80px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.film-strip-container:empty {
    min-height: 0;
}

.film-frame {
    display: flex;
    flex-direction: row;
    width: 100%;
    max-width: 560px;
    background-color: #0a0a0b;
    margin: 0 auto 0;
    position: relative;
    border-top: 1px solid #121214;
    border-bottom: 1px solid #121214;
    overflow: hidden;
}

.film-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-radial-gradient(circle at 0 0,
            rgba(255, 255, 255, 0.08) 0,
            transparent 1px);
    background-size: 4px 4px;
    opacity: 0.85;
}

.film-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(90deg, transparent 12%, rgba(255, 255, 255, 0.03) 12.2%, transparent 12.4%),
        linear-gradient(90deg, transparent 48%, rgba(255, 255, 255, 0.02) 48.1%, transparent 48.3%),
        linear-gradient(90deg, transparent 75%, rgba(255, 255, 255, 0.025) 75.2%, transparent 75.5%);
    mix-blend-mode: overlay;
}

.film-frame:first-child {
    border-top: none;
}

.film-edge {
    display: flex;
    flex-direction: row;
    width: 64px;
    flex-shrink: 0;
    min-height: 80px;
    background-color: #0a0a0b;
}

.film-edge.right-edge {
    flex-direction: row-reverse;
}

.perforation-track {
    width: 20px;
    height: 100%;
    min-height: 100%;
    flex-shrink: 0;
    background-color: #f4f4f4;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Crect x='2' y='6' width='16' height='11' rx='2' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'%3E%3Crect x='2' y='6' width='16' height='11' rx='2' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 24px;
    -webkit-mask-size: 100% 24px;
    mask-repeat: repeat-y;
    -webkit-mask-repeat: repeat-y;
}

.text-track {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    writing-mode: horizontal-tb;
    transform-origin: center center;
    color: #cca458;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: visible;
}

.left-edge .info-track {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.dx-barcode-strip {
    width: 14px;
    height: 48px;
    flex-shrink: 0;
    background-color: rgba(212, 175, 55, 0.15);
    background-image:
        repeating-linear-gradient(0deg,
            #d4af37 0px,
            #d4af37 1px,
            transparent 1px,
            transparent 3px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 5px,
            #d4af37 5px,
            #d4af37 6px,
            transparent 6px,
            transparent 9px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 11px,
            rgba(212, 175, 55, 0.9) 11px,
            rgba(212, 175, 55, 0.9) 14px,
            transparent 14px,
            transparent 18px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 7px,
            #b89840 7px,
            #b89840 8px,
            transparent 8px,
            transparent 12px);
    background-size: 100% 6px, 100% 14px, 100% 24px, 100% 18px;
    background-position: 0 0, 0 1px, 0 2px, 0 0;
    filter: blur(0.35px);
}

.frame-data {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #d4af37;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    white-space: nowrap;
    text-shadow: 0 0 1px rgba(212, 175, 55, 0.5);
}

.left-edge .text-track {
    transform: rotate(-90deg);
}

.right-edge .text-track {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: none;
}

.film-edge.left-edge .text-track {
    gap: 4px;
}

.text-track .frame-number,
.text-track .film-name {
    color: #cca458;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-shadow: 0 0 1px rgba(204, 164, 88, 0.5);
    filter: blur(0.25px);
}

.text-track .arrow {
    color: #cca458;
    font-size: 8px;
    text-shadow: 0 0 1px rgba(204, 164, 88, 0.5);
    filter: blur(0.25px);
}

.film-photo {
    flex: 1;
    min-width: 0;
    position: relative;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a0a0b;
    border-top: 1px solid #0e0e0f;
    border-bottom: 1px solid #0e0e0f;
}

.film-photo img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 72vh;
    object-fit: contain;
    cursor: pointer;
}

.film-box-face.is-image-missing,
.film-canister-element.is-image-missing,
.film-photo img.is-image-missing,
#film-viewer.view-mode-grid .film-strip-photos img.is-image-missing {
    background-color: #ececec;
}

/* Film Viewer */
.film-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Hide background initially, make transparent for seamless jump */
    background-color: transparent;
    z-index: 9999;
    display: flex;
    visibility: hidden;
    /* Opacity starts at 1, we control inner element fading via JS */
    opacity: 1;
}

.film-viewer.active {
    visibility: visible;
}

/* Background overlay specifically for the viewer, to fade in behind the flying elements */
.film-viewer-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    opacity: 0;
    z-index: 0;
}

.film-viewer-content {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* content hidden while elements fly */
}

.canister-dock-container {
    width: 300px;
    height: 100%;
    /* remove static grey background */
    background-color: transparent;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    /* subtle border */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

.active-canister-dock {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.active-canister-dock img {
    width: 200px !important;
    height: auto !important;
    position: static !important;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    /* Box is shown upright now instead of rotated */
    transform: translate(0, 0) scale(1) rotate(0deg) !important;
}

.close-btn {
    position: absolute;
    bottom: 40px;
    background: transparent;
    border: 1px solid #333;
    color: #333;
    padding: 12px 30px;
    cursor: pointer;
    transition: all 0.3s;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.close-btn:hover {
    background: #333;
    color: #fff;
    border-color: #333;
}

.film-strip-wrapper {
    flex: 1;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    /* match parent overlay */
    cursor: grab;
}

.film-strip-wrapper:active {
    cursor: grabbing;
}

.film-strip-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 40px 0;
    height: auto;
    transform: translateY(0);
    position: relative;
}

.film-patrone-container {
    width: 100%;
    /* Extend width so the canister illustration scales up slightly wider than the track */
    max-width: 420px;
    margin: 0 auto;
    /* Overlap film tightly into the slot */
    margin-bottom: -150px;
    position: relative;
    z-index: 50;
    display: flex;
    justify-content: center;
    align-items: center;
    /* center the rotated canister */
    min-height: 250px;
    /* space for rotated canister */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
}

.film-patrone-img {
    width: 100%;
    /* Limit the height so it doesn't get overly tall and covers the film */
    max-height: 280px;
    object-fit: contain;
    display: block;
}

.film-canister-element.is-in-strip {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    /* Allow it to scale up with the container to match the film track width */
    width: 100% !important;
    max-width: 420px !important;
    transform: rotate(-90deg) !important;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
    margin: 0 auto;
    z-index: 100;
}

.film-strip-track .film-frame:first-of-type {
    margin-top: -50px;
    position: relative;
    z-index: 10;
}

.film-strip-track .film-frame {
    flex-shrink: 0;
}

.film-leader-bottom {
    display: flex;
    height: 300px;
    background-color: transparent !important;
    border: none !important;
    margin-bottom: 60px;
    margin-top: 0;
    flex-shrink: 0;
}

.film-leader-bottom:hover {
    transform: none !important;
}

.film-leader-bottom .film-edge.left-edge,
.film-leader-bottom .left-edge {
    background-color: #080808 !important;
    height: 100%;
    border: none;
}

.film-leader-bottom .perforation-track {
    background-color: #f4f4f4 !important;
}

.leader-body-cut {
    flex: 1;
    background-color: #080808;
    position: relative;
    min-width: 0;
    clip-path: url(#film-leader-curve);
    -webkit-clip-path: url(#film-leader-curve);
}

.strip-frame {
    height: 100%;
    aspect-ratio: 3 / 2;
    padding: 45px 20px;
    background-color: #000;
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

.strip-frame.vertical {
    aspect-ratio: 2 / 3;
}

.strip-frame::before,
.strip-frame::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 8px, #fff 8px, #fff 16px, transparent 16px, transparent 24px);
    opacity: 0.7;
}

.strip-frame::before {
    top: 12px;
}

.strip-frame::after {
    bottom: 12px;
}

.strip-photo {
    height: 100%;
    width: auto;
    object-fit: contain;
    border: 2px solid #000;
    filter: contrast(1.1);
}

.view-mode-toggle {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 1002;
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 6px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.toggle-btn.active {
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#film-viewer.view-mode-grid .film-strip-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
    height: 100%;
    display: flex;
}

#film-viewer.view-mode-grid #film-strip-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: min(1200px, calc(100vw - 100px));
    height: auto !important;
    transform: none !important;
    margin: 0 auto;
    padding: 40px 16px;
    overflow-x: hidden;
}

#film-viewer.view-mode-grid .film-strip-row {
    display: flex;
    flex-direction: column;
    background-color: #0a0a0b;
    padding: 2px 0;
    box-shadow: 8px 16px 32px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

#film-viewer.view-mode-grid .film-strip-row:nth-child(even) {
    transform: rotate(1.5deg) translateX(10px);
}

#film-viewer.view-mode-grid .film-strip-row:nth-child(odd) {
    transform: rotate(-1deg) translateX(-15px);
}

#film-viewer.view-mode-grid .film-strip-row:nth-child(3n) {
    transform: rotate(2deg) translateX(5px);
}

#film-viewer.view-mode-grid .film-strip-row:hover {
    transform: scale(1.02) rotate(0deg) !important;
    z-index: 10;
}

#film-viewer.view-mode-grid .film-strip-photos {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    min-width: 0;
}

#film-viewer.view-mode-grid .film-strip-photos img {
    flex: 0 0 auto;
    width: auto;
    height: 140px;
    max-width: calc((100% - 16px) / 5);
    display: block;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

#film-viewer.view-mode-grid .horizontal-edge {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 32px;
    background-color: #0a0a0b;
}

#film-viewer.view-mode-grid .horizontal-edge.top-edge,
#film-viewer.view-mode-grid .horizontal-edge.bottom-edge {
    flex-direction: column;
}

#film-viewer.view-mode-grid .horizontal-edge .perforation-horizontal {
    height: 16px;
    width: 100%;
    flex: 0 0 16px;
    background-color: #f4f4f4;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='6' y='2' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Crect x='6' y='2' width='12' height='12' rx='2' fill='black'/%3E%3C/svg%3E");
    mask-size: 24px 100%;
    -webkit-mask-size: 24px 100%;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
}

#film-viewer.view-mode-grid .horizontal-edge .info-horizontal {
    height: 16px;
    min-height: 16px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    color: #d4af37;
    font-family: 'Courier New', Courier, monospace;
    font-size: 11px;
    letter-spacing: 2px;
}

#film-viewer.view-mode-grid .strip-frame,
#film-viewer.view-mode-grid .film-frame {
    display: none;
}

/* =========================================
   Image Modal (Lightbox) & Swipe
   ========================================= */
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: grab;
    /* スワイプできることを示唆 */
    touch-action: pan-y;
    /* 縦スクロールは許可、横はJSで制御 */
}

.image-modal.active {
    opacity: 1;
    visibility: visible;
}

.image-modal img {
    max-width: 95%;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    transition: transform 0.3s ease, opacity 0.2s ease;
    border: 1px solid #333;
    user-select: none;
    /* 画像選択を防ぐ */
    pointer-events: none;
    /* 画像自体へのタッチイベントを親に透過させる */
}

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

/* モーダル内のローディング表示 */
.modal-loader {
    position: absolute;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.9rem;
    letter-spacing: 2px;
}

.gear-section {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.gear-intro {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 30px;
    font-family: 'Inter', sans-serif;
    font-style: italic;
}

.gear-list {
    list-style: none;
    border-top: 1px solid #eee;
}

.gear-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.gear-item:hover {
    background-color: #fafafa;
    padding-left: 10px;
}

.gear-name {
    font-weight: 500;
}

.gear-category {
    font-size: 0.8rem;
    color: #999;
}


/* =========================================
   12. Clap Button
   ========================================= */
.clap-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 80px 0 40px;
    position: relative;
    height: 120px;
}

.clap-btn {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #888;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    outline: none;
    user-select: none;
    z-index: 10;
}

.clap-btn:active {
    transform: scale(0.9);
    background-color: #fafafa;
}

.clap-btn.disabled {
    cursor: default;
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: #fff;
}

.clap-icon {
    width: 28px;
    height: 28px;
    margin-bottom: 2px;
    transition: stroke 0.3s;
}

.clap-count {
    font-size: 0.8rem;
    font-weight: 700;
    font-family: var(--font-main);
}

.clap-bubble {
    position: absolute;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--accent-color);
    pointer-events: none;
    opacity: 0;
    animation: floatUp 0.8s ease-out forwards;
    z-index: 5;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) scale(1.5);
        opacity: 0;
    }
}

.clap-thanks {
    margin-top: 15px;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--accent-color);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.clap-thanks.visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   14. Responsive Settings (Tablet & Mobile)
   ========================================= */
@media (max-width: 1024px) {
    .site-header {
        padding: 20px;
    }

    .site-header.scrolled {
        padding: 15px 20px;
    }

    .brand-name {
        font-size: 1.3rem;
    }

    .site-header .hamburger,
    .hamburger {
        display: block !important;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 1002;
        visibility: visible;
        opacity: 1;
    }

    .site-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        justify-content: center;
        transition: 0.4s;
        z-index: 1001;
    }

    .site-nav.active {
        right: 0;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 30px;
    }

    .site-nav a {
        color: #2b2b2b;
        font-size: 0.9rem;
        letter-spacing: 2px;
        text-shadow: none;
    }

    .icon-link svg {
        fill: #2b2b2b;
        width: 32px;
        height: 32px;
    }

    .section-container {
        padding: 80px 20px;
    }

    .section-title {
        font-size: 2rem;
    }

    .day-night-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .grid-drum {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .grid-drum .img-box {
        aspect-ratio: 16 / 9;
    }

    #section-1994 .grid-1994 {
        gap: 4px;
    }

    /* タブレットでも左に写真、右にタイトル・文章のレイアウトを維持 */
    .blog-item {
        flex-direction: row;
        /* 横並びを維持 */
        align-items: center;
        gap: 20px;
        /* ギャップを少し小さく */
        padding: 20px 0;
        /* パディングを少し小さく */
    }

    .blog-thumb {
        width: 120px;
        /* タブレット用の適切な幅 */
        flex-shrink: 0;
        /* 縮小を防ぐ */
        aspect-ratio: 3 / 2;
    }

    .blog-title {
        font-size: 1.1rem;
        line-height: 1.4;
    }

    .footer-link-item {
        font-size: 1.1rem;
        padding: 20px 0;
    }

    .site-footer {
        padding: 60px 20px 30px;
    }

    /* タブレットでも横長3:2アスペクト比を維持 */
    .hero-section {
        aspect-ratio: 3 / 2;
        min-height: 300px;
        max-height: 60vh;
    }

    .about-container {
        padding-top: 120px;
    }

    .about-footer-info {
        flex-direction: column;
        gap: 40px;
    }

    .social-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        width: 100%;
        padding: 0;
        margin-top: 20px;
    }

    .sns-link {
        width: 40px;
        height: 40px;
        font-size: 0;
        padding: 0;
        flex: 0 0 auto;
    }

    .sns-link svg {
        width: 18px;
        height: 18px;
    }

    .current-band {
        margin-bottom: 180px;
    }

    .input-row {
        flex-direction: column;
        gap: 30px;
    }

    .about-contact-section {
        margin-top: 80px;
        padding-top: 60px;
    }

    /* =========================================
       Unified Solid Header Block (Mobile Works Page) - NUCLEAR FIX
       ========================================= */

    /* 1. Force Header to be Solid White + Dark Text */
    body.works-page-body .site-header {
        background-color: #ffffff !important;
        /* Explicit Color */
        background-image: none !important;
        /* Remove any gradients */
        backdrop-filter: none !important;
        /* Remove blur */
        box-shadow: none !important;
        border-bottom: none !important;
        height: 60px !important;
        padding: 0 20px !important;
        display: flex;
        align-items: center;
        z-index: 2147483647 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 1 !important;
    }

    body.works-page-body .brand-name {
        color: #2b2b2b !important;
        font-size: 1.2rem !important;
    }

    body.works-page-body .site-nav a {
        color: #2b2b2b !important;
    }

    body.works-page-body .hamburger {
        display: block;
    }

    body.works-page-body .hamburger span {
        background: #2b2b2b !important;
    }

    /* 2. View Switcher Fixed Below Header - SOLID WHITE */
    .view-switcher {
        position: fixed !important;
        top: 60px !important;
        left: 0;
        width: 100%;
        max-width: 100%;
        padding: 0 20px;
        height: 44px;
        display: flex;
        align-items: center;
        gap: 15px;

        background-color: #ffffff !important;
        /* Explicit Color */
        background-image: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
        /* Ensure NO transparency */

        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        /* Subtle shadow only at bottom */

        pointer-events: auto;
        flex-wrap: nowrap;
        overflow-x: auto;
        z-index: 2147483646 !important;
    }

    /* Tabs Styling on White Background */
    .view-tab {
        font-size: 11px !important;
        color: #999 !important;
        padding: 4px 0;
        opacity: 1 !important;
        flex: 0 0 auto;
        white-space: nowrap;
        letter-spacing: 0.05em;
        border-bottom: 2px solid transparent;
    }

    .view-tab.active {
        color: #2b2b2b !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        border-bottom: 2px solid #2b2b2b !important;
    }

    /* Hide scrollbar for switcher */
    .view-switcher::-webkit-scrollbar {
        display: none;
    }

    /* 3. Adjust Content Padding */
    #gallery-grid,
    #gallery-list,
    #gallery-album {
        /* Header(60) + Switcher(44) + Margin(20) */
        padding-top: 124px !important;
        margin-top: 0 !important;
    }

    /* 4. スマホ Album: カバーフロー・カードスワイプ用のスライドサイズ（複数枚見えるように） */
    body.album-mode .works-album-swiper {
        perspective: 1000px !important;
        overflow: visible !important;
    }

    body.album-mode .works-album-swiper .swiper-slide {
        width: 72vw !important;
        max-width: 72vw !important;
        height: 68dvh !important;
        max-height: 68dvh !important;
    }
}

/* Adjust padding to account for the Fixed Switcher */
#gallery-grid,
#gallery-list,
#gallery-album {
    /* Header(60) + Switcher(40-50) + Margin */
    padding-top: 130px !important;
    margin-top: 0 !important;
}

.view-tab {
    font-size: 0.65rem;
    /* Even smaller */
    padding: 2px 0;
    opacity: 0.5;
    flex: 0 0 auto;
    /* Don't stretch */
    white-space: nowrap;
    /* Prevent text wrap inside button */
}

.view-tab.active {
    opacity: 1;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* タブレットでも行優先表示（上から下）のグリッドレイアウト - 余白なし */
.album-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* ギャップを0にして余白を完全に排除 */
}

.album-item {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    /* タブレットでも3:2アスペクト比を維持 */
    aspect-ratio: 3 / 2;
}

/* タブレット：3列なので、3の倍数の右側ボーダーを削除 */
.album-item:nth-child(3n) {
    border-right: none;
}

.album-item img {
    object-fit: cover;
    object-position: center center;
}


@media (max-width: 768px) {
    #index-film-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 15px !important;
    }

    .film-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 15px;
        padding: 0 4%;
    }

    .film-hover-info {
        padding: 8px 0 0 0;
        gap: 5px;
    }

    .film-brand {
        font-size: 0.65rem;
    }

    .film-name-text {
        font-size: 0.8rem;
    }

    .film-viewer,
    .film-viewer-content {
        flex-direction: column;
    }

    .canister-dock-container {
        width: 100%;
        height: 180px;
        border-right: none;
        border-bottom: 1px solid #ddd;
        flex-direction: row;
        justify-content: space-between;
        padding: 0 20px;
        overflow: hidden;
    }

    .active-canister-dock img {
        width: 80px !important;
        height: auto !important;
        transform: rotate(90deg) !important;
        margin-left: 10px;
    }

    .close-btn {
        position: static;
        bottom: auto;
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    .film-strip-wrapper {
        width: 100%;
        height: auto;
        flex: 1;
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
        padding-top: 20px;
    }

    .film-strip-track {
        flex-direction: column;
        width: 100%;
        height: auto;
        padding: 0 0 50px 0;
        transform: translateY(-100%);
    }

    #film-viewer.active .film-strip-track {
        transform: translateY(0);
    }

    .strip-frame {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        padding: 10px 30px;
        margin-bottom: 2px;
    }

    .strip-photo {
        width: 100%;
        height: auto;
    }

    .strip-frame::before,
    .strip-frame::after {
        width: 15px;
        height: 100%;
        top: 0;
        background-image: repeating-linear-gradient(0deg, transparent 0, transparent 6px, #fff 6px, #fff 12px, transparent 12px, transparent 18px);
    }

    .strip-frame::before {
        left: 5px;
    }

    .strip-frame::after {
        right: 5px;
        left: auto;
    }

    #film-viewer.view-mode-grid #film-strip-track {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
        padding: 20px 10px 50px;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #film-viewer.view-mode-grid .film-strip-row {
        min-width: unset;
        width: 90%;
        max-width: 90%;
        margin-bottom: 16px;
        overflow: visible;
    }

    /* モバイルでは回転・移動を小さくしてはみ出しを防止 */
    #film-viewer.view-mode-grid .film-strip-row:nth-child(even) {
        transform: rotate(0.8deg) translateX(4px);
    }

    #film-viewer.view-mode-grid .film-strip-row:nth-child(odd) {
        transform: rotate(-0.5deg) translateX(-6px);
    }

    #film-viewer.view-mode-grid .film-strip-row:nth-child(3n) {
        transform: rotate(1deg) translateX(2px);
    }

    #film-viewer.view-mode-grid .film-strip-photos {
        width: 100%;
        gap: 2px;
        padding: 0 2px;
        flex-wrap: nowrap;
    }

    #film-viewer.view-mode-grid .film-strip-photos img {
        flex: 1 1 0%;
        min-width: 0;
        max-width: none;
        width: 0;
        height: auto;
        max-height: none;
        object-fit: cover;
        aspect-ratio: 3 / 2;
    }

    #film-viewer.view-mode-grid .horizontal-edge {
        height: 16px;
    }

    #film-viewer.view-mode-grid .horizontal-edge .perforation-horizontal {
        height: 8px;
        flex: 0 0 8px;
        mask-size: 12px 100%;
        -webkit-mask-size: 12px 100%;
    }

    #film-viewer.view-mode-grid .horizontal-edge .info-horizontal {
        height: 8px;
        min-height: 8px;
        font-size: 6px;
        padding: 0 6px;
        letter-spacing: 0.5px;
    }

    #film-viewer.view-mode-grid .strip-frame {
        padding: 15% 4%;
        border-right: none;
        border-left: none;
    }

    #film-viewer.view-mode-grid .strip-frame::before,
    #film-viewer.view-mode-grid .strip-frame::after {
        background-size: 8px 100%;
        height: 12%;
    }

    #film-viewer.view-mode-grid .strip-frame::before {
        top: 0;
    }

    #film-viewer.view-mode-grid .strip-frame::after {
        bottom: 0;
    }

    #film-viewer.view-mode-grid .strip-photo {
        width: 100%;
        height: 100%;
        border: none;
    }

    .works-wrapper {
        max-height: 80vw;
    }

    .block-split,
    .block-split.reverse {
        flex-direction: column;
        gap: 20px;
    }

    .block-split img,
    .split-text {
        width: 100%;
    }

    .marquee-item img {
        height: 180px;
    }

    .marquee-track {
        gap: 15px;
        animation-duration: 30s;
    }

    /* About Page Mobile Fixes */
    .about-container {
        padding-left: 4%;
        padding-right: 4%;
    }

    .bio-text,
    .bio-list {
        font-size: 11px;
        letter-spacing: 0;
        line-height: 1.7;
    }

    .bio-list {
        gap: 0 10px;
        grid-template-columns: 2.5em 1fr;
    }

    .bio-dd {
        margin-bottom: 1.2em;
        text-align: left;
    }

    .contact-message-text {
        font-size: 11px;
        letter-spacing: 0;
        line-height: 1.8;
        padding: 0 5px;
        text-align: center;
    }

    .contact-message-text .en {
        font-size: 10px;
        margin-top: 4px;
    }

    /* Works Page Mobile Specifics */
    #close-detail {
        top: 90px;
        right: 20px;
        padding: 8px 16px;
        font-size: 0.8rem;
    }

    .detail-content {
        padding-top: 140px;
        /* Increased from 100px to avoid switcher overlap */
    }

    /* Worksページではモバイル版でもフッターを完全に非表示 */
    body.works-page-body #common-footer,
    body.works-page-body .site-footer {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: absolute !important;
        top: -9999px !important;
        left: -9999px !important;
        width: 0 !important;
        max-width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        z-index: -1 !important;
    }

    /* Hero Section Mobile - 横長3:2アスペクト比を維持 */
    .hero-section {
        aspect-ratio: 3 / 2;
        min-height: 250px;
        max-height: 50vh;
    }

    /* DailyDiary Mobile - 左に写真、右にタイトル・文章のレイアウトを維持 */
    .blog-item {
        flex-direction: row;
        /* 横並びを維持 */
        align-items: center;
        gap: 15px;
        /* スマホ用の適切なギャップ */
        padding: 15px 0;
        /* パディングを少し小さく */
    }

    .blog-thumb {
        width: 100px;
        /* スマホ用の適切な幅 */
        flex-shrink: 0;
        /* 縮小を防ぐ */
        aspect-ratio: 3 / 2;
        /* アスペクト比を維持 */
    }

    .blog-info {
        flex: 1;
        /* 残りのスペースを使用 */
        min-width: 0;
        /* テキストの折り返しを許可 */
    }

    .blog-date {
        font-size: 0.75rem;
        /* スマホ用のフォントサイズ */
        margin-bottom: 6px;
    }

    .blog-title {
        font-size: 1rem;
        /* スマホ用のフォントサイズ */
        line-height: 1.3;
    }

    /* モバイルでも行優先表示（上から下）のグリッドレイアウト - 余白なし */
    .album-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        /* ギャップを0にして余白を完全に排除 */
    }

    .album-item {
        border-right: 1px solid rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        /* モバイルでも3:2アスペクト比を維持 */
        aspect-ratio: 3 / 2;
    }

    /* モバイル：2列なので、2の倍数の右側ボーダーを削除 */
    .album-item:nth-child(2n) {
        border-right: none;
    }

    /* 最後の列の右側ボーダーを削除（3列用のスタイルを上書き） */
    .album-item:nth-child(3n) {
        border-right: 1px solid rgba(0, 0, 0, 0.05);
    }

    .album-item img {
        object-fit: cover;
        object-position: center center;
    }

    /* Hardware accelerate the mobile album active slide to prevent repaints and crashes */
    .works-album-swiper .swiper-slide {
        will-change: transform, opacity;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* 3D Item Size for Mobile */
    /* モバイル版でもStream表示は3D配置を維持 */
    #works-container.stream-mode .work-item-3d {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        /* JS読み込み前の初期位置用 */
        margin: 0 !important;

        background-size: cover;
        background-position: center;

        /* ★モバイル版もスクエア・厚み表現に対応 */
        border-radius: 0;
        box-shadow:
            -2px 0 0 rgba(255, 255, 255, 0.4),
            5px 10px 25px rgba(0, 0, 0, 0.5);

        /* スマホでのタッチ操作を改善 */
        -webkit-tap-highlight-color: transparent;
        touch-action: pan-y pinch-zoom;
        cursor: pointer;
    }

    /* スマホで選択された画像の強調表示（引き出されたような表示） */
    .work-item-3d.active {
        /* 選択された画像をより強調 */
        box-shadow:
            -4px 0 0 rgba(255, 255, 255, 0.6),
            10px 15px 35px rgba(0, 0, 0, 0.7),
            inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    }

    /* Tighten View Switcher */
    .view-switcher {
        top: 80px;
        left: 20px;
        width: auto;
        max-width: 60%;
        justify-content: flex-start;
        padding: 0;
        gap: 4px !important;
        /* Tighter gap */
        background: transparent !important;
        pointer-events: auto;
        flex-wrap: nowrap;
    }

    .view-tab {
        font-size: 10px !important;
        /* Fixed pixel size for absolute control */
        padding: 2px 4px;
        /* Minimal padding */
        opacity: 0.5;
        flex: 0 0 auto;
        letter-spacing: 0;
    }

    /* Force tiny text for Stream Info */
    #works-hover-info {
        bottom: 30px !important;
        right: 5% !important;
        text-align: right !important;
        pointer-events: none !important;
        z-index: 9999 !important;
    }

    /* Override any specific selectors */
    /* Stream Item Text - Force Tiny on Mobile */
    body #works-hover-info .info-date {
        font-size: 9px !important;
        line-height: 1 !important;
        margin-bottom: 2px !important;
        opacity: 0.7 !important;
        display: block !important;
        letter-spacing: 0.05em !important;
    }

    body #works-hover-info .info-title {
        font-size: 13px !important;
        line-height: 1.1 !important;
        margin-bottom: 3px !important;
        display: block !important;
        letter-spacing: 0 !important;
    }

    body #works-hover-info .info-line {
        width: 25px !important;
        height: 1px !important;
        margin-left: auto !important;
        margin-top: 2px !important;
    }
}

/* style.css 末尾に追加 */

/* Contact Type Selector (Tabs) */
.contact-type-selector {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.contact-type-selector label {
    cursor: pointer;
    position: relative;
}

.contact-type-selector input[type="radio"] {
    display: none;
}

.contact-type-selector span {
    font-family: var(--font-main);
    font-size: 0.95rem;
    color: #999;
    padding: 10px 15px;
    transition: all 0.3s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.contact-type-selector input[type="radio"]:checked+span {
    color: var(--text-color);
    font-weight: 700;
    border-bottom: 2px solid var(--accent-color);
}

.contact-type-selector span:hover {
    color: var(--text-color);
}

/* Form Styles Adjustment */
.contact-form-box input::placeholder,
.contact-form-box textarea::placeholder {
    color: #ccc;
    font-size: 0.9rem;
}

/* Select Box Styling */

/* ==========================================================================
   FINAL OVERRIDE FOR MOBILE HEADER & SWITCHER (APPENDED FIX)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Header: Force Solid White, No Transparency */
    body.works-page-body .site-header {
        background-color: #ffffff !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        opacity: 1 !important;
        box-shadow: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        height: 60px !important;
        z-index: 2147483647 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
    }

    /* 2. Switcher: Force Solid White, No Transparency */
    .view-switcher {
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 48px !important;

        background-color: #ffffff !important;
        background: #ffffff !important;
        background-image: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;

        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        padding: 0 20px !important;

        z-index: 2147483646 !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
        pointer-events: auto !important;

        /* Ensure no transform creates scaling context issues */
        transform: none !important;
    }

    /* 3. Hide Switcher when Detail View is Active */
    body.works-detail-open .view-switcher {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* 4. Ensure Close Button and Overlay are visible/clickable above the header */
    body.works-detail-open #work-detail-overlay {
        z-index: 2147483648 !important; /* Higher than header's 2147483647 */
    }
    body.works-detail-open #close-detail {
        z-index: 2147483649 !important;
    }

    /* 5. Stream Text Fix (Re-asserting) */
    body #works-hover-info .info-date {
        font-size: 9px !important;
        color: #333 !important;
        opacity: 0.8 !important;
    }

    body #works-hover-info .info-title {
        font-size: 13px !important;
        color: #000 !important;
    }
}

.contact-form-box select {
    font-family: var(--font-main);
    color: var(--text-color);
    border-radius: 0;
    outline: none;
}

/* style.css の一番最後に追加 */

/* =========================================
   1994 (Detail) Dedicated Image Style
   Works用(.album-gallery)とは完全に切り離した設定
   ========================================= */
.detail-artwork-container {
    display: block;
    width: 100%;
    max-width: 1000px;
    /* 画像の最大幅（お好みで調整可） */
    margin: 0 auto 80px;
    /* 左右中央寄せ + 下のマージン */
    text-align: center;
}

.detail-artwork-container img {
    width: 100%;
    /* 親枠いっぱいに広げる */
    height: auto;
    object-fit: contain;
    /* トリミングせず全体を表示 */
    border-radius: 2px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    /* 上品な影 */

    /* フェードイン表示 */
    opacity: 0;
    animation: fadeUp 1.0s ease forwards;
    cursor: zoom-in;
}

/* フェードインアニメーションの定義 */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* =========================================
   Hero Slider (3:2 Aspect Ratio Fixed - Force Override)
   ========================================= */

/* 親要素の高さ固定(70vh等)を強制的に解除 */
.hero-section {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;

    /* これまでの高さ指定を打ち消して、中身(slider)に合わせる */
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* スライダー枠自体に 3:2 の比率を持たせる */
.hero-slider {
    width: 100%;

    /* 横幅100%に対して、高さは自動的に 2/3 (3:2) になる */
    aspect-ratio: 3 / 2;

    position: relative;
    overflow: hidden;
    /* 1枚目読み込み前のチラつきをライトグレーにしない（ヒーローセクションと同色） */
    background-color: #111;
}

/* 画像の表示設定 */
.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* 枠(3:2)に合わせてトリミング（隙間なく埋める） */
    object-fit: cover;
    object-position: center;

    opacity: 0;
    transition: opacity 2.0s ease-in-out;
    z-index: 1;
}

.hero-slider .slide.active {
    opacity: 1;
    z-index: 2;
}
/* =========================================
   Works Detail Gallery (Grid Layout Fix)
   ========================================= */

/* グリッドコンテナ：行ごとに左から右へ並べる */
.album-gallery {
    display: grid !important;
    /* PC: 3列 */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    width: 100%;

    /* 以前のMasonry(列)設定を打ち消し */
    column-count: auto !important;
    column-gap: normal !important;
}

/* 個々の画像アイテム */
.album-item {
    position: relative;
    width: 100%;
    /* 行を綺麗に揃えるために比率を固定します（例: 3:2）。
       トリミングなしで見せたい場合は aspect-ratio を削除し、
       grid-template-rows: masonry; (Firefoxのみ) 等が必要になりますが、
       整列させるなら固定比率 + object-fit: cover が最も美しいです。
    */
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 4px;
    background-color: #eee;
    /* 読み込み中のプレースホルダー色 */
    margin: 0 !important;
    break-inside: auto !important;
}

.album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠いっぱいに表示（はみ出しはトリミング） */
    display: block;

    /* 読み込み完了まで透明にしておく */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* JSで読み込み完了後に付与されるクラス */
.album-item img.loaded {
    opacity: 1;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .album-gallery {
        /* スマホ: 2列 */
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* =========================================
   Album Mode Styles (Swiper + Scrapbook)
   ========================================= */

/* Album Mode Background - Paper Texture (off-white, noise, vignette) */
body.album-mode {
    background-color: #fcfbf9;
    /* より温かみのある生成り色 */
    background-image:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .015) 2px, rgba(0, 0, 0, .015) 3px),
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0, 0, 0, .015) 2px, rgba(0, 0, 0, .015) 3px);
}

#gallery-album {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    padding: 140px 40px 40px;
    display: none;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Paper noise texture overlay (SVG) */
#gallery-album::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

/* Vignette - slightly darker edges */
#gallery-album::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.06) 100%);
    pointer-events: none;
    z-index: 0;
}

body.album-mode #gallery-album {
    display: block !important;
}

/* Album Mode表示の確実な設定 */
body.album-mode #gallery-album.view-content,
body.album-mode #gallery-album {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 他のモードでは確実に非表示 */
body:not(.album-mode) #gallery-album {
    display: none !important;
}

/* Swiper Container (above noise/vignette) */
.works-album-swiper {
    width: 100%;
    height: 100%;
    padding: 50px 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
}

.works-album-swiper .swiper-wrapper {
    display: flex !important;
}

.works-album-swiper .swiper-slide {
    /* Revert to responsive width for multi-slide view */
    width: 60vw !important;
    max-width: 650px !important;
    height: auto !important;
    max-height: 80vh !important;
    /* Clear header */
    margin-top: 100px;

    display: flex !important;
    align-items: flex-start;
    /* Align top */
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box;

    /* スライド切り替え時の不透明度トランジション */
    /* スライド切り替え時の不透明度トランジション */
    transition: opacity 0.6s ease;
}

/* アクティブじゃないスライドを少し薄くする演出 */
.works-album-swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.5 !important;
}

/* ===== SCRAPBOOK PAGE LAYOUT ===== */

/* 1. 台紙（Paper）の定義 */
/* スライド内のコンテナ */
/* スライド内のコンテナ */
.scrapbook-page {
    position: relative;
    /* Aspect Ratio Fix: Use auto dimensions with max constraints */
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 210 / 297;
    /* A4 Ratio */

    /* 中央配置 */
    margin: 0 auto;

    /* 紙の質感と機能 */
    background-color: #f2f0e6;
    overflow: hidden;
    /* はみ出しをカット */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* 古紙の質感 (Matte/Aged Paper) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.83 0 0 0 1 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-noise)' opacity='0.4'/%3E%3C/svg%3E"),
        linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05));
    background-blend-mode: multiply;

    /* ハードウェア・アクセラレーションの強制（再描画コスト削減） */
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* スマホ閲覧時は重いテクスチャと乗算レイヤーを無効化（GPUメモリ保護） */
@media (max-width: 768px) {
    .scrapbook-page {
        background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)) !important;
        background-blend-mode: normal !important;
    }
}

/* ... existing logic ... */


/* Stream Mode: 3D Thickness & Transparency (Dark Smoked Glass) */
.work-item-3d {
    /* Glass Panel Base - Lighter tint for more transparency */
    background-color: rgba(0, 0, 0, 0.3);
    /* Brighter border to define the glass edge clearly */
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);

    /* Subtle depth shadows (Glass thickness) */
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.2),
        /* Highlight edge */
        4px 0 10px rgba(0, 0, 0, 0.3);
    /* Soft drop shadow */

    /* Ensure 3D transform works */
    transform-style: preserve-3d;
    will-change: transform;
}

.stream-item-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    /* Significantly lower opacity to ensure "see-through" effect */
    opacity: 0.6;

    /* Remove mask to allow clear glass edges */
    -webkit-mask-image: none;
    mask-image: none;

    transition: opacity 0.3s ease;
    will-change: transform;
}

/* Optional: Hover state to make focused item less transparent */
.work-item-3d:hover .stream-item-inner {
    opacity: 0.9;
}

/* 2. 写真（Photo）の配置ロジック */
/* 「写真の下端」が「紙の縦中心」に来るルールを厳密にコード化 */
.photo-frame {
    position: absolute;
    /* 幅は紙の80% */
    width: 80%;
    /* アスペクト比 3:2 (横長) 固定 */
    aspect-ratio: 3 / 2;

    /* 配置: 紙の左右中央 */
    left: 50%;
    transform: translateX(-50%);

    /* 重要: 写真の「下端(bottom)」を紙の「縦50%」の位置に合わせる */
    bottom: 50%;

    /* 装飾 */
    padding: 12px;
    /* 白フチの太さ */
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

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

/* 3. 手書き文字（Title）の配置ロジック */
/* 手書きタイトル: 写真左下に重ねて配置 */
.handwritten-title {
    position: absolute;
    z-index: 10;

    /* 縦位置: 紙の中央ライン(50%)付近 */
    /* top: 48% -> 写真の下端(50%)に少しかかる位置 */
    top: 48%;
    bottom: auto;
    /* bottom指定を解除 */

    /* 横位置: 紙の左端(-2%)からはみ出させる */
    left: -2%;

    /* スタイル: かすれた鉛筆風 */
    font-family: 'Reenie Beanie', cursive;
    /* フォントサイズを少し控えめに調整 */
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    line-height: 1;
    color: #2b2b2b;
    /* 真っ黒ではなく深いグレー */
    opacity: 0.98;
    /* User request: 0.98 */
    mix-blend-mode: multiply;
    /* 紙に馴染ませる */
    transform: rotate(-6deg);

    /* 長いタイトルは改行させる */
    white-space: normal;
    word-break: break-word;
    max-width: 40%;
    /* 写真の半分まで行かないように制限 */
    text-align: right;
    /* 右揃えにして写真に寄せる */

    /* かすれ加工 (Bold Erosion) */
    filter: url(#ink-erosion);
    /* No blur, trust the SVG filter */
    text-shadow: none;
    
    /* 重いSVGフィルターとBlend描画を別レイヤーにする */
    will-change: transform;
    transform: rotate(-6deg) translateZ(0); /* translateZ(0)を既存のrotateに追加 */
    backface-visibility: hidden;
}

/* 4. 説明文（Description）の配置ロジック */
/* 紙の右下エリア（第4象限）にきれいに収めます */
.serif-description {
    position: absolute;

    /* 縦位置: 紙の中央ライン(50%)より下から開始 */
    top: 60%;

    /* 横位置: 紙の縦中心線(50%)から開始 */
    left: 50%;

    /* サイズ: 右側の余白に収める */
    width: 40%;
    text-align: left;

    /* スタイル */
    font-family: var(--font-serif);
    font-size: 0.85rem;
    line-height: 1.8;
    color: #4a4a4a;
}

/* ロック状態のオーバーレイ */
.album-slide-locked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    z-index: 20;
    border-radius: 2px;
}

/* View Switcher Fixed Styling */
.view-switcher {
    display: flex;
    justify-content: flex-start;
    /* Left align */
    gap: 20px;
    margin-bottom: 40px;
    position: sticky;
    top: 100px;
    z-index: 100;
    padding: 10px 40px;
    background: transparent !important;
    /* Ensure transparent */
    backdrop-filter: none;
}

.view-tab {
    background: transparent;
    border: none;
    padding: 8px 16px;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.85rem;
    font-family: var(--font-main);
    letter-spacing: 0.05em;
    transition: opacity 0.2s ease;
    text-decoration: none;
}

.view-tab:hover {
    opacity: 0.6;
}

.view-tab.active {
    text-decoration: underline;
    text-underline-offset: 4px;
    opacity: 1;
}

/* Stream Mode: 3D Thickness & Transparency */
/* Stream Mode: 3D Thickness & Transparency (Dark Smoked Glass) */
.work-item-3d {
    /* Glass Panel Base */
    background-color: rgba(0, 0, 0, 0.5);
    /* Dark smoked tint */
    border: 1px solid rgba(255, 255, 255, 0.15);
    /* Subtle glass edge */
    backdrop-filter: blur(4px);
    /* Optional: slight blur of background */

    /* Subtle depth shadows (Glass thickness) */
    box-shadow:
        1px 0 0 rgba(255, 255, 255, 0.2),
        /* Highlight edge */
        4px 0 10px rgba(0, 0, 0, 0.3);
    /* Soft drop shadow */

    /* Ensure 3D transform works */
    transform-style: preserve-3d;
}

.stream-item-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    /* Make image semi-transparent to allow "smoked glass" overlap effect */
    opacity: 0.85;

    /* Remove mask to allow clear glass edges */
    -webkit-mask-image: none;
    mask-image: none;

    /* Optional: Blend mode for better integration with dark glass */
    /* mix-blend-mode: overlay; (Experiment if needed, but opacity is safer) */
}

/* =========================================
   List Mode Fixes
   ========================================= */
#gallery-list {
    position: relative;
    z-index: 10;
    /* Ensure list items are above the background */
    min-height: 100vh;
    /* Ensure scrollability */
    padding-bottom: 100px;
    /* Space for footer */
    background: transparent !important;
    /* Ensure transparent background */
}

#gallery-list-background {
    position: fixed !important;
    /* Force fixed position to viewport */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    /* Behind the list content */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    /* Pass clicks through */
    transform: translateZ(0);
    /* Hardware acceleration */
    will-change: background-image;
    transition: background-image 0.1s linear;
    /* Much faster transition for "instant" feel */
}

/* Hide background in other modes just in case */
body:not(.works-page-body) #gallery-list-background {
    display: none !important;
}

/* =========================================
   CRITICAL FIX: Album Visibility & Stream Transparency
   ========================================= */

/* 1. Force Album Slide Height */
.works-album-swiper .swiper-slide {
    width: 60vw !important;
    height: 80vh !important;
    max-height: 80vh !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 2. Force A4 Ratio on Scrapbook Page */
.scrapbook-page {
    width: auto !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 210 / 297 !important;
}

/* Mobile/Portrait Override for A4 */
@media (max-aspect-ratio: 210/297) {
    .scrapbook-page {
        width: 90% !important;
        height: auto !important;
    }
}

/* 3. Force Stream Transparency (Smoked Glass) */
.work-item-3d {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), 4px 0 10px rgba(0, 0, 0, 0.3) !important;
}

.stream-item-inner {
    opacity: 0.6 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}


/* =========================================
   FINAL ROBUST FIX: Album A4 Ratio & Visibility
   ========================================= */

/* 1. Container (Slide) - Centers the content */
.works-album-swiper .swiper-slide {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* GPUレイヤーキャッシュでスワイプ時のカクつきを除去 */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 2. Paper (Scrapbook Page) - Strictly A4, Fully Visible */
.scrapbook-page {
    /* Base Constraint: Fit Height first (Common for landscape/desktop) */
    height: 75vh !important;
    width: auto !important;

    /* Aspect Ratio: A4 (Vertical) */
    aspect-ratio: 210 / 297 !important;

    /* Secondary Constraint: Never exceed screen width */
    max-width: 90vw !important;
    /* If max-width is hit, aspect-ratio should reduce height automatically. */

    /* Ensure it doesn't overflow vertically if width triggers height increase */
    max-height: 80vh !important;

    /* Styling Restore (Texture) */
    position: relative !important;
    background-color: #f2f0e6 !important;
    margin: auto !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;

    /* Texture Restore */
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\'%3E%3Cfilter id=\'paper-noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.8\' numOctaves=\'3\' result=\'noise\'/%3E%3CfeColorMatrix type=\'matrix\' values=\'0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.83 0 0 0 1 0\' in=\'noise\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23paper-noise)\' opacity=\'0.4\'/%3E%3C/svg%3E'), linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)) !important;
    background-blend-mode: multiply !important;
}

@media (max-width: 768px) {
    .scrapbook-page {
        background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)) !important;
        background-blend-mode: normal !important;
    }
}

/* 3. Force Stream Transparency (Smoked Glass) */
.work-item-3d {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), 4px 0 10px rgba(0, 0, 0, 0.3) !important;
}

.stream-item-inner {
    opacity: 0.6 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

/* =========================================
   FINAL CORRECTED LAYOUT: Album & Stream 
   ========================================= */

/* 1. Album Slide Container - Allow Multi-Slide (Cover Flow) */
body.album-mode .works-album-swiper .swiper-slide {
    /* Set explicit width based on A4 ratio logic to prevent Safari auto-width measurement crash */
    width: min(85vw, calc(75vh * 0.7071)) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 90vw !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

@media (max-width: 768px) {
    body.album-mode .works-album-swiper .swiper-slide {
        /* Override any rogue max-width and ensure A4 constraints are stable on mobile */
        width: min(72vw, calc(68dvh * 0.7071)) !important;
        max-width: none !important;
    }
}

/* 2. Paper (Scrapbook Page) - Exact child of swiper-slide */
body.album-mode .scrapbook-page {
    position: relative !important;
    /* Use 100% width of the stabilized swiper-slide */
    width: 100% !important;
    /* Calculate height using aspect ratio constraints */
    height: min(75vh, calc(85vw * 1.4142)) !important;

    /* Styling & Texture */
    background-color: #f2f0e6 !important;
    margin: 0 auto !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.83 0 0 0 1 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-noise)' opacity='0.4'/%3E%3C/svg%3E"), linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)) !important;
    background-blend-mode: multiply !important;
}

@media (max-width: 768px) {
    body.album-mode .scrapbook-page {
        height: min(68dvh, calc(72vw * 1.4142)) !important;
    }
}

@media (max-width: 768px) {
    .scrapbook-page {
        background-image: linear-gradient(to bottom right, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.05)) !important;
        background-blend-mode: normal !important;
    }
}

/* Ensure image inside fits correctly - Polaroid Style */
.photo-frame {
    width: 80% !important;
    aspect-ratio: 3/2 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 15% !important;
    /* Classic Polaroid top spacing */
    bottom: auto !important;
}

/* 3. Stream Mode Transparency */
/* =========================================
   FINAL INVARIANT FIX: Switcher & Transparency 
   ========================================= */

/* 1. View Switcher - Strictly Invariant Position */
.view-switcher {
    position: fixed !important;
    top: 85px !important;
    /* Immediately below header logo (approx 60px bottom) */
    left: 40px !important;
    /* Aligned with header padding */
    z-index: 10000 !important;
    /* Always on top */
    display: flex !important;
    gap: 0 !important;
    transform: none !important;
    /* Prevent ANY transform interference */
}

/* 2. Stream Transparency - Clear Center, Faded Edges */
.stream-item-inner {
    opacity: 1 !important;
    /* Center is fully visible */
    /* Radial Mask: Black (visible) at 40%, Transparent at 100% */
    -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%) !important;
    mask-image: radial-gradient(circle at center, black 40%, transparent 100%) !important;
}

/* Ensure container has glass effect */
.work-item-3d {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2), 4px 0 10px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(5px) !important;
}

/* --- Typewriter Auth Modal --- */
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

.typewriter-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    padding: 0;
    margin: 0;
    max-width: none;
    max-height: none;
    z-index: 10000;
    display: none;
    /* JSで制御 */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.typewriter-modal.active {
    display: flex;
    opacity: 1;
}

.typewriter-paper {
    background-color: #fdfbf7;
    width: 90%;
    max-width: 500px;
    padding: 60px 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    font-family: 'Special Elite', cursive;
    font-size: 24px;
    color: #1a1a1a;
    position: relative;
    transform: rotate(-1deg);
    /* 古紙の質感を出すための微細なノイズ（オプション） */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
}

.typewriter-text-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1.5;
}

.typewriter-label {
    margin-right: 10px;
}

.typewriter-input-display {
    border-bottom: 2px solid #333;
    min-width: 20px;
    display: inline-block;
}

/* カーソル点滅アニメーション */
.cursor {
    display: inline-block;
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    font-weight: bold;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* 隠しインプット（スマホ対応・フォーカス用） */
.hidden-input {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: text;
    z-index: 10;
}

/* 成功スタンプ */
.stamp-granted {
    position: absolute;
    bottom: 20px;
    right: 20px;
    border: 3px solid #d32f2f;
    color: #d32f2f;
    padding: 10px 20px;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    transform: rotate(-10deg) scale(3);
    opacity: 0;
    pointer-events: none;
    letter-spacing: 2px;
    /* 簡易的なグランジ感の演出は困難なため、回転と拡大縮小のみとする */
}

/* スタンプアニメーション */
.stamp-granted.visible {
    animation: stamp-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes stamp-in {
    0% {
        opacity: 0;
        transform: rotate(-10deg) scale(3);
    }

    100% {
        opacity: 0.8;
        transform: rotate(-10deg) scale(1);
    }
}

/* エラー時の振動アニメーション */
.typewriter-paper.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0) rotate(-1deg);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0) rotate(-1deg);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0) rotate(-1deg);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0) rotate(-1deg);
    }
}

/* 閉じるボタン（右上の×） */
.close-typewriter {
    position: absolute;
    top: 10px;
    right: 15px;
    font-family: var(--font-main);
    /* 既存フォント */
    font-size: 20px;
    color: #999;
    cursor: pointer;
    z-index: 20;
    transition: color 0.3s;
}

.close-typewriter:hover {
    color: #333;
}

/* Visibility Toggle (SVG Icon) */
.toggle-visibility {
    cursor: pointer;
    margin-left: 10px;
    vertical-align: middle;
    opacity: 0.4;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

.toggle-visibility:hover {
    opacity: 0.8;
    transform: scale(1.1);
}

.toggle-visibility svg {
    display: block;
}

/* Enter Hint */
.enter-hint {
    display: inline-block;
    margin-left: 15px;
    font-size: 14px;
    color: #aaa;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 2px 8px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.3s;
    font-family: var(--font-main), sans-serif;
    letter-spacing: 1px;
}

/* Error Message (Typewriter Style) */
.error-message-typewriter {
    color: #d32f2f;
    font-family: 'Special Elite', cursive;
    font-size: 18px;
    margin-top: 20px;
    min-height: 24px;
    /* Ensure space is reserved or just to give it height */
    opacity: 0;
    transition: opacity 0.3s;
    text-align: left;
    padding-left: 5px;
}

/* Logout Confirm Modal Styles */
.typewriter-confirm-text {
    font-size: 20px;
    margin-bottom: 30px;
    display: block;
    text-align: center;
    font-weight: bold;
}

.typewriter-btn-group {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.typewriter-btn {
    background: none;
    border: none;
    font-family: 'Special Elite', cursive;
    font-size: 18px;
    color: #1a1a1a;
    cursor: pointer;
    padding: 5px 10px;
    position: relative;
    transition: color 0.2s;
}

.typewriter-btn:hover {
    color: #d32f2f;
    text-decoration: underline;
}

/* Paper Eject Animation */
.typewriter-paper.eject {
    transform: translateY(-150%) rotate(5deg) !important;
    opacity: 0 !important;
    transition: all 0.4s ease-in !important;
}

.enter-hint.visible {
    opacity: 1;
}

/* =========================================
   Terminal Auth Modal (Redesign)
   ========================================= */
.terminal-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    font-family: 'VT323', monospace;
    color: #333;
}

.terminal-modal.active {
    opacity: 1;
    visibility: visible;
}

.terminal-content {
    text-align: center;
    width: 100%;
    max-width: 600px;
    padding: 20px;
}

.terminal-text {
    font-size: 2rem;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.terminal-input-group {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    gap: 10px;
}

.terminal-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid #333;
    color: #333;
    font-family: 'VT323', monospace;
    font-size: 2rem;
    width: 200px;
    text-align: center;
    outline: none;
    letter-spacing: 4px;
}

.terminal-cursor {
    animation: blink 1s step-end infinite;
    vertical-align: middle;
    margin-left: 5px;
}

.terminal-input-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

.terminal-hidden-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: text;
    font-size: 2rem;
}

.terminal-input-display {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    color: #333;
    border-bottom: 2px solid #333;
    min-width: 200px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    letter-spacing: 4px;
    text-align: center;
}

.terminal-eye-btn {
    background: transparent;
    border: none;
    color: #333;
    cursor: pointer;
    margin-left: 15px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.terminal-eye-btn:hover {
    opacity: 1;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Connecting Animation */
.connecting-container {
    display: none;
    /* Initially hidden */
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.connecting-text {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.progress-bar-frame {
    width: 300px;
    height: 30px;
    border: 2px solid #333;
    padding: 3px;
    position: relative;
}

.progress-bar-fill {
    width: 0%;
    height: 100%;
    background: #333;
    /* Dark gray */
    transition: width 0.1s linear;
}

.success-message {
    display: none;
    font-size: 2.5rem;
    margin-top: 20px;
    color: #333;
}

/* Denied Modal */
.denied-container {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.denied-text {
    color: #333;
    font-size: 3rem;
    font-weight: bold;
}

.confirm-text {
    font-size: 2rem;
}

.terminal-btn-group {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

.terminal-btn {
    background: transparent;
    border: 2px solid #333;
    color: #333;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    padding: 5px 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.terminal-btn:hover {
    background: #333;
    color: #fff;
}

/* Close Button (Top Right) */
.terminal-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    cursor: pointer;
    font-family: sans-serif;
    /* Consolas or similar */
}

/* Terminal Enter Button */
.terminal-enter-btn {
    display: block;
    margin: 20px auto 0;
    background: transparent;
    border: 2px solid #333;
    color: #333;
    font-family: 'VT323', monospace;
    font-size: 1.5rem;
    padding: 8px 30px;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.2s;
}

.terminal-enter-btn:hover {
    background: #333;
    color: #fff;
}

/* Contact Switcher Mobile Fix */
@media (max-width: 768px) {
    .contact-type-selector {
        gap: 5px;
        /* Reduce gap to prevent wrapping */
        justify-content: space-between;
        /* Distribute items evenly */
        padding-left: 0;
        padding-right: 0;
    }

    .contact-type-selector label {
        flex: 1;
        /* Ensure equal width for all tabs */
        text-align: center;
        /* Center the label content */
    }

    .contact-type-selector span {
        display: block;
        /* Make span fill the label width */
        width: 100%;
        padding: 10px 2px;
        /* Reduce side padding significantly */
        font-size: 0.8rem;
        /* Reduce font size to fit */
        text-align: center;
        /* Explicitly center text */
        white-space: nowrap;
        /* Prevent text wrapping inside tab */
    }
}

/* =========================================
   About Page Bio Refinements
   ========================================= */

/* Japanese Text: Grid Layout for Hanging Indent */
.jp-block .bio-list {
    display: grid;
    grid-template-columns: 50px 1fr;
    /* Fixed width for Year */
    gap: 0 15px;
    /* Space between year and content */
    margin: 0;
    padding: 0;
}

.jp-block .bio-text,
.jp-block .bio-dd {
    line-height: 1.6 !important;
}

.jp-block .bio-dt {
    grid-column: 1;
    font-weight: 700;
    margin: 0;
    line-height: 1.6;
}

.jp-block .bio-dd {
    grid-column: 2;
    margin: 0 0 20px 0;
    /* Spacing between items */
    line-height: 1.6;
}


/* English Text: Grid Layout for Hanging Indent */
.en-list {
    display: grid;
    grid-template-columns: 50px 1fr;
    /* Fixed width for Year */
    gap: 0 15px;
    /* Space between year and content */
    margin: 0;
    padding: 0;
}

.en-list .bio-dt {
    grid-column: 1;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-main);
    line-height: 1.6;
}

.en-list .bio-dd {
    grid-column: 2;
    margin: 0 0 20px 0;
    /* Spacing between items */
    line-height: 1.6;
}

/* Mobile Adjustments for Bio */
@media (max-width: 768px) {

    .en-list,
    .jp-block .bio-list {
        grid-template-columns: 45px 1fr;
        gap: 0 10px;
    }
}

/* =========================================
   Daily Diary - Grid Redesign (Gega Studio Style)
   ========================================= */
.diary-grid {
    display: grid;
    /* PC: 3 columns strict */
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    /* Outer borders (Top/Left) */
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    width: 100%;
    max-width: 1200px;
    margin: 60px auto;
}

.diary-card {
    display: flex;
    flex-direction: column;
    /* Inner/Right/Bottom borders */
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 30px;
    /* Reduced padding slightly for better fit */
    background: #fff;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.diary-card:hover {
    background-color: #fcfcfc;
}

.diary-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 15px;
}

.diary-date {
    font-size: 0.8rem;
    color: #888;
    font-weight: 500;
}

.diary-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.diary-category {
    display: inline-block;
    border: 1px solid #111;
    border-radius: 50px;
    padding: 2px 10px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111;
    background: transparent;
    font-weight: 700;
}

.diary-thumb {
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    margin: 10px 0 20px;
    background-color: #f7f7f7;
}

.diary-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: block;
}

.diary-card:hover .diary-thumb img {
    transform: scale(1.03);
}

.diary-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #222;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between lock and title */
}

.diary-title .lock-icon {
    display: inline-flex;
    align-items: center;
    color: #666;
    flex-shrink: 0;
}

.diary-title .lock-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.diary-excerpt {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    /* Reduced from 0.85rem */
    color: #777;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    /* Standard property for compatibility */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.read-more-link {
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-transform: uppercase;
    color: #000;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: auto;
    align-self: flex-start;
}

/* Tablet Layout (2 Columns) */
@media (max-width: 1024px) {
    .diary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile Layout (2 Columns) */
@media (max-width: 768px) {
    .diary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .diary-card {
        padding: 12px;
    }

    .diary-date {
        font-size: 0.7rem;
    }

    .diary-category {
        padding: 2px 6px;
        font-size: 0.55rem;
    }

    .diary-thumb {
        margin: 6px 0 10px;
    }

    .diary-title {
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .diary-excerpt {
        font-size: 0.7rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        margin-bottom: 12px;
    }

    .read-more-link {
        font-size: 0.65rem;
    }
}

/* =========================================
   Exposure Break (hidden block game)
   ========================================= */
#exposure-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff !important;
    color: #333 !important;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'DM Sans', sans-serif;
}

#exposure-game-overlay.game-hidden {
    opacity: 0;
    pointer-events: none !important;
    transition: opacity 0.8s ease;
}

#exposure-game-overlay.game-hidden * {
    pointer-events: none !important;
}

#exposure-game-overlay.game-active {
    opacity: 1;
    pointer-events: auto;
}

#game-area-wrapper {
    position: relative;
    width: min(95vw, 80vh * 9 / 16);
    max-width: min(860px, 80vh * 9 / 16);
    height: auto;
    max-height: 80vh;
    aspect-ratio: 9 / 16;
    margin-top: 0;
    z-index: 1;
    border: 4px solid #ccc;
    background-color: #fff;
    box-sizing: border-box;
}

#game-board {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent !important;
    background: transparent;
    z-index: 1;
}

#game-bg-grey {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #444;
    z-index: 0;
}

#game-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 2;
    pointer-events: none;
}

#game-secret-background {
    position: absolute;
    background-size: cover;
    background-position: center;
    z-index: 1;
    opacity: 0;
    filter: grayscale(100%) brightness(0.6);
    transition: filter 2s ease-in-out, opacity 0.3s ease;
}

/* クリア状態になった時の背景（カラーで鮮明に） */
#game-area-wrapper.game-cleared-state #game-secret-background {
    filter: grayscale(0%) brightness(1.0);
    opacity: 1 !important;
}

/* クリア時に不要な要素を非表示にする */
#game-area-wrapper.game-cleared-state #game-blocks-container,
#game-area-wrapper.game-cleared-state #game-canvas,
#game-area-wrapper.game-cleared-state #game-lives-display {
    opacity: 0;
    pointer-events: none;
    /* 操作も無効化 */
    transition: opacity 1s ease-out;
}

#game-blocks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, auto);
    gap: 2px;
    z-index: 2;
    background: transparent !important;
    align-content: start;
    padding: 8px 0 0;
}

.game-block {
    width: 100%;
    aspect-ratio: 5 / 1;
    min-height: 0;
    background-color: #1a1a1a;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-block.block-shattered {
    opacity: 0 !important;
    transform: scale(0.8);
    pointer-events: none;
}

.game-block.block-two-hit {
    /* Different visual for 2-hit block (e.g., solid gray with border) */
    background-color: #555;
    border: 2px solid #888;
}

.game-block.block-two-hit-damaged {
    /* Visual when damaged (e.g., darker, broken border) */
    background-color: #333;
    border: 1px dashed #666;
}

.game-block.block-unbreakable {
    /* Visual for unbreakable block (e.g., solid white/metallic) */
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Confetti Animation Elements */
.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #f00;
    opacity: 0;
    pointer-events: none;
    z-index: 10000;
}

.game-ui-body {
    background-color: transparent !important;
}

/* ------------------------------------- */
/* Global Dark Mode Palette              */
/* ------------------------------------- */
body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}

body.dark-mode a {
    color: #e0e0e0;
}

body.dark-mode .section-container {
    background-color: #1a1a1a;
    border-color: #333;
}

body.dark-mode .section-title {
    color: #e0e0e0;
}

body.dark-mode .section-title::after {
    background-color: #e0e0e0;
}

body.dark-mode .common-header,
body.dark-mode .site-header {
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0.9) 0%, rgba(18, 18, 18, 0.4) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .view-more-action-btn,
body.dark-mode .view-all-btn {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

body.dark-mode .view-more-action-btn:hover,
body.dark-mode .view-all-btn:hover {
    background: #e0e0e0;
    color: #121212;
}

body.dark-mode .opening-overlay {
    background-color: #121212;
}

body.dark-mode .diary-card {
    background: #1a1a1a;
    color: #e0e0e0;
    border-color: #333;
}

body.dark-mode .diary-category {
    border-color: #e0e0e0;
    color: #e0e0e0;
}

body.dark-mode .diary-item,
body.dark-mode .blog-item {
    border-color: #333;
    background: #1a1a1a;
}

body.dark-mode .diary-item *,
body.dark-mode .blog-item * {
    color: #e0e0e0;
}

body.dark-mode .modal-content {
    background: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .close-btn {
    color: #e0e0e0;
}

body.dark-mode .item-info,
body.dark-mode .archive-note,
body.dark-mode .blog-date,
body.dark-mode .diary-date,
body.dark-mode .diary-excerpt,
body.dark-mode .photo-info,
body.dark-mode .diary-card-title,
body.dark-mode .diary-card-date,
body.dark-mode .diary-title,
body.dark-mode .article-title,
body.dark-mode .diary-title-main,
body.dark-mode .article-date,
body.dark-mode .block-text {
    color: var(--text-color);
}

body.dark-mode .blog-item:hover {
    background-color: #2a2a2a;
}

.game-ui-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.game-ui-btn:hover {
    opacity: 0.6;
}

#game-lives-display {
    position: absolute;
    top: -25px;
    left: 0;
    color: #333;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    letter-spacing: 0.1em;
    font-weight: 500;
    z-index: 10;
}

#game-btn-exit {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 10;
    color: #333 !important;
}

#game-center-ui {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    text-align: center;
}

#game-status-text {
    color: #fff;
    font-size: 12px;
    font-family: 'DM Sans', sans-serif;
    letter-spacing: 0.2em;
    font-weight: 500;
    margin-bottom: 12px;
}

#game-area-wrapper #game-paddle {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 12px;
    background-color: #f0f0f0;
    border-radius: 6px;
    z-index: 10;
    transition: opacity 0.5s ease;
}

#game-area-wrapper .game-ball {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #f0f0f0;
    border-radius: 50%;
    z-index: 10;
    transition: opacity 0.5s ease;
}

#game-area-wrapper .game-ball.ball-piercing {
    box-shadow: 0 0 8px #f0f0f0, 0 0 12px #aaa;
    background-color: #f0f0f0 !important;
}

#game-balls-container,
#game-items-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

#game-items-container {
    z-index: 15;
}

.game-item {
    position: absolute;
    width: 24px;
    height: 12px;
    border: 1px solid #f0f0f0;
    color: #f0f0f0;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    z-index: 15;
}

/* =========================================
   Legal Page (特商法表記)
   ========================================= */
.legal-page {
    background-color: #fff;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10vh 20px 40px;
    min-height: 100vh;
    box-sizing: border-box;
}

.legal-page #common-header,
.legal-page #common-footer {
    width: 100%;
}

.legal-container {
    width: 100%;
    max-width: 600px;
    flex-shrink: 0;
}

.legal-back-btn {
    display: inline-block;
    color: #666;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.2em;
    margin-bottom: 40px;
    transition: color 0.3s ease;
}

.legal-back-btn:hover {
    color: #333;
}

.legal-title {
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-bottom: 8px;
    font-weight: normal;
}

.legal-subtitle {
    font-size: 10px;
    color: #555;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
}

.legal-list {
    font-size: 11px;
    line-height: 2;
    letter-spacing: 0.05em;
}

.legal-list dt {
    color: #555;
    margin-top: 24px;
    margin-bottom: 4px;
}

.legal-list dd {
    margin-left: 0;
    color: #333;
}

.footer-legal-link {
    display: inline-block;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #666;
    text-decoration: none;
    margin-top: 40px;
    transition: color 0.3s ease;
}

.footer-legal-link:hover {
    color: #f4f4f4;
}

/* スマホ表示時はAlbumモードのタブを非表示にし、3モード（Stream, Grid, List）のみにする */
@media (max-width: 768px) {
    .view-switcher .view-tab[data-view="album"] {
        display: none !important;
    }
}

/* =========================================
   ALBUM MODE RICH UI ENHANCEMENTS (PC ONLY)
   ========================================= */

/* Paper Texture Refinement */
.scrapbook-page {
    /* Add a subtle inner shadow to simulate thick cardboard/paper edge */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.05), 0 10px 40px rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(0,0,0,0.03);
    /* Improve noise blend */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='paper-noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' result='noise'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.82 0 0 0 0 0.75 0 0 0 0.8 0' in='noise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper-noise)' opacity='0.5'/%3E%3C/svg%3E"), linear-gradient(to bottom right, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.1)) !important;
}

/* Photo Frame Shadows & Realism */
.photo-frame {
    /* Richer, softer drop shadow for realism */
    box-shadow: 2px 5px 15px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.15) !important;
    background: #fafafa !important;
    /* Slight rotation for an organic, imperfect placed look */
    transform: translateX(-50%) rotate(-1deg) !important;
}

/* Masking Tape Element */
.masking-tape {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 120px;
    height: 30px;
    background-color: rgba(245, 240, 225, 0.65);
    /* Worn masking tape texture */
    background-image: linear-gradient(to right, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.05) 100%),
                      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='transparent'/%3E%3Cpath d='M0 0h1v1H0z' fill='rgba(0,0,0,0.05)'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transform: translateX(-50%) rotate(-3deg);
    z-index: 10;
    
    /* Ragged edges using clip-path polygon */
    clip-path: polygon(1% 0, 99% 2%, 98% 100%, 2% 98%);
}

/* Exquisite Typography for Handwritten Title */
.handwritten-title {
    font-size: clamp(2rem, 4vw, 3.2rem) !important;
    opacity: 0.95 !important;
    color: #1a1a1a !important;
    /* More aggressive rotation */
    transform: rotate(-8deg) translateZ(0) !important;
    /* Faux ink-bleed effect */
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
}

/* Elegant Description Text */
.serif-description {
    font-size: 0.9rem !important;
    line-height: 2 !important;
    color: #333 !important;
    /* Make it look like elegant typewriter / serif */
    font-family: var(--font-serif), 'Cormorant Garamond', serif !important;
    letter-spacing: 0.05em;
    /* Slight opacity for ink realism */
    opacity: 0.85;
}

/* Ensure smooth hardware acceleration on transitions */
.works-album-swiper .swiper-slide {
    will-change: transform, opacity;
    
}

/* =========================================
   Bio Motto (About page sign-off)
   ========================================= */
.bio-motto {
    margin: 80px 0 0;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    font-weight: 400;
    color: #888;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

body.dark-mode .bio-motto {
    color: rgba(245, 245, 245, 0.65);
}

/* =========================================
   Mobile Index Typography Refinement
   Normcore / minimal hierarchy on small screens.
   Placed at file end so it overrides earlier
   1024px and 768px breakpoint rules via cascade.
   ========================================= */
@media (max-width: 768px) {
    .section-title {
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.22em;
        line-height: 1.2;
    }

    .collection-header {
        align-items: baseline;
        border-bottom: none;
        padding-bottom: 6px;
        margin-bottom: 24px;
        gap: 12px;
    }

    .article-title {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    .article-header {
        margin-bottom: 56px;
    }

    .bio-motto {
        margin-top: 56px;
        font-size: 0.9rem;
    }
}