body{
padding:0;
margin:0;
background:rgba(255,250,250,1.0);
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans", Meiryo, sans-serif;
}

.headerzone{
display:block;
margin:auto;
width:100%;
background:#fff;
}

.mjlogo{
width:200px;
margin-left:0.5rem;
margin-top:0.5rem;
}


.mjimg{
width:100%;

}


.mainarea{
display:block;
margin:auto;
width:100%;
max-width:800px;
background:rgba(255,255,255,1.0);
padding-bottom:20px;
}


.textbox{
display:block;
margin:auto;
width:90%;
}


.textbox2{
display:block;
margin:auto;
width:96%;
}


.midashi1{
font-size:2.0rem;
font-weight:bold;
padding-left:1.0rem;
border-left:8px solid #000;
border-bottom:1px dotted #000;
background:rgba(255,250,250,1.0);
}

.text1{
font-size:1.5rem;
}

.text2{
font-size:2.7rem;
text-align:center;
margin-top:100px;
margin-bottom:100px;
}

.text3{
font-size:1.8rem;

}


.saiyoutext{
text-align:center;
font-size:4rem;
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
}

.number{
font-size:6rem;
color:#ff0000;
animation-name:numberblink;
animation-duration:2.0s;
animation-iteration-count:infinite;
}


@keyframes numberblink{

  0% 100%{
opacity:1;
  }
  10% {
opacity:0;
  }

  20%{
opacity:1;
  }

  30% {
opacity:0;
  }

  40%{
opacity:1;
  }

}


.saiyousubtext{
text-align:center;
font-size:1.8rem;
padding-bottom:0;
margin-bottom:0;

}


.saiyousubtext2{
background:#ff0000;
color:#fff;
padding-left:1.0rem;
padding-right:1.0rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
border-radius:30px;
}


.textbox li{
font-size:1.8rem;

}


.entrybutton{
display:block;
margin:auto;
text-decoration:none;
color:#fff;
background:#008000;
font-size:1.8rem;
text-align:center;
width:600px;
padding-top:1.3rem;
padding-bottom:1.3rem;
border-radius:7px;
box-shadow:0px 10px 0px #006400;
position:relative;
box-sizing: border-box;
overflow: hidden;
margin-bottom:30px;

}


.buttonarrow{
width:3.0rem;
position:absolute;
top:0;
bottom:0;
right:25;
margin: auto 0;
}



.entrybutton::before {
    content: '';
    height: 100%;
    width: 30px;
    position: absolute;
    top: -180px;
    left: 0;
    background-color: #fff;
    opacity: 0;
    animation: kiran 3s ease-in-out infinite;
    display: inline-block;
}


