@charset "utf-8";

@media screen and (max-device-width: 480px){
    html {
        font-size: 62.5%;
    }
}

:root {
    --safe-area-top: env(safe-area-inset-top);
}

body {
    font-size: 14px;
    font-size: 1.4rem;
	line-height: 1.4;
    color: #111;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-top: env(safe-area-inset-top);
}

    body.dark-mode {
        color: #f0f0f0;
    }
    
    body.for-mobile {
        font-size: 13px;
        font-size: 1.3rem;
    }
    
    body.cat-straightline-bookmark {
        color: #efefef;
    }
    
    body.cat-memoriastter {
        color: #111;
    }
    
    body.dark-mode.cat-memoriastter {
        color: #fcfcfc;
    }
    
body,
header {
    background: #eff1f5;
    background: -webkit-linear-gradient(to right, #eff1f5, #d3cce3);
    background: linear-gradient(to right, #eff1f5, #d3cce3);
}

    body.dark-mode ,
    .dark-mode header {
        background: #333742;
        background: -webkit-linear-gradient(to right, #333742, #322D41);
        background: linear-gradient(to right, #333742, #322D41);
    }
    
    body.cat-straightline-bookmark,
    .cat-straightline-bookmark header {
        background: #161616;
    }
    
.en,
footer small {
    font-family: 'Montserrat', Meiryo, sans-serif;
}

.cat-memoriastter .en,
.cat-memoriastter footer small,
.rarity.en,
.rarity .en {
    font-family: 'Outfit', Meiryo, sans-serif;
    letter-spacing: 1px;
}

.cat-endless-memoriastter .en,
.cat-endless-memoriastter footer small {
    font-family: 'Silkscreen', Meiryo, sans-serif;
}

h3.en,
footer small {
    letter-spacing: 0.05em;
}

.cat-duelystter h2.en,
.cat-duelystter h3.en {
    letter-spacing: 0.1em;
}

cite,
.logo {
    font-family: 'Urbanist', serif;
}

body,
pre,
.ja {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, Helvetica Neue, Arial, sans-serif;
    /*font-family: Helvetica Neue, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;*/
}

.units .ja {
    font-size: 11px;
}

a,
.anchor,
.no-anchor {
    text-decoration: none;
    color: #657786;
}

    .dark-mode a,
    .dark-mode .anchor,
    .dark-mode .no-anchor {
        color: #8ea6bb;
    }
    
    .cat-memoriastter a,
    .cat-memoriastter .anchor,
    .cat-memoriastter .no-anchor,
    #select-point-items a {
        color: #6C6351;
    }
    
    .sub-panel a,
    .sub-panel .anchor,
    .battle a,
    .battle .anchor,
    .battle-message a,
    .battle.message .anchor,
    .battle-meta a,
    .line-fukidashi a,
    .line-fukidashi .anchor,
    #pet-message a,
    #pet-message .anchor,
    #raid-boss-message a,
    #raid-boss-message .anchor,
    .cat-memoriastter .more span,
    .dark-mode #select-point-items a,
    .cat-memoriastter.dark-mode a,
    .cat-memoriastter.dark-mode .anchor,
    .cat-memoriastter.dark-mode .no-anchor,
    .cat-memoriastter.dark-mode .body .text a,
    #pet-detail a,
    #pet-detail .anchor,
    #favorite-hero a,
    #favorite-hero .anchor {
        color: #d9cba6;
    }
    
    .cat-straightline-bookmark a,
    .cat-straightline-bookmark .anchor,
    .cat-straightline-bookmark .no-anchor {
        color: #efefef;
    }
    
a:hover, 
a:hover i,
.anchor:hover { 
    color: #333 !important;
}

    .dark-mode a:hover, 
    .dark-mode a:hover i,
    .dark-mode .anchor:hover { 
        color: #e0e0e0 !important;
    }
    
    .cat-memoriastter a:hover, 
    .cat-memoriastter a:hover i,
    .cat-memoriastter .anchor:hover,
    #select-point-items a:hover {
        color: #4F483B !important;
    }
    
    .sub-panel a:hover,
    .sub-panel .anchor:hover,
    .battle a:hover,
    .battle .anchor:hover,
    .battle-message a:hover,
    .battle.message .anchor:hover,
    .battle-meta a:hover,
    .line-fukidashi a:hover,
    .line-fukidashi .anchor:hover,
    #pet-message a:hover,
    #pet-message .anchor:hover,
    #raid-boss-message a:hover,
    #raid-boss-message .anchor:hover,
    .cat-memoriastter .more:hover span,
    .dark-mode#select-point-items a:hover,
    .cat-memoriastter.dark-mode a:hover, 
    .cat-memoriastter.dark-mode a:hover i,
    .cat-memoriastter.dark-mode .anchor:hover,
    .cat-memoriastter.dark-mode .body .text a:hover,
    #pet-detail a:hover,
    #pet-detail .anchor:hover,
    #favorite-hero a:hover,
    #favorite-hero .anchor:hover { 
        color: #b1a284 !important;
    }
    .cat-straightline-bookmark a:hover, 
    .cat-straightline-bookmark a:hover i,
    .cat-straightline-bookmark .anchor:hover { 
        color: #e0e0e0 !important;
    }
    
    .for-tablet a:hover {
        text-decoration: none !important;
    }

.anchor {
    cursor: pointer;
}

input[type=text],
input[type=password],
textarea {
    border-color: #ccc;
    border-radius: 5px;
    max-width: none !important;
    width: 100% !important;
    -moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
    color: #000;
}

select {
    color: #000;
}

input[type=submit] {
    padding: 10px;
}

textarea {
    height: 6em;
}

    textarea#post-content {
        height: 3em;
    }
    
    .text textarea.check-length#post-content {
        height: 8em;
    }
    
    textarea#post-title {
        height: 2em;
    }
    
    textarea.disabled {
        color: #999;
    }

    .enable-empty textarea {
        display: none;
    }
    
    .enable-empty .label-enable-empty {
        display: none;
    }
    
    .label-enable-empty-content .note {
        display: none;
    }
    
    .enable-empty .label-enable-empty-content .note {
        display: block;
    }
    
    .label-enable-bonus-increase .note,
    .label-enable-all-bonus-increase {
        display: none !important;
    }
    
    .bonus-increase .label-enable-bonus-increase .note,
    .bonus-increase .label-enable-all-bonus-increase {
        display: block !important;
    }
select#gid,
select#favorite-summon-items,
select#element-item {
    width: auto !important;
    border-style: none;
    padding: 5px;
    box-shadow: none;
    color: #008db7;
    font-weight: bold;
    cursor: pointer;
}

    .cat-memoriastter select#gid,
    .cat-memoriastter select#favorite-summon-items,
    .cat-memoriastter select#element-item {
        border-color: transparent;
        background-color: transparent;
    }
    
    .cat-memoriastter.dark-mode select#gid,
    .cat-memoriastter.dark-mode select#favorite-summon-items,
    .cat-memoriastter.dark-mode select#element-item {
        color: #d9cba6;
    }
    
    .cat-memoriastter.dark-mode select#gid option,
    .cat-memoriastter.dark-mode select#favorite-summon-items option,
    .cat-memoriastter.dark-mode select#element-item option {
        color: #0f0f0f;
        font-weight: normal;
    }
    
select#favorite-summon-items {
    width: 9em !important;
    padding: 0;
}

select#element-item {
    width: 100% !important;
    margin-top: 0;
    padding: 3px;
}

    select#gid + span,
    select#favorite-summon-items + span,
    select#element-item + span {
        font-size: 12px;
    }
    
select#gid,
select#favorite-summon-items,
select#element-item {
    -webkit-appearance: none;
    appearance: none;
}

select#gid::-ms-expand,
select#favorite-summon-items::-ms-expand,
select#element-item::-ms-expand {
    display: none;
}

.dark-mode input[type=text],
.dark-mode input[type=email],
.dark-mode input[type=password],
.dark-mode textarea,
.cat-memoriastter.dark-mode input[type=text],
.cat-memoriastter.dark-mode input[type=email],
.cat-memoriastter.dark-mode input[type=password],
.cat-memoriastter.dark-mode textarea {
    background-color: #191921;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3) inset;
    border-color: #444;
    color: #fff;
}

.cat-memoriastter.dark-mode select,
.dark-mode select {
    background-color: #191921;
    border-color: #444;
    color: #fff;
}

.cat-straightline-bookmark select {
    background-color: #030303;
    border-color: #252525;
    color: #fff;
}

.cat-straightline-bookmark input[type=text],
.cat-straightline-bookmark input[type=email],
.cat-straightline-bookmark input[type=password],
.cat-straightline-bookmark textarea {
    background-color: #030303;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3) inset;
    border-color: #252525;
    color: #fff;
}

::placeholder {
    color: #666;
}

    .dark-mode ::placeholder {
        color: #ccc;
    }

#element-items {
    position: relative;
}

    #element-items span {
        position: absolute;
        right: 0;
        top: 4px;
    }
    
img {
    vertical-align: middle;
}

i {
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    margin-right: 0.3em;
}

    .ajax-loading i {
        overflow: hidden;
        width: 11px;
        height: 11px;
        text-indent: -9999px;
        background-image: url(../image/loader.gif);
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }

    #bulk-heart .ajax-loading i {
        width: 14px;
        height: 10px;
        background-image: url(../image/hiyoko_loader.gif);
    
    }
    
    i.icon-twitter {
        color: #55acee;
    }
    
    i.icon-facebook {
        color: #4862a3;
    }
    
    i.icon-hatebu-btn {
        color: #00a4de;
        font-size: 14px !important;
    }
    
    i.icon-egg {
        margin: 0;
    }
    
    a.notification {
        position: relative;
    }
    
    header i.icon-primitive-dot,
    #global-nav i.icon-primitive-dot {
        position: absolute;
        left: 12px;
        top: 0;
        color: #e2041b;
    }
    
    #global-nav i.icon-primitive-dot {
        left: 50%;
        top: -3px;
        margin: 0 0 0 3px!important
    }
    
    header a:hover i.icon-primitive-dot,
    #global-nav a:hover i.icon-primitive-dot {
        color: #e2041b !important;
    }
    
    
    .form-anchor i.icon-egg,
    .form-section i.icon-egg {
        margin-right: 0.3em;
    }
    
    .dropdown i.icon-expand_more {
        margin-right: 0;
        margin-left: 0.3em;
    }
    
    .dropdown a i.icon-expand_more {
        display: inline-block;
        padding: 5px;
        margin: -5px;
        margin-left: 0.2em;
        border-radius: 50px;
    }
    
    .dropdown a:hover i.icon-expand_more {
        color: #657786 !important;
    }
    
        .dark-mode .dropdown a:hover i.icon-expand_more {
            color: #8ea6bb !important;
        }
        
        .cat-memoriastter .dropdown a:hover i.icon-expand_more {
            color: inherit !important;
        }
        
        .cat-straightline-bookmark .dropdown a:hover i.icon-expand_more {
            color: #efefef !important;
        }
        
    .dropdown a i.icon-expand_more:hover {
        background-color: rgba(128,128,128,0.2);
    }
    
    .dropdown li ul li i {
        margin-right: 0.3em !important;
    }
    
hr {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #eff1f5;
}

    .cat-memoriastter hr::after {
        display: block;
        content: "";
        height: 1px;
    }

.yell {
    display: block;
    font-size: 13px;
    margin-bottom: 5px
}

.cat-memoriastter .note,
.cat-memoriastter .yell {
    color: #777 !important;
}

    .cat-memoriastter.dark-mode .note,
    .cat-memoriastter.dark-mode .yell {
        color: #999 !important;
    }
    
header .container,
#introduction,
#body .container,
#service-list-inner,
.information-inner {
    margin: 0 auto;
    max-width: 728px;
}
#global-nav {
    margin: 0 auto;
    max-width: 768px;
}

    .for-tablet header .container,
    .for-tablet #introduction,
    .for-tablet #global-nav,
    .for-tablet #body .container,
    .for-tablet #service-list-inner,
    .for-tablet .information-inner {
        max-width: auto;
    }

#introduction {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

    #introduction .container {
        padding: 20px 80px;
    }
    
        .for-mobile #introduction .container {
            padding: 10px;
        }
        
    .dark-mode #introduction {
        background-color: #191921;
    }
    
    .cat-straightline-bookmark #introduction {
        background-color: #0e0e0e;
    }
    
    .cat-memoriastter #introduction {
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-image: url(../image/asset/bg_tw.jpg);
        background-color: #eee;
        background-size: cover;
        background-position: 50% 0;
        background-color: transparent;
        box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
    }
    
    .cat-memoriastter.dark-mode #introduction {
        background-color: #333;
        background-image: url(../image/asset/bg_t.jpg);
        box-shadow: 0 1px 1px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    
    .for-tablet #introduction {
        margin-right: 20px;
        margin-left: 20px;
    }
    
    .for-mobile #introduction {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 10px !important;
        padding: 10px;
        border-radius: 0 !important;
        box-shadow: none;
    }
    
    .cat-memoriastter #introduction .eye-catch {
        position: relative;
        overflow: hidden;
        border-radius: 10px 10px 0 0;
        margin: -20px -80px 20px -80px;
        border-bottom: 1px solid #aeaeae;
        box-shadow: 0 1px 0 rgba(255,255,255,0.7);
    }
    
        .for-mobile.cat-memoriastter #introduction .eye-catch {
            border-radius: 0;
            margin: -10px -10px 10px -10px;
        }
        
        .dark-mode.cat-memoriastter #introduction .eye-catch {
            border-color: #161616;
            box-shadow: 0 1px 0 rgba(255,255,255,0.2);
        }
        
    .cat-memoriastter #introduction .eye-catch-inner {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    
    #introduction p {
        margin-bottom: 1em;
    }

    #introduction p:first-of-type {
        opacity: 0.9;
    }
    
    #introduction > h1 {
        font-size: 15px;
        margin: 0;
        padding: 20px;
        border-radius: 10px 10px 0 0;
        text-align: center;
        border-bottom: 1px solid #eff1f5;
    }

        .for-mobile #introduction > h1 {
            margin-bottom: 0;
            padding: 10px;
            border-radius: 0;
        }

    #introduction .container h1 {
        font-size: 15px;
        text-align: center;
        margin-bottom: 10px;
    }

    #introduction p:last-child {
        margin-bottom: 0;
        font-size: 10px;
        opacity: 0.7;
    }

    #introduction .button-outline,
    #introduction .button-outline:hover {
        display: block;
    }
    
#appbar ul,
.form-col {
    box-sizing: border-box;
}

header {
    /*
    position: -webkit-sticky;
    position: sticky;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    top: 0;
    width: 100%;
    z-index: 99999;
    */
}

    header a {
        outline: none !important;
    }
    
    .for-mobile header {
        position: static;
    }
    
    header a,
    header a:hover,
    header a:hover * {
    }
    
    header i {
    }
    
    .icon-add_circle {
        font-size: 23px;
    }
    
    .cat-straightline-bookmark .icon-add_circle {
        color: inherit !important;
    }
    
    #comment_form.cat-handwritter header,
    #comment_form.cat-illustratter header,
    #comment_form.cat-artmemoriastter header {
        position: static;
    }

.duelyst-anchor,
.guestbook-anchor {
    position: relative;
}

.post-now {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
    font-size: 8px;
    background-color: #2e2e3d;
    color: #fff;
    padding: 2px 3px;
    border-radius: 50px;
    line-height: 1;
}

    .dark-mode .post-now {
        background-color: #f0f0f0;
        color: #322F41;
    }
    
header .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.header-left,
.header-center,
.header-right {
    vertical-align: middle;
    white-space: nowrap;
}

    .header-left,
    .header-right {
        flex: 1;
    }
    
    .header-center {
        flex: 3;    
        text-align: center;
    }
    
    .header-right {
        text-align: right;
    }
    
    .header-left > a i,
    .header-left .anchor i,
    .header-right > a i,
    .header-right .anchor i,
    .header-right a .ywaai {
        margin-left: 20px;
        margin-right: 20px;
    }
    
        .for-mobile .header-left > a i,
        .for-mobile .header-left .anchor i,
        .for-mobile .header-right > a i,
        .for-mobile .header-right .anchor,
        .for-mobile .header-right a .ywaai {
            margin-left: 10px;
            margin-right: 10px;
        }
        
    .header-left > a,
    .header-left .anchor,
    .header-right > a,
    .header-right .anchor {
        margin: 5px 0;
        padding: 5px 0;
        color: #2e2e3d;
    }
    
        .header-left > a:hover i,
        .header-left .dropdown li > .anchor:hover i,
        .header-right > a:hover i,
        .header-right .dropdown li > .anchor:hover i {
            color: #2e2e3d !important;
        }

        .dark-mode .header-left > a,
        .dark-mode .header-left .anchor,
        .dark-mode .header-right > a,
        .dark-mode .header-right .anchor {
            color: #f0f0f0 !important;
        }
        
        .cat-memoriastter .header-left > a,
        .cat-memoriastter .header-left .anchor,
        .cat-memoriastter .header-right > a,
        .cat-memoriastter .header-right .anchor,
        .cat-straightline-bookmark .header-left > a,
        .cat-straightline-bookmark .header-left .anchor,
        .cat-straightline-bookmark .header-right > a {
            color: #f0f0f0;
        }
        
        .header-left > a:hover,
        .header-left .anchor:hover,
        .header-right > a:hover,
        .header-right .anchor:hover {
            background-color: rgba(255,255,255,0.5);
            border-radius: 10px;
        }

        .dark-mode .header-left > a:hover,
        .dark-mode .header-left .dropdown li > .anchor:hover,
        .dark-mode .header-right > a:hover,
        .dark-mode .header-right .dropdown li > .anchor:hover {
            background-color: rgba(0,0,0,0.3);
        }

        .cat-memoriastter .header-left > a:hover,
        .cat-memoriastter .header-left .dropdown li > .anchor:hover,
        .cat-memoriastter .header-right > a:hover,
        .cat-memoriastter .header-right .dropdown li > .anchor:hover,
        .cat-straightline-bookmark .header-left > a:hover,
        .cat-straightline-bookmark .header-left .dropdown li > .anchor:hover,
        .cat-straightline-bookmark .header-right > a:hover,
        .cat-straightline-bookmark .header-right .dropdown li > .anchor:hover {
            background-color: rgba(0,0,0,0.3);
        }
        
        .dark-mode .header-left > a:hover i,
        .dark-mode .header-left .dropdown li > .anchor:hover i,
        .dark-mode .header-right > a:hover i,
        .dark-mode .header-right .dropdown li > .anchor:hover i {
            color: #f0f0f0 !important;
        }

        .cat-memoriastter .header-left > a:hover i,
        .cat-memoriastter .header-left .dropdown li > .anchor:hover i,
        .cat-memoriastter .header-right > a:hover i,
        .cat-memoriastter .header-right .dropdown li > .anchor:hover i,
        .cat-straightline-bookmark .header-left > a:hover i,
        .cat-straightline-bookmark .header-left .dropdown li > .anchor:hover i,
        .cat-straightline-bookmark .header-right > a:hover i,
        .cat-straightline-bookmark .header-right .dropdown li > .anchor:hover i {
            color: #f0f0f0 !important;
        }

.logo {
    color: #2e2e3d;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

    .logo img {
        width: auto;
        height: 18px;
        margin-top: -11px;
    }
    
    a:hover .logo img,
    a:active .logo img {
        opacity: 0.8;
    }
    
    .for-mobile .logo img {
        height: 12px;
        margin-top: -6px;
    }
    
    .dark-mode .logo {
        color: #f0f0f0;
    }
    
    .cat-memoriastter .logo,
    .cat-straightline-bookmark .logo {
        color: #fff;
    }
    
    header .logo,
    header .logo.en-name {
        font-size: 30px;
        padding: 23px 0;
    }
    
    .cat-handwritter header .logo,
    .cat-handwritter header .logo.en-name {
        font-size: 24px;
        padding: 26px 0;
    }
    
    .cat-memoriastter header .logo,
    .cat-memoriastter header .logo.en-name {
        padding: 24px 0 21px 0;
    }
    
    .cat-endless-memoriastter header .logo,
    .cat-endless-memoriastter header .logo.en-name {
        font-size: 20px;
        padding: 28px 0;
    }
    
    .cat-duelystter header .logo,
    .cat-duelystter header .logo.en-name {
        font-size: 24px;
        padding: 26px 0;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .cat-straightline-bookmark header .logo,
    .cat-straightline-bookmark header .logo.en-name {
        font-size: 20px;
        padding: 28px 0;
    }
    
    .cat-homepage-search header .logo,
    .cat-homepage-search header .logo.en-name {
        font-size: 24px;
        padding: 26px 0;
    }
    
    .for-tablet header .logo,
    .for-tablet header .logo.en-name {
        font-size: 28px;
        padding: 17px 0;
    }

        .for-tablet.cat-straightline-bookmark header .logo,
        .for-tablet.cat-straightline-bookmark header .logo.en-name {
            font-size: 20px;
            padding: 20px 0;
        }
        
        .for-tablet.cat-endless-memoriastter header .logo,
        .for-tablet.cat-endless-memoriastter header .logo.en-name {
            font-size: 20px;
            padding: 20px 0;
        }
        
        .for-tablet.cat-handwritter header .logo,
        .for-tablet.cat-handwritter header .logo.en-name,
        .for-tablet.cat-duelystter header .logo,
        .for-tablet.cat-duelystter header .logo.en-name {
            font-size: 22px;
            padding: 19px 0;
        }
        
        .for-tablet.cat-homepage-search header .logo,
        .for-tablet.cat-homepage-search header .logo.en-name {
            font-size: 22px;
            padding: 19px 0;
        }
        
    .for-mobile header .logo,
    .for-mobile header .logo.en-name {
        font-size: 22px;
        padding: 10px 0;
    }

        .for-mobile.cat-memoriastter header .logo,
        .for-mobile.cat-memoriastter header .logo.en-name {
            padding: 11px 0 8px 0;
        }
    
        .for-mobile.cat-straightline-bookmark header .logo,
        .for-mobile.cat-straightline-bookmark header .logo.en-name {
            font-size: 15px;
            padding: 13px 0;
        }
        
        .for-mobile.cat-endless-memoriastter header .logo,
        .for-mobile.cat-endless-memoriastter header .logo.en-name {
            font-size: 15px;
            padding: 13px 0;
        }
        
        .for-mobile.cat-handwritter header .logo,
        .for-mobile.cat-handwritter header .logo.en-name,
        .for-mobile.cat-duelystter header .logo,
        .for-mobile.cat-duelystter header .logo.en-name {
            font-size: 18px;
            padding: 12px 0;
        }
        
        .for-mobile.cat-homepage-search header .logo,
        .for-mobile.cat-homepage-search header .logo.en-name {
            font-size: 17px;
            padding: 13px 0;
        }
    
#global-nav-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    z-index: 99999;
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border-style: none;
    border-radius: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}
    
#global-nav {
    margin-bottom: 20px;
    padding: 0;
    background-color: #fff;
    border-radius: 10px;
    text-align: center;
    overflow: hidden;
    border: 1px solid #eff1f5;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 10px rgba(0,0,0,0.1);
    pointer-events: auto;
}

    .for-tablet #global-nav {
        margin: 0 10px 20px 10px;
    }
    
    .for-mobile #global-nav {
        margin: 0 10px 10px 10px;
    }
    
    .dark-mode #global-nav {
        background-color: #191921;
        border-color: #2F2F3A;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 10px rgba(0,0,0,0.9);
    }
    
    .cat-memoriastter #global-nav {
        background-image: url(../image/asset/bg_bw.jpg);
        background-color: #eee;
        background-size: cover;
        background-position: 50% 50%;
        box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
        border-style: none;
    }

    .cat-memoriastter.dark-mode #global-nav {
        background-image: url(../image/asset/bg.jpg);
        background-color: #333;
        box-shadow: 0 1px 1px rgba(0,0,0,0.7);
    }
    
    .for-mobile.cat-memoriastter #global-nav {
        box-shadow: 0 1px 10px rgba(0,0,0,0.1), 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
        border-color: #AEAEAE;
    }

    .for-mobile.cat-memoriastter.dark-mode #global-nav {
        box-shadow: 0 1px 10px rgba(0,0,0,9), 0 1px 1px rgba(0,0,0,0.7);
        border-color: 1px solid #4D4D4D;
    }
    
    
    .cat-straightline-bookmark #global-nav {
        background-color: #0e0e0e;
    }

nav {
    clear: both;
}

    nav li {
        display: inline-block;
    }

    #global-nav nav .icon-panel {
        display: flex;
        justify-content: space-around; 
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    #global-nav nav .icon-panel li {
        flex: 1;
        text-align: center;
    }
    
        footer nav li {
            display: inline-block;
            margin: 0 7px;
        }
    
    nav li:first-of-type {
        margin-left: 0;
    }

    nav li:last-of-type {
        margin-right: 0;
    }
    
    #global-nav nav {
    }
    
    .cat-memoriastter #global-nav .icon-panel {
        background-color: transparent;
    }
    
        .for-mobile #global-nav .icon-panel {
            background-color: #fff;
        }
        
        .dark-mode.for-mobile #global-nav .icon-panel {
            background-color: #191921;
        }
        
        .cat-memoriastter.for-mobile #global-nav .icon-panel {
            background-color: transparent;
        }
        
        .cat-straightline-bookmark.for-mobile #global-nav .icon-panel {
            background-color: #0e0e0e;
        }
        
    #global-nav nav + .form-anchor {
        border-top: 1px solid #eff1f5;
    }
    
        .for-tablet #global-nav nav + .form-anchor {
            border-style: none;
        }
        
    footer nav {
        padding: 0 0 3px 0;
        border-style: none;
    }
    
    nav a,
    nav .anchor,
    nav .no-anchor {
        display: block;
        box-sizing: border-box;
        padding-top: 4px;
    }
    
        #global-nav nav .icon-panel strong {
            font-weight: normal;
            font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, Helvetica Neue, Arial, sans-serif;
        }
        
        #global-nav nav .icon-panel strong {
            display: block;
            font-size: 9px;
            padding-top: 4px;
            padding-bottom: 1px;
            font-weight: normal;
        }
        
        .for-talet #global-nav nav .icon-panel strong {
            padding-top: 0;
            font-size: 9px;
        }
        
        #global-nav nav .icon-panel i {
            font-size: 18px;
        }
    
            .for-tablet #global-nav nav .icon-panel i {
                font-size: 20px;
            }
        
        #global-nav nav .icon-panel i {
            padding-top: 5px;
            margin: 0 10px;
        }
    
            #global-nav nav .icon-panel.icon-only i {
                padding: 10px 0 6px 0;
            }
            
            .for-tablet #global-nav nav .icon-panel.icon-only i {
                padding: 7px 0 4px 0;
            }
            
        #global-nav nav .icon-panel a span,
        #global-nav nav .icon-panel .anchor span,
        #global-nav nav .icon-panel .no-anchor span {
            display: inline-block;
        }
        
        #global-nav nav .icon-panel a span::after,
        #global-nav nav .icon-panel .anchor span::after {
            content: "";
            margin: 0 auto;
            display: block;
            width: auto;
            height: 4px;
            border-radius: 2px;
        }
        
        #global-nav nav .icon-panel a span::after,
        #global-nav nav .icon-panel .anchor span::after,
        #global-nav nav .icon-panel .no-anchor span::after {
            margin-top: 2px;
        }
        
        footer nav a,
        footer small a,
        footer nav .anchor {
            padding: 0;
            color: #2e2e3d;
        }
        
            .dark-mode footer nav a,
            .dark-mode footer small a,
            .dark-mode footer nav .anchor {
                color: #f0f0f0;
            }
            
            .cat-straightline-bookmark footer nav a,
            .cat-straightline-bookmark footer small a,
            .cat-straightline-bookmark footer nav .anchor {
                color: #f0f0f0;
            }
            
        footer nav a,
        footer nav .anchor {
            font-size: 13px;
        }
        
        .for-mobile footer nav a,
        .for-mobile footer nav .anchor {
            font-size: 12px;
        }
        
        .for-mobile nav > ul > li > a,
        .for-mobile nav .anchor {
            text-align: center;
        }
    
        .for-mobile footer nav > ul > li > a {
            padding: 0;
        }
    
        #global-nav nav .icon-panel a.focused span::after,
        #global-nav nav .icon-panel .anchor.focused span::after {
            background: #636fa4;
            background: -webkit-linear-gradient(to right, #e8cbc0, #636fa4);
            background: linear-gradient(to right, #e8cbc0, #636fa4);
        }
        
        #global-nav nav .icon-panel a.focused span,
        #global-nav nav .icon-panel .anchor.focused span {
            color: #2e2e3d;
        }
        
            .dark-mode #global-nav nav .icon-panel a.focused span,
            .dark-mode #global-nav nav .icon-panel .anchor.focused span {
                color: #dfdfea;
            }
            
            .cat-memoriastter #global-nav nav .icon-panel a.focused span,
            .cat-memoriastter #global-nav nav .icon-panel .anchor.focused span {
                color: #4F483B;
            }
            
            .cat-memoriastter.dark-mode #global-nav nav .icon-panel a.focused span,
            .cat-memoriastter.dark-mode #global-nav nav .icon-panel .anchor.focused span,
            .cat-straightline-bookmark #global-nav nav .icon-panel a.focused span,
            .cat-straightline-bookmark #global-nav nav .icon-panel .anchor.focused span {
                color: #fff;
            }
            
    nav .dropdown,
    nav .dropdown li {
        display: block !important;
        width: auto !important;
    }
            
    nav .dropdown ul li {
        text-align: left !important;
    }
    
        nav .dropdown a.focused {
            background-color: transparent;
            font-weight: bold;
            border-style: none;
        }
    
    #global-nav .disable {
        color: #ddd;
    }
    
        .dark-mode #global-nav .disable {
            color: #494954;
        }
        
        .cat-straightline-bookmark #global-nav .disable {
            color: #444;
        }

        .cat-memoriastter #global-nav nav .icon-panel a.focused span::after,
        .cat-memoriastter #global-nav nav .icon-panel .anchor.focused span::after,
        .cat-memoriastter #service-list li a.current,
        .cat-memoriastter .links-list ul.flex li a.focused span::after,
        .cat-memoriastter .links-list ul.flex li .anchor.focused span::after,
        .cat-memoriastter .links-list ul.list li a.focused span::after {
            background: #b1a284 !important;
            background: -webkit-linear-gradient(to bottom, #b1a284, #8D7647) !important;
            background: linear-gradient(to bottom, #b1a284, #8D7647) !important;
        }
#body {
}

    .simple #body,
    .for-tablet #body {
        display: block;
        margin: 0 20px;
        width: auto;
    }
    
    .for-mobile #body {
        margin: 0;
    }
    
#content {
}

aside {
}

    aside .container {
        border-top: 1px solid #eff1f5;
    }
    
#visibility-state {
    color: #999;
    font-size: 12px;
    margin-bottom: 20px;
}

    .for-mobile #visibility-state {
        margin-bottom: 10px;
    }
    
    #visibility-state dl {
        margin: 0 auto;
        max-width: 250px;
    }
    
    #visibility-state dt {
        float: left;
    }
    
    #visibility-state dd {
        margin-left: 120px;
        text-align: left;
    }
    
footer {
    margin-top: 10px;
    padding-bottom: 180px;
    text-align: center;
}

#search-form {
    padding: 0;
}

    #search-form input[type=text] {
        box-shadow: none !important;
    }
    
small {
    display: block;
    margin-top: 10px;
}

.disable-pc {
    display: none !important;
}

.for-tablet .disable-pc {
    display: block !important;
}

.for-tablet .disable-tablet {
    display: none !important;
}

.for-mobile .disable-mobile {
    display: none !important;
}

.separator {
    color: #ccc;
    margin: 0 0.2em;
}

.success {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #ebf6f7;
    border-radius: 5px;
    color: #111 !important;
}

    .dark-mode .success,
    .cat-straightline-bookmark .success {
        background-color: #23939d;
    }
    
    .cat-memoriastter .success {
        border-style: solid;
        border-width: 1px;
        background-image: url(../image/asset/bg_w.jpg);
        background-color: #eee;
        background-size: cover;
        background-position: 50% 50%;
    }
    
    .cat-memoriastter.dark-mode .success {
        color: #fff !important;
        background-image: url(../image/asset/bg.jpg);
        background-color: #333;
    }
    
    .dark-mode .success a,
    .cat-straightline-bookmark .success a {
        color: #fff;
    }
    
    .dark-mode .success .close,
    .cat-straightline-bookmark .success .close {
        color: #fff !important;
    }
    
    .for-mobile .success {
        margin-bottom: 10px;
    }
    
    .success:last-child {
        margin-bottom: 0;
    }
    
    .success .overflow-hidden {
        padding-left: 10px;
    }
    
    .success .overflow-hidden .rarity:first-child {
        margin-bottom: 3px;
    }
    
