/* for mimiko 20036 horoscope
 * 2025/02/14
 * ========================================================================== */

/*--------------------*
 *  .horo_group
 *--------------------*/
.horo_group {
  width: 100%;
  max-width: 540px;
margin: 16px auto 24px;
}
.chart_bdy {
  width: 350px;
  height: 350px;
    width: 280px;
    height: 280px;
  margin: 0 auto;
  background: url(/image/free/horoscope_base_free.png) 50% top / 100% no-repeat;
/*  background: url(/image/basic/horoscope_base_simple.sp.480.png) no-repeat 50% top / 100% auto;*/
  position: relative;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
}
.c1, .c2, .c3, .c4, .c5 ,
.c6, .c7, .c8, .c9, .c10 {
  width: 23px;
  height: auto;
  position: absolute;
}
/*-- tablet & PC ^^*/
@media only screen and (min-width: 600px) {
  .chart_bdy {
    width: 540px;
    height: 540px;
  }
  .c1, .c2, .c3, .c4, .c5 ,
  .c6, .c7, .c8, .c9, .c10 {
    width: 35px;
  }
}

.box img {
  width: 100%;
  height: auto;
}


/* ��4つVer. */
/* p1 (角度 180,170,160) */
.p1 .c1 { left:  7%; top: 52%; z-index:2; }
.p1 .c2 { left: 13%; top: 55%; z-index:3; }
.p1 .c3 { left: 19%; top: 58%; z-index:4; }
.p1 .c4 { left:  1%; top: 49%; z-index:1; }

/* p2 (150,140,130) */
.p2 .c1 { left: 15%; top: 69%; z-index:2; }
.p2 .c2 { left: 21%; top: 71%; z-index:3; }
.p2 .c3 { left: 27%; top: 72%; z-index:4; }
.p2 .c4 { left:  9%; top: 67%; z-index:1; }

/* p3 (120,110,100) */
.p3 .c1 { left: 33%; top: 81%; z-index:2; }
.p3 .c2 { left: 39%; top: 80%; z-index:3; }
.p3 .c3 { left: 45%; top: 79%; z-index:4; }
.p3 .c4 { left: 27%; top: 82%; z-index:1; }

/* p4 (90,80,70) */
.p4 .c1 { left: 54%; top: 84%; z-index:2; }
.p4 .c2 { left: 60%; top: 82%; z-index:3; }
.p4 .c3 { left: 48%; top: 87%; z-index:1; }
.p4 .c4 { left: 66%; top: 81%; z-index:4; }

/* p5 (60,50,40) */
.p5 .c1 { left: 77%; top: 70%; z-index:3; }
.p5 .c2 { left: 71%; top: 72%; z-index:2; }
.p5 .c3 { left: 65%; top: 72%; z-index:1; }
.p5 .c4 { left: 83%; top: 67%; z-index:4; }

/* p6 (30,20,10) */
.p6 .c1 { left: 87%; top: 52%; z-index:3; }
.p6 .c2 { left: 81%; top: 55%; z-index:2; }
.p6 .c3 { left: 75%; top: 57%; z-index:1; }
.p6 .c4 { left: 93%; top: 49%; z-index:4; }

/* p7 (0,350,340) */
.p7 .c1 { left: 86%; top: 35%; z-index:3; }
.p7 .c2 { left: 81%; top: 29%; z-index:2; }
.p7 .c3 { left: 91%; top: 40%; z-index:4; }
.p7 .c4 { left: 89%; top: 26%; z-index:1; }

/* p8 (330,320,310) */
.p8 .c1 { left: 78%; top: 19%; z-index:2; }
.p8 .c2 { left: 72%; top: 17%; z-index:3; }
.p8 .c3 { left: 66%; top: 17%; z-index:4; }
.p8 .c4 { left: 84%; top: 20%; z-index:1; }

