@charset "utf-8";

/* FORM_INDEX
---------------------------------------- */
/* フォームのレイアウト */
.formItem {display: table; width: 100%;}
.formItemTitle {display: table-cell; position: relative; vertical-align: middle; width: 33%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #fff3c3;}
#form > .formItem:first-of-type {border-top: 1px solid #ccc;}
h3+.formItem {border-top: 1px solid #ccc;}
.formItem.special + .formItem {margin-top: 10px; border-top: 1px solid #ccc;}
.formItem.special .formItemTitle {background: #fa9539; color: #fff;}
.formItemContent {display: table-cell; padding: 30px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 84%;}
.formItem.special .formItemContent {font-size: 15px;}
.formItemContent .checkboxlist li {text-indent: -23px; padding-left: 23px; padding-bottom: 10px;}
.formItemContent .checkboxlistinline li {text-indent: -23px; padding-left: 23px; padding-bottom: 10px; display: inline-block; margin-right: 20px;}
.formItemContent input[type=checkbox] {vertical-align: middle; margin-right: 10px;}
.formItemContent label input[type=radio] {margin: 0 .5em 0 3em;}
.formItemContent label:first-child input[type=radio] {margin-left: 0;}
.innerLabel {display: block; margin: 1em 0 .5em;}
.formItemContent .innerLabel:first-child {margin-top: 0;}
	@media screen and (max-width: 768px) {
		.formItem {display: block; padding: 20px 0;}
		.formItemTitle {border: none; display: block; margin-bottom: .8em; width: 100%;}
		.formItemContent {border: none; display: block; padding: 0;}
	}
	@media screen and (max-width: 480px) {
		.formItemContent > label {display: block;}
		.formItemContent label input[type=radio] {margin-top: 1em; margin-left: 0;}
		input.w50p {width: 70%;}
	}

/* 必須or任意ラベル */
.must .formItemTitle:after {content:'（必須）'; color: #f00; font-size: 12px;}
.must .formItemTitle.inCaption:after {display: none;}
.must .formItemTitle.inCaption label::after {content:'（必須）'; color: #f00; font-size: 12px;}

/* 改行対応ラベル */
.formItemTitle {padding: 5px 30px;}
.formItemTitle:before {position: absolute; left: 30px; margin-top: .25em;}
	@media screen and (max-width: 768px) {
		.formItemTitle {padding-left: 10px; padding-right: 10px;}
		.formItemTitle:before {right: 0;}
	}

/* エラー */
label.error {color: #D61414; font-size: 13px; margin: .5em 0 1em; display: block;}
#invalidErrorMessage {border: 1px solid #D61414; color: #D61414; margin: 20px; padding: 10px; text-align: center;}

/* ボタン */
.formBtn {text-align: center; margin: 20px 20px 0;}
.formBtn span {display: block; font-size: 96%; margin-bottom: 10px;}
.rormBtn span input[type=checkbox] {vertical-align: middle; margin-right: 10px;}
.formBtn span a.bluelink {color: #2373d3; text-decoration: underline;}
.btn {border: #fac524 2px solid; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; display: block; font-size: 20px; font-weight: bold; margin: 0 auto; padding: .3em 0; text-align: center; text-decoration: none; transition: all .15s ease-in; width: 100%; max-width: 300px;}
a.btn {text-decoration: none;}
	/* 送信ボタン */
	.btn.submit {background: linear-gradient(#fde9ad, #fac629);}
	@media screen and (min-width: 768px) {
		.btn.submit:hover {opacity: .7; transition: all .15s ease-in;}
	}
	/* 戻るボタン（.btnとセットで使用） */
	.btn.back {border-color: #D8D8D8; background: linear-gradient(#fff, #c7c7c7); margin-top: 20px;}
	@media screen and (min-width: 768px) {
		.btn.back:hover {opacity: .7; transition: all .15s ease-in;}
	}


/* FORM_COMFIRM
---------------------------------------- */
.formConfirm .innerLabel {color: #aaa;}



/* FORM_COMPLETE
---------------------------------------- */
.thanksMessage {margin-top: 100px; margin-bottom: 100px; text-align: center;}