@charset "utf-8";

main table {
	margin: 0 auto 40px;
	width: 80%;
	border: 1px solid #333;
	background: rgba(240,255,255,0.7);
}
main tr {
	display: flex;
	border-bottom: 1px dotted #333;
}
main tr:last-child {
	border-bottom: none;
}
main th, main td {
	padding: 6px;
	font-size: 1rem;
	line-height: 1.6;
}

main th {
	width: 22%;
	border-right:  1px dotted #333;
//	background: rgba(240,255,255,0.7);
}
main td {
	width: 78%;
//	background: rgba(238,238,238,0.8);
}
#photo__area {
	margin: 0 auto;
	width: 40%;
}
#photo__area figure {
	margin: 0 auto;
	width: 60%;
}
#photo__area figcaption {
	font-size: 1rem;
	line-height: 1.8;
	letter-spacing: 1px;
	text-align: right;
}

/*問い合わせページ=====================================*/
#formWrap {
	width: 80%;
	margin: 0 auto;
	color: #333;
	font-size: 0.95rem;
	line-height: 1.4;
	
}
table.formTable{
	width: 100%;
	margin: 0 auto 20px;
}
table.formTable td,table.formTable th{
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight: normal;
	background: #EEE;
	text-align: left;
}
table.formTable input,table.formTable select {
	padding: 4px;
	outline: 1px solid slateblue;
}
table.formTable textarea {
	padding: 4px;
	width: 98%;
	outline: 1px solid slateblue;
}
table.formTable #comment {
	vertical-align: top;
}
span.required {
	color: #F00;
}


@media screen and (max-width: 934px){
	main table {
		width: 90%;
	}
	table.formTable th{
		width:100%;
		text-indent: 6px;
	}
	table.formTable td,table.formTable th {
		padding: 10px 0;
	}
}

@media screen and (max-width: 822px){
	#photo__area {
		margin: 0 auto;
		width: 40%;
	}
	#photo__area figure {
		width: 82%;
	}
	#photo__area figcaption {
		line-height: 2;
	}
}
@media screen and (max-width: 770px){
	main table {
		width: 98%;
	}
	main tr {
		flex-direction: column;
	}
	main tr:last-child {
		border-bottom: none;
	}
	main th {
		width:100%;
		border-right: none;
		text-align: left;
	}
	main td {
		width: 96%;
		margin-left:2%;
	}	
	#photo__area {
		width: 50%;
	}
	#photo__area figure {
		width: 86%;
	}
	#photo__area figcaption {
		
	}
}


@media screen and (max-width:640px) {
	#formWrap {
		width:95%;
		margin:0 auto;
	}
	table.formTable th, table.formTable td {
		width:auto;
		display:block;
	}
	table.formTable th {
		margin-top:5px;
		border-bottom:0;
	}
	form input[type="text"], form textarea {
		width:80%;
		padding:5px;
		font-size:110%;
		display:block;
	}
	form input[type="submit"], form input[type="reset"], form input[type="button"] {
		display:block;
		width:100%;
		height:40px;
	}
}