.error {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #faf1f1;
    border-radius: 5px;
    color: #111 !important;
}

    .dark-mode .error,
    .cat-straightline-bookmark .error {
        background-color: #ec1f1f;
        color: #fff !important;
    }
    
    .cat-memoriastter .error {
        color: 111 !important;
        border-style: solid;
        border-width: 1px;
        background-image: url(../image/asset/bg_w.jpg);
        background-color: #eee;
        background-size: cover;
        background-position: 50% 50%;
    }
    
    .cat-memoriastter.dark-mode .error {
        color: #fff !important;
        background-image: url(../image/asset/bg.jpg);
        background-color: #333;
    }
    
    .for-mobile .error {
        margin-bottom: 10px;
    }
    
    .error:last-child {
        margin-bottom: 0;
    }
    
    .links-list + .error {
        margin-top: 20px;
    }
    
        .for-mobile .links-list + .error {
            margin-top: 10px;
        }
        
.disable {
    color: #999;
    font-weight: normal !important;
}

    .cat-memoriastter .disable {
        color: #777;
    }

    .cat-memoriastter.dark-mode .disable {
        color: #999;
    }
    
.style {
}

    .style h1,
    .style h2,
    .style h3,
    .style h4,
    .style h5,
    .style h6,
    .style p,
    .style blockquote,
    .style pre,
    .style ul,
    .style ol {
        margin: 1em 0;
    }
    
    .style h1 {
        font-size: 114.3%;
    }
    
    .style h2 {
        font-size: 107.2%;
    }
    
    .style h4 {
        color: #555;
    }
    
    .style h5 {
        color: #555;
        font-weight: normal;
        font-style: italic;
    }
    
    .style h6 {
        color: #888;
        font-weight: normal;
    }
    
    /*
    .style h1 + p,
    .style h2 + p,
    .style h3 + p,
    .style h4 + p,
    .style h5 + p,
    .style h6 + p {
        margin-top: -1em !important;
    }
    */
    
    .style li {
        margin: 0.2em 1em 0.2em 2em;
    }
    
    .style ul li {
        list-style-type: disc !important;
    }
    
    .style ol li {
        list-style-type: decimal !important;
    }

    .style blockquote {
        margin-left: 20px;
        margin-right: 20px;
        padding-left: 20px;
        border-left: 3px solid #e8e8e8;
        color: #666;
    }
    
        .for-mobile .style blockquote {
            margin-left: 10px;
            margin-right: 10px;
            padding-left: 10px;
        }
        
    .style pre {
        overflow: auto;
        background-color: #fafafa;
        padding: 20px;
    }
        
        .for-mobile .style pre {
            padding: 10px;
        }
        
    .style code {
        font-family: Consolas, Monaco, "Courier New", Courier, monospace !important;
        background-color: #fafafa;
        border-radius: 3px;
        padding: 3px 6px;
        font-size: 13px;
    }
        
    .style pre code {
        padding: 0;
    }
        
    .style *:first-child {
        margin-top: 0 !important;
    }
    
    .style *:last-child {
        margin-bottom: 0 !important;
    }

.result {
}

    .for-mobile .result {
        text-align: center;
    }
    
    .result p:last-of-type {
        margin: 0 -5px;
    }
    
    .result p:last-of-type .button {
        margin: 0 5px;
    }

p.notice {
    text-align: left;
    padding: 10px;
    background-color: #f8f4e6;
    color: inherit !important;
    border-radius: 5px;
}

.page-nav-end,
.page-nav,
.so-far {
    margin: 20px -20px 0 -20px;
    padding-top: 20px;
    text-align: center;
    border-top: 1px solid #eff1f5;
}

    .cat-memoriastter .page-nav-end,
    .cat-memoriastter .page-nav,
    .so-far {
        margin: 0 -20px;
        padding: 20px 0;
        border-bottom-style: solid;
        border-width: 1px;
        background-image: url(../image/asset/bg_w.jpg);
        background-size: cover;
        background-position: 0 100%;
    }

    .so-far {
        margin-bottom: 0;
        border-bottom-style: none;
        font-size: 11px;
        padding: 10px 0 !important;
        color: #666;
        background-image: url(../image/asset/bg_bw.jpg);
        box-shadow: inset 0 1px 0 rgba(0,0,0,0.3) !important;
    }
    
    .so-far a {
        font-size: 12px;
    }
    
    .cat-memoriastter.dark-mode .page-nav-end,
    .cat-memoriastter.dark-mode .page-nav,
    .dark-mode .so-far {
        background-image: url(../image/asset/bg.jpg);
    }
    
    .dark-mode .so-far {
        color: #999;
        background-image: url(../image/asset/bg_b.jpg);
    }
    
    .for-mobile .page-nav-end,
    .for-mobile .page-nav,
    .for-mobile .so-far {
        margin: 10px -10px 0 -10px;
        padding: 10px 0 0 0;
    }
    
        .for-mobile .so-far {
            margin-bottom: -10px;
        }
        
        .for-mobile .so-far:first-child {
            margin-top: 0;
        }
        
    .for-mobile.cat-memoriastter .page-nav-end,
    .for-mobile.cat-memoriastter .page-nav {
        padding-bottom: 10px;
    }
    
    .page-nav .button-outline {
        margin: 0 10px;
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    .for-mobile .page-nav .button-outline {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .page-nav .icon-arrow_forward {
        margin: 0 0 0 0.3em;
    }

    .form-anchor + .page-nav-end {
        margin-top: 0 !important;
    }
    
    nav + .page-nav-end,
    ul + .page-nav-end,
    .links-list + .page-nav-end {
        margin-top: 0 !important;
        border-top-style: none;
    }
    
    .page-nav-end a {
        color: #008db7;
    }
    
.reload {
    font-size: 13px;
}

section {
    margin: 20px 0;
}

    #content section {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    }
    
        .dark-mode #content section {
            background-color: #191921;
        }
        
        .cat-memoriastter #content section {
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-image: url(../image/asset/bg_tw.jpg);
            background-color: #eee;
            background-size: cover;
            background-position: 50% 0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
            position: relative;
        }
        
        .cat-artmemoriastter#comment_form #content section {
            position: static;
        }
        
        .cat-memoriastter.dark-mode #content section {
            background-color: #333;
            background-image: url(../image/asset/bg_t.jpg);
            box-shadow: 0 1px 1px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.1);
        }
        
        .for-tablet.cat-memoriastter #content section {
            background-attachment: scroll;
        }
        
        /*
        .for-tablet.cat-memoriastter #content section {
            background-image: none;
            background-color: transparent;
            border-top-style: solid;
            border-top-width: 1px;
        }
        
        .for-tablet.cat-memoriastter #content section::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-image: url(../image/asset/bg_tw.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50% 0;
            z-index: -1;
        }
                
        .for-tablet.cat-memoriastter.dark-mode #content section::before {
            background-image: url(../image/asset/bg_t.jpg);
        }
        */
        
        .cat-straightline-bookmark #content section {
            background-color: #0e0e0e;
        }
        
        #content section:first-child,
        footer section:first-child {
            margin-top: 0;
        }
        
        .for-mobile #content section {
            margin: 10px 0;
            padding: 10px;
            border-radius: 0;
        }
        
        .for-mobile #content section:first-child {
            margin-top: 0;
        }
        
    #content section:last-child {
        margin-bottom: 20px;
    }
    
        .for-mobile #content section:last-child {
            margin-bottom: 0;
        }
        
    footer section {
        background-color: rgba(255,255,255,0.8);
        padding: 20px;
        border-radius: 10px;
    }
    
        .dark-mode footer section,
        .cat-straightline-bookmark footer section {
            background-color: rgba(0,0,0,0.3);
        }
        
.ad-section {
    margin: 20px 0;
}
    
    section .ad-section {
        margin: -1px -20px;
        padding: 20px;
        border-top: 1px solid #eff1f5;
        border-bottom: 1px solid #eff1f5;
    }
    
    .for-mobile .ad-section {
        margin: -1px -10px;
        padding: 0;
    }
    
        .for-mobile .so-far + .ad-section {
            margin-top: 10px;
        }
        
        .for-mobile section + .ad-section {
            margin: 0;
        }
        
        .for-mobile .container > #check-ad .ad-section,
        .for-mobile .container > .ad-section {
            margin: 0 0 10px 0 !important;
        }
        
    footer .ad-section {
        margin: 20px 0;
        border-style: none;
    }
    
        .for-mobile footer .ad-section {
            margin: 10px 0;
        }
    
    .ad-section div {
        max-width: 728px;
    }
    
    footer .ad-section {
        margin: 20px auto;
        max-width: 560px;
        border-style: none;
        
    }
    
    .for-mobile footer .ad-section {
        margin: 10px auto;
        max-width: auto;
        
    }

#tweet-button i {
    display: none;
}

#footer-tweet-button {
    max-width: 708px;
    width: 100%;
    text-align: right;
    margin: 0 auto 10px auto;
    pointer-events: none;
}

    #footer-tweet-button i {
        display: none;
    }
    
    #footer-tweet-button i {
        display: inline;
        margin: 0;
        font-size: 24px;
    }
    
    #footer-tweet-button i.icon-comment {
        font-size: 18px;
    }
    
    #footer-tweet-button .ajax-loading i {
        overflow: visible;
        width: auto;
        height: auto;
        text-indent: 0;
        background-image: none;
    }
    
    /*
    .for-tablet #tweet-button,
    .for-tablet .dark-mode #tweet-button {
        left: auto;
        transform: none;
        right: 0;
        margin: 0;
    }
    */
    
    #footer-tweet-button .button-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        padding: 0 !important;
        margin: 0 10px;
        border-radius: 50%;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
        border: 3px solid #fff;
        pointer-events: auto;
    }
    
    .dark-mode #footer-tweet-button .button-outline {
        border-color: rgba(0,0,0,0.5);
    }
    
    #footer-tweet-button .button-outline.ajax-loading {
        opacity: 0.6;
        pointer-events: none;
        position: relative;
        border-color: rgba(255,255,255,0.3);
    }
    .dark-mode #footer-tweet-button .button-outline.ajax-loading {
        border-color: rgba(0,0,0,0.2);
    }
    
    #footer-tweet-button .button-outline:hover {
        transform: scale(1.05);
        box-shadow: 1px 1px 15px rgba(0,0,0,0.2);
    }
    
    #footer-tweet-button .button-outline:active {
        transform: scale(0.95);
    }
    
    .cat-memoriastter #footer-tweet-button .button-outline {
        box-shadow: 1px 1px 10px rgba(0,0,0,0.2), inset 1px 1px 0 rgba(255,255,255,0.2);
        border: 1px solid #262626;
    }
    
    .for-mobile #footer-tweet-button.scrolling-down .button-outline {
        opacity: 0.5; /* 下にスクロール中は半透明 */
    }
    
    .for-mobile #footer-tweet-button.scrolling-up .button-outline {
        opacity: 1; /* 上にスクロール中は不透明 */
    }    
        
    .for-mobile #global-nav-wrapper.scrolling-down {
        opacity: 0.5; /* 下にスクロール中は半透明 */
    }
    
    .for-mobile #global-nav-wrapper.scrolling-up {
        opacity: 1; /* 上にスクロール中は不透明 */
    }    
        
h1.title {
    font-size: 20px;
    /*line-height: 1.3;*/
}

    .for-mobile h1.title {
        font-size: 18px;
        /*line-height: 1.3;*/
    }
    
h2.title {
    margin-bottom: 10px;
}

    .category-header-left h2.title {
        font-size: 18px;
        margin-bottom: 0;
    }
    
    .for-mobile .category-header-left h2.title {
        font-size: 15px;
    }
    
footer h3.title {
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 10px;
}

.serno {
}

.header {
}

    .comment-section .header {
        font-size: 13px;
        margin-bottom: 3px;
    }
    
    .category-section .header a {
        font-size: 15px;
        line-height: 1.5;
    }
    
    .for-mobile .category-section .header a {
        font-size: 14px;
    }
    
    .category-section .header.disable a {
        font-size: 100%;
    }
    
    footer .category-section .header a {
        font-size: 13px;
        line-height: 1.4;
    }
    
    .category-section h2.header .description {
        font-size: 13px;
        font-weight: normal;
        color: #777;
    }
    
        .dark-mode .category-section h2.header .description {
            color: #999;
        }
        
    .category-section h2.header .date {
        font-size: 12px;
        font-weight: normal;
        margin-left: 10px;
    }
    
    .category-section h2.header .date i {
        font-size: 13px;
    }
    
.body {
    font-size: 15px;
    line-height: 1.5;
}

    #c section > .comments-list:first-of-type .body {
        font-size: 18px;
    }
    
    .for-mobile#c section > .comments-list:first-of-type .body,
    .for-mobile .body {
        font-size: 14px;
    }
    
    .body .group-name {
        display: block;
        font-size: 13px;
    }
    
    .body .text {
        display: block;
    }
    
    .body .body-hidden-toggle {
        display: block;
    }
    
    .body .body-hidden-toggle .anchor {
        font-size: 13px;
    }
    
    .body .body-hidden-toggle .anchor,
    .body .text.anchor,
    .body .text a {
        color: #008db7;
    }
    
    .body .description {
        display: block;
        line-height: normal;
        font-size: 13px;
        color: #777;
    }
    
        .dark-mode .body .description {
            color: #999;
        }
        
    .body.closed .body-hidden-toggle .open-message,
    .body .body-hidden-toggle .close-message {
        display: none;
    }
    
    .body .body-hidden-toggle .open-message,
    .body.closed .body-hidden-toggle .close-message {
        display: inline;
    }
    
    .body .hidden-attention {
        font-size: 13px;
        color: #666;
        margin-bottom: 10px;
        padding: 5px 10px;
        background-color: #eff1f5;
        border-radius: 10px;
    }
    
        .dark-mode .body .hidden-attention {
            color: #999;
            background-color: #24242e;
        }
        
        .cat-memoriastter .body .hidden-attention {
            color: #333;
            background-color: rgba(0,0,0,0.05);
            border: 1px solid #aeaeae;
        }
        
        .cat-memoriastter.dark-mode .body .hidden-attention {
            color: #f0f0f0;
            background-color: rgba(0,0,0,0.2);
            border: 1px solid #161616;
        }
        
        .cat-straightline-bookmark .body .hidden-attention {
            color: #999;
            background-color: #0e0e0e;
        }
        
    .body .hidden-attention img {
        height: 16px;
        width: auto;
        float: left;
        margin-right: 10px;
    }
    
    .body .hidden-attention a {
        color: #008db7;
    }
    
    .body .text.abbr {
        position: relative;
        overflow: hidden;
        height: 180px;
    }
    
    .body .text.note {
        margin-top: 5px;
        margin-bottom: -5px;
        font-size: 13px;
    }
    
    .body .text.abbr.abbr.opened {
        position: static;
        overflow: visible;
        height: auto;
    }

    .body.closed .reply-to,
    .body.closed .text,
    .body.closed .image-container {
        display: none;
    }
    
.footer {
    display: block;
}

.auto-delete {
    color: #ff0707;
    background-color: #ffefef;
    padding: 0 3px;
    margin-right: 0.5em;
    border-radius: 3px;
}

    .dark-mode .auto-delete {
        color: #ffefef;
        background-color: #ff0707;
    }
    
.reply-to {
    display: block;
    color: #999;
}

    .cat-memoriastter .reply-to {
        color: #777;
    }
    
    .cat-memoriastter.dark-mode .reply-to {
        color: #999;
    }
    
.reply-to a,
.rank,
.icon-owner,
.group-owner {
    color: #008db7;
}

    .rank {
        float: left;
        font-weight: normal;
        margin-right: 0.5em;
    }
    
    .rank + div {
        margin-left: 3em;
    }
    
    i.icon-owner {
        margin-left: 0.3em;
        margin-right: 0;
    }

    .cat-duelystter .group-owner {
        color: #F26D7D;
        margin: 0 !important;
    }

.themes-cloud {
    margin: 6px 0 0 0;
    font-size: 12px;
    color: #999;
}

    .themes-cloud .anchor {
        display: inline-block;
        background-color: #ECF3F9;
        border-radius: 5px;
        margin: 3px 0;
        padding: 2px 5px;
    }
    
    .dark-mode .themes-cloud .anchor {
        background-color: #343442;
    }
    
.theme {
    font-weight: bold;
    font-size: 14px;
}

    .theme a {
        color: #659358 !important;
        text-decoration: underline;
    }
    
.now,
.user-id,
.date,
.date a,
.follower {
    color: #999;
}

    .user-id.reference-source i {
        margin: 0 0.3em 0 0 !important;
        color: #f7ff00 !important;
    }
    
    .cat-memoriastter .now,
    .cat-memoriastter .user-id,
    .cat-memoriastter .date,
    .cat-memoriastter .date a,
    .cat-memoriastter .follower {
        color: #777;
    }
    
    .cat-memoriastter.dark-mode .now,
    .cat-memoriastter.dark-mode .user-id,
    .cat-memoriastter.dark-mode .date,
    .cat-memoriastter.dark-mode .date a,
    .cat-memoriastter.dark-mode .follower {
        color: #999;
    }
    
    .now {
        display: block;
        text-align: right;
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .now i {
        color: #31a24c;
    }

.story {
    font-size: 12px;
}

.meta,
.point {
    color: #666;
}

    .cat-memoriastter.dark-mode .meta,
    .cat-memoriastter.dark-mode .point {
        color: #999;
    }
    
    h3.title .date {
        margin-left: 0.5em;
    }
    
    .header .meta > span,
    #category-header .meta > span {
        margin-right: 1em;
    }
    
    #category-header .date,
    #category-header .follower {
        font-size: 13px;
    }
    
        #category-header .date i {
            font-size: 14px;
        }
        
    .footer .meta > span {
        margin-right: 4em;
    }
    
    .library-section .footer .meta {
        font-size: 12px;
    }
    
        .library-section .footer .meta > span {
            margin-right: 0;
        }
        
        .for-mobile .library-section .footer .meta .total-summon-count .note {
            display: block;
        }
        
    .footer .meta span.good-count i.icon-heart,
    .footer .meta span.favorite-count,
    .footer .meta span.reply-count,
    .footer .meta a.reply-count .disable,
    .footer .meta span.good-count.disable {
        color: #e8e8e8;
    }

    .dark-mode .footer .meta span.good-count i.icon-heart,
    .dark-mode .footer .meta span.favorite-count,
    .dark-mode .footer .meta span.reply-count,
    .dark-mode .footer .meta a.reply-count .disable,
    .dark-mode .footer .meta span.good-count.disable {
        color: #333b43;
    }
    
    .cat-memoriastter .header .user-id,
    .cat-memoriastter .header .date {
        display: inline-block;
        padding: 2px 0;
        font-size: 11px;
    }
    
    .cat-duelystter .header .meta,
    .cat-duelystter .header .user-id,
    .cat-duelystter .header .date {
        display: inline;
        padding: 0;
        font-size: 12px;
    }
    
    .cat-memoriastter .footer .meta span.good-count i.icon-heart,
    .cat-memoriastter .footer .meta span.favorite-count,
    .cat-memoriastter .footer .meta span.reply-count,
    .cat-memoriastter .footer .meta a.reply-count .disable,
    .cat-memoriastter .footer .meta span.good-count.disable {
        color: #bbb;
    }
    
    .cat-memoriastter.dark-mode .footer .meta span.good-count i.icon-heart,
    .cat-memoriastter.dark-mode .footer .meta span.favorite-count,
    .cat-memoriastter.dark-mode .footer .meta span.reply-count,
    .cat-memoriastter.dark-mode .footer .meta a.reply-count .disable,
    .cat-memoriastter.dark-mode .footer .meta span.good-count.disable {
        color: #555;
    }
    
    .cat-straightline-bookmark .footer .meta span.reply-count,
    .cat-straightline-bookmark .footer .meta a.reply-count .disable,
    .cat-straightline-bookmark .footer .meta span.good-count.disable {
        color: #555;
    }
    
    body.star-clicking {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    .comment-section .footer {
        overflow: hidden;
    }
    
    .library-section.comment-section .footer {
        overflow: visible;
    }
    
    .footer .meta .reply,
    .footer .meta .good,
    .footer .meta .favorite,
    .footer .meta .star {
        display: inline-block;
        width: 25%;
        margin-right: 0;
        white-space: nowrap;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

        .cat-memoriastter .footer .meta .good,
        .cat-memoriastter .footer .meta .favorite {
            width: 40%;
        }
        
    .for-mobile .footer .meta .reply,
    .for-mobile .footer .meta .good,
    .for-mobile .footer .meta .favorite,
    .for-mobile .footer .meta .star {
        height: 20px;
    }

        .cat-memoriastter.for-mobile .footer .meta .favorite,
        .cat-memoriastter.for-mobile .footer .meta .good {
            width: 40%;
        }

        .cat-memoriastter .footer .meta .favorite + .good,
        .cat-memoriastter.for-mobile .footer .meta .favorite + .good {
            width: 50%;
        }

    span.star.click-effect i {
        animation: click-glow 0.2s ease-out;
    }
    
    @keyframes click-glow {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }

    .plus-one-effect {
        position: absolute;
        transform: translate(-50%, -50%);
        font-size: 13px;
        color: #f91880;
        animation: float-up 2s ease-out forwards;
    }
    
    .plus-one-effect i {
        margin-right: 5px;
    }
    
    @keyframes float-up {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        100% {
            opacity: 0;
            transform: translate(-50%, -400%);
        }
    }

    .own-section .footer .count + .label {
        display: none;
    }
    
.filter {
    margin-left: 1em;
    color: #999;
}

.warn-info {
}

    .for-mobile .warn-info {
        right: 10px;
    }
    
.count {
    margin-left: 0.5em;
    font-weight: normal;
    font-size: 13px;
}

.good-count .label,
.star-count .label {
    margin-left: 0.3em;
    font-weight: normal;
    font-size: 11px;
}

    .good-count img.mr {
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -3px;
    }
    
.fukidashi .label {
    font-weight: normal;
}

.reply-count,
.good-count,
.favorite-count,
.star-count {
    margin-left: -6px;
    padding: 6px 8px;
    border-radius: 50px;
    line-height: 1;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

    .good-count {
        display: block;
    }
    
    .reply-count i,
    .good-count i,
    .favorite-count i,
    .star-count i {
        margin: 0;
    }
    
    .reply-count:hover,
    .good-count:hover,
    .favorite-count:hover,
    .star-count:hover {
        border-color: #999;
    }
    
    .good-count.no-anchor,
    .good-count.voted,
    a.good-count.voted:hover,
    a.good-count.voted:hover i {
        color: #f91880 !important;
    }

    .favorite-count.no-anchor,
    .favorite-count.voted,
    a.favorite-count.voted:hover,
    a.favorite-count.voted:hover i {
        color: #f7b833 !important;
    }
    
    .cat-memoriastter .favorite-count.no-anchor,
    .cat-memoriastter .favorite-count.voted,
    .cat-memoriastter a.favorite-count.voted:hover,
    .cat-memoriastter a.favorite-count.voted:hover i {
        color: #39B54A !important;
    }
    
    .good-count.voted {
        position: relative;
        z-index: 2;
    }
    
.attention {
    font-size: 13px !important;
    color: #666;
}

    .dark-mode .attention,
    .cat-memoriastter.dark-mode .attention,
    .cat-straightline-bookmark .attention {
        color: #999;
    }
    
    .attention div:last-child {
        margin-top: 10px;
    }

    .attention a {
        font-size: 100% !important;
        color: #008db7;
    }

    .attention strong {
        color: #000;
    }
    
    .dark-mode .attention strong,
    .cat-memoriastter.dark-mode .attention strong,
    .cat-straightline-bookmark .attention strong {
        color: #fff;
    }

.warning {
}

    .form-section .warning {
        background-color: #FFFBED;
        margin: 0 -20px 20px -20px;
        padding: 20px;
        border-bottom: 1px solid #eff1f5;
    }
    
    .dark-mode .form-section .warning,
    .cat-memoriastter.dark-mode .form-section .warning,
    .cat-straightline-bookmark .form-section .warning {
        background-color: #24242e;
    }
    
    .for-mobile .form-section .warning {
        margin: 0 -10px 10px -10px;
        padding: 10px;
    }
    
    #page-header + .form-section .warning {
        margin-top: -20px;
    }
    
    .for-mobile #page-header + .form-section .warning {
        margin-top: -10px;
    }
    
    .warning a {
        font-size: 100% !important;
        color: #008db7;
    }

    .warning p {
        margin-bottom: 1em;
    }
    
    .warning p:last-child {
        margin-bottom: 0;
    }
    
    .warning strong {
        color: #000;
    }
    
    .dark-mode .warning strong,
    .cat-memoriastter.dark-mode .warning strong,
    .cat-straightline-bookmark .warning strong {
        color: #fff;
    }

.induction {
    margin: -10px 0 10px 0;
    text-align: right;
}

    #category-header .induction {
        margin: 0;
    }

    #category-header .induction + .meta{
        margin-top: 5px;
    }
    .for-mobile #category-header .induction + .meta{
        margin-top: 3px;
    }

    .induction a {
        font-size: 100% !important;
        color: #008db7;
    }

    .dark-mode .induction a {
        color: #8ea6bb;
    }
    
.close {
    float: right;
    margin: 0 !important;
}

    .close i {
        margin: 0 !important;
    }
    
    .please-section .close.button-outline {
        background-color: #999 !important;
        border-color: #999;
    }
    
#todays-heart #thx {
    float: right;
    margin: 0 0 0 5px!important;
}

.point {
    margin-left: 0.5em;
    color: #f66;
    background-color: #ffefef;
    padding: 0 5px;
    border-radius: 5px;
}

    .for-mobile .point {
        padding: 2px 5px;
    }

.follow {
}

    .category-section .follow .follow-count {
        font-size: 11px;
        padding: 5px 10px !important;
    }
    
        footer .category-section .follow .follow-count {
            font-size: 10px;
            padding: 4px 6px !important;
        }
        
        .for-mobile .category-section .follow .follow-count {
            font-size: 10px;
            padding: 4px 8px !important;
        }
        
        footer .category-section .follow .follow-count i {
            font-size: 13px;
        }
        
    .category-section .follow .follow-count i {
        margin-right: 0;
    }
    
#page-header {
    position: relative;
    margin: -20px -20px 0 -20px;
    padding: 10px 0;
    border-radius: 10px 10px 0 0;
}

    .for-mobile #page-header {
        margin: -10px -10px 0 -10px;
        padding: 10px 0;
        border-radius: 0;
    }
    
    .success + #page-header,
    .error + #page-header {
        margin-top: 20px;
        border-radius: 0;
        border-top: 1px solid #eff1f5;
    }
    
        .for-mobile .success + #page-header,
        .for-mobile .error + #page-header {
            margin-top: 10px;
        }
        
    nav + #page-header {
        margin-top: -20px;
    }
    
        .for-mobile nav + #page-header {
            margin-top: -10px;
        }
        
    #page-header .toggle .anchor {
        font-weight: normal;
    }
        
    #page-header span:not(.hidden) .toggle-open {
        display: none;
    }
    
    #page-header span.hidden .toggle-close {
        display: none;
    }
    
    #page-header h1 {
        font-weight: bold;
        font-size: 15px;
        text-align: center;
        padding: 10px 0;
    }
    
        .for-mobile #page-header h1 {
            padding: 0;
        }
        
    #page-header .pleft,
    #page-header .pcenter,
    #page-header .pright {
        display: inline-block;
    }
    
    #page-header  .pleft {
        width: 50%;
        text-align: left;
        white-space: nowrap;
    }
    
        .for-mobile #page-header  .pleft {
            width: 80%;
        }
        
    #page-header .pleft h1 {
        color: #999;
    }
    
    .cat-memoriastter #page-header .pleft h1 {
        color: #777;
    }
    
    .cat-memoriastter.dark-mode #page-header .pleft h1 {
        color: #999;
    }
    
    #page-header .pleft h1,
    #page-header .pleft .toggle,
    #page-header .pleft a,
    #page-header .pright > a,
    #page-header .pright .dropdown {
        display: inline-block;
        padding: 0 0 0 20px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 13px;
    }
    
    #page-header .pright > a,
    #page-header .pright .dropdown {
        padding-right: 20px;
    }
    
    #page-header .pleft .toggle-open {
        color: #999;
    }
    
    .cat-memoriastter #page-header .pleft .toggle-open {
        color: #777;
    }
    
    .cat-memoriastter.dark-mode #page-header .pleft .toggle-open {
        color: #999;
    }
    
        .for-mobile #page-header .pleft h1,
        .for-mobile #page-header .pleft .toggle,
        .for-mobile #page-header .pleft a,
        .for-mobile #page-header .pright > a,
        .for-mobile #page-header .pright .dropdown {
            padding: 0 0 0 10px !important;
        }
    
        .for-mobile #page-header .pright > a,
        .for-mobile #page-header .pright .dropdown {
            padding-right: 10px !important;
        }
    #page-header .pcenter {
        width: 0;
        text-align: center;
    }
    
    #page-header  .pright {
        width: 50%;
        text-align: right;
    }
    
        .for-mobile #page-header .pright {
            width: 20%;
        }
        
    #page-header .pright i {
        margin-right: 0;
    }
    
    #page-header .pright strong {
        margin-left: 0.5em;
        font-weight: normal;
    }
    
    #page-header .dropdown h2 {
        font-weight: normal;
    }
    
#category-header {
    margin: 0 -20px;
    padding: 20px 60px;
    border-top: 1px solid #eff1f5;
}

    section #category-header:first-child {
        padding-top: 0;
        border-style: none;
    }
    
    #category-header.hidden {
        display: none;
    }
    
    .for-mobile #category-header {
        margin: 0 -10px;
        padding: 10px;
    }
    
    #category-header h1 {
        font-size: 20px;
        font-weight: normal;
    }
    
    #page-header + #category-header .description {
        margin-top: 15px;
    }
    
        .for-mobile #page-header + #category-header .description {
            margin-top: 10px;
        }
        
    #category-header .description.abbr {
        position: relative;
        overflow: hidden;
        height: 140px;        
    }
    
    #category-header .description.abbr.opened {
        position: static;
        overflow: visible;
        height: auto;
    }
    
    #category-header .category-header-left,
    #category-header .category-header-right {
        display: inline-block;
        vertical-align: top;
    }
    
    #category-header .category-header-left {
        width: 70%;
    }
    
    #category-header .category-header-right {
        width: 30%;
        text-align: right;
    }
    
        /*
        .for-mobile #category-header .category-header-left,
        .for-mobile #category-header .category-header-right {
            display: block;
            width: auto;
        }
        
        .for-mobile #category-header .category-header-right {
            margin-top: 5px;
        }
        */
        
        .for-mobile #category-header .category-header-right .button-outline {
            margin-left: 5px;
            font-size: 12px;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        
        .for-mobile #category-header .category-header-right .button-outline i {
            margin-left: 0.1em;
            font-size: 13px;
        }

    .cat-haikuu #page-header,
    .cat-haikuu #category-header {
        background-color: #6C8CA5 !important;
        color: #fff;
    }
    
    .cat-haikuu #category-header {
        background-image: url(../char/bg/haiku.png);
        background-position: 50%;
    }
    
        .for-mobile.cat-haikuu #category-header {
            background-size: 74px 92px;
        }
        
        .cat-haikuu section #category-header:first-child {
            padding-top: 20px;
            margin-top: -20px;
            border-style: none;
            border-radius: 10px 10px 0 0;
        }

        .for-mobile.cat-haikuu section #category-header:first-child {
            padding-top: 10px;
            margin-top: -10px;
            border-radius: 0;
        }

    .cat-haikuu #category-header {
        border-color: #53748C;
    }
    
    .cat-haikuu #page-header a,
    .cat-haikuu #page-header .anchor,
    .cat-haikuu #category-header .description a,
    .cat-haikuu #category-header .meta .date,
    .cat-haikuu #category-header .meta .follower,
    .cat-haikuu #category-header .meta .genre a,
    .cat-haikuu #category-header .meta .option .icon-more_horiz {
        color: #fff !important;
    }

    .cat-haikuu #category-header .description a {
        text-decoration: underline !important;
    }
    
