@charset "UTF-8";

/* ===========================================================
   素朴で自然な情報サイトの見た目。
   原色ブルーや影・角丸ピル・浮くアニメを避け、
   細い罫線と控えめな配色でまとめる。
   =========================================================== */

:root {
    --ink: #262626;
    --ink-sub: #666;
    --line: #dcdcdc;
    --line-strong: #bbb;
    --bg: #fbfbfa;
    --panel: #fff;
    --accent: #4b6a83;      /* 控えめなスレートブルー。リンク・見出しの下線程度に */
    --entry: #eef3e6;       /* 応募期間（淡い緑）*/
    --entry-line: #cdddb6;
    --result: #f3ece4;      /* 結果発表（淡いベージュ）*/
    --result-line: #ddccb6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--ink);
    background: var(--bg);
    font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* 左右paddingのみ指定する（上下は main 等の要素側指定を生かすため、shorthandで潰さない） */
.container { max-width: 1040px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* --- ヘッダー --- */
.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.site-header .container {
    padding-top: 14px;
    padding-bottom: 14px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.site-title small { font-weight: 400; color: var(--ink-sub); font-size: .8rem; margin-left: 8px; }

/* ヘッダーのナビ（全ワールド検索への導線） */
.site-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.site-nav a {
    padding: 5px 12px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.site-nav a:hover { background: #f2f0ec; text-decoration: none; }
.site-nav a.current {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
/* ボックスにしない素のテキストリンク（土地詳細データ） */
.site-nav a.plain { border: none; background: none; padding: 5px 0; font-weight: 400; color: var(--accent); }
.site-nav a.plain:hover { background: none; text-decoration: underline; }

/* --- メイン --- */
main { padding: 22px 0 40px; }

.status-line {
    margin: 0 0 18px;
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
}
.status-line .deadline { color: #a2352b; font-weight: 700; }

/* --- 上段：ステータスとカレンダーを横並び --- */
.top-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: stretch;   /* カレンダーの下辺をランキング表の下辺に合わせる */
    margin-bottom: 22px;
}
/* 中の表(nowrap)が列幅を押し広げてページ全体が横スクロールするのを防ぐ。
   表は .table-wrap の中だけで横スクロールさせる。 */
.top-grid > * { min-width: 0; }

/* --- カレンダー --- */
.calendar {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 12px 14px;
    width: 300px;
    /* 高さが伸びた分は日付グリッドの下に配して、凡例は下辺に置く */
    display: flex;
    flex-direction: column;
}
.calendar h2 { font-size: .95rem; margin: 0 0 8px; font-weight: 700; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-grid .dow { text-align: center; font-size: .72rem; color: var(--ink-sub); padding-bottom: 2px; }
.cal-day { text-align: center; font-size: .82rem; padding: 5px 0; border: 1px solid transparent; }
.cal-day.entry { background: var(--entry); border-color: var(--entry-line); }
.cal-day.result { background: var(--result); border-color: var(--result-line); }
.cal-day.today { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 700; }
.cal-legend { margin-top: auto; padding-top: 8px; font-size: .72rem; color: var(--ink-sub); }
.cal-legend span { display: inline-block; padding: 1px 7px; margin-right: 6px; border: 1px solid; }
.cal-legend .entry { background: var(--entry); border-color: var(--entry-line); }
.cal-legend .result { background: var(--result); border-color: var(--result-line); }

/* --- トップ：応募数ランキング（カレンダー左のスペースに収める） --- */
.ranking h2 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 8px;
}
.ranking h2 .rank-sub {
    font-weight: 400;
    font-size: .78rem;
    color: var(--ink-sub);
    margin-left: 8px;
}
.rank-table { font-size: 13px; }
.rank-table thead th { padding: 5px 8px; cursor: default; }
.rank-table tbody td { padding: 5px 8px; }
.rank-table .rank-num { text-align: center; font-weight: 700; color: var(--ink-sub); width: 2.2em; }
.rank-table .rank-entries { text-align: right; font-weight: 700; color: #8a3b3b; font-variant-numeric: tabular-nums; }
.rank-table .w-count { font-size: .82em; }

/* --- DC別 概要 --- */
.overview { margin-bottom: 26px; }
.dc-block { margin-bottom: 16px; }
.dc-name {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px;
    padding-left: 9px;
    border-left: 4px solid var(--accent);
}
.dc-name .dc-total { font-weight: 400; font-size: .8rem; color: var(--ink-sub); margin-left: 8px; }
/* 各DCはちょうど8ワールド。7+1の半端な折り返しにならないよう列数を固定する */
.world-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}
.world-card {
    font: inherit;
    text-align: left;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 8px 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.world-card:hover { border-color: var(--line-strong); background: #f6f5f2; }
/* カードの大きさを揃えることを優先し、名前が長いワールドは字を小さくして1行に収める */
.world-card .w-name {
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
}
.world-card.name-long .w-name { font-size: .82rem; }
.world-card.name-xlong .w-name { font-size: .74rem; }
.world-card .w-count { font-size: .78rem; color: var(--ink-sub); }
/* 空きがあるワールドは控えめに強調 */
.world-card.has-plots { border-left: 3px solid #9c6b6b; }
.world-card.has-plots .w-count { color: #8a3b3b; font-weight: 700; }

.section-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.overview-hint { color: var(--ink-sub); font-size: .85rem; margin: 0; }

/* トップ：一覧の上の「整備中 含む/除く」切り替え */
.overview-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.overview-bar label { font-size: .85rem; color: var(--ink-sub); white-space: nowrap; }
.overview-bar select {
    font: inherit;
    font-size: .9rem;
    padding: 4px 8px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
}
.overview-note { color: var(--ink-sub); font-size: .8rem; margin: 0 0 12px; }

/* --- world.html 個別ページ --- */
.breadcrumb { font-size: .85rem; margin: 0 0 12px; color: var(--ink-sub); }
.breadcrumb a { color: var(--accent); }
.breadcrumb .sep { margin: 0 7px; color: var(--line-strong); }
.breadcrumb .cur { color: var(--ink); }
.world-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 10px; }
.back-top { margin-top: 18px; font-size: .9rem; }

/* DC・ワールド切り替えタブ */
.world-nav { margin: 0 0 20px; }
.nav-row { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-dc { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--line); }
.nav-dc .tab {
    padding: 5px 14px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink-sub);
}
.nav-dc .tab:hover { background: #f6f5f2; text-decoration: none; }
.nav-dc .tab.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}
.nav-world .wtab {
    padding: 3px 10px;
    border: 1px solid var(--line);
    background: var(--panel);
    font-size: .82rem;
    color: var(--ink);
}
.nav-world .wtab:hover { background: #f6f5f2; text-decoration: none; }
.nav-world .wtab.active {
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--accent);
}

/* --- フィルタ --- */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
}
.filters label { font-size: .85rem; color: var(--ink-sub); }
.filters select, .filters input[type="search"] {
    font: inherit;
    font-size: .9rem;
    padding: 5px 8px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
}
.filters input[type="search"] { min-width: 180px; }
.result-count { margin-left: auto; font-size: .85rem; color: var(--ink-sub); }

/* --- テーブル --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
thead th {
    background: #f0efec;
    text-align: left;
    font-weight: 600;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line-strong);
    cursor: pointer;
    user-select: none;
}
thead th .arrow { color: var(--ink-sub); font-size: .75em; margin-left: 3px; }
tbody td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #f6f5f2; }

.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-center { text-align: center; }

/* サイズ表記：淡い枠のタグで区別（原色を避ける）*/
.size-tag {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    padding: 0 6px;
    border: 1px solid var(--line-strong);
    font-weight: 700;
    font-size: .85em;
    background: #fff;
}
.size-tag.L { border-color: #b98a8a; color: #8a3b3b; background: #f7efef; }
.size-tag.M { border-color: #b9a67f; color: #7d5f2a; background: #f7f2e8; }
.size-tag.S { border-color: #8fa6b3; color: #3f5b6b; background: #eef3f6; }

.status-cell { color: var(--ink); }
.status-cell .until { color: var(--ink-sub); font-size: .82em; }
.status-cell .meta { color: var(--ink-sub); font-size: .78em; }
.unsurveyed { color: var(--ink-sub); font-size: .85em; }   /* 景観ページの未調査表示 */
/* ワールドページの要約（箇条書き） */
.world-summary ul { margin: 0 0 8px; padding-left: 1.3em; }
.world-summary li { margin: 2px 0; }
/* 行クリックで土地の詳細ページへ飛べる行（区画一覧・ランキング共通） */
tbody tr[data-href] { cursor: pointer; }
tbody tr[data-href]:hover td { background: #f5f4f0; }
/* 景観ページの写真セル（サムネイル。クリックで原寸） */
.photo-cell { white-space: nowrap; }
.photo-cell img {
    width: 128px; height: 72px; object-fit: cover;
    border: 1px solid var(--line-strong); margin-right: 4px; vertical-align: middle;
}
/* 土地の詳細ページ */
/* 見出しカード（背景にその土地の写真を薄く敷く。写真なしは無地） */
.plot-card {
    border: 1px solid var(--line);
    background: var(--panel);
    background-size: cover;
    background-position: center;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.plot-card h1 { margin-bottom: 10px; }
.plot-card .plot-facts { margin-bottom: 0; }
.plot-sub { color: var(--ink-sub); margin: -8px 0 16px; }
/* 奇数枚でも全枚同じ大きさになるよう、余りマスを残すグリッドにする */
.detail-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin: 0 0 18px; }
.detail-photos a { display: block; cursor: zoom-in; }
.detail-photos img { width: 100%; height: auto; display: block; border: 1px solid var(--line-strong); }
.photo-cell a { cursor: zoom-in; }
/* 締め切りカウントダウン（等幅数字で桁ズレを防ぐ。行末配置なので他の文字も動かない） */
.countdown { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* 写真の拡大表示（lightbox.js） */
#lightbox {
    display: none; position: fixed; inset: 0; z-index: 100;
    background: rgba(20, 20, 18, .85); cursor: zoom-out; padding: 20px;
}
#lightbox.open { display: flex; align-items: center; justify-content: center; }
#lightbox img { max-width: 100%; max-height: 100%; }
.plot-facts { margin: 0 0 18px; }
.plot-facts dt { font-weight: 700; margin-top: 8px; }
.plot-facts dd { margin: 2px 0 0 0; }
.avail-list { margin: 8px 0 8px; padding-left: 1.4em; }
.avail-list li { margin: 2px 0; }
/* 最終観測が古い行（売却済みが未反映の可能性）は文字を落として区別する */
tr.stale td { color: var(--ink-sub); }

/* 土地一覧のカード（表の代わり。スマホ1列 / PC複数列。横スクロールを起こさない） */
.plot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 4px 0 20px; }
.plot-list-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); color: var(--ink); text-decoration: none; scroll-margin-top: 14px; }
.plot-list-card:hover { border-color: var(--line-strong); text-decoration: none; }
.plc-photos { display: flex; gap: 1px; background: var(--line); }
.plc-photos img { flex: 1 1 0; min-width: 0; height: 94px; object-fit: cover; display: block; }
.plc-noimg { display: flex; align-items: center; justify-content: center; height: 72px; color: var(--ink-sub); font-size: .8rem; background: #f2f0ec; }
.plc-body { padding: 9px 12px 11px; }
.plc-head { display: flex; align-items: baseline; gap: 8px; }
.plc-num { font-weight: 700; font-size: 1.02rem; }
.plc-sub { color: var(--ink-sub); font-weight: 400; font-size: .82rem; }
.plc-price { margin-left: auto; color: var(--ink-sub); font-size: .88rem; }
.plc-facts-list { margin: 7px 0 0; padding-left: 1.2em; font-size: .85rem; line-height: 1.55; }
.plc-facts-list li { margin: 1px 0; }
.plc-loc, .plc-view { margin: 6px 0 0; font-size: .85rem; line-height: 1.5; }
.plc-view { color: var(--ink-sub); }
.plc-k { display: inline-block; margin-right: 6px; padding: 0 5px; font-size: .72rem; font-weight: 700; color: var(--ink-sub); border: 1px solid var(--line-strong); }
.plc-empty { margin: 6px 0 0; font-size: .82rem; color: var(--ink-sub); }
.plot-list-card .anchor { display: block; height: 0; }

.empty { text-align: center; color: var(--ink-sub); padding: 28px 0; }

/* --- 文章ページ（about / privacy） --- */
.doc { max-width: 760px; }
.doc h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; }
.doc h2 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 28px 0 8px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--line);
}
.doc p, .doc ul { margin: 8px 0; }
.doc ul { padding-left: 1.5em; }
.doc li { margin: 4px 0; }
.doc .note { color: var(--ink-sub); font-size: .85rem; }
.doc .back-top { margin-top: 28px; }
.doc .breadcrumb { margin-bottom: 16px; }

/* コラム一覧 */
.column-list { list-style: none; padding: 0; margin: 18px 0; }
.column-list li { padding: 14px 0; border-top: 1px solid var(--line); }
.column-list li:last-child { border-bottom: 1px solid var(--line); }
.column-list a { font-weight: 700; font-size: 1rem; }
.column-list span { display: block; margin-top: 4px; color: var(--ink-sub); font-size: .88rem; }

/* コラム本文中の表 */
.doc-table { font-size: 14px; }
.doc-table thead th { cursor: default; padding: 7px 12px; }
.doc-table tbody td { padding: 7px 12px; }
.doc .formula {
    padding: 10px 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    font-weight: 600;
}
.doc .table-wrap { margin: 12px 0 18px; }

/* --- フッター --- */
.site-footer {
    border-top: 1px solid var(--line);
    color: var(--ink-sub);
    font-size: .78rem;
    padding: 16px 0 40px;
}
.site-footer p { margin: 4px 0; }
/* 機能ページの行と、サイト情報（about/privacy）の行を分ける */
.site-footer .footer-info { margin-top: 10px; }

.updated-at { color: var(--ink-sub); font-size: .8rem; margin: 0 0 14px; }

/* --- ハウジング代行掲示板 --- */
.board-actions { margin: 14px 0 4px; }
.post-button {
    display: inline-block;
    font: inherit;
    font-weight: 600;
    font-size: .92rem;
    padding: 7px 22px;
    color: #fff;
    background: var(--accent);
    border: 1px solid var(--accent);
    cursor: pointer;
}
.post-button:hover { background: #3d5871; text-decoration: none; }
.board-actions .note { display: block; margin-top: 6px; color: var(--ink-sub); font-size: .82rem; }

.board-post { padding: 14px 0; border-top: 1px solid var(--line); }
.board-post:last-of-type { border-bottom: 1px solid var(--line); }
.board-post h3 { font-size: 1rem; margin: 0 0 6px; }
.post-kind {
    display: inline-block;
    padding: 0 8px;
    margin-right: 8px;
    border: 1px solid var(--line-strong);
    font-weight: 700;
    font-size: .8em;
    vertical-align: 1px;
}
.post-kind.offer { border-color: #8fa6b3; color: #3f5b6b; background: #eef3f6; }
.post-kind.request { border-color: #b9a67f; color: #7d5f2a; background: #f7f2e8; }
.post-meta { margin: 0 0 6px; color: var(--ink-sub); font-size: .82rem; }
.board-post .post-price { margin-left: 6px; }
.board-post h3 .size-tag { vertical-align: 1px; }
.post-body { margin: 0 0 6px; }
.post-contact { margin: 0; font-size: .88rem; }

/* トップ: エリア別の土地データへの導線（各エリアのSSを薄く敷いたカード） */
.plot-nav { margin-bottom: 26px; }
.plot-nav .overview-hint { margin: 0 0 10px; }
.area-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}
.area-card {
    display: flex;
    align-items: flex-end;
    min-height: 76px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    background-color: var(--panel);
    background-size: cover;
    background-position: center;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    white-space: nowrap;
}
.area-card:hover { border-color: var(--line-strong); text-decoration: none; }
@media (max-width: 720px) {
    .area-grid { grid-template-columns: repeat(2, 1fr); }
    .area-card { min-height: 60px; }
}

/* 投稿フォーム */
.board-form fieldset {
    border: 1px solid var(--line);
    background: var(--panel);
    padding: 10px 14px;
    margin: 14px 0;
}
.board-form legend { font-weight: 700; font-size: .9rem; padding: 0 6px; }
.board-form .radio { display: block; margin: 4px 0; }
.board-form .field { margin: 12px 0; }
.board-form .field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 3px; }
.board-form select {
    font: inherit;
    font-size: .95rem;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
}
.board-form input[type="text"], .board-form input[type="password"], .board-form textarea {
    font: inherit;
    width: 100%;
    max-width: 480px;
    padding: 6px 8px;
    border: 1px solid var(--line-strong);
    background: #fff;
    color: var(--ink);
}
.board-form textarea { max-width: 100%; }
.board-form input.price-input { width: 6.5em; text-align: right; }
.board-form small { display: block; color: var(--ink-sub); font-size: .8rem; margin-top: 2px; }
.board-form .req {
    font-size: .72rem;
    font-weight: 700;
    color: #8a3b3b;
    border: 1px solid #b98a8a;
    background: #f7efef;
    padding: 0 5px;
    margin-left: 4px;
    vertical-align: 1px;
}
.board-form .agree { font-size: .92rem; }
/* ハニーポット（ボット対策の隠しフィールド。人には見せない） */
.board-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- 中間幅：8列だと窮屈なので4列（2行）に --- */
@media (max-width: 900px) {
    .world-grid { grid-template-columns: repeat(4, 1fr); }
}

/* --- スマホ --- */
@media (max-width: 720px) {
    .top-grid { grid-template-columns: 1fr; }
    .calendar { width: 100%; }
    .world-grid { grid-template-columns: repeat(2, 1fr); }
    .result-count { width: 100%; margin-left: 0; }
    table { font-size: 13px; }
    tbody td, thead th { padding: 6px 8px; }
}