@charset "UTF-8";
/* ==========================================================================
   共通コンポーネント（全ページ）
   カード / ボタン / 見出し / タブ / ページャー / 前後ナビ / ウィジェット

   方針: 色は管理画面（テーマオプション）が制御する箇所に手を出さない。
         ここで扱うのは 余白・角丸・罫線・グリッド・タイポのサイズ。
         style.css にハードコードされていて管理画面から触れない色だけ上書きする。
   ========================================================================== */


/* --------------------------------------------------------------------------
   セクション見出し（p-headline02）
   親テーマは 50px の英字タイトルと和文サブを横並びにする。
   縦積み＋罫線に変え、圧を下げつつ主従を明確にする。
   ※ 文字サイズと色は管理画面が制御するので指定しない
   -------------------------------------------------------------------------- */
.p-headline02 {
	display: block;
	position: relative;
	margin-bottom: 34px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--wk-line);
}

.p-headline02::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 46px;
	height: 2px;
	background: var(--wk-wine);
	content: "";
}

.p-headline02__title {
	line-height: 1.2;
	letter-spacing: .14em;
}

.p-headline02__sub {
	margin: 9px 0 0;
	color: var(--wk-muted);
	font-size: 13px;
	letter-spacing: .08em;
}

/* サイドバー等の帯見出し（p-headline）。背景色は管理画面が制御 */
.p-headline {
	height: 46px;
	padding: 0 20px;
	border-radius: var(--wk-radius-sm) var(--wk-radius-sm) 0 0;
	font-size: 15px;
	line-height: 46px;
	letter-spacing: .06em;
}

.p-headline__link { right: 18px; font-size: 12.5px; }

.p-headline__link:hover { color: rgba(255, 255, 255, .7); }

/* セクション右上の「一覧」リンク */
.p-cb__item-btn { top: 4px; }

.p-cb__item-btn a { font-size: 12.5px; letter-spacing: .08em; }


/* --------------------------------------------------------------------------
   ボタン
   親テーマは border-radius:0 の角ばった箱。ヘッダーCTAのピル型に統一する。
   ※ 背景色は管理画面の Primary / Secondary color が制御
   -------------------------------------------------------------------------- */
.p-btn,
.p-readmore__btn,
.p-nav02__item a {
	border-radius: 999px;
	letter-spacing: .08em;
	transition: all .3s var(--wk-ease);
}

.p-btn {
	min-width: 210px;
	height: 52px;
	font-size: 13.5px;
	line-height: 52px;
}

.p-readmore__num { color: var(--wk-muted); font-size: 13px; }


/* --------------------------------------------------------------------------
   カード共通の下地
   -------------------------------------------------------------------------- */

/* 画像に重ねる暗幕。親テーマは黒 75〜85%。ワイン寄りの暗色にして開始位置を下げる */
.p-article01__img::before,
.p-article06__img::before,
.p-article08 a::before {
	background: linear-gradient(to bottom, transparent 42%, rgba(var(--wk-scrim), .82) 100%);
}

.p-article02__img::before,
.p-article07__img::before {
	background: linear-gradient(to right, rgba(var(--wk-scrim), .72), transparent 66%);
}


/* p-article01 … コラムカード（トップ / コラム一覧）
   content が absolute なので角丸は親要素側に当てる */
.p-article01,
.p-article02,
.p-article08 {
	overflow: hidden;
	border-radius: var(--wk-radius);
}

.p-article01__content { bottom: 18px; padding: 0 18px; }

.p-article01__title {
	margin-bottom: 6px;
	font-size: 15px;
	line-height: 1.6;
}

.p-article01__meta { font-size: 11.5px; letter-spacing: .04em; }

.p-article01 a:hover { color: rgba(255, 255, 255, .75); }


/* p-article02 … フッターのリンクカード */
.p-article02__title { padding: 0 22px; font-size: 15px; line-height: 1.5; }


/* p-article04 … お知らせ一覧のカード（親テーマは全周 1px ボーダーの箱） */
.p-article04 {
	overflow: hidden;
	border: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	transition: border-color .25s var(--wk-ease), background .25s var(--wk-ease);
}

.p-article04:hover { border-color: var(--wk-wine); background: var(--wk-cream); }

.p-article04 a { padding: 20px; }

.p-article04__img { border-radius: var(--wk-radius-sm); }

.p-article04__date { margin-bottom: 8px; color: var(--wk-muted); font-size: 12px; letter-spacing: .05em; }

.p-article04__title { font-size: 15px; line-height: 1.6; }

.p-article04 a:hover .p-article04__title { color: var(--wk-wine); }


/* p-article05 … 特集一覧のカード */
.p-article05 {
	overflow: hidden;
	border: 1px solid var(--wk-line);
	border-top: 1px solid var(--wk-line);
	border-radius: var(--wk-radius);
	transition: border-color .25s var(--wk-ease);
}

.p-article05:hover { border-color: var(--wk-wine); }

.p-article05__img { margin: 0; }

.p-article05__content { padding: 24px 26px 26px; }

