@charset "utf-8";
/* CSS meijiLp 2015.12 */

/*Recet*/

/* 1. browser style reset
=========================================================*/
html,body,div,
h1,h2,h3,h4,h5,h6,pre,
table,caption,
dl,dt,dd,ul,ol,li,
fieldset,form,label,legend{
	margin:0;
	padding:0;
	font-size:100%;
	font-weight:normal;
}
table,tr,th,td{
	border-collapse:collapse;
	border-spacing:0;
	font-weight:normal;
}

/* 2. element style
=========================================================*/
strong{font-weight:bold;}
a img{border-style:none;}
img{vertical-align:middle;}

/* 3. clear & reset class
=========================================================*/
/* Float containers fix:
 http://www.csscreator.com/attributes/containedfloat.php */
.clfix:after{
	content:"."; 
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0;
}
.clfix{display:inline-block;}
/* Hides from IE-mac \*/
* html .clfix{height:1%;}
.clfix{display:block;}
/* End hide from IE-mac */

.clr{clear:both !important;}
/*
hr{
	visibility:hidden;
	clear:both;
}*/
br.fclr,br.clr{
	clear:both;
	font-size:0px;
	line-height:0px;
}

/*Recet_end*/

/*Layout****/
html{font-size: 62.5%;}
body {
	font-size: 1.4em;
	/*-webkit-text-size-adjust: 100%;*/
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	background:#FFFF00;
	line-height: 1.6;
	color: #202020;	
	    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
body , html {
/*height: 100%;*/
}
section{
	font-family: "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
		font-size: 118%;
}
/*----------------------------------------------------------------*/

#headerLogo{
margin: 10px 10px;
}

#meijirouCon01{
	max-width: 1000px;
	margin: 0 auto;
}
#titArea{	
}
#titArea h1{
	text-align: center;
	margin: 42px auto 10px;
}
#imgArea{
	text-align: center;
	margin: 68px auto 0;	
	background: url(/koho/math-everywhere/meijiro/images/bgMain.png) no-repeat center top;
}
#imgArea p.mainLead{
	position: relative;
	bottom: 365px;
	font-size: 95%;
}
.tit01{
	margin: 0 auto 10px;
display: block;
}
/*-----------------------------------------------------------------*/
.noteBox{
	background: #FFF;
	padding: 45px 30px;
	border-radius: 35px;
	text-align: center;
	margin-top: -70px;
}

h2 {
 position: relative;
 display: inline-block;
 padding-bottom: 15px;
	font-size: 180%;
	margin: 0 auto ;
 }
h2::before {
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 border-bottom: 5px solid #FFD24D;
 width : 80px;
 width : -webkit-calc(80px) ;
 width : calc(80px) ;
 margin: 0 auto;
 }
/*
h2{
	text-align: center;
}*/

h3{
	font-size: 120%;
	text-align: left;
	border: 2px solid #FFD24D;
	border-radius: 50px;
	padding: 4px 18px;
	margin: 30px auto 20px;
}
.noteBox p{
	padding: 0 24px;
	margin: 0 auto 1.5em;
	text-align: left;
}
.listNavi{
width: 145px;
margin: 0 auto ;}
.listNavi:after{
	content:"."; 
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0;
}

.listNavi li{
	float: left;
	margin-left: 12px;
	list-style: none;
}
.listNavi li:first-child{
	margin-left: 0;
	
}
p.mbLast{
	margin: 0 auto 55px;
}
/*--------------------------*/

#meijirouCon02 {
  position: relative;
  overflow: hidden;
  margin: 0 0;
  padding: 30px 0 0;
}

#meijirouCon02:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 100%;
  margin: 0 -10% 1%;
  background: #FFFF99;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -1;
}

#meijirouCon02 .conInner{
	box-sizing: border-box;
  width: 100%;
  height: 100%;
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}

#meijirouCon02 h2{
	margin: 60px auto 20px;	
}
#meijirouCon02 .noteBox{
	margin: 0 auto 50px;	
}

