/* =================================================================
   T-Komore Nest - Natural Modern Theme (Ecru & Dark Brown)
   Final Unified CSS Code (Font: Noto Sans JP)
   ================================================================= */

/* --- 0. Google Fonts Import --- */
/* M PLUS Rounded 1c を削除し、Noto Sans JP を読み込みます */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');

/* --- 1. Root & Variables --- */
:root {
    /* ▼▼ 配色（変更なし） ▼▼ */
    --bg-main: #F2F0EB;          /* ベース：エクリュ（生成り色） */
    --text-main: #3B332E;        /* メイン文字：温かみのある焦げ茶 */
    --text-gold-base: #9C8C74;   /* アクセント：落ち着いたアンティークゴールド */
    --text-sub: #756D63;         /* サブ文字：グレージュ */
    --line-color: #D6D0C5;       /* 線：薄いベージュ */

    /* ▼▼ フォント設定（すべて Noto Sans JP に統一） ▼▼ */
    
    /* 見出し用 英数字 */
    --font-head-en: 'Noto Sans JP', sans-serif;
    
    /* 見出し用 日本語 */
    --font-head-jp: 'Noto Sans JP', sans-serif;
    
    /* 本文用 */
    --font-body: 'Noto Sans JP', sans-serif;

    /* イージング */
    --easing: cubic-bezier(0.19, 1, 0.22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis { height: auto; }

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-body);
    font-weight: 400;
    overflow-x: hidden;
    opacity: 0;
    transition: opacity 1s ease;
    position: relative;
}

/* 背景の木目テクスチャ */
body::before {
    content: '';
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2074&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    opacity: 0.08; 
    mix-blend-mode: multiply;
    filter: sepia(0.3) contrast(0.8);
    z-index: -2;
    pointer-events: none;
}

body.loaded { opacity: 1; }
img { display: block; width: 100%; height: auto; object-fit: cover; }
a { text-decoration: none; color: inherit; cursor: pointer;}
li { list-style: none; }

/* --- Utilities --- */
.serif-en { 
    font-family: var(--font-head-en); 
    letter-spacing: 0.05em; 
    color: var(--text-gold-base); 
    font-weight: 700;
}
.serif-jp { 
    font-family: var(--font-head-jp); 
    font-weight: 800; 
}
.container { width: 85%; max-width: 1400px; margin: 0 auto; position: relative; z-index: 10; }
.section-padding { padding: 180px 0; }

.sec-header { margin-bottom: 100px; padding-left: 5%; border-left: 1px solid var(--text-gold-base); }
.sec-title-en { 
    display: block; font-size: 0.85rem; margin-bottom: 20px; color: var(--text-gold-base); letter-spacing: 0.2em; text-transform: uppercase;
    font-family: var(--font-head-en); 
    font-weight: 700;
}
.sec-title-jp { 
    font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; 
    line-height: 1.3; color: var(--text-main); 
    font-family: var(--font-head-jp);
}

/* --- Header & Menu --- */
header {
    position: fixed; top: 0; left: 0; width: 100%;
    padding: 30px 60px; z-index: 200;
    display: flex; justify-content: space-between; align-items: center;
    mix-blend-mode: difference !important;
    color: #ffffff !important;
}

.logo { 
    font-family: var(--font-head-en); 
    font-weight: 800;
    font-size: 1.4rem; letter-spacing: 0.1em; 
}

.menu-btn { 
    font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; 
    position: relative; z-index: 201; 
    color: inherit !important;
    font-family: var(--font-head-en);
    font-weight: 700;
}

.nav-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(59, 51, 46, 0.98); 
    backdrop-filter: blur(10px);
    z-index: 150;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.6s var(--easing);
}
.nav-overlay.active { opacity: 1; pointer-events: auto; }

.nav-list { text-align: center; }
.nav-item { margin: 20px 0; overflow: hidden; }
.nav-link { 
    display: block; font-size: 3rem; 
    font-family: var(--font-head-en); 
    font-weight: 700;
    color: #F2F0EB; 
    transform: translateY(100%); transition: transform 0.8s var(--easing);
}
.nav-overlay.active .nav-link { transform: translateY(0); }
.nav-link:hover { color: var(--text-gold-base); }

