/* ====================================================================================
Base Styles
==================================================================================== */
html {
	scroll-behavior: smooth;
}

/* メニュー表示中にスクロール禁止 */
body.no-scroll {
	overflow: hidden;
	height: 100vh;
	/* iOS のバグ対策 */
}

section {
	@media screen and (max-width: 782px) {
		scroll-margin-top: 30px;
	}

	@media screen and (min-width: 783px) {
		scroll-margin-top: 100px;
	}
}

a {
	display: inline-block;
}

p a:not([class]) {
	/* color: var(--wp--preset--color--tertiary); */
	display: inline-block;
	text-decoration: underline;
	transition: opacity 0.35s;

	&:hover {
		opacity: 0.7;
	}
}

a[target="_blank"]:not([class]) {
	position: relative;
	display: inline-block;
	text-decoration: underline;
	transition: opacity 0.35s;
	margin-right: 0.2em;

	&::after {
		content: "";
		display: inline-block;
		width: 1.2em;
		height: 1.2em;
		margin-left: 0.3em;
		margin-bottom: 0.2em;
		mask-image: url(../img/up-right-from-square-solid-full.svg);
		-webkit-mask-image: url(../img/up-right-from-square-solid-full.svg);
		mask-repeat: no-repeat;
		-webkit-mask-repeat: no-repeat;
		background-color: currentColor;
		vertical-align: middle;
	}

	&:hover {
		opacity: 0.7;
	}
}

.scrim {
	background-color: rgba(0, 0, 0, 0.5) !important;
}

/* ====================================================================================
wp-block-buttons
==================================================================================== */
.wp-block-button {
	& .wp-block-button__link {
		font-weight: 700;
		transition: color 0.35s, background-color 0.35s, border-color 0.35s;
		min-width: 240px;
	}
}

.wp-block-button.is-style-white {
	& .wp-block-button__link {
		color: var(--wp--preset--color--white) !important;
		border: 2px solid var(--wp--preset--color--white) !important;
		background-color: rgba(0, 0, 0, 0.2) !important;

		&:hover {
			color: var(--wp--preset--color--secondary) !important;
			background-color: rgba(0, 0, 0, 0.5) !important;
			border-color: var(--wp--preset--color--secondary) !important;
		}
	}
}

.wp-block-button.is-style-contrast {
	& .wp-block-button__link {
		color: var(--wp--preset--color--primary) !important;
		border: 2px solid var(--wp--preset--color--primary) !important;
		background-color: var(--wp--preset--color--white) !important;

		&:hover {
			color: var(--wp--preset--color--secondary) !important;
			background-color: var(--wp--preset--color--tertiary) !important;
			border-color: var(--wp--preset--color--secondary) !important;
		}
	}
}

.wp-block-button.is-disabled {
	& .wp-block-button__link {
		border-color: #839591;
		color: #839591;
		pointer-events: none;
	}
}

/* ====================================================================================
wp-block-bcn-breadcrumb-trail
==================================================================================== */
.wp-block-bcn-breadcrumb-trail {
	display: flex;
	font-size: var(--wp--preset--font-size--sm) !important;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: thin;
	max-width: 100% !important;

	@media screen and (max-width: 782px) {
		gap: 20px;
	}

	@media screen and (min-width: 783px) {
		gap: 30px;
	}

	&>span:first-child {
		display: none;
	}

	& span:not(:last-of-type) {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 4px solid transparent;
			border-bottom: 4px solid transparent;
			border-left: 6px solid var(--wp--preset--color--primary);

			@media screen and (max-width: 782px) {
				right: -13px;
			}

			@media screen and (min-width: 783px) {
				right: -20px;
			}
		}
	}
}

.wp-block-bcn-breadcrumb-trail.is-style-white {
	color: var(--wp--preset--color--white);

	& a {
		color: var(--wp--preset--color--white);
	}

	& span:not(:last-of-type) {
		&::after {
			border-left: 6px solid var(--wp--preset--color--white);
		}
	}
}

