/* ##############################################################################

    KEYFRAMES

############################################################################## */

  @keyframes cursor_ani {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }
  @keyframes btn_ani {
    0% { width: 0; }
    50% { width: 100%; }
    75% { transform: translateX(0); }
    100% { transform: translateX(50%); }
  }
  @keyframes scroll_ani {
    0% { height: 0; }
    50% { height: 100%; }
    75% { transform: translateY(0); }
    100% { transform: translateY(100%); }
  }
  @keyframes slide_fadeZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
  }
  @keyframes scroll_text {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes slideIn {
    0% { transform: translateY(-100%); }  
    100% { transform: translateY(0);  }  
  }


/* ##############################################################################

    COMMON

############################################################################## */
  
  html {
    height: 100%;
    overflow-y: scroll;
  }
  body {
    height: 100%;
  }
  .page-contact,
  .page-entry {
    padding-top: 0;
  }

/* layout
**************************************** */

  /* --- inner --- */
  .inner {
    width: 90%;
    max-width: 1200px;
    margin-inline: auto;
  }
  .inner-xs { max-width: 800px; }
  .inner-sm { max-width: 960px; }
  .inner-md { max-width: 1400px; }
  .inner-lg { max-width: 1680px; }
  .inner-xl { max-width: calc(100% - 112px); }

  /* --- section_pdg --- */
  .section_pdg {
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .section_pdg-sm {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section_pdg-lg {
    padding-top: 160px;
    padding-bottom: 160px;
  }

  @media screen and  (max-width: 1300px) {
    .inner .inner { width: 100%; }
  }
  @media screen and  (max-width: 767px) {
    .section_pdg {
      padding-top: 50px;
      padding-bottom: 50px;
    }
    .section_pdg-sm {
      padding-top: 40px;
      padding-bottom: 40px;
    }
    .section_pdg-lg {
      padding-bottom: 80px;
    }
    .page-contact .section_pdg,
    .page-entry .section_pdg {
      padding-top: 72px;
    }
  }

/* flex
**************************************** */
  .flex-col1 {
    display: block;
  }
  .flex-col2,
  .flex-col3,
  .flex-col4 {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .flex-col2 > * {
    width: 48.5%;
    margin-right: 3%;
    margin-bottom: 3%;
  }
  .flex-col3 > * {
    width: 31.33%;
    margin-right: 3%;
    margin-bottom: 3%;
  }
  .flex-col4 > * {
    width: 23.5%;
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .flex-col2.flex-reverse > *:nth-child(2n+1),
  .flex-col2:not(.flex-reverse) > *:nth-child(2n),
  .flex-col3 > *:nth-child(3n),
  .flex-col4 > *:nth-child(4n) {
    margin-right: 0 !important;
  }

  /* --- flex-col-sm --- */
  .flex-col-sm > * {
    margin-right: 4px;
    margin-bottom: 4px;
  }
  .flex-col-sm.flex-c-wrap > * {
    margin-bottom: 4px;
  }
  .flex-col-sm.flex-col2 > * {
    width: calc(50% - 2px);
  }
  .flex-col-sm.flex-col3 > * {
    width: calc(33.33% - 2.666px);
  }
  .flex-col-sm.flex-col4 > * {
    width: calc(25% - 3px);
  }

  @media screen and (max-width: 767px) {
    .flex-sp-block.flex-col2 > *,
    .flex-sp-block.flex-col3 > *,
    .flex-sp-block.flex-col4 > * {
      width: 100%;
      margin-right: 0;
      margin-bottom: 6%;
    }
    .flex-sp-block.flex-col2 > *:last-child {
      margin-bottom: 0;
    }

    /* --- ざっくりflexレイアウト - sp --- */
    .flex-sp-col2 > *,
    .flex-sp-col2.flex-col3 > *:nth-child(3n) {
      width: 48.5%;
      margin-right: 3%;
      margin-bottom: 3%;
    }
    .flex-col-sm.flex-sp-col2 > * {
      width: calc(50% - 2px);
      margin-right: 4px;
    }
    .flex-sp-col2 > *:nth-child(even) {
      margin-right: 0;
    }
    .flex-sp-col3 > *,
    .flex-sp-col3.flex-col4 > *:nth-child(4n) {
      width: 31.33%;
      margin-right: 3%;
      margin-bottom: 3%;
    }
    .flex-sp-col3 > *:nth-child(3n) {
      margin-right: 0;
    }

    /* --- flex-col-sm --- */
    .flex-col-sm.flex-col2 > *,
    .flex-col-sm.flex-col3 > *,
    .flex-col-sm.flex-col4 > * {
      margin-bottom: 2px;
    }
  }

/* bg
**************************************** */
  .bg-pt {
    position: relative;
    z-index: 0;
  }
  .bg-pt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: #eee url(../images/common/bg-pt.jpg);
    background-position: top -400px center;
    background-size: 100% auto;
  }
  .bg-white {
    background-color: #fff;
  }
  .bg-gray-pt {
    background-image: url(../images/common/bg-gray-pt.png);
  }

/* ttl
**************************************** */

  /* --- page_ttl --- */
  .page_ttl {
    text-align: right;
    background-color: #eee;
    background-image: url(../images/common/pagettl-other.jpg);
    background-position: center top;
    background-size: cover;
  }
  .page-company .page_ttl {
    background-image: url(../images/page_ttl/pagettl-company.jpg);
  }
  .page-services .page_ttl {
    background-image: url(../images/page_ttl/pagettl-services.jpg);
  }
  .page-digital .page_ttl {
    background-image: url(../images/page_ttl/pagettl-digital.jpg);
  }
  .archive-news .page_ttl,
  .single-news .page_ttl {
    background-image: url(../images/page_ttl/pagettl-news.jpg);
  }
  .page-policy .page_ttl {
    background-image: url(../images/page_ttl/pagettl-news.jpg);
  }
  .page-recruit-about .page_ttl {
    background-image: url(../images/page_ttl/pagettl-recruit-about.jpg);
  }
  .page-recruit-job .page_ttl {
    background-image: url(../images/page_ttl/pagettl-recruit-job.jpg);
  }
  .archive-interview .page_ttl,
  .single-interview .page_ttl {
    background-image: url(../images/page_ttl/pagettl-interview.jpg);
  }
  .archive-requirements .page_ttl,
  .single-requirements .page_ttl {
    background-image: url(../images/page_ttl/pagettl-requirements.jpg);
  }
  .page_ttl > .inner {
    padding-top: 360px;
    padding-bottom: 30px;
  }
  .page_ttl-en,
  .page_ttl-jp,
  .page_ttl-sub,
  .page_ttl-main {
    display: block;
  }
  .page_ttl-en {
    margin-right: -.22em;
    color: #fff;
    font-size: 586%;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .page_ttl-recruit > .inner {
    padding-bottom: 32px;
  }
  .page_ttl-recruit .page_ttl-main {
    margin-right: -.3em;
    color: #fff;
    line-height: 1.5;
    font-size: 486%;
    letter-spacing: .3em;
  }
  .page-entry-thanks .page_ttl-main {
    font-size: 333%;
  }
  .page_ttl-jp,
  .page_ttl-recruit .page_ttl-sub {
    margin-right: -.34em;
    color: #e0ffff;
    font-size: 160%;
    letter-spacing: .34em;
  }

  /* --- section_ttl --- */
  .section_ttl {
    font-weight: normal;
  }
  .section_ttl::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 17px;
    background-color: #add8e6;
  }
  .section_ttl.txt-ctr::after {
    margin-left: auto;
    margin-right: auto;
  }
  .section_ttl-main {
    display: block;
    margin-bottom: 16px;
    color: #0f66e7;
    font-size: 320%;
    line-height: 1.3;
    letter-spacing: .26em;
  }
  .section_ttl-sub {
    display: block;
    color: #b7b7b7;
    font-size: 80%;
    letter-spacing: .22em;
  }
  .section_ttl-sm .section_ttl-main {
    font-size: 213%;
  }
  .section_catch {
    text-align: center;
    font-size: 120%;
    font-weight: 700;
  }

  @media screen and (max-width: 1140px) {
    .section_ttl-main {
      font-size: 320%;
    }
  }
  @media screen and (max-width: 767px) {

    /* --- page_ttl --- */
    .page_ttl {
      background-image: url(../images/common/pagettl-other_sp.jpg);
    }
    .page-company .page_ttl {
      background-image: url(../images/page_ttl/pagettl-company_sp.jpg);
    }
    .page-services .page_ttl {
      background-image: url(../images/page_ttl/pagettl-services_sp.jpg);
    }
    .page-digital .page_ttl {
      background-image: url(../images/page_ttl/pagettl-digital_sp.jpg);
    }
    .archive-news .page_ttl,
    .single-news .page_ttl {
      background-image: url(../images/page_ttl/pagettl-news_sp.jpg);
    }
    .page-policy .page_ttl {
      background-image: url(../images/page_ttl/pagettl-news_sp.jpg);
    }
    .page-recruit-about .page_ttl {
      background-image: url(../images/page_ttl/pagettl-recruit-about_sp.jpg);
    }
    .page-recruit-job .page_ttl {
      background-image: url(../images/page_ttl/pagettl-recruit-job_sp.jpg);
    }
    .archive-interview .page_ttl,
    .single-interview .page_ttl {
      background-image: url(../images/page_ttl/pagettl-interview_sp.jpg);
    }
    .archive-requirements .page_ttl,
    .single-requirements .page_ttl {
      background-image: url(../images/page_ttl/pagettl-requirements_sp.jpg);
    }
    .page_ttl-en {
      margin-right: -.24em;
      font-size: 228%;
      letter-spacing: .24em;
    }
    .page_ttl-jp,
    .page_ttl-recruit .page_ttl-sub {
      margin-right: -.32em;
      font-size: 114%;
      letter-spacing: .32em;
    }
    .page_ttl-recruit .page_ttl-main {
      font-size: 248%;
    }
    .page_ttl > .inner {
      padding-top: 260px;
      padding-bottom: 8px;
    }
  
    /* --- section_ttl --- */
    .section_ttl-main {
      margin-bottom: 8px;
      font-size: 200%;
    }
    .section_ttl-sub {
      font-size: 85.7%;
    }
    .section_ttl-sm .section_ttl-main {
      font-size: 180%;
    }
  }

/* breadcrumbs
**************************************** */
  .breadcrumbs {
    padding: 16px 0;
    color: #fff;
    font-size: 87%;
    text-align: left;
  }
  .breadcrumbs a {
    color: #fff;
    text-decoration: underline;
  }
  @media screen and (max-width: 767px) {
    .breadcrumbs {
      padding: 8px 0;
      font-size: 71%;
    }
  }

/* txt
**************************************** */
  .txt-xl { font-size: 130%; }
  .txt-ll { font-size: 120%; }
  .txt-lg { font-size: 107%; }
  .txt-sm {
    font-size: 86%;
    line-height: 1.84;
  }
  .txt-attention {
    font-size: 86%;
    color: #666;
    line-height: 1.846;
  }
  .txt-attention-kome {
    position: relative;
    display: inline-block;
    padding-left: 1.4em;
    line-height: 1.7;
  }
  .txt-attention-kome::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
  }
  .txtarea p:not(.txt-rgt) {
    text-align: justify;
  }
  .txtarea p:not(:last-child) {
    margin-bottom: 1em;
  }
  .font-jp-m {
    font-family: A1明朝;
  }
  .font-en,
  .page_ttl-en,
  .wp-pagenavi,
  .btn {
    font-family: din-2014, sans-serif;
    font-weight: 700;
    font-style: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    text-transform: uppercase;
  }
  .page_ttl-recruit .page_ttl-main {
    text-transform: none;
  }
  strong,
  .font-jp-gb {
    font-family: こぶりなゴシック W6 JIS2004;
  }
  .txt-en-sm {
    display: block;
    font-size: 80%;
    line-height: 1;
    letter-spacing: .18em;
  }
  /* 縦書き */
  .txt-vertical {
    -ms-writing-mode: tb-rl;
    writing-mode: tb-rl;
  }
  /* カギ括弧 */
  .txt-brackets,
  .txt-vertical-brackets {
    font-size: 80%;
  }
  .txt-brackets-open {
    margin-right: -.3em;
    vertical-align: top;
  }
  .txt-brackets-close {
    margin-left: -.3em;
    vertical-align: baseline;
  }
  /* 縦書きカギ括弧 */
  .txt-vertical-brackets {
    transform: rotate(90deg);
    margin-bottom: -.2em;
  }
  .txt-vertical-brackets-open:first-child {
    margin-top: -.3em;
  }
  .txt-vertical-brackets-close {
    margin-top: .1em;
    margin-right: .5em;
  }
  .txt-bold { font-weight: bold; }
  .txt-white { color: #fff; }
  .txt-blue { color: #0f66e7; }
  .txt-black { color: #444; }
  .txt-sky { color: #afeeee; }
  .txt-orange { color : #ff6600; }
  .txt-link {
    display: inline-block;
    border-bottom: 1px dashed #989898;
  }

/* table & list
**************************************** */
  table { width: 100%; }
  
  /* --- table_default --- */
  .table_default th, 
  .table_default td {
    text-align: left;
    padding-top: 24px;
    padding-bottom: 16px;
  }
  .table_default th {
    width: 165px;
    border-bottom: 2px solid #add8e6;
  }
  .table_default td {
    border-bottom: 1px solid #add8e6;
    border-left: 4px solid #fff;
  }

  /* --- table_line --- */
  .table_line th,
  .table_line td {
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .table_line th {
    background-color: #add8e6;
    border: 1px solid #add8e6;
    color: #444;
  }
  .table_line td {
    border: 1px solid #D2D2D2;
    font-size: 93%;
  }

  /* --- list ---- */
  .list { list-style-type: none; }
  .list li:not(:last-child) { margin-bottom: 4px; }
  .list li {
    position: relative;
    padding-left: 1.6em;
  }
  .list-disc li::before,
  .list-square li::before,
  .list-circle li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .7em;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: #0f66e7;
  }
  /* 数字付きリスト */
  .list-num {
    padding-left: 1.6em;
    list-style-type: decimal;
  }
  .list-num li { padding-left: 0; }
  .list-num li::before { display: none; }
  /* 小文字英語付きリスト */
  .list-lower-alpha {
    padding-left: 1.6em;
    list-style-type: lower-alpha;
  }
  .list-lower-alpha li { padding-left: 0; }
  .list-lower-alpha li::before { display: none; }
  /* 白丸付きリスト */
  .list-circle li::before {
    border: 1px solid #0f66e7;
    background-color: transparent;
  }
  /* 四角付きリスト */
  .list-square li::before {
    border-radius: 0;
    background-color: #0f66e7;
  }
  /* 入れ子のスタイル */
  .list li ul li::before {
    width: 12px;
    height: 12px;
    top: .8em;
  }

  /* --- dlリスト --- */
  .list-dl {
    position: relative;
    border-top: 1px solid #BFBFBF;
    line-height: 1.857;
  }
  .list-dl dt {
    position: absolute;
    padding-top: 16px;
    color: #0f66e7;
    font-weight: 700;
  }
  .list-dl dd {
    padding-left: 180px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 93%;
    border-bottom: 1px solid #BFBFBF;
  }
  .list-dl-sm {
    border-top: 1px solid #dbdbdb;
  }
  .list-dl-sm dt {
    padding-top: 8px;
  }
  .list-dl-sm dd {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dbdbdb;
  }
  .list-detail:not(:last-child) {
    margin-bottom: 1em;
  }

  @media screen and (max-width: 767px) {
    /* --- dlリスト --- */
    .list-dl dt {
      position: relative;
      padding-top: 8px;
    }
    .list-dl dd {
      padding-top: 4px;
      padding-bottom: 8px;
      padding-left: 0;
    }
    .list-dl-no dt {
      position: absolute;
    }
    .list-dl-no dd {
      padding-top: 8px;
      padding-bottom: 8px;
      padding-left: 72px;
    }
  }

/* btn
**************************************** */
  .btn a,
  .btn-requirements em {
    position: relative;
    display: inline-block;
    min-width: 240px;
    min-height: 50px;
    padding: 8px 97px 8px 57px;
    color: #fff;
    font-size: 106%;
    font-weight: bold;
    text-align: left;
    letter-spacing: .22em;
    overflow: hidden;
    border-radius: 50px;
    background-color: #0f66e7;
  }
  .btn i {
    position: absolute;
    top: calc(50% - 1px);
    right: 33px;
    display: block;
    width: 41px;
    height: 1px;
    overflow: hidden;
    transition: all .2s ease-out;
  }
  .btn i::before {
    content: '';
    display: block;
    width: 200%;
    height: 1px;
    background-color: rgba(255,255,255,.7);
  }
  .btn a:hover i::before,
  .btn-requirements em:hover i::before {
    animation: btn_ani 2s cubic-bezier(.38, .46, .09, 1.01) infinite;
    animation-delay: -.77s;
  }

  /* --- btn-lg --- */
  .btn-lg a,
  .btn-lg em {
    min-width: 440px;
    min-height: 75px;
    padding: 19px 90px 19px 50px;
    font-size: 120%;
  }
  .btn-lg i {
    right: 38px;
    width: 46px;
  }

  /* --- btn-sm --- */
  .btn-sm a {
    min-width: 180px;
    min-height: 37px;
    font-size: 93%;
    padding: 8px 32px;
  }
  .btn-sm i {
    right: 23px;
    width: 25px;
  }

  /* --- btn-wh --- */
  .btn-wh a {
    color: #0f66e7;
    background-color: #fff !important;
    box-shadow: 0 0 32px 0 rgba(173, 216, 230, .8);
  }
  .btn-wh a:hover {
    box-shadow: none;
  }
  .btn-wh i::before {
    background-color: #0f66e7;
  }

  .flex .btn + .btn { margin-left: 16px; }

  /* hover */
  @media screen and (min-width: 768px) {
    .btn a:hover,
    .btn-requirements em:hover {
      background-color: #0056d7;
    }
  }
  @media screen and (max-width: 767px) {
    .btn a,
    .btn-requirements em {
      min-width: 200px;
      min-height: auto;
      padding: 8px 57px 8px 27px;
      font-size: 100%;
    }
    .btn i {
      right: 20px;
      width: 20px;
    }
    .flex .btn,
    .flex .btn + .btn {
      margin-top: 4px;
      margin-left: auto;
      margin-right: auto;
    }

    /* --- btn-lg --- */
    .btn-lg a,
    .btn-lg em {
      min-width: 270px;
      font-size: 100%;
      padding: 16px 80px 16px 32px;
      min-height: auto;
    }
    .btn-lg i {
      right: 28px;
      width: 36px;
    }
  }

/* cta
**************************************** */
  .cta {
    padding: 40px 0;
  }
  .cta--txt {
    font-size: 120%;
    margin-bottom: 24px;
  }
  .cta--btn {
    font-size: 160%;
  }
  .cta--btn.btn a {
    min-width: 400px;
  }
  .cta--tel .tel_txt {
    font-size: 160%;
  }
  .cta--form {
    background-color: #fff;
  }
   
  @media screen and  (max-width: 767px) {
    .cta--btn.btn a {
      min-width: 0;
    }
  }

/* cta-page
**************************************** */
  .cta-page .box_list--list01::before {
    background-image: url(../images/common/cta--img01.jpg);
  }
  .cta-page .box_list--list02::before {
    background-image: url(../images/common/cta--img02.jpg);
  }
  .cta-page .box_list--list03::before {
    background-image: url(../images/common/cta--img03.jpg);
  }

/* box-wh
**************************************** */
  .box-wh {
    padding: 104px;
    background-color: #fff;
    box-shadow: 0 0 32px 0 rgba(0, 0, 0, .05);
  }
  .box-wh-sm {
    padding: 80px 104px;
  }
  @media screen and (max-width: 1600px) {
    .box-wh {
      padding: 5%;
    }
  }
  @media screen and (max-width: 767px) {
    .box-wh {
      padding: 32px 24px;
    }
  }

/* anker
**************************************** */
  .anker {
    margin-top: -200px;
    padding-top: 200px;
    pointer-events: none;
  }
  @media screen and (max-width: 767px) {
    .anker {
      margin-top: -100px;
      padding-top: 100px;
    }
  }

/* マウスカーソル
**************************************** */
  #cursor {
    position: fixed;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #add8e6;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    pointer-events: none;
    z-index: 9999;
  }
  #stalker,
  #stalker svg {
    transition:
      left .05s linear,
      top .05s linear,
      width .7s cubic-bezier(.43, -.01, .15, .99),
      height .7s cubic-bezier(.43, -.01, .15, .99),
      margin .7s cubic-bezier(.43, -.01, .15, .99);
  }
  #stalker {
    margin-top: -20px;
    margin-left: -20px;
    position: fixed;
    border-radius: 100%;
    pointer-events: none;
    z-index: 9999;
    animation: cursor_ani 10s linear infinite;
    width: 40px;
    height: 40px;
  }
  #stalker svg {
    width: 100%;
    height: 100%;
  } 
  #stalker svg circle {
    fill: none;
    stroke: #add8e6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 0, 4;
    transition: all .5s ease-in-out;
  }
  #stalker.active {
    width: 76px;
    height: 76px;
    margin-top: -38px;
    margin-left: -38px;
    animation: cursor_ani 5s linear infinite;
  }
  #stalker.active svg circle {
    stroke-dasharray: 0, 8;
  }
  @media screen and (max-width: 767px) {
    #cursor,
    #stalker {
      display: none;
    }
  }
  .ts {
    transition: all .4s ease-in-out;
  }

