@charset "UTF-8";

main{
    margin-bottom: 80px;
}

main .inner{
    max-width: 1200px;
    margin: 0 auto;
}

h1.ttl {
    text-align: center;
}
h1.ttl span{
    display: block;
}
h1.ttl span.ttl-e{
    margin-bottom: 23px;
    font-family: din-condensed, sans-serif;
    font-weight: normal;
    font-size: 28px;
    color: #038abf;
    letter-spacing: 1px;
}
h1.ttl span.ttl-j{
    font-size: 40px;
    color: #003f98;
    letter-spacing: 6px;
}
h1.ttl:before{
    content: '';
    width: 4px;
    display: block;
    border-radius: 1px;
}


/* mv */
@media screen and (max-width:768px) {
    h1.ttl span.ttl-e{
        margin-bottom: 1.6%;
        font-size: 80%;
    }
    h1.ttl span.ttl-j{
        font-size: 110%;
    }

    
    .home main{
        background: url(../img/service_bg-sp.webp)no-repeat center top;
        background-size: 100%;
    }
    
    header:after {
        content: '';
        width: 100%;
        height: 20px;
        background: linear-gradient(90deg, rgba(1, 138, 193, 1) 0%, rgba(101, 165, 213, 1) 100%);
        display: block;
    }
}

/* service */
section#service{
    margin-bottom: 57px;
    position: relative;
    z-index: 0;
}
section#service:before{
    content: '';
    width: 100%;
    height: 227px;
    background: url(../img/service_bg.webp)no-repeat center 0px;
    position: absolute;
    top: -3%;
    display: block;
    z-index: -1;
}

section#service .inner{
    background: url(../img/service_bg2.webp)no-repeat center top;
    background-size: 100%;
}

section#service h1.ttl:before{
    height: 74px;
    margin: 0 auto 55px;
    background: linear-gradient(0deg,rgba(2, 27, 104, 1) 0%, rgba(49, 88, 149, 1) 100%);
    border-radius: 0 1px 1px 0;
}

section#service p.service__txt{
    margin: 26px 0 50px;
    font-size: 20px;
    text-align: center;
    line-height: 1.8;
}
section#service p.service__txt span{
    font-weight: 600;
    color: #003f98;
}

section#service h2 {
    margin: 47px 0 34px;
    text-align: center;
    letter-spacing: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
section#service h2 span {
    padding: 0 40px;
    font-size: 40px;
    color: #003f98;
    display: inline-block;
}
section#service h2:before, section#service h2:after{
    content: '';
    width: 162px;
    height: 3px;
    background: #003f98;
    display: block;
}

section#service picture img {
    margin: 0 auto;
}


@media screen and (max-width:768px) {
    section#service{
        margin-bottom: 17%;
    }
    
    section#service:before{
        background: none;
    }
    
    section#service .inner{
        background: url(../img/service_bg2.webp)no-repeat center 1.6%;
        background-size: 100%;
    }
    
    section#service h1.ttl:before{
        height: 65px;
        margin: 0 auto 6.4%;
    }

    section#service p.service__txt{
        margin: 1.8% 0 0%;
        font-size: 105%;
        line-height: 1.85;
    }

    section#service h2{
        margin: 5.9% 0 6.1%;
    }
    section#service h2 span{
        padding: 0 6%;
        font-size: 110%;
    }
    section#service h2:before, section#service h2:after{
        width: 21%;
    }

    section#service picture img.wi90 {
        width: 93%;
        max-width: 700px;
    }
}


/* achievements */
section#achievements{
    margin-bottom: 90px;
    position: relative;
}
section#achievements:before {
    content: '';
    width: 100%;
    height: 100%;
    background: url(../img/achievements_bg.webp) no-repeat center top;
    position: absolute;
    top: -27%;
    display: block;
    z-index: -1;
}

section#achievements h1.ttl:before{
    height: 129px;
    margin: 0 auto 48px;
    background: linear-gradient(0deg,rgba(2, 27, 104, 1) 0%, rgba(99, 153, 198, 1) 100%);
}

.acievements__wrap {
    margin: 86px 5% 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    counter-reset: num;
}

.acievements__block{
    max-width: 520px;
    padding-top: 83px;
    position: relative;
}
.acievements__block > div{
    margin-bottom: 63px;
    padding: 25px 0 12px;
    background: #337ab7;
    border-radius: 10px;
}

