:root {
    --base: #F9F8F6;
    --deep: #2D433D;
    --text-color: #F9F8F6;
    --bg-luminance: 0.9; /* 初期は明るい */
}

/* 慣性スクロール最適化 */
html.lenis {
    height: auto;
}

.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis-smooth {
    scroll-behavior: auto !important;
}

body {
    background-color: #1a1a1a; /* 暗い背景色 */
    color: var(--text-color);
    font-family: 'Shippori Mincho', serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.font-en {
    font-family: 'Cormorant Garamond', serif;
}

/* --- Background Layers --- */
#global-bg-container {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
}

#global-bg-image {
    width: 100%;
    height: 120%;
    /* パララックス用に少し高く */
    object-fit: cover;
    background-image: url('assets/2.png?v=2');
    background-size: cover;
    background-position: center;
    opacity: 0.4;
    filter: grayscale(0.4) brightness(var(--bg-luminance));
    transform: translateY(0);
    will-change: filter, transform;
}


/* --- Animations --- */
.line-mask {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    transform: translateY(20px);
}

.img-reveal-wrapper {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 100% 0 0);
}

/* --- UI Elements --- */
.nav-item {
    position: relative;
    transition: opacity 0.4s ease;
}

.nav-item:hover {
    opacity: 1;
}

#cursor {
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

#cursor-follower {
    width: 40px;
    height: 40px;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

section {
    min-height: 100vh;
    padding: 10vw;
    display: flex;
    align-items: center;
}

.vertical {
    writing-mode: vertical-rl;
}

/* Custom Easing */
.ease-expo {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

#news {
    min-height: auto;
    background: transparent;
}

.news-item {
    transition: background 0.7s ease;
}

.news-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

.reveal-item {
    opacity: 0;
    filter: blur(20px);
    transform: translateY(40px) scale(0.95);
    transition:
        opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, filter, transform;
}

.reveal-item.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
}

/* ===== Hero Media Control ===== */
#hero {
    position: relative;
    height: 100vh;
}

.hero-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-video, .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15);
    will-change: transform, opacity, filter;
}

@media (min-width: 641px) {
    #hero {
        min-height: 60vh;
        padding: 0;
    }
}

#hero-logo-mark svg {
    width: 400px;  /* ここでお好みの横幅を指定 */
    height: auto;   /* 縦横比を維持 */
    max-width: 80vw; /* スマホで画面からはみ出さないように設定 */
}

/* ロゴとテキストのコンテナ */
#hero-logo-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* ロゴとテキストの間隔を広げて空気感を作る */
}

#hero-logo-mark svg path {
    fill: none; /* 塗りを消して線で見せる */
    stroke: #FFFFFF;
    stroke-width: 1px;
}

#hero-logo-text {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 300;
    font-size: 2rem !important; /* あえて極小にする */
    letter-spacing: 0.8em; /* 文字間を広げて優雅に */
    text-indent: 0.8em; /* センター合わせを維持 */
    opacity: 0.6;
    margin-top: -80px;
}

#hero-logo-text {
    font-family: 'Shippori Mincho', serif !important;
    font-weight: 300;
    font-size: 1.5rem !important; /* あえて小さくすることで品格を出します */
    letter-spacing: 0.4em;         /* 初期状態の文字間 */
    color: rgba(255, 255, 255, 0.7); /* 真白ではなく、少し透かすのがコツ */
    
    /* 初期状態：見えない状態 */
    opacity: 0;
    filter: blur(12px);            /* 霧の中に隠れているような強いぼかし */
    transform: translateY(15px);   /* 少し下から浮き上がる */
    
    margin-top: -80px;
    text-indent: 0.8em;            /* 中央揃えの時のバランス調整 */
    transition: letter-spacing 3s ease-out; /* 文字間が広がる余韻のため */
}

/* 縦書きの文字がスマホの画面高さを超えないように制限 */
@media (max-width: 768px) {
    .ph-title {
        /* スマホの画面内で収まる高さに制限（お好みで調整してください） */
        max-height: 40vh; 
        /* 文字の間隔をスマホ用に少し詰める */
        letter-spacing: 0.5em;
    }
    
    /* スマホ時は説明文が下からふわっと上がるように変更（JSと連動） */
    .ph-desc {
        margin-top: 2rem;
    }
}

