@charset "utf-8";

h2 {
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: 1.2em;
    color: #444;
}

h2 span {
    display: block;
    margin-bottom: 10px;
    font-size: 2.5em;
    font-family: "Cormorant Garamond", serif;
    color: #89b6df;
}

.note {
    margin: 30px 0 20px;
    font-size: 0.9em;
    line-height: 1.8em;
    text-align: justify;
}

.copy {
    margin-bottom: 20px;
    font-size: 1.7em;
    color: #333;
    letter-spacing: 0.04em;
    line-height: 1.8em;
}

.text {
    font-size: 1em;
    color: #555;
    letter-spacing: 0.04em;
    line-height: 2.1em;
    text-align: justify;
}

.overview {
    position: relative;
    padding-left: 400px;
}

.overview h2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    text-align: right;
}

.overview .text a,
.effort p a {
    color: #f66;
    text-decoration: underline;
}

.overview .text a:hover,
.effort p a:hover {
    color: #06c;
}

header .visual {
    position: relative;
    padding-top: 35%;
    background: url(../images/visual_pc.jpg) no-repeat center;
    background-size: cover;
}

header .visual h1 {
    position: absolute;
    top: 50%;
    left: 50px;
    font-size: 1.5em;
    letter-spacing: 0.4em;
    line-height: 2em;
    transform: translate(0, -50%);
}

#vision .maxWidth {
    padding-bottom: 0;
}

#vision .profile {
    position: relative;
    margin: 50px 0 0;
    padding: 50px 0;
    border-top: 1px solid #999;
}

#vision .profile h3 {
    position: relative;
    margin-bottom: 40px;
    font-size: 1.2em;
    color: #49c;
    line-height: 1em;
    letter-spacing: 0.06em;
    text-align: center;
}

#vision .profile h3:after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    width: 30px;
    margin: auto;
    border-top: 1px solid #49c;
}

#vision .profile .ceo {
    position: absolute;
    top: 390px;
    left: 35px;
    font-size: 0.9em;
    color: #555;
    line-height: 1em;
}

#vision .profile .txt {
    min-height: 300px;
    padding-left: 260px;
    font-size: 0.9em;
    color: #555;
    line-height: 2em;
    text-align: justify;
    background: url(../images/profile.png) no-repeat;
}

/*　　主な取り組み　　*/

#efforts {
    margin: 0 auto;
}

#efforts .maxWidth {
    padding-bottom: 50px;
}

#efforts .effort_list {
    width: 100%;
    padding: 30px 0;
    border-top: 5px solid #49c;
}

#efforts .eft03 {
    padding-bottom: 0;
}

#efforts .effort_list h3 {
    position: relative;
    margin-bottom: 40px;
    padding-top: 105px;
    font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
    font-size: 1.3em;
    color: #333;
    line-height: 1.5em;
    text-align: center;
}

#efforts .effort_list h3:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -20px;
    width: 50px;
    margin: auto;
    border-top: 1px solid #999;
}

#efforts .eft01 h3 {
    background: url(../images/icon/icon03.svg) no-repeat top center;
}

#efforts .eft02 h3 {
    background: url(../images/icon/icon01.svg) no-repeat top center;
}

#efforts .eft03 h3 {
    background: url(../images/icon/icon02.svg) no-repeat top center;
}

#efforts .effort_list h3 span {
    font-size: 80%;
}

#efforts .effort_list p {
    overflow: hidden;
    padding: 0;
    font-size: 0.9em;
    color: #555;
    letter-spacing: 0.04em;
    line-height: 2.1em;
    text-align: justify;
}

#efforts .effort_list .more {
    display: none;
    margin-top: 20px;
}

#efforts .effort_list .moreBtn {
    display: block;
    width: 160px;
    height: 36px;
    line-height: 36px;
    margin: 15px auto;
    font-size: 16px;
    color: #999;
    text-align: center;
    background: #fff;
    border: 1px solid #999;
    border-radius: 18px;
    cursor: pointer;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#efforts .effort_list .moreBtn:hover {
    color: #fff;
    background: #49c;
    border: 1px solid #49c;
}

#efforts .effort_list .moreBtn:before {
    content: "READ MORE";
}

#efforts .effort_list .moreBtn.active:before {
    content: "CLOSE";
}

