@charset "utf-8";
/* お知らせ（一覧・記事）— 2026-08-31
   現行ブログ（配布テーマ LIQUID LIGHT）の並びに寄せた（2026-08-31 門田さん指示）。
   ・見出しは濃紺の帯。左に店のロゴ、中央に題名。下にベージュのサブメニュー。
   ・一覧はカード3列（現行の col-md-4）。記事は 本文＋右の欄（検索・最近の投稿）。
   ・SNSシェアは入れない（現行はプラグイン AddToAny の機能。CSS/JSが増えるので入れない。共通S-6）
   ・WordPress標準のCSSは読み込まない方針なので、本文で使う配置クラスもここで定義する。
   ・寸法は「いまの件数」に依存しない書き方にする（記事は増える）。 */

/* ------------------------------------------------------------------
 * 見出しの帯
 * 背景は本文と同じ和紙のテクスチャを暗くして重ねる。
 * （現行ブログの帯の画像は配布テーマ側にあり、新サイトには持ってきていない）
 * ------------------------------------------------------------------ */
.yn-news-band {
	position: relative;
	background-image: linear-gradient(rgba(10,16,32,.62), rgba(10,16,32,.62)), url("/assets/images/header-bg.webp");
	background-repeat: repeat;
	border-bottom: 1px solid rgba(201,179,122,.45);
}
.yn-news-band__inner {
	max-width: 1200px; margin: 0 auto; padding: 18px 16px;
	display: flex; align-items: center; gap: 20px;
}
.yn-news-band__logo { flex: 0 0 auto; display: block; line-height: 0; }
.yn-news-band__logo img { width: 74px; height: auto; }
.yn-news-band__text { flex: 1 1 auto; text-align: center; padding-right: 94px; }
.yn-news-band__ttl {
	margin: 0; color: #fff; font-size: 30px; line-height: 1.35; letter-spacing: .08em; font-weight: normal;
	font-family: 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', serif;
}
.yn-news-band__sub { margin: 2px 0 0; color: #fff; font-size: 15px; letter-spacing: .16em; }

/* サブメニュー（現行のベージュの帯） */
.yn-news-subnav { background: #f4efdd; border-bottom: 1px solid #e0d7bb; }
.yn-news-subnav ul {
	list-style: none; margin: 0 auto; padding: 0 16px; max-width: 1200px;
	display: flex; gap: 24px; align-items: center; min-height: 40px;
}
.yn-news-subnav a { display: block; padding: 10px 0; color: #3a3320; font-size: 14px; text-decoration: none; }
.yn-news-subnav a:hover { color: #8a6f24; text-decoration: underline; }

/* ------------------------------------------------------------------
 * 一覧
 * ------------------------------------------------------------------ */
.yn-news { padding: 0 0 60px; }
.yn-news-inner { max-width: 1200px; margin: 0 auto; padding: 32px 16px 0; }

.yn-news-notice {
	max-width: 820px; margin: 0 auto 24px; padding: 10px 14px;
	background: rgba(255,255,255,.9); border-left: 4px solid #c9b37a;
	font-size: 13px; line-height: 1.7; color: #333;
}

.yn-news-cards {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr);
}
.yn-news-card { margin: 0; }
.yn-news-card__link {
	display: block; height: 100%; background: #fbf8ec; border-radius: 3px; overflow: hidden;
	text-decoration: none; color: #33302a; box-shadow: 0 2px 6px rgba(0,0,0,.3);
	transition: transform .2s ease, box-shadow .2s ease;
}
.yn-news-card__link:hover { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(0,0,0,.4); }
.yn-news-card__thumb {
	display: block; width: 100%; aspect-ratio: 4 / 3;
	background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #e6e0cf;
}
.yn-news-card__text { display: block; padding: 12px 14px 16px; }
.yn-news-card__date { display: inline-block; font-size: 12px; color: #8a8371; }
.yn-news-card__cat { display: inline-block; font-size: 12px; color: #8a6f24; margin-left: 8px; }
.yn-news-card__ttl { display: block; margin-top: 6px; font-size: 15px; line-height: 1.55; font-weight: bold; }

.yn-news-none { color: #fff; text-align: center; padding: 40px 0; }

/* ページ送り */
.yn-news-pager { margin: 36px 0 0; text-align: center; }
.yn-news-pager ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.yn-news-pager a, .yn-news-pager span.current, .yn-news-pager span.dots {
	display: block; min-width: 38px; padding: 8px 10px; border-radius: 3px;
	background: #fbf8ec; color: #33302a; text-decoration: none; font-size: 14px;
}
.yn-news-pager span.current { background: #c9b37a; color: #fff; }
.yn-news-pager span.dots { background: transparent; color: #fff; }

/* 検索フォーム（一覧では下端、記事では右の欄） */
.yn-news-search { display: flex; gap: 8px; margin: 40px auto 0; justify-content: center; }
.yn-news-search input[type="search"] {
	width: min(340px, 60vw); padding: 8px 12px; border: 1px solid #ccc; border-radius: 3px;
	background: #fff; font-size: 14px;
}
.yn-news-search button {
	padding: 8px 18px; border: 0; border-radius: 3px; cursor: pointer;
	background: #c9b37a; color: #fff; font-size: 14px;
}

/* ------------------------------------------------------------------
 * 記事
 * ------------------------------------------------------------------ */
.yn-news-cols { display: flex; gap: 28px; align-items: flex-start; }
.yn-news-main { flex: 1 1 auto; min-width: 0; }

/* 上の余白は「親の padding」で作る。子の margin-top にすると相殺で親の外へ漏れ、
   #main-content の margin(3vw=約48px) と一本化されて固定ヘッダー(4vw=約64px)より小さくなり、
   記事の頭がヘッダーに潜り込む（2026-08-31 実機で発生）。→ [[legacy-css-geometry]] */
.yn-article { background: #fbf8ec; border-radius: 3px; padding: 30px 30px 40px; margin: 0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.yn-article__ttl {
	font-size: 26px; line-height: 1.5; margin: 0 0 10px; color: #2b2718;
	font-family: 'ＭＳ Ｐ明朝', 'MS PMincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', serif;
}
.yn-article__meta { margin: 0 0 22px; padding: 0 0 14px; font-size: 13px; color: #8a8371; border-bottom: 1px solid #e2dcc7; }
.yn-article__cat { margin-left: 10px; color: #8a6f24; }
.yn-article__body { font-size: 15px; line-height: 1.9; color: #33302a; word-wrap: break-word; }
.yn-article__body p { margin: 0 0 1.4em; }
.yn-article__body a { color: #1a5fb4; text-decoration: underline; }
.yn-article__body img { max-width: 100%; height: auto; }
.yn-article__body ul, .yn-article__body ol { margin: 0 0 1.4em; padding-left: 1.6em; }

/* 現行の記事は <iframe width="100%" height="auto"> と書かれている。
   height:auto はiframeでは効かず既定の150pxになるので、比率で高さを決める。 */
.yn-article__body iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* WordPress標準のCSS（wp-block-library）を読み込まない方針なので、
   本文で使う配置クラスをここで定義する。現行ブログは配布テーマのCSSに頼っていた。 */
.yn-article__body .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.yn-article__body .alignleft { float: left; margin: 0 1.2em .8em 0; }
.yn-article__body .alignright { float: right; margin: 0 0 .8em 1.2em; }
.yn-article__body .alignnone { display: block; height: auto; }
.yn-article__body .wp-caption { max-width: 100%; margin-bottom: 1.4em; }
.yn-article__body .wp-caption-text { font-size: 13px; color: #777; text-align: center; margin: .4em 0 0; }
.yn-article__body::after { content: ""; display: block; clear: both; }

/* 記事の下のリンク */
.yn-article-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 0; }
.yn-article-nav span { flex: 1 1 0; }
.yn-article-nav__back { text-align: center; }
.yn-article-nav__next { text-align: right; }
.yn-article-nav a { color: #fff; text-decoration: none; font-size: 14px; }
.yn-article-nav a:hover { text-decoration: underline; }

/* 右の欄（検索・最近の投稿） */
.yn-news-side { flex: 0 0 300px; }
.yn-news-side .yn-news-search { margin: 0; justify-content: flex-start; }
.yn-news-side .yn-news-search input[type="search"] { width: 100%; min-width: 0; }
.yn-news-side__box { margin: 22px 0 0; background: #fbf8ec; border-radius: 3px; padding: 16px 18px 20px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.yn-news-side__ttl { margin: 0 0 10px; padding: 0 0 8px; font-size: 15px; color: #2b2718; border-bottom: 2px solid #c9b37a; }
.yn-news-side__list { list-style: none; margin: 0; padding: 0; }
.yn-news-side__list li { border-bottom: 1px dotted #ded6bd; }
.yn-news-side__list li:last-child { border-bottom: 0; }
.yn-news-side__list a { display: block; padding: 9px 0; color: #33302a; font-size: 13px; line-height: 1.5; text-decoration: none; }
.yn-news-side__list a:hover { color: #8a6f24; text-decoration: underline; }

/* 読み上げだけに出す文字（WordPress標準のCSSを読まないので自前で持つ） */
.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------
 * 狭い画面
 * 現行と同じく タブレット=2列 / スマホ=1列。帯は縦に積む。
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1199px) {
	.yn-news-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.yn-news-cols { display: block; }
	.yn-news-side { margin: 24px 0 0; }
	.yn-news-band__text { padding-right: 0; }
}
@media screen and (max-width: 767px) {
	.yn-news-cards { grid-template-columns: 1fr; }
	.yn-news-band__inner { flex-direction: column; gap: 8px; padding: 14px 16px; }
	.yn-news-band__logo img { width: 56px; }
	.yn-news-band__ttl { font-size: 21px; }
	.yn-news-band__sub { font-size: 13px; }
	.yn-news-subnav ul { gap: 18px; }
	.yn-news-inner { padding-top: 20px; }
	.yn-article { padding: 20px 16px 28px; }
	.yn-article__ttl { font-size: 19px; }
	.yn-article__body { font-size: 14px; }
	.yn-news-search { flex-wrap: wrap; }
}