@import url("global.css");
#toptitle {
  height: 950px;
  background-image: url("../recruit/img/top_img.jpg");
  background-position: center center;
  overflow: hidden;
  position: relative; }
  #toptitle h1 {
    position: absolute;
    bottom: -30px;
    right: -50px;
    width: 800px; }

#bodyarea {
  padding-top: 60px; }

.about {
  padding: 10px;
  position: relative;
  padding-bottom: 50vw; }
  .about h2 {
    font-size: 30px;
    line-height: 1.4;
    font-weight: bold;
    color: #003876;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px; }
    .about h2 span {
      display: block;
      font-size: 18px;
      margin-bottom: 18px; }
    .about h2 br {
      display: none; }
  .about p {
    margin-top: 20px;
    padding: 5px;
    font-size: 18px;
    font-weight: bold;
    width: 425px;
    background: rgba(255, 255, 255, 0.8); }
  .about figure.intro_img1 {
    position: absolute;
    top: 165px;
    right: 0;
    width: 55%;
    z-index: -1; }
  .about figure.intro_img2 {
    position: absolute;
    top: 370px;
    left: 0;
    width: 50%;
    z-index: -2; }
  .about figure.intro_img3 {
    display: none; }

.cnt1 {
  margin-top: 120px;
  padding-top: 60px;
  overflow: hidden; }
  .cnt1 .president {
    float: right;
    width: 48%;
    position: relative; }
    .cnt1 .president p {
      /*-ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;*/
      position: absolute;
      top: -60px;
      right: 20px;
      color: #fff;
      font-size: 32px;
      font-weight: 500;
      line-height: 1.8; }
      .cnt1 .president p span {
        padding: 0px 10px;
        background-color: #003876; }
    .cnt1 .president img {
      margin-top: 20px; }
  .cnt1 .text {
    float: left;
    width: 52%;
    padding: 40px 0px; }
    .cnt1 .text h3 {
      margin-bottom: 30px;
      font-size: 32px;
      font-weight: bold;
      letter-spacing: .5px;
      padding: 0px 30px;
      color: #003876; }
    .cnt1 .text p {
      margin-top: 20px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: .2px;
      line-height: 2;
      padding: 0px 30px; }
      .cnt1 .text p.pre_txt {
        margin-top: 30px;
        font-size: 16px;
        text-align: right;
        font-weight: 100; }
        .cnt1 .text p.pre_txt span {
          font-size: 20px;
          display: inline-block;
          margin-left: 10px;
          font-weight: bold; }

.cnt2 {
  margin-top: 120px; }
  .cnt2 #area {
    margin: 5px 10px;
    background-color: #f7f7f7;
    position: relative; }
    .cnt2 #area .textarea {
      padding: 80px 0 80px 85px;
      position: relative;
      z-index: 1; }
      .cnt2 #area .textarea .lead {
        font-size: 34px;
        font-weight: bold;
        line-height: 1.6;
        margin-bottom: 20px; }
      .cnt2 #area .textarea .sub {
        font-weight: bold; }
      .cnt2 #area .textarea .areabox {
        margin-top: 50px; }
        .cnt2 #area .textarea .areabox dt {
          font-weight: bold;
          color: #fff;
          padding: 3px 15px;
          background-color: #1F1F1F;
          margin-bottom: 15px;
          display: inline-block; }
    .cnt2 #area figure {
      position: absolute;
      width: 50%;
      height: 100%;
      right: 0;
      top: 0; }
      .cnt2 #area figure img {
        object-position: left top;
        font-family: 'object-position: left top;'; }
  .cnt2 .overview {
    overflow: hidden; }
    .cnt2 .overview li {
      float: left;
      width: 50%;
      margin-top: 10px; }
      .cnt2 .overview li .ov {
        margin: 5px 10px;
        padding: 20px 10px 0;
        background-color: #f7f7f7;
        position: relative;
        height: 300px;
        text-align: center; }
        .cnt2 .overview li .ov p {
          background-color: #0085B2;
          border-radius: 30px;
          color: #fff;
          font-size: 18px;
          font-weight: bold;
          text-align: center;
          width: 250px;
          display: block;
          margin: 30px auto 5px;
          padding: 2px; }
          .cnt2 .overview li .ov p .sp_br {
            display: none; }
        .cnt2 .overview li .ov img {
          margin: 15px 0; }
      .cnt2 .overview li .heikin {
        position: relative; }
        .cnt2 .overview li .heikin p:last-of-type {
          margin: 0 auto; }
        .cnt2 .overview li .heikin img {
          width: 450px; }
          .cnt2 .overview li .heikin img:first-of-type {
            margin: 5px 0 15px; }
          .cnt2 .overview li .heikin img:last-of-type {
            position: absolute;
            bottom: 0px;
            right: 62px; }
      .cnt2 .overview li:last-of-type {
        width: 100%; }
        .cnt2 .overview li:last-of-type .ov {
          height: 350px; }
          .cnt2 .overview li:last-of-type .ov ul {
            position: relative; }
            .cnt2 .overview li:last-of-type .ov ul li {
              float: left;
              width: 70%; }
              .cnt2 .overview li:last-of-type .ov ul li p {
                width: 300px; }
              .cnt2 .overview li:last-of-type .ov ul li img.act {
                position: absolute;
                top: -15px;
                width: 290px;
                right: 50px; }
              .cnt2 .overview li:last-of-type .ov ul li img.act2 {
                display: none; }

