/* リンク */
.links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	overflow: auto;
}

.links .link {
	display: block;
	width: max-content;
	max-width: 100%;
	margin-right: 0.4rem;
	padding: 4px 8px;
	border-radius: 4px;
	background-color: var(--color-gray-subtle);
}

.links .link span {
	font-size: var(--font-size-xs);
	white-space: nowrap;
}

/* モーダル */
body[data-modal="true"] {
	height: 100%;
	overflow-y: hidden;
}

/* 太字 */
span[data-ui-bold="true"] {
	font-weight: bold;
	font-variation-settings: "wght" 600;
}

a[data-ui="underline"],
span[data-ui="underline"] {
	text-decoration: underline;
}

/* アウトラインテキスト */
*[data-outline="true"] {
	-webkit-text-stroke: 1px white;
	text-transform: uppercase;
	background: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media screen and (max-width: 768px) {
	*[data-ui="box-shadow"],
	.form_page,
	article {
		padding: 4%;
	}
}

/* ボックスUI */
section.box,
*[data-ui="box"] {
	padding: 40px;
	background-color: var(--color-white-offwhite);
	border-radius: 16px;
	box-shadow: 16px 16px 8px rgba(var(--color-primary-rgb), 0.3);
}

/* グラスモーフィズム */
*[data-ui="glassmorphism"] {
	background: rgba(232, 237, 255, 0.15);
	backdrop-filter: blur(16px);
	box-shadow: 0 8px 16px rgba(231, 231, 231, 0.242);
}

/* ローディングアニメーション */
*[data-ui="loading"],
.loading-background {
	background: linear-gradient(90deg, white, black, white);
	background-size: 200% 100%;
	animation: moveGradient 3s linear infinite;
}

@keyframes moveGradient {
	0% {
		background-position: 100% 0;
	}

	100% {
		background-position: -100% 0;
	}
}

/* ボタンUI */
.btns {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

a[data-ui="button"],
.btn {
	display: block;
	width: max-content;
	max-width: 100%;
	min-width: 68px;
	padding: 8px 16px;
	margin-bottom: 4px;
	border: none;
	border-radius: 8px;
}

.btns .btn {
	margin-right: 0.5rem;
}

button:disabled {
	opacity: 0.3;
	pointer-events: none;
}

a[data-ui="button"] span,
button span,
.btn span {
	display: block;
	width: max-content;
	margin: auto 0;
	font-size: var(--font-size-s);
	color: var(--color-white-offwhite);
	text-align: center;
}

/* 送信ボタン */
#submitBtn {
	--size-submit-btn: 120px;
	position: fixed;
	right: 16px;
	bottom: 32px;
	display: flex;
	flex-direction: column;
	min-width: var(--size-submit-btn);
	max-width: var(--size-submit-btn);
	min-height: var(--size-submit-btn);
	max-height: var(--size-submit-btn);
	padding: 0;
	margin: auto;
	background-color: var(--color-published);
	box-shadow: 16px 8px 8px rgba(var(--color-published-rgb), 0.4);
	border-radius: 50%;
	overflow: hidden;
	z-index: 80;
}

#submitBtn[data-fixed="false"] {
	position: unset;
	right: unset;
	bottom: unset;
	min-width: unset;
	max-width: unset;
	min-height: unset;
	max-height: unset;
	width: 300px;
	height: 100px;
	padding: 8px 16px;
	margin: 0 auto;
	border-radius: 40px;
}

#submitBtn span {
	font-size: var(--font-size-s);
	color: var(--color-white-offwhite);
	text-decoration: none;
}

/* アクティブ */
button[data-active="true"] {
	/* background-color: rgb(255, 210, 96); */
	background-color: var(--color-active);
}

/* アンクリッカブル */
*[data-unclickabled="true"],
.pointer_events_none {
	pointer-events: none;
	text-decoration: none;
}

/* 隠しUI */
*[data-hidden="false"] {
	transition: all 0.4s ease-in-out;
	opacity: 1 !important;
}

