@charset "UTF-8";

/*タイプセレクタ*/
body {
	margin:0;
	padding:0;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}

h1{
	margin:5px auto;
	padding:0;
	font-size:20px;
	text-align:center;
	font-weight:bold;
	color:#666;
}

h2{
	font-size:18px;
	margin:0.5em;
	padding:0;
	text-align:center;
	color:#999;
}

p{ 
	width:100%;
	font-size:16px;
	margin:0 auto;
	padding:0;
	/*text-align:center;*/
}

a{	text-decoration: none;
	margin:0;
	padding:0;
}

img {border:none;
	}

/*wrapper*/
#wrapper {
	width:100%;
	margin:0 auto;/*全体をセンターに移動する*/
	padding:0;
	/*max-width:1024px;*/
	background-color:#FFF;
	}

/* header */
header {
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;
	}

/* nav　グローバルナビゲーションの設定 */
nav{
	padding:0;/*ブラウザの上と左の余白をなくす*/
	margin:0 auto;/*全体をセンターに移動する*/
	}

ul{
	padding:0;
	margin:1em auto;
	list-style:none; /* リストの・を消す */
	}

li{
	margin:0;
	padding: 0 ;
 	display:inline-block;
    display:inline;
    zoom:1;
	}

li a {
 	display:inline-block;
    margin:0 1em 0 1em;
	color:#999;
	/*width:6em;*/
	width:15%;
	font-size:1em;
	font-weight:bold;
	text-align:center;
	line-height: 3em;
	background-color: #fff;
	border-bottom: 2px dotted #999;
	}

nav li a:hover{
	color:#fff;
	background-color:#999;
	border-bottom: 0px;
}

img {
    width: 100%;
   	height: auto;
	margin:0;
	padding:0;
	text-align:center;
}

/* for What's new */
#new{
	margin:2em auto;
	padding:1em;
	width:50%;
	border:1px #ccc solid;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
	text-align: left;
	background-color: #f5f5f5;
	
	/*display: none !important;*/
}

#new p{
	margin: 0 0;
	line-height: 1.2em;
}

#new a{
	text-decoration: underline;

}
#new h2{
	margin:0;
}
/* for work.html */
#main{
	width:100%;
	height:auto;
	font-size:12px;
	margin-top:20px;
	padding:10px 0;
	text-align:center;
	color:#999;
	}

#main h1{
	padding:0;
	font-size:18px;
}

#main h2{
	font-size:16px;
	margin:0;
	padding:0;
	text-align:center;
	color:#999;
}

#main p{ 
	width:100%;
	font-size:14px;
	margin:5px auto;
}

#main ul{
	margin:2em auto;
	max-width:960px;
}

#main ul li{
	margin:0;
	padding:0;
	position: relative;
	width:20%;
	min-height:2em;
 	}

#main li p{
	margin:0 auto;
	padding:0.5em;
	text-align: left;
}
#main li a {
	margin:0.2em;
	padding:0.2em;
	width:15em;
	height:20em;
	font-size:1.2em;
	font-weight:bold;
	text-align:center;
	line-height: 1.5em;
	/*background-color: #fff;*/
	border: 2px dotted #999;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
 	border: 3px dotted #999;
  	background-size: 14em;
    background-position: center center;
    background-repeat: no-repeat;
	}

#main li a:hover{
	color:#fff;
	background-color:rgba(153,204,255,0.6);
}

#main li a .hoverComent{
	padding:0;
    display: block;
    width:100%;
	/*cursor:pointer;*/
	/*background-color: rgba(255,255,255,1); */
	color: rgba(255,255,255,0); 
    position: absolute;
    bottom: -21em; 
    z-index: 100;  
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    /*left: center;*/
}

#main li a:hover .hoverComent{
    -moz-transform: translateY(-100%);  
    -o-transform: translateY(-100%);  
    -webkit-transform: translateY(-100%);  
    transform: translateY(-100%);  	
	/*background-color:rgba(153,153,153,1);*/
 	color: rgba(255,255,255,0.8); 
	}