/* column_box
*************************************************** */
  .column_box {
    position: relative;
  }
  .column_box .imgarea {
    position: absolute;
    top: 70px;
    right: 0;
    z-index: 0;
    width: 65%;
    height: 125%;
    max-width: 1170px;
    max-height: 800px;
    background-position: center;
    background-size: cover;
  }
  .column_box.img-rgt .imgarea {
    top: auto;
    bottom: 70px;
  }
  .column_box .column_box--lft {
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .column_box .txtarea {
    position: relative;
    width: 40%;
    max-width: 760px;
    padding: 100px;
    background-color: #fff;
  }
  .column_box .txtarea-en {
    position: absolute;
    top: 0;
    right: -40px;
  }
  .line-3 {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 54px;
  }
  .line-3 i {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #f8f8f8;
  }
  .line-3 i + i {
    margin-top: 7px;
  }
  .img-rgt .imgarea {
    left: 0;
    right: auto;
  }
  .flex-reverse .txtarea-en {
    top: auto;
    bottom: 0;
    left: -40px;
    right: auto;
  }
  .flex-reverse .line-3 {
    margin-left: 0;
    margin-right: 54px;
  }
  @media screen and (max-width: 1600px) {
    .column_box .txtarea {
      max-width: 560px;
      padding: 5%;
    }
  }
  @media screen and (max-width: 767px) {
    .column_box .txtarea {
      width: 100%;
      max-width: 560px;
      padding: 32px 24px;
    }
    .column_box .imgarea {
      position: absolute;
      top: auto;
      right: -10px;
      bottom: -30%;
      width: 90%;
      height: 40%;
    }
    .column_box.img-rgt .imgarea {
      top: -30%;
      bottom: auto;
    }
    .column_box .txtarea-en {
      right: -24px;
    }
    .flex-reverse .txtarea-en {
      left: -24px;
      right: auto;
    }
    .line-3 {
      margin-left: 24px;
    }
    .flex-reverse .line-3 {
      margin-right: 24px;
    }
    .gnav .line-3 {
      margin-left: 0;
    }
  }

/* column_box-full
*************************************************** */
  .column_box-full--child {
    width: 50%;
  }
  .column_box-full--child.txtarea {
    padding: 110px 169px;
  }
  .column_box-full--child.imgarea {
    background-position: center;
    background-size: cover;
  }
  @media screen and (max-width: 1600px) {
    .column_box-full--child.txtarea {
      padding: 5%;
    }
  }
  @media screen and (max-width: 767px) {
    .column_box-full--child {
      width: 100%;
    }
    .column_box-full--child.txtarea {
      padding: 40px;
    }
    .column_box-full--child.imgarea {
      height: 83vw;
    }
  }

/* scroll-text
*************************************************** */
  .scroll-text {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 141px;
    margin-top: 30px;
    margin-bottom: 30px;
    background-image: url(../images/common/scroll-text.svg);
    background-size: auto 100%;
  }
  .scroll-text.outline {
    background-image: url(../images/common/scroll-text-outline.svg);
  }
  .scroll-text.outline-gray {
    background-image: url(../images/common/scroll-text-outline-gray.svg);
  }
  @media screen and (max-width: 767px) {
    .scroll-text {
      height: 80px;
    }
    .gnav .scroll-text {
      width: 110%;
      margin-top: 40px;
      margin-bottom: 40px;
      margin-left: -5%;
      animation: scroll_text 10s linear infinite;
    }
  }

/* box_list
*************************************************** */
  .box_list li {
    position: relative;
    z-index: 0;
    overflow: hidden;
    background-position: center;
    background-size: cover;
  }
  .box_list li::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: all 1s cubic-bezier(.43, -.01, .15, .99);
  }
  .box_list a {
    position: relative;
    z-index: 0;
    height: 240px;
    padding-left: 95px;
    padding-right: 95px;
  }
  .box_list a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 19, 24, .7);
  }
  .box_list i {
    display: block;
    width: 41px;
    height: 1px;
    overflow: hidden;
    transition: all .2s ease-out;
  }
  .box_list i::before {
    content: '';
    display: block;
    width: 200%;
    height: 1px;
    background-color: rgba(175, 238, 238, .7);
  }
  .box_list li:hover::before {
    transform: scale(1.05);
  }
  .box_list a:hover i::before {
    animation: btn_ani 2s cubic-bezier(.38, .46, .09, 1.01) infinite;
    animation-delay: -1s;
  }

  @media screen and (max-width: 1300px) {
    .box_list a {
      padding-left: 64px;
      padding-right: 64px;
    }
  }
  @media screen and (max-width: 1140px) {
    .box_list a {
      height: 200px;
    }
  }
  @media screen and (max-width: 767px) {
    .box_list a {
      height: 140px;
      padding-left: 32px;
      padding-right: 32px;
    }
  }

