@charset "UTF-8";

/* ==========================================================================
   1. Base & Reset
   ========================================================================== */
body {
    margin: 0;
    overflow-x: hidden;
    background: #f0f0f0;
    color: #1a1a1a;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    transition: background 0.3s, opacity 0.5s;
    -webkit-font-smoothing: antialiased;
}

canvas {
    display: block; cursor: pointer; touch-action: none; outline: none;
    position: fixed; top: 0; left: 0; z-index: 0;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { list-style: none; padding: 0; margin: 0; }

.pc-br { display: block; content: ""; margin: 0; }
.sp-br { display: none; }

body.lang-en .ja-text { display: none; }
body.lang-ja .en-text { display: none; }


/* ==========================================================================
   2. Common UI Components (Header, Nav, Buttons)
   ========================================================================== */

/* 左上：ロゴ */
.header-logo {
    position: fixed; top: 40px; left: 40px; z-index: 3000;
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-weight: 800; font-size: 24px; line-height: 0.95; letter-spacing: -0.03em;
    color: #1a1a1a; text-decoration: none; 
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
    opacity: 1; visibility: visible;
}
.header-logo:hover { opacity: 0.6; }

.header-logo.is-hidden {
    opacity: 0; visibility: hidden; pointer-events: none;
}

/* 右上：ナビゲーション ＆ 言語切り替えコンテナ */
.header-right {
    position: fixed; top: 40px; right: 40px; z-index: 3000;
    display: flex; align-items: center; gap: 30px; 
}

.site-nav { display: flex; gap: 20px; }

.nav-link {
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    color: #aaa; text-decoration: none;
    transition: color 0.3s;
    text-transform: uppercase;
}
.nav-link:hover, .nav-link.current { color: #1a1a1a; }

.lang-switch, #lang-toggle {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    color: #aaa; cursor: pointer; user-select: none; margin: 0;
    display: flex; gap: 8px;
}
.lang-switch span, #lang-toggle span { transition: color 0.3s; }
.lang-switch span.active, #lang-toggle span.active { color: #1a1a1a; border-bottom: 1px solid #1a1a1a; }
.lang-switch:hover span, #lang-toggle:hover span { color: #555; }

/* 言語切り替えボタン固定 */
#lang-toggle {
    position: fixed;
    top: 40px;
    right: 40px;
    z-index: 3000;
}

/* View Button */
#view-btn {
    position: fixed; bottom: 60px; right: 40px;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.8); color: #1a1a1a; 
    cursor: pointer; z-index: 2500; pointer-events: auto; 
    transition: all 0.3s ease;
    display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#view-btn:hover { transform: scale(1.05); background: #fff; }
#view-btn svg { 
    width: 28px; height: 28px; fill: currentColor; position: absolute; 
    top: 50%; left: 50%; margin-top: -14px; margin-left: -14px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
}
#view-btn.state-view .icon-eye { opacity: 1; transform: rotate(0deg) scale(1); }
#view-btn.state-view .icon-close { opacity: 0; transform: rotate(-90deg) scale(0.5); }
#view-btn.state-back .icon-eye { opacity: 0; transform: rotate(90deg) scale(0.5); }
#view-btn.state-back .icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Footer Elements (Copyright) */
#copyright {
    position: fixed; 
    bottom: 20px; right: 40px;
    font-size: 10px; color: #888; 
    pointer-events: none; user-select: none;
    letter-spacing: 0.05em; 
    transition: opacity 0.5s ease; opacity: 1; 
    z-index: 100;
}

#guide {
    position: absolute; bottom: 45px; width: 100%;
    text-align: center; color: #333; font-size: 16px; font-weight: 500;
    pointer-events: none; user-select: none; letter-spacing: 0.1em;
    text-transform: uppercase; transition: opacity 0.5s; z-index: 5;
}

.close-btn-pc { cursor: pointer; font-size: 28px; line-height: 0.8; transition: transform 0.3s; padding: 5px; }
.close-btn-pc:hover { transform: rotate(90deg); }
.mobile-close-btn { display: none; }


/* ==========================================================================
   3. Title Styles (Index)
   ========================================================================== */
#title-container {
    position: absolute; top: 0; left: 0; padding: 40px;
    z-index: 10; cursor: pointer; pointer-events: auto;
    display: flex; flex-direction: column; align-items: flex-start;
    transition: opacity 0.3s;
}
#title-container:hover { opacity: 0.6; }
.title-wrapper { position: relative; }
.title-el {
    position: absolute; top: 0; left: 0;
    font-weight: 800; line-height: 0.95; letter-spacing: -0.03em;
    color: #000; white-space: nowrap; opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.title-el.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

#title-main { 
    font-size: clamp(60px, 8vw, 120px);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.03em;
}

#title-concept {
    font-size: clamp(24px, 4vw, 50px);
    display: flex; flex-direction: column; justify-content: center;
}
.title-sub {
    display: block; margin-top: 12px;
    font-size: 0.35em; font-weight: 600; letter-spacing: 0.05em; color: #333;
    text-transform: uppercase; line-height: 1.5;
}


/* ==========================================================================
   4. Overlay Styles & Others
   ========================================================================== */
