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/bi/main_bg.jpg);
background-size: cover;
background-position: 70% 0%;
}
section.entry-bi {
padding: 60px 0 50px 0;
}
section.entry-bi.seminar {
padding: 60px 0 0 0;
}
section.entry-bi h2, section.entry-bi p {
color: #fff;
}
section.entry-bi h2 {
position: relative;
font-size: 20px;
text-align: center;
padding-top: 80px;
}
section.entry-bi h2:before {
content: "";
position: absolute;
top: 0;
left: 50%;
margin-left: -27px;
display: block;
width: 54px;
height: 51px;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/ico-h2.svg);
}
@media screen and (min-width: 768px) {
section.entry-bi h2 {
font-size: 24px;
}
}
section.entry-bi p {
margin-top: 30px;
font-size: 14px;
line-height: 2em;
padding: 0 20px;
}
@media screen and (min-width: 768px) {
section.entry-bi p {
width: 680px;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
padding: 0;
}
}
section.entry-bi ul {
margin-top: 30px;
}
@media screen and (min-width: 768px) {
section.entry-bi ul {
margin-top: 50px;
}
}
section.entry-bi li {
margin-bottom: 10px;
padding-left: 5px;
padding-right: 5px;
}
@media screen and (min-width: 768px) {
section.entry-bi li {
margin-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
}
}
section.entry-bi li a {
position: relative;
display: block;
vertical-align: middle;
text-align: center;
}
section.entry-bi li h3 {
position: relative;
z-index: 1;
font-weight: normal;
text-align: center;
}
section.entry-bi.example.mesh-black {
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;
}
section.entry-bi.example.mesh-black h2, section.entry-bi.example.mesh-black p {
color: #fff;
}
section.entry-bi.example.mesh-black li a {
background-color: rgba(255, 255, 255, 0.8);
}
section.entry-bi.example h2, section.entry-bi.example p {
color: #000;
}
@media screen and (min-width: 768px) {
section.entry-bi.example li {
display: table;
}
}
section.entry-bi.example li a {
color: #e72a31;
border: 1px solid #e72a31;
padding: 15px 0;
transition: all .2s;
}
@media screen and (min-width: 768px) {
section.entry-bi.example li a {
display: table-cell;
height: 160px;
padding: 0;
}
}
section.entry-bi.example li a span {
font-size: 14px;
font-weight: bold;
display: block;
margin-bottom: 10px;
transition: all .3s;
}
@media screen and (min-width: 768px) {
section.entry-bi.example li a span {
margin-bottom: 20px;
}
}
section.entry-bi.example li 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;
}
section.entry-bi.example li a:after {
content: '';
position: absolute;
width: 0;
height: 1px;
top: 60px;
left: 50%;
transition: all .3s ease-out;
}
@media screen and (min-width: 1080px) {
section.entry-bi.example li a:hover {
color: #fff;
}
section.entry-bi.example li a:hover span {
border-color: #fff;
margin-bottom: 40px;
}
section.entry-bi.example li a:hover:before {
left: 0;
width: 100%;
}
section.entry-bi.example li a:hover:after {
width: 130px;
margin-left: -65px;
background-color: #fff;
}
}
section.entry-bi.example li h3 {
font-size: 16px;
}
@media screen and (min-width: 768px) {
section.entry-bi.example li h3 {
font-size: 18px;
}
}
section.entry-bi.example li br {
display: none;
}
@media screen and (min-width: 768px) {
section.entry-bi.example li br {
display: inline;
}
}
section.entry-bi.product {
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;
}
@media screen and (min-width: 768px) {
section.entry-bi.product p {
text-align: center;
}
}
section.entry-bi.product li a {
transition: all .2s;
}
section.entry-bi.product li a:hover {
opacity: .7;
}
section.entry-bi.service, section.entry-bi.seminar {
background-color: rgba(255, 255, 255, 0.9);
}
section.entry-bi.service h2, section.entry-bi.service p, section.entry-bi.seminar h2, section.entry-bi.seminar p {
color: #000;
}
section.entry-bi.service p, section.entry-bi.seminar p {
color: #000;
text-align: center;
}
section.entry-bi.service ul.row, section.entry-bi.seminar ul.row {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
section.entry-bi.service li a,
section.entry-bi.service li div, section.entry-bi.seminar li a,
section.entry-bi.seminar li div {
height: 100px;
color: #fff;
background-position: 50% 50%;
background-size: cover;
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.8);
}
@media screen and (min-width: 768px) {
section.entry-bi.service li a,
section.entry-bi.service li div, section.entry-bi.seminar li a,
section.entry-bi.seminar li div {
height: 160px;
}
}
section.entry-bi.service li a.implementation,
section.entry-bi.service li div.implementation, section.entry-bi.seminar li a.implementation,
section.entry-bi.seminar li div.implementation {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/bi/service_implementation.jpg);
}
section.entry-bi.service li a.performance,
section.entry-bi.service li div.performance, section.entry-bi.seminar li a.performance,
section.entry-bi.seminar li div.performance {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/bi/service_performance.jpg);
}
section.entry-bi.service li a.group,
section.entry-bi.service li div.group, section.entry-bi.seminar li a.group,
section.entry-bi.seminar li div.group {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/bi/service_group.jpg);
}
section.entry-bi.service li a.planning,
section.entry-bi.service li div.planning, section.entry-bi.seminar li a.planning,
section.entry-bi.seminar li div.planning {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/bi/service_planning.jpg);
}
section.entry-bi.service li a.cloud,
section.entry-bi.service li div.cloud, section.entry-bi.seminar li a.cloud,
section.entry-bi.seminar li div.cloud {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/bi/service_cloud.jpg);
}
section.entry-bi.service li a:before,
section.entry-bi.service li div:before, section.entry-bi.seminar li a:before,
section.entry-bi.seminar li div: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;
}
section.entry-bi.service li a h3,
section.entry-bi.service li div h3, section.entry-bi.seminar li a h3,
section.entry-bi.seminar li div h3 {
font-size: 12px;
}
.page-template-page-en section.entry-bi.service li a h3, .page-template-page-en
section.entry-bi.service li div h3, .page-template-page-en section.entry-bi.seminar li a h3, .page-template-page-en
section.entry-bi.seminar li div h3 {
font-size: 20px;
line-height: 1.3;
}
@media screen and (min-width: 768px) {
section.entry-bi.service li a h3,
section.entry-bi.service li div h3, section.entry-bi.seminar li a h3,
section.entry-bi.seminar li div h3 {
font-size: 18px;
}
}
section.entry-bi.service li a h3:after,
section.entry-bi.service li div h3:after, section.entry-bi.seminar li a h3:after,
section.entry-bi.seminar li div h3:after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -10px;
left: 50%;
transition: all .3s ease-out;
}
section.entry-bi.service li a span,
section.entry-bi.service li div span, section.entry-bi.seminar li a span,
section.entry-bi.seminar li div span {
font-size: 10px;
}
@media screen and (min-width: 360px) {
section.entry-bi.service li a span,
section.entry-bi.service li div span, section.entry-bi.seminar li a span,
section.entry-bi.seminar li div span {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
section.entry-bi.service li a span,
section.entry-bi.service li div span, section.entry-bi.seminar li a span,
section.entry-bi.seminar li div span {
font-size: 16px;
}
}
@media screen and (min-width: 1080px) {
section.entry-bi.service li a span,
section.entry-bi.service li div span, section.entry-bi.seminar li a span,
section.entry-bi.seminar li div span {
font-size: 18px;
}
}
section.entry-bi.service li p, section.entry-bi.seminar li p {
width: 100%;
margin: 10px 0 0;
padding: 0;
text-align: left;
font-size: 13px;
line-height: 2;
}
@media screen and (min-width: 1080px) {
section.entry-bi.service li a:hover:before, section.entry-bi.seminar li a:hover:before {
left: 0;
width: 100%;
}
section.entry-bi.service li a:hover h3:after, section.entry-bi.seminar li a:hover h3:after {
width: 100%;
left: 0;
background-color: #fff;
}
}