/* CSS Document */

/* ALL_setting
================================================== */
*{
	margin:0;
	padding:0;
	font-family: "Noto Serif JP", Meiryo, sans-serif, monospace;
	font-size: 100%;
}

body {

}

a {
	outline: none;
}


#wrapper{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	z-index: 1;
}

.clear{clear:both;}

li{list-style-type:none}

img{
	vertical-align:top;
}

.pc{ display: inherit; }
.sp{ display: none; }
@media screen and (max-width: 699px){
.pc{ display: none; }
.sp{ display: inherit; }
}

.page_wrapper{
  background: #2cc3ce;
  padding: 40px;
  height: 1000px;
  color: #fff;
  font-size: 20px;
}

.page_wrapper:nth-child(2){
  background: #f73656;
}

/* loading_setting
================================================== */
#loader {
	width: 24%;
	display: none;
	position: fixed;
	_position: absolute; /* IE6対策 */
	top: 50%;
	left: 38%;
	margin-top: -100px; /* heightの半分のマイナス値 */
	z-index: 1001;

}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

#fade {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
	width:100%;
	height:100%;
	display: none;
	background-color: black;
	background-image: url("../image/planetarian_ue_about_bg.jpg");
	background-size: cover;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

@media screen and (max-width: 699px){
	#loader {
		width: 80%;
		display: none;
		position: fixed;
		_position: absolute; /* IE6対策 */
		top: 50%;
		left: 10%;
		margin-top: -100px; /* heightの半分のマイナス値 */
		z-index: 1001;

	}
}

/* section_setting
================================================== */

.section{
	width: 100%;
}

.section-content {
  margin: 0 auto;
  text-align: center;
  position: relative;
  opacity: 0;
  transition: opacity 1s ease .50s;
}

.is-show .section-content{
	opacity: 1!important;
}

/* menu_setting
================================================== */

.left_menu_wrapper{
	position: fixed;
	width: 8%;
	top: 50%;
	left: 1%;
	transform: translateY(-50%) translateX(0%);
	-webkit-ransform: translateY(-50%) translateX(0%);
	z-index: 999;
}

.left_menu_box{
	padding: 6% 0%;
}

/* Contents_setting
================================================== */

