/* ── Base Setting ── */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&family=Noto+Sans+JP:wght@400;700&display=swap');

:root {
    --font-top: "Candara", "Optima", "Segoe UI", sans-serif;
    --font-nav: "Calibri", "Candara", "Segoe UI", sans-serif;
    --font-work: "Oswald", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; color: #111; background: #fafafa; line-height: 1.8; overflow-x: hidden; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 40px; }
section { padding: 120px 0; scroll-margin-top: 80px; }

/* ── Navigation ── */
.nav { position: fixed; top: 0; width: 100%; z-index: 1000; padding: 20px 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.nav-logo { font-family: var(--font-top); font-size: 1.5rem; font-weight: 900; font-style: italic; text-decoration: none; color: #000; letter-spacing: 0.05em; }
.nav-links { display: flex; align-items: center; }
.nav-links a { font-family: var(--font-nav); text-decoration: none; color: #000; margin-left: 35px; font-size: 0.95rem; font-weight: bold; transition: 0.3s; }
.nav-links a:hover { color: #888; }
.menu-toggle { display: none; }

/* ── TOP Section ── */
.sec-top { height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.top-title { display: flex; justify-content: center; align-items: center; gap: 30px; margin-bottom: 20px; }
.top-mc { font-family: var(--font-top); font-size: 6rem; font-style: italic; font-weight: bold; line-height: 1; }
.top-yui { font-family: var(--font-top); font-size: 6rem; font-style: italic; font-weight: bold; line-height: 1; }
.top-sub { font-family: var(--font-nav); font-size: 1.1rem; color: #666; letter-spacing: 0.6em; }

/* ── 共通の大見出し（シャドウ＋文字間隔） ── */
.sec-label { 
    font-family: var(--font-work); 
    font-size: 3rem; 
    text-align: center; 
    margin-bottom: 60px; 
    letter-spacing: 0.15em; 
    text-shadow: 2px 3px 8px rgba(0,0,0,0.15); 
    color: #111;
}

/* ── Profile ── */
.profile-row { display: flex; gap: 50px; align-items: center; }
.profile-img img { width: 100%; max-width: 350px; border-radius: 8px; }
.profile-text h3 { font-family: var(--font-top); font-size: 2rem; margin-bottom: 20px; font-style: italic; }

/* ── Work ── */
.work-wrap { max-width: 800px; margin: 0 auto; }
.work-block { margin-bottom: 70px; }
.work-cat { font-family: var(--font-work); font-size: 2.2rem; border-bottom: 3px solid #000; margin-bottom: 30px; padding-bottom: 5px; text-transform: uppercase; color: #222; }
.work-list li { 
    list-style: none; 
    position: relative; 
    padding: 15px 0 15px 25px; 
    border-bottom: 1px solid #eaeaea; 
    font-size: 1.05rem; 
    color: #333;
    line-height: 1.6;
}
.work-list li::before {
    content: "・";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

/* ── Photo ── */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ph img { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #ddd; border-radius: 4px; transition: 0.3s; }
.ph img:hover { filter: brightness(0.8); }

/* ── Voice ── */
.voice-row { display: flex; align-items: center; margin-bottom: 30px; padding: 20px; background: #fff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.voice-label { font-family: var(--font-nav); font-weight: bold; width: 100px; }
.voice-player { display: flex; align-items: center; flex-grow: 1; }
.play-btn { background: #000; color: #fff; border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; margin-right: 20px; }
.wave-bars { display: flex; align-items: center; gap: 3px; height: 40px; flex-grow: 1; }

/* ── Footer ── */
.footer { padding: 80px 0; text-align: center; background: #111; color: #fff; }
.footer-social a { color: #fff; font-size: 2rem; margin: 0 15px; text-decoration: none; }
.footer-social { margin-bottom: 30px; }
.footer-logo { font-family: var(--font-top); font-size: 1.5rem; display: block; margin-bottom: 10px; font-style: italic; }
.footer-copy { color: #888; font-size: 0.8rem; }

/* ========================================
   📱 SP (スマホ用レスポンシブデザイン)
   ======================================== */
@media (max-width: 768px) {
    section { padding: 80px 0; }
    .container { padding: 0 20px; }
    
    .menu-toggle { display: block; font-size: 1.8rem; cursor: pointer; z-index: 1001; }
    
    .nav-links {
        position: fixed; 
        top: 0; 
        right: -100%; 
        width: 35%; 
        min-width: 140px; 
        height: 100vh;
        background: rgba(255,255,255,0.98); 
        flex-direction: column; 
        justify-content: flex-start; 
        padding-top: 80px; 
        box-shadow: -5px 0 15px rgba(0,0,0,0.1); 
        transition: 0.4s ease-in-out;
    }
    .nav-links.active { right: 0; }
    
    /* 👇 メニュー文字を細く・小さく・スタイリッシュに 👇 */
    .nav-links a { 
        margin: 18px 0; 
        font-size: 0.95rem; /* 小さく */
        font-weight: normal; /* 太字(bold)を解除して細く！ */
        letter-spacing: 0.1em; /* 文字間隔を少し開けて抜け感を */
        color: #222; /* 漆黒からほんの少し柔らかい黒へ */
    }
    /* 👆 ここまで 👆 */

    .top-title { gap: 15px; }
    .top-mc, .top-yui { font-size: 4.5rem; }
    .top-sub { font-size: 0.9rem; letter-spacing: 0.3em; }
    
    .sec-label { font-size: 2.2rem; margin-bottom: 40px; letter-spacing: 0.1em; text-shadow: 1px 2px 5px rgba(0,0,0,0.15); }
    .profile-row { flex-direction: column; text-align: center; }
    
    .work-cat { font-size: 1.6rem; }
    .work-list li { font-size: 0.95rem; padding: 12px 0 12px 20px; }
    
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}