/* CSS Document */

:root{
	--color-success: #b36e3e;
	--color-error: #cc0000;
	}

#main{
	font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
}

#sideMenu{
	display: none;
}

#inquiry,
#thanks{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-block: clamp(32px, calc(56 / 1200 * 100vw), 56px) clamp(16px, calc(24 / 1200 * 100vw), 24px);
}
#inquiry>*,
#thanks>*{
	grid-column: 2;
}
#inquiry h2,
#thanks h2{
	font: 600 clamp(20px, calc(28 / 768 * 100vw), 28px) var(--font-min);
	letter-spacing: 0.1em;
}
#inquiry h2+div,
#thanks h2+div{
	margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
}

#thanks{
	margin-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
}

#form{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin-bottom: clamp(96px, calc(120 / 1200 * 100vw), 120px);
}
#form>*{
	grid-column: 2;
}

#noticeFoot{
	margin-top: 16px;
}

#policy{
	justify-self: center;
	}

#agreement{
	display: grid;
	margin-top: clamp(32px, calc(56 / 1200 * 100vw), 56px);
}
#agreement label{
	padding: 8px 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
}
#agreement .err label{
	background: #ffffcc;
	outline: 2px solid var(--color-error);
}
#agreement input{
	transform: translateY(0.25em);
	&[type="checkbox"]:checked{
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0.5 12 12" fill="none" stroke="%230a749e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 7 4 10 11 3" /></svg>') no-repeat center / 75%;
	}
}
#agreement a{
	display: contents;
	color: #0a749e;
}

#captcha{
	justify-self: center;
	margin-top: 48px;
}
#captcha:not(:has(div)){
	display: none;
}
#captcha .captcha-holder{
	width: 100%;
	border-color: #f33f46;
	border-width: 2px;
}
#captcha .captcha-success{
	border-color: #5bd25b;
}

#submit{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	grid-gap: 16px 24px;
	margin-top: 48px;
}
#submit button{
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	column-gap: clamp(16px, calc(24 / 768 * 100vw), 24px);
	align-items: center;
	width: min(100%, 320px);
	min-height: clamp(48px, calc(56 / 768 * 100vw), 56px);
	padding: 4px clamp(8px, calc(16 / 768 * 100vw), 16px);
	background: #808080;
	color: #fff;
	font-family: var(--font-min);
	text-decoration: none;
}
#submit button:before{
	content: "";
}
#submit button:after{
	content: "";
	justify-self: end;
	background: currentColor;
	width: clamp(16px, calc(56 / 1200 * 100vw), 56px);
	height: 5px;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 5"><line y1="2.5" x2="52" y2="2.5" style="fill: none; stroke: %231a1a1a; stroke-miterlimit: 10;"/><polygon points="52 0 55 2.5 52 5 52 0" style="fill: %231a1a1a;"/></svg>') no-repeat center right / auto 100%;
}
#submit button:hover{
	background: var(--color);
	border-color:transparent;
	color: #fff;
}
#submit button.lsf-error-btn{
	background: var(--color-error);
	pointer-events: none;
}
#submit #btnSend{
	background: var(--color-theme);
	border-color: transparent;
	color: #fff;
}
#submit #btnModify{
	background: #fff;
	border: 1px solid var(--color-border);
	color: inherit;
}
#submit #btnModify:before{
	content: none;
}
#submit #btnModify:after{
	order: -1;
	justify-self: start;
	transform: scale(-1, 1);
}
#submit #btnModify:hover{
	opacity: 0.8;
}

.entry{
	display: grid;
	border: 1px solid var(--color-border);
	overflow: hidden;
}
@media (min-width: 576px) {
	.entry{
		grid-template-columns: auto 1fr;
	}
}
.entry dt{
	padding: 16px 24px;
	background: #d3e6e8;
	font-weight: 700;
}
.entry dt:nth-of-type(n+2){
	padding-top: 24px;
	border-top: 1px solid var(--color-border);
}
.entry dt:after{
}
.entry dt.acids{
	display: grid;
	column-gap: 8px;
	grid-template-columns: 1fr auto;
}
.entry dt.acids:after{
	content: "\5FC5\9808";
	align-self: start;
	display: grid;
	align-items: center;
	min-height: 16px;
	padding: 0 8px;
	background: var(--color-error);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.05em;
	line-height: 1;
	transform: translateY(0.4em);
}
@media (min-width: 576px) {
	.entry dt{
		min-width: min(20vw, 288px);
	}
}
.entry dd{
	padding: 16px 24px;
}
@media (min-width: 576px) {
	.entry dd:nth-of-type(n+2){
		border-top: 1px solid var(--color-border);
	}
}
.entry dd a:not(:hover){
	text-decoration: none;
}
.entry ul{
	display: flex;
	flex-wrap: wrap;
	grid-gap: 8px 24px;
	padding: 8px;
}
.entry li{
}
.entry li:has(input){
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 8px;
	}
.entry li input{
	transform: translateY(0.4em);
}
.entry p{
	margin: 8px;
}
.entry p.error{
	color: var(--color-error);
}
.entry .err{
	background-color: #ffffcc;
	border: 2px solid var(--color-error);
}