@charset "utf-8";
/*---------------------------------------
 Wordpress調整用
-----------------------------------------*/
#container {
	background-color: #B3B3B3;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
.breadcrumb {
	display: none !important;
}
#main {
	background-color: #B3B3B3;
	border: none;
}
.no-sidebar .content .main {
	padding: 0;
}
.article h1,
h3.entry-card-productid,
.under-entry-content {
	display: none !important;
}


/*---------------------------------------
 Common
-----------------------------------------*/
#diy {
	background-color: #FFFFFF;
	line-height: 1.25;
	margin: 0 auto;
	padding: 0;
}
section {
	padding: 4rem 0;
}
.only_pc { display: block !important; }
.only_tb { display: none !important; }
.only_sp { display: none !important; }
ol, ul, li, dl, dt, dd {
	list-style: none;
	margin: 0;
	padding: 0;
}
p {
	margin: unset;
}
a {
	color: unset;
	cursor: pointer;
}
a:hover {
	color: unset;
	opacity: 0.5;
	text-decoration: none;
}
img {
	max-width: 100%;
	vertical-align: top;
	width: fit-content;
}
.title {
	background-color: #F4C41F;
	color: #2F3845;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 15rem;
	text-align: left;
	width: 95%;
}
.title h2 {
	background-color: unset;
	border-radius: unset;
	color: #2F3845;
	font-size: 4rem;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
.title h2 strong {
	font-size: 5rem;
}
.title h2 span {
	font-size: 3.5rem;
}


/*---------------------------------------
 Key Visual
-----------------------------------------*/
#kv {
	aspect-ratio: 44 / 25;
	background-image: url(/site/wp-content/uploads/easy-diy/img/01.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	margin: 0 auto;
	text-indent: -9999px;
}


/*---------------------------------------
 Section 01
-----------------------------------------*/
#sec01 .title {
	border-radius: 0 7.5rem 0 0;
}
#sec01 .content {
	border-top: #2F3945 15px solid;
	border-bottom: #2F3945 15px solid;
	position: relative;
	margin-top: 9rem;
	padding: 7rem 0 3rem;
	text-align: center;
}
#sec01 .content h3 {
	background-color: #2F3845;
	border: none;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3.5rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 1rem 0;
	position: absolute;
	top: -5.75rem;
	left: 25%;
	width: 50%;
}
#sec01 .content img {
	width: 90%;
}
#sec01 .content h4 {
	border: none;
	color: #2F3945;
	font-size: 4rem;
	font-weight: bold;
	margin: 0 0 3rem;
}
#sec01 .content h4 strong {
	font-size: 14rem;
	font-weight: bold;
}
#sec01 img.arrow {
	display: block;
	margin: 0 auto;
}


/*---------------------------------------
 Section 02
-----------------------------------------*/
#sec02 .title {
	border-radius: 7.5rem 0 0 0;
	margin-left: auto;
}
#sec02 .content {
	border-top: #F4C41F 15px solid;
	position: relative;
	margin-top: 9rem;
	padding: 10rem 0 0;
	text-align: center;
}
#sec02 .content h3 {
	background-color: #FFFFFF;
	border: #F4C41F 15px solid;
	color: #2F3845;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 1rem 0;
	position: absolute;
	top: -6rem;
	left: 5%;
	width: 90%;
}
#sec02 .content dl {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto 4rem;
	width: 90%;
}
#sec02 .content dl dt {
	width: 65%;
}
#sec02 .content dl dd {
	border: #2F3845 2px solid;
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	font-weight: bold;
	margin: 0;
	width: 35%;
}
#sec02 .content dl dd img {
	margin-bottom: 1rem;
	width: 65%;
}
#sec02 .content dl dd span {
	display: block;
	margin: 1rem auto;
	width: 100%;
}
#sec02 .content dl dd a {
	background-color: #D5191A;
	border-radius: 5rem;
	color: #FFFFFF;
	justify-content: center;
	font-size: 1.1rem;
	margin: 0;
	padding: 0.5rem 0 0.65rem;
	text-decoration: none;
	width: 80%;
}
#sec02 .content dl dd a i {
	height: auto;
	margin-left: 0.5rem;
}
#sec02 .content dl dd.detail p {
	font-size: 2.5rem;
	margin: 0;
}
#sec02 .content dl dd.detail strong {
	font-size: 3rem;
	font-weight: bold;
}
#sec02 .content dl dd.detail small {
	font-size: 2rem;
}
#sec02 .content dl dd.detail span {
	display: block;
	font-size: 2.25rem;
	margin: 2rem auto 1rem;
	width: 100%;
}
#sec02 .content dl dd.detail a {
	background-color: #1E4CF4;
}
#sec02 .recommend {
	border-top: #F4C41F 15px solid;
	position: relative;
	margin-top: 12rem;
	padding: 6rem 0 0;
}
#sec02 .recommend h3 {
	background-color: #FFFFFF;
	border: #F4C41F 15px solid;
	color: #2F3845;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	font-weight: bold;
	margin: 0 auto;
	padding: 1rem 0;
	position: absolute;
	top: -4.25rem;
	left: 5%;
	width: 90%;
}
#sec02 .recommend dl {
	border: #2F3845 2px solid;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 auto;
	padding: 2rem;
	width: 90%;
}
#sec02 .recommend dl dt {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	font-weight: bold;
	width: 48%;
}
#sec02 .recommend dl dt strong {
	display: block;
	font-size: 1.5rem;
	font-weight: bold;
}
#sec02 .recommend dl dd {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	margin: 0;
	width: 48%;
}
#sec02 .recommend dl dd h4 {
	border: none;
	font-size: 1.15rem;
	font-weight: bold;
	margin: 0;
	text-align: left;
	width: 100%;
}
#sec02 .recommend dl dd p {
	font-size: 0.9rem;
	margin: 0;
	padding: 0 0 1rem 1.25rem;
}
#sec02 .recommend dl dd span {
	display: block;
	font-weight: bold;
	margin: 0 auto 1rem;
	text-align: center;
	width: 100%;
}
#sec02 .recommend dl dd a {
	background-color: #D5191A;
	border-radius: 5rem;
	color: #FFFFFF;
	justify-content: center;
	font-size: 1.1rem;
	margin: 0;
	padding: 0.5rem 0 0.65rem;
	text-align: center;
	text-decoration: none;
	width: 80%;
}
#sec02 .recommend dl dd a i {
	height: auto;
	margin-left: 0.5rem;
}


