/* ========================================================================= note_top_style.css ------------------------------------------------------------------------- トップページ（index.html）の「Today's KUZUKO」カード表示専用のCSSです。 既存の css/top.css にあった .note-card 等の名前とは完全に分離し、 "kzm-note-" という専用の接頭辞をつけたクラス名だけを使っています。 これにより、top.css の内容（バージョンや読み込み順、キャッシュの状態） に一切左右されず、常に同じ見た目で表示されます。 画像の正方形表示も、新しいCSSの aspect-ratio に頼らず、 昔から確実に動く「padding-topによる比率固定」の方法で組んでいます。 【設置場所】 /kuz-h/common/note/note_top_style.css 【読み込み方】 index.html の 内に、次の1行を追加してください。 ========================================================================= */ .kzm-note-container { width: 100%; box-sizing: border-box; } .kzm-note-section-title { margin: 0 0 16px; padding-left: 10px; border-left: 4px solid #000080; font-size: 16px; font-weight: bold; } .kzm-note-list { display: flex; flex-wrap: wrap; gap: 60px; margin: 0; padding: 0; list-style: none; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; box-sizing: border-box; } .kzm-note-card { display: block; box-sizing: border-box; /* 4枚並び：gapを3個分(180px)引いて4等分 */ width: calc((100% - 180px) / 4); text-decoration: none; color: #333; transition: opacity 0.2s; } .kzm-note-card:hover { opacity: 0.85; } /* 画像枠：position:relative + padding-top で横長比率（約1.91:1、note標準の アイキャッチ画像比率）を作る。padding-top = 100% / 1.91 ≒ 52.4% */ .kzm-note-thumb-wrap { position: relative; display: block; width: 100%; height: 0; padding-top: 52.4%; /* 横長（約1.91:1）を維持 */ overflow: hidden; border-radius: 3px; background: #eee; box-sizing: border-box; } .kzm-note-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border: 0; } .kzm-note-info { margin-top: 8px; } .kzm-note-date { margin: 0 0 3px; font-family: 'Roboto', sans-serif; font-weight: 700; font-size: 13px; color: #000; } .kzm-note-title { margin: 0; padding-top: 2px; font-size: 15px; font-weight: 400; line-height: 22px; color: #000; /* 長いタイトルは3行で省略 */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================ スマホ（〜768px）============================ 「お知らせ」ページ（layout.css の .newsArea ul.info）と全く同じ仕組み・ サイズで組んでいます： - 画像は position:absolute で左上に配置、横幅120px（高さは1.91:1比率） - テキスト側は padding-left:140px（画像120px＋すき間20px） - 1件ごとに下線（border-bottom）で区切る、横一列の縦並びリスト ============================================================= */ @media only screen and (max-width: 768px) { .kzm-note-list { gap: 0; flex-direction: column; /* ページ本文と同じ左右の余白を確保する */ padding: 0 14px; box-sizing: border-box; } .kzm-note-card { position: relative; display: block; width: 100%; min-height: 110px; padding: 20px 0; border-bottom: 1px solid #c9caca; box-sizing: border-box; } .kzm-note-thumb-wrap { position: absolute; top: 20px; left: 0; width: 120px; height: 0; padding-top: 62.8px; /* 120px × 52.4%（1.91:1比率）＝約63px */ margin: 0; } .kzm-note-info { margin-top: 0; padding-left: 140px; /* 画像幅120px ＋ すき間20px */ box-sizing: border-box; } .kzm-note-date { font-size: 13px; } .kzm-note-title { font-size: 13px; -webkit-line-clamp: 3; } } .note_no_articles { text-align: center; padding: 40px 0; color: #888; }