/* お問い合わせ・保証申請など、サポートの下の階層のフォームと案内ページ（/support と同じ見た目にそろえる） */
.sl-form,
.sl-form * {
	box-sizing: border-box;
}

.sl-form [hidden] {
	display: none !important;
}

.sl-form {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 0 80px;
	color: #1d1d1f;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.sl-form a {
	color: #0066cc;
}

.sl-form__head {
	margin-bottom: 28px;
}

.sl-form__title {
	margin: 0 0 12px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.sl-form__lead {
	margin: 0;
	color: #515154;
	font-size: 15px;
	line-height: 1.8;
}

.sl-form__shortcuts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.sl-form__shortcuts a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #d2d2d7;
	border-radius: 999px;
	background: #fff;
	color: #1d1d1f;
	font-size: 13px;
	text-decoration: none;
}

.sl-form__shortcuts a:hover {
	border-color: #0071e3;
	color: #0071e3;
}

.sl-form__errors {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 12px;
	background: #fff2f2;
	color: #c4161c;
	font-size: 14px;
	line-height: 1.7;
}

.sl-form__errors p {
	margin: 0 0 4px;
	font-weight: 700;
}

.sl-form__errors ul {
	margin: 0;
	padding-left: 1.2em;
}

.sl-form__card {
	padding: 32px;
	border-radius: 18px;
	background: #f5f5f7;
}

.sl-form__field {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.sl-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.sl-form__label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	padding: 0;
	color: #1d1d1f;
	font-size: 14px;
	font-weight: 700;
}

.sl-form__req,
.sl-form__opt {
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
}

.sl-form__req {
	background: #1d1d1f;
	color: #fff;
}

.sl-form__opt {
	background: #e8e8ed;
	color: #515154;
}

.sl-form__control {
	display: block;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid #d2d2d7;
	border-radius: 10px;
	background: #fff;
	color: #1d1d1f;
	font-size: 16px;
	font-family: inherit;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

select.sl-form__control {
	padding-right: 40px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
}

.sl-form__control:focus {
	border-color: #0071e3;
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, .18);
}

.sl-form__textarea {
	height: auto;
	min-height: 180px;
	padding: 12px 14px;
	line-height: 1.7;
	resize: vertical;
}

.sl-form__help {
	margin: 6px 0 0;
	color: #6e6e73;
	font-size: 13px;
	line-height: 1.7;
}

.sl-form__note {
	margin: -8px 0 22px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.7;
}

.sl-form__note--info {
	background: #e8f2fc;
	color: #1d1d1f;
}

.sl-form__note a {
	margin-left: 6px;
	font-weight: 700;
}

.sl-form__files {
	display: grid;
	gap: 8px;
}

.sl-form__file {
	width: 100%;
	padding: 10px 12px;
	border: 1px dashed #c7c7cc;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
}

.sl-form__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sl-form__chip {
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.sl-form__chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sl-form__chip span {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #d2d2d7;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
}

.sl-form__chip input:checked + span {
	border-color: #0071e3;
	background: #0071e3;
	color: #fff;
}

.sl-form__chip input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(0, 113, 227, .3);
}

.sl-form__confirm {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding-top: 28px;
	border-top: 1px solid #e0e0e5;
}

.sl-form__agree {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
}

.sl-form__submit-error {
	margin: 0;
	color: #c4161c;
	font-size: 14px;
}

.sl-form__submit {
	width: 100%;
	max-width: 360px;
	height: 52px;
	border: 0;
	border-radius: 999px;
	background: #0071e3;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.sl-form__submit:hover {
	background: #0077ed;
}

.sl-form__submit:disabled {
	background: #86868b;
	cursor: default;
}

.sl-form__back {
	margin: 0;
	font-size: 14px;
}

/* 送信完了・案内ページ */
.sl-form__done {
	padding: 40px 32px;
	border-radius: 18px;
	background: #f5f5f7;
	text-align: center;
}

.sl-form__done-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #30d158;
	color: #fff;
}

.sl-form__done-icon svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
}

.sl-form__done h2 {
	margin: 0 0 12px;
	font-size: 22px;
	font-weight: 700;
}

.sl-form__done p {
	margin: 0 0 8px;
	color: #515154;
	font-size: 15px;
	line-height: 1.8;
}

.sl-form__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 24px;
}

.sl-form__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 22px;
	border: 1px solid #d2d2d7;
	border-radius: 999px;
	background: #fff;
	color: #1d1d1f !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
}

.sl-form__btn--primary {
	border-color: #0071e3;
	background: #0071e3;
	color: #fff !important;
}

/* 手順の案内（保証申請の流れなど） */
.sl-form__steps {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sl-form-step;
}

.sl-form__step {
	position: relative;
	margin: 0 0 14px;
	padding: 24px 24px 24px 76px;
	border-radius: 18px;
	background: #f5f5f7;
	counter-increment: sl-form-step;
}

.sl-form__step::before {
	content: counter(sl-form-step);
	position: absolute;
	top: 22px;
	left: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1d1d1f;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.sl-form__step h2 {
	margin: 4px 0 8px;
	font-size: 18px;
	font-weight: 700;
}

.sl-form__step p,
.sl-form__step li {
	color: #515154;
	font-size: 14px;
	line-height: 1.8;
}

.sl-form__step p {
	margin: 0 0 8px;
}

.sl-form__step ul {
	margin: 0 0 8px;
	padding-left: 1.2em;
}

.sl-form__step li {
	list-style: disc;
}

.sl-form__step .sl-form__actions {
	justify-content: flex-start;
	margin-top: 12px;
}

.sl-form__section {
	margin-top: 36px;
}

.sl-form__section h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
}

