@charset "utf-8";
.inquiryArea {
	padding-top: calc(4.37em + 74px);
}
.inquiryTitle {
	font-size: 34px;
	margin-bottom: 0.6em;
}
.inquiryStep {
	margin-bottom: 5em;
	display: flex;
}
/*STEP LIST*/
.inquiryStepList {
	width: 336px;
	height: 44px;
	font-size: 16px;
	font-weight: bold;
	line-height: 2.5;
	padding-right: 1.75em;
	text-align: center;
	color: #7DCDF4;
	border-top: 2px solid #7DCDF4;
	border-bottom: 2px solid #7DCDF4;
	position: relative;
}
.inquiryStepList:first-child {
	width: 320px;
	border-left: 2px solid #7DCDF4;
}
.inquiryStepList::after {
	content: url(../img/inquiry_step_w.png);
	position: absolute;
	right: 0;
	top:-2px;
	height: 44px;
}
.inquiryStepList:last-child::after {
	background-color: #fff;
}
.inquiryStepList.stepOn {
	color: #fff;
	border-top: 2px solid #17A1E6;
	border-bottom: 2px solid #17A1E6;
	background-color: #17A1E6;
}
.inquiryStepList.stepOn:first-child {
	border-left: 2px solid #17A1E6;
}
.inquiryStepList.stepOn::after {
	content: url(../img/inquiry_step_bw.png);
	position: absolute;
	right: 0;
	top:-2px;
}
.inquiryStepList.stepOn::before {
	content: url(../img/inquiry_step_wb.png);
	position: absolute;
	left: -17px;
	top:-2px;
}
.inquiryStepList.stepOn::before {
	content: url(../img/inquiry_step_wb.png);
	position: absolute;
	left: -17px;
	top:-2px;
}
.inquiryStepList:last-child.stepOn::after {
	content: url(../img/inquiry_step_b.png);
}
.inquiryStepList:first-child.stepOn::before {
	content:none;
}

