@charset "UTF-8";

/* ==========================================================================
   Variables & Base Settings
   ========================================================================== */
:root {
    --color-text: #333333;
    --color-bg: #f5f5f5;
    --font-family-base: 'Noto Sans JP', sans-serif;
    --max-width-content: 1300px; /* 余白＋ギャップを含めた大枠 */
    --gap-size: 12.5px;
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: var(--font-family-base);
    font-weight: 300;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Topページ専用の背景色
   ========================================================================== */
body.home, 
body.front-page {
    background-color: #f5f5f5; /* ここに希望の背景色（カラーコード）を指定してください */
}

a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

a:hover {
    opacity: 0.7;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
    padding: 60px 40px; /* 余白を広めに取り上品に */
}

.header-inner {
    max-width: var(--max-width-content);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    font-size: 32px;
    font-weight: 100;
    letter-spacing: 0.05em;
}

.global-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
}

.global-nav a {
    font-size: 24px;
}

/* ==========================================================================
   Top Page (Works Grid)
   ========================================================================== */
.works-container {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 40px 100px;
}

/* CSS ColumnsによるMasonryレイアウト */
.works-list {
    column-count: 3;
    column-gap: var(--gap-size);
}

.work-item {
    break-inside: avoid; /* 要素の途中で列が分かれるのを防ぐ */
    margin-bottom: var(--gap-size);
}

.no-image {
    background-color: #f5f5f5;
    padding: 100px 20px;
    text-align: center;
    color: #999;
}

/* ==========================================================================
   Single Work Page
   ========================================================================== */
.work-single {
    max-width: 750px; /* 1300px * 0.75 */
    margin: 0 auto;
    padding: 0 30px 75px; /* 40px 100px * 0.75 */
}

/* 画像ギャラリーエリア */
.work-gallery {
    margin-bottom: 60px; /* 80px * 0.75 */
}

.gallery-grid {
    display: grid;
    gap: 37.5px; /* 50px * 0.75 */
}

/* 1枚の時は全幅 */
.gallery-grid.is-single img {
    width: 100%;
    height: auto;
}

/* 複数枚の時は自動でグリッド配置（最小400px、余白があれば横に並ぶ） */
.gallery-grid.is-multi {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 400px * 0.75 */
    align-items: start;
}

.gallery-grid img {
    width: 100%;
    height: auto;
}

/* テキスト情報エリア */
.work-info {
    width: 100%; /* 画像幅(コンテナ幅)に合わせる */
}

.work-info-header {
    display: flex;
    flex-wrap: wrap; /* 画面が狭いときは縦に並ぶよう許容 */
    align-items: baseline;
    gap: 30px; /* 40px * 0.75 */
    margin-bottom: 30px; /* 40px * 0.75 */
}

.work-title {
    font-size: 36px; /* 96px * 0.75 */
    font-weight: 100;
    line-height: 1.2;
    margin: 0;
    /* 巨大文字が画面外にはみ出さないように強制改行を許可 */
    overflow-wrap: break-word;
    word-break: auto-phrase;
}

.work-date,
.work-description,
.work-software-heading,
.work-software-list {
    font-size: 16px; /* 32px * 0.75 */
    margin: 0 0 15px; /* 20px * 0.75 */
    overflow-wrap: break-word;
}

.work-description p {
    margin-bottom: 1.5em;
}

.work-software-wrap {
    margin-top: 45px; /* 60px * 0.75 */
}

.work-software-heading {
    font-weight: 100;
    margin-bottom: 8px; /* 10px * 0.75 */
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
    text-align: center;
    padding: 40px;
    font-size: 14px;
    color: #999;
}

/* ==========================================================================
   Responsive (Step 3で詳細化予定・一覧列数のベースのみ記述)
   ========================================================================== */
@media (max-width: 1400px) { .works-list { column-count: 2; } }
@media (max-width: 949px) { .works-list { column-count: 1; } }