/*全体*/
body {
	background-color:#fff;						/*全体の背景色*/
}

* {
	letter-spacing: 0.5px;								/*文字と文字の間隔*/
}


/*----------------リンク装飾----------------*/

/*デフォルトのリンク装飾*/
a {
	color:#6B7FD7;											/*未訪問のリンクの色*/
	text-decoration: none;								/*基本：リンク下線はなし*/
}
a:hover {
	border-bottom: 1px dashed;							/*基本：マウスオーバー時のみリンク下線（点線）を表示*/
}
a:active {
	color:#FF9800;									/*クリック中のリンクの色*/
}

/*メニュー用リンク装飾*/
a.menu {
	color:#777;											/*未訪問のリンクの色*/
	text-decoration: none;								/*基本：リンク下線はなし*/
	font-family: 'Roboto', sans-serif;		/*ウェブフォント*/
	font-weight: 500;
	font-size: 16px;
}
a.menu:hover {
	color:#6B7FD7;										/*文字の色*/
	border-bottom: 1px solid #6B7FD7;					/*基本：マウスオーバー時のみリンク下線を表示*/
}
a:active {
	color:#FF9800;										/*クリック中のリンクの色*/
}


/*メニュー用リンク装飾（現在のページ）*/
a.menu-now {
	color:#000;											/*未訪問のリンクの色*/
	border-bottom: 1px solid;							/*基本：マウスオーバー時のみリンク下線を表示*/
	font-family: 'Roboto', sans-serif;		/*ウェブフォント*/
	font-weight: 500;
	font-size: 16px;
}
a.menu-now:hover {
	border-bottom: 1px solid #FF9800;							/*基本：マウスオーバー時のみリンク下線を表示*/
}
a.menu-now:active {
	color:#FF9800;									/*クリック中のリンクの色*/
}


/*メニュー用リンク装飾（タイトル）*/
a.menu-title {
	color:#000;											/*未訪問のリンクの色*/
	border-bottom: none;							/*基本：マウスオーバー時のみリンク下線（点線）を表示*/
	font-family: 'Roboto', sans-serif;		/*ウェブフォント*/
	font-weight: 500;
	font-size: 18px;
}
a.menu-title:hover {
	/*border-bottom: 1px solid #FF9800;							/*基本：マウスオーバー時のみリンク下線を表示*/
	color:#FF9800;					
}
a.menu-now:active {
	color:#FF9800;									/*クリック中のリンクの色*/
}



/*グレー＆ブルーのリンクボタン用装飾*/
a.button:hover {
	color:#fff;											/*オンカーソル時のリンクの色*/
	background:#49C6E5;									/*オンカーソル時の背景色*/
	border-bottom: 1px solid #999;						/*基本：マウスオーバー時のみリンク下線を表示*/
	box-shadow:1px 1px 1px 1px #aaa;					/*影　[＋：右方向][＋：下方向][ぼかし][広がり][影の色]*/
}
a.button:active {
	background:#aaa;									/*通常時の背景色*/
	box-shadow:-1px -1px 1px 1px #999;					/*影　[＋：右方向][＋：下方向][ぼかし][広がり][影の色]*/
}
a.button {
	font-size: 12px;
	line-height: 1.3;									/*行間*/
	width: 120px;
	color:#999;											/*リンクの色*/
	background:#eee;									/*通常時の背景色*/
	border-radius:14px;									/*リンク範囲の背景を丸く*/
	-webkit-transition: 0.2s;							/*フェード時間*/
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	transition: 0.2s;
	padding: 2px 20px 2px 20px;							/*要素内のマージン　[上/右/下/左]*/
}



/*----------------【div】要素----------------*/

div {
	background-color: #fff;							/*背景色*/
	font-family: "メイリオ", sans-serif;			/*フォント指定（メイリオ）*/
	font-size: 14px;								/*要素内のテキストサイズ*/
	font-weight: 300;
	margin: 0 auto;								/*要素間のマージン　[上下][左右]*/
	max-width: 800px;								/*最大幅 652→800*/
}

