/*** 採用インタビュー 詳細 PC ***/
@media screen and (min-width:641px){

/* ===================================
all
=================================== */
a:link,a:hover,a:active,a:visited{
    color: #333333;
    text-decoration: none;
}
.interviewLink a:hover,
.webEngineerLink:hover,
.jobLink a:hover,
.more a:hover{
    opacity: 0.7;
}
body{
    color: #333333;
}

/* ===================================
topWrappar
=================================== */
.top{
    overflow: hidden;
    background-color: #E7EFDE;
}
.topWrappar {
    width: 1150px;
    margin: 0 auto;
}
.searchBar {
    float: right;
}
.search {
    width: 252px;
    height: 30px;
    display: inline-block;
    line-height: 70px;
    position: relative;
}
.freeword {
    width: 194px;
    height: 30px;
    padding-left: 8px;
    display: inline-block;
    border: 1px solid #E9E9E9;
}
.sendButton:hover{
    opacity: 0.7;
    cursor : pointer;
}
.sendButton {
    width: 45px;
    height: 35px;
    position: absolute;
    top: 18px;
    border: 0;
    right: 0;
    background: url(../img/ico_search_01.png);
}
.bigCategory {
    width: 850px;
    float: left;
    font-size: 13px;
}
.bigCategory li {
    display: inline;
}
.bigCategory .active {
    background-color: #FAFAF6   ;
    font-weight: bold;
}
.bigCategory .cate {
    width: 160px;
    height: 70px;
    line-height: 70px;
    display: inline-block;
    color: #000000;
    text-align: center;
}
.bigCategory .cate:hover{
    opacity: 0.7;
}
/* ===================================
#top
=================================== */
#top{
    width: 1150px;
    margin: 0 auto;
}
.topBar{
    width: 980px;
    height: 40px;
    margin: 0 auto;
    display: block;
}
.topBar .subLink{
    float: right;
}
.topBar .subLink li{
    margin-left: 15px;
    display: inline-block;
    font-size: 13px;
    font-weight: bold;
    color: #4B332C;
}
.topBar .subLink li .active{
    padding-bottom: 10px;
    color: #D6AD12;
    border-bottom: 2px solid #D6AE12;
}
.topBar .subLink li a:hover{
    opacity: 0.7;
    padding-bottom: 10px;
    color: #D6AD12;
    border-bottom: 2px solid #D6AE12;
}
.topTitle{
    width: 1150px;
    margin: 30px auto 50px;
    display: block;
    color: #4B332C;
    font-size: 40px;
    font-weight: bold;
    line-height: 45px;
    box-sizing: border-box;
}
.topTitle span{
    font-size: 25px;
    padding-left: 10px;
    vertical-align: top;
}
#topImg{
    font-family: Quicksand, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    background-image: url(https://www.rals.co.jp/recruit/interview/new-graduates/img/bg_top_01.png);
    height: 350px;
    padding-bottom: 140px;

    background-attachment: fixed;
}
#topInner{
    width: 1150px;
    height: 350px;
    margin: 0 auto;

    position: relative;
}
#topInner .photoTop{
    width: 750px;
    height: 490px;
    background-color: #8D9195;
}
#topInner .infoTop{
    width: 480px;
    height: 230px;
    padding: 80px 35px 30px 30px;
    background-color: #ffffff;
    position: absolute;
    top: 70px;
    right: 0px;
}
#topInner .infoTop .job{
    width: 130px;
    height: 50px;
    line-height: 50px;
    position: absolute;
    top: 0;
    left: 30px;
    background-color: #DFC352;
    color: #ffffff;
    font-size: 13px;
    text-align: center;
}
#topInner .infoTop .caption{
    font-weight: bold;
    font-size: 25px;
    line-height: 40px;
}
#topInner .nameEnglishImg{
    height: 32px;
    margin: 15px 0;
}
#topInner .infoTop .nameKana{
    color: #DFC352;
    font-size: 40px;
    padding-bottom: 15px;
    font-family: 'Caveat', cursive;
}
#topInner .nameImg{
    height: 30px;
}
#topInner .infoTop .staffData{
    font-size: 15px;
    padding: 5px 0 10px;
}
#topInner .infoTop .name{
    font-size: 25px;
    font-weight: 500;
}

/* ===================================
#mainContents
=================================== */