/* p9 (300,290,280) */
.p9 .c1 { left: 55%; top: 5%; z-index:3; }
.p9 .c2 { left: 61%; top: 6%; z-index:2; }
.p9 .c3 { left: 67%; top: 7%; z-index:1; }
.p9 .c4 { left: 49%; top: 3%; z-index:4; }

/* p10 (270,260,250) */
.p10 .c1 { left: 32%; top: 7%; z-index:2; }
.p10 .c2 { left: 38%; top: 7%; z-index:3; }
.p10 .c3 { left: 26%; top: 7%; z-index:1; }
.p10 .c4 { left: 44%; top: 8%; z-index:4; }

/* p11 (240,230,220) */
.p11 .c1 { left: 16%; top: 18%; z-index:2; }
.p11 .c2 { left: 22%; top: 19%; z-index:3; }
.p11 .c3 { left: 28%; top: 19%; z-index:4; }
.p11 .c4 { left: 10%; top: 18%; z-index:1; }

/* p12 (210,200,190) */
.p12 .c1 { left:  8%; top: 33%; z-index:3; }
.p12 .c2 { left: 13%; top: 39%; z-index:1; }
.p12 .c3 { left: 13%; top: 27%; z-index:2; }
.p12 .c4 { left:  5%; top: 41%; z-index:4; }

/* ��5つ以上Ver. */
/* p1 (角度 180,170,160) */
.p1.icon2 .c1  { left:  4%; top: 49%; z-index:1; }
.p1.icon2 .c2  { left:  5%; top: 55%; z-index:2; }
.p1.icon2 .c3  { left:  6%; top: 61%; z-index:3; }
.p1.icon2 .c4  { left:  8%; top: 66%; z-index:4; }
.p1.icon2 .c5  { left:  9%; top: 51%; z-index:5; }
.p1.icon2 .c6  { left: 10%; top: 57%; z-index:6; }
.p1.icon2 .c7  { left: 12%; top: 62%; z-index:7; }
.p1.icon2 .c8  { left: 14%; top: 53%; z-index:8; }
.p1.icon2 .c9  { left: 15%; top: 58%; z-index:9; }
.p1.icon2 .c10 { left: 17%; top: 63%; z-index:10; }

/* p2 (150,140,130) */
.p2.icon2 .c1  { left: 12%; top: 70%; z-index:1; }
.p2.icon2 .c2  { left: 16%; top: 74%; z-index:2; }
.p2.icon2 .c3  { left: 20%; top: 78%; z-index:3; }
.p2.icon2 .c4  { left: 24%; top: 82%; z-index:4; }
.p2.icon2 .c5  { left: 18%; top: 69%; z-index:5; }
.p2.icon2 .c6  { left: 22%; top: 73%; z-index:6; }
.p2.icon2 .c7  { left: 26%; top: 77%; z-index:7; }
.p2.icon2 .c8  { left: 22%; top: 65%; z-index:8; }
.p2.icon2 .c9  { left: 26%; top: 69%; z-index:9; }
.p2.icon2 .c10 { left: 30%; top: 73%; z-index:10; }

/* p3 (120,110,100) */
.p3.icon2 .c1  { left: 28%; top: 84%; z-index:1; }
.p3.icon2 .c2  { left: 33%; top: 86%; z-index:2; }
.p3.icon2 .c3  { left: 39%; top: 87%; z-index:3; }
.p3.icon2 .c4  { left: 44%; top: 88%; z-index:4; }
.p3.icon2 .c5  { left: 31%; top: 80%; z-index:5; }
.p3.icon2 .c6  { left: 36%; top: 82%; z-index:6; }
.p3.icon2 .c7  { left: 42%; top: 83%; z-index:7; }
.p3.icon2 .c8  { left: 35%; top: 77%; z-index:8; }
.p3.icon2 .c9  { left: 40%; top: 78%; z-index:9; }
.p3.icon2 .c10 { left: 45%; top: 79%; z-index:10; }

