@charset "utf-8";
/*
Theme Name: AKURAM NEWS
Theme URI: https://www.akuram.co.jp/
Author: 株式会社アクラム
Description: akuram.co.jp コーポレートサイトと共通デザインの NEWS 用テーマ。レイアウトの土台はサイト共通の /assets/css/site.css を読み込んで共有し、このファイルにはニュース固有のスタイルだけを持たせている。site.css は静的サイト側と同じ実体を参照しているため、こちらを編集する必要はない。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: akuram
*/

/* =========================================================
   このファイルは site.css の「あと」に読み込まれる。
   site.css で定義済みのトークン（--blue, --ink など）をそのまま使う。
   ========================================================= */

/* ---------------------------------------------------------
   1. 記事一覧
   --------------------------------------------------------- */

/* 一覧そのもの（.newslist）は site.css の定義をそのまま使う。
   静的TOPページのニュース欄と完全に同じ見た目にするため、
   サムネイル等の追加要素はあえて持たせていない。 */

/* 記事が1件も無いとき */
.newslist-empty {
	padding-block: clamp(48px, 8vw, 96px);
	text-align: center;
	color: var(--ink-3);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------
   2. 絞り込み（カテゴリー）
   --------------------------------------------------------- */
.newsfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 36px;
}
.newsfilter a {
	display: inline-block;
	padding: 7px 18px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-2);
	background: var(--surface);
	transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.newsfilter a:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.newsfilter a[aria-current="page"] {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* ---------------------------------------------------------
   3. ページ送り
   --------------------------------------------------------- */
.pager {
	margin-block-start: clamp(40px, 6vw, 64px);
}
.pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: center;
}
.pager .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: 44px;
	block-size: 44px;
	padding-inline: 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ink-2);
	background: var(--surface);
	transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.pager a.page-numbers:hover {
	border-color: var(--blue);
	color: var(--blue);
}
.pager .page-numbers.current {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.pager .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-inline-size: 24px;
}

/* ---------------------------------------------------------
   4. 記事ページ
   --------------------------------------------------------- */
.article-head {
	padding-block-end: 32px;
	margin-block-end: 40px;
	border-bottom: 1px solid var(--line);
}
.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-block-end: 18px;
}
.article-date {
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--ink-3);
}
.article-cat {
	padding: 3px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--ink-3);
	white-space: nowrap;
	transition: border-color .25s var(--ease), color .25s var(--ease);
}
a.article-cat:hover { border-color: var(--blue); color: var(--blue); }

.article-title {
	font-size: clamp(22px, 3.2vw, 34px);
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .02em;
}

.article-thumb { margin-block-end: 40px; }
.article-thumb img { inline-size: 100%; }

/* 前後の記事 */
.article-nav {
	display: grid;
	gap: 1px;
	grid-template-columns: 1fr 1fr;
	margin-block-start: clamp(48px, 7vw, 80px);
	background: var(--line);
	border-block: 1px solid var(--line);
}
.article-nav__item {
	display: block;
	padding: 24px 20px;
	background: var(--surface);
	transition: background .25s var(--ease);
}
.article-nav__item:hover { background: var(--surface-2); }
.article-nav__item--next { text-align: right; }
.article-nav__label {
	font-family: var(--font-en);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--blue);
}
.article-nav__title {
	margin-block-start: 8px;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ink-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.article-nav__empty { background: var(--surface); }
@media (max-width: 700px) {
	.article-nav { grid-template-columns: 1fr; }
	.article-nav__item--next { text-align: left; }
}

/* ---------------------------------------------------------
   5. ブロックエディタ由来のマークアップ
      .prose（site.css）で拾えないものを補う
   --------------------------------------------------------- */
.prose .wp-block-image { margin-block: 2.4em; }
.prose .wp-block-image img { inline-size: 100%; height: auto; }
.prose .wp-block-image figcaption,
.prose .wp-caption-text {
	margin-block-start: 12px;
	font-size: 12.5px;
	color: var(--ink-3);
	line-height: 1.8;
	text-align: left;
}

.prose .alignleft  { float: left;  margin: .4em 2em 1.4em 0; max-inline-size: 50%; }
.prose .alignright { float: right; margin: .4em 0 1.4em 2em; max-inline-size: 50%; }
.prose .aligncenter { margin-inline: auto; }
.prose .alignwide, .prose .alignfull { margin-inline: 0; }
.prose::after { content: ""; display: block; clear: both; }
@media (max-width: 700px) {
	.prose .alignleft, .prose .alignright { float: none; margin-inline: 0; max-inline-size: 100%; }
}

.prose blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--blue);
	color: var(--ink-2);
}
.prose blockquote p { margin-block: .6em; }
.prose blockquote cite { display: block; margin-block-start: 10px; font-size: 12.5px; color: var(--ink-3); font-style: normal; }

.prose table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block: 2em;
	font-size: 14px;
}
.prose th, .prose td {
	padding: 12px 16px;
	border: 1px solid var(--line);
	text-align: left;
	line-height: 1.8;
	color: var(--ink-2);
}
.prose th { background: var(--surface-2); font-weight: 700; color: var(--ink); }

.prose hr { margin-block: 2.6em; border: 0; border-top: 1px solid var(--line); }

.prose .wp-block-embed__wrapper { position: relative; }
.prose iframe { max-inline-size: 100%; }

.prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	min-height: 54px;
	padding: 0 30px;
	border-radius: 999px;
	background: var(--blue);
	color: #fff;
	font-family: var(--font-en);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-decoration: none;
}

/* 横に長い表を、本文の幅を壊さずスクロールさせる */
.prose .wp-block-table { overflow-x: auto; }

/* ---------------------------------------------------------
   6. 管理バーが出ているときの固定ヘッダー位置ずれ補正
   --------------------------------------------------------- */
.admin-bar .site-header { inset-block-start: 32px; }
@media (max-width: 782px) {
	.admin-bar .site-header { inset-block-start: 46px; }
}