/*
Theme Name: 株式会社ステージオフィス
Text Domain: pxlm
Version: 3.0.0
Requires at least: 7.0
Requires PHP: 8.5
Tags: editor-style,block-styles
Description: ピクセリウム株式会社によるテーマ
Author: ピクセリウム株式会社
Author URI: https://pixelium.jp/
Theme URI: https://stageoffice.org/
*/

html {
	/* モバイルの管理バーを固定 */
	#wpadminbar {
		@media (width < 768px) {
			position: fixed;
		}
	}
}

body {
	background-color: var(--wp--preset--color--white);
	margin: 0;
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	font-variation-settings: "wght" 450;
	font-family: var(--wp--preset--font-family--noto-sans-jp);
	line-height: 1.9;
	letter-spacing: 0.12em;
	top: 0;

	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
	text-autospace: normal; /* 和文中の英数字に余白 */
}

body .wp-site-blocks {
	padding: 64px;
	@media (width < 768px) {
		padding: 32px;
	}
}

/* トップページ */
body.home {
	display: flex;
	align-items: center;
	justify-content: center;
	@media (width < 768px) {
		align-items: flex-start;
	}
}

body.home .wp-site-blocks > .wp-block-group > .wp-block-group {
	min-width: 1000px;
	@media (width < 768px) {
		min-width: auto;
	}
}

/* トップページ以外 */
/* フレームの表示とコンテンツが少ないときにフッターが最下部に表示されるようにする */
body:not(.home) .wp-site-blocks {
	@media (width < 768px) {
		width: 100%;
	}
}

/* インタラクティブ要素のフォーカス（Modern Web Guidance） */
:where(
	a:focus-visible,
	button:focus-visible,
	.wp-element-button:focus-visible,
	.page-numbers:focus-visible
) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.bg {
		animation: none;
	}

	:where(
		.wp-block-button .wp-element-button,
		.wp-block-button .wp-element-button ion-icon,
		.wp-block-file .wp-element-button,
		.wp-block-file .wp-element-button ion-icon,
		.wp-block-navigation a,
		.wp-block-query-pagination .page-numbers,
		.wp-block-query-pagination-previous,
		.wp-block-query-pagination-next,
		.wp-block-details,
		.wp-block-details summary,
		.wp-block-image a,
		.wp-block-page-list a,
		.wp-block-post-terms a,
		.wp-block-read-more
	) {
		transition: none;
	}
}

@keyframes noise {
	0% {
		transform: translate3d(1%, -1%, 0);
	}
	10% {
		transform: translate3d(-5%, -2%, 0);
	}
	20% {
		transform: translate3d(10%, 5%, 0);
	}
	30% {
		transform: translate3d(5%, -11%, 0);
	}
	40% {
		transform: translate3d(-12%, -5%, 0);
	}
	50% {
		transform: translate3d(10%, 9%, 0);
	}
	60% {
		transform: translate3d(15%, 0, 0);
	}
	70% {
		transform: translate3d(-10%, 8%, 0);
	}
	80% {
		transform: translate3d(10%, 2%, 0);
	}
	90% {
		transform: translate3d(1%, 5%, 0);
	}
	to {
		transform: translate3d(0, 8%, 0);
	}
}

/* 緑色のフレーム */
.frame {
	content: "";
	width: 100%;
	height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
	pointer-events: none;
	position: fixed;
	border: 16px solid var(--wp--preset--color--primary);
	z-index: 100;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
}

/* 背景のノイズ */
.bg {
	background-image: url(./assets/images/noise-transparent.png);
	position: fixed;
	width: 200%;
	height: 200%;
	left: -50%;
	top: -50%;
	background-repeat: repeat;
	animation: noise 1.2s steps(3) infinite both;
	opacity: 0.5;
	visibility: visible;
	z-index: -1;
	pointer-events: none;
}

/* 綺麗に改行するために<span>に入れるclass */
.whitespace-nowrap {
	white-space: nowrap;
}

/* 綺麗に改行するコード　文章内の改行しても良い位置に<wbr>に入れる */
.wbr-text-wrap {
	/* CJKテキストでの折り返しを無効化 */
	word-break: keep-all;

	/* 長い単語でも折り返し可能に */
	overflow-wrap: anywhere;
}

/* 綺麗に改行するコード　文章内の改行しても良い場所を<span>で囲う */
.inline-text-wrap {
	span {
		display: inline-block;
	}
}