@charset "utf-8";

/* -----------------------------
	structural-performance-area
-------------------------------- */

.structural-performance-area {
	padding: 100px 0;
}

.structural-performance-area .top-area {
	background: #F6F6F4;
	padding: 20px 0;
	text-align: center;
}

.structural-performance-area .top-area .copy {
	color: #726145;
	font-size: 3.6rem;
	font-weight: 400;
	font-family: var(--basefont-jp);
	line-height: 1.2;
	padding: 0 0 10px;
}

.structural-performance-area .top-area .copy span {
	font-size: 2.6rem;
}

.structural-performance-area .top-area .att {
	font-size: 1.2rem;
}

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

	.structural-performance-area {
		padding: 0 0 50px;
	}

	.structural-performance-area .top-area {
		padding: 30px 20px;
		text-align: center;
	}

	.structural-performance-area .top-area .copy {
		font-size: 2.6rem;
		padding: 0;
	}

	.structural-performance-area .top-area .copy span {
		font-size: 1.6rem;
	}
	
}

/* -----------------------------
	box-com
-------------------------------- */

.structural-performance-area .box-com {
	padding: 70px 0 0;
} 

.structural-performance-area h3.title {
	text-align: center;
	position: relative;
	font-size: 2.6rem;
	font-weight: 400;
	font-family: var(--basefont-jp);
	color: #C5940C;
	font-feature-settings: "palt";
	margin: 0 0 40px;
} 

.structural-performance-area h3.title::before {
	content: "";
	width: 100%;
	height: 1px;
	background: #C5940C;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: -1;
} 

.structural-performance-area h3.title span {
	display: inline-block;
	padding: 0 20px;
	background: #fff;
} 

.structural-performance-area h4.title {
	display: inline-block;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: #CBBF92;
	color: #fff;
	font-size: 2.4rem;
	font-weight: bold;
	padding: 10px;
} 

.structural-performance-area h4.title02 {
	color: #726145;
	font-weight: bold;
	font-size: 2.4rem;
	text-align: center;
} 

.structural-performance-area h4.title02 span {
	font-size: 1.6rem;
} 

.structural-performance-area .ttl-lower-m {
	text-align: center;
	padding: 0 0 20px;
} 

.structural-performance-area .flex {
	display: flex;
	justify-content: space-between;
} 

.structural-performance-area .border-bottom {
	border-bottom: #CBBF92 solid 1px;
	padding: 0 0 50px;
	margin: 0 0 50px;
}

.structural-performance-area .top-txt {
	text-align: center;
	padding: 20px 0 40px;
}

.structural-performance-area .att {
    font-size: 1.2rem;
	padding: 10px 0 0;
}

.structural-performance-area .no-list {
	gap:15px 10px;
	flex-wrap: wrap;
}

.structural-performance-area .no-list li {
	background: #F6F6F4;
	position: relative;
	padding: 10px 10px;
}

.structural-performance-area .no-list li .no {
	color: #C5940C;
	font-family: var(--rubik);
	position: absolute;
	left: 10px;
	top: -13px;
	font-weight: 400;
}

.structural-performance-area .no-list li .copy {
	font-feature-settings: "palt";
	font-weight: bold;
}


/*sp-box01*/
.sp-box01 .flow-area .flex {
	margin: 20px 0 50px;
	border: #EBE6D7 solid 1px;
}

.sp-box01 .flow-area .flex li {
	text-align: center;
	width: calc((100% - 5px)/6);
	padding: 30px 0;
}

.sp-box01 .flow-area .flex li:not(:last-child) {
	border-right: #EBE6D7 solid 1px;
}

.sp-box01 .flow-area .flex li .no {
    color: var(--gold03);
    font-family: var(--rubik);
    font-size: 2.0rem;
    font-weight: 400;
    position: relative;
    display: inline-block;
    padding: 0 15px;
	margin: 0 0 10px;
}

.sp-box01 .flow-area .flex li .no::before ,
.sp-box01 .flow-area .flex li .no::after {
	content: "";
	width: 5px;
	height: 1px;
	background: var(--gold03);
	position: absolute;
	left: 0;
	top: 17px;
}

