@charset "utf-8";
#toppage .intro { position: relative; padding: 80px 0;}
#toppage .intro h3 { position: relative; text-align: center; margin-bottom: 40px;}
#toppage .intro h3 span.en {
    font-size: 148px;
    font-weight: 400;
    color:rgba(31,59,143,0.20);
    letter-spacing: 1px;
}
#toppage .intro h3 b {
    position: absolute; left: 0; right: 0; bottom: -5px;
    font-size: 44px;
    font-weight: 700;
    color: #1f3b8f;
    letter-spacing: 1px;
}
#toppage .intro .come {
    font-size: 150%;
    font-weight: 500;
    line-height: 180%;
    text-align: center;
    letter-spacing: 1px;
}
#toppage .intro.txtw h3 span.en { color:rgba(255,255,255,0.20);}
#toppage .intro.txtw h3 b,
#toppage .intro.txtw .come { color: #fff;}
@media only screen and (max-width:468px){
    #toppage .intro { padding: 80px 0 50px;}
    #toppage .intro h3 { margin-bottom: 25px;}
    #toppage .intro h3 span.en {font-size:78px;}
    #toppage .intro h3 b {font-size:175%;}
    #toppage .intro .come {font-size:106%; line-height: 170%;}
}


#toppage .note { font-size: 80%; line-height:150%; letter-spacing: -1px;}
#toppage .note span { position: relative; display: block; padding-left: 13px;}
#toppage .note span::before { position: absolute; left:0; content:"※";}


.movie { width: 100%; aspect-ratio: 16 / 9;}
.movie iframe { width: 100%; height: 100%;}
.modal_box {
	display: none;
	position: fixed; top: 0; left: 0;
	width: 100vw; height: 100vh;
	background:rgba(0,0,0,0.30);
    z-index:999;
}
.modal_box .modal_contents {
	position:absolute; top: 0; left: 0; right: 0; bottom: 0;
	margin: auto; padding: 30px;
	width:90%; max-width:1000px; height:auto;
    aspect-ratio: 16 / 9;
	background: #fff;
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.20);
	border-radius: 3px;
	z-index: 1000;
}
#contact .modal_box .modal_contents { padding: 30px 40px; max-width: 700px; height: 200px;}
#contact .modal_box .come { text-align: center; padding: 30px 0; font-size: 150%;}
#contact .modal_box .come .btn_box p a {padding: 30px 0; font-size: 150%;}
.modal_box .modal-close {
    cursor: pointer;
    display: block; border: none;
    position: absolute; top:-24px; right:-24px;
    width: 50px !important; height: 50px !important;
    background: #000;
    border-radius:50px !important;
    text-indent: -9999px;
}
.modal_box .modal-close::before,
.modal_box .modal-close::after {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left:0; right: 0; bottom: 0; margin:auto;
    width: 25px; height: 2px;
    background: #fff;
    transition: all 0.3s ease-out;
}
.modal_box .modal-close::before { transform:rotate(-45deg);}
.modal_box .modal-close::after {transform:rotate(45deg);}
@media only screen and (min-width:768px){
    .modal_box .modal-close:hover::before { transform:rotate(45deg);}
    .modal_box .modal-close:hover::after {transform:rotate(-45deg);}
}
@media only screen and (max-width:768px){
    #contact .modal_box .modal_contents { padding: 30px 20px; height: 300px;}
    #contact .modal_box .come { padding: 30px 0; font-size: 100%;}
    #contact .modal_box .btn_box { flex-direction: column; justify-content: center; gap:10px;}
    #contact .modal_box .btn_box p { width: 100%;}
    #contact .modal_box .btn_box p a { font-size: 100%;}
}


/*======================================================
  TOP
*======================================================*/


/* MAINIMG --------------------------------------------*/


