@charset "UTF-8";
/* CSS Document */

/************************************************
woodframe-sofa.css 201809
************************************************ */

#woodframe{
	width: 1000px;
	line-height: 1.4;
	margin: 0 auto;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	overflow: hidden;
}
#woodframe h3{
	position: relative;
	/*width: 800px;
	height: 340px;*/
	font-size: 72px;
	font-weight: 200 !important;
	font-family: 'Barlow', sans-serif;
	line-height: 1;
	margin: 20px auto 0;
	background: url(../../images/unique/woodframe-sofa/main.jpg) center top no-repeat;
	background-size: contain;
	text-align: right;
	
	width: 100%;
   height: 0;
	/* (画像の高さ / 画像の横幅) × 100 */
	padding-top: 42.5%;
	background-size: cover;
}
#woodframe h3 span{
	position: absolute;
	right: 0;
	top: 20px;
}
.intro {
	position: relative;
	margin: 0 auto 40px;
	text-align: left;
	line-height: 1.7;
	font-size: 14px;
	text-align: right;
	overflow: hidden;
}
.intro p {
	font-size: 15px;
	margin: 0 auto 30px;
}
.section-box{
	width: 900px;
	margin: 0 auto 40px;
	overflow: hidden;
}
.section-box .section-inner{
	position: relative;
}
.section-box:nth-child(odd) .section-inner{
	float: left;
}
.section-box:nth-child(even) .section-inner{
	float: right;
}
.section-box .ttl{
	font-size: 32px;
	-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
}
.section-box:nth-child(odd) .ttl{
	position: absolute;
	top:0;
	right: -60px;
}
.section-box:nth-child(even) .ttl{
	position: absolute;
	top:0;
	left: -60px;
}

.section-box .txt{
	width: 600px;
	background: rgba(246,246,246,0.90);
	font-size: 13px;
	padding: 30px 40px;
	overflow: hidden;
}
.section-box:nth-child(odd) .txt{
	position: relative;
	top: -40px;
	float: right;
}
.section-box:nth-child(even) .txt{
	position: relative;
	top: -40px;
	float: left;
}

#woodframe .color-box{
	display: block;
	position: relative;
	margin: 0 auto 30px;
	width: 1000px;
	/*height: 340px;*/
	overflow: hidden;
}
#woodframe .color-box dl{
	margin-bottom: 20px;
}
#woodframe .color-box dt{
	font-size: 48px;
	font-family: 'Barlow', sans-serif;
	margin-bottom: 20px;
}
#woodframe .color-box dt span{
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	padding-left: 20px;
}
#woodframe .color-box dd{
	font-size: 14px;
}
#woodframe .color-box .flL{
	position: absolute;
	left: 0;
	bottom: 40px;
	z-index: 1;
	padding-left: 60px;
}
#woodframe .color-box .flR{
	position: relative;
	top: -50px;
	z-index: 0;
}
#woodframe .color-box .flL img{
	width: 600px;
	height: auto;
}
#woodframe .color-box .flR img{
	width: 340px;
	height: auto;
}
#woodframe .btn-ec{
	display: inline-block;
	background: #f2f2f2;
	overflow: hidden;
	margin-bottom: 20px;
	float: right;
}
#woodframe .btn-ec a{
	display: block;
	font-size: 15px;
	font-weight: 400;
	text-align: center;
	padding: .5em 40px;
	text-decoration: none;
	color: #333;
	border: 1px solid #ccc;
}

