/*================*/
/* トップページ設定 */
/*================*/

* {margin:0px; padding:0px;}


@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}



	
/* 画面外にいる状態 */
.fadein {
    opacity : 0.1;
    transform : translate(0, 50px);
    transition : all 500ms;
}
 
/* 画面内に入った状態 */
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


/*----------------------------------------------------------------------------------------------------*/
/* ★★ for all ★★                                                                                  */
/*----------------------------------------------------------------------------------------------------*/

/* 全体のMAX横幅 */
.all_width{
    max-width: 1200px;
    margin: 0px auto;
}





/*======================================================================================*/
/*        header                                                                        */
/*======================================================================================*/
#header{
    margin: 0px auto;
    text-align: center;
	position: relative;
    
    width: 100%;
    height: 100vh;
    min-height: 100vh;
  
    background-image: url("img/title.jpg");
    background-size:cover;
    background-attachment: fixed;
    background-position:center bottom;
    
}



/*--------------------------------------------------------------------------------------*/
/*        nav                                                                           */
/*--------------------------------------------------------------------------------------*/

/* nav.cssに記述 */


/*--------------------------------------------------------------------------------------*/
/*        title                                                                           */
/*--------------------------------------------------------------------------------------*/
.title{
    height: 100%;
}

.ms_logo{
    width:210px;
    
}


.ms{
	position: absolute;
	top: 28%;
/*    left:5%;*/
	right: 110px;
    text-align:left; 
    
    /*フォント*/
	font-size:2vw;
	color:#ffffff;
    font-weight: 400;
    /*font-family:Yu Gothic;*/
    font-family: 'Sawarabi Gothic', sans-serif;
    line-height: 166%;

    
    animation-name:fade-in1;
    animation-duration:4s; //アニメーション時間
    animation-timing-function: ease-out; //アニメーションさせるイージング
    animation-delay:10s; //アニメーション開始させる時間
    animation-iteration-count:1; //繰り返し回数
}



@keyframes fade-in1 {
    0% {opacity: 0}
    100% {opacity: 1}
}

.ms span{
    /*フォント*/
	font-size:1.2vw;
    line-height: 110%;
}

.ms_name{
    position: absolute;
    top: 38%;
    right:120px;
    z-index: 1;
    
    text-align: left;
    transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    
    /*フォント*/
    font-size:3vw;
    color:#f7f70a;
    line-height: 100%;
    font-family: 'Caveat', cursive;
}


.ms2{
    position: absolute;
    bottom: 20px;
	right: 0;
    left:0;
    
    /*フォント*/
    font-size:1vw;
    color :#ffffff;
    
    animation:fade-in1 1s ease-in-out infinite alternate;
}




/*======================================================================================*/
/*        content                                                                       */
/*======================================================================================*/

/*--------------------------------------------------------------------------------------*/
/*        infomation                                                                    */
/*--------------------------------------------------------------------------------------*/
#info{
    text-align: center;
    min-height:250px;
    margin: 100px auto;
}


h1{ 
    /*フォント*/
	font-size:35px;
    font-weight: 400;
	padding:20px 0px 20px 0px;
    margin:10px 0px;
    font-family: 'Catamaran', sans-serif;
}

h1 span{
    /*フォント*/
	font-size:15px;
    
}

/*infomationテーブル*/
.info_tb{
    width:800px;
    margin: 20px auto;
    border-collapse: collapse;
    border-width: 1px; /* 枠の幅 */
}


.info_tb tr{
    border-style: solid;
    border-width: 1px 0;
    border-color: #a5a4a4;
    height:50px;
}


.info_tb td{
    text-align: left;
    padding-top:5px;
    padding-bottom:5px;
}



/*--------------------------------------------------------------------------------------*/
/*        メニュー                                                                       */
/*--------------------------------------------------------------------------------------*/


.home_contents01 {
    position: relative;
    height:auto;
	overflow:hidden;    
    margin-top: 10% ;
    padding: 70px 0;
}


/*　上要素　水色*/
.home_contents01:before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 120%;
    height: 1000px;
    margin: 3% -10% 0;
      /*margin: 3% 10% 0;*/
    /*background:#b8c1c7;*/
/*    background:#2994b2;*/
    background:#158bc9;
    
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    z-index: -1;
}

/*　下要素　青　*/
.home_contents01:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 120%;
    height:200px;
    margin: 3% -10% 0;
