@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }

/* 共通
------------------------------------------------------------*/
body {
	color: #0a0a0a;
	font-size:16px;
	line-height:175%;
	letter-spacing:1px;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}

a		{ color:#292929; text-decoration:none; }
a:hover { color:#00a7e3; }

p {
	display:block;
	margin:0 0 25px;
	font-size:105%;
}
p.Read {
	width:92%;
	margin:0 auto 50px;
}
p.ReadL {
	width:92%;
	margin:0 auto 10px;
	font-size:155%;
	font-weight:bold;
	color:#00a7e3;
}
p.ReadL span {
	display:block;
	font-size:85%;
}
.BlueTxt {
	display:block;
	margin:0 0 15px;
	font-size:125%;
	font-weight:bold;
	color:#00a7e3;
}
p.Suisen {
	width:72%;
	margin:0 auto 100px;
	font-size:125%;
	line-height:185%;
}

hr {
	height: 0;
	margin: 40px 0;
	padding: 0;
	border: 0;
	border-top:1px dotted #CCC;
}
.aligncenter { text-align:center !important; }
.alignright { text-align:right !important; }

.imgright {
	display:block;
	float:right;
	margin:0 0 15px 60px;
}
img { max-width:100%; }
.imgleft {
	display:block;
	float:left;
	margin:0 40px 20px 0;
}
.imgcenter {
	display:block;
	margin:5px auto;
}
.NoBorder { border:none !important; }
.imgSentence { margin:0 3px; height:25px; vertical-align:middle; }

.Kadomaru {
	border-radius: 15px;
	webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}


/* アニメーションボタン */
a.AnimeBtn {
	display: inline-block;
	text-indent:0 !important;
	padding:7px 10px 5px;
	margin:0 3px 10px; 
	line-height:100%;
	text-align: center;
	text-decoration: none;
	outline: none;
	position: relative;
	z-index: 2;
	background-color: #00a7e3;
	border: 2px solid #00a7e3;
	color: #fff;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
a.AnimeBtn::before,
a.AnimeBtn::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
	top: 0;
	width: 50%;
	height: 100%;
	background-color: #00a7e3;
}
a.AnimeBtn,
a.AnimeBtn::before,
a.AnimeBtn::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}
a.AnimeBtn:hover {
	background-color: #fff;
	border-color: #333;
	color: #333 !important;
}
a.AnimeBtn::before {
	right: 0;
}
a.AnimeBtn::after {
	left: 0;
}
a.AnimeBtn:hover::before,
a.AnimeBtn:hover::after {
	width: 0;
	background-color: #333;
}
/* 大きいサイズ */
a.AnimeBtnL {
	padding:10px 20px;
	font-size:115%;
	letter-spacing:2px;
}
a.AnimeBtnLL {
	padding:20px 25px;
	font-size:125%;
}
/* 黒 */
a.AnimeBtnBlack {
	padding:7px 20px 5px;
	background-color: #000;
	border: 2px solid #000;
	color:#eee;
}
a.AnimeBtnBlack::before,
a.AnimeBtnBlack::after {
	background-color: #000;
}
/* グレー */
a.AnimeBtnGray {
	padding:7px 5px 5px;
	background-color: #e1e1e1;
	border: 2px solid #e1e1e1;
	color:#333;
}
a.AnimeBtnGray::before,
a.AnimeBtnGray::after {
	background-color: #e1e1e1;
}


/* 数字li */
ol.list_parentheses{
	display:block;
	padding:0;
	margin:0 0 15px;
}
ol.list_parentheses li{
	list-style-type:none;
	counter-increment: cnt;
	padding-left:2em;
	text-indent: -2em;
	list-style-position:inside;
}
ol.list_parentheses li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}

