@charset "utf-8";

/* CSS Document */

#contents {
    position: relative;
}

#contents #mainContents p img {
    width: 100%;
}

#contents #mainContents h1 span.subName {
    font-size: 18px
}

#mainvid {
    position: relative;
    margin-top: 20px;
    width: 100%;
    padding: 30% 0 0;
}

#mainvid02 {
    position: relative;
    margin-top: 20px;
    width: 100%;
    padding: 35% 0 0;
}

#mainvid li, #mainvid02 li {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: none;
}

#mainvid img, #mainvid02 img {
    width: 100%;
}

.section01 {
    margin-top: 30px;
    width: 100%;
    max-width: 880px;
    float: left;
    margin-right: 10px;
    display: flex;
    flex-flow: row wrap;
}

.section01 h2 {
    margin-bottom: 10px;
    line-height: 1;
}

.section01 img {
    width: 100%;
}

.section01 ul li .arrow {
    margin-top: 5px;
}

.section01 ul li .arrow a {
    background: url("/img/common/arrow01.gif") 0 0.3em no-repeat;
    padding-left: 10px;
}

.section01 .subsection01 {
    float: left;
    width: 65%;
    margin-right: 5%;
}

.section01 .subsection02 {
    float: right;
    width: 30%;
}
.section01 .subsection02 li{
    margin-top: 25px;
}
.section01 .subsection02 li:first-child{
    margin-top: 0;
}

.section01 a{
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
}
.section01 a:hover{
    opacity:0.7;
}

.section01 .subsection03 {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.section01 .subsection03 ul {
    width: 100%;
}

.section01 .subsection03 li {
    width: 100%;
}

.section01 .subsection03 dt {
    float: left;
    clear: left;
    width: 100%;
}

.section01 .subsection03 dd {
    float: left;
    clear: left;
    width: 100%;
}

.section01 .subsection03 ul {
    width: 100%;
}

.section01 .subsection03 li {
    width: 30%;
    float: left;
    margin-right: 5%;
    line-height: 150%;
    margin-bottom: 5%;
}

.section01 .subsection03 li:nth-child(3n+3) {
    margin-right: 0;
}

.jonIntro {
    background: url("/recruit/fresh/img/voice/icon01.gif") top left no-repeat;
    padding: 9px 0 0 95px;
    margin-top: 20px;
    min-height: 66px;
    height: auto !important;
    height: 66px;
}

.article01, .article02, .article03 {
    margin-top: 33px;
    width: 100%;
}

.article01 h2, .article02 h2, .article03 h2 {
    margin-bottom: 20px;
}

.article03 dl {
    overflow: hidden;
}

.article03 dt {
    width: 50%;
    max-width: 400px;
    float: right;
}

.article03 dt img {
    width: 100%;
}

.article03 dd {
    width: 49%;
    float: left;
}

.article01 dt, .article02 dt {
    display: none;
}

.article03 dt {
    display: block;
}

.article01 dd, .article02 dd {
    width: 100%;
}

.article01 dd p, .article02 dd p {
    line-height: 25px;
    margin-bottom: 15px
}

.section02 {
    width: 22%;
    max-width: 220px;
    float: right;
    margin-top: 40px;
}
.pb-0{
    padding-bottom: 0 !important;
}
#contents .section02 .subsection04 dt {
    margin-bottom: 10px;
}

#contents .section02 .subsection04 img {
    width: 100%;
    max-width: 220px;
}

.section03 {
    margin-top: 40px;
}
@media only screen and (max-width: 767px) {
    .section03 {
        margin-top: 8%;
    }
}

.section03 img {
    width: 100%;
    display: block;
    margin: 0 auto;
    height: auto;
}

.section03 h3 {
    height: 100%;
    margin-top: 10px;
    font-size: 90% !important;
}

#contents .section03 h3 {
    color: #000;
    line-height: 23px;
}