/* section-bg
*************************************************** */
  .section-bg-img {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    background-color: #aaa;
    background-position: center;
    background-size: cover;
  }
  .section-bg01 .section-bg-img {
    background-image: url(../images/section-bg01.jpg);
    background-position: left 20% center;
  }
  .section-bg02 .section-bg-img {
    height: 700px;
    background-image: url(../images/company--img.jpg);
  }

  /* --- section-bg-lead --- */
  .section-bg-lead {
    padding-bottom: 40px;
    padding-right: 40px;
  }
  .section-bg-lead-txt {
    padding-top: 80px;
    font-size: 200%;
    line-height: 1.2;
    letter-spacing: .14em;
  }
  .section-bg-lead-txt > p:not(:last-child) {
    margin-left: .7em;
  }
  .section-bg-lead-en {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: 32px;
    opacity: .5;
  }
  .section-bg-lead-en::before {
    content: '';
    display: block;
    width: 1px;
    height: 70px;
    margin-bottom: 1.5em;
    background-color: rgba(255, 255, 255, .5);
  }

  /* --- section-bg--ttl --- */
  .section-bg--ttl {
    position: absolute;
    bottom: 40px;
    font-size: 480%;
    line-height: 1.45;
    letter-spacing: .34em;
  }

  @media screen and (max-width: 1240px) {
    /* --- section-bg--ttl --- */
    .section-bg--ttl {
      font-size: 400%;
    }
  }
  @media screen and (max-width: 1140px) {
    /* --- section-bg--ttl --- */
    .section-bg--ttl {
      font-size: 280%;
    }
  }
  @media screen and (max-width: 767px) {
    .section-bg01 .section-bg-img {
      background-image: url(../images/section-bg01_sp.jpg);
    }
    .section-bg02 .section-bg-img {
      background-image: url(../images/company--img_sp.jpg);
    }

    /* --- section-bg-lead --- */
    .section-bg-lead {
      padding-bottom: 80px;
      padding-right: 10px;
    }
    .section-bg-lead-en {
      margin-left: 16px;
    }
    .section-bg-lead-en::before {
      height: 46px;
    }
    .section-bg-lead-txt {
      padding-top: 60px;
      font-size: 160%;
    }
    .section-bg-lead-txt > p:not(:last-child) {
      margin-left: .5em;
    }

    /* --- section-bg--ttl --- */
    .section-bg--ttl {
      font-size: 186%;
    }
  }

/* slick common style
**************************************** */
  .slick--wrap {
    position: relative;
    overflow: hidden;
  }
  .slick-list {
    overflow: visible;
  }
  .slick-slide:not(.slick-active) {
    opacity: .3;
  }
  .slick-arrow {
    position: absolute;
    top: 0;
    z-index: 2;
    display: block;
    width: 100px;
    height: 100%;
  }
  .slick-arrow::before {
    content: '';
    position: absolute;
    top: calc(50% - 40px / 2);
    display: block;
    width: 40px;
    height: 40px;
    border-color: #0f66e7;
    border-width: 1px;
    transform: rotate(45deg);
    transition: all .4s ease-in-out;
  }
  .slick-prev {
    left: -100px;
  }
  .slick-next {
    right: -100px;
  }
  .slick-prev::before {
    right: 20px;
    border-left-style: solid;
    border-bottom-style: solid;
  }
  .slick-next::before {
    left: 20px;
    border-top-style: solid;
    border-right-style: solid;
  }
  /* hover */
  @media screen and (min-width: 1140px) {
    .slick-prev:hover::before {
      right: 28px;
    }
    .slick-next:hover::before {
      left: 28px;
    }
  }
  @media screen and (max-width: 1500px) {
    .slick-prev {
      left: -80px;
    }
    .slick-next {
      right: -80px;
    }
  }
  @media screen and (max-width: 1140px) {
    .slick-prev {
      left: -60px;
    }
    .slick-next {
      right: -60px;
    }
  }
  @media screen and (max-width: 767px) {
    .slick-arrow {
      width: 50px;
    }
    .slick-prev {
      left: -40px;
    }
    .slick-next {
      right: -40px;
    }
    .slick-prev::before {
      right: 0;
    }
    .slick-next::before {
      left: 0;
    }
    .slick-arrow::before {
      top: calc(50% - 20px / 2);
      width: 20px;
      height: 20px;
    }
  }

/* js-txt-vertical
*************************************************** */
  .js-txt-vertical {
    position: relative;
    z-index: 2;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .js-txt-vertical > p {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .js-txt-vertical > p:not(:last-child) {
    margin-left: .3em;
  }
  .js-txt-vertical span {
    display: block;
    text-align: center;
  }


/* ##############################################################################

    HEADER

############################################################################## */

/* header
**************************************** */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9990;
  }
  .page-contact:not(.page-thanks) .header,
  .page-entry:not(.page-thanks) .header {
    position: absolute;
    background-color: transparent;
    box-shadow: none;
  }
  .header .inner {
    position: relative;
    width: 96%;
    height: 100%;
  }
  .header.js-scroll {
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 0 32px rgba(173, 216, 230, .2);
  }

  /* --- header--logo --- */
  .header--logo a {
    display: block;
    height: 100%;
    padding-left: 308px;
  }
  .header--logo .logo {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    opacity: 0;
  }
  .header--logo,
  .header--logo .logo {
    padding-top: 16px;
  }
  .page-contact .header--logo,
  .page-contact .header--logo .logo {
    padding-top: 40px;
  }
  .page-entry .header--logo,
  .page-entry .header--logo .logo {
    padding-top: 32px;
  }
  .js-scroll .header--logo,
  .js-scroll .header--logo .logo {
    padding-top: 0;
  }
  .header--logo .logo-wh {
    opacity: 1;
  }
  .header--logo.active .logo-fixed,
  .page-contact:not(.page-thanks) .header--logo .logo-fixed,
  .page-entry:not(.page-thanks) .header--logo .logo-fixed,
  .js-scroll .header--logo .logo-fixed {
    opacity: 1;
  }
  .page-contact:not(.page-thanks) .header--logo .logo-wh,
  .page-entry:not(.page-thanks) .header--logo .logo-wh,
  .js-scroll .header--wh .logo-fixed {
    opacity: 0;
  }
  .header--logo.recruit--logo small {
    color: #AFEEEE;
    font-size: 113%;
    letter-spacing: .32em;
  }
  .header--logo.recruit--logo.active small,
  .page-entry:not(.page-thanks) .header--logo.recruit--logo small,
  .js-scroll .header--logo.recruit--logo small {
    color: #0f66e7;
  }
  .header--sns {
    margin-left: 16px;
    padding-top: 20px;
    transition: .4s ease-out;;
  }
  .header--sns a {
    display: block;
    padding: 8px;
    line-height: 1;
  }
  .header--sns a img {
    vertical-align: middle;
  }
  .header--sns .facebook svg {
    width: 24px;
    height: 24px;
  }
  .header--sns .note svg {
    width: 21px;
    height: 23px;
  }
  .header--sns .instagram svg {
    width: 32px;
    height: 32px;
  }
  .js-scroll .header--sns {
    padding-top: 0;
  }
  .js-scroll .header--sns svg path {
    fill: #0f66e7 !important;
  }

  @media screen and (max-width: 1605px) {
    .header--logo.recruit--logo small {
      margin-left: 0;
      font-size: 90%;
      letter-spacing: .25em;
    }
  }
  @media screen and (max-width: 1400px) {
    .header--logo .logo {
      width: 197px;
    }
    .header--logo a {
      padding-left: 197px;
    }
    .header--logo.recruit--logo a {
      padding-left: 204px;
    }
    .header--logo.recruit--logo .logo {
      width: 197px;
    }
  }
  @media screen and (max-width: 767px) {
    .header,
    .header.js-scroll {
      height: 56px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .header .inner {
      width: 90%;
      padding-left: 0;
    }

    /* --- header--logo --- */
    .header--logo {
      position: relative;
      z-index: 5;
    }
    .header--logo,
    .header--logo .logo {
      padding-top: 0 !important;
    }
    .header--logo.recruit--logo a {
      padding-left: 149px;
    }
    .header--logo.recruit--logo .logo {
      width: 137px;
    }
    
    /* --- header--sns --- */
    .header--sns {
      margin-left: 0;
      padding-top: 20px !important;
    }
    .header--sns ul {
      justify-content: center;
    }
    .header--sns svg path {
      fill: #0f66e7 !important;
    }
  }

/* gnav
**************************************** */
  .gnav--link,
  .btn-recruit a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff;
    letter-spacing: .22em;
  }
  .gnav--link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
  }
  .home .gnav a,
  .page-company .gnav a,
  .page-services .gnav a,
  .page-policy .gnav a,
  .archive-news .gnav a,
  .single-news .gnav a {
    transition: none;
  }
  .gnav--list li {
    position: relative;
  }
  .gnav--list > li {
    padding-bottom: 27px;
    padding-top: 48px;
    transition: .4s ease-out;;
  }
  .header.js-scroll .gnav--list > li {
    padding-top: 27px;
  }
  .gnav--link em { padding: 0 14px; }
  .gnav--link em::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - 4px / 2);
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    opacity: 0;
    transition: all .4s ease-in-out;
  }
  .gnav--label {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    width: 100%;
    color: #afeeee;
    text-align: center;
    line-height: 1.6;
    letter-spacing: .26em;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .gnav--label-en {
    display: block;
    padding: 8px 0;
    letter-spacing: .22em;
  }
  .js-scroll .gnav--link {
    color: #444;
  }
  .js-scroll .gnav--link:hover,
  .js-scroll .gnav--label {
    color: #0f66e7;
  }
  .current .gnav--link em::before {
    opacity: 1;
    background-color: #fff;
  }
  .js-scroll .current .gnav--link em::before {
    background-color: #0f66e7;
  }

  .home .gnav--home,
  .page-recruit:not(.page-recruit-about):not(.page-recruit-job) .gnav--recruit-top {
    display: none;
  }

  /* --- btn-entry --- */
  .btn-entry a {
    padding: 8px 40px;
    text-align: center;
  }

  /* --- CTA --- */
  .gnav--tel {
    margin-left: 8px;
    font-size: 147%;
  }
  .gnav--tel small {
    font-size: 59%;
  }
  .gnav--recruit {
    margin-left: 8px;
    text-align: center;
  }
  .btn-recruit a {
    min-width: 216px;
    padding: 0 24px;
  }
  .btn-recruit .gnav--label {
    left: 0;
    width: 100%;
    padding: 0 24px;
    color: #fff !important;
    text-align: left; 
    transform: translateY(-50%);
    transition: opacity .4s ease-in-out;
  }
  .btn-recruit .gnav--label-en {
    width: 100%;
    margin-right: auto;
    text-align: center;
    white-space: nowrap;
    transition:
      width .3s .3s ease-in-out,
      opacity .4s ease-in-out;
  }
  .gnav--snav {
    position: absolute;
    overflow: hidden;
    height: 0;
  }
  .gnav--snav ul {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .gnav--snav li {
    opacity: 0;
    transform: translateX(32px);
    transition: .4s cubic-bezier(.34, -.01, .24, 1.02);
    transition-delay: 0s;
  }
  .gnav_cls .gnav--snav li:nth-child(1) {
    transition-delay: .4s;
  }
  .gnav_cls .gnav--snav li:nth-child(2) {
    transition-delay: .5s;
  }
  .gnav_cls .gnav--snav li:nth-child(3) {
    transition-delay: .6s;
  }
  .gnav_cls .gnav--snav li:nth-child(4) {
    transition-delay: .7s;
  }
  .gnav_cls .gnav--snav li:nth-child(5) {
    transition-delay: .8s;
  }
  .gnav_cls .gnav--snav li:nth-child(6) {
    transition-delay: .9s;
  }
  .gnav--snav a {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    font-size: 93%;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .gnav_cls .gnav--snav {
    height: calc(100% - 20px);
    transition: .1s ease-out;
  }
  .gnav_cls .gnav--snav li {
    opacity: 1;
    transform: translateX(0);
  }
  .gnav--recruit-bg {
    position: absolute;
    top: 73px;
    left: 0;
    width: 100%;
    height: 0;
    z-index: -1;
    background-color: #0056d7;
    border-radius: 0 0 25px 25px;
    overflow: hidden;
  }
  .js-scroll .gnav--recruit-bg {
    top: 52px;
  }
  .gnav--recruit-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 25px;
    background-color: #0f66e7;
    transition: .1s ease-out;
  }
  .gnav_cls .gnav--recruit-bg {
    height: calc(100% - 20px);
  }

  /* ---nav-child --- */
  .nav-child {
    padding-left: 30px;
  }
  .nav-child a::before {
    content: '';
    display: block;
    margin-top: -7px !important;
    width: 8px !important;
    height: 8px !important;
    margin-right: 8px !important;
    border-left: 1px solid #afeeee !important;
    border-bottom: 1px solid #afeeee !important;
  }

  /* --- gnav-recruit --- */
  .gnav-recruit .gnav--list {
    background: none;
  }
  .gnav-recruit .gnav--link:hover {
    color: #afeeee;
  }
  .gnav-recruit .gnav--link em {
    padding: 8px 30px;
  }
  .gnav-recruit .gnav--entry {
    margin-left: 10px;
  }
  .gnav-recruit .corporate-link {
    position: absolute;
    top: 16px;
    right: 0;
  }
  .js-scroll .gnav-recruit .corporate-link {
    top: 0;
  }
  .gnav-recruit .corporate-link a {
    color: #AFEEEE;
    font-size: 80%;
    letter-spacing: .22em;
    opacity: .5;
    white-space: nowrap;
  }
  .gnav-recruit .corporate-link svg {
    width: 12px;
    height: 12px;
    fill: #afeeee;
  }
  .btn-entry a {
    border-radius: 4px;
    display: block;
  }
  .js-scroll .gnav-recruit .corporate-link a {
    color: #0f66e7;
  }
  .js-scroll .gnav-recruit .corporate-link svg {
    fill: #0f66e7;
  }
  .gnav--recruit.gnav_cls .btn a,
  .gnav--recruit:hover .btn a {
    background-color: #0f66e7;
  }

  /* hover */
  @media screen and (min-width: 1140px) {
    .gnav li:hover .gnav--label {
      opacity: 1;
    }
    .gnav li:hover .gnav--label-en {
      opacity: 0;
    }
    .gnav--recruit:hover .gnav--label {
      transition: opacity .4s .4s ease-in-out;
    }
    .gnav--recruit:hover .gnav--label-en {
      width: 0;
      transition:
        width .3s ease-in-out,
        opacity .4s .3s ease-in-out;
    }
  }
  @media screen and (max-width: 1750px) {
    /* --- gnav-recruit --- */
    .gnav-recruit .gnav--link em {
      padding: 8px 10px;
      font-size: 95%;
    }
    .btn-entry a {
      min-width: auto;
      min-height: auto;
      padding: 12px 16px;
      font-size: 95%;
    }
  }
  @media screen and (max-width: 1250px) and (min-width: 768px) {
    .gnav--link em { 
      padding: 0 8px;
      font-size: 90%;
    }
    .btn-recruit a {
      padding: 0 16px;
      font-size: 90%;
    }

    /* ---nav-child --- */
    .nav-child {
      padding-left: 20px;
      font-size: 80%;
    }

    /* --- gnav-recruit --- */
    .gnav-recruit .gnav--link em,
    .btn-entry a {
      padding: 8px;
    }
    .btn-recruit a {
      min-width: 105px;
    }
    .btn-entry a em {
      display: none;
    }
    .gnav--link em::before {
      top: 3px;
    }
  }
  @media screen and (max-width: 1140px) and (min-width: 768px) {

    /* --- gnav-recruit --- */
    .gnav-recruit .gnav--link,
    .btn-entry a {
      font-size: 83%;
    }
  }
  @media screen and (max-width: 767px) {
    .header--nav {
      position: absolute;
    }
    .gnav {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      padding: 69px 5% 5%;
      pointer-events: none;
      transition: .4s ease-out;
      transform: translateY(-100%);
      background: #eee url(../images/common/gnav-bg.jpg) center;
      background-size: cover;
    }
    .header.active .gnav {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0);
    }
    .gnav--list + .gnav--ttl {
      margin-top: 16px;
    }
    .gnav--ttl {
      margin-bottom: 4px;
      letter-spacing: .22em;
    }
    .gnav--list {
      position: relative;
      background: #fff;
    }
    .gnav--list::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: #edeeee;
    }
    .gnav--list li {
      width: 50%;
    }
    .gnav--list > li,
    .header.js-scroll .gnav--list > li {
      padding-top: 0;
      padding-bottom: 0;
    }
    .home .gnav--home,
    .page-recruit .gnav--recruit-top,
    .gnav--list .gnav--home {
      display: block;
      width: 100%;
    }
    .gnav--list li:nth-child(2n+1) {
      border-right: 1px solid #edeeee;
    }
    .gnav--list li {
      border-bottom: 1px solid #edeeee;
    }
    .gnav--link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 24px;
      color: #444;
      background-color: #fff;
    }
    .gnav--link em::before {
      top: 0;
      left: 0;
      width: 3px;
      height: 100%;
      border-radius: 0;
    }
    .current .gnav--link em::before {
      background-color: #0f66e7;
    }
    .gnav--link::after {
      content: '';
      display: block;
      width: 5px;
      height: 5px;
      border-right: 1px solid #666;
      border-top: 1px solid #666;
      transform: rotate(45deg);
    }
    .gnav--link em {
      padding: 0 0 0 24px;
    }
    .pc-none-flex .gnav--label {
      position: relative;
      left: 0;
      width: auto;
      font-size: 92%;
      text-align: left;
      letter-spacing: .14em;
      opacity: 1;
      transform: none;
    }
    .pc-none-flex .gnav--label,
    .gnav--label-en {
      padding: 10px 0;
      color: #444;
      letter-spacing: .16em;
    }

    /* ---gnav_btn --- */
    .gnav_btn {
      width: 56px;
      height: 56px;
      z-index: 9999;
    }
    .gnav_btn--lines {
      position: relative;
      width: 40px;
      height: 19px;
    }
    .gnav_btn--lines span {
      transition: all .4s;
      box-sizing: border-box;
    }
    .gnav_btn--lines span {
      position: absolute;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #fff;
    }
    .header.active .gnav_btn--lines span,
    .js-scroll .gnav_btn--lines span {
      background-color: #ff6600;
    }
    .gnav_btn--lines span:nth-of-type(1) {
      top: 0;
    }
    .gnav_btn--lines span:nth-of-type(2) {
      top: 50%;
    }
    .gnav_btn--lines span:nth-of-type(3) {
      bottom: 0;
    }
    .header.active .gnav_btn--lines span:nth-of-type(1) {
      -webkit-transform: translateY(9px) rotate(-35deg);
      transform: translateY(9px) rotate(-35deg);
    }
    .header.active .gnav_btn--lines span:nth-of-type(2) {
      opacity: 0;
    }
    .header.active .gnav_btn--lines span:nth-of-type(3) {
      -webkit-transform: translateY(-9px) rotate(35deg);
      transform: translateY(-9px) rotate(35deg);
    }

    /* --- gnav-recruit --- */
    .gnav-recruit .gnav--list li {
      width: 100%;
      padding: 0;
    }
    .gnav-recruit .gnav--link {
      padding-right: 24px;
    }
    .gnav-recruit .gnav--link em {
      padding: 10px 0 10px 24px;
    }
    .gnav--entry {
      margin-top: 40px;
    }
    .gnav-recruit .corporate-link {
      position: relative;
      top: auto;
      right: auto;
      margin-top: 8px;
      font-size: 110%;
      text-align: right;
    }
    .home .gnav--home,
    .page-recruit:not(.page-recruit-about):not(.page-recruit-job) .gnav--recruit-top {
      display: block;
    }

    /* ---CTA --- */
    .gnav--tel {
      margin-left: 0;
      text-align: center;
    }
    .gnav--recruit {
      margin-left: 0;
    }

    /* ---gnav-recruit --- */
    .gnav-recruit .corporate-link a {
      color: #444;
    }
    .gnav-recruit .corporate-link svg path {
      fill: #444 !important;
    }
  }


