@charset "utf-8";

/* お持ちのホームページのリニューアルをご検討の方へ */
.intro_li li{text-align: center;}
.intro_li span{
	background: #0497AF;
	border: 1px solid #1A1A1A;
	padding: .4em .6em;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	line-height: 2.7;
}

/* 集客できるホームページを作成する5つのポイント */
#point{position: relative;}
#point::before{
	content: "";
	max-width: 609px;
	width: 30%;
	aspect-ratio: 1/0.903;
	position: absolute;
	background: url("../images/renewal/point_bg.webp") center / contain no-repeat;
	left: 0;
	top: 500px;
}
.point_wrap > div{width: 30%;}
.point_wrap .title h2{line-height: 1.5;}
.point_wrap > ul{width: 65%;}
.point_wrap li{
	padding: 60px 40px 45px;
	position: relative;
}
.point_wrap li .num{
	left: 35px;
	top: 0;
}
.point_wrap li h3{
	padding-left: 120px;
	margin-bottom: 40px;
}
.point_wrap li h3 span{
	font-weight: bold;
	font-size: 22px;
}
.point_wrap li h3 span span{color: #0497AF;}
.point_wrap li > div > p{
	font-size: 18px;
	line-height: 2;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* お持ちのホームページのリニューアルをご検討の方へ */
	.intro_li span{font-size: 16px;}
	
	/* 集客できるホームページを作成する5つのポイント */
	#point::before{top: 350px;}
	.point_wrap li{padding: 40px 25px 25px;}
	.point_wrap li .num{left: 25px;}
	.point_wrap li h3{
		padding-left: 90px;
		margin-bottom: 30px;
	}
	.point_wrap li h3 span{font-size: 18px;}
	.point_wrap li > div > p{font-size: 14px;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){

	/* 集客できるホームページを作成する5つのポイント */
	#point::before{
		transform: scale(-1,1);
		left: auto;
		right: 0;
		top: 70px;
		width: 45%;
	}
	.point_wrap > *{width: 100%!important;}
	.point_wrap > div{
		margin-bottom: 40px;
		padding-right: 50%;
	}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* inner_title */
	.inner_r > div span{font-size: 64px!important;}
	
	/* お持ちのホームページのリニューアルをご検討の方へ */
	.intro_li li{text-align: left;}
	
	/* 集客できるホームページを作成する5つのポイント */
	#point::before{
		top: 20px;
		max-width: 250px;
		width: 52%;
		z-index: -1;
	}
	.point_wrap > div{padding: 0;}
	.point_wrap li{padding: 25px 20px;}
	.point_wrap li h3{
		padding: 0;
		margin-bottom: 20px;
	}
	.point_wrap li h3 span{line-height: 2.3;}
	.point_wrap li .num{
		left: auto;
		right: 15px;
	}
}