:root{
    --menu-size: 100px;
    --menu-color-1: #EA5514;/*orange*/
    --menu-color-2: #601986;/*violet*/
    --menu-color-3: #036EB8;/*blue*/
    --menu-color-4: #13AE67;/*green*/
    --menu-color-5: #E61673;/*magenta*/
    --menu-color-6: #E61673;/*magenta*/

    --menu-color-7: #333333;/*gray*/
    --menu-color-8: #333333;/*gray*/
}


#menubox{
    position: fixed;
    top: 100px;
    right: 115px;
    transform: rotate( -30deg) skewX( 30deg);
	transform-origin: 50% 0;
    background: rgba(0, 0, 0, 0);
    z-index: 9999;
}
#menubox li{
    margin-bottom: 0px;
	position: absolute;
	text-align: center;
}


#menubox a, #menubox span{
    display: inline-block;
    width:  calc(var(--menu-size) * 1.1546);
    height: var(--menu-size);
    background: #fff;
    border: 1px solid;
    border-radius: 3%;
    transition: 0.3s;
    text-indent: -999;
    text-indent: -0px;
}
#menubox a{
    opacity: 0.5;
}
#menubox span{
    opacity: 0.5;
}

#menubox a:hover{
    opacity: 1;
}
#menubox span:hover{
    opacity: 1;
}

#menubox p{
    font-size: 4rem;
    transform: rotate( 45deg) skewX( -10deg) scaleX(0.6);
    line-height: var(--menu-size);
    text-indent: -1rem;
}

#menubox .currentbox p:first-letter{
    font-size: 6rem;
}

#menubox li:nth-child(1) p{
	color: var(--menu-color-1);
}
#menubox li:nth-child(2) p{
	color: var(--menu-color-2);
}
#menubox li:nth-child(3) p{
	color: var(--menu-color-3);
}
#menubox li:nth-child(4) p{
	color: var(--menu-color-4);
}
#menubox li:nth-child(5) p{
	color: var(--menu-color-5);
}
#menubox li:nth-child(6) p{
	color: var(--menu-color-6);
}
#menubox li:nth-child(7) p{
	font-size: 2rem;
    text-indent: -10rem;
}


#menubox .currentbox a.active{
    opacity: 1;
}
#menubox li:nth-child(1) a{
	border-color: var(--menu-color-1);
}
#menubox li:nth-child(2) a{
	border-color: var(--menu-color-2);
}
#menubox li:nth-child(3) a{
	border-color: var(--menu-color-3);
}
#menubox li:nth-child(4) a{
	border-color: var(--menu-color-4);
}
#menubox li:nth-child(5) a{
	border-color: var(--menu-color-5);
}
#menubox li:nth-child(6) a{
	border-color: var(--menu-color-6);
}
/*
#menubox li:nth-child(7) span{
    background:linear-gradient(to bottom right,rgba(255, 255, 255, 1) 49%, var(--menu-color-7) 50%, rgba(255, 255, 255, 0) 51%);
    border-right: 0;
    border-bottom: 0;
	border-color: var(--menu-color-7);
}
#menubox li:nth-child(8) a{
    background:linear-gradient(to bottom right,rgba(255, 255, 255, 1) 49%, var(--menu-color-8) 50%, rgba(255, 255, 255, 0) 51%);
    border-right: 0;
    border-bottom: 0;
	border-color: var(--menu-color-8);
}
*/

#menubox li:nth-child(1){
	top: 0;
	right: 0;
}
#menubox li:nth-child(2){
	top: 0;
	right: calc(var(--menu-size) * 1.1546 + 10px);
}
#menubox li:nth-child(3){
	top: calc(var(--menu-size) + 10px);
	right: calc(var(--menu-size) * 1.1546 + 10px);
}
#menubox li:nth-child(4){
	top: calc(var(--menu-size) + 10px);
	right: calc((var(--menu-size) * 1.1546 + 10px) * 2);
}
#menubox li:nth-child(5){
	top: calc(var(--menu-size) * 2  + 10px * 2);
	right: calc((var(--menu-size) * 1.1546 + 10px) * 2);
}
#menubox li:nth-child(6){
	top: calc(var(--menu-size) * 2  + 10px * 2);
	right: calc((var(--menu-size) * 1.1546 + 10px) * 3);
}
#menubox li:nth-child(7){
	top: 0;
	right: calc(var(--menu-size) * -1 * 1.1546 - 10px);
}
#menubox li:nth-child(8){
	top: calc(var(--menu-size) + 10px);
	right: 0;
}
#menubox li:nth-child(9){
	top: calc(var(--menu-size) * 2  + 10px * 2);
	right: calc(var(--menu-size) * 1.1546 + 10px);
}


@media screen and (max-width: 600px) {

:root{
    --menu-size: 30px;
}

#menubox p{
    font-size: 1rem;
}
#menubox .currentbox p:first-letter{
    font-size: 2rem;
}

/*---後でメニューに動きをつけるときに使うかも
.menu_object{
    width: 50px;
    height: 50px;
    background-color: #590;
    transition:transform 1s ease-in-out, width 1s, height 1s;    
}
.menu_a, .menu_b, .menu_c{
    transform: translate( 80vw, 0px);
}
---*/

}