/* ABOUT ----------------------------------------------*/
#toppage .about {
    padding: 50px 0 150px;
    background: url("../images/top/about_bg.webp") no-repeat center top;
    background-size: cover;
}
#toppage .about .box {
    display: flex; flex-direction: row-reverse; gap:0;
    position: relative;
    margin: auto;
    max-width: 1110px;
}
#toppage .about .pic { position: relative; width: 50%;}
#toppage .about .pic img {
    position:absolute; top: 0; left:-43%;
    width: 153.2%; max-width:766px;
    aspect-ratio: 766 / 808;
}
#toppage .about .cont { padding-top:13%; width:51%; max-width: 520px;}
#toppage .about h2 { margin-bottom: 30px;}
#toppage .about .come { font-size: 106%; margin-bottom: 70px;}
#toppage .about .btn1 { margin:auto;  max-width:360px; }
#toppage .about .btn1 a { padding: 20px; font-size: 125%; }
@media only screen and (max-width:768px){
    #toppage .about { padding: 70px 0;}
    #toppage .about .box { flex-direction: column; gap:40px;}
    #toppage .about .pic { position: static; margin: auto; width:100%; max-width: none;}
    #toppage .about .pic img { position: static; width: 100%;}
    #toppage .about h2{ margin: 0 auto 30px; width: 90%;}
    #toppage .about .come { margin: 0 auto 50px; width: 90%; text-align: justify;}
    #toppage .about .cont { margin: 0 auto; width: 90%; max-width: none;}
    #toppage .about .btn1 { margin: 0 auto; width: 90%;}
    
}
@media only screen and (max-width:468px){
    #toppage .about {
        background: url("../images/top/about_bg_sp.webp") no-repeat center top;
        background-size: cover;
    }
    #toppage .about .btn1 { max-width:300px; }
    #toppage .about .btn1 a { padding:10px; font-size: 125%; }
}


/* SERVICE --------------------------------------------*/
#toppage .service {
    position: relative;
    padding:80px 0 0;
    background: linear-gradient(45deg, rgba(39,127,190,0.20), rgba(205,224,244,0.20));
}
#toppage .service::before {
    position: absolute; left: 0; top: 0;
    display: block; clear: both; content:"";
    width: 100%; height: 100%;
    background: url("../images/top/service_bg.webp") no-repeat top center;
    background-size: auto 100%;
}
#toppage .service .intro::after {
    position: absolute; left: 0; right: 0; bottom: -50px;
    margin: auto;
    display: block; clear: both; content:"";
    width: 1px; height: 110px;
    background:#1f3b8f;
}
#toppage .service .tool { position: relative; padding: 100px 0 150px;}
#toppage .service .tool1 { margin-bottom: 120px;}
#toppage .service .tool1::before,
#toppage .service .tool2::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, #5e9edf, #4a8acb, #005cb4);
    opacity: 0.2;
}
#toppage .service .tool1::before {
    clip-path: polygon(100% 0, 100% 15%, 75% 100%, 0 100%, 0 0);
}
#toppage .service .tool2::before {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 15%);
}
#toppage .service .tool h3 {
    margin-bottom: 80px;
    font-size: 218%;
    color: #1d3787;
    text-align: center;
}
#toppage .service .list {
    display: flex; justify-content: center; gap:30px 40px;
    margin: auto;
    width:86%; max-width: 1000px;
}
#toppage .service .box { 
    position: relative;
    width:calc(100% / 3);
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .service .box h4 {
    padding: 15px;
    font-size: 175%;
    color: #fff;
    text-align: center;
    letter-spacing: 2px;
    background: linear-gradient(to right, #6356a3, #187fc4);
}
#toppage .service .box .cont {
    display: flex; flex-direction:column; gap:20px;
    padding: 20px 20px 35px;
}
#toppage .service .box .bana img { margin: auto; max-width: 160px;}
#toppage .service .box h5 { color: #1f3b8f; text-align: center; font-size:144%; line-height: 150%;}
#toppage .service .comingsoon { position: relative; background: none; box-shadow: none;}
#toppage .service .comingsoon::before,
#toppage .service .comingsoon::after {
    position: absolute;
    display: block; clear: both; content:"";
    width: calc(100% - 25px); height:calc(100% - 25px);
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .service .comingsoon::before { top:0; left: 0;}
#toppage .service .comingsoon::after { bottom:0; right: 0;}
#toppage .service .comingsoon .come {
    position: relative; z-index:9;
    margin:12.5px;
    width: calc(100% - 25px); height:calc(100% - 25px);
    color: #fff;
    background: linear-gradient(#187fc4, #6356a3);
}
#toppage .service .comingsoon .come p {
    position: relative;
    width: 100%; height: 100%;
    background: url("../images/top/comingsoon.webp") no-repeat center center;
}
#toppage .service .comingsoon span {
    position: absolute; top:0; left: 0; right: 0; bottom: 0;
    display: block;
    margin: auto;
    width: 100%; height: 70px;
    font-size:30px;
    font-weight: 700;
    line-height: 120%;
    text-align: center;
}

