@charset "utf-8";
/*------------------------------------------------------------
	トープページ
------------------------------------------------------------*/
#main .comBox {
	margin: 0 auto;
	width: 1000px;
}

#main h3 {
	margin-bottom: 39px;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
}

#main h3 span {
	margin-bottom: 18px;
	padding: 7px 18px 6px;
	color: #FFF;
	font-size: 16px;
	letter-spacing: 0.5px;
	border-radius: 25px;
	display: inline-block;
	background-color: #940404; /* 元は#000 */
}

#main .mb0 {
	margin-bottom: 0 !important;
}

.sp {
	display: none;
}

@media all and (min-width: 0) and (max-width: 767px) {
	.pc {
		display: none;
	}
	
	.sp {
		display: inherit;
	}
	
	#main .comBox {
		width: auto;
	}
	
	#main h3 {
		margin-bottom: 21px;
		font-size: 16px;
	}
	
	#main h3 span {
		margin-bottom: 8px;
		padding: 2px 10px;
		font-size: 10px;
	}
}

#main .mainvisual {
	position: relative;
}

#main .mainvisual img {
	width: 100%;
	height: auto;
}

#main .mainvisual h2 {
	position: absolute;
    top: 50%;
    left: 50%;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 100%;
}

#main .mainvisual h2 span {
	display: inline-block;
	color: #940404;
    background-color: rgba(255,255,255,.8);
    padding: .2em .6em;
	margin-bottom: .5em;
}


@media all and (min-width: 0) and (max-width: 767px) {

	#main .mainvisual h2 {
		font-size: 1.2rem;
	}

}

/*------------------------------------------------------------
	troubleBox
------------------------------------------------------------*/
#main .troubleBox {
	margin: 0 50px 60px;
    padding: 42px 0 0px 0;
	position: relative;
	/*background-color: #f3da30;*/
}

#main .troubleBox .comBox {
	display: flex;
	justify-content: center;   /* 最初は space-between だった */
	flex-wrap: wrap;
}

#main #kengaku .troubleBox .comBox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}


#main .troubleBox .comBox ul {
	font-size: 1.2rem;
}

#main .troubleBox .comBox ul li {
	padding-left: 1.5em;
	background: url(../../image/check.png) no-repeat;
    margin-bottom: .8em;
	padding-bottom: .8em;
	border-bottom: 1px dashed #aaa;
    background-size: 24px;
}

#main .troubleBox .comBox img {
	width: 360px;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main .troubleBox {
		margin: 0 0 40px 0;
		padding: 22px 20px 27px;
	}
	
	#main .troubleBox .comBox ul {
		font-size: 1rem;
	}
	
	#main .troubleBox .comBox ul li {
		padding-left: 2em;
	}
	
	#main .troubleBox .comBox img {
		width: 100%;
	}
}


/* Youtube動画埋め込みレスポンシブ対応 */
.movie-wrap {
	position: relative;
	padding-bottom: 56.25%; /* アスペクト比 16:9の場合の縦幅 */
	height: 0;
	overflow: hidden;
}

.movie-wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}









/*------------------------------------------------------------
	conceptBox
------------------------------------------------------------*/
#main .conceptBox  {
	padding: 60px 0;
	background-color: #f0f0f0;
	margin-bottom: 60px;
}

#main .conceptBox h3 {
	margin-bottom: 40px;
}

#main .conceptBox .photoBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

#main .conceptBox .photoBox li {
	width: 48%;
	text-align: center;
	margin-bottom: 1.5em;
	font-size: 1rem;
}

#main .conceptBox .photoBox li img {
	width: 100%;
	display: block;
	margin-bottom: .5em;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main .conceptBox .comBox {
		padding-left: 20px;
		padding-right: 20px;
	}

	#main .conceptBox .photoBox li {
		width: 100%;
	}
}


/*------------------------------------------------------------
	featuresBox
------------------------------------------------------------*/
#main .featuresBox {
	margin-bottom: 60px;
}

#main .featuresBox h3 {
	margin-bottom: 40px;
}

#main .featuresBox .textBox {
	font-size: 1rem;
	background-color: #940404;
	/* padding: 1.5em; */
	color: #fff;
	margin-bottom: 20px;
}

#main .featuresBox .textBox img {
	max-height: 100px;
	vertical-align: middle;
	width: auto;
}

#main .featuresBox .textBox .title {
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: .5em;
}

