@charset "UTF-8";
/* CSS Document */
/**************************************************
*制作：Shinichi Yamazaki
*Created Date：2022/07
*https://design-momonga.jp/
 レスポンシブレイアウトモバイルファーストでの記述。
***************************************************/
html {
	scroll-behavior: smooth;
}
.no-post{
    display: flex;
    min-height: 100px;
    align-items: center;
    justify-content: center;
}
.group-ttl1{
    font-size:1.6rem;
    font-weight: bold;
    color:#515151;
    text-align: center;
    margin-bottom:15px;
}
.text-red{
    color:red;
}
.contents-box{
    margin-bottom:30px;
    scroll-margin-top:90px;
}
.contents-wrapper{
    width: 90%;
    margin: 0 auto;
    line-height: 1.3;
}
/*
*タイトルがフェードイン
----------------------------------------------*/
.fade-up{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-delay:.5s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime{
    from{
        opacity:0;
        transform:translateY(-30%) translateX(-50%);
    }
    to{
        opacity:1;
        transform:translateY(-50%) translateX(-50%);
    }
}
/*
*スクロールダウンアイコン
----------------------------------------------*/
/*スクロールダウン全体の場所*/
.scrolldown1 {
  position: absolute;
  left: 50%;
  bottom: 10%;
  /*全体の高さ*/
  height: 50px;
}
/*Scrollテキストの描写*/
.scrolldown1 span {
  /*描画位置*/
  position: absolute;
  left: -15px;
  top: -15px;
  /*テキストの形状*/
  color: #F2F2F2;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown1::after {
  content: "";
  /*描画位置*/
  position: absolute;
  top: 0;
  /*線の形状*/
  width: 1px;
  height: 30px;
  background: #F2F2F2;
  /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity: 0;
}
/*スクロールダウンアイコンのアニメーション
高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0;
  }
  30% {
    height: 30px;
    opacity: 1;
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0;
  }
}

/*
*新卒一般採用リンク
----------------------------------------------*/
#recruit-category .contents-wrapper {
  width: 100%;
}
#new-grad{
    height:290px;
    background:url("../images/f1_bg_new-grad.jpg") no-repeat;
    background-position:center 30%;
    background-size:1000px;
    position:relative;
}
#mid-caree{
    height:290px;
    background:url("../images/f1_bg_mid-caree.jpg") no-repeat;
    background-position:center 25%;
    background-size:550px;
    position:relative;
}
.recruit-category-boxs{
    position:relative;
}
.recruit-category-box-inner{
    width:90%;
    height:80%;
    /*background-color:#CCC;*/
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:block;
}
.recruit-category-box-txts{
    position: relative;
    padding-right: 25px;
}
/*.recruit-category-box-txts::after{
    content:url("../images/common_icon_directing-arrow-right-white.svg");
    display:inline-block;
    width:25px;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
}*/
.recruit-category-box-txts h2{
    font-size:3.3rem;
    font-weight:bold;
    color:#FFF;
}
.recruit-category-box-txts h2 span{
    font-weight:bold;
    display:block;
    padding-top: 7px;
    font-size: 2.4rem;
}
.category-explanatory-text{
    color:#FFF;
    font-size: 1.2rem;
    line-height: 1.5;
    position: absolute;
    top:60%;
}
.recruit-round-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom:0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 4px;
    font-size: 1.5rem;
    border: 1px solid #002E60;
    color: #113264;
    background-color:#F1F1F1;
    background-image:url("../images/common_icon_arrow-navy-blue.svg");
    background-repeat:no-repeat;
    background-size:7px;
    background-position:7% center;
}
/*
*募集要項
----------------------------------------------*/
#post-contents{
    line-height: 1.5;
}
#post-contents p,
#post-contents ul,
#post-contents ol,
#post-contents h1,
#post-contents h2,
#post-contents h3,
#post-contents h4,
#post-contents h5,
#post-contents h6{
    margin-bottom: 15px;
}
.tbl-boshu-youkou{
    border:none!important;
    border-bottom: 1px solid #DBDBDB!important;
}
.tbl-boshu-youkou th,
.tbl-boshu-youkou td
{
    display: block;
    word-wrap: break-word;
    width:100%;
    border-bottom:none!important;
    padding:7px;
}
.tbl-boshu-youkou th{
    background-color:#eef4ff;
}
.post-block1{
    padding: 20px;
    border: 1px solid #DBDBDB;
}
/*
*応募ボタン
----------------------------------------------*/
#recruit-action-btns{
    width:100%;
    background: #f2f2f2;
    position: fixed;
    bottom: 0;
    padding: 10px 0;
    z-index: 9999;
}
#rab-inner{
    width:90%;
    margin: 0 auto;
    text-align: center;
}
.rab-box-wrap{
	width: 70%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}