.sp-box01 .flow-area .flex li .no::after {
	right: 0;
	left: auto;
}

.sp-box01 .info-area {
	flex-direction: row-reverse;
	align-items: center;
	padding: 30px 0 50px;
}

.sp-box01 .info-area div p:not(:last-child) {
	padding: 0 0 10px;
}

.sp-box01 .info-area .image {
	margin: 0 0 0 30px;
}

.sp-box01 .merit-area .flex {
	display: flex;
	justify-content: space-between;
	padding: 40px 0 0;
	gap:0 40px;
}

.sp-box01 .merit-area .flex .box01 ,
.sp-box01 .merit-area .flex .box02 {
	width: 580px;
}

.sp-box01 .merit-area .flex .figure {
	background: var(--beige04);
	padding: 29px 30px;
}

.sp-box01 .merit-area .flex .box01 .figure {
	display: flex;
	justify-content: space-between;
}

.sp-box01 .merit-area .flex .figure {
	text-align: center;
}

.sp-box01 .merit-area .flex .figure .image {
	padding: 5px 0 15px;
}

.sp-box01 .merit-area .flex .box01 .figure .image {
	width: 250px;
}

.sp-box01 .merit-area .flex .box01 .figure .image img {
	width: 100%;
}

.sp-box01 .merit-area .flex .box02 .figure .image {
	padding: 5px 0 0;
	line-height: 0;
	width: 520px;
}

.sp-box01 .merit-area .flex .box02 .figure .image img {
	width: 100%;
	line-height: 0;
}

.sp-box01 .merit-area .flex .figure > div p {
	line-height: 1.5;
}

.sp-box01 .merit-area .flex .figure > div p span {
	color: #B22B2B;
	font-weight: bold;
}

.sp-box01 .merit-area .title02 {
	padding: 20px 0;
}

.sp-box01 .mamory-area .list .block {
	background: #F4F3F0;
	padding: 20px;
	width: 590px;
	margin: 20px 0 0;
}

.sp-box01 .mamory-area .list01 .block .flex {
	padding: 0 10px;
	margin: -20px 0 20px;
	gap:20px;
}

.sp-box01 .mamory-area .list01 .block .flex .title {
	display: none;
}

.sp-box01 .mamory-area .list01 .block p {
	font-feature-settings: "palt";
}

.sp-box01 .mamory-area .list01 .block .flex dl .box {
	background: #fff;
	padding: 15px 15px 20px;
	position: relative;
	width: 245px;
	margin: 0 0 30px;
}

.sp-box01 .mamory-area .list01 .block .flex .dl-01 .box {
	border: #726145 solid 1px;
}

.sp-box01 .mamory-area .list01 .block .flex .dl-02 .box {
	border: #C5940C solid 1px;
}

.sp-box01 .mamory-area .list01 .block .flex dl .box::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 36px;
	height: 35px;
	bottom: -25px;
}

.sp-box01 .mamory-area .list01 .block .flex .dl-01 .box::before {
	background-image: url("../img/arrow-brown.png");
}

.sp-box01 .mamory-area .list01 .block .flex .dl-02 .box::before {
	background-image: url("../img/arrow-gold.png");
}

.sp-box01 .mamory-area .last-p {
	padding: 20px 0 0;
}

.sp-box01 .mamory-area .list02 .txt01 {
	padding: 0 0 20px;
	text-align: center;
}

.sp-box01 .mamory-area .list02 .txt02 {
	padding: 15px 0;
}

.sp-box01 .reason-area .flex {
	flex-wrap: wrap;
	gap: 40px 30px;
	margin: 20px 0 30px;
}

.sp-box01 .reason-area .flex li:nth-child(1) ,
.sp-box01 .reason-area .flex li:nth-child(2) {
	width: 585px;
}

.sp-box01 .reason-area .flex li:nth-child(3) ,
.sp-box01 .reason-area .flex li:nth-child(4) ,
.sp-box01 .reason-area .flex li:nth-child(5) {
	width: 380px;
}

