@charset "UFT-8";

body{
  font-family: 'Noto sans JP';
  width: 100vw;
  background-color: #F5F5FB;
  font-size: 16px;
  padding-top: 100px; /* ヘッダーの高さ分+4px */
}

a{
  text-decoration: none;
}

.content{
  max-width: 80%;
  padding: 0 44px;
  margin: 0 auto;
  display: flex;
}

p{
  line-height: 170%;
  }

  /* recruit特有のため、headerに移管しない */
  .header__logo-bk img{
    padding-top: 25px;
  }

/* pc版ではハンバーガーメニューを常に非表示 */
.logo__hamburger-none{
  display: none;
}

.dli-chevron-down {
  margin-top: 8px;
  margin-left: 8px;
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 0.7em;
  height: 0.7em;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
}


/*ぱんくずリスト部分*/
.breadcrumbs {
    display: flex;
    padding-top: 32px;
    padding-bottom: 24px;
}

.breadcrumbs p {
    color: #6E6E6E;
    display: block;
    border-bottom: #F5F5FB 1px solid;
    transition-duration: 150ms;
    /*要素が変化するまでの時間を指定*/
}

.bread__nav-recruit{
    color: #20337A;
    font-weight: 700;
    font-size: 16px;
    line-height: 170%;
}

.breadcrumbs svg{
    margin: 8px 10px 0px 10px;
}

.tri_arrow::before{
    content:'';
}

/* ぱんくずホバー処理 */
.breadcrumbs p:hover{
    border-bottom: #6E6E6E 1px solid;
}

/* メインとpcメニューを横並びに */
.contents__and-menu-flex{
display: flex;
}


/*JD部分の色・余白など*/
.container__body-mainview{
    background-color: #FFFFFF;
    margin: 0 auto 96px auto;
    width: 58vw;

}
.container__body-maintext p{
    padding: 0 8px 8px 8px;
}

.container__body-maintext{
    padding: 0 10% 8% 10%;
}

.section__carrier-name {
    padding-top: 56px;
    font-family: 'Noto Serif JP';
    font-weight: 700;
    font-size: 36px;
    color: #20337A;
}

.section__carrier-contents {
    font-weight: 500;
    font-size: 24px;
    border-bottom: #20337A 2px solid;
    padding: 8px 0;
    margin-top: 6%;
    margin-bottom: 4%;
}

.section__carrier-lists{
    margin: 0;
    text-indent: -1em;
    padding-left: 1.7em;
}

.section__carrier-heading{
    font-size: 16px;
    font-weight: 500;
    padding: 8px 0;
    text-wrap: wrap;
    margin: 32px 0 2px 0;
}

.section__carrier-content{
    margin-bottom: 24px;
}

.section__carrier-list::before{
    content:  "";
    width:  4px;
    height:  4px;
    display:  inline-block;
    background-color: #000;
    border-radius:  50%;
    position:  relative;
    top: -3px;
    margin: 0 8px 0 4px ;
}

.section__carrier-heading_shape_square::before{
    content:  "";
    width:  14px;
    height:  14px;
    display:  inline-block;
    background-color: #000;
    position:  relative;
    top: 0px;
    margin-right: 8px ;
    z-index:1;
}

.section__carrier-orderedlists{
    padding-left: 20px;
}

.section__carrier-orderedlist{
    padding-left: 4px;
}

.section__carrier-list-headling{
    font-weight: 400;
}

.section__carrier-list-headling_dot_large::before{
    content:  "";
    width:  14px;
    height:  14px;
    display:  inline-block;
    background-color: #000;
    border-radius:  50%;
    position:  relative;
    top: 2px;
    margin: 0 4px 0 8px ;
}


/*以下テーブルの記載-pc版*/
.section__carrier-working-conditions {
    font-family: 'Noto sans JP';
    text-align: left;
    border-left: #485A9C 2px solid;
    border-spacing:0;
    margin-top: 72px;
}

.column-1{
    white-space: nowrap;
    min-width: 12vw;
    font-weight: semibold;
    background-color: #FAFAFD;
    padding: 24px;
    margin-right: 100px;
    border-bottom: #F5F5FB 1px solid;
}
.column-2{
    font-weight: 400;
    background-color: #FFFFFF;
    padding: 24px;
    border-top: #EEEEF0 solid 1px;
    border-right: #EEEEF0 solid 1px;
}

.section__carrier-working-conditions small{
    font-size: 12px;
    color: #6E6E6E;
}

.benefits-list::before{
    content:  "";
    width:  14px;
    height:  14px;
    display:  inline-block;
    background-color: #000;
    position:  relative;
    top: 0px;
    margin-right: 8px ;
}

/* pcフッター */

footer{
    padding: 16px;
    background-color: #F4F4F4;
}

.footer__void-class img{
    display: inline;
    height: 12px;
    /* flex-direction: row;
    align-items: center; */
}

