/*************************************************************
// そふぃのPHP入門
//   基本スタイルシート
//************************************************************/
/*********************************************************
// 汎用テーブル
//********************************************************/
@import url("common/tables.css");
/*********************************************************
// 汎用クラス
//********************************************************/
@import url("common/classes.css");
/*********************************************************
// メディア設定
//********************************************************/
@import url(import/media-print.css);
/*********************************************************
// Web Fonts
//********************************************************/
@font-face {
	font-family: 'icomoon';
	src: url('../_fonts/icomoon1ef2.eot?p5szrj');
	src: url('../_fonts/icomoond41d.eot?#iefixp5szrj') format('embedded-opentype'),
		 url('../_fonts/icomoon1ef2.ttf?p5szrj') format('truetype'),
		 url('../_fonts/icomoon1ef2.woff?p5szrj') format('woff'),
		 url('../_fonts/icomoon1ef2.svg?p5szrj#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
.webfont{
	font-family: 'icomoon';
}

/************************
// 共通設定
//***********************/
*{
	margin: 0;
	padding: 0;
	line-height: 1.1em;
	font-size: 100%;
}

body{
	text-align: center; /* IE用センタリング */
	/* font-family: 'MS PGothic', Osaka, sans-serif; */
	font-family: "メイリオ","Hiragino Kaku Gothic Pro",Meiryo,"ヒラギノ角ゴ Pro W3","MS PGothic","MS UI Gothic",Helvetica,Arial,sans-serif;
}

img{
	border: none;
	vertical-align: middle;
}

table {
	border-collapse: collapse;
}

var{
	font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
	font-style: normal;
}
blockquote{
	margin: 0 2em;
}

/* ページトップのアンカー */
#top{
	display: none;
}

/* ナビゲーション類 */
#globalnavi    em,
#localnavi     strong, #localnavi     em,
#urhere        strong, #urhere        em,
#footer-urhere strong, #footer-urhere em{
	font-style: normal;
	font-weight: normal;
}

/*=====================
// アンカー
//=====================*/
a:link{
	color: #696;
}
a:visited{
	color: #060;
}
a:hover{
	color: #9C3;
	text-decoration: underline;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// #container
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#container{
	width: 840px;
	margin: 0 auto; /* 左右auto：Firefox,Netscape用センタリング */
	text-align: left; /* テキストセンタリング解除 */
	background: #FFFFFF;
	font-size: 90%;
	border: solid 1px #363;
}

/*********************************************************
// #header
//********************************************************/
#header{}
/*=====================
// #header #sitelogo
//=====================*/
#header #sitelogo{
	float: left;
}


/*=====================
// #header #siteinfo h1
//=====================*/
#header #siteinfo{
	padding: 15px 15px 0 0;
}
#header h1{
	text-align: right;
	color: gray;
}
#header h1 strong{
	color: #F93;
}

/*=====================
// #header #siteinfo #globalnavi
//=====================*/
#globalnavi{
	float: right;
	margin-top: 10px;
	padding: 5px 0;
	color: #F5F5F5;
	font-size: 10px;
}

/*=====================
// ul
//=====================*/
#globalnavi ul{
	width: 570px;
	padding: 5px 0;
	border: solid 1px silver;
	text-align: center;
	list-style: none;
	background: #F0F0F0;
}
#globalnavi ul li{
	display: inline;
	padding: 0 4px;
}

/*=====================
// グローバルナビ：アンカー
//=====================*/
#globalnavi a{
	color: #666;
	text-decoration: none;
	padding: 0 1px;
}
#globalnavi a:hover{
	text-decoration: underline;
}
/* 現在位置 */
#globalnavi a strong{
	color: silver;
	font-weight: normal;
}


/*********************************************************
// #urhere
//********************************************************/
#urhere{
	clear: both;
	padding-right: 15px;
	white-space: nowrap;
}

#urhere table{
	font-size: 80%;
	float: right;
	margin: 2px 0 6px 0;
}

/*=====================
// パンくずリンク：アンカー
//=====================*/
#urhere a{
	text-decoration: none;
}
#urhere a:hover{
	text-decoration: underline;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// #wrapper
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#wrapper{
	/* Mac IE5 排除 \*/
	height: 100%; /* Win IE6用指定 */
	/* Mac IE5 排除終了 */
	background: #FFF url("../img/bg/wrapper_bg.png") top center repeat-y;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// #main
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
#main{
	clear: both;
	float: right;
	width: 638px; /* Win IE6にあわせる */
	color: #555;
	text-align: justify;
	text-justify: inter-ideograph;
	text-autospace: ideograph-space;
}

