@charset "utf-8";
/* PC ================================================== */
@media all and (min-width:960px){
#design {
	width: 100%;
	height: auto;
	padding: 230px 0px 0px;
	background-color: #FAF9F2;
}
	.design--inner {
		width: 100%;
		margin: auto auto;
	}
		.design-main {
			width: 100%;
			margin: auto auto auto 0;
			padding: 0 0 70px;
		}
		.conteiner {
			width:100%;
			max-width: 1200px;
			margin:0 auto;
			position: relative;
			overflow: hidden;
		}
		.visual01 {
			width: 90%;
			width: 1200px;
			height: auto;
		}
		.copy01 {
			position: absolute;
			top:0;
			right:5%;
		}
		.container2 {
			width: 90%;
			max-width:1000px;
			margin: 30px auto 0;
			text-align: center;
		}
		.design-txt01 {
			display: block;
			width: 550px;
			height: auto;
			margin:80px auto 20px;
		}
		.visual02 {
			width: 1014px;
			height: 100%;
			margin: 0 0 20px 0px;
		}
		.small-txt02 {
			font-size: 10px;
		}
		.container03 {
			width: 90%;
			width: 1200px;
			height: auto;
			margin: 250px auto 0;
		}
			.visual03 {
				display: block;
				width: 90%;
				width: 1200px;
				height: auto;
				margin:0 auto;
			}
		.container04 {
			width: 90%;
			max-width:1200px;
			margin: 20px auto 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.copy-div04 {
			width: 50%;
			min-width: 451px;
		}
		.copy02 {
			display: block;
			height: auto;
			margin:50px 0 40px;
		}
		.visual04 {
			width: 602px;
			height: 100%;
			margin: 0 0 0px 0px;
		}
		.copy-txt04 {
			font-size: 14px;
			margin: 30px 0 0;
			line-height: 2.1;
		}
		.disc04 {
			font-size: 10px;
			margin: 60px auto 0;
			max-width: 1200px;
			text-align: right
		}

}

/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	.header-logo {
		background-color: #fff;
	}
	#design {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.design--inner {
			width: 100%;
			margin: auto auto;
		}
			.design-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.conteiner {
				width:100%;
				margin:0 auto;
				position: relative;
				overflow: hidden;
			}
			.visual01 {
				width: 100%;
				height: auto;
			}
			.copy01 {
				width: 38px;
				position: absolute;
				top:0;
				right:8%;
			}
			.container2 {
				width: 100%;
				margin: 30px auto 200px;
			}
			.design-txt01 {
				display: block;
				width: 70%;
				height: auto;
				margin: 50px auto 0;
			}
			.visual02 {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
			.small-txt02 {
				width: 90%;
				font-size: 14px;
				margin: 50px auto 70px;
			}
			.copy-div {
				width:90%;
				margin: 0 auto;
				z-index:1;
			}
			.copy-div p {
				font-size: 14px;
				line-height: 1.8;
			}
			.container03 {
				width: 100%;
				height: auto;
				margin: 0px auto 0px;
				padding-bottom: 20px;
				display: flex;
				justify-content:flex-end;
			}
			.visual03 {
				display: block;
				width: 100%;
				height: auto;
				margin:0 auto;
			}
			.container04 {
				width: 90%;
				margin: 20px auto 0;
			}
			.copy-div04 {
				width: 100%;
			}
			.copy02 {
				display: block;
				width: 330px;
				height: auto;
				margin: 30px 0 20px;
			}
			.visual04 {
				width: 100%;
				height: auto;
				margin: 0 0 0px 0px;
			}
			.copy-txt04 {
				font-size: 14px;
				margin: 30px 0 0;
				line-height: 2.1;
			}
			.disc04 {
			font-size: 10px;
			margin: 60px auto 0;
			max-width: 90%;
			text-align: left
			}
	
}

/* SP ================================================== */
@media all and (max-width:559px){
	.header-logo {
		background-color: #fff;
	}
	#design {
		width: 100%;
		height: auto;
		padding: 100px 0px 70px;
		background-color: #FAF9F2;
	}
		.design--inner {
			width: 100%;
			margin: auto auto;
		}
			.design-main {
				width: 100%;
				margin: auto auto auto 0;
			}
			.conteiner {
				width:100%;
				margin:0 auto;
				position: relative;
				overflow: hidden;
			}
			.visual01 {
				width: 100%;
				height: auto;
			}
			.copy01 {
				width: 38px;
				position: absolute;
				top:0;
				right:8%;
			}
			.container2 {
				width: 100%;
				margin: 30px auto 120px;
			}
			.txt01-area {
				position: relative;
				width: 90%;
				margin: 0 auto 30px;
			}
			.txt01-area p {
				font-size: 14px;
				line-height: 2.2;
				letter-spacing: 0.075em;
			}
			.design-txt01 {
				position: absolute;
				top:0;
				right:0;
				display: block;
				width: 50px;
				height: auto;
				margin:0px auto 30px;
			}
			.visual02 {
				width: 100%;
				height: auto;
				margin: 0 auto;
			}
			.small-txt02 {
				width: 90%;
				font-size: 10px;
				margin: 15px auto 70px;
				line-height: 1.2;
			}
			.copy-div {
				width:90%;
				margin: 0 auto;
				z-index:1;
			}
			.copy-div p {
				font-size: 14px;
				line-height: 1.8;
			}
			.container03 {
				width: 100%;
				height: auto;
				margin: 0px auto 0px;
				padding-bottom: 0;
				display: flex;
				justify-content:flex-end;
			}
			.visual03 {
				display: block;
				width: 100%;
				height: auto;
				margin:0 auto;
			}
			.container04 {
				width: 90%;
				margin: 0 auto 0;
			}
			.copy-div04 {
				width: 100%;
			}
			.copy02 {
				display: block;
				width: 270px;
				height: auto;
				margin: 30px 0 20px;
			}
			.visual04 {
				width: 100%;
				height: auto;
				margin: 0 0 0px 0px;
			}
			.copy-txt04 {
				font-size: 14px;
				margin: 30px 0 0;
				line-height: 2.1;
			}
			.disc04 {
			font-size: 10px;
			margin: 60px auto 0;
			max-width: 90%;
			text-align: left
			}
}