@charset "UTF-8";
/* CSS Document */
/* -------------------------------------
Browser：IE11 over
-------------------------------------
01:共通
02:テンプレート
03:ページ
-------------------------------------*/

/**-------------------------------------
>親：common/css/style.css
-------------------------------------**/

/**-------------------------------------
共通
-------------------------------------**/
body main{
	background: #fff;
}
a[href=""]{
	pointer-events: none;
}

/*入力タグ*/
.form input[type="text"],
.form textarea,
.form select {
	background: #fff;
}

/**================================================================================
HERO
================================================================================**/
.hero{
	background-image: url(../images/hero-bg.jpg);
}

/**================================================================================
02,11 見学会
================================================================================**/

.kengakukai ul.kengaku-list02{
	display: grid;

	grid-template-columns:490px 300px 1fr;
	grid-auto-rows: 167px;
}
.kengakukai ul.kengaku-list02 li{
}
.kengakukai ul.kengaku-list02 li:nth-child(1){
	background: #03B46D;

	grid-column:1 / 2;
	grid-row:1 / 4;
}.kengakukai ul.kengaku-list02 li:nth-child(2){
	padding:30px 20px;
	background: #ffd200;
	text-align: center;

	grid-column:2 / 4;
	grid-row:1 / 3;
}
.kengakukai ul.kengaku-list02 li:nth-child(3){
	padding:15px 10px;
	background: #ef5c2d;
	color: #fff;
	text-align: center;
	font-weight: bold;

	grid-column:2 / 3;
	grid-row:3 / 4;
}
.kengakukai ul.kengaku-list02 li:nth-child(4){
	background: no-repeat left top / cover;

	grid-column:3 / 4;
	grid-row:3 / 4;
}

.kengakukai ul.kengaku-list02 li.day{
    font-weight: bold;
    font-size: 36px;

	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}
.kengakukai ul.kengaku-list02 li.day small{
	display: block;
	font-size: 0.7em;
}

.kengakukai dl.place{
	margin:40px 5% 15px 13%;
	text-align: left;
}.kengakukai dl.place+.place{
	margin:15px 5% 40px 13%;
}
.kengakukai dl.place dt::after{
	display: none;
}
.kengakukai dl.place dt{
	display: inline-block;
	margin-right:15px;
	padding:5px 0;
	width: 8em;
	border-radius: 50px;
	background: #03b46d;
	color: #fff;
	text-align: center;
}
.kengakukai dl.place+.place dt{
	background: #ef5c2d;
}
.kengakukai dl.place a{
	display: inline-block;
	margin-left:15px;
	padding:3px 15px;
	border:1px solid #646464;
	border-radius: 5px;
	background: #646464;
	color: #fff;
	font-size: 0.8em;
}.kengakukai dl.place a:hover{
	background: #fff;
	color: #646464;
}

@media screen and (max-width: 768px){
	.kengakukai ul.kengaku-list02{
		display: flex;

		flex-wrap: wrap;
	}
	.kengakukai ul.kengaku-list02 li:nth-child(1),
	.kengakukai ul.kengaku-list02 li:nth-child(2){
		width: 100%;
	}
	.kengakukai ul.kengaku-list02 li:nth-child(2){
		padding: 15px;
	}
	.kengakukai ul.kengaku-list02 li:nth-child(3){
		padding:10px 0;
		width: 65%;
		color: #fff;
		text-align: center;
	}
	.kengakukai ul.kengaku-list02 li:nth-child(4){
		width: 35%;
		background: no-repeat left top / cover;
	}
	.richtext *[style*="font-size: 22px;"],
  .richtext *[style*="font-size: 24px;"]{
		font-size: 1.1rem!important;
  }
	
	.kengakukai dl.place{
		margin:20px 0 0;
		text-align: left;
	}.kengakukai dl.place+.place{
		margin:15px 0 20px;
	}
	.kengakukai dl.place dd{
		display: block;
		margin: 5px 0 0;
	}
	.kengakukai ul.kengaku-list02 li.day{
    font-size: 25px;
	}
	.kengakukai dl.place a{
		display: inline-block;
		margin:0;
	}
}


/**================================================================================
こんなお悩みはありませんか
================================================================================**/
#sec3 {
	overflow: hidden;
	padding:0;
	background: url(../images/nayami-bg.jpg) no-repeat center / cover;
	text-align: center;
}
#sec3 h2{
	padding:15px 5%;
}

@media screen and (max-width: 768px){
	#sec3 h2{
		padding:15px 8%;
		font-style: 20px;
	}
}

/**================================================================================
選ばれる理由
================================================================================**/
#sec4 dl{
	padding: 16px;
	border: 10px solid #ffd100;
	border-radius: 15px;
	background: #ffffff;
	text-align: center;
}
#sec4 dl dt{
	position: relative;
	display: inline-block;
	padding: 16px;
	border-bottom: 2px solid #000;
	color: #000;
	font-weight: bold;
}#sec4 dl dt:after{
	position: absolute;
	bottom: -0.9em;
	left: 50%;
	color: #000;
	content: "▼";
	font-size: 16px;
	line-height: 1.0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}