.sl-form__section p,
.sl-form__section li {
	color: #515154;
	font-size: 14px;
	line-height: 1.8;
}

.sl-form__section ul {
	margin: 0;
	padding-left: 1.2em;
}

.sl-form__section li {
	list-style: disc;
}

/* ユーザー登録：製品の追加と一覧 */
.sl-form__inline {
	display: flex;
	gap: 8px;
}

.sl-form__add {
	flex: 0 0 auto;
	min-width: 88px;
	height: 48px;
	border: 1px solid #1d1d1f;
	border-radius: 10px;
	background: #1d1d1f;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.sl-form__items {
	width: 100%;
	margin-top: 12px;
	border-collapse: collapse;
	border-radius: 10px;
	background: #fff;
	font-size: 14px;
	overflow: hidden;
}

.sl-form__items th,
.sl-form__items td {
	padding: 10px 12px;
	border-bottom: 1px solid #e8e8ed;
	text-align: left;
	vertical-align: middle;
}

.sl-form__items th {
	background: #fafafc;
	color: #6e6e73;
	font-size: 12px;
	font-weight: 700;
}

.sl-form__items th:last-child,
.sl-form__items td:last-child {
	width: 96px;
}

.sl-form__qty {
	height: 40px;
	padding: 0 8px;
}

.sl-form__empty {
	margin: 12px 0 0;
	padding: 14px;
	border: 1px dashed #c7c7cc;
	border-radius: 10px;
	color: #6e6e73;
	font-size: 14px;
	text-align: center;
}

.sl-form__field-error {
	margin: 6px 0 0;
	color: #c4161c;
	font-size: 13px;
}

.sl-form__control--short {
	max-width: 240px;
}

.sl-form--narrow {
	max-width: 520px;
}

/* 会員のご案内：できること */
.sl-form__benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.sl-form__benefits li {
	padding: 22px 24px;
	border-radius: 18px;
	background: #f5f5f7;
}

.sl-form__benefits strong {
	display: block;
	margin-bottom: 6px;
	font-size: 17px;
}

.sl-form__benefits span {
	color: #515154;
	font-size: 14px;
	line-height: 1.8;
}

/* 規約・方針・特定商取引法の表記（本文はそのまま、読みやすい組みにする） */
.sl-doc {
	max-width: 820px;
	margin: 0 auto;
	padding: 8px 0 80px;
	color: #1d1d1f;
	font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

.sl-doc .sl-doc__title {
	margin: 0 0 24px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
}

.sl-doc h3 {
	margin: 40px 0 14px;
	padding: 0 0 10px;
	border-bottom: 1px solid #e0e0e5;
	background: none;
	border-radius: 0;
	font-size: 20px;
	font-weight: 700;
}

.sl-doc strong {
	font-weight: 700;
}

.sl-doc p {
	color: #333336;
}

.sl-doc .box {
	padding: 28px 32px;
	border: 0;
	border-radius: 18px;
	background: #f5f5f7;
	font-size: 14px;
	line-height: 1.9;
}

.sl-doc table {
	width: 100%;
	margin: 12px 0 24px;
	border-collapse: collapse;
	font-size: 14px;
}

.sl-doc th,
.sl-doc td {
	padding: 12px 14px;
	border: 1px solid #e0e0e5;
	vertical-align: top;
}

.sl-doc th,
.sl-doc tr td:first-child {
	background: #f5f5f7;
}

.sl-doc dl.company-data {
	display: grid;
	grid-template-columns: 200px 1fr;
	margin: 0;
	border-top: 1px solid #e0e0e5;
}

.sl-doc dl.company-data dt,
.sl-doc dl.company-data dd {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 14px 16px;
	border-bottom: 1px solid #e0e0e5;
	font-size: 14px;
}

.sl-doc dl.company-data dt {
	background: #f5f5f7;
	font-weight: 700;
}

@media screen and (max-width: 768px) {
	.sl-form {
		padding: 0 0 56px;
	}

	.sl-form__title {
		font-size: 26px;
	}

	.sl-form__card {
		padding: 22px 18px;
		border-radius: 14px;
	}

	.sl-form__row {
		grid-template-columns: 1fr;
	}

	.sl-form__done {
		padding: 32px 20px;
	}

	.sl-form__step {
		padding: 20px 18px 20px 64px;
	}

	.sl-form__step::before {
		top: 18px;
		left: 16px;
		width: 32px;
		height: 32px;
		font-size: 15px;
	}

	.sl-form__benefits {
		grid-template-columns: 1fr;
	}

	.sl-doc {
		padding: 0 0 56px;
	}

	.sl-doc .sl-doc__title {
		font-size: 26px;
	}

	.sl-doc .box {
		padding: 20px 18px;
	}

	.sl-doc dl.company-data {
		grid-template-columns: 1fr;
	}

	.sl-doc dl.company-data dt {
		padding-bottom: 6px;
		border-bottom: 0;
	}

	.sl-doc dl.company-data dd {
		padding-top: 6px;
	}
}