/* ====================================================================================
snow-monkey-form
==================================================================================== */
.snow-monkey-form {
	color: var(--wp--preset--color--black);

	/* プログレストラッカー */
	& .smf-progress-tracker {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	& .smf-progress-tracker__item__number {
		@media screen and (max-width: 782px) {
			width: 25px;
			height: 25px;
		}

		@media screen and (min-width: 783px) {
			width: 35px;
			height: 35px;
		}
	}

	& .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--primary);
		border: 2px solid var(--wp--preset--color--primary);
	}

	& .smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__text {
		color: var(--wp--preset--color--primary);
	}

	& .smf-progress-tracker__item__text {
		@media screen and (max-width: 782px) {
			font-size: 12px;
		}
	}

	& .smf-progress-tracker__item:after,
	.smf-progress-tracker__item:before {
		@media screen and (min-width: 783px) {
			top: 17px;
		}
	}

	/* テーブルの横並びサイズ */
	& .smf-form--simple-table .smf-item__col--label {
		@media screen and (min-width: 783px) {
			flex: 0 0 30%;
			max-width: 30%;
			padding-right: var(--wp--preset--spacing--30);
			text-align: right;
		}
	}

	& .wp-block-snow-monkey-forms-item.smf-item {
		align-items: center;
		padding-block: var(--wp--preset--spacing--60);

		&.is-baseline {
			align-items: flex-start;
		}
	}

	& .wp-block-snow-monkey-forms-item.smf-item+.wp-block-snow-monkey-forms-item.smf-item {
		border-top: 1px solid var(--wp--preset--color--gray);
	}

	& .smf-item__label {
		font-weight: 700;
	}

	& .smf-item__label__text {
		display: flex;
		align-items: center;
		gap: 5px;
	}

	& .smf-item__label__text mark {
		font-size: 10px;
	}

	& .smf-text-control__control,
	& .smf-textarea-control__control {
		font-size: 16px;
		border-radius: 5px;
		background-color: #f1f1f1;
		border: none;
		width: 100%;
		box-shadow: none;
	}

	& .smf-text-control__control {
		min-height: 46px;

		&.is-small {
			width: 80px;
		}

		&.is-auto {
			width: auto;
		}

		&.is-month {
			width: 10%;
		}

		&.is-date {
			width: 10%;
		}
	}

	& .smf-textarea-control__control {
		padding: 1rem;
		line-height: 1.6;
	}

	& input::placeholder,
	& textarea::placeholder {
		color: var(--wp--preset--color--dark-gray);
		opacity: 0.4;
		font-weight: 400;
	}

	& .smf-checkbox-control {
		cursor: pointer;
	}

	& div[data-name="privacy"] {
		text-align: center;
	}

	& .smf-action {
		margin-top: var(--wp--preset--spacing--50);
		margin-bottom: 0;

		@media screen and (max-width: 782px) {
			display: flex;
			flex-direction: column-reverse;
			gap: 20px;
		}
	}

	& .smf-action .smf-button-control+.smf-button-control {
		@media screen and (max-width: 782px) {
			margin: 0;
		}
	}

	& .smf-item__col.smf-item__col--label {
		padding-bottom: var(--wp--preset--spacing--20);
	}

	& .smf-button-control__control {
		border-radius: 100vmax;
		font-weight: 700;
		background: var(--wp--preset--color--white);
		border: 2px solid var(--wp--preset--color--primary);
		color: var(--wp--preset--color--primary);
		font-size: var(--wp--preset--font-size--lg);
		padding-block: var(--wp--preset--spacing--30);
		min-width: 240px;
		transition: color 0.35s, background-color 0.35s, border-color 0.35s;

		&:hover {
			background-color: var(--wp--preset--color--tertiary);
			border-color: var(--wp--preset--color--secondary);
			color: var(--wp--preset--color--secondary);
		}
	}

	& button[data-action="complete"] {
		background: var(--wp--preset--color--tertiary);
		border: 2px solid var(--wp--preset--color--tertiary);
		color: var(--wp--preset--color--white);

		&:hover {
			background-color: var(--wp--preset--color--tertiary);
			border-color: var(--wp--preset--color--secondary);
			color: var(--wp--preset--color--secondary);
		}
	}
}

.snow-monkey-forms-turnstile>div {
	justify-content: center;
}

/* ====================================================================================
wp-block-flexible-table-block-table
==================================================================================== */
.wp-block-flexible-table-block-table.is-style-primary {

	& th,
	& td {
		border: none !important;

		@media screen and (min-width: 783px) {
			padding-block: 40px !important;
		}
	}

	& th {
		@media screen and (max-width: 782px) {
			padding-block: 15px 2px !important;
		}
	}

	& td {
		@media screen and (max-width: 782px) {
			padding-block: 2px 15px !important;
		}
	}

	& tr {
		border-bottom: 1px solid var(--wp--preset--color--gray);
	}
}