/* 全体
------------------------------------------------------------*/
#wrapper{
	display:block;
	width:100%;
	margin:0;
	padding:0;
}
.inner{
	display:block;
	clear:both;
	width:900px;
	margin:0 auto;
	padding:100px 0 70px;
}
.BgBlue { background:url(../miraiscience/images/bg_blue.gif); }
.BgGray { background:url(../miraiscience/images/bg_gray.gif); }
.BgOrange { background:url(../miraiscience/images/bg_orange.gif); }
.BgPink { background:url(../miraiscience/images/bg_pink.gif); }
.BgWhite { background: #FFF; background-image::none; }
.BgYellow { background:#fff100; }

.InfoBox {
	display:block;
	margin-bottom:20px;
	padding:10px 20px;
	font-size:95%;
}

/* フェードインアニメーション */
.FadeInContent { overflow: hidden; }
.FadeInContent .ContentBox { transition: .8s; }
.list-mv07{
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px); 
}
.mv07{
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}

/* ヘッダー
------------------------------------------------------------*/
#header{
	display:block;
	padding:0 0 10px;
	background:#fff100 url(images/bg_nami.gif)repeat-x bottom center;
}
#header .inner img {
	display:block;
	margin:0 auto 40px;
}
#header .inner p {
	line-height:135%;
	margin:0 5% 20px;
}

/* フッター
------------------------------------------------------------*/
#footer{
	width:100%;
	display:block;
	clear:both;
	margin:0;
	padding-bottom:50px;
	background:#fff100 url(images/bg_nami_footer.gif)repeat-x top center;
    overflow: hidden;
    position: relative;
}
#footer ul {
	display:block;
    margin: 0 0 10px;
    padding: 0;
    position: relative;
    left: 50%;
	float:left;
	font-size:85%;
}
#footer ul li{
    float: left;
    padding: 0 7px 10px;
    position: relative;
    left: -50%;
}
#footer ul li a {
    border-bottom: 1px dotted #292929;
	padding:0 3px;
}
#footer ul li a:hover {
    border-bottom: 1px dotted #00a7e3;
}
#footer .address{
	display:block;
	clear:both;
	font-size:85%;
	margin:0;
	text-align:center;
}

/* ページトップへ */
#pagetop {
    position: fixed;
    bottom: 0;
    right: 10px;
	z-index:2;
}
#pagetop a {
    width: 108px;
    height: 108px;
    display: block;
    text-align: center;
}
#pagetop a:hover {
    color: #000;
}


/* タイトル
------------------------------------------------------------*/
h2 {
	display:block;
	width:100%;
	padding:30px 15px;
	margin:0 0 40px;
	background:#fffeee;
	line-height:155%;
	text-align:center;
	color:#00a7e3;
	font-size:205%;
	font-weight:bold;
	border:7px solid #00a7e3;
	border-radius: 15px;
	webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}
h2 span{
	display:block;
	font-size:85%;
	line-height:85%;
	margin-top:10px;
}
h3 {
	display:block;
	border:1px solid #eee;
	font-size:155%;
	font-weight:bold;
	letter-spacing:2px;
	padding:25px 20px 20px 10px;
	background:url(images/bg_check.gif);
	margin-bottom:20px;
}
h3 span {
	display:block;
	font-size:80%;
	margin:0 0 5px 15px;
	line-height:135%;
}

/* トップページ
------------------------------------------------------------*/
/* ラインナップ */
dl.LineupArea { display:block; }
dl.LineupArea dt {
	display:block;
	width:30%;
	float:left;
	clear:both;
	margin-bottom:80px;
	text-align:center;
}
dl.LineupArea dd {
	display:block;
	width:67%;
	float:right;
	text-align:left;
}
dl.LineupArea dt img { width:80%; }
dl.LineupArea dd p{
	margin:0 0 15px;
}

