/*============================================
メインビジュアル
===========================================*/
#top_main_img {
margin-right: 90px;
position: relative;
height: 100vh;
z-index: 1;
transition: all 0.3s ease;
}

#top_main_bg {
position: absolute;
background: url("../img/top_mv.jpg") no-repeat center center;
background-size: cover;
height: 100%;
width: 100%;
z-index: 0;
}

#top_main_img .overray {
background: -webkit-linear-gradient(top, rgba(28,43,118,1) 0%,rgba(28,43,118,0) 72%,rgba(28,43,118,0) 100%);
background: linear-gradient(to bottom, rgba(28,43,118,1) 0%,rgba(28,43,118,0) 72%,rgba(28,43,118,0) 100%);
position: absolute;
left: 0;
top:0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.7;
}

@media screen and (max-width: 1200px) {
#top_main_img {
height: 90vh;
}
}

@media screen and (max-width: 1000px) {
#top_main_img {
height: 80vh;
}
}

@media screen and (max-width: 767px) {
#top_main_img {
height: 100vh;
margin-right: 0;
}
}

#top_main_bg {
position: relative;
z-index: 0;
}

#top_main_bg img {
width: 100%;
}

#top_main_img h1 {
position: absolute;
top:0.3rem;
left: 0.4rem;
z-index: 3;
max-width: 267px;
font-size: 0.1rem;
}

@media screen and (max-width: 767px) {
#top_main_img h1 {
top:0.26rem;
left: 0.15rem;
}
#top_main_img h1 img {
height: 0.2rem;
}
}

#top_main_copy {
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
max-width: 680px;
z-index: 1;
font-size: 0.1rem;
}

@media screen and (max-width: 767px) {
#top_main_copy {
width: 94%;
}
}

#top_main_copy h3 {
width: 50%;
margin: auto;
max-width: 264px;
padding-top: 1em;
}


/*============================================
01 GROBAL NETWORK
===========================================*/
#gn .flex_box {
flex-direction: row-reverse;
}

#gn .map_box {
width: 45%;
box-sizing: border-box;
padding-left: 0.4rem;
padding-bottom: 0.4rem;
position: relative;
text-align: right;
}

#gn .map_box_inner {
position: relative;
max-width: 640px;
margin-left: auto;
}

/* マップのアイコン */
.top_map_icon span {
width: 10px;
height: 10px;
border-radius: 5px;
background: #101E8E;
display: block;
position: relative;
z-index: 1;
}

.top_map_icon em {
width: 10px;
height: 10px;
border-radius: 5px;
background: #00AFEC;
display: block;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 0;
animation: map_icon_anime 2s ease infinite;
}

@keyframes map_icon_anime {
    0% {
        opacity: 0;
        width: 2px;
		height: 2px;
		border-radius: 5px;
    }
    2% {
        opacity: 0.5;
        width: 8px;
		height: 8px;
		border-radius: 4px;
    }
    50% {
         opacity: 0;
        width: 30px;
		height: 30px;
		border-radius: 30px;
    }
    99% {
        opacity: 0;
        width: 8px;
		height: 8px;
		border-radius: 4px;
    }
}

#top_map_eu {
top: 29%;
left: 4%;
position: absolute;
}

#top_map_ap {
top: 60%;
left: 34.3%;
position: absolute;
}

#top_map_shanghai {
top: 47%;
left: 38.3%;
position: absolute;
}

#top_map_usa01 {
top: 45%;
right: 22.3%;
position: absolute;
}

#top_map_usa02 {
top: 46%;
right: 19%;
position: absolute;
}

#top_map_usa03 {
top: 40%;
right: 11%;
position: absolute;
}

#top_map_usa04 {
top: 34%;
right: 10%;
position: absolute;
}

#top_map_usa05 {
top: 63%;
right: 63%;
position: absolute;
}

#top_map_usa06 {
top: 54%;
right: 66%;
position: absolute;
}

@media screen and (max-width: 767px) {
#gn .map_box {
width: 94%;
box-sizing: border-box;
padding-left: 0;
padding-bottom: 0.4rem;
position: relative;
text-align: right;
margin: auto;
}
}

