@charset "utf-8";

/* style */
/* -------------------------------------------------------- */
.design-sec1 {padding:15px 0 960px 0; background:url(../img/design/img_01.jpg) no-repeat center bottom; background-size:cover;}
.design-sec1 .sec {max-width:100%; padding:0 15px;}
.design-sec1 .txt1 {max-width:1755px;}
.design-sec1 .txt2 {text-align:left;}
.design-sec1 .txt2 dt {font-size:4.5rem; line-height:2.1; letter-spacing:0.1em;}
.design-sec1 .txt2 dd {font-size:1.4rem; line-height:3.1; margin:2.0em 0 0 0;}

.design-sec2 .box1 {padding:100px 0 140px 0;}
.design-sec2 .box2 {padding:100px 0 90px 0; background:url(../img/design/img_03.jpg) no-repeat center center; background-size:cover;}
.design-sec2 .box2 .sec {max-width:900px; padding:0 15px;}
.design-sec2 .box2 .clm {display:flex;}
.design-sec2 .box2 .clm > div:nth-of-type(1) {width:57%; padding:0 5px 0 0; box-sizing:border-box;}
.design-sec2 .box2 .clm > div:nth-of-type(2) {width:43%;}
.design-sec2 .box3 .sec {max-width:1180px; padding:0 15px;}
.design-sec2 .box3 .clm {display:flex; justify-content:space-between;}
.design-sec2 .box3 .clm > div:nth-of-type(1) {width:44%;}
.design-sec2 .box3 .clm > div:nth-of-type(2) {width:52%;}
.design-sec2 .box4 {margin:80px 0 0 0; padding:0 0 400px 0; position:relative;}
.design-sec2 .box4 .sec {max-width:1210px; padding:0 15px; position:relative; z-index:5;}
.design-sec2 .box4 .img {max-width:1350px; width:100%; position:absolute; bottom:0; right:0;}
.design-sec2 .box4 .ctx {max-width:420px;}
.design-sec2 .clm1 {display:flex; justify-content:space-between;}
.design-sec2 .clm1 > div:nth-of-type(1) {width:53%;}
.design-sec2 .clm1 > div:nth-of-type(2) {width:44%;}
.design-sec2 .clm2 {margin:0 -20px; display:flex;}
.design-sec2 .clm2 > div {width:33.33%; padding:35px 20px 0 20px; box-sizing:border-box;}
.design-sec2 .clm3 {margin:20px 0 0 0; display:flex; justify-content:space-between;}
.design-sec2 .clm3 > div:nth-of-type(1) {width:56%;}
.design-sec2 .clm3 > div:nth-of-type(2) {width:42%;}
.design-sec2 .txt2 {text-align:center; margin:130px 0 0 0;}
.design-sec2 .txt2 dt {font-size:3.0rem; font-weight:400; line-height:1.9; letter-spacing:0.1em;}
.design-sec2 .txt2 dd {font-size:1.6rem; font-weight:400; line-height:2.7; margin:2.0em 0 0 0;}
.design-sec2 .txt3 {text-align:left; color:#fff; margin:15px 0 0 0; position:relative;}
.design-sec2 .txt3 dt {font-size:2.1rem; line-height:1.7; letter-spacing:0.1em;}
.design-sec2 .txt3 dd {font-size:1.4rem; font-weight:400; line-height:1.7; margin:1.0em 38% 0 0;}
.design-sec2 .txt3 dd.img {width:36%; margin:0; position:absolute; bottom:0; right:0;}
.design-sec2 .txt4 {text-align:left; position:relative;}
.design-sec2 .txt4 dt {font-size:1.8rem; font-weight:400; line-height:1.4; letter-spacing:0.1em;}
.design-sec2 .txt4 dd {font-size:1.4rem; font-weight:400; line-height:1.7; margin:0.5em 0 0 0;}
.design-sec2 .txt4.num3 .num {width:27.6%; display:block; position:absolute; top:-5%; right:-10%;}
.design-sec2 .txt4.num5 dt {position:relative;}
.design-sec2 .txt4.num5 .num {width:13.8%; display:block; position:absolute; bottom:0; left:11em;}
.design-sec2 .txt4 + .txt4 {margin:15px 0 0 0;}
.design-sec2 .txt5 {text-align:left;}
.design-sec2 .txt5 dt {font-size:1.7rem; font-weight:400; line-height:1.4; letter-spacing:0.1em; padding:0 0 1.0em 0; border-bottom:solid 1px #000;}
.design-sec2 .txt5 dt span {font-size:153%; color:#db7900;}
.design-sec2 .txt5 dd {font-size:1.4rem; font-weight:400; line-height:1.7; margin:1.0em 0 0 0;}
.design-sec2 .txt5 + .txt5 {margin:50px 0 0 0;}
.design-sec2 .img1 img {width:100%;}
.design-sec2 .img2 {position:relative;}
.design-sec2 .img2::before {content:'image'; font-size:1.2rem; line-height:1; letter-spacing:0.1em; color:#fff; display:block; position:absolute; bottom:0.3em; right:0.3em;}
.design-sec2 .img3 + .img3 {margin:5px 0 0 0;}
.design-sec2 .img4 {position:relative;}
.design-sec2 .img4::before {content:'image'; font-size:0.9rem; letter-spacing:0.1em; line-height:1; position:absolute;}
.design-sec2 .img4 .num {width:27.6%; display:block; position:absolute;}
.design-sec2 .img4.num1 .num {width:15.6%; top:-19%; right:0;}
.design-sec2 .img4.num1::before {bottom:-1.5em; left:0;}
.design-sec2 .img4.num2 .num {bottom:-13%; right:6%;}
.design-sec2 .img4.num2::before {bottom:-1.5em; left:0;}
.design-sec2 .img4.num4 .num {bottom:-13%; right:6%;}
.design-sec2 .img4.num4::before {bottom:-1.5em; left:0;}
.design-sec2 .img4.num6 .num {bottom:-13%; left:4%;}
.design-sec2 .img4.num6::before {color:#fff; bottom:0.5em; right:5%;}
.design-sec2 .img4.num7 .num {top:-13%; left:4%;}
.design-sec2 .img4.num7::before {bottom:0.5em; right:5%;}
.design-sec2 .img4.num8 .num {bottom:-13%; left:4%;}
.design-sec2 .img4.num8::before {color:#fff; bottom:0.5em; right:5%;}
.design-sec2 .img4 + .txt4 {margin:35px 0 0 0;}
.design-sec2 .img5 {margin:10px -7px 0 -7px; display:flex; flex-wrap:wrap;}
.design-sec2 .img5 > div {width:20%; padding:10px 7px 0 7px; box-sizing:border-box;}
.design-sec2 .img5 .cap {font-size:1.0rem; line-height:1.4; text-align:left; margin:0.5em 0 0 0;}
.design-sec2 .img5 .txt {width:100%; padding:100% 0 0 0; position:relative;}
.design-sec2 .img5 .txt span {font-size:0.9rem; line-height:1; position:absolute; bottom:0; left:0;}

@media screen and (max-width:1100px){
	.design-sec2 .box4 .ctx {width:49.4%;}
}

@media screen and (max-width:1194px){
    .design-sec1 {padding:20.0vw 0 113.0vw 0; background-image:url(../img/design/img_01_sp.jpg); background-size:100% auto;}
    .design-sec1 .sec { padding:0 6.0vw;}
    .design-sec1 .txt1 {max-width:100%;}
    .design-sec1 .txt2 dt {font-size:3.2rem; line-height:1.7; margin:40px 0 0 0;}
    .design-sec1 .txt2 dd {font-size:1.5rem; line-height:2.4;}

    .design-sec2 .box1 {padding:70px 0;}
    .design-sec2 .box2 {padding:38px 0;}
    .design-sec2 .box2 .sec {max-width:100%; padding:0 6.0vw;}
    .design-sec2 .box2 .clm {display:block;}
    .design-sec2 .box2 .clm > div:nth-of-type(1) {width:auto; padding:0;}
    .design-sec2 .box2 .clm > div:nth-of-type(2) {width:auto; margin:25px 0 0 0;}
    .design-sec2 .box3 .sec {max-width:100%; padding:0 7.0vw;}
    .design-sec2 .box3 .clm {display:block;}
    .design-sec2 .box3 .clm > div:nth-of-type(1) {width:74.0vw; margin:0 auto;}
    .design-sec2 .box3 .clm > div:nth-of-type(2) {width:auto; margin:100px 0 0 0;}
    .design-sec2 .box4 {margin:140px 0 0 0; padding:0;}
    .design-sec2 .box4 .sec {max-width:100%; padding:0 6.0vw;}
    .design-sec2 .box4 .img {max-width:100%; width:100%; margin:20px 0 0 0; position:static;}
    .design-sec2 .box4 .ctx {max-width:100%; width:100%;}
    .design-sec2 .clm2 {margin:0 -2.0vw;}
    .design-sec2 .clm2 > div {width:33.33%; padding:45px 2.0vw 0 2.0vw;}
    .design-sec2 .clm3 {margin:80px 0 0 0;}
    .design-sec2 .txt2 dt {font-size:2.0rem; line-height:2.2; margin:0 -6.0vw;}
    .design-sec2 .txt2 dd {font-size:1.5rem; line-height:2.4;}
    .design-sec2 .txt3 {margin:25px 0 0 0;}
    .design-sec2 .txt3 dt {font-size:2.0rem; line-height:2.2;}
    .design-sec2 .txt3 dd {font-size:1.4rem; margin:1.0em 35% 0 0;}
    .design-sec2 .txt3 dd.img {width:33%; margin:0; position:absolute; bottom:0; right:0;}
    .design-sec2 .txt4 dt {font-size:1.4rem;}
    .design-sec2 .txt4 dd {font-size:1.4rem; line-height:1.6;}
    .design-sec2 .txt4 + .txt4 {margin:10px 0 0 0;}
    .design-sec2 .txt5 dt {font-size:1.9rem;}
    .design-sec2 .txt5 dd {font-size:1.5rem;}
    .design-sec2 .txt5 + .txt5 {margin:30px 0 0 0;}
    .design-sec2 .img2::before {font-size:1.3rem; transform:scale3d(0.7,0.7,1);}
    .design-sec2 .img3 {max-width:50.0vw; margin:0 auto;}
    .design-sec2 .img3 + .img3 {margin:5px auto 0 auto;}
    .design-sec2 .img4::before {font-size:1.3rem; transform:scale3d(0.7,0.7,1);}
    .design-sec2 .img4 + .txt4 {margin:35px 0 0 0;}
    .design-sec2 .img5 {margin:10px -1.0vw 0 -1.0vw;}
    .design-sec2 .img5 > div {padding:10px 1.0vw 0 1.0vw;}
    .design-sec2 .img5 .cap {font-size:1.4rem; margin:0; transform-origin:left top; transform:scale3d(0.8,0.8,1);}
    .design-sec2 .img5 .txt span {font-size:1.3rem; transform-origin:left bottom; transform:scale3d(0.7,0.7,1);}
}


@media screen and (max-width:767px){
	.design-sec1 {padding:20.0vw 0 113.0vw 0; background-image:url(../img/design/img_01_sp.jpg); background-size:100% auto;}
	.design-sec1 .sec { padding:0 6.0vw;}
	.design-sec1 .txt1 {max-width:100%;}
	.design-sec1 .txt2 dt {font-size:2.8rem; line-height:1.7; margin:40px 0 0 0;}
	.design-sec1 .txt2 dd {font-size:1.1rem; line-height:2.4;}

	.design-sec2 .box1 {padding:70px 0;}
	.design-sec2 .box2 {padding:38px 0;}
	.design-sec2 .box2 .sec {max-width:100%; padding:0 6.0vw;}
	.design-sec2 .box2 .clm {display:block;}
	.design-sec2 .box2 .clm > div:nth-of-type(1) {width:auto; padding:0;}
	.design-sec2 .box2 .clm > div:nth-of-type(2) {width:auto; margin:25px 0 0 0;}
	.design-sec2 .box3 .sec {max-width:100%; padding:0 6.0vw;}
	.design-sec2 .box3 .clm {display:block;}
	.design-sec2 .box3 .clm > div:nth-of-type(1) {width:74.0vw; margin:0 auto;}
	.design-sec2 .box3 .clm > div:nth-of-type(2) {width:auto; margin:100px 0 0 0;}
	.design-sec2 .box4 {margin:40px 0 0 0; padding:0;}
	.design-sec2 .box4 .sec {max-width:100%; padding:0 6.0vw;}
	.design-sec2 .box4 .img {max-width:100%; width:100%; margin:20px 0 0 0; position:static;}
	.design-sec2 .box4 .ctx {max-width:100%; width:100%;}
	.design-sec2 .clm2 {margin:0 -2.0vw;}
	.design-sec2 .clm2 > div {width:33.33%; padding:25px 2.0vw 0 2.0vw;}
	.design-sec2 .clm3 {margin:15px 0 0 0;}
	.design-sec2 .txt2 dt {font-size:1.6rem; line-height:2.2; margin:0 -6.0vw;}
	.design-sec2 .txt2 dd {font-size:1.1rem; line-height:2.4;}
	.design-sec2 .txt3 {margin:25px 0 0 0;}
	.design-sec2 .txt3 dt {font-size:1.6rem; line-height:2.2;}
	.design-sec2 .txt3 dd {font-size:1.0rem; margin:1.0em 35% 0 0;}
	.design-sec2 .txt3 dd.img {width:33%; margin:0; position:absolute; bottom:0; right:0;}
	.design-sec2 .txt4 dt {font-size:1.0rem;}
	.design-sec2 .txt4 dd {font-size:1.0rem; line-height:1.6;}
	.design-sec2 .txt4 + .txt4 {margin:10px 0 0 0;}
	.design-sec2 .txt5 dt {font-size:1.5rem;}
	.design-sec2 .txt5 dd {font-size:1.1rem;}
	.design-sec2 .txt5 + .txt5 {margin:30px 0 0 0;}
	.design-sec2 .img2::before {font-size:0.9rem; transform:scale3d(0.7,0.7,1);}
	.design-sec2 .img3 {max-width:50.0vw; margin:0 auto;}
	.design-sec2 .img3 + .img3 {margin:5px auto 0 auto;}
	.design-sec2 .img4::before {font-size:0.9rem; transform:scale3d(0.7,0.7,1);}
	.design-sec2 .img4 + .txt4 {margin:15px 0 0 0;}
	.design-sec2 .img5 {margin:10px -1.0vw 0 -1.0vw;}
	.design-sec2 .img5 > div {padding:10px 1.0vw 0 1.0vw;}
	.design-sec2 .img5 .cap {font-size:1.0rem; margin:0; transform-origin:left top; transform:scale3d(0.8,0.8,1);}
	.design-sec2 .img5 .txt span {font-size:0.9rem; transform-origin:left bottom; transform:scale3d(0.7,0.7,1);}
}