/*********************************************************
// #contents
//********************************************************/
#contents{
	margin-left: 20px;
	margin-bottom: 5em;
	width: 600px;
	background: #FFF url("../img/bg/headline.gif") top center no-repeat;
	position: relative;
}


/*=====================
// コンテンツ：共通設定
//=====================*/
#main *{
	line-height: 1.7em;
}

/*=====================
// コンテンツ：詳細設定
//=====================*/
#contents h2{
	line-height: 1.2em;
	margin-bottom: 1em;
	padding: 6px 0 0 5px;
	font-size: 120%;
	color: gray;
	margin-bottom: 50px;
}
#contents h3{
	margin: 3em 0 2em 0;
	border-bottom: solid 1px #060;
	font-size: 105%;
	color: #555;
}
#contents h4{
	margin: 2em 0;
	border-left: solid 4px silver;
	border-bottom: solid 1px silver;
	padding-left: 4px;
}

#contents p{
	margin: 1.5em 0;
}

#contents form input{
	line-height: 1.1em;
	font-size: 90%;
}

#contents ul,#contents ol{
	margin: 1.5em 1em 1.5em 4em;
}
#contents table ul, #contents table ol{
	margin: 1em;
}
#contents ul{
	list-style: circle;
}

/*=====================
// コンテンツ：1行掲示板
//=====================*/
#contents form#bbs1{
	margin: 1em 0;
}

/* 掲示板名前 */
.bbs1-name{
	color: #66C;
	margin-right: 1em;
}

/*=====================
// コンテンツ：SNSボタン
//=====================*/
#sns {
	width: 82%;
	margin: -2.5em 0 2.5em 0;
	text-align: center;
}
#sns ul {
	overflow: hidden;
	margin: 0 0 0 -1.5%;
	list-style: none;
}
#sns li {
	float: left;
	width: 18.5%;
	margin: 0 0 0 1.5%;
	padding: 0.3em 0;
	background: #ccc;
	border-bottom: solid 1px #ccc;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(255, 255, 255, 0.35) inset;
	font-size: 90%;
}
#sns li:hover {
	opacity: 0.8;
}

#sns li a {
	display: block;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
#sns li a:before {
	position: relative;
	margin: 0 0.5em 0 0;
	border-radius: 2px;
	font-family: icomoon;
	font-size: 18px;
	vertical-align: middle;
}

/* hatena */
#sns li.sns-hatena{
	background: #2c6ebd; /* #00a4de */
}
#sns li.sns-hatena a:before{
	content: 'B!';
	font-family: Verdana;
	font-weight: bold;
}
/* Twitter */
#sns li.sns-twitter{
	background: #55acee; /* twitter official color : https://about.twitter.com/ja/company/brand-assets */
}
#sns li.sns-twitter a:before{
	content: "\e600";
}
/* Facebook */
#sns li.sns-facebook{
	background: #3a5795;
}
#sns li.sns-facebook a:before {
	content: "\e601";
}
/* Google */
#sns li.sns-google{
	background: #dd4b39; /* https://developers.google.com/+/branding-guidelines?hl=ja */
}
#sns li.sns-google a:before{
	content: "\e603";
}
/* Pocket */
#sns li.sns-pocket{
	background: #ed4055;
}
#sns li.sns-pocket a:before{
	content: "\e605";
}

/*=====================
// コンテンツ：記事上広告468*60
//=====================*/
#contents-ad468{
	margin: 3em auto 4.5em auto;
	text-align: center;
}

/*=====================
// コンテンツ：ページメニュー
//=====================*/
/* 第1階層 */
#contents ul#pagemenu{
	margin: 2em 0 4em 2em;
	list-style: circle;
}
/* 第2階層 */
#contents ul#pagemenu ol{
	margin: 0 0 0 2em;
}
/* アンカー */
#contents ul#pagemenu a{
	text-decoration: none;
}
#contents ul#pagemenu a:hover{
	text-decoration: underline;
}

/*=====================
// コンテンツ：今回のポイント
//=====================*/
#point{
	margin: 4em 0 5em 0;
	padding: 0 1em;
	border: double 4px #900;
	font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
}
#point strong{
	color:#C63;
	font-weight:normal;
}
#point p{
	margin: 1em 0;
}
#point ul, #point ol{
	margin: 0;
	list-style-position: inside;
}
#point .point-text {
	margin: 1em 2em;
}