.more {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-top: 20px;
    text-align: center;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 55%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 55%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 55%);
}

    .dark-mode .more {
        background: -moz-linear-gradient(top, rgba(25,25,33,0) 0%, rgba(25,25,33,1) 55%);
        background: -webkit-linear-gradient(top, rgba(25,25,33,0) 0%,rgba(25,25,33,1) 55%);
        background: linear-gradient(to bottom, rgba(25,25,33,0) 0%,rgba(25,25,33,1) 55%);
    }
    
    .cat-haikuu .more,
    .cat-memoriastter .more {
        background: none;
    }
    
    .cat-straightline-bookmark .more {
        background: -moz-linear-gradient(top, rgba(14,14,14,0) 0%, rgba(14,14,14,1) 55%);
        background: -webkit-linear-gradient(top, rgba(14,14,14,0) 0%,rgba(14,14,14,1) 55%);
        background: linear-gradient(to bottom, rgba(14,14,14,0) 0%,rgba(14,14,14,1) 55%);
    }
    
    .text .more {
        padding-top: 40px;
        text-align: left;
    }
    
    .more span {
        display: block;
        color: #008db7;
    }
    
    .cat-haikuu .more span,
    .cat-memoriastter .more span {
        display: block;
        margin: 0 20%;
        font-size: 12px;
        text-align: center;
        background-color: rgba(0,0,0,0.7);
        border-radius: 50px;
        padding: 5px 10px;
    }
    
    .cat-haikuu .more span {
        background-color: rgba(0,0,0,0.7);
        color: #fff !important;
    }
    
    .cat-memoriastter.dark-mode .more span {
        background-color: rgba(0,0,0,0.9);
    }
    
    .cat-haikuu.dark-mode .more span {
        background-color: rgba(0,0,0,0.9);
    }
    
    .cat-haikuu .more span i,
    .cat-memoriastter .more span i {
        margin-left: -1em;
    }
    
.icon {
    float: left;
    position: relative;
    margin-top: -10px;
    z-index: 99;
    background-color: #fff;
    padding: 10px 0;
}

    .dark-mode .icon {
        background-color: #191921;
    }
    
    .cat-memoriastter .icon {
        background-color: transparent;
    }
    
    .cat-straightline-bookmark .icon {
        background-color: #0e0e0e;
    }
    
    .activity-section .icon {
        margin: 0 5px 0 0;
        padding: 0;
        background-color: transparent;
    }
    
    .form-section .icon {
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    
    .pixel {
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    .shadow {
    }
    
        .battle-right .heroes .shadow {
        }
        
        .battle-left .bosses .shadow,
        #idlebattle .bosses .shadow {
            filter: brightness(0);
            transform: scale(1.2, 1.2);
            transform-origin: center bottom;
            opacity: 1;
        }
        
        .hero-section .heroes .shadow {
            position: absolute;
            left: 50%;
            transform: translateX(-50%); 
        }
        
        /*
        .hero-section .heroes .shadow,
        .battle-right .heroes .shadow.amazing,
        .battle-right .heroes .shadow.circle {
            position: absolute;
            left: 50%;
            margin-left: -32px;
            filter: none !important;
            transform: skew(0, 0) scale(2, 2);
            transform-origin: center center !important;
            opacity: 1;
            z-index: 0;
        }
        
            .hero-section .heroes .shadow.circle {
                transform: skew(0, 0) scale(1.3, 1.3);
            }
            
            .battle-right .heroes .shadow.amazing,
            .battle-right .heroes .shadow.circle {
                margin-left: -24px;
            }
            
            .battle-right .heroes .shadow.amazing {
                transform: skew(0, 0) scale(3, 3);
            }
        */
        
        .hero-section .heroes .icon-wrapper .shadow + img {
            position: relative;
            z-index: 1;
        }
        
        .duelysticon .shadow {
            position: absolute;
            filter: none !important;
            opacity: 1;
            z-index: 0;
        }
        
        .duelysticon .shadow + img {
            position: relative;
            z-index: 1;
        }
        
    .icon img {
        width: 36px;
        height: 36px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
        object-fit: contain;
    }
    
    
    img.render-auto {
        image-rendering: auto;
    
    }
    
    .cat-straightline-bookmark .icon img {
        filter: grayscale(1) !important;
    }
    
    #introduction .icon img {
        width: 20px;
    }
    
    img.no-summon {
        filter: contrast(0.3) grayscale(1);
    }
    
    .success img.no-summon {
        filter: none;
    }
    
    img.fit {
        object-fit: contain;
    }
    
    .icon .duelysticon {
        margin: 0;
        padding: 0;
    }
    
        .icon .duelysticon {
            position: absolute;
            top: -10px;
            left: -16px;
        }

        .icon .duelysticon img {
            width: 64px;
            height: 64px;
            object-fit: contain;
            z-index: 2;
        }
        
        .icon .duelysticon img.mr {
            width: 32px;
            height: 32px;
            margin-left: 0;
            object-fit: contain;
        }
            
    .dark-mode .icon .favicon {
        background-color: #323141;
    }
    
    .icon .favicon img {
        margin-left: -72px;
    }
    
    .success .icon,
    .for-mobile .icon {
        margin-left: 5px;
    }
    
    .icon i.icon-egg,
    .icon i.icon-egg_fill,
    .icon i.icon-live_help,
    .icon i.icon-hiyoko {
        font-size: 32px;
        margin-left: 1px;
        margin-right: 0;
    }
    
    .for-mobile .icon i.icon-egg,
    .for-mobile .icon i.icon-egg_fill,
    .for-mobile .icon i.icon-hiyoko {
        font-size: 36px;
    }
    
    .icon i.icon-live_help {
        display: block;
        margin: 0;
        font-size: 18px;
        color: #999;
        text-align: center;
    }
    
    .icon i.icon-egg_fill,
    .icon i.icon-live_help,
    .icon i.icon-hiyoko {
        opacity: 0.5;
    }
    
    .dark-mode .icon i.icon-egg_fill,
    .dark-mode .icon i.icon-live_help,
    .dark-mode .icon i.icon-hiyoko {
        opacity: 0.8;
    }
    
    .for-mobile#comment_form.cat-haikuu .icon,
    .for-mobile.cat-handwritter .form-section .icon,
    .for-mobile#comment_form.cat-illustratter .icon,
    .for-mobile#comment_form.cat-artmemoriastter .icon {
        display: none;
    }

@keyframes shake-r {
  0% { transform: translateX(0); }
  10% { transform: translateX(-1x); }
  20% { transform: translateX(1px); }
  30% { transform: translateX(-1px); }
  40% { transform: translateX(1px); }
  50% { transform: translateX(-1px); }
  60% { transform: translateX(1px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

@keyframes shake-sr {
  0% { transform: translateX(0); }
  10% { transform: translateX(-2x); }
  20% { transform: translateX(2px); }
  30% { transform: translateX(-2px); }
  40% { transform: translateX(2px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  90% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes shake-ssr {
  0% { transform: translateX(0); }
  10% { transform: translateX(-5x); }
  20% { transform: translateX(5px); }
  30% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  50% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  70% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  90% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

@keyframes shake-ur {
  0% { transform: translateX(0); }
  10% { transform: translateX(-20x); }
  20% { transform: translateX(20px); }
  30% { transform: translateX(-20px); }
  40% { transform: translateX(20px); }
  50% { transform: translateX(-20px); }
  60% { transform: translateX(20px); }
  70% { transform: translateX(-20px); }
  80% { transform: translateX(20px); }
  90% { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

@keyframes jump-r {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes jump-sr {
  0% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}

@keyframes jump-left-r {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-10px, -10px); }
  50% { transform: translate(-20px, 0); }
  75% { transform: translate(-10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes jump-left-sr {
  0% { transform: translate(0, 0); }
  12% { transform: translate(-10px, -10px); }
  24% { transform: translate(-20px, 0); }
  36% { transform: translate(-30px, -10px); }
  50% { transform: translate(-40px, 0); }
  62% { transform: translate(-30px, -10px); }
  74% { transform: translate(-20px, 0); }
  86% { transform: translate(-10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes jump-right-r {
  0% { transform: translate(0, 0); }
  25% { transform: translate(10px, -10px); }
  50% { transform: translate(20px, 0); }
  75% { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes jump-right-sr {
  0% { transform: translate(0, 0); }
  12% { transform: translate(10px, -10px); }
  24% { transform: translate(20px, 0); }
  36% { transform: translate(30px, -10px); }
  50% { transform: translate(40px, 0); }
  62% { transform: translate(30px, -10px); }
  74% { transform: translate(20px, 0); }
  86% { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes jump-right-ssr {
  0% { transform: translate(0, 0); }
  30% { transform: translate(60px, 0); }
  50% { transform: translateX(62px); }
  52% { transform: translateX(58x); }
  54% { transform: translateX(62px); }
  56% { transform: translateX(58px); }
  58% { transform: translateX(62px); }
  60% { transform: translateX(58px); }
  62% { transform: translateX(62px); }
  64% { transform: translateX(58px); }
  66% { transform: translateX(62px); }
  68% { transform: translateX(58px); }
  70% { transform: translateX(60px); }
  100% { transform: translate(0, 0); }
}

@keyframes rainbow {
    0% {filter: contrast(2) hue-rotate(0deg);}
    14.29% {filter: contrast(2) hue-rotate(60deg);}
    28.57% {filter: contrast(2) hue-rotate(120deg);}
    42.86% {filter: contrast(2) hue-rotate(180deg);}
    57.14% {filter: contrast(2) hue-rotate(240deg);}
    71.43% {filter: contrast(2) hue-rotate(300deg);}
    85.71% {filter: contrast(2) hue-rotate(360deg);}
    100% {filter: contrast(2) hue-rotate(60deg);}
}

@keyframes fade-in-out {
    0% { opacity: 1; transform: scale(1)}
    100% { opacity: 0; transform: scale(3)}
}

.rainbow {
    animation: rainbow 1s linear infinite;
}

img.rainbow {
    animation: rainbow 2s linear infinite;
}

img.rainbow-big {
    animation: rainbow 2s linear infinite;
    transform: scale(2);
    transform-origin: center center;
}

img.fade-in-out {
    animation: fade-in-out 1s ease-in-out;
    transform-origin: center center;
}

img.rainbow.shake-lv-sr {
    transform: scale(1);
    transform-origin: center center;
}

.shake-lv-r {
  animation: shake-r 0.8s ease-in-out;
}

.shake-lv-sr {
  animation: shake-sr 0.8s ease-in-out;
}

.shake-lv-ssr {
  animation: shake-ssr 0.8s ease-in-out;
}

.shake-lv-ur {
  animation: shake-ur 0.8s ease-in-out;
}

.shake-lv-lr {
  animation: shake-ur 0.8s ease-in-out;
}

.jump-lv-0 {
  animation: jump-r 0.4s ease-in-out !important;
}

.jump-lv-1 {
  animation: jump-sr 0.6s ease-in-out !important;
}

.jump-lv-2 {
  animation: jump-left-r 0.4s ease-in-out !important;
}

.jump-lv-3 {
  animation: jump-left-sr 0.8s ease-in-out !important;
}

.jump-lv-4 {
  animation: jump-right-r 0.4s ease-in-out !important;
}

.jump-lv-5 {
  animation: jump-right-sr 0.8s ease-in-out !important;
}

.jump-lv-6 {
  animation: jump-right-ssr 2s ease-in-out !important;
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes floatAnimationLeft {
    0%, 100% {
        transform: translateY(0) scale(-1, 1);
    }
    50% {
        transform: translateY(-4px) scale(-1, 1);
    }
}

    img.mr.fanime {
        animation: floatAnimation 2s ease-in-out infinite;
    }
    
    img.mr.no-animation {
        animation: none !important;
    }
    
@keyframes idleAnimation {
    0%, 100% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.02, 0.93);
    }
}

@keyframes idleAnimationReverse {
    0%, 100% {
        transform: scale(-1, 1);
    }
    50% {
        transform: scale(-1.02, 0.93);
    }
}

    img.gr.fanime:not(.rainbow),
    img.sgr.fanime:not(.rainbow),
    img.mgr.fanime:not(.rainbow),
    img#world-boss-image.normal-boss.fanime:not(.rainbow),
    img#world-boss-small-image.fanime {
        animation: idleAnimation 3s cubic-bezier(0.1, 0, 0.7, 1.0) infinite;
        transform-origin: center bottom !important;
    }

    img#housebattle-boss-image.fanime {
        animation: idleAnimationReverse 3s cubic-bezier(0.1, 0, 0.7, 1.0) infinite;
        transform-origin: center bottom !important;
    }
    
    img#world-boss-image.normal-boss.rainbow {
        animation: rainbow 2s linear infinite;
        transform-origin: center bottom !important;
    }

    img#world-boss-image.normal-boss.fanime.rainbow {
        animation: idleAnimation 3s cubic-bezier(0.1, 0, 0.7, 1.0) infinite, rainbow 2s linear infinite;
        transform-origin: center bottom !important;
    }

    .shadow.rainbow {
        transform: scale(1.4) !important;
        transform-origin: center bottom !important;
    }
    
@keyframes bottomToTopAnimation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-30px);
        opacity: 1;
    }
    100% {
        transform: translateY(-80px);
        opacity: 0;
    }
}

@keyframes attackAnimation {
    0% {filter: brightness(2);}
    25% {filter: brightness(0.5);}
    50% {filter: brightness(2);}
    75% {filter: brightness(0.5);}
    100% {filter: brightness(2);}
}

@keyframes rainbow-progress {
    0% { background-position: 0% 50%; }
    100% { background-position: -400% 50%; }
}

.battle-dmg {
    position: absolute;
    color: #FCFC7A;
    animation: bottomToTopAnimation 2s ease-out;
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-user-drag: none;
    user-drag: none;
    touch-action: manipulation;
    text-shadow: 0px 0px 8px #9A5124, 0px 0px 6px #9A5124, 0px 0px 3px #9A5124, 0px 0px 1px #9A5124;
    font-size: 18px;
    pointer-events: none;
    text-align: center;
    z-index: 999999;
}

    @keyframes bounceAnimation {
        0% {
            transform: translateY(-20px);
        }
        10% {
            transform: translateY(-30px);
        }
        25% {
            transform: translateY(0);
        }
        30% {
            transform: translateY(-10px);
        }
        35% {
            transform: translateY(0);
        }
    }
    
    .cat-endless-memoriastter .battle-dmg,
    .cat-duelystter .battle-dmg {
        color: #fff;
        text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000;
        animation: bounceAnimation 0.8s ease-in;
    }
    
    .cat-endless-memoriastter .battle-dmg.hover,
    .cat-duelystter .battle-dmg.hover {
        color: #fff;
        font-size: 14px;
        text-shadow: 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000, 0px 0px 3px #000;
        animation: bottomToTopAnimation 3s ease-out;
    }
    
    .battle-dmg .battle-dmg-sub {
        display: block;
        margin-bottom: -5px;
        font-size: 10px;
        text-transform: uppercase;
    }
    
    .cat-endless-memoriastter .battle-dmg.hover .battle-dmg-sub,
    .cat-duelystter .battle-dmg.hover .battle-dmg-sub {
        margin-bottom: -3px;
    }
    
    .cat-duelystter .battle-dmg.with-dmg-sub {
        color: #FCFC7A;
    }
    
    .battle-dmg.over-1000 {
        font-size: 20px;
    }
    
    .battle-dmg.over-10000 {
        font-size: 21px;
    }
    
    .battle-dmg.over-100000 {
        font-size: 22px;
    }
    
    .battle-dmg.over-1000000 {
        font-size: 23px;
    }
    
    .battle-dmg.click {
        font-size: 12px;
    }
    
    .battle-dmg.normal {
        animation: bottomToTopAnimation 3s ease-out;
    }
    
    .battle-dmg.heal {
        color: #85F6D7;
        text-shadow: 0px 0px 8px #174F3F, 0px 0px 6px #174F3F, 0px 0px 3px #174F3F, 0px 0px 1px #174F3F;
    }

    /*
    .battle-dmg.click.heal {
        color: #c4df9b;
    }
    */
    
    img#housebattle-chest {
        position: absolute;
        width: 48px;
        height: auto;
        margin-left: -24px;
        left: 50%;
        bottom: 80px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }

.battle,
.battle-record {
    position: relative;
    text-align: center;
    color: #fff;
    margin: 0 -20px;
    padding: 20px;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #333;
}

    .for-mobile .battle,
    .for-mobile .battle-record {
        margin: 0 -10px;
        padding: 10px;
    }
    
    .battle.defeated {
        filter: grayscale(1);
    }
    
    .battle.now-working .next-level,
    .battle.now-working #housebeyond-share,
    .battle.now-dropping .next-level {
        display: none;
    }
    
    .battle.now-working .battle-left img,
    .battle.now-working .battle-right img {
        filter: grayscale(1);
        opacity: 0.5;
    }
    
    .battle-record {
        text-shadow: 0 0 3px rgba(0,0,0,0.8);
    }
    
    .battle-record p:first-child {
        font-size: 12px;
    }
    
    .battle-record + .battle {
        border-top-style: solid;
        border-top-width: 1px;
    }

    .battle-record .battle-tap {
        font-size: 20px;
    }
    
    .battle-record .battle-score {
        font-size: 16px;
    }
    
    #housebeyond-share a:first-of-type {
        display: block;
        margin-top: 20px;
    }
    
    #housebeyond-share .button-outline {
        margin: 10px 0 20px 0;
    }
    
    #housebeyond-share img {
        max-width: 100%;
        height: auto;
    }
    
    .issue-x-post,
    .issue-party-post {
        font-size: 12px;
    }
    
    .issue-x-post img {
        max-width: 100%;
        height: auto;
        border-radius: 20px;
        border: 1px solid #000;
        box-shadow: 0 0 300px rgba(0,0,0,1), 0 0 100px rgba(0,0,0,1), 0 0 50px rgba(0,0,0,1), 0 0 20px rgba(0,0,0,1), 0 0 5px rgba(0,0,0,1);
    }
    
    .issue-party-post img {
        max-width: 100%;
        height: auto;
        border-radius: 20px;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
    }
    
    .issue-x-post p,
    .issue-x-post .button-outline {
        margin-top: 5px;
    }
    
    .issue-party-post p,
    .issue-party-post a {
        margin-top: 10px;
    }
    
    .cat-duelystter .battle-record {
        text-transform: uppercase;
    }
    
    .cat-duelystter #local-nav + .battle-record {
        text-transform: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.2);
    }
    
.battle-bg {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

    .dark-mode .battle-bg {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    
.boss-battle .battle-bg {
    filter:  saturate(70%) contrast(130%) hue-rotate(180deg);
}

.battle-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
    z-index: 0;
}


#originbattle .battle-bg::after {
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(../char/bg/origin/vignette.png);
}

#rank-list .battle-bg::after {
    height: 50%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

#holding-point {
    margin-top: 5px;
    font-size: 12px;
    color: #777;
}

    .dark-mode #holding-point {
        color: #999;
    }
    
#select-point-items {
    font-size: 11px;
    padding-top: 5px;
    color: #777;
}

    .dark-mode #select-point-items {
        color: #999;
    }
    
    #select-point-items strong {
        font-weight: normal;
    }
    
    #select-point-items i {
        font-size: 11px;
    }

    #select-point-items .countdown,
    #select-point-items.is_countdown .message {
        display: none;
    }
    
    #select-point-items.is_countdown .countdown {
        display: inline;
    }

.speech-bubble-container {
    margin-bottom: 25px;
}

    .for-mobile .speech-bubble-container {
        margin-top: 5px;
        margin-bottom: 20px;
    }
    
.speech-bubble {
    position: relative;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50px;
    color: white;
    padding: 8px 20px;
    font-size: 11px;
    line-height: 1;
}

    .for-mobile .speech-bubble {
        font-size: 10px;
        padding: 5px 20px;
    }
    
    .speech-bubble::after {
        top: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 0, 0, 0.6) transparent transparent transparent;
        border-width: 5px;
        margin-left: -5px;    
    }
    
.battle-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.battle-img-container {
    transition: opacity 0.3s ease-in-out 0.5s;
    opacity: 1;
}

    .battle-fadeout {
        opacity: 0;
        filter: grayscale(1);
    }
    
    .battle-attack {
        animation: attackAnimation 0.3s;
    }
    
    @keyframes hitAnimation {
        0% {
            transform: translate(0, 0) scale(-1, 1);
        }
        20% {
            transform: translate(5px, 0) scale(-1, 1);
        }
        40% {
            transform: translate(0, 0) scale(-1, 1);
        }
        60% {
            transform: translate(5px, 0) scale(-1, 1);
        }
        80% {
            transform: translate(0, 0) scale(-1, 1);
        }
    }
    
    .battle-hit {
        animation: hitAnimation 0.3s ease-in-out;
    }
    
.battle-left,
.battle-right,
.battle-center {
    position: relative;
    width: 50%;
    height: 220px;
    display: grid;
    align-items: end;
    justify-content: center;
    font-size: 12px;
}

.cat-duelystter .battle-left,
.cat-duelystter .battle-right,
.cat-duelystter .battle-center {
    height: 240px;
}

.cat-duelystter #gods-gacha .battle-center {
    height: 180px;
}

.for-mobile.cat-endless-memoriastter .battle-left,
.for-mobile.cat-endless-memoriastter .battle-right,
.for-mobile.cat-endless-memoriastter .battle-center {
    height: 200px;
}

.battle-right,
.battle-center {
}

.battle-center {
    width: 100%;
}

    .in-battle .battle-left,
    .in-battle .battle-right,
    .in-battle .battle-center {
        height: 180px;
    }

    .for-mobile .in-battle .battle-left,
    .for-mobile .in-battle .battle-right,
    .for-mobile .in-battle .battle-center {
        height: 160px;
    }

    #originbattle .in-battle .battle-left,
    #originbattle .in-battle .battle-right,
    #originbattle .in-battle .battle-center,
    .for-mobile #originbattle .in-battle .battle-left,
    .for-mobile #originbattle .in-battle .battle-right,
    .for-mobile #originbattle .in-battle .battle-center {
        height: 220px;
    }

    
    #rank-list .battle-left,
    #rank-list .battle-right,
    #rank-list .battle-center,
    .for-mobile #rank-list .battle-left,
    .for-mobile #rank-list .battle-right,
    .for-mobile #rank-list .battle-center {
        height: 90px;
        align-items: center;
    }

    #world-boss .battle-left,
    #world-boss .battle-right {
        height: 150px;
    }
    
    .success .battle-left,
    .success .battle-right {
        height: 100px;
    }
    
    #favorite-hero .battle-center,
    #favorite-hero .battle-right {
        display: block;
        height: auto;
    }
    
    .battle-left.align-items-center,
    .battle-right.align-items-center {
        align-items: center;
    }
    
    .battle-left img,
    .battle-right img {
        position: relative;
    }
    
    /*
    .battle-left img {
        z-index: 2;
    }
    
    .battle-right img {
        z-index: 1;
    }
    */
    
    .bosses,
    .heroes {
        position: relative;
        height: 112px;
        display: block;
    }
    
        #idlebattle .bosses {
            height: auto;
        }
        
        .hero-section .heroes {
            height: auto;
        }
        
        #world-boss .bosses img {
            position: absolute;
            width: 144px;
            height: 144px;
            object-fit: contain;
            left: 50%;
            bottom: 10px;
            margin: 0 0 0 -72px;
        }
        
        #world-boss .bosses img#world-boss-image {
            z-index: 2;
        }
        
        #world-boss .bosses img#world-boss-companion-image {
            position: absolute;
            width: 48px;
            height: 48px;
            object-fit: contain;
            left: 50%;
            bottom: 70px;
            margin: 0 0 0 -74px;
            z-index: 3;
        }
        
        #world-boss .bosses img#world-boss-small-image {
            position: absolute;
            width: 64px;
            height: 64px;
            object-fit: contain;
            left: 50%;
            bottom: 7px;
            margin: 0 0 0 -82px;
            z-index: 3;
        }
        
        #world-boss .bosses img#world-boss-small-image.index-2 {
            margin: 0 0 0 16px;
            bottom: 13px;
            z-index: 1;
        }
        
        #world-boss .bosses img#world-boss-small-image.index-3 {
            margin: 0 0 0 -126px;
        }
        
        #idlebattle .bosses img#idlebattle-boss-image {
            position: absolute;
            width: 96px;
            height: 96px;
            object-fit: contain;
            left: 50%;
            bottom: 0;
            margin: 0 0 0 -48px;
        }
        
        #idlebattle .bosses img#idlebattle-boss-image.l {
            width: 144px;
            height: 144px;
            margin: 0 0 0 -72px;
        }
        
        #idlebattle .bosses img#idlebattle-boss-image.xl {
            width: 144px;
            height: 144px;
            margin: 0 0 0 -72px;
        }
        
    /*#favorite-hero-icon .heroes,*/
    .battle-right .heroes,
    .battle-right .bosses,
    .battle-right #housebattle-boss-image,
    .battle-right #idlebattle-boss-image {
        transform: scale(-1, 1);
    }
    
        #idlebattle .battle-right .bosses {
            transform: scale(1, 1);
        }
    
    /*
    .hero-section {
        overflow: hidden;
    }
    */
    #hero-icon .heroes img {
        margin-left: -48px;
    }
    
    
    .hero-section .heroes img,
    #hero-icon .heroes img {
        width: 96px;
        height: 96px;
        margin-top: -32px;
        object-fit: contain;
    }
    
    .for-mobile .hero-section .heroes img,
    .hero-section.summon-section .heroes img {
        width: 72px;
        height: 72px;
        margin-top: -24px;
        object-fit: contain;
    }

        .hero-section .heroes img.mr {
            width: 64px !important;
            height: 64px !important;
            margin-top: 0;
        }
        
    .heroes .hero-favorite img,
    .success .heroes img,
    .success .bosses img {
        position: absolute;
        width: 72px;
        height: 72px;
        object-fit: contain;
        left: 50%;
        bottom: 30px;
        margin: 0 0 0 -36px;
    }
    
    .heroes .hero-favorite img.index-5,
    .heroes .hero-favorite img.index-6,
    .heroes .hero-favorite img.index-7,
    .heroes .hero-favorite img.index-8 {
        width: 63px;
        height: 63px;
    }
    
    .heroes .hero-favorite img.index-9,
    .heroes .hero-favorite img.index-10 {
        width: 57px;
        height: 57px;
    }
    
        .heroes .hero-favorite img.index-11 {
            width: 96px;
            height: 96px;
            margin-left: -48px;
            margin-bottom: -20px;
            z-index: 40;
        }
        
        .heroes .hero-favorite img.index-1 {
            margin-left: 26px;
            margin-bottom: -14px;
            z-index: 37;
        }
        
        .heroes .hero-favorite img.index-2 {
            margin-left: -17px;
            margin-bottom: -17px;
            z-index: 38;
        }
        
        .heroes .hero-favorite img.index-3 {
            margin-left: -60px;
            margin-bottom: -20px;
            z-index: 39;
        }
        
        .heroes .hero-favorite img.index-4 {
            margin-left: -103px;
            margin-bottom: -23px;
            z-index: 40;
        }
        
        .heroes .hero-favorite img.index-5 {
            margin-left: 9px;
            margin-bottom: 19px;
            z-index: 33;
        }
        
        .heroes .hero-favorite img.index-6 {
            margin-left: -25px;
            margin-bottom: 16px;
            z-index: 34;
        }
        
        .heroes .hero-favorite img.index-7 {
            margin-left: -59px;
            margin-bottom: 13px;
            z-index: 35;
        }
        
        .heroes .hero-favorite img.index-8 {
            margin-left: -93px;
            margin-bottom: 10px;
            z-index: 36;
        }
        
        .heroes .hero-favorite img.index-9 {
            margin-left: -38px;
            margin-bottom: 41px;
            z-index: 31;
        }
        
        .heroes .hero-favorite img.index-10 {
            margin-left: -75px;
            margin-bottom: 38px;
            z-index: 32;
        }


    .heroes .hero-companion img {
        position: absolute;
        width: 32px;
        height: 32px;
        object-fit: contain;
        left: 50%;
        bottom: 80px;
        margin: 0 0 0 0;
    }
    
        .heroes .hero-companion img.index-6 {
            width: 32px;
            height: 32px;
            margin-left: -48px;
            margin-bottom: -12px;
        }
            
    .housebeyond .battle-boss-image {
        width: 500px;
        height: auto;
        margin-top: -150px;
        margin-bottom: -60px;
    }
    
    img.battle-hero-image {
        width: 64px;
        height: 64px;
        object-fit: contain;
    }
    
    #world-boss span.battle-hero-image img#aibo-image {
        position: absolute;
        left: 50%;
        bottom: 22px;
        margin-left: -42px;
        width: 32px;
        height: 32px;
        object-fit: contain;
    }
    
    .battle-gate-image {
        width: 150px;
        height: 150px;
    }
    
    /*
    .battle-right img {
        transform: translateX(0) scale(-1, 1);
    }
    
    .battle-right img.pixel {
        filter: drop-shadow(-2px 2px 0 rgba(0,0,0,0.2));
    }
    
    img#world-boss-image.normal-boss {
        filter: contrast(1.3) grayscale(0.3) hue-rotate(300deg);
    }
    */

.battle-meta {
    font-size: 12px;
}

.battle-message {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    box-shadow: 1px 1px 20px rgba(0,0,0,0.2);
    border-radius: 10px;
    font-size: 12px;
    z-index: 2;
    text-align: center;
}

    .for-mobile .battle-message {
        padding: 10px;
    }
    
    .battle-message i {
        font-size: 13px;
    }
    
    #world-boss .battle-message {
        margin-top: -10px;
    }
    
    .for-mobile #world-boss .battle-message {
        margin-top: 0;
    }
    
    .line-fukidashi .note,
    .battle-message .note {
        display: block;
        font-size: 11px;
        color: #ccc !important;
    }
    
    .battle-message .close-result {
        font-size: 11px;
    }
    
    .battle.now-working .battle-message span {
        visibility: hidden;
    }
    
    .battle.now-working .battle-message br,
    .battle.now-dropping .battle-message .drop {
        display: none;
    }

#world-boss-hp,
#world-container {
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

