: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°に戻す */
}

/* 大型貨物自動車等通行止め */
#lv3 .sign_base{
    background:var(--c-white);
    border:var(--c-black) solid 2px;
}
#lv3 .sign_base:before,
#lv3 .sign_base:after{
    content:"";
    display:block; position:absolute;
    margin:auto;
    top:0; bottom:0;
    left:0; right:0;
}
#lv3 .sign_base:before{
    width:calc(var(--sign-size) - 12px); height:calc(var(--sign-size) - 12px);
    border:var(--c-red) solid 23px;
    border-radius:var(--sign-size);
}

#lv3 .sign_base:after{
    width:calc(var(--sign-size) - 12px); height:15px;
    background:var(--c-red);
    transform:rotate(45deg);
}

#lv3 .sign_content{
    width:calc(var(--sign-size) * 0.6);
    height:calc(var(--sign-size) * 0.39);
    margin:auto;
}
#lv3 .sign_content .truck{
    position:relative;
    width:100%; height:100%;
    background:var(--c-white);
    padding:6px;
}

#lv3 .sign_content .truck *{
    background:var(--c-blue);
}

/* 荷台 */
#lv3 .sign_content .truck .nidai{
    width:70%;
    height:77%;
    border-radius:3px 3px 0 0;
}

/* 運転席 */
#lv3 .sign_content .truck .driver_sheet{
    width:30%;
    height:50%;
    position:absolute;
    bottom:20px;
    right:10px;
    background:transparent;
}
#lv3 .sign_content .truck .driver_sheet .sheet_top{
    width:100%;
    height:100%;
    border-radius:0 10px 30px 0 / 0 20px 0 0;
    position:relative;
    left:-20%;;
}
#lv3 .sign_content .truck .driver_sheet .sheet_bottom{
    width:100%;
    height:60%;
    position:absolute;
    right:-3px; bottom:0;
    border-radius:0 8px 0 0 / 0 25px 0 0;
}

/* トラックの窓 */
#lv3 .sign_content .truck .driver_sheet .sheet_win_mae,
#lv3 .sign_content .truck .driver_sheet .sheet_win_ushiro{
    position:absolute;
    top:4px; left:25%;
    background:var(--c-white);
    width:18%; height:30%;
    z-index:20;
    transform:skewX(10deg);
    border-radius:2px;
}

#lv3 .sign_content .truck .driver_sheet .sheet_win_mae{
    width:17%;
    left:50%;
}

/* バンパー */
#lv3 .sign_content .truck .banpa{
    position:absolute;
    width:85%;
    height:8px;
    border-radius:0 8px 8px 8px;
    right:5px;
}
/* タイヤ */
#lv3 .sign_content .truck .wheel{
    background:transparent;
    position:relative;
    top:0px;
}
#lv3 .sign_content .truck .wheel p{
    width:17px; height:17px;
    border-radius:17px;
    position:absolute;
}

#lv3 .sign_content .truck .wheel p:nth-child(1){
    left:20px;
}
#lv3 .sign_content .truck .wheel p:nth-child(2){
    right:8px;
}