/*=====================
// コンテンツ：スクリプト＆出力結果
//=====================*/
#contents .sample, #contents .output{
	margin: 0 0 2em 0;
	padding: 5px;
}

#contents .sample{
	border: 1px ridge;
	background: #FAF5FF;
	font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
}
#contents .output{
	border: solid 1px gray;
	background: #F5F5F5;/* whitesmoke */
	font-family: 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
}

#contents h4.sampletitle{
	border: none;
	margin: 1em 0 0 0;
}
#contents h4.output{
	margin: 0;
	padding: 0 3px;
	background: gray;
	color: #FFF;
}

/*=====================
// コンテンツ：参考ページなどのリンク
//=====================*/
#contents .goto{
	text-align: right;
	font: 100% 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
	border-top: dashed 1px #DCDCDC;
	border-bottom: dashed 1px #DCDCDC;
	padding: 0.5em 0;
}

#contents .goto a{
	text-decoration: none;
}
#contents .goto a:hover{
	text-decoration: underline;
}

/*=====================
// コンテンツ：参考関数
//=====================*/
#contents .refer-fnc{
	margin: 3em 0;
	border: solid 1px #DCDCDC;
}
#contents .refer-fnc h4{
	margin: 0;
	border-left: none;
	border-bottom: dashed 1px #DCDCDC;
	background: #F3F3F3;
	color: gray;
}

#contents .refer-fnc ul{
	font: 105% 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
	margin: 1em 1em 1em 2em;
}
#contents .refer-fnc .detail{
	font-size: 90%;
	color: gray;
}

/*=====================
// コンテンツ：関数書式
//=====================*/
#contents .format-fnc{
	margin: 3em 0;
	border: solid 1px silver;
	text-align: justify;
	text-justify: distribute;
}

#contents .format-fnc h4{
	border-left: none;
	border-bottom: dashed 1px silver;
	margin: 0;
}
#contents .format-fnc h4 code{
	font-weight: normal;
}

#contents .format-fnc ul{
	font: 100% 'ＭＳ ゴシック', 'MS Gothic', 'Osaka-等幅', 'Osaka-Mono', monospace;
	margin: 1em;
	list-style: none;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// #main(footer)
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*=====================
// main：前・次
//=====================*/
#main #prevnext{
	margin-top: 2em;
	font-size: 90%;
	border-top: dashed 1px silver;
	border-bottom: dashed 1px silver;
}
#main #prevnext table{
	float: right;
}
#main #prevnext td{
	padding-left: 15px;
	white-space: nowrap;
}
/*=====================
// main：前・次：アンカー
//=====================*/
#main #prevnext a{
	text-decoration: none;
}
#main #prevnext a:hover{
	text-decoration: underline;
}


/*=====================
// main：コンテンツ本
//=====================*/
#contents-book{
	padding: 3em 15px 3em 20px;
	border-bottom: dashed 1px silver;
}
#contents-book table{
	width: 100%;
	margin: 0 0 2em 0;
	font-size: 90%;
	border: solid 1px silver;
}
#contents-book th{
	background: #F5F5F5;
	border-bottom: solid 1px silver;
	padding: 0 1em;
}
#contents-book th a{
	text-decoration: none;
}
#contents-book th a:hover{
	text-decoration: underline;
}

#contents-book td{
	padding: 10px;
}
.contents-book-booktitle {
	width: 115px;
}


/*=====================
// main：フッタインデックス
//=====================*/
#main #footer-index{
	padding: 2em;
	border-bottom: dashed 1px silver;
}

#main #footer-index ol{
	margin: 0 20px;
	color: gray;
}

#main #footer-index li .detail{
	margin-left: 2em;
	font-size: 90%;
}

/*=====================
// main：フッタインデックス：アンカー
//=====================*/
#main #footer-index a{
	text-decoration: none;
}
#main #footer-index a:hover{
	text-decoration: underline;
}


/*=====================
// main：フッタ広告336*280
//=====================*/
#main #footer-ad336{
	padding: 2em 0;
	text-align: center;
}

/*=====================
// main：フッタ部分パンくず
//=====================*/
#main #footer-urhere{
	width: 100%;
	border-top: dashed 1px silver;
	border-bottom: dashed 1px silver;
	font-size: 90%;
}
#main #footer-urhere a{
	text-decoration: none
}

