body { background-color: #000000;
}
@media screen and (min-width: 1080px) {
body::before {
background-image: none;
}
body.home::before {
background-image: none;
}
}
#wrap {
}
#loader-bg {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #000000 url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/loading_bg_a.jpg) center center no-repeat;
background-size: cover;
z-index: 9970;
}
#loader {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: #000000 url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/loading_bg_b.jpg) center center no-repeat;
background-size: cover;
z-index: 9980;
}
#loader p {
display: none;
position: fixed;
top: 50%;
left: 0;
width: 100%;
color: #ffffff;
font-weight: normal;
font-style: italic;
text-align: center;
margin-top: -20px;
font-size: 16px;
z-index: 9990;
}
#loader p img {
display: inline-block;
width: 124px;
padding-bottom: 10px;
}
@media screen and (min-width: 1080px) {
#loader p img {
width: 218px;
padding-bottom: 20px;
}
}
@media screen and (min-width: 360px) {
#loader p {
font-size: 18px;
}
}
@media screen and (min-width: 768px) {
#loader p {
font-size: 28px;
margin-top: -40px;
}
}
video#bgvid {
position: fixed;
right: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: none; }
@media screen and (min-width: 768px) {
video#bgvid {
background-size: cover;
background: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/cover.jpg) no-repeat;
}
}
video#bgvid.fixed {
position: fixed;
right: 0;
top: 0;
}
.mesh {
content: "";
display: block;
position: fixed;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -99;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh400.png);
background-size: 100px 100px;
}
#service {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh400.png);
background-size: 100px 100px;
}
#service .bgWrap {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/top_cover_bg.svg) center bottom no-repeat;
background-size: cover;
padding-bottom: 20px;
}
#service .top_cover li { }
#service .top_cover li a {
display: block;
width: 100%;
height: 360px;
color: #ffffff;
position: relative;
outline: none;
border: none;
}
@media screen and (min-width: 768px) {
#service .top_cover li a {
height: 400px;
}
}
#service .top_cover li a .box {
position: absolute;
bottom: 20px;
left: 0;
padding: 0 10px;
}
.page-template-page-en #service .top_cover li a .box {
line-height: 2;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box {
position: absolute;
bottom: 20px;
left: 0;
padding: 0 60px;
}
}
#service .top_cover li a .box h3 {
font-size: 22px;
font-weight: bold;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
line-height: 1;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box h3 {
font-size: 34px;
}
}
#service .top_cover li a .box h3 strong {
font-size: 60px;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box h3 strong {
font-size: 100px;
}
}
#service .top_cover li a .box h3 strong.jp {
font-size: 42px;
line-height: 1.2;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box h3 strong.jp {
font-size: 84px;
}
}
#service .top_cover li a .box h4 {
font-size: 18px;
line-height: 1.4;
font-weight: bold;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box h4 {
font-size: 30px;
line-height: 1.4;
margin-bottom: 20px;
}
}
#service .top_cover li a .box .btn {
font-size: 14px;
display: inline-block;
margin-top: 10px;
font-style: italic;
line-height: 1;
padding: 10px 20px;
position: relative;
overflow: hidden;
border: 1px rgba(255, 255, 255, 0.3) solid;
background-color: rgba(255, 255, 255, 0.1);
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
#service .top_cover li a .box .btn:before {
content: "";
display: block;
padding: 10px 20px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#service .top_cover li a .box .btn:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
width: 0%;
height: 100%;
z-index: -1;
background-color: #e72a31;
-moz-transition: all 0.1s;
-o-transition: all 0.1s;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
#service .top_cover li a .box .btn:hover {
border: 1px rgba(255, 255, 255, 0) solid;
}
#service .top_cover li a .box .btn:hover:after {
left: 0;
width: 100%;
}
#service .top_cover li a .box p {
max-width: 100%;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 1.8;
font-weight: normal;
}
@media screen and (min-width: 768px) {
#service .top_cover li a .box p {
max-width: 600px;
font-size: 16px;
}
}
#service ul.thumb {
margin: 0 auto;
}
#service ul.thumb li {
position: relative;
height: 74px;
padding: 0;
background-size: cover;
background-position: center top;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/mv_pager_strengths_1705.jpg);
color: rgba(255, 255, 255, 0.5);
text-align: center;
display: block;
outline: none;
border: none;
cursor: pointer;
line-height: 1;
padding-top: 14px;
}
#service ul.thumb li::after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
}
@media screen and (min-width: 768px) {
#service ul.thumb li {
width: 200px;
height: 100px;
margin: 0 10px;
padding-top: 24px;
}
#service ul.thumb li:last-child {
margin-right: 0;
}
}
#service ul.thumb li span {
display: inline-block;
position: relative;
font-size: 11px;
z-index: 2;
}
@media screen and (min-width: 768px) {
#service ul.thumb li span {
font-size: 14px;
}
}
#service ul.thumb li strong {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 20px;
}
@media screen and (min-width: 768px) {
#service ul.thumb li strong {
font-size: 35px;
}
}
#service ul.thumb li strong.jp {
font-weight: bold;
font-size: 22px;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
#service ul.thumb li strong.jp {
font-size: 36px;
}
}
#service ul.thumb li.strengths {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/mv_pager_strengths_1705.jpg);
}
#service ul.thumb li.strengths span.first {
line-height: 1.4;
margin-bottom: 4px;
}
#service ul.thumb li.strengths span.first:first-letter {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 36px;
font-weight: bold;
float: left;
margin: -1px 2px 0 0;
line-height: 1;
}
#service ul.thumb li.strengths span.second {
display: block;
line-height: 0;
}
@media screen and (min-width: 768px) {
#service ul.thumb li.strengths {
padding-top: 24px;
}
#service ul.thumb li.strengths span.first {
margin-bottom: 8px;
}
#service ul.thumb li.strengths span.first:first-letter {
font-size: 44px;
margin: -2px 2px 0 0;
}
}
#service ul.thumb li.bi {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/mv_pager_bi_1705.jpg);
}
#service ul.thumb li.erp {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/mv_pager_erp_1705.jpg);
}
#service ul.thumb li.slick-current {
color: white;
}
#service ul.thumb li.slick-current::after {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/mv_pager_arrow.svg);
background-size: auto 100%;
background-position: center bottom;
background-repeat: no-repeat;
background-color: transparent;
}
#news {
padding-top: 30px;
padding-bottom: 10px;
width: 100%;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh.png);
background-color: rgba(0, 0, 0, 0.9);
color: #ffffff;
}
#news h2 {
text-align: center;
color: #ffffff;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: 0.2rem;
}
#news .slick {
padding-bottom: 40px;
margin: 30px auto 0;
}
@media screen and (min-width: 1080px) {
#news .slick {
width: 980px;
}
}
#news .slick li {
margin: 0 5px;
}
#news .slick li .photo {
display: inline-block;
width: 100%;
height: 0;
padding-top: 38%;
background: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/news_photo_1.png) center center no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
#news .slick li .photo .newtag {
display: none;
position: absolute;
top: 2px;
left: 5px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
color: #ffffff;
z-index: 2;
line-height: 1;
letter-spacing: 0.2rem;
}
#news .slick li .photo:after {
content: "";
display: none;
position: absolute;
top: -28px;
left: -20px;
width: 80px;
height: 40px;
background-color: #e72a31;
z-index: 1;
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
#news .slick li .tag {
display: inline-block;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
background-color: #000000;
line-height: 1;
letter-spacing: 0.1rem;
margin-right: 10px;
padding: 4px 10px;
margin-top: 5px;
border-radius: 1px;
}
#news .slick li .date {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 14px;
color: #ffffff;
margin-top: 5px;
letter-spacing: 0.1em;
}
#news .slick li h3 {
font-size: 16px;
margin-top: 10px;
}
#news .slick li p {
font-size: 14px;
line-height: 1.8;
margin-top: 5px;
}
#news .slick li a {
color: #fff;
display: block;
outline: none;
border: none;
}
#news .slick li.new .photo .newtag, #news .slick li.new .photo:after {
display: block;
}
#news .slick li.blog .tag {
background-color: #009a70;
}
#news .slick li.information .tag {
background-color: #004c9a;
}
#news .slick li.news .tag {
background-color: #ba0072;
}
#news img {
width: auto;
}
.strength {
background-color: rgba(255, 255, 255, 0.5);
}
.strength .inner {
text-align: center;
margin: 0 auto;
padding: 20px 2% 40px;
}
@media screen and (min-width: 768px) {
.strength .inner {
padding: 40px 2% 40px;
}
}
@media screen and (min-width: 1080px) {
.strength .inner {
width: 1020px;
}
}
.strength h2 {
color: #111111;
font-size: 24px;
display: inline-block;
position: relative;
line-height: 1.2;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.strength h2 {
font-size: 28px;
}
}
.strength h2 span {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 40px;
}
@media screen and (min-width: 768px) {
.strength h2 span {
font-size: 46px;
}
}
.strength h2:after {
content: "";
display: block;
text-align: center;
width: 0;
height: 0;
margin: 0 auto;
content: "";
font-size: 0;
border: 140px solid transparent;
border-top-color: #e72a31;
border-top-width: 10px;
border-bottom: 0;
}
@media screen and (min-width: 768px) {
.strength h2:after {
content: "";
font-size: 0;
border: 170px solid transparent;
border-top-color: #e72a31;
border-top-width: 10px;
border-bottom: 0;
}
}
.strength .strength-box {
padding: 10px 10px 10px 12%;
background-color: rgba(255, 255, 255, 0.2);
margin-top: 20px;
border: 2px #ffffff solid;
position: relative;
z-index: 0;
}
.strength .strength-box::after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 91%;
height: 100%;
background-color: white;
z-index: -1;
}
@media screen and (min-width: 768px) {
.strength .strength-box {
padding: 20px 20px 20px 12%;
overflow: hidden;
}
}
.strength .strength-box a {
color: #111111;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.strength .strength-box a:before {
content: "";
display: block;
background-color: #e72a31;
width: 9%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
@media screen and (min-width: 768px) {
.strength .strength-box a:before {
width: 100%;
height: 0%;
top: 50%;
left: 0;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
}
.strength .strength-box a:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: 6px;
margin-top: -6px;
border-top: 5px solid rgba(255, 255, 255, 0);
border-right: 2px solid rgba(255, 255, 255, 0);
border-bottom: 5px solid rgba(255, 255, 255, 0);
border-left: 7px solid #e72a31;
}
@media screen and (min-width: 768px) {
.strength .strength-box a:after {
display: none;
}
}
.strength .strength-box .number {
position: absolute;
top: 50%;
left: 3%;
z-index: 1;
color: #ffffff;
line-height: 1;
margin-top: -12px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-size: 24px;
}
@media screen and (min-width: 768px) {
.strength .strength-box .number {
font-size: 50px;
left: 3%;
margin-left: 0;
margin-top: -25px;
}
}
.strength .strength-box p {
position: relative;
z-index: 2;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
@media screen and (min-width: 768px) {
.strength .strength-box p {
font-size: 18px;
}
}
.strength .strength-box ul {
position: relative;
z-index: 2;
width: auto;
display: block;
margin: 0 auto;
text-align: left;
}
@media screen and (min-width: 768px) {
.strength .strength-box ul {
width: 100%;
}
}
.strength .strength-box ul li {
counter-increment: sample;
font-size: 14px;
line-height: 1.5;
margin: 0 auto;
padding-left: 1em;
text-indent: -1em;
}
@media screen and (min-width: 768px) {
.strength .strength-box ul li {
width: 380px;
}
}
@media screen and (min-width: 768px) {
.strength .strength-box.active a {
color: #ffffff;
}
.strength .strength-box.active a:before {
top: 0;
height: 100%;
}
}
.task {
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
padding: 20px 0 40px;
overflow: hidden;
}
@media screen and (min-width: 768px) {
.task {
padding: 40px 2% 40px;
}
}
.page-template-page-en .task .read, .page-template-page-en .task ul li {
line-height: 2;
}
.task h2 {
text-align: center;
color: #ffffff;
font-size: 24px;
display: inline-block;
margin: 0 auto;
position: relative;
line-height: 2;
margin-bottom: 20px;
display: block;
}
@media screen and (min-width: 768px) {
.task h2 {
font-size: 28px;
}
}
.task h2:after {
content: "";
display: block;
text-align: center;
width: 0;
height: 0;
margin: 0 auto;
content: "";
font-size: 0;
border: 150px solid transparent;
border-top-color: #e72a31;
border-top-width: 10px;
border-bottom: 0;
}
@media screen and (min-width: 768px) {
.task h2:after {
content: "";
font-size: 0;
border: 180px solid transparent;
border-top-color: #e72a31;
border-top-width: 10px;
border-bottom: 0;
}
}
.task h3 {
font-size: 16px;
line-height: 1;
letter-spacing: 0.05em;
text-align: center;
color: white;
margin-top: 0;
}
@media screen and (min-width: 768px) {
.task h3 {
margin-top: 20px;
}
}
.task h3 + p {
margin-top: 5px;
}
.task p {
max-width: 1000px;
font-size: 13px;
line-height: 1.8;
letter-spacing: 0.05em;
text-align: justify;
color: white;
margin: 20px auto;
padding: 0 20px;
}
@media screen and (min-width: 768px) {
.task p {
font-size: 16px;
}
}
.task .read {
max-width: 1000px;
padding: 0 10px;
margin: 20px auto;
text-align: left;
}
.task .container {
margin: 20px auto 0;
}
.task ul {
margin-top: 20px;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
padding: 0 10px;
}
.task ul li {
position: relative;
display: block;
text-align: center;
width: 49%;
margin: 20px 0 0;
}
.page-template-page-en-php .task ul li {
text-align: left;
width: 100%;
}
.page-template-page-en-php .task ul li + li {
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.task ul li {
width: 33%;
}
}
.task ul li p {
text-align: justify;
margin: 10px 0 0;
padding: 0;
}
.task ul li a {
display: block;
position: relative;
top: 0;
left: 0;
z-index: 2;
height: 100%;
padding-bottom: 30px;
box-sizing: border-box;
}
@media screen and (min-width: 768px) {
.task ul li a {
padding-bottom: 40px;
}
}
.task ul li a::after {
position: absolute;
content: "";
width: 0;
height: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #e72a31;
border-radius: 50%;
transition: 0.3s ease;
z-index: -1;
}
.task ul li a:hover::after {
width: 240px;
height: 240px;
}
.task ul li a .btn-task {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
display: block;
margin: 5px auto 0;
width: 120px;
height: 24px;
font-size: 1.2rem;
line-height: 24px;
color: #fff;
border-radius: 50px;
text-decoration: none !important;
background-color: #111;
}
.task ul li a .btn-task:after {
content: ">";
margin-left: 5px;
display: inline-block;
color: #e72a31;
}
@media screen and (min-width: 768px) {
.task ul li a .btn-task {
display: none;
}
}
.task.wt {
background-color: rgba(255, 255, 255, 0.9);
}
.task.wt h2 {
color: #111;
}
.task.wt h3 {
color: #111;
}
.task.wt p {
color: #111;
}
#pickup h2 {
width: 100%;
text-align: center;
color: #ffffff;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
letter-spacing: 0.2rem;
background-color: #e72a31;
padding: 40px 0;
}
#pickup .row-0 {
margin-left: 0px;
margin-right: 0px;
}
#pickup .row-0 > li {
padding-right: 0px;
padding-left: 0px;
display: block;
height: 220px;
background: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/pickup_photo.jpg) center center no-repeat;
background-size: cover;
position: relative;
z-index: 1;
overflow: hidden;
margin-bottom: 0; }
#pickup .row-0 > li:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #e72a31;
z-index: 2;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/home/pickup_triangle.svg);
background-size: contain;
background-position: 0 0;
background-repeat: no-repeat;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
#pickup .row-0 > li:before {
top: -100%;
}
}
@media screen and (min-width: 768px) {
#pickup .row-0 > li:hover:before {
top: 0;
}
}
#pickup .row-0 > li:after {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 1;
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;
-moz-transition: opacity 0.3s;
-o-transition: opacity 0.3s;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
#pickup .row-0 > li p {
font-size: 13px;
line-height: 1.8;
text-align: justify;
}
@media screen and (min-width: 768px) {
#pickup .row-0 > li p {
text-align: left;
font-size: 16px;
}
}
@media screen and (min-width: 768px) {
#pickup .row-0 > li:hover:after {
opacity: 0.5;
background-image: none;
}
}
#pickup .row-0 > li a {
display: block;
width: 100%;
height: 100%;
color: #ffffff;
position: relative;
z-index: 2;
padding: 10px;
}
@media screen and (min-width: 768px) {
#pickup .row-0 > li a {
padding: 20px;
}
}
#pickup .row-0 > li a h3 {
font-family: 'Roboto Condensed', sans-serif;
font-weight: 700;
font-weight: bold;
font-size: 20px;
}
#pickup .row-0 > li a p {
margin-top: 4px;
}
#pickup img {
width: 100%;
}
.fb-page-wrap {
text-align: center;
padding: 20px;
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh.png);
}
@media screen and (min-width: 1080px) {
.fb-page-wrap {
padding: 50px;
}
}
#banner {
background-image: url(//www.granvalley.co.jp/wp/wp-content/themes/granvalley_verx/img/common/mesh400.png);
background-size: 100px 100px;
}
#banner ul {
width: 100%;
box-sizing: border-box;
padding: 20px 20px;
margin: 0px auto;
}
@media screen and (min-width: 1080px) {
#banner ul {
padding: 50px 0;
}
}
#banner ul li a {
display: block;
font-size: 24px;
font-weight: bold;
width: 100%;
margin: 0 auto;
padding: 30px;
text-align: center;
border: 1px #ffffff solid;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
position: relative;
overflow: hidden;
}
@media screen and (min-width: 1080px) {
#banner ul li a {
width: 1020px;
}
}
#banner ul li a:before {
content: "";
display: none;
background-color: #e72a31;
width: 100%;
height: 0%;
position: absolute;
top: 50%;
left: 0;
z-index: -1;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@media screen and (min-width: 768px) {
#banner ul li a:before {
display: block;
}
}
#banner ul li a:hover {
color: #ffffff;
}
#banner ul li a:hover:before {
top: 0;
height: 100%;
}
.top-banner {
background-color: #000;
}
.top-banner a img {
display: block;
width: 100%;
height: auto;
transition: opacity .4s ease-in-out;
}
.top-banner a:hover img {
opacity: .7;
}