*[data-hidden="true"] {
	display: none;
	transition: all 0.4s ease-in-out;
	opacity: 0 !important;
}

*[data-disabled="true"] {
	opacity: 0.4;
}

/* pcサイズで非表示 */
*[data-hidden-webview="true"] {
	display: none;
}

@media screen and (max-width: 768px) {
	.sp *[data-hidden-webview="true"] {
		display: inline-block;
	}
}

/* ブレーク（改行） */
span[data-break="true"] {
	display: block;
}

@media screen and (max-width: 768px) {
	a[data-mobile-break="true"],
	span[data-mobile-break="true"] {
		display: block;
	}
}

/* 必須項目 */
span[data-required="true"]::after,
label[data-required="true"]::after {
	content: "*";
	color: var(--color-alert);
}

span[data-required="str"],
label[data-required="str"] {
	display: flex;
	flex-direction: row;
}

span[data-required="str"]::after,
label[data-required="str"]::after {
	content: "必須";
	width: max-content;
	margin: auto 0.4rem;
	padding: 2px 12px;
	font-size: var(--font-size-xxs);
	font-weight: normal;
	color: var(--color-white-offwhite);
	background-color: var(--color-alert);
	border-radius: 8px;
}

*[data-required="true"] + input,
*[data-required="true"] + textarea,
*[data-required="str"] + input,
*[data-required="str"] + textarea {
	border-width: 3px;
	padding: 8px;
}

/* 二倍ダーシUI */
*[data-ui="double-dash"],
.double_dash {
	letter-spacing: -0.1em;
	padding: 0 4px;
}

/* エンプティステート */
*[data-ui="empty-state"],
.empty_state {
	display: flex;
	flex-direction: column;
}

/* 料金 */
span[data-ui="price"],
.price {
	font-size: var(--font-size-xxl);
	font-family: din-2014 !important;
}

/* 取り消し線 */
span[data-ui="linethrough"],
.linethrough {
	text-decoration: line-through;
}

/* スクリーンリーダー読み上げ用の非表示CSS */
*[data-ui="hiddenForScreenReader"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	margin: -1px;
}

/* パンくずリスト
https://pote-chil.com/html-maker/breadcrumb/
 */
.sp ol[data-ui="breadcrumb"] {
	display: none;
}

ol[data-ui="breadcrumb"] {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 20px;
	list-style: none;
	padding: 0;
	font-size: .9em;
	z-index: 0;
}

ol[data-ui="breadcrumb"] li {
	display: flex;
	align-items: center;
}

ol[data-ui="breadcrumb"] li:first-child::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 4px;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11.7%207.5%204%2013.8v6.8c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-4c0-.4.3-.7.7-.7h2.7c.4%200%20.7.3.7.7v4c0%20.4.3.7.7.7h4.7c.4%200%20.7-.3.7-.7v-6.8l-7.7-6.3h-.9zm12.1%204.4L20.3%209V3.2c0-.3-.2-.5-.5-.5h-2.3c-.3%200-.5.2-.5.5v2.9L13.3%203c-.7-.6-1.8-.6-2.5%200L.2%2011.8c-.2.2-.3.5-.1.7l1.1%201.3c.2.2.5.2.7.1l9.8-8.1h.6l9.8%208.1c.2.2.5.1.7-.1l1.1-1.3c.2-.2.1-.5-.1-.6z%22%20style%3D%22fill%3A%23333333%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	content: "";
}

ol[data-ui="breadcrumb"] li:not(:last-child)::after {
	display: inline-block;
	width: .3em;
	height: .6em;
	margin-left: 12px;
	background-color: #333333;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "";
}

ol[data-ui="breadcrumb"] a {
	color: #333333;
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	section.box,
	*[data-ui="box"] {
		padding: 24px 16px;
		box-shadow: none;
	}

	#submitBtn[data-fixed="false"] {
		max-width: 100%;
	}
}