:root {
    --smart-border: #a29782;
    --smart-ui-state-active: #2C9CDA;
    --smart-ui-state-selected: #2C9CDA;
    --smart-primary: #2C9CDA;
    --smart-editor-label-padding: 0.75rem;
    --card-height: 472.5;
    --card-width: 840;
    --inner-width: 1170;
    scroll-behavior: auto;
}

@media screen and (max-width: 750px) {
    :root {--smart-editor-height: 2.3125rem;}
}

*, *:before, *:after {margin: 0; padding: 0; box-sizing: border-box}

.text-spDarkBlueGreen {color: #213056;}

/* smart html */
.smart-drop-down-box,
.smart-drop-down-box .smart-drop-down,
.smart-drop-down.smart-drop-down-container,
.smart-drop-down-list,
.smart-element {font-family: inherit; }
.smart-drop-down-box .smart-drop-down-button .smart-drop-down-button-icon {
    padding-right: 15px;
}
.smart-drop-down-box .smart-drop-down-button .smart-drop-down-button-icon:after {font-size: 22px; }
/* //smart html */

/* common */
[v-cloak] {visibility: hidden; }
::placeholder {color: #bbb !important; }

.d-pc-block {display: block !important;}
.d-pc-inline {display: inline !important;}
.d-pc-inline-block {display: inline !important;}
.d-mb-block,
.d-mb-inline,
.d-mb-inline-block {display: none !important; }

.hover {transition: filter .2s ease-in-out;}
.hover:hover {filter: brightness(1.3); }
html {touch-action: manipulation;}
body {font-family: 'Noto Serif JP', serif; background: #EFEFEF; }
.box__inner {max-width: calc(var(--inner-width) * 1px); margin: auto;  }
.hashTagLead {font-size: 1.2rem; color: #514d46}
.hashTag {font-size: 1.5rem; font-weight: bold; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 3px #000, 2px 2px 8px #0008; color: #fff; }

.spBtn {display: inline-flex; }
button.spBtn {border: none; cursor: pointer; -webkit-appearance: none; background: transparent; }
button.spBtn[disabled] {cursor: default; filter: brightness(.5); opacity: .7}

.spBtn--tp2 {filter: drop-shadow(0px 3px 3px #0006); }
/*.spBtn--tp2 img {width: 550px;}*/

.cageTp1 {color: #fff; background: linear-gradient(to right, #885c5c00 0%,#885c5c99 25%,#885c5c99 75%,#885c5c00 100%)}
.form-control,
.form-select {border-color: #a29782; }

.smart-list-item[selected] .smart-overlay, [type=list][opened][focus] .smart-list-item[focus] .smart-overlay, .smart-list-box:focus .smart-list-item[focus][selected] .smart-overlay {background: #D5D4D2}
.smart-list-item[selected] .smart-content, [type=list][opened][focus] .smart-list-item[focus] .smart-content, .smart-list-box:focus .smart-list-item[focus][selected] .smart-content {color: #212529; }
.smart-list-box[selection-mode="checkBox"] .smart-list-item[focus] .smart-input {
    --smart-border: #c5bca5;
}
@media screen and (max-width: 750px) {

    .d-mb-block {display: block !important;}
    .d-mb-inline {display: inline !important;}
    .d-mb-inline-block {display: inline !important;}
    .d-pc-block,
    .d-pc-inline,
    .d-pc-inline-block {display: none !important; }

    .box__inner {width: 100%; }
    .spBtn--tp1 img,
    .spBtn--tp2 img,
    .spBtn--tp3 img {width: auto; }
    .spBtn--tp1 {width: auto;}

    .mb-small {font-size: .8rem;}
    .mb-small2 {font-size: 1rem;}

    .cageTp1 {background: #885c5c99; }
}
/* //common */


body {background: #A6BDAC; }

.allContainer {overflow: hidden; min-width: 992px;}
@media screen and (max-width: 750px) {
    .allContainer {width: 100%; min-width: auto;}
}

/* headArea */
.headArea__inner {position: relative; height: 640px;  }
.headArea__logo {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 280px;
    height: 100px;
    transform: translateX(-50%);
    /*background: #f006*/
}
.headArea__h1 {position: relative; margin: 0; }
.headArea__h1 img.d-pc-block {position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.headArea__nav {position: absolute; top: 540px; width: 100%; display: flex; justify-content: center; }
.headArea__preReservation {
    display: none;
    position: absolute;
    top: 3%;
    left: 4%;
    width: calc(140 / 720 * 100%);
}

.headArea__event {
    position: absolute;
    top: 72px;
    right: 0;
    width: 280px;
}

@media screen and (max-width: 750px) {
    .headArea {height: auto; }
    .headArea__h1 {left: auto;}
    .headArea__logo {left: 2vw; top: 4vw; width: 35vw; height: 10vw; transform: none; }
    .headArea__nav {top: 78%; margin-top: 0; padding: 6% 4% 0; }

    .headArea__event {
        width: calc(364 / 750 * 100%);
        top: 2%;
    }
    .headArea__preReservation {
        display: block;
    }
    .headArea__inner {
        height: auto;
    }
}


/* //headArea */

/* bodyArea */
.bodyArea {position: relative; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; background: url(https://static.ncsoft.jp/events/24/lineage2classic/cardMaker/bg.webp) center top no-repeat #A6BDAC; }
/*.bodyArea__inner {padding-top: 150px; }*/

@media screen and (max-width: 750px) {
    .bodyArea__inner {padding-top: 4%; }
    .bodyArea {background-image: url(https://static.ncsoft.jp/events/24/lineage2classic/cardMaker/bg_mb.webp);}
}

/* //bodyArea */


/* cardMaker */
.cardMaker {/*display: flex; flex-direction: row-reverse; justify-content: space-evenly; */}

.cardMaker__h2 {min-height: 50px; margin-bottom: 1.5rem; margin-left: calc((1100 - var(--inner-width)) / 2 * -1px); margin-right: calc((1100 - var(--inner-width)) / 2 * -1px); background: url(https://static.ncsoft.jp/events/24/lineage2classic/cardMaker/headBg.webp) center no-repeat; color: #fff; display: flex; justify-content: center; align-items: center; font-family: "G2サンセリフ-B", sans-serif; font-size: 1.2rem;}
.cardMaker__inputArea {display: flex; justify-content: space-evenly; position: relative; padding: 0 8px; font-family: 'Noto Sans JP', sans-serif; width: 880px; margin-left: auto; margin-right: auto;  }
.cardMaker__inputArea input,
.cardMaker__inputArea textarea {font-family: inherit !important;} /* TypeSquareが悪さをしているため対応 */

.cardMaker__inputArea h3 {font-family: "G2サンセリフ-B", sans-serif; font-size: 1.5rem; }
.cardMaker__cardArea { margin-top: 32px; padding: 0 8px;}

@media screen and (max-width: 750px) {
    .cardMaker {display: block; }
    .cardMaker__inputArea {margin: auto; width: auto; }
    .cardMaker__h2 {min-height: 74px; margin-left: auto; margin-right: auto; background-image: url(https://static.ncsoft.jp/events/24/lineage2classic/cardMaker/headBg_mb.webp); font-size: .9rem; }
}


/* cardHtml */
.cardHtmlWrapper {margin: auto; width: 840px; }
.cardHtmlWrapper2 {position: relative; width: 100%; height: 0; padding-top: 56.25%;  }
.cardHtml {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left top;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /*background: #111;*/
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    overflow: hidden;

}
.cardHtml__bgImage,
.cardHtml__classImage,
.cardHtml__dataBoxImage {position: absolute; left: 0; top: 0; width: 100%; height: auto; image-rendering: -webkit-optimize-contrast;}

.cardHtml__weaponMain,
.cardHtml__weaponSub {position: absolute; left: calc((18 / var(--card-width)) * 100%); top:  calc((86 / var(--card-height)) * 100%); width: 6.40625%;}
.cardHtml__weaponSub {top: calc((140 / var(--card-height)) * 100%); }

.cardHtml__output {position: absolute; text-overflow: clip; white-space: nowrap; overflow: hidden; height: 1.5em; line-height: 1;
    /* background: #ffffff44;  */
 }
.cardHtml__output2 {position: absolute; text-overflow: clip; overflow: hidden; }

.cardHtml__name {
    /*text-align: center;*/
    /*font-size: 20px;*/
    left: calc((386 / var(--card-width)) * 100%);
    top: calc((27 / var(--card-height)) * 100%);
    width: calc((440 / var(--card-width)) * 100%);
    /*background: #f006;*/
}
.cardHtml__serverName {
    /*font-size: 20px;*/
    left: calc((386 / var(--card-width)) * 100%);
    top: calc((72 / var(--card-height)) * 100%);
    width: calc((440 / var(--card-width)) * 100%);
    /*background: #f006;*/
}
.cardHtml__bloodName {
    /*font-size: 20px;*/
    font-weight: normal;
    left: calc((386 / var(--card-width)) * 100%);
    top: calc((118 / var(--card-height)) * 100%);
    width: calc((440 / var(--card-width)) * 100%);
    /*background: #f006;*/
}
/*.cardHtml__world {*/
/*    color: #000;*/
/*    left: calc((458 / var(--card-width)) * 100%);*/
/*    top: calc((74 / var(--card-height)) * 100%);*/
/*    width: calc((130 / var(--card-width)) * 100%);*/
/*}*/
/*.cardHtml__blood {*/
/*    color: #000;*/
/*    left: calc((682 / var(--card-width)) * 100%);*/
/*    top: calc((74 / var(--card-height)) * 100%);*/
/*    width: calc((150 / var(--card-width)) * 100%);*/
/*}*/

.cardHtml__level {
    color: #fff;
    font-size: 42px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
    text-align: center;
    position: absolute;

    left: calc((8 / var(--card-width)) * 100%);
    top: calc((32 / var(--card-height)) * 100%);
    width: calc((80 / var(--card-width)) * 100%);

    /*background: #f006;*/
}

.cardHtml__mainClass {
    position: absolute;
    left: calc((21 / var(--card-width)) * 100%);
    top: calc((138 / var(--card-height)) * 100%);
    width: calc((54 / var(--card-width)) * 100%);
    text-align: center;
}

.cardHtml__dualClass {
    position: absolute;
    left: calc((21 / var(--card-width)) * 100%);
    top: calc((216 / var(--card-height)) * 100%);
    width: calc((54 / var(--card-width)) * 100%);
    text-align: center;
}




.cardHtml__playStyleCheck {
    position: absolute;
    width: calc((30 / var(--card-width)) * 100%);
}
.cardHtml__playStyleCheck svg {
    display: block;
    width: 100%;
    height: auto;
}

.cardHtml__playStyleCheck--0 {
    left: calc((238 / var(--card-width)) * 100%);
    top: calc((200 / var(--card-height)) * 100%);
}

.cardHtml__playStyleCheck--1 {
    left: calc((358 / var(--card-width)) * 100%);
    top: calc((200 / var(--card-height)) * 100%);
}

.cardHtml__playStyleCheck--2 {
    left: calc((480 / var(--card-width)) * 100%);
    top: calc((200 / var(--card-height)) * 100%);
}

.cardHtml__playStyleCheck--3 {
    left: calc((574 / var(--card-width)) * 100%);
    top: calc((200 / var(--card-height)) * 100%);
}

.cardHtml__activeTime {
    /*font-size: 20px;*/
    /*height: calc((46 / var(--card-height)) * 100%);*/
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((238 / var(--card-height)) * 100%);
    width: calc((484 / var(--card-width)) * 100%);
    /*background: #f006;*/
}

.cardHtml__snsArea {
    position: absolute;
    display: flex;
    /*justify-content: center;*/
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((276 / var(--card-height)) * 100%);
    width: calc((120 / var(--card-width)) * 100%);
    /*text-align: center;*/
}

.cardHtml__snsArea img {
    flex-shrink: 1;
    width: calc(21 / 110 * 100%);
    height: auto;
    margin: 0 2px;
    image-rendering: -webkit-optimize-contrast;
}

.cardHtml__vc {
    /*font-size: 20px;*/
    left: calc((634 / var(--card-width)) * 100%);
    width: calc((190 / var(--card-width)) * 100%);
    top: calc((276 / var(--card-height)) * 100%);
    /*background: #f006;*/
}

.cardHtml__comment {
    position: absolute;
    /*font-size: 20px;*/
    left: calc((240 / var(--card-width)) * 100%);
    top: calc((350 / var(--card-height)) * 100%);
    width: calc((586 / var(--card-width)) * 100%);
    height: calc((98 / var(--card-height)) * 100%);
    overflow: hidden;
    -webkit-line-clamp: 4;
    display: -webkit-box; /* -webkit-box-orient: vertical; */
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.25;
    /*background: #f006;*/
}



.downloadArea__agree {font-family: sans-serif; color: white; }
.downloadArea__agree a {color: white;}
.downloadArea input[type=checkbox] {width: 20px; height: 20px; vertical-align: middle; }
@media screen and (max-width: 750px) {

}


.bannerArea {max-width: 560px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 750px) {
    .bannerArea {max-width: 700px; }
}


/* footer */
.footer { padding: 1rem 0; text-align: center; font-size: 10px; color: white; font-family: sans-serif; background: #181716;  }
.footer__apps {text-align: center; }
.footer__apps a img {width: 136px;}
.footer__sns {margin-bottom: 12px;  }
.footer__sns a img {width: 36px; }
/*.footer__copyright {opacity: .2; }*/

.footer-info {
    display: none;
    margin: 20px auto;
    font-size: 11px;
    line-height: 14px;
    max-width: 620px;
}
.footer-info-jp {
    display: block;
    margin-top: 22px;
    padding: 0 17px;
    text-align: left;
    font-size: 0
}
.footer-info-jp .info-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px;
}

.footer-info-jp .info-item {
    display: flex;
    width: calc(50% - 0.5px);
    gap: 1px;
}
.footer-info-jp .info-title,.footer-info-jp .info-text {
    display: inline-block;
    padding: 10px 15px 9px;
    color: var(--ncui-black068);
    font-size: 12px
}

.footer-info-jp .info-title {
    width: 35%;
    background-color: #313030;
    word-break: break-all
}

.footer-info-jp .info-text {
    width: 65%;
    background-color: #464545;
    color: #fff8;
}

@media screen and (max-width: 750px) {
    .footer-info {
        max-width: 100%;
    }

    .footer {font-size: 16px; padding: 30px .5rem; }
    .footer__apps a img {width: auto;}
    .footer__sns {margin-bottom: 32px; }
    .footer__sns a img {width: auto; }
    .footer__copyright {font-size: 12px; }

}
/* //footer */


/* 血盟 cardHtml--blood */
.cardHtml--blood .cardHtml__name {
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((17 / var(--card-height)) * 100%);
    width: calc((484 / var(--card-width)) * 100%);
}

.cardHtml--blood .cardHtml__masterName {
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((54 / var(--card-height)) * 100%);
    width: calc((484 / var(--card-width)) * 100%);
    /*background: #f006;*/
}
.cardHtml--blood .cardHtml__unionName {
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((90 / var(--card-height)) * 100%);
    width: calc((484 / var(--card-width)) * 100%);
    /*background: #f006;*/
}

.cardHtml--blood .cardHtml__serverName {
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((127 / var(--card-height)) * 100%);
    width: calc((188 / var(--card-width)) * 100%);
    font-weight: normal;
}

.cardHtml--blood .cardHtml__joinInfo {
    left: calc((636 / var(--card-width)) * 100%);
    top: calc((127 / var(--card-height)) * 100%);
    width: calc((188 / var(--card-width)) * 100%);
    font-weight: normal;
    /*background: #f006;*/
}



.cardHtml--blood .cardHtml__level {
    text-align: center;
    position: absolute;
    font-size: 42px;
    left: calc((0 / var(--card-width)) * 100%);
    top: calc((34 / var(--card-height)) * 100%);
    width: calc((100 / var(--card-width)) * 100%);
}

.cardHtml--blood .cardHtml__numMember {
    text-align: center;
    position: absolute;
    font-size: 32px;
    left: calc((0 / var(--card-width)) * 100%);
    top: calc((148 / var(--card-height)) * 100%);
    width: calc((100 / var(--card-width)) * 100%);
    font-family: 'Noto Serif JP', serif;
    font-weight: 600;
    color: #fff;
}

.cardHtml--blood .cardHtml__playStyleCheck svg {
    display: block;
    width: 100%;
    height: auto;
}
.cardHtml--blood .cardHtml__playStyleCheck--0 {
    left: calc((240 / var(--card-width)) * 100%);
    top: calc((190 / var(--card-height)) * 100%);
}
.cardHtml--blood .cardHtml__playStyleCheck--1 {
    left: calc((374 / var(--card-width)) * 100%);
    top: calc((190 / var(--card-height)) * 100%);
}
.cardHtml--blood .cardHtml__playStyleCheck--2 {
    left: calc((487 / var(--card-width)) * 100%);
    top: calc((190 / var(--card-height)) * 100%);
}
.cardHtml--blood .cardHtml__playStyleCheck--3 {
    left: calc((646 / var(--card-width)) * 100%);
    top: calc((190 / var(--card-height)) * 100%);
}
.cardHtml--blood .cardHtml__playStyleCheck--4 {
    left: calc((758 / var(--card-width)) * 100%);
    top: calc((190 / var(--card-height)) * 100%);
}

.cardHtml--blood .cardHtml__raidTime {
    left: calc((372 / var(--card-width)) * 100%);
    top: calc((231 / var(--card-height)) * 100%);
    width: calc((452 / var(--card-width)) * 100%);
    /*background: #f006;*/
}

.cardHtml--blood .cardHtml__activeTime {
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((268 / var(--card-height)) * 100%);
    width: calc((484 / var(--card-width)) * 100%);
    /*background: #f006;*/
}

.cardHtml--blood .cardHtml__snsArea {
    position: absolute;
    display: flex;
    /*justify-content: center;*/
    left: calc((340 / var(--card-width)) * 100%);
    top: calc((306 / var(--card-height)) * 100%);
    width: calc((120 / var(--card-width)) * 100%);
    /*text-align: center;*/
}

.cardHtml--blood .cardHtml__snsArea img {
    flex-shrink: 1;
    /*width: 24px;*/
    width: calc(21 / 110 * 100%);
    height: auto;
    margin: 0 2px;
    image-rendering: -webkit-optimize-contrast;
}
.cardHtml--blood .cardHtml__vc {
    left: calc((636 / var(--card-width)) * 100%);
    top: calc((306 / var(--card-height)) * 100%);
    width: calc((188 / var(--card-width)) * 100%);
}
.cardHtml--blood .cardHtml__comment {
    font-size: 16px;
    left: calc((240 / var(--card-width)) * 100%);
    top: calc((365 / var(--card-height)) * 100%);
    width: calc((586 / var(--card-width)) * 100%);
    height: calc((81 / var(--card-height)) * 100%);
}

.qrLinks {top: 24px; }


.floatingBanner {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 375px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all .2s ease-in-out;
}
.floatingBanner.show {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.floatingBanner img {max-width: 100%;}
.floatingBanner button {position: absolute; top: 28%; right: 0; border: 0; background: transparent; width: 12%; height: 0; padding-top: 14%; overflow: hidden; }

@media screen and (max-width: 750px) {

    .globalNavigationBar {
        position: relative;
        background-color: #000;
    }

    /* モバイルでの表示時のみ */
    html.mbDisp {font-size: 32px; }
    html.mbDisp .cardHtmlWrapper {width: 680px;}
    /*html.mbDisp .cardHtml {font-size: 11.6875px; }*/
    /*html.mbDisp .cardHtml__comment {font-size: 12.2px; }*/
    /*html.mbDisp .cardHtml__level {font-size: 28.15625px; }*/
    /*html.mbDisp .cardHtml__name {font-size: 17px; }*/
    /*html.mbDisp .cardHtml__serverName {font-size: 14px; }*/
    /*html.mbDisp .cardHtml__clanName {font-size: 14px; }*/

    /* html.mbDisp .cardHtml__twitterId {font-size: 15.8px; } */
    /*html.mbDisp .cardHtml__snsArea img {width: 19.42px;}*/
    /*.cardHtml__snsArea {*/
    /*    top: calc((234 / var(--card-height)) * 100%);*/
    /*}*/


    html.mbDisp .cardHtml {font-size: 15.4px; }
    /*
    html.mbDisp {font-size: 32px; }
    html.mbDisp .cardHtmlWrapper {width: 680px;}
    html.mbDisp .cardHtml__comment {font-size: 12.4px; }
    html.mbDisp .cardHtml__level {font-size: 28.15625px; }
    html.mbDisp .cardHtml__name {font-size: 17px; }
    html.mbDisp .cardHtml__twitterId {font-size: 15.8px; }
    */


    html.mbDisp .cardHtml--blood .cardHtml__level {font-size: 27px;}
    /*html.mbDisp .cardHtml--blood .cardHtml__serverName {font-size: 14px;}*/
    /*html.mbDisp .cardHtml--blood .cardHtml__unionName {font-size: 14px;}*/

    .cardHtml--blood .cardHtml__comment {font-size: 12.32px;}

    .floatingBanner {
        width: 750px;
        max-width: 100%;
    }

}


/****************************************************
override
 *****************************************************/
@media screen and (max-width: 750px) {
    .globalNavigationBar {
        position: relative;
        background-color: #000;
    }
}