@charset "UTF-8";

#rule {
    width: 85%;
    margin: 0 auto;
}
h3 {
    margin: 5em auto 2em;
}

.side {
    position: relative;
    margin: 3.5em 0;
    padding: 0.5em 0;
    border: solid 1px #72787c;
    border-radius: 8px;
}
.side-title {
    position: absolute;
    display: inline-block;
    top: -32px;
    left: 1em;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    color: white;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.hako {
    width: 47%;
    display: inline-block;
    margin: 1em 0.5em;
    vertical-align: top;
    /* border: springgreen 1px solid; */
}
.bun {
    text-align: justify;
    margin: 0 0 0 auto;
    width: calc(100% - 135px);
    /* border: yellow 1px solid; */
    font-size: 0.9em;
}

img {
    float: left;
    width: 120px;
    /* margin-right: 1em; */
}

.as {
    font-size: 1.1em;
    font-weight: bold;
    color: white;
    margin-bottom: 0.3em;
    font-weight: bold;
    /* border: blue 1px solid; */
}
.as::before {
    content: "　";
}

.sara {
    text-shadow: 0 0 3px #ff0000, 0 0 20px #ff0000;
}
.werewolf {
    text-shadow: 0 0 3px #ff009d, 0 0 20px #ff009d;
}
.madman {
    text-shadow: 0 0 3px #8c00ff, 0 0 3px #8c00ff, 0 0 20px #8c00ff;
}
.human {
    text-shadow: 0 0 20px #33ff00;
}
.knight {
    text-shadow: 0 0 20px #fbff00;
}
.fortune {
    text-shadow: 0 0 3px #201cff, 0 0 3px #201cff, 0 0 20px #201cff;
}
.phychic {
    text-shadow: 0 0 20px #00eeff;
}

.nagare {
    text-align: left;
    margin: 0 auto 1em;
}
.oowaku {
    padding: 1em 0;
    margin: 0 auto;
    border-bottom: #72787c 1px solid;
    max-width: 710px;
}
.oowaku:last-child {
    border-bottom: none;
}
.a {
    float: left;
    width: 4em;
    font-size: 1.1em;
    vertical-align: top;
    /* border: tomato 1px solid; */
}
.b {
    font-size: 0.9em;
    /* border: aqua 1px solid; */
    width: calc(100% - 6em);
    margin: 0 0 0 auto;
    text-align: justify;
}
.c {
    margin: 0.4em auto;
    color: white;
    font-weight: bold;
    /* border-bottom: 1px solid white; */
}
.pp {
    margin-bottom: 1.5em;
    font-size: 0.9em;
}

.jouken {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    /* border: aqua 1px solid; */
}

.d {
    width: 14em;
}

@media screen and (max-width: 800px) {
    .hako {
        width: 100%;
        margin: 1em 0;
    }
    .bun {
        width: calc(100% - 115px);
        padding: 0 0.8em;
    }
    img {
        width: 80px;
        margin-left: 0.8em;
    }
    .oowaku {
        width: 100%;
    }
    #rule br {
        display: none;
    }
}

@media screen and (max-width: 520px) {
    .jouken {
        display: block;
        margin: 0 auto;
    }
    .d {
        width: unset;
    }
}