@charset "UTF-8";

/* ==========================================================================
   デザイントークン
   色やコンテンツ幅は必ずここの変数を経由して使う。
   ブランドカラーの変更が 1 箇所で済むようにするため。
   ========================================================================== */

:root {
	--ovl-accent: #fabe00; /* HP 側のアクセントカラー */
	--ovl-dark: #343434;   /* HD 側のボタン等に使うダークネイビー */
	--ovl-text: #222222;
	--ovl-sub: #767676;
	--ovl-border: #e5e5e5;
	--ovl-bg: #ffffff;

	--ovl-maxw: 1080px;
	--ovl-gutter: 20px;

	/*
	 * 欧文・数字は Montserrat、日本語は M PLUS U（ともに Google Fonts）。
	 * CSS のフォント解決は 1 文字ごとに行われ、Montserrat は日本語のグリフを
	 * 持たないため、この順に並べるだけで日本語だけが M PLUS U に落ちる。
	 * 言語による分岐は書かない。読み込みは functions.php の ovl_enqueue_assets()。
	 * 末尾の sans-serif は、フォントの読み込みに失敗したときの保険。
	 */
	--ovl-font: "Montserrat", "Noto Sans JP", sans-serif;
}

/* ==========================================================================
   ベース
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--ovl-bg);
	color: var(--ovl-text);
	font-family: var(--ovl-font) !important;
	font-size: 16px;
	line-height: 1.8;
	/*
	 * 本文は 500。もとは Windows の游ゴシックが細く潰れるのを防ぐためだったが、
	 * ウェブフォント化したあとも見た目の濃さを変えないため 500 のまま維持している。
	 * 読み込むウェイトを増やさずに済むよう、CSS 全体で 500 と 700 の 2 つに揃えること。
	 */
	font-weight: 400;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

a {
	color: inherit;
	text-decoration: none;
	/* 装飾は最小限。hover の色変化程度に留める方針 */
	transition: color 0.2s ease, background-color 0.2s ease;
}

a:hover {
	color: var(--ovl-sub);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   レイアウト
   ========================================================================== */

.ovl-container {
	width: 100%;
	max-width: var(--ovl-maxw);
	margin-inline: auto;
	padding-inline: var(--ovl-gutter);
}
@media screen and (max-width: 768px) {
  .ovl-container {
    max-width: 730px;
  }
}

/* ==========================================================================
   SP（ブレイクポイントは 768px の 1 つだけ）
   ========================================================================== */

@media screen and (max-width: 768px) {
	body {
		font-size: 15px;
	}
}

/* ==========================================================================
   ヘッダー
   ========================================================================== */

.ovl-header {
	/* border-bottom: 1px solid var(--ovl-border); */
  background: var(--ovl-dark);
}

.ovl-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
}

.ovl-header__logo {
	display: inline-flex;
	align-items: center;
}

/* ロゴ SVG 入手後はこの指定を消し、img の width/height を指定する */
.ovl-header__logo-text {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.08em;
}
.ovl-header__logo-text img{
	display: block;
	height: 36px;
	width: auto;
}

.ovl-header__logo:hover {
	color: inherit;
	opacity: 0.7;
}

/* ロゴの右側。言語切替とお問い合わせボタンをまとめて右端に寄せる */
.ovl-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ovl-header__contact {
	/* min-height: 72px; */
}

/* ==========================================================================
   言語切替（JP / EN）
   お問い合わせボタンより主張を弱めたいので、.ovl-btn とは別の小さい見た目にしている。
   ========================================================================== */

.ovl-lang {
	display: flex;
	align-items: center;
	/* 2 つの間に区切り線を出すため、gap ではなく境界線で分ける */
	/* border: 1px solid var(--ovl-border); */
}

.ovl-lang__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* min-width: 30px; */
	padding: 6px;
	color: #ffffff;
	/* background: var(--ovl-border); */
	background: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	align-items: center;
}

.ovl-lang__btn + .ovl-lang__btn {
	/* border-left: 1px solid var(--ovl-border); */
}

.ovl-lang__btn:hover {
	color: #ffffff;
	text-decoration: underline;
}

/* 表示中の言語。絞り込みボタンの is-current と同じ考え方で塗り分ける */
.ovl-lang__btn.is-current {
	/* background: var(--ovl-dark); */
	color: var(--ovl-accent);
}

/* ==========================================================================
   ボタン
   お問い合わせは 1 つに統合したが、詳細ページの「一覧へ戻る」（.ovl-btn--back）も
   同じ .ovl-btn を土台にしているため、形・サイズを共通化し
   modifier で色だけを足す構成はそのまま残している。
   ========================================================================== */

.ovl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	padding: 10px 16px;
	border: 1px solid transparent;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	border-radius: 9999px;
	letter-spacing: 1px;
}