#dome a{
	background-image: url(../images/dome.png);
} 

#mov-ph a{
	background-image: url(../images/mov-ph.png);
} 

#mem a{
	background-image: url(../images/mem.png);
} 

#sci a{
	background-image: url(../images/sci.png);
} 

#what a{
	background-image: url(../images/logo.png);
} 

#prof a{
	background-image: url(../images/star.png);
} 


/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}

@-moz-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}

@keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
 	-moz-animation-name: modalFadeIn; 
	-moz-animation-duration: 1s;
	-moz-animation-iteration-count: 1;
	animation-name: modalFadeIn; 
	animation-duration: 1s;
	animation-iteration-count: 1;
    opacity: 1;
    display:block;
}

#dome1,#mov-ph1,#mem1,#sci1,#what1,#prof1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
	position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    display: block;
    text-indent: -9999px;
    /*position: absolute;*/
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
#main .modal_window {
    text-align: right;
    display: block;
    background: #fff;
    width: 70%;
  	/*position:fixed;*/
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#main .modal_window h2{
	padding: 1em;
	font-size: 20px;
	font-weight: bold;
    text-align: center;
 }	 

#main .modal_window p {
	margin:1em;
 	width:95%;
	font-size: 16px;
    text-align:left;
	}

#modal{
	overflow: hidden;
	/*width:75%;*/
	}
#modal img{
	width:20%;
	float:left;
	margin: 2em;
	/*height:20%;*/
	}

 #modal a.details{
	margin: 1em 3em;
	padding:0.3em;
	background-color: #9cf;
	width:8em;
	font-size:12px;
	text-align: center;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
 	}

#button{
	display:inline;
	text-align: left;
	width:5em;
	height:2em;
	margin: 2em;
}

#buttton a.close{
	font-size:14px;
	width:4em;
	height:1em;
	margin: 2em !important;
	padding:2em !important;
	}


/*for Form.html*/
#container{
	max-width:960px;
	margin:3em auto;
	padding:0;
	overflow: hidden; /*floatの解除*/
	}

#left{
 	width: 40%;
 	float:left;
	}

#left img{
    width: 100%;
 	margin:0 1em;
	padding:0 ;
	}

#right{
	margin:0;
	padding:0;
	width:60%;
	float:right;
}
form{
	max-width:100%;
	margin:0;
	padding:0;
	text-align:left;
	}

form p{
	margin: 1em 2em;
	padding: 0 0em;
	text-align:left;
	}

/* footer */
footer{
	width:100%;
	height:200px;
    position: relative;
	margin-top:20px;
	padding:10px 0;
	text-align:center;
	color:#999;
	background-image: url(../images/footer.png);
	background-size: cover;
 	/*background-repeat: none;*/
   	background-position: center;	
	}

footer h1{
	font-size:1.2em;
	color:#ccc;
	text-align: left;
	width:95%;
	margin:0 1em 1em 1em;	
	}

footer ul{
	text-align: left;	
	}

footer a{
	width:8em;
	font-size: 1em;
	color:#fff;
	background-color:transparent; 
	border:1px dotted;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

footer p.right_top{
    position: absolute;
    top: 0.5em;
	font-size:1em;
	width:98%;
	color:#fff;
	padding-right: 2em;
	text-align: right;
}
footer p.right_bottom{
    position: absolute;
    bottom: 0;
	font-size:0.8em;
	width:98%;
	color:#fff;
	padding-right: 2em;
	text-align: right;	
}

/* class*/

.text-center{text-align: center;
	display: block;
 	margin-left: auto;
  	margin-right: auto;}

 /*madia query*/

@media screen and (max-width: 768px) {
footer	{height: 500px;}
h1,ul{display:none;
	}}