/*+ 予算・経費：予算入力CSS*/

/**予算入力　各項目 budget_entry div_1*/
.flex_hover {
    width: 100%;
    display: flex;
    gap: 20px;
}

/* 説明を左に */
.left {
    width: 49%;
    order: 1;   /* 左側 */
    margin-left: 1%;
    border: 5px dashed #78d1f3;
    padding-left: 0.5em;
}

/*画像を右に*/
.hover_img {
    width: 50%;
    order: 2;   /* 右側 */
    flex-shrink: 0;
    position: relative;
}

.hover_img img{
    width: 100%;
}

/*__ホバー動作 .hover_imgにカーソルが当たったら.leftの表示が変わる*/
/*店舗選択*/
.hover_img:has(.spa_hov_1:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_1:hover) ~ .left .hov_1 {
    display: block;
}
/*曜日選択*/
.hover_img:has(.spa_hov_2:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_2:hover) ~ .left .hov_2 {
    display: block;
}
/*予算額設定*/
.hover_img:has(.spa_hov_3:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_3:hover) ~ .left .hov_3 {
    display: block;
}
/*実行ボタン*/
.hover_img:has(.spa_hov_4:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_4:hover) ~ .left .hov_4 {
    display: block;
}
/*表示範囲*/
.hover_img:has(.spa_hov_5:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_5:hover) ~ .left .hov_5 {
    display: block;
}
/*登録*/
.hover_img:has(.spa_hov_6:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_6:hover) ~ .left .hov_6 {
    display: block;
}
/*クリア*/
.hover_img:has(.spa_hov_7:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_7:hover) ~ .left .hov_7 {
    display: block;
}
/*前年表示*/
.hover_img:has(.spa_hov_8:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_8:hover) ~ .left .hov_8 {
    display: block;
}
/*コピー*/
.hover_img:has(.spa_hov_9:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_9:hover) ~ .left .hov_9 {
    display: block;
}
/*CSV取込*/
.hover_img:has(.spa_hov_10:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_10:hover) ~ .left .hov_10 {
    display: block;
}
/*CSV出力*/
.hover_img:has(.spa_hov_11:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_11:hover) ~ .left .hov_11 {
    display: block;
}
/*削除*/
.hover_img:has(.spa_hov_12:hover) ~ .left .hov_p {
    display: none;
}
.hover_img:has(.spa_hov_12:hover) ~ .left .hov_12 {
    display: block;
}

/*__ホバー判定エリア */
.spa_hov_1,
.spa_hov_2,
.spa_hov_3,
.spa_hov_4,
.spa_hov_5,
.spa_hov_6,
.spa_hov_7,
.spa_hov_8,
.spa_hov_9,
.spa_hov_10,
.spa_hov_11,
.spa_hov_12{
    display: block;/*inlineのままだと表示が遅れる*/
}

/* spanにホバーした時だけ対象範囲に枠 */
.spa_hov_1:hover,
.spa_hov_2:hover,
.spa_hov_3:hover,
.spa_hov_4:hover,
.spa_hov_5:hover,
.spa_hov_6:hover,
.spa_hov_7:hover,
.spa_hov_8:hover,
.spa_hov_9:hover,
.spa_hov_10:hover,
.spa_hov_11:hover,
.spa_hov_12:hover{
    border: 2px solid #78d1f3;
    border-radius: 3px;
}

/*店舗指定*/
.spa_hov_1 {
    width: 25.8%;
    height: 8%;
    position: absolute;
    top: 3.5%;
    left: 0%;
}

/*曜日選択*/
.spa_hov_2{
    width: 7.1%;
    height: 8%;
    position: absolute;
    top: 3.5%;
    left: 37.7%;
}

/*予算額設定*/
.spa_hov_3{
    width: 13%;
    height: 8%;
    position: absolute;
    top: 3.5%;
    left: 44.5%;
}

/*実行ボタン*/
.spa_hov_4{
    width: 6.3%;
    height: 8%;
    position: absolute;
    top: 3.5%;
    right: 36.5%;
}

/*表示範囲*/
.spa_hov_5{
    width: 40.5%;
    height: 8%;
    position: absolute;
    top: 12.5%;
    left: 0;
}

/*登録*/
.spa_hov_6{
    width: 10.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    left: 1%;
}

/*クリア*/
.spa_hov_7{
    width: 12%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    left: 14.5%
}

/*前年表示*/
.spa_hov_8{
    width: 12.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    left: 29.2%
}

/*コピー*/
.spa_hov_9{
    width: 10.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    left: 44.5%
}

/*CSV取込*/
.spa_hov_10{
    width: 12.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    right: 29.8%;
}

/*CSV出力*/
.spa_hov_11{
    width: 12.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    right: 14.2%;
}

/*削除*/
.spa_hov_12{
    width: 10.5%;
    height: 9%;
    position: absolute;
    top: 22.5%;
    right: 1%;
}

/*__ホバー前は非表示 */
.left .hov_1,
.left .hov_2,
.left .hov_3,
.left .hov_4,
.left .hov_5,
.left .hov_6,
.left .hov_7,
.left .hov_8,
.left .hov_9,
.left .hov_10,
.left .hov_11,
.left .hov_12{
    display: none;
}

/*__項目説明 装飾*/
.flex_hover p{
    font-size: 15px;
    margin: 1em 0;
}

.flex_hover h4{
    font-size: 17px;
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.hov_1 img{
    width: 70%;
}

.hov_2 div{
    width: 100%;
    display: flex;
}

.hov_2 div img{
    width: 10%;
}

.hov_3 img{    
    width: 25%;
}

/*実行*/
.hov_4 span{
    display: inline-block;
    width: 3em;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-weight: normal;
    border: 1px solid #3D4449;
    border-radius: 3px;
    background-color: #EFEFEF;
}

.hov_4 img{    
    width: 75%;
}

/*表示範囲*/
.hov_5 img{    
    width: 68%;
}

/*登録 削除*/
.hov_6 img,
.hov_12 img{
    width: 16%;
    margin-left: 0;
}

/*クリア*/
.hov_7 img{
    width: 19%;
    margin-left: 0;
}

/*前年表示*/
.hov_8 img{
    width: 19%;
    margin-left: 0;
}

/*コピー*/
.hov_9 img{
    width: 16%;
    margin-left: 0;
}

/*CSV取込 CSV出力*/
.hov_10 img,
.hov_11 img{
    width: 20%;
    margin-left: 0;
}