#efforts .effort_list .contest {
    margin: 25px 0 35px;
    padding: 25px 25px 20px;
    background: #e7f0f9;
    border-radius: 10px;
}

#efforts .effort_list .contest .head {
    margin-bottom: 15px;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3em;
    text-align: center;
}

#efforts .effort_list .contest ul {
    max-width: 650px;
    margin: 0 auto 25px;
}

#efforts .effort_list .contest ul li {
    margin-top: 10px;
    padding-left: 30px;
    text-indent: -30px;
    font-size: 0.95em;
    line-height: 1.6em;
    text-align: justify;
}

#efforts .effort_list .contest ul li:before {
    display: inline-block;
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 5px;
    vertical-align: sub;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%232ea7e0" d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z" /></svg>')
        no-repeat center;
    background-size: cover;
}

#efforts .effort_list .contest ul li:first-child {
    margin-top: 0;
}

#efforts .effort_list .contest ul li a:hover {
    color: #d00;
    text-decoration: underline;
}

#efforts .effort_list .contest .notes {
    font-size: 0.85em;
    color: #666;
    line-height: 1.8em;
    text-align: justify;
}

#jobbank {
    background: linear-gradient(90deg, #4199cc, #89b6df);
}

#jobbank .maxWidth {
    padding-bottom: 0;
}

#jobbank .note {
    color: #fff;
}

#jobbank h2,
#jobbank h2 span {
    color: #fff;
}

#jobbank .more {
    display: none;
    margin-bottom: 40px;
    padding: 30px;
    background: #fff;
}

#jobbank .moreBtn {
    display: block;
    width: 100%;
    height: 50px;
    text-align: center;
    border-top: 1px solid #fff;
    cursor: pointer;
}

#jobbank .moreBtn:before {
    display: block;
    left: 0;
    right: 0;
    content: "";
    width: 35px;
    height: 35px;
    margin: 5px auto 0;
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23ffffff" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>') no-repeat center;
    background-size: cover;
}

#jobbank .moreBtn.active:before {
    background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path fill="%23ffffff" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" /></svg>') no-repeat center;
}

#jobbank .jobList li {
    padding: 20px 0;
    border-top: 1px dashed #999;
}

#jobbank .jobList li:first-child {
    padding-top: 0;
    border-top: none;
}

#jobbank .jobList li:last-child {
    padding-bottom: 0;
}

#jobbank .jobList li div {
    position: relative;
    padding: 8px 170px 8px 15px;
    border-left: 10px solid #89b6df;
}

#jobbank .jobList li .company {
    margin-bottom: 5px;
    font-size: 1em;
    line-height: 1em;
}

#jobbank .jobList li .occupation {
    font-size: 1.2em;
    line-height: 1.5em;
}

#jobbank .jobList li .btn {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    font-size: 0.8em;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    background: #49c;
    border-radius: 8px;
}

#jobbank .jobList li .btn span {
    position: relative;
    top: 20%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#jobbank .jobList li .btn:hover {
    opacity: 0.6;
}

#jobbank .formBtn {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background: #fff;
}

#jobbank .formBtn li {
    display: inline-block;
    width: 260px;
    margin: 0 10px;
}

#jobbank .formBtn li:first-child {
    width: 100%;
    margin: 0 0 25px;
    padding: 0 50px;
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0.06em;
    color: #444;
}

#jobbank .formBtn li a {
    display: block;
    padding: 20px;
    font-size: 1em;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    background: #49c;
    border-radius: 8px;
}

#jobbank .formBtn li a:hover {
    opacity: 0.6;
}

#topics {
    position: relative;
}

#topics:after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    width: 1300px;
    height: 320px;
    margin: auto;
    background: linear-gradient(90deg, #4199cc, #89b6df);
    z-index: -1;
}

#topics h2,
#topics h2 span {
    color: #fff;
}

#topics .post p {
    margin: 20px 0 15px;
    font-family: "Raleway";
    font-size: 0.9em;
    line-height: 1;
    color: #555;
}

#topics .post p span {
    font-size: 90%;
}

#topics .post p .news {
    color: #036eb8;
}

#topics .post p .meeting {
    color: #e4007f;
}

#topics .post p .seminar {
    color: #f39800;
}