/* --- Hero --- */
.hero { 
    height: 100vh; width: 100%; position: relative; overflow: hidden; 
    background-color: var(--bg-main);
    z-index: 10;
}

#komorebi-canvas {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; pointer-events: none;
    mix-blend-mode: multiply; 
    filter: blur(40px);
    opacity: 0.15;
}

.hero-content-layer {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 4; text-align: center; width: 100%;
}

.hero-title {
    font-family: var(--font-head-en); 
    font-weight: 800;
    font-size: clamp(4rem, 11vw, 9rem);
    line-height: 1.1; margin-bottom: 20px; white-space: nowrap;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: 
        0 0 30px rgba(255, 255, 255, 0.8),
        0 0 10px rgba(255, 255, 255, 0.5);
}

.hero-sub {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    letter-spacing: 0.15em; 
    font-family: var(--font-head-jp);
    font-weight: 700;
    margin-bottom: 30px; margin-top: 10px;
    color: var(--text-main);
    opacity: 0.9;
    text-shadow: 
        0 0 15px rgba(242, 240, 235, 1),
        0 0 5px rgba(242, 240, 235, 0.8);
}

.hero-date {
    font-family: var(--font-head-en);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.25em; 
    margin-top: 10px; display: inline-block;
    background: linear-gradient(to right, #8E7958, #B8A682, #8E7958);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));
    text-shadow: none;
    opacity: 0; animation: fadeInUp 1.5s ease 1s forwards;
}

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Hero Footer */
.hero-footer {
    position: absolute; bottom: 5vh; left: 0; width: 100%; z-index: 100;
    display: flex; justify-content: center; gap: 6vw; padding: 0 5%; pointer-events: none;
}
.hf-item {
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    position: relative; padding: 20px 10px; opacity: 1;
}
.hf-item::before {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    border-radius: 50%; z-index: -1; pointer-events: none;
}
.hf-num {
    font-family: var(--font-head-en); 
    font-weight: 700;
    font-size: 1.8rem; letter-spacing: 0.05em; line-height: 1;
    background: linear-gradient(to bottom, #9C8C74 10%, #6E6050 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hf-line {
    width: 2px; height: 50px;
    background: linear-gradient(to bottom, var(--text-gold-base), rgba(214, 208, 197, 0.1));
}
.hf-text {
    writing-mode: vertical-rl; text-orientation: upright;
    font-size: 1rem; letter-spacing: 0.35em; 
    font-family: var(--font-head-jp);
    font-weight: 800;
    color: var(--text-main);
    text-shadow: none;
}

/* --- News --- */
.news { 
    padding: 120px 0; position: relative; z-index: 10;
    background: rgba(242, 240, 235, 0.6);
    backdrop-filter: blur(8px);
}
.news-list { border-top: 1px solid var(--line-color); }
.news-item {
    display: block; padding: 35px 0; border-bottom: 1px solid var(--line-color);
    transition: background 0.4s ease;
}
.news-item:hover { background: transparent !important; }

.news-link { 
    display: flex; align-items: center; width: 100%; 
    pointer-events: none; cursor: default;
}
.news-meta { width: 200px; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.news-date { 
    font-family: var(--font-head-en); 
    font-weight: 700;
    color: var(--text-gold-base); 
}
.news-tag { 
    font-size: 0.7rem; border: 1px solid var(--line-color); padding: 5px 15px; color: var(--text-sub); 
    font-family: var(--font-body); font-weight: 700; 
}
.news-title { 
    flex-grow: 1; font-size: 1rem; 
    font-family: var(--font-head-jp); 
    font-weight: 700;
    color: var(--text-main) !important; 
    transition: none; 
}
.news-arrow { display: none !important; }

/* --- Concept --- */
.concept { position: relative; overflow: hidden; }
.concept .floating-wood { display: none !important; }

.concept-inner { display: flex; justify-content: space-between; align-items: flex-start; min-height: 100vh; }
.concept-img-wrapper { width: 50%; height: 80vh; overflow: hidden; position: relative; z-index: 1; }
.js-parallax-img { width: 100%; height: 120%; object-fit: cover; }
.concept-content-wrap { width: 40%; padding-right: 2%; position: relative; z-index: 2; padding-top: 10vh; }
.concept-text { margin-top: 60px; line-height: 2.4; color: var(--text-sub); text-align: justify; font-weight: 400; }
.concept-text strong { 
    color: var(--text-main); 
    font-family: var(--font-head-jp);
    font-weight: 800;
    border-bottom: 1px solid var(--text-gold-base); 
}

/* --- Horizontal Gallery --- */
.h-gallery { 
    overflow: hidden; padding: 150px 0; 
    background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2074&auto=format&fit=crop');
    background-attachment: fixed; background-size: cover; position: relative;
}
.h-gallery::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(59, 51, 46, 0.92); }
.h-gallery-track { display: flex; gap: 80px; padding-left: 10vw; width: fit-content; will-change: transform; position: relative; z-index: 2; }
.h-gallery-item { flex: 0 0 50vw; height: 60vh; position: relative; overflow: hidden; }
.h-gallery-img { width: 100%; height: 100%; transition: transform 1.2s var(--easing); filter: brightness(0.9) sepia(0.1); }
.h-gallery-item:hover .h-gallery-img { transform: scale(1.08); }
.h-item-meta { position: absolute; bottom: 40px; left: 40px; z-index: 2; }
.h-item-num { 
    font-size: 3rem; 
    font-family: var(--font-head-en); 
    font-weight: 700;
    display: block; line-height: 1; margin-bottom: 15px; color: var(--text-gold-base); opacity: 0.5; 
}
.h-item-name { 
    font-size: 1.4rem; 
    font-family: var(--font-head-en); 
    font-weight: 700;
    letter-spacing: 0.15em; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); 
}

/* --- Features --- */
.features { padding: 150px 0 200px; position: relative; }
.f-accordion {
    display: flex; width: 100%; height: 80vh; overflow: hidden; 
    border-top: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color);
}
.f-item {
    flex: 1; position: relative; border-right: 1px solid var(--line-color);
    transition: flex 1s var(--easing); cursor: crosshair; overflow: hidden; background: #F2F0EB;
}
.f-item:last-child { border-right: none; }
.f-item:hover { flex: 3; }