.sp-box01 .reason-area .flex li .image {
	margin: 0 0 10px;
}

.sp-box01 .reason-area .flex li .no {
	font-family: var(--rubik);
    font-weight: 400;
    font-size: 2.0rem;
    color: var(--gold03);
    position: relative;
    display: inline-block;
    padding: 0 90px 0 0;
}

.sp-box01 .reason-area .flex li .no::before {
	content: "";
	width: 80px;
	height: 1px;
	background: var(--gold03);
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.sp-box01 .reason-area .flex li h5 {
	font-family: var(--rubik);
    font-weight: bold;
    font-size: 2.4rem;
	line-height: 1.5;
	padding: 5px 0;
}

.sp-box01 .reason-area .flex li h5 span {
    font-size: 1.2rem;
}

/*box02*/
.sp-box02 .sash-area.flex {
	justify-content: space-between;
}

.sp-box02 .sash-area.flex li {
	width: 580px;
}

.sp-box02 .sash-area .image {
	border: #EBE6D7 solid 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 580px;
	height: 300px;
}

.sp-box02 .sash-area .title02 {
	padding: 20px 0 10px;
}

.sp-box02 .sash-area .no-list li {
	width: calc((100% - 10px ) / 2);
}

.sp-box02 .sash-area .no-list li:nth-child(1) {
	width: 100%;
}

.sp-box02 .sash-area .no-list li .txt {
	font-size: 1.4rem;
	line-height: 1.4;
}

.sp-box02 .urethane-area {
	flex-direction: row-reverse;
	align-items: center;
	padding: 0 0 70px;
}

.sp-box02 .urethane-area .title02 {
	text-align: left;
}

.sp-box02 .urethane-area .no-list {
	width: 570px;
	padding: 30px 0 0;
}

.sp-box02 .urethane-area .no-list li {
	width: calc((100% - 10px ) / 2);
}

.sp-box02 .feature-area .title {
	margin: 30px 0;
}

.sp-box02 .feature-area .copy {
	text-align: center;
	color: #C5940C;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 1.3;
}

.sp-box02 .feature-area .flex {
	flex-wrap: wrap;
	gap:20px;
}

.sp-box02 .feature-area .flex li {
	border: #EBE6D7 solid 1px;
	width: 590px;
	padding: 30px;
}

.sp-box02 .feature-area .flex li h5 {
	font-weight: bold;
	font-size: 2.0rem;
	padding: 0 0 0 18px;
	margin: 0 0 10px;
	background: url("../img/icon-check.svg") no-repeat left center / 13px;
}

.sp-box02 .feature-area .heatshock {
	background: #F6F6F4 url("../img/features-bg.png") repeat left center / auto;
	padding: 30px;
	margin: 20px 0 0;
	align-items: center;
}

.sp-box02 .feature-area .heatshock .image img {
	width: 400px;
}

.sp-box02 .feature-area .heatshock .box {
	flex: 1;
}

.sp-box02 .feature-area .heatshock .title02 {
	line-height: 1.3;
	padding: 2px 0 2px 40px;
	text-align: left;
	background: url("../img/sp-urethane-icon.png") no-repeat left center / auto 33px;
	margin: 0 0 10px;
}

.sp-box02 .feature-area .heatshock p em {
	font-weight: bold;
}

.sp-box02 .top-txt.att {
	padding: 0 0 40px;
}

.sp-box02 .roofing-area {
	flex-direction: row-reverse;
	align-items: center;
}

.sp-box02 .roofing-area .image {
	margin: 0 0 0 50px;
}

.sp-box02 .weightcomparison-area {
	background: #F6F6F4;
	padding: 50px 0;
	margin: 50px 0 0;
	text-align: center;
}

.sp-box02 .weightcomparison-area .txt {
	padding: 10px 0 20px;
	line-height: 1.5;
}

.sp-box02 .list-area {
	justify-content: space-between;
	gap: 0 20px;
	margin: 30px 0 0;
}

.sp-box02 .list-area .image {
	padding: 0 0 10px;
	width: 285px;
}

.sp-box02 .list-area .image img {
	width: 100%;
}

.sp-box03 .top-txt {
	padding: 0 0 20px;
}

.sp-box03 .remote-area {
	padding: 70px 0 0;
}

.sp-box03 .remote-area h4.title02 {
	padding: 0 0 20px;
}

.sp-box03 .remote-area .flex {
	gap:0 30px;
}

.sp-box03 .remote-area.box01 .flex .remote-com ,
.sp-box03 .flex.box03 .remote-area .remote-com {
	width: 380px;
}

.sp-box03 .flex.box02 .remote-area .remote-com {
	width: 585px;
}

.sp-box03 .remote-area .remote-com {
	border: #EBE6D7 solid 1px;
	padding: 25px;
}

.sp-box03 .remote-area .remote-com .image {
	background: #F6F6F4;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*box01*/
.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 ,
.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 {
	padding: 40px 25px 25px;
}

.sp-box03 .remote-area.box01 .flex .remote-com {
	text-align: center;
}

.sp-box03 .box01 .copy ,
.sp-box03 .box02 .copy {
	font-weight: bold;
	color: #A5915A;
	display: inline-block;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .copy ,
.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 .copy {
	margin:0 0 35px;
}

.sp-box03 .box02 .copy {
	margin:0 0 15px;
}

.sp-box03 .box01 .copy span ,
.sp-box03 .box02 .copy span {
	background: linear-gradient(transparent 50%, #F1EFEB 50%);
	padding: 0 10px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .flex {
	gap:0 10px;
}

.sp-box03 .remote-area.box01 .flex .remote-com .image ,
.sp-box03 .flex.box02 .remote-area .remote-com .image ,
.sp-box03 .flex.box03 .remote-area .remote-com .image {
	width: 100%;
	height: 160px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .image {
	width: 160px;
	height: 160px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .image01 img {
	width: 110px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .image02 img {
	width: 67px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 div > p ,
.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 div > p ,
.sp-box03 .remote-area.box01 .flex .remote-com.remote-03 div > p {
	padding: 10px 0 0;
	line-height: 1.4;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 .image img {
	width: 260px;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-03 .image {
	justify-content: flex-start;
	margin: 22px 0 0;
}

.sp-box03 .remote-area.box01 .flex .remote-com.remote-03 .image img {
	width: 317px;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 {
	height: 381px;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 .image {
	height: auto;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 .image img {
	/*width: 495px;*/
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 .txt {
	padding: 10px 0 0;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 p {
	padding: 10px 0 0;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 .att {
	font-size: 1.4rem;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 .image {
	background: none;
}

.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 .image img {
/*
	height: 90%;
*/
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-06 ,
.sp-box03 .flex.box03 .remote-area .remote-com.remote-07 {
	height: 439px;
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-06 p ,
.sp-box03 .flex.box03 .remote-area .remote-com.remote-07 p ,
.sp-box03 .flex.box03 .remote-area .remote-com.remote-08 p {
	padding: 10px 0 0;
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-06 .image img {
	width: 101px;
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-07 .image img {
	width: 280px;
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-08 .image {
	align-items:flex-end;
}

.sp-box03 .flex.box03 .remote-area .remote-com.remote-08 .image img {
	width: 330px;
}

.sp-box03 .famiLock-area {
    margin: 20px 0 0;
}

.sp-box03 .famiLock-area .image {
    background: #F6F6F4 url(../img/features-bg.png) repeat left center / auto;
    padding: 0 0 0 50px;
	position: relative;
	height: 400px;
	margin: 0 0 60px;
}

.sp-box03 .famiLock-area .image .illustration {
	position: absolute;
	left: 260px;
	z-index: 1;
}

.sp-box03 .famiLock-area .image .bold {
	position: absolute;
	left: 50px;
	width: 240px;
	top: 160px;
}

.sp-box03 .famiLock-area .image .flex {
	gap:0 10px;
	position: absolute;
	right: 20px;
	bottom: -50px;
}

.sp-box03 .famiLock-area .image .flex li {
	width: 200px;
	height: 260px;
	text-align: center;
	font-weight: bold;
	background: #fff;
	border: #EBE6D7 solid 1px;
	padding: 20px 0;
}

.sp-box03 .famiLock-area .image .flex li:nth-child(2) {
	padding: 55px 0 0;
}

.sp-box03 .famiLock-area .image .flex li .icon {
	padding: 0 0 10px;
}

.sp-box03 .famiLock-area > p {
	padding: 0 0 20px;
}

.sp-box03 .famiLock-area .list-area {
	padding: 40px 0 0;
	gap: 50px 20px;
	flex-wrap: wrap;
}

.sp-box03 .famiLock-area .list-area div {
	width: 590px;
}

.sp-box03 .famiLock-area .list-area div h4 {
	display: inline-block;
	background: #CBBF92;
	color: #fff;
	font-size: 1.8rem;
	font-weight: bold;
	padding: 10px;
	width: 300px;
	text-align: center;
}

.sp-box03 .famiLock-area .list-area div dl {
	border-top: #CBBF92 solid 1px;
}

.sp-box03 .famiLock-area .list-area div dl dt {
    font-weight: bold;
    font-size: 2.0rem;
    padding: 0 0 0 18px;
    margin: 20px 0 10px;
    background: url(../img/icon-check.svg) no-repeat left center / 13px;
}

.sp-box03 .famiLock-area .list-area div dl dd {
	padding: 0 0 20px 18px;
	line-height: 1.7;
	border-bottom: #EBE6D7 solid 1px;
}

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

	.structural-performance-area .box-com {
		padding: 50px 20px 0;
	} 

	.structural-performance-area h3.title {
		font-size: 1.8rem;
		margin: 0 0 30px;
	} 

	.structural-performance-area h3.title span {
		padding: 0 10px;
	} 

	.structural-performance-area h4.title {
		font-size: 2.0rem;
		padding: 5px 10px;
		line-height: 1.5;
	} 

	.structural-performance-area h4.title02 {
		font-size: 2rem;
		line-height: 1.5;
	} 

	.structural-performance-area h4.title02 span {
		font-size: 1.2rem;
	} 

	.structural-performance-area .ttl-lower-m {
		padding: 0 0 10px;
	} 

	.structural-performance-area .ttl-lower-m .jp {
		font-size: 2.4rem;
	} 

	.structural-performance-area .border-bottom {
		padding: 0 0 30px;
		margin: 0 0 30px;
	}

	.structural-performance-area .top-txt {
		padding: 10px 0 20px;
		text-align: left;
	}

	.structural-performance-area .sp-box03 .top-txt {
		text-align: center;
	}

	.structural-performance-area .att {
		padding: 5px 0 0;
	}

	.structural-performance-area .no-list {
		display: block;
	}

	.structural-performance-area .no-list li {
		padding: 10px 10px;
		margin: 15px 0 0;
		width: 100%!important;
	}

	/*sp-box01*/
	.sp-box01 .flow-area .flex {
		margin: 10px 0 30px;
		flex-wrap: wrap;
		border-right: none;
		border-bottom: none;
	}

	.sp-box01 .flow-area .flex li {
		text-align: center;
		width: calc((100% - 5px)/2);
		flex-wrap: wrap;
		padding: 20px 0;
		border-bottom: #EBE6D7 solid 1px;
	}

	.sp-box01 .flow-area .flex li:nth-child(6) {
		border-right: #EBE6D7 solid 1px;
	}

	.sp-box01 .info-area {
		display: block;
		padding: 20px 0 30px;
	}

	.sp-box01 .info-area .image {
		margin: 0 0 20px;
	}

	.sp-box01 .info-area .image img {
		width: 100%;
	}

	.sp-box01 .merit-area .title {
		text-align: center;
	}

.sp-box01 .merit-area .flex {
	display: block;
	padding: 20px 0 0;
	gap:0 40px;
}

	.sp-box01 .merit-area .flex .box01 ,
	.sp-box01 .merit-area .flex .box02 {
		width: 100%;
	}

	.sp-box01 .merit-area .flex .box01 .figure {
        display: block;
        padding: 0;
        background: none;
	}

	.sp-box01 .merit-area .flex .figure > div {
		padding: 20px;
        background: var(--beige04);
        margin: 0 0 2px;
	}

	.sp-box01 .merit-area .flex .box02 {
		margin: 30px 0 0;
	}
	
	.sp-box01 .merit-area .flex .box01 .figure .image ,
	.sp-box01 .merit-area .flex .box02 .figure .image {
		width: 100%;
	}

	.sp-box01 .merit-area .flex .box02 .figure {
		padding: 20px;
	}

	.sp-box01 .merit-area .flex .box02 .figure .image img {
		width: 100%;
	}

	.sp-box01 .merit-area .title02 {
		padding: 20px 0 10px;
	}
	
	.sp-box01 .mamory-area .list .block {
		width: 100%;
		margin: 10px 0 0;
	}
	
	.sp-box01 .mamory-area > .flex {
		display: block;
	}
	
	.sp-box01 .mamory-area .list .block .image img {
		width: 100%;
	}

	.sp-box01 .mamory-area .list01 .block .flex {
		display: block;
		padding: 0;
		margin: 0 0 20px;
	}

	.sp-box01 .mamory-area .list01 .block .flex .title {
		display: inline-block;
		font-weight: bold;
		font-size: 1.8rem;
		color: #fff;
		padding: 5px;
		margin: 20px 0 0;
	}

	.sp-box01 .mamory-area .list01 .block .flex .dl-01 .title {
		background: #726145;
	}

	.sp-box01 .mamory-area .list01 .block .flex .dl-02 .title {
		background: #C5940C;
	}

	.sp-box01 .mamory-area .list01 .block .flex dl .box {
		padding: 10px 10px 15px;
		width: 100%;
		margin: 0 0 15px;
	}

	.sp-box01 .mamory-area .list01 .block .flex dl .box::before {
		width: 18px;
		height: 17.5px;
		bottom: -12px;
	}

	.sp-box01 .mamory-area .last-p {
		padding: 10px 0 0;
	}

	.sp-box01 .mamory-area .list02 {
		padding: 30px 0 0;
	}

	.sp-box01 .mamory-area .list02 .txt01 {
		padding: 0 0 15px;
		text-align: left;
	}

	.sp-box01 .mamory-area .list02 .txt02 {
		padding: 10px 0;
	}
	
	.sp-box01 .reason-area .flex {
		flex-wrap: wrap;
		gap: 30px 0;
		margin: 20px 0 0;
	}

	.sp-box01 .reason-area .flex li:nth-child(1) ,
	.sp-box01 .reason-area .flex li:nth-child(2) {
		width: 100%;
	}

	.sp-box01 .reason-area .flex li:nth-child(3) ,
	.sp-box01 .reason-area .flex li:nth-child(4) ,
	.sp-box01 .reason-area .flex li:nth-child(5) {
		width: 100%;
	}

	.sp-box01 .reason-area .flex li .image {
		margin: 0 0 10px;
	}

	.sp-box01 .reason-area .flex li .image img {
		width: 100%;
	}

	.sp-box01 .reason-area .flex li .no {
		font-size: 1.8rem;
		padding: 0 60px 0 0;
	}

	.sp-box01 .reason-area .flex li .no::before {
		width: 50px;
	}

	.sp-box01 .reason-area .flex li h5 {
		font-size: 2.0rem;
	}

	/*box02*/
	.sp-box02 .top-txt {
		text-align: left;
	}

	.sp-box02 .sash-area.flex {
		display: block;
	}

	.sp-box02 .sash-area.flex li {
		width: 100%;
	}

	.sp-box02 .sash-area.flex li:nth-child(1) {
		padding: 0 0 30px;
	}

	.sp-box02 .sash-area .image {
		width: 100%;
		height: auto;
	}

	.sp-box02 .sash-area.flex li:nth-child(2) .image {
		padding: 20px;
	}

	.sp-box02 .sash-area .image img {
		width: 100%;
	}

	.sp-box02 .sash-area .no-list li {
		width:100%;
	}

	.sp-box02 .sash-area .no-list li:nth-child(1) {
		padding: 10px;
	}

	.sp-box02 .urethane-area {
		display: block;
		padding: 0 0 30px;
	}

	.sp-box02 .urethane-area .image {
		padding: 0 0 20px;
	}

	.sp-box02 .urethane-area .image img {
		width: 100%;
	}

	.sp-box02 .urethane-area .title02 {
		text-align: center;
	}

	.sp-box02 .urethane-area .no-list {
		width: 100%;
		padding: 10px 0 0;
	}

	.sp-box02 .urethane-area .no-list li {
		width: 100%;
	}

	.sp-box02 .feature-area .image img {
		width: 100%;
	}

	.sp-box02 .feature-area .title {
		margin: 10px 0;
		text-align: center;
	}

	.sp-box02 .feature-area .copy {
		font-size: 2.0rem;
		line-height: 1.5;
		text-align: left;
	}

	.sp-box02 .feature-area .flex {
		gap:10px;
	}

	.sp-box02 .feature-area .flex li {
		width: 100%;
		padding: 20px;
	}

	.sp-box02 .feature-area .flex li p {
		padding: 0 0 0 18px;
	}

	.sp-box02 .feature-area .flex li h5 {
		font-size: 1.8rem;
		line-height: 1.5;
		margin: 0;
		background: url("../img/icon-check.svg") no-repeat left top 5px / 13px;
	}

	.sp-box02 .feature-area .heatshock {
		padding: 20px;
	}

	.sp-box02 .feature-area .heatshock .image img {
		width: 100%;
	}

	.sp-box02 .feature-area .heatshock .box {
		flex: 1;
	}

	.sp-box02 .feature-area .heatshock .title02 {
		line-height: 1.5;
		padding: 2px 0 2px 40px;
		text-align: left;
		margin: 0 0 10px;
	}

	.sp-box02 .top-txt.att {
		padding: 0 0 20px;
	}

	.sp-box02 .roofing-area {
		display: block;
	}

	.sp-box02 .roofing-area .image {
		margin: 0 0 30px;
	}

	.sp-box02 .roofing-area .image img {
		width: 100%;
	}

	.sp-box02 .weightcomparison-area {
		padding: 30px 20px;
		margin: 30px 0 0;
		text-align: left;
	}

	.sp-box02 .weightcomparison-area .txt {
		padding: 10px 0;
	}

	.sp-box02 .weightcomparison-area .image img {
		width: 100%;
	}

	.sp-box02 .list-area {
		display: block;
		margin: 20px 0 0;
	}

	.sp-box02 .list-area li {
		padding: 0 0 20px;
	}

	.sp-box02 .list-area li:last-child {
		padding: 0 0 0;
	}

	.sp-box02 .list-area .image {
		padding: 0 0 10px;
		text-align: center;
		width: 100%;
	}

	.sp-box02 .list-area .image img {
		width: 100%;
	}

	.sp-box03 .inner section > .image img {
		width: 100%;
	}

	.sp-box03 .remote-area {
		padding: 30px 0 0;
	}

	.sp-box03 .remote-area h4.title02 {
		padding: 0 0 20px;
		line-height: 1.5;
	}

	.sp-box03 .remote-area .flex {
		gap:10px 0;
		flex-wrap: wrap;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com ,
	.sp-box03 .flex.box03 .remote-area .remote-com {
		width: 100%!important;
	}

	.sp-box03 .flex.box02 .remote-area .remote-com {
		width: 100%!important;
	}

	.sp-box03 .remote-area .remote-com {
		padding: 20px;
	}

	.sp-box03 .remote-area h4.title02 {
		padding: 0 0 10px;
	}

	/*box01*/
	.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 ,
	.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 {
		padding: 20px;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .copy ,
	.sp-box03 .remote-area.box01 .flex .remote-com.remote-02 .copy ,
	.sp-box03 .box02 .copy {
		margin:0 0 15px;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com .image ,
	.sp-box03 .flex.box02 .remote-area .remote-com .image ,
	.sp-box03 .flex.box03 .remote-area .remote-com .image {
		width: 100%;
		height: auto;
		padding: 20px 10px;
	}
	
	.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 .image {
		padding: 0;
	}

	.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 .image {
		padding: 0;
	}

	.sp-box03 .box02 .copy {
		margin:0 auto 15px;
		text-align: center;
	}

	.sp-box03 .flex.box03 .remote-area .remote-com.remote-08 .image {
		padding: 20px 0 0;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .flex {
		gap:0 10px;
	}
	
	.sp-box03 .flex.box02 ,
	.sp-box03 .flex.box03 {
		display: block;
	}
	
	.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .flex > div {
		width: calc((100% - 10px)/2);
	}

	.sp-box03 .remote-area.box01 .flex .remote-com.remote-01 .image {
		width: 100%;
		height: 160px;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com.remote-03 .image {
		margin: 20px 0 0;
		padding: 0 20px 0 0;
	}

	.sp-box03 .remote-area.box01 .flex .remote-com.remote-03 .image img {
		width: 100%;
	}

	.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 {
		height: auto;
	}

	.sp-box03 .flex.box02 .remote-area .remote-com.remote-04 .image img {
		width: 100%;
	}

	.sp-box03 .flex.box02 .remote-area .remote-com.remote-05 .image img {
		width: 100%;
	}

	.sp-box03 .flex.box03 .remote-area .remote-com.remote-08 .image img {
		width: 100%;
	}

	.sp-box03 .flex.box03 .remote-area .remote-com.remote-06 ,
	.sp-box03 .flex.box03 .remote-area .remote-com.remote-07 {
		height: auto;
	}

	.sp-box03 .famiLock-area {
		margin: 0 0 0;
	}

	.sp-box03 .famiLock-area .image {
		padding: 20px;
		position: static;
		height: auto;
		margin: 0 0 30px;
	}

	.sp-box03 .famiLock-area .image .illustration {
		position: static;
	}

	.sp-box03 .famiLock-area .image .illustration {
		text-align: center;
	}

	.sp-box03 .famiLock-area .image .illustration img {
		height: 200px;
	}

	.sp-box03 .famiLock-area .image .bold {
		width: 100%;
		position: static;
		padding: 20px 0 0;
	}

	.sp-box03 .famiLock-area .image .flex {
		gap:0 5px;
		position: static;
		display: block;
	}

	.sp-box03 .famiLock-area .image .flex li {
		width:100%;
		height: auto;
		padding: 10px;
		margin: 5px 0 0;
		display: flex;
		align-items: center;
	}

	.sp-box03 .famiLock-area .image .flex li:nth-child(2) {
		padding: 10px;
	}

	.sp-box03 .famiLock-area .image .flex li .icon {
		padding: 0 0 0 0;
		width: 80px;
		text-align: center;
		margin: 0 10px 0 0;
	}

	.sp-box03 .famiLock-area .image .flex li .icon img {
		height: 100px;
	}

	.sp-box03 .famiLock-area .image .flex li:nth-child(2) .icon img {
		height: 50px;
	}

	.sp-box03 .famiLock-area .image .flex li p {
		font-size: 1.6rem;
	}

	.sp-box03 .famiLock-area > p {
		padding: 0 0 10px;
	}

	.sp-box03 .famiLock-area .list-area {
		display: block;
		padding: 20px 0 0;
	}

	.sp-box03 .famiLock-area .list-area div {
		width: 100%;
		margin: 0 0 30px;
	}

	.sp-box03 .famiLock-area .list-area div:last-child {
		margin: 0;
	}

	.sp-box03 .famiLock-area .list-area div h4 {
		font-size: 1.6rem;
		width: auto;
	}

	.sp-box03 .famiLock-area .list-area div dl dt {
		font-size: 1.7rem;
		padding: 0 0 0 15px;
		margin: 15px 0 5px;
		line-height: 1.5;
		background: url(../img/icon-check.svg) no-repeat left top 5px / 13px;
	}

	.sp-box03 .famiLock-area .list-area div dl dd {
		padding: 0 0 15px 15px;
		line-height: 1.5;
	}

}