.countdown-container,
.battle-hp-bar {
    position: relative;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    z-index: 2;
}

    .battle-hp-bar a,
    #total-mp,
    .dark-mode .battle-hp-bar a,
    .hero-favorite-name a {
        color: #F7FF00;
    }
    
    .battle-hp-bar a:hover,
    .dark-mode .battle-hp-bar a:hover,
    .hero-favorite-name a:hover {
        color: #FEFFE9 !important;
    }
    
    .countdown-bar-inner,
    .battle-hp-bar-inner {
        background-color: rgba(0,0,0,0.7);
        overflow: hidden;
        box-shadow: 0 0 3px rgba(0,0,0,0.3);
    }
    
    .battle-hp-bar .note {
        color: #ccc !important;
    }
    
    .battle-left .battle-hp-bar,
    .battle-right .battle-hp-bar {
        position: absolute;
        top: 0;
        width: 80%;
    }
    
    #world-boss-hp.battle-hp-bar {
        margin: 0 20px;
    }

    #housebattle .battle-hp-bar {
        left: 50%;
        transform: translateX(-50%);
    }

    #thanks-bar {
        margin: 5px 0 0 0;
    }
    
        .enable-empty #thanks-bar {
            display: none;
        }
        
        #thanks-bar .battle-hp-bar-inner {
            background-color: rgba(0,0,0,0.2);
            overflow: hidden;
            box-shadow: none;
            border-radius: 5px;
        }
    
        #thanks-bar .battle-hero-thanks {
            border-radius: 5px;
        }
        
        #thanks-bar .note {
            display: block;
            margin-top: 3px;
            font-size: 11px;
            color: #777;
        }
        
        .dark-mode #thanks-bar .note {
            color: #999;
        }
        
        #thanks-bar i {
            font-size: 11px;
        }
    
    .status-bar {
        margin: 0;
    }
    
        .status-bar .status-bar-inner {
            background-color: rgba(0,0,0,0.2);
            overflow: hidden;
            box-shadow: none;
            border-radius: 5px;
        }
    
        .status-bar .bar {
            height: 100%;
            min-height: 5px;
            background: #5BC2E7;
            background: linear-gradient(45deg,
                #5BC2E7,
                #C29BFF,
                #FF8AA0,
                #FFE87D
            );
            transition: width 0.3s ease-in-out;
            box-shadow: 1px 1px 0 rgba(255,255,255,0.2) inset, -1px -1px 0 rgba(0,0,0,0.2) inset;
            border-radius: 5px;
        }
        
        .default-mode .status-bar .bar {
            background: linear-gradient(45deg,
                #FF8AA0,  /* もっと濃いパステルピンク (red) */
                #FFA040,  /* もっと濃いパステルオレンジ (orange) */
                #FFE87D,  /* もっと濃いパステルイエロー (yellow) */
                #63D963,  /* もっと濃いパステルグリーン (green) */
                #5BC2E7,  /* もっと濃いパステルブルー (blue) */
                #B567D4,  /* もっと濃いパステルインディゴ (indigo) */
                #C29BFF,  /* もっと濃いパステルバイオレット (violet) */
                #B567D4,  /* もっと濃いパステルインディゴ (indigo) */
                #5BC2E7,  /* もっと濃いパステルブルー (blue) */
                #63D963,  /* もっと濃いパステルグリーン (green) */
                #FFE87D,  /* もっと濃いパステルイエロー (yellow) */
                #FFA040,  /* もっと濃いパステルオレンジ (orange) */
                #FF8AA0   /* もっと濃いパステルピンク (red) */
            );
            background-size: 600% 100%;
            animation: rainbow-progress 10s linear infinite;
        }
        
    .form-explanation {
        margin: 5px 0 0 0;
        font-size: 11px;
        color: #777;    
    }
    
        .form-explanation i {
            font-size: 11px;
        }
        
        .dark-mode .form-explanation,
        .dark-mode .form-explanation i {
            color: #999;    
        }
        
    .battle-boss-hp > span,
    .battle-hero-hp > span,
    .battle-hero-spark > span,
    .battle-hero-thanks > span {
        display: inline-block;
        white-space: nowrap;
        color: #fff;
        font-size: 11px;
        padding: 5px 10px;
    }
    
    .battle-boss-hp {
        height: 100%;
        min-height: 5px;
        background: #4568DC;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #B06AB3, #4568DC);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #B06AB3, #4568DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        transition: width 0.3s ease-in-out;
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
    }
    
    #world-boss .battle-boss-hp {
        transition: width 1s cubic-bezier(0, 0, 0, 1);
    }
    
    .battle-hero-hp {
        height: 100%;
        min-height: 5px;
        background: #134E5E;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #71B280, #134E5E);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #71B280, #134E5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        transition: width 0.3s ease-in-out;
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
    }

    .battle-score-hp {
        height: 100%;
        min-height: 5px;
        background: #134E5E;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #71B280, #134E5E);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #71B280, #134E5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        transition: width 0.3s ease-in-out;
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
    }

    .countdown-bar {
        height: 100%;
        min-height: 2px;
        background: #FF8008;
        background: -webkit-linear-gradient(to right, #FFC837, #FF8008);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #FFC837, #FF8008); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
        transition: width 0.1s linear;
    }

    .battle-hero-spark {
        height: 100%;
        min-height: 2px;
        background: #FF8008;
        background: -webkit-linear-gradient(to right, #FFC837, #FF8008);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #FFC837, #FF8008); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
    }

    .battle-hero-thanks {
        height: 100%;
        min-height: 5px;
        background: #ff0080;
        background: linear-gradient(to right, #40e0d0, #ff8c00, #ff0080);
        transition: width 0.3s ease-in-out;
        box-shadow: 1px 1px 0 rgba(255,255,255,0.2) inset, -1px -1px 0 rgba(0,0,0,0.2) inset;
    }

    .battle-hero-spark.max {
        background: linear-gradient(to right, #F49AC1, #EC008C, #F49AC1, #EC008C, #F49AC1);
        background-size: 200% 100%;
        animation: rainbow-progress 10s linear infinite;
    }
    
    .battle-boss-hp.max {
        background-color: #49a09d;
        background: linear-gradient(to right, #240b36, #c31432, #240b36, #c31432, #240b36);
        background-size: 200% 100%;
        animation: rainbow-progress 10s linear infinite;
    }
    
    .battle-boss-hp.max-spark,
    .battle-hero-thanks.max-spark {
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
        background-size: 1200% 100%;
        animation: rainbow-progress 20s linear infinite;
        box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 0 5px rgba(255,255,255,0.5) inset;
    }

#idlebattle-hero-name,
#idlebattle-boss-name,
#idlebattle-battle-start {
    display: block;
    margin-top: 10px;
}

#idlebattle-repeat {
    opacity: 0;
    margin-top: 1px;
}

    #idlebattle-repeat a {
        display: block;
        outline: none !important;
    }

.highlight {
    animation: highlight-animation 1s ease-in-out;
}

@keyframes highlight-animation {
    0% { color: #ff0; }
    100% { color: inherit; }
}

.lowlight {
    animation: lowlight-animation 1s ease-in-out;
}

@keyframes lowlight-animation {
    0% { color: #00AEEF; }
    100% { color: inherit; }
}

.battle-status {
    display: block;
    font-size: 11px;
}

.battle-overlay {
    position: absolute;
    display: grid;
    align-items: center;
    justify-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    opacity: 1;
    z-index: 10;
}

    #originbattle .battle-overlay {
        background-image: url(../char/bg/origin/highlight_blue.png);
        background-size: contain;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    
    #originbattle .battle-overlay.failure {
        background-image: url(../char/bg/origin/highlight_red.png);
    }
    
    .battle-overlay h2 {
        font-size: 28px;
        font-weight: 300;
        background: linear-gradient(to right, #f7ff00, #f7ff00, #e100ff, #f7ff00, #f7ff00);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 2s linear infinite;
    }
    
    .cat-endless-memoriastter .battle-overlay h2 {
        font-size: 20px;
    }
    
    #originbattle .battle-overlay h2,
    #originbattle .battle-overlay h3 {
        font-size: 20px;
        font-weight: normal;
        text-transform: uppercase;
        background: none;
        background-clip: unset;
        color: #fff;
        text-shadow: 0 0 10px rgba(0,0,0,6);
        animation: zoomFadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    }

        @keyframes zoomFadeIn {
            0% {
                transform: scale(1.2);
                opacity: 0;
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
    .battle-overlay span {
        font-size: 12px;
    }
    
    #originbattle .battle-overlay h2 + span {
        display: block;
        opacity: 0;
        text-transform: none;
        font-size: 11px;
        animation: zoomFadeIn 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
        animation-delay: 0.1s;
    }
    
    .cat-endless-memoriastter .battle-overlay span {
        margin-top: 5px;
        font-size: 11px;
    }
    
    .cat-endless-memoriastter .battle-overlay .button-outline {
        font-size: 13px;
    }
    
    .battle-overlay p {
        margin: 10px 0;
    }
    
    #originbattle .battle-overlay p {
        text-shadow: 0 0 10px rgba(0,0,0,6);
    }
    
    #originbattle .battle-overlay p .button-outline {
        text-shadow: none;
    }
    
.boss-strength-r {
}

.boss-strength-sr,
.boss-strength-ssr,
.boss-strength-ur {
    text-shadow: 0px 0px 3px rgba(0,0,0,0.8);
    font-weight: bold;
}

.boss-strength-sr {
    color: #fff568;
}

.boss-strength-ssr {
    color: #f69679;
}

.boss-strength-ur {
    color: #a864a8;
}

#my-house {
    margin: 0 -20px;
    background-size: cover;
    background-position: 50% 50%;
    background-color: #333;
}

    .for-mobile #my-house {
        margin: 0 -10px;
    }
    
    #my-house-main {
        flex: 1;
    }
    
    #my-house-sub {
        width: 180px;
        color: #fff;
        border-left: 1px solid #161616;
    }
    
    .for-mobile #my-house-sub {
        width: 160px;
    }

#favorite-hero,
#gods-gacha,
#my-house-main,
#raid-boss,
#raid-boss-result {
    position: relative;
    text-align: center;
    color: #fff;
    margin: 0 -20px;
    padding: 20px;
    background-size: cover;
    background-position: 50% 50%;
    font-size: 13px;
}

.form-anchor.duelyst-description {
    background-size: cover;
    background-position: 50% 50%;
}

.battle-record,
#gods-gacha,
#raid-boss,
#raid-boss-result {
    background-color: #333;
}

.battle-record,
#gods-gacha,
#raid-boss,
#raid-boss-result {
    background-image: url(../char/bg/bg.jpg);
}

.cat-duelystter #gods-gacha {
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cat-duelystter .battle-record {
    background-image: url(../char/bg/origin/codex_background.jpg);
    text-shadow: none;
    border-top: 1px solid #161616;
    border-bottom: 1px solid #161616;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

    .cat-duelystter .links-list + .battle-record {
        box-shadow: 0 1px 0 rgba(255,255,255,0.2);
        border-top-style: none;
    }
    
.cat-endless-memoriastter .gacha-container + #gods-gacha {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.form-anchor.duelyst-description {
    background-image: url(../image/asset/bg_bw.jpg);
}

#favorite-hero,
.dark-mode #favorite-hero {
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5), 0px 0px 2px rgba(0,0,0,0.5);
}

    #favorite-hero,
    #raid-boss {
        border-top: 1px solid #eff1f5;
    }
    
    .links-list + #favorite-hero,
    .links-list + #raid-boss {
        border-style: none;
    }
    
#my-house-main {
    touch-action: manipulation;
    margin: 0;
    background-color: transparent;
}


    .for-mobile #my-house-main {
        padding: 10px;
    }
    
    #raid-boss-result {
        text-shadow: 0 0 3px rgba(0,0,0,0.8);
    }
    
    #gods-gacha > a {
        color: #fff !important;
    }

#pet-action {
    text-align: center;
    margin: 0 -20px;
    padding: 20px;
    border-top-style: solid;
    border-top-width: 1px;
    background-size: cover;
    background-position: 50% 50%;
    background-image: url(../image/asset/bg_w.jpg);
}

    .dark-mode #pet-action {
        background-image: url(../image/asset/bg.jpg);
    }
    
    #my-house .icon-heart_fill {
        color: #f91880;
    }
    
    #pet-heart-count {
        font-size: 12px;
    }
    
    #my-house .note,
    #pet-action .note {
        font-size: 12px;
    }
    
    #pet-action a + .note {
        margin-top: 5px;
    }
    
    .for-mobile #world-boss,
    .for-mobile #world-hero,
    .for-mobile #favorite-hero,
    .for-mobile #gods-gacha,
    .for-mobile #pet-action,
    .for-mobile #raid-boss,
    .for-mobile #raid-boss-result {
        margin: 0 -10px;
        padding: 10px;
    }
    
    #world-hero,
    #raid-boss-result + #raid-boss {
        border-top-style: solid;
        border-top-width: 1px;
    }
    
    #world-hero h2 {
        margin-bottom: 5px;
        text-align: center;
        color: #fff;
        font-weight: normal;
        text-shadow: 0 0 3px rgba(0,0,0,0.8);
        font-size: 13px;
    }
    
        #world-hero h2 img {
            vertical-align: top;
        }
        
    #pet-icon {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 140px;
    }
    
    #pet-icon,
    #pet-detail,
    .pet-fukidashi {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-user-drag: none;
        user-drag: none;
        touch-action: manipulation;
    }
    
    .pet-img {
        width: 96px;
        height: 96px;
    }
    
    #housebattle-hero-image {
        width: 96px;
        height: 96px;
        padding-bottom: 10px;
    }
    
    #idlebattle-hero-image {
        width: 96px;
        height: 96px;
    }
    

    #housebattle-boss-image {
        width: 144px;
        height: auto;
        padding-bottom: 10px;
    }
    
    #pet-imgs-list {
        margin: 20px 0;
    }
    
        #pet-imgs-list .pet-img {
            width: 48px;
            height: 48px;
            padding: 0;
        }
        
    #pet-icon .pet-img {
        position: absolute;
    }
    
#my-house-main {
}

    #pet-detail {
        margin-top: 20px;
    }
    
    #pet-name {
        font-weight: bold;
    }
    
    #pet-detail i {
        margin: 0;
    }
    
    #favorite-hero .exchange-hero img {
        width: 96px;
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    #favorite-hero .growth-hero img {
        width: 96px;
        margin-top: 0;
        margin-bottom: 20px;
    }
    
    #favorite-hero div.en {
        font-size: 20px;
    }
    
    #gods-gacha-icon {
        position: relative;
    }
    
    #gods-gacha-icon img.gr,
    #gods-gacha-icon img.sgr,
    #gods-gacha-icon img.mgr,
    #gods-gacha-icon img.agr {
        position: relative;
        width: 96px;
        height: 96px;
        object-fit: contain;
        margin: 0 0 25px 0;
        z-index: 25;
    }
    
    #raid-boss-result p:first-child {
        font-size: 12px;
    }
    
    #raid-boss-result p {
        margin-bottom: 10px;
    }
    
    #raid-boss-result p:last-child {
        margin-bottom: 0;
    }
    
    #raid-boss-result .max-damage {
        font-size: 24px;
    }
    
    .en .small {
        font-size: 15px;
    }

#housebattle {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-user-drag: none;
    user-drag: none;
    touch-action: manipulation;
}

    a#housebattle-battle-restart {
        display: inline-block;
        margin-top: 15px;
        font-size: 12px;
        color: #fff;
    }
    
    a#housebattle-battle-restart i {
        font-size: 14px;
        color: #fff;
    }
    
    a#housebattle-battle-restart:hover,
    a#housebattle-battle-restart:hover i {
        color: #ddd !important;
    }
    
#raid-boss-icon-left,
#raid-boss-icon-right {
    position: relative;
    display: inline-block;
    width: 50%;
    font-size: 12px;
}

    #raid-boss-image {
        width: 300px;
        height: auto;
        margin: -100px -50px -30px -50px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    .endless-battle #raid-boss-image {
        filter: contrast(2) hue-rotate(180deg);
    }
    
    #raid-boss-icon-right span {
        display: block;
    }
    
    #raid-boss-icon-right span.hero-1 {
        margin-left: -200px;
        margin-right: -100px;
    }
    
    #raid-boss-icon-right span.hero-2 {
        margin-left: -100px;
        margin-right: -50px;
    }
    
    #raid-boss-icon-right span.hero-4 {
        margin-left: 50px;
    }
    
    #raid-boss-icon-right img {
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
        transform: scale(-1, 1);
    }

    #raid-boss-icon-right img.mr.fanime {
        animation: floatAnimationLeft 2s ease-in-out infinite;
    }
    
    #raid-boss-icon-right img {
        width: 110px;
        margin: -70px 0 0 0;
        height: auto;
    }
    
#pet-message,
#raid-boss-message {
    position: relative;
    margin-bottom: 10px;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    box-shadow: 1px 1px 20px rgba(0,0,0,0.2);
    border-radius: 10px;
    font-size: 12px;
    z-index: 2;
    color: #fff;
}

.hero-fukidashi {
    position: absolute;
    width: 100px;
    left: 50%;
    margin-left: -50px;
    font-size: 11px;
    opacity: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    box-shadow: 1px 1px 20px rgba(0,0,0,0.2);
    border-radius: 20px;
    text-align: center;
    pointer-events: none;
    padding: 5px 0;
    z-index: 2;
}

    .hero-fukidashi span {
        display: block;
        padding: 0 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
    .hero-fukidashi .fukidashi-arrow {
        position: absolute;
        left: 0;
        bottom: -20px;
    }
    
.pet-fukidashi {
    position: absolute;
    font-size: 11px;
    opacity: 0;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    border-radius: 20px;
    z-index: 2;
    display: none;
    pointer-events: none;
}

    .pet-fukidashi.now-working,
    .pet-fukidashi.visibility {
        display: block;
    }
    
    #pet-latest-response {
        text-align: center;
    }
    
    /*
    #pet-message > span,
    .pet-fukidashi span {
        display: inline-block;
        margin: 0 auto;
        text-align: left;
    }
    */
    
    .pet-fukidashi .fukidashi-arrow {
        position: absolute;
        left: 0;
        bottom: -20px;
    }
    
    #raid-boss-message .en,
    #pet-message .en {
        font-size: 18px;
    }
    
#pet-command {
    position: absolute;
    right: 20px;
    bottom: 15px;
    font-size: 12px;
}

    .for-mobile #pet-command {
        right: 10px;
        bottom: 5px;
    }
    
    #pet-command .anchor {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 32px;
        height: 32px;
        margin: 5px auto;
        background-image: url(../image/asset/pet/bg_command.png);
        background-size: cover;
        background-position: 50% 50%;
        color: #fff;
    }
    
    #pet-command .anchor.active {
        width: 16px;
        height: 16px;
    }
    
    #pet-command img {
        vertical-align: middle;
        width: 18px;
        height: auto;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    #pet-command .anchor.active img {
        width: 9px;
    }
    
    #pet-command i.icon-primitive-dot {
        position: absolute;
        left: 23px;
        top: 2px;
        color: #e2041b;
    }
    
    #pet-command .anchor.active i.icon-primitive-dot {
        display: none;
    }
    
    
@keyframes petHeartAnimation {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px);
        opacity: 0;
    }
}

@keyframes heartFallAnimation {
    0% {
        transform: translateY(-100px);
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

.pet-heart {
    position: absolute;
    color: #f91880;
    animation: petHeartAnimation 2s ease-in-out;
    z-index: 1;
}

    .pet-heart i {
        font-size: 14px;
    }
    
    .pet-heart i.rainbow {
        font-size: 20px;
    }
    
.star-hover {
    position: absolute;
    color: #F7FF00;
    text-shadow: 0 0 5px #fff;
    animation: petHeartAnimation 2s ease-in-out;
    z-index: 1;
}

    .star-hover i {
        font-size: 16px;
        margin: 0;
    }
    
    .star-hover i.rainbow {
        font-size: 20px;
    }
    
.heart-fall {
    position: absolute;
    color: #f91880;
    animation: heartFallAnimation 2s ease-in-out;
    z-index: 1;
}

    .heart-fall i {
        font-size: 16px;
        margin: 0;
    }
    
    .heart-fall i.rainbow {
        font-size: 20px;
    }
    
.fx {
    position: absolute;
    display: block;
    top: 20px;
    width: 100%;
    height: 150px;
}

    .fx img {
        width: 120px;
        height: auto;
    }

.winner {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    opacity: 1;
    z-index: 3;
}

#jiiya {
    position: absolute;
    width: 12px !important;
    bottom: 3px;
    left: 50%;
    margin-left: -88px;
    z-index: 998;
}

#soran {
    position: absolute;
    width: 12px !important;
    bottom: 13px;
    left: -10px;
    margin-left: -20px;
    z-index: 998;
}

#spirit {
    position: absolute;
    width: 24px !important;
    bottom: 15px;
    left: 50%;
    margin-left: -106px;
    z-index: 999;
}

#world-hero-spark.max {
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
    background-size: 1200% 100%;
    animation: rainbow-progress 20s linear infinite;
}

.world-boss-icon,
.world-hero-icon {
    float: left;
}

    .world-boss-icon img,
    .world-hero-icon img {
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    .world-hero-icon img {
        margin-top: 5px;
        margin-right: 14px;
    }
    
    .duelystter-info .battle-img-container {
        float: left;
    }
    
    .duelystter-info .battle-img-container img {
        width: 110px !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        margin-top: -40px !important;
        margin-bottom: -40px !important;
    }
    
    .world-hero-icon .favorite-summon-icon img {
        width: 82px;
        margin-top: -40px;
        margin-bottom: -30px;
        margin-right: -10px;
        margin-left: -22px;
    }
    
.line-fukidashi {
    position: relative;
    text-align: left;
    padding: 10px;
    color: #fff;
    background-color: rgba(0,0,0,0.6) !important;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    border-radius: 0 10px 10px 10px;
    font-size: 12px;
    z-index: 3;
}

    .dark-mode .line-fukidashi {
        background-color: rgba(0,0,0,0.7) !important;
    }
    
    .line-fukidashi + .line-fukidashi {
        margin-top: 10px;
    }
    
    .line-fukidashi.right {
        border-radius: 10px 0 10px 10px;
        margin-left: 30px;
    }

    .line-fukidashi img {
        margin-top: -2px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }

.world-boss-comment-log-more {
    display: block;
    text-align: center;
    margin: 5px 0;
}

#world-boss-comment-log {
    display: block;
    overflow-y: scroll;
    height: 20em;
}

    #world-boss-comment-log div {
        border-bottom: 1px solid #555;
        padding-bottom: 10px;
        margin: 10px 0;
    }
    
    #world-boss-comment-log div:first-child {
        margin-top: 0;
    }
    
.world-boss-hero-comment {
    margin-top: 5px;
    padding: 10px;
    color: #fff;
    background-color: rgba(0,0,0,0.7);
    border-radius: 0 20px 20px 20px;
    font-size: 12px;
}

    .world-boss-hero-comment.information a {
        padding: 0 !important;
    }
    
    .world-boss-comment a:hover,
    .world-boss-comment .anchor:hover,
    .world-boss-hero-comment a:hover,
    .world-boss-hero-comment .anchor:hover,
    .world-boss-comment a:hover i,
    .world-boss-hero-comment a:hover i,
    .world-boss-hero-comment .anchor:hover i {
        color: #e0e0e0 !important;
    }
    
    .world-boss-hero-comment img {
        margin-top: -2px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }

.pet-snack-section {
    margin: 10px 0;
    align-items: center;
}

    .pet-snack-section.flexbox {
        padding: 10px 5px;
        border-radius: 10px;
        background-repeat: no-repeat;
        background-image: url(../image/asset/bg_t.jpg);
        background-color: #333;
        background-size: cover;
        background-position: 50% 0;
        border: 1px solid #000;
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.5);
        cursor: pointer;
    }
    
    .pet-snack-section.flexbox:hover {
        background: linear-gradient(0, #444, #222);
    }
    
    .pet-snack-section.flexbox:active {
        box-shadow: inset 1px 1px 1px rgba(0,0,0,0.8);
    }
    
    #pet-snacks-list.now-working .pet-snack-section.flexbox,
    #pet-snacks-list.now-working .pet-snack-section.flexbox:hover,
    #pet-snacks-list.now-working .pet-snack-section.flexbox:active,
    .pet-snack-section.flexbox.disable,
    .pet-snack-section.flexbox.disable:hover,
    .pet-snack-section.flexbox.disable:active {
        opacity: 0.8;
        box-shadow: none !important;
        background: #111 !important;
        color: #ccc !important;
    }
    
    .pet-snack-section img,
    img.pet-snack {
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }

    .pet-snack-section img {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }
    
    img.pet-snack {
        position: absolute;
        width: 16px;
        height: 16px;
        object-fit: contain;
    }
    
    #pet-snacks-list .pet-snack-section:first-child {
        margin-top: 0;
    }
    
    .pet-snack-section .flex-sub {
    }
    
    .pet-snack-section .flex-main {
        padding-left: 5px;
    }
    
    .pet-snack-section .meta {
        display: block;
        color: #ccc;
        font-size: 11px;
    }

.pet-params-list,
.stat-params-list {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
    font-size: 11px;
}

    .pet-params-list dt,
    .stat-params-list dt {
        width: 25%;
        box-sizing: border-box;
        padding: 5px 0;
    }
    
    .pet-params-list dd,
    .stat-params-list dd {
        width: 25%;
        box-sizing: border-box;
        padding: 5px 0;
    }

    .pet-params-list.full dt,
    .pet-params-list.full dd,
    .stat-params-list.full dt,
    .stat-params-list.full dd,
    .for-mobile .stat-params-list dt,
    .for-mobile .stat-params-list dd {
        width: 50%;
    }
    
#ultimate-rush {
    text-align: center;
    margin: 0 -20px;
    padding: 10px 20px;
    color: #fff;
    background-color: red;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
    background-size: 1200% 100%;
    animation: rainbow-progress 20s linear infinite;
    border-style: solid none;
    border-width: 1px;
    box-shadow: 0 0 5px rgba(255,255,255,0.5) inset;
    font-size: 16px;
}

    .for-mobile #ultimate-rush {
        margin: 0 -10px;
        padding: 10px;
        font-size: 14px;
    }
    
    .for-mobile #ultimate-rush .en span {
        display: block;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 1px;
    }

.scorerank-no {
    margin: 0 0 10px 0;
}

    .rarity + .scorerank-no {
        margin-top: 5px;
    }

#friend-rank {
    font-size: 12px;
}

    #friend-rank i {
        margin: 10px 3px;
        font-size: 24px;
        color: #f91880;
    }
        
    #friend-rank i.deactivate {
        color: #999;
    }
    
        .dark-mode #friend-rank i.deactivate {
            color: #666;
        }
        

.status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-top: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1), inset 0 -10px 30px rgba(255,255,255,0.4), inset 0 -1px 5px rgba(255,255,255,0.4);
    padding: 20px;
    flex-wrap: wrap;
}

    .cat-duelystter .status-container {
        margin: 0 0 20px 0;
        border: 1px solid #161616;
        background-image: url(../image/asset/bg.jpg);
        background-position: 50% 50%;
        background-size: cover;
    }

    .for-mobile .status-container {
        margin-left: 10px;
        margin-right: 10px;
        padding: 10px;
    }
    
    .for-mobile #favorite-hero .status-container {
        margin-left: 0;
        margin-right: 0;
    }
    
    .dark-mode .status-container {
        box-shadow: 0 0 10px rgba(0,0,0,0.3), inset 0 -10px 30px rgba(255,255,255,0.1), inset 0 -1px 5px rgba(255,255,255,0.1);
    }
    
    .for-mobile.cat-duelystter .status-container {
        margin: 0 0 10px 0;
        padding: 10px 0;
    }

.status-item {
    flex-grow: 1;
    text-align: center; 
    line-height: 1;
}

    .status-item.row {
        flex-grow: 0;
        flex-basis: 100%;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #aeaeae;
        box-shadow: 0 1px 0 rgba(255,255,255,0.4);
    }
    
    .status-item.row.row-only {
        border-style: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    .for-mobile .status-item.row {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
        .dark-mode .status-item.row {
            border-bottom-color: #161616;
            box-shadow: 0 1px 0 rgba(255,255,255,0.2);
        }
        
    .status-item .icon-4star1 {
        font-size: 12px;
        color: #ff0;
    }
    
    .heroes .icon-4star1 {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: 36px;
        color: #ff0;
        animation: floatAnimation 2s ease-in-out infinite;
    }
    
    .heroes .food-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -16px 0 0 16px !important;
        animation: floatAnimation 2s ease-in-out infinite;
        z-index: 5;
    }

    .status-item .deactivate {
        color: #999;
    }
    
        .dark-mode .status-item .deactivate {
            color: #666;
        }
        
    .status-item span {
        display: block;
        font-size: 11px;
    }
    
        .for-mobile .status-item span {
            font-size: 10px;
        }
        
    .status-item .score {
        display: inline-block;
        font-size: 20px;
    }
    
        .for-mobile .status-item .score {
            font-size: 18px;
        }
    
    .own .status-item .score {
        color: #ec078a;
    }
    
    .default-mode .own .status-item .score {
        background: linear-gradient(to right, #EC8D00, #F005CC, #8900FE, #F005CC, #FD0100, #EC8D00);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 3s linear infinite;
    }
    
    .status-item span:first-child {
        margin-bottom: 3px;
    }
    
    .status-item span:last-child {
        margin-top: 3px;
    }
    
    .status-item:last-child {
        border-left: 1px solid rgba(255,255,255,0.4);
        box-shadow: -1px 0 0 #aeaeae;
    }
    
        .dark-mode .status-item:last-child {
            border-left: 1px solid rgba(255,255,255,0.2);
            box-shadow: -1px 0 0 #161616;
        }
    
    #favorite-hero .status-item {
        border-left: 1px solid rgba(255,255,255,0.4);
        box-shadow: -1px 0 0 #aeaeae;
    }
    
        .status-item.no-border,
        #favorite-hero .status-item:first-child {
            border-style: none !important;
            box-shadow: none !important;
        }
    
    .cat-duelystter .status-item .score {
        font-size: 16px;
    }
    
        .for-mobile.cat-duelystter .status-item span {
            font-size: 10px;
        }
        
        .for-mobile.cat-duelystter .status-item .score {
            font-size: 15px;
        }
    /*
    .cat-duelystter .status-item:first-child {
        border-style: none;
    }
    
    .cat-duelystter .status-item:last-child {
        border-left: 1px solid rgba(255,255,255,0.2);
        box-shadow: -1px 0 0 rgba(0,0,0,0.9);
    }
    */
    .status-item .up {
        color: #ff0;
    }
    
    .status-item .down {
        color: #00AEEF;
    }
    
