@charset "UTF-8";
/* ==========================================================================
   OLIVIA BURTON Japan — WordPress の静的 JSON を出す部品（futureshop）
   仕様：futureshop/feed-json-front-spec.md／JS：/item/js/ob-feed.js
   読み込み：テーマ > オリジナルCSS（fs_original.css）の @import

   - futureshop には WordPress の CSS 変数（--ob-ink など）が無いので、値を直接書く
   - 色は docs/30_brand/brand-guideline.md の範囲だけ
   - WordPress も functions.php でこのファイルを読み込んでいる（Information バーの見た目はここだけ）。
     直すと futureshop と WordPress の両方に効く
   - style.css は WordPress と共通なので、ここに書く
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Information バー（ヘッダーのすぐ上）
   -------------------------------------------------------------------------- */
.ob-infobar {
	position: relative;
	z-index: 5;
	background: #2e3233;
	color: #fff;
	font-size: 12px;
	line-height: 1.5;
}
.ob-infobar[hidden] { display: none; }
.ob-infobar__inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1400px;
	min-height: 40px;
	margin: 0 auto;
	padding: 8px 44px 8px 16px;
	box-sizing: border-box;
}
.ob-infobar__label {
	flex: none;
	font-family: 'EB Garamond', 'Times New Roman', serif;
	font-size: 12px;
	letter-spacing: .14em;
	color: #ebd7d5;
}
.ob-infobar__list {
	position: relative;
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}
.ob-infobar__item,
.ob-infobar__item a,
.ob-infobar__item span { min-width: 0; }
.ob-infobar__item {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s cubic-bezier(.2, .7, .2, 1), visibility .6s;
}
.ob-infobar__item.is-active { opacity: 1; visibility: visible; }
.ob-infobar__item a {
	display: flex;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}
.ob-infobar__item a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.ob-infobar__item time { flex: none; opacity: .7; font-variant-numeric: tabular-nums; }
.ob-infobar__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-infobar__close {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 32px; height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: .7;
}
.ob-infobar__close:hover { opacity: 1; }
@media (min-width: 768px) {
	.ob-infobar__inner { padding-left: 32px; }
}
@media (max-width: 767px) {
	.ob-infobar__inner { gap: 10px; }
	.ob-infobar__label { display: none; }
	.ob-infobar__item a { gap: 8px; }
}

/* --------------------------------------------------------------------------
   B. トップの NEWS（最新3件）
   見出し・「ニュース一覧 ＞」は既存の .contents_title・.contents_sub_title（style.css）のまま
   -------------------------------------------------------------------------- */
.ob-topnews[hidden] { display: none !important; }
.ob-topnews__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	list-style: none;
	text-align: left;
	box-sizing: border-box;
}
.ob-topnews__item { margin: 0; }
.ob-topnews__item > a { display: block; color: #000; text-decoration: none; }
/* サムネイル：アイキャッチを 16:9 で切り抜く（WordPress の NEWS 一覧と同じ） */
.ob-topnews__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #f7f7f7;
}
.ob-topnews__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.ob-topnews__item > a:hover .ob-topnews__thumb img { transform: scale(1.04); }
/* アイキャッチが無い記事：灰色の地にロゴ */
.ob-topnews__noimage {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}
.ob-topnews__thumb .ob-topnews__noimage img {
	width: 62%;
	max-width: 160px;
	height: auto;
	object-fit: contain;
	opacity: .25;
	transform: none !important;
}
.ob-topnews__body { display: block; min-width: 0; }
.ob-topnews__body time {
	display: block;
	font-family: 'EB Garamond', 'Times New Roman', serif;
	font-size: 13px;
	letter-spacing: .08em;
	color: #666;
}
.ob-topnews__title { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; }
.ob-topnews__item > a:hover .ob-topnews__title { text-decoration: underline; text-underline-offset: 3px; }

/* 読み込むまでの仮の枠（下がずれないように高さだけ取る） */
.ob-topnews__item.is-placeholder .ob-topnews__body { min-height: 3.4em; }

/* スマホ：1列。サムネイルを左（112px）、日付・タイトルを右（WordPress の「最近の投稿」と同じ形） */
@media (max-width: 767px) {
	.ob-topnews__item { border-bottom: 1px solid #e7e7e7; }
	.ob-topnews__item:first-child { border-top: 1px solid #e7e7e7; }
	.ob-topnews__item > a,
	.ob-topnews__item.is-placeholder {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		gap: 14px;
		align-items: center;
		padding: 14px 0;
	}
	.ob-topnews__title {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* PC：3列（間隔 32px） */
@media (min-width: 768px) {
	.ob-topnews__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
		margin-top: 24px;
		padding: 0;
	}
	.ob-topnews__body { padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.ob-infobar__item, .ob-topnews__thumb img { transition: none; }
}