@charset "utf-8";
@media screen and (max-width:1200px){
    /*1200 hightlight*/
    .h_type02{
        width:70%;
    }
    /*1200 list*/
    ul.tags li{
        font-size:12px;
    }
    ul.dep-list li .text-box{
        padding:0 2%;
    }
    /*1200 header*/
    .header-nav{
        width:70%;
    }
    /*1200 footer*/
    footer ul ul li:not(:nth-of-type(1)){
        font-size:14px;
    }
    /*1200 mid-career*/
    section.point.mid-career h2{
        width:220px;
    }
    section.point.mid-career .box02 .img-box {
        width:230px;
        top:inherit;
        bottom:50px;
    }
    section.point.mid-career .box02 .text-box p br.middle{
        display: block;
    }
}
@media screen and (max-width:1024px){
    /*1024 common*/
    .pd100{
        padding:50px 0;
    }
    .pd1-5{
        padding:50px 0 35px;
    }
    /*1024 highlight*/
    .h_type01{
        font-size:32px;
    }
    .h_type02{
        font-size:32px;
    }
    .h_typeBG{
        top:32px;
        font-size:100px;
    }
    /*1024 list*/
    ul.dep-list .link-box a{
        width:125px;
        font-size:16px;
    }
    /*1024 eyecatch*/
    .eyecatch.top, .eyecatch.lower01{
        /*margin-top:75px;*/
		margin-top:0px;
    }
    .eyecatch.top .title-box{
        top:45%;
        width:85vw;
    }
    .eyecatch.top .title-box img{
        width:90%;
        margin:auto;
    }
    .eyecatch.top .title-box ul{
        justify-content: space-between;
    }
    .eyecatch.top .title-box ul li{
        width:30%;
    }
    .eyecatch.top .title-box ul li .link-btn.type01{
        width:100%;
    }
    .eyecatch.lower01 .title-box{
        top:35%;
    }
    /*1024 header*/
    header .logo{
        height:40px;
    }
    .header-nav{
        width:70%;
    }
    /*1024 footer*/
    footer ul{
        flex-flow: column;
    }
    footer ul:nth-child(1){
        border-bottom:solid 1px;
    }
    footer ul ul{
        margin:0 auto;
        padding:25px;
    }
    footer small{
        padding:25px;
    }
    /*1024 index*/
    .message.top{
        padding:100px 0;
    }
    .message.top .wrap{
        flex-flow: column;
    }
    .message.top .wrap .img-box{
        width:50%;
        margin-bottom:35px;
    }
    .message.top .wrap p{
        text-align: center;
    }
    section.purpose .box01{
        padding:100px 0;
    }
    section.purpose .h_typeBG{
        left:-10px;
    }
    section.benefit{
        padding:100px 0;
    }
    /*1024 new-graduate*/
    ul.point li{
        justify-content:flex-start;
        aspect-ratio:inherit;
        padding:35px 0;
    }
    ul.point li h3{
        margin:0 2em 15px;
        font-size:18px;
    }
    ul.point li h3 img{
        width:45px;
        height:45px;
    }
    ul.point li p{
        width:75%;
    }
    section.concept.new-graduate .box01{
        padding-bottom:100px;
    }
    section.sougou.new-graduate p{
        margin:35px 0 50px;
    }
    /*1024 mid-career*/
    section.message.mid-career{
        background-size:contain;
    }
    ul.wp-list{
        gap:35px;
        grid-template-columns: repeat(3, 1fr);
    }
    .tab_item{
        height:80px;
        font-size:20px;
    }
    .tab_content{
        padding:50px;
    }
    /*1024 part*/
    section.message.part{
        background-size:420px;
    }
}
@media screen and (max-width:1000px){
    /*1000 view*/
    .pc {
        display: none;
    }
    .ip{
        display: block;
    }
    /*1000 eyecatch*/
    .hero {
        height:90vh;
        aspect-ratio: 4 / 5;
        border-radius: 4px;
    }
    .eyecatch.lower01 .title-box h1, .eyecatch.lower02 .title-box h1{
        font-size:36px;
    }
    .eyecatch.top .title-box{
        top:inherit;
        bottom:0;
        width:95vw;
    }
    .eyecatch.top .title-box img{
        width:75%;
    }
    .eyecatch.top .title-box ul{
        flex-flow: column;
        gap:12px;
    }
    .eyecatch.top .title-box ul li{
        width:100%;
        max-width:600px;
        margin:auto;
    }
    .eyecatch.top .title-box ul li .link-btn.type01{
        height:45px;
    }
    /*1000 hightlight*/
    .h_type02{
        width:100%;
    }
    .h_typeBG{
        top:26px;
        font-size:80px;
    }
    .ribbon.type01{
        line-height: 1.3em;
    }
    /*1000 link*/
    .link-btn.type01{
        height:55px;
        font-size:18px;
    }
    /*1000 header*/
    header{
        position: absolute;
    }
    #header_s {
        display: block;
        position: fixed;
        top: -70px;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        transition: .5s;
        z-index: 300;
    }
    #header_s .wrap{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin:auto;
        width:95vw;
        height:100%;
    }
    #header_s.active {
        top: 0;
    }
    #header_s img.logo {
        height: 30px;
    }
    /*1000 index*/
    ul.dep-list{
        flex-flow: row wrap;
        justify-content: center;
        gap:35px;
    }
    ul.dep-list li.wrap{
        flex-flow: column;
        justify-content: flex-start;
        width:47%;
    }
    ul.dep-list li .thumbnail{
        width:100%;
        height:auto;
    }
    ul.dep-list li .thumbnail img{
        border-bottom-left-radius: inherit;
        border-top-right-radius: 15px;
    }
    ul.dep-list li .text-box{
        width:90%;
        margin-top:25px;
    }
    ul.tags{
        flex-flow: column;
        margin-bottom:25px;
    }
    ul.dep-list .link-box{
        flex-flow: row nowrap;
        width:100%;
        margin:auto 0 25px;
    }
    section.purpose h3{
        margin-bottom:25px;
    }
    section.purpose .box01{
        flex-flow: column;
        justify-content: center;
        align-items: center;
        background-color:rgb(255,255,255,0.5);
    }
    section.purpose .box01.wd-large{
        width:100%;
    }
    section.purpose h3{
        font-size:46px;
    }
    section.purpose h3 span{
        font-size:58px;
    }
    section.purpose .text-box{
        text-align: center;
        align-items: center;
    }
    section.purpose .text-box a{
        margin:50px auto 0;
    }
    ul.benefit{
        flex-flow: row wrap;
        justify-content: center;
        gap:35px;
    }
    ul.benefit li{
        width:47%;
    }
    /*1000 new-graduate*/
    section.point.new-graduate{
        padding-bottom:100px;
    }
    ul.point{
        flex-flow: column;
        gap:35px;
    }
    ul.point li{
        width:100%;
    }
    ul.point li p{
        width:100%;
        text-align: center;
    }
    .interview-wrap .box01, .interview-wrap.reverse .box01{
        flex-flow: column;
    }
    .interview-wrap .img-box{
        width:100%;
    }
    .interview-wrap .img-box img{
        aspect-ratio:2/1;
        border-radius: 15px;
    }
    .interview-wrap .wrap{
        width:100%;
        margin:25px 0;
    }
    .interview-wrap h3{
        clip-path: polygon(2% 0, 98% 0, 100% 20%, 100% 80%, 98% 100%, 2% 100%, 0% 80%, 0% 20%);
    }
    .interview-wrap .box02 h5{
        font-size:20px;
    }
    section.more .wrap{
        justify-content: space-between;
        gap:inherit;
    }
    section.more .wrap .box01{
        width:48%;
    }
    section.concept.new-graduate{
        text-align: center;
    }
    section.concept.new-graduate .box01{
        align-items: center;
        padding-bottom:0px;
    }
    section.sougou.new-graduate .box01{
        flex-flow: column;
    }
    section.sougou.new-graduate .img-box{
        width:100%;
    }
    section.sougou.new-graduate .img-box img{
        aspect-ratio:2/1;
        object-position: 50% 30%;
    }
    ul.flow li p{
        font-size:18px;
    }
    /*1000 mid-career*/
    section.point.mid-career{
        padding:200px 0 50px;
    }
    section.point.mid-career h2{
        width:180px;
    }
    section.point.mid-career .box02 .border{
        padding-bottom:35px;
    }
    section.point.mid-career .box02 .text-box{
        width:90%;
        border-radius: 15px;
    }
    section.point.mid-career .box02 .img-box_wrap{
        display: flex;
    }
    section.point.mid-career .box02 .img-box{
        position: inherit;
        width:43%;
        height:auto;
    }
    /*1000 part*/
    section.message.part{
        background-size:380px;
        background-position:95% 90%;
    }
    /*1000 gist*/
    .gist.title h1, .lower03.title h1{
        font-size:28px;
    }
    .gist.title .area span{
        font-size:14px;
    }
    /*1000 policy*/
    section.policy.lower03.title{
        padding-top:inherit;
    }
    section.policy h2{
        font-size:20px;
    }
}
@media screen and (max-width:767px){
    /*767 common*/
    .sp {
        display: block;
    }
    body p{
        line-height: 1.6em;
        font-size:14px;
    }
    .page-top{
        right:4vw;
        bottom:10vh;
        width:45px;
        height:45px;
        font-size:16px;
    }
    .page-top img{
        width:15px;
    }
    .pd100{
        padding:35px 0;
    }
    /*767 eyecatch*/
    .eyecatch.top{
        aspect-ratio:inherit;
        min-height:500px;
    }
    .eyecatch.top .title-box img{
        width:100%;
    }
    .eyecatch.top .title-box p{
        margin:25px 0;
        font-size:16px;
        line-height: 1.3em;
    }
    .eyecatch.lower01, .eyecatch.lower02{
        height:auto;
        min-height:inherit;
        /*margin-top:75px;*/
		margin-top:0px;
        aspect-ratio:16/9;
    }
    .eyecatch.lower01 .title-box, .eyecatch.lower02 .title-box{
        top:30%;
    }
    .eyecatch.lower01 .title-box h1, .eyecatch.lower02 .title-box h1{
        font-size:28px;
        margin-bottom:10px;
    }
    .eyecatch.mid-career .title-box{
        top:25%;
        width:90vw;
        text-align: left;
    }
    /*767 highlight*/
    .h_type01, .h_type02{
        font-size:24px;
    }
    .ribbon.type01{
        width:95%;
        margin:25px 0 0;
        font-size:18px;
    }
    .ribbon.type02 {
        line-height: 1.3em;
        overflow-wrap: anywhere;
        line-break: strict;
        word-break: auto-phrase;
    }
    /*767 link*/
    .link-btn.type01{
        font-size:16px;
    }
    /*767 footer*/
    footer .logo{
        width:80%;
        margin:auto;
    }
    /*767 index*/
    img.bg.top{
        width:100%;
    }
    .message.top .wrap .img-box{
        width:90%;
    }
    .message.top{
        padding:50px 0;
    }
    ul.dep-list{
        margin:35px auto;
    }
    ul.dep-list li.wrap{
        width:100%;
    }
    ul.dep-list li .text-box h3{
        font-size:18px;
    }
    section.purpose .h_typeBG {
        right: 0;
        left: 0;
        margin: auto;
        text-align: center;
    }
    section.purpose .box01{
        padding:50px 0;
    }
    ul.benefit li{
        width:80%;
    }
    /*767 new-graduate*/
    .eyecatch.lower01 .title-box p, .eyecatch.lower02 .title-box p{
        font-size:16px;
    }
    ul.point{
        margin:35px auto;
    }
    section.point.new-graduate{
        padding-bottom:50px;
    }
    .interview-wrap{
        margin:35px 0 0;
    }
    .interview-wrap h4{
        font-size:20px;
    }
    .interview-wrap .box02{
        margin:35px 0 50px;
    }
    section.more .wrap{
        flex-flow: column;
        margin:25px 0 0;
    }
    section.more .wrap .box01{
        width:80%;
        margin:auto auto 25px;
    }
    section.concept.new-graduate{
        background-position: 15% 50%;
    }
    section.concept.new-graduate h2{
        font-size:24px;
    }
    section.sougou.new-graduate .box01{
        gap:35px;
    }
    section.sougou.new-graduate p{
        margin:25px 0 35px;
    }
    ul.flow{
        margin:25px auto 35px;
    }
    ul.flow li p{
        font-size:16px;
    }
    /*767 mid-career*/
    section.message.mid-career{
        background-size:cover;
        background-position: 50% 50%;
    }
    section.message.mid-career img.bg{
        width:60%;
    }
    section.point.mid-career{
        padding:150px 0 35px;
    }
    section.point.mid-career h2{
        width:150px;
    }
    section.point.mid-career .box02{
        padding:10px 0;
    }
    section.point.mid-career .box02 .border{
        margin:0 10px;
        border:dashed 3px #fff;
        border-radius: 15px;
    }
    section.point.mid-career .box02 .text-box{
        width:95%;
    }
    section.point.mid-career .box02 .img-box{
        width:48%;
    }
    /*767 part*/
    section.message.part{
        background-size:50%;
        background-position: right bottom;
    }
    section.point.part .title-box{
        flex-flow: column;
        align-items: center;
    }
    section.point.part .title-box h2{
        font-size:22px;
    }
    section.point.part .icon-box{
        display: flex;
        justify-content: space-between;
        width:90%;
    }
    section.point.part .icon-box img{
        object-fit: contain;
    }
    section.point.part .title-box img.left{
        width:90px;
        margin:0;
    }
    section.point.part .title-box img.right{
        width:70px;
    }
    section.point.part .title-box img.right.bottom{
        display: none;
    }
    section.point.part .title-box img.right.top{
        display: block;
    }
    section.point.part .text-box{
        margin:25px auto;
    }
    /*767 gist*/
    .gist.title h1, .lower03.title h1{
        font-size:24px;
    }
    .gist.type01 h2, .gist.appeal h2{
        font-size:22px;
    }
    .gist.outline ul{
        margin:25px;
    }
    .gist.outline p{
        margin: 25px 1em;
    }
    .gist.gallery ul{
        flex-flow: column;
        margin:25px 15px;
    }
    .gist.gallery ul li{
        width:100%;
    }
    .gist.details ul{
        margin:25px 0;
    }
    .gist.details li{
        padding:15px;
    }
    .gist.details li h3{
        width:7em;
    }
    .gist.details li p{
        width:60%;
    }
    /*767 form*/
    .form-box .wrap{
        padding:25px;
    }
    /*767 policy*/
    section.policy ul{
        font-size:14px;
    }
    /*767 tabs*/
    .tabs{
        margin:25px auto 50px;
    }
    .tab_item{
        font-size:16px;
        line-height: 1.3em;
    }
    .tab_content{
        padding:25px;
    }
    ul.wp-list{
        gap:35px 0;
        grid-template-columns: repeat(1, 1fr);
    }
    ul.wp-list li{
        width:100%;
    }
    ul.wp-list li img{
        aspect-ratio:16/9;
    }
    ul.wp-list li h3{
        margin-bottom:15px;
    }
}
@media screen and (max-width:500px){

    .link-btn.type01{
        width:90%;
        max-width:280px;
        min-width:200px;
        margin:auto;
    }
    .hero {
        aspect-ratio: 3 / 4;
    }
    .eyecatch.top .title-box ul li .link-btn.type01{
        width:90%;
        margin:auto;
    }
}
@media screen and (max-width:400px){
    section.purpose{
        overflow-x: hidden;
    }
    section.purpose .h_typeBG {
        width:100%;
        font-size: 58px;
    }
    section.benefit .h_typeBG{
        font-size:60px;
    }
}