@charset "utf-8";
@import url("default.css");

/*==========================================
body
===========================================*/

body {
    font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
}

body {
    width: 1080px;
    height: 1920px;
    overflow: hidden;
}

body.zhcn {
    font-family: 'SimSun', 'sans-serif';
}

a {
    text-decoration: none;
    color: #000;
}

ul {
    list-style-type: none;
}

/*==========================================
header
===========================================*/
header {
    width: 1080px;
    height: 220px;
    position: relative;
    z-index: 10;
}

header h1 {
    height: 100px;
    line-height: 100px;
    font-size: 45px;
    text-align: center;
    color: #fff;
    background-color: #22b573;
}

header ul {
    display: flex;
    height: 100px;
    padding: 10px 0;
    background-color: #fdffde;
    border-radius: 0 0 50px 50px;
}

header ul li:nth-of-type(1) {
    width: 280px;
    box-sizing: border-box;
    padding-top: 15px;
    padding-left: 50px;
}

header ul li:nth-of-type(2) {
    width: 300px;
    box-sizing: border-box;
    padding-top: 15px;
    border-left: dashed 1px #000;
}

header ul li:nth-of-type(2) p {
    margin-left: 50px;
}

header ul li:nth-of-type(3) {
    width: 500px;
    box-sizing: border-box;
    padding-top: 5px;
}

header #real-time {
    padding-top: 12px;
    font-size: 45px;
}

/*==========================================
footer
===========================================*/
footer {
    width: 1080px;
    background-color: #fdffde;
    padding-top: 40px;
}

/*==========================================
footer ul.nav_main
===========================================*/
footer ul.nav_main {
    display: flex;
    /* width: 980px; */
    width: 730px;
    height: 230px;
    margin: 0 auto;
    box-sizing: border-box;
    border: solid 5px #7dd8ca;
    border-radius: 25px 25px 0 0;
}

footer ul.nav_main li {
    width: 245px;
    height: 220px;
    text-align: center;
    font-size: 24px;
}

footer ul.nav_main li a {
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-top: 25px;
    font-weight: bold;
    background-color: #fff;
}

footer ul.nav_main li:nth-of-type(1) a {
    background-image: url(../img/btn_tourist.png);
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: 60px 75px;
    color: #f7931e;
    border-radius: 20px 0 0 0;
}

footer ul.nav_main li:nth-of-type(2) a {
    background-image: url(../img/btn_gourmet.png);
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: 60px 75px;
    color: #f94848;
    position: relative;
}

footer ul.nav_main li:nth-of-type(3) a {
    background-image: url(../img/btn_event.png);
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: 60px 75px;
    color: #29abe2;
    position: relative;
    border-radius: 0 20px 0 0;
}

footer ul.nav_main li:nth-of-type(4) a {
    background-image: url(../img/btn_traffic.png);
    background-repeat: no-repeat;
    background-size: auto 130px;
    background-position: 55px 75px;
    color: #00a99d;
    position: relative;
    border-radius: 0 20px 0 0;
}

footer ul.nav_main li:nth-of-type(2) a:before,
footer ul.nav_main li:nth-of-type(3) a:before,
footer ul.nav_main li:nth-of-type(4) a:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 25px;
    left: 0;
    width: 2px;
    height: 175px;
    border-radius: 10px;
    background: #999;
}

footer ul.nav_main li.active:nth-of-type(1) a {
    background-image: url(../img/btn_tourist_on.png);
    color: #fff;
    background-color: #f7931e;
    border-radius: 20px 0 0 0;
}

footer ul.nav_main li.active:nth-of-type(2) a {
    background-image: url(../img/btn_gourmet_on.png);
    color: #fff;
    background-color: #f94848;
}

footer ul.nav_main li.active:nth-of-type(3) a {
    background-image: url(../img/btn_event_on.png);
    color: #fff;
    background-color: #29abe2;
}

footer ul.nav_main li.active:nth-of-type(4) a {
    background-image: url(../img/btn_traffic_on.png);
    color: #fff;
    background-color: #00a99d;
    border-radius: 0 20px 0 0;
}

/*==========================================
footer ul.nav_chat
===========================================*/
footer ul.nav_chat {
    display: flex;
    width: 980px;
    height: 80px;
    margin: 0 auto;
}

footer ul.nav_chat li img {
    width: 980px;
    height: 80px;
}

footer ul.nav_chat li {
    position: relative;
}

footer ul.nav_chat li p {
    position: absolute;
    top: 0;
    right: 480px;
    font-size: 24px;
    color: #fff;
    line-height: 80px;
}

/*==========================================
footer ul.nav_sub
===========================================*/
footer ul.nav_sub {
    display: flex;
    width: 980px;
    margin: 25px auto;
}

footer ul.nav_sub li {
    width: 300px;
    height: 100px;
}

footer ul.nav_sub li:nth-of-type(3) {
    width: 380px;
}

footer ul.nav_sub li a {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #fbb03b;
    box-sizing: border-box;
    padding-top: 70px;
    padding-bottom: 10px;
    text-align: center;
    color: #fff;
}

footer ul.nav_sub li:nth-of-type(1) a {
    background-image: url(../img/btn_convenience.png);
    background-repeat: no-repeat;
    background-size: auto 50px;
    background-position: 116px 15px;
    border-radius: 50px 0 0 50px;
}

footer ul.nav_sub li:nth-of-type(2) a {
    background-image: url(../img/btn_busstop.png);
    background-repeat: no-repeat;
    background-size: auto 50px;
    background-position: 110px 16px;
}

footer ul.nav_sub li:nth-of-type(3) a {
    background-image: url(../img/btn_top.png);
    background-repeat: no-repeat;
    background-size: auto 60px;
    background-position: 45px 18px;
    padding-top: 0;
    line-height: 100px;
    font-size: 24px;
    border-radius: 0 50px 50px 0;
    position: relative;
}

footer ul.nav_sub li:nth-of-type(3) a:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 0;
    width: 2px;
    height: 60px;
    border-radius: 10px;
    background: #fff;
}

footer ul.nav_sub li:nth-of-type(3) a img {
    position: absolute;
    top: -20px;
    right: -15px;
    width: 110px;
    height: auto;
}

/*==========================================
footer ul.nav_language
===========================================*/
footer ul.nav_language {
    display: flex;
    background-color: #7dd8ca;
}

footer ul.nav_language li {
    width: 360px;
    height: 100px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    line-height: 100px;
}

footer ul.nav_language li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.jp footer ul.nav_language li:nth-of-type(1) a:before,
.en footer ul.nav_language li:nth-of-type(2) a:before,
.cn footer ul.nav_language li:nth-of-type(3) a:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 100px;
    bottom: 15px;
    width: 160px;
    height: 5px;
    border-radius: 10px;
    background: #ef3f3f;
}