#meijirouCon02 h3{
	margin: 0 auto 30px;
	border: none;
	font-size: 130%;
}
#meijirouCon02 #a01  h3 span{
	background: #FF4D4D;
	border-radius: 50px;
	padding: 5px 20px;
	color: #FFF;
	margin-right: 0.5em;

}
#meijirouCon02 #a02  h3 span{
	background: #FFC926;
	border-radius: 50px;
	padding: 5px 20px;
	color: #FFF;
	margin-right: 0.5em;

}
#meijirouCon02 #a03  h3 span{
	background: #00B285;
	border-radius: 50px;
	padding: 5px 20px;
	color: #FFF;
	margin-right: 0.5em;

}
#meijirouCon02 #a04  h3 span{
	background: #00D9D9;
	border-radius: 50px;
	padding: 5px 20px;
	color: #FFF;
	margin-right: 0.5em;

}
#meijirouCon02 #a05 h3 span.tit{
	background: #4651AC;
	border-radius: 50px;
	padding: 5px 20px;
	color: #FFF;
	margin-right: 0.5em;
	font-size: 110%;

}
#meijirouCon02 .noteBox p{
	max-width: 670px;
	float: left;
	margin: 0 auto 0;
}

#meijirouCon02 #a01 h3 span.fontS,
#meijirouCon02 #a02 h3 span.fontS,
#meijirouCon02 #a03 h3 span.fontS,
#meijirouCon02 #a04 h3 span.fontS,
#meijirouCon02 #a05 h3 span.fontS{
font-size: 80%;
padding: 1px !important;
border: none;
margin-right: 0.5em;
}
/*------------------------------------*/
#meijirouCon03 .conInner{
	padding: 40px 0;
}
#meijirouCon03 .conInner{
		max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
#meijirouCon03 .noteBox{
	margin: 0 auto 40px;
}

#meijirouCon03 .img01{
float: right;
margin: -40px 30px 0;
}
#meijirouCon03 h2{
margin: 0 auto 40px;
	display: block;
}

#meijirouCon03 .bookArea h3{
background: #FF4D4D;
color: #FFF;
border-radius: 50px;
padding: 16px 18px;
text-align: center;
border: none;
font-size: 150%;
font-weight: bold;
	margin: 0 auto 20px;

	}
#meijirouCon03 .bookArea h4{
	text-align: center;
	font-weight: bold;
	font-size: 140%;
}

/*---------------------------------*/
.btnArea{
	width: 800px;
	margin: 0 auto;
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

	
}
.btnArea:after{
	content:"."; 
	display:block; 
	visibility:hidden; 
	clear:both; 
	height:0;
}

.btn01Area{
	float: left;
	width: 395px;
	margin-right: 15px;
}
.btnArea div.btn01 a{
	color: #212121;
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 90% 50% #FFFF00;
float: left;
padding: 10px 0;
text-decoration: none;
display: block;
width: 380px;
	text-shadow: 1px 1px 1px #FFFFA6;
	font-weight: bold;
	font-size: 105%;
	
}

.btnArea div.btn02 a{
	color: #212121;
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 90% 50% #FFFF00;
	float: left;
padding: 10px 0;
	text-decoration: none;
	display: block;
		width: 380px;
		text-shadow: 1px 1px 1px #FFFFA6;
		font-weight: bold;
	font-size: 105%;
}
.btnArea div.btn01 a:hover,
.btnArea div.btn02 a:hover{
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 96% 50% #FFFF00;
	transition: 0.3s;
}
.btnImg01{
	float: left;
	position: relative;
bottom: -50px;
	left: 20px;
}
.btnImg02{
	float: left;
	position: relative;
bottom: -50px;
		left: 10px;
}


.btnArea div.btn01{
	margin-left: 12px;
}

/*----------------------------------------------------------------*/
.photoImg{
	float: right;
	width: 200px;
}
.area {
	margin: 0 auto;
	display: block;
	text-align: center;
	position: relative;
	cursor: pointer;
	width: 200px;
}
.area:hover .on {
	opacity: 1;
}
.area .on {
	position: absolute;
	transition: opacity 1s;
	opacity: 0;
	left: 0;
	top: 0;
	z-index: 2;
}
.area .off {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	width: 200px;
}
/*----------------*/
	
.area:hover album {
	margin: auto;
	/*background-color: white;*/
	position: relative;
	width: 200px;
}
.area:hover .album img {
	width: 100%;
	animation-name: album;
	-webkit-animation-name: album;
	animation-duration: 6s;
	-webkit-animation-duration: 6s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	opacity: 0;
}
.area:hover .album .img2 {
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	position: absolute;
	top: 0;
	left: 25%;
}
.area:hover .imgMoto {
	/*opacity: 0;*/
	z-index: 1;
}
.area:hover .album .img1 {
	display: block;
	margin: 0 auto;
	/*-webkit-transition: all 1s ease-in-out;*/
	z-index: 10;
}
.area:hover .album .img2 {
	animation-delay: 1s;
	-webkit-animation-delay: 1s;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;/* -webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;*/
}
.album .img2 {
	animation-delay: 4s;
	-webkit-animation-delay: 4s;
	position: absolute;
	top: 0;
	left: 25%;
}
.area .album .img1, .area .album .img2 {
	opacity: 0;
}
@keyframes album {
 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 37.5% {
 opacity: 1;
}
 50% {
 opacity: 1;
}
}
 @-webkit-keyframes album {
 0% {
 opacity: 0;
}
 12.5% {
 opacity: 1;
}
 37.5% {
 opacity: 1;
}
 50% {
 opacity: 1;
}
}
/*----------------------------------------------------------------*/

