@charset "utf-8";

/*===============================================
●共通
===============================================*/

#contents header.title01 h2 {
	width:13em;
}
body.order #contents h3.title03 {
	color:#CC0A0A;
	font-weight:bold;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
}
body.order #contents h3.title03 span {
	font-size:1.25em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 700;
}
.table01 caption {
	font-size:1.13em;
	line-height:2em;
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 400;
}
.table01 th,
.table01 td {
	line-height:1.5em;
	padding:1em;
	border:#ccc 1px solid;
	vertical-align:middle;
}
.table01 th {
	width:8em;
	background-color:#d2ddc7;
}
.tdRight td {
	text-align:right;
}
#contactForm legend {
	font-size:1.5em;
	color:#fb7c37;
}
.table01 td input,
.table01 td select,
.table01 td textarea {
	padding:0.3em;
	line-height:1.7em;
}
#AInformation {
	padding-top:0.7em;
	display:none;
}

.btn01 {
	width:20em;
	/* margin:0 auto 1.5em; */
}

/* .btn01 {
	padding:0 1.5em;
} */
.btnBox td {
	width:50%;
	vertical-align:top;
}
.btnBox .btn01 {
	float:right;
}
#referBox,
#postframe {
	display: none;
}
#designBox img {
	max-width: 100%!important;
	height: auto!important;
}

.formEnd {
	margin-bottom: 1em;
}

.btn01 {
	display: block;
	font-size: 1.13em;
	line-height: 3em;
	text-align: center;
	text-decoration: none;
	color: #116532;
	border: #116532 1px solid;
	background-color: #fff;
	background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(18,18,18,0.1) 93%,rgba(0,0,0,0.15) 100%);
	background-position: 1% 50%;
	background-size: 200% auto;
	transition: background-position 0.4s cubic-bezier(0.94, 0, 0.19, 0.99);
}

@media (hover: hover) and (pointer: fine) {
	.btn01:hover {
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%,rgba(18,18,18,0.1) 7%,rgba(255,255,255,0) 100%);
		background-position: 99% 50%;
    }
}

.btn02 {
	display: inline-block;
	font-size: 1.13em;
	line-height: 3em;
	padding: 0 1em;
	cursor: pointer;
	color: #333;
	text-decoration: none;
	border: #aaa 1px solid;
	background-color: #fff;
	border-radius: 0;
	transition: color 0.3s, background-color 0.3s, border-color 0.3s;
}

@media (hover: hover) and (pointer: fine) {
	.btn02:hover {
		color: #fff;
		background-color: #ccc;
		border-color: #ccc;
	}
}

#contactAddress {
	margin: 1em 0 3em;
}

a.tel {
	font-size: 2em;
	font-weight: bold;
	text-align: right;
	line-height: 1.3em;
	font-family: 'Noto Sans', sans-serif;
	text-decoration: none;
	color: #333;
}
.contactBlock{
	display: flex;
	flex-direction: column;
	margin: 13px 0;
}

