@charset "utf-8";

section{clear:both;}

#area1, #area2, #area5, #area6 {
    position:relative;
    margin-bottom:15%;
}
#area0 {
    position: relative;
}

#area4 {
    position:relative;
    width:100%;
    height:auto;
    'background-image:url('../base/hands3.svg');
    'background-size:cover;
}

/*------------------------contents----------------------*/
.contents {
	clear: both;
    overflow: hidden;
	padding-top: 0px;		/*上に空けるボックス内の余白*/
	'padding-bottom: 40px;	/*下に空けるボックス内の余白*/
	margin:0 auto;
    width:100%;
}

/*---------------------画面トップ------------------------------*/
.img-frame{
    position: relative;
    width: 90%;
    height: 32vh;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 25px;
 }
 .img-frame::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
 }
 .rec01{
    position: absolute;
    top:0;
    right:0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
 }
 .rec01{
    background-image: url('../images/hand.jpg');
	'clip-path: polygon(0% 100%, 17.5% 0%, 100% 0%, 100% 100%);
 }

 @media screen and (max-width: 767px){
    .img-frame{
       width: 100%;
       height: 250px;
    }
}


/*========= テキストを滑らかに出現させるためのCSS ===============*/
.rec {
	position: absolute;
	bottom:-10%;
	left:10%;
    color: #fff;
    font-size: 5vw;
	font-family: BIZ UDゴシック;
    text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
	background-color: #79a6c4;
	padding: .5% 2%;
    line-height: 1.5;
    
}

.rec2 {
	position: absolute;
	bottom:-25%;
	left:10%;
    color: #fff;
    font-size: 1.5vw;
	font-family: BIZ UDゴシック;
    text-shadow:2px 2px 2px rgba(0, 0, 0, .5);
	background-color: #79a6c4;
	padding: .5% 2%;
    z-index:999;
}

@media screen and (max-width: 767px){
    .rec {
        font-size: 3rem;
        left:0;
        padding: 0 5%;
    }
    .rec2 {
        font-size: 1rem;
        bottom:-25%;
        left:0;
        padding: 1% 5%;
    }
}

/*========= テキストを滑らかに出現させるためのCSS ===============*/
span.smoothText {
    overflow: hidden;
    display: block;
}
  
  /* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
    transition: .8s ease-in-out;
    transform: translate3d(0,100%,0) skewY(40deg);
    transform-origin: left;
    display: block;
}
span.smoothTextTrigger.smoothTextAppear{
      transform: translate3d(0,0,0) skewY(0);
}

/*========= ボタンデザイン（共通） ===============*/
.line_btn {
    position: relative;
    display: inline-block;
    justify-content: space-around;
    align-items: center;
    max-width: 12vw;
    padding: 7px 55px;
    color:#0068b0;
    transition: 0.3s ease-in-out;
    font-size:1.2vw;
    font-weight: 600;
    text-decoration:none;
    background: #fff;
    border-radius: 50px;
    border: 0.2rem solid #0068b0;
    box-shadow: 0.1rem 0.1rem 1px 0.1rem #ddd;
}
.line_btn:hover {
  	transform: translate3d(0.1rem, 0.1rem, 0);
  	box-shadow: none;
  	opacity: 1;
  	transition: all 0.2s;
}
.line_btn:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #0068b0;
    border-right: 3px solid #0068b0;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}

@media screen and (max-width:767px) {
	.line_btn {
		max-width: 15vw;
    	font-size:1.2vw;
    	font-weight:bold;
    	border: 0.12rem solid #0068b0;
	}
    .line_btn:after {
    	border-top: 1px solid #0068b0;
    	border-right: 1px solid #0068b0;
    	transform: rotate(45deg) translateY(-50%);
	}
}


/*---------------WELCOMEコメント------------------------*/
.main_welcome{
	position:relative;
    width:100%;
    margin:10% auto 5%;
    color:#000;
}

.message_title{
	font-size:2vw;
    font-weight:bold;
	text-align:center;
}
.message{
    width:65%;
    font-size:1.3vw;
    margin:auto;
}

@media screen and (max-width:767px){
	.message_title{
		position:relative;
		text-align:center;
		font-size:1.2em;
		font-weight:bold;
	}
	
	.message {
		width:90%;
    	font-size:1.8vw;
		margin-bottom: 5%;
	}
}

