/* PageTitleArea */
.page_ttl_area { position:relative; top:0; left:0; width:100%; height:auto; padding-top:90px; }
.page_ttl_wrap { position:relative; width:80%; left:10%; }
.page_ttl_img { position:relative; background:#fff; width:100%; height:100%; padding-top: 90%; left:50%; transform:translateX(-50%); overflow: hidden; }
.page_ttl_img img { position:absolute; width:auto; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); transform-origin:-5% -5%; animation: phFade .8s ease-in forwards; }
.page_ttl_txt { position:relative; top:-30px; color:#5c7471; animation: fadeUp .6s ease-in forwards; }
.page_ttl_txt h1 { font-size:6.4rem; letter-spacing:4px; line-height:80%; text-align:center; }
.page_ttl_txt h3 { font-size:1.5rem; text-align:center; letter-spacing:2px; }
.page_ttl_txt p { font-size:1.2rem; letter-spacing:1px; line-height:200%; margin-top:20px; }



/* ServiceContents */
.service_contents { position:relative; width:100%; padding-top:60px; }

.phase1, .phase2, .phase3 { position:relative; width:100%; color:#5c7471; }

.svc_ttl_wrap { position:relative; width:100%; height:auto; }

.svc_img { position:relative; width:100%; padding-top:70%; overflow: hidden; }
.svc_img img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:auto; height:100%; }
.svc_ttl { position:relative; width:80%; left:10%; top:-80px; background: #fff; padding:30px 30px 0px 30px; margin-bottom:-80px; }
.svc_ttl_icon { position:relative; width:120px; height:60px; top:0; left:50%; transform:translateX(-50%); }
.svc_ttl_icon img { position:absolute; height:100%; top:0; left:50%; transform:translateX(-50%); }
.svc_ttl h2 { font-size:2rem; text-align:center; letter-spacing:1px; margin:20px 0; }
.svc_ttl p { font-size:1.3rem; line-height:180%; }

.svc_list { position:relative; width:80%; left:10%; margin-top:40px; border-top:1px solid #ccc; margin-bottom:80px; }
.svc_list_ttl h4 { position:relative; top:5px; left:0; font-size:1.6rem; display:inline-block; }
.svc_list_ttl h4::before { position:absolute; content:''; top:-5px; left:0; width:100%; height:4px; background:#5c7471; }
.svc_list_inner { position:relative; width:100%; padding:10px 0 30px 0;
border-bottom:1px solid #ccc; display:flex; flex-wrap:wrap;}
.svc_list_inner h4 { position:relative; font-size:1.3rem; top:10px; left:0; width:100%; text-align:right; margin-bottom:15px; }
.svc_list_inner:nth-of-type(2) { padding-top:0; }
.svc_list_inner:last-child { border-bottom:none; }
.svc_list_icon { position:relative; width:80px; }
.svc_list_icon img { width:100%; position:absolute; top:50%; left:0; transform:translateY(-50%); }
.svc_list_txt { position:relative; width:calc(100% - 80px); padding-left:20px; }
.svc_list_txt h3 { font-size:1.4rem; }
.svc_list_txt p { font-size:1.1rem; line-height:160%; margin:0; }

/* OtherService */
.other_service { position:relative; width:100%; background:#f0f0f0; padding:60px 0; color:#5c7471; }
.other_service h2 { font-size:3rem; letter-spacing:2px; line-height:100%; position:relative; width:80%; left:10%; text-align:center; }
.other_box { position:relative; width:80%; left:10%; margin-top:20px; }
.other_txt { position:relative; margin:0; background:#fff; padding:30px; }
.other_txt h3 { font-size:1.6rem; text-align:center; margin:0; margin-bottom:10px; }
.other_txt p { font-size:1.3rem; line-height:180%; }
.other_ph { position:relative; width:100%; padding-top:70%; margin:0; overflow: hidden; }
.other_ph img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:auto; height:100%; }


/* NextContentsBnr */
.next_cont {position:relative; width:100%; height:140px; }
.next_cont_wrap { position:relative; width:80%; left:10%; top:50%; transform:translateY(-50%); display:flex; flex-wrap:nowrap; color:#5c7471; }
.next_cont_ttl { position:relative; width:40%; }
.next_cont_ttl h5 { font-size:1rem; display:inline-block; position:relative; top:calc(50% - 5px); transform:translateY(-50%); }
.next_cont_ttl h5::after { content:''; position:absolute; width:100%; height:1px; bottom:-4px; left:0; background: #5c7471; }
.next_cont_inner { position:relative; width:60%; height:auto; display:flex; flex-wrap:nowrap; align-items: center; transition:all .3s ease; }
.next_cont_inner a { position:absolute; width:100%; height:100%; top:0; left:0; }
.next_cont_txt { position:relative; width:calc(100% - 32px); transition:all .3s ease; }
.next_cont_txt h2 { font-size:2rem; line-height:80%; }
.next_cont_arw { position:relative; width:32px; height:32px; border:1px solid #5c7471; border-radius:100%; margin:0; transition:all .3s ease; }
.next_cont_arw::after { content:''; position:absolute; width:6px; height:6px; border-top:1px solid; border-right:1px solid; border-color:#5c7471; top:12px; ; left:11px; transform:rotate(45deg); transform-origin:center; transition:all .3s ease; }
.next_cont_inner:hover .next_cont_arw { background:#5c7471; }
.next_cont_inner:hover .next_cont_arw::after { border-color:#fff; left:12px; }
.next_cont_inner:hover .next_cont_txt { opacity:0.6; }




/* Brakepoints */
@media screen and (min-width:360px) {
    .page_ttl_txt p { margin-top:30px; }

}
@media screen and (min-width:410px) {
    .page_ttl_txt p { margin-top:40px; line-height:250%; }
    .service_contents { padding-top:120px; }
    .svc_list { margin-top:60px; }
}

@media screen and (min-width:760px) {
    .sp-on { display:none !important; }
    .tab-on { display:block !important; }
    .pc-on { display:none; }
    
    .page_ttl_wrap { display:flex; flex-direction: row-reverse; align-items: center; padding:60px 0; }
    .page_ttl_txt { top:0; width:50%;  }
    .page_ttl_img { width:50%; left:0; padding-top:50%; transform:none; }
    .page_ttl_txt h1 { font-size:6rem; text-align:left; }
    .page_ttl_txt h3 { font-size:1.6rem; text-align:left; }
    .page_ttl_txt p { font-size:1.3rem; line-height:200%; margin-top:20px; }
    
    .svc_img { width:60%; padding-top:50%; }
    .svc_ttl { width:50%; left:50%; position:absolute; top:auto; bottom:0; margin-bottom:0; padding:40px 10% 0px 40px; }
    .svc_list { margin-top:60px; display:flex; flex-wrap:wrap; margin-bottom:120px; }
    .svc_list_ttl { width:100%; position:absolute; }
    .svc_list_inner { width:33.3%; display:block; padding-top:40px;}
    .svc_list_inner:nth-of-type(2),.svc_list_inner:nth-of-type(5) { padding-top:40px; border-right:1px solid #ccc; }
    .svc_list_inner:nth-of-type(4), .svc_list_inner:nth-of-type(7) { border-left:1px solid #ccc; }
    .svc_list_inner:last-child { border-bottom:1px solid #ccc; }
    .svc_list_inner h4 { position:absolute; text-align:left; top:40px; left:20px; }
    .svc_list_icon { width:100%; height:80px; }
    .svc_list_icon img { width:auto; height:100%; top:0; left:50%; transform:translateX(-50%); }
    .svc_list_txt { width:100%; padding:0 20px; margin-top:20px; }
    .svc_list_txt h3 { width:100%; height:46px; text-align:center; 
    display: flex; align-items: center; justify-content: center; }
    .phase2 .svc_img { left:40%; }
    .phase2 .svc_ttl { left:0; padding:40px 40px 0px 10%; }
    .phase3 .svc_list_inner { width:50%; }
    
    .other_service { padding:80px 0; }
    .other_service h2 { font-size:4rem; }
    .other_box { display:flex; flex-wrap:nowrap; }
    .other_txt, .other_ph { width:50%; }
    .other_txt { padding:40px; }
    .other_txt_wrap { position:relative; top:50%; transform:translateY(-50%); }
    .other_ph { padding-top:50%; }

    .next_cont { height:180px; }
    .next_cont_ttl { width:50%; }
    .next_cont_inner { width:50%; }
    .next_cont_ttl h5::after { top:50%; bottom:auto; left:110%; }
    .next_cont_txt h2 { font-size:3.6rem; letter-spacing:2px; }
    .next_cont_txt h3 { font-size:1.3rem; }
    .next_cont_txt { width:calc(100% - 46px); }
    .next_cont_arw { width:46px; height:46px; }
    .next_cont_arw::after { width:8px; height:8px; top:17px; left:15px; }
    .next_cont_inner:hover .next_cont_arw::after { left:18px; }

}

@media screen and (min-width:1080px) {
    .sp-on { display:none !important; }
    .tab-on { display:none !important; }
    .pc-on { display:block !important; }
    
    .page_ttl_txt h1 { font-size:8rem; letter-spacing:8px; }
    .page_ttl_txt h3 { font-size:2rem; }
    .page_ttl_txt p { font-size:1.4rem; margin-top:40px; }
    
    .svc_img { padding-top:40%; }
    .svc_ttl { padding:60px 10% 0px 60px; }
    .phase2 .svc_ttl { padding: 60px 60px 0px 10%; }
    .svc_ttl h2 { font-size:2.4rem; }
    .svc_ttl p { font-size:1.4rem; }
    .svc_list { margin-top:80px; margin-bottom:160px; }
    .svc_list_ttl h4 { font-size:2rem; }
    .svc_list_inner { padding-top:60px; padding-bottom:60px; }
    .svc_list_inner:nth-of-type(2), .svc_list_inner:nth-of-type(5) { padding-top:60px; }
    .svc_list_icon { height:120px; }
    .svc_list_inner h4 { top:60px; font-size:1.8rem; left:40px; }
    .svc_list_txt { padding:0 40px; }
    .svc_list_txt h3 { font-size:1.8rem; height:56px; }
    .svc_list_txt p { font-size:1.3rem; line-height:180%; }
    
    .other_service { padding-bottom:120px; }
    .other_service h2 { font-size:4.6rem; text-align:left; }
    .other_ph { padding-top:40%; }
    .other_txt h3 { font-size:2.2rem; margin-bottom:20px; }
    .other_txt p { font-size:1.4rem; }

    .next_cont { height:220px; }
    .next_cont_ttl h5 { font-size:1.2rem; }
    .next_cont_ttl { width:60%; }
    .next_cont_inner { width:40%; }
    .next_cont_txt h2 { font-size:4.2rem; }
    .next_cont_txt h3 { font-size:1.6rem; }
    .next_cont_txt { width:calc(100% - 60px); }
    .next_cont_arw { width:60px; height:60px; }
    .next_cont_arw::after { width:12px; height:12px; top:22px; left:20px; }
    .next_cont_inner:hover .next_cont_arw::after { left:24px; }
}

@media screen and (min-width:1280px) {
    .page_ttl_area { padding-top:100px; }
    .page_ttl_wrap { padding:50px 0; }
    .page_ttl_txt h1 { font-size:10rem; }
    .page_ttl_txt h3 { font-size:2rem; }
    .page_ttl_txt p { font-size:1.6rem; }
    
    .svc_img { width:70%; padding-top:45%; } 
    .svc_ttl { width:40%; left:60%; padding:80px 10% 0px 60px; }
    .svc_img img { height:110%; }
    .phase2 .svc_img { left:30%; }
    .phase2 .svc_ttl { left:0; padding:80px 60px 0px 10%; }
    .svc_ttl_icon { width:180px; height:80px; }
    .svc_list_ttl h4 { font-size:2.4rem; }
    .svc_ttl h2 { font-size:2.8rem; }
    .svc_ttl p { font-size:1.6rem; }
    .svc_list_txt p { font-size:1.4rem; }
    .svc_list_inner h4 { top:80px; font-size:2rem; }
    .svc_list_txt h3 { font-size:2rem; height:64px; margin-bottom:10px; }
    .svc_list { margin-top:120px; margin-bottom:200px; }
    .other_service { padding:120px 0 160px 0; }
    .other_service h2 { font-size:6rem; }
    .other_txt h3 { font-size:2.4rem; letter-spacing:2px; }
    .other_txt p { font-size:1.6rem; }
}

@media screen and (min-width:1920px) {
    .page_ttl_wrap { padding:80px 0; }
    .page_ttl_txt h1 { font-size:12rem; }
    .page_ttl_txt h3 { font-size:2.8rem; }
    .page_ttl_txt p { font-size:2rem; margin-top:40px; }
    
    .service_contents { padding-top:180px; }
    .svc_img { padding-top:40%; }
    .svc_ttl_icon { width:240px; height:120px; }
    .svc_ttl h2 { font-size:4.2rem; margin:40px 0; }
    .svc_ttl p { font-size:2rem; }
    .svc_ttl { padding:100px 10% 0px 100px; }
    .phase2 .svc_ttl { padding:100px 100px 0px 10%; }
    
    .svc_list_inner { padding:120px 0; }
    .svc_list_inner:nth-of-type(2), .svc_list_inner:nth-of-type(5) { padding-top:120px; }
    .svc_list_ttl h4 { font-size:3.2rem; }
    .svc_list_icon { height:180px; }
    .svc_list_txt { padding:0 60px; }
    .svc_list_inner h4 { top:100px; left:60px; font-size:2.4rem; }
    .svc_list_txt h3 { font-size:2.4rem; height:80px; }
    .svc_list_txt p { font-size:1.8rem; }
    
    .other_service { padding-top:180px; padding-bottom:200px; }
    .other_service h2 { font-size:8rem; margin-bottom:40px; }
    .other_ph { padding-top:35%; }
    .other_ph img { height:110%; }
    .other_txt h3 { font-size:3.6rem; }
    .other_txt p { font-size:2rem; }
    .other_txt { padding:80px; }

    .next_cont_txt h2 { font-size:4.8rem; }
    .next_cont_txt h3 { font-size:2rem; }
    .next_cont { height:240px; }
}

@media screen and (min-width:2560px) {
    .page_ttl_wrap { padding:120px 0; }
    .page_ttl_txt h1 { font-size:20rem; }
    .page_ttl_txt h3 { font-size:4.2rem; }
    .page_ttl_txt p { font-size:2.4rem; margin-top:60px; line-height:240%; }
    
    .service_contents { padding-top:240px; }
    .svc_ttl { width:45%; left:55%; padding:100px 15% 0px 100px; }
    .phase2 .svc_ttl { left:0; padding:100px 100px 0px 15%; }
    .svc_img img { height:120%; }
    .svc_ttl_icon { height:160px; }
    .svc_ttl h2 { font-size:6rem; margin:60px 0; }
    .svc_ttl p { font-size:2.4rem; }
    
    .svc_list { width:70%; left:15%; margin-top:180px; margin-bottom:320px; }
    .svc_list_ttl h4 { font-size:4.6rem; }
    .svc_list_icon { height:240px; }
    .svc_list_txt { padding:0 80px; }
    .svc_list_inner h4 { top:120px; left:80px; font-size:3.6rem; }
    .svc_list_txt h3 { font-size:3.6rem; height:120px; margin-bottom:20px; }
    .svc_list_txt p { font-size:2.2rem; }
    
    .other_service { padding-top:240px; padding-bottom:320px; }
    .other_service h2 { width:70%; left:15%; font-size:10rem; }
    .other_box { width:70%; left:15%; }
    .other_ph { padding-top:33%; }
    .other_ph img { height:120%; }
    .other_txt h3 { font-size:4.2rem; margin-bottom:40px; }
    .other_txt p { font-size:2.4rem; }
    .other_txt { padding:120px; }

    .next_cont { height:320px; }
    .next_cont_wrap { width:70%; left:15%; }
    .next_cont_ttl h5 { font-size:1.8rem; }
    .next_cont_txt { width:calc(100% - 80px); }
    .next_cont_txt h2 { font-size:6.4rem; }
    .next_cont_txt h3 { font-size:2.8rem; }
    .next_cont_arw { width:80px; height:80px; }
    .next_cont_arw::after { width:14px;height:14px; top:32px; left:28px; }
    .next_cont_inner:hover .next_cont_arw::after { left:32px; }

}
@media screen and (min-width:3840px) {
    .page_ttl_area { padding-top:280px; }
    .page_ttl_wrap { padding:100px 0; }
    .page_ttl_txt h1 { font-size:30rem; }
    .page_ttl_txt h3 { font-size:6rem; }
    .page_ttl_txt p { font-size:3.2rem; margin-top:80px; }
    
    .service_contents { padding-top:460px; }
    .svc_ttl_icon { height:240px; }
    .svc_ttl h2 { font-size:8rem; margin:60px 0; }
    .svc_ttl p { font-size:3.2rem; }
    .svc_ttl { padding:160px 15% 0px 160px; }
    .phase2 .svc_ttl { padding:160px 160px 0px 15%; }
    
    .svc_list { margin-top:240px; margin-bottom:460px; border-top:2px solid #ccc; }
    .svc_list_ttl h4 { font-size:6rem; }
    .svc_list_icon { height:320px; }
    .svc_list_txt { padding:0 120px; }
    .svc_list_inner { padding:160px 0; border-bottom:2px solid #ccc; }
    .svc_list_inner:nth-of-type(2), .svc_list_inner:nth-of-type(5) { padding-top:160px; border-right:2px solid #ccc; }
    .svc_list_inner:nth-of-type(4), .svc_list_inner:nth-of-type(7) { border-left:2px solid #ccc; }
    .svc_list_inner h4 { top:160px; left:120px; font-size:4.6rem; }
    .svc_list_txt h3 { font-size:4.6rem; height:160px; }
    .svc_list_txt p { font-size:3rem; }
    
    .other_service { padding-top:320px; padding-bottom:460px; }
    .other_service h2 { font-size:12rem; }
    .other_txt h3 { font-size:6rem;}
    .other_txt p { font-size:3.2rem; }
    .other_txt { padding:160px; }

    .next_cont { height:460px; }
    .next_cont_ttl h5 { font-size:2.4rem; }
    .next_cont_txt h2 { font-size:12rem; }
    .next_cont_txt h3 { font-size:4rem; }
    .next_cont_txt { width:calc(100% - 120px); }
    .next_cont_arw { width:120px; height:120px; border:2px solid #5c7471; }
    .next_cont_arw::after { width:24px;height:24px; top:46px; left:40px; border-top:2px solid; border-right:2px solid; }
    .next_cont_inner:hover .next_cont_arw::after { left:42px; }

}