@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url(https://fonts.googleapis.com/css?family=Lora);

.topContents h3{
	text-align:center;
	font-weight:normal;
}

.topContents .ribiloAREA{
	margin-bottom:30px;
	overflow:hidden;
}

.ribiloAREA .ribiloBox{
	border:#ddd solid 1px;
	float:left;
}
		
/* 480px以上用（タブレット/PC）の記述 */
	@media screen and (min-width: 480px) {
        .main .topContents{
			width:1220px;
			margin:0 auto;
		}
		
		.topContents h3{
			font-size:80px;
			margin-bottom:50px;
			font-family: 'Open Sans Condensed', sans-serif;
		}
		
		.topContents h3 span{
			font-size:14px;
			display:block;
			color:#999;
		}
		
		.topContents .ribiloAREA{
			width:1220px;
		}
		
		.ribiloAREA .ribiloBox{
			width:360px;
			margin:20px;
		}
		
		.ribiloIconBox{
			font-size:25px;
			text-align:center;
			padding:40px 0 20px 0;
			color:#ccc;
		}
		
		.ribiloBox h4{
			font-size:16px;
			font-weight:normal;
			padding:20px;
			text-align:center;
		}
		
		.ribiloBox h4 span{
			display:block;
			font-size:11px;
			margin-top:5px;
			font-family: 'Open Sans Condensed', sans-serif;
			color:#aaa;
		}
		
		.ribiloBox .ribiloTextBox{
			font-size:13px;
			padding:20px 0;
			margin:0 50px;
			color:#888;
			text-align:center;
			border-top:#ddd solid 1px;
		}
		
		.ribiloLinkBox a{
			display:block;
			margin:0 auto 40px auto;
			width:150px;
			border:#ccc solid 1px;
			padding:5px 20px;
			text-align:center;
			font-size:12px;
		}
		
		.ribiloLinkBox a:hover{
			background-color:#333;
			color:#fff;
		}
		
		
		.ribiloLinkBox span{
			display:block;
			margin:0 auto 40px auto;
			width:150px;
			border:#fff solid 1px;
			padding:5px 0;
			text-align:center;
			font-size:18px;
			font-family: 'Open Sans Condensed', sans-serif;
		}
		
	}
	
/* 479px以下用（スマートフォン用）の記述 */
	@media screen and (max-width: 479px) {
		.topContents h3{
			font-size:28px;
			margin-bottom:10%;
			font-family: 'Open Sans Condensed', sans-serif;
		}
		
		.topContents .ribiloAREA{
			width:100%;
		}
		
		.ribiloAREA .ribiloBox{
			width:45.5%;
			margin:3%;
		}
		
		.ribiloAREA .ribiloBox:nth-child(odd){
			margin:0 3% 3% 3%;
		}
		
		.ribiloAREA .ribiloBox:nth-child(even){
			margin:0 3% 3% 0;
		}
		
		.ribiloIconBox{
			font-size:20px;
			text-align:center;
			padding:5% 0 0 0;
			color:#ccc;
		}
		
		.ribiloBox h4{
			font-size:16px;
			font-weight:normal;
			padding:5%;
			text-align:center;
		}
		
		.ribiloBox h4 span{
			display:block;
			font-size:11px;
			margin-top:3%;
			font-family: 'Open Sans Condensed', sans-serif;
			color:#aaa;
		}
		
		.ribiloBox .ribiloTextBox{
			font-size:12px;
			padding:10% 0;
			margin:0 10%;
			color:#888;
			text-align:center;
			border-top:#ddd solid 1px;
		}
		
		.ribiloLinkBox a{
			display:block;
			margin:5%;
			border:#ccc solid 1px;
			padding:5%;
			text-align:center;
			font-size:12px;
		}
		
		.ribiloLinkBox span{
			display:block;
			border:#fff solid 1px;
			padding:5% 0;
			text-align:center;
			font-size:18px;
			font-family: 'Open Sans Condensed', sans-serif;
		}
		
	}
	
	
@keyframes atom {
  from { transform: none; }
  to { transform: translateY(-10px); }
}
@keyframes electron-circle1 {
  from { transform: rotateY(70deg) rotateZ(20deg); }
  to { transform: rotateY(70deg) rotateZ(380deg); }
}
@keyframes electron1 {
  from { transform: rotateZ(-20deg) rotateY(-70deg); }
  to { transform: rotateZ(-380deg) rotateY(-70deg); }
}
@keyframes electron-circle2 {
  from { transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg); }
  to { transform: rotateY(60deg) rotateX(60deg) rotateZ(330deg); }
}
@keyframes electron2 {
  from { transform: rotateZ(30deg) rotateX(-60deg) rotateY(-60deg); }
  to { transform: rotateZ(-330deg) rotateX(-60deg) rotateY(-60deg); }
}
@keyframes electron-circle3 {
  from { transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg); }
  to { transform: rotateY(-60deg) rotateX(60deg) rotateZ(460deg); }
}
@keyframes electron3 {
  from { transform: rotateZ(-100deg) rotateX(-60deg) rotateY(60deg); }
  to { transform: rotateZ(-460deg) rotateX(-60deg) rotateY(60deg); }
}

	/* 480px以上用（タブレット/PC）の記述 */
	@media screen and (min-width: 480px) {
		.atomLogo {
			font-family: 'Lora', serif;
			font-weight: 100;
			font-size: 28px;
			color: #aaa;
			margin: 0;
			padding:20px 0 10px 0;
		}

		.atomLogo span{
			font-size: 70px;
			color:#333;
		}
		
		.CachSubText{
			text-align:center;
			font-size:24px;
			margin-bottom:100px;
		}

		.CachSubText span:nth-child(1){
			margin:0 60px 0 70px;
		}
		
		.CachSubText span:nth-child(2){
			margin:0 60px 0 0;
		}
		
		.atom:before {
			content: '';
			position: absolute;
			top: -8px;
			left: 11px;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			-o-border-radius: 50%;
			-ms-border-radius: 50%;
			background-color:#999;
		}
		
		.CachCory{
			text-align:center;
			font-size:22px;
			color:#333;
			padding-bottom:100px;
		}
	}
	
	/* 479px以下用（スマートフォン用）の記述 */
	@media screen and (max-width: 479px) {
		.atomLogo {
			font-family: 'Lora', serif;
			font-weight: 100;
			font-size: 22px;
			color: #aaa;
			margin: 0;
			padding:20px 0 10px 0;
		}

		.atomLogo span{
			font-size: 50px;
			color:#333;
		}
		
		.CachSubText{
			text-align:center;
			font-size:24px;
			margin-bottom:100px;
		}

		.CachSubText span:nth-child(1){
			margin:0 20px 0 40px;
		}
		
		.CachSubText span:nth-child(2){
			margin:0 40px 0 0;
		}
		
		.atom:before {
			content: '';
			position: absolute;
			top: 7px;
			left: 5px;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 10px;
			height: 10px;
			border-radius: 50%;
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			-o-border-radius: 50%;
			-ms-border-radius: 50%;
			background-color:#999;
		}
		
		.CachCory{
			text-align:center;
			font-size:12px;
			color:#333;
			padding-bottom:100px;
		}
	}


