/* 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; width:100vw; left:-10vw; top:-30px; color:#5c7471; animation: fadeUp .6s ease-in forwards; }
.page_ttl_txt h1 { font-size:6rem; 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; padding-left:10%; }



/* StrengthContents */
.strg_cont { position:relative; width:100%; height:auto; padding-top:60px; padding-bottom:80px; }

.strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { position:relative; width:100%; height:auto; margin-bottom:120px; }
.strg_cont_inner3 { margin-bottom:0 !important; }
.strg_img { position:relative; width:100%; height:auto; padding-top:70%; overflow: hidden }
.strg_img img { position:absolute; width:auto; height:100%; top:50%; left:50%; transform:translate(-50%, -50%); }
.strg_txt { position:relative; width:80%; left:10%; color:#5c7471; top:-50px; }

.strg_txt h6 { font-size:12rem; color:#f1f1f1; line-height:80%; margin-bottom:20px; }
.strg_txt h2 { font-size:2.4rem; margin-bottom:20px; }
.strg_txt p { font-size:1.3rem; line-height:180%; margin:0; padding:0; }

/* ServiceArea */
.service_area { position:relative; width:100%; height:auto; padding:80px 0; background: #f4e5df; }
.service_area_inner { position:relative; width:80%; top:0; left:10%; color:#5c7471; }
.service_area h2 { font-size:4rem; line-height:80%; letter-spacing:3px; text-align:center; margin:0; padding:0; margin-bottom:5px; }
.service_area h3 { font-size:1.6rem; letter-spacing:2px; text-align:center; margin:0; padding:0; }
.service_area p { margin:30px 0; font-size:1.3rem; line-height:180%; letter-spacing:0px; }
.service_area_inner img { position:relative; width:100%; }

.pager_btn { text-align:center; }
.pager_btn span { position:relative; display:inline-block; font-size:1.6rem; letter-spacing:2px; transition:all .3s ease; }
.pager_btn span::after { position:absolute; content:""; width:100%; height:1px; border-radius:0.5px; bottom:-2px; left:0; background:#5c7471; transition:all .3s ease; }
.pager_btn span::before { position:absolute; content:""; width:8px; height:1px; border-radius:0.5px; bottom:-2px; right:0; background:#5c7471; transition:all .3s ease; }
.pager_btn span:hover { opacity:0.8; }
.pager_btn span:hover::after { width:110%; }
.pager_btn span:hover::before { right:-10%; transform:rotate(45deg);transform-origin:bottom right; }
.pager_btn span a { color:#5c7471; }
.pager_wrap_service { margin-top:40px; }



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

}
@media screen and (min-width:410px) {
    .page_ttl_txt { width:100%; left:0; }
    .page_ttl_txt p { margin-top:40px; line-height:250%; padding-left:0; }

}
@media screen and (min-width:480px) {
    .service_area_inner img { width:80%;  left:10%; }
}

@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:5.2rem; 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; }
    
    .strg_cont { padding-top:90px; margin-bottom:120px; }
    .strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { display:flex; flex-wrap:nowrap; height:480px; }
    .strg_img { width:50%; padding-top:0; height:480px; }
    .strg_txt { width:50%; top:0; left:0; padding:0 10% 0 50px; }
    .strg_cont_inner2 { flex-direction: row-reverse; }
    .strg_cont_inner2 .strg_txt { padding:0 50px 0 10%; }
    
    .service_area { padding:100px 0; }
    .service_area h2 { font-size:4.8rem; }
    .service_area p { font-size:1.4rem; text-align:center; }
    .service_area_inner img { width:100%;  left:0; }
    .strg_txt_inner { position:relative; top:45%; transform:translateY(-50%); }
    
}

@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; }
    
    .strg_cont { padding-top:120px; padding-bottom:160px; }
    .strg_txt h6 { font-size:16rem; margin-bottom:30px; }
    .strg_txt h2 { font-size:2.8rem; letter-spacing:3px; line-height:150%; }
    .strg_txt p { font-size:1.4rem; }
    
    .service_area { padding:140px 0; }
    .service_area h2 { font-size:6.4rem; }
    .service_area p { font-size:1.6rem; margin:40px 0; }
    
    .pager_btn span { font-size:2rem; }
}

@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; }
    
    .strg_cont { padding-top:160px; padding-bottom:200px; }
    .strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { height:540px; margin-bottom:140px; }
    .strg_img { width:55%; height:540px; }
    .strg_txt { width:45%; padding:0 10% 0 80px; }
    .strg_cont_inner2 { flex-direction: row-reverse; }
    .strg_cont_inner2 .strg_txt { padding:0 80px 0 10%; }
    .strg_img img { height:120%; }
    .strg_txt p { font-size:1.6rem; }
    
    .service_area { padding:160px 0; }
    .service_area h2 { font-size:8rem; }
    .service_area h3 { font-size:2rem; }
    .service_area_inner img { width:80%; left:10%; }
}

@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; }
    
    .strg_cont { padding-top:180px; padding-bottom:260px; }
    .strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { height:720px; margin-bottom:180px; }
    .strg_img { height:720px; }
    .strg_txt { width:45%; padding:0 15% 0 80px; }
    .strg_cont_inner2 .strg_txt { padding:0 80px 0 15%; }
    .strg_txt h6 { font-size:18rem; margin-bottom:30px; }
    .strg_txt h2 { font-size:3.2rem; letter-spacing:3px; line-height:150%; }
    .strg_txt p { font-size:2rem; }
    .strg_img img { height:130%; }
    
    .service_area_inner { width:70%; left:15%; }
    .service_area { padding:240px 0; }
    .service_area h2 { font-size:10rem; }
    .service_area h3 { font-size:2.4rem; }
    
    .pager_wrap_service { margin-top:60px; }
    .pager_btn span { font-size:2.4rem; }
    .pager_btn span::after { height:2px; }
    .pager_btn span::before { height:2px; }
}

@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%; }
    
    .strg_cont { padding-top:240px; padding-bottom:360px; }
    .strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { height:900px; margin-bottom:240px; }
    .strg_img { height:900px; }
    .strg_txt { padding:0 15% 0 120px; }
    .strg_cont_inner2 .strg_txt { padding:0 120px 0 15%; }
    .strg_txt h6 { font-size:24rem; margin-bottom:40px; }
    .strg_txt h2 { font-size:4.6rem; margin-bottom:40px; }
    .strg_txt p { font-size:2.4rem; }
    
    .service_area h2 { font-size:14rem; letter-spacing:10px; }
    .service_area h3 { font-size:3.2rem; }
    .service_area p { font-size:2.4rem; margin:40px 0 100px 0; }
    
    .pager_btn span { font-size:4rem; }
    .pager_wrap_service { margin-top:80px; }
    
}
@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; }
    
    .strg_cont { padding-top:460px; padding-bottom:600px; }
    .strg_cont_inner1, .strg_cont_inner2, .strg_cont_inner3 { height:1280px; margin-bottom:400px; }
    .strg_txt { padding:0 15% 0 180px; }
    .strg_cont_inner2 .strg_txt { padding:0 180px 0 15%; }
    .strg_img { height:1280px; }
    .strg_txt h6 { font-size:32rem; margin-bottom:60px; }
    .strg_txt h2 { font-size:6rem; margin-bottom:60px; }
    .strg_txt p { font-size:3.2rem; }
    
    .service_area { padding:320px 0; }
    .service_area h2 { font-size:24rem; }
    .service_area h3 { font-size:6rem; }
    .service_area p { font-size:4rem; margin: 80px 0 160px 0; }
    
    .pager_btn span { font-size:6rem; }
    

}