/*Form*/
.inquiryForm {
	width: 632px;
	margin: 0 auto;
}
.inquiryFormLead {
	margin-bottom:52px;
	line-height: 1.5;
	font-weight: bold;
}
.inquiryFormPartsBox {
	padding: 21px 0;
}
.inquiryFormPartsBox:last-child {
	padding-bottom: 0;
}
.inquiryFormExample {
	color: #666;
	line-height: 1.5;
}
.inquiryFormTextAreaCount {
	font-weight: bold;
}
.PartsBoxTitleRequired,
.PartsBoxTitleNormal {
	font-size: 16px;
	line-height: 1.5;
	font-weight: bold;
	padding-bottom:7px;
	position: relative;
}
.PartsBoxTitleRequired:before,
.PartsBoxTitleNormal:before {
	font-size: 12px;
	color: #fff;
	text-align: center;
	padding: 1px 5px 3px;
	border-radius: 5px;
	margin-right: 0.64em;
}
.PartsBoxTitleRequired:before {
	content:"必須";
	background-color: #FF5555;
}
.PartsBoxTitleNormal:before {
	content:"任意";
	background-color: #AAAAAA;
}
.inquiryFormPartsInner {
	display: flex;
	flex-wrap: wrap;
}
.inquiryFormPartsInner .inquiryFormPartsOut:first-child {
	margin-right: 9px;
}
.inquiryFormAddName {
	width: 140px;
	text-align: left;
	vertical-align: top;
	padding-top: 30px;
}
.inquiryFormAddDetails {
	padding: 10px 0;
}
.inquiryFormMemberName,
.inquiryFormMemberName {
	font-weight: normal;
	padding: 10px;
}
.inquiryFormPartsInnerLine:first-child {
	margin-bottom: 10px;
}
/*個人情報*/
.personalInformationArea {
	background-color: #F5F5F5;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.7;
	padding: 25px 30px 28px;
}
.personalInformationTitle {
	font-size: 16px;
	font-weight: bold;
}
.personalInformationText {
	padding: 1em 0;
}
.personalInformationRtext {
	padding-right: 2em;
	text-align: right;
}
/*公文式教室に関するお問い合わせ*/
.inquiryInformationArea {
	line-height: 1.7;
}
/*エラー画面*/
.inquiryFormPartsError.none {
	display: none;
}
.inquiryFormPartsError {
	width: 100%;
	margin-top: 16px;
	padding: 17px 17px 17px 30px;
	background-color: #FFEAEA;
	border:1px solid #FF5555;
	border-radius:10px;
	position: relative;
	line-height: 1.5;
}
.inquiryFormPartsError::after {
	font-size: 0;
	content: url(../img/inquiry_error_arr.png);
	display: block;
	width: 15px;
	height:11px;
	position: absolute;
	top: -11px;
	left:153px;
}
.inquiryFormPartsError::before {
	content: "！";
	display: block;
	font-size: 24px;
	font-weight: 800;
	color:#FF5555;
	position: absolute;
	top: 50%;
	left:6px;
	transform: translateY(-50%);
	-webkit- transform: translateY(-50%);
}
.inquiryFormPartsInner.errorIcon {
	position: relative;
}
.inquiryFormPartsInner.errorIcon::after {
	content:"";
	width: 1.1em;
	height:1.1em;
	display: inline-block;
	vertical-align: middle;
	background-image: url(../img/icon_error.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 1em;
	right: -2.5em;
}
.inquiryFormTel .inquiryFormPartsInner.errorIcon::after {
	left: calc(311px + 1.1em);
}
.inquiryFormAdd .errorIcon,
.inquiryFormMember .errorIcon {
	position: relative;
}
.inquiryFormAdd .errorIcon::after,
.inquiryFormMember .errorIcon::after {
	content:"";
	width: 1.1em;
	height:1.1em;
	display: inline-block;
	vertical-align: middle;
	background-image: url(../img/icon_error.svg);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	top: 1.5em;
	right: -2.5em;
}

/*確認画面*/
.confirmationForm {
	background-color: #f5f5f5;
	padding: 44px 40px;
	font-size: 16px;
}
.confirmationFormTable {
	width: 100%;
}
.confirmationFormTable th,
.confirmationFormTable td {
	padding: 1.2em;
	line-height: 1.68;
}
.confirmationFormTable th {
	width: 248px;
	text-align:left;
}
.confirmationFormFoot {
	text-align: center;
	padding: 80px 0;
	font-size: 16px;
}
.confirmationFormFootText {
	margin-bottom: 45px;
}
/*完了画面*/
.formCompAreaTitle {
	color:#17A1E6;
	font-size: 24px;
	line-height: 1.3;
}
.formCompAreaText {
	font-size: 16px;
	line-height: 1.7;
	margin-top: 37px;
}

/*PARTS RADIO CHECK*/
.inquiryFormChexk,
.inquiryFormRadio {
	display: none;
}
.inquiryFormCheckLabel,
.inquiryFormRadioLabel {
	width: 311px;
	height: 50px;
	line-height: 3.1em;
	border-radius:10px;
	border:1px solid #DCDCDC;
	padding-left: 3.5em;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
}
.inquiryFormCheckLabel:nth-of-type(even),
.inquiryFormRadioLabel:nth-of-type(even) {
	margin-left: 10px;
}
.inquiryFormRadioLabel::before {
	content:" ";
	width: 25px;
	height: 25px;
	display: block;
	border-radius: 50%;
	border:1px solid #DCDCDC;
	position: absolute;
	top: 12px;
	left:15px;
}
.inquiryFormCheckLabel::before {
	content:" ";
	width: 25px;
	height: 25px;
	display: block;
	border-radius: 2px;
	border:1px solid #DCDCDC;
	position: absolute;
	top: 12px;
	left:15px;
}

.inquiryFormChexk:checked + .inquiryFormCheckLabel,
.inquiryFormRadio:checked + .inquiryFormRadioLabel {
	border:none;
	background-color: #17A1E6;
	color:#fff;
}
.inquiryFormChexk:checked + .inquiryFormCheckLabel::before {
	border:none;
}
.inquiryFormRadio:checked + .inquiryFormRadioLabel::before {
	border:1px solid #7DCDF4;
	background-color: #7DCDF4;
}
.inquiryFormRadio:checked + .inquiryFormRadioLabel::after {
	content: " ";
	width: 9px;
	height: 9px;
	display: block;
	border-radius: 50%;
	background-color: #FFF;
	position: absolute;
	top: 21px;
	left:24px;
}
.inquiryFormChexk:checked + .inquiryFormCheckLabel::after {
	content: " ";
	width: 10px;
	height: 16px;
	display: block;
	border-bottom: 4px solid #fff;
	border-right: 4px solid #fff;
	position: absolute;
	top: 12px;
	left:22px;
	transform:rotate(45deg);
}
/*PARTS TEXT*/
.inquiryFormTextMini ,
.inquiryFormTextSs ,
.inquiryFormTextS ,
.inquiryFormTextM ,
.inquiryFormTextL ,
.inquiryFormTextFull ,
.inquiryFormTextArea {
	background-color: #F5F5F5;
	border-radius:10px;
	border: 1px solid #DCDCDC;
	height: 50px;
	margin-bottom: 5px;
	padding: 0.8em;
	font-size: 16px;
}
.inquiryFormTextMini:disabled {
	background-color: #DCDCDC;
	border: 1px solid #DCDCDC;
	/*color:#000;*/
}
.inquiryFormTextMini {
	width: 242px;
	margin-right: 10px;
	margin-top: 5px;
}
.inquiryFormTextSs { width: 253px; }
.inquiryFormTextS {width: 277px; }
.inquiryFormTextM { width: 311px; }
.inquiryFormTextL { width: 492px; }
.inquiryFormTextFull { width: 632px; }
.inquiryFormTextArea {
	width: 632px;
	height: 160px;
	margin-bottom: 0;
}
.inquiryFormTextArea {
	margin-bottom: 5px;
}
/*PARTS SELECT*/
.inquiryFormSelectBoxPrefectures,
.inquiryFormSelectBoxArea,
.inquiryFormSelectBoxDay {
	position: relative;
	float: left;
}
.inquiryFormSelectBoxPrefectures,
.inquiryFormSelectBoxArea {
	margin-right: 10px;
	width: 242px;
}
.inquiryFormSelectBoxDay,
.inquiryFormSelectBoxDay .inquiryFormSelect {
	width: 380px;
}
.inquiryFormSelect::-ms-expand {
display: none;
}
.inquiryFormSelectBoxPrefectures::after,
.inquiryFormSelectBoxArea::after,
.inquiryFormSelectBoxDay::after {
	content: '▼';
	font-size:16px;
	color: #1E1E1E;
	right: 11px;
	top: 20px;
	padding: 0 0 2px;
	position: absolute;
	pointer-events: none;
}
.inquiryFormSelect {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 50px;
	float: right;
	margin: 5px 0px;
	padding: 0px 24px;
	font-size: 16px;
	line-height: 1.75;
	color: #1E1E1E;
	background-color: #ffffff;
	background-image: none;
	border: 1px solid #DCDCDC;
	-ms-word-break: normal;
	word-break: normal;
	border-radius:10px;
}
.inquiryFormSelectBoxPrefectures .inquiryFormSelect,
.inquiryFormSelectBoxArea .inquiryFormSelect {
	width: 242px;
}
.inquiryFormSelectCb {
	clear: both;
}
/*PARTS ADD BUTTON*/
.inquiryFormAddDetailsButton {
	/*text-align: right;*/
	display: flex;
	vertical-align: middle;
}
.inquiryFormAddInner {
	margin-right: 15px;
}
.inquiryFormButtonAdd {
	width: 200px;
	height: 40px;
	border-radius: 5px;
	background-color: #666666;
	color:#fff;
	border: none;
	font-size: 16px;
	margin-top: 0.25em;
}
.inquiryFormButtonAdd:hover {
	opacity: 0.7;
	cursor: pointer;
}
/*PARTS SEND BUTTON*/
.formButtonConf ,
.formButtonBack ,
.formButtonSend {
	width: 250px;
	height: 54px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	border-radius:27px;
	border: 0;
	padding: 0;
	position: relative;
	margin: 0 12px;
	cursor: pointer;
}
.formButtonConf:hover ,
.formButtonBack:hover ,
.formButtonSend:hover {
	opacity: 0.7;
}
.formButtonConf,
.formButtonSend {
	background-color: #FAAF18;
}
.formButtonBack {
	background-color: #C8C8C8 ;
}
.formButtonConf::after,
.formButtonSend::after {
	content: url(../../common/img/icon_arrow_w.svg);
	position: absolute;
	top: 50%;
	right: 16px;
	margin-top: -9px;
}
.formButtonBack::after {
	content: url(../../common/img/icon_arrow_w.svg);
	position: absolute;
	top: 50%;
	left: 16px;
	margin-top: -9px;
	transform: rotateY(180deg);
}
.none{
    display: none;
}
/*---------------------------------------------------------------------------------------------------------------------*/
/*sp*/
/*---------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 959px) {
	.inquiryArea {
		padding-top: calc(9.6% + 64px);
	}
	.inquiryTitle {
		font-size: 26px;
		line-height: 1.7;
		margin-bottom: 9.6%;
	}
	.inquiryStep {
		margin-bottom: 10%;
		width: 100%;
	}
	.inquiryStepList {
		width: 33.3333%;
		font-size: 15px;
	}
	.inquiryStepList:first-child {
		width: 33.3333%;
	}
/*入力画面*/
	.inquiryForm {
		width: 100%;
		font-size: 15px;
	}
	.inquiryFormPartsBox {
		width: 82%;
		margin: 0 auto;
	}
	.inquiryFormPartsInner {
		display: block;
		width: 100%;
	}
	.inquiryFormPartsInner .inquiryFormPartsOut:first-child {
		margin-right: 0;
	}
	.inquiryFormAdd,
	.inquiryFormAddName,
	.inquiryFormAddDetails,
	.inquiryFormMember {
		display: block;
		width: 100%;
	}
	.inquiryFormAdd tr {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}
	.inquiryFormAddName {
		padding: 1em 0 0.3em;
	}
	.inquiryFormAddDetails {
		padding: 0.3em 0;
	}
	.inquiryFormAddDetailsButton {
		display: block;
		width: 68%;
	}
	.inquiryFormAddInner {
		margin-right: 0;
		display: block;
		width: 100%;
	}
	.inquiryFormMember {
		margin-bottom:-1.3em;
	}
	.inquiryFormMember tr {
		display: flex;
		flex-wrap: wrap;
	}
	.inquiryFormMemberName {
		width: 20%;
		vertical-align: middle;
		padding: 1em 0 0 0;
	}
	.inquiryFormMemberDetails .inquiryFormTextSs {
		width: 80%;
	}
/*エラー画面*/
	.inquiryFormPartsError {
		width: 100%;
		margin-top: 16px;
		padding: 0.6em 0.6em 0.6em 1.8em;
		line-height: 1.5;
		font-size: 15px;
	}
	.inquiryFormPartsError::after {
		left:calc(50% - 7px);
	}
	.inquiryFormPartsError::before {
		content: "！";
		display: inline;
		left:0.1em;
	}
	.inquiryFormTel .inquiryFormPartsInner.errorIcon::after,
	.inquiryFormPartsInner.errorIcon::after {
		top: 1em;
		right: -2em;
		left: auto;
	}
	.inquiryFormAdd .errorIcon::after {
		top: 3.5em;
		right: -2em;
	}
	.inquiryFormMember .errorIcon::after {
		top: 1em;
		right: -2em;
	}
/*確認画面*/
	.confirmationForm {
		font-size: 15px;
		padding: 1em 1.4em;
	}
	.confirmationFormTable {
		font-size: 15px;
	}
	.confirmationFormTable th,
	.confirmationFormTable td {
		display: block;
		width: 100%;
	}
	.confirmationFormTable th {
		padding: 0.2em 0;
	}
	.confirmationFormTable td {
		padding: 0.2em 0 1.4em;
	}
	.confirmationFormFoot {
		text-align: left;
		font-size: 15px;
		padding: 11% 0;
		line-height: 1.6;
	}
	.confirmationFormFootText {
		margin-bottom: 11%;
	}
/*完了画面*/
	.formCompAreaTitle {
		font-size: 18px;
		line-height: 1.8;
	}
	.formCompAreaText {
		font-size:15px;
		line-height: 1.6;
		margin-top: 1em;
	}
/*個人情報*/
	.personalInformationArea {
		padding:1em 1.6em;
	}
	.personalInformationTitle {
		font-size: 15px;
		line-height: 1.6;
	}
	.personalInformationText {
		line-height: 1.7;
	}
	.personalInformationRtext {
		padding-right: 0;
	}

/*PARTS TEXT*/
	.inquiryFormTextMini ,
	.inquiryFormTextSs ,
	.inquiryFormTextS ,
	.inquiryFormTextM ,
	.inquiryFormTextL ,
	.inquiryFormTextFull {
		width:100%;
		height:3.3em;
		line-height: 3.3;
	}
	.inquiryFormTextMini {
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 10px;
}
	.inquiryFormTextArea {
		width:100%;
		height:6em;
		line-height:1.3;
	}
	.inquiryFormAddDetails .inquiryFormTextS {
		width: 100%;
	}
/*PARTS RADIO CHECK*/
	.inquiryFormCheckLabel,
	.inquiryFormRadioLabel {
		width: 100%;
		display: block;
	}
	.inquiryFormCheckLabel:nth-of-type(even),
	.inquiryFormRadioLabel:nth-of-type(even) {
		margin-left: 0;
	}
/*PARTS SELECT*/
	.inquiryFormSelectBoxPrefectures,
	.inquiryFormSelectBoxArea,
	.inquiryFormSelectBoxDay,
	.inquiryFormSelectBoxPrefectures .inquiryFormSelect,
	.inquiryFormSelectBoxArea .inquiryFormSelect,
	.inquiryFormSelectBoxDay .inquiryFormSelect {
		width: 100%;
		margin-right: 0;
	}
	.inquiryFormSelectBoxPrefectures .inquiryFormSelect,
	.inquiryFormSelectBoxDay .inquiryFormSelect {
		margin: 0;
	}
	.inquiryFormSelectBoxArea .inquiryFormSelect {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

	.inquiryFormSelectBoxPrefectures::after,
	.inquiryFormSelectBoxArea::after,
	.inquiryFormSelectBoxDay::after {
		top: 1em;
	}
/*PARTS BUTTON*/
	.inquiryFormButtonAdd {
		width: 100%;
	}
	.confirmationFormButton {
		width: 100%;
		margin: -0.75em 0;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.formButtonConf,
	.formButtonBack,
	.formButtonSend {
		display: block;
		margin: 0.75em auto;
		width: 65%;
	}
}