#topics .post h3 {
    margin: 10px 0;
    font-size: 1.1em;
    line-height: 1.5em;
    color: #333;
    text-align: justify;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#topics .post a:hover h3 {
    color: #49c;
}

#topics .btns {
    text-align: center;
}

#topics .btns a {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1em;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    background: #49c;
    border-radius: 8px;
}

#topics .btns a:hover {
    opacity: 0.6;
}

#topics .facebook {
    margin-top: 80px;
    text-align: center;
}

#topics .facebook ul {
    margin: 0 auto;
    padding-right: 20px;
    letter-spacing: -0.4em;
}

#topics .facebook li {
    display: inline-block;
    width: 500px;
    margin-right: 20px;
    letter-spacing: 0;
    vertical-align: top;
}

#topics .facebook li:nth-child(2) {
    margin-right: -20px;
}

#topics .facebook li .wtjc,
#topics .facebook li .place25 {
    display: block;
    height: 55px;
    margin-bottom: 10px;
    line-height: 55px;
    color: #fff;
    text-align: center;
}

#topics .facebook li .wtjc {
    background: linear-gradient(90deg, #49c, #89b6df);
}

#topics .facebook li .place25 {
    background: linear-gradient(90deg, #fff110, #00a0e9);
}

#outline {
    background: url(../images/bg_cross.png), linear-gradient(90deg, #4199cc, #89b6df);
    background-repeat: repeat-y;
    background-position: top center;
}

#outline h2,
#outline h2 span {
    color: #fff;
}

#outline ul {
    width: 750px;
}

#outline li {
    position: relative;
    width: 100%;
    margin-top: 5px;
    padding: 15px 10px 15px 145px;
    font-size: 0.9em;
    line-height: 1.5em;
    background: #fff;
    border-radius: 6px;
}

#outline li span {
    display: inline-block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 120px;
    color: #49c;
    text-align: right;
}

#contact .left {
    float: left;
    width: 520px;
}

#contact .right {
    float: left;
    width: auto;
    padding-left: 80px;
}

#contact .right ul {
    letter-spacing: -0.4em;
}

#contact .right li {
    display: inline-block;
    letter-spacing: 0;
    vertical-align: top;
}

#contact .right li:first-child {
    margin-right: 50px;
}

#contact .right li .acount {
    margin-bottom: 15px;
    line-height: 1.6em;
}

#contact .right li .acount span {
    font-size: 80%;
    color: #49c;
}

#contact .right li .lineBtn {
    width: 150px;
    height: auto;
}

#contact .right .qrcode img {
    width: 200px;
    height: auto;
    border: 1px solid #ddd;
}

#contact section:after {
    content: "";
    display: block;
    clear: both;
}

#contact a.btn {
    display: block;
    padding: 20px;
    font-size: 0.9em;
    line-height: 1.5em;
    color: #fff;
    text-align: center;
    background: #49c;
    border-radius: 8px;
}

#contact a.btn:hover {
    opacity: 0.6;
}

@media screen and (min-width: 1301px) {
}

@media screen and (max-width: 1300px) {
    #topics:after {
        width: 100%;
    }

    #topics .facebook li {
        width: 50%;
        max-width: 500px;
    }
}

/*　　タブレット設定　　*/

@media screen and (max-width: 1024px) {
    .overview {
        padding-left: 0;
        padding-bottom: 0;
    }

    .overview h2 {
        position: relative;
        top: inherit;
        left: inherit;
        width: 100%;
        text-align: center;
    }

    .overview h2 br {
        display: none;
    }

    .overview .copy {
        margin-bottom: 15px;
        font-size: 1.8em;
        color: #333;
        letter-spacing: 0.08em;
        line-height: 1.8em;
    }

    h2 {
        margin-bottom: 35px;
        text-align: center;
    }

    #efforts ul {
        margin: 0 auto;
        padding: 0;
    }

    #efforts .effort_list {
        width: 100%;
        padding: 20px 0 30px;
        border-left: none;
    }

    #efforts .effort_list p {
        padding: 0;
    }

    #topics:after {
        top: 0;
    }

    #jobbank .more {
        padding: 25px;
    }

    #contact .left {
        float: none;
        width: 100%;
    }

    #outline ul {
        width: 100%;
    }

    #contact .right {
        float: none;
        width: 100%;
        padding-top: 20px;
        padding-left: 0;
        text-align: center;
    }

    #contact .right li {
        text-align: left;
    }
}