/* p4 (90,80,70) */
.p4.icon2 .c1  { left: 49%; top: 89%; z-index:1; }
.p4.icon2 .c2  { left: 55%; top: 88%; z-index:2; }
.p4.icon2 .c3  { left: 60%; top: 87%; z-index:3; }
.p4.icon2 .c4  { left: 65%; top: 85%; z-index:4; }
.p4.icon2 .c5  { left: 49%; top: 84%; z-index:5; }
.p4.icon2 .c6  { left: 55%; top: 83%; z-index:6; }
.p4.icon2 .c7  { left: 61%; top: 82%; z-index:7; }
.p4.icon2 .c8  { left: 50%; top: 79%; z-index:8; }
.p4.icon2 .c9  { left: 57%; top: 79%; z-index:9; }
.p4.icon2 .c10 { left: 63%; top: 77%; z-index:10; }

/* p5 (60,50,40) */
.p5.icon2 .c1  { left: 71%; top: 83%; z-index:1; }
.p5.icon2 .c2  { left: 75%; top: 79%; z-index:2; }
.p5.icon2 .c3  { left: 79%; top: 75%; z-index:3; }
.p5.icon2 .c4  { left: 83%; top: 71%; z-index:4; }
.p5.icon2 .c5  { left: 69%; top: 78%; z-index:5; }
.p5.icon2 .c6  { left: 74%; top: 74%; z-index:6; }
.p5.icon2 .c7  { left: 78%; top: 70%; z-index:7; }
.p5.icon2 .c8  { left: 66%; top: 73%; z-index:8; }
.p5.icon2 .c9  { left: 71%; top: 70%; z-index:9; }
.p5.icon2 .c10 { left: 75%; top: 66%; z-index:10; }

/* p6 (30,20,10) */
.p6.icon2 .c1  { left: 85%; top: 66%; z-index:1; }
.p6.icon2 .c2  { left: 87%; top: 61%; z-index:2; }
.p6.icon2 .c3  { left: 88%; top: 55%; z-index:3; }
.p6.icon2 .c4  { left: 89%; top: 49%; z-index:4; }
.p6.icon2 .c5  { left: 81%; top: 62%; z-index:5; }
.p6.icon2 .c6  { left: 83%; top: 57%; z-index:6; }
.p6.icon2 .c7  { left: 84%; top: 51%; z-index:7; }
.p6.icon2 .c8  { left: 76%; top: 60%; z-index:8; }
.p6.icon2 .c9  { left: 78%; top: 55%; z-index:9; }
.p6.icon2 .c10 { left: 79%; top: 49%; z-index:10; }

/* p7 (0,350,340) */
.p7.icon2 .c1  { left: 90%; top: 44%; z-index:1; }
.p7.icon2 .c2  { left: 89%; top: 38%; z-index:2; }
.p7.icon2 .c3  { left: 88%; top: 32%; z-index:3; }
.p7.icon2 .c4  { left: 86%; top: 27%; z-index:4; }
.p7.icon2 .c5  { left: 85%; top: 42%; z-index:5; }
.p7.icon2 .c6  { left: 84%; top: 36%; z-index:6; }
.p7.icon2 .c7  { left: 82%; top: 30%; z-index:7; }
.p7.icon2 .c8  { left: 80%; top: 44%; z-index:8; }
.p7.icon2 .c9  { left: 80%; top: 39%; z-index:9; }
.p7.icon2 .c10 { left: 78%; top: 33%; z-index:10; }

/* p8 (330,320,310) */
.p8.icon2 .c1  { left: 82%; top: 24%; z-index:1; }
.p8.icon2 .c2  { left: 79%; top: 19%; z-index:2; }
.p8.icon2 .c3  { left: 75%; top: 15%; z-index:3; }
.p8.icon2 .c4  { left: 71%; top: 11%; z-index:4; }
.p8.icon2 .c5  { left: 77%; top: 24%; z-index:5; }
.p8.icon2 .c6  { left: 73%; top: 20%; z-index:6; }
.p8.icon2 .c7  { left: 69%; top: 16%; z-index:7; }
.p8.icon2 .c8  { left: 72%; top: 25%; z-index:8; }
.p8.icon2 .c9  { left: 68%; top: 22%; z-index:9; }
.p8.icon2 .c10 { left: 64%; top: 19%; z-index:10; }