#main .featuresBox .textBox .title span {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4em;
    letter-spacing: 4px;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main .featuresBox {
		margin-bottom: 	43px;	
	}

	#main .featuresBox .comBox {
		padding-left: 20px;
		padding-right: 20px;
	}

	#main .featuresBox .imgBox {
		margin-bottom: 55px;
	}
	
	#main .featuresBox .photoBox {
		width: 100%;
		float: none;
	}
	
	#main .featuresBox .photoBox img {
		width: 100%;
	}
	
}

/*------------------------------------------------------------
	eventBox
------------------------------------------------------------*/

#main .eventBox {
    padding: 60px 0;
    background-color: #f0f0f0;
    margin-bottom: 0px;
}

#main .eventBox table {
	width: 100%;
	box-sizing: border-box;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	font-size: 1rem;
	margin-bottom: 1.5em;
	border-spacing: 0;
}

#main .eventBox table th ,
#main .eventBox table td {
	padding: 1em;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

#main .eventBox table th {
	min-width: 130px;
}
/* ＰＣ版で表示した際に開催日時等の項目が一行に納まらない為追加 */

#main .eventBox table td {
	background-color: #fff;
}

#main .eventBox .more {
	margin-bottom: 2em;
	text-align: center;
}

#main .eventBox .more a {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
	padding: .5em 1em;
	color: #fff;
	font-size: 1rem;
    background-color: #940404;
}

@media all and (min-width: 0) and (max-width: 767px) {

	#main .eventBox table {
		margin: 0 20px;
		width: calc(100% - 40px);
	}

	#main .eventBox table th ,
	#main .eventBox table td {
		display: block;
		box-sizing: border-box;
		width: 100%;
		padding: .4em;
	}

}
/*------------------------------------------------------------
	reservationBox
------------------------------------------------------------*/
#main .reservationBox {
	margin-bottom: 0;
    padding: 60px 0;
    background-color: #940404;
}

#main .reservationBox .formBox {
	margin: 0 auto;
	padding: 91px 98px 68px 95px;
	width: 1116px;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
	background-color: #FFF;
}

#main .reservationBox .tel-box {
    background-color: #f7f5e7;
    padding: 2em;
    margin-top: 60px;
    text-align: center;
    font-size: 1rem;
}

#main .reservationBox .tel-box .number a {
	font-size: 2rem;
	color: #940404;
	font-weight: bold;
}

#main .reservationBox .title {
	margin-bottom: 37px;
	padding-bottom: 42px;
	border-bottom: 6px solid #000;
}

#main .reservationBox .title p {
	font-weight: bold;
	font-size: 16px;
	line-height: 1;
	float: left;
}

#main .reservationBox .title p span {
	margin-right: 11px;
	font-size: 50px;
	letter-spacing: 2.4px;
}

#main .reservationBox .title img {
	margin-top: 12px;
	float: right;
}

#main .reservationBox .formDl {
	margin-bottom: 38px;
}

#main .reservationBox dt {
	padding: 18px 0 16px;
	font-size: 18px;
	font-weight: bold;
	float: left;
}

#main .reservationBox dd {
	padding: 14px 0 16px 241px;
	border-bottom: 1px solid #aaa;
	border-top: 0;
}

#main .reservationBox dd:last-child {
	border-bottom: none;
}

#main .reservationBox .dd01 {
	padding-bottom: 21px;
}

#main .reservationBox .wid {
	width: 680px;
}

#main .reservationBox input,
#main .reservationBox textarea {
	padding: 0 5px;
	width: 311px;
	height: 38px;
	font-size: 13px;
	border: none;
	box-sizing: border-box;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	border-radius: 0; 
	background-color: #f7f5e7;
}

#main .reservationBox textarea {
	padding-top: 5px;
	height: 150px;
}

#main .reservationBox button {
	padding: 19px 0 19px;
	width: 100%;
	height: auto;
	color: #FFF;
	font-size: 20px;
	font-weight: bold;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	border-radius: 0;
	position: relative;
	background: #940404;
	font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border: 0;
	box-shadow: 0;
}

