/* ============================================ article.css — 記事詳細ページ専用スタイル 対象：news/*.html / works/*.html / ルート直下の詳細ページ 読み込み：対象ページの内でstyle.cssの後に記述 メディアクエリ：このファイル末尾に集約 ボタン系（btn-github等）：style.cssのボタンセクションで管理 ============================================ */ /* ==== 記事本文コンテナ ==== */ /* --- 記事カード群 --- */ .article-cards { display: flex; flex-direction: column; gap: 1.25rem; } /* --- 記事本文コンテナ（floatベース） --- */ .article-content { overflow: hidden; } .article-content::after { content: ''; display: table; clear: both; } /* --- 記事見出し（h3） --- */ .article-content h3 { font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-top: 0.75rem; margin-bottom: 0.5rem; line-height: 1.4; } /* ==== 記事画像 ==== */ /* --- 記事画像（float） --- */ /* 幅・float方向はHTML側でstyle属性にて指定 */ /* 例：style="float:left; width:40%; margin:0 1.25rem 1rem 0;" */ .article-img { border-radius: 12px; border: 1px solid var(--panel-border); overflow: hidden; display: block; } .article-img img { width: 100%; height: 100%; display: block; object-fit: cover; } /* --- 記事画像（ページ幅いっぱい） --- */ .article-img-full { border-radius: 12px; border: 1px solid var(--panel-border); overflow: hidden; display: block; width: 100%; margin-bottom: 1rem; clear: both; } .article-img-full img { width: 100%; height: auto; display: block; object-fit: cover; } /* --- 記事画像：WIP --- */ .article-img.wip { position: relative; background: #FFFFFF; overflow: hidden; min-height: 160px; } .article-img.wip::after { content: '鋭意制作中'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; font-weight: 700; color: #141414; background: #ebf801; padding: 0.4rem 1rem; letter-spacing: 0.15em; border-radius: 4px; white-space: nowrap; } /* --- 記事画像：null時ロゴ薄表示 --- */ /* src="" のとき img を非表示にし、ロゴをwatermark表示する */ .article-img:has(img[src=""]) img { display: none; } .article-img:has(img[src=""])::before { content: ''; position: absolute; inset: 0; background: url('/images/nonak_logo.svg') center / 50% no-repeat; opacity: 0.12; z-index: 1; } .article-img:has(img[src=""]) { position: relative; background: #ffffff; min-height: 160px; } /* --- 記事画像：波線（続きあり表現） --- */ .article-img-continues-bottom { position: relative; overflow: hidden; } .article-img-continues-bottom::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; background: url('/images/wavy-bottom.svg') bottom/100% 22px no-repeat, linear-gradient(transparent, rgba(240, 237, 232, 0.92)); pointer-events: none; } /* ==== 記事内表組 ==== */ .article-table-wrap { overflow-x: auto; overflow-y: auto; max-height: 300px; /* 表組の最大高さ */ margin-left: 1.5rem; /* border-radius: 12px; 表組の角丸12px */ border: 1px solid var(--line-color); } .article-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .article-table th { background: var(--body-bg); padding: 0.2rem 0.5rem; text-align: left; border-right: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); font-weight: 700; white-space: nowrap; } .article-table th:last-child { border-right: none; } .article-table td { background: var(--container-bg); padding: 0.2rem 0.5rem; border-right: 1px solid var(--line-color); border-bottom: 1px solid var(--line-color); white-space: normal; /* nowrapにすると1行固定 */ vertical-align: top; /* 追加：上寄せ */ font-size: 0.78rem; /* 追加：一回り小さく */ color: var(--text-sub); /* 追加：薄め */ } .article-table td:first-child { white-space: nowrap; font-size: 0.85rem; /* 1列目は元のサイズのまま */ color: var(--text-main); /* 1列目は薄めにしない */ } .article-table td:last-child { border-right: none; } .article-table tr:last-child td { border-bottom: none; } .article-table tr:hover td { background: var(--hover-bg); } /* --- 記事罫線 --- */ .article-rule { border: none; border-top: 1px solid var(--line-color); margin: 0; } /* ==== 記事本文 ==== */ /* --- 本文テキスト --- */ .article-body p, .article-body li { line-height: 1.4; color: var(--text-main); margin-bottom: 0.1rem; font-size: 0.88rem; } .article-body p:last-child, .article-body li:last-child { margin-bottom: 0; } /* --- リスト：見出し項目（●■） --- */ .article-body .list-disc, .article-body .list-rect { list-style: none; margin: 0.75rem 0 0 0; padding: 0; } .article-body .list-disc li, .article-body .list-rect li { font-size: 1rem; font-weight: 700; margin-bottom: 0; } .article-body .list-disc li::before { content: '●'; margin-right: 0.4rem; } .article-body .list-rect li::before { content: '■'; margin-right: 0.4rem; } /* --- リスト：通常項目（ol・ul） --- */ .article-body ul, .article-body ol { margin: 0 0 0.1rem 0; padding: 0 0 0.25rem 1.5rem; } .article-body li:last-child { margin-bottom: 0; } /* --- リンクボタン群ラッパー --- */ .article-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } /* --- GitHubリンクボタン --- */ .btn-github { display: inline-flex; align-items: center; gap: 0.4rem; background: #24292e; color: #fff; font-size: 0.75rem; font-weight: 700; padding: 2px 12px; border-radius: 999px; text-decoration: none; transition: background 0.2s; } .btn-github:hover { background: #444d56; } /* ==== image-viewer ==== */ /* --- 共通コンテナ --- */ .image-container { position: relative; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--container-bg); display: block; overflow: hidden; cursor: pointer; } /* ==== スライダー ==== */ /* --- トラック（高さはコンテナに追従） --- */ .image-container.slider .iv-track { position: relative; width: 100%; height: 100%; } /* --- 各スライド --- */ .iv-slide { display: none; width: 100%; height: 100%; } .iv-slide.is-active { display: block; } .iv-slide img { width: 100%; height: 100%; display: block; object-fit: cover; } /* --- キャプション（画像下部にオーバーレイ） --- */ .iv-caption { position: absolute; bottom: 12px; /* 角丸の直上 */ left: 0; right: 0; padding: 0.3rem 0.75rem; font-size: 0.75rem; font-weight: 700; color: #fff; background: rgba(20, 20, 19, 0.55); text-align: left; /* キャプションの文字寄せ */ pointer-events: none; } /* --- 前後ボタン（画像上にレイヤー） --- */ .iv-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(20, 20, 19, 0.35); border: none; border-radius: 50%; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; transition: background 0.2s; z-index: 2; } .iv-btn:hover { background: rgba(20, 20, 19, 0.65); } .iv-btn .material-symbols-rounded { font-size: 1.2rem; } .iv-prev { left: 0.4rem; } .iv-next { right: 0.4rem; } /* --- カウンター --- */ .iv-counter { position: absolute; top: 0.3rem; left: 0.5rem; bottom: auto; right: auto; font-size: 0.72rem; color: #fff; background: rgba(20, 20, 19, 0.45); padding: 0.1rem 0.4rem; border-radius: 4px; pointer-events: none; z-index: 2; } /* ==== 縦スクロール ==== */ .image-container.scroll { overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; } .iv-scroll-track { display: flex; flex-direction: column; } .iv-scroll-item img { width: 100%; height: auto; display: block; } /* ==== 拡大モーダル ==== */ .iv-modal-overlay { display: none; position: fixed; inset: 0; z-index: 500; background: rgba(15, 19, 24, 0.75); align-items: center; justify-content: center; } .iv-modal-overlay.is-open { display: flex; } .iv-modal-card { position: relative; background: var(--container-bg); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4); padding: 2rem 1.5rem 1.5rem; width: 90%; max-width: 640px; max-height: 90vh; overflow-y: auto; text-align: center; } .iv-modal-img { width: 100%; height: auto; border-radius: 8px; display: block; } .iv-modal-caption { margin-top: 0.75rem; font-size: 0.85rem; font-weight: 700; color: var(--text-sub); } .iv-modal-close { position: absolute; top: 0.75rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--text-sub); display: flex; align-items: center; transition: color 0.2s; } .iv-modal-close:hover { color: var(--text-main); } /* ==== レスポンシブ（記事系） ==== */ @media (max-width: 767px) { .article-img, .article-img-full, .img-dummy-logo, .image-container { float: none !important; width: 100% !important; margin: 0 0 1rem 0 !important; } }