@charset "UTF-8";

html { scroll-behavior: smooth; }
body { background-color: #000; font-family: "arial", sans-serif; margin: 0; overflow-x: hidden; }

/* 1. 写真（スライダー） */
.swiper {
    width: 100%; height: 100vh;
    position: relative;
    z-index: 1; 
}
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }

/* 2. 背景オブジェクト */
#bg-objects {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 10; pointer-events: none; overflow: hidden;
}
.bg-item {
    position: absolute; color: #ffffff; opacity: 1; font-weight: 100;
    font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Meiryo", sans-serif;
    letter-spacing: 0.1em;
    animation: floatAround linear infinite;
    user-select: none; pointer-events: none;
}

/* ヘッダー要素の個別配置 */

/* 左上の名前 */
#site-title { 
    position: fixed; 
    top: 27px; left: 40px; 
    font-size: 18px; font-weight: 400; color: #fff; white-space: nowrap; 
    margin: 0; line-height: 1;
    animation: scrollLeft 15s linear infinite;
    z-index: 100; pointer-events: none; 
}

/* 右上のMENUボタン */
#menu-open { 
    position: fixed; top: 20px; right: 40px; 
    color: #000; font-size: 14px; cursor: pointer; padding: 8px 20px; 
    border-radius: 25px; background-color: #fff; border: 1px solid #000; font-weight: bold;
    z-index: 99999 !important; pointer-events: auto !important; 
}

/* 左下のリスト（PC用） */
.work-list-container {
    position: absolute; bottom: 40px; left: 40px; 
    display: none; /* スマホでは消す */
    z-index: 99999 !important; pointer-events: auto !important; 
}
.work-titles li { cursor: pointer; pointer-events: auto; }

/* コンテンツエリア */
#white-contents {
    display: none; background-color: #fff; position: relative;
    z-index: 5000; 
}

/* スマホ用タイトル（画像上の文字） */
.slide-info {
    position: absolute; bottom: 60px; left: 20px; 
    z-index: 50; color: #fff; pointer-events: none; 
}
/* スマホ用タグ（常に表示） */
.slide-info .work-tag { opacity: 1 !important; }

/* アニメーション */
@keyframes floatAround {
    0% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(45vw, 35vh) rotate(120deg); }
    66% { transform: translate(-35vw, 65vh) rotate(240deg); }
    100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes scrollLeft { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }

/* デザイン詳細 */
.work-titles { list-style: none; padding: 0; }
.work-titles li { font-size: 20px; color: rgba(255, 255, 255, 0.4); margin-bottom: 15px; display: flex; align-items: center; }
.work-titles li.is-active { color: #fff; font-weight: bold; }
.work-year { font-size: 14px; margin-left: 15px; opacity: 0; transition: 0.5s; }
.is-active .work-year { opacity: 1; }

.work-tag { 
    font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-left: 10px; 
    border: 1px solid rgba(255, 255, 255, 0.3); padding: 1px 6px; 
    text-transform: uppercase; opacity: 0; transition: 0.5s; 
}
.is-active .work-tag { opacity: 1; }

.about-area { color: #000; padding: 100px 40px; }
.about-content { max-width: 1100px; margin: 0 auto; }
.profile-img { width: 100%; max-width: 400px; display: block; margin: 0 auto 30px; }

/* ABOUTの文字サイズ */
.about-content h2 { font-size: 40px; font-weight: bold; margin-bottom: 30px; }
.name { font-size: 28px; font-weight: bold; margin-bottom: 25px; }
.description { line-height: 2; white-space: pre-wrap; font-size: 15px; }

/* CONTACTエリア */
.contact-area { color: #000; padding: 100px 40px; text-align: center; }
.contact-content { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.contact-content h2 {
    font-size: 40px; font-weight: bold; margin-bottom: 50px; width: 100%;
    align-self: flex-start; text-align: left; 
}
.contact-center-box { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 0; }
.contact-item { text-decoration: none; color: #000; transition: 0.3s; display: inline-block; margin-bottom: 30px; text-align: center; }
.contact-item:hover { opacity: 0.4; }
.contact-item .label { display: block; font-size: 11px; color: #999; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.2em; }
.contact-item .value { font-size: clamp(15px, 4vw, 20px); font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 8px; }
.copyright { margin-top: 100px; font-size: 11px; color: #999; text-align: center; width: 100%; }

/* メニュー画面 */
#menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.4s; }
#menu-overlay.is-open { opacity: 1; visibility: visible; }
#menu-close { position: absolute; top: 20px; right: 40px; font-size: 30px; cursor: pointer; color: #000; }
.menu-list { list-style: none; text-align: center; padding: 0; }
.menu-list a { font-size: 32px; text-decoration: none; color: #000; font-weight: bold; display: block; margin: 25px 0; cursor: pointer; }

/* ★★★ パソコン（幅768px以上）の強制設定 ★★★ */
@media (min-width: 768px) { 
    /* 左下のリストを表示 */
    .work-list-container { display: block; } 
    
    /* ABOUTレイアウト */
    .about-content { display: flex; gap: 80px; align-items: flex-start; }
    .profile-img { flex: 0 0 400px; margin: 0; }

    /* ★修正：PCではスマホ用タイトルを【絶対に】消す */
    .slide-info, 
    .slide-info * {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}