.p-article05__title { margin-bottom: 8px; font-size: 18px; line-height: 1.55; }

.p-article05__excerpt { color: var(--wk-muted); font-size: 13.5px; line-height: 1.95; }

.p-article05 a:hover .p-article05__title { color: var(--wk-wine); }


/* p-article06 … 特集タイル（タイトルを画像に重ねる） */
.p-article06 a {
	overflow: hidden;
	border-radius: var(--wk-radius);
}

.p-article06__content,
.p-article06__title:last-child { bottom: 18px; padding: 0 18px; }

.p-article06__title { font-size: 15px; line-height: 1.65; }

/* 親テーマはホバーで文字をグレーに沈ませる。白のまま保つ */
.p-article06 a:hover .p-article06__title { color: #fff; }


/* p-article07 … イベントカード */
.p-article07 > a,
.p-article07__img {
	overflow: hidden;
	border-radius: var(--wk-radius);
}

.p-article07__title { margin: 13px 0 0; font-size: 16px; line-height: 1.65; }

.p-article07__title a:hover { color: var(--wk-wine); }

.p-article07 .p-date__day { font-size: 34px; }

/*
 * イベントタグ（.p-event-cat）
 *
 * 【触ってはいけない】背景色・文字色はタグごとに管理画面で設定でき、
 * 親テーマが inc/head.php から以下を出力している（既定 背景 #ff8000 / 文字 #ffffff）。
 *
 *   .p-event-cat--<term_id>        { background: <bg>; color: <color> }
 *   .p-event-cat--<term_id>:hover  { background: <bg_hover>; color: <color_hover> }
 *
 * 詳細度は (0,1,0) と低いため、.p-article07__cat a （(0,1,1)）で
 * color を当てるとタグごとの設定を全部潰してしまう。
 * 設定場所: イベント → イベントタグ → 各タグを編集 → 色設定
 *
 * ここでは余白だけを扱う。バッジの形（角丸ピル・高さ30px）は
 * 親テーマの .p-event-cat が既に持っている。
 */
.p-article07__cat { margin-top: 13px; gap: 6px; }


/* p-article08 … 記事下の関連記事 */
.p-article08__title { bottom: 16px; padding: 0 16px; font-size: 13.5px; line-height: 1.6; }

.p-article08 a:hover { color: rgba(255, 255, 255, .75); }


/* p-article09 … 大きい特集カード（親テーマは本文ブロックが #000 ベタ） */
.p-article09 a {
	overflow: hidden;
	height: 100%;
	border-radius: var(--wk-radius);
}

.p-article09__content { padding: 26px 30px; background: var(--wk-wine); }

.p-article09__title { font-size: 19px; line-height: 1.55; }

.p-article09__excerpt {
	color: rgba(255, 255, 255, .82);
	font-size: 13.5px;
	line-height: 1.9;
}

.p-article09 a:hover .p-article09__title { color: rgba(255, 255, 255, .72); }


/* p-article11 … お知らせのリスト行（親テーマは 60px 固定・全周ボーダーの箱） */
.p-article11 {
	height: auto;
	border: 0;
	border-bottom: 1px solid var(--wk-line);
	line-height: 1.6;
}

.p-article11 a {
	align-items: center;
	height: auto;
	padding: 18px 14px;
	transition: background .25s var(--wk-ease);
}

.p-article11 a:hover { background: var(--wk-cream); }

.p-article11 a:hover .p-article11__title { color: var(--wk-wine); }

.p-article11__date {
	flex: 0 0 auto;
	margin-right: 22px;
	color: var(--wk-muted);
	font-size: 12px;
	letter-spacing: .06em;
}

.p-article11__title { font-size: 14.5px; }


/* --------------------------------------------------------------------------
   月の切り替えタブ（イベント一覧・トップ）
   親テーマは黒ベタの角ばったボタン
   -------------------------------------------------------------------------- */
.p-calendar { margin-bottom: 38px; }

.p-calendar__item { margin-right: 8px; }

.p-calendar__item button {
	padding: 9px 20px;
	border: 1px solid var(--wk-line);
	border-radius: 999px;
	background: #fff;
	color: var(--wk-muted);
	font-size: 13px;
	letter-spacing: .06em;
	cursor: pointer;
	transition: all .25s var(--wk-ease);
}

.p-calendar__item button:hover { border-color: var(--wk-wine); color: var(--wk-wine); }

.p-calendar__item.is-active button,
.p-calendar__item.is-active button:hover {
	border-color: var(--wk-wine);
	background: var(--wk-wine);
	color: #fff;
}


/* --------------------------------------------------------------------------
   ページネーション
   ※ 現在ページ（span）の背景色は管理画面の Primary color が制御
   -------------------------------------------------------------------------- */
.p-pager { margin-bottom: 110px; }

.p-pager__item { margin-right: 8px; margin-bottom: 8px; font-size: 13.5px; }

.p-pager__item a,
.p-pager__item span {
	width: 46px;
	height: 46px;
	line-height: 44px;
	transition: all .25s var(--wk-ease);
}

.p-pager__item a {
	border: 1px solid var(--wk-line);
	background: #fff;
	color: var(--wk-muted);
}

.p-pager__item a:hover {
	border-color: var(--wk-wine);
	background: var(--wk-wine);
	color: #fff;
}


/* --------------------------------------------------------------------------
   前後の記事ナビ
   -------------------------------------------------------------------------- */

/* c-nav01 … 2分割の箱型 */
.c-nav01__item {
	border: 1px solid var(--wk-line);
	font-size: 13.5px;
}

.c-nav01__item a { min-height: 74px; transition: background .25s var(--wk-ease); }

.c-nav01__item a:hover { background: var(--wk-cream); color: var(--wk-wine); }

.c-nav01__item:first-child { border-radius: var(--wk-radius) 0 0 var(--wk-radius); }

.c-nav01__item:last-child { border-radius: 0 var(--wk-radius) var(--wk-radius) 0; }

.c-nav01__item:only-child { border-radius: var(--wk-radius); }

/* p-nav01 … 高さ 100px の前後ナビ */
.p-nav01__item { height: 86px; }

.p-nav01__item a { transition: background .25s var(--wk-ease); }

.p-nav01__item a:hover { background: var(--wk-cream); }

/* p-nav02 … 一覧に戻る等のボタン列。背景色は管理画面が制御 */
.p-nav02 { margin-top: 56px; margin-bottom: 80px; }

.p-nav02__item + .p-nav02__item { margin-left: 12px; }

.p-nav02__item a {
	min-width: 190px;
	height: 52px;
	font-size: 13.5px;
	line-height: 52px;
}


/* --------------------------------------------------------------------------
   サイドバーのウィジェット
   親テーマは border-bottom: 4px solid #000 の重い区切り
   -------------------------------------------------------------------------- */
.p-widget {
	margin-bottom: 40px;
	padding-bottom: 40px;
	border-bottom: 1px solid var(--wk-line);
}

.p-widget__title,
.widget_block .wp-block-heading {
	position: relative;
	margin-bottom: 18px;
	padding-left: 13px;
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: .04em;
}

.p-widget__title::before,
.widget_block .wp-block-heading::before {
	position: absolute;
	top: .15em;
	bottom: .15em;
	left: 0;
	width: 3px;
	border-radius: 2px;
	background: var(--wk-wine);
	content: "";
}

.p-widget-search__input {
	height: 46px;
	padding: 0 42px 0 16px;
	border: 1px solid var(--wk-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 46px;
	transition: border-color .25s var(--wk-ease);
}

.p-widget-search__input:focus { border-color: var(--wk-wine); }

.p-widget-search__submit {
	right: 6px;
	width: 34px;
	height: 46px;
	color: var(--wk-muted);
	font-size: 16px;
	transition: color .2s ease;
}

.p-widget-search__submit:hover { color: var(--wk-wine); }


/* --------------------------------------------------------------------------
   ページトップボタン（親テーマは黒の 60px 角）
   -------------------------------------------------------------------------- */
.p-pagetop { right: 22px; bottom: 22px; }

/* 通常時の背景は style.css に #000 が直書きされていて管理画面から触れないため
   ここで指定する。ホバー時は管理画面の Secondary color が制御するので触らない。
   → tokens.css の --wk-wine は管理画面の Primary color と同じ値にすること */
.p-pagetop a {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wk-wine);
	box-shadow: 0 3px 14px rgba(0, 0, 0, .16);
	transition: background .25s var(--wk-ease);
}


/* ==========================================================================
   タブレット以下
   ========================================================================== */
@media screen and (max-width: 991px) {

	.p-article05__content { padding: 20px 20px 22px; }

	.p-article05__title { font-size: 16px; }
}

@media screen and (max-width: 767px) {

	.p-headline02 { margin-bottom: 22px; padding-bottom: 12px; }

	/*
	 * 親テーマがモバイルで .p-headline02__title { font-size:32px !important } を
	 * 当てており、管理画面の設定値さえ効かない。ここだけは !important で打ち消す。
	 */
	.p-headline02__title { font-size: 20px !important; }

	.p-headline02__sub { font-size: 12px; }

	.p-btn { min-width: 180px; height: 46px; font-size: 12.5px; line-height: 46px; }

	.p-nav02__item a { min-width: 0; height: 46px; padding: 0 22px; font-size: 12.5px; line-height: 46px; }

	.p-article01__content,
	.p-article06__content,
	.p-article06__title:last-child { bottom: 13px; padding: 0 13px; }

	.p-article01__title,
	.p-article06__title { font-size: 13.5px; }

	.p-article04 a { padding: 14px; }

	.p-article04__title { font-size: 14px; }

	.p-article11 a { padding: 15px 10px; }

	.p-article11__date { margin-right: 14px; }

	.p-article09__content { padding: 20px 22px; }

	.p-article09__title { font-size: 17px; }

	.p-pager { margin-bottom: 70px; }

	.p-pager__item a,
	.p-pager__item span { width: 42px; height: 42px; line-height: 40px; }

	.p-widget { margin-bottom: 32px; padding-bottom: 32px; }
}