/* header.css */
/* 課題一覧、課題文共通の設定とbody内ヘッダー部分のスタイル */


/* フォントスタイル */
/* 大きさを決める   */

html { /*ベースフォントのサイズをブラウザ標準の16pxの62.5%とする これが10px */
	font-size: 62.5%;
}
body { /* 次にページの標準サイズを1.2remにする 12pxの記述はフォールバック対策 */
	font-size: 12px;   /* remはcss3からなのでcss3非対応に備えてpx表記併用 */
	font-size: 1.2rem; /* remはhtml要素のフォントサイズに対して計算される */
}

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

h1 {
	font-size: 14px;
	font-size: 1.4rem;
	line-height:1.2;
}

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

img {
	border: none; /* 画像にリンクがあってもborder:0 */
}

i.fa-angle-double-right:after,
i.fa-arrow-circle-left:after,
i.fa-arrow-circle-up:after { /* fontawasomeアイコンの後ろに空白つける */
	content:' ';
}

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

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


#pageWrap #pageTop,
#pageWrap #pageMid,
#pageWrap #pageBtm {
	width: 98%;
	margin-top:14px;
	margin-top:1.4rem;
	margin-left:auto;
	margin-right:auto;
}

#pageWrap #pageTop {
	text-align: center;
	margin-bottom:0;
}
#pageWrap #pageMid {
	max-width: 730px;
	min-width:500px;
	width:98%;
	text-align: left;
	margin-bottom:0;
}
#pageWrap #pageBtm {
	text-align: center;
	margin-bottom: 14px;
	margin-bottom: 1.4rem;
}


/* pageTop のスタイル ------------------------------------------------ */

/* 新pageTop テーブルレイアウトを排除 */

#pageTop .pageTop_wrap,
#pageTop #name_white,
#pageTop #pageTop_caution,
#pageTop #pageTop_caption {
	width:100%;
	max-width:730px;
	margin:0 auto;
	padding:4px;
}
#pageTop .pageTop_wrap,
#pageTop #name_white,
#pageTop #pageTop_caution {
	font-weight:bold;
}

#pageTop .pageTop_wrap #title {
	text-align:left;
	width:80%;
}#pageTop .pageTop_wrap #name_black {
	text-align:right;
	width:20%;
}
#pageTop #name_white {
	text-align:right;
	color:#FFF;
	background-color:#999;
}
#pageTop #pageTop_caution {
	text-align:right;
}
#pageTop #pageTop_caption {
	font-weight:nomal;
	text-align:right;
}


/* pageMid のスタイル ------------------------------------------------ */



/* pageBtm のスタイル ------------------------------------------------ */

#pageBtm #navigation {
	display:block;
	width:50%;
	margin:0 auto;
}

#pageBtm #navigation li {
	display:block;
	float:left;
	width:50%;
	text-align:center;
}

/* 下部に「戻る」ボタンをつける時 */
#pageBtm #backlink {
	max-width: 730px;
	min-width:500px;
	width:98%;
	text-align:right;
	margin:0 auto 1em;
}
#pageBtm #backlink .bottombtn { /* 「戻る」ボタンの装飾 */
	width:160px;
	height:24px;
	font-weight:bold;
	font-size:12px;
	font-size:1.2rem;
	text-decoration:none;
	text-align:center;
	background-color:#fff;
	border:#333 1px solid;
	border-radius:3px;
}
#pageBtm #backlink .bottombtn:hover,
#pageBtm #backlink .bottombtn:active { /* hover、active */
	background-color:#E50001;
	color:#FFF;
}

 /* 課題一覧ページの、旧#mondai ------------------------------------------------ */
#sakurei {
	width: 500px;
	margin: 0 auto;
	page-break-before: always; /* page-break-beforeで印刷時に強制改ページ */
}


/* classのスタイル ------------------------------------------------ */

.flLeft {
	float:left;
}
.flRight {
	float:right;
}

/* clearfix clearBothはできるだけ使わない方向 */
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/* clearfix .cfより新しい手法っぽい */

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

.strong {
	font-weight:bold;
}

.gray666 {
	color: #666;
}

.red {
	color: #E50001;
}

.clearLeft {
	clear:left;
}


/* 印刷する時 */
@media print {

	/* ページ内リンクは印刷しない */
	/* ページ最下段のナビゲーションは印刷しない */
	#pageMid .inpage_link,
	#pageBtm #navigation {
		display:none;
	}

}