#contents .section03 h3 span {
    font-size: 25px;
    color: #006699;
    font-weight: bold;
    padding-bottom: 8px;
    display: block;
}
#contents .section03 .section-title{
    padding-bottom: 8px;
    border-bottom: 1px solid #e9e9e9;
    position: relative;
    margin-bottom: 20px;
}
@media only screen and (max-width: 767px) {
    #contents .section03 .section-title{
        margin-bottom: 2%;
    }
}
#contents .section03 .section-title:after{
    content: '';
    width: 15%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    background-color: #076599;
}
@media only screen and (max-width: 767px) {
    #contents .section03 .section-title:after{
        width: 20%;
    }
}
#contents .section03 .section-content{
    width: 100%;
    display: inline-block;
}
#contents .section03 .section-content p{
    float: left;
    width: 62.3%;
    margin-right: 2.7%;
}
#contents .section03 .section-content .section-image{
    float: left;
    width: 35%;
}

@media only screen and (max-width: 768px) {
    #contents .section03 .section-content p{
        float: none;
        width: 100%;
        margin-right: auto;
    }
    #contents .section03 .section-content .section-image{
        float: none;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

.section03 span {
    font-size: 110%;
    font-weight: bold;
}

.section03 .section03in01, .section03 .section03in02 {
    /*padding: 10px 20px 10px 20px;*/
    /*border: solid 5px #cce0eb;*/
    /*border-radius: 15px;*/
    clear: both
}

.section03 .section03in01 .profile {
    float: left;
    width: 220px;
}

.section03 .section03in01 .profiletxt {
    float: right;
    width: 435px;
}

.section03 .section03in02 .profile {
    float: right;
    width: 220px;
}

.section03 .section03in02 .profiletxt {
    float: left;
    width: 435px;
}

.section03 .profiletxt dt {
    font-weight: bold;
    color: #006699;
    margin-top: 15px;
}

.section03.voiceplayerout {
    padding-top: 12px;
}

.section00 {
    width: 820px;
    margin: 32px auto;
}

.section00 div.recruit_left, .section00 div.recruit_right {
    width: 370px;
    height: 110px;
    float: left;
    background: url(/recruit/img/bk_top.gif) no-repeat;
}

.section00 div.recruit_right {
    margin-left: 20px;
}

.section00 div.recruit_left dl dt, .section00 div.recruit_right dl dt {
    font-weight: bold;
    padding: 15px 0 10px 15px;
}

.section00 div.recruit_left dl dd, .section00 div.recruit_right dl dd {
    padding: 0 0 5px 25px;
}

.section00 div.recruit_left dl dd.link {
    padding-left: 265px;
}

.section00 div.recruit_right dl dd.link_r {
    padding-left: 180px;
}

#mainSideContents .subSideContent02 {
    width: 100%;
    margin: 40px auto 0;
    text-align: center;
}

#mainSideContents .subSideContent02 h3 {
    font-size: 110%;
    margin-bottom: 10px;
}

#mainSideContents .subSideContent02 p:nth-child(2) {
    text-align: left;
}

div.endBar {
    width: 1000px;
    background-color: #CCC;
    text-align: center;
    margin-top: 5px;
}

div.endBar p, div.endBarSub p {
    font-weight: bold;
    padding: 10px;
}

div.endBarSub {
    width: 1000px;
    background-color: #CCC;
    text-align: center;
    margin: 10px auto;
}

.section-title-works br {
display: none;
}

@media only screen and (min-width: 768px) {
    #contents {
        position: relative;
        min-width: 830px;
    }

    #contents .indexContents {
        min-width: 990px;
    }

    .socialBox li.social1 {
        position: absolute;
        top: 0;
        left: 80%;
    }

    .socialBox li.social2 {
        position: absolute;
        top: 0;
        left: 90%;
    }

    .socialBox2 li.social1 {
        position: absolute;
        top: 0;
        left: 57%;
    }

    .socialBox2 li.social2 {
        position: absolute;
        top: 0;
        left: 67%;
    }

    #contents #mainSideContents {
        width: 22%;
    }

    #contents #mainContents p.mainVidPc img, #contents ul.mainVidPc, #contents .section01 p.mainVidPc img, #contents .subsection03 p.mainVidPc img {
        display: block !important;
    }

    #contents #mainContents p.mainVidSp img, #contents ul.mainVidSp, #contents .section01 p.mainVidSp img, #contents .subsection03 p.mainVidSp img {
        display: none !important;
    }

    #contents #mainSideContents img {
        width: 100%;
    }

    #contents .section02 .subsection04 h3 {
        font-size: 110%;
    }
}

