@charset "UTF-8";

/* --- 1. フォント：UNiのようなモダンで細い書体 --- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300&family=Inter:wght@200;300&family=Noto+Sans+JP:wght@200;300&display=swap');

html, body {
    margin: 0; padding: 0;
    background-color: #ffffff; /* 背景を真っ白に */
    color: #1a1a1a; /* 文字は真っ黒ではなく、少しだけ抜いた黒 */
    font-family: 'Inter', 'Noto Sans JP', sans-serif; /* セリフ（明朝）よりゴシック寄りに */
    -webkit-font-smoothing: antialiased;
}

/* --- 2. ヘッダー：ロゴを中央、メニューを完全に左右に --- */
#juri-header {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
    padding: 30px 0; background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}
.header-inner {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 40px; /* 左右の余白 */
}
.header-logo img {
    height: 20px; width: auto; 
    filter: invert(1); /* 黒ロゴにする（元の画像が白なら） */
}

/* ナビゲーションを細く、薄く */
.header-inner nav ul {
    display: flex; gap: 30px; list-style: none; margin: 0; padding: 0;
}
.header-inner a {
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.2em;
    color: #999; text-decoration: none; transition: color 0.4s;
}
.header-inner a:hover { color: #1a1a1a; }

/* --- 3. ヒーローセクション：文字を画像の上に置かず、下に置く --- */
.juri-hero {
    height: 100vh; width: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    background: #ffffff;
}
.hero-img-wrap {
    width: 80%; /* 画像を少し小さくして余白を作る */
    height: 60vh;
    overflow: hidden;
    margin-bottom: 40px;
}
.hero-img {
    width: 100%; height: 100%; object-fit: cover;
}
.main-title {
    color: #1a1a1a; font-size: 40px; font-weight: 200; letter-spacing: 0.3em;
}

/* --- 4. 記事一覧：UNi風のシステマチックな配置 --- */
.container { max-width: 1400px; margin: 0 auto; padding: 100px 40px; }
.juri-grid {
    display: flex; flex-direction: column; gap: 150px;
}

/* 記事の中身 */
.juri-item {
    display: flex; flex-direction: column; align-items: center; /* 中央揃え */
}

.item-img-container {
    width: 100%;
    aspect-ratio: 16 / 9; /* 横長を維持 */
    overflow: hidden;
    margin-bottom: 20px;
}
.item-img-container img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(20%); /* ほんの少し彩度を落とすとUNiっぽくなります */
    transition: 0.8s ease;
}
.juri-item:hover img { transform: scale(1.02); filter: grayscale(0%); }

/* --- 5. ボタン：UNi風の「細線・中央」デザイン --- */
.view-more-wrap {
    text-align: center; margin-top: 60px;
}
.juri-btn {
    display: inline-block;
    padding: 15px 40px;
    border: 0.5px solid #ccc; /* 非常に細い線 */
    font-size: 10px; color: #666;
    letter-spacing: 0.4em; text-transform: uppercase;
    transition: all 0.4s;
}
.juri-btn:hover {
    border-color: #1a1a1a; color: #1a1a1a;
}

/* --- 6. ローダー：背景を白に修正 --- */
#juri-loader {
    background: #ffffff !important;
}
.loader-logo-img {
    filter: invert(1); /* 黒ロゴにする */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .header-inner { padding: 0 20px; }
    .nav-left, .nav-right { display: none; }
    .hero-img-wrap { width: 90%; height: 40vh; }
}