@charset "UTF-8";

/**
 * お問い合わせフォームのcss設定
 */

 /* よくあるご質問 注意事項など */
.contactNotesWrap {
	margin: 20px 10px 40px;
}
.contactTypeWrap {
	margin: 40px 10px 30px;
}
.contactNotesWrap h3,
.contactTypeWrap h3 {
	font-size: 184%;
	border-bottom: 1px #CCC solid;
}
.contactNotesWrap a {
	color: #e95a13;
}
.contactNotesInner {
	font-size: 117%;
	margin: 20px 0;
}

.contactFAQBox {}
.contactFAQdetails {
	border: 1px #e6521e solid;
}
.contactFAQdetails + .contactFAQdetails {
	margin-block: 20px;
}
.contactFAQtitle {
	display: grid;
	grid-template-columns: 1fr 30px;
	padding: 20px 15px 20px 20px;
	list-style: none;
	cursor: pointer;
}
.contactFAQtitle::-webkit-details-marker {
	display: none;
}
.contactFAQtitle::after {
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23e6521e"><path d="M440-280h80v-160h160v-80H520v-160h-80v160H280v80h160v160Zm40 200q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
	background-position: center;
	background-repeat: no-repeat;
	width: 30px;
	height: auto;
}
.is-opened .contactFAQtitle::after {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%23e6521e"><path d="M280-440h400v-80H280v80ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>');
}
.contactFAQcontent {
	overflow: hidden;
}
.contactFAQinner {
	padding: 0 20px 25px;
}
.contactFAQarticle {
	padding-block-start: 25px;
}
.contactFAQarticle:first-child {
	border-top: 1px #e6521e dotted;
}


/* 共通 */
a.externalLink {
	background-position: right center;
}
.listStyleDisc li {
	margin-block: .25em;
	margin-inline-start: 1.5em;
	list-style: disc;
}


/* トップ */
.contactNotes {
	margin: 20px 10px 60px;
	font-size: 117%;
}

.contactCategoryTitle {
	padding: 5px 20px;
	margin-block-start: 20px;
	font-size: 150%;
	background-color: #f1f1f1;
}

#contactMenuList {
	margin: 30px 0 60px;
}
#contactMenuList svg {
	width: 1.3334em;
	height: auto;
	vertical-align: top;
}
#contactMenuList dt {
	border-bottom: none;
}
#contactMenuList dd {
	margin: 10px 10px 25px 40px;
	font-size: 117%;
}
#contactMenuList dt a {
	color: #e95a13;
	text-decoration: underline;
	text-underline-offset: .25em;
}
#contactMenuList dt a:hover {
	text-decoration: none;
}

/* 各フォーム画面 */
.formRequired {
	font-size: 69%;
	vertical-align: middle;
}

.inputNotes {
	padding: 5px 0 0 5px;
	font-size: 92%;
	line-height: 1;
	color: #666;
}

#contactForm .formSection {
	font-weight: bold;
	margin-block: 16px;
}
#contactForm .formSection span {
	display: block;
	font-weight: normal;
	font-size: .75em;
}

#contactForm .formSeparator {
	margin: 20px 0 40px;
	border-bottom: 1px #CCC solid;
}


#contactForm dd {
	color: #666;
}

#contactForm.formConfirm dd {
	font-size: 117%;
}

#contactForm dd input::placeholder,
#contactForm dd textarea::placeholder {
	color: #999;
	font-size: 86%;
}
#contactForm dd select option:first-child {
	color: #999;
}


#contactForm dd label {
	padding: 2px;
	margin-right: 20px;
	font-size: 125%;
	color: #666;
}

#contactForm dd input.inputSizeMax {
	width: 600px;
	height: 1.5em;
}
#contactForm dd input.inputSizeL {
	width: 450px;
	height: 1.5em;
}
#contactForm dd input.inputSizeM {
	width: 300px;
	height: 1.5em;
}
#contactForm dd input.inputSizeS {
	width: 210px;
	height: 1.5em;
}
#contactForm dd input.inputSizeXS {
	width: 180px;
	height: 1.5em;
}
#contactForm dd textarea.textareaSizeMaxLL {
	width: 600px;
	height: 15em;
}
#contactForm dd textarea.textareaSizeMaxLS {
	width: 600px;
	height: 7.5em;
}

.contactFormButton {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 20px 0;
	text-align: center;
}

#contactCompleteMsg {
	margin: 20px;
	font-size: 133%;
}