.list-animate{
	opacity: 0;
	transform: translate(0,-20px); 
	-webkit-transform: translate(0,-20px); 
}
.animate{
	transition: all 1.0s ease-in-out;
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


@media screen and (max-width: 896px){
	#woodframe{
		width: 96%;
		margin: 0 auto 10px;
		overflow: hidden;
	}
	#woodframe h3{
		position: relative;
		width: 100%;
		font-size: 9vw;
		margin: 20px auto 0;
		text-align: right;
		height: 0;
    padding-top: 42.25%;
    /*background-size: contain;*/
		
		background: url(../../images/unique/woodframe-sofa/main.jpg) center top no-repeat;
		/* (画像の高さ / 画像の横幅) × 100 */
		padding-top: 53.33333333%;
		background-size: cover;
	}
	#woodframe h3 span{
		position: absolute;
		right: 20px;
		top: 30px;
	}
	.intro {
		position: relative;
		top: 0px;
		right: 20px;
	}
	.intro p {
		font-size: 1.3rem;
		margin: 0 auto 30px;
	}
	.section-box{
		width: 100%;
		margin: 0 auto 20px;
	}
	.section-box .section-inner{
		width: 88%;
		position: relative;
	}
	.section-box .ttl{
		font-size: 1.9rem;
	}
	.section-box:nth-child(odd) .ttl{
		position: absolute;
		top:0;
		right: -1.5em;
	}
	.section-box:nth-child(even) .ttl{
		position: absolute;
		top:0;
		left: -1.5em;
	}
	.section-box .txt{
		width: 90%;
		font-size: 1.2rem;
		padding: 20px;
		box-sizing: border-box;
	}
	.section-box:nth-child(odd) .txt{
		position: relative;
		top: -20px;
	}
	.section-box:nth-child(even) .txt{
		position: relative;
		top: -20px;
	}

	#woodframe .color-box{
		position: relative;
		padding: 0;
		margin: 0 auto 10px;
		width: 100%;
		height: auto;
	}
	#woodframe .color-box dl{
		width: 96%;
	}
	#woodframe .color-box dt{
		font-size: 2.8rem;
		margin-bottom: 10px;
	}
	#woodframe .color-box dt span{
		font-size: 1.5rem;
		padding-left: 10px;
	}
	#woodframe .color-box dd{
		font-size: 1.4rem;
	}
	#woodframe .color-box .flL{
		position: relative;
		left: 0;
		top: 0;
		width: 50%;
		padding: 0;
		margin: 0 !important;
	}
	#woodframe .color-box .flR{
		position: relative;
		width: 48%;
		top: -30px;
		float: right;
		margin: 0 !important;
	}
	#woodframe .color-box .flL img{
		width: 100%;
		height: auto;
	}
	#woodframe .color-box .flR img{
		width: 100%;
		height: auto;
	}
	#woodframe .btn-ec{
		margin: 0 10px 20px;
	}
	#woodframe .btn-ec a{
		display: block;
		font-size: 1.5rem;
		font-weight: 400;
		text-align: center;
		padding: .5em 40px;
		text-decoration: none;
		color: #333;
	}
	.list-animate{
		opacity: 0;
		transform: translate(0,0); 
		-webkit-transform: translate(0,0); 
	}
	.animate{
		transition: all 1.2s ease;
		opacity: 1.0;
		transform: translate(0,0); 
		-webkit-transform: translate(0,0);
	}
}
@media screen and (max-width: 568px){ 
	#woodframe h3 span{
		position: absolute;
		right: 4%;
		top: 20px;
	}
	.intro  br{
		display: none;
	}
	.intro {
		position: static;
		padding: 0 2%;
		margin: 0 auto 20px;
	}
	.intro p {
		text-align: left;
	}
	.section-box .ttl{
		font-size: 1.2rem;
		font-size: 4.5vw;
	}
	.section-box .txt br{
		display: none;
	}
	.section-box:nth-child(odd) .txt{
		position: relative;
		top: -10px;
		line-height: 1.5;
	}
	.section-box:nth-child(even) .txt{
		position: relative;
		top: -10px;
	}
	#woodframe .color-box .flL{
		position: static;
		width: 100%;
		max-width: 375px;
		margin-top: -5px !important;
	}
	#woodframe .color-box .flR{
		position: static;
		width: 60%;
		max-width: 340px;
		margin-top: -10px !important;
	}
	#woodframe .color-box dt{
		font-size: 6.8vw;
	}
	#woodframe .color-box dt span{
		font-size: 3.2vw;
	}
	#woodframe .color-box dd br{
		display: none;
		max-width: 340px;
	}
}