.rarity {
    display: inline-block;
    min-height: 20px;
    margin-bottom: 5px;
    padding: 2px 10px;
    font-size: 11px;
    color: #fff;
    background: #c6c6c6;
    background: linear-gradient(to right, #c6c6c6, #ADA996);
    box-sizing: border-box;
    border-radius: 10px;
    text-transform: uppercase;
    vertical-align: text-top;
    box-shadow: 0 0 2px rgba(255,255,255,0.1), 1px 1px 2px rgba(255,255,255,0.3), inset 0 1px 10px rgba(0,0,0,0.15);
}

    .library-section .header > .rarity {
        font-size: 12px;
        padding: 4px 20px;
        border-radius: 50px;
    }
    
    .library-section .header .meta .rarity {
        margin: 5px 3px !important;
    }
    
    .rarity img {
        width: auto !important;
        height: 13px !important;
        margin: 0 !important;
        float: none !important;
    }
    
    .rarity i {
        margin: 0;
        font-size: 11px;
        color: #ff0;
    }
    
    .rarity i.deactivate {
        opacity: 0.3;
        color: #fff;
    }
    
    .rarity .en .units {
        font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, Helvetica Neue, Arial, sans-serif;
    }
    
    .dark-mode .rarity {
        box-shadow: 0 0 10px rgba(0,0,0,0.1), inset 0 -100px 0 rgba(0,0,0,0.1), inset 0 -1px 5px rgba(255,255,255,0.3);
    }

    .rarity.sr,
    .rarity.c {
        background: #c2e59c;
        background: linear-gradient(to right, #c2e59c, #64b3f4);
    }
    
    .rarity.ssr,
    .rarity.b {
        background: #F9D423;
        background: linear-gradient(to right, #F9D423, #FF4E50);
    }
    
    .rarity.ur,
    .rarity.a {
        background: #f15f79;
        background: linear-gradient(to right, #f15f79, #b24592);
    }
    
    .rarity.lr,
    .rarity.s {
        background: #7C482E;
        background: linear-gradient(to right, #EAB75C, #7C482E);
    }
    
    .default-mode .rarity.lr,
    .default-mode .rarity.s {
        background: linear-gradient(to right, #7C482E, #EAB75C, #7C482E, #EAB75C, #7C482E);
        background-size: 200% 100%;
        animation: rainbow-progress 10s linear infinite;
    }
    
    .rarity.ar,
    .rarity.ss {
        background: linear-gradient(45deg,
            #5BC2E7,  /* もっと濃いパステルブルー (blue) */
            #C29BFF,  /* もっと濃いパステルバイオレット (violet) */
            #FF8AA0,   /* もっと濃いパステルピンク (red) */
            #FFE87D  /* もっと濃いパステルイエロー (yellow) */
        );
    }
    
    .default-mode .rarity.ar,
    .default-mode .rarity.ss {
        background: linear-gradient(45deg,
            #FF8AA0,  /* もっと濃いパステルピンク (red) */
            #FFA040,  /* もっと濃いパステルオレンジ (orange) */
            #FFE87D,  /* もっと濃いパステルイエロー (yellow) */
            #63D963,  /* もっと濃いパステルグリーン (green) */
            #5BC2E7,  /* もっと濃いパステルブルー (blue) */
            #B567D4,  /* もっと濃いパステルインディゴ (indigo) */
            #C29BFF,  /* もっと濃いパステルバイオレット (violet) */
            #B567D4,  /* もっと濃いパステルインディゴ (indigo) */
            #5BC2E7,  /* もっと濃いパステルブルー (blue) */
            #63D963,  /* もっと濃いパステルグリーン (green) */
            #FFE87D,  /* もっと濃いパステルイエロー (yellow) */
            #FFA040,  /* もっと濃いパステルオレンジ (orange) */
            #FF8AA0   /* もっと濃いパステルピンク (red) */
        );
        background-size: 600% 100%;
        animation: rainbow-progress 10s linear infinite;
    }
    
    /*
    .rarity.wr {
        background: #5D26C1;
        background: linear-gradient(45deg, #FC5C7D, #6A82FB, #4b134f, #c94b4b, #FC5C7D);
        background-size: 600% 100%;
        animation: rainbow-progress 10s linear infinite !important;
    }
    */
    
    .rarity.event-attack {
        background: linear-gradient(to right, #F49AC1, #EC008C, #F49AC1, #EC008C, #F49AC1);
    }
    
    .default-mode .rarity.event-attack {
        background-size: 200% 100%;
        animation: rainbow-progress 10s linear infinite !important;
    }
    
    .rarity .dmg-rank {
        width: auto;
        height: 25px;
        margin-top: -1px;
        margin-left: -12px;
        margin-right: -4px !important;
    }
    
    .for-mobile .rarity .dmg-rank {
        height: 21px;
        margin-top: -1px;
        margin-left: -12px;
        margin-right: -4px !important;
    }

    .rarity.pickup {
        background: #FC5C7D;
        background: -webkit-linear-gradient(to right, #FC5C7D, #6A82FB);
        background: linear-gradient(to right, #FC5C7D, #6A82FB);
    }
    
    .rarity.enable-pet {
        background: #FC5C7D;
        background: -webkit-linear-gradient(to right, #FC5C7D, #6A82FB);
        background: linear-gradient(to right, #ffcc33, #ED8F03);
    }
    
    @keyframes gradientAnimation {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    .wow {
        color: #ec078a;
    }
    
    .rarity .wow {
        color: #ff0;
    }
    
    .default-mode .wow {
        background: linear-gradient(to right, #EC8D00, #F005CC, #8900FE, #F005CC, #FD0100, #EC8D00);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 3s linear infinite;
    }
    
    .default-mode .rarity .wow {
        background: linear-gradient(to right, #f7ff00, #f7ff00, #F005CC, #f7ff00, #f7ff00);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 3s linear infinite;
    }

    .cool {
        color: #7C482E;
    }
    
    .dark-mode .cool {
        color: #EAB75C;
    }
    
    .default-mode .cool {
        background: linear-gradient(to right, #111, #111, #B0A592, #111, #111);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 3s linear infinite;
    }
    
    .dark-mode.default-mode  .cool {
        background: linear-gradient(to right, #fff, #fff, #B0A592, #fff, #fff);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 200% 100%;
        animation: gradientAnimation 3s linear infinite;
    }

    .paused {
        animation-play-state: paused !important;
    }
    
.record_rate {
    margin: 3px 0 0 0 !important;
}

.score {
    display: block;
    /*color: #2193b0;*/
    line-height: 1.2;
}

    .score span {
        font-size: 20px;
    }

img.ui-icon {
    width: 16px !important;
    height: auto !important;
    object-fit: contain;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
    margin-right: 2px !important;
}

    .cat-duelystter img.ui-icon {
        image-rendering: auto;
    }
    
    .bonus .text img.ui-icon {
        margin-left: 4px !important;
    }
    
    .get_share_point img.ui-icon {
        margin-right: 4px !important;
        width: 12px !important;
    }
    
    .rarity img.ui-icon {
        margin-top: 1px !important;
        margin-right: 4px !important;
        width: 12px !important;
    }
    
.ui-list ul > li {
    font-size: 11px;
    text-align: center;
}

    .ui-list.links-list ul > li strong {
        display: none;
        font-weight: normal;
    }
    
    .ui-list img.ui-icon {
        margin: 0 10px !important;
        filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.3));
    }

    .ui-list a:hover img.ui-icon,
    .ui-list .anchor:hover img.ui-icon {
        filter: drop-shadow(0 0 3px rgba(0,0,0,0.5));
    }

    .dark-mode .ui-list a:hover img.ui-icon,
    .dark-mode .ui-list .anchor:hover img.ui-icon {
        filter: drop-shadow(0 0 3px rgba(255,255,255,0.7));
    }

.stone-count-info {
    display: block;
    font-size: 11px !important;
    white-space: nowrap;
}

    h4 img.ui-icon,
    .stone-count-info img.ui-icon {
        width: 12px !important;
    }
    
.bonus {
    display: block;
    font-size: 12px;
    margin: 0 -10px;
    padding: 0 60px 10px 60px;
}

    .for-mobile .bonus {
        padding: 0 20px 10px 20px;
    }
    
    .bonus .text {
        display: block;
        margin-top: 5px;
        text-align: left;
    }
    
.bonus-total {
    display: block;
    font-size: 11px;
    margin: -5px -10px 10px -10px;
    padding: 0 60px 10px 60px;
    border-bottom: 1px solid #aeaeae;
    box-shadow: 0 1px 0 rgba(255,255,255,0.7);
    text-align: left;
}

    .dark-mode .bonus-total {
        border-color: #161616;
        box-shadow: 0 1px 0 rgba(255,255,255,0.2);
    }
    
    .for-mobile .bonus-total {
        padding: 0 20px 10px 20px;
    }
    
    .bonus-total strong {
        font-size: 11px;
        font-weight: normal;
        color: #588528;
    }
    
    .dark-mode .bonus-total strong {
        color: #8FC63D;
    }
    
.success .continue_post {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
}

    .success .continue_post .button-outline {
        display: block;
    }
    
#activities-list {
    margin: 0 -20px;
    padding: 0 20px;
}

    .for-mobile #activities-list {
        margin: 0 -10px;
        padding: 0 10px;
    }

.for-mobile .gacha-list {
    overflow: hidden;
    margin: 0 -10px;
}

.gacha-list .library-section {
    opacity: 0;
}

.library-section {
}

    .library-section .body.detail {
        margin-top: 10px;
        font-size: 12px;
    }
    
    .library-section .body.detail .no-anchor {
        color: #00aeef;
    }
    
    .library-section .body.detail > span {
        display: inline-block;
        vertical-align: top;
    }
    
    .library-section .body.detail > span:first-child {
        width: 35%;
    }
    
    .library-section .body.detail > span:nth-child(2) {
        width: 35%;
    }
    
        .for-mobile .library-section .body.detail > span:first-child {
            width: 42%
        }
        
        .for-mobile .library-section .body.detail > span:nth-child(2) {
            width: 58%;
        }
        
    .library-section .body.detail .action {
        width: 30%;
        white-space: nowrap;
    }
    
        .for-mobile .library-section .body.detail .action {
            width: auto;
            display: block;
            margin: 10px 0 20px 0;
        }
        
    .library-section .body.detail > span:last-child {
        margin-right: 0;
    }
    
    .library-section .body.detail .note {
        font-size: 12px;
        display: block;
    }
    
    .library-section .body.detail .en {
        font-size: 20px;
        color: #4F483B;
    }
    
        .library-section .body.detail .en .note {
            display: inline;
            font-size: 11px;
        }
        
        .dark-mode .library-section .body.detail .en {
            color: inherit;
        }
        
    .library-section .body.detail .en + .note {
        font-size: 11px;
        margin-top: 2px;
    }
    
    .library-section .body.detail .action > span {
        display: block;
        margin: 5px 0;
    }
    
        .library-section .body.detail .action > span:first-child {
            margin-top: 0;
        }
        
        .for-mobile .library-section .body.detail .action {
            display: flex;
            align-items: top;
            justify-content: left;
            margin-right: -20px;
        }
    
        .for-mobile .library-section .body.detail .action > span {
            margin: 0 13px 0 0;
        }
    
        .for-mobile .library-section .body.detail .action > span:last-child {
            margin-right: 0;
        }
    
.comment-section,
.activity-section,
.category-section,
.please-section {
    margin: 20px -20px;
    padding: 20px 80px 0 80px;
    border-color: #eff1f5;
    border-top-style: solid;
    border-width: 1px;
}

    .battle-record + #comments-list > ul .comment-section:first-child {
        border-top-style: none;
    }
    
    #activities-list .activity-section:first-child,
    .so-far + .comment-section {
        margin-top: 0;
    }
    
    .activity-section.abbr-activity-section {
        border-top-style: none;
        margin-top: 5px;
        margin-bottom: 5px;
        padding-top: 0;
        padding-left: 120px;
    }
    
        .for-mobile .activity-section.abbr-activity-section {
            border-top-style: none;
            margin-top: 5px;
            margin-bottom: 5px;
            padding-top: 0;
            padding-left: 50px;
        }
    
    section > .comments-list:first-child .comment-section:first-child {
        border-top-style: none;
        padding-top: 0;
    }
    
        .cat-memoriastter section > .comments-list:first-child .comment-section:first-child {
            box-shadow: none;
            padding-bottom: 40px;
        }
        
        .for-mobile.cat-memoriastter section > .comments-list:first-child .comment-section:first-child {
            padding-bottom: 20px;
        }
        
    .comments-list .comment-section.pin:first-child + .comment-section {
        border-top-width: 4px;
    }
    
    .for-tablet .comment-section,
    .for-tablet .category-section,
    .for-tablet .please-section {
        padding: 20px 40px 0 40px;
    }
    
    .for-mobile .comment-section,
    .for-mobile .category-section,
    .for-mobile .activity-section,
    .for-mobile .please-section {
        margin: 10px -10px;
        padding: 10px 10px 0 10px;
    }

    .ad-section + .comment-section {
        margin-top: 0;
    }
    
    footer .category-section,
    footer .activity-section {
        margin: 20px 0;
        padding: 0;
        border-style: none;
    }
    
    .comment-section .comment-section {
        margin: 20px 0;
        padding: 0;
        border-style: none;
        box-shadow: none !important;
    }

        .for-mobile .comment-section .comment-section {
            margin: 10px 0;
        }
        
        .cat-memoriastter .comment-section .comment-section {
            box-shadow: none;
        }
        
     .comment-section-inner {
        position: relative;
     }
     
    .comment-section.has-child .comment-section-inner::after {
        position: absolute;
        top: 0;
        left: 16px;
        display: block;
        content: "";
        height: 100%;
        width: 2px;
        background-color: #cfd9de;
        z-index: 1;
    }
    
        .comment-section.has-child .comment-section-inner.last-child::after {
            background-color: #fff !important;
            z-index: 2;
        }
        
        .for-mobile .comment-section.has-child .comment-section-inner::after {
            left: 24px;
        }
        
        .dark-mode .comment-section.has-child .comment-section-inner::after {
            background-color: #33404d;
        }

        .dark-mode .comment-section.has-child .comment-section-inner.last-child::after {
            background-color: #191921 !important;
        }
        
        .cat-memoriastter .comment-section.has-child .comment-section-inner::after {
            background-color: transparent;
        }
        
        .cat-memoriastter .comment-section.has-child .comment-section-inner::after,
        .cat-straightline-bookmark .comment-section.has-child .comment-section-inner::after {
            background-color: transparent;
        }

        .cat-memoriastter .comment-section.has-child .comment-section-inner.last-child::after {
            background-color: transparent !important;
        }
        
        .cat-straightline-bookmark .comment-section.has-child .comment-section-inner.last-child::after {
            background-color: #0e0e0e !important;
        }
        
    .comment-section .option,
    .category-section .option {
        float: right;
    }
    
    .comment-section .option {
        margin-right: -0.3em;
    }

    .comment-section .group-name,
    .please-section .group-name {
        font-size: 13px;
    }
    
    .comment-section .group-name,
    .comment-section .header,
    .form-section .header,
    .comment-section .body,
    .form-section .body,
    .comment-section .footer,
    .please-section .group-name,
    .please-section .header,
    .please-section .body {
        margin-left: 50px;
    }
    
        .for-mobile.cat-memoriastter .form-section .body,
        .for-mobile#comment_form.cat-memoriastter .form-section .body,
        .for-mobile#comment_form.cat-haikuu .form-section .body,
        .for-mobile.cat-handwritter .form-section .body,
        .for-mobile#comment_form.cat-illustratter .form-section .body {
            margin-left: 20px;
        }

    .comment-section .group-name {
        margin-bottom: 5px;
    }
    
        .for-mobile .comment-section .group-name {
            margin-bottom: 3px;
        }
        
    .comment-section .header,
    .comment-section .body,
    .comment-section .footer,
    .form-section .body {
        margin-right: 50px;
    }
    
    .please-section .header,
    .please-section .body,
    .please-section .footer {
        margin-right: 0;
    }
        .for-mobile .comment-section .header,
        .for-mobile .comment-section .body,
        .for-mobile .form-section .body,
        .for-mobile .please-section .header,
        .for-mobile .please-section .body {
            margin-right: 20px;
        }
        
        .for-mobile .comment-section .footer {
            margin-right: 10px;
        }
        
            .for-mobile .library-section.comment-section .footer {
                margin-right: 20px;
            }
            
        .for-mobile .hero-section.comment-section .body {
            margin-left: 0;
            margin-right: 0;
        }
        
        .please-section {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding-bottom: 20px;
            background-color: #fafafa;
        }
        
            .dark-mode .please-section {
                background-color: transparent;
            }
            
            .for-mobile .please-section {
                padding-bottom: 10px;
            }
            
        .please-section .icon {
            background-color: transparent;
        }
        
        .please-section .body {
            margin-top: 3px;
            font-size: 12px;
        }
        
        .please-section .body p {
            margin-bottom: 10px;
        }
        
        .please-section .body p:last-child {
            margin-bottom: 0;
        }
        
    .comment-section .footer {
        margin-top: 10px;
        margin-bottom: -3px;
    }
    
        .for-mobile .comment-section .footer {
            margin-bottom: 0;
        }
    
    .comment-section .icon-square-plus {
        display: none;
    }

    .comment-section.collapse .icon-square-minus {
        display: none;
    }

    .comment-section.collapse .icon-square-plus {
        display: inline-block;
    }

    ul > .comment-section:first-of-type,
    ul > .category-section:first-of-type {
        margin-top: 0;
    }
    
    #comments-list .comment-section:last-of-type,
    #categories-list .category-section:last-of-type,
    #activities-list .activity-section:last-of-type {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .cat-memoriastter #comments-list .comment-section:last-of-type {
        padding-bottom: 20px;
        margin-bottom: 0;
    }
    
        .for-mobile.cat-memoriastter #comments-list .comment-section:last-of-type {
            padding-bottom: 10px;
        }
        
    .category-section .header,
    .category-section .footer,
    .category-section .option {
        display: inline-block;
        vertical-align: middle;
    }
    
    .category-section .header {
        width: 60%;
    }
    
        .category-section .header.attention {
            width: 90%;
            font-weight: normal;
        }
        
    .category-section .footer {
        width: 30%;
        text-align: right;
    }
    
        footer .category-section .footer {
            width: 40%;
        }
        
    .category-section .option {
        float: none;
        width: 10%;
        text-align: right;
    }
    
    .activity-section .header {
        font-size: 12px;
        margin-left: 35px;
    }
    
        .for-mobile .activity-section .header {
            margin-left: 45px;
        }
        
    .activity-section .header i {
        font-size: 13px;
    }
    
        .activity-section .header a,
        .activity-section .header span {
            margin-right: 0.5em;
        }
        
    .activity-section .fukidashi {
        display: inline-block;
        background-color: rgba(0,0,0,0.04);
        padding: 5px 10px;
        border-radius: 0 50px 50px 50px;
        color: #666;
    }
    
        .dark-mode .activity-section .fukidashi {
            color: #bdbdc4;
            background-color: rgba(255,255,255,0.08);
        }
        
    .activity-section .date {
    }
    
    .activity-section .icon i {
        margin: 0;
    }
    
    .activity-section .fukidashi i.icon-heart {
        margin: 0;
        color: #f91880;
    }

    .activity-section .fukidashi i.icon-heart_fill {
        color: #f91880;
    }

    .activity-section .overflow-hidden .note {
        display: block;
        font-size: 12px;
        margin-top: 5px;
    }
    
    .activity-section .overflow-hidden .note i {
        font-size: 12px;
    }
        .activity-section .overflow-hidden .note a {
            color: #999;
        }
    
    .comment-section.hero-section {
        position: relative;
        text-align: center;
        /*color: #4F483B;*/
        margin-top: 0;
        margin-bottom: 0;
        padding: 20px 40px;
        background-image: url(../image/asset/bg_w.jpg);
        background-size: cover;
        background-position: 50% 50%;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        margin-bottom: -1px;
    }
    
    .comment-section.hero-section .header {
        margin: 0;
    }
    
        .for-mobile .comment-section.hero-section .header {
            margin: 0;
        }
        
    .comment-section.hero-section .heroes + .header {
        margin: 20px 0 0 0;
    }
    
        .for-mobile .comment-section.hero-section .heroes + .header {
            margin: 10px 0 0 0;
        }
        
    .comment-section.hero-section .header .meta {
        display: block;
    }
    
        .comment-section.hero-section .header .meta span {
            margin-left: 5px;
            margin-right: 5px;
        }
        
    .comment-section.hero-section .body {
        font-size: 13px;
    }
    
    .gacha-list .comment-section.hero-section .body {
        margin: 20px 0 0 0;
    }
    
        .for-mobile .gacha-list .comment-section.hero-section .body {
            margin: 10px 0 0 0;
        }
    
    .comment-section.hero-section .body > span:first-child {
        display: block;
        font-size: 11px;
    }
    
    .comment-section.hero-section .body .score + .en {
        display: block;
        font-size: 11px;
    }
    
    .comment-section.hero-section .body a {
        font-size: 12px;
    }
    
    .comment-section.hero-section .footer {
        position: absolute;
        top: 10px;
        right: 30px;
    }
    
        .comment-section.hero-section .footer i {
            display: inline-block;
            margin: 0;
            padding: 5px 7px;
            border: 1px solid #aeaeae;
            border-radius: 5px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
            box-shadow: 1px 1px 3px rgba(0,0,0,0.1), inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.1);
        }
        
        .dark-mode .comment-section.hero-section .footer i {
            border-color: #161616;
            box-shadow: 1px 1px 3px rgba(0,0,0,0.4), inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.7);
        }
        
        .for-mobile .comment-section.hero-section .footer {
            top: 0px;
            right: -10px;
        }
        
        .comment-section.hero-section .footer > span {
            display: block;
            margin: 10px 0;
        }
        
            .for-mobile .comment-section.hero-section .footer > span {
            }
            
        .comment-section.hero-section .footer > span:first-of-type {
            margin-top: 0;
            margin-left: 0;
        }
        
        .comment-section.hero-section .footer > span:last-of-type {
            margin-bottom: 0;
            margin-right: 0;
        }
        
        .comment-section.hero-section .footer .no-anchor {
            color: #00aeef;
        }
    
    .comment-section.hero-section.sgr {
        background-image: url(../char/bg/98.jpg) !important;
        background-position: 50% 50% !important;
        color: #fff !important;
    }
    
    .comment-section.hero-section.mgr {
        background-image: url(../char/bg/97.jpg) !important;
        background-position: 50% 50% !important;
        color: #fff !important;
    }
    
    .comment-section.hero-section.agr {
        background-image: url(../char/bg/94.jpg) !important;
        background-position: 50% 50% !important;
        color: #fff !important;
    }
    
    .comment-section.hero-section.sgr .note,
    .comment-section.hero-section.mgr .note,
    .comment-section.hero-section.agr .note {
        color: #fff !important;
    }
    
    .dark-mode .comment-section.hero-section {
        background-image: url(../image/asset/bg.jpg);
        color: #fff;
    }
    
    .comment-section.hero-section:nth-child(even) {
        background-image: url(../image/asset/bg_bw.jpg);
        background-position: 50% 100%;
    }
    
        .dark-mode .comment-section.hero-section:nth-child(even) {
            background-image: url(../image/asset/bg_b.jpg);
        }
        
    /*
    .comment-section.hero-section.rank-1,
    .comment-section.hero-section.rank-2,
    .comment-section.hero-section.rank-3,
    .comment-section.hero-section.own {
        color: #fff !important;
    }
    
    .comment-section.hero-section.rank-1 {
        background-image: url(../char/bg/rank_1.jpg) !important;
    }
    
    .comment-section.hero-section.rank-2 {
        background-image: url(../char/bg/rank_2.jpg) !important;
    }
    
    .comment-section.hero-section.rank-3 {
        background-image: url(../char/bg/rank_3.jpg) !important;
    }
    
    .comment-section.hero-section.own {
        background-image: url(../char/bg/98.jpg) !important;
    }
    */
    
    .for-mobile .comment-section.hero-section {
        padding: 10px 20px;
    }
    
    .simple-list .comment-section .icon,
    .simple-list .comment-section .favorite,
    .simple-list .comment-section .reply,
    .for-mobile .simple-list .system-message .user-id {
        display: none;
    }
    
    .simple-list .comment-section .option {
        margin-left: 10px;
    }
    
    .simple-list .comment-section .header,
    .simple-list .comment-section .body,
    .simple-list .comment-section .body *,
    .simple-list .comment-section .footer,
    .simple-list .comment-section .footer .meta,
    .simple-list .comment-section .footer .good,
    .simple-list .comment-section .footer .good-count {
        display: inline;
        margin: 0;
        font-size: 13px;
    }
    
    .simple-list .comment-section .footer .good-count {
        padding: 0 0 0 0.2em;
    }
    
    .simple-list .comment-section .footer .good i {
        font-size: 15px;
    }
    
    .simple-list .comment-section.own-section .footer span.good i.icon-heart {
        color: #555;
    }
    
    .simple-list .comment-section .footer .good .count {
        margin-left: 3px;
    }
    
    .simple-list .comment-section .header .meta span {
        margin: 0;
    }
    
        .simple-list .comment-section .header .meta span:first-child {
            margin-right: 0.5em;
        }
        
    .simple-list .comment-section .footer .date {
        margin-left: 0.1em;
        font-size: 11px;
    }
    
    .simple-list .comment-section .align-right {
        display: block;
    }
    
    .for-mobile .simple-list .system-message .meta,
    .for-mobile .simple-list .system-message .text,
    .for-mobile .simple-list .system-message .text * {
        font-size: 11px;
    }
    
    
    #summons-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        list-style-type: none;
        padding: 0;
        margin: 20px 0;
    }
    
        .for-mobile #summons-list {
            margin: 10px 0;
            grid-template-columns: repeat(2, 1fr);
        }
    
    #summons-list .grid-hr {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    #summons-list .grid-hr .hr {
        flex-grow: 1;
        border-bottom: 1px solid #161616;
        box-shadow: 0 1px 0 rgba(255,255,255,0.2);
    }
    
    #summons-list .grid-hr > span {
        padding-right: 10px;
        position: relative;
        z-index: 1;
        font-size: 11px;
    }
    
        #summons-list .grid-hr span i {
            font-size: 15px;
            margin-right: 10px;
        }
        
    #summons-list .grid-hr > span:last-child {
        padding-right: 0;
        padding-left: 10px;
    }
    
    .gacha-container {
        margin: 0 -20px;
        padding: 20px;
        background-image: url(../char/bg/gacha.jpg);
        background-position: 50% 50%;
        background-size: cover;
        border-width: 1px;
        border-style: solid none;
        border-color: #161616;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    
        .for-mobile .gacha-container {
            margin: 0 -10px;
            padding: 10px;
        }
        
        .gacha-container #summons-list {
            margin: 0;
        }
    
    .summon-section {
        background-image: url(../image/asset/bg_w.jpg);
        background-position: 50% 50%;
        background-size: cover;
        border: 1px solid #aeaeae;
        text-align: center;
        border-radius: 5px;
        padding: 10px;
        box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
    }

    .dark-mode .summon-section {
        border-color: #161616;
        background-image: url(../image/asset/bg.jpg);
        box-shadow: inset 1px 1px 0 rgba(255,255,255,0.2);
    }
    
    .summon-section.sgr {
        background-image: url(../char/bg/98.jpg) !important;
        background-position: 50% 50% !important;
    }
    
    .summon-section.mgr {
        background-image: url(../char/bg/97.jpg) !important;
        background-position: 50% 50% !important;
    }
    
    .summon-section.sgr .meta,
    .summon-section.mgr .meta {
        color: #fff !important;
    }
    
    .summon-section .heroes {
        margin-bottom: 10px;
    }
    
    .summon-section .header .meta {
        display: block;
        font-size: 11px;
    }
    
.links-list {
    background-color: rgba(255,255,255,0.95);
    font-size: 14px;
}

    .cat-memoriastter .links-list,
    .cat-memoriastter #search-form-section {
        background-color: transparent;
        background-image: url(../image/asset/bg_w.jpg);
        background-size: cover;
        background-position: 50% 50%;
        border-top-style: solid;
        border-top-width: 1px;
    }
    
    .cat-memoriastter.dark-mode .links-list,
    .cat-memoriastter.dark-mode #search-form-section {
        background-image: url(../image/asset/bg.jpg);
    }
    
    section > .links-list:first-of-type {
        margin-top: -20px !important;
        border-radius: 10px 10px 0 0;
    }
    
        .for-mobile section > .links-list:first-of-type {
            margin-top: -10px !important;
            border-radius: 0;
        }
    
    section > .links-list.banner:first-of-type {
        margin-top: 0 !important;
        
    }
    
    #guardian-section .links-list {
        margin: 0 -20px;
    }
    
    .for-mobile .links-list,
    .for-mobile #guardian-section .links-list {
        margin: 0 -10px;
        font-size: 13px;
    }
    
        .for-mobile .banner.links-list {
            margin: 0;
        }
        
    .dark-mode .links-list {
        background-color: #191921;
    }
    
    .cat-straightline-bookmark .links-list {
        background-color: #0e0e0e;
    }
    
    .links-list .hr {
        color: #e3e6ec;
    }
    
        .dark-mode .links-list .hr {
            color: #2f2f3a;
        }
    
    .links-list.sticky {
        /*
        position: -webkit-sticky;
        position: sticky;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        top: 0;
        z-index: 99998;
        */
        border-bottom: 1px solid #eff1f5;
        margin: 0 -20px -1px -20px;
    }
    
        .for-mobile .links-list.sticky {
            position: static;
            margin: 0 -10px -1px -10px;
        }
    
    .links-list.top3-of-the-day,
    .links-list.secondary,
    .cat-memoriastter #search-form-section + .links-list,
    .duelyst-description + .links-list,
    .links-list.sticky + .links-list {
        margin: 0 -20px;
        border-bottom: 1px solid #eff1f5;
    }
    
    .links-list.top3-of-the-day + .links-list {
        margin: 0 -20px;
    }
    
        .for-mobile .links-list.top3-of-the-day + .links-list {
            margin: 0 -10px;
        }
        
        .links-list.top3-of-the-day {
            color: #4F483B;
            padding: 10px;
            font-size: 11px;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        
            .links-list.top3-of-the-day a {
                margin: 0 !important;
                padding: 0 !important;
            }
            
            .links-list.top3-of-the-day img {
                vertical-align: bottom;
            }
            
            .links-list.top3-of-the-day i {
                font-size: 13px;
            }
            
        .links-list.top3-of-the-day,
        .links-list.secondary,
        .duelyst-description + .links-list,
        #favorite-hero + .links-list,
        .cat-memoriastter #search-form-section + .links-list,
        #guardian-section .links-list {
            border-bottom-style: none;
            box-shadow: none;
            background-image: url(../image/asset/bg_bw.jpg);
        }
        
        .cat-memoriastter .links-list.sticky + .links-list {
            border-top-style: none;
            box-shadow: none;
            background-image: url(../image/asset/bg_bw.jpg);
        }
        
        .links-list.top3-of-the-day,
        .links-list.secondary,
        .duelyst-description + .links-list,
        #favorite-hero + .links-list,
        .cat-memoriastter #search-form-section + .links-list,
        .cat-memoriastter .links-list.sticky + .links-list,
        #guardian-section .links-list {
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.3) !important;
        }
        
        .dark-mode .links-list.top3-of-the-day,
        .dark-mode .links-list.secondary,
        .dark-mode .duelyst-description + .links-list,
        .dark-mode #favorite-hero + .links-list,
        .cat-memoriastter.dark-mode #search-form-section + .links-list,
        .cat-memoriastter.dark-mode .links-list.sticky + .links-list,
        .dark-mode  #guardian-section .links-list {
            background-image: url(../image/asset/bg_b.jpg);
            color: #fff;
        }
        
        .for-mobile .links-list.top3-of-the-day,
        .for-mobile .links-list.secondary,
        .for-mobile .duelyst-description + .links-list,
        .for-mobile #favorite-hero + .links-list,
        .for-mobile.cat-memoriastter #search-form-section + .links-list,
        .for-mobile .links-list.sticky + .links-list {
            margin: 0 -10px;
        }
    
    .links-list ul.flex {
        display: flex;
        justify-content: flex-start;
        text-align: center;
    }
    
    .links-list ul.flex.left {
        text-align: left;
        padding-left: 10px;
    }
    
        .for-mobile .links-list ul.flex.left {
            padding-left: 0;
        }
        
    .links-list ul.flex li {
        flex-grow: 1;
    }
    
    #category-titles.links-list {
        display: none;
    }
    
        .for-tablet #category-titles.links-list {
            display: block;
        }
        
    .form-section + .links-list {
        border-top: 1px solid #eff1f5;
    }
    
    .links-list ul.list {
        padding: 0;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .banner.links-list ul.list {
        overflow: hidden !important;
    }
    
    .for-tablet .links-list ul.list::-webkit-scrollbar {
        display: none;
    }
    
    .links-list ul.list h3 {
        font-weight: normal;
    }
    
    .links-list ul.list li {
        display: inline-block;
    }
    
    .banner.links-list ul.list li .icon {
        display: inline-block;
        margin: 0;
        padding: 5px 10px;
        background-color: transparent;
    }
    
    .links-list ul.flex li a,
    .links-list ul.flex li .anchor {
        display: block;
        padding-top: 15px;
    }
    
        .for-mobile .links-list ul.flex li a,
        .for-mobile .links-list ul.flex li .anchor {
            padding-top: 8px;
        }
            
    .cat-memoriastter .links-list ul.flex > li > a,
    .cat-memoriastter .links-list ul.flex > li > .anchor,
    .cat-memoriastter .links-list ul.flex > li > .dropdown .anchor,
    #local-nav.links-list ul.flex > li > a,
    #local-nav.links-list ul.flex > li > .anchor,
    #local-nav.links-list ul.flex > li > .dropdown .anchor {
        display: inline-block;
        padding-top: 15px;
        padding-left: 10px;
        padding-right: 10px;
    }
    
        .for-mobile.cat-memoriastter  .links-list ul.flex > li > a,
        .for-mobile.cat-memoriastter  .links-list ul.flex > li > .anchor,
        .for-mobile.cat-memoriastter  .links-list ul.flex > li > .dropdown .anchor,
        .for-mobile  #local-nav.links-list ul.flex > li > a,
        .for-mobile  #local-nav.links-list ul.flex > li > .anchor,
        .for-mobile  #local-nav.links-list ul.flex > li > .dropdown .anchor {
            padding-top: 8px;
        }
        
    .links-list ul.list li a {
        display: inline-block;
        padding: 15px 20px 0 20px;
    }
    
        .for-mobile .links-list ul.list li a {
            padding: 8px 15px 0 15px;
        }
        
        .links-list ul.flex li a span,
        .links-list ul.flex li .anchor span,
        .links-list ul.list li a span {
            display: inline-block;
        }
        
        .links-list ul.flex li a span::after,
        .links-list ul.flex li .anchor span::after,
        .links-list ul.list li a span::after {
            content: "";
            margin: 0 auto;
            display: block;
            width: auto;
            height: 4px;
            margin-top: 11px;
            border-radius: 2px;
        }
        
            .for-mobile .links-list ul.flex li a span::after,
            .for-mobile .links-list ul.flex li .anchor span::after,
            .for-mobile .links-list ul.list li a span::after {
                margin-top: 4px;
            }
            
        .links-list ul.flex li a.focused span::after,
        .links-list ul.flex li .anchor.focused span::after,
        .links-list ul.list li a.focused span::after {
            background: #636fa4;
            background: -webkit-linear-gradient(to right, #e8cbc0, #636fa4);
            background: linear-gradient(to right, #e8cbc0, #636fa4);
        }
        
        .links-list ul.flex li a.focused span,
        .links-list ul.flex li .anchor.focused span,
        .links-list ul.list li a.focused span {
            color: #2e2e3d;
            font-weight: bold;
        }
        
            .dark-mode .links-list ul.flex li a.focused span,
            .dark-mode .links-list ul.flex li .anchor.focused span,
            .dark-mode .links-list ul.list li a.focused span {
                color: #dfdfea;
            }
            
            .cat-memoriastter .links-list ul.flex li a.focused span,
            .cat-memoriastter .links-list ul.flex li .anchor.focused span,
            .cat-memoriastter .links-list ul.list li a.focused span {
                color: #4F483B;
            }
            
            .cat-memoriastter.dark-mode .links-list ul.flex li a.focused span,
            .cat-memoriastter.dark-mode .links-list ul.flex li .anchor.focused span,
            .cat-memoriastter.dark-mode .links-list ul.list li a.focused span {
                color: #fff;
            }
            
            .cat-straightline-bookmark .links-list ul.flex li a.focused span,
            .cat-straightline-bookmark .links-list ul.flex li .anchor.focused span,
            .cat-straightline-bookmark .links-list ul.list li a.focused span {
                color: #ddd;
            }
            
    .links-list ul.list li:first-child a {
        padding-left: 40px;
    }
    
        .for-mobile .links-list ul.list li:first-child a {
            padding-left: 30px;
        }
        
    .links-list ul.list li:last-child a {
        padding-right: 40px;
    }
    
        .for-mobile .links-list ul.list li:last-child a {
            padding-right: 30px;
        }
    
    .links-list > .dropdown {
        float: right;
    }
    
    .links-list > .dropdown .anchor {
        display: inline-block;
        padding: 15px 20px;
    }
    
        .for-mobile .links-list > .dropdown .anchor {
            padding: 8px 10px;
        }

    .links-list .icon-done,
    .dropdown .icon-done {
        display: none;
    }
    
        .links-list .focused .icon-done,
        .dropdown .focused .icon-done {
            display: inline-block;
        }
    
    .links-list .dropdown li ul .icon-done {
        display: none;
    }
    
        .links-list .dropdown li ul .focused .icon-done {
            display: inline-block;
        }
        
    .links-list i.icon-primitive-dot {
        color: #e2041b;
        margin: -0.8em 0 0 -0.1em;
    }
    
        .links-list.ui-list span + i.icon-primitive-dot {
            margin: -0.8em 0 0 -12px;
        }
        
    .links-list a:hover i.icon-primitive-dot {
        color: #e2041b !important;
    }

.links-list.popular-comments-list {
    margin: 0 -20px;
    padding: 0;
    border-top: 1px solid #eff1f5;
}

    .for-mobile .links-list.popular-comments-list {
        margin: 0 -10px;
        padding: 0;
    }
    
    .links-list.popular-comments-list .en {
        padding: 0 35px;
    }
    
        .for-mobile .links-list.popular-comments-list .en {
            padding: 0 0 0 10px;
        }
        
    .links-list.popular-comments-list .image-container img {
        width: 100px;
        height: auto;
        border-radius: 10px;
        box-shadow: 1px 1px 10px rgba(0,0,0,0.1);
    }
    
    .links-list.popular-comments-list *,
    .for-mobile .links-list.popular-comments-list * {
        margin: 0;
        padding: 0;
    }
    
    .links-list.popular-comments-list li,
    .for-mobile .links-list.popular-comments-list li {
        padding: 10px 5px;
    }
    
    .links-list.popular-comments-list .image-container a {
        margin: 0 !important;
        padding: 0 !important;
    }

    .links-list.popular-comments-list .comment-section {
        border-style: none;
    }
    
#todays-heart {
    font-size: 12px;
    padding: 10px 20px;
    text-align: left;
    border-bottom: 1px solid #eff1f5;
}

    .for-tablet #todays-heart {
        padding: 10px;
        margin: 0;
    }
    
    #todays-heart ul {
        overflow-x: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .for-mobile #todays-heart ul {
        overflow-x: auto;
    }
    
    .for-mobile #todays-heart ul::-webkit-scrollbar {
        display: none;
    }
    
    #todays-heart ul li:last-child {
        color: #999;
    }
    
    #todays-heart .close {
        margin-left: 5px !important;
    }
    
    #todays-heart .heart-count,
    #todays-heart .icon-heart_fill {
        margin: 0;
        color: #f91880;
    }
    
    #todays-heart .icon-heart {
        margin: 0;
    }
    
    #todays-heart .icon-thx_fill {
        color: #f91880;
    }
    
        #todays-heart .note .icon-thx_fill {
            color: inherit;
        }
        
    #todays-heart .heart-count {
        font-size: 10px;
    }
    
        #todays-heart .heart-count strong {
            font-size: 13px;
        }

    #todays-heart .icon {
        position: relative;
        float: none;
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    
        #todays-heart .icon i {
            margin: 0;
            padding: 0;
        }
        
        #todays-heart .icon img {
            width: auto;
            height: 18px;
        }
        
        #todays-heart .icon img.badge {
            position: absolute;
            top: 0;
            left: -3px;
            height: 6px;
            z-index: 2;
        }
        
        #todays-heart .icon.new {
            display: none;
        }
        
        #todays-heart .icon.new.animation {
            display: inline;
        }
        
        #todays-heart .icon.animation img,
        #todays-heart .icon.animation i {
            animation-name: iconAnimation;
            animation-delay: .05s;
            animation-duration: .4s;
            animation-timing-function: ease-out;
            transform-origin: center;
        }
        
        @keyframes iconAnimation {
            0% {
                transform: scale(0.1);
            }
            30% {
                transform: scale(1.3);
            }
            100% {
                transform: scale(1.0);
            }
        }
    
        #todays-heart .icon i.icon-egg,
        #todays-heart .icon i.icon-egg_fill,
        #todays-heart .icon i.icon-hiyoko {
            font-size: 18px;
        }
        
    #todays-heart h3 {
        font-weight: normal;
    }
    
    #todays-heart li {
        display: inline-block;
        margin: 0 5px 0 0;
    }