.footer__text-flex{
    display: flex;
    justify-content: flex-end;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

.footer__menu-text{
    flex-direction: column;
}

footer span{
    font-size: 12px;
    padding-right: 4px;
    color: #485A9C;
}

footer small{
    font-size: 14px;
    font-weight: 300;
    color: #C5C5C5;
}

footer img{
    padding-right: 24px;
}


/*メニューのliから黒丸を削除*/
.list-item {
    list-style-type: none;
}

/*スマホ版メニューのあしらい*/
/*レスポンシブになるので100vwは微妙、後ほど変更*/
.spnav_list-menu{
    display: none;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.spnav_list-list{
    display: flex;
    padding: 0;
    margin: 0;
    text-align: center;
}

.spnav_list-list .list-item{
    font-size: 20px;
    padding: 28px 32px;
    color: #6E6E6E;
}

/*pc版メニューのあしらい*/

    /* ボタンデザイン変更 */
        .pcnav_list-jobname{
            background-color: rgba(255,255,255,0);
            border: rgba(255,255,255,0.0);
            color: #20337A;
            padding: 8px 0;
            font-size: 14px;
            display:flex;
            flex-flow: column;
        }

        /*pc版メニュー固定*/
            .pcnav__list-fixed{
                display: block;
                position: fixed;
                left: 74vw;
            }

    /* 選択されているもののみ変化 */
        .pcnav_list-jobname.is_active{
            color: #20337A;
            padding-left: 16px;
            border-left: #36F1E1 4px solid;
        }


        /* pc版メニューのホバー時処理 */
        .pcnav_list-jobname{
                transition-duration: 150ms;
                /*要素が変化するまでの時間を指定*/
            }

            .pcnav_list-jobname:hover {
                color: #2ad9ca;
                padding-left: 16px;
                border-left: #36F1E1 4px solid;
            }



/* ボタンのcss */

    .buttan__form-nohover {
        /* display: block; */
        display: flex;
        width: 250px;
        height: 48px;
        border-radius: 6px;
        /* padding: 10px 38px 10px 32px; */
        background-color: #20337A;
        /* box-shadow: 0px 7px 17px rgba(32, 51, 122, 0.30); */
        justify-content: center;
        align-items: center;
        font-size: 16px;
        text-align: center;
        color: #F5F5FB;
        font-weight: 700;
        word-wrap: break-word;
        margin-bottom: 16px;
        transition-duration: 100ms;
    }

    .buttan__form-nohover:last-child{
        color: #20337A;
        background-color: #fff; 
        border: 2px solid #20337A;
        padding-bottom: 2px;
    }

    .pcbuttan__text{
        padding-top: 4px;
        padding-right: 16px;
        justify-content: center;
    }

    .buttan__form-nohover svg{
        margin-top: 5px;
    }

    .spbuttan__text{
        font-size: 36px;
        margin: 0 auto;
    }

    .button-content svg{
        margin-top: 8px;
    }

/* pcのみ */
    #buttan__pc{
        padding: 10px 40px 16px 48px;
        width: 250px;
        height: 48px;
        border-radius: 6px; 
    }

    .buttan__form-nohover:hover {
        border: #2ad9ca solid 2px;
    }

/* spのみ */

    .spButton_area .buttan__form-nohover{
        display: none;
        /* width: 396px;
        height: 96px; */
        border-radius: 12px; 
        padding: 20px 78px 20px 94px;
    }

    #buttan__sp_follow{
        display: none;
        /* width: 396px;
        height: 96px; */
        border-radius: 12px; 
        padding: 20px 78px 20px 94px;
        
    }

    
