:root{
    --c-red:#ee0000;
    --c-yellow:#ffc000;
    --c-blue:#0168b7;
    --c-black:#000000;
    --c-white:#ffffff;
    --sign-size:200px;
}
body{ padding:20px; }
div, p, div:before, div:after{ padding:0px; margin:0; box-sizing:border-box;}

/* 標識のベース設定 */
.route_sign{
    width:var(--sign-size);
    height:var(--sign-size);
    position:relative;
    overflow:hidden;
}
.sign_base,
.sign_content{
    position:absolute;
    width:100%; height:100%;
    margin:0;
    top:0; bottom:0;
    left:0; right:0;
}

/* 丸い標識 */
.route_sign.radius,
.route_sign.radius .sign_base{
    border-radius:var(--sign-size);
}

/* ひし形の標識 */
.route_sign.hishigata{
    border-radius:0.25em;
    transform:rotate(45deg);
    /* 回転したことによってふちっこがはみ出てしまう */
    margin-top:calc(var(--sign-size) / 4.5);
    margin-bottom:calc(var(--sign-size) / 4.5);
    margin-left:calc(var(--sign-size) / 4.5);
}
.route_sign.hishigata .sign_content{
    transform:rotate(-45deg); /* 0°に戻す */
}

/* 動物注意 - たぬき */
#lv4 .sign_base{
    width:100%; height:100%;
    background:var(--c-yellow);
}
#lv4 .sign_base:before,
#lv4 .sign_base:after{
    content:"";
    display:block;
    position:absolute;
    margin:auto;
    top:0; bottom:0;
    left:0; right:0;
}
#lv4 .sign_base:before{
    width:95%; height:95%;
    border:var(--c-black) solid 6px;
}

#lv4 .sign_base:after{
    width:calc(95% - 8px); height:calc(95% - 8px);
    background:var(--c-yellow);
    border-radius:8px;
}

#lv4  .sign_content .tanuki{
    position:absolute;
    margin:auto;
    top:0; bottom:0;
    left:10px; right:0;
    width:calc(var(--sign-size) * 0.7);
    height:calc(var(--sign-size) * 0.5);
}

/* しっぽ */
#lv4  .sign_content .tanuki .tail{
    position:absolute;
    left:-22px; bottom:12px;
    width:30px;
    height:60px;
}
#lv4  .sign_content .tanuki .tail *{
    background:var(--c-black);
    position:absolute;
}
#lv4  .sign_content .tanuki .tail .tl01{
    width:75%; height:60%;
    margin:auto;
    top:-10px; left:75%; right:0;
    transform:rotate(55deg);
    border-radius:50% 0 0 0;
}
#lv4  .sign_content .tanuki .tail .tl02{
    width:100%;
    height:70%;
    top:10%;
    border-radius:120% 120% 50% 50%;
}
#lv4  .sign_content .tanuki .tail .tl03{
    width:120%; height:90%;
    border-radius:120% 120% / 150% 120%;
    bottom:0;
    right:-3px;
    transform:rotate(15deg);
}

/* からだ */
#lv4 .sign_content .tanuki .tanu_body{
    width:70%;
    height:80%;
    position:absolute;
    left:10%;
}
#lv4 .sign_content .tanuki .tanu_body *{
    background:var(--c-black);
    position:absolute;
}
#lv4 .sign_content .tanuki .tanu_body .tnb01{
    width:110%; height:55%;
    top:-5%; left:-8%;
    border-radius:120% 100% 0 0 / 200% 180% 0 0;
}
#lv4 .sign_content .tanuki .tanu_body .tnb02{
    width:100%;
    height:40%;
    margin:auto;
    top:0; bottom:0;
}
#lv4 .sign_content .tanuki .tanu_body .tnb03{
    width:80%; height:35%;
    bottom:0; right:0;
    border-radius:0 0 100% 100% /0 0 180% 180% ;
    border-bottom:var(--c-yellow) solid 3px;
}

/* あし */
#lv4 .sign_content .tanuki .legs{
    position:absolute;
    width:90%; height:50%;
    bottom:0;
    right:0;
}
#lv4 .sign_content .tanuki .legs .lg-b-left *,
#lv4 .sign_content .tanuki .legs .lg-b-right *,
#lv4 .sign_content .tanuki .legs .lg-f-left *,
#lv4 .sign_content .tanuki .legs .lg-f-right *{
    background:var(--c-black);
}
#lv4 .sign_content .tanuki .legs .lg-b-left{
    height:100%; width:20%;
    position:absolute;
    transform:rotate(20deg);
    left:-8px;
}
#lv4 .sign_content .tanuki .legs .lgbl01{
    width:0; height:0;
    position:absolute;
    background:transparent;
    border-left:transparent solid 20px;
    border-right:transparent solid 20px;
    border-top:var(--c-black) solid 30px;
    left:-5px;
    transform:rotate(-5deg);
}

#lv4 .sign_content .tanuki .legs .lgbl01:before{
    content:"";
    display:block;
    width:2px; height:23px;
    background:var(--c-yellow);
    position:absolute;
    top:-23px; right:-10px;
    transform:rotate(32deg);
}

#lv4 .sign_content .tanuki .legs .lgbl02{
    width:35%; height:40%;
    position:absolute;
    bottom:6px; right:6px;
}

#lv4 .sign_content .tanuki .legs .lgbl03{
    width:60%; height:15%;
    position:absolute;
    bottom:6px; right:0px;
    border-radius:30% 40% 30% 30%;
}

