@charset "UTF-8";

.p-contact-form {
	
}

@media (min-width: 960px) {
	.p-contact-form {
		grid-template-columns: max(220px, 20%) 1fr;
	}
}

.p-contact-form__head span {
	white-space: nowrap;
}

@media (min-width: 960px) {
	.p-contact-title {
		margin: 45px auto 0;
	}
}

@media (max-width: 959px) {
	.p-contact-title {
		margin: 30px auto 0;
	}
}

.p-contact-form__note {
	color: #d81825;
}

.p-contact-form__information {
	max-width: 960px;
	margin: 30px auto 0;
	padding: 1.5em 2em;
	background-color: #f5f5f5;
}

.p-contact-form__information p {
	margin-top: 1.0em;
}

.p-contact-form__information p:first-of-type {
	margin-top: 0;
}

.p-contact-form__information .note {
	font-size: 0.8em;
	padding-left: 1.0em;
	text-indent: -1.0em;
}

.p-contact-form__information .note + .note {
	margin-top: 0;
}

.p-contact-form__items {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.p-contact-form__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 15px;
}

.p-contact-form__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	font-size: 1.8rem;
	font-weight: bold;
}


.p-contact-separator {
	border: 0;
	border-bottom: solid 1px #cccccc;
}

@media (min-width: 960px) {
	.p-contact-separator {
		max-width: 960px;
		margin: 45px auto 0;
	}
}

@media (max-width: 959px) {
	.p-contact-separator {
		margin: 30px 10PX 0;
	}
}


.mw_wp_form_input .p-contact-form-select {
	width: auto;
}

.p-contact-form__item-group:has(select:disabled) {
	opacity: 0.4;
}


@media (min-width: 960px) {
	.p-contact-form__inner {
		display: grid;
		grid-template-columns: max(160px, 20%) 1fr;
		align-items: center;
		gap: 30px 60px;
	}
}

.p-contact-form__agree {
	display: flex;
	justify-content: center;
	gap: 0 10px;
}

@media (min-width: 960px) {
	.p-contact-form__agree {
		max-width: 960px;
		margin: 45px auto 0;
		padding: 0 45px 0;
	}
}
@media (max-width: 959px) {
	.p-contact-form__agree {
		margin: 30px auto 0;
		padding: 0 5vw 0;
	}
}


.p-contact-form-radio,
.p-contact-form-checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 20px;
	width: 100%;
	padding-top: 15px;
	font-size: 1.6rem;
}

.p-contact-form-radio__label,
.p-contact-form-checkbox__label {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: inherit;
	color: #000000;
	position: relative;
}

.p-contact-form-radio__input,
.p-contact-form-checkbox__input {
	/* アクセシビリティを維持しつつ非表示 */
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.p-contact-form-radio__visual,
.p-contact-form-checkbox__visual {
	position: relative;
	width: 20px;
	height: 20px;
	border: 1px solid #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}


/* Checkbox specific */
.p-contact-form-checkbox__label[data-type="checkbox"] .p-contact-form-checkbox__visual {
	border-radius: 4px;
}

/* Radio specific */
.p-contact-form-radio__label[data-type="radio"] .p-contact-form-radio__visual {
	border-radius: 50%;
}

/* Checked State */
.p-contact-form-radio__input:checked + .p-contact-form-radio__visual,
.p-contact-form-checkbox__input:checked + .p-contact-form-checkbox__visual {
	background-color: #1b2943;
	border-color: #1b2943;
}

.p-contact-form-radio__input:checked + .p-contact-form-radio__visual::after,
.p-contact-form-checkbox__input:checked + .p-contact-form-checkbox__visual::after {
	content: "";
	display: block;
}



.p-contact-form-checkbox__input:checked + .p-contact-form-checkbox__visual::after {
	width: 0.42em;
	height: 0.7em;
	border: solid white;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) translate(-1px, -1px);
}



.p-contact-form-radio__input:checked + .p-contact-form-radio__visual {
	background-color: #ffffff;
	border-width: 6px;
}




/* modaal.css Overwright */

.modaal-content-container {
	overflow-y: auto !important;
}

/* color sample */

.c-swatch {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.0em;
}

@media (min-width: 640px) {
	.c-swatch {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 960px) {
	.c-swatch {
		grid-template-columns: repeat(5, 1fr);
	}
}


.cw_color h2 {
	font-size: 2.0rem;
}

@media (min-width: 640px) {
	.cw_color h2 {
		font-size: 2.6rem;
	}
}

.cw_color h3 {
	margin-top: 3.0em;
	padding-bottom: 0.5em;
	font-size: 1.4rem;
	border-bottom: 1px solid #1b2943;
}

.cw_color h3 + .note {
	background-color: #f5f5f5;
	font-size: 1.2rem;
	font-weight: normal;
	margin-top: 0.5em;
	padding: 1em;
	line-height: 1.6;
}

.cw_color h3 + .note li {
	padding-left: 1em;
	position: relative;
}

.cw_color h3 + .note li::before {
	content: "・";
	position: absolute;
	left: 0;
}

.cw_color h3 + .note li + li {
	margin-top: 0.5em;
}

@media (min-width: 640px) {
	.cw_color h3 {
		font-size: 1.6rem;
	}

	.cw_color h3 + .note {
		font-size: 1.4rem;
		margin-top: 1em;
		padding: 1em;
	}

}

.c-swatch {
	margin-top: 30px;
}

.swatch-card {
	padding: 1.0em;
	border: solid 1px var(--clr-border);
}

@media (min-width: 640px) {
	.swatch-card {
		padding: 2.0em;
		border: solid 1px var(--clr-border);
	}
}

.swatch-card__preview img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.swatch-card__info {
	margin-top: 1.0em;
}

.swatch-card__info .swatch-card__name {
	font-weight: bold;
}

.swatch-card__info .swatch-card__remarks {
	margin-top: 0.5em;
}

p.p-contact-form__link a {
	text-decoration: underline;
}

/***********************************************
 confirm
************************************************/
@media (min-width: 960px) {
    .mw_wp_form_confirm .p-contact-form {
        grid-template-columns: 340px 1fr;
    }
}

.mw_wp_form_confirm .p-contact-form-checkbox__input:checked + .p-contact-form-checkbox__visual {
	background-color: #aaa;
	border-color: #aaa;
	pointer-events: none;
}
/***********************************************
 error
************************************************/
.mw_wp_form div.errorinfo {
	background-color: #fdf5f5;
	width: calc(100% - 10vw);
	max-width: 800px;
	padding: 15px;
	margin: 15px auto;
	color: #c30d23;
	font-size: 1.3rem;
	font-weight: bold;
}

.mw_wp_form div.error ul.error {
	margin-top: 0.5em;
}

.mw_wp_form div.error li {
	font-weight: normal;
}

.mw_wp_form div.error li::before {
	content: "・";
}

@media (min-width: 960px) {
	.mw_wp_form div.errorinfo {
		padding: 20px;
		font-size: 1.5rem;
	}
}