/*********************************************************
// #sidebar
//********************************************************/
#sidebar{
	float: left;
	width: 200px;
	font-size: 90%;
}

#sidebar img{
	vertical-align: top; /* WinIE6 TOP画像上の隙間消し */
}


/*=====================
// ローカルナビ
//=====================*/
#localnavi ul li{
	list-style: none;
	line-height: 0;
	margin: 0 0 7px 0; /* Win IE4,5用 */
}
#localnavi ul li/**/{ /* Win IE4,5排除 */
	margin: 0 0 10px 0;
}

#localnavi li ul{}

#localnavi li ul li{
	margin: 0;
	border-bottom: dashed 1px silver;
}

#localnavi li strong{
	color: #999;
}

#localnavi li ul li a,
#localnavi li ul li strong{
	/* Mac IE5 排除 \*/
	padding: 10px 0 10px 20px;
	/* Mac IE5 排除終了 */
}

/* Mac IE5 排除 \*/
#localnavi li ul li a{
	background: url("../img/localnavi/arrow_r.gif") no-repeat 5px 50%;
}
#localnavi li ul li a:hover{
	background: url("../img/localnavi/arrow_r.gif") no-repeat 5px 50% #EBFFEB;
}
#localnavi li ul li strong,
#localnavi li ul li .on-local{
	display: block;
	background: url("../img/localnavi/arrow_b.gif") no-repeat 5px 50%;
}
#localnavi li ul li a:hover.on-local {
	background: url("../img/localnavi/arrow_b.gif") no-repeat 5px 50% #EBFFEB;
}


#localnavi li ul li ul{
	margin: 0 0 0 0;
}

#localnavi li ul li ul li{
	border-top: dashed 1px silver;
	border-bottom: none;
}
#localnavi li ul li ul li *{
	background: none;
}

#localnavi li ul li ul li a,
#localnavi li ul li ul li strong{
	padding: 5px 0 5px 25px;
	background: url("../img/localnavi/ball1.gif") no-repeat 10px 50%;
}

/* Mac IE5 排除終了 */

/*=====================
// ローカルナビ：アンカー
//=====================*/
#localnavi a{
	width: 159px;
	display: block;
}
#localnavi a/**/{
	width: auto;
}

#localnavi li ul li ul li a{
	text-decoration: none;
}
#localnavi li ul li ul li a:hover{
	background: none;
	text-decoration: underline;
	background: url("../img/localnavi/ball2.gif") no-repeat 10px 50% #EBFFEB;
}



/*=====================
// カウンター画像
//=====================*/
#sidebar #sitecounter{
	margin: 3em 10px 0 0;
	text-align: right;
}

/*=====================
// sidebar：タイトル
//=====================*/
#sidebar .ad-title{
	padding: 5px;
	margin: 0 0 1em 0;
	background: #338533;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}

/*=====================
// sidebar：サイドバーバナー広告
//=====================*/
.banner-sidebar {
	text-align: center;
	margin: 3em 0 0 0;
}
.banner-sidebar a {
	display: block;
	margin: 0 0 2em 0;
}

/*=====================
// sidebar：サイドバー広告160*600
//=====================*/
#sidebar #sidebar-ad160{
	text-align: center;
	margin: 3em 0;
}


/*=====================
// sidebar：サイドバー本
//=====================*/
#sidebar #sidebar-books{
	text-align: center;
	border-bottom: solid 1px #060;
}

#sidebar #sidebar-books .book{
	margin: 0 auto;
	padding: 0 0 1em;
}

#sidebar #sidebar-books .book .book-title{
	text-align: left;
	margin-bottom: 1em;
	padding-left: 3px;
	border-bottom: dashed 1px silver;
}

#sidebar #sidebar-books .book .book-image{
	margin-bottom: 1em;
}

#sidebar #sidebar-books a{
	text-decoration: none;
}


/*********************************************************
// #footer
//********************************************************/
#footer{
	/* clear: both; Mac IE5 バグの為削除 */
	width: 100%;
	padding: 5px 0;
	background: url("../img/bg/grid_wh_3.gif") #060;
	/* background: #7EA97E; /* base:#696 */
	color: #F5F5F5;
	font-family: Arial,Georgia,sans-serif;
	font-size: 90%;
}
/* p(version) */
#footer p{
	float: left;
}
#footer p a{
	color: #F5F5F5;
}
/* address(copyright) */
address{
	text-align: right;
	font-style: normal;
}