.wp-block-flexible-table-block-table.is-style-secondary {

	& table,
	& tr,
	& th,
	& td {
		border-color: transparent !important;
	}

	& table {
		border-collapse: separate;
		border-spacing: 3px 4px;
	}

	& th,
	& td {
		padding-inline: var(--wp--preset--spacing--50) !important;
		padding-block: var(--wp--preset--spacing--30) !important;
	}

	& th {
		vertical-align: text-top !important;
		width: 26%;
		background-color: var(--wp--preset--color--tertiary) !important;
		color: var(--wp--preset--color--white);
	}

	& td {
		color: var(--wp--preset--color--black);
	}
}

/* ====================================================================================
wp-block-columns
==================================================================================== */
.wp-block-columns.is-style-reverse {
	@media screen and (max-width: 782px) {
		flex-direction: column-reverse;
	}
}

/* ====================================================================================
wp-block-template-part
==================================================================================== */
.wp-block-template-part.is-style-rm-margin-top {
	margin-top: 0;
}

.wp-block-template-part.is-style-separator-footer {
	margin-top: 0;
	background-image: url(../img/separator_footer.png);
	background-size: 200px;

	@media screen and (max-width: 782px) {
		padding-top: 15px;
	}

	@media screen and (min-width: 783px) {
		padding-top: 30px;
	}
}

/* ====================================================================================
wp-block-cover
==================================================================================== */
.wp-block-cover.is-style-height100 {
	height: 100%;
}

/* ====================================================================================
paragraph
==================================================================================== */
/* パラグラフ line-height */
@media screen and (max-width: 782px) {
	p.is-style-sp-lh-2 {
		line-height: 2 !important;
	}

	p.is-style-sp-lh-195 {
		line-height: 1.95 !important;
	}

	p.is-style-sp-lh-19 {
		line-height: 1.9 !important;
	}

	p.is-style-sp-lh-185 {
		line-height: 1.85 !important;
	}

	p.is-style-sp-lh-18 {
		line-height: 1.8 !important;
	}

	p.is-style-sp-lh-175 {
		line-height: 1.75 !important;
	}
}

/* パラグラフ text-align */
@media screen and (max-width: 782px) {
	p.is-style-sp-align-left {
		text-align: left !important;
	}

	p.is-style-sp-align-right {
		text-align: right !important;
	}

	p.is-style-sp-align-center {
		text-align: center !important;
	}
}

/* ====================================================================================
heading
==================================================================================== */
.is-style-inline-block {
	display: inline-block !important;
}

h2.is-style-post-heading {
	font-size: var(--wp--preset--font-size--xl) !important;
	color: var(--wp--preset--color--white) !important;
	background-color: var(--wp--preset--color--primary) !important;
	padding-block: var(--wp--preset--spacing--20) !important;
	padding-inline: var(--wp--preset--spacing--40) !important;
	margin-top: var(--wp--preset--spacing--80) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

h3.is-style-post-heading {
	font-size: var(--wp--preset--font-size--lg) !important;
	padding-block: var(--wp--preset--spacing--20) !important;
	padding-inline: var(--wp--preset--spacing--40) !important;
	border-left: 6px solid var(--wp--preset--color--primary) !important;
	margin-top: var(--wp--preset--spacing--80) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* ====================================================================================
wp-block-query-pagination
==================================================================================== */
.wp-block-query-pagination.is-style-primary {
	margin-top: var(--wp--preset--spacing--180);

	& .wp-block-query-pagination-numbers {
		display: flex;
		gap: 10px;
	}

	& .wp-block-query-pagination-numbers .page-numbers:not(.dots) {
		width: 32px;
		height: 32px;
		display: inline-block;
		text-align: center;
		color: var(--wp--preset--color--white);
		border: 1px solid var(--wp--preset--color--white);
		margin-right: 4px;
		transition: color 0.35s, background-color 0.35s, border-color 0.35s;
		margin: auto;

		&:hover {
			background-color: var(--wp--preset--color--secondary);
			border-color: var(--wp--preset--color--secondary);
			color: var(--wp--preset--color--primary);
		}
	}

	& .wp-block-query-pagination-numbers .page-numbers.current {
		background-color: var(--wp--preset--color--secondary);
		color: var(--wp--preset--color--primary);
		border-color: var(--wp--preset--color--secondary);
	}

	& .wp-block-query-pagination-previous,
	& .wp-block-query-pagination-next {
		transition: color 0.35s;

		&:hover {
			color: var(--wp--preset--color--secondary);
		}
	}
}