:root {
    --bg: #ffffff;
    --text: #111;
    --dim: #666;
    --hair: #e6e6e6;
    --max: 980px;
    --pad: clamp(24px, 4vw, 52px);
    --menu: 200px;
    --gap: 80px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

/* ============================================================
   GLOBAL TYPOGRAPHY (サイト全体の文字デザインを完全に統一)
   ============================================================ */
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    /* ヒラギノ明朝を最優先。一貫したフォントスタック */
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", "MS PMincho", serif;
    /* 文字の輪郭をシャープに見せる（これがないとボヤけます） */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 作品タイトルや見出しの太さと間隔をサイト全体で統一 */
h1,
h2,
h3,
.sidebar-label,
.archive-title,
#featuredTitle,
.sidebar .t,
.sidebar-home-name {
    font-weight: 420;
}

/* サイドバーやリンクの基本設定 */
a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}


a:hover {
    opacity: 0.6;
}

a:hover img {
    opacity: .5;
    transition: .3s;
}

/* ============================================================
   LAYOUT & MAIN (画面中央配置)
   ============================================================ */
.container {
    width: 100%;
    margin: 0;
    padding: 0;
}

.layout {
    display: block;
    width: 100%;
    position: relative;
}

/* ============================================================
   MAIN CONTENT (全ページ共通の配置設定)
   ============================================================ */
.main {
    display: block;
    width: 90%;
    max-width: 800px;
    /* コンテンツの最大幅 */
    margin-left: auto;
    margin-right: auto;
    /* 基本は中央揃え */
    padding-top: 80px;
    padding-bottom: 100px;
    text-align: left;

    /* ページ読み込み時のアニメーション */
    animation: fadeInBody 1.2s ease forwards;
}

/* 【重要】サイドバーとの衝突を回避するメディアクエリ */
/* 画面幅が狭くなり、中央揃えだとサイドバーと重なる場合の設定 */
@media (min-width: 861px) and (max-width: 1250px) {
    .main {
        /* サイドバーの幅 + 余白分を左に空けて、右側に配置する */
        margin-left: calc(var(--menu) + var(--pad) + 40px);
        margin-right: var(--pad);
        width: auto;
        /* 幅は自動調整 */
        max-width: none;
        /* 最大幅の制限を解除 */
    }
}

/* スマホ版の調整 */
@media (max-width: 860px) {
    .main {
        width: 100%;
        max-width: 100%;
        padding: var(--pad);
        padding-top: 100px;
        margin: 0;
    }
}

@keyframes fadeInBody {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   SIDEBAR (PC / Desktop)
   ============================================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: var(--pad);
    width: var(--menu);
    height: 100vh;
    z-index: 10;
    padding-top: 50px;
    padding-bottom: 100px;
    /* 下の余白も 100px 確保して詰まり感を解消 */
    background: var(--bg);

    /* スクロール設定 */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}

/* スクロールバー (Chrome/Safari) */
.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* サイドバーの項目間の隙間を詰める */
.sidebar li {
    margin: 0 0 20px;
}

/* カテゴリー見出しの下の隙間も調整 */
.sidebar-label {
    font-size: 11px;
    color: var(--text);
    letter-spacing: .06em;
    margin: 40px 0 20px;
    display: block;
    /* リンクになっている Series Works にも余白を効かせるために追加 */
}

.sidebar li a:hover,
.sidebar-label-link:hover {
    opacity: 0.8 !important;
}

/* ============================================================
   SIDEBAR (PC：基本の濃淡設定)
   ============================================================ */
/* 1. 通常のリンクはすべて 0.4 まで薄くしておく */
.sidebar li a,
.sidebar-label-link,
.sidebar-meta a {
    opacity: 0.4;
    /* ここが 0.4 なら、他が薄くなります */
    transition: opacity 0.3s ease;
}

/* 2. 現在地（is-current）がついているものだけ濃くする */
.sidebar li a.is-current,
.sidebar-label-link.is-current,
.sidebar-meta a.is-current {
    opacity: 0.8 !important;
    /* 現在地だけハッキリさせる */
    font-weight: 420 !important;
    /* あなたの指定した太さ */
}

/* 3. ホバーした時も少し濃くして反応を出す */
.sidebar li a:hover {
    opacity: 0.7 !important;
}


/* 名前スタイル */
.sidebar-home-name {
    font-size: 15px;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--text);
}

.sidebar-home-role {
    font-size: 10px;
    margin-top: 4px;
    letter-spacing: .12em;
    opacity: .55;
}

/* 見出し・テキスト */
.sidebar-kicker {
    font-size: 9px;
    color: var(--dim);
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 0 0 6px;
}


.sidebar .t {
    font-size: 16px;
    line-height: 1.35;
}

.sidebar .y {
    font-size: 11px;
    color: var(--dim);
    margin-top: 4px;
}