#gn .map_box img {
width: 110%;
}

@media screen and (max-width: 767px) {
#gn .map_box img {
width: 100%;
margin: auto;
}
}

#gn .text_box {
width: 95%;
box-sizing: border-box;
padding-right: 90px;
position: relative;
padding-top: 0.6rem;
padding-bottom: 0.7rem;
}

@media screen and (max-width: 767px) {
#gn .text_box {
width: 100%;
padding-right:0.26rem;
padding-left: 0.26rem;
padding-bottom: 0.4rem;
}
}

#gn .bg_box {
background: #F2F6F8;
position: absolute;
right: 0;
top:-80px;
z-index: 0;
width: 40%;
}

@media screen and (max-width: 767px) {
#gn .bg_box {
width: 70%;
}
#gn .bg_box .particleground {
height: 70vh;
}
}

.gn_cont02_box {
position: relative;
z-index: 1;
width: 50%;
box-sizing: border-box;
padding: 0.2rem;
}

.gn_cont02_box .pc_btn  {
position: absolute;
top:0;
left: 0;
cursor: pointer;
z-index: 2;
width: 100%;
height: 100%;
}

@media screen and (max-width: 767px) {
.gn_cont02_box .pc_btn  {
display: none;
}
}


.gn_cont02_box .pc_btn a {
display: block;
width: 100%;
height: 100%;
}

.gn_cont02_box .sp_btn {
width: 80%;
margin: auto;
padding: 0.1rem;
padding-bottom: 0;
display:none;
}

@media screen and (min-width: 767px) {
.gn_cont02_box .sp_btn {
display: none !important;
}
}

.gn_cont02_box .sp_btn a {
border: 1px solid #FFF;
padding: 0.1rem;
font-size: 0.13rem;
text-align: center;
display: block;
color: #FFF;
text-decoration: none;
position: relative;
z-index: 2;
}

.gn_cont02_box .sp_btn a::after {
content: "";
width: 0.15rem;
height: 1px;
background: #FFF;
position: absolute;
right: 0;
top:50%;
}

@media screen and (max-width: 767px) {
.gn_cont02_box {
width: 100%;
}
}

.gn_cont02_box .shadow {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
position: absolute;
top:0;
left: 0;
z-index: 0;
display: none;
}


@media screen and (max-width: 767px) {
.gn_cont02_box .shadow {
height: 80%;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
top:inherit;
bottom: 0;
}
}

.gn_cont02_box h4 {
padding-bottom: 0.1rem;
position: relative;
z-index: 1;
font-size: 0.1rem;
}

.gn_cont02_box h4 img {
max-height: 0.36rem;
}

@media screen and (max-width: 767px) {
.gn_cont02_box h4 {
padding-bottom: 0.6rem;
}
.gn_cont02_box h4 img {
max-height: 0.2rem;
}
}

.gn_cont02_box p {
font-size: 0.14rem;
line-height: 0.28rem;
color: #FFF;
position: relative;
z-index: 1;
opacity: 0;
display: block;
transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
.gn_cont02_box p {
font-size: 0.12rem;
line-height: 0.16rem;
display: none;
opacity: 1 !important;
transition: none;
color: #FFF;
z-index: 2;
position: relative;
}
}

@media screen and (max-width: 767px) {
.gn_cont02_box p br {
display: none;
}
}

/* スマホ用アコーディオンボタン */
.acc_btn {
position: absolute;
top:0.46rem;
right: 0.2rem;
width: 0.3rem;
}

.acc_btn img {
display: block;
}

.acc_btn .minus_btn {
display: none;
}

.gn_cont02_box.open .acc_btn .minus_btn {
display: block;
}

.gn_cont02_box.open .acc_btn .plus_btn {
display: none;
}


#gn_cont02_wrapper {
padding-left: 0.4rem;
padding-bottom: 0.4rem;
padding-top: 0.4rem;
max-width: 1640px;
margin-left: auto;
}

#gn_cont02_wrapper .flex_box {
flex-direction: row;
}

@media screen and (max-width: 767px) {
#gn_cont02_wrapper {
padding-left: 0.26rem;
}
}

