@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
html,
body {
    width: 100%;
    height: 100%
}
/*_:lang(x)::-ms-backdrop, body {
    font-family: "Segoe UI", Meiryo, sans-serif;
}*/

@media screen and (min-width:768px) {
    body {
        line-height: 1.5;
        font-size: 1.8rem
    }
}

img {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    font-size: 0
}
@media screen and (min-width:768px) {
    img {
        width: auto;
        max-width: 100%;
    }
}

svg {
    width: 100%;
    height: 100%;
}
figure {
    display: block;
    margin: 0
}
picture {
    display: block;
    margin: 0
}
ul,
li {
    list-style: none
}
a, a:link a:visited {
    /*width: 100%;
    height: 100%;*/
    color: #303030;
    word-break: break-word;
    text-decoration: none;
}
a:hover {
    /*transition: color .1s ease, opacity .1s ease, background .1s ease;*/
}
h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 700;
    font-size: 2.2rem
}
p {
    line-height: 1.6;
}
input,
textarea,
select {
    font-family:inherit;
    font-size:inherit;
    font-weight:inherit;
    border: none;
    outline: none;
    color: #2E2E2E;
}
/*to enable resizing for IE*/
input,
textarea,
select {
  *font-size:100%;
}

/* Fonts
---------------------------------------*/
.local_header, .page_container {
    line-height: 1.4;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 1.6rem;
    color: #303030;
}
@media screen and (min-width : 769px) {
    .local_header, .page_container {
        font-size: 1.8rem;
    }
}

/* Basic Modules
---------------------------------------*/
/* Margin SP */
@media screen and (max-width : 768px) {
    .mt0 { margin-top: 0!important }
    .mt-5 { margin-top: .5rem!important }
    .mt1 { margin-top: 1rem!important }
    .mt1-5 { margin-top: 1.5rem!important }
    .mt2 { margin-top: 2rem!important }
    .mt3 { margin-top: 3rem!important }
    .mt4 { margin-top: calc(4rem/2)!important }
    .mt5 { margin-top: calc(5rem/2)!important }
    .mt6 { margin-top: calc(6rem/2)!important }
    .mt7 { margin-top: calc(7rem/2)!important }
    .mt8 { margin-top: calc(8rem/2)!important }
    .mt9 { margin-top: calc(9rem/2)!important }
    .mt10 { margin-top: calc(10rem/2)!important }
    .mt11 { margin-top: calc(11rem/2)!important }
    .mt15 { margin-top: calc(15rem/2)!important }

    .mb0 { margin-bottom: 0!important }
    .mb1 { margin-bottom: 1rem!important }
    .mb2 { margin-bottom: 2rem!important }
    .mb3 { margin-bottom: 3rem!important }
    .mb4 { margin-bottom: calc(4rem/2)!important }
    .mb5 { margin-bottom: calc(5rem/2)!important }
    .mb6 { margin-bottom: calc(6rem/2)!important }
    .mb7 { margin-bottom: calc(7rem/2)!important }
    .mb8 { margin-bottom: calc(8rem/2)!important }
    .mb9 { margin-bottom: calc(9rem/2)!important }
    .mb10 { margin-bottom: calc(10rem/2)!important }
    .mb15 { margin-bottom: calc(15rem/2)!important }

    .ml0 { margin-left: 0!important }
    .ml1 { margin-left: 1rem!important }
    .ml2 { margin-left: 2rem!important }
    .ml3 { margin-left: 3rem!important }
    .ml4 { margin-left: calc(4rem/2)!important }

    .mr0 { margin-right: 0!important }
    .mr1 { margin-right: 1rem!important }
    .mr2 { margin-right: 2rem!important }
    .mr4 { margin-right: calc(4rem/2)!important }

    /* Padding */
    .pt0 { padding-top: 0!important }
    .pt1 { padding-top: 1rem!important }
    .pt2 { padding-top: 2rem!important }
    .pt3 { padding-top: 3rem!important }
    .pt4 { padding-top: calc(4rem/2)!important }
    .pt5 { padding-top: calc(5rem/2)!important }
    .pt6 { padding-top: calc(6rem/2)!important }
    .pt7 { padding-top: calc(7rem/2)!important }
    .pt8 { padding-top: calc(8rem/2)!important }
    .pt9 { padding-top: calc(9rem/2)!important }
    .pt10 { padding-top: calc(10rem/2)!important }
    .pt15 { padding-top: calc(15rem/2)!important }

    .pb0 { padding-bottom: 0!important }
    .pb1 { padding-bottom: 1rem!important }
    .pb2 { padding-bottom: 2rem!important }
    .pb3 { padding-bottom: 3rem!important }
    .pb4 { padding-bottom: calc(4rem/2)!important }
    .pb5 { padding-bottom: calc(5rem/2)!important }
    .pb6 { padding-bottom: calc(6rem/2)!important }
    .pb7 { padding-bottom: calc(7rem/2)!important }
    .pb8 { padding-bottom: calc(8rem/2)!important }
    .pb9 { padding-bottom: calc(9rem/2)!important }
    .pb10 { padding-bottom: calc(10rem/2)!important }
    .pb15 { padding-bottom: calc(15rem/2)!important }

    .pl0 { padding-left: 0!important }
    .pr0 { padding-right: 0!important }
}

/* Margin PC */
@media screen and (min-width : 769px) {
    .mt0 { margin-top: 0!important }
    .mt1 { margin-top: 1rem!important }
    .mt1-5 { margin-top: 1.5rem!important }
    .mt2 { margin-top: 2rem!important }
    .mt3 { margin-top: 3rem!important }
    .mt4 { margin-top: 4rem!important }
    .mt5 { margin-top: 5rem!important }
    .mt6 { margin-top: 6rem!important }
    .mt7 { margin-top: 7rem!important }
    .mt8 { margin-top: 8rem!important }
    .mt9 { margin-top: 9rem!important }
    .mt10 { margin-top: 10rem!important }
    .mt11 { margin-top: 11rem!important }
    .mt15 { margin-top: 15rem!important }

    .mb0 { margin-bottom: 0!important }
    .mb1 { margin-bottom: 1rem!important }
    .mb2 { margin-bottom: 2rem!important }
    .mb3 { margin-bottom: 3rem!important }
    .mb4 { margin-bottom: 4rem!important }
    .mb5 { margin-bottom: 5rem!important }
    .mb6 { margin-bottom: 6rem!important }
    .mb7 { margin-bottom: 7rem!important }
    .mb8 { margin-bottom: 8rem!important }
    .mb9 { margin-bottom: 9rem!important }
    .mb10 { margin-bottom: 10rem!important }
    .mb15 { margin-bottom: 15rem!important }

    .ml0 { margin-left: 0!important }
    .ml1 { margin-left: 1rem!important }
    .ml2 { margin-left: 2rem!important }
    .ml3 { margin-left: 3rem!important }
    .ml4 { margin-left: 4rem!important }

    .mr0 { margin-right: 0!important }
    .mr1 { margin-right: 1rem!important }
    .mr2 { margin-right: 2rem!important }
    .mr4 { margin-right: 4rem!important }

    /* Padding */
    .pt0 { padding-top: 0!important }
    .pt1 { padding-top: 1rem!important }
    .pt2 { padding-top: 2rem!important }
    .pt3 { padding-top: 3rem!important }
    .pt4 { padding-top: 4rem!important }
    .pt5 { padding-top: 5rem!important }
    .pt6 { padding-top: 6rem!important }
    .pt7 { padding-top: 7rem!important }
    .pt8 { padding-top: 8rem!important }
    .pt9 { padding-top: 9rem!important }
    .pt10 { padding-top: 10rem!important }
    .pt15 { padding-top: 15rem!important }

    .pb0 { padding-bottom: 0!important }
    .pb1 { padding-bottom: 1rem!important }
    .pb2 { padding-bottom: 2rem!important }
    .pb3 { padding-bottom: 3rem!important }
    .pb4 { padding-bottom: 4rem!important }
    .pb5 { padding-bottom: 5rem!important }
    .pb6 { padding-bottom: 6rem!important }
    .pb7 { padding-bottom: 7rem!important }
    .pb8 { padding-bottom: 8rem!important }
    .pb9 { padding-bottom: 9rem!important }
    .pb10 { padding-bottom: 10rem!important }
    .pb15 { padding-bottom: 15rem!important }

    .pl0 { padding-left: 0!important }
    .pr0 { padding-right: 0!important }
}

.mla { margin-left: auto; }
.mra { margin-right: auto; }

/* inner */
.inner {
    margin: 0 auto;
    padding: 0 6vw;
    width: 100%;
    max-width: 1220px;
}
@media screen and (min-width:768px) {
    .inner {
        padding: 0 3.4rem;
    }
}
@media screen and (min-width:1600px) {
    .inner {
        padding: 0;
    }
}

/* row */
.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.aic { align-items: center!important; }
.ais { align-items: flex-start!important; }
.aie { align-items: flex-end!important; }

.jcsb { justify-content: space-between!important; }
.jcs { justify-content: flex-start!important; }
.jce { justify-content: flex-end!important; }


/* Text-align */
.tal { text-align: left !important }
.tar { text-align: right !important }
.tac { text-align: center !important }
.tac > img {
    margin-left: auto;
    margin-right: auto;
}
.tac-pc { text-align: left !important }
@media screen and (min-width : 769px) {
    .tac-pc { text-align: center !important }
}

/* Vergical-align */
.vat { vertical-align: top !important }
.vab { vertical-align: bottom !important }
.vam { vertical-align: middle !important }

/* responsive */
.sp { display: block!important; }
.pc { display: none!important; }
.sp-dib { display: inline-block!important; }
.pc-dib { display: none!important; }
.dib { display: inline-block!important; }
@media screen and (min-width : 769px) {
    .sp { display: none!important; }
    .pc { display: block!important; }
    .sp-dib { display: none!important; }
    .pc-dib { display: inline-block!important; }
    .dib { display: inline-block!important; }
}

/* Tel
---------------------------------------*/
@media(min-width: 768px){
  a[href^="tel:"]{
    pointer-events: none;
    color: #2E2E2E;
    text-decoration: none;
  }
}

/* Text
---------------------------------------*/
.bold_txt {
    font-weight: 700;
}
.line_txt {
    display: inline-block;
    border-bottom: solid 2px #8CD1FF;
}
.blue_txt {
    color: #0099FF;
}

/* Animation
---------------------------------------*/
/* Scroll Animation ふわっと */
.sca_fadein {
    opacity: 0;
    transition: opacity .5s ease, transform .5s ease;
    animation-delay: .2s;
}
.sca_fadein.is-animated {
    opacity: 1;
}

/* Scroll Animation ふわっと下から上に */
.sca_fadein_up {
    opacity: 0;
    transition: opacity .8s ease, transform .8s ease;
    animation-delay: .2s;
    transform: translateY(40px);
}
.sca_fadein_up.is-animated {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll Animation 文字の背景色が動く */
.sca_txt_bg .bg_wrap {
    position: relative;
    display: inline-block;
    margin-top: 5px;
}
.sca_txt_bg.is-animated .bg_wrap::before {
    animation: txtBg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: .1s;
    background: #fff;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(0)
}
.sca_txt_bg.is-animated .bg_wrap:nth-of-type(2):before {
    animation-delay: .4s;
}
.sca_txt_bg.is-animated .bg_wrap:nth-of-type(3):before {
    animation-delay: .7s;
}
.sca_txt_bg .bg_wrap .inn {
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    z-index: 1;
}
  
@keyframes txtBg {
    0% {
      opacity: 0;
      transform: scaleX(0) translateX(-5%);
    }
    30% {
      transform: scaleX(1) translateX(0);
    }
    100% {
      transform: scaleX(1) translateX(0);
    }
    30%, 100% {
      opacity: 1;
    }
}

/* Scroll Animation 文字の下線が動く */
.sca_txt_line .line_wrap {
    position: relative;
    display: inline-block;
}
.sca_txt_line.is-animated .line_wrap::before {
    animation: txtBg 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: .4s;
    background: #8CD1FF;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform-origin: left center;
    transform: scaleX(0)
}
.sca_txt_line .line_wrap .inn {
    display: inline-block;
    padding: 0 0 3px;
    position: relative;
    z-index: 1;
}
.sca_txt_line.is-animated .line_wrap:nth-of-type(2):before {
    animation-delay: .7s;
}
.sca_txt_line.is-animated .line_wrap:nth-of-type(3):before {
    animation-delay: 1s;
}

@keyframes txtLine {
    0% {
      opacity: 0;
      transform: scaleX(0) translateX(-5%);
    }
    30% {
      transform: scaleX(1) translateX(0);
    }
    100% {
      transform: scaleX(1) translateX(0);
    }
    30%, 100% {
      opacity: 1;
    }
}

/* Scroll Animation 弾んで表示 */
.sca_pop {
    transform: scale(0.8);
}
.sca_pop.is-animated {
    transition: transform .8s ease;
    animation: pop .8s cubic-bezier(.4,.04,.73,1) forwards;
}
@keyframes pop {
    0% {
        transform: scale(0.8);
    }
    70% {
        transform: scale(1.15);
    }
    /* 80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.05);
    } */
    100% {
        transform: scale(1);
    }
}


/* library */
@keyframes fadein {
  0% {
      opacity: 0;
  }

  100% {
      opacity: 1;
  }
}

@keyframes fadeinUp {
    0% {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity .5s ease-in, transform .5s ease-in;
    }
  
    100% {
      opacity: 1;
      transform: translateY(0);
    }
}

@keyframes leftToRight {
    0%      { left: -100%; }
    100%    { left: 0; }
}
@keyframes bottomToTop {
    0%      { bottom: -100%; }
    100%    { bottom: 0; }
}


@media screen and (min-width : 769px) {
    .header_logo {
        opacity: 0;
        animation-name: fadein;
        animation-duration: 1.2s;
        animation-delay: 0;
        animation-fill-mode: forwards;
    }
    .header_nav {
        opacity: 0;
        animation-name: fadein;
        animation-duration: 1.2s;
        animation-delay: 0;
        animation-fill-mode: forwards;
    }
}

/* wrapper
---------------------------------------*/
.wrapper {
    position: relative;
    /*padding-top: 53px; ヘッダー高さ */
    opacity: 0;
    animation-name: fadein;
    animation-duration: 1.2s;
    animation-delay: 0;
    animation-fill-mode: forwards;
    background: #FAFAFA;
}
@media screen and (max-width : 768px) {
    .wrapper {
        padding-top: 56px; /* ヘッダー高さ */
    }
}

/* 椿本チエインサイト共通部分の調整
---------------------------------------*/
.c-header-btn-menu {
    display: none;
}

@media screen and (max-width : 768px) {
    .c-header-util .link-lang {
     right: 52px;   
    }
}

.c-header-lower, .item-lang {
    display: none;
}

.c-breadcrumb {
    margin: 0;
    padding-left: 3rem;
    padding-right: 3rem;
}
.c-breadcrumb > ul {
    max-width: 100%; 
}

@media screen and (max-width : 768px) {
    .c-breadcrumb {
        display: none;
    }
}

.c-product-box {
    margin: 0;
}

@media screen and (max-width : 768px) {
    .l-wrapper {
        padding-top: 56px
    }
} 

.p-wrap-banner-product, .c-nav-footer {
    display: none;
}

/* local_header, nav
---------------------------------------*/
.local_header {
    background: #FAFAFA;
    width: 100%;
}

#js_local_header.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
}