#main .reservationBox button:hover {
	opacity: 0.7;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main .reservationBox {
		margin-bottom: 32px;
		padding: 23px 20px 34px;
	}
	
	#main .reservationBox .formBox {
		padding: 26px 10px 32px;
		width: auto;
	}
	
	#main .reservationBox .title {
		margin-bottom: 19px;
		padding-bottom: 18px;
		border-bottom: 3px solid #000;
	}
	
	#main .reservationBox .title p {
		font-size: 10px;
	}
	
	#main .reservationBox .title p span {
		margin-bottom: 6px;
		font-size: 16px;
		letter-spacing: 2px;
		display: block;
	}
	
	#main .reservationBox .title img {
		margin-top: 4px;
		width: 51px;
	}
	
	#main .reservationBox .formDl {
    	margin-bottom: 19px;
	}
	
	#main .reservationBox dt {
		margin-bottom: 9px;
		padding: 0px 0 0px 4px;
		font-size: 14px;
		float: none;
	}
	
	#main .reservationBox dd {
		margin-bottom: 9px;
		padding: 0 0 10px 0;
	}
	
	#main .reservationBox dd:last-child {
		margin-bottom: 0;
	}
	
	#main .reservationBox input,
	#main .reservationBox textarea {
		height: 26px;
		width: 100%;
	}
	
	#main .reservationBox .wid {
		width: 100%;
	}
	
	#main .reservationBox .dd01 {
		padding-bottom: 11px;
	}
	
	#main .reservationBox button {
		padding: 10px 0 10px 0;
		font-size: 14px;
		background-size: 5px auto;
		background-position: 95% center;
	}
	
	#main .reservationBox button {
		opacity: 1;
	}
}

/*------------------------------------------------------------
	companyBox
------------------------------------------------------------*/
#companyBox {
	padding-top: 60px;
	background: url(../../image/company_bg.jpg) no-repeat center center;
	background-size: cover;
	background-attachment: fixed;
}

#companyBox .innerBox {
	margin: 0 auto;
	padding: 0;
	width: 900px;
	box-sizing: border-box;
}

#companyBox .innerBox h3 {
	margin-top: 20px;
	color: #FFF;
	font-size: 38px;
	float: left;
}

#companyBox .innerBox h3 span {
	margin-top: 15px;
}

#companyBox .innerBox dl {
	width: 440px;
	color: #FFF;
	font-size: 16px;
	float: right;
}

#companyBox .innerBox dt {
	font-weight: bold;
	float: left;
}

#companyBox .innerBox dd {
	margin-bottom: 16px;
	padding-left: 120px;
	letter-spacing: -1px;
}

#companyBox .innerBox dd:last-child {
	margin-bottom: 0;
}

#companyBox .mapBox {
	margin: 0 auto;
	padding: 0 20px;
	max-width: 1380px;
	height: 435px;
	box-sizing: border-box;
	position: relative;
	bottom: -44px;
}

#companyBox .mapBox iframe {
	width: 100%;
	height: 435px;
}

#companyBox dd a {
	color: #fff;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#companyBox {
		padding: 33px 20px 0;
	}
	
	#companyBox .innerBox {
		margin-bottom: 6px;
		padding: 0;
		width: auto;
	}
	
	#companyBox .innerBox h3 {
		margin: 0 0 26px 0;
		font-size: 19px;
		float: none;
	}
	
	#companyBox .innerBox h3 span {
		margin: 7px 0 0 0;
	}
	
	#companyBox .innerBox dl {
		width: auto;
		font-size: 12px;
		float: none;
	}
	
	#companyBox .innerBox dd {
		margin-bottom: 10px;
		padding-left: 84px;
		letter-spacing: 0;
	}
	
	#companyBox .mapBox {
		padding: 0;
		width: 100%;
		height: 150px;
		bottom: -20px;
	}
	
	#companyBox .mapBox iframe {
		height: 150px;
	}
}

.priceBox {
	padding-left: 76px;
	background-color: #F0F3F2;
	padding-top: 60px;
}

#main .priceBox h3 {
	margin-bottom: 28px;
	text-align: left;
}

.priceBox .text {
	width: 537px;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	position: relative;
	z-index: 1;
}

.priceBox p img {
	margin: 5px 9px 0 0;
}

.priceBox .whiteBox {
	margin: -114px 0 0 6px;
	padding: 104px 0 89px;
	background: #fff url(../../image/plan_bg.gif) no-repeat top center;
	background-size: 100% auto;
}

.priceBox .whiteBox .phoBox {
	margin: 0 229px 19px 0;
	text-align: center;
}

.priceBox .whiteBox .phoBox .img02 {
	margin: 124px 0 0 22px;
}

.priceBox .whiteBox .phoBox .img03 {
	position: absolute;
	left: 54%;
}

.priceBox .whiteBox .houseImg {
	margin: 0 119px 21px 0;
	text-align: center;
}

.priceBox .whiteBox .houseImg img {
	display: block;
	margin: 0 auto;
}

.priceBox .whiteBox p {
	margin-right: 125px;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
}

.standardBox {
	margin-bottom: 100px;
	padding: 90px 0 60px;
	background-color: #F0F3F2;
}

.standardBox h3 {
	margin-bottom: 69px;
	text-align: center;
}

#main .standardBox h3 span {
	margin-top: 3px;
	display: block;
	color: #000;
	font-weight: bold;
	letter-spacing: 4px;
	background-color: inherit;
}

