@charset "utf-8";
/* ========================================
   Icon
======================================== */
.icon{
    position:relative;
    width:var(--icon-size);
    height:var(--icon-size);
    border-radius:18px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:90%;
    background-position: right bottom;
}
/* 番号 */
.icon img{
    position:absolute;
    top:6px;
    left:6px;
    width:50%;
}
/* ========================================
   Individual Icons
======================================== */
li:nth-child(7n+1) a span.icon {background-color: hsl(0 var(--sat) var(--lit));}
li:nth-child(7n+2) a span.icon {background-color: hsl(34 var(--sat) var(--lit));}
li:nth-child(7n+3) a span.icon {background-color: hsl(80 var(--sat) var(--lit));}
li:nth-child(7n+4) a span.icon {background-color: hsl(145 var(--sat) var(--lit));}
li:nth-child(7n+5) a span.icon {background-color: hsl(185 var(--sat) var(--lit));}
li:nth-child(7n+6) a span.icon {background-color: hsl(225 var(--sat) var(--lit));}
li:nth-child(7n+7) a span.icon {background-color: hsl(315 var(--sat) var(--lit));}

#diseases-story {
    --sat:80%;
    --lit:80%;
}
#organs-story {
    --sat:60%;
    --lit:50%;
}
#nutrients-story {
    --sat:85%;
    --lit:50%;
}
.d001{
    background-image:
     url(../images/icons/diseases/il01.png);
}
.d002{
    background-image:
     url(../images/icons/diseases/cold.png);
}
.d003{
    background-image:
     url(../images/icons/diseases/mumps.png);
}
.d004{
    background-image:
     url(../images/icons/diseases/parvo.png);
}
.d005{
    background-image:
     url(../images/icons/diseases/entero.png);
}
.d006{
    background-image:
     url(../images/icons/diseases/vzv.png);
}
.d007{
    background-image:
     url(../images/icons/diseases/measles.png);
}
.d008{
    background-image:
     url(../images/icons/diseases/depress.png);
}
.d009{
    background-image:
     url(../images/icons/diseases/pollinosis.png);
}
.d010{
    background-image:
     url(../images/icons/diseases/scalphematoma.png);
}
.d011{
    background-image:
     url(../images/icons/diseases/rubella.png);
}
.d012{
    background-image:
     url(../images/icons/diseases/aureus.png);
}
.d013{
    background-image:
     url(../images/icons/diseases/mutans.png);
}
.d014{
    background-image:
     url(../images/icons/diseases/nov.png);
}
.d015{
    background-image:
     url(../images/icons/diseases/pertussis.png);
}
.d016{
    background-image:
     url(../images/icons/diseases/rotavirus.png);
}
.d017{
    background-image:
     url(../images/icons/diseases/scab.png);
}
.d018{
    background-image:
     url(../images/icons/diseases/coxsackie.png);
}
.d019{
    background-image:
     url(../images/icons/diseases/hyperthermia.png);
}
.d020{
    background-image:
     url(../images/icons/diseases/mc_virus.png);
}
.d021{
    background-image:
     url(../images/icons/diseases/sty.png);
}
.d022{
    background-image:
     url(../images/icons/diseases/gash.png);
}

/**/

.o001{
    background-image:
     url(../images/icons/organs/fiveviscere.png);
}
.o002{
    background-image:
     url(../images/icons/organs/stomach.png);
}
.o003{
    background-image:
     url(../images/icons/organs/intestines.png);
}
.o004{
    background-image:
     url(../images/icons/organs/liver.png);
}
.o005{
    background-image:
     url(../images/icons/organs/lung.png);
}
.o006{
    background-image:
     url(../images/icons/organs/gallbladder.png);
}
.o007{
    background-image:
     url(../images/icons/organs/kidney.png);
}
.o008{
    background-image:
     url(../images/icons/organs/bladder.png);
}
.o009{
    background-image:
     url(../images/icons/organs/spleen.png);
}

/**/

.n001{
    background-image:
     url(../images/icons/nutrients/protein.png);
}
.n002{
    background-image:
     url(../images/icons/nutrients/carbohydrate.png);
}
.n003{
    background-image:
     url(../images/icons/nutrients/lipids.png);
}
.n004{
    background-image:
     url(../images/icons/nutrients/mineral.png);
}