@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;700&family=DotGothic16&family=Zen+Kaku+Gothic+Antique:wght@400;900&family=Zen+Old+Mincho:wght@400;900&family=Kosugi+Maru&family=Noto+Serif+JP:wght@400;900&family=Hachi+Maru+Pop&family=Zen+Kurenaido&family=New+Tegomin&family=Noto+Sans+Anatolian+Hieroglyphs&display=swap');

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --deep-rose: #b00e2f;
    --line-color: #e0e0e0;
    --font-main: 'Kaisei Opti', serif;
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    margin: 0;
    line-height: 1.8;
    letter-spacing: 0.1em;
}

/* フォントループ用 */
.f0 { font-family: 'Kaisei Opti', serif !important; }
.f1 { font-family: 'DotGothic16', sans-serif !important; }
.f2 { font-family: 'Zen Kaku Gothic Antique', sans-serif !important; }
.f3 { font-family: 'Zen Old Mincho', serif !important; }
.f4 { font-family: 'Kosugi Maru', sans-serif !important; }
.f5 { font-family: 'Noto Serif JP', serif !important; }
.f6 { font-family: 'Hachi Maru Pop', cursive !important; }
.f7 { font-family: 'Zen Kurenaido', sans-serif !important; }
.f8 { font-family: 'New Tegomin', serif !important; }
.f9 { font-family: 'Noto Sans Anatolian Hieroglyphs', sans-serif !important; }

.container {
    max-width: 1100px; 
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    padding-top: 0; 
}

header {
    position: fixed;
    top: 0; width: 100%;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    padding: 25px 0;
    border-bottom: 1px solid var(--line-color);
}

.header-top { text-align: center; font-size: 2.2rem; font-weight: 700; letter-spacing: 0.25em; }
.header-nav ul { display: flex; justify-content: center; gap: 40px; list-style: none; padding: 0; margin: 15px 0 0 0; }
.header-nav a { color: var(--text-color); text-decoration: none; font-size: 0.85rem; }

.nav-open-btn { display: none; }

.fv {
    width: 100%;
    height: 60vh;
    overflow: hidden;
    position: relative;
    margin-top: 110px;
    border-bottom: 1px solid var(--line-color);
}
.slider-track { display: flex; animation: scrollInfinite 45s linear infinite; }
.slider-track img { height: 60vh; aspect-ratio: 1/1; object-fit: cover; }
@keyframes scrollInfinite { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.section-title {
    font-size: 1.5rem; color: var(--deep-rose); letter-spacing: 0.4em;
    margin-bottom: 50px; text-align: center; position: relative; text-transform: uppercase;
}
section { margin-bottom: 80px; }
.section-title::before, .section-title::after {
    content: ''; position: absolute; top: 50%; width: 60px; height: 1px; background-color: var(--line-color);
}
.section-title::before { left: calc(50% - 180px); }
.section-title::after { right: calc(50% - 220px); }

/* ギャラリーグリッド：全画像を正方形に強制 */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px;}
.gallery-grid img { 
    width: 100%; 
    aspect-ratio: 1 / 1 !important; 
    object-fit: cover !important; 
    display: block; 
}

.center-btn { text-align: center; margin-top: 30px; }
.btn { display: inline-block; padding: 15px 50px; border: 1px solid var(--text-color); color: var(--text-color); text-decoration: none; font-size: 0.8rem; transition: 0.3s; background: none; cursor: pointer; }

.member-container { max-width: 850px; margin: 0 auto; }
.member-item { display: flex; gap: 60px; margin-bottom: 70px; align-items: flex-start; }
.member-item.reverse { flex-direction: row-reverse; }
.member-item img { width: 220px; filter: grayscale(100%); border: 1px solid var(--line-color); }
.member-info h3 { font-size: 1.4rem; font-weight: 700; border-bottom: 1px solid var(--deep-rose); display: inline-block; padding-bottom: 5px; margin-bottom: 15px; }

footer { text-align: center; padding: 25px 20px; border-top: 1px solid var(--line-color); font-size: 0.75rem; color: #888; }

#loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 2000; display: flex; justify-content: center; align-items: center; }
.loading-needle-container { text-align: center; width: 100%; max-width: 350px; }
.needle-bar-wrapper { position: relative; width: 100%; height: 1px; background-color: var(--line-color); overflow: hidden; margin-top: 20px; }
.needle-body { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background-color: var(--deep-rose); transition: width 0.5s linear; }
.needle-tip { position: absolute; top: 50%; left: 0%; transform: translateY(-50%) translateX(-100%); width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 12px; border-color: transparent transparent transparent var(--deep-rose); transition: left 0.5s linear; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.95); z-index: 3000; display: flex; justify-content: center; align-items: center; cursor: zoom-out;
}
.modal-content { position: relative; max-width: 90%; max-height: 90%; display: flex; justify-content: center; align-items: center; }
.modal-img { max-width: 100%; max-height: 90vh; object-fit: contain; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.modal-close { position: fixed; top: 20px; right: 25px; font-size: 40px; font-weight: 200; color: var(--text-color); cursor: pointer; line-height: 1; }

@media (max-width: 768px) {
    header { padding: 15px 0; border-bottom: 1px solid var(--line-color); }
    .header-top { font-size: 1.8rem; display: block !important; text-align: center; }

    .nav-open-btn {
        display: flex; 
        position: fixed; right: 20px; bottom: 30px; z-index: 6000;
        width: 60px; height: 60px; background: #fff;
        border: 1px solid var(--text-color); border-radius: 50%;
        align-items: center; justify-content: center;
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
        cursor: pointer;
    }
    .nav-open-btn::before {
        content: ''; width: 25px; height: 1px; background: var(--text-color);
        box-shadow: 0 8px 0 var(--text-color), 0 -8px 0 var(--text-color);
    }

    #nav-check:checked ~ .header-nav ul {
        opacity: 1; pointer-events: auto; transform: translateY(0);
    }

    .header-nav ul {
        position: fixed; bottom: 100px; right: 20px;
        background: rgba(255, 255, 255, 0.98); padding: 25px;
        border: 1px solid var(--line-color); flex-direction: column; gap: 20px; text-align: right;
        opacity: 0; pointer-events: none; transform: translateY(20px);
        transition: 0.3s ease; z-index: 5500;
    }

    .member-item, .member-item.reverse { flex-direction: column !important; align-items: center; gap: 20px; }
    .member-item img { width: 220px; order: 1; }
    .member-info { order: 2; text-align: left; width: 100%; padding: 0 15px; }

    .section-title { font-size: 1.5rem; letter-spacing: 0.2em; margin-bottom: 30px; }
    
    .gallery-grid { grid-template-columns: 1fr; justify-items: center; }
    .gallery-grid img { width: 70% !important; margin: 0 auto; }
}