@charset "utf-8";
/* (c) 2015 天空銀河 */

/* -------------------------------------------------------------------------------------------------
	Common
------------------------------------------------------------------------------------------------- */
	* {
		margin: 0;
		padding: 0;
		border: none;
		box-sizing: border-box;
		-o-box-sizing: border-box;
		-ms-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		font-family: "メイリオ","meiryo","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","MS P Gothic","ＭＳ Ｐゴシック","Osaka",sans-serif;
		font-size: 100%;
	}
	body {
		margin: 0 0 1em 0;
		padding: 0;
		background-color: #FFFFFF;
		color: #333333;
		font-size: 84%;
		line-height: 1.7em;
		text-align: center;
	}
	a {
		color: #5070A0;
		text-decoration: underline;
		cursor: pointer;
	}
	a:hover {
		color: #6080F0;
		text-decoration: underline;
	}
	h1 {
		margin: 1em 0 1em 0;
		padding: 0.4em 0.5em 0.3em 0.5em;
		background: url('./picture/h1back.png') no-repeat 0 100%;
		font-weight: bold;
		font-size: 180%;
		white-space: nowrap;
	}
	h2 {
		margin: 0;
		padding: 0 0 0 28px;
		background: url('./picture/point_left.png') no-repeat 8px 30%;
		font-weight: bold;
		font-size: 120%;
		white-space: nowrap;
	}
	h3 {
		margin: 0.5em 0 0 0;
		padding: 0;
		font-weight: bold;
		font-size: 100%;
		white-space: nowrap;
	}
	img {
		margin: 0px;
		padding: 0px;
		border: none;
		vertical-align: middle;
	}
	applet {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	iframe {
		margin: 0px;
		border: none;
	}
	ul, ol {
		margin: 0.5em 1em 0 2em;
		padding: 0;
	}
	ul li {
		list-style-type: circle;
		list-style-image: url('./picture/point.png');
		margin: 0;
		padding: 0;
	}
	hr {
		margin: 0.5em 0;
		padding: 0;
		border-width: 0 0 1px 0;
		border-color: #D0D0D0;
		border-style: dotted;
	}
	p {
		margin: 0;
		padding: 0.5em 0;
	}
	textarea, input {
		padding: 0.1em;
		border-width: 1px;
		border-color: #BDBDBD;
		border-style: dotted;
		color: #3E443E;
		font-size: 100%;
	}
	abbr {
		border-width: 0px 0px 1px 0px;
		border-color: #333333;
		border-style: dotted;
	}
	dl dt {
		margin: 0;
		font-weight: bold;
	}
	dl dd {
		margin: 0 0 0.5em 0;
		padding: 0 0 0 2em;
	}
	pre {
		padding: 0.5em 0;
	}
	em {
		color: #55AA55;
		font-weight: bold;
	}
	strong {
		font-weight: bold;
	}
	table {
		margin: 0;
		padding: 0;
		border: none;
		border-collapse: collapse;
	}
	tr, td {
		margin: 0;
		padding: 0;
	}
	button {
		display: inline-block;
		padding: 0.3em 1em;
		border: solid 1px #D8C090;
		border-radius: 3px;
		box-shadow: inset 0px 1px 0px 0px #FFFFFF;
		background-color: #EBDDC0;
		color: #B07030;
		font-weight: normal;
		font-size: 100%;
		text-decoration: none;
	}
	button:hover {
		border: solid 1px #E0C898;
		background-color: #F3E5C8;
		color: #B87838;
		transition: all 0.2s ease;
	}
	button:active {
		position: relative;
		top: 1px;
	}
	button:focus, input:focus, textarea:focus {
		outline: none;
	}



/* -------------------------------------------------------------------------------------------------
	階層
------------------------------------------------------------------------------------------------- */

	/* レベル1 */
	section {
		margin: 0;
		padding: 0 0 4em 0;
	}
	/* レベル2 */
	section section {
		margin: 0;
		padding: 1em 0 1em 28px;
	}
	/* レベル3 */
	section section section {
		margin: 0;
		padding: 0.5em 0 1em 28px;
	}

	/* 同じ階層の字下げ */
	h1 ~ p, h1 ~ div, h1 ~ table, h1 ~ ul, h1 ~ ol, h1 ~ dl, h1 ~ pre, h1 ~ hr,
	h2 ~ p, h2 ~ div, h2 ~ table, h2 ~ ul, h2 ~ ol, h2 ~ dl, h2 ~ pre, h2 ~ hr,
	h3 ~ p, h3 ~ div, h3 ~ table, h3 ~ ul, h3 ~ ol, h3 ~ dl, h3 ~ pre, h3 ~ hr,
	h4 ~ p, h4 ~ div, h4 ~ table, h4 ~ ul, h4 ~ ol, h4 ~ dl, h4 ~ pre, h4 ~ hr,
	h5 ~ p, h5 ~ div, h5 ~ table, h5 ~ ul, h5 ~ ol, h5 ~ dl, h5 ~ pre, h5 ~ hr,
	h6 ~ p, h6 ~ div, h6 ~ table, h6 ~ ul, h6 ~ ol, h6 ~ dl, h6 ~ pre, h6 ~ hr {
		margin: 0 0 0 28px;
	}
	h1 ~ ul, h1 ~ ol,
	h2 ~ ul, h2 ~ ol,
	h3 ~ ul, h3 ~ ol,
	h4 ~ ul, h4 ~ ol,
	h5 ~ ul, h5 ~ ol,
	h6 ~ ul, h6 ~ ol {
		margin: 0 0 0 56px;
	}



/* -------------------------------------------------------------------------------------------------
	ヘッダー
------------------------------------------------------------------------------------------------- */

	header {
		width: 100%;
		height: 67px;
		margin: 0;
		padding: 0.5em 0 0 0;
		box-shadow: 0px -2px 10px rgba(0,0,0,0.3);
		background-color: #FFFFFF;
		text-align: center;
	}
	#headerinfo {
		width: 800px;
		text-align: left;
		margin: auto;
	}
	/* サイト名 */
	#headerinfo .sitename {
		float: left;
		margin: 0.8em 1em 0 1em;
		color: #555555;
		font-weight: bold;
		font-size: 170%;
	}
	#headerinfo .sitename a {
		color: #555555;
		text-decoration: none;
	}
	#headerinfo .sitename a:hover {
		color: #555555;
	}

	/* メインメニュー */
	#mainmenu {
		float: right;
		margin: 0 1em 0 0;
		padding: 0;
	}
	#mainmenu ul {
		margin: 0;
		padding: 0;
	}
	#mainmenu ul li {
		list-style-type: none;
		list-style-image: none;
		float: left;
		margin: 1.2em 0;
		padding: 0;
	}
	#mainmenu a {
		margin: 0 0.2em;
		padding: 0.2em 0.5em;
		border-radius: 5px;
		color: #5070A0;
		font-weight: bold;
		font-size: 130%;
		text-decoration: none;
	}
	#mainmenu a:hover {
		background-color: #E3EBF3;
		color: #5070A0;
	}
	#mainmenu a.presentpage, a.presentpage:hover {
		background-color: #5070A0;
		color: #FFFFFF;
	}



