body {
background-color: #000;
}
.container {
width: 100%;
padding: 0 20px;
}
@media screen and (min-width: 1200px) {
.container {
width: 1020px;
}
}
.full-bg {
position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/recruit/cover.jpg);
background-size: cover;
background-position: 50% 100%;
}
section.cover-top {
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh400.png);
background-size: 100px 100px;
height: 754px;
padding-top: 80px;
}
@media screen and (min-width: 1080px) {
section.cover-top {
padding-top: 130px;
}
}
section.cover-top h1 {
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
line-height: 1em;
}
section.cover-top h1 b {
display: inline-block;
font-size: 36px;
border-bottom: 4px solid #e72a31;
padding-bottom: 20px;
}
section.cover-top h1 span {
display: block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 1px;
margin-top: 15px;
}
section.cover-top h2 {
font-weight: normal;
font-style: italic;
text-align: center;
margin-bottom: 70px;
font-size: 16px;
}
@media screen and (min-width: 360px) {
section.cover-top h2 {
font-size: 18px;
}
}
@media screen and (min-width: 768px) {
section.cover-top h2 {
font-size: 24px;
}
}
section.cover-top nav {
background-color: rgba(255, 255, 255, 0.85);
padding: 20px 0 10px 0;
}
@media screen and (min-width: 768px) {
section.cover-top nav {
padding: 40px 0 30px 0;
}
}
@media screen and (min-width: 1080px) {
section.cover-top nav {
padding: 60px 0 40px 0;
}
}
section.cover-top nav li {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
@media screen and (min-width: 768px) {
section.cover-top nav li {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
section.cover-top nav a {
display: block;
position: relative;
height: 80px;
padding-top: 30px;
text-align: center;
border: 1px solid #111;
color: #111;
transition: all .2s;
}
@media screen and (min-width: 768px) {
section.cover-top nav a {
height: 160px;
padding-top: 60px;
}
}
section.cover-top nav a h3 {
position: relative;
display: inline-block;
z-index: 1;
font-weight: normal;
font-size: 13px;
}
@media screen and (min-width: 360px) {
section.cover-top nav a h3 {
font-size: 14px;
}
}
@media screen and (min-width: 768px) {
section.cover-top nav a h3 {
font-size: 16px;
}
}
@media screen and (min-width: 1080px) {
section.cover-top nav a h3 {
font-size: 20px;
}
}
section.cover-top nav a h3:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -3px;
left: 50%;
transition: all .3s ease-out;
}
section.cover-top nav a:before {
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 50%;
width: 0%;
height: 100%;
background: #eb5141 url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ViNTE0MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NmMTYxYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: #eb5141 -moz-linear-gradient(315deg, #eb5141 0%, #cf161a 100%);
background: #eb5141 -webkit-linear-gradient(315deg, #eb5141 0%, #cf161a 100%);
background: #eb5141 linear-gradient(135deg, #eb5141 0%, #cf161a 100%);
transition: all .3s;
}
@media screen and (min-width: 1080px) {
section.cover-top nav a:hover {
color: #fff;
border-color: transparent;
}
section.cover-top nav a:hover:before {
left: 0;
width: 100%;
}
section.cover-top nav a:hover h3:after {
width: 100%;
margin-left: -50%;
background-color: #fff;
}
}