@charset "UTF-8"; /* ============================================================= fs-news.css — お知らせ一覧／お知らせ記事／コラム記事／カテゴリー一覧 ・クラスは fs-news-*（出力は inc/news.php とテンプレート） ・Cure（購入テーマ）の CSS・PHP は流用しない。寸法と色は本番キャプチャの実測値。 ・content.css のあとに読み込まれるので、本文まわりはここが優先される。 ============================================================= */ /* ---- 本番から採取した記事まわりの色（base.css の派生色に足す） ---- */ :root { --fs-news-heading: #4b2e1d; /* 記事内 h2 / h3 の文字 */ --fs-news-bar: #a17442; /* h2 の左バー・h3 の破線 */ --fs-news-band: #f7f3ef; /* h2 の帯の地色 */ --fs-news-body: #333; /* 本文 */ --fs-news-date: #999; /* 日付 */ --fs-news-edge: #ebebeb; /* 一覧・カードの罫線 */ --fs-news-noimg: #c6c6c6; /* NO IMAGE の地色 */ --fs-news-dark: #221815; /* ボタン・現在ページ番号の地色 */ } /* ============================================================= 枠組み（本番：コンテンツ幅 1000px / 本文カラム 700px / サイドバー 250px） ============================================================= */ .fs-news-wrap { width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 0 100px; } .fs-news-wrap--side { display: grid; grid-template-columns: 700px 250px; justify-content: space-between; align-items: start; } .fs-news-main { width: 700px; max-width: 100%; } .fs-news-wrap--wide .fs-news-main { width: 100%; } .fs-news-side { width: 250px; } .fs-news-desc { font-size: 15px; line-height: 2; margin: 0 0 30px; } /* 画像枠の共通（本番は背景画像でトリミング。ここは img + object-fit） */ .fs-news-item__thumb, .fs-news-card__thumb, .fs-news-head__thumb, .fs-news-mini__thumb { overflow: hidden; background: var(--fs-news-noimg); } .fs-news-item__thumb img, .fs-news-card__thumb img, .fs-news-head__thumb img, .fs-news-mini__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .is-noimage { display: flex; align-items: center; justify-content: center; } .fs-news-noimg { font-family: var(--fs-font-en); font-size: 17px; letter-spacing: .06em; color: var(--fs-white); } /* ============================================================= お知らせ一覧（サムネイル左・日付＋タイトル右） ============================================================= */ .fs-news-item__link { display: grid; grid-template-columns: 330px 1fr; align-items: stretch; color: inherit; } .fs-news-item__thumb { aspect-ratio: 700 / 440; } .fs-news-item__thumb img { transition: transform .5s; } .fs-news-item__link:hover .fs-news-item__thumb img { transform: scale(1.05); } .fs-news-item__body { display: flex; flex-direction: column; justify-content: center; padding: 18px 60px; border-right: 1px solid var(--fs-news-edge); border-bottom: 1px solid var(--fs-news-edge); } .fs-news-item:first-child .fs-news-item__body { border-top: 1px solid var(--fs-news-edge); } .fs-news-item__date { display: block; font-family: var(--fs-font-en); font-size: 12px; letter-spacing: .04em; color: var(--fs-news-date); margin-bottom: 18px; } /* 本番どおりタイトルは2行で打ち切る（項目の高さをサムネイルにそろえるため） */ .fs-news-item__ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 16px; font-weight: 400; line-height: 2; color: var(--fs-text); } .fs-news-item__link:hover .fs-news-item__ttl { opacity: .7; } /* ============================================================= カード一覧（カテゴリー・汎用アーカイブ・関連記事） ============================================================= */ .fs-news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } .fs-news-card { position: relative; display: flex; flex-direction: column; } .fs-news-card__thumb { position: relative; aspect-ratio: 700 / 440; } .fs-news-card__thumb img { transition: transform .5s; } .fs-news-card:hover .fs-news-card__thumb img { transform: scale(1.05); } /* カテゴリーバッジ（サムネイルの左下に重なる） */ .fs-news-card__cat { position: absolute; left: 30px; bottom: 0; z-index: 2; height: 29px; line-height: 29px; padding: 0 14px; background: var(--fs-accent); color: var(--fs-white); font-size: 13px; letter-spacing: .04em; } .fs-news-card__cat a { color: inherit; } .fs-news-card__body { flex: 1; display: flex; flex-direction: column; padding: 25px 30px 30px; border: 1px solid var(--fs-news-edge); border-top: 0; } .fs-news-card__ttl { font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--fs-text); } /* タイトルのリンクをカード全面に広げる（カテゴリーバッジのリンクは z-index で手前に残す）。 行数の打ち切り（overflow:hidden）は の内側の に当てる。 自身に当てると ::after が切られる。 */ .fs-news-card__ttl a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .fs-news-card:hover .fs-news-card__ttl { opacity: .7; } .fs-news-card__date { margin-top: auto; padding-top: 24px; font-family: var(--fs-font-en); font-size: 12px; color: var(--fs-news-date); } /* ============================================================= 記事の見出し部（サムネイル → カテゴリー → h1 → 日付） ============================================================= */ .fs-news-head { margin-bottom: 55px; } .fs-news-head__thumb { position: relative; aspect-ratio: 700 / 440; margin-bottom: 28px; } .fs-news-head__cat { position: absolute; left: 0; bottom: 0; z-index: 2; height: 29px; line-height: 29px; padding: 0 14px; background: var(--fs-accent); color: var(--fs-white); font-size: 13px; letter-spacing: .04em; } .fs-news-head__cat a { color: inherit; } .fs-news-head__ttl { font-size: 26px; font-weight: 500; line-height: 1.6; color: var(--fs-text); } .fs-news-head__date { margin-top: 14px; font-family: var(--fs-font-en); font-size: 12px; color: var(--fs-news-date); } /* ============================================================= 本文（エディタの出力。h2/h3/p/ul/ol/figure/table） ============================================================= */ .fs-news-body { font-size: 16px; line-height: 1.8; color: var(--fs-news-body); } /* 本番と同じ。段落だけ 2.2 に広げる */ .fs-news-body > * + * { margin-top: 1.5em; } /* ここより詳細度の高い p { margin:0 } を足さないこと（段落間が詰まる） */ .fs-news-body p { margin-bottom: 32px; line-height: 2.2; } /* 本番の段落。上下マージンは相殺されるので上は * + * に任せる */ .fs-news-body strong { font-weight: 700; } .fs-news-body a { color: inherit; text-decoration: underline; } .fs-news-body a:hover { text-decoration: none; } .fs-news-body h2 { margin: 40px 0 27px; padding: .6em 1.2em; background: var(--fs-news-band); border-left: 6px solid var(--fs-news-bar); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--fs-news-heading); } /* 旧テーマのエディタ用クラス。本文に残っているので本番と同じ見た目を用意する（帯ではなく下線） */ .fs-news-body h2.styled_h2 { margin: 40px 0 30px; padding: 30px 0; background: none; border-left: 0; border-bottom: 1px solid #222; font-size: 22px; color: #000; } .fs-news-body h2 strong { font-weight: inherit; } .fs-news-body h3 { margin: 40px 0 22px; padding: 11px 0 11px 22px; border-bottom: 1px dashed var(--fs-news-bar); font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--fs-news-heading); } .fs-news-body h3 strong { font-weight: inherit; } .fs-news-body h4 { margin: 32px 0 14px; font-size: 17px; color: var(--fs-news-heading); } .fs-news-body ul, .fs-news-body ol { margin-bottom: 24px; padding-left: 0; } .fs-news-body ul { margin-left: 20.8px; } .fs-news-body ol { margin-left: 24px; } .fs-news-body ul li { list-style: circle; } .fs-news-body ol li { list-style: decimal; } .fs-news-body li { margin: 0; } .fs-news-body li { line-height: 2.4; } .fs-news-body figure { margin: 0; } /* 本番どおり。前後の空きは段落側のマージンが持つ */ .fs-news-body figure.aligncenter { margin: 0 30px 7px; } /* 旧テーマの中央寄せ画像 */ .fs-news-body > *:first-child { margin-top: 0; } /* 本文の先頭に余計な空きを作らない */ .fs-news-body img { height: auto; } .fs-news-body figcaption { font-size: 13px; color: var(--fs-muted); margin-top: 8px; } .fs-news-body table { width: 100%; border-collapse: collapse; font-size: 14px; } .fs-news-body th, .fs-news-body td { border: 1px solid var(--fs-news-edge); padding: 12px 14px; } .fs-news-body th { background: var(--fs-news-band); font-weight: 600; text-align: left; } /* ============================================================= 監修医情報（コラム記事の本文下） ============================================================= */ .fs-news-sprvs { margin-top: 60px; border: 1px solid var(--fs-news-edge); padding: 28px 30px 32px; } .fs-news-sprvs__ttl { font-size: 17px; font-weight: 500; color: var(--fs-text); padding-bottom: 14px; border-bottom: 1px solid var(--fs-news-edge); } .fs-news-sprvs__head { display: grid; grid-template-columns: 130px 1fr; gap: 22px; align-items: center; margin-top: 22px; } .fs-news-sprvs__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .fs-news-sprvs__clinic { font-size: 13px; color: var(--fs-muted); } .fs-news-sprvs__person { font-size: 19px; font-weight: 500; color: var(--fs-text); margin-top: 6px; } .fs-news-sprvs__block { margin-top: 26px; } .fs-news-sprvs__bttl { font-size: 14px; font-weight: 500; color: var(--fs-text); padding-left: 12px; border-left: 3px solid var(--fs-news-dark); line-height: 1.4; } .fs-news-sprvs__rows { margin-top: 10px; } .fs-news-sprvs__rows li { font-size: 13px; line-height: 1.8; padding: 9px 14px; border-bottom: 1px solid var(--fs-news-edge); } .fs-news-sprvs__list { margin-top: 10px; padding-left: 14px; } .fs-news-sprvs__list li { font-size: 13px; line-height: 1.9; } /* ============================================================= 前後の記事 ============================================================= */ .fs-news-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 60px; } .fs-news-nav__item { border: 1px solid var(--fs-news-edge); } .fs-news-nav__item.is-empty { border: 0; } .fs-news-nav__item a { position: relative; display: flex; align-items: center; min-height: 108px; padding: 14px 30px 14px 60px; color: var(--fs-text); } .fs-news-nav__item:hover { background: var(--fs-news-band); } .fs-news-nav__arw { position: absolute; top: 50%; transform: translateY(-50%); color: var(--fs-muted); font-size: 15px; } .fs-news-nav__arw::before { font-family: "Font Awesome 5 Free"; font-weight: 900; } .is-prev .fs-news-nav__arw { left: 28px; } .is-prev .fs-news-nav__arw::before { content: "\f104"; } .fs-news-nav__item.is-next a { padding: 14px 60px 14px 30px; text-align: right; justify-content: flex-end; } .is-next .fs-news-nav__arw { right: 28px; } .is-next .fs-news-nav__arw::before { content: "\f105"; } .fs-news-nav__ttl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; line-height: 1.9; } /* ============================================================= セクション見出し（短い横棒＋見出し）／一覧へのボタン ============================================================= */ .fs-news-sec { text-align: center; margin: 80px 0 30px; } .fs-news-sec::before { content: ""; display: block; width: 128px; height: 3px; background: var(--fs-news-dark); margin: 0 auto 22px; } .fs-news-sec.is-left { text-align: left; } .fs-news-sec.is-left::before { margin-left: 0; } .fs-news-sec__ttl { font-size: 16px; font-weight: 400; color: var(--fs-text); } .fs-news-more { text-align: center; margin-top: 45px; } .fs-news-btn { display: inline-block; min-width: 280px; padding: 18px 30px; background: var(--fs-news-dark); color: var(--fs-white); font-size: 15px; text-align: center; transition: opacity .2s; } .fs-news-btn:hover { opacity: .8; } .fs-news-recent, .fs-news-related { margin-top: 20px; } /* ============================================================= ページ送り（content.css の .fs-pagination を本番の見た目に寄せる） ============================================================= */ .fs-pagination { margin-top: 60px; } /* paginate_links( type=list ) は