.rab{
    display: block;
	width: calc(50% - 5px);
}
.rab-text1{
	margin-top: 7px;
    font-size: 1.3rem;
    line-height: 1.3;
}
/*
*目次
----------------------------------------------*/
#mokuji-wrap{
    border: 1px solid #D3E1F9;
    padding: 1%;
}
#mokuji-inner{
    background:#EEF4FF;
    padding: 7% 20%;
}
.midashi1{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:15px;
    text-align:center;
}
#mokuji-inner>ul>li{
    margin-bottom:10px;
    padding-bottom:3px;
    border-bottom:1px dotted #97B2E1;
    line-height:1.3;
}
#mokuji-inner>ul>li:last-child{
    margin-bottom: 0;
}
/*
*メッセージ
----------------------------------------------*/
#message-box-outer{
    padding:10%;
}
#message-box-inner{
    min-height:300px;
    background:rgba(255,255,255,.8);
    padding: 7%;
}
.message-box-body{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
    gap: 3.90625vw;
}
.message-box-movie{
    height: 37.5vw;
}
#message-box-inner p{
    margin-bottom: 15px;
    line-height:1.8;
    text-align: justify;
}
#message-box-inner p:last-child{
    margin-bottom: 0;
}
/*
*職種紹介
----------------------------------------------*/
#shokushu{
   /* background:#F2F2F2;*/
    padding:30px 0;
    background:url("../images/recruit_bg_shokushu01.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
#shokushu-inner{
    min-height:500px;
    padding: 15px;
    display:flex;
    justify-content:space-between;
    flex-wrap: wrap;
}
.shokushu-boxs{
    width:100%;
    background:#CCC;
    margin-bottom:5px;
    position:relative;
}
.shokushu-boxs::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  padding-bottom: 68%;
}
.shokushu-boxs p{
    position: absolute;
    bottom: 15px;
    width: 80%;
    background: #143468ed;
    padding: 10px;
    line-height: 1.3;
    font-size: 1.2rem;
    right: 0;
    color: #FFF;
}
.box1{
    background:url("../images/recruit_bg_shokushu-box1.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box2{
    background:url("../images/recruit_bg_shokushu-box3.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box3{
    background:url("../images/recruit_bg_shokushu-box2.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box4{
    background:url("../images/recruit_bg_shokushu-box5.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box5{
    background:url("../images/recruit_bg_shokushu-box6.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box6{
    background:url("../images/recruit_bg_shokushu-box7.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
.box7{
    background:url("../images/recruit_bg_shokushu-box4.jpg") no-repeat;
    background-size: cover;
    background-position: center center;
}
/*
*募集要項
----------------------------------------------*/
#post-contents{
    padding-top: 20px;
    padding-bottom: 20px;
}
/*
*人材育成
----------------------------------------------*/
#jinzai {
  background: #F2F2F2;
  padding: 30px 0;
}
#jinzai-inner p{
    margin-bottom: 15px;
    line-height: 1.5;
}
#jinzai-thum{
    margin-bottom: 15px;
}
#jinzai-thum li{
    margin-bottom: 5px;
}
/*********************************************
*タブレット（600px以上の場合）
**********************************************/
@media screen and (min-width:600px){
    .group-ttl1{
        font-size:2rem;
    }
    .midashi1{
        font-size:1.8rem;
    }
    #mokuji-inner>ul>li{
        font-size: 1.5rem;
        padding-bottom:7px;
        margin-bottom:10px;
    }
    .shokushu-boxs{
        width:49.5%;
    }
    /*
    *【tab】新卒一般採用リンク
    ----------------------------------------------*/
    #recruit-category-inner{
        display:flex;
    }
    #new-grad,
    #mid-caree
    {
        width:50%;
        height:320px;
    }
    .adj-01{
        padding-top:19px;
    }
    /*
    *【tab】人材育成
    ----------------------------------------------*/
    #jinzai-thum{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #jinzai-thum li{
        width: 33.1%;
    }

}
/*********************************************
*PC（960px以上の場合）
**********************************************/
@media screen and (min-width:960px){
    .group-ttl1{
        font-size:2.5rem;
    }
    .contents-box{
        margin-bottom:30px;
        scroll-margin-top:120px;
    }
    .contents-wrapper{
        max-width:1120px;
    }
    /*
    *【PC】スクロールダウンアイコン
    ----------------------------------------------*/
    /*スクロールダウン全体の場所*/
    .scrolldown1 {
      bottom: 5%;
    }
    /*
    *【PC】メインビジュアル両サイドの演出
    ----------------------------------------------*/
	@keyframes play {
	  from {
		transform: translateY(-100%);
	  }
	  to {
		transform: translateY(0);
	  }
	}
	/*マスク要素をスライドアウトする*/
	@keyframes maskOut {
	  from {
		transform: translateY(0);
	  }
	  to {
		transform: translateY(100%);
	  }
	}
	/*スライドインを動作*/
	.is-play {
		animation-name: play;
		animation-duration: .5s;
		animation-delay: 1s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.8,0,.5,1);
		position: relative;
		opacity: 1 !important;
	}
	/*is-playの疑似要素にマスクとマスクを外すアニメーションを設定*/
	.is-play:before {
		animation-name: maskOut;
		animation-duration: .5s;
		animation-delay: 1.5s;
		animation-fill-mode: forwards;
		animation-timing-function: cubic-bezier(.8,0,.5,1);
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		background:#194ca1;
	}
    /*
    *【PC】新卒一般採用リンク
    ----------------------------------------------*/
    #recruit-category .contents-wrapper {
        max-width: 100%;
    }
    #new-grad{
        background:url("../images/f1_bg_new-grad.jpg") no-repeat;
        background-position:center 30%;
        background-size:1100px;
        position:relative;
    }
    #mid-caree{
        background:url("../images/f1_bg_mid-caree.jpg") no-repeat;
        background-position:center 30%;
        background-size:1100px;
        position:relative;
    }
    .recruit-category-box-inner {
      max-width:530px;
      height: 80%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    #new-grad .recruit-category-box-inner{
        left:unset;
        right: 30px;
    }
    #mid-caree .recruit-category-box-inner{
        left: 30px;
    }
    .recruit-category-box-txts h2{
        font-size:4rem;
    }
    .recruit-category-box-txts h2 span{
        padding-top: 7px;
        font-size: 2.6rem;
    }
    .recruit-round-btn{
        height: 50px;
        border-radius: 4px;
        font-size: 1.5rem;
    }
    .recruit-category-box-inner:hover .recruit-round-btn{
        border:none;
        background-color:#0fb0c2;
        color:#FFF;
    }
    .category-explanatory-text {
      font-size: 1.4rem;
      line-height: 1.5;
      top: 60%;
    }
    /*
    *【PC】募集要項テーブル
    ----------------------------------------------*/
    .tbl-boshu-youkou th{
        width: 25%;
    }
    .tbl-boshu-youkou th,
    .tbl-boshu-youkou td
    {
        display: table-cell;
    }
	/*
	*【PC】応募ボタン
	----------------------------------------------*/
	.rab-box-wrap{
		width: 400px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
	}
	.rab{
		display: block;
		width: calc(50% - 5px);
	}
    /*
    *【PC】目次
    ----------------------------------------------*/
    #mokuji .contents-wrapper{
        max-width:1120px;
    }
    .midashi1{
        font-size:2.4rem;
    }
    #mokuji-inner{
        padding: 2% 27%;
    }
    #mokuji-inner>ul>li{
        font-size: 1.6rem;
        padding-bottom:7px;
        margin-bottom:10px;
    }
    /*
    *【PC】職種紹介
    ----------------------------------------------*/
    .message-box-body{
        flex-direction: row;
        justify-content: space-between;
        gap: 30px;
    }
    .message-box-txt,
    .message-box-movie{
        width: 50%;
    }
    .message-box-movie{
        height: 224px;
    }
    /*
    *【PC】職種
    ----------------------------------------------*/
    #shokushu h2{
        margin-bottom: 25px;
    }
    #shokushu-inner{
        min-height:672px;
        padding: 15px;
        display:block;
        position:relative;
        background-color: #FFFFFF7D;
    }
    .shokushu-boxs{
        width:300px;
        position:absolute;
    }
    .shokushu-boxs p{
        font-size: 1.3rem;
    }
    .box1{
        top:20px;
        left:50%;
        transform:translateX(-305px);
    }
    .box2{
        top:20px;
        left:50%;
        transform:translateX(5px);
    }
    .box3{
        top:234px;
        left:50%;
        transform:translateX(-460px);
    }
    .box4{
        top:234px;
        left:50%;
        transform:translateX(-50%);
    }
    .box5{
        top:234px;
        left:50%;
        transform:translateX(160px);
    }
    .box6{
        top:448px;
        left:50%;
        transform:translateX(-305px);
    }
    .box7{
        top:448px;
        left:50%;
        transform:translateX(5px);
    }   
}