@import url(https://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(nav.css);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}







/*スマホ
------------------------------------------------------------*/



@media only screen and (max-width: 799px){




 .ping{
     position:absolute;
     top:35%;
     left:0;
     width:100%;
     height:auto;
z-index:2;
     }





/*スマホボタン
------------------------------------------------------------*/
#this{
color:#696969;
background-color:#FFFFCC;
font-size:10px;
}



#btn{
}
.entry a{width:100%;
}




/*スマホコンテンツ
------------------------------------------------------------*/

section h2, h3{
	font-size: 14px;
	font-weight:normal;
	text-align: center;
}
section p{
	font-size: 13px;
	font-weight:normal;
	text-align: center;
}
.cov-02  p{
          font-size:13px;
          }

.co-2 img{ddisplay:none;}

	.col034{
		display: none;
                border:solid 1px #000000;
        	}

	.col035 {
		display: none;
		width:150px;
                height:auto;
        	}

        .cov-3{
                margin-top:50px;
                display:flex;
                justify-content: space-between;
                width:95%;
                height:auto;
                bborder-bottom:solid 1px #a9a9a9;
                padding:;
                margin:auto;
                }




#sec033{margin-top:10px;}

}




body{
	font: 11px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
  ttext-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}



/* スマホメイン画像
------------------------------------------------------------*/


#sample {
    position: relative;
    top:50px;
    left: 0px;
    width: 100%;
    height: 400px;
    background:#000000;
    z-index:1;
   overflow:hidden;
}

#sample li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}


#sample li:nth-child(1) { 
	background-image: url(../images/80.jpg); 
}
#sample li:nth-child(2) {
    background-image: url(../images/81.jpg);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
#sample li:nth-child(3) {
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
#sample li:nth-child(4) {
    background-image: url(../images/3.jpg);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}


@-webkit-keyframes anime { 
	0% {
	    -webkit-animation-timing-function: ease-in;
		opacity: 0.1;
	}
	10% {
	    -webkit-transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    -webkit-transform: scale(1.2);
            -webkit-animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    -webkit-transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}
@keyframes anime { 
	0% {
	    animation-timing-function: ease-in;
		opacity: 0;
	}
	10% {
	    transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    transform: scale(1.2);
            animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}






h1, h2, ,h3 ,p{
	font-family: 'Josefin Sans', 'Noto Sans JP',serif;
}

img{
	width: 100%;
	height: auto;
}

section{clear:both;}

section h1{
	font-size: 18px;
	font-weight:normal;
	text-align: center;
}

section h2, h3{
	font-size: 18px;
	font-weight:normal;
	text-align: center;
}

section p{
	font-size: 12px;
	font-weight:normal;
	text-align: center;
}

section h4{
	font-size: 18px;
	font-weight:normal;
	text-align: left;
  bbackground: #696969;
  color: #009e8f;


}






/* スマホ2カラム
------------------------------------------------------------*/


#co-2{bbackground:red;
margin-top:100px;
mmargin-bottom:100px;
}

#co-2 h1{
        margin:0 auto 50px;
        line-height: 22px;
        bborder:solid 1px #000000;
        }


         .co-2{
                background:#f6f6f6;
                display:flex;
                flex-direction: column-reverse;;
  justify-content: center;
  align-items: center;

                width:90%;
                height:auto;
                bborder-bottom:solid 1px #000000;
                margin:5px auto;
              }

        .cov-2{
                width:70%;
                height:auto;
                bborder:solid 1px #f5f5f5;
                margin:auto;
                overflow:hidden;
                }

     .cov-2 img{
                width:80%;
                height:auto;
                margin:2% 10% 2%;
                }

     .cov-2 video{
                width:80%;
                height:auto;
                margin:2% 10% 2%;
                }

        .cov-02{
                position:relative;
                display:block;
                justify-content: space-between;
                width:80%;
                height:auto;
                border-bottom:solid 2px #7fff00;
                padding:;
                margin:auto;
                }

 .cov-02 h3{
        pposition:absolute;
        ttop:10px;
        color:red;
        width:100%;
	text-align: center;
        order:solid #000000 1px;
           }

 .cov-02 p{
        pposition:absolute;
        ttop:40px;
        width:100%;
	text-align: left;
        bborder:solid #000000 1px;
        margin-bottom:20px;

           }