.overlay-section {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(250, 250, 250, 0.96);
    backdrop-filter: blur(20px);
    z-index: 2000; display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.overlay-section.active { opacity: 1; pointer-events: auto; }

.overlay-content {
    width: 85%; max-width: 680px; height: 85vh;
    display: flex; flex-direction: column;
    opacity: 0; transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
}
.overlay-section.active .overlay-content { opacity: 1; transform: translateY(0); }

.overlay-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 20px; border-bottom: 2px solid #1a1a1a; padding-bottom: 15px;
    flex-shrink: 0;
}

.overlay-title { 
    font-family: "Helvetica Neue", Arial, sans-serif;
    font-size: 40px; font-weight: 800; letter-spacing: 0.02em; 
    margin: 0; line-height: 1.0; color: #1a1a1a; text-transform: uppercase;
}

.overlay-scroll-area {
    flex: 1; overflow-y: auto; padding-right: 15px; padding-bottom: 60px;
    scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth;
}
.overlay-scroll-area::-webkit-scrollbar { display: none; }

/* Contact Specifics */
.contact-intro { font-size: 15px; line-height: 2.0; color: #444; margin-bottom: 50px; font-feature-settings: "palt"; }
.contact-block { margin-bottom: 40px; }
.contact-label { display: block; font-size: 12px; font-weight: 700; color: #999; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 15px; }
.contact-link { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; color: #1a1a1a; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 5px; transition: color 0.3s, border-color 0.3s; margin-right: 30px; margin-bottom: 15px; }
.contact-link:hover { color: #666; border-bottom-color: #666; }
.contact-link svg.link-icon { width: 24px; height: 24px; fill: currentColor; }
.email-link { font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: 0.02em; }
.arrow-icon { width: 14px; height: 14px; margin-left: 5px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; }

/* News Overlay Specifics */
.news-link-wrapper {
    display: block; text-decoration: none; color: inherit;
    transition: background-color 0.3s;
    border-bottom: 1px solid #ccc;
    padding: 30px 0;
}
.news-link-wrapper:hover { background-color: rgba(0,0,0,0.03); }

.news-item { padding: 0 10px; }
.news-meta { display: flex; align-items: baseline; gap: 15px; margin-bottom: 8px; }
.news-date { font-family: monospace; font-size: 13px; font-weight: bold; color: #1a1a1a; }
.news-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.news-desc { font-size: 14px; color: #555; line-height: 1.8; margin-top: 5px; }
.read-more {
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; margin-top: 15px;
    text-align: right; color: #1a1a1a; opacity: 0.6;
    display: flex; justify-content: flex-end; align-items: center; gap: 5px;
    transition: opacity 0.3s, transform 0.3s;
}
.news-link-wrapper:hover .read-more { opacity: 1.0; transform: translateX(5px); }


/* ==========================================================================
   Mobile Responsive
   ========================================================================== */
@media (max-width: 768px) {
    .header-right { 
        top: 25px; right: 20px; gap: 15px; 
        justify-content: flex-end;
    }
    
    .header-logo { 
        top: 60px; left: 20px; font-size: 20px; 
    }
    
    #lang-toggle {
        top: 25px;
        right: 20px;
    }
    
    .site-nav { gap: 12px; }
    .nav-link { font-size: 11px; }
    .lang-switch, #lang-toggle { font-size: 11px; }
    
    #title-container { padding: 20px; }
    .title-el { top: 40px; left: 20px; }
    
    #title-main { font-size: 60px; }
    #title-concept { font-size: 40px; }
    
    #view-btn { bottom: 90px; right: 30px; width: 60px; height: 60px; }
    #view-btn svg { width: 32px; height: 32px; }
    
    .contact-link { font-size: 18px; display: flex; width: 100%; justify-content: flex-start; border-bottom: 1px solid #eee; padding: 15px 0; margin: 0; }
    .contact-link .arrow-icon { margin-left: auto; }
    
    .close-btn-pc { display: none; }
    .mobile-close-btn { 
        display: flex; position: absolute; bottom: 90px; right: 30px; 
        width: 60px; height: 60px; background: #fff; border: 2px solid #1a1a1a; border-radius: 50%;
        justify-content: center; align-items: center; z-index: 30; cursor: pointer;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .mobile-close-btn svg { width: 32px; height: 32px; fill: #1a1a1a; }
    
    .nav-links-wrapper { flex-direction: column-reverse; gap: 30px; }
    .pc-br { display: none; }
    .sp-br { display: block; content: ""; margin: 0; }

    #contact-overlay {
        top: 100px !important;
        height: calc(100vh - 100px) !important;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.15);
        border-radius: 0 !important;
        background: #fff;
        border-top: 1px solid #eee;
    }

    #contact-overlay .overlay-header {
        padding-top: 40px;
        padding-bottom: 20px;
        margin-bottom: 30px;
        border-bottom-width: 1px;
    }

    /* ★追加: スマホ版のCopyrightを下に寄せる */
    #copyright {
        bottom: 5px; /* 元の20pxから5pxへ変更 */
        right: 20px; /* 右余白も調整 */
        font-size: 9px; /* フォントサイズも少し小さく */
    }
}