/* p9 (300,290,280) */
.p9.icon2 .c1  { left: 66%; top:  9%; z-index:1; }
.p9.icon2 .c2  { left: 61%; top:  6%; z-index:2; }
.p9.icon2 .c3  { left: 55%; top:  4%; z-index:3; }
.p9.icon2 .c4  { left: 49%; top:  4%; z-index:4; }
.p9.icon2 .c5  { left: 62%; top: 12%; z-index:5; }
.p9.icon2 .c6  { left: 57%; top: 10%; z-index:6; }
.p9.icon2 .c7  { left: 51%; top:  9%; z-index:7; }
.p9.icon2 .c8  { left: 60%; top: 17%; z-index:8; }
.p9.icon2 .c9  { left: 55%; top: 15%; z-index:9; }
.p9.icon2 .c10 { left: 50%; top: 15%; z-index:10; }

/* p10 (270,260,250) */
.p10.icon2 .c1  { left: 44%; top:  4%; z-index:1; }
.p10.icon2 .c2  { left: 38%; top:  5%; z-index:2; }
.p10.icon2 .c3  { left: 32%; top:  7%; z-index:3; }
.p10.icon2 .c4  { left: 27%; top:  9%; z-index:4; }
.p10.icon2 .c5  { left: 43%; top:  9%; z-index:5; }
.p10.icon2 .c6  { left: 37%; top: 10%; z-index:6; }
.p10.icon2 .c7  { left: 31%; top: 12%; z-index:7; }
.p10.icon2 .c8  { left: 44%; top: 14%; z-index:8; }
.p10.icon2 .c9  { left: 38%; top: 15%; z-index:9; }
.p10.icon2 .c10 { left: 32%; top: 17%; z-index:10; }

/* p11 (240,230,220) */
.p11.icon2 .c1  { left: 23%; top: 11%; z-index:1; }
.p11.icon2 .c2  { left: 18%; top: 14%; z-index:2; }
.p11.icon2 .c3  { left: 14%; top: 18%; z-index:3; }
.p11.icon2 .c4  { left: 10%; top: 23%; z-index:4; }
.p11.icon2 .c5  { left: 24%; top: 17%; z-index:5; }
.p11.icon2 .c6  { left: 19%; top: 20%; z-index:6; }
.p11.icon2 .c7  { left: 16%; top: 25%; z-index:7; }
.p11.icon2 .c8  { left: 28%; top: 21%; z-index:8; }
.p11.icon2 .c9  { left: 23%; top: 24%; z-index:9; }
.p11.icon2 .c10 { left: 20%; top: 29%; z-index:10; }

/* p12 (210,200,190) */
.p12.icon2 .c1  { left:  8%; top: 27%; z-index:1; }
.p12.icon2 .c2  { left:  6%; top: 32%; z-index:2; }
.p12.icon2 .c3  { left:  5%; top: 38%; z-index:3; }
.p12.icon2 .c4  { left:  4%; top: 44%; z-index:4; }
.p12.icon2 .c5  { left: 12%; top: 31%; z-index:5; }
.p12.icon2 .c6  { left: 11%; top: 37%; z-index:6; }
.p12.icon2 .c7  { left: 10%; top: 43%; z-index:7; }
.p12.icon2 .c8  { left: 17%; top: 33%; z-index:8; }
.p12.icon2 .c9  { left: 16%; top: 38%; z-index:9; }
.p12.icon2 .c10 { left: 15%; top: 44%; z-index:10; }