:root {
--scroll-progress: 0;     /* 0=タイトルモード, 1=ヘッダーモード。JSがスクロール量に応じて更新する */
--header-height-max: 170px;
--header-height-min: 64px;
--title-size-max: 4.5rem;
--title-size-min: 1.25rem;
--content-gap: 30px;
}

body {
margin: 0;
padding: 0 2rem 4rem;
background: #fafafa;
color: #1a1a1a;
font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
}

/* Indexのコピーライト。読み込み時(タイトルモード)は表示され、ヘッダーが縮むのに合わせてフェードアウトする */
#site-footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0.6rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
border-top: 1px solid #e5e5e5;
background: #fafafa;
opacity: calc(1 - var(--scroll-progress));
z-index: 90;
}

#site-footer p {
margin: 0;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1a1a;
}

/* 記事ページのコピーライト。常時表示 */
.article-footer {
padding: 2rem;
margin: 0;
text-align: center;
font-size: 0.7rem;
letter-spacing: 0.05em;
color: #888;
}

#site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: calc(var(--header-height-min) + (var(--header-height-max) - var(--header-height-min)) * (1 - var(--scroll-progress)));
display: flex;
align-items: center;
justify-content: center;
background: #fafafa;
border-bottom: 1px solid #e5e5e5;
padding: 0 2rem;
box-sizing: border-box;
z-index: 100;
}

#title {
font-size: calc(var(--title-size-min) + (var(--title-size-max) - var(--title-size-min)) * (1 - var(--scroll-progress)));
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
margin: 0;
text-align: center;
}

.header-controls,
.header-controls-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
gap: 0.75rem;
opacity: var(--scroll-progress);   /* タイトルモードでは非表示、ヘッダーモードに近づくほどフェードイン */
pointer-events: none;              /* ヘッダーモードに完全に切り替わるまではクリックできないようにする */
}

.header-controls {
right: 2rem;
}

.header-controls-left {
left: 2rem;
}

#site-header.header-mode .header-controls,
#site-header.header-mode .header-controls-left {
pointer-events: auto;
}

.header-controls select {
font: inherit;
font-size: 0.8rem;
letter-spacing: 0.05em;
padding: 0.5rem 0.9rem;
background: #fff;
border: 1px solid #1a1a1a;
color: #1a1a1a;
cursor: pointer;
}

.header-controls select:hover {
background: #1a1a1a;
color: #fff;
}

/* Up/Down/Contact用の正方形アイコンボタン。タイトルの大きい状態(4.5rem)のおよそ3分の1のサイズ */
.icon-btn {
width: 1.5rem;
height: 1.5rem;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 0.9rem;
line-height: 1;
background: #fff;
border: 1px solid #1a1a1a;
color: #1a1a1a;
cursor: pointer;
text-decoration: none;
}

.icon-btn:hover {
background: #1a1a1a;
color: #fff;
}

#contents {
/* ヘッダーの現在の高さと常に一致させ、隠れたり隙間が空いたりしないようにする */
margin-top: calc(var(--content-gap) + var(--header-height-min) + (var(--header-height-max) - var(--header-height-min)) * (1 - var(--scroll-progress)));
}

.masonry {
list-style: none;
margin: 0 auto;           /* fitWidthでコンテナ幅がカラム数ぴったりになるのでセンタリングできる */
padding: 0;
position: relative;      /* Masonry.jsが子要素をposition:absoluteで配置するために必要 */
}

.mcard {
width: 300px;             /* 幅固定。Masonry.jsのcolumnWidthと合わせる */
box-sizing: border-box;
overflow: hidden;
margin-bottom: 12px;      /* 縦方向の間隔。gutterは横方向にしか効かないため別途指定 */
position: relative;
border-radius: 12px;

background-color: #f0f0f0; /* サムネイルが無い場合のフォールバック */
border: 1px solid #e5e5e5;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mcard:hover {
border-color: #1a1a1a;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.mcard a {
display: block;
position: relative;
height: 100%;
text-decoration: none;
color: inherit;
}

/* 画像領域。カード全体をサムネイルで埋める。ホバーでわずかに拡大する */
.mcard-media {
position: absolute;
inset: 0;
background-color: #f0f0f0;
background-image: var(--thumb, none);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.4s ease;
}

.mcard:hover .mcard-media {
transform: scale(1.05);
}

/* テキスト領域。カードの縁から浮かせた角丸の「島」にする。
   ホバーで下地・影・文字をまとめてフェードして消す */
.mcard-info {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
padding: 0.9rem 1.1rem 0.8rem;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
opacity: 1;
transition: opacity 0.3s ease;
}

.mcard:hover .mcard-info {
opacity: 0;
}

.mcard .date {
position: relative;
margin: 0 0 6px;
font-size: 0.75rem;
letter-spacing: 0.08em;
color: #aaaaaa;
font-family: "JetBrains Mono", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
}

.mcard h3 {
position: relative;
margin: 0;
font-size: 1.05rem;
font-weight: 700;
line-height: 1.5;
color: #888888;
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Helvetica Neue", Arial, sans-serif;
}

.mcard.large {
height: 360px;
}

.mcard.medium {
height: 240px;
}

.mcard.small {
height: 140px;
}

/* ==========================================================================
   記事ページ(pages/*.html)
   ========================================================================== */

.article-header {
padding: 1.25rem 2rem;
border-bottom: 1px solid #e5e5e5;
background: #fafafa;
}

.article-header a {
color: inherit;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 1rem;
}

.article-header a:hover {
opacity: 0.6;
}

.article {
max-width: 720px;
margin: 0 auto;
padding: 3rem 2rem 5rem;
box-sizing: border-box;
}

.article-date {
margin: 0 0 0.5rem;
font-size: 0.8rem;
letter-spacing: 0.08em;
color: #888;
}

.article-title {
margin: 0 0 0.75rem;
font-size: 1.75rem;
font-weight: 600;
line-height: 1.4;
}

.article-tags {
margin: 0 0 2rem;
}

.article-tags .tag {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.05em;
color: #888;
border: 1px solid #e5e5e5;
padding: 0.2rem 0.6rem;
margin-right: 0.4rem;
}

.article-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
margin-bottom: 2rem;
background: #000;
}

.article-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}

.article_comment {
font-size: 0.95rem;
line-height: 1.9;
padding-top: 1.5rem;
border-top: 1px solid #e5e5e5;
}

.article_comment a {
color: #1a1a1a;
}

.article_comment p {
margin: 0 0 1.25em;
}

.article_comment p:last-child {
margin-bottom: 0;
}

.article_comment strong {
display: block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #888;
margin-bottom: 0.4em;
}