#footer{
	clear:both;
	width:100%;
	background:#EEEEEE;
	color:#111;
	text-align:center;
	margin:0;
	height:71px;
	/*position: fixed !important;*/
    bottom: 0;
	left:0;
	z-index:9000;
	display:block;

	}

#footerInner{
		/*min-width:1200px;*/
		text-align:left;
		margin:0 auto;
		display:block;
	}
.flogo{
	float:left;
	margin:15px 10px;
	display:inline-block;
}
.flogo img{
	width:156px;
	height:43px;
}
.footer_meijirou{
	float:left;
	margin:8px 10px 2px 0;
	display:inline-block;
}
.fCopy{
	margin:15px 0 0 !important;
	font-size:85%;
	letter-spacing:0.00em;
	display:inline-block;
	/*font-weight: bold;*/
}
.flogo02{
	float: right;
	margin: 10px;
}
p.fCredit{
	float: right;
	font-size: 60%;
	color: #333;
	margin: 40px 0 0;
}
/*----------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 52px;
    right: 24px;
	z-index:60000;
}
#page-top a {
    background: url(/koho/math-everywhere/images/pagetop.png);
    width: 71px;
	height:70px;
    display: block;
}
#page-top a:hover {
	background-position:0 -70px;
}
#page-top a span{
	display:none;
}

/*-----fuwat------------------------------------------------------*/
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1.5s;
 -ms-animation-duration:1.5s;
 animation-duration:1.5s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/*Layout_end*/

.pc {
	display: block;
}
.sp {
	display: none;
}
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
/**/
@media screen and (max-width:769px){
	
img {
    width: 100%;
	height:auto;
}
.sp {
	display: block;
}
.pc {
	display: none;
}
body , html {
height: auto;
}

/*----------------------------------------------------------------*/
#header{
	background:none;
	height:auto;
}
#headerInner{
	position:static;
}
	#headerLogo {
		width: 20%;
height: auto;
margin: 5px 5px;
		
	}
/*----------------------------------------------------------------*/
#heightIn{
	position:static;
    height: auto !important;

}
/*----------------------------------------------------------------*/
#top #header,
#page #header{
	height: 55px;
}
#top h1{
	clear:both;
	display:block;
	padding:10px 0 12px;
	position:static;
	width:76%;
	text-align:center;
	margin:0 auto;
}
/*#page h1{
	clear:both;
	display:block;
	padding:10px 0 12px;
	position:static;
	width:76%;
	text-align:center;
	margin:0 auto;
}*/
#top #headerLogo{
	position:static;
	width:20%;
	height:auto;
	float: left;
		margin: 5px 5px;
}
#page #headerLogo,
#page02 #headerLogo{
	position:static;
	width:20%;
	height:auto;
	float: left;
		margin: 5px 5px;
}

h1{
	clear:both;
	margin:0;
	display:block;
	padding:14px 0 0;
	position:static;
}


#headerLogo img{
	width:100%;
	height:auto;
}

/*----------------------------------------------------------------*/	
#content {
    padding: 14px 0 0;
	margin:0 !important;
}
/*----------------------------------------------------------------*/
	h2 {
    font-size: 150%;
}
h3 {
    font-size: 110%;
    padding: 4px 18px;
    margin: 30px auto 20px;
	text-align: center;
}
/*-----------------------------------------------------------------*/
	#titArea h1 {
    text-align: center;
    margin: 15px auto 10px;
    width: 84%;
}
	
	#sp_imgArea {
    text-align: center;
    margin: 15px auto 20px;
    background: url(/koho/math-everywhere/meijiro/images/bgMain.png) repeat-y center top;
		background-size:90%;
		position: relative;
		
}
		#sp_imgArea img{
			width: 88%;
			position: relative;
}
		#sp_imgArea p{
			position: absolute;
			top: 6%;
			left:13%;
			font-size: 80%;
			font-weight: bold;
			text-align: center;
			margin: 0 auto;
		
}

	
.noteBox{
	background: #FFF;
	padding: 30px 18px;
	margin: 0 2% 0;
	border-radius: 20px;
}
	.noteBox p {
    padding: 0 15px;
}
	#meijirouCon02 .noteBox{
			margin: 0 2% 30px;
	}
	#meijirouCon02 .noteBox p{
	max-width: 670px;
	float: none;
	margin: 230px auto 0;
}
	#meijirouCon02 h3{
		margin: 0 auto 15px;
	}
			#meijirouCon02 #a01 h3 span.tit,
		#meijirouCon02 #a02 h3 span.tit,
		#meijirouCon02 #a03 h3 span.tit,
		#meijirouCon02 #a04 h3 span.tit,
	#meijirouCon02 #a05 h3 span.tit{
		display: block;
