@charset "Shift_JIS";


/* ==========================================================
	 reset
========================================================== */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
/*     font-size:100%; */
    vertical-align:baseline;
    background:transparent;
}
body { line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary { display:block;}
/* IE6/7/8/9とFF3で定められていない 'block' 表示を修正します. */
nav ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* ==========================================================================
		基礎
========================================================================== */

html {
	width: 100%;
	height: 100%;
/* 	font-size: 100%; *//* bodyの 'font-size' が'em'の単位を使って大きさを変更しているIE6/7のテキストを修正します。 */
	/* (↓) iOSテキスト・サイズを防ぎます、ユーザー・ズームを抑制することなく、方針変化の後適応します。 */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;

}
html,button,input,select,textarea { font-family: sans-serif;} /* 'textarea'と他のフォーム要素の 'font-family ' の違いを修正します。 */
body {
	margin: 0;
	padding:0;
	width: 100%;
	height: 100%;
	word-break: normal;
	word-wrap: break-word;
} /* IE6/7の余白を修正. */


/*初期設定（基本的にタグタイプセレクタ）
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* h1,h2,h3,h4,h5,h6 {font-style: normal;font-weight: normal;font-size: 1.0em;} */
/*table {border-spacing:0;}*/
* html table {border-collapse:collapse;}
*:first-child+html table {border-collapse:collapse;}
caption,th {text-align:left; font-weight:normal;}
table,th,td,img {border:0;}
img,input {vertical-align:middle;}
q:before,q:after {content:'';}
ol,ul {list-style:none;}
ol li,ul li {list-style: none;}/*リストにつくマークを消す*/
fieldset,img {border: none;}/*画像リンク枠線を消す*/
hr,legend,caption {display:none;}
address {font-style:normal;}
em { font-style:normal;font-weight:bold;}

img{behavior: url("/sarufes/js/pngbehavior.htc");}
/*ie6 png用*/
* html .iepngfix {behavior: expression(IEPNGFIX.fix(this));}

/*フォント設定（ブラウザのデフォルト・フォントサイズ16pxを前提)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/

body {
/* 	font-size: 62.5%; */ /*ブラウザでフォルトが16pxを基準 62.5％＝10px */
/* 	font-family:verdana,Arial,"ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","メイリオ",Meiryo,"Trebuchet MS",Helvetica, sans-serif; */
/* font-family: Calibri,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; */

	line-height:1.6;
	color:#333;
}

*+html body { font-size:67.5%;}
/* p { font-size:1.55em; line-height:1.5em; text-align:left;  *//* 14px */
/* font-family: Calibri,"游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif; */
}

/* --- general --- */

/*
h2 { font-size:3em ; line-height:1.8em ; font-weight:bold; margin-bottom: 10px; }
h3 { font-size:1.6em ; line-height:1.8em ; font-weight:bold; margin-bottom: ; }
h4 { font-size:1.5em ; line-height:1.7em; font-weight:bold; }
h5 { font-size: ; line-height: ; margin-bottom: ; }
h6 { font-size: ; line-height: ; margin-bottom: ; }
*/

ul li, ol li {font-size:1em;}
small {font-size: 0.8em;}
strong {font-weight: 700;}
li { list-style: none; letter-spacing: 0.05em;font-size: 14px;}
ul.disc li {
	list-style: disc;
	list-style-position: inside;
	padding-left: 1em;
	text-indent: -1em;
	font-size: 14px;
	line-height: 1.5;
}
/* ==========================================================
	 リンク
========================================================== */