@media screen and (max-width: 1024px) {
	#diy {font-size: 14px;}
	/*---------------------------------------
	 Section 01
	-----------------------------------------*/
	#sec01 .content h4 {
		font-size: 3.5rem;
	}
	#sec01 .content h4 strong {
		font-size: 12rem;
	}
	/*---------------------------------------
	 Section 02
	-----------------------------------------*/
	#sec02 .content dl dd.detail p {
		font-size: 2rem;
	}
	#sec02 .content dl dd.detail strong {
		font-size: 2.5rem;
		font-weight: bold;
	}
	#sec02 .content dl dd.detail small {
		font-size: 1.5rem;
	}
	#sec02 .content dl dd.detail span {
		font-size: 2rem;
	}
}


@media screen and (max-width: 960px) {
	#diy {font-size: 12px;}
	/*---------------------------------------
	 Common
	-----------------------------------------*/
	.only_tb { display: block !important; }
	.title {
		height: 12.5rem;
	}
	.title h2 {
		font-size: 3rem;
	}
	.title h2 strong {
		font-size: 4rem;
	}
	.title h2 span {
		font-size: 2.5rem;
	}
	/*---------------------------------------
	 Section 01
	-----------------------------------------*/
	#sec01 .content {
		border-top: #2F3945 10px solid;
		border-bottom: #2F3945 10px solid;
		margin-top: 7rem;
		padding: 5rem 0 3rem;
	}
	#sec01 .content h3 {
		font-size: 2rem;
		padding: 0.5rem 0;
		top: -3.5rem;
		left: 20%;
		width: 60%;
	}
	#sec01 .content h4 {
		font-size: 2.5rem;
		margin: 0 0 2rem;
	}
	#sec01 .content h4 strong {
		font-size: 8.5rem;
	}
	#sec01 img.arrow {
		width: 30%;
	}
	/*---------------------------------------
	 Section 02
	-----------------------------------------*/
	#sec02 .content {
		border-top: #F4C41F 10px solid;
		margin-top: 6rem;
		padding: 6rem 0 3rem;
	}
	#sec02 .content h3 {
		border: #F4C41F 10px solid;
		font-size: 2rem;
		padding: 0.5rem 0;
		top: -4rem;
	}
	#sec02 .content dl {
		margin: 0 auto 2.5rem;
	}
	#sec02 .content dl dt {
		width: 60%;
	}
	#sec02 .content dl dd {
		line-height: 1.25;
		width: 40%;
	}
	#sec02 .content dl dd img {
		margin-bottom: 0.5rem;
		width: 40%;
	}
	#sec02 .content dl dd span {
		margin: 0.5rem auto;
	}
	#sec02 .content dl dd a {
		font-size: 0.9rem;
	}
	#sec02 .content dl dd.detail p {
		font-size: 1.5rem;
	}
	#sec02 .content dl dd.detail strong {
		font-size: 2rem;
	}
	#sec02 .content dl dd.detail small {
		font-size: 1.25rem;
	}
	#sec02 .content dl dd.detail span {
		font-size: 1.5rem;
		margin: 1rem auto 0.5rem;
	}
	#sec02 .recommend {
		border-top: #F4C41F 10px solid;
		margin-top: 2rem;
		padding: 5rem 0 0;
	}
	#sec02 .recommend h3 {
		border: #F4C41F 10px solid;
		font-size: 2rem;
		top: -3rem;
	}
	#sec02 .recommend dl {
		padding: 1rem;
	}
	#sec02 .recommend dl dt {
		flex-direction: column;
	}
	#sec02 .recommend dl dt strong {
		font-size: 1.25rem;
	}
	#sec02 .recommend dl dd {
		line-height: 1.25;
	}
	#sec02 .recommend dl dd h4 {
		font-size: 0.9rem;
	}
	#sec02 .recommend dl dd p {
		font-size: inherit;
		padding: 0 0 1rem 1rem;
	}
	#sec02 .recommend dl dd a {
		font-size: 0.9rem;
	}
}