a.telNo::before {
	content: "";
	background-image: url("../../images/mainframe/tel.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 25px;
	height: 25px;
	display: inline-block;
	margin-right: 10px;
}

a.telNo {
	font-size: 24px;
	font-weight: 700;
	color: initial;
	line-height: 1;
	margin-right: 30px;
	text-decoration: none;
	pointer-events: none;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.formSection {
	margin: 50px 0;
}

.localText + .localText {
	margin-top: 1em;
}

/*===============================================
●画面の横幅が740px以下
===============================================*/
@media screen and (max-width: 739px){

	#contents {
		margin-bottom:1.5em;
	}

	/* designBox
	---------------------------------------- */
	#sc_horizontal #designBox div {
		max-width:406px;
		text-align:center;
		margin:0 auto 1em;
		border:#ccc 1px solid;
		box-sizing:border-box;
	}
	#sc_vertical #designBox div,
	#sc_cardl #designBox div {
		width:46.7%;
		max-width:196px;
		float:left;
		margin:0 1.7% 1em;
		border:#ccc 1px solid;
		box-sizing:border-box;
	}
	#sc_vertical #designBox div:nth-child(even),
	#sc_card #designBox div:nth-child(even) {
		margin-right:0;
	}

	/* tableBox
	---------------------------------------- */
	.tableBox {
		padding-bottom:1em;
	}
	.table01 {
		width:100%;
		margin-bottom:1em;
	}

	/* contactForm
	---------------------------------------- */
	#contactForm fieldset {
		margin-bottom:1.5em;
	}
	#contactForm legend {
		margin-bottom:0.5em;
	}
	#contactForm .table01 th,
	#contactForm .table01 td {
		display:block;
		width:100%;
		box-sizing:border-box;
	}
	#contactForm .table01 th {
		border-bottom:none;
	}
	#contactForm .table01 td {
		margin-bottom:0.7em;
	}
	.table01 td select {
		height:2.5em;
	}
	.table01 td input[type="text"],
	.table01 td select,
	.table01 td textarea {
		padding:0.4em;
		width:100%!important;
		box-sizing:border-box;
	}
	#contactForm .textsmall img {
		width:255px;
		height:auto;
	}
	.btnBox {
		width: 95%;
		display: flex;
		flex-direction: column-reverse;
		margin: 0 auto 3em;
	}
	.btnBox .btn01 {
		width: 100%;
		margin-bottom: 2em;
	}
	.btnBox .btn01,
	.btnBox .btn02 a {
		width:100%;
		text-align:center;
		box-sizing:border-box;
	}
}

/*===============================================
●画面の横幅が740px以上
===============================================*/
@media screen and (min-width: 740px){

	/* designBox
	---------------------------------------- */
	#designBox {
		margin-bottom:2em;
	}
	#sc_horizontal #designBox div {
		width:49.2%;
		max-width:580px;
		float:left;
		margin-bottom:1.6%;
		border:#ccc 1px solid;
		box-sizing:border-box;
	}
	#sc_horizontal #designBox div:nth-child(1) {
		margin-right:1.6%;
	}
	#sc_vertical #designBox div,
	#sc_card #designBox div {
		width:23.8%;
		max-width:280px;
		float:left;
		margin:0 1.6% 0 0;
		border:#ccc 1px solid;
		box-sizing:border-box;
	}
	.tableBox {
		margin-bottom:2.5em;
	}
	.tableBox table {
		width:49%;
		float:left;
	}
	.tableBox table:nth-child(1) {
		margin-right:2%;
	}

	/* contactForm
	---------------------------------------- */
	#contactForm fieldset {
		max-width:920px;
		margin-bottom:2em;
		margin-top: 20px;
		padding:10px;
		border:#ccc 1px solid;
	}
	#contactForm legend {
		padding:0 0.5em;
	}
	#contactForm .table01 {
		width:100%;
		max-width:960px;
	}
	#contactForm .table01 th {
		width:11em;
	}
	.btn01 {
		width:20em;
		margin:0 auto 3em;
	}

	.btnBox {
		/* width:460px; */
		width: 100%;
		max-width: 942px;
		display: flex;
		justify-content: center;
		margin-bottom: 3em;
		/* margin:0 auto; */
	}
	.btnBox .btn01 {
		margin: 0 0 0 1em;
		float: none;
	}
	.btnBox .btn02 {
		margin: 0 1em 0 0;
	}
	.btnBox .btn01,
	.btnBox .btn02 {
		/* width:180px; */
		width: 240px;
		text-align: center;
		/* margin: 0; */
		box-sizing:border-box;
	}

	.formEnd {
		max-width: 920px;
		padding: 10px;
	}

	.contactBlock{
		flex-direction: row;
		align-items: center;
	}

	a.tel {
		font-size: 2em;
		font-weight: bold;
		text-align: right;
		line-height: 1.3em;
		font-family: 'Noto Sans', sans-serif;
		text-decoration: none;
		color: #333;
		pointer-events: none;
	}

	a.telNo {
		margin-bottom: 0;
	}
}