@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* Reset */
html,
body {
    width: 100%;
    min-width: 320px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
address,
ul,
ol,
li,
dl,
dt,
dd,
caption,
form,
fieldset,
legend,
input {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}
ul,
ol {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
caption,
th {
    text-align: left;
}
img,
fieldset,
abbr,
acronym {
    border: 0;
}
img {
    -ms-interpolation-mode: bicubic;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'HeirofLightBold';
    src: url('/images/HeirofLightBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Base */
body {
    background-color: #fff;
    font: 12px helvetica, arial, 'Microsoft YaHei', Meiryo;
    color: #333;
}
a {
    color: #333;
    text-decoration: none;
    outline: 0;
    background: url(http://common-cdn-api.joycityglobal.com/angrybirdsdice/homepage/en/btn_bg.png) 0 0 repeat;
}
img {
    vertical-align: top;
}
textarea,
input,
select {
    font: 12px helvetica, arial, 'Microsoft YaHei', Meiryo;
    vertical-align: middle;
}
button {
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    cursor: pointer;
}
button:active,
button:focus {
    outline: none;
}
caption,
legend,
hr {
    display: none;
}
input.txt {
    padding: 3px 5px 0;
    border: 1px solid #b7b7b7;
    font-size: 11px;
}
input.cbox {
    width: 13px;
    height: 13px;
    vertical-align: top;
}
label {
    cursor: pointer;
}
div.clear {
    clear: both;
}
iframe {
    border: none;
}

/* All Device */
* {
    box-sizing: border-box;
}
.fl {
    float: left;
}
.fr {
    float: right;
}

/* ir */
.blind {
    display: block;
    overflow: hidden;
    position: absolute;
    top: -1000em;
    left: 0;
}

/* transition */
.transition_default {
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
}
.transition_fast {
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}
.transition_none {
    transition: all 0s ease;
    -moz-transition: all 0s ease;
    -webkit-transition: all 0s ease;
    -o-transition: all 0s ease;
    -ms-transition: all 0s ease;
}
.transition_slow {
    transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
}
.transition_very_slow {
    transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}

/* aside nav */
aside {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    width: 337px;
    height: 1080px;
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/sidebar.png) 0 0 no-repeat;
}
aside h1 {
    position: absolute;
    top: 75px;
    left: 15px;
}

aside ul.menu {
    position: absolute;
    top: 280px;
    left: 0;
    width: 250px;
}
aside ul.menu li {
    overflow: hidden;
    width: 100%;
    height: 52px;
    cursor: pointer;
}
aside .prebooking {
    width: 250px;
    height: auto;
    margin-bottom: 10px;
    position: absolute;
    left: 0;
    top: 200px;
}
aside .prebooking img {
    margin: 0 auto;
}
aside ul.menu li h2 {
    width: 100%;
    height: 52px;
}

#dwn h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_download.png) 50% 50% no-repeat;
}
aside ul.menu li#dwn.on h2,
aside ul.menu li#dwn:hover h2,
aside ul.menu li#dwn:active h2,
aside ul.menu li#dwn:focus h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_download_on.png) 50% 50% no-repeat;
}

#evn {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event_on_bg.png) 50% 0 no-repeat;
    -webkit-background-size: 196px 0;
    background-size: 196px 0;
}
#evn h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event.png) 50% 50% no-repeat;
}
aside ul.menu li#evn.on h2,
aside ul.menu li#evn:hover h2,
aside ul.menu li#evn:active h2,
aside ul.menu li#evn:focus h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event_on.png) 50% 50% no-repeat;
}

#evn .sub_menu li,
#evn .sub_menu li h3 {
    width: 100%;
    height: 30px;
}
#evn .sub_menu #evn1 h3 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event1.png) 50% 50% no-repeat;
}
#evn .sub_menu #evn1.on h3,
#evn .sub_menu #evn1:hover h3,
#evn .sub_menu #evn1:active h3,
#evn .sub_menu #evn1:focus h3 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event1_on.png) 50% 50% no-repeat;
}
#evn .sub_menu #evn2 h3 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event2.png) 50% 50% no-repeat;
}
#evn .sub_menu #evn2.on h3,
#evn .sub_menu #evn2:hover h3,
#evn .sub_menu #evn2:active h3,
#evn .sub_menu #evn2:focus h3 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_event2_on.png) 50% 50% no-repeat;
}

