@charset "utf-8";
section#form .wrap {
    max-width: 840px;
}

.nav-home {
    margin-top: var(--m4);
    margin-inline: auto;
}
section#message {
    padding-block: var(--m10);
    border-bottom: 2px solid var(--black);
}

/** フォーム  
-------------------------------------------------------------------- */
html:not(:has(#form.is_show)) {
	scroll-behavior: smooth;
}

form {}
form dl {
    padding-block: var(--m2);
}
form dd {
	-webkit-margin-start: 0;
	margin-inline-start: 0;
}
form button {
	border: none;
	cursor: pointer;
}
form dt {
	margin-bottom: 0.3lh;
	font-weight: 700;
    font-size: var(--headline-size);
    position: relative;
}
form dd {}
form dd + dd {
	margin-top: 0.5lh;
}
form dl dt::after {
	content: var(--item-text, "任意");
	display: inline-block;
	padding-inline: 0.5ic;
	background: var(--item-bg, gray);
    color: var(--item-color, white);
    font-weight: 700;
    font-size: var(--note-size);
    margin-left: 0.5ic;
    vertical-align: text-bottom;
}
form dl.required,
form dl:has([aria-required], [required]) {
	--item-text: "必須";
	--item-bg: var(--alert, red);
	--item-color: white;
}
form label {
    width: fit-content;
    max-width: 100%;
    padding-block: 0.25lh;
}
form label:has(input:is([type="checkbox"], [type="radio"])) {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	-moz-column-gap: 0.5ic;
	column-gap: 0.5ic;
    color: var(--black, white);
}
form dd .note {
	flex: 0 0 100%;
	color: var(--gray, gray);
}
form dd:has(input:user-invalid) .note {
	color: var(--alert, red);
}
form :is(input, textarea)::placeholder,
option[disabled] {
    color: rgb(from var(--black, black) r g b / 0.3);
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea,
form select {
	padding-inline: 0.5ic;
    background: var(--white, white);
    outline: 1px solid var(--black);
    border-radius: 6px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):focus-visible,
form textarea:focus-visible,
form select:focus-visible {
	outline: var(--outline, dodgerBlue) auto 1px;
    border-color: transparent;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]):user-invalid,
form textarea:user-invalid,
form select:user-invalid {
	outline: var(--alert, red) auto 1px;
}
form input:is([type="text"], [type="email"], [type="tel"], [type="url"]),
form textarea {
    width: 100%;
	box-sizing: border-box;
    padding-block: 0.25lh;
}
form input:is([type="checkbox"], [type="radio"]) {
	appearance: auto;
    inline-size: 1ic;
    block-size: 1ic;
    accent-color: var(--action, lawngreen);
}
form label:has(select) {
	--arrow-space: 2ic;
    position: relative;
}
form label:has(select)::after {
    --size: 0.3lh;
    display: block;
    width: var(--size);
    height: var(--size);
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    rotate: 45deg;

    position: absolute;
    top: 50%;
    right: calc((var(--arrow-space) - var(--size)) / 2);
    translate: 0 -50%;

    transition: var(--transition);
    pointer-events: none;
}

form select {
	appearance: none;
    width: auto;
    padding-block: 0.2lh;
    padding-right: var(--arrow-space);
	cursor: pointer;
}
form textarea {
	min-height: 10lh;
	field-sizing: content;
}

form [type="submit"]:is(button, input) {
    margin-block: 1lh 0.5lh;
	margin-inline: auto;
}
@media (hover: hover) {
	form [type="submit"]:is(button, input) {
		cursor: pointer;
	}
}
@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
	form dl:has([aria-required], [required]) dt p::after {
		font-size: 75%;
	}
}