@charset "UTF-8";
/* 共通 */
/* main */
@media only screen and (min-width: 768px) {
  main {
    padding-bottom: 160px; } }

@media only screen and (max-width: 767px) {
  main {
    margin-bottom: 75px; } }

/* #common */
@media only screen and (min-width: 768px) {
  #common {
    margin-top: 110px; } }

@media only screen and (max-width: 767px) {
  #common {
    margin-top: 55px; } }

/* .textBox */
#common .textBox h3 {
  color: #2a93cc;
  font-weight: 700;
  text-align: center;
  letter-spacing: .15em; }

#common .textBox p {
  letter-spacing: .05em;
  text-align: justify; }

@media only screen and (min-width: 768px) {
  #common .textBox {
    margin-top: 140px; }
    #common .textBox h3 {
      font-size: 1.5rem; }
    #common .textBox p {
      width: 800px;
      margin: 53.6px auto -.4em;
      font-size: 1rem;
      line-height: 1.8; } }

@media only screen and (max-width: 767px) {
  #common .textBox {
    margin-top: 55px; }
    #common .textBox h3 {
      margin: -.1875em 0;
      font-size: 1.5rem;
      line-height: 1.375; }
    #common .textBox p {
      margin: 28.6px 0 -.4em;
      padding: 0 15px;
      font-size: 1rem;
      line-height: 1.8; } }

/* .boxCol2 */
#common .boxCol2 h3 {
  color: #2a93cc;
  font-weight: 700;
  text-align: center;
  letter-spacing: .15em; }

#common .boxCol2 section {
  position: relative;
  background-color: #2a93cc;
  color: #fff; }

#common .boxCol2 h4 {
  margin: -.3em 0;
  font-weight: 700;
  text-align: center;
  letter-spacing: .15em;
  line-height: 1.6; }

#common .boxCol2 p {
  text-align: justify; }

#common .boxCol2 dl dt {
  text-align: center; }

#common .boxCol2 dl dd {
  text-align: justify; }
  #common .boxCol2 dl dd b {
    color: #fff000; }

@media only screen and (min-width: 768px) {
  #common .boxCol2 {
    margin-top: 125px; }
  #common .boxCol2 h3 {
    font-size: 1.5rem; }
  #common .boxCol2 .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 1100px;
    margin: 80px auto 0; }
  #common .boxCol2 section {
    width: 415px;
    padding: 55px 52px 60px 53px; }
    #common .boxCol2 section:nth-child(n+3) {
      margin-top: 66px; }
    #common .boxCol2 section h4 {
      font-size: 1.125rem; }
    #common .boxCol2 section figure {
      margin-top: 40px; }
    #common .boxCol2 section p {
      margin: 29.4px 0 -.4em;
      font-size: .875rem;
      line-height: 1.8; }
    #common .boxCol2 section dl {
      margin-top: 35px;
      font-size: .875rem; }
      #common .boxCol2 section dl div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
        #common .boxCol2 section dl div:nth-child(n+2) {
          margin-top: 2em; }
        #common .boxCol2 section dl div:first-child dt {
          background: url(../img/recruit/feature-icon-1.png) no-repeat center 24px; }
        #common .boxCol2 section dl div:nth-child(2) dt {
          background: url(../img/recruit/feature-icon-2.png) no-repeat center 25px; }
        #common .boxCol2 section dl div:nth-child(3) dt {
          background: url(../img/recruit/feature-icon-3.png) no-repeat center 25px; }
      #common .boxCol2 section dl dt {
        width: 6em;
        min-height: 4.6em; }
      #common .boxCol2 section dl dd {
        width: 320px;
        margin: -.4em 0;
        line-height: 1.8; } }

@media only screen and (max-width: 767px) {
  #common .boxCol2 {
    margin-top: 55px; }
  #common .boxCol2 .container {
    margin: 35px auto 0;
    padding: 0 15px; }
  #common .boxCol2 section {
    padding: 35px 30px; }
    #common .boxCol2 section:nth-child(n+2) {
      margin-top: 23px; }
    #common .boxCol2 section h4 {
      font-size: 1rem;
      font-weight: 700; }
    #common .boxCol2 section figure {
      margin-top: 25px; }
      #common .boxCol2 section figure img {
        width: 100%;
        height: auto; }
    #common .boxCol2 section p {
      margin: 19.4px 0 -.4em;
      font-size: .875rem;
      line-height: 1.8; }
    #common .boxCol2 section dl {
      margin-top: 25px;
      font-size: .875rem; }
      #common .boxCol2 section dl dt {
        min-height: 4.6em; }
      #common .boxCol2 section dl dd {
        margin: 9.4px 0 -.4em;
        line-height: 1.8; }
      #common .boxCol2 section dl div:nth-child(n+2) {
        margin-top: 2em; }
      #common .boxCol2 section dl div:first-child dt {
        background: url(../img/recruit/feature-icon-1.png) no-repeat center 24px; }
      #common .boxCol2 section dl div:nth-child(2) dt {
        background: url(../img/recruit/feature-icon-2.png) no-repeat center 25px; }
      #common .boxCol2 section dl div:nth-child(3) dt {
        background: url(../img/recruit/feature-icon-3.png) no-repeat center 25px; } }