.acievements__block .img__block{
    max-width: 205px;
    max-height: 205px;
    border: 1px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    box-shadow: 12px 1px #337ab7;
    top: 0;
    left: 20px;
}
.acievements__block .img__block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acievements__block .ttl__block {
    margin-left: 257px;
}

.acievements__block .ttl__block span.no {
    display: block;
    font-family: din-condensed, sans-serif;
    font-size: 20px;
    color: #f0f3f2;
    font-weight: normal;
    letter-spacing: 1px;
    counter-increment: num;
}
.acievements__block .ttl__block span.no:after {
    margin-left: 5px;
    content: counter(num);
    display: inline-block;
}


.acievements__block .ttl__block span.name {
    display: block;
    font-size: 20px;
    color: #f0f3f2;
}
.acievements__block .ttl__block span.name:before{
    content: '';
    width: 100%;
    height: 1px;
    margin-top: 3px;
    margin-bottom: 7px;
    background: #fff;
    display: block;
}

.acievements__block .txt__block {
    margin: 8px 10px 0;
    padding: 25px 25px 5px;
    background: #f0f4f3;
    border-radius: 10px;
    line-height: 1.8;
    color: #337ab7;
}

.home .acievements__wrap > div:nth-child(n+5) {display:none}

@media screen and (max-width:768px) {
    section#achievements{
        margin-bottom: 7%;
    }
    section#achievements:before{
        top: -14%;
    }

    section#achievements h1.ttl:before{
        height: 65px;
        margin: 0 auto 6%;
    }

    .acievements__wrap{
        margin: 6% 1% 0;
        grid-template-columns: 1fr;
    }

    .acievements__block{
        width: 100%;
        max-width: 740px;
        padding: 12% 0 0;
    }

    .acievements__block > div{
        margin-bottom: 5%;
        padding: 7px 0 12px;
    }

    .acievements__block .ttl__block{
        margin-left: 37%;
    }
        .acievements__block .ttl__block span.no{
        font-size: 100%;
        letter-spacing: 2px;
    }
    .acievements__block .ttl__block span.name{
        font-size: 110%;
        letter-spacing: 1px;
    }

    .acievements__block .txt__block{
        margin: 7px 1% 0;
        padding: 3% 4% 5px;
        font-size: 108%;
        line-height: 1.8;
    }

    .acievements__block .img__block{
        width: 30%;
        height: auto;
        box-shadow: 5px 1px #337ab7;
    }

}


/* topics */
section#topics{
    padding: 0 0 61px;
    background: #003f97;
}

section#topics h1.ttl{margin-top: -10px;}
section#topics h1.ttl span.ttl-e,
section#topics h1.ttl span.ttl-j{
    color: #fff;
}
section#topics h1.ttl:before{
    height: 70px;
    margin: 0 auto 7px;
    background: linear-gradient(0deg, rgba(40, 90, 161, 1) 0%, rgba(98, 148, 199, 1) 100%);
    position: relative;
    top: -14px;
}

section#topics .news_block {
    margin: 80px 20px 67px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
}

section#topics .news_block article.list_block{
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 2px 2px 5px 2px #434960;
}

section#topics .news_block time {
    padding: 7px 16px 5px;
    text-align: right;
    display: block;
    background: linear-gradient(90deg, rgba(1, 138, 193, 1) 0%, rgba(90, 160, 208, 1) 100%);
    color: #fff;
    font-size: 16px;
}

section#topics .news_block .img_block {
    width: 100%;
    height: 200px;
}

section#topics .news_block .img_block img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section#topics .news_block .text_block {
    padding: 11px 10px 4px;
}
section#topics .news_block .text_block h2 {
    height: 153px;
    font-size: 18px;
    color: #377eb2;
    border-bottom: 2px solid #ccc;
}

section#topics .news_block .text_block a{
    width: 100%;
    padding: 8px 5px 0 8px;
    display: flex;
    align-items: center;
    font-family: din-condensed, sans-serif;
    font-size: 28px;
}
section#topics .news_block .text_block a:after{
    content: '▲';
    margin-left: 5px;
    rotate: 90deg;
    display: block;
    font-size: 16px;
}

section#topics .more_btn{
    max-width: 400px;
    margin: 0 auto;
}