/* -------------------------------------------------------------------------------------------------
	コンテンツ（ヘッダーとフッターの間全体）
------------------------------------------------------------------------------------------------- */

	#contents {
		clear: left;
		width: 800px;
		margin: 0.5em auto 3em auto;
		padding: 1em 0;
		text-align: left;
	}

	/* 更新履歴 */
	.update div {
		margin-left: 0;
	}

	/* トップページのおすすめソフトウェア */
	.topinfo {
		clear: both;
		margin: 2em 0 3em 0;
		padding: 0;
	}
	/* 見出し */
	.topinfo .catmemonote {
		margin: 0 0 0.5em 0;
		padding: 0.5em 0.5em 0.4em 0;
		background: url('./picture/h1back.png') no-repeat 0 100%;
		font-weight: bold;
		font-size: 220%;
		white-space: nowrap;
	}
	/* 見出しのアイコン */
	.topinfo .catmemonote img {
		vertical-align: bottom;
		margin: 0 10px 0 5px;
	}
	/* 左側のイメージ */
	.topinfo .image {
		float: left;
		margin: 0 1em 0 0;
		padding: 3px;
	}
	/* 右側の情報・ダウンロードボタン */
	.topinfo .info {
		margin: 0;
		padding: 120px 0 0 0;
	}

	/* バージョン番号 */
	.topinfo .version {
		font-size: 80%;
		color: #AAAAAA;
		padding: 0 0.5em;
	}

	/* サイト情報 */
	dl.site_about dt {
		padding: 0;
		margin: 0;
		float: left;
		clear: left;
		width: 10em;
		margin: 0 0 0.5em 0;
		font-weight: bold;
	}
	dl.site_about dd {
		margin: 0 0 0.5em 0;
		padding: 0 0 0 10em;
	}

	/* ソフトウェアの一覧 */
	.softwarelist {
		margin: 1em 1em 1.5em 28px;
	}
	.softwarelist_img {
		float: left;
		margin: 0.5em 0.5em 0.5em 0;
	}
	.softwarelist_name {
		font-weight: bold;
		font-size: 105%;
	}

	/* αPng Converterサンプル用背景 */
	.pngconv {
		background-image: url('./picture/back_move.gif');
	}