a {text-decoration: none;}
a:link    { color: #a00;}
a:hover   { color: #d00;}
a:visited { color: #a00;}
a:active  { color: #f00;}

.btn {text-align: left;margin-left:30px;}
.btn.right {margin-right:0;}
.btn a {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 1em;
	height: 1.6em;
	color: #fff;
	font-size: 0.8em;
	line-height: 1.6;
	background-color: #DE3520;
	-webkit-border-radius: 3px; /* Safari, Chrome用 */
	-moz-border-radius   : 3px; /* Firefox用 */
	border-radius        : 3px; /* CSS3 */

}
.btn a:link  { color: #fff;}
.btn a:hover { color: #fff; background-color: #DE3520; opacity: 0.6;}

/* ==========================================================
	 汎用クラス
========================================================== */

.small {font-size: 0.8em;}
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
#contents #mainColumn .left,
#contents #mainColumn .right { float: none; margin-top: 0; width: auto;}

.red { color: #f00;}

.pl1 { padding-left: 1em;}
.mb1 { margin-bottom: 1em;}

.big { font-size: 1.5em;}

/* ==========================================================
	フロートを設定した子要素を持つ親要素の高さを復活するための設定
========================================================== */
.clearfix:after {
content:".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;min-height:1%;}
/*Mac IE に適用させないための設定*/
*html .clearfix {height: 1%;}/*セレクタの前に「*htm」1がつくとIE6以前のみに適用される*/
.clearfix {display:block;}



/* ==========================================================
 基本構成
========================================================== */
#contents {
	margin-top: 20px;
}
#contents .header {
	margin-bottom: 20px;
}
/* メインコラム */
#contents #mainColumn {
	float: right;
	width: 800px;
}
#contents #mainColumn h2 {
	padding-left: 50px;
	margin-bottom: 10px;
	min-height: 30px;
	font-size: 1.8em;
	line-height: 30px;
	background: url(../images/logo_small.png) no-repeat left top;
}
#contents #mainColumn h3 {
	clear: both;
	margin-bottom: 20px;
	padding-top: 10px;
	color: #3d7400;
	font-weight: 700;
	font-size: 1.1em;
	line-height: 1.4;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #222;
}
#contents #mainColumn h4 {
		clear: both;
	margin-bottom: 5px;
	padding-left: 5px;
	line-height: 1.2;
	border-left: 5px solid #222;
}
#contents #mainColumn p {
	margin-bottom: 1em;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
#contents #mainColumn p.big {
	font-size: 16px;
	padding-left: 3em;
	text-indent: -2em;
}

#contents #mainColumn img.right { float: right; margin:0 0 30px 20px;}
#contents #mainColumn dl {}
#contents #mainColumn dl dt { letter-spacing: 0.05em; font-size: 14px;}
#contents #mainColumn dl dd { letter-spacing: 0.05em;font-size: 14px;}
#contents #mainColumn dl.course { display: block; }
#contents #mainColumn dl.course dt { float: left; display: block; padding: 0 1em 0 0; clear: both; }
#contents #mainColumn dl.course dd { float: left; display: block; margin-bottom: 10px;}
#contents #mainColumn #sponsor {
	margin-top: 20px;
	padding-top: 10px;
	font-size: 13px;
	border-top: 1px solid #333;
}
#contents #mainColumn #sponsor .bunkachou {
	height: 29px;
	line-height: 29px;
	font-size: 1.1em;
	font-weight: bold;
}
#contents #mainColumn #sponsor .bunkachou img{
	vertical-align: middle;
	margin-top: -5px;
}

/* サイドコラム */
#contents #sideColumn {
	float: left;
	width: 220px;
}
#contents #sideColumn #navi li {
	list-style: none;
	width: 220px;
	height: 36px;
	margin-bottom: 14px;
}
#contents #sideColumn #navi li a {
	display: block;
	width: 180px;
	height: 36px;
	padding: 0 20px;
	color: #fff;
	font-size: 0;
	line-height: 35px;
	text-decoration: none;
	background: url(../images/navi.png) repeat right top;
}
#contents #sideColumn #navi li a:hover {
	background: url(../images/navi.png) no-repeat left top;
}
#contents #sideColumn #navi li.top a       { background-position:-220px 0 ;}
#contents #sideColumn #navi li.briefing a  { background-position:-220px -40px ;}
#contents #sideColumn #navi li.about a     { background-position:-220px -80px ;}
#contents #sideColumn #navi li.master a    { background-position:-220px -120px ;}
#contents #sideColumn #navi li.spmaster a  { background-position:-220px -160px ;}
#contents #sideColumn #navi li.diary a     { background-position:-220px -200px ;}
#contents #sideColumn #navi li.app a       { background-position:-220px -240px ;}
#contents #sideColumn #navi li.contact a   { background-position:-220px -280px ;}
#contents #sideColumn #navi li.voice a     { background-position:-220px -320px ;}
#contents #sideColumn #navi li.milestone a { background-position:-220px -360px ;}
#contents #sideColumn #navi li.olddiary a { background-position:-220px -400px ;}