#sec4 dl dd{
	display: block;
	padding: 16px;
	background: none;
	color: #ef5c2d;
	font-weight: bold;
}
@media screen and (max-width: 768px){
	#sec4 dl{
		padding: 10px 10px;
		border:10px solid #ffd100;
		border-radius: 15px;
		background: #ffffff;
		text-align: center;
	}
	#sec4 dl dt,
	#sec4 dl dd{
		padding:10px;
	}
	
	body .fs26{
		font-size: 18px;
	}
	body .fs32{
		font-size: 22px;/*28*/
	}
}

/**-------------------------------------
リノベーションLPのみ
-------------------------------------**/

/**-------------------------------------
共通
-------------------------------------**/

/* -------------------------------------
af-arrow
-------------------------------------*/
.af-arrow2{
	position: relative;
	margin-bottom: 100px;
}
.af-arrow2::after{
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100px;
	background: url(../images/arrow02.svg) no-repeat center / auto 80px;
	content: "";
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

@media screen and (max-width: 768px){
	.af-arrow2::after {
			height: 60px;
			background-size: auto 50px;
	}
}

/**-------------------------------------
色
-------------------------------------**/
.blue{
	color: #002b9c;
}

/**-------------------------------------
見出し
-------------------------------------**/
.titC{
	padding:15px 5%;
	background: #03b46d;
	color: #fff;
	text-align: center;
}

.titD{
	padding:12px 5%;
	border-radius: 50px;
	background: #8e6134;
	color: #fff;
	text-align: center;
}

.titE{
	position: relative;
	padding:8px 5%;
	background: #ef5c2d;
	color: #fff;
	text-align: center;
}.titE:after{
	position: absolute;
	bottom: -0.8em;
	left: 50%;
	color: #ef5c2d;
	content: "▼";
	font-size: 16px;
	line-height: 1.0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.titF{
	position: relative;
	display: inline-block;
	padding: 16px;
	border-bottom: 2px solid #ef5c2d;
	color: #ef5c2d;
	font-weight: bold;
}.titF:after{
	position: absolute;
	bottom: -0.9em;
	left: 50%;
	color: #ef5c2d;
	content: "▼";
	font-size: 16px;
	line-height: 1.0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/**-------------------------------------
背景
-------------------------------------**/
.bg-ub{
	padding: 1px 0;
	background: #fff5cb;
}
.bg-uy{
	padding: 1px 0;
	background: #fffae5;
}


/**================================================================================
３つのコース
================================================================================**/
#reno1{
}

@media screen and (max-width: 768px){
	#reno1{
		padding:0;
	}
	#reno1 .titD{
		margin: 20px auto;
		width: 90%;
	}
	#reno1 .fs35{
		font-size: 20px;
	}
}

/**-------------------------------------
一覧
-------------------------------------**/
.course{
	margin: 30px auto;
	width: 980px;
}
.course a{
	position: relative;
	display: flex;
	overflow: hidden;
	margin: 0 auto 30px;
	border-radius: 10px;

	justify-content: space-between;
}
.course a p{
	margin: 15px 15px 10px;
}
.course a.pink{
	border: 2px solid #e36990;
	background: #ee8da3;
}
.course a.blue{
	border: 2px solid #5f77c6;
	background: #7280d2;
}
.course a.yellow{
	border: 2px solid #ff7a17;
	background: #ffc127;
}
.course a figure{
	width: 50%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.course a i{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-width: 768px){
	.course{
		margin: 15px auto;
		width: 90%;
	}
	.course a{
		margin: 0 auto 10px;
	}
	.course a p{
		margin: 10px 5px;
		width: 60%;
	}.course a p img{
		width: 100%;
	}
	.course a i{
		position: absolute;
		top: -10px;
		right:-5px;
		left: auto;
		width: 17vw;
		transform: none;
	}
}

/**-------------------------------------
詳細
-------------------------------------**/
.course-detail{
	margin: 30px auto 80px;
}
.course-detail .titF{
	display: block;
	margin: 15px auto;
	width: 899px;
	text-align: center;
}
/*slick setting*/
.course-detail .slider{
	margin: 30px auto 50px;
	width: 899px;
}
.course-detail .slider img{
	width: 90%;
	height: auto;
	margin: 0 auto;
}
.course-detail .slick-prev:before,
.course-detail .slick-next:before {
	border-radius: 50%;
	background: #ff9300;
	color: #fff;
	content: "\e314";
	font-size: 32px;
	font-family: 'Material Icons';
	opacity: 1.0;
}.course-detail .slick-next:before{
	content: "\e315"
}
.course-detail .slick-prev{
	left: -10px;
}
.course-detail .slick-next {
	right: 0px;
}

/**まねる**/
.course-detail .price{
	display: block;
	margin: 25px auto 40px;
	padding: 16px;
	border: 4px solid #ee8da3;
	border-radius: 15px;
}

@media screen and (max-width: 768px){
	.course-detail{
		margin: 20px auto 40px;
	}
	.course-detail .titF{
		margin: 5px auto;
		width: 95%;
	}
	/*slick setting*/
	.course-detail .slider{
		margin: 30px auto 10px;
		width: 85vw;
	}
	.course-detail .slider img{
		width: 85vw;
		height: auto;
	}
	.course-detail .slick-prev:before,
	.course-detail .slick-next:before {
		font-size: 22px;
	}
	.course-detail .slick-prev{
		left: -25px;
	}
	.course-detail .slick-next {
		right: -23px;
	}

	/**まねる**/
	.course-detail .price{
		display: block;
		margin: 25px auto 20px;
		padding: 8px;
		border: 4px solid #ee8da3;
		border-radius: 15px;
	}

}

/**================================================================================
選ばれる理由
================================================================================**/
#reno2{
}
.reason ol{
}
.reason .flameA{
}.reason .flameA::after {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-width: 0 0 70px 70px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    content: "";
}
.reason ol > li{
	margin: 30px auto 80px;
}
.reason ol h4{
	position: relative;
	padding:15px 5%;
	border-radius: 50px;
	background: #ffd100;
	color: #ef5c2d;
	text-align: center;
}.reason ol h4:after{
	position: absolute;
	bottom: -0.8em;
	left: 50%;
	color: #ffd100;
	content: "▼";
	font-size: 16px;
	line-height: 1.0;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}.reason ol h4 i{
	position: absolute;
	top: -12px;
	left: 35px;
}