/*---------------求める人材------------------------*/
.selection{
    position:relative;
    margin:auto;
    padding-top:5em;
    width:100%;
    text-align:center;
    color:#000;
}

.message_title2{
	margin:auto;
	font-size:2vw;
    font-weight:bold;
    z-index:1;
}

.selection ul {
    position:relative;
    z-index:1;
}
.selection li{
	display:inline-block;
	width:45%;
    max-height:300px;
    margin:2em 0;
    font-size:1em;
    vertical-align:top;
}

.selection .number{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size:6vw;
    font-family:Mongolian Baiti;
    color:#ff9999;
    z-index:-1;
}

.jinzai1{
    font-size:1.5vw;
    color:#ff3333;
    background: linear-gradient(transparent 50%, #fff999 50%);
}
.jinzai2{
    font-size:1.2vw;
}

@media screen and (max-width:800px){
	.selection {
		width:100%;
	    text-align: center;
	}
	.message_title2{
		font-size:2.5vw;
	}
	.selection img {
    	display:none;
	}
	.selection li{
	    display: inline-block;
	    width: 80%;
	    margin: 1em auto;
	    vertical-align: top;
	    font-size:1.8vw;
}
	.selection .number{
        font-size:8vw;
	}
}

/* 四つ角かぎかっこの練習 */
.kijun1 {
    position: relative;
    margin:0 auto 2em;
    width:80%;
    text-align:center;
    padding:1.5em;
}
.kijun1:before,.kijun1:after,.lb,.rt{
    content:'';
    width: 20px;
    height: 20px;
    position: absolute;
    display: inline-block;
}
.kijun1:before{
    border-left: solid 7px #5b7c92;
    border-top: solid 7px #5b7c92;
    top:0;
    left: 0;
}
.lb{
    border-left: solid 7px #5b7c92;
    border-bottom: solid 7px #5b7c92;
    bottom:0;
    left: 0;
}
.kijun1:after{
    border-right: solid 7px #5b7c92;
    border-bottom: solid 7px #5b7c92;
    bottom:0;
    right: 0;
}
.rt {
    border-right: solid 7px #5b7c92;
    border-top: solid 7px #5b7c92;
    top:0;
    right: 0;
}
@media screen and (max-width:800px) {
    /* 四つ角かぎかっこの練習 */
	.kijun1 {
	    position: relative;
	    margin:0 auto 2em;
	    width:80%;
	    text-align:center;
	    padding:1.5em;
}
	.kijun1:before,.kijun1:after,.lb,.rt{
	    content:'';
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    display: inline-block;
}
	.kijun1:before{
	    border-left: solid 4px #0082a4;
	    border-top: solid 4px #0082a4;
	    top:0;
	    left: 0;
}
	.lb{
    border-left: solid 4px #0082a4;
    border-bottom: solid 4px #0082a4;
    bottom:0;
    left: 0;
	}
	.kijun1:after{
    border-right: solid 4px #0082a4;
    border-bottom: solid 4px #0082a4;
    bottom:0;
    right: 0;
	}
	.rt {
    border-right: solid 4px #0082a4;
    border-top: solid 4px #0082a4;
    top:0;
    right: 0;
	}
}
.kijun1 p {
    margin: 0; 
    padding: 0;
}


/*--------------採用情報TAB-------------------*/
.bosyu{
    width: 70%;
    margin:3% auto 0;
    padding-bottom:10%;
    'box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
}

/*タブのスタイル*/
.tab_item {
    width: calc(100%/2);
    line-height: 80px;
	vertical-align:middle;
    background-color: #ffffff;
    font-size: 2vw;
    font-family:Yu Gothic UI;
    font-weight:bold;
    text-align: center;
    letter-spacing:0.5em;
    display: block;
    float: left;
    text-align: center;
    transition: all 0.2s ease;
}

.tab_item01 {
	border-radius: 20px 0 0 0;
    'box-shadow: -4px -8px 14px rgba(0,0,0,0.2);
}

.tab_item02 {
 	border-radius: 0 20px 0 0;
    'box-shadow: 4px -8px 14px rgba(0,0,0,0.2);
}
.tab_item:hover {
	opacity: 0.75;
    border-bottom:3px solid #ff2222;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
    display: none;
    padding: 20px 2px 0;
    clear: both;
    overflow: hidden;
    border-radius: 0 0 20px 20px;
}

.tab_content{
    position:  relative;            /* 位置指定 */
    animation: anime1 1s ease;      /* アニメーション指定 */
}
 
@keyframes anime1 {
    0% {
        opacity:  0;                /* 透明度指定 */
        top: 50px;                  /* 位置指定 */
    }
    100% {
        opacity:  1;                /* 透明度指定 */
        top: 0;                     /* 位置指定 */
    }
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  	display: block;
    background-color:#ffffff;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
    background-color:#ffffff;
    color:darkblue;
    border-bottom:3px solid #ff2222;
}



/*テーブル
---------------------------------------------------------------------------*/
.ta1 {
	width: 90%;
	margin: 2% auto ;
	background: none;	/*背景色*/
	color:#000;
}

.ta1 tr {
	font-size:1.3vw;
	word-break: break-all;
    vertical-align:top;
    padding:10px 15px;
    border-bottom: 1px solid #d1eeee;	/*テーブルの枠線の幅、線種、色*/
}

/*ta1の左側ボックス*/
.ta1 th {
	width:18%;		/*幅*/
	text-align-last: justify;       /* Chrome・Firefox用 */
    text-justify: inter-ideograph;  /* IE・Edge用 */
    padding:2% 0 2% 2%;
    letter-spacing: 5px;
    font-weight:bold;
}

.ta1 td {
    padding:2% 0 2% 5%;
}

/*ta1のtdタグ内の段落(p)タグ*/
.tab_title {
	font-size:2vw;
    font-family:Yu Gothic UI;
    font-weight:bold;
    line-height:80px;
    letter-spacing:0.5em;
	text-align:center;
    color:darkblue;
}

.tab_title2 {
	font-size:1.5vw;
    color:#000;
    line-height:20px;
	text-align:center;
}


/* ---------------雇用プロセス------------------ */
.second_block {
    display: block;
    position: relative;
    padding: 0;
}
.second_inner {
    max-width: 900px;
    width: 100%;
}
.second_chart ul {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
.second_chart ul li {
	color:#000;
    width: 33%;
    background: #fff;
    'filter: drop-shadow(0px 5px 12px #ddd);
}
.second_chart ul li {
    width: 33%;
    background: #fff;
    filter: drop-shadow(0px 0px 0px #000);
    display: flex;
    flex-flow: column;
    padding: 20px;
	position: relative
}
.second_chart ul li:first-child {
    z-index: 3;
}
.second_chart ul li:nth-child(2) {
    z-index: 2;
	background: #FFF;
}
.second_chart ul li:nth-child(3) {
    z-index: 1;
}
.second_chart ul li:nth-child(4) {
    z-index: 0;
    background: #FFF;
}
.second_chart ul li h3 {
    text-align: center;
    font-size: .8vw;
    letter-spacing: 0.18rem;
    font-weight: 500;
    margin: 5px 0;
    padding: 0;
}

.second_chart ul li p {
	text-align: center;
    font-size: 1.3vw;
    letter-spacing: 0.02rem;
    line-height: 1.5rem;
    margin-bottom: 0;
	padding-left: 5px;
}

.second_chart ul li:first-child:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #fff;
    top: 20px;
    position: absolute;
    right: -58px;
}
.second_chart ul li:nth-child(2):after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #fff;
    top: 20px;
    position: absolute;
    right: -58px;
}
.second_chart ul li:nth-child(3):after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #fff;
    top: 20px;
    position: absolute;
    right: -58px;
}