/* ##############################################################################

    FOOTER

############################################################################## */

  .footer {
    padding-top: 100px;
    padding-bottom: 100px;
    background-color: #072044;
  }
  .footer--sns {
    margin-top: 16px;
  }
  .footer--sns img {
    margin-right: 8px;
  }
  .footer--sns li {
    width: 50%;
    text-align: center;
  }
  .footer--sns a:hover {
    opacity: .6;
  }
  .page-contact:not(.page-thanks) .footer,
  .page-entry:not(.page-thanks) .footer {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  @media screen and (max-width: 767px) {
    .footer {
      padding-top: 40px;
      padding-bottom: 40px;
      padding-left: 24px;
      padding-right: 24px;
    }
    .footer > .inner {
      width: 95%;
      max-width: 95%;
    }
    .footer--sns {
      margin-bottom: 24px;
    }
  }

/* pagetop
*************************************************** */
  .pagetop {
    width: 56px;
    height: 56px;
    position: fixed;
    right: 24px;
    bottom: -100%;
    z-index: 999;
    background-color: #0f66e7;
    border-radius: 50%;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
  }
  .pagetop::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: translateY(2px) rotate(-45deg);
  }
  .pagetop.js-scroll {
    bottom: 24px;
  }
  .pagetop:hover {
    transform: translateY(-4px);
  }

  @media screen and (max-width: 767px) {
    .pagetop {
      display: none;
    }
  }

/* footer--main
*************************************************** */
  .footer--main {
    margin-right: 64px;
  }
  .footer--logo {
    margin-right: 80px;
  }

  @media screen and (max-width: 1200px) {
    .footer--main {
      margin-right: 0;
      margin-bottom: 40px;
    }
    .footer--inner {
      flex-direction: column;
    }
    .footer-rgt {
      padding-left: 152px;
    }
    .footer-rgt iframe {
      display: block;
      max-width: 500px;
      width: 100% !important;
      margin-left: auto;
      margin-right: auto;
    }
    .footer--copyright {
      justify-content: center;
    }
  }
  @media screen and (max-width: 767px) {
    .footer--logo {
      margin-right: 0;
      margin-bottom: 32px;
    }
    .footer--main {
      margin-bottom: 0;
      text-align: center;
    }
    .footer-rgt {
      padding-left: 0;
    }
  }

/* footer--nav
*************************************************** */
  .footer--nav  {
    margin-top: 40px;
  }
  .footer--nav a {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .footer--nav ul:not(:last-child) {
    margin-right: 52px; 
  }
  .footer--nav a::before {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    margin-right: 8px;
    border-bottom: 1px solid #afeeee;
  }
  .footer--nav a:hover {
    opacity: .6;
  }

  @media screen and (max-width: 767px) {
    .footer--nav {
      margin-top: 32px;
      margin-bottom: 40px;
    }
    .footer--nav ul {
      width: 100%;
    }
    .footer--nav ul:not(:last-child) {
      margin-right: 0;
    }
    .footer--nav a {
      width: 100%;
      margin-right: 0;
      font-size: 95%;
    }
  }

/* footer--cta
*************************************************** */
  /* --- footer--cta_txt --- */
  .footer--cta_txt {
    color: #fff;
    font-size: 266%;
    line-height: 1.4;
    letter-spacing: .2em;
  }
  .footer--cta_txt small {
    display: block;
    margin-top: 30px;
    color: #a5a9b2;
    font-size: 30%;
    letter-spacing: .18em;
  }

  .contact--form {
    font-family: sans-serif;
  }

  /* --- contact--tel --- */
  .contact--tel a {
    color: #afeeee;
    font-weight: normal;
    line-height: 1;
  }
  .contact--tel small {
    font-size: 160%;
    letter-spacing: .14em;
  }
  .contact--tel span {
    font-size: 266%;
    letter-spacing: .06em;
  }
  .page-contact:not(.page-thanks) .contact--tel a,
  .page-entry:not(.page-thanks) .contact--tel a {
    color: #0f66e7;
  }
  .footer .contact--tel {
    margin-right: 40px;
  }

  /* --- footer--contact --- */
  .footer--contact a {
    color: #afeeee;
    border: 1px solid #afeeee;
    background: transparent;
  }
  .footer--contact i::before {
    background-color: #afeeee;
  }
  .footer--contact a:hover {
    color: #fff;
    border-color: #fff;
    background-color: transparent;
  }
  .footer--contact a:hover i::before {
    background-color: #fff;
  }

  @media screen and (max-width: 1500px) {
    /* --- footer--cta --- */
    .footer--cta_txt {
      font-size: 246%;
    }
    .footer--cta_btn {
      flex-direction: column;
      align-items: flex-start;
    }

    /* --- contact--tel --- */
    .footer .contact--tel {
      margin-right: 0;
      margin-bottom: 16px;
    }
    .contact--tel span {
      font-size: 220%;
    }
  }
  @media screen and (max-width: 767px) {
    /* --- footer--cta --- */
    .footer--cta_txt {
      font-size: 190%;
    }
    .footer--cta_txt small {
      font-size: 20%;
      text-align: center;
    }
    .footer--cta_btn {
      align-items: center;
    }

    /* --- contact--tel --- */
    .contact--tel span {
      font-size: 250%;
    }
    .contact--tel small {
      font-size: 130%;
    }
  }

/* footer--copyright
*************************************************** */
  .copyright {
    margin-right: 8px;
    color: #56657b;
    font-size: 73%;
    text-align: center;
  }
  .pbl {
    text-align: center;
    opacity: .5;
  }


/* ##############################################################################

    INDEX

############################################################################## */

/* hero
*************************************************** */
  .hero {
    position: relative;
    overflow: hidden;
    height: 70vw;
    min-height: 800px;
    max-height: 920px;
  }
  .hero > .inner {
    position: relative;
    z-index: 1;
    height: 100%;
    padding-left: 98px;
    padding-bottom: 137px;
  }
  .hero--ttl {
    height: 90%;
    font-size: 536%;
    line-height: 1.45;
    letter-spacing: .34em;
  }
  .hero--scroll {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    color: #fff;
    font-size: 80%;
    letter-spacing: .18em;
  }
  .hero--scroll i {
    position: relative;
    display: block;
    width: 1px;
    height: 360px;
    margin-top: 17px;
    overflow: hidden;
  }
  .hero--scroll i::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: rgba(255,255,255,.7);
    animation: scroll_ani 2s cubic-bezier(.38, .46, .09, 1.01) infinite;
    animation-delay: -1s;
  }

  /* --- slide-hero --- */
  .slide-hero li {
    position: relative;
    overflow: hidden;
  }
  .slide-hero,
  .slide-hero .slick-list > li,
  .slide-hero .slide-img {
    width: 100%;
    height: 100%;
  }
  .slide-hero,
  .slide-hero .slide-img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-position: center;
    background-size: cover;
  }
  .slide-hero .slide01 .slide-img {
    background-image: url(../images/slide01.jpg);
  }
  .slide-hero .slide02 .slide-img {
    background-image: url(../images/slide02.jpg);
  }
  .slide-hero > .slick-list,
  .slide-hero > .slick-list > .slick-track {
    height: 100%;
  }
  .slide-hero .slide-animation .slide-img {
    animation: slide_fadeZoom 10s 0s forwards;
  }
  .slide-hero .slick-dots {
    position: absolute;
    right: 40px;
    bottom: 40px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .slide-hero .slick-dots li {
    width: 5px;
    height: 5px;
    background-color: #eee;
    border-radius: 50%;
  }
  .slide-hero .slick-dots li:not(:last-child) {
    margin-right: 7px;
  }
  .slide-hero .slick-dots li.slick-active {
    background-color: #00bfff;
  }
  .slide-hero--lead {
    position: absolute;
    top: 0;
    right: 110px;
  }
  .slide-hero--lead-en {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-left: 16px;
  }
  .slide-hero--lead-en::before {
    content: '';
    display: block;
    width: 1px;
    height: 162px;
    margin-bottom: 1.5em;
    background-color: rgba(255, 255, 255, .5);
    transform: translateY(-100%);
    animation: slideIn 1s .3s forwards cubic-bezier(.43, -.01, .15, .99);
  }
  .slide-hero--lead-en small {
    opacity: 0;
    animation: fadeIn 1s .7s forwards cubic-bezier(.43, -.01, .15, .99);
  }
  .slide-hero--lead-txt {
    padding-top: 177px;
    font-size: 213%;
    line-height: 1.2;
    letter-spacing: .14em;
    opacity: 0;
    animation: fadeIn 1s 1.3s forwards cubic-bezier(.43, -.01, .15, .99);
  }
  @media screen and (max-width: 1300px) {
    .hero--ttl {
      font-size: 436%;
    }
    .slide-hero--lead {
      right: 100px;
    }
  }
  @media screen and (max-width: 1140px) {
    .hero--ttl {
      font-size: 336%;
    }
    .slide-hero--lead {
      right: 80px;
    }
    .hero--scroll i {
      height: 210px;
    }
  }
  @media screen and (max-width: 767px) {
    .hero {
      min-height: 600px;
    }
    .hero--scroll i {
      height: 110px;
    }
    .hero > .inner {
      padding-left: 30px;
      padding-bottom: 50px;
    }
    .hero--ttl {
      font-size: 207%;
    }
    .hero--scroll {
      left: -10px;
    }

    /* --- slide-hero --- */
    .slide-hero--lead {
      right: 30px;
    }
    .slide-hero--lead-txt {
      padding-top: 84px;
      font-size: 160%;
    }
    .slide-hero--lead-en::before {
      height: 70px;
    }
    .slide-hero .slide01 .slide-img {
      background-image: url(../images/slide01_sp.jpg);
    }
    .slide-hero .slide02 .slide-img {
      background-image: url(../images/slide02_sp.jpg);
    }
  }

/* home_message
*************************************************** */
  .home_message {
    padding-bottom: 320px;
    background-image: url(../images/message-bg.jpg);
    background-position: center;
    background-size: cover;
  }
  .home_message .imgarea {
    background-image: url(../images/message--img.jpg);
  }
  @media screen and (max-width: 767px) {
    .home_message {
      padding-bottom: 240px;
    }
    .home_message .imgarea {
      background-image: url(../images/message--img-sp.jpg);
    }
  }

/* home_services
*************************************************** */
  .home_services {
    padding-top: 100px;
  }
  .home_services--list li {
    width: calc(33.33% - 2.7px);
    margin-right: 4px;
    margin-bottom: 0;
  }
  .home_services--img {
    position: relative;
    overflow: hidden;
  }
  .home_services--img::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 71.8%;
    background-position: center;
    background-size: cover;
    transition: all 1s cubic-bezier(.43, -.01, .15, .99);
  }
  .service01 .home_services--img::before {
    background-image: url(../images/service--img01.jpg);
  }
  .service02 .home_services--img::before {
    background-image: url(../images/service--img02.jpg);
  }
  .service03 .home_services--img::before {
    background-image: url(../images/service--img03.jpg);
  }
  .home_services--list li:hover .home_services--img::before {
    transform: scale(1.05);
  }
  .home_services + .scroll-text {
    margin-bottom: -70px;
  }

  @media screen and (max-width: 767px) {
    .home_services {
      padding-top: 40px;
    }
    .home_services--list li {
      width: 100%;
    }
    .home_services--list li:not(:last-child) {
      padding-bottom: 32px;
    }
    .home_services + .scroll-text {
      margin-bottom: -35px;
    }
  }