/* 非常に小さい画面（iPhone SEなど）用の微調整 */
@media (max-width: 380px) {
    .ph-title {
        font-size: 1.5rem; /* 24px相当 */
        max-height: 35vh;
    }
}

#experience .relative {
    /* 必要に応じて角丸を追加（モダンな高級感） */
    border-radius: 2px; 
    /* 枠線で境界を微かに見せる（オプション） */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* モバイルで余白が狭くなりすぎないように調整 */
@media (max-width: 768px) {
    #experience {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* experienceセクション全体の初期状態 */
#experience .experience-container {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    filter: blur(10px);
    transition: filter 2s ease-out; /* ぼけが消える滑らかさ */
}

/* ぼけが消えた時のクラス */
#experience .experience-container.is-active {
    filter: blur(0);
}

/* タイトルの装飾 */
#experience .font-en {
    /* mix-blend-difference を使うと、背景が白なら黒、黒なら白に反転し、
       画像からはみ出しても視認性が保たれます */
    mix-blend-mode: difference;
    text-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* 説明文のテキスト調整（さらに繊細にする場合） */
#experience h2 {
    font-feature-settings: "palt"; /* 文字詰めを綺麗にする */
    word-break: break-all;
}

/* --- 修正後：初期状態の opacity や blur を CSS で固定しない --- */
#experience .experience-container {
    will-change: transform, opacity, filter;
}

/* タイトルが reveal-item の CSS（blur 20px）と競合しないよう調整 */
#experience .reveal-item {
    opacity: 1;
    filter: none;
    transform: none;
}

/* 文字の繊細な表現 */
#experience .font-light {
    font-weight: 300;
    /* 文字の輪郭をシャープに */
    -webkit-font-smoothing: antialiased;
}

/* 改行のリズムをスマホで最適化 */
@media (max-width: 767px) {
    #experience h2 {
        font-size: 11px;
        line-height: 2.8;
        letter-spacing: 0.25em;
    }
}

/* タイトルのブレンドモード（画像からはみ出しても見える魔法） */
#experience .mix-blend-difference {
    mix-blend-mode: difference;
    /* 背景が黒なら白、背景が白なら黒に反転 */
}

/* 通常の壺セクションをあえて少し沈ませる */
#vessels .reveal-item:not(.is-featured) {
    filter: saturate(0.2);
    opacity: 0.5;
    transition: all 1s ease;
}

/* 黄土壺側を強調 */
#vessels .is-featured {
    position: relative;
    z-index: 2;
}

/* 黄土壺の画像コンテナに微かな発光感を与える */
#vessels .is-featured .aspect-square {
    box-shadow: 0 0 40px rgba(255, 165, 0, 0.05); /* 非常に微かなオレンジの発光 */
    border-color: rgba(255, 255, 255, 0.2);
}

#vessels .is-featured h4 {
    color: #fff;
    font-weight: 500;
}

/* モバイルでの見せ方調整 */
@media (max-width: 768px) {
    #vessels .grid {
        gap: 80px;
    }
}

/* --- style.css --- */

:root {
    /* --deep を少しだけ明るく、植物の気配を感じる色に */
    --deep: #1b2623; 
    --base: #F9F8F6;
    --text-color: #F9F8F6;
    --bg-luminance: 1.0; /* 初期値を100%に */
}

body {
    background-color: #1b2623; /* 完全な黒から、深い常盤色のような色へ */
    color: var(--text-color);
    /* ...既存のコード... */
}

#global-bg-image {
    /* ...既存のコード... */
    opacity: 0.6; /* 0.4から0.6に上げ、背景のテクスチャを見せる */
    filter: grayscale(0.2) brightness(var(--bg-luminance)); /* グレースケールを弱める */
}

/* ヒーローセクションのオーバーレイを薄くする */
.hero-media .absolute {
    background: rgba(0, 0, 0, 0.2); /* 20%くらいが程よいです */
}

/* Experienceセクションの画像の暗さを緩和 */
#experience img {
    filter: grayscale(0.3) brightness(0.5); /* 0.35から0.5へ */
}

/* --- style.css --- */

#global-bg-image {
    /* ...既存のプロパティ... */
    will-change: filter;
    /* JSの変化を0.8秒程度のラグで受け取ることで、さらに滑らかに */
    transition: filter 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Hamburger Trigger --- */