/* .boxCol3 */
#common .boxCol3 h3 {
  color: #2a93cc;
  font-weight: 700;
  text-align: center;
  letter-spacing: .15em; }

#common .boxCol3 section {
  position: relative;
  background-color: #2a93cc;
  color: #fff; }
  #common .boxCol3 section p {
    text-align: justify; }
  #common .boxCol3 section .detail .button,
  #common .boxCol3 section .link .button {
    margin: 0 20px;
    background-color: #000;
    color: #fff;
    font-family: Open Sans, sans-serif;
    font-weight: 600;
    font-style: italic;
    letter-spacing: .1em; }
    #common .boxCol3 section .detail .button:before,
    #common .boxCol3 section .link .button:before {
      left: -20px;
      border-top-width: 11.54701px;
      border-right-width: 20px;
      border-right-color: #000; }
    #common .boxCol3 section .detail .button:after,
    #common .boxCol3 section .link .button:after {
      right: -20px;
      border-bottom-width: 11.54701px;
      border-left-width: 20px;
      border-left-color: #000; }
    #common .boxCol3 section .detail .button span:before,
    #common .boxCol3 section .link .button span:before {
      right: -37px;
      width: 34px;
      border-top: 1px solid;
      border-top-color: #2a93cc; }
  #common .boxCol3 section .detail .button span:before,
  #common .boxCol3 section .link .button span:before {
    border-top-color: #fff; }
  #common .boxCol3 section h3 {
    font-weight: 400;
    text-align: center; }
    #common .boxCol3 section h3:before {
      content: attr(data-label);
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      display: block;
      color: #000;
      font-family: Open Sans, sans-serif;
      font-weight: 700;
      font-style: italic;
      text-align: center;
      letter-spacing: .05em;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%); }

@media only screen and (min-width: 768px) {
  #common .boxCol3 section .detail .button,
  #common .boxCol3 section .detail .button:after,
  #common .boxCol3 section .detail .button:before,
  #common .boxCol3 section .detail .button span:before,
  #common .boxCol3 section .link .button,
  #common .boxCol3 section .link .button:after,
  #common .boxCol3 section .link .button:before,
  #common .boxCol3 section .link .button span:before {
    -webkit-transition: .3s;
    transition: .3s; }
  #common .boxCol3 section .detail .button:hover,
  #common .boxCol3 section .link .button:hover {
    background-color: #fff;
    color: #2a93cc; }
    #common .boxCol3 section .detail .button:hover span:before,
    #common .boxCol3 section .link .button:hover span:before {
      right: -47px; }
  #common .boxCol3 section .detail .button:hover:before,
  #common .boxCol3 section .link .button:hover:before {
    border-right-color: #fff; }
  #common .boxCol3 section .detail .button:hover:after,
  #common .boxCol3 section .link .button:hover:after {
    border-left-color: #fff; } }

@media only screen and (min-width: 768px) {
  #common .boxCol3 {
    margin-top: 115px; }
    #common .boxCol3 h3 {
      font-size: 1.5rem; }
    #common .boxCol3 .container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      width: 1100px;
      margin: 80px auto 0; }
    #common .boxCol3 .container:after {
      content: "";
      display: block;
      width: 345px;
      height: 0; }
    #common .boxCol3 section {
      width: 288px;
      padding: 35px 28px 35px 29px; }
      #common .boxCol3 section h4 {
        margin-top: 30px;
        font-size: 1rem;
        font-weight: 700; }
      #common .boxCol3 section .platform {
        margin: 8.8px 0 -.1em;
        font-size: .75rem;
        line-height: 1.2; }
      #common .boxCol3 section p {
        margin: 24.4px 0 -.4em;
        font-size: .875rem;
        line-height: 1.8;
        letter-spacing: .05em; }
      #common .boxCol3 section .detail,
      #common .boxCol3 section .link {
        margin-top: 30px;
        height: 60px; }
        #common .boxCol3 section .detail .button,
        #common .boxCol3 section .link .button {
          position: absolute;
          left: 60px;
          right: 60px;
          bottom: 35px;
          padding: 23px 0;
          font-size: .875rem; }
      #common .boxCol3 section:nth-child(n+4) {
        margin-top: 33px; } }

