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

#hero h2 {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-style: italic;
}

#visualNav {
width: 90%;
max-width: 500px;
margin: 0 auto;
background: #fff;
border: 4px solid #717171;
transform: translateY(-50%);
}
#visualNav ul {
display: flex;
}
#visualNav ul li {
width: 25%;
padding: 10px 0;
}
#visualNav ul li a {
display: block;
text-align: center;
border-right: 1px solid #ccc;
}
#visualNav ul li:nth-last-child(1) a {
border-right: none;
}
#visualNav ul li a i {
display: block;
}

#recruitMessage {
color: #fff;
}

@media screen and (max-width: 560px){
p {
font-size: 1.4rem;
line-height: 150%;
}
#hero {
padding: 140px 0 100px;
}

#visualNav ul li a {
font-size: 1.1rem;
}
#visualNav ul li a i {
font-size: 1.8rem;
padding-bottom: 3px;
}

#recruitMessage {
padding-top: 50px;
margin-bottom: 50px;
background: url("../images/messageBg.jpg") no-repeat center center;
background-size: cover;
}
}

@media screen and (min-width: 561px){
#visualNav ul li a i {
font-size: 30px;
font-size: 3rem;
padding-bottom: 4px;
}
}

@media screen and (max-width: 799px){
#message div.df {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
#messagePhoto, #messageText {
width: 100%;
}
#messagePhoto {
padding-bottom: 20px;
text-align: center;
}
#messagePhoto img {
width: 50%;
}
#messageText > div {
width: 90%;
margin: 0 auto;
}
}

@media screen and (min-width: 800px){
#message div.df {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
#messagePhoto, #messageText {
width: 50%;
}
#messageText {
display: flex;
justify-content: center;
align-items: center;
background: url("../images/scroll.gif") no-repeat;
background-size: auto 80px;
background-position: top 0 left 5%;
}
#messageText > div {
width: 80%;
}
}

@media (min-width:561px) and (max-width:959px){
#hero {
padding: 260px 0 200px;
}

#recruitMessage {
padding-top: 60px;
margin-bottom: 60px;
}
}

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

}

@media screen and (min-width: 960px){
#hero {
padding: 400px 0 300px;
}

#recruitMessage {
padding-top: 80px;
margin-bottom: 80px;
}
}

@media (min-width:561px) and (max-width:1279px){
#recruitMessage {
background: url("../images/messageBgx2.jpg") no-repeat center center;
background-size: cover;
}
}

@media screen and (min-width: 1280px){
#recruitMessage {
background: url("../images/messageBgx3.jpg") no-repeat center center;
background-size: cover;
}
}