@charset "utf-8";

/* index.html
-------------------------------*/
body.home{
    background: none;
}

.top_image{
    width: 100%;
    background: url(../img/top/top_bg.jpg) center top repeat-x;
    background-size: auto 100%;
    padding-top: 300px;
    position: relative;
    padding-bottom: 300px;
}
.top_image .inner{
    width: 95%;
    max-width: 1400px;
    margin: auto;
    color: #fff;
    position: relative;
    z-index: 20;
}
.top_image .txt dt{
    font-size: 54px;
    line-height: 1.7em;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    margin-bottom: 30px;
}

.scroll{
    margin-top: 100px;
    width: 107px;
    height: 245px;
    background: url(../img/top/scroll.png) center top no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.scroll span{
    display: inline-block;
    width: 2px;
    height: 180px;
    background: url(../img/top/scroll_bar.png) center center repeat-y;/* 縦の時は　repeat-y */
    -moz-animation: kurukuru 2s linear infinite;
    animation: kurukuru 2s linear infinite;
}
/* スクロールの矢印　縦にスクロール　 */
@keyframes kurukuru {
    0% {background-position: 0 0;}
    100% {background-position: 0 360px;}
}

@-moz-keyframes kurukuru {
    0% {background-position: 0 0;}
    100% {background-position: 0 360px;}
}


.top_image .bnr{
    position: absolute;
    right: 60px;
    top: 600px;
    z-index: 20;
}
.top_image .bnr a:hover{
    filter: brightness(0.8);
}


@media screen and (max-width:1920px){
    .top_image{
        padding-top: 15.625vw;
        padding-bottom: 15.625vw;
    }
}

@media screen and (max-width:1300px){

    .top_image .txt dt{
        font-size: 4.15vw;
        line-height: 1.7em;
        margin-bottom: 2.3vw;
    }

    .scroll{
        margin-top: 7.69vw;
        width: 8.2vw;
        background-size: contain;
    }

    .top_image .bnr{
        right: 4.6vw;
        top: 46vw;
        width: 23vw;
    }

}


@media screen and (max-width:910px){
    

    .top_image{
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .top_image .txt dt{
        font-size: 5.9vw;
        line-height: 1.5em;
        margin-bottom: 20px;
    }

    .scroll{
        display: none;
    }

    .top_image .bnr{
        right: auto;
        top: auto;
        width: 100%;
        margin-top: -15vw;
    }
    .top_image .bnr a{
        display: block;
        width: 70%;
        max-width: 300px;
        margin: auto;
    }

}
@media screen and (max-width:640px){
    .top_image{
        margin-bottom: 100px;
    }

}










.top_slide2 {
    position: relative;
    width: 1060px;
    height: 960px;
    /*    overflow: hidden;*/
}
/* 　▼▼▼　スライドの枚数が変わったら、秒数を調整する　 5s@1枚 **/
.slide-image2 {
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: slider-2 40s linear infinite;  /* 6枚→30s　8枚→40s */
    transform-origin: center right;
    z-index: 11;
    width: 100%;
    height: 100%;
    padding-left: 6px;
}
.slide-image2:nth-child(1) {
    background-image: url(../img/top/slide/mask1_bg.png);
    animation-delay: -2s;
}
.slide-image2:nth-child(2) {
    background-image: url(../img/top/slide/mask2_bg.png);
    animation-delay: 3s;
}
.slide-image2:nth-child(3) {
    background-image: url(../img/top/slide/mask3_bg.png);
    animation-delay: 8s;
}
.slide-image2:nth-child(4) {
    background-image: url(../img/top/slide/mask4_bg.png);
    animation-delay: 13s;
}
.slide-image2:nth-child(5) {
    background-image: url(../img/top/slide/mask5_bg.png);
    animation-delay: 18s;
}
.slide-image2:nth-child(6) {
    background-image: url(../img/top/slide/mask6_bg.png);
    animation-delay: 23s;
}
.slide-image2:nth-child(7) {
    background-image: url(../img/top/slide/mask7_bg.png);
    animation-delay: 28s;
}
.slide-image2:nth-child(8) {
    background-image: url(../img/top/slide/mask8_bg.png);
    animation-delay: 33s;
}

/*　▼▼▼　スライドの枚数が変わったら、秒数を調整する 　5s@1枚 **/
/*　▼▼▼ CSS の maskを使用して画像表示している場合、
通常のローカル環境ではクロスドメインとしてブロックされるため、表示されません。 **/
.mask1{
    position: relative;
    z-index: 3;
    width:1030px;
    height:650px;
    background:url(../img/top/slide/mask1.png) center no-repeat;
    background-size: cover;
    mask-image:url(../img/top/slide/waku.png);/* トリミングしたい型の画像 **/
    -webkit-mask-image:url(../img/top/slide/waku.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: zoomup 40s linear infinite;  /* 6枚→30s　8枚→40s */
}

.slide-image2:nth-child(1) .mask1{
    animation-delay: -2s;
}
.slide-image2:nth-child(2) .mask1{
    background-image:url(../img/top/slide/mask2.png);
    animation-delay: 3s;
}
.slide-image2:nth-child(3) .mask1{
    background-image:url(../img/top/slide/mask3.png);
    animation-delay: 8s;
}
.slide-image2:nth-child(4) .mask1{
    background-image:url(../img/top/slide/mask4.png);
    animation-delay: 13s;
}
.slide-image2:nth-child(5) .mask1{
    background-image:url(../img/top/slide/mask5.png);
    animation-delay: 18s;
}
.slide-image2:nth-child(6) .mask1{
    background-image:url(../img/top/slide/mask6.png);
    animation-delay: 23s;
}
.slide-image2:nth-child(7) .mask1{
    background-image:url(../img/top/slide/mask7.png);
    animation-delay: 28s;
}
.slide-image2:nth-child(8) .mask1{
    background-image:url(../img/top/slide/mask8.png);
    animation-delay: 33s;
}

@media screen and (min-width:1920.99999px){
    .top_image .img2{
        position: absolute;
        top: 100px;
        left: calc(50% - 305px);
        z-index: 1:
    }
}


@media screen and (max-width:1920px){
    .top_image .img2{
        position: absolute;
        top: 5.2vw;
        left: auto;
        right: 10vw;
        z-index: 1:
    }

    .top_slide2 {
        position: relative;
        width: 55.2vw;
        height: 50vw;
        /*    overflow: hidden;*/
    }
    .slide-image2{
        padding-left: 0.3125vw;
    }
    .mask1{
        width:53.64vw;
        height:33.85vw;
    }
}

/* 　▼▼▼　スライドの枚数が変わったら、％を調整する  **/
/* 6枚→33.3％　8枚→25％　動きを見ながら調整する　 */


@keyframes zoomup {
    0% {
        background-size: 100% auto;
    }
    25% {
        background-size: 140% auto;
    }
    100% {
        background-size: 140% auto;
    }
}
/* 　▼▼▼　スライドの枚数が変わったら、％を調整する  **/
/* 6枚、8枚では同じでいいかも　・・・　動きを見ながら調整する　 */
@keyframes slider-2 {
    0% {
        opacity: 0;
        z-index: 10;
    }
    10% {
        opacity: 1;
    }
    18% {
        opacity: 1;
        top: 0;
        left: 0;
    }
    18.5% {
        top: 0;
    }
    22% {
        top: 60px;
        left: -60px;
        z-index: 11;
        opacity: 0;
    }
    22.6% {
        z-index: 10;
    }
    100% {
        opacity: 0;
    }
}



@media screen and (max-width:910px){


    .top_image .img2{
        width: 90%;
        margin: auto;
        position: static;
    }    
    .top_slide2 {
        width: 100%;
        height: 80vw;
    }
    .slide-image2{
        background-size: 101% auto;
        background-position: left bottom;
    }
    .mask1{
        width:100%;
        height:auto;
        aspect-ratio: 5 / 3.1;
    }

}








































main{
    position: relative;
    z-index: 20;
}

.top_ttl{
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    margin-bottom: 50px;
}
.top_ttl .en{
    font-size: 20px;
    line-height: 1.2eml;
    margin-bottom: 15px;
}
.top_ttl .ja{
    font-size: 40px;
    line-height: 1.2em;
    color: #000224;
}

@media screen and (max-width:910px){
    .top_ttl{
        margin-bottom: 30px;
    }
    .top_ttl .en{
        font-size: 16px;
        line-height: 1.2eml;
        margin-bottom: 10px;
    }
    .top_ttl .ja{
        font-size: 30px;
        line-height: 1.2eml;
    }

}

@media screen and (max-width:640px){

    .top_ttl .ja{
        font-size: 25px;
        line-height: 1.2eml;
    }
    
}






.top01{
    width: 100%;
    max-width: 1920px;
    margin: auto;
    display: flex;
    flex-flow: row-reverse;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: -60px;
    margin-top: -200px;
}
.top01 .img{
    width: 40%;
    height: 680px;
}
.top01 .img img{
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: right;
}
.top01 .txt{
    width: 55%;
    padding-top: 50px;
}
.top01 .txt ._in{
    width: 95%;
    max-width: 710px;
    
}
.top01 .txt .btn{
    margin-top: 50px;
}


@media screen and (max-width:1300px){
    .top01{
        margin-top: -15vw;
    }
}

@media screen and (max-width:910px){

    .top01{
        display: block;
        margin-bottom: 40px;
        margin-top: 80px;
    }
    
    .top01 .img{
        width: 100%;
        height: auto;
        text-align: center;
    }
    .top01 .img img{
        width: auto;
        height: auto;
        object-fit: contain;
    }
    .top01 .txt{
        width: 100%;
        padding-top: 0;
        margin-bottom: 30px;
    }
    .top01 .txt ._in{
        width: 90%;
        margin: auto;
        max-width: initial;
        max-width: auto;
    }
    .top01 .txt .btn{
        margin-top: 30px;
    }


}

@media screen and (max-width:640px){
    .top01{
        margin-bottom: 0;
        margin-top: 30px;
    }


}


























.top02{
    padding-top: 200px;
    padding-bottom: 150px;
    background: url(../img/top/top02_bg.jpg) center top no-repeat;
}

.top02 .txt{
    position: relative;
    margin-bottom: 80px;
}
.top02 .txt .btn{
    position: absolute;
    left: 0;
    top: 120px;
}
.top02 .txt dl{
    justify-content: flex-start;
}
.top02 .txt dt{
    width: 320px;
}
.top02 .txt dd{
    width: calc(100% - 320px);
    max-width: 650px;
    padding-top: 30px;
}

.item-nav{
    width: 100%;
    max-width: 1600px;
    margin: auto;
}
.item-nav li{
    width: 50%;
}
.item-nav li a{
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1.05;
    position: relative;
    color: #fff;
    background-size: cover;
}
.item-nav li.bg01 a{
    background-image: url(../img/top/top02_bnr01.jpg);
}
.item-nav li.bg02 a{
    background-image: url(../img/top/top02_bnr02.jpg);
}
.item-nav li.bg03 a{
    background-image: url(../img/top/top02_bnr03.jpg);
}
.item-nav li.bg04 a{
    background-image: url(../img/top/top02_bnr04.jpg);
}
.item-nav li a:after{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(00,48,84,0.3);
    content: "";
    transition: 0.8s;
}
.item-nav li a:hover:after{
    background-color: rgba(00,48,84,0.5);
}
.item-nav li a .sub1{
    position: absolute;
    left: 40px;
    bottom: 40px;
    z-index: 3;
}
.item-nav li a .sub2{
    position: absolute;
    right: 30px;
    bottom: 40px;
    z-index: 3;
    width: 55%;
    line-height: 1.6em;
}
.item-nav li a .sub1 .top_ttl{
    margin-bottom: 10px;
}
.item-nav li a .sub1 .top_ttl .ja{
    color: #fff;
}
.item-nav li a .sub1 .more{
    width: 140px;
    padding: 10px 0;
    background: url(../img/common/arrow_maru_w.png) right center no-repeat;
    background-size: 35px auto;
}

@media (min-width:911px) and (max-width:1300px){
    .item-nav li a .sub1 .top_ttl .ja{
        font-size: 3vw;
        color: #fff;
    }
    .item-nav li a .sub2{
        width: 50%;
    }

}

@media screen and (max-width:910px){
    .top02{
        padding-top: 80px;
    }
    
    .top02 .txt{
        margin-bottom: 40px;
    }
    .top02 .txt .btn{
        position: static;
        margin-top: 30px;
    }
    .top02 .txt .btn a{
        margin: auto;

    }
    .top02 .txt dt{
        width: 100%;
    }
    .top02 .txt dd{
        width: 100%;
        padding-top: 0;
    }

    .item-nav li a{
        aspect-ratio: 1 / 0.8;
    }
    .item-nav li a .sub1{
        top: 20px;
        left: 20px;
        bottom: auto;
    }
    .item-nav li a .sub2{
        right: 20px;
        bottom: 20px;
        width: calc(100% - 40px);
    }

}

@media screen and (max-width:690px){
    .top02{
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .item-nav{
        padding: 0 5%;
    }
    .item-nav li{
        width: 100%;
    }

    .item-nav li a{
        aspect-ratio: unset;
        height: auto;
        padding: 20px;
    }
    .item-nav li a .sub1{
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-bottom: 20px;
    }
    .item-nav li a .sub2{
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
    }

    .item-nav li a .sub1 .top_ttl .en{
        margin-bottom: 0;
    }

}














.top03.proce_ttl_box {
    background-image: url(../img/top/top03_bg.jpg);
}


.top03 .top_ttl{
    width: 100%;
    text-align: center;
    padding: 30px 0 50px;
    background: url(../img/top/top03_bg_txt.png) center center/contain no-repeat;
    color: #fff;
    margin-bottom: 20px;
}
.top03 .top_ttl .en{
    margin-bottom: 10px;
}
.top03 .top_ttl .ja{
    color: #fff;
}
.top03 .btn{
    margin-top: 50px;
}
.top03 .btn a{
    margin: auto;
}

@media screen and (max-width:910px){
    .top03 .top_ttl{
        padding: 20px 0 40px;
    }
}










.top04{
    padding-top: 140px;
    padding-bottom: 200px;
}
.top04 .inner{
    width: 100%;
    max-width: 1600px;
    margin: auto;
    position: relative;
}

.top04 .img{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}
.top04 .txt1{
    max-width: 700px;
    margin-left: 600px;
    padding-right: 3%;
    padding-bottom: 40px;
}
.top04 .txt1 .btn{
    margin-top: 80px;
}

.top04 .txt2{
    margin-left: 300px;
    background: url(../img/top/top04_bg.jpg) center top/cover no-repeat;
    padding-top: 130px;
    padding-bottom: 130px;
    padding-left: 300px;
}
.top04 .txt2 ul{
    width: 760px;
}
.top04 .txt2 li{
    width: 48%;
    margin-bottom: 20px;
}
.top04 .txt2 li a{
    display: block;
    width: 100%;
    padding: 25px;
    color: #fff;
    font-size: 18px;
    line-height: 1.2em;
    border-bottom: solid 1px #fff;
    background-image: url(../img/common/arrow_maru_w.png);
    background-position: 98% center;
    background-repeat: no-repeat;
    background-size: 34px auto;
}
.top04 .txt2 li a:hover{
    filter: brightness(0.7);
}

@media (min-width:911px) and (max-width:1400px){

    .top04 .img{
        width: 37.5vw;
    }
    .top04 .txt1{
        margin-left: 42.85vw;
    }
    .top04 .txt1 .btn{
        margin-top: 5.7vw;
    }
    .top04 .txt2{
        margin-left: 21.85vw;
        padding-top: 9.28vw;
        padding-bottom: 9.28vw;
        padding-left: 21.42vw;
    }
    .top04 .txt2 ul{
        width: 98%;
        max-width: 700px;
    }
    
}

@media screen and (max-width:910px){

    .top04{
        padding-top: 80px;
        padding-bottom: 60px;
    }
    
    .top04 .inner{
        padding-left: 5%;
        padding-right: 5%;
    }
    .top04 .img{
        position: static;
        text-align: center;
    }
    .top04 .txt1{
        width: 100%;
        margin-left: 0;
        padding-right:0;
        padding-bottom: 40px;
    }
    .top04 .txt1 .btn{
        margin-top: 30px;
    }

    .top04 .txt2{
        width: 100%;
        margin-left: 0;
        padding: 40px 3%;
        margin-bottom: 30px;
    }
    .top04 .txt2 ul{
        width: 100%;
    }
    .top04 .txt2 li{
        width: 48%;
        margin-bottom: 20px;
    }
    .top04 .txt2 li a{
        padding: 20px;
        font-size: 16px;
        line-height: 1.2em;
        background-size: 30px auto;
    }

}

@media screen and (max-width:480px){
    .top04 .txt2{
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .top04 .txt2 li{
        width: 100%;
        margin-bottom: 10px;
    }


}












.top05{
    width: 100%;
    height: 600px;
    background: url(../img/top/top05_bg.jpg) center center/cover no-repeat;
    display: block;
    padding-top: 70px;
    position: relative;
    margin-bottom: 0;
}

.top05 .img {
    position: absolute;
    left: 55%;
    top: auto;
    bottom: 0;
}

.top05 .txt2{
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    background: url(../img/recruit/osumi_txt.png) left center no-repeat;
    padding-left: 200px;
}
.top05 .txt2 dl{
    width: 470px;
    color: #fff;
}
.top05 .txt2 dt{
    font-size: 46px;
    line-height: 1.3em;
    margin-bottom: 40px;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
}
.top05 .txt2 dt .en{
    font-size: 20px;
    line-height: 1.2em;
    margin-bottom: 20px;
}
.top05 .txt2 dd{
    font-size: 15px;
    line-height: 1.7em;
}
.top05 .txt2 dd.btn{
    margin-top: 30px;
}

@media screen and (max-width:1440px){
    .top05{
        height: auto;
        padding-top: 5vw;
        padding-bottom: 10vw;
    }
    .top05 .txt2{
        margin-top: 5.5vw;
        margin-left: 0;
        background-size: 48.6vw auto;
        background-position: left 3vw;
        padding-left: 13.8vw;
    }

    .top05 .txt2 dl{
        width: 40vw;
    }
    .top05 .txt2 dt{
        font-size: 3.29vw;
        line-height: 1.3em;
        margin-bottom: 20px;
    }

}

@media screen and (max-width:640px){
    .top05{
        padding-bottom: 0;
    }

    .top05 .txt{
        padding-top: 0;
    }
    .top05 .txt2{
        margin-top: 40px;
        background-size: 60vw auto;
        background-position: 20px 3vw;
    }
    .top05 .txt2 dl{
        width: 95%;
    }
    .top05 .txt2 dt{
        font-size: 20px;
        line-height: 1.3em;
        margin-bottom: 15px;
    }
    .top05 .txt2 dd{
        font-size: 14px;
        line-height: 1.7em;
    }

    .top05 .img {
        position: static;
        margin-left: auto;
        width: 80vw;
    }

}






.top06{}
.rec_slide2{
    width: 100%;
    height: 350px;
    background: url(../img/top/top06_slide.jpg)  center center repeat-x;/* 横の時は　repeat-x */
    -moz-animation: kurukuru2 80s linear infinite;
    animation: kurukuru2 80s linear infinite;
}
/* 横にスクロール　*/
@keyframes kurukuru2 {
    0% {background-position: 2400px 0;}
    100% {background-position:  -2000px 0;}
}
@-moz-keyframes kurukuru2 {
    0% {background-position: 2400px 0;}
    100% {background-position:  -2400px 0;}
}

@media screen and (max-width:640px){

    .rec_slide2{
        width: 100%;
        height: 245px;/* 70% */
        background-size: auto 100%;
    }
    @keyframes kurukuru2 {
        0% {background-position: 1680px 0;}
        100% {background-position:  -1680px 0;}
    }
    @-moz-keyframes kurukuru2 {
        0% {background-position: 1680px 0;}
        100% {background-position:  -1680px 0;}
    }



}





.top07{
    padding-top: 170px;
    padding-bottom: 50px;
    
}
.top07 ._in{
    position: relative;

}
.top07 .btn{
    position: absolute;
    left: 0;
    bottom: 0;

}
.top07 .ttl{
    width: 290px;
}
.top07 .top_news{
    width: calc(100% - 290px);
}

.top_news ul{
    width: 100%;
    border-top: solid 1px #001f40;
}
.top_news li{
    border-bottom: solid 1px #001f40;
}
.top_news li a {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 20px;
    background: url(../img/common/arrow_maru_gr.png) 98% center no-repeat;
    background-size: 33px auto;
}
.top_news li a:hover{
    background-color: #f5f7fa;

}
.top_news li .ymd{
    width: 80px;
}
.top_news li .cat-name{
    width: 120px;
    text-align: center;
    color: #fff;
    font-size: 14px;
}
.top_news li .cat-name span{
    padding: 3px 15px;
    background-image: url(../img/common/bg_ao.png);
    background-size: cover;
    color: #fff;
    font-size: 14px;
}
.top_news li .p-ttl{
    width: calc(100% - 200px);
    padding-right: 30px;
}


@media screen and (max-width:910px){
    .top07{
        padding-top: 100px;
        padding-bottom: 10px;

    }
    
    .top07 .btn{
        position: static;
        width: 100%;

    }
    .top07 .btn a{
        margin: auto;
    }
    
    .top07 .top_news{
        width: 100%;
        margin-bottom: 40px;
    }

    
    
}

@media screen and (max-width:640px){
    .top07{
        padding-top: 70px;
    }

    .top07 .top_news{
        margin-bottom: 30px;
    }
    .top_news li a{
        background-image: none;
    }

    .top_news li .p-ttl{
        width: 100%;
        padding-right: 0;
        margin-top: 10px;
    }

    
}











@media print{
}