@media only screen and (max-width:468px){
    #toppage .service {
        padding: 0 0 60px;
    }
    #toppage .service::before {
        background: url("../images/top/service_bg_sp.webp") no-repeat top center;
    }
    #toppage .service .intro::after {
       bottom: -35px;
       height:70px;
    }
    #toppage .service .tool h3 { margin-bottom: 40px;}
    #toppage .service .tool { padding:60px 0;}
    #toppage .service .tool1 { margin-bottom: 60px;}
    #toppage .service .tool1::before,
    #toppage .service .tool2::before {
       background: linear-gradient(0deg, #5e9edf, #4a8acb, #005cb4);
    }
    #toppage .service .tool1::before {
        clip-path: polygon(0 0, 80% 0, 80% 100%, 0% 100%);
    }
    #toppage .service .tool2::before {
        clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%);
    }
    #toppage .service .list { flex-direction: column;}
    #toppage .service .box { width:100%;}
    #toppage .service .tool h3 { font-size: 150%;}
    #toppage .service .box h4 { padding: 10px 15px; font-size: 162.5%;}
    #toppage .service .box .bana img { max-width: 150px;}
    #toppage .service .box h5 { font-size:130%;}
    #toppage .service .comingsoon { height:585px; }
}



/* VIDEO ----------------------------------------------*/
#toppage .video {
    position: relative;
    margin: 120px 0;
    padding:80px 0;
}
#toppage .video::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, #4a8acb, #1d3787);
    clip-path: polygon(100% 0, 100% 15%, 75% 100%, 0 100%, 0 0);
}
#toppage .video .list {
    display: flex; justify-content: center;
    margin: auto; max-width: 1005px;
}
#toppage .video .box { 
    position: relative;
    margin: 0 15px;
    padding: 0;
    width: calc(100% / 3);
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .video .box .pic { position: relative;}
#toppage .video .box .pic::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 50px; height: 50px;
    background: url("../images/top/video_btn.webp") no-repeat;
    background-size: 100% auto;
}
#toppage .video .box .cont {
    display: flex; flex-direction:column; gap:15px;
    padding: 20px;
}
#toppage .video .box h4 { color: #1f3b8f; text-align: center; font-weight: 700;}
#toppage .video .box h4 small {
    display: block;
    margin: 0 auto 7px;
    width: 125px;
    font-size: 106%;
    line-height: 27px;
    color: #fff;
    text-align: center;
    background: #1f3b8f;
}
#toppage .video .box h4 b {font-size:144%;}
#toppage .video .box .come { font-size:87.5%; text-align: center; font-weight: 500; line-height: 170%;}
#toppage .video .b_more { position: relative; margin:60px auto 0; width: 275px;}
#toppage .video .b_more a {
    display: block;
    padding:8px 0;
    text-align: center;
    color: #fff;
    font-weight: 700;
    line-height: 160%;
    border: 2px solid #fff;
    border-radius: 100px;
}
@media only screen and (min-width:768px){
    #toppage .video .b_more a:hover { text-decoration: none; opacity: 0.7;}
}
@media only screen and (max-width:768px){
    #toppage .video .list {
        display: block;
        margin: auto;
        width: 100%; width: 420px !important;
        max-width:none;
    }
    #toppage .video .list .slick-list { overflow:visible;}
}
@media only screen and (max-width:468px){
    #toppage .video {
        margin: 110px 0 70px;
        padding: 0 0 60px;
        background: linear-gradient(to right, #4a8acb, #1d3787);
        overflow-x: hidden;
    }
    #toppage .video::before { display: none;}
    #toppage .video .list { width: 300px !important;}
    #toppage .video .box { margin: 0 10px;}
    #toppage .video .box h4 {min-height: 64.5px;}
    #toppage .video .box h4 b {font-size:125%;}
    #toppage .video .box .come { font-size:80%;}
    #toppage .video .b_more { margin:80px auto 0;}
}