margin-bottom: 10px;
	}

#meijirouCon02:before {
  margin: 3% 0 0;
	width: 150%;	

}
	#meijirouCon02 .conInner{
		background: #FFFF99;
		padding-bottom: 20px;
	}	
	

	/*---------------------------------*/
.btnArea{
	width: 90%;
	clear: both;
	float: none;
}
.btn01Area{
	float: none;
	width: 100%;
	margin-right: 0;
	margin-left: 0;
}
.btnArea div.btn01 a{
	color: #212121;
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 95% 50% #FFFF00;
	float: none;
padding: 10px 0;
text-decoration: none;
display: block;
	width: 100%;
	text-shadow: 1px 1px 1px #FFFFA6;
	font-weight: bold;
	font-size: 100%;
	margin: 0 auto 10px;
	clear: both;
}
.btnArea div.btn01,
	.btnArea div.btn02{
		margin-top: -30px;
	}
.btnArea div.btn02 a{
	color: #212121;
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 95% 50% #FFFF00;
	float: none;
	padding: 10px 0;
	text-decoration: none;
	display: block;
	width: 100%;
	text-shadow: 1px 1px 1px #FFFFA6;
	font-weight: bold;
	font-size: 100%;
		clear: both;
}
.btnArea div.btn01 a:hover,
.btnArea div.btn02 a:hover{
	background: url(/koho/math-everywhere/meijiro/images/ico01.png) no-repeat 96% 50% #FFFF00;
	transition: 0.3s;
}
.btnImg01{
	float: left;
	position: relative;
bottom: -50px;
left: -20px;
}
.btnImg02{
	float: left;
	position: relative;
bottom: -50px;
left: -20px;
}
.btnArea div.btn01{
	margin-left: 12px;
}
/*-----------------*/
	.photoImg{
	float: none;
	width: 200px;
		margin: 0 auto;
}

	/*-------------------------*/
	#meijirouCon03 .noteBox {
    margin: 0 2% 20px;
}
	#meijirouCon03 .img01{
		float: none;
margin: 0 auto 20px;
width: 50%;
	}

	#meijirouCon03 .bookArea h3{
		font-size: 110%;
		text-align: center;
	}
/*-----footer-----------------------------------------------------------*/

#footer{
	clear:both;
	width:100%;
	text-align:center;
	margin:0 auto 0;
	height:auto;
	position:static;
    bottom: 0;
	}
	
#footerInner{
		width:100%;
		text-align:center;
		margin:0 auto;
		padding:0.8% 0;
	}

.flogo{
	text-align:center;
	margin:10px auto;
	position:static;
	width: 25%;
}
.flogo img{
	width:90%;
	padding:0 0;
	height:auto;
}

.fCopy{
	margin:0 auto;
	font-size:65%;
	letter-spacing:0.05em;
	position:static;
	text-align: left;
	}	

p.fCopy{
	margin:5px 0 0 !important;
	width: 65%;
	}
.flogo02 {
    float: none;
	clear: both;
	text-align: left;
    margin: 10px 10px 5px;
	padding-top: 0;
}
	.flogo02 img{
	width: 58%;
}
	.footer_meijirou {
    float: left;
    margin: 5px 6px 2px 0;
    display: inline-block;
    width: 8%;
}
	p.fCredit{
		text-align: center;
		float: none;
	margin: 7px auto 1px;
		font-size: 60%;

}
/*----------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
}
#page-top a {
    background: url(/koho/math-everywhere/images/pagetopSp.png);
	background-size:100%; 
    width: 40px;
    height: 40px;
    display: block;
}
#page-top a:hover {
	background-position:0 -80px;
}
p#page-top{
	margin:0 !important;
}
}