div.works {
	background-color: #fff;							/*背景色*/
	font-family: "メイリオ", sans-serif;			/*フォント指定（メイリオ）*/
	font-size: 14px;								/*要素内のテキストサイズ*/
	font-weight: 300;
	margin: 0 auto;								/*要素間のマージン　[上下][左右]*/
	max-width: 600px;								/*最大幅*/
}


/*----------------【p】【hr】【ul】要素----------------*/

/*ブロック内・本文用（div内の段落に対して指定、左が広い）*/
p {
	padding: 0 0 0 0;							/*要素内のマージン　[上/右/下/左]*/
	line-height: 1.9;									/*行間*/
}

p.works {
	margin: 0 auto;								/*要素間のマージン　[上下][左右]*/
	line-height: 1.9;									/*行間*/
	max-width: 560px;								/*最大幅*/
}

p.worksinfo {
	margin: 0 auto;								/*要素間のマージン　[上下][左右]*/
	line-height: 1.9;									/*行間*/
	max-width: 560px;								/*最大幅*/
	font-size: 11px;								/*要素内のテキストサイズ*/
}




/*リスト項目*/
ul {
	line-height: 1.9;							/*行間*/
}

/*水平線*/
hr {
	height: 1px;
	background-color: #fff;
	border: none;
	border-top: 1px #ccc solid;
	margin: 40px 0px 40px 0px;
}




/*----------------【見出し】----------------*/

/*アルファベットの大見出し*/
h1 {
	font-family: 'Roboto Condensed', sans-serif;		/*ウェブフォント*/
	font-weight: 400;
	font-size: 48px;
	letter-spacing: 0.2px;								/*文字と文字の間隔*/
	line-height: 1.0;									/*行間*/
	color: #333;
	padding: 0px 0px;
}

/*アルファベット・数字の小見出し*/
h2 {
	font-family: 'Roboto Condensed', sans-serif;		/*ウェブフォント*/
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.2px;								/*文字と文字の間隔*/
	line-height: 1.0;									/*行間*/
	color: #333;
	padding: 0px 0px;
}

/*日本語の大見出し*/
h3 {
	font-family: 'Noto Sans Japanese', serif;		/*日本語ウェブフォント*/
	font-weight: 200;								/*細身*/
	font-size: 48px;
	letter-spacing: 0px;								/*文字と文字の間隔*/
	line-height: 1.0;									/*行間*/
	color: #000;
	padding: 0px 0px;
}

/*日本語の中見出し*/
h4 {
	font-family: 'Noto Sans Japanese', serif;		/*日本語ウェブフォント*/
	font-weight: 300;								/*太字*/
	font-size: 24px;
	letter-spacing: 0px;								/*文字と文字の間隔*/
	line-height: 1.0;									/*行間*/
	color: #000;
	padding: 0px 0px;
}



/*----------------【img】【figure】要素----------------*/

/*画像をウィンドウサイズに合わせてりサイズする（オリジナルは超えない）*/
img {
	max-width: 100%;
	height: auto;
}

/*丸い画像144px用クラス*/
img.circle {
	width: 144px;
	border-radius: 144px;
	-webkit-border-radius: 144px;
	-moz-border-radius: 144px;
	box-shadow:0px 0px 1px 1px #aaaaaa;			/*影*/
	margin: 20 5;								/*要素間のマージン　[上下][左右]*/
}

img.floatright {
	float: right;
	margin-left: 2em;
}

/*----------------固定用ヘッダーメニュー（単色背景、親div、タイトル、メニュー）----------------*/

/*解像度の幅が一定以上*/
@media (min-width: 832px) {
	div#header_BG1 {
		left: 0%;										/*位置（左から）*/
		top: 0px;										/*位置（上から）*/
		background-color: #f2f2f2;						/*背景色*/
		position: fixed;								/*固定*/
		z-index: 1;										/*描画順*/
		height: 52px;
		max-width: 100%;								/*最大幅*/
		width: 100%;
	}
}


