@charset "utf-8";
#keyVisual{
	background-image: url("/df/wp-content/themes/sun-denshi/lineup/common/img/keyvisual_lineup2.jpg");
}

#keyVisual .ttl .jp::before{
	background: #ed1b24;
}
#keyVisual .ttl .clip{
	background: none;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit;
}

.ttlContainer .ttl .clip{
	color: #a41d23;
	background: none;
	-webkit-background-clip: inherit;
	-webkit-text-fill-color: inherit;
}

#sec_shadowdragon_02{
	margin-top: 150px;
}

#sec_shadowdragon_02 .lead{
	margin-top: 60px;
}

#sec_shadowdragon_02 .pointBox{
	gap: 0 40px;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
}

#sec_shadowdragon_02 .pointBox li{
	background: #f2f5f7;
	padding: 30px 20px;
	margin: 40px 0 0;
	width: calc(100% / 2 - 20px);
}

#sec_shadowdragon_02 .pointBox .ttl{
	color: #a41d23;
	border-bottom: solid 1px rgba(14,25,46,0.3);
	padding-bottom: 25px;
	margin-bottom: 15px;
}

#sec_shadowdragon_02 .pointBox .txtBox{
	font-size: 1.4rem;
}

#sec_shadowdragon_03 .pointBox .ttl{
	color: #a41d23;
}
#sec_shadowdragon_03 .pointBox .ttl .label{
	background: #a41d23;
}

#sec_about .contents > .ttl,
#sec_about .flexBox .txtBox .ttl{
	color: #a41d23;
}

#sec_about .flexBox{
	gap: 0 20px;
}

#contactBox{
	background-image: url("/df/wp-content/themes/sun-denshi/lineup/common/img/bg_contact2.jpg");
}
#contactBox ul li .btn{
	color: #a41d23;
	background: #fff;
}
#contactBox ul li .btn:hover{
	background: #ffd8da;
}
#contactBox ul li .btn.white .arrow{
	background: #a41d23;
	border-color: #a41d23;
}


@media screen and (max-width: 880px){
	#sec_shadowdragon > .ttlContainer > .flexBox{
		display: block;
	}
	#sec_shadowdragon > .ttlContainer > .flexBox figure{
		margin: 20px auto 0;
	}
	#sec_shadowdragon_02{
		margin-top: 100px;
	}
	#sec_shadowdragon_02 .lead{
		margin-top: 32px;
	}
	#sec_shadowdragon_02 .pointBox{
		gap: 0 10px;
	}
	#sec_shadowdragon_02 .pointBox li{
		padding: 20px;
		margin: 10px 0 0;
		width: calc(100% / 2 - 5px);
	}
	#sec_shadowdragon_02 .pointBox .ttl{
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	
	#sec_about .flexBox{
		flex-wrap: wrap;
		gap: 20px 10px;
	}
	#sec_about .flexBox > .item{
		width: calc(100% / 3 - 10px);
	}
}
@media screen and (max-width: 767px){
	#keyVisual .ttl{
		font-size: clamp(1.8rem,6.6vw,3rem);
	}
	#sec_shadowdragon > .ttlContainer > .ttl{
		font-size: clamp(3.2rem,10vw,5rem);
	}
	#sec_shadowdragon_02 .pointBox li{
		width: 100%;
	}
	#sec_about .flexBox{
		gap: 20px 10px;
	}
	#sec_about .flexBox > .item{
		width: 100%;
	}
}