@media only screen and (max-width: 767px) {
    #contents h1 {
        padding: 0;
        margin-top: 30px;
    }

    .socialBox li.social1 {
        position: absolute;
        top: -25px;
        left: 15px;
    }

    .socialBox li.social2 {
        position: absolute;
        top: -25px;
        left: 100px;
    }

    .socialBox2 li.social1 {
        position: absolute;
        top: 0;
        left: 15px;
    }

    .socialBox2 li.social2 {
        position: absolute;
        top: 0;
        left: 100px;
    }

    #mainvid {
        padding: 35% 0 0;
    }

    .section01 {
        width: 100%;
        margin: 0 auto 50px;
        overflow: hidden;
    }

    .section01 .subsection01 {
        width: 100%;
        margin: 8% 0 0 0;
        order: 1;
    }

    .section01 .subsection02 {
        width: 100%;
        margin: 5% 0;
        order: 3;
    }

    .section01 .subsection02 li {
        width: 48%;
        float: left;
        margin-top: 0;
    }
    .section01 .subsection02 li:first-child {
        margin-right: 4%;
    }
    .section01 .subsection03 {
        float: left;
        width: 100%;
        margin-top: 8%;
        order: 2;
    }

    .section01 .subsection03 li {
        width: 48%;
        max-width: 340px;
        margin: 0;
    }

    #contents #mainContents p.mainVidPc img, #contents ul.mainVidPc, #contents .section01 p.mainVidPc img, #contents .subsection03 li.mainVidPc img {
        display: none !important;
    }

    #contents #mainContents p.mainVidSp img, #contents ul.mainVidSp, #contents .section01 p.mainVidSp img, #contents .subsection03 li.mainVidSp img {
        display: block !important;
    }

    #contents .subsection03 p.mainVidPc img {
        display: none !important;
    }

    #contents .subsection03 p.mainVidSp img {
        display: block !important;
    }

    .section01 .subsection03 li:nth-child(2n+1) {
        margin-right: 4%;
    }

    .section01 .subsection03 li{
        margin-bottom: 4%;
    }

    .section01 .subsection01 dd, .section01 .subsection02 dd {
        display: none;
    }

    .section02 {
        width: 100%;
        float: none;
        margin: 15px auto;
    }

    .section02 .subsection04 dd ul li p:first-child {
        text-align: center;
    }

    #mainContents p img {
        width: 100%;
    }

    #contents .section03 h3 {
        line-height: 20px;
        margin-top: 7px;
    }

    #contents .section03 h3 span {
        font-size: 20px;
    }

    .article01 img {
        width: 100%;
    }

    .article01 dl dt, .article02 dl dt, .article03 dl dt {
        width: 100%;
        max-width: 400px;
        float: none;
        margin: 10px auto;
    }

    .article01 dl dd, .article02 dl dd, .article03 dl dd {
        width: 100%;
        float: none;
        margin-top: 18px;
    }

    .section03 img {
        margin-top: 15px;
    }

    #mainSideContents {
        position: relative;
    }

    #mainSideContents .subSideContent01 {
        padding-top: 270px;
    }

    #mainSideContents .subSideContent02 {
        width: 100%;
        position: absolute;
        top: 0;
    }

    #mainSideContents .subSideContent02 dl.subsection04 {
        width: 100%;
        max-width: 350px;
        height: 200px;
        margin: 40px auto 0;
    }

    #mainSideContents .subSideContent02 dl.subsection04 p {
        overflow: hidden;
    }

    #mainSideContents .subSideContent02 dl.subsection04 img {
        width: 100%;
        max-width: 220px;;
    }

    #mainSideContents .subSideContent02 h3 {
        font-size: 120%;
    }

    #mainSideContents li.low a br {
        display: none;
    }

    .section-title-works br {
        display: block;
    }
}