.cnt3 {
  margin-top: 120px;
  background-color: #000;
  position: relative; }
  .cnt3 a:hover {
    opacity: 0.6; }
  .cnt3 figure {
    position: absolute;
    bottom: 10px;
    width: 35%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none; }

.intro {
  margin: 90px auto;
  text-align: center; }
  .intro figure {
    margin-bottom: 40px;
    width: 550px;
    margin: 0 auto; }
  .intro h2 {
    margin: 80px auto 20px;
    line-height: 1.5;
    font-size: 42px;
    font-weight: bold;
    color: #003876; }
    .intro h2 img {
      display: inline-block;
      vertical-align: sub;
      margin: 0 10px;
      height: 50px; }
  .intro .txtbox {
    color: #003876;
    width: 600px;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 40px;
    padding: 20px 10px;
    border-top: 4px double #003876;
    border-bottom: 4px double #003876; }

#new_grad,
#career_grad {
  margin-bottom: 60px; }
  #new_grad h3,
  #career_grad h3 {
    line-height: 80px;
    font-weight: bold;
    text-align: center;
    background-color: #003876;
    color: #FFF;
    font-size: 27px;
    margin-bottom: 30px; }
  #new_grad .rikunabi,
  #career_grad .rikunabi {
    text-align: center; }
    #new_grad .rikunabi a,
    #career_grad .rikunabi a {
      margin: 0 auto 10px;
      display: block;
      width: 400px;
      line-height: 120px;
      border: 1px solid #0068B7;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
      #new_grad .rikunabi a img,
      #career_grad .rikunabi a img {
        vertical-align: middle; }
      #new_grad .rikunabi a + p,
      #career_grad .rikunabi a + p {
        text-align: center;
        line-height: 1; }

#career_grad dl {
  margin: 20px auto 0;
  width: 1000px; }
  #career_grad dl dt {
    text-align: center;
    font-weight: bold;
    line-height: 1.4;
    padding: 20px 10px;
    border: 1px solid #EEE;
    font-size: 20px;
    color: #003876;
    position: relative;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
    -webkit-transition: all 0.5s cubic-bezier(0.52, 0.08, 0.18, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; }
    #career_grad dl dt br {
      display: none; }
    #career_grad dl dt span {
      display: inline-block;
      font-size: 80%; }
    #career_grad dl dt::after {
      content: "\f107";
      color: rgba(0, 56, 118, 0.5);
      line-height: 1;
      font-size: 24px;
      font-weight: 900;
      font-family: "Font Awesome 5 free";
      position: absolute;
      bottom: -2px;
      left: 50%;
      width: 40px;
      margin-left: -20px; }
    #career_grad dl dt.openheader {
      border-color: #003876;
      border-bottom-color: #EEE; }
      #career_grad dl dt.openheader::after {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg); }
    #career_grad dl dt:hover {
      border-color: #003876; }
  #career_grad dl dd.subblock {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid #003876;
    border-right: 1px solid #003876;
    border-bottom: 1px solid #003876;
    padding: 35px 100px;
    text-align: justify; }
    #career_grad dl dd.subblock table {
      border-collapse: collapse; }
      #career_grad dl dd.subblock table tr {
        border-bottom: 1px solid #EEE; }
        #career_grad dl dd.subblock table tr:last-of-type {
          border-bottom: none; }
      #career_grad dl dd.subblock table th, #career_grad dl dd.subblock table td {
        padding: 10px 15px; }
      #career_grad dl dd.subblock table th {
        white-space: nowrap; }

