/* =========================================================
   bamboograss | 行優先マソンリー（Grid＋JS） 最終版
   - カードの枠・影なし
   - タイトルはサムネ上のみ（青緑）
   - コンテンツの上下だけ区切り線
   - 説明文は10行で折りたたみ（続きを読む）
   ========================================================= */

/* -----------------------------
   トークン
   ----------------------------- */
:root{
  --bg:#fff;
  --panel:#fafafa;
  --text:#222;
  --muted:#6b7280;
  --accent:#4169e1;       /* サイトのアクセント（リンクなど） */
  --title-color:#1799a5;  /* 見本に合わせたタイトル色（青緑） */
  --divider:#e5e7eb;      /* 上下の区切り線 */
  --gap:18px;
  --sidebar-w:160px;
  --content-max:1424px;
}

/* -----------------------------
   ベース
   ----------------------------- */
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,system-ui,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* -----------------------------
   ヘッダー
   ----------------------------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid #eaeaea;
  backdrop-filter:saturate(150%) blur(6px);
}
.head-inner{
  max-width:var(--content-max);
  margin:0 auto;
  padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:16px; }
.brand .logo{ height:40px; width:auto; }
.brand h1{
  color:var(--accent);
  font-weight:700;
  font-size:clamp(12px,3.2vw,16px);
  letter-spacing:.02em;
  margin:0;
}
.nav a{ color:var(--accent); font-weight:700; border-bottom:2px solid transparent; }
.nav a:hover{ border-bottom-color:var(--accent); }

/* -----------------------------
   レイアウト（本文＋サイド）
   ----------------------------- */
.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding:24px 28px; /* わずかに広げる */
  display:grid;
  grid-template-columns:1fr var(--sidebar-w);
  gap:var(--gap);
}

/* -----------------------------
   サイドバー
   ----------------------------- */
.sidebar{
  position:sticky; top:24px; align-self:start;
  background:var(--panel);
  border:1px solid #e6e6e6;
  border-radius:0;
  padding:12px;
  height:max-content;
}
.sidebar h2{
  margin:6px 0 10px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--accent); text-transform:uppercase;
}
.s-links{ display:flex; flex-direction:column; gap:8px; }
.s-links a{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px;
  background:#fff;
  border:1px solid #dbe3ff;
  color:#111;
}
.s-links a:hover{
  background:rgba(65,105,225,.06);
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(65,105,225,.12) inset;
}

/* -----------------------------
   行優先マソンリー（Grid＋JS）
   ----------------------------- */
.grid-rows{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1fr;   /* スマホ1列 */
  align-items:start;
  grid-auto-rows:auto;         /* JS適用前の潰れ防止 */
}
@media (min-width:768px){
  .grid-rows{ grid-template-columns:1fr 1fr; } /* PCで2列 */
}
.js-ready .grid-rows{ grid-auto-rows:8px; }     /* JS適用後は8px刻み */
.card{ grid-row-end:span var(--row-span,1); }   /* JSが縦スパンを指定 */

/* -----------------------------
   カード（枠・影なし／上下だけ区切り）
   ----------------------------- */
.card{
  border:none;
  box-shadow:none;
  background:transparent;
  margin:0;                /* 縦間隔は gap に任せる */
  overflow:visible;        /* テキスト切れ防止 */
}

/* 上の境目（タイトルブロックの上） */
.card-head{
  padding:10px 0 8px;
  border-top:1px solid var(--divider);
  border-bottom:none;
  background:transparent;
}
/* タイトル（サムネ上にのみ表示） */
.card-head .title{
  color:var(--title-color);
  font-weight:700;
  font-size:clamp(18px,2.6vw,22px);
  line-height:1.25;
  margin:0 0 6px;
}
.card-head .title a{
  color:var(--title-color);
  text-decoration:none;
}
.card-head .title a:hover{
  text-decoration:underline;
  text-underline-offset:2px;
}

/* サムネ（2:1固定／フル幅） */
.thumb{ width:100%; margin:0 0 8px; display:block; background:transparent; }
.thumb .ph{ width:100%; aspect-ratio:2 / 1; display:block; overflow:hidden; }
.thumb .ph img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 下の境目（本文の下） */
.body{
  padding:0 0 16px;
  border-bottom:1px solid var(--divider);
}
.body .meta{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.02em;
  margin:0 0 8px;
}
.body .desc{
  color:#222;
  font-size:15px;
  line-height:1.75;
  margin:0;
}

/* -----------------------------
   フッター
   ----------------------------- */