/* SP */
@media screen and (max-width : 768px) {
    .local_header {
        position: relative;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
        height: 60px;
        z-index: 2;
    }
    .local_header_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1.5rem;
        height: 100%;
    }
    .local_header_ttl {
        flex: 1 1 40%;
        font-size: 1.6rem;
        font-weight: 700;
    }

    .local_nav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #303030;
        font-size: 1.8rem;
        font-weight: 500;
        padding: 3vh 12vw 2vh;
        height: calc(100vh - 56px - 60px);
        overflow-y: auto;
    }
    .local_nav_main_list_item a {
        color: #FFF;
    }

    .local_nav_sub_list_item .tmb {
        display: none;
    }
    .local_nav_sub_ttl_en,
    .local_nav_sub_ttl {
        display: none;
    }
    
    .local_nav_main_list_item {
        margin: 1.2vh 0;
    }
    .local_nav_main_list_item .cate_item {
        color: #D9D9D9;
        font-size: 1.4rem;
        font-weight: 400;
    }
    .local_nav_main_list_item .page_item {
        font-size: 1.6rem;
        font-weight: 500;
        position: relative;
        padding: 0 0 0 1.2rem;
    }
    .local_nav_main_list_item .page_item::before {
        content: '';
        display: block;
        width: .5rem;
        height: 1px;
        background-color: #D9D9D9;
        position: absolute;
        top: 1.1rem;
        left: 0;
    }
    .local_nav_sub {
        margin: .5vh 0 2.2vh;
    }
    .local_nav_sub_list_item {
        margin: .5vh 0 .5vh;
    }

    .local_nav_main_list_item.entry {
        flex: 0 1 19rem;
        margin: 3vh 0 1rem;
    }
    .local_nav_main_list_item.entry a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 1.5rem 2rem;
        background: #0099FF;
        color: #FFF;
        font-family: "Open Sans";
        font-size: 1.8rem;
        font-weight: 700;
    }

    /* menu_btn */
    .local_nav_menu_btn {
        display: none;
      }
      
      @media all and (max-width: 1160px) {
        .local_nav_menu_btn {
          position: relative;
          display: block;
          width: 32px;
          height: 32px;
          margin-left: 5px;
          border-radius: 5px;
          border: 1px solid #0099FF;
          background-color: #fff;
          cursor: pointer;
        }
      }
      
      .local_nav_menu_btn span {
        position: absolute;
        top: 9px;
        left: 6px;
        width: 18px;
        height: 2px;
        background-color: #0099FF;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
      }
      
      .local_nav_menu_btn span:nth-child(2) {
        top: 14px;
        opacity: 0;
      }
      
      .local_nav_menu_btn span:nth-child(3) {
        top: 14px;
      }
      
      .local_nav_menu_btn span:nth-child(4) {
        top: 19px;
      }
      
      .local_nav_menu_btn.is-open {
        background-color: #0099FF;
      }
      
      .local_nav_menu_btn.is-open > span {
        background-color: #fff;
      }
      
      .local_nav_menu_btn.is-open > span:nth-child(1) {
        width: 0%;
        left: 50%;
      }
      
      .local_nav_menu_btn.is-open > span:nth-child(2) {
        opacity: 1;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }
      
      .local_nav_menu_btn.is-open > span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
      
      .local_nav_menu_btn.is-open > span:nth-child(4) {
        left: 50%;
        width: 0;
      }
      
      
    /* メニュー開閉 */
    #js_nav {
        opacity: 0;
        z-index: -1;
        visibility: hidden;
    }
    #js_nav.is-open {
        opacity: 1;
        z-index: 99;
        visibility: visible;
    }
    #js_nav.is-sp {
        transition: opacity .3s ease, z-index .3s ease, visibility .3s ease;
    }
    body.is-stop {
        overflow: hidden;
    }
}

/* PC */
@media screen and (min-width : 769px) {
    .local_header {
        position: relative;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
    }
    .local_header_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0 0 5rem;
        gap: 3rem;
    }
    .local_header_ttl {
        flex: 1 1 35%;
        font-size: 2.0rem;
        font-weight: 700;
        max-width: 400px;
        min-width: 270px;
    }
    .local_nav {
        flex: 0 1 65%;
        margin-left: auto;
        height: 80px;
    }
    .local_nav_main_list {
        display: flex;
        justify-content: flex-end;
        height: 100%;
    }
    .local_nav_main_list_item {
        flex: 0 1 25%;
        padding: 0;
    }
    .local_nav_main_list_item .cate_item {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        font-weight: 500;
        padding: 0 1.5rem;
        text-align: center;
        height: 100%;
        position: relative;
        transition: color .25s ease-out;
    }
    .local_nav_main_list_item span.cate_item {
        cursor: default;
    }
    /* 区切り縦線 */
    .local_nav_main_list_item:not(.entry) .cate_item:before {
        content: '';
        display: block;
        width: 1px;
        height: 1.5rem;
        background-color: #C4C4C4;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
    .local_nav_main_list_item:first-of-type .cate_item:before {
        display: none;
    }
    /* hover・下線 */
    .local_nav_main_list_item .cate_item > span {
        position: relative;
        z-index: 2;
    }
    .local_nav_main_list_item .cate_item:hover {
        color: #0099FF;
    }
    .local_nav_main_list_item .cate_item::after {/* 青い下線 */
        content: '';
        display: block;
        width: 100%;
        height: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #0099FF;
        transition: all .1s ease-out;
    }
    .local_nav_main_list_item .cate_item:hover:after {
        height: 6px;
    }
    .local_nav_main_list_item .cate_item.is-open:after {
        height: 6px;
    }
    
    /* エントリーボタン */
    .local_nav_main_list_item.entry {
        flex: 0 1 25rem;
        padding: 0;
    }
    .local_nav_main_list_item.entry a > span {
        position: relative;
        z-index: 2;
    }
    .local_nav_main_list_item.entry a {
        background: #0099FF;
        color: #FFF;
        font-family: "Open Sans";
        font-size: 1.8rem;
        font-weight: 700;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        transition: .2s ease-in-out;
        overflow: hidden;
    }

    .local_nav_main_list_item.entry a:hover {
        margin: 6px;
        border-radius: 50px;
        height: calc(100% - 12px);
        width: calc(100% - 12px);
    }

    /* サブメニュー */
    .local_nav_sub {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        min-height: calc(100vh - 80px);
        color: #FFF;
        text-align: center;
        padding: 7rem 4rem;
    }
    .local_nav_sub > * {
        z-index: 1;
        position: relative;
    }
    .local_nav_sub::before {
        content: '';
        display: block;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(48, 48, 48, 0.95);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .local_nav_sub::after {
        content: '';
        display: block;
        width: 40px;
        height: 40px;
        background: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_close.svg) no-repeat 0 0;
        background-size: 100%;
        position: absolute;
        top: 4rem;
        right: 4rem;
        z-index: 0;
        cursor: pointer;
    }
    .local_nav_sub_ttl_en {
        font-family: "Goldman", sans-serif;
        font-size: 2.0rem;
        font-weight: 700;
            letter-spacing: 4px;
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #FFF;
        color: transparent;
    }
    .local_nav_sub_ttl {
        font-size: 4.8rem;
        font-weight: 700;
        letter-spacing: 2.4px;
    }
    .local_nav_sub_list {
        display: flex;
        justify-content: center;
        gap: 35px;
        margin: 7rem auto 0;
    }
    .local_nav_sub_list_item > a {
        display: block;
        background: #FFF;
        border: 3px solid #FFF;
        height: 100%;
        display: flex;
        flex-flow: column;
    }
    .local_nav_sub_list_item .tmb {
        width: 100%;
        margin-bottom: auto;
        overflow: hidden;
    }
    .local_nav_sub_list_item .tmb img {
        transition: transform .4s ease-in-out;
    }
    .local_nav_sub_list_item .tmb:hover img {
        transform: scale(1.05);
    }
    .local_nav_sub_list_item .ttl {
        text-align: center;
        font-size: 2.2rem;
        font-weight: 700;
        letter-spacing: 3.3px;
        line-height: 1.4;
        padding: 1.6rem 10% 2rem;
        margin-bottom: auto;
    }
    .local_nav_menu_btn {
        display: none;
    }

    /* hover */
    .local_nav_sub_list_item > a, .local_nav_sub_list_item > a .tmb {
        transition: all .2s ease-out;
    }
    .local_nav_sub_list_item > a:hover {
        border-radius: 35px;
    }
    .local_nav_sub_list_item > a:hover .tmb {
        border-radius: 35px 35px 0 0;
    }

    /* メニュー開閉 */
    .js_nav_child {
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        transition: opacity .3s ease, z-index .3s ease, visibility .3s ease;
    }
    .js_nav_parent.is-open + .js_nav_child {
        opacity: 1;
        z-index: 99;
        visibility: visible;
    }
    body.is-stop {
        overflow: hidden;
    }
}

/* pagetop
---------------------------------------*/
.pagetop {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: url(/fileadmin/templates2020/tcc-recruit/images/common/pagetop.svg) no-repeat 0 0;
    background-size: 100%;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}
.pagetop svg .cls-1 {
    fill:#fff;
}
.pagetop svg .cls-2 {
    fill:#b2b2b2;
}
.pagetop.is-show {
    visibility: visible;
    opacity: 1;
}

@media screen and (min-width : 769px) {
    .pagetop {
        display: block;
        bottom: 1.8vw;
        right: 1.8vw;
    }
    /*.pagetop.is-bottom {
        bottom: 80px;
    }*/
}

/* footer
---------------------------------------*/
.footer {
    position: relative;
    padding: 5rem 4vw 3rem;
}
.footer_links {
    margin: 0;
}
.footer_links li {
    margin: 12px 0;
}
.footer_links a {
    font-size: 1.8rem;
}
.footer_links a:hover {
    text-decoration: none;
    text-decoration: underline;
}
.footer_logo {
    margin: 20px 0 10px;
    font-size: 2.0rem
}
.footer_logo img {
    width: 100%;
}
.footer_address {
    margin: 0;
    font-size: 1.4rem;
}
.footer_policies {
    margin: 25px 0;
}
.footer_policies a {
    font-size: 1.4rem;
}
.footer_policies a:hover {
    text-decoration: underline;
}
.copyright {
    margin: 2rem 0 0;
    font-size: 1.0rem;
}

@media screen and (min-width : 1280px) {
    .footer {
        padding: 8rem 2vw 8rem;
    }
    .footer_links {
        margin: 0;
    }
    .footer_links ul {
        display: flex;
        justify-content: space-between;
        margin: 3px -25px 0 0;
    }
    .footer_links li {
        margin: 0 25px;
        padding: 0;
    }
    .footer_row {
        display: flex;
        justify-content: space-between;
        flex-flow: row-reverse;
        align-items: center;
    }
    .footer_logo {
        margin-top: 0;
        font-size: 3.2rem
    }
    .footer_address {
        font-size: 1.6rem;
    }
    .footer_policies {
        display: flex;
        margin: 25px 0 10px;
    }
    .footer_policies > li {
        margin: 0 3rem 0 0;
    }
    .footer_policies a {
        font-size: 1.6rem;
    }
    .copyright {
        font-size: 1.6rem;
    }
}


/* contents
---------------------------------------*/
.page_container {
    position: relative;
    z-index: 0;
}
.main {
    position: relative;
    z-index: 0;
}

@media screen and (min-width : 769px) {
    .page_container {
        padding: 0;
    }
    .page_container.is-wide {
        padding: 0;
    }

}

.page_body {
    padding-top: 0;
    padding-bottom: 5rem;
    overflow: hidden;
    opacity: 0;
    animation-name: fadein;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: .7s;
    animation-fill-mode: forwards;
}
@media screen and (min-width : 769px) {
    .page_body {
        padding-top: 0;
        padding-bottom: 8rem;
    }
}


