@charset "utf-8";


/* style */
/* -------------------------------------------------------- */
.design-cont {padding:60px 0 0 0;}
.design-cont .txt1 {text-align:center;}
.design-cont .txt1 dt {font-size:2.9rem; letter-spacing:0.1em;}
.design-cont .txt1 dd {font-size:1.6rem; line-height:2.2; letter-spacing:0.1em; margin:1.5em 0 0 0;}
.design-cont .txt2 {margin:30px 0 0 0;}
.design-cont .txt3 {margin:10px 0 0 0;}
.design-cont .txt3 dt {font-size:1.5rem; text-align:center; padding:0 0 0.3em 0; border-bottom:solid 1px #000;}
.design-cont .txt3 dd {font-size:1.1rem; line-height:1.6; text-align:left; margin:0.5em 0 0 0;}
.design-cont .txt4 {font-size:2.8rem; font-family:'Noto Sans JP', sans-serif; font-weight:200; letter-spacing:0.3em; color:#000; padding:0 0 0.8em 0; position:relative;}
.design-cont .txt4 span {color:#9d8d54;}
.design-cont .txt4::before {content:''; width:26px; height:1px; margin:0 0 0 -13px; background-color:#998d5a; display:block; position:absolute; bottom:0; left:50%;}
.design-cont .clm1 {margin:35px -35px 0 -35px; display:flex;}
.design-cont .clm1 > div {width:25%; padding:0 35px; box-sizing:border-box;}
.design-cont .clm1 .img {position:relative;}
.design-cont .clm1 .img .tag {width:1.5em; font-size:1.8rem; line-height:1; text-align:center; color:#fff; padding:0.2em 0 0.3em 0; background-color:#00498e; display:block; position:absolute; top:0; left:0;}
.design-cont .clm1 .img .note {font-size:1.1rem; line-height:1; position:absolute; bottom:0.6em; left:0.8em;}
.design-cont .clm1 .img .note.w {color:#fff;}
.design-cont .clm2 {margin:20px 0 0 0; background:#000 url(../img/design/img_03.jpg) left center no-repeat; background-size:68% auto; position:relative; overflow:hidden;}
.design-cont .clm2 .note {font-size:1.1rem; line-height:1; color:#fff; position:absolute; bottom:0.6em; left:1.2em;}
.design-cont .clm2 .ctx {width:36%; text-align:center; color:#fff; margin:0 0 0 auto; padding:40px 2% 40px 0; box-sizing:border-box; position:relative;}
.design-cont .clm2 .ctx::before {content:''; width:200%; height:100%; background:-webkit-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 100%); background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 15%, rgba(0,0,0,1) 100%); display:block; position:absolute; top:0; left:-40%;}
.design-cont .clm2 .ctx dl {text-align:left; margin:0 auto; display:inline-block; position:relative; z-index:10;}
.design-cont .clm2 .ctx dt {font-size:2.4rem; font-family:'Noto Sans JP', sans-serif; font-weight:200; letter-spacing:0.3em;}
.design-cont .clm2 .ctx dt span {color:#9d8d54;}
.design-cont .clm2 .ctx dd {font-size:1.7rem; line-height:1.7; letter-spacing:0.1em; margin:1.0em 0 0 0;}
.design-cont .clm2 .ctx dd + dd {font-size:1.1rem; line-height:1.8; margin:0;}
.design-cont .clm3 {margin:80px 0 0 0; position:relative; z-index:1;}
.design-cont .clm3::before {content:''; width:26.0vw; height:26.0vw; background:url(../img/design/bg_01.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:-19.0vw; right:0; z-index:10;}
.design-cont .clm3 .img {margin:30px 0 0 0;}
.design-cont .clm4 {margin:60px 0 0 0; position:relative; z-index:2;}
.design-cont .clm4::before {content:''; width:26.0vw; height:26.0vw; background:url(../img/design/bg_02.png) center center no-repeat; background-size:cover; display:block; position:absolute; top:-17.0vw; left:0; z-index:10;}
.design-cont .clm4 .img {margin:30px 0 0 0; position:relative;}
.design-cont .clm4 .img .note {font-size:1.1rem; line-height:1; color:#fff; position:absolute; bottom:1.0em; left:1.2em;}
.design-cont .clm5 {margin:60px 0 0 0; position:relative; z-index:1;}
.design-cont .clm5 .img {margin:30px 0 0 0;}
.design-cont .clm5 .img .note {font-size:1.1rem; line-height:1; position:absolute; bottom:1.0em; left:1.2em;}

@media screen and (max-width:1100px){
	.design-cont .clm2 {background-position:left center; background-size:auto 100%;}
}
@media screen and (max-width:1000px){
	.design-cont {padding:30px 0 0 0;}
	.design-cont .txt1 dt {font-size:2.0rem;}
	.design-cont .txt1 dd {font-size:1.3rem;}
	.design-cont .txt2 {margin:20px -5.0vw 0 -5.0vw;}
	.design-cont .txt3 {margin:5px 0 0 0;}
	.design-cont .txt3 dt {font-size:1.2rem;}
	.design-cont .txt3 dd {font-size:1.0rem;}
	.design-cont .txt4 {font-size:2.2rem;}
	.design-cont .clm1 {margin:0 -15px; display:flex; flex-wrap:wrap;}
	.design-cont .clm1 > div {width:50%; margin:30px 0 0 0; padding:0 15px;}
	.design-cont .clm1 .img {max-width:300px; margin:0 auto;}
	.design-cont .clm1 .img .tag {font-size:1.5rem;}
	.design-cont .clm1 .img .note {font-size:1.0rem;}
	.design-cont .clm2 {margin:30px -6.0vw 0 -6.0vw; padding:53.4vw 0 0 0; background-position:center top; background-size:100% auto;}
	.design-cont .clm2 .note {font-size:1.0rem; bottom:auto; top:49.0vw;}
	.design-cont .clm2 .ctx {width:auto; margin:0; padding:10px 6.0vw 20px 6.0vw;}
	.design-cont .clm2 .ctx::before {display:none;}
	.design-cont .clm2 .ctx dl {position:relative; z-index:10;}
	.design-cont .clm2 .ctx dt {font-size:2.2rem;}
	.design-cont .clm2 .ctx dd {font-size:1.6rem; margin:0.6em 0 0 0;}
	.design-cont .clm2 .ctx dd + dd {font-size:1.1rem;}
	.design-cont .clm3 {margin:30px 0 0 0;}
	.design-cont .clm3 .sec {padding:0;}
	.design-cont .clm3 .img {margin:15px 0 0 0;}
	.design-cont .clm4 {margin:30px 0 0 0;}
	.design-cont .clm4 .img {margin:15px 0 0 0;}
	.design-cont .clm4 .img .note {font-size:1.0rem;}
	.design-cont .clm5 {margin:30px 0 0 0;}
	.design-cont .clm5 .img {margin:15px 0 0 0;}
	.design-cont .clm5 .img .note {font-size:1.0rem;}
}