/* お問い合わせ（HD の contact-selection へ）。以前の HP 用ボタンは廃止した */
.ovl-btn--contact {
	/* background: var(--ovl-dark); */
	color: var(--ovl-dark);
	background: var(--ovl-accent);
	transition: background 0.3s ease;
	opacity: 1;
	gap: 6px;
	line-height: 1;
	display: flex;
	align-items: center;
}

.ovl-btn--contact:hover {
	/* opacity: 0.7; */
	color: var(--ovl-dark);
	background: var(--ovl-accent);
  opacity: 0.7;
	transition: opacity 0.3s ease;
}

/* ==========================================================================
   SP（ヘッダー）
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ovl-header__inner {

	}

	.ovl-header__logo {
		justify-content: center;
    width: 40%;
    max-width: 138.27px;
    min-width: 100px;
	}

  .ovl-header__logo-text img{
    width: 100%;
    height: auto;
  }

	/* SP は縦積みにし、言語切替を上・お問い合わせを下に置く */
	.ovl-header__right {
    width: 45%;
    max-width: 160px;
	}

  .ovl-header__contact,
  .ovl-btn--contact{
    width: 100%;
  }

	/* 言語切替は幅いっぱいに広げず、中央に小さく置く */
	.ovl-lang {
		align-self: center;
	}

	.ovl-header__contact {
		gap: 6px;
	}

	/* SP ではお問い合わせボタンを画面幅いっぱいに広げ、押しやすくする */
	.ovl-btn {
		flex: 1 1 0;
		min-width: 0;
		padding: 10px 8px;
		font-size: 12px;
	}
}

/* ==========================================================================
   フッター
   ========================================================================== */

/*
 * 記事が少ないページでもフッターが画面中ほどで浮かないよう、
 * body を縦方向の flex にして main に余白を吸わせている。
 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.ovl-main {
	flex: 1 0 auto;
}

.ovl-footer {
	flex-shrink: 0;
	margin-top: 60px;
	/* border-top: 1px solid var(--ovl-border); */
  background: var(--ovl-dark);
}

.ovl-footer__inner {
	padding-top: 24px;
  padding-bottom: 12px;
	text-align: center;
}

.ovl-footer__copyright {
	margin: 0;
	/* color: var(--ovl-sub); */
  color: #ffffff;
	font-size: 12px;
	letter-spacing: 0.04em;
}

@media screen and (max-width: 768px) {
	.ovl-footer {
		margin-top: 70px;
	}

	.ovl-footer__copyright {
		font-size: 11px;
	}
}

/* ==========================================================================
   フッターの関連サイトリンク
   ========================================================================== */

.ovl-footer__links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 24px;
	margin-bottom: 4px;
  color: #ffffff;
}

.ovl-footer__link {
	font-size: 13px;
	font-weight: 400;
}

/* 2 つのリンクの間に区切り線を入れる（要素を増やさず擬似要素で作る） */
.ovl-footer__link + .ovl-footer__link {
	position: relative;
}

.ovl-footer__link + .ovl-footer__link::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -12px;
	width: 1px;
	height: 1em;
	transform: translateY(-50%);
	background: #ffffff;
}

.ovl-footer__link:hover {
	color: var(--ovl-accent);
}

@media screen and (max-width: 768px) {
	.ovl-footer__links {
		gap: 12px;
		margin-bottom: 16px;
    flex-direction: column;
    line-height: 1;
	}

  .ovl-footer__link + .ovl-footer__link::before{
    display: none;
  }

	.ovl-footer__link {
		font-size: 12px;
	}

	.ovl-footer__link + .ovl-footer__link::before {
		left: -10px;
	}
}

/* ==========================================================================
   パンくず
   ========================================================================== */

.ovl-breadcrumb {
	padding-block: 24px;
}

.ovl-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	/* ol の既定の連番と左インデントを消し、左端を記事本文と揃える */
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ovl-sub);
	font-size: 12px;
}
@media screen and (max-width: 768px) {
  .ovl-breadcrumb__list {
    font-size: 10px;
  }
}

/* 区切り記号は装飾なので要素にせず擬似要素で作る（読み上げに拾わせないため） */
.ovl-breadcrumb__item + .ovl-breadcrumb__item::before {
	content: "〉";
	color: var(--ovl-border);
}

.ovl-breadcrumb__item a:hover {
	color: var(--ovl-text);
}

/* ==========================================================================
   カテゴリーラベル
   一覧・詳細で同じ見た目にするため共通クラスにしている。
   ========================================================================== */

.ovl-cat {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--ovl-border);
	color: var(--ovl-sub);
	font-size: 10px;
	font-weight: 400;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: 9999px;
	min-width: 72px;
  text-align: center;
}

/* ==========================================================================
   記事詳細
   ========================================================================== */

