@charset "UTF-8";
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Message CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

Variables CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

SVG CSS

_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
/**
 * SVG画像をアイコンに使いたい的ないろいろ
 *
 *  [Html] SVG塗りつぶしの色をBackground-Imageとして扱うときに変更する
 * https://code.i-harness.com/ja/q/cbfa3c
 */
/* Variables
-------------------------------------------- */
@media (max-width: 480px) {
  .contHeading {
    background-image: url(/recruit/shr/img/careerup/main_img_sp.jpg) !important; } }

#container .cont1 .centertxt {
  text-align: center;
  font-size: 2rem;
  line-height: 2.5;
  margin: 0 0 90px; }
#container .cont1 .ancorLink {
  display: block;
  text-align: center; }
  #container .cont1 .ancorLink li {
    display: inline-block;
    width: 230px;
    margin: 0 10px 20px; }
    #container .cont1 .ancorLink li a {
      display: block;
      padding: 10px 0;
      font-size: 2rem;
      color: #FFF;
      background: #80212e;
      position: relative; }
      #container .cont1 .ancorLink li a::before {
        content: "";
        position: absolute;
        display: block;
        width: 11px;
        height: 11px;
        margin: 0 auto;
        top: 18px;
        left: 16px;
        border-bottom: #FFF 1px solid;
        border-right: #FFF 1px solid;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg); }
@media (max-width: 768px) {
  #container .cont1 .centertxt {
    font-size: 1.8rem;
    line-height: 2;
    text-align: left; } }
@media (max-width: 480px) {
  #container .cont1 .centertxt {
    font-size: 1.6rem;
    margin: 0 0 50px; }
  #container .cont1 .ancorLink li {
    width: 230px; }
    #container .cont1 .ancorLink li a {
      font-size: 1.4rem; }
      #container .cont1 .ancorLink li a::before {
        width: 11px;
        height: 11px;
        top: 16px;
        left: 16px; } }
#container .cont2 {
  padding: 80px 0 70px; }
  #container .cont2 .inner {
    margin: 0 auto; }
    #container .cont2 .inner h2 {
      font-size: 2.8rem;
      line-height: 1;
      color: #FFF;
      text-align: center;
      margin: 0 0 80px;
      padding: 12px 0;
      background: #80212e; }
    #container .cont2 .inner .lead {
      margin: 0 0 45px; }
    #container .cont2 .inner .planWrap {
      box-sizing: border-box;
      max-width: 800px;
      margin: 0 auto 50px;
      padding: 30px 30px 18px;
      background: #FFF; }
      #container .cont2 .inner .planWrap h3 {
        display: block;
        max-width: 500px;
        font-size: 1.6rem;
        font-weight: bold;
        margin: 0 auto 12px; }
      #container .cont2 .inner .planWrap .planList {
        display: block;
        max-width: 500px;
        margin: 0 auto 16px; }
        #container .cont2 .inner .planWrap .planList li {
          box-sizing: border-box;
          border: solid 1px #999;
          margin: 0 0 12px;
          padding: 10px 30px; }
          #container .cont2 .inner .planWrap .planList li p {
            font-size: 1.4rem; }
            #container .cont2 .inner .planWrap .planList li p.planName {
              font-size: 1.6rem;
              font-weight: bold; }
    @media (max-width: 480px) {
      #container .cont2 .inner h2 {
        font-size: 2rem;
        margin: 0 0 50px;
        padding: 8px 0; }
      #container .cont2 .inner .planWrap {
        padding: 20px 10px 8px; }
        #container .cont2 .inner .planWrap .planList li {
          padding: 10px 20px; } }
    #container .cont2 .inner .careerStep {
      display: block;
      box-sizing: border-box;
      background: #FFF; }
      #container .cont2 .inner .careerStep .stepcont {
        display: block;
        box-sizing: border-box;
        padding: 50px 30px;
        position: relative; }
        #container .cont2 .inner .careerStep .stepcont.arrow {
          border-bottom: solid 2px #80212e; }
          #container .cont2 .inner .careerStep .stepcont.arrow::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            margin: 0 auto;
            position: absolute;
            bottom: -13px;
            left: 0;
            right: 0;
            border-style: solid;
            border-width: 13px 11px 0 11px;
            border-color: #80212e transparent transparent transparent; }
        #container .cont2 .inner .careerStep .stepcont .leftImg {
          max-width: 340px;
          float: left; }
        #container .cont2 .inner .careerStep .stepcont .rightCont {
          width: 100%;
          box-sizing: border-box;
          margin: 0 0 0 -390px;
          padding: 0 0 0 390px;
          float: right; }
          #container .cont2 .inner .careerStep .stepcont .rightCont h3 {
            font-size: 2.4rem;
            font-weight: bold;
            margin: 0 0 50px;
            padding: 0 0 0 20px;
            position: relative; }
            #container .cont2 .inner .careerStep .stepcont .rightCont h3::before {
              content: "";
              display: block;
              width: 8px;
              height: 8px;
              margin: auto 0;
              background: #80212e;
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0; }
          #container .cont2 .inner .careerStep .stepcont .rightCont p .txtbold {
            font-weight: bold; }
      @media screen and (max-width: 900px) {
        #container .cont2 .inner .careerStep .stepcont .leftImg {
          width: 40%;
          max-width: none; }
        #container .cont2 .inner .careerStep .stepcont .rightCont {
          margin: 0 0 0 -48%;
          padding: 0 0 0 48%; } }
      @media (max-width: 480px) {
        #container .cont2 .inner .careerStep .stepcont {
          padding: 30px 10px; }
          #container .cont2 .inner .careerStep .stepcont .leftImg {
            width: 100%;
            float: none; }
          #container .cont2 .inner .careerStep .stepcont .rightCont {
            margin: 0 auto 20px;
            padding: 0;
            float: none; }
            #container .cont2 .inner .careerStep .stepcont .rightCont h3 {
              font-size: 1.8rem;
              margin: 0 0 20px; }
              #container .cont2 .inner .careerStep .stepcont .rightCont h3::before {
                width: 20px; } }
