/* ボックスの大きさを知るためのテストクラス */
.box_area_red{
    /* background-color: rgb(255, 255, 255); */
    border-style: solid;
    border-color: rgb(255, 0, 0);
    border-width: 2px;
    background-color:  rgba(255, 0, 0, 50%);
}

.box_area_yellow{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(251, 255, 0);
    border-width: 2px;
    background-color:  rgba(251, 255, 0, 50%);
}

.box_area_green{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(0, 255, 128);
    border-width: 2px;
    background-color: rgba(0, 255, 128, 50%);
}

.box_area_white{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(255, 255, 255);
    border-width: 2px;
    background-color:rgba(255, 255, 255, 50%);
}

.box_area_blue{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(0, 110, 255);
    border-width: 4px;
    background-color:rgba(0, 110, 255, 50%);
}

.box_area_pink{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(255, 0, 255);
    border-width: 2px;
    background-color:rgba(255, 0, 255, 50%);
}

.box_area_orange{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(255, 145, 0);
    border-width: 2px;
    background-color:rgba(255, 145, 0, 50%);
}

.box_area_purple{
    /* background-color: rgb(255, 82, 197);  */
    border-style: solid;
    border-color: rgb(151, 9, 198);
    border-width: 2px;
    background-color: rgba(151, 9, 198,50%);
}
/*----------- 描画順 -------------*/
.Z-INDEX-2{
    z-index: -2;
}

.Z-INDEX-1{
    z-index: -1;
}

.Z-INDEX0{
    z-index: 0;
}

.Z-INDEX1{
    z-index: 1;
}

.Z-INDEX2{
    z-index: 2;
}

.Z-INDEX3{
    z-index: 3;
}

.Z-INDEX4{
    z-index: 4;
}

.Z-INDEX5{
    z-index: 5;
}
.Z-INDEX6{
    z-index: 6;
}
.Z-INDEX7{
    z-index: 7;
}
.Z-INDEX8{
    z-index: 8;
}
.Z-INDEX9{
    z-index: 9;
}

.Z-INDEX10{
    z-index: 10;
}

.Z-INDEX11{
    z-index: 11;
}
/* -------------------------- */

/*-----------------------------------*/
/*------------ボックス設定------------*/
/*-----------------------------------*/
.RIGHT_ALIGNMENT{       /*ボックス内右寄せ*/
    text-align: right;
}


.POS_RELATIVE{
    position: relative; /*position: absolute を使用するときは親ボックスは relative のおまじない*/
}

.POS_ABSOLUTE{
    position: absolute;
}

/*-----------（見かけ上の）基準点を決める-----------*/

.PIVOT_CENTERING{                       /*中心*/
    transform: translate(-50%, -50%);
}

.PIVOT_CENTERING_HORIZONTAL{            /*左中心*/
    transform: translate(0%, -50%);
}

.PIVOT_CENTERING_VERTICAL{              /*上中心*/
    transform: translate(-50%, 0%);
}

.PIVOT_RIGHT_TOP{                       /*右上*/
    transform: translate(-100%, 0%);
}

.PIVOT_RIGHT_BOTTOM{                    /*右下*/
    transform: translate(-100%, -100%);
}

.PIVOT_CENTERING_HORIZONTAL_RIGHT{      /*右中心*/
    transform: translate(-100%, -50%);
}

    /*デフォルトが左上*/


.PIVOT_CENTERING_BOTTOM{              /*下中心*/
    transform: translate(-50%, -100%);
}