@media (max-width: 767px) {

/* 以下スマホ版 */
/* ハンバーガーメニュー展開時にスクロール制御 */

.bodyhidden {
    overflow: hidden;
  }
  
  .hamburger__can-scroll {
    overflow-x: hidden;
    overflow-y: auto;
  }

  .header__logo-bk img{
    width: 200px;
    padding: 0px 0 0 4px;
  }

    body{
        font-family: 'Noto sans JP';
        width: 100vw;
        background-color: #F5F5FB;
        font-size: 12px;
        padding-top: 54px; /* ヘッダーの高さ分 */
    }

    a{
        text-decoration: none;
    }

    p{
        line-height: 155%;
    }

    .content{
        padding: 0;
        margin: 0 4%;
        max-width: 100%;
        display: block;
        justify-content: space-between;
        }

/* ヘッダー */

    header{
      height: 72px;
      width: 100%;
    }

    ul{
        list-style-type: none;
        }

    .title
    {
        /* width: 65%; */
        margin: 16px;
        /* text-wrap: nowrap; */
        white-space: nowrap;
    }

    .header__title-en{
        font-size: 16px;
    }
    .header__title-ja{
        font-size: 10px;
    }

    .header__logo-bk{
        width: 200px;
        padding: 4px 0 0 4px;
    }

    .logo__hamburger-none{
        display: inline-block;
        width: 210px;
        padding: 14px 0 8px 14px;
      }

    /* ヘッダーハンバーガーメニュー処理 */
        .header__nav {
            position: fixed;
            right: -200%;
            width: 100vw;
            transition: 0.3s;
            background-color: #FDFDFD;
            overflow-y: scroll;
            height: 100vh;
          }

        .header__nav.active {
            display: block;
            /* ハンバーガーメニューのスタイル */
                background-color: #FDFDFD;
        }

          .header__nav.active {
            right: 0;
          }

          .header__nav-list{
            display: block;
            justify-content: center;
            padding: 0 8vw;
            margin: 0 auto;
            width: 100%;
            padding-bottom: 100px;
        }

        .header__nav-list .list-item{
            font-size: 16px;
            padding: 10px 0;
            border-bottom: #CBCBCB solid 1px;
        }

        /* .dropDown{
            display: contents;
            top: 0;
            left: 0;
            box-shadow: none;
            z-index: 0;
        }

        .dropDown__list{
            padding: 6% 0;
        } */

        /* .dropDown__item{
            justify-content: flex-start;
            padding: 2px 28px;
        } */

        /* .dropDown__link{
            font-size: 12px;
        }

        .header__wrap .list-item {
            margin: 0 auto;
        } */
    /* ハンバーガーメニュー内部のパディング操作 */
        /* .dropDown__item a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-decoration: none;
            width: 644px;
            height: 32px;
            color: #20337A;
            font-size: 14px;
            display: block;
            margin: 4px 0;
        }

        /* sp時ホバーを削除 */
        /* .dropDown__item.mobile:hover {
            background-color: transparent;
            border-bottom: none;
          }

          .dropDown__list .mobile{
            background-color: transparent;
            border-bottom: none;
          }

        
        .hamburger-menu {
            display: block;
            justify-content: right;
            position: absolute;
            top: 50%;
            left: 90%;
            transform: translateY(-50%) translateX(-50%);
            z-index: 2000;
        }  */

        .hamburger-menu__line{
            display: block;
            margin: 25% 0;
            width: 24px; 
            height: 2px; 
            border-radius: 20%;
            border-top: 2px solid #20337A;
            transition-duration: 50ms;
        }

    /* スマホ版では線のホバー処理なし */
      /* .dropDown__item:hover{
        font-weight: 600;
        border-bottom: #FDFDFD 2px solid;
    }

    .header__nav .list-item .header__navtext:hover{
        border-bottom: #FDFDFD 1px solid;
    } */

/* クリック後のハンバーガーメニュー線挙動 */

        /* .hamburger-menu__line.buttonactive:nth-of-type(1){ */
            /* top: 18px;
            left: 18px; */
            /* transform:translateY(6px) rotate(-45deg);
        }
         
        .hamburger-menu__line.buttonactive:nth-of-type(2){
            opacity: 0;
        }

        .hamburger-menu__line.buttonactive:nth-of-type(3){ */
            /* top: 30px;
            left: 18px; */
            /* transform: translateY(-10px) rotate(45deg);
        } */

        /* 採用情報横の矢印消す */
        /* .dli-chevron-down{
            display: none;
        } */

    /* ぱんくずsp版 */

        .breadcrumbs {
            display: flex;
            padding-top: 10%;
            padding-bottom: 2%;
        }

        .breadcrumbs p {
            color: #6E6E6E;
            display: block;
            border-bottom: #F5F5FB 1px solid;
            transition-duration: 150ms;
            /*要素が変化するまでの時間を指定*/
        }

        .bread__nav-recruit{
            color: #20337A;
            font-weight: 700;
            font-size: 12px;
            display: flex;
        }

        .breadcrumbs svg{
            margin: 4px 8px 0px 8px;
        }

        .tri_arrow::before{
            content:'';
        }

/*JD部分の色・余白などsp版*/
        .container__body-mainview{
            padding: 8%;
            background-color: #FFFFFF;
            width: 88vw;
            margin: 0 2%;
            margin-bottom: 24px;
        }

        .container__body-maintext{
            padding: 0;
        }

        .section__carrier-name {
            font-family: 'Noto Serif JP';
            font-weight: 700;
            font-size: 21px;
            color: #20337A;
            padding-top: 0;
            white-space: nowrap;
        }


        .section__carrier-contents {
            font-weight: 500;
            font-size: 16px;
            border-bottom: #20337A 2px solid;
            padding: 2% 0;
        }

    .section__carrier-heading{
        font-size: 12px;
        font-weight: 500;
        /* padding: 2% 0; */
        margin-top: 0;
    }

    .section__carrier-lists{
        text-indent: -1.1em;
    }

    .section__carrier-list::before{
        margin: 0 8px 0 1px ;
    }

    .section__carrier-heading_shape_square::before{
        top: 2px;
        width:  12px;
        height:  12px;
    }

    .benefits-list::before{
        top: 2px;
        width:  12px;
        height:  12px;
        z-index: auto;
    }
    .section__carrier-list-headling_dot_large::before{
        content:  "";
        width:  12px;
        height:  12px;
        display:  inline-block;
        background-color: #000;
        border-radius:  50%;
        position:  relative;
        margin-left: -2px;
        top: 2px;
    }

/* 表部分sp版 */
    .section__carrier-working-conditions {
        text-align: left;
        border-left: #485A9C 2px solid;
        border-spacing:0;
        width: 100%;
        margin-top: 32px;
    }

    .column-1{
        
        min-width: 20vw;
        font-weight: semibold;
        background-color: #FAFAFD;
        padding: 16px;
        border-bottom: #F5F5FB 1px solid;
        
    }
    .column-2{
        font-weight: 400;
        background-color: #FFFFFF;
        padding: 16px;
        border-top: #EEEEF0 solid 1px;
        border-right: #EEEEF0 solid 1px;
    }

    .section__carrier-working-conditions small{
        font-size: 8px;
        color: #6E6E6E;

    }

/* sp版のみのボタン・メニュー 
    pc版のみのボタン・メニューを消すcssもこの箇所*/
    .pcnav__list-fixed{
        display: none;
    }

    .spnav_list-menu{
        display: inline-block;

    }

    
    /* sp版フォームボタンcss */

    .spButton_area{
        margin: 0 auto 148px;
    }

    .spButton_area .buttan__form-nohover{
        display: block;
        margin: 0 auto 12px;
        padding: 0% 5%;
        border-radius: 6px;     
        
    }

        .buttan__form-nohover span{
            font-size: 16px;
        }

        #buttan__sp_nofollow{
            /* width: 198px;
            height: 48px; */
            /* display: block; */
            /* margin: 0 auto; */
            /* margin-bottom: 148px; */
            /* padding: 0% 5%;
            border-radius: 6px;  */
        }
    
        #buttan__sp_follow{
            width: 198px;
            height: 48px;
            display: block;
            position: fixed;
            right: 6vw;
            bottom: 56px;
            padding: 0% 4%;
            border-radius: 6px; 
            transition: opacity 0.5ms ease-in-out;
            box-shadow: 0px 7px 17px rgba(32, 51, 122, 0.30); 
        }

        .buttan__form-nohover {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 276px;
            height: 48px;
            background-color: #20337A;

            font-size: 12px;
            text-align: center;
            color: #F5F5FB;
            font-weight: 700;
            z-index: 1;
        }

        .button-content {
            display: flex;
            align-items: stretch;
            padding:10px 0;
            /* position: relative; */
            height: 100%;
            }

        .button-content svg{
            margin-bottom: 6%;
        }

    /* sp版職種メニューcss */
        .wrap__spnav-list{
            width: 100vw;
            margin-left: calc(-55vw + 50%);

            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */
            scrollbar-width: none; /* Firefoxでスクロールバーを非表示 */
            -ms-overflow-style: none; /* IEとEdgeでスクロールバーを非表示 */
            margin-bottom: 18px;
            }

        .spnav_list-contents{
            padding: 16px;
        }


        .wrap__spnav-list::-webkit-scrollbar {
            display: none; /* Chromeなどでスクロールバーを非表示 */
        }

        .spnav_list-menu {
            display: flex;
        }

        .spnav_list-menu {
            position: relative;
            left: 25%;
            color: #6E6E6E;
            flex-wrap: wrap;
            flex-shrink: 0;
            max-width: 118px;
            text-align: center;
        }

        .spnav_list-item{
            display: flex;
            margin: 0 auto;
            padding: 0 24px;
        }

        .spnav_list-jobname{
            font-weight: 500;
            color: #6E6E6E;        
        }

    /* 選択中の職種に応じて下記cssを追加/削除 */
        .spnav_list-contents.is_active{
            border-bottom: #20337A 2px solid;
        }
        .spnav_list-jobname.is_active{
            font-weight: 700;
            color: #20337A;
        }
     /* sp版フッター */
     footer{
        padding: 8px;
        background-color: #F4F4F4;
    }

    .footer__void-class img{
        display: inline;
        height: 10px;
        width: 12px;
    }

    .footer__menu-text{
        display: flex;
        justify-content: flex-end;
    }

    footer span{
        font-size: 10px;
        color: #485A9C;
        padding-right: 4px;
    }

    footer small{
        padding-left: 8px;
        color: #C5C5C5;
        font-size: 8px;
        font-weight: 300;
    }

    footer img{
        padding-right: 2px;
        height: 14px;
    }
 }