@media only screen and (max-width: 767px) {
  #common .boxCol3 {
    margin-top: 55px; }
    #common .boxCol3 h3 {
      font-size: 1.5rem; }
    #common .boxCol3 .container {
      margin: 35px auto 0;
      padding: 0 15px; }
    #common .boxCol3 section {
      padding: 35px 30px; }
      #common .boxCol3 section:nth-child(n+2) {
        margin-top: 23px; }
      #common .boxCol3 section figure img {
        width: 100%;
        height: auto; }
      #common .boxCol3 section h4 {
        margin-top: 30px;
        font-size: 1rem;
        font-weight: 700;
        -webkit-font-feature-settings: "palt";
        font-feature-settings: "palt"; }
      #common .boxCol3 section .platform {
        margin: 8.8px 0 -.1em;
        font-size: .75rem;
        line-height: 1.2; }
      #common .boxCol3 section p {
        margin: 24.4px 0 -.4em;
        font-size: .875rem;
        line-height: 1.8; }
      #common .boxCol3 section .detail,
      #common .boxCol3 section .link {
        margin-top: 30px;
        padding: 0 25px; }
        #common .boxCol3 section .detail .button,
        #common .boxCol3 section .link .button {
          padding: 23px 0;
          font-size: .875rem; } }

/* .tableBox */
#common .tableBox table th {
  text-align: left;
  letter-spacing: .05em; }

#common .tableBox table td {
  letter-spacing: .05em; }
  #common .tableBox table td a {
    color: #000;
    text-decoration: underline; }

@media only screen and (min-width: 768px) {
  #common .tableBox {
    margin-top: 110px; }
    #common .tableBox table {
      width: 800px;
      margin: 120px auto 0; }
      #common .tableBox table th {
        padding-right: 1em;
        font-size: 1rem;
        line-height: 1.6;
        white-space: nowrap; }
        #common .tableBox table th.division {
          padding: 0 3em 0 0; }
      #common .tableBox table tr:nth-child(n+2) th:not(.division),
      #common .tableBox table tr:nth-child(n+2) th:not(.division) ~ * {
        padding-top: 1.6em; }
      #common .tableBox table td {
        width: 100%;
        font-size: 1rem;
        line-height: 1.6; } }

@media only screen and (max-width: 767px) {
  #common .tableBox {
    margin-top: 55px; }
    #common .tableBox table {
      margin: 45px 15px 0; }
      #common .tableBox table th {
        display: block;
        font-size: 1rem;
        line-height: 1.6; }
      #common .tableBox table tr:nth-child(n+2) th:not(.division) {
        padding-top: 1.6em; }
      #common .tableBox table td {
        display: block;
        font-size: 1rem;
        line-height: 1.6; } }

/* .link-button */
#common .link-button .button {
  margin: 0 27px;
  background-color: #000;
  color: #fff;
  letter-spacing: .1em; }
  #common .link-button .button:before {
    left: -27px;
    border-top-width: 15.58846px;
    border-right-width: 27px;
    border-right-color: #000; }
  #common .link-button .button:after {
    right: -27px;
    border-bottom-width: 15.58846px;
    border-left-width: 27px;
    border-left-color: #000; }
  #common .link-button .button span:before {
    right: -49px;
    width: 44px;
    border-top: 1px solid;
    border-top-color: #2a93cc !important; }

@media only screen and (min-width: 768px) {
  #common .link-button {
    margin-top: 120px;
    text-align: center; }
    #common .link-button .button,
    #common .link-button .button:after,
    #common .link-button .button:before,
    #common .link-button .button span:before {
      -webkit-transition: .3s;
      transition: .3s; }
    #common .link-button .button {
      display: inline-block;
      width: 285px;
      padding: 33px 0;
      font-size: 1rem; }
      #common .link-button .button:hover {
        background-color: #2a93cc;
        color: #fff; }
      #common .link-button .button:hover:before {
        border-right-color: #2a93cc; }
      #common .link-button .button:hover:after {
        border-left-color: #2a93cc; }
      #common .link-button .button:hover span:before {
        right: -59px; } }

@media only screen and (max-width: 767px) {
  #common .link-button {
    margin-top: 70px;
    padding: 0 15px; }
    #common .link-button .button {
      padding: 23px 0;
      font-size: 1rem; } }