/* -------------------------------------------------------------------------------------------------
	フッター
------------------------------------------------------------------------------------------------- */

	footer {
		margin: 2em 0 0 0;
		padding: 0;
		text-align: center;
	}



/* -------------------------------------------------------------------------------------------------
	トピックパス（パンくずリスト）
------------------------------------------------------------------------------------------------- */

	.topicpath {
		padding: 0.5em 0 0.5em 0;
	}
	.topicpath > ul {
		padding: 0;
		margin: 0
	}
	.topicpath > ul > li {
		display: inline-block;
		padding: 0;
		margin: 0;
		color: #AAAAAA;
	}
	.topicpath > ul > li:after {
		padding: 0 0.3em 0 0.6em;
		content: "›";
	}
	.topicpath > ul > li:last-child:after {
		content: none;
	}
	.topicpath > ul > li > a.current {
		color: #333333;
		text-decoration: none;
	}
	.topicpath > ul > li > a.current:hover {
		color: #333333;
		text-decoration: underline;
	}



/* -------------------------------------------------------------------------------------------------
	テーブル
------------------------------------------------------------------------------------------------- */

	/* データ・リスト用のテーブル */
	table.datalist {
		width: 100%;
		margin: 0.5em 0;
		border: 1px solid #D0D0D0;
		border-radius: 6px;
		border-spacing: 0;
	}
	table.datalist tr:nth-child(odd) {
		background: #FFFFFF;
	}
	table.datalist tr:nth-child(even) {
		background: #FFFFFF;
	}
	table.datalist th {
		padding: 0.3em 0.5em;
		border-right: 1px solid #D0D0D0;
		background: -webkit-gradient(linear, top, bottom, from(#FFFFFF), to(#EEEEEE));
		background: -webkit-linear-gradient(#FFFFFF, #EEEEEE);
		background: -moz-linear-gradient(#FFFFFF, #EEEEEE);
		background: -ms-linear-gradient(#FFFFFF, #EEEEEE);
		background: -o-linear-gradient(#FFFFFF, #EEEEEE);
		background: linear-gradient(#FFFFFF, #EEEEEE);
		background-color: #F8F8F8;
	}
	table.datalist th:first-child {
		border-radius: 4px 0 0;
	}
	table.datalist th:last-child {
		border-right:none;
		border-radius: 0 4px 0 0;
	}
	table.datalist td {
		padding: 0.1em 0.5em;
		border-top: 1px solid #D0D0D0;
		border-right: 1px solid #D0D0D0;
	}
	table.datalist tr:last-child td:first-child {
		border-radius: 0 0 0 2px;
	}
	table.datalist td:last-child {
		border-right: none;
	}
	table.datalist tr:last-child td:last-child {
		border-radius: 0 0 2px;
	}

	/* サンプル画像のテーブル */
	.sample {
		margin: 1em 0 1em 0;
		padding: 0;
		border: none;
	}
	.sample td {
		margin: 0;
		padding: 0.5em;
	}
	.sample tr {
		margin: 0;
		padding: 0;
	}
	.sample .sampleimage {
		margin: 8px 3px;
		box-shadow: 0 1px 3px #DDDDDD;
	}
	.sample .sampleimage a:hover {
		opacity: 0.8;
	}



/* -------------------------------------------------------------------------------------------------
	メールフォーム
------------------------------------------------------------------------------------------------- */

	/* フォーム全体のテーブル */
	.mailfoam table {
		margin: 1em 0;
		padding: 15px;
		border: solid 1px #BDBDBD;
		border-radius: 2px;
		box-shadow: 1px 1px 5px #EEEEEE;
		background-color: #FFFFFF;
		border-collapse: separate;
		border-spacing: 0;
	}
	.mailfoam table td {
		padding: 1px;
	}
	/* 配置 */
	.mailfoam .formheader {		text-align: left;	}
	.mailfoam .name {			text-align: right;	}
	.mailfoam .mailaddress {	text-align: right;	}
	.mailfoam .message {		text-align: left;	}
	.mailfoam .submit {			text-align: center;	}

	/* インプットボックスとテキストエリア */
	.mailfoam textarea, .mailfoam input {
		background-color: #FFFFFF;
		border: solid 1px #BDBDBD;
		color: #3E443E;
		font-size: 100%;
		margin: 0.2em;
		padding: 0.2em;
		border-radius: 2px;
		box-shadow: inset 0 1px 2px #EEEEEE;
	}
	.mailfoam input[type="text"] {
		width: 240px;
	}
	.mailfoam textarea {
		width: 560px;
		height: 200px;
		min-width: 320px;
		min-height: 50px;
	}

	/* 送信ボタン */
	.mailfoam button {
		margin: 0;
		padding: 0.2em 2em;
		border: solid 1px #5070A0;
		border-radius: 3px;
		background-color: #E3EBF3;
		color: #5070A0;
		font-size: 100%;
		text-decoration: none;
		text-shadow: 1px 1px 1px #FFFFFF;
		cursor: pointer;
		background: -webkit-gradient(linear, top, bottom, from(#FFFFFF), to(#E3EBF3));
		background: -webkit-linear-gradient(#FFFFFF, #E3EBF3);
		background: -moz-linear-gradient(#FFFFFF, #E3EBF3);
		background: -ms-linear-gradient(#FFFFFF, #E3EBF3);
		background: -o-linear-gradient(#FFFFFF, #E3EBF3);
		background: linear-gradient(#FFFFFF, #E3EBF3);
	}
	.mailfoam button:hover {
		color: #6080F0;
		border: 1px solid #6080F0;
		background-color: #E3EBF3;
		background: -webkit-gradient(linear, top, bottom, from(#DDDDFF), to(#E3EBF3));
		background: -webkit-linear-gradient(#FFFFFF, #E3EBF3);
		background: -moz-linear-gradient(#FFFFFF, #E3EBF3);
		background: -ms-linear-gradient(#FFFFFF, #E3EBF3);
		background: -o-linear-gradient(#FFFFFF, #E3EBF3);
		background: linear-gradient(#FFFFFF, #E3EBF3);
	}
	.mailfoam button:active {
		position: relative;
		top: 1px;
	}

	/* 必須項目 */
	.mailfoam .required {
		position: relative;
		padding-left: 1em;
	}
	.mailfoam .required:after {
		content: "*";
		position: absolute;
		top: auto;
		left: 2px;
		color: #FF8888;
	}

	/* 郵便記号（〒） */
	.mailfoam .postmark {
		font-weight: bold;
		padding: 0 0.5em;
		color: #CD351A;
	}



/* -------------------------------------------------------------------------------------------------
	ディレクトリ構成
------------------------------------------------------------------------------------------------- */

	.directory {
		position: relative;
		margin-top: 0.5em;
		padding: 1em 0;
		border-width: 1px 1px 1px 1px;
		border-color: #D0D0D0;
		border-style: solid;
		border-radius: 6px;
		background-color: #F8F8F8;
	}
	/* ファイル・フォルダ */
	.directory div {
		display: inline-block;
		font-style: italic;
	}
	/* パーミッション */
	.directory div.permission {
		position: absolute;
		left: 16em;
		font-style: normal;
	}
		.directory div.permission2 {
			position: absolute;
			left: 21em;
			font-style: normal;
		}
	/* 備考 */
	.directory div.notes {
		position: absolute;
		left: 25em;
		font-style: normal;
	}
		.directory div.notes2 {
			position: absolute;
			left: 30em;
			font-style: normal;
		}

	/* フォルダ */
	.directory .folder {
		padding-left: 1.5em;
		background: url("./icon/icon_folder.png") no-repeat 0 50%;
	}
	/* ファイル */
	.directory .file {
		padding-left: 1.5em;
		background: url("./icon/icon_file.png") no-repeat 0 50%;
	}

	/* 階層線の表示 */
	.directory ul {
		margin: 0;
		padding: 0;
		line-height: 1.5;
	}
	.directory ul li {
		list-style: none;
		margin: 0 0 0 0.5em;
		padding: 0;
		border-left: 1px solid #DDDDDD;
	}
	.directory ul li:before {
		float: left;
		width: 1em;
		height: 0.75em;
		margin-right: 0.5em;
		border-bottom: 1px solid #DDDDDD;
		overflow: hidden;
		content: "";
	}
	.directory ul li:last-child {
		border: none;
	}
	.directory ul li:last-child:before {
		border-left: 1px solid #DDDDDD;
	}
	.directory ul li ul {
		margin-left: 1.5em;
	}

	/* 先頭フォルダの階層線のリセット */
	.directory ul li.topdir:before {
		border-bottom: none;
	}
	.directory ul li.topdir:last-child:before {
		border-left: none;
	}



/* -------------------------------------------------------------------------------------------------
	番号付き見出し
------------------------------------------------------------------------------------------------- */
	.process {
		margin-bottom: 2em;
	}
	.process h2 {
		position: relative;
		margin: 1em 0 0 0;
		padding: 0.2em 0 0.2em 28px;
		background: none;
		font-weight: bold;
		font-size: 120%;
		counter-increment: number;
	}
	.process h2:before {
		position: absolute;
		top: -1px;
		left: -4px;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		box-shadow: 0 1px 0px #55AA55;
		background-color: #B3F6B3;
		content: "";
	}
	.process h2:after {
		position: absolute;
		top: 2px;
		left: 4px;
		content: counter(number);
	}



/* -------------------------------------------------------------------------------------------------
	その他
------------------------------------------------------------------------------------------------- */

	/* イラストギャラリー */
	.gallery {
		margin: 4em 0 20em;
		text-align: center;
	}


	/* ダウンロードボタンのリンク */
	.button-download {
	}
	.button-download:hover {
		opacity: 0.8;
	}

	/* 回り込み左 */
	.floatleft {
		float: left;
		margin: 0 1em 1em 1em;
	}
	/* 回り込み右 */
	.floatright {
		float: right;
		margin: 0 1em 1em 1em;
	}
	/* 回り込みクリア */
	.floatclear {
		clear: both;
	}

	/* 中央揃え */
	.center {
		text-align: center;
	}

	/* 新しい機能 */
	.new_features {
		margin: 0;
		padding: 0.2em 0.8em;
		border-radius: 5px;
		background: -webkit-gradient(linear, top, bottom, from(#72DABA), to(#33BB88));
		background: -webkit-linear-gradient(#72DABA, #33BB88);
		background: -moz-linear-gradient(#57CFA8, #33BB88);
		background: -ms-linear-gradient(#33BB88, #33BB88);
		background: -o-linear-gradient(#33BB88, #33BB88);
		background: linear-gradient(#33BB88, #33BB88);
		background-color: #33BB88;
		color: #FFFFFF;
		font-weight: bold;
		text-decoration: none;
		text-shadow: 2px 2px 2px #03692A;
	}

	/* 注釈 */
	.comment {
		cursor: help;
	}

	/* 注意点 */
	.attention {
		color: #FF0000;
	}

	/* 詳細 */
	.detail {
		color: #ACACAC;
	}

	/* 参照 */
	.reference {
		cursor: help;
		color: #55AA55;
		border-bottom: dotted 1px #55AA55;
	}

	.perl {
	}
	.php {
	}
	.ajax {
		color: #99DD88;
	}
	.html5 {
		color: #8899DD;
	}
	.javaapplet {
		color: #DD8899;
	}
	.flash {
		color: #DDAA88;
	}

	/* カラー */
	.color_red {			color: #FF0000;		}
	.color_blue {			color: #3355FF;		}
	.color_gray {			color: #AAAAAA;		}
	.color_indigo {			color: #0066AA;		}
	.color_green {			color: #33AA33;		}
	.color_bluegreen {		color: #00AA66;		}
	.color_orange {			color: #FF8800;		}

	/* 枠 */
	.box {
		margin: 0 0 0 28px;
		padding: 0.5em 1em;
		border-width: 1px 1px 1px 1px;
		border-color: #D0D0D0;
		border-style: solid;
		border-radius: 6px;
		background-color: #F8F8F8;
	}

	/* 警告枠 */
	.boxattention {
		margin: 0.5em 0;
		padding: 0.5em 1em;
		border-width: 1px 1px 1px 1px;
		border-color: #FF8888;
		border-style: solid;
		border-radius: 6px;
		background-color: #FFEEEE;
	}

	/* その他の情報枠（コラム・備考など） */
	.boxinto {
		margin: 0;
		padding: 1em 2em 1em 70px;
		border: 1px solid #D0A070;
		border-radius: 10px;
		box-shadow: 1px 1px 3px rgba(199,176,100,0.2);
		background: #FFFFDD url("./picture/teachercat.png") no-repeat 10px 50%;
		color: #4F3800;
	}

	/* ページ下の画像など */
	.onepoint {
		margin: 100px 0;
		text-align: center;
	}