.cov-img2{
display:none;
         position :absolute;
         top:-15px;
         left:0px;
         width:30%;
         height:auto;
         bborder:solid 1px #7fff00;
         z-index:1;  
         opacity:0.2;
         }

/*
------------------------------------------------------------*/
         .co-2-1{
                background:#f6f6f6;
                display:flex;
                flex-direction: column-reverse;
                width:100%;
                height:auto;
                bborder-bottom:solid 1px #000000;
                mmargin:auto;
              }

        .cov-2-1{
                width:70%;
                height:auto;
                bborder:solid 1px #f5f5f5;
                margin:auto;
                overflow:hidden;
                }

     .cov-2-1 img{
                width:100%;
                height:auto;
                margin:2% 10% 2%;
                }


        .cov-02-1{
                position:relative;
                display:block;
                justify-content: space-between;
                width:80%;
                height:auto;
                border-bottom:solid 1px #7fff00;
                padding:;
                margin:auto;
                }

 .cov-02-1 h3{
        pposition:absolute;
        ttop:10px;
        color:red;
        width:100%;
	text-align: center;
        order:solid #000000 1px;
           }

 .cov-02-1 p{
        pposition:absolute;
        ttop:40px;
        width:80%;
	text-align: left;
        bborder:solid #000000 1px;
        margin-bottom:20px;
           }

.cov-img2-1{
         position :absolute;
         top:0;
         left:0px;
         width:35%;
         height:auto;
         bborder:solid 1px #7fff00;
         z-index:1;
         opacity:0.2;
         }


/* スマホ　先輩ボイス
------------------------------------------------------------*/


 h5{
	font-size: 16px;
	font-weight:bold;
	text-align: center;
        width:100%;
        margin:auto;
        background:#7ec7f4;       
        color:#fff;
}

------------------------------------------------------------*/

/*
------------------------------------------------------------*/





.triangle3{
}

.triangle3{
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid  #7ec7f4;
}



.axes-tri{
    width:10%;
    height:auto;
    margin:auto;

 }
  



.htn-box01 {
display:flex;
width:90%;
height:auto;
background: #dcfed6;
margin:1% auto;
border-radius: 10px;
}


.htn-box02 {
display:flex;
width:90%;
height:auto;
background: #ffe2bc;
margin:1% auto;
border-radius: 10px;
}

.htn-box03 {
display:flex;
width:90%;
height:auto;
background: #b4e3fe;
margin:1% auto;
border-radius: 10px;
}



.htn-img01{
width:20%;
height:auto;
bborder:solid 1px #dcfed6;
}

.htn-p{
display: flex;
justify-content: center;
align-items: center;
width:90%;
height:auto;
bborder:solid 1px #000000;
}

.htn-p p{
font-size:14px;
font-weight:bold;
width:70%;
bborder:solid 1px #000000;
}

.htn-ya{
display: flex;
justify-content: center;
align-items: center;
width:10%;
height:auto;
bborder:solid 1px #dcfed6;
}





/* かごジョブ
------------------------------------------------------------*/

.logo{width:60%;
      height:auto;
      margin:15% auto 0px;}




      
      .axes{
        width:80%;
        height:auto;
        margin:2% auto;
     }
    .axes-img{
      justify-content: space-between;
      width:100%;
      height:auto;
      border:solid 1px #7ec7f4;
      background-color:#f3f3f3;
       }
       .upper {
        display: none;        
        }      
     
    .axes-img-right{ 
     height:auto;
     bborder:solid 1px #7ec7f4;
     }
     
    .axes-img-left{
      display: none;      
     }   




/* スマホ　ぼしゅうようこう
------------------------------------------------------------*/


#co-3{
                mmargin-top:20px;
                bbackground:#a9a9a9;
}

#co-3 h2{
margin-bottom:30px;
}

        .cov-3{
                margin-top:50px;
                display:flex;
                justify-content: space-between;
                width:60%;
                height:auto;
                bborder-bottom:solid 1px #a9a9a9;
                padding:;
                margin:auto;
                }

	.cov-3-2{
                width:30%;
                height:auto;
                border-bottom:solid 1px #a9a9a9;
        	}

	.cov-3-2 p{
        	margin-top:12px;
                float:left;
                color:blue;
                }


	.cov-3-3{
                width:70%;
                height:auto;
                border-bottom:solid 1px #a9a9a9;
        	}

	.cov-3-3 p{
        	margin-top:12px;
                float:left;
                }