.reason .why{
	position: relative;
	margin: 60px auto 10px;
	padding: 50px 40px 30px;
	border: 2px solid #b39b66;
}
.reason .why dt{
	position: absolute;
	top: -25px;
	left: 50%;
	padding: 15px;
	width: 90%;
	background: #3c170d;
	color: #ffd100;
	text-align: center;
	font-weight: bold;
	transform: translateX(-50%);
}

.reason .trouble{
	position: relative;
	margin: 140px auto 10px;
	padding: 60px 40px 30px;
	border: 2px solid #b39b66;
}
.reason .trouble dt{
	position: absolute;
	top: -25px;
	left: 50%;
	padding: 15px;
	width: 90%;
	background: #cbbb93;
	color: #3c170d;
	text-align: center;
	font-weight: bold;
	transform: translateX(-50%);
}
.reason .trouble dd{
	display: flex;

	justify-content: space-between;
	align-items: flex-end;
}
.reason .trouble dd picture{
	margin: 0 0 0 30px;
	width: 170px;

	flex: none;
}
.reason .moving{
	padding:25px 40px;
	background: #002b9c;
	background:
    linear-gradient(45deg,  transparent 0, #002b9c 0),
    linear-gradient(135deg, transparent 40px, #002b9c 40px),
    linear-gradient(225deg, transparent 0, #002b9c 0),
    linear-gradient(315deg, transparent 40px, #002b9c 40px);
  background-position: bottom left, top left, top right, bottom right;
  background-size: 55% 55%;
  background-repeat: no-repeat;
	color: #fff;
	text-align: center;
	font-weight: bold;
}

@media screen and (max-width: 768px){
	#reno2{
		padding: 0;
	}
	.reason ol{
		margin: 0 auto;
		width: 90%;
	}
	.reason ol > li{
		margin: 30px auto 50px;
	}
	.reason ol h4{
		padding: 8px 10px 8px 45px;
		text-align: left;
	}
	.reason ol h4 i{
		position: absolute;
		top: -5px;
		left: 10px;
		width: 28px;
	}
	.reason ol h4 i img{
		max-width: 100%;
	}

	.reason .why{
		position: relative;
		margin: 40px auto 10px;
		padding: 45px 15px 15px;
		border: 2px solid #b39b66;
	}
	.reason .why dt{
		top: -30px;
		padding: 10px;
	}

	.reason .trouble{
		position: relative;
		margin: 90px auto 10px;
		padding: 45px 15px 15px;
		border: 2px solid #b39b66;
	}
	.reason .trouble dt{
		top: -30px;
		padding: 10px;
	}
	.reason .trouble dd{
		flex-flow: column;
	}
	.reason .trouble dd picture{
		margin: 15px 0 0;
		width: 100%;
	}
	.reason .moving{
		padding:15px 20px;
			background:
    linear-gradient(45deg,  transparent 0, #002b9c 0),
    linear-gradient(135deg, transparent 20px, #002b9c 20px),
    linear-gradient(225deg, transparent 0, #002b9c 0),
    linear-gradient(315deg, transparent 20px, #002b9c 20px);
		background-position: bottom left, top left, top right, bottom right;
		background-size: 55% 55%;
		background-repeat: no-repeat;
		text-align: center;
		font-weight: bold;
	}
}


.form label{
	display: inline-block;
	padding:8px;
}