/* home_works
*************************************************** */
  .home_works {
    z-index: 0;
    padding-top: 118px;
  }
  @media screen and (max-width: 767px) {
    .home_works {
      padding-top: 56px;
    }
  }

/* home_news
*************************************************** */
  .home_news > .inner {
    padding-left: 48px;
    padding-right: 48px;
  }

/* home_company
*************************************************** */
  .home_company {
    padding-bottom: 40px;
  }
  .home_company::before {
    content: '';
    position: absolute;
    top: 640px;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    background-image: url(../images/company-bg.jpg);
    background-position: center;
    background-size: cover;
  }

  /* --- box_list --- */
  .home_company .inner > .box-wh {
    margin-bottom: 48px;
  }
  .home_company .box_list--list01::before {
    background-image: url(../images/company-bg-link01.jpg);
  }
  .home_company .box_list--list02::before {
    background-image: url(../images/company-bg-link02.jpg);
  }
  .home_company .box_list--list03::before {
    background-image: url(../images/company-bg-link03.jpg);
  }
  .home_company .box_list--list04::before {
    background-image: url(../images/company-bg-link04.jpg);
  }

/* home_recruit
*************************************************** */
  .home_recruit {
    position: relative;
    z-index: 1;
    background-image: url(../images/recruit-bg.jpg);
    background-position: center;
    background-size: cover;
  }
  .home_recruit .imgarea {
    background-image: url(../images/recruit--img.jpg);
  }
  @media screen and (max-width: 767px) {
    .home_recruit .imgarea {
      background-image: url(../images/recruit--img-sp.jpg);
    }
  }


/* ##############################################################################

    PAGE

############################################################################## */

/* company
*************************************************** */
  .company_message .imgarea {
    background-image: url(../images/company/company_message--img01.jpg);
  }
  .company_overview {
    padding-top: 380px;
    padding-bottom: 80px;
  }
  .company_overview::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    height: 500px;
    background-image: url(../images/company/company_overview--img01.jpg);
    background-position: center;
    background-size: cover;
  }
  .company_overview .box-wh {
    box-shadow: none;
  }
  .company_access .imgarea {
    background-image: url(../images/company/company_access--img01.jpg);
  }

  @media screen and (max-width: 767px) {
    .company_overview {
      padding-top: 24px;
      padding-bottom: 180px;
    }
    .company_overview::after {
      top: auto;
      bottom: 0;
      height: 200px;
      margin-top: 20px;
    }
  }