/*---------------------------------------
 Parts
---------------------------------------*/
/* リンク */
a {
    display: inline-block;
    color: #303030;
    text-decoration: none;
    transition: color .5s ease-in-out, opacity .5s ease-in-out;
}
a:hover {
    text-decoration: none;
}

/* a img {
    transition: opacity .2s ease-in-out;
}
a:hover img {
    opacity: .7;
} */

/* txt-link */
.txt_link {
    display: inline-block;
    position: relative;
}
.txt_link::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #303030;
    position: absolute;
    bottom: 0;
    left: 0;
}
.txt_link:hover:after {
    animation-name: text-link;
    animation-duration: .5s;
    animation-delay: 0;
    animation-fill-mode: forwards;
}

@keyframes text-link {
    0% {
        width: 0;
    }
  
    100% {
        width: 100%;
    }
  }


/* arrow_link */
.arrow_link {
    display: inline-block;
    margin: 2px 0;
    padding: 0 0 0 25px;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: 0 6px;
    transition: background-image .2s ease-in-out;
}
.arrow_link:hover {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_arrow_bl.svg);
}


/* txt link blank */
.--blank {
    display: inline-block;
    position: relative;
}
.--blank::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank.svg) no-repeat 0 0;
    background-size: 10px;
    vertical-align: top;
    margin: 10px 2px 0 4px;
}


/* 四角ボタン */
.btn01 {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #303030;
    text-align: center;
    background-color: #fff;
    border: solid 3px #303030;
    margin: 1rem 0;
    padding: 1.8rem 2.8rem;
    width: 100%;
    /* transition: background-color .4s ease, border-color .4s ease, color .4s ease, border-radius .5s ease; */
    transition: all .5s ease;
    position: relative;
    overflow: hidden;
}
.btn01:hover {
    border-radius: 50px;
    background-color: #303030;
    color: #fff;
    text-decoration: none;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.btn01.blank {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank.svg);
    background-repeat: no-repeat;
    background-position: right 1.5rem top 1rem;
    background-size: 12px;
}
.btn01.blank:hover {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank_wh.svg);
    background-repeat: no-repeat;
}

@media screen and (min-width : 769px) {
    .btn01 {
        display: inline-block;
        font-size: 2.0rem;
        padding: 2rem 3rem;
        margin: .75rem 0;
        width: auto;
        min-width: 340px;
    }
    .btn01.blank {
        background-position: right 1.5rem top 1rem;
    }
}

/* color variation */
.btn01.--blue {
    color: #fff;
    text-align: center;
    background-color: #0099FF;
    border: solid 3px #fff;
}
.btn01.--blue:hover {
    background-color: #fff;
    color: #0099FF;
    border-color: #0099FF;
}
.--blue.blank {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank_wh.svg);
    background-repeat: no-repeat;
    background-position: right 1.5rem top 1rem;
    background-size: 12px;
}
.--blue.blank:hover {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank_bl.svg);
    background-repeat: no-repeat;
}

.btn01.--black {
    color: #fff;
    text-align: center;
    background-color: #303030;
    border: solid 3px #303030;
}
.btn01.--black:hover {
    background-color: #fff;
    color: #303030;
}
.--black.blank {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank_wh.svg);
    background-repeat: no-repeat;
    background-position: right 1.5rem top 1rem;
    background-size: 12px;
}
.--black.blank:hover {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank.svg);
    background-repeat: no-repeat;
}

.btn01.--white {
    color: #fff;
    text-align: center;
    background-color: transparent;
    border: solid 3px #fff;
}
.btn01.--white:hover {
    background-color: #fff;
    color: #303030;
}
.--white.blank {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank_wh.svg);
    background-repeat: no-repeat;
    background-position: right 1.5rem top 1rem;
    background-size: 12px;
}
.--white.blank:hover {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_blank.svg);
    background-repeat: no-repeat;
}

/* anchor link */
.anchor_list {
    margin: 0 auto 3rem;
}
.anchor_link {
    display: block;
    margin: 0 0 2rem;
    line-height: 1.4;
    font-weight: 700;
    position: relative;
    padding: 0 0 1.5rem 4rem;
    transition: all .1s ease-out;
}
.anchor_link::before {
    content: '';
    display: block;
    position: absolute;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    transition: background-image .2s ease-out;
}
.anchor_link::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #0099FF;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transition: height .1s ease;
}
.anchor_link:hover {
    color: #0099FF;
    border-width: 6px;
    margin-top: -3px;
    padding: 0 0 1.8rem 4rem;
}
.anchor_link:hover:before {
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_arrow_bl.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}
.anchor_link:hover:after {
    height: 6px;
}

@media screen and (min-width : 769px) {
    .anchor_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem 4rem;
        margin: 4rem auto 6rem;
    }
    .anchor_list > * {
        list-style: none;
        flex: 0 1 auto;
    }
    .anchor_link {
        font-size: 2.0rem;
    }
    .anchor_link::before {
        
top: .2rem;
    }
}

/* btns_row */
.btns_row_blk {
    background-color: #0099FF;
    padding: 1rem;
    margin: 3rem auto;
    width: 100%;
    text-align: center;
}
.btns_row_blk .btns_row {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.btns_row {
    margin: 3rem auto 2rem;
}
  
@media screen and (max-width : 768px) {
    .btns_row.sp_2col {
        display: flex;
        justify-content: center;
        gap: 1.5%;
        padding: 0 2rem;
        margin: 6rem auto 4rem;
    }
    .btns_row.sp_2col *[class*="btn"] {
        margin-left: 0;
        margin-right: 0;
    }
}
  
@media screen and (min-width : 769px) {
    .btns_row_blk {
        margin: 4rem auto;
        border-radius: 16px;
    }
    .btns_row {
        display: flex;
        justify-content: center;
        gap: 1.5%;
        padding: 0 2rem;
        margin: 6rem auto 4rem;
    }
    .btns_row *[class*="btn"] {
        margin-left: 0;
        margin-right: 0;
    }
}
  
/* リスト */
.list_dot {
    list-style: none;
    margin: 1rem 0;
}
.list_dot > li {
    position: relative;
    list-style: none;
    padding: 0 0 0 1.5rem;
}
.list_dot > li + li {
    margin: 1rem 0;
}
.list_dot > li::before {
    content: '';
    display: block;
    position: absolute;
    top: .7rem;
    left: 0;
    width: 4px;
    height: 4px;
    margin: 0 1rem 0 0;
    border-radius: 50%;
    background: #303030;
}
@media screen and (min-width : 769px) {
    .list_dot > li::before {
        top: 1rem;
    }
}

/* ol */
ol:not([class]) {
    margin: 18px 0;
    counter-reset: count 0;
}
ol:not([class]) li {
    position: relative;
    padding: 0 0 0 2.6rem;
    margin: 16px 0;
    counter-reset: item 0;
}
ol:not([class]) li::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: counter(count) ". ";
    counter-increment: count 1;
}

/*---------------------------------------
 Pages
---------------------------------------*/
/* page_head */
.page_head {
    margin: 0;
    padding: 0 6vw;
    height: 47vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}
.page_ttl_box {
    margin: 0 0 2rem;
    opacity: 0;
    animation-name: fadeinUp;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
.page_ttl {
    font-size: clamp(3rem, 1.875vw + 2.4rem, 4.8rem);
    font-weight: 700;
    position: relative;
}
.page_ttl_en {
    font-family: "Goldman", sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #0099FF;
    color: transparent;
}

@media screen and (min-width : 769px) {
    .page_head {
        margin: 0;
        padding: 4rem 4rem 0;
        text-align: left;
        display: flex;
        align-items: center;
        height: 450px;
    }
    .page_head.--txt_right {
        justify-content: flex-end;
    }
    .page_head.--txt_right .page_ttl_box {
        flex: 0 1 38%;
        min-width: 400px;
    }
    .page_head.--txt_left {
        justify-content: flex-start;
    }
    .page_head.--txt_left .page_ttl_box {
        flex: 1 1 100%;
        margin-left: 18%;
    }
    .page_ttl {
        /* font-size: 4.8rem; */
        padding: 0 0 3.5rem;
    }
}

/* page_head simple */
.page_head.--simple {
    margin: 0;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    background: url(/fileadmin/templates2020/tcc-recruit/images/common/page_head.jpg) no-repeat center;
    background-size: cover;
}
.page_head.--simple .page_ttl_box {
    margin: 0;
    flex: 1 1 auto;
}
.page_head.--simple .page_ttl {
    font-size: 3.0rem;
    font-weight: 700;
    position: relative;
}
.page_head.--simple .page_ttl_en {
    font-family: "Goldman", sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #fff;
    color: transparent;
    margin: 0 0 1rem;
}

@media screen and (min-width : 769px) {
    .page_head.--simple {
        margin: 0;
        padding: 4rem 4rem;
        display: flex;
        align-items: center;
        height: 277px;
    }
    .page_head.--simple .page_ttl {
        font-size: 4.8rem;
        padding: 0;
    }
    .page_head.--simple .page_ttl_en {
        margin: 0 0 1rem;
    }
}

/* H */
.headline01 {
    font-size: clamp(4.8rem, 0.5vw + 4.64rem, 5.6rem);
    font-weight: 700;
    line-height: 1.5;
    margin: 10px 0 20px;
    opacity: 0;
    animation-name: fadein;
    animation-duration: 1.2s;
    animation-delay: 0;
    animation-fill-mode: forwards;
}
.headline02 {
    font-size: clamp(2.6rem, 2.292vw + 1.867rem, 4.8rem);
    font-weight: 700;
    line-height: 1.4;
    margin: 3rem 0 3.5rem;
}
.headline03 {
    font-size: clamp(2.2rem, 1.458vw + 1.733rem, 3.6rem);
    font-weight: 700;
    line-height: 1.5;
    margin: 5rem 0 2rem;
}
.headline04 {
    font-size: clamp(2rem, 0.25vw + 1.92rem, 2.4rem);
    font-weight: 700;
    line-height: 1.5;
    margin: 2.2rem 0 0;
}
.headline05 {
    font-size: clamp(2.2rem, 0.375vw + 2.08rem, 2.8rem);
    font-weight: 700;
    line-height: 1.5;
    margin: 2.5rem 0 1rem;
}

@media screen and (min-width : 769px) {
    .headline01 {
        /* font-size: 5.6rem; */
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 3.0rem;
    }
    .headline02 {
        /* font-size: 4.8rem; */
        font-weight: 700;
        line-height: 1.45;
        margin: 6.0rem 0 6.5rem;
    }
    .headline03 {
        /* font-size: 3.6rem; */
        font-weight: 700;
        line-height: 1.5;
        margin: 6.0rem 0 3.5rem;
   }
    .headline04 {
        /* font-size: 2.4rem; */
        font-weight: 700;
        line-height: 1.5;
        margin: 3.0rem 0 2.0rem;
    }
    .headline05 {
        /* font-size: 2.8rem; */
        font-weight: 700;
        line-height: 1.5;
        margin: 3.0rem 0 2.0rem;
    }
}

/* p */
p + p {
    margin-top: 1rem;
}

/* Text */
.large_txt {
    font-size: 1.8rem;
}
@media screen and (min-width : 769px) {
    .large_txt {
        font-size: 2.2rem;
    }
}

.large_txt + .large_txt {
    margin-top: 3rem;
}

.small_txt {
    font-size: 1.3rem;
}
@media screen and (min-width : 769px) {
    .small_txt {
        font-size: 1.4rem;
    }
}

.normal_txt {
    font-weight: 400;
}

.highlight_txt {
    color: #EA5504;
}

/* note */
.note {
    font-size: 1.4rem;
    color: #303030;
}
@media screen and (min-width : 769px) {
    .note {
        font-size: 1.6rem;
    }
}

/* インデント */
.indent {
    padding-left: 1.2rem;
    text-indent: -1.2rem;
}

/* 表組み */
.table01 {
    border-collapse: collapse;
    border-top: solid 3px #666666;
    border-bottom: solid 3px #666666;
    width: 100%;
}
.table01 th, .table01 td {
    padding: 1.5rem 2rem;
    line-height: 1.8;
}
.table01 th {
    font-weight: 600;
    background-color: #D9F0FF;
}

@media screen and (max-width : 768px) {
    .table01,
    .table01 tbody,
    .table01 tr,
    .table01 th,
    .table01 td {
        display: block;
        width: 100%;
    }
    .table01 td {
        border-bottom: solid 1px #666666;
    }
    .table01 tr:last-of-type td {
        border-bottom: none;
    }
}

@media screen and (min-width : 769px) {
    .table01 {
        margin: 2rem 0;
    }
    .table01 th, .table01 td {
        line-height: 1.8;
        text-align: left;
    }
    .table01 th {
        width: 30%;
        padding: 2rem 4rem;
    }
    .table01 td {
        padding: 2rem 2rem;
    }
    .table01 th, .table01 td {
        border-bottom: solid 1px #666666;
    }
    .table01 tr:last-of-type th,
    .table01 tr:last-of-type td {
        border-bottom: none;
    }
}

/* figcaption */
figcaption {
    margin: 1.5rem 0 0;
}


/* 404 Not Found
---------------------------------------*/
.page_container {
    padding: 0;
    overflow-x: hidden;
    background-color: #FAFAFA;
}
.page_container .main {
    padding-top: 0;
}
.notfound_ttl {
    font-size: 3.0rem;
    font-weight: 700;
    margin: 0 0 20px;
}
.notfound_blk {
    margin: 0 0 30px;
}

@media screen and (min-width : 769px) {
    .notfound_ttl {
        font-size: 4.8rem;
        margin: 30px 0 40px;
   }
    .notfound_blk {
        margin: 0 0 30px;
    }
}

/* entry_area
---------------------------------------*/
.entry_area, .entry_bg_slide {
    height: 60vh;
    max-height: 340px;
}
@media screen and (min-width : 769px) {
    .entry_area, .entry_bg_slide {
        height: 580px;
        max-height: inherit;
    }
}

.entry_area {
    margin: 0;
    padding: 0;
    color: #fff;
    text-align: center;
    position: relative;
}
.entry_area_cont {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    padding: 2rem 6vw;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.entry_area_lead {
    font-size: clamp(1.8rem, 0.5vw + 1.64rem, 2.6rem);
    padding: 0 1rem;
}
.entry_area_btn {
    display: block;
    font-size: clamp(2rem, 1.75vw + 1.44rem, 4.8rem);
    font-weight: 700;
    color: #FFF;
    text-align: center;
    border: solid 5px #fff;
    margin: 2.5rem auto 1rem;
    padding: 2rem 3rem;
    width: calc(100% - 2rem);
    transition: background-color .3s ease, border-color .3s ease, border-radius .5s ease;
}
.entry_area_btn:hover {
    background-color: #fff;
    border-color: #fff;
    color: #303030;
    border-radius: 70px;
    text-decoration: none;
}
@media screen and (min-width : 769px) {
    .entry_area {
        padding: 0;
        margin: 0;
    }
    .entry_area_cont {
        padding: 0 3vw;
    }
    .entry_area_lead {
        /* font-size: 2.4rem; */
        margin: 0 0 1.5rem;
    }
    .entry_area_btn {
        display: inline-block;
        /* font-size: 4.8rem; */
        padding: 2.5rem 5rem;
        margin: 4rem 0 1rem;
        min-width: 402px;
        width: 33%;
    }
}

/* entryの背景スライド */
.entry_bg_slide {
    position : relative;
    width: 100%;
    margin: auto;
    overflow : hidden;
    z-index: 1;
    background-color: #535353;
}

.entry_bg_slide .slide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: bgAnime 24s infinite; /* 7画像 × 各3s + 3s */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}
  
.entry_bg_slide .bg01 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg01.jpg);
}
.entry_bg_slide .bg02 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg02.jpg);
    animation-delay  : 3s;
}
.entry_bg_slide .bg03 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg03.jpg);
    animation-delay  : 6s;
}
.entry_bg_slide .bg04 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg04.jpg);
    animation-delay  : 9s;
}
.entry_bg_slide .bg05 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg05.jpg);
    animation-delay  : 12s;
}
.entry_bg_slide .bg06 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg06.jpg);
    animation-delay  : 15s;
}
.entry_bg_slide .bg07 {
    background-image : url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg07.jpg);
    animation-delay  : 18s;
}