/* お知らせ */
dl.InfoList {
	display:block;
	margin:70px 0 40px;
	border-bottom:1px dotted #CCC;
	background:#fffeee;
}
dl.InfoList dt {
	display:block;
	width:18%;
	float:left;
	clear:both;
	padding:15px 0 15px 2%;
	color:#00a7e3;
	border-top:1px dotted #CCC;
}
dl.InfoList dd {
	display:block;
	width:82%;
	float:right;
	padding:15px 2% 15px;
	background:#FFF;
	border-top:1px dotted #CCC;
}
/* STEM体験教室を開催 */
ul.list_check {
	display:block;
	width:92%;
	background:#fffeee;
	border:1px solid #eee;
	line-height:145%;
	padding:50px 40px 30px;
	margin:0 auto 20px;
}
ul.list_check li{
	position:relative;
	padding:0 0 30px 25px;
}
ul.list_check li:after, ul.list_check li:before{
	content:''; 
	display:block; 
	position:absolute; 
	top:4px; 
	left:8px; 
	height:11px; 
	width:4px; 
	background:#00a7e3; 
	border-radius:10px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
ul.list_check li:before{
	top:8px; 
	left:3px;
	height:8px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
ul.list_check li.Non:after, ul.list_check li.Non:before{
	content:none; 
	background:none; 
}


/* FAQ */
.AnswerArea {
	display:block;
	clear:both;
	width:90%;
	margin:40px auto;
}
p.Question {
	font-size:135%;
	font-weight:bold;
	color:#00a7e3;
	padding:50px 5% 0;
}
p.Question img.imgleft{
	max-width:70px;
	margin:-10px 20px 20px 0;
}

/* イベントレポート */
.ReportPhoto { display:block; }
.ReportPhoto ul { display:block; }
.ReportPhoto li{
	display:block;
	float:left;
	width:46%;
	height:450px;
	margin:0 2%;
	line-height:135%;
}
.ReportPhoto li img{
	display:block;
	max-height:300px;
	margin:0 auto 10px;
	border:1px solid #CCC;
	border-radius: 3px;
	webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.ReportPhoto li img.Tate{
	max-height:400px;
}
.ReportPhoto li.WPhoto{
	clear:both;
	float:none;
	width:90%;
	height:auto;
	margin:0 5% 70px;
	text-align:center;
}
.ReportPhoto li.WPhoto span{ display:block; }
.ReportPhoto li.WPhoto span img{
	display:inline-block !important;
	margin:0 1% 10px;
}
.ReportPhoto li.WPhoto span img.Yoko{ max-height:250px; }
.ReportPhoto li.height400{ height:400px !important; }

/* 1行1画像 */
.ReportPhoto li.OnePhoto{
	clear:both;
	float:none;
	width:60%;
	height:auto;
	margin:0 auto;
	text-align:left;
}
.ReportPhoto li.OnePhoto img{
	display:block;
	margin:0 auto 5px;
}

.ReportPhoto li.BnrBox50{
	width:50%;
	height:auto;
}
.ReportPhoto li.BnrBox55{
	width:55%;
	height:auto;
}
.ReportPhoto li.BnrBox37{
	width:37%;
	height:auto;
	padding-top:15px;
}

@media only screen and (max-width:899px){
	.inner { width:94%;  }
	.inner img.imgright,
	.inner img.imgleft {
		float:none;
		margin:0 auto 15px;
	}
	.ReportPhoto li.WPhoto {
		height:auto;
		margin-bottom:50px;
	}
	.ReportPhoto li.BnrBox50, .ReportPhoto li.BnrBox55, .ReportPhoto li.BnrBox37{
		width:100%;
		float:none;
		padding:0;
		margin:0;
	}
	.ReportPhoto li.BnrBox37 img { max-width:400px; width:100%; }
}
@media only screen and (max-width:640px){
	#header .inner p { margin:0 5% 20px; }
	dl.LineupArea dt {
		width:100%;
		margin-bottom:0;
		padding-left:0;
	}
	dl.LineupArea dd {
		width:100%;
		padding-top:0;
		margin-bottom:30px;
		border-bottom:1px dotted #333;
	}
	dl.LineupArea dt img { width:40%; }

	dl.InfoList dt, dl.InfoList dd { width:100%; }
	dl.InfoList dt { padding:15px 1% 0; }
	dl.InfoList dd { border:none; padding:0 1% 15px; }
	.ReportPhoto li, .ReportPhoto li.WPhoto, .ReportPhoto li.OnePhoto{ float:none; width:90%; margin:0 5% 50px; height:auto; text-align:left; }
	.ReportPhoto li.WPhoto span img{ display:block !important; margin:0 auto 10px; }
}
@media only screen and (max-width:480px){
	#footer ul li { width:100%; }
	#footer ul li a { display:block; }
	h3 { font-size:115%; letter-spacing:0; padding:20px 15px 20px 5px; }
}
@media only screen and (max-width:375px){
	#header .inner dd { width:98%; }
	#header .inner dd a, #header .inner dd .BtnSupport { height:70px; }
	#header .inner dt img { width:60%; }
	h3 span { margin-left:5px; }
}