@charset "utf-8";
/* CSS Document */
.pc-only {
	display: none !important;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.4rem;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
	color: #000;
	line-height: 1.7;
	font-weight: 500;
}
p {
	line-height: 1.8;
}
a:hover {
	opacity: 0.8;
}
.inner {
	width: 100%;
	padding: 0 1rem;
}

img {
	max-width: 100%;
}

.mainvisual {
	margin: 4.5rem 0 0;
	position: relative;
}
.mainvisual .mv-cta-btn {
	position: absolute;
	bottom: 17%;
	left: 50%;
	transform: translate(-50%);
	width: 80%;
}
.selection {
	background: linear-gradient(#def2f1, #fff);
	padding: 2rem 0;
}
.quocard {
	padding: 3rem 0 5rem;
}
.mainvisual img {
	width: 100%;
}
.main2 img {
	width: 100%;
}
.showroom .area-title {
	width: 60%;
	display: block;
	margin: 0 auto;
	padding: 3rem 0 2rem;
}
.showroom ul li {
	padding: 0 0 2rem;
}

.merit {
	padding: 3rem 0;
}
/*----------------------------------------------------------------------------------------------------------------*/
.contact {
	background-color: #f1f1ef;
	padding: 3rem 0;
}
.contact h3 {
	text-align: center;
	font-size: 2.5rem;
	padding: 0 0 2rem;
}
.contact p.personal-info {
	font-size: 1.2rem;
	text-align: center;
	padding: 0 0 3rem;
}
.contact table {
	width: 100%;
}
.contact th {
	display: block;
	width: 100%;
	text-align: left;
	font-weight: 500;
	margin: 0 0 1rem;
	padding: 0 0 .5rem;
	border-bottom: .1rem solid #bcbcbc;
}
.contact td {
	display: block;
	width: 100%;
	padding: 0 0 3rem;
}
.contact input[type="text"], input[type="tel"] {
    width: 100%;
    height: 4rem;
    padding: 1rem;
    border: .1rem solid #cdcdcd;
	font-size: 1.4rem;
	background-color: #fff;
}
.contact select {
	width: 60%;
	height: 4rem;
	padding: 1rem;
	border-radius: .2rem;
	border: .1rem solid #cdcdcd;
	font-size: 1.4rem;
	background-color: #fff;
}
.contact textarea {
	width: 100%;
	padding: 1rem;
	border-radius: .2rem;
    border: .1rem solid #cdcdcd;
	background-color: #fff;
	height: 15rem;
	font-family : inherit;
	font-size: 100%;
}
.contact tr.form-room select {
	width: 100%;
}
.contact tr.birthday select {
	width: 20%;
}
.contact tr.birthday select.year {
	width: 30%;
}
.contact tr.people input[type="text"] {
	width: 25%;
}
.contact label {
	line-height: 2;
}
input[type="radio"], input[type="checkbox"] {
    margin: 0 .3rem 0 0;
}
.contact .required {
	position: relative;
}
.contact .required:after {
	position: absolute;
	content: '';
	background-image: url("../img/require-icon.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 3.5rem;
	height: 2rem;
	top: 30%;
	transform: translateY(-50%);
	right: auto;
	margin: 0 0 0 1rem;
}
.contact .a-first input[type="text"] {
	width: 60%;
}
.contact tr.address .add-area {
	padding: 0 0 2rem;
}
.contact tr.hope .area01 {
	padding: 0 0 2rem;
}
.contact tr.hope .area03 span {
	padding: 0 0 .5rem;
	display: block;
}
optgroup {
	opacity: 0.7;
}
.scheduled-date input[type="text"] {
	width: 50%;
}
/*-----
.scheduled-date .date-area input[type="text"] {
	margin: 0 0 0 5rem;
	width: 41.5%;
}
-----*/
.scheduled-date select {
	width: 20%;
}
.scheduled-date .date-area {
	padding: 0 0 2rem;
}
.hope th span {
	font-size: 1.2rem;
	margin: 0 0 0 1rem;
}
.form-btn {
	background-color: #2ca860;
	text-align: center;
	font-size: 2rem;
	color: #fff;
	padding: 2rem 2rem;
	width: 90%;
	display: block;
	margin: 0 auto;
	cursor: pointer;
	transition: .2s;
}
.contact .error {
	color: #BD7578;
	padding: 1rem 0 0;
}
.form-btn:hover {
	box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.3);
}
/*----------------------------------------------------------------------------------------------------------------*/
.note p {
	font-size: 1.2rem;
	padding: 0 0 2rem;
}
.note {
	padding: 3rem 0 0;
}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width:768px) {
	.sp-only {
		display: none !important;
	}
	.pc-only {
		display: block !important;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.mainvisual {
		margin: 6rem 0 0;
	}
	.mainvisual .mv-cta-btn {
		bottom: 1rem;
		left: auto;
		right: 4%;
		transform: translate(0%);
		width: 35%;
	}
	.selection {
		background-image: url("../img/selection-back.jpg");
		background-position: center;
		background-size: cover;
	}
	.selection .inner {
		max-width: 87rem;
		margin: 0 auto;
	}
	.showroom .showroom-title {
		width: 56rem;
		margin: 0 auto;
		display: block;
	}
	.showroom .area-title {
		width: 34rem;
	}
	.contact .inner {
		max-width: 85rem;
		margin: 0 auto;
	}
	.contact th {
		display: table-cell;
		width: 28%;
		padding: 0;
		border-bottom: none;
		line-height: 1.5;
	}
	.contact td {
		display: table-cell;
		width: 72%;
		padding: 2.5rem 0;;
	}
	.hope th span {
		margin: 0;
	}
	.contact .required:after {
		top: 50%;
	}
	.contact tr.interest .required:after {
		top: 57%;
	}
	.form-btn {
		width: 50rem;
		margin: 3rem auto 0;
	}
	.note p {
		font-size: 1.3rem;
		max-width: 83rem;
		margin: 0 auto;
	}
	
}
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------PC／ブレイクポイント-------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------*/
	@media screen and (min-width:1100px) {
		body {
			font-size: 1.6rem;
		}
		.inner {
			width: 110rem;
			margin: 0 auto;
			padding: 0;
		}
		p {
			font-size: 1.5rem;
		}
		.mainvisual {
			margin: 7.5rem 0 0;
		}
		.mainvisual .mv-cta-btn {
			bottom: 2rem;
		}
		.selection {
			padding: 4rem 0;
		}
		.quocard {
			padding: 5rem 0 10rem;
		}
		.showroom .area-title {
			padding: 7rem 0 6rem;
		}

		.showroom ul li:not(:last-child) {
			padding: 0 0 5rem;
		}
		.merit {
			padding: 3rem 0 5rem;
		}
		.contact {
			padding: 7rem 0;
		}
		.contact h3 {
			font-size: 4rem;
			padding: 0 0 4rem;
		}
		.contact p.personal-info {
			font-size: 1.5rem;
		}
		.contact label {
			line-height: 3;
		}

}