/* service
*************************************************** */
  /* --- service_information --- */
  .service_information {
    padding-top: 80px;
  }
  .service_information .column_box-full01 .imgarea {
    background-image: url(../images/services/service_information--img01.jpg);
  }
  .service_information .column_box-full02 .imgarea {
    background-image: url(../images/services/service_information--img02.jpg);
  }
  .service_information .column_box-full03 .imgarea {
    background-image: url(../images/services/service_information--img03.jpg);
  }

  /* --- service_works --- */
  .service_works {
    overflow: hidden;
  }
  .sort-item {
    padding: 4px 24px;
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid #add8e6;
    cursor: pointer;
  }
  .sort-item:not(:last-child) {
    margin-right: 8px;
  }
  .sort-item:hover,
  .sort-item.js-active {
    background-color: #add8e6;
  }

  /* --- modal--works --- */
  .modal--works {
    font-family: 'YuGothic', '游ゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', sans-serif;
  }
  .modal--works .eyecatch {
    max-width: 480px;
    margin-right: 56px;
  }
  .modal--works .txtarea {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
  .page-service .posts-works .post {
    padding-bottom: 4px;
  }
  @media screen and (max-width: 1600px) {
    .service_works--list .post {
      width: calc(33.33% - 3px);
    }
  }
  @media screen and (max-width: 767px) {
    .sortList {
      flex-wrap: wrap;
    }
    .sort-item {
      width: calc(50% - 8px);
      margin-right: 8px;
    }
    .sort-item[data-sort="all"] {
      width: 100%;
      margin-right: 0;
    }
    .sort-item:nth-child(2n+1) {
      margin-right: 0;
    }
    .sort-item:not(:last-child) {
      margin-bottom: 4px;
    }

    .service_works--list .post {
      width: calc(50% - 3px);
    }

    /* --- modal--works --- */
    .modal--works .eyecatch {
      margin-right: 0;
      margin-bottom: 21px;
    }
  }

/* digital
*************************************************** */
.digital_dx .imgarea { margin-bottom: 0; }
.digital_working .digital--flow { padding-top: 40px; }
.digital_working .digital--flow dl {
  position: relative;
  border: 2px solid #0f66e7;
}
.digital_working .digital--flow dl::before {
  content: '';
  position: absolute;
  display: block;
  left: 20px;
  top: -28px;
  height: 50px;
  width: 70px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  z-index: 1;
}
.digital_working .digital--flow dl:first-child::before {
  background-image: url(../images/digital/digital_vision-ttl01.svg);
}
.digital_working .digital--flow dl:nth-child(2)::before {
  background-image: url(../images/digital/digital_vision-ttl02.svg);
}
/* .digital_working .digital--flow dl:last-child::before {
  background-image: url(../images/digital/digital_vision-ttl03.svg);
} */
.digital_working .digital--flow dt {
  position: relative;
  padding-top: 4px;
  padding-bottom: 4px;
  background: #0f66e7;
}
.digital_working .digital--flow dd {
  padding-top: 12px;
  padding-bottom: 12px;
}
.digital_themes .box-wh { padding: 50px 30px; }
.digital_themes .themes_num {
  position: absolute;
  z-index: -1;
  right: 10px;
  top: 10px;
  font-size: 640%;
  line-height: 1;
  color: #afeeee;
  opacity: .3;
}
.digital_themes .heading-2 {
  display: inline;
  font-size: min(2.2vw , 213%);
  background: linear-gradient(transparent 60%, #e7fafa 0%);
}
.digital_themes--flex-txt { padding-top: 10px; }
.digital_system .chart .sp-none { 
  margin-left: auto;
  margin-right: auto;
}
.digital_system { padding-top: 380px; }
.digital_system::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 500px;
  background-image: url(../images/digital/digital_img01.jpg);
  background-position: center;
  background-size: cover;
}
.digital_system .list {  font-size: 120%; }

@media screen and (max-width: 767px) {
  .digital .inner,
  .digital_themes .inner > h2,
  .digital_themes .inner > p {
  padding-left: calc(40px - 5%);
  padding-right: calc(40px - 5%);
  }
  .digital_dx .imgarea { margin-bottom: 24px; }
  .digital_working .digital--flow { padding-top: 20px; }
  .digital_working .digital--flow dl::before {
    top: -22px;
    height: 40px;
    width: 60px;
  }
  .digital_working .digital--flow dl { margin-bottom: 32px; }
  .digital_themes .inner,
  .digital_system .inner { padding: 0; }
  .digital_themes .box-wh { padding: 30px 24px; }
  .digital_themes .themes_num { 
    top: 5px;
    right: 5px;
    font-size: 500%;
  }
  .digital_themes .box-wh .txt-en-sm { margin-bottom: 16px; }
  .digital_themes .box-wh .heading-2 { font-size: 152%; }
  .digital_strategy .inner > div { margin-bottom: 50px; }
  .digital_strategy .inner h3 { font-size: 156%; }
  .digital_system { padding-top: 160px; }
  .digital_system::after { height: 200px; }
  .digital_system .heading-2 { text-align: center; }
  .digital_system .list { 
    font-size: 100%;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #f8f8f8;
    padding: 16px;
  }
  .digital_effort .flex-col2 .heading-2 {
    text-align: center;
  }
}


/* recruit
*************************************************** */

  /* --- recruit_hero --- */
  .recruit_hero {
    position: relative;
    z-index: 0;
    min-height: 500px;
    max-height: 920px;
    overflow: hidden;
    background-color: #aaa;
  }
  .recruit_hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(32,79,133,.3);
  }
  .recruit_hero > .inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
  .recruit_hero--scroll {
    color: #AFEEEE;
    font-size: 80%;
    letter-spacing: .18em;
  }
  .recruit_hero--ttl {
    font-size: 586%;
    line-height: 1.45;
    letter-spacing: .2em;
  }
  .hero--movie {
    position: relative;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    padding-top: 56.25%;
  }
  .hero--movie video {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
  }
  .recruit_hero--scroll i {
    position: relative;
    display: block;
    width: 1px;
    height: 17px;
    margin-top: 6px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
  }
  .recruit_hero--scroll i::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: #AFEEEE;
    animation: scroll_ani 2s cubic-bezier(.38, .46, .09, 1.01) infinite;
    animation-delay: -1s;
  }

  /* --- recruit_news --- */
  .recruit_news {
    position: absolute;
    top: -60px;
    z-index: 1;
    width: 100%;
    font-size: 93%;
    line-height: 1;
    letter-spacing: .15em;
  }
  .hero .recruit_news {
    top: auto;
    bottom: 48px;
  }
  .recruit_news--ttl {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 30px;
    background-color: #0051CD;
  }
  .recruit_news--post:not(:last-child) {
    margin-bottom: 1px;
  }
  .recruit_news--post_date {
    padding: 13px 24px;
    background-color: #1A6AE5;
  }
  .recruit_news--post_ttl {
    width: 460px;
    background-color: rgba(255,255,255,.8);
    padding: 13px 24px;
  }
  .recruit_news--post_ttl i {
    position: absolute;
    top: calc(50% - 14px / 2);
    right: 20px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #BFBFBF;
  }
  .recruit_news--post_ttl i::before {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-top: 1px solid #BFBFBF;
    border-right: 1px solid #BFBFBF;
    transform: rotate(45deg);
  }
  .recruit_news--post_ttl:hover {
    background-color: #BFBFBF;
  }
  .recruit_news--post_ttl:hover i {
    background-color: #fff;
  }

  /* --- recruit_intro --- */
  .recruit_intro {
    position: relative;
    z-index: 1;
  }
  .recruit_intro::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    width: 100%;
    background-image: url(../images/recruit/recruit_intro-bg.jpg);
    background-position: center;
    background-size: cover;
  }
  .recruit_intro .box-wh {
    margin-top: -50px;
    padding-bottom: 160px;
    box-shadow: none;
  }
  .recruit_intro--ttl {
    color: #444;
    font-size: 373%;
    line-height: 1.57;
    letter-spacing: .18em;
  }
  .recruit_intro--ttl::after {
    content: '';
    display: block;
    width: 29px;
    height: 5px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/recruit/line-dots.svg);
  }
  .recruit_intro--txt {
    font-size: 120%;
    line-height: 2.33;
    letter-spacing: .18em;
  }
  .recruit_intro--txt p:not(:last-child) {
    margin-bottom: 1em;
  }
  .recruit_intro + .scroll-text {
    margin-top: -70px;
  }

  /* --- recruit_about --- */
  .page-recruit .box_list a {
    padding-left: 0;
    padding-right: 0;
    height: auto;
  }
  .page-recruit .box_list i {
    position: absolute;
    top: 50%;
    right: 0;
  }
  .page-recruit .box_list .heading-2 {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    transform: translateY(-50%);
  }
  .recruit_about {
    padding-top: 50px;
    padding-bottom: 80px;
  }
  .recruit_about .box_list a {
    padding-top: 100%;
  }
  .recruit_about .box_list--list01::before {
    background-image: url(../images/recruit/recruit_about-bg-link01.jpg);
  }
  .recruit_about .box_list--list02::before {
    background-image: url(../images/recruit/recruit_about-bg-link02.jpg);
  }
  .recruit_about .box_list--list03::before {
    background-image: url(../images/recruit/recruit_about-bg-link03.jpg);
  }
  .recruit_about .box_list--list04 .heading-2 { 
    padding-left: 0;
    padding-right: 0;
    font-size: min(2.4vw , 213%);
  }
  .recruit_about .box_list--list04::before {
    background-image: url(../images/recruit/recruit_about-bg-link04.jpg);
  }

  /* --- recruit_interview --- */
  .recruit_interview {
    padding-top: 80px;
    padding-bottom: 130px;
  }
  .recruit_interview--ttl::after {
    content: '';
    display: inline-block;
    width: 48px;
    height: 1px;
    margin-top: 32px;
    margin-left: auto;
    margin-right: auto;
    background-color: #add8e6;
  }
  .recruit_interview--ttl span {
    display: block;
    color: #444;
    font-size: 426%;
    line-height: 1.375;
    letter-spacing: .18em;
  }
  .recruit_interview--ttl .align-top {
    vertical-align: top;
  }
  .recruit_interview--txt {
    line-height: 2;
    letter-spacing: .14em;
  }

  /* --- recruit_person --- */
  .recruit_person {
    padding-bottom: 80px;
  }
  .recruit_person::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    display: block;
    width: 100%;
    background-image: url(../images/recruit/recruit_person-bg.jpg);
    background-position: center;
    background-size: cover;
  }
  .recruit_person-bg {
    position: relative;
    z-index: -1;
  }
  .recruit_person-bg span {
    display: block;
    width: 50%;
  }
  .recruit_person-bg span::before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 83.333%;
    background-position: center;
    background-size: cover;
  }
  .recruit_person-bg span:first-child::before {
    background-image: url(../images/recruit/recruit_person-bg01.jpg);
  }
  .recruit_person-bg span:last-child::before {
    background-image: url(../images/recruit/recruit_person-bg02.jpg);
  }
  .recruit_person .box-wh {
    margin-top: -160px;
  }
  .recruit_person--ttl {
    font-size: 250%;
    line-height: 1.6;
    letter-spacing: .18em;
  }
  .recruit_person--list {
    font-size: 120%;
    letter-spacing: .14em;
  }
  .recruit_person + .scroll-text {
    margin-top: -70px;
  }

  /* --- recruit_job --- */
  .recruit_job {
    padding-top: 54px;
  }
  .recruit_job .box_list a {
    padding-top: 74.865%;
  }
  .recruit_job .box_list--list01::before {
    background-image: url(../images/recruit/recruit_job-bg-link01.jpg);
  }
  .recruit_job .box_list--list02::before {
    background-image: url(../images/recruit/recruit_job-bg-link02.jpg);
  }
  .recruit_job .box_list--list03::before {
    background-image: url(../images/recruit/recruit_job-bg-link03.jpg);
  }

  /* --- recruit_flow --- */
  .recruit_flow {
    padding-bottom: 40px;
  }
  .recruit_flow--flow {
    counter-reset: number;
  }
  .recruit_flow--flow::before {
    content: '';
    position: absolute;
    top: calc(168px / 2);
    left: 168px;
    right: 168px;
    z-index: -1;
    display: block;
    height: 4px;
    background-image: url(../images/recruit/recruit_flow--line.png);
  }
  .recruit_flow--flow i::before {
    counter-increment: number;
    content: counter(number);
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 168px;
    height: 168px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 24px;
    color: #fff;
    font-size: 853%;
    line-height: 1;
    text-align: center;
    border-radius: 50%;
    border: 4px solid #fff;
    background-color: #0F66E7;
  }
  .recruit_flow--txt {
    font-size: 120%;
    line-height: 1.5;
  }
  .recruit_flow--txt small {
    display: block;
    font-size: 71.6%;
  }
  .recruit_flow + .scroll-text {
    z-index: -1;
    margin-bottom: -70px;
  }

  /* --- recruit_message --- */
  .recruit_message .column_box-full--child.txtarea {
    background-color: #ecf5f5;
  }
  .recruit_message .column_box-full01 .imgarea {
    background-image: url(../images/recruit/recruit_message--img01.jpg);
  }
  .recruit_message .column_box-full02 .imgarea {
    background-image: url(../images/recruit/recruit_message--img02.jpg);
  }

  /* --- recruit_entry --- */
  .recruit_entry {
    padding-top: 180px;
    padding-bottom: 180px;
  }
  .recruit_entry--ttl {
    color: #444;
    font-size: 426%;
    line-height: 1.3;
    letter-spacing: .24em;
  }
  .recruit_entry--subttl {
    color: #444;
  }

  @media screen and (max-width: 1500px) {

    /* --- recruit_person --- */
    .recruit_person--ttl {
      font-size: 182%;
    }
    .recruit_person--ttl br.sp-none {
      display: none;
    }
  }
  @media screen and (max-width: 1300px) {
    .recruit_hero--ttl {
      margin-bottom: 20px;
      font-size: 476%;
    }
    .recruit_entry {
      padding-top: 100px;
      padding-bottom: 100px;
    }
    .recruit_entry--ttl br {
      display: block;
    }
  }
  @media screen and (max-width: 1140px) {
    /* --- recruit_about --- */
    .recruit_about .box_list li {
      width: calc(50% - 4px);
    }
    .recruit_about .box_list a {
      padding-top: 50%;
    }
    .recruit_about .box_list--list04 .heading-2 { font-size: 160%; }
  }
  @media screen and (max-width: 767px) {

    /* --- recruit_hero --- */
    .hero--movie {
      padding-top: 149%;
    }
    .hero--movie video {
      top: 0;
      left: 0;
      transform: none;
    }
    .recruit_hero--ttl {
      font-size: 276%;
    }

    /* --- recruit_news --- */
    .recruit_news {
      position: relative;
      top: auto;
      margin-top: 40px;
    }
    .hero .recruit_news {
      bottom: 16px;
    }
    .recruit_news--inner,
    .recruit_news--post {
      display: block;
    }
    .recruit_news--ttl {
      display: inline-block;
      padding: 6px 16px;
    }
    .recruit_news--post_date {
      display: inline-block;
      padding: 6px 16px;
    }
    .recruit_news--post_ttl {
      width: 100%;
      padding: 14px 24px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .recruit_news--post_ttl i {
      right: 10px;
    }
    .hero .recruit_news--post:last-child {
      display: none;
    }
    .hero .recruit_news--post_date {
      position: absolute;
      top: 0;
      left: 6.125em;
    }

    /* --- recruit_intro --- */
    .recruit_intro .box-wh {
      margin-top: 40px;
      padding-bottom: 80px;
    }
    .recruit_intro--ttl {
      font-size: 230%;
    }
    .recruit_intro--txt {
      font-size: 110%;
      line-height: 2.2;
    }
    .recruit_intro + .scroll-text {
      margin-top: -35px;
    }

    /* --- recruit_about --- */
    .recruit_about .box_list li {
      width: 100%;
    }

    /* --- recruit_interview --- */
    .recruit_interview {
      padding-bottom: 80px;
    }
    .recruit_interview--ttl span {
      font-size: 250%;
    }

    /* --- recruit_person --- */
    .recruit_person {
      padding-bottom: 40px;
    }
    .recruit_person-bg span::before {
      padding-top: 150%;
    }
    .recruit_person .box-wh {
      margin-top: -40px;
    }
    .recruit_person--list {
      font-size: 110%;
    }
    .recruit_person--ttl {
      font-size: 137%;
    }
    .recruit_person + .scroll-text {
      margin-top: -35px;
    }

    /* --- recruit_job --- */
    .recruit_job {
      padding-top: 0;
    }
    .recruit_job .box_list a {
      padding-top: 60%;
    }

    /* --- recruit_flow --- */
    .recruit_flow--flow::before {
      top: 0;
      left: 32px;
      width: 4px;
      height: 100%;
      background-image: url(../images/recruit/recruit_flow--line-sp.png);
      background-position: top 59px center;
    }
    .recruit_flow--flow li {
      display: flex;
      align-items: center;
      margin-bottom: 26px !important;
    }
    .recruit_flow--flow li:last-child {
      margin-bottom: 0 !important;
    }
    .recruit_flow--flow i::before {
      width: 68px;
      height: 68px;
      margin-bottom: 0;
      margin-right: 24px;
      font-size: 353%;
    }
    .recruit_flow + .scroll-text {
      margin-bottom: -35px;
    }

    /* --- recruit_entry --- */
    .recruit_entry {
      padding-top: 70px;
      padding-bottom: 70px;
    }
    .recruit_entry--ttl {
      margin-bottom: 16px;
      font-size: 200%;
      line-height: 1.5;
    }
  }

/* recruit-about
*************************************************** */
  /* --- recruit-about-company --- */
  .recruit-about-company .compnay-img {
    position: relative;
  }
  .recruit-about-company .compnay-img_txt {
    position: absolute;
    inset: 0;
    height: 50%;
    margin-block: auto;
  }
  .recruit-about-company .compnay-img_txt::before,
  .recruit-about-company .compnay-img_txt::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
  }
  .recruit-about-company .compnay-img_txt::before {
    left: 0;
    background-color: rgba(67, 176, 53, 0.7);
  }
  .recruit-about-company .compnay-img_txt::after {
    right: 0;
    background-color: rgba(36, 137, 200, 0.7);
  }
  .recruit-about-company .compnay-img_txt h3,
  .recruit-about-company .compnay-img_txt p {
    position: relative;
    z-index: 2;
    color: #fff;
    line-height: 1.2;
    font-size: 56px;
  }
  .recruit-about-company .compnay-img_txt h3 {
    margin-right: -52px;
  }
  .recruit-about-company .compnay-img_txt p.lft {
    margin-bottom: auto;
  }
  .recruit-about-company .compnay-img_txt p.rgt {
    margin-top: auto;
    margin-bottom: 4px;
  }
  .recruit-about-company .compnay-img_txt .deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: auto;
    width: 15%;
    transform: translateY(50%);
    opacity: .25;
  }
  .recruit-about-company .compnay-img_txt .deco::before,
  .recruit-about-company .compnay-img_txt .deco::after {
    content: "";
    position: absolute;
    inset: 0;
    height: 2px;
    background-color: #fff;
  }
  .recruit-about-company .compnay-img_txt .deco::before {
    transform: rotate(45deg);
  }
  .recruit-about-company .compnay-img_txt .deco::after {
    transform: rotate(-45deg);
  }
  .recruit-about-company .flex-col2 a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    height: 360px;
    color: #fff;
  }
  .recruit-about-company .flex-col2 li:nth-child(1) a {
    background-image: url(../images/recruit/about_company-bg01.jpg);
  }
  .recruit-about-company .flex-col2 li:nth-child(2) a {
    background-image: url(../images/recruit/about_company-bg02.jpg);
  }
  .recruit-about-company .flex-col2 a .heading-2 {
    padding-bottom: 8px;
    border-bottom: 2px solid;
  }

  /* --- recruit-about-mission --- */
  /* .recruit-about-mission {
    background-color: #eee;
  } */
  .recruit-about-mission .recruit-about-mission_img .flex-column {
    flex: 1;
    margin-right: 20px;
  }
  .recruit-about-mission .recruit-about-mission_img .textarea {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    color: #fff;
  }
  .recruit-about-mission .recruit-about-mission_img .textarea h4 {
    line-height: 1;
    font-size: 120%;
    letter-spacing: 0.15em;
  }
  .recruit-about-mission .recruit-about-mission_img .textarea p {}
  /* .recruit-about-vision {
    background-color: #eee;
  } */
  .recruit-about-company .heading-1-xl,
  .recruit-about-vision .heading-1-xl,
  .recruit-about-mission .heading-1-xl {
    font-size: 333%;
  }
  .recruit-about-vision .heading-1-xl { line-height: 1.2; }

  /* --- recruit-about-vision --- */
  .recruit-about-vision {
    overflow: hidden;
    /* background: #5084ce;
    background: -moz-linear-gradient(top, #5084ce 0%, #4d86d6 50%, #81a8df 100%);
    background: -webkit-linear-gradient(top, #5084ce 0%,#4d86d6 50%,#81a8df 100%);
    background: linear-gradient(to bottom, #5084ce 0%,#4d86d6 50%,#81a8df 100%); */
  }
  /* .recruit-about-vision::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 1039px;
    height: 662px;
    background-image: url(../images/recruit/recruit_about_vision--bg02.png);
    background-size: cover;
  } */
  /* .recruit-about-vision-bg {
    position: absolute;
    bottom: 0;
    right: 40px;
    z-index: -1;
    display: block;
    width: 365px;
    height: 581px;
    background-image: url(../images/recruit/recruit_about_vision--bg.png);
    background-size: cover;
  } */
  .num_view--cont {
    padding: 40px 32px;
    background-color: #fff;
  }
  .num_view--cont svg {
    width: 100px;
    fill: #0f66e7;
  }
  .num_view--ttl {
    font-size: 120%;
  }
  .num_view--num {
    font-size: 550%;
    line-height: 1;
  }
  .num_view--num small {
    font-size: 30%;
  }
  .num_view--graph {
    min-height: 300px;
    padding-top: 64px;
  }
  .num_view--note {
    margin-left: 32px;
    padding: 20px;
    width: 140px;
    height: 140px;
    color: #fff;
    line-height: 1.5;
    border-radius: 50%;
    background-color: #0f66e7;
  }
  .graph-legend-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 20px;
  }
  .graph-legend:not(:last-child) {
    margin-right: 16px;
  }
  .graph-legend i {
    position: relative;
    display: inline-flex;
    margin-right: 8px;
    width: 30px;
    height: 10px;
  }
  .graph-legend i::before {
    content: '';
    display: block;
  }
  .graph-legend-bar i::before {
    width: 100%;
    height: 100%;
    background-color: rgba(15,102,231, .7);
  }
  .graph-legend-line i::before {
    width: 100%;
    height: 1px;
    background-color: rgba(255,102,0, .7);
  }
  .graph-legend-line i::after {
    content: '';
    position: absolute;
    top: calc(50% - 8px / 2);
    left: calc(50% - 8px / 2);
    display: block;
    width: 8px;
    height: 8px;
    background-color: rgb(255,102,0);
    border-radius: 50%;
  }

  .recruit-about-vision .flex-col3 > * {
    width: 32.66%;
    margin-right: 1%;
  }
  .recruit-about-vision .flex-col3 li {
    padding: 32px 24px 40px;
    background-color: #0f66e7;
    color: #fff;
  }
  .recruit-about-vision .flex-col3 .heading-3 {
    border-bottom: 1px solid;
    padding-bottom: 8px;
  }

  @media screen and (max-width: 1650px) {
    .recruit-about-vision-bg {
      width: 285px;
      height: 466px;
    }
  }
  @media screen and (max-width: 1500px) {
    .recruit-about-vision-bg {
      width: 168px;
      height: 275px;
    }
  }
  @media screen and (max-width: 1300px) {
    .recruit-about-vision {
      padding-bottom: 300px;
    }
    .recruit-about-vision-bg {
      right: calc(50% - 168px / 2);
    }
    .recruit-about-vision::before {
      display: none;
    }
    .recruit-about-vision-bg {
      right: calc(50% - 168px / 2);
      width: 168px;
      height: 275px;
    }
  }
  @media screen and (max-width: 767px) {
    .recruit-about-company .compnay-img_txt {
      height: 73%;
    }
    .recruit-about-company .compnay-img_txt h3, 
    .recruit-about-company .compnay-img_txt p {
      font-size: 26px;
    }
    .recruit-about-company .compnay-img_txt h3 {
      margin-inline: -40px;
      margin-right: -67px;
    }
    .recruit-about-company .compnay-img_txt .deco {
      width: 46%;
    }
    .recruit-about-company .compnay-img .compnay-img_img {
      flex-wrap: wrap;
    }
    .recruit-about-company .compnay-img .compnay-img_img span {
      width: 50%;
    }
    .recruit-about-company .flex-col2 a {
      height: 210px;
    }
    .recruit-about-vision {
      padding-bottom: 80px;
    }
    .recruit-about-mission .recruit-about-mission_img .flex-column {
      flex-direction: row;
      gap: 10px;
      margin-right: 0;
      margin-bottom: 10px;
    }
    .recruit-about-mission .recruit-about-mission_img .flex-column > div {
      flex: 1;
      margin-bottom: 0;
    }
    .recruit-about-mission .recruit-about-mission_img .bg_arrow {
      width: 100%;
    }
    .recruit-about-mission .recruit-about-mission_img .textarea {
      padding: 16px 8px;
    }
    .recruit-about-mission .recruit-about-mission_img .textarea h4 {
      font-size: 14px;
    }
    .recruit-about-mission .recruit-about-mission_img .textarea p {
      margin-bottom: 4px;
      font-size: 12px;
      line-height: 1.5;
    }
    .recruit-about-vision .flex-col3 li {
      width: 100%;
      margin-right: 0;
    }
    .recruit-about-company .heading-1-xl, 
    .recruit-about-mission .heading-1-xl, 
    .recruit-about-vision .heading-1-xl { 
      font-size: 240%;
    }
    .recruit-about-vision .btn {
      font-size: 86%;
    }
    .num_view--list {
      margin-bottom: 2px;
    }
    .num_view--cont {
      padding: 24px;
    }
    .num_view--num {
      font-size: 450%;
    }
    .num_view--note {
      margin-left: 24px;
      width: 110px;
      height: 110px;
      font-size: 100%;
    }
    .num_view--graph {
      padding: 54px 20px 20px 20px;
    }
    .graph-legend-wrap {
      padding-top: 10px;
    }
  }