.online {
    font-size: 12px;
}

    footer .online {
        font-size: 13px;
        margin-bottom: 5px;
    }
    
    .for-mobile footer .online {
        font-size: 12px;
    }
    
#online-user {
    color: #999;
    font-size: 12px;
    margin: 0 -20px;
    padding: 10px 20px;
    text-align: center;
}

    .cat-memoriastter #online-user {
        color: #777;
    }

    .cat-memoriastter.dark-mode #online-user {
        color: #999;
    }

    .for-mobile #online-user {
        margin: 0 -10px;
        padding: 10px;
    }
    
    #online-user + .links-list {
        border-top: none;
    }
    
    #online-user img {
        height: 16px;
        width: auto;
        margin-right: 5px;
    }
    
        .for-mobile #online-user img {
            height: 12px;
        }
    
    .toggle i.icon-primitive-dot {
        color: #31a24c;
        margin-left: 0.3em;
    }
    
.duelyst-description,
#page-description,
#page-filter,
.page-separator {
    color: #999;
    font-size: 13px;
    margin: 0 -20px;
    padding: 10px 20px;
    text-align: center;
    border-top: 1px solid #eff1f5;
}

    #tweet-button + .duelyst-description,
    #tweet-button + #page-filter,
    #tweet-button + .page-separator {
        border-style: none;
    }
    
    #page-description > span span {
        font-size: 11px;
    }
    
    #page-description .dropdown {
        position: absolute;
        right: 20px;
    }
    
        .for-mobile #page-description .dropdown {
            right: 10px;
        }
        
    .duelyst-description {
        color: inherit;
    }
    
    .cat-memoriastter #page-description,
    .cat-memoriastter .page-separator {
        color: #777;
    }
    
    .cat-memoriastter.dark-mode #page-description,
    .cat-memoriastter.dark-mode .page-separator {
        color: #999;
    }
    
    .for-mobile .duelyst-description,
    .for-mobile #page-description,
    .for-mobile #page-filter,
    .for-mobile .page-separator {
        margin: 0 -10px;
        padding: 10px;
    }
    
    .links-list + #page-description,
    .links-list + #page-filter,
    .links-list + .page-separator {
        border-style: none;
    }

.cat-memoriastter #introduction h1 {
    background-image: url(../image/asset/bg_w.jpg);
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

    .dark-mode.cat-memoriastter #introduction h1 {
        background-image: url(../image/asset/bg.jpg);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2) !important;
    }

.duelyst-description,
#page-description.content-description {
    color: inherit;
    padding: 10px 40px;
    background-image: url(../image/asset/bg_w.jpg);
    background-size: cover;
    background-position: 50% 50%;
    border-top: 1px solid #eff1f5;
}

    .battle + .duelyst-description {
        /*
            background-image: url(../image/asset/bg_bw.jpg);
            border-color: #161616;
        */
    }
    
    .dark-mode .duelyst-description,
    .dark-mode #page-description.content-description,
    .dark-mode .battle + .duelyst-description {
        color: #fff;
        background-image: url(../image/asset/bg.jpg);
    }
    
    #page-description.content-description,
    .duelyst-description + .battle,
    .cat-endless-memoriastter .duelyst-description {
        margin-bottom: -1px;
        border-style: solid none;
        border-width: 1px;
    }
    
    .duelyst-description {
        padding: 10px;
        border-top-style: solid;
        border-top-width: 1px;
    }
    
    .duelyst-description h1,
    .duelyst-description h2,
    .duelyst-description h3,
    .duelyst-description h4,
    #page-description.content-description .header {
        font-weight: normal;
        color: #4F483B;
    }
    
        .dark-mode .duelyst-description h1,
        .dark-mode .duelyst-description h2,
        .dark-mode .duelyst-description h3,
        .dark-mode #page-description.content-description .header {
            color: #fff;
        }
        
    .duelyst-description h1 {
        font-size: 24px;
        text-transform: uppercase;
        line-height: 1.3;
    }
    
    .duelyst-description h2 {
        font-size: 16px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .duelyst-description h3 {
        font-size: 11px;
    }
    
    .duelyst-description h4 {
        margin-top: 4px;
        font-size: 11px;
    }
    
        .duelyst-description h4 i {
            font-size: 14px;
        }
    
    #page-description.content-description .form-section {
        margin-top: 10px;
        text-align: left;
    }
    
    .for-mobile #page-description.content-description {
        padding: 10px;
    }
    
    #page-description.content-description .header {
        padding-bottom: 10px;
        margin-bottom: 20px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }
    
        .for-mobile #page-description.content-description .header {
            margin-bottom: 10px;
        }
        
    #page-description.content-description h1 {
        font-size: 16px;
        font-weight: normal;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    #page-description.content-description h2 {
        font-weight: normal;
        font-size: 12px;
    }
    
    #page-description.content-description .style {
        text-align: left;
    }
    
    #idlebattle-status,
    #originbattle-status {
        display: flex;
        justify-content: space-between;
    }
    
    #idlebattle-status .ui-icon {
        width: 12px !important;
    }
    
    #originbattle-status .ui-icon {
        width: 12px !important;
        height: 12px !important;
    }
    
    #idlebattle-status div,
    #originbattle-status div {
        flex: 1;
        text-align: center;
    }

    #idlebattle-status h5,
    #originbattle-status h5 {
        font-weight: normal;
        font-size: 11px;
    }

    #idlebattle-status .en {
        font-size: 13px;
    }

    #originbattle-status .en {
        font-size: 11px;
    }
    
.hr-separator {
	overflow: hidden;
}

.hr-separator span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}

    .for-mobile .hr-separator span {
    	position: static;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    
.hr-separator span::before,
.hr-separator span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: #e8e8e8;
}

    .for-mobile .hr-separator span::before,
    .for-mobile .hr-separator span::after {
        display: none;
    }
    
.hr-separator span::before {
	right: 100%;
}

.hr-separator span::after {
	left: 100%;
}

#early-reply-end {
    text-align: center;
    margin-bottom: 10px;
}

.form-anchor {
    margin: 0 -20px;
    padding: 20px;
    border-top: 1px solid #eff1f5;
}

    #global-nav .form-anchor {
        margin: 0;
        border-top-style: none;
    }
    
    section .form-anchor:first-child {
        padding-top: 0;
        border-style: none;
    }
    
    .cat-memoriastter .form-anchor {
        border-top-style: solid !important;
        background-color: transparent;
    }
    
        .cat-memoriastter.for-mobile .form-anchor {
            border-top-style: none !important;
            box-shadow: none;
        }
        
        .cat-memoriastter.for-mobile.dark-mode .form-anchor#tweet-button {
            border-top-style: none !important;
            box-shadow: none;
        }
        
    .cat-memoriastter .links-list + .form-anchor {
        border-top-style: solid;
    }
    
    .cat-straightline-bookmark .form-anchor {
        background-color: #0e0e0e;
    }
    
    .links-list + .form-anchor {
        border-style: none;
    }
    
    #page-header + .form-anchor,
    #category-header + .form-anchor,
    .comments-list + .form-anchor {
        border-style: none;
        padding-top: 0;
    }
    
    .cat-memoriastter .comments-list + .form-anchor {
        padding: 20px;
    }
    
    .for-mobile .form-anchor,
    .for-mobile.cat-memoriastter .comments-list + .form-anchor {
        margin: 0 -10px;
        padding: 10px;
    }
    
    .form-anchor.sticky {
        position: -webkit-sticky;
        position: sticky;
        -webkit-backface-visibility:hidden;
        backface-visibility:hidden;
        top: 0;
        z-index: 99998;
        margin: 0 -20px -1px -20px;
        padding-top: 20px;
        border-bottom: 1px solid #eff1f5;
        background-color: rgba(255,255,255,0.95);
    }
    
        .dark-mode .form-anchor.sticky {
            background-color: #191921;
        }
        
        .cat-memoriastter .form-anchor.sticky {
            border-top-style: solid;
            border-top-width: 1px;
            background-image: url(../image/asset/bg_w.jpg);
            background-size: cover;
            background-position: 50% 50%;
        }
        
        .cat-memoriastter.dark-mode .form-anchor.sticky {
            background-image: url(../image/asset/bg.jpg);
        }
        
        .cat-straightline-bookmark .form-anchor.sticky {
            background-color: #0e0e0e;
        }
        
        .for-mobile .form-anchor.sticky {
            padding-top: 10px;
            margin: 0 -10px -1px -10px;
        }
        
        .comments-list + .form-anchor.sticky {
            margin-top: -20px;
        }
        
            .for-mobile .comments-list + .form-anchor.sticky {
                margin-top: -10px;
            }
    
    .form-anchor .button-outline {
        display: block;
    }
    
    .form-anchor-left,
    .form-anchor-center,
    .form-anchor-right {
        display: inline-block;
        width: 50%;
        vertical-align: middle;
    }
    
    .form-anchor-center {
        text-align: center;
        width: 100%;
    }
    
    .form-anchor-right {
        text-align: right;
    }
    
    .form-anchor-left .left,
    .form-anchor-left .right {
        display: inline-block;
    }
    
    .form-anchor-left .left {
        width: 13%;
    }
    
    .form-anchor-left .right {
        width: 87%;
    }
    
    .form-anchor-left input {
        width: auto;
        border-style: none;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        outline: none;
    }
    
    .dark-mode .form-anchor-left input {
        border-style: none;
        background-color: transparent;
        box-shadow: none;
    }

    .cat-straightline-bookmark .form-anchor-left input {
        border-style: none;
        background-color: transparent;
        box-shadow: none;
    }
    
    .form-anchor.duelyst-description,
    .form-anchor.duelyst-description * {
        color: #fff;
    }
    
    .form-anchor.duelyst-description h2 {
        letter-spacing: 0;
        margin-bottom: 5px;
        font-size: 15px;
    }
    
    .form-anchor.duelyst-description p {
        margin-bottom: 10px;
        font-size: 12px;
    }
    
.form-anchor-search {
    background-color: #fff;
    border-radius: 50px;
}

    .dark-mode .form-anchor-search {
        background-color: #191921;
    }
    
    .form-anchor-search .left,
    .form-anchor-search .right {
        display: inline-block;
        vertical-align: middle;
    }
    

    .form-anchor-search .left {
        width: 20%;
        text-align: center;
    }
    
    .form-anchor-search .right {
        width: 80%;
    }
    
    .form-anchor-search i {
        color: #999;
    }
    
    .form-anchor-search input,
    .dark-mode .form-anchor-search input {
        width: auto;
        border-style: none;
        padding: 0;
        background-color: transparent;
        box-shadow: none;
        outline: none;
        padding: 10px 0;
    }
    
.form-section {
    margin: 0 -20px;
    padding: 20px 80px;
    border-top: 1px solid #eff1f5;
}

    .links-list + .form-section {
        border-style: none;
    }
    
    .comments-list + .form-section {
        margin-top: 20px;
    }
    
    section .form-section:first-child {
        padding-top: 0;
        border-style: none;
    }
    
    .for-tablet .form-section {
        padding: 20px 40px;
    }
    
    .for-mobile .form-section {
        margin: 0 -10px;
        padding: 10px;
    }
    
    .comment-section .form-section {
        margin: -20px;
        border-style: none;
    }
    
        .for-mobile .comment-section .form-section {
            margin: -10px;
        }
        
    .comment-section:last-child .form-section {
        margin-bottom: 0;
        border-bottom: 1px solid #eff1f5;
    }
    
    .for-mobile #comments .form-section {
        margin: 0 -10px;
        padding: 10px 10px 0 10px;
        border-top: 1px solid #eff1f5;
    }
    
.form-col {
    margin-bottom: 20px;
    vertical-align: top;
}

    .form-section .form-col:last-child {
        margin-bottom: 0;
    }
    
    .for-tablet .form-col {
        width: auto;
    }
    
    .for-mobile .form-col {
        margin-bottom: 10px;
    }
    
    .form-col.col-50 {
        display: inline-block;
        width: 50%;
    }
    
    .form-col.col-60 {
        display: inline-block;
        width: 60%;
    }
    
    .form-col.col-40 {
        display: inline-block;
        width: 40%;
        padding-left: 10px;
    }
    
    .form-col.col-40 select{
        width: 100%;
    }
    
    .form-col .note {
        font-size: 13px;
    }
    
    .form-col.description {
        background-color: #f9f9f9;
        border: 1px solid #ededed;
        padding: 10px;
        border-radius: 5px;
        color: inherit;
    }
    
        .dark-mode .form-col.description {
            color: #f0f0f0;
            background-color: #24242e;
        }
        
        .cat-memoriastter .form-col.description {
            background-color: rgba(0,0,0,0.05);
        }
        
        .cat-memoriastter.dark-mode .form-col.description {
            color: #f0f0f0;
            background-color: rgba(0,0,0,0.2);
        }
        
        .cat-straightline-bookmark .form-col.description {
            color: #f0f0f0;
            background-color: #242424;
        }
        
    .description ul,
    .form-col ul{
        clear: both;
        padding: 10px 0;
    }
    
    .form-col ul,
    .form-col.description{
        font-size: 13px;
    }
        .for-mobile .description ul,
        .for-mobile .form-col ul{
            padding: 10px;
        }
        
    .description ul li,
    .form-col ul li {
        list-style: circle;
        margin-left: 2em;
        margin-bottom: 0.5em;
    }
    
        .for-mobile .description ul li,
        .for-mobile .form-col ul li {
            margin-left: 1em;
        }
        
    .description ul li:last-child,
    .form-col ul li:last-child {
        margin-bottom: 0;
    }
    
    .form-col dl {
        font-size: 13px;
    }
    
    .form-col dt,
    .form-col dd {
        padding: 3px 0;
    }
    
    .form-col dt {
        float: left;
    }
    
    .form-col dd {
        margin-left: 120px;
    }
    
    .form-col.category-delete {
        text-align: center;
        padding-top: 20px;
        margin: 0 -20px;
        border-top: 1px solid #eff1f5;
    }
    
        .for-mobile .form-col.category-delete {
            margin: 0 -10px;
        }
        
    .form-col.category-delete p {
        margin-bottom: 1em;
    }
    
    .form-col.category-delete p:last-child {
        margin-bottom: 0;
    }
    
.form-header {
    margin-top: 0;
}

.form-footer {
    border-top: 1px solid #eff1f5;
    padding-top: 20px;
    margin-bottom: 0;
}

    .for-mobile .form-footer {
        padding-bottom: 10px;
    }

.form-submit {
    clear:both;
    text-align: right;
    margin-bottom: 20px;
}

    form .form-submit:last-of-type {
        margin-bottom: 0;
    }
    
    .form-submit + h2,
    .form-submit + h2 + ul + h2{
        font-size: 100%;
        margin-bottom: 0;
    }
    
    .form-submit + h2 {
        margin-top: 20px;
    }
    
    .form-submit p:last-child.note {
        font-size: 13px;
        margin-top: 10px;
    }
    
.form-submit .anchor,
.form-submit a {
    font-size: 13px;
    margin-left: 10px;
}

    .form-submit.align-center {
        text-align: center;
    }
    
    .for-mobile .form-submit {
        text-align: center;
        margin-bottom: 10px;
    }
    
    .for-mobile .form-submit .anchor,
    .for-mobile .form-submit a {
        display: block;
        margin: 10px 0 0 0;
    }

#search-form-section form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

    .for-mobile #search-form-section form,
    .guardian-chat-form#search-form-section form {
        flex-wrap: wrap;
    }
    
.search-form-col {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
}

.search-form-col-60 {
    flex: 3;
}

    .for-mobile .search-form-col-60,
    ..guardian-chat-form .search-form-col-60 {
        flex: 1 1 100%;
        width: 100%;
    }

.search-form-col-40 {
    flex: 0 0 auto;
}

.search-form-submit {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

    .guardian-chat-form .search-form-submit {
        display: block;
        width: 100%;
        text-align: center;
    }
    
#search-form-section input[type="text"],
#search-form-section select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

#search-form-section input[type="submit"] {
    padding: 8px 18px!important;
    min-width: 100px;
    cursor: pointer;
}

#category-owner {
    display: none;
}

    #owner-form #category-owner {
        display: block;
    }
    
.button {
    display: inline-block;
    text-align: center;
    font-size: 100%;
    background-color: #636fa4;
    color: #fff !important;
    border: 1px solid #636fa4;
    border-radius: 50px;
    font-weight: normal !important;
    padding: 10px 20px !important;
}

    .for-mobile .button {
        min-width: 110px !important;
    }
    
    .button:hover,
    .button:hover * {
        color: #fff !important;
    }
    
    .button:hover {
        box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1);
    }
    
    .button:active {
        filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#eff1f5',EndColorStr='#eff1f5');
        box-shadow: inset 0px 3px 0px rgba(0,0,0,0.1), inset 0px 50px 0px rgba(0,0,0,0.1);
    }

    .button:focus {
        box-shadow: inset 100px 100px 0px rgba(0, 0, 0, 0.1);
    }

    .button:disabled,
    .button.disabled {
        border-color: #dedede !important;
        background: none !important;
        background-color: #eee !important;
        box-shadow: none !important;
        filter: none !important;
        color: #999 !important;
    }

.button-outline {
    display: inline-block;
    text-align: center;
    font-size: 100%;
    background-color: #636fa4;
    border-width: 2px;
    border-style: solid;
    border-color: #636fa4;
    border-radius: 50px;
    font-weight: normal !important;
    padding: 8px 18px !important;
    color: #fff;
}

    .cat-duelystter .button-outline {
        border-radius: 10px;
    }
    
    .button-outline.origin-button {
        margin-left: 3px;
        margin-right: 3px;
        border-radius: 10px;
        min-width: 100px;
    }
    
    .button-outline.origin-button .label {
        display: block;
    }
    
    .button-outline.origin-button .count {
        display: block;
        font-size: 11px;
        margin-top: 3px;
        padding: 2px 8px;
        border-radius: 50px;
        background-color: rgba(0,0,0,0.4);
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.2);
    }
    
    .button-outline.origin-button .ui-icon {
        width: 16px !important;
        height: 16px !important;
    }
    
    .button-outline.origin-button .count .ui-icon {
        width: 12px !important;
        height: 12px !important;
    }
    
    .dark-mode .button-outline,
    .dark-mode .button-outline:hover,
    .dark-mode .button-outline:hover i,
    .cat-straightline-bookmark .button-outline,
    .cat-straightline-bookmark .button-outline:hover,
    .cat-straightline-bookmark .button-outline:hover i {
        color: #fff;
    }
    
    .button-outline:hover {
        background-color: #636fa4 !important;
        box-shadow: inset 0px -3px 0px rgba(0, 0, 0, 0.1);
    }
    
    .button-outline:hover,
    .button-outline:hover i {
        color: #fff !important;
    }
    
    .button-outline.voted,
    .button-outline.voted:hover,
    .button-outline.voted:hover i {
        background-color: #fff !important;
        color: #636fa4 !important;
    }
    
    .cat-memoriastter .button,
    .cat-memoriastter .button-outline {
        color: #fff !important;
        background: #3D51A0;
        background: -webkit-linear-gradient(to right, #3D51A0, #543493, #84175C);
        background: linear-gradient(to right, #3D51A0, #543493, #84175C);
        padding: 10px 20px !important;
        border-style: none;
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.5);
    }
    
    .get_share_point,
    .button-outline.share-point {
        margin-top: 10px;
        padding: 5px 15px !important;
        font-size: 11px;
    }
    
    .get_share_point {
        color: #666;
    }
    
        .dark-mode .get_share_point {
            color: #999;
        }
    
    .button-outline.share-point img {
        width: auto;
        height: 20px;
        margin: -10px 0;
        margin-right: 5px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    .get_share_point {
        display: inline-block;
        margin-top: 10px;
        padding: 6px 0 !important;
        font-size: 11px;
    }
    
    .get_share_point i,
    .button-outline.share-point i {
        font-size: 11px;
    }
    
    .cat-memoriastter.dark-mode .button,
    .cat-memoriastter.dark-mode .button-outline {
        background: #283569;
        background: -webkit-linear-gradient(to right, #283569, #382262, #490D33);
        background: linear-gradient(to right, #283569, #382262, #490D33);
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.5);
    }

    .cat-memoriastter .button:hover,
    .cat-memoriastter .button-outline:hover,
    .cat-memoriastter #favorite-hero .button:hover,
    .cat-memoriastter #favorite-hero .button-outline:hover,
    .cat-memoriastter.dark-mode .button:hover,
    .cat-memoriastter.dark-mode .button-outline:hover {
        color: #ddd !important;
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.7);
    }
    
    .cat-memoriastter .button:active,
    .cat-memoriastter .button-outline:active,
    .cat-memoriastter.dark-mode .button:active,
    .cat-memoriastter.dark-mode .button-outline:active {
        filter: grayscale(1);
    }
    
    .cat-memoriastter .now-working.button:active,
    .cat-memoriastter .now-working.button-outline:active,
    .cat-memoriastter.dark-mode .now-working.button:active,
    .cat-memoriastter.dark-mode .now-working.button-outline:active {
        filter: none;
    }
    
    .cat-memoriastter .button:hover i,
    .cat-memoriastter .button-outline:hover i,
    .cat-memoriastter #favorite-hero .button:hover i,
    .cat-memoriastter #favorite-hero .button-outline:hover i,
    .cat-memoriastter.dark-mode .button:hover i,
    .cat-memoriastter.dark-mode .button-outline:hover i {
        color: #ddd !important;
    }
    
    .cat-memoriastter.dark-mode .button:hover,
    .cat-memoriastter.dark-mode .button-outline:hover {
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(0,0,0,0.1), inset -1px -1px 0 rgba(255,255,255,0.2);
    }
    
    .cat-memoriastter .button-outline.voted,
    .cat-memoriastter .button-outline.voted:hover {
        color: #ddd !important;
        background-color: transparent !important;
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(0,0,0,0.6), inset -1px -1px 0 rgba(255,255,255,0.7);
    }
    
    .cat-memoriastter.dark-mode .button-outline.voted,
    .cat-memoriastter.dark-mode .button-outline.voted:hover {
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(0,0,0,0.1), inset -1px -1px 0 rgba(255,255,255,0.2);
    }
    
    .cat-memoriastter .button:disabled,
    .cat-memoriastter .button.disabled,
    .cat-memoriastter .button:disabled:hover,
    .cat-memoriastter .button.disabled :hover {
        border-color: #dedede !important;
        background: none !important;
        background-color: #eee !important;
        box-shadow: none !important;
        filter: none !important;
        color: #999 !important;
    }
    
    .cat-memoriastter .button-outline.voted:hover i {
        color: #ddd !important;
        background-color: transparent !important;
    }
    
    .cat-memoriastter a.now-working,
    .cat-memoriastter .button-outline.now-working {
        color: #fff !important;
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, indigo, blue, green, yellow, orange, red);
        background-size: 1200% 100%;
        animation: rainbow-progress 20s linear infinite;
        outline: none;
    }

    .cat-memoriastter .button-outline.share-point,
    .dark-mode .button-outline.share-point {
        box-shadow: -1px -1px 0 rgba(0,0,0,0.5), inset 1px 1px 0 rgba(255,255,255,0.2), inset -1px -1px 0 rgba(0,0,0,0.5), 0 0 3px rgba(0,0,0,0.5);
    }
    

#id_form .form-col strong {
    font-size: 18px;
}

.disable-comment-toggle {
    font-size: 13px;
}

.disable-comment {
    display: none;
}

.list-section {
    border-bottom: 1px solid #eff1f5;
    margin-top: 20px;
    padding-bottom: 20px;
}

    .for-mobile .list-section {
        margin-top: 10px;
        padding-bottom: 10px;
    }
    .list-section:first-of-type {
        margin-top: 0;
    }
    
    .list-section:last-of-type {
        padding-bottom: 0;
        border-style: none;
    }

.dropdown {
    position: relative;
    text-align: left;
}

    .flex .dropdown .anchor {
        text-align: center;
    }
    
.dropdown,
.dropdown > li {
    display: inline-block;
}

    .dropdown li ul i {
        font-size: 16px !important;
    }
    
    .dropdown li ul {
        position: absolute;
        display: none;
        width: 200px;
        padding: 5px 0 !important;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
        z-index: 99999;
    }
    
        .dark-mode .dropdown li ul {
            background-color: #191921;
            border-color: #2f2f3a;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.6);
        }
        
        .cat-memoriastter .dropdown li ul {
            background-image: url(../image/asset/bg_w.jpg);
            background-size: cover;
            background-position: 50% 50%;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.4), inset 1px 1px 0px rgba(255,255,255,0.2)!important;
        }
        
        .cat-memoriastter.dark-mode .dropdown li ul {
            background-image: url(../image/asset/bg_b.jpg);
        }
        
        .cat-straightline-bookmark .dropdown li ul {
            background-color: #060606;
            border-color: #252525;
            box-shadow: 3px 3px 10px rgba(0,0,0,0.9);
        }
        
    .dropdown li ul li {
        display: block;
        margin: 0 !important;
        padding: 7px 10px !important;
        font-size: 14px !important;
        text-align: left !important;
    }
    
        .dropdown li ul li.note {
            padding: 4px 10px !important;
            font-size: 11px !important;
        }
    
    .dropdown li ul a {
        display: block;
        margin: -5px -10px !important;
        padding: 5px 10px !important;
    }
    
    .for-mobile .dropdown li ul a {
        padding: 8px 10px !important;
    }
    
    .dropdown li ul a:hover {
        background-color: #f0f0f0;
        border-radius: 0;
    }

        .dark-mode .dropdown li ul a:hover {
            background-color: #111;
        }
        
        .cat-memoriastter.dark-mode .dropdown li ul a:hover,
        .cat-straightline-bookmark .dropdown li ul a:hover {
            background-color: #000;
        }
        
.ua-toggle .anchor {
    font-size: 13px;
}

.ua {
    display: none;
}

.tips {
    position: absolute;
    display: block;
    max-width: 728px;
    box-sizing: border-box;
    z-index: 99999;
    margin-left: -20px;
    margin-right: 20px;
}
    
    .for-mobile .tips {
        margin-left: -10px;
        margin-right: 10px;
    }
        
    .tips.ajax-loading {
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
        color: #666;
    }
    
    .tips .fukidashi {
        padding: 10px 20px;
        box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    
        .for-mobile .tips .fukidashi {
            padding: 10px;
        }
        
    .tips,
    .tips * {
        font-weight: normal !important;
    }
    
#service-list {
    overflow: hidden;
    margin: 0;
    line-height: 1;
    background-color: rgba(255,255,255,0.95);
    text-transform: uppercase;
    border-bottom: 1px solid #eff1f5;
}

    .for-mobile #service-list {
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .for-mobile #service-list::-webkit-scrollbar {
        display: none;
    }

    .dark-mode #service-list {
        background-color: rgba(0,0,0,0.5);
    }
    
    .cat-memoriastter #service-list {
        background-color: rgba(255,255,255,0.5);
    }

    .cat-memoriastter.dark-mode #service-list {
        background-color: rgba(0,0,0,0.3);
    }

    .cat-straightline-bookmark #service-list {
        background-color: rgba(0,0,0,0.3);
    }

    .cat-straightline-bookmark.for-tablet #service-list {
        background-color: #0e0e0e;
    }
    
    .for-mobile #service-list {
        margin: 0;
    }
    
    #service-list ul {
        white-space: nowrap;
    }
    
    #service-list ul,
    #service-list li {
        list-style: none;
    }
    
    #service-list li {
        display: inline-block;
        margin: 0;
        vertical-align: middle;
        font-size: 11px;
    }
    
    #service-list li a,
    #service-list li .anchor {
        display: block;
        outline: none;
        text-decoration: none;
        padding: 10px 18px !important;
        text-align: center;
    }

    #service-list li a:hover {
        text-decoration: underline;
    }
    
    #service-list li a.current {
        color: #fff !important;
        padding: 5px 6px !important;
        margin: 5px 14px !important;
        border-radius: 50px;
        text-decoration: none;
        background-color: #636fa4;
    }
    
    #service-list i {
        margin: 0 !important;
        font-size: 13px;
    }
    
    #service-list .closed .hide {
        display: none;
    }
    
    #service-list .closed .icon-hide {
        display: none;
    }
    
    #service-list .opened .icon-expand {
        display: none;
    }
    
