/*** 採用インタビュー 一覧 SP ***/
@media screen and (max-width:640px){
  /* ===================================
  all
  =================================== */

  a:link,a:hover,a:active,a:visited{
    text-decoration: none;
    color: #333;
  }
  a:hover{
    opacity: 0.7;
  }
  body{
    color: #333333;
  }
  .notfound .link a{
    color: #649FBA;
    text-decoration: none;
  }
  /* ===================================
  .top
  =================================== */
  .top{
    margin: 0;
    width: 100vw;
    background-color: #ffffff;
    overflow: hidden;
  }
  .categoryBar{
    max-width: 460px;
    overflow-x: auto;
  }
  .bigCategory{
    width: 460px;
    float: left;
    font-size: 13px;
  }
  .bigCategory li{
    display: inline;
  }
  .bigCategory .cate{
    width: 150px;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    color: #000000;
    text-align: center;
    font-size: 13px;
  }
  .bigCategory .active{
    border-bottom: 2px solid #E0C447;
  }
  .searchBar{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #E7EFDE;
    text-align: center;
  }
  .freeword{
    width: 70%;
    height: 10px;
    padding: 10px;
    font-size: 12px;
    border: none;
  }
  .sendButton{
    width: 55px;
    height: 30px;
    margin-left: -4px;
    border: 0;
    background: url(../img/ico_search_01.png) center;
  }
  .bigTitle{
    clear: both;
    margin: 0;
    padding: 20px 10px 10px;
    background-color: #E7EFDE;
  }
  .bigTitle .mainTag{
    background-color: #51AB00;
    color: #ffffff;
    display: inline-block;
    width: 105px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .bigTitle .title{
    margin: 12px 5px 0;
    display: block;
    font-size: 22px;
    font-weight: bold;
    line-height: 25px;
    font-family: Quicksand, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .bigTitle .tags{
    margin-top: 20px;
  }
  .bigTitle .tags.topNo{
    margin-top: 0;
  }
  .bigTitle .subTitle{
    display: block;
    font-size: 15px;
    margin-top: 10px;
    font-weight: bold;
    font-family: Quicksand, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .bigTitle .comment{
    margin: 20px 10px;
    font-size: 15px;
    line-height: 23px;
    font-family: Quicksand, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .bigTitle .tags li{
    display: inline-block;
    font-family: Quicksand, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  }
  .bigTitle .tags .tag{
    margin: 3px;
    padding: 5px 10px;
    display: inline-block;
    background-color: #ffffff;
    border-radius: 35px;
    font-size: 12px;
  }
  .bigTitle .tags .tag::before{
    content: url(../img/ico_interview_03.png);
    padding-right: 5px;
    vertical-align: middle;
  }

  /* ===================================
  #mainContents
  =================================== */
  #mainContents{
    margin: 20px auto 0;
    width: 100vw;
  }
  .counter{
    margin-left: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 13px;
  }
  .counter span{
    font-size: 13px;
  }
  .mainBox{
    background-color: #ffffff;
    position: relative;
    border-top: 9px solid #F5F5F0;
    border-bottom: 1px solid #DADADA;
  }
  .mainBox .imgInfo{
    width: 100vw;
  }
  .mainBox .info{
    padding: 20px 30px 0 20px;
    position: relative;
    background-image: url(../img/ico_interview_01.png);
    background-repeat: no-repeat;
    background-position: 98% 12px;
  }
  .mainBox .info .tagInfo{
    padding: 4px 5px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1em;
    display: inline-block;
    background-color: #51AB00;
    color: #ffffff;
  }
  .mainBox .info .date{
    display: inline-block;
    color: #8D9195;
    vertical-align: middle;
    position: absolute;
    top: 23px;
    right: 50px;
  }
  .mainBox .info .date i{
    padding: 0 5px 0 10px;
  }
  .mainBox .centerInfo{
    margin: 20px auto 15px;
    display: flex;
    flex-wrap: wrap;
  }
  .mainBox .nameImg{
    height: 19px;
    order: 4;
  }

  .mainBox .nameEnglishImg{
    height: 22px;
    order: 2;
    margin-bottom: 15px;
  }

  .mainBox .careerArea{
    order: 3;
    display: flex;
    width: 100%;
    justify-content: flex-start;
    font-size: 13px;
    padding-bottom: 5px;
  }
  .year{
    line-height: 1.5;
  }
  .mainBox .centerInfo .careerArea .job{
    padding-left: 5px;
    line-height: 1.2;
  }

  .mainBox .centerInfo .caption{
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 17px;
    line-height: 1.5;
    order: 1;
  }
  .mainBox .centerInfo p:nth-child(2),
  .mainBox .centerInfo p:nth-child(3),
  .mainBox .centerInfo p:nth-child(5){
    font-size: 13px;
    display: inline-block;
    line-height: 10px;
  }
  .mainBox .info .centerInfo .name{
    order: 4;
    margin-top: 5px;
    font-size: 16px;
  }
  .mainBox .centerInfo .nameAlpha{
    display: inline-block;
    font-family: 'Caveat', cursive;
    color: #DFC352;
    font-size: 30px;
    font-style: italic;
    margin-top: -15px;
    margin-bottom: 5px;
    order: 2;
  }
  .mainBox .bottomInfo{
    display: none;
  }

  /* =========================================================
  .pagenavi
  ========================================================= */
  /*** セレクト型ページングのスタイル ***/
  .pagenavi {
    margin: 20px 20px 0;
    text-align: center;
  }
  .pagenavi .next__large {
    width: 100%;
    height: 74px;
    margin: 0 0 25px;
    display: block;
    position: relative;
    border: 3px solid #504842;
    line-height: 74px;
    font-size: 20px;
    text-decoration: none;
    color: #634238;
    background: #FFF;
  }
  .pagenavi .next__large a {
    display: block;
    text-decoration: none;
    color: #333;
  }
  .pagenavi .next__large a:before {
    position: absolute;
    width: 8px;
    height: 8px;
    right: 30px;
    top: 32px;
    content: "";
    transform: rotate(45deg);
    vertical-align: middle;
    border-top: 3px solid #4a413f;
    border-right: 3px solid #4a413f;
  }
  .pagenavi .next__large a:hover {
    color: #333;
  }
  .pagenavi .next__large:hover {
    opacity: 0.7;
  }
  .pagenavi .page {
    position: relative;
  }
  .pagenavi .page .prev,
  .pagenavi .page .next {
    width: 52px;
    height: 42px;
    line-height: 42px;
    text-decoration: none;
    color: #333;
    border: 1px solid #D6D6D6;
    border-radius: 2px;
    box-sizing: border-box;
    background: #FFF;
    display: inline-block;
    vertical-align: middle;
  }
  .pagenavi .page .prev:hover,
  .pagenavi .page .next:hover {
    color: #333;
    opacity: 0.7;
  }
  .pagenavi .page .page-number {
    width: 168px;
    height: 42px;
    line-height: 42px;
    display: inline-block;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
  }
  .pagenavi .page .page-number__label {
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px solid #D6D6D6;
    border-radius: 2px;
    box-sizing: border-box;
    position: relative;
    background: #FFF;
    display: inline-block;
  }
  .pagenavi .page .page-number__label:after {
    position: absolute;
    width: 5px;
    height: 5px;
    right: 9px;
    top: 15px;
    content: "";
    transform: rotate(135deg);
    transition: 0.5s;
    vertical-align: middle;
    border-top: 1px solid #C8C4BE;
    border-right: 1px solid #C8C4BE;
  }
  .pagenavi .page .page-number select {
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    width: 168px;
    height: 42px;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  .pagenavi .page .nolink {
    pointer-events: none;
    opacity: 0.5;
  }
  /* ===================================
  .sideColumnFrame
  =================================== */
  .sideColumnFrame{
    margin: 60px 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;
  }
  .sideContent{
    margin: 10px 20px;
    overflow: hidden;
    border-bottom: 1px solid #E1E1E1;
  }
  .sideContent .blogImg,
  .sideContent .newsImg{
    float: right;
    margin-left: 10px;
  }
  .sideContent .caption{
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
    color: #614139;
  }
  .sideContent .writter{
    clear: both;
    width: 100%;
  }
  .sideContent .writter .writterName{

    display: inline-block;
  }
  .sideContent .blogBottom{
    margin: 10px 0;
  }
  .sideContent .newsBottom{
    margin: 20px 0 10px;
  }
  .sideContent .blogBottom .blogTag{
    padding: 4px 5px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1em;
    display: inline-block;
    background-color: #6C512D;
    color: #ffffff;
  }
  .sideContent .newsBottom .newsTag{
    padding: 4px 5px;
    margin-right: 2px;
    font-size: 12px;
    line-height: 1em;
    display: inline-block;
    background-color: #1A5084;
    color: #ffffff;
  }
  .blogLink,
  .newsLink{
    clear: both;
    margin: 15px 20px;
    text-align: right;
    font-size: 15px;
  }
  .blogLink::before,
  .newsLink::before{
    content: ">";
    margin-right: 10px;
    color: #DFC352;
    font-weight: bold;
  }
  .clear{
    clear: both;
    margin: 5px 0;
  }

  /* はこだて未来大学のみなさんへ */
  .gbox{
    padding: 0 15px;
    margin-bottom: 30px;
  }
  .gbox h2{
    font-size: 17px;
    font-weight: bold;
    color: #46839F;
    padding: 11px 0;
    line-height: 1.7;
    overflow: hidden;
  }
  .gbox .inner{
    background-color: #46839F;
  }
  .gbox .person {
    padding: 10px 10px 0 0;
  }
  .gbox .profileImage {
    width: 130px;
    margin: -15px 10px 0 6px;
    float: left;
  }
  .gbox .profileImage img {
    width: 100%;
  }
  .gbox .name{
    color: #fff;
  }
  .gbox .name h3{
    margin: 19px 0 10px;
    font-size: 20px;
  }
  .gbox .name h4{
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 10px;
  }
  .gbox .interview{
    margin-top: 60px;
    color: #FFF;
    padding: 15px 17px 10px;
    line-height: 1.7;
    font-size: 15px;
  }
  .gbox .interview p {
    margin: 0 0 20px;
  }
  #mainWrap .size19 {
    font-size: 17px;
    font-weight: bold;
    color: #FFFF93;
  }

  .detailbox{
    padding: 0 15px;
  }
  .detailboxTit{
    font-weight: bold;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
    color: #46839F;
    margin: 0 auto 25px;
  }
  .detailboxTit .reLand{
    background: url(https://www.rals.co.jp/recruit/info/img/icon_fun_12.png) no-repeat 0 0;
    background-size: 80px auto;
    width: 80px;
    height: 40px;
    display: block;
    overflow: hidden;
    text-indent: -99999px;
    margin: 0 auto 18px;
  }
  .detailbox01{
    overflow: hidden;
    margin: 0 0 39px;
  }
  .detailbox01 li {
    float: left;
    width: 50%;
    text-align: center;
  }
  .detailbox01 li img {
    width: 122px;
    height: auto;
    display: inline-block;
  }
  .detailbox02 dt {
    text-indent: -99999px;
    background: url(https://www.rals.co.jp/recruit/info/img/tit_fun_20.png) no-repeat center 0;
    background-size: 188px auto;
    margin: 0 0 13px;
  }
  .detailbox02 dd a {
    height: 74px;
    margin: 9px auto 0;
    text-align: center;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;
    color: #E97313;
    border: 3px solid #E97313;
    background: #FFF;
    text-indent: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .detailbox02 dd a .graduate{
    background: #E97313;
    font-size: 14px;
    color: #fff;
    width: 50px;
    padding: 5px 0 5px 8px;
    margin-right: 15px;
  }
  .detailbox02 dd a.noEntry{
    color: #BDB7AA;
    border-color: #BDB7AA;
    cursor: default;
  }
  .detailbox02 dd a.noEntry .graduate{
    background-color: #BDB7AA;
  }
}