@keyframes bgAnime {
    0% { opacity: 0; }
    15% { opacity: 1; }
    25% { opacity: 1; }
    40% { opacity: 0; }
    100% { opacity: 0; }
}

.entry_bg_slide::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color : rgba(0, 0, 0, 0.20);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
.entry_bg_slide::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url(/fileadmin/templates2020/tcc-recruit/images/common/entry_bg_frame.png) no-repeat center;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

/* カーソルを当てると画像ズーム */
.entry_area {
    overflow: hidden;
}
.entry_bg_slide {
    transition: transform .9s ease;
}
.entry_area.is-hover .entry_bg_slide {
    transform: scale(1.03);
}

/* youkou
---------------------------------------*/
.youkou .page_body {
    padding: 0 0 5rem;
}
@media screen and (min-width : 769px) {
    .youkou .page_body {
        padding: 5rem 0 8rem;
    }
}

.youkou .page_head {
    background: url(/fileadmin/templates2020/tcc-recruit/images/youkou/youkou_main_sp.jpg) no-repeat center;
    background-size: cover;
}
@media screen and (min-width : 769px) {
    .youkou .page_head {
        background: url(/fileadmin/templates2020/tcc-recruit/images/youkou/youkou_main.jpg) no-repeat center;
        background-size: cover;
    }
}

.youkou_sec + .youkou_sec {
    margin-top: 5rem;
}
@media screen and (min-width : 769px) {
    .youkou_sec + .youkou_sec {
        margin-top: 11rem;
    }
}

.youkou_overview {
    margin: 4rem auto 6rem;
}
.youkou_overview_ttl {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 700;
    border-bottom: solid 3px #8CD1FF;
}
.youkou_overview_desc {
    margin: 1.5rem 0 2.5rem;
}
@media screen and (min-width : 769px) {
    .youkou_overview_ttl {
        font-size: 2.4rem;
    }
    .youkou_overview {
        max-width: 736px;
        margin: 7rem auto 9rem;
    }
}

.youkou_btn {
    margin: 6rem auto 0;
}
@media screen and (min-width : 769px) {
    .youkou_btn {
        margin: 12rem auto 2rem;
    }
}

/* environment
---------------------------------------*/
.environment .page_head {
    background: url(/fileadmin/templates2020/tcc-recruit/images/environment/environment_main_sp.jpg) no-repeat center bottom;
    background-size: cover;
}

@media screen and (min-width : 769px) {
    .environment .page_head {
        background: url(/fileadmin/templates2020/tcc-recruit/images/environment/environment_main.jpg) no-repeat center;
        background-size: cover;
    }
}

.env_wrap {
    background-color: #D9F0FF;
    padding: 4rem 0;
    position: relative;
}
.env_wrap::after {/* 斜めのあしらい */
    content: '';
    display: block;
    background-color: #FAFAFA;
    width: 200%;
    height: 400px;
    position: absolute;
    bottom: -10rem;
    left: -50%;
    z-index: 0;
    transform: rotate(-12deg);
}
@media screen and (min-width : 769px) {
    .env_wrap {
        padding: 8rem 0 8rem;
    }
    .env_wrap::after {/* 斜めのあしらい */
        height: 21%;
        bottom: -10%;
    }
}

.env_sec {
    display: block;
    background: #FFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 2;
    margin: 2rem auto;
}
.env_sec_head {
    padding: 2rem 3rem;
    position: relative;
    background-image: linear-gradient(
        45deg, 
        #fff 25%,
        #D9F0FF 25%,
        #D9F0FF 50%,
        #fff 50%,
        #fff 75%,
        #D9F0FF 75%,
        #D9F0FF);
    background-size: 4px 4px;
}
.env_sec_head * {
    z-index: 1;
    position: relative;
}
.env_sec_ttl {
    margin: 0;
}
.env_sec_body {
    padding: 2rem 3rem;
}

@media screen and (min-width : 769px) {
    .env_sec {
        display: flex;
        align-items: stretch;
    }
    .env_sec_head {
        flex: 0 1 30%;
        max-width: 350px;
        padding: 6rem 5vw;
        position: relative;
    }
    .env_sec_body {
        flex: 1 1 70%;
        padding: 6rem 6rem;
        font-size: 1.8rem;
    }
}

@media screen and (min-width : 1280px) {
    .env_sec_head {
        padding: 6rem 6rem;
    }
}

#holiday .env_sec_body {
    background: url(/fileadmin/templates2020/tcc-recruit/images/environment/environment_icon01.png) no-repeat;
    background-position: right 1rem bottom 1rem;
    background-size: 30%;
}
#childcare .env_sec_body {
    background: url(/fileadmin/templates2020/tcc-recruit/images/environment/environment_icon02.png) no-repeat;
    background-position: right 1rem bottom 1rem;
    background-size: 30%;
}
#training .env_sec_body {
    background: url(/fileadmin/templates2020/tcc-recruit/images/environment/environment_icon03.png) no-repeat;
    background-position: right 1rem bottom 1rem;
    background-size: 30%;
}

@media screen and (min-width : 769px) {
    #holiday .env_sec_body {
        background-position: right 4rem bottom 4rem;
        background-size: 220px;
    }
    #childcare .env_sec_body {
        background-position: right 4rem bottom 4rem;
        background-size: 190px;
    }
    #training .env_sec_body {
        background-position: right 4rem bottom 4rem;
        background-size: 190px;
    }
}

/* FAQ
---------------------------------------*/
.faq .page_body {
    padding: 5rem 0 7rem;
}
@media screen and (min-width : 769px) {
    .faq .page_body {
        padding: 7rem 0 12rem;
    }
}

.faq_sec {
    margin-top: 7rem;
}
@media screen and (min-width : 769px) {
    .faq_sec {
        margin-top: 12rem;
    }
}

.faq_item {
    margin: 0;
    border-top: solid 2px #0099FF;
    border-bottom: solid 2px #0099FF;
    background-color: #FFFFFF;
}
.faq_item + .faq_item {
    border-top: none;
}
.faq_item_question {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 0;
    font-weight: 700;
    transition: background-color .1s ease-out, color .1s ease-out;
}
.faq_item_question::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    background-color: #0099FF;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: height .1s ease-out, color .1s ease-out;
}
.faq_item_question:hover {
    color: #0099FF;
}
.faq_item_question:hover:before {
    height: 4px;
}
.faq_item_answer {
    display: none;
    position: relative;
    padding: 2rem 2rem 2.5rem;
    background-color: #D9F0FF;
}
.faq_item_answer.is-show {
    display: block;
}
.faq_item_txt {
    display: inline-block;
    vertical-align: top;
}
.faq_item_question .faq_item_txt {
    width: 88%;
}
.faq_item_alphabet {
    display: inline-block;
    top: 0;
    left: 0;
    width: 1.5rem;
    margin: -.3rem 1.7rem 0 0;
    vertical-align: top;
    line-height: 1;
    font-size: 3.2rem;
    font-weight: 500;
    transition: color .2s ease-in-out;
}
.faq_item_question .faq_item_alphabet {
    color: #0099FF;
}

.faq_item_icon {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 16px;
    height: 16px;
}
.faq_item_icon > span {
    position: relative;
}
.faq_item_icon::before {/* 横棒 */
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 2px;
    background: #0099FF;
    transition: .2s ease-in-out;
}
.faq_item_icon::after {/* 縦棒 */
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 2px;
    height: 100%;
    background: #0099FF;
    transition: .2s ease-in-out;
}
.js_faq_toggle.is-active {
    background-color: #0099FF;
    color: #FFF;
}
.js_faq_toggle.is-active .faq_item_alphabet {
    color: #FFF;
}
.js_faq_toggle.is-active .faq_item_icon::before,
.js_faq_toggle.is-active .faq_item_icon::after {
    background-color: #FFF;
}
.js_faq_toggle.is-active .faq_item_icon::after {
    transform: rotate(90deg);
    opacity: 0;
}
@media screen and (min-width : 769px) {
    .faq_item_question {
        padding: 2.4rem 5.5rem 2.5rem 2.5rem;
        font-size: 2.0rem;
        cursor: pointer;
    }
    .faq_item_txt {
        width: 100%;
        margin-top: .3rem;
    }
    .faq_item .faq_item_alphabet {
        width: 2.6rem;
        margin-right: 1.5rem;
        font-size: 3.0rem;
    }
    .faq_item_icon {
        right: 3rem;
        /* width: 24px;
        height: 24px; */
    }
    .faq_item_answer {
        padding: 2.8rem 3rem 3.2rem 7.2rem;
    }
    .faq_item_answer .faq_item_txt p {
        line-height: 2;
    }
}

/* Schedule
---------------------------------------*/
.schedule .page_body {
    padding: 5rem 0 0;
}
@media screen and (min-width : 769px) {
    .schedule .page_body {
        padding: 7rem 0 0;
    }
}

.schedule_sec {
    margin: 7rem 0 0;
}
@media screen and (min-width : 1280px) {
    .schedule_sec {
        margin: 8rem 0 0;
    }
}

.schedule_anchor_md {
    display: block;
}
@media screen and (min-width : 1280px) {
    .schedule_anchor_md {
        display: none;
    }
}
@media screen and (max-width : 1279px) {
    .schedule_anchor_lg {
        display: none;
    }
}

.flow_chart_head {
    background: rgb(0,153,255);
    background: linear-gradient(180deg, rgba(0,153,255,1) 50%, rgba(0,138,229,1) 50%);
    color: #fff;
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    padding: 2.2rem 2rem;
}
.flow_chart_list, .flow_chart li {
    list-style: none;
}
.flow_chart_item {
    border-radius: 20px;
    border: 6px solid #8CD1FF;
    background: #D9F0FF;
    padding: 5rem 2.5rem 2.5rem;
    margin: 7rem auto;
    position: relative;
}
.flow_chart_strong {
    font-weight: 700;
    font-size: 2.0rem;
}

/* 青矢印 */
.flow_chart_item::before {
    content: '';
    display: block;
    width: 24px;
    height: 46px;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/schedule/flow_arrow.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    position: absolute;
    top: -6.8rem;
    left: 0;
    right: 0;
    margin: auto;
}

/* 吹き出し */
.flow_chart_ttl {
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 1rem 2rem 1.2rem;
    border-radius: 40px;
    background: #303030;
    box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.15);
    position: absolute;
    top: -1.6rem;
    left: -.6rem;
    z-index: 2;
}
.flow_chart_ttl::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid 10px transparent;
    border-top: solid 23px #303030;
    transform: rotate(-30deg);
    position: absolute;
    right: calc(50% - 2rem);
    bottom: -21px;
}

