@charset "UTF-8";
/* ==========================================================================
   レイアウト（全ページ）
   一覧グリッド / ページヘッダー / パンくず / フッター / セクションのリズム
   ========================================================================== */


/* --------------------------------------------------------------------------
   一覧のグリッド
   親テーマは flex + width:25% や width:30.83%+margin で「隙間ゼロのタイル」。
   CSS Grid に置き換えて余白を作る。
   -------------------------------------------------------------------------- */

/* コラム一覧 / トップの COLUMN */
.p-blog-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wk-gap);
	margin-bottom: 56px;
}

.p-blog-list:last-child { margin-bottom: 100px; }

.p-blog-list__item { width: auto; }

/* 特集一覧 */
.p-special-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wk-gap);
	margin-bottom: 56px;
}

.p-special-list:last-child { margin-bottom: 100px; }

.p-special-list__item { width: auto; }

/* お知らせ一覧 */
.p-news-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 56px;
}

.p-news-list:last-child { margin-bottom: 100px; }

.p-news-list__item { width: auto; margin: 0; }

/* イベント一覧 */
.p-event-list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 38px 28px;
}

.p-event-list:last-child { margin-bottom: 70px; }

.p-event-list__item,
.p-event-list__item:nth-child(3n) { width: auto; margin: 0; }


/* --------------------------------------------------------------------------
   ページヘッダー（一覧・固定ページの大見出し）
   親テーマは右方向へ黒 75% のグラデーション
   -------------------------------------------------------------------------- */
.p-page-header { margin-bottom: 72px; }

.p-page-header::after {
	background: linear-gradient(to right, rgba(var(--wk-scrim), .72), transparent);
}

.p-page-header__upper-title { margin-bottom: 10px; letter-spacing: .08em; }

.p-page-header__upper-sub { font-size: 15px; letter-spacing: .06em; }


/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.p-breadcrumb { font-size: 12px; letter-spacing: .03em; }

.c-breadcrumb__item { color: var(--wk-muted); }

.c-breadcrumb__item a { color: var(--wk-muted); transition: color .2s ease; }

.c-breadcrumb__item a:hover { color: var(--wk-wine); }

.c-breadcrumb__item + .c-breadcrumb__item::before {
	margin-right: 9px;
	margin-left: 9px;
	color: #C4BFB8;
	font-size: 10px;
}


/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.p-footer-links { padding: 56px 0 16px; }

.p-footer-links__header { margin-bottom: 28px; }

.p-footer-links__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.p-footer-links__list-item { width: auto; margin: 0; }

.p-footer-widgets { padding-top: 56px; }

.p-footer-widgets__item-title {
	margin-bottom: 14px;
	font-size: 15px;
	letter-spacing: .06em;
}

.p-footer-nav { margin-top: 26px; font-size: 13.5px; line-height: 2.4; }

/* 背景色は管理画面（コピーライトの背景色）が制御するため、文字色は指定しない。
   ここで色を固定すると、暗い背景を選んだときに読めなくなる。 */
.p-copyright {
	height: 56px;
	border-top: 1px solid var(--wk-line);
	font-size: 11.5px;
	line-height: 56px;
	letter-spacing: .05em;
}

.p-social-nav__item { margin-right: 14px; font-size: 15px; }


/* --------------------------------------------------------------------------
   セクションのリズム（トップページのコンテンツビルダー）
   -------------------------------------------------------------------------- */
.p-cb__item { margin-bottom: var(--wk-section); }

.p-cb__item:last-child { margin-bottom: 110px; }

.p-index-special,
.p-latest-news,
.p-latest-news:last-child,
.p-blog-list.p-cb-list,
.p-index-event__btn { margin-bottom: 0; }

.home .p-blog-list,
.home .p-blog-list:last-child,
.home .p-latest-news,
.home .p-latest-news:last-child { margin-bottom: 0; }

.home .p-event-list:last-child { margin-bottom: 36px; }

.p-latest-news__list-item { margin-top: 0; }

.p-latest-news__list-item:first-child .p-article11 { border-top: 1px solid var(--wk-line); }


/* --------------------------------------------------------------------------
   トップページの特集セクション
   __col が p-article09 を兼ねている場合があるので除外して grid 化する
   -------------------------------------------------------------------------- */
.p-index-special { gap: 20px; }

.p-index-special--type2 .p-index-special__col,
.p-index-special--type3 .p-index-special__col { width: calc(50% - 10px); }

.p-index-special__col:not(.p-article09) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	align-content: start;
}

.p-index-special--type1 .p-index-special__col:not(.p-article09) {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/*
 * 【重要】アイテムの width は必ず打ち消すこと。
 *
 * 親テーマは .p-index-special--type1 .p-index-special__item { width: 25% } のように
 * 詳細度 (0,2,0) で幅を指定している。grid 化した後にこれが残ると
 * 25% が「コンテナ」ではなく「グリッドトラック」に対して効くため、
 * 画像が 1/4 のさらに 1/4 まで縮む。
 *
 * .p-index-special__item だけだと (0,1,0) で親に負けるので、
 * 親と同じ形（type修飾子つき）で書いて詳細度を合わせている。
 * 同点の場合は後から読まれる子テーマ側が勝つ。
 */
.p-index-special--type1 .p-index-special__item,
.p-index-special--type2 .p-index-special__item,
.p-index-special--type3 .p-index-special__item { width: auto; }


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

	.p-blog-list,
	.p-special-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.p-event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.p-index-special--type1 .p-index-special__col:not(.p-article09) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/*
	 * 親テーマは 991px 以下で type2/type3 を縦積みにする。
	 * こちらの calc(50% - 10px) が詳細度同点かつ後勝ちで残ってしまうため、
	 * 同じブレークポイントで明示的に戻す。
	 */
	.p-index-special--type2,
	.p-index-special--type3 { display: block; }

	.p-index-special--type2 .p-index-special__col,
	.p-index-special--type3 .p-index-special__col {
		width: 100%;
		margin-bottom: 20px;
	}

	.p-footer-links__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   スマートフォン
   ========================================================================== */
@media screen and (max-width: 767px) {

	.p-cb__item { margin-bottom: 58px; }

	.p-cb__item:last-child { margin-bottom: 70px; }

	.p-page-header { margin-bottom: 44px; }

	.p-blog-list,
	.p-special-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.p-news-list { grid-template-columns: 1fr; gap: 12px; }

	.p-event-list { grid-template-columns: 1fr; gap: 26px; }

	.p-blog-list:last-child,
	.p-special-list:last-child,
	.p-news-list:last-child { margin-bottom: 60px; }

	/* 特集セクションは縦積み */
	.p-index-special { display: block; }

	.p-index-special--type2 .p-index-special__col,
	.p-index-special--type3 .p-index-special__col {
		width: 100%;
		margin-bottom: 14px;
	}

	.p-index-special__col:not(.p-article09),
	.p-index-special--type1 .p-index-special__col:not(.p-article09) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}

	.p-footer-links { padding: 40px 0 8px; }

	.p-footer-links__list { grid-template-columns: 1fr; gap: 14px; }

	.p-footer-widgets { padding-top: 40px; }
}