@-webkit-keyframes kiran {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


.button_ud_frame{
display:block;
margin:auto;
width:600px;
border:2px solid #ff0000;
position:relative;
margin-bottom:20px;
}


.button_ud_text{
font-size:1rem;

}


.button_ud_midashi{
position:absolute;
background:#fff;
color:#ff0000;
top:-15;
right:0;
left:0;
margin: 0 auto;
width:10rem;
text-align:center;
font-size:1.2rem;
font-weight:bold;
}


.jobstyle{
display:block;
width:100%;
height:35vh;
background-image:url(../image/contentimg2.jpg);
background-size:cover;
position:relative;
}


.absmidashi{
width:100%;
text-align:center;
position:absolute;
font-size:2.0rem;
bottom: 0%;
left: 50%;
transform: translate(-50%, 0%);
color:#fff;
background:linear-gradient(rgba(28,8,4,0),rgba(28,8,4,0.9));
margin-top:0;
margin-bottom:0;
padding-top:10vh;
padding-bottom:4vh;
font-weight:bold;
}


.jobstyle2{
display:block;
width:100%;
height:35vh;
background-image:url(../image/contentimg3.jpg);
background-size:cover;
position:relative;
}


.negativezone{
display:block;
margin:auto;
width:90%;
background:#add8e6;
padding-top:1rem;
padding-bottom:1rem;
margin-top:1rem;
border:1px solid #6495ed;
}



.positivezone{
display:block;
margin:auto;
width:90%;
background:#ffe4c4;
padding-top:1rem;
padding-bottom:1rem;
margin-top:1rem;
border:1px solid #ff8c00;
}



.qatable{
width:100%;
border-spacing:0;
margin-bottom:2rem;

}

.qatd1{
width:7%;
vertical-align:top;
padding-top:3rem;
padding-bottom:1rem;
}

.qatd2{
width:93%;
padding-top:3rem;
padding-bottom:1rem;
padding-left:0.5rem;
}


.qatd3{
width:10%;
vertical-align:top;
padding-bottom:3rem;
border-bottom:1px solid #999;
}

.qatd4{
width:90%;
padding-bottom:3rem;
border-bottom:1px solid #999;
padding-left:0.5rem;
}


.qatext{
font-size:1.8rem;

}

footer{
width:100%;
background:#f5f5f5;
text-align:center;
padding-top:20px;
padding-bottom:30px;
}

.copy{


}



.fade_in_u {
    animation-name: fadeInAnime_under;
    animation-duration: 2.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime_under {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.fade_in_t {
    animation-name: fadeInAnime_top;
    animation-duration: 2.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime_top {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.fade_in_l {
    animation-name: fadeInAnime_left;
    animation-duration: 2.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime_left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}




.fade_in_r {
    animation-name: fadeInAnime_right;
    animation-duration: 2.0s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime_right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.scroll_left {
  transition: 1.2s ease-in-out;
  transform: translateX(-30px);
  opacity: 0;
}
.scroll_left.on {
  transform: translateX(0);
  opacity: 1.0;
}


.scroll_right {
  transition: 1.2s ease-in-out;
  transform: translateX(30px);
  opacity: 0;
}
.scroll_right.on {
  transform: translateX(0);
  opacity: 1.0;
}


.scroll_under {
  transition: 1.2s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_under.on {
  transform: translateY(0);
  opacity: 1.0;
}


.scroll_top {
  transition: 1.2s ease-in-out;
  transform: translateY(-30px);
  opacity: 0;
}
.scroll_top.on {
  transform: translateY(0);
  opacity: 1.0;
}



@media screen and (max-width:800px) {
/* 800px以下の横幅の場合に適応される */


.mjlogo{
width:40%;
margin-left:0.5rem;
margin-top:0.5rem;
}

.midashi1{
font-size:1.7rem;
font-weight:bold;
padding-left:1.0rem;
border-left:8px solid #000;
border-bottom:1px dotted #000;
background:rgba(255,250,250,1.0);
}

.text1{
font-size:1.2rem;
}


.text2{
font-size:2.0rem;
text-align:center;
margin-top:50px;
margin-bottom:50px;
}

.text3{
font-size:1.3rem;
}



.saiyoutext{
text-align:center;
font-size:3rem;
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
}

.number{
font-size:5rem;
color:#ff0000;
animation-name:numberblink;
animation-duration:2.0s;
animation-iteration-count:infinite;
}

.saiyousubtext{
text-align:center;
font-size:1.3rem;
padding-bottom:0;
margin-bottom:0;
}


.saiyousubtext2{
background:#ff0000;
color:#fff;
padding-left:1.0rem;
padding-right:1.0rem;
padding-top:0.5rem;
padding-bottom:0.5rem;
border-radius:20px;
}


.textbox li{
font-size:1.3rem;

}


.entrybutton{
display:block;
margin:auto;
text-decoration:none;
color:#fff;
background:#008000;
font-size:1.3rem;
text-align:center;
width:96%;
padding-top:1.3rem;
padding-bottom:1.3rem;
border-radius:7px;
box-shadow:0px 10px 0px #006400;
position:relative;
margin-bottom:30px;

}


.buttonarrow{
width:2.3rem;
position:absolute;
top:0;
bottom:0;
right:10;
margin: auto 0;
}



.button_ud_frame{
display:block;
margin:auto;
width:96%;
border:2px solid #ff0000;
position:relative;
margin-bottom:20px;
}


.jobstyle{
display:block;
width:100%;
height:20vh;
background-size:cover;
background-image: url(../image/contentimg2.jpg);
background-repeat:no-repeat;
position:relative;
}



.absmidashi{
width:100%;
text-align:center;
position:absolute;
font-size:1.7rem;
bottom:0;
left: 50%;
transform: translate(-50%, 0%);
color:#fff;
background:linear-gradient(rgba(28,8,4,0),rgba(28,8,4,0.9));
margin-top:0;
margin-bottom:0;
padding-top:10vh;
padding-bottom:2vh;
}



.jobstyle2{
display:block;
width:100%;
height:20vh;
background-size:cover;
background-image: url(../image/contentimg3.jpg);
background-repeat:no-repeat;
position:relative;
}



.qatd1{
width:15%;
vertical-align:top;
padding-top:2rem;
padding-bottom:0.5rem;
}

.qatd2{
width:85%;
padding-top:2rem;
padding-bottom:0.5rem;
padding-left:0.5rem;
}


.qatd3{
width:15%;
vertical-align:top;
padding-bottom:1rem;
border-bottom:1px solid #999;
}

.qatd4{
width:85%;
padding-bottom:1rem;
border-bottom:1px solid #999;
padding-left:0.5rem;
}


.qatext{
font-size:1.3rem;

}


}