@media screen and (min-width : 1280px) {
    .flow_chart_wrap {
        display: flex;
        justify-content: space-between;
        gap: 4.6rem;
        margin: 5rem auto 0;
        max-width: 1086px;
    }
    .flow_chart {
        flex: 0 1 49
    }
    .flow_chart_head {
        padding: 3rem 2rem;
        font-size: 2.8rem;
    }
    .flow_chart_item {
        padding: 6rem 5rem 4rem;
        margin: 12.6rem 0 0;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        width: 100%;
    }
    .flow_chart_strong {
        font-size: 2.4rem;
    }

    /* 青矢印 */
    .flow_chart_item::before {
        width: 60px;
        height: 115px;
        top: -12.7rem;
        left: 0;
        right: 0;
        margin: auto;
    }

    /* 吹き出し */
    .flow_chart_ttl {
        font-size: 2.4rem;
        font-weight: 700;
        padding: 2rem 5rem 2.3rem;
        border-radius: 40px;
        top: -6rem;
        left: -3rem;
    }
    .flow_chart_ttl::after {
        border: solid 20px transparent;
        border-top: solid 48px #303030;
        transform: rotate(-30deg);
        right: calc(50% - 4rem);
        bottom: -53px;
    }

    .flow_chart_item.item_2nd {
        padding: 4rem 5rem 4rem;
    }
    /* PC 会社説明会・工場見学会 吹き出し */
    #school .flow_chart_item.item_2nd {
        padding: 5rem 5rem 5rem;
    }
    #school .flow_chart_item.item_2nd .flow_chart_ttl {
        display: none;
    }
    #general .flow_chart_item.item_2nd .flow_chart_ttl {
        left: inherit;
        right: -21rem;
    }
    #general .flow_chart_item.item_2nd .flow_chart_ttl::after {
        right: 15%;
        bottom: -53px;
    }
    #general .flow_chart_item.item_2nd .flow_chart_ttl::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border: solid 20px transparent;
        border-top: solid 48px #303030;
        transform: rotate(30deg);
        position: absolute;
        left: 15%;
        bottom: -53px;
    }

    /* PC 合流チャート 青矢印 */
    #school .flow_chart_item.item_3rd,
    #school .flow_chart_item.item_4th {
        display: none;
    }
    #general .flow_chart_item.item_3rd,
    #general .flow_chart_item.item_4th {
       margin-left: 56%;
       align-items: center;
       padding: 4rem 5rem 4rem;
    }

    #general .flow_chart_item.item_3rd {
        margin-top: 250px;
    }
    #general .flow_chart_item.item_3rd::before,
    #general .flow_chart_item.item_3rd::after {
        content: '';
        display: block;
        width: 291px;
        height: 240px;
        background-image: url(/fileadmin/templates2020/tcc-recruit/images/schedule/flow_arrow_long.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
        top: -252px; /* margin-top + border */
    }
    #general .flow_chart_item.item_3rd::before {
        left: -4rem;
        right: inherit;
    }
    #general .flow_chart_item.item_3rd::after {
        right: -4rem;
        left: inherit;
        transform: scale(-1, 1);
    }

    #general .flow_chart_item.item_4th::before {
        left: 19rem;
        right: inherit;
     }
     #general .flow_chart_item.item_4th::after {
         content: '';
         display: block;
         width: 60px;
         height: 115px;
         background-image: url(/fileadmin/templates2020/tcc-recruit/images/schedule/flow_arrow.svg);
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: center;
         position: absolute;
         top: -12.7rem;
         right: 19rem;
         margin: auto;
     }
 
}

/* form */
.flow_form {
    background-color: #D9F0FF;
    padding: 3rem 0 6rem;
    margin: 8rem 0 0;
}
.flow_form_blk {
    background-color: #FFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    padding: 4rem 3rem;
}
.flow_form_btn {
    display: block;
    background: #0099FF;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 700;
    padding: 2.5rem 2.5rem;
    margin: 1.5rem auto 0;
    transition: all .5s ease;
}
.flow_form_btn:hover {
    border-radius: 50px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

@media screen and (min-width : 769px) {
    .flow_form {
        padding: 4rem 0 10rem;
        margin: 15rem 0 0;
    }
    .flow_form_blk {
        padding: 7rem 5rem;
        font-size: 2.0rem;
    }
    .flow_form_btn {
        display: inline-block;
        padding: 2.6rem 5.8rem;
        margin: 2.5rem auto 0;
        font-size: 2.2rem;
    }
}

/* People
---------------------------------------*/
.people_index_page_head {
    text-align: center;
    background-color: #fff;
    padding: 4rem 2rem 3rem;
}
.people_index_page_head .page_ttl_en {
    -webkit-text-stroke-width: 1px;
}
.people_index_page_head .page_ttl {
    padding: 0;
}
.people_index_page_head .page_ttl {
    display: block;
}
@media screen and (min-width : 769px) {
    .people_index_page_head {
        padding: 8rem 2rem 7rem;
    }
}

.people_index_wrap {
    background: #E7E7E7;
    padding: 6rem 0;
}
@media screen and (min-width : 769px) {
    .people_index_wrap {
        padding: 9rem 0 14rem;
    }
}

/* people_index_list */
.people_index_list_item {
    position: relative;
    margin: 0 0 5rem;
    padding: 0 1rem 1rem 0;
}
.people_index_list_item::before {
    content: '';
    display: block;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 0;
    background-image: linear-gradient(
        -45deg, 
        #E7E7E7 25%,
        #74C0F3 25%,
        #74C0F3 50%,
        #E7E7E7 50%,
        #E7E7E7 75%,
        #74C0F3 75%,
        #74C0F3);
    background-size: 6px 6px;
    border-radius: 20px;
}
.people_index_list_item_box {
    display: block;
    z-index: 2;
    position: relative;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.people_index_list_item_box .ribon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    color: #FFF;
    font-size: 1.5rem;
    letter-spacing: 1.6px;
    display: inline-block;
    padding: .5rem 1.2rem;
}
.people_index_list_item_box .ribon.manufacture {
    background: #0069AE;
}
.people_index_list_item_box .ribon.technology {
    background: #1DAF81;
}
.people_index_list_item_box .img {
    display: block;
    width: 100%;
    z-index: 1;
    position: relative;
    transition: transform .5s ease-in-out;
}
.people_index_list_item_box .txt {
    background: rgba(255, 255, 255, 0.90);
    padding: 2.5rem;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    color: #000;
}
.people_index_list_item_box .txt .department {
    font-size: 1.6rem;
}
.people_index_list_item_box .txt .name {
    margin: .8rem 0 0;
}
.people_index_list_item_box .txt .kanji {
    font-size: 2.8rem;
    font-weight: 700;
    font-family: "Zen Old Mincho", serif;
}
.people_index_list_item_box .txt .kana {
    font-size: 1.6rem;
    font-weight: 500;
}
.people_index_list_item_box .txt .desc {
    font-size: 1.6rem;
    color: #303030;
    margin: .5rem 0 0;
}

.people_index_list_item_box:hover .img {
    transform: scale(1.1);
}

@media screen and (min-width : 769px) {
    .people_index_list {
        display: flex;
        flex-wrap: wrap;
        gap: 3.6rem 1.6rem;
        max-width: 1172px;
        margin: 0 auto;
    }
    .people_index_list_item {
        flex: 1 1 32.2%;
        max-width: 380px;
        padding: 0 2rem 2rem 0;
        margin: 0;
    }
    .people_index_list_item::before {
        width: calc(100% - 2rem);
        height: calc(100% - 2rem);
    }

}

/* Interview
---------------------------------------*/
.local_breadcrumb {
    display: flex;
    gap: 1.5rem;
}
.local_breadcrumb a {
    color: #303030;
}
.local_breadcrumb.--white,
.local_breadcrumb.--white a {
    color: #fff;
}
.local_breadcrumb > span {
    padding: 0 1.8rem 0 0;
    background: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_local_bread_arrow.svg) no-repeat right center;
    background-size: 5px;
}
.local_breadcrumb > span:nth-of-type(n+2):last-of-type {
    background: none;
}
.page_ttl_box .local_breadcrumb {
    margin: 0 0 1rem;
}
@media screen and (max-width : 768px) {
    .local_breadcrumb {
        display: none;
    }
}

.interview_head {
    background-color: #0099FF;
    color: #fff;
    position: relative;
    padding: 37vh 0 2.5rem;
}
.interview_head_img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 70%;
    height: 100%;
    overflow: hidden;
    width: 1140px;
    height: 100%;
}
.interview_head_txt {
    margin-top: -6vh;
    z-index: 2;
    position: relative;
}
.interview_head_catchcopy {
    color: #303030;
    margin: 0 0 2rem;
}
.interview_head_catchcopy span {
    display: block;
    color: #303030;
    font-size: clamp(2.2rem, 1.625vw + 1.68rem, 4.8rem);
    font-weight: 700;
}
.interview_head_info {
    padding: 0 6vw;
    opacity: 0;
    animation-name: fadeinUp;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-delay: .3s;
    animation-fill-mode: forwards;
}
.interview_head_info .name .kanji {
    font-size: clamp(2.8rem, 0.5vw + 2.64rem, 3.6rem);
    font-weight: 700;
    font-family: "Zen Old Mincho", serif;
}
.interview_head_info .name .kana {
    font-size: 1.6rem;
    font-weight: 500;
}
.interview_head_info .desc {
    margin: .5rem 0 0;
}

@media screen and (max-width : 767px) {
    .interview_head {
        padding: 30vh 0 2.5rem;
    }
    .interview_head_img {
        max-height: 280px;
    }
}

@media screen and (max-width : 767px) {
    .interview_head_img {
        width: 100%;
        height: 30vh;
        max-height: 230px;
    }
    .interview_head_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 0;
    }
}

@media screen and (min-width : 768px) {
    .interview_head {
        padding: 0;
        height: 446px;
    }
    .interview_head_inner {
        height: 100%;
    }
    .interview_head_inner::before {
        content: '';
        display: block;
        width: 40%;
        height: 100%;
        background-color: #0099FF;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
    }
    .interview_head_txt {
        margin: 0 auto;
        padding: 2.5rem 3.4rem 4rem;
        width: 100%;
        height: 100%;
        max-width: 1220px;
        z-index: 2;
        position: relative;
        display: flex;
        flex-flow: column;
    }
    .interview_head_catchcopy {
        margin: 2.7rem 0 0;
    }
    .interview_head_catchcopy span {
        /* font-size: 4.8rem; */
    }
    .interview_head_info {
        padding: 0;
        margin: auto 0 0;
    }
    
    .interview_head_img img {
        max-width: inherit;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 49vw -4rem;
    }
}

@media screen and (min-width : 820px) {
    .interview_head_img img {
        object-position: 33vw -4rem;
    }
}

@media screen and (min-width : 1280px) {
    .interview_head_img img {
        object-position: 10vw -4rem;
    }
}

@media screen and (min-width : 1380px) {
    .interview_head_img img {
        object-position: 10vw -4rem;
    }
}

.interview_body {
    background-color: #E7E7E7;
    padding: 4rem 0 0;
}

@media screen and (min-width : 769px) {
    .interview_body {
        padding: 7rem 0 0;
    }
}

.interview_sec {
    margin: 0 0 5rem;
}
.interview_sec_ttl {
    padding: 0 0 2.3rem;
    text-align: center;
    z-index: 1;
    position: relative;
}
.interview_sec_ttl .num {
    font-family: "Goldman", sans-serif;
    font-size: 4.8rem;
    font-weight: 700;
    letter-spacing: 2.4px;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #0099FF;
    color: transparent;
    display: block;
    text-align: center;
    line-height: 1;
    margin: 0 0 .5rem;
}
.interview_sec_ttl .txt {
    flex: 0 0 75%;
    display: flex;
    gap: .8rem;
    align-items: center;
    justify-content: center;
}
.interview_sec_ttl .bubble {
    flex: 0 0 25%;
}
.interview_sec_ttl .bubble img {
    width: 100%;
}
.interview_sec_ttl .main_txt {
    flex: 1 1 auto;
    font-weight: 700;
    padding: 0;
    font-size: 4.8vw;
}
.interview_sec_ttl .bubble + .main_txt {
    text-align: left;
}

@media screen and (min-width : 769px) {
    .interview_sec {
        margin: 0 0 9rem;
    }
    .interview_sec_ttl {
        padding: 0 0 3rem;
    }
    .interview_sec_ttl .num {
        font-size: 7.2rem;
    }
    .interview_sec_ttl .txt {
        gap: 1rem;
    }
    .interview_sec_ttl .bubble {
        flex: 0 0 129px;
    }
    .interview_sec_ttl .main_txt {
        font-size: 2.4rem;
        flex: 0 1 auto;
    }
}

