/* フォントスタイル */
/* 大きさを決める */
html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}
 
body {
  font-size: 12px;
  font-size: 1.2rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}
 
h1 {
  font-size: 18px;
  font-size: 1.8rem;
}
 
h2 {
  font-size: 16px;
  font-size: 1.6rem;
  margin-bottom:1.5rem;
}

h3 {
	font-size: 14px;
	font-size: 1.4rem;
}

#pageMid .ichiranWrap div {
  font-size: 14px;
  font-size: 1.4rem;
}

/* bodyにフォントスタイル適用 あと色々適用しておく */
body {
    font-family: 'Avenir Next' , Verdana, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , '游ゴシック', 'Yu Gothic', 'メイリオ', Meiryo, Osaka, sans-serif;
	font-weight:400;
	line-height:120%
}

/* clearfix */

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

/* レイアウトしていく */

#pageWrap { width:100%;
			text-align:center;
}

#pageTop { width:100%;
		   text-align:center;
		   margin-top:12px;
}
#pageMid { max-width:680px;
		   width:96%;
		   text-align:left;
		   margin:12px auto 0 auto;
}
#pagebtm { width:100%;
		   text-align:center;
		   margin:12px 0;
}


/*　タグのスタイル　*/
/*　aのスタイルは link-visited-hover-active の順で　*/
a:link { color: navy; text-decoration: none }
a:visited { color: gray; text-decoration: none }
a:hover { color: red; text-decoration: underline }
a:active { color: red; text-decoration: none }

/* 色いろいろ */
.red { color:#E50012; }
.waterblue { color:#036EB8; }
.strong { font-weight:bold; }

/* 区切っとく */
hr { border:0;
	 border-bottom:#999 1px dashed;
	 margin-top:2rem;
	 margin-bottom:1rem;
}

/* Top、Mid、Btm ごとのスタイル */
/* まずTop --------------------------------------------------------------------------*/
#pageTop h1#midasi { width:100%;
					 color:#FFF;
					 background-color:#E50012;
					 font-weight:700;
					 margin:12px auto;
					 padding:12px 0;
}

/* Mid ------------------------------------------------------------------------------*/
#pageMid h2 { font-weight:bold;
			  margin-left:2%;
}
#pageMid h2.ichiran_h2 {
	margin-top:2.5em;
}
#pageMid h2#h2nana {
	color:#0C86B6;
}
#pageMid h2#h2kita {
	color:#C7015C;
}
#pageMid h2#h2hiko {
	color:#90B248;
}


#pageMid h3 { font-weight:bold;
	margin-left:2%;
}

#pageMid h3.ichiran_h3 {
	margin-top:1em;
}

#pageMid p { line-height:150%;
   		     margin:0 2% 2em;
}

/* 更新履歴 */
#pageMid dl#rireki { width:88%;
			  padding:12px 4%;
			  margin:6px auto 0 auto;
			  border:#000 1px solid;
}
#pageMid dl#rireki {
	margin-bottom:2rem;
}
#pageMid dl#rireki dt { float:left;
						max-width:70px; /* PCなどで見た場合、最大幅を70pxに制限 */
				 		width:12%;
				 		padding:0;
				 		clear:both;
}
#pageMid dl#rireki dd { margin-left:18%;
						padding:0 0 12px 0;
						width:82%; /*全体の横幅から、dlとpaddingの値を足した値を引いたもの*/
}

#pageMid .banner { width:96%;
				   margin:12px auto 0 auto;
				   
}
#pageMid .banner a { display:block;
					 width:96%;
					 font-size:18px;
					 font-size:1.8rem;
					 color:#161B61;
					 font-weight:700;
					 background-color:#2DA7E0;
					 text-align:center;
					 text-decoration:none;
					 padding:2%;
				   
}
#pageMid .banner a:hover { display:block;
						   color:#FFF;
}

/* 動画 */

#pageMid #douga {
	width:88%;
	padding:12px 4%;
	margin:6px auto 1rem auto;
	border-bottom:#999 1px dotted;
}
  #pageMid #douga .divid {
	  position: relative;
	  width: 100%;
	  height: 56.25%;
  }
    #pageMid #douga .divid video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
    }

  #pageMid #douga p {
	  margin-bottom:0.5rem;
  }


/* 課題一覧の囲み部分 */
#pageMid .ichiranWrap { display:table;
						width:92%;
						padding:1% 2%;
  						margin:18px auto 0 auto;
						border:#333 1px solid;
}
  #pageMid .ichiranWrap div { display:table-cell;
 							  vertical-align:middle;
  							  font-weight:700;
							  line-height:100%;
  }
  #pageMid .ichiranWrap .ichL { width:65%; /* 囲み部分左側、クラス名が入る */
  }
  #pageMid .ichiranWrap .ichC { width:10%; /* 囲み部分真ん中、矢印が入る */
  								text-align:center;
  }
  #pageMid .ichiranWrap .ichC i.fa-arrow-right { /* fontawasomeアイコンの矢印で色設定 */
									color:#E50001;
  }
  #pageMid .ichiranWrap .ichR { width:25%; /* 囲み部分右側、INボタンが入る */
  								text-align:center;
  }
    #pageMid .ichiranWrap .ichR .inBtn { display:block; /* 右側のINボタンのデザイン */
										 width:80%;
										 color:#E50012;
										 font-weight:700;
										 background: -moz-linear-gradient(top,#FFF 0%,#FCC);
										 background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FCC));
										 padding:6px;
										 margin:0 auto;
										 border:#E50012 2px solid;
										 border-radius:5px;
    }
    #pageMid .ichiranWrap .ichR .inBtn:hover,
    #pageMid .ichiranWrap .ichR .inBtn:active { display:block;
											    color:#FFF;
												text-decoration:none;
												background:#E50001;
    }
    #pageMid .ichiranWrap .ichR .inBtn:active { padding:7px 6px 5px 6px;
    }
    #pageMid .ichiranWrap .ichR .inBtn i { /* INボタンの中のアイコン右に隙間 */
		margin-right:0.5em;
	
/* お知らせ部分 */
#pageMid #osirase h2 { margin-top:1.5em;
}
#pageMid #osirase p {
	margin-bottom:1.5em;
}

/* 訂正とお詫び 夏期講習用だけど使いまわすかもね */
#pageMid dl#owabi { width:68%;
			  padding:12px 4%;
			  margin:18px auto 0 auto;
			  border:#E50012 1px solid;
}
#pageMid dl#owabi p { margin-bottom:12px;
					  font-weight:700;
}
#pageMid dl#owabi dt { float:left;
						max-width:130px; /* PCなどで見た場合、最大幅を60pxに制限 */
				 		width:10%;
						color:#E50012;
						font-weight:700;
				 		padding:0;
				 		clear:both;
}
#pageMid dl#owabi dd {  margin-left:18%;
						padding:0 0 12px 0;
						width:82%; /*全体の横幅から、dlとpaddingの値を足した値を引いたもの*/
						color:#E50012;
						font-weight:700;
}

#pageMid #link { width:100%;
				 margin-top:24px;
}
#pageMid #link a#back { display:block;
						width:36px;
						height:36px;
						background: -moz-linear-gradient(top,#BBB 0%,#EEE);
						background: -webkit-gradient(linear, left top, left bottom, from(#BBB), to(#EEE));
						border:#CCC 1px solid;
						border-radius:18px;
						-webkit-transform: rotate(180deg);
						-moz-transform: rotate(180deg);
}


/* btm ------------------------------------------------------------------------------*/