.information {
    position: relative;
    overflow: hidden;
    display: none;
    background-color: rgba(0,0,0,0.7);
    font-size: 12px;
}
    
    .information .left,
    .information .right {
        display: inline-block;
        vertical-align: middle;
    }

    .information .left {
        width: 80%;
    }
    
    .information .right {
        width: 20%;
        text-align: right;
    }
    
    .information-inner a {
        display: block;
        padding: 15px 0;
        color: #fff;
    }
    
        .for-tablet .information-inner a {
            margin-left: 10px;
        }
        
    .information-inner a,
    .information-inner a:hover {
        color: #fff !important;
    }
    
    .information-inner a .anchor,
    .information-inner a .anchor:hover {
        color: #008db7 !important;
    }
    
    .information .button-outline {
        border-style: none;
    }
    
        .for-tablet .information .button-outline {
            margin-right: 10px !important;
        }
    
    section.information {
        font-size: 14px;
    }
    
    .for-mobile section.information {
        font-size: 13px;
    }
    
    section.information .button-outline {
        display: inline-block;
        border-style: solid;
    }
    
    section.information p + p {
        text-align: center;
        margin-top: 10px;
    }
    
    section.information .close {
        float: none;
    }

    .information.duelystter-info {
        position: relative;
        margin: 0 -20px;
        padding: 10px 20px;
        border-top: 1px solid #eff1f5;
        background: #eff1f5;
        background: -webkit-linear-gradient(to right, #eff1f5, #d3cce3);
        background: linear-gradient(to right, #eff1f5, #d3cce3);
        box-shadow: inset 0 0 50px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.02), inset 0 2px 0 rgba(0,0,0,0.02), inset 0 3px 0 rgba(0,0,0,0.02);
    }

        .dark-mode .information.duelystter-info {
            background: #333742;
            background: -webkit-linear-gradient(to right, #333742, #322D41);
            background: linear-gradient(to right, #333742, #322D41);
        }
        
        .information.duelystter-info * {
            color: #fff !important;
        }
        
        .for-mobile .information.duelystter-info {
            padding: 0 20px 0 0;
        }
        
        .for-tablet .information.duelystter-info a {
            margin-left: 0;
        }
    
        .for-mobile .information.duelystter-info {
            margin: 0 -10px;
        }
        
        .dark-mode .information.duelystter-info {
            border-color: #2f2f3a;
        }

        .cat-straightline-bookmark .information.duelystter-info {
            border-color: #2f2f3a;
        }
        
    .information.duelystter-info a img {
        max-width: 100%;
        height: auto;
    }
    
    .information.duelystter-info .float-right {
        float: none;
        position: absolute;
        right: 0;
        top: 0;
    }
    
    .information.duelystter-info .float-right .anchor {
        color: #fff !important;
    }
    
#benchmark {
    display: block;
    text-align: center;
    font-size: 10px;
}

#get-url {
    text-align: center;
}

    .comments-list + #get-url,
    .error + #get-url {
        margin-bottom: 20px;
    }
    
    .for-mobile .comments-list + #get-url {
        margin-bottom: 10px;
    }
    
    #get-url p {
        margin-bottom: 1em;
    }
    
    #get-url p:last-child {
        margin-bottom: 0;
    }
    
    #get-url p:first-child img {
        display: block;
        margin: 0 auto;
        width: 36px;
        height: auto;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
    }
    
    /*
    #get-url img[src$="997.png"] {
        image-rendering: auto;
    }
    */
    
#img-placeholder img {
    width: 200px;
    height: auto;
}

    #idle-hero-form #img-placeholder img {
        width: 64px;
        height: 64px;
        -ms-interpolation-mode: nearest-neighbor;
        image-rendering: pixelated;
        object-fit: contain;
    }
    
.image-container {
    display: inline-block;
    margin-top: 10px;
}

    .image-container.note {
        text-align: left;
    }
    
    .page-card .image-container {
        margin-top: 0;
    }
    
    .image-container img {
        max-width: 100%;
        height: auto;
        background-color: #fff;
    }
    
    .image-container + a,
    .page-card + a {
        display: block;
        font-size: 12px;
        margin-top: 10px;
    }
    
    .cat-artmemoriastter .image-container {
        overflow: hidden;
        border-radius: 10px;
    }
    
.page-card a {
    overflow: hidden;
    border-radius: 10px;
    display: block;
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 5px 0;
}

    .dark-mode .page-card a {
        background-color: #0C0C10;
        border-color: #0C0C10;
    }
    
    .cat-straightline-bookmark .page-card a {
        background-color: #000;
        border-style: none;
    }
    
    .cat-straightline-bookmark .page-card img {
        background-color: transparent;
    }
    
    .cat-straightline-bookmark .page-card img + img {
        margin-top: 1px;
    }
    
.page-card-title,
.page-card-domain {
    display: block;
}

.page-card-title {
    padding: 10px 15px 0 15px;
    font-weight: bold;
}

.page-card-domain {
    font-size: 11px;
    color: #999;
    padding: 0 15px 10px 15px;
}

#post-form {
    line-height: 1;
}

    #post-form p {
        margin-top: 20px;
    }
    
    .for-mobile #post-form p {
        margin-top: 10px;
    }
    
    #post-form form {
    }
    
    #post-form .form-header,
    #post-form .form-submit {
        display: inline-block;
        margin: 0 !important;
    }
    
    #post-form .form-header {
        width: 80%;
    }
    
    #post-form .form-submit {
        width: 20%;
    }
    
    #post-form input#post-content {
        padding: 10px 20px;
        border-style: none;
        background-color: #eff1f5;
        border-radius: 50px 0 0 50px;
        font-size: 100%;
    }
    
    .dark-mode #post-form input#post-content {
        background-color: #333442;
        
    }
    
    #post-form .submit {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 20px !important;
        font-size: 100%;
        background-color: #636fa4;
        border-style: none;
        color: #fff !important;
        font-weight: normal !important;
        border-style: none;
        border-radius: 0 50px 50px 0;
        text-align: center;
    }
    
.site-card > a:first-child {
    display: flex;
    flex-direction: row;
    align-items: center;
}

    .for-mobile .site-card > a:first-child {
        display: block;
    }
    
    .site-card > a:first-child .site-name,
    .site-card > a:first-child .site-banner {
        flex: initial;
    }
    
    .site-card > a:first-child .site-name {
        order: 2;    
    }
    .site-card > a:first-child .site-banner {
        order: 1;    
    }
    
.site-name {
    font-weight: bold;
    font-size: 16px;
}

    .for-mobile .site-name {
        display: block;
    }
    
.site-banner {
    display: inline-block;
    overflow: hidden;
    width: 200px;
    height: 40px;
    margin-right: 10px;
}

    .site-banner img {
        max-width: 100%;
        height: auto;
    }

.site-description {
    display: block;
    margin-top: 10px;
}

.site-tag {
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

    .site-tag a {
        margin-right: 0.5em;
    }
    
.site-news {
    display: block;
    font-size: 12px;
    margin-top: 10px;
}

.pin-comment {
    display: block;
    font-size: 12px;
    margin-top: 10px;
}

.counter-wrapper {
    display: none;
}

    .is_countdown .counter-wrapper {
        display: inline;
    }
    
.dark-mode hr,
.dark-mode #introduction > h1,
.dark-mode.for-mobile #content nav,
.dark-mode.for-mobile #content nav > ul,
.dark-mode #global-nav nav + .form-anchor,
.dark-mode #service-list,
.dark-mode .page-nav-end,
.dark-mode .page-nav,
.dark-mode #page-filter,
.dark-mode.for-mobile #content section,
.dark-mode section .ad-section,
.dark-mode.for-mobile .container > .ad-section,
.dark-mode .success + #page-header,
.dark-mode .error + #page-header,
.dark-mode #category-header,
.dark-mode .comment-section,
.dark-mode .please-section,
.dark-mode .links-list.popular-comments-list,
.dark-mode .activity-section,
.dark-mode .category-section,
.dark-mode .activity-section,
.dark-mode .comment-section.has-child .comment-section-inner::after,
.dark-mode .form-anchor,
.dark-mode .form-section,
.dark-mode .form-section .warning,
.dark-mode .comment-section:last-child .form-section,
.dark-mode.for-mobile #comments .form-section,
.dark-mode .so-far,
.dark-mode .links-list.sticky,
.dark-mode .links-list.sticky + .links-list,
.dark-mode .form-footer,
.dark-mode .list-section,
.dark-mode #todays-heart,
.dark-mode #online-user,
.dark-mode #page-description,
.dark-mode .page-separator,
.dark-mode #world-boss,
.dark-mode #world-hero,
.dark-mode #favorite-hero,
.dark-mode #raid-boss-result,
.dark-mode .form-col.description,
.dark-mode .form-col.category-delete {
    border-color: #2f2f3a;
}

.cat-straightline-bookmark hr,
.cat-straightline-bookmark #introduction > h1,
.cat-straightline-bookmark.for-mobile #content nav,
.cat-straightline-bookmark.for-mobile #content nav > ul,
.cat-straightline-bookmark #global-nav nav + .form-anchor,
.cat-straightline-bookmark #service-list,
.cat-straightline-bookmark .page-nav-end,
.cat-straightline-bookmark .page-nav,
.cat-straightline-bookmark.for-mobile #content section,
.cat-straightline-bookmark section .ad-section,
.cat-straightline-bookmark.for-mobile .container > .ad-section,
.cat-straightline-bookmark .success + #page-header,
.cat-straightline-bookmark .error + #page-header,
.cat-straightline-bookmark #category-header,
.cat-straightline-bookmark .comment-section,
.cat-straightline-bookmark .activity-section,
.cat-straightline-bookmark .category-section,
.cat-straightline-bookmark .activity-section,
.cat-straightline-bookmark .comment-section.has-child .comment-section-inner::after,
.cat-straightline-bookmark .form-anchor,
.cat-straightline-bookmark .form-section,
.cat-straightline-bookmark .form-section .warning,
.cat-straightline-bookmark .comment-section:last-child .form-section,
.cat-straightline-bookmark.for-mobile #comments .form-section,
.cat-straightline-bookmark .links-list.sticky,
.cat-straightline-bookmark .form-footer,
.cat-straightline-bookmark .list-section,
.cat-straightline-bookmark #todays-heart,
.cat-straightline-bookmark #online-user,
.cat-straightline-bookmark #page-description,
.cat-straightline-bookmark .page-separator,
.cat-straightline-bookmark .form-col.description,
.cat-straightline-bookmark .form-col.category-delete {
    border-color: #161616;
}

#pet-action,
.cat-memoriastter .success,
.cat-memoriastter .error,
.for-tablet.cat-memoriastter #content section,
.battle-record + .battle,
#world-hero,
#world-boss-synopsis,
#ultimate-rush,
.cat-memoriastter .links-list,
#page-description.content-description,
.duelyst-description,
.cat-endless-memoriastter .duelyst-description,
#page-description.content-description .form-section,
#page-description.content-description .header,
.cat-memoriastter .form-anchor,
.cat-memoriastter .form-anchor.sticky,
.cat-memoriastter .dropdown li ul,
.cat-memoriastter hr,
.cat-memoriastter #introduction > h1,
.cat-memoriastter.for-mobile #content nav,
.cat-memoriastter.for-mobile #content nav > ul,
.cat-memoriastter #global-nav nav + .form-anchor,
.cat-memoriastter #service-list,
.cat-memoriastter.for-tablet #service-list,
.cat-memoriastter .page-nav-end,
.cat-memoriastter .page-nav,
.cat-memoriastter .so-far,
.cat-memoriastter.for-mobile #content section,
.cat-memoriastter section .ad-section,
.cat-memoriastter.for-mobile .container > .ad-section,
.cat-memoriastter .success + #page-header,
.cat-memoriastter .error + #page-header,
.cat-memoriastter #category-header,
.cat-memoriastter .comment-section,
.cat-memoriastter .activity-section,
.cat-memoriastter .category-section,
.cat-memoriastter .activity-section,
.cat-memoriastter .comment-section.has-child .comment-section-inner::after,
.cat-memoriastter .form-anchor,
.cat-memoriastter .form-section,
.cat-memoriastter .form-section .warning,
.cat-memoriastter .comment-section:last-child .form-section,
.cat-memoriastter.for-mobile #comments .form-section,
.cat-memoriastter .links-list.sticky,
.cat-memoriastter .links-list.sticky + .links-list,
.cat-memoriastter .duelyst-description + .links-list,
.cat-memoriastter #favorite-hero + .links-list,
.cat-memoriastter #search-form-section + .links-list,
.cat-memoriastter .form-footer,
.cat-memoriastter .list-section,
.cat-memoriastter #todays-heart,
.cat-memoriastter #online-user,
.cat-memoriastter #page-description,
.cat-memoriastter .page-separator,
.cat-memoriastter #world-boss,
.cat-memoriastter #world-hero,
.cat-memoriastter #favorite-hero,
.cat-memoriastter #raid-boss-result,
.cat-memoriastter .form-col.description,
.cat-memoriastter .form-col.category-delete,
.cat-memoriastter .duelyst-description,
.cat-memoriastter #page-description,
.cat-memoriastter #page-filter,
.cat-memoriastter .page-separator {
    border-color: #aeaeae;
}

/*
.links-list.top3-of-the-day,
.duelyst-description + .battle {
    border-color: #161616 !important;
}
*/

.dark-mode #pet-action,
.cat-memoriastter.dark-mode .success,
.cat-memoriastter.dark-mode .error,
.for-tablet.cat-memoriastter.dark-mode #content section,
.dark-mode .battle-record + .battle,
.dark-mode #world-hero,
#raid-boss-result + #raid-boss,
.dark-mode #world-boss-synopsis,
.dark-mode #ultimate-rush,
.cat-memoriastter.dark-mode .links-list,
.dark-mode #page-description.content-description,
.dark-mode .duelyst-description + .battle,
.dark-mode .duelyst-description,
.dark-mode.cat-endless-memoriastter .duelyst-description,
.dark-mode #page-description.content-description .form-section,
.dark-mode #page-description.content-description .header,
.cat-memoriastter.dark-mode .form-anchor,
.cat-memoriastter.dark-mode .form-anchor.sticky,
.cat-memoriastter.dark-mode .dropdown li ul,
.cat-memoriastter.dark-mode hr,
.cat-memoriastter.dark-mode #introduction > h1,
.cat-memoriastter.dark-mode.for-mobile #content nav,
.cat-memoriastter.dark-mode.for-mobile #content nav > ul,
.cat-memoriastter.dark-mode #global-nav nav + .form-anchor,
.cat-memoriastter.dark-mode #service-list,
.cat-memoriastter.dark-mode.for-tablet #service-list,
.cat-memoriastter.dark-mode .page-nav-end,
.cat-memoriastter.dark-mode .page-nav,
.cat-memoriastter.dark-mode .so-far,
.cat-memoriastter.dark-mode.for-mobile #content section,
.cat-memoriastter.dark-mode section .ad-section,
.cat-memoriastter.dark-mode.for-mobile .container > .ad-section,
.cat-memoriastter.dark-mode .success + #page-header,
.cat-memoriastter.dark-mode .error + #page-header,
.cat-memoriastter.dark-mode #category-header,
.cat-memoriastter.dark-mode .comment-section,
.cat-memoriastter.dark-mode .activity-section,
.cat-memoriastter.dark-mode .category-section,
.cat-memoriastter.dark-mode .activity-section,
.cat-memoriastter.dark-mode .comment-section.has-child .comment-section-inner::after,
.cat-memoriastter.dark-mode .form-anchor,
.cat-memoriastter.dark-mode .form-section,
.cat-memoriastter.dark-mode .form-section .warning,
.cat-memoriastter.dark-mode .comment-section:last-child .form-section,
.cat-memoriastter.dark-mode.for-mobile #comments .form-section,
.cat-memoriastter.dark-mode .links-list.sticky,
.cat-memoriastter.dark-mode .links-list.sticky + .links-list,
.cat-memoriastter.dark-mode .duelyst-description + .links-list,
.cat-memoriastter.dark-mode #favorite-hero + .links-list,
.cat-memoriastter.dark-mode #search-form-section + .links-list,
.cat-memoriastter.dark-mode .form-footer,
.cat-memoriastter.dark-mode .list-section,
.cat-memoriastter.dark-mode #todays-heart,
.cat-memoriastter.dark-mode #online-user,
.cat-memoriastter.dark-mode #page-description,
.cat-memoriastter.dark-mode #page-filter,
.cat-memoriastter.dark-mode .page-separator,
.cat-memoriastter.dark-mode #world-boss,
.cat-memoriastter.dark-mode #world-hero,
.cat-memoriastter.dark-mode #favorite-hero,
.cat-memoriastter.dark-mode #raid-boss-result,
.cat-memoriastter.dark-mode .form-col.description,
.cat-memoriastter.dark-mode .form-col.category-delete {
    border-color: #161616;
}

.cat-memoriastter hr::after {
    background-color: rgba(255,255,255,0.7);
}

.cat-memoriastter #introduction > h1,
#page-description.content-description .header {
    box-shadow: 0 1px 0 rgba(255,255,255,0.7);
}

#pet-action,
.cat-memoriastter #global-nav .icon-panel,
.cat-memoriastter .page-nav-end,
.cat-memoriastter .page-nav,
.cat-memoriastter .success + #page-header,
.cat-memoriastter .error + #page-header,
.cat-memoriastter #page-header + #category-header,
.cat-memoriastter .links-list,
.cat-memoriastter #search-form-section,
.cat-memoriastter .duelyst-description,
.cat-memoriastter #page-description,
.cat-memoriastter .page-separator,
.cat-memoriastter #page-filter,
.cat-memoriastter .success,
.cat-memoriastter .error,
#world-boss-synopsis,
#page-description.content-description,
.duelyst-description,
#page-description.content-description .form-section,
.cat-memoriastter .form-anchor,
.cat-memoriastter .dropdown li ul {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.cat-memoriastter section .ad-section,
.cat-memoriastter .comment-section {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.cat-memoriastter.dark-mode hr::after {
    background-color: rgba(255,255,255,0.2);
}

.cat-memoriastter.dark-mode #introduction > h1,
.dark-mode#page-description.content-description .header {
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}

.dark-mode #pet-action,
.cat-memoriastter.dark-mode #global-nav .icon-panel,
.cat-memoriastter.dark-mode .page-nav-end,
.cat-memoriastter.dark-mode .page-nav,
.cat-memoriastter.dark-mode section .ad-section,
.cat-memoriastter.dark-mode .success + #page-header,
.cat-memoriastter.dark-mode .error + #page-header,
.cat-memoriastter.dark-mode #page-header + #category-header,
#favorite-hero,
#my-house-main,
#raid-boss,
#raid-boss-result,
.dark-mode #world-boss-synopsis,
.cat-memoriastter.dark-mode .links-list,
.cat-memoriastter.dark-mode #search-form-section,
.cat-memoriastter.dark-mode .duelyst-description,
.cat-memoriastter.dark-mode #page-description,
.cat-memoriastter.dark-mode .page-separator,
.cat-memoriastter.dark-mode #page-filter,
.cat-memoriastter.dark-mode .success,
.cat-memoriastter.dark-mode .error,
.dark-mode #page-description.content-description,
.duelyst-description + .battle,
.dark-mode .duelyst-description,
.dark-mode #page-description.content-description .form-section,
.cat-memoriastter.dark-mode .form-anchor,
.cat-memoriastter.dark-mode .dropdown li ul {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.cat-memoriastter.dark-mode section .ad-section,
.cat-memoriastter.dark-mode .comment-section {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

/*
* https://www.omakase.net/blog/2022/02/css-checkbox-radio.html
*/
.Type-B label{
	padding-left: 30px;
	display: block;
	cursor: pointer;
	position: relative;
}
.Type-B select{
	margin-left: 30px;
}

.Type-B input{
	position: absolute;
	z-index: -1;
	opacity: 0;
}
.Type-B .indicator{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
    border: 1px solid #ccc;
	position: absolute;
	top: -2px;
	left: 0;
}
.dark-mode .Type-B .indicator{
	background: #191921;
}
.Type-B label input:disabled ~ .indicator{
	background: #ccc;
	opacity: 0.6;
	pointer-events: none;
}
.Type-B .indicator::after{
	content: "";
	width: 0;
	height: 0;
	display: block;
	border-radius: 50%;
	background: #009adb;
	position: absolute;
	top: 50%;
	left: 50%;
	transition: all .3s;
}
.Type-B label input:checked ~ .indicator::after{
	width: 14px;
	height: 14px;
	top: 3px;
	left: 3px;
}
.Type-B .typeB-radio .indicator::after{
	background: #e87a90;
}
.Type-B .typeB-checkbox input:disabled ~ .indicator::after,
.Type-B .typeB-radio input:disabled ~ .indicator::after{
	background: #7b7b7b;
}

.Type-C label{
    margin: 5px 0;
    padding-left: 50px;
	display: block;
	align-items: center;
	cursor:pointer;
	position:relative;
}
.Type-C input{
	position:absolute;
	z-index:-1;
	opacity:0;
}
.Type-C .indicator{
	width: 40px;
	height: 22px;
	border-radius: 50px;
	background-color: #ddd;
	position:absolute;
	top:-2px;
	left:0;
	transition: all .3s;
}

.dark-mode .Type-C .indicator{
	background-color: #444;
}

.cat-memoriastter .Type-C .indicator{
	background-color: #999;
}

.cat-memoriastter.dark-mode .Type-C .indicator{
	background-color: #212121;
}

.Type-C label input:checked ~ .indicator{
	background: #4cca61 !important;
}

.Type-C input + .indicator::after{
	content:"";
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
	top: 2px;
	left: 2px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	transition: all .3s;
}
.Type-C label input:checked ~ .indicator::after{
	transform: translateX(100%);
}
.Type-C .typeC-radio input:checked ~ .indicator::after{
}
.Type-C .typeC-checkbox input:disabled ~ .indicator,
.Type-C .typeC-radio input:disabled ~ .indicator{
	opacity:.35;
}

#extra-message {
    position: fixed;
    display: none;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
    background-color: #636fa4;
    color: #fff;
    padding: 10px 40px;
    min-width: 10em;
    border-radius: 50px;
    text-align: center;
    opacity: 0;
    white-space: nowrap;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.2);
}

    .for-tablet #extra-message {
        font-size: 12px;
        font-size: 1.2rem;
        padding: 10px 20px;
        margin-bottom: 65px;
    }
    
#extra-message .anchor {
    margin: 0 0 0 2em;
    color: #5e94f5;
}

#extra-message i {
    font-size: 15px;
    font-size: 1.5rem;
    margin: 0 0 0 1em;
    cursor: pointer;
}

.flexbox {
    display: flex;
    flex-direction: row;
}

.flex-main {
    display: block;
    flex: 1;
}

.flex-sub {
    display: block;
}

.sub-panel-container {
    display: flex;
    flex-direction: row;
}

.sub-panel {
    display: none;
    position: relative;
    background-color: rgba(0,0,0,0.7);
}

.sub-panel-loading {
    margin: 10px;
    font-size: 11px;
}

.sub-panel.opened {
    display: block;
}

.sub-panel-inner {
    display: block;
    overflow-y: scroll;
    height: 100%;
    margin-left: 13px;
    font-size: 12px;
}

    .sub-panel-inner > *{
        padding: 10px 5px;
    }
    
.sub-panel-close {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    height: 100%;
    vertical-align: middle;
    padding: 3px;
    background-color: #000;
    font-size: 12px;
}

.cat-artmemoriastter .mode-selection-tab {
    padding: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #aeaeae;
    background-image: url(../image/asset/bg_bw.jpg);
    background-color: #eee;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.7);
}

    .cat-artmemoriastter.dark-mode .mode-selection-tab {
        border-color: #161616;
        background-image: url(../image/asset/bg.jpg);
        box-shadow: 0 1px 1px rgba(0,0,0,0.7);
    }
    
    .cat-artmemoriastter .mode-selection-tab a {
        display: inline-block;
        width: 50%;
        padding: 8px 0;
        text-align: center;
    }
    
    .cat-artmemoriastter .mode-selection-tab a.focused {
        background-color: rgba(0,0,0,0.5);
        font-weight: bold;
        color: #fff !important;
        border-radius: 5px;
        box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }

.filterbar {
    margin: 20px 0;
    padding: 10px 20px;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    border-radius: 10px;
    font-size: 12px;
}

    #summons-list .filterbar {
        margin: 10px 0 0 0;
        grid-column: 1 / -1;
    }
    
    .for-mobile .filterbar {
        margin: 10px 0;
        padding: 10px;
    }
    
#local-nav {
}

    #local-nav ul > li img + strong {
        display: block;
        margin-top: 5px;
        font-weight: normal;
        font-size: 11px;
    }
    
    #guardian-section #local-nav + .form-section {
        border-top: 1px solid #aeaeae;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    
    .dark-mode #guardian-section #local-nav + .form-section {
        border-top-color: #161616;;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    
#gods-gacha .battle-img-container {
    width: 100%;
}

.unit-img-container {
    display: block;
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
    background-image: url(../char/bg/origin/unit_shadow.png);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    z-index: 2;
}

    #originbattle .battle-left .unit-img-container,
    #originbattle .battle-right .unit-img-container {
        margin-top: -110px;
    }
    
    .for-mobile #originbattle .battle-left .unit-img-container,
    .for-mobile #originbattle .battle-right .unit-img-container {
        margin-top: -115px;
    }
    
    #rank-list .battle-left .unit-img-container,
    #rank-list .battle-right .unit-img-container,
    #rank-list .battle-center .unit-img-container {
        width: 200px;
        height: 200px;
        margin-top: -120px;
    }
    
    .summon-section .unit-img-container {
        width: auto;
        height: 80px;
        overflow: visible;
    }
    
.unit-img {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scale(1.5);
    transform-origin: bottom center;
}

    .summon-section .unit-img {
        transform: translateX(-50%) scale(1);
    }
    
    #rank-list .battle-left .unit-img,
    #rank-list .battle-center .unit-img {
        transform: translateX(-50%) scale(1);
    }
    
    #rank-list .battle-right .unit-img {
        transform: translateX(-50%) scale(-1, 1);
    }
    
    .opponent .unit-img {
        transform: translateX(-50%) scale(-1.5, 1.5);
    }
    
    @keyframes minionHitAnimation {
        0% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
        20% {
            transform: translateX(-60%) scale(1.5, 1.5);
        }
        40% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
        60% {
            transform: translateX(-60%) scale(1.5, 1.5);
        }
        80% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
    }
    
    @keyframes opponentHitAnimation {
        0% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
        20% {
            transform: translateX(-40%) scale(-1.5, 1.5);
        }
        40% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
        60% {
            transform: translateX(-40%) scale(-1.5, 1.5);
        }
        80% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
    }
    
    @keyframes minionCriHitAnimation {
        0% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
        20% {
            transform: translateX(-100%) scale(1.5, 1.5);
        }
        40% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
        60% {
            transform: translateX(-100%) scale(1.5, 1.5);
        }
        80% {
            transform: translateX(-50%) scale(1.5, 1.5);
        }
    }
    
    @keyframes opponentCriHitAnimation {
        0% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
        20% {
            transform: translateX(0%) scale(-1.5, 1.5);
        }
        40% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
        60% {
            transform: translateX(0%) scale(-1.5, 1.5);
        }
        80% {
            transform: translateX(-50%) scale(-1.5, 1.5);
        }
    }
    
    .minion .battle-hit {
        animation: minionHitAnimation 0.3s ease-in-out !important;
    }
    
    .opponent .battle-hit {
        animation: opponentHitAnimation 0.3s ease-in-out !important;
    }
    
    .minion .battle-cri-hit {
        animation: minionCriHitAnimation 0.3s ease-in-out !important;
    }
    
    .opponent .battle-cri-hit {
        animation: opponentCriHitAnimation 0.3s ease-in-out !important;
    }
    
    
.unit-img canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: pixelated;
}

    #originbattle .unit-img canvas {
        bottom: -5%;
    }

.in-battle .unit-img-container,
#originbattle .in-battle .battle-name {
    opacity: 0;
}

#rank-list .battle-name {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

    .for-mobile #rank-list .battle-name {
        left: 15%;
    }
    
    #rank-list .battle-right .battle-name {
        left: auto;
        right: 20%;
        transform: translate(50%, -50%);
    }
    
        .for-mobile #rank-list .battle-right .battle-name {
            left: auto;
            right: 15%;
        }
        
    #rank-list .battle-center .battle-name {
        top: auto;
        left: 50%;
        bottom: -10px;
        transform: translate(-50%, 0);
        font-size: 11px;
        white-space: nowrap;
    }
    
        .for-mobile #rank-list .battle-center .battle-name {
            left: 50%;
            bottom: 0;
        }
        
#originbattle .battle-center {
    position: relative;
    display: block;
}

#originbattle .battle-img-container {
}

.cat-duelystter #gacha-icon {
    position: relative;
    height: 110px;
}

    #gacha-icon .gacha-sumwisp {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
#originbattle-team {
    position: relative;
    height: 160px;
}

    .originbattle-team-section {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .originbattle-team-section.index-1 {
        margin-left: -45px;
        z-index: 6;
    }
    
    .originbattle-team-section.index-2 {
        margin-left: 45px;
        z-index: 5;
    }
    
    .originbattle-team-section.index-3 {
        margin-left: -120px;
        bottom: 20px;
        z-index: 4;
    }
    
    .originbattle-team-section.index-4 {
        margin-left: 120px;
        bottom: 20px;
        z-index: 3;
    }

#originbattle-circle {
    position: absolute;
    top: -25px;
    left: 50%;
    width; 250px;
    height: 250px;
    margin-left: -125px;
    z-index: 2;
    user-select: none;
}

    #originbattle-circle img {
        position: absolute;
        top: 0;
        left: 0;
        width; 100%;
        height: 100%;
        animation: uniqueRotateAnimation 45s linear infinite,
                   breatheOpacity 3s ease-in-out infinite;
    }
    
    #originbattle-circle img +img {
        animation: uniqueRotateAnimation 30s linear infinite,
                   breatheOpacity 3s ease-in-out infinite;
        animation-delay: 0, 3s;
    }
    
    #originbattle-circle img +img +img {
        animation: uniqueRotateReverseAnimation 15s linear infinite,
                   breatheOpacity 3s ease-in-out infinite;
        animation-delay: 0, 6s;
    }
    
    @keyframes uniqueRotateAnimation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes uniqueRotateReverseAnimation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(-360deg);
        }
    }
    
    @keyframes breatheOpacity {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }
    
#originbattle .battle-center #originbattle-hero-name {
    position: relative;
    z-index: 10;
}

    #originbattle .battle-center #originbattle-hero-name a {
        display: inline-block;
        margin-top: 10px;
    }

#originbattle-stage {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0,0,0,0.9);
    z-index: 2;
}

    #originbattle-stage span {
        display: block;
        margin-bottom: -30px;
    }

        .for-mobile #originbattle-stage span {
            margin-bottom: -20px;
        }
    
    #originbattle-stage img {
        width: auto;
        height: 80px;
    }

        .for-mobile #originbattle-stage img {
            height: 60px;
        }
    
#originbattle .battle-hp-bar {
    margin-top: 10px;
}

    #originbattle .battle-hero-hp,
    #originbattle .battle-boss-hp {
    }
    
    .battle-left .battle-hp-bar,
    .battle-right .battle-hp-bar {
        position: absolute;
        top: 0;
    }
    
    
    #originbattle .battle-hp-bar {
        border: 1px solid rgba(255,255,255,0.7);
        transform: skew(-50deg);
        width: 75%;
        left: 20px;
    }
    
        .for-mobile #originbattle .battle-hp-bar {
            width: 70%;
        }
        
    #originbattle .battle-left .battle-hp-bar {
        transform: skew(50deg) scaleX(-1);
    }

    #originbattle .battle-right .battle-hp-bar {
        left: auto;
        right: 20px;
    }

.battle-crest img {
    position: absolute;
    top: -3px;
    left: 10px;
    width: auto;
    height: 32px;
    z-index: 3;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.2));
}

    .battle-right .battle-crest img {
        left: auto;
        right: 10px;
    }

#originbattle-chest {
    margin-bottom: 30px;
}

#originbattle-fx {
    position: absolute;
    display: none;
    bottom: 0;
    z-index: 6;
}

    .unit-img-container #originbattle-fx {
        display: inline;
    }
    
    #originbattle-fx .unit-img {
        transform: translateX(-20%) scale(1);
    }
    
#originbattle-status {
    position: relative;
}

#originbattle-status-detail {
    display: none;
    margin: 0 -20px;
    padding: 20px 20px 0 20px;
    background-image: url(../image/asset/bg_b.jpg);
    color: #fff;
    font-size: 11px;
    border-top: 1px solid #161616;
    background-size: cover;
    background-position: 50% 50%;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.2);
}

    #originbattle-status-detail.open {
        display: block;
    }
    
    .for-mobile #originbattle-status-detail {
        margin: 0 -10px;
        padding: 10px 10px 0 10px;
    }
    
    #originbattle-status-detail .overflow-hidden > div {
        display: inline-block;
        width: 50%;
    }
    
        #originbattle-status-detail i.icon-expand_less {
            margin: 0;
            color: #ff0;
        }
        
        #originbattle-status-detail .hint-box{
            margin-top: 0;
        }
        
        #originbattle-status-detail.open-default .hint-box{
            display: none;
        }
        
        #originbattle-status-detail h5 {
            font-weight: normal;
        }
    
        #originbattle-status-detail .stat-params-list {
            border-bottom-style: none;
        }
    
        #originbattle-status-detail .stat-params-list i {
            font-size: 11px;
        }
        
    .for-mobile #originbattle-status-detail .overflow-hidden {
        overflow-y: scroll !important;
        height: 80px;
    }
    