section#topics .more_btn a{
    width: 100%;
    padding: 14px 0 12px;
    display: block;
    background: linear-gradient(0deg,rgba(101, 165, 213, 1) 0%, rgba(1, 138, 193, 1) 100%);
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width:768px) {
    section#topics{
        padding: 0 0 7.3%;
    }
    section#topics h1.ttl:before{
        height: 65px;
    }
    
    section#topics .news_block{
        margin: 9.7% 1% 10.3%;
        grid-template-columns: 1fr 1fr;
        gap: 28px 10px;
    }

    section#topics .news_block time{
        padding: 1.7% 5% 1%;
        font-size: 76%;
    }
    section#topics .news_block .text_block{
        padding: 0% 2% 1%;
    }
    section#topics .news_block .text_block h2{
        height: 100px;
        font-size: 110%;
        line-height: 1.7;
    }
    section#topics .news_block .text_block a{
        padding: 2.6% 3% 1%;
        font-size: 115%;
    }

    section#topics .news_block .img_block{
        height: 120px;
    }

    section#topics .more_btn{
        width: 80%;
        max-width: 600px;
    }
    section#topics .more_btn a{
        padding: 3% 0 3%;
        font-size: 130%;
    }
}


/* point */
aside.point {
    margin: 115px 0 205px;
}

aside.point .inner{
    padding: 0 25px;
    position: relative;
}

aside.point .point__txt {
    max-width: 635px;
    padding: 30px 20px 52px;
    background: #fff;
    position: relative;
    top: 76px;
    z-index: 1;
    box-shadow: 0 0 2px 1px #dcdde1;
}
aside.point .point__txt:before{
    content: '';
    width: 100%;
    height: 12px;
    background: linear-gradient(90deg,rgba(1, 138, 193, 1) 0%, rgba(101, 165, 213, 1) 100%);
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

aside.point .point__txt h1 {
    margin-bottom: 15px;
    line-height: 1.5;
    color: #013f92;
}
aside.point .point__txt p {
    line-height: 1.8;
}

aside.point .point__txt p span{
    color: #003f98;
    font-weight: 600;
}

aside.point .point__img{
    position: absolute;
    top: 0;
    right: 25px;
    border-radius: 10px;
    overflow: hidden;
}

@media screen and (max-width:768px) {
    aside.point{
        margin: 7% 0 20%;
    }

    aside.point .inner{
        padding: 56.3% 0 0;
    }

    aside.point .point__img{
        max-width: 586px;
        width: 78%;
        margin: auto;
        right: 0;
        left: 0;
    }

    aside.point .point__txt{
        width: 90%;
        max-width: 631px;
        margin: 0 auto 2%;
        padding: 3.9% 2.6% 3%;
        top: 0;
    }

    aside.point .point__txt h1{
        margin-bottom: 3.2%;
        font-size: 123%;
        letter-spacing: -2px;
    }
    aside.point .point__txt p{
        line-height: 1.75;
        font-size: 110%;
    }
}

/* flow */
section#flow{
    padding: 28px 0 55px;
    background: url(../img/flow_bg.webp)no-repeat top center;

}

section#flow h1.ttl:before{
    height: 70px;
    margin: 0 auto 7px;
    background: linear-gradient(0deg, rgba(40, 90, 161, 1) 0%, rgba(98, 148, 199, 1) 100%);
    position: relative;
    top: -14px;
}

section#flow .flow__wrap {
    padding: 173px 0 0;
    position: relative;
}

section#flow .flow__wrap .step__img {
    position: absolute;
    right: -240px;
    top: 50px;
    z-index: -1;
}
dl.step__block{
    max-width: 730px;
    counter-reset: num;
}
dl.step__block dt {
    margin-bottom: 7px;
    padding: 4px 7px 3px;
    background: linear-gradient(90deg,rgba(106, 164, 214, 1) 0%, rgba(2, 137, 193, 1) 100%);
    display: flex;
    align-items: center;
    border-radius: 0 15px 15px 0;
}
dl.step__block dt span.no{
    margin-right: 30px;
    font-family: din-condensed, sans-serif;
    font-size: 28px;
    color: #fff;
    display: flex;
    align-items: baseline;
    line-height: 1;
    letter-spacing: 1px;
    counter-increment: num;
}
dl.step__block dt span.no:after{
    content: counter(num);
    margin-left: 9px;
    font-size: 55px;
    display: block;
}

