@charset "UTF-8";
/* CSS Document */
/* 「お知らせ」ページ専用のレイアウト。共通パーツ（gPageHeader, gServiceLine, gRecommend, gInquiry等）のCSSは
   public/css/common.css / common_sp.css を参照。ここには、このページだけで使う配置とカテゴリー絞り込みUIを書く。
   カテゴリー切替の実装方式は「1ページ内でJavaScriptで絞り込む」を採用（ユーザー指示）。URLは常に /news/ のまま。 */

body{ min-width: 0; } /* faq/function各ページと同じ理由。旧body{min-width:1180px}に依存する要素がこのページにはないため無効化する */

.newsMain{ background: var(--color-white); }
.newsMain__inner{
	display: flex;
	flex-direction: column;
	width: var(--content-width);
	max-width: 100%;
	margin: 0 auto;
	padding: 120px 0 0;
	box-sizing: border-box;
}
/* 実値: タブ→記事一覧、記事一覧→ページネーションの間隔はともに24px。
   ページネーション→サービス紹介動線だけ80pxと大きくなるため、親のgapではなく個別に指定する。 */
.gNewsList{ margin-top: 24px; }
.gPagination{ margin-top: 24px; }
#serviceLine{ margin-top: 80px; }

/* ==== 見出し＋カテゴリータブ ====
   実値: Figma node 5295:31005（PC）。見出しは選択中タブと同じ文言に連動して切り替わる
   （node 2803:8025="すべて"/2803:8027="お知らせ"/2803:8066="アップデート"、いずれも左寄せ）。
   タブ自体は右寄せで、見出しとの間はjustify-content:space-betweenで確保する。 */
.gNewsListHead{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 32px; }
.gNewsListHead__heading{
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 1px;
	color: var(--color-text);
	font-feature-settings: var(--font-feature-palt);
}

/* ==== カテゴリータブ ====
   実値: Figma node 2803:8754。選択中は背景#333+白文字+アイコン、非選択は背景なし+グレー文字+アイコン。
   両方とも矢印アイコンを持つ点が機能ページのタブ（選択中はアイコンなし）と異なる。 */
.gNewsTabs{ display: flex; gap: 12px; }
.gNewsTabs__item{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	background: none;
	border: none;
	border-radius: 999px;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .6px;
	color: #606060;
	cursor: pointer;
	font-feature-settings: var(--font-feature-palt);
	transition: background-color var(--transition), color var(--transition); /* <button>タグのためcommon.cssのa{transition}を継承しない */
}
.gNewsTabs__icon{ display: inline-flex; width: 16px; height: 16px; }
.gNewsTabs__icon img{ display: block; width: 100%; height: 100%; }
.gNewsTabs__item.is-active{ background: var(--color-text); color: var(--color-white); box-shadow: var(--shadow-xs); cursor: default; pointer-events: none; }
/* 実値: Figma node 2133:3531（Tertiary gray, Icon=After, Size=36, Hover）。背景#F7F7F7、文字・アイコンは#333に変化。
   選択中タブはpointer-events:noneのためhoverが発生しない。 */
.gNewsTabs__item:not(.is-active):hover{ background: var(--color-bg-2); color: var(--color-text); }
.gNewsTabs__item:not(.is-active):hover .gNewsTabs__icon img{ content: url(/images/common/icon_arrow-right-black.svg); }

/* ==== 記事一覧 ====
   実値: Figma node 2497:5728。上下1pxの罫線を持つ項目を縦に並べ、隣接項目間はmargin-topの-1pxで
   罫線を重ねて二重線にならないようにする。高さは固定せず内容に応じて可変（仕様書の指示どおり）。 */
.gNewsList{ width: 100%; }
.gNewsItem{
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 12px;
	border-top: 1px solid var(--color-text);
	border-bottom: 1px solid var(--color-text);
	box-sizing: border-box;
}
.gNewsItem + .gNewsItem{ margin-top: -1px; }
.gNewsItem[hidden]{ display: none; }
.gNewsItem__meta{ display: flex; align-items: center; gap: 8px; }
.gNewsItem__date{
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .7px;
	color: var(--color-text);
	white-space: nowrap;
	font-feature-settings: var(--font-feature-palt);
}
.gNewsItem__tag{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	padding: 6px 12px;
	border: 1px solid var(--color-primary);
	border-radius: 8px;
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .7px;
	color: var(--color-primary);
	white-space: nowrap;
	box-sizing: border-box;
	font-feature-settings: var(--font-feature-palt);
}
.gNewsItem__title{
	display: block;
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: .8px;
	color: var(--color-text);
	text-decoration: none;
}
.gNewsItem__desc{
	margin: 0;
	font-family: var(--font-jp);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: .8px;
	color: var(--color-text);
}
.gNewsItem__desc + .gNewsItem__desc{ margin-top: 8px; }

/* ==== ページネーション ====
   書式（色・サイズ等）はcommon.css/common_sp.cssの.gPagination系に共通化済み（お知らせ一覧・導入事例一覧で共用）。
   中身はindex.html下部のスクリプトで生成し、10件ごとに区切る（カテゴリーの絞り込み結果に対してページを分ける）。
   1ページに収まる場合はスクリプトが.is-hiddenを付けて非表示にする。visibility:hiddenで隠しつつ、
   height:0とmargin:0で高さ・余白を残さないようにしている。
   非表示設定はページごとに個別（このページだけの都合のため）。 */
.gPagination.is-hidden{ visibility: hidden; height: 0; margin: 0; padding: 0; overflow: hidden; }

/* ==== おすすめコンテンツ ====
   共通の.gRecommendをそのまま使う。見出しの幅・中央寄せは他ページのRecommendブロックと同じ構造。 */
.newsRecommend{ width: var(--content-width); max-width: 100%; margin: 0 auto; padding: 120px 0; box-sizing: border-box; }
.newsRecommend__heading{
	margin: 0 0 32px;
	font-family: var(--font-jp);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.4;
	letter-spacing: 1.6px;
	color: var(--color-text);
	text-align: center;
	font-feature-settings: var(--font-feature-palt);
}
.newsRecommend__grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--col-gap); }

@media only screen and (max-width: 768px) {
	.newsMain__inner{ width: 100%; padding: 80px var(--content-margin) 0; }
	.gNewsList{ margin-top: 24px; } /* 実値: Figma node 5295:31292。SPもタブ→記事一覧の間隔はPCと同じ24px（以前の16pxは誤り） */
	.gPagination{ margin-top: 16px; }

	/* 実値: Figma node 5295:31265。見出しを上段・タブを下段に積む（PCのjustify-content:space-betweenとは構成が異なる）。 */
	.gNewsListHead{ flex-direction: column; align-items: flex-start; row-gap: 32px; }

	/* 実値: SPのタブ幅はPCと同じ（85/99/121px、Figma node 5295:31266） */
	.gNewsTabs{ flex-wrap: wrap; }

	.newsRecommend{ width: 100%; padding: 120px var(--content-margin) 80px; box-sizing: border-box; }
	.newsRecommend__heading{ font-size: 24px; letter-spacing: 1.2px; }
	.newsRecommend__grid{ flex-direction: column; align-items: center; gap: 16px; }
}