body.map-page {
background: url(//nsengco-works.com/wp-content/themes/nssmc/images/maps_bg.jpg) center center no-repeat fixed;
background-size: cover;
}
.header {
position: absolute;
top: 0;
left: 0;
}
.header.map-header {
z-index: 12;
}
.footer button {
cursor: pointer;
background: none;
border: none;
}
.footer button::active {
outline: none;
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: ease-out;
}
@keyframes fadeOut {
30% {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
animation-duration: .6s;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
.map {
padding: 80px 80px 20px;
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%; box-sizing: border-box;
transform-origin: 50%;
transition: transform .6s ease-out;
}
@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){ .map {
max-width: 100%;
max-height: 100%;
}
.japanMap{
height: 100%;
}
#mapContainer{
height: 100%;
}
}
.map a.-disabled {
cursor: default;
pointer-events: none;
}
.map a.-disabled text {
display: none;
}
.map a.-disabled * {
fill: #dcdcdc;
}
.map text {
display: none;
}
.map.-local text {
display: block;
font-size: 4px;
fill: #fff;
font-weight: bold;
pointer-events: none;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.15);
stroke-width: 0;
}
.map .hokkaido text, .map .tohoku text {
font-size: 6px;
}
.map .kanto text {
font-size: 2.5px;
}
.map .chubu text {
font-size: 3.2px;
}
.map .kinki text {
font-size: 2.8px;
}
.map .chugoku text {
font-size: 3px;
}
.map .shikoku text {
font-size: 2.3px;
}
.map .kyushu text {
font-size: 3.6px;
}
.map .okinawa text {
font-size: 1.3px;
}
.map .hokkaido, .map .tohoku, .map .kanto, .map .hokuriku, .map .chubu, .map .kinki, .map .chugoku, .map .shikoku, .map .kyushu, .map .okinawa {
stroke-width: .4px;
stroke: #fff;
}
.map.-local.-hokkaido .hokkaido {
stroke-width: .1px;
stroke: #fff;
}
.map.-local.-tohoku .tohoku {
stroke-width: 1px;
stroke: #fff;
}
.map.-local.-kanto .kanto {
stroke-width: .5px;
stroke: #fff;
}
.map.-local.-hokuriku .hokuriku {
stroke-width: .8px;
stroke: #fff;
}
.map.-local.-chubu .chubu {
stroke-width: .6px;
stroke: #fff;
}
.map.-local.-kinki .kinki {
stroke-width: .6px;
stroke: #fff;
}
.map.-local.-chugoku .chugoku {
stroke-width: .6px;
stroke: #fff;
}
.map.-local.-shikoku .shikoku {
stroke-width: .5px;
stroke: #fff;
}
.map.-local.-kyushu .kyushu {
stroke-width: .7px;
stroke: #fff;
}
.map.-local.-okinawa .okinawa {
stroke-width: .1px;
stroke: #fff;
}
.map a.hokkaido {
fill: #6b72ad;
}
.map a.hokkaido:hover {
fill: #8088cf;
}
.map a.tohoku {
fill: #469ad5;
}
.map a.tohoku:hover {
fill: #54b8ff;
}
.map a.kanto {
fill: #4cbbb4;
}
.map a.kanto:hover {
fill: #5be0d8;
}
.map a.hokuriku {
fill: #37bef0;
}
.map a.hokuriku:hover {
fill: #42e4ff;
}
.map a.chubu {
fill: #9cca54;
}
.map a.chubu:hover {
fill: #bbf264;
}
.map a.kinki {
fill: #eac848;
}
.map a.kinki:hover {
fill: #fff056;
}
.map a.chugoku {
fill: #f4a452;
}
.map a.chugoku:hover {
fill: #ffc462;
}
.map a.shikoku {
fill: #ee7961;
}
.map a.shikoku:hover {
fill: #ff9174;
}
.map a.kyushu {
fill: #ee869a;
}
.map a.kyushu:hover {
fill: #ffa0b8;
}
.map a.okinawa {
fill: #b96aa7;
}
.map a.okinawa:hover {
fill: #de7fc8;
}
.map__area {
-webkit-tap-highlight-color: transparent;
outline: 0;
}
.map__line {
fill: none;
stroke-width: 1px;
stroke: gray;
}
.japanMap {
position: relative;
}
.japanMap__labelList {
list-style: none;
}
.japanMapLabel {
position: absolute;
pointer-events: none;
z-index: 11;
} .japanMapLabel__link {
opacity: 0;
display: block;
position: absolute;
pointer-events: auto;
width: 110px; padding: 5px 0;
line-height: 1;
color: #fff;
text-align: center;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
.js-loaded .japanMapLabel__link {
opacity: 1;
} @media all and (-ms-high-contrast:none){
*::-ms-backdrop, .japanMapLabel__link {
padding-top: 9px;
padding-bottom: 4px;
}
}
.japanMapLabel.-hokkaido .japanMapLabel__link {
top: 48%;
right: 129%;
background: #6b72ad;
}
.japanMapLabel.-tohoku .japanMapLabel__link {
top: 54%;
left: 136%;
background: #469ad5;
}
.japanMapLabel.-hokuriku .japanMapLabel__link {
top: -17.3%;
left: -15%;
background: #37bef0;
}
.japanMapLabel.-kanto .japanMapLabel__link {
top: -15%;
left: 190%;
background: #4cbbb4;
}
.japanMapLabel.-chubu .japanMapLabel__link {
top: 207%;
left: 113%;
background: #9cca54;
}
.japanMapLabel.-kinki .japanMapLabel__link {
top: 167%;
left: 54%;
background: #eac848;
}
.japanMapLabel.-chugoku .japanMapLabel__link {
top: -201%;
left: 12%;
background: #f4a452;
}
.japanMapLabel.-shikoku .japanMapLabel__link {
top: 150%;
left: -5%;
background: #ee7961;
}
.japanMapLabel.-kyushu .japanMapLabel__link {
top: -185.5%;
left: -72%;
background: #ee869a;
}
.japanMapLabel.-okinawa .japanMapLabel__link {
top: 170%;
left: -740%;
background: #b96aa7;
}
a .japanMapLabel__link {
top: -12%;
left: -524%;
background: #b96aa7;
}
.japanMap__worldLink {
position: absolute;
opacity: 0;
} .japanMap__worldLink {
position: absolute;
opacity: 0;
}
.js-loaded .japanMap__worldLink {
opacity: 1;
z-index: 15;
}
.worldMap svg {
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
min-width: 1024px;
min-height: 706px;
}
.worldMap .mapSvg {
transform-origin: 50%;
transition: transform .6s ease-out;
display: none;
}
.worldMap svg a {
transition: fill .1s;
}
.worldMap svg .china {
fill: #db534e;
}
.worldMap svg .china:hover {
fill: #f7726c;
}
.worldMap svg .china text {
fill: #fff;
}
.worldMap svg .taiwan {
fill: #F77F3C;
}
.worldMap svg .taiwan:hover {
fill: #ffc960;
}
.worldMap svg .philippines {
fill: #00a8db;
}
.worldMap svg .philippines:hover {
fill: #36c7f3;
}
.worldMap svg .hongkong:hover .map__area-path {
fill: #ff8c70;
}
.worldMap svg .singapore:hover .map__area-path {
fill: #4cdc99;
}
.worldMap-flags {
position: fixed;
display: none;
width: 100%;
}
.worldMap-flags ul {
list-style-type: none;
padding-left: 0;
}
.worldMap-flags li + li {
margin-top: 10px;
}
.worldMap-flags li a {
color: #000;
font-weight: bold;
text-decoration: none;
transition: opacity .1s;
}
.worldMap-flags li a:hover {
opacity: .7;
}
.worldMap-flags li img {
width: auto; height: calc(100vh * .09);
max-height: 80px;
min-height: 36px;
vertical-align: middle;
margin-right: 10px;
}
.worldMap__local {
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
min-width: 1024px;
min-height: 706px;
position: absolute;
top: 0;
left: 0;
display: none;
}
.worldMap__local-item {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
.worldMap__local-item svg text {
fill: #fff;
font-size: 35px;
}
.worldMap__local-item svg a {
transition: opacity .1s;
}
.worldMap__local-item svg a:hover {
opacity: .7;
}
.worldMap__local-item.-philippines svg text.title-01 {
stroke: #fff;
stroke-width: 10px;
}
.worldMap__local-item.-philippines svg text.title-02 {
stroke: #009ac8;
stroke-width: 3px;
}
body.map-world .footer {
height: auto;
}
body.map-world .footer li:first-child {
top: -50px;
}
body.map-world .footer li:last-child {
top: -50px;
}