.atom {
  margin: 0 auto;
  position: relative; alternate;
  perspective: 300px;
  transform-style: preserve-3d;
  text-align:center;
  padding-top:30px;
}

.atom .electron {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
	width: 100px;
  height: 100px;
  border-radius: 50px;
  transform-style: preserve-3d;
}

.electron:before {
	content: '';
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color:#ccc;
}
.atom .electron:nth-child(1) {
  transform: rotateY(70deg) rotateZ(20deg);
  animation: electron-circle1 3s linear infinite;
}
.atom .electron:nth-child(1):before {
  transform: rotateZ(-20deg) rotateY(-70deg);
  animation: electron1 3s linear infinite;
}
.atom .electron:nth-child(2) {
  transform: rotateY(60deg) rotateX(60deg) rotateZ(-30deg);
  animation: electron-circle2 3s linear infinite;
}
.atom .electron:nth-child(2):before {
  transform: rotateZ(30deg) rotateX(-60deg) rotateY(-60deg);
  animation: electron2 3s linear infinite;
}
.atom .electron:nth-child(3) {
  transform: rotateY(-60deg) rotateX(60deg) rotateZ(100deg);
  animation: electron-circle3 3s linear infinite;
}
.atom .electron:nth-child(3):before {
  transform: rotateZ(-100deg) rotateX(-60deg) rotateY(60deg);
  animation: electron3 3s linear infinite;
}


.logoBox {
	text-align:center;
	padding-top:50px;
	margin-bottom:20px;
}

.conceptBox{
	background-color:#f9f9f9;
}

.CompanyInfo{
	text-align:center;
	padding-bottom:50px;
}

.CompanyInfo li:first-child{
    font-size:18px;
}