.f-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; 
    filter: grayscale(100%) brightness(0.9);
    transition: transform 1.2s var(--easing), filter 0.8s ease;
}
.f-item:hover .f-bg { filter: grayscale(0%) brightness(1); transform: scale(1.05); }
.f-content {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 50px; color: #fff; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(59,51,46,0.9) 0%, transparent 100%);
    opacity: 0; transform: translateY(30px); transition: all 0.6s var(--easing);
}
.f-item:hover .f-content { opacity: 1; transform: translateY(0); }
.f-label {
    position: absolute; top: 50px; left: 50%; transform: translateX(-50%);
    writing-mode: vertical-rl; text-orientation: mixed;
    font-family: var(--font-head-en); 
    font-weight: 700;
    letter-spacing: 0.3em; font-size: 0.85rem; color: var(--text-main); transition: opacity 0.4s;
}
.f-item:hover .f-label { opacity: 0; }
.f-title-en { 
    font-size: 2.2rem; display: block; margin-bottom: 15px; color: var(--text-gold-base);
    font-family: var(--font-head-en); 
    font-weight: 700;
}
.f-title-jp { 
    font-size: 1rem; opacity: 0.9; 
    font-family: var(--font-head-jp); 
    font-weight: 700;
    color: #fff; /* Featuresの日本語タイトルを白に */
}

/* --- Access (Dark Inverted Version) --- */
.access { 
    padding: 120px 0; position: relative; z-index: 10;
    /* ▼ 背景を濃い茶色に変更（反転） */
    background: var(--text-main);
    color: var(--bg-main);
}

.access-content { display: flex; flex-wrap: wrap; gap: 60px; justify-content: space-between; }