.standardBox ul {
	margin-top: -59px;
	padding: 0 150px;
	width: 100%;
	box-sizing: border-box;
}

.standardBox ul li {
	margin: 59px 2.5% 0 0;
	float: left;
	width: 18%;
	font-size: 1.2em;
}

.standardBox ul li:nth-child(5n) {
	margin-right: 0;
}

.standardBox ul li .title {
	margin-bottom: 17px;
	font-size: 1em;
	text-align: center;
	line-height: 1;
}

.standardBox ul li .title span {
	margin-bottom: 7px;
	display: block;
	font-size: 1.3em;
	font-weight: bold;
}

.standardBox ul li .img {
	margin-bottom: 20px;
}

.standardBox ul li .img img {
	width: 100%;
}

.standardBox ul li p {
	text-align: center;
	font-size: .9em;
	line-height: 1.5;
}

@media all and (min-width: 0) and (max-width: 767px) {
	
	#main .planBox {
		color: #221e1f;
	}
	
	#main .planBox .mainVisual {
		padding-top: 15px;
		background-color: #F0F3F2;
	}
	
	#main .planBox .mainVisual img {
		width: 100%;
	}

	#main .planBox .priceBox {
		padding-top: 79px;
		padding-left: 0;
	}
	
	#main .planBox .priceBox h3 {
		margin: 0 auto 19px;
		width: 289px;
	}

	#main .planBox img {
		width: 100%;
		height: auto;
	}
	
	#main .planBox .priceBox .text {
		font-size: 11.7px;
		text-align: center;
		line-height: 1.8;
		width: 100%;
	}
	
	#main .planBox .priceBox .text img {
		margin: 6px 5px 0 0;
		width: 90px;
	}
	
	#main .planBox .priceBox .phoBox {
		margin-bottom: 64px;
		position: relative;
		width: 100%;
	}
	
	#main .planBox .priceBox .phoBox .img01 {
		margin: -77px 12px 0 30px;
		width: 166px;
	}
	
	#main .planBox .priceBox .phoBox .img02 {
		width: 119px;
		border-radius: 100px;
		position: absolute;
		top: 80px;
		right: 35px;
		z-index: 1;
		margin: 0;
	}
	
	#main .planBox .priceBox .whiteBox {
		margin: 21px 0 0 11.7px;
		padding: 78px 0 37px;
		background: #fff url(/sp/image/plan/top_bg.gif) no-repeat center top;
		background-size: 100% auto;
	}
	
	#main .planBox .whiteBox .houseImg {
		margin: 0 auto 15px;
		padding-right: 7px;
		width: 84.8%;
	}
	
	#main .planBox .whiteBox p {
		font-size: 11.7px;
		text-align: center;
		margin: 0;
	}
	
	#main .planBox .standardBox {
		margin-bottom: 35px;
		padding-bottom: 73px;
		background-color: #F0F3F2;
		padding-top: 40px;
	}
	
	#main .planBox .standardBox h3 {
		margin-bottom: 27px;
		text-align: center;
	}
	
	#main .planBox .standardBox h3 img {
		height: 33.4px;
		width: auto;
	}
	
	#main .planBox .standardBox h3 span {
		margin-top: 5px;
		display: block;
		font-size: 11.7px;
		letter-spacing: 2px;
	}
	
	#main .planBox .standardBox ul {
		margin: -29px 23.5px;
		padding: 0;
	    width: calc(100% - 47px);
	}
	
	#main .planBox .standardBox li {
		margin-top: 29px;
		width: 48.6%;
		float: left;
		margin-right: 1.4%;
	}
	
	#main .planBox .standardBox li:nth-child(5),
	#main .planBox .standardBox li:nth-child(6) {
		margin-top: 21px;
	}
	
	#main .planBox .standardBox li:nth-child(7),
	#main .planBox .standardBox li:nth-child(8) {
		margin-top: 22px;
	}
	
	#main .planBox .standardBox li:nth-child(2n) {
		float: right;
	}
	
	#main .planBox .standardBox li .title {
		margin-bottom: 12px;
		text-align: center;
		color: #5c625a;
		line-height: 1.2;
	}
	
	#main .planBox .standardBox li .title span {
		margin-bottom: 2px;
		display: block;
		color: #221e1f;
		font-size: 16.4px;
		font-weight: bold;
		letter-spacing: 1px;
	}
	
	#main .planBox .standardBox li img {
		margin-bottom: 8px;
	}
	
	#main .planBox .standardBox li p {
		text-align: center;
		font-size: 11.7px;
		line-height: 1.5;
	}
	
}