/* ===================================
	 1. リセット・基本設定
	 =================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

:root {
	--wp--preset--color--gAiiro: #004c71;
	--wp--preset--color--primary: var(--wp--preset--color--gAiiro);
	--wp--custom--spacing--small: 1rem;
	--wp--custom--spacing--medium: 2rem;
	--wp--custom--spacing--large: 3rem;
	--wp--custom--spacing--x-large: 4rem;
	--z-header: 10;
	--z-pagetop: 2;
	--sticky--header--height: 60px;
	--floating-button-bottom: 6rem;
	--floating-button-right: 0.5rem;
}

:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	color: #3e3a39;
	padding: 0;
}

/* ===================================
	 2. 基本要素
	 =================================== */
a {
	text-decoration: none;
	background: linear-gradient(currentColor 0 0) 0 100% / var(--d, 0) 1px no-repeat;
	transition: background-size 0.5s ease;

	&:hover {
		--d: 100%;
	}

	&:focus-visible {
		outline: 2px solid var(--wp--preset--color--primary);
		outline-offset: 2px;
	}
}

iframe {
	width: 100%;
}

/* ===================================
	 3. レイアウトコンテナ
	 =================================== */
header,
footer {
	padding: 0 var(--wp--custom--spacing--small);
}

header {
	/* ナビゲーションレスポンシブコンテナを除外してヘッダー高さを適用 */
	& > div:not(.wp-block-navigation__responsive-container),
	& .wp-block-group > div:not(.wp-block-navigation__responsive-container) {
		width: 100%;
		height: 72px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&.is-position-sticky {
		height: var(--sticky--header--height);
		background-color: rgba(255, 255, 255, 0.75);
	}

	& .wp-block-group {
		padding: 0;
	}
}

main {
	& > article,
	& > section,
	& > div {
		padding: 0 var(--wp--custom--spacing--small);
	}

	&.wp-block-group {
		padding: 0;
	}
}

:where(.wp-site-blocks) > main {
	margin-block-start: 0;
}

body:not(.home) main {
	padding: var(--wp--custom--spacing--x-large) var(--wp--custom--spacing--small);
}

section {
	background-color: inherit;
}

/* 共通スタイル - sectionとarticle */
:is(section, article).alignfull.has-global-padding {
	margin: 0;
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40);
}

/* 例外: accessセクション */
section.access.alignfull.has-global-padding {
	margin-bottom: -0.5rem;
	padding: var(--wp--preset--spacing--80) 0 0 0;
}

/* 例外: contactセクション */
section#contact.alignfull.has-global-padding {
	padding: 0;
	margin: 0;
}

footer {
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--gAiiro);
	margin-block-start: 0;

	& a:where(:not(.wp-element-button)) {
		color: var(--wp--preset--color--white);
		text-decoration: none;
	}
}

footer p {
	margin-block-end: 0 !important;
}

/* ===================================
	 4. WordPressブロック
	 =================================== */
.wp-block-table {
	& th {
		color: #fff;
		background-color: #003b5d;
		border: 0;
		border-bottom: 1px solid;
		padding: 0.75rem 1rem;
	}

	& tr:first-child > th:first-child {
		border-radius: 0.5rem 0 0 0;
	}

	& tr:first-child > th:last-child {
		border-radius: 0 0.5rem 0 0;
	}

	& tr:last-child > th:first-child {
		border-radius: 0 0 0 0.5rem;
	}

	& tr:last-child > th:last-child {
		border-radius: 0 0 0.5rem 0;
	}

	& td {
		border: 0;
		border-bottom: 1px dotted;
		padding: 0.75rem 1rem;
	}
}

.wp-block-query li {
	& > div,
	& > div > div {
		padding: 1rem 0;
	}
}

section.wp-block-cover.alignfull.has-parallax.hero {
	min-height: calc(96vh + var(--sticky--header--height));
	margin-block-start: calc(-1 * var(--sticky--header--height) + var(--wp-admin--admin-bar--position-offset, -1 * var(--sticky--header--height)));

	& .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow {
		padding-block-start: var(--sticky--header--height);
	}
}

.wp-block-navigation:not(.has-background) {
	& .wp-block-navigation__responsive-container.is-menu-open {
		padding: var(--wp--preset--spacing--40);
	}
}

.wp-block-navigation__responsive-container-close {
	right: 16px;
	top: 8px;
}
/* ===================================
	 5. カスタムコンポーネント
	 =================================== */
.has-calligraffitti-font-family {
	color: var(--wp--preset--color--primary);
}

/* ページトップボタン - 共通配置 */
.pagetop,
.wp-block-buttons.page-top {
	position: fixed;
	right: var(--floating-button-right);
	bottom: var(--floating-button-bottom);
	z-index: var(--z-pagetop);
}

.pagetop {
	height: 3rem;
	width: 3rem;
	background: var(--wp--preset--color--primary);
	border: solid 2px var(--wp--preset--color--white);
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	transition: border-color 0.5s ease;

	&:hover {
		border-color: var(--wp--preset--color--luminous-vivid-amber);
	}

	& a {
		transition: color 0.5s ease;

		&:hover {
			color: var(--wp--preset--color--luminous-vivid-amber);
		}
	}
}

.wp-block-buttons.page-top a {
	width: 4rem;
	height: 4rem;
	box-shadow: 0 4px 6px rgb(0 0 0 / 30%);
	display: flex;
	justify-content: center;
	align-items: center;
}

.page-info {
	&.wp-block-group,
	& .wp-block-group {
		padding: 0;
	}
}

/* ===================================
	 6. タイポグラフィ
	 =================================== */
.home main {
	& h2.wp-block-heading {
		margin-block-end: 2rem;
	}
}

h1.wp-block-post-title,
h2.wp-block-post-title {
	margin-block-end: 2rem;
}

h2.wp-block-heading {
	margin-block-end: 1.875rem;
}

h3.wp-block-heading {
	margin-block-end: 1.75rem;
}

p {
	margin-block-end: 1.5rem !important;
}

/* ===================================
	 7. メディアクエリ・アクセシビリティ
	 =================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	
	a,
	.pagetop,
	.pagetop a {
		transition: none;
	}
}

/* add */
header {
	figure {margin-block-end: 0 !important;}
	ul {padding-left: 0;}
	li {margin-block-end: 0;}
}

figure {
	margin-block-end: 1.5rem !important;
}

ul {padding-left: 1.5rem;}
li {margin-block-end: 1.25rem;}