/* スマホ　フッター
------------------------------------------------------------*/
#sec033{
        background:#000000;
        padding:1%;
        bborder:solid 1px #000000;
}
        .iinner{display:flex;
                justify-content: space-between;
                width:100%;
                height:auto;
                bborder:solid 1px #fff;
                margin:auto;
                }
                .col033-pc {
                        display: none;
 
                        }
        
        
                        .col034-s {
                                display: block;                                       
                                width:100%;
                                height:auto;
                                text-align:center;
                                margin:1% auto;
                                bborder:solid 1px #fff;               
                                }
                                
                      .col034-s p span{font-size: 15px;
                                color:green;
                                }
                
                      .col034-s p{
                                color:#fff;
                                }

}






/* PC 設定はここから
------------------------------------------------------------*/



@media only screen and (min-width: 1200px){
}

@media only screen and (min-width: 800px){

 .ping{
     position:absolute;
     top:25%;
     left:0;
     width:100%;
     height:auto;
z-index:2;
     }





#this{
color:#696969;
background-color:#FFFFCC;
font-size:10px;
}


/* PCメインイメージ
------------------------------------------------------------*/

#sample{height:500px;}




/* PC2カラム
------------------------------------------------------------*/




#co-2{
      bborder:solid 1px red;
      }

#co-2 h1{
        font-size:20px;
        margin:30px 0px 40px;
        line-height: 30px;
        bborder:solid 1px #000000;
        }



.co-2{          position:relative;
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                width:90%;
                height:auto;
                border-bottom:solid 1px #777777;
                margin:10px auto 1px;
                padding:1%;
                zz-index:-2;
                border-radius:10px;
                }
.cov-img2{
display:block;
      position:absolute;
                top:0;
                width:20%;
                bborder:solid 1px #000000;  
         }

        .cov-2{
                width:38%;
                bborder:solid 1px #f5f5f5;
                padding:0.5%;

                }


     .cov-2 img{
                width:90%;
                height:auto;
                bborder:solid 1px #000000;  
               }

     .cov-2 video{
                width:90%;
                height:auto;
                bborder:solid 1px #000000;  
               }


        .cov-02{
                position:relative;
                width:60%;
                height:auto;
                border-bottom:none;  
                bborder:solid 1px #000000;  
                }

 .cov-02 h3{
               font-size:22px;

                pposition:absolute;
                line-height:27px;
                margin-top:2%;
                width:100%;
        	text-align: center;
                bborder:solid #000000 1px;
                color:tomato;
                }

 .cov-02 p{
                pposition:absolute;
                top:30%;
                width:auto;
        	text-align: left;
                margin:5% 10%;
                font-size:14px;
                bborder:solid #000000 1px;
                }



/* PC　先輩ボイス
------------------------------------------------------------*/



  
.axes-title{
   width:50%;
   height:auto;

   margin:5% auto 0%;
   border:solid 1px #7ec7f4;
  }


.htn-sec-out{
width:50%;
height:auto;
margin:0 auto;
border:solid 1px #7ec7f4;
background-color: #f4f4f4;
}


.htn-sec{
width:100%;
height:auto;
display:flex;
margin:1% auto;
id 1px #7ec7f4;
}



.htn-box01 {
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}


.htn-box02 {
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}

.htn-box03 {
display:flex;
flex-direction: column-reverse;
width:100%;
margin: auto;
border-radius: 10px;
}



.htn-box-s {
width:32%;
height:auto;
border:solid 1px #ffb754;
background-color: #ffe8c9;
border-radius: 5px;
margin:0 auto;
}


.htn-img01{
width:40%;
height:auto;
bborder:solid 1px #dcfed6;
flex-shrink: 0;
}

.htn-p{
width:100%;
margin:5% auto 0px;
height:70px;
bborder:solid 1px #000000;
}

.htn-p p{
font-size:14px;
font-weight:bold;
wwidth:100%;
bborder:solid 1px #000000;
}

.htn-ya{
display:none;
justify-content: center;
align-items: center;
width:10%;
height:auto;
bborder:solid 1px #dcfed6;
}


.axes-tri{
    width:10%;
    height:50px;
    margin: auto;

 }
  


.triangle3{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid  #7ec7f4;
}



.axes-title h5{
  font-size:20px;
  }


/* かごジョブ
------------------------------------------------------------*/

.logo{width:25%;
      height: auto;
      margin:5% auto 0px;
bborder:solid #000000 1px;
}