/*解像度の幅が一定以上*/
@media (min-width: 832px) {
	div#header_BG2 {
		top: 0px;										/*位置（上から）*/
		position: fixed;								/*固定*/
		background-color: #f2f2f2;						/*背景色*/
		z-index: 2;										/*描画順*/
		min-width: 785px;
	}
}


div#header_L {
	line-height: 2.9;								/*行間*/
	float:left;
	background-color: #f2f2f2;						/*背景色*/
	z-index: 3;										/*描画順*/
}
div#header_R {
	line-height: 2.9;								/*行間*/
	float:right;
	background-color: #f2f2f2;						/*背景色*/
	z-index: 4;										/*描画順*/
}

/*解像度の幅が一定以上*/
@media (min-width: 832px) {
.float_L{
	float:left;
	}
}

/*解像度の幅が一定以上*/
@media (min-width: 832px) {
.float_R{
	float:right;
	text-align: right;
	}
}

/*解像度の幅が一定以下*/
@media (max-width: 831px) {
.float_L{
	left: 0%;										/*位置（左から）*/
	top: 0px;										/*位置（上から）*/
	position: fixed;								/*固定*/
	width: 100%;
	text-align: center;								/*中央揃え*/
	}
}
/*解像度の幅が一定以下*/
@media (max-width: 831px) {
.float_R{
	left: 0%;										/*位置（左から）*/
	top: 40px;										/*位置（上から）*/
	position: fixed;								/*固定*/
	width: 100%;
	text-align: center;								/*中央揃え*/
	}
}


/*----------------カードデザイン----------------*/

.float_card{
	float:left;
}

.clear {
	clear:both;	/*floatの解除*/
}


/*解像度の幅が一定以上*/
@media (min-width: 832px) {
.card {
	width: 240px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0px 1px 3px 0px #ccc;				/*影　[＋：右方向][＋：下方向][ぼかし][広がり][影の色]*/
	margin: 8px 8px 16px 8px;
	}
}

/*解像度の幅が一定の範囲内*/
@media (min-width:440px) and (max-width: 831px) {
.card {
	width: 47%;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 3px #ccc;
	margin: 8px 4px 12px 8px;
	}
}

/*解像度の幅が一定以下*/
@media (max-width: 439px) {
.card {
	width: 94%;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 3px #ccc;
	margin: 8px 12px 16px 10px;
	}
}


/*カード上の画像（漫画サムネイル）*/
.card-img {
	border-radius: 4px 4px 0 0;
	width: 100%;
	height: auto;
}

a.card-img:active,a.card-img:focus{ outline:none; }


/*漫画のタイトル表示部分*/
.card-content {
	padding: 12px 12px 18px 12px ;
	font-size: 12px;
	height: auto;
	background: #fff;
}

/*タイトル名（リンク装飾）*/
a.card-title {
	color:#333;											/*未訪問のリンクの色*/
	text-decoration: none;								/*基本：リンク下線はなし*/
}
a.card-title:hover {
	color:#6B7FD7;										/*文字の色*/
	border-bottom: 1px solid #6B7FD7;					/*基本：マウスオーバー時のみリンク下線（点線）を表示*/
}
a.card-title:active {
	color:#FF9800;									/*クリック中のリンクの色*/
}

/*説明文　※現在未使用*/
.card-text {
	color: #777;
	font-size: 12px;
	line-height: 1.4;
}



/*下部のリンク先など*/
.card-link {
	background: #fff;
	border-top: 1px solid #eee;
	font-size: 10px;
	line-height: 1.0;
	height: auto;
	padding: 4px 0px 4px 15px;
	border-radius: 0 0 4px 4px;
	clear:both;	/*floatの解除*/
}