@charset "UTF-8";
@supports(top:0){
    body,html{
        height:100%
    }
    header li,header li a{
        padding:5px 12px;
        color:#fff
    }
    #search,body{
        font-family:var(--font)
    }
    #info-prop li img,#search-howto img{
        image-rendering:-webkit-optimize-contrast
    }
    #info-ic img{
        width:inherit;
        height:auto;
    }
    body,header{
        background:#000
    }
    #result h2,header h1{
        display:none
    }
    #info-name button:after,#info-name button:before,#result article h3:after,#result article h3:before,#search-info:after{
        content:"";
        display:block
    }
    #info-prop,#result article,#result li,#result ul,#search-demon,#search-info,body{
        position:relative
    }
    #result article h3,#search-demon,footer,header h1{
        text-align:center
    }
    :root{
        --font:system-ui,"Segoe UI","Yu Gothic UI",sans-serif;
        --font16:1.142rem;
        --font14:1rem;
        --font13:.928rem;
        --font12:.857rem;
        --font11:.785rem
    }
    html{
        font-size:calc(1.1rem * .8)
    }
    body{
        background:-webkit-linear-gradient(top,#9d5da9 0,#b15c76 100%) fixed;
        background:linear-gradient(to bottom,#9d5da9 0,#b15c76 100%) fixed;
        color:#000;
        line-height:1.6
    }
    input[type=text]:focus{
        outline:0
    }
    :placeholder-shown{
        color:rgba(0,0,0,.25)
    }
    ::-webkit-input-placeholder{
        color:rgba(0,0,0,.25)
    }
    ul{
        list-style:none;
        margin:0;
        padding:0
    }
    header h1{
        margin:0;
        color:transparent;
        font-size:36px;
        line-height:40px;
        letter-spacing:.1em
    }
    header ul{
        display:flex;
        align-items:center
    }
    header li{
        font-size:var(--font12)
    }
    header li img{
        display:inline-block;
        margin:2px .8em 0 0;
        vertical-align:top
    }
    header li a{
        opacity:.5;
        margin:-5px -12px;
        display:block;
        text-decoration:none;
        transition:all .2s
    }
    header li a.moon{
        opacity:1;
    }
    header li a:hover{
        opacity:1
    }
    #search-demon{
        padding-top:20px
    }
    #search-info{
        box-sizing:border-box;
        z-index:1;
        right:0;
        left:0;
        width:380px;
        margin:0 auto;
        padding:20px 20px 15px;
        border:1px solid #945e95;
        border-bottom:none;
        background:-webkit-linear-gradient(top,rgba(255,255,255,.6) 0,rgba(255,255,255,.3) 70%);
        background:linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,.3) 70%);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(255,255,255,.2);
        text-align:left
    }
    #search-info:after{
        clear:both
    }
    #search-info li{
        float:left;
        font-size:var(--font11);
        font-style:italic
    }
    #search-info li span{
        display:inline-block;
        padding-left:5px;
        font-size:var(--font14);
        font-weight:700;
        font-style:normal
    }
    #search-info #info-ic{
        overflow:hidden;
        width:48px;
        height:48px;
        margin-right:20px;
        border-radius:3px;
        background:repeating-linear-gradient(-45deg,#5b5b5a,#5b5b5a 5px,#575755 0,#575755 10px);
        font-size:0
    }
    #info-name button,#search{
        border:none;
        background:0 0;
        box-sizing:border-box
    }
    #search-info #info-name{
        display:flex;
        float:none;
        margin-top:-.2em;
        margin-bottom:.5em;
        margin-left:68px
    }
    #search-info #info-name label{
        display:flex;
        align-items:center;
        min-width:7em
    }
    #search{
        padding:.2em .2em .1em;
        font-size:var(--font16);
        font-weight:700;
        max-width:10em
    }
    #info-name button{
        position:absolute;
        z-index:1;
        right:20px;
        width:24px;
        height:24px;
        font-size:0;
        vertical-align:top;
        line-height:22px;
        cursor:pointer
    }
    #info-name button:before{
        position:absolute;
        top:5px;
        left:5px;
        width:10px;
        height:10px;
        border-radius:10px;
        box-shadow:0 0 0 2px inset
    }
    #info-name button:after{
        position:absolute;
        top:12px;
        left:14px;
        width:2px;
        height:7px;
        box-shadow:0 0 0 2px inset;
        transform:rotate(-45deg)
    }
    #search-info #info-grade,#search-info #info-rare{
        margin-left:12px
    }
    #info-prop{
        z-index:1;
        width:378px;
        margin:0 auto 20px;
        padding:10px 10px 5px;
        box-sizing:border-box;
        background:rgba(255,255,255,.2);
        box-shadow:inset 0 -1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.2),inset -1px 0 0 rgba(255,255,255,.2)
    }
    #result .sozai-search li:nth-child(1),#result ul{
        box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.1),inset 1px 0 0 rgba(255,255,255,.1),inset -1px 0 0 rgba(255,255,255,.1)
    }
    #info-prop ul{
        display:flex;
        justify-content:center;
        flex-wrap:wrap
    }
    #info-prop li{
        display:flex;
        align-items:center;
        min-height:1em;
        margin:0 1em 5px 0;
        font-size:var(--font12);
        text-shadow:0 0 0 rgba(0,0,0,.3),0 1px 1px rgba(255,255,255,.3)
    }
    #info-prop li:last-of-type{
        margin-right:0
    }
    #info-prop li img{
        margin-right:5px;
        width:12px;
        height:auto;
        border:1px solid #000;
        image-rendering:crisp-edges
    }
    .search-remove{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:15px
    }
    .search-remove dt{
        margin:0 15px 0 0;
        color:#fff
    }
    .search-remove dt:after{
        content: " :";
    }
    .search-remove dd{
        margin: 0 0px;
    }
    .search-remove ul{
        display:flex;
        justify-content:center;
        line-height:1
    }
    .search-remove li{
        width:2.8em;
        height:1.9em;
        color:#fff;
        font-size:var(--font13);
        line-height:1.9
    }
    .search-remove li+li{
        margin-left:8px
    }
    .search-remove input[type=checkbox]{
        display:none;
        margin-right:3px;
        vertical-align:top
    }
    .search-remove label{
        display:block;
        height:1.9em;
        padding-left:1px;
        background:#000;
        letter-spacing:1px;
        cursor:pointer
    }
    .search-remove input:checked+label{
        opacity:.4
    }
    #search-howto{
        margin-top:15px;
        margin-bottom:-3px
    }
    #search-howto img{
        width:154px;
        height:auto;
        image-rendering:crisp-edges
    }
    #result{
        padding:20px 0
    }
    #result article{
        display:flex;
        overflow:hidden;
        flex-wrap:wrap;
        box-sizing:border-box;
        margin:0 auto;
        padding:0 20px 0 70px
    }
    #result article h3{
        box-sizing:border-box;
        position:absolute;
        top:15px;
        left:0;
        width:calc(2.8rem + 24px);
        min-height:40px;
        max-height:40px;
        margin:0;
        padding:0 10px 5px;
        background:rgba(0,0,0,.5);
        color:#fff;
        font-size:var(--font12);
        line-height:1
    }
    #result article h3:before{
        position:absolute;
        top:-15px;
        left:0;
        border:calc((2.8rem + 24px)/ 2) solid transparent;
        border-top-width:0;
        border-bottom-width:15px;
        border-bottom-color:rgba(0,0,0,.5)
    }
    #result article h3:after{
        position:absolute;
        bottom:-30px;
        left:0;
        border:0 solid transparent;
        border-width:15px calc((2.8rem + 24px)/ 2);
        border-top-color:rgba(0,0,0,.5);
        border-left-color:rgba(0,0,0,.5)
    }
    #result article.sozai-search{
        display:flex;
        overflow:hidden;
        flex-wrap:wrap;
        box-sizing:border-box;
        margin:0 auto;
        padding:0 20px 0 70px
    }
    #result article.sozai-search h3{
        box-sizing:border-box;
        position:absolute;
        top:15px;
        left:0;
        width:calc(3.2rem + 24px);
        min-height:40px;
        max-height:40px;
        margin:0;
        padding:0 10px 5px;
        background:rgba(0,0,0,.5);
        color:#fff;
        font-size:var(--font12);
        line-height:1
    }
    #result article.sozai-search h3:before{
        position:absolute;
        top:-15px;
        left:0;
        border:calc((3.2rem + 24px)/ 2) solid transparent;
        border-top-width:0;
        border-bottom-width:15px;
        border-bottom-color:rgba(0,0,0,.5)
    }
    #result article.sozai-search h3:after{
        position:absolute;
        bottom:-30px;
        left:0;
        border:0 solid transparent;
        border-width:15px calc((3.2rem + 24px)/ 2);
        border-top-color:rgba(0,0,0,.5);
        border-left-color:rgba(0,0,0,.5)
    }
    #result ul{
        display:flex;
        margin-bottom:15px;
        margin-left:15px;
        padding:10px 7px 10px 8px;
        border:1px solid rgba(0,0,0,.2);
        border-bottom-width:10px;
        background:rgba(0,0,0,.3)
    }
    #result li{
        min-width:105px;
        max-width:105px
    }
    #result .sozai-search ul{
        margin-left:135px
    }
    #result .sozai-search li:nth-child(1){
        padding:10px 7px 0 8px;
        position:absolute;
        left:-121px;
        top:-1px;
        bottom:-10px;
        min-width:104px;
        max-width:104px;
        border:1px solid rgba(0,0,0,.3);
        border-bottom-width:10px;
        border-right:none;
        background:rgba(255,255,255,.1)
    }
    #result .sozai-search li:nth-child(2){
        margin-left:0
    }
    .result-item{
        position:relative;
        padding-left:43px;
        line-height:1.2
    }
    .result-rare{
        display:block;
        min-width:5.1em;
        margin-bottom:2px;
        color:#ffe041;
        font-size:.714rem;
        letter-spacing:2px
    }
    .result-grade{
        display:block;
        color:#c5c5c5;
        font-size:var(--font12);
        word-break:keep-all
    }
    .result-grade-num{
        color:#e8e8e8;
        font-size:1.142rem;
        font-weight:700;
        font-style:italic;
        text-shadow:1px 1px 0 rgba(0,0,0,.5)
    }
    .result-item img{
        position:absolute;
        z-index:1;
        bottom:0;
        left:2px;
        width:32px;
        height:auto;
        image-rendering:-webkit-optimize-contrast;
        image-rendering:crisp-edges
    }
    #result ul .result-name{
        display:block;
        margin-bottom:.75em;
        padding:2px 5px;
        background:rgba(0,0,0,.4);
        color:#fff;
        font-size:var(--font12);
        text-align:center
    }
    #result ul li{
        margin-left:10px
    }
    #result ul li:last-child{
        margin-left:0px
    }
    .summon , .scrifice{
        cursor:pointer
    }
    .price{
        display:block;
        padding:8px 0px 2px 15px;
        color:#fff;
        text-align:left;
        // cursor:pointer;
    }
    .memo{
        display:none;
    }
    #message{
        display:flex;
        align-items:center;
        justify-content:center;
        margin-top:15px
    }
    #message p{
        margin:0 15px 0 0;
        color:#fff
    }
    footer{
        display:flex;
        justify-content:center;
        padding:20px 0;
        background:#000;
        color:#fff;
        font-size:var(--font11);
        align-items:center
    }
    footer img,footer small{
        display:inline-block;
        vertical-align:top
    }
    footer p{
        margin:0 .5em 0 1.5em
    }
    footer small{
        font-size:100%
    }
    @media(max-width:620px){
        #search-info #info-grade,#search-info #info-rare,header li+li{
            margin-left:5px
        }
        body{
            border-top:10px solid #000
        }
        :placeholder-shown{
            font-size:1rem
        }
        ::-webkit-input-placeholder{
            font-size:1rem
        }
        header{
            background:0 0
        }
        header ul{
            margin:0 10px 10px
        }
        header li{
            box-sizing:border-box;
            width:50%;
            margin-right:5px;
            padding:0;
            text-align:center
        }
        header li a{
            margin:0;
            padding:10px 0
        }
        header li span{
            display:block;
            background:#000;
            padding:10px 0;
            border-radius:0 0 5px 5px
        }
        header li+li{
            margin-right:0
        }
        header li img{
            display:block;
            margin:0 auto 5px
        }
        #search-demon{
            padding-top:0
        }
        #search-info{
            padding:10px;
            width:auto;
            border-top:none;
            border-right:none;
            border-left:none
        }
        #search-info #info-ic{
            margin-right:10px
        }
        #search-info #info-name{
            margin:0 0 0 58px
        }
        #search-info li span{
            position:relative;
            top:.1em;
            font-size:var(--font13)
        }
        #search-info #info-rare span{
            top:.05em
        }
        #search{
            max-width:55%
        }
        #info-name button{
            right:10px
        }
        #info-prop{
            width:auto
        }
        #info-prop li{
            margin-right:.5em;
            font-size:var(--font11)
        }
        .search-remove{
            flex-wrap:wrap;
            margin-top:10px
        }
        .search-remove dt p{
            width:100%;
            margin-bottom:.4em;
            padding-right:10px;
            padding-left:10px
        }
        #result article{
            justify-content:center;
            padding-right:70px
        }
      #result ul{
          margin-left:25px;
      }
        #result li{
           /* min-width: 105; */
            max-width: 105px;
        }
         #result li:last-child {
            min-width: 42px;
            max-width: 42px;
            font-size:var(--font13)
        }
    }
    @media(min-width:1921px){
        html{
            font-size:1vw
        }
    }
}

a {
text-decoration: none;
}

h1.moon {
  margin: 10px;
}

div.calendar {
  margin: 10px;
}

/*
 * styled by https://www.cleancss.com/css-beautify/
 */