.logo :hover{opacity: 0.5;        
}


     
     .axes{
         width:70%;
         height:auto;
         margin:2% auto;
      }
     .axes-img{
       display:flex;
       justify-content: space-between;
       width:100%;
       height:auto;
       border:solid 1px #7ec7f4;
       background-color:#f3f3f3;
        }
        
      
     .upper{
      display: block;       
      height:auto;
      bborder:solid 1px #7ec7f4;
      }

      .axes-img-right{
        width:65%;
        height:auto;
        bborder:solid 1px #7ec7f4;
        }     

        .mid:hover{opacity:0.5;}             
        .bot:hover{opacity:0.5;}    


     .axes-img-left{
       display: block;      
       width:35%;
       hheight:auto;
       bborder:solid 1px #7ec7f4;
      }   

/* PCぼしゅうようこう
------------------------------------------------------------*/


	.cov-3-2{
                width:33%;
        	}
	.cov-3-2 p{
　　　　　　　　font-size:15px;
                }


	.cov-3-3{
                width:65%;
        	}

	.cov-3-3 p{
　　　　　　　　font-size:15px;
                }



/* PCフッター
------------------------------------------------------------*/
#sec033{height:auto;
                margin-top:70px;
                background:#000000;
}
        .iinner{display:flex;
                justify-content: space-between;
                width:65%;
                bborder:solid 1px red;
                margin:auto;
                }
                .col033-pc {
                        display: block;
                        width:100%;
                        height:auto;
                        text-align:center;
                        margin:1% auto;
                        bborder:solid 1px #fff;               
                        }
                        
              .col033-pc p span{font-size: 15px;
                        color:green;
                        }
        
              .col033-pc p{
                        color:#fff;
                        }
        
        
                        .col034-s {
                                display: none;                                       
                                } 
}



@media only screen and (min-width: 900px){
.co-2{          position:relative;
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                width:80%;
                height:auto;
                border-bottom:solid 1px #777777;
                margin:10px auto 1px;
                padding:1%;
                zz-index:-2;
         


}

@media only screen and (min-width: 1000px){
.co-2{          position:relative;
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                width:75%;
                height:auto;
                border-bottom:solid 1px #777777;
                margin:10px auto 1px;
                padding:1%;
                zz-index:-2;
         


}

@media only screen and (min-width: 1100px){
.co-2{          position:relative;
                display:flex;
                flex-direction: row;
                justify-content: space-between;
                width:70%;
                height:auto;
                border-bottom:solid 1px #777777;
                margin:10px auto 1px;
                padding:1%;
                zz-index:-2;
         


}

@media only screen and (min-width: 641px){

}


/* スマホ　その他
------------------------------------------------------------*/

@media only screen and (max-width: 799px){




section h2, h3{
	font-size: 14px;
	font-weight:normal;
	text-align: center;
}
section p{
	font-size: 13px;
	font-weight:normal;
	text-align: center;
}
.cov-02  p{
          font-size:13px;
          }

.co-2 img{ddisplay:none;}

	.col034{
		display: none;
                border:solid 1px #000000;
        	}

	.col035 {
		display: none;
		width:150px;
                height:auto;
        	}

        .cov-3{
                margin-top:50px;
                display:flex;
                justify-content: space-between;
                width:95%;
                height:auto;
                bborder-bottom:solid 1px #a9a9a9;
                padding:;
                margin:auto;
                }



#btn{
margin-top:10px;
position:relative;
}
.entry{
osition:absolute;
width:60%;
height:30px;
top:20;
left:0;
right:0;
bottom:0;
margin:0 auto;
text-align:center;

background:green;
border-radius:5px;
}
.entry a{
padding-top:6px;
font-size:13px;
text-align:center;
color:#fff;
}











.eentry{ddisplay:none;}


#sec033{margin-top:10px;}

}
/* デスクトップ用　その他
------------------------------------------------------------*/

@media only screen and (min-width: 1399px){
#sample{
       height:650px;
       wwidth:60%;       
margin:auto;
}

.co-2{ 
           width:60%;
           height:auto;
           }


	section h2{
		padding: 50px 0 20px 0;
         	}
section p{
	font-size: 14px;
        }
.cov-02  p{
          font-size:16px;
          }

}

@media only screen and (min-width: 1250px){
.wrap{
 width:1250px;
 margin:auto;
 bborder:solid 1px #a9a9a9;
background:#fff;
z-index:-10;
}
body{
background:#eeeeee;
}


}