.sidebar-meta {
    padding: 10px 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 52px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-meta a {
    font-size: 10px;
    color: var(--dim);
    opacity: 0.4;
}

.sidebar-lang {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    gap: 6px;
    font-size: 12px;
}

/* 言語切替のセパレーター(/)も濃くする */
.sidebar.is-top .lang-sep {
    opacity: 0.6;
}


.lang-current {
    opacity: 1;
    font-weight: 700;
}

.lang-link {
    opacity: 0.3;
}

/* ============================================================
   MOBILE & DRAWER (スマホメニュー：ボヤけ・消失修正版)
   ============================================================ */
.menuBtn {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: 0;
    background: rgba(12, 12, 16, 0.9);
    border-radius: 50%;
    z-index: 2001;
    cursor: pointer;

    /* 表示設定を強制し、Flexboxで中央に揃える */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

@media (max-width: 860px) {
    .menuBtn {
        display: flex !important;
        /* 確実に表示させる */
    }
}

.menuBtn span {
    display: block;
    width: 20px;
    height: 1px;
    /* 1pxに固定してボヤけを防止 */
    background: #fff;
    /* transitionの時間を少し短くし、キレを出す */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease;
}

/* --- 開閉時のアニメーション：7px（1px線 + 6px間隔）で計算 --- */
.menuBtn.isOpen span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menuBtn.isOpen span:nth-child(2) {
    opacity: 0;
}

.menuBtn.isOpen span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
    .menuBtn {
        display: flex !important;
        /* 強制的に表示 */
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: min(85vw, 320px);
        height: 100dvh;
        transform: translateX(-105%);
        z-index: 2000;
        background: #0a0a0e !important;
        padding: 60px 24px 40px;
        transition: transform .4s cubic-bezier(.2, .8, .2, 1);
    }

    /* 修正箇所：先頭のゴミ記述（*/
    ）を削除 */ body:not(.is-series) .sidebar-home-name,
    body:not(.is-series) .sidebar li a,
    body:not(.is-series) .sidebar-label-link,
    body:not(.is-series) .sidebar-meta a,
    body:not(.is-series) .sidebar .t {
        color: #fff !important;
    }

    body.navOpen .sidebar {
        transform: translateX(0);
    }

    body:not(.is-series-top) .sidebar .t {
        color: #fff !important;
    }

    .sidebar li a,
    .sidebar-label-link,
    .sidebar-meta a {
        color: #fff;
        opacity: 0.6;
    }

    .sidebar-kicker,
    .sidebar .y {
        color: rgba(255, 255, 255, 0.4);
    }

    .sidebar-label {
        color: rgba(255, 255, 255, 0.9);
    }

    body.navOpen .sidebar {
        transform: translateX(0);
    }

    .main {
        width: 100%;
        max-width: 100%;
        padding: var(--pad);
        padding-top: 80px;
        margin: 0;
    }
}

/* ============================================================
   LOADER (アニメーション復活)
   ============================================================ */
#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #050507;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity .7s ease;
}

#loader.is-hide {
    opacity: 0;
    pointer-events: none;
}

#loader .loader-inner {
    width: min(560px, 86vw);
    text-align: center;
    color: rgba(255, 255, 255, .86);
    animation: loaderFloat 2.4s ease-in-out infinite;
}

@keyframes loaderFloat {

    0%,
    100% {
        transform: translateY(4px);
    }

    50% {
        transform: translateY(-2px);
    }
}

#loader .loader-pct {
    font-size: clamp(28px, 4.6vw, 44px);
    font-weight: 420;
    opacity: 0;
    transform: translateY(10px);
    animation: loaderIn .9s ease forwards;
}

@keyframes loaderIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ギャラリー/レポート */
.work-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.work-img {
    width: 100%;
    margin-bottom: 40px;
}

.report-text {
    background-color: #fafafa;
    margin-top: 80px;
    padding: 40px;
    border-top: 1px solid #ddd;
    line-height: 2;
}

/* ============================================================
   FOOTER (ヒラギノ明朝・境界線なし)
   ============================================================ */
.footer {
    margin-top: 120px;
    /* コンテンツからの距離 */
    padding: 60px 0 80px;
    /* 上下に「間」を作る広めの余白 */
    border-top: none !important;
    /* 境界線を完全に削除 */
    text-align: left;
    /* メインコンテンツの左軸に合わせる */
}

.footer-copy {
    /* サイト全体と同じヒラギノ明朝を指定 */
    font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif !important;
    font-size: 10px;
    /* 控えめで知的なサイズ */
    color: var(--dim);
    /* 紙の質感に馴染むグレー */
    letter-spacing: 0.15em;
    /* 文字間隔を広く取り、透明感を出す */
    opacity: 0.6;
    /* 存在感を抑える */
    line-height: 1;
}