/* MainArea */
.main_area { position:relative; width:100%; height:90vh; min-height: 540px; padding-top:80px; }
.main_txt { position:relative; width:80%; height:50%; top:0; left:10%; animation: fadeUp .6s ease-in forwards; }
.main_txt h1 { position:absolute; top:50%; transform:translateY(-50%); font-size:2rem; line-height:180%; letter-spacing:3px; color:#5c7471; }
.main_ph { position:relative; top:0; left:10%; width:90%; height:50%; overflow: hidden; }
.main_ph img { width:auto; height:100%; position:absolute; bottom:-20px; left:58%; transform:scale(1.5) translateX(-50%); transform-origin:left bottom; animation: phFade .8s ease-in forwards;  }


/* ScrollDown */
.scr_dwn { position:absolute; width:10%; height:100px; bottom:0; left:0; overflow: hidden; }
.scr_dwn_inner p { font-size:1rem; color:#787878; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; -o-writing-mode: vertical-rl; writing-mode: vertical-rl; padding:0; margin:0; transform:scale(0.8) translateX(-50%); position:relative; left:50%; display:block;}
.scr_arw { width:1px; height:60px; position: relative; left:50%; background:#ddd; }
.scr_arw::after { content:''; background:#787878; width:1px; height:60px; position: absolute; animation: scr 2s cubic-bezier(1, 0, 0, 1) 0s infinite normal; }

/* TopContents */
.about_area, .service_area, .strength_area, .topic_area { position:relative; width:100%; height:auto; padding:80px 0; }
.about_area_inner, .service_area_inner, .strength_area_inner, .topic_area_inner { position:relative; width:80%; top:0; left:10%; color:#5c7471; }
.about_area h2, .service_area h2, .strength_area h2, .topic_area h2 { font-size:4rem; line-height:80%; letter-spacing:3px; text-align:center; margin:0; padding:0; margin-bottom:5px; }
.about_area h3, .service_area h3, .strength_area h3, .topic_area h3 { font-size:1.6rem; letter-spacing:2px; text-align:center; margin:0; padding:0; }
.about_area p, .service_area p, .strength_area p { margin:30px 0; font-size:1.3rem; line-height:180%; letter-spacing:0px; }
.about_area p { line-height:220%; }

.service_area { background: #f4e5df; }
.topic_area { background: #f1f1f1; }

.service_area_inner img { position:relative; width:100%; }

.swiper-container { position:relative; top:0px; left:-10vw; width:100vw; padding:20px 0; }

.strength_bnr { position:relative; width:100%; background:#5c7471; border-radius:20px; padding:40px 20px 20px 20px; transition:all .3s ease; }
.strength_bnr h4 { color:#f4e5df; text-align:center; font-size:2rem; line-height:150%; letter-spacing:2px; }
.strength_bnr h6 { position:absolute; color:#aaaaaa; font-size:5.2rem; line-height:80%; top:-20px; left:50%; transform:translateX(-50%); margin:0; }
.strength_bnr a { position:absolute; width:100%; height:100%; top:0; left:0; z-index:2; }
.strg_icon { width:120px; position:relative; left:50%; transform:translateX(-50%); margin:20px 0; }
.strg_icon img { width:100%; }
.strg_bnr_arw { position:relative; width:100%; height:32px; }
.strg_bnr_arw img { width:32px; position:absolute; right:0; top:0; transition:all .3s ease; }
.strength_bnr:hover { box-shadow:6px 6px 12px rgba(92,116,113,0.4); ; }
.strength_bnr:hover .strg_bnr_arw img { right:-5px; }

.topic_inner { position:relative; width:100%; margin-top:40px; }
.topic_inner dl { position:relative; width:100%; display:flex; flex-wrap:wrap; }
.topic_inner dt { width:100%; padding-top:15px; margin-bottom:5px; }
.topic_inner dd { width:100%; border-bottom:1px solid #ccc; padding-bottom:15px; }
.time { font-size:1rem; font-weight:400; }
.topic_detail, .topic_detail a { font-size:1.3rem; line-height:180%; color:#5c7471; transition:all .3s ease; }
.topic_inner dt:first-child { padding-top:0; }
.topic_inner dd:last-child { border:none; padding-bottom:0; }
.topic_detail a:hover { text-decoration:underline;  opacity:0.6; }


.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) {
    .main_txt h1 { font-size:2.2rem; letter-spacing:2px; }
    .main_area { max-height:680px; }
    .main_ph img { transform:scale(1.3) translateX(-50%); bottom:-10px; }
    .about_area { padding-bottom:100px; }
    .about_area p { font-size:1.5rem; letter-spacing:1px; margin-bottom:40px; }
}
@media screen and (min-width:410px) {
    .main_area { max-height:740px; }
}

@media screen and (min-width:480px) {
    .main_area { min-height: 600px; max-height:90vh; }
    .service_area_inner img { width:80%;  left:10%; }
}
@media screen and (min-width:600px) {
    .main_ph img { transform:scale(1.5) translateX(-50%);  bottom:-50px; }
}

@media screen and (min-width:760px) {
    .sp-on { display:none !important; }
    .tab-on { display:block !important; }
    .pc-on { display:none; }
    
    .main_area { height:95vh; min-height:760px; max-height:95vh; }
    .main_txt { height:40%; }
    .main_ph { height:60%; }
    .main_ph img { width:100%; height:auto; bottom:-60px; transform:scale(1.4) translateX(-50%); }
    .main_txt h1 { font-size:2.6rem; }
    .scr_dwn { left:20px; width:15px; }
    .about_area, .service_area, .strength_area, .topic_area { padding:100px 0; }
    .about_area h2, .service_area h2, .strength_area h2, .topic_area h2 { font-size:4.8rem; }
    .service_area p, .strength_area p { font-size:1.4rem; text-align:center; }
    
    .about_area h2 { position:absolute; top:0; right:0; }
    .about_area h3 { position:absolute; top:42px; right:0; }
    .about_area p { font-size:1.6rem; line-height:250%; letter-spacing:3px; }
    .pager_wrap_about { position:absolute; right:0; bottom:0; }
    .service_area_inner img { width:100%;  left:0; }
    .strg_bnr_wrap { position:relative; width:100%; margin-top:60px; display:flex !important; flex-wrap:nowrap; justify-content: space-between; }
    .strength_bnr { width:32%; padding:40px 15px 20px 15px; }
    .strg_icon { width:80px; }
    .strength_bnr h4 { font-size:1.6rem; }
    .topic_area_inner { display:flex; flex-wrap:nowrap; justify-content: space-between }
    .topic_ttl { width:40%; }
    .topic_inner { width:60%; margin-top:0; }
    .topic_area h2, .topic_area h3 { text-align:left; }

}

@media screen and (min-width:1080px) {
    .sp-on { display:none !important; }
    .tab-on { display:none !important; }
    .pc-on { display:block !important; }
    
    .main_area { height:100vh; max-height:100vh; }
    .main_txt { position:absolute; top:0; left:10%; height:100%; width:380px; }
    .main_ph { position:absolute; top:auto; bottom:0; left:calc(10% + 380px); width:calc(90% - 380px); height:calc(100% - 110px); }
    .main_ph img { width:auto; height:100%; bottom:-40px; transform:scale(1.1) translateX(-50%); }
    .about_area, .service_area, .strength_area, .topic_area { padding:140px 0; }
    .about_area p { font-size:1.8rem; }
    .about_area h2, .service_area h2, .strength_area h2 { font-size:6.4rem; }
    .about_area h3 { top:64px; }
    .service_area p, .strength_area p { font-size:1.6rem; margin:40px 0; }
    .pager_btn span { font-size:2rem; }
    .strg_bnr_wrap  { display:flex !important; }
    .strength_bnr { padding:40px 30px 30px 30px; }
    .strength_bnr h6 { font-size:6.4rem; top:-25px; }
    .strg_icon { width:120px; }
    .strength_bnr h4 { font-size:2.2rem; margin-bottom:20px; }
    .topic_area h2 { font-size:5rem; }
    .time { font-size:1.2rem; margin-bottom:8px; }
    .topic_detail, .topic_detail a { font-size:1.4rem; }  
}

@media screen and (min-width:1280px) {
    .main_area { padding-top:100px; }
    .main_ph img { bottom:-40px; transform:scale(1.3) translateX(-50%); }
    .main_txt { width:480px; }
    .main_ph { left:calc(10% + 480px); width:calc(90% - 480px); }
    .main_txt h1 { font-size:3rem; }
    .about_area, .service_area, .strength_area { padding:160px 0; }
    .about_area h2, .service_area h2, .strength_area h2 { font-size:8rem; }
    .about_area h3, .service_area h3, .strength_area h3, .topic_area h3 { font-size:2rem; }
    .topic_area h2 { font-size:6.4rem; }
    .service_area_inner img { position:relative; width:80%; left:10%; }
    .strength_bnr { padding:60px 30px 30px 30px; }
    .topic_ttl { width:30%; }
    .topic_inner { width:70%; }
    .time { font-size:1.3rem; }
    .topic_detail, .topic_detail a { font-size:1.6rem; } 
}

@media screen and (min-width:1920px) {
    .main_area { min-height:800px; }
    .about_area_inner, .service_area_inner, .strength_area_inner, .topic_area_inner { width:70%; left:15%; }
    .strength_bnr { width:31%; }
    .main_txt h1 { font-size:4rem; }
    .main_txt { width:540px; }
    .main_ph { left:calc(15% + 540px); width:calc(85% - 540px); }
    .main_ph img { bottom:-80px; }
    .about_area, .service_area, .strength_area { padding:240px 0; }
    .about_area p { font-size:2rem; }
    .about_area h2, .service_area h2, .strength_area h2 { font-size:10rem; }
    .about_area h3, .service_area h3, .strength_area h3, .topic_area h3 { font-size:2.4rem; }
    .about_area h3 { top:86px; }
    .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; }
    .service_area p, .strength_area p { font-size:1.8rem; }
    .strg_bnr_wrap { margin-top:70px; }
    .strength_bnr h6 { font-size:8rem; top:-30px; }
    .strg_icon { width:160px; }
    .strength_bnr h4 { font-size:2.6rem; }
    .strg_bnr_arw { height:46px; }
    .strg_bnr_arw img { width:46px; }
    .topic_area h2 { font-size:8rem; }
}

@media screen and (min-width:2560px) {
    .main_area { padding-top:140px; }
    .main_txt { width:680px; }
    .main_ph { left:calc(15% + 680px); width:calc(85% - 680px); }
    .main_txt h1 { font-size:5rem; }
    .scr_dwn_inner p { transform: scale(1) translateX(-50%); font-size:1.6rem; }
    .scr_dwn { width:20px; height:180px; }
    .scr_arw, .scr_arw::after { height:130px; }
    .about_area p { font-size:3.2rem; }
    .about_area h2, .service_area h2, .strength_area h2 { font-size:14rem; letter-spacing:10px; }
    .about_area h3, .service_area h3, .strength_area h3, .topic_area h3 { font-size:3.2rem; }
    .about_area h3 { top:120px; }
    .pager_btn span { font-size:4rem; }
    .service_area p, .strength_area p { font-size:2.4rem; margin:40px 0 100px 0; }
    strength_area p { padding-bottom:; }
    .pager_wrap_service { margin-top:80px; }
    .strength_bnr h6 { font-size:12rem; top:-50px; }
    .strg_icon { width:220px; margin:40px 0; }
    .strength_bnr h4 { font-size:4rem; }
    .strg_bnr_arw { height:60px; }
    .strg_bnr_arw img { width:60px; }
    .topic_area { padding:200px 0; }
    .topic_area h2 { font-size:12rem; }
    .time { font-size:1.8rem; }
    .topic_detail, .topic_detail a { font-size:2.4rem; }
}
@media screen and (min-width:3840px) {
    .main_area { padding-top:280px; }
    .main_txt { width:920px; }
    .main_txt h1 { font-size:7rem; }
    .main_ph { left:calc(15% + 920px); width:calc(85% - 920px); }
    .main_ph img { bottom:-120px; }
    .about_area p { font-size:4.6rem; }
    .about_area h2, .service_area h2, .strength_area h2 { font-size:24rem; }
    .about_area, .service_area, .strength_area { padding:320px 0; }
    .about_area h3, .service_area h3, .strength_area h3, .topic_area h3 { font-size:6rem; }
    .about_area h3 { top:200px; }
    .pager_btn span { font-size:6rem; }
    .service_area p, .strength_area p { font-size:4rem; margin: 80px 0 160px 0; }
    .strength_bnr h6 { font-size:18rem; top:-70px; }
    .strength_bnr{ padding:100px 40px 40px 40px; }
    .strg_icon { width:300px; margin:60px 0; }
    .strength_bnr h4 { font-size:6rem; }
    .strg_bnr_arw img { width:80px; }
    .strg_bnr_arw { height:80px; }
    .topic_area { padding:320px 0; }
    .topic_area h2 { font-size:18rem; }
    .time { font-size:3.2rem; }
    .topic_detail, .topic_detail a { font-size:4.6rem; }
    .topic_inner dd { padding-bottom:40px; }
    .topic_inner dt { padding-top:40px; }
}