/*    background: #fabc60;*/
    background: #060e6f;

    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    z-index: -2;
}

/**/


.home_contents01_inner {
    max-width: 800px;
    height:800px;
    margin: 0 auto;

    color: #fff;
    text-align: center;
}


/* メニュー共通 */
.menu{
    position: absolute;
    top: 20%;    
    width: 480px;    
}

.menu p{
    /*フォント*/
    font-size:25px;
    font-weight:400;
}

.menu span{
    /*フォント*/
    font-size:15px;
}


.menu_titile{
    position: absolute;
    top: 80px;
    left:250px;
    z-index: 1;
    
    font-family: 'Caveat', cursive;
    
    width:100%;
    
    text-align: left;
}


.menu_titile p{
    
    
    /*フォント*/
    font-size:70px;
    font-weight:400;
    color:#f7f70a;
    
}

.menu_text span{
    /*フォント*/
    font-size:20px;
    font-weight:600;
    
}

.menu_text{
    position: absolute;
    top: 150px;
    left:350px;
    z-index: 1;
    text-align:left;
    
    /*フォント*/
    font-size:12px;
    font-weight:400;
        
    width:100%;
}



/*リンク設定*/
.menu a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    z-index: 2; 
}



/* aout usメニュー */
.menu1{
    /*スクロール　アニメーション設定*/
    transition: .8s;    
    opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}


.menu1_image{
    position: relative;
    
    background-color:#072c80;
    width:300px;
    height:300px;
    z-index: 1;

    overflow: hidden;
}

/*スクロール　アニメーション設定*/
.menu1_add{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}



.menu1_image:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(img/menu1.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}


/*menu1マウスオーバー設定*/
/*
.menu1_image:hover:after {
    opacity: .8;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
*/





/* serviceメニュー */
.menu2{
    /*スクロール　アニメーション設定*/
    transition: .8s;    
    opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}


.menu2_image{    
    position: relative;
    
    background-color:#072c80;
    width:300px;
    height:300px;
    z-index: 1;
    margin:100px 0px;
    
    overflow: hidden;
}