.ovl-article {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--ovl-border);
}

.ovl-article__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.ovl-article__date {
	color: var(--ovl-sub);
	font-size: 14px;
	letter-spacing: 0.04em;
}

.ovl-article__title {
	margin: 0 0 32px;
	padding-bottom: 24px;
	border-bottom: 3px solid var(--ovl-accent);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.5;
}

/* 本文はエディターで自由に組まれるため、要素ごとの最低限の余白だけ整える */
.ovl-article__body > :first-child {
	margin-top: 0;
}

.ovl-article__body > :last-child {
	margin-bottom: 0;
}

.ovl-article__body p {
	margin: 0 0 1.8em;
}

.ovl-article__body h2 {
	margin: 2.4em 0 1em;
	padding-left: 12px;
	border-left: 4px solid var(--ovl-accent);
	font-size: 20px;
	line-height: 1.5;
}

.ovl-article__body h3 {
	margin: 2em 0 0.8em;
	font-size: 17px;
	line-height: 1.6;
}

.ovl-article__body a {
	color: #0b57a4;
	text-decoration: underline;
}

.ovl-article__body a:hover {
	color: var(--ovl-sub);
}

.ovl-article__body ul,
.ovl-article__body ol {
	margin: 0 0 1.8em;
	padding-left: 1.5em;
}

.ovl-article__body ul {
	list-style: disc;
}

.ovl-article__body ol {
	list-style: decimal;
}

.ovl-article__body table {
	width: 100%;
	margin-bottom: 1.8em;
	border-collapse: collapse;
}

.ovl-article__body th,
.ovl-article__body td {
	padding: 10px 14px;
	border: 1px solid var(--ovl-border);
	text-align: left;
	vertical-align: top;
}

.ovl-article__body th {
	background: #fafafa;
	font-weight: 700;
}

/* ==========================================================================
   一覧へ戻る
   ========================================================================== */

.ovl-backlink {
	margin-top: 40px;
	text-align: center;
}

.ovl-btn--back {
	min-width: 240px;
	padding: 14px 24px;
	border-color: var(--ovl-text);
	background: transparent;
	color: var(--ovl-text);
	font-size: 14px;
}

.ovl-btn--back:hover {
	background: var(--ovl-text);
	color: #ffffff;
}

@media screen and (max-width: 768px) {
	.ovl-breadcrumb {
		padding-block: 16px;
	}

	.ovl-article__title {
		margin-bottom: 24px;
		padding-bottom: 16px;
		font-size: 21px;
	}

	.ovl-article__body h2 {
		font-size: 18px;
	}

	/* テーブルは横スクロールさせず、SP でも収まるよう文字を小さくする */
	.ovl-article__body th,
	.ovl-article__body td {
		padding: 8px 10px;
		font-size: 14px;
	}

	.ovl-btn--back {
		min-width: 180px;
		padding: 11px 20px;
		font-size: 13px;
	}
}

/* ==========================================================================
   ページタイトル
   ========================================================================== */

.ovl-page-title {
	margin: 32px 0 32px;
	font-size: 48px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  padding-bottom: 24px;
  border-bottom: 3px solid var(--ovl-accent);
}
.ovl-page-title span{
  font-size: 12px;
  color: var(--ovl-accent);
  margin-bottom: 4px;
}

/* ==========================================================================
   絞り込みボタン
   掲載先の切替を廃止したため、現在この行はカテゴリー絞り込みの 1 段だけ。
   基底の .ovl-filter を残してあるのは、将来別の絞り込み行が増えたときに
   同じ見た目を使い回せるようにするため。
   ========================================================================== */

.ovl-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

/* 一覧との間はしっかり空ける（絞り込みと記事が地続きに見えないように） */
.ovl-filter--cat {
	margin-bottom: 32px;
}

.ovl-filter__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 96px;
	padding: 8px 18px;
	border: 1px solid var(--ovl-border);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	border-radius: 9999px;
}

.ovl-filter__btn:hover {
	border-color: var(--ovl-accent);
	color: var(--ovl-text);
}

/* 選択中はアクセントカラーで塗る。hover と見分けがつくよう枠色も変える */
.ovl-filter__btn.is-current {
	border-color: var(--ovl-accent);
	background: var(--ovl-accent);
	color: var(--ovl-text);
}

/* ==========================================================================
   ニュース一覧
   ========================================================================== */

/* .ovl-news-list {
	border-top: 1px solid var(--ovl-border);
} */

.ovl-news-list__item {
	border-bottom: 1px solid var(--ovl-border);
}

.ovl-news-list__item:last-child{
	border: none;
}

.ovl-news-list__link {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 4px;
}

.ovl-news-list__link:hover {
	color: var(--ovl-text);
	background: #fafafa;
}