/* 追加 */
#mainContents{
    margin-top: 15px;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 40px;
}
#mainContents{
    background-color: #ffffff;
    border-bottom: 1px solid #E9E9E9;
}
#mainContents h2{
    position: relative;
    color: #6CA543;
    padding: 20px 40px 0 105px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    word-break: break-all;
}
#mainContents h2:nth-child(n+2){
    border-top: 1px solid #E9E9E9;
    margin-top: 50px;
    padding-top: 46px;
}
#mainContents h2::before{
    position: absolute;
    content: "Q.";
    color: #6CA543;
    font-size: 50px;
    top: -10px;
    left: 40px;
    font-weight: 500;
}
#mainContents h2:nth-child(n+2)::before{
    top: 15px;
}
#mainContents h3{
    font-size: 25px;
    line-height: 40px;
    font-weight: bold;
    margin: 28px 0 25px;
    padding: 0 40px;
    word-break: break-all;
    color: #264358;
}
#mainContents img{
    max-width: 720px;
    height: auto;
    display: block;
    margin-bottom: 25px;
}
#mainContents p{
    font-size: 17px;
    line-height: 30px;
    white-space: pre-line;
    padding: 0 40px;
    word-break: break-all;
}
#mainContents p a {
    color: #3498DB;
    text-decoration: underline;
}
#mainContents p a:hover {
    opacity: 0.7;
}
#mainContents .otherColumeLink{
    color: #3498DB;
    text-decoration: underline;
}
#mainContents .otherColumeLink:hover{
    opacity: 0.7;
}
#snsLink{
    border-top: 1px solid #E9E9E9;
    background-color: #ffffff;
    padding: 40px;
    margin-top: 40px;
}
#snsLink li{
    display: inline-block;
}
.snsLink a {
    text-indent: -9999px;
    display: inline-block;
    height: 20px;
    margin-right: 5px;
    background-repeat: no-repeat;
}
.snsLink a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.snsLink .x{
    background: url(../../common/img/sns/ico_x_01.png);
    width: 66px;
}
.snsLink .facebook{
    background: url(../../common/img/sns/ico_facebook_01.png);
    width: 70px;
}
.snsLink .line{
    background: url(../../common/img/sns/ico_line_01.png);
    width: 95px;
}
.snsLink .pocket{
    background: url(../../common/img/sns/ico_pocket_01.png);
    width: 75px;
}
.snsLink .hatena{
    background: url(../../common/img/ico_hatena_01.png);
    width: 70px;
}


/* ===================================
#sideContents
=================================== */
#sideInnerContents{
    margin-top: -50px;
}
.sideColumnFrame{
    margin: 65px auto 0;
    overflow: hidden;
}
.afterColumnFrame{
    margin: 30px auto 0;
}
.sideTop{
    margin: 0;
    padding: 20px 0;
    background-color: #F4F6F1;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    border-top: 1px solid #E1E1E1;
}
.blogTop{
    border: none;
}
.sideContent{
    margin: 10px 20px;
    overflow: hidden;
    border-bottom: 1px solid #E1E1E1;
    padding: 5px 5px 20px;
}
#sideInnerContents .otherInterview{
    margin: 10px 20px 10px 10px;
}
.dataContent{
    border: none;
}
.sideContent .mainStaffBox{
    width: 120px;
    height: 120px;
    margin: 10px auto;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}
.sideContent .mainStaffIcon{
    width: auto;
    height: 130px;
    display: block;
    margin: 0 auto 18px;
    border-radius: 50%;
}
.sideContent .staffProf{
    text-align: center;
    font-size: 16px;
    line-height: 23px;
    font-weight: bold;
}