/*スクロール　アニメーション設定*/
.menu2_add{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

.menu2_image:after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: url(img/menu2.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    background-size: cover;
    
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

/*menu2マウスオーバー設定*/
/*
.menu2_image:hover:after {
    opacity: .8;
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
*/

/* readmore */
.read{
    margin:30px 0;
    padding:10px;
    width: auto;
    text-align: center;    
    background-color: #f7f70a;
    

    /*フォント*/
    font-size:20px;
    font-weight: 400;
    color: #000000;

    /*マウスオーバー設定*/
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, #000000 50%);	
    background-image: linear-gradient(to right, transparent 50%, #000000 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
        
    /*リンク設定*/
    position: relative;
    }
    

/*マウスオーバー設定*/
.read:hover {
    background-position: -100% 100%;
    color: #ffffff;
}


/*リンク設定*/
.read a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
}



/*--------------------------------------------------------------------------------------*/
/*        リクルート                                                                     */
/*--------------------------------------------------------------------------------------*/

.home_contents02 {
    background-image: url(img/rec.jpg);
    background-size: cover;
    height: 800px;
    overflow: hidden;
    padding-bottom: 250px;

}


 
.home_contents02:after {
    content: "";
    display: block;
    height: 100%;
    background: #efe9dd;
    transform: skew(00,3deg) translate(0,30%);
}
 
.home_contents02:before {
    content: "";
    display: block;
    height: 50%;
    background: #158bc9;
    transform: skew(0,3deg) translate(0,-60%);
}


.home_contents02_inner{
    border: 1px solid #ffffff;
    width: 400px;
/*    height: 20%;*/
    padding:70px 50px;
    margin: 0 auto;
    text-align: center;    

    
    /*フォント*/
    font-size:50px;
    font-weight: 400;
    color: #ffffff;
    font-family: 'Catamaran', sans-serif;

    /*マウスオーバー設定*/
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, #f7f70a 50%);	
    background-image: linear-gradient(to right, transparent 50%, #f7f70a 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    
    /*スクロール　アニメーション設定*/
    transition: .7s;   
    opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
    
}

.home_contents02_inner span{
    /*フォント*/
    font-size:15px;    
    font-family:  "游ゴシック", "Yu Gothic";
}

.recruit_i{
    width:50px;
    margin:20px;
    
}
.recruit_m{
    /*フォント*/
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    font-family:  "游ゴシック", "Yu Gothic";
}


/*マウスオーバー設定*/
.home_contents02_inner:hover {
    background-color: #000000;
    background-position: -100% 100%;
    color: #000000;
}

/*スクロール　アニメーション設定*/
.home_contents02_inner_add{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}



/*リンク設定*/
.home_contents02_inner a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    z-index: 2; 
}



/*--------------------------------------------------------------------------------------*/
/*        アクセス                                                                       */
/*--------------------------------------------------------------------------------------*/
.home_contents03{
    margin:50px 50px;
}

.home_contents03_inner{
    margin-top:20px;
    display: flex;
}


.map {
    height: 500px;
    width:75%;
    overflow: hidden;
    padding-bottom: 100px;
/*    padding-bottom: 56.25%;*/
/*   position: relative;*/
}

.map iframe {
    height: 100%;
    width: 100%;
}



.address{
    margin-left:20px;
    
    /* フォント */
    font-size:14px
}

.address span{
    font-size: 20px;
}


.contact{
/*    border: 1px solid #000000;*/
    background-color:rgba(0, 0, 0, 0.2);
    width: 100%;
    padding:15px 0px;
    text-align: center;    

    /*フォント*/
    font-size:20px;
    color: #000000;
    font-weight: 500;

    /*マウスオーバー設定*/
    background-size: 200% 100%;	
    background-image: -webkit-linear-gradient(left, transparent 50%, #000000 50%);	
    background-image: linear-gradient(to right, transparent 50%, #000000 50%);
    -webkit-transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
    
    /*リンク設定*/
    position: relative;
    
}


/*リンク設定*/
.contact a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    z-index: 2; 
}


/*マウスオーバー設定*/
.contact:hover {
    background-position: -100% 100%;
    color: #ffffff;
}







/*----------------------------------------------------------------------------------------------------*/
/*  ★★ 1200px以下 ★★                                                                                */
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1200px){ 

.all_width{
    width:100%;
}











/*----------------------------------------------------------------------------------------------------*/
/*  ★★ 950px以下 ★★                                                                               */
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 950px){ 

/*======================================================================================*/
/*        header                                                                        */
/*======================================================================================*/
#header{
    background-attachment: scroll;
}
    
    
.ms{
	font-size:2.5vw;
}

    
    
/*--------------------------------------------------------------------------------------*/
/*        nav                                                                           */
/*--------------------------------------------------------------------------------------*/

/* nav.cssに記述 */




/*======================================================================================*/
/*        content                                                                       */
/*======================================================================================*/

/*--------------------------------------------------------------------------------------*/
/*        infomation                                                                    */
/*--------------------------------------------------------------------------------------*/


#info{
    width: 90%;
}


.info_tb{
    width: 90%;
}



.topindex_img_big{
    width: 90%;
    height: auto;

}



#top #content02{
	height:auto;
	overflow:hidden;

}


    
/*--------------------------------------------------------------------------------------*/
/*        メニュー                                                                       */
/*--------------------------------------------------------------------------------------*/    
    
 

.home_contents01 {
    position: relative;
    overflow: hidden;
    margin-top: 15% ;
    padding:70px 0px;
}

.home_contents01:before {
    height: 1000px;
}


    
.home_contents01_inner {
    max-width: 90%;
}
 
/*メニュー共通*/ 
.menu{
    width: 50%;
}

    
.menu_titile{
    position: absolute;
    top: 80px;
    left:200px;
    z-index: 1;
    
    width:100%;
}
    
.menu_text{
    position: absolute;
    top: 150px;
    left:270px;
    z-index: 1;
    
    text-align:left;
    
    /*フォント*/
    font-size:12px;
    font-weight:400;
    
    
    width:100%;
}



/* about us メニュー*/
.menu1_image{
    width: 250px;
    height: 250px;
}
    
    
/* service メニュー*/
.menu2{
    margin-top: 150px;
    }
        
.menu2_image{
    width: 250px;
    height: 250px;
}
    
    

 


/*--------------------------------------------------------------------------------------*/
/*        リクルート                                                                     */
/*--------------------------------------------------------------------------------------*/