@media screen and (max-width: 720px) {
	/*---------------------------------------
	 Common
	-----------------------------------------*/
	.title {
		height: 10rem;
	}
	.title h2 {
		font-size: 2.5rem;
	}
	.title h2 strong {
		font-size: 3.5rem;
	}
	/*---------------------------------------
	 Section 01
	-----------------------------------------*/
	#sec01 .title {
		border-radius: 0 5rem 0 0;
	}
	#sec01 .content {
		margin-top: 6rem;
		padding: 3rem 0 1rem;
	}
	#sec01 .content h3 {
		font-size: 1.75rem;
	}
	#sec01 .content h4 strong {
		font-size: 7.5rem;
	}
	/*---------------------------------------
	 Section 02
	-----------------------------------------*/
	#sec02 .title {
		border-radius: 5rem 0 0 0;
	}
	#sec02 .recommend dl dt strong {
		font-size: 1rem;
	}
}


@media screen and (max-width: 480px) {
	/*---------------------------------------
	 Common
	-----------------------------------------*/
	section {
		padding: 1rem 0;
	}
	.only_pc { display: none !important; }
	.only_tb { display: none !important; }
	.only_sp { display: block !important; }
	.title {
		height: 5rem;
	}
	.title h2 {
		font-size: 1.5rem;
	}
	.title h2 strong {
		font-size: 1.75rem;
	}
	.title h2 span {
		font-size: 1.25rem;
	}
	/*---------------------------------------
	 Section 01
	-----------------------------------------*/
	#sec01 .title {
		border-radius: 0 3rem 0 0;
	}
	#sec01 .content {
		border-top: #2F3945 5px solid;
		border-bottom: #2F3945 5px solid;
		margin-top: 2rem;
		padding: 2rem 0 1rem;
	}
	#sec01 .content h3 {
		font-size: 1rem;
		top: -1.25rem;
		left: 10%;
		width: 80%;
	}
	#sec01 .content h4 {
		font-size: 1.5rem;
		margin: 0 0 1rem;
	}
	#sec01 .content h4 strong {
		font-size: 4rem;
	}
	/*---------------------------------------
	 Section 02
	-----------------------------------------*/
	#sec02 .title {
		border-radius: 3rem 0 0 0;
	}
	#sec02 .content {
		border-top: #F4C41F 5px solid;
		margin-top: 3rem;
		padding: 3rem 0 1rem;
	}
	#sec02 .content h3 {
		border: #F4C41F 5px solid;
		font-size: 1rem;
		padding: 0.5rem 0;
		top: -2.25rem;
	}
	#sec02 .content dl {
		border: #2F3845 2px solid;
		margin: 0 auto 1rem;
	}
	#sec02 .content dl dt {
		width: 100%;
	}
	#sec02 .content dl dd {
		border: none;
		line-height: 1.25;
		padding: 0.5rem 0 1rem;
		width: 100%;
	}
	#sec02 .content dl dd.detail p {
		font-size: 1.25rem;
		margin-top: 0.5rem;
	}
	#sec02 .content dl dd.detail strong {
		font-size: 1.5rem;
	}
	#sec02 .content dl dd.detail small {
		font-size: 1.25rem;
	}
	#sec02 .content dl dd.detail span {
		font-size: 1.25rem;
		margin: 0.5rem auto;
	}
	#sec02 .recommend {
		border-top: #F4C41F 5px solid;
		margin-top: 2rem;
		padding: 2rem 0 1rem;
	}
	#sec02 .recommend h3 {
		border: #F4C41F 5px solid;
		font-size: 1rem;
		padding: 0.5rem 0;
		top: -1.5rem;
	}
	#sec02 .recommend dl {
		padding: 0.75rem;
	}
	#sec02 .recommend dl dt {
		width: 100%;
	}
	#sec02 .recommend dl dd {
		margin-top: 1rem;
		width: 100%;
	}
}