.top_wrapper{
	background-image: url("../image/planetarian_ue_top_bg.jpg");
	background-size: cover;
	background-position: right;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.about_wrapper{
	background-image: url("../image/planetarian_ue_about_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.special_wrapper{
	background-image: url("../image/planetarian_ue_special_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.story_wrapper{
	background-image: url("../image/planetarian_ue_story_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.character_wrapper{
	background-image: url("../image/planetarian_ue_special_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.spec_wrapper{
	background-image: url("../image/planetarian_ue_spec_bg.jpg");
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	min-height: 100%;
	position: relative;
	z-index: 1;
}

.top_text{
	width: 30%;
	position: fixed;
	top: 50%;
	left: 9%;
	transform: translateY(-50%) translateX(0%);
	-webkit-ransform: translateY(-50%) translateX(0%);
}

.contents_footer{
	width: 3%;
	margin: auto;
}

.contents_footer:hover{
	opacity: 0.8;
}

.about_box{
	padding: 5% 0;
}

.about_title{
	width: 60%;
	margin: auto;
}

.about_image{
	width: 60%;
	margin: auto;
	padding: 2% 0;
}

.about_title_text{
	position: absolute;
	width: 16%;
	bottom: 4%;
	right: 4%;
}

.special_box{
	padding: 5% 0;
}

.special_title{
	width: 60%;
	margin: auto;
}

.special_table_box{
	width: 60%;
	margin: auto;
	text-align: center;
	margin-top: 2%;
	margin-bottom: 4%;
}

.special_table_style1{
	width: 30%;
	margin: 0% 1%;
	padding-bottom: 3%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	position: relative;
	z-index: 1;
}

.special_title_text{
	position: absolute;
	width: 16%;
	bottom: 4%;
	right: 4%;
}

.story_box{
	padding: 5% 0;
}

.story_title{
	width: 76%;
	margin: auto;
}

.story_table_box{
	width: 76%;
	margin: auto;
	text-align: center;
	margin-top: 4%;
	margin-bottom: 4%;
}

.story_table_style1{
	width: 47%;
	margin: 0% 1%;
	padding-bottom: 3%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	position: relative;
	z-index: 1;
}

.story_title_text{
	position: absolute;
	width: 14%;
	bottom: 4%;
	left: 4%;
}

.character_box{
	padding: 5% 0;
}

.character_table_box{
	width: 76%;
	margin: auto;
	text-align: center;
	margin-top: 4%;
	margin-bottom: 2%;
}

.character_table_style1{
	width: 30%;
	margin: 0% 1%;
	padding-bottom: 3%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	position: relative;
	z-index: 1;
}

.character_table_style1_pc{
	width: 30%;
	margin: 0% 1%;
	padding-bottom: 3%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	position: relative;
	z-index: 1;
}

.character_table_style1_sp{
	display: none;
}

.character_title_text{
	position: absolute;
	width: 20%;
	top: 4%;
	left: 4%;
}

.spec_box{
	padding: 5% 0;
}

.spec_black_box{
	width: 80%;
	background-image: url("../image/black_bg_70.png");
	background-repeat: repeat;
	margin: auto;
	padding: 6% 1% 4% 1%;
	color: white;
}

.spec_text_style1{
	font-size: 28px;
	padding-bottom: 5%;
}

.spec_table_box_style1{
	width: 90%;
	margin: auto;
}

.spec_table_box_style1_2{
	width: 47%;
	margin: 0% 1%;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	position: relative;
	z-index: 1;
}

.spec_table_style1{
	text-align: right;
	vertical-align: top;
	width: 30%
}

.spec_table_style2{
	text-align: right;
	vertical-align: top;
}

.spec_table_style3{
	text-align: left;
	vertical-align: top;
}

th,td {
    
    padding: 10px;
}

.copyright{
	color: white;
	text-align: center;
	padding-bottom: 2%;
}

.spec_title_text{
	position: absolute;
	width: 12%;
	top: 12%;
	left: 12%;
}

.spec_table_text_color{
	color: #00feff;
}


/* smartphone_setting
================================================== */

@media screen and (max-width: 699px){

	.left_menu_wrapper{
		position: fixed;
		width: 8%;
		top: 50%;
		left: 1%;
		transform: translateY(-50%) translateX(0%);
		-webkit-ransform: translateY(-50%) translateX(0%);
		z-index: 999;
		display: none;
	}

	.top_wrapper{
		background-image: none;
		background-size: cover;
		background-position: right;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.about_wrapper{
		background-image: url("../image/planetarian_ue_about_bg_sp.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.special_wrapper{
		background-image: url("../image/planetarian_ue_special_bg_sp.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.story_wrapper{
		background-image: url("../image/planetarian_ue_story_bg.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.character_wrapper{
		background-image: url("../image/planetarian_ue_special_bg_sp.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.spec_wrapper{
		background-image: url("../image/planetarian_ue_spec_bg.jpg");
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		min-height: 100%;
		position: relative;
		z-index: 1;
	}

	.top_header{
		width: 100%;
		background-color: #040e29;
	}
	
	.top_header_logo{
		width: 34%;
		padding: 5% 0 5% 5%;
	}

	.top_main_logo_sp_box{
		width: 100%;
		background-color: #040e29;
	}

	.top_main_logo_sp{
		width: 50%;
		padding: 5% 0 5% 0;
		margin: auto;
	}

	.about_box{
		padding: 5% 0 10%;
	}

	.about_title_text{
		position: relative;
		width: 38%;
		margin: auto;
		padding: 10% 0 4%;
		bottom: 0%;
		right: 0%;
	}

	.about_title{
		width: 80%;
		margin: auto;
		padding: 0 0 6%;
	}

	.about_image{
		width: 80%;
		margin: auto;
		padding: 2% 0;
	}

	.special_title_text{
		position: relative;
		width: 38%;
		margin: auto;
		padding: 10% 0 4%;
		bottom: 0%;
		right: 0%;
	}

	.special_title{
		width: 80%;
		margin: auto;
		padding: 0 0 6%;
	}

	.special_box{
		padding: 5% 0 10%;
	}

	.special_table_box{
		width: 80%;
		margin: auto;
		text-align: center;
		margin-top: 2%;
		margin-bottom: 4%;
	}

	.special_table_style1{
		width: 90%;
		margin: 0 auto;
		padding-bottom: 8%;
		display: block;
		text-align: center;
		vertical-align: top;
		position: relative;
		z-index: 1;
	}

	.contents_footer{
		width: 8%;
		margin: auto;
	}

	.top_text{
		width: 30%;
		position: relative;
		top: 50%;
		left: 8%;
		transform: translateY(-50%) translateX(0%);
		-webkit-ransform: translateY(-50%) translateX(0%);
	}

	.section-content {
	  margin: 0 auto;
	  text-align: center;
	  position: relative;
	  opacity: 1;
	  transition: opacity 1s ease .50s;
	}

	.story_title_text{
		position: relative;
		width: 30%;
		margin: auto;
		padding: 10% 0 4%;
		left: 0%;
		bottom: 0%;
		right: 0%;
	}

	.story_title{
		width: 80%;
		margin: auto;
		padding: 0 0 6%;
	}

	.story_table_box{
		width: 80%;
		margin: auto;
		text-align: center;
		margin-top: 4%;
		margin-bottom: 4%;
	}

	.story_table_style1{
		width: 100%;
		margin: 0% 0%;
		padding-bottom: 10%;
		display: block;
		text-align: center;
		vertical-align: top;
		position: relative;
		z-index: 1;
	}

	.character_title_text{
		position: relative;
		width: 46%;
		margin: auto;
		padding: 10% 0 4%;
		left: 0%;
		bottom: 0%;
		right: 0%;
	}

	.character_box{
		padding: 5% 0 10%;
	}

	.character_table_box{
		width: 80%;
		margin: auto;
		text-align: center;
		margin-top: 4%;
		margin-bottom: 2%;
	}

	.character_table_style1{
		width: 100%;
		margin: 0% 0%;
		padding-bottom: 16%;
		display: block;
		text-align: center;
		vertical-align: top;
		position: relative;
		z-index: 1;
	}

	.character_table_style1_pc{
		display: none;
	}

	.character_table_style1_sp{
		width: 100%;
		margin: 0% 0%;
		padding-bottom: 16%;
		display: block;
		text-align: center;
		vertical-align: top;
		position: relative;
		z-index: 1;
	}

	.spec_box{
		padding: 5% 0 10%;
	}

	.spec_black_box{
		width: 80%;
		background-image: url("../image/black_bg_70.png");
		background-repeat: repeat;
		margin: auto;
		padding: 6% 5% 4% 5%;
		color: white;
	}

	.spec_text_style1{
		font-size: 24px;
		padding-bottom: 5%;
	}

	.spec_table_box_style1{
		width: 90%;
		margin: auto;
	}

	.spec_table_box_style1_2{
		width: 100%;
		font-size: 14px;
		margin: auto 0%;
		display: block;
		text-align: left;
		vertical-align: top;
		position: relative;
		z-index: 1;
	}

	.spec_table_style1{
		text-align: right;
		vertical-align: top;
		width: auto;
	}

	.spec_table_style2{
		text-align: right;
		vertical-align: top;
	}

	.spec_table_style3{
		text-align: left;
		vertical-align: top;
	}

	th,td {

		padding: 10px;
	}

	.copyright{
		color: white;
		text-align: center;
		font-size: 14px;
		padding-bottom: 10%;
	}

	.spec_title_text{
		position: relative;
		width: 30%;
		margin: auto;
		padding: 10% 0 6%;
		left: 0%;
		bottom: 0%;
		right: 0%;
	}

}