#contents #sideColumn #navi li.top.current a       { background-position:0 0 ;}
#contents #sideColumn #navi li.briefing.current a  { background-position:0 -40px ;}
#contents #sideColumn #navi li.about.current a     { background-position:0 -80px ;}
#contents #sideColumn #navi li.master.current a    { background-position:0 -120px ;}
#contents #sideColumn #navi li.spmaster.current a  { background-position:0 -160px ;}
#contents #sideColumn #navi li.diary.current a     { background-position:0 -200px ;}
#contents #sideColumn #navi li.app.current a       { background-position:0 -240px ;}
#contents #sideColumn #navi li.contact.current a   { background-position:0 -280px ;}
#contents #sideColumn #navi li.voice.current a     { background-position:0 -320px ;}
#contents #sideColumn #navi li.milestone.current a { background-position:0 -360px ;}
#contents #sideColumn #navi li.olddiary.current a     { background-position:0 -400px ;}

#contents #sideColumn #navi li.top a:hover       { background-position:-440px 0 ;}
#contents #sideColumn #navi li.briefing a:hover  { background-position:-440px -40px ;}
#contents #sideColumn #navi li.about a:hover     { background-position:-440px -80px ;}
#contents #sideColumn #navi li.master a:hover    { background-position:-440px -120px ;}
#contents #sideColumn #navi li.spmaster a:hover  { background-position:-440px -160px ;}
#contents #sideColumn #navi li.diary a:hover     { background-position:-440px -200px ;}
#contents #sideColumn #navi li.app a:hover       { background-position:-440px -240px ;}
#contents #sideColumn #navi li.contact a:hover   { background-position:-440px -280px ;}
#contents #sideColumn #navi li.voice a:hover     { background-position:-440px -320px ;}
#contents #sideColumn #navi li.milestone a:hover { background-position:-440px -360px ;}
#contents #sideColumn #navi li.olddiary a:hover     { background-position:-440px -400px ;}

#contents #sideColumn #navi li.top.current a:hover       { background-position:-0 0 ;}
#contents #sideColumn #navi li.briefing.current a:hover  { background-position:-0 -40px ;}
#contents #sideColumn #navi li.about.current a:hover     { background-position:-0 -80px ;}
#contents #sideColumn #navi li.master.current a:hover    { background-position:-0 -120px ;}
#contents #sideColumn #navi li.spmaster.current a:hover  { background-position:-0 -160px ;}
#contents #sideColumn #navi li.diary.current a:hover     { background-position:-0 -200px ;}
#contents #sideColumn #navi li.app.current a:hover       { background-position:-0 -240px ;}
#contents #sideColumn #navi li.contact.current a:hover   { background-position:-0 -280px ;}
#contents #sideColumn #navi li.voice.current a:hover     { background-position:-0 -320px ;}
#contents #sideColumn #navi li.milestone.current a:hover { background-position:-0 -360px ;}
#contents #sideColumn #navi li.olddiary.current a:hover     { background-position:-0 -400px ;}



/* ==========================================================
 各ページ
========================================================== */

/* Top */
.top #contents #mainColumn .mainpict {
	margin-bottom: 20px;
}
.top #contents #mainColumn .header {
	min-height: 100px;
/*
	padding-left: 80px;
	background: url(../images/logo.png) no-repeat left top;
*/
	border-bottom: 1px solid #000;
}
/*
.top #contents #mainColumn .header h2 {
	margin-bottom: 7px;
	padding: 0;
	min-height: 0;
	font-size: 1.6em;
	color: #000;
	line-height: 1;
	background: no-repeat;
}
*/
.top #contents #mainColumn .header h2 {
   background: rgba(0, 0, 0, 0) url("../images/logo_small.png") no-repeat scroll left top;
    font-size: 1.8em;
    line-height: 30px;
    margin-bottom: 10px;
    min-height: 30px;
    padding-left: 50px;
}
.top #contents #mainColumn .header h3 {
	margin: 0 0 10px;;
	padding: 0;
	color: #000;
	line-height: 1;
	text-align: left;
	border-bottom: none;
}
.top #contents #mainColumn .header p {
	font-size: 1.1em;
}
.top #contents #mainColumn .btn a {margin-bottom: 0;}
.top #contents #mainColumn h3 {
	border: none; text-align: center;
	color: #222;
}
.top #contents #mainColumn p {
	font-size: 1em;
}
.top #contents #mainColumn .toptext {
	padding: 0 80px;
	background: url(../images/bg_top.jpg) center top;
}
.top #contents #mainColumn .sign img {
	vertical-align: text-bottom;
}

/* gaiyou */


