@charset "utf-8";


/* ------------------------------------------- */
/* Link setting */
/* ------------------------------------------- */


/* ------------------------------------------- */
/* btn設定 ------------------------------------------- */

.btnchangeline {
    position: relative;
    color: #333;
    padding: 10px 8rem;
    display: inline-block;
    text-decoration: none;
    outline: none;
    transition: all 0.3s ease-in-out;
    margin: 0;
}
/*線の設定*/
.btnchangeline::before {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*線の形状*/
    width: 100%;
    height: 100%;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
    /*はじめは透過0に*/
    opacity: 0;
    transform: scale(0, 1);
    /*アニメーションの指定*/   
    transition: all 0.3s;
}
/*背景の設定*/
.btnchangeline::after {
    content: '';
    /*絶対配置で背景の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    /*背景の形状*/
    width: 100%;
    height: 100%;
    background-color:rgba(26, 0, 93, 1);
    /*アニメーションの指定*/ 
    transition: all 0.3s;
}
/*hoverした際の背景と線の形状*/
.btnchangeline:hover::before {
    opacity: 1;/*不透明に*/ 
    transform: scale(1, 1);/*X方向に線を伸ばす*/
}

.btnchangeline:hover::after {
    opacity: 0;/*透過0に*/
    transform: scale(0, 1);/*X方向に背景を縮小*/
}
/*テキストの設定*/
.btnchangeline span {
    /*テキストを前面に出すためz-indexの値を高く設定*/  
    position: relative;
    z-index: 2;
    /*テキストの形状*/
    color: #fff;
    font-size: 1.2rem;
    font-weight: 1000;
    text-transform:uppercase;
    /*アニメーションの指定*/   
    transition: all 0.3s;
}
/*hoverした際のテキストの形状*/
.btnchangeline:hover span {
    letter-spacing: 2px;
    color: #333;
}


.btn-list{
    display: flex;
    justify-content: center;
}


/* ------------------------------------------- */
/* 固定背景 */
/* ------------------------------------------- */

.fbg-01{background:url(/new-hire/img/fixed_img01.jpg) no-repeat center;
}
.fbg-02{background:url(/new-hire/img/fixed_img02.jpg) no-repeat center;
}
.fbg-03{background:url(/new-hire/img/fixed_img03.jpg) no-repeat center;
}
.fbg-04{background:url(/new-hire/img/fixed_img04.jpg) no-repeat center;
}
.fbg-05{background:url(/new-hire/img/fixed_img05.jpg) no-repeat center;
}
.fbg-06{background:url(/new-hire/img/fixed_img06.jpg) no-repeat center;
}
.fbg-07{background:url(/new-hire/img/fixed_img07.jpg) no-repeat center;
}
/* ------------------------------------------- */
/* ニュースティッカー */
/* ------------------------------------------- */

#news{
	width: 80%;
	margin: 6.4rem auto;
}

/*ニュース1行の周りの余白*/
.slider a{
    display: block;
    background:#fff;
    padding:20px;
}

/*日付*/
.slider span {
display: inline-block;
    font-size: 1.2rem;
    margin: 0 4rem;
    color: #777;
}

/*768px以下の見た目*/
@media screen and (max-width:768px) {
    .slider {
        padding:20px;
        background:#fff;
    }

    .slider li {
        border-bottom:1px dashed #ccc;
    }

    .slider li:last-child {
        border-bottom:none;
    }
    .slider span {
        display:block;
		padding-bottom:10px;
    }
}

/* ------------------------------------------- */
/* スクロールダウン */
/* ------------------------------------------- */

/*スクロールダウン全体の場所*/
.scrolldown{
    /*描画位置※位置は適宜調整してください*/
	position:relative;
	bottom:10px;
	margin: 6.4rem 0 0 6.4rem;
}

/*Scrollテキストの描写*/
.scrolldown span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
    /*テキストの形状*/
	color: rgba(26, 0, 93, 1);
	font-size: 1rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-4px;
    /*丸の形状*/
	width:10px;
	height:10px;
	border-radius: 50%;
	background:rgba(26, 0, 93, 1);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	left:0;
    /*線の形状*/
	width:2px;
	height: 50px;
	background:rgba(26, 0, 93, 1);
}


/*========= 見出し設定 ===============*/

.title-bloc {
  text-align: center;
}

