/*
 * theme.json で表せない分だけを書く。色・サイズ・余白はプリセット変数で参照する。
 *
 * 追加 CSS クラス（エディターの「高度な設定 → 追加 CSS クラス」で付ける）
 *   cs-arrow / cs-arrow-down / cs-arrow-next … ボタンの右に矢印（↗ / ↓ / →）
 *   cs-brand       … ロゴ（マーク＋社名）。リンクを文字色のままにする
 *   cs-on-dark     … 暗い背景のセクション。中のリンク色を明るくする
 *   cs-nav-contact … ナビの「お問い合わせ」。PC では紺の丸ボタンにする
 *   cs-hero-sphere … ヒーローの球体の画像（幅を画面に合わせる）
 *   cs-youtube-latest … 動画枠の画像。inc/youtube.php が最新動画に差し替える
 *   cs-facts       … 概要の帯（3列の罫線）
 *   cs-stack-sm    … スマホでボタンを縦に並べて全幅にする
 *   cs-hide-sm     … スマホで隠す
 */

/* ヘッダー・本文・フッターの間に余白を入れない */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ----- ロゴ（マーク＋社名） ----- */
.cs-brand a {
	color: inherit;
}

.cs-brand .wp-block-image img {
	width: clamp(30px, 1.6rem + 0.9vw, 40px) !important;
	height: auto;
}

/* ----- ボタンの矢印 ----- */
.wp-block-button:is(.cs-arrow, .cs-arrow-down, .cs-arrow-next) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}

.wp-block-button:is(.cs-arrow, .cs-arrow-down, .cs-arrow-next) .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 0.875em;
	height: 0.875em;
	background-color: currentColor;
	mask: var(--cs-arrow) center / contain no-repeat;
}

.wp-block-button.cs-arrow {
	--cs-arrow: url(../images/icon-arrow-up-right.svg);
}

.wp-block-button.cs-arrow-down {
	--cs-arrow: url(../images/icon-arrow-down.svg);
}

.wp-block-button.cs-arrow-next {
	--cs-arrow: url(../images/icon-arrow-right.svg);
}

.wp-block-button.cs-arrow-next.has-custom-width .wp-block-button__link {
	justify-content: space-between;
}

/* ----- タグ（丸枠の小さなラベル） ----- */
p.is-style-tag {
	margin: 0;
	padding: 0.35em 0.9em;
	border: 1px solid var(--wp--preset--color--tag-line);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
}

/* ----- 暗い背景のセクション ----- */
.cs-on-dark a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--on-dark);
}

.cs-on-dark a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent-on-dark);
}

.cs-on-dark .wp-element-button:hover {
	filter: brightness(1.08);
}

/* ----- ヘッダーのナビ ----- */
@media (min-width: 600px) {
	.wp-block-navigation:not(.is-menu-open) .cs-nav-contact > a {
		display: inline-flex;
		align-items: center;
		min-height: 3rem;
		padding: 0 1.5rem;
		border-radius: 999px;
		background-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	.wp-block-navigation:not(.is-menu-open) .cs-nav-contact > a:hover {
		background-color: var(--wp--preset--color--body);
		color: var(--wp--preset--color--base);
	}
}

.wp-block-navigation__responsive-container-open {
	width: 3rem;
	height: 3rem;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--tag-line);
	border-radius: 999px;
}

/* スマホでメニューを開いたときは左寄せ・大きめの文字にする（PC の右寄せ設定を開いたときだけ打ち消す） */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--lg);
}

/* ----- ヒーローの球体（スマホではモックどおり 300px に抑える） ----- */
.cs-hero-sphere img {
	width: min(100%, 540px) !important;
}

@media (max-width: 781px) {
	.cs-hero-sphere img {
		width: min(100%, 300px) !important;
	}
}

/* ----- 概要の帯 ----- */
.cs-facts {
	border-top: 1px solid var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cs-facts > .wp-block-column {
	padding-block: var(--wp--preset--spacing--50);
}

@media (min-width: 782px) {
	.cs-facts > .wp-block-column + .wp-block-column {
		padding-inline-start: var(--wp--preset--spacing--70);
		border-inline-start: 1px solid var(--wp--preset--color--line);
	}
}

@media (max-width: 781px) {
	.cs-facts > .wp-block-column {
		padding-block: var(--wp--preset--spacing--30);
	}

	.cs-facts > .wp-block-column + .wp-block-column {
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/* ----- YouTube の最新動画（inc/youtube.php が画像とリンクを差し替える） ----- */
.cs-youtube-latest a {
	position: relative;
	display: block;
}

.cs-youtube-latest img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* 実際のサムネイルに差し替わったときだけ、再生マークを重ねる（仮の枠の画像には最初から描いてある） */
.cs-youtube-latest.has-video a::before,
.cs-youtube-latest.has-video a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.cs-youtube-latest.has-video a::before {
	width: clamp(3.75rem, 3rem + 2vw, 5.25rem);
	aspect-ratio: 1;
	border: 2px solid var(--wp--preset--color--on-dark);
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--video-bg) 55%, transparent);
}

.cs-youtube-latest.has-video a::after {
	width: clamp(1.4rem, 1.1rem + 0.8vw, 1.75rem);
	aspect-ratio: 1;
	transform: translate(-40%, -50%);
	background-color: var(--wp--preset--color--on-dark);
	mask: url(../images/icon-play.svg) center / contain no-repeat;
}

.cs-youtube-latest .wp-element-caption {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--on-dark-muted);
	font-size: var(--wp--preset--font-size--xs);
	text-align: start;
}

/* ----- 最新記事（RSS） ----- */
.wp-block-rss {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--media-line);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

.wp-block-rss .wp-block-rss__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--media-line);
}

.wp-block-rss .wp-block-rss__item-title {
	min-width: 0;
}

.wp-block-rss .wp-block-rss__item-publish-date {
	flex: none;
	color: var(--wp--preset--color--on-dark-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
}

/* ----- 会社概要の表 ----- */
.wp-block-table.is-style-definition table {
	border-collapse: collapse;
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-definition td {
	padding: var(--wp--preset--spacing--40) 0;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	line-height: 1.8;
}

.wp-block-table.is-style-definition td:first-child {
	width: clamp(5.5rem, 4.5rem + 4vw, 8.75rem);
	color: var(--wp--preset--color--muted);
}

/* ----- スマホ ----- */
@media (max-width: 599px) {
	.cs-stack-sm.wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.cs-stack-sm .wp-block-button,
	.cs-stack-sm .wp-block-button__link {
		width: 100%;
		justify-content: center;
	}

	.cs-hide-sm {
		display: none !important;
	}
}