/* CASE -----------------------------------------------*/
#toppage .case {
    position: relative;
    padding:80px 0 130px;
}
#toppage .case::before {
    display: block; clear: both; content:"";
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right,#4a8acb, #1d3787);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%, 0 15%);
}
#toppage .case .slide_cont { position: relative;}
#toppage .case .list {
    margin: auto;
    width: 100%; width: 840px !important;
    max-width:none;
}
#toppage .case .list .slick-list { overflow:visible;}
#toppage .case .box {
    position: relative;
    margin: 0 20px;
    /*width: 380px !important;*/
    background: #fff;
    box-shadow: 0px 7px 15px 0px rgba(31, 59, 143, 0.15);
}
#toppage .case .box .pic img { aspect-ratio: 379 / 222; object-fit: cover;}
#toppage .case .box .cont {
    display: flex; flex-direction:column; gap:15px;
    padding:25px 20px 30px;
}
#toppage .case .box h4 { font-size:131%; color: #1f3b8f; font-weight:700; line-height:150%;}
#toppage .case .box .come {  margin-bottom:10px; }
#toppage .case .box .come b { font-size:106%; font-weight:700;}
#toppage .case .box .come p {
    display: flex; flex-wrap: wrap;
    font-size: 75%; font-weight: 500; line-height: 180%;
}
#toppage .case .box .come p span:nth-child(1) { width: 65px;}
#toppage .case .box .come p span:nth-child(2) { width: calc(100% - 65px); height: 44px;}
#toppage .case .box .btn { display: flex; gap:10px;}
#toppage .case .box .btn p { width: 50%;}
#toppage .case .box .btn a {
    display: block;
    padding: 2px 0;
    font-size: 87.5%;
    text-align: center;
    color:#1f3b8f;
    font-weight: 700;
    background:#d2d8e9 url("../images/common/arrow2_b.webp") no-repeat 90% center;
    background-size: 7px auto;
    border-radius: 100px;
}
#toppage .case .slide_btn {
    position: absolute; top:-80px; right:5%;
    display: flex; justify-content: flex-end; gap:20px;
    margin: auto; width:86%;
}
#toppage .case .slide_btn .b_more { width: 165px;}
#toppage .case .slide_btn .b_more a {
    display: block;
    text-align: center;
    color: #fff;
    line-height: 45px;
    border: 2px solid #fff;
    border-radius: 100px;
    transition: all .3s ease;
}
#toppage .case .slide_btn .arrow_box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap:10px;
}
#toppage .case .slide_btn .prev-arrow,
#toppage .case .slide_btn .next-arrow {
    display: block;
    position:relative;
    cursor: pointer;
    width: 45px; height: 45px;
    background:url("../images/top/arrow1_w.webp") no-repeat center center;
    background-size: 15px auto;
    border: 2px solid #fff;
    border-radius: 100px;
    transition: all .3s ease;
}
#toppage .case .slide_btn .prev-arrow { transform: rotate(180deg);}
@media only screen and (min-width:768px){
    #toppage .case .box .btn a:hover { color: #1f3b8f; text-decoration: none; opacity: 0.7;}
    #toppage .case .slide_btn .prev-arrow:hover,
    #toppage .case .slide_btn .next-arrow:hover,
    #toppage .case .slide_btn .b_more a:hover { text-decoration: none; opacity: 0.7;}
}
@media only screen and (max-width:468px){
    #toppage .case { padding:0 0 50px; background: linear-gradient(to right, #4a8acb, #1d3787); overflow-x: hidden;}
    #toppage .case::before { display: none;}
    #toppage .case .list { margin: auto; width: 300px !important;}
    #toppage .case .box { margin: 0 10px;}
    #toppage .case .box .btn { flex-direction: column; min-height: 75.6px;}
    #toppage .case .box .btn p { width: 100%;}
    #toppage .case .box h4 br { display: none;}
    #toppage .case .slide_btn { position: static; margin:70px auto 0;}
    #toppage .case .slide_btn .b_more { margin: auto; width:275px;}
    #toppage .case .slide_btn .arrow_box { display: none;}
}



/* SUPPORT --------------------------------------*/
#toppage .support { padding:80px 0;}
#toppage .support .list {
    display: flex; gap:70px 40px;
    margin: auto;
    width:86%;
    max-width: 1020px;
}
#toppage .support .box {
    position: relative; display: flex; flex-direction:column; gap:10px;
}
#toppage .support .box .icon {
    display: flex; align-items: center; justify-content: center;
    position:absolute; top: -37px; left: -22px; z-index: 2;
    width:85px; height:75px;
    font-size: 75%;
    color: #fff;
    text-align: center;
    line-height: 130%;
    background: linear-gradient(116deg, #4a8acb, #1d3787);
    clip-path: polygon(25% 0%, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
#toppage .support .box .pic img { aspect-ratio: 313 / 200; object-fit: cover;}
#toppage .support .box h4 { padding:5px 0 0; color: #1f3b8f;}
#toppage .support .box h4 small { font-size:95%; display: block; margin-bottom: 5px;}
#toppage .support .box h4 b { font-size: 156%; letter-spacing: 2px;}
#toppage .support .box .come { font-size: 106%;}
@media only screen and (max-width:468px){
    #toppage .support { padding:20px 0 0px;}
    #toppage .support .list { flex-direction: column;}
    #toppage .support .box h4 { padding:0;}
    #toppage .support .box h4 small { margin-bottom:0;}
}