#entry_bnr {
  background: url(../recruit/img/entry_bg.png) no-repeat center center;
  background-size: cover; }
  #entry_bnr .wrapper {
    margin-top: 80px;
    height: 340px;
    padding-top: 70px;
    box-sizing: border-box;
    text-align: center; }
    #entry_bnr .wrapper .pagettl {
      color: #fff;
      font-size: 32px;
      font-weight: bold;
      line-height: 1.5;
      margin-bottom: 20px; }
    #entry_bnr .wrapper p {
      color: #fff;
      font-size: 16px; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 (1400px)
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 1400px) {
  #bodyarea {
    padding-top: 40px; }

  #toptitle {
    height: 60vw;
    background-size: cover; }
    #toptitle h1 {
      bottom: -25px;
      right: -60px;
      width: 50%; }

  .about figure.intro_img1 {
    top: 200px; }
  .about figure.intro_img2 {
    top: 280px; }

  .cnt1 {
    margin-top: 90px;
    padding-top: 30px; }
    .cnt1 .president p {
      right: 15px;
      font-size: 24px; }
    .cnt1 .text {
      padding-top: 30; }
      .cnt1 .text h3 {
        font-size: 28px;
        line-height: 1.7; }
      .cnt1 .text p {
        margin-top: 18px;
        font-size: 17px; }
        .cnt1 .text p.pre_txt {
          margin-top: 28px; }

  .cnt2 #area .textarea {
    padding: 50px 0 50px 60px; }
    .cnt2 #area .textarea .lead {
      font-size: 28px; }
    .cnt2 #area .textarea .sub {
      padding-right: 50%; }
    .cnt2 #area .textarea .areabox {
      margin-top: 40px; }
  .cnt2 #area figure img {
    object-position: center top;
    font-family: 'object-position: center top;'; }
  .cnt2 .overview li .ov {
    padding: 15px 10px 0;
    height: 300px; }
    .cnt2 .overview li .ov p {
      margin: 20px auto 5px;
      font-size: 16px;
      width: 280px; }
    .cnt2 .overview li .ov img {
      margin: 20px 0;
      width: 95%; }
  .cnt2 .overview li .heikin {
    position: relative; }
    .cnt2 .overview li .heikin p:last-of-type {
      margin: 0 auto; }
    .cnt2 .overview li .heikin img:first-of-type {
      margin: 10px auto 15px; }
    .cnt2 .overview li .heikin img:last-of-type {
      margin: 0 auto 15px;
      position: inherit;
      bottom: auto;
      right: auto; }
  .cnt2 .overview li:last-of-type .ov {
    height: 330px; }
    .cnt2 .overview li:last-of-type .ov ul li {
      width: 68%; }
      .cnt2 .overview li:last-of-type .ov ul li img.act {
        top: -20px;
        width: 25%;
        right: 20px; }

  #career_grad dl {
    margin: 20px 50px 0;
    width: auto; }

  #entry_bnr .wrapper {
    height: 300px;
    padding-top: 68px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #bodyarea {
    padding-top: 30px; }

  .about {
    padding-bottom: 42vw; }
    .about h2 {
      font-size: 26px; }
      .about h2 span {
        margin-bottom: 16px; }
    .about p {
      margin-top: 16px;
      padding: 8px;
      font-size: 16px;
      width: 400px; }

  .cnt1 .president {
    float: inherit;
    width: 80%;
    margin: 0 auto; }
    .cnt1 .president p {
      right: -67px;
      font-size: 25px; }
      .cnt1 .president p span {
        padding: 10px 0 0; }
  .cnt1 .text {
    float: inherit;
    width: 100%;
    padding: 10px 0px 20px; }
    .cnt1 .text h3 {
      margin: 40px 0;
      font-size: 20px;
      letter-spacing: 1px;
      padding: 0px 20px; }
    .cnt1 .text p {
      margin-top: 20px;
      font-size: 16px;
      letter-spacing: 1px;
      padding: 0px 20px; }

  .cnt2 {
    margin-top: 100px; }
    .cnt2 #area .textarea {
      padding: 45px 30px 35px;
      text-align: center; }
      .cnt2 #area .textarea .lead {
        font-size: 24px; }
      .cnt2 #area .textarea .sub {
        padding-right: 0; }
      .cnt2 #area .textarea .areabox {
        margin-top: 30px; }
    .cnt2 #area figure {
      position: static;
      width: 100%; }
    .cnt2 .overview li .ov {
      padding: 10px;
      height: 26vw; }
      .cnt2 .overview li .ov p {
        margin: 10px auto 5px;
        width: 75%; }
      .cnt2 .overview li .ov img {
        margin: 20px 0;
        width: 90%; }
    .cnt2 .overview li .heikin {
      position: relative; }
      .cnt2 .overview li .heikin p:last-of-type {
        margin: 0 auto; }
      .cnt2 .overview li .heikin img:last-of-type {
        margin: 5px auto 10px; }
    .cnt2 .overview li:last-of-type .ov {
      height: 30vw; }
      .cnt2 .overview li:last-of-type .ov ul li img.act {
        top: 0px;
        width: 28%;
        right: 15px; }

  .cnt3 {
    margin-top: 90px; }

  .intro {
    margin: 50px auto 90px; }
    .intro figure {
      width: 450px;
      margin: 60px auto 40px; }
    .intro h2 {
      font-size: 32px;
      line-height: 1.5;
      margin: 80px auto 10px; }
    .intro .txtbox {
      width: auto;
      margin-top: 20px;
      padding: 20px; }

  #new_grad,
  #career_grad {
    margin-bottom: 50px; }
    #new_grad h3,
    #career_grad h3 {
      line-height: 70px;
      font-size: 24px; }
    #new_grad .rikunabi a,
    #career_grad .rikunabi a {
      width: 320px;
      line-height: 100px; }
      #new_grad .rikunabi a img,
      #career_grad .rikunabi a img {
        /*width: 240px;*/
        height: auto; }

  #career_grad dl {
    margin: 20px 20px 0; }
    #career_grad dl dt {
      letter-spacing: 1px;
      font-size: 18px; }
      #career_grad dl dt br {
        display: block; }
    #career_grad dl dd.subblock {
      padding: 30px 40px; }

  #entry_bnr .wrapper {
    margin-top: 60px;
    height: 230px;
    padding-top: 40px; }
    #entry_bnr .wrapper .pagettl {
      font-size: 24px;
      margin-bottom: 16px; }
    #entry_bnr .wrapper p {
      font-size: 14px; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-3 ( 644px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  #bodyarea {
    padding-top: 10px; }

  #toptitle {
    width: 100%;
    height: 280px;
    background-size: cover; }
    #toptitle h1 {
      bottom: -15px;
      right: -50px;
      width: 300px; }

  .about {
    padding: 10px; }
    .about h2 {
      font-size: 22px; }
      .about h2 span {
        font-size: 16px;
        margin-bottom: 10px; }
      .about h2 br {
        display: block; }
    .about p {
      margin-top: 10px;
      padding: 5px;
      font-size: 14px;
      width: auto; }
    .about figure.intro_img1 {
      display: none; }
    .about figure.intro_img2 {
      display: none; }
    .about figure.intro_img3 {
      display: block;
      margin-top: 20px; }

  .cnt1 {
    margin-top: 30px;
    padding-top: 0; }
    .cnt1 .president p {
      right: -66px;
      line-height: 1.5;
      font-size: 18px; }
      .cnt1 .president p span {
        padding: 6px 0 0; }
    .cnt1 .text {
      padding: 10px 0px 20px; }
      .cnt1 .text h3 {
        margin: 20px 0;
        font-size: 24px;
        padding: 0 5px; }
        .cnt1 .text h3 span {
          display: block; }
      .cnt1 .text p {
        margin-top: 10px;
        font-size: 14px;
        padding: 0px 5px; }
        .cnt1 .text p.pre_txt {
          margin-top: 26px;
          font-size: 14px;
          line-height: 1.5; }
          .cnt1 .text p.pre_txt span {
            font-size: 18px; }

  .cnt2 {
    margin-top: 60px; }
    .cnt2 #area .textarea {
      padding: 40px 20px 25px; }
      .cnt2 #area .textarea .lead {
        font-size: 19px; }
        .cnt2 #area .textarea .lead br {
          display: none; }
      .cnt2 #area .textarea .sub {
        font-weight: normal; }
      .cnt2 #area .textarea .areabox {
        margin-top: 20px; }
        .cnt2 #area .textarea .areabox dt {
          padding: 3px 10px;
          font-size: 12px; }
        .cnt2 #area .textarea .areabox dd {
          font-size: 12px; }
    .cnt2 .overview li {
      float: none;
      width: 100%; }
      .cnt2 .overview li .ov {
        margin: 5px 10px;
        padding: 20px 10px 0;
        height: auto; }
        .cnt2 .overview li .ov p {
          font-size: 16px;
          width: 60%;
          margin: 5px auto 0px;
          padding: 2px; }
          .cnt2 .overview li .ov p .sp_br {
            display: block; }
        .cnt2 .overview li .ov img {
          margin: 20px 0;
          width: 85%; }
      .cnt2 .overview li .heikin p:last-of-type {
        margin: 0 auto; }
      .cnt2 .overview li .heikin img {
        width: 100%; }
        .cnt2 .overview li .heikin img:first-of-type {
          margin: 20px 0; }
        .cnt2 .overview li .heikin img:last-of-type {
          margin: 5px 0 10px;
          position: inherit;
          bottom: auto;
          right: auto; }
      .cnt2 .overview li:last-of-type .ov {
        height: auto;
        padding-bottom: 10px; }
        .cnt2 .overview li:last-of-type .ov ul li {
          float: none;
          width: auto; }
          .cnt2 .overview li:last-of-type .ov ul li p {
            width: 60%; }
          .cnt2 .overview li:last-of-type .ov ul li img {
            width: 100%; }
          .cnt2 .overview li:last-of-type .ov ul li img.act {
            position: inherit;
            top: auto;
            right: auto;
            display: none; }
          .cnt2 .overview li:last-of-type .ov ul li img.act2 {
            margin: 10px 0;
            width: 100%;
            display: block; }

  .cnt3 {
    margin-top: 60px; }

  .intro {
    margin: 60px auto; }
    .intro figure {
      width: 68%;
      margin-bottom: 30px; }
    .intro h2 {
      margin: 40px auto 20px;
      font-size: 18px;
      letter-spacing: 0;
      line-height: 1.5; }
      .intro h2 img {
        margin: 0 10px;
        height: 26px; }
      .intro h2 + p {
        text-align: justify; }
    .intro .txtbox {
      margin-top: 20px;
      padding: 20px 10px;
      text-align: justify; }
      .intro .txtbox p {
        font-size: 14px; }

  #new_grad,
  #career_grad {
    margin-bottom: 40px; }
    #new_grad h3,
    #career_grad h3 {
      line-height: 50px;
      font-size: 20px;
      margin-bottom: 15px; }
    #new_grad .rikunabi a,
    #career_grad .rikunabi a {
      margin: 0 30px 10px;
      display: inline-block;
      width: auto;
      line-height: 1;
      padding: 20px 40px; }
      #new_grad .rikunabi a img,
      #career_grad .rikunabi a img {
        width: auto; }

  #career_grad dl {
    margin: 10px 10px 0; }
    #career_grad dl dt {
      padding: 15px 10px;
      font-size: 17px; }
      #career_grad dl dt::after {
        font-size: 18px;
        bottom: -2px;
        width: 30px;
        margin-left: -15px; }
    #career_grad dl dd.subblock {
      padding: 20px 15px; }
      #career_grad dl dd.subblock table tr {
        border-bottom: none; }
      #career_grad dl dd.subblock table th, #career_grad dl dd.subblock table td {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%; }
      #career_grad dl dd.subblock table th {
        padding: 10px;
        text-align: center;
        background-color: #F6F6F6; }
      #career_grad dl dd.subblock table td {
        padding: 4px 10px 15px; } }