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

.mv {
    background-color: #EEF8FD;
    padding:25px 0 25px;
}
.mv .top_mv_txt {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}
.mv .top_mv_txt h1 span, .mv .top_mv_txt p {
    display: block;
    color:white;
}
.mv .top_mv_txt h1 .en {
    font-size:3.333333em;
    font-weight:700;
    line-height: 1.45;
}
.mv .top_mv_txt p {
    font-size:1.666666em;
    font-weight:500;
    margin-top:5px;
    margin-bottom:1em;
}

@media (max-width: 768px) {
.mv {
    height: calc(100svh - 80px);
    min-height:600px;
    padding: 40px 0 25px;
}
    .mv .outer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:20px;
        height:100%;
    }
.mv h1 {
    color:var(--key_navy);
    font-size:3.333333em;
    font-weight:700;
    line-height: 1.45;
}
.mv .top_mv_txt {
    position:static;
        display: block;
        height: auto;
}
.mv .top_mv_txt p {
    color:var(--key_navy);
}
.mv .top_mv_img {
      margin-inline: calc(50% - 50cqi);
    overflow: hidden;
    }
    .mv .top_mv_img img {
        width: 135%;
        max-width: none;
        margin-left: -15%;
    }
}

@media (max-width: 600px) {
.mv h1 {
    font-size: 8.5vw;
}
.mv .top_mv_txt p {
    font-size: 6vw;
    line-height: 1.5;
    }

}


.top_service-list {
    padding-top:60px;
    padding-bottom:90px;
}
.top_service-list h2 {
    margin-bottom:0.75em;
}


@media (max-width: 768px) {
    .service_tiles.col4x {
       grid-template-columns: repeat(2, 1fr);
       gap: clamp(30px, 2.08vw, 40px);
    }
}



.top_service-banners .service-banner {
    padding-top:80px;
    padding-bottom:120px;
    background-color: #ACCBC9;
}
.top_service-localnav {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--outergap);
    height:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:2.25em;
}
.top_service-localnav > div, .top_service-localnav > a {
    font-family: var(--font-sub);
    writing-mode:vertical-rl;
    font-size:1.111111em;
    white-space: nowrap;
}
.service-banner .outer .content {
    gap:45px;
}
.service-banner .outer .content .txt_box {
    justify-content: center;
    align-items: center;
    padding:0 4.375%;
}
.service-banner .outer .content .txt_box .icon {
    width:min(50%,280px);
}
.service-banner .outer .content .txt_box h3 {
    color:var(--facility_green);
}
.service-banner .outer .content .txt_box h3 .en{
    font-size:30px;
    font-size:1.5625vw;
    line-height: 1.2;
}
.service-banner .outer .content .txt_box h3 .ja {
    font-size:36px;
    font-size:1.875vw;
    font-weight:700;
    line-height: 1.2;
    margin-top:10px;
}
.service-banner .outer .content .txt_box h4{
    font-size:30px;
    font-size:1.5625vw;
    font-weight:700;
    line-height: 1.45;
    text-align: center;
}
.service-banner .outer .content .txt_box .btn_more {
    display: flex;
    width:100%;
    height:100px;
    color:white;
    text-decoration: none;
    gap:20px;
    align-items: center;
    justify-content: center;
    font-weight:500;
    margin-top:48px;
    border:none;
}
.service-banner .outer .content .txt_box .btn_more span {
    font-size:28px;
    font-size:1.4583vw;
}
.service-banner .outer .content .txt_box .btn_more:after {
    content:"";
    width:48px;
    height:11px;
    background: url(../img/arrow.svg) center no-repeat;
    background-size: 100% auto;
    right:25px;
}
.service-banner .outer .content .txt_box .btn_more:hover:after {
   right:20px; 
}
.service-banner .outer .content .img_box {
    width:min(54.375%,870px);
    padding:0 25px 25px 0;
    flex-shrink: 0;
}
.service-banner .outer .content .img_box figure {
    position:relative;
}
.service-banner .outer .content .img_box figure:before {
    content:"";
    width:100%;
    height:100%;
    background-color: white;
    position:absolute;
    left:25px;
    top:25px;
}
.service-banner .outer .content .img_box figure img {
    display: block;
    position:relative;
    z-index: 2;
}
#service02 {
    background-color: #CFE1BE;
}
#service02 .outer .content .txt_box h3 {
    color:var(--smartiot_green);
}

#service03 {
    background-color: #E7BFCD;
}
#service03 .outer .content .txt_box h3 {
    color:var(--ds_red);
}

#service04 {
    background-color:#CFE6F1;
}
#service04 .outer .content .txt_box h3 {
    color:var(--li_blue);
}
#service05 {
    background-color:#D2B2C9;
}
#service05 .outer .content .txt_box h3 {
    color:var(--video_purple);
}

#service06 {
    background-color:#F1D7B0;
}
#service06 .outer .content .txt_box h3 {
    color:var(--erp_orange);
}