#toggle-originbattle-status-detail {
    position: absolute;
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
    z-index: 2;
}

    #toggle-originbattle-status-detail i {
        margin: -5px 0;
        padding: 5px;
    }
    
    #toggle-originbattle-status-detail i.open {
        display: none;
    }
    
    #toggle-originbattle-status-detail i.icon-unfold_more {
        display: inline;
    }
        
    #toggle-originbattle-status-detail.open i.icon-unfold_more {
        display: none;
    }
        
    #toggle-originbattle-status-detail i.icon-unfold_less {
        display: none;
    }
    
    #toggle-originbattle-status-detail.open i.icon-unfold_less {
        display: inline;
    }

#originbattle-skip {
    position: absolute;
    top: 55px;
    right: 31px;
    outline: none;
    cursor: pointer;
    z-index: 3;
}

    .for-mobile #originbattle-skip {
        top: 40px;
        right: 20px;
    }
    
    #originbattle-skip img {
        height: 32px;
        width: auto;
        filter: grayscale(1);
        opacity: 1;
        transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
    }
    
    #originbattle-skip.disable img {
        opacity: 0.5;
    }
    
    #originbattle-skip.active img {
        filter: grayscale(0);
        animation: pulse 1.2s ease-in-out infinite;
    }
    
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        30% {
            transform: scale(1.05);
        }
        60% {
            transform: scale(1);
        }
    }    
.cat-duelystter img.ui-icon {
    width: 20px !important;
    height: 20px !important;
}

.cat-duelystter .stone-count-info img.ui-icon {
    width: 16px !important;
    height: 16px !important;
}

.for-mobile.cat-duelystter #summons-list {
    margin: 0 -10px;
    padding: 10px;
    overflow: hidden;
}

.card-section {
    position: relative;
}

    @keyframes placeCard {
        0% {
            transform: scale(1.2);
        }
        70% {
            transform: scale(0.98);
        }
        100% {
            transform: scale(1);
        }
    }
    
    @keyframes srAnimation {
        0% {
            transform: scale(1.3);
            box-shadow: 0 0 50px rgba(232,43,255,0.8), inset 0 0 50px rgba(232,43,255,1), inset 0 0 100px rgba(255,255,255,0.6);
        }
        70% {
            transform: scale(0.97);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(232,43,255,0.2), inset 0 0 6px rgba(232,43,255,0.8), inset 1px 1px 0 rgba(255,255,255,0.2);
        }
    }
    
    @keyframes ssrAnimation {
        0% {
            transform: scale(1.5);
            box-shadow: 0 0 50px rgba(247,129,1,0.8), inset 0 0 100px rgba(247,129,1,1), inset 0 0 200px rgba(237,20,91,1);
        }
        70% {
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(247,129,1,0.2), inset 0 0 6px rgba(247,129,1,0.8), inset 1px 1px 0 rgba(255,255,255,0.2);
        }
    }
    
    @keyframes sgrAnimation {
        0% {
            filter: brightness(1.1);
            transform: scale(1.2);
            box-shadow: 0 0 50px rgba(255,247,153,0.8), inset 0 0 50px rgba(255,247,153,1), inset 0 0 100px rgba(255,247,153,0.6);
        }
        70% {
            filter: brightness(1);
            transform: scale(0.97);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(255,247,153,0.2), inset 0 0 6px rgba(255,247,153,0.8), inset 1px 1px 0 rgba(255,247,153,0.2);
        }
    }
    
    @keyframes mgrAnimation {
        0% {
            filter: brightness(1.3);
            transform: scale(1.3);
            box-shadow: 0 0 50px rgba(255,247,153,0.8), inset 0 0 50px rgba(255,247,153,1), inset 0 0 100px rgba(255,247,153,0.6);
        }
        70% {
            filter: brightness(1);
            transform: scale(0.97);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(255,247,153,0.2), inset 0 0 6px rgba(255,247,153,0.8), inset 1px 1px 0 rgba(255,247,153,0.2);
        }
    }
    
    @keyframes agrAnimation {
        0% {
            filter: brightness(1.5);
            transform: scale(1.5);
            box-shadow: 0 0 50px rgba(255,247,153,0.8), inset 0 0 50px rgba(255,247,153,1), inset 0 0 100px rgba(255,247,153,0.6);
        }
        70% {
            filter: brightness(1);
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(255,247,153,0.2), inset 0 0 6px rgba(255,247,153,0.8), inset 1px 1px 0 rgba(255,247,153,0.2);
        }
    }
    
    @keyframes isStarAnimation {
        0% {
            filter: brightness(6);
            transform: scale(1.5);
            box-shadow: 0 0 50px rgba(255,247,153,0.8), inset 0 0 50px rgba(255,247,153,1), inset 0 0 100px rgba(255,247,153,0.6);
        }
        70% {
            filter: brightness(1);
            transform: scale(0.95);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 5px rgba(255,247,153,0.2), inset 0 0 6px rgba(255,247,153,0.8), inset 1px 1px 0 rgba(255,247,153,0.2);
        }
    }
    
    .default-mode .card-section.play {
        animation: placeCard 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.0);
    }
    
    .default-mode .library-section.card-section.play {
        border-style: solid;
        border-width: 1px;
    }
    
    .card-section.sr {
        box-shadow: 0 0 5px rgba(232,43,255,0.2), inset 0 0 6px rgba(232,43,255,0.8), inset 1px 1px 0 rgba(255,255,255,0.2);
    }
    
        .default-mode .card-section.sr.play {
            animation: srAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
        }
        
        .default-mode .card-section.sgr.play {
            animation: sgrAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
        }
        
        .default-mode .card-section.mgr.play {
            animation: mgrAnimation 1.5s cubic-bezier(0.3, 0.1, 0.25, 1.0);
        }
        
    .card-section.ssr {
        box-shadow: 0 0 5px rgba(247,129,1,0.2), inset 0 0 6px rgba(247,129,1,0.8), inset 1px 1px 0 rgba(255,255,255,0.2);
    }
    
        .default-mode .card-section.ssr.play {
            animation: ssrAnimation 1s cubic-bezier(0.25, 0.1, 0.25, 1.0);
        }

        .default-mode .card-section.agr.play {
            animation: agrAnimation 2s cubic-bezier(0.4, 0.1, 0.25, 1.0);
        }
        
        .default-mode .card-section.is_star.play {
            animation: isStarAnimation 2s cubic-bezier(0.4, 0.1, 0.25, 1.0) !important;
        }
        
    .card-section.exists-team,
    .card-section.disable-sync {
        opacity: 0.5;
    }
    
.card-img {
    display: block;
    margin: 20px 0 10px 0;
}

.card-name {
    display: block;
    font-size: 11px;
}

    .card-name i {
        font-size: 14px;
    }
    
    .card-name span:first-child {
        display: block;
        font-size: 11px;
    }
    
.card-badge {
    position: absolute;
    top: 5px;
    left: 5px;
}

.card-attr {
    position: absolute;
    top: 30px;
    left: 10px;
}

.card-favorite {
    position: absolute;
    top: 3px;
    right: 4px;
    text-align: center;
    z-index: 4;
}

    .card-favorite a {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .card-favorite i {
        margin: 0;
        padding: 5px;
        font-size: 14px;
        text-shadow: 0 0 1px rgba(0,0,0,0.4);
    }
    
    .card-favorite i.icon-grade_fill,
    .card-favorite a.voted:hover i,
    .card-favorite a.favorite-count.voted:hover i {
        color: #ff0 !important;
    }
    
.card-lv {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    text-align: center;
    z-index: 3;
}

    .card-favorite + .card-lv {
        top: 26px;
    }
    
    .card-lv .label,
    .card-lv .count,
    .card-lv .reset {
        display: block;
        margin: 0;
    }
    
    
    .card-lv .count {
        font-size: 11px;
    }
    
    .card-lv .reset {
        margin-top: 3px;
    }

.card-plate {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

    .card-plate img {
        width: 100%;
        max-width: 80px;
        height: auto;
        filter: drop-shadow(0 0 3px rgba(0,0,0,0.2));
    }

.card-cret {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
}

    .card-cret img {
        width: auto;
        height: 20px;
        filter: drop-shadow(0 0 3px rgba(0,0,0,0.2));
    }

.card-status {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin: 5px -10px 0 -10px;
    padding: 5px 10px;
    border-top: 1px solid #161616;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

    .card-status div {
        flex: 1;
        text-align: center;
    }

.card-lv-up,
.card-status-change,
.card-meta {
    display: block;
    font-size: 11px;
    border-top: 1px solid #161616;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

    .card-lv-up,
    .card-status-change {
        margin: 0 -10px;
    }
    
    .summon-section .card-lv-up:last-child,
    .card-meta {
        margin: 0 -10px -10px -10px;
    }
    
    .card-lv-up a {
        display: block;
        padding: 9px 0;
        box-shadow: inset 0 -20px 20px rgba(237,28,36,0.2);
    }
    
    .card-status-change a {
        display: block;
        padding: 9px 0;
        box-shadow: inset 0 -20px 20px rgba(0,166,81,0.2);
    }
    
    .card-lv-up a,
    .card-status-change a,
    .card-meta a,
    .card-lv-up span,
    .card-status-change span,
    .card-meta span {
        display: block;
        padding: 10px 0;
    }
    
    .card-lv-up a i,
    .card-status-change a i,
    .card-meta a i {
        font-size: 13px;
    }
    
    .card-meta a.remove-team {
        box-shadow: inset 0 -20px 20px rgba(0,74,239,0.2);
    }

    .card-lv-up span,
    .card-status-change span,
    .card-meta span.add-team {
        color: #666;
    }

.card-exp {
    display: block;
    font-size: 11px;
    margin: 5px 0 10px 0;
}

.exp-bar {
    position: relative;
    width: 100%;
    height: 8px;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    font-size: 8px;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid #161616;
}

    .exp-bar-inner {
        height: 100%;
        box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
        border-radius: 8px;
        background: #2C5364;
        background: linear-gradient(to right, #2C5364, #203A43);
    }
    
    .exp-bar-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        z-index: 1;
    }

#rank-list .battle-bg {
    background-repeat: no-repeat;
    box-shadow: none;
    opacity: 0.3;
}

#rank-list .score {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

    #rank-list .score span {
        display: block;
        font-size: 20px;
    }
    
    #rank-list .score span:first-child {
        font-size: 11px;
        margin-bottom: 5px;
    }
    
    #rank-list .score span:last-child {
        margin-top: 5px;
        font-size: 11px;
    }
    
    #rank-list .battle-right .score {
        position: static;
        transform: none;
    }

    #rank-list .battle-right span:last-child {
        font-size: 9px;
    }

.hint-box {
    grid-column: 1 / -1;
    display: flex;
    position: relative;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 1px 1px 20px rgba(0,0,0,0.1), inset 0 -10px 30px rgba(255,255,255,0.4);
    
}

    .dark-mode .hint-box {
        color: #fff;
        background-color: rgba(0,0,0,0.4);
        box-shadow: 1px 1px 20px rgba(0,0,0,0.2);
    }
    
    .for-mobile .hint-box {
        margin: 10px 0;
        padding: 10px;
    }
    
    li.hint-box,
    .for-mobile li.hint-box {
        margin:  0 0 10px 0;
    }
    
    .hint-box:last-child {
        margin-bottom: 0;
    }
    
    .battle-overlay .hint-box {
        margin: 10px;
        max-width: 300px;
    }
    
.hint-icon {
    text-align: center;
    font-size: 11px;
}

    .hint-icon i {
        font-size: 18px;
        margin: 0 !important;
    }
    
.hint-text::before {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: 0;
    width: 1px;
    background-color: rgba(0,0,0,0.2);
    box-shadow: 1px 0 0 #fff;
}

    .dark-mode .hint-text::before {
        background-color: #000;
        box-shadow: 1px 0 0 rgba(255,255,255,0.1);
    }
    
    .for-mobile .hint-text::before {
        top: -10px;
        bottom: -10px;
    }
    
.hint-text {
    position: relative;
    margin-left: 15px;
    padding-left: 20px;
    font-size: 12px;
    text-align: left;
}

    .hint-text i {
        font-size: 15px;
    }
    
    .for-mobile .hint-text {
        margin-left: 10px;
        padding-left: 12px;
    }

#particles-js{ 
	position: absolute;
    top: 0;
    left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.checkbox-toggle {
    display: inline-block;
    width: 24px;
    height: 12px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid #161616;
    border-radius: 25px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 10px;
    transition: background-color 0.3s ease;
}

.checkbox-toggle .toggle-handle {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: left 0.3s ease, background-color 0.3s ease;
}

.checkbox-toggle.on {
    background-color: rgba(0,0,0,0.9);
}

.checkbox-toggle.on .toggle-handle {
    box-shadow: 0 0 1px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    border-radius: 8px;
    background: #005C97;
    background: linear-gradient(to right, #005C97, #363795);
}

.checkbox-toggle.on .toggle-handle {
    left: 13px;
}

.confetti *,
.radial-confetti * {
    font-size: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.radial-confetti {
    opacity: 0;
    will-change: transform, opacity;
    animation: confetti-fall 1s cubic-bezier(0.1, 1.0, 0.8, 1.0) forwards;
    animation-delay: var(--delay);
}

@keyframes confetti-fall {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }    
    100% {
        transform: translate(var(--translate-x), var(--translate-y)) rotate(var(--rotate));
        opacity: 0;
    }
}

body.cat-twitter {
    background-image: url(../image/twitter/cloud.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: #94DFE8;
    background-size: auto;
}

body.cat-twitter.cat-telehotimeline {
    background-image: none;
    background-color: #008080;
    font-family: Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ＭＳ Ｐゴシック", sans-serif;
}

#teleho-waiting {
    text-align: center;
    margin: 40px 0;
}

    #teleho-waiting .note {
        display: block;
        margin-top: 20px;
        font-size: 12px;
    }
    
    #teleho-waiting .note span {
        display: block;
        margin-top: 10px;
    }
    
.cat-telehotimeline pre {
    display: inline-block;
    margin: 0 auto;
    font-family: "ＭＳ Ｐゴシック", MS PGothic, sans-serif;
    font-size: 16px;
    line-height: 18px;
    text-align: left;
}

    .for-mobile.cat-telehotimeline pre {
        font-size: 12px;
        line-height: 14px;
    }
    
.for-tablet.cat-twitter #wrapper {
    padding: 0 20px;
}

.for-mobile.cat-twitter #wrapper {
    padding: 0 10px;
}

.cat-twitter a,
.cat-twitter a:hover,
.cat-twitter a.button-outline,
.cat-twitter a.button-outline:hover,
.cat-twitter .user-id {
    color: #0084B4;
}

    .cat-twitter.cat-telehotimeline a,
    .cat-twitter.cat-telehotimeline a:hover {
        color: #0000FF;
    }
    
    .cat-twitter.cat-telehotimeline .option a,
    .cat-twitter.cat-telehotimeline .option a:hover,
    .cat-twitter.cat-telehotimeline .option .anchor,
    .cat-twitter.cat-telehotimeline .option .anchor:hover {
        color: #999;
    }
    
    .cat-twitter.cat-telehotimeline nav a,
    .cat-twitter.cat-telehotimeline nav a:hover,
    .cat-twitter.cat-telehotimeline a.button-outline,
    .cat-twitter.cat-telehotimeline a.button-outline:hover,
    .cat-twitter.cat-telehotimeline .dropdown a,
    .cat-twitter.cat-telehotimeline .dropdown a:hover,
    .cat-twitter.cat-telehotimeline .dropdown a i,
    .cat-twitter.cat-telehotimeline .dropdown a:hover i,
    .cat-twitter.cat-telehotimeline .user-id {
        color: #000 !important;
    }
    
    .cat-twitter.cat-telehotimeline .user-id {
        color: #f00 !important;
    }
    
    .cat-twitter a.good-count.no-anchor,
    .cat-twitter a.good-count,
    .cat-twitter a.good-count:hover,
    .cat-twitter a.good-count:hover i,
    .cat-twitter .mention a {
        color: #999 !important;
    }
    
    .cat-twitter a.button-outline,
    .cat-twitter a.button-outline:hover,
    .cat-twitter a.button-outline *,
    .cat-twitter a.button-outline:hover * {
        color: #0084B4 !important;
    }
    
    .cat-twitter a.good-count.no-anchor,
    .cat-twitter a.good-count.voted,
    .cat-twitter a.good-count.voted:hover,
    .cat-twitter a.good-count.voted:hover i {
        color: #fbc02d !important;
    }
    
    .cat-twitter.cat-telehotimeline a.good-count.no-anchor,
    .cat-twitter.cat-telehotimeline a.good-count.voted,
    .cat-twitter.cat-telehotimeline a.good-count.voted:hover,
    .cat-twitter.cat-telehotimeline a.good-count.voted:hover i {
        color: #f91880 !important;
    }
.cat-twitter header .container {
    margin: 0;
}

.cat-twitter #introduction,
.cat-twitter .information-inner,
.cat-twitter header,
.cat-twitter header .container,
.cat-twitter #body,
.cat-twitter footer {
    margin: 0 auto;
    max-width: 768px;
}

.cat-twitter header {
    position: static;
    background: transparent !important;
}

    .for-mobile.cat-twitter header {
        margin: 5px 0;
    }
    
.cat-twitter footer {
    margin-top: 20px;
}

    .for-mobile.cat-twitter footer {
        margin-top: 10px;
    }
    
.cat-twitter header nav,
.cat-twitter footer nav {
    background-color: #fff;
    border-radius: 5px;
    padding: 7px 4px;
    font-size: 12px;
}

    .cat-twitter header nav a,
    .cat-twitter footer nav a {
        display: inline !important;
        margin: 0 3px;
    }
    
    .cat-twitter.cat-telehotimeline header nav,
    .cat-twitter.cat-telehotimeline footer nav,
    .cat-twitter.cat-telehotimeline .success,
    .cat-twitter.cat-telehotimeline .error,
    .cat-twitter.cat-telehotimeline .dropdown ul {
        padding: 8px 12px;
        border-radius: 0;
        border-style: none;
        box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080, inset 1px 1px 0 #c0c0c0, inset 2px 2px 0 #fff;
    }

    .cat-twitter.cat-telehotimeline header nav,
    .cat-twitter.cat-telehotimeline footer nav,
    .cat-twitter.cat-telehotimeline .dropdown ul {
        background-color: #c0c0c0;
    }
    
        .cat-twitter.cat-telehotimeline .dropdown ul a:hover {
            background-color: transparent;
            text-decoration: underline !important;
        }
        
    .cat-twitter.cat-telehotimeline .success {
        margin-bottom: 4px;
    }
    
    .cat-twitter.cat-telehotimeline .button-outline,
    .cat-twitter.cat-telehotimeline .close {
        padding: 0 4px;
        background-color: #c0c0c0 !important;
        border-radius: 0 !important;
        box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080, inset 1px 1px 0 #fff, inset 2px 2px 0 #dfdfdf !important;
        color: #000 !important;
        border-color: transparent !important;
        border-width: 1px !important;
    }
    
        .cat-twitter.cat-telehotimeline .button-outline i {
            display: none;
        }

        .cat-twitter.cat-telehotimeline .button-outline:hover,
        .cat-twitter.cat-telehotimeline .close:hover {
            background-color: #c0c0c0 !important;
            border-color: #000 !important;
        }

    .cat-twitter.cat-telehotimeline .close i {
        font-size: 13px;
    }
    
.cat-twitter .logo img {
    width: 155px;
    height: auto;
}

    .cat-twitter .header-left a {
        margin: 0;
        padding: 0;
        background-color: transparent;
    }
    
    .for-mobile.cat-twitter .logo img {
        width: 100px;
        margin-top: -12px;
    }

.cat-telehotimeline .title-bar {
    background-color: #000080;
    padding: 2px 2px 2px 8px;
}

    .cat-telehotimeline .title-bar h2 {
        font-weight: normal;
        margin: 0;
        padding: 0;
        color: #fff;
        font-size: 12px;
    }

.cat-telehotimeline .menu-bar {
    margin: 1px 0 3px 0;
    padding: 2px 4px;
    background-color: #c0c0c0;
    border-radius: 0;
    box-shadow: inset -1px -1px 0 #fff, inset -2px -2px 0 #808080, inset 1px 1px 0 #808080, inset 2px 2px 0 #fff;
}

    .cat-telehotimeline .menu-bar a {
        display: inline-block;
        font-size: 12px;
        margin: 2px 4px;
        padding: 2px 4px;
    }
    
    .cat-telehotimeline .menu-bar a:hover {
        box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
    }
    
.cat-twitter #content {
    display: flex;
    background-color: #fff;
    border-radius: 5px;
    padding: 0;
}

    .cat-twitter.cat-telehotimeline #content {
        display: block;
        background-color: #c0c0c0;
        border-radius: 0;
    }
    
    .cat-twitter#c #content,
    .for-mobile.cat-twitter #content {
        display: block;
    }
        
.cat-twitter #content section {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

    .cat-twitter.cat-telehotimeline #content section {
        background-color: #c0c0c0;
        border-radius: 0;
        box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080, inset 1px 1px 0 #c0c0c0, inset 2px 2px 0 #fff;
    }
    
    .cat-twitter #content section:first-child {
        position: relative;
        width: 563px;
        padding: 20px;
    }
    
        .cat-twitter.cat-telehotimeline #content section:first-child {
            width: auto;
            padding: 4px;
        }
        
    .cat-twitter #content section:first-child::before {
        content: "";
        position: absolute;
        top: -10px;
        left: 30px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
    }
    
        .cat-twitter.cat-telehotimeline #content section:first-child::before {
            display: none;
        }
        
    .cat-twitter #content section#about {
        font-size: 12px;
        width: 205px;
        background-color: lightcoral;
        align-self: stretch;
        background-color: #DAFFCC;
        border-radius: 0 5px 5px 0;
        border-left: 1px solid #BBDCAD;
        box-sizing: border-box;
        padding: 20px 15px;
    }
    
        .cat-twitter#c #content section:first-child,
        .cat-twitter#comment_form #content section:first-child,
        .for-mobile.cat-twitter #content section,
        .for-mobile.cat-twitter #content section#about {
            width: auto;
            margin: 0;
            padding: 10px;
        }
        
        .for-mobile.cat-twitter #content section#about {
            border-top: 1px solid #BBDCAD;
            border-left-style: none;
            border-radius: 0 0 5px 5px;
        }
        
        .cat-twitter.cat-telehotimeline #content section#about {
            width: auto;
            margin: 0;
            padding: 4px;
            background-color: transparent;
            border-style: none;
            border-top: 20px solid #008080;
            border-radius: 0;
            box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080, inset 1px 1px 0 #c0c0c0, inset 2px 2px 0 #fff;
        }
        
            .for-mobile.cat-twitter.cat-telehotimeline #content section#about {
                border-top-width: 10px;
            }
            
        .cat-twitter.cat-telehotimeline #content section#about .body {
            font-size: 100%;
            padding: 4px;
        }
        
        .cat-twitter.cat-telehotimeline #content section#about .body p:last-child {
            text-align: center;
            margin-bottom: 0;
            font-weight: bold;
        }
        
    .cat-twitter #content section#about h1,
    .cat-twitter #content section#about p {
        margin-bottom: 1em;
        color: #333;
    }
    
    .cat-twitter #content section#about hr {
        border-color: #BDDCAD;
        margin: 1em 0;
    }
    
    .cat-twitter #content section#about .note {
        font-size: 11px;
    }
    
.cat-twitter .form-section .icon {
    display: none;
}

.cat-telehotimeline input[type=text] {
    background-color: #fff;
    border-style: none;
    padding: 8px;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000, inset -1px -1px 0 #fff, inset -2px -2px 0 #dfdfdf;
}

.cat-telehotimeline #comments-list {
    background-color: #fff;
    padding: 12px;
    box-shadow: inset 1px 1px 0 #808080, inset 2px 2px 0 #000, inset -1px -1px 0 #fff, inset -2px -2px 0 #dfdfdf;
}

.cat-twitter .comment-section,
.cat-twitter .form-section,
.cat-twitter #page-description,
.cat-twitter .page-nav,
.cat-twitter .page-nav-end {
    margin: 0;
    padding: 10px 0 !important;
    clear: both;
    border-color: #eee;
}

    .cat-twitter.cat-telehotimeline .comment-section:first-child {
        border-top-style: none;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
.cat-twitter.cat-telehotimeline .page-nav-end,
.cat-twitter.cat-telehotimeline .page-nav,
.cat-twitter.cat-telehotimeline .so-far {
    border-style: none;
    
}

    .cat-twitter.cat-telehotimeline .page-nav-end + .page-nav {
        padding-top: 0 !important;
    }
    
.cat-twitter .page-nav .button-outline {
    background-color: transparent !important;
    border-radius: 5px;
    border-width: 1px;
    border-color: #ddd #ccc #ccc #ddd;
    margin: 0 10px;
}

.cat-twitter .form-section {
    padding-top: 0 !important;
}

        .cat-twitter#comment_form .form-section {
            padding-top: 10px !important;
        }
        
        .cat-twitter .success + .form-section,
        .cat-twitter .error + .form-section,
        .cat-twitter .menu-bar + .form-section {
            border-top-style: none;
        }
        
.cat-twitter .please-section {
    margin-bottom: 10px !important;
    padding: 10px !important;
}

    .cat-twitter .comment-section .group-name {
        display: none;
    }
    
    .cat-twitter .comment-section .body,
    .cat-twitter .comment-section .footer,
    .cat-twitter .please-section .body {
        margin: 0 40px 0 58px;
    }
    
    .cat-twitter .please-section .body {
        margin: 0;
        padding: 0;
    }
    
        .for-mobile.cat-twitter .comment-section .body,
        .for-mobile.cat-twitter .comment-section .footer {
            margin: 0 30px 0 46px;
        }
        
    .cat-twitter .comment-section .user-id {
        font-weight: bold;
    }
    
    .cat-twitter .comment-section .body {
        font-size: 14px;
    }
    
        .cat-twitter .comment-section .body .text,
        .cat-twitter .comment-section .body .copied-text {
            display: inline;
        }
        
        .cat-twitter .comment-section .body .copied-text {
            margin-left: 0.1em;
            font-style: italic;
            color: #666;
        }
        
    .cat-twitter .comment-section .footer {
        margin-top: 3px;
        font-size: 11px;
        color: #999;
    }
    
    .cat-twitter .comment-section .footer * {
        display: inline;
        font-size: 11px;
    }
    
    .cat-twitter .comment-section .footer i {
        font-size: 13px;
    }
    
    .cat-twitter .form-section .header,
    .cat-twitter .form-section .body {
        margin-left: 0;
        margin-right: 0;
    }
    
        .cat-twitter .form-section textarea {
            height: 4em;
            border-radius: 5px;
        }
        
        .cat-twitter .form-section .form-submit {
            margin-top: -10px;
        }
        
        .cat-twitter.cat-telehotimeline .form-section .form-submit {
            margin-top: -15px;
            margin-bottom: -5px;
        }
        
        .cat-twitter .form-section .form-submit .float-left {
            font-size: 11px;
            color: #666;
        }
        
        .cat-twitter.cat-telehotimeline .form-section .form-submit .float-left {
            margin-left: 4px;
        }
        
            .cat-twitter .form-section .form-submit .float-left a {
                display: inline;
                font-size: 11px !important;
                margin: 0;
                padding: 0;
            }
        
        .cat-twitter .form-section .form-submit .button {
            border-radius: 5px;
            padding: 5px !important;
        }
        
        .for-mobile.cat-twitter .form-section .form-submit {
            margin-top: 0;
            text-align: right;
        }
        
    .cat-twitter .form-section h1 {
        float: left;
        font-weight: normal;
    }
    
    .cat-twitter .form-section h1,
    .cat-twitter .form-section .check-length-result {
        font-size: 18px;
    }
    
        .for-mobile.cat-twitter .form-section h1,
        .for-mobile.cat-twitter .form-section .check-length-result {
            font-size: 16px;
        }
        
.cat-twitter.cat-telehotimeline #page-description {
    display: none;
}

.cat-twitter.cat-telehotimeline .note {
    color: #000 !important;
}

.cat-twitter .icon {
    width: 48px;
    height: 48px;
    margin: 0 0 10px 0;
    padding: 0;
    text-align: center;
    background-color: #f2f2f2;
}
    
    .cat-twitter.cat-telehotimeline .icon,
    .cat-twitter.cat-telehotimeline .icon img {
        background-color: transparent;
    }
    
.cat-twitter .icon img {
    width: 36px;
    height: 36px;
    margin: 6px 0 0 0;
    padding: 0;
    background-color: #f2f2f2;
}
    
    .for-mobile.cat-twitter .icon,
    .for-mobile.cat-twitter .icon img {
        width: 36px;
        height: 36px;
        margin-top: 0;
    }

.cat-twitter .please-section {
    border-style: solid;
    margin: 0;
    padding: 20px;
    background-color: #FFFFCC;
    border-color: #FFFF00;
}

.cat-twitter .please-section .button-outline {
    border-radius: 5px;
    border-color: #417596 !important;
    background-color: #417596 !important;
}

.cat-twitter #introduction {
    margin-bottom: 20px !important;
    padding: 0 !important;
    background-color: #fff;
    border-radius: 5px !important;
    box-shadow: none;
    font-size: 13px;
}

    .cat-twitter.cat-telehotimeline #introduction {
        background-color: #c0c0c0;
        border-radius: 0 !important;
        box-shadow: inset -1px -1px 0 #000, inset -2px -2px 0 #808080, inset 1px 1px 0 #c0c0c0, inset 2px 2px 0 #fff;
    }

    .cat-twitter #introduction .container {
        padding: 20px;
    }
    
    .cat-twitter #introduction .button-outline {
        color: #fff !important;
    }
    
        .cat-twitter.cat-telehotimeline #introduction .button-outline {
            color: #000 !important;
        }
        
    .for-mobile.cat-twitter #introduction {
        margin-bottom: 10px !important;
    }
    
        .for-mobile.cat-twitter #introduction .container {
            padding: 10px;
        }
        
    #introduction p {
        margin-bottom: 1em;
    }

    #introduction p:first-of-type {
        opacity: 0.9;
    }
    
    #introduction > h1 {
        font-size: 14px;
        margin: 0;
        padding: 10px;
        border-radius: 5px 5px 0 0;
        text-align: center;
        border-bottom: 1px solid #eff1f5;
    }

        .for-mobile #introduction > h1 {
            margin-bottom: 0;
            padding: 10px;
            border-radius: 0;
        }

        .cat-telehotimeline #introduction > h1 {
            border-style: none;
            padding: 4px 4px 0 4px;
            margin: 0;
        }
    
        .cat-telehotimeline #introduction > h1 span {
            display: block;
            background-color: #000080;
            margin: 0;
            padding: 2px 8px;
            font-weight: normal;
            border-radius: 0;
            color: #fff;
            font-size: 12px;
            text-align: left;
        }
    
    #introduction p:last-child {
        margin-bottom: 0;
        font-size: 10px;
        opacity: 0.7;
    }

    #introduction .button-outline,
    #introduction .button-outline:hover {
        display: block;
    }
    
.cat-twitter .links-list {
    margin: 0 0 -1px 0;
    padding: 0 5px;
    font-size: 12px;
    border-style: none;
}

    .for-mobile.cat-twitter .links-list {
        margin: 0 0 -1px 0;
    }
    
    .cat-twitter.cat-telehotimeline .links-list {
        margin: 0;
        background-color: #c0c0c0;
        border-bottom: 1px solid #fff;
    }
    
.cat-twitter .links-list .list {
    overflow-x: visible;
    white-space: normal;
    -webkit-overflow-scrolling: auto;
}

.cat-twitter .links-list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ededed;
    z-index: 1;
}

    .cat-twitter.cat-telehotimeline .links-list::after {
        display: none;
    }

.cat-twitter .links-list li {
    position: relative;
    margin: 0;
    padding: 0;
    z-index: 2;
    vertical-align: bottom;
}

.cat-twitter .links-list li a {
    padding: 6px 8px !important;
    color: #333;
    background-color: #f9f9f9;
    border: 1px solid #ededed;
}

    .cat-twitter.cat-telehotimeline .links-list li a {
        padding: 4px 8px !important;
        background-color: #c0c0c0;
        border-radius: 2px 2px 0 0;
        border-color: transparent;
        border-style: none;
        box-shadow: inset -1px 0 0 #000, inset -2px 0 0 #808080, inset 1px 1px 0 #fff, inset 2px 2px 0 #dfdfdf !important;
        color: #000 !important;
    }
    
    .cat-twitter.cat-telehotimeline .links-list li:first-child a {
        margin-left: 0;
    }
    
    .cat-twitter.cat-telehotimeline .links-list li:last-child a {
    }
    
    .cat-twitter .links-list li:first-child a {
        border-right-style: none;
    }
    
    .cat-twitter .links-list li a.focused {
        background-color: #fff;
        border-bottom-color: #fff;
        font-weight: bold;
    }
    
    .cat-twitter.cat-telehotimeline .links-list li a.focused {
        background-color: #c0c0c0;
        border-color: transparent;
        padding-bottom: 7px !important;
        margin-bottom: -1px;
    }