@media screen and (max-width: 800px) {
    #vision .profile .ceo {
        position: relative;
        top: inherit;
        left: inherit;
        padding-top: 38vw;
        font-size: 1.1em;
        color: #555;
        line-height: 1.2em;
        text-align: center;
        background: url(../images/profile.png) no-repeat top center;
        background-size: 37vw auto;
    }

    #vision .profile .txt {
        min-height: inherit;
        margin-top: 20px;
        padding-left: 0;
        background: none;
    }

    #jobbank .more {
        padding: 20px;
    }

    #jobbank .jobList {
        padding: 10px;
    }

    #jobbank .jobList li div {
        padding: 8px 8px 8px 10px;
    }

    #jobbank .jobList li .occupation {
        font-size: 1.1em;
    }

    #jobbank .jobList li .btn {
        position: relative;
        top: inherit;
        bottom: inherit;
        right: inherit;
        width: 100%;
        margin-top: 15px;
        padding: 20px;
        font-size: 0.8em;
        line-height: 1em;
    }

    #jobbank .jobList li .btn span {
        position: relative;
        top: inherit;
        -webkit-transform: none;
        transform: none;
    }

    #jobbank .jobList li .btn span br {
        display: none;
    }

    #topics .facebook ul {
        padding-right: 0;
    }

    #topics .facebook li {
        width: 100%;
        margin-right: 0;
    }

    #topics .facebook li:nth-child(1) {
        margin-bottom: 50px;
    }

    #topics .facebook li:nth-child(2) {
        margin-right: 0;
    }
}

/*　　スマートフォン設定　　*/

@media screen and (max-width: 600px) {
    header .visual {
        padding-top: 100%;
        font-size: 4.8vw;
        background: url(../images/visual_sp.jpg) no-repeat center;
        background-size: cover;
    }

    header .visual h1 {
        top: inherit;
        bottom: 20px;
        left: 10vw;
        font-size: 5vw;
        transform: none;
    }

    h2 span {
        font-size: 2.2em;
    }

    #vision section .overview {
        padding-bottom: 10vw;
    }

    #vision section .overview .copy {
        font-size: 1.5em;
    }

    #vision .profile {
        margin: 8vw ​0 0;
        padding: 8vw 0 0;
    }

    #vision .profile .ceo {
        padding-top: 49vw;
        background-size: 45vw auto;
    }

    #efforts ul {
        padding: 0 2.5vw;
    }

    #efforts .effort_list h3 {
        margin-bottom: 3vw;
        padding-bottom: 3vw;
    }

    #efforts .effort_list h3:after {
        bottom: 1vw;
    }

    #efforts .effort_list .contest ul {
        margin-bottom: 3vw;
        padding: 0;
    }

    #jobbank .jobList {
        padding: 3vw;
    }

    #jobbank .jobList li {
        padding: 4vw 0;
    }

    #jobbank .jobList li div {
        padding: 0;
        border-left: none;
    }

    #jobbank .jobList li .company {
        margin-bottom: 1.5vw;
    }

    #jobbank .jobList li .btn {
        margin-top: 2vw;
    }

    #jobbank .formBtn {
        padding: 8vw ​0;
    }

    #jobbank .formBtn li {
        width: 300px;
        margin: 0;
    }

    #jobbank .formBtn li:first-child {
        margin-bottom: 5vw;
    }

    #jobbank .formBtn li:last-child {
        margin-top: 10px;
    }

    #jobbank .formBtn li a {
        font-size: 1em;
    }

    #topics .facebook {
        /* margin-top:0; */
    }

    #outline li {
        padding: 2vw 3vw;
        line-height: 1.5em;
    }

    #outline li span {
        display: block;
        position: relative;
        top: inherit;
        left: inherit;
        width: 100%;
        margin-bottom: 5px;
        text-align: left;
    }

    #contact .right {
        padding-top: 0;
    }

    #contact .right ul {
        padding: 6vw;
        border-radius: 6px;
        background: #e7f0f9;
    }

    #contact .right li {
        width: 100%;
        text-align: center;
    }

    #contact .right li .acount {
        font-size: 1.4em;
    }

    #contact .right li:first-child {
        margin-right: 0;
        margin-bottom: 5vw;
    }
}