.gaiyou #contents #mainColumn div.course {
	margin:20px 0;
	overflow: hidden;
	position: relative;
}
.gaiyou #contents #mainColumn ul.btn {
	position: relative;
	float: left;
	left: 50%;
	list-style: none;
}
.gaiyou #contents #mainColumn ul.btn li {
	position: relative;
	float: left;
	left: -50%;
	margin: 0 10px;
}
.gaiyou #contents #mainColumn ul.btn li a {  font-size: 1.2em;background-color: #fff;}
.gaiyou #contents #mainColumn ul.btn li a:link,
.gaiyou #contents #mainColumn ul.btn li a:visited { color: #3D7400; border:2px solid #3D7400;}
.gaiyou #contents #mainColumn ul.btn li a:hover { color: #fff; background-color: #3D7400;opacity: 1;}
.gaiyou #contents #mainColumn h3.course {
	margin: 30px 0;
	padding: 3px 10px;
	color: #fff;
	background-color: #3D7400;
	border: none;
	text-shadow: 1px 1px 1px rgba(0,0,0,1);
}
.gaiyou #contents #mainColumn h4 {
	margin-bottom: 10px;
	padding-left: 5px;
	font-size: 16px;
	line-height: 1.2;
	border-left: 10px solid #222;
}
.gaiyou #contents #mainColumn .example .person {
	clear: both;
	margin: 40px 0;
}
.gaiyou #contents #mainColumn .example .person img {
	vertical-align: text-bottom;
}
.gaiyou #contents #mainColumn .example ul {
	margin-bottom: 30px;
}
.gaiyou #contents #mainColumn .example li {
	clear: both;
	margin-bottom: 10px;
}
.gaiyou #contents #mainColumn .example h4 {
	float: left;
	padding: 0;
	width: 100px;
	height: 100px;
	overflow: hidden;
	border: none;
	border: 7px solid #91B556;
	-webkit-border-radius: 50%; /* Safari, Chrome用 */
	-moz-border-radius   : 50%; /* Firefox用 */
	border-radius        : 50%; /* CSS3 */
}
.gaiyou #contents #mainColumn .example .oshichi h4 {
	float:right;
	border: 7px solid #E78247;
}
.gaiyou #contents #mainColumn .example h4 img {
	width: 100%;
	height: auto;
	margin-top: -10px;
}
.gaiyou #contents #mainColumn .example ul li {
	position: relative;
 }
.gaiyou #contents #mainColumn .example ul p {
	margin: auto;
	margin:0 130px;
	padding: 20px;
	background-color: #eee;
	/* webkit: Safari, Chrome用 , moz: Firefox用 , CSS3 */
	-webkit-border-radius: 15px;
	-moz-border-radius   : 15px;
	border-radius        : 15px;

}

.gaiyou #contents #mainColumn .example ul p {
	position: relative;
	z-index: 0;
}
.gaiyou #contents #mainColumn .example ul p.gauche:before {
	content: "";
	position: absolute;
	top: 50%; left: -8px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #eee transparent transparent;
	z-index: 0;
}
.gaiyou #contents #mainColumn .example ul p.gauche:after {
	content: "";
	position: absolute;
	top: 50%; left: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 10px 10px 0;
	border-color: transparent #eee transparent transparent;
	z-index: -1;
}

.gaiyou #contents #mainColumn .example ul p.droite:before {
	content: "";
	position: absolute;
	top: 50%; right: -8px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #eee;
	z-index: 0;
}
.gaiyou #contents #mainColumn .example ul p.droite:after {
	content: "";
	position: absolute;
	top: 50%; right: -10px;
	margin-top: -10px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent #eee;
	z-index: -1;
}




/* jitsugi tokubetsu */
.jitsugi #contents #mainColumn h4,
.tokubetsu #contents #mainColumn h4 {
	margin-bottom: 15px;
}
.jitsugi #contents #mainColumn hr,
.tokubetsu #contents #mainColumn hr {
	clear: both;
	display: block;
	margin-bottom: 20px;
	border-bottom: 1px solid #222;
}
.jitsugi #contents #mainColumn  img.left,
.tokubetsu #contents #mainColumn  img.left {
	float: left;
	margin-right: 20px;
	margin-bottom: 10px;
}
.jitsugi #contents #mainColumn  img.right.chie {
	margin-right: 130px;
}
#contents #mainColumn img.right.mb1 {
	margin-bottom: 1em;
}
/* tokubetsu */

/* koe */
.koe ul li { margin-bottom: 10px;}
.koe #contents #mainColumn ul {
/*
	float: left;*/
	width: 420px;
/* 	background-color: green; */






}