@charset "utf-8";

/*********************************
 *
 * CONTRACT STYLES
 * (「お問い合わせ」ページのCSSファイル
 *
 *********************************/

@media screen and (min-width: 641px) {
	/*pc用スタイル記述Start*/
	div.contract div.main-title.no_featured_img {
		margin-top: 45px;
		margin-bottom: 0px;
	}

	table.tbl_contact {
		width: 100%;
		margin-top: 100px;
		margin-bottom: 50px;
	}
	table.tbl_contact th, table.tbl_contact td:last-of-type {
		border-bottom:2px solid #999;
		font-size: 18px;
	}
	table.tbl_contact th {
		text-align: left;
		width:300px;
		padding-top:40px;
		vertical-align:top;
	}
	table.tbl_contact td {
		padding:35px 0;
		vertical-align:top;
		width: calc(100% - 300px);
	}

	table.tbl_contact td:not(.name) {
		padding-left: 40px;
	}

	table.tbl_contact input[type='text'] {
		font-size: 18px;
		padding: 2px 5px;
		width: 350px;
		height: 35px;
		background-color: #ddd;
		border-radius: 4px;
		border: 1px solid #666;
	}

	table.tbl_contact span.name01,
	table.tbl_contact span.name02 {
		display: inline-block;
		padding-right: 1em;
	}

	table.tbl_contact span.name02 {
		padding-left: 1.5em;
	}

	table.tbl_contact input.name01,
	table.tbl_contact input.name02 {
		width: 175px;
	}

	table.tbl_contact textarea {
		font-size: 18px;
		padding: 2px 5px;
		width: 500px;
		height: 400px;
		background-color: #ddd;
		border-radius: 4px;
		border: 1px solid #666;
	}

	table.tbl_contact p.confirmation {
		padding-top: 10px;
		font-size: 15px;
		font-weight: bold;
	}

	input.contract_button {
		display : block;
		border-style : none;
		border-radius : 5%;
		font-size : 18pt;
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', serif, 'Noto Serif JP';
		font-weight: bold;
		cursor : pointer;
		padding : 12.5px 75px;
		background : #990000;
		color : #ffffff;
		line-height : 1em;
	  }

	div.contract_submit {
		margin-bottom: 70px;
		margin-left: calc((100% - 200px)/2);
	}
	
	div.contract div.section{
		margin-top: 50px;
	}

	div.contract span.error{
		font-size: 12px;
		color: red;
		margin-bottom: 5px;
		font-weight: bold;
	}
	/*pc用スタイル記述End*/
}

@media screen and (max-width: 640px) {
	/*sp用スタイル記述Start*/

	div.contract p.li {
		padding-left: 0.7em;
		text-indent: -1em;
	}

	table.tbl_contact {
		width: 100%;
	}

	table.tbl_contact th, table.tbl_contact td {
		width: 100%;
		display: block;
		font-size: 15px;
		font-weight: normal;
	}

	table.tbl_contact th {
		text-align: left;
		padding-top: 15px;
		padding-bottom: 3px;
	}
	table.tbl_contact td {
		border-bottom:1px solid #333;
		padding-bottom: 15px;
	}
	

	table.tbl_contact input[type='text'] {
		font-size: 15px;
		width: 100%;
		height: 35px;
		background-color: #ddd;
		border-radius: 4px;
		border: 1px solid #666;
	}

	table.tbl_contact span.name01,
	table.tbl_contact span.name02 {
		text-align: right;
		display: inline-block;
		width: 50px;
		padding-right: 0.5em;
	}

	table.tbl_contact input.name01[type='text'],
	table.tbl_contact input.name02[type='text'] {
		width: calc(100% - 65px);
	}
	table.tbl_contact input.name02[type='text'] {
		margin-top: 15px;
	}

	table.tbl_contact p.confirmation {
		padding-top: 10px;
		font-weight: bold;
	}

	table.tbl_contact textarea {
		font-size: 15px;
		/* padding: 2px 5px; */
		width: 100%;
		height: 400px;
		background-color: #ddd;
		border-radius: 4px;
		border: 1px solid #666;
	}

	input.contract_button {
		display : block;
		border-style : none;
		border-radius : 5%;
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', serif, 'Noto Serif JP';
		font-weight: bold;
		font-size : 18pt;
		cursor : pointer;		
		padding : 20px 75px;
		background : #990000;
		color : #ffffff;
		line-height : 1em;
	  }

	div.contract_submit {
		margin-top: 30px;
		margin-left: calc((100% - 200px)/2);
	}

	div.contract span.error{
		font-size: 12px;
		color: red;
		font-weight: bold;
	}

	/*sp用スタイル記述End*/
}