dl.step__block dt span.txt{
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

dl.step__block dd {
    margin-bottom: 47px;
    padding-left: 5px;
    font-size: 20px;
    font-weight: 600;
}

@media screen and (max-width:768px) {
    section#flow{
        padding: 28px 0 0;
        background: url(../img/flow_bg-sp.webp)no-repeat top center;
        background-size: 100%;
    }
    
    section#flow .flow__wrap{
        padding: 53% 0 0;
    }

    dl.step__block{
        width: 94%;
    }

    dl.step__block dt{
        margin-bottom: 1%;
        padding: 0.5% 1.6% 0.5%;
    }
    dl.step__block dt span.no{
        font-size: 112%;
    }
    dl.step__block dt span.no:after{
        font-size: 210%;
    }

    dl.step__block dt span.txt{
        font-size: 120%;
    }
    dl.step__block dd{
        margin-bottom: 5%;
        font-size: 110%;
    }
}


/* contact */
aside.contact__block{
    padding-top: 69px;
}
aside.contact__block .contact__wrap{
    background: url(../img/contact_bg.webp)no-repeat center top;
}
aside.contact__block .contact__inner{
    max-width: 1180px;
    margin: 0 auto;
    padding: 42px 0 38px;
    position: relative;
}

aside.contact__block .contact__img{
    position: absolute;
    bottom: 0;
    left: -70px;
}

aside.contact__block .contact__txt {
    margin-left: 342px;
}
aside.contact__block .contact__txt h1{

}
aside.contact__block .contact__txt h1 span {
    display: inline-block;
    background: linear-gradient(90deg, rgba(0, 65, 149, 1) 0%, rgba(1, 62, 151, 1) 100%);
    color: #fff;
}
aside.contact__block .contact__txt h1 span:nth-child(1){
    margin-bottom: 20px;
    padding: 19px 18px 23px;
    font-size: 48px;
    letter-spacing: 2px;
}
aside.contact__block .contact__txt h1 span:nth-child(2){
    margin-bottom: 37px;
    padding: 19px 0 23px 18px;
    font-size: 39px;
    letter-spacing: 0;
}

aside.contact__block .white__block{
    width: 97%;
    max-width: 812px;
    margin: 0 auto;
    padding: 38px 10px 32px 24px;
    display: flex;
    background: #fff;
    border-radius: 10px;
}

aside.contact__block .white__block p.tel {
    margin-right: 15px;
    font-family: din-condensed, sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #004689;
    letter-spacing: 2px;
}

aside.contact__block .white__block p.tel a {
    font-size: 52px;
    color: #004689;
    letter-spacing: 3px;
    line-height: 1;
}

aside.contact__block .white__block p.txt {
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
}

aside.contact__block .contact__btn{
    width: 423px;
}
aside.contact__block .contact__btn a{
    padding: 20px 5px;
    font-size: 24px;
}
aside.contact__block .contact__btn a:before{
    width: 45px;
    height: 37px;
}

@media screen and (max-width:768px) {
    aside.contact__block{
        padding-top: 9.9%;
    }
    aside.contact__block .contact__wrap{
        background-size: cover;
    }
    aside.contact__block .contact__inner{
        padding: 28% 0 1.5%;
    }
    aside.contact__block .contact__txt{
        margin-left: 0;
    }
    aside.contact__block .contact__img{
        width: 62%;
        max-width: 432px;
        top: -20%;
        bottom: auto;
        left: 5%;
        z-index: 0;
    }
    aside.contact__block .contact__txt h1{
        width: 98%;
        margin: 0 auto;
        position: relative;
        text-align: right;
    }

    aside.contact__block .contact__txt h1 span:nth-child(1){
        margin-bottom: 0.6%;
        padding: 2.2% 0% 2.2% 2.3%;
        font-size: 131%;
        letter-spacing: 4px;
    }
    aside.contact__block .contact__txt h1 span:nth-child(2){
        margin-bottom: 1%;
        padding: 2% 0 2.2% 0.5%;
        font-size: 96%;
    }

    aside.contact__block .white__block{
        display: block;
        padding: 1.6% 1% 2%;
        position: relative;
    }

    aside.contact__block .white__block .contact__tel{
        margin-bottom: 2.5%;
    }

    aside.contact__block .white__block p.tel{
        margin-right: 0;
        font-size: 170%;
        text-align: center;
    }
    aside.contact__block .white__block p.tel a{
        font-size: 162%;
    }

    aside.contact__block .white__block p.txt{
        font-size: 128%;
        line-height: 1;
    }

    aside.contact__block .contact__btn{
        width: 60%;
        max-width: 423px;
        margin: 0 auto;
    }
    aside.contact__block .contact__btn a{
        padding: 10px 0;
        font-size: 120%;
        line-height: 1.4;
    }

    aside.contact__block .contact__btn a:before{
        width: 15%;
        max-width: 45px;
        height: 20px;
        background-size: contain;
    }
    
}