@charset "utf-8";


/* ------------------------------
 #renova_single
------------------------------ */

#renova_single header{
	margin: 0 auto;
	text-align: center;
	padding: 3em;
	background: var(--color-main-brite)
}

#renova_single header h1{
	color: var(--color-main);
	margin-bottom: 1em
}



/* ------------------------------
 #renova_
------------------------------ */

.renova_header{
	margin: 0 auto;
}


.renova_header img{
	width: 100%;
	height: 40vh;
	object-fit: cover;
}


.renova_header h1{
	background: var(--color-main);
	color: #fff;
	width:-moz-fit-content;
	width:fit-content;
	margin: -1em auto 0;
	position: relative;
	padding: .8em 2em;
	line-height: 1.2em;
	border: solid 1px #fff;
	z-index: 100;
	border-radius: 50px 0px 50px 0px;
	box-shadow: 5px 5px 0px #fff;
}


.renova_header p{
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	line-height: 1.8em;
	padding: 2em 1em;
}

@media screen and (max-width: 767px) {
	.renova_header p{
		text-align: left;
		font-size: 1.1em;
	}
	.renova_header p br{
		display: none
	}
}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {}	




.kodate-child_wrap{
	margin: 0 auto;
	padding: 3em 0;
	background: var(--color-main-brite);
}


ul.kodate-child{
	display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2em;
  margin: 2em auto 0;
  width: 90%;
  max-width: 1000px;
}



ul.kodate-child li h3{
	text-align: center;
	font-size: 1.2rem;
	margin-bottom: 1em;
	font-weight: bold;
	color: var(--color-main);
}


ul.kodate-child li figure{
	position: relative;
	width: 100%;
	margin-bottom: 1em;
	cursor: pointer;
  transition: all 0.2s ease;
  
  /* 浮かんでいる状態の影 */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  overflow: hidden;
}



ul.kodate-child li figure::after{
	font-family: icomoon;
	content: "\e977";
	position: absolute;
	right: .8em;
	bottom: .8em;
	font-size: 1.5em;
	color: #fff;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
}



ul.kodate-child li figure img{
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border-radius: 5px;
	position: relative;
	display: block;
}

/* ホバーした時の動き */
ul.kodate-child li figure:hover {
  transform: translateY(4px); /* 下に4px移動 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 影を小さくして接地感を出す */
}


ul.kodate-child li p{
	font-size: .9em;
	padding: 0 .3em
}



/* ------------------------------
 #prpoint
------------------------------ */

#prpoint{
	padding: 8% 0;
}

#prpoint > div{
	text-align: center
}

#prpoint .prpoint{
	margin: 0 0 2em;
	padding: 1em 2em 2em;
	border: solid 2px rgba(255, 129, 0, 0.5);
	border-radius: 1em;
	position: relative;
}

#prpoint .prpoint h2{
	text-align: center;
	color: #ff7f00;
	padding: 1em 0;
}

.prpoint_ww{
	text-align: left
}

.prpoint_ww ul{
	margin: 1em 0;
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {
	#prpoint > div{
		display: flex;
		justify-content:  space-between;
		flex-wrap:wrap;
	}
	
	#prpoint .prpoint{
		width: 48%
	}
}


/* ------------------------------
 #flow
------------------------------ */

#flow{
	width: 90%;
	margin: 0 auto 8%;
	max-width: 1000px;
}

#flow h2{
	text-align: center;
	margin: 0 auto
}

#flow h2 span{
	display: block;
	border-top: dotted 3px #ff7f00;
	border-bottom:dotted 3px #ff7f00;
	width:-moz-fit-content;
	width:fit-content;
	padding: .6em 1em;
	margin: 0 auto .6em;
}

#flow > p{}	


ul.flow_list{}

ul.flow_list li{
	padding: 2em;
	position: relative
}

ul.flow_list li.muryo::after{
	content: "ここまでは無料";
	display: block;
	position: relative;
	padding: 1em;
	margin: 1em auto 0;
	background: #ffe0c2;
	text-align: center;
	z-index: 200;
	border: solid 3px #fff;
	font-weight: bold;
	font-size: 1.2em
}



ul.flow_list li:nth-child(even){
	background: #f6f7f7
}

.num{
	display: block;
	background: #482f33;
	color: #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 100;
}

ul.flow_list li dl dt{
	font-weight: bold;
	font-size: 1.2em;
	margin:.3em 0 .5em 0
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {}	

@media print, screen and (min-width: 1024px) {
	ul.flow_list li{
		display: flex;
		flex-wrap:wrap;
	}
	
	ul.flow_list li dl{
		width: calc(100% - 55px);
		padding: 0 20px 0
	}
	
	ul.flow_list li::before{
	content: "";
	display: block;
	width: 1px;
	height: 100%;
	background: #482f33;
	position: absolute;
	left: 50px;
	z-index: 50
	}

}



/* ------------------------------
 #type
------------------------------ */

.sec_title{
	text-align: center;
	margin-bottom: 3em
}

.sec_title span{
	display: block;
	color: #EF8315;
	font-size: 1.4rem;
	letter-spacing: .1em
}




#type{
	background: #FDE7D0;
	padding:  8% 0 
}


.type_list{
	margin: 0 auto
}

.type_list > div{
	background: #fff;
	text-align: center;
	box-shadow: 1px 1px 6px #ccc;
	position: relative;
}

.type_list > div h3{
	padding: 1.5em
}

.type_list .more{
	margin: 0 auto 2em
}


@media screen and (max-width: 767px) {}	

@media print, screen and (min-width: 768px) {
	
	.type_list{
	display: flex;
	justify-content: space-between;
	flex-wrap:wrap;
	max-width: 1000px;
	}
	
	.type_list > div{width: 46%;}

}	

@media print, screen and (min-width: 1024px) {}	



/* ------------------------------
 #reform_list
------------------------------ */

#reformlist{
	padding: 5% 0
}

#reformlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

#reformlist > div{
	background: #fff;
	box-shadow: 1px 1px 10px #dddddd;
	position: relative;
	padding: 1.5em;
	border-radius: 1.5em;
}

#reformlist > div h2{
	margin: .3em 0 .8em;
	color: #ff7f00
}

#reformlist > div > div{
	margin: 1.2em 0 0;
	border-left: solid 1px #ff7f00;
	padding-left: 1.5em
}
#reformlist > div > figure{
	width: 100%;
	overflow: hidden;
}


#reformlist > div > figure img{
		width: 100%;
	  height: 100%;
	  object-fit: cover;
	  aspect-ratio: 4.5 / 3;
	  border-radius: 5px;
	  position: relative;
	  
}



dl.aim{
	display: flex;
	align-items: center
}

dl.aim dt{
	padding: 3px;
	background:#f1eee7;
	border-radius: 3px;
	position: relative;
	line-height: 1.2em;
	font-size: .9em;
	text-align: center
}

dl.aim dd{
	padding: 0 0 0 1em;
	font-weight: bold
}


@media screen and (max-width: 767px) {
	#reformlist > div > figure{
	}
	
	#reformlist > div > div{
		font-size: .9em
	}
}	

@media print, screen and (min-width: 768px) {
	#reformlist > div{
		display: flex;
		flex-wrap:wrap;
		max-width: 1000px;
		padding: 1.5em
	}
	#reformlist > div h2{
		font-size: 1.2em;
	}
}	

@media print, screen and (min-width: 1024px) {
}