/* recruit-job
*************************************************** */
  /* --- recruit-job-about --- */
  .recruit-job-about {
    padding-top: 80px;
  }
  .recruit-job-about .column_box-full01 .imgarea {
    background-image: url(../images/recruit/recruit_job_about--img01.jpg);
  }
  .recruit-job-about .column_box-full02 .imgarea {
    background-image: url(../images/recruit/recruit_job_about--img02.jpg);
  }
  .recruit-job-about .column_box-full03 .imgarea {
    background-image: url(../images/recruit/recruit_job_about--img03.jpg);
  }

  /* --- recruit-job-seminar --- */
  .recruit-job-seminar {
    padding-bottom: 80px;
  }
  .recruit-job-seminar .box-wh {
    margin-top: -80px;
  }

  .recruit-job-degital {
    padding-top: 120px;
    padding-bottom: 120px;
    background-image: url(../images/recruit/job_digtal-bg.jpg);
    background-size: cover;
    color: #FFF;
  }
  .recruit-job-degital .catch {
    margin-bottom: 40px;
    font-size: 208%;
    line-height: 1.5;
  }
  .recruit-job-degital .ttl {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 170%;
  }
  .recruit-job-degital .ttl::after {
    content: "";
    display: inline-block;
    max-width: 460px;
    flex: 1;
    height: 2px;
    background-color: #fff;
  }
  .recruit-job-degital .subttl {
    font-size: 140%;
  }
  .recruit-job-degital .txt-lg {
    font-size: 16px;
  }
  .recruit-job-degital .font-en {
    font-size: 120px;
    line-height: 1;
    font-weight: 700;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FFF;
    color: transparent;
  }
  .recruit-job-degital .btn-lg a {
    display: inline-flex;
    align-items: center;
    font-size: 100%;
  }

  @media screen and (min-width: 941px) {
    .recruit-job-degital .btn-lg a {
      min-width: 400px;
    }
  }

  @media screen and (max-width: 940px) {
    .recruit-job-degital {
      position: relative;
    }
    .recruit-job-degital .font-en {
      position: absolute;
      left: -3vw;
      bottom: 0;
      font-size: 30vw;
    }
    .recruit-job-degital .btn {
      margin-inline: auto;
    }
  }
  @media screen and (max-width: 767px) {
    .recruit-job-degital {
      padding-top: 40px;
      overflow: hidden;
    }
    .recruit-job-degital .catch {
      margin-bottom: 24px;
      font-size: 26px;
    }
    .recruit-job-degital .ttl {
      display: block;
      font-size: 22px;
    }
    .recruit-job-degital .ttl::after {
      display: block;
      margin-top: 8px;
      width: 100%;
    }
    .recruit-job-degital .subttl {
      font-size: 18px;
    }
    .recruit-job-degital .txt-lg {
      font-size: 14px;
      line-height: 1.65;
    }
  }

  /* --- recruit-job-career_pass --- */
  .recruit-job-career_pass {
    padding-top: 100px;
    padding-bottom: 240px;
  }

  /* --- recruit-job-link --- */
  .recruit-job-link .box_list a {
    padding-top: 74.865%;
  }
  .recruit-job-link .box_list--list01::before {
    background-image: url(../images/recruit/recruit-job-link01.jpg);
  }
  .recruit-job-link .box_list--list02::before {
    background-image: url(../images/recruit/recruit-job-link02.jpg);
  }

  @media screen and (max-width: 1600px) {
    /* --- recruit-job-link --- */
    .recruit-job-link .box_list a {
      padding-top: 50%;
    }
  }
  @media screen and (max-width: 767px) {
    /* --- recruit-job-career_pass --- */
    .recruit-job-career_pass {
      padding-top: 70px;
      padding-bottom: 120px;
    }
  }

/* contact
*************************************************** */
  .contact--tel {
    margin-bottom: 24px;
  }
  .contact--tel .tel_txt {
    font-size: 200%;
  }
   
  @media screen and  (max-width: 767px) {
    .contact--txt.txt-ctr {
      text-align: left;
    }
  }

/* 404
*************************************************** */
  .page-404 .content-404 p {
    margin-bottom: 40px;
    font-size: 115%;
  }
  @media screen and  (max-width: 767px) {
    .page-404 .content-404 p {
      margin-bottom: 24px;
      font-size: 100%;
    }
  }


/* ##############################################################################

    ARCHIVE

############################################################################## */
  
/* main_column
**************************************** */
  .main_column {
    flex: 1;
    margin-right: 80px;
  }

  /* --- post --- */
  .post { position: relative; }
  .post--link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .post--date {
    color: #aaa;
    font-size: 86%;
  }
  .post--info span:not(:last-child)::after {
    content: '／';
    margin-left: .2em;
    margin-right: -.2em;
  }
  .cat_list {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: hidden;
  }
  .cat_list a,
  .cat_list span {
    position: relative;
    z-index: 1;
    display: inline-block;
    float: left;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 6px 24px;
    min-width: 120px;
    font-size: 79%;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #add8e6;
  }
  .post--img {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    padding-top: 70%;
    overflow: hidden;
    background-color: #add8e6;
    background-position: center;
    background-size: cover;
  }
/*  .post--img::before {
    /*content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    display: block;
    width: 30%;
    padding-top: 26%;
    background: url(../images/common/logo-sm-wh.svg);
    background-size: cover;
    opacity: .5;
    transform: translate(-50%, -50%);
    transition: .4s ease-in-out;
  }*/
  .post--img .img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .post--img .no-image {
    background-image: url(../images/common/logo-sm-wh.svg);
    background-size: auto 50%;
    opacity: .5;
  }
  .post:hover .post--img::before,
  .post:hover .post--img .img {
    transform: scale(1.05);
  }

  @media screen and (max-width: 1140px) {
    .main_column {
      width: 100%;
      margin-right: 0;
      margin-bottom: 80px;
    }
  }
  @media screen and (max-width: 767px) {
    .single-news .cat_list {
      justify-content: flex-start;
    }
  }

