/* -------------------- */
/* 全体レイアウト */

	#header {
		position: relative;
		margin : 1em;
		padding: 1em;
		width : 200px;
		height: auto;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 0.5em;
	}

	#main {

		position: fixed;
		left: 0px;
		top : 0px;
		width : 100%;
		height: 100%;

		perspective: 1500px;
		transform-style: preserve-3d;

	}

/* -------------------- */
/* スピンアトップ */

	.roll, .gap {

		position: absolute;

		margin : 0px;
		padding: 0px;

		width : 120px;
		height: 100%;

		left: 50%;
		top : 0px;

		user-select: none;

		cursor: default;

	}

	.roll {
		
		transform-style: preserve-3d;
		
	}

	.gap div {
		
		position: absolute;
		left: 50%;
		top : 50%;

		width : 120px;
		height: 100px;
		margin-left: -60px;
		margin-top : -50px;
		line-height: 100px;
		text-align: center;
		
		font-size: xx-large;
		
	}

	.roll div.arrow_up, .roll div.arrow_down {

		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -9.0px;

		width : 18px;
		height:  9px;

		cursor: pointer;

	}

	.roll div.arrow_up {

		background-image: url("arrowup.png");
		margin-top: -104.5px;

	}

	.roll div.arrow_down {

		background-image: url("arrowdown.png");
		margin-top: 95.5px;

	}

	.roll_panel {
		
		position: absolute;
		left: 50%;
		top : 50%;
		
		width : 110px;
		height: 44px;
		line-height: 44px;

		margin-left: -55px;
		margin-top : -22px;
		
		background-color: white;
		color: black;
		text-align: center;
		font-size: x-large;

		cursor: default;

		transition:
			transform        300ms ease-out 0s,
			background-color 300ms ease-out 0s;

	}