@charset "UTF-8";
/*
 * お問い合わせ（10）
 *
 * 入力欄は角丸8pxの四角（ボタンのような丸にはしない）。
 */

.md-page--contact {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-width: 720px;
}

.md-cintro {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--md-ink-2);
}

.md-cintro strong { color: var(--md-red); }

/* ============================================================ エラー */

.md-cerrors {
	padding: 18px 22px;
	border: 1.5px solid var(--md-red);
	border-radius: 12px;
	background: var(--md-red-bg);
}

.md-cerrors:focus { outline: 2px solid var(--md-red); outline-offset: 2px; }

.md-cerrors__title {
	margin: 0 0 8px;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 15px;
	color: var(--md-red-dark);
}

.md-cerrors__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.md-cerrors__list li { margin: 0; }

.md-cerrors__list a {
	font-size: 13px;
	color: var(--md-red-dark) !important;
}

.md-cerr {
	margin: 7px 0 0;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--md-red-dark);
}

.md-cerr span {
	width: 16px;
	height: 16px;
	flex: none;
	border-radius: 999px;
	background: var(--md-red);
	color: #fff;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================== フォーム */

.md-cform {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.md-cform__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.md-cfield {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.md-cfield__label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 14px;
	color: var(--md-ink);
	padding: 0;
}

.md-req,
.md-opt {
	padding: 2px 7px;
	border-radius: 4px;
	font-family: var(--md-font-body);
	font-weight: 700;
	font-size: 10.5px;
	line-height: 1.6;
}

.md-req {
	background: var(--md-red-pale);
	color: var(--md-red-dark);
}

.md-opt {
	background: #f1efec;
	color: var(--md-ink-3);
}

.md-cinput {
	width: 100%;
	height: 52px;
	padding: 0 16px;
	border: 1.5px solid var(--md-line-3);
	border-radius: 8px;
	background: var(--md-surface);
	font-family: inherit;
	font-size: 15px;
	color: var(--md-ink);
	box-sizing: border-box;
}

.md-cinput:focus {
	outline: none;
	border-color: var(--md-teal-2);
	background: #fff;
}

.md-cinput--area {
	height: 168px;
	padding: 14px 16px;
	line-height: 1.8;
	resize: vertical;
}

select.md-cinput {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--md-ink-3) 50%),
		linear-gradient(135deg, var(--md-ink-3) 50%, transparent 50%);
	background-position: calc(100% - 20px) 23px, calc(100% - 15px) 23px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.md-cfield.has-error .md-cfield__label { color: var(--md-red-dark); }

.md-cfield.has-error .md-cinput {
	border-width: 2px;
	border-color: var(--md-red);
	background: var(--md-red-bg);
}

/* 種別のラジオ */

.md-ckinds {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.md-ckind {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 0 18px;
	border: 1.5px solid var(--md-line-3);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	box-sizing: border-box;
}

.md-ckind input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.md-ckind::before {
	content: "";
	width: 20px;
	height: 20px;
	flex: none;
	border-radius: 999px;
	border: 2px solid var(--md-line-3);
	background: #fff;
	box-sizing: border-box;
}

.md-ckind.is-checked {
	border-color: var(--md-red);
	background: var(--md-red-bg);
}

.md-ckind.is-checked::before {
	border-color: var(--md-red);
	border-width: 6px;
}

.md-ckind:has( input:focus-visible ) {
	outline: 2px solid var(--md-teal-3);
	outline-offset: 2px;
}

.md-ckind__label {
	font-size: 15px;
	color: var(--md-ink);
}

.md-ckind__badge {
	margin-left: auto;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--md-red);
	color: #fff;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 11px;
	flex: none;
}

/* 削除依頼のときだけ出る追加欄 */

.md-cremoval {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 24px;
	border: 2px solid var(--md-red);
	border-radius: 14px;
	background: var(--md-red-bg);
}

.md-cremoval[hidden] { display: none; }

.md-cremoval__title {
	margin: 0;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 16px;
	color: var(--md-red-dark);
}

.md-cremoval .md-cinput { background: #fff; }

/* チェックボックス */

.md-ccheck {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	padding: 10px 0;
	cursor: pointer;
}

.md-ccheck input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.md-ccheck__box {
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	border: 2px solid var(--md-line-3);
	border-radius: 6px;
	background: #fff;
	box-sizing: border-box;
	position: relative;
}

.md-ccheck.is-checked .md-ccheck__box,
.md-ccheck:has( input:checked ) .md-ccheck__box {
	background: var(--md-red);
	border-color: var(--md-red);
}

.md-ccheck--teal.is-checked .md-ccheck__box,
.md-ccheck--teal:has( input:checked ) .md-ccheck__box {
	background: var(--md-teal-2);
	border-color: var(--md-teal-2);
}

.md-ccheck.is-checked .md-ccheck__box::after,
.md-ccheck:has( input:checked ) .md-ccheck__box::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.md-ccheck:has( input:focus-visible ) .md-ccheck__box {
	outline: 2px solid var(--md-teal-3);
	outline-offset: 2px;
}

.md-ccheck__label {
	font-size: 14px;
	line-height: 1.7;
	color: var(--md-ink-2);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.md-cform__submit {
	height: 64px;
	border: none;
	padding: 0;
	width: 100%;
}

.md-cform__submit .md-btn3d__label { font-size: 19px; }

/* ========================================================== 送信完了 */

.md-done {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 48px 0;
}

.md-done__mark {
	width: 76px;
	height: 76px;
	border-radius: 999px;
	background: #dff8f6;
	border: 2px solid var(--md-teal-2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 34px;
	color: var(--md-teal-3);
}

.md-done__title {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--md-font-round);
	font-weight: 800;
	font-size: 26px;
	color: var(--md-ink);
}

.md-done__lead {
	margin: 0;
	font-size: 14px;
	color: var(--md-ink-2);
}

.md-done__table {
	width: 100%;
	max-width: 480px;
	margin: 6px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0;
	border: 1.5px solid var(--md-line);
	border-radius: 14px;
	overflow: hidden;
	text-align: left;
	font-size: 13.5px;
}

.md-done__table dt {
	padding: 13px 18px;
	background: var(--md-surface);
	color: var(--md-ink-3);
	font-size: 12.5px;
	border-bottom: 1px solid var(--md-line-2);
	white-space: nowrap;
}

.md-done__table dd {
	margin: 0;
	padding: 13px 18px;
	color: var(--md-ink);
	border-bottom: 1px solid var(--md-line-2);
	word-break: break-all;
}

.md-done__table dt:last-of-type,
.md-done__table dd:last-of-type { border-bottom: none; }

.md-done__btn {
	width: 240px;
	height: 52px;
	margin-top: 6px;
}

/* ======================================================= レスポンシブ */

@media screen and (max-width: 834px) {
	.md-cremoval { padding: 16px; }
	.md-cinput { height: 50px; font-size: 16px; }
	.md-cinput--area { height: 150px; }
	.md-ckind { padding: 0 14px; }
	.md-ckind__label { font-size: 14px; }
	.md-cform__submit { height: 58px; }
	.md-cform__submit .md-btn3d__label { font-size: 17px; }
	.md-done { padding: 30px 0; }
	.md-done__title { font-size: 21px; }
	.md-done__btn { width: 100%; }
}