.interview_blk {
    position: relative;
    padding: 0 0 5.6rem;
    margin: 0;
}
.interview_blk::before {
    content: '';
    display: block;
    width: 110%;
    height: 20vh;
    position: absolute;
    bottom: 0;
    right: -13vw;
    z-index: 0;
    background-image: linear-gradient(
        -45deg, 
        #E7E7E7 25%,
        #74C0F3 25%,
        #74C0F3 50%,
        #E7E7E7 50%,
        #E7E7E7 75%,
        #74C0F3 75%,
        #74C0F3);
    background-size: 6px 6px;
    border-radius: 20px;
}
.interview_blk_inner {
    background-color: #fff;
    padding: 3rem 2.5rem 3rem;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15);
    margin: 0;
    position: relative;
    z-index: 1;
}
.interview_blk_ttl {
    color: #0099FF;
    font-size: clamp(1.8rem, 0.625vw + 1.6rem, 2.8rem);
    font-weight: 700;
    padding: 0 2px 5px;
    margin: 0 0 2rem;
}
.interview_blk_ttl strong {
    display: inline;
    padding: 0 0 3px;
    background: linear-gradient(transparent 93%, #8CD1FF 0%);
}
.interview_blk_desc {
    margin: 0;
}
.interview_blk_img {
    position: relative;
    z-index: 2;
    margin-bottom: -6.5rem;
    margin-top: 2rem;
}

@media screen and (min-width : 769px) {
    .interview_blk {
        padding: 0 0 3rem;
        margin: 0;
    }
    .interview_blk_row {
        display: flex;
        justify-content: space-between;
        gap: 6rem;
        padding: 5rem 7rem;
    }
    .interview_blk::before {
        width: 61%;
        height: calc(100% - 270px);
    }
    .interview_blk_txt {
        flex: 1 1 70%;
    }
    .interview_blk_ttl {
        /* font-size: 2.8rem; */
        margin: 0 0 3rem;
    }
    .interview_blk_ttl strong {
        padding: 0 0 6px;
    }
    .interview_blk_img {
        flex: 0 1 460px;
        margin: 0;
    }

    .interview_blk.--img_right .interview_blk_txt {
        order: 1;
    }
    .interview_blk.--img_right .interview_blk_img {
        order: 2;
        margin-right: -16rem;
    }
    .interview_blk.--img_right::before {
        right: -11rem;
    }

    .interview_blk.--img_left .interview_blk_txt {
        order: 2;
    }
    .interview_blk.--img_left .interview_blk_img {
        order: 1;
        margin-left: -16rem;
    }
    .interview_blk.--img_left::before {
        left: -11rem;
    }

}

.interview_sec_bg {
    background-color: #303030;
    padding: 3rem 4vw 1.6rem;
    margin: 0 0 4rem;
    position: relative;
}
.interview_sec_bg .interview_sec_ttl {
    color: #fff;
}
.interview_sec_bg .interview_sec_ttl .num {
    -webkit-text-stroke-color: #fff;
}
.interview_sec_bg_inner {
    background-color: #fff;
    padding: 3rem 2.5rem 2rem;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    width: 100%;
    max-width: 1220px;
    z-index: 1;
    position: relative;
}

.interview_sec_bg_img {
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 6rem);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-color: #303030;
}
.interview_sec_bg_img img {
    width: auto;
    height: 100%;
}

@media screen and (min-width : 769px) {
    .interview_sec_bg {
        margin: 0 0 8rem;
        padding: 9rem 3.2rem 0;
        background-position: 0 0;
        background-size: contain;
        background: none;
    }
    .interview_sec_bg_inner {
        padding: 5rem 7rem 5rem;
    }
}

/* failure_story */
.failure_story {
    margin: 5rem 0 0;
    position: relative;
}
.failure_story_desc {
    background-color: #D9F0FF;
    padding: 5rem 2rem 2rem;
    width: calc(100% + 2rem);
    margin-left: -1rem;
}
@media screen and (min-width : 769px) {
    .failure_story {
        margin: 4rem 0 0;
    }
    .failure_story_desc {
        padding: 5.5rem 5.5rem 4rem;
    }
}

/* 吹き出し */
.failure_story_ttl {
    display: inline-block;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 500;
    padding: 2rem 3rem 2rem 4rem;
    position: relative;
    margin-left: -5.3rem;
    margin-bottom: -2rem;
    width: 110%;
    max-width: 360px;
}
.failure_story_ttl > span {
    z-index: 2;
    position: relative;
}
.failure_story_ttl::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #303030;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: rotate(-0.73deg);
}
.failure_story_ttl::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: solid 7px transparent;
    border-top: solid 26px #303030;
    transform: rotate(-25deg);
    position: absolute;
    left: 5.5rem;
    bottom: -25px;
}

@media screen and (min-width : 769px) {
    /* 吹き出し */
    .failure_story_ttl {
        font-size: 2.0rem;
        padding: 1.6rem 2.5rem 1.8rem;
        border-radius: 40px;
        margin-left: -1rem;
        width: 34rem;
    }
    .failure_story_ttl::after {
        border: solid 7px transparent;
        border-top: solid 26px #303030;
        transform: rotate(-30deg);
        right: calc(50% - 4rem);
        left: 5rem;
        bottom: -28px;
    }
}

#interview_sec05 {
    margin-bottom: 0;
}
#interview_sec05 .interview_blk::before {
    display: none;
}
.interview_bottom_img {
    width: 100%;
    height: 26vh;
    margin-top: -10vh;
}
.interview_bottom_img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
@media screen and (min-width : 769px) {
    .interview_bottom_img {
        height: 692px;
        margin-top: -7rem;
    }
}

.interview_back_btn {
    padding: 4rem 6vw;
    text-align: center;
}
@media screen and (min-width : 769px) {
    .interview_back_btn {
        padding: 6rem 3.4rem;
    }
}

/* Key-points
---------------------------------------*/
.key-points .page_body {
    padding-top: 0;
}
@media screen and (min-width : 769px) {
    .key-points .page_body {
        padding-top: 0;
    }
}

.key_head {
    text-align: center;
    position: relative;
}
.key_head::before {
    content: '';
    display: block;
    width: 200%;
    height: 14.5rem;
    background-color: #D9F0FF;
    position: absolute;
    top: -8rem;
    left: -50%;
    transform: rotate(-10deg);
    z-index: 0;
}
.key_head_inner {
    position: relative;
    z-index: 1;
    padding: 3rem 6vw 3rem;
    margin: 0 auto;
    width: 100%;
    max-width: 1280px;
}
.key_head_img {
    padding: 3rem 0;
    transform: scale(0.8);
    animation: keyHeadImg 1.2s cubic-bezier(.27,.45,.99,.95) forwards;
}
.key_head_img img {
    margin: 0 auto;
}

@keyframes keyHeadImg {
    0% {
        opacity: .5;
        transform: scale(0.8);
    }
    70% {
        opacity: 1;
        transform: scale(1.25);
    }
    80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}


@media screen and (min-width : 769px) {
    .key_head::before {
        width: 150%;
        height: 49%;
        top: -25%;
        left: -25%;
        transform: rotate(-10deg);
    }
    .key_head_inner {
        padding: 3rem 3.4rem 5rem;
        margin: 0 auto 0;
    }
    .key_head_img {
        padding: 6rem 0 0;
    }
}

.key_sec {
    margin: 2rem auto 8rem;
    padding: 0;
    width: 100%;
    max-width: 1080px;
}
.key_sec_inner {
    padding: 0;
}

.key_sec_ttl {
    position: relative;
    display: inline-block;
    margin: 0 0 2rem;
    padding: 0 0 3rem;
}
.key_sec_ttl .txt {
    display: inline-block;
    font-weight: 700;
    font-size: 2.0rem;
    padding: 2rem 3rem;
    background-color: #fff;
    border: solid 3px #0099FF;
    border-radius: 100px;
    position: relative;
    z-index: 1;
}
.key_sec_desc p {
    line-height: 290%;
    display: inline;
    padding: 0 0 1rem;
    background:
    linear-gradient(to right,
      #8CD1FF 0%,
      #8CD1FF 50%,
      rgba(0,0,0,0) 51%,
      rgba(0,0,0,0) 100%)
    repeat-x left bottom/8px 2px;
}
.key_sec_img {
    width: 50%;
    max-width: 320px;
    margin: 2rem 0 0 auto;
}

.key_sec_ttl::before { /* 吹き出しの斜線背景 */
    content: '';
    display: block;
    width: 100%;
    height: calc(100% - 33px);
    position: absolute;
    top: 14px;
    right: -14px;
    z-index: 0;
    background-image: linear-gradient(
        -45deg, 
        #FAFAFA 25%, 
        #74C0F3 25%, 
        #74C0F3 50%, 
        #FAFAFA 50%, 
        #FAFAFA 75%, 
        #74C0F3 75%, 
        #74C0F3
    );
    background-size: 6px 6px;
    border-radius: 100px;
}
.key_sec_ttl::after { /* 吹き出ししっぽの斜線部分 */
    content: '';
    display: block;
    height: 41px;
    width: 80px;
    clip-path: polygon(47% 0%, 100% 0, 37% 100%);
    background-image: linear-gradient(
        -45deg, 
        #FAFAFA 25%, 
        #74C0F3 25%, 
        #74C0F3 50%, 
        #FAFAFA 50%, 
        #FAFAFA 75%, 
        #74C0F3 75%, 
        #74C0F3
    );
    background-size: 6px 6px;
    position: absolute;
    bottom: -15px;
    right: 32px;
    z-index: 0;
}
.balloon_tail { /* 吹き出ししっぽ */
    height: 41px;
    width: 56px;
    position: absolute;
    right: 45px;
    bottom: -8px;
    z-index: 3;
    background: url(/fileadmin/templates2020/tcc-recruit/images/business/key-points/balloon_tail.svg) no-repeat center;
    background-size: contain;
}

@media screen and (min-width : 769px) {
    .key_sec_ttl {
        font-size: 3.6rem;
        margin: 0 0 1rem;
        padding: 0 0 5rem;
    }
    .key_sec_ttl .txt {
        font-size: 3.62rem;
        padding: 4rem 7rem;
        line-height: 1.648;
    }
    .key_sec_ttl::before { /* 吹き出しの斜線背景 */
        content: '';
        display: block;
        width: 100%;
        height: calc(100% - 50px);
    }
    .key_sec_ttl::after { /* 吹き出ししっぽの斜線部分 */
        height: 54px;
        width: 88px;
        bottom: -4px;
        right: 84px;
    }
    .balloon_tail { /* 吹き出ししっぽ*/
        height: 54px;
        width: 64px;
        right: 95px;
        bottom: -1px;
    }

}

#key_sec01 .key_sec_img {
    width: 50%;
}
#key_sec02 .key_sec_img {
    width: 55%;
}
#key_sec03 .key_sec_img {
    width: 45%;
}
#key_sec04 .key_sec_img {
    width: 45%;
}


#key_sec01 .key_sec_ttl::after{
    right: 30px;
}
#key_sec02 .key_sec_ttl::after{
    right: 32px;
}
#key_sec03 .key_sec_ttl::after{
    right: 34px;
}
#key_sec04 .key_sec_ttl::after{
    right: 32px;
}
@media screen and (min-width : 769px) {
    #key_sec01 .key_sec_ttl::after{
        right: 84px;
    }
    #key_sec02 .key_sec_ttl::after{
        right: 88px;
    }
    #key_sec03 .key_sec_ttl::after{
        right: 88px;
    }
    #key_sec04 .key_sec_ttl::after{
        right: 84px;
    }
}

@media screen and (min-width : 769px) {
    .key_sec {
        margin: 7rem auto 12rem;
        padding: 0;
    }
    .key_sec_inner {
        padding: 0 0 0 6rem;
        display: flex;
        justify-content: space-between;
        gap: 4rem;
    }
    .key_sec_desc {
        flex: 1 1 60%;
        max-width: 630px;
    }
    .key_sec_img {
        flex: 0 0 30%;
        max-width: 320px;
    }
    .key_sec_img img {
        width: auto;
    }

    #key_sec01 {
        margin-bottom: 10rem;
    }
    #key_sec01 .key_sec_img {
        max-width: 265px;
    }
    #key_sec02 .key_sec_img {
        max-width: 316px;
        margin-top: -6rem;
    }
    #key_sec03 .key_sec_img {
        max-width: 292px;
        margin-top: -9rem;
    }
    #key_sec04 .key_sec_img {
        max-width: 206px;
        margin-top: 3rem;
    }
}

/* Tech-roles
---------------------------------------*/
.tech-roles .page_body {
    padding: 3rem 0 4rem;
}
@media screen and (min-width : 769px) {
    .tech-roles .page_body {
        padding: 3rem 0 5rem;
    }
}

.tech-roles .page_head {
    background: url(/fileadmin/templates2020/tcc-recruit/images/business/tech-roles/technology_main_sp.jpg) no-repeat center bottom;
    background-size: cover;
}
@media screen and (min-width : 769px) {
    .tech-roles .page_head {
        background: url(/fileadmin/templates2020/tcc-recruit/images/business/tech-roles/technology_main.jpg) no-repeat center;
        background-size: cover;
    }
}

/* work */
.tech_work_blk {
    margin: 5rem auto;
}
.tech_work_blk_ttl {
    margin: 4rem 0 2rem;
}
.tech_work_blk_desc {
    margin: 0 0 2rem;
}
.tech_work_blk_img {
    margin: 4rem 0 0;
}
.tech_work_blk_img img {
    margin: 0 auto 2.6rem;
}

@media screen and (min-width : 769px) {
    .tech_work_lead {
        text-align: center;
        font-size: 2.0rem;
    }
    .tech_work_blk {
        margin: 12rem auto 5rem;
        display: flex;
        gap: 10rem;
        justify-content: space-between;
    }
    .tech_work_blk_txt {
        order: 2;
        flex: 1 1 53%;
    }
    .tech_work_blk_img {
        order: 1;
        flex: 0 1 47%;
        max-width: 460px;
        margin: 0;
    }
    .tech_work_blk_txt > *:first-child {
        margin-top: 0;
    }
    .tech_work_blk_ttl {
        margin: 5rem 0 2rem;
    }
    .tech_work_blk_desc {
        margin: 0 0 3rem;
    }
}

/* social */
.tech_social {
    margin: 6rem 0 0;
}
.tech_social_lead  {
    margin: 0 0 2.5rem;
}
.tech_social_lead_sub {
    margin: 4rem 0 2rem;
}
.tech_social_blk {
    margin: 3rem auto;
    position: relative;
}
.tech_social_blk_ttl {
    margin: 4rem 0 2rem;
}
.tech_social_blk_desc {
    margin: 0 0 2rem;
}
.tech_social_blk_img {
    margin: 4rem 0 0;
}
.tech_social_blk_img img {
    position: relative;
    z-index: 1;
}
.tech_social_blk_btn {
    margin: 4rem 0 0;
}
.tech_social_blk_txt ul {
    line-height: 160%;
}
.tech_social_blk_txt ul li {
    margin: 0 0 .7rem;
    text-indent: -.5em;
    padding-left: .5em;
}