#menu-trigger.is-active .line:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
}
#menu-trigger.is-active .line:nth-child(2) {
    width: 8px;
    transform: translateY(-4.5px) rotate(-45deg);
}

/* --- Full Screen Menu --- */
#full-menu.is-open {
    visibility: visible;
    opacity: 1;
}

.menu-link {
    perspective: 1000px;
    overflow: hidden;
}

.menu-link span {
    display: block;
    will-change: transform, filter;
}

/* リンクホバー時の繊細な演出 */
.menu-link:hover span:nth-child(2) {
    letter-spacing: 0.3em;
    opacity: 0.8;
}

.menu-footer {
    /* メニュー全体の高さを考慮し、スマホでも見切れないように調整 */
    margin-top: auto;
    padding-bottom: 3rem;
    will-change: opacity, transform;
}

.menu-footer-item {
    font-feature-settings: "palt";
}

@media (max-width: 768px) {
    .menu-footer {
        align-items: center;
        text-align: center;
        gap: 3rem;
    }
    .menu-footer-item {
        align-items: center;
    }
}

/* style.css に追記または修正 */
#full-menu {
    z-index: 150; /* ヘッダー(200)より下、メインコンテンツ(10)より上 */
    pointer-events: none; /* 閉じている時はクリックを無効化 */
    transition: visibility 0.8s;
}

#full-menu.is-open {
    pointer-events: auto; /* 開いている時はクリックを有効化 */
}

/* ナビゲーション全体の重なりを制御 */
#full-menu {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* テキストが消えないように調整 */
.menu-link span {
    display: block;
    line-height: 1.2;
    overflow: hidden; /* 子要素がはみ出さないように */
}

/* メニューフッターのスマホ調整 */
@media (max-width: 768px) {
    .menu-footer {
        padding-bottom: 5rem;
        align-items: center;
        text-align: center;
    }
    .menu-footer-item {
        align-items: center;
    }
}

/* フッターリンクのホバーアニメーション */
footer a {
    transition: all 0.5s var(--ease-expo);
}

/* モバイルでのレイアウト調整 */
@media (max-width: 768px) {
    #footer .grid {
        text-align: center;
    }
    #footer .flex {
        justify-content: center;
    }
    #footer .items-end {
        align-items: center;
    }
}

/* お知らせ開閉と表示演出 */
.news-item { border-top: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: background 0.7s ease; }
.news-item:hover { background: rgba(255,255,255,0.02); }
.detail-wrapper { max-height: 0; opacity: 0; overflow: hidden; transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); }
.news-item.is-active .detail-wrapper { max-height: 2500px; opacity: 1; padding-top: 2.5rem; padding-bottom: 2rem; }
.journal-image-container { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(255,255,255,0.03); margin-bottom: 2rem; }
.journal-image-container img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.8); transition: all 1s ease; }
.news-item.is-active .journal-image-container img { filter: grayscale(0) brightness(1); transform: scale(1.05); }

/* カレンダーのダークモード化 */
.calendar-embed-container { opacity: 0.7; transition: opacity 0.8s ease; }
.calendar-embed-container iframe { 
    width: 100%; min-height: 450px; border: 1px solid rgba(255,255,255,0.1);
    filter: invert(92%) hue-rotate(180deg) brightness(0.8) contrast(0.9);
}
.toggle-icon { transition: transform 0.8s ease; }
.news-item.is-active .toggle-icon { transform: rotate(45deg); opacity: 0.5; }

/* モバイルでは要素の間隔を少し詰め、中央揃えを強調 */
@media (max-width: 767px) {
    #footer {
        padding-top: 60px; /* 上部パディングを抑える */
        text-align: center;
    }
    
    #footer .reveal-item {
        width: 100% !important; /* モバイルでは全幅 */
        margin-bottom: 3rem; /* セクション間の余白 */
    }

    #footer .reveal-item:last-child {
        margin-bottom: 0;
    }

    #footer ul {
        justify-content: center; /* ナビゲーションを中央に */
    }
}

/* コピーライト部分のレスポンシブ */
.footer-copy-wrap {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-copy-wrap {
        flex-direction: row;
        text-align: left;
    }
}