.home_contents02 {
    background-image: url(img/rec.jpg);
    background-size: cover;
    height: 500px;
    overflow: hidden;
    padding-bottom: 300px;

}
 
.home_contents02:after {
    content: "";
    display: block;
    height: 100%;
    background: #efe9dd;
    transform: skew(00,3deg) translate(0,30%);
}
 
.home_contents02:before {
    content: "";
    display: block;
    height: 50%;
    background: #158bc9;
    transform: skew(0,3deg) translate(0,-60%);
}


/*リンク設定*/
.home_contents02_inner a {
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width: 100%;
    z-index: 2; 
}
    
    
/*--------------------------------------------------------------------------------------*/
/*        アクセス                                                                       */
/*--------------------------------------------------------------------------------------*/
.home_contents03{
    margin:0px 0px 50px 0px;
}

.home_contents03_inner{
    display: block;
}

.home_contents03 h1{
    margin-left:20px; 
}
    
.map {
    height: 150px;
    width:100%;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
.map iframe {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

.address{
    margin:20px 20px;;
}
    
    
 .contact{
    width: 180px;
    
}   
    
    


}
/*----------------------------------------------------------------------------------------------------*/
/*  ★★ 639px以下 ★★                                                                               */
/*----------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 639px){ 


/*======================================================================================*/
/*        header                                                                        */
/*======================================================================================*/


h1{
	font-size:30px;
}


    
.ms{
    text-align: center;
	font-size:4.5vw;
    line-height: 166%;    
    
    position: absolute;
	top: 30%;
    left:0;
    right:0;
}

.ms span{
    /*フォント*/
	font-size:4vw;
    line-height: 110%;
}

.ms_name{
    position: absolute;
    top: 40%;
    right:20px;
    z-index: 1;
    
    /*フォント*/
    font-size:5.5vw;
    color:#f7f70a;
    line-height: 100%;
    font-family: 'Caveat', cursive;
}



.ms2{
    /*フォント*/
    font-size:3vw;
}



/*======================================================================================*/
/*        content                                                                     */
/*======================================================================================*/
/*--------------------------------------------------------------------------------------*/
/*        infomation                                                                    */
/*--------------------------------------------------------------------------------------*/
#info{
        margin: 60px auto;

}

.info_tb{
        font-size:15px;
}


.info_tb th{
	display:block;
        text-align: left;
        padding-top: 5px;
        padding-left: 5px;

}


.info_tb td{
	display:block;
        padding: 15px;

}


/*--------------------------------------------------------------------------------------*/
/*        メニュー                                                                       */
/*--------------------------------------------------------------------------------------*/    
    
.home_contents01{
    margin-top: 20% ;     
    }
    
    
    
/*　上要素　水色*/
.home_contents01:before {
    width: 130%;
    height: 1500px;
    margin: 3% -20% 0;
}

    
    
.home_contents01_inner{
    max-width: 90%;
    height:1000px;
    }
    

/*メニュー共通*/
.menu{
    width: 90%;    
    top: 15%;    
}

    
.menu_titile{
    position: absolute;
    top: 80px;
    left:100px;
    z-index: 1;
    
    width:100%;
}
    
.menu_titile p{
    /*フォント*/
    font-size:60px;
    font-weight:400;
    color:#f7f70a;
}
    
    
.menu_text{
    display: block;
    position: static;
    margin-top:20px;
    
    text-align:left;
    
    /*フォント*/
    font-size:12px;
    font-weight:400;

    width:100%;
}


/* about us メニュー*/
.menu1_image{
    display: block;
    width: 200px;
    height: 200px;
}
    

/* service メニュー*/
.menu2{
    margin-top: 100px;
}
      

.menu2_image{
    display: block;
    width: 200px;
    height: 200px;
    margin:0px 0px;
}
    
    

    
/*--------------------------------------------------------------------------------------*/
/*        リクルート                                                                     */
/*--------------------------------------------------------------------------------------*/    
.home_contents02 {

}
    
    
.home_contents02_inner{
    width:70%;    
    
    padding:70px 20px;
    margin: 0 auto;
    text-align: center;    

    
    /*フォント*/
    font-size:45px;
}
    

.recruit_i{
    width:50px;
    margin:20px;
    
}
.recruit_m{
    /*フォント*/
    font-size: 10px;
    font-weight: 500;
    line-height: 150%;
}





}