@media only print {
    p, h1, h2 {
        font-size: 90%;
    }

    #contents h1 {
        margin-top: 10px;
    }

    ul .gnav, .hnav.ro, ul .hnav.sp,
    .socialBox li.social1, .socialBox li.social2, .socialBox2 li.social1, .socialBox2 li.social2,
    #contents #mainContents p.mainVidSp img, #contents ul.mainVidSp,
    #contents .section01 p.mainVidSp img, #contents .subsection03 li.mainVidSp img,
    #contents .subsection03 p.mainVidSp img {
        display: none !important;
    }

    #contents #mainContents p.mainVidPc img, #contents ul.mainVidPc,
    #contents .section01 p.mainVidPc img, #contents .subsection03 li.mainVidPc img,
    #contents .subsection03 p.mainVidPc img {
        display: block;
    !important;
    }

    #contents .section01 {
        width: 70%;
        margin-right: 5%;
    }

    #contents .section02 {
        width: 25%;
    }

    #contents .section02 .subsection04 h3 {
        font-size: 90%;
    }

    #contents #mainContents {
        min-width: 70%;
        max-width: 500px;
        padding: 5px;
    }

    #contents #mainSideContents {
        width: 25%;
    }

    #contents #mainSideContents img {
        width: 90%;
    }
}
#contents .section-progress{
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#contents .step{
    width: 95%;
    margin-bottom: 25px;
    background-color: #f3f3f3;
    padding: 1.75% 1.5% 1.75% 3.5%;
    display: inline-block;
    position: relative;
}
#contents .step:after{
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDM4Ni4yNTcgMzg2LjI1NyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzg2LjI1NyAzODYuMjU3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIGNsYXNzPSIiPjxnPjxwb2x5Z29uIHBvaW50cz0iMCw5Ni44NzkgMTkzLjEyOSwyODkuMzc5IDM4Ni4yNTcsOTYuODc5ICIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojMDc2NTk5IiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wb2x5Z29uPjwvZz4gPC9zdmc+");
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    content: '';
    width: 26px;
    height: 20px;
    display: inline-block;
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin: 0 auto;
    margin-left: -13px;
}
#contents .step:last-child:after{
    display: none;
}
#contents .step .title{
    width: 26%;
    margin-right: 2.5%;
    float: left;
    font-weight: bold;
    color: #076599;
    font-size: 18px;
}
#contents .step .text{
    width: 71.5%;
    float: right;
    font-size: 16px;
}
#contents .step .image{
     margin-top: 10px;
 }
#contents .step a{
    display: block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    opacity: 1;
}
#contents .step a:hover{
    opacity: 0.6;
}
#contents #mainContents .step p img{
    width: auto;
    display: inline-block;
    margin: 0;
}
#contents .step .text b{
     font-size: 18px;
 }
#contents .step .text small{
    font-size: 14px;
    display: inline-block;
    margin-top: 5px;
}
@media only screen and (max-width: 767px) {
    #contents .step{
        width: 94%;
        padding: 3%;
        margin-bottom: 10%;
    }
    #contents .step:last-child{
        margin-bottom: 5%;
    }
    #contents .step:after{
        height: 30px;
        bottom: -37%;
    }
    #contents .step .title{
        width: 100%;
        margin-right: auto;
        float: none;
        text-align: center;
        margin-bottom: 3%;
    }
    #contents .step .text{
        width: 100%;
        float: none;
        font-size: 16px;
        text-align: center;
        line-height: 1.3;
    }
}
#contents .section-list{
    width: 100%;
    display: inline-block;
}
#contents .section-list dl{
    border-bottom: 1px solid #e9e9e9;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    /*font-size: 16px;*/
    padding-top: 20px;
    padding-bottom: 20px;
}
#contents .section-list dl:last-child{
    border-bottom: none;
}
#contents .section-list dt{
     width: 18%;
     float: left;
     display: block;
     font-weight: bold;
     color: #076599;
     padding-right: 1.5%;
 }
#contents .section-list dd{
    width: 80.5%;
    float: right;
    display: block;
}
@media only screen and (max-width: 767px) {
    #contents .section-list dl{
        padding-top: 3%;
        padding-bottom: 3%;
    }
    #contents .section-list dt{
        width: 100%;
        float: none;
        padding-right: 0;
    }
    #contents .section-list dd{
        width: 100%;
        float: none;
    }
}
.pc{
     display: block !important;
 }
.sp{
    display: none !important;
}
@media only screen and (max-width: 767px) {
    .pc{
        display: none !important;
    }
    .sp{
        display: block !important;
    }
}
/********** clear-fix***********/
.section03 .section03in02:after,
.section03 .section03in01:after,
.article02 dl:after,
.article01 dl:after,
.section01 .subsection01 ul:after,
.section01:after, .socialBox:after,
.section00:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.section03 .section03in02,
.section03 .section03in01,
.article02 dl,
.article01 dl,
.section01 .subsection01 ul,
.section01,
.socialBox {
    zoom: 1;
}