.tech_social_blk_img::before {
    content: '';
    display: block;
    width: 110%;
    height: 110%;
    background-image: radial-gradient(rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    top: -5%;
    left: -5%;
    z-index: 0;
    border-radius: 100%;
}
.tech_social_blk::before,
.tech_social_blk::after {
    content: '';
    display: block;
    width: 80%;
    height: 20%;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/home/home_about_bg.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    z-index: -1;
}
.tech_social_blk::before {
    bottom: 19%;
    left: -67%;
}
.tech_social_blk::after {
    bottom: -12%;
    right: -60%;
}

@media screen and (min-width : 769px) {
    .tech_social {
        margin: 16rem 0 0;
    }
    .tech_social_lead {
        text-align: center;
        font-size: 2.0rem;
    }
    .tech_social_lead_sub {
        text-align: center;
        margin: 6rem 0 2rem;
    }
    .tech_social_blk {
        margin: 11rem auto 5rem;
        display: flex;
        gap: 8rem;
        justify-content: space-between;
        position: relative;
    }
    .tech_social_blk_txt {
        order: 2;
        flex: 0 1 30%;
    }
    .tech_social_blk_img {
        order: 1;
        flex: 0 1 70%;
        max-width: 742px;
        margin: 0;
    }
    .tech_social_blk_txt > *:first-child {
        margin-top: 0;
    }
    .tech_social_blk_ttl {
        margin: 5rem 0 2rem;
    }
    .tech_social_blk_desc {
        margin: 0 0 3rem;
    }
    .tech_social_blk_txt ul li {
        margin: 0 0 1.2rem;
    }
    .tech_social_blk_btn {
        margin: 3rem 0 0;
    }

    .tech_social_blk_img::before {
        width: 200%;
        height: 150%;
        top: -30%;
        left: -50%;
    }
    .tech_social_blk::before,
    .tech_social_blk::after {
        width: 100%;
        height: 150%;
    }
    .tech_social_blk::before {
        top: -81%;
        left: -84%;
    }
    .tech_social_blk::after {
        bottom: -92%;
        right: -52%;
    }
}

/* job */
.tech_job {
    margin: 7.5rem 0 0;
}
.tech_job_lead {
    position: relative;
    z-index: 1;
}
.tech_job_img {
    text-align: center;
    margin: 4rem auto;
    position: relative;
    z-index: 1;
}
.tech_job_img img {
    margin: 0 auto;
}

@media screen and (min-width : 769px) {
    .tech_job {
        margin: 12rem 0 0;
    }
    .tech_job_lead {
        text-align: center;
        font-size: 2.0rem;
    }
}

/* tech_job_list */
.tech_job_list_wrap {
    background-color: #D9F0FF;
    padding: 5rem 0 3rem;
    position: relative;
}
.tech_job_list_wrap::before {
    content: '';
    display: block;
    width: 200%;
    height: 14.5rem;
    background-color: #D9F0FF;
    position: absolute;
    top: -8rem;
    left: -50%;
    transform: rotate(-10deg);
    z-index: 0;
}
.tech_job_list {
    padding: 3rem 0 0;
}
.tech_job_list_item {
    position: relative;
    background-color: #fff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
}
.tech_job_list_item + .tech_job_list_item {
    margin-top: 8rem;
}
.tech_job_list_item_head {
    background-color: #fff;
    padding: 5rem 2rem 2.5rem;
    position: relative;
    z-index: 1;
}
.tech_job_list_item_body {
    padding: 3rem 2rem 2rem;
    position: relative;
    z-index: 1;
}
.tech_job_list_item_ttl {
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    text-align: center;
    margin: 0 auto;
    background-color: #fff;
    margin-top: -10rem;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    position: relative;
}
.tech_job_list_item_ttl .icon {
    width: auto;
    height: 38%;
    max-height: 60px;
}
.tech_job_list_item_ttl .border {
    width: 70px;
    height: 70px;
    overflow: hidden;
    transform: rotate(-135deg);
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    margin: auto;
}
.tech_job_list_item_ttl .border:before {
    content: '';
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 8px solid #0069AE;
}


@media screen and (max-width : 768px) {
    .tech_job_list_item_img {
        position: absolute;
        bottom: 0;
        z-index: 0;
        opacity: .15;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .tech_job_list_item_img img {
        width: auto;
        height: 100%;
    }
}

@media screen and (min-width : 769px) {
    .tech_job_list_wrap {
        padding: 5rem 0 9rem;
    }
    .tech_job_list_wrap::before {
        width: 150%;
        height: 40%;
        top: -6%;
        left: -25%;
        transform: rotate(-8deg);
    }
    .tech_job_list {
        padding: 7rem 0 0;
    }
    .tech_job_list_item + .tech_job_list_item {
        margin-top: 4.3rem;
    }
    .tech_job_list_item_row {
        display: flex;
        justify-content: space-between;
        gap: 6rem;
    }
    .tech_job_list_item_txt {
        flex: 1 0 63%;
        padding: 0 0 5rem 4.8rem;
    }
    .tech_job_list_item_img {
        flex: 0 1 38%;
        max-width: 373px;
    }
    .tech_job_list_item_img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .tech_job_list_item_ttl {
        flex: 0 0 160px;
        width: 160px;
        height: 160px;
        font-size: 2.0rem;
        margin: 0;
    }
    .tech_job_list_item_ttl .border {
        width: 90px;
        height: 90px;
        bottom: -21px;
    }
    .tech_job_list_item_ttl .border:before {
        width: 160px;
        height: 160px;
    }

    .tech_job_list_item_head {
        display: flex;
        gap: 2.2rem;
        align-items: center;
        background: none;
        margin-top: -2rem;
        padding: 0;
    }
    .tech_job_list_item_catchcopy {
        margin: 3.2rem 0 0;
    }
    .tech_job_list_item_body {
        margin: 5rem 0 0;
        padding: 0 0 0 1rem;
    }
    .tech_job_list_item_btns {
        margin: 6rem 0 0;
        padding: 0;
        justify-content: flex-start;
    }
    
}

@media screen and (max-width : 1226px) {
    .tech_job_list_item_catchcopy br {
        display: none;
    }
}

.tech_job_list_item.manufacture .tech_job_list_item_ttl,
.tech_job_list_item.manufacture .border:before {
    color: #0069AE;
    border-color: #0069AE;
}
.tech_job_list_item.technology .tech_job_list_item_ttl,
.tech_job_list_item.technology .border:before {
    color: #009FE8;
    border-color: #009FE8;
}
.tech_job_list_item.management .tech_job_list_item_ttl,
.tech_job_list_item.management .border:before {
    color: #F8A117;
    border-color: #F8A117;
}
.tech_job_list_item.sales .tech_job_list_item_ttl,
.tech_job_list_item.sales .border:before {
    color: #8253DF;
    border-color: #8253DF;
}
.tech_job_list_item.manufacture-tech .tech_job_list_item_ttl,
.tech_job_list_item.manufacture-tech .border:before {
    color: #1DAF81;
    border-color: #1DAF81;
}

/* tech_bnr_key */
.tech_bnr_key {
    text-align: center;
    margin: 4rem 0 0;
}
.tech_bnr_key a {
    transition: transform .3s ease-in-out;
}
.tech_bnr_key a:hover {
    transform: translate(0, -1rem);
}
@media screen and (min-width : 769px) {
    .tech_bnr_key {
        margin: 6rem 0 0;
    }
}

/* Scene
---------------------------------------*/
.scene .page_body {
    padding: 0;
}
@media screen and (min-width : 769px) {
    .scene .page_body {
        padding: 4rem 0 0;
    }
}

.scene .page_head {
    background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/scene/scene_main_sp.jpg) no-repeat center bottom;
    background-size: cover;
}

@media screen and (min-width : 769px) {
    .scene .page_head {
        background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/scene/scene_main.jpg) no-repeat center;
        background-size: cover;
    }
}

.scene_lead_img {
    text-align: center;
    margin: 0;
}
.scene_lead_img img {
    margin: 0 auto;
}
@media screen and (min-width : 769px) {
    .scene_lead {
        text-align: center;
        font-size: 2.0rem;
        max-width: 85rem;
        margin: 5rem auto 0;
    }

}

/* scene_list */
.scene_list {
    margin: 5rem 0 6rem;
}
.scene_list_item + .scene_list_item {
    margin-top: 5rem;
}
.scene_list_item_img {
    position: relative;
    padding: 2rem 8rem;
    width: 100%;
    margin: 2rem auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene_list_item_img img {
    position: relative;
    z-index: 1;
    width: auto;
    max-width: 200px;
    max-height: 130px;
    margin: 0 auto;
}
.scene_list_item_img::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_chain_border.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0;
    opacity: .3;
}

.scene_list_item_ttl {
    margin: 0 0 1.5rem;
}

@media screen and (min-width : 769px) {
    .scene_list {
        margin: 7rem auto 13rem;
    }
    .scene_list_item + .scene_list_item {
        margin-top: 8rem;
    }
    .scene_list_item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 4.7rem;
    }
    .scene_list_item_img {
        flex: 0 0 400px;
        height: 333px;
        padding: 4rem 0rem;
        margin: 2rem auto 0;
    }
    .scene_list_item_img img {
        width: auto;
        max-width: 100%;
        max-height: 244px;
        margin: 0 auto;
    }
    .scene_list_item_img::before {
    /* width: 80%; */
    }
    .scene_list_item_txt {
        flex: 0 1 58%;
    }
    .scene_list_item_ttl {
        margin: 0 0 2rem;
    }
    .scene_list_item:nth-of-type(odd) {
        flex-flow: row-reverse;
    }
    .scene_list_item:nth-of-type(even) .scene_list_item_txt {
        padding-left: 10rem;
    }
}

/* scene_product */
.scene_product {
    background-color: #E7E7E7;
    padding: 1rem 0 3rem;
}
.scene_product_list_item {
    background: #FAFAFA;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    margin: 0 0 2rem;
    padding: 2rem;
}
.scene_product_list_item_img {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 0 0 1.5rem;
}
.scene_product_list_item_txt .ttl {
    margin: 0 0 1rem;
}
.scene_product_list_item_btn {
    margin: 2rem 0 0;
}

@media screen and (min-width : 769px) {
    .scene_product {
        padding: 3rem 0 6rem;
    }
    .scene_product_list {
        margin: 7rem 0 0;
    }
    .scene_product_list_item {
        padding: 5rem 5rem;
    }
    .scene_product_list_item_row {
        display: flex;
        justify-content: space-between;
        gap: 5rem;
    }
    .scene_product_list_item_img {
        flex: 0 1 67%;
    }
    .scene_product_list_item_txt {
        flex: 1 1 33%;
    }
    .scene_product_list_item_btn {
        margin: .5rem 0 0;
    }
}

/* 3min
---------------------------------------*/
.three .page_body {
    padding-bottom: 0;
}
@media screen and (min-width : 769px) {
    .three .page_body {
        padding-top: 4rem;
    }
}

.three .page_head {
    background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/3min/3min_main_sp.jpg) no-repeat center bottom;
    background-size: cover;
}

@media screen and (min-width : 769px) {
    .three .page_head {
        background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/3min/3min_main.jpg) no-repeat center;
        background-size: cover;
    }
}

.three_lead {
    margin: 5rem auto 3.5rem;
}
.three_lead_img {
    text-align: center;
    margin: 0;
}
.three_lead_img img {
    margin: 0 auto;
}
@media screen and (min-width : 769px) {
    .three_lead {
        text-align: center;
        font-size: 2.0rem;
        max-width: 85rem;
        margin: 8rem auto 6rem;
    }
}