.title-bloc .title-sub{
  /*margin-bottom: 2rem;*/
  font-weight: 800;
font-size: clamp(1.4rem,1.6vw, 1.8rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.title-bloc .title-main {
    font-weight: 200;
    font-family: sans-serif;
    font-size: clamp(4rem, 5.6vw, 6rem);
    letter-spacing: 0.1em;
    color: #1a005d;
}
@media screen and (max-width: 1640px) {
.title-bloc .title-main {
    font-size: clamp(3.2rem, 4vw, 5.6rem);  }
}

.title-bloc .title-sub {
    color: rgba(26, 0, 93, 1);
}

.title-bloc + p{
    padding-bottom: 8rem;
}


/* ------------------------------------------- */
/* 下層
/* ------------------------------------------- */
section.lower {
    position: relative;
    margin: -8vw auto 0;
    width: calc(100% - 4rem);
    /* border-radius: 2rem 2rem 0 0; */
    background: #fff;
    /*padding: 6.4rem 0 4rem;*/
    z-index: 1;
}

@media screen and (max-width: 767px) {
section.lower{
    width: calc(100% - 2rem);
    margin: -16vw auto 0;
}
}

/* ------------------------------------------- */
/* keyvisual-area lower */
/* ------------------------------------------- */


#hero-area-lower {

}

#hero-area-lower .keyvisual-area {
    position: relative;
    display: flex;
    /* flex-wrap: wrap; */
    /* justify-content: flex-start; */
    align-items: center;
    height: 56vw;
    width: 100%;
    background-size: cover;
    background-position: left;
}

@media screen and (max-width: 820px) {
#hero-area-lower .keyvisual-area {
    height: 64vw;}
}
@media screen and (max-width: 540px) {
#hero-area-lower .keyvisual-area {
    height: 80vw;}
}
@media screen and (max-width: 375px) {
    #hero-area-lower .keyvisual-area {
        height: 100vw;
    }
}


#hero-area-lower .keyvisual-area:after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 56vw;
    background: rgba(0, 0, 0, .25);
}
@media screen and (max-width: 820px) {
#hero-area-lower .keyvisual-area:after {
    height: 64vw;}
}
@media screen and (max-width: 540px) {
#hero-area-lower .keyvisual-area:after {
    height: 80vw;}
}
@media screen and (max-width: 375px) {
#hero-area-lower .keyvisual-area:after {
    height: 100vw;}
}
#hero-area-lower .title-bloc {
padding: 4%;}

#hero-area-lower .keyvisual-area .title-sub,
#hero-area-lower .keyvisual-area h2{
  color: #fff;
  text-align: left;
  z-index: 5;

}

#hero-area-lower .keyvisual-area h2{
    font-size: clamp(4rem, 11vw, 12rem);
padding-bottom: 0;
    line-height: 1.125;
}
/* / end of keyvisual-area */


.lower .inner {
      padding: 6.4rem 0 0;
}
@media screen and (max-width: 820px) {
.lower .inner {
      padding: 3.2rem 0 0;}
}


.lower h2 {
      padding: 5.6rem 0;
      text-align: center;
}
@media screen and (max-width: 540px) {
.lower h2 {
      padding: 1.6rem 0;}
}

.ub-title + p {
    text-align: center;
    padding: 6.4rem 0;
}

.photo-box + p {
    padding: 6.4rem 0;
}



/*========= パンくずリスト設定 ===============*/
.breadcrumb {
  margin: 0;
  padding:.5rem 0 .5rem 2rem;
  list-style: none;
  background: rgba(0,0,0,.75);
  overflow: hidden;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
font-size: clamp(1.2rem,1.3vw, 1.4rem);
font-weight: 800;
}

.breadcrumb li:after {/* >を表示*/
  content: '>';
  padding: 0 0.4em;
  color: #828282;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #efefef;
}

.breadcrumb li a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(142, 196, 0, 1);
}

.breadcrumb li span.active {
  text-decoration: none;
  color: /*NXフレッシュグリーン*/ rgba(142, 196, 0, 1);
}

/*動きのきっかけの起点となるクラス名 はじめは非表示に*/

.fadeUpTrigger,.flipLeftTrigger{
    opacity: 0;
}

/*==================================================
ふわっ
===================================*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 左から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:.75s;
animation-fill-mode:forwards; 
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
    animation-name:blurAnime;
    animation-duration:1s;
    animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
    filter: blur(10px);
    transform: scale(1.02);
  }

  to {
    filter: blur(0);
    transform: scale(1);
  }
}



/*　画像の拡大　*/

.zoomIn img{
    transform: scale(1);
    transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
    transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}


.tracking-in-contract-bck {
    -webkit-animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
            animation: tracking-in-contract-bck 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-8-14 17:12:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tracking-in-contract-bck
 * ----------------------------------------
 */
@-webkit-keyframes tracking-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px);
            transform: translateZ(400px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes tracking-in-contract-bck {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px);
            transform: translateZ(400px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}