/* アクセスセクションのH2（.sec-title-jp）を白にする */
.access h2 { color: #fff; }
.access .sec-title-jp { color: #fff; }

.access-map-box { 
    flex: 1 1 500px; height: 450px; 
    /* ▼ ボーダーを削除 */
    border: none !important; 
    /* ▼ フィルターをリセット */
    filter: none !important; 
    position: relative; overflow: hidden; 
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
.access-map-box iframe { 
    width: 100%; height: 100%; border: none; 
    /* ▼ Google Mapの場合、暗い背景で浮かないように調整 */
    filter: grayscale(100%) invert(90%) contrast(0.8);
    mix-blend-mode: normal;
}

.access-info { flex: 1 1 400px; padding-top: 20px; }
.access-row { margin-bottom: 40px; border-left: 2px solid var(--text-gold-base); padding-left: 25px; }

.access-label { 
    display: block; 
    font-family: var(--font-head-en); 
    font-weight: 700;
    color: var(--text-gold-base); font-size: 0.9rem; margin-bottom: 10px; letter-spacing: 0.1em; 
}

.access-text { 
    font-family: var(--font-body); 
    line-height: 2; 
    /* ▼ 文字色を背景色（エクリュ）に変更 */
    color: var(--bg-main); 
    font-size: 1rem; 
    font-weight: 500;
}

.access-sub { 
    display: block; font-size: 0.85rem; 
    /* ▼ サブテキストを薄いベージュに変更して視認性を確保 */
    color: var(--line-color); 
    margin-top: 5px; font-weight: 400; 
}

/* SVG Map (Dark Theme用調整) */
.access-svg-container {
    width: 100%; height: 100%;
    background-color: transparent !important;
    display: flex; justify-content: center; align-items: center; overflow: hidden;
    opacity: 1 !important; filter: none !important; transition: none !important; cursor: default !important;
}
.access-svg-map {
    width: 100%; height: auto; max-height: 100%;
    /* ▼ 地図の塗りを「背景より少し明るい茶色」に変更 */
    fill: #4b423d; 
    /* ▼ 地図の線をゴールドに変更 */
    stroke: var(--text-gold-base); 
    stroke-width: 0.5;
    opacity: 1 !important; filter: none !important; transition: none !important; transform: none !important;
}

/* 波紋アニメーション */
.ripple-circle {
    fill: none; stroke: #A63737; stroke-width: 2; opacity: 0;
    transform-origin: center; animation: ripple-anim 4s infinite ease-out;
}
.ripple-circle:nth-child(1) { animation-delay: 0s; }
.ripple-circle:nth-child(2) { animation-delay: 1.3s; }
.ripple-circle:nth-child(3) { animation-delay: 2.6s; }
@keyframes ripple-anim {
    0% { r: 0; opacity: 0.8; stroke-width: 3px; }
    100% { r: 80px; opacity: 0; stroke-width: 0px; }
}

/* --- Footer --- */
footer { 
    padding: 120px 0 60px; text-align: center; 
    border-top: 1px solid var(--line-color); 
    position: relative; z-index: 10;
}
.footer-msg { 
    font-size: clamp(2.5rem, 6vw, 5rem); margin-bottom: 80px; line-height: 1.4; color: var(--text-main); 
    font-family: var(--font-head-jp);
    font-weight: 800;
}
.cta-wrapper { margin-bottom: 150px; }

.cta-btn {
    display: inline-block; padding: 25px 80px;
    border: 1px solid var(--text-main); 
    color: var(--text-main); 
    background: transparent;
    font-family: var(--font-head-en); 
    font-weight: 700;
    letter-spacing: 0.1em; font-size: 0.9rem;
    transition: all 0.6s var(--easing); position: relative; overflow: hidden;
}
.cta-btn:hover { 
    background: var(--text-main); 
    color: var(--bg-main); 
    box-shadow: 0 0 20px rgba(59, 51, 46, 0.2); 
}
.footer-info { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 80px; border-top: 1px solid var(--line-color); width: 90%; margin: 0 auto; color: var(--text-sub); }

/* --- Mobile Responsive --- */
@media (max-width: 768px) {
    header { padding: 20px; }
    
    .hero-title { font-size: 3.5rem; white-space: normal; }
    .hero-date { font-size: 1.3rem; }
    .hero-sub { font-size: 1.1rem; letter-spacing: 0.12em; text-shadow: 0 0 10px rgba(242, 240, 235, 1); }
    .hero-footer { bottom: 8vh; gap: 15px; justify-content: space-evenly; }
    .hero-content-layer { top: 40%; }
    
    .hf-item::before { width: 90px; height: 90px; background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 65%); }
    .hf-item { padding: 10px 5px; gap: 10px; }
    .hf-num { font-size: 1.3rem; }
    .hf-line { height: 30px; width: 1px; }
    .hf-text { font-size: 0.85rem; letter-spacing: 0.25em; }

    .news-link { flex-direction: column; align-items: flex-start; }
    .news-meta { width: 100%; margin-bottom: 10px; }

    .concept-inner { flex-direction: column; padding-top: 50px; }
    .concept-img-wrapper { width: 100%; height: 50vh; margin-bottom: 40px; }
    .concept-content-wrap { width: 100%; padding: 0; }
    
    .h-gallery-item { flex: 0 0 85vw; height: 50vh; }
    
    .f-accordion { display: block; height: auto; }
    .f-item { 
        width: 100%; height: 60vh;
        border-right: none; border-bottom: 1px solid var(--line-color);
        margin-bottom: 0;
    }
    .f-bg { filter: grayscale(0%) brightness(1); }
    .f-content { opacity: 1; transform: translateY(0); padding: 30px; background: linear-gradient(to top, rgba(59,51,46,0.9) 0%, transparent 100%); }
    .f-label { display: none; }
    
    .wood-1, .wood-2 { display: none; }
    
    .access-map-box { height: 300px; flex: 1 1 100%; }
    .access-info { padding-left: 0; }
    
    .cta-wrapper { margin-bottom: 100px; }
    .footer-info { flex-direction: column; align-items: center; gap: 20px; text-align: center; }
}

.f-title-jp {color:#000;}

        .h-gallery {
            position: relative;
            width: 100%;
            height: auto; /* 高さは中身なりに */
            padding: 120px 0; /* 上下の余白 */
            background-color: #fcfbf7; /* 背景色 */
            overflow: visible;
        }

        .gallery-grid {
            display: grid;
            grid-template-columns: 1fr 1fr; /* PC: 2列 */
            gap: 80px 50px; /* 縦80px, 横50pxの余白 */
            width: 100%;
            max-width: 1100px; /* 横幅を広げすぎない */
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 個別のカードアイテム */
        .gallery-item {
            display: flex;
            flex-direction: column;
            /* 初期状態はJSで制御（opacity:0など） */
        }

        /* 画像エリア */
        .g-img-box {
            width: 100%;
            aspect-ratio: 4 / 3; /* 4:3の落ち着いた比率 */
            background-color: #e0e0e0;
            margin-bottom: 25px;
            overflow: hidden;
            position: relative;
        }

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

        /* ホバーエフェクト */
        @media (hover: hover) {
            .g-img-box:hover .g-img {
                transform: scale(1.05);
            }
        }

        /* テキスト情報エリア */
        .g-meta {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        /* 番号 */
        .g-num {
            font-family: 'Cinzel', serif;
            font-size: 2.5rem;
            color: #d0d0d0; /* 主張しすぎないグレー */
            line-height: 1;
        }

        .g-text-wrap {
            padding-top: 6px;
        }

        /* 英語タイトル */
        .g-name {
            display: block;
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            letter-spacing: 0.05em;
            color: #333;
            margin-bottom: 8px;
        }

        /* 日本語説明 */
        .g-desc {
            font-size: 0.9rem;
            color: #777;
            margin: 0;
            line-height: 1.7;
            font-family: 'Shippori Mincho', serif;
        }

        /* スマホ対応 (1列にする) */
        @media (max-width: 768px) {
            .h-gallery {
                padding: 60px 0;
            }
            .gallery-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }
            .g-img-box {
                aspect-ratio: 3 / 2;
            }
        }

.g-name {
    color: #fff!important;
}