@media screen and (max-width: 800px) {
	.second_chart ul li {
    width: 33%;
    background: #fff;
    filter: drop-shadow(0px 0px 0px #000);
    display: flex;
    flex-flow: column;
    padding-bottom:20px;
	position: relative
	}
	.second_chart ul li p {
	text-align: center;
    font-size: 1.3vw;
    letter-spacing: 0.02rem;
    line-height: 1.5rem;
    margin-bottom: 0;
	padding-left:0;
	}
	.second_chart ul li:first-child:after,
	.second_chart ul li:nth-child(2):after,
	.second_chart ul li:nth-child(3):after {
    content: "";
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 15px solid #fff;
    top: 20px;
    position: absolute;
    right: -38px;
}
}
/* 2nd */
@media screen and (max-width: 480px) {
/* （ここにモバイル用スタイルを記述） */
	.second_inner {
   	 padding: 0 15px;
	}
	.second_midashi p {
    	text-align: left;
	}
	.second_midashi p br {
    	display: none;
	}
	.second_chart ul {
    	flex-flow: column;
	}
	.second_chart ul li {
    	width: 80%;
    	padding-left: 30px;
    	padding-right: 20px;
	}
	.second_chart ul li h3 {
		font-size:1.5vw;
    	margin-bottom: 5px;
	}
	.second_chart ul li p {
    	padding:0;
	    color:red;
	    font-size:1.8vw;
	    letter-spacing:5px;
	}
	.second_chart ul li:first-child:after,
	.second_chart ul li:nth-child(2):after,
	.second_chart ul li:nth-child(3):after {
    	top: 99.5%;
    	position: absolute;
    	right: 50%;
    	left: 50%;
    	margin: 0 auto;
    	border-top: 10px solid #fff;
    	border-right: 10px solid transparent;
    	border-bottom: 10px solid transparent;
    	border-left: 10px solid transparent;
    	transform: translate(-50%, 0px);
	}
}

/*--------------------採用情報----------------*/
.rec_box {
	margin:10% auto;
    padding: 50px 0;
	background-color: #79a6c477;
}
.rec_btn p {
    text-align: center;
}
.rec_text {
    margin: auto;
    width:50%;
}
.rec_title{
    font-size:2vw;
    font-weight:600;
    text-align: center;
    'font-family:HGSｺﾞｼｯｸM;
    'color:#000;
    'word-break: keep-all;
}
.rec_title span:nth-of-type(2) {
	margin-top:5px;
}
.rec_message{
	margin:2% 0;
    font-size:1.2vw;
	color:#000;
}
.jinji {
    font-size:1.2vw;
    text-align: right;
}
.jinji img {
    width:30px;
    height:30px;
}
@media screen and (max-width: 800px) {
	.rec_box {
        margin:10% auto;
        width:80%;
    }
    .rec_btn{
        display:inline-block;
        margin-top: 5%;
        float:right;
        width:25%;
    }
	.rec_text {
    	width:75%;
	}
	.rec_title{
		font-size:1.2em;
	}
	.rec_message{
		width:80%;
		margin:2% 0;
		padding:2%;
    	font-size:.8em;
		color:#000;
	}
    .jinji {
        font-size: 1em;
    }
}


/*--------------------画面幅801～1050px以下の設定----------------------------*/
@media screen and (max-width:1050px){
/* Animation Seven */

.main_welome{
	position:relative;
    width:100%;
    margin:-2em auto 1em;
}

/*テーブル
---------------------------------------------------------------------------*/
.ta1 {
	width: 90%;
}

.ta1 tr {
	font-size:.8em;
	word-break: break-all;
    vertical-align:top;
    padding:8px 12px;
    border-bottom: 1px solid #d1eeee;	/*テーブルの枠線の幅、線種、色*/
}

/*ta1の左側ボックス*/
.ta1 th {
	font-size:1em;
}
.ta1 td {
    padding:2% 0 2% 5%;
}


/*ta1のtdタグ内の段落(p)タグ*/
.tab_title {
	font-size:1.2em;
    line-height:50px;
}

.tab_title2 {
	font-size:.8em;
    line-height:20px;
}
}

/*--------------------画面幅800px以下の設定----------------------------*/
@media screen and (max-width:800px){

.message_title{
	font-size:2.5vw;
    font-weight:bold;
	text-align:center;
    padding:50px 0 15px;
}
.message{
    width:75%;
    font-size:1.8vw;
    margin:auto;
}

/*---------------求める人材------------------*/
.jinzai1{
    font-size:2.5vw;
}
.jinzai2{
    font-size:1.8vw;
}

/* ---------募集要項----------- */
.bosyu{
    width: 90%;
    margin:3% auto 0;
    padding-bottom:10%;
}
/*タブのスタイル*/
.tab_item {
    line-height: 60px;
    font-size:2vw;
}

/*ta1のtdタグ内の段落(p)タグ*/
.tab_title {
	font-size:2vw;
    line-height:30px;
}

.tab_title2 {
	font-size:1vw;
    line-height:10px;
}

.ta1 {
	width: 90%;
}
.ta1 tr {
	font-size:1.8vw;
	word-break: break-all;
    vertical-align:top;
    padding:10px 15px;
    'border-bottom: 1px solid #d1eeee;	/*テーブルの枠線の幅、線種、色*/
}
}

/*画面幅480px以下の設定
-----------------------------------------------------------------------*/
@media screen and (max-width:480px){
.bosyu{
    width: 90%;
    margin: 5% auto 0;
}

}