#service07 {
    background-color:#B6D9D8
}
#service07 .outer .content .txt_box h3 {
    color:var(--si_greene);
}

#service08 {
    background-color:#B3C5B7
}
#service08 .outer .content .txt_box h3 {
    color:var(--bs_green);
}

@media (max-width: 1280px) {
.service-banner .outer .content {
    gap:20px;
}
.service-banner .outer .content .img_box {
    width:min(50%,870px);
    padding:0 20px 20px 0;
}
.service-banner .outer .content .img_box figure:before {
    left:20px;
    top:20px;
}
.service-banner .outer .content .txt_box .btn_more {
    height: 80px;
    margin-top: 30px;
}    
 
}

@media (max-width: 768px) {
.top_service-banners .service-banner {
    padding-top:60px;
    padding-bottom:80px;
    }
    .top_service-localnav > div, .top_service-localnav > a {
    font-size: 0.95em;
}
.service-banner .outer .content {
    flex-direction: column-reverse;
    gap:40px;
    padding:0 calc(var(--outergap)/2) 0 var(--outergap);
}
.service-banner .outer .content .img_box {
        width: 100%;
        padding: 0;
    }
.service-banner .outer .content .img_box figure:before {
    left:10px;
    top:10px;
}
    .service-banner .outer .content .txt_box {
        padding:0;
        flex-flow: row wrap;
    }
    .service-banner .outer .content .txt_box .icon {
    width: 25%;
}
    .service-banner .outer .content .txt_box h3 {
    margin-top: 0;
    width: 75%;
        text-align: left;
        align-items: flex-start;
        padding-left:10px;
}
    .service-banner .outer .content .txt_box p {
        text-align: left;
    }
    .service-banner .outer .content .txt_box h3 .en,.service-banner .outer .content .txt_box h4 {
        font-size: 1.125em;
    }
    .service-banner .outer .content .txt_box h3 .ja {
    font-size: 1.3em;
    }
    .service-banner .outer .content .txt_box .btn_more {
        height: 60px;
        font-size:1.0em;
    }
    .service-banner .outer .content .txt_box .btn_more span{
        font-size:1.0em;
    }
    .service-banner .outer .content .txt_box .btn_more:after {
        width: 24px;
        height: 6px;
        right: 15px;
    }
    .service-banner .outer .content .txt_box .btn_more:hover:after {
       right:10px; 
    }
    
}
    
.top_news {
    padding:95px 0;
}


.top_other {
    background-color: #F5F5F5;
    padding-top:60px;
    padding-bottom:40px;
}
.top_other .grid_index_wrap {
    gap:0;
    grid-template-columns: repeat(6, 1fr); 
    grid-template-rows: repeat(2, auto);
}
.top_other .grid_index_wrap a {
    display: flex;
    color:white;
    padding-inline:min(8.125%,60px);
    width:100%;
    height:100%;
    padding-top:50px;
    padding-bottom:50px;
}
.top_other .grid_index_wrap a h3 {
    font-size: 2.0vw;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}
.top_other .grid_index_wrap a h3 .en {
    white-space: nowrap;
}
.top_other .grid_index_wrap a h3 .ja {
    font-size:50%;
}

.top_other .grid_index_wrap .col01 {
    grid-column: 1 / 4;
    grid-row: 1 / 2;
    aspect-ratio:8/5;
}
.top_other .grid_index_wrap .col02 {
    grid-column: 4 / 7;
    grid-row: 1 / 2;
    aspect-ratio:8/5;
}
.top_other .grid_index_wrap .col03 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    aspect-ratio:7/3;
}
.top_other .grid_index_wrap .col04 {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    aspect-ratio:7/3;
}
.top_other .grid_index_wrap .col05 {
    grid-column: 5 / 7;
    grid-row: 2 / 3;
    aspect-ratio:7/3;
}
.top_other .grid_index_wrap .col03 a,.top_other .grid_index_wrap .col04 a,.top_other .grid_index_wrap .col05 a {
    padding-top:30px;
    padding-bottom:30px;
}
@media (max-width: 1024px) {
    
}
@media (max-width: 768px) {
    .top_other .grid_index_wrap{
        display: block
    }
    .top_other .grid_index_wrap a h3 {
    font-size: 1.75em;
    }
    .top_other .grid_index_wrap .col01,.top_other .grid_index_wrap .col02,.top_other .grid_index_wrap .col03,.top_other .grid_index_wrap .col04,.top_other .grid_index_wrap .col05 {
        aspect-ratio:7/3;
    }
    .top_other .grid_index_wrap a{
        padding-inline:min(6.125%,40px);
        padding-top:30px;
        padding-bottom:30px;
    }
}

@media (max-width: 600px) {
       .top_other .grid_index_wrap a h3 {
    font-size: 1.5em;
    } 
     .top_other .grid_index_wrap a{
        padding-inline:min(4.5%,30px);
    }
    
}