body {
	background		: white;
}
ul {
	list-style		: none;
	margin			: 0;
	padding			: 0;
}

#sun-home {
	display			: flex;
	flex-wrap		: wrap;
}
#navi-box {
	width			: 200px;
	flex			: 0 0 auto;
}
#ci-box {
	text-align		: center;
	background		: #e2195b;
	height			: 64px;
}

#top {
	position		: relative;
}
#sun-box {
	position		: relative;
	top				: 0;
	right			: 0;
}
.sun-title-box {
	position		: fixed;
	top				: 0;
	right			: 0;
	bottom			: 0;
	left			: 0;
	margin			: auto;
	display			: flex;
	align-items		: center;
	justify-content	: center;
	z-index			: -2;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;	
}
.sun-title {
	font-family		: 'Russo One', sans-serif;
	font-size		: 80px;
	color			: #f8e9ee;
}
.sun {
	width			: 100px;
	height			: 100px;
	border-radius	: 0 0 0 100%;
	background		: #e2195b;
	margin-left		: auto;
}
.ring {
	position		: absolute;
	width			: 100px;
	height			: 100px;
	border-radius	: 0 0 0 100%;
	background		: #f8e9ee;
	transform-origin: 100px 0px;
/*	transform		: scale(1.5,1.5);*/
	z-index			: -1;
}
@keyframes ripple {
    0% 		{transform: scale(1, 1); opacity: 1;}
    100%	{transform: scale(10, 10); opacity: 0.0;}
}
.sun:hover .ring {
   	animation: ripple 1s ease-out;
	animation-iteration-count: infinite;
}
.sun-ray-group {

}
.sun-ray {
	background		: #e2195b;
	height			: 5px;
	margin-left		: auto;
	position		: absolute;
	top				: 0;
	right			: 0;
	transition		: all 300ms 0s ease;
}
.sun-ray:hover {
	background		: #f8e9ee;
}
.sun-ray.long {
	width			: 300px;
	transform-origin: 300px 5px;
}
.sun-ray.mid {
	width			: 200px;
	transform-origin: 200px 5px;
}
.sun-ray.short {
	width			: 150px;
	transform-origin: 150px 5px;
}
.deg15 {
	transform		: rotate(-15deg);	
}
.deg30 {
	transform		: rotate(-30deg);	
}
.deg45 {
	transform		: rotate(-45deg);	
}
.deg60 {
	transform		: rotate(-60deg);	
}
.deg75 {
	transform		: rotate(-75deg);	
}
.deg90 {
	transform		: rotate(-90deg);	
}



.top-menu {
	margin-top		: 1em;
}
.top-menu li {
	padding			: 1em;
	cursor			: pointer;
	transition		: all 300ms 0s ease;
}
.top-menu li.selected {
	background		: #f8e9ee;
}

.top-menu li:hover {
	background		: #e2195b;
	color			: white;
}


.page-box {
	flex			: 1 1 auto;
}

.page-title {
	padding			: 0 1em;
	height			: 62px;
	line-height		: 62px;
	margin			: 0;
	border-bottom	: 2px solid #e2195b;
}
.page-content {
	margin-left		: auto;
    margin-right	: auto;
	margin-top		: 32px;
    max-width		: 768px;	
}

.table {
	border-collapse	: collapse;
	border-spacing	: 0;
}
.table th {
	padding			: .5em 1em;
	max-width		: 120px;
	background		: #e2195b;
	color			: white;
	border			: 1px solid #ccc;
}
.table td {
	padding			: .5em 1em;
	border			: 1px solid #ccc;
}
.table ol {
	list-style		: square;
}

.frame-box {
	border			: 4px solid #888;
	border-radius	: 4px;
/*	width			: 600px;*/
}
@media screen and (max-width: 480px){
	#navi-box {
		width			: 100%;
	}
	.sun-title {
		font-size		: 36px;
	}
	.top-menu {
		display			: flex;
		align-items		: center;
	}
}