@charset "sjis";

/*===============================================
 XForm設定 base_form.css
===============================================*/
/*=======================================================
 - 〜414.9px	：スマートフォン縦画面 (iPhone XS Max)
 - 415px 〜		：タブレット環境
 - 700px 〜		：切り替えが必要な場合
 - 970px 〜		：PC環境
 - 〜1399.9px	：iPad Pro 12.9横幅基準
 - 〜1579.9px	：横幅最大値

●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/



/*===============================================
 スタイル上書き
===============================================*/
.container {
	overflow-x: hidden;
	max-width: 100vw;
}

.pagetop:before {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/pagetop.png)!important;
}

a.external:after {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/external_black.png)!important;
}

a.external.white:after {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/external_white.png)!important;
}

a.external.hover:after {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/external_white.png)!important;
}

a.external.textlink.hover:after {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/external_black.png)!important;
}

.header_menu_link.external.hover:after {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/external_black.png)!important;
}

.list_ul {
	margin: 20px 0 0;
}

.list_ul li:before {
	background: #000;
}

.list_ul li a {
	border-bottom: 1px dotted;
	font-weight: bold;
}

.list_ul li a:hover {
	border-bottom: 1px solid;
	text-decoration: none!important;
}

.title_wrap {
	background-image: url(https://www.hondacars-iwatechuo.co.jp/form/recruit/images/back_pagetitle.jpg);
}

@media print, screen and (max-width: 969.9px) {
	.box_wrap.not(.header_inner) {
		width: 95%;
	}
}



/*===============================================
 フォーム部品
===============================================*/
/* 上部説明欄 */
.xf_block.xf_block0 {
	margin: 50px auto !important;
}

.xf_essential {
	color: #fff !important;
	display: inline-block;
	margin: 0 !important;
	width: 30px;
}

.xf_essential:before {
	border: solid 1px #fc9c15;
	color: #fc9c15;
	content: "\5FC5\9808";
	display: inline-block;
	font-size: 1.1rem;
	height: 18px;
	left: 0;
	line-height: 18px;
	position: absolute;
	text-align: center;
	text-indent: 0;
	top: 50%;
	transform: translate(0,-50%);
	width: 38px;
}

p .xf_essential {
	width: 3em;
}

p .xf_essential:before {
	position: static;
	transform: translate(0,0);
}



/*===============================================
 テーブル内部
===============================================*/
form {
	width: 100%;
}

/* table */
table {
	border: none !important;
	line-height: 2;
	table-layout: fixed;
	width: 100%;
}

@media print, screen and (max-width: 699.9px) {
	table,
	tbody,
	tr,
	th,
	td {
		display: block;
	}
}

@media print, screen and (min-width: 970px) {
	table {
		margin: 0 auto;
		width: 950px;
	}
}

/* th */
.xf_field,
.xf_input {
	background: #fff !important;
	border: 1px solid #d4d0c8;
	border-bottom: hidden;
	border-left: hidden;
	border-right: hidden;
	padding: 0;
	vertical-align: middle;
}

.xf_input,
tr:first-child .xf_field,
tr:first-child .xf_input {
	border-top: hidden;
}

/* th */
.xf_field {
	display: block;
	font-weight: bold;
	width: 100%;
}

.xf_field .xf_essential {
	margin: 0 0 0 10px !important;
	position: absolute;
}

/* td */
.xf_input {
	display: block;
	width: 100% !important;
}

/* テーブル内div設定 */
.xf_field > div,
.xf_input > div {
	position: relative;
	width: 100%;
}

.xf_field > div {
	padding: 10px 20px 0;
}

.xf_input > div {
	padding: 10px 20px 10px 40px;
}

.xf_input div {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.xf_input .clear {
	width: 100%;
}

.xf_input .clear:not(:first-child) {
	margin: 10px 0;
}

.xf_input .name {
	width: 100%;
}

@media print, screen and (min-width: 700px) {
	.xf_input .name {
		width: auto;
	}

	.xf_input .name:first-child {
		margin: 0 10px 0 0;
	}
}

.xf_input .birthday {}

.xf_input .age {
	margin: 0 0 0 30px;
}

@media print, screen and (max-width: 969.9px) {
	.xf_input .birthday,
	.xf_input .age,
	.xf_input .school:nth-of-type(2) {
		margin: 0;
		width: 100%;
	}
}

.input_wrap {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.input_wrap.check {

}

/* テーブル内span設定 */
td span {
	display: block;
	margin: 0 5px 0 0;
}

td .title {
	font-size: 1.5rem;
	margin: 0 10px 0 0;
}

@media print, screen and (max-width: 969.9px) {
	.xf_input .birthday span.title,
	.xf_input .age span.title {
		width: 3em;
	}

	.xf_input .school span.title {
		width: 7em;
	}
}

span.inline {
	margin: 0 10px;
}

span.inline.m {
	margin: 0 10px 0 30px;
}

.xf_input .name:last-child span.inline {
	margin: 0 10px 0 0;
}

span.small {
	color: #8c8c8c;
	font-size: 1.2rem;
	letter-spacing: .12em;
	line-height: 1.6;
	margin: 0 5px;
}

span.required {
	color: #8c8c8c;
	font-size: 1.2rem;
	letter-spacing: .12em;
	line-height: 1.6;
}

span.required.essential {
	color: #da6051;
	font-weight: bold;
}

/* 入力部 */
.xf_input input[type=text] {
	border: 1px solid #ccc;
	border-radius: 2px;
	padding: 3px 5px;
	width: auto;
	max-width: 95%;
}

.xf_input select {
	border: 1px solid #ccc;
	border-radius: 2px;
	width: auto;
}

.xf_input input[type=radio] {
	width: 20px;
}

.xf_input label {
	width: auto; /*空白3個分込*/
}

.xf_input input[type="checkbox"] + label {
	margin: 0 10px 0 0;
	width: auto;
}

.xf_input textarea {
	border: 1px solid #ccc;
	border-radius: 2px;
	font-family: "メイリオ",Meiryo,"ＭＳ Ｐゴシック",Osaka,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Arial,Verdana,sans-serif;
	height: 130px;
	padding: 5px;
	width: 95% !important;
}

/* 郵便番号ボタン */
.zipbtn {
	background: #808080;
	color: #fff;
	display: inline-block;
	font-size: 1.4rem;
	height: 25px;
	line-height: 24px;
	margin: 0px 0 0px 13px;
	padding: 0 8px 1px;
}

.zipbtn:hover {
	background: #999;
}



/*===============================================
 確認画面
===============================================*/
.sblock > div,
.sblock > ul,
.sblock > ul + div {
	width: 100%;
}

p.read {
	margin: 0 0 40px;
}

#click {
	margin: 20px 0 0;
}



/*===============================================
 完了画面
===============================================*/
#pagetitle {
	margin: 0 0 70px;
	width: 100%;
}

#pagetitle h2 {
	font-size: 2.2rem;
	font-weight: bold;
}

#end {
	line-height: 2;
	margin: 0 0 70px;
	text-align: center;
	width: 100%;
}



/*===============================================
 エラー画面
===============================================*/
span.xf_error {
	margin: 0 0 10px;
	display: block;
}

span.xf_field {
	border: none;
	font-weight: bold;
}



/*===============================================
 四角囲みリンク
===============================================*/
input[type=submit],
input[type=button] {
	background: #fc9c15;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 1.6rem;
	font-weight: bold;
	letter-spacing: .06em;
	margin: 0 auto;
	padding: 20px 65px;
	text-align: center;
}

input[type=submit]:hover,
input[type=button]:hover {
	background: #fcab38;
}