#gal h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_gallery.png) 50% 50% no-repeat;
}
aside ul.menu li#gal.on h2,
aside ul.menu li#gal:hover h2,
aside ul.menu li#gal:active h2,
aside ul.menu li#gal:focus h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_gallery_on.png) 50% 50% no-repeat;
}

#not h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_notice.png) 50% 50% no-repeat;
}
aside ul.menu li#not.on h2,
aside ul.menu li#not:hover h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_notice_on.png) 50% 50% no-repeat;
}
#com h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_community.png) 50% 50% no-repeat;
}
aside ul.menu li#com.on h2,
aside ul.menu li#com:hover h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_community_on.png) 50% 50% no-repeat;
}
#art h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_art_resource.png) 50% 50% no-repeat;
}
aside ul.menu li#art.on h2,
aside ul.menu li#art:hover h2 {
    background: url(http://common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_art_resource_on.png) 50% 50% no-repeat;
}

aside .lan {
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 250px;
    text-align: center;
    cursor: pointer;
}
aside .lan ul {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 0;
    padding-top: 12px;
}
aside .lan:hover ul {
    top: -160px;
    height: 160px;
}

/* footer */
/* 20200728 수정 */
/* footer */
footer {
    position: relative;
    width: 100%;
    height: 156px;
    background: #0e0d0c;
    padding: 0 50px;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}
footer .logos {
    /* position: absolute;
    top: 50px;
    left: 50px; */
}
footer .logos img {
    margin-right: 30px;
}
footer .copyright {
    /* height: 55px; */
    text-align: left;
    color: #858585;
    margin-left: 30px;
    /* padding-top: 50px; */
}
footer .copyright p {
    font-size: 13px;
    line-height: 1.5em;
    padding-bottom: 20px;
}
footer .copyright a {
    position: relative;
    font-size: 16px;
    padding-right: 16px;
    color: #858585;
}
footer .copyright a:first-child::after {
    display: none;
}
footer .copyright a::after {
    content: '|';
    position: absolute;
    top: 0;
    left: -12px;
}
footer .customer_btn {
    /* position: absolute;
    top: 58px;
    right: 50px; */
}
/* //20200728 수정 */

/* Mobile Device */
.m_img {
    width: 100%;
}
.event_con {
    overflow: hidden;
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
}

.floating_banner {
    position: fixed;
    z-index: 30;
    right: 50px;
    top: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.floating_banner figure {
    margin: 0;
}

.webstore h2 {
    background: url('//common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_webstore_v2.png') 50% 50% no-repeat;
}
/* .webstore h2:hover {
    background: url('//common-cdn-api.joycityglobal.com/tidesofwar/homepage/ja/side_webstore_on.png') 50% 50% no-repeat;
} */

.joylounge h2 {
    background: url('//common-cdn-api.joycityglobal.com/tidesofwar/homepage/side_joylounge_v2.png') 50% 50% no-repeat;
}
/* .joylounge h2:hover {
    background: url('/images/ja/side_joylounge_on.png') 50% 50% no-repeat;
} */

.top_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.purchase_bonus {
    width: 675px;
    margin-bottom: 30px;
    aspect-ratio: 675/178;
    background: url('//common-cdn-api.joycityglobal.com/tidesofwar/homepage/bg-purchase.png') no-repeat center center / contain;
    padding: 30px 30px 18px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.purchase_bonus h3 {
    color: #ebebeb;
    font-family: 'Noto Serif JP', serif;
    font-size: 24px;
    font-weight: 800;
    position: relative;
    padding-left: 70px;
    letter-spacing: -1px;
}

.purchase_bonus h3 span {
    background: -webkit-linear-gradient(#ffe036, #ffc201);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px transparent;
    font-weight: 800;
}

.purchase_bonus h3::before {
    content: '';
    width: 93px;
    aspect-ratio: 93/78;
    display: block;
    position: absolute;
    left: -15px;
    bottom: -10px;
    background: url('//common-cdn-api.joycityglobal.com/tidesofwar/homepage/gem.png') no-repeat center center / contain;
}

.purchase_bonus ul {
    display: flex;
    gap: 10px;

    li {
        width: calc((100% - 20px) / 3);

        img {
            height: 100%;
        }
    }
}