footer{
  padding:40px 24px 80px;
  color:var(--muted);
  text-align:center;
  border-top:1px solid #efefef;
  background:#fff;
}

/* -----------------------------
   モバイル調整
   ----------------------------- */
@media (max-width:991px){
  .wrap{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}
@media (max-width:480px){
  .brand .logo{ height:44px; }
  .brand{ gap:12px; }
}

/* -----------------------------
   アクセシビリティ
   ----------------------------- */
a:focus-visible{
  outline:3px solid rgba(65,105,225,.45);
  outline-offset:2px;
}

/* -----------------------------
   説明文の折りたたみ（既定10行）
   ----------------------------- */
.desc{ position:relative; }
.desc.is-clamped{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:5;   /* ← 行数変更はここ */
  overflow:hidden;
}
/* 下端グラデ（任意） */
.desc.is-clamped::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:2.6em; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}
/* もっと読むボタン */
.readmore{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
}
.readmore:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ===== 調整：上ライン削除／縦スペース1.3倍 ===== */

/* 上ラインを消す（カードの先頭ブロック） */
.card-head{
  border-top: none !important;
}

/* ===== 縦の間隔だけ狭くする（例：0.7倍） ===== */
.grid-rows{
   column-gap: calc(var(--gap) * 1.3); /* 横（列間）だけ広げる */
  row-gap: calc(var(--gap) * 0.1); /* 数字はお好みで 0.6〜0.9 など */
}

/* カード内の縦余白を控えめに（任意） */
.thumb{ margin-bottom: 6px; }  /* 既定 8px → 6px */
.body{  padding-bottom: 22px; }/* 既定 16px → 12px */

/* ==== 区切り線を少し太く＆タイトルと同色に ==== */
/* サイト上部のタイトル色も作品タイトルと揃える */
.brand h1{
  color: var(--title-color) !important;
}

/* 各コンテンツの下ライン：色＝タイトル色、太さ＝2px */
.card .body{
  border-bottom: 1px solid var(--title-color) !important;
}

/* （保険）上ラインは出さない */
.card-head{
  border-top: none !important;
}
/* ==== コンテンツ下ラインをグレーに ==== */
/* 好みの濃さに変える場合はカラーを調整 (#cbd5e1=薄 / #9ca3af=中 / #6b7280=やや濃) */
.card .body{
  border-bottom: 0.5px solid #9ca3af !important;  /* 中くらいのグレー */
}

/* 念のため上ラインは非表示のまま */
.card-head{
  border-top: none !important;
}

/* ===== カード全体を枠で囲む（前のスタイルに復帰） ===== */

/* 枠の色は既存の --divider（グレー）を流用 */
.card{
  background: #fff !important;
  border: 1px solid var(--divider) !important;  /* 例: #e5e7eb 等 */
  box-shadow: 0 2px 8px rgba(0,0,0,.04);        /* ごく薄い影（不要なら削除） */
}

/* タイトル・本文で出していた区切り線はオフ（枠と二重にならないように） */
.card-head{ border-top: none !important; }
.card .body{ border-bottom: none !important; }

/* 余白のバランス（お好みで調整可） */
.card-head{ padding: 12px 12px 8px !important; }
.thumb{ margin: 0 0 8px !important; }
.body{ padding: 0 12px 14px !important; }

/* ===== タイトルをサムネイルの下へ（CSSだけで順序入れ替え） ===== */
.card{
  display: flex !important;
  flex-direction: column !important;
}

/* 並び順：1) サムネ → 2) タイトル → 3) 本文 */
.thumb{ order: 1 !important; margin: 0 0 8px !important; }
.card-head{
  order: 2 !important;
  padding: 8px 12px 0 !important;   /* 余白は下に少しだけ */
  border: 0 !important;             /* 枠ありカードなので内側の線は消す */
  background: transparent !important;
}
.body{
  order: 3 !important;
  padding: 0 12px 14px !important;  /* 既存のカード内余白に合わせる */
}

/* タイトルの体裁はそのまま活かす（色・サイズ） */
.card-head .title{
  color: var(--title-color);
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.25;
  margin: 0 0 6px;
}

/* ===== サムネイル（カード）同士の上下スペースを拡げる ===== */
.grid-rows{
  row-gap: calc(var(--gap) * 0.5) !important;  /* 縦だけ 1.2倍に */
  /* column-gap はそのまま（現在の設定を維持） */
}

/* （任意）同一カード内：サムネとタイトルの間も少し広げる */
.thumb{ margin: 0 0 12px !important; }  /* 既定 8px → 12px */