/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 4rem 0 7rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}

/* Hero
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.adjustableimg {
  max-width: 100%;
  height: auto;
}

.adjustableimghalf1 {
  max-width: 40%;
  height: auto;
  padding-bottom: 3rem;
}

.adjustableimghalf2 {
  max-width: 60%;
  height: auto;
  padding-bottom: 1rem;
}

.hero {
  background-image: url('../images/hero_visual.jpg');
  background-size: cover;
  color: #fff;
  background-position: center center; 
  padding-bottom: 0rem;
  height: 500px;
}

.hero_ranking {
  background-image: url('../images/hero_visual_ranking.jpg');
  background-size: cover;
  color: #fff;
  background-position: center center; 
  padding-bottom: 0rem;
  height: 250px;
}

.hero h1 {
    position:absolute;
    top:350px;
    left: 0;
    right: 0;
    margin: auto;
}

.hero_ranking h1 {
    /*position:absolute;*/
    top:10px;
    left: 0;
    right: 0;
    margin: auto;
}

/* About
–––––––––––––––––––––––––––––––––––––––––––––––––– */



.fixed-bg {
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
 
.bg01 {
  background-image: url(../images/content_bg.jpg);
}


.about {
	color: #fff;
/*
  background-image: url('../images/content_bg.jpg');
  background-size: cover;
  background-color:black;
  background-attachment: fixed;
  background-position: center center; 
*/
}

.about::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:50% 100%;
	background-image:url("../images/content_bg.jpg");
	background-size:cover;
}

.about .section-description { 
  margin-bottom: 4rem;
}

.about h2 {
    margin-top: 50px;
}

.about h3 {
    margin-bottom: 20px;
}

.formmain {
	color: #333;
}

.onlineranking {
	margin-bottom: 20px;
}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
     margin-bottom: 20px;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.specs th,td {
    padding: 15px 5px 15px 5px;      /* 余白指定 */
}

.aboutimg{
  margin-top: 20px;
}

/* Values
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.values {
  background-image: url('../images/link_bg.jpg');
  background-size: cover;
  background-position: center center; 
  color: #fff;
  padding-bottom: 5rem;
}
.value-multiplier {
  margin-bottom: .5rem;
  color: #11DFC7;
}
.value-heading {
  margin-bottom: .3rem;
}
.value-description {
  opacity: .8;
  font-weight: 300;
}

.value a{
  color: white;
  text-decoration: none;	
}
.value a:hover{
  text-decoration: underline;
}

.snstl{
	padding-top: 20px;
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
  
/* Footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
  background-color:white;	
  border-bottom: 1px solid #ddd;
}

/* Categories
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.categories {
  background-image: url('../images/values-bg.jpg');
  background-size: cover;
  color: #fff;
}
.categories .section-description { 
  margin-bottom: 4rem;
}


/* icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#social-icon{
  margin-bottom: 20px;
  position:fixed;
  right:10px;
  bottom:0px;
}

#social-icon a {
  display:inline;
  float: center;
  margin: 0 5px 5px 0;
  padding: 0;
  color: #fff;
  
}

#social-icon i {
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 50%;
  background: #333333;
  opacity:0.75;
  line-height: 50px;
  text-align: center;
}
#social-icon i:before { padding: 0; line-height: 50px; }
#social-icon a:hover i { background: #06aefb; }



/* ranking
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.about_ranking {
	color: #fff;
}

.about_ranking::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	z-index:-1;
	width:100%;
	height:100vh;
	background-repeat:no-repeat;
	background-position:50% 0%;
	background-image:url("../images/content_bg_ranking.jpg");
	background-size:cover;
}

.about_ranking .section-description { 
  margin-bottom: 4rem;
}

.about_ranking h2 {
    margin-top: 50px;
}

.about_ranking h3 {
    margin-bottom: 20px;
}

/*.rank_table{
	font-family: 'Press Start 2P', cursive;
	font-size: 14px;	
}*/

#output{
	overflow: auto;
	font-family: 'Press Start 2P', cursive;
	font-size: 14px;
	margin-bottom: 4rem;
}

#output th{
	text-align: center;
	vertical-align: middle;
	color: #00fbff
}

#output td{
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
}

#output td .vajra {
  width: 280px;
}

.weapon{
	display: inline-block;
	width: 170px;
}

.weapon img{
	width: 40px;
}


@media screen and (max-width:480px){
	
	select {
	  font-size:16px;
	}
	
	.about_ranking h2 {
	    margin-top: 10px;
	}

	.rank_table{
		writing-mode: vertical-lr;
		line-height: 1.2em;
		font-size: 12px;
	}
	
	.rank_table span{
		writing-mode: horizontal-tb;
		/*height: 15px;*/
	}
	
	#output td .vajra {
		width: 100px;
	}

	.rank_table .line1 {
		height: 12px;
	}
	
	.rank_table .line2 {
		height: 30px;
	}
	
	.rank_table .line3 {
		height: 40px;
	}
	
	.rank_table .line_weapons {
		height: 40px;
	}
	
	.weapon img{
		width: 32px;
	}
	
}


	
		
/* Size
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 480px) {
	
	.hero {
		height: 200px;
	}
	
	.hero h1 {
	    top:180px;
	}
	
	.hero_ranking {
		height: 120px;
	}
	
	.hero_ranking h1 {
	    top:110px;
	}
	

	
}