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


/*PC*/
@media screen and (min-width: 1680px) {

.header { background: url("../images/service/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { width: 1536px; margin: auto; padding: 100px 0 150px;}
.contents .inner .cont01 { margin: 0 20px 100px;}
.contents .inner .cont01 ul { display: flex; flex-direction: column; gap: 50px; counter-reset: number 0;}
.contents .inner .cont01 ul li { display: flex; flex-direction: row-reverse; padding: 0 0 0 100px; gap: 60px; position: relative;}
.contents .inner .cont01 ul li:before { counter-increment: number 01; content: counter(number, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: "Bebas Neue", sans-serif; font-size: 100px; line-height: 1; color: var(--color01_10); font-weight: 400;}

.contents .inner .cont01 ul li .img	{ width: 770px;}
.contents .inner .cont01 ul li .img	img {}
.contents .inner .cont01 ul li .txt { width: calc(100% - 770px - 100px);}
.contents .inner .cont01 ul li .txt .ttl { margin: 0 0 20px;}
.contents .inner .cont01 ul li .txt .ttl h2 { font-size: 30px; margin: 0 0 20px;}
.contents .inner .cont01 ul li .txt .ttl p { font-size: 16px; font-weight: 900; color: var(--color01_10); margin: 0 0 5px;}
.contents .inner .cont01 ul li .txt > p { font-size: 18px;}



}


@media print, screen and (min-width: 768px) and ( max-width: 1679px) {

.header { background: url("../images/service/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { width: 91.4286vw; margin: auto; padding: 5.9524vw 0 8.9286vw;}
.contents .inner .cont01 { margin: 0 1.1905vw 5.9524vw;}
.contents .inner .cont01 ul { display: flex; flex-direction: column; gap: 2.9762vw; counter-reset: number 0;}
.contents .inner .cont01 ul li { display: flex; flex-direction: row-reverse; padding: 0 0 0 5.9524vw; gap: 3.5714vw; position: relative;}
.contents .inner .cont01 ul li:before { counter-increment: number 01; content: counter(number, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: "Bebas Neue", sans-serif; font-size: 5.9524vw; line-height: 1; color: var(--color01_10); font-weight: 400;}

.contents .inner .cont01 ul li .img	{ width: 45.8333vw;}
.contents .inner .cont01 ul li .img	img {}
.contents .inner .cont01 ul li .txt { width: calc(100% - 45.8333vw - 5.9524vw);}
.contents .inner .cont01 ul li .txt .ttl { margin: 0 0 1.1905vw;}
.contents .inner .cont01 ul li .txt .ttl h2 { font-size: 1.7857vw; margin: 0 0 1.1905vw;}
.contents .inner .cont01 ul li .txt .ttl p { font-size: 0.9524vw; font-weight: 900; color: var(--color01_10); margin: 0 0 0.2976vw;}
.contents .inner .cont01 ul li .txt > p { font-size: 1.0714vw;}



}



/*sp*/
@media only screen and (max-width: 767px) {

.header { background: url("../images/service/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { max-width: 240.0000vw; margin: auto; padding: 15.6250vw 4.6875vw 23.4375vw;}
.contents .inner .cont01 { margin: 0 0 15.6250vw;}
.contents .inner .cont01 ul { display: flex; flex-direction: column; gap: 9.3750vw; counter-reset: number 0;}
.contents .inner .cont01 ul li { display: flex; flex-direction: column; padding: 0 0 0 0; gap: 4.6875vw; position: relative;}
.contents .inner .cont01 ul li:before { counter-increment: number 01; content: counter(number, decimal-leading-zero); position: absolute; bottom: -4.6875vw; right: 0; font-family: "Bebas Neue", sans-serif; font-size: 31.2500vw; line-height: 1; color: var(--color01_06); font-weight: 400;}

.contents .inner .cont01 ul li .img	{ max-width: 120.3125vw;}
.contents .inner .cont01 ul li .img	img {}
.contents .inner .cont01 ul li .txt { /*width: calc(100% - 120.3125vw - 15.6250vw);*/ position: relative;}
.contents .inner .cont01 ul li .txt .ttl { margin: 0 0 3.1250vw;}
.contents .inner .cont01 ul li .txt .ttl h2 { font-size: 4.6875vw; margin: 0 0 1.5625vw;}
.contents .inner .cont01 ul li .txt .ttl p { font-size: 2.5000vw; font-weight: 900; color: var(--color01_10); margin: 0 0 0.7813vw;}
.contents .inner .cont01 ul li .txt > p { font-size: 2.8125vw;}



}




@media screen and (width: 640px) {

.header { background: url("../images/service/hedImg.jpg") center center no-repeat; background-size: cover;}


.contents {}
.contents .inner { max-width: 1536px; margin: auto; padding: 100px 30px 150px;}
.contents .inner .cont01 { margin: 0 0 100px;}
.contents .inner .cont01 ul { display: flex; flex-direction: column; gap: 60px; counter-reset: number 0;}
.contents .inner .cont01 ul li { display: flex; flex-direction: column; padding: 0 0 0 0; gap: 30px; position: relative;}
.contents .inner .cont01 ul li:before { counter-increment: number 01; content: counter(number, decimal-leading-zero); position: absolute; bottom: -30px; right: 0; font-family: "Bebas Neue", sans-serif; font-size: 200px; line-height: 1; color: var(--color01_06); font-weight: 400;}

.contents .inner .cont01 ul li .img	{ max-width: 770px;}
.contents .inner .cont01 ul li .img	img {}
.contents .inner .cont01 ul li .txt { /*width: calc(100% - 770px - 100px);*/ position: relative;}
.contents .inner .cont01 ul li .txt .ttl { margin: 0 0 20px;}
.contents .inner .cont01 ul li .txt .ttl h2 { font-size: 30px; margin: 0 0 10px;}
.contents .inner .cont01 ul li .txt .ttl p { font-size: 16px; font-weight: 900; color: var(--color01_10); margin: 0 0 5px;}
.contents .inner .cont01 ul li .txt > p { font-size: 18px;}



}