.sideContent .staffProf .nameKana{
    font-size: 12px;
}
.sideContent .staffProf .nameImg{
    height: 20px;
    display: block;
    margin: 5px auto -5px;
}
.sideContent .nameKanaImg{
    height: 13px;
}
.sideContent .staffData,
.sideContent .jobData{
    text-align: left;
    font-size: 14px;
    line-height: 20px;
}
.sideContent .staffData p{
    padding-top: 5px;
    word-break: break-all;
}
.sideContent .jobData{
    margin-bottom: 20px;
}
.sideContent .staffData .dataTop{
    margin-top: 0;
}
.sideContent .staffData .dataCaption{
    margin-top: 10px;
}
.sideContent .moreInterviewSide{
    float: left;
}
.sideContent .imgBox{
    width: 80px;
    height: 80px;
}
.sideContent .sideColumn:hover .staffComment .caption,
.sideContent .sideColumn:hover .staffData{
    opacity: 0.7;
}
.sideContent .staffIcon,
.sideContent .jobIcon{
    width: 80px;
    height: 80px;
    object-fit: cover;
    font-family: "object-fit: cover;";
}
.sideContent .staffComment,
.sideContent .jobComment{
    width: 170px;
    margin-left: 95px;
    line-height: 20px;
}
.sideContent .staffComment .caption,
.sideContent .jobComment .caption{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
.sideContent .webEngineerLink{
    font-size: 14px;
    border-bottom: 1px solid #000000;
}
.sideContent .nameSideImg{
    height: 16px;
}
.interviewLink,
.jobLink{
    clear: both;
    margin: 15px 20px;
    text-align: right;
    font-size: 13px;
}
.interviewLink::before,
.jobLink::before{
    content: ">";
    margin-right: 10px;
    color: #DFC352;
    font-weight: bold;
}
.flowLink{
    margin: 30px auto 10px;
    padding: 15px 0;
    width: 280px;
    height: 50px;
    text-align: center;
    border: 3px solid #DFC352;
    font-weight: bold;
    font-size: 15px;
    line-height: 23px;
    position: relative;
}
.flowLink::after{
    content: ">";
    color: #DFC352;
    font-weight: bold;
    position: absolute;
    top: 25px;
    right: 10px;
}
.flowLink:hover{
    opacity: 0.7;
}
.clear{
    clear: both;
    margin: 5px 0;
}
/* ===================================
#moreInterview
=================================== */
#moreInterview{
    margin: 60px 0px 30px;
    padding: 45px 0 0 30px;
    width: 1118px;

    font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    border: 1px solid #E2E2DA;
    background-color: #FFF;
    position: relative;
}
.moreInterviewTop{
    margin-bottom: 20px;
}
.interviewTopImg{
    width: 40px;
    height: 40px;
    background-color: #8D9195;
}
.interviewTopImg,
.interviewTop{
    display: inline-block;
}
.interviewTop{
    padding-top: 8px;
    padding-left: 10px;
    font-size: 20px;
    line-height: 40px;
    font-weight: bold;
    vertical-align: bottom;
}
.pickupStaff{
    width: 1100px;
    margin: 0 auto;
}
.interviewPickup{
    width: 350px;
    margin: 0 3px;
    display: inline-block;
}
.interviewPickup .pickupImg{
    width: 340px;
    height: 221px;
    background-color: #8D9195;
}
.interviewPickup .pickupComment{
    padding: 0 10px 10px;
    white-space: pre-line;
}
.interviewPickup .pickupCaption{
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
}
.interviewPickup .pickupInfo{
    font-size: 13px;
}
}

/* ===================================
#otherInterview
=================================== */
#otherInterview{
    width: 100%;
    display: block;
    float: left;
    margin-top: 60px;
    padding: 45px 0px 0px 30px;
    font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    width: 1118px;
    background-color: rgb(255, 255, 255);
    position: relative;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(226, 226, 218);
    border-image: initial;
}
#otherInterview:after {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background: url(https://www.rals.co.jp/recruit/interview/new-graduates/img/img_top-left_01.png) 0 0;
    position: absolute;
    top: -1px;
    left: -1px;
}
#otherInterview h1 {
    background: url(https://www.rals.co.jp/recruit/interview/new-graduates/img/img_mike_01.png) 0 0 no-repeat;
    font-size: 20px;
    font-weight: bold;
    padding-top: 8px;
    padding-left: 55px;
    height: 32px;
}
#otherInterview ul {
    overflow: hidden;
    margin-top: 10px;
}
#otherInterview ul li {
    float: left;
    border: 0px;
    width: 340px;
    padding: 10px 10px 10px;
}
#otherInterview ul li a {
    text-decoration: none;
    position: relative;
}
#otherInterview ul li a:hover .topMsg01,
#otherInterview ul li a:hover .profile01{
    opacity: 0.7;
}
#otherInterview ul li img {
    width: 340px;
    margin-bottom: 10px;
}
#otherInterview ul li .interviewTop01 {
    display: block;
    width: auto;
}
#otherInterview .topMsg01{
    color: #333;
    font-weight: bold;
    font-size: 15px;
    line-height: 1.5;
    height: 44px;
    margin-bottom: 5px;
}
#otherInterview ul li .profile01{
    font-size: 13px;
}
#otherInterview ul li .profile01 img{
    height: 15px;
    width: auto;
    margin: 0;
}
#otherInterview ul li .staffData{
    display: inline-block;
}
#otherInterview p.more {
    padding: 30px 0px;
    margin-right: 45px;
    font-size: 17px;
    line-height: 1.8;
    border-top: 1px solid #E9E9E9;
}
#otherInterview p.more a {
    display: block;
    color: #333;
    width: 196px;
    height: 29px;
    margin-left: auto;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    padding-top: 7px;
    border: 2px solid #333;
}