.three_primary_anchor {
    margin: 6rem 0 5rem;
}
.three_primary .headline02 {
    position: relative;
}
.three_primary .headline02::before {
    content: '';
    display: block;
    width: 133px;
    height: 133px;
    background-image: url(/fileadmin/templates2020/tcc-recruit/images/common/icon_chain_border.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    opacity: .2;
    z-index: -1;
}
@media screen and (min-width : 769px) {
    .three_primary_anchor {
        margin: 5rem 0 4rem;
    }
}

/* three_biz */
.three_biz {
    padding: 1rem 0 3rem;
    background: #D9F0FF url(/fileadmin/templates2020/tcc-recruit/images/about-us/3min/3min_bg.png) no-repeat center;
    background-size: cover;
}
@media screen and (min-width : 769px) {
    .three_biz {
        padding: 1rem 0 13rem;
    }
}

.three_biz_list {
    margin: 3rem auto;
}
.three_biz_list_item {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    margin: 0 0 4rem;
    position: relative;
}
.three_biz_list_item::before {
    content: '';
    display: block;
    width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    position: absolute;
    bottom: -20px;
    right: -20px;
    z-index: 0;
    background-image: linear-gradient(
        -45deg, 
        #fff 25%,
        #74C0F3 25%,
        #74C0F3 50%,
        #fff 50%,
        #fff 75%,
        #74C0F3 75%,
        #74C0F3);
    background-size: 6px 6px;
    border-radius: 20px;
    opacity: .5;
}
.three_biz_list_item_inner {
    z-index: 1;
    position: relative;
    background: #FFF;
    padding: 3rem 2.5rem 2.5rem;
}

.three_biz_list_item_ttl {
    background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/3min/3min_ttl_balloon.svg) no-repeat 0 bottom;
    background-size: 100%;
    padding: 0 0 3rem;
    margin: 0 0 2rem;
}
.three_biz_list_item_img {
    margin: 2rem auto 0;
}
.three_biz_share .three_biz_list_item_img {
    width: 60%;
    margin: 0 auto 2.2rem;
}
.three_biz_list_item_btn {
    margin: 2.2rem 0 0;
}

.three_biz_scene_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4%;
    justify-content: center;
    margin: 3.5rem 0 2.5rem;
}
.three_biz_scene_list li {
    flex: 0 0 30%;
    text-align: center;
}
.three_biz_scene_list .txt {
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
.three_biz_scene_list .img {
    position: relative;
    margin: 0 auto .5rem;
    width: 70px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.three_biz_scene_list .img::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: #F3F3F3;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.three_biz_scene_list .img img {
    z-index: 1;
    position: relative;
}

@media screen and (min-width : 769px) {
    .three_biz_list_item_inner {
        padding: 7rem 6rem 8rem;
    }
    .three_biz_list_item_ttl {
        padding: 0 0 4.5rem;
        margin: 0 0 4rem;
        display: inline-block;
    }

    /* three_biz_share */
    .three_biz_share .three_biz_list_item_inner {
        padding-left: 9rem;
    }
    .three_biz_share .three_biz_list_item_ttl {
        width: 59%;
    }
    .three_biz_share .three_biz_list_item_row {
        display: flex;
        justify-content: space-between;
        gap: 5rem;
    }
    .three_biz_share .three_biz_list_item_img {
        order: 2;
        flex: 0 0 215px;
        margin: 0 auto;
    }
    .three_biz_share .three_biz_list_item_img img {
        margin: 0 auto;
    }
    .three_biz_share .three_biz_list_item_desc {
        flex: 0 1 59%;
    }
    .three_biz_share .three_biz_list_item_btn {
        margin: 3.5rem 0 0;
    }

    /* three_biz_scene */
    .three_biz_scene {
        text-align: center;
    }
    .three_biz_scene_list {
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        gap: 2rem;
        margin: 5rem 0 5rem;
    }
    .three_biz_scene_list li {
        flex: 0 1 180px;
    }
    .three_biz_scene_list .img {
        width: 100%;
        height: 180px;
        margin: 0 0 1.7rem;
    }
    .three_biz_scene_list .txt {
        font-size: 1.6rem;
    }
    .three_biz_scene .three_biz_list_item_btn {
        margin: 7rem 0 0;
    }
}

/* three_biz_manufacture */
.three_biz_manufacture .three_biz_list_item_ttl,
.three_biz_location .three_biz_list_item_ttl {
    font-size: 1.8rem;
    line-height: 1.5;
}
.three_biz_manufacture .three_biz_list_item_ttl strong,
.three_biz_location .three_biz_list_item_ttl strong {
    display: block;
    font-size: 2.6rem;
}
.three_biz_manufacture .three_biz_list_item_img,
.three_biz_location .three_biz_list_item_img {
    position: relative;
    margin: 3rem -2.5rem 0 auto;
    width: 90%;
}
.three_biz_manufacture .three_biz_list_item_img::before,
.three_biz_location .three_biz_list_item_img::before {
    content: '';
    display: block;
    width: 100%;
    height: 25px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
    position: absolute;
    bottom: -25px;
    right: 0;
    z-index: 2;
    background-image: linear-gradient(
        -45deg, 
        #fff 25%,
        #74C0F3 25%,
        #74C0F3 50%,
        #fff 50%,
        #fff 75%,
        #74C0F3 75%,
        #74C0F3);
    background-size: 6px 6px;
    opacity: .5;
}
.three_biz_manufacture .three_biz_list_item_img img,
.three_biz_location .three_biz_list_item_img img {
    position: relative;
    z-index: 1;
}

@media screen and (min-width : 769px) {
    .three_biz_manufacture .three_biz_list_item_ttl,
    .three_biz_location .three_biz_list_item_ttl {
        font-size: 2.8rem;
        line-height: 1.5;
        margin: 0 0 3.5rem;
    }
    .three_biz_manufacture .three_biz_list_item_ttl strong,
    .three_biz_location .three_biz_list_item_ttl strong {
        display: inline-block;
        font-size: 4.8rem;
        margin: 0 0 0 .5rem;
    }
    .three_biz_manufacture .three_biz_list_item_row,
    .three_biz_location .three_biz_list_item_row {
        display: flex;
        justify-content: space-between;
        gap: 7rem;
        align-items: center;
    }
    .three_biz_manufacture .three_biz_list_item_txt,
    .three_biz_location .three_biz_list_item_txt {
        flex: 0 1 70%;
    }
    .three_biz_manufacture .three_biz_list_item_img,
    .three_biz_location .three_biz_list_item_img {
        flex: 0 1 424px;
        margin: 0;
        margin-right: -8rem;
    }
    .three_biz_manufacture .three_biz_list_item_img::before,
    .three_biz_location .three_biz_list_item_img::before {
        height: 43px;
        bottom: -43px;
        clip-path: polygon(0% 0%, 95% 0%, 95% 100%);
    }

}


/* three_number */
.three_number_panels {
    margin: 6rem auto 4rem;
    width: 90%;
}
.three_number_panel {
    text-align: center;
    padding: 10vh 0 11vh;
    position: relative;
}
.three_number_panel_dt .ttl {
    background-color: #D0ECFF;
    border-radius: 15px;
    text-align: center;
    display: inline-block;
    padding: .8rem 3rem;
    margin: 0 0 1.5rem;
    font-size: 1.8rem;
    font-weight: 700;
}
.three_number_panel_dd .main_txt {
    display: inline-block;
    letter-spacing: 0;
    -webkit-text-stroke-width: 3px;
    -webkit-text-stroke-color: #0099FF;
    color: #fff;
    line-height: 1.4;
    text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
}
.three_number_panel_dd .main_txt.en {
    font-family: "Goldman", sans-serif;
    font-weight: 700;
    font-size: 7rem;
    line-height: 1;
}
.three_number_panel_dd .main_txt.ja {
    font-size: clamp(3rem, 0.375vw + 2.88rem, 3.6rem);
    font-weight: 900;
    text-align: left;
    margin: .5rem 0 0;
    letter-spacing: -.2rem;
    -webkit-text-stroke-width: 2px;
}

.three_number_panel_dd .sub_txt {
    display: inline-block;
    color: #0099FF;
    font-weight: 700;
    font-size: 2.6rem;
    margin: 0 0 0 .5rem;
}

@media screen and (max-width : 768px) {
    .three_number_panel:first-of-type {
        padding-top: 0;
    }
    .three_number_panel + .three_number_panel::before {
        content: '';
        display: block;
        width: 84%;
        height: 3px;
        background-color: #E7E7E7;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: -1;
    }
    .three_number_panel.panel03 {
        padding-bottom: 9rem;
    }
    .three_number_panel.panel08 {
        padding-bottom: 8rem;
    }
    .three_number_panel.panel09 {
        padding-bottom: 9rem;
    }
}

@media screen and (min-width: 769px) {
    .three_number {
        padding: 6rem 0 4rem;
    }
    .three_number_panels {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin: 7rem 0 2rem;
    }
    .three_number_panel:nth-of-type(-n+3) {
        padding-bottom: 9rem;
    }
    .three_number_panel:nth-of-type(4),
    .three_number_panel:nth-of-type(5),
    .three_number_panel:nth-of-type(6) {
        padding-top: 6rem;
        padding-bottom: 6.5rem;
    }
    .three_number_panel {
        flex: 1 1 33%;
        display: flex;
        flex-flow: column;
        justify-content: flex-start;
        padding: 4.5rem 3.5rem 5rem;
    }
    .three_number_panel_dt .ttl {
        font-size: 2.4rem;
        padding: 1.3rem 4rem;
        margin: 0 0 2.5rem;
        border-radius: 25px;
    }
    .three_number_panel_dd .main_txt.en {
        font-size: 7.2rem;
    }
    .three_number_panel_dd .sub_txt {
        font-size: 3.6rem;
        line-height: 1;
        margin: 0 0 0 1rem;
    }
    .three_number_panel_dd .main_txt.ja {
        /* font-size: 3.6rem; */
        -webkit-text-stroke-width: 2px;
        line-height: 1.3;
    }
    .three_number_panel::before,
    .three_number_panel::after {
        content: '';
        display: block;
        background-color: #E7E7E7;
        position: absolute;
        z-index: -1;
    }
    .three_number_panel::before { /* 横線 */
        width: calc(100% - 12px);
        height: 3px;
        top: -1.5px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .three_number_panel::after { /* 縦線 */
        width: 3px;
        height: calc(100% - 12px);
        top: 0;
        bottom: 0;
        right: -1.5px;
        margin: auto;
    }
    .three_number_panel:nth-of-type(-n+3)::before {
        display: none;
    }
    .three_number_panel:nth-of-type(3n)::after {
        display: none;
    }
}


.three_number_img {
    position: absolute;
    background-color: #FAFAFA;
    padding: 10px 10px;
    z-index: 2;
    border-radius: 50%;
}
.three_number_img img {
    width: auto;
    height: auto;
    max-height: 100%;
    margin: 0 auto;
}
.three_number_panel.panel03 .three_number_img {
    left: 0;
    right: 0;
    bottom: -123px;
    width: 156px;
    height: 100px;
    margin: auto;
}
.three_number_panel.panel04 .three_number_img {
    right: -10px;
    bottom: -124px;
    width: 130px;
    height: 100px;
}
.three_number_panel.panel08 .three_number_img {
    left: -12px;
    bottom: -127px;
    width: 130px;
    height: 112px;
}
.three_number_panel.panel09 .three_number_img {
    right: 20px;
    bottom: -142px;
    width: 220px;
    height: 144px;
}

@media screen and (min-width : 769px) {
    .three_number_img {
        padding: 20px;
    }
    .three_number_panel.panel03 .three_number_img {
        left: inherit;
        right: 0;
        bottom: -135px;
        width: 187px;
        height: 123px;
    }
    .three_number_panel.panel04 .three_number_img {
        right: -90px;
        bottom: -63px;
        width: 138px;
        height: 123px;
    }
    .three_number_panel.panel08 .three_number_img {
        left: inherit;
        right: -86px;
        bottom: -91px;
        width: 125px;
        height: 101px;
        transform: scale(-1, 1);
    }
    .three_number_panel.panel09 .three_number_img {
        right: -18px;
        bottom: -78px;
        width: 181px;
        height: 126px;
    }
}

/* three_qa */
.three_qa {
    padding: 0 0 4rem;
    margin: 0 auto;
}
.three_qa_blk_question {
    display: flex;
    gap: 1rem;
    margin: 0 0 1rem 0;
}
.three_qa_blk_question .alphabet {
    font-family: "Goldman", sans-serif;
    color: #0099FF;
    font-size: 5rem;
    line-height: 1;
}
.three_qa_blk_question .txt {
    margin: .5rem 0 0;
}
.three_qa_blk_question .sub_txt {
    color: #0099FF;
    font-weight: 700;
    font-size: 1.6rem;
    display: block;
}
.three_qa_blk_question .main_txt {
    font-weight: 700;
    font-size: 2.0rem;
    display: block;
}
.three_qa_blk_answer {
    color: #fff;
    text-align: center;
    font-weight: 700;
    font-size: 2.2rem;
    height: 42vw;
    max-width: 480px;
    max-height: 250px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 4.2rem 1rem;
    position: relative;
    width: 88%;
}
.three_qa_blk_answer::before {
    content: '';
    display: block;
    background: url(/fileadmin/templates2020/tcc-recruit/images/about-us/3min/3min_qa_balloon.svg) no-repeat center;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.three_qa_blk_answer * {
    position: relative;
    z-index: 1;
}
.three_qa_person {
    width: 43%;
    max-width: 250px;
    margin: 0 0 0 auto;
}

@media screen and (max-width : 768px) {
    .three_qa {
        max-width: 600px;
    }
    .three_qa_blk {
        margin: 0 0 1rem;
        width: 100%;
        max-width: 480px;
    }
    .three_qa_blk + .three_qa_blk {
        margin-top: 4rem;
    }
    .three_qa_blk:nth-of-type(1) .three_qa_blk_answer {
        margin-left: auto;
    }
    .three_qa_blk:nth-of-type(1) .three_qa_blk_answer::before {
        transform: scale(-1, 1);
    }
    .three_qa_blk:nth-of-type(2) {
        width: 100%;
    }
    .three_qa_blk:nth-of-type(2) .three_qa_blk_answer {
        width: 88%;
    }
}

@media screen and (min-width : 481px) {
    .three_qa_blk:nth-of-type(2) .three_qa_blk_answer {
        width: 100%;
    }
}

@media screen and (min-width : 769px) {
    .three_qa {
        padding: 14rem 0 6rem;
    }
    .three_qa_blk {
    flex: 0 1 526px;
    }
    .three_qa_row {
        display: flex;
        justify-content: center;
        gap: 6rem;
    }
    .three_qa_blk_question {
        gap: 2rem;
        margin: 0 0 4rem;
    }
    .three_qa_blk_question .alphabet {
        font-size: 9.6rem;
    }
    .three_qa_blk_question .txt {
        margin: 1.4rem 0 0;
    }
    .three_qa_blk_question .sub_txt {
        font-size: 2.4rem;
    }
    .three_qa_blk_question .main_txt {
        font-size: 2.8rem;
        margin: .5rem 0 0;
    }
    .three_qa_blk_answer {
        font-size: 3.6rem;
        padding: 0 0 7.2rem 1rem;
        margin: 0 0 0 2rem;
    }
    .three_qa_blk:nth-of-type(2) .three_qa_blk_answer::before {
        transform: scale(-1, 1);
    }
    .three_qa_blk:nth-of-type(2) .three_qa_blk_question {
        margin-bottom: 6rem;
       
    }
    .three_qa_person {
        margin: -2rem auto 0;
        max-width: 192px;
    }
}