.ovl-news-list__date {
	flex-shrink: 0;
	color: var(--ovl-sub);
	font-size: 14px;
	letter-spacing: 0.04em;
}

/* カテゴリーラベルは幅を揃えて、タイトルの開始位置が記事ごとにブレないようにする */
.ovl-news-list__link .ovl-cat {
	flex-shrink: 0;
	min-width: 88px;
	text-align: center;
}

.ovl-news-list__title {
	font-size: 15px;
	line-height: 1.6;
  font-weight: 500;
}

.ovl-news-list__link:hover .ovl-news-list__title {
	text-decoration: underline;
}

.ovl-empty {
	padding: 40px 0;
	color: var(--ovl-sub);
	text-align: center;
}

ul.ovl-news-list li a[target="_blank"] span::after {
  content: "";
  width: 0.8em;
  height: 0.8em;
  background: url(../img/outlink.svg) no-repeat center center;
  display: inline-block;
  margin-left: 0.5em;
}

/* ==========================================================================
   ページネーション
   ========================================================================== */

.ovl-pagination {
	margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .ovl-pagination {
  	margin-top: 60px;
  }
}

.ovl-pagination .page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
  font-weight: 500;
}

.ovl-pagination li {
	display: block;
}

.ovl-pagination a,
.ovl-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 10px;
	border: 1px solid var(--ovl-border);
	font-size: 13px;
	font-weight: 700;
}

.ovl-pagination a:hover {
	border-color: var(--ovl-text);
	color: var(--ovl-text);
}

.ovl-pagination .current {
	border-color: var(--ovl-accent);
	background: var(--ovl-accent);
	color: var(--ovl-text);
}

.ovl-pagination .dots {
	border-color: transparent;
}

/* ==========================================================================
   SP（TOP）
   ========================================================================== */

@media screen and (max-width: 768px) {
	.ovl-page-title {
		margin: 24px 0 24px;
		font-size: 36px;
	}

	.ovl-filter__btn {
		min-width: 0;
		flex: 1 1 auto;
		padding: 8px 12px;
		font-size: 12px;
	}

	.ovl-filter--cat {
		margin-bottom: 24px;
	}

	/*
	 * SP では 1 行に収まらないため、日付＋カテゴリーを 1 段目、
	 * タイトルを 2 段目に折り返す。
	 */
	.ovl-news-list__link {
		flex-wrap: wrap;
		gap: 6px 10px;
		padding: 16px 4px;
	}

	.ovl-news-list__title {
		flex: 1 1 100%;
		font-size: 14px;
	}

	.ovl-news-list__link .ovl-cat {
		min-width: 0;
	}

	.ovl-pagination a,
	.ovl-pagination span {
		min-width: 36px;
		height: 36px;
		font-size: 12px;
	}
}

/* ==========================================================================
   404
   ========================================================================== */

.ovl-notfound {
	padding-block: 80px;
	text-align: center;
}

.ovl-notfound__code {
	margin: 0 0 8px;
	color: var(--ovl-accent);
	font-size: 64px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.08em;
}

.ovl-notfound__title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
}

.ovl-notfound__text {
	margin: 0;
	color: var(--ovl-sub);
	font-size: 14px;
}

@media screen and (max-width: 768px) {
	.ovl-notfound {
		padding-block: 56px;
	}

	.ovl-notfound__code {
		font-size: 48px;
	}

	.ovl-notfound__title {
		font-size: 18px;
	}

	.ovl-notfound__text {
		font-size: 13px;
	}
}

/* ==========================================================================
   読み上げ専用テキスト
   目には見せず、スクリーンリーダーにだけ伝えたい文言に使う。
   ========================================================================== */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   重要なお知らせ
   ========================================================================== */

.ovl-pinned {
	margin-bottom: 40px;
	padding: 20px 24px;
	background: #fdf8e8; /* アクセントカラーを薄めた背景。枠線ではなく面で目立たせる */
}

.ovl-pinned__heading {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* 背景の上に乗るため、通常一覧の罫線と hover 背景は打ち消す */
.ovl-news-list--pinned {
	border-top: none;
}

.ovl-news-list--pinned .ovl-news-list__item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ovl-news-list--pinned .ovl-news-list__item:last-child {
	border-bottom: none;
}

.ovl-news-list--pinned .ovl-news-list__link {
	padding-block: 12px;
}

.ovl-news-list--pinned .ovl-news-list__link:hover {
	background: transparent;
}

/* ==========================================================================
   PDF / 外部リンクのアイコン
   ========================================================================== */

.ovl-news-list__icon {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	color: var(--ovl-sub);
	/* 文字のベースラインに合わせて少し持ち上げる */
	vertical-align: middle;
	transform: translateY(-1px);
}

@media screen and (max-width: 768px) {
	.ovl-pinned {
		margin-bottom: 32px;
		padding: 16px;
	}
}