/* side_column
**************************************** */
  .side_column {
    position: relative;
    width: 264px;
  }
  .side_column a { display: block; }
  .side_section:not(:last-child) { margin-bottom: 64px; }
  .side--ttl {
    margin-bottom: 24px;
    color: #0f66e7;
    font-size: 160%;
    letter-spacing: .26em;
    line-height: 1;
  }
  .side--ttl::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 24px;
    background-color: #00bfff;
  }
  .side--ttl small {
    display: block;
    margin-top: 16px;
    color: #444;
    font-size: 50%;
    line-height: 1;
    letter-spacing: .15em;
    opacity: .5;
  }

  /* --- post --- */
  .posts-side .post:not(:last-child) { margin-bottom: 16px; }
  .posts-side .post--img {
    position: relative;
    z-index: 0;
    margin-right: 16px;
    border-radius: 3px;
    width: 64px;
    height: 64px;
    padding-top: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .posts-side .post--img::before {
    width: 50%;
    padding-top: 44%;
  }
  .posts-side .txtarea { flex: 1; }
  .posts-side .post--date { margin-bottom: 0; }
  .posts-side .post--ttl { line-height: 1.4; }

  /* --- side--list --- */
  .side--list a {
    position: relative;
    padding-left: 24px;
  }
  .side--list a:hover {
    opacity: .5;
  }
  .side--list a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 16px;
    height: 1px;
    border-bottom: 1px solid #0f66e7;
  }
  .side--link_list a {
    padding-left: 3.5em;
  }
  .side--link_list a::before {
    left: 2em;
    width: 10px;
    height: 10px;
    margin-top: -10px;
    border-left: 1px solid #0f66e7;
  }

  /* --- archive --- */
  .side_column .archive_list--ttl {
    margin-bottom: 4px;
    cursor: pointer;
  }
  .side_column .archive_list--ttl::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-top: 1px solid;
    border-right: 1px solid;
    transform: translateY(-2px) rotate(135deg);
    transition: .4s ease-out;
  }
  .side_column .archive_list--ttl.active::after { transform: translateY(2px) rotate(-45deg); }
  .side_column .archive_month { display: none; }

  @media screen and (max-width: 1100px) {
    .side_column { width: 100%; }
  }

  /* --- archive-pulldown --- */
  .archive-pulldown {
    position: relative;
    margin-left: auto;
    z-index: 1;
  }
  .archive-pulldown .archive_list {
    position: relative;
    font-size: 92%;
  }
  .archive-pulldown .archive_list:not(:last-child) { margin-right: 24px; }
  .archive-pulldown .archive_list a {
    display: block;
    padding: 2px 16px;
    text-align: left;
  }
  .archive-pulldown .archive_list a:not(:last-child) { border-bottom: 1px solid #eee; }
  .archive-pulldown .archive_list--label { margin-right: 8px; }
  .archive-pulldown .archive_list--btn {
    cursor: pointer;
    border: none;
    outline: none;
    appearance: none;
    padding: 8px 54px 8px 32px;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .archive-pulldown .archive_list--btn::after {
    content: '';
    position: absolute;
    top: 9px;
    right: 10px;
    display: block;
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg);
    transition: .2s ease-out;
    transform-origin: 50% 50%;
  }
  .archive-pulldown .active .archive_list--btn::after {
    top: 14px;
    transform: rotate(225deg);
  }
  .archive-pulldown .archive_list--menu {
    position: absolute;
    z-index: 1;
    width: 100%;
    background-color: #fff;
    border: 1px solid #ccc;
    visibility: hidden;
    opacity: 0;
    transition: .2s ease-out;
  }
  .archive-pulldown .active .archive_list--menu {
    visibility: visible;
    opacity: 1;
  }

/* posts-news
*************************************************** */
  .posts-news .post--ttl {
    line-height: 1.73;
  }
  .posts-news .cat_list a {
    width: 120px;
    margin-right: 0;
    font-size: 86%;
    letter-spacing: .12em;
    background-color: #eee;
    border-radius: 2px;
  }
  .posts-news .post:nth-child(2n) .cat_list a {
    background-color: #add8e6;
  }
  .home .posts-news .post {
    width: calc(20% - 32px);
  }
  .home .posts-news .post:not(:last-child) {
    margin-right: 40px;
  }
  .home .posts-news .post--img {
    width: 100%;
    padding-top: 70%;
    margin-bottom: 16px;
  }
  .archive .posts-news .post {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }
  .archive .posts-news .post:not(:last-child) {
    margin-bottom: 4px;
  }
  .archive .posts-news .post--ttl {
    font-size: 133%;
  }
  .archive .posts-news .post--txtarea {
    flex: 1;
    background-color: #fff;
    padding: 54px;
  }
  .archive .posts-news .post--img {
    width: 280px;
    padding-top: 0;
    background-position: center;
    background-size: cover;
  }
  @media screen and (max-width: 1400px) {
    .home .posts-news .post {
      width: calc(25% - 30px);
    }
    .home .posts-news .post:nth-child(4n) {
      margin-right: 0;
    }
    .home .posts-news .post:nth-child(n+5) {
      display: none;
    }
  }
  @media screen and (max-width: 1140px) {
    .home .posts-news .post {
      width: calc(33.33% - 26.666px);
    }
    .home .posts-news .post:nth-child(3n) {
      margin-right: 0;
    }
    .home .posts-news .post:nth-child(n+4) {
      display: none;
    }
  }
  @media screen and (max-width: 767px) {
    .home_news > .inner {
      padding-left: 0;
      padding-right: 0;
    }
    .home .posts-news .post {
      width: 100%;
      padding-bottom: 16px;
    }
    .archive .posts-news .post {
      flex-direction: column;
    }
    .archive .posts-news .post--img {
      width: 100%;
      padding-top: 70%;
    }
    .archive .posts-news .post--txtarea {
      padding: 24px 32px;
    }
    .archive .posts-news .post:not(:last-child) {
      margin-bottom: 16px;
    }
  }

/* posts-works
*************************************************** */
  .slide-works .post {
    margin-right: 5px;
    max-width: 417px;
  }
  .posts-works .post {
    position: relative;
    z-index: 0;
  }
  .posts-works .post--img {
    position: relative;
    margin-bottom: 4px;
    overflow: hidden;
  }
  .posts-works .post--img::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: all .5s ease-in-out;
  }
  .posts-works a {
    color: #fff;
  }
  .posts-works h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 1px;
    margin-top: 16px;
    margin-left: auto;
    margin-right: auto;
    background-color: #add8e6;
  }
  .posts-works .post--txtarea {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 40px;
    transition: all .5s ease-in-out;
    transition-delay: 0s;
    opacity: 0;
    line-height: 1.5;
  }
  .posts-works .post--txtarea small {
    letter-spacing: .22em;
  }
  .posts-works .post:hover .post--img::after {
    background-color: rgba(0, 0, 0, .7);
  }
  .home .posts-works .post {
    pointer-events: none;
  }

  /* --- modal --- */
  .modal--wrap {
    display: none;
  }
  #modal {
    width: 100%;
    height: 100%;
    padding: 40px;
    overflow-y: auto;
  }
  #modal::-webkit-scrollbar {
    width: 6px;
  }
  #modal::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 5px;
  }
  #modal::-webkit-scrollbar-track-piece {
    background-color: #efefef;
  }

  /* hover */
  @media screen and (min-width: 768px) {
    .posts-works .post:hover .post--txtarea {
      opacity: 1;
      transition-delay: .3s;
    }
  }
  @media screen and (max-width: 767px) {
    .posts-works .post--txtarea {
      display: none;
    }

    /* --- modal --- */
    #modal {
      padding: 24px;
    }
  }

/* posts-requirements
*************************************************** */
  .posts-requirements .post--txtarea {
    padding-bottom: 32px;
  }

/* posts-interview
*************************************************** */
  .posts-interview .post {
    position: relative;
    z-index: 0;
    max-width: 557px;
    margin-right: 3px;
  }
  .posts-interview .post--img {
    width: 100%;
    padding-top: 78.9%;
  }
  .archive .posts-interview .post {
    width: calc(33.33% - 2px);
  }
  .archive .posts-interview .post:nth-child(3n) {
    margin-right: 0;
  }
  .requirements--nav li {
    margin-bottom: 8px;
  }
  .requirements--nav li:not(:last-child) {
    margin-right: 8px;
  }
  .requirements--nav-link {
    display: block;
    padding: 0 24px;
    font-size: 120%;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #add8e6;
  }
  .requirements--nav-link:hover,
  .current .requirements--nav-link {
    background-color: #add8e6;
  }

  @media screen and (max-width: 767px) {
    .archive .posts-interview .post {
      width: 100%;
      margin-right: 0;
    }
    .requirements--nav li,
    .requirements--nav li:not(:last-child) {
      width: calc(50% - 2px);
      margin-right: 4px;
      margin-bottom: 4px;
    }
    .requirements--nav li:nth-child(2n+1) {
      margin-right: 0;
    }
    .requirements--nav li.all {
      width: 100%;
    }
    .requirements--nav-link {
      width: 100%;
      padding: 0 16px;
      font-size: 110%;
    }
  }


/* ##############################################################################

    SINGLE

############################################################################## */

/* single news
**************************************** */
  .news--info {
    padding: 56px;
    background-color: #fff;
  }
  @media screen and (max-width: 767px) {
    .news--info {
      padding: 24px;
    }
  }

/* single interview
**************************************** */
  .interview--info .heading-2 {
    position: relative;
    padding-left: 80px;
  }
  .interview--info .heading-2::before {
    content: '';
    position: absolute;
    top: .7em;
    left: 0;
    display: block;
    width: 70px;
    height: 1px;
    background-color: #555;
  }
  @media screen and (max-width: 767px) {
    .interview--profile {
      font-size: 90%;
    }
    .interview--info .heading-2 {
      padding-left: 0;
    }
    .interview--info .heading-2::before {
      display: none;
    }
  }

/* wp-pagenavi
**************************************** */
  .wp-pagenavi {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
  }
  .wp-pagenavi .pages {
    display: none;
  }
  .wp-pagenavi .current,
  .wp-pagenavi a {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 8px;
    max-width: 42%;
    width: 48px;
    height: 48px;
    color: #fff;
    font-size: 120%;
    line-height: 2.7;
    text-align: center;
    overflow: hidden;
    vertical-align: top;
    text-overflow: ellipsis;
    border-radius: 50%;
    background-color: #0f66e7;
  }
  .wp-pagenavi a:hover,
  .wp-pagenavi .current {
    color: #0f66e7;
    background-color: #add8e6;
  }
  .single-requirements .wp-pagenavi .current,
  .single-requirements .wp-pagenavi a {
    width: auto;
    border-radius: 5px;
    padding: 0 24px;
  }

/* pass
**************************************** */
  .single .pass {
    width: 100%;
  }
  .single .pass p:first-child {
    margin-bottom: 16px;
  }

  @media screen and (max-width: 767px) {
    .single .pass p:first-child {
      text-align: left;
    }
  }


/* ##############################################################################

    FORMY

############################################################################## */
  #formy_form table { width:100%; }
  #formy_form th,
  #formy_form td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: solid 1px #eee;
  }
  #formy_form th {
    font-weight: normal;
    white-space: nowrap;
    text-align: left;
    width: 34%;
  }
  #formy_form table input[type="text"],
  #formy_form table input[type="email"],
  #formy_form table input[type="tel"],
  #formy_form table input[type="date"],
  #formy_form table input[type="password"],
  #formy_form table textarea {
    width: 100%;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    vertical-align: bottom;
  }
  #formy_form table input[type="text"],
  #formy_form table input[type="email"],
  #formy_form table input[type="tel"],
  #formy_form table input[type="date"],
  #formy_form table input[type="password"],
  #formy_form select,
  #formy_form textarea {
    margin: 0;
    padding: 5px 15px;
    border: 1px solid #ccc;
    font: inherit;
    font-size: 100%;
  }
  #formy_form textarea { height: 100px; }
  #formy_form select { height: 40px; }
  #formy_form ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #formy_form input:hover { opacity: .7; }
  #formy_form textarea:hover { opacity: .7; }
  #formy_form input:focus { outline: none; }
  #formy_form .parsley-validated {  background-color: #eee; }
  #formy_form .parsley-error {  background-color: #fee; }
  #formy_form .parsley-success {  background-color: #fff; }
  .help_text {
    font-size: 87%;
    color: #999;
  }
  .hidden_help { display: none; }
  .formy_privacy div {
    overflow-y: scroll;
    height: 140px;
    border: solid 1px #ccc;
    font-size: 87%;
    padding: 8px 16px;
  }
  .requiredIcon {
    background-color: #ff6600;
    color: #fff;
    margin: 0 0 0 1em;
    font-size: 70%;
    padding: 2px 5px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    float: right;
  }
  #formy_btn {
    padding-top: 32px;
    text-align: center;
  }
  #formy_btn input {
    min-width: 220px;
    padding: 16px 32px;
    margin-right: 4px;
    margin-left: 4px;
    border: none;
    border-radius: 3px;
    color: #fff;
    font-size: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  #formy_form ul li input[type="radio"],
  #formy_form ul li input[type="checkbox"] { display: none !important; }
  #formy_form ul li label {
    height: 40px;
    line-height: 40px;
    display: inline-block;
    vertical-align: top;
    position: relative;
    padding: 0 8px 0 40px;
    cursor: pointer;
  }
  #formy_form ul li label:hover { opacity: .7; }
  #formy_form ul li label::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #788b93;
    left: 16px;
    top: 12px;
  }
  #formy_form ul li input[type="radio"] + label::before { border-radius: 10px; }
  #formy_form ul li input[type="radio"]:checked + label,
  #formy_form ul li input[type="checkbox"]:checked + label {
    color: #e75f5f;
    font-weight: bold;
  }
  #formy_form ul li input[type="radio"]:checked + label::before,
  #formy_form ul li input[type="checkbox"]:checked + label::before {
    border-color: #e75f5f;
  }
  #formy_form ul li input[type="radio"]:checked + label::after,
  #formy_form ul li input[type="checkbox"]:checked + label::after {
    content: "";
    width: 10px;
    height: 18px;
    top: 4px;
    left: 20px;
    border-right: 2px solid #e75f5f;
    border-bottom: 2px solid #e75f5f;
    display: block;
    position: absolute;
    z-index: 10;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .formy_confirm { background-color: #0056d7; }
  .formy_submit_disabled { background-color: #ccc; }
  #formy_btn .formy_submit_disabled:hover {
    opacity:1;
    cursor: default;
  }
  .autoConfirmBack { background-color: #aaa; }
  .formy_send { background-color: #ff6600; }
  #total_required {
    padding: 16px;
    color: #ff9426;
    text-align: center;
  }
  @media screen and (max-width: 767px) {
    #formy_form th,
    #formy_form td {
      display: block;
      width: auto;
      padding-left: 0;
      padding-right: 0;
    }
    #formy_form th {
      border-bottom:none;
      padding-bottom: 0;
      white-space: normal;
      font-weight: bold;
    }
    #formy_form td { padding-top: 0; }
    #formy_btn { padding-top: 8px; }
    #formy_btn input {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
      background-size: contain;
      background-position: center;
    }
    .autoConfirmBack { margin-bottom: 8px; }
    #formy_form table input[type="text"],
    #formy_form table input[type="email"],
    #formy_form table input[type="tel"],
    #formy_form table input[type="date"],
    #formy_form table input[type="password"],
    #formy_form select,
    #formy_form textarea {
      font-size: 16px; /* iOSでズーム防止 */
    }
  }