@charset "UTF-8";
/* CSS Document */

.mv{ text-align: center; max-width: 800px; padding: 60px 20px 0; margin: 0 auto; position: relative;}
.mv .label{ position: absolute; top: -20px; right: -20px; width: 28.5%;}
.mv .txt{ margin: 40px 0 0;}
.mv .info { text-align:center; color:#fff; line-height:1.5em; font-size:20px; display:block; padding:2em 0; margin:0 auto 40px auto;}

.main [class*="col"]{ margin-top: 60px;}
.col3 li{ width: 31.26316%; float: left;}
.col3 li:nth-child(n+2){ margin-left: 3.10526%;}
.col2 li{ width: 48.42106%; float: left;}
.col2 li:nth-child(even){ margin-left: 3.15788%;}

#commonInfoBox ul { background: rgba(0,0,0,0.3)}
#commonInfoBox ul li a { color: #fff; }

.starPosition { position:relative; display:block; overflow:hidden }
.starLine { position:absolute; left:0; top:0; width:100%; height:100%; transform-origin:50% 600%; animation: starLine 3s linear 0s ;}
@keyframes starLine {
	0% {transform: rotate(120deg); opacity:0;}
	25% { opacity:0; }
	75% { opacity:0.25; }
	100% {transform: rotate(0deg); opacity:1;}
}
@media screen (min-width:768px){
	#commonInfoBox ul li a:hover { color: #fff; }
	
}

@media (max-width: 767px){
  .col2 li{ width: 100%; float: none; text-align: center; margin-bottom: 15px;}
  .col2 li:nth-child(even){ margin-left: 0;}


	
	#commonInfoBox h3 { background: #f90;}

/* ~767px */}

@media only screen and (max-width:480px) {
.main [class*="col"]{ margin-top: 40px;}
  .col3 li{ width: 100%; float: none; text-align: center;}
  .col3 li:nth-child(n+2){ margin-left: 0; margin-top: 15px;}
/* ~480px */}