@charset "utf-8";

/* top-index
------------------------------------------------------------*/

#top-index {
height: 144vw;
overflow: hidden;
position: relative;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index {
height: 120vw;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index {
height: 65vw;
max-height: 900px;
max-height: 1200px;
}
}

#top-index:before {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-image: url("../images/index/top_index_bg_sp.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: 1.2s;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index:before {
background-position: bottom center;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index:before {
background-image: url("../images/index/top_index_bg_pc.jpg");
background-position: center center;
}
}

.scroll #top-index:before {
transform:scale(1.1);
}

#top-index .inner-common {
padding-top: 60px;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index .inner-common {
padding-top: 90px;
}
}
@media only screen and (min-width: 1264px) { /* 1264px以上で適用、PCフルサイズ用CSS */
#top-index .inner-common {
max-width: inherit;
margin: 0 6%;
}
}

#top-index h1 {
color: #fff;
margin: 10vw 0 0 0;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#top-index h1 {
margin: 5vw 0 0 0;
}
}
@media only screen and (min-width: 1264px) { /* 1264px以上で適用、PCフルサイズ用CSS */
#top-index h1 {
margin: 7vw 0 0 0;
}
}

#top-index h1 span.en {
display: block;
font-size: 2rem;
font-weight: 700;
line-height: 1.2;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index h1 span.en {
font-size: 3rem;
}
}

#top-index h1 span.jp {
display: block;
font-size: 0.875rem;
margin: 0.5em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index h1 span.jp {
font-size: 1rem;
}
}

#top-index h1 span.jp:before {
content: "";
display: inline-block;
width: 1.5em;
height: 1px;
background: #fff;
vertical-align: middle;
margin: -4px 0.5em 0;
}

#top-index p {
transition-delay: 0.6s; /* for scroll-in */
display: inline-block; /* for scroll-in */
color: #fff;
font-size: 1rem;
margin: 2em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#top-index p {
font-size: 1.125rem;
margin: 2em 0 0 0;
}
}
@media only screen and (max-width: 374px) { /* 374px以下で適用、for mini */
#top-index p {
font-size: 0.9375rem;
margin: 1em 0 0 0;
}
}

/* End top-index */


/* index-business
------------------------------------------------------------*/

@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business .para {
display: flex;
align-items: flex-end;
}
}

@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business h2.common {
margin: 0 4em 0 0;
}
}

#index-business .para p {
color: #00207f;
}

#index-business ul {
margin: 2em 0 0 0;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-business ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business ul {
margin: 4em 0 0 0;
}
}

#index-business ul li {
display: flex;
box-shadow: 0 2px 12px 4px rgba(176,176,176,0.3);
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-business ul li {
width: 48%;
}
#index-business ul li:last-of-type {
margin: 4% 26% 0;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business ul li {
width: 31%;
}
#index-business ul li:last-of-type {
margin: 0;
}
}

@media only screen and (max-width: 767px) { /* 767px以下で適用、スマホ専用CSS */
#index-business ul li + li {
margin-top: 2em;
}
}

#index-business ul li a {
background: #f5faff;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business ul li a {
transition: 0.6s;
}
#index-business ul li a:hover {
opacity: 1;
background: #0080ff;
}
}

#index-business ul li a .img {
overflow: hidden;
background: #000;
}

@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business ul li a .img img {
transition: 0.6s;
}
#index-business ul li a:hover .img img {
transform: scale(1.1);
opacity: 0.6;
}
}

#index-business h3 {
font-weight: 500;
font-size: 0.875rem;
margin: 0.5em 1em 1em;
}
@media only screen and (min-width: 768px) { /* 768px以上で適用、タブレット～PC用CSS */
#index-business h3 {
font-size: 1rem;
}
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-business h3 {
transition: 0.6s;
}
#index-business ul li a:hover h3 {
color: #fff;
}
}

.btn-vm {
color: #fff;
margin: auto 1em 1em auto;
padding: 2px 3.5em 2px 1.5em;
background: #0080ff;
position: relative;
border-radius: 100vh;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.btn-vm {
transition: 0.6s;
}
a:hover .btn-vm {
color: #0080ff;
background: #fff;
}
}

.btn-vm:before {
content: "";
display: block;
position: absolute;
height: 1px;
background: #fff;
top: 50%;
width: 2em;
right: 1em;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.btn-vm:before {
transition: 0.6s;
}
a:hover .btn-vm:before {
background: #0080ff;
}
}

.btn-vm:after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-left: solid 10px #fff;
border-top: solid 6px transparent;
top: 50%;
right: 1em;
margin-top: -6px;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
.btn-vm:after {
transition: 0.6s;
}
a:hover .btn-vm:after {
border-left: solid 10px #0080ff;
}
}

/* End index-business */


/* index-company
------------------------------------------------------------*/

@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-company .inner-common {
position: relative;
min-height: 33vw;
}
}
@media only screen and (min-width: 1264px) { /* 1264px以上で適用、PCフルサイズ用CSS */
#index-company .inner-common {
min-height: 432px;
}
}

#index-company p {
color: #00207f;
}

#index-company .img {
text-align: center;
margin: 2em 0 0 0;
}
@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-company .img {
position: absolute;
margin: 0;
right: 0;
top: 0;
width: 48%;
}
}

@media only screen and (min-width: 1025px) { /* 1025px以上で適用、PC用CSS */
#index-company .btn-wrap {
text-align: left;
}
}

/* End index-company */