@charset "UTF-8";
/* CSS Document */
/**************************************************
*制作：Shinichi Yamazaki
*Created Date：2022/07
*https://design-momonga.jp/
 レスポンシブレイアウトモバイルファーストでの記述。
***************************************************/
.op1{
    width: 90%;
    margin: 0 auto 0 auto;
}
.op2{
    text-align:center;
    color:#FFF;
    font-size: 2rem;
    margin-bottom: 15px;
    letter-spacing: 0.15rem;
}
/*--------------------------------------------------
*メインビジュアルエリア
---------------------------------------------------*/
#mv-wrapper{
	height:calc(100vh - 103px);
}
#mv-left,
#mv-right{
	display:none;
}
#mv-center{
	background:url("../images/f3_mv_sp.jpg") no-repeat;
	background-size:cover;
	background-position:center center;
	height:inherit;
	position:relative;
}
#mv-title{
	position:absolute;
	top:45%;
	left:30%;
	transform:translate(-50%,-50%);
	text-align:right;
	color:#FFF;
}
#mv-title h1{
	font-size:2.4rem;
    font-weight:bold;
	margin-bottom:7px;
    letter-spacing:0.1rem;
}
#mv-title h1 span{
    display:block;
    font-size:1.6rem;
    font-weight:bold;
    padding-top:2px;
}
#mv-title p{
    font-size:2rem;
    letter-spacing:0.3rem;
}
.fade-up{
    animation-name:fadeUpAnime;
    animation-duration:1s;
    animation-delay: .5s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeUpAnime{
    from{
        opacity:0;
        transform:translateY(5px) translateX(-50%);
    }
    to{
        opacity:1;
        transform:translateY(-50%) translateX(-50%);
    }
}
/*--------------------------------------------------
*コンテンツエリア
---------------------------------------------------*/
main{
    padding-top: 30px;
}
#post-contents{
    padding-top: 20px;
    padding-bottom: 20px;
}
#post-contents .contents-wrapper{
    width: 90%;
    margin: 0 auto;
}
.sample-disp{
    min-height:500px;
    background-color:#F2F2F2;
    color: #999;
    display:flex;
    align-items:center;
    justify-content:center;
}
/*
*メッセージ
----------------------------------------------*/
#message-box-outer{
    background:url("../images/recruit_bg_message2.jpg") no-repeat;
    background-size:cover;
    padding:7%;
}
#message-box-inner{
    background: rgba(46, 123, 200, 0.73);
    padding:7%;
    margin-bottom:15px;
}
#message-box-inner p{
    color:#FFF;
}
/*********************************************
*タブレット（600px以上の場合）
**********************************************/
@media screen and (min-width:600px){
    .op1{
        width: 60%;
    }
    .op2{
        font-size: 2.2rem;
    }

	/*--------------------------------------------------
	*【タブレット】メインビジュアルエリア（#mv）
	---------------------------------------------------*/
	#mv-wrapper{
		height:calc(100vh - 118px);
	}
	#mv-center{
		background:url("../images/f3_mv_tab.jpg") no-repeat;
		background-size:cover;
		background-position:center center;
		height:inherit;
		position:relative;
	}
	#mv-title{
		top:42%;
		left:30%;
	}
	#mv-title h1{
		font-size:4rem;
        margin-bottom: 10px;
	}
    #mv-title h1 span{
		font-size:3rem;
	}
    #mv-title p{
        font-size:2.8rem;
    }
    @keyframes fadeUpAnime{
        from{
            opacity:0;
            transform:translateY(5px) translateX(-50%);
        }
        to{
            opacity:1;
            transform:translateY(-50%) translateX(-50%);
        }
    }
	/*--------------------------------------------------
	*【タブレット】コンテンツエリア
	---------------------------------------------------*/
    #information-list li{
        display:flex;
    }
	.information-date{
        padding-right:10px
    }
    .information-ttl{
        padding-top: 3px;
    }
    #recruit-category-inner{
        display:flex;
    }
    #new-grad,
    #mid-caree
    {
        width:50%;
        height:320px;
    }
}
/*********************************************
*PC（960px以上の場合）
**********************************************/
@media screen and (min-width:960px){
	.op1{
        width:500px;
    }
    .op2{
        font-size: 2.4rem;
    }
	/*--------------------------------------------------
	*【PC】メインビジュアルエリア（#mv）
	---------------------------------------------------*/
	#mv-wrapper{
		height: calc(100vh - 148px);
		display: flex;
		justify-content:space-between;
	}
	#mv-left,
	#mv-right{
		display:block;
		width:20%;
    	background:#194ca1;
	}
	#mv-center{
		width: 60%;
		background:url("../images/f3_mv_pc_center.jpg") no-repeat;
		background-size:cover;
		background-position:right,center;
		position:relative;
	}
	#mv-title{
		top:42%;
		left:30%;
	}
	#mv-title h1{
		font-size:5rem;
        margin-bottom: 10px;
        letter-spacing: 0.15rem;
	}
    #mv-title h1 span{
		font-size:3rem;
	}
    #mv-title p{
        font-size:2.8rem;
    }
	.box {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.box .box-inner {
		width: inherit;
		height: inherit;
		opacity: 0;
	}
	#mv-left .box .box-inner{
		background:url("../images/f3_mv_pc_left.jpg") no-repeat;
		background-size:cover;
		background-position:right,center;
	}
	#mv-right .box .box-inner{
		background:url("../images/f3_mv_pc_right.jpg") no-repeat;
		background-size:cover;
		background-position:left,center;
	}
	/*「boxInner」をスライドインする*/
	@keyframes play {
	  from {
		transform: translateY(-100%);
	  }

	  to {
		transform: translateY(0);
	  }
	}

	/*マスク要素をスライドアウトする*/
	@keyframes maskOut {
	  from {
		transform: translateY(0);
	  }

	  to {
		transform: translateY(100%);
	  }
	}

	/*スライドインを動作するclass*/
	.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;
	}
    
	@keyframes fadeUpAnime{
		from{
			opacity:0;
			transform:translateY(5px) translateX(-50%);
		}
		to{
			opacity:1;
			transform:translateY(-50%) translateX(-50%);
		}
	}
	/*--------------------------------------------------
	*【PC】コンテンツエリア
	---------------------------------------------------*/
    #post-contents{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    #post-contents .contents-wrapper{
        max-width:1120px;
    }
    /*
    *【PC】メッセージ
    ----------------------------------------------*/
    #message{
        position: relative;
    }
    #message .contents-wrapper{
        position: relative;
        z-index: 2;
    }
    #message::before{
        content: "";
        background-image: url("../images/recruit_bg_texture_01_left.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: left top;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        width: 600px;
        height: 500px;
    }
    #message::after{
        content: "";
        background-image: url("../images/recruit_bg_texture_01_right.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: right top;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 600px;
        height: 500px;
    }
}