@charset "utf-8";

/*ruby { font-size: 1.2rem; color: #333; }
rt { font-size: 0.6rem; color: #666; }*/
/*body { font-family: 'Comic Sans MS', sans-serif; color: #2e8b57; }*/
/*body {color: #2e8b57; }*/


        .container {
            width: 200px;
            height: 200px;
            /*position: relative;*/
            /*margin: 50px auto;*/
				margin:  0 auto; 
				
				margin-top: 150px;
				margin-left: 125px;
        }
        .circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            text-decoration: none;
        }
		  
		  
        .circle_02 {
            padding: 5px 7px 5px 7px;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            color: white;
            text-decoration: none;
        }
		  
        .white { background-color: white; color: black; }
        .black { background-color: black; }
        .blue { background-color: blue; }
        .red { background-color: red; }
        .green { background-color: green; }
        .yellow { background-color: yellow; color: black; }
        .purple { background-color: purple; }
        .pink { background-color: #FF69B4; }

        /* 円形配置 */
        .circle:nth-child(1) { transform: rotate(0deg) translate(120px) rotate(0deg); }
        .circle:nth-child(2) { transform: rotate(45deg) translate(120px) rotate(-45deg); }
        .circle:nth-child(3) { transform: rotate(90deg) translate(120px) rotate(-90deg); }
        .circle:nth-child(4) { transform: rotate(135deg) translate(120px) rotate(-135deg); }
        .circle:nth-child(5) { transform: rotate(180deg) translate(120px) rotate(-180deg); }
        .circle:nth-child(6) { transform: rotate(225deg) translate(120px) rotate(-225deg); }
        .circle:nth-child(7) { transform: rotate(270deg) translate(120px) rotate(-270deg); }
        .circle:nth-child(8) { transform: rotate(315deg) translate(120px) rotate(-315deg); }