:root {
    --font-en: "Roboto", sans-serif;
    --font-jp: "Noto Sans JP", sans-serif;
    --main-font: "Roboto", "Noto Sans JP", sans-serif;
    --fw-base: 300; 
    --lh-base: 1.6; 
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--main-font);
    font-weight: var(--fw-base);
    line-height: var(--lh-base);
    background-color: transparent;
    color: #000;
    
    /* 文字サイズを90%に縮小 (13px * 0.9 = 11.7px) */
    font-size: 11.7px;
    
    letter-spacing: 0.05em;
    animation: fadeIn 1s ease forwards;
}

canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

a { text-decoration: none; color: inherit; transition: opacity 0.4s; }
a:hover { opacity: 0.6; }
.work-item a:hover { opacity: 1; } 
ul { list-style: none; }

.wrapper { display: flex; width: 100%; min-height: 100vh; }

/* サイドバー */
.sidebar {
    width: 240px;
    height: 100vh;
    position: fixed;
    top: 0; left: 0;
    padding: 50px 40px;
    z-index: 100;
}
.sidebar-content {
    height: 100%;
    display: flex; 
    flex-direction: column; 
}

.logo { 
    /* 14px * 0.9 = 12.6px */
    font-size: 12.6px; 
    margin-bottom: 50px; 
    font-weight: 400; 
    letter-spacing: 0.1em;
}
.nav-menu ul li { margin-bottom: 15px; }
.nav-menu a { 
    color: #999; 
    /* 13px * 0.9 = 11.7px */
    font-size: 11.7px; 
    cursor: pointer; 
}
.nav-menu a.active { color: #000; font-weight: 400; }

.sns-area { margin-top: auto; margin-bottom: 20px; } 
.sns-area a { 
    display: block; 
    /* 11px * 0.9 = 9.9px -> 約10px */
    font-size: 10px; 
    color: #666; 
    margin-bottom: 8px; 
}
.copyright { font-size: 10px; color: #ccc; }

.main-content {
    margin-left: 240px;
    width: calc(100% - 240px);
    padding: 50px 80px 100px;
    max-width: 1000px; 
}

.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.8s ease; }

/* Worksリスト */
.works-list { 
    display: flex; 
    flex-direction: column; 
    /* 隙間を65%に縮小 (80px * 0.65 = 52px) */
    gap: 52px; 
}

.work-item { 
    /* 画像サイズを65%に縮小 */
    width: 65%; 
}

.media-box {
    width: 100%;
    background-color: #f7f7f7;
    margin-bottom: 12px;
    cursor: pointer;
}
.media-box img, .media-box video { width: 100%; height: auto; display: block; }

.work-title { 
    /* 15px * 0.9 = 13.5px */
    font-size: 13.5px; 
    /* ★変更点: 太さを400から300(細字)に変更 */
    font-weight: 300; 
    margin-bottom: 3px; 
}
.work-tag { 
    /* 11px * 0.9 = 9.9px */
    font-size: 10px; 
    color: #999; 
}

.info-section { max-width: 600px; padding-top: 20px; }
.info-title { 
    /* 20px * 0.9 = 18px */
    font-size: 18px; 
    font-weight: 300; 
    margin-bottom: 40px; 
}
.profile-image { max-width: 100%; height: auto; margin-bottom: 30px; display: block; }
.info-text { 
    /* 13px * 0.9 = 11.7px */
    font-size: 11.7px; 
    line-height: 2.0; 
    margin-bottom: 40px; 
}
.contact-link { border-bottom: 1px solid #ccc; padding-bottom: 2px; }

.detail-nav { margin-bottom: 30px; }
.back-link { 
    cursor: pointer; 
    /* 12px * 0.9 = 10.8px */
    font-size: 11px; 
    color: #999; 
}
.back-link:hover { color: #000; }

.detail-header { margin-bottom: 40px; }
.detail-title { 
    /* 22px * 0.9 = 19.8px */
    font-size: 19.8px; 
    font-weight: 300; 
    margin-bottom: 8px; 
}
.detail-cat { color: #999; font-size: 12px; }

.detail-main-media { 
    /* 詳細ページのメイン画像も65%に縮小 */
    width: 65%; 
    margin-bottom: 60px; 
    cursor: zoom-in; 
}

.detail-text { 
    max-width: 600px; 
    margin-bottom: 80px; 
    font-size: 11.7px; 
    line-height: 1.8; 
}

/* ギャラリー設定 */
.detail-gallery {
    /* ギャラリーもメイン画像に合わせて65%に縮小 */
    max-width: 65%; 
    display: flex;
    flex-direction: column;
    /* ギャラリー内の隙間も縮小 (20px * 0.65 = 13px) */
    gap: 13px;
}

.detail-sub-image {
    width: 100%; 
    height: auto;
    display: block;
    cursor: zoom-in;
    border-radius: 2px;
}

.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.lightbox.show { opacity: 1; pointer-events: auto; }
.lightbox-img { max-width: 90%; max-height: 90%; object-fit: contain; }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: #fff; font-size: 30px; cursor: pointer; }

/* スマホ対応 */
@media screen and (max-width: 768px) {
    /* スマホでは画像を小さくしすぎると見えないため100%に戻す */
    .work-item, 
    .detail-main-media, 
    .detail-gallery {
        width: 100%;
        max-width: 100%;
    }
    
    .wrapper { display: block; }
    .sidebar { position: relative; width: 100%; height: auto; padding: 30px 20px; }
    .main-content { margin-left: 0; width: 100%; padding: 20px 20px 80px; }
    .nav-menu ul { display: flex; gap: 20px; }
    .sns-area { display: block; margin-top: 30px; }
    .sns-area a { display: inline-block; margin-right: 15px; }
    .copyright { display: none; }
}

.video-container {
    position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
    background-color: #000;
}
.video-container.sub-video {
    margin-bottom: 0;
}
.detail-main-media + .detail-text + .detail-gallery .video-container {
    margin-bottom: 0;
}

.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.media-box { position: relative; }
.play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 20px; opacity: 0.8; pointer-events: none; text-shadow: 0 0 10px rgba(0,0,0,0.5); }