@charset "UTF-8";
/* CSS Document */

#mainimage {background:#000 url(../../images/mainimage.jpg) top center no-repeat; min-width: 1000px; /*border-top:#6e0000 6px solid;*/}
#mainimage .inner {width:1000px; height:429px; margin:0 auto;}
#mainimage .inner h2 {padding:145px 0 15px 652px;}
#mainimage .inner .anchor {padding:15px 0 0 630px;}

section {width:1000px; margin:20px auto;}
section h2 {margin-bottom:18px;}
section strong {font-weight:bold;}
section .area01 {width:400px; float:left; margin:0 3px 0 0px;}
section .area01 .txt {margin-bottom:5px;}
section .area01 dl table tr td{ padding-right:3px;}
section .area01 dl table tr td img{ width: 100px;}
section .area01 dl {margin-bottom:20px;}
section .area01 dl dt {width:110px; float:left;}
section .area02 {
    width: 310px;
    float: left;
    margin-left: 21px;
}
section .area02 dl dt { font-weight:bold;}
section .area02 dl dd { margin-bottom:15px;}

section .recruit {width:231px; float:left; display:table-cell; text-align:right; background:url(../../images/border.gif) repeat-y;}

section .nenmatu {width:230px; float:right; margin-top: 25px;}
section .nenmatu img {margin-bottom: 10px;}
section .nenmatu a:hover {opacity: 0.5;}

#slide-bg {
width: 100%;
background:#000;
}

#stage {
position: relative;
width:100vw;
height: 29vw;
margin: 0 auto;
background:#000;
}
.pic {
position: absolute;
}
.pic img {
width:100vw;
height: 29vw;
opacity:0;
animation: imgTrans 30s infinite;
}
#photo1 img {
animation-delay: 0s;
}
#photo2 img {
animation-delay: 6s;
}
#photo3 img {
animation-delay: 12s;
}
#photo4 img {
animation-delay: 18s;
}
#photo5 img {
animation-delay: 24s;
}



@keyframes imgTrans {
0% { opacity:0; }
5% { opacity:1; }
20% { opacity:1; }
25% { opacity:0; }
100% { opacity:0; }
}


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

#mainimage {background:#000 url(../../images/mainimage.jpg) top center no-repeat; min-width:calc( 750 / 750*100vw ); /*border-top:#6e0000 6px solid;*/}
#mainimage .inner {width:calc( 750 / 750*100vw ); height:429px; margin:0 auto;}
#mainimage .inner h2 {padding:145px 0 15px 652px;}
#mainimage .inner .anchor {padding:15px 0 0 630px;}

section {width:calc( 670 / 750*100vw ); margin:calc( 40 / 750*100vw ) auto;}
section h2 {margin-bottom:18px;}
section strong {font-weight:bold;}
section .area01 {width:calc( 670 / 750*100vw ); float:none; margin:0 43px 0 0px;}
section .area01 .txt {margin-bottom:5px;}
section .area01 dl {margin-bottom:20px;}
section .area01 dl dt {width:calc( 670 / 750*100vw );float:none;}
section .area02 {width:calc( 670 / 750*100vw ); float:none; margin: inherit;}
section .area02 dl dt { font-weight:bold;}
section .area02 dl dd { margin-bottom:15px;}
section .area01 dl table {width:100%;}
section .area01 dl table tr td{width:calc( 220 / 750*100vw ); padding-right: calc( 5 / 750*100vw );}
section .area01 dl table tr td:last-child{padding-right: 0;}
section .area01 dl table tr td img{ width:calc( 160 / 750*100vw );}

section .recruit {width:231px; float:left; display:table-cell; text-align:right; background:url(../../images/border.gif) repeat-y;}

section .nenmatu {width:180px; float:left; display:table-cell; margin-right: 125px; background:url(../../images/border.gif) repeat-y;}
section .nenmatu img {width:230px;}

#slide-bg {
width: 100%;
background:#000; padding-top:calc( 100 / 750*100vw ) ;

}

#stage {
position: relative;
max-width:calc( 750 / 750*100vw );
height: calc( 660 / 750*100vw );
}
.pic {
position: absolute;
}
.pic img {
max-width:calc( 750 / 750*100vw );
height: calc( 660 / 750*100vw );
}
#photo1 img {
animation-delay: 0s;
}
#photo2 img {
animation-delay: 6s;
}
#photo3 img {
animation-delay: 12s;
}
#photo4 img {
animation-delay: 18s;
}
#photo5 img {
animation-delay: 24s;
}
	
	
section .nenmatu {width: 100%;
text-align: center;
background: no-repeat;
margin: 5vw 0;}
section .nenmatu img {}

}