#lv4 .sign_content .tanuki .legs .lgbl04{
    width:50px; height:30px;
    position:absolute;
    left:-36px; top:12px;
    border-radius:75% / 150%;
    border:transparent solid 2px;
    border-right:var(--c-black) solid 5px;
    background:transparent;
    transform:rotate(-14deg) skewX(8deg);
}


#lv4 .sign_content .tanuki .legs .lg-b-right{
    height:100%; width:20%;
    position:relative;
    transform:rotate(0deg);
    left:10px;
    z-index:-200;
}

#lv4 .sign_content .tanuki .legs .lgbr01{
    width:32%; height:100%;
    position:absolute;
    right:25%; top:-15%;
    border-radius:0.2em;
    transform:skewX(10deg);
}


#lv4 .sign_content .tanuki .legs .lgbr02{
    width:50%; height:15%;
    position:absolute;
    bottom:13%; right:0%;
    border-radius:30%;
    transform:skewX(10deg);
}


#lv4 .sign_content .tanuki .legs .lg-f-left{
    height:100%; width:20%;
    position:absolute;
    transform:rotate(-10deg);
    top:18%; right:30%;
}

#lv4 .sign_content .tanuki .legs .lgfl01{
    position:absolute;
    width:35%; height:30%;
    top:0px;
    box-sizing:content-box;
    border-right:var(--c-yellow) solid 3px;
    border-top:var(--c-black) solid 15px;
}
#lv4 .sign_content .tanuki .legs .lgfl02{
    position:absolute;
    top:0; left:-12%;
    width:35%; height:calc(30% + 15px);
    border-radius:120% 0 0 80%;
    border-left:var(--c-yellow) solid 2px;
    box-sizing:border-box;
    transform:rotate(-5deg);
}
#lv4 .sign_content .tanuki .legs .lgfl03{
    position:absolute;
    width:50%; height:15%;
    border-radius:35%;
    bottom:30%; left:-1px;
    z-index:100;
}

#lv4 .sign_content .tanuki .legs .lg-f-right{
    height:100%; width:20%;
    position:absolute;
    transform:rotate(-10deg);
    top:10%; right:10%;
    z-index:-20;
}

#lv4 .sign_content .tanuki .legs .lgfr01{
    position:absolute;
    width:35%; height:35%;
    border-left:var(--c-yellow) solid 5px;
    border-top:var(--c-black) solid 30px;
}

#lv4 .sign_content .tanuki .legs .lgfr02{
    position:absolute;
    width:45%; height:15%;
    top:50%; left:8%;
    border-radius:40%;
    transform:skewX(10deg);
}

#lv4 .sign_content .tanuki .legs .lgfr03{
    position:absolute;
    width:20%; height:45%;
    border-radius:0 120% 80% 0;
    right:55%; top:10%;
    transform:rotate(0deg);
}

#lv4 .sign_content .tanuki .tanu_head{
    width:50%; height:80%;
    position:absolute;
    right:-20%; top:0;
}

#lv4 .sign_content .tanuki .tanu_head .face *{
    background:var(--c-black)
}
#lv4 .sign_content .tanuki .tanu_head .face .thf01{
    position:absolute;
    width:70%; height:65%;
    border-radius:0% 70% 100% 30% / 0% 70% 90% 30%;
    transform:rotate(-10deg);
    top:10%; left:2%;
}

#lv4 .sign_content .tanuki .tanu_head .face .thf02{
    width:65%; height:55%;
    position:absolute;
    border-radius:0 50% 200% 0 / 0 50% 200% 0;
    right:20%; bottom:10%;
    transform:rotate(30deg);
}

#lv4 .sign_content .tanuki .tanu_head .face .thf03{
    width:18%; height:10%;
    position:absolute;
    right:22%; bottom:25%;
    border-radius:60%;
    border-bottom:var(--c-yellow) solid 3px;
    transform:rotate(10deg);
}

/* 耳 */
#lv4 .sign_content .tanuki .tanu_head .face .thf04{
    width:20%; height:0%;
    position:relative;
    background:var(--c-yellow);
    border-bottom:var(--c-black) solid 15px;
    border-left:var(--c-yellow) solid 10px;
    border-right:var(--c-yellow) solid 10px;
    bottom:5px; left:5%;
    transform:rotate(-10deg);
    z-index:-50;
}
#lv4 .sign_content .tanuki .tanu_head .face .thf04:before{
    content:"";
    display:block;
    position:absolute;
    top:8px; left:-2px;
    width:50%; height:0;
    background:var(--c-black);
    border-left:var(--c-black) solid 3px;
    border-right:var(--c-black) solid 3px;
    border-bottom:var(--c-yellow) solid 5px;
}

#lv4 .sign_content .tanuki .tanu_head .face .thf05{
    width:20%; height:20px;
    position:relative;
    border-radius:200%;
    left:40%; bottom:15px;
    transform:rotate(15deg);
}

#lv4 .sign_content .tanuki .tanu_head .face .thf06{
    width:35%; height:20%;
    position:absolute;
    left:25%; top:35%;
    border-radius:100% 100% 100% 120% / 120% 100% 60% 100%;
    background:var(--c-yellow);
    transform:rotate(-20deg);
}

#lv4 .sign_content .tanuki .tanu_head .face .thf06:before{
    content:"";
    display:block;
    width:28%; height:40%;
    border-radius:100%;
    border:var(--c-black) solid 2px;
    background:var(--c-yellow);
    position:absolute;
    top:25%; right:15%;
}