@charset "UTF-8";
/* CSS Document */
/* ------------------------------
テキスト
------------------------------ */
.txt_indent {
  display: block;
  text-indent: -1em;
  margin-left: 1em; }

.txt_ls_0 {
  letter-spacing: 0; }

.txt_ls_01 {
  letter-spacing: 0.1em; }

.txt_ls_015 {
  letter-spacing: 0.15em; }

.txt_ls_02 {
  letter-spacing: 0.2em; }

.txt_ls_005 {
  letter-spacing: 0.05em; }

.txt_blue {
  color: #0168B6 !important; }

.txt_black {
  color: #000 !important; }

.txt_bold {
  font-weight: bold; }

.txt_center {
  text-align: center !important; }

.txt_right {
  text-align: right !important; }

.pcbr {
  display: block; }

.spbr {
  display: none; }

.navy {
  color: #001E46; }

.blue {
  color: #0F559D; }

.sp_only {
  display: none; }

.fs_10 {
  font-size: 1.0rem; }

.fs_12 {
  font-size: 1.2rem; }

.fs_14 {
  font-size: 1.4rem; }

.fs_16 {
  font-size: 1.6rem; }

.fs_18 {
  font-size: 1.8rem; }

.fs_20 {
  font-size: 2.0rem; }

.fs_24 {
  font-size: 2.4rem; }

.fs_26 {
  font-size: 2.6rem; }

.fs_28 {
  font-size: 2.8rem; }

.fs_30 {
  font-size: 3.0rem; }

.fs_35 {
  font-size: 3.5rem; }

.fs_40 {
  font-size: 4.0rem; }

.fs_45 {
  font-size: 4.5rem; }

.fs_50 {
  font-size: 5.0rem; }

.fs_60 {
  font-size: 6.0rem; }

.fw_100 {
  font-weight: 100; }

.fw_200 {
  font-weight: 200; }

.fw_300 {
  font-weight: 300; }

.fw_400 {
  font-weight: 400; }

.fw_500 {
  font-weight: 500; }

.fw_700 {
  font-weight: 700; }

.lh_10 {
  line-height: 1.0rem !important; }

.lh_12 {
  line-height: 1.2rem !important; }

.lh_14 {
  line-height: 1.4rem !important; }

.lh_15 {
  line-height: 1.5rem !important; }

.lh_16 {
  line-height: 1.6rem !important; }

.lh_18 {
  line-height: 1.8rem !important; }

.lh_20 {
  line-height: 2.0rem !important; }

.lh_25 {
  line-height: 2.5rem !important; }

.lh_28 {
  line-height: 2.8rem !important; }

.lh_30 {
  line-height: 3.0rem !important; }

.lh_32 {
  line-height: 3.2rem !important; }

.lh_35 {
  line-height: 3.5rem !important; }

.lh_40 {
  line-height: 4.0rem !important; }

.lh_42 {
  line-height: 4.2rem !important; }

.lh_45 {
  line-height: 4.5rem !important; }

.mrg__btm0 {
  margin-bottom: 0 !important; }

.mrg__btm02 {
  margin-bottom: .2em !important; }

.mrg__btm05 {
  margin-bottom: .5em !important; }

.mrg__btm08 {
  margin-bottom: .8em !important; }

.mrg__btm1 {
  margin-bottom: 1em !important; }

.mrg__btm15 {
  margin-bottom: 1.5em !important; }

.mrg__btm2 {
  margin-bottom: 2em !important; }

.mrg__btm3 {
  margin-bottom: 3em !important; }

.mrg__btm4 {
  margin-bottom: 4em !important; }

.mrg__btm5 {
  margin-bottom: 5em !important; }

.mrg__btm6 {
  margin-bottom: 6em !important; }

.mrg__btm7 {
  margin-bottom: 7em !important; }

.mrg__btm8 {
  margin-bottom: 8em !important; }

.mrg__btm9 {
  margin-bottom: 9em !important; }

.mrg__btm1-0 {
  margin-bottom: 10em !important; }

.mrg__btm1-5 {
  margin-bottom: 15em !important; }

.mrg__btm2-0 {
  margin-bottom: 20em !important; }

.mrg__top0 {
  margin-top: 0 !important; }

.mrg__top05 {
  margin-top: .5em !important; }

.mrg__top1 {
  margin-top: 1em !important; }

.mrg__top2 {
  margin-top: 2em !important; }

.mrg__top3 {
  margin-top: 3em !important; }

.mrg__top4 {
  margin-top: 4em !important; }

.mrg__top5 {
  margin-top: 5em !important; }

.mrg__top6 {
  margin-top: 6em !important; }

.mrg__top7 {
  margin-top: 7em !important; }

.mrg__top8 {
  margin-top: 8em !important; }

.mrg__top9 {
  margin-top: 9em !important; }

.mrg__left0 {
  margin-left: 0 !important; }

.mrg__left1 {
  margin-left: 1em !important; }

.mrg__left2 {
  margin-left: 2em !important; }

.mrg__left3 {
  margin-left: 3em !important; }

.mrg__right0 {
  margin-right: 0 !important; }

.mrg__right1 {
  margin-right: 1em !important; }

.mrg__right2 {
  margin-right: 2em !important; }

.mrg__right3 {
  margin-right: 3em !important; }

.pad__0 {
  padding: 0 !important; }

.pad__1 {
  padding: 1em !important; }

.pad__2 {
  padding: 2em !important; }

.pad__3 {
  padding: 3em !important; }

.pad__4 {
  padding: 4em !important; }

.pad__5 {
  padding: 5em !important; }

.pad__6 {
  padding: 6em !important; }

.pad__top0 {
  padding-top: 0 !important; }

.pad__top05 {
  padding-top: 0.5em !important; }

.pad__top1 {
  padding-top: 1em !important; }

.pad__top2 {
  padding-top: 2em !important; }

.pad__top3 {
  padding-top: 3em !important; }

.pad__top4 {
  padding-top: 4em !important; }

.pad__top5 {
  padding-top: 5em !important; }

.pad__top6 {
  padding-top: 6em !important; }

.pad__top7 {
  padding-top: 7em !important; }

.pad__top8 {
  padding-top: 8em !important; }

.pad__top9 {
  padding-top: 9em !important; }

.pad__top10 {
  padding-top: 10em !important; }

.pad__top20 {
  padding-top: 20em !important; }

.pad__btm0 {
  padding-bottom: 0 !important; }

.pad__btm05 {
  padding-bottom: 0.5em !important; }

.pad__btm1 {
  padding-bottom: 1em !important; }

.pad__btm2 {
  padding-bottom: 2em !important; }

.pad__btm3 {
  padding-bottom: 3em !important; }

.pad__btm4 {
  padding-bottom: 4em !important; }

.pad__btm5 {
  padding-bottom: 5em !important; }

.pad__btm6 {
  padding-bottom: 6em !important; }

@media all and (max-width: 480px) {
  .txt__sp_ls_0 {
    letter-spacing: 0; }

  .txt__sp_ls_01 {
    letter-spacing: 0.1em; }

  .txt__sp_ls_02 {
    letter-spacing: 0.2em; }

  .txt__sp_s_005 {
    letter-spacing: 0.05em; }

  .pcbr {
    display: none; }

  .spbr {
    display: block; }

  .sp_only {
    display: block; }

  .txt__sp_center {
    display: block;
    text-align: center !important; }

  .txt__sp_right {
    display: block;
    text-align: right !important; }

  .txt__sp_left {
    display: block;
    text-align: left !important; }

  .fs__sp_10 {
    font-size: 1.0rem; }

  .fs__sp_12 {
    font-size: 1.2rem !important; }

  .fs__sp_14 {
    font-size: 1.4rem !important; }

  .fs__sp_16 {
    font-size: 1.6rem; }

  .fs__sp_18 {
    font-size: 1.8rem; }

  .fs__sp_20 {
    font-size: 2.0rem; }

  .fs__sp_24 {
    font-size: 2.4rem; }

  .fs__sp_30 {
    font-size: 3.0rem; }

  .fs__sp_40 {
    font-size: 4.0rem; }

  .lh__sp_10 {
    line-height: 1.0rem !important; }

  .lh__sp_12 {
    line-height: 1.2rem !important; }

  .lh__sp_14 {
    line-height: 1.4rem !important; }

  .lh__sp_15 {
    line-height: 1.5rem !important; }

  .lh__sp_16 {
    line-height: 1.6rem !important; }

  .lh___sp_18 {
    line-height: 1.8rem !important; }

  .lh__sp_20 {
    line-height: 2.0rem !important; }

  .lh__sp_26 {
    line-height: 2.6rem !important; }

  .lh__sp_30 {
    line-height: 3.0rem !important; }

  .lh__sp_36 {
    line-height: 3.6rem !important; }

  .lh__sp_40 {
    line-height: 4.0rem !important; }

  .mrg__sp_btm0 {
    margin-bottom: 0 !important; }

  .mrg__sp_btm05 {
    margin-bottom: .5em !important; }

  .mrg__sp_btm1 {
    margin-bottom: 1em !important; }

  .mrg__sp_btm15 {
    margin-bottom: 1.5em !important; }

  .mrg__sp_btm2 {
    margin-bottom: 2em !important; }

  .mrg__sp_btm3 {
    margin-bottom: 3em !important; }

  .mrg__sp_btm4 {
    margin-bottom: 4em !important; }

  .mrg__sp_btm5 {
    margin-bottom: 5em !important; }

  .mrg__sp_btm6 {
    margin-bottom: 6em !important; }

  .mrg__sp_btm7 {
    margin-bottom: 7em !important; }

  .mrg__sp_btm8 {
    margin-bottom: 8em !important; }

  .mrg__sp_btm9 {
    margin-bottom: 9em !important; }

  .mrg__sp_top0 {
    margin-top: 0 !important; }

  .mrg__sp_top05 {
    margin-top: .5em !important; }

  .mrg__sp_top1 {
    margin-top: 1em !important; }

  .mrg__sp_top2 {
    margin-top: 2em !important; }

  .mrg__sp_top3 {
    margin-top: 3em !important; }

  .mrg__sp_top4 {
    margin-top: 4em !important; }

  .mrg__sp_top5 {
    margin-top: 5em !important; }

  .mrg__sp_top6 {
    margin-top: 6em !important; }

  .mrg__sp_top7 {
    margin-top: 7em !important; }

  .mrg__sp_top8 {
    margin-top: 8em !important; }

  .mrg__sp_top9 {
    margin-top: 9em !important; }

  .pad__sp_0 {
    padding: 0 !important; }

  .pad__sp_05 {
    padding: .5em !important; }

  .pad__sp_1 {
    padding: 1em !important; }

  .pad__sp_2 {
    padding: 2em !important; }

  .pad__sp_3 {
    padding: 3em !important; }

  .pad__sp_4 {
    padding: 4em !important; }

  .pad__sp_5 {
    padding: 5em !important; }

  .pad__sp_6 {
    padding: 6em !important; }

  .pad__sp_top0 {
    padding-top: 0 !important; }

  .pad__sp_top1 {
    padding-top: 1em !important; }

  .pad__sp_top2 {
    padding-top: 2em !important; }

  .pad__sp_top3 {
    padding-top: 3em !important; }

  .pad__sp_top4 {
    padding-top: 4em !important; }

  .pad__sp_top5 {
    padding-top: 5em !important; }

  .pad__sp_top6 {
    padding-top: 6em !important; }

  .pad__sp_top7 {
    padding-top: 7em !important; }

  .pad__sp_top8 {
    padding-top: 8em !important; }

  .pad__sp_btm0 {
    padding-bottom: 0 !important; }

  .pad__sp_btm1 {
    padding-bottom: 1em !important; }

  .pad__sp_btm2 {
    padding-bottom: 2em !important; }

  .pad__sp_btm3 {
    padding-bottom: 3em !important; }

  .pad__sp_btm4 {
    padding-bottom: 4em !important; }

  .pad__sp_btm5 {
    padding-bottom: 5em !important; }

  .pad__sp_btm6 {
    padding-bottom: 6em !important; } }
/*---------------------------------------------
	TOP css
  ---------------------------------------------*/
.fv {
  width: 100%;
  height: calc(100vh - 140px);
  position: relative;
  overflow: hidden; }
  @media all and (max-width: 480px) {
    .fv {
      height: 70vh; } }
  .fv:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("/assets/img/top/fv_bg.jpg") center no-repeat;
    background-size: cover;
    z-index: -1;
    transform: scale(1.1);
    animation: scaleAnim 3s 0s ease-in-out;
    animation-fill-mode: forwards; }
    @media all and (max-width: 480px) {
      .fv:after {
        background-image: url("/assets/img/top/fv_bg_sp.jpg"); } }
  .fv .main_copy {
    width: 55vw;
    min-width: 600px;
    position: absolute;
    top: 30%;
    right: 5vw; }
    @media all and (max-width: 480px) {
      .fv .main_copy {
        width: 90%;
        min-width: 90%;
        top: 40%;
        right: 0;
        left: 0;
        margin: 0 auto; } }
  .fv .main_copy .en_copy {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center; }
    .fv .main_copy .en_copy img:nth-of-type(1) {
      display: block;
      width: 60%;
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      animation: fvCopy 0.5s 1.0s ease-in-out;
      animation-fill-mode: forwards; }
    .fv .main_copy .en_copy img:nth-of-type(2) {
      display: block;
      width: 10%;
      margin-right: 10px;
      opacity: 0;
      transform: rotate(90deg);
      animation: peke 0.5s 1.5s ease-in-out;
      animation-fill-mode: forwards; }
    .fv .main_copy .en_copy img:nth-of-type(3) {
      display: block;
      width: 23%;
      opacity: 0;
      clip-path: inset(0 100% 0 0);
      animation: fvCopy 0.5s 2.0s ease-in-out;
      animation-fill-mode: forwards; }
  .fv .main_copy p {
    padding-left: 10px;
    color: #fff;
    letter-spacing: 0.1em;
    line-height: 2em;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: fvCopy 1s 3s ease-in-out;
    animation-fill-mode: forwards; }
    @media all and (max-width: 480px) {
      .fv .main_copy p {
        padding-left: 0;
        line-height: 1.8em; }
        .fv .main_copy p br {
          display: none; } }
  .fv .scroll_btn {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 30px;
    left: 30px;
    border-radius: 50%; }
    @media all and (max-width: 480px) {
      .fv .scroll_btn {
        display: none; } }
    .fv .scroll_btn:before {
      content: '';
      width: 100px;
      height: 100px;
      background: url("/assets/img/top/scroll_btn.png") no-repeat;
      background-size: contain;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      transition: 0.3s;
      animation: 30s linear infinite rotation; }
    .fv .scroll_btn:after {
      content: '';
      width: 9px;
      height: 9px;
      border-right: 3px solid #fff;
      border-bottom: 3px solid #fff;
      transform: rotate(45deg);
      position: absolute;
      top: 40%;
      right: 0;
      left: 0;
      margin: 0 auto; }

/*↓ipad用縦css*/
@media screen and (min-device-width: 744px) and (max-device-width: 1133px) and (orientation: portrait) {
  .fv {
    height: 70vh; } }
@keyframes scaleAnim {
  0% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }
@keyframes rotation {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }
@keyframes fvCopy {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0); }
  100% {
    opacity: 1;
    clip-path: inset(0); } }
@keyframes peke {
  0% {
    opacity: 0;
    transform: rotate(90deg); }
  100% {
    opacity: 1;
    transform: rotate(0deg); } }
/*---------------------------------------------
	ビジョン
  ---------------------------------------------*/
.vision_jobs {
  padding-top: 260px; }
  @media all and (max-width: 480px) {
    .vision_jobs {
      padding-top: 50px; } }

.vision_area {
  text-align: center; }
  @media all and (max-width: 480px) {
    .vision_area {
      width: 90%;
      margin: 0 auto;
      text-align: left; } }
  .vision_area h2 {
    letter-spacing: 0.2em;
    opacity: 0;
    color: #0F559D;
    position: relative;
    transition: 1s; }
    @media all and (max-width: 480px) {
      .vision_area h2 {
        opacity: 1;
        letter-spacing: 0.1em;
        line-height: 1.5em; }
        .vision_area h2 br {
          display: none; } }
    .vision_area h2:before {
      content: '';
      position: absolute;
      top: -50px;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 1px;
      height: 35px;
      background-color: #0F559D; }
      @media all and (max-width: 480px) {
        .vision_area h2:before {
          height: 20px;
          top: -30px; } }
    .vision_area h2:after {
      content: 'VISION';
      position: absolute;
      top: -85px;
      right: 0;
      left: 0;
      margin: 0 auto;
      color: #001E46;
      font-size: 1.4rem;
      font-weight: bold; }
      @media all and (max-width: 480px) {
        .vision_area h2:after {
          font-size: 1.2rem;
          top: -55px;
          text-align: center; } }
  .vision_area h2.isAnimate {
    opacity: 1;
    letter-spacing: 0.1em; }
  @media all and (max-width: 480px) {
    .vision_area p br {
      display: none; } }
  .vision_area p span {
    vertical-align: 5px; }

/*---------------------------------------------
	JOBS
  ---------------------------------------------*/
.vision_jobs {
  width: 100%;
  height: auto;
  background: url("/assets/img/top/vision_bg.png") center center no-repeat;
  background-size: 100%;
  padding-bottom: 100px;
  position: relative;
  overflow: hidden; }
  @media all and (max-width: 480px) {
    .vision_jobs {
      padding-bottom: 0;
      background-position: center 300px; } }
  .vision_jobs:after {
    content: '';
    width: 100%;
    height: 450px;
    background-color: #0d4786;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1; }
    @media all and (max-width: 480px) {
      .vision_jobs:after {
        height: 80%; } }

.jobs_area {
  position: relative; }
  @media all and (max-width: 480px) {
    .jobs_area {
      padding-bottom: 50px; } }
  .jobs_area:before {
    content: '';
    width: 578px;
    height: 578px;
    background: url("/assets/img/top/jobs_element01.png") center no-repeat;
    background-size: contain;
    position: absolute;
    top: -270px;
    right: 0;
    left: 0;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.7);
    transition: 2s 1s; }
    @media all and (max-width: 480px) {
      .jobs_area:before {
        width: 200px;
        height: 200px;
        top: -80px; } }
  .jobs_area h2 {
    text-align: center;
    letter-spacing: 0.1em;
    position: relative;
    color: #fff;
    z-index: 2; }
    .jobs_area h2:before {
      content: '';
      position: absolute;
      top: -50px;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 1px;
      height: 35px;
      background-color: #fff; }
      @media all and (max-width: 480px) {
        .jobs_area h2:before {
          height: 20px;
          top: -30px; } }
    .jobs_area h2:after {
      content: 'JOBS';
      position: absolute;
      top: -85px;
      right: 0;
      left: 0;
      margin: 0 auto;
      color: #fff;
      font-size: 1.4rem;
      font-weight: bold; }
      @media all and (max-width: 480px) {
        .jobs_area h2:after {
          font-size: 1.2rem;
          top: -55px;
          text-align: center; } }
  .jobs_area .contents_inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    z-index: 2; }
  .jobs_area .jobs_box {
    width: 300px;
    position: relative;
    color: #fff;
    opacity: 0;
    transition: 1.5s;
    transform: translateY(20px); }
    @media all and (max-width: 480px) {
      .jobs_area .jobs_box {
        width: 100%; } }
    .jobs_area .jobs_box:before {
      content: '';
      width: 115px;
      height: 82px;
      position: absolute;
      top: -50px;
      left: 0;
      background: url("/assets/img/top/job1.png") no-repeat;
      background-size: contain; }
  .jobs_area .jobs_box.isAnimate {
    opacity: 1;
    transform: translateY(0); }
  .jobs_area .jobs_box:nth-of-type(2) {
    margin-top: 70px; }
    @media all and (max-width: 480px) {
      .jobs_area .jobs_box:nth-of-type(2) {
        margin-top: 0; } }
    .jobs_area .jobs_box:nth-of-type(2):before {
      background: url("/assets/img/top/job2.png") no-repeat;
      background-size: contain; }
  .jobs_area .jobs_box:nth-of-type(3):before {
    background: url("/assets/img/top/job3.png") no-repeat;
    background-size: contain; }
  .jobs_area .more_btn {
    width: 180px;
    height: 48px;
    border: 2px solid #fff; }
    .jobs_area .more_btn a {
      display: block;
      width: 100%;
      height: 100%;
      color: #fff;
      letter-spacing: 0.2em;
      padding: 10px 0 0 20px;
      background-color: rgba(255, 255, 255, 0.05);
      position: relative;
      transition: 0.3s; }
      .jobs_area .more_btn a:before {
        content: '';
        position: absolute;
        top: 21px;
        right: 20px;
        width: 20px;
        height: 1px;
        background-color: #fff;
        transition: 0.3s; }
      .jobs_area .more_btn a:after {
        content: '';
        position: absolute;
        top: 18px;
        right: 21px;
        width: 7px;
        height: 7px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg);
        transition: 0.3s; }
      .jobs_area .more_btn a:hover {
        background-color: #fff;
        color: #0F559D; }
        .jobs_area .more_btn a:hover:before {
          right: 15px;
          background-color: #0F559D; }
        .jobs_area .more_btn a:hover:after {
          right: 16px;
          border-right: 1px solid #0F559D;
          border-bottom: 1px solid #0F559D; }
  .jobs_area .bg_element1 {
    width: 1459px;
    height: 945px;
    background: url("/assets/img/top/jobs_element02.png") no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -350px;
    right: 0;
    left: 0;
    margin: 0 auto; }
    @media all and (max-width: 480px) {
      .jobs_area .bg_element1 {
        width: 120%;
        height: 90%;
        background-repeat: repeat-y;
        bottom: 0; } }
  .jobs_area .bg_element2 {
    width: 1213px;
    height: 757px;
    background: url("/assets/img/top/jobs_element03.png") no-repeat;
    background-size: contain;
    position: absolute;
    bottom: -50px;
    right: 0;
    left: 0;
    margin: 0 auto; }
    @media all and (max-width: 480px) {
      .jobs_area .bg_element2 {
        width: 120%;
        height: 90%;
        background-repeat: repeat-y;
        bottom: 0; } }

.jobs_area.isAnimate:before {
  opacity: 1;
  transform: scale(1);
  animation: 30s 3s linear infinite rotation; }

/*---------------------------------------------
	採用情報
  ---------------------------------------------*/
.recruit_area {
  transition: 1s;
  opacity: 0;
  width: 100%;
  height: 450px;
  background: url("/assets/img/top/recruit_bg.jpg") top center no-repeat;
  background-size: cover;
  text-align: center;
  padding-top: 180px;
  color: #fff; }
  @media all and (max-width: 480px) {
    .recruit_area {
      height: 400px;
      background: url("/assets/img/top/recruit_bg_sp.jpg") bottom center no-repeat;
      background-size: cover;
      padding-top: 30vw; } }
  .recruit_area h2 {
    text-align: center;
    letter-spacing: 0.1em;
    position: relative;
    color: #fff;
    z-index: 2; }
    .recruit_area h2:before {
      content: '';
      position: absolute;
      top: -50px;
      right: 0;
      left: 0;
      margin: 0 auto;
      width: 1px;
      height: 35px;
      background-color: #fff; }
      @media all and (max-width: 480px) {
        .recruit_area h2:before {
          height: 20px;
          top: -30px; } }
    .recruit_area h2:after {
      content: 'RECRUIT';
      position: absolute;
      top: -85px;
      right: 0;
      left: 0;
      margin: 0 auto;
      color: #fff;
      font-size: 1.4rem;
      font-weight: bold; }
      @media all and (max-width: 480px) {
        .recruit_area h2:after {
          font-size: 1.2rem;
          top: -55px;
          text-align: center; } }
  .recruit_area .more_btn {
    width: 180px;
    height: 48px;
    border: 2px solid #fff;
    text-align: left;
    margin: 0 auto; }
    .recruit_area .more_btn a {
      display: block;
      width: 100%;
      height: 100%;
      color: #fff;
      letter-spacing: 0.2em;
      padding: 10px 0 0 20px;
      background-color: rgba(0, 0, 0, 0.1);
      position: relative;
      transition: 0.3s; }
      .recruit_area .more_btn a:before {
        content: '';
        position: absolute;
        top: 21px;
        right: 20px;
        width: 20px;
        height: 1px;
        background-color: #fff;
        transition: 0.3s; }
      .recruit_area .more_btn a:after {
        content: '';
        position: absolute;
        top: 18px;
        right: 21px;
        width: 7px;
        height: 7px;
        border-right: 1px solid #fff;
        border-bottom: 1px solid #fff;
        transform: rotate(-45deg);
        transition: 0.3s; }
      .recruit_area .more_btn a:hover {
        background-color: #fff;
        color: #0F559D; }
        .recruit_area .more_btn a:hover:before {
          right: 15px;
          background-color: #0F559D; }
        .recruit_area .more_btn a:hover:after {
          right: 16px;
          border-right: 1px solid #0F559D;
          border-bottom: 1px solid #0F559D; }

.recruit_area.isAnimate {
  opacity: 1; }

.recruit_contact_btn a {
  display: block;
  background-color: #0F559D;
  width: 430px;
  padding-top: 20px;
  height: 65px;
  margin: 0 auto;
  color: #fff;
  margin: 0 auto;
  text-align: center;
  letter-spacing: 0.1em;
  position: relative;
  transition: 0.3s; }
  @media all and (max-width: 480px) {
    .recruit_contact_btn a {
      width: 100%; } }
  .recruit_contact_btn a:before {
    content: '';
    position: absolute;
    top: 32px;
    right: 20px;
    width: 20px;
    height: 1px;
    background-color: #fff;
    transition: 0.3s; }
  .recruit_contact_btn a:after {
    content: '';
    position: absolute;
    top: 29px;
    right: 21px;
    width: 7px;
    height: 7px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    transform: rotate(-45deg);
    transition: 0.3s; }
  .recruit_contact_btn a:hover {
    background-color: #001E46; }
    .recruit_contact_btn a:hover:before {
      right: 15px; }
    .recruit_contact_btn a:hover:after {
      right: 16px; }
  .recruit_contact_btn a p {
    position: relative; }
    .recruit_contact_btn a p:before {
      content: '';
      width: 30px;
      height: 20px;
      background: url("/assets/img/top/mail_icon.jpg") no-repeat;
      background-size: contain;
      position: absolute;
      top: 3px;
      left: 30px; }
      @media all and (max-width: 480px) {
        .recruit_contact_btn a p:before {
          width: 25px;
          height: 15px; } }

/*---------------------------------------------
	その他　下部リンク
  ---------------------------------------------*/
.other_area {
  padding: 150px 0 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  @media all and (max-width: 480px) {
    .other_area {
      padding: 50px 0;
      display: block; } }
  .other_area .link_btn a {
    display: block;
    width: 480px;
    height: 148px;
    border: 2px solid #0F559D;
    display: flex;
    align-items: center;
    padding-left: 5px;
    letter-spacing: 0.1em;
    position: relative;
    transition: 0.3s; }
    @media all and (max-width: 480px) {
      .other_area .link_btn a {
        width: 100%;
        height: 100px; } }
    .other_area .link_btn a:before {
      content: '';
      position: absolute;
      top: 73px;
      right: 35px;
      width: 45px;
      height: 2px;
      background-color: #0F559D;
      transition: 0.3s; }
      @media all and (max-width: 480px) {
        .other_area .link_btn a:before {
          width: 30px;
          top: 48px;
          right: 20px; } }
    .other_area .link_btn a:after {
      content: '';
      position: absolute;
      top: 68px;
      right: 35px;
      width: 11px;
      height: 11px;
      border-right: 2px solid #0F559D;
      border-bottom: 2px solid #0F559D;
      transform: rotate(-45deg);
      transition: 0.3s; }
      @media all and (max-width: 480px) {
        .other_area .link_btn a:after {
          width: 9px;
          height: 9px;
          right: 20px;
          top: 43px; } }
    .other_area .link_btn a .link_image {
      width: 135px;
      height: 135px;
      overflow: hidden;
      margin-right: 30px; }
      @media all and (max-width: 480px) {
        .other_area .link_btn a .link_image {
          margin-right: 20px;
          width: 85px;
          height: 85px; } }
      .other_area .link_btn a .link_image img {
        width: 100%;
        height: 100%;
        transition: 0.3s; }
    .other_area .link_btn a .txt {
      width: 280px; }
      @media all and (max-width: 480px) {
        .other_area .link_btn a .txt {
          width: 160px; } }
    .other_area .link_btn a .blue {
      color: #0F559D; }
    .other_area .link_btn a:hover {
      background-color: #fff; }
      .other_area .link_btn a:hover:before {
        right: 30px; }
        @media all and (max-width: 480px) {
          .other_area .link_btn a:hover:before {
            right: 20px; } }
      .other_area .link_btn a:hover:after {
        right: 30px; }
        @media all and (max-width: 480px) {
          .other_area .link_btn a:hover:after {
            right: 20px; } }
      .other_area .link_btn a:hover .link_image img {
        transform: scale(1.05); }