@charset 'utf-8';

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
}
body {
	background:radial-gradient(#3f3f3f, #000000);
	background-size:4px 4px;
	perspective: 300px;
	margin: 0;
	padding: 0;
	color: #ff4500;
	font-size: 1.5rem;
}
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
}
.doropholder-outer {
  margin: 0;
  padding: 0;
}
.diagram-outer {
  margin: 0;
  padding: 0;
}
h2.text {
  margin: 0 auto 16px;
  color: #ffffff;
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}
.tonic-dropholder,
.rl-dropholder,
.scale-dropholder{
  width: 322px;
  height: 60px;
  margin: 40px 0 0;
  padding: 0 0 0 20px;
  border-radius: 10px;
  font-size: 18px arial;
  color: #fff;
  position: relative;
  box-sizing: border-box;
  border:1px solid #114a06;
  animation: move 3s ease-in-out infinite;
}
.tonic-dropholder {
	z-index: 30;
}
.scale-dropholder {
	z-index: 20;
}
.rl-dropholder {
	z-index: 10;
}
.tonic-dropholder:hover, .tonic-dropholder:hover:after,
.rl-dropholder:hover, .rl-dropholder:hover:after,
.scale-dropholder:hover, .scale-dropholder:hover:after{
  animation-play-state:paused;
}
.tonic-dropholder:after,
.rl-dropholder:after,
.scale-dropholder:after{
  content: "";
  position: absolute;
  width: 250px;
  height: 5px;
  background: rgba(0,0,0, 0);
  display: block;
  top: 100px;
  left: 37px;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0 15px 10px rgba(0,0,0, 0.4);
  animation: moveShadow 3s ease-in-out infinite;
}
/* Select */
.tonic-dropholder p,
.rl-dropholder p,
.scale-dropholder p {
  float: left;
  font-size: 1.5rem;
  line-height: 56px;
}
.tonic-dropdown > p,
.rl-dropdown > p,
.scale-dropdown > p{
  font-size: 1.5rem;
}
.tonic-dropdown, .tonic-dropholder,
.rl-dropdown, .rl-dropholder,
.scale-dropdown, .scale-dropholder{
  background:linear-gradient(#6be354, #003300);
}
.tonic-dropdown,
.rl-dropdown,
.scale-dropdown{
  margin-left: 20px;
  float: left;
  width: 208px;
  padding: 0 0 0 20px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  height:58px;
  border-left: 1px solid #6be354;
  position: relative;
}
.tonic-dropdown:hover,
.rl-dropdown:hover,
.scale-dropdown:hover{
  background:linear-gradient(#6be354 ,#48b633);
}
.tonic-dropdown:after,
.rl-dropdown:after,
.scale-dropdown:after{
  content:"▾";
  font-size: 1.8rem;
  position: absolute;
  right: 20px;
  top: 30px;
  display: block;
}

.tonic-menu,
.rl-menu,
.scale-menu {
  position: absolute;
  right: 0;
  top: 70px;
  width: 228px;
  cursor: pointer;
  opacity:0;
  transform-style: preserve-3d;
  transform: rotatey(180deg) rotateX(5deg) translatey(100px);
  backface-visibility: hidden;
  background:linear-gradient(#393636 ,#212020);
  border: 2px solid #393636;
  border-radius: 10px;
  transition: all 0.8s;
  z-index: 5;
  overflow: hidden;
  text-align: left;
}
.tonic-menu li,
.rl-menu li,
.scale-menu li {
  padding: 10px 10px;
  border-bottom:1px dotted #fff;
  color:#e8f8ff; 
  transition:all 0.3s;
}
.tonic-menu li:hover,
.rl-menu li:hover,
.scale-menu li:hover {
  background: #4d4a4a;
  padding-left: 20px;
}
.tonic-menu li:last-child,
.rl-menu li:last-child,
.scale-menu li:last-child{
  border:none;
}

.showMenu{
   opacity:1;
  transform:rotateX(0deg) translatey(0px);
}
li > i{
  float: left;
  padding-top: 3px;
  padding-right: 8px;
}
p > i{
 position: relative;
 top:2px;
}
i{
  opacity: 0.7;
}
@keyframes move{
  0%, 100%{transform:translateY(-10px);}
  50%{transform:translateY(0);}
}

@keyframes moveShadow{
  0%,100%{transform:translateY(10px);opacity:0.4;}
  50%{transform:translateY(0);opacity:1;}
}

.appLink {

}
.appLink .link
  a:link,
  a:visited {
  color: #ffffff;
}
.appLink .link
  a:hover,
  a:active {
  color: green;
}
hr {
	width: 100%;
	margin: 0 0;
	padding: 0;
	clear: both; /* floatを解除する */
	height: 0; /* ＜hr＞の実線を消す */
	border: none; /* モダンブラウザはここまでで消えます */
}
* html hr{ /* * htmlでIEのみに読ませる */
	border-top: 1px solid; /* ここが苦肉の策・・・・（汗） */
}
*:first-child+html hr{ /* for IE7 */
	border-top: 1px solid;
} 
.clear {
	border: 1px solid #000;
	width: 100%;
	clear: both;
}
.clear hr {
	display: none;
}
/* micro clearfix */
.cf:before, .cf:after {
    content:"";
    display: table;
}
.cf:after { clear: both; }

/*********************************************************************
	19 - MEDIAQUERY_START
*********************************************************************/

@-ms-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}

/*********************************************************************
	19.1 - 300px from
*********************************************************************/

@media screen and (min-width:300px) {
	
	.display,
	.diagramdisplay {
		
		text-align: center;
	}
}

/*********************************************************************
	19.2 - 480px from
*********************************************************************/

@media screen and (min-width:480px) {
	
	.custom-background {
		background-size: cover;
	}
	
	body {
		overflow-y: scroll;
		-ms-overflow-style: none;    /* IE, Edge  */
		scrollbar-width: none;       /* Firefox  */
    }
	
	::-webkit-scrollbar {  /* Chrome, Safari */
		display:none;
	}
	
	.display,
	.diagramdisplay {
		
		text-align: center;
	}
	
}

/*********************************************************************
	19.3 - 768px from
*********************************************************************/

@media screen and (min-width:768px) {
	
	body:not(.custom-background-image).admin-bar:before {
		top: 32px;
	}
	
	.custom-background {
		background-size: cover;
	}
	
	.display,
	.diagramdisplay {
		
		text-align: center;
	}
	
}

/*********************************************************************
	19.4 - 1024px from
*********************************************************************/

@media screen and (min-width:1024px) {

	.display {
		text-align: center;
	}
}

/*********************************************************************
	19.5 - iPhone 750px
*********************************************************************/

@media only screen
          and (max-width: 750px)
          and (-webkit-min-device-pixel-ratio: 2)
          and (orientation: portrait) {
	
	html {
		-webkit-text-size-adjust: none;
	}
	
	body {
		font-size: 1.8rem;
	}
	
	.display,
	.diagramdisplay {
		
	}
}

/*********************************************************************
	19.6 - iPhone 1334px
*********************************************************************/

@media only screen
          and (max-width: 1334px)
          and (-webkit-min-device-pixel-ratio:2)
          and (orientation: landscape) {
	
	html {
		-webkit-text-size-adjust: none;
	}
	
	body {
		font-size: 1.8rem;
	}
	
	.display,
	.diagramdisplay {
		
		text-align: center;
	}
}

/*********************************************************************
	20.0 - PRINT
*********************************************************************/