#gn_cont02-01 {
background: url("../img/gn_cont02-01_bg.jpg") no-repeat center center;
background-size: cover;
}

#gn_cont02-02 {
background: url("../img/gn_cont02-02_bg.jpg") no-repeat center center;
background-size: cover;
}

#gn_cont02-03 {
background: url("../img/gn_cont02-03_bg.jpg") no-repeat center center;
background-size: cover;
}

#gn_cont02-04 {
background: url("../img/gn_cont02-04_bg.jpg") no-repeat center center;
background-size: cover;
}

#gn_cont02-05 {
background: url("../img/gn_cont02-05_bg.jpg") no-repeat center center;
background-size: cover;
}

#gn_cont02-06 {
background: url("../img/gn_cont02-06_bg.jpg") no-repeat center center;
background-size: cover;
}


/*============================================
02 GLOBAL SERVICE
===========================================*/
#gs {
margin-top: 0.8rem;
}

#gs .text_box {
padding-left: 0.4rem;
padding-bottom: 0.8rem;
margin-top: 0.4rem;
padding-right: 0.9rem;
max-width: 1000px;
position: relative;
z-index: 1;
}

@media screen and (max-width: 767px) {
#gs .text_box {
padding-left: 0.26rem;
padding-right: 0.26rem;
}
}

#gs .text_box .link_btn {
max-width: 400px;
}

@media screen and (max-width: 767px) {
#gs .text_box .link_btn {
width: 66%;
}
}

#gs .section_no {
left: 0.4rem;
}

@media screen and (max-width: 767px) {
#gs .section_no {
left: 0.26rem;
}
}

#gs .bg_box {
background: #F2F6F8;
position: absolute;
left: 0;
top:170px;
z-index: 0;
width: 45%;
}

@media screen and (max-width: 767px) {
#gs .bg_box {
top:160px;
width: 70%;
}
}

#gs_cont01_wrapper {
position: relative;
z-index: 1;
padding-right: 0.9rem;
padding-bottom: 1rem;
}

@media screen and (max-width: 767px) {
#gs_cont01_wrapper {
padding-right: 0.26rem;
padding-bottom: 0;
}
}

.gs_cont01_box {
width: 49.7%;
box-sizing: border-box;
position: relative;
}

.gs_cont01_box a {
text-decoration: none;
}

@media screen and (max-width: 767px) {
.gs_cont01_box {
width: 100%;
box-sizing: border-box;
padding-bottom: 0.7rem;
}
}

.gs_cont01_box a .gs_cont01_text {
width: 80%;
margin: auto;
max-width: 400px;
color: #000;
}

@media screen and (max-width: 767px) {
.gs_cont01_box a .gs_cont01_text {
width: 100%;
box-sizing: border-box;
padding-left: 0.26rem;
margin:inherit;
}
}

.gs_cont01_box h4 {
font-size: 0.23rem;
padding-top: 0.4rem;
padding-bottom: 0.2rem;
font-weight: 700;
color: #101E8E;
line-height: 1.4;
}

@media screen and (max-width: 767px) {
.gs_cont01_box h4 {
font-size: 0.18rem;
padding-top: 0.2rem;
padding-bottom: 0.1rem;
}
}

.gs_cont01_box .gs_cont01_photo {
width: 100%;
position: relative;
height: auto;
overflow: hidden;
}

.gs_cont01_box img {
transition: transform 0.6s ease;
display: block;
position: relative;
}

.gs_cont01_box a:hover img {
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}

.gs_cont01_box p {
font-size: 0.14rem;
}

.gs_cont01_box .link_btn {
margin: auto;
}

.gs_cont01_box a:hover .link_btn em {
background: #FFF;
color: #101E8E;
}

.gs_cont01_box a:hover .link_btn em div {
width: 16%;
background: #101E8E;
position: absolute;
}


@media screen and (max-width: 767px) {
.gs_cont01_box .link_btn {
margin:inherit;
width: 66%;
}
}

#particleground02_wrapper {
position: absolute;
z-index: 0;
top:100px;
right: 100px;
width: 40%;
height: 300px;
}

@media screen and (max-width: 767px) {
#particleground02_wrapper {
right: 0;
width: 60%;
}
}